eafonyang
3.5 KiB
3.5 KiB
kind, name, category, scope, source_files
| kind | name | category | scope | source_files | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| frontend_style | LUXSIN 深色主题与 Element Plus 定制体系 | frontend_style |
|
|
系统概述
前端采用 Vue3 + Vite + Element Plus 技术栈，通过自定义 CSS 变量与全局样式覆盖实现统一的「LUXSIN」深色宇宙风格主题。整体视觉以深空背景、玻璃态（glassmorphism）侧栏、青紫渐变强调色为特征。
核心文件与依赖
frontend/src/styles/lux-theme.css：全站主题定义，包含 CSS 变量、Element Plus 组件覆盖、布局壳层样式frontend/src/main.js：应用入口，注册 ElementPlus（含中文 locale）、加载主题与暗黑模式 CSS 变量frontend/src/layout/index.vue：主布局壳层.lux-shell，承载侧栏/顶栏/内容区结构frontend/src/components/SidebarLogo.vue：品牌 Logo 组件，内嵌 SVG 渐变图标frontend/package.json：声明element-plus@^2.3.14、@element-plus/icons-vue、vue-router、axios等依赖
架构与约定
设计令牌（CSS Variables）
在 :root 中集中声明所有设计令牌，命名统一以 --lux- 前缀：
- 字体：
--lux-font - 背景：
--lux-page-bg、--lux-card-bg、--lux-glass-sidebar、--lux-glass-header、--lux-input-bg - 文本：
--lux-text-strong、--lux-text-muted - 强调色：
--lux-cyan、--lux-indigo、--lux-violet - 边框：
--lux-card-border
主题策略
- Element Plus 暗黑模式：通过
import 'element-plus/theme-chalk/dark/css-vars.css'启用 CSS 变量驱动的主题切换能力 - 全局覆盖：
lux-theme.css使用大量!important覆盖 Element Plus 默认样式，包括卡片、表格、按钮、输入框、分页、对话框、下拉菜单、消息框等组件的深色外观 - 布局壳层：所有页面嵌套在
.lux-shell容器内，背景使用径向渐变 + 三个模糊光球（.lux-orb-*）营造空间感；侧栏使用backdrop-filter: blur(18px)实现毛玻璃效果 - 响应式侧栏：支持折叠态（64px 图标轨道）与展开态（220px 完整菜单），通过
is-collapsed类名切换
组件库与图标
- UI 组件：Element Plus 2.x，配合
@element-plus/icons-vue图标集 - 无第三方 CSS 框架（如 Tailwind），全部手写 CSS
- 无 SCSS/Less 预处理器，纯 CSS
视觉规范
- 圆角：卡片 16px、按钮/输入框 10px、标签 8px、对话框 18px
- 阴影：多层 box-shadow 模拟悬浮深度，强调色带发光效果
- 字体：Inter / Segoe UI / PingFang SC / Microsoft YaHei 回退链
- 颜色：主按钮使用
#38bdf8青色，悬停变为#22d3ee，警告/危险分别带橙色/红色发光阴影
开发者应遵循的规则
- 新增颜色必须走 CSS 变量：在
:root中声明--lux-*变量，禁止在组件中硬编码颜色值 - 组件样式优先 scoped：业务组件使用
<style scoped>，仅对 Element Plus 全局组件的覆盖放在lux-theme.css中 - 不要引入新的 CSS 框架：保持纯 CSS + Element Plus 覆盖的统一风格，避免 Tailwind 等原子类混用
- 深色主题一致性：所有新增组件需适配现有深色配色方案，确保文字可读性（
--lux-text-strong/--lux-text-muted） - 侧栏交互复用：如需新导航项，参考
layout/index.vue中的路由分组逻辑与sidebar-rail折叠态处理