freedakgmail
4.4 KiB
4.4 KiB
政智通 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（字间距加宽）
七、禁止事项
- ❌ 使用 emoji 字符
- ❌ 使用彩虹色/荧光色
- ❌ 过度圆角（不超过
rounded-xl） - ❌ 大面积动画效果
- ❌ 非蓝色系的主操作按钮
- ❌ 花哨的渐变文字（Logo 区域除外）