@_tc/template-core 0.0.1-bate.1 → 0.0.1-bate.10

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export type ModalProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    maskClosable?: 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, maskClosable, closable, width, centered, renderNode, keyboard, zIndex, }: ModalProps): import("react").ReactPortal | null;
+//# sourceMappingURL=Modal.d.ts.map

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/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,89 @@
+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();
+    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 = '确认', cancelText = '取消', ...props } = pConfig;
+    const config = {
+        title: '提示',
+        footer: (_jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: () => {
+                        onCancel?.();
+                        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;
+                        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/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.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('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/Search/Search.d.ts

@@ -0,0 +1,17 @@
+import type { MOmit } from '../../types';
+import type { FormInstance } from 'rc-field-form';
+import { type ReactNode } from 'react';
+import { type FormFieldScheme } from '../Form';
+export type SearchProps<T> = {
+    defaultValue?: T;
+    schemes: MOmit<FormFieldScheme<T>, 'rules' | 'required'>[];
+    children?: ReactNode;
+    /**
+     * 获取表单实例的回调
+     */
+    getForm?: (form: FormInstance<T>) => void;
+    btnsClassName?: string;
+};
+declare const Search: <T extends object>(props: SearchProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Search;
+//# sourceMappingURL=Search.d.ts.map

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.d.ts

@@ -0,0 +1,2 @@
+export { default as Search } from './Search';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export type SelectOption = {
+    label: React.ReactNode;
+    value: string | number;
+};
+export type SelectProps = {
+    options: SelectOption[];
+    value?: string | number;
+    defaultValue?: string | number;
+    placeholder?: string;
+    onChange?: (value: string | number | undefined) => void;
+    className?: string;
+    disabled?: boolean;
+    /** 开启清除 默认开启*/
+    clearable?: boolean;
+    /** 是否支持搜索 默认开启 */
+    searchable?: boolean;
+};
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+export { Select };
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { ChevronUp, X } from 'lucide-react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+const Select = forwardRef(({ options, value: controlledValue, defaultValue, placeholder, onChange, className, disabled, clearable = true, searchable = true, }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [isHover, setIsHover] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+    const selectRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const inputRef = useRef(null);
+    // 合并 refs
+    const setRefs = useCallback((node) => {
+        selectRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    // 获取当前选中的选项
+    const selectedOption = options.find((opt) => opt.value === value);
+    const displayText = selectedOption ? selectedOption.label : placeholder || '';
+    const filteredOptions = useMemo(() => {
+        if (!searchable || !searchTerm.trim())
+            return options;
+        const lower = searchTerm.trim().toLowerCase();
+        return options.filter((opt) => String(opt.label).toLowerCase().includes(lower));
+    }, [options, searchTerm, searchable]);
+    // 点击其他区域关闭
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            // 点击不在 选择部分 以及 下拉部分 关闭下拉
+            if (selectRef.current &&
+                !selectRef.current.contains(event.target) &&
+                dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    // 键盘关闭
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape' && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen]);
+    // 计算下拉菜单位置和方向
+    const updatePosition = useCallback(() => {
+        if (!selectRef.current)
+            return;
+        const rect = selectRef.current.getBoundingClientRect();
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
+        const viewportHeight = window.innerHeight;
+        // 获取实际下拉菜单高度，如果还未渲染则使用估算值
+        let dropdownHeight = 240; // 默认最大高度 max-h-60
+        if (dropdownRef.current) {
+            dropdownHeight = dropdownRef.current.getBoundingClientRect().height;
+        }
+        else {
+            // 估算下拉菜单高度（最大高度为 240px，即 max-h-60）
+            dropdownHeight = Math.min(filteredOptions.length * 40 + 8, 240); // 每个选项约40px + padding
+        }
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        // 决定向上还是向下展开
+        const shouldPlaceTop = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+        // 计算位置
+        let top;
+        if (shouldPlaceTop) {
+            // 向上展开：下拉菜单底部对齐触发器顶部
+            top = rect.top + scrollY - dropdownHeight - 4; // 4px 间距
+        }
+        else {
+            // 向下展开：下拉菜单顶部对齐触发器底部
+            top = rect.bottom + scrollY + 4; // 4px 间距
+        }
+        // 确保不超出视口
+        if (top < scrollY) {
+            top = scrollY + 4;
+        }
+        if (top + dropdownHeight > scrollY + viewportHeight) {
+            top = scrollY + viewportHeight - dropdownHeight - 4;
+        }
+        setPosition({
+            top,
+            left: rect.left + scrollX,
+            width: rect.width,
+        });
+    }, [filteredOptions.length]);
+    // 展开时更新位置并获取焦点
+    useEffect(() => {
+        if (isOpen) {
+            // 使用双重 requestAnimationFrame 确保 DOM 已完全渲染
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    updatePosition();
+                    if (searchable) {
+                        inputRef.current?.focus();
+                    }
+                });
+            });
+        }
+    }, [isOpen, searchable, updatePosition]);
+    // 监听滚动和窗口大小变化，更新位置
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleUpdate = () => {
+            updatePosition();
+        };
+        window.addEventListener('scroll', handleUpdate, true);
+        window.addEventListener('resize', handleUpdate);
+        return () => {
+            window.removeEventListener('scroll', handleUpdate, true);
+            window.removeEventListener('resize', handleUpdate);
+        };
+    }, [isOpen, updatePosition]);
+    const handleToggle = useCallback(() => {
+        if (disabled)
+            return;
+        setIsOpen((prev) => {
+            const next = !prev;
+            if (next && searchable) {
+                setSearchTerm('');
+            }
+            return next;
+        });
+    }, [disabled, searchable]);
+    const handleSelect = useCallback((optionValue) => {
+        if (!isControlled) {
+            setInternalValue(optionValue);
+        }
+        onChange?.(optionValue);
+        setIsOpen(false);
+    }, [isControlled, onChange]);
+    const handleClear = useCallback((event) => {
+        event.stopPropagation();
+        if (disabled)
+            return;
+        // 清除时 重置内外状态
+        setInternalValue(undefined);
+        onChange?.(undefined);
+    }, [disabled, onChange]);
+    const handleSearchChange = useCallback((event) => {
+        setSearchTerm(event.target.value);
+    }, []);
+    return (_jsxs("div", { className: cn('relative', className), children: [_jsxs("div", { ref: setRefs, onClick: handleToggle, onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), className: cn('flex w-full items-center justify-between rounded-lg px-4 py-3 text-sm', 'border transition-colors duration-200', 'focus:outline-none', disabled ? 'cursor-not-allowed bg-muted border-border' : 'cursor-pointer bg-background', !disabled && isOpen && 'border-theme', !disabled && !isOpen && 'border-border'), children: [searchable && isOpen ? (_jsx("input", { ref: inputRef, value: searchTerm, onChange: handleSearchChange, onClick: (e) => e.stopPropagation(), placeholder: typeof displayText === 'string' ? displayText : placeholder, className: cn('flex-1 bg-transparent outline-none text-left', 'placeholder:text-muted-foreground', disabled && 'text-muted-foreground cursor-not-allowed'), disabled: disabled })) : (_jsx("span", { className: cn('flex-1 text-left truncate', disabled ? 'text-muted-foreground' : !selectedOption && 'text-muted-foreground'), children: displayText })), clearable && !disabled && value !== undefined && isHover ? (_jsx("button", { type: "button", onClick: handleClear, className: "ml-2 flex items-center justify-center text-muted-foreground hover:text-foreground", "aria-label": "Clear selection", title: "Clear", children: _jsx(X, { size: 14 }) })) : (_jsx(ChevronUp, { size: 16, className: cn('ml-2 transition-transform duration-200', isOpen ? 'rotate-0' : 'rotate-180') }))] }), isOpen &&
+                createPortal(_jsx("div", { ref: dropdownRef, className: cn('fixed z-[1000] w-full rounded-lg bg-background shadow-lg', 'border border-border', 'max-h-60 overflow-auto'), style: {
+                        top: `${position.top}px`,
+                        left: `${position.left}px`,
+                        width: `${position.width}px`,
+                    }, children: _jsx("div", { className: "p-1", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+                            const isSelected = option.value === value;
+                            return (_jsx("div", { onClick: () => handleSelect(option.value), className: cn('px-4 py-2 text-sm cursor-pointer transition-colors rounded-md', 'hover:bg-muted', isSelected && 'bg-muted'), children: option.label }, option.value));
+                        })) : (_jsx("div", { className: "px-4 py-2 text-sm text-muted-foreground text-center", children: "\u6682\u65E0\u9009\u9879" })) }) }), document.body)] }));
+});
+Select.displayName = 'Select';
+export { Select };

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

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

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

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

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

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from 'react';
+export type SkeletonMode = 'pageloading' | 'tableloading' | 'componentsloading';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 骨架屏模式
+     * @default 'componentsloading'
+     */
+    mode?: SkeletonMode;
+    /**
+     * 行数（仅对 pageloading 和 tableloading 有效）
+     */
+    rows?: number;
+    /**
+     * 是否显示标题骨架（仅对 pageloading 有效）
+     * @default true
+     */
+    showTitle?: boolean;
+    /**
+     * 是否显示操作栏骨架（仅对 pageloading 有效）
+     * @default true
+     */
+    showActions?: boolean;
+}
+export declare const Skeleton: {
+    ({ mode, className, rows, showTitle, showActions, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Skeleton.d.ts.map