refactor: 使用 Naive UI 重构后台布局与黑白双主题

README.md

@@ -47,7 +47,7 @@ API_PROXY_TARGET=http://localhost:3412
 
 - Vite 8、Vue 3、TypeScript、Vue Router
 - Tailwind CSS 4，通过 `@tailwindcss/vite` 集成
-- Reka UI：Dialog、Tabs、Checkbox、Progress 等无样式基础组件
+- Naive UI：布局、菜单、表格、选择器、输入框、按钮、弹窗、标签、折叠面板、进度和时间线
 - Oxlint：脚本质量检查；ESLint：补充 Vue 模板语义
 - Oxfmt（不是 `oxformat`）：沿用后端四空格、单引号、无分号、无尾逗号的风格
 - Vitest + Vue Test Utils + happy-dom：API 契约、组件交互和异步生命周期测试
@@ -76,13 +76,28 @@ Oxfmt 不负责代码质量，Oxlint 不负责 Vue 的完整类型推导；Vue S
 | `src/features/subject-identity` | 稳定身份 API、正式主体目录、文本编辑、生图配置、身份图库和母版切换 |
 | `src/features/production` | 视频提示词、镜头首帧、视频任务、就绪诊断、资产候选与批量回执 |
 | `src/features/workflows` | checkpoint 选择、执行记录、长请求互斥与操作确认 |
-| `src/components/ui` | 跨业务使用的 Reka UI 封装与公共展示组件 |
-| `src/composables` | 具备取消和竞态保护的轮询 |
+| `src/components/ui` | Naive UI 公共封装、工作区滚动容器与图片展示 |
+| `src/composables` | 具备取消和竞态保护的轮询、系统主题与偏好持久化 |
 | `src/lib` | HTTP、错误格式、日期和导出工具 |
 | `src/router` | 按 graph 拆分的懒加载路由 |
 
 每个功能模块通过 `index.ts` 暴露公共入口。业务类型和行为函数均添加中文职责注释。不要把下一条 graph 的服务继续堆进 `App.vue`。
 
+## 后台布局与主题
+
+- 外层应用固定为视口高度；侧栏、顶栏、项目标题和工作流导航不会随正文滚动。
+- 项目列表采用固定表头表格；剧本、分镜、身份与生产页的目录和详情独立滚动，其他工作区只滚动内容区。
+- 生成配置与批量操作放在可折叠区域，回执到达后自动展开；查询错误始终可见，不隐藏在折叠内容中。
+- 右上角提供浅色、暗黑、跟随系统三种模式，默认跟随系统，选择保存在本机浏览器。存储被禁用时仍可在当前会话切换。
+- 以黑白灰为主，仅错误、警告、成功等语义状态保留辅助色。Naive UI 和业务内容共用主题；加载前应用偏好，减少主题闪烁。
+- 窄屏默认收起侧栏，目录与正文改用紧凑布局；执行记录仍可查看。长弹窗在自身内部滚动。
+
+布局样式集中在 `src/admin.css`，业务排版保留在 `src/styles.css`。新增页面应使用 `WorkspacePage`，避免通过 `body` 或 `window.scrollTo` 管理滚动。
+
+本次 UI 重构保留前端 `dev@5551653` 的业务更新，包括过期形态图、主首帧和主视频的提示与更新入口。首帧默认只补当前剧集；存在过期主首帧时优先更新全项目过期项。非覆盖模式下的过期主视频重建完成后，会接替旧主视频；普通新增候选不自动替换主资产。
+
+本地验收建议使用 1920×1080、1280×720 和窄屏视口：打开长剧本、长项目标题和多镜头项目，确认顶栏不移动、目录与正文能分别滚到底；切换暗黑模式后检查弹窗、下拉菜单、图片失败占位，刷新后主题应保持。
+
 ## 接口基线
 
 对齐后端 `qianlanse/short-drama-agent` 的 `dev`：