zhangxiaohua 8411df8ad6 修改样式

2026-01-16 14:48:14 +08:00

8.7 KiB

Raw Blame History

name	description
design-system	比赛管理系统设计规范。当用户提出页面开发需求时自动应用。主色: #0958d9 蓝色主题。包含: 颜色系统、间距、圆角、阴影、字体、组件规范（按钮、卡片、表单、标签）、页面布局、动画效果。适用: 新增页面、修改样式、组件开发、UI调整。

比赛管理系统 - 设计规范 Skill

当用户提出页面开发、UI修改、组件创建等需求时，必须遵循以下设计规范。

快速开始

每个新页面的 <style scoped lang="scss"> 开头必须包含以下变量：

// ==========================================
// 项目统一设计变量 - 必须复制
// ==========================================
$primary: #1890ff;
$primary-dark: #0958d9;
$primary-light: #40a9ff;
$secondary: #4096ff;
$success: #52c41a;
$warning: #faad14;
$error: #ff4d4f;

$background: #f5f7fa;
$surface: #ffffff;

$text: rgba(0, 0, 0, 0.85);
$text-secondary: rgba(0, 0, 0, 0.65);
$text-muted: rgba(0, 0, 0, 0.45);

$border: #d9d9d9;
$border-light: #e8e8e8;

$gradient-primary: linear-gradient(135deg, $primary 0%, $primary-dark 100%);

色彩系统

主色（蓝色主题）

变量	色值	用途
`$primary`	`#1890ff`	主色、按钮、链接
`$primary-dark`	`#0958d9`	渐变深色、激活态
`$primary-light`	`#40a9ff`	悬停态、浅色
`$secondary`	`#4096ff`	辅助蓝

功能色

变量	色值	用途
`$success`	`#52c41a`	成功状态
`$warning`	`#faad14`	警告状态
`$error`	`#ff4d4f`	错误状态

中性色

变量	色值	用途
`$background`	`#f5f5f5`	页面背景
`$surface`	`#ffffff`	卡片/容器背景
`$text`	`rgba(0,0,0,0.85)`	主文本
`$text-secondary`	`rgba(0,0,0,0.65)`	次要文本
`$text-muted`	`rgba(0,0,0,0.45)`	弱化文本
`$border-light`	`#e8e8e8`	边框

间距规范

基于 8px 基准：

尺寸	值	场景
xs	4px	图标间距
sm	8px	元素内间距
md	12px	卡片内元素
base	16px	最常用
lg	20px	区块间距
xl	24px	大间距
2xl	32px	模块分隔

圆角规范

尺寸	值	场景
sm	4px	小元素
base	6px	默认
md	8px	卡片
lg	10px	返回按钮
xl	12px	大卡片
pill	20px	标签
full	50%	头像

阴影规范

等级	定义	场景
sm	`0 1px 2px rgba(0,0,0,0.03)`	轻微
base	`0 2px 8px rgba(0,0,0,0.06)`	卡片默认
md	`0 4px 12px rgba(0,0,0,0.08)`	悬停
lg	`0 8px 24px rgba(0,0,0,0.12)`	弹窗

字体规范

层级	大小	权重	场景
h1	36px	700	大标题
h2	26px	700	区块标题
h3	22px	600	卡片标题
h4	18px	600	小标题
body	14px	400	正文
small	12px	400	标签

组件规范

返回按钮（统一样式）

.back-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px !important;
  border: 1px solid rgba($primary, 0.3) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease !important;

  &:hover {
    background: rgba($primary, 0.1) !important;
    border-color: $primary !important;
    transform: translateY(-1px);
  }
}

模板代码：

<a-button type="text" class="back-btn" @click="handleBack">
  <template #icon><ArrowLeftOutlined /></template>
</a-button>

主按钮（渐变样式）

.primary-btn,
.gradient-btn {
  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba($primary, 0.3);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba($primary, 0.4);
  }
}

// 用于 hero 区域的大按钮
.action-btn.primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba($primary, 0.4);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba($primary, 0.5);
  }
}

卡片

.card {
  background: $surface;
  border: 1px solid $border-light;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  &:hover {
    border-color: rgba($primary, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;

  &.tag-success {
    background: rgba($success, 0.1);
    color: $success;
    border: 1px solid rgba($success, 0.3);
  }

  &.tag-primary {
    background: rgba($primary, 0.1);
    color: $primary;
    border: 1px solid rgba($primary, 0.3);
  }

  &.tag-error {
    background: rgba($error, 0.1);
    color: $error;
    border: 1px solid rgba($error, 0.3);
  }
}

面板/浮层

.panel {
  background: rgba($surface, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba($primary, 0.2);
  border-radius: 12px;

  .panel-header {
    padding: 14px 16px;
    background: rgba($primary, 0.05);
    border-bottom: 1px solid rgba($primary, 0.1);
  }

  .panel-body {
    padding: 16px;
  }
}

页面布局规范

页面头部（64px 高）

.page-header {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: $surface;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 10;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .title {
    font-size: 18px;
    font-weight: 600;
    background: $gradient-primary;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

全屏页面容器

.fullscreen-page {
  min-height: 100vh;
  background: $background;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.page-content {
  flex: 1;
  padding: 24px;
  overflow: auto;
}

卡片网格

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

动画规范

过渡时间

标准过渡：0.3s ease
所有交互元素必须添加过渡

悬停效果

// 卡片悬停
transform: translateY(-4px);

// 按钮悬停
transform: translateY(-2px);

// 小元素悬停
transform: translateY(-1px);

常用动画

// 脉冲
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

// 旋转
@keyframes spin {
  to { transform: rotate(360deg); }
}

加载/错误状态

加载遮罩

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $background;
  z-index: 10;
}

错误卡片

.error-card {
  text-align: center;
  padding: 40px;
  background: $surface;
  border: 1px solid #e8e8e8;
  border-radius: 16px;

  .error-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: $error;
    border-radius: 50%;
    color: #fff;
  }
}

滚动条

&::-webkit-scrollbar {
  width: 6px;
}
&::-webkit-scrollbar-track {
  background: rgba($primary, 0.05);
}
&::-webkit-scrollbar-thumb {
  background: rgba($primary, 0.3);
  border-radius: 3px;
}

响应式断点

$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;

开发检查清单

新增页面必须确认：

复制了颜色变量到 style 开头
返回按钮使用 40x40px + 10px 圆角
卡片悬停有 translateY(-4px) 效果
页面头部高度 64px
所有过渡动画 0.3s
使用 $gradient-primary 作为主渐变
加载状态使用蓝色系

参考页面

frontend/src/views/workbench/ai-3d/Index.vue - 3D Lab 主页
frontend/src/views/workbench/ai-3d/Generate.vue - 生成页
frontend/src/views/model/ModelViewer.vue - 模型预览页

8.7 KiB Raw Blame History Unescape Escape

比赛管理系统 - 设计规范 Skill

快速开始

色彩系统

主色（蓝色主题）

功能色

中性色

间距规范

圆角规范

阴影规范

字体规范

组件规范

返回按钮（统一样式）

主按钮（渐变样式）

卡片

标签

面板/浮层

页面布局规范

页面头部（64px 高）

全屏页面容器

卡片网格

动画规范

过渡时间

悬停效果

常用动画

加载/错误状态

加载遮罩

错误卡片

滚动条

响应式断点

开发检查清单

参考页面

8.7 KiB

Raw Blame History