zhouhui.jiang / test_cursor

Go to a project
Toggle navigation Toggle navigation pinning
Switch branch/tag
前端样式规范对齐详细修改计划.md 38.4 KB

前端样式规范对齐详细修改计划

📋 项目概述

基于GCCPOP设计规范，将前端项目在8个基础规范维度与设计模板对齐，提供一致、现代、专业的用户体验。

🎯 8个基础规范维度

  1. 基础规范颜色（色值、配色方案、应用场景）
  2. 基础规范文字（字体、字号、行高、字重、文本样式）
  3. 基础规范栅格（栅格系统参数、布局规则、响应式断点）
  4. 基础规范导航（导航结构、交互样式、层级关系）
  5. 基础规范图标（图标库、尺寸规范、风格统一、交互状态）
  6. 基础规范控件（按钮、输入框、选择器等组件样式及交互）
  7. 基础规范框（卡片、面板等容器组件的样式规范）
  8. 基础规范弹窗（弹窗尺寸、层级、动画、交互逻辑）

🎨 1. 基础规范颜色系统

从模板提取的核心颜色规范

  • 主色： #141F33 (RGB: 20, 31, 51, HSL: 220°, 44%, 14%)
  • 字体： PingFang SC
  • 字体粗细： 600 (Semibold)
  • 行高： 40px (1.67倍)

修改目标文件

frontend/src/assets/styles/variables.scss

具体修改内容

:root {
  // 主色调系统 - 基于设计规范 #141F33
  --el-color-primary: #141F33;
  --el-color-primary-light-3: #546477;
  --el-color-primary-light-5: #6A798C;
  --el-color-primary-light-7: #7F8EA1;
  --el-color-primary-light-8: #94A3B6;
  --el-color-primary-light-9: #A9B8CB;
  --el-color-primary-dark-2: #0F1A2A;

  // 功能色系 - 基于设计规范
  --el-color-success: #52C41A;
  --el-color-warning: #FAAD14;
  --el-color-danger: #FF4D4F;
  --el-color-info: #13C2C2;

  // 文本颜色系统
  --el-text-color-primary: #141F33;
  --el-text-color-regular: #4A5568;
  --el-text-color-secondary: #718096;
  --el-text-color-placeholder: #A0AEC0;
  --el-text-color-disabled: #CBD5E0;

  // 边框颜色系统
  --el-border-color: #E2E8F0;
  --el-border-color-light: #EDF2F7;
  --el-border-color-lighter: #F7FAFC;
  --el-border-color-extra-light: #FAFBFC;

  // 背景色系统
  --el-bg-color: #ffffff;
  --el-bg-color-page: #F8FAFC;
  --el-bg-color-overlay: #ffffff;

  // 布局相关 - 基于设计规范
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --header-height: 60px;
  --breadcrumb-height: 40px;

  // 阴影系统 - 基于设计规范
  --el-box-shadow: 0 2px 8px rgba(20, 31, 51, 0.08);
  --el-box-shadow-light: 0 2px 12px rgba(20, 31, 51, 0.06);
  --el-box-shadow-base: 0 2px 8px rgba(20, 31, 51, 0.08);
  --el-box-shadow-dark: 0 4px 16px rgba(20, 31, 51, 0.12);

  // 圆角系统
  --el-border-radius-base: 6px;
  --el-border-radius-small: 4px;
  --el-border-radius-round: 20px;
  --el-border-radius-circle: 100%;

  // 字体系统 - 基于设计规范 PingFang SC
  --el-font-size-extra-large: 24px;
  --el-font-size-large: 20px;
  --el-font-size-medium: 18px;
  --el-font-size-base: 14px;
  --el-font-size-small: 12px;
  --el-font-size-extra-small: 11px;

  // 间距系统 - 基于设计规范
  --el-spacing-extra-large: 32px;
  --el-spacing-large: 24px;
  --el-spacing-medium: 16px;
  --el-spacing-base: 12px;
  --el-spacing-small: 8px;
  --el-spacing-extra-small: 4px;

  // 字体族系统
  --el-font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

📝 2. 基础规范文字系统

从模板提取的文字规范

  • 字体族： PingFang SC
  • 主标题： 24px, 600, 40px行高
  • 字间距： 0
  • 对齐： left

修改目标文件

frontend/src/assets/styles/typography.scss (新建)

具体修改内容

// 字体系统
$font-family-primary: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

// 文字层级系统
.text-h1 {
  font-family: $font-family-primary;
  font-size: 24px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 0;
  color: var(--el-text-color-primary);
}

.text-h2 {
  font-family: $font-family-primary;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--el-text-color-primary);
}

