Add前端样式模板

+// Header 导航规范
+.header {
+  height: var(--header-height);
+  background: var(--el-bg-color);
+  border-bottom: 1px solid var(--el-border-color);
+  box-shadow: var(--el-box-shadow);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--el-spacing-large);
+  z-index: 1000;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--el-spacing-medium);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--el-spacing-base);
+}
+
+// 折叠按钮
+.collapse-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--el-spacing-small);
+  border-radius: var(--el-border-radius-small);
+  color: var(--el-text-color-regular);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  
+  &:hover {
+    background: var(--el-bg-color-page);
+    color: var(--el-text-color-primary);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+// 头部按钮
+.header-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--el-spacing-small);
+  border-radius: var(--el-border-radius-small);
+  color: var(--el-text-color-regular);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  
+  &:hover {
+    background: var(--el-bg-color-page);
+    color: var(--el-text-color-primary);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+// 用户信息
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: var(--el-spacing-small);
+  padding: var(--el-spacing-small) var(--el-spacing-base);
+  border-radius: var(--el-border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  
+  &:hover {
+    background: var(--el-bg-color-page);
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.username {
+  font-family: var(--el-font-family);
+  font-size: var(--el-font-size-base);
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
+}
+
+.dropdown-icon {
+  color: var(--el-text-color-secondary);
+  transition: color 0.2s ease;
+  font-size: var(--el-font-size-small);
+}
+
+// Sidebar 导航规范 - 深色主题
+.sidebar {
+  width: var(--sidebar-width);
+  height: 100vh;
+  background: #1a1a1a; // 深色背景
+  border-right: 1px solid #333;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
+  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;
+  justify-content: center;
+  padding: 0 var(--el-spacing-large);
+  border-bottom: 1px solid #333;
+  background: #1a1a1a;
+}
+
+.logo-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--el-spacing-base);
+  text-decoration: none;
+  color: white;
+  transition: opacity 0.2s ease;
+  width: 100%;
+  
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.logo-img {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--el-border-radius-small);
+}
+
+.logo-text {
+  font-family: var(--el-font-family);
+  font-size: 20px;
+  font-weight: 700;
+  color: white;
+  white-space: nowrap;
+  letter-spacing: 1px;
+}
+
+.sidebar-scrollbar {
+  flex: 1;
+  overflow-y: auto;
+}
+
+// 菜单项样式 - 深色主题
+.el-menu {
+  border-right: none;
+  background: #1a1a1a;
+}
+
+.el-menu-item {
+  font-family: var(--el-font-family);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: #ffffff;
+  height: 48px;
+  line-height: 48px;
+  margin: 2px 8px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  
+  &.is-active {
+    color: #ffffff;
+    background-color: #333333;
+    font-weight: 500;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 3px;
+      height: 20px;
+      background-color: #007bff;
+      border-radius: 0 2px 2px 0;
+    }
+  }
+  
+  &:hover {
+    background-color: #333333;
+    color: #ffffff;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+  
+  .el-icon {
+    margin-right: 12px;
+    font-size: 16px;
+    color: inherit;
+  }
+  
+  span {
+    flex: 1;
+  }
+}
+
+.el-submenu__title {
+  font-family: var(--el-font-family);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: #ffffff;
+  height: 48px;
+  line-height: 48px;
+  margin: 2px 8px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  
+  &:hover {
+    background-color: #333333;
+    color: #ffffff;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+  
+  .el-icon {
+    margin-right: 12px;
+    font-size: 16px;
+    color: inherit;
+  }
+  
+  span {
+    flex: 1;
+  }
+}
+
+// 子菜单 - 深色主题
+.el-submenu .el-menu-item {
+  margin: 1px 16px;
+  padding-left: 24px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 13px;
+  color: #cccccc;
+  
+  &.is-active {
+    color: #ffffff;
+    background-color: #333333;
+    
+    &::before {
+      left: 16px;
+    }
+  }
+  
+  &:hover {
+    background-color: #333333;
+    color: #ffffff;
+  }
+}
+
+// 弹出菜单系统 (Flyout Menu) - 深色主题
+.sidebar-flyout {
+  position: fixed;
+  top: var(--header-height);
+  left: var(--sidebar-collapsed-width);
+  width: 200px;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-left: none;
+  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  border-radius: 0 6px 6px 0;
+  overflow: hidden;
+  animation: slideInRight 0.2s ease;
+}
+
+.flyout-menu {
+  padding: 8px 0;
+  
+  .flyout-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    color: #ffffff;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    font-family: var(--el-font-family);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    cursor: pointer;
+    
+    &:hover {
+      background: #333333;
+      color: #ffffff;
+    }
+    
+    &.is-active {
+      background: #333333;
+      color: #ffffff;
+      font-weight: 500;
+      position: relative;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 20px;
+        background-color: #007bff;
+        border-radius: 0 2px 2px 0;
+      }
+    }
+    
+    .flyout-icon {
+      margin-right: 12px;
+      font-size: 16px;
+      width: 16px;
+      text-align: center;
+      color: inherit;
+    }
+    
+    .flyout-text {
+      flex: 1;
+    }
+    
+    .flyout-arrow {
+      font-size: 12px;
+      color: #cccccc;
+      transition: transform 0.2s ease;
+      
+      &.expanded {
+        transform: rotate(90deg);
+      }
+    }
+  }
+  
+  .flyout-submenu {
+    background: #222222;
+    border-top: 1px solid #333;
+    
+    .flyout-subitem {
+      display: flex;
+      align-items: center;
+      padding: 8px 24px;
+      color: #cccccc;
+      text-decoration: none;
+      transition: all 0.2s ease;
+      font-family: var(--el-font-family);
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 20px;
+      cursor: pointer;
+      
+      &:hover {
+        background: #333333;
+        color: #ffffff;
+      }
+      
+      &.is-active {
+        background: #333333;
+        color: #ffffff;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+// 折叠状态下的侧边栏样式
+.sidebar.collapsed {
+  .sidebar-logo {
+    .logo-text {
+      display: none;
+    }
+  }
+  
+  .el-menu-item,
+  .el-submenu__title {
+    padding: 0;
+    text-align: center;
+    justify-content: center;
+    
+    .el-icon {
+      margin-right: 0;
+      font-size: 18px;
+    }
+    
+    span {
+      display: none;
+    }
+  }
+  
+  .el-submenu {
+    .el-menu {
+      display: none;
+    }
+  }
+}
+
+// 弹出菜单动画
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+
+// 弹出菜单遮罩
+.flyout-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 999;
+}
+
+// 面包屑导航
+.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 var(--el-spacing-large);
+}
+
+.el-breadcrumb {
+  font-family: var(--el-font-family);
+  font-size: var(--el-font-size-base);
+}
+
+.el-breadcrumb__item {
+  .el-breadcrumb__inner {
+    color: var(--el-text-color-regular);
+    font-weight: 400;
+    transition: color 0.2s ease;
+    
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+  
+  &:last-child .el-breadcrumb__inner {
+    color: var(--el-text-color-primary);
+    font-weight: 500;
+  }
+}
+
+// 响应式导航
+@media (max-width: 768px) {
+  .header {
+    padding: 0 var(--el-spacing-base);
+  }
+  
+  .header-left {
+    gap: var(--el-spacing-small);
+  }
+  
+  .header-right {
+    gap: var(--el-spacing-small);
+  }
+  
+  .username {
+    display: none;
+  }
+  
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1001;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    
+    &.mobile-open {
+      transform: translateX(0);
+    }
+  }
+  
+  .sidebar-logo {
+    padding: 0 var(--el-spacing-base);
+  }
+}
+
+// 导航动画
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+// 导航状态指示器
+.nav-indicator {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--el-color-primary);
+  border-radius: 0 2px 2px 0;
+  transition: all 0.2s ease;
+}
+
+// 导航徽章
+.nav-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  background: var(--el-color-danger);
+  color: white;
+  font-size: 10px;
+  font-weight: 500;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+// 导航搜索
+.nav-search {
+  padding: var(--el-spacing-base) var(--el-spacing-large);
+  border-bottom: 1px solid var(--el-border-color);
+  
+  .search-input {
+    width: 100%;
+    padding: var(--el-spacing-small) var(--el-spacing-base);
+    border: 1px solid var(--el-border-color);
+    border-radius: var(--el-border-radius-base);
+    background: var(--el-bg-color);
+    color: var(--el-text-color-primary);
+    font-family: var(--el-font-family);
+    font-size: var(--el-font-size-small);
+    transition: all 0.2s ease;
+    
+    &:focus {
+      border-color: var(--el-color-primary);
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(20, 31, 51, 0.1);
+    }
+    
+    &::placeholder {
+      color: var(--el-text-color-placeholder);
+    }
+  }
+}
+
+// 导航工具提示
+.nav-tooltip {
+  .el-tooltip__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+// 导航加载状态
+.nav-loading {
+  position: relative;
+  
+  &::after {
+    content: '';
+    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;
+    z-index: 1;
+  }
+}
+
+// 导航主题切换
+.nav-theme-toggle {
+  .theme-icon {
+    transition: transform 0.3s ease;
+  }
+  
+  &:hover .theme-icon {
+    transform: rotate(180deg);
+  }
+}

+// 字体系统
+$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;
+}
+
+// 全局文字样式重置
+* {
+  font-family: $font-family-primary;
+}
+
+// 标题样式
+h1, .h1 {
+  @extend .text-h1;
+}
+
+h2, .h2 {
+  @extend .text-h2;
+}
+
+h3, .h3 {
+  @extend .text-h3;
+}
+
+h4, .h4 {
+  @extend .text-h4;
+}
+
+// 段落和文本样式
+p, .p {
+  @extend .text-body;
+  margin: 0 0 16px 0;
+}
+
+// 小文本样式
+small, .small {
+  @extend .text-caption;
+}
+
+// 标签样式
+label, .label {
+  @extend .text-caption;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 6px;
+}
+
+// 按钮文字样式
+button, .btn {
+  font-family: $font-family-primary;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+// 输入框文字样式
+input, textarea, select {
+  font-family: $font-family-primary;
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0;
+}
+
+// 表格文字样式
+table {
+  font-family: $font-family-primary;
+  
+  th {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: 0;
+  }
+  
+  td {
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: 0;
+  }
+}

+# GCCPOP设计规范 0228
+
+## 📋 项目概述
+
+本目录包含基于GCCPOP设计规范的前端样式规范对齐详细修改计划，旨在将前端项目在8个基础规范维度与设计模板对齐。
+
+## 📁 目录结构
+
+```
+GCCPOP设计规范 0228/
+├── README.md                                    # 项目说明文档
+├── 前端样式规范对齐详细修改计划.md                # 详细修改计划
+├── html/
+│   └── 0 打开这个.html                          # 设计规范模板文件
+└── 实施指南/
+    ├── 01-基础规范颜色/
+    ├── 02-基础规范文字/
+    ├── 03-基础规范栅格/
+    ├── 04-基础规范导航/
+    ├── 05-基础规范图标/
+    ├── 06-基础规范控件/
+    ├── 07-基础规范框/
+    └── 08-基础规范弹窗/
+```
+
+## 🎯 8个基础规范维度
+
+1. **基础规范颜色**（色值、配色方案、应用场景）
+2. **基础规范文字**（字体、字号、行高、字重、文本样式）
+3. **基础规范栅格**（栅格系统参数、布局规则、响应式断点）
+4. **基础规范导航**（导航结构、交互样式、层级关系）
+5. **基础规范图标**（图标库、尺寸规范、风格统一、交互状态）
+6. **基础规范控件**（按钮、输入框、选择器等组件样式及交互）
+7. **基础规范框**（卡片、面板等容器组件的样式规范）
+8. **基础规范弹窗**（弹窗尺寸、层级、动画、交互逻辑）
+
+## 🎨 核心设计规范
+
+### 颜色系统
+- **主色调：** `#141F33` (RGB: 20, 31, 51)
+- **功能色：** 成功 `#52C41A`、警告 `#FAAD14`、危险 `#FF4D4F`、信息 `#13C2C2`
+
+### 字体系统
+- **字体族：** PingFang SC
+- **主标题：** 24px, 600, 40px行高
+- **正文：** 14px, 400, 22px行高
+
+### 布局系统
+- **圆角：** 6px (基础), 8px (容器), 12px (弹窗)
+- **间距：** 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px
+- **阴影：** 基于主色调的 rgba 阴影系统
+
+## 📊 实施计划
+
+### 第一阶段（第1-2周）：基础系统搭建
+- 创建颜色变量系统
+- 建立文字层级规范
+- 实现栅格系统
+
+### 第二阶段（第3-4周）：组件系统
+- 导航系统重构
+- 图标系统建立
+- 控件系统完善
+
+### 第三阶段（第5-6周）：容器和弹窗
+- 框系统实现
+- 弹窗系统建立
+- Element Plus主题定制
+
+### 第四阶段（第7-8周）：页面应用
+- 订单管理页面应用
+- 出库管理页面应用
+- 发票管理页面应用
+- 其他业务页面应用
+
+### 第五阶段（第9-10周）：优化和测试
+- 响应式适配
+- 交互优化
+- 性能优化
+- 全面测试
+
+## 🎯 关键里程碑
+
+- 第2周末：基础系统完成
+- 第4周末：组件系统完成
+- 第6周末：容器弹窗系统完成
+- 第8周末：页面应用完成
+- 第10周末：项目交付
+
+## 📋 验收标准
+
+1. **颜色系统**：所有颜色值与应用场景符合设计规范
+2. **文字系统**：字体、字号、行高、字重完全对齐
+3. **栅格系统**：响应式布局在不同设备上表现一致
+4. **导航系统**：交互样式和层级关系符合规范
+5. **图标系统**：尺寸规范和风格统一
+6. **控件系统**：按钮、输入框等组件样式及交互一致
+7. **框系统**：卡片、面板等容器组件样式规范
+8. **弹窗系统**：弹窗尺寸、层级、动画、交互逻辑符合规范
+
+## 🔧 使用指南
+
+1. **查看详细计划**：阅读 `前端样式规范对齐详细修改计划.md` 了解完整的实施细节
+2. **参考设计模板**：查看 `html/0 打开这个.html` 了解原始设计规范
+3. **按阶段实施**：按照实施计划逐步完成各个阶段的开发工作
+4. **质量检查**：每个阶段结束后进行代码审查和设计规范符合度检查
+
+## 📞 联系方式
+
+如有疑问或需要技术支持，请联系项目团队。
+
+---
+
+*本规范基于GCCPOP设计规范制定，旨在提供一致、现代、专业的用户体验。*

+<meta http-equiv="refresh" content="0;url=../index.html#3">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#8">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#7">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#5">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#6">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#4">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#2">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#1">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=../index.html#0">
\ No newline at end of file

+<meta http-equiv="refresh" content="0;url=index.html#p">
\ No newline at end of file

+# 前端样式规范对齐详细修改计划
+
+## 📋 项目概述
+
+基于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`
+
+### 具体修改内容
+
+```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` (新建)
+
+### 具体修改内容
+
+```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` (新建)
+
+### 具体修改内容
+
+```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` (新建)
+
+### 具体修改内容
+
+```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` (新建)
+
+### 具体修改内容
+
+```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` (新建)
+
+### 具体修改内容
+
+```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` (新建)
+
+### 具体修改内容
+
+```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` (新建)
+
+### 具体修改内容
+
+```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设计规范制定，旨在提供一致、现代、专业的用户体验。*