@handaotech-design/bom 0.0.16

package/README.md

@@ -0,0 +1,13 @@
+# Bom 组件库
+## 组件列表
+### HdBomTree
+bom树组件
+注意：
+* 需“确保”树组件容器有一定高度。树组件会根据容器高度自适应虚拟滚动的高度
+
+具体交互参考 HdBomTree 组件
+
+### HdBomWorkbench
+bom带拖拽的左右布局
+
+具体交互参考 HdBomWorkbench 组件

package/build.config.ts

@@ -0,0 +1,27 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    {
+      builder: 'mkdist',
+      input: 'src',
+      outDir: 'dist/lib',
+      format: 'cjs',
+      ext: 'js',
+      declaration: true,
+    },
+    {
+      builder: 'mkdist',
+      input: 'src',
+      outDir: 'dist/es',
+      format: 'esm',
+      ext: 'js',
+      declaration: true,
+    },
+  ],
+  failOnWarn: false,
+  externals: [
+    'vue',
+    'ant-design-vue',
+  ],
+})

package/dist/es/all-components.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vue';
+declare const _default: Plugin[];
+export default _default;

package/dist/es/all-components.js

@@ -0,0 +1,10 @@
+import HdBomTree from "./components/bom-tree/index.js";
+import HdGrayInput from "./components/gray-input/index.js";
+import HdLeftRight from "./components/left-right/index.js";
+import HdBomWorkbench from "./components/bom-workbench/index.js";
+export default [
+  HdGrayInput,
+  HdLeftRight,
+  HdBomTree,
+  HdBomWorkbench
+];

package/dist/es/assets/icons/operation-selected.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="keep">
+  <path d="M140.222 106.426C161.171 106.426 178.086 123.392 178 144.299C177.914 165.206 161 182.085 140.05 182C119.101 182 102.187 165.034 102.273 144.127C102.273 123.906 118.328 107.283 138.591 106.426H140.222ZM96.0908 18C99.5251 18 102.358 20.8276 102.358 24.255H113.262C119.788 24.255 125.197 28.7962 126.055 34.7084H142.798C148.464 34.7941 153.101 39.0783 153.616 44.7335L153.702 45.8474V98.1148C148.636 96.4011 143.399 95.4586 137.99 95.4586C111.459 95.4586 89.9948 117.308 89.9948 144.299C89.9948 154.666 93.2574 164.863 99.3534 173.26L100.641 174.888H35.904C30.2374 174.888 25.5152 170.432 25.0859 164.777L25 163.835V45.7617C25 40.1065 29.2929 35.3082 34.9596 34.7941L35.904 34.7084H55.1363C55.9949 29.139 60.8888 24.7691 66.9848 24.3406H78.8332C78.8332 20.9133 81.6665 18.0857 85.1009 18.0857L96.0908 18ZM140.05 125.105C135.586 127.59 132.924 131.789 132.495 136.673L132.409 137.787L110.429 149.782V150.468L115.237 158.437L117.985 162.464H118.672L125.54 158.437L139.964 150.468C142.025 151.839 144.772 152.439 146.833 152.439C150.267 152.439 153.015 151.753 155.762 150.468C157.823 149.097 161.257 146.098 161.944 143.099C163.146 140.186 163.318 137.272 162.889 134.359L162.631 133.074H161.257L148.894 140.443L147.52 138.472L145.459 135.816L147.52 134.445L158.51 127.762V127.076C158.081 126.219 157.308 125.534 156.449 125.105C155.161 124.42 148.207 120.65 140.05 125.105ZM79.1767 129.561H49.5555C46.808 129.561 44.5757 131.703 44.5757 134.445C44.5757 136.93 46.3787 139.072 48.8686 139.415L49.5555 139.5H79.1767C81.9241 139.5 84.1564 137.272 84.1564 134.531C84.1564 131.789 81.9241 129.561 79.1767 129.561ZM92.3989 96.6582H49.5555C46.808 96.6582 44.5757 98.8859 44.5757 101.542C44.5757 104.027 46.3787 106.083 48.8686 106.426L49.5555 106.512H92.3989C95.1463 106.512 97.3786 104.284 97.3786 101.542C97.2928 98.8859 95.0605 96.6582 92.3989 96.6582ZM131.894 63.8411H49.5555C46.808 63.8411 44.5757 66.0689 44.5757 68.7251C44.5757 71.2099 46.3787 73.2663 48.8686 73.6091L49.5555 73.6948H131.894C134.641 73.6948 136.874 71.467 136.874 68.7251C136.874 65.9832 134.641 63.8411 131.894 63.8411ZM92.5706 30.5956H88.6211C85.8736 31.1954 83.4696 33.0804 82.2676 35.651L81.9241 36.5078C80.9797 38.9926 81.2373 41.7345 82.5251 44.1337C84.1564 47.047 87.2473 48.8463 90.5958 48.8463C95.6615 48.8463 99.8685 44.7335 99.8685 39.6781C99.8685 38.3072 99.5251 36.9362 98.9241 35.651L98.4089 34.7941L98.0655 34.28C96.7776 32.3093 94.8029 31.024 92.5706 30.5956Z" fill="#1E3B9D"/>
+</svg>