.text-h3 {
  font-family: $font-family-primary;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--el-text-color-primary);
}

.text-h4 {
  font-family: $font-family-primary;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--el-text-color-primary);
}

.text-body {
  font-family: $font-family-primary;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--el-text-color-primary);
}

.text-caption {
  font-family: $font-family-primary;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  color: var(--el-text-color-regular);
}

.text-small {
  font-family: $font-family-primary;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--el-text-color-secondary);
}

// 文字工具类
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-bold { font-weight: 600; }
.text-medium { font-weight: 500; }
.text-normal { font-weight: 400; }

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-ellipsis-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

📐 3. 基础规范栅格系统

修改目标文件

frontend/src/assets/styles/grid-system.scss (新建)

具体修改内容

// 栅格系统参数
$grid-columns: 24;
$grid-gutter: 16px;
$container-max-width: 1200px;

// 响应式断点
$breakpoint-xs: 480px;
$breakpoint-sm: 768px;
$breakpoint-md: 992px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1600px;

// 容器系统
.container {
  max-width: $container-max-width;
  margin: 0 auto;
  padding: 0 $grid-gutter;
}

.container-fluid {
  width: 100%;
  padding: 0 $grid-gutter;
}

// 栅格行
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 (-$grid-gutter / 2);
}

// 栅格列
.col {
  flex: 1;
  padding: 0 ($grid-gutter / 2);
}

// 响应式栅格
@for $i from 1 through $grid-columns {
  .col-#{$i} {
    flex: 0 0 percentage($i / $grid-columns);
    max-width: percentage($i / $grid-columns);
    padding: 0 ($grid-gutter / 2);
  }
}

// 响应式断点
@media (max-width: $breakpoint-sm) {
  .container {
    padding: 0 12px;
  }

  .row {
    margin: 0 -6px;
  }

  .col, [class*="col-"] {
    padding: 0 6px;
  }
}

@media (max-width: $breakpoint-xs) {
  .container {
    padding: 0 8px;
  }

  .row {
    margin: 0 -4px;
  }

  .col, [class*="col-"] {
    padding: 0 4px;
  }
}

// 间距系统
.spacing-xs { margin: 4px; }
.spacing-sm { margin: 8px; }
.spacing-md { margin: 16px; }
.spacing-lg { margin: 24px; }
.spacing-xl { margin: 32px; }
.spacing-xxl { margin: 48px; }

// 内边距系统
.padding-xs { padding: 4px; }
.padding-sm { padding: 8px; }
.padding-md { padding: 16px; }
.padding-lg { padding: 24px; }
.padding-xl { padding: 32px; }
.padding-xxl { padding: 48px; }

// Flex 布局工具类
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

// 显示/隐藏工具类
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

// 响应式显示/隐藏
@media (max-width: $breakpoint-sm) {
  .d-sm-none { display: none; }
  .d-sm-block { display: block; }
  .d-sm-flex { display: flex; }
}

@media (max-width: $breakpoint-xs) {
  .d-xs-none { display: none; }
  .d-xs-block { display: block; }
  .d-xs-flex { display: flex; }
}

🧭 4. 基础规范导航系统

