# 19 · UI/UX 整体优化方案

> 文档版本: v1.0  
> 编写日期: 2026-05-25  
> 适用范围: `doc/html` 用户端工作台、`yaoai-admin-web` 管理端  
> 核心目标: 在不改变现有 Dramix 产品气质的前提下，统一页面排版、控件样式、操作路径和状态反馈，让页面更美观、更稳定、更好操作。

## 1. 现实观察

当前前端已经具备较完整的页面和组件基础：

- 用户端: React + Vite + Tailwind + shadcn 风格组件 + lucide 图标。
- 管理端: Vue 3 + Element Plus + ECharts。
- 用户端已有 `Layout.tsx`、`components/ui/*`、项目/Agent/分镜/视频/设定等核心页面。
- 管理端已有侧边栏、顶部栏、表格、指标卡、图表等基础布局。

但目前 UI/UX 的问题主要不是“缺页面”，而是“统一性不足”：

- 页面头部、工具栏、统计条、卡片、表格、空状态各自写法不同。
- 多处直接使用 `rounded-xl / rounded-2xl / rounded-3xl`、渐变按钮、手写阴影，视觉密度不一致。
- 主前端偏蓝紫科技感，管理端偏深绿/金色运营风，风格可以保留，但需要统一排版和交互规范。
- 大页面如 Agent、分镜、视频工作台信息密度高，但操作主次、面板层级、状态反馈还不够清晰。
- 表单、弹窗、删除确认、生成中状态、失败重试、空数据引导没有形成统一模式。
- 移动端和窄屏下，部分工具栏、表格、卡片和按钮组存在拥挤风险。

## 2. 优化原则

1. **风格不变**: 保留 Dramix 的浅色工作台、蓝紫主色、影视创作气质；管理端保留深色侧栏和运营感，但降低装饰性。
2. **统一骨架**: 所有页面使用一致的页面头、说明区、工具栏、内容区、底部操作区。
3. **减少随意装饰**: 渐变只用于品牌标识和少数主按钮；卡片、表格、工具面板以白底、细边框、轻阴影为主。
4. **提高操作效率**: 高频动作固定在明显位置，低频动作放入菜单或次级按钮。
5. **状态明确**: 加载、生成中、失败、空数据、保存成功、余额不足、不可操作原因都必须有一致反馈。
6. **信息可扫读**: 页面标题、分组标题、字段标签、说明文字、统计数字采用统一字号和间距。
7. **响应式优先**: 重点保证 1440 桌面、1280 笔记本、768 平板、390 手机下不重叠、不溢出、不误触。

## 3. 设计 Token 统一

### 3.1 用户端 Token

保留当前主色方向，但收敛硬编码颜色：

| 类型 | 建议 |
|---|---|
| 主色 | `#5b5ff9` / `#1664ff` 二选一作为主操作色，避免页面内混用过多蓝紫 |
| 背景 | `#f6f7fb` 或 `var(--background)` 统一 |
| 卡片 | 白底，边框 `border-border`，轻阴影只在浮层和重要卡片使用 |
| 圆角 | 页面卡片统一 8px，弹窗 12px，头像/封面按场景处理 |
| 阴影 | 默认不用重阴影，悬浮层使用统一 shadow token |
| 间距 | 页面外边距 24px，区块间距 24px，卡片内边距 16/20px |

需要减少：

- 大面积 `bg-gradient-to-r/from-[#5b5ff9]/to-[#8b5ff9]` 重复出现。
- 大量 `rounded-2xl / rounded-3xl` 造成的偏营销页观感。
- 页面内同时出现多套蓝、紫、绿、黄状态色。

### 3.2 管理端 Token

管理端可以保留深绿侧栏和金色品牌点，但页面内容区应更接近 SaaS 管理台：

| 类型 | 建议 |
|---|---|
| 侧栏 | 保留 `#18231d`，减少强装饰背景 |
| 内容背景 | 保留暖白，但降低网格纹理存在感 |
| 页面标题 | 取消 Georgia 标题，统一使用系统无衬线，和用户端更一致 |
| 面板 | `border-radius: 8px`，白底、细边框、轻阴影 |
| 表格 | 统一筛选栏、分页、操作列、空状态 |

## 4. 页面骨架规范

所有业务页统一为：

```text
PageShell
  PageHeader
    title
    subtitle
    primaryAction
    secondaryActions
  ContextBar / StatsStrip 可选
  Toolbar 可选
  MainContent
  StickyActionBar 可选
```

### 4.1 PageHeader

统一要求：

- 标题 20-24px，副标题 13-14px。
- 左侧标题，右侧主操作。
- 不再每个页面单独发明标题区图标、渐变块和间距。
- 项目内页面显示项目名、当前阶段、关键状态。

### 4.2 Toolbar

统一要求：