package/dist/es/assets/icons/operation.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M140.222 106.426C161.171 106.426 178.086 123.392 178 144.299C177.914 165.206 161 182.085 140.05 182C119.101 182 102.187 165.034 102.273 144.127C102.273 123.906 118.328 107.283 138.591 106.426H140.222ZM96.0908 18C99.5251 18 102.358 20.8276 102.358 24.255H113.262C119.788 24.255 125.197 28.7962 126.055 34.7084H142.798C148.464 34.7941 153.101 39.0783 153.616 44.7335L153.702 45.8474V98.1148C148.636 96.4011 143.399 95.4586 137.99 95.4586C111.459 95.4586 89.9948 117.308 89.9948 144.299C89.9948 154.666 93.2574 164.863 99.3534 173.26L100.641 174.888H35.904C30.2374 174.888 25.5152 170.432 25.0859 164.777L25 163.835V45.7617C25 40.1065 29.2929 35.3082 34.9596 34.7941L35.904 34.7084H55.1363C55.9949 29.139 60.8888 24.7691 66.9848 24.3406H78.8332C78.8332 20.9133 81.6665 18.0857 85.1009 18.0857L96.0908 18ZM140.05 125.105C135.586 127.59 132.924 131.789 132.495 136.673L132.409 137.787L110.429 149.782V150.468L115.237 158.437L117.985 162.464H118.672L125.54 158.437L139.964 150.468C142.025 151.839 144.772 152.439 146.833 152.439C150.267 152.439 153.015 151.753 155.762 150.468C157.823 149.097 161.257 146.098 161.944 143.099C163.146 140.186 163.318 137.272 162.889 134.359L162.631 133.074H161.257L148.894 140.443L147.52 138.472L145.459 135.816L147.52 134.445L158.51 127.762V127.076C158.081 126.219 157.308 125.534 156.449 125.105C155.161 124.42 148.207 120.65 140.05 125.105ZM79.1767 129.561H49.5555C46.808 129.561 44.5757 131.703 44.5757 134.445C44.5757 136.93 46.3787 139.072 48.8686 139.415L49.5555 139.5H79.1767C81.9241 139.5 84.1564 137.272 84.1564 134.531C84.1564 131.789 81.9241 129.561 79.1767 129.561ZM92.3989 96.6582H49.5555C46.808 96.6582 44.5757 98.8859 44.5757 101.542C44.5757 104.027 46.3787 106.083 48.8686 106.426L49.5555 106.512H92.3989C95.1463 106.512 97.3786 104.284 97.3786 101.542C97.2928 98.8859 95.0605 96.6582 92.3989 96.6582ZM131.894 63.8411H49.5555C46.808 63.8411 44.5757 66.0689 44.5757 68.7251C44.5757 71.2099 46.3787 73.2663 48.8686 73.6091L49.5555 73.6948H131.894C134.641 73.6948 136.874 71.467 136.874 68.7251C136.874 65.9832 134.641 63.8411 131.894 63.8411ZM92.5706 30.5956H88.6211C85.8736 31.1954 83.4696 33.0804 82.2676 35.651L81.9241 36.5078C80.9797 38.9926 81.2373 41.7345 82.5251 44.1337C84.1564 47.047 87.2473 48.8463 90.5958 48.8463C95.6615 48.8463 99.8685 44.7335 99.8685 39.6781C99.8685 38.3072 99.5251 36.9362 98.9241 35.651L98.4089 34.7941L98.0655 34.28C96.7776 32.3093 94.8029 31.024 92.5706 30.5956Z" fill="#2C2C2C"/>
+</svg>

