library-picturebook-activity/.claude/ui-design-system.md

# 比赛管理系统 - UI设计系统文档

> 版本: 1.0
> 更新日期: 2026-01-14
> 框架: Vue 3 + Ant Design Vue + Tailwind CSS

---

## 📋 目录

1. [设计理念](#设计理念)
2. [色彩系统](#色彩系统)
3. [布局规范](#布局规范)
4. [组件规范](#组件规范)
5. [双主题架构](#双主题架构)
6. [风格统一建议](#风格统一建议)

---

## 🎨 设计理念

### 整体定位
- **企业级应用**: 专业、可靠、易用
- **教育科技**: 现代、创新、智能
- **双主题并存**: 传统业务管理 + 创新AI功能

### 设计原则
1. **一致性优先**: 相同功能使用相同的交互模式
2. **效率至上**: 减少用户操作步骤，提升工作效率
3. **清晰明确**: 信息层级分明，状态反馈清晰
4. **渐进增强**: 基础功能稳定，高级功能突出

---

## 🎨 色彩系统

### 主题A：标准业务主题（用于普通页面）

#### 主色调 - 蓝色系
```scss
--ant-color-primary: #0958d9          // 主色（Ant Design blue-6）
--ant-color-primary-hover: #1677ff    // 悬停色（blue-5）
--ant-color-primary-active: #003eb3   // 激活色（blue-7）
--ant-color-primary-bg: #e6f7ff       // 主色背景（blue-0）
--ant-color-primary-bg-hover: #bae7ff // 主色背景悬停（blue-1）
```

#### 功能色
```scss
--ant-color-success: #52c41a   // 成功（绿色）
--ant-color-error: #ff4d4f     // 错误（红色）
--ant-color-warning: #faad14   // 警告（黄色）
--ant-color-info: #0958d9      // 信息（蓝色）
```

#### 中性色
```scss
// 文字
--ant-color-text: rgba(0, 0, 0, 0.85)     // 主文字
--ant-color-text-secondary: rgba(0, 0, 0, 0.45)  // 次要文字
--ant-color-text-tertiary: rgba(0, 0, 0, 0.25)   // 辅助文字

// 边框
--ant-color-border: #d9d9d9              // 主边框
--ant-color-border-secondary: rgba(0, 0, 0, 0.06)  // 次边框

// 背景
--ant-color-bg-container: #ffffff        // 容器背景
--ant-color-bg-layout: #f5f5f5          // 布局背景
```

#### 侧边栏主题
```scss
--sidebar-bg: #f5f5f5                          // 侧边栏背景
--sidebar-menu-item-hover: #e6f7ff             // 菜单项悬停
--sidebar-menu-item-selected-bg: #e6f7ff       // 菜单项选中背景
--sidebar-menu-text: rgba(0, 0, 0, 0.85)       // 菜单文字
--sidebar-menu-text-selected: #0958d9          // 选中文字
```

### 主题B：现代创意主题（用于3D建模页面）

#### 主色调 - 深色科技风
```scss
$primary: #7c3aed           // 深紫色
$primary-light: #a78bfa     // 浅紫色
$primary-dark: #5b21b6      // 深紫暗色
$secondary: #06b6d4         // 青蓝色
$accent: #f43f5e            // 粉红强调色
$success: #10b981           // 成功绿
```

#### 背景与表面
```scss
$background: #0a0a12        // 主背景（深黑）
$surface: #12121e           // 卡片表面（深灰）
$surface-light: #1a1a2e     // 浅表面
```

#### 文字色
```scss
$text: #e2e8f0              // 主文字（浅灰）
$text-muted: #94a3b8        // 次要文字
```

#### 渐变
```scss
$gradient-primary: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)
$gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%)
```

---

## 📐 布局规范

### 间距系统（8px基础单位）

```scss
$spacing-xs: 8px      // 超小间距
$spacing-sm: 16px     // 小间距
$spacing-md: 24px     // 中间距
$spacing-lg: 32px     // 大间距
$spacing-xl: 48px     // 超大间距
```

### 标准布局

#### 侧边栏布局（BasicLayout）
```
- 侧边栏宽度: 200px
- 侧边栏背景: #f5f5f5
- Logo高度: 64px
- 菜单项外边距: 4px 8px
- 菜单项圆角: 6px
- 内容区内边距: 20px
```

#### 卡片间距
```scss
.card {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  background: #fff;
}
```

#### 搜索表单
```scss
.search-form {
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #fafafa;
}
```

### 栅格系统
- 使用Ant Design 24栅格系统
- 常用布局: `<a-col :span="24" :md="12" :lg="8">`
- 响应式断点: xs(480), sm(576), md(768), lg(992), xl(1200), xxl(1600)

---

## 🧩 组件规范

### 按钮

#### 类型与用途
```vue
<!-- 主要操作 -->
<a-button type="primary">创建</a-button>

<!-- 次要操作 -->
<a-button>取消</a-button>

<!-- 文字按钮 -->
<a-button type="link">查看详情</a-button>

<!-- 危险操作 -->
<a-button danger>删除</a-button>
```

#### 尺寸
```vue
<a-button size="large">大按钮</a-button>
<a-button>默认按钮</a-button>
<a-button size="small">小按钮</a-button>
```

#### 按钮组合间距
```scss
.button-group {
  .ant-btn + .ant-btn {
    margin-left: 8px;
  }
}
```

### 表格

#### 标准配置
```typescript
{
  bordered: false,              // 不显示边框（默认）
  size: 'middle',               // 默认尺寸
  pagination: {
    defaultPageSize: 10,        // 默认每页10条
    showSizeChanger: true,      // 显示切换器
    showQuickJumper: true,      // 显示快速跳转
    showTotal: (total) => `共 ${total} 条`,
  },
  rowKey: 'id',                 // 行键
  loading: false,               // 加载状态
}
```

#### 列宽建议
```
- ID列: 80px
- 名称列: 120-200px
- 描述列: 200-300px
- 时间列: 180px
- 状态列: 100px
- 操作列: 120-200px (fixed: 'right')
```

### 表单

#### 布局
```vue
<a-form
  :model="form"
  :label-col="{ span: 6 }"
  :wrapper-col="{ span: 16 }"
>
  <!-- 表单项 -->
</a-form>
```

#### 输入框宽度
```
- 短文本（名称、编号）: 200px
- 中文本（描述）: 300-400px
- 长文本（详情）: 100%
- 选择框（状态、类型）: 120-200px
- 日期选择: 200px
- 日期范围: 280px
```

### 标签（Tags）

#### 颜色语义
```vue
<!-- 状态标签 -->
<a-tag color="success">已发布</a-tag>
<a-tag color="processing">进行中</a-tag>
<a-tag color="default">草稿</a-tag>
<a-tag color="error">已关闭</a-tag>

<!-- 类型标签 -->
<a-tag color="blue">个人赛</a-tag>
<a-tag color="purple">团队赛</a-tag>
```

### 模态框与抽屉

#### 模态框
```vue
<a-modal
  v-model:open="visible"
  title="标题"
  width="600px"
  @ok="handleOk"
  @cancel="handleCancel"
>
  <!-- 内容 -->
</a-modal>
```

#### 抽屉
```vue
<a-drawer
  v-model:open="visible"
  title="标题"
  width="600px"
  placement="right"
>
  <!-- 内容 -->
</a-drawer>
```

### 卡片

#### 标准卡片
```vue
<a-card title="标题" class="mb-4">
  <!-- 内容 -->
</a-card>
```

#### 无边框卡片
```vue
<a-card :bordered="false" class="mb-4">
  <!-- 内容 -->
</a-card>
```

---

## 🌓 双主题架构

### 主题A：标准业务主题

**适用页面：**
- 赛事管理（contests）
- 学校管理（school）
- 作业管理（homework）
- 系统管理（system）
- 登录页面（auth）

**设计特征：**
- ✅ 浅色背景（#ffffff, #f5f5f5）
- ✅ 蓝色主题（#0958d9）
- ✅ 标准Ant Design组件样式
- ✅ 简洁的过渡动画（0.3s）
- ✅ 表格为主要数据展示方式
- ✅ 圆角: 6-8px
- ✅ 轻微阴影效果

**代码示例：**
```vue
<template>
  <div class="page-container">
    <!-- 搜索区 -->
    <a-card class="search-card mb-4">
      <a-form layout="inline">
        <a-form-item label="搜索">
          <a-input v-model:value="keyword" placeholder="请输入" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary">查询</a-button>
          <a-button class="ml-2">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 数据表格 -->
    <a-card>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="pagination"
      />
    </a-card>
  </div>
</template>

<style scoped lang="scss">
.page-container {
  padding: 20px;
  background: #fff;
}

.search-card {
  background: #fafafa;
  border-radius: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.ml-2 {
  margin-left: 8px;
}
</style>
```

### 主题B：现代创意主题

**适用页面：**
- 3D建模实验室（workbench/ai-3d）
- AI相关创新功能

**设计特征：**
- ✅ 深色背景（#0a0a12）
- ✅ 紫色+青蓝色主题（#7c3aed, #06b6d4）
- ✅ 玻璃态效果（backdrop-filter: blur()）
- ✅ 复杂动画（浮动、旋转、脉冲）
- ✅ 卡片网格布局
- ✅ 圆角: 12-20px
- ✅ 发光效果（glow）
- ✅ 渐变背景

**代码示例：**
```vue
<template>
  <div class="ai-3d-container">
    <!-- 动画背景 -->
    <div class="bg-animation">
      <div class="bg-gradient bg-gradient-1"></div>
      <div class="bg-gradient bg-gradient-2"></div>
      <div class="bg-grid"></div>
    </div>

    <!-- 左侧面板 -->
    <div class="left-panel">
      <!-- 内容 -->
    </div>

    <!-- 右侧内容 -->
    <div class="right-panel">
      <!-- 内容 -->
    </div>
  </div>
</template>

<style scoped lang="scss">
$primary: #7c3aed;
$secondary: #06b6d4;
$background: #0a0a12;

.ai-3d-container {
  min-height: 100vh;
  background: $background;
  position: relative;
  overflow: hidden;
}

.bg-animation {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-gradient {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  animation: float 25s ease-in-out infinite;
}

.left-panel {
  width: 380px;
  background: rgba(18, 18, 30, 0.8);
  backdrop-filter: blur(40px);
  border-right: 1px solid rgba($primary, 0.1);
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 30px) scale(0.9);
  }
}
</style>
```

---

## 🔄 风格统一建议

### 问题分析
目前3D建模页面与其他业务页面风格差异较大，可能导致：
- 用户体验割裂感
- 视觉不统一
- 品牌识别度降低

### 统一方案

#### 方案A：保守统一（推荐用于企业应用）
**目标：** 将3D页面统一到标准业务主题

**调整内容：**
1. **色彩调整**
   - 主色由紫色改为蓝色（#7c3aed → #0958d9）
   - 背景改为浅色（#0a0a12 → #f5f5f5）
   - 文字改为深色（#e2e8f0 → rgba(0,0,0,0.85)）

2. **布局调整**
   - 使用标准卡片布局
   - 保持双面板结构，但使用浅色背景
   - 移除动画背景

3. **组件调整**
   - 圆角统一为8px
   - 移除玻璃态效果
   - 简化动画效果

4. **保留特色**
   - 保留双面板布局（体现AI功能特殊性）
   - 保留历史记录网格展示
   - 保留进度动画反馈

**优点：** 风格统一，专业稳重
**缺点：** 失去部分科技感和创新感

#### 方案B：渐进融合（推荐用于创新型应用）
**目标：** 在保留创新感的同时，与主题色对齐

**调整内容：**
1. **色彩微调**
   - 主色保持紫色，但添加蓝色辅助色
   - 使用浅色变体（深蓝色背景 #0f172a 代替纯黑）
   - 增加白色卡片区域（保留部分深色背景）

2. **融合元素**
   - 顶部添加面包屑/返回按钮（与其他页面一致）
   - 左侧面板使用浅色变体
   - 右侧内容区使用白色背景

3. **动画优化**
   - 保留关键动画（生成按钮、加载动画）
   - 简化背景动画（减少动画数量）
   - 统一过渡时间（0.3s）

**优点：** 既保留创新感，又提升统一性
**缺点：** 需要较多调整工作

#### 方案C：品牌双主题（适合大型平台）
**目标：** 建立明确的双主题设计系统

**调整内容：**
1. **主题切换**
   - 在设置中提供主题切换选项
   - 标准业务使用浅色主题
   - AI创新功能使用深色主题
   - 统一过渡动画

2. **主题桥接**
   - 在AI页面顶部添加主题标识
   - 使用渐变过渡效果
   - 统一图标和字体

3. **文档规范**
   - 明确两套主题的使用场景
   - 制定切换规则
   - 统一组件库

**优点：** 灵活性高，可支持品牌升级
**缺点：** 开发和维护成本高

### 快速优化建议（不改变整体风格）

如果暂时不做大规模调整，可以先做以下小优化：

1. **统一圆角**
   - 将3D页面的圆角从12-20px调整为8-12px

2. **添加面包屑**
   - 在3D页面顶部添加返回路径

3. **统一过渡时间**
   - 将所有动画过渡统一为0.3s

4. **添加品牌标识**
   - 在3D页面显著位置添加系统Logo

5. **统一字体**
   - 确保字体大小和行高与其他页面一致

---

## 📚 参考资源

### 设计规范
- [Ant Design 设计价值观](https://ant.design/docs/spec/values-cn)
- [Material Design 色彩系统](https://material.io/design/color)
- [8点网格系统](https://spec.fm/specifics/8-pt-grid)

### 颜色工具
- [Coolors](https://coolors.co/) - 配色方案生成
- [Adobe Color](https://color.adobe.com/) - 色彩搭配
- [Contrast Checker](https://webaim.org/resources/contrastchecker/) - 对比度检查

### 组件库文档
- [Ant Design Vue](https://antdv.com/components/overview-cn)
- [Tailwind CSS](https://tailwindcss.com/docs)

---

## 📝 更新日志

### v1.0 (2026-01-14)
- ✅ 初始版本
- ✅ 完成主题色彩系统梳理
- ✅ 完成布局规范定义
- ✅ 完成组件规范文档
- ✅ 完成双主题对比分析
- ✅ 提出风格统一方案

---

## 📞 联系与反馈

如有设计系统相关问题或建议，请通过以下方式反馈：
- 项目路径: `C:\Users\82788\Desktop\work\competition-management-system`
- 文档位置: `.claude/ui-design-system.md`

---

**文档结束**