# 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;
}
```

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