@_tc/template-core 0.0.1 → 0.0.2

package/fe/packages/common/object/filterEmpty.js

@@ -0,0 +1,33 @@
+import { isPlainObject } from "../guards";
+const isEmptyValue = (value) => {
+    if (value === undefined)
+        return true;
+    if (Array.isArray(value))
+        return value.length === 0;
+    if (isPlainObject(value))
+        return Object.keys(value).length === 0;
+    return false;
+};
+const filterEmptyValue = (value) => {
+    if (Array.isArray(value)) {
+        const result = value
+            .map((item) => filterEmptyValue(item))
+            .filter((item) => !isEmptyValue(item));
+        return result.length > 0 ? result : undefined;
+    }
+    if (isPlainObject(value)) {
+        const result = {};
+        for (const [key, item] of Object.entries(value)) {
+            const nextValue = filterEmptyValue(item);
+            if (!isEmptyValue(nextValue)) {
+                result[key] = nextValue;
+            }
+        }
+        return Object.keys(result).length > 0 ? result : undefined;
+    }
+    return value;
+};
+export function filterEmpty(data) {
+    return filterEmptyValue(data);
+}
+export const filtereEmpty = filterEmpty;

package/fe/packages/common/object/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./filterEmpty";
+export declare const pick: <T extends object, K extends keyof T>(target: T, keys: readonly K[]) => Pick<T, K>;
+export declare const omit: <T extends object, K extends keyof T>(target: T, keys: readonly K[]) => Omit<T, K>;
+export declare const mapValues: <T extends object, TResult>(target: T, mapper: <K extends keyof T>(value: T[K], key: K) => TResult) => { [K in keyof T]: TResult; };
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/common/object/index.js

@@ -0,0 +1,25 @@
+export * from "./filterEmpty";
+export const pick = (target, keys) => {
+    const result = {};
+    for (const key of keys) {
+        if (key in target) {
+            result[key] = target[key];
+        }
+    }
+    return result;
+};
+export const omit = (target, keys) => {
+    const result = { ...target };
+    for (const key of keys) {
+        delete result[key];
+    }
+    return result;
+};
+export const mapValues = (target, mapper) => {
+    const result = {};
+    const keys = Object.keys(target);
+    for (const key of keys) {
+        result[key] = mapper(target[key], key);
+    }
+    return result;
+};

package/fe/packages/common/string/index.d.ts

@@ -0,0 +1,4 @@
+export declare const isBlank: (value: string | null | undefined) => boolean;
+export declare const capitalize: (value: string) => string;
+export declare const kebabCase: (value: string) => string;
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/common/string/index.js

@@ -0,0 +1,17 @@
+export const isBlank = (value) => {
+    return value === null || value === undefined || value.trim().length === 0;
+};
+export const capitalize = (value) => {
+    if (value.length === 0)
+        return value;
+    const first = value.charAt(0).toUpperCase();
+    return `${first}${value.slice(1)}`;
+};
+export const kebabCase = (value) => {
+    return value
+        .trim()
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .replace(/[\s_]+/g, "-")
+        .replace(/-+/g, "-")
+        .toLowerCase();
+};

package/fe/packages/common/types/index.d.ts

@@ -0,0 +1,4 @@
+export type Maybe<T> = T | null | undefined;
+export type Primitive = string | number | boolean | bigint | symbol | null | undefined;
+export type Dictionary<T = unknown> = Record<string, T>;
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/common/types/index.js

@@ -0,0 +1 @@
+export {};

package/fe/packages/ui/react/assets/table/no-result.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+  <line x1="3" y1="9" x2="21" y2="9"/>
+  <line x1="9" y1="21" x2="9" y2="9"/>
+</svg>

package/fe/packages/ui/react/components/Button/Button.d.ts

