康师傅产品创新看板 · 第一版框架开发任务书 (v2)

本版承接 v1。开发标准从"能跑"提到"可交付给客户看的正式系统"。

0. 这一版做到什么程度

只做框架，不做业务字段设计。 品类库/竞品库/工艺库/人群库的具体字段等调研成员回传后再定稿。本版用最小占位字段，不要发明业务字段。

但前端的完成度要求是正式交付级，不是演示 demo。

1. 背景（必须先读懂再动手）

康师傅研发中心 2026-11-13/14 做一场 1.5 天线下 AI 赋能实战营，30-40 人。学员用同一个数字分身（每人独立会话），走五个阶段：品类市场分析 → 用户需求与痛点 → 机会点识别 → 机会验证评估 → 场景与卖点设计。

这个看板的作用：

线下现场：讲师一边带学员做，一边在后台看谁到哪一步、谁卡住了
成果归集：学员和分身交互产生的机会卡、痛点、验证评分等，通过上传 skill 进库，看板自动呈现
团队认知：40 个人各自交上来的东西，看板要能归纳出"哪些缺口被反复提到""哪些有真凭实据"
组织资产：够格的见解回灌知识库，下一个人用分身时已经知道前面的人发现了什么

关键认知：这不是"数据展示页"，是"成果汇聚与沉淀系统"。

2. 技术约束（硬性）

2.1 云资源（固定，不可更换）

Parse Base : https://kangshifu.fmode.cn/parse
App ID     : FKieRbIoGt_main
微服务      : https://kangshifu.fmode.cn/data
云函数      : https://kangshifu.fmode.cn/api/functions

masterKey 已放在环境变量 PARSE_MASTER_KEY
masterKey 只能出现在你本地测试脚本中，绝对禁止写进前端任何文件、注释、配置文件或 README

2.2 前端

纯静态：原生 HTML/CSS/JS。不要 React/Vue/Next 等框架，不要构建步骤，浏览器直接打开能跑
取数走 Parse REST（X-Parse-Application-Id 头即可读，读权限已开放）
单页应用，用 hash 路由（#/stage/3、#/project/xxx）保证刷新和直接访问链接都能落到正确视图

2.3 四层数据分层

同一个数据库，靠字段区分，不要拆成四个库：

层	内容	谁写入	性质
raw (原材料层)	品类/竞品/工艺/人群/机会，调研整理	调研 Agent	事实，必须带出处
process (过程层)	学员产生的机会卡、痛点、验证、报告	学员+分身，经上传 skill	观点，质量参差
sediment (沉淀层)	归纳后够格回灌的见解	归纳+证据筛选后	已校准结论
record (记录层)	不合格、纯推测、重复的	自动落入	只留档不进知识

每条记录必须有 layer 字段，前端所有地方都要能看出这条属于哪层。分身查库时能区分"这是事实"还是"这是某人说的"。

3. 功能要求

3.1 收集（自动归集）

学员成果经上传 skill 进库后，看板刷新即出现，无需人工整理
每条成果必须带出身：谁产生的（ownerName/sessionId）、什么时候（createdAt）、哪个阶段（stage）、有没有原文证据（evidence 字段，可为空但必须可见为空）
没有出身的记录不许进沉淀层

3.2 展示

总览视图：进行中项目数、成果总数、归纳条数、参与成员数
按人、按项目、按阶段三种切法都能看
每个阶段有多少人卡住/完成，一眼能看出
线下现场用：能快速看出"谁还没交东西"

3.3 归纳总结（重点，不是统计报表）

不要做成"一共40张卡，A类12张，B类28张"这种统计。要能给出判断：

示例："拌面酱包口味单一"被 12 人中的 7 人独立提到，但只有 2 人给出真实评论原文证据，其余 5 条为模型推测。

每条归纳必须能展示三件事：

多少人独立提到（交叉验证强度）
几条有原文证据（证据强度）
点开能看到是哪几条具体支撑（可追溯）

归纳区要能按证据强度、交叉人数排序筛选。

3.4 筛选

