# 对话复盘交互规范

> 本文档整理编导AI对话记录分析报告（HTML）的页面格式、内容顺序、交互规则等全部设计要求，作为后续生成同类报告的统一规范。

---

## 一、整体视觉风格

### 1.1 主题与配色

| 元素 | 规则 |
|------|------|
| 页面背景 | `#f5f7fa`（浅灰） |
| 卡片背景 | `#fff`（白色） |
| 正文字色 | `#1a1a2e` |
| 辅助字色 | `#64748b` / `#94a3b8` |
| 边框色 | `#e8ecf1` / `#f1f5f9` |
| 主题色 | `#667eea`（紫蓝渐变起始） |
| 标题栏渐变 | `linear-gradient(135deg, #667eea 0%, #764ba2 100%)` |
| 字体 | `-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif` |

**核心原则**：所有报告统一使用亮色主题，不使用暗色/深色背景。白色卡片 + 浅灰背景 + 紫蓝主色调。

### 1.2 页面宽度

- 内容最大宽度：`max-width: 1400px`，水平居中（`margin: 0 auto`）
- 两侧内边距：`padding: 0 24px`
- 顶部导航宽度须与内容区域一致（`max-width: 1400px; margin: 0 auto; padding: 0 24px`），不得全屏拉伸

---

## 二、页面结构（从上到下）

```
┌─────────────────────────────────────────┐
│  标题栏（渐变背景，白字）                  │  ← title-bar
├─────────────────────────────────────────┤
│  顶部一级导航（sticky，3个大板块）         │  ← sticky-nav
├─────────────────────────────────────────┤
│                                         │
│  ┌─────────────────────────┐ ┌──────┐  │
│  │  数据概览                 │ │右侧  │  │
│  │  （仪表盘卡片+分类表）     │ │导航  │  │
│  │                          │ │      │  │
│  │  🔍 问题案例分析（大标题） │ │固定  │  │
│  │  ├─ 类别一：案例1、案例2  │ │右下  │  │
│  │  ├─ 类别二：案例3、案例4  │ │角    │  │
│  │  ├─ ...                   │ │      │  │
│  │  └─ 类别七：案例13、案例14 │ │      │  │
│  │                          │ │      │  │
│  │  总结与建议               │ │      │  │
│  │  （问题本质+优化建议）     │ │      │  │
│  └─────────────────────────┘ └──────┘  │
│                                         │
├─────────────────────────────────────────┤
│  页脚（版权/时间信息）                    │  ← footer
└─────────────────────────────────────────┘
```

### 2.1 标题栏（title-bar）

- 渐变背景（`#667eea → #764ba2`），白色文字
- 内容：报告标题（h1）+ 副标题信息（数据周期、记录数、会话数、编导数、案例数）
- 内边距：`padding: 40px 24px 48px`

### 2.2 顶部一级导航（sticky-nav）

**规则**：
- `position: sticky; top: 0; z-index: 100`
- 白色背景，底部 1px 边框
- 宽度与内容区一致：`max-width: 1400px; margin: 0 auto; padding: 0 24px; box-sizing: border-box`
- **只放3个大板块**，不放7个问题类别：

| 导航项 | 锚点 | 高亮规则 |
|--------|------|----------|
| 数据概览 | `#overview` | 滚动在数据概览区域时高亮 |
| 问题案例分析 | `#cases` | 滚动在任意问题类别（p1-p7）区域时均高亮 |
| 总结与建议 | `#summary` | 滚动到总结区域时高亮，或滚动到页面底部时高亮 |

- 导航项样式：`flex: 1; text-align: center; padding: 14px 20px; font-size: 14px`
- 高亮样式：字色 `#667eea`，底部 3px 实线边框

### 2.3 右侧案例分类导航（case-sidebar）

**位置规则**：
- `position: fixed; bottom: 24px; right: 24px`（固定在页面右下角）
- **不吸顶**（不是 sticky/top 定位）
- `z-index: 90`

**尺寸规则**（已缩小至原尺寸的 2/3）：
| 属性 | 值 |
|------|-----|
| 整体宽度 | `135px` |
| 标签字号 | `8px` |
| 导航项字号 | `9px` |
| 计数字号 | `7px` |
| 圆点大小 | `5px × 5px` |
| 导航项 padding | `5px 8px` |
| 导航项间距 | `4px` |
| 圆角 | `5px` |

