康师傅产品创新看板 · 第二版任务书（承接 v1 框架，重做内容层与视觉）

第一版已跑通取数与筛选骨架。这一版的核心问题：做成了后台台账，没有分析内容。客户原话："太普通了，没有达到标准系统性看板的要求"。

0. 这一版必须解决什么

问题诊断：v1 做出来的 8 个视图（总览/阶段/成员/归纳/成果/项目/原材料/记录）全都是「管理视角」——谁交了、多少条、怎么筛。但客户要的是两样东西一起：

分析报告层：学员/分身产出的分析结果，要能像一份真正的行业报告那样被阅读（有章节、有 KPI、有矩阵、有结论）
管理台账层：现场带 40 人时，讲师要一眼看出谁卡住、谁没交

v1 只有第 2 层，缺第 1 层。这是"太普通"的根本原因。

这一版要做的：把分析报告层建起来，并跟台账层打通。

1. 参考物（必须真的去读，不要凭空想象）

以下三份是客户公司自己产出的真实报告，学员在现场产出的成果会长成这个样子。看板要能承接这种内容：不是一行文字标题，而是能翻开读的完整分析。

https://voc.market/report/20260420-compex-voc-analysis.html
https://voc.market/report/20260421-jiangzhong-houguyin-voc-v2.html（最典型，1.6 万字 / 6 章）
https://voc.market/report/chajuejue-voc-insight-report.html

从这三份报告提炼出的结构特征（已实测确认）

江中猴菇饮那份（最有参考价值）的骨架：

封面（项目名/方法论/数据源/数据管线/报告结构/生成日期）
→ 报告结构总览（6章，每章一张卡片带图标+一句话）
→ Ch1 全景漏斗（TAM → SAM → SOM 三级漏斗，逐级收窄）
→ Ch2 嵌套洞察（分层：病程阶段 → 细分症状 → 产品选择 × 未满足需求）
→ Ch3 痛声地图（按层铺开痛点 → 跨层汇总 5 大共性需求 × 四象限）
→ Ch4 产品适配（自身能力边界 / 成功可迁移因子 vs 失败红线 / 精准插入点 / 场景适配）
→ Ch5 定位推导（品类进化树 → 心智阶梯 → 差异化锚点 → 一句话定位）
→ Ch6 行动蓝图（P0 立即 / P1 三个月验证 / 数据缺口与下一轮）

关键设计特征（这些是要学的）：

每章开头有"这一章在回答什么问题"的一句话（如"帮总经理看清几亿人里我们能切多少"）
公式化标题：5 大症状 × 对应产品 × 未满足需求——用 × 表达交叉分析维度，一眼看懂框架
分节编号：1.1、1.2、1.3 二级结构清晰
数据管线可见：2727 条采集 → 去噪去重 → 730 条精准 VOC（过滤率 73%）——证据来源透明
结论带态度：不是"用户有需求"，而是"苦涩难咽 × 代际断层"、"吃了个寂寞"——敢下判断
有失败案例：米稀 7.5亿成功 vs 饼干失败的教训——不只说好话

COMPEX 那份的骨架：封面 → 目录 → 执行摘要（4 个 KPI 大数字 + 核心发现）→ 品类全景（市场规模/价格带/品牌集中度，表格）→ 品牌六维画像 → 竞品对比矩阵 → VOC 情感分析 → 差评痛点深度洞察（5大痛点·严重度排名）→ 用户画像（3大目标人群·真实评论）→ 行动计划（短期/中期/长期）→ 总结与突破口

2. 这一版要做的东西

2.1 成果详情页 = 一份可读的报告（核心新增）

现在点一条成果，只看到字段。要改成：点开是一份完整的分析报告页。

要求：

侧边章节导航：报告有章节结构，左侧/右侧有目录，点击跳转，滚动时高亮当前章
封面区：项目名、方法论、数据源、数据管线（采集多少条→筛选后多少条）、生成日期
章首导语：每章开头一句话说清"这一章在回答什么问题"
KPI 卡片组：大数字 + 单位 + 一行解读
交叉分析表：如"症状 × 产品 × 未满足需求"这类多维表格，不是简单两列
结论块带态度：允许短句判断，不要全是"XX有需求"这种废话
证据锚点：每个结论旁边能点开看支撑它的原始 VOC 条数/原文片段
报告可以长：允许 1 万字级别的滚动长页，不要为了塞进一屏砍内容

2.2 台账层与分析层打通（关键）

台账列表里点一条成果 → 进报告详情页
报告里每个结论 → 能反查是哪几条过程层成果支撑的（跳回台账并筛选出那几条）
归纳页的每条结论 → 能点进它归纳自哪几份报告

这是"闭环"的实质：不是页面能跳，而是能从结论一路追到原始证据。

2.3 保留 v1 已通过的部分（不要推翻重做）

这些 v1 已经实测通过，保留并保持可用：

真实取数（Parse REST）
6 维筛选（优先级/阶段/品类/证据/层/成员）+ 组合叠加
筛选状态写入 URL hash，刷新保留
hash 路由，直接访问链接能落位
四层区分（raw/process/sediment/record）
五阶段人数分布

3. 视觉（客户明确否决了 v1，且反复强调这一条）

客户原话：「视觉确实不认可」「太普通了」「不是要小 demo，是要求严格的、前端逻辑紧密闭环的大任务」 最新要求（必须遵守）：「视觉的升级还是要按照我之前说过的那种，就是 iOS 拟态玻璃的那种风格，也就是那种思路去升级，可以不单单只用这一种方法去升级」

