# Design Options v0 · 内容监控 761 布局方案 > 阶段：design 方案对比 > 上游：`input_v1.md`、`spec_v1.md` > Demo：`06_Prototypes/monitor_761_layout_demos/index.html` > 风格参考：`kol-next` 内容监控真实页面、组件和样式。 > 结论更新：已确认以项目列表 + A 单项目工作台 + D 多项目工作台为基准继续推进；B/C 归档，不再作为主候选。 --- ## 1. 设计约束 本轮布局方案遵循以下约束： - 视觉风格尽量贴近线上真实环境，而不是做全新视觉探索。 - 主层级强调 `项目列表 -> 项目详情`。 - 原“总监控列表”降级为跨项目监控内容视图，但保留默认全部项目入口。 - 项目详情必须承载最近 7 天状态快照、内容变化、内容贡献、达人/频道贡献和数据可信度解释。 - 预算/成本为用户手动填写数据，默认未填写；不能把成本类指标当成平台采集数据展示。 - 评论获取能力不扩展，只做已有数据展示和空态解释。 ## 2. Demo 风格来源 本轮 Demo 参考了 `kol-next` 的以下真实实现： - `pages/video-monitor/list.vue` - `pages/video-monitor/monitor.vue` - `pages/video-monitor/monitor-list.vue` - `components/videoMonitor/styles/list.scss` - `components/videoMonitor/monitorList/projectItem.vue` - `components/videoMonitor/monitor/dashboard.vue` - `components/videoMonitor/monitor/monitorViewTable.vue` - `components/videoMonitor/monitor/monitorDetailDrawer.vue` 复用的主要视觉规则： - 页面主体浅灰背景，内容容器白底。 - 项目详情顶部为白色信息区，左右分布项目基础信息和操作按钮。 - 内容区域使用 40px 页面边距、24px 内容内边距。 - 项目卡使用 24px 圆角；内容容器使用 20px 圆角；指标卡使用 12px 圆角。 - 主文字 `#323b4b`，次级文字 `#7d849b`，说明文字 `#b0b7c3`。 - 主强调色沿用线上偏橙红的 `#fa6300 / #fca166` 系列。 - 筛选控件、平台 Tab、表格、进度条都尽量模拟 Element UI 与现有组件形态。 --- ## 3. 方案 A · 单项目工作台型 Demo：`06_Prototypes/monitor_761_layout_demos/option-a-project-workbench.html` ### 布局 - 顶部：项目基础信息 + 操作按钮。 - 第二行：项目级筛选，明确区分发布时间与数据观察区间。 - 主容器： - 平台 Tab + 搜索。 - 最近 7 天状态摘要指标。 - 内容级变化榜 + 监控趋势。 - 达人/频道贡献 + 平台贡献 + 数据可信度。 - 监控内容列表。 ### 优点 - 最贴合 `项目列表 -> 项目详情` 的主心智。 - Dashboard 有独立区域，但没有脱离内容列表。 - PM 看近期状态、运营下钻列表都比较顺。 - 与现有项目详情页结构差异适中，落地成本相对可控。 ### 风险 - 第一屏模块较多，需要 design 阶段控制信息密度。 - “需关注内容”如果视觉过强，容易被误解为成熟异常算法。 ### 适用判断 推荐作为主方案进入下一轮。 --- ## 4. 方案 B · 列表运营型（已归档） Demo：`06_Prototypes/monitor_761_layout_demos/option-b-list-ops.html` ### 布局 - 顶部仍保留项目信息和筛选。 - 主容器顶部放压缩版指标条。 - 主区域左侧是内容表格，右侧是运营关注队列。 - 任务详情抽屉作为右侧可见预览，强调单条内容解释。 ### 优点 - 对高频运营最友好，用户进入后直接处理内容。 - 批量标签、续期、来源排查等动作路径短。 - 能自然承接评论、短链、预算等“为什么不可解释”的状态提示。 ### 风险 - Dashboard 独立感弱，不太像本期“看板升级”的成果。 - PM/CS 想快速截屏讲项目表现时，需要更多整理。 ### 适用判断 已归档。后续仅保留“运营关注队列”“批量操作强化”等局部思路，不作为主布局继续推进。 --- ## 5. 方案 C · 看板分析型（已归档） Demo：`06_Prototypes/monitor_761_layout_demos/option-c-dashboard-board.html` ### 布局 - 项目详情第一屏大幅强化 Dashboard。 - 上部是项目近期表现看板 + 达人/频道贡献 + 内容贡献。 - 中部是平台与指标贡献、内容变化矩阵、可信度提示。 - 列表退到看板下方，作为分析后的下钻区。 ### 优点 - 最符合“建立较独立看板区域”的目标。 - 对 PM/CS 截图、讲项目近期表现更友好。 - 能清楚表达内容贡献、达人/频道贡献和数据可信度。 ### 风险 - 页面变重，可能超出内容监控作为操作工具的轻量定位。 - 与现有项目详情页结构差异较大。 - 若后端聚合指标支持不足，落地风险最高。 ### 适用判断 已归档。后续仅抽取“贡献分析”“数据可信度”“轻量内容变化矩阵”等模块表达，不整体采用。 --- ## 6. 方案 D · 多项目工作台型 Demo：`06_Prototypes/monitor_761_layout_demos/option-d-ia-transition.html` ### 布局 - 多项目工作台作为独立页面存在，从项目列表进入。 - 页面整体复用 A 单项目工作台结构。 - 顶部增加项目范围选择器，支持全部项目和多选项目。 - Dashboard、趋势、贡献、数据可信度、内容列表与 A 保持一致。 - 内容列表额外增加 `所属项目` 字段。 ### 优点 - 直接解决“项目列表 / 总监控列表平级难理解”的问题。 - 保留老用户入口，不粗暴移除全局列表。 - 与 A 保持一致，减少用户在单项目和跨项目之间切换时的认知成本。 ### 风险 - 多项目聚合指标对后端能力要求更高。 - 项目范围选择器需要处理大量项目时的搜索、多选、清空和默认全部项目状态。 ### 适用判断 作为 A 的多项目变体，与项目列表、A 一起进入 design v1。 --- ## 7. 推荐组合 推荐进入下一轮的组合是： ```text 一级入口：项目列表 主方案：A 单项目工作台型 跨项目配套：D 多项目工作台型 吸收 C 的贡献分析与可信度模块 保留 B 的运营关注队列作为可选组件或列表强化方向 ``` 理由： - 项目列表保留为一级实体页面，避免把内容监控入口误收缩成工作台页。 - A 能最大程度承接 761 的核心目标：项目详情 Dashboard 与内容列表都变强。 - D 解决用户明确提出的信息架构问题，并通过 A 的变体保持页面一致性。 - C 的看板价值很高，但整体过重；适合拆出关键模块。 - B 对运营效率有价值，但不宜让本期退回“只是列表优化”。 确认结果： - A+D 进入 `design_v1.md`。 - B/C 作为归档 Demo 和参考材料保留。 ## 8. 下一步设计问题 下一轮 design 需要收口： 1. 项目详情第一屏采用 A 的模块顺序，还是把 C 的趋势图提前。 2. “数据可信度”是独立模块，还是散落在指标和列表字段旁。 3. 项目列表中的跨项目视图入口放在顶部工具区、多选操作栏，还是两个入口都保留。 4. 任务详情抽屉是否在本期需要明显改版，还是只补状态解释区域。 5. “需关注内容”是否最终命名为“需关注内容”“数据需解释”“近期异常”或其他更稳的词。