@robot-admin/naive-ui-components 0.8.1 → 0.9.0

package/dist/C_OrgChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_OrgChart.js","names":["node","$emit","collapsible","$slots"],"sources":["../src/components/C_OrgChart/OrgNode.vue","../src/components/C_OrgChart/OrgNode.vue","../src/components/C_OrgChart/OrgNode.vue","../src/components/C_OrgChart/index.vue","../src/components/C_OrgChart/index.vue","../src/components/C_OrgChart/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 递归节点组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div class=\"c-orgchart__node-wrapper\">\r\n    <!-- 节点卡片 -->\r\n    <div\r\n      class=\"c-orgchart__node\"\r\n      :class=\"[node.className, { 'c-orgchart__node--leaf': isLeaf }]\"\r\n      @click.stop=\"$emit('node-click', node)\"\r\n    >\r\n      <slot\r\n        name=\"node\"\r\n        :node=\"node\"\r\n        :is-leaf=\"isLeaf\"\r\n        :is-expanded=\"isExpanded\"\r\n      >\r\n        <!-- 默认节点渲染 -->\r\n        <div class=\"c-orgchart__node-default\">\r\n          <div\r\n            v-if=\"node.avatar\"\r\n            class=\"c-orgchart__avatar\"\r\n          >\r\n            <img\r\n              :src=\"node.avatar\"\r\n              :alt=\"node.label\"\r\n            />\r\n          </div>\r\n          <div class=\"c-orgchart__info\">\r\n            <div class=\"c-orgchart__label\">{{ node.label }}</div>\r\n            <div\r\n              v-if=\"node.subtitle\"\r\n              class=\"c-orgchart__subtitle\"\r\n            >\r\n              {{ node.subtitle }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </slot>\r\n\r\n      <!-- 折叠/展开按钮 -->\r\n      <button\r\n        v-if=\"collapsible && !isLeaf\"\r\n        class=\"c-orgchart__toggle\"\r\n        @click.stop=\"toggleExpand\"\r\n      >\r\n        {{ isExpanded ? '−' : '+' }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- 子节点容器 -->\r\n    <div\r\n      v-if=\"hasChildren && isExpanded\"\r\n      class=\"c-orgchart__children\"\r\n    >\r\n      <OrgNode\r\n        v-for=\"child in node.children\"\r\n        :key=\"child.id\"\r\n        :node=\"child\"\r\n        :collapsible=\"collapsible\"\r\n        @node-click=\"$emit('node-click', $event)\"\r\n        @node-expand=\"$emit('node-expand', $event)\"\r\n        @node-collapse=\"$emit('node-collapse', $event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import type { OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'OrgNode' })\r\n\r\n  const props = defineProps<{\r\n    node: OrgChartNode\r\n    collapsible?: boolean\r\n  }>()\r\n\r\n  defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const isExpanded = ref(!props.node.collapsed)\r\n\r\n  const hasChildren = computed(\r\n    () => props.node.children && props.node.children.length > 0\r\n  )\r\n\r\n  const isLeaf = computed(() => !hasChildren.value)\r\n\r\n  const toggleExpand = () => {\r\n    isExpanded.value = !isExpanded.value\r\n  }\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 递归节点组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div class=\"c-orgchart__node-wrapper\">\r\n    <!-- 节点卡片 -->\r\n    <div\r\n      class=\"c-orgchart__node\"\r\n      :class=\"[node.className, { 'c-orgchart__node--leaf': isLeaf }]\"\r\n      @click.stop=\"$emit('node-click', node)\"\r\n    >\r\n      <slot\r\n        name=\"node\"\r\n        :node=\"node\"\r\n        :is-leaf=\"isLeaf\"\r\n        :is-expanded=\"isExpanded\"\r\n      >\r\n        <!-- 默认节点渲染 -->\r\n        <div class=\"c-orgchart__node-default\">\r\n          <div\r\n            v-if=\"node.avatar\"\r\n            class=\"c-orgchart__avatar\"\r\n          >\r\n            <img\r\n              :src=\"node.avatar\"\r\n              :alt=\"node.label\"\r\n            />\r\n          </div>\r\n          <div class=\"c-orgchart__info\">\r\n            <div class=\"c-orgchart__label\">{{ node.label }}</div>\r\n            <div\r\n              v-if=\"node.subtitle\"\r\n              class=\"c-orgchart__subtitle\"\r\n            >\r\n              {{ node.subtitle }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </slot>\r\n\r\n      <!-- 折叠/展开按钮 -->\r\n      <button\r\n        v-if=\"collapsible && !isLeaf\"\r\n        class=\"c-orgchart__toggle\"\r\n        @click.stop=\"toggleExpand\"\r\n      >\r\n        {{ isExpanded ? '−' : '+' }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- 子节点容器 -->\r\n    <div\r\n      v-if=\"hasChildren && isExpanded\"\r\n      class=\"c-orgchart__children\"\r\n    >\r\n      <OrgNode\r\n        v-for=\"child in node.children\"\r\n        :key=\"child.id\"\r\n        :node=\"child\"\r\n        :collapsible=\"collapsible\"\r\n        @node-click=\"$emit('node-click', $event)\"\r\n        @node-expand=\"$emit('node-expand', $event)\"\r\n        @node-collapse=\"$emit('node-collapse', $event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import type { OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'OrgNode' })\r\n\r\n  const props = defineProps<{\r\n    node: OrgChartNode\r\n    collapsible?: boolean\r\n  }>()\r\n\r\n  defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const isExpanded = ref(!props.node.collapsed)\r\n\r\n  const hasChildren = computed(\r\n    () => props.node.children && props.node.children.length > 0\r\n  )\r\n\r\n  const isLeaf = computed(() => !hasChildren.value)\r\n\r\n  const toggleExpand = () => {\r\n    isExpanded.value = !isExpanded.value\r\n  }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 递归节点组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div class=\"c-orgchart__node-wrapper\">\r\n    <!-- 节点卡片 -->\r\n    <div\r\n      class=\"c-orgchart__node\"\r\n      :class=\"[node.className, { 'c-orgchart__node--leaf': isLeaf }]\"\r\n      @click.stop=\"$emit('node-click', node)\"\r\n    >\r\n      <slot\r\n        name=\"node\"\r\n        :node=\"node\"\r\n        :is-leaf=\"isLeaf\"\r\n        :is-expanded=\"isExpanded\"\r\n      >\r\n        <!-- 默认节点渲染 -->\r\n        <div class=\"c-orgchart__node-default\">\r\n          <div\r\n            v-if=\"node.avatar\"\r\n            class=\"c-orgchart__avatar\"\r\n          >\r\n            <img\r\n              :src=\"node.avatar\"\r\n              :alt=\"node.label\"\r\n            />\r\n          </div>\r\n          <div class=\"c-orgchart__info\">\r\n            <div class=\"c-orgchart__label\">{{ node.label }}</div>\r\n            <div\r\n              v-if=\"node.subtitle\"\r\n              class=\"c-orgchart__subtitle\"\r\n            >\r\n              {{ node.subtitle }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </slot>\r\n\r\n      <!-- 折叠/展开按钮 -->\r\n      <button\r\n        v-if=\"collapsible && !isLeaf\"\r\n        class=\"c-orgchart__toggle\"\r\n        @click.stop=\"toggleExpand\"\r\n      >\r\n        {{ isExpanded ? '−' : '+' }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- 子节点容器 -->\r\n    <div\r\n      v-if=\"hasChildren && isExpanded\"\r\n      class=\"c-orgchart__children\"\r\n    >\r\n      <OrgNode\r\n        v-for=\"child in node.children\"\r\n        :key=\"child.id\"\r\n        :node=\"child\"\r\n        :collapsible=\"collapsible\"\r\n        @node-click=\"$emit('node-click', $event)\"\r\n        @node-expand=\"$emit('node-expand', $event)\"\r\n        @node-collapse=\"$emit('node-collapse', $event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import type { OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'OrgNode' })\r\n\r\n  const props = defineProps<{\r\n    node: OrgChartNode\r\n    collapsible?: boolean\r\n  }>()\r\n\r\n  defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const isExpanded = ref(!props.node.collapsed)\r\n\r\n  const hasChildren = computed(\r\n    () => props.node.children && props.node.children.length > 0\r\n  )\r\n\r\n  const isLeaf = computed(() => !hasChildren.value)\r\n\r\n  const toggleExpand = () => {\r\n    isExpanded.value = !isExpanded.value\r\n  }\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 组织架构图组件\r\n * 纯 CSS + Vue 实现的树形组织架构图，支持缩放/平移/折叠\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-orgchart\"\r\n    :class=\"[\r\n      `c-orgchart--${props.direction}`,\r\n      `c-orgchart--line-${props.lineStyle}`,\r\n    ]\"\r\n    :style=\"cssVars\"\r\n    @wheel.prevent=\"handleWheel\"\r\n    @mousedown=\"handlePanStart\"\r\n    @mousemove=\"handlePanMove\"\r\n    @mouseup=\"handlePanEnd\"\r\n    @mouseleave=\"handlePanEnd\"\r\n  >\r\n    <div\r\n      class=\"c-orgchart__viewport\"\r\n      :style=\"viewportStyle\"\r\n    >\r\n      <OrgNode\r\n        :node=\"props.data\"\r\n        :collapsible=\"props.collapsible\"\r\n        @node-click=\"handleNodeClick\"\r\n        @node-expand=\"handleNodeExpand\"\r\n        @node-collapse=\"handleNodeCollapse\"\r\n      >\r\n        <template\r\n          v-if=\"$slots.node\"\r\n          #node=\"slotProps\"\r\n        >\r\n          <slot\r\n            name=\"node\"\r\n            v-bind=\"slotProps\"\r\n          />\r\n        </template>\r\n      </OrgNode>\r\n    </div>\r\n\r\n    <!-- 缩放控制 -->\r\n    <div\r\n      v-if=\"props.zoomable\"\r\n      class=\"c-orgchart__controls\"\r\n    >\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"放大\"\r\n        @click=\"zoomIn\"\r\n      >\r\n        +\r\n      </button>\r\n      <span class=\"c-orgchart__zoom-level\">{{ zoomPercent }}%</span>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"缩小\"\r\n        @click=\"zoomOut\"\r\n      >\r\n        −\r\n      </button>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"重置\"\r\n        @click=\"resetView\"\r\n      >\r\n        ⟳\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import OrgNode from './OrgNode.vue'\r\n  import type { OrgChartProps, OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'C_OrgChart' })\r\n\r\n  const props = withDefaults(defineProps<OrgChartProps>(), {\r\n    direction: 'vertical',\r\n    lineStyle: 'rounded',\r\n    lineColor: '#d1d5db',\r\n    lineWidth: 2,\r\n    nodeSpacing: 24,\r\n    levelSpacing: 48,\r\n    zoomable: true,\r\n    pannable: true,\r\n    initialZoom: 1,\r\n    minZoom: 0.3,\r\n    maxZoom: 2,\r\n    collapsible: true,\r\n  })\r\n\r\n  const emit = defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const containerRef = ref<HTMLElement | null>(null)\r\n\r\n  // ─── 缩放 & 平移 ───\r\n  const zoom = ref(props.initialZoom)\r\n  const panX = ref(0)\r\n  const panY = ref(0)\r\n  const isPanning = ref(false)\r\n  const panStartX = ref(0)\r\n  const panStartY = ref(0)\r\n\r\n  const zoomPercent = computed(() => Math.round(zoom.value * 100))\r\n\r\n  const cssVars = computed(() => ({\r\n    '--c-orgchart-line-color': props.lineColor,\r\n    '--c-orgchart-line-width': `${props.lineWidth}px`,\r\n    '--c-orgchart-node-spacing': `${props.nodeSpacing}px`,\r\n    '--c-orgchart-level-spacing': `${props.levelSpacing}px`,\r\n  }))\r\n\r\n  const viewportStyle = computed(() => ({\r\n    transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`,\r\n    transformOrigin: 'center top',\r\n  }))\r\n\r\n  /**\r\n   * * @description: 鼠标滚轮缩放\r\n   */\r\n  const handleWheel = (e: WheelEvent) => {\r\n    if (!props.zoomable) return\r\n    const delta = e.deltaY > 0 ? -0.1 : 0.1\r\n    const newZoom = Math.max(\r\n      props.minZoom,\r\n      Math.min(props.maxZoom, zoom.value + delta)\r\n    )\r\n    zoom.value = Math.round(newZoom * 100) / 100\r\n  }\r\n\r\n  const handlePanStart = (e: MouseEvent) => {\r\n    if (!props.pannable) return\r\n    isPanning.value = true\r\n    panStartX.value = e.clientX - panX.value\r\n    panStartY.value = e.clientY - panY.value\r\n  }\r\n\r\n  const handlePanMove = (e: MouseEvent) => {\r\n    if (!isPanning.value) return\r\n    panX.value = e.clientX - panStartX.value\r\n    panY.value = e.clientY - panStartY.value\r\n  }\r\n\r\n  const handlePanEnd = () => {\r\n    isPanning.value = false\r\n  }\r\n\r\n  const zoomIn = () => {\r\n    zoom.value = Math.min(props.maxZoom, zoom.value + 0.1)\r\n  }\r\n\r\n  const zoomOut = () => {\r\n    zoom.value = Math.max(props.minZoom, zoom.value - 0.1)\r\n  }\r\n\r\n  const resetView = () => {\r\n    zoom.value = props.initialZoom\r\n    panX.value = 0\r\n    panY.value = 0\r\n  }\r\n\r\n  // ─── 事件桥接 ───\r\n  const handleNodeClick = (node: OrgChartNode) => emit('node-click', node)\r\n  const handleNodeExpand = (node: OrgChartNode) => emit('node-expand', node)\r\n  const handleNodeCollapse = (node: OrgChartNode) => emit('node-collapse', node)\r\n\r\n  defineExpose({\r\n    zoomIn,\r\n    zoomOut,\r\n    resetView,\r\n    zoom,\r\n  })\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 组织架构图组件\r\n * 纯 CSS + Vue 实现的树形组织架构图，支持缩放/平移/折叠\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-orgchart\"\r\n    :class=\"[\r\n      `c-orgchart--${props.direction}`,\r\n      `c-orgchart--line-${props.lineStyle}`,\r\n    ]\"\r\n    :style=\"cssVars\"\r\n    @wheel.prevent=\"handleWheel\"\r\n    @mousedown=\"handlePanStart\"\r\n    @mousemove=\"handlePanMove\"\r\n    @mouseup=\"handlePanEnd\"\r\n    @mouseleave=\"handlePanEnd\"\r\n  >\r\n    <div\r\n      class=\"c-orgchart__viewport\"\r\n      :style=\"viewportStyle\"\r\n    >\r\n      <OrgNode\r\n        :node=\"props.data\"\r\n        :collapsible=\"props.collapsible\"\r\n        @node-click=\"handleNodeClick\"\r\n        @node-expand=\"handleNodeExpand\"\r\n        @node-collapse=\"handleNodeCollapse\"\r\n      >\r\n        <template\r\n          v-if=\"$slots.node\"\r\n          #node=\"slotProps\"\r\n        >\r\n          <slot\r\n            name=\"node\"\r\n            v-bind=\"slotProps\"\r\n          />\r\n        </template>\r\n      </OrgNode>\r\n    </div>\r\n\r\n    <!-- 缩放控制 -->\r\n    <div\r\n      v-if=\"props.zoomable\"\r\n      class=\"c-orgchart__controls\"\r\n    >\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"放大\"\r\n        @click=\"zoomIn\"\r\n      >\r\n        +\r\n      </button>\r\n      <span class=\"c-orgchart__zoom-level\">{{ zoomPercent }}%</span>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"缩小\"\r\n        @click=\"zoomOut\"\r\n      >\r\n        −\r\n      </button>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"重置\"\r\n        @click=\"resetView\"\r\n      >\r\n        ⟳\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import OrgNode from './OrgNode.vue'\r\n  import type { OrgChartProps, OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'C_OrgChart' })\r\n\r\n  const props = withDefaults(defineProps<OrgChartProps>(), {\r\n    direction: 'vertical',\r\n    lineStyle: 'rounded',\r\n    lineColor: '#d1d5db',\r\n    lineWidth: 2,\r\n    nodeSpacing: 24,\r\n    levelSpacing: 48,\r\n    zoomable: true,\r\n    pannable: true,\r\n    initialZoom: 1,\r\n    minZoom: 0.3,\r\n    maxZoom: 2,\r\n    collapsible: true,\r\n  })\r\n\r\n  const emit = defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const containerRef = ref<HTMLElement | null>(null)\r\n\r\n  // ─── 缩放 & 平移 ───\r\n  const zoom = ref(props.initialZoom)\r\n  const panX = ref(0)\r\n  const panY = ref(0)\r\n  const isPanning = ref(false)\r\n  const panStartX = ref(0)\r\n  const panStartY = ref(0)\r\n\r\n  const zoomPercent = computed(() => Math.round(zoom.value * 100))\r\n\r\n  const cssVars = computed(() => ({\r\n    '--c-orgchart-line-color': props.lineColor,\r\n    '--c-orgchart-line-width': `${props.lineWidth}px`,\r\n    '--c-orgchart-node-spacing': `${props.nodeSpacing}px`,\r\n    '--c-orgchart-level-spacing': `${props.levelSpacing}px`,\r\n  }))\r\n\r\n  const viewportStyle = computed(() => ({\r\n    transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`,\r\n    transformOrigin: 'center top',\r\n  }))\r\n\r\n  /**\r\n   * * @description: 鼠标滚轮缩放\r\n   */\r\n  const handleWheel = (e: WheelEvent) => {\r\n    if (!props.zoomable) return\r\n    const delta = e.deltaY > 0 ? -0.1 : 0.1\r\n    const newZoom = Math.max(\r\n      props.minZoom,\r\n      Math.min(props.maxZoom, zoom.value + delta)\r\n    )\r\n    zoom.value = Math.round(newZoom * 100) / 100\r\n  }\r\n\r\n  const handlePanStart = (e: MouseEvent) => {\r\n    if (!props.pannable) return\r\n    isPanning.value = true\r\n    panStartX.value = e.clientX - panX.value\r\n    panStartY.value = e.clientY - panY.value\r\n  }\r\n\r\n  const handlePanMove = (e: MouseEvent) => {\r\n    if (!isPanning.value) return\r\n    panX.value = e.clientX - panStartX.value\r\n    panY.value = e.clientY - panStartY.value\r\n  }\r\n\r\n  const handlePanEnd = () => {\r\n    isPanning.value = false\r\n  }\r\n\r\n  const zoomIn = () => {\r\n    zoom.value = Math.min(props.maxZoom, zoom.value + 0.1)\r\n  }\r\n\r\n  const zoomOut = () => {\r\n    zoom.value = Math.max(props.minZoom, zoom.value - 0.1)\r\n  }\r\n\r\n  const resetView = () => {\r\n    zoom.value = props.initialZoom\r\n    panX.value = 0\r\n    panY.value = 0\r\n  }\r\n\r\n  // ─── 事件桥接 ───\r\n  const handleNodeClick = (node: OrgChartNode) => emit('node-click', node)\r\n  const handleNodeExpand = (node: OrgChartNode) => emit('node-expand', node)\r\n  const handleNodeCollapse = (node: OrgChartNode) => emit('node-collapse', node)\r\n\r\n  defineExpose({\r\n    zoomIn,\r\n    zoomOut,\r\n    resetView,\r\n    zoom,\r\n  })\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 组织架构图组件\r\n * 纯 CSS + Vue 实现的树形组织架构图，支持缩放/平移/折叠\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-orgchart\"\r\n    :class=\"[\r\n      `c-orgchart--${props.direction}`,\r\n      `c-orgchart--line-${props.lineStyle}`,\r\n    ]\"\r\n    :style=\"cssVars\"\r\n    @wheel.prevent=\"handleWheel\"\r\n    @mousedown=\"handlePanStart\"\r\n    @mousemove=\"handlePanMove\"\r\n    @mouseup=\"handlePanEnd\"\r\n    @mouseleave=\"handlePanEnd\"\r\n  >\r\n    <div\r\n      class=\"c-orgchart__viewport\"\r\n      :style=\"viewportStyle\"\r\n    >\r\n      <OrgNode\r\n        :node=\"props.data\"\r\n        :collapsible=\"props.collapsible\"\r\n        @node-click=\"handleNodeClick\"\r\n        @node-expand=\"handleNodeExpand\"\r\n        @node-collapse=\"handleNodeCollapse\"\r\n      >\r\n        <template\r\n          v-if=\"$slots.node\"\r\n          #node=\"slotProps\"\r\n        >\r\n          <slot\r\n            name=\"node\"\r\n            v-bind=\"slotProps\"\r\n          />\r\n        </template>\r\n      </OrgNode>\r\n    </div>\r\n\r\n    <!-- 缩放控制 -->\r\n    <div\r\n      v-if=\"props.zoomable\"\r\n      class=\"c-orgchart__controls\"\r\n    >\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"放大\"\r\n        @click=\"zoomIn\"\r\n      >\r\n        +\r\n      </button>\r\n      <span class=\"c-orgchart__zoom-level\">{{ zoomPercent }}%</span>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"缩小\"\r\n        @click=\"zoomOut\"\r\n      >\r\n        −\r\n      </button>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"重置\"\r\n        @click=\"resetView\"\r\n      >\r\n        ⟳\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import OrgNode from './OrgNode.vue'\r\n  import type { OrgChartProps, OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'C_OrgChart' })\r\n\r\n  const props = withDefaults(defineProps<OrgChartProps>(), {\r\n    direction: 'vertical',\r\n    lineStyle: 'rounded',\r\n    lineColor: '#d1d5db',\r\n    lineWidth: 2,\r\n    nodeSpacing: 24,\r\n    levelSpacing: 48,\r\n    zoomable: true,\r\n    pannable: true,\r\n    initialZoom: 1,\r\n    minZoom: 0.3,\r\n    maxZoom: 2,\r\n    collapsible: true,\r\n  })\r\n\r\n  const emit = defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const containerRef = ref<HTMLElement | null>(null)\r\n\r\n  // ─── 缩放 & 平移 ───\r\n  const zoom = ref(props.initialZoom)\r\n  const panX = ref(0)\r\n  const panY = ref(0)\r\n  const isPanning = ref(false)\r\n  const panStartX = ref(0)\r\n  const panStartY = ref(0)\r\n\r\n  const zoomPercent = computed(() => Math.round(zoom.value * 100))\r\n\r\n  const cssVars = computed(() => ({\r\n    '--c-orgchart-line-color': props.lineColor,\r\n    '--c-orgchart-line-width': `${props.lineWidth}px`,\r\n    '--c-orgchart-node-spacing': `${props.nodeSpacing}px`,\r\n    '--c-orgchart-level-spacing': `${props.levelSpacing}px`,\r\n  }))\r\n\r\n  const viewportStyle = computed(() => ({\r\n    transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`,\r\n    transformOrigin: 'center top',\r\n  }))\r\n\r\n  /**\r\n   * * @description: 鼠标滚轮缩放\r\n   */\r\n  const handleWheel = (e: WheelEvent) => {\r\n    if (!props.zoomable) return\r\n    const delta = e.deltaY > 0 ? -0.1 : 0.1\r\n    const newZoom = Math.max(\r\n      props.minZoom,\r\n      Math.min(props.maxZoom, zoom.value + delta)\r\n    )\r\n    zoom.value = Math.round(newZoom * 100) / 100\r\n  }\r\n\r\n  const handlePanStart = (e: MouseEvent) => {\r\n    if (!props.pannable) return\r\n    isPanning.value = true\r\n    panStartX.value = e.clientX - panX.value\r\n    panStartY.value = e.clientY - panY.value\r\n  }\r\n\r\n  const handlePanMove = (e: MouseEvent) => {\r\n    if (!isPanning.value) return\r\n    panX.value = e.clientX - panStartX.value\r\n    panY.value = e.clientY - panStartY.value\r\n  }\r\n\r\n  const handlePanEnd = () => {\r\n    isPanning.value = false\r\n  }\r\n\r\n  const zoomIn = () => {\r\n    zoom.value = Math.min(props.maxZoom, zoom.value + 0.1)\r\n  }\r\n\r\n  const zoomOut = () => {\r\n    zoom.value = Math.max(props.minZoom, zoom.value - 0.1)\r\n  }\r\n\r\n  const resetView = () => {\r\n    zoom.value = props.initialZoom\r\n    panX.value = 0\r\n    panY.value = 0\r\n  }\r\n\r\n  // ─── 事件桥接 ───\r\n  const handleNodeClick = (node: OrgChartNode) => emit('node-click', node)\r\n  const handleNodeExpand = (node: OrgChartNode) => emit('node-expand', node)\r\n  const handleNodeCollapse = (node: OrgChartNode) => emit('node-collapse', node)\r\n\r\n  defineExpose({\r\n    zoomIn,\r\n    zoomOut,\r\n    resetView,\r\n    zoom,\r\n  })\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_OrgChart.js","names":[],"sources":["../src/components/C_OrgChart/OrgNode.vue","../src/components/C_OrgChart/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_OrgChart 递归节点组件\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n  <div class=\"c-orgchart__node-wrapper\">\n    <!-- 节点卡片 -->\n    <div\n      class=\"c-orgchart__node\"\n      :class=\"[node.className, { 'c-orgchart__node--leaf': isLeaf }]\"\n      @click.stop=\"$emit('node-click', node)\"\n    >\n      <slot\n        name=\"node\"\n        :node=\"node\"\n        :is-leaf=\"isLeaf\"\n        :is-expanded=\"isExpanded\"\n      >\n        <!-- 默认节点渲染 -->\n        <div class=\"c-orgchart__node-default\">\n          <div\n            v-if=\"node.avatar\"\n            class=\"c-orgchart__avatar\"\n          >\n            <img\n              :src=\"node.avatar\"\n              :alt=\"node.label\"\n            />\n          </div>\n          <div class=\"c-orgchart__info\">\n            <div class=\"c-orgchart__label\">{{ node.label }}</div>\n            <div\n              v-if=\"node.subtitle\"\n              class=\"c-orgchart__subtitle\"\n            >\n              {{ node.subtitle }}\n            </div>\n          </div>\n        </div>\n      </slot>\n\n      <!-- 折叠/展开按钮 -->\n      <button\n        v-if=\"collapsible && !isLeaf\"\n        class=\"c-orgchart__toggle\"\n        @click.stop=\"toggleExpand\"\n      >\n        {{ isExpanded ? '−' : '+' }}\n      </button>\n    </div>\n\n    <!-- 子节点容器 -->\n    <div\n      v-if=\"hasChildren && isExpanded\"\n      class=\"c-orgchart__children\"\n    >\n      <OrgNode\n        v-for=\"child in node.children\"\n        :key=\"child.id\"\n        :node=\"child\"\n        :collapsible=\"collapsible\"\n        @node-click=\"$emit('node-click', $event)\"\n        @node-expand=\"$emit('node-expand', $event)\"\n        @node-collapse=\"$emit('node-collapse', $event)\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, computed } from 'vue'\n  import type { OrgChartNode } from './types'\n\n  defineOptions({ name: 'OrgNode' })\n\n  const props = defineProps<{\n    node: OrgChartNode\n    collapsible?: boolean\n  }>()\n\n  defineEmits<{\n    'node-click': [node: OrgChartNode]\n    'node-expand': [node: OrgChartNode]\n    'node-collapse': [node: OrgChartNode]\n  }>()\n\n  const isExpanded = ref(!props.node.collapsed)\n\n  const hasChildren = computed(\n    () => props.node.children && props.node.children.length > 0\n  )\n\n  const isLeaf = computed(() => !hasChildren.value)\n\n  const toggleExpand = () => {\n    isExpanded.value = !isExpanded.value\n  }\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_OrgChart 组织架构图组件\n * 纯 CSS + Vue 实现的树形组织架构图，支持缩放/平移/折叠\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"c-orgchart\"\n    :class=\"[\n      `c-orgchart--${props.direction}`,\n      `c-orgchart--line-${props.lineStyle}`,\n    ]\"\n    :style=\"cssVars\"\n    @wheel.prevent=\"handleWheel\"\n    @mousedown=\"handlePanStart\"\n    @mousemove=\"handlePanMove\"\n    @mouseup=\"handlePanEnd\"\n    @mouseleave=\"handlePanEnd\"\n  >\n    <div\n      class=\"c-orgchart__viewport\"\n      :style=\"viewportStyle\"\n    >\n      <OrgNode\n        :node=\"props.data\"\n        :collapsible=\"props.collapsible\"\n        @node-click=\"handleNodeClick\"\n        @node-expand=\"handleNodeExpand\"\n        @node-collapse=\"handleNodeCollapse\"\n      >\n        <template\n          v-if=\"$slots.node\"\n          #node=\"slotProps\"\n        >\n          <slot\n            name=\"node\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n      </OrgNode>\n    </div>\n\n    <!-- 缩放控制 -->\n    <div\n      v-if=\"props.zoomable\"\n      class=\"c-orgchart__controls\"\n    >\n      <button\n        class=\"c-orgchart__control-btn\"\n        title=\"放大\"\n        @click=\"zoomIn\"\n      >\n        +\n      </button>\n      <span class=\"c-orgchart__zoom-level\">{{ zoomPercent }}%</span>\n      <button\n        class=\"c-orgchart__control-btn\"\n        title=\"缩小\"\n        @click=\"zoomOut\"\n      >\n        −\n      </button>\n      <button\n        class=\"c-orgchart__control-btn\"\n        title=\"重置\"\n        @click=\"resetView\"\n      >\n        ⟳\n      </button>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, computed } from 'vue'\n  import OrgNode from './OrgNode.vue'\n  import type { OrgChartProps, OrgChartNode } from './types'\n\n  defineOptions({ name: 'C_OrgChart' })\n\n  const props = withDefaults(defineProps<OrgChartProps>(), {\n    direction: 'vertical',\n    lineStyle: 'rounded',\n    lineColor: '#d1d5db',\n    lineWidth: 2,\n    nodeSpacing: 24,\n    levelSpacing: 48,\n    zoomable: true,\n    pannable: true,\n    initialZoom: 1,\n    minZoom: 0.3,\n    maxZoom: 2,\n    collapsible: true,\n  })\n\n  const emit = defineEmits<{\n    'node-click': [node: OrgChartNode]\n    'node-expand': [node: OrgChartNode]\n    'node-collapse': [node: OrgChartNode]\n  }>()\n\n  const containerRef = ref<HTMLElement | null>(null)\n\n  // ─── 缩放 & 平移 ───\n  const zoom = ref(props.initialZoom)\n  const panX = ref(0)\n  const panY = ref(0)\n  const isPanning = ref(false)\n  const panStartX = ref(0)\n  const panStartY = ref(0)\n\n  const zoomPercent = computed(() => Math.round(zoom.value * 100))\n\n  const cssVars = computed(() => ({\n    '--c-orgchart-line-color': props.lineColor,\n    '--c-orgchart-line-width': `${props.lineWidth}px`,\n    '--c-orgchart-node-spacing': `${props.nodeSpacing}px`,\n    '--c-orgchart-level-spacing': `${props.levelSpacing}px`,\n  }))\n\n  const viewportStyle = computed(() => ({\n    transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`,\n    transformOrigin: 'center top',\n  }))\n\n  /**\n   * * @description: 鼠标滚轮缩放\n   */\n  const handleWheel = (e: WheelEvent) => {\n    if (!props.zoomable) return\n    const delta = e.deltaY > 0 ? -0.1 : 0.1\n    const newZoom = Math.max(\n      props.minZoom,\n      Math.min(props.maxZoom, zoom.value + delta)\n    )\n    zoom.value = Math.round(newZoom * 100) / 100\n  }\n\n  const handlePanStart = (e: MouseEvent) => {\n    if (!props.pannable) return\n    isPanning.value = true\n    panStartX.value = e.clientX - panX.value\n    panStartY.value = e.clientY - panY.value\n  }\n\n  const handlePanMove = (e: MouseEvent) => {\n    if (!isPanning.value) return\n    panX.value = e.clientX - panStartX.value\n    panY.value = e.clientY - panStartY.value\n  }\n\n  const handlePanEnd = () => {\n    isPanning.value = false\n  }\n\n  const zoomIn = () => {\n    zoom.value = Math.min(props.maxZoom, zoom.value + 0.1)\n  }\n\n  const zoomOut = () => {\n    zoom.value = Math.max(props.minZoom, zoom.value - 0.1)\n  }\n\n  const resetView = () => {\n    zoom.value = props.initialZoom\n    panX.value = 0\n    panY.value = 0\n  }\n\n  // ─── 事件桥接 ───\n  const handleNodeClick = (node: OrgChartNode) => emit('node-click', node)\n  const handleNodeExpand = (node: OrgChartNode) => emit('node-expand', node)\n  const handleNodeCollapse = (node: OrgChartNode) => emit('node-collapse', node)\n\n  defineExpose({\n    zoomIn,\n    zoomOut,\n    resetView,\n    zoom,\n  })\n</script>\n\n<style lang=\"scss\">\n  @use './index.scss';\n</style>\n"],"mappings":"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"}

