folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mm

Browse Source
This commit is contained in:
folinhilo
2026-05-13 02:49:13 +08:00
parent 33951a649b
commit 92e4fd11f1
18 changed files with 697 additions and 1717 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.vscode/settings.json vendored
View File

@@ -1,2 +1,8 @@
{ {
} "files.associations": {
"packages/ui-web/**/*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": "on"
}
}

33
packages/ui-web-headless/common/Slot.tsx
View File

@@ -1,33 +0,0 @@
import { mergeProps } from "@base-ui/react";
import * as React from "react";
import { cn } from "tailwind-variants";
export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
children: React.ReactNode;
}
export const Slot = React.forwardRef<HTMLElement, SlotProps>(
({ children, className: externalClassName, ...restProps }, ref) => {
if (!React.isValidElement(children)) {
return null;
}
const child = children as React.ReactElement<Record<string, unknown>>;
const childProps = child.props || {};
const mergedClassName = cn(
childProps.className as string | undefined,
externalClassName,
);
const otherMergedProps = mergeProps(childProps, restProps);
return React.cloneElement(child, {
...otherMergedProps,
className: mergedClassName,
ref,
});
},
);
Slot.displayName = "Slot";

18
packages/ui-web-headless/componnets/button/Button.tsx
View File

@@ -1,18 +0,0 @@
import { ComponentPropsWithRef, forwardRef, ReactNode } from "react";
export type ButtonState = {
loading?: boolean;
disabled?: boolean;
};
export type ButtonProps = {
size?: "xs" | "sm" | "md" | "lg";
shape?: "circle" | "rounded" | "square";
iconSvg?: ReactNode;
iconOnly?: boolean;
hideIcon?: boolean;
loadingIconSvg?: ReactNode;
} & ButtonState &
ComponentPropsWithRef<"button">;
export const Button = forwardRef();

9
packages/ui-web-headless/componnets/button/ButtonIcon.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ComponentPropsWithRef } from "react";
type ButtonIconProps = ComponentPropsWithRef<"span">;
export const ButtonIcon = (props: ButtonIconProps) => {
const { children, ...rest } = props;
return <span {...rest}>{children}</span>;
};
ButtonIcon.displayName = "ButtonIcon";

9
packages/ui-web-headless/componnets/button/ButtonLoading.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ComponentPropsWithRef } from "react";
type ButtonLoadingProps = ComponentPropsWithRef<"span">;
export const ButtonLoading = (props: ButtonLoadingProps) => {
const { children, ...rest } = props;
return <span {...rest}>{children}</span>;
};
ButtonLoading.displayName = "ButtonLoading";

38
packages/ui-web-headless/componnets/button/ButtonRoot.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { ComponentPropsWithoutRef, forwardRef } from "react";
import { useButtonSlot } from "./useButtonSlots";
export type ButtonRootOwnProps = {
iconOnly?: boolean;
hideIcon?: boolean;
};
export type ButtonRootStateProps = {
loading?: boolean;
disabled?: boolean;
};
export type ButtonRootPrimitiveProps = Omit<
ComponentPropsWithoutRef<"button">,
keyof ButtonRootStateProps
>;
export type ButtonRootProps = ButtonRootOwnProps &
ButtonRootStateProps &
ButtonRootPrimitiveProps;
export const ButtonRoot = forwardRef<HTMLButtonElement, ButtonRootProps>(
(props, ref) => {
const { children, loading, iconOnly, hideIcon, ...rest } = props;
const { iconNode, loadingNode } = useButtonSlot(children);
return (
<button ref={ref} {...rest}>
{loadingNode ?? loadingNode}
{!loadingNode && iconNode ? (hideIcon ? null : iconNode) : null}
{children}
</button>
);
},
);
ButtonRoot.displayName = "ButtonRoot";
// 我需要一个通用hook方法 useProps<ownProps,stateProps,primitiveProps>(props)，返一个对象 { ownProps，stateProps,primitiveProps}

