@_tc/template-core 0.1.15 → 0.2.0-bate.0

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

@@ -1,103 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
-import { forwardRef, useEffect, useImperativeHandle, useRef, } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { CollapsedContext, useMenuStore, MenuStoreContext, createMenuContextValue, } from "./MenuContext";
-import { MenuItem } from "./MenuItem";
-import { SubMenu } from "./SubMenu";
-function renderItems(items, parentKey) {
-    return items.map((item) => {
-        if (item.children && item.children.length > 0) {
-            return (_jsx(SubMenu, { eventKey: item.key, label: item.label, icon: item.icon, disabled: item.disabled, popup: item.popup, parentKey: parentKey, children: renderItems(item.children, item.key) }, item.key));
-        }
-        return (_jsx(MenuItem, { eventKey: item.key, icon: item.icon, disabled: item.disabled, danger: item.danger, onClick: item.onClick, className: item.className, style: item.style, width: item.width, minWidth: item.minWidth, maxWidth: item.maxWidth, children: item.label }, item.key));
-    });
-}
-export const CollapseToggle = forwardRef(({ className }, ref) => {
-    const collapsed = useMenuStore((s) => s.collapsed);
-    const setCollapsed = useMenuStore((s) => s.setCollapsed);
-    const onCollapse = useMenuStore((s) => s.onCollapse);
-    const propsCollapsed = useMenuStore((s) => s.propsCollapsed);
-    const shouldShowCollapseToggle = () => {
-        /**
-         * 传入 collapsed 且没有 onCollapse 时，表示折叠状态完全由外部控制。
-         * 内部控制器无法改变状态，因此不渲染。
-         */
-        if (typeof propsCollapsed !== "undefined" &&
-            typeof onCollapse === "undefined") {
-            return false;
-        }
-        return true;
-    };
-    useImperativeHandle(ref, () => ({
-        collapse: () => setCollapsed(true),
-        expand: () => setCollapsed(false),
-    }), [setCollapsed]);
-    if (!shouldShowCollapseToggle()) {
-        return null;
-    }
-    return (_jsx("div", { role: "button", onClick: () => setCollapsed(!collapsed), className: cn("mx-1 mb-1 flex h-9 cursor-pointer items-center justify-center rounded-lg", "text-muted-foreground transition-all", "hover:bg-muted/60 hover:text-foreground", className), children: collapsed ? (_jsx(ChevronRight, { className: "h-4 w-4" })) : (_jsx(ChevronLeft, { className: "h-4 w-4" })) }));
-});
-CollapseToggle.displayName = "CollapseToggle";
-function MenuInner({ children, items, className, mode, }) {
-    const collapsed = useMenuStore((s) => s.collapsed);
-    const collapsedWidth = useMenuStore((s) => s.collapsedWidth);
-    const content = items ? renderItems(items) : children;
-    return (_jsxs("nav", { role: "menu", className: cn("tc-ui-menu relative overflow-hidden rounded-xl bg-background shadow-sm", mode === "left" && "flex flex-col p-1", mode === "top" && "flex flex-row items-center p-[3px]", className), style: mode === "left" && collapsed ? { width: collapsedWidth } : undefined, children: [mode === "left" && _jsx(CollapseToggle, {}), _jsx(CollapsedContext.Provider, { value: mode === "left" && collapsed, children: _jsx("div", { className: cn(mode === "left" && "flex flex-col gap-1", mode === "top" && "flex flex-row items-center gap-1"), children: content }) })] }));
-}
-export const Menu = ({ mode = "left", expandTrigger = "click", expandMode = "accordion", selectedKey: controlledSelectedKey, defaultSelectedKey, onSelect, items, children, className, collapsed: controlledCollapsed, defaultCollapsed, onCollapse, collapsedWidth = 64, collapsedLabelTooltip = true, }) => {
-    const storeRef = useRef(null);
-    if (!storeRef.current) {
-        storeRef.current = createMenuContextValue({
-            mode,
-            expandTrigger,
-            expandMode,
-            selectedKey: controlledSelectedKey,
-            defaultSelectedKey,
-            collapsed: controlledCollapsed,
-            propsCollapsed: controlledCollapsed,
-            defaultCollapsed,
-            collapsedWidth,
-            collapsedLabelTooltip,
-            onSelect,
-            onCollapse,
-        });
-    }
-    const store = storeRef.current;
-    useEffect(() => {
-        store.setState({
-            mode,
-            expandTrigger,
-            expandMode,
-            propsCollapsed: controlledCollapsed,
-            collapsedWidth,
-            collapsedLabelTooltip,
-            onSelect,
-            onCollapse,
-        });
-    }, [
-        mode,
-        expandTrigger,
-        expandMode,
-        controlledCollapsed,
-        collapsedWidth,
-        collapsedLabelTooltip,
-        onSelect,
-        onCollapse,
-        store,
-    ]);
-    useEffect(() => {
-        if (controlledSelectedKey !== undefined) {
-            store.setState({ selectedKey: controlledSelectedKey });
-        }
-    }, [controlledSelectedKey, store]);
-    useEffect(() => {
-        if (controlledCollapsed !== undefined) {
-            store.setState({ collapsed: controlledCollapsed });
-        }
-    }, [controlledCollapsed, store]);
-    return (_jsx(MenuStoreContext.Provider, { value: store, children: _jsx(MenuInner, { mode: mode, items: items, className: className, children: children }) }));
-};
-Menu.Item = MenuItem;
-Menu.SubMenu = SubMenu;
-Menu.CollapseToggle = CollapseToggle;

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