package/dist/C_OrgChart2.js

@@ -1,2 +1,2 @@
-import{Fragment as e,computed as t,createBlock as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createSlots as o,createVNode as s,defineComponent as c,guardReactiveProps as l,normalizeClass as u,normalizeProps as d,normalizeStyle as f,openBlock as p,ref as m,renderList as h,renderSlot as g,resolveComponent as _,toDisplayString as v,withCtx as y,withModifiers as b}from"vue";const x={class:`c-orgchart__node-wrapper`},S={class:`c-orgchart__node-default`},C={key:0,class:`c-orgchart__avatar`},w=[`src`,`alt`],T={class:`c-orgchart__info`},E={class:`c-orgchart__label`},D={key:0,class:`c-orgchart__subtitle`},O={key:0,class:`c-orgchart__children`};var k=c({name:`OrgNode`,__name:`OrgNode`,props:{node:{},collapsible:{type:Boolean}},emits:[`node-click`,`node-expand`,`node-collapse`],setup(o){let s=o,c=m(!s.node.collapsed),l=t(()=>s.node.children&&s.node.children.length>0),d=t(()=>!l.value),f=()=>{c.value=!c.value};return(t,o)=>{let s=_(`OrgNode`,!0);return p(),i(`div`,x,[r(` 节点卡片 `),a(`div`,{class:u([`c-orgchart__node`,[t.node.className,{"c-orgchart__node--leaf":d.value}]]),onClick:o[0]||=b(e=>t.$emit(`node-click`,t.node),[`stop`])},[g(t.$slots,`node`,{node:t.node,isLeaf:d.value,isExpanded:c.value},()=>[r(` 默认节点渲染 `),a(`div`,S,[t.node.avatar?(p(),i(`div`,C,[a(`img`,{src:t.node.avatar,alt:t.node.label},null,8,w)])):r(`v-if`,!0),a(`div`,T,[a(`div`,E,v(t.node.label),1),t.node.subtitle?(p(),i(`div`,D,v(t.node.subtitle),1)):r(`v-if`,!0)])])]),r(` 折叠/展开按钮 `),t.collapsible&&!d.value?(p(),i(`button`,{key:0,class:`c-orgchart__toggle`,onClick:b(f,[`stop`])},v(c.value?`−`:`+`),1)):r(`v-if`,!0)],2),r(` 子节点容器 `),l.value&&c.value?(p(),i(`div`,O,[(p(!0),i(e,null,h(t.node.children,e=>(p(),n(s,{key:e.id,node:e,collapsible:t.collapsible,onNodeClick:o[1]||=e=>t.$emit(`node-click`,e),onNodeExpand:o[2]||=e=>t.$emit(`node-expand`,e),onNodeCollapse:o[3]||=e=>t.$emit(`node-collapse`,e)},null,8,[`node`,`collapsible`]))),128))])):r(`v-if`,!0)])}}});const A={key:0,class:`c-orgchart__controls`},j={class:`c-orgchart__zoom-level`};var M=c({name:`C_OrgChart`,__name:`index`,props:{data:{},direction:{default:`vertical`},lineStyle:{default:`rounded`},lineColor:{default:`#d1d5db`},lineWidth:{default:2},nodeSpacing:{default:24},levelSpacing:{default:48},zoomable:{type:Boolean,default:!0},pannable:{type:Boolean,default:!0},initialZoom:{default:1},minZoom:{default:.3},maxZoom:{default:2},collapsible:{type:Boolean,default:!0}},emits:[`node-click`,`node-expand`,`node-collapse`],setup(e,{expose:n,emit:c}){let h=e,_=c,x=m(null),S=m(h.initialZoom),C=m(0),w=m(0),T=m(!1),E=m(0),D=m(0),O=t(()=>Math.round(S.value*100)),M=t(()=>({"--c-orgchart-line-color":h.lineColor,"--c-orgchart-line-width":`${h.lineWidth}px`,"--c-orgchart-node-spacing":`${h.nodeSpacing}px`,"--c-orgchart-level-spacing":`${h.levelSpacing}px`})),N=t(()=>({transform:`translate(${C.value}px, ${w.value}px) scale(${S.value})`,transformOrigin:`center top`})),P=e=>{if(!h.zoomable)return;let t=e.deltaY>0?-.1:.1,n=Math.max(h.minZoom,Math.min(h.maxZoom,S.value+t));S.value=Math.round(n*100)/100},F=e=>{h.pannable&&(T.value=!0,E.value=e.clientX-C.value,D.value=e.clientY-w.value)},I=e=>{T.value&&(C.value=e.clientX-E.value,w.value=e.clientY-D.value)},L=()=>{T.value=!1},R=()=>{S.value=Math.min(h.maxZoom,S.value+.1)},z=()=>{S.value=Math.max(h.minZoom,S.value-.1)},B=()=>{S.value=h.initialZoom,C.value=0,w.value=0},V=e=>_(`node-click`,e),H=e=>_(`node-expand`,e),U=e=>_(`node-collapse`,e);return n({zoomIn:R,zoomOut:z,resetView:B,zoom:S}),(e,t)=>(p(),i(`div`,{ref_key:`containerRef`,ref:x,class:u([`c-orgchart`,[`c-orgchart--${h.direction}`,`c-orgchart--line-${h.lineStyle}`]]),style:f(M.value),onWheel:b(P,[`prevent`]),onMousedown:F,onMousemove:I,onMouseup:L,onMouseleave:L},[a(`div`,{class:`c-orgchart__viewport`,style:f(N.value)},[s(k,{node:h.data,collapsible:h.collapsible,onNodeClick:V,onNodeExpand:H,onNodeCollapse:U},o({_:2},[e.$slots.node?{name:`node`,fn:y(t=>[g(e.$slots,`node`,d(l(t)))]),key:`0`}:void 0]),1032,[`node`,`collapsible`])],4),r(` 缩放控制 `),h.zoomable?(p(),i(`div`,A,[a(`button`,{class:`c-orgchart__control-btn`,title:`放大`,onClick:R},` + `),a(`span`,j,v(O.value)+`%`,1),a(`button`,{class:`c-orgchart__control-btn`,title:`缩小`,onClick:z},` − `),a(`button`,{class:`c-orgchart__control-btn`,title:`重置`,onClick:B},` ⟳ `)])):r(`v-if`,!0)],38))}});export{M as t};
+import{Fragment as e,computed as t,createBlock as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createSlots as o,createVNode as s,defineComponent as c,guardReactiveProps as l,normalizeClass as u,normalizeProps as d,normalizeStyle as f,openBlock as p,ref as m,renderList as h,renderSlot as g,resolveComponent as _,toDisplayString as v,withCtx as y,withModifiers as b}from"vue";const x={class:`c-orgchart__node-wrapper`},S={class:`c-orgchart__node-default`},C={key:0,class:`c-orgchart__avatar`},w=[`src`,`alt`],T={class:`c-orgchart__info`},E={class:`c-orgchart__label`},D={key:0,class:`c-orgchart__subtitle`},O={key:0,class:`c-orgchart__children`},k=c({name:`OrgNode`,__name:`OrgNode`,props:{node:{},collapsible:{type:Boolean}},emits:[`node-click`,`node-expand`,`node-collapse`],setup(o){let s=o,c=m(!s.node.collapsed),l=t(()=>s.node.children&&s.node.children.length>0),d=t(()=>!l.value),f=()=>{c.value=!c.value};return(t,o)=>{let s=_(`OrgNode`,!0);return p(),i(`div`,x,[r(` 节点卡片 `),a(`div`,{class:u([`c-orgchart__node`,[t.node.className,{"c-orgchart__node--leaf":d.value}]]),onClick:o[0]||=b(e=>t.$emit(`node-click`,t.node),[`stop`])},[g(t.$slots,`node`,{node:t.node,isLeaf:d.value,isExpanded:c.value},()=>[r(` 默认节点渲染 `),a(`div`,S,[t.node.avatar?(p(),i(`div`,C,[a(`img`,{src:t.node.avatar,alt:t.node.label},null,8,w)])):r(`v-if`,!0),a(`div`,T,[a(`div`,E,v(t.node.label),1),t.node.subtitle?(p(),i(`div`,D,v(t.node.subtitle),1)):r(`v-if`,!0)])])]),r(` 折叠/展开按钮 `),t.collapsible&&!d.value?(p(),i(`button`,{key:0,class:`c-orgchart__toggle`,onClick:b(f,[`stop`])},v(c.value?`−`:`+`),1)):r(`v-if`,!0)],2),r(` 子节点容器 `),l.value&&c.value?(p(),i(`div`,O,[(p(!0),i(e,null,h(t.node.children,e=>(p(),n(s,{key:e.id,node:e,collapsible:t.collapsible,onNodeClick:o[1]||=e=>t.$emit(`node-click`,e),onNodeExpand:o[2]||=e=>t.$emit(`node-expand`,e),onNodeCollapse:o[3]||=e=>t.$emit(`node-collapse`,e)},null,8,[`node`,`collapsible`]))),128))])):r(`v-if`,!0)])}}}),A={key:0,class:`c-orgchart__controls`},j={class:`c-orgchart__zoom-level`},M=c({name:`C_OrgChart`,__name:`index`,props:{data:{},direction:{default:`vertical`},lineStyle:{default:`rounded`},lineColor:{default:`#d1d5db`},lineWidth:{default:2},nodeSpacing:{default:24},levelSpacing:{default:48},zoomable:{type:Boolean,default:!0},pannable:{type:Boolean,default:!0},initialZoom:{default:1},minZoom:{default:.3},maxZoom:{default:2},collapsible:{type:Boolean,default:!0}},emits:[`node-click`,`node-expand`,`node-collapse`],setup(e,{expose:n,emit:c}){let h=e,_=c,x=m(null),S=m(h.initialZoom),C=m(0),w=m(0),T=m(!1),E=m(0),D=m(0),O=t(()=>Math.round(S.value*100)),M=t(()=>({"--c-orgchart-line-color":h.lineColor,"--c-orgchart-line-width":`${h.lineWidth}px`,"--c-orgchart-node-spacing":`${h.nodeSpacing}px`,"--c-orgchart-level-spacing":`${h.levelSpacing}px`})),N=t(()=>({transform:`translate(${C.value}px, ${w.value}px) scale(${S.value})`,transformOrigin:`center top`})),P=e=>{if(!h.zoomable)return;let t=e.deltaY>0?-.1:.1,n=Math.max(h.minZoom,Math.min(h.maxZoom,S.value+t));S.value=Math.round(n*100)/100},F=e=>{h.pannable&&(T.value=!0,E.value=e.clientX-C.value,D.value=e.clientY-w.value)},I=e=>{T.value&&(C.value=e.clientX-E.value,w.value=e.clientY-D.value)},L=()=>{T.value=!1},R=()=>{S.value=Math.min(h.maxZoom,S.value+.1)},z=()=>{S.value=Math.max(h.minZoom,S.value-.1)},B=()=>{S.value=h.initialZoom,C.value=0,w.value=0},V=e=>_(`node-click`,e),H=e=>_(`node-expand`,e),U=e=>_(`node-collapse`,e);return n({zoomIn:R,zoomOut:z,resetView:B,zoom:S}),(e,t)=>(p(),i(`div`,{ref_key:`containerRef`,ref:x,class:u([`c-orgchart`,[`c-orgchart--${h.direction}`,`c-orgchart--line-${h.lineStyle}`]]),style:f(M.value),onWheel:b(P,[`prevent`]),onMousedown:F,onMousemove:I,onMouseup:L,onMouseleave:L},[a(`div`,{class:`c-orgchart__viewport`,style:f(N.value)},[s(k,{node:h.data,collapsible:h.collapsible,onNodeClick:V,onNodeExpand:H,onNodeCollapse:U},o({_:2},[e.$slots.node?{name:`node`,fn:y(t=>[g(e.$slots,`node`,d(l(t)))]),key:`0`}:void 0]),1032,[`node`,`collapsible`])],4),r(` 缩放控制 `),h.zoomable?(p(),i(`div`,A,[a(`button`,{class:`c-orgchart__control-btn`,title:`放大`,onClick:R},` + `),a(`span`,j,v(O.value)+`%`,1),a(`button`,{class:`c-orgchart__control-btn`,title:`缩小`,onClick:z},` − `),a(`button`,{class:`c-orgchart__control-btn`,title:`重置`,onClick:B},` ⟳ `)])):r(`v-if`,!0)],38))}});export{M as t};
 //# sourceMappingURL=C_OrgChart2.js.map

