@robot-admin/naive-ui-components 0.6.29 → 0.6.31

package/dist/C_Markdown2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Markdown2.js","names":["isDark","modelValue","height","placeholder","toolbar","mode","tocNavPosition","defaultFullscreen","autofocus","includeLevel","leftToolbar","rightToolbar"],"sources":["../src/components/C_Markdown/index.vue","../src/components/C_Markdown/index.vue","../src/components/C_Markdown/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-20\n * @Description: Markdown 编辑器封装组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    class=\"c-markdown-wrapper\"\n    :class=\"{ 'is-dark': isDark }\"\n  >\n    <VMdEditor\n      ref=\"editorRef\"\n      :model-value=\"modelValue\"\n      :height=\"height\"\n      :placeholder=\"placeholder\"\n      :toolbar=\"toolbar\"\n      :mode=\"mode\"\n      :upload-image-config=\"computedUploadImageConfig\"\n      :toc-nav-position=\"tocNavPosition\"\n      :default-fullscreen=\"defaultFullscreen\"\n      :autofocus=\"autofocus\"\n      :include-level=\"includeLevel\"\n      :left-toolbar=\"leftToolbar\"\n      :right-toolbar=\"rightToolbar\"\n      :default-show-toc=\"true\"\n      @update:model-value=\"handleInput\"\n      @change=\"handleChange\"\n      @save=\"handleSave\"\n      @upload-image=\"handleUploadImage\"\n      @fullscreen-change=\"handleFullscreenChange\"\n      @copy-code-success=\"handleCopyCodeSuccess\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, computed, watch, onMounted } from 'vue'\n  import VMdEditor from '@kangc/v-md-editor'\n\n  defineOptions({ name: 'C_Markdown' })\n\n  export type InsertImageFunction = (config: {\n    url: string\n    desc?: string\n    width?: string | number\n    height?: string | number\n  }) => void\n\n  interface Props {\n    modelValue?: string\n    height?: string | number\n    disabled?: boolean\n    placeholder?: string\n    mode?: 'edit' | 'editable' | 'preview'\n    toolbar?: object\n    uploadImageConfig?: {\n      accept?: string\n      multiple?: boolean\n      [key: string]: any\n    }\n    tocNavPosition?: 'left' | 'right'\n    defaultFullscreen?: boolean\n    autofocus?: boolean\n    includeLevel?: number[]\n    leftToolbar?: string\n    rightToolbar?: string\n    maxLength?: number\n    showWordCount?: boolean\n    autoSave?: boolean\n    autoSaveInterval?: number\n    /** 是否为暗色主题（外部传入） */\n    isDark?: boolean\n  }\n\n  const props = withDefaults(defineProps<Props>(), {\n    modelValue: '',\n    height: '400px',\n    disabled: false,\n    placeholder: '请输入 Markdown 内容...',\n    mode: 'editable',\n    tocNavPosition: 'right',\n    defaultFullscreen: false,\n    autofocus: false,\n    includeLevel: () => [1, 2, 3, 4, 5, 6],\n    leftToolbar:\n      'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\n    rightToolbar: 'preview toc sync-scroll fullscreen',\n    maxLength: 50000,\n    showWordCount: true,\n    autoSave: false,\n    autoSaveInterval: 30000,\n    isDark: false,\n  })\n\n  interface Emits {\n    'update:modelValue': [value: string]\n    change: [text: string, html: string]\n    save: [text: string, html: string]\n    'upload-image': [\n      event: Event,\n      insertImage: InsertImageFunction,\n      files: FileList,\n    ]\n    'fullscreen-change': [isFullscreen: boolean]\n    'copy-code-success': [text: string]\n    'word-count-change': [count: number]\n    'auto-save': [text: string]\n    'max-length-exceeded': [currentLength: number, maxLength: number]\n  }\n\n  const emit = defineEmits<Emits>()\n\n  const editorRef = ref<any>(null)\n  const cachedHtml = ref('')\n\n  const wordCount = computed(() => {\n    return props.modelValue?.length || 0\n  })\n\n  const computedUploadImageConfig = computed(() => {\n    const defaultConfig = {\n      accept: 'image/*',\n      multiple: false,\n    }\n    return props.uploadImageConfig\n      ? { ...defaultConfig, ...props.uploadImageConfig }\n      : defaultConfig\n  })\n\n  onMounted(() => {\n    if (props.showWordCount && props.modelValue) {\n      emit('word-count-change', props.modelValue.length)\n    }\n  })\n\n  watch(\n    () => props.modelValue,\n    newValue => {\n      if (props.showWordCount) {\n        emit('word-count-change', newValue?.length || 0)\n      }\n    },\n    { immediate: true }\n  )\n\n  const handleInput = (value: string) => {\n    if (value.length > props.maxLength) {\n      emit('max-length-exceeded', value.length, props.maxLength)\n      return\n    }\n    emit('update:modelValue', value)\n    if (props.showWordCount) {\n      emit('word-count-change', value.length)\n    }\n  }\n\n  const handleChange = (text: string, html: string) => {\n    cachedHtml.value = html\n    emit('change', text, html)\n    if (props.autoSave) {\n      autoSave(text)\n    }\n  }\n\n  const handleSave = (text: string, html: string) => {\n    emit('save', text, html)\n  }\n\n  const handleUploadImage = (\n    event: Event,\n    insertImage: InsertImageFunction,\n    files: FileList\n  ) => {\n    emit('upload-image', event, insertImage, files)\n  }\n\n  const handleFullscreenChange = (isFullscreen: boolean) => {\n    emit('fullscreen-change', isFullscreen)\n  }\n\n  const handleCopyCodeSuccess = (text: string) => {\n    emit('copy-code-success', text)\n  }\n\n  let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\n\n  const autoSave = (text: string) => {\n    if (autoSaveTimer) clearTimeout(autoSaveTimer)\n    autoSaveTimer = setTimeout(() => {\n      emit('auto-save', text)\n    }, props.autoSaveInterval)\n  }\n\n  const focus = () => {\n    editorRef.value?.focus()\n  }\n\n  const getHtml = (): string => {\n    return cachedHtml.value\n  }\n\n  const insertText = (text: string) => {\n    editorRef.value?.insert((selected: string) => ({\n      text: `${selected}${text}`,\n      selected: text,\n    }))\n  }\n\n  defineExpose({\n    focus,\n    getHtml,\n    insertText,\n    wordCount,\n  })\n</script>\n\n<style lang=\"scss\" scoped>\n  @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-20\n * @Description: Markdown 编辑器封装组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    class=\"c-markdown-wrapper\"\n    :class=\"{ 'is-dark': isDark }\"\n  >\n    <VMdEditor\n      ref=\"editorRef\"\n      :model-value=\"modelValue\"\n      :height=\"height\"\n      :placeholder=\"placeholder\"\n      :toolbar=\"toolbar\"\n      :mode=\"mode\"\n      :upload-image-config=\"computedUploadImageConfig\"\n      :toc-nav-position=\"tocNavPosition\"\n      :default-fullscreen=\"defaultFullscreen\"\n      :autofocus=\"autofocus\"\n      :include-level=\"includeLevel\"\n      :left-toolbar=\"leftToolbar\"\n      :right-toolbar=\"rightToolbar\"\n      :default-show-toc=\"true\"\n      @update:model-value=\"handleInput\"\n      @change=\"handleChange\"\n      @save=\"handleSave\"\n      @upload-image=\"handleUploadImage\"\n      @fullscreen-change=\"handleFullscreenChange\"\n      @copy-code-success=\"handleCopyCodeSuccess\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, computed, watch, onMounted } from 'vue'\n  import VMdEditor from '@kangc/v-md-editor'\n\n  defineOptions({ name: 'C_Markdown' })\n\n  export type InsertImageFunction = (config: {\n    url: string\n    desc?: string\n    width?: string | number\n    height?: string | number\n  }) => void\n\n  interface Props {\n    modelValue?: string\n    height?: string | number\n    disabled?: boolean\n    placeholder?: string\n    mode?: 'edit' | 'editable' | 'preview'\n    toolbar?: object\n    uploadImageConfig?: {\n      accept?: string\n      multiple?: boolean\n      [key: string]: any\n    }\n    tocNavPosition?: 'left' | 'right'\n    defaultFullscreen?: boolean\n    autofocus?: boolean\n    includeLevel?: number[]\n    leftToolbar?: string\n    rightToolbar?: string\n    maxLength?: number\n    showWordCount?: boolean\n    autoSave?: boolean\n    autoSaveInterval?: number\n    /** 是否为暗色主题（外部传入） */\n    isDark?: boolean\n  }\n\n  const props = withDefaults(defineProps<Props>(), {\n    modelValue: '',\n    height: '400px',\n    disabled: false,\n    placeholder: '请输入 Markdown 内容...',\n    mode: 'editable',\n    tocNavPosition: 'right',\n    defaultFullscreen: false,\n    autofocus: false,\n    includeLevel: () => [1, 2, 3, 4, 5, 6],\n    leftToolbar:\n      'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\n    rightToolbar: 'preview toc sync-scroll fullscreen',\n    maxLength: 50000,\n    showWordCount: true,\n    autoSave: false,\n    autoSaveInterval: 30000,\n    isDark: false,\n  })\n\n  interface Emits {\n    'update:modelValue': [value: string]\n    change: [text: string, html: string]\n    save: [text: string, html: string]\n    'upload-image': [\n      event: Event,\n      insertImage: InsertImageFunction,\n      files: FileList,\n    ]\n    'fullscreen-change': [isFullscreen: boolean]\n    'copy-code-success': [text: string]\n    'word-count-change': [count: number]\n    'auto-save': [text: string]\n    'max-length-exceeded': [currentLength: number, maxLength: number]\n  }\n\n  const emit = defineEmits<Emits>()\n\n  const editorRef = ref<any>(null)\n  const cachedHtml = ref('')\n\n  const wordCount = computed(() => {\n    return props.modelValue?.length || 0\n  })\n\n  const computedUploadImageConfig = computed(() => {\n    const defaultConfig = {\n      accept: 'image/*',\n      multiple: false,\n    }\n    return props.uploadImageConfig\n      ? { ...defaultConfig, ...props.uploadImageConfig }\n      : defaultConfig\n  })\n\n  onMounted(() => {\n    if (props.showWordCount && props.modelValue) {\n      emit('word-count-change', props.modelValue.length)\n    }\n  })\n\n  watch(\n    () => props.modelValue,\n    newValue => {\n      if (props.showWordCount) {\n        emit('word-count-change', newValue?.length || 0)\n      }\n    },\n    { immediate: true }\n  )\n\n  const handleInput = (value: string) => {\n    if (value.length > props.maxLength) {\n      emit('max-length-exceeded', value.length, props.maxLength)\n      return\n    }\n    emit('update:modelValue', value)\n    if (props.showWordCount) {\n      emit('word-count-change', value.length)\n    }\n  }\n\n  const handleChange = (text: string, html: string) => {\n    cachedHtml.value = html\n    emit('change', text, html)\n    if (props.autoSave) {\n      autoSave(text)\n    }\n  }\n\n  const handleSave = (text: string, html: string) => {\n    emit('save', text, html)\n  }\n\n  const handleUploadImage = (\n    event: Event,\n    insertImage: InsertImageFunction,\n    files: FileList\n  ) => {\n    emit('upload-image', event, insertImage, files)\n  }\n\n  const handleFullscreenChange = (isFullscreen: boolean) => {\n    emit('fullscreen-change', isFullscreen)\n  }\n\n  const handleCopyCodeSuccess = (text: string) => {\n    emit('copy-code-success', text)\n  }\n\n  let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\n\n  const autoSave = (text: string) => {\n    if (autoSaveTimer) clearTimeout(autoSaveTimer)\n    autoSaveTimer = setTimeout(() => {\n      emit('auto-save', text)\n    }, props.autoSaveInterval)\n  }\n\n  const focus = () => {\n    editorRef.value?.focus()\n  }\n\n  const getHtml = (): string => {\n    return cachedHtml.value\n  }\n\n  const insertText = (text: string) => {\n    editorRef.value?.insert((selected: string) => ({\n      text: `${selected}${text}`,\n      selected: text,\n    }))\n  }\n\n  defineExpose({\n    focus,\n    getHtml,\n    insertText,\n    wordCount,\n  })\n</script>\n\n<style lang=\"scss\" scoped>\n  @use './index.scss';\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-20\n * @Description: Markdown 编辑器封装组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    class=\"c-markdown-wrapper\"\n    :class=\"{ 'is-dark': isDark }\"\n  >\n    <VMdEditor\n      ref=\"editorRef\"\n      :model-value=\"modelValue\"\n      :height=\"height\"\n      :placeholder=\"placeholder\"\n      :toolbar=\"toolbar\"\n      :mode=\"mode\"\n      :upload-image-config=\"computedUploadImageConfig\"\n      :toc-nav-position=\"tocNavPosition\"\n      :default-fullscreen=\"defaultFullscreen\"\n      :autofocus=\"autofocus\"\n      :include-level=\"includeLevel\"\n      :left-toolbar=\"leftToolbar\"\n      :right-toolbar=\"rightToolbar\"\n      :default-show-toc=\"true\"\n      @update:model-value=\"handleInput\"\n      @change=\"handleChange\"\n      @save=\"handleSave\"\n      @upload-image=\"handleUploadImage\"\n      @fullscreen-change=\"handleFullscreenChange\"\n      @copy-code-success=\"handleCopyCodeSuccess\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, computed, watch, onMounted } from 'vue'\n  import VMdEditor from '@kangc/v-md-editor'\n\n  defineOptions({ name: 'C_Markdown' })\n\n  export type InsertImageFunction = (config: {\n    url: string\n    desc?: string\n    width?: string | number\n    height?: string | number\n  }) => void\n\n  interface Props {\n    modelValue?: string\n    height?: string | number\n    disabled?: boolean\n    placeholder?: string\n    mode?: 'edit' | 'editable' | 'preview'\n    toolbar?: object\n    uploadImageConfig?: {\n      accept?: string\n      multiple?: boolean\n      [key: string]: any\n    }\n    tocNavPosition?: 'left' | 'right'\n    defaultFullscreen?: boolean\n    autofocus?: boolean\n    includeLevel?: number[]\n    leftToolbar?: string\n    rightToolbar?: string\n    maxLength?: number\n    showWordCount?: boolean\n    autoSave?: boolean\n    autoSaveInterval?: number\n    /** 是否为暗色主题（外部传入） */\n    isDark?: boolean\n  }\n\n  const props = withDefaults(defineProps<Props>(), {\n    modelValue: '',\n    height: '400px',\n    disabled: false,\n    placeholder: '请输入 Markdown 内容...',\n    mode: 'editable',\n    tocNavPosition: 'right',\n    defaultFullscreen: false,\n    autofocus: false,\n    includeLevel: () => [1, 2, 3, 4, 5, 6],\n    leftToolbar:\n      'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\n    rightToolbar: 'preview toc sync-scroll fullscreen',\n    maxLength: 50000,\n    showWordCount: true,\n    autoSave: false,\n    autoSaveInterval: 30000,\n    isDark: false,\n  })\n\n  interface Emits {\n    'update:modelValue': [value: string]\n    change: [text: string, html: string]\n    save: [text: string, html: string]\n    'upload-image': [\n      event: Event,\n      insertImage: InsertImageFunction,\n      files: FileList,\n    ]\n    'fullscreen-change': [isFullscreen: boolean]\n    'copy-code-success': [text: string]\n    'word-count-change': [count: number]\n    'auto-save': [text: string]\n    'max-length-exceeded': [currentLength: number, maxLength: number]\n  }\n\n  const emit = defineEmits<Emits>()\n\n  const editorRef = ref<any>(null)\n  const cachedHtml = ref('')\n\n  const wordCount = computed(() => {\n    return props.modelValue?.length || 0\n  })\n\n  const computedUploadImageConfig = computed(() => {\n    const defaultConfig = {\n      accept: 'image/*',\n      multiple: false,\n    }\n    return props.uploadImageConfig\n      ? { ...defaultConfig, ...props.uploadImageConfig }\n      : defaultConfig\n  })\n\n  onMounted(() => {\n    if (props.showWordCount && props.modelValue) {\n      emit('word-count-change', props.modelValue.length)\n    }\n  })\n\n  watch(\n    () => props.modelValue,\n    newValue => {\n      if (props.showWordCount) {\n        emit('word-count-change', newValue?.length || 0)\n      }\n    },\n    { immediate: true }\n  )\n\n  const handleInput = (value: string) => {\n    if (value.length > props.maxLength) {\n      emit('max-length-exceeded', value.length, props.maxLength)\n      return\n    }\n    emit('update:modelValue', value)\n    if (props.showWordCount) {\n      emit('word-count-change', value.length)\n    }\n  }\n\n  const handleChange = (text: string, html: string) => {\n    cachedHtml.value = html\n    emit('change', text, html)\n    if (props.autoSave) {\n      autoSave(text)\n    }\n  }\n\n  const handleSave = (text: string, html: string) => {\n    emit('save', text, html)\n  }\n\n  const handleUploadImage = (\n    event: Event,\n    insertImage: InsertImageFunction,\n    files: FileList\n  ) => {\n    emit('upload-image', event, insertImage, files)\n  }\n\n  const handleFullscreenChange = (isFullscreen: boolean) => {\n    emit('fullscreen-change', isFullscreen)\n  }\n\n  const handleCopyCodeSuccess = (text: string) => {\n    emit('copy-code-success', text)\n  }\n\n  let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\n\n  const autoSave = (text: string) => {\n    if (autoSaveTimer) clearTimeout(autoSaveTimer)\n    autoSaveTimer = setTimeout(() => {\n      emit('auto-save', text)\n    }, props.autoSaveInterval)\n  }\n\n  const focus = () => {\n    editorRef.value?.focus()\n  }\n\n  const getHtml = (): string => {\n    return cachedHtml.value\n  }\n\n  const insertText = (text: string) => {\n    editorRef.value?.insert((selected: string) => ({\n      text: `${selected}${text}`,\n      selected: text,\n    }))\n  }\n\n  defineExpose({\n    focus,\n    getHtml,\n    insertText,\n    wordCount,\n  })\n</script>\n\n<style lang=\"scss\" scoped>\n  @use './index.scss';\n</style>\n"],"mappings":"uoCE4EE,IAAM,EAAQ,EAoCR,EAAO,EAEP,EAAY,EAAS,KAAI,CACzB,EAAa,EAAI,GAAE,CAEnB,EAAY,MACT,EAAM,YAAY,QAAU,EACpC,CAEK,EAA4B,MAAe,CAC/C,IAAM,EAAgB,CACpB,OAAQ,UACR,SAAU,GACZ,CACA,OAAO,EAAM,kBACT,CAAE,GAAG,EAAe,GAAG,EAAM,kBAAkB,CAC/C,GACL,CAED,MAAgB,CACV,EAAM,eAAiB,EAAM,YAC/B,EAAK,oBAAqB,EAAM,WAAW,OAAM,EAEpD,CAED,MACQ,EAAM,WACZ,GAAY,CACN,EAAM,eACR,EAAK,oBAAqB,GAAU,QAAU,EAAC,EAGnD,CAAE,UAAW,GAAK,CACpB,CAEA,IAAM,EAAe,GAAkB,CACrC,GAAI,EAAM,OAAS,EAAM,UAAW,CAClC,EAAK,sBAAuB,EAAM,OAAQ,EAAM,UAAS,CACzD,OAEF,EAAK,oBAAqB,EAAK,CAC3B,EAAM,eACR,EAAK,oBAAqB,EAAM,OAAM,EAIpC,GAAgB,EAAc,IAAiB,CACnD,EAAW,MAAQ,EACnB,EAAK,SAAU,EAAM,EAAI,CACrB,EAAM,UACR,EAAS,EAAI,EAIX,GAAc,EAAc,IAAiB,CACjD,EAAK,OAAQ,EAAM,EAAI,EAGnB,GACJ,EACA,EACA,IACG,CACH,EAAK,eAAgB,EAAO,EAAa,EAAK,EAG1C,EAA0B,GAA0B,CACxD,EAAK,oBAAqB,EAAY,EAGlC,EAAyB,GAAiB,CAC9C,EAAK,oBAAqB,EAAI,EAG5B,EAAsD,KAEpD,EAAY,GAAiB,CAC7B,GAAe,aAAa,EAAa,CAC7C,EAAgB,eAAiB,CAC/B,EAAK,YAAa,EAAI,EACrB,EAAM,iBAAgB,SAkB3B,EAAa,CACX,UAhBkB,CAClB,EAAU,OAAO,OAAM,EAgBvB,YAZO,EAAW,MAalB,WAVkB,GAAiB,CACnC,EAAU,OAAO,OAAQ,IAAsB,CAC7C,KAAM,GAAG,IAAW,IACpB,SAAU,EACX,EAAC,EAOF,YACD,CAAA,aA/MD,EA0BM,MAAA,CAzBJ,MAAK,EAAA,CAAC,qBAAoB,CAAA,UACLA,EAAAA,OAAM,CAAA,CAAA,CAAA,CAAA,CAE3B,EAqBE,EAAA,EAAA,CAAA,SApBI,YAAJ,IAAI,EACH,cAAaC,EAAAA,WACb,OAAQC,EAAAA,OACR,YAAaC,EAAAA,YACb,QAASC,EAAAA,QACT,KAAMC,EAAAA,KACN,sBAAqB,EAAA,MACrB,mBAAkBC,EAAAA,eAClB,qBAAoBC,EAAAA,kBACpB,UAAWC,EAAAA,UACX,gBAAeC,EAAAA,aACf,eAAcC,EAAAA,YACd,gBAAeC,EAAAA,aACf,mBAAkB,GAClB,sBAAoB,EACpB,SAAQ,EACR,OAAM,EACN,cAAc,EACd,mBAAmB,EACnB,kBAAmB"}
+{"version":3,"file":"C_Markdown2.js","names":["isDark","modelValue","height","placeholder","toolbar","mode","tocNavPosition","defaultFullscreen","autofocus","includeLevel","leftToolbar","rightToolbar"],"sources":["../src/components/C_Markdown/index.vue","../src/components/C_Markdown/index.vue","../src/components/C_Markdown/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-20\r\n * @Description: Markdown 编辑器封装组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-markdown-wrapper\"\r\n    :class=\"{ 'is-dark': isDark }\"\r\n  >\r\n    <VMdEditor\r\n      ref=\"editorRef\"\r\n      :model-value=\"modelValue\"\r\n      :height=\"height\"\r\n      :placeholder=\"placeholder\"\r\n      :toolbar=\"toolbar\"\r\n      :mode=\"mode\"\r\n      :upload-image-config=\"computedUploadImageConfig\"\r\n      :toc-nav-position=\"tocNavPosition\"\r\n      :default-fullscreen=\"defaultFullscreen\"\r\n      :autofocus=\"autofocus\"\r\n      :include-level=\"includeLevel\"\r\n      :left-toolbar=\"leftToolbar\"\r\n      :right-toolbar=\"rightToolbar\"\r\n      :default-show-toc=\"true\"\r\n      @update:model-value=\"handleInput\"\r\n      @change=\"handleChange\"\r\n      @save=\"handleSave\"\r\n      @upload-image=\"handleUploadImage\"\r\n      @fullscreen-change=\"handleFullscreenChange\"\r\n      @copy-code-success=\"handleCopyCodeSuccess\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed, watch, onMounted } from 'vue'\r\n  import VMdEditor from '@kangc/v-md-editor'\r\n\r\n  defineOptions({ name: 'C_Markdown' })\r\n\r\n  export type InsertImageFunction = (config: {\r\n    url: string\r\n    desc?: string\r\n    width?: string | number\r\n    height?: string | number\r\n  }) => void\r\n\r\n  interface Props {\r\n    modelValue?: string\r\n    height?: string | number\r\n    disabled?: boolean\r\n    placeholder?: string\r\n    mode?: 'edit' | 'editable' | 'preview'\r\n    toolbar?: object\r\n    uploadImageConfig?: {\r\n      accept?: string\r\n      multiple?: boolean\r\n      [key: string]: any\r\n    }\r\n    tocNavPosition?: 'left' | 'right'\r\n    defaultFullscreen?: boolean\r\n    autofocus?: boolean\r\n    includeLevel?: number[]\r\n    leftToolbar?: string\r\n    rightToolbar?: string\r\n    maxLength?: number\r\n    showWordCount?: boolean\r\n    autoSave?: boolean\r\n    autoSaveInterval?: number\r\n    /** 是否为暗色主题（外部传入） */\r\n    isDark?: boolean\r\n  }\r\n\r\n  const props = withDefaults(defineProps<Props>(), {\r\n    modelValue: '',\r\n    height: '400px',\r\n    disabled: false,\r\n    placeholder: '请输入 Markdown 内容...',\r\n    mode: 'editable',\r\n    tocNavPosition: 'right',\r\n    defaultFullscreen: false,\r\n    autofocus: false,\r\n    includeLevel: () => [1, 2, 3, 4, 5, 6],\r\n    leftToolbar:\r\n      'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\r\n    rightToolbar: 'preview toc sync-scroll fullscreen',\r\n    maxLength: 50000,\r\n    showWordCount: true,\r\n    autoSave: false,\r\n    autoSaveInterval: 30000,\r\n    isDark: false,\r\n  })\r\n\r\n  interface Emits {\r\n    'update:modelValue': [value: string]\r\n    change: [text: string, html: string]\r\n    save: [text: string, html: string]\r\n    'upload-image': [\r\n      event: Event,\r\n      insertImage: InsertImageFunction,\r\n      files: FileList,\r\n    ]\r\n    'fullscreen-change': [isFullscreen: boolean]\r\n    'copy-code-success': [text: string]\r\n    'word-count-change': [count: number]\r\n    'auto-save': [text: string]\r\n    'max-length-exceeded': [currentLength: number, maxLength: number]\r\n  }\r\n\r\n  const emit = defineEmits<Emits>()\r\n\r\n  const editorRef = ref<any>(null)\r\n  const cachedHtml = ref('')\r\n\r\n  const wordCount = computed(() => {\r\n    return props.modelValue?.length || 0\r\n  })\r\n\r\n  const computedUploadImageConfig = computed(() => {\r\n    const defaultConfig = {\r\n      accept: 'image/*',\r\n      multiple: false,\r\n    }\r\n    return props.uploadImageConfig\r\n      ? { ...defaultConfig, ...props.uploadImageConfig }\r\n      : defaultConfig\r\n  })\r\n\r\n  onMounted(() => {\r\n    if (props.showWordCount && props.modelValue) {\r\n      emit('word-count-change', props.modelValue.length)\r\n    }\r\n  })\r\n\r\n  watch(\r\n    () => props.modelValue,\r\n    newValue => {\r\n      if (props.showWordCount) {\r\n        emit('word-count-change', newValue?.length || 0)\r\n      }\r\n    },\r\n    { immediate: true }\r\n  )\r\n\r\n  const handleInput = (value: string) => {\r\n    if (value.length > props.maxLength) {\r\n      emit('max-length-exceeded', value.length, props.maxLength)\r\n      return\r\n    }\r\n    emit('update:modelValue', value)\r\n    if (props.showWordCount) {\r\n      emit('word-count-change', value.length)\r\n    }\r\n  }\r\n\r\n  const handleChange = (text: string, html: string) => {\r\n    cachedHtml.value = html\r\n    emit('change', text, html)\r\n    if (props.autoSave) {\r\n      autoSave(text)\r\n    }\r\n  }\r\n\r\n  const handleSave = (text: string, html: string) => {\r\n    emit('save', text, html)\r\n  }\r\n\r\n  const handleUploadImage = (\r\n    event: Event,\r\n    insertImage: InsertImageFunction,\r\n    files: FileList\r\n  ) => {\r\n    emit('upload-image', event, insertImage, files)\r\n  }\r\n\r\n  const handleFullscreenChange = (isFullscreen: boolean) => {\r\n    emit('fullscreen-change', isFullscreen)\r\n  }\r\n\r\n  const handleCopyCodeSuccess = (text: string) => {\r\n    emit('copy-code-success', text)\r\n  }\r\n\r\n  let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\r\n\r\n  const autoSave = (text: string) => {\r\n    if (autoSaveTimer) clearTimeout(autoSaveTimer)\r\n    autoSaveTimer = setTimeout(() => {\r\n      emit('auto-save', text)\r\n    }, props.autoSaveInterval)\r\n  }\r\n\r\n  const focus = () => {\r\n    editorRef.value?.focus()\r\n  }\r\n\r\n  const getHtml = (): string => {\r\n    return cachedHtml.value\r\n  }\r\n\r\n  const insertText = (text: string) => {\r\n    editorRef.value?.insert((selected: string) => ({\r\n      text: `${selected}${text}`,\r\n      selected: text,\r\n    }))\r\n  }\r\n\r\n  defineExpose({\r\n    focus,\r\n    getHtml,\r\n    insertText,\r\n    wordCount,\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-20\r\n * @Description: Markdown 编辑器封装组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-markdown-wrapper\"\r\n    :class=\"{ 'is-dark': isDark }\"\r\n  >\r\n    <VMdEditor\r\n      ref=\"editorRef\"\r\n      :model-value=\"modelValue\"\r\n      :height=\"height\"\r\n      :placeholder=\"placeholder\"\r\n      :toolbar=\"toolbar\"\r\n      :mode=\"mode\"\r\n      :upload-image-config=\"computedUploadImageConfig\"\r\n      :toc-nav-position=\"tocNavPosition\"\r\n      :default-fullscreen=\"defaultFullscreen\"\r\n      :autofocus=\"autofocus\"\r\n      :include-level=\"includeLevel\"\r\n      :left-toolbar=\"leftToolbar\"\r\n      :right-toolbar=\"rightToolbar\"\r\n      :default-show-toc=\"true\"\r\n      @update:model-value=\"handleInput\"\r\n      @change=\"handleChange\"\r\n      @save=\"handleSave\"\r\n      @upload-image=\"handleUploadImage\"\r\n      @fullscreen-change=\"handleFullscreenChange\"\r\n      @copy-code-success=\"handleCopyCodeSuccess\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed, watch, onMounted } from 'vue'\r\n  import VMdEditor from '@kangc/v-md-editor'\r\n\r\n  defineOptions({ name: 'C_Markdown' })\r\n\r\n  export type InsertImageFunction = (config: {\r\n    url: string\r\n    desc?: string\r\n    width?: string | number\r\n    height?: string | number\r\n  }) => void\r\n\r\n  interface Props {\r\n    modelValue?: string\r\n    height?: string | number\r\n    disabled?: boolean\r\n    placeholder?: string\r\n    mode?: 'edit' | 'editable' | 'preview'\r\n    toolbar?: object\r\n    uploadImageConfig?: {\r\n      accept?: string\r\n      multiple?: boolean\r\n      [key: string]: any\r\n    }\r\n    tocNavPosition?: 'left' | 'right'\r\n    defaultFullscreen?: boolean\r\n    autofocus?: boolean\r\n    includeLevel?: number[]\r\n    leftToolbar?: string\r\n    rightToolbar?: string\r\n    maxLength?: number\r\n    showWordCount?: boolean\r\n    autoSave?: boolean\r\n    autoSaveInterval?: number\r\n    /** 是否为暗色主题（外部传入） */\r\n    isDark?: boolean\r\n  }\r\n\r\n  const props = withDefaults(defineProps<Props>(), {\r\n    modelValue: '',\r\n    height: '400px',\r\n    disabled: false,\r\n    placeholder: '请输入 Markdown 内容...',\r\n    mode: 'editable',\r\n    tocNavPosition: 'right',\r\n    defaultFullscreen: false,\r\n    autofocus: false,\r\n    includeLevel: () => [1, 2, 3, 4, 5, 6],\r\n    leftToolbar:\r\n      'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\r\n    rightToolbar: 'preview toc sync-scroll fullscreen',\r\n    maxLength: 50000,\r\n    showWordCount: true,\r\n    autoSave: false,\r\n    autoSaveInterval: 30000,\r\n    isDark: false,\r\n  })\r\n\r\n  interface Emits {\r\n    'update:modelValue': [value: string]\r\n    change: [text: string, html: string]\r\n    save: [text: string, html: string]\r\n    'upload-image': [\r\n      event: Event,\r\n      insertImage: InsertImageFunction,\r\n      files: FileList,\r\n    ]\r\n    'fullscreen-change': [isFullscreen: boolean]\r\n    'copy-code-success': [text: string]\r\n    'word-count-change': [count: number]\r\n    'auto-save': [text: string]\r\n    'max-length-exceeded': [currentLength: number, maxLength: number]\r\n  }\r\n\r\n  const emit = defineEmits<Emits>()\r\n\r\n  const editorRef = ref<any>(null)\r\n  const cachedHtml = ref('')\r\n\r\n  const wordCount = computed(() => {\r\n    return props.modelValue?.length || 0\r\n  })\r\n\r\n  const computedUploadImageConfig = computed(() => {\r\n    const defaultConfig = {\r\n      accept: 'image/*',\r\n      multiple: false,\r\n    }\r\n    return props.uploadImageConfig\r\n      ? { ...defaultConfig, ...props.uploadImageConfig }\r\n      : defaultConfig\r\n  })\r\n\r\n  onMounted(() => {\r\n    if (props.showWordCount && props.modelValue) {\r\n      emit('word-count-change', props.modelValue.length)\r\n    }\r\n  })\r\n\r\n  watch(\r\n    () => props.modelValue,\r\n    newValue => {\r\n      if (props.showWordCount) {\r\n        emit('word-count-change', newValue?.length || 0)\r\n      }\r\n    },\r\n    { immediate: true }\r\n  )\r\n\r\n  const handleInput = (value: string) => {\r\n    if (value.length > props.maxLength) {\r\n      emit('max-length-exceeded', value.length, props.maxLength)\r\n      return\r\n    }\r\n    emit('update:modelValue', value)\r\n    if (props.showWordCount) {\r\n      emit('word-count-change', value.length)\r\n    }\r\n  }\r\n\r\n  const handleChange = (text: string, html: string) => {\r\n    cachedHtml.value = html\r\n    emit('change', text, html)\r\n    if (props.autoSave) {\r\n      autoSave(text)\r\n    }\r\n  }\r\n\r\n  const handleSave = (text: string, html: string) => {\r\n    emit('save', text, html)\r\n  }\r\n\r\n  const handleUploadImage = (\r\n    event: Event,\r\n    insertImage: InsertImageFunction,\r\n    files: FileList\r\n  ) => {\r\n    emit('upload-image', event, insertImage, files)\r\n  }\r\n\r\n  const handleFullscreenChange = (isFullscreen: boolean) => {\r\n    emit('fullscreen-change', isFullscreen)\r\n  }\r\n\r\n  const handleCopyCodeSuccess = (text: string) => {\r\n    emit('copy-code-success', text)\r\n  }\r\n\r\n  let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\r\n\r\n  const autoSave = (text: string) => {\r\n    if (autoSaveTimer) clearTimeout(autoSaveTimer)\r\n    autoSaveTimer = setTimeout(() => {\r\n      emit('auto-save', text)\r\n    }, props.autoSaveInterval)\r\n  }\r\n\r\n  const focus = () => {\r\n    editorRef.value?.focus()\r\n  }\r\n\r\n  const getHtml = (): string => {\r\n    return cachedHtml.value\r\n  }\r\n\r\n  const insertText = (text: string) => {\r\n    editorRef.value?.insert((selected: string) => ({\r\n      text: `${selected}${text}`,\r\n      selected: text,\r\n    }))\r\n  }\r\n\r\n  defineExpose({\r\n    focus,\r\n    getHtml,\r\n    insertText,\r\n    wordCount,\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-20\r\n * @Description: Markdown 编辑器封装组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-markdown-wrapper\"\r\n    :class=\"{ 'is-dark': isDark }\"\r\n  >\r\n    <VMdEditor\r\n      ref=\"editorRef\"\r\n      :model-value=\"modelValue\"\r\n      :height=\"height\"\r\n      :placeholder=\"placeholder\"\r\n      :toolbar=\"toolbar\"\r\n      :mode=\"mode\"\r\n      :upload-image-config=\"computedUploadImageConfig\"\r\n      :toc-nav-position=\"tocNavPosition\"\r\n      :default-fullscreen=\"defaultFullscreen\"\r\n      :autofocus=\"autofocus\"\r\n      :include-level=\"includeLevel\"\r\n      :left-toolbar=\"leftToolbar\"\r\n      :right-toolbar=\"rightToolbar\"\r\n      :default-show-toc=\"true\"\r\n      @update:model-value=\"handleInput\"\r\n      @change=\"handleChange\"\r\n      @save=\"handleSave\"\r\n      @upload-image=\"handleUploadImage\"\r\n      @fullscreen-change=\"handleFullscreenChange\"\r\n      @copy-code-success=\"handleCopyCodeSuccess\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { ref, computed, watch, onMounted } from 'vue'\r\n  import VMdEditor from '@kangc/v-md-editor'\r\n\r\n  defineOptions({ name: 'C_Markdown' })\r\n\r\n  export type InsertImageFunction = (config: {\r\n    url: string\r\n    desc?: string\r\n    width?: string | number\r\n    height?: string | number\r\n  }) => void\r\n\r\n  interface Props {\r\n    modelValue?: string\r\n    height?: string | number\r\n    disabled?: boolean\r\n    placeholder?: string\r\n    mode?: 'edit' | 'editable' | 'preview'\r\n    toolbar?: object\r\n    uploadImageConfig?: {\r\n      accept?: string\r\n      multiple?: boolean\r\n      [key: string]: any\r\n    }\r\n    tocNavPosition?: 'left' | 'right'\r\n    defaultFullscreen?: boolean\r\n    autofocus?: boolean\r\n    includeLevel?: number[]\r\n    leftToolbar?: string\r\n    rightToolbar?: string\r\n    maxLength?: number\r\n    showWordCount?: boolean\r\n    autoSave?: boolean\r\n    autoSaveInterval?: number\r\n    /** 是否为暗色主题（外部传入） */\r\n    isDark?: boolean\r\n  }\r\n\r\n  const props = withDefaults(defineProps<Props>(), {\r\n    modelValue: '',\r\n    height: '400px',\r\n    disabled: false,\r\n    placeholder: '请输入 Markdown 内容...',\r\n    mode: 'editable',\r\n    tocNavPosition: 'right',\r\n    defaultFullscreen: false,\r\n    autofocus: false,\r\n    includeLevel: () => [1, 2, 3, 4, 5, 6],\r\n    leftToolbar:\r\n      'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save',\r\n    rightToolbar: 'preview toc sync-scroll fullscreen',\r\n    maxLength: 50000,\r\n    showWordCount: true,\r\n    autoSave: false,\r\n    autoSaveInterval: 30000,\r\n    isDark: false,\r\n  })\r\n\r\n  interface Emits {\r\n    'update:modelValue': [value: string]\r\n    change: [text: string, html: string]\r\n    save: [text: string, html: string]\r\n    'upload-image': [\r\n      event: Event,\r\n      insertImage: InsertImageFunction,\r\n      files: FileList,\r\n    ]\r\n    'fullscreen-change': [isFullscreen: boolean]\r\n    'copy-code-success': [text: string]\r\n    'word-count-change': [count: number]\r\n    'auto-save': [text: string]\r\n    'max-length-exceeded': [currentLength: number, maxLength: number]\r\n  }\r\n\r\n  const emit = defineEmits<Emits>()\r\n\r\n  const editorRef = ref<any>(null)\r\n  const cachedHtml = ref('')\r\n\r\n  const wordCount = computed(() => {\r\n    return props.modelValue?.length || 0\r\n  })\r\n\r\n  const computedUploadImageConfig = computed(() => {\r\n    const defaultConfig = {\r\n      accept: 'image/*',\r\n      multiple: false,\r\n    }\r\n    return props.uploadImageConfig\r\n      ? { ...defaultConfig, ...props.uploadImageConfig }\r\n      : defaultConfig\r\n  })\r\n\r\n  onMounted(() => {\r\n    if (props.showWordCount && props.modelValue) {\r\n      emit('word-count-change', props.modelValue.length)\r\n    }\r\n  })\r\n\r\n  watch(\r\n    () => props.modelValue,\r\n    newValue => {\r\n      if (props.showWordCount) {\r\n        emit('word-count-change', newValue?.length || 0)\r\n      }\r\n    },\r\n    { immediate: true }\r\n  )\r\n\r\n  const handleInput = (value: string) => {\r\n    if (value.length > props.maxLength) {\r\n      emit('max-length-exceeded', value.length, props.maxLength)\r\n      return\r\n    }\r\n    emit('update:modelValue', value)\r\n    if (props.showWordCount) {\r\n      emit('word-count-change', value.length)\r\n    }\r\n  }\r\n\r\n  const handleChange = (text: string, html: string) => {\r\n    cachedHtml.value = html\r\n    emit('change', text, html)\r\n    if (props.autoSave) {\r\n      autoSave(text)\r\n    }\r\n  }\r\n\r\n  const handleSave = (text: string, html: string) => {\r\n    emit('save', text, html)\r\n  }\r\n\r\n  const handleUploadImage = (\r\n    event: Event,\r\n    insertImage: InsertImageFunction,\r\n    files: FileList\r\n  ) => {\r\n    emit('upload-image', event, insertImage, files)\r\n  }\r\n\r\n  const handleFullscreenChange = (isFullscreen: boolean) => {\r\n    emit('fullscreen-change', isFullscreen)\r\n  }\r\n\r\n  const handleCopyCodeSuccess = (text: string) => {\r\n    emit('copy-code-success', text)\r\n  }\r\n\r\n  let autoSaveTimer: ReturnType<typeof setTimeout> | null = null\r\n\r\n  const autoSave = (text: string) => {\r\n    if (autoSaveTimer) clearTimeout(autoSaveTimer)\r\n    autoSaveTimer = setTimeout(() => {\r\n      emit('auto-save', text)\r\n    }, props.autoSaveInterval)\r\n  }\r\n\r\n  const focus = () => {\r\n    editorRef.value?.focus()\r\n  }\r\n\r\n  const getHtml = (): string => {\r\n    return cachedHtml.value\r\n  }\r\n\r\n  const insertText = (text: string) => {\r\n    editorRef.value?.insert((selected: string) => ({\r\n      text: `${selected}${text}`,\r\n      selected: text,\r\n    }))\r\n  }\r\n\r\n  defineExpose({\r\n    focus,\r\n    getHtml,\r\n    insertText,\r\n    wordCount,\r\n  })\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n  @use './index.scss';\r\n</style>\r\n"],"mappings":"uoCE4EE,IAAM,EAAQ,EAoCR,EAAO,EAEP,EAAY,EAAS,KAAK,CAC1B,EAAa,EAAI,GAAG,CAEpB,EAAY,MACT,EAAM,YAAY,QAAU,EACnC,CAEI,EAA4B,MAAe,CAC/C,IAAM,EAAgB,CACpB,OAAQ,UACR,SAAU,GACX,CACD,OAAO,EAAM,kBACT,CAAE,GAAG,EAAe,GAAG,EAAM,kBAAmB,CAChD,GACJ,CAEF,MAAgB,CACV,EAAM,eAAiB,EAAM,YAC/B,EAAK,oBAAqB,EAAM,WAAW,OAAO,EAEpD,CAEF,MACQ,EAAM,WACZ,GAAY,CACN,EAAM,eACR,EAAK,oBAAqB,GAAU,QAAU,EAAE,EAGpD,CAAE,UAAW,GAAM,CACpB,CAED,IAAM,EAAe,GAAkB,CACrC,GAAI,EAAM,OAAS,EAAM,UAAW,CAClC,EAAK,sBAAuB,EAAM,OAAQ,EAAM,UAAU,CAC1D,OAEF,EAAK,oBAAqB,EAAM,CAC5B,EAAM,eACR,EAAK,oBAAqB,EAAM,OAAO,EAIrC,GAAgB,EAAc,IAAiB,CACnD,EAAW,MAAQ,EACnB,EAAK,SAAU,EAAM,EAAK,CACtB,EAAM,UACR,EAAS,EAAK,EAIZ,GAAc,EAAc,IAAiB,CACjD,EAAK,OAAQ,EAAM,EAAK,EAGpB,GACJ,EACA,EACA,IACG,CACH,EAAK,eAAgB,EAAO,EAAa,EAAM,EAG3C,EAA0B,GAA0B,CACxD,EAAK,oBAAqB,EAAa,EAGnC,EAAyB,GAAiB,CAC9C,EAAK,oBAAqB,EAAK,EAG7B,EAAsD,KAEpD,EAAY,GAAiB,CAC7B,GAAe,aAAa,EAAc,CAC9C,EAAgB,eAAiB,CAC/B,EAAK,YAAa,EAAK,EACtB,EAAM,iBAAiB,SAkB5B,EAAa,CACX,UAhBkB,CAClB,EAAU,OAAO,OAAO,EAgBxB,YAZO,EAAW,MAalB,WAVkB,GAAiB,CACnC,EAAU,OAAO,OAAQ,IAAsB,CAC7C,KAAM,GAAG,IAAW,IACpB,SAAU,EACX,EAAE,EAOH,YACD,CAAC,aA/MF,EA0BM,MAAA,CAzBJ,MAAK,EAAA,CAAC,qBAAoB,CAAA,UACLA,EAAAA,OAAM,CAAA,CAAA,CAAA,CAAA,CAE3B,EAqBE,EAAA,EAAA,CAAA,SApBI,YAAJ,IAAI,EACH,cAAaC,EAAAA,WACb,OAAQC,EAAAA,OACR,YAAaC,EAAAA,YACb,QAASC,EAAAA,QACT,KAAMC,EAAAA,KACN,sBAAqB,EAAA,MACrB,mBAAkBC,EAAAA,eAClB,qBAAoBC,EAAAA,kBACpB,UAAWC,EAAAA,UACX,gBAAeC,EAAAA,aACf,eAAcC,EAAAA,YACd,gBAAeC,EAAAA,aACf,mBAAkB,GAClB,sBAAoB,EACpB,SAAQ,EACR,OAAM,EACN,cAAc,EACd,mBAAmB,EACnB,kBAAmB"}

