# ONE-OS 设计规范包（开发交付）

本目录是从项目原型与样式代码中抽取的**可分享设计规范**，供前端开发、AI 代码生成和 UI 审查统一引用。

## 文件说明

| 文件 | 用途 |
|------|------|
| [`DESIGN.md`](./DESIGN.md) | **主规范**：色彩、字体、布局、组件类名、强制规则、检查清单 |
| [`tokens.json`](./tokens.json) | **机器可读 Token**：CSS 变量快照，便于脚本 / 设计工具 / AI 引用 |
| [`ai-prompt-template.md`](./ai-prompt-template.md) | **AI 生成模板**：复制给 Cursor / Copilot 等，约束页面生成 |

## 给开发同学

1. 新建中后台列表页前，先读 `DESIGN.md` 第 3–5 节（页面结构、组件、禁止项）。
2. 样式以 `src/prototypes/vehicle-management/style.css` 为事实源；规范文档与其保持一致。
3. 列表页**必须**复用：
   - `TablePagination`（`src/common/TablePagination.tsx`）
   - `DateRangeFilterField`（筛选日期区间）
   - `OperationActions`（表格操作列）
4. 台账类页面另读 `src/prototypes/ledger-shared/DESIGN.md`。

## 给 AI / 代码生成

将以下内容一并放入 System Prompt 或 `@` 引用：

```text
@src/resources/design-system/DESIGN.md
@src/resources/design-system/tokens.json
```

或使用 `ai-prompt-template.md` 中的完整提示词。

## 参考实现（按优先级）

1. 车辆资产 — `src/prototypes/vehicle-management/index.tsx`
2. 租赁合同 — `src/prototypes/lease-contract-management/LeaseContractManagement.jsx`
3. 租赁业务台账 — `src/prototypes/lease-business-ledger/index.tsx`

## 维护说明

- 视觉 token 变更时：先改 `vehicle-management/style.css`，再同步 `tokens.json` 与本目录 `DESIGN.md`。
- 列表页交互规则变更时：同步 `src/prototypes/vm-shared/DESIGN.md` 与本目录 `DESIGN.md`。

## 修订记录

| 版本 | 日期 | 说明 |
|------|------|------|
| v1.1 | 2026-07-13 | 抽取为独立交付包；KPI 网格更新为 6/7 列；补充 OperationActions |
| v1.0 | 2026-07-09 | 首版汇总（原 `rules/global-design-spec.md`） |