package/dist/es/assets/icons/process-path-selected.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="keep">
+<path d="M108 167V94C108 92 109 90 110 90L175 67C178 66 182 68 182 72V153C182 155 181 157 179 158L113 182C111 183 108 181 108 179V167ZM33 45L100 22H103L167 44C179 49 179 50 167 54L103 75H100L28 50C27 50 27 47 28 47L33 45ZM92 181L25 157C23 156 22 154 22 152V72C22 68 25 66 29 67L95 90C96 90 97 92 97 93V178C97 181 95 182 92 181Z" fill="#1E3B9D"/>
+</svg>

package/dist/es/assets/icons/process-path.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="keep">
+<path d="M108 167V94C108 92 109 90 110 90L175 67C178 66 182 68 182 72V153C182 155 181 157 179 158L113 182C111 183 108 181 108 179V167ZM33 45L100 22H103L167 44C179 49 179 50 167 54L103 75H100L28 50C27 50 27 47 28 47L33 45ZM92 181L25 157C23 156 22 154 22 152V72C22 68 25 66 29 67L95 90C96 90 97 92 97 93V178C97 181 95 182 92 181Z" fill="#2C2C2C"/>
+</svg>

package/dist/es/assets/icons/process-plan-selected.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="keep">
+<path d="M174.922 99.9805C174.922 58.5547 141.328 24.9805 99.9023 24.9805C58.4766 24.9805 24.9023 58.5742 24.9023 100C24.9023 141.426 58.4961 175 99.9219 175C141.328 175 174.922 141.406 174.922 99.9805ZM109.336 133.164C98.9844 145.195 85.8984 149.062 84.3359 139.98C83.1445 133.164 89.3359 108.379 90.5859 99.043C90.9766 95.9961 87.4414 99.043 87.4414 99.043C87.4414 99.043 77.2852 106.836 74.9414 102.461C74.5898 101.758 77.0898 99.6289 78.0859 99.0625C78.0859 99.0625 99.2773 82.1094 106.211 85.4102C113.145 88.7109 103.789 109.609 103.086 112.695C102.402 115.801 98.0078 139.453 112.461 126.348C112.461 126.348 119.687 121.113 109.336 133.164ZM104.355 74.9609C100.684 74.9219 97.3242 72.8711 95.6055 69.6094C93.8867 66.3477 94.1211 62.4219 96.1719 59.375C98.2227 56.3281 101.797 54.6484 105.449 55.0195C110.781 55.5469 114.727 60.1758 114.434 65.5273C114.16 70.8594 109.707 75.0195 104.355 74.9609Z" fill="#1E3B9D"/>
+</svg>

package/dist/es/assets/icons/process-plan.svg

