From 59497be05e669870096394a7ad6638c89cdd2271 Mon Sep 17 00:00:00 2001
From: lutinglt <lutinglt@users.noreply.github.com>
Date: Sat, 28 Jun 2025 14:17:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BC=80=E5=8F=91=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E5=BB=BA=E8=AE=AE&.css.tsx=E5=85=BC=E5=AE=B9=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/extensions.json              |  9 +++++++++
 eslint.config.js                     |  1 -
 src/core/vite.ts                     | 10 ++++++----
 src/types/color/console.ts           |  8 ++------
 themes/{dark.css.ts => dark.css.tsx} |  8 ++------
 vite.config.ts                       |  4 ++--
 6 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 .vscode/extensions.json
 rename themes/{dark.css.ts => dark.css.tsx} (97%)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..3dc0dec
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "usernamehw.errorlens",
+    "mikestead.dotenv",
+    "styled-components.vscode-styled-components"
+  ]
+}
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.js
index 276b9fd..44cacaa 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -19,7 +19,6 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
     },
   }
 );
diff --git a/src/core/vite.ts b/src/core/vite.ts
index 4323d0d..d10ed56 100644
--- a/src/core/vite.ts
+++ b/src/core/vite.ts
@@ -4,6 +4,8 @@ import fs from "node:fs";
 import path from "node:path";
 import type { Plugin } from "vite";
 
+const suffix = ".css.tsx"
+
 /**
  * 生成主题输入
  * @param outDir 输出目录与 vite 配置中的 outDir 一致, 用于生成临时目录
@@ -28,12 +30,12 @@ export function themeInput(
 
   for (const entry of themeEntries) {
     // 目录下所有的 css.ts 文件都作为主题入口
-    if (entry.isFile() && entry.name.endsWith(".css.ts")) {
-      const fileName = entry.name.replace(".css.ts", "");
+    if (entry.isFile() && entry.name.endsWith(suffix)) {
+      const fileName = entry.name.replace(suffix, "");
       // 开发模式只打包 devTheme 主题
       if (mode === "dev" && fileName !== devTheme) continue;
       // 创建颜色主题的 css.ts 文件, vanilla-extract 需要这个文件后缀名并生成 css
-      const tmpCssTs = path.join(tmpDir, `${fileName}.css.ts`);
+      const tmpCssTs = path.join(tmpDir, `${fileName}${suffix}`);
       const createImport = `import { createTheme } from "src/core";`;
       const themeImport = `import theme from "themes/${fileName}";`;
       const createFn = `createTheme(theme);`;
@@ -41,7 +43,7 @@ export function themeInput(
       // 生成主题入口的 .ts 文件, 合并样式和颜色主题
       const tmpInputTs = path.join(tmpDir, `${fileName}.ts`);
       const stylesImport = `import "styles";`;
-      const cssImport = `import "./${fileName}.css.ts";`;
+      const cssImport = `import "./${fileName}${suffix}";`;
       fs.writeFileSync(tmpInputTs, `${stylesImport}\n${cssImport}`);
 
       input[fileName] = tmpInputTs;
diff --git a/src/types/color/console.ts b/src/types/color/console.ts
index 4fc0194..b161833 100644
--- a/src/types/color/console.ts
+++ b/src/types/color/console.ts
@@ -21,12 +21,8 @@ export const console = {
   },
   bg: null,
   border: null,
-  active: {
-    bg: null,
-  },
-  hover: {
-    bg: null,
-  },
+  activeBg: "color-console-active-bg",
+  hoverBg: "color-console-hover-bg",
   menu: {
     bg: null,
     border: null,
diff --git a/themes/dark.css.ts b/themes/dark.css.tsx
similarity index 97%
rename from themes/dark.css.ts
rename to themes/dark.css.tsx
index a779ece..563eb87 100644
--- a/themes/dark.css.ts
+++ b/themes/dark.css.tsx
@@ -8,12 +8,8 @@ const console: Console = {
   },
   bg: "#010409",
   border: "#2b3139",
-  active: {
-    bg: "#2a313c",
-  },
-  hover: {
-    bg: "#15191f",
-  },
+  activeBg: "#2a313c",
+  hoverBg: "#15191f",
   menu: {
     bg: themeVars.color.body,
     border: themeVars.color.light.border,
diff --git a/vite.config.ts b/vite.config.ts
index d2c70f7..5de6068 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,7 +13,7 @@ dotenv.config({quiet: true});
 
 const require = createRequire(import.meta.url);
 
-const devTheme = process.env.DEV_THEME || "dark"; // 开发模式下的主题, 仅打包该主题
+const devTheme = process.env.DEV_THEME || "dark"; // 开发模式仅打包单个颜色主题
 const outDir = "dist"; // 输出目录
 const themesDir = "themes"; // 颜色主题目录
 
@@ -25,7 +25,7 @@ export default defineConfig(({ mode }) => {
         styles: path.resolve(__dirname, "styles"),
         themes: path.resolve(__dirname, "themes"),
       },
-      extensions: [".js", ".jsx", ".ts", ".tsx", ".css.ts"],
+      extensions: [".js", ".jsx", ".ts", ".tsx", ".css.tsx"],
     },
     css: {
       transformer: "lightningcss",