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

package/fe/packages/ui/react/components/DataTable/ActionBtn.js

@@ -1,13 +1,96 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
 import { MoreHorizontal } from 'lucide-react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { Button } from '../Button';
 import { Dropdown } from '../Dropdown';
-export const ActionBtn = ({ actions }) => {
+const isInlineAction = (action) => !('render' in action);
+const renderActionLabel = (action) => (_jsxs(_Fragment, { children: [action.icon && _jsx("span", { className: "flex-shrink-0", children: action.icon }), _jsx("span", { className: "truncate", children: action.label })] }));
+const canShowInlineActions = (actions) => actions.every(isInlineAction);
+const InlineActions = ({ actions }) => (_jsx("div", { className: "tc-ui-action-btn-list inline-flex max-w-full items-center justify-center gap-1 whitespace-nowrap", children: actions.map((action) => isInlineAction(action) ? (_jsx(Button, { type: "button", onClick: action.onClick, className: cn('tc-ui-action-btn inline-flex h-8 max-w-full items-center justify-center gap-1 rounded px-2 text-sm transition-colors', action.danger
+            ? 'text-destructive hover:bg-destructive/10'
+            : 'text-table-action-text hover:bg-background/60'), children: renderActionLabel(action) }, action.key)) : null) }));
+const DropdownActions = ({ actions }) => (_jsx(Dropdown, { items: actions, placement: "bottom-end", children: _jsx(Button, { type: "button", state: "ghost", variant: "text", "aria-label": "More actions", className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-table-action-text transition-colors hover:bg-background/60 focus-visible:ring-border", children: _jsx(MoreHorizontal, { className: "h-5 w-5 opacity-70" }) }) }));
+const AutoActionBtn = ({ actions }) => {
+    const containerRef = useRef(null);
+    const measureRef = useRef(null);
+    const [canShowInline, setCanShowInline] = useState(false);
+    const updateOverflow = useCallback(() => {
+        const container = containerRef.current;
+        const measure = measureRef.current;
+        if (!container || !measure) {
+            setCanShowInline(false);
+            return;
+        }
+        const containerWidth = container.clientWidth;
+        const actionsWidth = measure.scrollWidth;
+        setCanShowInline(containerWidth > 0 && actionsWidth <= containerWidth);
+    }, []);
+    useLayoutEffect(() => {
+        if (!canShowInlineActions(actions))
+            return;
+        if (actions.length <= 1)
+            return;
+        updateOverflow();
+        let rafId = 0;
+        const scheduleUpdate = () => {
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(updateOverflow);
+        };
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', scheduleUpdate);
+            return () => {
+                cancelAnimationFrame(rafId);
+                window.removeEventListener('resize', scheduleUpdate);
+            };
+        }
+        const observer = new ResizeObserver(scheduleUpdate);
+        if (containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+        if (measureRef.current) {
+            observer.observe(measureRef.current);
+        }
+        window.addEventListener('resize', scheduleUpdate);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+            window.removeEventListener('resize', scheduleUpdate);
+        };
+    }, [actions, updateOverflow]);
     if (actions.length === 0) {
         return '-';
     }
+    if (actions.length === 1) {
+        if (!canShowInlineActions(actions)) {
+            return _jsx(DropdownActions, { actions: actions });
+        }
+        return _jsx(InlineActions, { actions: actions });
+    }
+    if (!canShowInlineActions(actions)) {
+        return _jsx(DropdownActions, { actions: actions });
+    }
+    return (_jsxs("div", { ref: containerRef, className: "relative w-full min-w-0", children: [_jsx("div", { ref: measureRef, "aria-hidden": "true", className: "pointer-events-none invisible absolute left-0 top-0 w-max max-w-none", children: _jsx(InlineActions, { actions: actions }) }), canShowInline ? _jsx(InlineActions, { actions: actions }) : _jsx(DropdownActions, { actions: actions })] }));
+};
+export const ActionBtn = ({ actions, overflow }) => {
+    if (overflow === 'dropdown') {
+        return actions.length === 0 ? '-' : _jsx(DropdownActions, { actions: actions });
+    }
+    if (overflow === 'auto') {
+        return _jsx(AutoActionBtn, { actions: actions });
+    }
+    if (actions.length === 0) {
+        return '-';
+    }
+    if (overflow === 'inline') {
+        return canShowInlineActions(actions) ? (_jsx(InlineActions, { actions: actions })) : (_jsx(DropdownActions, { actions: actions }));
+    }
     if (actions.length === 1) {
         const action = actions[0];
-        return (_jsx("button", { onClick: action.onClick, className: "inline-flex items-center justify-center w-8 h-8 rounded transition-colors", children: action.label }));
+        if (!isInlineAction(action)) {
+            return _jsx(DropdownActions, { actions: actions });
+        }
+        return (_jsx(Button, { type: "button", onClick: action.onClick, className: "tc-ui-action-btn inline-flex items-center justify-center w-8 h-8 rounded transition-colors", children: action.label }));
     }
-    return (_jsx(Dropdown, { items: actions, children: _jsx("button", { className: "inline-flex items-center justify-center w-8 h-8 rounded transition-colors", children: _jsx(MoreHorizontal, { className: "h-5 w-5 text-gray-600" }) }) }));
+    return _jsx(DropdownActions, { actions: actions });
 };

package/fe/packages/ui/react/components/DataTable/{data-table.d.ts → index.d.ts}

@@ -1,7 +1,15 @@
 import { type ReactNode } from 'react';
+import type { DropdownItem } from '../Dropdown';
 import { type PaginationProps } from '../Pagination';
+import { type TableFixed } from '../table';
 import type { ColumnDef } from '../types/baseType';
-export type { ColumnDef } from '../types/baseType';
+import { type ActionOverflow } from './ActionBtn';
+type DataTableActionColumnOptions<T> = {
+    actions?: DropdownItem[] | ((value: unknown, record: T, index: number) => DropdownItem[]);
+    actionOverflow?: ActionOverflow;
+    fixed?: TableFixed;
+};
+type TableColumnDef<T = Record<string, unknown>> = ColumnDef<T> & DataTableActionColumnOptions<T>;
 type RowSelection<T> = {
     /**
      * 受控用法：完全由外部维护选中 keys
@@ -25,7 +33,7 @@ type RowSelection<T> = {
     beforeCheckboxNode?: ReactNode;
 };
 interface DataTableProps<T = Record<string, unknown>> {
-    columns: ColumnDef<T>[];
+    columns: TableColumnDef<T>[];
     data: T[];
     rowKey?: keyof T | ((record: T, index: number) => string | number);
     rowSelection?: RowSelection<T>;
@@ -40,5 +48,5 @@ interface DataTableProps<T = Record<string, unknown>> {
 export declare function DataTable<T = Record<string, unknown>>({ columns, data: pData, loading, rowKey, rowSelection, defaultColumnWidth, pagination: pPagination, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export { ActionBtn } from './ActionBtn';
 export type { ActionBtnProps } from './ActionBtn';
-export type { DataTableProps, RowSelection };
-//# sourceMappingURL=data-table.d.ts.map
+export type { DataTableProps, RowSelection, TableColumnDef };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import noResult from '@tc/ui-react/assets/table/no-result.svg';
+import { useI18n } from '../../i18n';
+import { useMemo, useState } from 'react';
+import { Checkbox } from '../Checkbox';
+import { Pagination } from '../Pagination';
+import { Skeleton } from '../Skeleton';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+import { ActionBtn } from './ActionBtn';
+const defaultRowKey = 'id';
+const rowSelectionColumnWidth = 48;
+const actionColumnWidth = 96;
+const zeroOffset = '0px';
+const getRowKey = (record, index, rowKey = defaultRowKey) => {
+    if (typeof rowKey === 'function') {
+        return rowKey(record, index);
+    }
+    const key = record[rowKey];
+    return typeof key === 'string' || typeof key === 'number' ? key : index;
+};
+const renderCellContent = (column, value, record, rowIndex, hasAction) => {
+    if (hasAction && column.actions) {
+        const actions = typeof column.actions === 'function' ? column.actions(value, record, rowIndex) : column.actions;
+        return (_jsx("div", { className: "flex w-full min-w-0 justify-center", children: _jsx(ActionBtn, { actions: actions, overflow: column.actionOverflow ?? 'auto' }) }));
+    }
+    return column.render ? column.render(value, record, rowIndex) : value;
+};
+const getColumnWidth = (column, defaultColumnWidth) => {
+    const hasAction = column.isAction ?? column.key === 'action';
+    if (column.width) {
+        return column.width;
+    }
+    return `${hasAction ? actionColumnWidth : defaultColumnWidth}px`;
+};
+const getColumnStyle = (column, defaultColumnWidth) => {
+    const hasAction = column.isAction ?? column.key === 'action';
+    if (column.width || hasAction) {
+        const width = getColumnWidth(column, defaultColumnWidth);
+        return { width, minWidth: width };
+    }
+    return { minWidth: defaultColumnWidth };
+};
+const getFixedOffset = (widths) => {
+    if (widths.length === 0)
+        return zeroOffset;
+    if (widths.length === 1)
+        return widths[0];
+    return `calc(${widths.join(' + ')})`;
+};
+export function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowSelection, defaultColumnWidth = 100, pagination: pPagination, }) {
+    const t = useI18n();
+    const getCellValue = (record, column) => record[(column.dataIndex || column.key)];
+    const isControlled = rowSelection && Array.isArray(rowSelection.selectedRowKeys);
+    const [innerSelectedRowKeys, setInnerSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? []);
+    const selectedRowKeys = (isControlled ? rowSelection?.selectedRowKeys : innerSelectedRowKeys) ?? [];
+    const selectedKeySet = new Set(selectedRowKeys);
+    const [currentPage, setCurrentPage] = useState(1);
+    const { showPagination, pagination, data, pageStartIndex } = useMemo(() => {
+        let pagination;
+        let data = pData;
+        let showPagination;
+        let pageStartIndex = 0;
+        // 使用外部
+        if (pPagination) {
+            pagination = pPagination;
+            showPagination = pagination.total > 0;
+        }
+        // 使用内部
+        else {
+            pagination = {
+                onChange(v) {
+                    setCurrentPage(v);
+                },
+                current: currentPage,
+                pageSize: 10,
+                total: pData.length,
+            };
+            showPagination = pData.length > pagination.pageSize;
+            pageStartIndex = (pagination.current - 1) * pagination.pageSize;
+            data = pData.slice(pageStartIndex, pagination.current * pagination.pageSize);
+        }
+        return {
+            showPagination,
+            pagination,
+            data,
+            pageStartIndex,
+        };
+    }, [currentPage, pData, pPagination]);
+    const pageRowKeys = data.map((record, index) => getRowKey(record, pageStartIndex + index, rowKey));
+    const handleRowSelectChange = (key) => {
+        if (!rowSelection)
+            return;
+        const nextSelectedKeys = selectedKeySet.has(key)
+            ? selectedRowKeys.filter((k) => k !== key)
+            : [...selectedRowKeys, key];
+        const nextSelectedKeySet = new Set(nextSelectedKeys);
+        const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index, rowKey)));
+        if (!isControlled) {
+            setInnerSelectedRowKeys(nextSelectedKeys);
+        }
+        rowSelection.onChange?.(nextSelectedKeys, selectedRows, false);
+    };
+    const handleSelectAllChange = (event) => {
+        if (!rowSelection)
+            return;
+        const checked = event.target.checked;
+        let nextSelectedKeys;
+        if (checked) {
+            const pageKeySet = new Set(pageRowKeys);
+            nextSelectedKeys = Array.from(new Set([
+                ...selectedRowKeys,
+                //
+                ...pageRowKeys.filter((key) => !selectedKeySet.has(key)),
+            ]))
+                //
+                .filter((key) => pageKeySet.has(key) || selectedKeySet.has(key));
+        }
+        else {
+            const pageKeySet = new Set(pageRowKeys);
+            nextSelectedKeys = selectedRowKeys.filter((key) => !pageKeySet.has(key));
+        }
+        const nextSelectedKeySet = new Set(nextSelectedKeys);
+        const selectedRows = pData.filter((record, index) => nextSelectedKeySet.has(getRowKey(record, index, rowKey)));
+        if (!isControlled) {
+            setInnerSelectedRowKeys(nextSelectedKeys);
+        }
+        rowSelection.onChange?.(nextSelectedKeys, selectedRows, checked);
+    };
+    const allChecked = rowSelection
+        ? (rowSelection.isAll ?? (pageRowKeys.length > 0 && pageRowKeys.every((key) => selectedKeySet.has(key))))
+        : false;
+    const partiallyChecked = rowSelection ? pageRowKeys.some((key) => selectedKeySet.has(key)) && !allChecked : false;
+    const fixedColumns = useMemo(() => {
+        const columnsWithFixed = columns.map((column, index) => {
+            const hasAction = column.isAction ?? column.key === 'action';
+            return {
+                column,
+                index,
+                fixed: column.fixed ?? (hasAction ? 'right' : undefined),
+                width: getColumnWidth(column, defaultColumnWidth),
+            };
+        });
+        const leftOffsetWidths = rowSelection ? [`${rowSelectionColumnWidth}px`] : [];
+        const leftOffsets = new Map();
+        for (const item of columnsWithFixed) {
+            if (item.fixed !== 'left')
+                continue;
+            leftOffsets.set(item.index, getFixedOffset(leftOffsetWidths));
+            leftOffsetWidths.push(item.width);
+        }
+        const rightOffsetWidths = [];
+        const rightOffsets = new Map();
+        for (const item of [...columnsWithFixed].reverse()) {
+            if (item.fixed !== 'right')
+                continue;
+            rightOffsets.set(item.index, getFixedOffset(rightOffsetWidths));
+            rightOffsetWidths.push(item.width);
+        }
+        return columnsWithFixed.map((item) => ({
+            ...item,
+            fixedOffset: item.fixed === 'left'
+                ? leftOffsets.get(item.index)
+                : item.fixed === 'right'
+                    ? rightOffsets.get(item.index)
+                    : undefined,
+        }));
+    }, [columns, defaultColumnWidth, rowSelection]);
+    return (_jsxs("div", { className: "tc-ui-data-table bg-background rounded-[20px] overflow-hidden relative", children: [_jsxs(Table, { containerClassName: "rounded-b-none overflow-x-auto", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [rowSelection && (_jsxs(TableHead, { fixed: "left", style: {
+                                        width: '48px',
+                                        minWidth: '48px',
+                                    }, children: [rowSelection.beforeCheckboxNode, _jsx(Checkbox, { checked: allChecked, "aria-label": "Select all rows", indeterminate: partiallyChecked, onChange: (_, event) => handleSelectAllChange(event) })] })), fixedColumns.map(({ column, fixed, fixedOffset }) => {
+                                    const hasAction = column.isAction ?? column.key === 'action';
+                                    return (_jsx(TableHead, { isAction: hasAction, fixed: fixed, fixedOffset: fixedOffset, style: getColumnStyle(column, defaultColumnWidth), children: column.title }, column.key));
+                                })] }) }), _jsx(TableBody, { children: data.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + (rowSelection ? 1 : 0), className: "text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center w-full gap-2.5", children: [_jsx("img", { src: noResult, alt: t('components.dataTable.noData'), className: " w-24 h-24" }), t('components.dataTable.noData')] }) }) })) : (data.map((record, rowIndex) => {
+                            const absoluteRowIndex = pageStartIndex + rowIndex;
+                            const recordKey = getRowKey(record, absoluteRowIndex, rowKey);
+                            return (_jsxs(TableRow, { children: [rowSelection && (_jsx(TableCell, { fixed: "left", style: {
+                                            width: '48px',
+                                            minWidth: '48px',
+                                        }, children: _jsx(Checkbox, { checked: selectedKeySet.has(recordKey), "aria-label": "Select row", onChange: () => handleRowSelectChange(recordKey) }) })), fixedColumns.map(({ column, fixed, fixedOffset }) => {
+                                        const value = getCellValue(record, column);
+                                        const hasAction = column.isAction ?? column.key === 'action';
+                                        return (_jsx(TableCell, { isAction: hasAction, fixed: fixed, fixedOffset: fixedOffset, style: getColumnStyle(column, defaultColumnWidth), children: renderCellContent(column, value, record, rowIndex, hasAction) }, column.key));
+                                    })] }, recordKey));
+                        })) })] }), loading && (_jsx("div", { className: "absolute inset-0 rounded-[20px] bg-background/70 text-sm text-gray-600 z-[100]", children: _jsx(Skeleton, { mode: "tableloading", rows: 8 }) })), showPagination && (_jsx("div", { className: "px-6 pb-6 mt-6", children: _jsx(Pagination, { ...pagination }) }))] }));
+}
+export { ActionBtn } from './ActionBtn';

package/fe/packages/ui/react/components/Date/Calendar.js

@@ -4,6 +4,7 @@ import { addMonths, addYears, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek
 import { zhCN } from 'date-fns/locale';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { useMemo, useState } from 'react';
+import { Button } from '../Button';
 import { ModeType } from './data';
 import { useDateLocale } from './LocaleContext';
 import { TimePicker } from './TimePicker';
@@ -190,13 +191,13 @@ export function Calendar({ mode = ModeType.Single, value, onChange, disabledDate
     const handleTimeChangeInternal = (date) => {
         setPendingValue(date);
     };
-    return (_jsxs("div", { className: cn('p-3', showTime || isRangeMode ? 'flex flex-col' : 'w-[280px]', className), children: [_jsxs("div", { className: cn('flex', (showTime || isRangeMode) && 'gap-4'), children: [isRangeMode && (_jsxs("div", { className: "w-[140px] pr-3 border-r border-border", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: locale.quickRanges }), _jsx("div", { className: "space-y-1", children: quickRangePresets.map((preset) => (_jsx("button", { type: "button", onClick: () => handleQuickRangeClick(preset.getRange), className: cn('w-full text-left text-xs px-2 py-1 rounded', 'text-foreground hover:bg-muted transition-colors'), children: preset.label }, preset.label))) })] })), _jsxs("div", { className: "w-[280px]", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: prevYear, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronsLeft, { size: 16 }) }), _jsx("button", { onClick: prevMonth, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: "font-medium text-sm", children: format(currentMonth, 'yyyy年 M月', { locale: zhCN }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: nextMonth, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronRight, { size: 16 }) }), _jsx("button", { onClick: nextYear, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronsRight, { size: 16 }) })] })] }), _jsx("div", { className: "grid grid-cols-7 mb-2", children: weekDays.map((day) => (_jsx("div", { className: "text-center text-xs text-muted-foreground font-medium py-1", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-y-1", onMouseLeave: () => setHoverDate(null), children: days.map((date, i) => {
+    return (_jsxs("div", { className: cn('tc-ui-calendar p-3', showTime || isRangeMode ? 'flex flex-col' : 'w-[280px]', className), children: [_jsxs("div", { className: cn('flex', (showTime || isRangeMode) && 'gap-4'), children: [isRangeMode && (_jsxs("div", { className: "w-[140px] pr-3 border-r border-border", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: locale.quickRanges }), _jsx("div", { className: "space-y-1", children: quickRangePresets.map((preset) => (_jsx(Button, { variant: "text", type: "button", onClick: () => handleQuickRangeClick(preset.getRange), className: cn('w-full justify-start text-left text-xs px-2 py-1 rounded', 'text-foreground hover:bg-muted transition-colors'), children: preset.label }, preset.label))) })] })), _jsxs("div", { className: "w-[280px]", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "text", onClick: prevYear, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronsLeft, { size: 16 }) }), _jsx(Button, { variant: "text", onClick: prevMonth, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: "font-medium text-sm", children: format(currentMonth, locale.monthFormat, { locale: zhCN }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "text", onClick: nextMonth, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronRight, { size: 16 }) }), _jsx(Button, { variant: "text", onClick: nextYear, className: "p-1 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors", type: "button", children: _jsx(ChevronsRight, { size: 16 }) })] })] }), _jsx("div", { className: "grid grid-cols-7 mb-2", children: weekDays.map((day) => (_jsx("div", { className: "text-center text-xs text-muted-foreground font-medium py-1", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-y-1", onMouseLeave: () => setHoverDate(null), children: days.map((date, i) => {
                                     const selected = isSelected(date);
                                     const inRange = isInRange(date);
                                     const isToday = isSameDay(date, new Date());
                                     const isCurrentMonth = isSameMonth(date, currentMonth);
                                     const isDisabled = disabledDate?.(date);
-                                    return (_jsx("div", { className: "flex justify-center p-0", children: _jsx("button", { type: "button", onClick: () => handleDateClick(date), onMouseEnter: () => setHoverDate(date), disabled: isDisabled, className: cn('w-8 h-8 flex items-center justify-center rounded text-sm transition-colors relative z-10', !isCurrentMonth && 'text-muted-foreground/40', isCurrentMonth && !selected && !inRange && !isDisabled && 'text-foreground hover:bg-muted', selected && 'bg-theme text-theme-foreground hover:bg-theme/90', inRange && !selected && 'bg-theme/10 text-theme', !selected && !inRange && isToday && 'border border-theme text-theme', isDisabled && 'text-muted-foreground cursor-not-allowed hover:bg-transparent opacity-50'), children: format(date, 'd') }) }, i));
+                                    return (_jsx("div", { className: "flex justify-center p-0", children: _jsx(Button, { variant: "text", type: "button", onClick: () => handleDateClick(date), onMouseEnter: () => setHoverDate(date), disabled: isDisabled, className: cn('w-8 h-8 flex items-center justify-center rounded text-sm transition-colors relative z-10', !isCurrentMonth && 'text-muted-foreground/40', isCurrentMonth && !selected && !inRange && !isDisabled && 'text-foreground hover:bg-muted', selected && 'bg-theme text-theme-foreground hover:bg-theme/90', inRange && !selected && 'bg-theme/10 text-theme', !selected && !inRange && isToday && 'border border-theme text-theme', isDisabled && 'text-muted-foreground cursor-not-allowed hover:bg-transparent opacity-50'), children: format(date, 'd') }) }, i));
                                 }) })] }), showTime && (_jsx("div", { className: "flex flex-col border-l border-border pl-4", children: mode === ModeType.Single ? (_jsxs("div", { className: "flex flex-col justify-center h-full", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground mb-3 text-center", children: locale.selectTime }), _jsx(TimePicker, { value: pendingValue instanceof Date ? pendingValue : undefined, onChange: handleTimeChangeInternal, className: "border-0" })] })) : (
                         // Range mode: show two time pickers
                         _jsxs("div", { className: "space-y-4 flex flex-col justify-center h-full", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center", children: locale.startTime }), _jsx(TimePicker, { value: pendingValue && 'from' in pendingValue && pendingValue.from ? pendingValue.from : undefined, onChange: (newDate) => {
@@ -211,5 +212,5 @@ export function Calendar({ mode = ModeType.Single, value, onChange, disabledDate
                                                     from: range?.from,
                                                     to: newDate,
                                                 });
-                                            }, className: "border-0" })] }))] })) }))] }), showTime && (_jsx("div", { className: "pt-3 mt-3 border-t border-border", children: _jsx("button", { type: "button", onClick: handleConfirm, className: cn('w-full py-2 px-4 rounded', 'bg-theme text-theme-foreground', 'hover:bg-theme/90 transition-colors', 'text-sm font-medium'), children: locale.confirm }) }))] }));
+                                            }, className: "border-0" })] }))] })) }))] }), showTime && (_jsx("div", { className: "pt-3 mt-3 border-t border-border", children: _jsx(Button, { variant: "primary", type: "button", onClick: handleConfirm, className: cn('w-full py-2 px-4 rounded', 'bg-theme text-theme-foreground', 'hover:bg-theme/90 transition-colors', 'text-sm font-medium'), children: locale.confirm }) }))] }));
 }

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

@@ -1,6 +1,6 @@
-import { type DateRange, type QuickRangePreset } from './Calendar';
-import { ModeType } from './data';
-import { type DateLocaleConfig } from './locales';
+import { type DateRange, type QuickRangePreset } from "./Calendar";
+import { ModeType } from "./data";
+import { type DateLocaleConfig } from "./locales";
 export type DateChangeStrValue = [string, string] | string;
 type DateBaseValue = Date | DateRange;
 type Dates = DateBaseValue | [Date, Date];
@@ -29,6 +29,8 @@ export type DatePickerProps = {
      * 不传则使用默认预设
      */
     quickRanges?: QuickRangePreset[];
+    /** 自定义弹出容器，不传则默认挂载到 document.body */
+    getPopupContainer?: () => HTMLElement;
 };
 declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
 export { DatePicker };

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

@@ -1,17 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
-import { format as formatDate, isValid, parse } from 'date-fns';
-import { Calendar as CalendarIcon, X } from 'lucide-react';
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Calendar } from './Calendar';
-import { ModeType } from './data';
-import { useDateLocale } from './LocaleContext';
+import { cn } from "../../lib/utils";
+import { format as formatDate, isValid, parse } from "date-fns";
+import { Calendar as CalendarIcon, X } from "lucide-react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { Popup } from "../Popup";
+import { useDropdownPositioning } from "../hooks/useDropdownPositioning";
+import { Calendar } from "./Calendar";
+import { ModeType } from "./data";
+import { getDatePickerDropdownPosition } from "./dropdownPositioning";
+import { useDateLocale } from "./LocaleContext";
 const formatValue = (val, format) => {
     if (!val)
-        return '';
+        return "";
     if (val instanceof Date)
         return formatDate(val, format);
-    if ('from' in val) {
+    if ("from" in val) {
         if (val.from && val.to) {
             return `${formatDate(val.from, format)} - ${formatDate(val.to, format)}`;
         }
@@ -19,24 +24,26 @@ const formatValue = (val, format) => {
             return formatDate(val.from, format);
         }
     }
-    return '';
+    return "";
 };
 const formatDateValue = (val, format) => {
     if (!val)
-        return '';
+        return "";
     /**
      * 将 DateBaseValue  转为  yyyy-MM-dd | [yyyy-MM-dd, yyyy-MM-dd]
      */
     if (val instanceof Date)
         return formatDate(val, format);
-    if ('from' in val) {
+    if ("from" in val) {
         if (val.from && val.to) {
             return [formatDate(val.from, format), formatDate(val.to, format)];
         }
     }
-    return '';
+    return "";
 };
-const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: customFormat, placeholder, allowClear = true, disabled = false, showTime = false, value: pValue, defaultValue: pDefaultValue, onChange, disabledDate, locale: customLocale, quickRanges, }, ref) => {
+const DatePicker = forwardRef((props, ref) => {
+    const { mode = ModeType.Single, className, format: customFormat, placeholder, allowClear = true, disabled = false, showTime = false, value: pValue, defaultValue: pDefaultValue, onChange, disabledDate, locale: customLocale, quickRanges, getPopupContainer, } = props;
+    const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
     const contextLocale = useDateLocale();
     const locale = { ...contextLocale, ...customLocale };
     // 如果没有传入 placeholder，根据模式自动选择
@@ -49,7 +56,7 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
                 ? locale.placeholderRange
                 : locale.placeholder);
     // Auto-adjust format based on showTime
-    const format = customFormat || (showTime ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd');
+    const format = customFormat || (showTime ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd");
     const { value, defaultValue } = useMemo(() => {
         /**
          * 将 DateChangeStrValue 转为 Dates
@@ -61,10 +68,10 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
             if (val instanceof Date)
                 return val;
             // Already a DateRange object
-            if (typeof val === 'object' && 'from' in val)
+            if (typeof val === "object" && "from" in val)
                 return val;
             // String value - single date
-            if (typeof val === 'string') {
+            if (typeof val === "string") {
                 try {
                     const parsed = parse(val, format, new Date());
                     return isValid(parsed) ? parsed : undefined;
@@ -76,7 +83,7 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
             // date range
             if (Array.isArray(val)) {
                 // string
-                if (typeof val[0] === 'string' && typeof val[1] === 'string') {
+                if (typeof val[0] === "string" && typeof val[1] === "string") {
                     try {
                         const from = parse(val[0], format, new Date());
                         const to = parse(val[1], format, new Date());
@@ -97,40 +104,42 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
             defaultValue: convertValue(pDefaultValue),
         };
     }, [pDefaultValue, pValue, format]);
-    const [selectedDate, setSelectedDate] = useState(value || defaultValue);
+    const initialValue = isControlled ? value : (value || defaultValue);
+    const [selectedDate, setSelectedDate] = useState(initialValue);
     const [isOpen, setIsOpen] = useState(false);
-    const [inputValue, setInputValue] = useState(formatValue(value || defaultValue, format));
+    const [inputValue, setInputValue] = useState(formatValue(initialValue, format));
     const [isHover, setIsHover] = useState(false);
     const containerRef = useRef(null);
+    const dropdownContentRef = useRef(null);
     const inputRef = useRef(null);
+    const rangeDraftRef = useRef(false);
+    const positioning = useDropdownPositioning({
+        open: isOpen,
+        anchorRef: containerRef,
+        contentRef: dropdownContentRef,
+        placement: "bottom-start",
+        offset: 8,
+        matchAnchorWidth: false,
+        strategy: getDatePickerDropdownPosition,
+    });
     // 同步外部 value 变化
     useEffect(() => {
-        if (value !== undefined) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setSelectedDate(value);
-            setInputValue(formatValue(value, format));
+        if (!isControlled)
+            return;
+        if (mode === ModeType.Range && rangeDraftRef.current && value === undefined) {
+            return;
         }
-    }, [value, format]);
-    // 点击外部关闭
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => document.removeEventListener('mousedown', handleClickOutside);
-        }
-        else {
-            return () => { };
+        setSelectedDate(value);
+        setInputValue(formatValue(value, format));
+        if (mode !== ModeType.Range || !value || !('from' in value) || value.to) {
+            rangeDraftRef.current = false;
         }
-    }, [isOpen]);
+    }, [isControlled, mode, value, format]);
     const handleSelect = (date) => {
         const newDate = date;
         if (mode === ModeType.Range) {
             // 如果是范围选择，只有当 from 和 to 都存在时才关闭
-            if (date && 'from' in date && 'to' in date && date.from && date.to) {
+            if (date && "from" in date && "to" in date && date.from && date.to) {
                 setIsOpen(false);
             }
         }
@@ -139,18 +148,24 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
             // (In showTime mode, this only happens when user clicks confirm button)
             setIsOpen(false);
         }
-        setSelectedDate(newDate);
-        setInputValue(formatValue(newDate, format));
-        // 只在非受控模式下更新内部状态
-        if (value === undefined) {
+        // range 选择需要保留内部草稿态，避免受控 value 把第一步点击抹掉
+        if (mode === ModeType.Range || !isControlled) {
             setSelectedDate(newDate);
+            setInputValue(formatValue(newDate, format));
         }
+        rangeDraftRef.current =
+            mode === ModeType.Range && !(newDate &&
+                typeof newDate === 'object' &&
+                'from' in newDate &&
+                newDate.from &&
+                newDate.to);
         onChange?.(formatDateValue(newDate, format), newDate);
     };
     const handleClear = (e) => {
         e.stopPropagation();
+        rangeDraftRef.current = false;
         setSelectedDate(undefined);
-        setInputValue('');
+        setInputValue("");
         onChange?.(undefined, undefined);
         inputRef.current?.focus();
     };
@@ -161,7 +176,7 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
             try {
                 const parsedDate = parse(newValue, format, new Date());
                 if (isValid(parsedDate)) {
-                    if (value === undefined)
+                    if (!isControlled)
                         setSelectedDate(parsedDate);
                     onChange?.(formatDateValue(parsedDate, format), parsedDate);
                 }
@@ -172,7 +187,15 @@ const DatePicker = forwardRef(({ mode = ModeType.Single, className, format: cust
         }
     };
     const showClearIcon = allowClear && selectedDate && !disabled && isHover;
-    return (_jsx("div", { ref: ref, className: cn('relative w-full', mode === ModeType.Range ? 'min-w-[255px]' : '', className), children: _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { className: cn('flex items-center w-full rounded-lg px-4 py-3 text-sm', 'border transition-colors duration-200', 'bg-background cursor-pointer', disabled && 'cursor-not-allowed bg-muted border-border text-muted-foreground', !disabled && !selectedDate && !isOpen && 'border-border', !disabled && (selectedDate || isOpen) && 'border-theme'), onClick: () => !disabled && setIsOpen(!isOpen), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: [_jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: finalPlaceholder, disabled: disabled, readOnly: mode === ModeType.Range, className: cn('flex-1 bg-transparent border-0 outline-none', 'text-sm text-foreground placeholder:text-muted-foreground', disabled && 'cursor-not-allowed', mode === ModeType.Range && !disabled && 'cursor-pointer caret-transparent') }), showClearIcon ? (_jsx("button", { type: "button", onClick: handleClear, title: locale.clear, "aria-label": locale.clear, className: cn('ml-2 flex items-center justify-center', 'w-5 h-5 rounded-full', 'bg-muted hover:bg-muted/80', 'text-foreground transition-colors'), children: _jsx(X, { size: 12 }) })) : (_jsx(CalendarIcon, { size: 16, className: "ml-2 text-muted-foreground" }))] }), isOpen && !disabled && (_jsx("div", { className: cn('absolute z-50 mt-2', 'bg-background border border-border rounded-lg shadow-lg', 'overflow-hidden'), children: _jsx(Calendar, { mode: mode, value: selectedDate || null, onChange: handleSelect, disabledDate: disabledDate, showTime: showTime, locale: locale, quickRanges: quickRanges }) }))] }) }));
+    return (_jsx("div", { ref: ref, className: cn("tc-ui-date-picker relative w-full", mode === ModeType.Range ? "min-w-[255px]" : "", className), children: _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { className: cn("flex items-center w-full rounded-lg px-4 py-3 text-sm", "border transition-colors duration-200", "bg-background cursor-pointer", disabled &&
+                        "cursor-not-allowed bg-muted border-border text-muted-foreground", !disabled && !selectedDate && !isOpen && "border-border", !disabled && (selectedDate || isOpen) && "border-theme"), onClick: () => !disabled && setIsOpen(!isOpen), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: [_jsx(Input, { ref: inputRef, type: "text", value: inputValue, onChange: (_, e) => handleInputChange(e), placeholder: finalPlaceholder, disabled: disabled, readOnly: mode === ModeType.Range, className: "flex-1", inputClassName: cn("flex-1 rounded-none border-0 bg-transparent px-0 py-0 outline-none", "text-sm text-foreground placeholder:text-muted-foreground", disabled && "cursor-not-allowed", mode === ModeType.Range &&
+                                !disabled &&
+                                "cursor-pointer caret-transparent") }), showClearIcon ? (_jsx(Button, { variant: "text", type: "button", onClick: handleClear, title: locale.clear, "aria-label": locale.clear, className: cn("ml-2 flex items-center justify-center", "w-5 h-5 rounded-full", "bg-muted hover:bg-muted/80", "text-foreground transition-colors", "cursor-pointer"), children: _jsx(X, { size: 12 }) })) : (_jsx(CalendarIcon, { size: 16, className: "ml-2 text-muted-foreground" }))] }), _jsx(Popup, { open: isOpen && !disabled, anchorRef: containerRef, contentRef: dropdownContentRef, positioning: positioning, keepMounted: true, onOpenChange: (nextOpen) => {
+                        setIsOpen(nextOpen);
+                        if (!nextOpen) {
+                            rangeDraftRef.current = false;
+                        }
+                    }, className: cn("overflow-hidden"), container: getPopupContainer?.(), children: _jsx("div", { ref: dropdownContentRef, children: _jsx(Calendar, { mode: mode, value: selectedDate || null, onChange: handleSelect, disabledDate: disabledDate, showTime: showTime, locale: locale, quickRanges: quickRanges }) }) })] }) }));
 });
-DatePicker.displayName = 'DatePicker';
+DatePicker.displayName = "DatePicker";
 export { DatePicker };

package/fe/packages/ui/react/components/Date/TimePicker.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from '../Button';
+import { Input } from '../Input';
 export function TimePicker({ value, onChange, className }) {
     // Derive time from value prop directly
     const hours = value?.getHours() ?? 0;
@@ -72,5 +74,5 @@ export function TimePicker({ value, onChange, className }) {
         }
     };
     const formatNumber = (num) => String(num).padStart(2, '0');
-    return (_jsxs("div", { className: cn('flex items-center justify-center gap-3 py-3', className), children: [_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("button", { type: "button", onClick: incrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx("input", { type: "text", value: formatNumber(hours), onChange: handleHoursInput, onKeyDown: handleHoursKeyDown, className: cn('w-12 h-9 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx("button", { type: "button", onClick: decrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] }), _jsx("div", { className: "text-lg font-medium text-foreground mb-1", children: ":" }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("button", { type: "button", onClick: incrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx("input", { type: "text", value: formatNumber(minutes), onChange: handleMinutesInput, onKeyDown: handleMinutesKeyDown, className: cn('w-12 h-9 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx("button", { type: "button", onClick: decrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] })] }));
+    return (_jsxs("div", { className: cn('tc-ui-time-picker flex items-center justify-center gap-3 py-3', className), children: [_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(Button, { variant: "text", type: "button", onClick: incrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx(Input, { type: "text", value: formatNumber(hours), onChange: (_, e) => handleHoursInput(e), onKeyDown: handleHoursKeyDown, className: "w-12", inputClassName: cn('w-12 h-9 px-0 py-0 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx(Button, { variant: "text", type: "button", onClick: decrementHours, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] }), _jsx("div", { className: "text-lg font-medium text-foreground mb-1", children: ":" }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(Button, { variant: "text", type: "button", onClick: incrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronUp, { size: 14 }) }), _jsx(Input, { type: "text", value: formatNumber(minutes), onChange: (_, e) => handleMinutesInput(e), onKeyDown: handleMinutesKeyDown, className: "w-12", inputClassName: cn('w-12 h-9 px-0 py-0 text-center text-sm font-medium', 'border border-border rounded', 'bg-background text-foreground', 'focus:outline-none focus:border-theme', 'transition-colors'), maxLength: 2 }), _jsx(Button, { variant: "text", type: "button", onClick: decrementMinutes, className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground", children: _jsx(ChevronDown, { size: 14 }) })] })] }));
 }