@_tc/template-core 0.0.1-bate.8 → 0.0.1-bate.9

package/{packages → fe/packages}/ui/react/components/Message/Message.d.ts

@@ -4,8 +4,15 @@ export type MessageProps = {
     type?: MessageType;
     content?: ReactNode;
     children?: ReactNode;
+    /**
+     * 存在时间
+     * @default 3000ms
+     */
     duration?: number;
     onClose?: () => void;
+    /**
+     * 可手动关闭
+     */
     closable?: boolean;
     className?: string;
 };

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { AlertCircle, CheckCircle2, Info, X, XCircle } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+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 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('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", { type: "button", onClick: handleClose, "aria-label": "\u5173\u95ED", 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/{packages → fe/packages}/ui/react/components/Message/MessageManager.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.message = exports.messageManager = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = require("react-dom/client");
-const Message_1 = require("./Message");
-const data_1 = require("./data");
+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;
@@ -15,19 +12,22 @@ class MessageManagerClass {
     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);
-        this.root = (0, client_1.createRoot)(this.container);
-        this.offScreenRoot = (0, client_1.createRoot)(this.offScreenContainer);
+        // 创建 React 根节点
+        this.root = createRoot(this.container);
+        this.offScreenRoot = createRoot(this.offScreenContainer);
         this.render();
     }
     render() {
@@ -35,14 +35,18 @@ class MessageManagerClass {
             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((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: displayMessages.map((message) => ((0, jsx_runtime_1.jsx)(Message_1.Message, { ...message, duration: message.expirationTime - now, content: message.content, onClose: () => {
+        // 渲染可见消息
+        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((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: offScreenMessages.map((message) => ((0, jsx_runtime_1.jsx)(Message_1.Message, { ...message, duration: message.expirationTime - now, content: message.content, onClose: () => {
+        // 渲染屏幕外消息
+        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))) }));
@@ -53,7 +57,7 @@ class MessageManagerClass {
         const id = `message-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const messageConfig = {
             ...config,
-            expirationTime: now + (config.duration ?? data_1.DEFAULT_DURATION),
+            expirationTime: now + (config.duration ?? DEFAULT_DURATION),
             id,
             type,
         };
@@ -73,13 +77,14 @@ class MessageManagerClass {
         this.maxCount = count;
     }
 }
-exports.messageManager = new MessageManagerClass();
-exports.message = {
-    success: (content, config) => exports.messageManager.show({ content, ...config }, 'success'),
-    error: (content, config) => exports.messageManager.show({ content, ...config }, 'error'),
-    warning: (content, config) => exports.messageManager.show({ content, ...config }, 'warning'),
-    info: (content, config) => exports.messageManager.show({ content, ...config }, 'info'),
-    close: (id) => exports.messageManager.close(id),
-    closeAll: () => exports.messageManager.closeAll(),
-    setMaxCount: (count) => exports.messageManager.setMaxCount(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.js

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

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

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

package/{packages → fe/packages}/ui/react/components/Modal/Modal.d.ts

@@ -12,7 +12,13 @@ export type ModalProps = {
     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, maskClosable, closable, width, centered, renderNode, keyboard, zIndex, }: ModalProps): import("react").ReactPortal | null;

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { X } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+export function Modal({ open = false, onClose, title, children, footer, className, contentClassName, maskClosable = true, closable = true, width = 520, centered = true, renderNode = document.body, keyboard = true, zIndex = 1000, }) {
+    const modalRef = useRef(null);
+    const contentRef = useRef(null);
+    // 处理 ESC 键关闭
+    useEffect(() => {
+        if (!open || !keyboard)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && closable) {
+                onClose?.();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [open, closable, onClose, keyboard]);
+    // 阻止 body 滚动
+    useEffect(() => {
+        if (open) {
+            const originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = originalOverflow;
+            };
+        }
+        else {
+            return () => { };
+        }
+    }, [open]);
+    // 点击遮罩层关闭
+    const handleMaskClick = (e) => {
+        if (maskClosable && e.target === e.currentTarget) {
+            onClose?.();
+        }
+    };
+    // 点击内容区域阻止冒泡
+    const handleContentClick = (e) => {
+        e.stopPropagation();
+    };
+    if (!open)
+        return null;
+    const modalContent = (_jsx("div", { ref: modalRef, className: cn('fixed inset-0 z-[1000] flex items-center justify-center', 'bg-black/50 backdrop-blur-sm', 'transition-opacity duration-200', open ? 'opacity-100' : 'opacity-0'), style: { zIndex }, onClick: handleMaskClick, children: _jsxs("div", { ref: contentRef, 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", { type: "button", onClick: onClose, "aria-label": "\u5173\u95ED", 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 })] }) }));
+    const parent = typeof renderNode === 'function' ? renderNode() : renderNode;
+    return createPortal(modalContent, parent);
+}

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

@@ -22,22 +22,34 @@ declare class ModalManagerClass {
 }
 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;

package/{packages → fe/packages}/ui/react/components/Modal/ModalManager.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.modal = exports.modalManager = exports.openConfirmModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const client_1 = require("react-dom/client");
-const Button_1 = require("../Button");
-const Modal_1 = require("./Modal");
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import { AsynchronousButton, Button } from '../Button';
+import { Modal } from './Modal';
 class ModalManagerClass {
     modals = new Map();
     listeners = new Set();
@@ -16,7 +13,8 @@ class ModalManagerClass {
         this.container = document.createElement('div');
         this.container.id = 'modal-container';
         document.body.appendChild(this.container);
-        this.root = (0, client_1.createRoot)(this.container);
+        // 创建 React 根节点
+        this.root = createRoot(this.container);
         this.render();
     }
     notify() {
@@ -30,7 +28,7 @@ class ModalManagerClass {
         };
     }
     open(config) {
-        this.init();
+        this.init(); // 确保已初始化
         const id = `modal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const modalConfig = {
             ...config,
@@ -59,32 +57,33 @@ class ModalManagerClass {
         if (!this.root)
             return;
         const modals = this.getModals();
-        this.root.render((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: modals.map((modal) => ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...modal, open: true, children: modal.content }, modal.id))) }));
+        this.root.render(_jsx(_Fragment, { children: modals.map((modal) => (_jsx(Modal, { ...modal, open: true, children: modal.content }, modal.id))) }));
     }
 }
-const openConfirmModal = (pConfig) => {
+export const openConfirmModal = (pConfig) => {
     const { onOk, onCancel, okText = '确认', cancelText = '取消', ...props } = pConfig;
     const config = {
         title: '提示',
-        footer: ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-3", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => {
+        footer: (_jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: () => {
                         onCancel?.();
-                        exports.modalManager.close(currentModalId);
-                    }, className: "min-w-[100px] bg-white border-[hsl(var(--theme-primary))] text-[hsl(var(--theme-primary))] hover:bg-[hsl(var(--theme-primary))]/5", children: cancelText }), (0, jsx_runtime_1.jsx)(Button_1.AsynchronousButton, { variant: "primary", onClick: async (e) => {
+                        modalManager.close(currentModalId);
+                    }, className: "min-w-[100px] bg-white 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;
-                        exports.modalManager.close(currentModalId);
+                        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 = exports.modalManager.open(config);
+    const currentModalId = modalManager.open(config);
     return currentModalId;
 };
-exports.openConfirmModal = openConfirmModal;
-exports.modalManager = new ModalManagerClass();
-exports.modal = {
-    open: (config) => exports.modalManager.open(config),
-    confirm: exports.openConfirmModal,
-    close: (id) => exports.modalManager.close(id),
-    closeAll: () => exports.modalManager.closeAll(),
+// 单例模式
+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.js

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

package/{packages → fe/packages}/ui/react/components/Pagination.d.ts

@@ -1,10 +1,17 @@
 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;

package/{packages → fe/packages}/ui/react/components/Pagination.js

@@ -1,23 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = Pagination;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../lib/utils");
-const lucide_react_1 = require("lucide-react");
-const Button_1 = require("./Button");
-const Select_1 = require("./Select");
-function Pagination({ current, pageSize, total, onChange, onPageSizeChange, pageSizeOptions = [10, 20, 50, 100], className, }) {
+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;
+        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);
                 }
@@ -25,6 +26,7 @@ function Pagination({ current, pageSize, total, onChange, onPageSizeChange, page
                 pages.push(totalPages);
             }
             else if (current >= totalPages - 3) {
+                // 当前页在后面
                 pages.push(1);
                 pages.push('...');
                 for (let i = totalPages - 4; i <= totalPages; i++) {
@@ -32,6 +34,7 @@ function Pagination({ current, pageSize, total, onChange, onPageSizeChange, page
                 }
             }
             else {
+                // 当前页在中间
                 pages.push(1);
                 pages.push('...');
                 for (let i = current - 1; i <= current + 1; i++) {
@@ -61,6 +64,7 @@ function Pagination({ current, pageSize, total, onChange, onPageSizeChange, page
     const handlePageSizeChange = (newPageSize) => {
         if (newPageSize !== undefined && typeof newPageSize === 'number' && newPageSize !== pageSize && onPageSizeChange) {
             onPageSizeChange(newPageSize);
+            // 当改变 pageSize 时，通常需要重置到第一页
             if (current !== 1) {
                 onChange(1);
             }
@@ -68,16 +72,16 @@ function Pagination({ current, pageSize, total, onChange, onPageSizeChange, page
     };
     if (totalPages === 0)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center gap-4', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-muted-foreground", children: ["Total ", total] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handlePrevious, disabled: current === 1, size: "sm", className: (0, utils_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "h-4 w-4" }) }), getPageNumbers().map((page, index) => {
+    return (_jsxs("div", { className: cn('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 ((0, jsx_runtime_1.jsx)("span", { className: "px-2 text-muted-foreground", children: "..." }, `ellipsis-${index}`));
+                            return (_jsx("span", { className: "px-2 text-muted-foreground", children: "..." }, `ellipsis-${index}`));
                         }
-                        return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => handlePageClick(page), size: "sm", className: (0, utils_1.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
+                        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));
-                    }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleNext, size: "sm", disabled: current === totalPages, className: (0, utils_1.cn)('inline-flex items-center justify-center', 'h-8 px-3 rounded-md', 'text-sm font-medium', 'border border-border', 'transition-colors', current === totalPages
+                    }), _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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" }) })] }), onPageSizeChange && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: (0, jsx_runtime_1.jsx)(Select_1.Select, { value: pageSize, onChange: handlePageSizeChange, options: pageSizeOptions.map((size) => ({
+                            : '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/{packages → fe/packages}/ui/react/components/Search/Search.d.ts

@@ -6,6 +6,9 @@ export type SearchProps<T> = {
     defaultValue?: T;
     schemes: MOmit<FormFieldScheme<T>, 'rules' | 'required'>[];
     children?: ReactNode;
+    /**
+     * 获取表单实例的回调
+     */
     getForm?: (form: FormInstance<T>) => void;
     btnsClassName?: string;
 };

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { useMemo } from 'react';
+import { SchemeForm } from '../Form';
+const Search = (props) => {
+    const { defaultValue: pDefaultValue, schemes, children, getForm, btnsClassName } = props;
+    const defaultValue = useMemo(() => {
+        return pDefaultValue;
+    }, []);
+    return (_jsxs("div", { className: "flex items-end justify-between gap-4 flex-wrap", children: [_jsx(SchemeForm, { preserve: true, layout: "horizontal", schemes: schemes, initialValues: defaultValue, getForm: getForm, footerButtons: false }), _jsx("div", { className: cn('flex items-center gap-2 self-end ml-auto flex-wrap', btnsClassName), children: children })] }));
+};
+export default Search;

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

@@ -0,0 +1 @@
+export { default as Search } from './Search';

package/{packages → fe/packages}/ui/react/components/Select/Select.d.ts

@@ -11,7 +11,9 @@ export type SelectProps = {
     onChange?: (value: string | number | undefined) => void;
     className?: string;
     disabled?: boolean;
+    /** 开启清除 默认开启*/
     clearable?: boolean;
+    /** 是否支持搜索 默认开启 */
     searchable?: boolean;
 };
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;