@taicode/common-web 1.1.21 → 3.1.0

package/output/cache-api/cache-api.js

@@ -45,7 +45,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 };
 import { action, computed, observable, when } from 'mobx';
 import { catchIt } from '@taicode/common-base';
-import { SideCache } from '../side-cache';
+import { SideCache } from '../side-cache/index.js';
 let CacheApi = (() => {
     var _a, _CacheApi_pendingRequests_accessor_storage;
     var _b, _c, _d;

package/output/cache-api/cache-api.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { runInAction, configure } from 'mobx';
-import { CacheApi } from './cache-api';
+import { CacheApi } from './cache-api.js';
 // 配置 MobX 在测试环境中的行为
 configure({
     enforceActions: 'never',

package/output/cache-api/index.d.ts

@@ -1,2 +1,2 @@
-export { CacheApi } from './cache-api';
+export { CacheApi } from './cache-api.js';
 //# sourceMappingURL=index.d.ts.map

package/output/cache-api/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/cache-api/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/cache-api/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA"}

package/output/cache-api/index.js

@@ -1 +1 @@
-export { CacheApi } from './cache-api';
+export { CacheApi } from './cache-api.js';

package/output/loading-button/LoadingButtonDemo.d.ts

@@ -0,0 +1,5 @@
+/**
+ * LoadingButton 组件演示
+ */
+export declare function LoadingButtonDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoadingButtonDemo.d.ts.map

package/output/loading-button/LoadingButtonDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingButtonDemo.d.ts","sourceRoot":"","sources":["../../source/loading-button/LoadingButtonDemo.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,iBAAiB,4CAsKhC"}

package/output/loading-button/LoadingButtonDemo.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LoadingButton } from '../loading-button';
+/**
+ * LoadingButton 组件演示
+ */
+export function LoadingButtonDemo() {
+    const [result, setResult] = useState('');
+    // 模拟异步保存操作
+    const handleSave = async () => {
+        setResult('正在保存...');
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        setResult('保存成功!');
+    };
+    // 模拟可能失败的操作
+    const handleDelete = async () => {
+        setResult('正在删除...');
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        // 模拟随机失败
+        if (Math.random() > 0.5) {
+            setResult('删除成功!');
+        }
+        else {
+            setResult('删除失败!');
+            throw new Error('删除失败');
+        }
+    };
+    // 同步操作
+    const handleClick = () => {
+        setResult('立即点击!');
+    };
+    return (_jsxs("div", { className: "space-y-8 p-8", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold mb-4", children: "LoadingButton \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { className: "text-gray-600 mb-4", children: "\u6F14\u793A\u5982\u4F55\u4F7F\u7528 LoadingButton \u7EC4\u4EF6\u5904\u7406\u5F02\u6B65\u64CD\u4F5C" })] }), result && (_jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 rounded-lg", children: _jsx("p", { className: "text-sm font-medium", children: result }) })), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u57FA\u7840\u7528\u6CD5" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "blue", onClick: handleSave, children: "\u4FDD\u5B58\u6570\u636E" }), _jsx(LoadingButton, { color: "red", onClick: handleDelete, children: "\u5220\u9664\u6570\u636E" }), _jsx(LoadingButton, { color: "green", onClick: handleClick, children: "\u540C\u6B65\u64CD\u4F5C" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u4E0D\u540C\u6837\u5F0F" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "emerald", onClick: handleSave, children: "Solid \u6837\u5F0F" }), _jsx(LoadingButton, { outline: true, onClick: handleSave, children: "Outline \u6837\u5F0F" }), _jsx(LoadingButton, { plain: true, onClick: handleSave, children: "Plain \u6837\u5F0F" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u81EA\u5B9A\u4E49\u52A0\u8F7D\u6587\u672C" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "blue", onClick: handleSave, loadingText: "\u6B63\u5728\u4FDD\u5B58\u6570\u636E...", children: "\u81EA\u5B9A\u4E49\u6587\u672C" }), _jsx(LoadingButton, { color: "purple", onClick: handleSave, loadingText: _jsxs("span", { className: "flex items-center gap-2", children: [_jsxs("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "\u5904\u7406\u4E2D"] }), children: "\u81EA\u5B9A\u4E49\u56FE\u6807" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u989C\u8272\u9009\u9879" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "red", onClick: handleSave, children: "Red" }), _jsx(LoadingButton, { color: "orange", onClick: handleSave, children: "Orange" }), _jsx(LoadingButton, { color: "amber", onClick: handleSave, children: "Amber" }), _jsx(LoadingButton, { color: "yellow", onClick: handleSave, children: "Yellow" }), _jsx(LoadingButton, { color: "lime", onClick: handleSave, children: "Lime" }), _jsx(LoadingButton, { color: "green", onClick: handleSave, children: "Green" }), _jsx(LoadingButton, { color: "emerald", onClick: handleSave, children: "Emerald" }), _jsx(LoadingButton, { color: "teal", onClick: handleSave, children: "Teal" }), _jsx(LoadingButton, { color: "cyan", onClick: handleSave, children: "Cyan" }), _jsx(LoadingButton, { color: "sky", onClick: handleSave, children: "Sky" }), _jsx(LoadingButton, { color: "blue", onClick: handleSave, children: "Blue" }), _jsx(LoadingButton, { color: "indigo", onClick: handleSave, children: "Indigo" }), _jsx(LoadingButton, { color: "violet", onClick: handleSave, children: "Violet" }), _jsx(LoadingButton, { color: "purple", onClick: handleSave, children: "Purple" }), _jsx(LoadingButton, { color: "fuchsia", onClick: handleSave, children: "Fuchsia" }), _jsx(LoadingButton, { color: "pink", onClick: handleSave, children: "Pink" }), _jsx(LoadingButton, { color: "rose", onClick: handleSave, children: "Rose" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u7981\u7528\u72B6\u6001" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "blue", disabled: true, onClick: handleSave, children: "\u7981\u7528\u6309\u94AE" }), _jsx(LoadingButton, { color: "green", onClick: handleSave, disableOnLoading: false, children: "\u52A0\u8F7D\u65F6\u4E0D\u7981\u7528" })] })] })] }));
+}

package/output/loading-button/index.d.ts

@@ -1,26 +1,44 @@
-import React from 'react';
-import { type ButtonProps } from '../catalyst/button';
+import React, { type ComponentPropsWithoutRef, type ElementType } from 'react';
 /**
- * LoadingButton 组件属性类型
- * 继承 Button 的所有属性，自动处理 onClick 的异步状态
+ * 多态组件的 Props 类型
  */
-export type LoadingButtonProps = ButtonProps;
+type PolymorphicProps<T extends ElementType> = {
+    as?: T;
+    loading?: boolean;
+    loadingText?: string;
+    loadingIcon?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+    disabled?: boolean;
+    children?: React.ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'loading' | 'loadingText' | 'loadingIcon' | 'onClick'>;
 /**
  * LoadingButton 组件
  *
- * 自动处理 onClick 异步操作的加载状态，在按钮末尾显示 loading 图标
+ * 支持任意组件作为基础按钮，在异步操作时自动显示 loading 状态
  *
  * @example
  * ```tsx
- * <LoadingButton
- *   color="blue"
- *   onClick={async () => {
- *     await saveData()
- *   }}
- * >
+ * // 使用默认 button
+ * <LoadingButton onClick={async () => await save()}>
+ *   保存
+ * </LoadingButton>
+ *
+ * // 使用自定义组件
+ * <LoadingButton as={MyButton} onClick={async () => await save()}>
+ *   保存
+ * </LoadingButton>
+ *
+ * // 自定义 loading 图标
+ * <LoadingButton loadingIcon={<MySpinner />} onClick={async () => await save()}>
+ *   保存
+ * </LoadingButton>
+ *
+ * // 手动控制 loading 状态
+ * <LoadingButton loading={isLoading}>
  *   保存
  * </LoadingButton>
  * ```
  */
-export declare const LoadingButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const LoadingButton: React.ForwardRefExoticComponent<Omit<PolymorphicProps<React.ElementType>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/output/loading-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/loading-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAG7D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAA;AAM5C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,iFAkDxB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/loading-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqC,KAAK,wBAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAA;AAkCjH;;GAEG;AACH,KAAK,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI;IAC7C,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,SAAS,CAAC,CAAA;AAEnG;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,aAAa,4HAsEzB,CAAA"}

package/output/loading-button/index.js

@@ -9,47 +9,71 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
-import { Button } from '../catalyst/button';
-import { catchIt } from '@taicode/common-base';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, forwardRef } from 'react';
 function isPromiseLike(value) {
-    return value != null && typeof value.then === 'function';
+    return value != null && typeof value === 'object' && 'then' in value && typeof value.then === 'function';
+}
+/**
+ * Loading 指示器组件
+ */
+function LoadingSpinner({ className = '' }) {
+    return (_jsxs("svg", { className: `animate-spin ${className}`, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }));
 }
 /**
  * LoadingButton 组件
  *
- * 自动处理 onClick 异步操作的加载状态，在按钮末尾显示 loading 图标
+ * 支持任意组件作为基础按钮，在异步操作时自动显示 loading 状态
  *
  * @example
  * ```tsx
- * <LoadingButton
- *   color="blue"
- *   onClick={async () => {
- *     await saveData()
- *   }}
- * >
+ * // 使用默认 button
+ * <LoadingButton onClick={async () => await save()}>
+ *   保存
+ * </LoadingButton>
+ *
+ * // 使用自定义组件
+ * <LoadingButton as={MyButton} onClick={async () => await save()}>
+ *   保存
+ * </LoadingButton>
+ *
+ * // 自定义 loading 图标
+ * <LoadingButton loadingIcon={<MySpinner />} onClick={async () => await save()}>
+ *   保存
+ * </LoadingButton>
+ *
+ * // 手动控制 loading 状态
+ * <LoadingButton loading={isLoading}>
  *   保存
  * </LoadingButton>
  * ```
  */
 export const LoadingButton = forwardRef(function LoadingButton(_a, ref) {
-    var { children, onClick } = _a, props = __rest(_a, ["children", "onClick"]);
-    const [isLoading, setIsLoading] = useState(false);
-    const handleClick = async (event) => {
-        if (!onClick || isLoading)
+    var { as, loading: externalLoading, loadingText, loadingIcon, onClick, disabled, children, className = '' } = _a, props = __rest(_a, ["as", "loading", "loadingText", "loadingIcon", "onClick", "disabled", "children", "className"]);
+    const [internalLoading, setInternalLoading] = useState(false);
+    const loading = externalLoading !== null && externalLoading !== void 0 ? externalLoading : internalLoading;
+    const handleClick = useCallback((event) => {
+        if (!onClick || loading || disabled)
             return;
         const result = onClick(event);
-        // 检查是否是 Promise
+        // 如果返回 Promise-like，自动管理 loading 状态，但不捕获异常
+        // 使用 then 而不是 finally，因为 PromiseLike 不保证有 finally 方法
+        // 在 rejected 回调中重新抛出，让异常传播到全局错误处理机制（如 Toaster）
         if (isPromiseLike(result)) {
-            setIsLoading(true);
-            const catchResult = await catchIt(result);
-            setIsLoading(false);
-            // 错误由调用方处理
-            if (catchResult.isError()) {
-                throw catchResult.error;
-            }
+            setInternalLoading(true);
+            result.then(() => setInternalLoading(false), (error) => {
+                setInternalLoading(false);
+                throw error;
+            });
         }
-    };
-    return (_jsxs(Button, Object.assign({}, props, { ref: ref, onClick: handleClick, disabled: isLoading, children: [children, isLoading && (_jsxs("svg", { "data-slot": "icon", className: "animate-spin", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }))] })));
+    }, [onClick, loading, disabled]);
+    // 使用 as prop 或默认 button
+    const Component = as || 'button';
+    // 默认 button 样式（仅当使用默认 button 时应用）
+    const defaultButtonClass = !as
+        ? 'inline-flex items-center justify-center gap-2 rounded-[var(--radius)] bg-[var(--primary)] px-4 py-2 text-sm font-medium text-[var(--primary-foreground)] shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--ring)] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed'
+        : '';
+    const finalClassName = `${defaultButtonClass} ${className}`.trim();
+    return (_jsx(Component, Object.assign({ ref: ref, onClick: handleClick, disabled: disabled || loading, className: finalClassName }, props, { children: loading ? (_jsxs(_Fragment, { children: [loadingIcon || _jsx(LoadingSpinner, { className: "size-4" }), loadingText || children] })) : (children) })));
 });
+LoadingButton.displayName = 'LoadingButton';

package/output/loading-button/index.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=index.test.d.ts.map

package/output/loading-button/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../source/loading-button/index.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA"}

package/output/loading-button/index.test.js

@@ -0,0 +1,203 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { LoadingButton } from './index.js';
+describe('LoadingButton', () => {
+    describe('基础功能', () => {
+        it('应该渲染按钮和子元素', () => {
+            render(_jsx(LoadingButton, { children: "\u70B9\u51FB\u6211" }));
+            expect(screen.getByRole('button')).toHaveTextContent('点击我');
+        });
+        it('应该支持 disabled 属性', () => {
+            render(_jsx(LoadingButton, { disabled: true, children: "\u70B9\u51FB\u6211" }));
+            expect(screen.getByRole('button')).toBeDisabled();
+        });
+        it('应该应用自定义 className', () => {
+            render(_jsx(LoadingButton, { className: "custom-class", children: "\u70B9\u51FB\u6211" }));
+            expect(screen.getByRole('button')).toHaveClass('custom-class');
+        });
+    });
+    describe('同步点击', () => {
+        it('应该处理同步点击事件', () => {
+            const handleClick = vi.fn();
+            render(_jsx(LoadingButton, { onClick: handleClick, children: "\u70B9\u51FB\u6211" }));
+            fireEvent.click(screen.getByRole('button'));
+            expect(handleClick).toHaveBeenCalledTimes(1);
+        });
+        it('同步操作不应该显示 loading', () => {
+            const handleClick = vi.fn();
+            render(_jsx(LoadingButton, { onClick: handleClick, children: "\u70B9\u51FB\u6211" }));
+            fireEvent.click(screen.getByRole('button'));
+            expect(screen.queryByRole('button')).toHaveTextContent('点击我');
+        });
+    });
+    describe('异步点击', () => {
+        it('应该在异步操作期间显示 loading', async () => {
+            const handleClick = vi.fn(async () => {
+                await new Promise(resolve => setTimeout(resolve, 100));
+            });
+            render(_jsx(LoadingButton, { children: "\u4FDD\u5B58" }));
+            const button = screen.getByRole('button');
+            fireEvent.click(button);
+            // 应该立即显示 loading
+            await waitFor(() => {
+                expect(button).toBeDisabled();
+            });
+            // 等待异步操作完成
+            await waitFor(() => {
+                expect(button).not.toBeDisabled();
+            }, { timeout: 200 });
+        });
+        it('异步操作完成后应该恢复正常状态', async () => {
+            let resolve;
+            const promise = new Promise(r => { resolve = r; });
+            const handleClick = vi.fn(() => promise);
+            render(_jsx(LoadingButton, { onClick: handleClick, children: "\u4FDD\u5B58" }));
+            const button = screen.getByRole('button');
+            fireEvent.click(button);
+            // loading 状态
+            await waitFor(() => {
+                expect(button).toBeDisabled();
+            });
+            // 完成异步操作
+            resolve();
+            // 恢复正常
+            await waitFor(() => {
+                expect(button).not.toBeDisabled();
+            });
+        });
+        it('异步操作失败后应该恢复正常状态', async () => {
+            const handleClick = vi.fn(async () => {
+                await new Promise((_, reject) => setTimeout(() => reject(new Error('失败')), 50));
+            });
+            render(_jsx(LoadingButton, { onClick: handleClick, children: "\u4FDD\u5B58" }));
+            const button = screen.getByRole('button');
+            fireEvent.click(button);
+            // loading 状态
+            await waitFor(() => {
+                expect(button).toBeDisabled();
+            });
+            // 等待失败并恢复
+            await waitFor(() => {
+                expect(button).not.toBeDisabled();
+            }, { timeout: 100 });
+        });
+    });
+    describe('手动控制 loading', () => {
+        it('应该支持外部控制 loading 状态', () => {
+            const { rerender } = render(_jsx(LoadingButton, { loading: false, children: "\u4FDD\u5B58" }));
+            expect(screen.getByRole('button')).not.toBeDisabled();
+            rerender(_jsx(LoadingButton, { loading: true, children: "\u4FDD\u5B58" }));
+            expect(screen.getByRole('button')).toBeDisabled();
+        });
+        it('外部 loading 状态应该优先于内部状态', async () => {
+            const handleClick = vi.fn(async () => {
+                await new Promise(resolve => setTimeout(resolve, 100));
+            });
+            render(_jsx(LoadingButton, { loading: true, onClick: handleClick, children: "\u4FDD\u5B58" }));
+            const button = screen.getByRole('button');
+            // 外部 loading 为 true，应该禁用
+            expect(button).toBeDisabled();
+            // 点击不应该触发
+            fireEvent.click(button);
+            expect(handleClick).not.toHaveBeenCalled();
+        });
+    });
+    describe('loading 显示定制', () => {
+        it('应该显示自定义 loadingText', async () => {
+            const handleClick = vi.fn(async () => {
+                await new Promise(resolve => setTimeout(resolve, 50));
+            });
+            render(_jsx(LoadingButton, { loadingText: "\u5904\u7406\u4E2D...", onClick: handleClick, children: "\u4FDD\u5B58" }));
+            fireEvent.click(screen.getByRole('button'));
+            await waitFor(() => {
+                expect(screen.getByText('处理中...')).toBeInTheDocument();
+            });
+        });
+        it('应该显示自定义 loadingIcon', async () => {
+            const handleClick = vi.fn(async () => {
+                await new Promise(resolve => setTimeout(resolve, 50));
+            });
+            render(_jsx(LoadingButton, { loadingIcon: _jsx("span", { "data-testid": "custom-icon", children: "\u23F3" }), onClick: handleClick, children: "\u4FDD\u5B58" }));
+            fireEvent.click(screen.getByRole('button'));
+            await waitFor(() => {
+                expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('多态组件 (as prop)', () => {
+        it('应该渲染为自定义组件', () => {
+            const CustomButton = (_a) => {
+                var { children } = _a, props = __rest(_a, ["children"]);
+                return (_jsx("button", Object.assign({ "data-testid": "custom-button" }, props, { children: children })));
+            };
+            render(_jsx(LoadingButton, { as: CustomButton, children: "\u70B9\u51FB\u6211" }));
+            expect(screen.getByTestId('custom-button')).toBeInTheDocument();
+        });
+        it('应该渲染为 anchor 标签', () => {
+            render(_jsx(LoadingButton, { as: "a", href: "#", children: "\u94FE\u63A5" }));
+            const link = screen.getByText('链接');
+            expect(link.tagName).toBe('A');
+        });
+        it('自定义组件应该保留其 props', () => {
+            render(_jsx(LoadingButton, { as: "a", href: "https://example.com", target: "_blank", children: "\u94FE\u63A5" }));
+            const link = screen.getByText('链接');
+            expect(link).toHaveAttribute('href', 'https://example.com');
+            expect(link).toHaveAttribute('target', '_blank');
+        });
+    });
+    describe('禁用状态', () => {
+        it('禁用时不应该触发点击', () => {
+            const handleClick = vi.fn();
+            render(_jsx(LoadingButton, { disabled: true, onClick: handleClick, children: "\u70B9\u51FB\u6211" }));
+            fireEvent.click(screen.getByRole('button'));
+            expect(handleClick).not.toHaveBeenCalled();
+        });
+        it('loading 时不应该触发点击', async () => {
+            const handleClick = vi.fn(async () => {
+                await new Promise(resolve => setTimeout(resolve, 100));
+            });
+            render(_jsx(LoadingButton, { onClick: handleClick, children: "\u4FDD\u5B58" }));
+            const button = screen.getByRole('button');
+            // 第一次点击
+            fireEvent.click(button);
+            expect(handleClick).toHaveBeenCalledTimes(1);
+            // loading 期间再次点击
+            fireEvent.click(button);
+            fireEvent.click(button);
+            // 不应该再次触发
+            expect(handleClick).toHaveBeenCalledTimes(1);
+            // 等待完成
+            await waitFor(() => {
+                expect(button).not.toBeDisabled();
+            }, { timeout: 150 });
+        });
+    });
+    describe('默认样式', () => {
+        it('使用默认 button 时应该应用默认样式', () => {
+            render(_jsx(LoadingButton, { children: "\u70B9\u51FB\u6211" }));
+            const button = screen.getByRole('button');
+            // 检查是否包含默认样式类
+            expect(button.className).toContain('inline-flex');
+            expect(button.className).toContain('bg-primary');
+        });
+        it('使用 as prop 时不应该应用默认样式', () => {
+            render(_jsx(LoadingButton, { as: "a", children: "\u94FE\u63A5" }));
+            const link = screen.getByText('链接');
+            // 不应该包含默认 button 样式
+            expect(link.className).not.toContain('bg-primary');
+        });
+    });
+});

package/output/service/index.d.ts

@@ -1,2 +1,2 @@
-export { useService, useLocalService, ServiceProvider } from './service';
+export { useService, useLocalService, ServiceProvider } from './service.js';
 //# sourceMappingURL=index.d.ts.map

package/output/service/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/service/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/service/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/output/service/index.js

@@ -1 +1 @@
-export { useService, useLocalService, ServiceProvider } from './service';
+export { useService, useLocalService, ServiceProvider } from './service.js';

package/output/service/service.d.ts

@@ -32,7 +32,7 @@
  * }
  * ```
  */
-import { Token, Container, Provider } from '@needle-di/core';
+import { type Token, Container, type Provider } from '@needle-di/core';
 import React from 'react';
 /**
  * 使用服务 Hook

package/output/service/service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../../source/service/service.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAIH,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC5D,OAAO,KAA2D,MAAM,OAAO,CAAA;AA+D/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AAEH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AAClD,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;AAgDlF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;AAC9E,wBAAgB,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;AAyF9G;;GAEG;AACH,UAAU,oBAAoB;IAC5B;;;;;OAKG;IACH,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAA;IAC7B,UAAU;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,6CAA6C;AAE7C,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,8EA2B1D"}
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../../source/service/service.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAIH,OAAO,EAAE,KAAK,KAAK,EAAE,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,KAA0E,MAAM,OAAO,CAAA;AA+D9F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AAEH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AAClD,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;AAgDlF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;AAC9E,wBAAgB,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;AAyF9G;;GAEG;AACH,UAAU,oBAAoB;IAC5B;;;;;OAKG;IACH,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAA;IAC7B,UAAU;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,6CAA6C;AAE7C,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,8EA2B1D"}

package/output/service/service.js

@@ -33,8 +33,9 @@
  * ```
  */
 import { reaction, runInAction } from 'mobx';
+import { Service } from '@taicode/common-base';
 import { Container } from '@needle-di/core';
-import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
+import React, { useContext, useEffect, useMemo, useState, useRef, createElement } from 'react';
 /**
  * React Context 用于传递 DI 容器实例
  * 通过上下文在组件树中共享依赖注入容器
@@ -88,7 +89,7 @@ export function useService(target, selector) {
     const container = useContext(ctx);
     // 使用 useState 强制组件重新渲染
     const [, refresh] = useState({});
-    React.useEffect(() => {
+    useEffect(() => {
         if (container == null)
             return;
         // 从容器中获取服务实例
@@ -141,7 +142,7 @@ export function useLocalService(ServiceClass, selector) {
         serviceInstanceRef.current = localContainerRef.current.get(ServiceClass);
     }
     // 模仿 useService 的结构：在 useEffect 中设置 reaction 和初始化
-    React.useEffect(() => {
+    useEffect(() => {
         if (parentContainer == null)
             return;
         const service = serviceInstanceRef.current;
@@ -166,7 +167,7 @@ export function useLocalService(ServiceClass, selector) {
         return dispose;
     }, [parentContainer, selector, ServiceClass]);
     // 单独的 useEffect 处理服务初始化，避免与 selector 变化的冲突
-    React.useEffect(() => {
+    useEffect(() => {
         if (parentContainer == null)
             return;
         let disposed = false;
@@ -284,9 +285,9 @@ export function ServiceProvider(props) {
         });
         return currentContainer;
     }, [parentContainer, services]);
-    // 使用 React.createElement 避免将文件改为 .tsx
-    const init = React.createElement(InitService, { services, children });
-    return React.createElement(ctx.Provider, { value: container, children: container ? init : null });
+    // 使用 createElement 避免将文件改为 .tsx
+    const init = createElement(InitService, { services, children });
+    return createElement(ctx.Provider, { value: container, children: container ? init : null });
 }
 /**
  * 服务初始化组件
@@ -310,7 +311,7 @@ export function ServiceProvider(props) {
 function InitService(props) {
     const { services, children } = props;
     const container = useContext(ctx);
-    const [initError, setInitError] = React.useState(null);
+    const [initError, setInitError] = useState(null);
     useEffect(() => {
         if (container == null)
             return;

package/output/service/service.test.js

@@ -49,7 +49,8 @@ import { Service } from '@taicode/common-base';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, renderHook, waitFor } from '@testing-library/react';
 import { observable, makeObservable, runInAction, action } from 'mobx';
-import { useService, useLocalService, ServiceProvider } from './service';
+import { inject } from '@needle-di/core';
+import { useService, useLocalService, ServiceProvider } from './service.js';
 class TestErrorBoundary extends React.Component {
     constructor() {
         super(...arguments);

package/output/side-cache/index.d.ts

@@ -1,2 +1,2 @@
-export { SideCache } from './side-cache';
+export { SideCache } from './side-cache.js';
 //# sourceMappingURL=index.d.ts.map

package/output/side-cache/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/side-cache/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/side-cache/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA"}

package/output/side-cache/index.js

@@ -1 +1 @@
-export { SideCache } from './side-cache';
+export { SideCache } from './side-cache.js';

package/output/side-cache/side-cache.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { runInAction } from 'mobx';
-import { SideCache } from './side-cache';
+import { SideCache } from './side-cache.js';
 describe('SideCache', () => {
     let cache;
     beforeEach(() => {

package/output/signin/context.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 /**
  * 登录上下文值
  */
 interface SigninContextValue {
     signin: () => Promise<void>;
 }
-export declare const SigninContext: React.Context<SigninContextValue | null>;
+export declare const SigninContext: import("react").Context<SigninContextValue | null>;
 /**
  * 使用登录上下文
  * 用于在任何子组件中调用登录方法

package/output/signin/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../source/signin/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;GAEG;AACH,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC5B;AAED,eAAO,MAAM,aAAa,0CAAuD,CAAA;AAEjF;;;GAGG;AACH,wBAAgB,SAAS,uBAMxB"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../source/signin/context.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC5B;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAA;AAE3E;;;GAGG;AACH,wBAAgB,SAAS,uBAMxB"}

package/output/signin/context.js

@@ -1,11 +1,11 @@
-import React from 'react';
-export const SigninContext = React.createContext(null);
+import { createContext, useContext } from 'react';
+export const SigninContext = createContext(null);
 /**
  * 使用登录上下文
  * 用于在任何子组件中调用登录方法
  */
 export function useSignin() {
-    const context = React.useContext(SigninContext);
+    const context = useContext(SigninContext);
     if (!context) {
         throw new Error('useSigninContext must be used within SigninDialogProvider');
     }