@_tc/template-core 0.0.1-bate.46 → 0.0.1-bate.47

package/fe/packages/ui/react/components/hooks/useDropdownPositioning.js

@@ -1,137 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-const HIDDEN_POSITION = {
-    top: -100,
-    left: -100,
-};
-const EMPTY_DEPS = [];
-/**
- * 计算弹窗该放在哪。
- *
- * right/left：跟触发元素顶部对齐，往右或往左弹。
- * bottom/top：放在触发元素下方或上方，再按 start/end 对齐。
- */
-export const getDefaultDropdownPosition = ({ anchorRect, contentRect, containerRect, viewportWidth, placement, offset, matchAnchorWidth, }) => {
-    const isRight = placement.startsWith("right");
-    const isLeft = placement.startsWith("left");
-    const isTop = placement.startsWith("top");
-    const containerTop = containerRect?.top ?? 0;
-    const containerLeft = containerRect?.left ?? 0;
-    const containerRight = containerRect?.right ?? viewportWidth;
-    const nextPosition = {
-        top: (isRight || isLeft
-            ? anchorRect.top
-            : isTop
-                ? anchorRect.top - (contentRect?.height ?? 0) - offset
-                : anchorRect.bottom + offset) - containerTop,
-        width: matchAnchorWidth ? anchorRect.width : undefined,
-    };
-    if (isRight) {
-        nextPosition.left = anchorRect.right + offset - containerLeft;
-    }
-    else if (isLeft) {
-        // 往左弹时，要知道弹窗宽度，才能算出左边应该从哪里开始。
-        nextPosition.left = anchorRect.left - (contentRect?.width ?? 0) - offset - containerLeft;
-    }
-    else if (placement.endsWith("start")) {
-        nextPosition.left = anchorRect.left - containerLeft;
-    }
-    else {
-        nextPosition.right = containerRight - anchorRect.right;
-    }
-    return nextPosition;
-};
-export function useDropdownPositioning({ open, anchorRef, contentRef, placement = "bottom-end", offset = 8, matchAnchorWidth = false, strategy = getDefaultDropdownPosition, estimateSize, watchDeps = EMPTY_DEPS, containerRef, positionMode = "fixed", }) {
-    const [position, setPosition] = useState(HIDDEN_POSITION);
-    const [ready, setReady] = useState(false);
-    const getContentRect = useCallback(() => {
-        // 优先用真实 DOM 尺寸。刚打开时可能还量不到，就允许外部给一个预估尺寸。
-        const measuredRect = contentRef.current?.getBoundingClientRect();
-        if (measuredRect && measuredRect.height > 0) {
-            return measuredRect;
-        }
-        const estimatedSize = estimateSize?.();
-        if (!estimatedSize)
-            return measuredRect;
-        return new DOMRect(0, 0, estimatedSize.width ?? 0, estimatedSize.height ?? 0);
-    }, [contentRef, estimateSize]);
-    const updatePosition = useCallback(() => {
-        if (!anchorRef.current)
-            return;
-        // 每次定位前重新读取位置，这样滚动或窗口变化后不会用旧坐标。
-        const anchorRect = anchorRef.current.getBoundingClientRect();
-        const contentRect = getContentRect();
-        const containerRect = positionMode === "absolute"
-            ? containerRef?.current?.getBoundingClientRect()
-            : undefined;
-        const newData = strategy({
-            anchorRect,
-            contentRect: contentRect ?? undefined,
-            containerRect,
-            viewportWidth: window.innerWidth,
-            viewportHeight: window.innerHeight,
-            placement,
-            offset,
-            matchAnchorWidth,
-        });
-        setPosition((returnData.current.position = newData));
-        setReady((returnData.current.ready = Boolean(contentRef.current &&
-            contentRef.current.getBoundingClientRect().height > 0)));
-    }, [
-        anchorRef,
-        contentRef,
-        containerRef,
-        getContentRect,
-        matchAnchorWidth,
-        offset,
-        placement,
-        positionMode,
-        strategy,
-    ]);
-    useEffect(() => {
-        if (!open) {
-            // 关闭时先挪到屏幕外，避免 keepMounted 的弹窗在旧位置闪一下。
-            setPosition((returnData.current.position = HIDDEN_POSITION));
-            setReady((returnData.current.ready = false));
-            return;
-        }
-        // 打开后等两帧再量尺寸：先让 DOM 挂上去，再让浏览器完成布局。
-        const rafId = requestAnimationFrame(() => requestAnimationFrame(updatePosition));
-        return () => cancelAnimationFrame(rafId);
-    }, [open, updatePosition]);
-    useEffect(() => {
-        if (!open)
-            return;
-        // 页面滚动、外层容器滚动、窗口缩放时，都重新算一次位置。
-        const handleUpdate = () => updatePosition();
-        window.addEventListener("scroll", handleUpdate, true);
-        window.addEventListener("resize", handleUpdate);
-        return () => {
-            window.removeEventListener("scroll", handleUpdate, true);
-            window.removeEventListener("resize", handleUpdate);
-        };
-    }, [open, updatePosition]);
-    const deps = useMemo(() => watchDeps, [watchDeps]);
-    useEffect(() => {
-        if (!open)
-            return;
-        // 外部内容变化时，可以通过 watchDeps 主动触发重新定位。
-        updatePosition();
-    }, [deps, open, updatePosition]);
-    useEffect(() => {
-        if (!open || !contentRef.current)
-            return;
-        // 弹窗打开后内容高度/宽度可能变，尺寸变了就重新定位。
-        let rafId = 0;
-        const observer = new ResizeObserver(() => {
-            rafId = requestAnimationFrame(() => requestAnimationFrame(updatePosition));
-        });
-        observer.observe(contentRef.current);
-        return () => {
-            observer.disconnect();
-            cancelAnimationFrame(rafId);
-        };
-    }, [contentRef, open, updatePosition]);
-    const returnData = useRef({ position, ready, updatePosition });
-    returnData.current.updatePosition = updatePosition;
-    return returnData.current;
-}

