weifuwu 0.94.1 → 0.95.0

package/dist/level5/client/components/DatePicker/DatePicker.css

@@ -0,0 +1,303 @@
+/* weifuwu/client/components — DatePicker */
+
+.wf-datepicker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.wf-datepicker-input {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  padding: var(--wf-control-pad-y) var(--wf-space);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  outline: none;
+  width: 100%;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.wf-datepicker-input:focus {
+  border-color: var(--wf-color-primary);
+  box-shadow: var(--wf-focus-ring);
+}
+
+.wf-datepicker--disabled .wf-datepicker-input {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ── 遮罩 ── */
+
+/* ── 日历面板 ── */
+
+.wf-datepicker-dropdown {
+  position: fixed;
+  z-index: var(--wf-z-popover);
+  background: var(--wf-color-bg-elevated);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-md);
+  padding: var(--wf-space);
+  min-width: var(--wf-datepicker-width,  260px);
+  user-select: none;
+  /* 面板族统一入场：wf-panel-in（scale+fade，Token 驱动） */
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
+  transform-origin: top center;
+  max-width: calc(100vw - 32px);
+}
+
+.wf-datepicker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--wf-space);
+}
+
+.wf-datepicker-header-title {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  font-weight: var(--wf-font-weight-semibold);
+  color: var(--wf-color-text);
+}
+
+.wf-datepicker-header-btn {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  padding: var(--wf-space-xs) var(--wf-space-sm);
+  border: none;
+  border-radius: var(--wf-radius-sm);
+  background: transparent;
+  color: var(--wf-color-text-secondary);
+  cursor: pointer;
+}
+
+.wf-datepicker-header-btn:hover {
+  background: var(--wf-color-bg-tertiary);
+  color: var(--wf-color-text);
+}
+
+.wf-datepicker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: var(--wf-space-xs);
+}
+
+.wf-datepicker-weekday {
+  text-align: center;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  padding: var(--wf-space-xs) 0;
+}
+
+.wf-datepicker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.wf-datepicker-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text);
+  border-radius: var(--wf-radius-sm);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+}
+
+.wf-datepicker-cell:hover {
+  background: var(--wf-color-bg-tertiary);
+}
+
+.wf-datepicker-cell--other-month {
+  color: var(--wf-color-text-disabled);
+}
+
+.wf-datepicker-cell--today {
+  font-weight: var(--wf-font-weight-bold);
+  box-shadow: inset 0 0 0 1px var(--wf-color-border-dark); /* 边框高亮，不撑开布局 */
+}
+
+.wf-datepicker-cell--selected {
+  background: var(--wf-color-primary);
+  color: var(--wf-color-on-brand);
+}
+
+.wf-datepicker-cell--in-range {
+  background: var(--wf-color-primary-bg);
+  border-radius: 0;
+}
+
+.wf-datepicker-cell--range-edge {
+  background: var(--wf-color-primary);
+  color: var(--wf-color-on-brand);
+}
+
+/* ── 区间模式 ── */
+
+.wf-datepicker-range-wrap {
+  position: fixed;
+  z-index: var(--wf-z-popover);
+  display: flex;
+  gap: var(--wf-space);
+  background: var(--wf-color-bg-elevated);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-md);
+  padding: var(--wf-space);
+  user-select: none;
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
+  transform-origin: top center;
+  /* 宽度自适应内容（双面板 2×240 + gap）——不被容器/trigger 压缩 */
+  width: max-content;
+  max-width: calc(100vw - 32px);
+}
+
+.wf-datepicker-range-panel {
+  min-width: var(--wf-datepicker-time-width, 240px);
+  /* flex 子项不压缩——面板保持自身宽度（内联 width 残留时防溢出） */
+  flex-shrink: 0;
+}
+
+/* ── 时间选择 ── */
+
+.wf-time-picker {
+  position: fixed;
+  z-index: var(--wf-z-popover);
+  background: var(--wf-color-bg);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-md);
+  box-shadow: var(--wf-shadow-md);
+  padding: var(--wf-space);
+  min-width: var(--wf-datepicker-range-width,  200px);
+  user-select: none;
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
+  transform-origin: top center;
+  max-width: calc(100vw - 32px);
+}
+
+.wf-time-body {
+  display: flex;
+  gap: var(--wf-space-lg);
+  justify-content: center;
+  padding: var(--wf-space) 0;
+  overflow-x: auto;
+}
+
+.wf-time-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--wf-gap-xs);
+}
+
+.wf-time-col-label {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+}
+
+.wf-time-opt-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.wf-time-opt {
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+  padding: 2px 12px;
+  border: none;
+  border-radius: var(--wf-radius-sm);
+  background: transparent;
+  color: var(--wf-color-text);
+  cursor: pointer;
+  text-align: center;
+}
+
+.wf-time-opt:hover {
+  background: var(--wf-color-bg-tertiary);
+}
+
+.wf-time-opt--selected {
+  background: var(--wf-color-primary);
+  color: var(--wf-color-on-brand);
+}
+
+.wf-time-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wf-gap-sm);
+  padding-top: var(--wf-space-sm);
+  border-top: var(--wf-border-width) solid var(--wf-color-border-light);
+}
+
+/* ── datetime 模式 ── */
+
+.wf-datetime-time {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap-sm);
+  margin-top: var(--wf-space);
+  padding-top: var(--wf-space-sm);
+  border-top: var(--wf-border-width) solid var(--wf-color-border-light);
+}
+
+.wf-datetime-time-label {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-secondary);
+}
+
+.wf-datetime-time-select {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.wf-datetime-select {
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  padding: 2px 4px;
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius-sm);
+  background: var(--wf-color-bg-elevated);
+  color: var(--wf-color-text);
+  outline: none;
+  cursor: pointer;
+}
+
+.wf-datetime-sep {
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-tertiary);
+  padding: 0 2px;
+}
+
+/* range 双面板（240px×2 ≈ 500px）在 375px 屏溢出 → 窄屏纵向堆叠 */
+@media (max-width: 639.98px) { /* 断点单源：--wf-bp-sm(640) - 0.02（LAYOUT-PLAN W3·L10 哨兵） */
+  .wf-datepicker-range-wrap {
+    flex-direction: column;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}
+
+/* error（F2 状态矩阵） */
+.wf-datepicker-input--err { border-color: var(--wf-color-error); }
+.wf-datepicker-input--err:focus { box-shadow: 0 0 0 2px var(--wf-color-error-bg), 0 0 0 1px var(--wf-color-error); }
+/* ── 语义标记类（DOM 钩子——无样式：测试定位/用户扩展——:where 零优先级显式声明） ── */
+:where(.wf-datepicker-footer-btn) {}

package/dist/level5/client/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,21 @@
+/** DatePicker：日期选择器，四种模式：date/datetime/time/range（showcase /components/datepicker） */
+/**
+ * weifuwu/client/components — DatePicker
+ *
+ * 四合一日期选择器，支持 mode: date | datetime | time | range
+ * 统一 openPopup 内核：focus 触发 + mask 遮罩 + 自由定位（left 对齐 + width 跟随 trigger）。
+ *
+ * 状态管理：闭包变量 + ctx.render()
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export type DatePickerMode = 'date' | 'datetime' | 'time' | 'range';
+export interface DatePickerProps {
+    mode?: DatePickerMode;
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** 错误态（F2 状态矩阵——输入类基线） */
+    error?: string;
+}
+export declare const DatePicker: Component<DatePickerProps>;

