编辑 | blame | 历史 | 原始文档

UI设计更新计划

Dashboard页面完整改造方案

技术栈确认

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

整体页面设计

页面背景和容器

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

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

1.1 卡片容器样式

.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 表格容器卡片

.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 表格列设计

比赛名称 (180px)
报名人数 (120px)
比赛时间 (200px) - 格式: "2025年10月1日 14:00"
状态 (100px) - 状态标签
操作 (自适应) - 移除操作按钮

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. 数据格式处理

日期格式转换

// 将后端返回的日期格式化为: "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'
  });
}

状态映射

const statusMap = {
  '已发布': 'published',
  '未发布': 'unpublished', 
  '关闭': 'closed'
}

5. 遗漏的设计细节补充

5.1 卡片hover效果

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

5.2 图标容器圆形设计

.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 表格无数据状态

.el-table__empty-block {
  background-color: #F9FAFB;
  color: #6B7280;
  font-size: 14px;
}

5.5 加载状态设计

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

6. 实施优先级

第一阶段 (核心样式)

页面背景色修改
统计卡片重构 (图标 + 样式)
表格基础样式更新

第二阶段 (细节优化)

状态标签样式
日期格式处理
响应式测试

第三阶段 (交互优化)

hover效果
加载状态
动画效果

7. 需要创建的新组件

StatCard.vue (统计卡片组件)

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

StatusTag.vue (状态标签组件)

根据状态值自动应用对应样式
支持自定义颜色映射

8. 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;
}

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