mm

2026-05-06 02:59:19 +08:00
parent 015c4fb91e
commit da0a6d0f81
60 changed files with 2406 additions and 323 deletions
--- a/packages/ui-web/package.json
+++ b/packages/ui-web/package.json
@@ -12,9 +12,9 @@
  "style": "./dist/index.css",
  "exports": {
    ".": {
+      "types": "./dist/index.d.ts",
      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs.js"
    },
    "./index.css": "./dist/index.css"
  },
@@ -22,19 +22,22 @@
    "dist"
  ],
  "scripts": {
-    "dev": "vite",
-    "build": "vite build --tsconfig tsconfig.build.json"
+    "gen-css": "ts-node scripts/gen-index-css.ts",
+    "gen-ts": "ts-node scripts/gen-index-ts.ts",
+    "gen-index": "pnpm run gen-css && pnpm run gen-ts",
+    "dev": "pnpm run gen-index && vite build --watch",
+    "build": "pnpm run gen-index && tsc -p tsconfig.build.json && vite build"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.2.4",
    "@types/node": "^25.6.0",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "~5.2.0",
    "glob": "^13.0.6",
    "ts-node": "^10.9.2",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.9",
+    "typescript": "~6.0.3",
+    "vite": "~7.3.2",
    "vite-plugin-dts": "^4.5.4"
  },
  "dependencies": {
--- a/packages/ui-web/scripts-plugin/vite-plugin-gen-index-css.ts
+++ b/packages/ui-web/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 [];
-      }
-    },
-  };
-}
--- a/packages/ui-web/scripts-plugin/vite-plugin-gen-index-ts.ts
+++ b/packages/ui-web/scripts-plugin/vite-plugin-gen-index-ts.ts
@@ -1,5 +1,3 @@
-// plugins/vite-plugin-gen-index-ts.ts
-import type { Plugin } from "vite";
 import fs from "fs";
 import path from "path";
 import { globSync } from "glob";
@@ -68,7 +66,10 @@ function generateIndexFile(dirPath: string) {
  });

  const validFiles = allFiles.filter(isValidFile);
-  if (validFiles.length === 0) return;
+  if (validFiles.length === 0) {
+    console.log("⚠️ 未找到符合条件的文件，跳过生成 index.ts");
+    return;
+  }

  validFiles.sort();

@@ -88,42 +89,33 @@ ${exportStatements.join("\n")}

  const indexFilePath = path.resolve(dirPath, "index.ts");

-  // ✅ 内容比对，避免无限 rebuild
+  // ✅ 内容比对，避免重复写入
  if (fs.existsSync(indexFilePath)) {
    const old = fs.readFileSync(indexFilePath, "utf8");
-    if (old === indexContent) return;
+    if (old === indexContent) {
+      console.log("✅ index.ts 内容无变化，无需重新生成");
+      return;
+    }
  }

  fs.writeFileSync(indexFilePath, indexContent, "utf8");
+  console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
 }

-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 [];
-      }
-    },
-  };
+// 脚本入口
+const [targetDir] = CONFIG.targetDirs;
+if (!targetDir) {
+  console.error("❌ CONFIG.targetDirs 不能为空");
+  process.exit(1);
+}
+
+const absTargetDir = path.resolve(process.cwd(), targetDir);
+
+try {
+  console.log(`🚀 开始扫描目录: ${absTargetDir}`);
+  generateIndexFile(absTargetDir);
+} catch (err) {
+  const msg = err instanceof Error ? err.message : String(err);
+  console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
+  process.exit(1);
 }
--- a/packages/ui-web/scripts/gen-index-ts.ts
+++ b/packages/ui-web/scripts/gen-index-ts.ts
@@ -0,0 +1,121 @@
+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) {
+    console.log("⚠️ 未找到符合条件的文件，跳过生成 index.ts");
+    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");
+
+  // ✅ 内容比对，避免重复写入
+  if (fs.existsSync(indexFilePath)) {
+    const old = fs.readFileSync(indexFilePath, "utf8");
+    if (old === indexContent) {
+      console.log("✅ index.ts 内容无变化，无需重新生成");
+      return;
+    }
+  }
+
+  fs.writeFileSync(indexFilePath, indexContent, "utf8");
+  console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
+}
+
+// 脚本入口
+const [targetDir] = CONFIG.targetDirs;
+if (!targetDir) {
+  console.error("❌ CONFIG.targetDirs 不能为空");
+  process.exit(1);
+}
+
+const absTargetDir = path.resolve(process.cwd(), targetDir);
+
+try {
+  console.log(`🚀 开始扫描目录: ${absTargetDir}`);
+  generateIndexFile(absTargetDir);
+} catch (err) {
+  const msg = err instanceof Error ? err.message : String(err);
+  console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
+  process.exit(1);
+}
--- a/packages/ui-web/src/common/Box.tsx
+++ b/packages/ui-web/src/common/Box.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { cn } from "tailwind-variants";
-import { CommonProps } from "./CommonProps";
+import { type CommonProps } from "./CommonProps";

 // 别名<约束>=值
 // 千万不要 C = As extend React.ElementType，这样子连等号，会切断推导
