@jzt-packages/components 1.0.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@jzt-packages/components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.ts",
+  "keywords": [],
+  "author": "lixiaoli",
+  "license": "ISC",
+  "dependencies": {
+    "@jzt-spd/styles": "workspace:^",
+    "@jzt-spd/utils": "workspace:^",
+    "@types/echarts": "catalog:",
+    "@vueuse/core": "^14.1.0",
+    "echarts": "catalog:",
+    "jsencrypt": "^3.3.2",
+    "lodash-es": "catalog:",
+    "pinia": "catalog:",
+    "sortablejs": "catalog:",
+    "vue": "catalog:",
+    "vue-pdf-embed": "catalog:",
+    "dayjs": "catalog:"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts"
+    },
+    "./jztGrid": {
+      "import": "./src/JztGrid/interface/index.ts",
+      "types": "./src/JztGrid/interface/index.ts"
+    },
+    "./JztTable": {
+      "import": "./src/JztTable/interface/index.ts",
+      "types": "./src/JztTable/interface/index.ts"
+    },
+    "./JztSearchForm": {
+      "import": "./src/JztSearchForm/interface/index.ts",
+      "types": "./src/JztSearchForm/interface/index.ts"
+    },
+    "./JztQueryTable": {
+      "import": "./src/JztQueryTable/interface/index.ts",
+      "types": "./src/JztQueryTable/interface/index.ts"
+    },
+    "./JztFormGrid": {
+      "import": "./src/JztFormGrid/interface/index.ts",
+      "types": "./src/JztFormGrid/interface/index.ts"
+    },
+    "./JztQueryDetailTable": {
+      "import": "./src/JztQueryDetailTable/interface/index.ts",
+      "types": "./src/JztQueryDetailTable/interface/index.ts"
+    },
+    "./JztFilePreview": {
+      "import": "./src/JztFilePreview/interface/index.ts",
+      "types": "./src/JztFilePreview/interface/index.ts"
+    },
+    "./JztProductInfo": {
+      "import": "./src/JztProductInfo/interface/index.ts",
+      "types": "./src/JztProductInfo/interface/index.ts"
+    },
+    "./JztDialog": {
+      "import": "./src/JztDialog/interface/index.ts",
+      "types": "./src/JztDialog/interface/index.ts"
+    },
+    "./JztImportExcel": {
+      "import": "./src/JztImportExcel/interface/index.ts",
+      "types": "./src/JztImportExcel/interface/index.ts"
+    }
+  }
+}

