From 1b50511a4ffb7feb9c11beba89a909b20e721c11 Mon Sep 17 00:00:00 2001 From: "Shin@HOME" Date: Mon, 20 Apr 2026 23:38:26 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=8E=9F=E5=9E=8B=20?= =?UTF-8?q?=E5=B0=BD=E9=87=8F=E5=AE=8C=E6=95=B4=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .cursor/changelog/.changelog-ack | 0 .cursor/changelog/changelog-full.md | 43 + .cursor/changelog/changelog-headlines.md | 4 +- .cursor/changelog/changelog-recent.md | 9 +- art-agent/frontend/package-lock.json | 1502 ++++++++++++++++- art-agent/frontend/package.json | 4 +- art-agent/frontend/src/app/docs/page.tsx | 254 +++ art-agent/frontend/src/app/gallery/page.tsx | 291 +++- art-agent/frontend/src/app/layout.tsx | 13 +- art-agent/frontend/src/app/page.tsx | 60 +- .../src/components/chat/task-card.tsx | 108 +- .../src/components/chat/task-type-tabs.tsx | 85 + .../src/components/detail/model-3d-panel.tsx | 262 +++ .../src/components/detail/motion-panel.tsx | 259 +++ .../src/components/docs/asset-picker.tsx | 206 +++ .../src/components/docs/command-palette.tsx | 494 ++++++ .../src/components/docs/doc-editor.tsx | 315 ++++ .../src/components/docs/doc-outline.tsx | 216 +++ .../frontend/src/components/docs/doc-tabs.tsx | 87 + .../frontend/src/components/docs/doc-tree.tsx | 464 +++++ .../src/components/docs/markdown-content.tsx | 240 +++ .../src/components/layout/top-nav.tsx | 13 + .../src/components/ui/motion-presets.ts | 2 +- .../src/components/workbench/params-3d.tsx | 138 ++ .../components/workbench/params-motion.tsx | 200 +++ art-agent/frontend/src/lib/app-context.tsx | 231 +++ .../frontend/src/lib/placeholder-store.ts | 349 ++++ art-agent/frontend/src/lib/types.ts | 143 ++ art-agent/frontend/tsconfig.tsbuildinfo | 1 + 29 files changed, 5938 insertions(+), 55 deletions(-) create mode 100644 .cursor/changelog/.changelog-ack create mode 100644 art-agent/frontend/src/app/docs/page.tsx create mode 100644 art-agent/frontend/src/components/chat/task-type-tabs.tsx create mode 100644 art-agent/frontend/src/components/detail/model-3d-panel.tsx create mode 100644 art-agent/frontend/src/components/detail/motion-panel.tsx create mode 100644 art-agent/frontend/src/components/docs/asset-picker.tsx create mode 100644 art-agent/frontend/src/components/docs/command-palette.tsx create mode 100644 art-agent/frontend/src/components/docs/doc-editor.tsx create mode 100644 art-agent/frontend/src/components/docs/doc-outline.tsx create mode 100644 art-agent/frontend/src/components/docs/doc-tabs.tsx create mode 100644 art-agent/frontend/src/components/docs/doc-tree.tsx create mode 100644 art-agent/frontend/src/components/docs/markdown-content.tsx create mode 100644 art-agent/frontend/src/components/workbench/params-3d.tsx create mode 100644 art-agent/frontend/src/components/workbench/params-motion.tsx create mode 100644 art-agent/frontend/tsconfig.tsbuildinfo diff --git a/.cursor/changelog/.changelog-ack b/.cursor/changelog/.changelog-ack new file mode 100644 index 0000000..e69de29 diff --git a/.cursor/changelog/changelog-full.md b/.cursor/changelog/changelog-full.md index 30f2aa8..2987773 100644 --- a/.cursor/changelog/changelog-full.md +++ b/.cursor/changelog/changelog-full.md @@ -4,6 +4,49 @@ ## 记录 +### [CL-20260420-2237] 2026-04-20 22:37 — 前端一次性铺开文档中心 / 3D / 动作三大功能 UI(占位实现 + Phase 2 徽章) +- **tags**: 前端, UI, 文档中心, 3D, 动作序列, 命令面板, 工作台, 资源库, 占位实现, Phase 2, react-markdown, model-viewer +- **affected_files**: + - art-agent/frontend/package.json(新增 `react-markdown@9` / `remark-gfm@4`) + - art-agent/frontend/src/lib/types.ts(扩展 DocNode / DocTabState / View3D / Asset3D / AssetMotion / TaskType / Params3D / ParamsMotion) + - art-agent/frontend/src/lib/placeholder-store.ts(新增 docs/assets3D/assetsMotion 的 load/save/upsert/delete + 样本数据 SAMPLE_DOC_*) + - art-agent/frontend/src/lib/app-context.tsx(加入 docs/assets3D/assetsMotion/sessionTaskType/commandPaletteOpen 状态与 mutation 回调) + - art-agent/frontend/src/app/layout.tsx(挂载 `` 全局;`` 用 `next/script` lazyOnload 注入) + - art-agent/frontend/src/components/layout/top-nav.tsx(在「工作台」后插入「文档」Tab,带 Phase 1 徽章) + - art-agent/frontend/src/app/docs/page.tsx(新增文档中心三栏页面:DocTree + DocTabs + DocEditor + DocOutline) + - art-agent/frontend/src/components/docs/doc-tree.tsx / doc-tabs.tsx / doc-editor.tsx / doc-outline.tsx / markdown-content.tsx / asset-picker.tsx / command-palette.tsx(新建) + - art-agent/frontend/src/components/chat/task-type-tabs.tsx(新增 2D/3D/动作任务类型切换 Tab) + - art-agent/frontend/src/components/workbench/params-3d.tsx / params-motion.tsx(新增 3D / 动作参数条,占位) + - art-agent/frontend/src/app/page.tsx(工作台注入 TaskTypeTabs + 按类型条件渲染 Params3D / ParamsMotionBar) + - art-agent/frontend/src/components/chat/task-card.tsx(新增 variant 属性:image2d/model3d/motion,颜色/图标/专有字段全套切换) + - art-agent/frontend/src/components/detail/model-3d-panel.tsx(新增:多视图/360°占位/ 三模式 + 通道切换 + 视图缩略条;360° 旋转用 framer-motion `rotateY` + SVG 替代 styled-jsx 避免多行 className 编译错误) + - art-agent/frontend/src/components/detail/motion-panel.tsx(新增:视频/帧序列双模式 + 播放 scrubber + MP4/GIF/帧序列占位下载) + - art-agent/frontend/src/app/gallery/page.tsx(资源库顶部加模态 Tab「图片/3D 模型/动作序列」+ Assets3DGrid / AssetsMotionGrid 两个子组件;3D/MOTION 徽章和视角/帧数徽章叠加显示;接 detail 面板) + - art-agent/frontend/src/components/ui/motion-presets.ts(`sendBounce` 的 `ease: "easeInOut"` 加 `as const`,修预存 framer-motion 类型错误不阻塞 build) +- **what**: + 按用户一次性铺开「文档管理中心(类似 Cursor)/ 3D 模型生成 / 动作生成」全部界面元素与交互的要求,用占位实现把所有入口、组件、面板、参数条、徽章与跳转都先打通: + 1. 文档中心:`/docs` 三栏布局(树/Tab+编辑器/大纲),支持 Markdown textarea 编辑 + react-markdown 预览 + 分屏、`[[asset:id]]` 资产引用(图片/角色/风格)在正文内渲染为交互卡片、拖拽/重命名/新建/删除、AssetPicker 浮层。 + 2. 命令面板:Cmd/Ctrl+K 全站 CommandPalette,整合导航/动作/文档/图片/角色/风格/会话的统一搜索。 + 3. 工作台扩展:任务类型 Tab(2D/3D/动作),按类型显示不同参数条(`Params3D` 含管道/视图数/分辨率,`ParamsMotionBar` 含模型/帧数/帧率/循环/输出/角色绑定/动作描述);`TaskCard` 加 `variant` 区分颜色/图标/描述/专有字段(3D 显示管道+视图数+产物,动作显示帧数+循环+产物)。 + 4. 结果详情:`Model3DPanel` 支持多视图切换(color/normal/stylized 三通道 + 视图缩略条)/ 360°占位旋转 / `` 模型预览三模式;`MotionPanel` 支持视频/帧序列双模式 + 播放 scrubber。 + 5. 资源库:顶部新增模态 Tab(图片/3D 模型/动作序列)+ 计数徽章 + Phase 徽章;3D 网格叠 `3D` 徽章+视角数,动作网格叠 `MOTION` 徽章+帧数·fps + hover 自动播放视频。 +- **why**: + 用户明确要求"所有功能都先用占位把界面元素和交互实现出来,避免后续反复返工"。选择"一次性完整铺开"策略而非渐进式,可让用户在真实管线(Mesh Pipeline / 动作生成后端)接入前就能验收完整 UX 流与设计语言一致性,减少后端开发时 UI 的认知负担。 +- **decisions**: + - 选 **react-markdown + remark-gfm** 轻量 textarea 方案(否决 Monaco/TipTap:文档场景还不需要代码折叠/语法高亮/WYSIWYG,先保持依赖干净)。 + - **站内 Cmd+K 命令面板**统一搜索(否决每页独立搜索:符合 Cursor 风格且跨域跳转一致)。 + - 3D 预览走 **`` 自定义元素**(否决 three.js/react-three-fiber:占位阶段用现成自定义元素最省代码,真实接入时只需把 `asset.meshUrl` 换成真实 GLB 路径;用 `next/script` lazyOnload 避免阻塞首屏)。 + - 动作预览走 **HTML5 `