@c2-markdown-ui/react 0.0.0-stage → 0.4.3

package/src/widgets/Chart.tsx

@@ -0,0 +1,238 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  LineController,
+  BarController,
+  PieController,
+  ScatterController
+} from 'chart.js';
+import { parseChartCsv, normalizeRemoteChartData, RemoteChartData } from './chartRemoteData';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  LineController,
+  BarController,
+  PieController,
+  ScatterController
+);
+
+interface Dataset {
+  label: string;
+  data: number[];
+}
+
+interface ChartProps {
+  type: "chart-line" | "chart-bar" | "chart-pie" | "chart-scatter";
+  title?: string;
+  height?: number;
+  /** 远端数据源 URL：设置后运行时 fetch 拉取（CSV 文本或 JSON），本地 CSV 作为初始/后备数据 */
+  url?: string;
+  /** 是否展示图例：未设置（undefined）时自动判断（多数据集或饼图时展示） */
+  legend?: boolean;
+  labels: string[];
+  datasets: Dataset[];
+  options?: Record<string, any>;
+  onchange: (data: any) => void;
+}
+
+export function Chart({ type, title, height, url = '', legend, labels, datasets, options = {}, onchange }: ChartProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const chartRef = useRef<ChartJS | null>(null);
+
+  // 远端数据：拉取成功后覆盖本地 CSV 数据
+  // 加载失败静默处理：回落本地数据，均无数据时图表区域显示灰色"暂无数据"
+  const [remoteData, setRemoteData] = useState<RemoteChartData | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // 实际渲染数据：远端优先，本地 CSV 作为初始/后备
+  const effectiveLabels = remoteData ? remoteData.labels : labels;
+  const effectiveDatasets = remoteData ? remoteData.datasets : datasets;
+  /** 无任何可渲染数据（本地与远端均为空） */
+  const isEmpty = !loading && effectiveLabels.length === 0 && effectiveDatasets.length === 0;
+
+  // 远端数据源：fetch 拉取 CSV 文本或 JSON，成功后覆盖本地数据
+  useEffect(() => {
+    if (!url) return;
+    let cancelled = false;
+    setLoading(true);
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const text = await res.text();
+        if (cancelled) return;
+        let parsed: RemoteChartData | null = null;
+        const trimmed = text.trim();
+        if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+          try {
+            parsed = normalizeRemoteChartData(JSON.parse(trimmed));
+          } catch {
+            parsed = null;
+          }
+        }
+        if (!parsed) parsed = parseChartCsv(text);
+        if (cancelled) return;
+        if (!parsed) throw new Error('响应无法解析为图表数据（CSV 或 JSON）');
+        setRemoteData(parsed);
+      } catch {
+        // 加载失败：静默回落本地数据
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [url]);
+
+  // Clamp height to safe bounds: 200px min, 800px max, 400px default
+  const safeHeight = Math.max(200, Math.min(800, height || 400));
+
+  const getChartType = (widgetType: string) => {
+    switch (widgetType) {
+      case 'chart-line': return 'line';
+      case 'chart-bar': return 'bar';
+      case 'chart-pie': return 'pie';
+      case 'chart-scatter': return 'scatter';
+      default: return 'line';
+    }
+  };
+
+  const getDefaultColors = () => [
+    '#1677ff',
+    '#52c41a',
+    '#faad14',
+    '#ff4d4f',
+    '#722ed1',
+    '#13c2c2'
+  ];
+
+  const prepareDatasets = (datasets: Dataset[], chartType: string, chartLabels: string[]) => {
+    const colors = getDefaultColors();
+    
+    return datasets.map((dataset, index) => {
+      const color = colors[index % colors.length];
+      let processedData: any = dataset.data;
+      
+      // For scatter plots, convert data to {x, y} format
+      if (chartType === 'scatter') {
+        processedData = dataset.data.map((value, dataIndex) => ({
+          x: dataIndex,
+          y: value
+        }));
+      }
+      
+      if (chartType === 'pie') {
+        return {
+          ...dataset,
+          data: processedData,
+          backgroundColor: colors.slice(0, dataset.data.length),
+          borderColor: colors.slice(0, dataset.data.length),
+          borderWidth: 1
+        };
+      } else {
+        return {
+          ...dataset,
+          data: processedData,
+          borderColor: color,
+          backgroundColor: chartType === 'line' ? color + '20' : color,
+          borderWidth: 2,
+          fill: chartType === 'line' ? false : true
+        };
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+
+    // Destroy existing chart
+    if (chartRef.current) {
+      chartRef.current.destroy();
+    }
+
+    const chartType = getChartType(type);
+    const preparedDatasets = prepareDatasets(effectiveDatasets, chartType, effectiveLabels);
+
+    const defaultOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: !!title,
+          text: title || ''
+        },
+        legend: {
+          display: legend !== undefined ? legend : (effectiveDatasets.length > 1 || chartType === 'pie')
+        }
+      },
+      onClick: (_event: any, elements: any[]) => {
+        if (elements.length > 0) {
+          const element = elements[0];
+          const dataIndex = element.index;
+          const datasetIndex = element.datasetIndex;
+
+          onchange({
+            label: effectiveLabels[dataIndex],
+            value: effectiveDatasets[datasetIndex]?.data[dataIndex],
+            datasetLabel: effectiveDatasets[datasetIndex]?.label,
+            dataIndex,
+            datasetIndex
+          });
+        }
+      }
+    };
+
+    const mergedOptions = { ...defaultOptions, ...options };
+
+    const chartData = chartType === 'scatter'
+      ? { datasets: preparedDatasets }
+      : { labels: effectiveLabels, datasets: preparedDatasets };
+
+    chartRef.current = new ChartJS(canvasRef.current, {
+      type: chartType as any,
+      data: chartData,
+      options: mergedOptions
+    });
+
+    // Cleanup function
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.destroy();
+        chartRef.current = null;
+      }
+    };
+  }, [type, title, height, url, legend, effectiveLabels, effectiveDatasets, options, onchange]);
+
+  return (
+    <div className="widget-chart" style={{ height: `${safeHeight}px`, position: 'relative', width: '100%' }}>
+      {isEmpty && (
+        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(0, 0, 0, 0.45)', fontSize: 13, background: '#ffffff' }}>
+          暂无数据
+        </div>
+      )}
+      {loading && (
+        <div style={{ position: 'absolute', top: 8, right: 8, zIndex: 1, padding: '2px 8px', borderRadius: 4, background: 'rgba(0, 0, 0, 0.05)', fontSize: 12 }}>
+          数据加载中...
+        </div>
+      )}
+      <canvas ref={canvasRef} style={{ maxWidth: '100%', height: '100%' }}></canvas>
+    </div>
+  );
+}

