@_tc/template-core 0.0.1 → 0.0.2

package/fe/packages/ui/react/components/Menu/utils.js

@@ -0,0 +1,7 @@
+export function getFirstChar(node) {
+    if (typeof node === "string")
+        return node[0]?.toUpperCase() ?? "";
+    if (typeof node === "number")
+        return String(node);
+    return "";
+}

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export type MessageType = 'success' | 'error' | 'warning' | 'info';
+export type MessageProps = {
+    type?: MessageType;
+    content?: ReactNode;
+    children?: ReactNode;
+    /**
+     * 存在时间
+     * @default 3000ms
+     */
+    duration?: number;
+    onClose?: () => void;
+    /**
+     * 可手动关闭
+     */
+    closable?: boolean;
+    className?: string;
+};
+export declare function Message({ type, content, children, duration, onClose, closable, className, }: MessageProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Message.d.ts.map

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
+import { cn } from '../../lib/utils';
+import { AlertCircle, CheckCircle2, Info, X, XCircle } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { DEFAULT_DURATION } from './data';
+const typeConfig = {
+    success: {
+        icon: CheckCircle2,
+        color: 'text-green-600',
+    },
+    error: {
+        icon: XCircle,
+        color: 'text-red-600',
+    },
+    warning: {
+        icon: AlertCircle,
+        color: 'text-yellow-600',
+    },
+    info: {
+        icon: Info,
+        color: 'text-blue-600',
+    },
+};
+export function Message({ type = 'info', content, children, duration = DEFAULT_DURATION, onClose, closable = true, className, }) {
+    const t = useI18n();
+    const displayContent = children ?? content;
+    const [visible, setVisible] = useState(true);
+    const timerRef = useRef(null);
+    const messageRef = useRef(null);
+    const Icon = typeConfig[type].icon;
+    const iconColor = typeConfig[type].color;
+    const handleClose = () => {
+        setVisible(false);
+        // 等待动画完成后再调用 onClose
+        setTimeout(() => {
+            onClose?.();
+        }, 200);
+    };
+    // 自动关闭
+    useEffect(() => {
+        if (duration > 0) {
+            timerRef.current = setTimeout(() => {
+                handleClose();
+            }, duration);
+        }
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [duration]);
+    if (!visible)
+        return null;
+    return (_jsxs("div", { ref: messageRef, className: cn('tc-ui-message flex items-start gap-3 px-4 py-3 rounded-lg shadow-lg', 'bg-background border border-border', 'min-w-[320px] max-w-[480px]', 'transition-all duration-200', 'pointer-events-auto', visible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2', className), children: [_jsx(Icon, { size: 20, className: cn('flex-shrink-0 mt-0.5', iconColor) }), _jsx("div", { className: "flex-1 text-sm text-foreground", children: displayContent }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: handleClose, "aria-label": t('components.message.close'), className: cn('flex-shrink-0 p-0.5 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 16 }) }))] }));
+}

package/fe/packages/ui/react/components/Message/MessageManager.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { type MessageProps, type MessageType } from './Message';
+type MessageConfig = Omit<MessageProps, 'onClose' | 'children'> & {
+    id: string;
+    content?: ReactNode;
+    onClose?: () => void;
+};
+declare class MessageManagerClass {
+    private messages;
+    private container;
+    private offScreenContainer;
+    private root;
+    private offScreenRoot;
+    private maxCount;
+    private init;
+    private render;
+    show(config: Omit<MessageConfig, 'id'>, type?: MessageType): string;
+    close(id: string): void;
+    closeAll(): void;
+    setMaxCount(count: number): void;
+}
+export declare const messageManager: MessageManagerClass;
+type MessageFN = (content: ReactNode, config?: {
+    duration?: number;
+    onClose?: () => void;
+}) => string;
+export declare const message: {
+    success: MessageFN;
+    error: MessageFN;
+    warning: MessageFN;
+    info: MessageFN;
+    close: (id: string) => void;
+    closeAll: () => void;
+    setMaxCount: (count: number) => void;
+};
+export {};
+//# sourceMappingURL=MessageManager.d.ts.map

