蓉易创管理系统 UI 设计规范
1. 色彩规范
1.1 主色调
- 主蓝色:
#409EFF - 用于主要按钮、链接、图标
- 浅蓝色:
#66B1FF - 用于悬停状态
- 深蓝色:
#1E3A8A - 用于激活状态文字
1.2 背景色
- 主背景:
#FFFFFF - 页面主要背景色
- 卡片背景:
#FFFFFF - 卡片、表格等组件背景
- 悬停背景:
#EBF4FF - 菜单项悬停背景
- 激活背景:
#3B82F6 - 菜单项激活背景
1.3 文字颜色
- 主文字:
#333333 - 标题、重要文字
- 次要文字:
#666666 - 普通文字、菜单项
- 浅色文字:
#999999 - 辅助信息
- 白色文字:
#FFFFFF - 激活状态文字
1.4 边框颜色
- 浅边框:
#E5E7EB - 分隔线、卡片边框
- 中等边框:
#D1D5DB - 表格边框
1.5 状态颜色
- 成功/已发布:
#67C23A - 绿色
- 警告/未发布:
#E6A23C - 黄色
- 危险/关闭:
#F56C6C - 红色
2. 布局规范
2.1 整体布局
- 顶部栏高度: 60px
- 侧边栏宽度: 200px
- 内容区域: 自适应剩余空间
2.2 间距规范
- 页面内边距: 24px
- 卡片间距: 24px
- 组件间距: 16px
- 小间距: 8px
2.3 圆角规范
- 卡片圆角: 8px
- 按钮圆角: 6px
- 状态标签圆角: 4px
3. 组件规范
3.1 顶部栏 (Header)
- 背景色:
#FFFFFF
- 高度: 60px
- 边框: 底部 1px
#E5E7EB
- 内容: 左侧logo+标题，右侧用户信息
3.2 侧边栏 (Sidebar)
- 背景色:
#FFFFFF
- 宽度: 200px
- 边框: 右侧 1px
#E5E7EB
- 菜单项:
- 默认: 透明背景，
#666666 文字
- 悬停:
#EBF4FF 背景，#1E3A8A 文字
- 激活:
#3B82F6 背景，#FFFFFF 文字
- 圆角: 6px，外边距: 2px 8px
3.3 统计卡片
- 背景色:
#FFFFFF
- 圆角: 8px
- 阴影:
0 2px 8px rgba(0, 0, 0, 0.1)
- 内边距: 24px
- 图标容器: 48px圆形，不同主题色背景
- 数字字体: 32px，粗体
- 标题字体: 14px，
#666666
3.4 表格
- 背景色:
#FFFFFF
- 边框:
#E5E7EB
- 斑马纹: 偶数行
#FAFAFA
- 表头:
#F8F9FA 背景，#333333 文字
- 行高: 适中，保证可读性
3.5 操作按钮
- 链接样式: 纯文字，无背景
- 颜色:
#409EFF
- 悬停:
#66B1FF，下划线
- 间距: 左右 8px
3.6 状态标签
- 已发布:
#67C23A 文字，#F0F9FF 背景
- 未发布:
#E6A23C 文字，#FDF6EC 背景
- 关闭:
#F56C6C 文字，#FEF0F0 背景
- 内边距: 4px 8px
- 圆角: 4px
4. 图标规范
4.1 Logo
- 尺寸: 32x32px
- 格式: SVG
- 位置: 顶部栏左侧，标题前
- 间距: 与标题间距 8px
4.2 功能图标
- 统计卡片图标: Element Plus 图标库
- 尺寸: 24px
- 颜色: 白色 (在彩色背景上)
5. 字体规范
5.1 字体大小
- 页面标题: 18px，粗体
- 卡片标题: 16px，粗体
- 统计数字: 32px，粗体
- 正文: 14px
- 辅助文字: 12px
5.2 字体权重
- 标题: 700 (bold)
- 重要数字: 700 (bold)
- 正文: 400 (normal)
6. 响应式规范
6.1 断点
- 移动端: < 768px
- 平板: 768px - 1024px
- 桌面: > 1024px
6.2 适配原则
- 移动端优先考虑垂直布局
- 统计卡片在小屏幕上堆叠显示
- 表格在小屏幕上可横向滚动
7. 交互规范
7.1 悬停效果
- 菜单项: 背景色变化 + 文字颜色变化
- 按钮/链接: 颜色变化 + 下划线
- 卡片: 轻微阴影增强
7.2 点击反馈
- 菜单项: 立即切换到激活状态
- 按钮: 适当的点击反馈动画
- 链接: 颜色变化
8. 阴影规范
8.1 卡片阴影
- 默认:
0 2px 8px rgba(0, 0, 0, 0.1)
- 悬停:
0 4px 12px rgba(0, 0, 0, 0.15)
8.2 使用原则
- 阴影用于区分层级
- 避免过度使用阴影
- 保持阴影的一致性
9. 动画规范
9.1 过渡时间
- 快速: 0.15s - 颜色变化、小元素
- 标准: 0.3s - 菜单展开、卡片悬停
- 慢速: 0.5s - 页面切换
9.2 缓动函数
- 标准:
ease-in-out
- 进入:
ease-out
- 退出:
ease-in
10. 列表页面规范 (List)
10.1 页面头部布局
- 页面标题: 18px，粗体，
#333333
- 副标题: 14px，常规，
#666666，位于主标题下方
- 标题区域: 左对齐，底部间距 24px
10.2 搜索区域设计
- 位置: 页面右上角，与标题区域同行
- 搜索框:
- 宽度: 280px
- 高度: 40px
- 圆角: 6px
- 边框: 1px
#D1D5DB
- 占位符: "请输入比赛名称" 等提示文字
- 搜索图标: 位于输入框左侧，
#999999
- 清除按钮: 当有输入内容时显示
- 动态搜索按钮:
- 位置: 搜索框内部右侧 (suffix slot)
- 显示条件: 仅当搜索框不为空时显示
- 样式: 圆形小按钮 (circle, size="small")
- 颜色: primary (
#409EFF)
- 图标: 搜索图标
- 交互: 点击执行搜索，支持Enter键搜索
- 操作按钮:
- 位置: 搜索框右侧，间距 16px
- 样式: 主按钮样式，蓝色背景
#409EFF
- 文字: "新增比赛" 等操作文字
- 图标: 可选添加 "+" 图标
10.3 表格设计规范
- 表格容器: 白色背景，8px圆角，阴影
0 2px 8px rgba(0, 0, 0, 0.1)
- 表头样式:
- 背景:
#F8F9FA
- 文字: 14px，粗体，
#333333
- 高度: 48px
- 边框: 底部 1px
#E5E7EB
- 表格行:
- 高度: 56px
- 斑马纹: 偶数行
#FAFAFA
- 悬停:
#F0F9FF 背景
- 边框: 底部 1px
#F0F0F0
10.4 操作列图标化设计
- 图标替代文字: 使用Element Plus图标库
- 编辑操作:
- 图标:
Edit (铅笔图标)
- 颜色:
#409EFF
- 尺寸: 16px
- 悬停:
#66B1FF
- 删除操作:
- 图标:
Delete (垃圾桶图标)
- 颜色:
#F56C6C
- 尺寸: 16px
- 悬停:
#F78989
- 图标间距: 左右间距 8px
- 点击区域: 最小 32x32px，确保易点击
10.5 状态标签规范
- 已发布:
- 背景:
#F0F9FF
- 文字:
#67C23A
- 边框: 1px
#67C23A
- 未发布:
- 背景:
#FDF6EC
- 文字:
#E6A23C
- 边框: 1px
#E6A23C
- 已关闭:
- 背景:
#FEF0F0
- 文字:
#F56C6C
- 边框: 1px
#F56C6C
- 标签样式:
- 内边距: 4px 8px
- 圆角: 4px
- 字体: 12px
10.6 分页组件
- 位置: 表格底部，右对齐
- 组件间距: 顶部间距 16px
- 显示内容:
- 总条数: "共 X 条"
- 每页显示: 下拉选择 (10条/页、20条/页、50条/页)
- 页码: 数字分页，显示当前页前后2页
- 样式: 使用Element Plus默认分页样式
10.7 响应式适配
- 移动端 (< 768px):
- 搜索框和按钮垂直排列
- 表格横向滚动
- 操作列固定在右侧
- 平板 (768px - 1024px):
- 搜索区域保持水平布局
- 表格正常显示
- 桌面 (> 1024px):
- 完整布局显示
- 表格列宽自适应
10.8 交互反馈
- 加载状态: 表格数据加载时显示skeleton或loading
- 空状态: 无数据时显示友好的空状态提示
- 操作确认: 删除操作需要二次确认弹窗
- 成功反馈: 操作成功后显示toast提示
10.9 列表项目配置
- 列宽设置:
- 序号列: 80px
- 名称列: 自适应，最小200px
- 数字列: 120px
- 时间列: 180px
- 状态列: 100px
- 操作列: 120px
- 文字对齐:
- 文字内容: 左对齐
- 数字内容: 右对齐
- 状态标签: 居中对齐
- 操作图标: 居中对齐
11. 可访问性规范
11.1 对比度
- 确保文字与背景对比度 ≥ 4.5:1
- 重要信息对比度 ≥ 7:1
11.2 焦点状态
- 所有可交互元素都有明显的焦点状态
- 焦点状态使用蓝色边框标识
本规范基于 Element Plus 设计系统，结合项目实际需求制定。
最后更新时间: 2025年1月
