@aquiferre/ui-kit 0.3.0 → 0.4.1

package/components/DateTimePicker.vue

@@ -0,0 +1,563 @@
+<template>
+  <div ref="rootRef" class="relative" :data-testid="baseTestId">
+    <!-- Trigger -->
+    <div
+      ref="triggerRef"
+      class="input flex items-center gap-1 cursor-pointer select-none"
+      :class="[disabled ? 'opacity-60 cursor-not-allowed' : '']"
+      @click="toggle"
+    >
+      <span v-if="hasValue" class="flex-1 min-w-0 truncate text-input-text text-xs">{{ displayText }}</span>
+      <span v-else class="flex-1 min-w-0"></span>
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="text-text-tertiary hover:text-text-primary text-xs px-1"
+        @click.stop="clear"
+        tabindex="-1"
+      >&#x2715;</button>
+      <svg class="w-3.5 h-3.5 text-text-tertiary flex-shrink-0" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+        <rect x="2" y="3" width="12" height="11" rx="1.5" />
+        <path d="M2 6.5h12" />
+        <path d="M5 1.5v3M11 1.5v3" />
+      </svg>
+    </div>
+
+    <!-- Panel -->
+    <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed card shadow-lg p-3"
+      :style="panelStyle"
+      @mousedown.stop
+      @click.stop
+    >
+      <!-- Calendar mode -->
+      <div v-if="pickerStyle === 'calendar'">
+        <div class="flex items-center justify-between mb-2">
+          <div class="relative">
+            <button type="button" class="btn-sm btn-ghost text-xs font-semibold" @click="yearDropdownOpen = !yearDropdownOpen">
+              {{ viewYear }}年 &#x25BE;
+            </button>
+            <div
+              v-if="yearDropdownOpen"
+              class="absolute top-full left-0 mt-1 card shadow-lg z-30 p-2 min-w-[160px]"
+              @mousedown.prevent
+            >
+              <div class="flex items-center justify-between mb-1.5 px-1">
+                <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="decadeStart -= 10">&#x25C0;</button>
+                <span class="text-xs text-text-secondary">{{ decadeStart }}&mdash;{{ decadeStart + 9 }}</span>
+                <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="decadeStart += 10">&#x25B6;</button>
+              </div>
+              <div class="grid grid-cols-2 gap-1">
+                <button
+                  v-for="y in decadeYears" :key="y" type="button"
+                  class="px-2 py-1 text-xs rounded-md transition-colors"
+                  :class="y === viewYear ? 'bg-accent-primary text-white' : 'text-text-primary hover:bg-bg-hover'"
+                  @click="selectYear(y)"
+                >{{ y }}</button>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-1">
+            <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="prevMonth">&#x25C0;</button>
+            <span class="text-xs font-semibold text-text-primary min-w-[3rem] text-center">{{ viewMonth }}月</span>
+            <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="nextMonth">&#x25B6;</button>
+          </div>
+        </div>
+        <div class="grid grid-cols-7 gap-0.5 mb-1">
+          <div v-for="d in weekDays" :key="d" class="text-center text-xs text-text-tertiary py-0.5 font-medium">{{ d }}</div>
+        </div>
+        <div class="grid grid-cols-7 gap-0.5">
+          <button
+            v-for="(day, i) in calendarDays" :key="i" type="button"
+            class="h-7 w-7 text-xs rounded-md transition-colors mx-auto"
+            :class="dayClass(day)"
+            :disabled="isDisabled(day.dateStr)"
+            @click="selectDate(day)"
+          >{{ day.day }}</button>
+        </div>
+      </div>
+
+      <!-- Grid mode -->
+      <div v-else class="flex gap-3">
+        <div>
+          <div class="flex items-center justify-between mb-1.5 px-1">
+            <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="decadeStart -= 10">&#x25C0;</button>
+            <span class="text-xs text-text-secondary">{{ decadeStart }}&mdash;{{ decadeStart + 9 }}</span>
+            <button type="button" class="btn-icon text-text-secondary hover:text-text-primary" @click="decadeStart += 10">&#x25B6;</button>
+          </div>
+          <div class="grid grid-cols-2 gap-1">
+            <button
+              v-for="y in decadeYears" :key="y" type="button"
+              class="px-2 py-1 text-xs rounded-md transition-colors min-w-[3rem]"
+              :class="y === viewYear ? 'bg-accent-primary text-white' : 'bg-bg-secondary text-text-primary hover:bg-bg-hover'"
+              @click="selectYear(y)"
+            >{{ y }}</button>
+          </div>
+        </div>
+        <div class="w-px bg-border-primary" />
+        <div>
+          <div class="mb-1.5 px-1"><span class="text-xs text-text-secondary">月份</span></div>
+          <div class="grid grid-cols-2 gap-1">
+            <button
+              v-for="m in 12" :key="m" type="button"
+              class="px-2 py-1 text-xs rounded-md transition-colors min-w-[2.5rem]"
+              :class="m === viewMonth ? 'bg-accent-primary text-white' : 'bg-bg-secondary text-text-primary hover:bg-bg-hover'"
+              @click="selectMonth(m)"
+            >{{ m }}月</button>
+          </div>
+        </div>
+        <div class="w-px bg-border-primary" />
+        <div>
+          <div class="grid grid-cols-7 gap-0.5 mb-1">
+            <div v-for="d in weekDays" :key="d" class="text-center text-xs text-text-tertiary py-0.5 font-medium">{{ d }}</div>
+          </div>
+          <div class="grid grid-cols-7 gap-0.5">
+            <button
+              v-for="(day, i) in calendarDays" :key="i" type="button"
+              class="h-7 w-7 text-xs rounded-md transition-colors mx-auto"
+              :class="dayClass(day)"
+              :disabled="isDisabled(day.dateStr)"
+              @click="selectDate(day)"
+            >{{ day.day }}</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Time section -->
+      <div v-if="mode === 'datetime' || mode === 'time'" class="flex items-center justify-center gap-3 mt-3 pt-3 border-t border-border-primary">
+        <div v-for="col in timeColumns" :key="col.key" class="flex flex-col items-center gap-0.5">
+          <button type="button" class="text-text-tertiary hover:text-text-primary text-xs leading-none" @click="incTime(col.key)">&#x25B2;</button>
+          <input
+            v-if="editingTime === col.key"
+            ref="timeInputRefs"
+            :value="pad(col.val)"
+            class="input text-center text-xs w-10 py-0.5"
+            :maxlength="2"
+            @blur="finishTimeEdit(col.key, $event)"
+            @keydown.enter="finishTimeEdit(col.key, $event)"
+          />
+          <button v-else type="button" class="text-sm font-mono font-semibold text-text-primary hover:bg-bg-hover rounded px-2 py-0.5" @click="startTimeEdit(col.key)">{{ pad(col.val) }}</button>
+          <button type="button" class="text-text-tertiary hover:text-text-primary text-xs leading-none" @click="decTime(col.key)">&#x25BC;</button>
+        </div>
+      </div>
+
+      <!-- Confirm button -->
+      <div v-if="mode !== 'date'" class="flex justify-end mt-3 pt-2 border-t border-border-primary">
+        <button type="button" class="btn-sm btn-primary" @click="confirm">确认</button>
+      </div>
+    </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, useAttrs } from 'vue'
+import type { DateTimePreset } from '../types'
+
+const props = withDefaults(defineProps<{
+  modelValue: string | [string, string]
+  mode?: 'date' | 'time' | 'datetime'
+  pickerStyle?: 'calendar' | 'grid'
+  range?: boolean
+  minuteStep?: number
+  secondStep?: number
+  disabledDate?: (date: string) => boolean
+  presets?: DateTimePreset[]
+  placeholder?: string
+  disabled?: boolean
+  clearable?: boolean
+  testId?: string
+}>(), {
+  mode: 'date',
+  pickerStyle: 'calendar',
+  range: false,
+  minuteStep: 1,
+  secondStep: 1,
+  placeholder: '',
+  disabled: false,
+  clearable: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | [string, string]]
+  'change': [value: string | [string, string]]
+  'clear': []
+}>()
+
+const attrs = useAttrs()
+const baseTestId = computed(() => props.testId ?? (attrs['data-testid'] as string | undefined))
+
+const rootRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const timeInputRefs = ref<HTMLInputElement[]>([])
+const open = ref(false)
+const yearDropdownOpen = ref(false)
+
+const now = new Date()
+const viewYear = ref(now.getFullYear())
+const viewMonth = ref(now.getMonth() + 1)
+const decadeStart = ref(Math.floor(now.getFullYear() / 10) * 10)
+
+const selectedDate = ref('')
+const rangeStart = ref('')
+const rangeEnd = ref('')
+const rangePending = ref(false)
+
+const hours = ref(0)
+const minutes = ref(0)
+const seconds = ref(0)
+const editingTime = ref<'h' | 'm' | 's' | null>(null)
+
+const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+const decadeYears = computed(() => Array.from({ length: 10 }, (_, i) => decadeStart.value + i))
+
+const hasValue = computed(() => {
+  if (props.range) {
+    const v = props.modelValue as [string, string]
+    return Array.isArray(v) && v[0] !== '' && v[1] !== ''
+  }
+  return typeof props.modelValue === 'string' && props.modelValue !== ''
+})
+
+const displayText = computed(() => {
+  if (props.mode === 'time') {
+    if (typeof props.modelValue === 'string' && props.modelValue) return props.modelValue
+    return ''
+  }
+  if (props.range) {
+    const v = props.modelValue as [string, string]
+    if (Array.isArray(v) && v[0] && v[1]) return `${fmtDisplay(v[0])} → ${fmtDisplay(v[1])}`
+    return ''
+  }
+  if (typeof props.modelValue === 'string' && props.modelValue) return fmtDisplay(props.modelValue)
+  return ''
+})
+
+function fmtDisplay(val: string): string {
+  if (props.mode === 'date') return val.substring(0, 10)
+  const d = val.substring(0, 10)
+  const t = val.includes('T') ? val.substring(11, 19) : '00:00:00'
+  return `${d} ${t}`
+}
+
+function pad(n: number): string { return String(n).padStart(2, '0') }
+
+interface CalendarDay { day: number; dateStr: string; currentMonth: boolean }
+
+const calendarDays = computed<CalendarDay[]>(() => {
+  const y = viewYear.value, m = viewMonth.value
+  const first = new Date(y, m - 1, 1)
+  const startDow = first.getDay()
+  const dim = daysInMonth(y, m)
+  const prevDim = daysInMonth(y, m - 1 || 12)
+  const days: CalendarDay[] = []
+
+  const pm = m - 1 || 12, py = m - 1 === 0 ? y - 1 : y
+  for (let i = startDow - 1; i >= 0; i--) {
+    const d = prevDim - i
+    days.push({ day: d, dateStr: `${py}-${pad(pm)}-${pad(d)}`, currentMonth: false })
+  }
+  for (let d = 1; d <= dim; d++) {
+    days.push({ day: d, dateStr: `${y}-${pad(m)}-${pad(d)}`, currentMonth: true })
+  }
+  const nm = m + 1 > 12 ? 1 : m + 1, ny = m + 1 > 12 ? y + 1 : y
+  const rem = 42 - days.length
+  for (let d = 1; d <= rem; d++) {
+    days.push({ day: d, dateStr: `${ny}-${pad(nm)}-${pad(d)}`, currentMonth: false })
+  }
+  return days
+})
+
+function daysInMonth(y: number, m: number): number {
+  if (m <= 0) { m += 12; y-- }
+  if (m > 12) { m -= 12; y++ }
+  return new Date(y, m, 0).getDate()
+}
+
+function dayClass(day: CalendarDay) {
+  const cls: string[] = []
+  if (!day.currentMonth) cls.push('text-text-tertiary')
+  else cls.push('text-text-primary')
+
+  if (isSelected(day.dateStr)) {
+    cls.push('bg-accent-primary', 'text-white')
+  } else if (isRangeStart(day.dateStr)) {
+    cls.push('bg-accent-primary', 'text-white', 'rounded-l-md')
+  } else if (isRangeEnd(day.dateStr)) {
+    cls.push('bg-accent-primary', 'text-white', 'rounded-r-md')
+  } else if (isInRange(day.dateStr)) {
+    cls.push('bg-accent-primary/15')
+  } else if (isToday(day.dateStr)) {
+    cls.push('ring-1', 'ring-accent-primary')
+  } else if (day.currentMonth) {
+    cls.push('hover:bg-bg-hover')
+  }
+  return cls
+}
+
+function isSelected(ds: string) {
+  if (props.range) return false
+  return selectedDate.value === ds
+}
+
+function isRangeStart(ds: string) {
+  if (!props.range || !rangeStart.value) return false
+  return ds === rangeStart.value && rangePending.value
+}
+
+function isRangeEnd(ds: string) {
+  if (!props.range || !rangeEnd.value) return false
+  if (rangePending.value) return false
+  return ds === rangeEnd.value
+}
+
+function isInRange(ds: string) {
+  if (!props.range || !rangeStart.value || !rangeEnd.value || rangePending.value) return false
+  return ds > rangeStart.value && ds < rangeEnd.value
+}
+
+function isToday(ds: string) {
+  const t = new Date()
+  return ds === `${t.getFullYear()}-${pad(t.getMonth() + 1)}-${pad(t.getDate())}`
+}
+
+function isDisabled(ds: string) {
+  return props.disabledDate ? props.disabledDate(ds) : false
+}
+
+const timeColumns = computed(() => [
+  { key: 'h' as const, val: hours.value },
+  { key: 'm' as const, val: minutes.value },
+  { key: 's' as const, val: seconds.value },
+])
+
+const panelPos = ref({ top: 0, left: 0 })
+
+const panelStyle = computed(() => ({
+  top: `${panelPos.value.top}px`,
+  left: `${panelPos.value.left}px`,
+  zIndex: 9999,
+}))
+
+function updatePosition() {
+  if (!triggerRef.value) return
+  const rect = triggerRef.value.getBoundingClientRect()
+  panelPos.value = { top: rect.bottom + 4, left: rect.left }
+}
+
+function prevMonth() {
+  if (viewMonth.value === 1) { viewMonth.value = 12; viewYear.value-- }
+  else viewMonth.value--
+}
+
+function nextMonth() {
+  if (viewMonth.value === 12) { viewMonth.value = 1; viewYear.value++ }
+  else viewMonth.value++
+}
+
+function selectYear(y: number) {
+  viewYear.value = y
+  yearDropdownOpen.value = false
+}
+
+function selectMonth(m: number) {
+  viewMonth.value = m
+}
+
+function selectDate(day: CalendarDay) {
+  if (isDisabled(day.dateStr)) return
+
+  if (props.range) {
+    if (!rangePending.value || rangeEnd.value) {
+      rangeStart.value = day.dateStr
+      rangeEnd.value = ''
+      rangePending.value = true
+    } else {
+      if (day.dateStr < rangeStart.value) {
+        rangeEnd.value = rangeStart.value
+        rangeStart.value = day.dateStr
+      } else {
+        rangeEnd.value = day.dateStr
+      }
+      rangePending.value = false
+      emitRange()
+      if (props.mode === 'date') { open.value = false; emit('change', props.modelValue) }
+    }
+  } else {
+    selectedDate.value = day.dateStr
+    if (props.mode === 'date') {
+      emitValue(day.dateStr)
+      open.value = false
+      emit('change', props.modelValue)
+    }
+  }
+}
+
+function emitValue(dateStr: string) {
+  let v: string
+  if (props.mode === 'date') v = dateStr
+  else if (props.mode === 'time') v = `${pad(hours.value)}:${pad(minutes.value)}:${pad(seconds.value)}`
+  else v = `${dateStr}T${pad(hours.value)}:${pad(minutes.value)}:${pad(seconds.value)}`
+  emit('update:modelValue', v)
+}
+
+function emitRange() {
+  const s = buildFull(rangeStart.value)
+  const e = buildFull(rangeEnd.value)
+  emit('update:modelValue', [s, e])
+}
+
+function buildFull(ds: string) {
+  if (props.mode === 'date') return ds
+  if (props.mode === 'time') return `${pad(hours.value)}:${pad(minutes.value)}:${pad(seconds.value)}`
+  return `${ds}T${pad(hours.value)}:${pad(minutes.value)}:${pad(seconds.value)}`
+}
+
+function confirm() {
+  if (props.range) {
+    if (!rangeStart.value) rangeStart.value = selectedDate.value || todayStr()
+    if (!rangeEnd.value) rangeEnd.value = rangeStart.value
+    emitRange()
+  } else {
+    const ds = selectedDate.value || todayStr()
+    emitValue(ds)
+  }
+  open.value = false
+  emit('change', props.modelValue)
+}
+
+function clear() {
+  if (props.range) emit('update:modelValue', ['', ''])
+  else emit('update:modelValue', props.mode === 'time' ? '' : '')
+  selectedDate.value = ''
+  rangeStart.value = ''
+  rangeEnd.value = ''
+  rangePending.value = false
+  open.value = false
+  emit('clear')
+}
+
+function toggle() {
+  if (props.disabled) return
+  open.value = !open.value
+  if (open.value) {
+    initFromModel()
+    yearDropdownOpen.value = false
+    nextTick(updatePosition)
+  } else {
+    editingTime.value = null
+  }
+}
+
+function todayStr() {
+  const t = new Date()
+  return `${t.getFullYear()}-${pad(t.getMonth() + 1)}-${pad(t.getDate())}`
+}
+
+function initFromModel() {
+  const v = props.modelValue
+  if (props.range && Array.isArray(v)) {
+    const [s, e] = v as [string, string]
+    if (s) {
+      const p = parseDatePart(s)
+      viewYear.value = p.y; viewMonth.value = p.m
+      rangeStart.value = p.ds
+      const pe = parseDatePart(e)
+      rangeEnd.value = pe.ds
+      rangePending.value = false
+      if (props.mode !== 'date') { setTimeFromStr(s) }
+    }
+  } else if (typeof v === 'string' && v) {
+    if (props.mode === 'time') {
+      setTimeFromStr(v)
+    } else {
+      const p = parseDatePart(v)
+      viewYear.value = p.y; viewMonth.value = p.m
+      selectedDate.value = p.ds
+      if (props.mode === 'datetime') setTimeFromStr(v)
+    }
+  } else {
+    const t = new Date()
+    viewYear.value = t.getFullYear()
+    viewMonth.value = t.getMonth() + 1
+    hours.value = t.getHours()
+    minutes.value = t.getMinutes()
+    seconds.value = t.getSeconds()
+    selectedDate.value = todayStr()
+    rangeStart.value = ''
+    rangeEnd.value = ''
+    rangePending.value = false
+  }
+  decadeStart.value = Math.floor(viewYear.value / 10) * 10
+}
+
+function parseDatePart(s: string) {
+  const ds = s.substring(0, 10)
+  const parts = ds.split('-')
+  return { y: +parts[0], m: +parts[1], ds }
+}
+
+function setTimeFromStr(s: string) {
+  const idx = s.indexOf('T')
+  const ts = idx >= 0 ? s.substring(idx + 1) : (s.includes(':') ? s : '00:00:00')
+  const p = ts.split(':')
+  hours.value = +p[0] || 0
+  minutes.value = +p[1] || 0
+  seconds.value = +p[2] || 0
+}
+
+function incTime(key: 'h' | 'm' | 's') {
+  if (key === 'h') hours.value = (hours.value + 1) % 24
+  else if (key === 'm') minutes.value = (minutes.value + props.minuteStep) % 60
+  else seconds.value = (seconds.value + props.secondStep) % 60
+}
+
+function decTime(key: 'h' | 'm' | 's') {
+  if (key === 'h') hours.value = (hours.value + 23) % 24
+  else if (key === 'm') minutes.value = (minutes.value - props.minuteStep + 60) % 60
+  else seconds.value = (seconds.value - props.secondStep + 60) % 60
+}
+
+function startTimeEdit(key: 'h' | 'm' | 's') {
+  editingTime.value = key
+  nextTick(() => {
+    const idx = key === 'h' ? 0 : key === 'm' ? 1 : 2
+    const inp = timeInputRefs.value[idx]
+    if (inp) { inp.focus(); inp.select() }
+  })
+}
+
+function finishTimeEdit(key: 'h' | 'm' | 's', e: Event) {
+  editingTime.value = null
+  const val = parseInt((e.target as HTMLInputElement).value, 10)
+  if (isNaN(val)) return
+  if (key === 'h') hours.value = Math.max(0, Math.min(23, val))
+  else if (key === 'm') minutes.value = Math.max(0, Math.min(59, Math.round(val / props.minuteStep) * props.minuteStep))
+  else seconds.value = Math.max(0, Math.min(59, Math.round(val / props.secondStep) * props.secondStep))
+}
+
+function handleOutside(e: MouseEvent) {
+  if (rootRef.value && !rootRef.value.contains(e.target as Node)) {
+    open.value = false
+    editingTime.value = null
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleOutside)
+  window.addEventListener('scroll', updatePosition, true)
+  window.addEventListener('resize', updatePosition)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleOutside)
+  window.removeEventListener('scroll', updatePosition, true)
+  window.removeEventListener('resize', updatePosition)
+})
+
+watch(() => props.modelValue, () => {
+  if (open.value) initFromModel()
+}, { deep: true })
+</script>