@@ -1,97 +0,0 @@
-import { createContext, useContext } from 'react';
-export const CollapsedContext = createContext(false);
-import { createStore, useStore } from 'zustand';
-function createMenuStore(props) {
-    const { mode, expandTrigger, propsCollapsed, expandMode, collapsedWidth, } = props;
-    const isControlledSelected = props.selectedKey !== undefined;
-    const isControlledCollapsed = props.collapsed !== undefined;
-    return createStore((set, get) => ({
-        mode,
-        expandTrigger,
-        expandMode,
-        selectedKey: props.selectedKey ?? props.defaultSelectedKey,
-        openKeys: [],
-        openKeyParents: {},
-        collapsed: props.collapsed ?? props.defaultCollapsed ?? false,
-        propsCollapsed,
-        collapsedWidth,
-        collapsedLabelTooltip: props.collapsedLabelTooltip,
-        onSelect: props.onSelect,
-        onCollapse: props.onCollapse,
-        isControlledSelected,
-        isControlledCollapsed,
-        setSelectedKey: (key) => {
-            const { isControlledSelected, onSelect } = get();
-            if (!isControlledSelected) {
-                set({ selectedKey: key });
-            }
-            onSelect?.(key);
-        },
-        toggleOpenKey: (key, parentKey) => {
-            const { openKeys, openKeyParents, expandMode } = get();
-            const isOpen = openKeys.includes(key);
-            if (expandMode === 'accordion') {
-                const nextParents = { ...openKeyParents };
-                if (isOpen) {
-                    delete nextParents[key];
-                }
-                else {
-                    const siblings = openKeys.filter((k) => openKeyParents[k] === parentKey);
-                    siblings.forEach((k) => delete nextParents[k]);
-                    if (parentKey)
-                        nextParents[key] = parentKey;
-                }
-                set({
-                    openKeys: isOpen
-                        ? openKeys.filter((k) => k !== key)
-                        : openKeys.filter((k) => openKeyParents[k] !== parentKey).concat(key),
-                    openKeyParents: nextParents,
-                });
-            }
-            else {
-                if (isOpen) {
-                    const nextParents = { ...openKeyParents };
-                    delete nextParents[key];
-                    set({ openKeys: openKeys.filter((k) => k !== key), openKeyParents: nextParents });
-                }
-                else {
-                    set({
-                        openKeys: [...openKeys, key],
-                        openKeyParents: parentKey ? { ...openKeyParents, [key]: parentKey } : openKeyParents,
-                    });
-                }
-            }
-        },
-        setCollapsed: (collapsed) => {
-            const { isControlledCollapsed, onCollapse } = get();
-            if (!isControlledCollapsed) {
-                set({ collapsed });
-            }
-            onCollapse?.(collapsed);
-        },
-    }));
-}
-const MenuStoreContext = createContext(null);
-export function useMenuStore(selector) {
-    const store = useContext(MenuStoreContext);
-    if (!store)
-        throw new Error('Menu compound components must be used within <Menu>');
-    return useStore(store, selector);
-}
-export function createMenuContextValue(overrides) {
-    return createMenuStore({
-        mode: overrides.mode ?? 'left',
-        expandTrigger: overrides.expandTrigger ?? 'click',
-        expandMode: overrides.expandMode ?? 'accordion',
-        selectedKey: overrides.selectedKey,
-        defaultSelectedKey: overrides.defaultSelectedKey,
-        collapsed: overrides.collapsed,
-        propsCollapsed: overrides.propsCollapsed,
-        defaultCollapsed: overrides.defaultCollapsed,
-        collapsedWidth: overrides.collapsedWidth ?? 64,
-        collapsedLabelTooltip: overrides.collapsedLabelTooltip ?? true,
-        onSelect: overrides.onSelect,
-        onCollapse: overrides.onCollapse,
-    });
-}
-export { MenuStoreContext };

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

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
-import { useCallback, useContext, useRef, useState } from "react";
-import { Button } from "../Button";
-import { CollapsedContext, useMenuStore } from "./MenuContext";
-import { Popup } from "../Popup";
-import { getFirstChar } from "./utils";
-export function MenuItem({ eventKey, icon, disabled, danger, onClick, children, className, style, width, minWidth, maxWidth, ...props }) {
-    const mode = useMenuStore((s) => s.mode);
-    const selectedKey = useMenuStore((s) => s.selectedKey);
-    const setSelectedKey = useMenuStore((s) => s.setSelectedKey);
-    const collapsed = useContext(CollapsedContext);
-    const collapsedLabelTooltip = useMenuStore((s) => s.collapsedLabelTooltip);
-    const isSelected = selectedKey === eventKey;
-    const triggerRef = useRef(null);
-    const [showTooltip, setShowTooltip] = useState(false);
-    const handleClick = useCallback(() => {
-        if (disabled)
-            return;
-        eventKey && setSelectedKey(eventKey);
-        onClick?.();
-    }, [disabled, eventKey, onClick, setSelectedKey]);
-    return (_jsxs("div", { ref: triggerRef, className: "relative", onMouseEnter: () => collapsed && collapsedLabelTooltip && setShowTooltip(true), onMouseLeave: () => collapsed && collapsedLabelTooltip && setShowTooltip(false), children: [_jsxs(Button, { ...props, variant: "text", role: "menuitem", disabled: disabled, onClick: handleClick, className: cn("menuitem group relative flex items-center rounded-lg text-sm outline-none transition-all", "focus-visible:ring-2 focus-visible:ring-theme/30 focus-visible:ring-offset-0", mode === "top" &&
-                    "h-10 w-auto min-w-fit justify-start gap-3 px-3 py-2 text-left", mode === "left" &&
-                    collapsed &&
-                    "h-10 w-full justify-center gap-0 px-0 py-2", mode === "left" &&
-                    !collapsed &&
-                    "min-h-10 w-full gap-3 px-3 py-2.5 text-left", isSelected && "bg-theme text-theme-foreground shadow-sm", !isSelected &&
-                    !danger &&
-                    "text-foreground hover:bg-gray-200 dark:hover:bg-gray-700", danger && !isSelected && "text-destructive hover:bg-destructive/10", disabled && "cursor-not-allowed opacity-50", className), style: collapsed ? style : { width, minWidth, maxWidth, ...style }, children: [icon && (_jsx("span", { className: cn("flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors", isSelected
-                            ? "bg-theme-foreground/15"
-                            : "text-muted-foreground group-hover:text-foreground"), children: icon })), !collapsed && (_jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: children })), collapsed && !icon && collapsedLabelTooltip && (_jsx("span", { className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]", children: getFirstChar(children) }))] }), _jsx(Popup, { open: showTooltip, anchorRef: triggerRef, placement: "right-start", offset: 8, onOpenChange: setShowTooltip, className: "border-0 bg-transparent p-0 shadow-none", keepMounted: true, children: _jsx("div", { className: "whitespace-nowrap rounded-lg bg-gray-900 px-3 py-1.5 text-xs text-white shadow-sm", children: children }) })] }));
-}

package/fe/packages/ui/react/components/Menu/SubMenu.d.ts

@@ -1,10 +0,0 @@
-import type { SubMenuProps } from "./menuTypes";
-/**
- * 渲染带子菜单的 Menu 项。
- *
- * 根据当前 menu mode、收起状态、是否在弹出层内，决定子菜单是内嵌展开还是 Popup 弹出。
- *
- * @returns SubMenu 完整节点，包含触发区域和子菜单内容。
- */
-export declare function SubMenu({ eventKey, label, icon, disabled, popup: forcePopup, parentKey, children, }: SubMenuProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SubMenu.d.ts.map

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

@@ -1,169 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utils";
-import { createContext, useCallback, useContext, useRef, useState, } from "react";
-import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
-import { Popup } from "../Popup";
-import { CollapsedContext, useMenuStore } from "./MenuContext";
-import { getFirstChar } from "./utils";
-const SUBMENU_POPUP_OFFSET = 12;
-const SubMenuLevelContext = createContext(0);
-/**
- * 计算 top 模式下，二级及更深层 submenu 的弹出位置。
- *
- * @returns 优先放在右侧；右侧空间不够时，改放到左侧。
- */
-const getTopNestedSubMenuPosition = ({ anchorRect, contentRect, viewportWidth, offset, matchAnchorWidth, }) => {
-    const width = contentRect?.width ?? 0;
-    const rightLeft = anchorRect.right + offset;
-    const canPlaceRight = rightLeft + width <= viewportWidth;
-    return {
-        top: anchorRect.top,
-        left: canPlaceRight
-            ? rightLeft
-            : Math.max(0, anchorRect.left - width - offset),
-        width: matchAnchorWidth ? anchorRect.width : undefined,
-    };
-};
-/**
- * 判断当前 SubMenu 的子节点里，有没有选中的菜单项。
- *
- * @param children SubMenu 下面渲染出来的菜单节点。
- * @param targetKey 当前选中的 key。
- * @returns 子孙节点里命中选中 key 时返回 true。
- */
-function hasDescendantSelected(children, targetKey) {
-    if (!targetKey)
-        return false;
-    return walkReactChildren(children, targetKey);
-}
-/**
- * 递归遍历 React children，查找指定 eventKey。
- *
- * @param node 当前要检查的 React 节点。
- * @param targetKey 要查找的 eventKey。
- * @returns 当前节点或子孙节点命中时返回 true。
- */
-function walkReactChildren(node, targetKey) {
-    if (!node)
-        return false;
-    if (Array.isArray(node))
-        return node.some((n) => walkReactChildren(n, targetKey));
-    if (typeof node === "object" && node && "props" in node) {
-        const props = node.props;
-        if (props.eventKey === targetKey)
-            return true;
-        if (walkReactChildren(props.children, targetKey))
-            return true;
-    }
-    return false;
-}
-/**
- * 渲染 SubMenu 的触发区域，也就是能点击/hover 的那一行。
- *
- * @returns SubMenu trigger 节点。
- */
-function SubMenuItem({ triggerRef, onClick, icon, label, disabled, collapsed, descendantSelected, ArrowIcon, showArrow, setPopupContentRef, mode, }) {
-    const collapsedLabelTooltip = useMenuStore((s) => s.collapsedLabelTooltip);
-    return (_jsxs("div", { ref: triggerRef, onClick: onClick, className: cn("subMenuItem group relative flex items-center rounded-lg text-sm transition-all", "select-none", mode === "top" &&
-            "h-10 w-auto min-w-fit justify-start gap-3 px-3 py-2 text-left", mode === "left" &&
-            collapsed &&
-            "h-10 w-full justify-center gap-0 px-0 py-2", mode === "left" &&
-            !collapsed &&
-            "min-h-10 w-full gap-3 px-3 py-2.5 text-left", descendantSelected && "bg-theme/10 text-theme shadow-sm", !descendantSelected &&
-            "text-foreground hover:bg-gray-200 dark:hover:bg-gray-700", disabled && "cursor-not-allowed opacity-50"), children: [icon && (_jsx("span", { className: cn("flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors", descendantSelected
-                    ? "bg-theme/10 text-theme"
-                    : "text-muted-foreground group-hover:text-foreground"), children: icon })), !collapsed && _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), collapsed && !icon && collapsedLabelTooltip && (_jsx("span", { className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]", children: getFirstChar(label) })), !collapsed && showArrow && (_jsx(ArrowIcon, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform group-hover:text-foreground" })), _jsx("div", { ref: setPopupContentRef })] }));
-}
-/**
- * 渲染带子菜单的 Menu 项。
- *
- * 根据当前 menu mode、收起状态、是否在弹出层内，决定子菜单是内嵌展开还是 Popup 弹出。
- *
- * @returns SubMenu 完整节点，包含触发区域和子菜单内容。
- */
-export function SubMenu({ eventKey, label, icon, disabled, popup: forcePopup, parentKey, children, }) {
-    const mode = useMenuStore((s) => s.mode);
-    const expandTrigger = useMenuStore((s) => s.expandTrigger);
-    const storeCollapsed = useMenuStore((s) => s.collapsed);
-    const collapsed = useContext(CollapsedContext);
-    const openKeys = useMenuStore((s) => s.openKeys);
-    const toggleOpenKey = useMenuStore((s) => s.toggleOpenKey);
-    const selectedKey = useMenuStore((s) => s.selectedKey);
-    const level = useContext(SubMenuLevelContext);
-    const isOpen = openKeys.includes(eventKey);
-    const triggerRef = useRef(null);
-    const popupContentRef = useRef(null);
-    const [popupContainer, setPopupContainer] = useState(undefined);
-    const [popupOpen, setPopupOpen] = useState(false);
-    // 处于弹出层内：store 已收起但 context 被覆盖为 false
-    const isInsidePopup = storeCollapsed && !collapsed;
-    // mode=top always popup; left+collapsed always popup; inside popup -> popup; else check popup flag
-    const usePopup = mode === "top" ||
-        (mode === "left" && collapsed) ||
-        isInsidePopup ||
-        forcePopup === true;
-    const descendantSelected = hasDescendantSelected(children, selectedKey);
-    const setPopupContentRef = useCallback((el) => {
-        popupContentRef.current = el;
-        if (el)
-            setPopupContainer(el);
-    }, []);
-    const handleMouseEnter = useCallback(() => {
-        if (disabled)
-            return;
-        if (usePopup) {
-            setPopupOpen(true);
-        }
-        else if (expandTrigger === "hover" && !isOpen) {
-            toggleOpenKey(eventKey, parentKey);
-        }
-    }, [
-        disabled,
-        usePopup,
-        expandTrigger,
-        isOpen,
-        eventKey,
-        parentKey,
-        toggleOpenKey,
-    ]);
-    const handleMouseLeave = useCallback(() => {
-        if (usePopup) {
-            setPopupOpen(false);
-        }
-    }, [usePopup]);
-    const handleTriggerClick = useCallback(() => {
-        if (disabled)
-            return;
-        if (usePopup) {
-            setPopupOpen((prev) => !prev);
-        }
-        else {
-            toggleOpenKey(eventKey, parentKey);
-        }
-    }, [disabled, usePopup, eventKey, parentKey, toggleOpenKey]);
-    const showArrow = !(mode === "left" && collapsed);
-    const ArrowIcon = usePopup
-        ? mode === "top" && level === 0
-            ? ChevronDown
-            : ChevronRight
-        : isOpen
-            ? ChevronUp
-            : ChevronDown;
-    const popupPlacement = mode === "top" && level === 0 ? "bottom-start" : "right-start";
-    const popupStrategy = mode === "top" && level > 0 ? getTopNestedSubMenuPosition : undefined;
-    const hoverBridgePlacement = mode === "top" && level > 0 ? "horizontal" : "auto";
-    const subMenuContent = (_jsx("div", { className: cn(
-        // "min-w-[180px]",
-        "rounded-xl border border-border/80 bg-popover p-2 text-popover-foreground", "shadow-[0_20px_56px_hsl(var(--background)/0.7),0_8px_18px_hsl(var(--foreground)/0.16),inset_0_1px_0_hsl(var(--foreground)/0.06)]"), children: _jsx(SubMenuLevelContext.Provider, { value: level + 1, children: _jsx("div", { className: "flex flex-col gap-1", children: children }) }) }));
-    /**
-     *
-     * submenu  生成的节点是  1 menuItem
-     *                        submenu「
-     *                          1-1
-     *                          1-2
-     *                        」
-     *
-     * 所以判断鼠标是否在区域内应该是 监听 submenu 的根节点
-     */
-    return (_jsxs("div", { className: "submenu", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx(SubMenuItem, { triggerRef: triggerRef, onClick: handleTriggerClick, icon: icon, label: label, disabled: disabled, collapsed: collapsed, descendantSelected: descendantSelected, ArrowIcon: ArrowIcon, showArrow: showArrow, setPopupContentRef: setPopupContentRef, mode: mode }), usePopup ? (_jsx(Popup, { open: popupOpen, anchorRef: triggerRef, placement: popupPlacement, offset: SUBMENU_POPUP_OFFSET, hoverBridge: SUBMENU_POPUP_OFFSET, onOpenChange: setPopupOpen, container: popupContainer, strategy: popupStrategy, hoverBridgePlacement: hoverBridgePlacement, className: "border-0 bg-transparent p-0 shadow-none", children: _jsx(CollapsedContext.Provider, { value: false, children: subMenuContent }) })) : (isOpen && (_jsx("div", { className: "ml-4 pl-2 pt-1", children: _jsx(SubMenuLevelContext.Provider, { value: level + 1, children: _jsx("div", { className: "flex flex-col gap-1", children: children }) }) })))] }));
-}

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

@@ -1,9 +0,0 @@
-export { Menu } from './Menu';
-export { MenuItem } from './MenuItem';
-export { SubMenu } from './SubMenu';
-export { CollapseToggle } from './Menu';
-export type { MenuProps, MenuItemData, MenuItemProps, SubMenuProps } from './menuTypes';
-export type { CollapseToggleHandle, CollapseToggleProps } from './Menu';
-export { useMenuStore } from './MenuContext';
-export type { MenuStore } from './MenuContext';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,5 +0,0 @@
-export { Menu } from './Menu';
-export { MenuItem } from './MenuItem';
-export { SubMenu } from './SubMenu';
-export { CollapseToggle } from './Menu';
-export { useMenuStore } from './MenuContext';

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,7 +0,0 @@
-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.js

@@ -1,58 +0,0 @@
-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.js

@@ -1,90 +0,0 @@
-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.js

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

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

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

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

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

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

@@ -1,14 +0,0 @@
-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 })] }) }));
-}