package/dist/C_OrgChart2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_OrgChart2.js","names":["node","$emit","collapsible","$slots"],"sources":["../src/components/C_OrgChart/OrgNode.vue","../src/components/C_OrgChart/OrgNode.vue","../src/components/C_OrgChart/OrgNode.vue","../src/components/C_OrgChart/index.vue","../src/components/C_OrgChart/index.vue","../src/components/C_OrgChart/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 递归节点组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div class=\"c-orgchart__node-wrapper\">\r\n    <!-- 节点卡片 -->\r\n    <div\r\n      class=\"c-orgchart__node\"\r\n      :class=\"[node.className, { 'c-orgchart__node--leaf': isLeaf }]\"\r\n      @click.stop=\"$emit('node-click', node)\"\r\n    >\r\n      <slot\r\n        name=\"node\"\r\n        :node=\"node\"\r\n        :is-leaf=\"isLeaf\"\r\n        :is-expanded=\"isExpanded\"\r\n      >\r\n        <!-- 默认节点渲染 -->\r\n        <div class=\"c-orgchart__node-default\">\r\n          <div\r\n            v-if=\"node.avatar\"\r\n            class=\"c-orgchart__avatar\"\r\n          >\r\n            <img\r\n              :src=\"node.avatar\"\r\n              :alt=\"node.label\"\r\n            />\r\n          </div>\r\n          <div class=\"c-orgchart__info\">\r\n            <div class=\"c-orgchart__label\">{{ node.label }}</div>\r\n            <div\r\n              v-if=\"node.subtitle\"\r\n              class=\"c-orgchart__subtitle\"\r\n            >\r\n              {{ node.subtitle }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </slot>\r\n\r\n      <!-- 折叠/展开按钮 -->\r\n      <button\r\n        v-if=\"collapsible && !isLeaf\"\r\n        class=\"c-orgchart__toggle\"\r\n        @click.stop=\"toggleExpand\"\r\n      >\r\n        {{ isExpanded ? '−' : '+' }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- 子节点容器 -->\r\n    <div\r\n      v-if=\"hasChildren && isExpanded\"\r\n      class=\"c-orgchart__children\"\r\n    >\r\n      <OrgNode\r\n        v-for=\"child in node.children\"\r\n        :key=\"child.id\"\r\n        :node=\"child\"\r\n        :collapsible=\"collapsible\"\r\n        @node-click=\"$emit('node-click', $event)\"\r\n        @node-expand=\"$emit('node-expand', $event)\"\r\n        @node-collapse=\"$emit('node-collapse', $event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import type { OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'OrgNode' })\r\n\r\n  const props = defineProps<{\r\n    node: OrgChartNode\r\n    collapsible?: boolean\r\n  }>()\r\n\r\n  defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const isExpanded = ref(!props.node.collapsed)\r\n\r\n  const hasChildren = computed(\r\n    () => props.node.children && props.node.children.length > 0\r\n  )\r\n\r\n  const isLeaf = computed(() => !hasChildren.value)\r\n\r\n  const toggleExpand = () => {\r\n    isExpanded.value = !isExpanded.value\r\n  }\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 递归节点组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div class=\"c-orgchart__node-wrapper\">\r\n    <!-- 节点卡片 -->\r\n    <div\r\n      class=\"c-orgchart__node\"\r\n      :class=\"[node.className, { 'c-orgchart__node--leaf': isLeaf }]\"\r\n      @click.stop=\"$emit('node-click', node)\"\r\n    >\r\n      <slot\r\n        name=\"node\"\r\n        :node=\"node\"\r\n        :is-leaf=\"isLeaf\"\r\n        :is-expanded=\"isExpanded\"\r\n      >\r\n        <!-- 默认节点渲染 -->\r\n        <div class=\"c-orgchart__node-default\">\r\n          <div\r\n            v-if=\"node.avatar\"\r\n            class=\"c-orgchart__avatar\"\r\n          >\r\n            <img\r\n              :src=\"node.avatar\"\r\n              :alt=\"node.label\"\r\n            />\r\n          </div>\r\n          <div class=\"c-orgchart__info\">\r\n            <div class=\"c-orgchart__label\">{{ node.label }}</div>\r\n            <div\r\n              v-if=\"node.subtitle\"\r\n              class=\"c-orgchart__subtitle\"\r\n            >\r\n              {{ node.subtitle }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </slot>\r\n\r\n      <!-- 折叠/展开按钮 -->\r\n      <button\r\n        v-if=\"collapsible && !isLeaf\"\r\n        class=\"c-orgchart__toggle\"\r\n        @click.stop=\"toggleExpand\"\r\n      >\r\n        {{ isExpanded ? '−' : '+' }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- 子节点容器 -->\r\n    <div\r\n      v-if=\"hasChildren && isExpanded\"\r\n      class=\"c-orgchart__children\"\r\n    >\r\n      <OrgNode\r\n        v-for=\"child in node.children\"\r\n        :key=\"child.id\"\r\n        :node=\"child\"\r\n        :collapsible=\"collapsible\"\r\n        @node-click=\"$emit('node-click', $event)\"\r\n        @node-expand=\"$emit('node-expand', $event)\"\r\n        @node-collapse=\"$emit('node-collapse', $event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import type { OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'OrgNode' })\r\n\r\n  const props = defineProps<{\r\n    node: OrgChartNode\r\n    collapsible?: boolean\r\n  }>()\r\n\r\n  defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const isExpanded = ref(!props.node.collapsed)\r\n\r\n  const hasChildren = computed(\r\n    () => props.node.children && props.node.children.length > 0\r\n  )\r\n\r\n  const isLeaf = computed(() => !hasChildren.value)\r\n\r\n  const toggleExpand = () => {\r\n    isExpanded.value = !isExpanded.value\r\n  }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 递归节点组件\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div class=\"c-orgchart__node-wrapper\">\r\n    <!-- 节点卡片 -->\r\n    <div\r\n      class=\"c-orgchart__node\"\r\n      :class=\"[node.className, { 'c-orgchart__node--leaf': isLeaf }]\"\r\n      @click.stop=\"$emit('node-click', node)\"\r\n    >\r\n      <slot\r\n        name=\"node\"\r\n        :node=\"node\"\r\n        :is-leaf=\"isLeaf\"\r\n        :is-expanded=\"isExpanded\"\r\n      >\r\n        <!-- 默认节点渲染 -->\r\n        <div class=\"c-orgchart__node-default\">\r\n          <div\r\n            v-if=\"node.avatar\"\r\n            class=\"c-orgchart__avatar\"\r\n          >\r\n            <img\r\n              :src=\"node.avatar\"\r\n              :alt=\"node.label\"\r\n            />\r\n          </div>\r\n          <div class=\"c-orgchart__info\">\r\n            <div class=\"c-orgchart__label\">{{ node.label }}</div>\r\n            <div\r\n              v-if=\"node.subtitle\"\r\n              class=\"c-orgchart__subtitle\"\r\n            >\r\n              {{ node.subtitle }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </slot>\r\n\r\n      <!-- 折叠/展开按钮 -->\r\n      <button\r\n        v-if=\"collapsible && !isLeaf\"\r\n        class=\"c-orgchart__toggle\"\r\n        @click.stop=\"toggleExpand\"\r\n      >\r\n        {{ isExpanded ? '−' : '+' }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- 子节点容器 -->\r\n    <div\r\n      v-if=\"hasChildren && isExpanded\"\r\n      class=\"c-orgchart__children\"\r\n    >\r\n      <OrgNode\r\n        v-for=\"child in node.children\"\r\n        :key=\"child.id\"\r\n        :node=\"child\"\r\n        :collapsible=\"collapsible\"\r\n        @node-click=\"$emit('node-click', $event)\"\r\n        @node-expand=\"$emit('node-expand', $event)\"\r\n        @node-collapse=\"$emit('node-collapse', $event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import type { OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'OrgNode' })\r\n\r\n  const props = defineProps<{\r\n    node: OrgChartNode\r\n    collapsible?: boolean\r\n  }>()\r\n\r\n  defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const isExpanded = ref(!props.node.collapsed)\r\n\r\n  const hasChildren = computed(\r\n    () => props.node.children && props.node.children.length > 0\r\n  )\r\n\r\n  const isLeaf = computed(() => !hasChildren.value)\r\n\r\n  const toggleExpand = () => {\r\n    isExpanded.value = !isExpanded.value\r\n  }\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 组织架构图组件\r\n * 纯 CSS + Vue 实现的树形组织架构图，支持缩放/平移/折叠\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-orgchart\"\r\n    :class=\"[\r\n      `c-orgchart--${props.direction}`,\r\n      `c-orgchart--line-${props.lineStyle}`,\r\n    ]\"\r\n    :style=\"cssVars\"\r\n    @wheel.prevent=\"handleWheel\"\r\n    @mousedown=\"handlePanStart\"\r\n    @mousemove=\"handlePanMove\"\r\n    @mouseup=\"handlePanEnd\"\r\n    @mouseleave=\"handlePanEnd\"\r\n  >\r\n    <div\r\n      class=\"c-orgchart__viewport\"\r\n      :style=\"viewportStyle\"\r\n    >\r\n      <OrgNode\r\n        :node=\"props.data\"\r\n        :collapsible=\"props.collapsible\"\r\n        @node-click=\"handleNodeClick\"\r\n        @node-expand=\"handleNodeExpand\"\r\n        @node-collapse=\"handleNodeCollapse\"\r\n      >\r\n        <template\r\n          v-if=\"$slots.node\"\r\n          #node=\"slotProps\"\r\n        >\r\n          <slot\r\n            name=\"node\"\r\n            v-bind=\"slotProps\"\r\n          />\r\n        </template>\r\n      </OrgNode>\r\n    </div>\r\n\r\n    <!-- 缩放控制 -->\r\n    <div\r\n      v-if=\"props.zoomable\"\r\n      class=\"c-orgchart__controls\"\r\n    >\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"放大\"\r\n        @click=\"zoomIn\"\r\n      >\r\n        +\r\n      </button>\r\n      <span class=\"c-orgchart__zoom-level\">{{ zoomPercent }}%</span>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"缩小\"\r\n        @click=\"zoomOut\"\r\n      >\r\n        −\r\n      </button>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"重置\"\r\n        @click=\"resetView\"\r\n      >\r\n        ⟳\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import OrgNode from './OrgNode.vue'\r\n  import type { OrgChartProps, OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'C_OrgChart' })\r\n\r\n  const props = withDefaults(defineProps<OrgChartProps>(), {\r\n    direction: 'vertical',\r\n    lineStyle: 'rounded',\r\n    lineColor: '#d1d5db',\r\n    lineWidth: 2,\r\n    nodeSpacing: 24,\r\n    levelSpacing: 48,\r\n    zoomable: true,\r\n    pannable: true,\r\n    initialZoom: 1,\r\n    minZoom: 0.3,\r\n    maxZoom: 2,\r\n    collapsible: true,\r\n  })\r\n\r\n  const emit = defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const containerRef = ref<HTMLElement | null>(null)\r\n\r\n  // ─── 缩放 & 平移 ───\r\n  const zoom = ref(props.initialZoom)\r\n  const panX = ref(0)\r\n  const panY = ref(0)\r\n  const isPanning = ref(false)\r\n  const panStartX = ref(0)\r\n  const panStartY = ref(0)\r\n\r\n  const zoomPercent = computed(() => Math.round(zoom.value * 100))\r\n\r\n  const cssVars = computed(() => ({\r\n    '--c-orgchart-line-color': props.lineColor,\r\n    '--c-orgchart-line-width': `${props.lineWidth}px`,\r\n    '--c-orgchart-node-spacing': `${props.nodeSpacing}px`,\r\n    '--c-orgchart-level-spacing': `${props.levelSpacing}px`,\r\n  }))\r\n\r\n  const viewportStyle = computed(() => ({\r\n    transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`,\r\n    transformOrigin: 'center top',\r\n  }))\r\n\r\n  /**\r\n   * * @description: 鼠标滚轮缩放\r\n   */\r\n  const handleWheel = (e: WheelEvent) => {\r\n    if (!props.zoomable) return\r\n    const delta = e.deltaY > 0 ? -0.1 : 0.1\r\n    const newZoom = Math.max(\r\n      props.minZoom,\r\n      Math.min(props.maxZoom, zoom.value + delta)\r\n    )\r\n    zoom.value = Math.round(newZoom * 100) / 100\r\n  }\r\n\r\n  const handlePanStart = (e: MouseEvent) => {\r\n    if (!props.pannable) return\r\n    isPanning.value = true\r\n    panStartX.value = e.clientX - panX.value\r\n    panStartY.value = e.clientY - panY.value\r\n  }\r\n\r\n  const handlePanMove = (e: MouseEvent) => {\r\n    if (!isPanning.value) return\r\n    panX.value = e.clientX - panStartX.value\r\n    panY.value = e.clientY - panStartY.value\r\n  }\r\n\r\n  const handlePanEnd = () => {\r\n    isPanning.value = false\r\n  }\r\n\r\n  const zoomIn = () => {\r\n    zoom.value = Math.min(props.maxZoom, zoom.value + 0.1)\r\n  }\r\n\r\n  const zoomOut = () => {\r\n    zoom.value = Math.max(props.minZoom, zoom.value - 0.1)\r\n  }\r\n\r\n  const resetView = () => {\r\n    zoom.value = props.initialZoom\r\n    panX.value = 0\r\n    panY.value = 0\r\n  }\r\n\r\n  // ─── 事件桥接 ───\r\n  const handleNodeClick = (node: OrgChartNode) => emit('node-click', node)\r\n  const handleNodeExpand = (node: OrgChartNode) => emit('node-expand', node)\r\n  const handleNodeCollapse = (node: OrgChartNode) => emit('node-collapse', node)\r\n\r\n  defineExpose({\r\n    zoomIn,\r\n    zoomOut,\r\n    resetView,\r\n    zoom,\r\n  })\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 组织架构图组件\r\n * 纯 CSS + Vue 实现的树形组织架构图，支持缩放/平移/折叠\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-orgchart\"\r\n    :class=\"[\r\n      `c-orgchart--${props.direction}`,\r\n      `c-orgchart--line-${props.lineStyle}`,\r\n    ]\"\r\n    :style=\"cssVars\"\r\n    @wheel.prevent=\"handleWheel\"\r\n    @mousedown=\"handlePanStart\"\r\n    @mousemove=\"handlePanMove\"\r\n    @mouseup=\"handlePanEnd\"\r\n    @mouseleave=\"handlePanEnd\"\r\n  >\r\n    <div\r\n      class=\"c-orgchart__viewport\"\r\n      :style=\"viewportStyle\"\r\n    >\r\n      <OrgNode\r\n        :node=\"props.data\"\r\n        :collapsible=\"props.collapsible\"\r\n        @node-click=\"handleNodeClick\"\r\n        @node-expand=\"handleNodeExpand\"\r\n        @node-collapse=\"handleNodeCollapse\"\r\n      >\r\n        <template\r\n          v-if=\"$slots.node\"\r\n          #node=\"slotProps\"\r\n        >\r\n          <slot\r\n            name=\"node\"\r\n            v-bind=\"slotProps\"\r\n          />\r\n        </template>\r\n      </OrgNode>\r\n    </div>\r\n\r\n    <!-- 缩放控制 -->\r\n    <div\r\n      v-if=\"props.zoomable\"\r\n      class=\"c-orgchart__controls\"\r\n    >\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"放大\"\r\n        @click=\"zoomIn\"\r\n      >\r\n        +\r\n      </button>\r\n      <span class=\"c-orgchart__zoom-level\">{{ zoomPercent }}%</span>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"缩小\"\r\n        @click=\"zoomOut\"\r\n      >\r\n        −\r\n      </button>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"重置\"\r\n        @click=\"resetView\"\r\n      >\r\n        ⟳\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import OrgNode from './OrgNode.vue'\r\n  import type { OrgChartProps, OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'C_OrgChart' })\r\n\r\n  const props = withDefaults(defineProps<OrgChartProps>(), {\r\n    direction: 'vertical',\r\n    lineStyle: 'rounded',\r\n    lineColor: '#d1d5db',\r\n    lineWidth: 2,\r\n    nodeSpacing: 24,\r\n    levelSpacing: 48,\r\n    zoomable: true,\r\n    pannable: true,\r\n    initialZoom: 1,\r\n    minZoom: 0.3,\r\n    maxZoom: 2,\r\n    collapsible: true,\r\n  })\r\n\r\n  const emit = defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const containerRef = ref<HTMLElement | null>(null)\r\n\r\n  // ─── 缩放 & 平移 ───\r\n  const zoom = ref(props.initialZoom)\r\n  const panX = ref(0)\r\n  const panY = ref(0)\r\n  const isPanning = ref(false)\r\n  const panStartX = ref(0)\r\n  const panStartY = ref(0)\r\n\r\n  const zoomPercent = computed(() => Math.round(zoom.value * 100))\r\n\r\n  const cssVars = computed(() => ({\r\n    '--c-orgchart-line-color': props.lineColor,\r\n    '--c-orgchart-line-width': `${props.lineWidth}px`,\r\n    '--c-orgchart-node-spacing': `${props.nodeSpacing}px`,\r\n    '--c-orgchart-level-spacing': `${props.levelSpacing}px`,\r\n  }))\r\n\r\n  const viewportStyle = computed(() => ({\r\n    transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`,\r\n    transformOrigin: 'center top',\r\n  }))\r\n\r\n  /**\r\n   * * @description: 鼠标滚轮缩放\r\n   */\r\n  const handleWheel = (e: WheelEvent) => {\r\n    if (!props.zoomable) return\r\n    const delta = e.deltaY > 0 ? -0.1 : 0.1\r\n    const newZoom = Math.max(\r\n      props.minZoom,\r\n      Math.min(props.maxZoom, zoom.value + delta)\r\n    )\r\n    zoom.value = Math.round(newZoom * 100) / 100\r\n  }\r\n\r\n  const handlePanStart = (e: MouseEvent) => {\r\n    if (!props.pannable) return\r\n    isPanning.value = true\r\n    panStartX.value = e.clientX - panX.value\r\n    panStartY.value = e.clientY - panY.value\r\n  }\r\n\r\n  const handlePanMove = (e: MouseEvent) => {\r\n    if (!isPanning.value) return\r\n    panX.value = e.clientX - panStartX.value\r\n    panY.value = e.clientY - panStartY.value\r\n  }\r\n\r\n  const handlePanEnd = () => {\r\n    isPanning.value = false\r\n  }\r\n\r\n  const zoomIn = () => {\r\n    zoom.value = Math.min(props.maxZoom, zoom.value + 0.1)\r\n  }\r\n\r\n  const zoomOut = () => {\r\n    zoom.value = Math.max(props.minZoom, zoom.value - 0.1)\r\n  }\r\n\r\n  const resetView = () => {\r\n    zoom.value = props.initialZoom\r\n    panX.value = 0\r\n    panY.value = 0\r\n  }\r\n\r\n  // ─── 事件桥接 ───\r\n  const handleNodeClick = (node: OrgChartNode) => emit('node-click', node)\r\n  const handleNodeExpand = (node: OrgChartNode) => emit('node-expand', node)\r\n  const handleNodeCollapse = (node: OrgChartNode) => emit('node-collapse', node)\r\n\r\n  defineExpose({\r\n    zoomIn,\r\n    zoomOut,\r\n    resetView,\r\n    zoom,\r\n  })\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_OrgChart 组织架构图组件\r\n * 纯 CSS + Vue 实现的树形组织架构图，支持缩放/平移/折叠\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-orgchart\"\r\n    :class=\"[\r\n      `c-orgchart--${props.direction}`,\r\n      `c-orgchart--line-${props.lineStyle}`,\r\n    ]\"\r\n    :style=\"cssVars\"\r\n    @wheel.prevent=\"handleWheel\"\r\n    @mousedown=\"handlePanStart\"\r\n    @mousemove=\"handlePanMove\"\r\n    @mouseup=\"handlePanEnd\"\r\n    @mouseleave=\"handlePanEnd\"\r\n  >\r\n    <div\r\n      class=\"c-orgchart__viewport\"\r\n      :style=\"viewportStyle\"\r\n    >\r\n      <OrgNode\r\n        :node=\"props.data\"\r\n        :collapsible=\"props.collapsible\"\r\n        @node-click=\"handleNodeClick\"\r\n        @node-expand=\"handleNodeExpand\"\r\n        @node-collapse=\"handleNodeCollapse\"\r\n      >\r\n        <template\r\n          v-if=\"$slots.node\"\r\n          #node=\"slotProps\"\r\n        >\r\n          <slot\r\n            name=\"node\"\r\n            v-bind=\"slotProps\"\r\n          />\r\n        </template>\r\n      </OrgNode>\r\n    </div>\r\n\r\n    <!-- 缩放控制 -->\r\n    <div\r\n      v-if=\"props.zoomable\"\r\n      class=\"c-orgchart__controls\"\r\n    >\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"放大\"\r\n        @click=\"zoomIn\"\r\n      >\r\n        +\r\n      </button>\r\n      <span class=\"c-orgchart__zoom-level\">{{ zoomPercent }}%</span>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"缩小\"\r\n        @click=\"zoomOut\"\r\n      >\r\n        −\r\n      </button>\r\n      <button\r\n        class=\"c-orgchart__control-btn\"\r\n        title=\"重置\"\r\n        @click=\"resetView\"\r\n      >\r\n        ⟳\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed } from 'vue'\r\n  import OrgNode from './OrgNode.vue'\r\n  import type { OrgChartProps, OrgChartNode } from './types'\r\n\r\n  defineOptions({ name: 'C_OrgChart' })\r\n\r\n  const props = withDefaults(defineProps<OrgChartProps>(), {\r\n    direction: 'vertical',\r\n    lineStyle: 'rounded',\r\n    lineColor: '#d1d5db',\r\n    lineWidth: 2,\r\n    nodeSpacing: 24,\r\n    levelSpacing: 48,\r\n    zoomable: true,\r\n    pannable: true,\r\n    initialZoom: 1,\r\n    minZoom: 0.3,\r\n    maxZoom: 2,\r\n    collapsible: true,\r\n  })\r\n\r\n  const emit = defineEmits<{\r\n    'node-click': [node: OrgChartNode]\r\n    'node-expand': [node: OrgChartNode]\r\n    'node-collapse': [node: OrgChartNode]\r\n  }>()\r\n\r\n  const containerRef = ref<HTMLElement | null>(null)\r\n\r\n  // ─── 缩放 & 平移 ───\r\n  const zoom = ref(props.initialZoom)\r\n  const panX = ref(0)\r\n  const panY = ref(0)\r\n  const isPanning = ref(false)\r\n  const panStartX = ref(0)\r\n  const panStartY = ref(0)\r\n\r\n  const zoomPercent = computed(() => Math.round(zoom.value * 100))\r\n\r\n  const cssVars = computed(() => ({\r\n    '--c-orgchart-line-color': props.lineColor,\r\n    '--c-orgchart-line-width': `${props.lineWidth}px`,\r\n    '--c-orgchart-node-spacing': `${props.nodeSpacing}px`,\r\n    '--c-orgchart-level-spacing': `${props.levelSpacing}px`,\r\n  }))\r\n\r\n  const viewportStyle = computed(() => ({\r\n    transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`,\r\n    transformOrigin: 'center top',\r\n  }))\r\n\r\n  /**\r\n   * * @description: 鼠标滚轮缩放\r\n   */\r\n  const handleWheel = (e: WheelEvent) => {\r\n    if (!props.zoomable) return\r\n    const delta = e.deltaY > 0 ? -0.1 : 0.1\r\n    const newZoom = Math.max(\r\n      props.minZoom,\r\n      Math.min(props.maxZoom, zoom.value + delta)\r\n    )\r\n    zoom.value = Math.round(newZoom * 100) / 100\r\n  }\r\n\r\n  const handlePanStart = (e: MouseEvent) => {\r\n    if (!props.pannable) return\r\n    isPanning.value = true\r\n    panStartX.value = e.clientX - panX.value\r\n    panStartY.value = e.clientY - panY.value\r\n  }\r\n\r\n  const handlePanMove = (e: MouseEvent) => {\r\n    if (!isPanning.value) return\r\n    panX.value = e.clientX - panStartX.value\r\n    panY.value = e.clientY - panStartY.value\r\n  }\r\n\r\n  const handlePanEnd = () => {\r\n    isPanning.value = false\r\n  }\r\n\r\n  const zoomIn = () => {\r\n    zoom.value = Math.min(props.maxZoom, zoom.value + 0.1)\r\n  }\r\n\r\n  const zoomOut = () => {\r\n    zoom.value = Math.max(props.minZoom, zoom.value - 0.1)\r\n  }\r\n\r\n  const resetView = () => {\r\n    zoom.value = props.initialZoom\r\n    panX.value = 0\r\n    panY.value = 0\r\n  }\r\n\r\n  // ─── 事件桥接 ───\r\n  const handleNodeClick = (node: OrgChartNode) => emit('node-click', node)\r\n  const handleNodeExpand = (node: OrgChartNode) => emit('node-expand', node)\r\n  const handleNodeCollapse = (node: OrgChartNode) => emit('node-collapse', node)\r\n\r\n  defineExpose({\r\n    zoomIn,\r\n    zoomOut,\r\n    resetView,\r\n    zoom,\r\n  })\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_OrgChart2.js","names":[],"sources":["../src/components/C_OrgChart/OrgNode.vue","../src/components/C_OrgChart/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_OrgChart 递归节点组件\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n  <div class=\"c-orgchart__node-wrapper\">\n    <!-- 节点卡片 -->\n    <div\n      class=\"c-orgchart__node\"\n      :class=\"[node.className, { 'c-orgchart__node--leaf': isLeaf }]\"\n      @click.stop=\"$emit('node-click', node)\"\n    >\n      <slot\n        name=\"node\"\n        :node=\"node\"\n        :is-leaf=\"isLeaf\"\n        :is-expanded=\"isExpanded\"\n      >\n        <!-- 默认节点渲染 -->\n        <div class=\"c-orgchart__node-default\">\n          <div\n            v-if=\"node.avatar\"\n            class=\"c-orgchart__avatar\"\n          >\n            <img\n              :src=\"node.avatar\"\n              :alt=\"node.label\"\n            />\n          </div>\n          <div class=\"c-orgchart__info\">\n            <div class=\"c-orgchart__label\">{{ node.label }}</div>\n            <div\n              v-if=\"node.subtitle\"\n              class=\"c-orgchart__subtitle\"\n            >\n              {{ node.subtitle }}\n            </div>\n          </div>\n        </div>\n      </slot>\n\n      <!-- 折叠/展开按钮 -->\n      <button\n        v-if=\"collapsible && !isLeaf\"\n        class=\"c-orgchart__toggle\"\n        @click.stop=\"toggleExpand\"\n      >\n        {{ isExpanded ? '−' : '+' }}\n      </button>\n    </div>\n\n    <!-- 子节点容器 -->\n    <div\n      v-if=\"hasChildren && isExpanded\"\n      class=\"c-orgchart__children\"\n    >\n      <OrgNode\n        v-for=\"child in node.children\"\n        :key=\"child.id\"\n        :node=\"child\"\n        :collapsible=\"collapsible\"\n        @node-click=\"$emit('node-click', $event)\"\n        @node-expand=\"$emit('node-expand', $event)\"\n        @node-collapse=\"$emit('node-collapse', $event)\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, computed } from 'vue'\n  import type { OrgChartNode } from './types'\n\n  defineOptions({ name: 'OrgNode' })\n\n  const props = defineProps<{\n    node: OrgChartNode\n    collapsible?: boolean\n  }>()\n\n  defineEmits<{\n    'node-click': [node: OrgChartNode]\n    'node-expand': [node: OrgChartNode]\n    'node-collapse': [node: OrgChartNode]\n  }>()\n\n  const isExpanded = ref(!props.node.collapsed)\n\n  const hasChildren = computed(\n    () => props.node.children && props.node.children.length > 0\n  )\n\n  const isLeaf = computed(() => !hasChildren.value)\n\n  const toggleExpand = () => {\n    isExpanded.value = !isExpanded.value\n  }\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_OrgChart 组织架构图组件\n * 纯 CSS + Vue 实现的树形组织架构图，支持缩放/平移/折叠\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"c-orgchart\"\n    :class=\"[\n      `c-orgchart--${props.direction}`,\n      `c-orgchart--line-${props.lineStyle}`,\n    ]\"\n    :style=\"cssVars\"\n    @wheel.prevent=\"handleWheel\"\n    @mousedown=\"handlePanStart\"\n    @mousemove=\"handlePanMove\"\n    @mouseup=\"handlePanEnd\"\n    @mouseleave=\"handlePanEnd\"\n  >\n    <div\n      class=\"c-orgchart__viewport\"\n      :style=\"viewportStyle\"\n    >\n      <OrgNode\n        :node=\"props.data\"\n        :collapsible=\"props.collapsible\"\n        @node-click=\"handleNodeClick\"\n        @node-expand=\"handleNodeExpand\"\n        @node-collapse=\"handleNodeCollapse\"\n      >\n        <template\n          v-if=\"$slots.node\"\n          #node=\"slotProps\"\n        >\n          <slot\n            name=\"node\"\n            v-bind=\"slotProps\"\n          />\n        </template>\n      </OrgNode>\n    </div>\n\n    <!-- 缩放控制 -->\n    <div\n      v-if=\"props.zoomable\"\n      class=\"c-orgchart__controls\"\n    >\n      <button\n        class=\"c-orgchart__control-btn\"\n        title=\"放大\"\n        @click=\"zoomIn\"\n      >\n        +\n      </button>\n      <span class=\"c-orgchart__zoom-level\">{{ zoomPercent }}%</span>\n      <button\n        class=\"c-orgchart__control-btn\"\n        title=\"缩小\"\n        @click=\"zoomOut\"\n      >\n        −\n      </button>\n      <button\n        class=\"c-orgchart__control-btn\"\n        title=\"重置\"\n        @click=\"resetView\"\n      >\n        ⟳\n      </button>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, computed } from 'vue'\n  import OrgNode from './OrgNode.vue'\n  import type { OrgChartProps, OrgChartNode } from './types'\n\n  defineOptions({ name: 'C_OrgChart' })\n\n  const props = withDefaults(defineProps<OrgChartProps>(), {\n    direction: 'vertical',\n    lineStyle: 'rounded',\n    lineColor: '#d1d5db',\n    lineWidth: 2,\n    nodeSpacing: 24,\n    levelSpacing: 48,\n    zoomable: true,\n    pannable: true,\n    initialZoom: 1,\n    minZoom: 0.3,\n    maxZoom: 2,\n    collapsible: true,\n  })\n\n  const emit = defineEmits<{\n    'node-click': [node: OrgChartNode]\n    'node-expand': [node: OrgChartNode]\n    'node-collapse': [node: OrgChartNode]\n  }>()\n\n  const containerRef = ref<HTMLElement | null>(null)\n\n  // ─── 缩放 & 平移 ───\n  const zoom = ref(props.initialZoom)\n  const panX = ref(0)\n  const panY = ref(0)\n  const isPanning = ref(false)\n  const panStartX = ref(0)\n  const panStartY = ref(0)\n\n  const zoomPercent = computed(() => Math.round(zoom.value * 100))\n\n  const cssVars = computed(() => ({\n    '--c-orgchart-line-color': props.lineColor,\n    '--c-orgchart-line-width': `${props.lineWidth}px`,\n    '--c-orgchart-node-spacing': `${props.nodeSpacing}px`,\n    '--c-orgchart-level-spacing': `${props.levelSpacing}px`,\n  }))\n\n  const viewportStyle = computed(() => ({\n    transform: `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`,\n    transformOrigin: 'center top',\n  }))\n\n  /**\n   * * @description: 鼠标滚轮缩放\n   */\n  const handleWheel = (e: WheelEvent) => {\n    if (!props.zoomable) return\n    const delta = e.deltaY > 0 ? -0.1 : 0.1\n    const newZoom = Math.max(\n      props.minZoom,\n      Math.min(props.maxZoom, zoom.value + delta)\n    )\n    zoom.value = Math.round(newZoom * 100) / 100\n  }\n\n  const handlePanStart = (e: MouseEvent) => {\n    if (!props.pannable) return\n    isPanning.value = true\n    panStartX.value = e.clientX - panX.value\n    panStartY.value = e.clientY - panY.value\n  }\n\n  const handlePanMove = (e: MouseEvent) => {\n    if (!isPanning.value) return\n    panX.value = e.clientX - panStartX.value\n    panY.value = e.clientY - panStartY.value\n  }\n\n  const handlePanEnd = () => {\n    isPanning.value = false\n  }\n\n  const zoomIn = () => {\n    zoom.value = Math.min(props.maxZoom, zoom.value + 0.1)\n  }\n\n  const zoomOut = () => {\n    zoom.value = Math.max(props.minZoom, zoom.value - 0.1)\n  }\n\n  const resetView = () => {\n    zoom.value = props.initialZoom\n    panX.value = 0\n    panY.value = 0\n  }\n\n  // ─── 事件桥接 ───\n  const handleNodeClick = (node: OrgChartNode) => emit('node-click', node)\n  const handleNodeExpand = (node: OrgChartNode) => emit('node-expand', node)\n  const handleNodeCollapse = (node: OrgChartNode) => emit('node-collapse', node)\n\n  defineExpose({\n    zoomIn,\n    zoomOut,\n    resetView,\n    zoom,\n  })\n</script>\n\n<style lang=\"scss\">\n  @use './index.scss';\n</style>\n"],"mappings":"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"}