@@ -22,8 +22,7 @@ const Box = <C extends React.ElementType = "div">(
 ) => {
  const { as: Component = "div", children, className, ...rest } = props;

-
-  const boxRootClass = cn( className);
+  const boxRootClass = cn(className);

  return (
    <Component ref={ref} className={boxRootClass} {...(rest as any)}>
--- a/packages/ui-web/src/common/CommonProps.ts
+++ b/packages/ui-web/src/common/CommonProps.ts
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from "react";
+import { type CSSProperties, type ReactNode } from "react";

 export type CommonProps = {
  className?: string;
--- a/packages/ui-web/src/component/button/Button.tsx
+++ b/packages/ui-web/src/component/button/Button.tsx
@@ -48,10 +48,10 @@ export const Button = (props: ButtonProps) => {
      {iconSvg ? (
        hideIcon ? (
          iconOnly ? (
-            <Icon />
+            <Icon size={size} />
          ) : null
        ) : (
-          <Icon svg={iconSvg} />
+          <Icon size={size} svg={iconSvg} />
        )
      ) : null}
      {!iconOnly && children}
--- a/packages/ui-web/src/index.ts
+++ b/packages/ui-web/src/index.ts
@@ -1,6 +1,4 @@
-
-
-import './index.css'; 
+import './index.css';

 export * from './assets/svg/BoldSvg';
 export * from './assets/svg/CheckIndicatorSvg';
@@ -42,4 +40,4 @@ export * from './component/username-field/UsernameField';
 export * from './styles/recipe/IinlineSize.recipe';
 export * from './styles/recipe/ItemSize.recipe';
 export * from './styles/recipe/brand.recipe';
-export * from './styles/recipe/variant.recipe';
+export * from './styles/recipe/variant.recipe';
--- a/packages/ui-web/tsconfig.base.json
+++ b/packages/ui-web/tsconfig.base.json
@@ -17,24 +17,6 @@
    "esModuleInterop": true,

    // 跳过 node_modules 类型检查，加快构建，避免第三方类型污染
-    "skipLibCheck": true,
-
-    // 模块检测策略，不会影响 node_modules 中的第三方 CommonJS 依赖，Vite 会在预构建阶段自动将其转换为 ESM。
-    "moduleDetection": "force",
-
-    // 保留源码中的 import / export 语句原样输出，不进行自动转换（如 import → require），通常与 moduleDetection: "force" 搭配使用
-    "verbatimModuleSyntax": true,
-
-    // 是否检查“未使用的局部变量”
-    "noUnusedLocals": true,
-
-    // 是否检查“未使用的函数参数”
-    "noUnusedParameters": true,
-
-    // 是否只允许“可擦除的语法（Erasable Syntax），确保 TypeScript 语法在编译后可完全移除
-    "erasableSyntaxOnly": true,
-
-    // 是否禁止 switch 语句中的 case 贯穿（fallthrough），如果 case 没有 break / return，会报错
-    "noFallthroughCasesInSwitch": true
+    "skipLibCheck": true
  }
 }
--- a/packages/ui-web/tsconfig.build.json
+++ b/packages/ui-web/tsconfig.build.json
@@ -42,33 +42,19 @@
     */
    "declaration": true,

-    /**
-     * 只做类型检查，不生成 JS 输出
-     * - 适用于 Vite / Next / Nuxt 等 bundler 场景
-     * - 防止 tsc 与构建工具重复 emit
-     */
-    "noEmit": true,
-
    /**
     * 强制单文件可独立编译
     * - 适配 esbuild / SWC / bundler 编译模型
     * - 禁止依赖跨文件类型推断（enum / namespace 等）
     */
-    "isolatedModules": true,
-
-    /**
-     * 允许在 import 中显式使用 .ts / .tsx 后缀
-     * - 兼容 Node ESM / bundler 对文件扩展名的严格要求
-     * - 避免 `import './foo'` 在 TS + ESM 下歧义
-     */
-    "allowImportingTsExtensions": true
+    "isolatedModules": true
  },
  /**
   * 参与类型检查和编译的文件
   * - 只扫描 src
   * - 其它目录通过 exclude 排除
   */
-  "include": ["src", "scripts"],
+  "include": ["src"],

  /**
   * 明确排除非源码内容
--- a/packages/ui-web/tsconfig.json
+++ b/packages/ui-web/tsconfig.json
@@ -9,7 +9,14 @@
    "types": ["node", "react", "vite/client"],

    // React JSX 编译模式
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+
+    /**
+     * 只做类型检查，不生成 JS 输出
+     * - 适用于 Vite / Next / Nuxt 等 bundler 场景
+     * - 防止 tsc 与构建工具重复 emit
+     */
+    "noEmit": true
  },
  // 将类型检查范围扩大至整个子项目，而不只是 src 文件夹,
  "include": ["**/*"]
--- a/packages/ui-web/vite.config.ts
+++ b/packages/ui-web/vite.config.ts
@@ -3,13 +3,9 @@ import react from "@vitejs/plugin-react";
 import dts from "vite-plugin-dts";
 import path from "path";
 import tailwindcss from "@tailwindcss/vite";
-import { genIndexTsPlugin } from "./scripts-plugin/vite-plugin-gen-index-ts";
-import { genIndexCssPlugin } from "./scripts-plugin/vite-plugin-gen-index-css";

 export default defineConfig({
  plugins: [
-    genIndexTsPlugin(),
-    genIndexCssPlugin(),
    react(),
    tailwindcss(),
    dts({