mm

apps/ui-site/package.json

@@ -26,11 +26,15 @@
     "build": "tsc -p tsconfig.build.json && vite build"
   },
   "devDependencies": {
+    "@rollup/plugin-typescript": "^12.3.0",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "~5.2.0",
     "glob": "^13.0.6",
+    "tailwind-merge": "^3.5.0",
+    "tailwind-variants": "^3.2.2",
+    "ts-node": "^10.9.2",
     "typescript": "~6.0.3",
     "vite": "~7.3.2",
     "vite-plugin-dts": "^4.5.4"

apps/ui-site/scripts-plugin/vite-plugin-gen-index-css.ts

@@ -1,137 +0,0 @@
-// plugins/vite-plugin-gen-index-css.ts
-import type { Plugin } from "vite";
-import fs from "fs";
-import path from "path";
-import { globSync } from "glob";
-
-interface Config {
-  targetDirs: string[];
-  includeExtensions: string[];
-  importSyntax: "@import";
-  importSyntaxTail?: string;
-  excludeFilePattern: RegExp[];
-  excludeDirs: string[];
-  warnDuplicateTailwindImport: boolean;
-  indexFileName: string;
-}
-
-const CONFIG: Config = {
-  targetDirs: ["src"],
-  includeExtensions: [".css"],
-  importSyntax: "@import",
-  excludeFilePattern: [/index\.css/, /index\.scss/, /\.(test|spec)\./],
-  excludeDirs: [
-    "__tests__",
-    "tests",
-    "story",
-    "stories",
-    "types",
-    "node_modules",
-    "dist",
-    "build",
-  ],
-  warnDuplicateTailwindImport: true,
-  indexFileName: "index.css",
-};
-
-const normalizePath = (p: string) => p.replace(/\\/g, "/");
-
-function isValidFile(filePath: string, config: Config): boolean {
-  const filenameWithExt = filePath.split(/[\\/]/).pop()!;
-  const shouldExcludeFile = config.excludeFilePattern.some((p) =>
-    p.test(filenameWithExt),
-  );
-  if (shouldExcludeFile) return false;
-
-  const normalized = normalizePath(filePath);
-  const shouldExcludeDir = config.excludeDirs.some((dir) =>
-    normalized.includes(`/${dir}/`),
-  );
-  if (shouldExcludeDir) return false;
-
-  const ext = path.extname(filePath);
-  if (!config.includeExtensions.includes(ext)) return false;
-
-  if (config.warnDuplicateTailwindImport) {
-    try {
-      const content = fs.readFileSync(filePath, "utf-8");
-      if (
-        content.includes('@import "tailwindcss"') ||
-        content.includes("@import 'tailwindcss'")
-      ) {
-        console.warn(
-          `[gen-index-css] ${filePath} 含有重复的 @import "tailwindcss"，建议删除`,
-        );
-      }
-    } catch {
-      // ignore
-    }
-  }
-
-  return true;
-}
-
-function generateIndexFile(config: Config) {
-  const [targetDir] = config.targetDirs;
-  const dirPath = path.resolve(process.cwd(), targetDir);
-
-  const searchPattern = path.resolve(dirPath, "**", "*.*");
-
-  const allFiles = globSync(searchPattern, {
-    nodir: true,
-    absolute: true,
-    windowsPathsNoEscape: true,
-    dot: false,
-    follow: true,
-  });
-
-  const validFiles = allFiles.filter((f) => isValidFile(f, config));
-
-  console.log(`✅ 有效 CSS 文件数量: ${validFiles.length}`);
-  validFiles.sort();
-
-  const importStatements = validFiles.map((file) => {
-    const relPath = path.relative(dirPath, file);
-    const importPath = "./" + relPath.replace(/\\/g, "/");
-    return `${config.importSyntax} '${importPath}';`;
-  });
-
-  const indexContent = `
-@import "tailwindcss";
-${importStatements.join("\n")}
-`.trim();
-
-  const indexFilePath = path.resolve(dirPath, config.indexFileName);
-
-  // ✅ 内容比对，防止无限 rebuild
-  if (fs.existsSync(indexFilePath)) {
-    const old = fs.readFileSync(indexFilePath, "utf8");
-    if (old === indexContent) return;
-  }
-
-  fs.writeFileSync(indexFilePath, indexContent, "utf8");
-  console.log(`✅ 成功生成 ${config.indexFileName}: ${indexFilePath}`);
-}
-
-export function genIndexCssPlugin(): Plugin {
-  return {
-    name: "vite-plugin-gen-index-css",
-    apply: "build",
-
-    buildStart() {
-      try {
-        generateIndexFile(CONFIG);
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : String(err);
-        this.error(`[gen-index-css] failed: ${msg}`);
-        throw err;
-      }
-    },
-
-    handleHotUpdate({ file }) {
-      if (normalizePath(file).endsWith(`/src/${CONFIG.indexFileName}`)) {
-        return [];
-      }
-    },
-  };
-}

apps/ui-site/scripts-plugin/vite-plugin-gen-index-ts.ts

@@ -1,129 +0,0 @@
-// plugins/vite-plugin-gen-index-ts.ts
-import type { Plugin } from "vite";
-import fs from "fs";
-import path from "path";
-import { globSync } from "glob";
-
-interface Config {
-  targetDirs: string[];
-  includeExtensions: string[];
-  excludeKeywords: {
-    dirs: string[];
-    fileSuffixes: string[];
-    filePatterns: RegExp[];
-  };
-}
-
-const CONFIG: Config = {
-  targetDirs: ["src"],
-  includeExtensions: [".ts", ".tsx", ".vue"],
-  excludeKeywords: {
-    dirs: ["__tests__", "tests", "story", "stories", "types"],
-    fileSuffixes: [".d.ts"],
-    filePatterns: [
-      /^index\.(ts|tsx|js|jsx)$/,
-      /\.(test|spec)\./,
-      /\.(story|stories)\./,
-    ],
-  },
-};
-
-const normalizePath = (p: string) => p.replace(/\\/g, "/");
-
-const isInExcludeDir = (filePath: string) => {
-  const normalized = normalizePath(filePath);
-  return CONFIG.excludeKeywords.dirs.some((dir) =>
-    normalized.includes(`/${dir}/`),
-  );
-};
-
-const isExcludeSuffix = (filePath: string) =>
-  CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
-    filePath.endsWith(suffix),
-  );
-
-const isMatchExcludePattern = (fileName: string) =>
-  CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
-
-function isValidFile(filePath: string): boolean {
-  const fileName = filePath.split(/[\\/]/).pop()!;
-
-  if (isInExcludeDir(filePath)) return false;
-  if (isExcludeSuffix(filePath)) return false;
-  if (isMatchExcludePattern(fileName)) return false;
-
-  const ext = path.extname(filePath);
-  return CONFIG.includeExtensions.includes(ext);
-}
-
-function generateIndexFile(dirPath: string) {
-  const searchPattern = path.resolve(dirPath, "**", "*.*");
-
-  const allFiles = globSync(searchPattern, {
-    nodir: true,
-    absolute: true,
-    windowsPathsNoEscape: true,
-    dot: false,
-    follow: true,
-  });
-
-  const validFiles = allFiles.filter(isValidFile);
-  if (validFiles.length === 0) return;
-
-  validFiles.sort();
-
-  const exportStatements = validFiles.map((file) => {
-    const relPath = path.relative(dirPath, file);
-    const importPath = `./${relPath
-      .replace(/\.[^.]+$/, "")
-      .replace(/\\/g, "/")}`;
-    return `export * from '${importPath}';`;
-  });
-
-  const indexContent = `
-import './index.css';
-
-${exportStatements.join("\n")}
-`.trim();
-
-  const indexFilePath = path.resolve(dirPath, "index.ts");
-
-  // ✅ 内容比对，避免无限 rebuild
-  if (fs.existsSync(indexFilePath)) {
-    const old = fs.readFileSync(indexFilePath, "utf8");
-    if (old === indexContent) return;
-  }
-
-  fs.writeFileSync(indexFilePath, indexContent, "utf8");
-}
-
-export function genIndexTsPlugin(): Plugin {
-  return {
-    name: "vite-plugin-gen-index-ts",
-    apply: "build",
-
-    buildStart() {
-      const [targetDir] = CONFIG.targetDirs;
-      if (!targetDir) {
-        this.error("CONFIG.targetDirs is empty");
-        return;
-      }
-
-      const absTargetDir = path.resolve(process.cwd(), targetDir);
-
-      try {
-        generateIndexFile(absTargetDir);
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : String(err);
-        this.error(`[gen-index-ts] failed: ${msg}`);
-        throw err;
-      }
-    },
-
-    handleHotUpdate({ file }) {
-      if (file.replace(/\\/g, "/").endsWith("/src/index.ts")) {
-        return [];
-      }
-    },
-  };
-}

