@_tc/template-core 0.0.1-bate.36 → 0.0.1-bate.37

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

@@ -1,42 +1,69 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { forwardRef } from 'react';
-const Button = forwardRef(({ className, variant = 'default', size = 'md', disabled, loading, leftIcon, rightIcon, noUnderline, children, ...props }, ref) => {
+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';
-    // 变体样式
-    const variantStyles = {
-        default: 'bg-white 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',
-        text: 'bg-transparent border-0 text-foreground hover:bg-muted/30 focus-visible:ring-border',
-        // 链接样式按钮：无背景、无边框、与正文相同颜色，仅在悬停时下划线（可通过 noUnderline 控制）
-        link: 'bg-transparent border-0 text-foreground focus-visible:ring-border',
+    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);
     };
-    // 禁用状态样式（根据不同 variant）
-    const disabledStyles = {
-        default: 'disabled:bg-white/60 disabled:border-border/60 disabled:text-foreground/60 disabled:hover:bg-white/60',
-        primary: 'disabled:bg-theme/60 disabled:border-theme/0 disabled:text-theme-foreground/60 disabled:hover:bg-theme/60',
-        text: 'disabled:text-foreground/40 disabled:hover:bg-transparent',
-        link: 'disabled:text-foreground/40',
-    };
-    // 尺寸样式
+    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 = [
-        leftIcon && (_jsx("span", { className: cn('flex items-center', 'mr-2'), children: leftIcon }, "left")),
+        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);
-    return (_jsx("button", { ref: ref, className: cn(baseStyles, variantStyles[variant], disabledStyles[variant], 
-        // link 模式不固定高度/内边距，更接近普通文字
-        variant === 'link' ? 'h-auto px-0 py-0 text-sm font-normal' : sizeStyles[size], variant === 'link' ? '' : 'before:content-normal', 
-        // link 模式下，根据 noUnderline 控制下划线
-        variant === 'link' && !noUnderline && 'hover:underline', variant === 'link' && !noUnderline && 'disabled:hover:no-underline', isDisabled && 'cursor-not-allowed', className), disabled: isDisabled, ...props, children: contents }));
+    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

@@ -1,12 +1,8 @@
 import type { MOmit } from '../../types';
-import { type ButtonProps } from './Button';
-export type SumbitButtonProps = MOmit<ButtonProps, 'onClick'> & {
+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 };

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

@@ -1,22 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, leftIcon, size = 'md', ...bprops } = props;
+    const { onClick, className, loading: loadingProp, ...bprops } = props;
     const [loading, uLoading] = useState(false);
