9.14 样式与主题定制

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

技术栈

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

全局样式文件

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

/* ui/src/styles/var.less */
@primaryColor: #2d8cf0;
@primaryColorHover: #57a3f3;
@header-height: 64px;
@footer-height: 70px;

全局样式入口：

/* ui/src/styles/index.less */
@import './transition/index.less';
@import './var.less';
@import './common.less';

主题色切换

通过 designSettingStore 管理主题，App.vue 将主题注入 NConfigProvider：

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

const designStore = useDesignSettingStore();

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

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

主题色配置来源：

// 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 覆盖：

<!-- 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 配置

// ui/tailwind.config.js
module.exports = {
  content: ['./public/**/*.html', './index.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
  important: true,
  theme: {
    extend: {},
  },
  plugins: [],
};

自定义全局样式

/* 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：

<style scoped>
/* 覆盖 n-card 内边距 */
.custom-card {
  --n-padding-top: 8px;
  --n-padding-bottom: 8px;
}
</style>

4.0 KiB Raw Blame History Unescape Escape