# 政智通 UI 设计规范

> 面向政府机关单位的 AI 智能应用平台，设计风格需体现**严肃性、专业性、简洁易用**。

---

## 一、色彩体系

### 主色调 — 政务蓝
| 用途       | 色值             | 说明                     |
|----------|----------------|------------------------|
| 主导航背景    | `blue-950/900` | 深蓝色渐变，体现政府权威           |
| 主要按钮     | `blue-900`     | 如"开始使用""新建""登录"等       |
| 按钮 Hover | `blue-800`     | 略浅的蓝色过渡                |
| 强调色      | `blue-700`     | 图标、竖线装饰、链接文字           |
| 浅色背景     | `blue-100`     | 标签 badge 背景            |
| 浅色文字     | `blue-800`     | 标签 badge 文字            |

### 辅助色
| 用途    | 色值            | 说明         |
|-------|---------------|------------|
| 金色点缀  | `amber-400`   | Logo 盾牌图标  |
| 星级评分  | `amber-400`   | 五星评价       |
| 危险操作  | `destructive` | 删除按钮       |
| 成功状态  | `emerald-700` | 完成步骤       |

### 全局 CSS 变量
- `--primary`: `oklch(0.30 0.10 250)` — 深蓝色
- `--primary-foreground`: 白色
- 背景色保持浅灰白 `oklch(0.985 0.002 250)`

---

## 二、图标规范

### 严禁使用 Emoji
所有页面、组件中**不得使用 emoji 字符**（如 🕐、⭐、📱、💬 等），一律使用 **Lucide React** 图标库。

### 图标风格
- 线条图标（stroke），不用填充图标
- 导航图标：`h-4 w-4`
- Section 标题图标：`h-5 w-5 text-blue-700`
- 卡片内图标：`h-5 w-5`
- 小型标签图标：`h-3 w-3`

### 常用图标映射
| 场景     | 图标             |
|--------|----------------|
| 最近使用   | `Clock`        |
| 我的收藏   | `Star`         |
| 工作台    | `LayoutDashboard` |
| 总用户数   | `Users`        |
| 应用数量   | `AppWindow`    |
| 活跃用户   | `Activity`     |
| 对话次数   | `MessageCircle`|
| Token 消耗| `Target`       |
| 成本     | `DollarSign`   |
| 品牌盾牌   | `Shield`       |

---

## 三、顶部导航栏

- **背景**：`bg-gradient-to-r from-blue-950 via-blue-900 to-blue-950`
- **文字颜色**：白色 / `text-blue-100`
- **Hover**：`hover:text-white hover:bg-white/10`
- **Logo**：盾牌图标金色 `text-amber-400` + 白色文字"政智通"
- **搜索框**：半透明白色背景 `bg-white/10 border-white/20`
- **机构标签**：半透明背景 `bg-white/10`
- **头像**：白色边框 `border-white/30`

---

## 四、页面组件规范

### Section 标题
- 左侧蓝色竖线装饰：`w-1 h-5 bg-blue-800 rounded-full`
- 配合 Lucide 图标和加粗标题

### 应用卡片 (AppCard)
- Hover 效果：左侧蓝色边线 `bg-blue-700` + 标题变蓝 `text-blue-800`
- 边框 hover 变蓝：`hover:border-blue-300`
- 抬升效果适度：`hover:-translate-y-0.5`

### 主要按钮
- 用途：登录、开始使用、新建对话/公文/报告
- 样式：`bg-blue-900 hover:bg-blue-800 text-white`
- 登录按钮高度：`h-11`（略大于默认）

### 应用类型标签 (Badge)
- 统一风格：`text-blue-800 bg-blue-100 rounded-full font-medium`
- 适用于：对话型、工作流、补全型、智能体、公文写作、研判分析

### Workflow 选项卡片
- 彩色卡片网格布局：`grid-cols-2 md:grid-cols-3 lg:grid-cols-4`
- 每个选项自动匹配图标（基于关键词）和颜色（轮转 12 种配色）
- 选中状态：`ring-2 ring-purple-400 ring-offset-2 shadow-md`

---

## 五、交互规范

### 过渡动画
- 所有 hover 效果使用 `transition-all duration-200`
- 卡片抬升不超过 `0.5` 个单位
- 避免过度动画，保持庄重

### 表单
- 输入框圆角：`rounded-lg`
- 标签间距：`space-y-2`
- 必填项标红星：`<span className="text-destructive">*</span>`

### 侧边栏
- 宽度：`w-64`
- 背景：`bg-muted/30`
- 分区用 `border-b` 分隔
- 管理后台侧边栏激活态用 primary 色

---

## 六、字体规范

- 系统默认无衬线字体
- 标题：`font-bold` 或 `font-semibold`
- 正文：`text-sm`
- 辅助文字：`text-xs text-muted-foreground`
- Logo"政智通"：`tracking-wider`（字间距加宽）

---

## 七、禁止事项

1. ❌ 使用 emoji 字符
2. ❌ 使用彩虹色/荧光色
3. ❌ 过度圆角（不超过 `rounded-xl`）
4. ❌ 大面积动画效果
5. ❌ 非蓝色系的主操作按钮
6. ❌ 花哨的渐变文字（Logo 区域除外）