@handaotech-design/bom 0.0.18 → 0.0.20

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

@@ -1,97 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-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

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { Input } from 'ant-design-vue'
-
-const COMPONENT_NAME = 'HdBomGrayInput'
-defineOptions({
-  name: COMPONENT_NAME,
-  components: { AInput: Input },
-})
-</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

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

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

@@ -1,5 +0,0 @@
-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

@@ -1,149 +0,0 @@
-<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

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

package/src/hooks/index.ts

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

package/src/hooks/use-ppboms.ts

@@ -1,97 +0,0 @@
-import { ref } from 'vue'
-import { convertBomDataToTree, getConfig } from '../utils'
-import { YesNo } from '../models'
-
-const ppbomPageConfigCode = 'PPBOM_PAGE'
-
-export enum QueryType {
-  ALL = 'ALL',
-  MODEL_ESN = 'MODEL_ESN',
-}
-
-interface UsePpbomsParams {
-  host: string
-  appId: string
-  appSecret: string
-  queryType?: QueryType
-  options?: Record<string, any>
-}
-
-export const usePpboms = (params: UsePpbomsParams) => {
-  const { host, appId, appSecret, queryType, options } = params
-  const loading = ref<boolean>(false)
-  const treeData = ref<any>()
-  const treeConfig = ref<any>()
-  const layoutConfig = ref<any>()
-
-  const queryBoms = async () => {
-    const body = {
-      page: 1,
-      pageSize: Number.MAX_SAFE_INTEGER,
-      ...(options ?? {}),
-    }
-    const response = await fetch(`http://${host}/api/public/v2/ppboms/query/all`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CONSUMER-ID': appId,
-        'Authorization': `Bearer ${appSecret}`,
-      },
-      body: JSON.stringify(body),
-    })
-    return response.json()
-  }
-
-  const queryBomsByModelEsn = async () => {
-    const body = {
-      page: 1,
-      pageSize: Number.MAX_SAFE_INTEGER,
-      forceSettle: YesNo.YES,
-      lookupOnly: YesNo.YES,
-      ...(options ?? {}),
-    }
-    const response = await fetch(`http://${host}/api/public/v2/ppboms/query/by-model-esn`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CONSUMER-ID': appId,
-        'Authorization': `Bearer ${appSecret}`,
-      },
-      body: JSON.stringify(body),
-    })
-    return response.json()
-  }
-
-  const getData = async () => {
-    switch (queryType) {
-      case QueryType.MODEL_ESN:
-        return await queryBomsByModelEsn()
-      default:
-        return await queryBoms()
-    }
-  }
-
-  const getDataAndConfig = async () => {
-    try {
-      loading.value = true
-      const dataResp = await getData()
-      const configResp = await getConfig(host, ppbomPageConfigCode, appId, appSecret)
-      loading.value = false
-      const props = configResp.config.props
-      treeData.value = convertBomDataToTree(dataResp.data.items, props.content.tree.nodeConfig.rule)
-      treeConfig.value = props.content.tree
-      layoutConfig.value = props.content.tree.layout
-    }
-    finally {
-      loading.value = false
-    }
-  }
-
-  return {
-    treeData,
-    layoutConfig,
-    treeConfig,
-    loading,
-    getDataAndConfig,
-  }
-}

package/src/index.ts

@@ -1,9 +0,0 @@
-import installer from './defaults'
-export * from './components'
-export * from './hooks'
-export * from './models'
-export * from './utils'
-
-export const install = installer.install
-
-export default installer

package/src/models/bom.ts

@@ -1,43 +0,0 @@
-import type { BaseRule } from '../utils'
-import type { YesNo } from './common'
-
-// eslint-disable-next-line no-template-curly-in-string
-export const defaultTitleTemplate = '${code}'
-
-export interface BomNodeTitleConfig {
-  template: string
-}
-
-export interface WorkBenchLayoutConfig {
-  maxLeftWidth: number
-}
-
-export interface BomTreeNodeConfig {
-  title?: BomNodeTitleConfig
-  selectable?: YesNo
-  icon?: string
-}
-
-export interface BomLocalFilter {
-  placeholder?: string
-}
-
-export interface BomTreeConfig {
-  filter?: BomLocalFilter
-  nodeConfig: {
-    rule: BaseRule<BomTreeNodeConfig>
-  }
-}
-
-export interface BomNode {
-  id: string
-  key: string
-  code: string
-  version: string
-  name: string
-  qty: number
-  children?: BomNode[]
-  businessType: string
-  raw: Record<string, any>
-  [key: string]: any
-}

package/src/models/common.ts

@@ -1,6 +0,0 @@
-export enum YesNo {
-  YES = 'YES',
-  NO = 'NO',
-}
-
-export type Optional<T> = T | undefined | null

package/src/models/index.ts

@@ -1,2 +0,0 @@
-export * from './common'
-export * from './bom'

package/src/shared/keys.ts

@@ -1 +0,0 @@
-export const INSTALLED_KEY = Symbol('INSTALLED_KEY')

package/src/shared/make-installer.ts

@@ -1,21 +0,0 @@
-import type { App, Plugin } from '@vue/runtime-core'
-import { INSTALLED_KEY } from './keys'
-
-export const makeInstaller = (components: Plugin[] = []) => {
-  const install = (app: App) => {
-    // @ts-expect-error mark app as having installer flag
-    if (app[INSTALLED_KEY]) {
-      return
-    }
-    // @ts-expect-error set installer flag on app instance
-    app[INSTALLED_KEY] = true
-
-    components.forEach(c => app.use(c))
-
-    // if (options) provideGlobalConfig(options, app, true)
-  }
-
-  return {
-    install,
-  }
-}