3.1 视觉主线：iOS 拟态玻璃（Liquid Glass / Glassmorphism）

这是硬性要求，不是可选项。v1 被打回的直接原因就是"实心白卡片 + 靠阴影分开"，完全没有玻璃质感。

必须做到的三件事：

半透明磨砂层：面板/卡片用半透明背景 + backdrop-filter: blur()，让底层的颜色和光透上来。不是实心色块。
- 参考值：background: rgba(255,255,255,.08)（暗底）或 rgba(255,255,255,.55)（浅底），backdrop-filter: blur(20px) saturate(180%)
发丝边（hairline）：1px 极淡边框勾勒玻璃边缘，是玻璃感的命门，v1 完全缺这个
- 参考值：border: 1px solid rgba(255,255,255,.18)（暗底）/ rgba(255,255,255,.7)（浅底）
- 进阶：用 border-image 或伪元素做上亮下暗的渐变边框，模拟玻璃边缘折光
分层光照：光源统一从左上到右下。注意：不要每个卡片自己打光，不要居中打光
- 卡片顶部一道极淡的内高光（inset 0 1px 0 rgba(255,255,255,.25)）
- 阴影方向一致、极浅（0 8px 32px rgba(0,0,0,.08)），不要用大阴影做凸起凹陷（那是新拟物 neumorphism，不是液态玻璃）

允许扩展（客户说"可以不单单只用这一种方法"）：

可以在玻璃基础上叠加细微渐变、噪点纹理、柔光
可以让背景层有可感知的色彩流动（但要极缓、极淡，不能抢数据）
卡片可以有不同透明度层次（底层卡片更透，浮层卡片更实）形成纵深
关键数字/选中项可以用微光或柔光强调

3.2 铁律：玻璃不能糊掉数据

这一条优先级高于任何美感要求。 客户用过的话：透明度不到"糊掉数据的程度"。

所有正文、数字、表格必须在玻璃上清晰可读，必要时加局部实底衬底
模糊只用在装饰层，绝不用在文字后面的必需背景上导致看不清
数据和文字对比度必须够（正文对背景至少 4.5:1）

3.3 配色

客户明确说「配色无所谓」。深色浅色都可以。要求是：清晰、科技感、简约、高级。可以沿背景色体系自行决定，只要满足 3.1 和 3.2。

3.4 其他细节

数字排版要讲究：大小对比强、单位小、数字右对齐、等宽数字（font-variant-numeric: tabular-nums）
表格不用竖线分隔，用行间距和极淡底色交替
图标克制：小、淡、不抢戏
空态/加载态/错误态都要有设计
响应式：1280 / 1024 / 768 三档都不乱

4. 数据结构（这一版仍不锁定业务字段）

品类/竞品/工艺/人群表的具体字段等调研成员回传后再定。本版要求：

现有 4 个 class 可用：KfProject / KfArtifact / KfInsight / KfSession
报告正文怎么存：建议 KfArtifact 增加一个 report 字段（可以是结构化 JSON 或 HTML 片段），或者单独建 KfReport class。由你判断哪种更合适，在 README 说明理由
报告章节结构要能对应五个阶段（S1-S5），不要自己发明阶段

5. 验收标准（我会逐条实测）

v1 必须保持可用（回归）

#	项
1	真实取数，条数与库一致
2	单选筛选生效
3	组合筛选生效（交集正确）
4	筛选状态写入 URL，刷新保留
5	搜索命中
6	四层区分可见
7	五阶段人数分布正确
8	前端无凭据泄露（红线，grep 确认无 masterKey）

这一版新增

#	项	怎么验
9	成果详情页是报告形态（有章节导航、封面、章首导语、KPI、表格）	点一条成果，看是否具备 5 个要素
10	章节导航能跳转且滚动高亮当前章	点目录章节，看是否滚动定位；滚动时看高亮是否跟随
11	报告里结论能反查到支撑成果	点结论旁的证据锚点，能列出具体成果
12	台账→报告→台账能往返	从列表点进报告，再从报告跳回列表，状态不乱
13	长报告可读（1万字级不崩）	渲染长内容测试
14	三层响应式不错乱	1280/1024/768 实测
15	空态/加载态/错误态有设计	清数据、断网测
16	无 console 报错	控制台干净

6. 交付要求

代码在 /opt/data/work/kangshifu/impl/，index.html 入口
README.md 说明：报告数据结构为什么这么设计、四层含义、这一版没做什么、下一版要接什么
逐条说明第 5 节 16 项验收：哪些实际验证过、怎么验的、结果如何；哪些没验证到。 没验到的明确写"未验证"，不要用"已实现"含糊带过。
需求有歧义先说明，不要猜着做
这一步的重点是内容层，不是加更多页面。 宁可有 3 个视图但内容有厚度，不要 10 个视图但都是空壳。

7. 环境

Parse: https://kangshifu.fmode.cn/parse，App ID FKieRbIoGt_main
masterKey 在环境变量 PARSE_MASTER_KEY（只能用于测试脚本，禁止进前端）
库中现有演示数据约 26 条成果 / 10 项目 / 4 归纳，字段有缺失也不要紧，做好容错

TASK-dashboard-v3.md 11 KB Kalıcı Bağlantı Geçmiş Ham