design(HEL-665): rebuild creation hierarchy and interactive desktop prototype

Co-authored-by: multica-agent <github@multica.ai>
2026-10-14 23:42:32 +08:00
parent 780ac52ffc
commit 875dfcb41a
20 changed files with 3859 additions and 0 deletions
@@ -0,0 +1,23 @@
+## 创作空间重设计 · 第五版交互样本
+
+直接打开 `index.html`，或在这个目录启动普通静态文件服务。无需安装依赖，不调用后端或外部模型。
+
+这版重点是区域分工与状态逻辑：大作品画布、固定输入底座、历史独立浏览、常用参数就近打开、角色任务与可编辑草稿、项目阶段与确认，以及管理页面的集中列表。
+
+左侧可进入十个现有功能区域。右上角“情景选择”可以体验横图、竖图、首尾帧视频、空态、失败和智能体已有回复。演示保存会在本次浏览期间保留，重新载入后恢复样例。
+
+### 范围
+
+- 图片、回复和项目均为设计样例；没有执行真实生成或迁移用户数据。
+- 视频是公开海岸照片制作的五秒镜头运动样例，使用真正的视频元素；默认暂停，只有明确点击播放才开始。
+- 仓库目录包含 156 个 JSON 文件路径，按文件名分组用于检查大目录布局。它们尚未被样本解析、导入或验证可执行；创作台保留六个已配置场景入口。
+- 大模型、设置、素材和草稿等修改保存在样本内存；样本不测试 API、保存密钥或写入正式项目。
+- 非故事助手的自由文本作为阶段建议展示，结构化镜头与素材仍由对应表单整理。
+- 画布展示现有节点整理方式；演示连线为示意，不执行节点工作流。
+- 三维场景搭建与工作流试验台尚未在本轮样本展开，后续需要各自的操作走查，不能按已复刻处理。
+
+### 来源
+
+用户指定的参考站：`https://cn.lk666.ai/home`。设计使用登录后的目录、参数浮层、任务浮层和智能体输入的观察结果；没有提交收费生成。
+
+风格参考图及智能体主视觉来自该站公开资源，原来源记录在项目 `src/lib/referenceAgent.ts`。海岸图片沿用项目现有公开视觉素材。本样本未包含账号截图、历史内容、密钥、Cookie 或浏览器配置。
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>AIGC · 创作空间重设计</title>
+    <link rel="stylesheet" href="design.css" />
+  </head>
+  <body>
+    <div class="app">
+      <nav class="global" aria-label="全局导航">
+        <a class="brand" href="#create" title="AIGC创作空间">A<span>+</span></a>
+        <div id="navigation"></div>
+        <div class="nav-bottom">
+          <button data-page="settings" title="系统设置">
+            <i data-icon="settings"></i><span>设置</span>
+          </button>
+          <div class="avatar">白</div>
+        </div>
+      </nav>
+      <header class="topbar">
+        <div class="breadcrumb">
+          <span>AIGC 创作空间</span><b>/</b
+          ><strong id="page-title">创作台</strong>
+        </div>
+        <div class="top-actions">
+          <span class="demo-mark">交互样本</span
+          ><button id="scenario" class="quiet">情景选择 ⌄</button
+          ><button id="motion" class="icon-btn" title="减少动效">
+            <i data-icon="motion"></i></button
+          ><button data-action="queue" class="status">
+            <span class="dot"></span><span id="queue-label">任务空闲</span>
+          </button>
+        </div>
+      </header>
+      <aside class="context" id="context" aria-label="当前页面目录"></aside>
+      <main class="workspace" id="workspace"></main>
+    </div>
+    <div class="overlay" id="overlay" hidden>
+      <section
+        class="dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dialog-title"
+      >
+        <header>
+          <div>
+            <small id="dialog-eyebrow"></small>
+            <h2 id="dialog-title"></h2>
+          </div>
+          <button class="icon-btn" data-action="close" aria-label="关闭弹层">
+            <i data-icon="close"></i>
+          </button>
+        </header>
+        <div class="dialog-content" id="dialog-content"></div>
+        <footer id="dialog-footer"></footer>
+      </section>
+    </div>
+    <div class="popover" id="popover" hidden></div>
+    <div id="toast" role="status"></div>
+    <input id="upload" type="file" accept="image/*" multiple hidden /><input
+      id="agent-upload"
+      type="file"
+      multiple
+      hidden
+    />
+    <script src="catalog.js"></script>
+    <script src="design.js"></script>
+  </body>
+</html>
@@ -0,0 +1,59 @@
+{
+  "layout_and_interaction": {
+    "checks": [
+      "1024×600 画布至少60%，输入不超过1/3，主按钮完整",
+      "1366×768 画布至少60%，输入不超过1/3，主按钮完整",
+      "1600×900 画布至少60%，输入不超过1/3，主按钮完整",
+      "2048×1152 画布至少60%，输入不超过1/3，主按钮完整",
+      "长提示词不撑高底座",
+      "置顶不切换工作流、不清空草稿",
+      "视频没有自动播放",
+      "不同工作流草稿独立",
+      "历史不参与画布布局",
+      "完整参数取消不应用",
+      "常用参数原地修改",
+      "生成时保留旧结果",
+      "新生成采用竖图显示",
+      "竖图没有压成横条",
+      "只有手动操作才播放",
+      "切换结果暂停播放",
+      "助手有可编辑草稿卡",
+      "草稿进入项目并等待确认",
+      "分镜有完整工作区域",
+      "home 页面可直接操作",
+      "home 小窗口不横向溢出",
+      "library 页面可直接操作",
+      "library 小窗口不横向溢出",
+      "history 页面可直接操作",
+      "history 小窗口不横向溢出",
+      "flow 页面可直接操作",
+      "flow 小窗口不横向溢出",
+      "models 页面可直接操作",
+      "models 小窗口不横向溢出",
+      "canvas 页面可直接操作",
+      "canvas 小窗口不横向溢出",
+      "settings 页面可直接操作",
+      "settings 小窗口不横向溢出",
+      "真实仓库目录可搜索",
+      "无页面脚本错误"
+    ],
+    "errors": []
+  },
+  "state_and_real_video": [
+    "任务快照固定原工作流和原提示词",
+    "不同工作流完成不替换当前空态",
+    "历史复用准确填入目标工作流",
+    "设置保存后跨页保留",
+    "设置取消恢复已保存值",
+    "角色模型独立",
+    "非故事草稿确实带回项目",
+    "画布编辑对应对象",
+    "素材用途筛选准确",
+    "模型保存确实加入列表",
+    "实际视频初始暂停",
+    "实际视频仅点击后播放",
+    "修改参数不切换播放状态",
+    "实际视频手动暂停"
+  ],
+  "scope": "独立样本；不调用生产接口，不运行仓库 JSON 工作流。"
+}
@@ -0,0 +1,55 @@
+## 重新设计的依据
+
+本轮交付为独立可操作设计样本，覆盖现有功能的使用方式。正式站暂保留原版本，样本通过后再接真实接口。
+
+### 观察到的参考站行为
+
+- 左侧目录独立滚动，主工作区固定在一个视口内。图片／视频输入工具约 169px 高，内部长文本滚动，不随内容无限长高。
+- 高频参数在输入框下方的胶囊按钮就近展开。例如数量在触发按钮上方打开 200px 宽选择层；没有为了改一个数字打开整页表单。
+- 任务列表是独立浮层；任务记录不常驻占据创作页面的纵向空间。当前输入和历史浏览是两个状态。
+- 智能体首屏突出用途和输入，风格／工具／时长集中在输入框底部。进入、悬停、聚焦反馈属于同一个界面语言。
+- REA 观察证据：`ev_5d5ffc7062788e889fdda8d96e1cb4feba69118daa74fdeeff64c21e7b9ebf2a`、`ev_4bd13d781f2c57613fc580e387d18d70900c19ba8f907a035ed725d19881a5aa`。几何与交互由共享浏览器的 Playwright 实测补充，REA 本身没有点击页面。
+- 未提交收费生成，因此未声称验证参考站的生成质量、完整成片流水线或服务器内部实现。
+
+### 原版为什么失败
+
+| 修改前 | 重设计 | 原因 |
+| --- | --- | --- |
+| 结果、参数详情、输入回显和历史同时占高度 | 结果画布＋固定输入底座；详情和历史分别按需打开 | 图片不再争夺剩余高度 |
+| 高度不足时图片压到 110px | 画布由剩余高度确定，作品以原比例适配；其他面板不参与画布高度 | 竖图也按高度充分展示 |
+| 输入素材和长提示词撑高主面板 | 素材缩略图一行；提示词内部滚动，正反向平行 | 填写内容不会改变结果大小 |
+| 同一参数多个入口、详情默认展开 | 高频参数就地修改；完整参数一次集中设置 | 减少搜索与往返 |
+| 工作流是原始文件名大卡片 | 可搜索的紧凑目录，用途分类，置顶；原名在详情保留 | 目录容量与可读性分开处理 |
+| 智能体回复只是消息 | 草稿有编辑、保存和确认位置，生成过程与成果区分 | 用户知道下一步该在哪里做 |
+| 每页都套同一种英雄区 | 创作画布、对话、文稿、素材格、管理表各有适合任务的结构 | 页面服从当前工作 |
+
+### 统一规则
+
+1. 全局导航只负责去哪里；上下文栏只负责当前区域的对象，不再重复总导航。
+2. 生成页第一视觉是作品；主按钮固定在输入底座；任何状态都保留输入草稿。
+3. 图片／视频切换和不同工作流各自保存草稿；置顶只改变排序。历史查看不自动覆写草稿，复用需显式点击。
+4. 普通参数 1 次点击就能调整；完整设置先暂存，保存生效、取消丢弃设置草稿。
+5. 空态、运行、失败、成功具有明确内容；旧结果在新任务开始时保留，不把进度伪装成作品。
+6. 视频进入页面和切换结果均暂停，播放是独立按钮；画面点击仅放大，绝不同时改变播放状态。
+7. 只有本次多张结果显示本次选择器；所有历史在任务记录入口查看。
+8. 文案用用途与动作命名，原始工作流文件名和技术配置置于管理层。
+9. 管理页为列表／表格与详情编辑；项目页为阶段与成果；智能体页为会话与草稿；创作页为作品与输入。
+10. 颜色采用参考站实测暗色基底、青色导航、金色主动作、紫色智能体聚焦；高亮有主次，作品本身提供大面积颜色。
+
+### 可验收的样本操作
+
+创作台：图片／视频切换、目录搜索、分类、置顶、独立草稿、正反向、素材上传、首尾帧、就地参数、保存／取消、历史独立查看／显式复用、大图与对比、手动播放、模拟运行／取消／失败重试。
+
+智能体：选择五个现有角色、风格与技能选择、模型绑定、附件、独立会话、回复草稿编辑与保存；不新增切镜、MV、十二步流程。
+
+项目：五阶段浏览、稿件编辑／确认、分镜列表／图片与视频结果，素材入口、对应智能体跳转。
+
+其他页面：项目首页、素材库、工作流管理、任务历史、模型与连接设置、画布、系统设置。演示中全部明确使用样例数据，不读写正式账号或调用收费模型。
+
+### 检查标准
+
+- 桌面 1024×600、1366×768、1600×900、2048×1152 无主页面横向或纵向滚动；目录／文本／表格可独立滚动。
+- 创作底座不超过工作区高度的三分之一；当前作品区域至少占工作区剩余高度的六成。
+- 长提示词、历史打开、参数详情均不挤压画布；普通进入时播放保持暂停。
+- 每页主操作不藏在页面底部；弹层有标题、返回／关闭、保存／取消规则。
+- 浏览器交互检查和人工看图均通过后，再交用户体验确认。