-    // Loading spinner icon - 根据按钮尺寸调整大小
-    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', '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" })] }) })) : null;
-    return (_jsx(Button, { loading: loading, leftIcon: loading ? loadingIcon : leftIcon, onClick: async (e) => {
+    return (_jsx(Button, { className: cn('tc-ui-submit-button', className), loading: loading || loadingProp, onClick: async (e) => {
             if (loading)
                 return;
             uLoading(true);

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

@@ -1,4 +1,4 @@
 export { Button } from './Button';
-export type { ButtonProps, ButtonSize, ButtonVariant } 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/Checkbox/Checkbox.d.ts

@@ -6,7 +6,7 @@ export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChang
     onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
     value?: boolean;
 };
-declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> & {
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
     checked?: boolean;
     defaultChecked?: boolean;
     indeterminate?: boolean;

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

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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, ...props }, ref) => {
+const Checkbox = forwardRef(({ className, checked: _controlledChecked, value, defaultChecked, indeterminate, onChange, disabled, ...props }, ref) => {
     const internalRef = useRef(null);
     const controlledChecked = value ?? _controlledChecked;
     const setRefs = (element) => {
@@ -24,6 +25,7 @@ const Checkbox = forwardRef(({ className, checked: _controlledChecked, value, de
     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) {
@@ -31,7 +33,7 @@ const Checkbox = forwardRef(({ className, checked: _controlledChecked, value, de
         }
         onChange?.(newChecked, e);
     };
-    return (_jsx("input", { type: "checkbox", ref: setRefs, checked: checked, onChange: handleChange, className: cn('w-4 h-4 rounded border-gray-300 accent-theme', className), ...props }));
+    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/{ConfirmDialog.d.ts → ConfirmDialog/ConfirmDialog.d.ts}

@@ -1,19 +1,11 @@
 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;

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

@@ -1,6 +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 }: ActionBtnProps) => "-" | import("react/jsx-runtime").JSX.Element;
+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

@@ -1,13 +1,94 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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';
-export const ActionBtn = ({ actions }) => {
+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-red-600 hover:bg-red-50' : 'text-table-action-text hover:bg-background/60'), children: renderActionLabel(action) }, action.key)) : null) }));
+const DropdownActions = ({ actions }) => (_jsx(Dropdown, { items: actions, 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 transition-colors hover:bg-background/60", children: _jsx(MoreHorizontal, { className: "h-5 w-5 text-gray-600" }) }) }));
+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];
-        return (_jsx("button", { onClick: action.onClick, className: "inline-flex items-center justify-center w-8 h-8 rounded transition-colors", children: action.label }));
+        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(Dropdown, { items: actions, children: _jsx("button", { className: "inline-flex items-center justify-center w-8 h-8 rounded transition-colors", children: _jsx(MoreHorizontal, { className: "h-5 w-5 text-gray-600" }) }) }));
+    return _jsx(DropdownActions, { actions: actions });
 };

package/fe/packages/ui/react/components/DataTable/{data-table.d.ts → index.d.ts}

@@ -1,44 +1,31 @@
 import { type ReactNode } from 'react';
+import type { DropdownItem } from '../Dropdown';
 import { type PaginationProps } from '../Pagination';
 import type { ColumnDef } from '../types/baseType';
-export type { ColumnDef } from '../types/baseType';
+import { type ActionOverflow } from './ActionBtn';
+type DataTableActionColumnOptions<T> = {
+    actions?: DropdownItem[] | ((value: unknown, record: T, index: number) => DropdownItem[]);
+    actionOverflow?: ActionOverflow;
+};
+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: ColumnDef<T>[];
+    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 };
-//# sourceMappingURL=data-table.d.ts.map
+export type { DataTableProps, RowSelection, TableColumnDef };
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/ui/react/components/DataTable/{data-table.js → index.js}

@@ -1,34 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import noResult from '@tc/ui-react/assets/table/no-result.svg';
+import { useI18n } from '../../i18n';
 import { useMemo, useState } from 'react';
+import { Checkbox } from '../Checkbox';
 import { Pagination } from '../Pagination';
 import { Skeleton } from '../Skeleton';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
-export function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSelection, defaultColumnWidth = 100, pagination: pPagination, }) {
-    const getRowKey = (record, index) => {
-        if (typeof rowKey === 'function') {
-            return rowKey(record, index);
-        }
-        const key = record[rowKey];
-        return typeof key === 'string' || typeof key === 'number' ? key : index;
-    };
+import { ActionBtn } from './ActionBtn';
+const defaultRowKey = 'id';
+const getRowKey = (record, index, rowKey = defaultRowKey) => {
+    if (typeof rowKey === 'function') {
+        return rowKey(record, index);
+    }
+    const key = record[rowKey];
+    return typeof key === 'string' || typeof key === 'number' ? key : index;
+};
+const renderCellContent = (column, value, record, rowIndex, hasAction) => {
+    if (hasAction && column.actions) {
+        const actions = typeof column.actions === 'function' ? column.actions(value, record, rowIndex) : column.actions;
+        return (_jsx("div", { className: "flex w-full min-w-0 justify-center", children: _jsx(ActionBtn, { actions: actions, overflow: column.actionOverflow ?? 'auto' }) }));
+    }
+    return column.render ? column.render(value, record, rowIndex) : value;
+};
+export function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowSelection, defaultColumnWidth = 100, pagination: pPagination, }) {
+    const t = useI18n();
     const getCellValue = (record, column) => record[(column.dataIndex || column.key)];
     const isControlled = rowSelection && Array.isArray(rowSelection.selectedRowKeys);
     const [innerSelectedRowKeys, setInnerSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? []);
     const selectedRowKeys = (isControlled ? rowSelection?.selectedRowKeys : innerSelectedRowKeys) ?? [];
     const selectedKeySet = new Set(selectedRowKeys);
     const [currentPage, setCurrentPage] = useState(1);
-    const { showPagination, pagination, data } = useMemo(() => {
+    const { showPagination, pagination, data, pageStartIndex } = useMemo(() => {
         let pagination;
         let data = pData;
         let showPagination;
-        // 使用外部
+        let pageStartIndex = 0;
         if (pPagination) {
             pagination = pPagination;
             showPagination = pagination.total > 0;
         }
         else {
-            // 使用内部
             pagination = {
                 onChange(v) {
                     setCurrentPage(v);
@@ -38,16 +49,17 @@ export function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSel
                 total: pData.length,
             };
             showPagination = pData.length > pagination.pageSize;
-            data = pData.slice((pagination.current - 1) * pagination.pageSize, pagination.current * pagination.pageSize);
+            pageStartIndex = (pagination.current - 1) * pagination.pageSize;
+            data = pData.slice(pageStartIndex, pagination.current * pagination.pageSize);
         }
         return {
             showPagination,
             pagination,
             data,
+            pageStartIndex,
         };
     }, [currentPage, pData, pPagination]);
-    // TODO getRowKey 依赖剥离
-    const pageRowKeys = pData.map((record, index) => getRowKey(record, index));
+    const pageRowKeys = data.map((record, index) => getRowKey(record, pageStartIndex + index, rowKey));
     const handleRowSelectChange = (key) => {
         if (!rowSelection)
             return;
@@ -55,7 +67,7 @@ export function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSel
             ? selectedRowKeys.filter((k) => k !== key)
             : [...selectedRowKeys, key];
         const nextSelectedKeySet = new Set(nextSelectedKeys);
-        const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index)));
+        const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index, rowKey)));
         if (!isControlled) {
             setInnerSelectedRowKeys(nextSelectedKeys);
         }
@@ -70,10 +82,8 @@ export function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSel
             const pageKeySet = new Set(pageRowKeys);
             nextSelectedKeys = Array.from(new Set([
                 ...selectedRowKeys,
-                //
                 ...pageRowKeys.filter((key) => !selectedKeySet.has(key)),
             ]))
-                //
                 .filter((key) => pageKeySet.has(key) || selectedKeySet.has(key));
         }
         else {
@@ -81,27 +91,23 @@ export function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSel
             nextSelectedKeys = selectedRowKeys.filter((key) => !pageKeySet.has(key));
         }
         const nextSelectedKeySet = new Set(nextSelectedKeys);
-        const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index)));
+        const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index, rowKey)));
         if (!isControlled) {
             setInnerSelectedRowKeys(nextSelectedKeys);
         }
         rowSelection.onChange?.(nextSelectedKeys, selectedRows, checked);
     };
     const allChecked = rowSelection