package/fe/packages/ui/react/components/Message/MessageManager.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import { Message } from './Message';
+import { DEFAULT_DURATION } from './data';
+class MessageManagerClass {
+    messages = new Map();
+    container = null;
+    offScreenContainer = null;
+    root = null;
+    offScreenRoot = null;
+    maxCount = 5;
+    init() {
+        if (typeof document === 'undefined' || this.container)
+            return;
+        // 可见消息容器
+        this.container = document.createElement('div');
+        this.container.id = 'message-container';
+        this.container.className = 'fixed top-4 left-1/2 z-[10000] flex flex-col items-center gap-2 pointer-events-none';
+        this.container.style.transform = 'translateX(-50%)';
+        document.body.appendChild(this.container);
+        // 屏幕外消息容器 保留回调触发
+        this.offScreenContainer = document.createElement('div');
+        this.offScreenContainer.id = 'message-offscreen-container';
+        this.offScreenContainer.className =
+            'fixed -left-[9999px] top-0 z-[10000] flex flex-col items-center gap-2 pointer-events-none';
+        this.offScreenContainer.setAttribute('aria-hidden', 'true');
+        document.body.appendChild(this.offScreenContainer);
+        // 创建 React 根节点
+        this.root = createRoot(this.container);
+        this.offScreenRoot = createRoot(this.offScreenContainer);
+        this.render();
+    }
+    render() {
+        if (!this.root || !this.offScreenRoot)
+            return;
+        const messages = Array.from(this.messages.values());
+        const totalCount = messages.length;
+        // 可见消息：最后 maxCount 条
+        const displayMessages = totalCount > this.maxCount ? messages.slice(-this.maxCount) : messages;
+        // 屏幕外消息：除了最后 maxCount 条之外的所有消息
+        const offScreenMessages = totalCount > this.maxCount ? messages.slice(0, -this.maxCount) : [];
+        const now = Date.now();
+        // 渲染可见消息
+        this.root.render(_jsx(_Fragment, { children: displayMessages.map((message) => (_jsx(Message, { ...message, duration: message.expirationTime - now, content: message.content, onClose: () => {
+                    message.onClose?.();
+                    this.close(message.id);
+                } }, message.id))) }));
+        // 渲染屏幕外消息
+        this.offScreenRoot.render(_jsx(_Fragment, { children: offScreenMessages.map((message) => (_jsx(Message, { ...message, duration: message.expirationTime - now, content: message.content, onClose: () => {
+                    message.onClose?.();
+                    this.close(message.id);
+                } }, message.id))) }));
+    }
+    show(config, type = 'info') {
+        this.init();
+        const now = Date.now();
+        const id = `message-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const messageConfig = {
+            ...config,
+            expirationTime: now + (config.duration ?? DEFAULT_DURATION),
+            id,
+            type,
+        };
+        this.messages.set(id, messageConfig);
+        this.render();
+        return id;
+    }
+    close(id) {
+        this.messages.delete(id);
+        this.render();
+    }
+    closeAll() {
+        this.messages.clear();
+        this.render();
+    }
+    setMaxCount(count) {
+        this.maxCount = count;
+    }
+}
+// 单例模式
+export const messageManager = new MessageManagerClass();
+export const message = {
+    success: (content, config) => messageManager.show({ content, ...config }, 'success'),
+    error: (content, config) => messageManager.show({ content, ...config }, 'error'),
+    warning: (content, config) => messageManager.show({ content, ...config }, 'warning'),
+    info: (content, config) => messageManager.show({ content, ...config }, 'info'),
+    close: (id) => messageManager.close(id),
+    closeAll: () => messageManager.closeAll(),
+    setMaxCount: (count) => messageManager.setMaxCount(count),
+};

package/fe/packages/ui/react/components/Message/data.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_DURATION = 3000;
+//# sourceMappingURL=data.d.ts.map

package/fe/packages/ui/react/components/Message/data.js

@@ -0,0 +1 @@
+export const DEFAULT_DURATION = 3000;

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

@@ -0,0 +1,3 @@
+export type { MessageProps, MessageType } from './Message';
+export { message } from './MessageManager';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+export { message } from './MessageManager';

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+export type ModalProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    mask?: boolean;
+    maskClosable?: boolean;
+    lockScroll?: boolean;
+    closable?: boolean;
+    width?: number | string;
+    centered?: boolean;
+    zIndex?: number;
+    /**
+     * @default document.body
+     */
+    renderNode?: HTMLElement | (() => HTMLElement);
+    /**
+     * 是否支持键盘关闭 默认开启
+     */
+    keyboard?: boolean;
+};
+export declare function Modal({ open, onClose, title, children, footer, className, contentClassName, mask, maskClosable, lockScroll, closable, width, centered, renderNode, keyboard, zIndex, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
+import { cn } from '../../lib/utils';
+import { X } from 'lucide-react';
+import { Button } from '../Button';
+import { Overlay } from '../Overlay';
+export function Modal({ open = false, onClose, title, children, footer, className, contentClassName, mask = true, maskClosable = true, lockScroll = true, closable = true, width = 520, centered = true, renderNode, keyboard = true, zIndex = 1000, }) {
+    const t = useI18n();
+    // 点击内容区域阻止冒泡
+    const handleContentClick = (e) => {
+        e.stopPropagation();
+    };
+    return (_jsx(Overlay, { open: open, onClose: onClose, mask: mask, maskClosable: maskClosable, lockScroll: lockScroll, keyboard: keyboard, closable: closable, renderNode: renderNode, zIndex: zIndex, className: cn('tc-ui-modal flex items-center justify-center'), children: _jsxs("div", { className: cn('relative bg-background rounded-lg shadow-lg', 'flex flex-col max-h-[90vh]', 'transition-all duration-200', open ? 'scale-100 opacity-100' : 'scale-95 opacity-0', centered ? 'my-auto' : 'mt-[10vh]', className), style: { width: typeof width === 'number' ? `${width}px` : width }, onClick: handleContentClick, children: [(title || closable) && (_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-border", children: [title && _jsx("div", { className: "text-lg font-semibold text-foreground", children: title }), closable && (_jsx(Button, { variant: "text", type: "button", onClick: onClose, "aria-label": t('components.modal.close'), className: cn('ml-auto p-1 rounded-md', 'text-muted-foreground hover:text-foreground', 'hover:bg-muted', 'transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: _jsx(X, { size: 20 }) }))] })), _jsx("div", { className: cn('flex-1 overflow-auto px-6 py-4', contentClassName), children: children }), footer && _jsx("div", { className: "px-6 py-4 border-border", children: footer })] }) }));
+}

package/fe/packages/ui/react/components/Modal/ModalManager.d.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react';
+import { type SumbitButtonProps } from '../Button';
+import { type ModalProps } from './Modal';
+type ModalConfig = Omit<ModalProps, 'open' | 'onClose' | 'children'> & {
+    id: string;
+    onClose?: () => void;
+    content?: ReactNode;
+};
+declare class ModalManagerClass {
+    private modals;
+    private listeners;
+    private container;
+    private root;
+    private init;
+    private notify;
+    subscribe(listener: () => void): () => void;
+    open(config: Omit<ModalConfig, 'id'>): string;
+    close(id: string): void;
+    closeAll(): void;
+    getModals(): ModalConfig[];
+    private render;
+}
+type OpenModalConfig = Omit<ModalConfig, 'id'>;
+export declare const openConfirmModal: (pConfig: Pick<OpenModalConfig, "content"> & {
+    /** 标题 */
+    title?: ReactNode;
+    /** 内容 */
+    content: ReactNode;
+    /** 确认按钮文本 */
+    okText?: string;
+    /** 取消按钮文本 */
+    cancelText?: string;
+    /** 确认回调 */
+    onOk?: SumbitButtonProps["onClick"];
+    /** 取消回调 */
+    onCancel?: () => void;
+}) => string;
+export declare const modalManager: ModalManagerClass;
+export declare const modal: {
+    open: (config: OpenModalConfig) => string;
+    confirm: (pConfig: Pick<OpenModalConfig, "content"> & {
+        /** 标题 */
+        title?: ReactNode;
+        /** 内容 */
+        content: ReactNode;
+        /** 确认按钮文本 */
+        okText?: string;
+        /** 取消按钮文本 */
+        cancelText?: string;
+        /** 确认回调 */
+        onOk?: SumbitButtonProps["onClick"];
+        /** 取消回调 */
+        onCancel?: () => void;
+    }) => string;
+    close: (id: string) => void;
+    closeAll: () => void;
+};
+export {};
+//# sourceMappingURL=ModalManager.d.ts.map

package/fe/packages/ui/react/components/Modal/ModalManager.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../../i18n';
+import { createRoot } from 'react-dom/client';
+import { AsynchronousButton, Button } from '../Button';
+import { Modal } from './Modal';
+class ModalManagerClass {
+    modals = new Map();
+    listeners = new Set();
+    container = null;
+    root = null;
+    init() {
+        if (typeof document === 'undefined' || this.container)
+            return;
+        this.container = document.createElement('div');
+        this.container.id = 'modal-container';
+        document.body.appendChild(this.container);
+        // 创建 React 根节点
+        this.root = createRoot(this.container);
+        this.render();
+    }
+    notify() {
+        this.listeners.forEach((listener) => listener());
+        this.render();
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    open(config) {
+        this.init(); // 确保已初始化
+        const id = `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const modalConfig = {
+            ...config,
+            id,
+            onClose: () => {
+                config.onClose?.();
+                this.close(id);
+            },
+        };
+        this.modals.set(id, modalConfig);
+        this.notify();
+        return id;
+    }
+    close(id) {
+        this.modals.delete(id);
+        this.notify();
+    }
+    closeAll() {
+        this.modals.clear();
+        this.notify();
+    }
+    getModals() {
+        return Array.from(this.modals.values());
+    }
+    render() {
+        if (!this.root)
+            return;
+        const modals = this.getModals();
+        this.root.render(_jsx(_Fragment, { children: modals.map((modal) => (_jsx(Modal, { ...modal, open: true, children: modal.content }, modal.id))) }));
+    }
+}
+export const openConfirmModal = (pConfig) => {
+    const { onOk, onCancel, okText = t('components.modal.okText'), cancelText = t('components.modal.cancelText'), ...props } = pConfig;
+    const config = {
+        title: t('components.modal.confirmTitle'),
+        footer: (_jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: () => {
+                        onCancel?.();
+                        modalManager.close(currentModalId);
+                    }, 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 }), _jsx(AsynchronousButton, { variant: "primary", onClick: async (e) => {
+                        const result = await onOk?.(e);
+                        if (typeof result === 'boolean' && !result)
+                            return;
+                        modalManager.close(currentModalId);
+                    }, 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 })] })),
+        ...props,
+    };
+    const currentModalId = modalManager.open(config);
+    return currentModalId;
+};
+// 单例模式
+export const modalManager = new ModalManagerClass();
+// 函数式 API
+export const modal = {
+    open: (config) => modalManager.open(config),
+    confirm: openConfirmModal,
+    close: (id) => modalManager.close(id),
+    closeAll: () => modalManager.closeAll(),
+};

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

