chore(v16): 先调研后改造的任务书

v15 失败根因：只给方向没让执行方看真实实现，它按三个词自由发挥。
v16 要求先产出 docs/v16-research.md（可执行参数+来源），调研不过不许改代码。

TASK-v16-research.md

@@ -0,0 +1,116 @@
+# v16：按 dr6 + dr1 的真实实现方式重构（先调研，再动手）
+
+> 上一轮 v15 我做错了一件事：**只给了方向，没让执行方去看这两张图背后的真实实现**。
+> 结果它按我口述的「Bento、深色卡、留白」三个词自由发挥，做出一个有形无神的东西——
+> 中间三张短卡空得只剩数字，深色卡里塞了五种颜色的阶段条，底部按钮笨重。
+>
+> 这一轮**必须先调研，再动手**。调研不到位不许开始改代码。
+
+---
+
+## 零、你要执行的第一步：调研（占本轮前 30% 时间）
+
+### 已查明的线索（我查到的，你可以直接从这里出发，也可以自己找更好的）
+
+| 参考图 | 出处 | 已确认事实 |
+|---|---|---|
+| `refs/dr6.png` Crextio HR Dashboard | **Nixtio** 设计团队 | 在 `neuform.ai/template/crextio-hr-dashboard` 有 Remix 模板（React Router + Tailwind 体系），页面需渲染才出内容。dribbble 上有同组作品 |
+| `refs/dr1.png` Donezo Project Management | dribbble 设计师作品 | `dribbble.com/shots/27713660-Donezo-Project-Management-Dashboard` 等至少 3 个同名作品页 |
+| `dr7` SugarCRM Customer Journeys | SugarCRM 官方产品 | 有官方文档站 `support.sugarcrm.com`，是**真实在跑的 CRM 产品**，不是设计稿 |
+
+### 网络限制（我实测过，别浪费时间）
+
+```
+可以访问   dribbble / mobbin / refero / linear / attio / neuform / sugarcrm / github
+完全不通   behance / pinterest / awwwards / i.pinimg.com / cdn 图床
+```
+`behance`、`pinterest`、`awwwards` 是**网络层不通**（curl 返回 000），不是你方法错。
+
+### 调研要回答的问题（一条都别跳过）
+
+1. **Crextio 的 Bento 栅格怎么切的**：是 12 列还是不对称？大卡和小卡的**面积比**是多少？
+   小卡里放了什么内容才不显得空？（这是 v15 最失败的地方——我们的短卡只有「9 张 / 82 分 / S1」）
+2. **那块深色卡里到底放几样东西**：Crextio 的深色块信息密度是多少？用了几个色？
+   我们上一版塞了 5 个不同颜色的阶段条 —— 这大概率是错的，去确认**深色卡上到底该不该出现多种颜色**。
+3. **卡片内边距与留白的真实比例**：Crextio/Donezo 的卡内 padding、卡内元素 gap、行高，各是多少？
+   （别猜，能读到 CSS 就读 CSS，读不到就从高清图上量像素）
+4. **字重与层级**：标题、数字、标签分别用什么字号字重？为什么小卡里只有 3 行却不显空？
+5. **Donezo 的数据卡为什么短而不空**：它四个数字卡每个都带「趋势说明」，这一行是什么内容？
+
+### 调研产出要求
+
+**必须落盘到 `docs/v16-research.md`**，每条结论后面注明来源（URL 或「从图 X 量得，数值 Y」）。
+**结论必须是可执行的设计参数**（列数、比例、px 值、色值数量），不是形容词。
+
+写不出可执行参数 = 调研失败，停下来先补调研，不许靠感觉往下走。
+
+---
+
+## 一、拿到真实实现的方式（按优先级试）
+
+1. **读线上真实产品的 CSS**：`linear.app`、`attio.com`、`sugarcrm` 这几个站能通，
+   用 `curl` 抓 HTML/CSS，或在浏览器里 `getComputedStyle` 读出真实数值（列宽、padding、字号、行高、圆角）。
+   **这是最可靠的一手数据**，比看设计稿准。
+2. **neuform 的 Crextio 模板**：页面是 JS 壳，需要浏览器渲染。渲染出来看它的 DOM 结构和 computed style。
+3. **dribbble 作品详情页**：能找到设计师和作品说明，有时附带风格标签与配色说明。
+4. 实在拿不到的，**从高清原图量像素**：dr6 是 2869KB 的原图，足够量出比例关系。
+
+---
+
+## 二、改造要求（调研通过后才开始）
+
+目标不变：**让工作台跟 dr6/dr1 摆在一起像同一个时代的产品。**
+
+### 必须解决的 v15 遗留问题
+
+1. **中间三张短卡太空**（最严重）
+   - 现在：只有「9 张 / 82 分 / S1」三行，四周全白
+   - 要求：按调研结论，决定是**并成两列加宽**、还是**每卡补一行有信息量的说明**、还是**换掉内容本身**
+   - 判定标准：把这三张卡单独截图，跟 Crextio 的小卡并排，密度像不像
+
+2. **深色卡里的阶段条颜色太杂**
+   - 现在：蓝/紫/橙/红 五种颜色堆在深色底上
+   - 要求：按调研结论确认深色卡上允许出现几种颜色，**大概率只留一种状态色**
+   - 另：「我的环节」这一格属于个人视角，不该出现在「现场」卡里 —— 换掉或去掉
+
+3. **A 卡内部不规则空白**
+   - 「待评分」文字与右侧数字「76」拉得太远，视线要横跨半张卡
+   - 要求：这行改成左右两段式，不要中间飘一个大空白
+
+4. **底部卡片按钮笨重**
+   - 灰底大按钮压在轻盈卡片上，重量不匹配
+   - 要求：按调研结论选一种——轻量文字按钮 / 极浅描边按钮 / 或移进详情页
+
+5. **v12 回归：左卡连续空白 56px**
+   - 上一版没解决就放弃了，明确写「未解决」
+   - 本轮要么解决，要么给出**为什么解决不了**的实测依据（比如两种约束在数值上互斥）
+
+### 硬约束（不许突破）
+
+- 交互位置不动：`href`、`data-link`、`data-stage`、`data-allstages` 保持
+- 底色中性灰白，强调色沿用 `--kf-accent: #5B5BD6`，**不许改成 dr6 的奶油黄或 dr1 的森林绿**
+- `dr2`（暗色玻璃版）**完全不参考**
+- 空状态（未选身份 / 本月无成果 / 没人卡住）必须实测
+- 移动端 393px 必须同步，不许横向溢出
+- **不许为了填满版面硬加信息**（v15 加「各阶段已交」勉强算合理，加「我的环节」就是错的——记这个教训）
+
+---
+
+## 三、验收
+
+`scripts/verify-v15.mjs` 已有的项继续跑，再加：
+
+10. 三张短卡内容密度：每卡文字字符数 / 卡面积，跟调研得到的 Crextio 基准比值对照
+11. 深色卡内不同色相数量（要求 ≤2）
+12. 底部按钮实测高度与背景（要求与非按钮元素重量匹配）
+
+跑完把「改动前 / 改动后」数字都写进 `docs/v16-before-after.md`。
+
+---
+
+## 四、纪律
+
+- **先出 `docs/v16-research.md`，我看不到这份文件之前不要改代码。**
+- 每完成一个区块 commit 一次。
+- 做不到就写「没做到 + 为什么」，不许把没做的说成做了。
+- 唯一自检标准：把新截图跟 `refs/dr6.png`、`refs/dr1.png` 并排看，**像不像同一个时代的产品**。