签入版本

2026-09-29 10:14:04 +08:00
parent 3e5fc01124
commit d6b552103d
1664 changed files with 298944 additions and 0 deletions
@@ -0,0 +1,109 @@
+# 9.14 样式与主题定制
+
+:::tip 概述
+前端使用 TailwindCSS + SCSS 实现样式管理，支持主题色切换和暗色模式。
+:::
+
+## 技术栈
+
+| 技术 | 用途 |
+|------|------|
+| TailwindCSS | 原子化 CSS 框架 |
+| SCSS | 全局样式变量和主题 |
+| ElementPlus 主题变量 | 组件样式覆盖 |
+
+## 全局样式文件
+
+```text
+ui/src/styles/
+├── index.scss          # 全局样式入口（@import 所有子模块）
+├── var.scss            # SCSS 变量定义（颜色、尺寸等）
+├── common.scss         # 公共样式类
+├── tailwind.css        # TailwindCSS 入口
+├── tailwindbase.css    # TailwindCSS 基础重置
+├── theme/
+│   ├── light.scss      # 浅色主题（含 ElementPlus 组件覆盖）
+│   └── dark.scss       # 深色主题
+└── transition/
+    └── index.scss      # 过渡动画
+```
+
+## SCSS 变量
+
+```scss
+/* ui/src/styles/var.scss */
+$primaryColor: #165DFF;
+$primaryColorHover: #57a3f3;
+$header-height: 64px;
+$footer-height: 70px;
+```
+
+## 主题色切换
+
+通过 `designSettingStore` 管理主题：
+
+```typescript
+import { useDesignSettingStore } from '@/store/modules/designSetting';
+
+const designStore = useDesignSettingStore();
+
+// 切换暗色模式
+designStore.setDarkMode(true);
+
+// 获取当前主题色
+const primaryColor = designStore.appTheme;
+```
+
+## ElementPlus 主题覆盖
+
+ElementPlus 组件样式覆盖定义在主题文件中，通过 `[data-theme]` 选择器区分深浅色模式：
+
+```scss
+/* ui/src/styles/theme/light.scss */
+[data-theme='light'] {
+  --el-border-color-base: #e4e7ed;
+
+  .el-table {
+    --el-table-header-bg-color: #f5f7fa;
+    --el-table-header-text-color: rgb(31 34 37);
+  }
+  // ...更多组件覆盖
+}
+```
+
+## TailwindCSS 配置
+
+```javascript
+// ui/tailwind.config.js
+module.exports = {
+  content: ['./src/**/*.{vue,ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--primary-color)',
+      },
+    },
+  },
+};
+```
+
+## 自定义全局样式
+
+```scss
+/* ui/src/styles/index.scss */
+
+// 页面容器
+.page-container {
+  padding: 16px;
+  background: var(--bg-color);
+  border-radius: 8px;
+}
+
+// 搜索表单
+.search-form {
+  margin-bottom: 16px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 4px;
+}
+```