签入版本
This commit is contained in:
@@ -1,115 +1,151 @@
|
||||
# 9.14 样式与主题定制
|
||||
|
||||
:::tip 概述
|
||||
前端使用 TailwindCSS + SCSS 实现样式管理，支持主题色切换和暗色模式。
|
||||
前端使用 WindiCSS + Less 实现样式管理，通过主题预处理器支持默认/暗色双主题切换。
|
||||
:::
|
||||
|
||||
## 技术栈
|
||||
|
||||
| 技术 | 用途 |
|
||||
|------|------|
|
||||
| TailwindCSS | 原子化 CSS 框架 |
|
||||
| SCSS | 全局样式变量和主题 |
|
||||
| ElementPlus 主题变量 | 组件样式覆盖 |
|
||||
| WindiCSS | 原子化 CSS 框架（Tailwind 语法兼容） |
|
||||
| Less | 全局样式变量和主题 |
|
||||
| AntDesign Vue 主题变量 | 组件样式覆盖（antd.less 变量） |
|
||||
|
||||
## 全局样式文件
|
||||
|
||||
```text
|
||||
ui/src/styles/
|
||||
├── index.scss # 全局样式入口（@import 所有子模块）
|
||||
├── var.scss # SCSS 变量定义（颜色、尺寸等）
|
||||
├── common.scss # 公共样式类
|
||||
├── tailwind.css # TailwindCSS 入口
|
||||
├── tailwindbase.css # TailwindCSS 基础重置
|
||||
├── index.less # 全局样式入口（@import 过渡动画与公共样式）
|
||||
├── color.less # 颜色变量定义（内容区背景、基础色）
|
||||
├── common.less # 公共样式类（页面容器、滚动条、字体）
|
||||
├── config.less # 配置样式（@import 引用 color.less）
|
||||
├── tailwind.css # Tailwind/Windi 兼容入口（可选引入）
|
||||
├── theme/
|
||||
│ ├── light.scss # 浅色主题（含 ElementPlus 组件覆盖）
|
||||
│ └── dark.scss # 深色主题
|
||||
└── transition/
|
||||
└── index.scss # 过渡动画
|
||||
│ ├── theme-default.less # 默认主题（引入 antd 默认主题变量）
|
||||
│ └── theme-dark.less # 暗色主题（引入 antd 暗色主题变量）
|
||||
└── transition/ # 过渡动画（index/base/fade/scale/scroll/slide/zoom）
|
||||
```
|
||||
|
||||
## SCSS 变量
|
||||
## 主题文件
|
||||
|
||||
```scss
|
||||
/* ui/src/styles/var.scss */
|
||||
$primaryColor: #165DFF;
|
||||
$primaryColorHover: #57a3f3;
|
||||
$header-height: 64px;
|
||||
$footer-height: 70px;
|
||||
主题文件直接引入 ant-design-vue 官方主题，通过 `@zougt/vite-plugin-theme-preprocessor` 编译为多套作用域变量：
|
||||
|
||||
```less
|
||||
/* ui/src/styles/theme/theme-default.less */
|
||||
@import "ant-design-vue/lib/style/themes/default.less";
|
||||
```
|
||||
|
||||
## 主题色切换
|
||||
```less
|
||||
/* ui/src/styles/theme/theme-dark.less */
|
||||
@import "ant-design-vue/lib/style/themes/dark.less";
|
||||
```
|
||||
|
||||
通过 `designSettingStore` 管理主题：
|
||||
构建时的主题作用域配置（`build/vite/plugin/theme.ts`）：
|
||||
|
||||
```typescript
|
||||
import { useDesignSettingStore } from '@/store/modules/designSetting';
|
||||
|
||||
const designStore = useDesignSettingStore();
|
||||
|
||||
// 切换暗色模式
|
||||
designStore.setDarkMode(true);
|
||||
|
||||
// 获取当前主题色
|
||||
const primaryColor = designStore.appTheme;
|
||||
themePreprocessorPlugin({
|
||||
less: {
|
||||
multipleScopeVars: [
|
||||
{ scopeName: 'theme-default', path: path.resolve('src/styles/theme/theme-default.less') },
|
||||
{ scopeName: 'theme-dark', path: path.resolve('src/styles/theme/theme-dark.less') },
|
||||
],
|
||||
extract: false, // 不抽取独立主题 CSS 文件
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## ElementPlus 主题覆盖
|
||||
:::tip 双主题切换
|
||||
页面挂载不同的作用域类名（`theme-default` / `theme-dark`）即可整体切换深浅色，所有 antd 组件变量随作用域自动切换。
|
||||
:::
|
||||
|
||||
ElementPlus 组件样式覆盖定义在主题文件中，通过 `[data-theme]` 选择器区分深浅色模式：
|
||||
## 颜色变量示例
|
||||
|
||||
```scss
|
||||
/* ui/src/styles/theme/light.scss */
|
||||
[data-theme='light'] {
|
||||
--el-border-color-base: #e4e7ed;
|
||||
```less
|
||||
/* ui/src/styles/color.less */
|
||||
html {
|
||||
//content
|
||||
--content-bg: #f0f2f5;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-header-bg-color: #f5f7fa;
|
||||
--el-table-header-text-color: rgb(31 34 37);
|
||||
}
|
||||
// ...更多组件覆盖
|
||||
@white: #fff;
|
||||
@content-bg: #f0f2f5;
|
||||
```
|
||||
|
||||
## 主题配置管理
|
||||
|
||||
布局主题（导航/顶栏配色）通过 `projectSetting` Store 管理：
|
||||
|
||||
```typescript
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
|
||||
const projectStore = useProjectSettingStore();
|
||||
|
||||
// 导航主题 / 顶栏主题
|
||||
projectStore.navTheme;
|
||||
projectStore.headerTheme;
|
||||
projectStore.setNavTheme('dark');
|
||||
```
|
||||
|
||||
## AntDesign 组件覆盖
|
||||
|
||||
如需覆盖 antd 组件样式，写在作用域主题文件或 `common.less` 中，使用 `.ant-*` 选择器：
|
||||
|
||||
```less
|
||||
/* ui/src/styles/theme/theme-default.less 或页面 scoped 样式 */
|
||||
.ant-table-thead > tr > th {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
```
|
||||
|
||||
## TailwindCSS 配置
|
||||
:::warning 覆盖要点
|
||||
- antd 样式类名为 `.ant-*`（如 `.ant-btn`、`.ant-table`），与 ElementPlus 的 `.el-*` 不同；
|
||||
- 优先调整主题变量（`@primary-color` 等），其次才是选择器覆盖；
|
||||
- 暗色主题的覆盖要放进 `theme-dark.less` 作用域，避免深浅色互相污染。
|
||||
:::
|
||||
|
||||
```javascript
|
||||
// ui/tailwind.config.js
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{vue,ts,tsx}'],
|
||||
## WindiCSS 配置
|
||||
|
||||
```typescript
|
||||
// ui/windi.config.ts
|
||||
import { defineConfig } from 'vite-plugin-windicss';
|
||||
|
||||
export default defineConfig({
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: 'var(--primary-color)',
|
||||
screens: {
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
'2xl': '1600px',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
## 自定义全局样式
|
||||
|
||||
```scss
|
||||
/* ui/src/styles/index.scss */
|
||||
```less
|
||||
/* ui/src/styles/common.less */
|
||||
|
||||
// 页面容器
|
||||
.page-container {
|
||||
padding: 16px;
|
||||
background: var(--bg-color);
|
||||
border-radius: 8px;
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 搜索表单
|
||||
.search-form {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
// 滚动条
|
||||
*::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
:::tip 样式约定
|
||||
- 优先使用 TailwindCSS 原子类（布局/间距/颜色）
|
||||
- 组件级覆盖写在 `theme/*.scss`，避免散落在页面中
|
||||
- 与后端联调时注意：列表状态 Tag 颜色应与字典值语义一致（如 1=在用 success / 2=停用 danger）
|
||||
- 优先使用 WindiCSS 原子类（布局/间距/颜色）
|
||||
- 组件级覆盖写进 `theme/*.less` 作用域，避免散落在页面中
|
||||
- 与后端联调时注意：列表状态 Tag 颜色应与字典值语义一致（如 1=在用 success / 2=停用 error）
|
||||
:::
|
||||
|
||||
Reference in New Issue
Block a user