@handaotech-design/bom 0.0.16

package/src/components/bom-tree/index.vue

@@ -0,0 +1,377 @@
+<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 lang="scss" scoped>
+.tree-wrapper {
+  background-color: #fff;
+}
+
+.search-box {
+  padding: 0 16px;
+}
+
+:deep(.ant-tree-list) {
+  .ant-tree-treenode-motion {
+    width: 100%;
+  }
+
+  .ant-tree-treenode {
+    width: 100%;
+    align-items: center;
+    color: #2C2C2C;
+    font-size: 16px;
+    display: flex;
+    justify-content: center;
+    padding: 4px 12px;
+
+    .ant-tree-indent-unit {
+      width: 10px;
+    }
+
+    .ant-tree-switcher {
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      margin: 0 10px 0 0;
+      align-self: center;
+      line-height: 16px;
+    }
+
+    .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;
+
+      &:hover {
+        background-color: #E9EBED;
+      }
+
+      .ant-tree-title {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+        min-width: 0;
+
+        .tree-node-tittle {
+          &.selectable {
+            cursor: pointer;
+          }
+
+          &.not-selectable {
+            cursor: auto;
+          }
+        }
+      }
+    }
+
+    &:hover {
+      background-color: #E9EBED;
+    }
+
+    .ant-tree-node-content-wrapper {
+      user-select: auto;
+    }
+
+    &.ant-tree-treenode-selected {
+      background-color: #EDF4FF;
+      border-radius: 4px;
+      color: #1E3B9D;
+      font-weight: 700;
+
+      .ant-tree-switcher, .ant-tree-node-content-wrapper {
+        background-color: #EDF4FF;
+      }
+    }
+  }
+
+  .ant-tree-node-content-wrapper {
+    align-items: center;
+    padding: 0;
+  }
+
+  .ant-tree-node-content-wrapper {
+    display: flex;
+    margin-bottom: -4px;
+
+    .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/src/components/bom-workbench/index.ts

@@ -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/src/components/bom-workbench/index.vue

@@ -0,0 +1,97 @@
+<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 lang="scss" 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;
+
+  .bom-tree-container {
+    flex-grow: 1;
+  }
+}
+:deep(.spinning-wrapper) {
+  height: 100%;
+  .ant-spin-container {
+    height: 100%;
+  }
+}
+</style>

package/src/components/gray-input/index.ts

@@ -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/src/components/gray-input/index.vue

@@ -0,0 +1,40 @@
+<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 lang="scss" 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;
+  &:hover {
+    border-color: #1E3B9D;
+  }
+  &:focus, &.ant-input-affix-wrapper-focused {
+    border-color: #1E3B9D;
+    background-color: #fff;
+    box-shadow: none;
+  }
+}
+</style>

package/src/components/index.ts

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

package/src/components/left-right/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from '@handaotech-design/vue'
+import LeftRight from './index.vue'
+export * from './index.vue'
+export const HdLeftRight = withInstall(LeftRight)
+export default HdLeftRight

package/src/components/left-right/index.vue

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import { debounce, throttle } from 'lodash-es'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps({
+  moduleKey: {
+    type: String,
+    required: true,
+  },
+  maxLeftWidth: {
+    type: Number,
+    required: false,
+  },
+})
+const COMPONENT_NAME = 'HdLeftRight'
+defineOptions({
+  name: COMPONENT_NAME,
+})
+
+// 默认宽度 & 本地存储
+const defaultLeftWidth = 300
+const savedWidth = localStorage.getItem(`${props.moduleKey}LeftPanelWidth`)
+const initialWidth = savedWidth ? parseInt(savedWidth) : defaultLeftWidth
+
+// 响应式宽度
+const leftWidth = ref(initialWidth)
+const isDragging = ref(false)
+let startX = 0
+let startWidth = 0
+
+// 节流更新UI（60fps）
+const throttledUpdate = throttle((width: number) => {
+  leftWidth.value = width
+}, 16)
+
+// 防抖保存到本地存储（300ms延迟）
+const debouncedSave = debounce(
+  (val: number) => {
+    localStorage.setItem(`${props.moduleKey}LeftPanelWidth`, val.toString())
+  },
+  300,
+  { trailing: true }, // 确保最后一次触发
+)
+
+// 处理拖动
+const handleDrag = (e: MouseEvent) => {
+  if (!isDragging.value) {
+    return
+  }
+  const delta = e.clientX - startX
+  const newWidth = Math.max(
+    200,
+    Math.min(props.maxLeftWidth ?? 500, startWidth + delta),
+  )
+
+  throttledUpdate(newWidth) // 节流更新UI
+  debouncedSave(newWidth) // 防抖保存
+}
+
+// 停止拖动
+const stopDrag = () => {
+  isDragging.value = false
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('mouseup', stopDrag)
+
+  debouncedSave.flush() // 立即执行未完成的保存
+}
+
+// 开始拖动
+const startDrag = (e: MouseEvent) => {
+  isDragging.value = true
+  startX = e.clientX
+  startWidth = leftWidth.value
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+
+// 清理
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('mouseup', stopDrag)
+  throttledUpdate.cancel()
+  debouncedSave.cancel()
+})
+
+// 初始化
+onMounted(() => {
+  leftWidth.value = initialWidth
+})
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="left" :style="{ width: `${leftWidth}px` }">
+      <slot name="left" />
+    </div>
+    <div
+      class="divider"
+      :style="{ left: `${leftWidth}px` }"
+      @mousedown="startDrag"
+    >
+      <div class="vertical-line" />
+    </div>
+    <div class="right">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  display: flex;
+  position: relative;
+  height: 100%;
+
+  .left {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .divider {
+    position: absolute;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 1;
+    transition: background 0.2s;
+
+    .vertical-line {
+      width: 1px;
+      height: 100%;
+      background: #E9EBED;
+    }
+
+    &:hover {
+      .vertical-line {
+        background: #2e72d2;
+        width: 2px;
+      }
+    }
+  }
+
+  .right {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 16px;
+  }
+}
+</style>

package/src/defaults.ts

@@ -0,0 +1,3 @@
+import { makeInstaller } from './shared/make-installer'
+import AllComponents from './all-components'
+export default makeInstaller([...AllComponents])

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-ppboms'