38 lines
3.2 KiB
Markdown
38 lines
3.2 KiB
Markdown
|
---
|
|||
|
|
kind: frontend_style
|
|||
|
|
name: Luxsin CMS 玻璃拟态暗色主题系统
|
|||
|
|
category: frontend_style
|
|||
|
|
scope:
|
|||
|
|
- '**'
|
|||
|
|
source_files:
|
|||
|
|
- frontend/src/styles/lux-theme.css
|
|||
|
|
- frontend/src/main.js
|
|||
|
|
- frontend/vite.config.js
|
|||
|
|
- frontend/package.json
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 体系概述
|
|||
|
|
基于 Element Plus 的 CSS Variables 覆盖 + 全局 `lux-theme.css` 自定义样式，实现「深色宇宙底 + 玻璃拟态（Glassmorphism）+ 维度分层」的统一视觉风格。整个前端无 Sass/Less/Tailwind，纯 CSS 变量驱动设计令牌。
|
|||
|
|
|
|||
|
|
## 核心文件与包
|
|||
|
|
- `frontend/src/styles/lux-theme.css` — 全站主题定义与设计令牌（CSS 变量、组件覆盖、布局壳层）
|
|||
|
|
- `frontend/src/main.js` — 引入 Element Plus dark css-vars、中文语言包及 lux-theme.css
|
|||
|
|
- `frontend/vite.config.js` — 别名 `@/src`、chunk 拆分（vendor-vue / vendor-element-plus / vendor-element-icons）
|
|||
|
|
- `frontend/package.json` — 依赖：Vue3 + Vue Router + Element Plus + @element-plus/icons-vue + axios + vue-json-pretty
|
|||
|
|
|
|||
|
|
## 架构与约定
|
|||
|
|
1. **设计令牌集中管理**：所有颜色、圆角、阴影、模糊级别均以 `--lux-*` 前缀的 CSS 变量声明在 `:root`，如 `--lux-cyan`、`--lux-glass-bg-card`、`--lux-blur-lg`、`--lux-shadow-card` 等，组件样式通过引用这些变量保持一致性。
|
|||
|
|
2. **Element Plus 深度定制**：通过 `lux-shell` 作用域选择器覆盖 EP 默认样式（el-card、el-table、el-button、el-input、el-dialog、el-tabs、el-pagination 等），并启用 `element-plus/theme-chalk/dark/css-vars.css` 以利用其 CSS 变量机制。
|
|||
|
|
3. **三层维度分层模型**：L1（内容卡片/表格）、L2（浮动侧栏/顶栏/底栏）、L3（对话框/下拉/消息弹窗），每层使用不同的 `backdrop-filter` 模糊等级与透明度组合，形成空间纵深感。
|
|||
|
|
4. **背景氛围**：`.lux-shell` 容器内放置 `.lux-orb-1/2/3` 三个大尺寸高斯模糊彩色光球，配合径向渐变页面底色，营造「深色宇宙」氛围。
|
|||
|
|
5. **全局壳层模式**：应用根节点需包裹 `.lux-shell` 类，所有 EP 组件样式均在该作用域下生效，避免污染全局。
|
|||
|
|
6. **响应式策略**：未采用媒体查询断点，主要依靠 Flexbox 弹性布局与 `min()` 函数控制光球尺寸；侧栏支持折叠（`.is-collapsed`）切换宽度。
|
|||
|
|
7. **构建期优化**：Vite 将 Element Plus 独立拆分为 chunk，减少首屏体积；忽略第三方库 `INVALID_ANNOTATION` 警告。
|
|||
|
|
|
|||
|
|
## 开发者规范
|
|||
|
|
- 新增 UI 元素时优先复用 `--lux-*` 设计令牌，不要硬编码颜色或圆角值。
|
|||
|
|
- 需要浮层效果的容器统一使用 `backdrop-filter` 配合 `rgba(30,41,59, X)` 半透明背景，保持玻璃质感一致。
|
|||
|
|
- 按钮主色使用 `#38bdf8`（cyan），hover 变亮至 `#22d3ee`，禁用渐变，改用纯色 + box-shadow 发光。
|
|||
|
|
- 表格行 hover 使用品牌青低透明度高亮 `rgba(56,189,248,0.06)`，斑马纹使用极淡白透 `rgba(255,255,255,0.025)`。
|
|||
|
|
- 对话框/下拉/消息弹窗统一使用 `blur(24px) saturate(1.5)` 强模糊 + 顶部青色辉光装饰线。
|
|||
|
|
- 若需扩展新组件样式，继续在 `lux-theme.css` 中按 L1/L2/L3 分区追加，遵循现有命名与注释结构。
|