# 样式与主题

<!-- Copyright (c) 2021-2026 小蚂蚁云团队 版权所有 -->

:::tip 说明
前端样式方案采用 Tailwind CSS + SCSS + Ant Design Vue 主题覆盖，支持深色模式切换。全局 SCSS 变量通过 Vite 的 `additionalData` 注入。
:::

## 样式架构

```
src/styles/
├── var.scss             # SCSS 全局变量（通过 Vite additionalData 注入）
├── index.scss           # 入口文件，引入所有样式
├── tailwindbase.css     # Tailwind CSS 基础样式
└── antd-override.css    # Ant Design 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>
```

## Ant Design Vue 主题

Ant Design Vue 通过 CSS 变量和 ConfigProvider 支持主题定制：

```typescript
// src/plugins/antdv.ts
import { Button, Form, Table, Modal, message } from 'ant-design-vue';

export function setupAntd(app) {
    app.use(Button).use(Form).use(Table).use(Modal);
    // ... 其他组件注册
}
```

## 深色模式

通过 Tailwind 的 `dark` 模式和 Ant Design Vue 的 ConfigProvider 实现深色主题：

```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>
```

深色模式样式通过 Ant Design Vue 的主题算法自动处理，也可通过 CSS 变量自定义。

## 设计配置 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` 注入）+ Ant Design Vue 主题覆盖，支持深色模式切换。`designSetting` store 管理主题配置，`PageWrapper` 组件提供统一页面容器。