package/components/Tree.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="ui-tree" :data-testid="testId">
+    <div v-if="showSearch" class="mb-2">
+      <input
+        v-model="keyword"
+        type="text"
+        class="tree-search"
+        :placeholder="searchPlaceholder"
+        :data-testid="testId ? `${testId}-search` : undefined"
+      />
+    </div>
+    <div v-if="visibleRoot.length === 0" class="tree-empty">
+      <p>{{ emptyText }}</p>
+    </div>
+    <div v-else class="tree-scroll">
+      <TreeNodeItem
+        v-for="node in visibleRoot"
+        :key="node.id"
+        :node="node"
+        :depth="0"
+        :selected-key="selectedKey"
+        :expanded-keys="expandedKeys"
+        :loading-keys="loadingKeys"
+        :load-children="loadChildren"
+        :test-id="testId"
+        @toggle="toggleNode"
+        @select="handleSelect"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import TreeNodeItem from './TreeNodeItem.vue'
+
+/** 通用树节点：业务字段（type 等）可透传附加；children 由组件懒加载后写入 */
+export interface TreeNode {
+  id: string
+  label: string
+  children?: TreeNode[]
+  /** 叶子节点（不触发懒加载）；缺省时无 children 且无 loadChildren 视为叶子 */
+  isLeaf?: boolean
+  [key: string]: unknown
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 根级节点（顶层数据由调用方加载传入） */
+    nodes: TreeNode[]
+    /** 懒加载回调：展开节点时调用，返回其子节点（调用方封装数据请求） */
+    loadChildren?: (node: TreeNode) => Promise<TreeNode[]>
+    /** 选中节点 id（受控，父组件通过 select 事件维护） */
+    selectedKey?: string | null
+    /** 回显展开链：挂载时按链逐级展开并选中末端节点（祖先 id 顺序 + 选中 id） */
+    defaultExpandedKeys?: string[]
+    showSearch?: boolean
+    searchPlaceholder?: string
+    emptyText?: string
+    testId?: string
+  }>(),
+  { showSearch: false, searchPlaceholder: '搜索...', emptyText: '暂无数据' }
+)
+
+const emit = defineEmits<{
+  (e: 'select', node: TreeNode | null): void
+}>()
+
+const keyword = ref('')
+const expandedKeys = ref<Set<string>>(new Set())
+const loadingKeys = ref<Set<string>>(new Set())
+const selectedKey = ref<string | null>(props.selectedKey ?? null)
+
+watch(
+  () => props.selectedKey,
+  (v) => {
+    if (v !== undefined) selectedKey.value = v
+  }
+)
+
+/** 懒加载展开：写入 node.children（共享引用，调用方数据同步可见） */
+async function expandNode(node: TreeNode) {
+  if (node.children?.length || node.isLeaf || !props.loadChildren) return
+  if (loadingKeys.value.has(node.id)) return
+  loadingKeys.value.add(node.id)
+  try {
+    node.children = await props.loadChildren(node)
+  } catch {
+    node.children = []
+  } finally {
+    loadingKeys.value.delete(node.id)
+  }
+}
+
+function toggleNode(node: TreeNode) {
+  const next = new Set(expandedKeys.value)
+  if (next.has(node.id)) {
+    next.delete(node.id)
+  } else {
+    next.add(node.id)
+    expandNode(node)
+  }
+  expandedKeys.value = next
+}
+
+function handleSelect(node: TreeNode) {
+  // 再次点击已选中节点 → 取消选择
+  if (selectedKey.value === node.id) {
+    selectedKey.value = null
+    emit('select', null)
+  } else {
+    selectedKey.value = node.id
+    emit('select', node)
+  }
+}
+
+// 回显：按 defaultExpandedKeys 逐级展开（每级懒加载后定位下一节点），末端标记选中
+watch(
+  () => props.defaultExpandedKeys,
+  async (keys) => {
+    if (!keys || keys.length === 0) return
+    let level = props.nodes
+    for (let i = 0; i < keys.length; i++) {
+      const target = level.find(n => n.id === keys[i])
+      if (!target) break
+      if (i < keys.length - 1) {
+        const next = new Set(expandedKeys.value)
+        next.add(target.id)
+        expandedKeys.value = next
+        await expandNode(target)
+        level = target.children || []
+      } else {
+        selectedKey.value = target.id
+        emit('select', target)
+      }
+    }
+  },
+  { immediate: true }
+)
+
+/** 展示层过滤（不修改原数据）：命中节点或其子树保留 */
+function filterNodes(nodes: TreeNode[]): TreeNode[] {
+  const kw = keyword.value.trim()
+  if (!kw) return nodes
+  const filtered: TreeNode[] = []
+  for (const n of nodes) {
+    const kids = n.children ? filterNodes(n.children) : undefined
+    if (n.label.includes(kw) || (kids && kids.length > 0)) {
+      filtered.push(kids ? { ...n, children: kids } : n)
+    }
+  }
+  return filtered
+}
+
+const visibleRoot = computed(() => filterNodes(props.nodes))
+</script>
+
+<style scoped>
+.ui-tree {
+  font-size: 13px;
+  color: var(--color-text-primary, #e2e8f0);
+}
+
+.tree-search {
+  width: 100%;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  background: var(--color-input-bg, rgba(15, 23, 42, 0.8));
+  color: var(--color-input-text, #e2e8f0);
+  border: 1px solid var(--color-border-primary, rgba(56, 189, 248, 0.3));
+  outline: none;
+}
+
+.tree-search::placeholder {
+  color: var(--color-input-placeholder, #64748b);
+}
+
+.tree-search:focus {
+  border-color: var(--color-accent-primary, #38bdf8);
+}
+
+.tree-empty {
+  padding: 20px 0;
+  text-align: center;
+  color: var(--color-text-tertiary, #94a3b8);
+}
+
+.tree-scroll {
+  max-height: 288px;
+  overflow-y: auto;
+}
+</style>

package/components/TreeNodeItem.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <div
+      class="tree-node"
+      :class="{ 'tree-node-selected': node.id === selectedKey }"
+      :style="{ paddingLeft: depth * 16 + 'px' }"
+      :data-testid="testId ? `${testId}-node-${node.id}` : undefined"
+      @click="emitSelect(node)"
+    >
+      <span class="tree-arrow" @click.stop="emitToggle(node)">
+        <span v-if="loading" class="tree-spinner"></span>
+        <span v-else-if="!expandable" class="tree-dot"></span>
+        <span v-else class="tree-caret" :class="{ 'tree-caret-open': expanded }">▸</span>
+      </span>
+      <span class="tree-label" :class="{ 'tree-label-selected': node.id === selectedKey }">{{ node.label }}</span>
+    </div>
+    <template v-if="expanded && node.children && node.children.length > 0">
+      <TreeNodeItem
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :depth="depth + 1"
+        :selected-key="selectedKey"
+        :expanded-keys="expandedKeys"
+        :loading-keys="loadingKeys"
+        :load-children="loadChildren"
+        :test-id="testId"
+        @toggle="emitToggle"
+        @select="emitSelect"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TreeNode } from './Tree.vue'
+
+const props = defineProps<{
+  node: TreeNode
+  depth: number
+  selectedKey: string | null
+  expandedKeys: Set<string>
+  loadingKeys: Set<string>
+  loadChildren?: (node: TreeNode) => Promise<TreeNode[]>
+  testId?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggle', node: TreeNode): void
+  (e: 'select', node: TreeNode): void
+}>()
+
+const expanded = computed(() => props.expandedKeys.has(props.node.id))
+const loading = computed(() => props.loadingKeys.has(props.node.id))
+const expandable = computed(() => {
+  if (props.node.isLeaf) return false
+  if (props.node.children && props.node.children.length > 0) return true
+  return !!props.loadChildren
+})
+
+function emitToggle(node: TreeNode) {
+  emit('toggle', node)
+}
+
+function emitSelect(node: TreeNode) {
+  emit('select', node)
+}
+</script>
+
+<style scoped>
+.tree-node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+
+.tree-node:hover {
+  background: var(--color-bg-tertiary, rgba(30, 41, 59, 0.6));
+}
+
+.tree-node-selected {
+  background-color: color-mix(in srgb, var(--color-accent-primary, #38bdf8) 15%, transparent);
+  outline: 1px solid color-mix(in srgb, var(--color-accent-primary, #38bdf8) 35%, transparent);
+  outline-offset: -1px;
+}
+
+.tree-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.tree-caret {
+  font-size: 11px;
+  color: var(--color-text-tertiary, #94a3b8);
+  transition: transform 0.15s;
+  display: inline-block;
+}
+
+.tree-caret-open {
+  transform: rotate(90deg);
+}
+
+.tree-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--color-text-tertiary, #94a3b8);
+  opacity: 0.5;
+}
+
+.tree-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--color-border-primary, rgba(56, 189, 248, 0.3));
+  border-top-color: var(--color-accent-primary, #38bdf8);
+  border-radius: 50%;
+  animation: tree-spin 0.8s linear infinite;
+}
+
+@keyframes tree-spin {
+  to { transform: rotate(360deg); }
+}
+
+.tree-label {
+  color: var(--color-text-primary, #e2e8f0);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tree-label-selected {
+  color: var(--color-accent-primary, #38bdf8);
+  font-weight: 600;
+}
+</style>

package/index.ts

@@ -14,5 +14,8 @@ export { default as UserPicker } from './components/UserPicker.vue'
 export { default as SearchSelect } from './components/SearchSelect.vue'
 export { default as SideMenu } from './components/SideMenu.vue'
 export { default as TopNavbar } from './components/TopNavbar.vue'
+export { default as DateTimePicker } from './components/DateTimePicker.vue'
+export { default as Tree } from './components/Tree.vue'
+export type { TreeNode } from './components/Tree.vue'
 export { useToast } from './composables/useToast'
-export type { Column, SelectOption, MenuItem, MenuGroup, NavModule, DropdownItem, ToastType } from './types'
+export type { Column, SelectOption, MenuItem, MenuGroup, NavModule, DropdownItem, ToastType, DateTimePreset } from './types'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiferre/ui-kit",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "private": false,
   "type": "module",
   "main": "index.ts",

package/types.ts

@@ -45,3 +45,8 @@ export interface DropdownItem {
 }
 
 export type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+export interface DateTimePreset {
+  label: string
+  value: () => string | [string, string]
+}