|
|
@@ -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` 并排看，**像不像同一个时代的产品**。
|
FmodeCode