9.14 样式与主题定制

概述

前端使用 TailwindCSS + SCSS 实现样式管理，支持主题色切换和暗色模式。

技术栈

技术	用途
TailwindCSS	原子化 CSS 框架
SCSS	全局样式变量和主题
ElementPlus 主题变量	组件样式覆盖

全局样式文件

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 变量

/* ui/src/styles/var.scss */
$primaryColor: #165DFF;
$primaryColorHover: #57a3f3;
$header-height: 64px;
$footer-height: 70px;

主题色切换

通过 designSettingStore 管理主题：

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

const designStore = useDesignSettingStore();

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

// 获取当前主题色
const primaryColor = designStore.appTheme;

ElementPlus 主题覆盖

ElementPlus 组件样式覆盖定义在主题文件中，通过 [data-theme] 选择器区分深浅色模式：

/* 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 配置

// ui/tailwind.config.js
module.exports = {
  content: ['./src/**/*.{vue,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary-color)',
      },
    },
  },
};

自定义全局样式

/* 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;
}