kind, name, category, scope, source_files
| kind |
name |
category |
scope |
source_files |
| frontend_style |
深色玻璃拟态主题系统 (Lux Theme) |
frontend_style |
|
| frontend/src/styles/lux-theme.css |
| frontend/src/layout/index.vue |
| frontend/src/main.js |
| frontend/src/App.vue |
| frontend/package.json |
|
1. 核心系统与工具
- UI 框架: Vue 3 + Element Plus。
- 样式方案: 原生 CSS + CSS Variables (CSS Custom Properties)。
- 构建工具: Vite。
- 主题策略: 基于 Element Plus 的 Dark Mode 基础，通过全局自定义 CSS (
lux-theme.css) 进行深度覆盖和扩展，实现名为 "Lux" 的深色玻璃拟态（Glassmorphism）风格。
2. 关键文件与结构
frontend/src/styles/lux-theme.css: 核心主题文件。定义了全站的设计令牌（Design Tokens）、背景动效、组件覆盖样式。frontend/src/layout/index.vue: 布局容器。应用 .lux-shell 类名，承载侧边栏、顶栏和主内容区，并包含背景光球（Orbs）的 DOM 结构。frontend/src/main.js: 入口文件。按顺序引入 Element Plus 基础样式、Dark Mode 变量以及自定义的 lux-theme.css。frontend/src/App.vue: 根组件。设置全局字体栈（Inter, PingFang SC, Microsoft YaHei）及抗锯齿渲染。
3. 架构与设计规范
3.1 设计令牌 (Design Tokens)
在 :root 中定义了一套语义化的 CSS 变量，用于保持视觉一致性：
- 背景色:
--lux-page-bg: #0a0e14 (深空黑), --lux-card-bg: #1e293b (深蓝灰)。
- 主色调:
--lux-cyan: #38bdf8 (青色), --lux-indigo: #6366f1 (靛蓝), --lux-violet: #7c3aed (紫罗兰)。
- 文本色:
--lux-text-strong: #e2e8f0 (高亮文本), --lux-text-muted: #94a3b8 (次要文本)。
- 玻璃效果:
--lux-glass-sidebar: rgba(15, 23, 42, 0.6)，配合 backdrop-filter: blur(18px) 实现毛玻璃质感。
3.2 视觉风格：深色宇宙与玻璃拟态
- 背景动效: 使用
.lux-shell-bg 容器包裹三个绝对定位的 .lux-orb (光球)，通过高斯模糊 (blur(80px)) 和低透明度营造深邃的宇宙氛围。
- 卡片与容器: 所有
.el-card 被强制设置为深色背景、圆角 (16px) 和微弱的边框光晕，以在深色背景上凸显层级。
- 交互反馈: 按钮和菜单项在 Hover 状态下使用半透明的白色或青色渐变背景，激活状态则带有内阴影 (
box-shadow inset) 以增强立体感。
3.3 布局约定
- Shell 模式: 整个应用包裹在
.lux-shell 中，采用 min-height: 100vh 和 overflow: hidden 确保全屏沉浸式体验。
- 侧边栏: 采用玻璃拟态设计，支持折叠（64px）与展开（220px）动画过渡。折叠时显示图标导航栏（Rail），展开时显示完整菜单。
- 顶栏: 悬浮的玻璃态条状区域，包含面包屑和用户操作下拉菜单。
4. 开发者指南
- 类名约束: 所有自定义样式应尽量限制在
.lux-shell 作用域下，避免污染全局或影响第三方组件的默认行为。
- 组件覆盖: 修改 Element Plus 组件样式时，优先使用 CSS 变量覆盖。若需强制覆盖，请使用
.lux-shell .el-component 的选择器优先级策略，并尽量保持 !important 的最小化使用（目前主题文件中存在部分 !important 以对抗组件库默认样式）。
- 颜色使用: 严禁硬编码颜色值。新增样式时应引用
lux-theme.css 中定义的 --lux-* 变量，以确保主题的统一性和后续的可维护性。
- 响应式: 目前布局主要面向桌面端管理后台，侧边栏采用固定宽度逻辑。若需适配移动端，需在
.lux-shell 媒体查询中增加侧边栏抽屉式交互的支持。
eafonyang