dashboard/.qoder/repowiki/knowledge/zh/深色玻璃拟态主题系统 (Lux Theme)/frontend_style.md

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 媒体查询中增加侧边栏抽屉式交互的支持。