4530058648
本次提交对全部工具入口页(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 行