# Design v1：内容监控自动追踪 QoL（v7.6.3）

> 交互设计 · 上游：spec_v1.md
> 状态：design_v1_reviewed
> 日期：2026-09-21
> 目标端：WEB / Desktop First
> 目标代码：../kol-next 真实内容监控页面
> Demo：已在真实页面组件上完成一轮交互验收，详见 `README.md`
> 评审记录：reviews/design_v1_review.md

## 0. 设计结论

v7.6.3 延续内容监控现有自动追踪页面结构，改造当前 addAndAutoTrack Drawer 内的自动追踪 Tab：

- 保留左右分栏结构，将右侧 Drawer 基准宽度调整为 1200px，以减少规则表操作区的横向溢出；头部 112px、左侧 400px 表单保持不变；
- 来源横向 Tab 只保留“手动添加 / 批量添加”；收藏夹和其他规则入口收进“批量添加”内容区，复用现有收藏夹导入交互；
- 收藏夹一次选择一个收藏夹，但频道选择允许跨平台累积，切换平台不清空已选项；
- 其他规则支持同一项目内多选，只回填频道，不带入关键词或短链；
- 规则表单增加生效期、历史补扫开关和追溯时长，但不把历史补扫做成独立任务产品；
- 编辑态只读展示生效期和历史补扫配置，避免更新动作改变当前周期或触发/取消补扫；如需调整，回到新建规则态；
- 保存与另存放在编辑态表单底部并列；列表行操作组只保留编辑、暂停/恢复和删除，暂停/恢复继续沿用悬停显示；
- 多来源内容沿用内容监控已有来源筛选入口；内容列表中的“自动追踪 · N 个规则”使用 hover Tips 展示规则来源和历史/未来命中模式；
- 不增加重型规则管理中心、历史任务页面或明显扩展的内容详情视觉；
- Demo 直接修改 kol-next 真实路由和组件，模拟数据只用于交互验收，不伪装成生产能力。

## 1. 设计规范引用

本 Design 使用以下规范作为实现约束：

| 规范来源 | 本任务使用方式 |
| --- | --- |
| ../kol2.0-design-specification/README.md | Demo 代码是当前设计真相；任务结论先留在 review |
| playbook/semantic-tokens.md | 使用 text/primary、text/secondary、text/tertiary、bg/surface、border/default、action/primary、state/error |
| playbook/tokens.md | 延续 Noto Sans SC、32/40/48 控件高度、主色 #FA6300、字号和基础间距 |
| playbook/components/form.md | 字段标签、输入框、错误提示、表单间距和必填表达 |
| playbook/components/select.md | 收藏夹/规则选择器的 trigger、下拉面板、搜索和选中态 |
| playbook/components/table.md | 频道表格、表头选择、行高、分隔线和表格状态 |
| playbook/components/checkbox.md | 部分频道选择、表头半选、disabled 和热区 |
| playbook/components/tabs.md | Drawer 内来源切换和平台筛选的 active/hover/disabled 语义 |
| playbook/components/tooltip.md | 多来源 hover Tips；Tips 只承载短列表和命中模式 |
| playbook/components/toast.md | 保存成功、导入结果、轻量反馈；阻塞错误仍需就地展示 |
| playbook/components/modal.md | 收藏夹/其他规则选择器使用短流程 Dialog |
| playbook/element-ui-alignment.md | 对齐 el-drawer、el-dialog、el-select、el-table、el-checkbox、el-tabs |
| playbook/accessibility.md | 不只靠颜色表达状态；焦点、键盘操作、loading/empty/error 分离 |

当前尚未取得的 live CSS 值不在本 Design 中臆造，Demo 实施时以真实页面 computed style 和截图复核为准，并记录到 design-compliance.md。

## 2. 设计-代码-线上校验

### 2.1 真实代码入口

