From 453005864862d84fc25a93528f3b4d27ac21ff6f Mon Sep 17 00:00:00 2001 From: ludan <251918489@qq.com> Date: Sun, 7 Jun 2026 11:42:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E5=85=B7=E7=9B=92=E8=A7=86?= =?UTF-8?q?=E8=A7=89=E9=87=8D=E8=AE=BE=E8=AE=A1=20+=20=E4=B8=AA=E4=BA=BA?= =?UTF-8?q?=E4=B8=AD=E5=BF=83=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 本次提交对全部工具入口页（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 行 --- src/App.tsx | 3 + src/features/more/MorePage.tsx | 184 ++++- src/features/profile/ProfilePage.tsx | 261 +++++++- src/styles/pages/more.css | 966 ++++++++++++++++++++++++--- src/styles/pages/profile.css | 428 ++++++++++++ src/styles/themes/dark-green.css | 783 ++++++++++++++++++++++ 6 files changed, 2514 insertions(+), 111 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 91e878f..e5732d8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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": diff --git a/src/features/more/MorePage.tsx b/src/features/more/MorePage.tsx index e5e42ef..3013d0a 100644 --- a/src/features/more/MorePage.tsx +++ b/src/features/more/MorePage.tsx @@ -12,7 +12,7 @@ import { ThunderboltOutlined, VideoCameraOutlined, } from "@ant-design/icons"; -import type { ReactNode } from "react"; +import type { CSSProperties, ReactNode } from "react"; import { useCallback, useEffect, useState } from "react"; import type { WebImageWorkbenchTool, WebViewKey } from "../../types"; @@ -28,6 +28,8 @@ interface MoreTool { id: string; title: string; text: string; + useCase: string; + tags: string[]; icon: ReactNode; category: ToolCategory; target?: WebViewKey; @@ -37,23 +39,77 @@ interface MoreTool { featured?: boolean; } +type CompareScene = + | "workbench" + | "inpaint" + | "camera" + | "upscale" + | "watermark" + | "dialog" + | "subtitle" + | "digital-human" + | "character" + | "avatar"; + +const toolCompareScenes: Record = { + workbench: "workbench", + inpaint: "inpaint", + camera: "camera", + upscale: "upscale", + watermarkRemoval: "watermark", + dialogGenerator: "dialog", + subtitleRemoval: "subtitle", + digitalHuman: "digital-human", + characterMix: "character", + avatarConsole: "avatar", +}; + +function ToolComparePanel({ scene }: { scene: CompareScene }) { + return ( +