kind, name, category, scope, source_files
| kind |
name |
category |
scope |
source_files |
| frontend_style |
Glassmorphism 深色主题与 Element Plus 定制体系 |
frontend_style |
|
| frontend/src/styles/lux-theme.css |
| frontend/src/main.js |
| frontend/src/App.vue |
| frontend/src/layout/index.vue |
| frontend/package.json |
|
系统概述
本项目前端采用 Vue3 + Vite + Element Plus 技术栈，通过自定义 CSS 变量与全局样式覆盖实现一套统一的 Glassmorphism（玻璃拟态）深色主题。主题以「深色宇宙底 + 半透明毛玻璃卡片 + 青紫渐变强调色」为核心视觉语言，贯穿侧栏、顶栏、卡片、表格、对话框等所有 UI 层级。
核心文件与包
frontend/src/styles/lux-theme.css — 全站主题定义，包含设计令牌（CSS 变量）、Element Plus 组件覆盖、布局壳层样式frontend/src/main.js — 应用入口，引入 Element Plus 暗黑模式 CSS 变量与 lux-theme.cssfrontend/src/App.vue — 根组件，提供全局字体与基础 resetfrontend/src/layout/index.vue — 主布局壳层 .lux-shell，承载背景光球、侧栏、顶栏、内容区、底部版权frontend/package.json — 依赖：element-plus、@element-plus/icons-vue、vue-router、axios
架构与约定
- 设计令牌集中管理：所有颜色、模糊半径、阴影、圆角、字号均通过
:root 下的 --lux-* CSS 变量声明，如 --lux-cyan、--lux-glass-bg-card、--lux-blur-lg、--lux-radius-md 等，新增/调整主题只需修改一处。
- 三层 L1/L2/L3 深度模型：
- L0 背景：
.lux-shell-bg 中的三个 .lux-orb 大光球（青色/紫色/珊瑚红），配合径向渐变底色营造“深空”氛围
- L1 内容层：
.el-card、.el-table 使用半透明背景 + backdrop-filter: blur() 实现玻璃卡片与玻璃表格
- L2 浮动层：侧栏
.sidebar-glass、顶栏 .lux-header 独立浮于内容之上，带边框高光与内阴影
- L3 覆盖层：对话框、下拉菜单、消息框统一使用更高模糊度与更强阴影的
.el-overlay .el-dialog 等选择器
- Element Plus 暗黑模式 + 全局覆盖：在
main.js 中同时引入 element-plus/theme-chalk/dark/css-vars.css 与 dist/index.css，再通过 .lux-shell 作用域下的大量 !important 覆盖默认样式，确保主题一致性。
- 侧栏双态交互：通过
is-collapsed 类在 64px 图标轨道与 220px 完整菜单间切换，hover 展开、离开收起，兼顾信息密度与空间效率。
- 响应式策略：未引入 Tailwind 或媒体查询框架，主要依赖 Flexbox 布局与 CSS 变量；光球尺寸使用
min(52vw, 400px) 自适应，整体为桌面端优先的管理后台风格。
开发者规范
- 颜色使用：优先引用
var(--lux-*) 变量，禁止硬编码十六进制值；品牌强调色限定为 --lux-cyan / --lux-indigo / --lux-violet / --lux-coral。
- 玻璃效果：需要半透明背景的元素统一搭配
backdrop-filter: var(--lux-blur-*) 与 border: 1px solid var(--lux-glass-border)，保持视觉层次一致。
- 圆角与阴影：遵循
--lux-radius-{sm,md,lg,xl} 与 --lux-shadow-{1..4} 阶梯，避免随意取值。
- 组件覆盖范围：所有 Element Plus 组件样式覆盖应包裹在
.lux-shell 选择器下，防止污染非管理界面。
- 新页面结构：页面根容器应置于
<el-container class="lux-shell-body"> 内部，由 layout 统一提供侧栏/顶栏/页脚。
eafonyang