audio/dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6a747b514fcd9f764e7f04781d23b34058c87bdc
dashboard/.qoder/repowiki/knowledge/zh/Luxsin CMS 玻璃拟态暗色主题系统/Luxsin CMS 玻璃拟态暗色主题系统.md
T
eafonyang f48f1cce70 docs(tabs): 更新标签页视图组件设计与交互细节 
- 采用固定内边距策略，解决标签页悬停时的布局抖动问题
- 统一关闭按钮尺寸为14x14px，提升视觉一致性
- 优化活动标签和悬停状态的层级管理，确保视觉层次正确
- 增强视觉反馈，添加内嵌阴影效果改善用户体验
- 添加平滑颜色过渡动画（0.2秒），提升交互流畅度
- 支持玻璃拟态设计系统，实现现代化视觉风格
- 完善工具箱图标支持，确保标签页工具功能准确显示
2026-07-15 09:58:56 +08:00

3.2 KiB
Raw Blame History

kind, name, category, scope, source_files
kind name category scope source_files
frontend_style Luxsin CMS 玻璃拟态暗色主题系统 frontend_style
**
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 分区追加，遵循现有命名与注释结构。
Reference in New Issue View Git Blame Copy Permalink