# UI设计更新计划

## Dashboard页面完整改造方案

### 技术栈确认
- **图标库**: @element-plus/icons-vue (已安装)
- **字体**: 系统默认字体栈
- **日期格式**: 统一为 "2025年10月1日 14:00" 格式

### 整体页面设计

#### 页面背景和容器
- **页面背景色**: #F8F9FA (浅灰色)
- **主容器**: 保持当前响应式栅格布局
- **容器内边距**: 24px
- **卡片间距**: 20px (保持现有)

### 1. 统计卡片区域详细设计

#### 1.1 卡片容器样式
```css
.stat-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: none;
  padding: 24px;
  height: 120px;
  position: relative;
  overflow: hidden;
}
```

#### 1.2 四个统计卡片具体设计

**卡片1 - 当前进行比赛**
- **图标**: `<Calendar />` (Element Plus Icons)
- **图标容器**: 
  - 尺寸: 48px × 48px
  - 背景色: #E0E7FF (浅蓝色圆形)
  - 图标颜色: #6366F1 (蓝紫色)
  - 图标尺寸: 24px
  - 位置: 左上角
- **数字显示**:
  - 字体大小: 32px
  - 字重: 700 (bold)
  - 颜色: #1F2937 (深灰)
  - 位置: 右上角，右对齐
- **标题文字**:
  - 内容: "当前进行比赛"
  - 字体大小: 14px
  - 字重: 500 (medium)
  - 颜色: #6B7280 (中灰)
  - 位置: 左下角

**卡片2 - 参赛总人数**
- **图标**: `<User />` (Element Plus Icons)
- **图标容器**:
  - 背景色: #D1FAE5 (浅绿色圆形)
  - 图标颜色: #10B981 (绿色)
- **数字和文字样式**: 同卡片1
- **标题**: "参赛总人数"

**卡片3 - 报名待审核**
- **图标**: `<Document />` (Element Plus Icons)
- **图标容器**:
  - 背景色: #FEF3C7 (浅黄色圆形)
  - 图标颜色: #F59E0B (橙黄色)
- **数字和文字样式**: 同卡片1
- **标题**: "报名待审核"

**卡片4 - 评委总数**
- **图标**: `<UserFilled />` (Element Plus Icons)
- **图标容器**:
  - 背景色: #FECACA (浅红色圆形)
  - 图标颜色: #EF4444 (红色)
- **数字和文字样式**: 同卡片1
- **标题**: "评委总数"

#### 1.3 卡片内部布局结构
```
┌─────────────────────────────┐
│ [🗓️]                    32 │
│                             │
│ 当前进行比赛                │
└─────────────────────────────┘
```

### 2. 最近比赛表格区域设计

#### 2.1 表格容器卡片
```css
.table-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: none;
  padding: 24px;
  margin-top: 20px;
}
```

#### 2.2 表格头部设计
- **标题**: "最近比赛"
- **标题样式**:
  - 字体大小: 18px
  - 字重: 600 (semibold)
  - 颜色: #1F2937 (深灰)
- **按钮**: 移除所有按钮 (按用户要求)

#### 2.3 表格样式详细设计

**表头样式**:
```css
.el-table__header {
  background-color: #F9FAFB;
}
.el-table__header th {
  background-color: #F9FAFB !important;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  border-bottom: 1px solid #E5E7EB;
}
```

**表格行样式**:
```css
.el-table__row {
  height: 56px;
}
.el-table__row:nth-child(even) {
  background-color: #F9FAFB;
}
.el-table__row:nth-child(odd) {
  background-color: #FFFFFF;
}
.el-table td {
  color: #1F2937;
  font-size: 14px;
  font-weight: 400;
  border-bottom: 1px solid #F3F4F6;
}
```

#### 2.4 表格列设计
1. **比赛名称** (180px)
2. **报名人数** (120px) 
3. **比赛时间** (200px) - 格式: "2025年10月1日 14:00"
4. **状态** (100px) - 状态标签
5. **操作** (自适应) - 移除操作按钮

#### 2.5 状态标签样式

**已发布状态**:
```css
.status-published {
  background-color: #D1FAE5;
  color: #065F46;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}
```

**未发布状态**:
```css
.status-unpublished {
  background-color: #FEF3C7;
  color: #92400E;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}
```

**关闭状态**:
```css
.status-closed {
  background-color: #FEE2E2;
  color: #991B1B;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}
```

### 3. 响应式设计保持

#### 断点设置 (保持现有)
- **xl (≥1200px)**: 4列统计卡片 (span=6)
- **lg (≥992px)**: 4列统计卡片 (span=6)  
- **md (≥768px)**: 2列统计卡片 (span=12)
- **sm (<768px)**: 1列统计卡片 (span=24)

#### 移动端优化
- 统计卡片在小屏幕下保持相同设计
- 表格在移动端可横向滚动
- 图标和文字比例保持一致

### 4. 数据格式处理

#### 日期格式转换
```javascript
// 将后端返回的日期格式化为: "2025年10月1日 14:00"
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
}
```

#### 状态映射
```javascript
const statusMap = {
  '已发布': 'published',
  '未发布': 'unpublished', 
  '关闭': 'closed'
}
```

### 5. 遗漏的设计细节补充

#### 5.1 卡片hover效果
```css
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}
```

#### 5.2 图标容器圆形设计
```css
.icon-container {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 24px;
  left: 24px;
}
```

#### 5.3 数字动画效果 (可选)
- 页面加载时数字从0开始计数到目标值
- 使用CSS transition实现平滑过渡

#### 5.4 表格无数据状态
```css
.el-table__empty-block {
  background-color: #F9FAFB;
  color: #6B7280;
  font-size: 14px;
}
```

#### 5.5 加载状态设计
- 统计卡片显示骨架屏
- 表格显示loading状态
- 保持与整体设计风格一致

### 6. 实施优先级

#### 第一阶段 (核心样式)
1. 页面背景色修改
2. 统计卡片重构 (图标 + 样式)
3. 表格基础样式更新

#### 第二阶段 (细节优化)  
1. 状态标签样式
2. 日期格式处理
3. 响应式测试

#### 第三阶段 (交互优化)
1. hover效果
2. 加载状态
3. 动画效果

### 7. 需要创建的新组件

#### StatCard.vue (统计卡片组件)
- 接收图标、颜色、数值、标题等props
- 可复用的统计卡片组件
- 内置hover和动画效果

#### StatusTag.vue (状态标签组件)  
- 根据状态值自动应用对应样式
- 支持自定义颜色映射

### 8. CSS变量定义

```css
:root {
  /* 主题色 */
  --primary-color: #6366F1;
  --bg-color: #F8F9FA;
  --card-bg: #FFFFFF;
  
  /* 统计卡片颜色 */
  --blue-light: #E0E7FF;
  --blue-primary: #6366F1;
  --green-light: #D1FAE5;
  --green-primary: #10B981;
  --yellow-light: #FEF3C7;
  --yellow-primary: #F59E0B;
  --red-light: #FECACA;
  --red-primary: #EF4444;
  
  /* 文字颜色 */
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --text-muted: #374151;
  
  /* 状态颜色 */
  --status-published-bg: #D1FAE5;
  --status-published-text: #065F46;
  --status-unpublished-bg: #FEF3C7;
  --status-unpublished-text: #92400E;
  --status-closed-bg: #FEE2E2;
  --status-closed-text: #991B1B;
}
```

---

*此计划涵盖了图片设计的所有视觉元素，确保高度还原目标效果*