package/dist/level5/client/components/DatePicker/DatePicker.ts

@@ -0,0 +1,343 @@
+/** DatePicker：日期选择器，四种模式：date/datetime/time/range（showcase /components/datepicker） */
+/**
+ * weifuwu/client/components — DatePicker
+ *
+ * 四合一日期选择器，支持 mode: date | datetime | time | range
+ * 统一 openPopup 内核：focus 触发 + mask 遮罩 + 自由定位（left 对齐 + width 跟随 trigger）。
+ *
+ * 状态管理：闭包变量 + ctx.render()
+ */
+
+import type { Component, VNode } from '../../../../level6/client/vdom/index.ts'
+import { createClientBrowser } from '../../../../level6/client/vdom/index.ts'
+import type { UIContext } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+import { Icon } from '../Icon/Icon.ts'
+import type { IconName } from '../Icon/Icon.ts'
+import {
+  getCalendarGrid, getWeekdays, formatDate, formatTime, formatDateTime,
+  hourOptions, minuteOptions,
+} from './calendar-utils.ts'
+import type { CalendarDay } from './calendar-utils.ts'
+
+export type DatePickerMode = 'date' | 'datetime' | 'time' | 'range'
+
+export interface DatePickerProps {
+  mode?: DatePickerMode
+  value?: string
+  onChange?: (value: string)=> void
+  placeholder?: string
+  disabled?: boolean
+  /** 错误态（F2 状态矩阵——输入类基线） */
+  error?: string
+}
+
+export const DatePicker: Component<DatePickerProps> = (_props, ctx)=> {
+  const _browser = ctx.browser ?? createClientBrowser()
+  // ── mount（只一次）──
+  let show = false
+  let selectedValue = ''
+  const now = new Date()
+  let viewYear = now.getFullYear()
+  let viewMonth = now.getMonth()
+  let hour = now.getHours()
+  let minute = Math.round(now.getMinutes() / 5) * 5
+  let selYear = now.getFullYear()
+  let selMonth = now.getMonth()
+  let selDay = now.getDate()
+  let rangeStart: string | null = null
+  let rangeEnd: string | null = null
+
+  let inputEl: HTMLElement | null = null
+  const inputRef = (el: HTMLElement | null)=> { inputEl = el }
+  let latestMode: DatePickerMode = 'date'
+
+  // ESC 关闭（document 级——面板 keydown 只在焦点内生效；这里覆盖全局）
+  ctx.ui.useGlobalKey((e: KeyboardEvent)=> {
+    if (e.key === 'Escape' && show) { show = false; ctx.render() }
+  })
+  // 统一命令式弹窗（openPopup）：mask 遮罩（点外部关）+ 自由定位（left 对齐 +
+  // width 跟随 trigger）
+  /** 命令式句柄（唯一形态——openPopup——组件内部同步样板） */
+  let handle: import('../../../../level3/vdom/hooks/popup-manager.ts').PopupHandle | null = null
+  const syncPanel = (panel: import('../../../../level6/client/vdom/index.ts').VNode | null): void => {
+    if (show && panel && !handle)
+      handle = ctx.ui.openPopup({
+        key: 'dp-calendar',
+        mask: true,
+        maskClosable: true,
+        closeOnEscape: false,   // 组件自控（useGlobalKey）
+        content: ()=> panel,
+        position: ()=> {
+          const r = inputEl?.getBoundingClientRect()
+          if (!r) return { x: 0, y: 0 }
+          // range 模式双面板自适应宽度（不塞 trigger 宽）；其余跟随 trigger
+          const isRange = latestMode === 'range'
+          return { x: r.left, y: r.bottom + 4, width: isRange ? undefined : r.width }
+        },
+        onClose: ()=> { handle = null; if (show) { show = false; ctx.render() } },
+      })
+    else if (!show && handle) { handle.close(); handle = null }
+    else if (handle) handle.update(panel)
+  }
+
+  return (props: DatePickerProps)=> {
+    const L = ctx?.i18n?.components?.DatePicker ?? {}
+    const { mode = 'date', value, onChange, placeholder = L.placeholder ?? '选择日期', disabled, error } = props
+    latestMode = mode
+
+    const isOpen = show
+    const setOpen = (v: boolean)=> {
+      show = v
+      ctx.render()
+    }
+
+    const toggle = (e: Event)=> {
+      if (disabled) return
+      setOpen(!show)
+    }
+
+    // ── 日期选择 ──────────────────────────────────────
+    const selectDate = (day: CalendarDay)=> {
+      if (mode === 'datetime') {
+        selYear = day.year; selMonth = day.month; selDay = day.day
+        viewYear = day.year; viewMonth = day.month
+        ctx.render()
+      } else if (mode === 'range') {
+        if (!rangeStart || (rangeStart && rangeEnd)) {
+          rangeStart = formatDate(day.year, day.month, day.day)
+          rangeEnd = null
+          ctx.render()
+        } else {
+          rangeEnd = formatDate(day.year, day.month, day.day)
+          const ds = rangeStart < rangeEnd ? rangeStart : rangeEnd
+          const de = rangeStart < rangeEnd ? rangeEnd : rangeStart
+          selectedValue = `${ds} ~ ${de}`
+          onChange?.(selectedValue)
+          setOpen(false)
+        }
+      } else {
+        selectedValue = formatDate(day.year, day.month, day.day)
+        onChange?.(selectedValue)
+        setOpen(false)
+      }
+    }
+
+    const prevMonth = ()=> {
+      if (viewMonth === 0) { viewYear--; viewMonth = 11 }
+      else viewMonth--
+      ctx.render()
+    }
+
+    const nextMonth = ()=> {
+      if (viewMonth === 11) { viewYear++; viewMonth = 0 }
+      else viewMonth++
+      ctx.render()
+    }
+
+    const confirmTime = ()=> {
+      selectedValue = formatTime(hour, minute)
+      onChange?.(selectedValue)
+      setOpen(false)
+    }
+
+    const confirmDateTime = ()=> {
+      selectedValue = formatDateTime(selYear, selMonth, selDay, hour, minute)
+      onChange?.(selectedValue)
+      setOpen(false)
+    }
+
+    const grid = getCalendarGrid(viewYear, viewMonth)
+    const weekdays = [L.w0, L.w1, L.w2, L.w3, L.w4, L.w5, L.w6].some(v => v) ? [L.w0, L.w1, L.w2, L.w3, L.w4, L.w5, L.w6] : getWeekdays()
+
+    const headerBtn = (name: IconName, ariaLabel: string, onClick: ()=> void) =>
+      h('button', { class: 'wf-datepicker-header-btn', type: 'button', 'aria-label': ariaLabel, onClick }, h(Icon, { name }))
+
+    const header = h('div', { class: 'wf-datepicker-header' }, [
+      headerBtn('chevron-left', L.prevMonth ?? '上个月', prevMonth),
+      h('span', { class: 'wf-datepicker-header-title' }, `${viewYear}年${viewMonth + 1}月`),
+      headerBtn('chevron-right', L.nextMonth ?? '下个月', nextMonth),
+    ])
+
+    const weekdayRow = h('div', { class: 'wf-datepicker-weekdays' },
+      weekdays.map(w => h('span', { class: 'wf-datepicker-weekday' }, w)))
+
+    const gridRows = grid.map((row, ri)=>
+      h('div', { class: 'wf-datepicker-grid', key: `row-${ri}` },
+        row.map((cell, ci)=> {
+          const classes = ['wf-datepicker-cell']
+          if (cell.isOtherMonth) classes.push('wf-datepicker-cell--other-month')
+          if (cell.isToday) classes.push('wf-datepicker-cell--today')
+          const dateStr = formatDate(cell.year, cell.month, cell.day)
+          if (mode === 'range') {
+            if (dateStr === rangeStart || dateStr === rangeEnd) classes.push('wf-datepicker-cell--range-edge')
+            else if (rangeStart && rangeEnd && dateStr > rangeStart && dateStr < rangeEnd) classes.push('wf-datepicker-cell--in-range')
+          } else if (mode === 'datetime') {
+            if (selYear === cell.year && selMonth === cell.month && selDay === cell.day) classes.push('wf-datepicker-cell--selected')
+          } else {
+            if (dateStr === selectedValue) classes.push('wf-datepicker-cell--selected')
+          }
+          return h('button', {
+            class: classes.join(' '),
+            key: `${cell.year}-${cell.month}-${cell.day}`,
+            type: 'button',
+            onClick: ()=> selectDate(cell),
+          }, String(cell.day))
+        })))
+
+    const calendarPanel = h('div', { class: 'wf-datepicker-range-panel' }, [
+      header, weekdayRow, ...gridRows,
+    ])
+
+    const handleKeyDown = (e: KeyboardEvent)=> {
+      if (e.key === 'Escape') { setOpen(false); return }
+      // 日历网格方向键导航（time/datetime 面板无网格，跳过）
+      if (mode === 'time' || mode === 'datetime') return
+      if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) return
+      const panel = e.currentTarget as HTMLElement
+      const cells = Array.from(panel.querySelectorAll<HTMLElement>('.wf-datepicker-cell'))
+      const idx = cells.indexOf((_browser?.activeElement() ?? null) as HTMLElement)
+      if (idx < 0) return
+      e.preventDefault()
+      const cols = 7
+      let next = idx
+      if (e.key === 'ArrowLeft') next--
+      else if (e.key === 'ArrowRight') next++
+      else if (e.key === 'ArrowUp') next -= cols
+      else if (e.key === 'ArrowDown') next += cols
+      if (next >= 0 && next < cells.length) cells[next].focus()
+    }
+
+    let panel: VNode | null = null
+
+    if (isOpen) {
+      if (mode === 'time') {
+        const hours = hourOptions()
+        const minutes = minuteOptions()
+        const timePanel = h('div', {
+          class: 'wf-time-picker', role: 'dialog',
+          onKeyDown: handleKeyDown,
+          onMouseDown: (e: Event)=> e.stopPropagation(),
+        }, [
+          h('div', { class: 'wf-time-body' }, [
+            h('div', { class: 'wf-time-col' }, [
+              h('div', { class: 'wf-time-col-label' }, L.hour ?? '时'),
+              h('div', { class: 'wf-time-opt-list' },
+                hours.map(hv => h('button', {
+                  class: `wf-time-opt${hv === hour ? ' wf-time-opt--selected' : ''}`,
+                  type: 'button', key: hv,
+                  onClick: ()=> { hour = hv; ctx.render() },
+                }, String(hv).padStart(2, '0')))),
+            ]),
+            h('div', { class: 'wf-time-col' }, [
+              h('div', { class: 'wf-time-col-label' }, L.minute ?? '分'),
+              h('div', { class: 'wf-time-opt-list' },
+                minutes.map(mv => h('button', {
+                  class: `wf-time-opt${mv === minute ? ' wf-time-opt--selected' : ''}`,
+                  type: 'button', key: mv,
+                  onClick: ()=> { minute = mv; ctx.render() },
+                }, String(mv).padStart(2, '0')))),
+            ]),
+          ]),
+          h('div', { class: 'wf-time-footer' }, [
+            h('button', { class: 'wf-datepicker-footer-btn', type: 'button', onClick: ()=> setOpen(false) }, L.cancel ?? '取消'),
+            h('button', { class: 'wf-datepicker-footer-btn', type: 'button', onClick: confirmTime }, L.confirm ?? '确定'),
+          ]),
+        ])
+        panel = timePanel
+      } else if (mode === 'range') {
+        const nextM = viewMonth === 11 ? 0 : viewMonth + 1
+        const nextY = viewMonth === 11 ? viewYear + 1 : viewYear
+        const nextGrid = getCalendarGrid(nextY, nextM)
+
+        const rangeWrap = h('div', {
+          class: 'wf-datepicker-range-wrap',
+          onMouseDown: (e: Event)=> e.stopPropagation(),
+        }, [
+          h('div', { class: 'wf-datepicker-range-panel' }, [
+            h('div', { class: 'wf-datepicker-header' }, [
+              headerBtn('chevron-left', L.prevMonth ?? '上个月', prevMonth),
+              h('span', { class: 'wf-datepicker-header-title' }, `${viewYear}年${viewMonth + 1}月`),
+              h('span', { class: 'wf-datepicker-header-title' }),
+            ]),
+            weekdayRow,
+            ...gridRows,
+          ]),
+          h('div', { class: 'wf-datepicker-range-panel' }, [
+            h('div', { class: 'wf-datepicker-header' }, [
+              h('span', { class: 'wf-datepicker-header-title' }),
+              h('span', { class: 'wf-datepicker-header-title' }, `${nextY}年${nextM + 1}月`),
+              headerBtn('chevron-right', L.nextMonth ?? '下个月', nextMonth),
+            ]),
+            h('div', { class: 'wf-datepicker-weekdays' }, weekdays.map(w => h('span', { class: 'wf-datepicker-weekday' }, w))),
+            ...nextGrid.map((row, ri)=>
+              h('div', { class: 'wf-datepicker-grid', key: `row-${ri}` },
+                row.map(cell => {
+                  const dateStr = formatDate(cell.year, cell.month, cell.day)
+                  const cls = ['wf-datepicker-cell']
+                  if (cell.isOtherMonth) cls.push('wf-datepicker-cell--other-month')
+                  if (cell.isToday) cls.push('wf-datepicker-cell--today')
+                  if (dateStr === rangeStart || dateStr === rangeEnd) cls.push('wf-datepicker-cell--range-edge')
+                  else if (rangeStart && rangeEnd && dateStr > rangeStart && dateStr < rangeEnd) cls.push('wf-datepicker-cell--in-range')
+                  return h('button', {
+                    class: cls.join(' '), key: dateStr, type: 'button',
+                    onClick: ()=> selectDate(cell),
+                  }, String(cell.day))
+                }))),
+          ]),
+        ])
+        panel = rangeWrap
+      } else {
+        const content: any[] = [calendarPanel]
+        if (mode === 'datetime') {
+          content.push(h('div', { class: 'wf-datetime-time' }, [
+            h('span', { class: 'wf-datetime-time-label' }, (L.time ?? '时间') + '：'),
+            h('div', { class: 'wf-datetime-time-select' }, [
+              h('select', {
+                class: 'wf-datetime-select',
+                value: hour,
+                onChange: (e: Event)=> { hour = parseInt((e.target as HTMLSelectElement).value); ctx.render() },
+              }, hourOptions().map(hv => h('option', { value: hv, key: hv }, String(hv).padStart(2, '0')))),
+              h('span', { class: 'wf-datetime-sep' }, ':'),
+              h('select', {
+                class: 'wf-datetime-select',
+                value: minute,
+                onChange: (e: Event)=> { minute = parseInt((e.target as HTMLSelectElement).value); ctx.render() },
+              }, minuteOptions().map(mv => h('option', { value: mv, key: mv }, String(mv).padStart(2, '0')))),
+            ]),
+          ]))
+          content.push(h('div', { class: 'wf-time-footer' }, [
+            h('button', { class: 'wf-datepicker-footer-btn', type: 'button', onClick: confirmDateTime }, L.confirm ?? '确定'),
+          ]))
+        }
+        const dp = h('div', {
+          class: 'wf-datepicker-dropdown', role: 'dialog',
+          onKeyDown: handleKeyDown,
+          onMouseDown: (e: Event)=> e.stopPropagation(),
+        }, content)
+        panel = dp
+      }
+    }
+
+    // 命令式同步（受控 + 内容更新——每次渲染恒调用）
+    syncPanel(isOpen ? panel : null)
+    const displayValue = value ?? selectedValue ?? ''
+
+    return h('div', { class: `wf-datepicker${disabled ? ' wf-datepicker--disabled' : ''}` }, [
+      h('input', {
+        class: ['wf-datepicker-input', error ? ' wf-datepicker-input--err' : ''].filter(Boolean).join(' '),
+        'aria-invalid': error ? 'true' : undefined,
+        type: 'text',
+        placeholder,
+        value: displayValue || '',
+        ref: inputRef,
+        readonly: true,
+        disabled,
+        role: 'combobox',
+        'aria-haspopup': 'dialog',
+        'aria-expanded': String(isOpen),
+        onClick: toggle,
+      }),
+    ])
+  }
+}