adtec-core-package 2.2.2 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "private": false,
   "type": "module",
   "scripts": {
@@ -40,7 +40,6 @@
     "vue-focus-lock": "^3.0.0",
     "vue-img-viewr": "2.0.11",
     "vue-router": "^4.5.0",
-    "vxe-pc-ui": "4.6.8",
     "vxe-table": "4.13.28",
     "wujie-vue3": "^1.0.24",
     "xlsx-js-style": "^1.2.0"

package/src/components/tooltip/index.ts

@@ -0,0 +1,11 @@
+import VxeTooltipComponent from './src/tooltip'
+
+export const VxeTooltip = Object.assign({}, VxeTooltipComponent, {
+  install (app: import("vue").App) {
+    app.component(VxeTooltipComponent.name as string, VxeTooltipComponent)
+  }
+})
+
+
+export const Tooltip = VxeTooltip
+export default VxeTooltip

package/src/components/tooltip/src/tooltip.ts

@@ -0,0 +1,518 @@
+//@ts-ignore
+import {
+  h,
+  ref,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  computed,
+  reactive,
+  watch,
+  type PropType,
+  type VNode
+} from 'vue'
+
+// 定义属性类型
+interface VxeTooltipPropTypes {
+  modelValue?: boolean
+  content?: string | number
+  trigger?: 'hover' | 'click'
+  theme?: 'dark' | 'light'
+  enterDelay?: number
+  leaveDelay?: number
+  isArrow?: boolean
+  enterable?: boolean
+}
+
+// 定义响应式数据类型
+interface TooltipReactData {
+  target: HTMLElement | null
+  isUpdate: boolean
+  visible: boolean
+  tipContent: string | number
+  tipActive: boolean
+  tipTarget: HTMLElement | null
+  tipZindex: number
+  tipStore: {
+    style: Record<string, string | number>
+    placement: string
+    arrowStyle: Record<string, string | number> | null
+  }
+}
+
+// 定义内部数据类型
+interface TooltipInternalData {
+  showDelayTip?: Function
+}
+
+// 定义组件方法类型
+interface TooltipMethods {
+  open: (target?: HTMLElement | null, content?: string | number) => void
+  close: () => void
+  updatePlacement: () => Promise<void>
+  isActived: () => boolean
+  setActived: (active: boolean) => void
+}
+
+// 简单的防抖函数
+function debounce(func: Function, wait: number) {
+  let timeout: number | null = null
+  return function (this: any, ...args: any[]) {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = window.setTimeout(() => {
+      func.apply(this, args)
+    }, wait) as any
+  }
+}
+
+// 检查值是否为空
+function isNull(value: any): boolean {
+  return value === null || value === undefined
+}
+
+// 检查值是否相等
+function eqNull(value: any): boolean {
+  return value === null || value === undefined || value === ''
+}
+
+export default {
+  name: 'VxeTooltip',
+  props: {
+    modelValue: Boolean,
+    content: [String, Number],
+    trigger: {
+      type: String as PropType<'hover' | 'click'>,
+      default: 'hover'
+    },
+    theme: {
+      type: String as PropType<'dark' | 'light'>,
+      default: 'dark'
+    },
+    isArrow: {
+      type: Boolean,
+      default: true
+    },
+    enterable: {
+      type: Boolean,
+      default: true
+    },
+    enterDelay: {
+      type: Number,
+      default: 0
+    },
+    leaveDelay: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props: VxeTooltipPropTypes, { slots, emit }: any) {
+    // 响应式数据
+    const reactData = reactive<TooltipReactData>({
+      target: null,
+      isUpdate: false,
+      visible: false,
+      tipContent: '',
+      tipActive: false,
+      tipTarget: null,
+      tipZindex: 0,
+      tipStore: {
+        style: {},
+        placement: '',
+        arrowStyle: {}
+      }
+    })
+
+    // 内部数据
+    const internalData: TooltipInternalData = {}
+
+    // DOM 引用
+    const refElem = ref<HTMLDivElement>()
+    const contentWrapperfElem = ref<HTMLDivElement>()
+
+    // 获取 DOM 位置信息
+    const getDomNode = () => {
+      return {
+        scrollTop: window.scrollY || document.documentElement.scrollTop,
+        scrollLeft: window.scrollX || document.documentElement.scrollLeft,
+        visibleWidth: document.documentElement.clientWidth
+      }
+    }
+
+    // 获取元素绝对位置
+    const getAbsolutePos = (element: HTMLElement) => {
+      const rect = element.getBoundingClientRect()
+      return {
+        top: rect.top + getDomNode().scrollTop,
+        left: rect.left + getDomNode().scrollLeft
+      }
+    }
+
+    // 更新提示框位置
+    const updateTipStyle = () => {
+      const { tipTarget, tipStore } = reactData
+      if (tipTarget) {
+        const { scrollTop, scrollLeft, visibleWidth } = getDomNode()
+        const { top, left } = getAbsolutePos(tipTarget)
+        const el = refElem.value
+        if (!el) return
+
+        const marginSize = 6
+        const offsetHeight = el.offsetHeight
+        const offsetWidth = el.offsetWidth
+
+        let tipLeft = left
+        let tipTop = top - offsetHeight - marginSize
+
+        // 水平居中
+        tipLeft = Math.max(
+          marginSize,
+          left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2)
+        )
+
+        // 检查是否超出右边界
+        if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
+          tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize
+        }
+
+        // 检查是否超出上边界，如果超出则显示在底部
+        if (top - offsetHeight < scrollTop + marginSize) {
+          tipStore.placement = 'bottom'
+          tipTop = top + tipTarget.offsetHeight + marginSize
+        }
+
+        tipStore.style.top = `${tipTop}px`
+        tipStore.style.left = `${tipLeft}px`
+        tipStore.arrowStyle = {
+          left: `${left - tipLeft + tipTarget.offsetWidth / 2}px`
+        }
+      }
+    }
+
+    // 更新值
+    const updateValue = (value: boolean) => {
+      if (value !== reactData.visible) {
+        reactData.visible = value
+        reactData.isUpdate = true
+        emit('update:modelValue', value)
+      }
+    }
+
+    // 显示提示框
+    const showTip = () => {
+      const el = refElem.value
+      if (el) {
+        const parentNode = el.parentNode
+        if (!parentNode) {
+          document.body.appendChild(el)
+        }
+      }
+
+      updateValue(true)
+      reactData.tipZindex = 1000 // 简化的 z-index
+      reactData.tipStore.placement = 'top'
+      reactData.tipStore.style = {
+        width: 'auto',
+        left: 0,
+        top: 0,
+        zIndex: reactData.tipZindex
+      }
+      reactData.tipStore.arrowStyle = { left: '50%' }
+
+      return nextTick().then(() => {
+        updateTipStyle()
+        return nextTick().then(() => {
+          updateTipStyle()
+        })
+      })
+    }
+
+    // 处理延迟函数
+    const handleDelayFn = () => {
+      internalData.showDelayTip = debounce(() => {
+        if (reactData.tipActive) {
+          showTip()
+        }
+        //@ts-ignore
+      }, props.enterDelay)
+    }
+
+    // 处理显示逻辑
+    const handleVisible = (target: HTMLElement | null, content?: string | number) => {
+      const contentSlot = slots.content
+      if (!contentSlot && (content === '' || eqNull(content))) {
+        return nextTick()
+      }
+
+      if (target) {
+        const { showDelayTip } = internalData
+        const { trigger, enterDelay } = props
+        reactData.tipActive = true
+        reactData.tipTarget = target
+        //@ts-ignore
+        reactData.tipContent = isNull(content) ? '' : content
+
+        if (enterDelay && trigger === 'hover') {
+          if (showDelayTip) {
+            showDelayTip()
+          }
+        } else {
+          return showTip()
+        }
+      }
+      return nextTick()
+    }
+
+    // 事件处理函数
+    const targetMouseenterEvent = () => {
+      handleVisible(reactData.target, props.content)
+    }
+
+    const targetMouseleaveEvent = () => {
+      const { trigger, enterable, leaveDelay } = props
+      reactData.tipActive = false
+
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            close()
+          }
+        }, leaveDelay)
+      } else {
+        close()
+      }
+    }
+
+    const wrapperMouseenterEvent = () => {
+      reactData.tipActive = true
+    }
+
+    const wrapperMouseleaveEvent = () => {
+      const { trigger, enterable, leaveDelay } = props
+      reactData.tipActive = false
+
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            close()
+          }
+        }, leaveDelay)
+      }
+    }
+
+    const clickEvent = () => {
+      if (reactData.visible) {
+        close()
+      } else {
+        handleVisible(reactData.target, props.content)
+      }
+    }
+
+    // 关闭方法
+    const close = () => {
+      reactData.tipTarget = null
+      reactData.tipActive = false
+      Object.assign(reactData.tipStore, {
+        style: {},
+        placement: '',
+        arrowStyle: null
+      })
+      updateValue(false)
+      return nextTick()
+    }
+
+    // 公开方法
+    const tooltipMethods: TooltipMethods = {
+      open(target?: HTMLElement | null, content?: string | number) {
+        return handleVisible(target || reactData.target, content)
+      },
+      close,
+      updatePlacement() {
+        return nextTick().then(() => {
+          const { tipTarget } = reactData
+          const el = refElem.value
+          if (tipTarget && el) {
+            updateTipStyle()
+            return nextTick().then(() => {
+              updateTipStyle()
+            })
+          }
+        })
+      },
+      isActived() {
+        return reactData.tipActive
+      },
+      setActived(active: boolean) {
+        reactData.tipActive = !!active
+      }
+    }
+
+    // 渲染内容
+    const renderContent = () => {
+      const { tipContent } = reactData
+      const contentSlot = slots.content
+
+      const contVNs: VNode[] = []
+      if (contentSlot) {
+        contVNs.push(
+          h('div', {}, contentSlot({}))
+        )
+      } else {
+        contVNs.push(
+          h('div', {}, `${tipContent}`)
+        )
+      }
+
+      return h('div', {
+        ref: contentWrapperfElem,
+        class: 'vxe-tooltip--content'
+      }, contVNs)
+    }
+
+    // 渲染虚拟节点
+    const renderVN = () => {
+      const { theme, isArrow, enterable } = props
+      const { tipActive, visible, tipStore } = reactData
+      const defaultSlot = slots.default
+
+      let ons
+      if (enterable) {
+        ons = {
+          onMouseenter: wrapperMouseenterEvent,
+          onMouseleave: wrapperMouseleaveEvent
+        }
+      }
+
+      return h('div', {
+        ref: refElem,
+        class: [
+          'vxe-tooltip--wrapper',
+          `theme--${theme}`,
+          {
+            [`placement--${tipStore.placement}`]: tipStore.placement,
+            'is--enterable': enterable,
+            'is--visible': visible,
+            'is--arrow': isArrow,
+            'is--active': tipActive
+          }
+        ],
+        style: {
+          ...tipStore.style,
+          // 添加过渡效果
+          transition: 'opacity 0.2s ease, transform 0.2s ease',
+          opacity: visible ? 1 : 0,
+          transform: visible ? 'scale(1)' : 'scale(0.95)'
+        },
+        ...ons
+      }, [
+        renderContent(),
+        isArrow
+          ? h('div', {
+            class: 'vxe-tooltip--arrow',
+            style: tipStore.arrowStyle
+          })
+          : null,
+        ...(defaultSlot ? defaultSlot({}) : [])
+      ])
+    }
+
+    // 监听器
+    watch(() => props.enterDelay, () => {
+      handleDelayFn()
+    })
+
+    watch(() => props.content, (val) => {
+      //@ts-ignore
+      reactData.tipContent = isNull(val) ? '' : val
+    })
+
+    watch(() => props.modelValue, (val) => {
+      if (!reactData.isUpdate) {
+        if (val) {
+          handleVisible(reactData.target, props.content)
+        } else {
+          close()
+        }
+      }
+      reactData.isUpdate = false
+    })
+
+    // 生命周期钩子
+    onMounted(() => {
+      nextTick(() => {
+        const { trigger, content } = props
+        const wrapperElem = refElem.value
+
+        if (wrapperElem) {
+          const parentNode = wrapperElem.parentNode
+          if (parentNode) {
+            //@ts-ignore
+            reactData.tipContent = isNull(content) ? '' : content
+            reactData.tipZindex = 1000
+
+            // 将子元素移动到父级
+            const children = Array.from(wrapperElem.children)
+            children.forEach((elem, index) => {
+              if (index > 1) {
+                parentNode.insertBefore(elem, wrapperElem)
+                if (!reactData.target) {
+                  reactData.target = elem as HTMLElement
+                }
+              }
+            })
+
+            parentNode.removeChild(wrapperElem)
+
+            // 绑定事件
+            const { target } = reactData
+            if (target) {
+              if (trigger === 'hover') {
+                target.onmouseenter = targetMouseenterEvent
+                target.onmouseleave = targetMouseleaveEvent
+              } else if (trigger === 'click') {
+                target.onclick = clickEvent
+              }
+            }
+
+            // 如果 modelValue 为 true，则显示
+            if (props.modelValue) {
+              handleVisible(target, content)
+            }
+          }
+        }
+      })
+    })
+
+    onBeforeUnmount(() => {
+      const { target } = reactData
+      const wrapperElem = refElem.value
+
+      if (target) {
+        target.onmouseenter = null
+        target.onmouseleave = null
+        target.onclick = null
+      }
+
+      if (wrapperElem) {
+        const parentNode = wrapperElem.parentNode
+        if (parentNode) {
+          parentNode.removeChild(wrapperElem)
+        }
+      }
+    })
+
+    handleDelayFn()
+
+    return {
+      ...tooltipMethods,
+      renderVN
+    }
+  },
+  //@ts-ignore
+  render() {
+    //@ts-ignore
+    return this.renderVN()
+  }
+}