| 真实代码 | 当前事实 | Design 影响 |
| --- | --- | --- |
| pages/video-monitor/monitor.vue | 内容监控项目入口 | Demo 通过真实项目页进入，不另建演示路由 |
| components/videoMonitor/monitorDetail/index.vue | 项目详情页，挂载全局筛选、内容表和 AddAndAutoTrack | 多来源筛选继续挂在真实项目详情页 |
| components/videoMonitor/monitorDetail/index.vue:1611 | 已按项目加载自动追踪规则简表 | 来源筛选可以复用当前规则数据流 |
| components/videoMonitor/monitorDetail/MonitorGlobalFilters.vue:438 | 已存在 MonitorSourceCascader，支持自动追踪父子关系和多选 | 多来源关系优先复用该筛选组件 |
| components/videoMonitor/monitorDetail/MonitorContentMonitor.vue:743 | 内容列表已有 uploadMethod/dataSource 来源列 | 来源标识和 Tips 应落在现有内容列表结构内 |
| components/videoMonitor/monitorDetail/MonitorContentMonitor.vue:1814 | 当前可识别手动和自动追踪来源 | 多来源适配不能另造第二套内容来源字段 |
| components/videoMonitor/monitor/addAndAutoTrack/index.vue:1 | 1200px 右侧 Drawer | 主结构保留，增加可用宽度以减少规则表横向溢出 |
| components/videoMonitor/monitor/addAndAutoTrack/index.vue:55 | 自动追踪 Tab 为左表单、右规则列表 | v7.6.3 直接扩展这两个区域 |
| components/videoMonitor/monitor/addAndAutoTrack/autoTrackForm.vue:19 | 来源 Tab 保留手动/批量，批量区承载文件上传和频道来源入口 | 收藏夹/其他规则不再占用横向来源 Tab |
| components/videoMonitor/monitor/addAndAutoTrack/autoTrackList.vue:39 | 规则列表是 Element Table，编辑/暂停恢复/删除在状态列操作组中 | 列表不放另存；另存入口由编辑态表单承载 |
| components/email/detail/recipient/simpleResourceList.vue:4 | 已有收藏夹下拉、平台切换、频道表格、行选择、全选、分页和添加动作 | 优先复用选择与展示交互，替换提交回调 |
| components/filter/monitorSourceCascader.vue:1 | 已有内容来源级联多选和半选逻辑 | 多来源筛选直接复用 |

### 2.2 真实线上环境校验

本轮无法建立可用的 Codex Browser 登录态，浏览器能力返回 unsupported Codex auth method: apikey。因此：

- 本 Design 的“真实页面”依据是当前 kol-next 代码，不是已完成的生产页面实测；
- 页面尺寸、真实账号权限、接口返回、内容来源数据和生产任务状态不能在本轮宣称已验证；
- Demo 实施前必须用 Browser 或项目确定性 Playwright runner 对真实项目页执行校验；
- Demo 通过只证明真实页面本地改造和交互合同，不证明生产权限、配额、异步任务、计费或数据覆盖。

## 3. 页面骨架和视觉基线

### 3.1 保留当前结构

当前真实代码已经提供以下布局基线：

- Drawer 宽度 1200px；
- Drawer 头部高度 112px；
- Drawer 头部左右 padding 24px；
- 自动追踪左表单宽度 400px；
- 左表单背景为当前 $kol_bg_lighter_grey；
- 左右区域分隔为当前 $kol_bg_light_grey；
- 表单区 padding 24px；
- 规则列表占据剩余宽度；
- 表单字段之间当前使用 20px vertical rhythm；
- 输入框当前视觉高度约 42px、圆角 12px；
- 频道已选项当前为 64px 高、14px 圆角、40px 头像；
- 规则列表表格当前行高 72px、表头行高 42px。

这些尺寸来自当前组件实现，Design 不另起一套页面尺寸。

### 3.2 语义 token

新增或调整样式只使用已有语义：

- 主操作、active、当前 tab：action/primary / 当前代码 $kol_main / #FA6300；
- 主正文：text/secondary / #323B4B；
- 辅助、placeholder、说明：text/tertiary / #7D849B；
- 弱化边框：border/default，当前组件常用 #E5E7EB 或项目变量；
- 错误和缺失短链：state/error 与 state/error-soft；
- 正常运行/成功：复用现有绿色状态 token；
- 不新增图标库和外部字体，不用 Unicode 符号替代现有 kol-icon。

### 3.3 不扩展视觉

以下内容明确不新增：

- 历史补扫独立任务页；
- 多来源详情展开面板；
- 规则管理中心；
- 新的全局导航入口；
- 新的内容卡大区块；
- 为历史过程增加进度条、阶段时间线或独立状态卡。

