freedakgmail
139 lines
4.4 KiB
Markdown
139 lines
4.4 KiB
Markdown
# 政智通 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 区域除外）
|