package/src/JztBackTop/index.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts" name="JztBackTop">
+import { JztSvgIcon } from '@jzt-spd/components'
+import { useDraggable } from '@vueuse/core'
+import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
+
+// ==================== 类型定义 ====================
+/**
+ * 回到顶部组件 Props 定义
+ */
+export type Props = {
+  /**
+   * 组件大小
+   * @default 20
+   */
+  size?: number
+  /**
+   * 定位方式
+   * @default fixed
+   */
+  position?: 'absolute' | 'fixed'
+  /**
+   * 容器选择器
+   * @default body
+   */
+  container?: string
+  /**
+   * 滚动容器选择器
+   * @default body
+   */
+  scrollContainer?: string
+  /**
+   * 显示阈值（滚动超过此值显示组件）
+   * @default 0
+   */
+  threshold?: number
+  /**
+   * 初始X坐标
+   * @default 0
+   */
+  x?: number
+  /**
+   * 初始Y坐标
+   * @default 0
+   */
+  y?: number
+  /**
+   * 层级
+   * @default 1999
+   */
+  zIndex?: number
+}
+
+// ==================== Props 与默认值 ====================
+const props = withDefaults(defineProps<Props>(), {
+  size: 20,
+  position: 'fixed',
+  container: 'body',
+  scrollContainer: 'body',
+  threshold: 0,
+  x: 0,
+  y: 0,
+  zIndex: 1999
+})
+
+// ==================== 响应式状态 ====================
+/** 点击阈值（用于判断是拖拽还是点击） */
+const CLICK_THRESHOLD = 5
+let startX = 0
+let startY = 0
+let isClick = false
+
+/** 组件模板引用 */
+const backTopRef = useTemplateRef<HTMLElement>('backTopRef')
+/** 是否显示组件 */
+const isVisible = ref(false)
+/** 容器元素引用 */
+const containerRef = ref<HTMLElement | null>(null)
+/** 滚动容器元素引用 */
+const scrollContainerRef = ref<HTMLElement | null>(null)
+/** 拖拽实例 */
+const draggable = ref<ReturnType<typeof useDraggable>>()
+
+// ==================== 计算属性 ====================
+/**
+ * 组件样式
+ */
+const style = computed(() => {
+  const { size, position, zIndex } = props
+  const { x, y } = draggable.value ?? {}
+  return {
+    width: `${size}px`,
+    height: `${size}px`,
+    left: `${x}px`,
+    top: `${y}px`,
+    position,
+    zIndex
+  }
+})
+
+// ==================== 核心方法 ====================
+/**
+ * 滚动事件处理（计算是否显示组件）
+ */
+const scroll = () => {
+  const scrollEl = scrollContainerRef.value
+  if (scrollEl) {
+    const scrollTop = scrollEl === document.body ? window.scrollY : scrollEl.scrollTop
+    isVisible.value = scrollTop > props.threshold
+  }
+}
+
+/**
+ * 滚动到顶部
+ */
+const scrollToTop = () => {
+  const scrollEl = scrollContainerRef.value
+  if (scrollEl) {
+    if (scrollEl === document.body) {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    } else {
+      scrollEl.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }
+}
+
+/**
+ * 添加滚动监听
+ */
+const addScrollListener = (el: HTMLElement | null) => {
+  if (el === document.body) {
+    window.addEventListener('scroll', scroll)
+  } else {
+    el?.addEventListener('scroll', scroll)
+  }
+}
+
+/**
+ * 移除滚动监听
+ */
+const removeScrollListener = (el: HTMLElement | null) => {
+  if (el === document.body) {
+    window.removeEventListener('scroll', scroll)
+  } else {
+    el?.removeEventListener('scroll', scroll)
+  }
+}
+
+/**
+ * 初始化容器
+ */
+const setupContainer = () => {
+  containerRef.value = document.querySelector(props.container) as HTMLElement | null
+}
+
+/**
+ * 初始化拖拽功能
+ */
+const setupDraggable = () => {
+  const { size } = props
+  const { clientWidth = 0, clientHeight = 0 } = containerRef.value ?? {}
+  draggable.value = useDraggable(backTopRef, {
+    initialValue: () => {
+      let { x, y } = props
+      if (x < 0) {
+        x = clientWidth + x - size
+      }
+      if (y < 0) {
+        y = clientHeight + y - size
+      }
+      return { x, y }
+    },
+    containerElement: () => {
+      return containerRef.value
+    },
+    onStart: position => {
+      scrollContainerRef.value?.style?.setProperty('overflow', 'hidden')
+      isClick = true
+      startX = position.x
+      startY = position.y
+    },
+    onEnd: () => {
+      backTopRef.value?.style.setProperty('cursor', 'pointer')
+      scrollContainerRef.value?.style?.setProperty('overflow', 'auto')
+      if (isClick) {
+        scrollToTop()
+      }
+    },
+    onMove: position => {
+      backTopRef.value?.style.setProperty('cursor', 'move')
+      if (position.x > clientWidth - size) {
+        position.x = clientWidth - size
+      }
+      if (position.y > clientHeight - size) {
+        position.y = clientHeight - size
+      }
+      const distanceX = Math.abs(position.x - startX)
+      const distanceY = Math.abs(position.y - startY)
+      if (distanceX > CLICK_THRESHOLD || distanceY > CLICK_THRESHOLD) {
+        isClick = false
+      }
+    }
+  })
+}
+
+/**
+ * 初始化滚动容器
+ */
+const setupScrollContainer = () => {
+  scrollContainerRef.value = document.querySelector(props.scrollContainer) as HTMLElement | null
+  if (scrollContainerRef.value) {
+    addScrollListener(scrollContainerRef.value)
+  } else {
+    const observer = new MutationObserver(() => {
+      const target = document.querySelector(props.scrollContainer)
+      if (target) {
+        scrollContainerRef.value = target as HTMLElement
+        addScrollListener(scrollContainerRef.value)
+        observer.disconnect()
+      }
+    })
+    observer.observe(containerRef.value as Node, { childList: true })
+  }
+}
+
+// ==================== 生命周期 ====================
+onMounted(async () => {
+  await nextTick()
+  setupContainer()
+  setupDraggable()
+  setupScrollContainer()
+})
+
+onUnmounted(() => {
+  removeScrollListener(scrollContainerRef.value)
+})
+</script>
+
+<template>
+  <transition name="el-fade-in-linear">
+    <div v-show="isVisible" ref="backTopRef" class="back-top" :style="style">
+      <slot>
+        <jzt-svg-icon :icon-style="{ width: '100%', height: '100%', color: '#ffffff' }" name="back-top" />
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss" scoped>
+.back-top {
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+  user-select: none;
+}
+</style>

package/src/JztButtonList/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <!-- <div class="button-list"> -->
+  <template v-for="(item, index) in buttons" :key="index">
+    <component v-if="item?.render" :is="item.render" />
+    <el-badge
+      v-else-if="item?.badgeProps?.show && hasPermission(item.hasPerm) && (item.hideFun ? !item.hideFun() : true)"
+      class="item"
+      v-bind="item.badgeProps"
+      :offset="[-8, 5]"
+    >
+      <el-button
+        class="table-top-btn"
+        :text="false"
+        :type="item.type || 'default'"
+        :loading="item.loading"
+        :icon="item.icon || ''"
+        :plain="item.plain ?? true"
+        :disabled="item.disabledFn && item.disabledFn()"
+        @click="handleButtonClick(item)"
+      >
+        {{ item.text }}
+      </el-button>
+    </el-badge>
+    <!-- </div> -->
+    <el-button
+      v-else-if="hasPermission(item.hasPerm) && (item.hideFun ? !item.hideFun() : true)"
+      class="table-top-btn"
+      :text="false"
+      :type="item.type || 'default'"
+      :loading="item.loading"
+      :icon="item.icon || ''"
+      :plain="item.plain ?? true"
+      :disabled="item.disabledFn && item.disabledFn()"
+      @click="handleButtonClick(item)"
+    >
+      {{ item.text }}
+    </el-button>
+  </template>
+  <slot name="tableHeader"></slot>
+  <!-- </div> -->
+</template>
+
+<script setup lang="ts" name="ProTable">
+import { computed } from 'vue'
+// import { hasPermission } from '../hooks/useAuthButtons'
+import { hasPermission } from '@jzt-spd/utils'
+import { TopButtonProps } from '../JztQueryTable/interface/index'
+
+export interface ProTableProps {
+  buttonList?: TopButtonProps[] // 按钮组list数据
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  buttonList: () => []
+})
+
+const buttons = computed(() => props.buttonList || [])
+
+const emit = defineEmits<{
+  onClick: [any]
+}>()
+
+// 是否显示表格操作按钮
+// const hasPermission = (item: any) => {
+//   const { BUTTONS } = useAuthButtons()
+//   if (!item.hasPerm) return true
+//   return BUTTONS.value[item.hasPerm]
+// }
+// 按钮点击
+const handleButtonClick = (item: TopButtonProps) => {
+  if (item.fun) {
+    emit('onClick', item.fun)
+  }
+}
+// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
+defineExpose({})
+</script>
+<style lang="scss" scoped>
+:deep(.header-button-lf) {
+  .el-button {
+    margin: 4px 8px 4px 0;
+  }
+}
+.el-button {
+  margin: 4px 8px 4px 0;
+}
+</style>

package/src/JztChart/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div ref="chartRef" :style="{ width, height }"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import * as echarts from 'echarts';
+import type { EChartsOption, ECharts } from 'echarts';
+
+export default defineComponent({
+  name: 'JztChart',
+  props: {
+    options: {
+      type: Object as () => EChartsOption,
+      required: true
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    },
+    theme: {
+      type: [String, Object],
+      default: ''
+    },
+    initOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const chartRef = ref<HTMLElement>();
+    let chartInstance: ECharts | null = null;
+    let resizeObserver: ResizeObserver | null = null;
+
+    const initChart = () => {
+      if (!chartRef.value) return;
+      
+      chartInstance = echarts.init(chartRef.value, props.theme, props.initOptions);
+      chartInstance.setOption(props.options);
+    };
+
+    // 添加防抖函数
+    const debounceResize = debounce(() => {
+      chartInstance?.resize();
+    }, 200);
+
+    // 防抖函数实现
+    function debounce(fn: Function, delay: number) {
+      let timer: number | null = null;
+      return function() {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(fn, delay);
+      };
+    }
+
+    onMounted(() => {
+      initChart();
+      
+      // 方式1：使用 window resize 事件（添加防抖）
+      window.addEventListener('resize', debounceResize);
+      
+      // 方式2：使用 ResizeObserver（更推荐）
+      if (chartRef.value) {
+        resizeObserver = new ResizeObserver(debounceResize);
+        resizeObserver.observe(chartRef.value);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      // 清理两种监听方式
+      window.removeEventListener('resize', debounceResize);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
+      chartInstance?.dispose();
+      chartInstance = null;
+    });
+
+    watch(
+      () => props.options,
+      (newOptions) => {
+        chartInstance?.setOption(newOptions);
+      },
+      { deep: true }
+    );
+
+    return { chartRef };
+  }
+});
+</script>