// ===== 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（建科小智）