@ninkch/dsh-infinite-canvas 0.18.6 → 0.18.7

package/docs/UI-RULES.md

@@ -0,0 +1,70 @@
+# UI 规范与约束（画布插件）
+
+> 本文件是维护者逐轮验收中明确提出的硬性要求，属于**不可回退的产品约束**。
+> 任何 UI 改动提交前必须对照本清单自检；违反其中任一条 = 回归缺陷。
+
+## 一、面板整体
+
+1. **画布面板顶部不得留空白带**：工具栏紧贴顶部，不保留任何 top clearance / 占位内距。
+2. 顶部工具栏最左是**项目名**（可点击下拉），项目名左侧是**纯 `<` 图标**的返回按钮（**不显示「返回会话」文字**）。
+3. **顶部工具栏不显示当前画布名**（画布名从项目下拉与右侧面板查看）。
+4. 右侧面板只负责**当前项目**：画布树、新建画布、改名、删除、折叠、搜索。**不提供「新建项目」**（新建项目统一走左上角项目名下拉）。
+
+## 二、视觉语言（反复强调，必须遵守）
+
+5. **禁止任何灰蓝色 UI**。典型反例：`--dsw-alias-bg-overlay`（浅色主题下真实值是 #e9ecf2 灰蓝）。全部弹层/面板底色一律使用 **`var(--dsw-alias-bg-layer-1)`**（浅色纯白、深色主题自动跟随）。
+6. **禁止半透明底色**：不出现 `rgba(...)` 半透明容器底色，不使用 `backdrop-filter` 模糊底。必须是**实底**。
+7. 弹层统一：`1px solid var(--dshic-line2)` + 圆角 14–16px + `var(--dshic-shadow-lg)`；hover 用 `var(--dsw-alias-interactive-bg-hover)`；选中浅色用 `--dshic-accent-soft` + `--dshic-accent`，深色用 brand 轻混合 + brand 文字。
+8. **界面不要出现大段文字**：能用图标表达就不要用文字；必须说明的内容用 tooltip / `ⓘ` 收进折叠区，不要平铺展示。
+9. 视觉细节以已验收原型 `node-redesign-mockup.html` 为准（该文件只读，不得修改）。
+
+## 三、左侧图标列
+
+10. 图标列**不得有任何外框**：无 `border`、无 `background`、无 `box-shadow`、无 `border-radius`（不要卡片、不要描边、不要底色）。
+11. 图标列**垂直居中悬浮在左栏中间**，**不撑满上下边**。正确实现是**两层结构**：外层 `.dshic-rail` 只负责占位（宽 46px、透明、`position:relative`），内层 `.dshic-rail-inner` 用 `position:absolute; top:50%; transform:translateY(-50%)` 居中。**不要用 `align-self:center` + `margin:auto 0`**——它会被父级 `align-items:stretch` 拉成整列高，看起来像"满高白色卡片"，这是历史上反复复发的问题（第三次返工才根治）。
+12. 图标顺序：文本 / 剧本 / 分镜表 / 图片 / 视频 / 成片 / 资产 / 设定集 / 运行工作流；hover 才有轻量反馈。
+
+## 四、项目下拉（左上角）
+
+13. 项目行**单行显示**：`项目名 · 画布名`（画布名次要色、小一号），**不允许画布名单独占第二行**，不允许项目名后留大段空白。
+14. **≤5 个项目时高度按实际行数自适应**（无空白占位）；**只有 >5 项时**才固定 5 行高并分页。
+15. **分页放在列表底部，且带页码跳转输入框**：`‹ [输入页码] / N ›`（左右箭头翻页；数字输入框回车/失焦跳转，非法值夹取到 1..N，非法文本不改变当前页）；**>5 项才渲染**，≤5 项整行不渲染、不占位。
+16. 下拉内提供**搜索框**（输入即过滤，过滤结果同样按 5 行分页）；搜索框**内部右侧内嵌放大镜**（`position:absolute; right:8px`、`pointer-events:none`），搜索框保持单一边框，容器不得有第二层框/底色。
+17. 当前项目选中态**只用蓝色底/蓝字**，**不显示 ✓**。
+18. 项目行右侧有**铅笔**可改名；**当前项目行同样可改名**（行内就地编辑，Enter 提交 / Esc 取消 / 失焦提交 / 空名拒绝）。
+19. 命名一律**就地编辑**（不弹窗）；新建项目/新建画布才用命名弹窗。**新建项目 = 搜索框左侧的纯 `+` 图标按钮**（无文字、无外框、无底色，仅 tooltip），不在下拉底部单独占一行。
+
+## 五、右侧项目面板
+
+20. 只显示**当前项目**；项目行可改名、可删除；子画布行可切换、改名、删除。
+21. **画布总数为 1 时隐藏删除按钮**（默认画布与子画布同口径）；**改名永远可用**。
+22. **默认画布可改名、可删除**（删除后自动切到剩余画布）。
+23. 项目行（约 38px）与画布行（约 33px）**比例协调**，不得出现"项目名巨大、子目录极小"。
+24. 项目区域可**折叠**（状态持久化）；顶部**搜索框**过滤画布，输入框内右侧内嵌放大镜图标，容器不得有第二层框/底色。
+25. **新建画布**是搜索框左侧的**纯 `+` 图标按钮**（无文字、无外框、无底色），不在底部单独占一行。项目下拉里的**新建项目**同口径：搜索框左侧纯 `+` 图标（仅 tooltip），搜索框内右侧内嵌放大镜；下拉底部不再有「+ 新建项目…」文字行。
+
+## 六、节点与生成面板
+
+26. 媒体节点三段式：**标题栏（固定高度，34px）/ 预览区（盒比严格等于媒体比例，不裁切不留边）/ 操作栏（固定高度，39px）**；节点宽 = 预览宽，节点高 = 预览高 + 标题栏 + 操作栏。
+27. 所有节点默认 **360×360**；文本/剧本/分镜**尺寸固定**，拉长时内容区撑满不留白。
+28. 媒体节点拖拽**等比缩放**（标题栏/操作栏高度恒定）；双击底边复位。
+29. 点击**内容区**才打开生成面板；**标题栏（拖动）、底部操作栏（按钮）不打开**；视频单击画面开面板、双击播放、圆形播放键只播放。
+30. 生成面板**最小宽度 520px**，控件行**单行不换行**，顺序：模型 → （分镜：N 镜 / 承接分镜）→（图片：比例 / 清晰度 / 张数）→（视频：比例 / 分辨率 / 时长）→ `@` → 发送。
+31. 面板控件**按节点类型严格区分**：文本类只有文本模型；图片=图片模型+比例+清晰度+张数(1–4)；视频=视频模型+比例+分辨率+时长；成片无模型。
+32. 模型下拉**只列已配置的模型**（文本取 Harness 可用文本模型；图片/视频取插件设置里的供应商模型），固定宽度、可搜索、只显示模型名、供应商放列表右侧。
+33. 参考图 = **顶部横向缩略图条**（`+` 在最左、`[图N]` 序号、可**拖拽排序**），**不再有文字版参考图列表**；高级项收进默认折叠的「更多」。
+34. `@资产@` 渲染为蓝色加粗、`@` 隐藏但**保留占位宽度**；资产名后跟缩略图（悬停预览）。
+35. 视频未播放只有圆形播放键；**播放中才显示进度条 + 时间 + 音量**；暂停/播完回到只有圆钮。
+
+## 七、功能约束（非视觉）
+
+36. 生成参考图**只认连线**，绝不由 `@实体@` 自动注入资产图片；`@实体@` 只注入**文字设定**（外观 + 声音）。
+37. 设定集绑定资产弹窗必须**分页拉全**（循环 `nextCursor`），包含历史生成资产。
+38. 剧本/分镜技能与内置专家人设必须包含：六要素镜头描述、每场至少 1 个大特写、motion「起点→方式→终点」且同场三镜不同运动、每场一个冲撞点、场景间因果钩子、术语正确（大特写 / 调度）。
+39. 多画布：子画布独立文档；**资产与设定集按项目共享**；旧项目零迁移（默认画布 `canvasId=null` 时 key 仍等于 projectId）。
+40. 每轮改动必须跑全量门禁（`scripts/regress.mjs` 等 37+ 脚本全 PASS）后才允许提交。
+41. **设置页技能增强 = 单一「专家」下拉**：专家 = 一套技能组（`persona` + `skills`）；选项**只列本插件专家**（当前仅「通用专家 / General expert」，默认值 `general`），**禁止列举 Harness 全部技能**（artcraft-* / noteboard-* / office-* / diagnose-* 等一律不得出现）；旧设置 `skillScript` / `skillStoryboard` 迁移到 `general`，缺字段/非法值回退 `general` 且不报错。
+
+---
+
+**自检方式**：改完 UI 后逐条对照本文件；涉及"禁止/不得"的条目，必须在测试里有**反向断言**（例如断言某样式不存在），而不是靠肉眼确认。