@@ -0,0 +1,4 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
+export { modal } from './ModalManager';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export { modal } from './ModalManager';

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

@@ -0,0 +1,23 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+export declare const canUseDocument: () => boolean;
+export type OverlayProps = {
+    open?: boolean;
+    visible?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    zIndex?: number;
+    mask?: boolean;
+    maskClosable?: boolean;
+    lockScroll?: boolean;
+    keyboard?: boolean;
+    closable?: boolean;
+    onClose?: () => void;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * @default document.body
+     */
+    renderNode?: HTMLElement | (() => HTMLElement);
+};
+export declare function Overlay({ open, visible, children, className, style, zIndex, mask, maskClosable, lockScroll, keyboard, closable, onClose, onClick, renderNode, }: OverlayProps): import("react").ReactPortal | null;
+//# sourceMappingURL=Overlay.d.ts.map

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+let bodyScrollLockCount = 0;
+let originalBodyOverflow = '';
+export const canUseDocument = () => typeof document !== 'undefined';
+const lockBodyScroll = () => {
+    if (!canUseDocument())
+        return () => { };
+    if (bodyScrollLockCount === 0) {
+        originalBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    bodyScrollLockCount += 1;
+    return () => {
+        bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+        if (bodyScrollLockCount === 0) {
+            document.body.style.overflow = originalBodyOverflow;
+            originalBodyOverflow = '';
+        }
+    };
+};
+export function Overlay({ open = false, visible = open, children, className, style, zIndex = 1000, mask = true, maskClosable = true, lockScroll = true, keyboard = true, closable = true, onClose, onClick, renderNode, }) {
+    useEffect(() => {
+        if (!open || !keyboard || !canUseDocument())
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && closable) {
+                onClose?.();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [open, closable, onClose, keyboard]);
+    useEffect(() => {
+        if (!open || !lockScroll)
+            return;
+        return lockBodyScroll();
+    }, [lockScroll, open]);
+    const handleMaskClick = (e) => {
+        onClick?.(e);
+        if (maskClosable && e.target === e.currentTarget) {
+            onClose?.();
+        }
+    };
+    if (!open || !canUseDocument())
+        return null;
+    const parent = typeof renderNode === 'function' ? renderNode() : (renderNode ?? document.body);
+    return createPortal(_jsx("div", { className: cn('tc-ui-overlay fixed inset-0 z-[1000]', mask && 'bg-black/50 backdrop-blur-sm', 'transition-opacity duration-200', visible ? 'opacity-100' : 'opacity-0', className), style: { zIndex, ...style }, onClick: handleMaskClick, children: children }), parent);
+}

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

@@ -0,0 +1,3 @@
+export { Overlay, canUseDocument } from './Overlay';
+export type { OverlayProps } from './Overlay';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+export { Overlay, canUseDocument } from './Overlay';

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

@@ -0,0 +1,18 @@
+export interface PaginationProps {
+    /** 当前页码 */
+    current: number;
+    /** 每页显示数量 */
+    pageSize: number;
+    /** 总数据量 */
+    total: number;
+    /** 页码改变回调 */
+    onChange: (page: number) => void;
+    /** 每页显示数量改变回调 */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** 每页显示数量选项 */
+    pageSizeOptions?: number[];
+    /** 自定义类名 */
+    className?: string;
+}
+export declare function Pagination({ current, pageSize, total, onChange, onPageSizeChange, pageSizeOptions, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1,88 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '../Button';
+import { Select } from '../Select';
+export function Pagination({ current, pageSize, total, onChange, onPageSizeChange, pageSizeOptions = [10, 20, 50, 100], className, }) {
+    const totalPages = Math.ceil(total / pageSize);
+    // 生成页码数组
+    const getPageNumbers = () => {
+        const pages = [];
+        const maxVisible = 7; // 最多显示7个页码
+        if (totalPages <= maxVisible) {
+            // 总页数少于等于7，显示所有页码
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            // 总页数大于7，需要省略
+            if (current <= 4) {
+                // 当前页在前面
+                for (let i = 1; i <= 5; i++) {
+                    pages.push(i);
+                }
+                pages.push('...');
+                pages.push(totalPages);
+            }
+            else if (current >= totalPages - 3) {
+                // 当前页在后面
+                pages.push(1);
+                pages.push('...');
+                for (let i = totalPages - 4; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            }
+            else {
+                // 当前页在中间
+                pages.push(1);
+                pages.push('...');
+                for (let i = current - 1; i <= current + 1; i++) {
+                    pages.push(i);
+                }
+                pages.push('...');
+                pages.push(totalPages);
+            }
+        }
+        return pages;
+    };
+    const handlePrevious = () => {
+        if (current > 1) {
+            onChange(current - 1);
+        }
+    };
+    const handleNext = () => {
+        if (current < totalPages) {
+            onChange(current + 1);
+        }
+    };
+    const handlePageClick = (page) => {
+        if (typeof page === 'number' && page !== current) {
+            onChange(page);
+        }
+    };
+    const handlePageSizeChange = (newPageSize) => {
+        if (newPageSize !== undefined && typeof newPageSize === 'number' && newPageSize !== pageSize && onPageSizeChange) {
+            onPageSizeChange(newPageSize);
+            // 当改变 pageSize 时，通常需要重置到第一页
+            if (current !== 1) {
+                onChange(1);
+            }
+        }
+    };
+    if (totalPages === 0)
+        return null;
+    return (_jsxs("div", { className: cn('tc-ui-pagination flex items-center gap-4', className), children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Total ", total] }), _jsxs("div", { className: "flex-1 flex items-center justify-center gap-2", children: [_jsx(Button, { onClick: handlePrevious, disabled: current === 1, size: "sm", className: cn('inline-flex items-center justify-center', 'h-8 px-3 rounded-md', 'text-sm font-medium', 'border border-border', 'transition-colors', current === 1 ? 'cursor-not-allowed opacity-50 bg-muted' : 'hover:bg-muted bg-background cursor-pointer'), children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), getPageNumbers().map((page, index) => {
+                        if (page === '...') {
+                            return (_jsx("span", { className: "px-2 text-muted-foreground", children: "..." }, `ellipsis-${index}`));
+                        }
+                        return (_jsx(Button, { onClick: () => handlePageClick(page), size: "sm", className: cn('inline-flex items-center justify-center', 'h-8 min-w-[32px] px-3 rounded-md', 'text-sm font-medium', 'border transition-colors', page === current
+                                ? 'bg-theme text-theme-foreground border-theme cursor-default'
+                                : 'bg-background border-border hover:bg-muted cursor-pointer'), children: page }, page));
+                    }), _jsx(Button, { onClick: handleNext, size: "sm", disabled: current === totalPages, className: cn('inline-flex items-center justify-center', 'h-8 px-3 rounded-md', 'text-sm font-medium', 'border border-border', 'transition-colors', current === totalPages
+                            ? 'cursor-not-allowed opacity-50 bg-muted'
+                            : 'hover:bg-muted bg-background cursor-pointer'), children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] }), onPageSizeChange && (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Select, { value: pageSize, onChange: handlePageSizeChange, options: pageSizeOptions.map((size) => ({
+                        label: `${size}`,
+                        value: size,
+                    })), className: "w-20 [&>div]:bg-muted [&>div]:border-border [&>div]:shadow-sm [&>div]:py-2 [&>div]:px-3 [&>div]:h-8", clearable: false, searchable: false }) }))] }));
+}

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

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

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

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