// ===== AI 政企应用广场设计规范 v2.0 =====

## 一、整体设计基调

### 1.1 风格定位
- **政务级专业稳重** + **AI 科技未来感**
- 低饱和度科技蓝主色调
- 极简主义 + 微立体主义

### 1.2 色彩体系

#### 主色调
```
主色：#1D4ED8（深度科技蓝）
亮色：#3B82F6（明亮蓝）
深色：#1E40AF（深蓝）
```

#### 辅助色
```
成功：#10B981（绿色）
警告：#F59E0B（橙色）
错误：#EF4444（红色）
信息：#3B82F6（蓝色）
```

#### 中性色
```
主文字：#1F2937
次文字：#6B7280
提示文字：#9CA3AF
主背景：#F9FAFB
次背景：#FFFFFF
第三背景：#F3F4F6
```

### 1.3 间距系统（4px 基准）
```
spacing-1: 4px
spacing-2: 8px
spacing-3: 12px
spacing-4: 16px
spacing-5: 20px
spacing-6: 24px
spacing-8: 32px
spacing-10: 40px
spacing-12: 48px
spacing-16: 64px
```

### 1.4 圆角规范
```
sm: 4px（标签、徽章）
md: 8px（按钮、输入框）
lg: 12px（卡片）
xl: 16px（模态框）
full: 9999px（头像、徽章）
```

### 1.5 阴影系统
```
sm: 0 1px 2px rgba(0,0,0,0.05)
md: 0 4px 6px rgba(0,0,0,0.1)
lg: 0 10px 15px rgba(0,0,0,0.1)
xl: 0 20px 25px rgba(0,0,0,0.1)
glow: 0 0 20px rgba(59,130,246,0.3)
```

## 二、Header 组件规范

### 2.1 尺寸
```
高度：64px
左右边距：32px
Logo 区域：40×40px
搜索框高度：40px
```

### 2.2 结构
```
┌────────────────────────────────────────────────────────┐
│ [Logo]  [导航菜单]              [搜索框]    [用户] [通知] │
└────────────────────────────────────────────────────────┘
```

### 2.3 交互效果
- Header 滚动时添加阴影
- 导航 Tab 悬停变蓝 + 下划线
- 搜索框聚焦蓝色光环
- 用户头像悬停蓝色边框

## 三、Sidebar 组件规范

### 3.1 尺寸
```
宽度：256px
高度：calc(100vh - 64px)
内边距：24px
```

### 3.2 结构
```
┌─────────────────┐
│ 应用矩阵        │
│ ├─ 全部应用     │
│ ├─ 大模型服务   │
│ ├─ 政务审批     │
│ └─ ...          │
├─────────────────┤
│ 管理控制台      │
│ ├─ 算力统计     │
│ ├─ 安全性审计   │
│ └─ ...          │
├─────────────────┤
│ [推广位]        │
│ 建科私有云大模型│
│ [立即咨询]      │
└─────────────────┘
```

### 3.3 交互效果
- 菜单项悬停灰色背景
- 激活状态蓝色背景 + 文字
- 推广位按钮悬停放大

## 四、应用卡片规范

### 4.1 尺寸
```
宽度：280px（4 列布局）
高度：320px
内边距：20px
圆角：12px
```

### 4.2 结构
```
┌──────────────────────────┐
│  [图标]      [分享][收藏] │
│                          │
│  应用名称                │
│  简短描述（2 行）          │
│                          │
│  [标签 1] [标签 2]        │
│                          │
│  [认证]        [播放按钮] │
└──────────────────────────┘
```

### 4.3 图标背景色（7 种）
```
blue: #EFF6FF
indigo: #EEF2FF
teal: #F0FDFA
purple: #FAF5FF
rose: #FFF1F2
cyan: #ECFEFF
amber: #FFFBEB
```

### 4.4 标签颜色（8 种）
```
slate: #F1F5F9 / #64748B
blue: #DBEAFE / #1D4ED8
indigo: #E0E7FF / #4338CA
teal: #CCFBF1 / #0D9488
purple: #F3E8FF / #7E22CE
rose: #FFE4E6 / #E11D48
cyan: #CFFAFE / #0891B2
amber: #FEF3C7 / #B45309
```

### 4.5 交互效果
- 卡片悬停上浮 8px + 阴影
- 标题悬停变蓝
- 操作按钮悬停显示
- 播放按钮悬停放大

## 五、应用广场页面规范

### 5.1 布局
```
┌─────────────────────────────────────┐
│ [筛选工具栏]                         │
├─────────────────────────────────────┤
│ [卡片] [卡片] [卡片] [卡片]          │
│ [卡片] [卡片] [卡片] [卡片]          │
│ ...                                  │
└─────────────────────────────────────┘
```

### 5.2 筛选工具栏
```
高度：自适应
底边框：1px solid #E5E7EB
排序按钮组：圆角 12px
过滤按钮：蓝色背景
```

### 5.3 响应式布局
```
≥1536px: 4 列
1280px~1536px: 3 列
768px~1280px: 2 列
<768px: 1 列
```

## 六、演示应用数据（8 个）

1. **智审助手 Pro**
   - 描述：自动化公文审查、错别字纠正
   - 图标：document-text
   - 背景：blue
   - 标签：NLP、私有部署
   - 认证：信创一级认证

2. **视觉政务预警** 🔥
   - 描述：窗口行为分析与人流密度监测
   - 图标：mask-happly
   - 背景：indigo
   - 标签：CV、安防
   - 认证：二级审计

3. **经济态势分析仪**
   - 描述：AI 预测宏观经济指标走势
   - 图标：chart-line-up
   - 背景：teal
   - 标签：Big Data、决策
   - 认证：省级认证

4. **政策语义智译**
   - 描述：政策公文转化为惠民说明
   - 图标：translation-2
   - 背景：purple
   - 标签：LLM、惠民
   - 认证：国产化适配

5. **权限行为内审**
   - 描述：AI 行为审计，拦截异常访问
   - 图标：key-minimalistic-square
   - 背景：rose
   - 标签：安全
   - 认证：等保三级认证

6. **12345 智播报**
   - 描述：语音政务热线智能分类
   - 图标：user-speak
   - 背景：cyan
   - 标签：语音
   - 认证：内网可用

7. **法条案例检索云**
   - 描述：法律条文解析，定位同类案例
   - 图标：square-academic-cap
   - 背景：amber
   - 标签：法律
   - 认证：高度合规

8. **智能客服助手**
   - 描述：24/7 智能客服问答服务
   - 图标：headphones-square
   - 背景：blue
   - 标签：NLP、客服
   - 认证：企业级认证

## 七、动画规范

### 7.1 时长
```
fast: 0.1s
base: 0.2s
slow: 0.3s
```

### 7.2 缓动函数
```
ease: cubic-bezier(0.4, 0, 0.2, 1)
```

### 7.3 关键动画
```
pulse: 安全状态脉冲（2s 循环）
bounce: 通知徽章弹跳（1s 循环）
dropdownSlide: 下拉菜单滑入（0.2s）
cardEnter: 卡片入场（0.4s）
```

## 八、响应式断点

```
sm: 640px（手机横屏）
md: 768px（平板竖屏）
lg: 1024px（平板横屏）
xl: 1280px（桌面小屏）
2xl: 1536px（桌面大屏）
```

---

**版本**: v2.0  
**更新日期**: 2024-01-19  
**适用项目**: jk-rag-platform（建科小智）