## 4. 自动追踪 Tab 的信息架构

    内容监控项目详情页
      -> 新增/自动追踪 Drawer
          -> 自动追踪新内容 Tab
              ├─ 左：规则编辑表单
              │   ├─ 规则名称
              │   ├─ 监控频道来源切换
              │   │   ├─ 手动添加
              │   │   ├─ 收藏夹
              │   │   ├─ 其他规则
              │   │   └─ 批量上传
              │   ├─ 已选频道列表
              │   ├─ 监控关键词
              │   ├─ 生效期
              │   ├─ 历史补扫
              │   └─ 保存 / 保存并更新 / 另存为
              └─ 右：规则列表
                  ├─ 规则名、时间
                  ├─ 频道、关键词
                  ├─ 状态/生效期
                  └─ 编辑、另存、暂停/恢复、删除

左右结构保持当前页面心智：左侧编辑当前规则，右侧观察已有规则。来源选择器是短流程，不把其它业务流程塞入右侧规则表。

## 5. 频道来源交互

### 5.1 来源切换

当前 autoTrackForm.vue 的来源横向 Tab 只保留“手动添加 / 批量添加”。收藏夹和其他规则入口放进“批量添加”内容区：

- 来源切换仍沿用现有 .channel-sub-tab 的轻量文字 Tab；
- active 使用主色文字；不增加厚重卡片和大面积背景；
- 切换来源只改变输入区域，不清空当前已选频道；
- 批量添加区保留文件上传，并在其下方并列展示“从收藏夹导入”和“从其他规则复制”两个次级入口；
- 已选频道列表仍是同一份 form.kolList；
- 来源选择不触发规则保存，不触发未来追踪，不触发历史补扫；
- 来源组件关闭或取消时，临时选择不写入规则。

### 5.2 收藏夹入口

点击“收藏夹”后打开收藏夹选择器短流程。实现优先复用：

../kol-next/components/email/detail/recipient/simpleResourceList.vue

复用范围：

- 收藏夹搜索下拉；
- 单收藏夹选择；
- 平台筛选/切换；
- 频道分页表格；
- 行勾选、表头全选、半选；
- 已选数量；
- “添加已选”和“添加全部”语义。

替换内容：

- 选择结果回填自动追踪表单，不调用邮件收件人或推广任务接口；
- 选中项保留 channelId + platform + alias/avatar/starUrl + shortLinkRelations；
- 选择器关闭只返回当前表单，不保存规则；
- 多平台切换时保留跨平台已选集合；
- 若原组件的单平台读取、分页状态或业务提交耦合不能安全拆出，则复制同一交互为自动追踪专用组件。

### 5.3 收藏夹选择器

建议使用短流程 el-dialog 或当前页面既有的等价浮层承载宽表格；不在 400px 表单栏内硬塞多列频道表格。

结构：

    标题：从收藏夹添加频道
      收藏夹下拉（单选 / 可搜索）
      平台筛选或平台 Tab（跨平台已选状态保留）
      已选摘要：已选 N 个频道
      频道表格
        [checkbox] 频道名称 / 平台标识 / 可用信息 / 短链状态
      分页
      [取消] [添加已选 N 个] [添加全部]

交互规则：

- 一次只选一个收藏夹；
- 平台筛选不改变已选集合；
- 分页切换恢复当前平台和其他平台已选状态；
- 表头全选只作用于当前可见页/当前筛选结果，“全部”操作必须由按钮明确表达；
- 选择器内不带入关键词、规则名、时长或历史补扫；
- 缺少 Nox 短链的频道仍可导入；
- 当前规则没有有效关键词且频道缺少可用短链时，在已选频道卡片上显示轻量“缺少短链”提示；
- 导入失败逐条列出原因，成功项仍可添加；
- 已存在频道按 platform + channelId 去重，并提示过滤数量；
- 取消不改变当前表单；确认只把频道合并到当前表单。

### 5.4 其他规则选择器

点击“其他规则”后打开同级短流程选择器：

    标题：从其他规则添加频道
      规则搜索
      当前项目规则多选列表
        [checkbox] 规则名 / 状态 / 频道数量
      已选规则摘要
      可选只读预览频道数量
      [取消] [添加已选规则的频道]

交互规则：

- 只加载当前项目、当前用户有权限查看的规则；
- 支持多选规则；
- 不跨项目；
- 只复制频道，不复制关键词、短链、规则名、时长、生效期或历史补扫；
- 合并后按 platform + channelId 去重；
- 不因选择规则触发任何保存或追踪动作；
- 失败规则或失效频道逐条提示，成功频道继续进入表单。

### 5.5 已选频道列表

复用当前 autoTrackForm.vue 的频道卡片：

- 头像、平台角标、频道名称、短链信息和删除按钮继续使用当前结构；
- 收藏夹/其他规则导入的频道和手动/Excel 添加的频道使用同一列表；
- 缺少短链只增加轻量状态文案，不新增另一种卡片；
- 列表内重复频道不再追加；
- 列表为空时维持当前空态和保存禁用逻辑；
- 频道数量超过容器高度时使用当前列表滚动，不扩大 Drawer。

## 6. 规则表单设计

### 6.1 规则名称

保持当前字段位置和输入样式：

- 使用现有 el-input 和表单标签；
- 必填标记使用主色；
- 同名错误在字段附近说明，保留真实业务错误码到错误提示层；
- 不把同名错误只放在 Toast。

### 6.2 关键词

保持当前 Tag 形态：

- 最大 10 个；
- 输入回车或 blur 添加；
- 第 11 个阻断并显示就地提示；
- 已导入频道没有短链时，若规则已有有效关键词，允许继续保存；
- 若规则没有有效关键词，则保存前定位到关键词/短链校验位置。

### 6.3 生效期

在关键词区之后增加一个轻量字段组：

    生效期
      ○ 7 天
      ○ 30 天
      ○ 长期 ⓘ
    长期说明：使用现有 info icon hover Tips 展示“无自然到期时间；连续 7 天有效追踪时间无新增命中内容时自动终止，暂停期间不计入观察期”

规则：

- 使用现有 radio 或等价单选组件，不用 checkbox；
- 选中态使用 action/primary；
- “长期”后的说明使用系统已有 info icon + hover/focus Tooltip，不在字段下方增加长段落；
- 表单底部追踪提示在 7 天、30 天和长期之间使用同一套文案，不渲染生效天数变量；
- 不在表单中展示复杂账本、扣费流水或价格计算；
- 长期说明保留权限、席位和用户停止/删除约束；
- 长期没有自然到期时间，但连续 7×24 小时有效追踪时间无新的未来命中时自动终止；暂停、采集失败和历史补扫不计入该观察期；
- 自动终止使用独立原因文案“连续 7 天无新增命中”，可手动恢复并重新开始观察期；
- 旧规则没有 durationMode 时显示兼容后的明确模式，不把 null 显示为长期。
- 编辑态保留当前值但禁用选择；文案说明调整生效期需要新建规则，避免更新后出现当前 expiresAt、计费周期和显示值不一致。

### 6.4 历史补扫

使用开关 + 时长单选的轻量字段组：

    追踪历史内容   [switch]
    开启后：追溯时长  ○ 3 天  ○ 7 天  ○ 30 天

规则：

- 默认关闭；
- 开关使用现有默认型 switch，不在轨道内嵌“开启/关闭”文字；
- 追溯时长复用现有普通 radio 组，不使用独立的胶囊按钮样式；
- 开启后才展示 3/7/30 天；
- 不展示 historicalStartAt/historicalEndAt；
- 不展示补扫进度、补扫任务 ID 或历史任务页面；
- 保存动作进入统一异步链路，过程对用户透明；
- 统一任务出现问题时最多显示一个“异常”状态，并提供现有重试入口；
- 历史命中内容在现有内容来源体系中可被识别为历史补扫来源。
- 编辑态保留当前开关和追溯时长但禁用修改；调整历史补扫设定必须进入新建规则流程。

### 6.5 保存动作

当前表单底部已有“保存”按钮。Design 需要把保存动作按上下文解释：

- 新建：保存成功后进入运行态；历史开关开启则排队补扫；
- 编辑：保存并更新原规则，不触发或取消历史补扫；
- 编辑态可点击“新建规则”快速回到空白表单；无未保存修改时直接切换，有修改时先确认放弃；
- 编辑规则 A 未保存时点击规则 B，先确认是否放弃 A 的修改，取消则保持 A；
- 运行中编辑：保留“保存并更新”和“另存为新规则”两个动作；
- 另存：创建新规则后弹出短确认，确认“立即生效”或取消；
- 取消立即生效：新规则保留为“未生效”，不追踪、不补扫、不计运行中费用；
- 生效确认失败：新规则仍保留，列表显示“未生效”。

另存动作不放入规则列表行操作组。编辑态表单底部使用与主保存按钮并列的次要按钮，保持当前页面的按钮高度、圆角、主色和间距；新建态不显示该按钮。

## 7. 规则列表设计

### 7.1 列表结构

保留当前 AutoTrackList：

- 规则名称 + 添加时间 + 到期时间；
- 监控频道头像堆叠和完整频道 Popover；
- 关键词 Tag 摘要和现有完整列表 Popover；
- 状态列；
- 当前搜索框和运行中数量 badge。

v7.6.3 增量：

- 状态增加“未生效”和“已暂停”的清晰文案；
- 生效期显示 7 天/30 天/长期对应的状态说明；
- 状态异常若由统一任务返回，使用轻量异常标识，不新增历史补扫列；
- 列表行操作组不出现另存；编辑态通过表单底部的并列“另存为新规则”进入；
- 暂停/恢复/删除继续使用现有确认 Popover；
- 行 hover 时显示操作，保留当前 hover 机制和 40px 热区。

Drawer 关闭与响应式：

- Drawer 基准宽度 1200px，但内层最大宽度不超过视口宽度；
- 头部始终提供独立关闭按钮，关闭仍复用未保存内容确认；
- 视口小于 Drawer 宽度时不依赖横向滚动条寻找关闭入口。

### 7.2 状态矩阵

下表的“操作”表示规则可达到的业务动作；“另存”统一从编辑态表单进入，不表示列表行操作组必须提供该按钮。

| 状态 | 列表展示 | 操作 |
| --- | --- | --- |
| 未生效 | 中性状态文案 | 编辑、另存、立即生效、删除 |
| 运行中 | 绿色运行状态 + 生效期 | 编辑、另存、暂停 |
| 已暂停 | 中性/警示状态，明确“已暂停” | 编辑、另存、恢复、删除 |
| 已过期 | 灰色过期状态 | 编辑、另存、恢复、删除 |
| 无命中终止 | 明确“已终止 · 连续 7 天无新增命中” | 查看原因、恢复、删除 |
| 配额阻断 | 错误色状态 + 原因入口 | 查看原因、恢复/重试、删除 |
| 已删除 | 不进入当前列表 | 由后端历史或内容关系保留 |

“异常”是统一任务状态，不替代规则生命周期状态；若出现在规则列表，只作为轻量提示或 hover 说明，不能把异常误显示成暂停、过期或配额阻断。

### 7.3 另存为

在编辑态表单底部与“保存并更新”并列提供“另存为新规则”：

- 原规则操作状态和已有内容关系不改变；
- 列表的编辑按钮打开同一规则表单，复制可编辑配置；
- 频道、关键词、时长和历史开关进入新规则草稿；
- 历史补扫执行结果不复制；
- 保存成功后弹出“是否立即生效”确认；
- 取消确认关闭后，新规则出现在列表中且标记“未生效”；列表行不提供第二个另存入口。

## 8. 内容来源和多来源展示

### 8.1 现有筛选入口

当前内容监控详情页已有：

- MonitorGlobalFilters.vue 的 MonitorSourceCascader；
- 父级“自动追踪”；
- 子级具体规则；
- 多选、半选和 URL query 状态。

v7.6.3 直接复用该来源筛选，新增规则关系数据，不新造筛选器。

### 8.2 内容列表来源呈现

当前内容列表已经有来源列和 getSourceText 归类逻辑。设计要求：

- 单来源内容沿用当前轻量来源文案；
- 多来源内容显示“自动追踪 · N 个规则”；
- hover 该标识时使用 Tooltip/Tips 展示命中规则列表；
- Tips 同时展示“未来追踪”或“历史补扫”命中模式；
- Tips 只展示短列表和必要状态，不放重操作；
- 来源筛选按关系命中，筛选某规则时不因内容还有其他来源而被排除；
- 不新增内容详情展开面板，不新增来源大卡片；
- Tooltip 在 Web 桌面使用 hover + focus；移动端后续必须提供可点击等价路径，不能只依赖 hover。

### 8.3 去重与通知

UI 只呈现结果：

- 同一内容一个监控任务；
- 多规则来源在 Tips 中列出；
- 新增统计、通知和任务数按任务去重；
- 规则关系保留多来源；
- 历史补扫和未来追踪的模式标识不改变任务数量。

## 9. 状态、空态和错误态

### 9.1 收藏夹选择器

- Loading：列表区域显示 loading，不改变标题和 footer；
- Empty：无收藏夹/无频道时显示空态和原因；
- Error：请求失败显示错误说明和重试入口，不显示“暂无数据”；
- Partial success：成功项留在选择结果，失败项逐条列出；
- Disabled：无权限收藏夹、失效频道或配额受限项使用 disabled，并解释原因。

### 9.2 规则表单

- 保存中：保存按钮 loading，避免重复提交；
- 保存失败：保留表单输入和失败字段定位；
- 另存生效失败：新规则保留为未生效；
- 缺少关键词/短链：字段就地错误；
- 无频道：保持当前保存按钮禁用。

### 9.3 规则列表

- Loading、Empty、Error 三种状态分离；
- 空列表显示当前项目暂无规则，并保留创建入口；
- 列表请求失败显示可重试错误；
- 异常任务不触发全屏弹窗，不新增历史进度区。

## 10. 国际化、响应式与可访问性

### 10.1 国际化

- 所有用户文案使用 this.$t；
- 规则名、收藏夹名、频道名和失败原因允许自动换行或 ellipsis；
- Tooltip 列表避免固定单行；
- “自动追踪 · N 个规则”在英文/繁体中文下允许更宽，不压缩操作按钮；
- 不把平台名称和状态写死在组件中。

### 10.2 响应式

当前页面明确是 Desktop First：

- >=1200px：保持 400px 左表单 + 右侧规则表；
- 1024px–1199px：保留左右结构，规则表允许横向滚动，不能让整个页面横向溢出；
- <1024px：Demo 只做 fail-safe，来源选择器转为宽 Dialog 或全宽抽屉，不强行压缩四列频道表；
- 移动端后续另行设计，不把 hover-only 行为直接搬过去。

### 10.3 可访问性

- Tab、Select、Checkbox、Radio、Switch、Tooltip、Popover 都要有键盘路径；
- 表头全选必须支持半选；
- 选中、错误、禁用不能只依赖颜色；
- 收藏夹选择器关闭后焦点回到“收藏夹”入口；
- 另存确认关闭后焦点回到编辑态表单底部的另存按钮；
- Tooltip 内容可以通过 focus 触发；
- 40px 以上操作热区沿用当前组件；
- 表格 loading/empty/error 不混用；
- 读取顺序保持“规则名 -> 来源选择 -> 已选频道 -> 关键词 -> 生效期 -> 历史补扫 -> 保存”。

## 11. 设计到代码映射

Demo 后续必须直接修改以下真实代码：

| Design 区域 | 首选代码落点 | 备注 |
| --- | --- | --- |
| 来源 Tab | components/videoMonitor/monitor/addAndAutoTrack/autoTrackForm.vue | 保留当前字段结构和 form.kolList |
| 收藏夹选择器 | 优先拆/适配 components/email/detail/recipient/simpleResourceList.vue | 只复用交互；提交改为回填表单 |
| 其他规则选择器 | components/videoMonitor/monitor/addAndAutoTrack/ 下新增专用组件或复用现有选择器 | 当前项目多选 |
| 生效期/历史补扫 | autoTrackForm.vue | 使用 Options API、Element UI 和现有 i18n |
| 保存/另存 | autoTrackForm.vue + autoTrackList.vue | 另存不覆盖原 ruleId |
| 状态/操作 | autoTrackList.vue | 复用当前操作组和 Popconfirm |
| 来源筛选 | components/filter/monitorSourceCascader.vue | 不新增第二套规则来源筛选 |
| 内容来源显示 | components/videoMonitor/monitorDetail/MonitorContentMonitor.vue | 先确认多来源字段接口，再实现 Tips |
| API/store | api/videoMonitor/list.js 及既有 monitor store | 不在 Demo 中私拼请求 |
| i18n | kol-next/i18n/master 对应语言文件 | 实施时遵守子模块更新顺序 |

如果现有 simpleResourceList 无法安全扩展跨平台选择，复制同交互到自动追踪专用组件；不复制邮件/推广任务的提交逻辑。

## 12. Demo 实施合同

Demo 直接在真实页面上改，最小范围：

1. 通过真实 pages/video-monitor/monitor.vue / monitorDetail/index.vue 进入项目详情；
2. 打开真实 AddAndAutoTrack Drawer；
3. 切到真实“自动追踪新内容” Tab；
4. 验证真实左右分栏、来源入口、表单和规则列表；
5. 使用脱敏/模拟数据演示新交互，不写入生产接口；
6. 保留真实页面的导航、Drawer、Tab、表格、按钮和现有组件 token；
7. 不新建独立 demo shell，不复制整页为旁路 HTML。

Demo 最少包含以下可切换场景：

- 收藏夹单选、跨平台累积、分页保留选择；
- 其他规则多选并合并去重；
- 缺少短链的频道导入后就地提示；
- 保存、编辑、另存、立即生效确认；
- 未生效、运行中、暂停、过期、配额阻断；
- 3/7/30 天历史补扫开关；
- 历史补扫异常状态和重试入口；
- 多来源内容标识 hover Tips；
- 收藏夹 loading/empty/error/partial success；
- 1024/1280/1440 桌面视口和键盘操作。

Demo 通过标准：

- 静态交互 Showcase：PASS；
- 真实页面挂载、组件状态和视觉一致性：PASS；
- 生产权限、真实配额、真实异步执行、计费、数据覆盖：保持 HOLD，不能从 Demo 通过推导生产可用。

## 13. 设计-代码-线上校验

### 13.1 已完成的代码校验

- 已读取 kol-next/AGENTS.md、CODEX.md 和 README；
- 已确认自动追踪真实入口、Drawer 尺寸、左右栏结构、表单状态、规则列表操作和现有来源筛选；
- 已确认现有收藏夹导入组件的单收藏夹、单平台读取限制，以及跨页选择逻辑；
- 已确认 MonitorSourceCascader 已支持规则来源多选和半选；
- 已确认内容列表已有来源字段映射入口。

### 13.2 待完成的真实环境校验

- Browser 登录态下打开真实内容监控项目页；
- 记录 1440/1280/1024 的 Drawer、表单、规则列表和内容表截图；
- 确认当前线上是否已有收藏夹、规则来源和任务状态的既有文案；
- 确认真实账号的收藏夹权限、跨平台频道字段、短链字段和规则列表返回；
- 确认 Tooltip 在当前页面的 z-index、append-to-body 和焦点行为；
- 确认 Demo 运行后真实页面接口请求是否保持预期边界。

这些验证完成前，Design 只作为实现合同候选，不宣称线上视觉和数据行为已经闭合。

## 14. Design 阶段剩余风险

- 收藏夹导入组件当前按平台读取，跨平台保留选择需要适配组件状态或复制交互；
- 历史补扫异常状态的真实任务承载位置需要由研发接口确认；
- 多来源字段和内容来源列表接口尚未证明已返回完整关系，Demo 需要先用脱敏 fixture；
- 规则状态新增“未生效”和“异常”可能需要新增 i18n、接口字段和状态映射；
- 长期无命中终止需要服务端保存最后命中时间、判断有效追踪时间和返回独立终止原因；当前固定 `monitor_duration` 逻辑无法直接复用；
- 真实线上浏览器校验受当前 Browser 认证错误阻断；
- 真实页面 Demo 修改会触及 kol-next 前端代码，后续必须同步页面/组件知识库和测试记录；
- 本 Design 不冻结具体存储、异步执行器、账本事务或生产 API 结构。

## 15. Design Gate 候选

进入 Demo 前必须通过：

- [ ] Design review：产品语义和真实页面结构一致；
- [ ] 设计规范引用和 token 映射完整；
- [ ] design-compliance.md 记录代码、设计、真实环境差异；
- [ ] 收藏夹跨平台/分页、多规则多选、短链缺失、历史异常和多来源 Tips 场景可执行；
- [ ] 真实页面路由、组件落点和回滚边界明确；
- [ ] Demo 仍保持 Static Showcase = PASS 与 Production = HOLD 分离。

Design review 已完成，Demo 实施和本地真实页面验收记录见同目录 `README.md`。Design/Demo 通过不自动等同于生产页面已上线。