apps/ui-site/src/App.tsx

@@ -1,6 +1,13 @@
+import { clsm } from "@defgov/ui-web";
 import { ButtonGallery } from "./gallery/ButtonGallery";
+import { cn } from "tailwind-variants";
 
 export default function App() {
+  const s1 = "hta-xs";
+  const s2 = "hta-sm";
+  const sm = clsm(s1, s2);
+  console.log(sm); // 应该输出 hta-sm
+  // 合并逻辑是，第一个短横线“-”之前的，如果相同，就意味着是冲突项，后面的覆盖前面的
   return (
     <>
       <ButtonGallery />

apps/ui-site/src/common/InnerWrapper.tsx

@@ -1,13 +1,12 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 
 export const InnerWrapper = ({ children }: { children: ReactNode }) => {
   return (
     <div
       style={{
-        gap: "30px",
+        gap: "10px",
         display: "flex",
         flexWrap: "nowrap",
-        margin: "50px",
         alignItems: "center",
       }}
     >

apps/ui-site/src/common/OuterWrapper.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 
 export const OuterWrapper = ({ children }: { children: ReactNode }) => {
   return (
@@ -8,6 +8,7 @@ export const OuterWrapper = ({ children }: { children: ReactNode }) => {
         display: "flex",
         flexWrap: "nowrap",
         flexDirection: "column",
+        margin: "30px",
       }}
     >
       {children}

apps/ui-site/src/gallery/ButtonGallery.tsx

@@ -10,12 +10,241 @@ export const ButtonGallery = () => {
         <Button size="xs" iconSvg={<DownloadSvg />}>
           xsmall
         </Button>
-        <Button size="xs" iconSvg={<DownloadSvg />} iconOnly>
+        <Button size="xs" iconSvg={<DownloadSvg />} iconOnly={true}>
           xsmall
         </Button>
-        <Button size="sm">sm</Button>
-        <Button size="md">md</Button>
-        <Button size="lg">lg</Button>
+        <Button size="sm">small</Button>
+        <Button size="sm" iconSvg={<DownloadSvg />}>
+          small
+        </Button>
+        <Button size="sm" iconSvg={<DownloadSvg />} iconOnly={true}>
+          small
+        </Button>
+      </InnerWrapper>
+      <InnerWrapper>
+        <Button size="md">medium</Button>
+        <Button size="md" iconSvg={<DownloadSvg />}>
+          medium
+        </Button>
+        <Button size="md" iconSvg={<DownloadSvg />} iconOnly={true}>
+          medium
+        </Button>
+        <Button size="lg">large</Button>
+        <Button size="lg" iconSvg={<DownloadSvg />}>
+          large
+        </Button>
+        <Button size="lg" iconSvg={<DownloadSvg />} iconOnly={true}>
+          large
+        </Button>
+      </InnerWrapper>
+      <InnerWrapper>
+        <Button size="xs" variant="outline">
+          xsmall
+        </Button>
+        <Button size="xs" variant="outline" iconSvg={<DownloadSvg />}>
+          xsmall
+        </Button>
+        <Button
+          size="xs"
+          variant="outline"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          xsmall
+        </Button>
+        <Button size="sm" variant="outline">
+          small
+        </Button>
+        <Button size="sm" variant="outline" iconSvg={<DownloadSvg />}>
+          small
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          small
+        </Button>
+      </InnerWrapper>
+      <InnerWrapper>
+        <Button size="md" variant="outline">
+          medium
+        </Button>
+        <Button size="md" variant="outline" iconSvg={<DownloadSvg />}>
+          medium
+        </Button>
+        <Button
+          size="md"
+          variant="outline"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          medium
+        </Button>
+        <Button size="lg" variant="outline">
+          large
+        </Button>
+        <Button size="lg" variant="outline" iconSvg={<DownloadSvg />}>
+          large
+        </Button>
+        <Button
+          size="lg"
+          variant="outline"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          large
+        </Button>
+      </InnerWrapper>
+      <InnerWrapper>
+        <Button size="xs" variant="subtle">
+          xsmall
+        </Button>
+        <Button size="xs" variant="subtle" iconSvg={<DownloadSvg />}>
+          xsmall
+        </Button>
+        <Button
+          size="xs"
+          variant="subtle"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          xsmall
+        </Button>
+        <Button size="sm" variant="subtle">
+          small
+        </Button>
+        <Button size="sm" variant="subtle" iconSvg={<DownloadSvg />}>
+          small
+        </Button>
+        <Button
+          size="sm"
+          variant="subtle"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          small
+        </Button>
+      </InnerWrapper>
+      <InnerWrapper>
+        <Button size="md" variant="subtle">
+          medium
+        </Button>
+        <Button size="md" variant="subtle" iconSvg={<DownloadSvg />}>
+          medium
+        </Button>
+        <Button
+          size="md"
+          variant="subtle"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          medium
+        </Button>
+        <Button size="lg" variant="subtle">
+          large
+        </Button>
+        <Button size="lg" variant="subtle" iconSvg={<DownloadSvg />}>
+          large
+        </Button>
+        <Button
+          size="lg"
+          variant="subtle"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          large
+        </Button>
+      </InnerWrapper>
+      {/* ------------------------------------- */}
+      <InnerWrapper>
+        <Button size="xs" variant="ghost">
+          xsmall
+        </Button>
+        <Button size="xs" variant="ghost" iconSvg={<DownloadSvg />}>
+          xsmall
+        </Button>
+        <Button
+          size="xs"
+          variant="ghost"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          xsmall
+        </Button>
+        <Button size="sm" variant="ghost">
+          small
+        </Button>
+        <Button size="sm" variant="ghost" iconSvg={<DownloadSvg />}>
+          small
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          small
+        </Button>
+      </InnerWrapper>
+      <InnerWrapper>
+        <Button size="md" variant="ghost">
+          medium
+        </Button>
+        <Button size="md" variant="ghost" iconSvg={<DownloadSvg />}>
+          medium
+        </Button>
+        <Button
+          size="md"
+          variant="ghost"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          medium
+        </Button>
+        <Button size="lg" variant="ghost">
+          large
+        </Button>
+        <Button size="lg" variant="ghost" iconSvg={<DownloadSvg />}>
+          large
+        </Button>
+        <Button
+          size="lg"
+          variant="ghost"
+          iconSvg={<DownloadSvg />}
+          iconOnly={true}
+        >
+          large
+        </Button>
+      </InnerWrapper>
+      <InnerWrapper>
+        <Button variant="filled" brand="info">
+          button
+        </Button>
+        <Button variant="outline" brand="info">
+          button
+        </Button>
+        <Button variant="subtle" brand="info">
+          button
+        </Button>
+        <Button variant="ghost" brand="info">
+          button
+        </Button>
+      </InnerWrapper>
+      <InnerWrapper>
+        <Button variant="filled" disabled>
+          button
+        </Button>
+        <Button variant="outline" disabled>
+          button
+        </Button>
+        <Button variant="subtle" disabled>
+          button
+        </Button>
+        <Button variant="ghost" disabled>
+          button
+        </Button>
       </InnerWrapper>
     </OuterWrapper>
   );

apps/ui-site/tsconfig.base.json

@@ -1,26 +1,12 @@
 {
-  // tsconfig.base.json，用于被 tesconfig.json 和 tesconfig.build.json 继承
   "compilerOptions": {
-    // 输出模块语法，使用版本号最新的那个，而不是实验性语法 ESNext
     "module": "es2022",
-
-    // 模块解析策略，模拟 Vite / Rollup / webpack，支持 exports / imports，不强制 Node ESM 的严格规则
     "moduleResolution": "bundler",
-
-    // 显式声明使用的类型包
-    "types": ["node", "react", "react-dom"],
-
-    // 允许 ESM 导入 CJS
+    "lib": ["ES2025", "DOM", "DOM.Iterable"],
+    "strict": true,
     "esModuleInterop": true,
-
-    // 跳过 node_modules 类型检查，加快构建，避免第三方类型污染
     "skipLibCheck": true,
-
-    /**
-     * 只做类型检查，不生成 JS 输出
-     * - 适用于 Vite / Next / Nuxt 等 bundler 场景
-     * - 防止 tsc 与构建工具重复 emit
-     */
-    "noEmit": true
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
   }
 }

apps/ui-site/tsconfig.build.json

@@ -1,67 +1,12 @@
 {
-  // 此文件仅用于类型检查，不用于类型检查，构建时会指定使用 tsconfig.build.json
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    // Browser api，需要加 "DOM"，"DOM.Iterable"
-    // Node api，需要加 "ES2025"，始终使用带版本号的最新版本
-    // NextJs api，属于同构，server 端会预处理 DOM，计算url，三个都需要 "ES2025", "DOM", "DOM.Iterable"
-    "lib": ["ES2025", "DOM", "DOM.Iterable"],
-
-    /**
-     * 显式声明使用的类型包
-     * - node：Node.js API
-     * - react：JSX / React 类型
-     * - vite/client：import.meta / env
-     */
-    "types": ["node", "react", "react-dom"],
-
-    /**
-     * React JSX 编译模式
-     * - 使用 React 17+ 新 JSX Transform
-     * - 不需要手动 import React
-     */
-    "jsx": "react-jsx",
-
-    /**
-     * 编译输出目录
-     * - tsc / tsc -b 都会用到
-     */
     "outDir": "./dist",
-
-    /**
-     * 源码根目录
-     * - 确保 dist 结构与 src 一致
-     * - 对 declaration 路径至关重要
-     */
     "rootDir": "./src",
-
-    /**
-     * 生成 .d.ts 类型声明文件
-     * - 组件库 / npm 包发布必需
-     * - 对应用项目无害，仅影响类型输出
-     */
-    "declaration": true,
-
-    /**
-     * 强制单文件可独立编译
-     * - 适配 esbuild / SWC / bundler 编译模型
-     * - 禁止依赖跨文件类型推断（enum / namespace 等）
-     */
-    "isolatedModules": true
+    "jsx": "react-jsx",
+    "declaration": true
   },
-  /**
-   * 参与类型检查和编译的文件
-   * - 只扫描 src
-   * - 其它目录通过 exclude 排除
-   */
   "include": ["src"],
-
-  /**
-   * 明确排除非源码内容
-   * - 避免污染类型系统
-   * - 防止误入 dist / test / config
-   * - 保证发布包干净
-   */
   "exclude": [
     "node_modules",
     "dist",

apps/ui-site/tsconfig.json

@@ -1,17 +1,8 @@
 {
-  // 此文件仅用于类型检查，不用于构建，构建时会指定使用 tsconfig.build.json
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    // node api 使用最新版本号的 "ESxxxx"，browser api 使用 "DOM" 和 "DOM.Iterable"
-    "lib": ["ES2025", "DOM", "DOM.Iterable"],
-
-    //显式声明使用的类型包，避免找不到模块
-    "types": ["node", "react", "react-dom"],
-
-    // React JSX 编译模式
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "noEmit": true
   },
-  // 将类型检查范围扩大至整个子项目，而不只是 src 文件夹,
-  "include": ["**/*"]
-
+  "include": ["."]
 }

apps/ui-site/vite.config.ts

@@ -1,16 +1,31 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-import dts from "vite-plugin-dts"
-import { genIndexTsPlugin } from "./scripts-plugin/vite-plugin-gen-index-ts"
-import { genIndexCssPlugin } from "./scripts-plugin/vite-plugin-gen-index-css"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import typescript from "@rollup/plugin-typescript";
 
 export default defineConfig({
   plugins: [
-    genIndexTsPlugin(),
-    genIndexCssPlugin(),
     react(),
     dts({
       insertTypesEntry: true,
     }),
   ],
-})
+
+  esbuild: false,
+
+  build: {
+    rollupOptions: {
+      plugins: [typescript({ tsconfig: "./tsconfig.build.json" })],
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+
+    sourcemap: true,
+    cssCodeSplit: true,
+  },
+});