package/src/config/VxeTableConfig.ts

@@ -1,5 +1,6 @@
-import { VxeGrid } from 'vxe-table'
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeGrid,VxeUI } from 'vxe-table'
+//@ts-ignore
+import { VxeTooltip } from '../components/tooltip/index.ts'
 
 import VxeUIPluginRenderElement from '@vxe-ui/plugin-render-element'
 import '@vxe-ui/plugin-render-element/dist/style.css'
@@ -15,15 +16,19 @@ import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
 /**
  * 局部初始化 vxe-table 插件与配置
  */
-export function initVxeTableInPage(enableExcel: boolean = false, enablePdf: boolean = false) {
+export function initVxeTableInPage(
+  enableExcel: boolean = false,
+  enablePdf: boolean = false,
+  enableElementPlus: boolean = true,
+) {
   // 设置语言
   VxeUI.setI18n('zh-CN', zhCN)
   VxeUI.setLanguage('zh-CN')
-
+  VxeUI.component(VxeTooltip)
   // 局部注册插件
-  VxeUI.use(VxeUIPluginRenderElement)
-  if (enableExcel) VxeUI.use(VxeUIPluginExportXLSX, { ExcelJS })
-  if (enablePdf) VxeUI.use(VxeUIPluginExportPDF, { jsPDF })
+  enableElementPlus && VxeUI.use(VxeUIPluginRenderElement)
+  enableExcel && VxeUI.use(VxeUIPluginExportXLSX, { ExcelJS })
+  enablePdf && VxeUI.use(VxeUIPluginExportPDF, { jsPDF })
 
   // 设置表格配置（可复制你在 VxeTableConfig.ts 中的配置）
   VxeUI.setConfig({