作品 02 · 案例研究Work 02 · Case study
Gate 是阶段评审关口。PM Gate 把项目状态、交付物和评审放在同一处。A gate is a stage review. PM Gate brings project status, files and reviews together.
≈ 1 分钟速览 · ≈ 7 分钟上手 · 数据全部虚构,刷新即重置≈ 1 min skim · ≈ 7 min hands-on · all data fictional, resets on refresh
这颗点不是谁涂上去的。它是算出来的。Nobody painted this dot. It was computed.
1 分钟速览ONE-MINUTE OVERVIEW
让项目状态有据可查Make project status explainable
问题:计划、评审结论和文件分散,颜色有了,原因却要到处问。我的职责:独立完成产品设计、业务规则、开发与维护。
The problem: scattered plans, verdicts and files made a colour easier to find than its cause. My role: product design, business rules, development and maintenance, end to end.
已投入使用,项目经理和部门可在同一处核对交付状态。
In use: project managers and departments can check delivery status in one place.
- ① 颜色现算1 · Derive the colour健康变了,当前 Gate 和看板一起变。Health, the current gate and the dashboard stay in sync.
- ② 改动留痕2 · Keep the reason改评级先写原因,再滑动确认。Record a reason, then slide to confirm a rating change.
- ③ 一个交付口径3 · Share one definition两种身份看同一份数据,权限各有边界。Two roles share data with distinct editing permissions.
- ④ 日期有锚点4 · Anchor the dates评审日期一改,依赖它的计划随之更新。Move a review date and its dependent plan dates follow.
颜色在说话,但没人知道它为什么这么说The colours talk. Nobody can say why.
做 Gate 评审,材料天然是分散的:日期在计划表里,结论在会议纪要里,文件在各个部门手里。一颗黄点能告诉你「有问题」,却答不出是谁、什么时候、从什么变成什么、为什么。想知道一个项目卡在哪,往往要问好几个人。
Stage-gate work scatters by nature: dates live in the schedule, verdicts in the minutes, files with each department. A yellow dot can tell you something is wrong, but not who changed it, when, from what, or why. Finding out where a project is stuck usually means asking several people.
汇报页上的黄:只有一个颜色
PM Gate 的黄:点开就是来龙去脉
Yellow on a slide: just a colour
Yellow in PM Gate: click it for the whole story
整个产品,装在一扇窗里The whole product, in one window
先从仪表盘查看项目,再进入评审、交付物或开发计划;也可以切换到部门负责人的视角。六个页面,两种身份,共用一份数据。在这里改动,后面的演示和回执都会跟着变。
Start with a project on the dashboard, then explore its reviews, files or plan. Switch to a department lead’s view, too. Six pages and two roles share the same data; changes here also update the demos below and your receipt.
项目仪表盘
前四块按每个项目「当前 Gate 的显示评级」分档:通过算健康,有条件算关注,未通过算阻塞,还没评审算待评审;四块相加 = 当前筛选下的 6 个项目。「逾期项目」是横切统计:有逾期交付格的项目数,会和前四块重叠,不参与相加。卡片墙列出有完整档案的虚构项目;业务数据看板另含只有汇总字段的演示行。
Aurora EV (1)
Corvina (1)
Halcyon Motors (2)
Nordfjell (1)
Solis Vanta (1)
Programs
The first four tiles sort each program by the rating its current gate shows: Passed counts as healthy, Conditional as watch, Not passed as blocked, not reviewed yet as to review. Together they add up to the 6 programs in the current filter. Overdue cuts across them: programs with at least one overdue file cell, so it overlaps the other four and is not added in. The wall lists the fictional programs with full records; the business data board also has summary-only demo rows.
Aurora EV (1)
Corvina (1)
Halcyon Motors (2)
Nordfjell (1)
Solis Vanta (1)
难点不是画图,是口径The hard part wasn’t the charts. It was the definitions.
我以为难点是把图画出来。做下去才发现,真正难的是让每个人对「逾期」「红」「交齐」只有一个定义。
I thought the hard part would be drawing the charts. It turned out to be getting everyone to share one definition of “overdue”, “red” and “complete”.
这三句话,在代码里各只写在一处。Each of these lives in exactly one place in the code.
决策 ①Decision 1
当前 Gate 的颜色,不另存。Derive the current gate’s colour.
Gate 颜色不另存,每次显示时现算The gate colour isn’t stored. It’s computed every time it’s shown.
如果 Gate 的颜色和健康各存一份,就得有人记着同步它们。迟早会出现「质量已经红了,Gate 还挂着绿灯」。所以当前 Gate 的颜色不落库:七项健康里有红就红,有黄就黄,都没有才看评审结论。连手改的结论也要让位,因为它反映的是评审那天,健康反映的是今天。这条规则只写在一处,卡片、彩条和看板都调用它。
Store the gate colour and the health checks separately and someone has to keep them in sync — sooner or later quality is red while the gate still shows green. So the current gate’s colour is never saved: any red health check makes it red, any yellow makes it yellow, and only otherwise does the review verdict show. Even a manual verdict gives way, because it describes the review day and health describes today. The rule lives in one place; the cards, the gate bar and the dashboard all call it.
跨职能健康点一下切换:绿 → 黄 → 红 → 不适用
Gate 评级
由跨职能健康推得(进度、供应链)
仪表盘卡片
Cross-functional healthClick to cycle: G → Y → R → N/A
Gate ratings
Derived from cross-functional health (Timing, Supply chain)
Dashboard card
最差 = 七项健康里最差的(红 > 黄 > 其它)
如果 这是当前 Gate 且 最差 是红或黄:
显示 最差,并注明由哪几项推得
否则:
显示 评审结论(包括手改)worst = the worst of the seven health checks (red > yellow > anything else)
if this is the current gate and worst is red or yellow:
show worst, and name the checks it came from
else:
show the review verdict (manual verdicts included)决策 ②Decision 2
改颜色,先说为什么。Change a colour, say why.
改评级,先留原因,再滑动确认Record a reason, then slide to confirm a rating change
一个颜色会影响所有人对项目的判断。所以每次改动都要写一句为什么(不超过 100 字),并永久留在变更链里:第几次、从什么到什么、谁、精确到秒。第一次设定算补录,不要求原因。确认用滑动,不用「再点一次」:二次确认的按钮恰好出现在指针底下,手快的人连点两下就穿过去了。
A colour shapes how everyone reads a project, so every change needs a one-line reason (100 characters at most) and stays in the change chain for good: which change it was, from what to what, who made it, to the second. Setting a colour for the first time counts as data entry and needs no reason. Confirming is a slide, not a second click: a confirm button appears right under the pointer, and a quick double-click goes straight through it.
由跨职能健康推得(进度、供应链)
颜色变更总览悬浮或聚焦箭头看原因
对照小实验
快速双击左边的按钮试试
Derived from cross-functional health (Timing, Supply chain)
Colour change overviewHover or focus an arrow for the reason
Side-by-side test
Try double-clicking the left button quickly
可以确认 = 选的颜色 ≠ 当前评审结论
且(原因去掉空白后不为空 或 这是首次设定)
首次设定 = 这道 Gate 在变更链里还没有记录,且当前是未评审
原因 ≤ 100 字(按字素计,一个 emoji 算 1 个)
确认 = 滑块拖到 100%;中途松手弹回,双击不会触发
写入 = 这道 Gate 的手改结论 + 变更链头部一条(第几次、从什么到什么、谁、精确到秒)can confirm = the picked colour ≠ the current verdict
and (the trimmed reason is not empty or this is a first setting)
first setting = the gate has no entry in the chain yet and is not reviewed
reason ≤ 100 characters (graphemes: one emoji counts as 1)
confirm = slide to 100%; letting go early springs back, a double-click does nothing
write = the gate’s manual verdict + one entry at the head of the chain (which change, from, to, who, to the second)决策 ③Decision 3
「逾期」只有一种算法。“Overdue” has one formula.
两把椅子,看同一个格子Two seats, one cell
两把椅子是两种角色:项目经理和部门负责人,看的是同一份底层状态。文件矩阵的每一格只回答一个问题:这个部门在这道 Gate 该交的,交了没有。有底色说明有事要管,没底色说明还轮不到你。先数关键件;一个关键件都没有的格子才按全部件数,否则 0/0 会凭空变绿。项目经理和部门看到的是同一份数据:部门交了一份,项目经理那格立刻变;部门说「期限赶不上」,系统先停止催他,等项目经理看过再说。
The two seats are two roles, a program manager and a department lead, looking at one underlying state. Each cell of the file matrix answers one question: has this department delivered what this gate needs? A tint means something needs attention; no tint means it isn’t your turn yet. Critical files are counted first; only a cell with no critical files falls back to counting all of them — otherwise 0/0 would turn green out of nowhere. The PM and the department read the same data: when the department uploads, the PM’s cell changes at once; when they say they can’t make the date, reminders pause until the PM has read it.
-
供应商 PPAP 资料◆ 关键期限 10.04已逾期 5 天⏸ 已反馈,暂停催办,等项目经理处理
反馈原文
期限赶不上 · 供应商 PPAP 资料下周才能齐,申请顺延一周。
-
供应商产能评估◆ 关键期限 10.11还剩 2 天 5 小时
只列派给你的条目。你交一份,项目经理那一格立刻变。
- 长周期物料清单.pdfG2 投资 · v1 · 66 天前
- 模具订单.pdfG2 投资 · v1 · 66 天前
- 供应商定点清单.pdfG1 立项 · v1 · 141 天前
- 关键物料询价.pdfG0 报价 · v1 · 216 天前
-
Supplier PPAP documents◆ criticalDue Oct 45 days overdue⏸ Feedback sent — reminders paused until the PM reads it
What you wrote
Can't make the date · Supplier PPAP documents won't be complete until next week; asking for a one-week extension.
-
Supplier capacity assessment◆ criticalDue Oct 112 d 5 h left
Only what is assigned to you. Deliver one and the PM’s cell changes at once.
- Long-lead parts list.pdfG2 Investment · v1 · 66 d ago
- Tooling purchase order.pdfG2 Investment · v1 · 66 d ago
- Supplier nomination list.pdfG1 Approval · v1 · 141 d ago
- Key material RFQ.pdfG0 Quote · v1 · 216 d ago
格子状态
不需提交的格 → 不需提交
池 = 按关键件 且 有关键件 ? 关键件 : 全部件
N = 池的条数,M = 其中交了的条数
N = 0 → 待定条目(0/0 不算交齐)
M ≥ N → 交齐
M > 0 → 2M ≥ N ? 过半 : 不到一半
这道 Gate 已通过 → 已通过 · 不再催
最早的期限 < 今天 → 逾期
最早的期限 = 今天 → 今日到期(当天不算逾期)
其余 → 未到
催办(蚂蚁线)
项目暂停 / 完成 / 归档,或 Gate 已通过 → 不催
每条「有负责人、没交、有期限」的条目:
有没处理的「期限赶不上 / 这项不适用」反馈 → 跳过(暂停催办)
期限 − 今天 ≤ 1 → 催;期限 < 今天 → 逾期(红),否则即将到期(蓝)
项目经理点「已阅」= 反馈处理完,恢复催办Cell state
cell not required → not required
pool = critical basis and any critical file ? critical files : all files
N = files in the pool, M = delivered among them
N = 0 → to define (0/0 is not complete)
M ≥ N → complete
M > 0 → 2M ≥ N ? over half : under half
gate already passed → passed · no reminders
earliest due < today → overdue
earliest due = today → due today (the due day is not overdue)
otherwise → not yet
Reminders (marching ants)
program on hold / closed / archived, or gate passed → none
for each file with an owner, not delivered, with a due date:
unread “can’t make the date / not applicable” feedback → skip (paused)
due − today ≤ 1 → remind; due < today → overdue (red), else due soon (blue)
the PM marks the feedback as read → reminders resume决策 ④Decision 4
日期是关系,不是数字。A date is a relationship, not a number.
计划里的每个日期,都锚在数据源上Every date in the plan hangs off a source
开发计划里写的不是「3 月 12 日」,而是「OTS 前 120 天」。客户一改 OTS,整张计划自己重排,没有人需要再手工挪一遍。拖动一条,改的也只是偏移天数,所以拖完它仍然跟着数据源走。拖到相邻行端点 3 天以内会自动接上;拖手柄至少留 1 天,不会出现倒置的条。数据源缺了,依赖它的行就不画,而是列出来,不去猜一个日期。
The plan doesn’t say “12 March”; it says “120 days before OTS”. When the customer moves OTS, the whole plan reflows and nobody re-drags a thing. Dragging a bar only changes its offset, so it keeps following its source afterwards. Within three days of a neighbour’s end it snaps on, and a bar always keeps at least one day, so it can never turn inside out. If a source date is missing, the rows that depend on it aren’t drawn — they’re listed instead of guessed.
OTS = 工装样件;PPAP = 生产件批准;SOP = 量产开始。排期是演示用的示例模板。
OTS = off-tool sample; PPAP = production part approval; SOP = start of production. The schedule is a sample template for this demo.
端点 = 锚点日期 + 偏移天数 锚点:OTS / PPAP / SOP
锚点没有日期 → 这一行不画,列进「缺数据源」
拖整条 → 两端偏移一起 +d;拖手柄 → 只改这一端
结束 − 开始 ≥ 1 天(拖手柄时夹住)
被拖的端点离相邻行端点 ≤ 3 天 → 接上去;接上会破坏「≥ 1 天」就不接
OTS ∈ [−30, PPAP − 90] PPAP ∈ [OTS + 90, SOP − 60] SOP ∈ [PPAP + 60, PPAP + 460]end = anchor date + offset in days anchors: OTS / PPAP / SOP
anchor has no date → the row is not drawn; it is listed under "Missing source"
drag the bar → both offsets + d; drag a handle → that end only
end − start ≥ 1 day (handles are clamped)
dragged end within 3 days of a neighbour's end → snap to it, unless that breaks "≥ 1 day"
OTS ∈ [−30, PPAP − 90] PPAP ∈ [OTS + 90, SOP − 60] SOP ∈ [PPAP + 60, PPAP + 460]汇流Convergence
一份数据,很多视图。One state, many views.
你在前面做的改动,都已经在这里了Everything you changed above is already here
看板没有自己的数据。环、柱、KPI 都从同一份项目数据现算,就是你在前面几块图版里改过的那一份。数字直接写在图上,不靠悬浮,因为看板常常是投在会议室的墙上看的;选中靠描边,不靠换色,因为颜色已经有业务含义了。
The dashboard has no data of its own. The ring, the bars and the KPIs are all computed from the same project data — the very data you changed in the demos above. Numbers sit on the chart rather than in tooltips, because dashboards get read off a meeting-room wall; selection is an outline rather than a colour, because colour already means something.
数据表 · 23 行
| 项目 | 客户 | PM | 级别 | 状态 | 当前 Gate | 当前评级 | SOP 年 |
|---|---|---|---|---|---|---|---|
| HV Junction Box P2 | Solis Vanta | Sophie Zhang | L3 | 进行中 | G0 报价 | 有条件 | 2028 |
| Fan Shroud | Corvina | Kevin Park | L2 | 进行中 | G0 报价 | 未评审 | 2029 |
| Coolant Manifold | Tessaro | Sophie Zhang | L3 | 进行中 | G0 报价 | 未评审 | 未定 |
| ZR305 | Nordfjell | Sophie Zhang | L3 | 进行中 | G1 立项 | 未通过 | 2028 |
| Pump Controller | Halcyon Motors | Daniel Wu | L2 | 进行中 | G1 立项 | 通过 | 2028 |
| DC Link Busbar | Solis Vanta | Sophie Zhang | L2 | 进行中 | G1 立项 | 有条件 | 2028 |
| Gear Damper | Kestrel Mobility | Kevin Park | L2 | 进行中 | G1 立项 | 未评审 | 2029 |
| Wren Hybrid | Corvina | Kevin Park | L2 | 进行中 | G2 投资 | 有条件 | 2027 |
| Gear Set Pack | Brightwater | Daniel Wu | L3 | 暂停 | G2 投资 | 有条件 | 2028 |
| Oil Cooler Kit | Aurora EV | Sophie Zhang | L3 | 进行中 | G2 投资 | 有条件 | 2028 |
| Pump Housing L | Helvor | Kevin Park | L3 | 暂停 | G2 投资 | 有条件 | 未定 |
| Thermal Plate | Lumen Drive | Grace Lin | L1 | 进行中 | G2 投资 | 通过 | 2028 |
| Inverter Lid | Tessaro | Grace Lin | L2 | 进行中 | G2 投资 | 未通过 | 2028 |
| AX10-B2 | Halcyon Motors | Daniel Wu | L2 | 进行中 | G3 工装样件 | 有条件 | 2028 |
| Inverter Busbar | Halcyon Motors | Grace Lin | L2 | 进行中 | G3 工装样件 | 有条件 | 2027 |
| E-Drive Cover | Nordfjell | Grace Lin | L1 | 进行中 | G3 工装样件 | 未通过 | 2027 |
| Rotor Shaft | Brightwater | Daniel Wu | L2 | 进行中 | G3 工装样件 | 通过 | 2027 |
| M-Line Gen2 | Aurora EV | Daniel Wu | L2 | 进行中 | G4 量产准备 | 有条件 | 2026 |
| Valve Body S | Aurora EV | Kevin Park | L3 | 进行中 | G4 量产准备 | 通过 | 2027 |
| Filter Housing Mini | Kestrel Mobility | Daniel Wu | L3 | 进行中 | G4 量产准备 | 有条件 | 2026 |
| Motor Housing S3 | Helvor | Kevin Park | L3 | 已完成 | 全部通过 | 通过 | 2026 |
| Sensor Bracket | Corvina | Daniel Wu | L3 | 已完成 | 全部通过 | 通过 | 2025 |
| Seal Carrier | Lumen Drive | Sophie Zhang | L3 | 已完成 | 全部通过 | 通过 | 2025 |
Data table · 23 rows
| Program | Customer | PM | Level | Status | Current gate | Current rating | SOP year |
|---|---|---|---|---|---|---|---|
| HV Junction Box P2 | Solis Vanta | Sophie Zhang | L3 | Active | G0 Quote | Conditional | 2028 |
| Fan Shroud | Corvina | Kevin Park | L2 | Active | G0 Quote | Not reviewed | 2029 |
| Coolant Manifold | Tessaro | Sophie Zhang | L3 | Active | G0 Quote | Not reviewed | TBD |
| ZR305 | Nordfjell | Sophie Zhang | L3 | Active | G1 Approval | Not passed | 2028 |
| Pump Controller | Halcyon Motors | Daniel Wu | L2 | Active | G1 Approval | Passed | 2028 |
| DC Link Busbar | Solis Vanta | Sophie Zhang | L2 | Active | G1 Approval | Conditional | 2028 |
| Gear Damper | Kestrel Mobility | Kevin Park | L2 | Active | G1 Approval | Not reviewed | 2029 |
| Wren Hybrid | Corvina | Kevin Park | L2 | Active | G2 Investment | Conditional | 2027 |
| Gear Set Pack | Brightwater | Daniel Wu | L3 | On hold | G2 Investment | Conditional | 2028 |
| Oil Cooler Kit | Aurora EV | Sophie Zhang | L3 | Active | G2 Investment | Conditional | 2028 |
| Pump Housing L | Helvor | Kevin Park | L3 | On hold | G2 Investment | Conditional | TBD |
| Thermal Plate | Lumen Drive | Grace Lin | L1 | Active | G2 Investment | Passed | 2028 |
| Inverter Lid | Tessaro | Grace Lin | L2 | Active | G2 Investment | Not passed | 2028 |
| AX10-B2 | Halcyon Motors | Daniel Wu | L2 | Active | G3 Off-tool | Conditional | 2028 |
| Inverter Busbar | Halcyon Motors | Grace Lin | L2 | Active | G3 Off-tool | Conditional | 2027 |
| E-Drive Cover | Nordfjell | Grace Lin | L1 | Active | G3 Off-tool | Not passed | 2027 |
| Rotor Shaft | Brightwater | Daniel Wu | L2 | Active | G3 Off-tool | Passed | 2027 |
| M-Line Gen2 | Aurora EV | Daniel Wu | L2 | Active | G4 Launch | Conditional | 2026 |
| Valve Body S | Aurora EV | Kevin Park | L3 | Active | G4 Launch | Passed | 2027 |
| Filter Housing Mini | Kestrel Mobility | Daniel Wu | L3 | Active | G4 Launch | Conditional | 2026 |
| Motor Housing S3 | Helvor | Kevin Park | L3 | Closed | All passed | Passed | 2026 |
| Sensor Bracket | Corvina | Daniel Wu | L3 | Closed | All passed | Passed | 2025 |
| Seal Carrier | Lumen Drive | Sophie Zhang | L3 | Closed | All passed | Passed | 2025 |
行 = 未归档的完整项目(现算)+ 轻量行(自带结论)
当前评级 = 完整项目走决策 ① 的勾连规则,和别处同一份
逾期交付格 = 决策 ③ 的矩阵规则,按真实的今天算
筛选 = 状态 并且 预设
外圈 = 按状态计数
内圈 = 只数「进行中」,按当前评级细分;其余位置画占位
六柱 = 停在这道 Gate 的项目,按当前评级堆叠
横幅 = 对比 聚合(演示种子)与 聚合(现在)rows = unarchived full programs (derived live) + light rows (carry their own verdict)
rating = full programs use the Decision 1 link rule, the same one used everywhere
overdue file cells = the Decision 3 matrix rule, on the real today
filter = status AND preset
outer = count by status
inner = active only, split by current rating; placeholders elsewhere
bars = programs sitting at each gate, stacked by current rating
banner = compare aggregate(demo seed) with aggregate(now)投入使用,也经得起动手核对In use, and open to hands-on checks
真实项目 · 使用状态REAL PROJECT · USE
已投入使用,项目经理和部门可在同一处核对交付状态。
The product is in use. Project managers and departments can check delivery status in one place.
本页演示 · 可核对的行为THIS DEMO · CHECKABLE BEHAVIOUR
- 改一项健康,核对 Gate、卡片与统计是否同步。Change a health check; compare the gate, card and counts.
- 改评级并写原因,在回执里核对变更记录。Change a rating with a reason; check its entry in the receipt.
- 切换身份,核对同一份交付状态与编辑权限。Switch roles; compare delivery status and editing permissions.
演示数据全部虚构。这些检查验证本页的交互与规则;真实业务的使用人数和效率提升尚未公开量化。All demo data is fictional. These checks validate this page’s interactions and rules; real-world adoption and efficiency gains have not been publicly quantified.
你的改动Your changes
演示数据预置Preset in the demo data
你You 0
你还没有改过任何东西。上面每块图版都能动手。You haven’t changed anything yet. Every demo above is hands-on.
这些改动只在你的浏览器里,刷新就没了。These changes live only in your browser and vanish on refresh.
COLOPHON
本页如何做成How this page was made
- 展示页以 HTML 重画产品界面:原生 ES 模块,零依赖,零第三方请求。The showcase redraws the product interface in HTML: native ES modules, no dependencies, no third-party requests.
- 每块图版的规则都是纯函数,有单测钉住;页面在构建时用同一组函数预渲染,没有 JavaScript 也能看到真界面。Every demo’s rules are pure functions pinned by unit tests; the page is pre-rendered at build time with the same functions, so the real interface shows even without JavaScript.
- 人名、客户、项目、日期全部虚构;所有操作只在你的浏览器里,刷新即重置。演示版规则有简化。Names, customers, projects and dates are all fictional; everything happens in your browser and resets on refresh. Rules are simplified for the demo.
- PM Gate 本身:Next.js 14 · React 18 · TypeScript · Prisma · Tailwind · SSE · 手写 SVG 图表。PM Gate itself: Next.js 14 · React 18 · TypeScript · Prisma · Tailwind · SSE · hand-written SVG charts.
- 来历:源自作者在一家汽车零部件制造企业实习期间的 PM 流程数字化实践。Origin: built from the author’s work on digitising PM processes during an internship at an automotive parts manufacturer.