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

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

@@ -1,155 +0,0 @@
-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 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;
-};
-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;
-    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, { className: "bg-table-header", style: {
-                                        width: '48px',
-                                        minWidth: '48px',
-                                        position: 'sticky',
-                                        left: 0,
-                                        zIndex: 10,
-                                    }, children: [rowSelection.beforeCheckboxNode, _jsx(Checkbox, { checked: allChecked, "aria-label": "Select all rows", indeterminate: partiallyChecked, onChange: (_, event) => handleSelectAllChange(event) })] })), columns.map((column) => {
-                                    const hasAction = column.isAction ?? column.key === 'action';
-                                    return (_jsx(TableHead, { isAction: hasAction, style: {
-                                            ...(hasAction
-                                                ? {
-                                                    position: 'sticky',
-                                                    right: 0,
-                                                    zIndex: 10,
-                                                }
-                                                : undefined),
-                                            ...(column.width
-                                                ? { width: column.width, minWidth: column.width }
-                                                : { minWidth: 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, { className: "bg-background", style: {
-                                            width: '48px',
-                                            minWidth: '48px',
-                                            position: 'sticky',
-                                            left: 0,
-                                            zIndex: 1,
-                                        }, children: _jsx(Checkbox, { checked: selectedKeySet.has(recordKey), "aria-label": "Select row", onChange: () => handleRowSelectChange(recordKey) }) })), columns.map((column) => {
-                                        const value = getCellValue(record, column);
-                                        const hasAction = column.isAction ?? column.key === 'action';
-                                        return (_jsx(TableCell, { isAction: hasAction, style: {
-                                                ...(hasAction
-                                                    ? {
-                                                        position: 'sticky',
-                                                        right: 0,
-                                                        zIndex: 1,
-                                                    }
-                                                    : undefined),
-                                                ...(column.width
-                                                    ? { width: column.width, minWidth: column.width }
-                                                    : { minWidth: 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

@@ -1,216 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
-import { addMonths, addYears, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, isAfter, isBefore, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek, subDays, subMonths, subYears, } from 'date-fns';
-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';
-export function Calendar({ mode = ModeType.Single, value, onChange, disabledDate, showTime, className, locale: customLocale, quickRanges, }) {
-    const contextLocale = useDateLocale();
-    const locale = useMemo(() => ({ ...contextLocale, ...customLocale }), [contextLocale, customLocale]);
-    // Pending value for showTime mode (confirmed on button click)
-    const [pendingValue, setPendingValue] = useState(value ?? null);
-    // 当前显示的月份
-    const [currentMonth, setCurrentMonth] = useState(() => {
-        if (value instanceof Date)
-            return value;
-        if (value && 'from' in value && value.from)
-            return value.from;
-        return new Date();
-    });
-    // 悬停日期（用于范围选择预览）
-    const [hoverDate, setHoverDate] = useState(null);
-    // 生成日历网格数据
-    const days = useMemo(() => {
-        const monthStart = startOfMonth(currentMonth);
-        const monthEnd = endOfMonth(monthStart);
-        const startDate = startOfWeek(monthStart, { locale: zhCN, weekStartsOn: 0 });
-        const endDate = endOfWeek(monthEnd, { locale: zhCN, weekStartsOn: 0 });
-        const daysInGrid = eachDayOfInterval({
-            start: startDate,
-            end: endDate,
-        });
-        if (daysInGrid.length < 42) {
-            const remaining = 42 - daysInGrid.length;
-            const lastDay = daysInGrid[daysInGrid.length - 1];
-            const extraDays = eachDayOfInterval({
-                start: new Date(lastDay.getTime() + 86400000),
-                end: new Date(lastDay.getTime() + remaining * 86400000),
-            });
-            daysInGrid.push(...extraDays);
-        }
-        return daysInGrid;
-    }, [currentMonth]);
-    const weekDays = locale.weekDays;
-    const isRangeMode = mode === ModeType.Range;
-    const builtInQuickRanges = useMemo(() => [
-        {
-            label: locale.quickRangeToday,
-            getRange: () => {
-                const today = new Date();
-                return { from: startOfDay(today), to: endOfDay(today) };
-            },
-        },
-        {
-            label: locale.quickRangeYesterday,
-            getRange: () => {
-                const yesterday = subDays(new Date(), 1);
-                return { from: startOfDay(yesterday), to: endOfDay(yesterday) };
-            },
-        },
-        {
-            label: locale.quickRangeLast7Days,
-            getRange: () => {
-                const end = new Date();
-                const start = subDays(end, 6);
-                return { from: startOfDay(start), to: endOfDay(end) };
-            },
-        },
-        {
-            label: locale.quickRangeLast30Days,
-            getRange: () => {
-                const end = new Date();
-                const start = subDays(end, 29);
-                return { from: startOfDay(start), to: endOfDay(end) };
-            },
-        },
-        {
-            label: locale.quickRangeThisMonth,
-            getRange: () => {
-                const today = new Date();
-                return { from: startOfMonth(today), to: endOfMonth(today) };
-            },
-        },
-        {
-            label: locale.quickRangeLastYear,
-            getRange: () => {
-                const end = new Date();
-                const start = subYears(end, 1);
-                return { from: startOfDay(start), to: endOfDay(end) };
-            },
-        },
-    ], [locale]);
-    const quickRangePresets = quickRanges && quickRanges.length > 0 ? quickRanges : builtInQuickRanges;
-    const handleQuickRangeClick = (getRange) => {
-        const range = getRange();
-        setCurrentMonth(range.from ?? new Date());
-        if (showTime) {
-            setPendingValue(range);
-        }
-        else {
-            onChange?.(range);
-        }
-    };
-    const prevMonth = () => setCurrentMonth(subMonths(currentMonth, 1));
-    const nextMonth = () => setCurrentMonth(addMonths(currentMonth, 1));
-    const prevYear = () => setCurrentMonth(subYears(currentMonth, 1));
-    const nextYear = () => setCurrentMonth(addYears(currentMonth, 1));
-    const handleDateClick = (date) => {
-        if (disabledDate?.(date))
-            return;
-        // Preserve time when showTime is enabled
-        let dateWithTime = date;
-        if (showTime && pendingValue instanceof Date) {
-            dateWithTime = new Date(date);
-            dateWithTime.setHours(pendingValue.getHours());
-            dateWithTime.setMinutes(pendingValue.getMinutes());
-            dateWithTime.setSeconds(0);
-            dateWithTime.setMilliseconds(0);
-        }
-        if (showTime) {
-            // In showTime mode, store in pending value
-            if (mode === ModeType.Single) {
-                setPendingValue(dateWithTime);
-            }
-            else {
-                const range = pendingValue || { from: undefined, to: undefined };
-                if (!range.from || (range.from && range.to)) {
-                    setPendingValue({ from: dateWithTime, to: undefined });
-                }
-                else {
-                    if (isBefore(dateWithTime, range.from)) {
-                        setPendingValue({ from: dateWithTime, to: range.from });
-                    }
-                    else {
-                        setPendingValue({ from: range.from, to: dateWithTime });
-                    }
-                }
-            }
-        }
-        else {
-            // Without showTime, directly call onChange
-            if (mode === ModeType.Single) {
-                onChange?.(dateWithTime);
-            }
-            else {
-                const range = value || { from: undefined, to: undefined };
-                if (!range.from || (range.from && range.to)) {
-                    onChange?.({ from: dateWithTime, to: undefined });
-                }
-                else {
-                    if (isBefore(dateWithTime, range.from)) {
-                        onChange?.({ from: dateWithTime, to: range.from });
-                    }
-                    else {
-                        onChange?.({ from: range.from, to: dateWithTime });
-                    }
-                }
-            }
-        }
-    };
-    const isSelected = (date) => {
-        const compareValue = showTime ? pendingValue : value;
-        if (mode === ModeType.Single) {
-            return compareValue instanceof Date && isSameDay(date, compareValue);
-        }
-        else {
-            const range = compareValue;
-            return (range?.from && isSameDay(date, range.from)) || (range?.to && isSameDay(date, range.to));
-        }
-    };
-    const isInRange = (date) => {
-        if (mode !== ModeType.Range)
-            return false;
-        const compareValue = showTime ? pendingValue : value;
-        const range = compareValue;
-        if (!range?.from)
-            return false;
-        const end = range.to || hoverDate;
-        if (!end)
-            return false;
-        return (isAfter(date, range.from) && isBefore(date, end)) || (isAfter(date, end) && isBefore(date, range.from));
-    };
-    const handleConfirm = () => {
-        if (pendingValue) {
-            onChange?.(pendingValue);
-        }
-    };
-    const handleTimeChangeInternal = (date) => {
-        setPendingValue(date);
-    };
-    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, { 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) => {
-                                                const range = pendingValue;
-                                                setPendingValue({
-                                                    from: newDate,
-                                                    to: range?.to,
-                                                });
-                                            }, className: "border-0" })] }), pendingValue && 'from' in pendingValue && pendingValue.to && (_jsxs("div", { className: "pt-4 border-t border-border", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center", children: locale.endTime }), _jsx(TimePicker, { value: pendingValue.to, onChange: (newDate) => {
-                                                const range = pendingValue;
-                                                setPendingValue({
-                                                    from: range?.from,
-                                                    to: newDate,
-                                                });
-                                            }, 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.js

@@ -1,201 +0,0 @@
-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 { 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 "";
-    if (val instanceof Date)
-        return formatDate(val, format);
-    if ("from" in val) {
-        if (val.from && val.to) {
-            return `${formatDate(val.from, format)} - ${formatDate(val.to, format)}`;
-        }
-        if (val.from) {
-            return formatDate(val.from, format);
-        }
-    }
-    return "";
-};
-const formatDateValue = (val, format) => {
-    if (!val)
-        return "";
-    /**
-     * 将 DateBaseValue  转为  yyyy-MM-dd | [yyyy-MM-dd, yyyy-MM-dd]
-     */
-    if (val instanceof Date)
-        return formatDate(val, format);
-    if ("from" in val) {
-        if (val.from && val.to) {
-            return [formatDate(val.from, format), formatDate(val.to, format)];
-        }
-    }
-    return "";
-};
-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，根据模式自动选择
-    const finalPlaceholder = placeholder ||
-        (showTime
-            ? mode === ModeType.Range
-                ? locale.placeholderDateTimeRange
-                : locale.placeholderDateTime
-            : mode === ModeType.Range
-                ? locale.placeholderRange
-                : locale.placeholder);
-    // Auto-adjust format based on showTime
-    const format = customFormat || (showTime ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd");
-    const { value, defaultValue } = useMemo(() => {
-        /**
-         * 将 DateChangeStrValue 转为 Dates
-         */
-        const convertValue = (val) => {
-            if (!val)
-                return undefined;
-            // Already a Date object
-            if (val instanceof Date)
-                return val;
-            // Already a DateRange object
-            if (typeof val === "object" && "from" in val)
-                return val;
-            // String value - single date
-            if (typeof val === "string") {
-                try {
-                    const parsed = parse(val, format, new Date());
-                    return isValid(parsed) ? parsed : undefined;
-                }
-                catch {
-                    return undefined;
-                }
-            }
-            // date range
-            if (Array.isArray(val)) {
-                // 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());
-                        return isValid(from) && isValid(to) ? { from, to } : undefined;
-                    }
-                    catch {
-                        return undefined;
-                    }
-                }
-                else {
-                    return { from: val[0], to: val[1] };
-                }
-            }
-            return undefined;
-        };
-        return {
-            value: convertValue(pValue),
-            defaultValue: convertValue(pDefaultValue),
-        };
-    }, [pDefaultValue, pValue, format]);
-    const initialValue = isControlled ? value : (value || defaultValue);
-    const [selectedDate, setSelectedDate] = useState(initialValue);
-    const [isOpen, setIsOpen] = useState(false);
-    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 (!isControlled)
-            return;
-        if (mode === ModeType.Range && rangeDraftRef.current && value === undefined) {
-            return;
-        }
-        setSelectedDate(value);
-        setInputValue(formatValue(value, format));
-        if (mode !== ModeType.Range || !value || !('from' in value) || value.to) {
-            rangeDraftRef.current = false;
-        }
-    }, [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) {
-                setIsOpen(false);
-            }
-        }
-        else {
-            // Single mode: always close popup when onChange is triggered
-            // (In showTime mode, this only happens when user clicks confirm button)
-            setIsOpen(false);
-        }
-        // 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("");
-        onChange?.(undefined, undefined);
-        inputRef.current?.focus();
-    };
-    const handleInputChange = (e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        if (mode === ModeType.Single) {
-            try {
-                const parsedDate = parse(newValue, format, new Date());
-                if (isValid(parsedDate)) {
-                    if (!isControlled)
-                        setSelectedDate(parsedDate);
-                    onChange?.(formatDateValue(parsedDate, format), parsedDate);
-                }
-            }
-            catch {
-                // ignore invalid date
-            }
-        }
-    };
-    const showClearIcon = allowClear && selectedDate && !disabled && isHover;
-    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";
-export { DatePicker };

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

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { startOfDay } from 'date-fns';
-import { useState } from 'react';
-import { DatePicker } from './Date';
-export default function DateTestPage() {
-    const [date1, setDate1] = useState();
-    const [dateTime1, setDateTime1] = useState();
-    const [range, setRange] = useState();
-    const [rangeWithTime, setRangeWithTime] = useState();
-    const [emptyRange, setEmptyRange] = useState();
-    return (_jsxs("div", { className: "p-8 max-w-6xl mx-auto space-y-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: "Date \u7EC4\u4EF6\u4F7F\u7528\u793A\u4F8B" }), _jsx("p", { className: "text-muted-foreground", children: "\u5C55\u793A DatePicker \u7EC4\u4EF6\u7684\u5404\u79CD\u4F7F\u7528\u573A\u666F" })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "1. \u57FA\u672C\u7528\u6CD5" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u5355\u65E5\u671F\u9009\u62E9" }), _jsx(DatePicker, { placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u7981\u7528\u6E05\u9664\u6309\u94AE" }), _jsx(DatePicker, { placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F", allowClear: false })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "2. \u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668 (showTime)" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "\u65F6\u95F4\u9009\u62E9\u5668\u663E\u793A\u5728\u65E5\u5386\u53F3\u4FA7\uFF0C\u63D0\u4F9B\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C" }), _jsxs("div", { className: "grid grid-cols-2 gap-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "\u57FA\u672C\u7528\u6CD5 - \u5355\u65E5\u671F\u65F6\u95F4" }), _jsx(DatePicker, { showTime: true, placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4" }), _jsx("p", { className: "text-xs text-muted-foreground mt-2", children: "\u70B9\u51FB\u8F93\u5165\u6846\u6253\u5F00\u9009\u62E9\u5668\uFF0C\u65F6\u95F4\u9009\u62E9\u5668\u5728\u53F3\u4FA7\u663E\u793A" })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "\u53D7\u63A7\u6A21\u5F0F" }), _jsx(DatePicker, { showTime: true, value: dateTime1, onChange: (val, date) => {
-                                            setDateTime1(val);
-                                            console.log('选中日期时间:', val);
-                                            console.log('Date 对象:', date);
-                                        }, placeholder: "\u53D7\u63A7\u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u9009\u4E2D\u7684\u503C: ", _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: String(dateTime1 || '未选择') })] })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "3. \u8303\u56F4\u9009\u62E9 (Range Picker)" }), _jsxs("div", { className: "grid grid-cols-2 gap-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "\u57FA\u672C\u8303\u56F4\u9009\u62E9" }), _jsx(DatePicker, { mode: "range", value: emptyRange, onChange: (val) => {
-                                            setEmptyRange(val);
-                                            console.log('范围选择:', val);
-                                        }, placeholder: "\u9009\u62E9\u65E5\u671F\u8303\u56F4" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u503C: ", _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: JSON.stringify(emptyRange || '未选择') })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium mb-2", children: "\u8303\u56F4\u9009\u62E9 + \u65F6\u95F4\u9009\u62E9" }), _jsx(DatePicker, { mode: "range", value: rangeWithTime, showTime: true, onChange: (val) => {
-                                            setRangeWithTime(val);
-                                            console.log('范围时间选择:', val);
-                                        }, placeholder: "\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u8303\u56F4" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u503C:", ' ', _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: JSON.stringify(rangeWithTime || '未选择') })] }), _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "\u9009\u62E9\u5F00\u59CB\u65E5\u671F\u540E\uFF0C\u53F3\u4FA7\u4F1A\u663E\u793A\u5F00\u59CB\u65F6\u95F4\u9009\u62E9\u5668\uFF1B\u9009\u62E9\u7ED3\u675F\u65E5\u671F\u540E\uFF0C\u4F1A\u663E\u793A\u7ED3\u675F\u65F6\u95F4\u9009\u62E9\u5668" })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "4. \u53D7\u63A7\u6A21\u5F0F" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u5355\u65E5\u671F\u53D7\u63A7" }), _jsx(DatePicker, { value: date1, onChange: (date, dateString) => {
-                                            setDate1(date);
-                                            console.log('选中日期:', date);
-                                            console.log('日期字符串:', dateString);
-                                        }, placeholder: "\u53D7\u63A7\u65E5\u671F\u9009\u62E9\u5668" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u9009\u4E2D\u7684\u65E5\u671F: ", _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: String(date1 || '未选择') })] })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u8303\u56F4\u53D7\u63A7" }), _jsx(DatePicker, { mode: "range", value: range, onChange: (val) => {
-                                            setRange(val);
-                                            console.log('范围变化:', val);
-                                        }, placeholder: "\u53D7\u63A7\u8303\u56F4\u9009\u62E9\u5668" }), _jsxs("p", { className: "text-sm text-muted-foreground mt-2", children: ["\u503C: ", _jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: JSON.stringify(range || '未选择') })] })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "5. \u7981\u7528\u65E5\u671F" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u53EA\u80FD\u9009\u62E9\u4ECA\u5929\u53CA\u4EE5\u540E" }), _jsx(DatePicker, { disabledDate: (current) => current < startOfDay(new Date()), placeholder: "\u9009\u62E9\u672A\u6765\u65E5\u671F" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u8303\u56F4\u9009\u62E9\uFF08\u7981\u7528\u8FC7\u53BB\uFF09" }), _jsx(DatePicker, { mode: "range", disabledDate: (current) => current < startOfDay(new Date()), placeholder: "\u9009\u62E9\u672A\u6765\u8303\u56F4" })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "6. \u7981\u7528\u72B6\u6001" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u7981\u7528\u72B6\u6001" }), _jsx(DatePicker, { disabled: true, placeholder: "\u7981\u7528\u72B6\u6001" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u7981\u7528\u72B6\u6001 + \u6709\u503C" }), _jsx(DatePicker, { disabled: true, value: "2024-01-15", placeholder: "\u7981\u7528\u72B6\u6001" })] })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "7. \u81EA\u5B9A\u4E49\u683C\u5F0F" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u81EA\u5B9A\u4E49\u65E5\u671F\u683C\u5F0F" }), _jsx(DatePicker, { format: "yyyy/MM/dd", placeholder: "\u9009\u62E9\u65E5\u671F (yyyy/MM/dd)" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "\u81EA\u5B9A\u4E49\u65E5\u671F\u65F6\u95F4\u683C\u5F0F" }), _jsx(DatePicker, { showTime: true, format: "yyyy-MM-dd HH:mm:ss", placeholder: "\u9009\u62E9\u65E5\u671F\u65F6\u95F4 (yyyy-MM-dd HH:mm:ss)" })] })] })] }), _jsxs("section", { className: "space-y-4 border-t pt-6", children: [_jsx("h2", { className: "text-xl font-semibold", children: "API \u8BF4\u660E" }), _jsxs("div", { className: "bg-muted/50 p-4 rounded-lg space-y-2 text-sm", children: [_jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "showTime" }), _jsx("span", { className: "text-muted-foreground ml-2", children: ": boolean - \u662F\u5426\u663E\u793A\u65F6\u95F4\u9009\u62E9\u5668\uFF0C\u65F6\u95F4\u9009\u62E9\u5668\u4F1A\u663E\u793A\u5728\u65E5\u5386\u53F3\u4FA7" })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "mode" }), _jsx("span", { className: "text-muted-foreground ml-2", children: ": 'single' | 'range' - \u9009\u62E9\u6A21\u5F0F\uFF0Csingle \u4E3A\u5355\u65E5\u671F\uFF0Crange \u4E3A\u65E5\u671F\u8303\u56F4" })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "value" }), _jsx("span", { className: "text-muted-foreground ml-2", children: ": string | [string, string] - \u53D7\u63A7\u6A21\u5F0F\u7684\u503C" })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "onChange" }), _jsxs("span", { className: "text-muted-foreground ml-2", children: [": (value?: DateChangeStrValue, date?: Date | DateRange) =", '>', " void - \u503C\u53D8\u5316\u56DE\u8C03"] })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "format" }), _jsx("span", { className: "text-muted-foreground ml-2", children: ": string - \u65E5\u671F\u683C\u5F0F\uFF0C\u9ED8\u8BA4 'yyyy-MM-dd'\uFF0CshowTime \u65F6\u4E3A 'yyyy-MM-dd HH:mm'" })] }), _jsxs("div", { children: [_jsx("code", { className: "font-semibold", children: "disabledDate" }), _jsxs("span", { className: "text-muted-foreground ml-2", children: [": (current: Date) =", '>', " boolean - \u7981\u7528\u65E5\u671F\u7684\u5224\u65AD\u51FD\u6570"] })] })] })] })] }));
-}

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

@@ -1,8 +0,0 @@
-import { useDateLocaleStore } from './dateLocaleStore';
-/**
- * Hook for accessing the current Date component locale.
- * Backed by Zustand, so no React Context is required.
- */
-export const useDateLocale = () => {
-    return useDateLocaleStore((state) => state.locale);
-};