@@ -0,0 +1,3 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="keep">
+<path d="M174.922 99.9805C174.922 58.5547 141.328 24.9805 99.9023 24.9805C58.4766 24.9805 24.9023 58.5742 24.9023 100C24.9023 141.426 58.4961 175 99.9219 175C141.328 175 174.922 141.406 174.922 99.9805ZM109.336 133.164C98.9844 145.195 85.8984 149.062 84.3359 139.98C83.1445 133.164 89.3359 108.379 90.5859 99.043C90.9766 95.9961 87.4414 99.043 87.4414 99.043C87.4414 99.043 77.2852 106.836 74.9414 102.461C74.5898 101.758 77.0898 99.6289 78.0859 99.0625C78.0859 99.0625 99.2773 82.1094 106.211 85.4102C113.145 88.7109 103.789 109.609 103.086 112.695C102.402 115.801 98.0078 139.453 112.461 126.348C112.461 126.348 119.687 121.113 109.336 133.164ZM104.355 74.9609C100.684 74.9219 97.3242 72.8711 95.6055 69.6094C93.8867 66.3477 94.1211 62.4219 96.1719 59.375C98.2227 56.3281 101.797 54.6484 105.449 55.0195C110.781 55.5469 114.727 60.1758 114.434 65.5273C114.16 70.8594 109.707 75.0195 104.355 74.9609Z" fill="#2C2C2C"/>
+</svg>

package/dist/es/assets/icons/remove-minus.svg

@@ -0,0 +1,4 @@
+<svg class="keep" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="4.5" stroke="#1E3B9D"/>
+<path d="M4 8H12" stroke="#1E3B9D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/es/assets/icons/remove-plus.svg

@@ -0,0 +1,5 @@
+<svg class="keep" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="4.5" stroke="#1E3B9D"/>
+<path d="M4 8H12" stroke="#1E3B9D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 4L8 12" stroke="#1E3B9D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/es/assets/icons/search.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="keep">
+<path d="M6.66667 11.3333C9.244 11.3333 11.3333 9.244 11.3333 6.66667C11.3333 4.08934 9.244 2 6.66667 2C4.08934 2 2 4.08934 2 6.66667C2 9.244 4.08934 11.3333 6.66667 11.3333Z" stroke="#1E3B9D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 10L14 14" stroke="#1E3B9D" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/es/components/bom-tree/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/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "@handaotech-design/vue";
+import BomTree from "./index.vue";
+export * from "./index.vue";
+export const HdBomTree = withInstall(BomTree);
+export default HdBomTree;

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

@@ -0,0 +1,358 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
+import type { TreeProps } from 'ant-design-vue'
+import { watchDebounced } from '@vueuse/shared'
+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 HdGrayInput from '../gray-input'
+import type { BomTreeConfig } from '../../models'
+
+const props = defineProps<Props>()
+const emits = defineEmits(['select'])
+const COMPONENT_NAME = 'HdBomTree'
+defineOptions({
+  name: COMPONENT_NAME,
+})
+
+type TreeNodeWithMeta = DataNode & {
+  parentKeys: string[]
+}
+
+interface Props {
+  treeData: TreeProps['treeData']
+  config: BomTreeConfig
+}
+
+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'
+let keyToNodeMap = new Map<string, TreeNodeWithMeta>()
+const selectedKeys = ref<string[]>([])
+const initTreeState = async () => {
+  searchValue.value = ''
+  filteredTreeData.value = _treeData.value
+}
+
+const onExpand = (keys: Key[]) => {
+  expandedKeys.value = keys
+  autoExpandParent.value = false
+}
+
+const updateTreeContainerHeight = () => {
+  const treeContainer = 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])
+      }
+    }
+  }
+  traverse(treeData)
+  return keyMap
+}
+
+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
+  }
+  return (data || []).reduce(getNodes, [])
+}
+
+// 获取直接父节点的 key
+const getParentKey = (key: string): string[] | undefined => {
+  const treeNode = keyToNodeMap.get(key)
+  return treeNode?.parentKeys || []
+}
+
+const selectFirstSelectableNode = () => {
+  const firstNode: any = _.find(Array.from(keyToNodeMap.values()), node => (node as any)?.selectable)
+  if (!firstNode) {
+    return
+  }
+
+  nextTick(() => {
+    expandedKeys.value = getParentKey(firstNode.key as string) as any
+    selectedKeys.value = firstNode ? [firstNode.key] as string[] : []
+  })
+}
+
+type Key = string | number
+const onSelected = (keys: Key[], { node }: { node: EventDataNode }) => {
+  const key = node?.dataRef?.key
+  if (key) {
+    selectedKeys.value = [key as string]
+  }
+  else {
+    selectedKeys.value = []
+  }
+}
+
+onMounted(async () => {
+  window.addEventListener('resize', updateTreeContainerHeight)
+  await nextTick(() => {
+    updateTreeContainerHeight()
+  })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateTreeContainerHeight)
+})
+
+watch(
+  () => _treeData.value,
+  async () => {
+    if (!_.isEmpty(_treeData.value)) {
+      keyToNodeMap = buildKeyToNodeMap(_treeData.value)
+      await initTreeState()
+      selectFirstSelectableNode()
+    }
+    else {
+      keyToNodeMap.clear()
+      await initTreeState()
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+
+watchDebounced(
+  searchValue, (value: string) => {
+    let expanded: any[]
+    if (_.isEmpty(value)) {
+      expanded = getParentKey(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 getParentKey(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[])
+    }
+    expandedKeys.value = expanded
+    nextTick(() => {
+      expandedKeys.value = _.uniq(expanded.flat(1)) as any as string[]
+    })
+  }, { debounce: 500 })
+
+watch(
+  () => selectedKeys.value,
+  () => {
+    if (selectedKeys.value && selectedKeys.value.length) {
+      return emits('select', keyToNodeMap.get(selectedKeys.value[0]))
+    }
+  },
+)
+
+function getIconClass(icon: string, isSelected: boolean) {
+  return isSelected ? `i-icon-${icon}-selected` : `i-icon-${icon}`
+}
+
+function getTitlePart(title: string, partType: 'before' | 'after') {
+  const _searchValue = searchValue.value || ''
+  const index = title.indexOf(_searchValue)
+
+  return {
+    before: title.substring(0, index),
+    after: title.substring(index + _searchValue.length),
+  }[partType]
+}
+
+function hasSearchMatch(title: string) {
+  return searchValue.value && title.includes(searchValue.value)
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-100%">
+    <div class="search-box">
+      <HdGrayInput
+        v-model:value="searchValue"
+        :placeholder="props.config?.filter?.placeholder || '输入关键词进行筛选（如名称/编号）'"
+        class="search-input"
+      >
+        <template #prefix>
+          <div class="i-icon-search w-16px h-16px" />
+        </template>
+      </HdGrayInput>
+    </div>
+    <div :id="treeContainerId" class="flex-grow tree-wrapper mt-12px overflow-y-hidden">
+      <div v-if="!_.isEmpty(filteredTreeData)">
+        <a-tree
+          :height="treeContainerHeight"
+          :expanded-keys="expandedKeys"
+          :auto-expand-parent="autoExpandParent"
+          :tree-data="filteredTreeData"
+          :block-node="true"
+          :selected-keys="selectedKeys"
+          @expand="onExpand"
+          @select="onSelected"
+        >
+          <template #title="{ title, dataRef }">
+            <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
+              <div
+                v-if="!!dataRef.icon"
+                class="icon w-20px h-20px mr-4px min-w-20px"
+                :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
+              />
+              <a-dropdown :trigger="['contextmenu']">
+                <div v-if="hasSearchMatch(title)" class="tree-node-text">
+                  <span>{{ getTitlePart(title, 'before') }}</span>
+                  <span class="highlight" style="background-color: #FFD499">{{ searchValue }}</span>
+                  <span>{{ getTitlePart(title, 'after') }}</span>
+                </div>
+                <div v-else class="tree-node-text">
+                  {{ title }}
+                </div>
+                <template #overlay>
+                  <slot name="right-click" :tree-node="dataRef" />
+                </template>
+              </a-dropdown>
+            </div>
+          </template>
+          <template #switcherIcon="{ dataRef }">
+            <div
+              v-if="expandedKeys.includes(dataRef.key)" class="i-icon-remove-minus icon w-16px h-16px"
+              style="font-size: 20px;"
+            />
+            <div v-else class="i-icon-remove-plus icon w-16px h-16px" />
+          </template>
+        </a-tree>
+      </div>
+      <div v-show="_.isEmpty(filteredTreeData)" class="w-100% h-100% flex justify-center items-center">
+        <span>暂无数据</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tree-wrapper {
+  background-color: #fff;
+}
+
+.search-box {
+  padding: 0 16px;
+}
+
+:deep(.ant-tree-list) .ant-tree-treenode-motion {
+  width: 100%;
+}
+:deep(.ant-tree-list) .ant-tree-treenode {
+  width: 100%;
+  align-items: center;
+  color: #2C2C2C;
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  padding: 4px 12px;
+}
+:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-indent-unit {
+  width: 10px;
+}
+:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-switcher {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  margin: 0 10px 0 0;
+  align-self: center;
+  line-height: 16px;
+}
+:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper {
+  transition: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-bottom: 0;
+  display: inline-flex;
+  overflow: visible !important;
+  flex: 1;
+  min-width: 0;
+}
+:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper:hover {
+  background-color: #E9EBED;
+}
+:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.selectable {
+  cursor: pointer;
+}
+:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.not-selectable {
+  cursor: auto;
+}
+:deep(.ant-tree-list) .ant-tree-treenode:hover {
+  background-color: #E9EBED;
+}
+:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper {
+  user-select: auto;
+}
+:deep(.ant-tree-list) .ant-tree-treenode.ant-tree-treenode-selected {
+  background-color: #EDF4FF;
+  border-radius: 4px;
+  color: #1E3B9D;
+  font-weight: 700;
+}
+:deep(.ant-tree-list) .ant-tree-treenode.ant-tree-treenode-selected .ant-tree-switcher, :deep(.ant-tree-list) .ant-tree-treenode.ant-tree-treenode-selected .ant-tree-node-content-wrapper {
+  background-color: #EDF4FF;
+}
+:deep(.ant-tree-list) .ant-tree-node-content-wrapper {
+  align-items: center;
+  padding: 0;
+}
+:deep(.ant-tree-list) .ant-tree-node-content-wrapper {
+  display: flex;
+  margin-bottom: -4px;
+}
+:deep(.ant-tree-list) .ant-tree-node-content-wrapper .ant-tree-title {
+  flex-grow: 1;
+  display: block;
+}
+
+.tree-node-text {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+</style>

package/dist/es/components/bom-workbench/index.d.ts

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

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

@@ -0,0 +1,5 @@
+import { withInstall } from "@handaotech-design/vue";
+import BomWorkbench from "./index.vue";
+export * from "./index.vue";
+export const HdBomWorkbench = withInstall(BomWorkbench);
+export default HdBomWorkbench;

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

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import * as _ from 'lodash-es'
+import type { BomNode, BomTreeConfig, Optional, WorkBenchLayoutConfig } from '../../models'
+import { convertBomDataToTree } from '../../utils'
+import HdLeftRight from '../left-right/index'
+import HdBomTree from '../bom-tree/index'
+
+const props = defineProps<Props>()
+const COMPONENT_NAME = 'HdBomWorkbench'
+defineOptions({
+  name: COMPONENT_NAME,
+})
+
+interface Props {
+  moduleKey: string
+  bomData: Optional<BomNode[]>
+  treeConfig: BomTreeConfig
+  layoutConfig?: WorkBenchLayoutConfig
+}
+const bomDataForTree = ref<BomNode[]>()
+const selectedNode = ref<BomNode>()
+
+async function onSelected(data: BomNode) {
+  selectedNode.value = data
+}
+
+watch(
+  () => props.bomData,
+  () => {
+    if (_.isEmpty(props.bomData)) {
+      selectedNode.value = undefined
+      bomDataForTree.value = undefined
+    }
+    else {
+      bomDataForTree.value = convertBomDataToTree(props.bomData!, props.treeConfig.nodeConfig.rule)
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <HdLeftRight
+    v-if="bomDataForTree"
+    :module-key="props.moduleKey"
+    :max-left-width="props?.layoutConfig?.maxLeftWidth"
+  >
+    <template #left>
+      <div class="left-content">
+        <div class="bom-tree-container">
+          <HdBomTree
+            :tree-data="bomDataForTree"
+            :config="props.treeConfig"
+            @select="(data: BomNode) => onSelected(data)"
+          >
+            <template #right-click>
+              <slot name="tree-right-click" :bom-node="selectedNode" />
+            </template>
+          </HdBomTree>
+        </div>
+      </div>
+    </template>
+    <template #right>
+      <div class="m-20px">
+        <slot name="content" :bom-node="selectedNode" />
+      </div>
+    </template>
+  </HdLeftRight>
+</template>
+
+<style scoped>
+.v-h-center {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 1s ease;
+}
+
+.left-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px 0 16px 0;
+}
+.left-content .bom-tree-container {
+  flex-grow: 1;
+}
+
+:deep(.spinning-wrapper) {
+  height: 100%;
+}
+:deep(.spinning-wrapper) .ant-spin-container {
+  height: 100%;
+}
+</style>

package/dist/es/components/gray-input/index.d.ts

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

package/dist/es/components/gray-input/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "@handaotech-design/vue";
+import GaryInput from "./index.vue";
+export * from "./index.vue";
+export const HdGrayInput = withInstall(GaryInput);
+export default HdGrayInput;

package/dist/es/components/gray-input/index.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const COMPONENT_NAME = 'HdBomGrayInput'
+defineOptions({
+  name: COMPONENT_NAME,
+})
+</script>
+
+<template>
+  <span class="inline-block gray-a-input-wrapper">
+    <a-input
+      v-bind="$attrs"
+    >
+      <template v-for="(key, index) in Object.keys($slots)" :key="index" #[key]>
+        <slot :name="key" />
+      </template>
+    </a-input>
+  </span>
+</template>
+
+<style scoped>
+.gray-a-input-wrapper {
+  width: 100%;
+}
+
+:deep(.ant-input),
+:deep(.ant-input-affix-wrapper) {
+  background-color: #F5F5F5;
+  border-radius: 2px;
+  padding: 6px 12px;
+  font-size: 14px;
+  border-color: transparent;
+}
+:deep(.ant-input):hover,
+:deep(.ant-input-affix-wrapper):hover {
+  border-color: #1E3B9D;
+}
+:deep(.ant-input):focus, :deep(.ant-input).ant-input-affix-wrapper-focused,
+:deep(.ant-input-affix-wrapper):focus,
+:deep(.ant-input-affix-wrapper).ant-input-affix-wrapper-focused {
+  border-color: #1E3B9D;
+  background-color: #fff;
+  box-shadow: none;
+}
+</style>

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

@@ -0,0 +1,4 @@
+export * from './bom-tree';
+export * from './bom-workbench';
+export * from './gray-input';
+export * from './left-right';

package/dist/es/components/index.js

@@ -0,0 +1,4 @@
+export * from "./bom-tree/index.js";
+export * from "./bom-workbench/index.js";
+export * from "./gray-input/index.js";
+export * from "./left-right/index.js";

package/dist/es/components/left-right/index.d.ts

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