修改目标文件

  • frontend/src/components/layout/Header.vue
  • frontend/src/components/layout/Sidebar.vue
  • frontend/src/assets/styles/navigation.scss (新建)

具体修改内容

// Header 导航规范
.header {
  height: 60px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
  box-shadow: 0 2px 8px rgba(20, 31, 51, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
}

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

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

// 折叠按钮
.collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  color: var(--el-text-color-regular);
  transition: all 0.2s ease;

  &:hover {
    background: var(--el-bg-color-page);
    color: var(--el-text-color-primary);
  }
}

// 头部按钮
.header-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  color: var(--el-text-color-regular);
  transition: all 0.2s ease;

  &:hover {
    background: var(--el-bg-color-page);
    color: var(--el-text-color-primary);
  }
}

// 用户信息
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background: var(--el-bg-color-page);
  }
}

.username {
  font-family: var(--el-font-family);
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.dropdown-icon {
  color: var(--el-text-color-secondary);
  transition: color 0.2s ease;
}

// Sidebar 导航规范
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--el-bg-color);
  border-right: 1px solid var(--el-border-color);
  box-shadow: 2px 0 8px rgba(20, 31, 51, 0.08);
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-logo {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--el-border-color);
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--el-text-color-primary);
}

.logo-img {
  width: 32px;
  height: 32px;
}

.logo-text {
  font-family: var(--el-font-family);
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.sidebar-scrollbar {
  flex: 1;
  overflow-y: auto;
}

// 菜单项样式
.el-menu {
  border-right: none;
  background: var(--el-bg-color);
}

.el-menu-item {
  font-family: var(--el-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--el-text-color-regular);
  height: 48px;
  line-height: 48px;
  margin: 2px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;

  &.is-active {
    color: var(--el-color-primary);
    background-color: var(--el-bg-color-page);
    font-weight: 600;
  }

  &:hover {
    background-color: var(--el-bg-color-page);
    color: var(--el-text-color-primary);
  }
}

.el-submenu__title {
  font-family: var(--el-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--el-text-color-regular);
  height: 48px;
  line-height: 48px;
  margin: 2px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;

  &:hover {
    background-color: var(--el-bg-color-page);
    color: var(--el-text-color-primary);
  }
}

// 子菜单
.el-submenu .el-menu-item {
  margin: 1px 16px;
  padding-left: 24px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
}

// 面包屑导航
.breadcrumb {
  height: var(--breadcrumb-height);
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.el-breadcrumb {
  font-family: var(--el-font-family);
  font-size: 14px;
}

.el-breadcrumb__item {
  .el-breadcrumb__inner {
    color: var(--el-text-color-regular);
    font-weight: 400;

    &:hover {
      color: var(--el-color-primary);
    }
  }

  &:last-child .el-breadcrumb__inner {
    color: var(--el-text-color-primary);
    font-weight: 500;
  }
}

🎯 5. 基础规范图标系统

修改目标文件

frontend/src/assets/styles/icons.scss (新建)

具体修改内容

// 图标尺寸规范
.icon-xs { 
  width: 12px; 
  height: 12px; 
}

.icon-sm { 
  width: 16px; 
  height: 16px; 
}

.icon-md { 
  width: 20px; 
  height: 20px; 
}

.icon-lg { 
  width: 24px; 
  height: 24px; 
}

.icon-xl { 
  width: 32px; 
  height: 32px; 
}

.icon-xxl { 
  width: 48px; 
  height: 48px; 
}

// 图标颜色规范
.icon-primary { 
  color: var(--el-color-primary); 
}

.icon-secondary { 
  color: var(--el-text-color-regular); 
}

.icon-tertiary { 
  color: var(--el-text-color-secondary); 
}

.icon-success { 
  color: var(--el-color-success); 
}

.icon-warning { 
  color: var(--el-color-warning); 
}

.icon-error { 
  color: var(--el-color-danger); 
}

.icon-info { 
  color: var(--el-color-info); 
}

.icon-disabled { 
  color: var(--el-text-color-disabled); 
}

// 图标交互状态
.icon-interactive {
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    color: var(--el-color-primary);
    transform: scale(1.1);
  }

  &:active {
    transform: scale(0.95);
  }
}

// 图标容器
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: var(--el-bg-color-page);
  }

  &.icon-container-sm {
    padding: 4px;
  }

  &.icon-container-md {
    padding: 6px;
  }

  &.icon-container-lg {
    padding: 8px;
  }
}