package/dist/C_Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Progress.js","names":["isAnimation","showIndicator"],"sources":["../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 进度条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 进度条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 进度条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n"],"mappings":"iiBEmDA,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,KACJ,MAAM,QAAQ,EAAM,WAAW,CAAG,CAAC,GAAG,EAAM,WAAW,CAAG,EAC3D,CAEK,GAAA,EAAA,EAAA,cAAkC,CAAC,CAAC,EAAM,UAAU,CAEpD,GAAA,EAAA,EAAA,cACG,EAAM,OAAS,kBAClB,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MACF,CAAC,EAAE,MAAM,CACX,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MAAM,GACR,EAAE,MACR,CAEI,GAAA,EAAA,EAAA,eAAgC,CACpC,KAAM,EAAM,KACZ,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,MAAO,EAAM,MACb,iBAAkB,EAAM,iBACxB,UAAW,EAAM,UACjB,gBAAiB,EAAM,gBACvB,OAAQ,EAAM,OACd,mBAAoB,EAAM,mBAC1B,mBAAoB,EAAM,mBAC1B,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,UAAW,EAAM,UACjB,OAAQ,EAAM,OACd,YAAa,EAAM,YACnB,KAAM,EAAM,KACb,EAAE,QAEH,EAAA,EAAA,WACQ,EAAM,WACX,GAAW,CACL,EAAM,YAEA,EAAM,OAAS,mBAAqB,MAAM,QAAQ,EAAO,GAClE,EAAE,MAAQ,CAAC,GAAG,EAAO,EAFrB,EAAE,MAAQ,GAKd,CAAE,UAAW,GAAM,KAAM,GAAM,CAChC,EAED,EAAA,EAAA,eAAgB,CACd,GAAI,EAAM,aAAe,EAAM,OAAS,kBAAmB,CACzD,IAAM,EAAc,MAAM,QAAQ,EAAM,WAAW,CAC/C,EAAM,WAAW,GACjB,EAAM,WAEV,GAAI,EAAc,EAAG,CACnB,IAAM,EAAY,YAAY,KAAK,CAE7B,EAAW,GAAgB,CAC/B,IAAM,EAAU,EAAM,EAChB,EAAW,KAAK,IAAI,EAAU,EAAM,KAAM,EAAE,CAClD,EAAE,MAAQ,KAAK,MAAM,EAAW,EAAY,CAExC,EAAW,GACb,sBAAsB,EAAQ,EAIlC,sBAAsB,EAAQ,IAGlC,yDApHY,EAAA,UAAA,EAAA,EAAA,EAAA,YAPF,EAOE,MAPW,CACpB,WAAY,EAAA,MACZ,WAAYA,EAAAA,uCAEGC,EAAAA,eAAiB,EAAA,MAAA,MAAmB,+BACzB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,YAAA,CAAA,CAAA"}
+{"version":3,"file":"C_Progress.js","names":[],"sources":["../src/components/C_Progress/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 进度条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n"],"mappings":"miBAmDA,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,KACJ,MAAM,QAAQ,EAAM,WAAW,CAAG,CAAC,GAAG,EAAM,WAAW,CAAG,EAC3D,CAEK,GAAA,EAAA,EAAA,cAAkC,CAAC,CAAC,EAAM,UAAU,CAEpD,GAAA,EAAA,EAAA,cACG,EAAM,OAAS,kBAClB,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MACF,CAAC,EAAE,MAAM,CACX,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MAAM,GACR,EAAE,MACR,CAEI,GAAA,EAAA,EAAA,eAAgC,CACpC,KAAM,EAAM,KACZ,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,MAAO,EAAM,MACb,iBAAkB,EAAM,iBACxB,UAAW,EAAM,UACjB,gBAAiB,EAAM,gBACvB,OAAQ,EAAM,OACd,mBAAoB,EAAM,mBAC1B,mBAAoB,EAAM,mBAC1B,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,UAAW,EAAM,UACjB,OAAQ,EAAM,OACd,YAAa,EAAM,YACnB,KAAM,EAAM,KACb,EAAE,QAEH,EAAA,EAAA,WACQ,EAAM,WACX,GAAW,CACL,EAAM,YAEA,EAAM,OAAS,mBAAqB,MAAM,QAAQ,EAAO,GAClE,EAAE,MAAQ,CAAC,GAAG,EAAO,EAFrB,EAAE,MAAQ,GAKd,CAAE,UAAW,GAAM,KAAM,GAAM,CAChC,EAED,EAAA,EAAA,eAAgB,CACd,GAAI,EAAM,aAAe,EAAM,OAAS,kBAAmB,CACzD,IAAM,EAAc,MAAM,QAAQ,EAAM,WAAW,CAC/C,EAAM,WAAW,GACjB,EAAM,WAEV,GAAI,EAAc,EAAG,CACnB,IAAM,EAAY,YAAY,KAAK,CAE7B,EAAW,GAAgB,CAC/B,IAAM,EAAU,EAAM,EAChB,EAAW,KAAK,IAAI,EAAU,EAAM,KAAM,EAAE,CAClD,EAAE,MAAQ,KAAK,MAAM,EAAW,EAAY,CAExC,EAAW,GACb,sBAAsB,EAAQ,EAIlC,sBAAsB,EAAQ,IAGlC,yDApHY,EAAA,UAAA,EAAA,EAAA,EAAA,YAPF,EAOE,MAPW,CACpB,WAAY,EAAA,MACZ,WAAY,EAAA,uCAEG,EAAA,eAAiB,EAAA,MAAA,MAAmB,+BACzB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,YAAA,CAAA,CAAA"}

