# 9.14 样式与主题定制

:::tip 概述
前端使用 TailwindCSS + Less 实现样式管理，组件主题通过 NaiveUI 的 `NConfigProvider`（`theme` / `themeOverrides`）实现主题色切换和暗色模式。
:::

## 技术栈

| 技术 | 用途 |
|------|------|
| TailwindCSS | 原子化 CSS 框架 |
| Less | 全局样式变量和公共样式 |
| NaiveUI 主题机制 | NConfigProvider 的 theme / themeOverrides 组件主题覆盖 |

## 全局样式文件

```text
ui/src/styles/
├── index.less          # 全局样式入口（@import 子模块）
├── var.less            # Less 变量定义（颜色、尺寸等）
├── common.less         # 公共样式类
├── tailwind.css        # TailwindCSS 入口
└── transition/         # 过渡动画
    ├── index.less
    ├── base.less / fade.less / scale.less
    └── slide.less / zoom.less / scroll.less
```

## Less 变量

```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` 管理主题，`App.vue` 将主题注入 `NConfigProvider`：

```typescript
import { useDesignSettingStore } from '@/store/modules/designSetting';

const designStore = useDesignSettingStore();

// 切换暗色模式
designStore.setDarkTheme(true);

// 获取当前主题色（可选主题色列表见 designStore.appThemeList）
const primaryColor = designStore.appTheme;
```

主题色配置来源：

```typescript
// ui/src/settings/designSetting.ts
export const appThemeList: string[] = ['#2d8cf0', '#0960bd', '#0084f4', /* ... */];

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: ['./public/**/*.html', './index.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
  important: true,
  theme: {
    extend: {},
  },
  plugins: [],
};
```

## 自定义全局样式

```less
/* ui/src/styles/common.less */

// 页面容器
.page-container {
  padding: 16px;
  background: var(--bg-color);
  border-radius: 8px;
}

// 搜索表单
.search-form {
  margin-bottom: 16px;
  padding: 16px;
  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>
```

:::tip 样式约定
- 优先使用 TailwindCSS 原子类（布局/间距/颜色）
- 组件主题统一走 `NConfigProvider` 的 `themeOverrides`，避免散落在页面中覆盖
- 与后端联调时注意：列表状态 Tag 颜色应与字典值语义一致（如 1=在用 success / 2=停用 danger）
:::