151 lines
3.5 KiB
Markdown
151 lines
3.5 KiB
Markdown
# 样式与主题
|
|
|
|
:::tip 说明
|
|
前端样式方案采用 Tailwind CSS + SCSS + AntDesign Vue 主题覆盖，支持深色模式切换。全局 SCSS 变量通过 Vite 的 `additionalData` 注入。
|
|
:::
|
|
|
|
## 样式架构
|
|
|
|
```
|
|
src/styles/
|
|
├── var.scss # SCSS 全局变量（通过 Vite additionalData 注入）
|
|
├── index.scss # 入口文件，引入所有样式
|
|
├── tailwindbase.css # Tailwind CSS 基础样式
|
|
└── ant-override.css # AntDesign Vue 主题覆盖（可选）
|
|
```
|
|
|
|
## 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>
|
|
```
|
|
|
|
## AntDesign Vue 主题
|
|
|
|
AntDesign Vue 通过 CSS 变量和 ConfigProvider 支持主题定制：
|
|
|
|
```typescript
|
|
// main.ts
|
|
import 'ant-design-vue/dist/reset.css';
|
|
```
|
|
|
|
### AntDesign Vue 全局引入
|
|
|
|
```typescript
|
|
// src/plugins/setupAntd.ts
|
|
import Antd from 'ant-design-vue';
|
|
|
|
export function setupAntd(app) {
|
|
app.use(Antd);
|
|
}
|
|
```
|
|
|
|
## 深色模式
|
|
|
|
通过 AntDesign Vue 的 ConfigProvider 和 Tailwind 的 `dark` 模式实现深色主题：
|
|
|
|
```vue
|
|
<template>
|
|
<a-switch v-model:checked="isDark" @change="toggleDark" />
|
|
</template>
|
|
|
|
<script setup>
|
|
const isDark = ref(false);
|
|
const toggleDark = (val) => {
|
|
document.documentElement.classList.toggle('dark', val);
|
|
};
|
|
</script>
|
|
```
|
|
|
|
深色模式样式：
|
|
|
|
```css
|
|
.dark {
|
|
--ant-color-bg-base: #1d1e1f;
|
|
--ant-color-text: #e5eaf3;
|
|
--ant-color-border: #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>
|
|
<a-card :bordered="false" class="pt-3 mb-3 proCard">
|
|
<!-- 搜索区域 -->
|
|
</a-card>
|
|
<a-card :bordered="false" class="proCard">
|
|
<!-- 表格区域 -->
|
|
</a-card>
|
|
</PageWrapper>
|
|
</template>
|
|
```
|
|
|
|
### proCard 样式
|
|
|
|
`proCard` 是项目定义的卡片样式类，用于统一卡片组件的间距和边框。
|
|
|
|
:::tip 温馨提示
|
|
优先使用 Tailwind 原子类实现样式，避免编写自定义 CSS。需要全局覆盖时使用 CSS 变量。SCSS 变量通过 Vite `additionalData` 自动注入，无需每个文件手动引入。
|
|
:::
|
|
|
|
## 总结
|
|
|
|
样式方案采用 Tailwind CSS 提供原子化样式 + SCSS 全局变量（Vite `additionalData` 注入）+ AntDesign Vue 主题覆盖，支持深色模式切换。`designSetting` store 管理主题配置，`PageWrapper` 组件提供统一页面容器。
|