@liu_jimmy/create-fe-kit 0.1.0

package/index.js

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+
+/**
+ * create-fe-kit
+ * Usage: pnpm create @liu_jimmy/fe-kit   or   npx @liu_jimmy/create-fe-kit
+ * Prompts for project name + framework (Vue / React / Svelte), then copies template.
+ */
+import { createInterface } from "readline";
+import { createWriteStream, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "fs";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATES_DIR = join(__dirname, "templates");
+
+const rl = createInterface({ input: process.stdin, output: process.stdout });
+
+function ask(question, defaultAnswer = "") {
+  return new Promise((resolve) => {
+    const prompt = defaultAnswer ? `${question} (${defaultAnswer}): ` : `${question}: `;
+    rl.question(prompt, (answer) => resolve(answer.trim() || defaultAnswer));
+  });
+}
+
+function copyRecursive(src, dest, vars = {}) {
+  mkdirSync(dest, { recursive: true });
+  for (const name of readdirSync(src)) {
+    if (name === "node_modules") continue;
+    const srcPath = join(src, name);
+    const destPath = join(dest, name);
+    const stat = statSync(srcPath);
+    if (stat.isDirectory()) {
+      copyRecursive(srcPath, destPath, vars);
+    } else {
+      let content = readFileSync(srcPath, "utf8");
+      for (const [key, value] of Object.entries(vars)) {
+        content = content.replace(new RegExp(`{{${key}}}`, "g"), value);
+      }
+      writeFileSync(destPath, content);
+    }
+  }
+}
+
+async function main() {
+  console.log("\n  create-fe-kit — Vue / React / Svelte + Vite + fe-kit\n");
+
+  const projectName = await ask("Project name", "my-fe-kit-app");
+  const nameSafe = projectName.replace(/\s+/g, "-").toLowerCase();
+  console.log("\nFramework:");
+  console.log("  1) Vue");
+  console.log("  2) React");
+  console.log("  3) Svelte");
+  const choice = await ask("Choose (1/2/3)", "1");
+  const framework = { "1": "vue", "2": "react", "3": "svelte" }[choice] || "vue";
+
+  const templatePath = join(TEMPLATES_DIR, framework);
+  try {
+    statSync(templatePath);
+  } catch {
+    console.error(`\nTemplate "${framework}" not found. Use Vue (1) for now.`);
+    rl.close();
+    process.exit(1);
+  }
+
+  const targetDir = join(process.cwd(), nameSafe);
+  try {
+    statSync(targetDir);
+    console.error(`\nDirectory already exists: ${targetDir}`);
+    rl.close();
+    process.exit(1);
+  } catch {}
+
+  const vars = {
+    PROJECT_NAME: nameSafe,
+    TITLE: projectName,
+  };
+
+  console.log(`\nCreating ${nameSafe} with ${framework}...`);
+  copyRecursive(templatePath, targetDir, vars);
+
+  console.log("\nDone. Next steps:\n");
+  console.log(`  cd ${nameSafe}`);
+  console.log("  pnpm install");
+  console.log("  pnpm dev\n");
+  rl.close();
+}
+
+main().catch((err) => {
+  console.error(err);
+  rl.close();
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@liu_jimmy/create-fe-kit",
+  "version": "0.1.0",
+  "description": "Create a new project with fe-kit (Vue / React / Svelte + Vite + Tailwind v3 + ESLint)",
+  "type": "module",
+  "bin": {
+    "create-fe-kit": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "templates"
+  ],
+  "keywords": [
+    "create",
+    "fe-kit",
+    "vue",
+    "react",
+    "svelte",
+    "vite",
+    "scaffold"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fe-kit/fe-kit.git"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/templates/react/.cursor/rules/fe-kit-style.mdc

@@ -0,0 +1,23 @@
+---
+description: 生成/修改前端代码时必须遵守 fe-kit 的样式与命名规范，禁止偏离
+alwaysApply: true
+---
+
+# fe-kit 风格约束（生成代码时必须遵守）
+
+本项目中**所有生成或修改的前端代码**必须符合以下规范。不得使用任意颜色/间距/圆角，必须使用 fe-kit 的语义 class 与命名约定。
+
+## 一、样式：只允许 fe-kit 语义 class
+
+- **禁止**：内联 `style` 写颜色、间距、圆角、阴影；禁止任意 Tailwind 颜色如 `bg-blue-500`；禁止 Tailwind 任意值写颜色如 `bg-[#fff]`。
+- **必须**：使用 fe-kit tailwind preset 的语义 class。
+
+### 背景与文字：`bg-bg`、`bg-bg-elevated`、`text-fg`、`text-fg-muted`
+### 主色与边框：`bg-primary`、`text-primary-fg`、`border-border`
+### 圆角/阴影：`rounded-xl`、`shadow-md` 等；主题 `theme-blue`/`theme-purple`/`theme-green`，深色 `dark`
+
+## 二、命名
+
+- 目录 kebab-case；组件文件 PascalCase；非组件文件 kebab-case；变量 camelCase；常量 UPPER_SNAKE_CASE；类型 PascalCase；函数动词开头。
+
+## 三、生成后应通过 `pnpm lint`。

package/templates/react/AGENTS.md

@@ -0,0 +1,3 @@
+# AI 生成代码约束（fe-kit）
+
+生成或修改前端代码时必须遵守：只使用 fe-kit 语义 class（`bg-bg`、`text-fg`、`border-border`、`bg-primary`、`rounded-xl` 等），禁止内联颜色/任意 Tailwind 颜色或任意值；命名按 kebab-case 目录、PascalCase 组件、camelCase 变量、UPPER_SNAKE_CASE 常量；生成后应通过 `pnpm lint`。

package/templates/react/eslint.config.js

@@ -0,0 +1,3 @@
+import feKitPreset from "@liu_jimmy/fe-kit-eslint-preset";
+
+export default feKitPreset;

package/templates/react/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{TITLE}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@liu_jimmy/fe-kit-tailwind-preset": "^0.1.0",
+    "@liu_jimmy/fe-kit-tokens": "^0.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@liu_jimmy/fe-kit-eslint-preset": "^0.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.39.3",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.3"
+  }
+}

package/templates/react/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/react/src/App.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+type ThemeId = "theme-blue" | "theme-purple" | "theme-green";
+
+const themes: { id: ThemeId; label: string }[] = [
+  { id: "theme-blue", label: "蓝" },
+  { id: "theme-purple", label: "紫" },
+  { id: "theme-green", label: "绿" },
+];
+
+function setTheme(id: ThemeId) {
+  document.documentElement.classList.remove("theme-blue", "theme-purple", "theme-green");
+  document.documentElement.classList.add(id);
+}
+
+function App() {
+  const [theme, setThemeState] = useState<ThemeId>("theme-blue");
+  const [isDark, setIsDark] = useState(false);
+
+  function handleSetTheme(id: ThemeId) {
+    setTheme(id);
+    setThemeState(id);
+  }
+
+  function toggleDark() {
+    setIsDark((v) => !v);
+    document.documentElement.classList.toggle("dark", !isDark);
+  }
+
+  return (
+    <div className="min-h-screen bg-bg text-fg font-sans">
+      <header className="border-b border-border bg-bg-elevated px-6 py-4 shadow-sm">
+        <h1 className="text-2xl font-semibold text-fg">{{TITLE}}</h1>
+        <p className="mt-1 text-sm text-fg-muted">fe-kit + React + Vite</p>
+      </header>
+
+      <main className="mx-auto max-w-2xl space-y-8 p-6">
+        <section className="rounded-xl border border-border bg-bg-elevated p-6 shadow-md">
+          <h2 className="text-lg font-medium text-fg">主题</h2>
+          <div className="mt-4 flex flex-wrap gap-2">
+            {themes.map((t) => (
+              <button
+                key={t.id}
+                type="button"
+                className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
+                  theme === t.id ? "bg-primary text-primary-fg" : "bg-primary-muted text-fg hover:bg-primary hover:text-primary-fg"
+                }`}
+                onClick={() => handleSetTheme(t.id)}
+              >
+                {t.label}
+              </button>
+            ))}
+            <button
+              type="button"
+              className={`rounded-lg border px-4 py-2 text-sm font-medium ${
+                isDark ? "border-fg bg-fg text-bg" : "border-border bg-bg-muted text-fg"
+              }`}
+              onClick={toggleDark}
+            >
+              {isDark ? "浅色" : "深色"}
+            </button>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+export default App;

package/templates/react/src/main.tsx

@@ -0,0 +1,11 @@
+import "@liu_jimmy/fe-kit-tokens";
+import "./style.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/react/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/react/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "@liu_jimmy/fe-kit-tokens" {
+  const url: string;
+  export default url;
+}

package/templates/react/tailwind.config.js

@@ -0,0 +1,7 @@
+import preset from "@liu_jimmy/fe-kit-tailwind-preset";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [preset],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+};

package/templates/react/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/react/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/react/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});

package/templates/svelte/.cursor/rules/fe-kit-style.mdc

@@ -0,0 +1,8 @@
+---
+description: 生成/修改前端代码时必须遵守 fe-kit 的样式与命名规范
+alwaysApply: true
+---
+
+# fe-kit 风格约束
+
+只使用 fe-kit 语义 class（bg-bg、text-fg、border-border、bg-primary、rounded-xl 等）；禁止内联颜色、任意 Tailwind 颜色或任意值；命名：目录 kebab-case、组件 PascalCase、变量 camelCase、常量 UPPER_SNAKE_CASE；生成后应通过 pnpm lint。

package/templates/svelte/AGENTS.md

@@ -0,0 +1,3 @@
+# AI 生成代码约束（fe-kit）
+
+只使用 fe-kit 语义 class（bg-bg、text-fg、border-border、bg-primary、rounded-xl 等）；禁止内联颜色与任意 Tailwind 颜色；命名按 CONVENTIONS；生成后应通过 pnpm lint。

package/templates/svelte/eslint.config.js

@@ -0,0 +1,3 @@
+import feKitPreset from "@liu_jimmy/fe-kit-eslint-preset";
+
+export default feKitPreset;

package/templates/svelte/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{TITLE}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/svelte/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@liu_jimmy/fe-kit-tailwind-preset": "^0.1.0",
+    "@liu_jimmy/fe-kit-tokens": "^0.1.0",
+    "svelte": "^4.2.0"
+  },
+  "devDependencies": {
+    "@liu_jimmy/fe-kit-eslint-preset": "^0.1.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.39.3",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.3"
+  }
+}

package/templates/svelte/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/svelte/src/App.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  type ThemeId = "theme-blue" | "theme-purple" | "theme-green";
+
+  let theme: ThemeId = "theme-blue";
+  let isDark = false;
+
+  const themes: { id: ThemeId; label: string }[] = [
+    { id: "theme-blue", label: "蓝" },
+    { id: "theme-purple", label: "紫" },
+    { id: "theme-green", label: "绿" },
+  ];
+
+  function setTheme(id: ThemeId) {
+    document.documentElement.classList.remove("theme-blue", "theme-purple", "theme-green");
+    document.documentElement.classList.add(id);
+    theme = id;
+  }
+
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle("dark", isDark);
+  }
+</script>
+
+<main class="min-h-screen bg-bg text-fg font-sans">
+  <header class="border-b border-border bg-bg-elevated px-6 py-4 shadow-sm">
+    <h1 class="text-2xl font-semibold text-fg">{{TITLE}}</h1>
+    <p class="mt-1 text-sm text-fg-muted">fe-kit + Svelte + Vite</p>
+  </header>
+
+  <div class="mx-auto max-w-2xl space-y-8 p-6">
+    <section class="rounded-xl border border-border bg-bg-elevated p-6 shadow-md">
+      <h2 class="text-lg font-medium text-fg">主题</h2>
+      <div class="mt-4 flex flex-wrap gap-2">
+        {#each themes as t}
+          <button
+            type="button"
+            class="rounded-lg px-4 py-2 text-sm font-medium transition-colors {theme === t.id
+              ? 'bg-primary text-primary-fg'
+              : 'bg-primary-muted text-fg hover:bg-primary hover:text-primary-fg'}"
+            on:click={() => setTheme(t.id)}
+          >
+            {t.label}
+          </button>
+        {/each}
+        <button
+          type="button"
+          class="rounded-lg border px-4 py-2 text-sm font-medium {isDark ? 'border-fg bg-fg text-bg' : 'border-border bg-bg-muted text-fg'}"
+          on:click={toggleDark}
+        >
+          {isDark ? "浅色" : "深色"}
+        </button>
+      </div>
+    </section>
+  </div>
+</main>

package/templates/svelte/src/main.ts

@@ -0,0 +1,7 @@
+import "@liu_jimmy/fe-kit-tokens";
+import "./style.css";
+import App from "./App.svelte";
+
+const app = new App({ target: document.getElementById("app")! });
+
+export default app;

package/templates/svelte/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/svelte/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+
+declare module "@liu_jimmy/fe-kit-tokens" {
+  const url: string;
+  export default url;
+}

package/templates/svelte/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+  preprocess: vitePreprocess(),
+};

package/templates/svelte/tailwind.config.js

@@ -0,0 +1,7 @@
+import preset from "@liu_jimmy/fe-kit-tailwind-preset";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [preset],
+  content: ["./index.html", "./src/**/*.{svelte,js,ts}"],
+};

package/templates/svelte/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/svelte/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/svelte/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+
+export default defineConfig({
+  plugins: [svelte()],
+});

package/templates/vue/.cursor/rules/fe-kit-style.mdc

@@ -0,0 +1,51 @@
+---
+description: 生成/修改前端代码时必须遵守 fe-kit 的样式与命名规范，禁止偏离
+alwaysApply: true
+---
+
+# fe-kit 风格约束（生成代码时必须遵守）
+
+本项目中**所有生成或修改的前端代码**必须符合以下规范。不得使用任意颜色/间距/圆角，必须使用 fe-kit 的语义 class 与命名约定。
+
+## 一、样式：只允许 fe-kit 语义 class
+
+- **禁止**：内联 `style` 写颜色、间距、圆角、阴影；禁止任意 Tailwind 颜色如 `bg-blue-500`、`text-gray-700`；禁止 Tailwind 任意值写颜色如 `bg-[#fff]`、`text-[rgb(0,0,0)]`。
+- **必须**：使用 fe-kit tailwind preset 的语义 class。
+
+### 背景与文字
+- 背景：`bg-bg`、`bg-bg-elevated`、`bg-bg-muted`
+- 文字：`text-fg`、`text-fg-muted`、`text-fg-subtle`
+
+### 主色与边框
+- 主色：`bg-primary`、`text-primary-fg`、`bg-primary-muted`、hover 用 `hover:bg-primary-hover`
+- 边框：`border-border`、`border-border-strong`
+
+### 圆角、间距、阴影
+- 圆角：`rounded-sm`、`rounded-md`、`rounded-lg`、`rounded-xl`、`rounded-2xl`、`rounded-full`
+- 阴影：`shadow-sm`、`shadow-md`、`shadow-lg`、`shadow-xl`
+- 间距：`p-4`、`px-6`、`space-y-4` 等
+
+### 主题
+- 主题色：`theme-blue`、`theme-purple`、`theme-green`（加在 `document.documentElement`）
+- 深色：根节点加 `dark` class
+
+## 二、文件与目录命名
+
+- **目录**：kebab-case（`user-card/`、`data-table/`）
+- **组件文件**（.vue / .tsx / .svelte）：PascalCase（`UserCard.vue`）
+- **非组件文件**（.ts / .js）：kebab-case（`format-date.ts`）
+
+## 三、变量与函数命名
+
+- **变量**：camelCase（`userName`、`isLoading`）
+- **函数**：动词开头（`fetchUser()`、`formatDate()`）
+- **常量**：UPPER_SNAKE_CASE（`API_BASE_URL`）
+- **类型**：PascalCase（`type User`、`interface Pagination`）
+
+## 四、Vue 组件
+
+- 模板中组件名 PascalCase；块顺序：script → template → style
+
+## 五、生成后自检
+
+- 代码应能通过 `pnpm lint`；若有报错只做最小修复。

package/templates/vue/AGENTS.md

@@ -0,0 +1,22 @@
+# AI 生成代码约束（fe-kit）
+
+生成或修改前端代码时必须遵守以下约束。
+
+## 核心原则
+
+1. **样式**：只使用 fe-kit 语义 class（`bg-bg`、`text-fg`、`border-border`、`bg-primary`、`rounded-xl` 等），禁止内联颜色/间距，禁止任意 Tailwind 颜色（如 `bg-blue-500`）或任意值（如 `bg-[#fff]`）。
+2. **命名**：目录 kebab-case、组件文件 PascalCase、变量 camelCase、常量 UPPER_SNAKE_CASE、类型 PascalCase、函数动词开头。
+3. **生成后**：应能通过 `pnpm lint`。
+
+## 语义 class 速查
+
+| 用途 | 使用示例 |
+|------|----------|
+| 背景 | `bg-bg`、`bg-bg-elevated`、`bg-bg-muted` |
+| 文字 | `text-fg`、`text-fg-muted`、`text-fg-subtle` |
+| 主色 | `bg-primary`、`text-primary-fg`、`bg-primary-muted`、`hover:bg-primary-hover` |
+| 边框 | `border-border`、`border-border-strong` |
+| 圆角 | `rounded-sm`～`rounded-2xl`、`rounded-full` |
+| 阴影 | `shadow-sm`～`shadow-xl` |
+
+主题：根节点 `theme-blue` / `theme-purple` / `theme-green`；深色加 `dark`。

package/templates/vue/eslint.config.js

@@ -0,0 +1,3 @@
+import feKitPreset from "@liu_jimmy/fe-kit-eslint-preset";
+
+export default feKitPreset;

package/templates/vue/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{TITLE}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vue/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@liu_jimmy/fe-kit-tailwind-preset": "^0.1.0",
+    "@liu_jimmy/fe-kit-tokens": "^0.1.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@liu_jimmy/fe-kit-eslint-preset": "^0.1.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.39.3",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.3",
+    "vue-tsc": "^2.1.10"
+  }
+}

package/templates/vue/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/vue/src/App.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const theme = ref<"theme-blue" | "theme-purple" | "theme-green">("theme-blue");
+const isDark = ref(false);
+
+const themes = [
+  { id: "theme-blue" as const, label: "蓝" },
+  { id: "theme-purple" as const, label: "紫" },
+  { id: "theme-green" as const, label: "绿" },
+] as const;
+
+function setTheme(id: (typeof themes)[number]["id"]) {
+  document.documentElement.classList.remove("theme-blue", "theme-purple", "theme-green");
+  document.documentElement.classList.add(id);
+  theme.value = id;
+}
+
+function toggleDark() {
+  isDark.value = !isDark.value;
+  document.documentElement.classList.toggle("dark", isDark.value);
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-bg text-fg font-sans">
+    <header class="border-b border-border bg-bg-elevated px-6 py-4 shadow-sm">
+      <h1 class="text-2xl font-semibold text-fg">{{TITLE}}</h1>
+      <p class="mt-1 text-sm text-fg-muted">fe-kit + Vue + Vite</p>
+    </header>
+
+    <main class="mx-auto max-w-2xl space-y-8 p-6">
+      <section class="rounded-xl border border-border bg-bg-elevated p-6 shadow-md">
+        <h2 class="text-lg font-medium text-fg">主题</h2>
+        <div class="mt-4 flex flex-wrap gap-2">
+          <button
+            v-for="t in themes"
+            :key="t.id"
+            type="button"
+            :class="[
+              'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
+              theme === t.id ? 'bg-primary text-primary-fg' : 'bg-primary-muted text-fg hover:bg-primary hover:text-primary-fg',
+            ]"
+            @click="setTheme(t.id)"
+          >
+            {{ t.label }}
+          </button>
+          <button
+            type="button"
+            :class="['rounded-lg border px-4 py-2 text-sm font-medium', isDark ? 'border-fg bg-fg text-bg' : 'border-border bg-bg-muted text-fg']"
+            @click="toggleDark"
+          >
+            {{ isDark ? "浅色" : "深色" }}
+          </button>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>

package/templates/vue/src/main.ts

@@ -0,0 +1,6 @@
+import "@liu_jimmy/fe-kit-tokens";
+import "./style.css";
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");

package/templates/vue/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/vue/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "@liu_jimmy/fe-kit-tokens" {
+  const url: string;
+  export default url;
+}

package/templates/vue/tailwind.config.js

@@ -0,0 +1,7 @@
+import preset from "@liu_jimmy/fe-kit-tailwind-preset";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [preset],
+  content: ["./index.html", "./src/**/*.{vue,ts,tsx,js,jsx}"],
+};

package/templates/vue/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/vue/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/vue/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [vue()],
+});