package/dist/C_Progress2.js

@@ -1,2 +1,2 @@
-import{NProgress as e}from"naive-ui";import{computed as t,createBlock as n,createSlots as r,defineComponent as i,mergeProps as a,onMounted as o,openBlock as s,ref as c,renderSlot as l,unref as u,useSlots as d,watch as f,withCtx as p}from"vue";var m=i({name:`C_Progress`,__name:`index`,props:{percentage:{default:0},isAnimation:{type:Boolean,default:!1},time:{default:3e3},type:{},borderRadius:{},circleGap:{},color:{},fillBorderRadius:{},gapDegree:{},gapOffsetDegree:{},height:{},indicatorPlacement:{default:`outside`},indicatorTextColor:{},offsetDegree:{},railColor:{},railStyle:{},showIndicator:{type:Boolean,default:!0},status:{default:`default`},strokeWidth:{default:7},unit:{default:`%`}},setup(i){let m=i,h=d(),g=c(Array.isArray(m.percentage)?[...m.percentage]:0),_=t(()=>!!h.indicator),v=t(()=>m.type===`multiple-circle`?Array.isArray(g.value)?g.value:[g.value]:Array.isArray(g.value)?g.value[0]:g.value),y=t(()=>({type:m.type,borderRadius:m.borderRadius,circleGap:m.circleGap,color:m.color,fillBorderRadius:m.fillBorderRadius,gapDegree:m.gapDegree,gapOffsetDegree:m.gapOffsetDegree,height:m.height,indicatorPlacement:m.indicatorPlacement,indicatorTextColor:m.indicatorTextColor,offsetDegree:m.offsetDegree,railColor:m.railColor,railStyle:m.railStyle,status:m.status,strokeWidth:m.strokeWidth,unit:m.unit}));return f(()=>m.percentage,e=>{m.isAnimation?m.type===`multiple-circle`&&Array.isArray(e)&&(g.value=[...e]):g.value=e},{immediate:!0,deep:!0}),o(()=>{if(m.isAnimation&&m.type!==`multiple-circle`){let e=Array.isArray(m.percentage)?m.percentage[0]:m.percentage;if(e>0){let t=performance.now(),n=r=>{let i=r-t,a=Math.min(i/m.time,1);g.value=Math.round(a*e),a<1&&requestAnimationFrame(n)};requestAnimationFrame(n)}}}),(t,i)=>(s(),n(u(e),a(y.value,{percentage:v.value,processing:t.isAnimation}),r({_:2},[t.showIndicator&&_.value?{name:`default`,fn:p(()=>[l(t.$slots,`indicator`)]),key:`0`}:void 0]),1040,[`percentage`,`processing`]))}});export{m as t};
+import{computed as e,createBlock as t,createSlots as n,defineComponent as r,mergeProps as i,onMounted as a,openBlock as o,ref as s,renderSlot as c,unref as l,useSlots as u,watch as d,withCtx as f}from"vue";import{NProgress as p}from"naive-ui";const m=r({name:`C_Progress`,__name:`index`,props:{percentage:{default:0},isAnimation:{type:Boolean,default:!1},time:{default:3e3},type:{},borderRadius:{},circleGap:{},color:{},fillBorderRadius:{},gapDegree:{},gapOffsetDegree:{},height:{},indicatorPlacement:{default:`outside`},indicatorTextColor:{},offsetDegree:{},railColor:{},railStyle:{},showIndicator:{type:Boolean,default:!0},status:{default:`default`},strokeWidth:{default:7},unit:{default:`%`}},setup(r){let m=r,h=u(),g=s(Array.isArray(m.percentage)?[...m.percentage]:0),_=e(()=>!!h.indicator),v=e(()=>m.type===`multiple-circle`?Array.isArray(g.value)?g.value:[g.value]:Array.isArray(g.value)?g.value[0]:g.value),y=e(()=>({type:m.type,borderRadius:m.borderRadius,circleGap:m.circleGap,color:m.color,fillBorderRadius:m.fillBorderRadius,gapDegree:m.gapDegree,gapOffsetDegree:m.gapOffsetDegree,height:m.height,indicatorPlacement:m.indicatorPlacement,indicatorTextColor:m.indicatorTextColor,offsetDegree:m.offsetDegree,railColor:m.railColor,railStyle:m.railStyle,status:m.status,strokeWidth:m.strokeWidth,unit:m.unit}));return d(()=>m.percentage,e=>{m.isAnimation?m.type===`multiple-circle`&&Array.isArray(e)&&(g.value=[...e]):g.value=e},{immediate:!0,deep:!0}),a(()=>{if(m.isAnimation&&m.type!==`multiple-circle`){let e=Array.isArray(m.percentage)?m.percentage[0]:m.percentage;if(e>0){let t=performance.now(),n=r=>{let i=r-t,a=Math.min(i/m.time,1);g.value=Math.round(a*e),a<1&&requestAnimationFrame(n)};requestAnimationFrame(n)}}}),(e,r)=>(o(),t(l(p),i(y.value,{percentage:v.value,processing:e.isAnimation}),n({_:2},[e.showIndicator&&_.value?{name:`default`,fn:f(()=>[c(e.$slots,`indicator`)]),key:`0`}:void 0]),1040,[`percentage`,`processing`]))}});export{m as t};
 //# sourceMappingURL=C_Progress2.js.map

