# v7.5.2 - 品牌舆情雷达 · Design v1

> 状态：`design-v1 / demo-synced / 待产品审阅`；唯一当前交互设计文件，不是新一套视觉原型。
> 上游：[Input v1](input_v1.md)、[Spec v1](spec_v1.md)。代码基线：kol-next `codex/752-brand-reputation-radar`，HEAD `64b19fb34`。
> 本轮目标：在已有Demo骨架上补齐可执行的页面/组件状态，并同步Spec已确认的局部差异。生产数据/算法P项和Stage C不因本Design自动定案。

## 1. 文档与Demo的关系

Input规定边界，Spec规定业务规则，本文规定这些规则如何在页面和控件中表达。当前kol-next Demo是已有布局和交互事实；本轮可执行决策同步到Demo和Spec，未实现或待定义项明确标记。旧VOC是内部组件来源，不出现在用户界面解释中。

本Design覆盖两页的入口、层级、所有当前模块、筛选/排序/分页、主题证据、Creator图、加载/空/不可用状态、桌面和语言边界。PRD按本文D编号与Spec业务编号对照生成，不把设计文档存在视为生产接口、权益或算法已完成。

## 2. 设计规范引用与事实来源

设计规范根：`/Users/yukuangji/Work/NoxInfluencer/pm-workspace/kol2.0-design-specification/`。

- `README.md`：Demo代码为当前设计真相，任务差异留在评审记录，不以新静态稿替代真实页面。
- `playbook/design-principles.md`：B2B数据平台、语义token、图表色板、桌面密度。
- `playbook/element-ui-alignment.md`：表格、排序、分页、DatePicker、抽屉、加载与空态的成熟交互。
- `playbook/accessibility.md`：状态文字、焦点、点击热区、可读图例、Loading/Empty/Error区分。

代码根：`/Users/yukuangji/Work/NoxInfluencer/pm-workspace/kol-next/`。当前页面由 `components/brandReputationRadar/overview.vue`、`realtime.vue` 与 `section/` 驱动，数据由独立StageB Provider/Store驱动。不要根据未挂载的旧mixins、TopTable或画像组件推导Design能力。

本轮没有MasterGo设计稿输入，不主张像素级MasterGo还原；以同一Demo修改前后截图、代码尺寸与现有设计规范核对。截图、实际视口和检查结果统一见 [Design验证记录](reviews/design_v1_review.md)。

## 3. 页面骨架与视觉尺寸（D-01）

### 3.1 全局入口与头部

保留全站桌面壳。Brand演示入口仍在“我的监控”同组次按钮；进入独立雷达，不加第五Tab或全局导航。顶部保留头像/品牌名、品牌舆情雷达标题、示例标识、已采集内容数、采样评论数、来源摘要、观察窗、观察截至和一行弱状态。

头部数字依赖当前页全局快照；观察截至取fixture.lastUpdateTime，不能随用户选窗变成新采集时间。仅现有Brand query传递生效，market/language/scope_ref不伪装成筛选。生产返回按钮/无权限入口未定义，当前不新增。

普通Tab只有“舆情全景 / 舆情动态”，默认全景。两个页面均无锚点、sticky二级导航、快速跳转和证据定位滚动。

### 3.2 从当前VOC样式沿用的参数

| 层级 | 本版实现基准 | 设计责任 |
| --- | --- | --- |
| 页面数据区 | 水平padding 40px；模块间距24px | 保留旧VOC页面密度，单模块不控制全站壳宽 |
| 卡片 | 白色 `$kol_white`、圆角20px、上下padding24px | 背景由卡片承担，父层不再额外铺同色圆角块 |
| 卡片标题 | 16px/500、24px行高，左4px `$kol_main`、左padding20px | 所有现有模块及Creator一致 |
| 卡片内容 | 上距24px、水平padding24px | 表格/图表不另起新的外层卡片 |
| 一级分组 | 20px标题，采样/范围提示12px | 语义h2；图表和表格标题沿用现有h3或组件标题 |
| 配对卡 | `.voc-list`横向间隔24px，使用原`.voc-item-6`与局部容器约束 | 来源/地区、评论词云/排行等保持成对；不要全部拉成通栏 |
| 全景时间线 | 高180px；内容/评论趋势各220px | 沿用图例、轴tooltip与时间选择 |
| 动态Dashboard | 世界地图446px；叠加区556×304px，left40/bottom24，趋势174px | 地图+摘要/趋势一体，不能拆成三个新卡片 |
| 高级筛选 | 右侧400px、头/尾16×24px、主体24px、主体滚动 | 仅全景；共用内容/评论两组 |
| 主题证据 | 右侧640px、内部证据滚动 | 单抽屉，没有新增工作流 |
| Creator图 | 主条18px、次条8px，共用−100～100，分组高度80px加44px轴区 | 粗细/实心/描边与文字图例共同区分 |

