@aquiferre/ui-kit 0.4.0 → 0.4.1

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

@@ -15,5 +15,7 @@ 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, DateTimePreset } from './types'

package/package.json

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