- 筛选项从左到右: 搜索、状态、类型、时间、排序。
- 主按钮固定在右侧。
- 宽度不足时筛选折叠到“筛选”按钮。
- 表格页和素材页使用同一套 toolbar 间距。

### 4.3 StatsStrip

统计数据统一为横向紧凑条，不每页自定义卡片：

- 标签 12px，数字 18-24px。
- 3-6 个指标。
- 超过 6 个指标改成分组或二级页面。

### 4.4 StickyActionBar

长表单、生成流程、分镜编辑器统一使用底部固定操作条：

- 左侧显示保存状态、草稿状态、费用提醒。
- 右侧显示取消、保存、下一步、生成等主操作。
- 避免用户滚到底才找到按钮。

## 5. 组件统一清单

优先沉淀这些组件，减少页面内重复手写 class：

| 组件 | 用途 |
|---|---|
| `PageShell` | 统一页面滚动、宽度、内边距 |
| `PageHeader` | 统一标题、副标题、右侧操作 |
| `Toolbar` | 搜索、筛选、排序、批量操作 |
| `StatsStrip` | 页面关键指标 |
| `DataCard` | 项目、角色、场景、资产卡 |
| `WorkPanel` | 分镜/视频/Agent 的工作面板 |
| `EmptyState` | 空数据引导 |
| `LoadingState` | 页面级、卡片级加载 |
| `ErrorState` | 错误、重试、原因展示 |
| `ConfirmDialog` | 删除、覆盖、重跑等高风险操作 |
| `StatusBadge` | draft/running/done/failed 等状态 |
| `CostHint` | 生成前费用和余额提示 |
| `ActionMenu` | 低频操作折叠菜单 |

## 6. 重点页面优化

### 6.1 总览 / 项目列表

目标：更像创作项目工作台，不像普通卡片列表。

优化点：

- 顶部增加项目搜索、状态筛选、排序。
- 项目卡统一封面比例、标题行、标签、最近更新时间、进度状态。
- 卡片主操作为“继续创作”，编辑/删除放入更多菜单。
- 空状态直接提供“新建项目 / 导入剧本”两个入口。

### 6.2 新建项目 / 剧本导入

目标：降低用户首次创建成本。

优化点：

- 使用步骤式布局: 项目信息 -> 剧本来源 -> 风格与规格 -> 确认生成。
- 文件上传区更明确显示支持格式、大小、解析状态。
- 解析完成后展示“剧情理解摘要”，让用户确认后再生成大纲。
- 风格、画幅、清晰度使用 segmented control 或卡片选择，不用普通下拉堆叠。

### 6.3 Agent 制作中心

目标：从“日志页”升级为“可解释运行控制台”。

优化点：

- 左侧: 运行计划、步骤状态、当前执行。
- 中间: 剧情理解、上下文命中、产物摘要。
- 右侧: 日志、失败原因、建议动作。
- 增加运行意图选择: 自动、续跑失败、局部补齐、强制重跑。
- 失败时展示“失败类型 + 可重试按钮 + 影响范围”，不只展示文本日志。

### 6.4 大纲 / 分集

目标：从生成结果页变成可编辑的剧情结构页。

优化点：

- 左侧分集目录，右侧当前分集详情。
- 大纲、分集、剧情事实使用明确层级。
- 每集显示绑定的 `plotFactIds` 摘要，方便检查是否偏离原剧本。
- 保存、重新生成、继续到角色场景的按钮位置统一。

### 6.5 角色 / 场景 / 道具设定

目标：强化“设定资产库”的专业感。

优化点：

- 角色卡统一展示头像、姓名、身份、视觉锚点、三视图状态。
- 场景卡统一展示场景图、空间锚点、主色调、光线、使用次数。
- 状态 badge 统一: 待生成、生成中、已完成、失败。
- 编辑弹窗统一字段分组: 基本信息、视觉锚点、参考图、锁定规则。
- 批量生成按钮放在工具栏，单个重生成放在卡片内。

### 6.6 分镜工作台

目标：让高密度操作更清楚、更顺手。

推荐布局：

```text
左栏: 分集列表 + 分镜列表
中栏: 当前分镜画面/描述/连续性状态
右栏: 角色选择、场景选择、视频提示词、生成参数
底部: 保存草稿、生成当前镜头、批量生成、费用提示
```

优化点：

- 当前分镜高亮，生成状态用点色和文字双重提示。
- 角色/场景选择使用图像卡，不只下拉。
- 提示词区域拆成“剧情事实 / 画面指令 / 最终 Prompt”三层。
- 草稿保存状态明确展示。
- 长文本输入区高度稳定，避免展开后页面跳动。

### 6.7 视频生成 / 成片

目标：更像剪辑台和交付页。

优化点：

- 播放器区域固定比例，信息层不遮挡核心画面。
- 下方时间线展示每个镜头状态。
- 右侧显示整集信息、缺失镜头、合成状态、导出按钮。
- 合成前明确提示“已完成 x/y 个分镜，预计时长，预计费用”。
- 删除、重新生成、导出使用清晰的危险/主次层级。