package/fe/packages/ui/react/components/hooks/useInputController.js

@@ -1,45 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-/**
- * 处理ref & 判断是否受控 & 使用的value & value.length
- */
-export const useInputController = (params) => {
-    const { defaultValue, ref, controlledValue } = params;
-    const [isFocused, setIsFocused] = useState(false);
-    const [internalValue, setInternalValue] = useState(defaultValue || '');
-    const controllerRef = useRef(null);
-    // 合并 refs
-    const setRefs = useCallback((node) => {
-        controllerRef.current = node;
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            // eslint-disable-next-line react-hooks/immutability
-            ref.current = node;
-        }
-    }, [ref]);
-    const isControlledRef = useRef(false);
-    // 外部传了value
-    const isControlled = useMemo(() => {
-        const r = controlledValue !== undefined;
-        // 当传入的value改变时，更新ref值
-        isControlledRef.current = r;
-        return r;
-    }, [controlledValue]);
-    const value = isControlled ? controlledValue : internalValue;
-    const hasValue = Boolean(value && String(value).length > 0);
-    const currentLength = value ? String(value).length : 0;
-    return {
-        setRefs,
-        setIsFocused,
-        setInternalValue,
-        controllerRef,
-        isControlledRef,
-        isControlled,
-        isFocused,
-        currentLength,
-        hasValue,
-        internalValue,
-        value,
-    };
-};

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