package/dist/C_Progress2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Progress2.js","names":["isAnimation","showIndicator"],"sources":["../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue","../src/components/C_Progress/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 进度条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 进度条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 进度条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n"],"mappings":"+rBEmDA,IAAM,EAAQ,EAWR,EAAQ,GAAU,CAClB,EAAI,EACR,MAAM,QAAQ,EAAM,WAAW,CAAG,CAAC,GAAG,EAAM,WAAW,CAAG,EAC3D,CAEK,EAAmB,MAAe,CAAC,CAAC,EAAM,UAAU,CAEpD,EAAsB,MACnB,EAAM,OAAS,kBAClB,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MACF,CAAC,EAAE,MAAM,CACX,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MAAM,GACR,EAAE,MACR,CAEI,EAAgB,OAAgB,CACpC,KAAM,EAAM,KACZ,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,MAAO,EAAM,MACb,iBAAkB,EAAM,iBACxB,UAAW,EAAM,UACjB,gBAAiB,EAAM,gBACvB,OAAQ,EAAM,OACd,mBAAoB,EAAM,mBAC1B,mBAAoB,EAAM,mBAC1B,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,UAAW,EAAM,UACjB,OAAQ,EAAM,OACd,YAAa,EAAM,YACnB,KAAM,EAAM,KACb,EAAE,QAEH,MACQ,EAAM,WACX,GAAW,CACL,EAAM,YAEA,EAAM,OAAS,mBAAqB,MAAM,QAAQ,EAAO,GAClE,EAAE,MAAQ,CAAC,GAAG,EAAO,EAFrB,EAAE,MAAQ,GAKd,CAAE,UAAW,GAAM,KAAM,GAAM,CAChC,CAED,MAAgB,CACd,GAAI,EAAM,aAAe,EAAM,OAAS,kBAAmB,CACzD,IAAM,EAAc,MAAM,QAAQ,EAAM,WAAW,CAC/C,EAAM,WAAW,GACjB,EAAM,WAEV,GAAI,EAAc,EAAG,CACnB,IAAM,EAAY,YAAY,KAAK,CAE7B,EAAW,GAAgB,CAC/B,IAAM,EAAU,EAAM,EAChB,EAAW,KAAK,IAAI,EAAU,EAAM,KAAM,EAAE,CAClD,EAAE,MAAQ,KAAK,MAAM,EAAW,EAAY,CAExC,EAAW,GACb,sBAAsB,EAAQ,EAIlC,sBAAsB,EAAQ,IAGlC,aA5HA,EAQY,EAAA,EAAA,CARZ,EACU,EAOE,MAPW,CACpB,WAAY,EAAA,MACZ,WAAYA,EAAAA,uBAEGC,EAAAA,eAAiB,EAAA,MAAA,MAAmB,mBACzB,CAAzB,EAAyB,EAAA,OAAA,YAAA,CAAA,CAAA"}
+{"version":3,"file":"C_Progress2.js","names":[],"sources":["../src/components/C_Progress/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 进度条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <NProgress\r\n    v-bind=\"progressProps\"\r\n    :percentage=\"processedPercentage\"\r\n    :processing=\"isAnimation\"\r\n  >\r\n    <template v-if=\"showIndicator && hasIndicatorSlot\" #default>\r\n      <slot name=\"indicator\" />\r\n    </template>\r\n  </NProgress>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed, watch, useSlots, onMounted } from \"vue\";\r\nimport { NProgress } from \"naive-ui\";\r\nimport type { CSSProperties } from \"vue\";\r\n\r\ndefineOptions({ name: \"C_Progress\" });\r\n\r\ntype CSS = CSSProperties | string;\r\n\r\ninterface Props {\r\n  percentage: number | number[];\r\n  isAnimation?: boolean;\r\n  time?: number;\r\n  type?: \"line\" | \"circle\" | \"multiple-circle\" | \"dashboard\";\r\n  borderRadius?: number | string;\r\n  circleGap?: number;\r\n  color?: string | string[] | { stops: string[] } | Array<{ stops: string[] }>;\r\n  fillBorderRadius?: number | string;\r\n  gapDegree?: number;\r\n  gapOffsetDegree?: number;\r\n  height?: number;\r\n  indicatorPlacement?: \"inside\" | \"outside\";\r\n  indicatorTextColor?: string;\r\n  offsetDegree?: number;\r\n  railColor?: string | string[];\r\n  railStyle?: string | CSS | Array<string | CSS>;\r\n  showIndicator?: boolean;\r\n  status?: \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\r\n  strokeWidth?: number;\r\n  unit?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  percentage: 0,\r\n  isAnimation: false,\r\n  time: 3000,\r\n  indicatorPlacement: \"outside\",\r\n  showIndicator: true,\r\n  status: \"default\",\r\n  strokeWidth: 7,\r\n  unit: \"%\",\r\n});\r\n\r\nconst slots = useSlots();\r\nconst p = ref<number | number[]>(\r\n  Array.isArray(props.percentage) ? [...props.percentage] : 0,\r\n);\r\n\r\nconst hasIndicatorSlot = computed(() => !!slots.indicator);\r\n\r\nconst processedPercentage = computed(() => {\r\n  return props.type === \"multiple-circle\"\r\n    ? Array.isArray(p.value)\r\n      ? p.value\r\n      : [p.value]\r\n    : Array.isArray(p.value)\r\n      ? p.value[0]\r\n      : p.value;\r\n});\r\n\r\nconst progressProps = computed(() => ({\r\n  type: props.type,\r\n  borderRadius: props.borderRadius,\r\n  circleGap: props.circleGap,\r\n  color: props.color,\r\n  fillBorderRadius: props.fillBorderRadius,\r\n  gapDegree: props.gapDegree,\r\n  gapOffsetDegree: props.gapOffsetDegree,\r\n  height: props.height,\r\n  indicatorPlacement: props.indicatorPlacement,\r\n  indicatorTextColor: props.indicatorTextColor,\r\n  offsetDegree: props.offsetDegree,\r\n  railColor: props.railColor,\r\n  railStyle: props.railStyle,\r\n  status: props.status,\r\n  strokeWidth: props.strokeWidth,\r\n  unit: props.unit,\r\n}));\r\n\r\nwatch(\r\n  () => props.percentage,\r\n  (newVal) => {\r\n    if (!props.isAnimation) {\r\n      p.value = newVal;\r\n    } else if (props.type === \"multiple-circle\" && Array.isArray(newVal)) {\r\n      p.value = [...newVal];\r\n    }\r\n  },\r\n  { immediate: true, deep: true },\r\n);\r\n\r\nonMounted(() => {\r\n  if (props.isAnimation && props.type !== \"multiple-circle\") {\r\n    const targetValue = Array.isArray(props.percentage)\r\n      ? props.percentage[0]\r\n      : props.percentage;\r\n\r\n    if (targetValue > 0) {\r\n      const startTime = performance.now();\r\n\r\n      const animate = (now: number) => {\r\n        const elapsed = now - startTime;\r\n        const progress = Math.min(elapsed / props.time, 1);\r\n        p.value = Math.round(progress * targetValue);\r\n\r\n        if (progress < 1) {\r\n          requestAnimationFrame(animate);\r\n        }\r\n      };\r\n\r\n      requestAnimationFrame(animate);\r\n    }\r\n  }\r\n});\r\n</script>\r\n"],"mappings":"isBAmDA,IAAM,EAAQ,EAWR,EAAQ,GAAU,CAClB,EAAI,EACR,MAAM,QAAQ,EAAM,WAAW,CAAG,CAAC,GAAG,EAAM,WAAW,CAAG,EAC3D,CAEK,EAAmB,MAAe,CAAC,CAAC,EAAM,UAAU,CAEpD,EAAsB,MACnB,EAAM,OAAS,kBAClB,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MACF,CAAC,EAAE,MAAM,CACX,MAAM,QAAQ,EAAE,MAAM,CACpB,EAAE,MAAM,GACR,EAAE,MACR,CAEI,EAAgB,OAAgB,CACpC,KAAM,EAAM,KACZ,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,MAAO,EAAM,MACb,iBAAkB,EAAM,iBACxB,UAAW,EAAM,UACjB,gBAAiB,EAAM,gBACvB,OAAQ,EAAM,OACd,mBAAoB,EAAM,mBAC1B,mBAAoB,EAAM,mBAC1B,aAAc,EAAM,aACpB,UAAW,EAAM,UACjB,UAAW,EAAM,UACjB,OAAQ,EAAM,OACd,YAAa,EAAM,YACnB,KAAM,EAAM,KACb,EAAE,QAEH,MACQ,EAAM,WACX,GAAW,CACL,EAAM,YAEA,EAAM,OAAS,mBAAqB,MAAM,QAAQ,EAAO,GAClE,EAAE,MAAQ,CAAC,GAAG,EAAO,EAFrB,EAAE,MAAQ,GAKd,CAAE,UAAW,GAAM,KAAM,GAAM,CAChC,CAED,MAAgB,CACd,GAAI,EAAM,aAAe,EAAM,OAAS,kBAAmB,CACzD,IAAM,EAAc,MAAM,QAAQ,EAAM,WAAW,CAC/C,EAAM,WAAW,GACjB,EAAM,WAEV,GAAI,EAAc,EAAG,CACnB,IAAM,EAAY,YAAY,KAAK,CAE7B,EAAW,GAAgB,CAC/B,IAAM,EAAU,EAAM,EAChB,EAAW,KAAK,IAAI,EAAU,EAAM,KAAM,EAAE,CAClD,EAAE,MAAQ,KAAK,MAAM,EAAW,EAAY,CAExC,EAAW,GACb,sBAAsB,EAAQ,EAIlC,sBAAsB,EAAQ,IAGlC,aA5HA,EAQY,EAAA,EAAA,CARZ,EACU,EAOE,MAPW,CACpB,WAAY,EAAA,MACZ,WAAY,EAAA,uBAEG,EAAA,eAAiB,EAAA,MAAA,MAAmB,mBACzB,CAAzB,EAAyB,EAAA,OAAA,YAAA,CAAA,CAAA"}

package/dist/{C_QRCode-DMxSyogU.css.map → C_QRCode-CFNTda_1.css.map}

