前端ui调整提交

.cursorrules

@@ -0,0 +1,1364 @@
+# Art Design Pro UI 规范 - Plus UI 重构版
+
+## 设计理念
+基于 Art Design Pro 的设计语言，追求现代化、精致、用户友好的界面体验。注重细节、动效和用户交互的流畅性。
+
+## 1. 颜色系统
+
+### 主色调 (Primary Colors)
+```css
+--art-primary: 93, 135, 255;        /* 主品牌色 - 蓝色 */
+--art-secondary: 73, 190, 255;      /* 辅助色 - 天蓝色 */
+--art-success: 19, 222, 185;        /* 成功色 - 绿色 */
+--art-warning: 255, 174, 31;        /* 警告色 - 橙色 */
+--art-error: 250, 137, 107;         /* 错误色 - 红色 */
+--art-info: 83, 155, 255;           /* 信息色 - 蓝色 */
+--art-danger: 255, 77, 79;          /* 危险色 - 红色 */
+```
+
+### 背景色系统 (Background Colors)
+```css
+/* 浅色主题 */
+--art-bg-color: #fafbfc;            /* 页面底色 */
+--art-main-bg-color: #ffffff;       /* 主要内容背景 */
+--art-bg-primary: 236, 242, 255;    /* 主色背景 */
+--art-bg-secondary: 232, 247, 255;  /* 辅助背景 */
+--art-bg-success: 230, 255, 250;    /* 成功背景 */
+--art-bg-warning: 254, 245, 229;    /* 警告背景 */
+--art-bg-error: 253, 237, 232;      /* 错误背景 */
+
+/* 暗色主题 */
+html.dark {
+  --art-bg-color: #070707;          /* 页面底色 */
+  --art-main-bg-color: #161618;     /* 主要内容背景 */
+}
+```
+
+### 灰度色系 (Gray Scale)
+```css
+--art-gray-100: #f9f9f9;
+--art-gray-200: #f1f1f4;
+--art-gray-300: #dbdfe9;
+--art-gray-400: #c4cada;
+--art-gray-500: #99a1b7;
+--art-gray-600: #78829d;
+--art-gray-700: #4b5675;
+--art-gray-800: #252f4a;
+--art-gray-900: #071437;
+```
+
+## 2. 字体系统
+
+### 字体家族
+```css
+font-family: 'DMSans', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+```
+
+### 字体大小
+- 超大标题：24px (1.5rem)
+- 大标题：20px (1.25rem)
+- 中标题：18px (1.125rem)
+- 小标题：16px (1rem)
+- 正文：14px (0.875rem)
+- 小字：12px (0.75rem)
+- 辅助文字：10px (0.625rem)
+
+### 字体权重
+- Light: 300
+- Normal: 400
+- Medium: 500
+- Semibold: 600
+- Bold: 700
+
+## 3. 间距系统
+
+### 间距单位 (基于 4px 网格)
+```css
+--space-xs: 4px;
+--space-sm: 8px;
+--space-md: 12px;
+--space-lg: 16px;
+--space-xl: 20px;
+--space-2xl: 24px;
+--space-3xl: 32px;
+--space-4xl: 48px;
+--space-5xl: 64px;
+```
+
+### 内边距规范
+- 卡片内边距：20px
+- 按钮内边距：8px 16px
+- 输入框内边距：10px 12px
+- 表格单元格：12px
+- 弹窗内边距：25px 20px
+
+### 外边距规范
+- 组件间距：20px
+- 段落间距：16px
+- 按钮间距：8px
+- 表单项间距：12px
+
+## 4. 圆角系统
+
+### 圆角规范
+```css
+--border-radius-xs: 4px;
+--border-radius-sm: 6px;
+--border-radius-md: 8px;
+--border-radius-lg: 10px;
+--border-radius-xl: 12px;
+--border-radius-2xl: 16px;
+--border-radius-full: 50%;
+```
+
+### 应用场景
+- 按钮：6px
+- 输入框：8px
+- 卡片：10px
+- 弹窗：10px
+- 图片：6px
+- 头像：50%
+
+## 5. 阴影系统
+
+### 阴影等级
+```css
+--shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
+--shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
+--shadow-md: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
+--shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
+--shadow-card: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
+```
+
+### 应用场景
+- 卡片阴影：shadow-card
+- 悬浮效果：shadow-sm
+- 弹窗阴影：shadow-lg
+- 按钮悬浮：shadow-xs
+
+## 6. 边框系统
+
+### 边框颜色
+```css
+--border-color: #eaebf1;
+--border-dashed-color: #dbdfe9;
+--border-card-color: #f1f1f4;
+```
+
+### 边框宽度
+- 默认：1px
+- 粗边框：2px
+- 表格边框：1px
+
+## 7. 动画系统
+
+### 缓动曲线
+```css
+--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+--ease-out: cubic-bezier(0, 0, 0.2, 1);
+--ease-in: cubic-bezier(0.4, 0, 1, 1);
+```
+
+### 动画时长
+- 快速：0.15s
+- 标准：0.3s
+- 慢速：0.5s
+
+### 常用动画
+- 淡入淡出：opacity transition
+- 悬浮效果：transform scale
+- 按钮点击：transform scale(0.95)
+- 页面切换：fade + slide
+
+## 8. 组件规范
+
+### 按钮 (Button)
+#### 基础规范
+- **尺寸系统**：Large(40px) / Default(32px) / Small(28px)
+- **圆角规范**：6px(默认) / 8px(大) / 4px(小) / 50%(圆形)
+- **字体权重**：500 (Medium)
+- **过渡动画**：cubic-bezier(0.4, 0, 0.2, 1) 0.3s
+- **字母间距**：0.02em
+
+#### 按钮类型 - 全部采用轮廓式设计
+- **Primary按钮**：轮廓式主色设计，主色边框和文字，5%透明度主色背景
+- **Success按钮**：轮廓式成功色设计，成功色边框和文字，5%透明度成功色背景
+- **Warning按钮**：轮廓式警告色设计，警告色边框和文字，5%透明度警告色背景
+- **Danger按钮**：轮廓式危险色设计，危险色边框和文字，5%透明度危险色背景
+- **Info按钮**：轮廓式信息色设计，信息色边框和文字，5%透明度信息色背景
+- **Default按钮**：白色背景，灰色边框，灰色文字
+
+#### 变体样式
+- **Plain按钮**：与标准按钮完全相同的轮廓式设计，无差异化
+- **Outline按钮**：轮廓式设计（现已作为全部按钮的标准样式）
+- **Text按钮**：无背景边框，彩色文字，悬浮10%透明背景
+- **Link按钮**：下划线样式，主色文字，无背景
+
+#### 交互效果 - 轮廓式按钮专用
+- **悬浮状态**：上移1px + 背景透明度变为10% + 边框透明度变为80% + 彩色阴影
+- **点击状态**：98%缩放 + 0.1s快速过渡 + 背景透明度变为15%
+- **禁用状态**：50%透明度，禁用所有交互和变换
+- **加载状态**：70%透明度 + 遮罩层效果
+
+**详细规范**：
+- **默认状态**：5%透明度彩色背景 + 100%彩色边框
+- **悬浮状态**：10%透明度彩色背景 + 80%透明度彩色边框 + `0 4px 12px rgba(color, 0.2)` 阴影
+- **点击状态**：15%透明度彩色背景 + 边框保持80%透明度
+
+#### 特殊状态
+- **圆形按钮**：宽高相等，50%圆角，主要用于图标按钮
+- **按钮组**：相邻按钮圆角归零，-1px右边距无缝连接
+- **阴影规范**：轮廓式按钮悬浮阴影统一为 `0 4px 12px rgba(color, 0.2)`
+
+#### 🎨 轮廓式按钮设计系统（2024年版本）
+**设计理念**：全面采用轮廓式（Outline）按钮设计，提供更加优雅、现代和一致的用户界面体验。
+
+**核心优势**：
+- ✅ **视觉轻量化**：减少视觉重量，避免界面过于厚重
+- ✅ **层次分明**：通过透明度变化清晰表达交互状态
+- ✅ **品牌一致性**：所有彩色按钮都保持品牌色彩的纯净表达
+- ✅ **可访问性优化**：高对比度的边框和文字确保良好的可读性
+
+**技术实现**：
+```scss
+// 轮廓式按钮核心模式（适用于所有按钮，包括MessageBox）
+.el-button--[type] {
+  border: 1px solid rgb(var(--art-[type])) !important;
+  color: rgb(var(--art-[type])) !important;
+  background: rgba(var(--art-[type]), 0.05) !important;
+
+  &:hover {
+    background: rgba(var(--art-[type]), 0.1) !important;
+    border-color: rgba(var(--art-[type]), 0.8) !important;
+    box-shadow: 0 4px 12px rgba(var(--art-[type]), 0.2) !important;
+  }
+
+  &:active {
+    background: rgba(var(--art-[type]), 0.15) !important;
+  }
+}
+
+// MessageBox 专用样式确保一致性
+.el-message-box .el-message-box__btns .el-button {
+  // 继承全局轮廓式按钮样式，使用!important确保优先级
+}
+```
+
+**适用范围**：
+- ✅ 全局所有 primary、success、warning、danger、info 按钮
+- ✅ 页面表单、表格操作按钮
+- ✅ 确认弹窗（MessageBox）中的所有按钮
+- ✅ 普通弹窗（Dialog）中的所有按钮
+- ✅ 导航和功能按钮
+
+**实施位置**：
+- 样式文件：`src/assets/styles/art-element-ui.scss`
+- 优先级：使用 `!important` 确保全局覆盖
+- 兼容性：与现有 Element Plus 组件完全兼容
+
+### 输入框 (Input)
+- 边框：1px solid --border-color
+- 圆角：8px
+- 内边距：10px 12px
+- 聚焦状态：主色边框
+- 错误状态：红色边框
+
+### 卡片 (Card)
+- 背景：白色
+- 圆角：10px
+- 阴影：shadow-card
+- 内边距：20px
+- 边框：可选 1px --border-card-color
+
+### 左侧菜单 (Sidebar Menu)
+#### 基础规范
+- **菜单宽度**: 250px(展开) / 54px(收起)
+- **背景色**: 浅色主题白色 / 暗色主题深色
+- **圆角**: 4px (菜单项内边距)
+- **间距**: 外边距8px，内边距2px
+- **过渡动画**: 0.3s ease 流畅过渡
+
+#### 菜单项状态
+- **默认状态**:
+  - 文字：`--art-text-gray-700`
+  - 图标：`--art-text-gray-600`
+  - 背景：透明
+- **悬浮状态**:
+  - 文字：`--art-text-gray-800`
+  - 图标：主题色 `rgb(var(--art-primary))`
+  - 背景：8%主题色透明 `rgba(var(--art-primary), 0.08)`
+- **选中状态**:
+  - 文字：主题色 `rgb(var(--art-primary))`
+  - 图标：主题色 `rgb(var(--art-primary))`
+  - 背景：10%主题色透明 `rgba(var(--art-primary), 0.1)`
+
+#### 嵌套子菜单
+- **背景透明化**: 子菜单项背景透明
+- **悬浮效果**: 6%主题色透明背景
+- **选中效果**: 10%主题色透明背景
+- **层级缩进**: 标准Element Plus缩进
+- **圆角统一**: 4px内边距圆角
+
+#### 暗色主题适配
+- **悬浮背景**: 15%主题色透明 `rgba(var(--art-primary), 0.15)`
+- **选中背景**: 20%主题色透明 `rgba(var(--art-primary), 0.2)`
+- **子菜单悬浮**: 12%主题色透明背景
+- **颜色继承**: 与浅色主题文字图标颜色保持一致
+
+#### 收起状态
+- **容器宽度**: 54px固定宽度
+- **菜单项高度**: 48px，确保统一高度
+- **图标规范**: 16x16px，美观合理
+- **完美居中**: 使用Flexbox确保水平垂直居中
+- **一级菜单特殊处理**: 使用`.el-menu > .el-menu-item`选择器确保优先级
+- **tooltip支持**: 兼容`.el-tooltip`和`.el-menu-tooltip__trigger`元素
+- **统一对齐**: 所有菜单项（一级、多级）完全一致的居中效果
+- **提示框**: Element Plus tooltip显示完整菜单名
+- **展开动画**: 0.28s流畅过渡动画
+
+### 表格 (Table)
+- 表头背景：--gray-100
+- 斑马纹：--gray-50
+- 边框：1px --border-color
+- 悬浮行：--gray-100 背景
+
+### 弹窗 (Modal/Dialog)
+- 背景：白色
+- 圆角：10px
+- 阴影：shadow-lg
+- 动画：scale + fade
+- 遮罩：rgba(0,0,0,0.5)
+
+#### 确认弹窗按钮样式规范
+**重要原则**：确认弹窗（MessageBox.confirm）中的按钮与全局轮廓式按钮规范保持完全一致，确保整个系统的设计统一性。
+
+**设计理念**：确认弹窗中的按钮采用轮廓式设计，与页面中的其他按钮保持一致的视觉风格，通过统一的轮廓式设计语言提供现代化、轻量化的用户体验。
+
+- **确定按钮（Primary）**：使用轮廓式主色设计
+  - 背景：5%透明度主色 `rgba(var(--art-primary), 0.05)`
+  - 边框：1px 主色边框 `rgb(var(--art-primary))`
+  - 文字颜色：主色 `rgb(var(--art-primary))`
+  - 悬浮效果：
+    - 背景：10%透明度主色 `rgba(var(--art-primary), 0.1)`
+    - 边框：80%透明度主色 `rgba(var(--art-primary), 0.8)`
+    - 阴影：`0 4px 12px rgba(var(--art-primary), 0.2)`
+    - 上移1px效果保持
+  - 点击效果：
+    - 背景：15%透明度主色 `rgba(var(--art-primary), 0.15)`
+    - 98%缩放效果保持
+
+- **其他类型按钮**：使用对应色彩的轮廓式设计
+  - **Success按钮**：轮廓式成功色设计，成功色边框和文字，5%透明度背景
+  - **Warning按钮**：轮廓式警告色设计，警告色边框和文字，5%透明度背景
+  - **Danger按钮**：轮廓式危险色设计，危险色边框和文字，5%透明度背景
+  - **Info按钮**：轮廓式信息色设计，信息色边框和文字，5%透明度背景
+  - 交互效果：与Primary按钮保持一致的轮廓式悬浮和点击效果
+
+- **取消按钮**：使用默认按钮样式（保持轻量化）
+  - 背景：主背景色 `var(--art-main-bg-color)`
+  - 边框：1px 灰色边框 `var(--art-border-color)`
+  - 文字颜色：`var(--art-text-gray-700)`
+  - 阴影：`0 1px 3px rgba(0, 0, 0, 0.1)`
+
+- **统一规范**：
+  - 圆角：8px
+  - 高度：32px
+  - 内边距：0 16px
+  - 字体权重：500
+  - 过渡动画：`all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`
+  - 字母间距：0.02em
+
+**设计统一性说明**：
+- **全局按钮统一**：所有按钮（页面按钮和确认弹窗按钮）都采用轮廓式设计
+- **视觉一致性**：确保整个系统的按钮风格保持完全一致
+- **现代化体验**：通过统一的轮廓式设计提供现代化、轻量化的用户体验
+- **交互规范**：所有按钮都遵循相同的悬浮、点击、透明度变化规范
+
+**实现位置**：
+- 样式文件：`src/assets/styles/art-element-ui.scss`
+- 选择器：`.el-message-box .el-message-box__btns .el-button`
+- 优先级：使用 `!important` 确保样式优先级
+- 适用场景：confirm、alert、prompt等所有MessageBox弹窗
+- 设计原则：与全局轮廓式按钮规范保持完全一致
+
+#### MessageBox 按钮布局规范
+
+**按钮顺序规范**：确认弹窗（MessageBox）中的按钮顺序遵循国内用户习惯，确定按钮在左侧，取消按钮在右侧。
+
+**布局实现**：
+- **按钮容器**：使用 `flex-direction: row-reverse` 实现按钮顺序调整
+- **确定按钮**：`order: 2` 确保排在左侧（用户优先操作位置）
+- **取消按钮**：`order: 1` 排在右侧（次要操作位置）
+- **按钮间距**：使用 `gap: 12px` 确保按钮之间的合理间距
+
+**设计理念**：
+- **符合习惯**：遵循国内用户的操作习惯，确定操作在左，取消操作在右
+- **视觉引导**：确定按钮的主色调设计在左侧能够更好地引导用户操作
+- **一致性保证**：所有确认弹窗的按钮顺序保持完全一致
+
+**技术实现**：
+```scss
+// MessageBox 按钮顺序调整
+.el-message-box .el-message-box__btns {
+  display: flex !important;
+  flex-direction: row-reverse !important;
+  justify-content: flex-start !important;
+  gap: 12px !important;
+}
+
+.el-message-box .el-message-box__btns .el-button.el-button--primary {
+  order: 2 !important; // 确定按钮排在前面（左侧）
+}
+
+.el-message-box .el-message-box__btns .el-button.el-button--default,
+.el-message-box .el-message-box__btns .el-button:not([class*="el-button--"]) {
+  order: 1 !important; // 取消按钮排在后面（右侧）
+}
+```
+
+**应用场景**：
+- ✅ confirm 确认弹窗：确定在左，取消在右
+- ✅ alert 提示弹窗：确定按钮居左显示
+- ✅ prompt 输入弹窗：确定在左，取消在右
+- ✅ 所有自定义 MessageBox 弹窗
+
+**用户体验考虑**：
+- **操作优先级**：确定操作作为主要操作放在左侧，符合从左到右的阅读习惯
+- **降低误操作**：确定按钮的突出位置减少用户误点取消的情况
+- **一致性体验**：整个系统的确认弹窗都遵循相同的按钮顺序
+
+#### MessageBox 按钮统一性原则
+
+**核心要求**：MessageBox（确认弹窗）中的所有按钮必须与页面中的其他按钮保持完全一致的轮廓式设计。
+
+**统一性体现**：
+- ✅ **视觉风格**：相同的边框、背景、文字颜色规范
+- ✅ **交互效果**：相同的悬浮、点击、透明度变化效果
+- ✅ **尺寸规格**：相同的高度、圆角、内边距、字体权重
+- ✅ **颜色系统**：使用相同的色彩变量和透明度规范
+
+**实施保证**：
+```scss
+// 确保MessageBox按钮与全局按钮完全一致
+.el-message-box .el-message-box__btns .el-button {
+  // 所有样式属性都使用!important确保优先级
+  // 严格遵循全局轮廓式按钮规范
+}
+```
+
+**验收标准**：
+- MessageBox中的按钮与页面按钮在视觉上无任何差异
+- 所有交互状态的表现完全一致
+- 不同类型的按钮（primary、success、warning等）都遵循统一规范
+
+## 9. 布局规范
+
+### 栅格系统
+- 容器最大宽度：1200px
+- 栅格列数：24列
+- 间距：20px
+
+### 页面布局
+- 顶栏高度：60px
+- 侧边栏宽度：240px (展开) / 80px (收起)
+- 内容区域：自适应
+- 底部高度：60px
+
+### 响应式断点
+```scss
+$device-phone: 500px;      // 手机
+$device-ipad: 800px;       // 平板
+$device-ipad-pro: 1180px;  // 平板 Pro
+$device-notebook: 1600px;  // 笔记本
+```
+
+## 10. 主题系统
+
+### 主题切换
+- 支持浅色/暗色主题
+- 使用 CSS 变量实现
+- 平滑过渡动画
+- 本地存储偏好
+
+### 颜色模式
+- 浅色模式：明亮、清晰
+- 暗色模式：柔和、护眼
+- 跟随系统：自动切换
+
+## 11. 交互规范
+
+### 悬浮效果 (Hover)
+- 按钮：背景变浅 + 轻微放大
+- 卡片：阴影加深
+- 图标：颜色变化 + 动画
+- 链接：颜色变化
+
+### 点击效果 (Active)
+- 按钮：轻微缩小
+- 卡片：阴影减弱
+- 输入框：聚焦边框
+
+### 加载状态
+- 骨架屏：灰色占位
+- 进度条：主色进度
+- 加载动画：旋转图标
+
+## 12. 图标系统
+
+### 图标规范
+- 尺寸：16px, 20px, 24px
+- 线条粗细：1.5px
+- 风格：线性图标
+- 颜色：继承文字色或主题色
+
+### 图标用法
+- 按钮图标：16px
+- 菜单图标：20px
+- 页面图标：24px
+- 装饰图标：根据需要
+
+## 13. 移动端适配
+
+### 移动端规范
+- 最小点击区域：44px
+- 字体适当放大
+- 间距适当增加
+- 简化交互方式
+- 优化触摸体验
+
+### 响应式布局
+- 移动端优先
+- 灵活的栅格系统
+- 可收起的侧边栏
+- 简化的导航方式
+
+## 14. 可访问性 (Accessibility)
+
+### 颜色对比度
+- 文字对比度：4.5:1 以上
+- 大文字对比度：3:1 以上
+- 状态指示：不仅依赖颜色
+
+### 交互可访问性
+- 键盘导航支持
+- 屏幕阅读器支持
+- 焦点指示清晰
+- 错误信息明确
+
+## 15. 实施原则
+
+### 开发规范
+1. 优先使用 CSS 变量
+2. 统一使用 SCSS 预处理器
+3. 组件化开发
+4. 响应式设计
+5. 性能优化
+
+### 维护规范
+1. 定期更新设计规范
+2. 保持组件库的一致性
+3. 及时修复视觉问题
+4. 收集用户反馈
+
+### 质量保证
+1. 多设备测试
+2. 多浏览器兼容
+3. 性能监控
+4. 用户体验评估
+
+---
+
+## 注意事项
+
+1. **一致性优先**：确保整个系统的视觉一致性
+2. **用户体验**：以用户体验为核心进行设计
+3. **性能考虑**：优化动画和样式性能
+4. **可维护性**：编写可维护的样式代码
+5. **扩展性**：为未来的功能扩展预留空间
+
+## 🚀 重大更新记录
+
+### 2024年 - 全局轮廓式按钮系统
+**更新时间**：2024年
+
+**核心变更**：将整个系统的按钮设计从填充式改为轮廓式设计
+
+**影响范围**：
+- ✅ 全局所有 primary、success、warning、danger、info 按钮
+- ✅ 页面表单和表格中的操作按钮
+- ✅ 确认弹窗按钮（包括 confirm、alert、prompt）
+- ✅ 导航和功能按钮
+
+**设计理念**：
+- 提供更加轻量化、现代化的视觉体验
+- 保持品牌色彩的纯净表达
+- 通过透明度变化清晰表达交互状态
+- 提升界面的整体协调性和专业感
+
+**技术特点**：
+- 使用 `!important` 确保全局覆盖优先级
+- 与 Element Plus 组件完全兼容
+- 支持所有交互状态（hover、active、disabled、loading）
+- 统一的阴影和透明度规范
+
+**后续维护**：
+- 新增按钮类型应遵循轮廓式设计原则
+- 保持透明度和阴影规范的一致性
+- 确保在所有主题模式下的兼容性
+
+### 2024年 - 确认弹窗按钮统一化设计
+**更新时间**：2024年
+
+**核心变更**：将确认弹窗（MessageBox）中的按钮与全局轮廓式按钮规范保持完全一致
+
+**影响范围**：
+- ✅ confirm 确认弹窗按钮
+- ✅ alert 提示弹窗按钮
+- ✅ prompt 输入弹窗按钮
+- ✅ 所有 MessageBox 类型的弹窗按钮
+
+**设计理念**：
+- **全局统一**：所有按钮都使用轮廓式设计，确保系统的视觉一致性
+- **现代化体验**：通过统一的轮廓式设计提供现代化、轻量化的用户体验
+- **交互一致性**：所有按钮的悬浮、点击效果保持完全一致
+- **维护简便**：统一的设计规范降低维护成本
+
+**技术特点**：
+- 确认按钮：轮廓式主色设计 + 主色文字
+- 其他类型按钮：对应色彩的轮廓式设计
+- 取消按钮：保持轻量化的默认样式
+- 最高优先级：使用 `!important` 确保样式覆盖
+
+**实施位置**：
+- 样式文件：`src/assets/styles/art-element-ui.scss`
+- 选择器：`.el-message-box .el-message-box__btns .el-button`
+
+### 2024年 - MessageBox 按钮位置优化
+**更新时间**：2024年
+
+**核心变更**：调整确认弹窗（MessageBox）中的按钮顺序，确定按钮在左侧，取消按钮在右侧，符合国内用户操作习惯
+
+**影响范围**：
+- ✅ confirm 确认弹窗的按钮布局
+- ✅ alert 提示弹窗的按钮布局
+- ✅ prompt 输入弹窗的按钮布局
+- ✅ 所有自定义 MessageBox 弹窗的按钮布局
+
+**设计理念**：
+- **用户习惯优先**：遵循国内用户的操作习惯，主要操作（确定）在左侧
+- **视觉引导优化**：确定按钮的主色调设计在左侧能够更好地引导用户操作
+- **降低误操作**：确定按钮的突出位置减少用户误点取消的情况
+- **一致性保证**：整个系统的确认弹窗按钮顺序保持完全一致
+
+**技术实现**：
+- 使用 CSS Flexbox 的 `flex-direction: row-reverse` 调整按钮顺序
+- 通过 `order` 属性精确控制按钮位置
+- 使用 `gap` 属性确保按钮间距的一致性
+- 保持与轮廓式按钮样式的完美兼容
+
+**用户体验提升**：
+- 符合从左到右的阅读和操作习惯
+- 减少用户在确认操作时的认知负担
+- 提升整体操作的直观性和效率
+
+**实施位置**：
+- 文件：`src/assets/styles/art-element-ui.scss`
+- 选择器：`.el-message-box .el-message-box__btns`
+- 配合：`src/plugins/modal.ts` 中的按钮类名配置
+
+## 16. 项目架构规范
+
+### 目录结构标准
+```
+src/
+├── api/                    # API接口定义
+│   ├── [module]/          # 模块化API
+│   │   ├── index.ts       # API方法定义
+│   │   └── types.ts       # 类型定义
+│   ├── types.ts           # 通用类型
+│   └── login.ts           # 登录相关API
+├── assets/                # 静态资源
+│   ├── styles/           # 样式文件
+│   │   ├── art-variables.scss    # 设计变量
+│   │   ├── art-element-ui.scss   # 组件样式覆盖
+│   │   ├── art-dark.scss         # 暗色主题
+│   │   └── index.scss            # 样式入口
+│   └── images/           # 图片资源
+├── components/            # 通用组件
+│   └── [ComponentName]/  # 组件目录（PascalCase）
+│       ├── index.vue     # 组件主文件
+│       └── types.ts      # 组件类型定义（可选）
+├── views/                # 页面视图
+│   └── [module]/         # 模块化页面
+│       └── [feature]/    # 功能页面
+│           ├── index.vue # 主页面文件
+│           └── components/ # 页面专用组件（可选）
+├── layout/               # 布局组件
+├── router/               # 路由配置
+├── store/                # 状态管理
+├── utils/                # 工具函数
+├── plugins/              # 插件配置
+├── types/                # 全局类型定义
+└── main.ts               # 应用入口
+```
+
+### 文件命名规范
+- **文件夹**：使用 kebab-case（小写+连字符）
+- **Vue组件文件**：使用 PascalCase 或 kebab-case
+- **TypeScript文件**：使用 camelCase
+- **样式文件**：使用 kebab-case
+- **常量文件**：使用 UPPER_SNAKE_CASE
+
+### 模块组织原则
+1. **按功能模块划分**：每个业务模块独立组织
+2. **API与页面对应**：api目录结构与views保持一致
+3. **类型定义集中**：每个模块都有对应的types.ts
+4. **组件复用优先**：通用组件放在components目录
+
+## 17. Vue组件开发规范
+
+### 组件结构标准
+```vue
+<template>
+  <!-- 使用语义化的HTML结构 -->
+  <div class="component-container">
+    <!-- 组件内容 -->
+  </div>
+</template>
+
+<script setup lang="ts" name="ComponentName">
+// 1. 引入依赖
+import { ref, reactive, computed, onMounted } from 'vue';
+import type { ComponentProps, ComponentEmits } from './types';
+
+// 2. 定义Props和Emits
+const props = defineProps<ComponentProps>();
+const emits = defineEmits<ComponentEmits>();
+
+// 3. 响应式数据
+const loading = ref(false);
+const formData = reactive({});
+
+// 4. 计算属性
+const computedValue = computed(() => {
+  return /* 计算逻辑 */;
+});
+
+// 5. 方法定义
+const handleClick = () => {
+  // 方法实现
+};
+
+// 6. 生命周期
+onMounted(() => {
+  // 组件挂载后的逻辑
+});
+</script>
+
+<style lang="scss" scoped>
+.component-container {
+  // 样式实现
+}
+</style>
+```
+
+### TypeScript类型定义规范
+```typescript
+// types.ts
+export interface ComponentProps {
+  title: string;
+  visible: boolean;
+  data?: any[];
+}
+
+export interface ComponentEmits {
+  (e: 'update:visible', value: boolean): void;
+  (e: 'confirm', data: any): void;
+}
+
+// 响应式数据类型
+export interface ComponentState {
+  loading: boolean;
+  formData: FormData;
+}
+```
+
+### 组件通信规范
+1. **Props向下传递**：父组件向子组件传递数据
+2. **Emits向上传递**：子组件向父组件传递事件
+3. **v-model双向绑定**：表单组件使用v-model
+4. **Provide/Inject**：跨级组件通信
+5. **Pinia状态管理**：全局状态共享
+
+## 18. 页面开发规范
+
+### 列表页面标准模板
+```vue
+<template>
+  <div class="p-2 page-container">
+    <!-- 搜索区域 -->
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
+            <!-- 搜索表单项 -->
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <!-- 表格区域 -->
+    <el-card shadow="never" class="button-card table-card">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <!-- 操作按钮 -->
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <!-- 数据表格 -->
+      <el-table v-loading="loading" border :data="dataList" :height="tableHeight">
+        <el-table-column type="selection" width="55" align="center" />
+        <!-- 数据列 -->
+        <el-table-column label="操作" align="center" width="160">
+          <template #default="scope">
+            <!-- 操作按钮 -->
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页组件 -->
+      <pagination v-show="total > 0" :total="total"
+                  v-model:page="queryParams.pageNum"
+                  v-model:limit="queryParams.pageSize"
+                  @pagination="getList" />
+    </el-card>
+
+    <!-- 弹窗组件 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
+      <!-- 弹窗内容 -->
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+```
+
+### 页面样式规范
+```scss
+.page-container {
+  height: calc(100vh - 85px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 8px 8px 0 8px !important;
+}
+
+.table-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.table-card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 20px 0 20px;
+}
+```
+
+### 数据处理规范
+```typescript
+// 页面数据结构
+const data = reactive<PageData<FormType, QueryType>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    // 查询参数
+  },
+  rules: {
+    // 验证规则
+  }
+});
+
+// 表格高度计算
+const tableHeight = computed(() => {
+  const searchHeight = showSearch.value ? 120 : 0;
+  const toolbarHeight = 50;
+  const paginationHeight = 60;
+  const otherHeight = 90;
+  return windowHeight.value - searchHeight - toolbarHeight - paginationHeight - otherHeight;
+});
+```
+
+## 19. API开发规范
+
+### API接口定义标准
+```typescript
+// api/[module]/index.ts
+import request from '@/utils/request';
+import type { AxiosPromise } from 'axios';
+import type { DataVO, DataForm, DataQuery } from './types';
+
+/**
+ * 查询数据列表
+ * @param query 查询参数
+ */
+export const listData = (query?: DataQuery): AxiosPromise<DataVO[]> => {
+  return request({
+    url: '/api/data/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询数据详细信息
+ * @param id 数据ID
+ */
+export const getData = (id: string | number): AxiosPromise<DataVO> => {
+  return request({
+    url: `/api/data/${id}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增数据
+ * @param data 数据信息
+ */
+export const addData = (data: DataForm) => {
+  return request({
+    url: '/api/data',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改数据
+ * @param data 数据信息
+ */
+export const updateData = (data: DataForm) => {
+  return request({
+    url: '/api/data',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除数据
+ * @param id 数据ID或ID数组
+ */
+export const delData = (id: string | number | Array<string | number>) => {
+  return request({
+    url: `/api/data/${id}`,
+    method: 'delete'
+  });
+};
+```
+
+### API类型定义规范
+```typescript
+// api/[module]/types.ts
+export interface DataVO {
+  /** 主键ID */
+  id: string | number;
+  /** 数据名称 */
+  name: string;
+  /** 数据状态 */
+  status: string;
+  /** 创建时间 */
+  createTime?: string;
+  /** 更新时间 */
+  updateTime?: string;
+}
+
+export interface DataForm extends BaseEntity {
+  /** 主键ID */
+  id?: string | number;
+  /** 数据名称 */
+  name?: string;
+  /** 数据状态 */
+  status?: string;
+}
+
+export interface DataQuery extends PageQuery {
+  /** 数据名称 */
+  name?: string;
+  /** 数据状态 */
+  status?: string;
+  /** 日期范围参数 */
+  params?: any;
+}
+```
+
+### 错误处理规范
+```typescript
+// 统一错误处理已在request.ts中实现
+// 业务层只需要使用try-catch处理特殊情况
+
+const handleSubmit = async () => {
+  try {
+    await addData(formData);
+    proxy?.$modal.msgSuccess('操作成功');
+    getList();
+  } catch (error) {
+    // 特殊错误处理（可选）
+    console.error('操作失败:', error);
+  }
+};
+```
+
+## 20. 工具组件使用规范
+
+### RightToolbar 工具栏
+```vue
+<!-- 标准用法 -->
+<right-toolbar
+  v-model:showSearch="showSearch"
+  :columns="columns"
+  @queryTable="getList">
+</right-toolbar>
+
+<!-- 列显隐控制 -->
+<script setup>
+const columns = ref([
+  { key: 'name', label: '名称', visible: true },
+  { key: 'status', label: '状态', visible: true },
+  { key: 'createTime', label: '创建时间', visible: false }
+]);
+</script>
+```
+
+### Pagination 分页组件
+```vue
+<pagination
+  v-show="total > 0"
+  :total="total"
+  v-model:page="queryParams.pageNum"
+  v-model:limit="queryParams.pageSize"
+  @pagination="getList" />
+```
+
+### DictTag 字典标签
+```vue
+<dict-tag
+  :options="dict_status"
+  :value="row.status" />
+
+<script setup>
+const { dict_status } = toRefs<any>(proxy?.useDict('dict_status'));
+</script>
+```
+
+### ImageUpload 图片上传
+```vue
+<image-upload v-model="form.image" />
+
+<!-- 图片预览 -->
+<image-preview
+  :src="row.image"
+  :width="50"
+  :height="50" />
+```
+
+## 21. 样式开发规范
+
+### SCSS变量使用
+```scss
+// 使用设计变量
+.component {
+  background-color: var(--art-main-bg-color);
+  border: 1px solid var(--art-border-color);
+  border-radius: var(--border-radius-md);
+  padding: var(--space-lg);
+  color: var(--art-text-gray-700);
+}
+
+// 响应式设计
+@media screen and (max-width: $device-phone) {
+  .component {
+    padding: var(--space-sm);
+  }
+}
+```
+
+### 暗色主题适配
+```scss
+// 组件支持暗色主题
+.component {
+  background-color: var(--art-main-bg-color);
+
+  // 暗色主题下自动适配
+  html.dark & {
+    border-color: var(--art-border-color);
+    color: var(--art-text-gray-700);
+  }
+}
+```
+
+### CSS类命名规范
+- **组件容器**：`.component-name-container`
+- **元素**：`.component-name__element`
+- **修饰符**：`.component-name--modifier`
+- **状态**：`.is-active`, `.is-disabled`, `.is-loading`
+- **工具类**：`.text-center`, `.mb-4`, `.p-2`
+
+## 22. 权限控制规范
+
+### 页面权限
+```vue
+<template>
+  <!-- 按钮权限控制 -->
+  <el-button
+    type="primary"
+    @click="handleAdd"
+    v-hasPermi="['system:user:add']">
+    新增
+  </el-button>
+
+  <!-- 路由权限在router中配置 -->
+</template>
+```
+
+### 路由权限配置
+```typescript
+{
+  path: '/user',
+  component: Layout,
+  meta: {
+    title: '用户管理',
+    icon: 'user',
+    roles: ['admin', 'user'], // 角色权限
+    permissions: ['system:user:view'] // 功能权限
+  }
+}
+```
+
+## 23. 性能优化规范
+
+### 组件懒加载
+```typescript
+// 路由懒加载
+const UserManagement = () => import('@/views/system/user/index.vue');
+
+// 组件异步加载
+const LazyComponent = defineAsyncComponent(() => import('./LazyComponent.vue'));
+```
+
+### 列表优化
+```vue
+<!-- 虚拟滚动（大数据量） -->
+<el-table-v2
+  :columns="columns"
+  :data="data"
+  :width="800"
+  :height="600"
+  fixed />
+
+<!-- 分页加载 -->
+<pagination
+  :total="total"
+  v-model:page="queryParams.pageNum"
+  v-model:limit="queryParams.pageSize" />
+```
+
+### 图片优化
+```vue
+<!-- 图片懒加载 -->
+<el-image
+  :src="imageUrl"
+  lazy
+  loading="lazy"
+  :preview-src-list="[imageUrl]" />
+
+<!-- 占位图 -->
+<el-image
+  :src="imageUrl"
+  fit="cover"
+  loading="lazy">
+  <template #placeholder>
+    <div class="image-slot">加载中...</div>
+  </template>
+  <template #error>
+    <div class="image-slot">加载失败</div>
+  </template>
+</el-image>
+```
+
+## 24. 国际化规范
+
+### 多语言配置
+```typescript
+// lang/zh_CN.ts
+export default {
+  common: {
+    add: '新增',
+    edit: '修改',
+    delete: '删除',
+    search: '搜索',
+    reset: '重置'
+  },
+  user: {
+    username: '用户名',
+    email: '邮箱',
+    status: '状态'
+  }
+};
+```
+
+### 使用方式
+```vue
+<template>
+  <el-button>{{ $t('common.add') }}</el-button>
+  <el-form-item :label="$t('user.username')">
+    <el-input v-model="form.username" />
+  </el-form-item>
+</template>
+
+<script setup>
+const { t } = useI18n();
+const buttonText = computed(() => t('common.add'));
+</script>
+```
+
+## 25. 测试规范
+
+### 单元测试
+```typescript
+// 组件测试
+import { mount } from '@vue/test-utils';
+import UserForm from '@/components/UserForm/index.vue';
+
+describe('UserForm', () => {
+  test('should render correctly', () => {
+    const wrapper = mount(UserForm, {
+      props: {
+        visible: true,
+        data: {}
+      }
+    });
+    expect(wrapper.find('.user-form').exists()).toBe(true);
+  });
+});
+```
+
+### E2E测试
+```typescript
+// 页面流程测试
+describe('User Management', () => {
+  test('should add user successfully', async () => {
+    await page.goto('/user');
+    await page.click('[data-test="add-button"]');
+    await page.fill('[data-test="username"]', 'testuser');
+    await page.click('[data-test="submit-button"]');
+    await expect(page.locator('.el-message')).toContainText('操作成功');
+  });
+});
+```
+
+## 26. 构建和部署规范
+
+### 环境配置
+```typescript
+// .env.development
+VITE_APP_ENV = 'development'
+VITE_APP_BASE_API = '/dev-api'
+VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
+
+// .env.production
+VITE_APP_ENV = 'production'
+VITE_APP_BASE_API = '/prod-api'
+VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
+```
+
+### 构建优化
+```typescript
+// vite.config.ts
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'js/[name]-[hash].js',
+        entryFileNames: 'js/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]',
+        manualChunks: {
+          'element-plus': ['element-plus'],
+          'vue-vendor': ['vue', 'vue-router', 'pinia']
+        }
+      }
+    }
+  }
+});
+```
+
+## 27. 代码质量保证
+
+### ESLint配置规范
+```typescript
+// eslint.config.ts
+export default [
+  {
+    rules: {
+      // Vue相关规则
+      'vue/no-unused-vars': 'error',
+      'vue/require-default-prop': 'off',
+      'vue/multi-word-component-names': 'off',
+
+      // TypeScript相关规则
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': 'error',
+
+      // 通用规则
+      'no-console': 'warn',
+      'no-debugger': 'error'
+    }
+  }
+];
+```
+
+### 代码提交规范
+```bash
+# 提交信息格式
+git commit -m "feat(user): 新增用户管理功能"
+
+# 提交类型
+feat: 新功能
+fix: 修复bug
+docs: 文档更新
+style: 代码格式调整
+refactor: 重构代码
+test: 测试相关
+chore: 构建工具或辅助工具的变动
+```
+
+### 代码审查清单
+- [ ] 代码符合项目规范
+- [ ] 类型定义完整
+- [ ] 组件可复用性良好
+- [ ] 性能优化到位
+- [ ] 无安全隐患
+- [ ] 测试覆盖充分
+- [ ] 文档更新及时
+
+---
+
+此规范基于 Art Design Pro 的优秀设计理念，结合现代 Web 设计趋势和 plus-ui 项目的实际实现，为 Plus UI 提供统一的设计语言和完整的开发标准。通过严格遵循此规范，可以确保项目的高质量、可维护性和团队协作效率。

UI重构完成报告.md

@@ -0,0 +1,251 @@
+# Plus UI Art Design Pro 风格重构完成报告
+
+## 概述
+
+基于 Art Design Pro 的优秀设计理念，我们成功完成了 Plus UI 的整体 UI 风格重构。新的设计系统注重现代化、精致和用户友好的界面体验，提供了统一的设计语言和丰富的交互细节。
+
+## 重构内容
+
+### 1. 设计规范文档
+
+✅ **`.cursorrules`** - 完整的UI设计规范文档
+
+- 详细的颜色系统
+- 字体、间距、圆角系统
+- 组件设计规范
+- 响应式设计标准
+- 交互规范和动画指南
+
+### 2. 新增样式系统文件
+
+#### 核心样式文件
+
+✅ **`art-variables.scss`** - Art Design Pro 变量系统
+
+- 完整的CSS变量定义
+- 浅色/暗色主题支持
+- 响应式断点定义
+- 工具类样式
+
+✅ **`art-global.scss`** - 全局样式
+
+- 字体系统和排版
+- 基础样式重置
+- 工具类（间距、圆角、阴影等）
+- 响应式工具类
+- 自定义组件样式
+
+✅ **`art-element-ui.scss`** - Element Plus 样式覆盖
+
+- 现代化的组件外观
+- 统一的圆角和阴影
+- 优雅的悬浮效果
+- 流畅的动画过渡
+- 移动端适配
+
+✅ **`art-dark.scss`** - 暗色主题
+
+- 完整的暗色主题适配
+- 智能的颜色反转
+- 统一的暗色调色板
+- 优化的对比度
+
+### 3. 更新现有文件
+
+✅ **`index.scss`** - 主样式文件
+
+- 引入新的Art Design Pro样式系统
+- 保持向后兼容性
+
+✅ **`variables.module.scss`** - 变量兼容性
+
+- 更新为使用新的变量系统
+- 保持现有组件的兼容性
+
+## 核心特性
+
+### 🎨 颜色系统
+
+- **主色调**: 优雅的蓝色渐变 `rgb(93, 135, 255)` → `rgb(73, 190, 255)`
+- **语义颜色**: 成功、警告、错误、信息色
+- **灰度系统**: 10级灰度色阶，从`gray-100`到`gray-900`
+- **背景系统**: 层次分明的背景色体系
+
+### 🔧 技术特点
+
+- **CSS变量驱动**: 响应式主题切换
+- **模块化设计**: 独立的样式模块
+- **向后兼容**: 不破坏现有功能
+- **性能优化**: 高效的样式结构
+
+### 📱 响应式设计
+
+- **移动端优先**: 完善的移动端适配
+- **多断点支持**: 手机、平板、桌面端
+- **灵活布局**: 自适应的栅格系统
+
+### 🌙 主题系统
+
+- **浅色主题**: 明亮清晰的视觉体验
+- **暗色主题**: 柔和护眼的夜间模式
+- **平滑切换**: 优雅的主题过渡动画
+
+## 组件优化
+
+### 按钮组件
+
+- 现代化的圆角设计（6px）
+- 优雅的渐变背景
+- 悬浮时的微动效果
+- 点击时的缩放反馈
+
+### 卡片组件
+
+- 统一的圆角（10px）
+- 精致的阴影效果
+- 悬浮时的提升动画
+- 清晰的层次结构
+
+### 表单组件
+
+- 圆润的输入框设计
+- 清晰的焦点状态
+- 智能的错误提示
+- 流畅的交互反馈
+
+### 表格组件
+
+- 现代化的表头设计
+- 柔和的斑马纹效果
+- 悬浮行高亮
+- 清晰的边框处理
+
+## 使用指南
+
+### 1. 颜色使用
+
+```scss
+// 主色调
+background: rgb(var(--art-primary));
+color: rgb(var(--art-secondary));
+
+// 语义颜色
+.success-text {
+  color: rgb(var(--art-success));
+}
+.warning-bg {
+  background: rgb(var(--art-bg-warning));
+}
+```
+
+### 2. 间距系统
+
+```scss
+// 使用CSS变量
+padding: var(--space-lg);
+margin: var(--space-xl);
+
+// 或使用工具类
+<div class="p-4 m-3">内容</div>
+```
+
+### 3. 圆角系统
+
+```scss
+// CSS变量
+border-radius: var(--border-radius-lg);
+
+// 工具类
+<div class="rounded-lg">圆角卡片</div>
+```
+
+### 4. 阴影系统
+
+```scss
+// CSS变量
+box-shadow: var(--art-box-shadow-sm);
+
+// 工具类
+<div class="shadow-card">卡片阴影</div>
+```
+
+### 5. 自定义组件
+
+```html
+<!-- Art设计风格的卡片 -->
+<div class="art-card">
+  <div class="art-card-header">标题</div>
+  <div class="art-card-body">内容</div>
+  <div class="art-card-footer">底部</div>
+</div>
+
+<!-- Art设计风格的按钮 -->
+<button class="art-btn art-btn-primary">主要按钮</button>
+<button class="art-btn art-btn-secondary">次要按钮</button>
+```
+
+## 主题切换
+
+### JavaScript控制
+
+```javascript
+// 切换到暗色主题
+document.documentElement.classList.add('dark');
+
+// 切换到浅色主题
+document.documentElement.classList.remove('dark');
+
+// 跟随系统主题
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+if (prefersDark.matches) {
+  document.documentElement.classList.add('dark');
+}
+```
+
+## 迁移建议
+
+### 对于新组件
+
+- 直接使用新的变量系统
+- 采用Art Design Pro设计规范
+- 使用提供的工具类
+
+### 对于现有组件
+
+- 逐步迁移到新的样式系统
+- 优先更新核心组件
+- 保持功能的稳定性
+
+## 性能优化
+
+1. **CSS变量缓存**: 浏览器原生支持，性能优异
+2. **按需加载**: 模块化的样式结构
+3. **压缩优化**: 生产环境自动压缩
+4. **兼容性**: 支持现代浏览器
+
+## 浏览器支持
+
+- ✅ Chrome 88+
+- ✅ Firefox 85+
+- ✅ Safari 14+
+- ✅ Edge 88+
+- ⚠️ IE 不支持（CSS变量限制）
+
+## 下一步计划
+
+1. **组件库完善**: 持续优化组件设计
+2. **动画系统**: 加入更多流畅的动画效果
+3. **主题定制**: 支持自定义主题色
+4. **文档完善**: 提供更详细的使用示例
+
+## 总结
+
+本次UI重构成功引入了Art Design Pro的优秀设计理念，为Plus UI带来了：
+
+- 🎯 **统一的设计语言**: 确保整个系统的视觉一致性
+- 🚀 **现代化的用户体验**: 流畅的交互和优雅的视觉效果
+- 🛠️ **完善的开发体验**: 丰富的工具类和组件系统
+- 🌈 **灵活的主题系统**: 支持多种主题模式
+- 📱 **全面的响应式支持**: 适配各种设备尺寸
+
+新的UI系统不仅提升了视觉体验，也为后续的开发工作提供了强有力的设计基础。所有后续开发的界面都将遵循`.cursorrules`中定义的设计规范，确保整个系统UI风格的一致性。

src/assets/styles/art-dark.scss

@@ -0,0 +1,449 @@
+/*
+* Art Design Pro 暗色主题 - Plus UI 版本
+* 单页面移除深色主题 document.getElementsByTagName("html")[0].removeAttribute('class')
+*/
+@use './art-variables.scss' as *;
+
+$font-color: rgba(#ffffff, 0.7);
+$background-color: #070707;
+
+/* 覆盖element-plus默认深色背景色 */
+html.dark {
+  // ✅ element-plus
+  --el-text-color-regular: $font-color;
+
+  // ✅ 富文本编辑器（如果使用）
+  // 工具栏背景颜色
+  --w-e-toolbar-bg-color: var(--art-main-bg-color);
+  // 输入区域背景颜色
+  --w-e-textarea-bg-color: var(--art-main-bg-color);
+  // 工具栏文字颜色
+  --w-e-toolbar-color: var(--art-text-gray-600);
+  // 选中菜单颜色
+  --w-e-toolbar-active-bg-color: rgba(var(--art-gray-100-rgb), 0.8);
+  // 弹窗边框颜色
+  --w-e-toolbar-border-color: var(--art-border-dashed-color);
+  // 分割线颜色
+  --w-e-textarea-border-color: var(--art-border-dashed-color);
+  // 链接输入框边框颜色
+  --w-e-modal-button-border-color: var(--art-border-dashed-color);
+  // 表格头颜色
+  --w-e-textarea-slight-bg-color: var(--art-color);
+  // 按钮背景颜色
+  --w-e-modal-button-bg-color: var(--art-color);
+}
+
+.dark {
+  color: $font-color !important;
+  background: $background-color !important;
+
+  /* 全局文字颜色 */
+  body {
+    color: $font-color;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: var(--art-text-gray-900) !important;
+    }
+  }
+
+  // 图片降低亮度
+  img {
+    filter: brightness(0.92) saturate(1.25);
+  }
+
+  // ✅ 左侧菜单样式
+  .menu-left,
+  .dual-menu {
+    .el-menu-dark {
+      // 选中颜色
+      .el-menu-item.is-active {
+        background: transparent;
+      }
+
+      .el-sub-menu__title {
+        .el-icon {
+          color: var(--art-gray-800) !important;
+        }
+      }
+
+      // 鼠标移入背景色
+      .el-sub-menu__title:hover,
+      .el-menu-item:not(.is-active):hover {
+        background: rgba(var(--art-gray-200-rgb), 0.6) !important;
+      }
+
+      [level-item='2'].is-active:not(.el-menu--collapse) {
+        &.is-active {
+          &:before {
+            margin-left: -10px !important;
+          }
+        }
+      }
+
+      .el-menu:not(.el-menu--collapse) {
+        // 选中颜色
+        .el-menu-item.is-active {
+          &:before {
+            content: '';
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            background: var(--main-color) !important;
+            transition: all 0.2s;
+            margin-left: -18px;
+          }
+        }
+      }
+    }
+  }
+
+  // ✅ 富文本编辑器
+  // 分隔线
+  .w-e-bar-divider {
+    background-color: var(--art-gray-300) !important;
+  }
+
+  // 下拉选择框
+  .w-e-select-list {
+    background-color: var(--art-main-bg-color) !important;
+    border: 1px solid var(--art-border-dashed-color) !important;
+  }
+
+  /* 弹出框 */
+  .w-e-drop-panel {
+    border: 1px solid var(--art-border-dashed-color) !important;
+  }
+
+  /* 工具栏菜单 */
+  .w-e-bar-item-group .w-e-bar-item-menus-container {
+    background-color: var(--art-main-bg-color) !important;
+    border: 1px solid var(--art-border-dashed-color) !important;
+  }
+
+  /* 下拉选择框 hover 样式调整 */
+  .w-e-select-list ul li:hover,
+  /* 工具栏 hover 按钮背景颜色 */
+  .w-e-bar-item button:hover {
+    background-color: var(--art-color) !important;
+  }
+
+  /* 代码块 */
+  .w-e-text-container [data-slate-editor] pre > code {
+    background-color: var(--art-gray-100) !important;
+    border: 1px solid var(--art-border-dashed-color) !important;
+    text-shadow: none !important;
+  }
+
+  /* 引用 */
+  .w-e-text-container [data-slate-editor] blockquote {
+    border-left: 4px solid var(--art-gray-200) !important;
+    background-color: var(--art-color);
+  }
+
+  .editor-wrapper {
+    .w-e-text-container [data-slate-editor] .table-container th:last-of-type {
+      border-right: 1px solid var(--art-gray-200) !important;
+    }
+
+    .w-e-modal {
+      background-color: var(--art-color);
+    }
+  }
+
+  // SVG 图标颜色适配
+  .svg-icon,
+  svg {
+    fill: var(--art-text-gray-600) !important;
+  }
+
+  // 表格暗色主题优化
+  .el-table {
+    background-color: var(--art-main-bg-color) !important;
+
+    .el-table__header {
+      th {
+        background-color: var(--art-gray-200) !important;
+        color: var(--art-text-gray-700) !important;
+      }
+    }
+
+    .el-table__body {
+      tr {
+        background-color: var(--art-main-bg-color) !important;
+
+        &:hover {
+          background-color: rgba(var(--art-gray-200-rgb), 0.5) !important;
+        }
+
+        &.el-table__row--striped {
+          background-color: rgba(var(--art-gray-100-rgb), 0.3) !important;
+        }
+      }
+    }
+  }
+
+  // 卡片暗色主题
+  .el-card,
+  .art-card {
+    background-color: var(--art-main-bg-color) !important;
+    border-color: var(--art-border-color) !important;
+
+    .el-card__header,
+    .art-card-header {
+      background-color: var(--art-gray-200) !important;
+      border-color: var(--art-border-color) !important;
+      color: var(--art-text-gray-800) !important;
+    }
+
+    .art-card-footer {
+      background-color: var(--art-gray-200) !important;
+      border-color: var(--art-border-color) !important;
+    }
+  }
+
+  // 输入框暗色主题
+  .el-input {
+    .el-input__wrapper {
+      background-color: var(--art-main-bg-color) !important;
+      border-color: var(--art-border-color) !important;
+
+      .el-input__inner {
+        color: var(--art-text-gray-800) !important;
+        background-color: transparent !important;
+
+        &::placeholder {
+          color: var(--art-text-gray-500) !important;
+        }
+      }
+    }
+  }
+
+  // 选择器暗色主题
+  .el-select {
+    .el-input__wrapper {
+      background-color: var(--art-main-bg-color) !important;
+    }
+  }
+
+  .el-select-dropdown {
+    background-color: var(--art-main-bg-color) !important;
+    border-color: var(--art-border-color) !important;
+
+    .el-select-dropdown__item {
+      color: var(--art-text-gray-700) !important;
+
+      &:hover {
+        background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
+      }
+
+      &.is-selected {
+        color: var(--art-text-gray-900) !important;
+        background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
+      }
+    }
+  }
+
+  // 弹窗暗色主题
+  .el-dialog,
+  .el-message-box {
+    background-color: var(--art-main-bg-color) !important;
+    border-color: var(--art-border-color) !important;
+
+    .el-dialog__header {
+      border-color: var(--art-border-color) !important;
+    }
+
+    .el-dialog__title,
+    .el-message-box__title {
+      color: var(--art-text-gray-900) !important;
+    }
+
+    .el-dialog__body,
+    .el-message-box__content {
+      color: var(--art-text-gray-700) !important;
+    }
+  }
+
+  // 下拉菜单暗色主题
+  .el-dropdown-menu {
+    background-color: var(--art-main-bg-color) !important;
+    border-color: var(--art-border-color) !important;
+
+    .el-dropdown-menu__item {
+      color: var(--art-text-gray-700) !important;
+
+      &:hover {
+        background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
+        color: var(--art-text-gray-900) !important;
+      }
+    }
+  }
+
+  // 分页器暗色主题
+  .el-pagination {
+    .el-pager li,
+    .btn-prev,
+    .btn-next {
+      background-color: var(--art-main-bg-color) !important;
+      color: var(--art-text-gray-700) !important;
+      border-color: var(--art-border-color) !important;
+
+      &:hover {
+        color: var(--main-color) !important;
+      }
+
+      &.is-active {
+        background-color: var(--main-color) !important;
+        color: white !important;
+      }
+    }
+  }
+
+  // 标签页暗色主题
+  .el-tabs {
+    .el-tabs__header {
+      background-color: var(--art-main-bg-color) !important;
+      border-color: var(--art-border-color) !important;
+    }
+
+    .el-tabs__nav-wrap::after {
+      background-color: var(--art-border-color) !important;
+    }
+
+    .el-tabs__item {
+      color: var(--art-text-gray-600) !important;
+
+      &.is-active {
+        color: var(--main-color) !important;
+      }
+
+      &:hover {
+        color: var(--main-color) !important;
+      }
+    }
+
+    .el-tabs__active-bar {
+      background-color: var(--main-color) !important;
+    }
+  }
+
+  // 面包屑暗色主题
+  .el-breadcrumb {
+    .el-breadcrumb__item {
+      .el-breadcrumb__inner {
+        color: var(--art-text-gray-600) !important;
+
+        &:hover {
+          color: var(--main-color) !important;
+        }
+      }
+
+      &:last-child {
+        .el-breadcrumb__inner {
+          color: var(--art-text-gray-800) !important;
+        }
+      }
+    }
+
+    .el-breadcrumb__separator {
+      color: var(--art-text-gray-500) !important;
+    }
+  }
+
+  // 侧边栏暗色主题
+  .sidebar-container {
+    background-color: var(--art-main-bg-color) !important;
+    border-color: var(--art-border-color) !important;
+  }
+
+  // 页面容器暗色主题
+  .app-container {
+    background-color: var(--art-main-bg-color) !important;
+  }
+
+  // 搜索面板暗色主题
+  .panel,
+  .search {
+    background-color: var(--art-main-bg-color) !important;
+    border-color: var(--art-border-color) !important;
+  }
+
+  // 顶部导航暗色主题
+  .navbar {
+    background-color: var(--art-main-bg-color) !important;
+    border-color: var(--art-border-color) !important;
+  }
+
+  // 工具提示暗色主题
+  .el-tooltip__popper {
+    background-color: var(--art-gray-800) !important;
+    color: var(--art-text-gray-100) !important;
+    border-color: var(--art-border-dashed-color) !important;
+
+    .el-tooltip__arrow::before {
+      background-color: var(--art-gray-800) !important;
+      border-color: var(--art-border-dashed-color) !important;
+    }
+  }
+
+  // 消息提示暗色主题
+  .el-message {
+    background-color: var(--art-main-bg-color) !important;
+    border-color: var(--art-border-color) !important;
+    color: var(--art-text-gray-700) !important;
+
+    .el-message__icon {
+      color: var(--main-color) !important;
+    }
+  }
+
+  // 通知暗色主题
+  .el-notification {
+    background-color: var(--art-main-bg-color) !important;
+    border-color: var(--art-border-color) !important;
+
+    .el-notification__title {
+      color: var(--art-text-gray-900) !important;
+    }
+
+    .el-notification__content {
+      color: var(--art-text-gray-700) !important;
+    }
+  }
+}
+
+// 移动端文字颜色
+@media screen and (max-width: $device-phone) {
+  .dark {
+    $font-color: rgba(#ffffff, 0.8);
+    --el-text-color-regular: $font-color !important;
+    color: $font-color !important;
+
+    body {
+      color: $font-color !important;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: var(--art-text-gray-900) !important;
+      }
+    }
+  }
+}
+
+// 主题切换动画
+.theme-change {
+  transition: all 0.3s ease !important;
+}

src/assets/styles/art-element-ui.scss

@@ -0,0 +1,1573 @@
+// Art Design Pro Element Plus 样式优化
+@use './art-variables.scss' as *;
+
+// 全局圆角规范 - 所有表单控件和按钮统一使用8px圆角
+// 圆角层级：
+// - 表单控件（input、select、button等）：8px
+// - 下拉选项、关闭按钮等小元素：6px
+// - 容器组件（card、table、dialog等）：12px
+// - checkbox等超小元素：4px
+:root {
+  --form-border-radius: 8px !important;
+}
+
+:root {
+  // 系统主色
+  --main-color: var(--el-color-primary);
+  --el-color-white: white !important;
+  --el-color-black: white !important;
+
+  // 输入框边框颜色
+  --el-border-color: var(--art-border-color) !important;
+
+  // 按钮粗度
+  --el-font-weight-primary: 400 !important;
+
+  // 边框、按钮圆角...
+  --el-border-radius-base: 8px !important;
+  --el-border-radius-small: 8px !important;
+  --el-messagebox-border-radius: 8px !important;
+  --el-input-border-radius: 8px !important;
+
+  .region .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    color: var(--main-color);
+  }
+}
+
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
+  border-radius: 6px;
+}
+
+.el-popover {
+  min-width: 80px;
+  border-radius: 8px !important;
+  border: 1px solid var(--art-border-color) !important;
+}
+
+// 工具提示圆角设置
+.el-tooltip__popper {
+  border-radius: 8px !important;
+}
+
+.el-dialog__header {
+  padding: 10px 10px;
+}
+
+.el-dialog__body {
+  padding: 25px 10px !important;
+}
+
+.el-dialog__footer {
+  padding: 10px 10px !important;
+}
+
+// ✅ el-message 样式优化
+.el-message {
+  background-color: var(--art-main-bg-color) !important;
+  border: 0 !important;
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
+
+  p {
+    color: var(--art-text-gray-700) !important;
+    font-size: 13px;
+  }
+}
+
+// 修改 el-dropdown 样式
+.el-dropdown-menu {
+  min-width: 116px !important;
+  padding: 6px !important;
+  border-radius: 8px !important;
+  border: none !important;
+  background-color: var(--art-main-bg-color) !important;
+  box-shadow: var(--art-box-shadow-lg) !important;
+
+  .el-dropdown-menu__item {
+    padding: 8px 16px !important;
+    border-radius: 8px !important;
+    color: var(--art-text-gray-700) !important;
+
+    &:hover:not(.is-disabled) {
+      color: var(--art-gray-900) !important;
+      background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
+    }
+  }
+}
+
+// 隐藏 select、dropdown 的三角
+.el-select__popper,
+.el-dropdown__popper {
+  margin-top: -6px !important;
+
+  .el-popper__arrow {
+    display: none;
+  }
+}
+
+.el-dropdown-selfdefine:focus {
+  outline: none !important;
+}
+
+// 处理移动端组件兼容性
+@media screen and (max-width: $device-phone) {
+  .el-message-box,
+  .el-message,
+  .el-dialog {
+    width: calc(100% - 24px) !important;
+  }
+
+  .el-date-picker.has-sidebar.has-time {
+    width: calc(100% - 24px);
+    left: 12px !important;
+  }
+
+  .el-picker-panel *[slot='sidebar'],
+  .el-picker-panel__sidebar {
+    display: none;
+  }
+
+  .el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
+  .el-picker-panel__sidebar + .el-picker-panel__body {
+    margin-left: 0;
+  }
+}
+
+// 修改el-button样式 - 美观大气的按钮设计
+.el-button {
+  border-radius: 8px !important;
+  padding: 0 16px !important;
+  height: 32px !important;
+  font-weight: 500 !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  position: relative !important;
+  overflow: hidden !important;
+  border: 1px solid transparent !important;
+  cursor: pointer !important;
+  letter-spacing: 0.02em !important;
+
+  // 基础悬浮效果
+  &:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+  }
+
+  &:active {
+    transform: translateY(0) scale(0.98) !important;
+    transition-duration: 0.1s !important;
+  }
+
+  &:focus {
+    outline: none !important;
+  }
+
+  // 禁用状态
+  &.is-disabled {
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+    transform: none !important;
+    box-shadow: none !important;
+  }
+
+  // Primary 按钮 - 轮廓式主色设计
+  &.el-button--primary {
+    border: 1px solid rgb(var(--art-primary)) !important;
+    color: rgb(var(--art-primary)) !important;
+    background: rgba(var(--art-primary), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-primary), 0.1) !important;
+      border-color: rgba(var(--art-primary), 0.8) !important;
+      color: rgb(var(--art-primary)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
+    }
+
+    &:active {
+      background: rgba(var(--art-primary), 0.15) !important;
+      color: rgb(var(--art-primary)) !important;
+    }
+  }
+
+  // Success 按钮 - 轮廓式成功色设计
+  &.el-button--success {
+    border: 1px solid rgb(var(--art-success)) !important;
+    color: rgb(var(--art-success)) !important;
+    background: rgba(var(--art-success), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-success), 0.1) !important;
+      border-color: rgba(var(--art-success), 0.8) !important;
+      color: rgb(var(--art-success)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
+    }
+
+    &:active {
+      color: rgb(var(--art-success)) !important;
+      background: rgba(var(--art-success), 0.15) !important;
+    }
+  }
+
+  // Warning 按钮 - 轮廓式警告色设计
+  &.el-button--warning {
+    border: 1px solid rgb(var(--art-warning)) !important;
+    color: rgb(var(--art-warning)) !important;
+    background: rgba(var(--art-warning), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-warning), 0.1) !important;
+      border-color: rgba(var(--art-warning), 0.8) !important;
+      color: rgb(var(--art-warning)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
+    }
+
+    &:active {
+      background: rgba(var(--art-warning), 0.15) !important;
+      color: rgb(var(--art-warning)) !important;
+    }
+  }
+
+  // Danger 按钮 - 轮廓式危险色设计
+  &.el-button--danger {
+    border: 1px solid rgb(var(--art-danger)) !important;
+    color: rgb(var(--art-danger)) !important;
+    background: rgba(var(--art-danger), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-danger), 0.1) !important;
+      border-color: rgba(var(--art-danger), 0.8) !important;
+      color: rgb(var(--art-danger)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
+    }
+
+    &:active {
+      background: rgba(var(--art-danger), 0.15) !important;
+      color: rgb(var(--art-danger)) !important;
+    }
+  }
+
+  // Info 按钮 - 轮廓式信息色设计
+  &.el-button--info {
+    border: 1px solid rgb(var(--art-info)) !important;
+    color: rgb(var(--art-info)) !important;
+    background: rgba(var(--art-info), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-info), 0.1) !important;
+      border-color: rgba(var(--art-info), 0.8) !important;
+      color: rgb(var(--art-info)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
+    }
+
+    &:active {
+      background: rgba(var(--art-info), 0.15) !important;
+      color: rgb(var(--art-info)) !important;
+    }
+  }
+
+  // Default 按钮 - 灰色
+  &.el-button--default,
+  &:not([class*="el-button--"]) {
+    background: var(--art-main-bg-color) !important;
+    border: 1px solid var(--art-border-color) !important;
+    color: var(--art-text-gray-700) !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+
+    &:hover {
+      background: var(--art-gray-100) !important;
+      border-color: var(--art-gray-300) !important;
+      color: var(--art-text-gray-800) !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    }
+
+    &:active {
+      background: var(--art-gray-200) !important;
+      border-color: var(--art-gray-400) !important;
+    }
+  }
+
+  // Plain 朴素按钮样式 - 与标准按钮保持一致的轮廓式设计
+  &.is-plain {
+    // Plain按钮与标准按钮样式完全一致
+    &.el-button--primary {
+      border: 1px solid rgb(var(--art-primary)) !important;
+      color: rgb(var(--art-primary)) !important;
+      background: rgba(var(--art-primary), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-primary), 0.1) !important;
+        border-color: rgba(var(--art-primary), 0.8) !important;
+        color: rgb(var(--art-primary)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-primary), 0.15) !important;
+        color: rgb(var(--art-primary)) !important;
+      }
+    }
+
+    &.el-button--success {
+      border: 1px solid rgb(var(--art-success)) !important;
+      color: rgb(var(--art-success)) !important;
+      background: rgba(var(--art-success), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-success), 0.1) !important;
+        border-color: rgba(var(--art-success), 0.8) !important;
+        color: rgb(var(--art-success)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-success), 0.15) !important;
+        color: rgb(var(--art-success)) !important;
+      }
+    }
+
+    &.el-button--warning {
+      border: 1px solid rgb(var(--art-warning)) !important;
+      color: rgb(var(--art-warning)) !important;
+      background: rgba(var(--art-warning), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-warning), 0.1) !important;
+        border-color: rgba(var(--art-warning), 0.8) !important;
+        color: rgb(var(--art-warning)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-warning), 0.15) !important;
+        color: rgb(var(--art-warning)) !important;
+      }
+    }
+
+    &.el-button--danger {
+      border: 1px solid rgb(var(--art-danger)) !important;
+      color: rgb(var(--art-danger)) !important;
+      background: rgba(var(--art-danger), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-danger), 0.1) !important;
+        border-color: rgba(var(--art-danger), 0.8) !important;
+        color: rgb(var(--art-danger)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-danger), 0.15) !important;
+        color: rgb(var(--art-danger)) !important;
+      }
+    }
+
+    &.el-button--info {
+      border: 1px solid rgb(var(--art-info)) !important;
+      color: rgb(var(--art-info)) !important;
+      background: rgba(var(--art-info), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-info), 0.1) !important;
+        border-color: rgba(var(--art-info), 0.8) !important;
+        color: rgb(var(--art-info)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-info), 0.15) !important;
+        color: rgb(var(--art-info)) !important;
+      }
+    }
+  }
+
+  // Text 文字按钮样式
+  &.el-button--text {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 8px !important;
+    box-shadow: none !important;
+
+    &.el-button--primary {
+      color: rgb(var(--art-primary)) !important;
+
+      &:hover {
+        background: rgba(var(--art-primary), 0.1) !important;
+        transform: none !important;
+        box-shadow: none !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-primary), 0.15) !important;
+        transform: scale(0.98) !important;
+      }
+    }
+
+    &.el-button--success {
+      color: rgb(var(--art-success)) !important;
+
+      &:hover {
+        background: rgba(var(--art-success), 0.1) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-success), 0.15) !important;
+      }
+    }
+
+    &.el-button--warning {
+      color: rgb(var(--art-warning)) !important;
+
+      &:hover {
+        background: rgba(var(--art-warning), 0.1) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-warning), 0.15) !important;
+      }
+    }
+
+    &.el-button--danger {
+      color: rgb(var(--art-danger)) !important;
+
+      &:hover {
+        background: rgba(var(--art-danger), 0.1) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-danger), 0.15) !important;
+      }
+    }
+
+    &.el-button--info {
+      color: rgb(var(--art-info)) !important;
+
+      &:hover {
+        background: rgba(var(--art-info), 0.1) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-info), 0.15) !important;
+      }
+    }
+
+    span {
+      margin-left: 0 !important;
+    }
+  }
+
+  // 不同尺寸按钮
+  &.el-button--large {
+    height: 40px !important;
+    padding: 0 20px !important;
+    font-size: 14px !important;
+    border-radius: 8px !important;
+  }
+
+  &.el-button--small {
+    height: 28px !important;
+    padding: 0 12px !important;
+    font-size: 12px !important;
+    border-radius: 8px !important;
+  }
+
+  // 图标按钮
+  &.is-circle {
+    border-radius: 50% !important;
+    padding: 0 !important;
+    width: 32px !important;
+
+    &.el-button--large {
+      width: 40px !important;
+    }
+
+    &.el-button--small {
+      width: 28px !important;
+    }
+  }
+
+  // 加载状态
+  &.is-loading {
+    pointer-events: none !important;
+    opacity: 0.7 !important;
+
+    &:before {
+      content: "" !important;
+      position: absolute !important;
+      left: -1px !important;
+      top: -1px !important;
+      right: -1px !important;
+      bottom: -1px !important;
+      border-radius: inherit !important;
+      background: inherit !important;
+      opacity: 0.4 !important;
+    }
+  }
+
+  // 链接按钮样式
+  &.is-link {
+    border: none !important;
+    background: none !important;
+    padding: 0 !important;
+    color: rgb(var(--art-primary)) !important;
+    text-decoration: underline !important;
+
+    &:hover {
+      color: rgba(var(--art-primary), 0.8) !important;
+      transform: none !important;
+      box-shadow: none !important;
+    }
+  }
+}
+
+// 按钮组样式
+.el-button-group {
+  .el-button {
+    &:first-child {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0 !important;
+    }
+
+    &:not(:last-child) {
+      margin-right: -1px !important;
+    }
+  }
+}
+
+// 修改el-tag样式
+.el-tag {
+  height: 26px !important;
+  line-height: 26px !important;
+  border: 0 !important;
+  border-radius: 8px !important;
+  font-weight: 500;
+  transition: all 0.3s !important;
+  padding: 0 8px !important;
+
+  &.el-tag--primary {
+    background-color: rgb(var(--art-bg-primary)) !important;
+    color: rgb(var(--art-primary)) !important;
+  }
+
+  &.el-tag--success {
+    background-color: rgb(var(--art-bg-success)) !important;
+    color: rgb(var(--art-success)) !important;
+  }
+
+  &.el-tag--warning {
+    background-color: rgb(var(--art-bg-warning)) !important;
+    color: rgb(var(--art-warning)) !important;
+  }
+
+  &.el-tag--danger {
+    background-color: rgb(var(--art-bg-danger)) !important;
+    color: rgb(var(--art-danger)) !important;
+  }
+
+  &.el-tag--info {
+    background-color: rgb(var(--art-bg-info)) !important;
+    color: rgb(var(--art-info)) !important;
+  }
+}
+
+.el-checkbox-group {
+  &.el-table-filter__checkbox-group label.el-checkbox {
+    height: 17px !important;
+
+    .el-checkbox__label {
+      font-weight: 400 !important;
+    }
+  }
+}
+
+.el-checkbox {
+  .el-checkbox__inner {
+    width: 18px !important;
+    height: 18px !important;
+    border-radius: 4px !important;
+    border-color: var(--art-border-color) !important;
+
+    &::after {
+      width: 4px;
+      height: 8px;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 4px;
+      margin: auto;
+      border: 2px solid var(--el-checkbox-checked-icon-color);
+      border-left: 0;
+      border-top: 0;
+    }
+  }
+}
+
+.el-notification {
+  border-radius: 12px !important;
+  box-shadow: var(--art-box-shadow-lg) !important;
+
+  .el-notification__icon {
+    font-size: 22px !important;
+  }
+}
+
+// 修改 el-message-box 样式
+.el-message-box {
+  padding: 25px 20px !important;
+  border-radius: 12px !important;
+  box-shadow: var(--art-box-shadow-lg) !important;
+  background-color: var(--art-main-bg-color) !important;
+
+  // 确认弹窗按钮样式统一规范 - 使用更高优先级确保样式正确应用
+  .el-message-box__btns {
+    .el-button {
+      // 基础按钮样式
+      border-radius: 8px !important;
+      padding: 0 16px !important;
+      height: 32px !important;
+      font-weight: 500 !important;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      position: relative !important;
+      overflow: hidden !important;
+      border: 1px solid transparent !important;
+      cursor: pointer !important;
+      letter-spacing: 0.02em !important;
+
+      // 基础悬浮效果
+      &:hover {
+        transform: translateY(-1px) !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+      }
+
+      &:active {
+        transform: translateY(0) scale(0.98) !important;
+        transition-duration: 0.1s !important;
+      }
+
+      &:focus {
+        outline: none !important;
+      }
+
+      // 确定按钮（确认按钮）样式 - 与全局轮廓式按钮规范保持一致
+      &.el-button--primary {
+        border: 1px solid rgb(var(--art-primary)) !important;
+        color: rgb(var(--art-primary)) !important;
+        background: rgba(var(--art-primary), 0.05) !important;
+
+        &:hover {
+          background: rgba(var(--art-primary), 0.1) !important;
+          border-color: rgba(var(--art-primary), 0.8) !important;
+          color: rgb(var(--art-primary)) !important;
+          box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
+        }
+
+        &:active {
+          background: rgba(var(--art-primary), 0.15) !important;
+          color: rgb(var(--art-primary)) !important;
+        }
+      }
+
+      // 取消按钮（默认按钮）样式
+      &.el-button--default,
+      &:not([class*="el-button--"]) {
+        background: var(--art-main-bg-color) !important;
+        border: 1px solid var(--art-border-color) !important;
+        color: var(--art-text-gray-700) !important;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+
+        &:hover {
+          background: var(--art-gray-100) !important;
+          border-color: var(--art-gray-300) !important;
+          color: var(--art-text-gray-800) !important;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+        }
+
+        &:active {
+          background: var(--art-gray-200) !important;
+          border-color: var(--art-gray-400) !important;
+        }
+      }
+
+      // 其他类型按钮样式（与全局轮廓式按钮规范保持一致）
+      &.el-button--success {
+        border: 1px solid rgb(var(--art-success)) !important;
+        color: rgb(var(--art-success)) !important;
+        background: rgba(var(--art-success), 0.05) !important;
+
+        &:hover {
+          background: rgba(var(--art-success), 0.1) !important;
+          border-color: rgba(var(--art-success), 0.8) !important;
+          color: rgb(var(--art-success)) !important;
+          box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
+        }
+
+        &:active {
+          background: rgba(var(--art-success), 0.15) !important;
+          color: rgb(var(--art-success)) !important;
+        }
+      }
+
+      &.el-button--warning {
+        border: 1px solid rgb(var(--art-warning)) !important;
+        color: rgb(var(--art-warning)) !important;
+        background: rgba(var(--art-warning), 0.05) !important;
+
+        &:hover {
+          background: rgba(var(--art-warning), 0.1) !important;
+          border-color: rgba(var(--art-warning), 0.8) !important;
+          color: rgb(var(--art-warning)) !important;
+          box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
+        }
+
+        &:active {
+          background: rgba(var(--art-warning), 0.15) !important;
+          color: rgb(var(--art-warning)) !important;
+        }
+      }
+
+      &.el-button--danger {
+        border: 1px solid rgb(var(--art-danger)) !important;
+        color: rgb(var(--art-danger)) !important;
+        background: rgba(var(--art-danger), 0.05) !important;
+
+        &:hover {
+          background: rgba(var(--art-danger), 0.1) !important;
+          border-color: rgba(var(--art-danger), 0.8) !important;
+          color: rgb(var(--art-danger)) !important;
+          box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
+        }
+
+        &:active {
+          background: rgba(var(--art-danger), 0.15) !important;
+          color: rgb(var(--art-danger)) !important;
+        }
+      }
+
+      &.el-button--info {
+        border: 1px solid rgb(var(--art-info)) !important;
+        color: rgb(var(--art-info)) !important;
+        background: rgba(var(--art-info), 0.05) !important;
+
+        &:hover {
+          background: rgba(var(--art-info), 0.1) !important;
+          border-color: rgba(var(--art-info), 0.8) !important;
+          color: rgb(var(--art-info)) !important;
+          box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
+        }
+
+        &:active {
+          background: rgba(var(--art-info), 0.15) !important;
+          color: rgb(var(--art-info)) !important;
+        }
+      }
+    }
+  }
+}
+
+.el-message-box__headerbtn .el-message-box__close,
+.el-dialog__headerbtn .el-dialog__close {
+  color: var(--art-gray-500) !important;
+  top: 7px !important;
+  right: 7px !important;
+  padding: 7px !important;
+  border-radius: 6px !important;
+  transition: all 0.3s !important;
+
+  &:hover {
+    background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
+    color: var(--art-gray-800) !important;
+  }
+}
+
+.el-message-box__title {
+  font-weight: 500 !important;
+  color: var(--art-text-gray-800) !important;
+}
+
+.el-table__column-filter-trigger i {
+  color: var(--main-color) !important;
+  margin: -3px 0 0 2px;
+}
+
+// 去除 el-dropdown 鼠标放上去出现的边框
+.el-tooltip__trigger:focus-visible {
+  outline: unset;
+}
+
+// ipad 表单右侧按钮优化
+@media screen and (max-width: $device-ipad-pro) {
+  .el-table-fixed-column--right {
+    padding-right: 0 !important;
+
+    .el-button {
+      margin: 5px 10px 5px 0 !important;
+    }
+  }
+}
+
+// 修改 dialog 动画
+.dialog-fade-enter-active {
+  .el-dialog {
+    animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
+  }
+}
+
+.dialog-fade-leave-active {
+  animation: fade-out 0.2s linear;
+
+  .el-dialog {
+    animation: dialog-close 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  }
+}
+
+@keyframes dialog-open {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-close {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+
+// 遮罩层动画
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+// 修改 el-select 样式
+.el-select {
+  height: 32px !important;
+
+  .el-input {
+    height: 32px !important;
+
+    .el-input__wrapper {
+      border-radius: 8px !important;
+      border-color: var(--art-border-color) !important;
+      transition: all 0.3s ease !important;
+      height: 32px !important;
+      min-height: 32px !important;
+      max-height: 32px !important;
+      padding: 0 12px !important;
+      box-sizing: border-box !important;
+
+      &:hover {
+        border-color: var(--main-color) !important;
+      }
+
+      &.is-focus {
+        border-color: var(--main-color) !important;
+        box-shadow: 0 0 0 2px rgba(var(--art-primary), 0.1) !important;
+      }
+
+      .el-input__inner {
+        height: 32px !important;
+        min-height: 32px !important;
+        max-height: 32px !important;
+        line-height: 32px !important;
+        padding: 0 !important;
+      }
+
+      .el-input__suffix {
+        height: 32px !important;
+        line-height: 32px !important;
+      }
+    }
+  }
+}
+
+.el-select-dropdown__list {
+  padding: 5px !important;
+
+  .el-select-dropdown__item {
+    height: 38px !important;
+    line-height: 38px !important;
+    border-radius: 6px !important;
+    color: var(--art-text-gray-700) !important;
+
+    &.is-selected {
+      color: var(--art-gray-900) !important;
+      font-weight: 400 !important;
+      background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
+    }
+
+    &:hover {
+      background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
+    }
+  }
+
+  .el-select-dropdown__item:hover ~ .is-selected,
+  .el-select-dropdown__item.is-selected:has(~ .el-select-dropdown__item:hover) {
+    background-color: transparent !important;
+  }
+}
+
+// 修改输入框样式
+.el-input {
+  height: 32px !important;
+
+  .el-input__wrapper {
+    border-radius: 8px !important;
+    border-color: var(--art-border-color) !important;
+    transition: all 0.3s ease !important;
+    height: 32px !important;
+    min-height: 32px !important;
+    max-height: 32px !important;
+    padding: 0 12px !important;
+    box-sizing: border-box !important;
+
+    &:hover {
+      border-color: var(--main-color) !important;
+    }
+
+    &.is-focus {
+      border-color: var(--main-color) !important;
+      box-shadow: 0 0 0 2px rgba(var(--art-primary), 0.1) !important;
+    }
+
+    .el-input__inner {
+      height: 32px !important;
+      min-height: 32px !important;
+      max-height: 32px !important;
+      line-height: 32px !important;
+      padding: 0 !important;
+    }
+
+    .el-input__prefix,
+    .el-input__suffix {
+      height: 32px !important;
+      line-height: 32px !important;
+    }
+  }
+}
+
+// 修改表格样式
+.el-table {
+  border-radius: 12px !important;
+  overflow: hidden;
+  box-shadow: var(--art-root-card-box-shadow) !important;
+  border: 1px solid var(--art-border-color) !important;
+
+  .el-table__header {
+    th {
+      background-color: var(--art-gray-100) !important;
+      color: var(--art-text-gray-700) !important;
+      font-weight: 500 !important;
+      border-bottom: 1px solid var(--art-border-color) !important;
+    }
+  }
+
+  .el-table__body {
+    tr {
+      transition: all 0.3s ease !important;
+
+      &:hover {
+        background-color: rgba(var(--art-gray-100-rgb), 0.5) !important;
+      }
+
+      td {
+        border-bottom: 1px solid var(--art-border-color) !important;
+      }
+    }
+  }
+}
+
+// 修改卡片样式
+.el-card {
+  border-radius: 12px !important;
+  box-shadow: var(--art-root-card-box-shadow) !important;
+  border: 1px solid var(--art-border-color) !important;
+  background-color: var(--art-main-bg-color) !important;
+
+  .el-card__header {
+    padding: var(--space-xl) !important;
+    border-bottom: 1px solid var(--art-border-color) !important;
+    font-weight: 500 !important;
+    color: var(--art-text-gray-800) !important;
+  }
+
+  .el-card__body {
+    padding: var(--space-xl) !important;
+  }
+}
+
+// 实现水波纹在文字下面效果
+.el-button > span {
+  position: relative;
+  z-index: 10;
+}
+
+// 页面背景
+body {
+  background-color: var(--art-bg-color) !important;
+}
+
+// 表单项样式优化
+.el-form-item {
+  margin-bottom: var(--space-lg) !important;
+
+  .el-form-item__label {
+    color: var(--art-text-gray-700) !important;
+    font-weight: 500 !important;
+  }
+}
+
+// 统一表单控件高度
+.el-date-editor,
+.el-cascader,
+.el-autocomplete,
+.el-input-number {
+  height: 32px !important;
+
+  .el-input {
+    height: 32px !important;
+
+    .el-input__wrapper {
+      border-radius: 8px !important;
+      height: 32px !important;
+      min-height: 32px !important;
+      max-height: 32px !important;
+      padding: 0 12px !important;
+      box-sizing: border-box !important;
+
+      .el-input__inner {
+        height: 32px !important;
+        min-height: 32px !important;
+        max-height: 32px !important;
+        line-height: 32px !important;
+        padding: 0 !important;
+      }
+
+      .el-input__prefix,
+      .el-input__suffix {
+        height: 32px !important;
+        line-height: 32px !important;
+      }
+    }
+  }
+}
+
+// 下拉框箭头调整
+.el-select .el-input .el-select__caret {
+  line-height: 32px !important;
+}
+
+// 日期选择器的特殊处理
+.el-date-editor {
+  .el-input__inner {
+    padding-left: 30px !important;
+  }
+
+  .el-input__prefix {
+    left: 8px !important;
+
+    .el-input__prefix-inner {
+      line-height: 32px !important;
+    }
+  }
+}
+
+// 确保表单控件高度完全一致的额外规则
+.el-form-item__content {
+  .el-input,
+  .el-select,
+  .el-date-editor,
+  .el-cascader,
+  .el-autocomplete,
+  .el-input-number {
+    height: 32px !important;
+    min-height: 32px !important;
+    max-height: 32px !important;
+
+    .el-input__wrapper {
+      border-radius: 8px !important;
+      height: 32px !important;
+      min-height: 32px !important;
+      max-height: 32px !important;
+      box-sizing: border-box !important;
+      display: flex !important;
+      align-items: center !important;
+    }
+
+    .el-input__inner {
+      height: 32px !important;
+      min-height: 32px !important;
+      max-height: 32px !important;
+      line-height: 32px !important;
+      padding: 0 !important;
+      border: none !important;
+      background: transparent !important;
+      outline: none !important;
+    }
+  }
+}
+
+// 特殊处理选择框的下拉箭头
+.el-select .el-input {
+  .el-input__suffix {
+    .el-input__suffix-inner {
+      display: flex !important;
+      align-items: center !important;
+      height: 32px !important;
+    }
+  }
+}
+
+// 确保按钮与表单控件高度一致
+.el-form-item__content .el-button {
+  height: 32px !important;
+  min-height: 32px !important;
+  max-height: 32px !important;
+}
+
+// 确保弹窗中的按钮样式与全局轮廓式设计保持完全一致
+.el-dialog {
+  .el-button {
+    // 继承全局轮廓式按钮样式，确保弹窗和列表中的按钮完全一致
+    &.el-button--primary {
+      border: 1px solid rgb(var(--art-primary)) !important;
+      color: rgb(var(--art-primary)) !important;
+      background: rgba(var(--art-primary), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-primary), 0.1) !important;
+        border-color: rgba(var(--art-primary), 0.8) !important;
+        color: rgb(var(--art-primary)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-primary), 0.15) !important;
+        color: rgb(var(--art-primary)) !important;
+      }
+
+      &.is-loading {
+        opacity: 0.7 !important;
+      }
+    }
+
+    // 确保其他类型按钮在弹窗中也正确显示轮廓式样式
+    &.el-button--success {
+      border: 1px solid rgb(var(--art-success)) !important;
+      color: rgb(var(--art-success)) !important;
+      background: rgba(var(--art-success), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-success), 0.1) !important;
+        border-color: rgba(var(--art-success), 0.8) !important;
+        color: rgb(var(--art-success)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-success), 0.15) !important;
+        color: rgb(var(--art-success)) !important;
+      }
+    }
+
+    &.el-button--warning {
+      border: 1px solid rgb(var(--art-warning)) !important;
+      color: rgb(var(--art-warning)) !important;
+      background: rgba(var(--art-warning), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-warning), 0.1) !important;
+        border-color: rgba(var(--art-warning), 0.8) !important;
+        color: rgb(var(--art-warning)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-warning), 0.15) !important;
+        color: rgb(var(--art-warning)) !important;
+      }
+    }
+
+    &.el-button--danger {
+      border: 1px solid rgb(var(--art-danger)) !important;
+      color: rgb(var(--art-danger)) !important;
+      background: rgba(var(--art-danger), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-danger), 0.1) !important;
+        border-color: rgba(var(--art-danger), 0.8) !important;
+        color: rgb(var(--art-danger)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-danger), 0.15) !important;
+        color: rgb(var(--art-danger)) !important;
+      }
+    }
+
+    &.el-button--info {
+      border: 1px solid rgb(var(--art-info)) !important;
+      color: rgb(var(--art-info)) !important;
+      background: rgba(var(--art-info), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-info), 0.1) !important;
+        border-color: rgba(var(--art-info), 0.8) !important;
+        color: rgb(var(--art-info)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-info), 0.15) !important;
+        color: rgb(var(--art-info)) !important;
+      }
+    }
+
+    &.el-button--default,
+    &:not([class*="el-button--"]) {
+      background: var(--art-main-bg-color) !important;
+      border: 1px solid var(--art-border-color) !important;
+      color: var(--art-text-gray-700) !important;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+
+      &:hover {
+        background: var(--art-gray-100) !important;
+        border-color: var(--art-gray-300) !important;
+        color: var(--art-text-gray-800) !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+      }
+    }
+  }
+}
+
+// 强制确保弹窗底部按钮区域与全局轮廓式设计保持一致
+.el-dialog__footer .el-button,
+.dialog-footer .el-button {
+  // 继承全局轮廓式按钮样式，确保最高优先级
+  &.el-button--primary {
+    border: 1px solid rgb(var(--art-primary)) !important;
+    color: rgb(var(--art-primary)) !important;
+    background: rgba(var(--art-primary), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-primary), 0.1) !important;
+      border-color: rgba(var(--art-primary), 0.8) !important;
+      color: rgb(var(--art-primary)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
+    }
+
+    &:active {
+      background: rgba(var(--art-primary), 0.15) !important;
+      color: rgb(var(--art-primary)) !important;
+    }
+  }
+
+  &.el-button--success {
+    border: 1px solid rgb(var(--art-success)) !important;
+    color: rgb(var(--art-success)) !important;
+    background: rgba(var(--art-success), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-success), 0.1) !important;
+      border-color: rgba(var(--art-success), 0.8) !important;
+      color: rgb(var(--art-success)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
+    }
+
+    &:active {
+      color: rgb(var(--art-success)) !important;
+      background: rgba(var(--art-success), 0.15) !important;
+    }
+  }
+
+  &.el-button--warning {
+    border: 1px solid rgb(var(--art-warning)) !important;
+    color: rgb(var(--art-warning)) !important;
+    background: rgba(var(--art-warning), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-warning), 0.1) !important;
+      border-color: rgba(var(--art-warning), 0.8) !important;
+      color: rgb(var(--art-warning)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
+    }
+
+    &:active {
+      background: rgba(var(--art-warning), 0.15) !important;
+      color: rgb(var(--art-warning)) !important;
+    }
+  }
+
+  &.el-button--danger {
+    border: 1px solid rgb(var(--art-danger)) !important;
+    color: rgb(var(--art-danger)) !important;
+    background: rgba(var(--art-danger), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-danger), 0.1) !important;
+      border-color: rgba(var(--art-danger), 0.8) !important;
+      color: rgb(var(--art-danger)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
+    }
+
+    &:active {
+      background: rgba(var(--art-danger), 0.15) !important;
+      color: rgb(var(--art-danger)) !important;
+    }
+  }
+
+  &.el-button--info {
+    border: 1px solid rgb(var(--art-info)) !important;
+    color: rgb(var(--art-info)) !important;
+    background: rgba(var(--art-info), 0.05) !important;
+
+    &:hover {
+      background: rgba(var(--art-info), 0.1) !important;
+      border-color: rgba(var(--art-info), 0.8) !important;
+      color: rgb(var(--art-info)) !important;
+      box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
+    }
+
+    &:active {
+      background: rgba(var(--art-info), 0.15) !important;
+      color: rgb(var(--art-info)) !important;
+    }
+  }
+}
+
+// 确保表格中的按钮样式与全局轮廓式设计保持一致
+.el-table {
+  .el-button {
+    // 表格中的标准按钮继承全局轮廓式样式
+    &.el-button--primary {
+      border: 1px solid rgb(var(--art-primary)) !important;
+      color: rgb(var(--art-primary)) !important;
+      background: rgba(var(--art-primary), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-primary), 0.1) !important;
+        border-color: rgba(var(--art-primary), 0.8) !important;
+        color: rgb(var(--art-primary)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-primary), 0.15) !important;
+        color: rgb(var(--art-primary)) !important;
+      }
+    }
+
+    &.el-button--success {
+      border: 1px solid rgb(var(--art-success)) !important;
+      color: rgb(var(--art-success)) !important;
+      background: rgba(var(--art-success), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-success), 0.1) !important;
+        border-color: rgba(var(--art-success), 0.8) !important;
+        color: rgb(var(--art-success)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-success), 0.15) !important;
+        color: rgb(var(--art-success)) !important;
+      }
+    }
+
+    &.el-button--warning {
+      border: 1px solid rgb(var(--art-warning)) !important;
+      color: rgb(var(--art-warning)) !important;
+      background: rgba(var(--art-warning), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-warning), 0.1) !important;
+        border-color: rgba(var(--art-warning), 0.8) !important;
+        color: rgb(var(--art-warning)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-warning), 0.15) !important;
+        color: rgb(var(--art-warning)) !important;
+      }
+    }
+
+    &.el-button--danger {
+      border: 1px solid rgb(var(--art-danger)) !important;
+      color: rgb(var(--art-danger)) !important;
+      background: rgba(var(--art-danger), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-danger), 0.1) !important;
+        border-color: rgba(var(--art-danger), 0.8) !important;
+        color: rgb(var(--art-danger)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-danger), 0.15) !important;
+        color: rgb(var(--art-danger)) !important;
+      }
+    }
+
+    &.el-button--info {
+      border: 1px solid rgb(var(--art-info)) !important;
+      color: rgb(var(--art-info)) !important;
+      background: rgba(var(--art-info), 0.05) !important;
+
+      &:hover {
+        background: rgba(var(--art-info), 0.1) !important;
+        border-color: rgba(var(--art-info), 0.8) !important;
+        color: rgb(var(--art-info)) !important;
+        box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
+      }
+
+      &:active {
+        background: rgba(var(--art-info), 0.15) !important;
+        color: rgb(var(--art-info)) !important;
+      }
+    }
+
+    // 表格中的特殊link和text按钮保持原有样式
+    &.el-button--text,
+    &.is-link {
+      background: transparent !important;
+      border: none !important;
+      padding: 0 8px !important;
+      box-shadow: none !important;
+
+      &.el-button--primary {
+        color: rgb(var(--art-primary)) !important;
+
+        &:hover {
+          background: rgba(var(--art-primary), 0.1) !important;
+          transform: none !important;
+          box-shadow: none !important;
+        }
+      }
+
+      &.el-button--success {
+        color: rgb(var(--art-success)) !important;
+
+        &:hover {
+          background: rgba(var(--art-success), 0.1) !important;
+        }
+      }
+
+      &.el-button--warning {
+        color: rgb(var(--art-warning)) !important;
+
+        &:hover {
+          background: rgba(var(--art-warning), 0.1) !important;
+        }
+      }
+
+      &.el-button--danger {
+        color: rgb(var(--art-danger)) !important;
+
+        &:hover {
+          background: rgba(var(--art-danger), 0.1) !important;
+        }
+      }
+
+      &.el-button--info {
+        color: rgb(var(--art-info)) !important;
+
+        &:hover {
+          background: rgba(var(--art-info), 0.1) !important;
+        }
+      }
+    }
+  }
+}
+
+// 专门针对 MessageBox 按钮的强制样式规则 - 确保最高优先级
+// MessageBox 按钮顺序调整：确定按钮在左侧，取消按钮在右侧（符合国内用户习惯）
+.el-message-box .el-message-box__btns {
+  display: flex !important;
+  flex-direction: row-reverse !important;
+  justify-content: flex-start !important;
+  gap: 12px !important;
+}
+
+.el-message-box .el-message-box__btns .el-button.el-button--primary {
+  border: 1px solid rgb(var(--art-primary)) !important;
+  color: rgb(var(--art-primary)) !important;
+  background: rgba(var(--art-primary), 0.05) !important;
+  border-radius: 8px !important;
+  height: 32px !important;
+  padding: 0 16px !important;
+  font-weight: 500 !important;
+  order: 2 !important; // 确定按钮排在前面（左侧）
+
+  &:hover {
+    background: rgba(var(--art-primary), 0.1) !important;
+    border-color: rgba(var(--art-primary), 0.8) !important;
+    color: rgb(var(--art-primary)) !important;
+    box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
+    transform: translateY(-1px) !important;
+  }
+
+  &:active {
+    background: rgba(var(--art-primary), 0.15) !important;
+    color: rgb(var(--art-primary)) !important;
+    transform: translateY(0) scale(0.98) !important;
+  }
+
+  &:focus {
+    outline: none !important;
+  }
+}
+
+.el-message-box .el-message-box__btns .el-button.el-button--default,
+.el-message-box .el-message-box__btns .el-button:not([class*="el-button--"]) {
+  border-radius: 8px !important;
+  height: 32px !important;
+  padding: 0 16px !important;
+  font-weight: 500 !important;
+  order: 1 !important; // 取消按钮排在后面（右侧）
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    transform: translateY(-1px) !important;
+  }
+
+  &:active {
+    // background: var(--art-gray-200) !important;
+    border-color: var(--art-gray-400) !important;
+    transform: translateY(0) scale(0.98) !important;
+  }
+
+  &:focus {
+    outline: none !important;
+  }
+}

src/assets/styles/art-global.scss

@@ -0,0 +1,500 @@
+// Art Design Pro 全局样式 - Plus UI 版本
+@use './art-variables.scss' as *;
+
+// 字体引入 (可选，根据需要引入)
+@font-face {
+  font-family: 'DMSans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('DMSans'), url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'DMSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--art-text-gray-800);
+  background-color: var(--art-bg-color);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  transition: background-color 0.3s ease;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+#app {
+  height: 100%;
+  min-height: 100vh;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+// 全局文字样式
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: 500;
+  color: var(--art-text-gray-900);
+  line-height: 1.4;
+}
+
+h1 { font-size: 24px; }
+h2 { font-size: 20px; }
+h3 { font-size: 18px; }
+h4 { font-size: 16px; }
+h5 { font-size: 14px; }
+h6 { font-size: 12px; }
+
+p {
+  margin: 0 0 16px 0;
+  color: var(--art-text-gray-700);
+}
+
+// 链接样式
+a {
+  color: rgb(var(--art-primary));
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(var(--art-secondary));
+    text-decoration: none;
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+    color: rgb(var(--art-primary));
+  }
+}
+
+// 表单元素重置
+input, textarea, select, button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+// 按钮重置
+button {
+  cursor: pointer;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+// 图片样式
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+
+// 工具类
+.clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.d-block { display: block; }
+.d-inline { display: inline; }
+.d-inline-block { display: inline-block; }
+.d-flex { display: flex; }
+.d-none { display: none; }
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+// 间距工具类
+.m-0 { margin: 0 !important; }
+.mt-0 { margin-top: 0 !important; }
+.mr-0 { margin-right: 0 !important; }
+.mb-0 { margin-bottom: 0 !important; }
+.ml-0 { margin-left: 0 !important; }
+
+.m-1 { margin: var(--space-xs) !important; }
+.mt-1 { margin-top: var(--space-xs) !important; }
+.mr-1 { margin-right: var(--space-xs) !important; }
+.mb-1 { margin-bottom: var(--space-xs) !important; }
+.ml-1 { margin-left: var(--space-xs) !important; }
+
+.m-2 { margin: var(--space-sm) !important; }
+.mt-2 { margin-top: var(--space-sm) !important; }
+.mr-2 { margin-right: var(--space-sm) !important; }
+.mb-2 { margin-bottom: var(--space-sm) !important; }
+.ml-2 { margin-left: var(--space-sm) !important; }
+
+.m-3 { margin: var(--space-md) !important; }
+.mt-3 { margin-top: var(--space-md) !important; }
+.mr-3 { margin-right: var(--space-md) !important; }
+.mb-3 { margin-bottom: var(--space-md) !important; }
+.ml-3 { margin-left: var(--space-md) !important; }
+
+.m-4 { margin: var(--space-lg) !important; }
+.mt-4 { margin-top: var(--space-lg) !important; }
+.mr-4 { margin-right: var(--space-lg) !important; }
+.mb-4 { margin-bottom: var(--space-lg) !important; }
+.ml-4 { margin-left: var(--space-lg) !important; }
+
+.m-5 { margin: var(--space-xl) !important; }
+.mt-5 { margin-top: var(--space-xl) !important; }
+.mr-5 { margin-right: var(--space-xl) !important; }
+.mb-5 { margin-bottom: var(--space-xl) !important; }
+.ml-5 { margin-left: var(--space-xl) !important; }
+
+.p-0 { padding: 0 !important; }
+.pt-0 { padding-top: 0 !important; }
+.pr-0 { padding-right: 0 !important; }
+.pb-0 { padding-bottom: 0 !important; }
+.pl-0 { padding-left: 0 !important; }
+
+.p-1 { padding: var(--space-xs) !important; }
+.pt-1 { padding-top: var(--space-xs) !important; }
+.pr-1 { padding-right: var(--space-xs) !important; }
+.pb-1 { padding-bottom: var(--space-xs) !important; }
+.pl-1 { padding-left: var(--space-xs) !important; }
+
+.p-2 { padding: var(--space-sm) !important; }
+.pt-2 { padding-top: var(--space-sm) !important; }
+.pr-2 { padding-right: var(--space-sm) !important; }
+.pb-2 { padding-bottom: var(--space-sm) !important; }
+.pl-2 { padding-left: var(--space-sm) !important; }
+
+.p-3 { padding: var(--space-md) !important; }
+.pt-3 { padding-top: var(--space-md) !important; }
+.pr-3 { padding-right: var(--space-md) !important; }
+.pb-3 { padding-bottom: var(--space-md) !important; }
+.pl-3 { padding-left: var(--space-md) !important; }
+
+.p-4 { padding: var(--space-lg) !important; }
+.pt-4 { padding-top: var(--space-lg) !important; }
+.pr-4 { padding-right: var(--space-lg) !important; }
+.pb-4 { padding-bottom: var(--space-lg) !important; }
+.pl-4 { padding-left: var(--space-lg) !important; }
+
+.p-5 { padding: var(--space-xl) !important; }
+.pt-5 { padding-top: var(--space-xl) !important; }
+.pr-5 { padding-right: var(--space-xl) !important; }
+.pb-5 { padding-bottom: var(--space-xl) !important; }
+.pl-5 { padding-left: var(--space-xl) !important; }
+
+// 边框圆角工具类
+.rounded-none { border-radius: 0 !important; }
+.rounded-xs { border-radius: var(--border-radius-xs) !important; }
+.rounded-sm { border-radius: var(--border-radius-sm) !important; }
+.rounded-md { border-radius: var(--border-radius-md) !important; }
+.rounded-lg { border-radius: var(--border-radius-lg) !important; }
+.rounded-xl { border-radius: var(--border-radius-xl) !important; }
+.rounded-2xl { border-radius: var(--border-radius-2xl) !important; }
+.rounded-full { border-radius: var(--border-radius-full) !important; }
+
+// 阴影工具类
+.shadow-none { box-shadow: none !important; }
+.shadow-xs { box-shadow: var(--art-box-shadow-xs) !important; }
+.shadow-sm { box-shadow: var(--art-box-shadow-sm) !important; }
+.shadow-md { box-shadow: var(--art-box-shadow) !important; }
+.shadow-lg { box-shadow: var(--art-box-shadow-lg) !important; }
+.shadow-card { box-shadow: var(--art-root-card-box-shadow) !important; }
+
+// 页面容器样式
+.app-container {
+  padding: var(--space-xl);
+  background-color: var(--art-main-bg-color);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--art-root-card-box-shadow);
+  margin: var(--space-xl);
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: var(--art-box-shadow-sm);
+  }
+}
+
+// 搜索面板样式
+.panel,
+.search {
+  margin-bottom: var(--space-lg);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--art-border-color);
+  background-color: var(--art-main-bg-color);
+  padding: var(--space-lg);
+  transition: all 0.3s ease;
+  box-shadow: var(--art-root-card-box-shadow);
+
+  &:hover {
+    box-shadow: var(--art-box-shadow-sm);
+    border-color: rgba(var(--art-primary), 0.3);
+  }
+}
+
+// 卡片样式
+.art-card {
+  background-color: var(--art-main-bg-color);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--art-root-card-box-shadow);
+  border: 1px solid var(--art-border-color);
+  overflow: hidden;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: var(--art-box-shadow-sm);
+    transform: translateY(-2px);
+  }
+
+  .art-card-header {
+    padding: var(--space-xl);
+    border-bottom: 1px solid var(--art-border-color);
+    background-color: var(--art-gray-100);
+    font-weight: 500;
+    color: var(--art-text-gray-800);
+  }
+
+  .art-card-body {
+    padding: var(--space-xl);
+  }
+
+  .art-card-footer {
+    padding: var(--space-lg) var(--space-xl);
+    border-top: 1px solid var(--art-border-color);
+    background-color: var(--art-gray-100);
+  }
+}
+
+// 按钮样式增强
+.art-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-sm) var(--space-lg);
+  border-radius: var(--border-radius-sm);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+  text-decoration: none;
+  user-select: none;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--art-box-shadow-xs);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &.art-btn-primary {
+    background: linear-gradient(135deg, rgb(var(--art-primary)) 0%, rgb(var(--art-secondary)) 100%);
+    color: white;
+    border: none;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  &.art-btn-secondary {
+    background-color: transparent;
+    color: rgb(var(--art-primary));
+    border: 1px solid rgb(var(--art-primary));
+
+    &:hover {
+      background-color: rgb(var(--art-bg-primary));
+    }
+  }
+
+  &.art-btn-success {
+    background-color: rgb(var(--art-success));
+    color: white;
+    border: none;
+  }
+
+  &.art-btn-warning {
+    background-color: rgb(var(--art-warning));
+    color: white;
+    border: none;
+  }
+
+  &.art-btn-danger {
+    background-color: rgb(var(--art-danger));
+    color: white;
+    border: none;
+  }
+
+  &.art-btn-sm {
+    padding: var(--space-xs) var(--space-md);
+    font-size: 12px;
+  }
+
+  &.art-btn-lg {
+    padding: var(--space-md) var(--space-xl);
+    font-size: 16px;
+  }
+}
+
+// 响应式工具类
+@media screen and (max-width: $device-phone) {
+  .d-mobile-none { display: none !important; }
+  .d-mobile-block { display: block !important; }
+  .d-mobile-flex { display: flex !important; }
+
+  .app-container {
+    margin: var(--space-sm);
+    padding: var(--space-md);
+  }
+
+  // 移动端文字调整
+  body {
+    font-size: 16px; // 移动端稍大的字体
+  }
+
+  h1 { font-size: 22px; }
+  h2 { font-size: 18px; }
+  h3 { font-size: 16px; }
+}
+
+@media screen and (min-width: $device-phone) and (max-width: $device-ipad) {
+  .d-tablet-none { display: none !important; }
+  .d-tablet-block { display: block !important; }
+  .d-tablet-flex { display: flex !important; }
+}
+
+@media screen and (min-width: $device-ipad) {
+  .d-desktop-none { display: none !important; }
+  .d-desktop-block { display: block !important; }
+  .d-desktop-flex { display: flex !important; }
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--art-gray-100);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--art-gray-400);
+  border-radius: 3px;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background: var(--art-gray-500);
+  }
+}
+
+// 选择文本样式
+::selection {
+  background-color: rgba(var(--art-primary), 0.2);
+  color: rgb(var(--art-primary));
+}
+
+::-moz-selection {
+  background-color: rgba(var(--art-primary), 0.2);
+  color: rgb(var(--art-primary));
+}
+
+// Focus 样式
+:focus-visible {
+  outline: 2px solid rgba(var(--art-primary), 0.5);
+  outline-offset: 2px;
+  border-radius: var(--border-radius-xs);
+}
+
+// 禁用状态
+.disabled,
+[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+// 加载状态
+.loading {
+  position: relative;
+  pointer-events: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin: -10px 0 0 -10px;
+    border: 2px solid rgba(var(--art-primary), 0.3);
+    border-top-color: rgb(var(--art-primary));
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// 过渡动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}

src/assets/styles/art-variables.scss

@@ -0,0 +1,344 @@
+// Art Design Pro 变量系统 - Plus UI 版本
+
+// 默认主题变量 ｜ Light 主题变量
+:root {
+  // Theme color
+  --art-primary: 93, 135, 255;
+  --art-secondary: 73, 190, 255;
+  --art-error: 250, 137, 107;
+  --art-info: 83, 155, 255;
+  --art-success: 19, 222, 185;
+  --art-warning: 255, 174, 31;
+  --art-danger: 255, 77, 79;
+
+  // Theme background color
+  --art-bg-primary: 236, 242, 255;
+  --art-bg-secondary: 232, 247, 255;
+  --art-bg-success: 230, 255, 250;
+  --art-bg-error: 253, 237, 232;
+  --art-bg-info: 235, 243, 254;
+  --art-bg-warning: 254, 245, 229;
+  --art-bg-danger: 253, 237, 232;
+
+  --art-hoverColor: 246, 249, 252;
+  --art-grey100: 242, 246, 250;
+  --art-grey200: 234, 239, 244;
+
+  --art-color: #ffffff;
+  --art-light: #f9f9f9;
+  --art-dark: #1e2129;
+
+  // Background color | Hover color
+  --art-text-muted: #99a1b7;
+  --art-gray-100: #f9f9f9;
+  --art-gray-100-rgb: 249, 249, 249;
+  --art-gray-200: #f1f1f4;
+  --art-gray-200-rgb: 241, 241, 244;
+  --art-gray-300: #dbdfe9;
+  --art-gray-300-rgb: 219, 223, 233;
+  --art-gray-400: #c4cada;
+  --art-gray-400-rgb: 196, 202, 218;
+  --art-gray-500: #99a1b7;
+  --art-gray-500-rgb: 153, 161, 183;
+  --art-gray-600: #78829d;
+  --art-gray-600-rgb: 120, 130, 157;
+  --art-gray-700: #4b5675;
+  --art-gray-700-rgb: 75, 86, 117;
+  --art-gray-800: #252f4a;
+  --art-gray-800-rgb: 37, 47, 74;
+  --art-gray-900: #071437;
+  --art-gray-900-rgb: 7, 20, 55;
+
+  // Text color
+  --art-text-muted: #99a1b7;
+  --art-text-gray-100: #f9f9f9;
+  --art-text-gray-200: #f1f1f4;
+  --art-text-gray-300: #dbdfe9;
+  --art-text-gray-400: #c4cada;
+  --art-text-gray-500: #99a1b7;
+  --art-text-gray-600: #78829d;
+  --art-text-gray-700: #4b5675;
+  --art-text-gray-800: #252f4a;
+  --art-text-gray-900: #071437;
+
+  // Border
+  --art-border-color: #eaebf1;
+  --art-border-dashed-color: #dbdfe9;
+  --art-root-card-border-color: #f1f1f4;
+
+  // Shadow
+  --art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
+  --art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
+  --art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
+  --art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
+
+  // Root card box、shadow
+  --art-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
+  --art-root-card-border-color: #f1f1f4;
+
+  // Theme background color
+  --art-bg-color: #fafbfc; // 最底部背景颜色
+  --art-main-bg-color: #ffffff;
+
+  // Element Plus 兼容
+  --el-color-primary: rgb(var(--art-primary));
+  --el-color-success: rgb(var(--art-success));
+  --el-color-warning: rgb(var(--art-warning));
+  --el-color-danger: rgb(var(--art-danger));
+  --el-color-error: rgb(var(--art-error));
+  --el-color-info: rgb(var(--art-info));
+
+  // 间距系统
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 12px;
+  --space-lg: 16px;
+  --space-xl: 20px;
+  --space-2xl: 24px;
+  --space-3xl: 32px;
+  --space-4xl: 48px;
+  --space-5xl: 64px;
+
+  // 圆角系统 (统一规范：xs=4px, sm=6px, md=8px, lg=12px)
+  --border-radius-xs: 4px;   // 超小元素 (checkbox等)
+  --border-radius-sm: 6px;   // 小元素 (下拉选项、关闭按钮等)
+  --border-radius-md: 8px;   // 表单控件 (input、select、button等)
+  --border-radius-lg: 12px;  // 容器组件 (card、table、dialog等)
+  --border-radius-xl: 12px;
+  --border-radius-2xl: 16px;
+  --border-radius-full: 50%;
+
+  // 自定义圆角 (继承art-design-pro)
+  --custom-radius: 16px;
+
+  // 主题色
+  --main-color: rgb(var(--art-primary));
+}
+
+// Dark 主题变量
+html.dark {
+  // Theme color (颜色保持一致)
+  --art-primary: 93, 135, 255;
+  --art-secondary: 73, 190, 255;
+  --art-error: 250, 137, 107;
+  --art-info: 83, 155, 255;
+  --art-success: 19, 222, 185;
+  --art-warning: 255, 174, 31;
+  --art-danger: 255, 77, 79;
+
+  // Theme background color
+  --art-bg-primary: 37, 54, 98;
+  --art-bg-secondary: 28, 69, 93;
+  --art-bg-success: 27, 60, 72;
+  --art-bg-error: 75, 49, 61;
+  --art-bg-info: 34, 54, 98;
+  --art-bg-warning: 77, 58, 42;
+  --art-bg-danger: 100, 49, 61;
+
+  --art-hoverColor: 51, 63, 85;
+  --art-grey100: 51, 63, 85;
+  --art-grey200: 70, 86, 112;
+
+  --art-color: #000000;
+  --art-light: #1b1c22;
+  --art-dark: #272a34;
+
+  // Background color | Hover color
+  --art-text-muted: #636674;
+  --art-gray-100: #1b1c22;
+  --art-gray-100-rgb: 27, 28, 34;
+  --art-gray-200: #26272f;
+  --art-gray-200-rgb: 38, 39, 47;
+  --art-gray-300: #363843;
+  --art-gray-300-rgb: 54, 56, 67;
+  --art-gray-400: #464852;
+  --art-gray-400-rgb: 70, 72, 82;
+  --art-gray-500: #636674;
+  --art-gray-500-rgb: 99, 102, 116;
+  --art-gray-600: #808290;
+  --art-gray-600-rgb: 128, 130, 144;
+  --art-gray-700: #9a9cae;
+  --art-gray-700-rgb: 154, 156, 174;
+  --art-gray-800: #b5b7c8;
+  --art-gray-800-rgb: 181, 183, 200;
+  --art-gray-900: #f5f5f5;
+  --art-gray-900-rgb: 245, 245, 245;
+
+  // Text color
+  --art-text-muted: #636674;
+  --art-text-gray-100: #1b1c22;
+  --art-text-gray-200: #26272f;
+  --art-text-gray-300: #363843;
+  --art-text-gray-400: #464852;
+  --art-text-gray-500: #636674;
+  --art-text-gray-600: #808290;
+  --art-text-gray-700: #9a9cae;
+  --art-text-gray-800: #b5b7c8;
+  --art-text-gray-900: #f5f5f5;
+
+  // Border
+  --art-border-color: #26272f;
+  --art-border-dashed-color: #363843;
+  --art-root-card-border-color: #1e2027;
+
+  // Shadow
+  --art-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
+  --art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
+  --art-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
+  --art-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
+
+  // Root card box、shadow
+  --art-root-card-box-shadow: none;
+  --art-root-card-border-color: #1e2027;
+
+  // Theme background color
+  --art-bg-color: #070707;
+  --art-main-bg-color: #161618;
+
+  // 兼容现有变量
+  --menuBg: #1b1c22;
+  --menuColor: var(--art-gray-600);
+  --menuActiveText: var(--art-gray-900);
+  --menuHover: var(--art-gray-200);
+
+  --subMenuBg: #1b1c22;
+  --subMenuActiveText: var(--art-gray-900);
+  --subMenuHover: var(--art-gray-200);
+  --subMenuTitleHover: var(--art-gray-200);
+
+  --fixedHeaderBg: var(--art-main-bg-color);
+  --tableHeaderBg: var(--art-gray-200);
+  --tableHeaderTextColor: var(--art-gray-700);
+}
+
+// CSS 全局变量
+:root {
+  --console-margin: 20px; // 工作台盒子间距
+  --art-card-border: rgba(var(--art-gray-300-rgb), 0.6); // 卡片边框颜色
+  --art-card-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04); // 卡片阴影
+
+  // 兼容现有变量
+  --menuBg: var(--art-main-bg-color);
+  --menuColor: var(--art-gray-600);
+  --menuActiveText: var(--art-gray-900);
+  --menuHover: rgba(var(--art-gray-200-rgb), 0.7);
+
+  --subMenuBg: var(--art-main-bg-color);
+  --subMenuActiveText: var(--art-gray-900);
+  --subMenuHover: rgba(var(--art-gray-200-rgb), 0.7);
+  --subMenuTitleHover: rgba(var(--art-gray-200-rgb), 0.7);
+
+  --fixedHeaderBg: var(--art-main-bg-color);
+  --tableHeaderBg: var(--art-gray-100);
+  --tableHeaderTextColor: var(--art-gray-700);
+
+  // ele
+  --brder-color: var(--art-border-color);
+
+  // 添加 tag 相关变量
+  --tags-view-active-bg: var(--main-color);
+  --tags-view-active-border-color: var(--main-color);
+}
+
+// 媒体查询-设备尺寸
+// notebook
+$device-notebook: 1600px;
+// ipad pro
+$device-ipad-pro: 1180px;
+// ipad
+$device-ipad: 800px;
+// ipad-竖屏
+$device-ipad-vertical: 900px;
+// mobile
+$device-phone: 500px;
+
+// 工具类样式
+.bg-primary {
+  background-color: rgb(var(--art-bg-primary)) !important;
+  color: rgb(var(--art-primary)) !important;
+}
+
+.bg-secondary {
+  background-color: rgb(var(--art-bg-secondary)) !important;
+  color: rgb(var(--art-secondary)) !important;
+  border: 1px solid var(--art-secondary);
+}
+
+.bg-warning {
+  background-color: rgb(var(--art-bg-warning)) !important;
+  color: rgb(var(--art-warning)) !important;
+}
+
+.bg-error {
+  background-color: rgb(var(--art-bg-error)) !important;
+  color: rgb(var(--art-error)) !important;
+}
+
+.bg-success {
+  background-color: rgb(var(--art-bg-success)) !important;
+  color: rgb(var(--art-success)) !important;
+}
+
+.bg-danger {
+  background-color: rgb(var(--art-bg-danger)) !important;
+  color: rgb(var(--art-danger)) !important;
+}
+
+.bg-grey100 {
+  background-color: rgb(var(--art-grey100)) !important;
+}
+
+.bg-grey200 {
+  background-color: rgb(var(--art-grey200)) !important;
+}
+
+.bg-hoverColor {
+  background-color: rgb(var(--art-hoverColor)) !important;
+}
+
+.text-primary {
+  color: rgb(var(--art-primary)) !important;
+}
+
+.text-secondary {
+  color: rgb(var(--art-secondary)) !important;
+}
+
+.text-error {
+  color: rgb(var(--art-error)) !important;
+}
+
+.text-danger {
+  color: rgb(var(--art-danger)) !important;
+}
+
+.text-info {
+  color: rgb(var(--art-info)) !important;
+}
+
+.text-success {
+  color: rgb(var(--art-success)) !important;
+}
+
+.text-warning {
+  color: rgb(var(--art-warning)) !important;
+}
+
+// 兼容现有SCSS变量
+$blue: #324157;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
+
+// Element Plus 颜色变量 (兼容)
+$--color-primary: rgb(var(--art-primary));
+$--color-success: rgb(var(--art-success));
+$--color-warning: rgb(var(--art-warning));
+$--color-danger: rgb(var(--art-danger));
+$--color-info: rgb(var(--art-info));
+
+$base-sidebar-width: 250px;

src/assets/styles/index.scss

@@ -1,3 +1,10 @@
+// Art Design Pro 样式系统
+@use './art-variables.scss';
+@use './art-global.scss';
+@use './art-element-ui.scss';
+@use './art-dark.scss';
+
+// 保留原有样式文件（兼容）
 @use './variables.module.scss' as *;
 @use './mixin.scss';
 @use './transition.scss';
@@ -42,6 +49,10 @@ html.dark svg {
   height: 100%;
 }
 
+#app .sidebar-container .sub-menu-title-noDropdown, #app .sidebar-container .el-sub-menu__title{
+  margin: 0px 8px 0 0 !important;
+}
+
 *,
 *:before,
 *:after {

src/assets/styles/sidebar.scss

@@ -16,6 +16,8 @@
     -webkit-transition: width 0.28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
+    min-width: $base-sidebar-width !important;
+    max-width: $base-sidebar-width !important;
     background-color: $base-menu-background;
     height: 100%;
     position: fixed;
@@ -37,7 +39,8 @@
     }
 
     .scrollbar-wrapper {
-      overflow-x: auto !important;
+      overflow-x: hidden !important;
+      overflow-y: auto !important;
     }
 
     .el-scrollbar__bar.is-vertical {
@@ -68,87 +71,219 @@
       margin-right: 16px;
     }
 
+    // 确保所有菜单项都不会撑宽容器
+    .el-menu-item,
+    .el-sub-menu__title,
+    .sub-menu-title-noDropdown {
+      box-sizing: border-box !important;
+      max-width: 100% !important;
+
+      span {
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        display: inline-block !important;
+        max-width: calc(100% - 50px) !important;
+      }
+    }
+
     .el-menu {
       border: none;
       height: 100%;
       width: 100% !important;
-      min-width: max-content;
+      max-width: 100% !important;
+      overflow: hidden !important;
+
+      // 浅色主题菜单样式
+      &:not(.el-menu-dark) {
+        .el-menu-item,
+        .el-sub-menu__title {
+          color: var(--art-text-gray-700) !important;
+          transition: all 0.3s ease !important;
+
+          &:hover {
+            color: var(--art-text-gray-800) !important;
+            background-color: rgba(var(--art-primary), 0.08) !important;
+          }
 
-      // 强制设置菜单文本颜色为纯黑色
-      color: #000000 !important;
+          .svg-icon {
+            color: var(--art-text-gray-600) !important;
+            transition: color 0.3s ease !important;
+          }
 
-      .el-menu-item,
-      .el-sub-menu__title {
-        color: #000000 !important;
+          &:hover .svg-icon {
+            color: rgb(var(--art-primary)) !important;
+          }
+        }
+
+        .el-menu-item.is-active {
+          color: rgb(var(--art-primary)) !important;
+          background-color: rgba(var(--art-primary), 0.1) !important;
+
+          .svg-icon {
+            color: rgb(var(--art-primary)) !important;
+          }
+        }
 
-        &:hover {
-          color: #000000 !important;
+        .is-active > .el-sub-menu__title {
+          color: rgb(var(--art-primary)) !important;
+
+          .svg-icon {
+            color: rgb(var(--art-primary)) !important;
+          }
         }
       }
 
-      .el-menu-item.is-active {
-        color: #203daf !important;
+      // 暗色主题菜单样式
+      &.el-menu-dark {
+        .el-menu-item,
+        .el-sub-menu__title {
+          color: var(--art-text-gray-700) !important;
+          transition: all 0.3s ease !important;
+
+          &:hover {
+            color: var(--art-text-gray-800) !important;
+            background-color: rgba(var(--art-primary), 0.15) !important;
+          }
+
+          .svg-icon {
+            color: var(--art-text-gray-600) !important;
+            transition: color 0.3s ease !important;
+          }
+
+          &:hover .svg-icon {
+            color: rgb(var(--art-primary)) !important;
+          }
+        }
+
+        .el-menu-item.is-active {
+          color: rgb(var(--art-primary)) !important;
+          background-color: rgba(var(--art-primary), 0.2) !important;
+
+          .svg-icon {
+            color: rgb(var(--art-primary)) !important;
+          }
+        }
+
+        .is-active > .el-sub-menu__title {
+          color: rgb(var(--art-primary)) !important;
+
+          .svg-icon {
+            color: rgb(var(--art-primary)) !important;
+          }
+        }
       }
     }
 
     .el-menu-item,
     .menu-title {
-      overflow: visible !important;
-      text-overflow: initial !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      max-width: 100% !important;
     }
 
-    .el-menu-item .el-menu-tooltip__trigger {
-      display: inline-block !important;
-    }
 
-    // menu hover
-    .theme-dark .sub-menu-title-noDropdown,
-    .theme-dark .el-sub-menu__title {
-      &:hover {
-        background-color: $base-sub-menu-title-hover !important;
-      }
-    }
+
+    // 子菜单和嵌套菜单样式优化
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
+      transition: all 0.3s ease !important;
+      border-radius: var(--border-radius-xs) !important;
+      margin: 2px 8px !important;
+
       &:hover {
-        background-color: rgba(0, 0, 0, 0.05) !important;
+        background-color: rgba(var(--art-primary), 0.08) !important;
+        color: var(--art-text-gray-800) !important;
       }
     }
 
-    & .theme-dark .is-active > .el-sub-menu__title {
-      color: $base-menu-color-active !important;
+    // 展开状态下多级菜单下拉图标位置修复
+    .el-sub-menu__title {
+      position: relative !important;
+      display: flex !important;
+      align-items: center !important;
+
+      .el-sub-menu__icon-arrow {
+        position: absolute !important;
+        right: 16px !important;
+        left: auto !important;
+        margin-left: 0 !important;
+        transition: transform 0.3s ease !important;
+      }
+
+      // 修复图标和文字布局
+      .svg-icon {
+        margin-right: 16px !important;
+        flex-shrink: 0 !important;
+      }
+
+      .menu-title {
+        flex: 1 !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+      }
     }
 
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
-    & .el-sub-menu .el-menu-item {
-      min-width: $base-sidebar-width !important;
+    .theme-dark .sub-menu-title-noDropdown,
+    .theme-dark .el-sub-menu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.1) !important;
+        background-color: rgba(var(--art-primary), 0.15) !important;
+        color: var(--art-text-gray-800) !important;
       }
     }
 
-    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
-    & .theme-dark .el-sub-menu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+    // 嵌套菜单项样式
+    .nest-menu .el-sub-menu > .el-sub-menu__title,
+    .el-sub-menu .el-menu-item {
+      max-width: calc(100% - 16px) !important;
+      width: auto !important;
+      border-radius: var(--border-radius-xs) !important;
+      margin: 1px 8px !important;
+      transition: all 0.3s ease !important;
+      overflow: hidden !important;
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        background-color: rgba(var(--art-primary), 0.06) !important;
+        color: var(--art-text-gray-800) !important;
+
+        .svg-icon {
+          color: rgb(var(--art-primary)) !important;
+        }
       }
-    }
 
-    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
-    & .theme-dark .el-menu-item {
-      &:hover {
-        // you can use $sub-menuHover
-        background-color: $base-menu-hover !important;
+      &.is-active {
+        background-color: rgba(var(--art-primary), 0.1) !important;
+        color: rgb(var(--art-primary)) !important;
+
+        .svg-icon {
+          color: rgb(var(--art-primary)) !important;
+        }
       }
     }
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
-    & .el-menu-item {
+
+    // 暗色主题嵌套菜单
+    .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    .theme-dark .el-sub-menu .el-menu-item {
+      background-color: transparent !important;
+
       &:hover {
-        // you can use $sub-menuHover
-        background-color: rgba(0, 0, 0, 0.04) !important;
+        background-color: rgba(var(--art-primary), 0.12) !important;
+        color: var(--art-text-gray-800) !important;
+
+        .svg-icon {
+          color: rgb(var(--art-primary)) !important;
+        }
+      }
+
+      &.is-active {
+        background-color: rgba(var(--art-primary), 0.2) !important;
+        color: rgb(var(--art-primary)) !important;
+
+        .svg-icon {
+          color: rgb(var(--art-primary)) !important;
+        }
       }
     }
   }
@@ -156,38 +291,150 @@
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
+      min-width: 54px !important;
+      max-width: 54px !important;
     }
 
     .main-container {
       margin-left: 54px;
     }
 
+    // 确保展开状态下一级菜单与多级菜单对齐一致
+    .el-menu:not(.el-menu--collapse) > .el-menu-item {
+      margin: 2px 8px !important;
+      border-radius: var(--border-radius-xs) !important;
+      transition: all 0.3s ease !important;
+
+      &:hover {
+        background-color: rgba(var(--art-primary), 0.08) !important;
+        color: var(--art-text-gray-800) !important;
+      }
+    }
+
+    // 收起状态下所有菜单项统一居中对齐样式
+    .el-menu-item,
     .sub-menu-title-noDropdown {
+      display: flex !important;
+      justify-content: center !important;
+      align-items: center !important;
       padding: 0 !important;
-      position: relative;
+      margin: 2px 0 !important;
+      height: 48px !important;
+      min-height: 48px !important;
+      width: 54px !important;
 
       .el-tooltip {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+        width: 100% !important;
+        height: 100% !important;
         padding: 0 !important;
+      }
 
-        .svg-icon {
-          margin-left: 20px;
-        }
+      .svg-icon {
+        margin: 0 !important;
+        font-size: 16px !important;
+        width: 16px !important;
+        height: 16px !important;
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
       }
     }
 
+    // 多级菜单标题统一样式
     .el-sub-menu {
       overflow: hidden;
 
       & > .el-sub-menu__title {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
         padding: 0 !important;
+        margin: 2px 0 !important;
+        height: 48px !important;
+        min-height: 48px !important;
+        width: 54px !important;
 
         .svg-icon {
-          margin-left: 20px;
+          margin: 0 !important;
+          font-size: 16px !important;
+          width: 16px !important;
+          height: 16px !important;
+          display: flex !important;
+          justify-content: center !important;
+          align-items: center !important;
+        }
+
+        // 收起状态下隐藏下拉箭头
+        .el-sub-menu__icon-arrow {
+          display: none !important;
+        }
+
+        .menu-title {
+          display: none !important;
         }
       }
     }
 
     .el-menu--collapse {
+      // 一级菜单项特殊处理
+      .el-menu > .el-menu-item {
+        height: 48px !important;
+        line-height: 48px !important;
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+        padding: 0 !important;
+        margin: 2px 0 !important;
+        width: 54px !important;
+
+        .el-tooltip,
+        .el-menu-tooltip__trigger {
+          display: flex !important;
+          justify-content: center !important;
+          align-items: center !important;
+          width: 100% !important;
+          height: 100% !important;
+          padding: 0 !important;
+        }
+
+        .svg-icon {
+          display: flex !important;
+          justify-content: center !important;
+          align-items: center !important;
+          width: 16px !important;
+          height: 16px !important;
+          font-size: 16px !important;
+          margin: 0 !important;
+        }
+      }
+
+      // 确保所有收起状态下的菜单项都有相同的样式
+      .el-menu-item,
+      .sub-menu-title-noDropdown,
+      .el-sub-menu__title {
+        height: 48px !important;
+        line-height: 48px !important;
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+        padding: 0 !important;
+        margin: 2px 0 !important;
+        width: 54px !important;
+
+        .svg-icon {
+          display: flex !important;
+          justify-content: center !important;
+          align-items: center !important;
+          width: 16px !important;
+          height: 16px !important;
+          font-size: 16px !important;
+          margin: 0 !important;
+        }
+      }
+
       .el-sub-menu {
         & > .el-sub-menu__title {
           & > span {
@@ -209,6 +456,29 @@
     }
   }
 
+  // 展开状态下多级菜单下拉图标位置修复（应用于所有展开状态的菜单）
+  .sidebar-container:not(.hideSidebar) {
+    .el-menu:not(.el-menu--collapse) {
+      .el-sub-menu__title {
+        padding-right: 40px !important; // 为右侧箭头预留空间
+
+        .el-sub-menu__icon-arrow {
+          display: block !important;
+          position: absolute !important;
+          right: 16px !important;
+          left: auto !important;
+          margin-left: 0 !important;
+          transform: rotate(0deg) !important;
+          transition: transform 0.3s ease !important;
+        }
+
+        &.is-opened .el-sub-menu__icon-arrow {
+          transform: rotate(180deg) !important;
+        }
+      }
+    }
+  }
+
   .el-menu--collapse .el-menu .el-sub-menu {
     min-width: $base-sidebar-width !important;
   }
@@ -249,3 +519,19 @@
     }
   }
 }
+
+// 强制所有菜单弹出层保持在sidebar宽度内
+.el-menu--popup {
+  max-width: 200px !important;
+
+  .el-menu-item {
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+}
+
+// 确保sidebar容器始终保持固定宽度
+.sidebar-container * {
+  box-sizing: border-box;
+}

src/assets/styles/variables.module.scss

@@ -1,80 +1,83 @@
-// 全局SCSS变量
+// 全局SCSS变量 - 与Art Design Pro兼容
 :root {
-  --menuBg: #304156;
-  --menuColor: #bfcbd9;
-  --menuActiveText: #f4f4f5;
-  --menuHover: #263445;
+  // 菜单相关变量已在art-variables.scss中定义，这里保持兼容
+  --menuBg: var(--art-main-bg-color);
+  --menuColor: var(--art-gray-600);
+  --menuActiveText: var(--art-gray-900);
+  --menuHover: rgba(var(--art-gray-200-rgb), 0.7);
 
-  --subMenuBg: #1f2d3d;
-  --subMenuActiveText: #f4f4f5;
-  --subMenuHover: #001528;
-  --subMenuTitleHover: #293444;
+  --subMenuBg: var(--art-main-bg-color);
+  --subMenuActiveText: var(--art-gray-900);
+  --subMenuHover: rgba(var(--art-gray-200-rgb), 0.7);
+  --subMenuTitleHover: rgba(var(--art-gray-200-rgb), 0.7);
 
-  --fixedHeaderBg: #ffffff;
-  --tableHeaderBg: #f8f8f9;
-  --tableHeaderTextColor: #515a6e;
+  --fixedHeaderBg: var(--art-main-bg-color);
+  --tableHeaderBg: var(--art-gray-100);
+  --tableHeaderTextColor: var(--art-text-gray-700);
 
-  // ele
-  --brder-color: #e8e8e8;
+  // ele - 使用新的变量系统
+  --brder-color: var(--art-border-color);
 
   // 添加 tag 相关变量
-  --tags-view-active-bg: var(--el-color-primary);
-  --tags-view-active-border-color: var(--el-color-primary);
+  --tags-view-active-bg: var(--main-color);
+  --tags-view-active-border-color: var(--main-color);
 }
 
 html.dark {
-  --menuBg: #1d1e1f;
-  --menuColor: #bfcbd9;
-  --menuActiveText: #f4f4f5;
-  --menuHover: #171819;
+  // 暗色主题变量已在art-variables.scss中定义，这里保持兼容
+  --menuBg: var(--art-main-bg-color);
+  --menuColor: var(--art-gray-600);
+  --menuActiveText: var(--art-gray-900);
+  --menuHover: rgba(var(--art-gray-200-rgb), 0.6);
 
-  --subMenuBg: #1d1e1f;
-  --subMenuActiveText: #1d1e1f;
-  --subMenuHover: #171819;
-  --subMenuTitleHover: #171819;
+  --subMenuBg: var(--art-main-bg-color);
+  --subMenuActiveText: var(--art-gray-900);
+  --subMenuHover: rgba(var(--art-gray-200-rgb), 0.6);
+  --subMenuTitleHover: rgba(var(--art-gray-200-rgb), 0.6);
 
-  --fixedHeaderBg: #171819;
-  --tableHeaderBg: var(--el-bg-color);
-  --tableHeaderTextColor: var(--el-text-color);
+  --fixedHeaderBg: var(--art-main-bg-color);
+  --tableHeaderBg: var(--art-gray-200);
+  --tableHeaderTextColor: var(--art-text-gray-700);
 
   // 覆盖ele 高亮当前行的标准暗色
   .el-tree-node__content {
-    --el-color-primary-light-9: #262727;
+    --el-color-primary-light-9: rgba(var(--art-gray-200-rgb), 0.3);
   }
 
   .el-button--primary {
-    --el-button-bg-color: var(--el-color-primary-dark-6);
-    --el-button-border-color: var(--el-color-primary-light-2);
+    --el-button-bg-color: rgb(var(--art-primary));
+    --el-button-border-color: rgb(var(--art-primary));
   }
 
   .el-switch {
-    --el-switch-on-color: var(--el-color-primary-dark-6);
-    --el-switch-border-color: var(--el-color-primary-light-2);
+    --el-switch-on-color: rgb(var(--art-primary));
+    --el-switch-border-color: rgb(var(--art-primary));
   }
 
   .el-tag--primary {
-    --el-tag-bg-color: var(--el-color-primary-dark-6);
-    --el-tag-border-color: var(--el-color-primary-light-2);
+    --el-tag-bg-color: rgb(var(--art-bg-primary));
+    --el-tag-border-color: rgb(var(--art-primary));
   }
 
-  // 在深色模式下使用更深的颜色
-  --tags-view-active-bg: var(--el-color-primary-dark-6);
-  --tags-view-active-border-color: var(--el-color-primary-light-2);
-  // vxe-table 主题
-  --vxe-font-color: #98989e;
-  --vxe-primary-color: #2c7ecf;
-  --vxe-icon-background-color: #98989e;
-  --vxe-table-font-color: #98989e;
-  --vxe-table-resizable-color: #95969a;
-  --vxe-table-header-background-color: #28282a;
-  --vxe-table-body-background-color: #151518;
-  --vxe-table-background-color: #4a5663;
+  // 在深色模式下使用Art Design Pro颜色
+  --tags-view-active-bg: var(--main-color);
+  --tags-view-active-border-color: var(--main-color);
+
+  // vxe-table 主题 - 使用新的颜色系统
+  --vxe-font-color: var(--art-text-gray-600);
+  --vxe-primary-color: rgb(var(--art-primary));
+  --vxe-icon-background-color: var(--art-text-gray-600);
+  --vxe-table-font-color: var(--art-text-gray-600);
+  --vxe-table-resizable-color: var(--art-text-gray-500);
+  --vxe-table-header-background-color: var(--art-gray-200);
+  --vxe-table-body-background-color: var(--art-main-bg-color);
+  --vxe-table-background-color: var(--art-main-bg-color);
   --vxe-table-border-width: 1px;
-  --vxe-table-border-color: #37373a;
-  --vxe-toolbar-background-color: #37373a;
+  --vxe-table-border-color: var(--art-border-color);
+  --vxe-toolbar-background-color: var(--art-gray-200);
 
   // ele
-  --brder-color: #37373a;
+  --brder-color: var(--art-border-color);
 }
 
 // base color
@@ -106,13 +109,14 @@ $fixed-header-bg: var(--fixedHeaderBg);
 $table-header-bg: var(--tableHeaderBg);
 $table-header-text-color: var(--tableHeaderTextColor);
 
-$--color-primary: #409eff;
-$--color-success: #67c23a;
-$--color-warning: #e6a23c;
-$--color-danger: #f56c6c;
-$--color-info: #909399;
+// 使用Art Design Pro颜色系统
+$--color-primary: rgb(var(--art-primary));
+$--color-success: rgb(var(--art-success));
+$--color-warning: rgb(var(--art-warning));
+$--color-danger: rgb(var(--art-danger));
+$--color-info: rgb(var(--art-info));
 
-$base-sidebar-width: 250px;
+$base-sidebar-width: 270px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
@@ -127,9 +131,9 @@ $base-sidebar-width: 250px;
   sideBarWidth: $base-sidebar-width;
   logoTitleColor: $base-logo-title-color;
   logoLightTitleColor: $base-logo-light-title-color;
-  primaryColor: $--color-primary;
-  successColor: $--color-success;
-  dangerColor: $--color-danger;
-  infoColor: $--color-info;
-  warningColor: $--color-warning;
+  primaryColor: rgb(var(--art-primary));
+  successColor: rgb(var(--art-success));
+  dangerColor: rgb(var(--art-danger));
+  infoColor: rgb(var(--art-info));
+  warningColor: rgb(var(--art-warning));
 }

src/layout/components/Navbar.vue

@@ -42,25 +42,25 @@
             </el-popover>
           </div>
         </el-tooltip>
-        <el-tooltip content="Github" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="Github" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
-        <el-tooltip :content="proxy.$t('navbar.document')" effect="dark" placement="bottom">
+        <!-- <el-tooltip :content="proxy.$t('navbar.document')" effect="dark" placement="bottom">
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
         <el-tooltip :content="proxy.$t('navbar.full')" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-        <el-tooltip :content="proxy.$t('navbar.language')" effect="dark" placement="bottom">
+        <!-- <el-tooltip :content="proxy.$t('navbar.language')" effect="dark" placement="bottom">
           <lang-select id="lang-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
-        <el-tooltip :content="proxy.$t('navbar.layoutSize')" effect="dark" placement="bottom">
+        <!-- <el-tooltip :content="proxy.$t('navbar.layoutSize')" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
       </template>
       <div class="avatar-container">
         <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
@@ -288,9 +288,9 @@ watch(
 
         .user-avatar {
           cursor: pointer;
-          width: 30px;
+          width: 60px;
           height: 30px;
-          border-radius: 10px;
+          border-radius: 8px;
           margin-top: 10px;
         }
 

src/layout/components/TagsView/index.vue

@@ -240,74 +240,168 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 48px;
+  height: 52px;
   width: 100%;
-  // background-color: var(--el-bg-color);
-  // border-bottom: 1px solid var(--el-border-color-light);
-  // box-shadow:
-  //   0 1px 3px 0 rgba(0, 0, 0, 0.12),
-  //   0 0 3px 0 rgba(0, 0, 0, 0.04);
+  background: var(--art-bg-color);
+  // border-bottom: 1px solid var(--art-border-color);
+  padding: var(--space-sm) var(--space-lg);
+  // box-shadow: var(--art-box-shadow-xs);
+
   .tags-view-wrapper {
     .tags-view-item {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       position: relative;
       cursor: pointer;
-      height: 30px;
-      line-height: 30px;
-      background-color: var(--el-bg-color);
-      border: 1px solid var(--el-border-color-light);
-      color: #000000;
-      padding: 0 8px;
-      font-size: 14px;
-      margin-left: 5px;
-      margin-top: 10px;
-      border-radius: 3px;
+      height: 32px;
+      line-height: 1;
+      background: var(--art-gray-100);
+      border: 1px solid var(--art-border-color);
+      color: var(--art-text-gray-700);
+      padding: 0 var(--space-sm);
+      font-size: 13px;
+      margin-left: var(--space-sm);
+      border-radius: var(--border-radius-sm);
+      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+      user-select: none;
+      white-space: nowrap;
+
+      // Icon spacing
+      .svg-icon {
+        margin-right: var(--space-xs);
+        font-size: 12px;
+      }
+
       &:hover {
-        color: var(--el-color-primary);
+        color: rgb(var(--art-primary));
+        background: rgba(var(--art-primary), 0.06);
+        border-color: rgba(var(--art-primary), 0.2);
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(var(--art-primary), 0.15);
       }
+
       &:first-of-type {
-        margin-left: 15px;
+        margin-left: 0;
       }
+
       &:last-of-type {
-        margin-right: 15px;
+        margin-right: 0;
       }
+
       &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
+        background: linear-gradient(135deg, rgb(var(--art-primary)) 0%, rgba(var(--art-primary), 0.9) 100%);
+        color: #ffffff;
+        border-color: rgb(var(--art-primary));
+        box-shadow: 0 2px 8px rgba(var(--art-primary), 0.3);
+        font-weight: 500;
+
         &::before {
           content: '';
-          background: #fff;
+          background: #ffffff;
           display: inline-block;
-          width: 8px;
-          height: 8px;
+          width: 6px;
+          height: 6px;
           border-radius: 50%;
           position: relative;
-          margin-right: 5px;
+          margin-right: var(--space-xs);
+          flex-shrink: 0;
+        }
+
+        &:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(var(--art-primary), 0.4);
+        }
+      }
+
+      // Close button styles
+      .el-icon-close {
+        margin-left: var(--space-xs);
+        opacity: 0.6;
+        transition: all 0.2s;
+
+        &:hover {
+          opacity: 1;
+          color: inherit;
         }
       }
     }
   }
+
+  // Remove dot for active tags with icons
   .tags-view-item.active.has-icon::before {
-    content: none !important;
+    display: none;
   }
+
   .contextmenu {
     margin: 0;
-    background: var(--el-bg-color);
+    background: var(--art-main-bg-color);
     z-index: 3000;
     position: absolute;
     list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 12px;
+    padding: var(--space-xs) 0;
+    border-radius: var(--border-radius-md);
+    font-size: 13px;
     font-weight: 400;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    color: var(--art-text-gray-700);
+    box-shadow: var(--art-box-shadow);
+    border: 1px solid var(--art-border-color);
+    min-width: 120px;
+
     li {
       margin: 0;
-      padding: 7px 16px;
+      padding: var(--space-sm) var(--space-lg);
       cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      transition: all 0.2s;
+
       &:hover {
-        background: #eee;
+        background: rgba(var(--art-primary), 0.06);
+        color: rgb(var(--art-primary));
+      }
+
+      &:first-child {
+        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+      }
+    }
+  }
+}
+
+// Dark theme adaptations
+html.dark {
+  .tags-view-container {
+    .tags-view-wrapper {
+      .tags-view-item {
+        background: var(--art-gray-200);
+        color: var(--art-text-gray-600);
+        border-color: var(--art-border-color);
+
+        &:hover {
+          background: rgba(var(--art-primary), 0.1);
+          border-color: rgba(var(--art-primary), 0.3);
+        }
+
+        &.active {
+          background: linear-gradient(135deg, rgb(var(--art-primary)) 0%, rgba(var(--art-primary), 0.9) 100%);
+          color: #ffffff;
+          border-color: rgb(var(--art-primary));
+        }
+      }
+    }
+
+    .contextmenu {
+      background: var(--art-gray-200);
+      border-color: var(--art-border-color);
+      color: var(--art-text-gray-600);
+
+      li:hover {
+        background: rgba(var(--art-primary), 0.15);
+        color: rgb(var(--art-primary));
       }
     }
   }
@@ -319,25 +413,31 @@ onMounted(() => {
 .tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {
-      width: 16px;
-      height: 16px;
-      vertical-align: 2px;
+      width: 14px;
+      height: 14px;
       border-radius: 50%;
       text-align: center;
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
       transform-origin: 100% 50%;
+      opacity: 0.6;
+
       &:before {
-        transform: scale(0.6);
+        transform: scale(0.7);
         display: inline-block;
-        vertical-align: -3px;
+        vertical-align: -2px;
       }
+
       &:hover {
-        background-color: #b4bccc;
-        color: #fff;
-        width: 12px !important;
-        height: 12px !important;
+        background-color: rgba(255, 255, 255, 0.2);
+        opacity: 1;
+        transform: scale(1.1);
       }
     }
+
+    &.active .el-icon-close:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+    }
   }
 }
 </style>

src/plugins/modal.ts

@@ -20,19 +20,30 @@ export default {
   },
   // 弹出提示
   alert(content: any) {
-    ElMessageBox.alert(content, '系统提示');
+    ElMessageBox.alert(content, '系统提示', {
+      confirmButtonClass: 'el-button--primary'
+    });
   },
   // 错误提示
   alertError(content: any) {
-    ElMessageBox.alert(content, '系统提示', { type: 'error' });
+    ElMessageBox.alert(content, '系统提示', {
+      type: 'error',
+      confirmButtonClass: 'el-button--primary'
+    });
   },
   // 成功提示
   alertSuccess(content: any) {
-    ElMessageBox.alert(content, '系统提示', { type: 'success' });
+    ElMessageBox.alert(content, '系统提示', {
+      type: 'success',
+      confirmButtonClass: 'el-button--primary'
+    });
   },
   // 警告提示
   alertWarning(content: any) {
-    ElMessageBox.alert(content, '系统提示', { type: 'warning' });
+    ElMessageBox.alert(content, '系统提示', {
+      type: 'warning',
+      confirmButtonClass: 'el-button--primary'
+    });
   },
   // 通知提示
   notify(content: any) {
@@ -55,7 +66,10 @@ export default {
     return ElMessageBox.confirm(content, '系统提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning'
+      type: 'warning',
+      // 使用自定义样式类确保按钮样式正确应用
+      confirmButtonClass: 'el-button--primary',
+      cancelButtonClass: 'el-button--default'
     });
   },
   // 提交内容
@@ -63,7 +77,10 @@ export default {
     return ElMessageBox.prompt(content, '系统提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
-      type: 'warning'
+      type: 'warning',
+      // 使用自定义样式类确保按钮样式正确应用
+      confirmButtonClass: 'el-button--primary',
+      cancelButtonClass: 'el-button--default'
     });
   },
   // 打开遮罩层

src/views/hq/answerSurvey/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="app-container">
+    <div class="art-card">
+      <div class="art-card-header">
+        <h3>问卷调查答题</h3>
+      </div>
+      <div class="art-card-body">
+        <p>此页面正在开发中...</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 问卷调查答题页面
+defineOptions({
+  name: 'AnswerSurvey'
+})
+</script>
+
+<style scoped lang="scss">
+// 使用Art Design Pro样式系统
+</style>

src/views/hq/hallInfo/index.vue

@@ -138,7 +138,7 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button :loading="buttonLoading" plain type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>

src/views/login.vue

@@ -5,14 +5,14 @@
         <h3 class="title">{{ title }}</h3>
         <lang-select />
       </div>
-      <el-form-item v-if="tenantEnabled" prop="tenantId">
+      <el-form-item v-if="tenantEnabled" prop="tenantId" class="el_select_coopr">
         <el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
           <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
           <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
         </el-select>
       </el-form-item>
       <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="proxy.$t('login.username')">
           <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
         </el-input>
       </el-form-item>
@@ -20,7 +20,6 @@
         <el-input
           v-model="loginForm.password"
           type="password"
-          size="large"
           auto-complete="off"
           :placeholder="proxy.$t('login.password')"
           @keyup.enter="handleLogin"
@@ -29,14 +28,7 @@
         </el-input>
       </el-form-item>
       <el-form-item v-if="captchaEnabled" prop="code">
-        <el-input
-          v-model="loginForm.code"
-          size="large"
-          auto-complete="off"
-          :placeholder="proxy.$t('login.code')"
-          style="width: 63%"
-          @keyup.enter="handleLogin"
-        >
+        <el-input v-model="loginForm.code" auto-complete="off" :placeholder="proxy.$t('login.code')" style="width: 63%" @keyup.enter="handleLogin">
           <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
         </el-input>
         <div class="login-code">
@@ -261,15 +253,47 @@ onMounted(() => {
   width: 400px;
   padding: 25px 25px 5px 25px;
   z-index: 1;
-  .el-input {
-    height: 40px;
+
+  // 统一所有表单控件的高度为32px（与全局保持一致）
+  .el-input,
+  .el-select {
+    height: 32px !important;
+    min-height: 32px !important;
+    max-height: 32px !important;
+
+    .el-input__wrapper {
+      height: 32px !important;
+      min-height: 32px !important;
+      max-height: 32px !important;
+      box-sizing: border-box !important;
+    }
+
+    .el-input__inner,
     input {
-      height: 40px;
+      height: 32px !important;
+      min-height: 32px !important;
+      max-height: 32px !important;
+      line-height: 32px !important;
+    }
+
+    .el-input__prefix,
+    .el-input__suffix {
+      height: 32px !important;
+      line-height: 32px !important;
+    }
+  }
+
+  // 特别针对select组件的高度控制
+  .el-select {
+    .el-input {
+      height: 32px !important;
+      min-height: 32px !important;
+      max-height: 32px !important;
     }
   }
 
   .input-icon {
-    height: 39px;
+    height: 31px;
     width: 14px;
     margin-left: 0px;
   }
@@ -283,7 +307,7 @@ onMounted(() => {
 
 .login-code {
   width: 33%;
-  height: 40px;
+  height: 32px;
   float: right;
 
   img {
@@ -306,7 +330,20 @@ onMounted(() => {
 }
 
 .login-code-img {
-  height: 40px;
+  height: 32px;
   padding-left: 12px;
 }
+
+// 针对公司选择下拉框的特殊样式
+.el_select_coopr {
+  :deep(.el-select__wrapper) {
+    padding: 0px 12px !important;
+    border-radius: 8px;
+  }
+
+  :deep(.el-input__wrapper) {
+    padding: 0px 12px !important;
+    border-radius: 8px;
+  }
+}
 </style>