**内容规则**：
- 标题：「案例分类导航」
- 7个问题类别 + 1个总结与建议，共8项
- 每项包含：彩色圆点 + 类别名称 + 案例数量
- 顺序与问题案例展示顺序一致（按会话数从高到低）
- 点击平滑滚动到对应锚点
- 滚动时自动高亮当前所在区域
- **移动端隐藏**（`@media (max-width: 1024px) { .case-sidebar { display: none; } }`）

### 2.4 主内容区（main-layout）

- `max-width: 1400px; margin: 0 auto; padding: 0 24px`
- 左侧内容区 + 右侧浮动导航（右侧导航在 main-layout 外部，用 fixed 定位）
- 内容区最大宽度约 `1160px`（为右侧导航留空间）

---

## 三、内容板块与顺序

### 3.1 板块一：数据概览（#overview）

**内容顺序**：
1. 板块标题（section-divider）：📊 数据概览
2. 仪表盘卡片（dashboard）：4个指标卡片横排
   - 总对话记录数
   - 总会话数
   - 问题会话占比
   - AI问题类别数 / 精选案例数
3. 问题分类统计表（table）：
   - 列：问题类别 | 问题会话数 | 占比 | 核心表现 | 会话案例
   - **按会话数从高到低排列**
   - 条形图宽度按占比比例渲染
   - 「会话案例」列：每个问题类别最多放10个会话ID，逗号分隔，字号12px灰色(#64748b)
4. 技能问题分布表（如有多技能数据）
5. （可选）编导补充细节方向分布表
6. （可选）跨周趋势对比表

### 3.2 板块二：问题案例分析（#cases）

**大标题**：
- 在第一个问题类别之前，独立显示「🔍 问题案例分析」板块标题
- 附说明文字：「以下N个类别按问题会话数从高到低排列，每类精选1-2个代表性案例，聚焦AI生成内容本身的问题」

**问题类别确定规则**：
- 问题类别**不固定为某几个**，而是根据实际对话内容梳理得出
- 每次分析时通读全部会话，从对话中归纳AI生成内容的实际问题维度
- 可能出现新的问题类别，也可能某些类别在当前批次数据中不存在
- 类别数量不设上限，以能覆盖实际问题为准则
- 确定类别后，按会话数从高到低排列，依次编号 p1、p2、p3...

**问题类别顺序**（按会话数从高到低，以下为当前批次示例）：

| 序号 | 类别名称 | 锚点 | 颜色 |
|------|---------|------|------|
| 一 | 骨架没搭好 | `#p1` | `#ef4444`（红） |
| 二 | 画面不到位 | `#p2` | `#f97316`（橙） |
| 三 | 语气不对 | `#p3` | `#eab308`（黄） |
| 四 | 方向跑偏 | `#p4` | `#a855f7`（紫） |
| 五 | 节奏不对 | `#p5` | `#14b8a6`（青） |
| 六 | 故事讲不通 | `#p6` | `#3b82f6`（蓝） |
| 七 | AI处理复杂意图不全面 | `#p7` | `#ec4899`（粉） |

> 注意：以上为 7月10-15日 数据的梳理结果，仅作示例。不同批次数据可能产生不同类别和数量。核心规则是「根据实际对话内容梳理类别 → 按会话数从高到低排列」。

**每个问题类别内部结构**：
1. 分类头部（prob-header）：序号 + 类别名称 + 定义说明 + 会话数
   - 背景色按类别区分（ph-1 ~ ph-7，浅色背景）
2. 案例卡片（case-card），每类 1-2 个

**案例卡片格式**：
```
┌─ 案例N：编导名（会话ID，X轮） ─────── [标签] ─┐
│  元信息：编导名 | 会话ID | 对话轮次 | 技能      │
│                                               │
│  对话区域（dialogue）：                        │
│  ┌─ 第1轮 ─────────────────────────────┐      │
│  │ 编导：用户输入内容摘录                │      │
│  │ AI：AI输出内容摘录（可选）            │      │
│  └──────────────────────────────────────┘      │
│  ┌─ 第2轮 ─────────────────────────────┐      │
│  │ ...                                  │      │
│  └──────────────────────────────────────┘      │
│                                               │
│  问题高亮（highlight-box）：编导反馈中的关键句  │
│                                               │
│  根因分析（analysis-box）：AI问题根因 + 启示    │
└───────────────────────────────────────────────┘
```

**案例编号规则**：
- 全文案例连续编号（1, 2, 3, ... 14）
- 编号顺序与问题类别排列顺序一致
- 重排类别时必须同步重编案例号

**案例标签**（3种）：
| 标签 | 样式 | 含义 |
|------|------|------|
| 经典 | `#fef3c7` / `#d97706`（黄底深黄字） | 教科书级典型案例 |
| 代表性 | `#e0e7ff` / `#4338ca`（蓝底深蓝字） | 该类别最典型表现 |
| 独特 | `#fce7f3` / `#be185d`（粉底深粉字） | 独特少见的问题表现 |

**对话摘录规则**：
- 编导消息：白底 + 左侧 3px 紫蓝边框
- AI消息：白底 + 左侧 3px 灰色边框
- 每轮标注「第N轮」
- 摘录关键内容，非全文照搬（每轮控制在 200-400 字）

### 3.3 板块三：总结与建议（#summary）

**内容顺序**：
1. 板块标题：💡 总结与建议
2. AI生成内容问题本质总结（summary-card）
   - 逐条列出7大问题本质
3. 优化建议（suggestion-grid）
   - 网格布局（auto-fit, minmax 280px）
   - 每条建议一个卡片：图标 + 标题 + 说明

---

## 四、交互逻辑

### 4.1 顶部导航高亮

```javascript
// 滚动时判断当前所在区域
// 数据概览区域 → 高亮"数据概览"
// 问题案例区域(p1-p7) → 高亮"问题案例分析"
// 总结区域 或 滚动到底部 → 高亮"总结与建议"
```

### 4.2 右侧导航高亮

```javascript
// 滚动时判断当前最近的 section id
// 在 p1-p7 + summary 中匹配，高亮对应导航项
```

### 4.3 点击平滑滚动

- 所有锚点链接使用 `scrollIntoView({ behavior: 'smooth' })` 或 `scrollTo` + `scroll-margin-top: 60px`（避免被 sticky-nav 遮挡）

---

## 五、响应式规则

| 断点 | 规则 |
|------|------|
| `≤ 1024px` | 右侧导航隐藏 |
| `≤ 768px` | 仪表盘卡片 2列；建议网格 1列 |
| `≤ 480px` | 仪表盘卡片 1列；标题字号缩小 |

---

## 六、两类报告的差异

### 6.1 常规分析报告（按日期批次）

- **顶部导航**：5项（数据概览 / 问题分类统计 / 问题案例 / 跨问题分析 / 结论与建议）
- **案例数量**：全量展示（如54个案例）
- **案例分类导航**：页面内粘性导航条（`position: sticky; top: 49px`），横向排列
- **额外内容**：编导补充细节方向分布表、跨周趋势对比表
- **问题分类编码**：不使用缩写（如 D1-D6），用完整描述

### 6.2 整体复盘报告（精选案例）

- **顶部导航**：3项（数据概览 / 问题案例分析 / 总结与建议）
- **案例数量**：精选 14 个（每类 1-2 个）
- **案例分类导航**：右下角固定浮动面板（`position: fixed; bottom: 24px; right: 24px`）
- **案例聚焦**：AI生成内容本身的问题，而非编导表述是否清楚
- **额外内容**：AI问题本质总结、优化建议网格
- **问题类别排序**：按会话数从高到低

---

## 七、问题分类体系

### 7.1 分类原则

- **不预设固定类别**：每次分析根据实际对话内容梳理，从编导反馈和AI输出中归纳真实存在的问题维度
- **动态调整**：新批次数据可能发现新的问题类别，也可能某些类别在当前数据中不存在
- **以覆盖性为准则**：类别数量不设上限，确保能覆盖当前批次的实际问题
- **聚焦AI生成内容**：分类针对AI生成内容本身的问题，编导与AI对话完善细节是正常流程，不计入问题

### 7.2 当前已识别的问题类别（参考）

以下为历次分析中已识别出的问题类别，供后续分析参考，但**不作为固定清单**：

| 类别 | 定义 | 典型表现 | 首次发现 |
|------|------|---------|---------|
| 骨架没搭好 | AI对标重构时框架与原作/需求脱节 | 对标视频结构完全偏离、抄袭后混乱 | 6月29日批次 |
| 画面不到位 | AI生成的画面描述不够具体/准确 | 镜头方向反复改错、格式约束丢失 | 6月29日批次 |
| 语气不对 | AI生成的人设语气偏离设定 | 特征放大效应、偶像话术"加戏" | 6月29日批次 |
| 方向跑偏 | AI理解编导意图时方向错误 | 照抄与夸张间摇摆、不做加法 | 6月29日批次 |
| 节奏不对 | AI修改时节奏失控 | 精简变删字数、修改时加法偏好 | 6月29日批次 |
| 故事讲不通 | AI生成的内容逻辑/事实有误 | 用模糊记忆替代事实、遗忘核心设定 | 6月29日批次 |
| AI处理复杂意图不全面 | AI处理≥5维度修改时系统性丢失 | 否定式指令执行力弱、多维度遗漏 | 7月10日批次 |

### 7.3 新类别发现流程

1. 通读全部会话对话内容
2. 对每个有问题的会话，判断AI生成内容的具体问题点
3. 将问题点聚类归纳，形成类别
4. 若发现无法归入已有类别的问题，则新增类别
5. 统计各类别会话数，按从高到低排列

---

## 八、根因分析框架

### 8.1 分析视角

- **聚焦AI生成内容的问题**（而非编导表述是否清楚）
- 编导与AI对话完善细节是正常创作流程，不归为问题
- 每个案例需指出：AI在什么环节、以什么方式"翻车"

### 8.2 编导补充细节方向（5类，非问题，作为参考）

| 类别 | 说明 |
|------|------|
| 画面镜头细节 | 补充具体镜头方向、景别、转场 |
| 角色设定细节 | 补充人设特征、性格表现 |
| 剧情逻辑细节 | 补充故事线、因果关系 |
| 台词呈现细节 | 补充口播语气、用词风格 |
| 内容深化与校正 | 纠正事实错误、深化内容 |

---

## 九、文件命名与存储

### 9.1 目录结构

```
project/编导AI脚本对话记录分析/
├── 编导AI脚本对话记录分析_6月29日至7月5日.html
├── MCN脚本创作输入记录分析_6月29日至7月5日.md
├── 编导AI脚本对话记录分析_7月7日至7月8日.html
├── MCN脚本创作输入记录分析_7月7日至7月8日.md
├── 编导AI脚本对话记录分析_7月10日至7月15日.html
├── MCN脚本创作输入记录分析_7月10日至7月15日.md
├── 编导AI对话记录整体复盘报告.html
└── 对话复盘交互.md                  ← 本文件
```

### 9.2 命名规范

- HTML报告：`编导AI脚本对话记录分析_YYYY月X日至YYYY月Y日.html`
- MD报告：`MCN脚本创作输入记录分析_YYYY月X日至YYYY月Y日.md`
- 整体复盘：`编导AI对话记录整体复盘报告.html`
- 交互规范：`对话复盘交互.md`
- MD和HTML按日期配对，放在同一目录下

---

## 十、关键设计决策记录

1. **亮色主题统一**：所有报告使用亮色风格，不使用暗色主题
2. **顶部导航精简**：复盘报告顶部只放3个大板块，不放7个问题类别（避免过于细碎）
3. **右侧导航位置**：固定在页面右下角（非吸顶），避免遮挡内容
4. **右侧导航缩小**：整体缩小至原尺寸 2/3，减少视觉干扰
5. **顶部导航宽度对齐**：与内容区域同宽（max-width: 1400px），不全屏拉伸
6. **问题类别动态梳理**：不预设固定类别，根据实际对话内容归纳，可能出现新类别或某些类别不存在
7. **问题类别按数据排序**：确定类别后按会话数从高到低排列，与数据概览表一致
8. **案例连续编号**：全文案例连续编号，重排类别时同步重编
9. **聚焦AI问题**：复盘报告聚焦AI生成内容本身的问题，编导补充细节是正常流程不计入问题
10. **问题分类编码**：不使用缩写（D1-D6等），全部使用完整描述
11. **大标题独立显示**：「问题案例分析」作为独立板块标题，在数据概览之后、具体案例之前