eafonyang
f48f1cce70
- 采用固定内边距策略，解决标签页悬停时的布局抖动问题 - 统一关闭按钮尺寸为14x14px，提升视觉一致性 - 优化活动标签和悬停状态的层级管理，确保视觉层次正确 - 增强视觉反馈，添加内嵌阴影效果改善用户体验 - 添加平滑颜色过渡动画（0.2秒），提升交互流畅度 - 支持玻璃拟态设计系统，实现现代化视觉风格 - 完善工具箱图标支持，确保标签页工具功能准确显示
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 分区追加，遵循现有命名与注释结构。 |