样式与主题

说明

前端样式方案采用 Tailwind CSS + SCSS + NaiveUI 主题系统，支持深色模式切换。全局 SCSS 变量通过 Vite 的 additionalData 注入。

样式架构

src/styles/
├── var.scss             # SCSS 全局变量（通过 Vite additionalData 注入）
├── index.scss           # 入口文件，引入所有样式
└── tailwindbase.css     # Tailwind CSS 基础样式

SCSS 全局变量

Vite 配置中通过 additionalData 注入全局 SCSS 变量：

// vite.config.ts
css: {
    preprocessorOptions: {
        scss: {
            additionalData: `@import "src/styles/var.scss";`,
        },
    },
},

这意味着 var.scss 中定义的变量在所有 .vue 和 .scss 文件中自动可用，无需手动 @import。

Tailwind CSS

项目使用 Tailwind CSS 提供原子化样式能力，基础样式通过 tailwindbase.css 引入：

// main.ts
import './styles/tailwindbase.css';

常用类名

<!-- 间距 -->
<div class="p-4 m-2">padding 1rem, margin 0.5rem</div>

<!-- 布局 -->
<div class="flex items-center justify-between">Flex 布局</div>

<!-- 文字 -->
<p class="text-sm text-gray-500 font-bold">文字样式</p>

<!-- 响应式 -->
<div class="w-full md:w-1/2 lg:w-1/3">响应式宽度</div>

NaiveUI 主题

NaiveUI 通过 CSS 变量和主题覆盖机制支持主题定制：

// App.vue 或 Application 组件中
import { darkTheme, zhCN, dateZhCN } from 'naive-ui';

// 通过 n-config-provider 全局配置
<n-config-provider :theme="isDark ? darkTheme : null" :locale="zhCN" :date-locale="dateZhCN">
    <router-view />
</n-config-provider>

NaiveUI 全局配置

// NaiveUI 组件按需使用，无需全局引入
// 通过 n-config-provider 提供全局主题和语言配置

深色模式

通过 NaiveUI 的 darkTheme 和 Tailwind 的 dark 模式实现深色主题：

<template>
    <n-switch v-model:value="isDark" @change="toggleDark">
        <template #checked>暗</template>
        <template #unchecked>亮</template>
    </n-switch>
</template>

<script setup>
import { darkTheme } from 'naive-ui';

const isDark = ref(false);
const toggleDark = (val) => {
    document.documentElement.classList.toggle('dark', val);
};
</script>

深色模式样式通过 NaiveUI 的 CSS 变量自动适配，无需手动覆盖。

设计配置 Store

深色模式和主题色通过 designSetting store 管理：

// src/hooks/setting/useDesignSetting.ts

export function useDesignSetting() {
    return {
        getAppTheme: computed(() => designStore.appTheme),
        getDarkTheme: computed(() => designStore.darkTheme),
    };
}

页面样式约定

PageWrapper

页面使用 PageWrapper 组件包裹，提供统一的页面容器样式：

<template>
    <PageWrapper>
        <n-card :bordered="false" class="pt-3 mb-3 proCard">
            <!-- 搜索区域 -->
        </n-card>
        <n-card :bordered="false" class="proCard">
            <!-- 表格区域 -->
        </n-card>
    </PageWrapper>
</template>

proCard 样式

proCard 是项目定义的卡片样式类，用于统一卡片组件的间距和边框。

温馨提示

优先使用 Tailwind 原子类实现样式，避免编写自定义 CSS。需要全局覆盖时使用 CSS 变量。SCSS 变量通过 Vite additionalData 自动注入，无需每个文件手动引入。NaiveUI 主题通过 n-config-provider 的 theme 属性控制，深色模式使用 darkTheme。

总结

样式方案采用 Tailwind CSS 提供原子化样式 + SCSS 全局变量（Vite additionalData 注入）+ NaiveUI 主题系统，支持深色模式切换。designSetting store 管理主题配置，PageWrapper 组件提供统一页面容器。NaiveUI 通过 n-config-provider 实现全局主题和语言配置。