@_tc/template-core 0.0.1 → 0.0.2

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

@@ -0,0 +1,26 @@
+import type { CSSProperties, ReactNode, RefObject } from "react";
+import { type DropdownPlacement, type DropdownPosition, type DropdownPositioningStrategy, type UseDropdownPositioningResult } from "../hooks/useDropdownPositioning";
+export interface PopupProps {
+    open: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    placement?: DropdownPlacement;
+    offset?: number;
+    keepMounted?: boolean;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    matchAnchorWidth?: boolean;
+    position?: DropdownPosition;
+    positioning?: UseDropdownPositioningResult;
+    strategy?: DropdownPositioningStrategy;
+    contentRef?: RefObject<HTMLDivElement | null>;
+    container?: HTMLElement;
+    positionMode?: "fixed" | "absolute";
+    hoverBridge?: number;
+    hoverBridgePlacement?: "auto" | "horizontal";
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Popup({ open, anchorRef, children, className, style, placement, offset, keepMounted, closeOnClickOutside, closeOnEscape, matchAnchorWidth, position, positioning, strategy, contentRef, container, positionMode, hoverBridge, hoverBridgePlacement, onOpenChange, }: PopupProps): import("react").ReactPortal | null;
+//# sourceMappingURL=Popup.d.ts.map

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { getDefaultDropdownPosition, useDropdownPositioning, } from "../hooks/useDropdownPositioning";
+const DEFAULT_POPUP_CLASSNAME = cn("fixed z-[9999]", "bg-background rounded-lg shadow-lg border border-gray-200", "animate-in fade-in-0 zoom-in-95");
+const canUseDocument = () => typeof document !== "undefined";
+export function Popup({ open, anchorRef, children, className, style, placement = "bottom-end", offset = 8, keepMounted = false, closeOnClickOutside = true, closeOnEscape = true, matchAnchorWidth = false, position, positioning, strategy = getDefaultDropdownPosition, contentRef, container, positionMode = "fixed", hoverBridge = 0, hoverBridgePlacement = "auto", onOpenChange, }) {
+    // 默认自己保存弹窗 DOM；如果外部传了 contentRef，就用外部的。
+    const internalContentRef = useRef(null);
+    const panelRef = contentRef ?? internalContentRef;
+    const containerRef = useMemo(() => ({ current: container ?? null }), [container]);
+    // 默认用 useDropdownPositioning 算位置；也允许外部直接传 position 或 positioning 接管。
+    const internalPositioning = useDropdownPositioning({
+        open,
+        anchorRef,
+        contentRef: panelRef,
+        placement,
+        offset,
+        matchAnchorWidth,
+        strategy,
+        containerRef,
+        positionMode,
+    });
+    const resolvedPositioning = position
+        ? null
+        : (positioning ?? internalPositioning);
+    useEffect(() => {
+        if (!open || !closeOnClickOutside)
+            return;
+        // 点到触发元素和弹窗外面，就通知外部关闭。
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            const clickedAnchor = anchorRef.current?.contains(target);
+            const clickedPanel = panelRef.current?.contains(target);
+            if (!clickedAnchor && !clickedPanel) {
+                onOpenChange?.(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [anchorRef, closeOnClickOutside, onOpenChange, open, panelRef]);
+    useEffect(() => {
+        if (!open || !closeOnEscape)
+            return;
+        // 按 Esc 时关闭，常见弹窗交互都需要这个。
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onOpenChange?.(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [closeOnEscape, onOpenChange, open]);
+    const mergedStyle = useMemo(() => ({
+        // 定位样式优先来自 hook，也可以被外部 position/style 覆盖。
+        ...resolvedPositioning?.position,
+        ...position,
+        ...style,
+    }), [position, resolvedPositioning?.position, style]);
+    // hoverBridge 是透明桥。鼠标从触发元素移动到弹窗时，中间有间距也不会断 hover。
+    const showHorizontalHoverBridge = hoverBridge > 0 &&
+        (placement.startsWith("right") || placement.startsWith("left"));
+    const showBothHorizontalHoverBridges = showHorizontalHoverBridge && hoverBridgePlacement === "horizontal";
+    if (!keepMounted && !open) {
+        // 不需要常驻 DOM 时，关闭就不渲染。
+        return null;
+    }
+    const portalContainer = container ?? (canUseDocument() ? document.body : undefined);
+    if (!portalContainer) {
+        return null;
+    }
+    // 用 portal 把弹窗挂到指定容器；没传 container 就挂到 body。
+    return createPortal(_jsxs("div", { ref: panelRef, className: cn("tc-ui-popup", DEFAULT_POPUP_CLASSNAME, positionMode === "absolute" && "absolute", !resolvedPositioning?.ready && "invisible", keepMounted && !open && "hidden", className), style: mergedStyle, children: [hoverBridge > 0 && (
+            // 默认只补当前 placement 方向上的透明桥。
+            _jsx("div", { "aria-hidden": "true", className: cn("absolute bg-transparent", placement.startsWith("bottom") && "left-0 right-0 top-0 -translate-y-full", placement.startsWith("top") && "bottom-0 left-0 right-0 translate-y-full", placement.startsWith("right") && "bottom-0 left-0 top-0 -translate-x-full", placement.startsWith("left") && "bottom-0 right-0 top-0 translate-x-full"), style: placement.startsWith("right") || placement.startsWith("left")
+                    ? { width: hoverBridge }
+                    : { height: hoverBridge } })), showBothHorizontalHoverBridges && (
+            // 横向弹窗可能动态从右改到左，这里左右都补桥，避免鼠标移过去时弹窗关闭。
+            _jsx("div", { "aria-hidden": "true", className: "absolute bottom-0 right-0 top-0 translate-x-full bg-transparent", style: { width: hoverBridge } })), children] }), portalContainer);
+}

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

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

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

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

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 FormFieldSchema } from '../Form';
+export type SearchProps<T> = {
+    defaultValue?: T;
+    schemas: MOmit<FormFieldSchema<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 { SchemaForm } from '../Form';
+const Search = (props) => {
+    const { defaultValue: pDefaultValue, schemas, children, getForm, btnsClassName } = props;
+    const defaultValue = useMemo(() => {
+        return pDefaultValue;
+    }, []);
+    return (_jsxs("div", { className: "tc-ui-search flex items-end justify-between gap-4 flex-wrap", children: [_jsx(SchemaForm, { preserve: true, layout: "horizontal", schemas: schemas, 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,26 @@
+import React from 'react';
+export type SelectOption = {
+    /** 展示内容；传 ReactNode 时建议同时提供 searchText 用于搜索 */
+    label: React.ReactNode;
+    value: string | number;
+    /** 搜索文本；优先级高于 label */
+    searchText?: string;
+};
+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;
+    /** 自定义弹出容器，传 parent 时挂载到当前 Select 的父元素，不传则默认挂载到 document.body */
+    getPopupContainer?: 'parent' | (() => HTMLElement);
+};
+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,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
+import { cn } from '../../lib/utils';
+import { ChevronUp, X } from 'lucide-react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { Popup } from '../Popup';
+import { useDropdownPositioning } from '../hooks/useDropdownPositioning';
+import { getSelectDropdownPosition } from './dropdownPositioning';
+const Select = forwardRef(({ options, value: controlledValue, defaultValue, placeholder, onChange, className, disabled, clearable = true, searchable = true, getPopupContainer, }, ref) => {
+    const t = useI18n();
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [isHover, setIsHover] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const rootRef = useRef(null);
+    const selectRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const inputRef = useRef(null);
+    const popupContainerRef = useRef(null);
+    const isParentPopupContainer = getPopupContainer === 'parent';
+    popupContainerRef.current = isParentPopupContainer ? (rootRef.current?.parentElement ?? null) : null;
+    useEffect(() => {
+        if (!isParentPopupContainer)
+            return;
+        const container = rootRef.current?.parentElement;
+        popupContainerRef.current = container ?? null;
+        if (!container || window.getComputedStyle(container).position !== 'static')
+            return;
+        const previousPosition = container.style.position;
+        container.style.position = 'relative';
+        return () => {
+            container.style.position = previousPosition;
+        };
+    }, [isParentPopupContainer]);
+    // 合并 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) => {
+            const searchText = opt.searchText ??
+                (typeof opt.label === 'string' || typeof opt.label === 'number' ? String(opt.label) : '');
+            return searchText.toLowerCase().includes(lower);
+        });
+    }, [options, searchTerm, searchable]);
+    const positioning = useDropdownPositioning({
+        open: isOpen,
+        anchorRef: selectRef,
+        contentRef: dropdownRef,
+        placement: 'bottom-start',
+        offset: 4,
+        matchAnchorWidth: true,
+        strategy: getSelectDropdownPosition,
+        estimateSize: () => ({
+            height: Math.min(filteredOptions.length * 40 + 8, 240),
+        }),
+        watchDeps: [filteredOptions.length, searchTerm, searchable],
+        containerRef: isParentPopupContainer ? popupContainerRef : undefined,
+        positionMode: isParentPopupContainer ? 'absolute' : 'fixed',
+    });
+    // 展开时更新位置并获取焦点
+    useEffect(() => {
+        if (isOpen) {
+            requestAnimationFrame(() => {
+                if (searchable) {
+                    inputRef.current?.focus();
+                }
+            });
+        }
+    }, [isOpen, searchable]);
+    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);
+    }, []);
+    const popupContainer = getPopupContainer === 'parent' ? (rootRef.current?.parentElement ?? undefined) : getPopupContainer?.();
+    return (_jsxs("div", { ref: rootRef, className: cn('tc-ui-select relative w-full', 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: (_, e) => handleSearchChange(e), onClick: (e) => e.stopPropagation(), placeholder: typeof displayText === 'string' ? displayText : placeholder, className: "min-w-0 flex-1", inputClassName: cn('h-5 min-w-0 flex-1 rounded-none border-0 bg-transparent px-0 py-0 text-left leading-5 outline-none', 'placeholder:text-muted-foreground', disabled && 'text-muted-foreground cursor-not-allowed'), disabled: disabled })) : (_jsx("span", { className: cn('min-h-5 min-w-0 flex-1 text-left truncate leading-5', disabled ? 'text-muted-foreground' : !selectedOption && 'text-muted-foreground'), children: displayText })), clearable && !disabled && value !== undefined && isHover ? (_jsx(Button, { variant: "text", type: "button", onClick: handleClear, className: "ml-2 flex items-center justify-center text-muted-foreground hover:text-foreground cursor-pointer", "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') }))] }), _jsx(Popup, { open: isOpen, anchorRef: selectRef, contentRef: dropdownRef, positioning: positioning, keepMounted: true, onOpenChange: setIsOpen, container: popupContainer, positionMode: isParentPopupContainer ? 'absolute' : 'fixed', className: cn('z-[1000] w-full rounded-lg bg-background shadow-lg', 'border border-border', 'max-h-60 overflow-auto'), children: _jsx("div", { className: cn('w-full', !isOpen && 'hidden'), 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: t('components.select.empty') })) }) }) })] }));
+});
+Select.displayName = 'Select';
+export { Select };

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

@@ -0,0 +1,3 @@
+import type { DropdownPositioningStrategy } from '../hooks/useDropdownPositioning';
+export declare const getSelectDropdownPosition: DropdownPositioningStrategy;
+//# sourceMappingURL=dropdownPositioning.d.ts.map

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

@@ -0,0 +1,13 @@
+export const getSelectDropdownPosition = ({ anchorRect, contentRect, containerRect, viewportHeight, offset, matchAnchorWidth, }) => {
+    const dropdownHeight = contentRect?.height ?? 240;
+    const spaceBelow = viewportHeight - anchorRect.bottom;
+    const spaceAbove = anchorRect.top;
+    const shouldPlaceTop = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+    const containerTop = containerRect?.top ?? 0;
+    const containerLeft = containerRect?.left ?? 0;
+    return {
+        top: (shouldPlaceTop ? anchorRect.top - dropdownHeight - offset : anchorRect.bottom + offset) - containerTop,
+        left: anchorRect.left - containerLeft,
+        width: matchAnchorWidth ? anchorRect.width : undefined,
+    };
+};

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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+const SkeletonItem = ({ className, ...props }) => (_jsx("div", { className: cn('animate-pulse rounded bg-gray-200/60 dark:bg-gray-700/60', className), ...props }));
+const SkeletonText = ({ width = '100%', className }) => (_jsx(SkeletonItem, { className: cn('h-4', className), style: { width: typeof width === 'number' ? `${width}px` : width } }));
+const PageLoadingSkeleton = ({ rows = 5, showTitle = true, showActions = true }) => {
+    return (_jsxs("div", { className: "w-full space-y-6 p-6", children: [showTitle && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(SkeletonItem, { className: "h-8 w-48" }), showActions && (_jsxs("div", { className: "flex gap-3", children: [_jsx(SkeletonItem, { className: "h-10 w-24" }), _jsx(SkeletonItem, { className: "h-10 w-24" })] }))] })), _jsxs("div", { className: "flex gap-4", children: [_jsx(SkeletonItem, { className: "h-10 flex-1" }), _jsx(SkeletonItem, { className: "h-10 w-24" }), _jsx(SkeletonItem, { className: "h-10 w-24" })] }), _jsx("div", { className: "space-y-4", children: Array.from({ length: rows }).map((_, index) => (_jsxs("div", { className: "flex gap-4", children: [_jsx(SkeletonItem, { className: "h-20 flex-1" }), _jsx(SkeletonItem, { className: "h-20 w-32" }), _jsx(SkeletonItem, { className: "h-20 w-32" })] }, index))) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(SkeletonItem, { className: "h-4 w-32" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(SkeletonItem, { className: "h-8 w-8" }), _jsx(SkeletonItem, { className: "h-8 w-8" }), _jsx(SkeletonItem, { className: "h-8 w-8" })] })] })] }));
+};
+const TableLoadingSkeleton = ({ rows = 5 }) => {
+    const columnCount = 6; // 默认列数，可以根据需要调整
+    return (_jsx("div", { className: "w-full", children: _jsx("div", { className: "bg-background rounded-[20px] overflow-hidden", children: _jsxs(Table, { containerClassName: "rounded-b-none", children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, index) => (_jsx(TableHead, { children: _jsx(SkeletonText, { width: index === 0 ? 120 : index === columnCount - 1 ? 80 : 150 }) }, index))) }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => (_jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, colIndex) => (_jsx(TableCell, { children: colIndex === columnCount - 1 ? (_jsxs("div", { className: "flex gap-2", children: [_jsx(SkeletonItem, { className: "h-8 w-16" }), _jsx(SkeletonItem, { className: "h-8 w-16" })] })) : (_jsx(SkeletonText, { width: colIndex === 0 ? 120 : colIndex === 1 ? '80%' : 150 })) }, colIndex))) }, rowIndex))) })] }) }) }));
+};
+const ComponentsLoadingSkeleton = ({ rows = 3 }) => {
+    return (_jsx("div", { className: "w-full space-y-3", children: Array.from({ length: rows }).map((_, index) => (_jsx(SkeletonItem, { className: "h-4 w-full" }, index))) }));
+};
+export const Skeleton = ({ mode = 'componentsloading', className, rows, showTitle, showActions, ...props }) => {
+    const renderSkeleton = () => {
+        switch (mode) {
+            case 'pageloading':
+                return _jsx(PageLoadingSkeleton, { rows: rows, showTitle: showTitle, showActions: showActions });
+            case 'tableloading':
+                return _jsx(TableLoadingSkeleton, { rows: rows });
+            case 'componentsloading':
+                return _jsx(ComponentsLoadingSkeleton, { rows: rows });
+            default:
+                return _jsx(ComponentsLoadingSkeleton, { rows: rows });
+        }
+    };
+    return (_jsx("div", { className: cn('tc-ui-skeleton w-full', className), ...props, children: renderSkeleton() }));
+};
+Skeleton.displayName = 'Skeleton';

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