// 图标按钮
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    background-color: var(--el-bg-color-page);
  }

  &:active {
    transform: scale(0.95);
  }

  &.icon-btn-sm {
    width: 24px;
    height: 24px;
  }

  &.icon-btn-md {
    width: 32px;
    height: 32px;
  }

  &.icon-btn-lg {
    width: 40px;
    height: 40px;
  }
}

// 图标组合
.icon-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.icon-with-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  .icon-text {
    font-family: var(--el-font-family);
    font-size: 14px;
    color: var(--el-text-color-regular);
  }
}

// 状态图标
.status-icon {
  &.status-success {
    color: var(--el-color-success);
  }

  &.status-warning {
    color: var(--el-color-warning);
  }

  &.status-error {
    color: var(--el-color-danger);
  }

  &.status-info {
    color: var(--el-color-info);
  }

  &.status-default {
    color: var(--el-text-color-secondary);
  }
}

// 加载图标动画
.icon-loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 图标淡入动画
.icon-fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

🎛️ 6. 基础规范控件系统

修改目标文件

frontend/src/assets/styles/controls.scss (新建)

具体修改内容

// 按钮系统
.btn {
  font-family: var(--el-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;

  // 按钮尺寸
  &.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 18px;
    min-height: 28px;
  }

  &.btn-md {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 22px;
    min-height: 36px;
  }

  &.btn-lg {
    padding: 12px 20px;
    font-size: 16px;
    line-height: 24px;
    min-height: 44px;
  }

  // 按钮类型
  &.btn-primary {
    background: var(--el-color-primary);
    color: white;

    &:hover {
      background: var(--el-color-primary-dark-2);
    }

    &:active {
      background: var(--el-color-primary-dark-2);
      transform: translateY(1px);
    }

    &:disabled {
      background: var(--el-text-color-disabled);
      cursor: not-allowed;
      transform: none;
    }
  }

  &.btn-secondary {
    background: var(--el-text-color-secondary);
    color: white;

    &:hover {
      background: var(--el-text-color-regular);
    }

    &:active {
      background: var(--el-text-color-regular);
      transform: translateY(1px);
    }

    &:disabled {
      background: var(--el-text-color-disabled);
      cursor: not-allowed;
      transform: none;
    }
  }

  &.btn-outline {
    background: transparent;
    color: var(--el-color-primary);
    border: 1px solid var(--el-color-primary);

    &:hover {
      background: var(--el-color-primary);
      color: white;
    }

    &:active {
      background: var(--el-color-primary-dark-2);
      color: white;
      transform: translateY(1px);
    }

    &:disabled {
      background: transparent;
      color: var(--el-text-color-disabled);
      border-color: var(--el-text-color-disabled);
      cursor: not-allowed;
      transform: none;
    }
  }

  &.btn-ghost {
    background: transparent;
    color: var(--el-text-color-regular);
    border: 1px solid var(--el-border-color);

    &:hover {
      background: var(--el-bg-color-page);
      color: var(--el-text-color-primary);
      border-color: var(--el-color-primary);
    }

    &:active {
      background: var(--el-bg-color-page);
      transform: translateY(1px);
    }

    &:disabled {
      background: transparent;
      color: var(--el-text-color-disabled);
      border-color: var(--el-text-color-disabled);
      cursor: not-allowed;
      transform: none;
    }
  }

  &.btn-text {
    background: transparent;
    color: var(--el-color-primary);
    border: none;
    padding: 4px 8px;

    &:hover {
      background: var(--el-bg-color-page);
    }

    &:active {
      background: var(--el-bg-color-page);
    }

    &:disabled {
      background: transparent;
      color: var(--el-text-color-disabled);
      cursor: not-allowed;
    }
  }
}

