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

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,
+    })),
+}));

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

@@ -0,0 +1,5 @@
+export * from './Date';
+export * from './dateLocaleStore';
+export { useDateLocale } from './LocaleContext';
+export * from './LocaleProvider';
+export * from './locales';

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

@@ -1,3 +1,7 @@
+/**
+ * Date 组件文案配置
+ * 支持外部修改文案内容
+ */
 export interface DateLocaleConfig {
     placeholder: string;
     placeholderDateTime: string;
@@ -8,7 +12,13 @@ export interface DateLocaleConfig {
     startTime: string;
     endTime: string;
     confirm: string;
+    /**
+     * 范围模式 - 快捷选择面板标题
+     */
     quickRanges: string;
+    /**
+     * 范围模式 - 各快捷范围文案
+     */
     quickRangeToday: string;
     quickRangeYesterday: string;
     quickRangeLast7Days: string;
@@ -17,7 +27,16 @@ export interface DateLocaleConfig {
     quickRangeLastYear: string;
     clear: string;
 }
+/**
+ * 默认中文文案
+ */
 export declare const zhCNLocale: DateLocaleConfig;
+/**
+ * 默认英文文案
+ */
 export declare const enUSLocale: DateLocaleConfig;
+/**
+ * 默认使用中文文案
+ */
 export declare const defaultLocale: DateLocaleConfig;
 //# sourceMappingURL=locales.d.ts.map

package/{packages → fe/packages}/ui/react/components/Date/locales.js

@@ -1,7 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultLocale = exports.enUSLocale = exports.zhCNLocale = void 0;
-exports.zhCNLocale = {
+/**
+ * Date 组件文案配置
+ * 支持外部修改文案内容
+ */
+/**
+ * 默认中文文案
+ */
+export const zhCNLocale = {
     placeholder: '请选择日期',
     placeholderDateTime: '请选择日期时间',
     placeholderRange: '选择日期范围',
@@ -20,7 +24,10 @@ exports.zhCNLocale = {
     quickRangeLastYear: '最近一年',
     clear: '清除',
 };
-exports.enUSLocale = {
+/**
+ * 默认英文文案
+ */
+export const enUSLocale = {
     placeholder: 'Select date',
     placeholderDateTime: 'Select date and time',
     placeholderRange: 'Select date range',
@@ -39,4 +46,7 @@ exports.enUSLocale = {
     quickRangeLastYear: 'Last year',
     clear: 'Clear',
 };
-exports.defaultLocale = exports.zhCNLocale;
+/**
+ * 默认使用中文文案
+ */
+export const defaultLocale = zhCNLocale;

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+export function Dropdown({ items, children, className, placement = 'bottom-end' }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    // 计算下拉菜单位置
+    const updatePosition = () => {
+        if (triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + window.scrollY,
+                left: placement === 'bottom-end' ? rect.right + window.scrollX : rect.left + window.scrollX,
+                width: rect.width,
+            });
+        }
+    };
+    // 点击外部关闭
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (triggerRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleToggle = () => {
+        if (!isOpen) {
+            updatePosition();
+        }
+        setIsOpen(!isOpen);
+    };
+    const handleItemClick = (item) => {
+        item.onClick?.();
+        setIsOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: cn('relative inline-block', className), children: _jsx("div", { onClick: handleToggle, children: children }) }), isOpen &&
+                createPortal(_jsx("div", { ref: dropdownRef, className: cn('fixed z-[9999] mt-2 min-w-[120px]', 'bg-white rounded-lg shadow-lg border border-gray-200', 'py-1', 'animate-in fade-in-0 zoom-in-95'), style: {
+                        top: `${position.top}px`,
+                        left: placement === 'bottom-end' ? 'auto' : `${position.left}px`,
+                        right: placement === 'bottom-end' ? `${window.innerWidth - position.left}px` : 'auto',
+                    }, children: items.map((item) => (_jsxs("button", { onClick: () => handleItemClick(item), className: cn('w-full px-4 py-2.5 text-sm text-left', 'flex items-center gap-2', 'transition-colors', item.danger ? 'text-red-600 hover:bg-red-50' : 'text-gray-700 hover:bg-gray-50'), children: [item.icon && _jsx("span", { className: "flex-shrink-0", children: item.icon }), _jsx("span", { children: item.label })] }, item.key))) }), document.body)] }));
+}

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

