9.14 样式与主题定制

:::tip 概述前端使用 WindiCSS + Less 实现样式管理，通过主题预处理器支持默认/暗色双主题切换。 :::

技术栈

技术	用途
WindiCSS	原子化 CSS 框架（Tailwind 语法兼容）
Less	全局样式变量和主题
AntDesign Vue 主题变量	组件样式覆盖（antd.less 变量）

全局样式文件

ui/src/styles/
├── index.less           # 全局样式入口（@import 过渡动画与公共样式）
├── color.less           # 颜色变量定义（内容区背景、基础色）
├── common.less          # 公共样式类（页面容器、滚动条、字体）
├── config.less          # 配置样式（@import 引用 color.less）
├── tailwind.css         # Tailwind/Windi 兼容入口（可选引入）
├── theme/
│   ├── theme-default.less  # 默认主题（引入 antd 默认主题变量）
│   └── theme-dark.less     # 暗色主题（引入 antd 暗色主题变量）
└── transition/          # 过渡动画（index/base/fade/scale/scroll/slide/zoom）

主题文件

主题文件直接引入 ant-design-vue 官方主题，通过 @zougt/vite-plugin-theme-preprocessor 编译为多套作用域变量：

/* ui/src/styles/theme/theme-default.less */
@import "ant-design-vue/lib/style/themes/default.less";

/* ui/src/styles/theme/theme-dark.less */
@import "ant-design-vue/lib/style/themes/dark.less";

构建时的主题作用域配置（build/vite/plugin/theme.ts）：

themePreprocessorPlugin({
  less: {
    multipleScopeVars: [
      { scopeName: 'theme-default', path: path.resolve('src/styles/theme/theme-default.less') },
      { scopeName: 'theme-dark', path: path.resolve('src/styles/theme/theme-dark.less') },
    ],
    extract: false,  // 不抽取独立主题 CSS 文件
  },
});

:::tip 双主题切换页面挂载不同的作用域类名（theme-default / theme-dark）即可整体切换深浅色，所有 antd 组件变量随作用域自动切换。 :::

颜色变量示例

/* ui/src/styles/color.less */
html {
  //content
  --content-bg: #f0f2f5;
}

@white: #fff;
@content-bg: #f0f2f5;

主题配置管理

布局主题（导航/顶栏配色）通过 projectSetting Store 管理：

import { useProjectSettingStore } from '@/store/modules/projectSetting';

const projectStore = useProjectSettingStore();

// 导航主题 / 顶栏主题
projectStore.navTheme;
projectStore.headerTheme;
projectStore.setNavTheme('dark');

AntDesign 组件覆盖

如需覆盖 antd 组件样式，写在作用域主题文件或 common.less 中，使用 .ant-* 选择器：

/* ui/src/styles/theme/theme-default.less 或页面 scoped 样式 */
.ant-table-thead > tr > th {
  background: #f5f7fa;
}

:::warning 覆盖要点

antd 样式类名为 .ant-*（如 .ant-btn、.ant-table），与 ElementPlus 的 .el-* 不同；
优先调整主题变量（@primary-color 等），其次才是选择器覆盖；
暗色主题的覆盖要放进 theme-dark.less 作用域，避免深浅色互相污染。 :::

WindiCSS 配置

// ui/windi.config.ts
import { defineConfig } from 'vite-plugin-windicss';

export default defineConfig({
  darkMode: 'class',
  theme: {
    extend: {
      screens: {
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        '2xl': '1600px',
      },
    },
  },
});

自定义全局样式

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

// 页面容器
#app {
  width: 100%;
  height: 100%;
}

// 滚动条
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

:::tip 样式约定

优先使用 WindiCSS 原子类（布局/间距/颜色）
组件级覆盖写进 theme/*.less 作用域，避免散落在页面中
与后端联调时注意：列表状态 Tag 颜色应与字典值语义一致（如 1=在用 success / 2=停用 error） :::

3.9 KiB Raw Blame History Unescape Escape