@handaotech-design/bom 0.0.40 → 0.0.42

package/dist/es/components/bom-tree/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
 import type { TreeProps } from 'ant-design-vue'
 import { Dropdown, Tree } from 'ant-design-vue'
 import { watchDebounced } from '@vueuse/shared'
@@ -8,7 +8,8 @@ import type { DataNode } from 'ant-design-vue/es/vc-tree-select/interface'
 import type { EventDataNode } from 'ant-design-vue/es/tree'
 import { MoreOutlined } from '@ant-design/icons-vue'
 import HdGrayInput from '../gray-input'
-import type { BomTreeConfig } from '../../models'
+import type { BomNode, BomTreeConfig } from '../../models'
+import { convertBomDataToTree } from '../../utils'
 
 const props = withDefaults(defineProps<Props>(), {
   maintainable: false,
@@ -29,22 +30,40 @@ interface Props {
   config: BomTreeConfig
   maintainable?: boolean
   shouldSelect?: (node: DataNode) => Promise<boolean>
+  keyNodeMap: Map<string, any>
+  firstSelectableKey?: string
+  loadData?: (node: BomNode, eventNode?: EventDataNode) => Promise<DataNode[]>
 }
 
+const localTreeData = ref<DataNode[]>(props.treeData || [])
 const expandedKeys = ref<(string | number)[]>([])
 const searchValue = ref<string>('')
 const autoExpandParent = ref<boolean>(true)
-const { treeData: _treeData } = toRefs(props)
-const filteredTreeData = ref<TreeProps['treeData']>([])
 const treeContainerHeight = ref<number>(0)
 const treeContainerId = 'treeContainer'
+const treeContainerRef = ref<HTMLElement | null>(null)
+const treeRef = ref<any>(null)
 let keyToNodeMap = new Map<string, TreeNodeWithMeta>()
 const selectedKeys = ref<string[]>([])
+const MAX_ROOT = 200
+const fullRootKeys = computed(() => (localTreeData.value || []).map(node => node.key as string))
+const visibleRootKeys = ref<Set<string>>(new Set())
+const displayTreeData = computed(() => {
+  if (!localTreeData.value) {
+    return []
+  }
+  return localTreeData.value.filter(node => visibleRootKeys.value.has(node.key as string))
+})
 const isPreservingTreeState = ref<boolean>(false)
+const isAutoLoadingRoots = ref(false)
+const searchMatches = ref<string[]>([])
+const currentMatchIndex = ref(0)
 const initTreeState = () => {
   searchValue.value = ''
   selectedKeys.value = []
   expandedKeys.value = []
+  searchMatches.value = []
+  currentMatchIndex.value = 0
 }
 
 const onExpand = (keys: Key[]) => {
@@ -53,66 +72,87 @@ const onExpand = (keys: Key[]) => {
 }
 
 const updateTreeContainerHeight = () => {
-  const treeContainer = document.getElementById(treeContainerId)
+  const treeContainer = treeContainerRef.value || document.getElementById(treeContainerId)
   if (treeContainer) {
     treeContainerHeight.value = treeContainer.clientHeight
   }
 }
 
-const buildKeyToNodeMap = (treeData: TreeProps['treeData']) => {
-  const keyMap = new Map<string, TreeNodeWithMeta>()
-  const traverse = (nodes: TreeProps['treeData'] = [], parentKeys: string[] = []) => {
-    for (const node of nodes) {
-      if (parentKeys) {
-        keyMap.set(node.key as string, {
-          ...node,
-          parentKeys: parentKeys || [],
-        } as any)
-      }
-      if (!_.isEmpty(node.children)) {
-        traverse(node.children, [...parentKeys, node.key as string])
-      }
-    }
+// 获取直接父节点的 key
+const getParentKeys = (key: string): string[] | undefined => {
+  const treeNode = keyToNodeMap.get(key)
+  return treeNode?.parentKeys || []
+}
+
+const ensureRootVisibleByKey = (key?: string) => {
+  if (!key) {
+    return
   }
-  traverse(treeData)
-  return keyMap
+  const parentKeys = getParentKeys(key)
+  const rootKey = parentKeys?.[0] ?? key
+  if (!rootKey || visibleRootKeys.value.has(rootKey)) {
+    return
+  }
+  const next = new Set(visibleRootKeys.value)
+  next.add(rootKey)
+  visibleRootKeys.value = next
 }
 
-const filterTreeData = (data: TreeProps['treeData'], filteredKeys: string[]) => {
-  const getNodes = (result: any, node: any) => {
-    if (_.includes(filteredKeys, node.key)) {
-      result.push({ ...node })
-      return result
-    }
-    if (Array.isArray(node.children)) {
-      const children = node.children.reduce(getNodes, [])
-      if (!_.isEmpty(children)) {
-        result.push({ ...node, children })
-      }
-    }
-    return result
+async function locateNodeByKey(targetKey: string) {
+  if (!targetKey) {
+    return
   }
-  return (data || []).reduce(getNodes, [])
+  ensureRootVisibleByKey(targetKey)
+  const parentKeys = getParentKeys(targetKey) || []
+  expandedKeys.value = Array.from(new Set([
+    ...expandedKeys.value,
+    ...parentKeys,
+  ]))
+  await nextTick()
+  await nextTick()
+  treeRef.value?.scrollTo?.({
+    key: targetKey,
+    align: 'top',
+  })
+  focusNode(targetKey)
 }
 
-// 获取直接父节点的 key
-const getParentKeys = (key: string): string[] | undefined => {
-  const treeNode = keyToNodeMap.get(key)
-  return treeNode?.parentKeys || []
+const scrollToMatch = async (index: number) => {
+  if (!searchMatches.value.length) {
+    return
+  }
+  const total = searchMatches.value.length
+  const normalized = ((index % total) + total) % total
+  currentMatchIndex.value = normalized
+  const targetKey = searchMatches.value[normalized]
+  await locateNodeByKey(targetKey)
 }
 
-const selectFirstSelectableNode = (preserveExpanded = false) => {
-  const firstNode: any = _.find(Array.from(keyToNodeMap.values()), node => (node as any)?.selectable)
-  if (!firstNode) {
+const focusPreviousMatch = () => {
+  if (!searchMatches.value.length) {
     return
   }
+  scrollToMatch(currentMatchIndex.value - 1)
+}
 
+const focusNextMatch = () => {
+  if (!searchMatches.value.length) {
+    return
+  }
+  scrollToMatch(currentMatchIndex.value + 1)
+}
+
+const selectFirstSelectableNode = (preserveExpanded = false) => {
+  if (!props.firstSelectableKey) {
+    return
+  }
   nextTick(() => {
-    const parentKeys = getParentKeys(firstNode.key as string) as string[]
+    ensureRootVisibleByKey(props.firstSelectableKey)
+    const parentKeys = getParentKeys(props.firstSelectableKey!) as string[]
     expandedKeys.value = preserveExpanded
       ? Array.from(new Set([...expandedKeys.value, ...parentKeys])) // 取并集
       : parentKeys
-    selectedKeys.value = [firstNode.key]
+    selectedKeys.value = [props.firstSelectableKey!]
   })
 }
 
@@ -123,6 +163,7 @@ const onSelected = async (keys: Key[], { node }: { node: EventDataNode }) => {
   }
   const key = node?.dataRef?.key
   if (key) {
+    ensureRootVisibleByKey(key as string)
     selectedKeys.value = [key as string]
   }
   else {
@@ -142,10 +183,14 @@ onBeforeUnmount(() => {
 })
 
 watch(
-  () => _treeData.value,
+  () => localTreeData.value,
   async () => {
-    filteredTreeData.value = _treeData.value
-    keyToNodeMap = buildKeyToNodeMap(_treeData.value ?? [])
+    keyToNodeMap = props.keyNodeMap
+    const visibleSet = new Set<string>()
+    ;(localTreeData.value || []).slice(0, MAX_ROOT).forEach((node) => {
+      visibleSet.add(node.key as string)
+    })
+    visibleRootKeys.value = visibleSet
     initTreeState()
     if (!isPreservingTreeState.value) {
       selectFirstSelectableNode(true)
@@ -157,30 +202,34 @@ watch(
 )
 
 watchDebounced(
-  searchValue, (value: string) => {
-    let expanded: any[]
+  searchValue, async (value: string) => {
+    let expanded: any[] = []
     if (_.isEmpty(value)) {
+      searchMatches.value = []
+      currentMatchIndex.value = 0
       expanded = getParentKeys(selectedKeys.value[0]) || []
-      filteredTreeData.value = _treeData.value
     }
     else {
-      const filteredNodes: TreeProps['treeData'] = []
-      expanded = (Array.from(keyToNodeMap.values()))
-        .map((item: any) => {
-          if (hasSearchMatch(item.title)) {
-            filteredNodes.push(item)
-            return getParentKeys(item.key)
-          }
-          return null
-        })
-        .filter((item, i, self) => item && self.indexOf(item) === i)
-      const filteredKeys = filteredNodes.map(item => item.key)
-      filteredTreeData.value = _.isEmpty(filteredKeys) ? [] : filterTreeData(_treeData.value, filteredKeys as unknown as string[])
+      const matchedParents: string[][] = []
+      const matches: string[] = []
+      for (const node of keyToNodeMap.values()) {
+        if (hasSearchMatch((node as any).title)) {
+          const key = node.key as string
+          matches.push(key)
+          ensureRootVisibleByKey(key)
+          matchedParents.push(getParentKeys(key) || [])
+        }
+      }
+      searchMatches.value = matches
+      currentMatchIndex.value = matches.length ? 0 : 0
+      expanded = matchedParents.flat()
     }
     expandedKeys.value = expanded
-    nextTick(() => {
-      expandedKeys.value = _.uniq(expanded.flat(1)) as any as string[]
-    })
+    await nextTick()
+    expandedKeys.value = _.uniq(expanded.flat(1)) as any as string[]
+    if (!_.isEmpty(value) && searchMatches.value.length) {
+      await scrollToMatch(currentMatchIndex.value)
+    }
   }, { debounce: 500 })
 
 watch(
@@ -219,6 +268,7 @@ async function updateTreeWithPreservedState(updateDataFn: () => Promise<void>) {
     expandedKeys.value = prevExpanded.filter(key => keyToNodeMap.has(key as string))
 
     if (prevSelected && keyToNodeMap.has(prevSelected)) {
+      ensureRootVisibleByKey(prevSelected)
       selectedKeys.value = [prevSelected]
     }
     else {
@@ -241,35 +291,156 @@ defineExpose({
   getParentKeys,
   getDepth,
 })
+
+const canLoadMoreRoot = computed(() => visibleRootKeys.value.size < fullRootKeys.value.length)
+const loadMoreRoot = () => {
+  if (!fullRootKeys.value.length) {
+    return
+  }
+  const currentSize = visibleRootKeys.value.size
+  if (currentSize >= fullRootKeys.value.length) {
+    return
+  }
+  const next = new Set(visibleRootKeys.value)
+  fullRootKeys.value.slice(currentSize, currentSize + MAX_ROOT).forEach((key) => {
+    next.add(key)
+  })
+  visibleRootKeys.value = next
+}
+
+const maybeAutoLoadMoreRoot = () => {
+  if (isAutoLoadingRoots.value || !canLoadMoreRoot.value) {
+    return
+  }
+  const container = treeContainerRef.value
+  if (!container) {
+    return
+  }
+  const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 80
+  if (!nearBottom) {
+    return
+  }
+  isAutoLoadingRoots.value = true
+  loadMoreRoot()
+  requestAnimationFrame(() => {
+    isAutoLoadingRoots.value = false
+  })
+}
+
+const handleTreeScroll = _.throttle(maybeAutoLoadMoreRoot, 300)
+
+async function _loadData(node: EventDataNode) {
+  if (!props.loadData) {
+    return
+  }
+  if (node.children && node.children.length) {
+    return
+  }
+
+  const children: DataNode[] = await props.loadData(node.dataRef as BomNode, node)
+
+  if (children.length) {
+    children.forEach(item => item.key = node.key + (item.key ?? item.id) as string)
+    const { treeData, nodeMap } = convertBomDataToTree(children as any, props.config.nodeConfig.rule) as any
+    nodeMap.entries().forEach(([key, value]: any[]) => {
+      keyToNodeMap.set(key as string, {
+        ...value,
+        parentKeys: [...(getParentKeys(node.key as string) || []), node.key as string],
+      })
+    })
+
+    node.dataRef!.children = treeData
+  }
+  else {
+    node.isLeaf = true
+  }
+}
+
+function focusNode(key: string) {
+  // 1. 用 antd Tree 自带滚动
+  treeRef.value?.scrollTo({ key, align: 'center' })
+
+  // 2. 下一帧再找 DOM，避免滚动未完成
+  requestAnimationFrame(() => {
+    const el = document.querySelector(
+      `.tree-node-tittle[data-key="${key}"]`,
+    ) as HTMLElement | null
+
+    if (!el) {
+      return
+    }
+
+    // 3. 触发一次可感知的焦点动画
+    el.classList.remove('focus-flash')
+    // eslint-disable-next-line no-void
+    void el.offsetWidth
+    el.classList.add('focus-flash')
+
+    setTimeout(() => {
+      el.classList.remove('focus-flash')
+    }, 2400)
+  })
+}
 </script>
 
 <template>
   <div class="flex flex-col h-100%">
     <div class="search-box">
       <HdGrayInput
-        v-model:value="searchValue"
+        v-model:value.trim="searchValue"
         :placeholder="props.config?.filter?.placeholder || '输入关键词进行筛选（如名称/编号）'"
         class="search-input"
       >
         <template #prefix>
           <div class="i-icon-search w-16px h-16px" />
         </template>
+        <template #suffix>
+          <div v-if="searchValue" class="match-hint mr-8px font-size-12px">
+            {{ searchMatches.length ? currentMatchIndex + 1 : 0 }} / {{ searchMatches.length }}
+          </div>
+          <div v-if="searchValue" class="match-nav" :class="{ 'is-disabled': !searchMatches.length }">
+            <div
+              class="match-nav-btn mr-4px"
+              :class="{ disabled: !searchMatches.length }"
+              @click.stop.prevent="focusPreviousMatch"
+            >
+              ↑
+            </div>
+            <div
+              class="match-nav-btn"
+              :class="{ disabled: !searchMatches.length }"
+              @click.stop.prevent="focusNextMatch"
+            >
+              ↓
+            </div>
+          </div>
+        </template>
       </HdGrayInput>
     </div>
-    <div :id="treeContainerId" class="flex-grow tree-wrapper mt-12px overflow-y-hidden">
-      <div v-if="!_.isEmpty(filteredTreeData)">
+    <div
+      :id="treeContainerId"
+      ref="treeContainerRef"
+      class="flex-grow tree-wrapper mt-12px"
+    >
+      <div v-if="!_.isEmpty(displayTreeData)">
         <a-tree
+          ref="treeRef"
           :height="treeContainerHeight"
+          :tree-data="displayTreeData"
           :expanded-keys="expandedKeys"
           :auto-expand-parent="autoExpandParent"
-          :tree-data="filteredTreeData"
           :block-node="true"
           :selected-keys="selectedKeys"
+          :load-data="_loadData"
+          @scroll="handleTreeScroll"
           @expand="onExpand"
           @select="onSelected"
         >
           <template #title="{ title, dataRef }">
-            <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
+            <div
+              :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`"
+              :data-key="dataRef.key"
+            >
               <div
                 v-if="!!dataRef.icon"
                 class="icon w-20px h-20px mr-4px min-w-20px"
@@ -305,7 +476,7 @@ defineExpose({
           </template>
         </a-tree>
       </div>
-      <div v-show="_.isEmpty(filteredTreeData)" class="w-100% h-100% flex justify-center items-center">
+      <div v-show="_.isEmpty(displayTreeData)" class="w-100% h-100% flex justify-center items-center">
         <span>暂无数据</span>
       </div>
     </div>
@@ -313,6 +484,7 @@ defineExpose({
 </template>
 
 <style scoped>
+@charset "UTF-8";
 .tree-wrapper {
   background-color: #fff;
   min-height: 0;
@@ -322,6 +494,12 @@ defineExpose({
   padding: 0 16px;
 }
 
+:deep(.match-nav) .ant-btn:hover, :deep(.match-nav) .ant-btn:focus {
+  color: #1E3B9D;
+  border-color: #1E3B9D;
+  background: #fff;
+}
+
 :deep(.ant-tree-list) .ant-tree-treenode-motion {
   width: 100%;
 }
@@ -415,4 +593,69 @@ defineExpose({
   white-space: nowrap;
   vertical-align: middle;
 }
+
+.tree-node-tittle {
+  position: relative;
+}
+
+/* 焦点提示：整行描边框 */
+.tree-node-tittle.focus-flash::after {
+  content: "";
+  position: absolute;
+  inset: -2px -6px; /* 包裹文字 */
+  border-radius: 6px;
+  pointer-events: none;
+  /* 混合描边 + 光晕 */
+  border: 1.5px solid rgba(30, 59, 157, 0.6); /* 更明显但不硬 */
+  box-shadow: 0 0 6px rgba(30, 59, 157, 0.35);
+  animation: focusSoftGlow 1.4s ease-out 2;
+}
+
+@keyframes focusSoftGlow {
+  0% {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  30% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.02);
+  }
+}
+:deep(.match-nav) {
+  display: flex;
+  align-items: center;
+}
+:deep(.match-nav) .match-nav-btn {
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  border: 1px solid rgba(0, 0, 0, 0.65);
+  border-radius: 50%;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  margin-left: 4px;
+  transition: all 0.2s;
+}
+:deep(.match-nav) .match-nav-btn:hover {
+  background-color: #E9EBED;
+  border-color: #1E3B9D;
+  color: #1E3B9D;
+}
+:deep(.match-nav) .match-nav-btn.disabled {
+  color: #ccc;
+  border-color: #ccc;
+  cursor: not-allowed;
+  background-color: #f5f5f5;
+}
+:deep(.match-nav) .match-nav-btn.disabled:hover {
+  background-color: #f5f5f5;
+  border-color: #ccc;
+}
 </style>

package/dist/es/components/bom-tree-view/index.d.ts

@@ -0,0 +1,3 @@
+export * from './index.vue';
+export declare const HdBomTree: any;
+export default HdBomTree;

package/dist/es/components/bom-tree-view/index.js

@@ -0,0 +1,10 @@
+import { Dropdown, Input, Tree } from "ant-design-vue";
+import { MoreOutlined } from "@ant-design/icons-vue";
+import { withInstall } from "../../utils/install.js";
+import BomTree from "./index.vue";
+export * from "./index.vue";
+const antdComponents = Object.fromEntries(
+  [Input, Tree, Dropdown, MoreOutlined].map((comp) => [comp.name, comp])
+);
+export const HdBomTree = withInstall(BomTree, antdComponents);
+export default HdBomTree;