41 lines
3.5 KiB
Markdown
41 lines
3.5 KiB
Markdown
|
---
|
|||
|
|
kind: frontend_style
|
|||
|
|
name: Glassmorphism 深色主题与 Element Plus 定制体系
|
|||
|
|
category: frontend_style
|
|||
|
|
scope:
|
|||
|
|
- '**'
|
|||
|
|
source_files:
|
|||
|
|
- 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.css
|
|||
|
|
- `frontend/src/App.vue` — 根组件，提供全局字体与基础 reset
|
|||
|
|
- `frontend/src/layout/index.vue` — 主布局壳层 `.lux-shell`，承载背景光球、侧栏、顶栏、内容区、底部版权
|
|||
|
|
- `frontend/package.json` — 依赖：element-plus、@element-plus/icons-vue、vue-router、axios
|
|||
|
|
|
|||
|
|
## 架构与约定
|
|||
|
|
1. **设计令牌集中管理**：所有颜色、模糊半径、阴影、圆角、字号均通过 `:root` 下的 `--lux-*` CSS 变量声明，如 `--lux-cyan`、`--lux-glass-bg-card`、`--lux-blur-lg`、`--lux-radius-md` 等，新增/调整主题只需修改一处。
|
|||
|
|
2. **三层 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` 等选择器
|
|||
|
|
3. **Element Plus 暗黑模式 + 全局覆盖**：在 `main.js` 中同时引入 `element-plus/theme-chalk/dark/css-vars.css` 与 `dist/index.css`，再通过 `.lux-shell` 作用域下的大量 `!important` 覆盖默认样式，确保主题一致性。
|
|||
|
|
4. **侧栏双态交互**：通过 `is-collapsed` 类在 64px 图标轨道与 220px 完整菜单间切换，hover 展开、离开收起，兼顾信息密度与空间效率。
|
|||
|
|
5. **响应式策略**：未引入 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 统一提供侧栏/顶栏/页脚。
|