@robot-admin/naive-ui-components 0.6.21 → 0.6.23

package/dist/C_CollapsePanel2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_CollapsePanel2.js","names":["variant","bordered","expandIconPosition","items","$slots"],"sources":["../src/components/C_CollapsePanel/composables/useCollapsePanel.ts","../src/components/C_CollapsePanel/index.vue","../src/components/C_CollapsePanel/index.vue","../src/components/C_CollapsePanel/index.vue"],"sourcesContent":["import { ref, computed, watch } from 'vue'\r\nimport type { Ref } from 'vue'\r\nimport type { CollapsePanelItem } from '../types'\r\n\r\ninterface UseCollapsePanelOptions {\r\n  /** 面板项配置 */\r\n  items: Ref<CollapsePanelItem[]>\r\n  /** 外部 v-model activeKeys */\r\n  activeKeys: Ref<string[] | undefined>\r\n  /** 非受控时的默认激活 key */\r\n  defaultActiveKeys: string[]\r\n  /** 是否手风琴模式 */\r\n  accordion: Ref<boolean>\r\n  /** localStorage 持久化 key */\r\n  persistKey: Ref<string | undefined>\r\n  /** activeKeys 变化回调 */\r\n  onChange?: (keys: string[]) => void\r\n  /** 单面板展开回调 */\r\n  onExpand?: (key: string) => void\r\n  /** 单面板折叠回调 */\r\n  onCollapse?: (key: string) => void\r\n}\r\n\r\n/**\r\n * 折叠面板展开/折叠核心逻辑\r\n */\r\nexport function useCollapsePanel(options: UseCollapsePanelOptions) {\r\n  const {\r\n    items,\r\n    activeKeys: externalKeys,\r\n    defaultActiveKeys,\r\n    accordion,\r\n    persistKey,\r\n    onChange,\r\n    onExpand,\r\n    onCollapse,\r\n  } = options\r\n\r\n  /* ─── 持久化读取 ──────────────────────────────── */\r\n  const loadPersistedKeys = (): string[] | null => {\r\n    if (!persistKey.value) return null\r\n    try {\r\n      const raw = localStorage.getItem(`collapse-panel:${persistKey.value}`)\r\n      return raw ? JSON.parse(raw) : null\r\n    } catch {\r\n      return null\r\n    }\r\n  }\r\n\r\n  const savePersistedKeys = (keys: string[]) => {\r\n    if (!persistKey.value) return\r\n    try {\r\n      localStorage.setItem(\r\n        `collapse-panel:${persistKey.value}`,\r\n        JSON.stringify(keys),\r\n      )\r\n    } catch {\r\n      /* 静默失败 */\r\n    }\r\n  }\r\n\r\n  /* ─── 内部状态 ────────────────────────────────── */\r\n  const resolveInitialKeys = (): string[] => {\r\n    /* 优先级：外部 v-model > 持久化 > 默认值 */\r\n    if (externalKeys.value !== undefined) return [...externalKeys.value]\r\n    const persisted = loadPersistedKeys()\r\n    if (persisted) return persisted\r\n    return [...defaultActiveKeys]\r\n  }\r\n\r\n  const internalKeys = ref<string[]>(resolveInitialKeys())\r\n\r\n  /** 懒渲染追踪：记录哪些面板曾被展开过 */\r\n  const renderedOnce = ref<Set<string>>(new Set(internalKeys.value))\r\n\r\n  /* ─── 计算属性 ────────────────────────────────── */\r\n  /** 当前激活的 key 数组（兼容受控 / 非受控） */\r\n  const currentKeys = computed<string[]>({\r\n    get: () =>\r\n      externalKeys.value !== undefined\r\n        ? externalKeys.value\r\n        : internalKeys.value,\r\n    set: (val) => {\r\n      internalKeys.value = val\r\n    },\r\n  })\r\n\r\n  /**\r\n   * 判断面板是否展开\r\n   */\r\n  const isExpanded = (key: string): boolean => {\r\n    return currentKeys.value.includes(key)\r\n  }\r\n\r\n  /**\r\n   * 判断面板是否应该渲染内容\r\n   * - lazy 面板只有被展开过至少一次后才渲染\r\n   * - destroyOnCollapse 面板在折叠后销毁 DOM\r\n   */\r\n  const shouldRender = (item: CollapsePanelItem): boolean => {\r\n    const expanded = isExpanded(item.key)\r\n\r\n    if (item.destroyOnCollapse) return expanded\r\n    if (item.lazy) return renderedOnce.value.has(item.key)\r\n    return true\r\n  }\r\n\r\n  /* ─── 操作方法 ────────────────────────────────── */\r\n  const updateKeys = (newKeys: string[]) => {\r\n    currentKeys.value = newKeys\r\n    onChange?.(newKeys)\r\n    savePersistedKeys(newKeys)\r\n  }\r\n\r\n  const toggle = (key: string) => {\r\n    const item = items.value.find((i) => i.key === key)\r\n    if (!item || item.disabled) return\r\n\r\n    const expanded = isExpanded(key)\r\n\r\n    if (expanded) {\r\n      /* 折叠 */\r\n      updateKeys(currentKeys.value.filter((k) => k !== key))\r\n      onCollapse?.(key)\r\n    } else {\r\n      /* 展开 */\r\n      renderedOnce.value.add(key)\r\n\r\n      if (accordion.value) {\r\n        /* 手风琴模式：关闭其他面板 */\r\n        const prevKeys = currentKeys.value\r\n        updateKeys([key])\r\n        /* 通知被折叠的面板 */\r\n        prevKeys.forEach((k) => {\r\n          if (k !== key) onCollapse?.(k)\r\n        })\r\n      } else {\r\n        updateKeys([...currentKeys.value, key])\r\n      }\r\n      onExpand?.(key)\r\n    }\r\n  }\r\n\r\n  const expandAll = () => {\r\n    if (accordion.value) return /* 手风琴模式不支持全展开 */\r\n\r\n    const allKeys = items.value.filter((i) => !i.disabled).map((i) => i.key)\r\n\r\n    allKeys.forEach((k) => renderedOnce.value.add(k))\r\n    updateKeys(allKeys)\r\n  }\r\n\r\n  const collapseAll = () => {\r\n    updateKeys([])\r\n  }\r\n\r\n  const getActiveKeys = (): string[] => {\r\n    return [...currentKeys.value]\r\n  }\r\n\r\n  /* ─── 键盘导航 ────────────────────────────────── */\r\n  const handleKeyDown = (e: KeyboardEvent, key: string) => {\r\n    if (['Enter', ' '].includes(e.key)) {\r\n      e.preventDefault()\r\n      toggle(key)\r\n    }\r\n  }\r\n\r\n  /* ─── 同步外部 v-model 变化 ───────────────────── */\r\n  watch(\r\n    () => externalKeys.value,\r\n    (newVal) => {\r\n      if (newVal !== undefined) {\r\n        internalKeys.value = [...newVal]\r\n        newVal.forEach((k) => renderedOnce.value.add(k))\r\n        savePersistedKeys(newVal)\r\n      }\r\n    },\r\n  )\r\n\r\n  return {\r\n    currentKeys,\r\n    renderedOnce,\r\n    isExpanded,\r\n    shouldRender,\r\n    toggle,\r\n    expandAll,\r\n    collapseAll,\r\n    getActiveKeys,\r\n    handleKeyDown,\r\n  }\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-25\r\n * @Description: 折叠面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-collapse-panel\"\r\n    :class=\"[\r\n      `c-collapse-panel--${variant}`,\r\n      {\r\n        'c-collapse-panel--bordered': bordered,\r\n        'c-collapse-panel--icon-right': expandIconPosition === 'right',\r\n      },\r\n    ]\"\r\n  >\r\n    <div\r\n      v-for=\"item in items\"\r\n      :key=\"item.key\"\r\n      :ref=\"(el) => setPanelRef(item.key, el as HTMLElement)\"\r\n      class=\"collapse-item\"\r\n      :class=\"{\r\n        'collapse-item--active': isExpanded(item.key),\r\n        'collapse-item--disabled': item.disabled,\r\n      }\"\r\n    >\r\n      <!-- 面板头部 -->\r\n      <div\r\n        class=\"collapse-item__header\"\r\n        role=\"button\"\r\n        :aria-expanded=\"isExpanded(item.key)\"\r\n        :aria-controls=\"`collapse-content-${item.key}`\"\r\n        :aria-disabled=\"item.disabled\"\r\n        :tabindex=\"item.disabled ? -1 : 0\"\r\n        @click=\"!item.disabled && toggle(item.key)\"\r\n        @keydown=\"handleKeyDown($event, item.key)\"\r\n      >\r\n        <!-- 展开图标 -->\r\n        <span\r\n          class=\"collapse-item__arrow\"\r\n          :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\r\n        >\r\n          <C_Icon name=\"mdi:chevron-right\" :size=\"16\" color=\"currentColor\" />\r\n        </span>\r\n\r\n        <!-- 标题区域 -->\r\n        <div class=\"collapse-item__title-area\">\r\n          <slot\r\n            :name=\"`header-${item.key}`\"\r\n            :item=\"item\"\r\n            :expanded=\"isExpanded(item.key)\"\r\n          >\r\n            <div class=\"collapse-item__title-group\">\r\n              <C_Icon\r\n                v-if=\"item.icon\"\r\n                :name=\"item.icon\"\r\n                :size=\"18\"\r\n                color=\"currentColor\"\r\n                class=\"collapse-item__icon\"\r\n              />\r\n              <span class=\"collapse-item__title\">{{ item.title }}</span>\r\n              <span v-if=\"item.subtitle\" class=\"collapse-item__subtitle\">\r\n                {{ item.subtitle }}\r\n              </span>\r\n            </div>\r\n          </slot>\r\n        </div>\r\n\r\n        <!-- 头部右侧操作区 -->\r\n        <div\r\n          v-if=\"$slots[`extra-${item.key}`]\"\r\n          class=\"collapse-item__extra\"\r\n          @click.stop\r\n        >\r\n          <slot\r\n            :name=\"`extra-${item.key}`\"\r\n            :item=\"item\"\r\n            :expanded=\"isExpanded(item.key)\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 面板内容 -->\r\n      <Transition\r\n        name=\"collapse-slide\"\r\n        @enter=\"onEnter\"\r\n        @after-enter=\"onAfterEnter\"\r\n        @leave=\"onLeave\"\r\n        @after-leave=\"onAfterLeave\"\r\n      >\r\n        <div\r\n          v-show=\"isExpanded(item.key)\"\r\n          :id=\"`collapse-content-${item.key}`\"\r\n          class=\"collapse-item__content-wrapper\"\r\n          role=\"region\"\r\n          :aria-labelledby=\"`collapse-header-${item.key}`\"\r\n        >\r\n          <div v-if=\"shouldRender(item)\" class=\"collapse-item__content\">\r\n            <slot\r\n              :name=\"`panel-${item.key}`\"\r\n              :item=\"item\"\r\n              :expanded=\"isExpanded(item.key)\"\r\n            >\r\n              <component\r\n                :is=\"item.content\"\r\n                v-if=\"item.content && typeof item.content !== 'string'\"\r\n              />\r\n              <template v-else-if=\"item.content\">{{ item.content }}</template>\r\n            </slot>\r\n          </div>\r\n        </div>\r\n      </Transition>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useCollapsePanel } from \"./composables/useCollapsePanel\";\r\nimport type {\r\n  CollapsePanelExpose,\r\n  CollapsePanelItem,\r\n  CollapsePanelVariant,\r\n  ExpandIconPosition,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_CollapsePanel\" });\r\n\r\ninterface Props {\r\n  /** 面板项配置数组 */\r\n  items: CollapsePanelItem[];\r\n  /** 当前激活面板的 key 数组（v-model） */\r\n  activeKeys?: string[];\r\n  /** 默认展开的面板 key 数组 */\r\n  defaultActiveKeys?: string[];\r\n  /** 是否手风琴模式 */\r\n  accordion?: boolean;\r\n  /** 面板样式变体 */\r\n  variant?: CollapsePanelVariant;\r\n  /** 展开图标位置 */\r\n  expandIconPosition?: ExpandIconPosition;\r\n  /** 是否显示边框 */\r\n  bordered?: boolean;\r\n  /** 展开状态 localStorage 持久化 key */\r\n  persistKey?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  activeKeys: undefined,\r\n  defaultActiveKeys: () => [],\r\n  accordion: false,\r\n  variant: \"default\",\r\n  expandIconPosition: \"left\",\r\n  bordered: true,\r\n  persistKey: undefined,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"update:activeKeys\": [keys: string[]];\r\n  expand: [key: string];\r\n  collapse: [key: string];\r\n  change: [activeKeys: string[]];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\nconst panelRefs = ref<Map<string, HTMLElement>>(new Map());\r\n\r\nconst setPanelRef = (key: string, el: HTMLElement | null) => {\r\n  if (el) {\r\n    panelRefs.value.set(key, el);\r\n  } else {\r\n    panelRefs.value.delete(key);\r\n  }\r\n};\r\n\r\nconst {\r\n  isExpanded,\r\n  shouldRender,\r\n  toggle,\r\n  expandAll,\r\n  collapseAll,\r\n  getActiveKeys,\r\n  handleKeyDown,\r\n} = useCollapsePanel({\r\n  items: toRef(props, \"items\"),\r\n  activeKeys: toRef(props, \"activeKeys\"),\r\n  defaultActiveKeys: props.defaultActiveKeys,\r\n  accordion: toRef(props, \"accordion\"),\r\n  persistKey: toRef(props, \"persistKey\"),\r\n  onChange: (keys) => {\r\n    emit(\"update:activeKeys\", keys);\r\n    emit(\"change\", keys);\r\n  },\r\n  onExpand: (key) => emit(\"expand\", key),\r\n  onCollapse: (key) => emit(\"collapse\", key),\r\n});\r\n\r\n/* ─── 展开/折叠动画 ──────────────────────────── */\r\nconst onEnter = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = \"0\";\r\n  element.style.overflow = \"hidden\";\r\n  /* 强制 reflow */\r\n  void element.offsetHeight;\r\n  element.style.height = `${element.scrollHeight}px`;\r\n};\r\n\r\nconst onAfterEnter = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = \"\";\r\n  element.style.overflow = \"\";\r\n};\r\n\r\nconst onLeave = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = `${element.scrollHeight}px`;\r\n  element.style.overflow = \"hidden\";\r\n  void element.offsetHeight;\r\n  element.style.height = \"0\";\r\n};\r\n\r\nconst onAfterLeave = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = \"\";\r\n  element.style.overflow = \"\";\r\n};\r\n\r\n/* ─── 滚动到指定面板 ─────────────────────────── */\r\nconst scrollToPanel = (key: string) => {\r\n  const el = panelRefs.value.get(key);\r\n  if (el) {\r\n    el.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n  }\r\n};\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<CollapsePanelExpose>({\r\n  expandAll,\r\n  collapseAll,\r\n  toggle,\r\n  getActiveKeys,\r\n  scrollToPanel,\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: 2026-02-25\r\n * @Description: 折叠面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-collapse-panel\"\r\n    :class=\"[\r\n      `c-collapse-panel--${variant}`,\r\n      {\r\n        'c-collapse-panel--bordered': bordered,\r\n        'c-collapse-panel--icon-right': expandIconPosition === 'right',\r\n      },\r\n    ]\"\r\n  >\r\n    <div\r\n      v-for=\"item in items\"\r\n      :key=\"item.key\"\r\n      :ref=\"(el) => setPanelRef(item.key, el as HTMLElement)\"\r\n      class=\"collapse-item\"\r\n      :class=\"{\r\n        'collapse-item--active': isExpanded(item.key),\r\n        'collapse-item--disabled': item.disabled,\r\n      }\"\r\n    >\r\n      <!-- 面板头部 -->\r\n      <div\r\n        class=\"collapse-item__header\"\r\n        role=\"button\"\r\n        :aria-expanded=\"isExpanded(item.key)\"\r\n        :aria-controls=\"`collapse-content-${item.key}`\"\r\n        :aria-disabled=\"item.disabled\"\r\n        :tabindex=\"item.disabled ? -1 : 0\"\r\n        @click=\"!item.disabled && toggle(item.key)\"\r\n        @keydown=\"handleKeyDown($event, item.key)\"\r\n      >\r\n        <!-- 展开图标 -->\r\n        <span\r\n          class=\"collapse-item__arrow\"\r\n          :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\r\n        >\r\n          <C_Icon name=\"mdi:chevron-right\" :size=\"16\" color=\"currentColor\" />\r\n        </span>\r\n\r\n        <!-- 标题区域 -->\r\n        <div class=\"collapse-item__title-area\">\r\n          <slot\r\n            :name=\"`header-${item.key}`\"\r\n            :item=\"item\"\r\n            :expanded=\"isExpanded(item.key)\"\r\n          >\r\n            <div class=\"collapse-item__title-group\">\r\n              <C_Icon\r\n                v-if=\"item.icon\"\r\n                :name=\"item.icon\"\r\n                :size=\"18\"\r\n                color=\"currentColor\"\r\n                class=\"collapse-item__icon\"\r\n              />\r\n              <span class=\"collapse-item__title\">{{ item.title }}</span>\r\n              <span v-if=\"item.subtitle\" class=\"collapse-item__subtitle\">\r\n                {{ item.subtitle }}\r\n              </span>\r\n            </div>\r\n          </slot>\r\n        </div>\r\n\r\n        <!-- 头部右侧操作区 -->\r\n        <div\r\n          v-if=\"$slots[`extra-${item.key}`]\"\r\n          class=\"collapse-item__extra\"\r\n          @click.stop\r\n        >\r\n          <slot\r\n            :name=\"`extra-${item.key}`\"\r\n            :item=\"item\"\r\n            :expanded=\"isExpanded(item.key)\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 面板内容 -->\r\n      <Transition\r\n        name=\"collapse-slide\"\r\n        @enter=\"onEnter\"\r\n        @after-enter=\"onAfterEnter\"\r\n        @leave=\"onLeave\"\r\n        @after-leave=\"onAfterLeave\"\r\n      >\r\n        <div\r\n          v-show=\"isExpanded(item.key)\"\r\n          :id=\"`collapse-content-${item.key}`\"\r\n          class=\"collapse-item__content-wrapper\"\r\n          role=\"region\"\r\n          :aria-labelledby=\"`collapse-header-${item.key}`\"\r\n        >\r\n          <div v-if=\"shouldRender(item)\" class=\"collapse-item__content\">\r\n            <slot\r\n              :name=\"`panel-${item.key}`\"\r\n              :item=\"item\"\r\n              :expanded=\"isExpanded(item.key)\"\r\n            >\r\n              <component\r\n                :is=\"item.content\"\r\n                v-if=\"item.content && typeof item.content !== 'string'\"\r\n              />\r\n              <template v-else-if=\"item.content\">{{ item.content }}</template>\r\n            </slot>\r\n          </div>\r\n        </div>\r\n      </Transition>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useCollapsePanel } from \"./composables/useCollapsePanel\";\r\nimport type {\r\n  CollapsePanelExpose,\r\n  CollapsePanelItem,\r\n  CollapsePanelVariant,\r\n  ExpandIconPosition,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_CollapsePanel\" });\r\n\r\ninterface Props {\r\n  /** 面板项配置数组 */\r\n  items: CollapsePanelItem[];\r\n  /** 当前激活面板的 key 数组（v-model） */\r\n  activeKeys?: string[];\r\n  /** 默认展开的面板 key 数组 */\r\n  defaultActiveKeys?: string[];\r\n  /** 是否手风琴模式 */\r\n  accordion?: boolean;\r\n  /** 面板样式变体 */\r\n  variant?: CollapsePanelVariant;\r\n  /** 展开图标位置 */\r\n  expandIconPosition?: ExpandIconPosition;\r\n  /** 是否显示边框 */\r\n  bordered?: boolean;\r\n  /** 展开状态 localStorage 持久化 key */\r\n  persistKey?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  activeKeys: undefined,\r\n  defaultActiveKeys: () => [],\r\n  accordion: false,\r\n  variant: \"default\",\r\n  expandIconPosition: \"left\",\r\n  bordered: true,\r\n  persistKey: undefined,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"update:activeKeys\": [keys: string[]];\r\n  expand: [key: string];\r\n  collapse: [key: string];\r\n  change: [activeKeys: string[]];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\nconst panelRefs = ref<Map<string, HTMLElement>>(new Map());\r\n\r\nconst setPanelRef = (key: string, el: HTMLElement | null) => {\r\n  if (el) {\r\n    panelRefs.value.set(key, el);\r\n  } else {\r\n    panelRefs.value.delete(key);\r\n  }\r\n};\r\n\r\nconst {\r\n  isExpanded,\r\n  shouldRender,\r\n  toggle,\r\n  expandAll,\r\n  collapseAll,\r\n  getActiveKeys,\r\n  handleKeyDown,\r\n} = useCollapsePanel({\r\n  items: toRef(props, \"items\"),\r\n  activeKeys: toRef(props, \"activeKeys\"),\r\n  defaultActiveKeys: props.defaultActiveKeys,\r\n  accordion: toRef(props, \"accordion\"),\r\n  persistKey: toRef(props, \"persistKey\"),\r\n  onChange: (keys) => {\r\n    emit(\"update:activeKeys\", keys);\r\n    emit(\"change\", keys);\r\n  },\r\n  onExpand: (key) => emit(\"expand\", key),\r\n  onCollapse: (key) => emit(\"collapse\", key),\r\n});\r\n\r\n/* ─── 展开/折叠动画 ──────────────────────────── */\r\nconst onEnter = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = \"0\";\r\n  element.style.overflow = \"hidden\";\r\n  /* 强制 reflow */\r\n  void element.offsetHeight;\r\n  element.style.height = `${element.scrollHeight}px`;\r\n};\r\n\r\nconst onAfterEnter = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = \"\";\r\n  element.style.overflow = \"\";\r\n};\r\n\r\nconst onLeave = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = `${element.scrollHeight}px`;\r\n  element.style.overflow = \"hidden\";\r\n  void element.offsetHeight;\r\n  element.style.height = \"0\";\r\n};\r\n\r\nconst onAfterLeave = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = \"\";\r\n  element.style.overflow = \"\";\r\n};\r\n\r\n/* ─── 滚动到指定面板 ─────────────────────────── */\r\nconst scrollToPanel = (key: string) => {\r\n  const el = panelRefs.value.get(key);\r\n  if (el) {\r\n    el.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n  }\r\n};\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<CollapsePanelExpose>({\r\n  expandAll,\r\n  collapseAll,\r\n  toggle,\r\n  getActiveKeys,\r\n  scrollToPanel,\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: 2026-02-25\r\n * @Description: 折叠面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-collapse-panel\"\r\n    :class=\"[\r\n      `c-collapse-panel--${variant}`,\r\n      {\r\n        'c-collapse-panel--bordered': bordered,\r\n        'c-collapse-panel--icon-right': expandIconPosition === 'right',\r\n      },\r\n    ]\"\r\n  >\r\n    <div\r\n      v-for=\"item in items\"\r\n      :key=\"item.key\"\r\n      :ref=\"(el) => setPanelRef(item.key, el as HTMLElement)\"\r\n      class=\"collapse-item\"\r\n      :class=\"{\r\n        'collapse-item--active': isExpanded(item.key),\r\n        'collapse-item--disabled': item.disabled,\r\n      }\"\r\n    >\r\n      <!-- 面板头部 -->\r\n      <div\r\n        class=\"collapse-item__header\"\r\n        role=\"button\"\r\n        :aria-expanded=\"isExpanded(item.key)\"\r\n        :aria-controls=\"`collapse-content-${item.key}`\"\r\n        :aria-disabled=\"item.disabled\"\r\n        :tabindex=\"item.disabled ? -1 : 0\"\r\n        @click=\"!item.disabled && toggle(item.key)\"\r\n        @keydown=\"handleKeyDown($event, item.key)\"\r\n      >\r\n        <!-- 展开图标 -->\r\n        <span\r\n          class=\"collapse-item__arrow\"\r\n          :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\r\n        >\r\n          <C_Icon name=\"mdi:chevron-right\" :size=\"16\" color=\"currentColor\" />\r\n        </span>\r\n\r\n        <!-- 标题区域 -->\r\n        <div class=\"collapse-item__title-area\">\r\n          <slot\r\n            :name=\"`header-${item.key}`\"\r\n            :item=\"item\"\r\n            :expanded=\"isExpanded(item.key)\"\r\n          >\r\n            <div class=\"collapse-item__title-group\">\r\n              <C_Icon\r\n                v-if=\"item.icon\"\r\n                :name=\"item.icon\"\r\n                :size=\"18\"\r\n                color=\"currentColor\"\r\n                class=\"collapse-item__icon\"\r\n              />\r\n              <span class=\"collapse-item__title\">{{ item.title }}</span>\r\n              <span v-if=\"item.subtitle\" class=\"collapse-item__subtitle\">\r\n                {{ item.subtitle }}\r\n              </span>\r\n            </div>\r\n          </slot>\r\n        </div>\r\n\r\n        <!-- 头部右侧操作区 -->\r\n        <div\r\n          v-if=\"$slots[`extra-${item.key}`]\"\r\n          class=\"collapse-item__extra\"\r\n          @click.stop\r\n        >\r\n          <slot\r\n            :name=\"`extra-${item.key}`\"\r\n            :item=\"item\"\r\n            :expanded=\"isExpanded(item.key)\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 面板内容 -->\r\n      <Transition\r\n        name=\"collapse-slide\"\r\n        @enter=\"onEnter\"\r\n        @after-enter=\"onAfterEnter\"\r\n        @leave=\"onLeave\"\r\n        @after-leave=\"onAfterLeave\"\r\n      >\r\n        <div\r\n          v-show=\"isExpanded(item.key)\"\r\n          :id=\"`collapse-content-${item.key}`\"\r\n          class=\"collapse-item__content-wrapper\"\r\n          role=\"region\"\r\n          :aria-labelledby=\"`collapse-header-${item.key}`\"\r\n        >\r\n          <div v-if=\"shouldRender(item)\" class=\"collapse-item__content\">\r\n            <slot\r\n              :name=\"`panel-${item.key}`\"\r\n              :item=\"item\"\r\n              :expanded=\"isExpanded(item.key)\"\r\n            >\r\n              <component\r\n                :is=\"item.content\"\r\n                v-if=\"item.content && typeof item.content !== 'string'\"\r\n              />\r\n              <template v-else-if=\"item.content\">{{ item.content }}</template>\r\n            </slot>\r\n          </div>\r\n        </div>\r\n      </Transition>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useCollapsePanel } from \"./composables/useCollapsePanel\";\r\nimport type {\r\n  CollapsePanelExpose,\r\n  CollapsePanelItem,\r\n  CollapsePanelVariant,\r\n  ExpandIconPosition,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_CollapsePanel\" });\r\n\r\ninterface Props {\r\n  /** 面板项配置数组 */\r\n  items: CollapsePanelItem[];\r\n  /** 当前激活面板的 key 数组（v-model） */\r\n  activeKeys?: string[];\r\n  /** 默认展开的面板 key 数组 */\r\n  defaultActiveKeys?: string[];\r\n  /** 是否手风琴模式 */\r\n  accordion?: boolean;\r\n  /** 面板样式变体 */\r\n  variant?: CollapsePanelVariant;\r\n  /** 展开图标位置 */\r\n  expandIconPosition?: ExpandIconPosition;\r\n  /** 是否显示边框 */\r\n  bordered?: boolean;\r\n  /** 展开状态 localStorage 持久化 key */\r\n  persistKey?: string;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  activeKeys: undefined,\r\n  defaultActiveKeys: () => [],\r\n  accordion: false,\r\n  variant: \"default\",\r\n  expandIconPosition: \"left\",\r\n  bordered: true,\r\n  persistKey: undefined,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"update:activeKeys\": [keys: string[]];\r\n  expand: [key: string];\r\n  collapse: [key: string];\r\n  change: [activeKeys: string[]];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\nconst panelRefs = ref<Map<string, HTMLElement>>(new Map());\r\n\r\nconst setPanelRef = (key: string, el: HTMLElement | null) => {\r\n  if (el) {\r\n    panelRefs.value.set(key, el);\r\n  } else {\r\n    panelRefs.value.delete(key);\r\n  }\r\n};\r\n\r\nconst {\r\n  isExpanded,\r\n  shouldRender,\r\n  toggle,\r\n  expandAll,\r\n  collapseAll,\r\n  getActiveKeys,\r\n  handleKeyDown,\r\n} = useCollapsePanel({\r\n  items: toRef(props, \"items\"),\r\n  activeKeys: toRef(props, \"activeKeys\"),\r\n  defaultActiveKeys: props.defaultActiveKeys,\r\n  accordion: toRef(props, \"accordion\"),\r\n  persistKey: toRef(props, \"persistKey\"),\r\n  onChange: (keys) => {\r\n    emit(\"update:activeKeys\", keys);\r\n    emit(\"change\", keys);\r\n  },\r\n  onExpand: (key) => emit(\"expand\", key),\r\n  onCollapse: (key) => emit(\"collapse\", key),\r\n});\r\n\r\n/* ─── 展开/折叠动画 ──────────────────────────── */\r\nconst onEnter = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = \"0\";\r\n  element.style.overflow = \"hidden\";\r\n  /* 强制 reflow */\r\n  void element.offsetHeight;\r\n  element.style.height = `${element.scrollHeight}px`;\r\n};\r\n\r\nconst onAfterEnter = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = \"\";\r\n  element.style.overflow = \"\";\r\n};\r\n\r\nconst onLeave = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = `${element.scrollHeight}px`;\r\n  element.style.overflow = \"hidden\";\r\n  void element.offsetHeight;\r\n  element.style.height = \"0\";\r\n};\r\n\r\nconst onAfterLeave = (el: Element) => {\r\n  const element = el as HTMLElement;\r\n  element.style.height = \"\";\r\n  element.style.overflow = \"\";\r\n};\r\n\r\n/* ─── 滚动到指定面板 ─────────────────────────── */\r\nconst scrollToPanel = (key: string) => {\r\n  const el = panelRefs.value.get(key);\r\n  if (el) {\r\n    el.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n  }\r\n};\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<CollapsePanelExpose>({\r\n  expandAll,\r\n  collapseAll,\r\n  toggle,\r\n  getActiveKeys,\r\n  scrollToPanel,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_CollapsePanel2.js","names":["variant","bordered","expandIconPosition","items","$slots"],"sources":["../src/components/C_CollapsePanel/composables/useCollapsePanel.ts","../src/components/C_CollapsePanel/index.vue","../src/components/C_CollapsePanel/index.vue","../src/components/C_CollapsePanel/index.vue"],"sourcesContent":["import { ref, computed, watch } from 'vue'\r\nimport type { Ref } from 'vue'\r\nimport type { CollapsePanelItem } from '../types'\r\n\r\ninterface UseCollapsePanelOptions {\r\n  /** 面板项配置 */\r\n  items: Ref<CollapsePanelItem[]>\r\n  /** 外部 v-model activeKeys */\r\n  activeKeys: Ref<string[] | undefined>\r\n  /** 非受控时的默认激活 key */\r\n  defaultActiveKeys: string[]\r\n  /** 是否手风琴模式 */\r\n  accordion: Ref<boolean>\r\n  /** localStorage 持久化 key */\r\n  persistKey: Ref<string | undefined>\r\n  /** activeKeys 变化回调 */\r\n  onChange?: (keys: string[]) => void\r\n  /** 单面板展开回调 */\r\n  onExpand?: (key: string) => void\r\n  /** 单面板折叠回调 */\r\n  onCollapse?: (key: string) => void\r\n}\r\n\r\n/**\r\n * 折叠面板展开/折叠核心逻辑\r\n */\r\nexport function useCollapsePanel(options: UseCollapsePanelOptions) {\r\n  const {\r\n    items,\r\n    activeKeys: externalKeys,\r\n    defaultActiveKeys,\r\n    accordion,\r\n    persistKey,\r\n    onChange,\r\n    onExpand,\r\n    onCollapse,\r\n  } = options\r\n\r\n  /* ─── 持久化读取 ──────────────────────────────── */\r\n  const loadPersistedKeys = (): string[] | null => {\r\n    if (!persistKey.value) return null\r\n    try {\r\n      const raw = localStorage.getItem(`collapse-panel:${persistKey.value}`)\r\n      return raw ? JSON.parse(raw) : null\r\n    } catch {\r\n      return null\r\n    }\r\n  }\r\n\r\n  const savePersistedKeys = (keys: string[]) => {\r\n    if (!persistKey.value) return\r\n    try {\r\n      localStorage.setItem(\r\n        `collapse-panel:${persistKey.value}`,\r\n        JSON.stringify(keys),\r\n      )\r\n    } catch {\r\n      /* 静默失败 */\r\n    }\r\n  }\r\n\r\n  /* ─── 内部状态 ────────────────────────────────── */\r\n  const resolveInitialKeys = (): string[] => {\r\n    /* 优先级：外部 v-model > 持久化 > 默认值 */\r\n    if (externalKeys.value !== undefined) return [...externalKeys.value]\r\n    const persisted = loadPersistedKeys()\r\n    if (persisted) return persisted\r\n    return [...defaultActiveKeys]\r\n  }\r\n\r\n  const internalKeys = ref<string[]>(resolveInitialKeys())\r\n\r\n  /** 懒渲染追踪：记录哪些面板曾被展开过 */\r\n  const renderedOnce = ref<Set<string>>(new Set(internalKeys.value))\r\n\r\n  /* ─── 计算属性 ────────────────────────────────── */\r\n  /** 当前激活的 key 数组（兼容受控 / 非受控） */\r\n  const currentKeys = computed<string[]>({\r\n    get: () =>\r\n      externalKeys.value !== undefined\r\n        ? externalKeys.value\r\n        : internalKeys.value,\r\n    set: (val) => {\r\n      internalKeys.value = val\r\n    },\r\n  })\r\n\r\n  /**\r\n   * 判断面板是否展开\r\n   */\r\n  const isExpanded = (key: string): boolean => {\r\n    return currentKeys.value.includes(key)\r\n  }\r\n\r\n  /**\r\n   * 判断面板是否应该渲染内容\r\n   * - lazy 面板只有被展开过至少一次后才渲染\r\n   * - destroyOnCollapse 面板在折叠后销毁 DOM\r\n   */\r\n  const shouldRender = (item: CollapsePanelItem): boolean => {\r\n    const expanded = isExpanded(item.key)\r\n\r\n    if (item.destroyOnCollapse) return expanded\r\n    if (item.lazy) return renderedOnce.value.has(item.key)\r\n    return true\r\n  }\r\n\r\n  /* ─── 操作方法 ────────────────────────────────── */\r\n  const updateKeys = (newKeys: string[]) => {\r\n    currentKeys.value = newKeys\r\n    onChange?.(newKeys)\r\n    savePersistedKeys(newKeys)\r\n  }\r\n\r\n  const toggle = (key: string) => {\r\n    const item = items.value.find((i) => i.key === key)\r\n    if (!item || item.disabled) return\r\n\r\n    const expanded = isExpanded(key)\r\n\r\n    if (expanded) {\r\n      /* 折叠 */\r\n      updateKeys(currentKeys.value.filter((k) => k !== key))\r\n      onCollapse?.(key)\r\n    } else {\r\n      /* 展开 */\r\n      renderedOnce.value.add(key)\r\n\r\n      if (accordion.value) {\r\n        /* 手风琴模式：关闭其他面板 */\r\n        const prevKeys = currentKeys.value\r\n        updateKeys([key])\r\n        /* 通知被折叠的面板 */\r\n        prevKeys.forEach((k) => {\r\n          if (k !== key) onCollapse?.(k)\r\n        })\r\n      } else {\r\n        updateKeys([...currentKeys.value, key])\r\n      }\r\n      onExpand?.(key)\r\n    }\r\n  }\r\n\r\n  const expandAll = () => {\r\n    if (accordion.value) return /* 手风琴模式不支持全展开 */\r\n\r\n    const allKeys = items.value.filter((i) => !i.disabled).map((i) => i.key)\r\n\r\n    allKeys.forEach((k) => renderedOnce.value.add(k))\r\n    updateKeys(allKeys)\r\n  }\r\n\r\n  const collapseAll = () => {\r\n    updateKeys([])\r\n  }\r\n\r\n  const getActiveKeys = (): string[] => {\r\n    return [...currentKeys.value]\r\n  }\r\n\r\n  /* ─── 键盘导航 ────────────────────────────────── */\r\n  const handleKeyDown = (e: KeyboardEvent, key: string) => {\r\n    if (['Enter', ' '].includes(e.key)) {\r\n      e.preventDefault()\r\n      toggle(key)\r\n    }\r\n  }\r\n\r\n  /* ─── 同步外部 v-model 变化 ───────────────────── */\r\n  watch(\r\n    () => externalKeys.value,\r\n    (newVal) => {\r\n      if (newVal !== undefined) {\r\n        internalKeys.value = [...newVal]\r\n        newVal.forEach((k) => renderedOnce.value.add(k))\r\n        savePersistedKeys(newVal)\r\n      }\r\n    },\r\n  )\r\n\r\n  return {\r\n    currentKeys,\r\n    renderedOnce,\r\n    isExpanded,\r\n    shouldRender,\r\n    toggle,\r\n    expandAll,\r\n    collapseAll,\r\n    getActiveKeys,\r\n    handleKeyDown,\r\n  }\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 折叠面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"c-collapse-panel\"\n    :class=\"[\n      `c-collapse-panel--${variant}`,\n      {\n        'c-collapse-panel--bordered': bordered,\n        'c-collapse-panel--icon-right': expandIconPosition === 'right',\n      },\n    ]\"\n  >\n    <div\n      v-for=\"item in items\"\n      :key=\"item.key\"\n      :ref=\"el => setPanelRef(item.key, el as HTMLElement)\"\n      class=\"collapse-item\"\n      :class=\"{\n        'collapse-item--active': isExpanded(item.key),\n        'collapse-item--disabled': item.disabled,\n      }\"\n    >\n      <!-- 面板头部 -->\n      <div\n        class=\"collapse-item__header\"\n        role=\"button\"\n        :aria-expanded=\"isExpanded(item.key)\"\n        :aria-controls=\"`collapse-content-${item.key}`\"\n        :aria-disabled=\"item.disabled\"\n        :tabindex=\"item.disabled ? -1 : 0\"\n        @click=\"!item.disabled && toggle(item.key)\"\n        @keydown=\"handleKeyDown($event, item.key)\"\n      >\n        <!-- 展开图标 -->\n        <span\n          class=\"collapse-item__arrow\"\n          :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\n        >\n          <C_Icon\n            name=\"mdi:chevron-right\"\n            :size=\"16\"\n            color=\"currentColor\"\n          />\n        </span>\n\n        <!-- 标题区域 -->\n        <div class=\"collapse-item__title-area\">\n          <slot\n            :name=\"`header-${item.key}`\"\n            :item=\"item\"\n            :expanded=\"isExpanded(item.key)\"\n          >\n            <div class=\"collapse-item__title-group\">\n              <C_Icon\n                v-if=\"item.icon\"\n                :name=\"item.icon\"\n                :size=\"18\"\n                color=\"currentColor\"\n                class=\"collapse-item__icon\"\n              />\n              <span class=\"collapse-item__title\">{{ item.title }}</span>\n              <span\n                v-if=\"item.subtitle\"\n                class=\"collapse-item__subtitle\"\n              >\n                {{ item.subtitle }}\n              </span>\n            </div>\n          </slot>\n        </div>\n\n        <!-- 头部右侧操作区 -->\n        <div\n          v-if=\"$slots[`extra-${item.key}`]\"\n          class=\"collapse-item__extra\"\n          @click.stop\n        >\n          <slot\n            :name=\"`extra-${item.key}`\"\n            :item=\"item\"\n            :expanded=\"isExpanded(item.key)\"\n          />\n        </div>\n      </div>\n\n      <!-- 面板内容 -->\n      <Transition\n        name=\"collapse-slide\"\n        @enter=\"onEnter\"\n        @after-enter=\"onAfterEnter\"\n        @leave=\"onLeave\"\n        @after-leave=\"onAfterLeave\"\n      >\n        <div\n          v-show=\"isExpanded(item.key)\"\n          :id=\"`collapse-content-${item.key}`\"\n          class=\"collapse-item__content-wrapper\"\n          role=\"region\"\n          :aria-labelledby=\"`collapse-header-${item.key}`\"\n        >\n          <div\n            v-if=\"shouldRender(item)\"\n            class=\"collapse-item__content\"\n          >\n            <slot\n              :name=\"`panel-${item.key}`\"\n              :item=\"item\"\n              :expanded=\"isExpanded(item.key)\"\n            >\n              <component\n                :is=\"item.content\"\n                v-if=\"item.content && typeof item.content !== 'string'\"\n              />\n              <template v-else-if=\"item.content\">{{ item.content }}</template>\n            </slot>\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, toRef } from 'vue'\n  import C_Icon from '../C_Icon/index.vue'\n  import { useCollapsePanel } from './composables/useCollapsePanel'\n  import type {\n    CollapsePanelExpose,\n    CollapsePanelItem,\n    CollapsePanelVariant,\n    ExpandIconPosition,\n  } from './types'\n\n  defineOptions({ name: 'C_CollapsePanel' })\n\n  interface Props {\n    /** 面板项配置数组 */\n    items: CollapsePanelItem[]\n    /** 当前激活面板的 key 数组（v-model） */\n    activeKeys?: string[]\n    /** 默认展开的面板 key 数组 */\n    defaultActiveKeys?: string[]\n    /** 是否手风琴模式 */\n    accordion?: boolean\n    /** 面板样式变体 */\n    variant?: CollapsePanelVariant\n    /** 展开图标位置 */\n    expandIconPosition?: ExpandIconPosition\n    /** 是否显示边框 */\n    bordered?: boolean\n    /** 展开状态 localStorage 持久化 key */\n    persistKey?: string\n  }\n\n  const props = withDefaults(defineProps<Props>(), {\n    activeKeys: undefined,\n    defaultActiveKeys: () => [],\n    accordion: false,\n    variant: 'default',\n    expandIconPosition: 'left',\n    bordered: true,\n    persistKey: undefined,\n  })\n\n  const emit = defineEmits<{\n    'update:activeKeys': [keys: string[]]\n    expand: [key: string]\n    collapse: [key: string]\n    change: [activeKeys: string[]]\n  }>()\n\n  const containerRef = ref<HTMLElement | null>(null)\n  const panelRefs = ref<Map<string, HTMLElement>>(new Map())\n\n  const setPanelRef = (key: string, el: HTMLElement | null) => {\n    if (el) {\n      panelRefs.value.set(key, el)\n    } else {\n      panelRefs.value.delete(key)\n    }\n  }\n\n  const {\n    isExpanded,\n    shouldRender,\n    toggle,\n    expandAll,\n    collapseAll,\n    getActiveKeys,\n    handleKeyDown,\n  } = useCollapsePanel({\n    items: toRef(props, 'items'),\n    activeKeys: toRef(props, 'activeKeys'),\n    defaultActiveKeys: props.defaultActiveKeys,\n    accordion: toRef(props, 'accordion'),\n    persistKey: toRef(props, 'persistKey'),\n    onChange: keys => {\n      emit('update:activeKeys', keys)\n      emit('change', keys)\n    },\n    onExpand: key => emit('expand', key),\n    onCollapse: key => emit('collapse', key),\n  })\n\n  /* ─── 展开/折叠动画 ──────────────────────────── */\n  const onEnter = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = '0'\n    element.style.overflow = 'hidden'\n    /* 强制 reflow */\n    void element.offsetHeight\n    element.style.height = `${element.scrollHeight}px`\n  }\n\n  const onAfterEnter = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = ''\n    element.style.overflow = ''\n  }\n\n  const onLeave = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = `${element.scrollHeight}px`\n    element.style.overflow = 'hidden'\n    void element.offsetHeight\n    element.style.height = '0'\n  }\n\n  const onAfterLeave = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = ''\n    element.style.overflow = ''\n  }\n\n  /* ─── 滚动到指定面板 ─────────────────────────── */\n  const scrollToPanel = (key: string) => {\n    const el = panelRefs.value.get(key)\n    if (el) {\n      el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n    }\n  }\n\n  /* ─── 暴露方法 ──────────────────────────────── */\n  defineExpose<CollapsePanelExpose>({\n    expandAll,\n    collapseAll,\n    toggle,\n    getActiveKeys,\n    scrollToPanel,\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: 2026-02-25\n * @Description: 折叠面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"c-collapse-panel\"\n    :class=\"[\n      `c-collapse-panel--${variant}`,\n      {\n        'c-collapse-panel--bordered': bordered,\n        'c-collapse-panel--icon-right': expandIconPosition === 'right',\n      },\n    ]\"\n  >\n    <div\n      v-for=\"item in items\"\n      :key=\"item.key\"\n      :ref=\"el => setPanelRef(item.key, el as HTMLElement)\"\n      class=\"collapse-item\"\n      :class=\"{\n        'collapse-item--active': isExpanded(item.key),\n        'collapse-item--disabled': item.disabled,\n      }\"\n    >\n      <!-- 面板头部 -->\n      <div\n        class=\"collapse-item__header\"\n        role=\"button\"\n        :aria-expanded=\"isExpanded(item.key)\"\n        :aria-controls=\"`collapse-content-${item.key}`\"\n        :aria-disabled=\"item.disabled\"\n        :tabindex=\"item.disabled ? -1 : 0\"\n        @click=\"!item.disabled && toggle(item.key)\"\n        @keydown=\"handleKeyDown($event, item.key)\"\n      >\n        <!-- 展开图标 -->\n        <span\n          class=\"collapse-item__arrow\"\n          :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\n        >\n          <C_Icon\n            name=\"mdi:chevron-right\"\n            :size=\"16\"\n            color=\"currentColor\"\n          />\n        </span>\n\n        <!-- 标题区域 -->\n        <div class=\"collapse-item__title-area\">\n          <slot\n            :name=\"`header-${item.key}`\"\n            :item=\"item\"\n            :expanded=\"isExpanded(item.key)\"\n          >\n            <div class=\"collapse-item__title-group\">\n              <C_Icon\n                v-if=\"item.icon\"\n                :name=\"item.icon\"\n                :size=\"18\"\n                color=\"currentColor\"\n                class=\"collapse-item__icon\"\n              />\n              <span class=\"collapse-item__title\">{{ item.title }}</span>\n              <span\n                v-if=\"item.subtitle\"\n                class=\"collapse-item__subtitle\"\n              >\n                {{ item.subtitle }}\n              </span>\n            </div>\n          </slot>\n        </div>\n\n        <!-- 头部右侧操作区 -->\n        <div\n          v-if=\"$slots[`extra-${item.key}`]\"\n          class=\"collapse-item__extra\"\n          @click.stop\n        >\n          <slot\n            :name=\"`extra-${item.key}`\"\n            :item=\"item\"\n            :expanded=\"isExpanded(item.key)\"\n          />\n        </div>\n      </div>\n\n      <!-- 面板内容 -->\n      <Transition\n        name=\"collapse-slide\"\n        @enter=\"onEnter\"\n        @after-enter=\"onAfterEnter\"\n        @leave=\"onLeave\"\n        @after-leave=\"onAfterLeave\"\n      >\n        <div\n          v-show=\"isExpanded(item.key)\"\n          :id=\"`collapse-content-${item.key}`\"\n          class=\"collapse-item__content-wrapper\"\n          role=\"region\"\n          :aria-labelledby=\"`collapse-header-${item.key}`\"\n        >\n          <div\n            v-if=\"shouldRender(item)\"\n            class=\"collapse-item__content\"\n          >\n            <slot\n              :name=\"`panel-${item.key}`\"\n              :item=\"item\"\n              :expanded=\"isExpanded(item.key)\"\n            >\n              <component\n                :is=\"item.content\"\n                v-if=\"item.content && typeof item.content !== 'string'\"\n              />\n              <template v-else-if=\"item.content\">{{ item.content }}</template>\n            </slot>\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, toRef } from 'vue'\n  import C_Icon from '../C_Icon/index.vue'\n  import { useCollapsePanel } from './composables/useCollapsePanel'\n  import type {\n    CollapsePanelExpose,\n    CollapsePanelItem,\n    CollapsePanelVariant,\n    ExpandIconPosition,\n  } from './types'\n\n  defineOptions({ name: 'C_CollapsePanel' })\n\n  interface Props {\n    /** 面板项配置数组 */\n    items: CollapsePanelItem[]\n    /** 当前激活面板的 key 数组（v-model） */\n    activeKeys?: string[]\n    /** 默认展开的面板 key 数组 */\n    defaultActiveKeys?: string[]\n    /** 是否手风琴模式 */\n    accordion?: boolean\n    /** 面板样式变体 */\n    variant?: CollapsePanelVariant\n    /** 展开图标位置 */\n    expandIconPosition?: ExpandIconPosition\n    /** 是否显示边框 */\n    bordered?: boolean\n    /** 展开状态 localStorage 持久化 key */\n    persistKey?: string\n  }\n\n  const props = withDefaults(defineProps<Props>(), {\n    activeKeys: undefined,\n    defaultActiveKeys: () => [],\n    accordion: false,\n    variant: 'default',\n    expandIconPosition: 'left',\n    bordered: true,\n    persistKey: undefined,\n  })\n\n  const emit = defineEmits<{\n    'update:activeKeys': [keys: string[]]\n    expand: [key: string]\n    collapse: [key: string]\n    change: [activeKeys: string[]]\n  }>()\n\n  const containerRef = ref<HTMLElement | null>(null)\n  const panelRefs = ref<Map<string, HTMLElement>>(new Map())\n\n  const setPanelRef = (key: string, el: HTMLElement | null) => {\n    if (el) {\n      panelRefs.value.set(key, el)\n    } else {\n      panelRefs.value.delete(key)\n    }\n  }\n\n  const {\n    isExpanded,\n    shouldRender,\n    toggle,\n    expandAll,\n    collapseAll,\n    getActiveKeys,\n    handleKeyDown,\n  } = useCollapsePanel({\n    items: toRef(props, 'items'),\n    activeKeys: toRef(props, 'activeKeys'),\n    defaultActiveKeys: props.defaultActiveKeys,\n    accordion: toRef(props, 'accordion'),\n    persistKey: toRef(props, 'persistKey'),\n    onChange: keys => {\n      emit('update:activeKeys', keys)\n      emit('change', keys)\n    },\n    onExpand: key => emit('expand', key),\n    onCollapse: key => emit('collapse', key),\n  })\n\n  /* ─── 展开/折叠动画 ──────────────────────────── */\n  const onEnter = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = '0'\n    element.style.overflow = 'hidden'\n    /* 强制 reflow */\n    void element.offsetHeight\n    element.style.height = `${element.scrollHeight}px`\n  }\n\n  const onAfterEnter = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = ''\n    element.style.overflow = ''\n  }\n\n  const onLeave = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = `${element.scrollHeight}px`\n    element.style.overflow = 'hidden'\n    void element.offsetHeight\n    element.style.height = '0'\n  }\n\n  const onAfterLeave = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = ''\n    element.style.overflow = ''\n  }\n\n  /* ─── 滚动到指定面板 ─────────────────────────── */\n  const scrollToPanel = (key: string) => {\n    const el = panelRefs.value.get(key)\n    if (el) {\n      el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n    }\n  }\n\n  /* ─── 暴露方法 ──────────────────────────────── */\n  defineExpose<CollapsePanelExpose>({\n    expandAll,\n    collapseAll,\n    toggle,\n    getActiveKeys,\n    scrollToPanel,\n  })\n</script>\n\n<style lang=\"scss\" scoped>\n  @use './index.scss';\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-25\n * @Description: 折叠面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"c-collapse-panel\"\n    :class=\"[\n      `c-collapse-panel--${variant}`,\n      {\n        'c-collapse-panel--bordered': bordered,\n        'c-collapse-panel--icon-right': expandIconPosition === 'right',\n      },\n    ]\"\n  >\n    <div\n      v-for=\"item in items\"\n      :key=\"item.key\"\n      :ref=\"el => setPanelRef(item.key, el as HTMLElement)\"\n      class=\"collapse-item\"\n      :class=\"{\n        'collapse-item--active': isExpanded(item.key),\n        'collapse-item--disabled': item.disabled,\n      }\"\n    >\n      <!-- 面板头部 -->\n      <div\n        class=\"collapse-item__header\"\n        role=\"button\"\n        :aria-expanded=\"isExpanded(item.key)\"\n        :aria-controls=\"`collapse-content-${item.key}`\"\n        :aria-disabled=\"item.disabled\"\n        :tabindex=\"item.disabled ? -1 : 0\"\n        @click=\"!item.disabled && toggle(item.key)\"\n        @keydown=\"handleKeyDown($event, item.key)\"\n      >\n        <!-- 展开图标 -->\n        <span\n          class=\"collapse-item__arrow\"\n          :class=\"{ 'collapse-item__arrow--expanded': isExpanded(item.key) }\"\n        >\n          <C_Icon\n            name=\"mdi:chevron-right\"\n            :size=\"16\"\n            color=\"currentColor\"\n          />\n        </span>\n\n        <!-- 标题区域 -->\n        <div class=\"collapse-item__title-area\">\n          <slot\n            :name=\"`header-${item.key}`\"\n            :item=\"item\"\n            :expanded=\"isExpanded(item.key)\"\n          >\n            <div class=\"collapse-item__title-group\">\n              <C_Icon\n                v-if=\"item.icon\"\n                :name=\"item.icon\"\n                :size=\"18\"\n                color=\"currentColor\"\n                class=\"collapse-item__icon\"\n              />\n              <span class=\"collapse-item__title\">{{ item.title }}</span>\n              <span\n                v-if=\"item.subtitle\"\n                class=\"collapse-item__subtitle\"\n              >\n                {{ item.subtitle }}\n              </span>\n            </div>\n          </slot>\n        </div>\n\n        <!-- 头部右侧操作区 -->\n        <div\n          v-if=\"$slots[`extra-${item.key}`]\"\n          class=\"collapse-item__extra\"\n          @click.stop\n        >\n          <slot\n            :name=\"`extra-${item.key}`\"\n            :item=\"item\"\n            :expanded=\"isExpanded(item.key)\"\n          />\n        </div>\n      </div>\n\n      <!-- 面板内容 -->\n      <Transition\n        name=\"collapse-slide\"\n        @enter=\"onEnter\"\n        @after-enter=\"onAfterEnter\"\n        @leave=\"onLeave\"\n        @after-leave=\"onAfterLeave\"\n      >\n        <div\n          v-show=\"isExpanded(item.key)\"\n          :id=\"`collapse-content-${item.key}`\"\n          class=\"collapse-item__content-wrapper\"\n          role=\"region\"\n          :aria-labelledby=\"`collapse-header-${item.key}`\"\n        >\n          <div\n            v-if=\"shouldRender(item)\"\n            class=\"collapse-item__content\"\n          >\n            <slot\n              :name=\"`panel-${item.key}`\"\n              :item=\"item\"\n              :expanded=\"isExpanded(item.key)\"\n            >\n              <component\n                :is=\"item.content\"\n                v-if=\"item.content && typeof item.content !== 'string'\"\n              />\n              <template v-else-if=\"item.content\">{{ item.content }}</template>\n            </slot>\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  import { ref, toRef } from 'vue'\n  import C_Icon from '../C_Icon/index.vue'\n  import { useCollapsePanel } from './composables/useCollapsePanel'\n  import type {\n    CollapsePanelExpose,\n    CollapsePanelItem,\n    CollapsePanelVariant,\n    ExpandIconPosition,\n  } from './types'\n\n  defineOptions({ name: 'C_CollapsePanel' })\n\n  interface Props {\n    /** 面板项配置数组 */\n    items: CollapsePanelItem[]\n    /** 当前激活面板的 key 数组（v-model） */\n    activeKeys?: string[]\n    /** 默认展开的面板 key 数组 */\n    defaultActiveKeys?: string[]\n    /** 是否手风琴模式 */\n    accordion?: boolean\n    /** 面板样式变体 */\n    variant?: CollapsePanelVariant\n    /** 展开图标位置 */\n    expandIconPosition?: ExpandIconPosition\n    /** 是否显示边框 */\n    bordered?: boolean\n    /** 展开状态 localStorage 持久化 key */\n    persistKey?: string\n  }\n\n  const props = withDefaults(defineProps<Props>(), {\n    activeKeys: undefined,\n    defaultActiveKeys: () => [],\n    accordion: false,\n    variant: 'default',\n    expandIconPosition: 'left',\n    bordered: true,\n    persistKey: undefined,\n  })\n\n  const emit = defineEmits<{\n    'update:activeKeys': [keys: string[]]\n    expand: [key: string]\n    collapse: [key: string]\n    change: [activeKeys: string[]]\n  }>()\n\n  const containerRef = ref<HTMLElement | null>(null)\n  const panelRefs = ref<Map<string, HTMLElement>>(new Map())\n\n  const setPanelRef = (key: string, el: HTMLElement | null) => {\n    if (el) {\n      panelRefs.value.set(key, el)\n    } else {\n      panelRefs.value.delete(key)\n    }\n  }\n\n  const {\n    isExpanded,\n    shouldRender,\n    toggle,\n    expandAll,\n    collapseAll,\n    getActiveKeys,\n    handleKeyDown,\n  } = useCollapsePanel({\n    items: toRef(props, 'items'),\n    activeKeys: toRef(props, 'activeKeys'),\n    defaultActiveKeys: props.defaultActiveKeys,\n    accordion: toRef(props, 'accordion'),\n    persistKey: toRef(props, 'persistKey'),\n    onChange: keys => {\n      emit('update:activeKeys', keys)\n      emit('change', keys)\n    },\n    onExpand: key => emit('expand', key),\n    onCollapse: key => emit('collapse', key),\n  })\n\n  /* ─── 展开/折叠动画 ──────────────────────────── */\n  const onEnter = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = '0'\n    element.style.overflow = 'hidden'\n    /* 强制 reflow */\n    void element.offsetHeight\n    element.style.height = `${element.scrollHeight}px`\n  }\n\n  const onAfterEnter = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = ''\n    element.style.overflow = ''\n  }\n\n  const onLeave = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = `${element.scrollHeight}px`\n    element.style.overflow = 'hidden'\n    void element.offsetHeight\n    element.style.height = '0'\n  }\n\n  const onAfterLeave = (el: Element) => {\n    const element = el as HTMLElement\n    element.style.height = ''\n    element.style.overflow = ''\n  }\n\n  /* ─── 滚动到指定面板 ─────────────────────────── */\n  const scrollToPanel = (key: string) => {\n    const el = panelRefs.value.get(key)\n    if (el) {\n      el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n    }\n  }\n\n  /* ─── 暴露方法 ──────────────────────────────── */\n  defineExpose<CollapsePanelExpose>({\n    expandAll,\n    collapseAll,\n    toggle,\n    getActiveKeys,\n    scrollToPanel,\n  })\n</script>\n\n<style lang=\"scss\" scoped>\n  @use './index.scss';\n</style>\n"],"mappings":"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"}