@@ -1,7 +1,13 @@
 import type { FormProps as RcFormProps } from 'rc-field-form';
 import type { ReactNode } from 'react';
 export interface FormProps<T> extends Omit<RcFormProps<T>, 'component'> {
+    /**
+     * 表单类名
+     */
     className?: string;
+    /**
+     * 表单内容
+     */
     children?: ReactNode;
 }
 declare const Form: {

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import RcForm from 'rc-field-form';
+const Form = ({ className, children, ...props }) => {
+    return (_jsx(RcForm, { ...props, component: "form", className: cn(className), children: children }));
+};
+Form.displayName = 'Form';
+export { Form };

package/{packages → fe/packages}/ui/react/components/Form/FormItem.d.ts

@@ -3,15 +3,36 @@ import type { ReactNode } from 'react';
 import { type LabelLayout } from '../Label';
 type FieldProps = Parameters<typeof Field>[0];
 export interface FormItemProps<T = any> extends Omit<FieldProps, 'children'> {
+    /**
+     * 表单项类名
+     */
     className?: string;
+    /**
+     * 标签文本
+     */
     label?: ReactNode;
+    /**
+     * 标签类名
+     */
     labelClassName?: string;
+    /**
+     * 是否必填（仅用于显示，实际验证通过 rules 配置）
+     */
     required?: boolean;
+    /**
+     * 表单项内容
+     */
     children?: ReactNode | ((value: T, onChange: (value: T) => void, meta: {
         errors: string[];
         warnings: string[];
     }) => ReactNode);
+    /**
+     * 错误信息类名
+     */
     errorClassName?: string;
+    /**
+     * 是否显示错误信息
+     */
     showError?: boolean;
     layout?: Required<LabelLayout>['layout'];
 }

package/fe/packages/ui/react/components/Form/FormItem.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { Field } from 'rc-field-form';
+import React, { forwardRef } from 'react';
+import Label from '../Label';
+const FormItemFN = forwardRef(({ className, label, labelClassName, required, children, errorClassName, showError = true, name, rules, layout, ...props }, ref) => {
+    return (_jsx(Field, { name: name, rules: rules, ...props, children: (control, meta /** form */) => {
+            const { value, onChange, ...restControl } = control;
+            const { errors, warnings } = meta;
+            const hasError = errors.length > 0;
+            const hasWarning = warnings.length > 0;
+            // 如果 children 是函数，调用它并传入 value、onChange 和 meta
+            const childNode = typeof children === 'function' ? children(value, onChange, meta) : children;
+            // 克隆子元素并注入 value 和 onChange
+            const childWithProps = childNode && typeof childNode === 'object' && 'props' in childNode
+                ? React.cloneElement(childNode, {
+                    value: value,
+                    onChange: (val) => {
+                        // 兼容 Input 组件的 onChange(value, event) 格式
+                        // Input 组件的 onChange 签名是: (value: string, event: ChangeEvent) => void
+                        if (typeof val === 'string') {
+                            // 如果第一个参数是字符串，说明是 Input 组件的格式
+                            onChange(val);
+                        }
+                        else if (val?.target?.value !== undefined) {
+                            // 原生 input 的 onChange 事件格式
+                            onChange(val.target.value);
+                        }
+                        else {
+                            // 其他情况直接使用值
+                            onChange(val);
+                        }
+                    },
+                    ...restControl,
+                })
+                : childNode;
+            const content = _jsx("div", { className: hasError || hasWarning ? 'relative' : '', children: childWithProps });
+            return (_jsxs("div", { ref: ref, className: cn(className), children: [label ? (_jsx(Label, { htmlFor: name, label: label, layout: layout, required: required, labelClassName: cn(labelClassName, hasError && 'text-destructive'), children: content })) : (content), showError && hasError && (_jsx("div", { className: cn('text-sm text-destructive', errorClassName), children: errors[0] })), hasWarning && _jsx("div", { className: "text-sm text-yellow-600", children: warnings[0] })] }));
+        } }));
+});
+FormItemFN.displayName = 'FormItem';
+const FormItem = FormItemFN;
+export { FormItem };