@robot-admin/naive-ui-components 0.6.28 → 0.6.30

package/dist/C_OrgChart.css

@@ -0,0 +1,282 @@
+/* unplugin-vue-components disabled *//* C_OrgChart 组织架构图组件样式 */
+.c-orgchart {
+  --c-orgchart-line-color: #d1d5db;
+  --c-orgchart-line-width: 2px;
+  --c-orgchart-node-spacing: 24px;
+  --c-orgchart-level-spacing: 48px;
+  --c-orgchart-node-bg: var(--card-color, #ffffff);
+  --c-orgchart-node-border: var(--border-color, #e5e7eb);
+  --c-orgchart-node-shadow: rgba(0, 0, 0, 0.06);
+  --c-orgchart-node-hover-shadow: rgba(0, 0, 0, 0.12);
+  --c-orgchart-label-color: var(--text-color-1, #262626);
+  --c-orgchart-subtitle-color: var(--text-color-3, #999999);
+  --c-orgchart-toggle-bg: var(--card-color, #ffffff);
+  --c-orgchart-toggle-color: var(--text-color-2, #666666);
+  --c-orgchart-avatar-size: 36px;
+  --c-orgchart-controls-bg: var(--card-color, #ffffff);
+  --c-orgchart-controls-shadow: rgba(0, 0, 0, 0.1);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+}
+.c-orgchart:active {
+  cursor: grabbing;
+}
+.c-orgchart__viewport {
+  display: inline-flex;
+  justify-content: center;
+  width: 100%;
+  padding: 32px;
+  transition: transform 0.15s ease;
+}
+
+/* ─── 节点包裹器（垂直布局） ─── */
+.c-orgchart--vertical .c-orgchart__node-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.c-orgchart--vertical .c-orgchart__children {
+  display: flex;
+  justify-content: center;
+  padding-top: var(--c-orgchart-level-spacing);
+  gap: var(--c-orgchart-node-spacing);
+  position: relative;
+  /* 垂直连线：父→子 */
+  /* 横连线：兄弟节点 */
+  /* 兄弟之间的水平线 */
+}
+.c-orgchart--vertical .c-orgchart__children::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--c-orgchart-line-width);
+  height: calc(var(--c-orgchart-level-spacing) / 2);
+  background: var(--c-orgchart-line-color);
+  transform: translateX(-50%);
+}
+.c-orgchart--vertical .c-orgchart__children > .c-orgchart__node-wrapper {
+  position: relative;
+}
+.c-orgchart--vertical .c-orgchart__children > .c-orgchart__node-wrapper::before {
+  content: "";
+  position: absolute;
+  top: calc(var(--c-orgchart-level-spacing) / -2);
+  left: 50%;
+  width: var(--c-orgchart-line-width);
+  height: calc(var(--c-orgchart-level-spacing) / 2);
+  background: var(--c-orgchart-line-color);
+  transform: translateX(-50%);
+}
+.c-orgchart--vertical .c-orgchart__children > .c-orgchart__node-wrapper:not(:only-child)::after {
+  content: "";
+  position: absolute;
+  top: calc(var(--c-orgchart-level-spacing) / -2);
+  height: var(--c-orgchart-line-width);
+  background: var(--c-orgchart-line-color);
+}
+.c-orgchart--vertical .c-orgchart__children > .c-orgchart__node-wrapper:not(:only-child):first-child::after {
+  left: 50%;
+  right: calc(-1 * var(--c-orgchart-node-spacing) / 2);
+}
+.c-orgchart--vertical .c-orgchart__children > .c-orgchart__node-wrapper:not(:only-child):last-child::after {
+  left: calc(-1 * var(--c-orgchart-node-spacing) / 2);
+  right: 50%;
+}
+.c-orgchart--vertical .c-orgchart__children > .c-orgchart__node-wrapper:not(:only-child):not(:first-child):not(:last-child)::after {
+  left: calc(-1 * var(--c-orgchart-node-spacing) / 2);
+  right: calc(-1 * var(--c-orgchart-node-spacing) / 2);
+}
+
+/* ─── 水平布局 ─── */
+.c-orgchart--horizontal .c-orgchart__node-wrapper {
+  display: flex;
+  align-items: center;
+}
+.c-orgchart--horizontal .c-orgchart__children {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: var(--c-orgchart-level-spacing);
+  gap: var(--c-orgchart-node-spacing);
+  position: relative;
+}
+.c-orgchart--horizontal .c-orgchart__children::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  height: var(--c-orgchart-line-width);
+  width: calc(var(--c-orgchart-level-spacing) / 2);
+  background: var(--c-orgchart-line-color);
+  transform: translateY(-50%);
+}
+.c-orgchart--horizontal .c-orgchart__children > .c-orgchart__node-wrapper {
+  position: relative;
+}
+.c-orgchart--horizontal .c-orgchart__children > .c-orgchart__node-wrapper::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--c-orgchart-level-spacing) / -2);
+  top: 50%;
+  width: calc(var(--c-orgchart-level-spacing) / 2);
+  height: var(--c-orgchart-line-width);
+  background: var(--c-orgchart-line-color);
+  transform: translateY(-50%);
+}
+.c-orgchart--horizontal .c-orgchart__children > .c-orgchart__node-wrapper:not(:only-child)::after {
+  content: "";
+  position: absolute;
+  left: calc(var(--c-orgchart-level-spacing) / -2);
+  width: var(--c-orgchart-line-width);
+  background: var(--c-orgchart-line-color);
+}
+.c-orgchart--horizontal .c-orgchart__children > .c-orgchart__node-wrapper:not(:only-child):first-child::after {
+  top: 50%;
+  bottom: calc(-1 * var(--c-orgchart-node-spacing) / 2);
+}
+.c-orgchart--horizontal .c-orgchart__children > .c-orgchart__node-wrapper:not(:only-child):last-child::after {
+  top: calc(-1 * var(--c-orgchart-node-spacing) / 2);
+  bottom: 50%;
+}
+.c-orgchart--horizontal .c-orgchart__children > .c-orgchart__node-wrapper:not(:only-child):not(:first-child):not(:last-child)::after {
+  top: calc(-1 * var(--c-orgchart-node-spacing) / 2);
+  bottom: calc(-1 * var(--c-orgchart-node-spacing) / 2);
+}
+
+/* ─── 圆角连线 ─── */
+.c-orgchart--line-rounded .c-orgchart__children::before,
+.c-orgchart--line-rounded .c-orgchart__node-wrapper::before,
+.c-orgchart--line-rounded .c-orgchart__node-wrapper::after {
+  border-radius: 4px;
+}
+
+/* ─── 节点卡片 ─── */
+.c-orgchart__node {
+  position: relative;
+  background: var(--c-orgchart-node-bg);
+  border: 1px solid var(--c-orgchart-node-border);
+  border-radius: 8px;
+  padding: 12px 16px;
+  cursor: pointer;
+  box-shadow: 0 2px 8px var(--c-orgchart-node-shadow);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  white-space: nowrap;
+}
+.c-orgchart__node:hover {
+  box-shadow: 0 4px 16px var(--c-orgchart-node-hover-shadow);
+  transform: translateY(-2px);
+}
+.c-orgchart__node--leaf {
+  opacity: 0.9;
+}
+
+/* ─── 默认节点布局 ─── */
+.c-orgchart__node-default {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.c-orgchart__avatar {
+  width: var(--c-orgchart-avatar-size);
+  height: var(--c-orgchart-avatar-size);
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.c-orgchart__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.c-orgchart__info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.c-orgchart__label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--c-orgchart-label-color);
+}
+.c-orgchart__subtitle {
+  font-size: 12px;
+  color: var(--c-orgchart-subtitle-color);
+}
+
+/* ─── 折叠按钮 ─── */
+.c-orgchart__toggle {
+  position: absolute;
+  bottom: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid var(--c-orgchart-node-border);
+  background: var(--c-orgchart-toggle-bg);
+  color: var(--c-orgchart-toggle-color);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  transition: background 0.2s ease;
+}
+.c-orgchart__toggle:hover {
+  background: color-mix(in srgb, var(--c-orgchart-node-border) 20%, var(--c-orgchart-toggle-bg));
+}
+.c-orgchart--horizontal .c-orgchart__toggle {
+  bottom: auto;
+  left: auto;
+  right: -12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ─── 缩放控制 ─── */
+.c-orgchart__controls {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--c-orgchart-controls-bg);
+  border-radius: 8px;
+  padding: 4px;
+  box-shadow: 0 2px 8px var(--c-orgchart-controls-shadow);
+  z-index: 10;
+}
+.c-orgchart__control-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--c-orgchart-label-color);
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+}
+.c-orgchart__control-btn:hover {
+  background: color-mix(in srgb, var(--c-orgchart-node-border) 30%, transparent);
+}
+.c-orgchart__zoom-level {
+  font-size: 12px;
+  color: var(--c-orgchart-subtitle-color);
+  min-width: 40px;
+  text-align: center;
+}
+
+/*# sourceMappingURL=C_OrgChart-ChZu346B.css.map*/