9
packages/ui-web-headless/componnets/button/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { ButtonIcon } from "./ButtonIcon";
import { ButtonLoading } from "./ButtonLoading";
import { ButtonRoot } from "./ButtonRoot";
export namespace Button {
export const Root = ButtonRoot;
export const Icon = ButtonIcon;
export const Loading = ButtonLoading;
}

29
packages/ui-web-headless/componnets/button/useButtonSlots.ts Normal file
View File

@@ -0,0 +1,29 @@
import React, { ReactNode, isValidElement, Children } from "react";
import { ButtonIcon } from "./ButtonIcon";
import { ButtonLoading } from "./ButtonLoading";
export function useButtonSlot(children: ReactNode) {
const iconNodes: React.ReactElement[] = [];
const loadingNodes: React.ReactElement[] = [];
const collectNodes = (nodes: ReactNode) => {
Children.forEach(nodes, (child) => {
if (!isValidElement(child)) return;
if (child.type === ButtonIcon) {
iconNodes.push(child);
} else if (child.type === ButtonLoading) {
loadingNodes.push(child);
} else if ((child as any).props.children) {
collectNodes((child as any).props.children);
}
});
};
collectNodes(children);
return {
iconNode: iconNodes.at(-1),
loadingNode: loadingNodes.at(-1),
};
}

5
packages/ui-web-headless/utils/useProps.ts Normal file
View File

@@ -0,0 +1,5 @@
export function useProps<S, P>(props: Record<string, any>) {
const stateProps = {};
const primitiveProps = {};
return;
}

14
packages/ui-web-tw/.vscode/settings.json vendored
View File

@@ -1,14 +0,0 @@
{
"json.schemas": [
{
"fileMatch": ["/tsconfig.build.json", "/tsconfig.base.json"],
"schema": {}
}
],
"files.associations": {
"*.css": "tailwindcss"
},
"extensions.disabledExtensions": ["vunguyentuan.vscode-css-variables"]
}

25
packages/ui-web-tw/package.json
View File

@@ -22,30 +22,27 @@
"dist" "dist"
], ],
"scripts": { "scripts": {
"gen-css": "ts-node scripts/gen-index-css.ts", "gen-index": "ts-node scripts/gen-index.ts",
"gen-ts": "ts-node scripts/gen-index-ts.ts", "gen-dts": "tsc -p tsconfig.build.json",
"gen-index": "pnpm run gen-css && pnpm run gen-ts", "dev": "pnpm gen-index && vite build --watch",
"dev": "pnpm run gen-index && vite build --watch", "build": "pnpm gen-index && vite build && pnpm gen-dts"
"build": "pnpm run gen-index && tsc -p tsconfig.build.json && vite build"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-typescript": "^12.3.0", "@tailwindcss/vite": "^4.3.0",
"@tailwindcss/vite": "^4.2.4", "@types/node": "^25.6.2",
"@types/node": "^25.6.0",
"@types/react": "^19.2.14", "@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "~5.2.0", "@vitejs/plugin-react": "^6.0.1",
"tinyglobby": "^0.2.16", "tinyglobby": "^0.2.16",
"ts-node": "^10.9.2", "ts-node": "^10.9.2",
"typescript": "~6.0.3", "typescript": "^6.0.3",
"vite": "~7.3.2", "vite": "^8.0.12"
"vite-plugin-dts": "^5.0.0"
}, },
"dependencies": { "dependencies": {
"@base-ui/react": "^1.4.1", "@base-ui/react": "^1.4.1",
"tailwind-merge": "^3.5.0", "tailwind-merge": "^3.6.0",
"tailwind-variants": "^3.2.2", "tailwind-variants": "^3.2.2",
"tailwindcss": "^4.2.4" "tailwindcss": "^4.3.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^19", "react": "^19",

121
packages/ui-web-tw/scripts/gen-index-css.ts
View File

@@ -1,121 +0,0 @@
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);
}

