交互原型 尽量完整版

This commit is contained in:
2026-04-20 23:38:26 +08:00
parent d6e1797f08
commit 1b50511a4f
29 changed files with 5938 additions and 55 deletions

View File

@@ -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挂载 `<CommandPalette />` 全局;`<model-viewer>``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°占位/<model-viewer> 三模式 + 通道切换 + 视图缩略条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. 工作台扩展:任务类型 Tab2D/3D/动作),按类型显示不同参数条(`Params3D` 含管道/视图数/分辨率,`ParamsMotionBar` 含模型/帧数/帧率/循环/输出/角色绑定/动作描述);`TaskCard``variant` 区分颜色/图标/描述/专有字段3D 显示管道+视图数+产物,动作显示帧数+循环+产物)。
4. 结果详情:`Model3DPanel` 支持多视图切换color/normal/stylized 三通道 + 视图缩略条)/ 360°占位旋转 / `<model-viewer>` 模型预览三模式;`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 预览走 **`<model-viewer>` 自定义元素**(否决 three.js/react-three-fiber占位阶段用现成自定义元素最省代码真实接入时只需把 `asset.meshUrl` 换成真实 GLB 路径;用 `next/script` lazyOnload 避免阻塞首屏)。
- 动作预览走 **HTML5 `<video>`**(否决 GIFmp4 文件更小 + 支持帧擦写GIF 只作下载选项保留)。
- 「文档」Tab 放 **TopNav 第 2 位**(「工作台」之后),符合用户对"近 workspace"的访问距离预期。
- Model3D 面板的 360°预览**放弃 styled-jsx CSS 立方体**6 face 的 styled-jsx 触发 webpack 对多行 className 的解析错误),改用 framer-motion `rotateY` 驱动 SVG 六边形,更简洁且不会和 webpack 打架。
- **notes**:
1. 所有新组件均标 `phase-chip`(文档 Phase 1 / 3D·动作 Phase 2真实链路接入时只需替换 placeholder-store 的 loader 和 `upsert*` 的写入方向。
2. `<model-viewer>` 脚本是从 unpkg lazyOnload 加载,生产环境若断网/被墙 3D 模式会静默降级(只显示占位文案),可在 Phase 2 接入时改为本地打包。
3. `chat-input.tsx` 的 framer-motion 类型错误(`ease: string` 不匹配新版 `Easing` 联合类型)顺手在 `motion-presets.ts` 源头用 `as const` 修掉,`npx next build` 已通过全绿。
4. TopNav 的「文档」Tab 是全站入口,新建文档/打开文档走 Ctrl/Cmd+K 也能到,两者使用同一份 `docs` 状态。
5. 资源库的 3D / 动作模态下不显示「收藏/标签/视图切换」等图片专属工具栏(条件分支上移到 `<main>` 内部),避免误导用户这些控件对 3D/动作生效。
- **source_chat**: [前端铺开三大功能占位 UI](4f55b11a-3572-47e2-8292-7d815773e7ad)
### [CL-20260420-1800] 2026-04-20 18:00 — Mesh Pipeline Phase 3 风格还原接入IP-Adapter + ControlNet
- **tags**: 视角变换, Mesh Pipeline, 风格还原, IP-Adapter, ControlNet, Replicate, style_restorer, 后端, services, config, Phase 3
- **affected_files**: