@aquiferre/ui-kit 0.4.0 → 0.4.2

package/components/DataTable.vue

@@ -39,8 +39,9 @@
           :data-testid="rowPrefix ? `${rowPrefix}-${row[rowKey] ?? index}` : undefined"
           class="table-row"
           @click="handleRowClick(row)"
+          @dblclick="handleRowDblClick(row)"
         >
-          <td v-if="selectable" class="table-cell" @click.stop>
+          <td v-if="selectable" class="table-cell" @click.stop @dblclick.stop>
             <input type="checkbox" :checked="isSelected(row)" :data-testid="rowPrefix ? `${rowPrefix}-checkbox-${row[rowKey] ?? index}` : undefined" @change="toggleRow(row)" />
           </td>
           <td
@@ -98,6 +99,7 @@ const rowPrefix = computed<string | undefined>(() => props.rowTestIdPrefix ?? ba
 const emit = defineEmits<{
   'update:selected': [ids: string[]]
   'row-click': [row: any]
+  'row-dblclick': [row: any]
   'sort-change': [payload: { field: string; order: 'asc' | 'desc' } | null]
 }>()
 
@@ -148,4 +150,8 @@ function toggleRow(row: any) {
 function handleRowClick(row: any) {
   emit('row-click', row)
 }
+
+function handleRowDblClick(row: any) {
+  emit('row-dblclick', row)
+}
 </script>

package/components/SuggestInput.vue

@@ -0,0 +1,230 @@
+<template>
+  <div ref="rootRef" class="relative w-full" :data-testid="baseTestId">
+    <div class="flex items-center input w-full focus-within:border-accent-primary" :class="disabled ? 'opacity-60 cursor-not-allowed' : ''">
+      <input
+        ref="inputRef"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        class="flex-1 min-w-0 bg-transparent border-none outline-none text-input-text placeholder:text-input-placeholder"
+        :data-testid="baseTestId ? `${baseTestId}-input` : undefined"
+        type="text"
+        @input="onInput"
+        @focus="onFocus"
+      />
+      <button
+        v-if="clearable && modelValue"
+        type="button"
+        class="px-2 text-text-tertiary hover:text-text-primary shrink-0"
+        :data-testid="baseTestId ? `${baseTestId}-clear` : undefined"
+        @click.stop="clear"
+        tabindex="-1"
+      >&times;</button>
+      <!-- 获取模型按钮（loadBtn）：手动触发 loadOptions，点击后加载并展开下拉 -->
+      <button
+        v-if="loadBtn && loadOptions"
+        type="button"
+        class="px-2.5 py-1 m-1 text-xs rounded border border-accent-primary/40 text-accent-primary hover:bg-accent-primary/10 whitespace-nowrap shrink-0"
+        :disabled="loading"
+        :data-testid="baseTestId ? `${baseTestId}-load` : undefined"
+        @click.stop="onLoadBtnClick"
+        tabindex="-1"
+      >{{ loading ? '获取中...' : loadBtnText }}</button>
+      <!-- 无 loadBtn 时提供展开按钮（配合外部 options 模式） -->
+      <button
+        v-if="!loadBtn && loading"
+        type="button"
+        class="px-2 text-text-tertiary shrink-0"
+        disabled
+      ></button>
+      <button
+        v-else-if="!loadBtn"
+        type="button"
+        class="px-2 text-text-tertiary hover:text-text-primary shrink-0"
+        :data-testid="baseTestId ? `${baseTestId}-toggle` : undefined"
+        @click.stop="toggle"
+        tabindex="-1"
+      >▾</button>
+    </div>
+
+    <!-- 下拉弹层：absolute 定位跟随输入框（与 SearchSelect 一致）；父容器勿设 overflow-hidden -->
+    <div
+      v-if="open"
+      class="absolute top-full left-0 mt-1 w-full max-h-60 overflow-auto card shadow-lg z-20 py-1"
+      :data-testid="baseTestId ? `${baseTestId}-dropdown` : undefined"
+    >
+      <!-- 初始加载中 -->
+      <div v-if="initialLoading" class="px-4 py-2 text-sm text-text-tertiary">获取中...</div>
+      <!-- 加载失败 -->
+      <div v-else-if="loadError" class="px-4 py-2">
+        <span class="text-sm text-accent-danger">{{ loadError }}</span>
+        <button class="ml-2 text-xs text-accent-primary hover:text-accent-primary-hover" @click="retryLoad">重试</button>
+      </div>
+      <!-- 无选项 -->
+      <div v-else-if="filtered.length === 0" class="px-4 py-2 text-sm text-text-tertiary">无匹配项</div>
+      <!-- 选项列表 -->
+      <div
+        v-for="opt in filtered"
+        :key="opt.value"
+        class="px-4 py-2 text-sm text-text-primary hover:bg-bg-hover cursor-pointer"
+        :class="opt.value === modelValue ? 'bg-bg-secondary' : ''"
+        :data-testid="optionTestIdPrefix ? `${optionTestIdPrefix}-option-${opt.value}` : undefined"
+        @mousedown.prevent="select(opt)"
+      >
+        {{ opt.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { match } from 'pinyin-pro'
+import type { SelectOption } from '../types'
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  options?: SelectOption[]
+  loadOptions?: () => Promise<SelectOption[]>
+  placeholder?: string
+  disabled?: boolean
+  clearable?: boolean
+  testId?: string
+  loadBtn?: boolean
+  loadBtnText?: string
+}>(), {
+  options: () => [],
+  placeholder: '请输入或选择',
+  disabled: false,
+  clearable: true,
+  loadBtn: false,
+  loadBtnText: '获取',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const baseTestId = computed(() => props.testId)
+const optionTestIdPrefix = baseTestId
+
+const rootRef = ref<HTMLElement | null>(null)
+const inputRef = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const loading = ref(false)
+const initialLoading = ref(false)
+const loadError = ref('')
+
+const innerOptions = ref<SelectOption[]>([])
+
+// 合并外部 options 与异步加载的选项
+const mergedOptions = computed(() => {
+  // 如果提供了 loadOptions，优先使用异步加载的结果
+  if (innerOptions.value.length) return innerOptions.value
+  return props.options
+})
+
+const query = ref('')
+
+const filtered = computed(() => {
+  const opts = mergedOptions.value
+  const q = query.value.trim()
+  if (!q) return opts
+  const ql = q.toLowerCase()
+  return opts.filter(o =>
+    o.label.toLowerCase().includes(ql) || match(o.label, q) !== null
+  )
+})
+
+async function loadAsync() {
+  if (!props.loadOptions) return
+  loadError.value = ''
+  initialLoading.value = true
+  loading.value = true
+  try {
+    const result = await props.loadOptions()
+    innerOptions.value = result
+  } catch (err: any) {
+    loadError.value = err?.message || '获取失败'
+  } finally {
+    initialLoading.value = false
+    loading.value = false
+  }
+}
+
+function retryLoad() {
+  loadAsync()
+}
+
+function onInput(e: Event) {
+  const value = (e.target as HTMLInputElement).value
+  emit('update:modelValue', value)
+  query.value = value
+  if (!open.value) open.value = true
+}
+
+function onFocus() {
+  if (props.disabled) return
+  // 有 loadBtn 时，展开聚焦不自动加载（需用户点击按钮）
+  if (!props.loadBtn && props.loadOptions && innerOptions.value.length === 0 && !loading.value) {
+    loadAsync()
+  }
+  open.value = true
+}
+
+function toggle() {
+  if (props.disabled) return
+  if (open.value) {
+    open.value = false
+    return
+  }
+  // 有 loadBtn 时不自动加载
+  if (!props.loadBtn && props.loadOptions && innerOptions.value.length === 0) {
+    loadAsync()
+  }
+  open.value = true
+  nextTick(() => inputRef.value?.focus())
+}
+
+async function onLoadBtnClick() {
+  if (!props.loadOptions) return
+  await loadAsync()
+  open.value = true
+}
+
+function select(opt: SelectOption) {
+  emit('update:modelValue', opt.value)
+  open.value = false
+  query.value = ''
+}
+
+function clear() {
+  emit('update:modelValue', '')
+  open.value = false
+  query.value = ''
+}
+
+// 下拉关闭（外部点击 / Escape）
+function close() {
+  open.value = false
+}
+
+function handleOutside(e: MouseEvent) {
+  if (rootRef.value && !rootRef.value.contains(e.target as Node)) {
+    open.value = false
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') close()
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleOutside)
+  document.addEventListener('keydown', onKeydown)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleOutside)
+  document.removeEventListener('keydown', onKeydown)
+})
+</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

@@ -13,7 +13,10 @@ export { default as FileUploader } from './components/FileUploader.vue'
 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 SuggestInput } from './components/SuggestInput.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, DateTimePreset } from './types'

package/package.json

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