121
packages/ui-web-tw/scripts/gen-index-ts.ts
View File

@@ -1,121 +0,0 @@
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);
}

147
packages/ui-web-tw/scripts/gen-index.ts Normal file
View File

@@ -0,0 +1,147 @@
import fs from "fs";
import path from "path";
// 1. 引入 tinyglobby
import { globSync } from "tinyglobby";
interface Config {
outputDir: string;
outputFilenameWithExt: string;
scanDirs: string[];
importPrefix: string;
predefineStatements: string[];
includeExtensions: string[];
excludeDirs: string[];
excludeFileExtensions: string[];
excludePatterns: RegExp[];
}
const cssConfig: Config = {
outputDir: "src",
outputFilenameWithExt: "index.css",
scanDirs: ["src"],
importPrefix: "@import",
predefineStatements: ['@import "tailwindcss";'],
includeExtensions: [".css"],
excludeDirs: ["__tests__", "tests", "story", "stories", "types"],
excludeFileExtensions: [],
excludePatterns: [/^index\.(css)$/, /\.(test|spec)\./, /\.(story|stories)\./],
};
const tsConfig: Config = {
outputDir: "src",
outputFilenameWithExt: "index.ts",
scanDirs: ["src"],
importPrefix: "export * from",
predefineStatements: ["import './index.css'"],
includeExtensions: [".ts", "tsx", "js", "jsx"],
excludeDirs: ["__tests__", "tests", "story", "stories", "types"],
excludeFileExtensions: [".d.ts"],
excludePatterns: [
/^index\.(ts|tsx|js|jsx)$/,
/\.(test|spec)\./,
/\.(story|stories)\./,
],
};
const normalizePath = (p: string) => p.replace(/\\/g, "/");
const isExcludeDir = (filePath: string, excludeDirs: string[]) => {
const normalized = normalizePath(filePath);
return excludeDirs.some((dir) => normalized.includes(`/${dir}/`));
};
const isExcludeFileExtensions = (
filePath: string,
excludeFileExtensions: string[],
) => excludeFileExtensions.some((ext) => filePath.endsWith(ext));
const isExcludePattern = (fileName: string, excludePatterns: RegExp[]) =>
excludePatterns.some((pattern) => pattern.test(fileName));
// ----------------------------------------
function isValidFile(filePath: string, config: Config): boolean {
const fileName = filePath.split(/[\\/]/).pop()!;
if (isExcludeDir(filePath, config.excludeDirs)) return false;
if (isExcludeFileExtensions(filePath, config.excludeFileExtensions))
return false;
if (isExcludePattern(fileName, config.excludePatterns)) return false;
const ext = path.extname(filePath);
return config.includeExtensions.includes(ext);
}
// -----------------------------------------
function generateIndexFile(config: Config) {
const currentPath = process.cwd();
const outputPath = path.resolve(currentPath, config.outputDir);
let exportStatements: string[] = [];
// ------ scanDirs forEach start ------------------------
config.scanDirs.forEach((dir) => {
// 2. 路径模式保持不变，tinyglobby 能够正确处理
const scanPattern = path.resolve(currentPath, dir, "**", "*.*");
const allFilePath = globSync(scanPattern, {
absolute: true,
// 3. 移除了 windowsPathsNoEscape，tinyglobby 默认处理路径更智能
});
const validFiles = allFilePath.filter((filePath) => {
return isValidFile(filePath, config);
});
if (validFiles.length === 0) {
console.log(
`⚠️ 未找到符合条件的文件，跳过生成 ${config.outputFilenameWithExt}`,
);
return;
}
validFiles.sort();
validFiles.forEach((file) => {
const relativePath = path.relative(outputPath, file);
const importPath = `./${relativePath.replace(/\\/g, "/")}`;
exportStatements.push(`${config.importPrefix} '${importPath}';`);
});
});
// --------- scanDirs forEach end ----------------
const indexFileContent = `
${config.predefineStatements.join("\n")}
${exportStatements.join("\n")}
`.trim();
const indexFilePath = path.resolve(
currentPath,
config.outputDir,
config.outputFilenameWithExt,
);
// ✅ 内容比对，避免重复写入
if (fs.existsSync(indexFilePath)) {
const old = fs.readFileSync(indexFilePath, "utf8");
if (old === indexFileContent) {
console.log(
`✅ ${config.outputFilenameWithExt} 内容无变化，无需重新生成`,
);
return;
}
}
fs.writeFileSync(indexFilePath, indexFileContent, "utf8");
console.log(`✅ 成功生成 ${config.outputFilenameWithExt}: ${indexFilePath}`);
}
// --------------------------------------------------
try {
console.log(`🚀 [gen-index] 开始扫描`);
generateIndexFile(cssConfig);
generateIndexFile(tsConfig);
} catch (err) {
const msg = err instanceof Error ? err.message : String(err);
console.error(`❌ [gen-index] 执行失败: ${msg}`);
process.exit(1);
}

