56 lines
3.5 KiB
Markdown
56 lines
3.5 KiB
Markdown
|
---
|
|||
|
|
kind: frontend_style
|
|||
|
|
name: LUXSIN 深色主题与 Element Plus 定制体系
|
|||
|
|
category: frontend_style
|
|||
|
|
scope:
|
|||
|
|
- '**'
|
|||
|
|
source_files:
|
|||
|
|
- frontend/src/styles/lux-theme.css
|
|||
|
|
- frontend/src/main.js
|
|||
|
|
- frontend/src/layout/index.vue
|
|||
|
|
- frontend/src/components/SidebarLogo.vue
|
|||
|
|
- frontend/package.json
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 系统概述
|
|||
|
|
前端采用 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`
|
|||
|
|
|
|||
|
|
### 主题策略
|
|||
|
|
1. **Element Plus 暗黑模式**：通过 `import 'element-plus/theme-chalk/dark/css-vars.css'` 启用 CSS 变量驱动的主题切换能力
|
|||
|
|
2. **全局覆盖**：`lux-theme.css` 使用大量 `!important` 覆盖 Element Plus 默认样式，包括卡片、表格、按钮、输入框、分页、对话框、下拉菜单、消息框等组件的深色外观
|
|||
|
|
3. **布局壳层**：所有页面嵌套在 `.lux-shell` 容器内，背景使用径向渐变 + 三个模糊光球（`.lux-orb-*`）营造空间感；侧栏使用 `backdrop-filter: blur(18px)` 实现毛玻璃效果
|
|||
|
|
4. **响应式侧栏**：支持折叠态（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`，警告/危险分别带橙色/红色发光阴影
|
|||
|
|
|
|||
|
|
## 开发者应遵循的规则
|
|||
|
|
1. **新增颜色必须走 CSS 变量**：在 `:root` 中声明 `--lux-*` 变量，禁止在组件中硬编码颜色值
|
|||
|
|
2. **组件样式优先 scoped**：业务组件使用 `<style scoped>`，仅对 Element Plus 全局组件的覆盖放在 `lux-theme.css` 中
|
|||
|
|
3. **不要引入新的 CSS 框架**：保持纯 CSS + Element Plus 覆盖的统一风格，避免 Tailwind 等原子类混用
|
|||
|
|
4. **深色主题一致性**：所有新增组件需适配现有深色配色方案，确保文字可读性（`--lux-text-strong` / `--lux-text-muted`）
|
|||
|
|
5. **侧栏交互复用**：如需新导航项，参考 `layout/index.vue` 中的路由分组逻辑与 `sidebar-rail` 折叠态处理
|