### 6.8 团队 / 用量 / 模型配置 / 设置

目标：更像稳定后台配置页。

优化点：

- 统一表格页骨架: PageHeader + Toolbar + TablePanel。
- 表单按分组展示，不用长列表堆叠。
- 模型配置增加“当前默认 / 可用 / 未配置 / 鉴权失败”状态。
- 用量页图表、表格、筛选条件统一边距和图例。

### 6.9 管理端

目标：保留运营后台气质，但降低装饰性，提高管理效率。

优化点：

- 页面标题改为无衬线，统一字号。
- 指标卡减少厚重阴影，提升数字对齐。
- 表格页筛选栏固定样式，分页与表格间距统一。
- 表格操作列统一为“详情 / 更多”，高风险动作进入确认弹窗。
- 图表面板增加标题、说明、空状态和加载状态。

## 7. 交互规范

### 7.1 主次按钮

- 每个区域最多一个主按钮。
- 生成、保存、继续为主按钮。
- 取消、返回、查看为次按钮。
- 删除、覆盖、强制重跑必须使用危险样式和确认弹窗。

### 7.2 反馈状态

每个异步动作必须有：

- 点击后 loading。
- 成功 toast 或状态变化。
- 失败原因。
- 可重试路径。
- 余额不足或权限不足时的明确解释。

### 7.3 空状态

空状态不只写“暂无数据”，必须包含下一步动作：

- 暂无项目 -> 新建项目 / 导入剧本。
- 暂无角色 -> 从剧情提取 / 手动添加。
- 暂无分镜 -> 生成分镜 / 新建单镜。
- 暂无视频 -> 先生成当前镜头。

### 7.4 表单体验

- 必填字段标记统一。
- 长文本提供字数提示和自动保存状态。
- 下拉项超过 8 个时支持搜索。
- 操作失败时定位到具体字段或区域。

### 7.5 响应式

- 桌面三栏布局在窄屏降为上下布局。
- 工具栏筛选折叠。
- 表格在窄屏改为卡片列表或保留横向滚动。
- 固定底部操作条避免遮挡内容。

## 8. 实施阶段

### Phase 0: UI 审计与 Token 收敛

- 整理现有颜色、圆角、阴影、字号、间距。
- 确定用户端和管理端各自 token。
- 建立 `PageShell / PageHeader / Toolbar / StatusBadge / EmptyState`。

验收：

- 新页面不再直接手写大量硬编码颜色。
- 页面标题、工具栏、空状态统一。

### Phase 1: 用户端骨架统一

- 改造项目列表、新建项目、角色/场景、Agent、大纲、分镜、视频页面的页面骨架。
- 统一主按钮、次按钮、危险按钮。
- 统一 loading/error/empty 状态。

验收：

- 用户端核心页面视觉密度一致。
- 页面间切换不再出现明显风格跳变。

### Phase 2: 高密度工作台优化

- 优化 Agent 制作中心、分镜工作台、视频生成页。
- 建立三栏/双栏工作台规范。
- 增加剧情理解、提示词追溯、一致性检查的 UI 容器。

验收：

- 用户能快速知道当前在哪一步、下一步做什么、失败怎么处理。
- 分镜和视频页面操作不拥挤、不跳动。

### Phase 3: 管理端统一

- 收敛管理端标题、面板、表格、筛选栏、分页。
- 统一 ECharts 面板标题、空状态、加载状态。
- 调整管理端背景装饰和字体，让它更像运营后台。

验收：

- 管理端所有列表页布局一致。
- 统计页、表格页、详情页视觉统一。

### Phase 4: 视觉 QA 与响应式验收

- 使用 Playwright 检查桌面、平板、手机。
- 对核心页面截图评审。
- 检查文字溢出、按钮拥挤、遮挡、滚动异常。

验收：

- 1440 / 1280 / 768 / 390 宽度下核心页面无明显重叠。
- 主要流程可完成: 新建项目 -> 生成大纲 -> 角色场景 -> 分镜 -> 视频。

## 9. 验收标准

视觉验收：

- 页面标题、工具栏、卡片、表格、弹窗风格统一。
- 主色、状态色、圆角、阴影、间距收敛。
- 不出现同一页面多套按钮风格。

交互验收：

- 高频操作一步可见。
- 危险操作有确认。
- 异步操作有 loading、成功、失败、重试。
- 空状态有下一步动作。

业务验收：

- Agent 页面能解释运行状态。
- 分镜页面能快速选角色、场景、生成视频。
- 视频页面能清楚看到镜头完成度和合成状态。
- 管理端能高效查租户、用户、账单、套餐、审计日志。

工程验收：

- 新增页面优先使用统一组件。
- 不继续扩散硬编码颜色、圆角、阴影。
- 前端核心页面有截图验收记录。