@@ -0,0 +1,58 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'default' | 'primary' | 'dashed' | 'text' | 'link';
+export type ButtonState = 'danger' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonCommonProps = {
+    /**
+     * 按钮尺寸
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * 按钮状态
+     */
+    state?: ButtonState;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 是否显示加载状态
+     */
+    loading?: boolean;
+    /**
+     * 左侧图标
+     */
+    leftIcon?: ReactNode;
+    /**
+     * 右侧图标
+     */
+    rightIcon?: ReactNode;
+    /**
+     * 是否去除下划线（仅对 variant="link" 有效）
+     * @default false
+     */
+    noUnderline?: boolean;
+    /**
+     * 作为子元素，用于更灵活的布局
+     */
+    children?: ReactNode;
+};
+type ButtonElementVariant = Exclude<ButtonVariant, 'link'>;
+export type ButtonProps = ButtonElementProps | ButtonLinkProps;
+export type ButtonElementProps = ButtonCommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> & {
+    /**
+     * 按钮变体
+     * @default 'default'
+     */
+    variant?: ButtonElementVariant;
+};
+export type ButtonLinkProps = ButtonCommonProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /**
+     * 链接变体，渲染为 a 标签
+     */
+    variant: 'link';
+};
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { Button };
+//# sourceMappingURL=Button.d.ts.map