package/src/shims-vue.d.ts

@@ -1,5 +0,0 @@
-declare module '*.vue' {
-    import type { DefineComponent } from 'vue';
-    const component: DefineComponent<Record<string,unknown>, Record<string,unknown>, unknown>;
-    export default component;
-}

package/src/types/components.d.ts

@@ -1,17 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
-export {}
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    BomTree: typeof import('./../components/bom-tree/index.vue')['default']
-    BomWorkbench: typeof import('./../components/bom-workbench/index.vue')['default']
-    GrayInput: typeof import('./../components/gray-input/index.vue')['default']
-    LeftRight: typeof import('./../components/left-right/index.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-  }
-}

package/src/utils/bom.ts

@@ -1,33 +0,0 @@
-import * as _ from 'lodash-es'
-import type { BomNode, BomTreeNodeConfig } from '../models'
-import { YesNo, defaultTitleTemplate } from '../models'
-import type { BaseRule } from './rule-engine'
-import { RuleEngine } from './rule-engine'
-import { genText } from './template'
-
-const defaultTreeNodeConfig: BomTreeNodeConfig = {
-  title: {
-    template: defaultTitleTemplate,
-  },
-}
-
-export const convertBomDataToTree = (treeData: BomNode[], nodeConfigRule: BaseRule<BomTreeNodeConfig>) => {
-  const ruleEngine = new RuleEngine<BomTreeNodeConfig>(nodeConfigRule)
-  const traverse = (nodes: BomNode[] = []) => {
-    for (const node of nodes) {
-      const nodeConfig = ruleEngine.matchOne({ bomNode: node }, defaultTreeNodeConfig)
-      const titleTemplate = nodeConfig?.title?.template ?? defaultTitleTemplate
-      Object.assign(node, {
-        key: node.key,
-        title: genText(node, titleTemplate),
-        selectable: nodeConfig?.selectable === YesNo.YES,
-        icon: nodeConfig?.icon,
-      })
-      if (!_.isEmpty(node.children)) {
-        traverse(node.children)
-      }
-    }
-  }
-  traverse(treeData)
-  return treeData
-}

package/src/utils/config.ts

@@ -1,11 +0,0 @@
-export const getConfig = async (host: string, code: string, appId: string, appSecret: string) => {
-  const response = await fetch(`http://${host}/api/public/v2/business-configs/${code}`, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      'X-CONSUMER-ID': appId,
-      'Authorization': `Bearer ${appSecret}`,
-    },
-  })
-  return await response.json()
-}

package/src/utils/index.ts

@@ -1,4 +0,0 @@
-export * from './bom'
-export * from './rule-engine'
-export * from './template'
-export * from './config'

package/src/utils/rule-engine.ts

@@ -1,83 +0,0 @@
-import type { Optional } from '../models/common'
-
-export type RuleCondition = 'default' | 'always' | string | LogicExpression
-
-export interface LogicExpression {
-  // 以后可扩展
-  logic: any
-  conditions: any[]
-}
-
-export interface BaseRule<T> {
-  cases: BaseCase<T>[]
-}
-
-export interface BaseCase<T> {
-  key?: string
-  condition: RuleCondition
-  result: T
-}
-
-export class RuleEngine<T> {
-  private readonly rule: BaseRule<T>
-
-  constructor(rule: BaseRule<T>) {
-    this.rule = rule
-  }
-
-  matchOne(context: any, defaultResult?: T): Optional<T> | T {
-    let defaultRule: BaseCase<T> | undefined
-
-    for (const caseItem of this.rule.cases) {
-      const cond = caseItem.condition
-      if (cond === 'default') {
-        defaultRule = caseItem
-        continue
-      }
-      if (cond === 'always' || (typeof cond === 'string' && evaluate(cond, context))) {
-        return caseItem.result
-      }
-      // LogicExpression 暂不支持
-    }
-
-    if (defaultRule) {
-      return defaultRule.result
-    }
-    return defaultResult
-  }
-
-  matchMany(context: any, defaultResult?: T): T[] {
-    const results: T[] = []
-    let defaultRule: BaseCase<T> | undefined
-
-    for (const caseItem of this.rule.cases) {
-      const cond = caseItem.condition
-      if (cond === 'default') {
-        defaultRule = caseItem
-        continue
-      }
-      if (cond === 'always' || (typeof cond === 'string' && evaluate(cond, context))) {
-        results.push(caseItem.result)
-      }
-      // LogicExpression 暂不支持
-    }
-
-    if (results.length > 0) {
-      return results
-    }
-    const fallback = defaultRule?.result ?? defaultResult
-    return fallback ? [fallback] : []
-  }
-}
-
-// TODO 安全的表达式求值器
-function evaluate(expr: string, context: any): boolean {
-  try {
-    // eslint-disable-next-line no-new-func
-    const func = new Function('context', `with(context) { return ${expr}; }`)
-    return Boolean(func(context))
-  }
-  catch {
-    return false
-  }
-}

package/src/utils/template.ts

@@ -1,13 +0,0 @@
-import * as _ from 'lodash-es'
-
-export function genText(data: Record<string, any>, templateStr: string, defaultText?: string) {
-  const compiled = _.template(templateStr)
-  let str: string
-  try {
-    str = compiled(data)
-  }
-  catch (e) { // 模板变量找不到，暂时处理
-    str = defaultText ?? '--'
-  }
-  return str
-}