1
import fs from "fs";
2
import path from "path";
3
import { fileURLToPath } from "url";
4

5
import {
6
  commonTokens,
7
  colorTokens,
8
} from "../src/components/theme/ThemeToken.ts";
9

10
// 获取当前文件路径 (ESM 环境下替代 __dirname)
11
const __filename = fileURLToPath(import.meta.url);
12
const __dirname = path.dirname(__filename);
80 collapsed lines
13

14
/**
15
 * 将驼峰命名转换为 kebab-case
16
 * 例如: radiusSm -> radius-sm, primaryHover -> primary-hover
17
 */
18
function toKebabCase(str: string): string {
19
  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
20
}
21

22
/**
23
 * 生成 CSS 内容
24
 */
25
function generateCss() {
26
  let cssContent = `/*
27
 * ==========================================================================
28
 *  THIS FILE IS AUTO-GENERATED BY scripts/GenerateTheme.ts
29
 *  DO NOT EDIT DIRECTLY.
30
==========================================================================
31
 */
32

33
@theme {
34
  /* ---  通用 CSS 生成 --- */
35
`;
36
  // 处理 commonTokens (不需要 --color- 前缀)
37
  // 映射规则: key -> --key-kebab
38
  for (const [key, value] of Object.entries(commonTokens)) {
39
    cssContent += `  --${toKebabCase(key)}: ${value};\n`;
40
  }
41

42
  cssContent += `
43
  /* --- 默认主题颜色 (Light Theme Colors) --- */
44
`;
45
  // 处理 light 主题作为默认值放入 @theme (添加 --color- 前缀)
46
  // 映射规则: key -> --color-key-kebab
47
  if (colorTokens.light) {
48
    for (const [key, value] of Object.entries(colorTokens.light)) {
49
      cssContent += `  --color-${toKebabCase(key)}: ${value};\n`;
50
    }
51
  }
52

53
  cssContent += `}
54

55
/*
56
 * ==========================================================================
57
 *  其他主题 (Other Themes)
58
 * ==========================================================================
59
 */
60
`;
61

62
  // 处理其他主题 (Dark, Sakura...)
63
  for (const [themeKey, tokens] of Object.entries(colorTokens)) {
64
    // 跳过 light，因为已经放在 @theme 里作为默认值了
65
    // 配合你的 useTheme 逻辑：light 时移除 data-theme 属性，默认读取 @theme
66
    if (themeKey === "light") continue;
67

68
    cssContent += `\n[data-theme='${themeKey}'] {\n`;
69

70
    for (const [key, value] of Object.entries(tokens)) {
71
      cssContent += `  --color-${toKebabCase(key)}: ${value};\n`;
72
    }
73

74
    cssContent += `}\n`;
75
  }
76

77
  return cssContent;
78
}
79

80
/**
81
 * 写入文件
82
 */
83
function writeToFile() {
84
  try {
85
    const css = generateCss();
86
    // 输出路径：src/components/theme/generated-theme.css (根据需要调整)
87
    const outputPath = path.resolve(
88
      __dirname,
89
      "../src/components/theme/styles/generated-theme.css",
90
    );
91

92
    fs.writeFileSync(outputPath, css, "utf-8");
93
    console.log(`✅ Theme CSS generated successfully at: ${outputPath}`);
94
  } catch (error) {
95
    console.error("❌ Error generating theme CSS:", error);
96
    process.exit(1);
97
  }
98
}
99

100
// 执行
101
writeToFile();

1
"scripts": {
2
    ...
3
    "theme:gen": "tsx ./scripts/GenerateTheme.ts"
4
 },

1
// ....前面略
2
/**
3
 * 封装为导出函数
4
 */
