40 lines
3.0 KiB
Markdown
40 lines
3.0 KiB
Markdown
|
---
|
|||
|
|
kind: frontend_style
|
|||
|
|
name: 双前端风格体系：Element Plus 玻璃拟态 + Soybean Admin UnoCSS
|
|||
|
|
category: frontend_style
|
|||
|
|
scope:
|
|||
|
|
- '**'
|
|||
|
|
source_files:
|
|||
|
|
- frontend/src/styles/lux-theme.css
|
|||
|
|
- frontend_v2/uno.config.ts
|
|||
|
|
- frontend_v2/src/theme/settings.ts
|
|||
|
|
- frontend_v2/src/theme/vars.ts
|
|||
|
|
- frontend_v2/src/theme/preset/dark.json
|
|||
|
|
- frontend_v2/packages/uno-preset/src/index.ts
|
|||
|
|
- frontend_v2/src/styles/css/global.css
|
|||
|
|
- frontend_v2/src/layouts/base-layout/index.vue
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
仓库包含两套独立的前端工程，分别采用不同的视觉与样式体系：
|
|||
|
|
|
|||
|
|
## 1. frontend（旧版）— Element Plus 自定义 CSS 主题
|
|||
|
|
- 组件库：Element Plus（Vue3），通过全局 CSS 覆盖默认样式。
|
|||
|
|
- 样式入口：src/styles/lux-theme.css，定义完整的 Luxsin CMS Design System——Glassmorphism + Dimensional Layering + Dark Mode OLED。
|
|||
|
|
- 设计令牌：以 :root CSS 变量集中管理，包括字体族、页面背景/渐变、文本层级、品牌色（cyan/indigo/violet/coral）、玻璃表面（card/table/input/dialog/sidebar/header/tab/dropdown）、模糊等级、阴影、圆角等。
|
|||
|
|
- 架构约定：所有覆盖均限定在 .lux-shell 作用域内；侧栏、顶栏、卡片、表格、对话框、下拉、消息框等全部实现玻璃拟态效果（backdrop-filter + 半透明背景 + 高光边框）。
|
|||
|
|
- 布局结构：.lux-shell → .sidebar-glass + .lux-header + .lux-main + .lux-footer，侧栏支持折叠动画。
|
|||
|
|
|
|||
|
|
## 2. frontend_v2（新版）— Soybean Admin 多包工程
|
|||
|
|
- 技术栈：Vite8 + Vue3 + TypeScript + NaiveUI + UnoCSS + pnpm workspace。
|
|||
|
|
- 原子化样式：uno.config.ts 引入 presetWind3({ dark: 'class' }) 与自定义 @sa/uno-preset（提供 flex/absolute/fixed 快捷类），并通过 transformerDirectives() 和 transformerVariantGroup() 启用指令与变体分组。
|
|||
|
|
- 主题系统：
|
|||
|
|
- src/theme/settings.ts 定义默认主题设置（主色、圆角、布局模式、header/tab/sider/footer 尺寸等）。
|
|||
|
|
- src/theme/vars.ts 生成颜色调色板 CSS 变量（primary/info/success/warning/error × 50~950 阶）。
|
|||
|
|
- src/theme/preset/*.json 提供预设主题（default/compact/dark/azir），运行时可切换。
|
|||
|
|
- 主题状态由 Pinia store（store/modules/theme）驱动，配合 theme-drawer 面板实时调整。
|
|||
|
|
- 全局样式：src/styles/css/global.css 仅导入 reset/nprogress/transition 与基础 html/body 样式，具体 UI 样式由 UnoCSS 原子类与 NaiveUI 主题变量组合完成。
|
|||
|
|
- 布局框架：基于 @sa/materials 的 AdminLayout，支持 vertical/horizontal/vertical-mix/top-hybrid 等多种布局模式，宽度/高度均由 themeStore 配置驱动。
|
|||
|
|
|
|||
|
|
## 开发者规范
|
|||
|
|
- 旧版（frontend）新增样式应追加到 lux-theme.css，并限定在 .lux-shell 作用域内，使用 --lux-* 变量而非硬编码色值。
|
|||
|
|
- 新版（frontend_v2）优先使用 UnoCSS 原子类与 NaiveUI 主题变量；如需扩展快捷类，在 packages/uno-preset/src/index.ts 中注册；主题相关修改集中在 src/theme/ 目录。
|