签入版本
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
# 9.14 样式与主题定制
|
||||
|
||||
:::tip 概述
|
||||
前端使用 TailwindCSS + SCSS 实现样式管理，支持主题色切换和暗色模式。
|
||||
前端使用 TailwindCSS + Less 实现样式管理，组件主题通过 NaiveUI 的 `NConfigProvider`（`theme` / `themeOverrides`）实现主题色切换和暗色模式。
|
||||
:::
|
||||
|
||||
## 技术栈
|
||||
@@ -9,38 +9,45 @@
|
||||
| 技术 | 用途 |
|
||||
|------|------|
|
||||
| TailwindCSS | 原子化 CSS 框架 |
|
||||
| SCSS | 全局样式变量和主题 |
|
||||
| ElementPlus 主题变量 | 组件样式覆盖 |
|
||||
| Less | 全局样式变量和公共样式 |
|
||||
| NaiveUI 主题机制 | NConfigProvider 的 theme / themeOverrides 组件主题覆盖 |
|
||||
|
||||
## 全局样式文件
|
||||
|
||||
```text
|
||||
ui/src/styles/
|
||||
├── index.scss # 全局样式入口（@import 所有子模块）
|
||||
├── var.scss # SCSS 变量定义（颜色、尺寸等）
|
||||
├── common.scss # 公共样式类
|
||||
├── index.less # 全局样式入口（@import 子模块）
|
||||
├── var.less # Less 变量定义（颜色、尺寸等）
|
||||
├── common.less # 公共样式类
|
||||
├── tailwind.css # TailwindCSS 入口
|
||||
├── tailwindbase.css # TailwindCSS 基础重置
|
||||
├── theme/
|
||||
│ ├── light.scss # 浅色主题（含 ElementPlus 组件覆盖）
|
||||
│ └── dark.scss # 深色主题
|
||||
└── transition/
|
||||
└── index.scss # 过渡动画
|
||||
└── transition/ # 过渡动画
|
||||
├── index.less
|
||||
├── base.less / fade.less / scale.less
|
||||
└── slide.less / zoom.less / scroll.less
|
||||
```
|
||||
|
||||
## SCSS 变量
|
||||
## Less 变量
|
||||
|
||||
```scss
|
||||
/* ui/src/styles/var.scss */
|
||||
$primaryColor: #165DFF;
|
||||
$primaryColorHover: #57a3f3;
|
||||
$header-height: 64px;
|
||||
$footer-height: 70px;
|
||||
```less
|
||||
/* ui/src/styles/var.less */
|
||||
@primaryColor: #2d8cf0;
|
||||
@primaryColorHover: #57a3f3;
|
||||
@header-height: 64px;
|
||||
@footer-height: 70px;
|
||||
```
|
||||
|
||||
全局样式入口：
|
||||
|
||||
```less
|
||||
/* ui/src/styles/index.less */
|
||||
@import './transition/index.less';
|
||||
@import './var.less';
|
||||
@import './common.less';
|
||||
```
|
||||
|
||||
## 主题色切换
|
||||
|
||||
通过 `designSettingStore` 管理主题：
|
||||
通过 `designSettingStore` 管理主题，`App.vue` 将主题注入 `NConfigProvider`：
|
||||
|
||||
```typescript
|
||||
import { useDesignSettingStore } from '@/store/modules/designSetting';
|
||||
@@ -48,49 +55,91 @@ import { useDesignSettingStore } from '@/store/modules/designSetting';
|
||||
const designStore = useDesignSettingStore();
|
||||
|
||||
// 切换暗色模式
|
||||
designStore.setDarkMode(true);
|
||||
designStore.setDarkTheme(true);
|
||||
|
||||
// 获取当前主题色
|
||||
// 获取当前主题色（可选主题色列表见 designStore.appThemeList）
|
||||
const primaryColor = designStore.appTheme;
|
||||
```
|
||||
|
||||
## ElementPlus 主题覆盖
|
||||
主题色配置来源：
|
||||
|
||||
ElementPlus 组件样式覆盖定义在主题文件中，通过 `[data-theme]` 选择器区分深浅色模式：
|
||||
```typescript
|
||||
// ui/src/settings/designSetting.ts
|
||||
export const appThemeList: string[] = ['#2d8cf0', '#0960bd', '#0084f4', /* ... */];
|
||||
|
||||
```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);
|
||||
}
|
||||
// ...更多组件覆盖
|
||||
}
|
||||
const setting = {
|
||||
darkTheme: false, // 深色主题开关
|
||||
appTheme: '#2d8cf0', // 系统主题色
|
||||
appThemeList, // 内置主题色列表
|
||||
};
|
||||
```
|
||||
|
||||
## NaiveUI 主题覆盖
|
||||
|
||||
`App.vue` 根主题注入 `NConfigProvider`，深色模式传 `darkTheme`，主题色通过 `themeOverrides` 覆盖：
|
||||
|
||||
```vue
|
||||
<!-- ui/src/App.vue -->
|
||||
<template>
|
||||
<NConfigProvider
|
||||
:date-locale="dateZhCN"
|
||||
:locale="zhCN"
|
||||
:theme="getDarkTheme"
|
||||
:theme-overrides="getThemeOverrides"
|
||||
>
|
||||
<!-- 应用内容 -->
|
||||
</NConfigProvider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
|
||||
import { useDesignSettingStore } from '@/store/modules/designSetting';
|
||||
import { lighten } from '@/utils';
|
||||
|
||||
const designStore = useDesignSettingStore();
|
||||
|
||||
// 主题色覆盖（GlobalThemeOverrides）
|
||||
const getThemeOverrides = computed(() => {
|
||||
const appTheme = designStore.appTheme;
|
||||
const lightenStr = lighten(designStore.appTheme, 6);
|
||||
return {
|
||||
common: {
|
||||
primaryColor: appTheme,
|
||||
primaryColorSuppl: appTheme,
|
||||
primaryColorHover: lightenStr,
|
||||
colorLoading: appTheme,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// 深色模式：传入 naive-ui 的 darkTheme，否则 undefined（浅色）
|
||||
const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
|
||||
</script>
|
||||
```
|
||||
|
||||
:::tip 说明
|
||||
NaiveUI 组件样式由 CSS 变量（`--n-*`）驱动，`themeOverrides` 会自动生成对应的 CSS 变量并应用到所有组件。
|
||||
:::
|
||||
|
||||
## TailwindCSS 配置
|
||||
|
||||
```javascript
|
||||
// ui/tailwind.config.js
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{vue,ts,tsx}'],
|
||||
content: ['./public/**/*.html', './index.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
|
||||
important: true,
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: 'var(--primary-color)',
|
||||
},
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
```
|
||||
|
||||
## 自定义全局样式
|
||||
|
||||
```scss
|
||||
/* ui/src/styles/index.scss */
|
||||
```less
|
||||
/* ui/src/styles/common.less */
|
||||
|
||||
// 页面容器
|
||||
.page-container {
|
||||
@@ -106,4 +155,18 @@ module.exports = {
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
## 局部样式覆盖
|
||||
|
||||
组件内如需覆盖 NaiveUI 样式，可使用 NaiveUI 提供的 `--n-*` CSS 变量或 TailwindCSS：
|
||||
|
||||
```vue
|
||||
<style scoped>
|
||||
/* 覆盖 n-card 内边距 */
|
||||
.custom-card {
|
||||
--n-padding-top: 8px;
|
||||
--n-padding-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user