package/src/widgets/DatePicker.tsx

@@ -0,0 +1,451 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+export interface DatePickerProps {
+  label?: string;
+  /** 选择模式：date 仅日期（默认）/ datetime 日期+时间 */
+  picker?: 'date' | 'datetime';
+  /** 范围选择（antd RangePicker 效果：双月历面板） */
+  range?: boolean;
+  /** 默认值：时间戳（毫秒）或格式化时间字符串；range 模式为 [start, end] */
+  default?: number | string | (number | string)[];
+  /** 显示格式：默认按模式推导——date 为 YYYY-MM-DD，datetime 为 YYYY-MM-DD HH:mm:ss */
+  format?: string;
+  placeholder?: string;
+  /** 禁用当前日期之前的日期 */
+  disableBeforeNow?: boolean;
+  /** 禁用当前日期之后的日期 */
+  disableAfterNow?: boolean;
+  hint?: string;
+  required?: boolean;
+  /** 校验失败提示文案 */
+  message?: string;
+  /** 外部（form 提交时）传入的错误信息 */
+  error?: string;
+  /** 是否禁用（整组件不可交互，区别于 disableBeforeNow/disableAfterNow 的部分日期禁用） */
+  disabled?: boolean;
+  onchange: (value: number | number[] | null) => void;
+}
+
+type Cell = { ts: number; day: number; inMonth: boolean; disabled: boolean };
+type TimeState = { h: number; m: number; s: number };
+
+const WEEK_LABELS = ['一', '二', '三', '四', '五', '六', '日'];
+
+/** 时间戳/格式化字符串（2026-08-20 18:20:06、2026/05/11 等）→ 毫秒时间戳 */
+function parseDateLike(v: number | string | undefined | null): number | null {
+  if (v === undefined || v === null || v === '') return null;
+  if (typeof v === 'number') return v;
+  const s = String(v).trim();
+  if (/^-?\d+$/.test(s)) return Number(s);
+  const m = s.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})(?:[ T](\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?/);
+  if (m) {
+    return new Date(
+      Number(m[1]), Number(m[2]) - 1, Number(m[3]),
+      Number(m[4] ?? 0), Number(m[5] ?? 0), Number(m[6] ?? 0)
+    ).getTime();
+  }
+  const t = Date.parse(s);
+  return isNaN(t) ? null : t;
+}
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+function startOfDay(ts: number): number {
+  const d = new Date(ts);
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  label = '',
+  picker = 'date',
+  range = false,
+  default: initial,
+  format,
+  placeholder = '',
+  disableBeforeNow = false,
+  disableAfterNow = false,
+  hint = '',
+  required = false,
+  message = '',
+  error = '',
+  disabled = false,
+  onchange
+}) => {
+  const showTime = picker === 'datetime';
+  // 实际生效的格式：默认值按模式推导——datetime 为 YYYY-MM-DD HH:mm:ss，date 为 YYYY-MM-DD
+  const effFormat = format ?? (showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD');
+
+  // ---------- 状态 ----------
+  const [selected, setSelected] = useState<number | null>(() => {
+    if (initial === undefined || initial === null || range) return null;
+    return parseDateLike(Array.isArray(initial) ? initial[0] : initial);
+  });
+  const [rangeStart, setRangeStart] = useState<number | null>(() => {
+    if (initial === undefined || initial === null || !range) return null;
+    if (Array.isArray(initial)) return parseDateLike(initial[0]);
+    return parseDateLike(initial);
+  });
+  const [rangeEnd, setRangeEnd] = useState<number | null>(() => {
+    if (range && Array.isArray(initial) && initial.length >= 2) return parseDateLike(initial[1]);
+    return null;
+  });
+
+  const [open, setOpen] = useState(false);
+  const [viewYear, setViewYear] = useState(() => {
+    const ref = range ? (rangeStart ?? rangeEnd) : selected;
+    return ref !== null ? new Date(ref).getFullYear() : new Date().getFullYear();
+  });
+  const [viewMonth, setViewMonth] = useState(() => {
+    const ref = range ? (rangeStart ?? rangeEnd) : selected;
+    return ref !== null ? new Date(ref).getMonth() : new Date().getMonth();
+  });
+  // datetime 模式下正在编辑的时间（单选一组；范围选择开始/结束各一组）
+  const [tSingle, setTSingle] = useState<TimeState>({ h: 0, m: 0, s: 0 });
+  const [tStart, setTStart] = useState<TimeState>({ h: 0, m: 0, s: 0 });
+  const [tEnd, setTEnd] = useState<TimeState>({ h: 0, m: 0, s: 0 });
+  // range 模式：第二次点击为结束日期；hover 预览
+  const [pickingEnd, setPickingEnd] = useState(false);
+  const [hoverTs, setHoverTs] = useState<number | null>(null);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // 外部点击关闭面板
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
+
+  // 打开面板时同步视图到已有值
+  function syncView() {
+    const ref = range ? (rangeStart ?? rangeEnd) : selected;
+    const d = ref !== null ? new Date(ref) : new Date();
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
+    if (range) {
+      if (rangeStart !== null) setTStart(fromDate(rangeStart));
+      if (rangeEnd !== null) setTEnd(fromDate(rangeEnd));
+    } else if (selected !== null) {
+      setTSingle(fromDate(selected));
+    }
+  }
+
+  function fromDate(ts: number): TimeState {
+    const d = new Date(ts);
+    return { h: d.getHours(), m: d.getMinutes(), s: d.getSeconds() };
+  }
+
+  function toggleOpen() {
+    if (disabled) return;
+    setOpen(prev => {
+      const next = !prev;
+      if (next) { setPickingEnd(false); syncView(); }
+      return next;
+    });
+  }
+
+  // ---------- 日历格子 ----------
+  function makeCells(year: number, month: number): Cell[] {
+    const first = new Date(year, month, 1);
+    // 周一为一周起点
+    const startOffset = (first.getDay() + 6) % 7;
+    const gridStart = new Date(year, month, 1 - startOffset);
+    const list: Cell[] = [];
+    const now = new Date();
+    const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+    for (let i = 0; i < 42; i++) {
+      const d = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i);
+      const ts = d.getTime();
+      let disabled = false;
+      if (disableBeforeNow && ts < todayStart) disabled = true;
+      if (disableAfterNow && ts > todayStart) disabled = true;
+      list.push({ ts, day: d.getDate(), inMonth: d.getMonth() === month, disabled });
+    }
+    return list;
+  }
+
+  // 单选 / range 左侧面板
+  const leftCells = useMemo(() => makeCells(viewYear, viewMonth), [viewYear, viewMonth, disableBeforeNow, disableAfterNow]);
+  const leftTitle = `${viewMonth + 1}月`;
+  const leftYearTitle = `${viewYear}年`;
+  // range 右侧面板（右侧月份 = 左侧 + 1）
+  const rightYear = viewMonth === 11 ? viewYear + 1 : viewYear;
+  const rightMonth = viewMonth === 11 ? 0 : viewMonth + 1;
+  const rightCells = useMemo(() => makeCells(rightYear, rightMonth), [rightYear, rightMonth, disableBeforeNow, disableAfterNow]);
+  const rightTitle = `${rightMonth + 1}月`;
+  const rightYearTitle = `${rightYear}年`;
+
+  function prevMonth() {
+    if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1); } else setViewMonth(m => m - 1);
+  }
+  function nextMonth() {
+    if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1); } else setViewMonth(m => m + 1);
+  }
+  function prevYear() { setViewYear(y => y - 1); }
+  function nextYear() { setViewYear(y => y + 1); }
+
+  // ---------- 选中逻辑 ----------
+  function applyTime(dayTs: number, t: TimeState): number {
+    if (!showTime) return new Date(dayTs).setHours(0, 0, 0, 0);
+    return new Date(dayTs).setHours(t.h, t.m, t.s, 0);
+  }
+
+  function emit(nextSelected: number | null, nextStart: number | null, nextEnd: number | null) {
+    if (range) {
+      onchange(nextStart !== null && nextEnd !== null ? [nextStart, nextEnd] : []);
+    } else {
+      onchange(nextSelected);
+    }
+  }
+
+  function pickCell(cell: Cell) {
+    if (cell.disabled) return;
+    if (range) {
+      if (!pickingEnd || rangeStart === null || cell.ts < startOfDay(rangeStart)) {
+        // 第一次点击，或点击了早于当前开始日期的格子 → （重新）选择开始
+        const s = applyTime(cell.ts, tStart);
+        setRangeStart(s);
+        setRangeEnd(null);
+        setPickingEnd(true);
+      } else {
+        const e = applyTime(cell.ts, tEnd);
+        setRangeEnd(e);
+        setPickingEnd(false);
+        // datetime 模式保持面板打开，等时间输入 + 确定；仅日期模式直接完成
+        if (!showTime) setOpen(false);
+        emit(selected, rangeStart, e);
+      }
+    } else {
+      const v = applyTime(cell.ts, tSingle);
+      setSelected(v);
+      if (!showTime) setOpen(false);
+      emit(v, rangeStart, rangeEnd);
+    }
+  }
+
+  function setTime(side: 'single' | 'start' | 'end', part: 'h' | 'm' | 's', ev: React.ChangeEvent<HTMLInputElement>) {
+    const n = parseInt(ev.target.value, 10);
+    if (isNaN(n)) return;
+    const max = part === 'h' ? 23 : 59;
+    const v = Math.min(max, Math.max(0, n));
+    const t = side === 'single' ? tSingle : side === 'start' ? tStart : tEnd;
+    const next = { ...t, [part]: v } as TimeState;
+    if (side === 'single') setTSingle(next);
+    if (side === 'start') setTStart(next);
+    if (side === 'end') setTEnd(next);
+    // 已有选中值时实时更新
+    if (side === 'single' && selected !== null) { const s = applyTime(selected, next); setSelected(s); emit(s, rangeStart, rangeEnd); }
+    if (side === 'start' && rangeStart !== null) { const s = applyTime(rangeStart, next); setRangeStart(s); if (rangeEnd !== null) emit(selected, s, rangeEnd); }
+    if (side === 'end' && rangeEnd !== null) { const e = applyTime(rangeEnd, next); setRangeEnd(e); if (rangeStart !== null) emit(selected, rangeStart, e); }
+  }
+
+  function clearValue() {
+    setSelected(null);
+    setRangeStart(null);
+    setRangeEnd(null);
+    setPickingEnd(false);
+    onchange(range ? [] : null);
+  }
+
+  // datetime 模式：应用时间输入并确认
+  function confirmTime() {
+    if (range) {
+      const s = rangeStart !== null ? applyTime(rangeStart, tStart) : null;
+      const e = rangeEnd !== null ? applyTime(rangeEnd, tEnd) : null;
+      if (s !== null) setRangeStart(s);
+      if (e !== null) setRangeEnd(e);
+      emit(selected, s, e);
+    } else if (selected !== null) {
+      const v = applyTime(selected, tSingle);
+      setSelected(v);
+      emit(v, rangeStart, rangeEnd);
+    }
+    setOpen(false);
+  }
+
+  function formatDate(ts: number): string {
+    const d = new Date(ts);
+    return effFormat
+      .replace(/YYYY/g, String(d.getFullYear()))
+      .replace(/MM/g, pad(d.getMonth() + 1))
+      .replace(/DD/g, pad(d.getDate()))
+      .replace(/HH/g, pad(d.getHours()))
+      .replace(/mm/g, pad(d.getMinutes()))
+      .replace(/ss/g, pad(d.getSeconds()));
+  }
+
+  // 展示文案
+  const startText = rangeStart !== null ? formatDate(rangeStart) : '';
+  const endText = rangeEnd !== null ? formatDate(rangeEnd) : '';
+
+  // 格子状态 class
+  function cellCls(c: Cell): string {
+    const day = startOfDay(c.ts);
+    let cls = 'dp-cell';
+    if (!c.inMonth) cls += ' dp-cell-out';
+    if (c.disabled) {
+      cls += ' dp-cell-disabled';
+      return cls;
+    }
+    const todayTs = startOfDay(Date.now());
+    if (day === todayTs) cls += ' dp-cell-today';
+    if (range && rangeStart !== null) {
+      const s = startOfDay(rangeStart);
+      // 已有结束日期用真实值；正在选结束时用 hover 位置预览（支持反向 hover）
+      const e = rangeEnd !== null ? startOfDay(rangeEnd) : (pickingEnd && hoverTs !== null ? startOfDay(hoverTs) : null);
+      if (e !== null) {
+        const lo = Math.min(s, e);
+        const hi = Math.max(s, e);
+        if (day === lo) cls += ' dp-cell-range-start';
+        if (day === hi) cls += ' dp-cell-range-end';
+        if (day > lo && day < hi) cls += ' dp-cell-in-range';
+      } else if (day === s) {
+        cls += ' dp-cell-range-start';
+      }
+    } else if (selected !== null && day === startOfDay(selected)) {
+      cls += ' dp-cell-selected';
+    }
+    return cls;
+  }
+
+  // 单个日历面板
+  const calPanel = (cellsList: Cell[], title: string, yearTitle: string, nav: 'prev' | 'next' | 'both') => (
+    <div className="dp-calendar">
+      <div className="dp-header">
+        <div className="dp-header-nav">
+          {(nav === 'prev' || nav === 'both') && (
+            <>
+              <button type="button" className="dp-nav" onClick={prevYear} aria-label="上一年">«</button>
+              <button type="button" className="dp-nav" onClick={prevMonth} aria-label="上个月">‹</button>
+            </>
+          )}
+        </div>
+        <span className="dp-title">
+          <span className="dp-title-year">{yearTitle}</span>
+          {title}
+        </span>
+        <div className="dp-header-nav">
+          {(nav === 'next' || nav === 'both') && (
+            <>
+              <button type="button" className="dp-nav" onClick={nextMonth} aria-label="下个月">›</button>
+              <button type="button" className="dp-nav" onClick={nextYear} aria-label="下一年">»</button>
+            </>
+          )}
+        </div>
+      </div>
+      <div className="dp-week-header">
+        {WEEK_LABELS.map(w => <span className="dp-week" key={w}>{w}</span>)}
+      </div>
+      <div className="dp-grid" onMouseLeave={() => setHoverTs(null)}>
+        {cellsList.map(c => (
+          <button
+            type="button"
+            key={c.ts}
+            className={cellCls(c)}
+            onClick={() => pickCell(c)}
+            onMouseOver={() => setHoverTs(c.ts)}
+            disabled={c.disabled}
+          >{c.day}</button>
+        ))}
+      </div>
+    </div>
+  );
+
+  const timeInput = (side: 'single' | 'start' | 'end', label: string, t: TimeState) => (
+    <>
+      {label && <span className="dp-time-label">{label}</span>}
+      <input className="dp-time-input" type="number" min={0} max={23} value={t.h} onChange={(e) => setTime(side, 'h', e)} aria-label={`${label} 时`} />
+      <span className="dp-time-sep">:</span>
+      <input className="dp-time-input" type="number" min={0} max={59} value={t.m} onChange={(e) => setTime(side, 'm', e)} aria-label={`${label} 分`} />
+      <span className="dp-time-sep">:</span>
+      <input className="dp-time-input" type="number" min={0} max={59} value={t.s} onChange={(e) => setTime(side, 's', e)} aria-label={`${label} 秒`} />
+    </>
+  );
+
+  return (
+    <div className="selector widget-date-picker" ref={rootRef}>
+      {(label || hint || required) && (
+        <div className="widget-label-row">
+          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
+          {label && <label>{label}</label>}
+          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
+        </div>
+      )}
+      <div className="widget-field-content">
+        <button
+          type="button"
+          className={`dp-input${error ? ' widget-input-error' : ''}`}
+          onClick={toggleOpen}
+          aria-expanded={open}
+          disabled={disabled}
+        >
+          <span className="dp-input-icon" aria-hidden="true">📅</span>
+          {range ? (
+            <>
+              <span className={`dp-input-text dp-seg${startText ? '' : ' dp-placeholder'}`}>
+                {startText || placeholder || (showTime ? '开始时间' : '开始日期')}
+              </span>
+              <span className="dp-sep" aria-hidden="true">→</span>
+              <span className={`dp-input-text dp-seg${endText ? '' : ' dp-placeholder'}`}>
+                {endText || (showTime ? '结束时间' : '结束日期')}
+              </span>
+            </>
+          ) : (
+            <span className={`dp-input-text${selected !== null ? '' : ' dp-placeholder'}`}>
+              {selected !== null ? formatDate(selected) : placeholder || '请选择日期'}
+            </span>
+          )}
+          {!disabled && (range ? (startText || endText) : selected !== null) && (
+            <span
+              className="dp-clear"
+              role="button"
+              tabIndex={-1}
+              aria-label="清空"
+              onClick={(e) => { e.stopPropagation(); clearValue(); setOpen(false); }}
+            >×</span>
+          )}
+        </button>
+        {error && <div className="widget-error-text" role="alert">{error}</div>}
+
+        {open && (
+          <div className={`dp-panel${range ? ' dp-range' : ''}`}>
+            {range ? (
+              <div className="dp-panels">
+                {calPanel(leftCells, leftTitle, leftYearTitle, 'prev')}
+                {calPanel(rightCells, rightTitle, rightYearTitle, 'next')}
+              </div>
+            ) : (
+              calPanel(leftCells, leftTitle, leftYearTitle, 'both')
+            )}
+
+            {showTime && (
+              <div className="dp-time">
+                {range ? (
+                  <>
+                    <div className="dp-time-groups">
+                      <div className="dp-time-group">{timeInput('start', '开始', tStart)}</div>
+                      <span className="dp-time-arrow" aria-hidden="true">~</span>
+                      <div className="dp-time-group">{timeInput('end', '结束', tEnd)}</div>
+                    </div>
+                    <div className="dp-footer">
+                      <button type="button" className="dp-ok" onClick={confirmTime} disabled={rangeStart === null}>确定</button>
+                    </div>
+                  </>
+                ) : (
+                  <div className="dp-time-group">
+                    {timeInput('single', '', tSingle)}
+                    <button type="button" className="dp-ok" onClick={confirmTime} disabled={selected === null}>确定</button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};