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

5
import { commonTokens, colorTokens } from '../src/components/theme/ThemeToken.ts'
6

7
// 获取当前文件路径 (ESM 环境下替代 __dirname)
8
const __filename = fileURLToPath(import.meta.url)
9
const __dirname = path.dirname(__filename)
10

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

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

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

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

50
  cssContent += `}
51

52
/*
53
 * ==========================================================================
54
 *  其他主题 (Other Themes)
55
 * ==========================================================================
56
 */
57
`
58

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

65
    cssContent += `\n[data-theme='${themeKey}'] {\n`
66

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

71
    cssContent += `}\n`
72
  }
73

74
  return cssContent
75
}
76

77
/**
78
 * 写入文件
79
 */
80
function writeToFile() {
81
  try {
82
    const css = generateCss()
83
    // 输出路径：src/components/theme/generated-theme.css (根据需要调整)
84
    const outputPath = path.resolve(__dirname, '../src/components/theme/styles/generated-theme.css')
85

86
    fs.writeFileSync(outputPath, css, 'utf-8')
87
    console.log(`✅ Theme CSS generated successfully at: ${outputPath}`)
88
  } catch (error) {
89
    console.error('❌ Error generating theme CSS:', error)
90
    process.exit(1)
91
  }
92
}
93

94
// 执行
95
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
 * ==========================================================================
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
...
2
<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>