// 输入框系统
.input {
  font-family: var(--el-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  padding: 8px 12px;
  background: var(--el-bg-color);
  color: var(--el-text-color-primary);
  transition: all 0.2s ease;
  width: 100%;

  &:focus {
    border-color: var(--el-color-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(20, 31, 51, 0.1);
  }

  &:disabled {
    background: var(--el-bg-color-page);
    color: var(--el-text-color-disabled);
    cursor: not-allowed;
    border-color: var(--el-border-color-light);
  }

  &::placeholder {
    color: var(--el-text-color-placeholder);
  }

  // 输入框尺寸
  &.input-sm {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 18px;
    min-height: 28px;
  }

  &.input-md {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 22px;
    min-height: 36px;
  }

  &.input-lg {
    padding: 12px 16px;
    font-size: 16px;
    line-height: 24px;
    min-height: 44px;
  }

  // 输入框状态
  &.input-error {
    border-color: var(--el-color-danger);

    &:focus {
      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
    }
  }

  &.input-success {
    border-color: var(--el-color-success);

    &:focus {
      box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.1);
    }
  }
}

// 选择器系统
.select {
  @extend .input;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 32px;

  &:focus {
    border-color: var(--el-color-primary);
    box-shadow: 0 0 0 2px rgba(20, 31, 51, 0.1);
  }

  &:disabled {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23cbd5e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  }
}

// 文本域
.textarea {
  @extend .input;
  min-height: 80px;
  resize: vertical;
  font-family: var(--el-font-family);
}

// 复选框和单选框
.checkbox, .radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--el-font-family);
  font-size: 14px;
  color: var(--el-text-color-primary);

  input[type="checkbox"], input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  &:disabled {
    color: var(--el-text-color-disabled);
    cursor: not-allowed;
  }
}

// 开关
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;

  input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--el-border-color);
    transition: 0.2s;
    border-radius: 24px;

    &:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.2s;
      border-radius: 50%;
    }
  }

  input:checked + .slider {
    background-color: var(--el-color-primary);
  }

  input:checked + .slider:before {
    transform: translateX(20px);
  }

  &:disabled .slider {
    background-color: var(--el-text-color-disabled);
    cursor: not-allowed;
  }
}

// 表单组
.form-group {
  margin-bottom: 16px;

  .form-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--el-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--el-text-color-primary);
  }

  .form-help {
    margin-top: 4px;
    font-family: var(--el-font-family);
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }

  .form-error {
    margin-top: 4px;
    font-family: var(--el-font-family);
    font-size: 12px;
    color: var(--el-color-danger);
  }
}

📦 7. 基础规范框系统

修改目标文件

frontend/src/assets/styles/containers.scss (新建)

具体修改内容

// 卡片容器
.card {
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(20, 31, 51, 0.08);
  border: 1px solid var(--el-border-color);
  overflow: hidden;
  transition: box-shadow 0.2s ease;

  &:hover {
    box-shadow: 0 4px 16px rgba(20, 31, 51, 0.12);
  }
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color);
  background: var(--el-bg-color-page);

  .card-title {
    @extend .text-h4;
    margin: 0;
    color: var(--el-text-color-primary);
  }

  .card-subtitle {
    @extend .text-caption;
    margin: 4px 0 0 0;
    color: var(--el-text-color-secondary);
  }

  .card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--el-border-color);
  background: var(--el-bg-color-page);
}

// 面板容器
.panel {
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color);
  overflow: hidden;
}

.panel-header {
  padding: 12px 16px;
  background: var(--el-bg-color-page);
  border-bottom: 1px solid var(--el-border-color);

  .panel-title {
    @extend .text-h4;
    margin: 0;
    color: var(--el-text-color-primary);
  }
}

