# 蓉易创管理系统 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月*