@@ -1,30 +0,0 @@
-export * from './breadcrumb';
-export * from './Button';
-export * from './Checkbox';
-export * from './ConfirmDialog';
-export * from './DataTable';
-export * from './Drawer';
-export * from './Dropdown';
-export * from './Popup';
-export * from './Form';
-export * from './hooks/useDropdownPositioning';
-export * from './ImagePreview';
-export * from './Input';
-export * from './InputNumber';
-export * from './Label';
-export * from './Menu';
-export * from './Message';
-export * from './Modal';
-export * from './Overlay';
-export * from './Pagination';
-export * from './Search';
-export * from './Select';
-export * from './Skeleton';
-export * from './Switch';
-export * from './table';
-export * from './TableSearch';
-export * from './Textarea';
-export * from './Tooltip';
-export * from './TreeSelect';
-export * from './Upload';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,29 +0,0 @@
-export * from './breadcrumb';
-export * from './Button';
-export * from './Checkbox';
-export * from './ConfirmDialog';
-export * from './DataTable';
-export * from './Drawer';
-export * from './Dropdown';
-export * from './Popup';
-export * from './Form';
-export * from './hooks/useDropdownPositioning';
-export * from './ImagePreview';
-export * from './Input';
-export * from './InputNumber';
-export * from './Label';
-export * from './Menu';
-export * from './Message';
-export * from './Modal';
-export * from './Overlay';
-export * from './Pagination';
-export * from './Search';
-export * from './Select';
-export * from './Skeleton';
-export * from './Switch';
-export * from './table';
-export * from './TableSearch';
-export * from './Textarea';
-export * from './Tooltip';
-export * from './TreeSelect';
-export * from './Upload';

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

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

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

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

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

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
-import * as React from 'react';
-const Table = React.forwardRef(({ className, containerClassName, ...props }, ref) => (_jsx("div", { className: cn('tc-ui-table relative w-full overflow-auto rounded-[20px]', containerClassName), children: _jsx("table", { ref: ref, className: cn('w-full caption-bottom text-sm', className), ...props }) })));
-Table.displayName = 'Table';
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('tc-ui-table-header bg-table-header', className), ...props }));
-TableHeader.displayName = 'TableHeader';
-const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn('tc-ui-table-body [&_tr:last-child]:border-0', className), ...props })));
-TableBody.displayName = 'TableBody';
-const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn('tc-ui-table-footer border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props })));
-TableFooter.displayName = 'TableFooter';
-const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('tc-ui-table-row border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props })));
-TableRow.displayName = 'TableRow';
-const TableHead = React.forwardRef(({ className, isAction, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('tc-ui-table-head h-12 px-4 text-left align-middle text-xs font-normal', 'text-table-head-text', isAction && 'bg-table-action text-table-action-text w-[85px] text-center', className), ...props })));
-TableHead.displayName = 'TableHead';
-const TableCell = React.forwardRef(({ className, isAction, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('tc-ui-table-cell p-4 align-middle text-sm font-normal', 'text-table-cell-text', isAction && 'bg-table-action text-table-action-text w-[85px] text-center', className), ...props })));
-TableCell.displayName = 'TableCell';
-const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn('tc-ui-table-caption mt-4 text-sm text-muted-foreground', className), ...props })));
-TableCaption.displayName = 'TableCaption';
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/fe/packages/ui/react/components/testPage/MenuTestPage.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { LayoutDashboard, Package, Settings, Users, FileText, BarChart3, ShoppingCart, Bell, HelpCircle, } from 'lucide-react';
-import { Menu } from '../Menu';
-// ─── 示例数据 ────────────────────────────────────────────────────────────────
-const menuItems = [
-    {
-        key: 'dashboard',
-        label: 'Dashboard',
-        icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }),
-    },
-    {
-        key: 'products',
-        label: 'Products',
-        icon: _jsx(Package, { className: "h-4 w-4" }),
-        children: [
-            { key: 'products-list', label: 'All Products' },
-            { key: 'products-create', label: 'Create New' },
-            {
-                key: 'products-categories',
-                label: 'Categories',
-                children: [
-                    { key: 'cat-electronics', label: 'Electronics' },
-                    { key: 'cat-clothing', label: 'Clothing' },
-                ],
-            },
-        ],
-    },
-    {
-        key: 'settings',
-        label: 'Settings',
-        icon: _jsx(Settings, { className: "h-4 w-4" }),
-        children: [
-            { key: 'settings-profile', label: 'Profile' },
-            { key: 'settings-billing', label: 'Billing', danger: true },
-        ],
-    },
-];
-const topItems = [
-    { key: 'home', label: 'Home' },
-    {
-        key: 'services',
-        label: 'Services',
-        children: [
-            { key: 'consulting', label: 'Consulting' },
-            { key: 'development', label: 'Development' },
-        ],
-    },
-    { key: 'about', label: 'About' },
-];
-const iconMenuItems = [
-    { key: 'dashboard', label: 'Dashboard', icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }) },
-    {
-        key: 'users',
-        label: 'Users',
-        icon: _jsx(Users, { className: "h-4 w-4" }),
-        children: [
-            { key: 'users-list', label: 'All Users', icon: _jsx(Users, { className: "h-4 w-4" }) },
-            { key: 'users-roles', label: 'Roles', icon: _jsx(FileText, { className: "h-4 w-4" }) },
-        ],
-    },
-    {
-        key: 'analytics',
-        label: 'Analytics',
-        icon: _jsx(BarChart3, { className: "h-4 w-4" }),
-        children: [
-            { key: 'analytics-overview', label: 'Overview' },
-            { key: 'analytics-reports', label: 'Reports' },
-        ],
-    },
-    { key: 'orders', label: 'Orders', icon: _jsx(ShoppingCart, { className: "h-4 w-4" }) },
-    { key: 'notifications', label: 'Notifications', icon: _jsx(Bell, { className: "h-4 w-4" }) },
-    { key: 'help', label: 'Help', icon: _jsx(HelpCircle, { className: "h-4 w-4" }) },
-];
-// ─── 区块包装 ────────────────────────────────────────────────────────────────
-function Section({ title, description, children }) {
-    return (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), children] }));
-}
-// ─── 页面 ────────────────────────────────────────────────────────────────────
-export default function MenuTestPage() {
-    const [selectedKey, setSelectedKey] = useState('dashboard');
-    const [collapsed, setCollapsed] = useState(false);
-    const [collapsedKey, setCollapsedKey] = useState('dashboard');
-    const [accordionKey, setAccordionKey] = useState('dashboard');
-    const [topKey, setTopKey] = useState('home');
-    return (_jsxs("div", { className: "p-8 max-w-6xl mx-auto space-y-10", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: "Menu \u7EC4\u4EF6\u4F7F\u7528\u793A\u4F8B" }), _jsx("p", { className: "text-muted-foreground", children: "\u652F\u6301 top / left \u5E03\u5C40\u3001\u591A\u5C42\u5D4C\u5957\u3001\u56FE\u6807\u3001\u6298\u53E0\u7B49\u573A\u666F" })] }), _jsxs(Section, { title: "1. \u57FA\u7840 Left \u6A21\u5F0F (data config)", description: "\u6700\u5E38\u7528\u7684\u4FA7\u8FB9\u83DC\u5355\uFF0C\u652F\u6301\u591A\u7EA7\u5C55\u5F00 (expandMode=multiple)", children: [_jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandMode: "multiple", selectedKey: selectedKey, onSelect: setSelectedKey, items: menuItems }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["\u5F53\u524D\u9009\u4E2D: ", selectedKey] })] }), _jsx(Section, { title: "2. \u624B\u98CE\u7434\u5C55\u5F00 (accordion)", description: "\u540C\u4E00\u5C42\u7EA7\u540C\u65F6\u53EA\u80FD\u5C55\u5F00\u4E00\u4E2A\u5B50\u83DC\u5355", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandMode: "accordion", selectedKey: accordionKey, onSelect: setAccordionKey, items: menuItems }) }) }), _jsx(Section, { title: "3. \u6298\u53E0\u6A21\u5F0F (collapsed)", description: "\u6536\u8D77\u540E\u4EC5\u5C55\u793A\u56FE\u6807\uFF0Chover \u5F39\u51FA\u5B50\u83DC\u5355", children: _jsx("div", { className: "border rounded-lg overflow-hidden inline-flex", children: _jsx(Menu, { mode: "left", selectedKey: collapsedKey, onSelect: setCollapsedKey, collapsed: collapsed, onCollapse: setCollapsed, items: iconMenuItems }) }) }), _jsx(Section, { title: "4. JSX \u7EC4\u5408\u5F0F", description: "\u4E0D\u4F7F\u7528 data config\uFF0C\u76F4\u63A5\u7EC4\u5408 Menu.Item / Menu.SubMenu", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsxs(Menu, { mode: "left", defaultSelectedKey: "overview", children: [_jsx(Menu.Item, { eventKey: "overview", icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }), children: "Overview" }), _jsxs(Menu.SubMenu, { eventKey: "manage", label: "Manage", icon: _jsx(Package, { className: "h-4 w-4" }), children: [_jsx(Menu.Item, { eventKey: "manage-list", children: "List" }), _jsx(Menu.Item, { eventKey: "manage-edit", children: "Edit" })] }), _jsxs(Menu.SubMenu, { eventKey: "settings", label: "Settings", icon: _jsx(Settings, { className: "h-4 w-4" }), children: [_jsx(Menu.Item, { eventKey: "jsx-profile", children: "Profile" }), _jsx(Menu.Item, { eventKey: "jsx-billing", danger: true, children: "Billing" })] }), _jsx(Menu.Item, { eventKey: "help", icon: _jsx(HelpCircle, { className: "h-4 w-4" }), children: "Help" })] }) }) }), _jsx(Section, { title: "5. \u5B50\u83DC\u5355\u5F39\u51FA\u6A21\u5F0F (popup)", description: "\u5C55\u5F00\u72B6\u6001\u4E0B\u4E5F\u80FD\u8BA9\u5B50\u83DC\u5355\u4EE5\u5F39\u51FA\u65B9\u5F0F\u5C55\u793A", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandMode: "multiple", selectedKey: selectedKey, onSelect: setSelectedKey, items: [
-                            { key: 'd1', label: 'Dashboard', icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }) },
-                            {
-                                key: 'p1',
-                                label: 'Products',
-                                icon: _jsx(Package, { className: "h-4 w-4" }),
-                                popup: true,
-                                children: [
-                                    { key: 'p1-list', label: 'All Products' },
-                                    { key: 'p1-create', label: 'Create New' },
-                                ],
-                            },
-                            { key: 'd3', label: 'Help', icon: _jsx(HelpCircle, { className: "h-4 w-4" }) },
-                        ] }) }) }), _jsxs(Section, { title: "6. Top \u6A21\u5F0F", description: "\u4E00\u7EA7\u83DC\u5355\u6C34\u5E73\u6392\u5217\uFF0C\u5B50\u83DC\u5355\u4E0B\u62C9\u5F39\u51FA", children: [_jsx("div", { className: "border rounded-lg w-full", children: _jsx(Menu, { mode: "top", selectedKey: topKey, onSelect: setTopKey, items: topItems, className: "border-b" }) }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["\u5F53\u524D\u9009\u4E2D: ", topKey] })] }), _jsx(Section, { title: "7. Click \u89E6\u53D1", description: "\u70B9\u51FB\u5C55\u5F00\u5B50\u83DC\u5355\uFF0C\u800C\u975E hover", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsx(Menu, { mode: "left", expandTrigger: "click", expandMode: "multiple", selectedKey: selectedKey, onSelect: setSelectedKey, items: menuItems }) }) }), _jsx(Section, { title: "8. \u72B6\u6001\u5C55\u793A", description: "disabled / danger \u6837\u5F0F\u6F14\u793A", children: _jsx("div", { className: "w-56 border rounded-lg overflow-hidden", children: _jsxs(Menu, { mode: "left", defaultSelectedKey: "normal", children: [_jsx(Menu.Item, { eventKey: "normal", icon: _jsx(FileText, { className: "h-4 w-4" }), children: "\u6B63\u5E38\u83DC\u5355\u9879" }), _jsx(Menu.Item, { eventKey: "disabled-item", disabled: true, icon: _jsx(FileText, { className: "h-4 w-4" }), children: "\u7981\u7528\u83DC\u5355\u9879" }), _jsx(Menu.Item, { eventKey: "danger-item", danger: true, icon: _jsx(FileText, { className: "h-4 w-4" }), children: "\u5371\u9669\u83DC\u5355\u9879" }), _jsxs(Menu.SubMenu, { eventKey: "sub-disabled", label: "\u542B\u7981\u7528\u5B50\u9879", icon: _jsx(Settings, { className: "h-4 w-4" }), children: [_jsx(Menu.Item, { eventKey: "sub-normal", children: "\u6B63\u5E38\u5B50\u9879" }), _jsx(Menu.Item, { eventKey: "sub-danger", danger: true, children: "\u5371\u9669\u5B50\u9879" }), _jsx(Menu.Item, { eventKey: "sub-disabled-item", disabled: true, children: "\u7981\u7528\u5B50\u9879" })] })] }) }) }), _jsx(Section, { title: "9. \u65E0 icon \u6298\u53E0", description: "\u6536\u8D77\u65F6\u65E0 icon \u7684\u83DC\u5355\u9879\u7559\u767D\u5360\u4F4D", children: _jsx("div", { className: "border rounded-lg overflow-hidden inline-flex", children: _jsx(Menu, { mode: "left", defaultCollapsed: true, expandMode: "multiple", items: [
-                            { key: 'a', label: 'Home', icon: _jsx(LayoutDashboard, { className: "h-4 w-4" }) },
-                            { key: 'b', label: 'Reports' },
-                            { key: 'c', label: 'Settings', icon: _jsx(Settings, { className: "h-4 w-4" }) },
-                        ] }) }) })] }));
-}