字号、颜色优先引用现有SCSS变量和mixin；不新设token。图表使用既有colorList，不把品牌橙当所有情感系列。长文本自然换行/截断遵循旧组件；完整证据在抽屉查看。

## 4. 两页模块编排（D-02）

### 4.1 舆情全景

```text
品牌头部 / 两个普通Tab
高级筛选入口 + 当前范围/已应用条件
核心概览：品牌声量双趋势 → 内容指标行 → 采样评论指标行
内容舆情：内容趋势 → 标签排行/所选趋势或词云 → 内容情感/主题表
          → 已观测来源与地区（配对、条件展示）→ 内容明细表
评论舆情：采样评论趋势 → 评论情感/主题表 → 评论明细表
影响情感：Creator双指标、规模/类型切换、查看内容证据
```

四个一级组严格为core/content/comment/impact。无“其它”、受众、发布频率或隐藏折叠背景入口。空数据保留可用范围控制和明确短空态，不保留空白图表。

### 4.2 舆情动态

```text
品牌头部 / 两个普通Tab / 固定近期观察窗
RealtimeDashboard整体：内容地图 + 72h内容/采样评论摘要 + 双序列
内容动态：主题标签与所选趋势 → 负向内容主题
          → 新发布内容地区与已观测来源 → 热门内容表
评论动态：主题词云与主题排行 → 负向评论语言 → 评论样本表
```

内容总趋势只在Dashboard显示一次；主题自身趋势不删除。无高级筛选按钮/抽屉/总清除结果条。地图及负向主题的局部可关闭条件放在内容表前，不构成恢复高级工具条。

## 5. 图表、主题与来源交互（D-03）

| 模块 | 操作和反馈 | 不影响的范围 |
| --- | --- | --- |
| 全景品牌声量趋势 | tooltip分别标内容/采样评论，拖选时间写入全景时间条件；总清除恢复完整允许窗 | 不采集、不重算生产数据 |
| 两个域的普通趋势/情感趋势 | 沿用旧时间序列、图例开关和tooltip；内容按pubTime，采样评论按sampled_at | 不因点图例改变数据集/表格分母 |
| 全景主题标签 | 列表/词云切换；数量/已观测曝光切换重排；点列表项切该项趋势 | 不筛内容表；词云不假造点击能力 |
| 双域情感主题表 | 各自主题多选、分页；候选按主题去重，主题×情感行保留；详情打开该行全部证据 | 主题选择不改全局趋势或另一域 |
| 全景来源/地区 | 来源名+数量；单一来源加有限提示；多地区才列表 | 不展示全网份额，不显示受众地区 |
| 动态主题/标签、负向主题、地区与评论语言Top榜 | 前5列表，点选后摘要与小趋势同步，名次使用当前项真实排序位置；评论入口另开当前域证据 | 不把任意选择项标成#1 |
| 动态来源Top榜 | 只读来源摘要，顶部保持本榜第一项；未接平台点选筛选 | 不将只读来源榜写成平台切换器 |
| 动态地图/地区 | 点击同地区开/关；切到首个匹配内容的平台、页码回1、显示可关闭地区tag | 不滚动、不改评论域、不路由跳转 |
| 动态负向主题 | 点击开/关，清地区，筛“该主题且负向”的内容，页码回1 | 地区/主题互斥，不变成多重全局筛选 |
| 动态评论词云/主题/语言 | 更新该项趋势并打开同快照主题或语言负向评论抽屉 | 不改变主内容表或主评论表条件 |

动态采样评论主题/负向语言小趋势同步改用sampled_at，与主采样趋势一致。评论表仍显示/排序published_at，不混用。生产是否包含旧内容近期评论、时区/桶宽等P-06问题保留；当前Demo仍为原72h集合和6h桶。

单一来源用现有短摘要；缺地区时Dashboard保留原尺寸、地图位置写“内容地区不可用”，摘要与趋势继续展示。数据不完整时禁止补出不存在的平台/地区。

## 6. 表格与筛选状态（D-04）

### 6.1 内容表

保留内容信息、内容情感、观看值和头部内容采样评论情感。曝光增长历史可用才显示趋势列；固定fixture共用曲线不能冒充逐内容历史。本轮StageB明确标为历史不可用，品牌内容表在整批没有可靠序列时隐藏该列，保留条件展示能力。增长率null继续显示不可用标记，不生成箭头。

标题关键词trim后按Enter提交；空白清空。列情感为正/中/负，未知仍通过全景高级筛选。排序只作用观看量，支持升/降/取消。默认全景集合顺序、动态观看量降序。平台默认YouTube，动态按可用平台回退。

页码初始1、每页5，可选5/10/20；搜索、情感、平台、排序、页大小变化回第一页。翻页不自动滚动。全景应用/清除高级筛选时，局部标题/情感、主题条件、局部排序和页码一起重置，表头箭头与数据一致；不要让不可见排序残留。

### 6.2 评论表

正文trim后即时过滤；默认发布时间降序，可按发布时间排序。字段为评论、作者/平台、主题、情感、父内容ID、发布时间，不展示未经确认采集的评论点赞数；父ID为当前文本引用，不新增未经权益定义的资产跳转。

搜索/平台/排序/页容量变化回1；外部集合变化回1且关闭旧抽屉。主题点击使用本表平台/关键词过滤后的全部同主题评论，不只当前页。评论比例分母含已知中性、排除未知，缺已知样本显示不足。

### 6.3 全景统一高级筛选

400px右抽屉共两组：内容（关键词、平台多选、日期、情感含未知、Creator规模/类型），评论（正文关键词、主题、情感含未知、所属热门内容）。日期快捷7/14/30/90天以固定观察截至为锚，不以机器今天为锚。

| 状态/动作 | 反馈 |
| --- | --- |
| 打开 | 将已应用条件复制为草稿；焦点进入可操作抽屉 |
| 编辑 | 不改页面快照，只改草稿 |
| 应用 | 关闭抽屉、更新全景快照、显示按域标记的条件；局部表格/主题状态重置 |
| 取消/X/Esc/遮罩 | 丢弃草稿，不改结果 |
| 清除 | 立即恢复两域高级条件和品牌允许窗，关闭抽屉，不需要再应用 |
| 筛选空结果 | 保留入口和清除能力，给出短空态，不自动放宽条件 |
| 全景→动态→全景 | 动态不继承隐藏条件，当前回全景为默认范围；不额外实现条件记忆 |

内容条件限制内容与其关联评论；评论条件只影响评论及依赖评论的次指标，不改内容基线。市场/语言/地区全局筛选没有本轮新入口。

## 7. Creator与证据抽屉（D-05）

### 7.1 主次指标的样本量

保持原双条结构、配色/粗细/刻度/固定分组顺序，不改公式。主条n改为实际进入内容基线计算的有效内容数，次条n仍为有已知情感评论的有效内容数。tooltip/可访问性文本明确“有效内容样本量”，组全部内容量仍保留数据合同供证据使用，不把全部量当有效分母。

主/次条缺值保持null；没有有效评论仍显示“评论样本不足”并允许查看内容。内部覆盖率、生产权重及阈值待P-01，不为闭合文档自造百分比或改变0.6/0.4演示参数。

### 7.2 单个证据抽屉

沿用640px右抽屉、关闭行为、作者/日期/全文/内部引用和内部滚动。评论证据不展示点赞数；内容证据仍可展示内容自身已有的互动字段。普通主题入口保持单一数据域；Creator混合入口在同一抽屉内按“内容证据 n”和“头部内容评论采样 n”两段连续展示，分别计数，不新增Tab、第二层抽屉或处理工作流。

内容缺少评论时仍有内容段；没有该域记录不渲染空分组。抽屉总数若存在只能叫证据总数，不能叫采样评论数。正文不写开发实现说明。关闭不改变页面筛选，不自动定位到页面表格。

## 8. 数据状态与异常呈现（D-06）

| 情形 | 用户看到什么 | 当前实现界限 |
| --- | --- | --- |
| 加载中 | 沿用loading，控件保持页面结构，最新请求生效 | 不新增采集进度或SLA |
| 请求失败 | 局部错误文本与重试；清不可用快照，不露旧范围数字 | 全景补与动态等价的重试读操作，不触发写入 |
| 已知范围零内容 | 指标0，数据区短空态，保留清除；不画虚构零时间线/标签空图 | 真实有记录范围的零时间桶仍可为0 |
| 有内容无采样评论 | 内容图表/证据可读，评论区显示采样不足 | 不填中性/0% |
| 部分覆盖 | 单行“部分覆盖”，不可用语言不排行 | 不能以空数组判无反馈 |
| 延迟/过期 | 保留旧快照与原观察时间，短状态词 | 不改成“刚刚更新” |
| 无地区 | 地图位置短空态，Dashboard摘要/趋势不拆 | 不能换评论地图 |
| 单来源/单地区 | 来源短摘要；单地区不做排行 | 不补齐其它来源 |
| 评论门槛尚未定义 | 文档规定eligible/insufficient/unavailable的后续降级形态，代码保持已验证演示场景 | 不把非空判断说成已实现生产门槛（DIFF-12/13继续待定） |

评论主题样本不足的未来形态为简单主题列表+证据；无资格/不可用不展示强排行或比例。阈值、覆盖率与资格字段未定，本轮仅定义展示分支，不伪造可执行生产条件。

## 9. 桌面、多语言与可访问性（D-07）

- 以1440px桌面和1280px对照核验组件关系；沿用全站当前最小宽度，不能将继承的1424px壳宽说成新增雷达溢出，也不能宣称1280绝对无整页滚动。不得新增移动端断点/折叠导航。
- 图例、主次条形、状态文字同时表达语义，不仅颜色区分。标题层级、表格字段、抽屉标题和关闭标签可被读取。
- 新增局部词条同步zh/en/tw/jp/kr，沿用品牌组件消息文件，不改i18n子模块；完整五语整页视觉仍单独验收。
- 原WordCloud、TopNumber、SearchPagination等复用交互保持；证据不新增只有hover才能访问的重要动作。键盘焦点和Esc使用现有Element行为，补充按钮需要语义和aria标签。

## 10. 本轮变更与Spec差异映射（D-08）

| Spec项 | 本Design决定 | Demo同步范围 |
| --- | --- | --- |
| DIFF-01 | 缺可靠曝光历史时不显示伪曲线，保留字段可用时展示 | StageB屏蔽旧共有序列；内容表条件列 |
| DIFF-02 | 同名评论采样小趋势使用sampled_at | 动态主题/语言映射；生产窗口P-06未关闭 |
| DIFF-03 | 排名为真实当前项名次 | 品牌独立TopNumber模板适配，旧VOC默认组件不修改 |
| DIFF-04 | 标题trim后提交 | 品牌内容表 |
| DIFF-05 | 应用高级条件重置局部排序 | 全景父状态与重建表头一致 |
| DIFF-06 | 主n使用有效计算内容数 | StageB新增有效数量、Creator标签/tooltip |
| DIFF-07 | Creator混合证据按域分段/分别计数 | 同一主题抽屉向后兼容接收分段 |
| DIFF-08 | 空集合不画伪总趋势/空标签图，失败有重试 | 既有页面空/失败分支；生产覆盖元数据仍待定 |
| DIFF-09 | 主题候选去重，主题×情感行不变 | EmotionSection候选适配 |
| DIFF-10/11 | 旧能力去向与文档主线已明确 | 继续回写事实状态，不恢复旧模块 |
| DIFF-12/13 | 展示方式确定、资格和阈值未定 | 本轮不设生产门槛，不宣布已闭合 |

只改品牌副本/父容器/Mock adapter；排名符号在旧TopNumber模板内部硬编码，父层不能通过原props调整，因此需要最小品牌模板适配，复用旧样式与子组件，保持旧VOC不变。Creator分组证据原抽屉只有单列表，增加兼容分段输入是为正确表达内容/评论域，不新增证据系统。

## 11. Stage C与生产下游（D-09）

本轮不新增提及分类UI、跨域主题关联视图或近期观察模块。未来位置约束：C-01嵌入内容聚合/表格，C-02靠近现有主题表，C-03在Dashboard之后最多三条；这些只记录上游方向，不是已完成设计细节或实施。

分类依据、主题join、来源交集是否非平凡、权重/样本/覆盖门槛、品牌scope与权益、最终Brand入口/返回、生产采集刷新与接口全部沿用Spec P-01～10。PRD必须携带未决状态，不能由Demo的默认样例填空。

## 12. 验证与交付（D-10）

执行顺序：修改前Demo截图/判定 → 针对性回归复现 → 仅品牌副本/adapter修正 → Node验收/相关lint → 现有Stage B浏览器runner + 本轮补充交互/截图 → Spec/README/回流索引同步 → Design一致性审查。

P1：新旧模块归属不退回、地图仅内容/不滚动、筛选与排序一致、未知不补0、n/证据域正确、零真实雷达请求、无新模块体系。P2：1440/1280尺寸对照、局部五语、空态/语言降级。P3：独立路由与旧VOC未改边界；旧VOC授权整页不由Mock回归代替。

验收记录包含真实命令、结果、截图、版本和dirty范围。历史13/37/53通过数不代替本轮结果。本文件状态只有在对应验收完成后改为已同步；静态Demo验证与生产就绪分开。

2026-09-08本轮结果：Stage B 13/13、Demo 38/38、Design控件6/6、数据5/5；浏览器Stage B 53/53、Design补充14/14。1440/1280截图、请求边界和独立审查见 [验证记录](reviews/design_v1_review.md)。静态Demo PASS；生产HOLD，未生成PRD，未提交或推送代码。