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

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { forwardRef } from 'react';
+const Button = forwardRef(({ className, variant = 'default', size = 'md', disabled, loading, leftIcon, rightIcon, noUnderline, children, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    // 基础样式
+    const baseStyles = 'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
+    // 变体样式
+    const variantStyles = {
+        default: 'bg-white border border-border text-foreground hover:bg-muted/50 focus-visible:ring-border',
+        primary: 'bg-theme text-theme-foreground border border-theme hover:bg-theme/90 focus-visible:ring-theme',
+        text: 'bg-transparent border-0 text-foreground hover:bg-muted/30 focus-visible:ring-border',
+        // 链接样式按钮：无背景、无边框、与正文相同颜色，仅在悬停时下划线（可通过 noUnderline 控制）
+        link: 'bg-transparent border-0 text-foreground focus-visible:ring-border',
+    };
+    // 禁用状态样式（根据不同 variant）
+    const disabledStyles = {
+        default: 'disabled:bg-white/60 disabled:border-border/60 disabled:text-foreground/60 disabled:hover:bg-white/60',
+        primary: 'disabled:bg-theme/60 disabled:border-theme/0 disabled:text-theme-foreground/60 disabled:hover:bg-theme/60',
+        text: 'disabled:text-foreground/40 disabled:hover:bg-transparent',
+        link: 'disabled:text-foreground/40',
+    };
+    // 尺寸样式
+    const sizeStyles = {
+        sm: 'h-8 px-3 text-sm',
+        md: 'h-10 px-4 text-sm',
+        lg: 'h-12 px-6 text-base',
+    };
+    // 展示内容
+    const contents = [
+        leftIcon && (_jsx("span", { className: cn('flex items-center', 'mr-2'), children: leftIcon }, "left")),
+        children,
+        rightIcon ? (_jsx("span", { className: cn('flex items-center', 'ml-2'), children: rightIcon }, "right")) : undefined,
+    ].filter(Boolean);
+    return (_jsx("button", { ref: ref, className: cn(baseStyles, variantStyles[variant], disabledStyles[variant], 
+        // link 模式不固定高度/内边距，更接近普通文字
+        variant === 'link' ? 'h-auto px-0 py-0 text-sm font-normal' : sizeStyles[size], variant === 'link' ? '' : 'before:content-normal', 
+        // link 模式下，根据 noUnderline 控制下划线
+        variant === 'link' && !noUnderline && 'hover:underline', variant === 'link' && !noUnderline && 'disabled:hover:no-underline', isDisabled && 'cursor-not-allowed', className), disabled: isDisabled, ...props, children: contents }));
+});
+Button.displayName = 'Button';
+export { Button };

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

@@ -3,6 +3,10 @@ import { type ButtonProps } from './Button';
 export type SumbitButtonProps = MOmit<ButtonProps, 'onClick'> & {
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void | boolean> | void;
 };
+/**
+ *
+ * 会自动添加loading 其余同button一致
+ */
 declare const SumbitButton: (props: SumbitButtonProps) => import("react/jsx-runtime").JSX.Element;
 declare const AsynchronousButton: (props: SumbitButtonProps) => import("react/jsx-runtime").JSX.Element;
 export { AsynchronousButton, SumbitButton };

package/fe/packages/ui/react/components/Button/SumbitButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { useState } from 'react';
+import { Button } from './Button';
+/**
+ *
+ * 会自动添加loading 其余同button一致
+ */
+const SumbitButton = (props) => {
+    const { onClick, leftIcon, size = 'md', ...bprops } = props;
+    const [loading, uLoading] = useState(false);
+    // Loading spinner icon - 根据按钮尺寸调整大小
+    const spinnerSize = {
+        sm: 'h-3 w-3',
+        md: 'h-4 w-4',
+        lg: 'h-5 w-5',
+    };
+    const loadingIcon = loading ? (_jsx("span", { className: cn('flex items-center', 'mr-2'), children: _jsxs("svg", { className: cn('animate-spin', spinnerSize[size]), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) })) : null;
+    return (_jsx(Button, { loading: loading, leftIcon: loading ? loadingIcon : leftIcon, onClick: async (e) => {
+            if (loading)
+                return;
+            uLoading(true);
+            try {
+                return await onClick?.(e);
+            }
+            finally {
+                uLoading(false);
+            }
+        }, ...bprops }));
+};
+const AsynchronousButton = SumbitButton;
+export { AsynchronousButton, SumbitButton };

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export * from './SumbitButton';

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

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../../lib/utils");
-const react_1 = require("react");
-const Checkbox = (0, react_1.forwardRef)(({ className, checked: _controlledChecked, value, defaultChecked, indeterminate, onChange, ...props }, ref) => {
-    const internalRef = (0, react_1.useRef)(null);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+const Checkbox = forwardRef(({ className, checked: _controlledChecked, value, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+    const internalRef = useRef(null);
     const controlledChecked = value ?? _controlledChecked;
     const setRefs = (element) => {
         internalRef.current = element;
@@ -19,13 +16,13 @@ const Checkbox = (0, react_1.forwardRef)(({ className, checked: _controlledCheck
             element.indeterminate = indeterminate ?? false;
         }
     };
-    (0, react_1.useLayoutEffect)(() => {
+    useLayoutEffect(() => {
         if (internalRef.current) {
             internalRef.current.indeterminate = indeterminate ?? false;
         }
     }, [indeterminate]);
     const isControlled = controlledChecked !== undefined;
-    const [internalChecked, setInternalChecked] = (0, react_1.useState)(defaultChecked ?? false);
+    const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
     const checked = isControlled ? controlledChecked : internalChecked;
     const handleChange = (e) => {
         const newChecked = e.target.checked;
@@ -34,7 +31,7 @@ const Checkbox = (0, react_1.forwardRef)(({ className, checked: _controlledCheck
         }
         onChange?.(newChecked, e);
     };
-    return ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", ref: setRefs, checked: checked, onChange: handleChange, className: (0, utils_1.cn)('w-4 h-4 rounded border-gray-300 accent-theme', className), ...props }));
+    return (_jsx("input", { type: "checkbox", ref: setRefs, checked: checked, onChange: handleChange, className: cn('w-4 h-4 rounded border-gray-300 accent-theme', className), ...props }));
 });
-exports.Checkbox = Checkbox;
 Checkbox.displayName = 'Checkbox';
+export { Checkbox };

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

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

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

@@ -1,11 +1,19 @@
 export interface ConfirmDialogProps {
+    /** 是否显示 */
     open: boolean;
+    /** 标题 */
     title?: string;
+    /** 内容 */
     content: string;
+    /** 确认按钮文本 */
     okText?: string;
+    /** 取消按钮文本 */
     cancelText?: string;
+    /** 确认按钮加载状态 */
     loading?: boolean;
+    /** 确认回调 */
     onOk: () => void | Promise<void>;
+    /** 取消回调 */
     onCancel: () => void;
 }
 export declare function ConfirmDialog({ open, title, content, okText, cancelText, loading, onOk, onCancel, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from './Button';
+import { Modal } from './Modal';
+export function ConfirmDialog({ open, title = '提示', content, okText = '确认', cancelText = '取消', loading = false, onOk, onCancel, }) {
+    const handleOk = async () => {
+        await onOk();
+    };
+    return (_jsx(Modal, { open: open, onClose: onCancel, title: title, width: 450, footer: _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: onCancel, className: "min-w-[100px] bg-white border-[hsl(var(--theme-primary))] text-[hsl(var(--theme-primary))] hover:bg-[hsl(var(--theme-primary))]/5", children: cancelText }), _jsx(Button, { variant: "primary", loading: loading, onClick: handleOk, className: "min-w-[100px] bg-[hsl(var(--theme-primary))] hover:bg-[hsl(var(--theme-primary))]/90 border-[hsl(var(--theme-primary))] text-[hsl(var(--theme-primary-foreground))]", children: okText })] }), children: _jsx("div", { className: "py-4 text-base text-foreground", children: content }) }));
+}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MoreHorizontal } from 'lucide-react';
+import { Dropdown } from '../Dropdown';
+export const ActionBtn = ({ actions }) => {
+    if (actions.length === 0) {
+        return '-';
+    }
+    if (actions.length === 1) {
+        const action = actions[0];
+        return (_jsx("button", { onClick: action.onClick, className: "inline-flex items-center justify-center w-8 h-8 rounded transition-colors", children: action.label }));
+    }
+    return (_jsx(Dropdown, { items: actions, children: _jsx("button", { className: "inline-flex items-center justify-center w-8 h-8 rounded transition-colors", children: _jsx(MoreHorizontal, { className: "h-5 w-5 text-gray-600" }) }) }));
+};

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

@@ -3,10 +3,25 @@ import { type PaginationProps } from '../Pagination';
 import type { ColumnDef } from '../types/baseType';
 export type { ColumnDef } from '../types/baseType';
 type RowSelection<T> = {
+    /**
+     * 受控用法：完全由外部维护选中 keys
+     */
     selectedRowKeys?: Array<string | number>;
+    /**
+     * 非受控用法：仅作为初始值，后续由内部维护
+     */
     defaultSelectedRowKeys?: Array<string | number>;
+    /**
+     * 选中项变化回调（受控/非受控都会触发）
+     */
     onChange?: (selectedRowKeys: Array<string | number>, selectedRows: T[], isAll: boolean) => void;
+    /**
+     * 全选 受控
+     */
     isAll?: boolean;
+    /**
+     * theader checkbox
+     */
     beforeCheckboxNode?: ReactNode;
 };
 interface DataTableProps<T = Record<string, unknown>> {
@@ -16,6 +31,10 @@ interface DataTableProps<T = Record<string, unknown>> {
     rowSelection?: RowSelection<T>;
     pagination?: PaginationProps;
     loading?: boolean;
+    /**
+     * 统一配置 column width 默认100px
+     * 会被columns[number].width覆盖
+     */
     defaultColumnWidth?: number;
 }
 export declare function DataTable<T = Record<string, unknown>>({ columns, data: pData, loading, rowKey, rowSelection, defaultColumnWidth, pagination: pPagination, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/{packages → fe/packages}/ui/react/components/DataTable/data-table.js

@@ -1,17 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionBtn = void 0;
-exports.DataTable = DataTable;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const no_result_svg_1 = __importDefault(require("@tc/ui-react/assets/table/no-result.svg"));
-const react_1 = require("react");
-const Pagination_1 = require("../Pagination");
-const Skeleton_1 = require("../Skeleton");
-const table_1 = require("../table");
-function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSelection, defaultColumnWidth = 100, pagination: pPagination, }) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import noResult from '@tc/ui-react/assets/table/no-result.svg';
+import { useMemo, useState } from 'react';
+import { Pagination } from '../Pagination';
+import { Skeleton } from '../Skeleton';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+export function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSelection, defaultColumnWidth = 100, pagination: pPagination, }) {
     const getRowKey = (record, index) => {
         if (typeof rowKey === 'function') {
             return rowKey(record, index);
@@ -21,19 +14,21 @@ function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSelection,
     };
     const getCellValue = (record, column) => record[(column.dataIndex || column.key)];
     const isControlled = rowSelection && Array.isArray(rowSelection.selectedRowKeys);
-    const [innerSelectedRowKeys, setInnerSelectedRowKeys] = (0, react_1.useState)(rowSelection?.defaultSelectedRowKeys ?? []);
+    const [innerSelectedRowKeys, setInnerSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? []);
     const selectedRowKeys = (isControlled ? rowSelection?.selectedRowKeys : innerSelectedRowKeys) ?? [];
     const selectedKeySet = new Set(selectedRowKeys);
-    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
-    const { showPagination, pagination, data } = (0, react_1.useMemo)(() => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const { showPagination, pagination, data } = useMemo(() => {
         let pagination;
         let data = pData;
         let showPagination;
+        // 使用外部
         if (pPagination) {
             pagination = pPagination;
             showPagination = pagination.total > 0;
         }
         else {
+            // 使用内部
             pagination = {
                 onChange(v) {
                     setCurrentPage(v);
@@ -51,6 +46,7 @@ function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSelection,
             data,
         };
     }, [currentPage, pData, pPagination]);
+    // TODO getRowKey 依赖剥离
     const pageRowKeys = pData.map((record, index) => getRowKey(record, index));
     const handleRowSelectChange = (key) => {
         if (!rowSelection)
@@ -74,8 +70,10 @@ function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSelection,
             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 {
@@ -93,19 +91,19 @@ function DataTable({ columns, data: pData, loading, rowKey = 'id', 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 ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-[20px] overflow-hidden relative", children: [(0, jsx_runtime_1.jsxs)(table_1.Table, { containerClassName: "rounded-b-none overflow-x-auto", children: [(0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [rowSelection && ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { className: "bg-table-header", style: {
+    return (_jsxs("div", { className: "bg-white 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, (0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "w-4 h-4 rounded border-gray-300 accent-theme", checked: allChecked, "aria-label": "Select all rows", ref: (el) => {
+                                    }, children: [rowSelection.beforeCheckboxNode, _jsx("input", { type: "checkbox", className: "w-4 h-4 rounded border-gray-300 accent-theme", checked: allChecked, "aria-label": "Select all rows", ref: (el) => {
                                                 if (el) {
                                                     el.indeterminate = partiallyChecked;
                                                 }
                                             }, onChange: handleSelectAllChange })] })), columns.map((column) => {
                                     const hasAction = column.isAction ?? column.key === 'action';
-                                    return ((0, jsx_runtime_1.jsx)(table_1.TableHead, { isAction: hasAction, style: {
+                                    return (_jsx(TableHead, { isAction: hasAction, style: {
                                             ...(hasAction
                                                 ? {
                                                     position: 'sticky',
@@ -117,16 +115,16 @@ function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSelection,
                                                 ? { width: column.width, minWidth: column.width }
                                                 : { minWidth: defaultColumnWidth }),
                                         }, children: column.title }, column.key));
-                                })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: data.length === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: columns.length + (rowSelection ? 1 : 0), className: "text-muted-foreground", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center w-full gap-2.5", children: [(0, jsx_runtime_1.jsx)("img", { src: no_result_svg_1.default, alt: "\u6682\u65E0\u6570\u636E", className: " w-24 h-24" }), "No Data"] }) }) })) : (data.map((record, rowIndex) => ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [rowSelection && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "bg-white", style: {
+                                })] }) }), _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: "\u6682\u65E0\u6570\u636E", className: " w-24 h-24" }), "No Data"] }) }) })) : (data.map((record, rowIndex) => (_jsxs(TableRow, { children: [rowSelection && (_jsx(TableCell, { className: "bg-white", style: {
                                         width: '48px',
                                         minWidth: '48px',
                                         position: 'sticky',
                                         left: 0,
                                         zIndex: 1,
-                                    }, children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "w-4 h-4 rounded border-gray-300 accent-theme", checked: selectedKeySet.has(getRowKey(record, rowIndex)), "aria-label": "Select row", onChange: () => handleRowSelectChange(getRowKey(record, rowIndex)) }) })), columns.map((column) => {
+                                    }, children: _jsx("input", { type: "checkbox", className: "w-4 h-4 rounded border-gray-300 accent-theme", checked: selectedKeySet.has(getRowKey(record, rowIndex)), "aria-label": "Select row", onChange: () => handleRowSelectChange(getRowKey(record, rowIndex)) }) })), columns.map((column) => {
                                     const value = getCellValue(record, column);
                                     const hasAction = column.isAction ?? column.key === 'action';
-                                    return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { isAction: hasAction, style: {
+                                    return (_jsx(TableCell, { isAction: hasAction, style: {
                                             ...(hasAction
                                                 ? {
                                                     position: 'sticky',
@@ -138,7 +136,6 @@ function DataTable({ columns, data: pData, loading, rowKey = 'id', rowSelection,
                                                 ? { width: column.width, minWidth: column.width }
                                                 : { minWidth: defaultColumnWidth }),
                                         }, children: column.render ? column.render(value, record, rowIndex) : value }, column.key));
-                                })] }, getRowKey(record, rowIndex))))) })] }), loading && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-[20px] bg-white/70 text-sm text-gray-600 z-[100]", children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { mode: "tableloading", rows: 8 }) })), showPagination && ((0, jsx_runtime_1.jsx)("div", { className: "px-6 pb-6 mt-6", children: (0, jsx_runtime_1.jsx)(Pagination_1.Pagination, { ...pagination }) }))] }));
+                                })] }, getRowKey(record, rowIndex))))) })] }), loading && (_jsx("div", { className: "absolute inset-0 rounded-[20px] bg-white/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 }) }))] }));
 }
-var ActionBtn_1 = require("./ActionBtn");
-Object.defineProperty(exports, "ActionBtn", { enumerable: true, get: function () { return ActionBtn_1.ActionBtn; } });
+export { ActionBtn } from './ActionBtn';

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

@@ -5,7 +5,13 @@ export type DateRange = {
     to?: Date | undefined;
 };
 export type QuickRangePreset = {
+    /**
+     * 展示文案
+     */
     label: string;
+    /**
+     * 返回一个范围对象
+     */
     getRange: () => DateRange;
 };
 export interface CalendarProps {
@@ -15,7 +21,14 @@ export interface CalendarProps {
     disabledDate?: (date: Date) => boolean;
     showTime?: boolean;
     className?: string;
+    /**
+     * 自定义文案配置，会覆盖默认文案
+     */
     locale?: Partial<DateLocaleConfig>;
+    /**
+     * 范围模式下的快捷选择配置
+     * 不传则使用默认预设
+     */
     quickRanges?: QuickRangePreset[];
 }
 export declare function Calendar({ mode, value, onChange, disabledDate, showTime, className, locale: customLocale, quickRanges, }: CalendarProps): import("react/jsx-runtime").JSX.Element;

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>>;