116 lines
2.5 KiB
Markdown
116 lines
2.5 KiB
Markdown
# 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;
|
||
}
|
||
```
|
||
|
||
:::tip 样式约定
|
||
- 优先使用 TailwindCSS 原子类（布局/间距/颜色）
|
||
- 组件级覆盖写在 `theme/*.scss`，避免散落在页面中
|
||
- 与后端联调时注意：列表状态 Tag 颜色应与字典值语义一致（如 1=在用 success / 2=停用 danger）
|
||
:::
|