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

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

@@ -0,0 +1,215 @@
+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 { 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('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) => {
+                                    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));
+                                }) })] }), 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", { 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/{packages → fe/packages}/ui/react/components/Date/Date.d.ts

@@ -9,6 +9,9 @@ export type DatePickerProps = {
     mode?: ModeType;
     value?: DateValue;
     defaultValue?: DateValue;
+    /**
+     * @default 'yyyy-MM-dd'
+     */
     format?: string;
     placeholder?: string;
     disabled?: boolean;
@@ -17,7 +20,14 @@ export type DatePickerProps = {
     onChange?: (value?: DateChangeStrValue, date?: Dates) => void;
     disabledDate?: (current: Date) => boolean;
     className?: string;
+    /**
+     * 自定义文案配置，会覆盖默认文案
+     */
     locale?: Partial<DateLocaleConfig>;
+    /**
+     * 范围模式下的快捷选择配置
+     * 不传则使用默认预设
+     */
     quickRanges?: QuickRangePreset[];
 };
 declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,178 @@
+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';
+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(({ mode = ModeType.Single, className, format: customFormat, placeholder, allowClear = true, disabled = false, showTime = false, value: pValue, defaultValue: pDefaultValue, onChange, disabledDate, locale: customLocale, quickRanges, }, ref) => {
+    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 [selectedDate, setSelectedDate] = useState(value || defaultValue);
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(formatValue(value || defaultValue, format));
+    const [isHover, setIsHover] = useState(false);
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    // 同步外部 value 变化
+    useEffect(() => {
+        if (value !== undefined) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setSelectedDate(value);
+            setInputValue(formatValue(value, format));
+        }
+    }, [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 () => { };
+        }
+    }, [isOpen]);
+    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);
+        }
+        setSelectedDate(newDate);
+        setInputValue(formatValue(newDate, format));
+        // 只在非受控模式下更新内部状态
+        if (value === undefined) {
+            setSelectedDate(newDate);
+        }
+        onChange?.(formatDateValue(newDate, format), newDate);
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        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 (value === undefined)
+                        setSelectedDate(parsedDate);
+                    onChange?.(formatDateValue(parsedDate, format), parsedDate);
+                }
+            }
+            catch {
+                // ignore invalid date
+            }
+        }
+    };
+    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 }) }))] }) }));
+});
+DatePicker.displayName = 'DatePicker';
+export { DatePicker };

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

@@ -0,0 +1,29 @@
+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.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook for accessing the current Date component locale.
+ * Backed by Zustand, so no React Context is required.
+ */
+export declare const useDateLocale: () => import("./locales").DateLocaleConfig;
+//# sourceMappingURL=LocaleContext.d.ts.map

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

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

package/{packages → fe/packages}/ui/react/components/Date/LocaleProvider.d.ts

@@ -4,5 +4,16 @@ export interface DateLocaleProviderProps {
     locale?: DateLocaleConfig;
     children: ReactNode;
 }
+/**
+ * Date 组件文案配置 Provider
+ * 用于全局设置 Date 组件的文案
+ *
+ * @example
+ * ```tsx
+ * <DateLocaleProvider locale={customLocale}>
+ *   <App />
+ * </DateLocaleProvider>
+ * ```
+ */
 export declare function DateLocaleProvider({ locale, children }: DateLocaleProviderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LocaleProvider.d.ts.map

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

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useDateLocaleStore } from './dateLocaleStore';
+import { defaultLocale } from './locales';
+/**
+ * Date 组件文案配置 Provider
+ * 用于全局设置 Date 组件的文案
+ *
+ * @example
+ * ```tsx
+ * <DateLocaleProvider locale={customLocale}>
+ *   <App />
+ * </DateLocaleProvider>
+ * ```
+ */
+export function DateLocaleProvider({ locale = defaultLocale, children }) {
+    const replaceLocale = useDateLocaleStore((state) => state.replaceLocale);
+    const resetLocale = useDateLocaleStore((state) => state.resetLocale);
+    useEffect(() => {
+        replaceLocale(locale);
+        return () => resetLocale();
+    }, [locale, replaceLocale, resetLocale]);
+    return _jsx(_Fragment, { children: children });
+}

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+export function TimePicker({ value, onChange, className }) {
+    // Derive time from value prop directly
+    const hours = value?.getHours() ?? 0;
+    const minutes = value?.getMinutes() ?? 0;
+    const handleTimeChange = (newHours, newMinutes) => {
+        const newDate = value ? new Date(value) : new Date();
+        newDate.setHours(newHours);
+        newDate.setMinutes(newMinutes);
+        newDate.setSeconds(0);
+        newDate.setMilliseconds(0);
+        onChange?.(newDate);
+    };
+    const incrementHours = () => {
+        const newHours = (hours + 1) % 24;
+        handleTimeChange(newHours, minutes);
+    };
+    const decrementHours = () => {
+        const newHours = (hours - 1 + 24) % 24;
+        handleTimeChange(newHours, minutes);
+    };
+    const incrementMinutes = () => {
+        const newMinutes = (minutes + 1) % 60;
+        handleTimeChange(hours, newMinutes);
+    };
+    const decrementMinutes = () => {
+        const newMinutes = (minutes - 1 + 60) % 60;
+        handleTimeChange(hours, newMinutes);
+    };
+    const handleHoursInput = (e) => {
+        const val = e.target.value.replace(/\D/g, '');
+        if (val === '') {
+            handleTimeChange(0, minutes);
+            return;
+        }
+        const num = parseInt(val, 10);
+        if (num >= 0 && num <= 23) {
+            handleTimeChange(num, minutes);
+        }
+    };
+    const handleMinutesInput = (e) => {
+        const val = e.target.value.replace(/\D/g, '');
+        if (val === '') {
+            handleTimeChange(hours, 0);
+            return;
+        }
+        const num = parseInt(val, 10);
+        if (num >= 0 && num <= 59) {
+            handleTimeChange(hours, num);
+        }
+    };
+    const handleHoursKeyDown = (e) => {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            incrementHours();
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            decrementHours();
+        }
+    };
+    const handleMinutesKeyDown = (e) => {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            incrementMinutes();
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            decrementMinutes();
+        }
+    };
+    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 }) })] })] }));
+}

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

@@ -0,0 +1,4 @@
+export const ModeType = {
+    Single: 'single',
+    Range: 'range',
+};

package/{packages → fe/packages}/ui/react/components/Date/dateLocaleStore.d.ts

@@ -1,7 +1,13 @@
 import { type DateLocaleConfig } from './locales';
 type DateLocaleState = {
     locale: DateLocaleConfig;
+    /**
+     * Merge partial updates into the current locale.
+     */
     setLocale: (patch: Partial<DateLocaleConfig>) => void;
+    /**
+     * Replace the locale entirely.
+     */
     replaceLocale: (nextLocale: DateLocaleConfig) => void;
     resetLocale: () => void;
 };

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

@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+import { defaultLocale } from './locales';
+export const useDateLocaleStore = create((set) => ({
+    locale: defaultLocale,
+    setLocale: (patch) => set((state) => ({
+        locale: { ...state.locale, ...patch },
+    })),
+    replaceLocale: (nextLocale) => set(() => ({
+        locale: nextLocale,
+    })),
+    resetLocale: () => set(() => ({
+        locale: defaultLocale,
+    })),
+}));