.panel-body {
  padding: 16px;
}

.panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--el-border-color);
  background: var(--el-bg-color-page);
}

// 表格容器
.table-container {
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(20, 31, 51, 0.08);
  overflow: hidden;
}

.table-header {
  padding: 12px 16px;
  background: var(--el-bg-color-page);
  border-bottom: 1px solid var(--el-border-color);

  .table-title {
    @extend .text-h4;
    margin: 0;
    color: var(--el-text-color-primary);
  }

  .table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }
}

.table-content {
  overflow-x: auto;
}

// 搜索表单容器
.search-form {
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(20, 31, 51, 0.08);
  padding: 20px;
  margin-bottom: 16px;

  .search-form-title {
    @extend .text-h4;
    margin: 0 0 16px 0;
    color: var(--el-text-color-primary);
  }

  .search-form-content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
  }

  .search-form-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
  }
}

// 统计卡片
.stat-card {
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(20, 31, 51, 0.08);
  padding: 20px;
  border: 1px solid var(--el-border-color);
  transition: all 0.2s ease;

  &:hover {
    box-shadow: 0 4px 16px rgba(20, 31, 51, 0.12);
    transform: translateY(-2px);
  }

  .stat-value {
    @extend .text-h2;
    margin: 0;
    color: var(--el-color-primary);
  }

  .stat-label {
    @extend .text-caption;
    margin: 4px 0 0 0;
    color: var(--el-text-color-secondary);
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    color: var(--el-color-primary);
    margin-bottom: 12px;
  }

  .stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;

    &.trend-up {
      color: var(--el-color-success);
    }

    &.trend-down {
      color: var(--el-color-danger);
    }

    &.trend-neutral {
      color: var(--el-text-color-secondary);
    }
  }
}

// 信息面板
.info-panel {
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color);
  padding: 16px;

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--el-border-color-light);

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      @extend .text-body;
      color: var(--el-text-color-secondary);
      font-weight: 500;
    }

    .info-value {
      @extend .text-body;
      color: var(--el-text-color-primary);
      font-weight: 400;
    }
  }
}

// 步骤容器
.steps-container {
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(20, 31, 51, 0.08);
  padding: 24px;

  .steps-header {
    margin-bottom: 24px;

    .steps-title {
      @extend .text-h3;
      margin: 0 0 8px 0;
      color: var(--el-text-color-primary);
    }

    .steps-description {
      @extend .text-body;
      color: var(--el-text-color-secondary);
      margin: 0;
    }
  }

  .steps-content {
    margin-bottom: 24px;
  }

  .steps-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

// 标签页容器
.tabs-container {
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(20, 31, 51, 0.08);
  overflow: hidden;

  .tabs-header {
    background: var(--el-bg-color-page);
    border-bottom: 1px solid var(--el-border-color);
    padding: 0 20px;
  }

  .tabs-content {
    padding: 20px;
  }
}

// 分割线
.divider {
  height: 1px;
  background: var(--el-border-color);
  margin: 16px 0;

  &.divider-vertical {
    width: 1px;
    height: auto;
    margin: 0 16px;
  }

  &.divider-dashed {
    background: none;
    border-top: 1px dashed var(--el-border-color);
  }
}

// 空状态容器
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;

  .empty-icon {
    width: 64px;
    height: 64px;
    color: var(--el-text-color-disabled);
    margin-bottom: 16px;
  }

  .empty-title {
    @extend .text-h4;
    margin: 0 0 8px 0;
    color: var(--el-text-color-secondary);
  }

  .empty-description {
    @extend .text-body;
    color: var(--el-text-color-secondary);
    margin: 0 0 16px 0;
  }

  .empty-actions {
    display: flex;
    gap: 8px;
  }
}

🪟 8. 基础规范弹窗系统

修改目标文件

frontend/src/assets/styles/modals.scss (新建)

具体修改内容

