109 lines
2.2 KiB
Markdown
109 lines
2.2 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;
|
|
}
|
|
``` |