package/dist/C_Signature-BJMvVPWT.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Signature-BJMvVPWT.css","names":[],"sources":["../src/components/C_Signature/index.vue?vue&type=style&index=0&scoped=1c733bfe&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 电子签名组件样式 */\n.c-signature[data-v-1c733bfe] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n}\n.c-signature .signature-toolbar[data-v-1c733bfe] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: var(--c-bg-card, #fff);\n  border: 1px solid var(--c-border, #e1e4e8);\n  border-radius: var(--c-radius, 6px);\n  flex-wrap: wrap;\n}\n.c-signature .signature-toolbar .toolbar-section[data-v-1c733bfe] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.c-signature .signature-toolbar .toolbar-section.divider[data-v-1c733bfe] {\n  width: 1px;\n  height: 24px;\n  background: var(--c-border, #e1e4e8);\n  margin: 0 4px;\n}\n.c-signature .signature-toolbar .toolbar-section .section-label[data-v-1c733bfe] {\n  font-size: 13px;\n  color: var(--c-text-3, #999);\n  font-weight: 500;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.c-signature .signature-toolbar .toolbar-section .n-color-picker[data-v-1c733bfe] {\n  width: 90px !important;\n  flex-shrink: 0;\n}\n.c-signature .signature-canvas-wrapper[data-v-1c733bfe] {\n  position: relative;\n  border: 1px solid var(--c-border, #e1e4e8);\n  border-radius: var(--c-radius, 6px);\n  overflow: hidden;\n  background: var(--c-bg, #fff);\n  transition: border-color 0.3s;\n}\n.c-signature .signature-canvas-wrapper[data-v-1c733bfe]:hover {\n  border-color: var(--c-primary, #409eff);\n}\n.c-signature .signature-canvas-wrapper.disabled[data-v-1c733bfe] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  border-color: var(--c-border, #e1e4e8);\n}\n.c-signature .signature-canvas-wrapper.readonly[data-v-1c733bfe] {\n  cursor: default;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas[data-v-1c733bfe] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  cursor: crosshair;\n  touch-action: none;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas.disabled[data-v-1c733bfe], .c-signature .signature-canvas-wrapper .signature-canvas.readonly[data-v-1c733bfe] {\n  cursor: not-allowed;\n}\n.c-signature .signature-canvas-wrapper .canvas-placeholder[data-v-1c733bfe] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--c-text-4, #ccc);\n  font-size: 14px;\n  pointer-events: none;\n  user-select: none;\n}\n.c-signature .signature-actions[data-v-1c733bfe] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_Signature-BJUHx2BF.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Signature-BJUHx2BF.css","names":[],"sources":["../src/components/C_Signature/index.vue?vue&type=style&index=0&scoped=1c733bfe&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 电子签名组件样式 */\n.c-signature[data-v-1c733bfe] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n}\n.c-signature .signature-toolbar[data-v-1c733bfe] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: var(--c-bg-card, #fff);\n  border: 1px solid var(--c-border, #e1e4e8);\n  border-radius: var(--c-radius, 6px);\n  flex-wrap: wrap;\n}\n.c-signature .signature-toolbar .toolbar-section[data-v-1c733bfe] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.c-signature .signature-toolbar .toolbar-section.divider[data-v-1c733bfe] {\n  width: 1px;\n  height: 24px;\n  background: var(--c-border, #e1e4e8);\n  margin: 0 4px;\n}\n.c-signature .signature-toolbar .toolbar-section .section-label[data-v-1c733bfe] {\n  font-size: 13px;\n  color: var(--c-text-3, #999);\n  font-weight: 500;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.c-signature .signature-toolbar .toolbar-section .n-color-picker[data-v-1c733bfe] {\n  width: 90px !important;\n  flex-shrink: 0;\n}\n.c-signature .signature-canvas-wrapper[data-v-1c733bfe] {\n  position: relative;\n  border: 1px solid var(--c-border, #e1e4e8);\n  border-radius: var(--c-radius, 6px);\n  overflow: hidden;\n  background: var(--c-bg, #fff);\n  transition: border-color 0.3s;\n}\n.c-signature .signature-canvas-wrapper[data-v-1c733bfe]:hover {\n  border-color: var(--c-primary, #409eff);\n}\n.c-signature .signature-canvas-wrapper.disabled[data-v-1c733bfe] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  border-color: var(--c-border, #e1e4e8);\n}\n.c-signature .signature-canvas-wrapper.readonly[data-v-1c733bfe] {\n  cursor: default;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas[data-v-1c733bfe] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  cursor: crosshair;\n  touch-action: none;\n}\n.c-signature .signature-canvas-wrapper .signature-canvas.disabled[data-v-1c733bfe], .c-signature .signature-canvas-wrapper .signature-canvas.readonly[data-v-1c733bfe] {\n  cursor: not-allowed;\n}\n.c-signature .signature-canvas-wrapper .canvas-placeholder[data-v-1c733bfe] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--c-text-4, #ccc);\n  font-size: 14px;\n  pointer-events: none;\n  user-select: none;\n}\n.c-signature .signature-actions[data-v-1c733bfe] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_Signature.css

@@ -30,6 +30,12 @@
   font-size: 13px;
   color: var(--c-text-3, #999);
   font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.c-signature .signature-toolbar .toolbar-section .n-color-picker[data-v-1c733bfe] {
+  width: 90px !important;
+  flex-shrink: 0;
 }
 .c-signature .signature-canvas-wrapper[data-v-1c733bfe] {
   position: relative;
@@ -76,4 +82,4 @@
   gap: 8px;
 }
 
-/*# sourceMappingURL=C_Signature-B5fFz6RD.css.map*/
+/*# sourceMappingURL=C_Signature-BJMvVPWT.css.map*/

package/dist/C_Signature.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Signature.js","names":["showToolbar","disabled","readonly","width","height","backgroundColor"],"sources":["../src/components/C_Signature/composables/useSignatureCanvas.ts","../src/components/C_Signature/composables/useSignatureHistory.ts","../src/components/C_Signature/composables/useSignatureExport.ts","../src/components/C_Signature/data.ts","../src/components/C_Signature/index.vue","../src/components/C_Signature/index.vue","../src/components/C_Signature/index.vue"],"sourcesContent":["import type { Ref } from \"vue\";\r\nimport { ref, readonly } from \"vue\";\r\nimport type {\r\n  PenConfig,\r\n  PenMode,\r\n  SignaturePoint,\r\n  SignatureStroke,\r\n} from \"../types\";\r\n\r\ninterface UseSignatureCanvasOptions {\r\n  canvasRef: Ref<HTMLCanvasElement | null>;\r\n  penConfig: Ref<PenConfig>;\r\n  mode: Ref<PenMode>;\r\n  disabled: Ref<boolean>;\r\n  onStrokeComplete: (stroke: SignatureStroke) => void;\r\n  onDrawStart: () => void;\r\n  onDrawing: (point: SignaturePoint) => void;\r\n}\r\n\r\nexport function useSignatureCanvas(options: UseSignatureCanvasOptions) {\r\n  const {\r\n    canvasRef,\r\n    penConfig,\r\n    mode,\r\n    disabled,\r\n    onStrokeComplete,\r\n    onDrawStart,\r\n    onDrawing,\r\n  } = options;\r\n\r\n  const isDrawing = ref(false);\r\n  const currentStroke = ref<SignaturePoint[]>([]);\r\n  let ctx: CanvasRenderingContext2D | null = null;\r\n\r\n  const initCanvas = () => {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas) return;\r\n    ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\r\n    if (!ctx) return;\r\n    const dpr = window.devicePixelRatio || 1;\r\n    const rect = canvas.getBoundingClientRect();\r\n    canvas.width = rect.width * dpr;\r\n    canvas.height = rect.height * dpr;\r\n    canvas.style.width = `${rect.width}px`;\r\n    canvas.style.height = `${rect.height}px`;\r\n    ctx.scale(dpr, dpr);\r\n    ctx.lineCap = \"round\";\r\n    ctx.lineJoin = \"round\";\r\n  };\r\n\r\n  const getPointFromEvent = (e: MouseEvent | TouchEvent): SignaturePoint => {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas) return { x: 0, y: 0 };\r\n    const rect = canvas.getBoundingClientRect();\r\n    let clientX: number;\r\n    let clientY: number;\r\n    if (\"touches\" in e && e.touches.length > 0) {\r\n      ({ clientX, clientY } = e.touches[0]);\r\n    } else if (\"clientX\" in e) {\r\n      ({ clientX, clientY } = e);\r\n    } else {\r\n      return { x: 0, y: 0 };\r\n    }\r\n    return {\r\n      x: clientX - rect.left,\r\n      y: clientY - rect.top,\r\n      timestamp: Date.now(),\r\n    };\r\n  };\r\n\r\n  const drawStroke = (\r\n    from: SignaturePoint,\r\n    to: SignaturePoint,\r\n    config: PenConfig,\r\n    eraserMode = false,\r\n  ) => {\r\n    if (!ctx) return;\r\n    ctx.save();\r\n    if (eraserMode) {\r\n      ctx.globalCompositeOperation = \"destination-out\";\r\n      ctx.lineWidth = 20;\r\n    } else {\r\n      ctx.globalCompositeOperation = \"source-over\";\r\n      ctx.strokeStyle = config.color;\r\n      ctx.lineWidth = config.width;\r\n      ctx.globalAlpha = config.opacity;\r\n    }\r\n    ctx.beginPath();\r\n    ctx.moveTo(from.x, from.y);\r\n    ctx.lineTo(to.x, to.y);\r\n    ctx.stroke();\r\n    ctx.restore();\r\n  };\r\n\r\n  const startDrawing = (e: MouseEvent | TouchEvent) => {\r\n    if (disabled.value) return;\r\n    e.preventDefault();\r\n    isDrawing.value = true;\r\n    currentStroke.value = [];\r\n    const point = getPointFromEvent(e);\r\n    currentStroke.value.push(point);\r\n    onDrawStart();\r\n  };\r\n\r\n  const draw = (e: MouseEvent | TouchEvent) => {\r\n    if (!isDrawing.value || disabled.value) return;\r\n    e.preventDefault();\r\n    const point = getPointFromEvent(e);\r\n    const lastPoint = currentStroke.value[currentStroke.value.length - 1];\r\n    if (lastPoint) {\r\n      drawStroke(lastPoint, point, penConfig.value, mode.value === \"eraser\");\r\n    }\r\n    currentStroke.value.push(point);\r\n    onDrawing(point);\r\n  };\r\n\r\n  const endDrawing = (e: MouseEvent | TouchEvent) => {\r\n    if (!isDrawing.value || disabled.value) return;\r\n    e.preventDefault();\r\n    isDrawing.value = false;\r\n    if (currentStroke.value.length > 0) {\r\n      const stroke: SignatureStroke = {\r\n        points: [...currentStroke.value],\r\n        color: penConfig.value.color,\r\n        width: penConfig.value.width,\r\n        opacity: penConfig.value.opacity,\r\n        mode: mode.value,\r\n      };\r\n      onStrokeComplete(stroke);\r\n      currentStroke.value = [];\r\n    }\r\n  };\r\n\r\n  const redrawStrokes = (strokes: SignatureStroke[]) => {\r\n    if (!ctx || !canvasRef.value) return;\r\n    const canvas = canvasRef.value;\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n    strokes.forEach((stroke) => {\r\n      for (let i = 1; i < stroke.points.length; i++) {\r\n        drawStroke(\r\n          stroke.points[i - 1],\r\n          stroke.points[i],\r\n          { color: stroke.color, width: stroke.width, opacity: stroke.opacity },\r\n          stroke.mode === \"eraser\",\r\n        );\r\n      }\r\n    });\r\n  };\r\n\r\n  const clearCanvas = () => {\r\n    if (!ctx || !canvasRef.value) return;\r\n    ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);\r\n  };\r\n\r\n  const bindEvents = () => {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas) return;\r\n    canvas.addEventListener(\"mousedown\", startDrawing);\r\n    canvas.addEventListener(\"mousemove\", draw);\r\n    canvas.addEventListener(\"mouseup\", endDrawing);\r\n    canvas.addEventListener(\"mouseleave\", endDrawing);\r\n    canvas.addEventListener(\"touchstart\", startDrawing, { passive: false });\r\n    canvas.addEventListener(\"touchmove\", draw, { passive: false });\r\n    canvas.addEventListener(\"touchend\", endDrawing);\r\n    canvas.addEventListener(\"touchcancel\", endDrawing);\r\n  };\r\n\r\n  const unbindEvents = () => {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas) return;\r\n    canvas.removeEventListener(\"mousedown\", startDrawing);\r\n    canvas.removeEventListener(\"mousemove\", draw);\r\n    canvas.removeEventListener(\"mouseup\", endDrawing);\r\n    canvas.removeEventListener(\"mouseleave\", endDrawing);\r\n    canvas.removeEventListener(\"touchstart\", startDrawing);\r\n    canvas.removeEventListener(\"touchmove\", draw);\r\n    canvas.removeEventListener(\"touchend\", endDrawing);\r\n    canvas.removeEventListener(\"touchcancel\", endDrawing);\r\n  };\r\n\r\n  return {\r\n    isDrawing: readonly(isDrawing),\r\n    initCanvas,\r\n    bindEvents,\r\n    unbindEvents,\r\n    redrawStrokes,\r\n    clearCanvas,\r\n  };\r\n}\r\n","import { ref, computed, readonly } from \"vue\";\r\nimport type { SignatureStroke } from \"../types\";\r\n\r\ninterface UseSignatureHistoryOptions {\r\n  maxHistory?: number;\r\n  onChange?: (strokes: SignatureStroke[]) => void;\r\n}\r\n\r\nexport function useSignatureHistory(options: UseSignatureHistoryOptions = {}) {\r\n  const { maxHistory = 50, onChange } = options;\r\n\r\n  const strokes = ref<SignatureStroke[]>([]);\r\n  const historyStack = ref<SignatureStroke[][]>([]);\r\n  const historyIndex = ref(-1);\r\n\r\n  const canUndo = computed(() => historyIndex.value > 0);\r\n  const canRedo = computed(\r\n    () => historyIndex.value < historyStack.value.length - 1,\r\n  );\r\n\r\n  const addStroke = (stroke: SignatureStroke) => {\r\n    strokes.value.push(stroke);\r\n    saveToHistory();\r\n  };\r\n\r\n  const saveToHistory = () => {\r\n    historyStack.value = historyStack.value.slice(0, historyIndex.value + 1);\r\n    historyStack.value.push([...strokes.value]);\r\n    historyIndex.value++;\r\n    if (historyStack.value.length > maxHistory) {\r\n      historyStack.value.shift();\r\n      historyIndex.value--;\r\n    }\r\n    onChange?.(strokes.value);\r\n  };\r\n\r\n  const undo = (): boolean => {\r\n    if (!canUndo.value) return false;\r\n    historyIndex.value--;\r\n    strokes.value = [...historyStack.value[historyIndex.value]];\r\n    onChange?.(strokes.value);\r\n    return true;\r\n  };\r\n\r\n  const redo = (): boolean => {\r\n    if (!canRedo.value) return false;\r\n    historyIndex.value++;\r\n    strokes.value = [...historyStack.value[historyIndex.value]];\r\n    onChange?.(strokes.value);\r\n    return true;\r\n  };\r\n\r\n  const clear = () => {\r\n    strokes.value = [];\r\n    historyStack.value = [[]];\r\n    historyIndex.value = 0;\r\n    onChange?.(strokes.value);\r\n  };\r\n\r\n  const loadData = (data: SignatureStroke[]) => {\r\n    strokes.value = [...data];\r\n    historyStack.value = [[...data]];\r\n    historyIndex.value = 0;\r\n    onChange?.(strokes.value);\r\n  };\r\n\r\n  const isEmpty = computed(() => strokes.value.length === 0);\r\n\r\n  // 初始化历史栈\r\n  historyStack.value = [[]];\r\n  historyIndex.value = 0;\r\n\r\n  return {\r\n    strokes: readonly(strokes),\r\n    canUndo: readonly(canUndo),\r\n    canRedo: readonly(canRedo),\r\n    isEmpty: readonly(isEmpty),\r\n    addStroke,\r\n    undo,\r\n    redo,\r\n    clear,\r\n    loadData,\r\n  };\r\n}\r\n","import type { Ref } from 'vue'\r\nimport type { ExportOptions, WatermarkConfig } from '../types'\r\n\r\ninterface UseSignatureExportOptions {\r\n  canvasRef: Ref<HTMLCanvasElement | null>\r\n  watermark?: Ref<Partial<WatermarkConfig>>\r\n}\r\n\r\nexport function useSignatureExport(options: UseSignatureExportOptions) {\r\n  const { canvasRef, watermark } = options\r\n\r\n  const getWatermarkPosition = (\r\n    canvas: HTMLCanvasElement,\r\n    textWidth: number,\r\n    fontSize: number,\r\n    position: string\r\n  ): { x: number; y: number } => {\r\n    const padding = 10\r\n    const positions = {\r\n      'top-left': { x: padding, y: fontSize + padding },\r\n      'top-right': { x: canvas.width - textWidth - padding, y: fontSize + padding },\r\n      'bottom-left': { x: padding, y: canvas.height - padding },\r\n      'bottom-right': { x: canvas.width - textWidth - padding, y: canvas.height - padding },\r\n    }\r\n    return positions[position as keyof typeof positions] || positions['bottom-right']\r\n  }\r\n\r\n  const drawWatermark = (canvas: HTMLCanvasElement, text: string): void => {\r\n    const ctx = canvas.getContext('2d')\r\n    if (!ctx || !watermark?.value?.show) return\r\n    const config = {\r\n      fontSize: watermark.value.fontSize || 12,\r\n      color: watermark.value.color || '#999999',\r\n      position: watermark.value.position || 'bottom-right',\r\n    }\r\n    ctx.save()\r\n    ctx.font = `${config.fontSize}px Arial`\r\n    ctx.fillStyle = config.color\r\n    ctx.textBaseline = 'bottom'\r\n    const textWidth = ctx.measureText(text).width\r\n    const { x, y } = getWatermarkPosition(canvas, textWidth, config.fontSize, config.position)\r\n    ctx.fillText(text, x, y)\r\n    ctx.restore()\r\n  }\r\n\r\n  const createTempCanvas = (\r\n    sourceCanvas: HTMLCanvasElement,\r\n    includeBackground: boolean,\r\n    backgroundColor: string\r\n  ) => {\r\n    const tempCanvas = document.createElement('canvas')\r\n    tempCanvas.width = sourceCanvas.width\r\n    tempCanvas.height = sourceCanvas.height\r\n    const tempCtx = tempCanvas.getContext('2d')\r\n    if (!tempCtx) throw new Error('无法创建临时 Canvas')\r\n    if (includeBackground) {\r\n      tempCtx.fillStyle = backgroundColor\r\n      tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height)\r\n    }\r\n    tempCtx.drawImage(sourceCanvas, 0, 0)\r\n    return { canvas: tempCanvas, ctx: tempCtx }\r\n  }\r\n\r\n  const prepareExportCanvas = (canvas: HTMLCanvasElement, options: ExportOptions): HTMLCanvasElement => {\r\n    const { includeBackground = false, backgroundColor = '#FFFFFF', includeWatermark = false } = options\r\n    const { canvas: tempCanvas } = createTempCanvas(canvas, includeBackground, backgroundColor)\r\n    if (includeWatermark && watermark?.value?.show && watermark.value.text) {\r\n      drawWatermark(tempCanvas, watermark.value.text)\r\n    }\r\n    return tempCanvas\r\n  }\r\n\r\n  const exportToBlob = (canvas: HTMLCanvasElement, quality: number): Promise<Blob> => {\r\n    return new Promise<Blob>((resolve, reject) => {\r\n      canvas.toBlob(\r\n        blob => (blob ? resolve(blob) : reject(new Error('导出失败'))),\r\n        'image/png',\r\n        quality\r\n      )\r\n    })\r\n  }\r\n\r\n  const exportSignature = async (options: ExportOptions = {}): Promise<string | Blob> => {\r\n    const canvas = canvasRef.value\r\n    if (!canvas) throw new Error('Canvas 未初始化')\r\n    const { format = 'png', quality = 0.92 } = options\r\n    if (format === 'svg') {\r\n      return 'data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\"><text>SVG export placeholder</text></svg>'\r\n    }\r\n    const tempCanvas = prepareExportCanvas(canvas, options)\r\n    if (format === 'blob') return exportToBlob(tempCanvas, quality)\r\n    const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png'\r\n    return tempCanvas.toDataURL(mimeType, quality)\r\n  }\r\n\r\n  const download = async (filename = 'signature', options: ExportOptions = {}): Promise<void> => {\r\n    const format = options.format || 'png'\r\n    const result = await exportSignature({ ...options, format })\r\n    if (result instanceof Blob) {\r\n      const url = URL.createObjectURL(result)\r\n      const link = document.createElement('a')\r\n      link.href = url\r\n      link.download = `${filename}.${format}`\r\n      link.click()\r\n      URL.revokeObjectURL(url)\r\n    } else if (typeof result === 'string') {\r\n      const link = document.createElement('a')\r\n      link.href = result\r\n      link.download = `${filename}.${format}`\r\n      link.click()\r\n    }\r\n  }\r\n\r\n  const loadImage = async (imageUrl: string): Promise<void> => {\r\n    const canvas = canvasRef.value\r\n    if (!canvas) throw new Error('Canvas 未初始化')\r\n    const ctx = canvas.getContext('2d')\r\n    if (!ctx) throw new Error('无法获取 Canvas 上下文')\r\n    return new Promise((resolve, reject) => {\r\n      const img = new Image()\r\n      img.crossOrigin = 'anonymous'\r\n      img.onload = () => {\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height)\r\n        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)\r\n        resolve()\r\n      }\r\n      img.onerror = () => reject(new Error(`图片加载失败: ${imageUrl}`))\r\n      img.src = imageUrl\r\n    })\r\n  }\r\n\r\n  return { exportSignature, download, loadImage }\r\n}\r\n","import type { EraserConfig, PenConfig, WatermarkConfig } from \"./types\";\r\n\r\nexport const DEFAULT_PEN_CONFIG: PenConfig = {\r\n  color: \"#000000\",\r\n  width: 2,\r\n  opacity: 1,\r\n};\r\n\r\nexport const DEFAULT_ERASER_CONFIG: EraserConfig = { size: 20 };\r\n\r\nexport const DEFAULT_WATERMARK_CONFIG: WatermarkConfig = {\r\n  show: false,\r\n  text: \"\",\r\n  fontSize: 12,\r\n  color: \"#999999\",\r\n  position: \"bottom-right\",\r\n};\r\n\r\nexport const PRESET_COLORS = [\r\n  \"#000000\",\r\n  \"#FF0000\",\r\n  \"#0000FF\",\r\n  \"#00AA00\",\r\n  \"#FF6600\",\r\n  \"#9900FF\",\r\n];\r\n\r\nexport const PRESET_WIDTHS = [1, 2, 3, 5, 8];\r\n\r\nexport const EXPORT_FORMAT_OPTIONS = [\r\n  { label: \"PNG\", value: \"png\" },\r\n  { label: \"JPEG\", value: \"jpeg\" },\r\n  { label: \"SVG\", value: \"svg\" },\r\n  { label: \"Blob\", value: \"blob\" },\r\n] as const;\r\n\r\nexport const WATERMARK_POSITION_OPTIONS = [\r\n  { label: \"左上\", value: \"top-left\" },\r\n  { label: \"右上\", value: \"top-right\" },\r\n  { label: \"左下\", value: \"bottom-left\" },\r\n  { label: \"右下\", value: \"bottom-right\" },\r\n] as const;\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-25\r\n * @Description: 电子签名组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-signature\">\r\n    <div v-if=\"showToolbar\" class=\"signature-toolbar\">\r\n      <div class=\"toolbar-section\">\r\n        <NButtonGroup>\r\n          <NButton\r\n            :type=\"currentMode === 'pen' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'pen'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:draw\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            画笔\r\n          </NButton>\r\n          <NButton\r\n            :type=\"currentMode === 'eraser' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'eraser'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:eraser\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            橡皮擦\r\n          </NButton>\r\n        </NButtonGroup>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">颜色</span>\r\n        <NColorPicker\r\n          v-model:value=\"currentPenConfig.color\"\r\n          :show-alpha=\"false\"\r\n          size=\"small\"\r\n          :swatches=\"PRESET_COLORS\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">粗细</span>\r\n        <NInputNumber\r\n          v-model:value=\"currentPenConfig.width\"\r\n          :min=\"1\"\r\n          :max=\"20\"\r\n          size=\"small\"\r\n          style=\"width: 80px\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton size=\"small\" :disabled=\"!canUndo\" @click=\"handleUndo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:undo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          撤销\r\n        </NButton>\r\n        <NButton size=\"small\" :disabled=\"!canRedo\" @click=\"handleRedo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:redo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          重做\r\n        </NButton>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton\r\n          size=\"small\"\r\n          type=\"error\"\r\n          :disabled=\"isEmpty\"\r\n          @click=\"handleClear\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:delete-outline\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          清空\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"signature-canvas-wrapper\"\r\n      :class=\"{ disabled, readonly }\"\r\n      :style=\"{\r\n        width: typeof width === 'number' ? `${width}px` : width,\r\n        height: typeof height === 'number' ? `${height}px` : height,\r\n        backgroundColor: backgroundColor || 'transparent',\r\n      }\"\r\n    >\r\n      <canvas\r\n        ref=\"canvasRef\"\r\n        class=\"signature-canvas\"\r\n        :class=\"{ disabled, readonly }\"\r\n      />\r\n      <div v-if=\"isEmpty && !disabled && !readonly\" class=\"canvas-placeholder\">\r\n        请在此处签名\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, reactive, toRef, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton, NButtonGroup, NColorPicker, NInputNumber } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSignatureCanvas } from \"./composables/useSignatureCanvas\";\r\nimport { useSignatureHistory } from \"./composables/useSignatureHistory\";\r\nimport { useSignatureExport } from \"./composables/useSignatureExport\";\r\nimport {\r\n  DEFAULT_PEN_CONFIG,\r\n  DEFAULT_WATERMARK_CONFIG,\r\n  PRESET_COLORS,\r\n} from \"./data\";\r\nimport type {\r\n  ExportOptions,\r\n  PenConfig,\r\n  PenMode,\r\n  SignatureExpose,\r\n  SignaturePoint,\r\n  SignatureProps,\r\n  SignatureStroke,\r\n  WatermarkConfig,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Signature\" });\r\n\r\nconst props = withDefaults(defineProps<SignatureProps>(), {\r\n  width: \"100%\",\r\n  height: 300,\r\n  disabled: false,\r\n  readonly: false,\r\n  showToolbar: true,\r\n  maxHistory: 50,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"start-draw\": [];\r\n  drawing: [point: SignaturePoint];\r\n  \"end-draw\": [stroke: SignatureStroke];\r\n  clear: [];\r\n  undo: [];\r\n  redo: [];\r\n  change: [data: SignatureStroke[]];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\nconst currentMode = ref<PenMode>(\"pen\");\r\nconst currentPenConfig = reactive<PenConfig>({\r\n  ...DEFAULT_PEN_CONFIG,\r\n  ...props.penConfig,\r\n});\r\nconst currentWatermark = reactive<WatermarkConfig>({\r\n  ...DEFAULT_WATERMARK_CONFIG,\r\n  ...props.watermark,\r\n});\r\n\r\nconst {\r\n  strokes,\r\n  canUndo,\r\n  canRedo,\r\n  isEmpty,\r\n  addStroke,\r\n  undo,\r\n  redo,\r\n  clear,\r\n  loadData,\r\n} = useSignatureHistory({\r\n  maxHistory: props.maxHistory,\r\n  onChange: (data) => {\r\n    canvasInstance.redrawStrokes(data as SignatureStroke[]);\r\n    emit(\"change\", data as SignatureStroke[]);\r\n  },\r\n});\r\n\r\nconst canvasInstance = useSignatureCanvas({\r\n  canvasRef,\r\n  penConfig: toRef(currentPenConfig),\r\n  mode: currentMode,\r\n  disabled: toRef(props, \"disabled\"),\r\n  onStrokeComplete: (stroke: SignatureStroke) => {\r\n    addStroke(stroke);\r\n    emit(\"end-draw\", stroke);\r\n  },\r\n  onDrawStart: () => emit(\"start-draw\"),\r\n  onDrawing: (point: SignaturePoint) => emit(\"drawing\", point),\r\n});\r\n\r\nconst exportInstance = useSignatureExport({\r\n  canvasRef,\r\n  watermark: toRef(currentWatermark),\r\n});\r\n\r\nconst handleUndo = (): boolean => {\r\n  const result = undo();\r\n  if (result) emit(\"undo\");\r\n  return result;\r\n};\r\n\r\nconst handleRedo = (): boolean => {\r\n  const result = redo();\r\n  if (result) emit(\"redo\");\r\n  return result;\r\n};\r\n\r\nconst handleClear = () => {\r\n  clear();\r\n  canvasInstance.clearCanvas();\r\n  emit(\"clear\");\r\n};\r\n\r\nconst exportSignature = async (\r\n  options?: ExportOptions,\r\n): Promise<string | Blob> => {\r\n  return exportInstance.exportSignature(options);\r\n};\r\n\r\nconst download = async (\r\n  filename?: string,\r\n  options?: ExportOptions,\r\n): Promise<void> => {\r\n  return exportInstance.download(filename, options);\r\n};\r\n\r\nconst loadImage = async (imageUrl: string): Promise<void> => {\r\n  await exportInstance.loadImage(imageUrl);\r\n  clear();\r\n};\r\n\r\nconst getSignatureData = (): SignatureStroke[] =>\r\n  strokes.value as SignatureStroke[];\r\nconst loadSignatureData = (data: SignatureStroke[]): void => loadData(data);\r\nconst isSignatureEmpty = (): boolean => isEmpty.value;\r\n\r\nonMounted(() => {\r\n  canvasInstance.initCanvas();\r\n  canvasInstance.bindEvents();\r\n  if (props.backgroundImage) loadImage(props.backgroundImage);\r\n});\r\n\r\nonUnmounted(() => canvasInstance.unbindEvents());\r\n\r\ndefineExpose<SignatureExpose>({\r\n  clear: handleClear,\r\n  undo: handleUndo,\r\n  redo: handleRedo,\r\n  export: exportSignature,\r\n  download,\r\n  loadImage,\r\n  getSignatureData,\r\n  loadSignatureData,\r\n  isEmpty: isSignatureEmpty,\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: 2026-02-25\r\n * @Description: 电子签名组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-signature\">\r\n    <div v-if=\"showToolbar\" class=\"signature-toolbar\">\r\n      <div class=\"toolbar-section\">\r\n        <NButtonGroup>\r\n          <NButton\r\n            :type=\"currentMode === 'pen' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'pen'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:draw\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            画笔\r\n          </NButton>\r\n          <NButton\r\n            :type=\"currentMode === 'eraser' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'eraser'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:eraser\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            橡皮擦\r\n          </NButton>\r\n        </NButtonGroup>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">颜色</span>\r\n        <NColorPicker\r\n          v-model:value=\"currentPenConfig.color\"\r\n          :show-alpha=\"false\"\r\n          size=\"small\"\r\n          :swatches=\"PRESET_COLORS\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">粗细</span>\r\n        <NInputNumber\r\n          v-model:value=\"currentPenConfig.width\"\r\n          :min=\"1\"\r\n          :max=\"20\"\r\n          size=\"small\"\r\n          style=\"width: 80px\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton size=\"small\" :disabled=\"!canUndo\" @click=\"handleUndo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:undo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          撤销\r\n        </NButton>\r\n        <NButton size=\"small\" :disabled=\"!canRedo\" @click=\"handleRedo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:redo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          重做\r\n        </NButton>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton\r\n          size=\"small\"\r\n          type=\"error\"\r\n          :disabled=\"isEmpty\"\r\n          @click=\"handleClear\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:delete-outline\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          清空\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"signature-canvas-wrapper\"\r\n      :class=\"{ disabled, readonly }\"\r\n      :style=\"{\r\n        width: typeof width === 'number' ? `${width}px` : width,\r\n        height: typeof height === 'number' ? `${height}px` : height,\r\n        backgroundColor: backgroundColor || 'transparent',\r\n      }\"\r\n    >\r\n      <canvas\r\n        ref=\"canvasRef\"\r\n        class=\"signature-canvas\"\r\n        :class=\"{ disabled, readonly }\"\r\n      />\r\n      <div v-if=\"isEmpty && !disabled && !readonly\" class=\"canvas-placeholder\">\r\n        请在此处签名\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, reactive, toRef, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton, NButtonGroup, NColorPicker, NInputNumber } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSignatureCanvas } from \"./composables/useSignatureCanvas\";\r\nimport { useSignatureHistory } from \"./composables/useSignatureHistory\";\r\nimport { useSignatureExport } from \"./composables/useSignatureExport\";\r\nimport {\r\n  DEFAULT_PEN_CONFIG,\r\n  DEFAULT_WATERMARK_CONFIG,\r\n  PRESET_COLORS,\r\n} from \"./data\";\r\nimport type {\r\n  ExportOptions,\r\n  PenConfig,\r\n  PenMode,\r\n  SignatureExpose,\r\n  SignaturePoint,\r\n  SignatureProps,\r\n  SignatureStroke,\r\n  WatermarkConfig,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Signature\" });\r\n\r\nconst props = withDefaults(defineProps<SignatureProps>(), {\r\n  width: \"100%\",\r\n  height: 300,\r\n  disabled: false,\r\n  readonly: false,\r\n  showToolbar: true,\r\n  maxHistory: 50,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"start-draw\": [];\r\n  drawing: [point: SignaturePoint];\r\n  \"end-draw\": [stroke: SignatureStroke];\r\n  clear: [];\r\n  undo: [];\r\n  redo: [];\r\n  change: [data: SignatureStroke[]];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\nconst currentMode = ref<PenMode>(\"pen\");\r\nconst currentPenConfig = reactive<PenConfig>({\r\n  ...DEFAULT_PEN_CONFIG,\r\n  ...props.penConfig,\r\n});\r\nconst currentWatermark = reactive<WatermarkConfig>({\r\n  ...DEFAULT_WATERMARK_CONFIG,\r\n  ...props.watermark,\r\n});\r\n\r\nconst {\r\n  strokes,\r\n  canUndo,\r\n  canRedo,\r\n  isEmpty,\r\n  addStroke,\r\n  undo,\r\n  redo,\r\n  clear,\r\n  loadData,\r\n} = useSignatureHistory({\r\n  maxHistory: props.maxHistory,\r\n  onChange: (data) => {\r\n    canvasInstance.redrawStrokes(data as SignatureStroke[]);\r\n    emit(\"change\", data as SignatureStroke[]);\r\n  },\r\n});\r\n\r\nconst canvasInstance = useSignatureCanvas({\r\n  canvasRef,\r\n  penConfig: toRef(currentPenConfig),\r\n  mode: currentMode,\r\n  disabled: toRef(props, \"disabled\"),\r\n  onStrokeComplete: (stroke: SignatureStroke) => {\r\n    addStroke(stroke);\r\n    emit(\"end-draw\", stroke);\r\n  },\r\n  onDrawStart: () => emit(\"start-draw\"),\r\n  onDrawing: (point: SignaturePoint) => emit(\"drawing\", point),\r\n});\r\n\r\nconst exportInstance = useSignatureExport({\r\n  canvasRef,\r\n  watermark: toRef(currentWatermark),\r\n});\r\n\r\nconst handleUndo = (): boolean => {\r\n  const result = undo();\r\n  if (result) emit(\"undo\");\r\n  return result;\r\n};\r\n\r\nconst handleRedo = (): boolean => {\r\n  const result = redo();\r\n  if (result) emit(\"redo\");\r\n  return result;\r\n};\r\n\r\nconst handleClear = () => {\r\n  clear();\r\n  canvasInstance.clearCanvas();\r\n  emit(\"clear\");\r\n};\r\n\r\nconst exportSignature = async (\r\n  options?: ExportOptions,\r\n): Promise<string | Blob> => {\r\n  return exportInstance.exportSignature(options);\r\n};\r\n\r\nconst download = async (\r\n  filename?: string,\r\n  options?: ExportOptions,\r\n): Promise<void> => {\r\n  return exportInstance.download(filename, options);\r\n};\r\n\r\nconst loadImage = async (imageUrl: string): Promise<void> => {\r\n  await exportInstance.loadImage(imageUrl);\r\n  clear();\r\n};\r\n\r\nconst getSignatureData = (): SignatureStroke[] =>\r\n  strokes.value as SignatureStroke[];\r\nconst loadSignatureData = (data: SignatureStroke[]): void => loadData(data);\r\nconst isSignatureEmpty = (): boolean => isEmpty.value;\r\n\r\nonMounted(() => {\r\n  canvasInstance.initCanvas();\r\n  canvasInstance.bindEvents();\r\n  if (props.backgroundImage) loadImage(props.backgroundImage);\r\n});\r\n\r\nonUnmounted(() => canvasInstance.unbindEvents());\r\n\r\ndefineExpose<SignatureExpose>({\r\n  clear: handleClear,\r\n  undo: handleUndo,\r\n  redo: handleRedo,\r\n  export: exportSignature,\r\n  download,\r\n  loadImage,\r\n  getSignatureData,\r\n  loadSignatureData,\r\n  isEmpty: isSignatureEmpty,\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: 2026-02-25\r\n * @Description: 电子签名组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-signature\">\r\n    <div v-if=\"showToolbar\" class=\"signature-toolbar\">\r\n      <div class=\"toolbar-section\">\r\n        <NButtonGroup>\r\n          <NButton\r\n            :type=\"currentMode === 'pen' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'pen'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:draw\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            画笔\r\n          </NButton>\r\n          <NButton\r\n            :type=\"currentMode === 'eraser' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'eraser'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:eraser\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            橡皮擦\r\n          </NButton>\r\n        </NButtonGroup>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">颜色</span>\r\n        <NColorPicker\r\n          v-model:value=\"currentPenConfig.color\"\r\n          :show-alpha=\"false\"\r\n          size=\"small\"\r\n          :swatches=\"PRESET_COLORS\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">粗细</span>\r\n        <NInputNumber\r\n          v-model:value=\"currentPenConfig.width\"\r\n          :min=\"1\"\r\n          :max=\"20\"\r\n          size=\"small\"\r\n          style=\"width: 80px\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton size=\"small\" :disabled=\"!canUndo\" @click=\"handleUndo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:undo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          撤销\r\n        </NButton>\r\n        <NButton size=\"small\" :disabled=\"!canRedo\" @click=\"handleRedo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:redo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          重做\r\n        </NButton>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton\r\n          size=\"small\"\r\n          type=\"error\"\r\n          :disabled=\"isEmpty\"\r\n          @click=\"handleClear\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:delete-outline\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          清空\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"signature-canvas-wrapper\"\r\n      :class=\"{ disabled, readonly }\"\r\n      :style=\"{\r\n        width: typeof width === 'number' ? `${width}px` : width,\r\n        height: typeof height === 'number' ? `${height}px` : height,\r\n        backgroundColor: backgroundColor || 'transparent',\r\n      }\"\r\n    >\r\n      <canvas\r\n        ref=\"canvasRef\"\r\n        class=\"signature-canvas\"\r\n        :class=\"{ disabled, readonly }\"\r\n      />\r\n      <div v-if=\"isEmpty && !disabled && !readonly\" class=\"canvas-placeholder\">\r\n        请在此处签名\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, reactive, toRef, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton, NButtonGroup, NColorPicker, NInputNumber } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSignatureCanvas } from \"./composables/useSignatureCanvas\";\r\nimport { useSignatureHistory } from \"./composables/useSignatureHistory\";\r\nimport { useSignatureExport } from \"./composables/useSignatureExport\";\r\nimport {\r\n  DEFAULT_PEN_CONFIG,\r\n  DEFAULT_WATERMARK_CONFIG,\r\n  PRESET_COLORS,\r\n} from \"./data\";\r\nimport type {\r\n  ExportOptions,\r\n  PenConfig,\r\n  PenMode,\r\n  SignatureExpose,\r\n  SignaturePoint,\r\n  SignatureProps,\r\n  SignatureStroke,\r\n  WatermarkConfig,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Signature\" });\r\n\r\nconst props = withDefaults(defineProps<SignatureProps>(), {\r\n  width: \"100%\",\r\n  height: 300,\r\n  disabled: false,\r\n  readonly: false,\r\n  showToolbar: true,\r\n  maxHistory: 50,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"start-draw\": [];\r\n  drawing: [point: SignaturePoint];\r\n  \"end-draw\": [stroke: SignatureStroke];\r\n  clear: [];\r\n  undo: [];\r\n  redo: [];\r\n  change: [data: SignatureStroke[]];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\nconst currentMode = ref<PenMode>(\"pen\");\r\nconst currentPenConfig = reactive<PenConfig>({\r\n  ...DEFAULT_PEN_CONFIG,\r\n  ...props.penConfig,\r\n});\r\nconst currentWatermark = reactive<WatermarkConfig>({\r\n  ...DEFAULT_WATERMARK_CONFIG,\r\n  ...props.watermark,\r\n});\r\n\r\nconst {\r\n  strokes,\r\n  canUndo,\r\n  canRedo,\r\n  isEmpty,\r\n  addStroke,\r\n  undo,\r\n  redo,\r\n  clear,\r\n  loadData,\r\n} = useSignatureHistory({\r\n  maxHistory: props.maxHistory,\r\n  onChange: (data) => {\r\n    canvasInstance.redrawStrokes(data as SignatureStroke[]);\r\n    emit(\"change\", data as SignatureStroke[]);\r\n  },\r\n});\r\n\r\nconst canvasInstance = useSignatureCanvas({\r\n  canvasRef,\r\n  penConfig: toRef(currentPenConfig),\r\n  mode: currentMode,\r\n  disabled: toRef(props, \"disabled\"),\r\n  onStrokeComplete: (stroke: SignatureStroke) => {\r\n    addStroke(stroke);\r\n    emit(\"end-draw\", stroke);\r\n  },\r\n  onDrawStart: () => emit(\"start-draw\"),\r\n  onDrawing: (point: SignaturePoint) => emit(\"drawing\", point),\r\n});\r\n\r\nconst exportInstance = useSignatureExport({\r\n  canvasRef,\r\n  watermark: toRef(currentWatermark),\r\n});\r\n\r\nconst handleUndo = (): boolean => {\r\n  const result = undo();\r\n  if (result) emit(\"undo\");\r\n  return result;\r\n};\r\n\r\nconst handleRedo = (): boolean => {\r\n  const result = redo();\r\n  if (result) emit(\"redo\");\r\n  return result;\r\n};\r\n\r\nconst handleClear = () => {\r\n  clear();\r\n  canvasInstance.clearCanvas();\r\n  emit(\"clear\");\r\n};\r\n\r\nconst exportSignature = async (\r\n  options?: ExportOptions,\r\n): Promise<string | Blob> => {\r\n  return exportInstance.exportSignature(options);\r\n};\r\n\r\nconst download = async (\r\n  filename?: string,\r\n  options?: ExportOptions,\r\n): Promise<void> => {\r\n  return exportInstance.download(filename, options);\r\n};\r\n\r\nconst loadImage = async (imageUrl: string): Promise<void> => {\r\n  await exportInstance.loadImage(imageUrl);\r\n  clear();\r\n};\r\n\r\nconst getSignatureData = (): SignatureStroke[] =>\r\n  strokes.value as SignatureStroke[];\r\nconst loadSignatureData = (data: SignatureStroke[]): void => loadData(data);\r\nconst isSignatureEmpty = (): boolean => isEmpty.value;\r\n\r\nonMounted(() => {\r\n  canvasInstance.initCanvas();\r\n  canvasInstance.bindEvents();\r\n  if (props.backgroundImage) loadImage(props.backgroundImage);\r\n});\r\n\r\nonUnmounted(() => canvasInstance.unbindEvents());\r\n\r\ndefineExpose<SignatureExpose>({\r\n  clear: handleClear,\r\n  undo: handleUndo,\r\n  redo: handleRedo,\r\n  export: exportSignature,\r\n  download,\r\n  loadImage,\r\n  getSignatureData,\r\n  loadSignatureData,\r\n  isEmpty: isSignatureEmpty,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_Signature.js","names":["showToolbar","disabled","readonly","width","height","backgroundColor"],"sources":["../src/components/C_Signature/composables/useSignatureCanvas.ts","../src/components/C_Signature/composables/useSignatureHistory.ts","../src/components/C_Signature/composables/useSignatureExport.ts","../src/components/C_Signature/data.ts","../src/components/C_Signature/index.vue","../src/components/C_Signature/index.vue","../src/components/C_Signature/index.vue"],"sourcesContent":["import type { Ref } from \"vue\";\r\nimport { ref, readonly } from \"vue\";\r\nimport type {\r\n  PenConfig,\r\n  PenMode,\r\n  SignaturePoint,\r\n  SignatureStroke,\r\n} from \"../types\";\r\n\r\ninterface UseSignatureCanvasOptions {\r\n  canvasRef: Ref<HTMLCanvasElement | null>;\r\n  penConfig: Ref<PenConfig>;\r\n  mode: Ref<PenMode>;\r\n  disabled: Ref<boolean>;\r\n  onStrokeComplete: (stroke: SignatureStroke) => void;\r\n  onDrawStart: () => void;\r\n  onDrawing: (point: SignaturePoint) => void;\r\n}\r\n\r\nexport function useSignatureCanvas(options: UseSignatureCanvasOptions) {\r\n  const {\r\n    canvasRef,\r\n    penConfig,\r\n    mode,\r\n    disabled,\r\n    onStrokeComplete,\r\n    onDrawStart,\r\n    onDrawing,\r\n  } = options;\r\n\r\n  const isDrawing = ref(false);\r\n  const currentStroke = ref<SignaturePoint[]>([]);\r\n  let ctx: CanvasRenderingContext2D | null = null;\r\n\r\n  const initCanvas = () => {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas) return;\r\n    ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\r\n    if (!ctx) return;\r\n    const dpr = window.devicePixelRatio || 1;\r\n    const rect = canvas.getBoundingClientRect();\r\n    canvas.width = rect.width * dpr;\r\n    canvas.height = rect.height * dpr;\r\n    canvas.style.width = `${rect.width}px`;\r\n    canvas.style.height = `${rect.height}px`;\r\n    ctx.scale(dpr, dpr);\r\n    ctx.lineCap = \"round\";\r\n    ctx.lineJoin = \"round\";\r\n  };\r\n\r\n  const getPointFromEvent = (e: MouseEvent | TouchEvent): SignaturePoint => {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas) return { x: 0, y: 0 };\r\n    const rect = canvas.getBoundingClientRect();\r\n    let clientX: number;\r\n    let clientY: number;\r\n    if (\"touches\" in e && e.touches.length > 0) {\r\n      ({ clientX, clientY } = e.touches[0]);\r\n    } else if (\"clientX\" in e) {\r\n      ({ clientX, clientY } = e);\r\n    } else {\r\n      return { x: 0, y: 0 };\r\n    }\r\n    return {\r\n      x: clientX - rect.left,\r\n      y: clientY - rect.top,\r\n      timestamp: Date.now(),\r\n    };\r\n  };\r\n\r\n  const drawStroke = (\r\n    from: SignaturePoint,\r\n    to: SignaturePoint,\r\n    config: PenConfig,\r\n    eraserMode = false,\r\n  ) => {\r\n    if (!ctx) return;\r\n    ctx.save();\r\n    if (eraserMode) {\r\n      ctx.globalCompositeOperation = \"destination-out\";\r\n      ctx.lineWidth = 20;\r\n    } else {\r\n      ctx.globalCompositeOperation = \"source-over\";\r\n      ctx.strokeStyle = config.color;\r\n      ctx.lineWidth = config.width;\r\n      ctx.globalAlpha = config.opacity;\r\n    }\r\n    ctx.beginPath();\r\n    ctx.moveTo(from.x, from.y);\r\n    ctx.lineTo(to.x, to.y);\r\n    ctx.stroke();\r\n    ctx.restore();\r\n  };\r\n\r\n  const startDrawing = (e: MouseEvent | TouchEvent) => {\r\n    if (disabled.value) return;\r\n    e.preventDefault();\r\n    isDrawing.value = true;\r\n    currentStroke.value = [];\r\n    const point = getPointFromEvent(e);\r\n    currentStroke.value.push(point);\r\n    onDrawStart();\r\n  };\r\n\r\n  const draw = (e: MouseEvent | TouchEvent) => {\r\n    if (!isDrawing.value || disabled.value) return;\r\n    e.preventDefault();\r\n    const point = getPointFromEvent(e);\r\n    const lastPoint = currentStroke.value[currentStroke.value.length - 1];\r\n    if (lastPoint) {\r\n      drawStroke(lastPoint, point, penConfig.value, mode.value === \"eraser\");\r\n    }\r\n    currentStroke.value.push(point);\r\n    onDrawing(point);\r\n  };\r\n\r\n  const endDrawing = (e: MouseEvent | TouchEvent) => {\r\n    if (!isDrawing.value || disabled.value) return;\r\n    e.preventDefault();\r\n    isDrawing.value = false;\r\n    if (currentStroke.value.length > 0) {\r\n      const stroke: SignatureStroke = {\r\n        points: [...currentStroke.value],\r\n        color: penConfig.value.color,\r\n        width: penConfig.value.width,\r\n        opacity: penConfig.value.opacity,\r\n        mode: mode.value,\r\n      };\r\n      onStrokeComplete(stroke);\r\n      currentStroke.value = [];\r\n    }\r\n  };\r\n\r\n  const redrawStrokes = (strokes: SignatureStroke[]) => {\r\n    if (!ctx || !canvasRef.value) return;\r\n    const canvas = canvasRef.value;\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n    strokes.forEach((stroke) => {\r\n      for (let i = 1; i < stroke.points.length; i++) {\r\n        drawStroke(\r\n          stroke.points[i - 1],\r\n          stroke.points[i],\r\n          { color: stroke.color, width: stroke.width, opacity: stroke.opacity },\r\n          stroke.mode === \"eraser\",\r\n        );\r\n      }\r\n    });\r\n  };\r\n\r\n  const clearCanvas = () => {\r\n    if (!ctx || !canvasRef.value) return;\r\n    ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);\r\n  };\r\n\r\n  const bindEvents = () => {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas) return;\r\n    canvas.addEventListener(\"mousedown\", startDrawing);\r\n    canvas.addEventListener(\"mousemove\", draw);\r\n    canvas.addEventListener(\"mouseup\", endDrawing);\r\n    canvas.addEventListener(\"mouseleave\", endDrawing);\r\n    canvas.addEventListener(\"touchstart\", startDrawing, { passive: false });\r\n    canvas.addEventListener(\"touchmove\", draw, { passive: false });\r\n    canvas.addEventListener(\"touchend\", endDrawing);\r\n    canvas.addEventListener(\"touchcancel\", endDrawing);\r\n  };\r\n\r\n  const unbindEvents = () => {\r\n    const canvas = canvasRef.value;\r\n    if (!canvas) return;\r\n    canvas.removeEventListener(\"mousedown\", startDrawing);\r\n    canvas.removeEventListener(\"mousemove\", draw);\r\n    canvas.removeEventListener(\"mouseup\", endDrawing);\r\n    canvas.removeEventListener(\"mouseleave\", endDrawing);\r\n    canvas.removeEventListener(\"touchstart\", startDrawing);\r\n    canvas.removeEventListener(\"touchmove\", draw);\r\n    canvas.removeEventListener(\"touchend\", endDrawing);\r\n    canvas.removeEventListener(\"touchcancel\", endDrawing);\r\n  };\r\n\r\n  return {\r\n    isDrawing: readonly(isDrawing),\r\n    initCanvas,\r\n    bindEvents,\r\n    unbindEvents,\r\n    redrawStrokes,\r\n    clearCanvas,\r\n  };\r\n}\r\n","import { ref, computed, readonly } from \"vue\";\r\nimport type { SignatureStroke } from \"../types\";\r\n\r\ninterface UseSignatureHistoryOptions {\r\n  maxHistory?: number;\r\n  onChange?: (strokes: SignatureStroke[]) => void;\r\n}\r\n\r\nexport function useSignatureHistory(options: UseSignatureHistoryOptions = {}) {\r\n  const { maxHistory = 50, onChange } = options;\r\n\r\n  const strokes = ref<SignatureStroke[]>([]);\r\n  const historyStack = ref<SignatureStroke[][]>([]);\r\n  const historyIndex = ref(-1);\r\n\r\n  const canUndo = computed(() => historyIndex.value > 0);\r\n  const canRedo = computed(\r\n    () => historyIndex.value < historyStack.value.length - 1,\r\n  );\r\n\r\n  const addStroke = (stroke: SignatureStroke) => {\r\n    strokes.value.push(stroke);\r\n    saveToHistory();\r\n  };\r\n\r\n  const saveToHistory = () => {\r\n    historyStack.value = historyStack.value.slice(0, historyIndex.value + 1);\r\n    historyStack.value.push([...strokes.value]);\r\n    historyIndex.value++;\r\n    if (historyStack.value.length > maxHistory) {\r\n      historyStack.value.shift();\r\n      historyIndex.value--;\r\n    }\r\n    onChange?.(strokes.value);\r\n  };\r\n\r\n  const undo = (): boolean => {\r\n    if (!canUndo.value) return false;\r\n    historyIndex.value--;\r\n    strokes.value = [...historyStack.value[historyIndex.value]];\r\n    onChange?.(strokes.value);\r\n    return true;\r\n  };\r\n\r\n  const redo = (): boolean => {\r\n    if (!canRedo.value) return false;\r\n    historyIndex.value++;\r\n    strokes.value = [...historyStack.value[historyIndex.value]];\r\n    onChange?.(strokes.value);\r\n    return true;\r\n  };\r\n\r\n  const clear = () => {\r\n    strokes.value = [];\r\n    historyStack.value = [[]];\r\n    historyIndex.value = 0;\r\n    onChange?.(strokes.value);\r\n  };\r\n\r\n  const loadData = (data: SignatureStroke[]) => {\r\n    strokes.value = [...data];\r\n    historyStack.value = [[...data]];\r\n    historyIndex.value = 0;\r\n    onChange?.(strokes.value);\r\n  };\r\n\r\n  const isEmpty = computed(() => strokes.value.length === 0);\r\n\r\n  // 初始化历史栈\r\n  historyStack.value = [[]];\r\n  historyIndex.value = 0;\r\n\r\n  return {\r\n    strokes: readonly(strokes),\r\n    canUndo: readonly(canUndo),\r\n    canRedo: readonly(canRedo),\r\n    isEmpty: readonly(isEmpty),\r\n    addStroke,\r\n    undo,\r\n    redo,\r\n    clear,\r\n    loadData,\r\n  };\r\n}\r\n","import type { Ref } from 'vue'\r\nimport type { ExportOptions, WatermarkConfig } from '../types'\r\n\r\ninterface UseSignatureExportOptions {\r\n  canvasRef: Ref<HTMLCanvasElement | null>\r\n  watermark?: Ref<Partial<WatermarkConfig>>\r\n}\r\n\r\n/**\r\n *\r\n */\r\nexport function useSignatureExport(options: UseSignatureExportOptions) {\r\n  const { canvasRef, watermark } = options\r\n\r\n  const getWatermarkPosition = (\r\n    canvas: HTMLCanvasElement,\r\n    textWidth: number,\r\n    fontSize: number,\r\n    position: string\r\n  ): { x: number; y: number } => {\r\n    const padding = 10\r\n    const positions = {\r\n      'top-left': { x: padding, y: fontSize + padding },\r\n      'top-right': {\r\n        x: canvas.width - textWidth - padding,\r\n        y: fontSize + padding,\r\n      },\r\n      'bottom-left': { x: padding, y: canvas.height - padding },\r\n      'bottom-right': {\r\n        x: canvas.width - textWidth - padding,\r\n        y: canvas.height - padding,\r\n      },\r\n    }\r\n    return (\r\n      positions[position as keyof typeof positions] || positions['bottom-right']\r\n    )\r\n  }\r\n\r\n  const drawWatermark = (canvas: HTMLCanvasElement, text: string): void => {\r\n    const ctx = canvas.getContext('2d')\r\n    if (!ctx || !watermark?.value?.show) return\r\n    const config = {\r\n      fontSize: watermark.value.fontSize || 12,\r\n      color: watermark.value.color || '#999999',\r\n      position: watermark.value.position || 'bottom-right',\r\n    }\r\n    ctx.save()\r\n    ctx.font = `${config.fontSize}px Arial`\r\n    ctx.fillStyle = config.color\r\n    ctx.textBaseline = 'bottom'\r\n    const textWidth = ctx.measureText(text).width\r\n    const { x, y } = getWatermarkPosition(\r\n      canvas,\r\n      textWidth,\r\n      config.fontSize,\r\n      config.position\r\n    )\r\n    ctx.fillText(text, x, y)\r\n    ctx.restore()\r\n  }\r\n\r\n  const createTempCanvas = (\r\n    sourceCanvas: HTMLCanvasElement,\r\n    includeBackground: boolean,\r\n    backgroundColor: string\r\n  ) => {\r\n    const tempCanvas = document.createElement('canvas')\r\n    tempCanvas.width = sourceCanvas.width\r\n    tempCanvas.height = sourceCanvas.height\r\n    const tempCtx = tempCanvas.getContext('2d')\r\n    if (!tempCtx) throw new Error('无法创建临时 Canvas')\r\n    if (includeBackground) {\r\n      tempCtx.fillStyle = backgroundColor\r\n      tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height)\r\n    }\r\n    tempCtx.drawImage(sourceCanvas, 0, 0)\r\n    return { canvas: tempCanvas, ctx: tempCtx }\r\n  }\r\n\r\n  const prepareExportCanvas = (\r\n    canvas: HTMLCanvasElement,\r\n    options: ExportOptions\r\n  ): HTMLCanvasElement => {\r\n    const {\r\n      includeBackground = false,\r\n      backgroundColor = '#FFFFFF',\r\n      includeWatermark = false,\r\n    } = options\r\n    const { canvas: tempCanvas } = createTempCanvas(\r\n      canvas,\r\n      includeBackground,\r\n      backgroundColor\r\n    )\r\n    // includeWatermark 为 true 时才叠加水印，无视 watermark.show 的状态\r\n    // 这样「不含水印导出」即使组件配置了水印也不会叠加\r\n    if (includeWatermark && watermark?.value?.text) {\r\n      drawWatermark(tempCanvas, watermark.value.text)\r\n    }\r\n    return tempCanvas\r\n  }\r\n\r\n  const exportToBlob = (\r\n    canvas: HTMLCanvasElement,\r\n    quality: number\r\n  ): Promise<Blob> => {\r\n    return new Promise<Blob>((resolve, reject) => {\r\n      canvas.toBlob(\r\n        blob => (blob ? resolve(blob) : reject(new Error('导出失败'))),\r\n        'image/png',\r\n        quality\r\n      )\r\n    })\r\n  }\r\n\r\n  const isCanvasEmpty = (canvas: HTMLCanvasElement): boolean => {\r\n    const ctx = canvas.getContext('2d')\r\n    if (!ctx) return true\r\n    const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height)\r\n    return !data.some(v => v !== 0)\r\n  }\r\n\r\n  const exportSignature = async (\r\n    options: ExportOptions = {}\r\n  ): Promise<string | Blob> => {\r\n    const canvas = canvasRef.value\r\n    if (!canvas) throw new Error('Canvas 未初始化')\r\n    if (isCanvasEmpty(canvas)) throw new Error('签名为空，请先签名后再导出')\r\n    const { format = 'png', quality = 0.92 } = options\r\n    if (format === 'svg') {\r\n      return 'data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\"><text>SVG export placeholder</text></svg>'\r\n    }\r\n    const tempCanvas = prepareExportCanvas(canvas, options)\r\n    if (format === 'blob') return exportToBlob(tempCanvas, quality)\r\n    const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png'\r\n    return tempCanvas.toDataURL(mimeType, quality)\r\n  }\r\n\r\n  const download = async (\r\n    filename = 'signature',\r\n    options: ExportOptions = {}\r\n  ): Promise<void> => {\r\n    const format = options.format || 'png'\r\n    const result = await exportSignature({ ...options, format })\r\n    if (result instanceof Blob) {\r\n      const url = URL.createObjectURL(result)\r\n      const link = document.createElement('a')\r\n      link.href = url\r\n      link.download = `${filename}.${format}`\r\n      link.click()\r\n      URL.revokeObjectURL(url)\r\n    } else if (typeof result === 'string') {\r\n      const link = document.createElement('a')\r\n      link.href = result\r\n      link.download = `${filename}.${format}`\r\n      link.click()\r\n    }\r\n  }\r\n\r\n  const loadImage = async (imageUrl: string): Promise<void> => {\r\n    const canvas = canvasRef.value\r\n    if (!canvas) throw new Error('Canvas 未初始化')\r\n    const ctx = canvas.getContext('2d')\r\n    if (!ctx) throw new Error('无法获取 Canvas 上下文')\r\n    return new Promise((resolve, reject) => {\r\n      const img = new Image()\r\n      img.crossOrigin = 'anonymous'\r\n      img.onload = () => {\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height)\r\n        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)\r\n        resolve()\r\n      }\r\n      img.onerror = () => reject(new Error(`图片加载失败: ${imageUrl}`))\r\n      img.src = imageUrl\r\n    })\r\n  }\r\n\r\n  return { exportSignature, download, loadImage }\r\n}\r\n","import type { EraserConfig, PenConfig, WatermarkConfig } from \"./types\";\r\n\r\nexport const DEFAULT_PEN_CONFIG: PenConfig = {\r\n  color: \"#000000\",\r\n  width: 2,\r\n  opacity: 1,\r\n};\r\n\r\nexport const DEFAULT_ERASER_CONFIG: EraserConfig = { size: 20 };\r\n\r\nexport const DEFAULT_WATERMARK_CONFIG: WatermarkConfig = {\r\n  show: false,\r\n  text: \"\",\r\n  fontSize: 12,\r\n  color: \"#999999\",\r\n  position: \"bottom-right\",\r\n};\r\n\r\nexport const PRESET_COLORS = [\r\n  \"#000000\",\r\n  \"#FF0000\",\r\n  \"#0000FF\",\r\n  \"#00AA00\",\r\n  \"#FF6600\",\r\n  \"#9900FF\",\r\n];\r\n\r\nexport const PRESET_WIDTHS = [1, 2, 3, 5, 8];\r\n\r\nexport const EXPORT_FORMAT_OPTIONS = [\r\n  { label: \"PNG\", value: \"png\" },\r\n  { label: \"JPEG\", value: \"jpeg\" },\r\n  { label: \"SVG\", value: \"svg\" },\r\n  { label: \"Blob\", value: \"blob\" },\r\n] as const;\r\n\r\nexport const WATERMARK_POSITION_OPTIONS = [\r\n  { label: \"左上\", value: \"top-left\" },\r\n  { label: \"右上\", value: \"top-right\" },\r\n  { label: \"左下\", value: \"bottom-left\" },\r\n  { label: \"右下\", value: \"bottom-right\" },\r\n] as const;\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-25\r\n * @Description: 电子签名组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-signature\">\r\n    <div v-if=\"showToolbar\" class=\"signature-toolbar\">\r\n      <div class=\"toolbar-section\">\r\n        <NButtonGroup>\r\n          <NButton\r\n            :type=\"currentMode === 'pen' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'pen'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:draw\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            画笔\r\n          </NButton>\r\n          <NButton\r\n            :type=\"currentMode === 'eraser' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'eraser'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:eraser\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            橡皮擦\r\n          </NButton>\r\n        </NButtonGroup>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">颜色</span>\r\n        <NColorPicker\r\n          v-model:value=\"currentPenConfig.color\"\r\n          :show-alpha=\"false\"\r\n          size=\"small\"\r\n          :swatches=\"PRESET_COLORS\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">粗细</span>\r\n        <NInputNumber\r\n          v-model:value=\"currentPenConfig.width\"\r\n          :min=\"1\"\r\n          :max=\"20\"\r\n          size=\"small\"\r\n          style=\"width: 80px\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton size=\"small\" :disabled=\"!canUndo\" @click=\"handleUndo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:undo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          撤销\r\n        </NButton>\r\n        <NButton size=\"small\" :disabled=\"!canRedo\" @click=\"handleRedo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:redo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          重做\r\n        </NButton>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton\r\n          size=\"small\"\r\n          type=\"error\"\r\n          :disabled=\"isEmpty\"\r\n          @click=\"handleClear\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:delete-outline\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          清空\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"signature-canvas-wrapper\"\r\n      :class=\"{ disabled, readonly }\"\r\n      :style=\"{\r\n        width: typeof width === 'number' ? `${width}px` : width,\r\n        height: typeof height === 'number' ? `${height}px` : height,\r\n        backgroundColor: backgroundColor || 'transparent',\r\n      }\"\r\n    >\r\n      <canvas\r\n        ref=\"canvasRef\"\r\n        class=\"signature-canvas\"\r\n        :class=\"{ disabled, readonly }\"\r\n      />\r\n      <div v-if=\"isEmpty && !disabled && !readonly\" class=\"canvas-placeholder\">\r\n        请在此处签名\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, reactive, toRef, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton, NButtonGroup, NColorPicker, NInputNumber } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSignatureCanvas } from \"./composables/useSignatureCanvas\";\r\nimport { useSignatureHistory } from \"./composables/useSignatureHistory\";\r\nimport { useSignatureExport } from \"./composables/useSignatureExport\";\r\nimport {\r\n  DEFAULT_PEN_CONFIG,\r\n  DEFAULT_WATERMARK_CONFIG,\r\n  PRESET_COLORS,\r\n} from \"./data\";\r\nimport type {\r\n  ExportOptions,\r\n  PenConfig,\r\n  PenMode,\r\n  SignatureExpose,\r\n  SignaturePoint,\r\n  SignatureProps,\r\n  SignatureStroke,\r\n  WatermarkConfig,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Signature\" });\r\n\r\nconst props = withDefaults(defineProps<SignatureProps>(), {\r\n  width: \"100%\",\r\n  height: 300,\r\n  disabled: false,\r\n  readonly: false,\r\n  showToolbar: true,\r\n  maxHistory: 50,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"start-draw\": [];\r\n  drawing: [point: SignaturePoint];\r\n  \"end-draw\": [stroke: SignatureStroke];\r\n  clear: [];\r\n  undo: [];\r\n  redo: [];\r\n  change: [data: SignatureStroke[]];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\nconst currentMode = ref<PenMode>(\"pen\");\r\nconst currentPenConfig = reactive<PenConfig>({\r\n  ...DEFAULT_PEN_CONFIG,\r\n  ...props.penConfig,\r\n});\r\nconst currentWatermark = reactive<WatermarkConfig>({\r\n  ...DEFAULT_WATERMARK_CONFIG,\r\n  ...props.watermark,\r\n});\r\n\r\nconst {\r\n  strokes,\r\n  canUndo,\r\n  canRedo,\r\n  isEmpty,\r\n  addStroke,\r\n  undo,\r\n  redo,\r\n  clear,\r\n  loadData,\r\n} = useSignatureHistory({\r\n  maxHistory: props.maxHistory,\r\n  onChange: (data) => {\r\n    canvasInstance.redrawStrokes(data as SignatureStroke[]);\r\n    emit(\"change\", data as SignatureStroke[]);\r\n  },\r\n});\r\n\r\nconst canvasInstance = useSignatureCanvas({\r\n  canvasRef,\r\n  penConfig: toRef(currentPenConfig),\r\n  mode: currentMode,\r\n  disabled: toRef(props, \"disabled\"),\r\n  onStrokeComplete: (stroke: SignatureStroke) => {\r\n    addStroke(stroke);\r\n    emit(\"end-draw\", stroke);\r\n  },\r\n  onDrawStart: () => emit(\"start-draw\"),\r\n  onDrawing: (point: SignaturePoint) => emit(\"drawing\", point),\r\n});\r\n\r\nconst exportInstance = useSignatureExport({\r\n  canvasRef,\r\n  watermark: toRef(currentWatermark),\r\n});\r\n\r\nconst handleUndo = (): boolean => {\r\n  const result = undo();\r\n  if (result) emit(\"undo\");\r\n  return result;\r\n};\r\n\r\nconst handleRedo = (): boolean => {\r\n  const result = redo();\r\n  if (result) emit(\"redo\");\r\n  return result;\r\n};\r\n\r\nconst handleClear = () => {\r\n  clear();\r\n  canvasInstance.clearCanvas();\r\n  emit(\"clear\");\r\n};\r\n\r\nconst exportSignature = async (\r\n  options?: ExportOptions,\r\n): Promise<string | Blob> => {\r\n  return exportInstance.exportSignature(options);\r\n};\r\n\r\nconst download = async (\r\n  filename?: string,\r\n  options?: ExportOptions,\r\n): Promise<void> => {\r\n  return exportInstance.download(filename, options);\r\n};\r\n\r\nconst loadImage = async (imageUrl: string): Promise<void> => {\r\n  await exportInstance.loadImage(imageUrl);\r\n  clear();\r\n};\r\n\r\nconst getSignatureData = (): SignatureStroke[] =>\r\n  strokes.value as SignatureStroke[];\r\nconst loadSignatureData = (data: SignatureStroke[]): void => loadData(data);\r\nconst isSignatureEmpty = (): boolean => isEmpty.value;\r\n\r\nonMounted(() => {\r\n  canvasInstance.initCanvas();\r\n  canvasInstance.bindEvents();\r\n  if (props.backgroundImage) loadImage(props.backgroundImage);\r\n});\r\n\r\nonUnmounted(() => canvasInstance.unbindEvents());\r\n\r\ndefineExpose<SignatureExpose>({\r\n  clear: handleClear,\r\n  undo: handleUndo,\r\n  redo: handleRedo,\r\n  export: exportSignature,\r\n  download,\r\n  loadImage,\r\n  getSignatureData,\r\n  loadSignatureData,\r\n  isEmpty: isSignatureEmpty,\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: 2026-02-25\r\n * @Description: 电子签名组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-signature\">\r\n    <div v-if=\"showToolbar\" class=\"signature-toolbar\">\r\n      <div class=\"toolbar-section\">\r\n        <NButtonGroup>\r\n          <NButton\r\n            :type=\"currentMode === 'pen' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'pen'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:draw\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            画笔\r\n          </NButton>\r\n          <NButton\r\n            :type=\"currentMode === 'eraser' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'eraser'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:eraser\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            橡皮擦\r\n          </NButton>\r\n        </NButtonGroup>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">颜色</span>\r\n        <NColorPicker\r\n          v-model:value=\"currentPenConfig.color\"\r\n          :show-alpha=\"false\"\r\n          size=\"small\"\r\n          :swatches=\"PRESET_COLORS\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">粗细</span>\r\n        <NInputNumber\r\n          v-model:value=\"currentPenConfig.width\"\r\n          :min=\"1\"\r\n          :max=\"20\"\r\n          size=\"small\"\r\n          style=\"width: 80px\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton size=\"small\" :disabled=\"!canUndo\" @click=\"handleUndo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:undo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          撤销\r\n        </NButton>\r\n        <NButton size=\"small\" :disabled=\"!canRedo\" @click=\"handleRedo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:redo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          重做\r\n        </NButton>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton\r\n          size=\"small\"\r\n          type=\"error\"\r\n          :disabled=\"isEmpty\"\r\n          @click=\"handleClear\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:delete-outline\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          清空\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"signature-canvas-wrapper\"\r\n      :class=\"{ disabled, readonly }\"\r\n      :style=\"{\r\n        width: typeof width === 'number' ? `${width}px` : width,\r\n        height: typeof height === 'number' ? `${height}px` : height,\r\n        backgroundColor: backgroundColor || 'transparent',\r\n      }\"\r\n    >\r\n      <canvas\r\n        ref=\"canvasRef\"\r\n        class=\"signature-canvas\"\r\n        :class=\"{ disabled, readonly }\"\r\n      />\r\n      <div v-if=\"isEmpty && !disabled && !readonly\" class=\"canvas-placeholder\">\r\n        请在此处签名\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, reactive, toRef, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton, NButtonGroup, NColorPicker, NInputNumber } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSignatureCanvas } from \"./composables/useSignatureCanvas\";\r\nimport { useSignatureHistory } from \"./composables/useSignatureHistory\";\r\nimport { useSignatureExport } from \"./composables/useSignatureExport\";\r\nimport {\r\n  DEFAULT_PEN_CONFIG,\r\n  DEFAULT_WATERMARK_CONFIG,\r\n  PRESET_COLORS,\r\n} from \"./data\";\r\nimport type {\r\n  ExportOptions,\r\n  PenConfig,\r\n  PenMode,\r\n  SignatureExpose,\r\n  SignaturePoint,\r\n  SignatureProps,\r\n  SignatureStroke,\r\n  WatermarkConfig,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Signature\" });\r\n\r\nconst props = withDefaults(defineProps<SignatureProps>(), {\r\n  width: \"100%\",\r\n  height: 300,\r\n  disabled: false,\r\n  readonly: false,\r\n  showToolbar: true,\r\n  maxHistory: 50,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"start-draw\": [];\r\n  drawing: [point: SignaturePoint];\r\n  \"end-draw\": [stroke: SignatureStroke];\r\n  clear: [];\r\n  undo: [];\r\n  redo: [];\r\n  change: [data: SignatureStroke[]];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\nconst currentMode = ref<PenMode>(\"pen\");\r\nconst currentPenConfig = reactive<PenConfig>({\r\n  ...DEFAULT_PEN_CONFIG,\r\n  ...props.penConfig,\r\n});\r\nconst currentWatermark = reactive<WatermarkConfig>({\r\n  ...DEFAULT_WATERMARK_CONFIG,\r\n  ...props.watermark,\r\n});\r\n\r\nconst {\r\n  strokes,\r\n  canUndo,\r\n  canRedo,\r\n  isEmpty,\r\n  addStroke,\r\n  undo,\r\n  redo,\r\n  clear,\r\n  loadData,\r\n} = useSignatureHistory({\r\n  maxHistory: props.maxHistory,\r\n  onChange: (data) => {\r\n    canvasInstance.redrawStrokes(data as SignatureStroke[]);\r\n    emit(\"change\", data as SignatureStroke[]);\r\n  },\r\n});\r\n\r\nconst canvasInstance = useSignatureCanvas({\r\n  canvasRef,\r\n  penConfig: toRef(currentPenConfig),\r\n  mode: currentMode,\r\n  disabled: toRef(props, \"disabled\"),\r\n  onStrokeComplete: (stroke: SignatureStroke) => {\r\n    addStroke(stroke);\r\n    emit(\"end-draw\", stroke);\r\n  },\r\n  onDrawStart: () => emit(\"start-draw\"),\r\n  onDrawing: (point: SignaturePoint) => emit(\"drawing\", point),\r\n});\r\n\r\nconst exportInstance = useSignatureExport({\r\n  canvasRef,\r\n  watermark: toRef(currentWatermark),\r\n});\r\n\r\nconst handleUndo = (): boolean => {\r\n  const result = undo();\r\n  if (result) emit(\"undo\");\r\n  return result;\r\n};\r\n\r\nconst handleRedo = (): boolean => {\r\n  const result = redo();\r\n  if (result) emit(\"redo\");\r\n  return result;\r\n};\r\n\r\nconst handleClear = () => {\r\n  clear();\r\n  canvasInstance.clearCanvas();\r\n  emit(\"clear\");\r\n};\r\n\r\nconst exportSignature = async (\r\n  options?: ExportOptions,\r\n): Promise<string | Blob> => {\r\n  return exportInstance.exportSignature(options);\r\n};\r\n\r\nconst download = async (\r\n  filename?: string,\r\n  options?: ExportOptions,\r\n): Promise<void> => {\r\n  return exportInstance.download(filename, options);\r\n};\r\n\r\nconst loadImage = async (imageUrl: string): Promise<void> => {\r\n  await exportInstance.loadImage(imageUrl);\r\n  clear();\r\n};\r\n\r\nconst getSignatureData = (): SignatureStroke[] =>\r\n  strokes.value as SignatureStroke[];\r\nconst loadSignatureData = (data: SignatureStroke[]): void => loadData(data);\r\nconst isSignatureEmpty = (): boolean => isEmpty.value;\r\n\r\nonMounted(() => {\r\n  canvasInstance.initCanvas();\r\n  canvasInstance.bindEvents();\r\n  if (props.backgroundImage) loadImage(props.backgroundImage);\r\n});\r\n\r\nonUnmounted(() => canvasInstance.unbindEvents());\r\n\r\ndefineExpose<SignatureExpose>({\r\n  clear: handleClear,\r\n  undo: handleUndo,\r\n  redo: handleRedo,\r\n  export: exportSignature,\r\n  download,\r\n  loadImage,\r\n  getSignatureData,\r\n  loadSignatureData,\r\n  isEmpty: isSignatureEmpty,\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: 2026-02-25\r\n * @Description: 电子签名组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-signature\">\r\n    <div v-if=\"showToolbar\" class=\"signature-toolbar\">\r\n      <div class=\"toolbar-section\">\r\n        <NButtonGroup>\r\n          <NButton\r\n            :type=\"currentMode === 'pen' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'pen'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:draw\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            画笔\r\n          </NButton>\r\n          <NButton\r\n            :type=\"currentMode === 'eraser' ? 'primary' : 'default'\"\r\n            size=\"small\"\r\n            @click=\"currentMode = 'eraser'\"\r\n          >\r\n            <template #icon>\r\n              <C_Icon name=\"mdi:eraser\" :size=\"16\" color=\"currentColor\" />\r\n            </template>\r\n            橡皮擦\r\n          </NButton>\r\n        </NButtonGroup>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">颜色</span>\r\n        <NColorPicker\r\n          v-model:value=\"currentPenConfig.color\"\r\n          :show-alpha=\"false\"\r\n          size=\"small\"\r\n          :swatches=\"PRESET_COLORS\"\r\n        />\r\n      </div>\r\n\r\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\r\n        <span class=\"section-label\">粗细</span>\r\n        <NInputNumber\r\n          v-model:value=\"currentPenConfig.width\"\r\n          :min=\"1\"\r\n          :max=\"20\"\r\n          size=\"small\"\r\n          style=\"width: 80px\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton size=\"small\" :disabled=\"!canUndo\" @click=\"handleUndo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:undo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          撤销\r\n        </NButton>\r\n        <NButton size=\"small\" :disabled=\"!canRedo\" @click=\"handleRedo\">\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:redo\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          重做\r\n        </NButton>\r\n      </div>\r\n\r\n      <div class=\"toolbar-section divider\" />\r\n\r\n      <div class=\"toolbar-section\">\r\n        <NButton\r\n          size=\"small\"\r\n          type=\"error\"\r\n          :disabled=\"isEmpty\"\r\n          @click=\"handleClear\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon name=\"mdi:delete-outline\" :size=\"16\" color=\"currentColor\" />\r\n          </template>\r\n          清空\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"signature-canvas-wrapper\"\r\n      :class=\"{ disabled, readonly }\"\r\n      :style=\"{\r\n        width: typeof width === 'number' ? `${width}px` : width,\r\n        height: typeof height === 'number' ? `${height}px` : height,\r\n        backgroundColor: backgroundColor || 'transparent',\r\n      }\"\r\n    >\r\n      <canvas\r\n        ref=\"canvasRef\"\r\n        class=\"signature-canvas\"\r\n        :class=\"{ disabled, readonly }\"\r\n      />\r\n      <div v-if=\"isEmpty && !disabled && !readonly\" class=\"canvas-placeholder\">\r\n        请在此处签名\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, reactive, toRef, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton, NButtonGroup, NColorPicker, NInputNumber } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSignatureCanvas } from \"./composables/useSignatureCanvas\";\r\nimport { useSignatureHistory } from \"./composables/useSignatureHistory\";\r\nimport { useSignatureExport } from \"./composables/useSignatureExport\";\r\nimport {\r\n  DEFAULT_PEN_CONFIG,\r\n  DEFAULT_WATERMARK_CONFIG,\r\n  PRESET_COLORS,\r\n} from \"./data\";\r\nimport type {\r\n  ExportOptions,\r\n  PenConfig,\r\n  PenMode,\r\n  SignatureExpose,\r\n  SignaturePoint,\r\n  SignatureProps,\r\n  SignatureStroke,\r\n  WatermarkConfig,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Signature\" });\r\n\r\nconst props = withDefaults(defineProps<SignatureProps>(), {\r\n  width: \"100%\",\r\n  height: 300,\r\n  disabled: false,\r\n  readonly: false,\r\n  showToolbar: true,\r\n  maxHistory: 50,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"start-draw\": [];\r\n  drawing: [point: SignaturePoint];\r\n  \"end-draw\": [stroke: SignatureStroke];\r\n  clear: [];\r\n  undo: [];\r\n  redo: [];\r\n  change: [data: SignatureStroke[]];\r\n}>();\r\n\r\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\r\nconst currentMode = ref<PenMode>(\"pen\");\r\nconst currentPenConfig = reactive<PenConfig>({\r\n  ...DEFAULT_PEN_CONFIG,\r\n  ...props.penConfig,\r\n});\r\nconst currentWatermark = reactive<WatermarkConfig>({\r\n  ...DEFAULT_WATERMARK_CONFIG,\r\n  ...props.watermark,\r\n});\r\n\r\nconst {\r\n  strokes,\r\n  canUndo,\r\n  canRedo,\r\n  isEmpty,\r\n  addStroke,\r\n  undo,\r\n  redo,\r\n  clear,\r\n  loadData,\r\n} = useSignatureHistory({\r\n  maxHistory: props.maxHistory,\r\n  onChange: (data) => {\r\n    canvasInstance.redrawStrokes(data as SignatureStroke[]);\r\n    emit(\"change\", data as SignatureStroke[]);\r\n  },\r\n});\r\n\r\nconst canvasInstance = useSignatureCanvas({\r\n  canvasRef,\r\n  penConfig: toRef(currentPenConfig),\r\n  mode: currentMode,\r\n  disabled: toRef(props, \"disabled\"),\r\n  onStrokeComplete: (stroke: SignatureStroke) => {\r\n    addStroke(stroke);\r\n    emit(\"end-draw\", stroke);\r\n  },\r\n  onDrawStart: () => emit(\"start-draw\"),\r\n  onDrawing: (point: SignaturePoint) => emit(\"drawing\", point),\r\n});\r\n\r\nconst exportInstance = useSignatureExport({\r\n  canvasRef,\r\n  watermark: toRef(currentWatermark),\r\n});\r\n\r\nconst handleUndo = (): boolean => {\r\n  const result = undo();\r\n  if (result) emit(\"undo\");\r\n  return result;\r\n};\r\n\r\nconst handleRedo = (): boolean => {\r\n  const result = redo();\r\n  if (result) emit(\"redo\");\r\n  return result;\r\n};\r\n\r\nconst handleClear = () => {\r\n  clear();\r\n  canvasInstance.clearCanvas();\r\n  emit(\"clear\");\r\n};\r\n\r\nconst exportSignature = async (\r\n  options?: ExportOptions,\r\n): Promise<string | Blob> => {\r\n  return exportInstance.exportSignature(options);\r\n};\r\n\r\nconst download = async (\r\n  filename?: string,\r\n  options?: ExportOptions,\r\n): Promise<void> => {\r\n  return exportInstance.download(filename, options);\r\n};\r\n\r\nconst loadImage = async (imageUrl: string): Promise<void> => {\r\n  await exportInstance.loadImage(imageUrl);\r\n  clear();\r\n};\r\n\r\nconst getSignatureData = (): SignatureStroke[] =>\r\n  strokes.value as SignatureStroke[];\r\nconst loadSignatureData = (data: SignatureStroke[]): void => loadData(data);\r\nconst isSignatureEmpty = (): boolean => isEmpty.value;\r\n\r\nonMounted(() => {\r\n  canvasInstance.initCanvas();\r\n  canvasInstance.bindEvents();\r\n  if (props.backgroundImage) loadImage(props.backgroundImage);\r\n});\r\n\r\nonUnmounted(() => canvasInstance.unbindEvents());\r\n\r\ndefineExpose<SignatureExpose>({\r\n  clear: handleClear,\r\n  undo: handleUndo,\r\n  redo: handleRedo,\r\n  export: exportSignature,\r\n  download,\r\n  loadImage,\r\n  getSignatureData,\r\n  loadSignatureData,\r\n  isEmpty: isSignatureEmpty,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}

package/dist/C_Signature2.js

@@ -1,2 +1,2 @@
-import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{NButton as n,NButtonGroup as r,NColorPicker as i,NInputNumber as a}from"naive-ui";import{computed as o,createCommentVNode as s,createElementBlock as c,createElementVNode as l,createTextVNode as u,createVNode as d,defineComponent as f,normalizeClass as p,normalizeStyle as m,onMounted as h,onUnmounted as g,openBlock as _,reactive as v,readonly as y,ref as b,toRef as x,unref as S,withCtx as C}from"vue";function w(e){let{canvasRef:t,penConfig:n,mode:r,disabled:i,onStrokeComplete:a,onDrawStart:o,onDrawing:s}=e,c=b(!1),l=b([]),u=null,d=()=>{let e=t.value;if(!e||(u=e.getContext(`2d`,{willReadFrequently:!0}),!u))return;let n=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*n,e.height=r.height*n,e.style.width=`${r.width}px`,e.style.height=`${r.height}px`,u.scale(n,n),u.lineCap=`round`,u.lineJoin=`round`},f=e=>{let n=t.value;if(!n)return{x:0,y:0};let r=n.getBoundingClientRect(),i,a;if(`touches`in e&&e.touches.length>0)({clientX:i,clientY:a}=e.touches[0]);else if(`clientX`in e)({clientX:i,clientY:a}=e);else return{x:0,y:0};return{x:i-r.left,y:a-r.top,timestamp:Date.now()}},p=(e,t,n,r=!1)=>{u&&(u.save(),r?(u.globalCompositeOperation=`destination-out`,u.lineWidth=20):(u.globalCompositeOperation=`source-over`,u.strokeStyle=n.color,u.lineWidth=n.width,u.globalAlpha=n.opacity),u.beginPath(),u.moveTo(e.x,e.y),u.lineTo(t.x,t.y),u.stroke(),u.restore())},m=e=>{if(i.value)return;e.preventDefault(),c.value=!0,l.value=[];let t=f(e);l.value.push(t),o()},h=e=>{if(!c.value||i.value)return;e.preventDefault();let t=f(e),a=l.value[l.value.length-1];a&&p(a,t,n.value,r.value===`eraser`),l.value.push(t),s(t)},g=e=>{!c.value||i.value||(e.preventDefault(),c.value=!1,l.value.length>0&&(a({points:[...l.value],color:n.value.color,width:n.value.width,opacity:n.value.opacity,mode:r.value}),l.value=[]))};return{isDrawing:y(c),initCanvas:d,bindEvents:()=>{let e=t.value;e&&(e.addEventListener(`mousedown`,m),e.addEventListener(`mousemove`,h),e.addEventListener(`mouseup`,g),e.addEventListener(`mouseleave`,g),e.addEventListener(`touchstart`,m,{passive:!1}),e.addEventListener(`touchmove`,h,{passive:!1}),e.addEventListener(`touchend`,g),e.addEventListener(`touchcancel`,g))},unbindEvents:()=>{let e=t.value;e&&(e.removeEventListener(`mousedown`,m),e.removeEventListener(`mousemove`,h),e.removeEventListener(`mouseup`,g),e.removeEventListener(`mouseleave`,g),e.removeEventListener(`touchstart`,m),e.removeEventListener(`touchmove`,h),e.removeEventListener(`touchend`,g),e.removeEventListener(`touchcancel`,g))},redrawStrokes:e=>{if(!u||!t.value)return;let n=t.value;u.clearRect(0,0,n.width,n.height),e.forEach(e=>{for(let t=1;t<e.points.length;t++)p(e.points[t-1],e.points[t],{color:e.color,width:e.width,opacity:e.opacity},e.mode===`eraser`)})},clearCanvas:()=>{!u||!t.value||u.clearRect(0,0,t.value.width,t.value.height)}}}function T(e={}){let{maxHistory:t=50,onChange:n}=e,r=b([]),i=b([]),a=b(-1),s=o(()=>a.value>0),c=o(()=>a.value<i.value.length-1),l=e=>{r.value.push(e),u()},u=()=>{i.value=i.value.slice(0,a.value+1),i.value.push([...r.value]),a.value++,i.value.length>t&&(i.value.shift(),a.value--),n?.(r.value)},d=()=>s.value?(a.value--,r.value=[...i.value[a.value]],n?.(r.value),!0):!1,f=()=>c.value?(a.value++,r.value=[...i.value[a.value]],n?.(r.value),!0):!1,p=()=>{r.value=[],i.value=[[]],a.value=0,n?.(r.value)},m=e=>{r.value=[...e],i.value=[[...e]],a.value=0,n?.(r.value)},h=o(()=>r.value.length===0);return i.value=[[]],a.value=0,{strokes:y(r),canUndo:y(s),canRedo:y(c),isEmpty:y(h),addStroke:l,undo:d,redo:f,clear:p,loadData:m}}function E(e){let{canvasRef:t,watermark:n}=e,r=(e,t,n,r)=>{let i={"top-left":{x:10,y:n+10},"top-right":{x:e.width-t-10,y:n+10},"bottom-left":{x:10,y:e.height-10},"bottom-right":{x:e.width-t-10,y:e.height-10}};return i[r]||i[`bottom-right`]},i=(e,t)=>{let i=e.getContext(`2d`);if(!i||!n?.value?.show)return;let a={fontSize:n.value.fontSize||12,color:n.value.color||`#999999`,position:n.value.position||`bottom-right`};i.save(),i.font=`${a.fontSize}px Arial`,i.fillStyle=a.color,i.textBaseline=`bottom`;let o=i.measureText(t).width,{x:s,y:c}=r(e,o,a.fontSize,a.position);i.fillText(t,s,c),i.restore()},a=(e,t,n)=>{let r=document.createElement(`canvas`);r.width=e.width,r.height=e.height;let i=r.getContext(`2d`);if(!i)throw Error(`无法创建临时 Canvas`);return t&&(i.fillStyle=n,i.fillRect(0,0,r.width,r.height)),i.drawImage(e,0,0),{canvas:r,ctx:i}},o=(e,t)=>{let{includeBackground:r=!1,backgroundColor:o=`#FFFFFF`,includeWatermark:s=!1}=t,{canvas:c}=a(e,r,o);return s&&n?.value?.show&&n.value.text&&i(c,n.value.text),c},s=(e,t)=>new Promise((n,r)=>{e.toBlob(e=>e?n(e):r(Error(`导出失败`)),`image/png`,t)}),c=async(e={})=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);let{format:r=`png`,quality:i=.92}=e;if(r===`svg`)return`data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><text>SVG export placeholder</text></svg>`;let a=o(n,e);if(r===`blob`)return s(a,i);let c=r===`jpeg`?`image/jpeg`:`image/png`;return a.toDataURL(c,i)};return{exportSignature:c,download:async(e=`signature`,t={})=>{let n=t.format||`png`,r=await c({...t,format:n});if(r instanceof Blob){let t=URL.createObjectURL(r),i=document.createElement(`a`);i.href=t,i.download=`${e}.${n}`,i.click(),URL.revokeObjectURL(t)}else if(typeof r==`string`){let t=document.createElement(`a`);t.href=r,t.download=`${e}.${n}`,t.click()}},loadImage:async e=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);let r=n.getContext(`2d`);if(!r)throw Error(`无法获取 Canvas 上下文`);return new Promise((t,i)=>{let a=new Image;a.crossOrigin=`anonymous`,a.onload=()=>{r.clearRect(0,0,n.width,n.height),r.drawImage(a,0,0,n.width,n.height),t()},a.onerror=()=>i(Error(`图片加载失败: ${e}`)),a.src=e})}}}const ee={color:`#000000`,width:2,opacity:1},te={show:!1,text:``,fontSize:12,color:`#999999`,position:`bottom-right`},D=[`#000000`,`#FF0000`,`#0000FF`,`#00AA00`,`#FF6600`,`#9900FF`],O={class:`c-signature`},k={key:0,class:`signature-toolbar`},A={class:`toolbar-section`},j={key:0,class:`toolbar-section`},M={key:1,class:`toolbar-section`},N={class:`toolbar-section`},ne={class:`toolbar-section`},re={key:0,class:`canvas-placeholder`};var P=t(f({name:`C_Signature`,__name:`index`,props:{width:{default:`100%`},height:{default:300},penConfig:{},eraserConfig:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},backgroundImage:{},backgroundColor:{},watermark:{},showToolbar:{type:Boolean,default:!0},maxHistory:{default:50}},emits:[`start-draw`,`drawing`,`end-draw`,`clear`,`undo`,`redo`,`change`],setup(t,{expose:o,emit:f}){let y=t,P=f,F=b(null),I=b(`pen`),L=v({...ee,...y.penConfig}),R=v({...te,...y.watermark}),{strokes:z,canUndo:B,canRedo:V,isEmpty:H,addStroke:U,undo:W,redo:G,clear:K,loadData:q}=T({maxHistory:y.maxHistory,onChange:e=>{J.redrawStrokes(e),P(`change`,e)}}),J=w({canvasRef:F,penConfig:x(L),mode:I,disabled:x(y,`disabled`),onStrokeComplete:e=>{U(e),P(`end-draw`,e)},onDrawStart:()=>P(`start-draw`),onDrawing:e=>P(`drawing`,e)}),Y=E({canvasRef:F,watermark:x(R)}),X=()=>{let e=W();return e&&P(`undo`),e},Z=()=>{let e=G();return e&&P(`redo`),e},Q=()=>{K(),J.clearCanvas(),P(`clear`)},ie=async e=>Y.exportSignature(e),ae=async(e,t)=>Y.download(e,t),$=async e=>{await Y.loadImage(e),K()};return h(()=>{J.initCanvas(),J.bindEvents(),y.backgroundImage&&$(y.backgroundImage)}),g(()=>J.unbindEvents()),o({clear:Q,undo:X,redo:Z,export:ie,download:ae,loadImage:$,getSignatureData:()=>z.value,loadSignatureData:e=>q(e),isEmpty:()=>H.value}),(t,o)=>(_(),c(`div`,O,[t.showToolbar?(_(),c(`div`,k,[l(`div`,A,[d(S(r),null,{default:C(()=>[d(S(n),{type:I.value===`pen`?`primary`:`default`,size:`small`,onClick:o[0]||=e=>I.value=`pen`},{icon:C(()=>[d(e,{name:`mdi:draw`,size:16,color:`currentColor`})]),default:C(()=>[o[4]||=u(` 画笔 `,-1)]),_:1,__:[4]},8,[`type`]),d(S(n),{type:I.value===`eraser`?`primary`:`default`,size:`small`,onClick:o[1]||=e=>I.value=`eraser`},{icon:C(()=>[d(e,{name:`mdi:eraser`,size:16,color:`currentColor`})]),default:C(()=>[o[5]||=u(` 橡皮擦 `,-1)]),_:1,__:[5]},8,[`type`])]),_:1})]),o[11]||=l(`div`,{class:`toolbar-section divider`},null,-1),I.value===`pen`?(_(),c(`div`,j,[o[6]||=l(`span`,{class:`section-label`},`颜色`,-1),d(S(i),{value:L.color,"onUpdate:value":o[2]||=e=>L.color=e,"show-alpha":!1,size:`small`,swatches:S(D)},null,8,[`value`,`swatches`])])):s(`v-if`,!0),I.value===`pen`?(_(),c(`div`,M,[o[7]||=l(`span`,{class:`section-label`},`粗细`,-1),d(S(a),{value:L.width,"onUpdate:value":o[3]||=e=>L.width=e,min:1,max:20,size:`small`,style:{width:`80px`}},null,8,[`value`])])):s(`v-if`,!0),o[12]||=l(`div`,{class:`toolbar-section divider`},null,-1),l(`div`,N,[d(S(n),{size:`small`,disabled:!S(B),onClick:X},{icon:C(()=>[d(e,{name:`mdi:undo`,size:16,color:`currentColor`})]),default:C(()=>[o[8]||=u(` 撤销 `,-1)]),_:1,__:[8]},8,[`disabled`]),d(S(n),{size:`small`,disabled:!S(V),onClick:Z},{icon:C(()=>[d(e,{name:`mdi:redo`,size:16,color:`currentColor`})]),default:C(()=>[o[9]||=u(` 重做 `,-1)]),_:1,__:[9]},8,[`disabled`])]),o[13]||=l(`div`,{class:`toolbar-section divider`},null,-1),l(`div`,ne,[d(S(n),{size:`small`,type:`error`,disabled:S(H),onClick:Q},{icon:C(()=>[d(e,{name:`mdi:delete-outline`,size:16,color:`currentColor`})]),default:C(()=>[o[10]||=u(` 清空 `,-1)]),_:1,__:[10]},8,[`disabled`])])])):s(`v-if`,!0),l(`div`,{class:p([`signature-canvas-wrapper`,{disabled:t.disabled,readonly:t.readonly}]),style:m({width:typeof t.width==`number`?`${t.width}px`:t.width,height:typeof t.height==`number`?`${t.height}px`:t.height,backgroundColor:t.backgroundColor||`transparent`})},[l(`canvas`,{ref_key:`canvasRef`,ref:F,class:p([`signature-canvas`,{disabled:t.disabled,readonly:t.readonly}])},null,2),S(H)&&!t.disabled&&!t.readonly?(_(),c(`div`,re,` 请在此处签名 `)):s(`v-if`,!0)],6)]))}}),[[`__scopeId`,`data-v-1c733bfe`]]);export{w as i,E as n,T as r,P as t};
+import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{NButton as n,NButtonGroup as r,NColorPicker as i,NInputNumber as a}from"naive-ui";import{computed as o,createCommentVNode as s,createElementBlock as c,createElementVNode as l,createTextVNode as u,createVNode as d,defineComponent as f,normalizeClass as p,normalizeStyle as m,onMounted as h,onUnmounted as g,openBlock as _,reactive as v,readonly as y,ref as b,toRef as x,unref as S,withCtx as C}from"vue";function w(e){let{canvasRef:t,penConfig:n,mode:r,disabled:i,onStrokeComplete:a,onDrawStart:o,onDrawing:s}=e,c=b(!1),l=b([]),u=null,d=()=>{let e=t.value;if(!e||(u=e.getContext(`2d`,{willReadFrequently:!0}),!u))return;let n=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*n,e.height=r.height*n,e.style.width=`${r.width}px`,e.style.height=`${r.height}px`,u.scale(n,n),u.lineCap=`round`,u.lineJoin=`round`},f=e=>{let n=t.value;if(!n)return{x:0,y:0};let r=n.getBoundingClientRect(),i,a;if(`touches`in e&&e.touches.length>0)({clientX:i,clientY:a}=e.touches[0]);else if(`clientX`in e)({clientX:i,clientY:a}=e);else return{x:0,y:0};return{x:i-r.left,y:a-r.top,timestamp:Date.now()}},p=(e,t,n,r=!1)=>{u&&(u.save(),r?(u.globalCompositeOperation=`destination-out`,u.lineWidth=20):(u.globalCompositeOperation=`source-over`,u.strokeStyle=n.color,u.lineWidth=n.width,u.globalAlpha=n.opacity),u.beginPath(),u.moveTo(e.x,e.y),u.lineTo(t.x,t.y),u.stroke(),u.restore())},m=e=>{if(i.value)return;e.preventDefault(),c.value=!0,l.value=[];let t=f(e);l.value.push(t),o()},h=e=>{if(!c.value||i.value)return;e.preventDefault();let t=f(e),a=l.value[l.value.length-1];a&&p(a,t,n.value,r.value===`eraser`),l.value.push(t),s(t)},g=e=>{!c.value||i.value||(e.preventDefault(),c.value=!1,l.value.length>0&&(a({points:[...l.value],color:n.value.color,width:n.value.width,opacity:n.value.opacity,mode:r.value}),l.value=[]))};return{isDrawing:y(c),initCanvas:d,bindEvents:()=>{let e=t.value;e&&(e.addEventListener(`mousedown`,m),e.addEventListener(`mousemove`,h),e.addEventListener(`mouseup`,g),e.addEventListener(`mouseleave`,g),e.addEventListener(`touchstart`,m,{passive:!1}),e.addEventListener(`touchmove`,h,{passive:!1}),e.addEventListener(`touchend`,g),e.addEventListener(`touchcancel`,g))},unbindEvents:()=>{let e=t.value;e&&(e.removeEventListener(`mousedown`,m),e.removeEventListener(`mousemove`,h),e.removeEventListener(`mouseup`,g),e.removeEventListener(`mouseleave`,g),e.removeEventListener(`touchstart`,m),e.removeEventListener(`touchmove`,h),e.removeEventListener(`touchend`,g),e.removeEventListener(`touchcancel`,g))},redrawStrokes:e=>{if(!u||!t.value)return;let n=t.value;u.clearRect(0,0,n.width,n.height),e.forEach(e=>{for(let t=1;t<e.points.length;t++)p(e.points[t-1],e.points[t],{color:e.color,width:e.width,opacity:e.opacity},e.mode===`eraser`)})},clearCanvas:()=>{!u||!t.value||u.clearRect(0,0,t.value.width,t.value.height)}}}function T(e={}){let{maxHistory:t=50,onChange:n}=e,r=b([]),i=b([]),a=b(-1),s=o(()=>a.value>0),c=o(()=>a.value<i.value.length-1),l=e=>{r.value.push(e),u()},u=()=>{i.value=i.value.slice(0,a.value+1),i.value.push([...r.value]),a.value++,i.value.length>t&&(i.value.shift(),a.value--),n?.(r.value)},d=()=>s.value?(a.value--,r.value=[...i.value[a.value]],n?.(r.value),!0):!1,f=()=>c.value?(a.value++,r.value=[...i.value[a.value]],n?.(r.value),!0):!1,p=()=>{r.value=[],i.value=[[]],a.value=0,n?.(r.value)},m=e=>{r.value=[...e],i.value=[[...e]],a.value=0,n?.(r.value)},h=o(()=>r.value.length===0);return i.value=[[]],a.value=0,{strokes:y(r),canUndo:y(s),canRedo:y(c),isEmpty:y(h),addStroke:l,undo:d,redo:f,clear:p,loadData:m}}function E(e){let{canvasRef:t,watermark:n}=e,r=(e,t,n,r)=>{let i={"top-left":{x:10,y:n+10},"top-right":{x:e.width-t-10,y:n+10},"bottom-left":{x:10,y:e.height-10},"bottom-right":{x:e.width-t-10,y:e.height-10}};return i[r]||i[`bottom-right`]},i=(e,t)=>{let i=e.getContext(`2d`);if(!i||!n?.value?.show)return;let a={fontSize:n.value.fontSize||12,color:n.value.color||`#999999`,position:n.value.position||`bottom-right`};i.save(),i.font=`${a.fontSize}px Arial`,i.fillStyle=a.color,i.textBaseline=`bottom`;let o=i.measureText(t).width,{x:s,y:c}=r(e,o,a.fontSize,a.position);i.fillText(t,s,c),i.restore()},a=(e,t,n)=>{let r=document.createElement(`canvas`);r.width=e.width,r.height=e.height;let i=r.getContext(`2d`);if(!i)throw Error(`无法创建临时 Canvas`);return t&&(i.fillStyle=n,i.fillRect(0,0,r.width,r.height)),i.drawImage(e,0,0),{canvas:r,ctx:i}},o=(e,t)=>{let{includeBackground:r=!1,backgroundColor:o=`#FFFFFF`,includeWatermark:s=!1}=t,{canvas:c}=a(e,r,o);return s&&n?.value?.text&&i(c,n.value.text),c},s=(e,t)=>new Promise((n,r)=>{e.toBlob(e=>e?n(e):r(Error(`导出失败`)),`image/png`,t)}),c=e=>{let t=e.getContext(`2d`);if(!t)return!0;let{data:n}=t.getImageData(0,0,e.width,e.height);return!n.some(e=>e!==0)},l=async(e={})=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);if(c(n))throw Error(`签名为空，请先签名后再导出`);let{format:r=`png`,quality:i=.92}=e;if(r===`svg`)return`data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><text>SVG export placeholder</text></svg>`;let a=o(n,e);if(r===`blob`)return s(a,i);let l=r===`jpeg`?`image/jpeg`:`image/png`;return a.toDataURL(l,i)};return{exportSignature:l,download:async(e=`signature`,t={})=>{let n=t.format||`png`,r=await l({...t,format:n});if(r instanceof Blob){let t=URL.createObjectURL(r),i=document.createElement(`a`);i.href=t,i.download=`${e}.${n}`,i.click(),URL.revokeObjectURL(t)}else if(typeof r==`string`){let t=document.createElement(`a`);t.href=r,t.download=`${e}.${n}`,t.click()}},loadImage:async e=>{let n=t.value;if(!n)throw Error(`Canvas 未初始化`);let r=n.getContext(`2d`);if(!r)throw Error(`无法获取 Canvas 上下文`);return new Promise((t,i)=>{let a=new Image;a.crossOrigin=`anonymous`,a.onload=()=>{r.clearRect(0,0,n.width,n.height),r.drawImage(a,0,0,n.width,n.height),t()},a.onerror=()=>i(Error(`图片加载失败: ${e}`)),a.src=e})}}}const ee={color:`#000000`,width:2,opacity:1},te={show:!1,text:``,fontSize:12,color:`#999999`,position:`bottom-right`},D=[`#000000`,`#FF0000`,`#0000FF`,`#00AA00`,`#FF6600`,`#9900FF`],O={class:`c-signature`},k={key:0,class:`signature-toolbar`},A={class:`toolbar-section`},j={key:0,class:`toolbar-section`},M={key:1,class:`toolbar-section`},N={class:`toolbar-section`},ne={class:`toolbar-section`},re={key:0,class:`canvas-placeholder`};var P=t(f({name:`C_Signature`,__name:`index`,props:{width:{default:`100%`},height:{default:300},penConfig:{},eraserConfig:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},backgroundImage:{},backgroundColor:{},watermark:{},showToolbar:{type:Boolean,default:!0},maxHistory:{default:50}},emits:[`start-draw`,`drawing`,`end-draw`,`clear`,`undo`,`redo`,`change`],setup(t,{expose:o,emit:f}){let y=t,P=f,F=b(null),I=b(`pen`),L=v({...ee,...y.penConfig}),R=v({...te,...y.watermark}),{strokes:z,canUndo:B,canRedo:V,isEmpty:H,addStroke:U,undo:W,redo:G,clear:K,loadData:q}=T({maxHistory:y.maxHistory,onChange:e=>{J.redrawStrokes(e),P(`change`,e)}}),J=w({canvasRef:F,penConfig:x(L),mode:I,disabled:x(y,`disabled`),onStrokeComplete:e=>{U(e),P(`end-draw`,e)},onDrawStart:()=>P(`start-draw`),onDrawing:e=>P(`drawing`,e)}),Y=E({canvasRef:F,watermark:x(R)}),X=()=>{let e=W();return e&&P(`undo`),e},Z=()=>{let e=G();return e&&P(`redo`),e},Q=()=>{K(),J.clearCanvas(),P(`clear`)},ie=async e=>Y.exportSignature(e),ae=async(e,t)=>Y.download(e,t),$=async e=>{await Y.loadImage(e),K()};return h(()=>{J.initCanvas(),J.bindEvents(),y.backgroundImage&&$(y.backgroundImage)}),g(()=>J.unbindEvents()),o({clear:Q,undo:X,redo:Z,export:ie,download:ae,loadImage:$,getSignatureData:()=>z.value,loadSignatureData:e=>q(e),isEmpty:()=>H.value}),(t,o)=>(_(),c(`div`,O,[t.showToolbar?(_(),c(`div`,k,[l(`div`,A,[d(S(r),null,{default:C(()=>[d(S(n),{type:I.value===`pen`?`primary`:`default`,size:`small`,onClick:o[0]||=e=>I.value=`pen`},{icon:C(()=>[d(e,{name:`mdi:draw`,size:16,color:`currentColor`})]),default:C(()=>[o[4]||=u(` 画笔 `,-1)]),_:1,__:[4]},8,[`type`]),d(S(n),{type:I.value===`eraser`?`primary`:`default`,size:`small`,onClick:o[1]||=e=>I.value=`eraser`},{icon:C(()=>[d(e,{name:`mdi:eraser`,size:16,color:`currentColor`})]),default:C(()=>[o[5]||=u(` 橡皮擦 `,-1)]),_:1,__:[5]},8,[`type`])]),_:1})]),o[11]||=l(`div`,{class:`toolbar-section divider`},null,-1),I.value===`pen`?(_(),c(`div`,j,[o[6]||=l(`span`,{class:`section-label`},`颜色`,-1),d(S(i),{value:L.color,"onUpdate:value":o[2]||=e=>L.color=e,"show-alpha":!1,size:`small`,swatches:S(D)},null,8,[`value`,`swatches`])])):s(`v-if`,!0),I.value===`pen`?(_(),c(`div`,M,[o[7]||=l(`span`,{class:`section-label`},`粗细`,-1),d(S(a),{value:L.width,"onUpdate:value":o[3]||=e=>L.width=e,min:1,max:20,size:`small`,style:{width:`80px`}},null,8,[`value`])])):s(`v-if`,!0),o[12]||=l(`div`,{class:`toolbar-section divider`},null,-1),l(`div`,N,[d(S(n),{size:`small`,disabled:!S(B),onClick:X},{icon:C(()=>[d(e,{name:`mdi:undo`,size:16,color:`currentColor`})]),default:C(()=>[o[8]||=u(` 撤销 `,-1)]),_:1,__:[8]},8,[`disabled`]),d(S(n),{size:`small`,disabled:!S(V),onClick:Z},{icon:C(()=>[d(e,{name:`mdi:redo`,size:16,color:`currentColor`})]),default:C(()=>[o[9]||=u(` 重做 `,-1)]),_:1,__:[9]},8,[`disabled`])]),o[13]||=l(`div`,{class:`toolbar-section divider`},null,-1),l(`div`,ne,[d(S(n),{size:`small`,type:`error`,disabled:S(H),onClick:Q},{icon:C(()=>[d(e,{name:`mdi:delete-outline`,size:16,color:`currentColor`})]),default:C(()=>[o[10]||=u(` 清空 `,-1)]),_:1,__:[10]},8,[`disabled`])])])):s(`v-if`,!0),l(`div`,{class:p([`signature-canvas-wrapper`,{disabled:t.disabled,readonly:t.readonly}]),style:m({width:typeof t.width==`number`?`${t.width}px`:t.width,height:typeof t.height==`number`?`${t.height}px`:t.height,backgroundColor:t.backgroundColor||`transparent`})},[l(`canvas`,{ref_key:`canvasRef`,ref:F,class:p([`signature-canvas`,{disabled:t.disabled,readonly:t.readonly}])},null,2),S(H)&&!t.disabled&&!t.readonly?(_(),c(`div`,re,` 请在此处签名 `)):s(`v-if`,!0)],6)]))}}),[[`__scopeId`,`data-v-1c733bfe`]]);export{w as i,E as n,T as r,P as t};
 //# sourceMappingURL=C_Signature2.js.map