package/dist/C_OrgChart-ChZu346B.css.map

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

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./C_OrgChart.js`);exports.C_OrgChart=e.t;

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":"6dE6EE,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,KAAiB,CAAC,EAAM,KAAK,UAAU,CAEvC,GAAA,EAAA,EAAA,cACE,EAAM,KAAK,UAAY,EAAM,KAAK,SAAS,OAAS,EAC3D,CAEK,GAAA,EAAA,EAAA,cAAwB,CAAC,EAAY,MAAM,CAE3C,MAAqB,CACzB,EAAW,MAAQ,CAAC,EAAW,iHA7B3B,MA7DN,EA6DM,0BA5DJ,SAAa,0BA2CP,MAAA,CAzCJ,OAAA,EAAA,EAAA,gBAAK,CAAC,mBAAkB,CACfA,EAAAA,KAAK,UAAS,CAAA,yBAA8B,EAAA,MAAM,CAAA,CAAA,CAAA,CAC1D,QAAK,AAAA,EAAA,MAAA,EAAA,EAAA,eAAA,GAAOC,EAAAA,MAAK,aAAeD,EAAAA,KAAI,CAAA,CAAA,OAAA,CAAA,oBA6B9B,EAAA,OAAA,OAAA,CAzBJ,KAAMA,EAAAA,KACN,OAAS,EAAA,MACT,WAAa,EAAA,WAuBT,EAAA,EAAA,EAAA,oBArBL,WAAe,EAAA,EAAA,EAAA,oBAoBT,MAnBN,EAmBM,CAjBIA,EAAAA,KAAK,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAOP,MARN,EAQM,EAAA,EAAA,EAAA,oBADF,MAAA,CAFC,IAAKA,EAAAA,KAAK,OACV,IAAKA,EAAAA,KAAK,iFAWT,MARN,EAQM,EAAA,EAAA,EAAA,oBAPiD,MAArD,GAAA,EAAA,EAAA,iBAAkCA,EAAAA,KAAK,MAAK,CAAA,EAAA,CAEpCA,EAAAA,KAAK,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIP,MALN,GAAA,EAAA,EAAA,iBAIKA,EAAAA,KAAK,SAAQ,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,0BAMxB,YAAgB,CAERE,EAAAA,aAAW,CAAK,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKf,SAAA,OAJP,MAAM,qBACL,SAAA,EAAA,EAAA,eAAY,EAAY,CAAA,OAAA,CAAA,wBAEtB,EAAA,MAAU,IAAA,IAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,8BAIjB,UAAc,CAEN,EAAA,OAAe,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAYjB,MAbN,EAaM,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBADF,EAAA,SAAA,MAAA,EAAA,EAAA,YAPgBF,EAAAA,KAAK,SAAd,wCAOP,EAAA,CANC,IAAK,EAAM,GACX,KAAM,EACN,YAAaE,EAAAA,YACb,YAAU,AAAA,EAAA,KAAA,GAAED,EAAAA,MAAK,aAAe,EAAM,CACtC,aAAW,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,cAAgB,EAAM,CACxC,eAAa,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,gBAAkB,EAAM,mpBGkBnD,IAAM,EAAQ,EAeR,EAAO,EAMP,GAAA,EAAA,EAAA,KAAuC,KAAI,CAG3C,GAAA,EAAA,EAAA,KAAW,EAAM,YAAW,CAC5B,GAAA,EAAA,EAAA,KAAW,EAAC,CACZ,GAAA,EAAA,EAAA,KAAW,EAAC,CACZ,GAAA,EAAA,EAAA,KAAgB,GAAK,CACrB,GAAA,EAAA,EAAA,KAAgB,EAAC,CACjB,GAAA,EAAA,EAAA,KAAgB,EAAC,CAEjB,GAAA,EAAA,EAAA,cAA6B,KAAK,MAAM,EAAK,MAAQ,IAAI,CAAA,CAEzD,GAAA,EAAA,EAAA,eAA0B,CAC9B,0BAA2B,EAAM,UACjC,0BAA2B,GAAG,EAAM,UAAU,IAC9C,4BAA6B,GAAG,EAAM,YAAY,IAClD,6BAA8B,GAAG,EAAM,aAAa,IACrD,EAAC,CAEI,GAAA,EAAA,EAAA,eAAgC,CACpC,UAAW,aAAa,EAAK,MAAM,MAAM,EAAK,MAAM,YAAY,EAAK,MAAM,GAC3E,gBAAiB,aAClB,EAAC,CAKI,EAAe,GAAkB,CACrC,GAAI,CAAC,EAAM,SAAU,OACrB,IAAM,EAAQ,EAAE,OAAS,EAAI,IAAO,GAC9B,EAAU,KAAK,IACnB,EAAM,QACN,KAAK,IAAI,EAAM,QAAS,EAAK,MAAQ,EAAK,CAC5C,CACA,EAAK,MAAQ,KAAK,MAAM,EAAU,IAAI,CAAG,KAGrC,EAAkB,GAAkB,CACnC,EAAM,WACX,EAAU,MAAQ,GAClB,EAAU,MAAQ,EAAE,QAAU,EAAK,MACnC,EAAU,MAAQ,EAAE,QAAU,EAAK,QAG/B,EAAiB,GAAkB,CAClC,EAAU,QACf,EAAK,MAAQ,EAAE,QAAU,EAAU,MACnC,EAAK,MAAQ,EAAE,QAAU,EAAU,QAG/B,MAAqB,CACzB,EAAU,MAAQ,IAGd,MAAe,CACnB,EAAK,MAAQ,KAAK,IAAI,EAAM,QAAS,EAAK,MAAQ,GAAG,EAGjD,MAAgB,CACpB,EAAK,MAAQ,KAAK,IAAI,EAAM,QAAS,EAAK,MAAQ,GAAG,EAGjD,MAAkB,CACtB,EAAK,MAAQ,EAAM,YACnB,EAAK,MAAQ,EACb,EAAK,MAAQ,GAIT,EAAmB,GAAuB,EAAK,aAAc,EAAI,CACjE,EAAoB,GAAuB,EAAK,cAAe,EAAI,CACnE,EAAsB,GAAuB,EAAK,gBAAiB,EAAI,QAE7E,EAAa,CACX,SACA,UACA,YACA,OACD,CAAA,oDA7GK,MAAA,SAhEA,eAAJ,IAAI,EACJ,OAAA,EAAA,EAAA,gBAAK,CAAC,aAAY,CAAA,eACa,EAAM,YAAA,oBAAuC,EAAM,YAAA,CAAA,CAAA,CAIjF,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAO,CACd,SAAA,EAAA,EAAA,eAAe,EAAW,CAAA,UAAA,CAAA,CAC1B,YAAW,EACX,YAAW,EACX,UAAS,EACT,aAAY,6BAuBP,MAAA,CApBJ,MAAM,uBACL,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAa,qBAkBX,EAAA,CAfP,KAAM,EAAM,KACZ,YAAa,EAAM,YACnB,YAAY,EACZ,aAAa,EACb,eAAe,4BAGRE,EAAAA,OAAO,KAAA,MACZ,wBAAM,GAAS,EAAA,EAAA,EAAA,YAKd,EAAA,OAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBADQ,EAAS,CAAA,CAAA,CAAA,CAAA,6EAMzB,SAAa,CAEL,EAAM,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAyBR,MA1BN,EA0BM,0BAhBK,SAAA,CALP,MAAM,0BACN,MAAM,KACL,QAAO,GACT,MAED,0BAC8D,OAA9D,GAAA,EAAA,EAAA,iBAAwC,EAAA,MAAW,CAAG,IAAC,EAAA,0BAO9C,SAAA,CALP,MAAM,0BACN,MAAM,KACL,QAAO,GACT,MAED,0BAOS,SAAA,CALP,MAAM,0BACN,MAAM,KACL,QAAO,GACT,MAED"}

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":"kzBE6EE,IAAM,EAAQ,EAWR,EAAa,EAAI,CAAC,EAAM,KAAK,UAAU,CAEvC,EAAc,MACZ,EAAM,KAAK,UAAY,EAAM,KAAK,SAAS,OAAS,EAC3D,CAEK,EAAS,MAAe,CAAC,EAAY,MAAM,CAE3C,MAAqB,CACzB,EAAW,MAAQ,CAAC,EAAW,sDA1FjC,EA6DM,MA7DN,EA6DM,CA5DJ,EAAA,SAAa,CACb,EA0CM,MAAA,CAzCJ,MAAK,EAAA,CAAC,mBAAkB,CACfA,EAAAA,KAAK,UAAS,CAAA,yBAA8B,EAAA,MAAM,CAAA,CAAA,CAAA,CAC1D,QAAK,AAAA,EAAA,KAAA,EAAA,GAAOC,EAAAA,MAAK,aAAeD,EAAAA,KAAI,CAAA,CAAA,OAAA,CAAA,GAErC,EA2BO,EAAA,OAAA,OAAA,CAzBJ,KAAMA,EAAAA,KACN,OAAS,EAAA,MACT,WAAa,EAAA,WAuBT,CArBL,EAAA,WAAe,CACf,EAmBM,MAnBN,EAmBM,CAjBIA,EAAAA,KAAK,QAAA,GAAA,CADb,EAQM,MARN,EAQM,CAJJ,EAGE,MAAA,CAFC,IAAKA,EAAAA,KAAK,OACV,IAAKA,EAAAA,KAAK,iCAGf,EAQM,MARN,EAQM,CAPJ,EAAqD,MAArD,EAAqD,EAAnBA,EAAAA,KAAK,MAAK,CAAA,EAAA,CAEpCA,EAAAA,KAAK,UAAA,GAAA,CADb,EAKM,MALN,EAKM,EADDA,EAAAA,KAAK,SAAQ,CAAA,EAAA,EAAA,EAAA,OAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAMxB,EAAA,YAAgB,CAERE,EAAAA,aAAW,CAAK,EAAA,OAAA,GAAA,CADxB,EAMS,SAAA,OAJP,MAAM,qBACL,QAAK,EAAO,EAAY,CAAA,OAAA,CAAA,IAEtB,EAAA,MAAU,IAAA,IAAA,CAAA,EAAA,EAAA,EAAA,OAAA,GAAA,KAIjB,EAAA,UAAc,CAEN,EAAA,OAAe,EAAA,OAAA,GAAA,CADvB,EAaM,MAbN,EAaM,EAAA,EAAA,GAAA,CATJ,EAQE,EAAA,KAAA,EAPgBF,EAAAA,KAAK,SAAd,QADT,EAQE,EAAA,CANC,IAAK,EAAM,GACX,KAAM,EACN,YAAaE,EAAAA,YACb,YAAU,AAAA,EAAA,KAAA,GAAED,EAAAA,MAAK,aAAe,EAAM,CACtC,aAAW,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,cAAgB,EAAM,CACxC,eAAa,AAAA,EAAA,KAAA,GAAEA,EAAAA,MAAK,gBAAkB,EAAM,wmBGkBnD,IAAM,EAAQ,EAeR,EAAO,EAMP,EAAe,EAAwB,KAAI,CAG3C,EAAO,EAAI,EAAM,YAAW,CAC5B,EAAO,EAAI,EAAC,CACZ,EAAO,EAAI,EAAC,CACZ,EAAY,EAAI,GAAK,CACrB,EAAY,EAAI,EAAC,CACjB,EAAY,EAAI,EAAC,CAEjB,EAAc,MAAe,KAAK,MAAM,EAAK,MAAQ,IAAI,CAAA,CAEzD,EAAU,OAAgB,CAC9B,0BAA2B,EAAM,UACjC,0BAA2B,GAAG,EAAM,UAAU,IAC9C,4BAA6B,GAAG,EAAM,YAAY,IAClD,6BAA8B,GAAG,EAAM,aAAa,IACrD,EAAC,CAEI,EAAgB,OAAgB,CACpC,UAAW,aAAa,EAAK,MAAM,MAAM,EAAK,MAAM,YAAY,EAAK,MAAM,GAC3E,gBAAiB,aAClB,EAAC,CAKI,EAAe,GAAkB,CACrC,GAAI,CAAC,EAAM,SAAU,OACrB,IAAM,EAAQ,EAAE,OAAS,EAAI,IAAO,GAC9B,EAAU,KAAK,IACnB,EAAM,QACN,KAAK,IAAI,EAAM,QAAS,EAAK,MAAQ,EAAK,CAC5C,CACA,EAAK,MAAQ,KAAK,MAAM,EAAU,IAAI,CAAG,KAGrC,EAAkB,GAAkB,CACnC,EAAM,WACX,EAAU,MAAQ,GAClB,EAAU,MAAQ,EAAE,QAAU,EAAK,MACnC,EAAU,MAAQ,EAAE,QAAU,EAAK,QAG/B,EAAiB,GAAkB,CAClC,EAAU,QACf,EAAK,MAAQ,EAAE,QAAU,EAAU,MACnC,EAAK,MAAQ,EAAE,QAAU,EAAU,QAG/B,MAAqB,CACzB,EAAU,MAAQ,IAGd,MAAe,CACnB,EAAK,MAAQ,KAAK,IAAI,EAAM,QAAS,EAAK,MAAQ,GAAG,EAGjD,MAAgB,CACpB,EAAK,MAAQ,KAAK,IAAI,EAAM,QAAS,EAAK,MAAQ,GAAG,EAGjD,MAAkB,CACtB,EAAK,MAAQ,EAAM,YACnB,EAAK,MAAQ,EACb,EAAK,MAAQ,GAIT,EAAmB,GAAuB,EAAK,aAAc,EAAI,CACjE,EAAoB,GAAuB,EAAK,cAAe,EAAI,CACnE,EAAsB,GAAuB,EAAK,gBAAiB,EAAI,QAE7E,EAAa,CACX,SACA,UACA,YACA,OACD,CAAA,aA9KD,EAiEM,MAAA,SAhEA,eAAJ,IAAI,EACJ,MAAK,EAAA,CAAC,aAAY,CAAA,eACa,EAAM,YAAA,oBAAuC,EAAM,YAAA,CAAA,CAAA,CAIjF,MAAK,EAAE,EAAA,MAAO,CACd,QAAK,EAAU,EAAW,CAAA,UAAA,CAAA,CAC1B,YAAW,EACX,YAAW,EACX,UAAS,EACT,aAAY,IAEb,EAqBM,MAAA,CApBJ,MAAM,uBACL,MAAK,EAAE,EAAA,MAAa,GAErB,EAgBU,EAAA,CAfP,KAAM,EAAM,KACZ,YAAa,EAAM,YACnB,YAAY,EACZ,aAAa,EACb,eAAe,YAGRE,EAAAA,OAAO,KAAA,MACZ,YAAM,GAAS,CAEhB,EAGE,EAAA,OAAA,OAAA,EAAA,EADQ,EAAS,CAAA,CAAA,CAAA,CAAA,oDAMzB,EAAA,SAAa,CAEL,EAAM,UAAA,GAAA,CADd,EA0BM,MA1BN,EA0BM,CAtBJ,EAMS,SAAA,CALP,MAAM,0BACN,MAAM,KACL,QAAO,GACT,MAED,CACA,EAA8D,OAA9D,EAA8D,EAAtB,EAAA,MAAW,CAAG,IAAC,EAAA,CACvD,EAMS,SAAA,CALP,MAAM,0BACN,MAAM,KACL,QAAO,GACT,MAED,CACA,EAMS,SAAA,CALP,MAAM,0BACN,MAAM,KACL,QAAO,GACT,MAED"}

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 };