@@ -0,0 +1,3 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonMode } from './Skeleton';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export type SwitchProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+};
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import React, { forwardRef } from 'react';
+const Switch = forwardRef(({ checked: controlledChecked, defaultChecked, onChange, disabled, className }, ref) => {
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked || false);
+    const isControlled = controlledChecked !== undefined;
+    const checked = isControlled ? controlledChecked : internalChecked;
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        const newChecked = !checked;
+        if (!isControlled) {
+            setInternalChecked(newChecked);
+        }
+        onChange?.(newChecked);
+    };
+    return (_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, disabled: disabled, onClick: handleToggle, className: cn('tc-ui-switch relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', disabled && 'cursor-not-allowed opacity-50', !disabled && 'cursor-pointer', checked
+            ? 'bg-[hsl(var(--ring))] dark:bg-[hsl(var(--ring))]'
+            : 'bg-muted dark:bg-muted', className), children: _jsx("span", { className: cn('inline-block h-4 w-4 transform rounded-full bg-background transition-transform duration-200', checked ? 'translate-x-6' : 'translate-x-1') }) }));
+});
+Switch.displayName = 'Switch';
+export { Switch };

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

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

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

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

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

@@ -0,0 +1,68 @@
+import { ExportType } from '../../lib/export';
+import type { MOmit } from '../../types';
+import { type ReactNode } from 'react';
+import { type DropdownItem } from '../Dropdown';
+import type { FormFieldSchema } from '../Form';
+import type { SearchProps } from '../Search/Search';
+export type TableSearchSchema<T> = MOmit<FormFieldSchema<T>, 'rules' | 'required'> & {
+    /**
+     * - 字段是否常驻
+     * - 如果都没有则去前四个
+     */
+    isPermanent?: boolean;
+};
+type TableSearchProps<T> = MOmit<SearchProps<T>, 'children' | 'schemas'> & {
+    onSearch?: (values: T) => void;
+    onReset?: () => void;
+    renderActionBtnArea?: () => ReactNode;
+    schemas: TableSearchSchema<T>[];
+    /**
+     * 导出Excel按钮的下拉菜单项
+     */
+    exportMenuItems?: DropdownItem[];
+    btnConfig?: Partial<{
+        /**
+         * 导出Excel按钮的文案
+         */
+        export?: ReactNode;
+        /**
+         * 收起按钮的文案
+         */
+        collapse?: ReactNode;
+        /**
+         * 展开按钮的icon
+         */
+        expandIcon?: ReactNode;
+        /**
+         * 展开按钮的文案
+         */
+        expand?: ReactNode;
+        /**
+         * 重置按钮的文案
+         */
+        reset?: ReactNode;
+        /**
+         * 查询按钮的文案
+         */
+        search?: ReactNode;
+    }>;
+    /**
+     * 备选边界
+     */
+    expandBoundaries?: number;
+    /**
+     *
+     * @param exportType 导出类型
+     * @param searchData 当前查询条件
+     * @returns
+     */
+    onExport?: (exportType: ExportType, searchData: T) => void;
+    additionalButtons?: ReactNode;
+    /**
+     * 默认是否展开 @default true
+     */
+    defaultExpand?: boolean;
+};
+declare const TableSearch: <T extends object>(props: TableSearchProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TableSearch;
+//# sourceMappingURL=TableSearch.d.ts.map

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

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExportType } from '../../lib/export';
+import { cn } from '../../lib/utils';
+import { ChevronDown } from 'lucide-react';
+import { useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { Dropdown } from '../Dropdown';
+import { Search } from '../Search';
+import { useTableSearchLocaleStore } from './tableSearchLocaleStore';
+const EXPAND_BOUNDARIES = 4;
+const TableSearch = (props) => {
+    const { onSearch, onReset, exportMenuItems, btnConfig: PBtnText, expandBoundaries = EXPAND_BOUNDARIES, schemas, onExport, additionalButtons, defaultExpand = true, renderActionBtnArea, ...searchProps } = props;
+    const formRef = useRef(undefined);
+    const [isExpanded, setIsExpanded] = useState(defaultExpand);
+    const handleSearch = () => {
+        const values = formRef.current?.getFieldsValue();
+        onSearch?.(values);
+    };
+    const handleReset = () => {
+        formRef.current?.resetFields();
+        if (onReset) {
+            onReset();
+        }
+    };
+    const handleExpand = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const locale = useTableSearchLocaleStore((state) => state.locale);
+    const defaultExportItems = useMemo(() => exportMenuItems || [
+        {
+            key: 'export-current-page',
+            label: locale.exportCurrentPage,
+            onClick: () => {
+                const values = formRef.current?.getFieldsValue();
+                onExport?.(ExportType.current, values);
+            },
+        },
+        {
+            key: 'export-current-query',
+            label: locale.exportCurrentQuery,
+            onClick: () => {
+                const values = formRef.current?.getFieldsValue();
+                onExport?.(ExportType.all, values);
+            },
+        },
+    ], [exportMenuItems, locale.exportCurrentPage, locale.exportCurrentQuery, onExport]);
+    const btnConfig = useMemo(() => {
+        const resetBtn = PBtnText?.reset || locale.reset;
+        const searchBtn = PBtnText?.search || locale.search;
+        const exportBtn = PBtnText?.export || locale.export;
+        const expandBtn = PBtnText?.expand || locale.expand;
+        const collapseBtn = PBtnText?.collapse || locale.collapse;
+        const expandIcon = PBtnText?.expandIcon || _jsx(ChevronDown, { className: "h-4 w-4" });
+        return {
+            resetBtn,
+            searchBtn,
+            expandBtn,
+            collapseBtn,
+            exportBtn,
+            expandIcon,
+        };
+    }, [
+        PBtnText?.reset,
+        PBtnText?.search,
+        PBtnText?.export,
+        PBtnText?.expand,
+        PBtnText?.collapse,
+        PBtnText?.expandIcon,
+        locale,
+    ]);
+    const { permanentSchemas, alternativeSchemas } = useMemo(() => {
+        const alternativeSchemas = [];
+        const tmp = [];
+        for (let index = 0; index < schemas.length; index++) {
+            const item = schemas[index];
+            if (item.isPermanent) {
+                tmp.push(item);
+            }
+            else {
+                alternativeSchemas.push(item);
+            }
+        }
+        if (tmp.length < expandBoundaries) {
+            const candidates = expandBoundaries - tmp.length;
+            for (let index = 0; index < candidates; index++) {
+                tmp.push(alternativeSchemas[index]);
+            }
+            alternativeSchemas.splice(0, candidates);
+        }
+        return { alternativeSchemas, permanentSchemas: tmp };
+    }, [expandBoundaries, schemas]);
+    const showExpandedBtn = schemas.length > expandBoundaries;
+    let SSchemas;
+    // 有展开
+    if (showExpandedBtn) {
+        SSchemas = isExpanded
+            ? schemas
+            : [
+                ...permanentSchemas,
+                {
+                    type: 'group',
+                    fieldProps: {
+                        style: {
+                            display: 'none',
+                        },
+                    },
+                    key: 'gropu1',
+                    childrens: alternativeSchemas,
+                },
+            ];
+    }
+    else {
+        SSchemas = schemas;
+    }
+    return (_jsx("div", { className: "tc-ui-table-search", children: _jsxs(Search, { getForm: (form) => {
+                formRef.current = form;
+            }, schemas: SSchemas, ...searchProps, children: [showExpandedBtn && (_jsx(Button, { variant: "default", size: "sm", onClick: handleExpand, rightIcon: _jsx("span", { className: cn('transition-transform duration-200', isExpanded && 'rotate-180'), children: btnConfig.expandIcon }), children: isExpanded ? btnConfig.collapseBtn : btnConfig.expandBtn }, "expandedBtn")), _jsx(Button, { variant: "primary", size: "sm", onClick: handleSearch, children: btnConfig.searchBtn }), _jsx(Button, { variant: "default", size: "sm", onClick: handleReset, children: btnConfig.resetBtn }), renderActionBtnArea ? (renderActionBtnArea()) : (
+                //  导出Excel按钮
+                _jsx(Dropdown, { items: defaultExportItems, placement: "bottom-end", children: _jsx(Button, { variant: "default", size: "sm", rightIcon: _jsx(ChevronDown, { className: "h-4 w-4" }), children: btnConfig.exportBtn }) })), additionalButtons] }) }));
+};
+export default TableSearch;

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

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