// 弹窗遮罩
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 31, 51, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
  backdrop-filter: blur(2px);
}

// 弹窗内容
.modal-content {
  background: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(20, 31, 51, 0.2);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideIn 0.3s ease;
  position: relative;
}

// 弹窗尺寸变体
.modal-sm { 
  max-width: 400px; 
}

.modal-md { 
  max-width: 500px; 
}

.modal-lg { 
  max-width: 800px; 
}

.modal-xl { 
  max-width: 1000px; 
}

.modal-full {
  max-width: 95vw;
  max-height: 95vh;
  width: 95vw;
  height: 95vh;
}

// 弹窗头部
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--el-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--el-bg-color-page);
  border-radius: 12px 12px 0 0;

  .modal-title {
    @extend .text-h3;
    margin: 0;
    color: var(--el-text-color-primary);
  }

  .modal-subtitle {
    @extend .text-caption;
    margin: 4px 0 0 0;
    color: var(--el-text-color-secondary);
  }

  .modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--el-text-color-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background: var(--el-bg-color);
      color: var(--el-text-color-primary);
    }

    &:active {
      transform: scale(0.95);
    }
  }
}

// 弹窗主体
.modal-body {
  padding: 24px;

  .modal-description {
    @extend .text-body;
    color: var(--el-text-color-secondary);
    margin: 0 0 16px 0;
  }
}

// 弹窗底部
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--el-border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--el-bg-color-page);
  border-radius: 0 0 12px 12px;

  &.modal-footer-center {
    justify-content: center;
  }

  &.modal-footer-space-between {
    justify-content: space-between;
  }
}

// 确认对话框
.confirm-dialog {
  .modal-content {
    max-width: 400px;
  }

  .modal-body {
    text-align: center;
    padding: 32px 24px;

    .confirm-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 16px;
      color: var(--el-color-warning);
    }

    .confirm-title {
      @extend .text-h4;
      margin: 0 0 8px 0;
      color: var(--el-text-color-primary);
    }

    .confirm-message {
      @extend .text-body;
      color: var(--el-text-color-secondary);
      margin: 0;
    }
  }
}

// 表单对话框
.form-dialog {
  .modal-content {
    max-width: 600px;
  }

  .form-dialog-body {
    max-height: 60vh;
    overflow-y: auto;
  }
}

// 详情对话框
.detail-dialog {
  .modal-content {
    max-width: 800px;
  }

  .detail-dialog-body {
    max-height: 70vh;
    overflow-y: auto;
  }
}

// 全屏对话框
.fullscreen-dialog {
  .modal-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  .modal-content {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .modal-body {
    flex: 1;
    overflow-y: auto;
  }
}

// 抽屉
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background: var(--el-bg-color);
  box-shadow: -4px 0 16px rgba(20, 31, 51, 0.1);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease;

  &.drawer-left {
    right: auto;
    left: 0;
    box-shadow: 4px 0 16px rgba(20, 31, 51, 0.1);
    animation: slideInLeft 0.3s ease;
  }

  &.drawer-sm {
    width: 300px;
  }

  &.drawer-lg {
    width: 600px;
  }

  &.drawer-xl {
    width: 800px;
  }

  .drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--el-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--el-bg-color-page);

    .drawer-title {
      @extend .text-h3;
      margin: 0;
      color: var(--el-text-color-primary);
    }

    .drawer-close {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      color: var(--el-text-color-secondary);
      transition: all 0.2s ease;

      &:hover {
        background: var(--el-bg-color);
        color: var(--el-text-color-primary);
      }
    }
  }

  .drawer-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
  }

  .drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--el-border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--el-bg-color-page);
  }
}