-        ? rowSelection.isAll ?? (pageRowKeys.length > 0 && pageRowKeys.every((key) => selectedKeySet.has(key)))
+        ? (rowSelection.isAll ?? (pageRowKeys.length > 0 && pageRowKeys.every((key) => selectedKeySet.has(key))))
         : false;
     const partiallyChecked = rowSelection ? pageRowKeys.some((key) => selectedKeySet.has(key)) && !allChecked : false;
-    return (_jsxs("div", { className: "bg-white rounded-[20px] overflow-hidden relative", children: [_jsxs(Table, { containerClassName: "rounded-b-none overflow-x-auto", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [rowSelection && (_jsxs(TableHead, { className: "bg-table-header", style: {
+    return (_jsxs("div", { className: "tc-ui-data-table bg-background rounded-[20px] overflow-hidden relative", children: [_jsxs(Table, { containerClassName: "rounded-b-none overflow-x-auto", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [rowSelection && (_jsxs(TableHead, { className: "bg-table-header", style: {
                                         width: '48px',
                                         minWidth: '48px',
                                         position: 'sticky',
                                         left: 0,
                                         zIndex: 10,
-                                    }, children: [rowSelection.beforeCheckboxNode, _jsx("input", { type: "checkbox", className: "w-4 h-4 rounded border-gray-300 accent-theme", checked: allChecked, "aria-label": "Select all rows", ref: (el) => {
-                                                if (el) {
-                                                    el.indeterminate = partiallyChecked;
-                                                }
-                                            }, onChange: handleSelectAllChange })] })), columns.map((column) => {
+                                    }, children: [rowSelection.beforeCheckboxNode, _jsx(Checkbox, { checked: allChecked, "aria-label": "Select all rows", indeterminate: partiallyChecked, onChange: (_, event) => handleSelectAllChange(event) })] })), columns.map((column) => {
                                     const hasAction = column.isAction ?? column.key === 'action';
                                     return (_jsx(TableHead, { isAction: hasAction, style: {
                                             ...(hasAction
@@ -115,27 +121,31 @@ export function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSel
                                                 ? { width: column.width, minWidth: column.width }
                                                 : { minWidth: defaultColumnWidth }),
                                         }, children: column.title }, column.key));
-                                })] }) }), _jsx(TableBody, { children: data.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (rowSelection ? 1 : 0), className: "text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center w-full gap-2.5", children: [_jsx("img", { src: noResult, alt: "\u6682\u65E0\u6570\u636E", className: " w-24 h-24" }), "No Data"] }) }) })) : (data.map((record, rowIndex) => (_jsxs(TableRow, { children: [rowSelection && (_jsx(TableCell, { className: "bg-white", style: {
-                                        width: '48px',
-                                        minWidth: '48px',
-                                        position: 'sticky',
-                                        left: 0,
-                                        zIndex: 1,
-                                    }, children: _jsx("input", { type: "checkbox", className: "w-4 h-4 rounded border-gray-300 accent-theme", checked: selectedKeySet.has(getRowKey(record, rowIndex)), "aria-label": "Select row", onChange: () => handleRowSelectChange(getRowKey(record, rowIndex)) }) })), columns.map((column) => {
-                                    const value = getCellValue(record, column);
-                                    const hasAction = column.isAction ?? column.key === 'action';
-                                    return (_jsx(TableCell, { isAction: hasAction, style: {
-                                            ...(hasAction
-                                                ? {
-                                                    position: 'sticky',
-                                                    right: 0,
-                                                    zIndex: 1,
-                                                }
-                                                : undefined),
-                                            ...(column.width
-                                                ? { width: column.width, minWidth: column.width }
-                                                : { minWidth: defaultColumnWidth }),
-                                        }, children: column.render ? column.render(value, record, rowIndex) : value }, column.key));
-                                })] }, getRowKey(record, rowIndex))))) })] }), loading && (_jsx("div", { className: "absolute inset-0 rounded-[20px] bg-white/70 text-sm text-gray-600 z-[100]", children: _jsx(Skeleton, { mode: "tableloading", rows: 8 }) })), showPagination && (_jsx("div", { className: "px-6 pb-6 mt-6", children: _jsx(Pagination, { ...pagination }) }))] }));
+                                })] }) }), _jsx(TableBody, { children: data.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (rowSelection ? 1 : 0), className: "text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center w-full gap-2.5", children: [_jsx("img", { src: noResult, alt: t('components.dataTable.noData'), className: " w-24 h-24" }), t('components.dataTable.noData')] }) }) })) : (data.map((record, rowIndex) => {
+                            const absoluteRowIndex = pageStartIndex + rowIndex;
+                            const recordKey = getRowKey(record, absoluteRowIndex, rowKey);
+                            return (_jsxs(TableRow, { children: [rowSelection && (_jsx(TableCell, { className: "bg-background", style: {
+                                            width: '48px',
+                                            minWidth: '48px',
+                                            position: 'sticky',
+                                            left: 0,
+                                            zIndex: 1,
+                                        }, children: _jsx(Checkbox, { checked: selectedKeySet.has(recordKey), "aria-label": "Select row", onChange: () => handleRowSelectChange(recordKey) }) })), columns.map((column) => {
+                                        const value = getCellValue(record, column);
+                                        const hasAction = column.isAction ?? column.key === 'action';
+                                        return (_jsx(TableCell, { isAction: hasAction, style: {
+                                                ...(hasAction
+                                                    ? {
+                                                        position: 'sticky',
+                                                        right: 0,
+                                                        zIndex: 1,
+                                                    }
+                                                    : undefined),
+                                                ...(column.width
+                                                    ? { width: column.width, minWidth: column.width }
+                                                    : { minWidth: defaultColumnWidth }),
+                                            }, children: renderCellContent(column, value, record, rowIndex, hasAction) }, column.key));
+                                    })] }, recordKey));
+                        })) })] }), loading && (_jsx("div", { className: "absolute inset-0 rounded-[20px] bg-background/70 text-sm text-gray-600 z-[100]", children: _jsx(Skeleton, { mode: "tableloading", rows: 8 }) })), showPagination && (_jsx("div", { className: "px-6 pb-6 mt-6", children: _jsx(Pagination, { ...pagination }) }))] }));
 }
 export { ActionBtn } from './ActionBtn';

package/fe/packages/ui/react/components/Date/Calendar.d.ts

@@ -5,13 +5,7 @@ export type DateRange = {
     to?: Date | undefined;
 };
 export type QuickRangePreset = {
-    /**
-     * 展示文案
-     */
     label: string;
-    /**
-     * 返回一个范围对象
-     */
     getRange: () => DateRange;
 };
 export interface CalendarProps {
@@ -21,14 +15,7 @@ export interface CalendarProps {
     disabledDate?: (date: Date) => boolean;
     showTime?: boolean;
     className?: string;
-    /**
-     * 自定义文案配置，会覆盖默认文案
-     */
     locale?: Partial<DateLocaleConfig>;
-    /**
-     * 范围模式下的快捷选择配置
-     * 不传则使用默认预设
-     */
     quickRanges?: QuickRangePreset[];
 }
 export declare function Calendar({ mode, value, onChange, disabledDate, showTime, className, locale: customLocale, quickRanges, }: CalendarProps): import("react/jsx-runtime").JSX.Element;