按优先级（S/A/B）、按赛道/品类、按阶段、按证据强度、按成员
筛选结果实时反映数量
筛选条件要能叠加组合，不是单选后其他失效
刷新页面后筛选状态保留（写进 URL hash）

3.5 回灌闭环（这一版做框架，不做自动判定逻辑）

沉淀层条目要能标记"来源于哪几条过程层记录"
前端能看到"这条结论是由 3、7、9 号卡归纳出来的"
留一个明确的扩展位：后续接"证据够不够格回灌"的判定接口

4. 视觉要求（正式交付级）

4.1 风格：iOS 液态玻璃 / 克制优雅

参照的观感是：浅色底、半透明磨砂层、细微高光、一条极轻的发丝边。不是暗色仪表盘，不是霓虹科技风，不是卡片堆砌的 Bootstrap 味儿。

具体要求：

低对比发丝边：1px 半透明白边（如 rgba(255,255,255,.7)）+ 极浅阴影，做"玻璃片浮在底上"的层次感
分层光照：光源统一从左上到右下，不要每个卡片自己打光，不要居中打光
不要用大阴影做凸起凹陷（那是新拟物，不是液态玻璃）
透明度要克制：磨砂可以，但文字和数据永远清晰可读，不许为了通透牺牲数据
单一强调色只用来指路（如当前选中项、关键数字），不做装饰性配色
留白充分，信息密度严格，不塞满

4.2 数据优先

数字要能一眼读到，字重和字号分层明确
表格/列表对齐严格，数字右对齐
不用图标堆装饰；有图标的地方图标要小、要淡
状态（进行中/已完成/待补证据）用极轻的色标区分，不要大红大绿

4.3 必须做到的细节

响应式：1280 桌面可读，1024 不乱，手机能看（线下讲师可能用平板）
空态有设计：没数据时不是一句"暂无数据"，要说明"这里会出现什么"
加载态不跳动（骨架屏或占位，不要内容突然顶开）
中文字体栈要正确，不要出现回退到衬线体

5. 验收标准（我会逐条实测，不通过就打回）

#	验收项	怎么验
1	页面能打开并真实取到 Parse 数据	浏览器打开，DevTools Network 有真实请求，数据条数与库一致
2	筛选单选生效	点 S 级，卡片数变；点 B 级，数量对得上
3	筛选组合生效	选"S 级 + 拌面"，结果 = 两个条件的交集，数量正确
4	筛选状态写入 URL，刷新保留	复制 URL 新开标签，筛选条件还在
5	搜索按成员名/项目名能命中	输入名字，结果准确
6	归纳区展示交叉人数+证据数，可追溯	点开一条归纳，能看到支撑它的具体记录
7	每条成果能看四层归属（layer）	列表里能区分 raw/process/sediment/record
8	前端无任何凭据泄露（红线）	grep 整个目录，不得出现 masterKey、`cc84` 开头串
9	空态/加载态有处理	清空数据看空态；节流网络看骨架
10	1024 / 768 宽度不错乱	浏览器缩放实测
11	无 console 报错	控制台干净
12	代码可读、结构清晰	有注释，函数职责单一，README 说明怎么改数据源

验收第 8 条是红线，测到一处立刻打回。

6. 交付要求

代码放在 /opt/data/work/kangshifu/impl/，index.html 为入口
README.md 说明：怎么改数据源、四层含义、这一版没做的部分、下一版要接什么
交付时必须逐条说明第 5 节的 12 项验收：你实际验证过哪些、怎么验的、结果如何；哪些没验证到。 不要用"已实现"覆盖没验证的部分。 没验到的明确写"未验证"。
如果发现需求有歧义或不自洽，先说明再动手，不要自己猜着做。

7. 现成资源

库中已有 4 个 class（可以先探查）：

KfProject — 项目
KfArtifact — 成果
KfInsight — 归纳
KfSession — 会话

里面约有 10 条演示数据。这一版可以用它们跑通链路，但字段结构按你的判断调整，不要被现有字段绑死。演示数据是否清理由我最终决定，你先留着用于测试。

TASK-dashboard-v2.md 8.3 KB Trvalý odkaz Historie Surový