// 动画效果
@keyframes fadeIn {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

// 弹窗层级管理
.modal-overlay {
  &.z-index-1000 { z-index: 1000; }
  &.z-index-1001 { z-index: 1001; }
  &.z-index-1002 { z-index: 1002; }
  &.z-index-1003 { z-index: 1003; }
  &.z-index-1004 { z-index: 1004; }
}

// 响应式适配
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    max-width: none;
    margin: 20px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px;
  }

  .drawer {
    width: 100%;
  }

  .drawer-header,
  .drawer-body,
  .drawer-footer {
    padding: 16px;
  }
}

// 加载状态
.modal-loading {
  .modal-content {
    position: relative;
  }

  .modal-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 1;
  }
}

📊 实施计划和时间安排

第一阶段（第1-2周）：基础系统搭建

目标： 建立核心设计系统基础

第1周：

  • 创建颜色变量系统 (variables.scss)
  • 建立文字层级规范 (typography.scss)
  • 更新 Element Plus 主题变量

第2周：

  • 实现栅格系统 (grid-system.scss)
  • 创建基础工具类
  • 测试基础系统兼容性

第二阶段（第3-4周）：组件系统

目标： 建立核心组件样式规范

第3周：

  • 导航系统重构 (navigation.scss)
  • 图标系统建立 (icons.scss)
  • 更新 Header.vue 和 Sidebar.vue

第4周：

  • 控件系统完善 (controls.scss)
  • 按钮、输入框、选择器样式
  • 组件交互测试

第三阶段（第5-6周）：容器和弹窗

目标： 完善容器和弹窗系统

第5周：

  • 框系统实现 (containers.scss)
  • 卡片、面板、表格容器
  • 搜索表单容器

第6周：

  • 弹窗系统建立 (modals.scss)
  • 弹窗尺寸、层级、动画
  • Element Plus主题定制

第四阶段（第7-8周）：页面应用

目标： 将设计系统应用到业务页面

第7周：

  • 订单管理页面应用
  • 出库管理页面应用
  • 发票管理页面应用

第8周：

  • 经销商管理页面应用
  • 产品管理页面应用
  • 其他业务页面应用

第五阶段（第9-10周）：优化和测试

目标： 完善和优化整体系统

第9周：

  • 响应式适配优化
  • 交互体验优化
  • 性能优化

第10周：

  • 全面测试
  • 文档完善
  • 部署和验收

🎯 关键里程碑

  • 第2周末：基础系统完成
  • 第4周末：组件系统完成
  • 第6周末：容器弹窗系统完成
  • 第8周末：页面应用完成
  • 第10周末：项目交付

📁 文件结构

frontend/src/assets/styles/
├── variables.scss          # 颜色和主题变量
├── typography.scss         # 文字层级系统
├── grid-system.scss        # 栅格系统
├── navigation.scss         # 导航系统
├── icons.scss             # 图标系统
├── controls.scss          # 控件系统
├── containers.scss        # 容器系统
├── modals.scss           # 弹窗系统
├── element-theme.scss    # Element Plus 主题定制
└── index.scss           # 样式入口文件

🎨 核心设计规范

  • 主色调： #141F33 (RGB: 20, 31, 51)
  • 字体： PingFang SC
  • 圆角： 6px (基础), 8px (容器), 12px (弹窗)
  • 阴影： 基于主色调的 rgba 阴影系统
  • 间距： 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px

🔧 质量检查点

  • 每个阶段结束进行代码审查
  • 每周进行设计规范符合度检查
  • 关键节点进行用户体验测试

📋 验收标准

  1. 颜色系统：所有颜色值与应用场景符合设计规范
  2. 文字系统：字体、字号、行高、字重完全对齐
  3. 栅格系统：响应式布局在不同设备上表现一致
  4. 导航系统：交互样式和层级关系符合规范
  5. 图标系统：尺寸规范和风格统一
  6. 控件系统：按钮、输入框等组件样式及交互一致
  7. 框系统：卡片、面板等容器组件样式规范
  8. 弹窗系统：弹窗尺寸、层级、动画、交互逻辑符合规范

本计划基于GCCPOP设计规范制定，旨在提供一致、现代、专业的用户体验。