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：标准业务主题（用于普通页面）

主色调 - 蓝色系

--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）

功能色

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

中性色

// 文字
--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          // 布局背景

侧边栏主题

--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建模页面）

主色调 - 深色科技风

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

背景与表面

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

文字色

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

渐变

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

---

📐 布局规范

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

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

标准布局

侧边栏布局（BasicLayout）

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

卡片间距

.card {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  background: #fff;
}

搜索表单

.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)

---

🧩 组件规范

按钮

类型与用途

<!-- 主要操作 -->
<a-button type="primary">创建</a-button>

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

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

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

尺寸

<a-button size="large">大按钮</a-button>
<a-button>默认按钮</a-button>
<a-button size="small">小按钮</a-button>

按钮组合间距

.button-group {
  .ant-btn + .ant-btn {
    margin-left: 8px;
  }
}

表格

标准配置

{
  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')

表单

布局

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

输入框宽度

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

标签（Tags）

颜色语义

<!-- 状态标签 -->
<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>

模态框与抽屉

模态框

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

抽屉

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

卡片

标准卡片

<a-card title="标题" class="mb-4">
  <!-- 内容 -->
</a-card>

无边框卡片

<a-card :bordered="false" class="mb-4">
  <!-- 内容 -->
</a-card>

---

🌓 双主题架构

主题A：标准业务主题

适用页面：

• 赛事管理（contests）
• 学校管理（school）
• 作业管理（homework）
• 系统管理（system）
• 登录页面（auth）

设计特征：

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

代码示例：

<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）
• ✅ 渐变背景

代码示例：

<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 设计价值观
• Material Design 色彩系统
• 8点网格系统

颜色工具

• Coolors - 配色方案生成
• Adobe Color - 色彩搭配
• Contrast Checker - 对比度检查

组件库文档

• Ant Design Vue
• Tailwind CSS

---

📝 更新日志

v1.0 (2026-01-14)

• ✅ 初始版本
• ✅ 完成主题色彩系统梳理
• ✅ 完成布局规范定义
• ✅ 完成组件规范文档
• ✅ 完成双主题对比分析
• ✅ 提出风格统一方案

---

📞 联系与反馈

如有设计系统相关问题或建议，请通过以下方式反馈：

• 项目路径: C:\Users\82788\Desktop\work\competition-management-system
• 文档位置: .claude/ui-design-system.md

---

文档结束