5
packages/ui-web-tw/tsconfig.build.json
View File

@@ -4,8 +4,9 @@
"noEmit": false, "noEmit": false,
"emitDeclarationOnly": true, "emitDeclarationOnly": true,
"declaration": true, "declaration": true,
"outDir": "dist", "declarationDir": "./dist",
"declarationDir": "dist/types" "rootDir": "./src",
"outDir": "./dist"
}, },
"include": ["src"], "include": ["src"],
"exclude": [ "exclude": [

2
packages/ui-web-tw/tsconfig.json
View File

@@ -22,5 +22,5 @@
"erasableSyntaxOnly": true, "erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true "noFallthroughCasesInSwitch": true
}, },
"include": ["."] "include": ["src", "scripts", "vite.config.ts"]
} }

39
packages/ui-web-tw/vite.config.ts
View File

@@ -1,29 +1,40 @@
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import react from "@vitejs/plugin-react"; import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import path from "path"; import path from "path";
import tailwindcss from "@tailwindcss/vite"; import tailwindcss from "@tailwindcss/vite";
export default defineConfig({ export default defineConfig({
plugins: [ // d.ts 由 tsc 完成，使用专门配置 tsconfig.build.json
react(), // 转换由 oxc 完成
tailwindcss(), // 打包由 rolldown 完成
dts({ plugins: [react(), tailwindcss()],
insertTypesEntry: true,
}),
],
esbuild: false,
build: { build: {
cssMinify: false,
lib: { lib: {
entry: path.resolve(__dirname, "src/index.ts"), entry: path.resolve(import.meta.dirname, "src/index.ts"),
name: "DefgovUIWebTw", // 不写 vite 默认是 index.mjs 和 index.js，不方便识别
formats: ["es", "cjs"], formats: ["es", "cjs"],
// package.json 管别人怎么使用，
// build.lib 管怎么打包，生成什么
// 如果不一致，就会报错，指向文件不存在
fileName: (format) => `index.${format}.js`, fileName: (format) => `index.${format}.js`,
}, },
rolldownOptions: {
// 避免这些被打包，peerDependencies 对 rolldown 是无效的，不会自动 external
external: ["react", "react-dom", "react/jsx-runtime"],
// 专门给 UMD / IIFE​ 的映射表
output: {
globals: {
react: "React",
"react-dom": "ReactDOM",
},
},
},
sourcemap: true, emptyOutDir: true, // 防止旧产物残留
cssCodeSplit: true, sourcemap: true, // 方便调试
cssCodeSplit: false, // 合并成一个css文件
outDir: "dist", // 专管打包输出目录，tsconfig.build.json 中的 outDir 管的是 d.ts 输出目录
}, },
}); });

1782
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff