mm

2026-06-08 04:19:23 +08:00
parent 8351498071
commit f2d8ad0de2
152 changed files with 2362 additions and 2227 deletions
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@dg/ui-react",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "module": "./dist/index.es.js",
+  "main": "./dist/index.cjs.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "gen-index": "ts-node scripts/gen-index.ts",
+    "gen-dts": "tsc -p tsconfig.build.json",
+    "build": "pnpm gen-index && vite build && pnpm gen-dts"
+  },
+  "dependencies": {
+    "@dg/css": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "tinyglobby": "^0.2.16",
+    "ts-node": "^10.9.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}
--- a/packages/ui-react/scripts/gen-index.ts
+++ b/packages/ui-react/scripts/gen-index.ts
@@ -0,0 +1,254 @@
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * 默认测试 / story / example / fixture / type 文件匹配规则
+ * 仅用于“识别”，不直接决定是否排除
+ */
+const DEFAULT_TEST_FILE_PATTERNS: RegExp[] = [
+  // =========================
+  // Test / Spec
+  // =========================
+  /\.(test|spec)\.(ts|tsx|js|jsx)$/,
+  /\.(test|spec)\.(ts|tsx|js|jsx)\?.*$/, // query param safe
+
+  // =========================
+  // E2E / Playwright / Cypress
+  // =========================
+  /\.(cy|playwright|e2e)\.(ts|tsx|js|jsx)$/,
+
+  // =========================
+  // Storybook
+  // =========================
+  /\.(story|stories)\.(ts|tsx|js|jsx|mdx)$/,
+
+  // =========================
+  // Snapshot / Mock / Fixture
+  // =========================
+  /\.snap$/,
+  /\.mock\.(ts|tsx|js|jsx)$/,
+  /\.fixture\.(ts|tsx|js|jsx)$/,
+
+  // =========================
+  // Type declarations
+  // =========================
+  /\.d\.ts$/,
+
+  // =========================
+  // Examples / Demos / Docs
+  // =========================
+  /\.(example|demo|docs)\.(ts|tsx|js|jsx)$/,
+];
+
+/**
+ * 测试 / 辅助目录（目录级排除）
+ */
+const DEFAULT_TEST_DIR_PATTERNS: RegExp[] = [
+  /[/\\](__tests__|tests|test|spec|__mocks__|__fixtures__|__snapshots__)[\/\\]/,
+  /[/\\](cypress|playwright|e2e|__e2e__|__playwright__)[\/\\]/,
+  /[/\\](story|stories|\.storybook)[\/\\]/,
+  /[/\\](types|type|typings|interfaces)[\/\\]/,
+  /[/\\](examples|example|demo|demos|docs)[\/\\]/,
+];
+
+type Config = {
+  outputDir: string;
+  outputFile: string;
+  scanDirs: string[];
+  preamble?: string[];
+  importPrefix?: string;
+  entryFilePatterns?: RegExp[];
+  barrelFirstMode?: boolean;
+  includeFilePatterns?: RegExp[];
+  excludeFilePatterns?: RegExp[];
+  excludeDirPatterns?: RegExp[];
+};
+
+const tsConfig: Config = {
+  outputDir: "src",
+  outputFile: "index.ts",
+  scanDirs: ["src"],
+  importPrefix: "export * from",
+  barrelFirstMode: true,
+  preamble: ["import './index.css';"],
+  entryFilePatterns: [/^index\.(js|ts|jsx|tsx)$/],
+  includeFilePatterns: [/\.(js|ts|jsx|tsx)$/],
+  excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
+  excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
+};
+
+const cssConfig: Config = {
+  outputDir: "src",
+  outputFile: "index.css",
+  scanDirs: ["src"],
+  importPrefix: "@import",
+  barrelFirstMode: false,
+  entryFilePatterns: [/^index\.(css)$/],
+  includeFilePatterns: [/\.(css)$/],
+  excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
+  excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
+};
+
+function isEntryFile(fileName: string, config: Config): boolean {
+  const regExps = config.entryFilePatterns;
+
+  if (!regExps || regExps.length === 0) return false;
+
+  return regExps.some((regExp) => regExp.test(fileName));
+}
+
+function isIncludeFile(fileName: string, config: Config): boolean {
+  const regExps = config.includeFilePatterns;
+
+  if (!regExps || regExps.length === 0) return false;
+
+  return regExps.some((regExp) => regExp.test(fileName));
+}
+
+function isExcludeFile(fileName: string, config: Config): boolean {
+  const regExps = config.excludeFilePatterns;
+
+  if (!regExps || regExps.length === 0) return false;
+
+  return regExps.some((regExp) => regExp.test(fileName));
+}
+
+function isExcludeDir(filePath: string, config: Config): boolean {
+  const regExps = config.excludeDirPatterns;
+
+  if (!regExps || regExps.length === 0) return false;
+
+  return regExps.some((regExp) => regExp.test(filePath));
+}
+
+function isValidDir(filePath: string, config: Config): boolean {
+  if (isExcludeDir(filePath, config)) {
+    return false;
+  }
+  return true;
+}
+
+function isValidFile(fileName: string, config: Config): boolean {
+  if (isIncludeFile(fileName, config) && !isExcludeFile(fileName, config)) {
+    return true;
+  }
+
+  return false;
+}
+
+const buildExportStatement = (filePath: string, config: Config) => {
+  // 文件夹（不是文件）与目标文件的相对路径
+  let exportFilePath = path.relative(config.outputDir, filePath);
+
+  // 去除扩展名，并且转化成正斜杠
+  const exportFilePathWithoutExt = path
+    .join(
+      path.dirname(exportFilePath),
+      path.basename(exportFilePath, path.extname(exportFilePath)),
+    )
+    .replace(/\\/g, "/");
+
+  // 加上 ./ 前缀
+  return `${config.importPrefix} './${exportFilePathWithoutExt}';`;
+};
+
+function isOutputEntry(filePath: string, config: Config) {
+  const outputFilePath = path.resolve(config.outputDir, config.outputFile);
+  const targetFilePath = path.resolve(filePath);
+
+  return outputFilePath === targetFilePath;
+}
+
+function generateExports(dirPath: string, config: Config): string[] {
+  const fileNames = fs.readdirSync(dirPath);
+  const exports: string[] = [];
+
+  // =========================
+  // 逻辑分支：Barrel First Mode
+  // =========================
+  if (config.barrelFirstMode) {
+    // 查找当前目录有没有 index.ts
+    const entryFileName = fileNames.find((fileName) => {
+      const filePath = path.join(dirPath, fileName);
+      return fs.statSync(filePath).isFile() && isEntryFile(fileName, config);
+    });
+    // 如果有
+    if (entryFileName) {
+      const entryFilePath = path.join(dirPath, entryFileName);
+
+      // 如果是 outputFile 自身，则跳过
+      if (isOutputEntry(entryFilePath, config)) {
+        console.log(`⏭️  跳过自身入口文件: ${entryFilePath}`);
+      } else {
+        exports.push(buildExportStatement(entryFilePath, config));
+      }
+    }
+  }
+
+  // =========================
+  // 逻辑分支：index.ts 不存在，则继续正常遍历与递归
+  // =========================
+  fileNames.forEach((fileName) => {
+    const filePath = path.join(dirPath, fileName);
+    const stat = fs.statSync(filePath);
+
+    // 情况1：是文件，且通过了校验
+    if (
+      stat.isFile() &&
+      isValidFile(fileName, config) &&
+      !isEntryFile(fileName, config)
+    ) {
+      exports.push(buildExportStatement(filePath, config));
+    }
+    // 情况2：是文件夹，且通过了校验，递归扫描子文件夹
+    else if (stat.isDirectory() && isValidDir(filePath, config)) {
+      const subExports = generateExports(filePath, config);
+      exports.push(...subExports);
+    }
+  });
+
+  return exports;
+}
+
+function genIndexFile(config: Config) {
+  // 确保输出目录存在，如果不存在就递归创建
+  if (!fs.existsSync(config.outputDir)) {
+    fs.mkdirSync(config.outputDir, { recursive: true });
+  }
+
+  const allExports: string[] = [];
+
+  // 遍历所有需要扫描的根目录
+  config.scanDirs.forEach((scanDir) => {
+    // 只有当目录真实存在时才进行扫描
+    if (fs.existsSync(scanDir)) {
+      const exports = generateExports(scanDir, config);
+      allExports.push(...exports);
+    } else {
+      console.warn(`⚠️  警告：扫描目录不存在，已跳过 -> ${scanDir}`);
+    }
+  });
+
+  // 拼接最终的文件内容：前言 + 导出语句（使用 Set 自动去重）
+  const fileContent = [
+    ...(config.preamble ?? []),
+    ...Array.from(new Set(allExports)),
+  ].join("\n");
+
+  // 将内容写入到最终的 index.ts 文件中
+  const outputFilePath = path.join(config.outputDir, config.outputFile);
+  fs.writeFileSync(outputFilePath, fileContent, "utf-8");
+
+  console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
+}
+
+// ================= 脚本执行入口 =================
+try {
+  console.log("🚀 开始扫描并生成入口文件...");
+  genIndexFile(tsConfig);
+  genIndexFile(cssConfig);
+  console.log("✅ 脚本执行完毕！");
+} catch (error) {
+  console.error("❌ 脚本执行失败:", error);
+  process.exit(1); // 如果报错，让进程以非 0 状态码退出
+}
--- a/packages/ui-react/src/assets/svg/BoldSvg.tsx
+++ b/packages/ui-react/src/assets/svg/BoldSvg.tsx
@@ -0,0 +1,12 @@
+export const BoldSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/CheckIndicatorSvg.tsx
+++ b/packages/ui-react/src/assets/svg/CheckIndicatorSvg.tsx
@@ -0,0 +1,8 @@
+export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/ChevronRightSvg.tsx
+++ b/packages/ui-react/src/assets/svg/ChevronRightSvg.tsx
@@ -0,0 +1,12 @@
+export const ChevronRightSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m9 6l6 6l-6 6"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/CutSvg.tsx
+++ b/packages/ui-react/src/assets/svg/CutSvg.tsx
@@ -0,0 +1,8 @@
+export const CutSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M12.14 9.342L7.37 2.329a.75.75 0 1 0-1.24.844l5.13 7.545l-2.395 3.743a4 4 0 1 0 1.178.943l2.135-3.337l2.065 3.036a4 4 0 1 0 1.261-.813l-2.447-3.597l.002-.002zM4.5 18a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m10 0a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m-.562-8.684l3.943-6.162a.75.75 0 1 0-1.263-.808L13.02 7.968z"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/DownloadSvg.tsx
+++ b/packages/ui-react/src/assets/svg/DownloadSvg.tsx
@@ -0,0 +1,8 @@
+export const DownloadSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M20 16a1 1 0 0 1 1 1v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a1 1 0 0 1 2 0v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1M12 3a1 1 0 0 1 1 1v9.585l3.293-3.292a1 1 0 0 1 1.414 1.414l-5 5a1 1 0 0 1-.09.08l.09-.08a1 1 0 0 1-.674.292L12 17h-.032l-.054-.004L12 17a1 1 0 0 1-.617-.213a1 1 0 0 1-.09-.08l-5-5a1 1 0 0 1 1.414-1.414L11 13.585V4a1 1 0 0 1 1-1"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/FileSvg.tsx
+++ b/packages/ui-react/src/assets/svg/FileSvg.tsx
@@ -0,0 +1,14 @@
+export const FileSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+      <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2" />
+    </g>
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/KeySvg.tsx
+++ b/packages/ui-react/src/assets/svg/KeySvg.tsx
@@ -0,0 +1,8 @@
+export const KeySvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M7 14q-.825 0-1.412-.587T5 12t.588-1.412T7 10t1.413.588T9 12t-.587 1.413T7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.675 0 3.038.825T12.2 9h8.375q.2 0 .388.075t.337.225l2 2q.15.15.212.325t.063.375t-.063.375t-.212.325l-3.175 3.175q-.125.125-.3.2t-.35.1t-.35-.025t-.325-.175L17.5 15l-1.425 1.075q-.125.1-.275.15t-.3.05t-.313-.05t-.287-.15L13.375 15H12.2q-.8 1.35-2.163 2.175T7 18m0-2q1.4 0 2.463-.85T10.875 13H14l1.45 1.025v.013v-.013L17.5 12.5l1.775 1.375L21.15 12h-.012h.012l-1-1v-.012V11h-9.275q-.35-1.3-1.412-2.15T7 8Q5.35 8 4.175 9.175T3 12t1.175 2.825T7 16"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/MeshSvg.tsx
+++ b/packages/ui-react/src/assets/svg/MeshSvg.tsx
@@ -0,0 +1,14 @@
+export const MeshSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="M3 9h18M3 15h18M8 4c.485.445 3.5 3.312 3.5 8c0 .663-.07 4.848-3.5 8m7-16a17 17 0 0 1 2.004 8c0 1.51-.201 4.628-2.004 8" />
+      <path d="M18.778 20H5.222A2.22 2.22 0 0 1 3 17.778V6.222C3 4.995 3.995 4 5.222 4h13.556C20.005 4 21 4.995 21 6.222v11.556A2.22 2.22 0 0 1 18.778 20" />
+    </g>
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/MoonSvg.tsx
+++ b/packages/ui-react/src/assets/svg/MoonSvg.tsx
@@ -0,0 +1,12 @@
+export const MoonSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/PasteSvg.tsx
+++ b/packages/ui-react/src/assets/svg/PasteSvg.tsx
@@ -0,0 +1,8 @@
+export const PasteSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M12.753 2c1.158 0 2.111.875 2.234 2h1.763a2.25 2.25 0 0 1 2.245 2.096L19 6.25a.75.75 0 0 1-.647.742L18.249 7a.75.75 0 0 1-.742-.647L17.5 6.25a.75.75 0 0 0-.648-.743L16.75 5.5h-2.132a2.24 2.24 0 0 1-1.865.993H9.247a2.24 2.24 0 0 1-1.865-.992L5.25 5.5a.75.75 0 0 0-.743.648L4.5 6.25v13.505c0 .38.282.693.648.743l.102.007h3a.75.75 0 0 1 .743.647l.007.102a.75.75 0 0 1-.75.75h-3a2.25 2.25 0 0 1-2.245-2.095L3 19.755V6.25a2.25 2.25 0 0 1 2.096-2.245L5.25 4h1.763a2.247 2.247 0 0 1 2.234-2zm5.997 6a2.25 2.25 0 0 1 2.245 2.096l.005.154v9.5a2.25 2.25 0 0 1-2.096 2.245L18.75 22h-6.5a2.25 2.25 0 0 1-2.245-2.096L10 19.75v-9.5a2.25 2.25 0 0 1 2.096-2.245L12.25 8zm0 1.5h-6.5a.75.75 0 0 0-.743.648l-.007.102v9.5c0 .38.282.694.648.743l.102.007h6.5a.75.75 0 0 0 .743-.648l.007-.102v-9.5a.75.75 0 0 0-.648-.743zm-5.997-6H9.247a.747.747 0 0 0 0 1.493h3.506a.747.747 0 1 0 0-1.493"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/Ruler.tsx
+++ b/packages/ui-react/src/assets/svg/Ruler.tsx
@@ -0,0 +1,12 @@
+export const RulerSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 0-1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1M4 8h2m-2 4h3m-3 4h2M8 4v2m4-2v3m4-3v2"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/SearchSvg.tsx
+++ b/packages/ui-react/src/assets/svg/SearchSvg.tsx
@@ -0,0 +1,8 @@
+export const SearchSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/SettingSvg.tsx
+++ b/packages/ui-react/src/assets/svg/SettingSvg.tsx
@@ -0,0 +1,9 @@
+export const SettingSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M12.563 3.2h-1.126l-.645 2.578l-.647.2a6.3 6.3 0 0 0-1.091.452l-.599.317l-2.28-1.368l-.796.797l1.368 2.28l-.317.598a6.3 6.3 0 0 0-.453 1.091l-.199.647l-2.578.645v1.126l2.578.645l.2.647q.173.568.452 1.091l.317.599l-1.368 2.28l.797.796l2.28-1.368l.598.317q.523.278 1.091.453l.647.199l.645 2.578h1.126l.645-2.578l.647-.2a6.3 6.3 0 0 0 1.091-.452l.599-.317l2.28 1.368l.796-.797l-1.368-2.28l.317-.598q.278-.523.453-1.091l.199-.647l2.578-.645v-1.126l-2.578-.645l-.2-.647a6.3 6.3 0 0 0-.452-1.091l-.317-.599l1.368-2.28l-.797-.796l-2.28 1.368l-.598-.317a6.3 6.3 0 0 0-1.091-.453l-.647-.199zm2.945 2.17l1.833-1.1a1 1 0 0 1 1.221.15l1.018 1.018a1 1 0 0 1 .15 1.221l-1.1 1.833q.33.62.54 1.3l2.073.519a1 1 0 0 1 .757.97v1.438a1 1 0 0 1-.757.97l-2.073.519q-.21.68-.54 1.3l1.1 1.833a1 1 0 0 1-.15 1.221l-1.018 1.018a1 1 0 0 1-1.221.15l-1.833-1.1q-.62.33-1.3.54l-.519 2.073a1 1 0 0 1-.97.757h-1.438a1 1 0 0 1-.97-.757l-.519-2.073a7.5 7.5 0 0 1-1.3-.54l-1.833 1.1a1 1 0 0 1-1.221-.15L4.42 18.562a1 1 0 0 1-.15-1.221l1.1-1.833a7.5 7.5 0 0 1-.54-1.3l-2.073-.519A1 1 0 0 1 2 12.72v-1.438a1 1 0 0 1 .757-.97l2.073-.519q.21-.68.54-1.3L4.27 6.66a1 1 0 0 1 .15-1.221L5.438 4.42a1 1 0 0 1 1.221-.15l1.833 1.1q.62-.33 1.3-.54l.519-2.073A1 1 0 0 1 11.28 2h1.438a1 1 0 0 1 .97.757l.519 2.073q.68.21 1.3.54zM12 14.8a2.8 2.8 0 1 0 0-5.6a2.8 2.8 0 0 0 0 5.6m0 1.2a4 4 0 1 1 0-8a4 4 0 0 1 0 8"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/SpinnerSvg.tsx
+++ b/packages/ui-react/src/assets/svg/SpinnerSvg.tsx
@@ -0,0 +1,23 @@
+export const SpinnerSvg = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+        opacity="0.25"
+      />
+      <path
+        fill="currentColor"
+        d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="0.75s"
+          repeatCount="indefinite"
+          type="rotate"
+          values="0 12 12;360 12 12"
+        />
+      </path>
+    </svg>
+  );
+};
--- a/packages/ui-react/src/assets/svg/SunSvg.tsx
+++ b/packages/ui-react/src/assets/svg/SunSvg.tsx
@@ -0,0 +1,12 @@
+export const SunSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/UserSvg.tsx
+++ b/packages/ui-react/src/assets/svg/UserSvg.tsx
@@ -0,0 +1,14 @@
+export const UserSvg = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M19.618 21.25c0-3.602-4.016-6.53-7.618-6.53s-7.618 2.928-7.618 6.53M12 11.456a4.353 4.353 0 1 0 0-8.706a4.353 4.353 0 0 0 0 8.706"
+      />
+    </svg>
+  );
+};
--- a/packages/ui-react/src/assets/svg/VolumeHighSvg.tsx
+++ b/packages/ui-react/src/assets/svg/VolumeHighSvg.tsx
@@ -0,0 +1,12 @@
+export const VolumeHighSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/VolumeLowSvg.tsx
+++ b/packages/ui-react/src/assets/svg/VolumeLowSvg.tsx
@@ -0,0 +1,12 @@
+export const VolumeLowSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M15 8a5 5 0 0 1 0 8m-9-1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/assets/svg/VolumeMuteSvg.tsx
+++ b/packages/ui-react/src/assets/svg/VolumeMuteSvg.tsx
@@ -0,0 +1,12 @@
+export const VolumeMuteSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5zm10-5l4 4m0-4l-4 4"
+    />
+  </svg>
+);
--- a/packages/ui-react/src/componnets/button/ButtonIcon.tsx
+++ b/packages/ui-react/src/componnets/button/ButtonIcon.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { Slot } from "../../utils/Slot";
+import { useButtonContext } from "./common/ButtonContext";
+
+export const ButtonIcon = (props: any) => {
+  const { children, ...rest } = props;
+
+  const { slotRegistry } = useButtonContext();
+
+  useEffect(() => {
+    slotRegistry.setSlots?.((prev) => ({
+      ...prev,
+      icon: <Slot {...rest}>{children}</Slot>,
+    }));
+  }, [children, slotRegistry]);
+
+  return null;
+};
+ButtonIcon.displayName = "ButtonIcon";
--- a/packages/ui-react/src/componnets/button/ButtonLoading.tsx
+++ b/packages/ui-react/src/componnets/button/ButtonLoading.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import type { ReactNode } from "react";
+import { useButtonContext } from "./common/ButtonContext";
+import { Slot } from "../../utils/Slot";
+
+
+type ButtonLoadingProps = {
+  children: ReactNode;
+};
+
+export const ButtonLoading = (props: ButtonLoadingProps) => {
+  const { children, ...rest } = props;
+  const { slotRegistry } = useButtonContext();
+
+  useEffect(() => {
+    slotRegistry.setSlots?.(prev => ({
+      ...prev,
+      loading: <Slot {...rest}>{children}</Slot>,
+    }));
+  }, [children, slotRegistry]);
+
+  return null;
+};
+
+ButtonLoading.displayName = "ButtonLoading";
--- a/packages/ui-react/src/componnets/button/ButtonRoot.tsx
+++ b/packages/ui-react/src/componnets/button/ButtonRoot.tsx
@@ -0,0 +1,60 @@
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { ButtonContext, type ButtonSlot } from "./common/ButtonContext";
+import { useSlotRegistry } from "../../utils/useSlotRegistry";
+import { mergeProps } from "../../utils/mergeProps";
+import { useDefaultedProps } from "../../utils/useDefaultedProps";
+import { brandRecipe, cpm, itemSizeRecipe, variantRecipe } from "@dg/css";
+
+export type ButtonRootOwnProps = {
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "filled" | "outline" | "subtle" | "ghost";
+  shape?: "rounded" | "square" | "circle";
+  brand?: "success" | "danger" | "info" | "warning" | "emphasize";
+  iconOnly?: boolean;
+  hideIcon?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+export type ButtonRootPrimitiveProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  keyof ButtonRootOwnProps
+>;
+
+export type ButtonRootProps = ButtonRootOwnProps & ButtonRootPrimitiveProps;
+
+export const ButtonRoot = forwardRef<HTMLButtonElement, ButtonRootProps>(
+  (props, ref) => {
+    const defaultedProps = useDefaultedProps(props, {
+      size: "md",
+      variant: "filled",
+      shape: "rounded",
+      brand: "info",
+      iconOnly: false,
+      disabled: false,
+    });
+    const { size, variant, shape, brand, iconOnly, disabled, children } =
+      defaultedProps;
+
+    const clx = cpm(
+      itemSizeRecipe({ size, shape, iconOnly }),
+      variantRecipe({ variant, disabled }),
+      brandRecipe({ brand }),
+    );
+
+    const mergedProps = mergeProps({ className: clx }, defaultedProps);
+
+    const slotRegistry = useSlotRegistry<ButtonSlot>();
+
+    return (
+      <ButtonContext.Provider value={{ slotRegistry }}>
+        <button ref={ref} {...mergedProps}>
+          {slotRegistry.slots?.icon}
+          {children}
+          {slotRegistry.slots?.loading}
+        </button>
+      </ButtonContext.Provider>
+    );
+  },
+);
+ButtonRoot.displayName = "Button.Root";
--- a/packages/ui-react/src/componnets/button/common/ButtonContext.ts
+++ b/packages/ui-react/src/componnets/button/common/ButtonContext.ts
@@ -0,0 +1,26 @@
+// ButtonContext.ts
+import { createContext, useContext, type ReactNode } from "react";
+
+export type ButtonSlot = {
+  icon?: ReactNode;
+  loading?: ReactNode;
+};
+
+type ButtonContextValue = {
+  slotRegistry: {
+    slots?: ButtonSlot;
+    setSlots?: React.Dispatch<React.SetStateAction<ButtonSlot | undefined>>;
+  };
+};
+
+export const ButtonContext = createContext<ButtonContextValue | undefined>(
+  undefined,
+);
+
+export const useButtonContext = () => {
+  const ctx = useContext(ButtonContext);
+  if (!ctx) {
+    throw new Error("Button 子组件必须在 Button.Root 内使用");
+  }
+  return ctx;
+};
--- a/packages/ui-react/src/componnets/button/index.ts
+++ b/packages/ui-react/src/componnets/button/index.ts
@@ -0,0 +1,9 @@
+import { ButtonIcon } from "./ButtonIcon";
+import { ButtonLoading } from "./ButtonLoading";
+import { ButtonRoot } from "./ButtonRoot";
+
+export const Button = {
+  Root: ButtonRoot,
+  Icon: ButtonIcon,
+  Loading: ButtonLoading,
+}
--- a/packages/ui-react/src/index.css
+++ b/packages/ui-react/src/index.css
--- a/packages/ui-react/src/index.ts
+++ b/packages/ui-react/src/index.ts
@@ -0,0 +1,29 @@
+import './index.css';
+export * from './assets/svg/BoldSvg';
+export * from './assets/svg/CheckIndicatorSvg';
+export * from './assets/svg/ChevronRightSvg';
+export * from './assets/svg/CutSvg';
+export * from './assets/svg/DownloadSvg';
+export * from './assets/svg/FileSvg';
+export * from './assets/svg/KeySvg';
+export * from './assets/svg/MeshSvg';
+export * from './assets/svg/MoonSvg';
+export * from './assets/svg/PasteSvg';
+export * from './assets/svg/Ruler';
+export * from './assets/svg/SearchSvg';
+export * from './assets/svg/SettingSvg';
+export * from './assets/svg/SpinnerSvg';
+export * from './assets/svg/SunSvg';
+export * from './assets/svg/UserSvg';
+export * from './assets/svg/VolumeHighSvg';
+export * from './assets/svg/VolumeLowSvg';
+export * from './assets/svg/VolumeMuteSvg';
+export * from './componnets/button/index';
+export * from './componnets/button/ButtonIcon';
+export * from './componnets/button/ButtonLoading';
+export * from './componnets/button/ButtonRoot';
+export * from './componnets/button/common/ButtonContext';
+export * from './utils/mergeProps';
+export * from './utils/Slot';
+export * from './utils/useDefaultedProps';
+export * from './utils/useSlotRegistry';
--- a/packages/ui-react/src/types/env.d.ts
+++ b/packages/ui-react/src/types/env.d.ts
@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
--- a/packages/ui-react/src/utils/Slot.tsx
+++ b/packages/ui-react/src/utils/Slot.tsx
@@ -0,0 +1,14 @@
+import { cloneElement, isValidElement } from "react";
+import { mergeProps } from "./mergeProps";
+
+export const Slot = (props: any) => {
+  const { children, ...rest } = props;
+
+  if (!isValidElement(children)) {
+    throw new Error("Slot requires a single valid React element");
+  }
+
+  const mergedProps = mergeProps(children.props as Record<string, any>, rest);
+
+  return cloneElement(children, mergedProps);
+};
--- a/packages/ui-react/src/utils/mergeProps.ts
+++ b/packages/ui-react/src/utils/mergeProps.ts
@@ -0,0 +1,107 @@
+type AnyProps = Record<string, any>;
+
+function defaultClassMergeFn(...classes: string[]): string {
+  return classes
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .join(" ")
+    .trim();
+}
+
+// 工具类型
+type UnionToIntersection<U> =
+  (U extends any ? (k: U) => void : never) extends
+  (k: infer I) => void ? I : never;
+
+// 泛型入口
+export function mergeProps<
+  T extends AnyProps[]
+>(
+  ...args: [...T]
+): UnionToIntersection<T[number]>;
+
+export function mergeProps<
+  T extends AnyProps[]
+>(
+  options: { classMergeFn: (...cls: string[]) => string },
+  ...args: [...T]
+): UnionToIntersection<T[number]>;
+
+export function mergeProps(
+  arg1: any,
+  ...rest: any[]
+): any {
+  let options = {
+    classMergeFn: defaultClassMergeFn,
+  };
+
+  let propsList: AnyProps[];
+
+  if (
+    arg1 &&
+    typeof arg1 === "object" &&
+    !Array.isArray(arg1) &&
+    "classMergeFn" in arg1 &&
+    typeof arg1.classMergeFn === "function"
+  ) {
+    options = arg1;
+    propsList = rest;
+  } else {
+    propsList = [arg1, ...rest];
+  }
+
+  const result: AnyProps = {};
+  const eventHandlers = new Map<string, Function[]>();
+  const refs: any[] = [];
+
+  for (const props of propsList) {
+    if (!props) continue;
+
+    if (props.className) {
+      result.className = options.classMergeFn(
+        result.className ?? "",
+        props.className,
+      );
+    }
+
+    if (props.style) {
+      result.style = { ...(result.style ?? {}), ...props.style };
+    }
+
+    if (props.ref) {
+      refs.push(props.ref);
+    }
+
+    for (const key of Object.keys(props)) {
+      if (key.startsWith("on") && typeof props[key] === "function") {
+        if (!eventHandlers.has(key)) {
+          eventHandlers.set(key, []);
+        }
+        eventHandlers.get(key)!.push(props[key]);
+      } else if (key !== "ref" && key !== "className" && key !== "style") {
+        result[key] = props[key];
+      }
+    }
+  }
+
+  // refs
+  if (refs.length === 1) {
+    result.ref = refs[0];
+  } else if (refs.length > 1) {
+    result.ref = (node: any) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      });
+    };
+  }
+
+  // events
+  eventHandlers.forEach((handlers, key) => {
+    result[key] = (...args: any[]) => {
+      handlers.forEach((fn) => fn(...args));
+    };
+  });
+
+  return result;
+}
--- a/packages/ui-react/src/utils/useDefaultedProps.ts
+++ b/packages/ui-react/src/utils/useDefaultedProps.ts
@@ -0,0 +1,10 @@
+import { useMemo } from "react";
+
+export function useDefaultedProps<
+  P extends Record<string, any>,
+  D extends Partial<P>,
+>(props: P, defaults: D): P & D {
+  return useMemo(() => {
+    return { ...defaults, ...props };
+  }, [props, defaults]);
+}
--- a/packages/ui-react/src/utils/useSlotRegistry.ts
+++ b/packages/ui-react/src/utils/useSlotRegistry.ts
@@ -0,0 +1,8 @@
+// useButtonSlots.ts
+import { useState } from "react";
+
+export function useSlotRegistry<S>() {
+    const [slots, setSlots] = useState<S>()
+
+    return { slots, setSlots }
+}
--- a/packages/ui-react/tsconfig.build.json
+++ b/packages/ui-react/tsconfig.build.json
@@ -0,0 +1,43 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["src"],
+  "exclude": [
+    "src/App.tsx",
+    "src/main.tsx",
+    "node_modules",
+    "dist",
+    ".turbo/**/*",
+    ".cache/**/*",
+    ".vite/**/*",
+    "vite.config.ts",
+    "*.config.ts",
+    "*.config.js",
+    "tsconfig.*.json",
+    "__tests__/**/*",
+    "test/**/*",
+    "tests/**/*",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    ".storybook/**/*",
+    "stories/**/*",
+    "example/**/*",
+    "examples/**/*",
+    "scripts/**/*",
+    ".env",
+    ".env.*",
+    "public/**/*",
+    "docs/**/*",
+    "README.md",
+    "LICENSE"
+  ]
+}
--- a/packages/ui-react/tsconfig.json
+++ b/packages/ui-react/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es2025",
+    "lib": [
+      "ES2025",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "types": [
+      "node",
+      "vite/client"
+    ],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+  },
+  "include": [
+    "src",
+    "scripts",
+    "vite.config.ts",
+  ]
+}
--- a/packages/ui-react/vite.config.ts
+++ b/packages/ui-react/vite.config.ts
@@ -0,0 +1,39 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+
+  build: {
+    cssMinify: false,
+
+    lib: {
+      entry: path.resolve(import.meta.dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+
+    rolldownOptions: {
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      output: {
+        // 强制将生成的 CSS 命名为 index.css
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name && assetInfo.name.endsWith(".css")) {
+            return "index.css";
+          }
+          return "[name].[hash][extname]";
+        },
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+
+    emptyOutDir: true,
+    sourcemap: true,
+    cssCodeSplit: false,
+    outDir: "dist",
+  },
+});