feat: 工具盒视觉重设计 + 个人中心详情弹窗

本次提交对全部工具入口页(MorePage)进行了全面的信息架构和视觉升级,并为个人中心新增卡片点击详情弹窗。

## 工具盒(MorePage)重设计
- 工具卡片增加 useCase 使用场景说明和 tags 标签行,帮助用户快速理解每个工具的适用场景
- 核心工具(Featured)卡片新增 kicker 标题、steps 操作步骤、outcome 产出说明,强化工作流引导
- 新增 ToolComparePanel 组件,为每个工具展示 Before/After 对比示意舞台
- 分类筛选按钮新增计数徽章,展示每个分类下的工具数量
- 页面头部新增 eyebrow(AI Tool Hub)+ 工具概览统计信息
- 最近使用区域增加分类标签副标题
- 空分类场景新增引导式空状态面板
- 全面补充 aria-label 和无障碍键盘支持

## 个人中心详情弹窗
- 新增 ProfileDetailSelection 类型和 openDetailSelection/closeDetailSelection 流程
- 使用 createPortal 渲染详情弹窗,支持代表作和资产两种详情视图
- 弹窗内支持媒体预览(图片/视频)、元数据展示、下载和删除操作
- 列表卡片(代表作/项目/资产)改为 interactive-card,支持键盘 Enter/Space 激活
- 删除项目按钮增加 event.stopPropagation 防止冒泡触发卡片点击
- 弹窗打开时锁定 body 滚动,Esc 键关闭

## App.tsx 适配
- 传递 setTasks 给 ProfilePage,支持代表作移除操作
- 传递 onOpenProject 回调,支持从个人中心打开项目

## CSS 样式升级
- more.css: 全面重设页头布局(grid 三栏)、筛选胶囊、核心卡片 Before/After 舞台、步骤条、响应式适配
- profile.css: 新增详情弹窗 overlay/panel/preview 布局、交互卡片 hover/focus 状态
- dark-green.css: 工具盒与详情弹窗的深绿主题样式约 780 行
This commit is contained in:
2026-06-07 11:42:00 +08:00
parent 5bdeac20fb
commit 4530058648
6 changed files with 2514 additions and 111 deletions
+3
View File
@@ -263,6 +263,7 @@ function App() {
// Task store
const tasks = useTaskStore((s) => s.tasks);
const setTasks = useTaskStore((s) => s.setTasks);
const appendTask = useTaskStore((s) => s.appendTask);
const mergeServerTasks = useTaskStore((s) => s.mergeServerTasks);
const clearTasks = useTaskStore((s) => s.clearTasks);
@@ -1042,6 +1043,8 @@ function App() {
onOpenWorkbench={() => handleSetView("workbench")}
onOpenCommunity={() => handleSetView("community")}
onDeleteProject={handleDeleteProject}
onOpenProject={handleOpenProject}
onRemoveWork={(task) => setTasks(tasks.filter((item) => item.id !== task.id))}
/>
);
case "community":