5
export function writeThemeCss() {
6
  try {
7
    const css = generateCss();
8
    // 确保路径相对于项目根目录是正确的
9
    // 在 Vite 插件中执行时，process.cwd() 通常是项目根目录
10
    const outputPath = path.resolve(
11
      process.cwd(),
12
      "src/components/theme/styles/generated-theme.css",
13
    );
14

15
    fs.writeFileSync(outputPath, css, "utf-8");
16
    console.log(`[ThemeGen] CSS updated at ${new Date().toLocaleTimeString()}`);
17
  } catch (error) {
18
    console.error("[ThemeGen] Error:", error);
19
  }
20
}

1
import { writeThemeCss } from "../scripts/GenerateTheme";
2
export const themeGeneratorPlugin = () => {
3
  return {
4
    name: "vite-plugin-naive-tailwind-theme",
5
    // Vite 服务启动/构建开始时，先生成一次
6
    buildStart() {
7
      writeThemeCss();
8
    },
9
    // 热更新处理
10
    handleHotUpdate({ file, server }) {
11
      // 监听 ThemeToken.ts 文件的变化
12
      if (file.includes("ThemeToken.ts")) {
13
        writeThemeCss();
14
        // 显式触发 CSS 文件的更新
15
        // 或者简单地打印日志，让 Tailwind 的监听器去捕获生成的 CSS 变化
16
        server.ws.send({
17
          type: "full-reload",
18
          path: "*",
19
        });
20
      }
21
    },
22
  };
23
};

1
// https://vite.dev/config/
2
export default defineConfig(({ mode }) => {{
3
    plugins: [..., themeGeneratorPlugin()]
4
}}

1
@import 'tailwindcss';
2
/*
3
 * ==========================================================================
4
 *  Tailwind CSS v4 主题配置
5
==========================================================================
6
 */
7

8
// 导入自动生成的CSS文件
9
@import './generated-theme.css';
10

11
/*
12
 * ==========================================================================
44 collapsed lines
13
 *  全局基础样式 (@layer base)
14
==========================================================================
15
 */
16
@layer base {
17
  body {
18
    background-color: var(--color-bg-body);
19
    color: var(--color-text-body); /* 默认正文颜色 */
20
    /* 优化字体渲染 */
21
    -webkit-font-smoothing: antialiased;
22
    -moz-osx-font-smoothing: grayscale;
23
  }
24

25
  /* 标题默认使用 main 颜色 */
26
  h1,
27
  h2,
28
  h3,
29
  h4,
30
  h5,
31
  h6 {
32
    color: var(--color-text-main);
33
  }
34
}
35

36
/*
37
 * ==========================================================================
38
 *  通用工具类 (@layer utilities)
39
==========================================================================
40
 */
41
@layer utilities {
42
   /* 这是我自己用在a标签上面的shake样式 */
43
  .hover-shake {
44
    @apply inline-block transition-transform duration-200 ease-in-out;
45
    &:hover {
46
      @apply scale-110 translate-x-0.5 rotate-3;
47
    }
48
    &:active {
49
      @apply translate-x-0 rotate-0;
50
    }
51
  }
52
  /* iconfont 全局样式，你没有的话就不需要 */
53
  .zw-icon {
54
    width: 1em;
55
    height: 1em;
56
    vertical-align: -0.15em;
57
    fill: currentColor;
58
    overflow: hidden;
59
  }
60
}

1
... <link href="/src/components/theme/styles/token.css" rel="stylesheet" />

1
<script setup lang="ts">
2
import { zhCN, dateZhCN, NConfigProvider, darkTheme } from "naive-ui";
3
import { useTheme } from "@/components/theme/hooks/useTheme";
4
import { computed } from "vue";
5
const { isDark, activeThemeOverrides } = useTheme();
6
const naiveTheme = computed(() => (isDark.value ? darkTheme : null));
7
</script>
8
<template>
9
  <n-config-provider
10
    :locale="zhCN"
11
    :date-locale="dateZhCN"
12
    :theme-overrides="activeThemeOverrides"
13
    :theme="naiveTheme"
14
  >
15
    <RouterView></RouterView>
16
  </n-config-provider>
17
</template>