@@ -1 +1 @@
-{"version":3,"file":"C_QRCode-DMxSyogU.css","names":[],"sources":["../src/components/C_QRCode/index.vue?vue&type=style&index=0&scoped=7a4201b5&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_QRCode styles */\n.c-qrcode[data-v-7a4201b5] {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper[data-v-7a4201b5] {\n  display: inline-block;\n  padding: 8px;\n  background: var(--c-bg-content, #fff);\n  border-radius: 6px;\n  transition: all 0.3s ease;\n  overflow: hidden;\n  max-width: 100%;\n  line-height: 0;\n}\n.c-qrcode .qrcode-wrapper.with-border[data-v-7a4201b5] {\n  border: 1px dashed var(--c-border-default, #e0e0e6);\n}\n.c-qrcode .qrcode-wrapper[data-v-7a4201b5]:hover {\n  border-color: var(--primary-color, #409eff);\n  box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n.c-qrcode .qrcode-wrapper canvas[data-v-7a4201b5] {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.c-qrcode .qrcode-label[data-v-7a4201b5] {\n  font-size: 14px;\n  color: var(--c-text-secondary, #999);\n  text-align: center;\n  font-weight: 500;\n  word-break: break-all;\n  max-width: 100%;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"C_QRCode-CFNTda_1.css","names":[],"sources":["../src/components/C_QRCode/index.vue?vue&type=style&index=0&scoped=fe18e0fe&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_QRCode styles */\n.c-qrcode[data-v-fe18e0fe] {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper[data-v-fe18e0fe] {\n  display: inline-block;\n  padding: 8px;\n  background: var(--c-bg-content, #fff);\n  border-radius: 6px;\n  transition: all 0.3s ease;\n  overflow: hidden;\n  max-width: 100%;\n  line-height: 0;\n}\n.c-qrcode .qrcode-wrapper.with-border[data-v-fe18e0fe] {\n  border: 1px dashed var(--c-border-default, #e0e0e6);\n}\n.c-qrcode .qrcode-wrapper[data-v-fe18e0fe]:hover {\n  border-color: var(--primary-color, #409eff);\n  box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n.c-qrcode .qrcode-wrapper canvas[data-v-fe18e0fe] {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.c-qrcode .qrcode-label[data-v-fe18e0fe] {\n  font-size: 14px;\n  color: var(--c-text-secondary, #999);\n  text-align: center;\n  font-weight: 500;\n  word-break: break-all;\n  max-width: 100%;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/{C_QRCode-G7fiAkm4.css.map → C_QRCode-CmWr9lK-.css.map}

@@ -1 +1 @@
-{"version":3,"file":"C_QRCode-G7fiAkm4.css","names":[],"sources":["../src/components/C_QRCode/index.vue?vue&type=style&index=0&scoped=7a4201b5&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_QRCode styles */\n.c-qrcode[data-v-7a4201b5] {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper[data-v-7a4201b5] {\n  display: inline-block;\n  padding: 8px;\n  background: var(--c-bg-content, #fff);\n  border-radius: 6px;\n  transition: all 0.3s ease;\n  overflow: hidden;\n  max-width: 100%;\n  line-height: 0;\n}\n.c-qrcode .qrcode-wrapper.with-border[data-v-7a4201b5] {\n  border: 1px dashed var(--c-border-default, #e0e0e6);\n}\n.c-qrcode .qrcode-wrapper[data-v-7a4201b5]:hover {\n  border-color: var(--primary-color, #409eff);\n  box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n.c-qrcode .qrcode-wrapper canvas[data-v-7a4201b5] {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.c-qrcode .qrcode-label[data-v-7a4201b5] {\n  font-size: 14px;\n  color: var(--c-text-secondary, #999);\n  text-align: center;\n  font-weight: 500;\n  word-break: break-all;\n  max-width: 100%;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"C_QRCode-CmWr9lK-.css","names":[],"sources":["../src/components/C_QRCode/index.vue?vue&type=style&index=0&scoped=fe18e0fe&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_QRCode styles */\n.c-qrcode[data-v-fe18e0fe] {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper[data-v-fe18e0fe] {\n  display: inline-block;\n  padding: 8px;\n  background: var(--c-bg-content, #fff);\n  border-radius: 6px;\n  transition: all 0.3s ease;\n  overflow: hidden;\n  max-width: 100%;\n  line-height: 0;\n}\n.c-qrcode .qrcode-wrapper.with-border[data-v-fe18e0fe] {\n  border: 1px dashed var(--c-border-default, #e0e0e6);\n}\n.c-qrcode .qrcode-wrapper[data-v-fe18e0fe]:hover {\n  border-color: var(--primary-color, #409eff);\n  box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n.c-qrcode .qrcode-wrapper canvas[data-v-fe18e0fe] {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n}\n.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.c-qrcode .qrcode-label[data-v-fe18e0fe] {\n  font-size: 14px;\n  color: var(--c-text-secondary, #999);\n  text-align: center;\n  font-weight: 500;\n  word-break: break-all;\n  max-width: 100%;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_QRCode.css

@@ -1,12 +1,12 @@
 /* unplugin-vue-components disabled *//* C_QRCode styles */
-.c-qrcode[data-v-7a4201b5] {
+.c-qrcode[data-v-fe18e0fe] {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   max-width: 100%;
 }
-.c-qrcode .qrcode-wrapper[data-v-7a4201b5] {
+.c-qrcode .qrcode-wrapper[data-v-fe18e0fe] {
   display: inline-block;
   padding: 8px;
   background: var(--c-bg-content, #fff);
@@ -16,30 +16,30 @@
   max-width: 100%;
   line-height: 0;
 }
-.c-qrcode .qrcode-wrapper.with-border[data-v-7a4201b5] {
+.c-qrcode .qrcode-wrapper.with-border[data-v-fe18e0fe] {
   border: 1px dashed var(--c-border-default, #e0e0e6);
 }
-.c-qrcode .qrcode-wrapper[data-v-7a4201b5]:hover {
+.c-qrcode .qrcode-wrapper[data-v-fe18e0fe]:hover {
   border-color: var(--primary-color, #409eff);
   box-shadow: var(--c-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.08));
 }
-.c-qrcode .qrcode-wrapper canvas[data-v-7a4201b5] {
+.c-qrcode .qrcode-wrapper canvas[data-v-fe18e0fe] {
   display: block;
   max-width: 100%;
   height: auto;
 }
-.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] {
+.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] {
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: 100%;
 }
-.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-7a4201b5] svg {
+.c-qrcode .qrcode-wrapper .qrcode-svg[data-v-fe18e0fe] svg {
   width: 100%;
   height: 100%;
   display: block;
 }
-.c-qrcode .qrcode-label[data-v-7a4201b5] {
+.c-qrcode .qrcode-label[data-v-fe18e0fe] {
   font-size: 14px;
   color: var(--c-text-secondary, #999);
   text-align: center;
@@ -48,4 +48,4 @@
   max-width: 100%;
 }
 
-/*# sourceMappingURL=C_QRCode-DMxSyogU.css.map*/
+/*# sourceMappingURL=C_QRCode-CFNTda_1.css.map*/

package/dist/C_QRCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_QRCode.js","names":["QRCode","showBorder","mode","size","showLabel","label"],"sources":["../src/components/C_QRCode/composables/useQRCode.ts","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue","../src/components/C_QRCode/index.vue"],"sourcesContent":["import { ref, computed, watch } from \"vue\";\r\nimport QRCode from \"qrcode\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n  ErrorCorrectionLevel,\r\n  ExportType,\r\n  LogoOptions,\r\n  RenderMode,\r\n} from \"../types\";\r\n\r\ninterface UseQRCodeOptions {\r\n  value: Ref<string>;\r\n  size: Ref<number>;\r\n  color: Ref<string>;\r\n  bgColor: Ref<string>;\r\n  errorCorrectionLevel: Ref<ErrorCorrectionLevel>;\r\n  margin: Ref<number>;\r\n  mode: Ref<RenderMode>;\r\n  logo: Ref<LogoOptions | undefined>;\r\n}\r\n\r\nfunction drawLogo(\r\n  canvas: HTMLCanvasElement,\r\n  logo: LogoOptions,\r\n  qrSize: number,\r\n): Promise<void> {\r\n  return new Promise((resolve, reject) => {\r\n    const ctx = canvas.getContext(\"2d\");\r\n    if (!ctx) return reject(new Error(\"Canvas context 不可用\"));\r\n\r\n    const img = new Image();\r\n    img.crossOrigin = \"anonymous\";\r\n    img.onload = () => {\r\n      const ratio = logo.size ?? 0.2;\r\n      const logoSize = Math.floor(qrSize * ratio);\r\n      const padding = logo.padding ?? 4;\r\n      const borderRadius = logo.borderRadius ?? 4;\r\n\r\n      const x = (canvas.width - logoSize) / 2;\r\n      const y = (canvas.height - logoSize) / 2;\r\n\r\n      ctx.save();\r\n      const bgX = x - padding;\r\n      const bgY = y - padding;\r\n      const bgSize = logoSize + padding * 2;\r\n      const r = borderRadius + padding;\r\n\r\n      ctx.beginPath();\r\n      ctx.moveTo(bgX + r, bgY);\r\n      ctx.arcTo(bgX + bgSize, bgY, bgX + bgSize, bgY + bgSize, r);\r\n      ctx.arcTo(bgX + bgSize, bgY + bgSize, bgX, bgY + bgSize, r);\r\n      ctx.arcTo(bgX, bgY + bgSize, bgX, bgY, r);\r\n      ctx.arcTo(bgX, bgY, bgX + bgSize, bgY, r);\r\n      ctx.closePath();\r\n      ctx.fillStyle = logo.bgColor ?? \"#ffffff\";\r\n      ctx.fill();\r\n\r\n      ctx.beginPath();\r\n      ctx.moveTo(x + borderRadius, y);\r\n      ctx.arcTo(x + logoSize, y, x + logoSize, y + logoSize, borderRadius);\r\n      ctx.arcTo(x + logoSize, y + logoSize, x, y + logoSize, borderRadius);\r\n      ctx.arcTo(x, y + logoSize, x, y, borderRadius);\r\n      ctx.arcTo(x, y, x + logoSize, y, borderRadius);\r\n      ctx.closePath();\r\n      ctx.clip();\r\n      ctx.drawImage(img, x, y, logoSize, logoSize);\r\n      ctx.restore();\r\n\r\n      resolve();\r\n    };\r\n    img.onerror = () => reject(new Error(`Logo 加载失败: ${logo.src}`));\r\n    img.src = logo.src;\r\n  });\r\n}\r\n\r\nexport function useQRCode(\r\n  canvasRef: Ref<HTMLCanvasElement | null>,\r\n  options: UseQRCodeOptions,\r\n) {\r\n  const svgHtml = ref(\"\");\r\n  const error = ref<Error | null>(null);\r\n  const loading = ref(false);\r\n\r\n  const effectiveLevel = computed<ErrorCorrectionLevel>(() => {\r\n    if (options.logo.value) {\r\n      const level = options.errorCorrectionLevel.value;\r\n      if (level === \"L\" || level === \"M\") return \"Q\";\r\n      return level;\r\n    }\r\n    return options.errorCorrectionLevel.value;\r\n  });\r\n\r\n  const qrOptions = computed(() => ({\r\n    width: options.size.value,\r\n    margin: options.margin.value,\r\n    errorCorrectionLevel: effectiveLevel.value,\r\n    color: {\r\n      dark: options.color.value,\r\n      light: options.bgColor.value,\r\n    },\r\n  }));\r\n\r\n  async function renderCanvas() {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas || !options.value.value) return;\r\n    await QRCode.toCanvas(canvas, options.value.value, qrOptions.value);\r\n    if (options.logo.value) {\r\n      await drawLogo(canvas, options.logo.value, options.size.value);\r\n    }\r\n  }\r\n\r\n  async function renderSvg() {\r\n    if (!options.value.value) {\r\n      svgHtml.value = \"\";\r\n      return;\r\n    }\r\n    const svgString = await QRCode.toString(options.value.value, {\r\n      ...qrOptions.value,\r\n      type: \"svg\",\r\n    });\r\n    svgHtml.value = svgString;\r\n  }\r\n\r\n  async function render() {\r\n    if (!options.value.value) return;\r\n    loading.value = true;\r\n    error.value = null;\r\n    try {\r\n      if (options.mode.value === \"canvas\") {\r\n        await renderCanvas();\r\n      } else {\r\n        await renderSvg();\r\n      }\r\n    } catch (e) {\r\n      error.value = e instanceof Error ? e : new Error(String(e));\r\n      console.error(\"二维码渲染失败:\", e);\r\n    } finally {\r\n      loading.value = false;\r\n    }\r\n  }\r\n\r\n  async function toDataURL(\r\n    type: ExportType = \"png\",\r\n    quality = 0.92,\r\n  ): Promise<string> {\r\n    if (type === \"svg\") {\r\n      const svgStr = await QRCode.toString(options.value.value, {\r\n        ...qrOptions.value,\r\n        type: \"svg\",\r\n      });\r\n      return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;\r\n    }\r\n    const tempCanvas = document.createElement(\"canvas\");\r\n    await QRCode.toCanvas(tempCanvas, options.value.value, qrOptions.value);\r\n    if (options.logo.value) {\r\n      await drawLogo(tempCanvas, options.logo.value, options.size.value);\r\n    }\r\n    const mimeType = type === \"jpeg\" ? \"image/jpeg\" : \"image/png\";\r\n    return tempCanvas.toDataURL(mimeType, quality);\r\n  }\r\n\r\n  async function download(filename = \"qrcode\", type: ExportType = \"png\") {\r\n    const dataUrl = await toDataURL(type);\r\n    const link = document.createElement(\"a\");\r\n    link.download = `${filename}.${type}`;\r\n    link.href = dataUrl;\r\n    link.click();\r\n  }\r\n\r\n  watch(\r\n    [\r\n      options.value,\r\n      options.size,\r\n      options.color,\r\n      options.bgColor,\r\n      options.errorCorrectionLevel,\r\n      options.margin,\r\n      options.mode,\r\n      options.logo,\r\n    ],\r\n    () => render(),\r\n    { deep: true },\r\n  );\r\n\r\n  return { svgHtml, error, loading, render, toDataURL, download };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-qrcode\">\r\n    <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n      <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n      <div\r\n        v-if=\"mode === 'svg'\"\r\n        class=\"qrcode-svg\"\r\n        :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n        v-html=\"svgHtml\"\r\n      />\r\n    </div>\r\n    <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n      {{ label }}\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n  ErrorCorrectionLevel,\r\n  ExportType,\r\n  LogoOptions,\r\n  QRCodeExpose,\r\n  RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n  value: string;\r\n  size?: number;\r\n  color?: string;\r\n  bgColor?: string;\r\n  errorCorrectionLevel?: ErrorCorrectionLevel;\r\n  margin?: number;\r\n  mode?: RenderMode;\r\n  logo?: LogoOptions;\r\n  showBorder?: boolean;\r\n  label?: string;\r\n  showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  size: 200,\r\n  color: \"#000000\",\r\n  bgColor: \"#FFFFFF\",\r\n  errorCorrectionLevel: \"M\",\r\n  margin: 2,\r\n  mode: \"canvas\",\r\n  logo: undefined,\r\n  showBorder: true,\r\n  label: \"\",\r\n  showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n  value: toRef(props, \"value\"),\r\n  size: toRef(props, \"size\"),\r\n  color: toRef(props, \"color\"),\r\n  bgColor: toRef(props, \"bgColor\"),\r\n  errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n  margin: toRef(props, \"margin\"),\r\n  mode: toRef(props, \"mode\"),\r\n  logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n  if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n  toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n  download: (filename?: string, type?: ExportType) => download(filename, type),\r\n  refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-qrcode\">\r\n    <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n      <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n      <div\r\n        v-if=\"mode === 'svg'\"\r\n        class=\"qrcode-svg\"\r\n        :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n        v-html=\"svgHtml\"\r\n      />\r\n    </div>\r\n    <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n      {{ label }}\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n  ErrorCorrectionLevel,\r\n  ExportType,\r\n  LogoOptions,\r\n  QRCodeExpose,\r\n  RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n  value: string;\r\n  size?: number;\r\n  color?: string;\r\n  bgColor?: string;\r\n  errorCorrectionLevel?: ErrorCorrectionLevel;\r\n  margin?: number;\r\n  mode?: RenderMode;\r\n  logo?: LogoOptions;\r\n  showBorder?: boolean;\r\n  label?: string;\r\n  showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  size: 200,\r\n  color: \"#000000\",\r\n  bgColor: \"#FFFFFF\",\r\n  errorCorrectionLevel: \"M\",\r\n  margin: 2,\r\n  mode: \"canvas\",\r\n  logo: undefined,\r\n  showBorder: true,\r\n  label: \"\",\r\n  showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n  value: toRef(props, \"value\"),\r\n  size: toRef(props, \"size\"),\r\n  color: toRef(props, \"color\"),\r\n  bgColor: toRef(props, \"bgColor\"),\r\n  errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n  margin: toRef(props, \"margin\"),\r\n  mode: toRef(props, \"mode\"),\r\n  logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n  if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n  toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n  download: (filename?: string, type?: ExportType) => download(filename, type),\r\n  refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 二维码组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-qrcode\">\r\n    <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\r\n      <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\r\n      <div\r\n        v-if=\"mode === 'svg'\"\r\n        class=\"qrcode-svg\"\r\n        :style=\"{ width: `${size}px`, height: `${size}px` }\"\r\n        v-html=\"svgHtml\"\r\n      />\r\n    </div>\r\n    <div v-if=\"showLabel && label\" class=\"qrcode-label\">\r\n      {{ label }}\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, onMounted } from \"vue\";\r\nimport { useQRCode } from \"./composables/useQRCode\";\r\nimport type {\r\n  ErrorCorrectionLevel,\r\n  ExportType,\r\n  LogoOptions,\r\n  QRCodeExpose,\r\n  RenderMode,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_QRCode\" });\r\n\r\ninterface Props {\r\n  value: string;\r\n  size?: number;\r\n  color?: string;\r\n  bgColor?: string;\r\n  errorCorrectionLevel?: ErrorCorrectionLevel;\r\n  margin?: number;\r\n  mode?: RenderMode;\r\n  logo?: LogoOptions;\r\n  showBorder?: boolean;\r\n  label?: string;\r\n  showLabel?: boolean;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  size: 200,\r\n  color: \"#000000\",\r\n  bgColor: \"#FFFFFF\",\r\n  errorCorrectionLevel: \"M\",\r\n  margin: 2,\r\n  mode: \"canvas\",\r\n  logo: undefined,\r\n  showBorder: true,\r\n  label: \"\",\r\n  showLabel: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  error: [error: Error];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\n\r\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\r\n  value: toRef(props, \"value\"),\r\n  size: toRef(props, \"size\"),\r\n  color: toRef(props, \"color\"),\r\n  bgColor: toRef(props, \"bgColor\"),\r\n  errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\r\n  margin: toRef(props, \"margin\"),\r\n  mode: toRef(props, \"mode\"),\r\n  logo: toRef(props, \"logo\"),\r\n});\r\n\r\nwatch(error, (e) => {\r\n  if (e) emit(\"error\", e);\r\n});\r\n\r\nonMounted(() => render());\r\n\r\ndefineExpose<QRCodeExpose>({\r\n  toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\r\n  download: (filename?: string, type?: ExportType) => download(filename, type),\r\n  refresh: () => render(),\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_QRCode.js","names":["QRCode"],"sources":["../src/components/C_QRCode/composables/useQRCode.ts","../src/components/C_QRCode/index.vue"],"sourcesContent":["import { ref, computed, watch } from \"vue\";\r\nimport QRCode from \"qrcode\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n  ErrorCorrectionLevel,\r\n  ExportType,\r\n  LogoOptions,\r\n  RenderMode,\r\n} from \"../types\";\r\n\r\ninterface UseQRCodeOptions {\r\n  value: Ref<string>;\r\n  size: Ref<number>;\r\n  color: Ref<string>;\r\n  bgColor: Ref<string>;\r\n  errorCorrectionLevel: Ref<ErrorCorrectionLevel>;\r\n  margin: Ref<number>;\r\n  mode: Ref<RenderMode>;\r\n  logo: Ref<LogoOptions | undefined>;\r\n}\r\n\r\nfunction drawLogo(\r\n  canvas: HTMLCanvasElement,\r\n  logo: LogoOptions,\r\n  qrSize: number,\r\n): Promise<void> {\r\n  return new Promise((resolve, reject) => {\r\n    const ctx = canvas.getContext(\"2d\");\r\n    if (!ctx) return reject(new Error(\"Canvas context 不可用\"));\r\n\r\n    const img = new Image();\r\n    img.crossOrigin = \"anonymous\";\r\n    img.onload = () => {\r\n      const ratio = logo.size ?? 0.2;\r\n      const logoSize = Math.floor(qrSize * ratio);\r\n      const padding = logo.padding ?? 4;\r\n      const borderRadius = logo.borderRadius ?? 4;\r\n\r\n      const x = (canvas.width - logoSize) / 2;\r\n      const y = (canvas.height - logoSize) / 2;\r\n\r\n      ctx.save();\r\n      const bgX = x - padding;\r\n      const bgY = y - padding;\r\n      const bgSize = logoSize + padding * 2;\r\n      const r = borderRadius + padding;\r\n\r\n      ctx.beginPath();\r\n      ctx.moveTo(bgX + r, bgY);\r\n      ctx.arcTo(bgX + bgSize, bgY, bgX + bgSize, bgY + bgSize, r);\r\n      ctx.arcTo(bgX + bgSize, bgY + bgSize, bgX, bgY + bgSize, r);\r\n      ctx.arcTo(bgX, bgY + bgSize, bgX, bgY, r);\r\n      ctx.arcTo(bgX, bgY, bgX + bgSize, bgY, r);\r\n      ctx.closePath();\r\n      ctx.fillStyle = logo.bgColor ?? \"#ffffff\";\r\n      ctx.fill();\r\n\r\n      ctx.beginPath();\r\n      ctx.moveTo(x + borderRadius, y);\r\n      ctx.arcTo(x + logoSize, y, x + logoSize, y + logoSize, borderRadius);\r\n      ctx.arcTo(x + logoSize, y + logoSize, x, y + logoSize, borderRadius);\r\n      ctx.arcTo(x, y + logoSize, x, y, borderRadius);\r\n      ctx.arcTo(x, y, x + logoSize, y, borderRadius);\r\n      ctx.closePath();\r\n      ctx.clip();\r\n      ctx.drawImage(img, x, y, logoSize, logoSize);\r\n      ctx.restore();\r\n\r\n      resolve();\r\n    };\r\n    img.onerror = () => reject(new Error(`Logo 加载失败: ${logo.src}`));\r\n    img.src = logo.src;\r\n  });\r\n}\r\n\r\nexport function useQRCode(\r\n  canvasRef: Ref<HTMLCanvasElement | null>,\r\n  options: UseQRCodeOptions,\r\n) {\r\n  const svgHtml = ref(\"\");\r\n  const error = ref<Error | null>(null);\r\n  const loading = ref(false);\r\n\r\n  const effectiveLevel = computed<ErrorCorrectionLevel>(() => {\r\n    if (options.logo.value) {\r\n      const level = options.errorCorrectionLevel.value;\r\n      if (level === \"L\" || level === \"M\") return \"Q\";\r\n      return level;\r\n    }\r\n    return options.errorCorrectionLevel.value;\r\n  });\r\n\r\n  const qrOptions = computed(() => ({\r\n    width: options.size.value,\r\n    margin: options.margin.value,\r\n    errorCorrectionLevel: effectiveLevel.value,\r\n    color: {\r\n      dark: options.color.value,\r\n      light: options.bgColor.value,\r\n    },\r\n  }));\r\n\r\n  async function renderCanvas() {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas || !options.value.value) return;\r\n    await QRCode.toCanvas(canvas, options.value.value, qrOptions.value);\r\n    if (options.logo.value) {\r\n      await drawLogo(canvas, options.logo.value, options.size.value);\r\n    }\r\n  }\r\n\r\n  async function renderSvg() {\r\n    if (!options.value.value) {\r\n      svgHtml.value = \"\";\r\n      return;\r\n    }\r\n    const svgString = await QRCode.toString(options.value.value, {\r\n      ...qrOptions.value,\r\n      type: \"svg\",\r\n    });\r\n    svgHtml.value = svgString;\r\n  }\r\n\r\n  async function render() {\r\n    if (!options.value.value) return;\r\n    loading.value = true;\r\n    error.value = null;\r\n    try {\r\n      if (options.mode.value === \"canvas\") {\r\n        await renderCanvas();\r\n      } else {\r\n        await renderSvg();\r\n      }\r\n    } catch (e) {\r\n      error.value = e instanceof Error ? e : new Error(String(e));\r\n      console.error(\"二维码渲染失败:\", e);\r\n    } finally {\r\n      loading.value = false;\r\n    }\r\n  }\r\n\r\n  async function toDataURL(\r\n    type: ExportType = \"png\",\r\n    quality = 0.92,\r\n  ): Promise<string> {\r\n    if (type === \"svg\") {\r\n      const svgStr = await QRCode.toString(options.value.value, {\r\n        ...qrOptions.value,\r\n        type: \"svg\",\r\n      });\r\n      return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;\r\n    }\r\n    const tempCanvas = document.createElement(\"canvas\");\r\n    await QRCode.toCanvas(tempCanvas, options.value.value, qrOptions.value);\r\n    if (options.logo.value) {\r\n      await drawLogo(tempCanvas, options.logo.value, options.size.value);\r\n    }\r\n    const mimeType = type === \"jpeg\" ? \"image/jpeg\" : \"image/png\";\r\n    return tempCanvas.toDataURL(mimeType, quality);\r\n  }\r\n\r\n  async function download(filename = \"qrcode\", type: ExportType = \"png\") {\r\n    const dataUrl = await toDataURL(type);\r\n    const link = document.createElement(\"a\");\r\n    link.download = `${filename}.${type}`;\r\n    link.href = dataUrl;\r\n    link.click();\r\n  }\r\n\r\n  watch(\r\n    [\r\n      options.value,\r\n      options.size,\r\n      options.color,\r\n      options.bgColor,\r\n      options.errorCorrectionLevel,\r\n      options.margin,\r\n      options.mode,\r\n      options.logo,\r\n    ],\r\n    () => render(),\r\n    { deep: true },\r\n  );\r\n\r\n  return { svgHtml, error, loading, render, toDataURL, download };\r\n}\r\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 二维码组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div class=\"c-qrcode\">\n    <div class=\"qrcode-wrapper\" :class=\"{ 'with-border': showBorder }\">\n      <canvas v-show=\"mode === 'canvas'\" ref=\"canvasRef\" />\n      <div\n        v-if=\"mode === 'svg'\"\n        class=\"qrcode-svg\"\n        :style=\"{ width: `${size}px`, height: `${size}px` }\"\n        v-html=\"svgHtml\"\n      />\n    </div>\n    <div v-if=\"showLabel && label\" class=\"qrcode-label\">\n      {{ label }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, toRef, watch, onMounted } from \"vue\";\nimport { useQRCode } from \"./composables/useQRCode\";\nimport type {\n  ErrorCorrectionLevel,\n  ExportType,\n  LogoOptions,\n  QRCodeExpose,\n  RenderMode,\n} from \"./types\";\n\ndefineOptions({ name: \"C_QRCode\" });\n\ninterface Props {\n  value: string;\n  size?: number;\n  color?: string;\n  bgColor?: string;\n  errorCorrectionLevel?: ErrorCorrectionLevel;\n  margin?: number;\n  mode?: RenderMode;\n  logo?: LogoOptions;\n  showBorder?: boolean;\n  label?: string;\n  showLabel?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 200,\n  color: \"#000000\",\n  bgColor: \"#FFFFFF\",\n  errorCorrectionLevel: \"M\",\n  margin: 2,\n  mode: \"canvas\",\n  logo: undefined,\n  showBorder: true,\n  label: \"\",\n  showLabel: false,\n});\n\nconst emit = defineEmits<{\n  error: [error: Error];\n}>();\n\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\n\nconst { svgHtml, error, render, toDataURL, download } = useQRCode(canvasRef, {\n  value: toRef(props, \"value\"),\n  size: toRef(props, \"size\"),\n  color: toRef(props, \"color\"),\n  bgColor: toRef(props, \"bgColor\"),\n  errorCorrectionLevel: toRef(props, \"errorCorrectionLevel\"),\n  margin: toRef(props, \"margin\"),\n  mode: toRef(props, \"mode\"),\n  logo: toRef(props, \"logo\"),\n});\n\nwatch(error, (e) => {\n  if (e) emit(\"error\", e);\n});\n\nonMounted(() => render());\n\ndefineExpose<QRCodeExpose>({\n  toDataURL: (type?: ExportType, quality?: number) => toDataURL(type, quality),\n  download: (filename?: string, type?: ExportType) => download(filename, type),\n  refresh: () => render(),\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}

package/dist/C_QRCode2.js

@@ -1,2 +1,2 @@
-import{t as e}from"./export-helper.js";import{computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,defineComponent as a,normalizeClass as o,normalizeStyle as s,onMounted as c,openBlock as l,ref as u,toDisplayString as d,toRef as f,unref as p,vShow as m,watch as h,withDirectives as g}from"vue";import _ from"qrcode";function v(e,t,n){return new Promise((r,i)=>{let a=e.getContext(`2d`);if(!a)return i(Error(`Canvas context 不可用`));let o=new Image;o.crossOrigin=`anonymous`,o.onload=()=>{let i=t.size??.2,s=Math.floor(n*i),c=t.padding??4,l=t.borderRadius??4,u=(e.width-s)/2,d=(e.height-s)/2;a.save();let f=u-c,p=d-c,m=s+c*2,h=l+c;a.beginPath(),a.moveTo(f+h,p),a.arcTo(f+m,p,f+m,p+m,h),a.arcTo(f+m,p+m,f,p+m,h),a.arcTo(f,p+m,f,p,h),a.arcTo(f,p,f+m,p,h),a.closePath(),a.fillStyle=t.bgColor??`#ffffff`,a.fill(),a.beginPath(),a.moveTo(u+l,d),a.arcTo(u+s,d,u+s,d+s,l),a.arcTo(u+s,d+s,u,d+s,l),a.arcTo(u,d+s,u,d,l),a.arcTo(u,d,u+s,d,l),a.closePath(),a.clip(),a.drawImage(o,u,d,s,s),a.restore(),r()},o.onerror=()=>i(Error(`Logo 加载失败: ${t.src}`)),o.src=t.src})}function y(e,n){let r=u(``),i=u(null),a=u(!1),o=t(()=>{if(n.logo.value){let e=n.errorCorrectionLevel.value;return e===`L`||e===`M`?`Q`:e}return n.errorCorrectionLevel.value}),s=t(()=>({width:n.size.value,margin:n.margin.value,errorCorrectionLevel:o.value,color:{dark:n.color.value,light:n.bgColor.value}}));async function c(){let t=e.value;!t||!n.value.value||(await _.toCanvas(t,n.value.value,s.value),n.logo.value&&await v(t,n.logo.value,n.size.value))}async function l(){if(!n.value.value){r.value=``;return}r.value=await _.toString(n.value.value,{...s.value,type:`svg`})}async function d(){if(n.value.value){a.value=!0,i.value=null;try{n.mode.value===`canvas`?await c():await l()}catch(e){i.value=e instanceof Error?e:Error(String(e)),console.error(`二维码渲染失败:`,e)}finally{a.value=!1}}}async function f(e=`png`,t=.92){if(e===`svg`){let e=await _.toString(n.value.value,{...s.value,type:`svg`});return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`}let r=document.createElement(`canvas`);await _.toCanvas(r,n.value.value,s.value),n.logo.value&&await v(r,n.logo.value,n.size.value);let i=e===`jpeg`?`image/jpeg`:`image/png`;return r.toDataURL(i,t)}async function p(e=`qrcode`,t=`png`){let n=await f(t),r=document.createElement(`a`);r.download=`${e}.${t}`,r.href=n,r.click()}return h([n.value,n.size,n.color,n.bgColor,n.errorCorrectionLevel,n.margin,n.mode,n.logo],()=>d(),{deep:!0}),{svgHtml:r,error:i,loading:a,render:d,toDataURL:f,download:p}}const b={class:`c-qrcode`},x=[`innerHTML`],S={key:0,class:`qrcode-label`};var C=e(a({name:`C_QRCode`,__name:`index`,props:{value:{},size:{default:200},color:{default:`#000000`},bgColor:{default:`#FFFFFF`},errorCorrectionLevel:{default:`M`},margin:{default:2},mode:{default:`canvas`},logo:{default:void 0},showBorder:{type:Boolean,default:!0},label:{default:``},showLabel:{type:Boolean,default:!1}},emits:[`error`],setup(e,{expose:t,emit:a}){let _=e,v=a,C=u(null),{svgHtml:w,error:T,render:E,toDataURL:D,download:O}=y(C,{value:f(_,`value`),size:f(_,`size`),color:f(_,`color`),bgColor:f(_,`bgColor`),errorCorrectionLevel:f(_,`errorCorrectionLevel`),margin:f(_,`margin`),mode:f(_,`mode`),logo:f(_,`logo`)});return h(T,e=>{e&&v(`error`,e)}),c(()=>E()),t({toDataURL:(e,t)=>D(e,t),download:(e,t)=>O(e,t),refresh:()=>E()}),(e,t)=>(l(),r(`div`,b,[i(`div`,{class:o([`qrcode-wrapper`,{"with-border":e.showBorder}])},[g(i(`canvas`,{ref_key:`canvasRef`,ref:C},null,512),[[m,e.mode===`canvas`]]),e.mode===`svg`?(l(),r(`div`,{key:0,class:`qrcode-svg`,style:s({width:`${e.size}px`,height:`${e.size}px`}),innerHTML:p(w)},null,12,x)):n(`v-if`,!0)],2),e.showLabel&&e.label?(l(),r(`div`,S,d(e.label),1)):n(`v-if`,!0)]))}}),[[`__scopeId`,`data-v-7a4201b5`]]);export{y as n,C as t};
+import{t as e}from"./export-helper.js";import{computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,defineComponent as a,normalizeClass as o,normalizeStyle as s,onMounted as c,openBlock as l,ref as u,toDisplayString as d,toRef as f,unref as p,vShow as m,watch as h,withDirectives as g}from"vue";import _ from"qrcode";function v(e,t,n){return new Promise((r,i)=>{let a=e.getContext(`2d`);if(!a)return i(Error(`Canvas context 不可用`));let o=new Image;o.crossOrigin=`anonymous`,o.onload=()=>{let i=t.size??.2,s=Math.floor(n*i),c=t.padding??4,l=t.borderRadius??4,u=(e.width-s)/2,d=(e.height-s)/2;a.save();let f=u-c,p=d-c,m=s+c*2,h=l+c;a.beginPath(),a.moveTo(f+h,p),a.arcTo(f+m,p,f+m,p+m,h),a.arcTo(f+m,p+m,f,p+m,h),a.arcTo(f,p+m,f,p,h),a.arcTo(f,p,f+m,p,h),a.closePath(),a.fillStyle=t.bgColor??`#ffffff`,a.fill(),a.beginPath(),a.moveTo(u+l,d),a.arcTo(u+s,d,u+s,d+s,l),a.arcTo(u+s,d+s,u,d+s,l),a.arcTo(u,d+s,u,d,l),a.arcTo(u,d,u+s,d,l),a.closePath(),a.clip(),a.drawImage(o,u,d,s,s),a.restore(),r()},o.onerror=()=>i(Error(`Logo 加载失败: ${t.src}`)),o.src=t.src})}function y(e,n){let r=u(``),i=u(null),a=u(!1),o=t(()=>{if(n.logo.value){let e=n.errorCorrectionLevel.value;return e===`L`||e===`M`?`Q`:e}return n.errorCorrectionLevel.value}),s=t(()=>({width:n.size.value,margin:n.margin.value,errorCorrectionLevel:o.value,color:{dark:n.color.value,light:n.bgColor.value}}));async function c(){let t=e.value;!t||!n.value.value||(await _.toCanvas(t,n.value.value,s.value),n.logo.value&&await v(t,n.logo.value,n.size.value))}async function l(){if(!n.value.value){r.value=``;return}r.value=await _.toString(n.value.value,{...s.value,type:`svg`})}async function d(){if(n.value.value){a.value=!0,i.value=null;try{n.mode.value===`canvas`?await c():await l()}catch(e){i.value=e instanceof Error?e:Error(String(e)),console.error(`二维码渲染失败:`,e)}finally{a.value=!1}}}async function f(e=`png`,t=.92){if(e===`svg`){let e=await _.toString(n.value.value,{...s.value,type:`svg`});return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`}let r=document.createElement(`canvas`);await _.toCanvas(r,n.value.value,s.value),n.logo.value&&await v(r,n.logo.value,n.size.value);let i=e===`jpeg`?`image/jpeg`:`image/png`;return r.toDataURL(i,t)}async function p(e=`qrcode`,t=`png`){let n=await f(t),r=document.createElement(`a`);r.download=`${e}.${t}`,r.href=n,r.click()}return h([n.value,n.size,n.color,n.bgColor,n.errorCorrectionLevel,n.margin,n.mode,n.logo],()=>d(),{deep:!0}),{svgHtml:r,error:i,loading:a,render:d,toDataURL:f,download:p}}const b={class:`c-qrcode`},x=[`innerHTML`],S={key:0,class:`qrcode-label`};var C=e(a({name:`C_QRCode`,__name:`index`,props:{value:{},size:{default:200},color:{default:`#000000`},bgColor:{default:`#FFFFFF`},errorCorrectionLevel:{default:`M`},margin:{default:2},mode:{default:`canvas`},logo:{default:void 0},showBorder:{type:Boolean,default:!0},label:{default:``},showLabel:{type:Boolean,default:!1}},emits:[`error`],setup(e,{expose:t,emit:a}){let _=e,v=a,C=u(null),{svgHtml:w,error:T,render:E,toDataURL:D,download:O}=y(C,{value:f(_,`value`),size:f(_,`size`),color:f(_,`color`),bgColor:f(_,`bgColor`),errorCorrectionLevel:f(_,`errorCorrectionLevel`),margin:f(_,`margin`),mode:f(_,`mode`),logo:f(_,`logo`)});return h(T,e=>{e&&v(`error`,e)}),c(()=>E()),t({toDataURL:(e,t)=>D(e,t),download:(e,t)=>O(e,t),refresh:()=>E()}),(e,t)=>(l(),r(`div`,b,[i(`div`,{class:o([`qrcode-wrapper`,{"with-border":e.showBorder}])},[g(i(`canvas`,{ref_key:`canvasRef`,ref:C},null,512),[[m,e.mode===`canvas`]]),e.mode===`svg`?(l(),r(`div`,{key:0,class:`qrcode-svg`,style:s({width:`${e.size}px`,height:`${e.size}px`}),innerHTML:p(w)},null,12,x)):n(`v-if`,!0)],2),e.showLabel&&e.label?(l(),r(`div`,S,d(e.label),1)):n(`v-if`,!0)]))}}),[[`__scopeId`,`data-v-fe18e0fe`]]);export{y as n,C as t};
 //# sourceMappingURL=C_QRCode2.js.map