audio/dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(tabs): 更新标签页视图组件设计与交互细节

Browse Source 
- 采用固定内边距策略，解决标签页悬停时的布局抖动问题
- 统一关闭按钮尺寸为14x14px，提升视觉一致性
- 优化活动标签和悬停状态的层级管理，确保视觉层次正确
- 增强视觉反馈，添加内嵌阴影效果改善用户体验
- 添加平滑颜色过渡动画（0.2秒），提升交互流畅度
- 支持玻璃拟态设计系统，实现现代化视觉风格
- 完善工具箱图标支持，确保标签页工具功能准确显示
This commit is contained in:
eafonyang
2026-07-15 09:58:56 +08:00
parent 003b44e2bd
commit f48f1cce70
27 changed files with 670 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.qoder/repowiki/zh/content/开发指南/设计系统.md
+78 -48
View File
@@ -25,10 +25,11 @@
## 更新摘要
**变更内容**
- 完全重构前端视觉设计系统，采用全新的玻璃拟态美学风格
- 实现797+行自定义CSS属性，构建完整的空间主题色彩系统
- 引入现代视觉语言，替代之前的Anthropic风格暖奶油设计
- 新增多层级玻璃表面、模糊效果、光晕系统和深度层级管理
- 全面增强玻璃拟态主题系统，提升透明度与模糊效果质量
- 新增多层级阴影变量系统，优化视觉深度层次
- 精炼色彩调色板，以青色强调色替代珊瑚粉色系
- 重构表格样式系统，建立更清晰的视觉层级结构
- 扩展CSS变量体系，支持1272行完整的设计令牌定义
## 目录
1. [简介](#简介)
@@ -49,7 +50,7 @@
## 简介
本项目是一个面向耳机品牌与型号管理的后台管理系统，包含前后端分离的完整实现：前端基于 Vue 3 + Element Plus，后端基于 Express + Sequelize（MySQL），通过 Docker Compose 进行容器化部署。系统提供品牌管理、型号管理、OTA 升级包管理、黑名单管理、定向升级、分享码日志以及用户认证等能力。
**最新更新**：系统已完成全面的设计系统重构，采用全新的玻璃拟态美学风格，结合空间主题色彩系统和现代视觉语言，为用户提供沉浸式的深色界面体验。
**最新更新**：系统已完成全面的设计系统重构，采用全新的玻璃拟态美学风格，结合空间主题色彩系统和现代视觉语言，为用户提供沉浸式的深色界面体验。**最新增强版本引入了更精细的透明度控制、优化的模糊效果和重构的色彩系统，显著提升了整体视觉质量和用户体验。**
## 设计哲学与核心理念
@@ -88,12 +89,15 @@ Luxsin CMS Dashboard 采用三层融合设计语言，将登录页的精致玻
--lux-space-200: #cbd5e1;
--lux-space-100: #e2e8f0; /* strong text */
/* 品牌色 */
/* 品牌色 - 已优化为青色强调色系 */
--lux-cyan: #38bdf8; /* 主品牌 */
--lux-cyan-light: #7dd3fc;
--lux-cyan-glow: rgba(56, 189, 248, 0.25);
--lux-indigo: #6366f1;
--lux-violet: #7c3aed;
--lux-coral: #fb7185; /* 保留用于渐变过渡 */
--lux-coral-light: #fda4af;
--lux-coral-glow: rgba(251, 113, 133, 0.25);
```
### 语义化Token定义
@@ -110,24 +114,27 @@ Luxsin CMS Dashboard 采用三层融合设计语言，将登录页的精致玻
--lux-text-muted: #94a3b8; /* 辅助文本 — 对比度 5.8:1 */
--lux-text-dim: #64748b; /* 最弱文本 — 对比度 3.5:1 (仅装饰性) */
/* 玻璃表面 */
--lux-glass-bg-card: rgba(30, 41, 59, 0.55); /* 卡片 */
--lux-glass-bg-table: rgba(30, 41, 59, 0.45); /* 表格 */
/* 玻璃表面 - 透明度已优化 */
--lux-glass-bg-card: rgba(30, 41, 59, 0.42); /* 卡片 - 透明度降低至42% */
--lux-glass-bg-table: rgba(30, 41, 59, 0.20); /* 表格 - 透明度大幅降低至20% */
--lux-glass-bg-input: rgba(15, 23, 42, 0.45); /* 输入框 */
--lux-glass-bg-dialog: rgba(30, 41, 59, 0.72); /* 对话框 */
--lux-glass-bg-sidebar: rgba(15, 23, 42, 0.60); /* 侧栏 */
--lux-glass-bg-header: rgba(30, 41, 59, 0.75); /* 顶栏 */
--lux-glass-bg-tab: rgba(30, 41, 59, 0.35); /* 标签页 */
--lux-glass-bg-tab-active: rgba(30, 41, 59, 0.55); /* 激活标签页 */
--lux-glass-bg-dropdown: rgba(30, 41, 59, 0.82); /* 下拉菜单 */
/* 玻璃边框 */
/* 玻璃边框 - 增强可见性 */
--lux-glass-border: rgba(255, 255, 255, 0.08);
--lux-glass-border-hover: rgba(255, 255, 255, 0.14);
--lux-glass-border-focus: rgba(56, 189, 248, 0.45);
/* 模糊强度 */
/* 模糊强度 - 新增饱和度控制 */
--lux-blur-sm: blur(8px);
--lux-blur-md: blur(14px);
--lux-blur-lg: blur(20px);
--lux-blur-lg-saturate: blur(20px) saturate(1.4); /* 增强饱和度的模糊 */
--lux-blur-xl: blur(24px);
```
@@ -135,19 +142,24 @@ Luxsin CMS Dashboard 采用三层融合设计语言，将登录页的精致玻
系统采用4级深度层级，通过阴影和透明度建立清晰的空间层次：
```css
/* 4级 Elevation */
/* 4级 Elevation - 已增强阴影效果 */
--lux-shadow-card:
0 4px 24px rgba(0, 0, 0, 0.22), /* 卡片基础阴影 */
0 0 0 1px rgba(255, 255, 255, 0.05) inset, /* 内发光边框 */
0 1px 0 rgba(255, 255, 255, 0.08) inset; /* 顶部高光 */
--lux-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.18); /* 卡片 resting */
--lux-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.25); /* 卡片 hover / 浮起 */
--lux-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.35); /* 弹出层 */
--lux-shadow-4: 0 25px 50px rgba(0, 0, 0, 0.50); /* 对话框 overlay */
--lux-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.50); /* 对话框 overlay - 优化扩散范围 */
/* 品牌 glow (焦点态) */
/* 品牌 glow (焦点态) - 青色强调色 */
--lux-glow-cyan: 0 0 0 3px rgba(56, 189, 248, 0.15), 0 0 0 1px rgba(56, 189, 248, 0.45) inset;
```
**章节来源**
- [DESIGN.md:28-97](file://DESIGN.md#L28-L97)
- [frontend/src/styles/lux-theme.css:11-78](file://frontend/src/styles/lux-theme.css#L11-L78)
- [frontend/src/styles/lux-theme.css:11-83](file://frontend/src/styles/lux-theme.css#L11-L83)
## 玻璃拟态设计语言
@@ -167,9 +179,9 @@ Luxsin CMS Dashboard 采用三层融合设计语言，将登录页的精致玻
graph TB
subgraph "动态背景层"
BG["深空背景 #0a0e14"]
ORB1["青色光球 #22d3ee<br/>位置：左上角"]
ORB2["紫色光球 #a78bfa<br/>位置：右侧中部"]
ORB3["珊瑚色光球 #fb7185<br/>位置：底部中央"]
ORB1["青色光球 #22d3ee<br/>位置：左上角<br/>尺寸：52vw × 52vw"]
ORB2["紫色光球 #a78bfa<br/>位置：右侧中部<br/>尺寸：48vw × 48vw"]
ORB3["珊瑚色光球 #fb7185<br/>位置：底部中央<br/>尺寸：42vw × 42vw"]
end
subgraph "内容层"
UI["UI组件层<br/>z-index: 1+"]
@@ -183,8 +195,8 @@ ORB3 --> UI
```
**图表来源**
- [frontend/src/styles/lux-theme.css:98-129](file://frontend/src/styles/lux-theme.css#L98-L129)
- [frontend/src/layout/index.vue:3-7](file://frontend/src/layout/index.vue#L3-L7)
- [frontend/src/styles/lux-theme.css:103-134](file://frontend/src/styles/lux-theme.css#L103-L134)
- [frontend/src/layout/index.vue:3-8](file://frontend/src/layout/index.vue#L3-L8)
### 字体系统与排版
系统采用现代化的字体栈和排版规范：
@@ -210,33 +222,37 @@ ORB3 --> UI
### 卡片组件（el-card）
```
背景: var(--lux-glass-bg-card)
模糊: var(--lux-blur-lg) [20px]
边框: 1px solid var(--lux-glass-border)
背景: var(--lux-glass-bg-card) [透明度42%]
模糊: var(--lux-blur-lg-saturate) [20px + 1.4x饱和度]
边框: 1px solid rgba(255, 255, 255, 0.12)
圆角: var(--lux-radius-lg) [14px]
阴影: var(--lux-shadow-1)
hover 阴影: var(--lux-shadow-2)
阴影: var(--lux-shadow-card) [多层复合阴影]
hover 阴影: var(--lux-shadow-2) + inset glow
padding: 20px (body), 16px 20px (header)
```
### 表格组件（el-table）
### 表格组件（el-table）- **已重构**
```
表头背景: rgba(15, 23, 42, 0.65) + blur(14px)
行背景: transparent (卡片底色透出)
hover 行: rgba(56, 189, 248, 0.06)
hover 行: rgba(56, 189, 248, 0.06) [青色高亮]
边框色: rgba(255, 255, 255, 0.06)
文字: var(--lux-text-body)
表头文字: var(--lux-text-muted)
圆角: 12px (overflow hidden)
斑马纹: rgba(255, 255, 255, 0.025)
固定列: 透明背景，透出卡片玻璃效果
```
### 对话框组件（el-dialog, Teleport）
```
背景: var(--lux-glass-bg-dialog) + blur(24px)
边框: 1px solid var(--lux-glass-border)
背景: rgba(30, 41, 59, 0.72) + blur(24px) + saturate(1.5)
边框: 1px solid rgba(255, 255, 255, 0.14)
圆角: var(--lux-radius-xl) [18px]
阴影: var(--lux-shadow-4) + inset glow
header: 1px solid rgba(255, 255, 255, 0.08) 底分割
光照效果: ::before 伪元素渐变叠层
顶部辉光: ::after 伪元素青色渐变条
```
### 输入框组件（el-input, el-select）
@@ -244,17 +260,18 @@ header: 1px solid rgba(255, 255, 255, 0.08) 底分割
背景: var(--lux-glass-bg-input)
圆角: var(--lux-radius-md) [10px]
边框: 1px solid var(--lux-glass-border)
focus: 1px solid var(--lux-glass-border-focus) + var(--lux-glow-cyan)
focus: var(--lux-glow-cyan) [青色光晕]
placeholder: var(--lux-text-dim)
```
### 按钮组件 - Primary
```
背景: linear-gradient(135deg, #38bdf8, #22d3ee)
背景: #38bdf8 [纯色青色，非渐变]
文字: #fff
圆角: var(--lux-radius-md) [10px]
阴影: 0 4px 12px rgba(56, 189, 248, 0.25)
hover 阴影: 0 6px 16px rgba(56, 189, 248, 0.35)
active: transform: scale(0.98)
```
### 侧边栏组件
@@ -264,8 +281,9 @@ hover 阴影: 0 6px 16px rgba(56, 189, 248, 0.35)
宽度: 64px (collapsed) / 220px (expanded)
边框右: 1px solid rgba(255, 255, 255, 0.08)
z-index: 100 (L2)
active item: gradient bg rgba(56,189,248,0.22) → rgba(99,102,241,0.14)
+ 1px inset border rgba(56,189,248,0.25)
active item: gradient bg rgba(56,189,248,0.18) → rgba(251,113,133,0.12)
+ inset border rgba(56,189,248,0.2)
+ 左侧3px青色指示条
```
### 顶部导航栏
@@ -280,6 +298,7 @@ active item: gradient bg rgba(56,189,248,0.22) → rgba(99,102,241,0.14)
**章节来源**
- [DESIGN.md:169-279](file://DESIGN.md#L169-L279)
- [frontend/src/styles/lux-theme.css:361-460](file://frontend/src/styles/lux-theme.css#L361-L460)
## 项目结构
仓库采用前后端分层组织方式：
@@ -327,9 +346,9 @@ BE_app --> BE_db
- [frontend/src/main.js:1-26](file://frontend/src/main.js#L1-L26)
- [frontend/src/App.vue:1-30](file://frontend/src/App.vue#L1-L30)
- [frontend/src/router/index.js:1-103](file://frontend/src/router/index.js#L1-L103)
- [frontend/src/layout/index.vue:1-351](file://frontend/src/layout/index.vue#L1-L351)
- [frontend/src/layout/index.vue:1-365](file://frontend/src/layout/index.vue#L1-L365)
- [frontend/src/views/home/index.vue:1-334](file://frontend/src/views/home/index.vue#L1-L334)
- [frontend/src/styles/lux-theme.css:1-1259](file://frontend/src/styles/lux-theme.css#L1-L1259)
- [frontend/src/styles/lux-theme.css:1-1272](file://frontend/src/styles/lux-theme.css#L1-L1272)
- [frontend/src/components/SidebarLogo.vue:1-135](file://frontend/src/components/SidebarLogo.vue#L1-L135)
- [backend/src/app.js:1-60](file://backend/src/app.js#L1-L60)
- [backend/src/routes/index.js:1-15](file://backend/src/routes/index.js#L1-L15)
@@ -356,8 +375,8 @@ BE_app --> BE_db
- 使用 Sequelize 定义实体（如 Brand、Model），集中导出供路由与服务使用
- 配置与基础设施
- 数据库连接、环境变量加载、日志、Redis 等（部分在配置目录中）
- **新增**：设计系统核心
- 全局CSS主题变量、玻璃拟态样式、响应式组件规范
- **增强版**：设计系统核心
- 全局CSS主题变量、玻璃拟态样式、响应式组件规范、1272行完整设计令牌
**章节来源**
- [backend/src/app.js:1-60](file://backend/src/app.js#L1-L60)
@@ -366,7 +385,7 @@ BE_app --> BE_db
- [frontend/src/router/index.js:1-103](file://frontend/src/router/index.js#L1-L103)
- [backend/src/models/index.js:1-10](file://backend/src/models/index.js#L1-L10)
- [backend/src/config/database.js:1-24](file://backend/src/config/database.js#L1-L24)
- [frontend/src/styles/lux-theme.css:1-1259](file://frontend/src/styles/lux-theme.css#L1-L1259)
- [frontend/src/styles/lux-theme.css:1-1272](file://frontend/src/styles/lux-theme.css#L1-L1272)
## 架构总览
系统采用经典的前后端分离架构，前端静态资源由 Nginx 托管并通过反向代理将 /api 转发到后端；后端以 Express 提供服务，使用 Sequelize 访问 MySQL。
@@ -378,7 +397,7 @@ Nginx["Nginx(前端容器)"]
API["Express(后端容器)"]
DB["MySQL"]
Redis["Redis(可选)"]
Theme["Lux Theme System<br/>Glassmorphism + Space Colors"]
Theme["Enhanced Lux Theme System<br/>Advanced Glassmorphism + Space Colors<br/>1272+ CSS Variables"]
Client --> Nginx
Nginx --> |"/api/*" 代理| API
Nginx --> Theme
@@ -389,7 +408,7 @@ API --> Redis
**图表来源**
- [docker-compose.yml:1-48](file://docker-compose.yml#L1-L48)
- [DEPLOY.md:1-269](file://DEPLOY.md#L1-L269)
- [frontend/src/styles/lux-theme.css:1-1259](file://frontend/src/styles/lux-theme.css#L1-L1259)
- [frontend/src/styles/lux-theme.css:1-1272](file://frontend/src/styles/lux-theme.css#L1-L1272)
## 详细组件分析
@@ -481,7 +500,7 @@ BRAND ||--o{ MODEL : "brand_name 关联"
**图表来源**
- [backend/src/models/Brand.js:1-23](file://backend/src/models/Brand.js#L1-L23)
- [backend/src/models/Model.js:1-53](file://backend/src/models/Model.js#L1-53)
- [backend/src/models/Model.js:1-53](file://backend/src/models/Model.js#L1-L53)
**章节来源**
- [backend/src/models/Brand.js:1-23](file://backend/src/models/Brand.js#L1-L23)
@@ -504,17 +523,17 @@ OpenDialog --> End
```
**图表来源**
- [frontend/src/layout/index.vue:174-231](file://frontend/src/layout/index.vue#L174-L231)
- [frontend/src/layout/index.vue:174-246](file://frontend/src/layout/index.vue#L174-L246)
**章节来源**
- [frontend/src/layout/index.vue:174-231](file://frontend/src/layout/index.vue#L174-L231)
- [frontend/src/layout/index.vue:174-246](file://frontend/src/layout/index.vue#L174-L246)
### 品牌标识组件
新的品牌标识组件采用SVG图形和渐变效果，支持折叠状态下的自适应显示。
```mermaid
flowchart LR
Logo["SidebarLogo 组件"] --> Mark["SVG标志<br/>渐变填充 + 阴影滤镜"]
Logo["SidebarLogo 组件"] --> Mark["SVG标志<br/>青紫渐变填充 + 阴影滤镜"]
Logo --> Wordmark["品牌文字<br/>渐变色 + 间距调整"]
Mark --> Collapsed["折叠状态<br/>仅显示图标"]
Wordmark --> Expanded["展开状态<br/>显示完整品牌名"]
@@ -564,10 +583,12 @@ Compose --> |"Node 8083 -> 8000"| BE_api["后端 API"]
- 建议在网关层增加速率限制与请求体大小限制（后端已有 bodyLimit 中间件）
- 扩展点
- 可按功能域继续拆分路由与服务，引入缓存层（Redis）与消息队列以提升吞吐
- **新增**：设计系统性能优化
- **增强版**：设计系统性能优化
- CSS变量预编译减少运行时开销
- backdrop-filter性能考虑（移动端降级方案）
- 动画过渡优化（GPU加速）
- 透明度优化减少渲染压力
- 阴影效果分层渲染
[本节为通用指导，不直接分析具体文件]
@@ -580,16 +601,25 @@ Compose --> |"Node 8083 -> 8000"| BE_api["后端 API"]
- 确认镜像基础版本与 pnpm 版本一致，确保上传了 package.json 与锁文件
- 环境变量未生效
- 重新创建容器使 .env 生效
- **新增**：设计系统相关问题
- **增强版**：设计系统相关问题
- 样式未生效：检查 lux-theme.css 是否正确引入
- 玻璃效果异常：确认浏览器支持 backdrop-filter
- 颜色显示异常：检查CSS变量定义顺序
- 透明度问题：验证各组件透明度值是否符合预期
- 模糊效果卡顿：检查设备性能，考虑降级方案
**章节来源**
- [DEPLOY.md:226-269](file://DEPLOY.md#L226-L269)
## 结论
本设计系统以清晰的模块化与容器化部署为基础，提供了完整的品牌与型号管理能力，并在认证、路由、模型与部署方面形成了稳定的工程实践。**最新的设计系统重构引入了革命性的玻璃拟态美学，通过797+行精心设计的CSS变量和组件规范，为用户创造了沉浸式的深色界面体验。**
本设计系统以清晰的模块化与容器化部署为基础，提供了完整的品牌与型号管理能力，并在认证、路由、模型与部署方面形成了稳定的工程实践。**最新的增强版本通过1272行精心设计的CSS变量和组件规范，实现了革命性的玻璃拟态美学，为用户创造了更加沉浸式的深色界面体验。**
**主要改进包括**：
- 优化的透明度控制系统，提供更细腻的视觉效果
- 增强的阴影层级系统，建立更清晰的视觉层次
- 精炼的青色强调色系统，替代原有的珊瑚粉色系
- 重构的表格样式，提供更好的视觉层级和数据可读性
- 完善的CSS变量体系，支持更好的维护和扩展性
后续可在缓存、监控与可观测性方面进一步增强，以满足更大规模的生产需求。同时，设计系统的持续演进将为产品带来更一致的视觉语言和更好的用户体验。
@@ -608,6 +638,6 @@ Compose --> |"Node 8083 -> 8000"| BE_api["后端 API"]
- 首页视图：[frontend/src/views/home/index.vue](file://frontend/src/views/home/index.vue)
- 品牌标识：[frontend/src/components/SidebarLogo.vue](file://frontend/src/components/SidebarLogo.vue)
- 设计系统规范：[DESIGN.md](file://DESIGN.md)
- 主题样式：[frontend/src/styles/lux-theme.css](file://frontend/src/styles/lux-theme.css)
- 主题样式：**[enhanced]** [frontend/src/styles/lux-theme.css](file://frontend/src/styles/lux-theme.css)
- 部署文档：[DEPLOY.md](file://DEPLOY.md)
- 编排文件：[docker-compose.yml](file://docker-compose.yml)