# Figma Provenance Audit

## 结论先说

**不能说“除了图标以外，其它组件和基础设计元素都已经全部回到 Figma 已发布内容，并且不再是占位”。**

当前仓库更准确的状态是：

- **已明显进入 Figma-first / 可继续像素级校对的页面：6 个**
  - `Input`
  - `CheckBox`
  - `Radio`
  - `Switch`
  - `Select`
  - `DateTime`

- **仍主要基于旧手写组件、运行时近似或文档壳补结构的页面：11 个**
  - `Button`
  - `Badge`
  - `InputNumber`
  - `Notification`
  - `Tooltip`
  - `Pagination`
  - `Progress`
  - `Slider`
  - `Rating`
  - `Table`
  - `TopBar`

- **foundation / atomic pages**
  - `Color`、`Icon`：已经直接读取运行时 token / Figma 归档数据
  - `Typography`、`Border`、`Effect`：还包含明显的运行时总结和手工补充，不是完整 Figma 原始发布体系

## 审计口径

本审计把页面和组件来源分成三类：

1. **Figma-first**
   - 页面或组件已经显式围绕 Figma 轴建模
   - 或页面展示依赖 canonical wrapper / candidates / manifest 语义

2. **Runtime Approximation**
   - 页面仍主要挂接旧手写组件
   - 只是借文档页把现有 runtime 能力组织出来
   - 与 Figma 结构有映射关系，但未真正重建

3. **Placeholder / Skeleton**
   - 仍是自动骨架或第一版文档壳
   - 还不能视为完成组件

## 组件页来源审计

### 一类：已进入 Figma-first 的组件页

| 页面 | 组件来源 | 说明 |
|---|---|---|
| `InputPage.vue` | `src/canonical/InputBoxLine.vue` + `InputBoxFilled.vue` | 页面已经按功能段组织，且对 line / filled 做同状态对比。 |
| `CheckboxPage.vue` | `src/canonical/CheckBox.vue` | 围绕 `status × enable` 展示，已进入像素级校对。 |
| `RadioPage.vue` | `src/canonical/Radio.vue` | 围绕 `status × enable` 展示，已进入像素级校对。 |
| `SwitchPage.vue` | `src/canonical/Switch.vue` | 已按 `status / enable / loading` 组织。 |
| `SelectPage.vue` | `src/canonical/SelectBoxLine.vue` + `SelectBoxFilled.vue` | 已按功能段拆成基础单选 / 多选，并合并 line / filled。 |
| `DateTimePage.vue` | `src/canonical/SelectBoxLine.vue` + `SelectBoxFilled.vue` | 已从 Select 独立出来，按时间 / 日期展示。 |

### 二类：仍主要是 runtime 近似的组件页

| 页面 | 组件来源 | 风险 |
|---|---|---|
| `ButtonPage.vue` | `src/components/Button/Button.vue` | 仍是旧 `variant/size/loading` 组织，不是 Figma 原始多轴。 |
| `BadgePage.vue` | `src/components/Badge/Badge.vue` | 页面结构已补，但还是旧 runtime API 视角。 |
| `InputNumberPage.vue` | `src/components/InputNumber/InputNumber.vue` | 页面已写明是 approximation。 |
| `NotificationPage.vue` | `src/components/Notification/Notification.vue` | 仍明确列出 Figma gaps。 |
| `TooltipPage.vue` | `src/components/Tooltip/Tooltip.vue` | 仍主要按运行时 `placement` 组织。 |
| `PaginationPage.vue` | `src/components/Pagination/Pagination.vue` | 结构补齐了，但 `Small / Classic / Simple` 仍带近似性。 |
| `ProgressPage.vue` | `src/components/Progress/Progress.vue` | 还没有进入逐像素校对。 |
| `SliderPage.vue` | `src/components/Slider/Slider.vue` | 现在只是更完整的 runtime 文档页。 |
| `RatingPage.vue` | `src/components/Rating/Rating.vue` | 仍存在 `Theme Gap`。 |
| `TablePage.vue` | `src/components/Table/Table.vue` | 大量结构与行为仍未回到 Figma。 |
| `TopBarPage.vue` | `src/components/TopBar/TopBar.vue` | 仍是旧手写 header 的文档化。 |

## foundation / atomic 页来源审计

| 页面 | 数据来源 | 当前状态 |
|---|---|---|
| `ColorPage.vue` | `variables.css` + `variables.json` | **较可靠**，直接读运行时 token，同时补 Figma 名。 |
| `IconPage.vue` | `src/icons/index.ts` + `design-system-candidates.json` + 已发布 SVG | **较可靠**，运行时图标与 Figma 已发布 icon 已分层。 |
| `TypographyPage.vue` | `atomicAssets.ts` + 运行时组件样式归纳 | **不完整**，还不是完整 Figma text styles。 |
| `BorderPage.vue` | `atomicAssets.ts` + 当前组件 CSS 归纳 | **不完整**，部分线宽和边框仍是实现总结。 |
| `EffectPage.vue` | `atomicAssets.ts` + 运行时 CSS vars | **不完整**，是运行时 effect styles 基线，不等于完整 Figma effect 发布体系。 |

## 实现层风险审计

### 高风险：自动骨架还未真正落地

以下生成物仍属于 skeleton / wrapper 级别，不能视为完成组件：

- `src/canonical/ButtonBridge.vue`
- `src/canonical/generated/Table.vue`
- `src/canonical/generated/Notification.vue`
- `src/canonical/generated/FormItem.vue`
- `src/canonical/generated/Pagination.vue`
- `src/canonical/generated/Slider.vue`
- `src/canonical/generated/TopBar.vue`
- `src/canonical/generated/TabItem.vue`
- `src/canonical/generated/TabList.vue`
- `src/canonical/generated/InputNumber.vue`

### 高风险：底层仍主要是旧手写实现

- `src/components/Input/Input.vue`
- `src/components/Select/Select.vue`
- `src/components/Button/Button.vue`
- `src/components/Pagination/Pagination.vue`
- `src/components/Tooltip/Tooltip.vue`
- `src/components/Table/Table.vue`
- `src/components/TopBar/TopBar.vue`

这些组件很多已经被文档页包装得更完整，但**底层行为和样式并没有完全按 Figma 原始轴重建**。

## 还缺少独立页面的核心组件

design-system 核心组件里，当前 docs 站还缺这些独立页：

- `FormItem`
- `BreadcrumbItem`
- `StepItem`
- `TabList`
- `TabItem`

## 当前最适合的推进顺序

1. 把仍是 runtime 近似的页面继续推进成“可校对版”
   - `Button`
   - `Pagination`
   - `Slider`
   - `TopBar`
   - `Notification`
   - `Tooltip`

2. 再把底层旧手写组件逐步替换成真正消费 canonical 语义的实现

3. 最后做全量像素级复核

## 审计结论

所以，如果问题是：

> “除了图标以外，其他组件和基础设计元素已经是全部的 figma 上已发布的内容了吗？不再是简单的占位了吗？”

当前答案是：

**还没有。**

但现在已经有了一份明确的来源审计，可以把：

- 哪些是真正的 Figma-first
- 哪些还是 runtime 近似
- 哪些仍是 skeleton

清楚地区分出来，后续不会再把近似页误当成完成页。