@handaotech-design/bom 0.0.49 → 0.0.50

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

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import type { TreeProps } from 'ant-design-vue'
 import { Dropdown, Tree } from 'ant-design-vue'
 import { watchDebounced } from '@vueuse/shared'
 import * as _ from 'lodash-es'
@@ -26,45 +25,62 @@ type TreeNodeWithMeta = DataNode & {
 }
 
 interface Props {
-  treeData: TreeProps['treeData']
+  bomData: BomNode[]
   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 treeData = ref<DataNode[]>([])
+const firstSelectableKey = ref<string>()
+const keyToNodeMap = ref<Map<string, TreeNodeWithMeta>>(new Map())
 const expandedKeys = ref<(string | number)[]>([])
 const searchValue = ref<string>('')
 const autoExpandParent = ref<boolean>(true)
 const treeContainerHeight = ref<number>(0)
-const treeContainerId = 'treeContainer'
+const treeContainerId = 'bomCustomTreeContainer'
 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 ROOT_BATCH_SIZE = 200
+const currentRootSize = ref<number>(ROOT_BATCH_SIZE)
+const filteredData = ref<DataNode[]>([])
 const displayTreeData = computed(() => {
-  if (!localTreeData.value) {
-    return []
-  }
-  return localTreeData.value.filter(node => visibleRootKeys.value.has(node.key as string))
+  return (filteredData.value ?? []).slice(0, currentRootSize.value)
 })
+
 const isPreservingTreeState = ref<boolean>(false)
-const isAutoLoadingRoots = ref(false)
-let isProgrammaticScroll = false
-const searchMatches = ref<string[]>([])
-const currentMatchIndex = ref(0)
 const initTreeState = () => {
   searchValue.value = ''
   selectedKeys.value = []
   expandedKeys.value = []
-  searchMatches.value = []
-  currentMatchIndex.value = 0
+}
+
+const filterTreeData = (data: DataNode[], 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
+  }
+  return (data || []).reduce(getNodes, [])
+}
+
+const resetSearchStatus = () => {
+  currentRootSize.value = ROOT_BATCH_SIZE
+}
+
+const resetFilterData = () => {
+  filteredData.value = treeData.value ?? []
 }
 
 const onExpand = (keys: Key[]) => {
@@ -81,89 +97,44 @@ const updateTreeContainerHeight = () => {
 
 // 获取直接父节点的 key
 const getParentKeys = (key: string): string[] | undefined => {
-  const treeNode = keyToNodeMap.get(key)
+  const treeNode = keyToNodeMap.value.get(key)
   return treeNode?.parentKeys || []
 }
 
-const ensureRootVisibleByKey = (key?: string) => {
-  if (!key) {
-    return
-  }
-  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
-}
-
-async function locateNodeByKey(targetKey: string) {
-  if (!targetKey) {
+const selectFirstSelectableNode = (preserveExpanded = false) => {
+  if (!firstSelectableKey.value) {
     return
   }
-  isProgrammaticScroll = true
-  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',
-  })
-  setTimeout(() => {
-    focusNode(targetKey)
-  }, 0) // 延时足够滚动完成
-  requestAnimationFrame(() => {
-    setTimeout(() => {
-      isProgrammaticScroll = false
-    }, 500) // 延时足够滚动完成
+  nextTick(() => {
+    const parentKeys = getParentKeys(firstSelectableKey.value!) as string[]
+    expandedKeys.value = preserveExpanded
+      ? Array.from(new Set([...expandedKeys.value, ...parentKeys])) // 取并集
+      : parentKeys
+    selectedKeys.value = [firstSelectableKey.value!]
   })
 }
 
-const scrollToMatch = async (index: number) => {
-  if (!searchMatches.value.length) {
+const canLoadMoreRoot = computed(() => currentRootSize.value < filteredData.value.length)
+const loadMoreRoot = () => {
+  if (!canLoadMoreRoot.value) {
     return
   }
-  const total = searchMatches.value.length
-  const normalized = ((index % total) + total) % total
-  currentMatchIndex.value = normalized
-  const targetKey = searchMatches.value[normalized]
-  await locateNodeByKey(targetKey)
+  currentRootSize.value = currentRootSize.value + ROOT_BATCH_SIZE
 }
 
-const focusPreviousMatch = () => {
-  if (!searchMatches.value.length) {
+const maybeAutoLoadMoreRoot = () => {
+  const container = treeContainerRef.value
+  if (!container) {
     return
   }
-  scrollToMatch(currentMatchIndex.value - 1)
-}
-
-const focusNextMatch = () => {
-  if (!searchMatches.value.length) {
+  const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 80
+  if (!nearBottom) {
     return
   }
-  scrollToMatch(currentMatchIndex.value + 1)
+  loadMoreRoot()
 }
 
-const selectFirstSelectableNode = (preserveExpanded = false) => {
-  if (!props.firstSelectableKey) {
-    return
-  }
-  nextTick(() => {
-    ensureRootVisibleByKey(props.firstSelectableKey)
-    const parentKeys = getParentKeys(props.firstSelectableKey!) as string[]
-    expandedKeys.value = preserveExpanded
-      ? Array.from(new Set([...expandedKeys.value, ...parentKeys])) // 取并集
-      : parentKeys
-    selectedKeys.value = [props.firstSelectableKey!]
-  })
-}
+const handleTreeScroll: () => void = _.throttle(maybeAutoLoadMoreRoot, 300)
 
 type Key = string | number
 const onSelected = async (keys: Key[], { node }: { node: EventDataNode }) => {
@@ -172,7 +143,6 @@ 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 {
@@ -191,16 +161,31 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', updateTreeContainerHeight)
 })
 
+const scrollTo = async (targetKey: Key | undefined) => {
+  if (!targetKey) {
+    return
+  }
+  await nextTick()
+  treeRef.value?.scrollTo?.({
+    key: targetKey,
+    align: 'top',
+  })
+}
+
 watch(
-  () => localTreeData.value,
+  () => props.bomData,
   async () => {
-    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
+    const {
+      treeData: _treeDta,
+      nodeMap,
+      firstSelectableNodeKey: _firstSelectableNodeKey,
+    } = convertBomDataToTree(props.bomData!, props.config.nodeConfig.rule)
+    treeData.value = _treeDta
+    keyToNodeMap.value = nodeMap
+    firstSelectableKey.value = _firstSelectableNodeKey
     initTreeState()
+    resetFilterData()
+    resetSearchStatus()
     if (!isPreservingTreeState.value) {
       selectFirstSelectableNode(true)
     }
@@ -213,39 +198,36 @@ watch(
 watchDebounced(
   searchValue, async (value: string) => {
     let expanded: any[] = []
+    const matchedKeys: string[] = []
     if (_.isEmpty(value)) {
-      searchMatches.value = []
-      currentMatchIndex.value = 0
       expanded = getParentKeys(selectedKeys.value[0]) || []
+      resetFilterData()
+      resetSearchStatus()
+      await scrollTo(treeData.value?.[0]?.key)
     }
     else {
       const matchedParents: string[][] = []
-      const matches: string[] = []
-      for (const node of keyToNodeMap.values()) {
+      for (const node of keyToNodeMap.value.values()) {
         if (hasSearchMatch((node as any).title)) {
           const key = node.key as string
-          matches.push(key)
-          ensureRootVisibleByKey(key)
+          matchedKeys.push(key)
           matchedParents.push(getParentKeys(key) || [])
         }
       }
-      searchMatches.value = matches
-      currentMatchIndex.value = matches.length ? 0 : 0
       expanded = matchedParents.flat()
+      filteredData.value = _.isEmpty(matchedKeys) ? [] : filterTreeData(treeData.value as any, matchedKeys)
+      resetSearchStatus()
+      await scrollTo(filteredData.value?.[0]?.key)
     }
-    expandedKeys.value = expanded
     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(
   () => selectedKeys.value,
   () => {
     if (selectedKeys.value && selectedKeys.value.length) {
-      return emit('select', keyToNodeMap.get(selectedKeys.value[0]))
+      return emit('select', keyToNodeMap.value.get(selectedKeys.value[0]))
     }
   },
 )
@@ -274,10 +256,9 @@ async function updateTreeWithPreservedState(updateDataFn: () => Promise<void>) {
   isPreservingTreeState.value = true
   await updateDataFn()
   await nextTick(() => {
-    expandedKeys.value = prevExpanded.filter(key => keyToNodeMap.has(key as string))
+    expandedKeys.value = prevExpanded.filter(key => keyToNodeMap.value.has(key as string))
 
-    if (prevSelected && keyToNodeMap.has(prevSelected)) {
-      ensureRootVisibleByKey(prevSelected)
+    if (prevSelected && keyToNodeMap.value.has(prevSelected)) {
       selectedKeys.value = [prevSelected]
     }
     else {
@@ -301,43 +282,6 @@ defineExpose({
   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 || isProgrammaticScroll) {
-    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
@@ -352,7 +296,7 @@ async function _loadData(node: EventDataNode) {
     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, {
+      keyToNodeMap.value.set(key as string, {
         ...value,
         parentKeys: [...(getParentKeys(node.key as string) || []), node.key as string],
       })
@@ -364,36 +308,6 @@ async function _loadData(node: EventDataNode) {
     node.isLeaf = true
   }
 }
-
-function focusNode(key: string) {
-  // 先清理页面上已有的焦点动画
-  document.querySelectorAll<HTMLElement>('.tree-node-tittle.focus-flash').forEach((el) => {
-    el.classList.remove('focus-flash')
-  })
-  // 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>
@@ -407,27 +321,6 @@ function focusNode(key: string) {
         <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

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

@@ -4,7 +4,6 @@ import * as _ from 'lodash-es'
 import type { DataNode } from 'ant-design-vue/es/vc-tree-select/interface'
 import type { EventDataNode } from 'ant-design-vue/es/tree'
 import type { BomNode, BomTreeConfig, Optional, WorkBenchLayoutConfig } from '../../models'
-import { convertBomDataToTree } from '../../utils'
 import HdLeftRight from '../left-right/index'
 import HdBomTree from '../bom-tree/index'
 
@@ -24,9 +23,6 @@ interface Props {
   treeShouldSelect?: (node: DataNode) => Promise<boolean>
   loadData?: (node: BomNode, eventNode?: EventDataNode) => Promise<BomNode[]>
 }
-const bomDataForTree = ref<BomNode[]>()
-const firstSelectableKey = ref<string | undefined>()
-const keyNodeMap = ref<Map<string, BomNode>>(new Map())
 const selectedNode = ref<BomNode>()
 
 async function onSelected(data: BomNode) {
@@ -38,13 +34,6 @@ watch(
   () => {
     if (_.isEmpty(props.bomData)) {
       selectedNode.value = undefined
-      bomDataForTree.value = undefined
-    }
-    else {
-      const { treeData, nodeMap, firstSelectableNodeKey } = convertBomDataToTree(props.bomData!, props.treeConfig.nodeConfig.rule)
-      bomDataForTree.value = treeData
-      keyNodeMap.value = nodeMap
-      firstSelectableKey.value = firstSelectableNodeKey
     }
   },
   { immediate: true },
@@ -57,7 +46,7 @@ defineExpose({
 
 <template>
   <HdLeftRight
-    v-if="bomDataForTree"
+    v-if="props.bomData"
     :module-key="props.moduleKey"
     :max-left-width="props?.layoutConfig?.maxLeftWidth"
   >
@@ -67,12 +56,10 @@ defineExpose({
         <div class="bom-tree-container">
           <HdBomTree
             ref="treeRef"
-            :tree-data="bomDataForTree"
+            :bom-data="props.bomData ?? []"
             :config="props.treeConfig"
             :maintainable="props.maintainable"
             :should-select="props.treeShouldSelect"
-            :first-selectable-key="firstSelectableKey"
-            :key-node-map="keyNodeMap"
             :load-data="props.loadData"
             @select="(data: BomNode) => onSelected(data)"
           >

package/dist/es/sdk/index.d.ts

@@ -3,7 +3,7 @@ import type { BomNode, BomTreeConfig } from '../models';
 export declare class BomSDK {
     httpClient: HttpClient;
     constructor(client: HttpClient);
-    lazyLoadAll(): Promise<unknown>;
+    lazyLoadAllPpboms(): Promise<unknown>;
     getBusinessConfig(configCode: string): Promise<unknown>;
     getBusinessId(bomNodeId: string): Promise<unknown>;
     loadChildren(bomNode: BomNode, treeConfig: BomTreeConfig): Promise<BomNode[]>;

package/dist/es/sdk/index.js

@@ -5,7 +5,7 @@ export class BomSDK {
   constructor(client) {
     this.httpClient = client;
   }
-  async lazyLoadAll() {
+  async lazyLoadAllPpboms() {
     return this.httpClient.post("/ppboms/query/lazy-all", {
       page: 1,
       pageSize: Number.MAX_SAFE_INTEGER