package/dist/C_OrgChart.d.cts

@@ -0,0 +1,2 @@
+import { a as OrgChartProps, i as OrgChartNode, n as OrgChartDirection, r as OrgChartLineStyle, t as _default } from "./index20.vue.js";
+export { _default as C_OrgChart, type OrgChartDirection, type OrgChartLineStyle, type OrgChartNode, type OrgChartProps };

package/dist/C_OrgChart.d.ts

@@ -0,0 +1,2 @@
+import { a as OrgChartProps, i as OrgChartNode, n as OrgChartDirection, r as OrgChartLineStyle, t as _default } from "./index20.vue.js";
+export { _default as C_OrgChart, type OrgChartDirection, type OrgChartLineStyle, type OrgChartNode, type OrgChartProps };

package/dist/C_OrgChart.js

@@ -0,0 +1 @@
+import{t as e}from"./C_OrgChart2.js";export{e as C_OrgChart};

package/dist/C_OrgChart.js.map

@@ -0,0 +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 */<!--\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","/* unplugin-vue-components disabled */<!--\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","<!--\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

@@ -0,0 +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};
+//# sourceMappingURL=C_OrgChart2.js.map

package/dist/C_OrgChart2.js.map

@@ -0,0 +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 */<!--\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","/* unplugin-vue-components disabled */<!--\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","<!--\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.d.cts

@@ -1,2 +1,2 @@
-import { t as _default } from "./index20.vue.js";
+import { t as _default } from "./index21.vue.js";
 export { _default as C_Progress };

package/dist/C_Progress.d.ts

@@ -1,2 +1,2 @@
-import { t as _default } from "./index20.vue.js";
+import { t as _default } from "./index21.vue.js";
 export { _default as C_Progress };