eafonyang
49 lines
3.7 KiB
Markdown
49 lines
3.7 KiB
Markdown
---
|
|
kind: frontend_style
|
|
name: 深色玻璃拟态主题系统 (Lux Theme)
|
|
category: frontend_style
|
|
scope:
|
|
- '**'
|
|
source_files:
|
|
- 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` 媒体查询中增加侧边栏抽屉式交互的支持。 |