# 🏛 企业级后台 Design System（专业版）

本 Design System 是后台 UI 的统一规范，包含：

- 视觉层（颜色、字体、间距）
- 组件层（按钮、输入框、表格、卡片、弹窗等）
- 页面层（列表页、表单页、详情页、管理页）
- 交互层（hover、active、focus、loading、disabled）
- 图标体系（Icon System）
- 状态体系（Empty / Loading / Error / NoPermission）
- 未来 Vue/React 迁移规范

本文件为后台 UI 的唯一权威规范。

---

# ⭐ 第 7 步：图标体系（Icon System · 企业级最终版）

图标体系是后台 UI 的“视觉语言层”，用于统一图标的：

- 来源（图标库）
- 大小
- 颜色
- 命名
- 使用方式
- 在按钮/表格/导航中的布局规范

图标体系必须保持一致性、可扩展性、可维护性。

---

## 1. 图标库选择（Icon Library）

后台使用 **Lucide Icons** 作为统一图标库。

### 选择理由：

- 现代、轻量、开源
- SVG 格式，可直接内嵌
- 与 Feather Icons 完全兼容
- 可扩展性强
- 与未来 Vue/React 图标组件库兼容

### 使用方式（推荐）

#### 在 `header.php` 引入：

```html
<link rel="stylesheet" href="https://unpkg.com/lucide-icons/dist/lucide.css">