package/fe/packages/ui/react/components/Button/Button.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { forwardRef } from 'react';
+const Button = forwardRef((props, ref) => {
+    const { className, size = 'md', state, disabled: disabledProp, loading: loadingProp, leftIcon, rightIcon, noUnderline, children, } = props;
+    const variant = props.variant ?? 'default';
+    const danger = state === 'danger';
+    const ghost = state === 'ghost';
+    const loading = loadingProp;
+    const disabled = disabledProp;
+    const isDisabled = disabled || loading;
+    // 基础样式
+    const baseStyles = 'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer';
+    const getVariantStyles = () => {
+        if (variant === 'text' || variant === 'link') {
+            return danger
+                ? 'bg-transparent border-0 text-destructive focus-visible:ring-destructive'
+                : 'bg-transparent border-0 text-foreground focus-visible:ring-border';
+        }
+        const ghostStyles = ghost && 'bg-transparent hover:bg-transparent';
+        if (danger) {
+            if (variant === 'primary') {
+                return cn(ghost
+                    ? 'border border-destructive text-destructive focus-visible:ring-destructive'
+                    : 'bg-destructive text-destructive-foreground border border-destructive hover:bg-destructive/90 focus-visible:ring-destructive', ghostStyles);
+            }
+            return cn(ghost ? 'text-destructive' : 'bg-background text-destructive hover:bg-destructive/10', variant === 'dashed' ? 'border border-dashed' : 'border', 'border-destructive focus-visible:ring-destructive', ghostStyles);
+        }
+        const variantStyles = {
+            default: 'bg-background border border-border text-foreground hover:bg-muted/50 focus-visible:ring-border',
+            primary: 'bg-theme text-theme-foreground border border-theme hover:bg-theme/90 focus-visible:ring-theme',
+            dashed: 'bg-background border border-dashed border-border text-foreground hover:bg-muted/50 focus-visible:ring-border',
+            text: 'bg-transparent border-0 text-foreground focus-visible:ring-border',
+        };
+        return cn(variantStyles[variant], ghostStyles);
+    };
+    const disabledStyles = 'disabled:bg-background/60 disabled:border-border/60 disabled:text-foreground/40 disabled:hover:bg-background/60 aria-disabled:text-foreground/40 aria-disabled:hover:bg-transparent';
+    // 尺寸样式
+    const sizeStyles = {
+        sm: 'h-8 px-3 text-sm',
+        md: 'h-10 px-4 text-sm',
+        lg: 'h-12 px-6 text-base',
+    };
+    const spinnerSize = {
+        sm: 'h-3 w-3',
+        md: 'h-4 w-4',
+        lg: 'h-5 w-5',
+    };
+    const loadingIcon = loading ? (_jsx("span", { className: cn('flex items-center', children && 'mr-2'), children: _jsxs("svg", { className: cn('animate-spin', spinnerSize[size]), 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" })] }) }, "loading")) : null;
+    // 展示内容
+    const contents = [
+        loadingIcon,
+        !loading && leftIcon && (_jsx("span", { className: cn('flex items-center', 'mr-2'), children: leftIcon }, "left")),
+        children,
+        rightIcon ? (_jsx("span", { className: cn('flex items-center', 'ml-2'), children: rightIcon }, "right")) : undefined,
+    ].filter(Boolean);
+    const buttonClassName = cn('tc-ui-button', baseStyles, getVariantStyles(), disabledStyles, ['text', 'link'].includes(variant) ? 'h-auto px-0 py-0 text-sm font-normal' : sizeStyles[size], ['text', 'link'].includes(variant) ? '' : 'before:content-normal', variant === 'link' && !noUnderline && 'hover:underline', variant === 'link' && !noUnderline && 'aria-disabled:hover:no-underline', disabled && !loading && 'cursor-not-allowed', loading && 'cursor-wait', className);
+    if (props.variant === 'link') {
+        const { className: _className, variant: _variant, size: _size, state: _state, disabled: _disabled, loading: _loading, leftIcon: _leftIcon, rightIcon: _rightIcon, noUnderline: _noUnderline, children: _children, onClick, tabIndex, ...anchorProps } = props;
+        return (_jsx("a", { ref: ref, className: buttonClassName, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : tabIndex, onClick: (event) => {
+                if (isDisabled) {
+                    event.preventDefault();
+                    return;
+                }
+                onClick?.(event);
+            }, ...anchorProps, children: contents }));
+    }
+    const { className: _className, variant: _variant, size: _size, state: _state, disabled: _disabled, loading: _loading, leftIcon: _leftIcon, rightIcon: _rightIcon, noUnderline: _noUnderline, children: _children, ...buttonProps } = props;
+    return (_jsx("button", { ref: ref, className: buttonClassName, disabled: isDisabled, ...buttonProps, children: contents }));
+});
+Button.displayName = 'Button';
+export { Button };

package/fe/packages/ui/react/components/Button/SumbitButton.d.ts

@@ -0,0 +1,13 @@
+import type { MOmit } from '../../types';
+import { type ButtonElementProps } from './Button';
+export type SumbitButtonProps = MOmit<ButtonElementProps, 'onClick'> & {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void | boolean> | void;
+};
+/**
+ *
+ * 会自动添加loading 其余同button一致
+ */
+declare const SumbitButton: (props: SumbitButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const AsynchronousButton: (props: SumbitButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { AsynchronousButton, SumbitButton };
+//# sourceMappingURL=SumbitButton.d.ts.map

package/fe/packages/ui/react/components/Button/SumbitButton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { useState } from 'react';
+import { Button } from './Button';
+/**
+ *
+ * 会自动添加loading 其余同button一致
+ */
+const SumbitButton = (props) => {
+    const { onClick, className, loading: loadingProp, ...bprops } = props;
+    const [loading, uLoading] = useState(false);
+    return (_jsx(Button, { className: cn('tc-ui-submit-button', className), loading: loading || loadingProp, onClick: async (e) => {
+            if (loading)
+                return;
+            uLoading(true);
+            try {
+                return await onClick?.(e);
+            }
+            finally {
+                uLoading(false);
+            }
+        }, ...bprops }));
+};
+const AsynchronousButton = SumbitButton;
+export { AsynchronousButton, SumbitButton };

package/fe/packages/ui/react/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+export { Button } from './Button';
+export type { ButtonElementProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant } from './Button';
+export * from './SumbitButton';
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/ui/react/components/Button/index.js

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export * from './SumbitButton';

package/fe/packages/ui/react/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,17 @@
+import type { ChangeEvent, InputHTMLAttributes } from 'react';
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    value?: boolean;
+};
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+    value?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export { Checkbox };
+//# sourceMappingURL=Checkbox.d.ts.map

package/fe/packages/ui/react/components/Checkbox/Checkbox.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Check, Minus } from 'lucide-react';
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+const Checkbox = forwardRef(({ className, checked: _controlledChecked, value, defaultChecked, indeterminate, onChange, disabled, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const controlledChecked = value ?? _controlledChecked;
+    const setRefs = (element) => {
+        internalRef.current = element;
+        if (typeof ref === 'function') {
+            ref(element);
+        }
+        else if (ref) {
+            ref.current = element;
+        }
+        if (element) {
+            element.indeterminate = indeterminate ?? false;
+        }
+    };
+    useLayoutEffect(() => {
+        if (internalRef.current) {
+            internalRef.current.indeterminate = indeterminate ?? false;
+        }
+    }, [indeterminate]);
+    const isControlled = controlledChecked !== undefined;
+    const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+    const checked = isControlled ? controlledChecked : internalChecked;
+    const showChecked = checked && !indeterminate;
+    const handleChange = (e) => {
+        const newChecked = e.target.checked;
+        if (!isControlled) {
+            setInternalChecked(newChecked);
+        }
+        onChange?.(newChecked, e);
+    };
+    return (_jsxs("span", { className: cn('tc-ui-checkbox relative inline-flex h-4 w-4 shrink-0', className), children: [_jsx("input", { type: "checkbox", ref: setRefs, checked: checked, disabled: disabled, onChange: handleChange, className: cn('peer absolute inset-0 z-10 m-0 h-full w-full appearance-none rounded opacity-0', disabled ? 'cursor-not-allowed' : 'cursor-pointer'), ...props }), _jsxs("span", { "aria-hidden": "true", className: cn('pointer-events-none flex h-full w-full items-center justify-center rounded border transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background', (showChecked || indeterminate) && 'border-theme bg-theme text-theme-foreground', !showChecked && !indeterminate && 'border-border bg-background text-theme', disabled && 'opacity-60'), children: [showChecked && _jsx(Check, { className: "h-3 w-3", strokeWidth: 3 }), indeterminate && _jsx(Minus, { className: "h-3 w-3", strokeWidth: 3 })] })] }));
+});
+Checkbox.displayName = 'Checkbox';
+export { Checkbox };

package/fe/packages/ui/react/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/ui/react/components/Checkbox/index.js

@@ -0,0 +1 @@
+export * from './Checkbox';

package/fe/packages/ui/react/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,20 @@
+export interface ConfirmDialogProps {
+    /** 是否显示 */
+    open: boolean;
+    /** 标题 */
+    title?: string;
+    /** 内容 */
+    content: string;
+    /** 确认按钮文本 */
+    okText?: string;
+    /** 取消按钮文本 */
+    cancelText?: string;
+    /** 确认按钮加载状态 */
+    loading?: boolean;
+    /** 确认回调 */
+    onOk: () => void | Promise<void>;
+    /** 取消回调 */
+    onCancel: () => void;
+}
+export declare function ConfirmDialog({ open, title, content, okText, cancelText, loading, onOk, onCancel, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/fe/packages/ui/react/components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
+import { Button } from '../Button';
+import { Modal } from '../Modal';
+export function ConfirmDialog({ open, title, content, okText, cancelText, loading = false, onOk, onCancel, }) {
+    const t = useI18n();
+    const handleOk = async () => {
+        await onOk();
+    };
+    return (_jsx(Modal, { open: open, onClose: onCancel, title: title ?? t('components.confirmDialog.title'), width: 450, className: "tc-ui-confirm-dialog", footer: _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: onCancel, className: "min-w-[100px] bg-background border-[hsl(var(--theme-primary))] text-[hsl(var(--theme-primary))] hover:bg-[hsl(var(--theme-primary))]/5", children: cancelText ?? t('components.confirmDialog.cancelText') }), _jsx(Button, { variant: "primary", loading: loading, onClick: handleOk, className: "min-w-[100px] bg-[hsl(var(--theme-primary))] hover:bg-[hsl(var(--theme-primary))]/90 border-[hsl(var(--theme-primary))] text-[hsl(var(--theme-primary-foreground))]", children: okText ?? t('components.confirmDialog.okText') })] }), children: _jsx("div", { className: "py-4 text-base text-foreground", children: content }) }));
+}

package/fe/packages/ui/react/components/ConfirmDialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ConfirmDialog';
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/ui/react/components/ConfirmDialog/index.js

@@ -0,0 +1 @@
+export * from './ConfirmDialog';

package/fe/packages/ui/react/components/DataTable/ActionBtn.d.ts

@@ -0,0 +1,8 @@
+import { type DropdownItem } from '../Dropdown';
+export type ActionOverflow = 'auto' | 'dropdown' | 'inline';
+export interface ActionBtnProps {
+    actions: DropdownItem[];
+    overflow?: ActionOverflow;
+}
+export declare const ActionBtn: ({ actions, overflow }: ActionBtnProps) => import("react/jsx-runtime").JSX.Element | "-";
+//# sourceMappingURL=ActionBtn.d.ts.map

package/fe/packages/ui/react/components/DataTable/ActionBtn.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { MoreHorizontal } from 'lucide-react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { Dropdown } from '../Dropdown';
+const isInlineAction = (action) => !('render' in action);
+const renderActionLabel = (action) => (_jsxs(_Fragment, { children: [action.icon && _jsx("span", { className: "flex-shrink-0", children: action.icon }), _jsx("span", { className: "truncate", children: action.label })] }));
+const canShowInlineActions = (actions) => actions.every(isInlineAction);
+const InlineActions = ({ actions }) => (_jsx("div", { className: "tc-ui-action-btn-list inline-flex max-w-full items-center justify-center gap-1 whitespace-nowrap", children: actions.map((action) => isInlineAction(action) ? (_jsx(Button, { type: "button", onClick: action.onClick, className: cn('tc-ui-action-btn inline-flex h-8 max-w-full items-center justify-center gap-1 rounded px-2 text-sm transition-colors', action.danger
+            ? 'text-destructive hover:bg-destructive/10'
+            : 'text-table-action-text hover:bg-background/60'), children: renderActionLabel(action) }, action.key)) : null) }));
+const DropdownActions = ({ actions }) => (_jsx(Dropdown, { items: actions, placement: "bottom-end", children: _jsx(Button, { type: "button", state: "ghost", variant: "text", "aria-label": "More actions", className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-table-action-text transition-colors hover:bg-background/60 focus-visible:ring-border", children: _jsx(MoreHorizontal, { className: "h-5 w-5 opacity-70" }) }) }));
+const AutoActionBtn = ({ actions }) => {
+    const containerRef = useRef(null);
+    const measureRef = useRef(null);
+    const [canShowInline, setCanShowInline] = useState(false);
+    const updateOverflow = useCallback(() => {
+        const container = containerRef.current;
+        const measure = measureRef.current;
+        if (!container || !measure) {
+            setCanShowInline(false);
+            return;
+        }
+        const containerWidth = container.clientWidth;
+        const actionsWidth = measure.scrollWidth;
+        setCanShowInline(containerWidth > 0 && actionsWidth <= containerWidth);
+    }, []);
+    useLayoutEffect(() => {
+        if (!canShowInlineActions(actions))
+            return;
+        if (actions.length <= 1)
+            return;
+        updateOverflow();
+        let rafId = 0;
+        const scheduleUpdate = () => {
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(updateOverflow);
+        };
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', scheduleUpdate);
+            return () => {
+                cancelAnimationFrame(rafId);
+                window.removeEventListener('resize', scheduleUpdate);
+            };
+        }
+        const observer = new ResizeObserver(scheduleUpdate);
+        if (containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+        if (measureRef.current) {
+            observer.observe(measureRef.current);
+        }
+        window.addEventListener('resize', scheduleUpdate);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+            window.removeEventListener('resize', scheduleUpdate);
+        };
+    }, [actions, updateOverflow]);
+    if (actions.length === 0) {
+        return '-';
+    }
+    if (actions.length === 1) {
+        if (!canShowInlineActions(actions)) {
+            return _jsx(DropdownActions, { actions: actions });
+        }
+        return _jsx(InlineActions, { actions: actions });
+    }
+    if (!canShowInlineActions(actions)) {
+        return _jsx(DropdownActions, { actions: actions });
+    }
+    return (_jsxs("div", { ref: containerRef, className: "relative w-full min-w-0", children: [_jsx("div", { ref: measureRef, "aria-hidden": "true", className: "pointer-events-none invisible absolute left-0 top-0 w-max max-w-none", children: _jsx(InlineActions, { actions: actions }) }), canShowInline ? _jsx(InlineActions, { actions: actions }) : _jsx(DropdownActions, { actions: actions })] }));
+};
+export const ActionBtn = ({ actions, overflow }) => {
+    if (overflow === 'dropdown') {
+        return actions.length === 0 ? '-' : _jsx(DropdownActions, { actions: actions });
+    }
+    if (overflow === 'auto') {
+        return _jsx(AutoActionBtn, { actions: actions });
+    }
+    if (actions.length === 0) {
+        return '-';
+    }
+    if (overflow === 'inline') {
+        return canShowInlineActions(actions) ? (_jsx(InlineActions, { actions: actions })) : (_jsx(DropdownActions, { actions: actions }));
+    }
+    if (actions.length === 1) {
+        const action = actions[0];
+        if (!isInlineAction(action)) {
+            return _jsx(DropdownActions, { actions: actions });
+        }
+        return (_jsx(Button, { type: "button", onClick: action.onClick, className: "tc-ui-action-btn inline-flex items-center justify-center w-8 h-8 rounded transition-colors", children: action.label }));
+    }
+    return _jsx(DropdownActions, { actions: actions });
+};

package/fe/packages/ui/react/components/DataTable/index.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+import type { DropdownItem } from '../Dropdown';
+import { type PaginationProps } from '../Pagination';
+import { type TableFixed } from '../table';
+import type { ColumnDef } from '../types/baseType';
+import { type ActionOverflow } from './ActionBtn';
+type DataTableActionColumnOptions<T> = {
+    actions?: DropdownItem[] | ((value: unknown, record: T, index: number) => DropdownItem[]);
+    actionOverflow?: ActionOverflow;
+    fixed?: TableFixed;
+};
+type TableColumnDef<T = Record<string, unknown>> = ColumnDef<T> & DataTableActionColumnOptions<T>;
+type RowSelection<T> = {
+    /**
+     * 受控用法：完全由外部维护选中 keys
+     */
+    selectedRowKeys?: Array<string | number>;
+    /**
+     * 非受控用法：仅作为初始值，后续由内部维护
+     */
+    defaultSelectedRowKeys?: Array<string | number>;
+    /**
+     * 选中项变化回调（受控/非受控都会触发）
+     */
+    onChange?: (selectedRowKeys: Array<string | number>, selectedRows: T[], isAll: boolean) => void;
+    /**
+     * 全选 受控
+     */
+    isAll?: boolean;
+    /**
+     * theader checkbox
+     */
+    beforeCheckboxNode?: ReactNode;
+};
+interface DataTableProps<T = Record<string, unknown>> {
+    columns: TableColumnDef<T>[];
+    data: T[];
+    rowKey?: keyof T | ((record: T, index: number) => string | number);
+    rowSelection?: RowSelection<T>;
+    pagination?: PaginationProps;
+    loading?: boolean;
+    /**
+     * 统一配置 column width 默认100px
+     * 会被columns[number].width覆盖
+     */
+    defaultColumnWidth?: number;
+}
+export declare function DataTable<T = Record<string, unknown>>({ columns, data: pData, loading, rowKey, rowSelection, defaultColumnWidth, pagination: pPagination, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export { ActionBtn } from './ActionBtn';
+export type { ActionBtnProps } from './ActionBtn';
+export type { DataTableProps, RowSelection, TableColumnDef };
+//# sourceMappingURL=index.d.ts.map