签入版本

2026-09-12 23:12:15 +08:00
commit 91998056ca
1841 changed files with 341325 additions and 0 deletions
@@ -0,0 +1,153 @@
+# 样式与主题
+
+:::tip 说明
+前端样式方案采用 Tailwind CSS + SCSS + ElementPlus 主题覆盖，支持深色模式切换。全局 SCSS 变量通过 Vite 的 `additionalData` 注入。
+:::
+
+## 样式架构
+
+```
+src/styles/
+├── var.scss             # SCSS 全局变量（通过 Vite additionalData 注入）
+├── index.scss           # 入口文件，引入所有样式
+├── tailwindbase.css     # Tailwind CSS 基础样式
+└── element-override.css # ElementPlus 主题覆盖（可选）
+```
+
+## SCSS 全局变量
+
+Vite 配置中通过 `additionalData` 注入全局 SCSS 变量：
+
+```typescript
+// vite.config.ts
+css: {
+    preprocessorOptions: {
+        scss: {
+            additionalData: `@import "src/styles/var.scss";`,
+        },
+    },
+},
+```
+
+这意味着 `var.scss` 中定义的变量在所有 `.vue` 和 `.scss` 文件中自动可用，无需手动 `@import`。
+
+## Tailwind CSS
+
+项目使用 Tailwind CSS 提供原子化样式能力，基础样式通过 `tailwindbase.css` 引入：
+
+```typescript
+// main.ts
+import './styles/tailwindbase.css';
+```
+
+### 常用类名
+
+```vue
+<!-- 间距 -->
+<div class="p-4 m-2">padding 1rem, margin 0.5rem</div>
+
+<!-- 布局 -->
+<div class="flex items-center justify-between">Flex 布局</div>
+
+<!-- 文字 -->
+<p class="text-sm text-gray-500 font-bold">文字样式</p>
+
+<!-- 响应式 -->
+<div class="w-full md:w-1/2 lg:w-1/3">响应式宽度</div>
+```
+
+## ElementPlus 主题
+
+ElementPlus 通过 CSS 变量支持主题定制：
+
+```typescript
+// main.ts
+import 'element-plus/dist/index.css';
+import 'element-plus/theme-chalk/display.css';
+import 'element-plus/theme-chalk/dark/css-vars.css'; // 深色模式 CSS 变量
+```
+
+### ElementPlus 全局引入
+
+```typescript
+// src/plugins/setupElement.ts
+import ElementPlus from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+
+export function setupElement(app) {
+    app.use(ElementPlus, { locale: zhCn, size: 'default' });
+}
+```
+
+## 深色模式
+
+通过 ElementPlus 的 `dark/css-vars.css` 和 Tailwind 的 `dark` 模式实现深色主题：
+
+```vue
+<template>
+    <el-switch v-model="isDark" @change="toggleDark" />
+</template>
+
+<script setup>
+const isDark = ref(false);
+const toggleDark = (val) => {
+    document.documentElement.classList.toggle('dark', val);
+};
+</script>
+```
+
+深色模式样式：
+
+```css
+.dark {
+ --el-bg-color: #1d1e1f;
+ --el-text-color-primary: #e5eaf3;
+ --el-border-color: #4c4d4f;
+}
+```
+
+## 设计配置 Store
+
+深色模式和主题色通过 `designSetting` store 管理：
+
+```typescript
+// src/hooks/setting/useDesignSetting.ts
+
+export function useDesignSetting() {
+    return {
+        getAppTheme: computed(() => designStore.appTheme),
+        getDarkTheme: computed(() => designStore.darkTheme),
+    };
+}
+```
+
+## 页面样式约定
+
+### PageWrapper
+
+页面使用 `PageWrapper` 组件包裹，提供统一的页面容器样式：
+
+```vue
+<template>
+    <PageWrapper>
+        <el-card :bordered="false" class="pt-3 mb-3 proCard">
+            <!-- 搜索区域 -->
+        </el-card>
+        <el-card :bordered="false" class="proCard">
+            <!-- 表格区域 -->
+        </el-card>
+    </PageWrapper>
+</template>
+```
+
+### proCard 样式
+
+`proCard` 是项目定义的卡片样式类，用于统一卡片组件的间距和边框。
+
+:::tip 温馨提示
+优先使用 Tailwind 原子类实现样式，避免编写自定义 CSS。需要全局覆盖时使用 CSS 变量。SCSS 变量通过 Vite `additionalData` 自动注入，无需每个文件手动引入。
+:::
+
+## 总结
+
+样式方案采用 Tailwind CSS 提供原子化样式 + SCSS 全局变量（Vite `additionalData` 注入）+ ElementPlus 主题覆盖，支持深色模式切换。`designSetting` store 管理主题配置，`PageWrapper` 组件提供统一页面容器。