全新的前端ui

2026-07-16 16:34:18 +08:00
parent 1a9003261d
commit e59d9c72ee
352 changed files with 39009 additions and 196 deletions
@@ -0,0 +1,37 @@
+---
+kind: frontend_style
+name: 前端样式体系：双前端并存（Element Plus 玻璃拟态 + NaiveUI/UnoCSS 主题系统）
+category: frontend_style
+scope:
+    - '**'
+source_files:
+    - frontend/src/styles/lux-theme.css
+    - frontend/package.json
+    - frontend_v2/uno.config.ts
+    - frontend_v2/src/theme/settings.ts
+    - frontend_v2/src/theme/preset/dark.json
+    - frontend_v2/src/styles/css/global.css
+---
+
+仓库包含两套独立的前端实现，各自采用不同的 UI 与样式方案：
+
+## frontend（当前生产版本）
+- **框架与组件库**：Vue 3 + Element Plus 2.x，Vite 构建。
+- **样式方法论**：单文件 CSS 主题覆盖，核心位于 `src/styles/lux-theme.css`，通过 `.lux-shell` 根容器限定作用域，使用大量 `!important` 覆盖 Element Plus 默认样式。
+- **设计语言**：自研「Luxsin CMS Design System」，风格为「Glassmorphism + Dimensional Layering + Dark Mode OLED」。以 `:root` 变量定义品牌色板（--lux-cyan、--lux-coral、--lux-indigo 等）、玻璃表面透明度、模糊层级（--lux-blur-*）、阴影层级（--lux-shadow-1~4）、圆角（--lux-radius-*），并通过 `backdrop-filter` 实现侧栏、卡片、对话框、下拉菜单的毛玻璃效果。
+- **布局结构**：`.lux-shell` → `.sidebar-glass`（可折叠 64px/220px）+ `.lux-header` + `.lux-main` + `.lux-footer`，侧栏与顶栏均为浮动玻璃层。
+- **响应式策略**：未引入响应式工具库，主要依赖 Flexbox 与固定宽度侧栏；无断点媒体查询。
+- **图标**：`@lucide/vue`。
+
+## frontend_v2（重构/预览版）
+- **框架与组件库**：Vue 3 + Naive UI + TypeScript，基于 SoybeanAdmin 模板。
+- **原子化样式**：Unocss（`uno.config.ts`）+ Tailwind 预设 `presetWind3`，并集成自定义 preset `@sa/uno-preset`；提供 `card-wrapper` 等 shortcuts。
+- **主题系统**：集中式 JSON 预设（`src/theme/preset/*.json`：default/dark/azir/compact）+ `settings.ts` 运行时配置，支持 light/dark 切换、灰度/色弱模式、主色/辅助色、圆角、布局模式（vertical/horizontal/mix）、Tab 模式、水印等。主题 tokens 通过 `theme/vars.ts` 注入 Unocss theme。
+- **全局样式分层**：`src/styles/css/`（reset、nprogress、transition、global）+ `src/styles/scss/`（global.scss、scrollbar.scss）。
+- **国际化**：`src/locales/` 下 zh-cn/en-us 文案，配合 `vue-i18n`。
+- **图标**：`@iconify/vue` + `unplugin-icons` 按需加载。
+
+## 开发者约定
+- 在 `frontend` 中新增样式应追加到 `lux-theme.css` 内对应区块，遵循 `--lux-*` 变量命名，避免直接写死颜色值。
+- 在 `frontend_v2` 中优先使用 UnoCSS 原子类；需要扩展时修改 `uno.config.ts` 的 `shortcuts` 或 `theme`，主题色调整走 `src/theme/preset/*.json` 与 `settings.ts`。
+- 两套前端互不引用，业务页面按目录 `views/<模块>/index.vue` 组织，组件复用集中在 `components/` 与 `composables/`。