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

package/dist/C_Signature2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Signature2.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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"}
+{"version":3,"file":"C_Signature2.js","names":[],"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"],"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'\nimport type { ExportOptions, WatermarkConfig } from '../types'\n\ninterface UseSignatureExportOptions {\n  canvasRef: Ref<HTMLCanvasElement | null>\n  watermark?: Ref<Partial<WatermarkConfig>>\n}\n\n/**\n *\n */\nexport function useSignatureExport(options: UseSignatureExportOptions) {\n  const { canvasRef, watermark } = options\n\n  const getWatermarkPosition = (\n    canvas: HTMLCanvasElement,\n    textWidth: number,\n    fontSize: number,\n    position: string\n  ): { x: number; y: number } => {\n    const padding = 10\n    const positions = {\n      'top-left': { x: padding, y: fontSize + padding },\n      'top-right': {\n        x: canvas.width - textWidth - padding,\n        y: fontSize + padding,\n      },\n      'bottom-left': { x: padding, y: canvas.height - padding },\n      'bottom-right': {\n        x: canvas.width - textWidth - padding,\n        y: canvas.height - padding,\n      },\n    }\n    return (\n      positions[position as keyof typeof positions] || positions['bottom-right']\n    )\n  }\n\n  const drawWatermark = (canvas: HTMLCanvasElement, text: string): void => {\n    const ctx = canvas.getContext('2d')\n    if (!ctx || !watermark?.value?.show) return\n    const config = {\n      fontSize: watermark.value.fontSize || 12,\n      color: watermark.value.color || '#999999',\n      position: watermark.value.position || 'bottom-right',\n    }\n    ctx.save()\n    ctx.font = `${config.fontSize}px Arial`\n    ctx.fillStyle = config.color\n    ctx.textBaseline = 'bottom'\n    const textWidth = ctx.measureText(text).width\n    const { x, y } = getWatermarkPosition(\n      canvas,\n      textWidth,\n      config.fontSize,\n      config.position\n    )\n    ctx.fillText(text, x, y)\n    ctx.restore()\n  }\n\n  const createTempCanvas = (\n    sourceCanvas: HTMLCanvasElement,\n    includeBackground: boolean,\n    backgroundColor: string\n  ) => {\n    const tempCanvas = document.createElement('canvas')\n    tempCanvas.width = sourceCanvas.width\n    tempCanvas.height = sourceCanvas.height\n    const tempCtx = tempCanvas.getContext('2d')\n    if (!tempCtx) throw new Error('无法创建临时 Canvas')\n    if (includeBackground) {\n      tempCtx.fillStyle = backgroundColor\n      tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height)\n    }\n    tempCtx.drawImage(sourceCanvas, 0, 0)\n    return { canvas: tempCanvas, ctx: tempCtx }\n  }\n\n  const prepareExportCanvas = (\n    canvas: HTMLCanvasElement,\n    options: ExportOptions\n  ): HTMLCanvasElement => {\n    const {\n      includeBackground = false,\n      backgroundColor = '#FFFFFF',\n      includeWatermark = false,\n    } = options\n    const { canvas: tempCanvas } = createTempCanvas(\n      canvas,\n      includeBackground,\n      backgroundColor\n    )\n    // includeWatermark 为 true 时才叠加水印，无视 watermark.show 的状态\n    // 这样「不含水印导出」即使组件配置了水印也不会叠加\n    if (includeWatermark && watermark?.value?.text) {\n      drawWatermark(tempCanvas, watermark.value.text)\n    }\n    return tempCanvas\n  }\n\n  const exportToBlob = (\n    canvas: HTMLCanvasElement,\n    quality: number\n  ): Promise<Blob> => {\n    return new Promise<Blob>((resolve, reject) => {\n      canvas.toBlob(\n        blob => (blob ? resolve(blob) : reject(new Error('导出失败'))),\n        'image/png',\n        quality\n      )\n    })\n  }\n\n  const isCanvasEmpty = (canvas: HTMLCanvasElement): boolean => {\n    const ctx = canvas.getContext('2d')\n    if (!ctx) return true\n    const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height)\n    return !data.some(v => v !== 0)\n  }\n\n  const exportSignature = async (\n    options: ExportOptions = {}\n  ): Promise<string | Blob> => {\n    const canvas = canvasRef.value\n    if (!canvas) throw new Error('Canvas 未初始化')\n    if (isCanvasEmpty(canvas)) throw new Error('签名为空，请先签名后再导出')\n    const { format = 'png', quality = 0.92 } = options\n    if (format === 'svg') {\n      return 'data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\"><text>SVG export placeholder</text></svg>'\n    }\n    const tempCanvas = prepareExportCanvas(canvas, options)\n    if (format === 'blob') return exportToBlob(tempCanvas, quality)\n    const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png'\n    return tempCanvas.toDataURL(mimeType, quality)\n  }\n\n  const download = async (\n    filename = 'signature',\n    options: ExportOptions = {}\n  ): Promise<void> => {\n    const format = options.format || 'png'\n    const result = await exportSignature({ ...options, format })\n    if (result instanceof Blob) {\n      const url = URL.createObjectURL(result)\n      const link = document.createElement('a')\n      link.href = url\n      link.download = `${filename}.${format}`\n      link.click()\n      URL.revokeObjectURL(url)\n    } else if (typeof result === 'string') {\n      const link = document.createElement('a')\n      link.href = result\n      link.download = `${filename}.${format}`\n      link.click()\n    }\n  }\n\n  const loadImage = async (imageUrl: string): Promise<void> => {\n    const canvas = canvasRef.value\n    if (!canvas) throw new Error('Canvas 未初始化')\n    const ctx = canvas.getContext('2d')\n    if (!ctx) throw new Error('无法获取 Canvas 上下文')\n    return new Promise((resolve, reject) => {\n      const img = new Image()\n      img.crossOrigin = 'anonymous'\n      img.onload = () => {\n        ctx.clearRect(0, 0, canvas.width, canvas.height)\n        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)\n        resolve()\n      }\n      img.onerror = () => reject(new Error(`图片加载失败: ${imageUrl}`))\n      img.src = imageUrl\n    })\n  }\n\n  return { exportSignature, download, loadImage }\n}\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","<!--\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 class=\"c-signature\">\n    <div v-if=\"showToolbar\" class=\"signature-toolbar\">\n      <div class=\"toolbar-section\">\n        <NButtonGroup>\n          <NButton\n            :type=\"currentMode === 'pen' ? 'primary' : 'default'\"\n            size=\"small\"\n            @click=\"currentMode = 'pen'\"\n          >\n            <template #icon>\n              <C_Icon name=\"mdi:draw\" :size=\"16\" color=\"currentColor\" />\n            </template>\n            画笔\n          </NButton>\n          <NButton\n            :type=\"currentMode === 'eraser' ? 'primary' : 'default'\"\n            size=\"small\"\n            @click=\"currentMode = 'eraser'\"\n          >\n            <template #icon>\n              <C_Icon name=\"mdi:eraser\" :size=\"16\" color=\"currentColor\" />\n            </template>\n            橡皮擦\n          </NButton>\n        </NButtonGroup>\n      </div>\n\n      <div class=\"toolbar-section divider\" />\n\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\n        <span class=\"section-label\">颜色</span>\n        <NColorPicker\n          v-model:value=\"currentPenConfig.color\"\n          :show-alpha=\"false\"\n          size=\"small\"\n          :swatches=\"PRESET_COLORS\"\n        />\n      </div>\n\n      <div v-if=\"currentMode === 'pen'\" class=\"toolbar-section\">\n        <span class=\"section-label\">粗细</span>\n        <NInputNumber\n          v-model:value=\"currentPenConfig.width\"\n          :min=\"1\"\n          :max=\"20\"\n          size=\"small\"\n          style=\"width: 80px\"\n        />\n      </div>\n\n      <div class=\"toolbar-section divider\" />\n\n      <div class=\"toolbar-section\">\n        <NButton size=\"small\" :disabled=\"!canUndo\" @click=\"handleUndo\">\n          <template #icon>\n            <C_Icon name=\"mdi:undo\" :size=\"16\" color=\"currentColor\" />\n          </template>\n          撤销\n        </NButton>\n        <NButton size=\"small\" :disabled=\"!canRedo\" @click=\"handleRedo\">\n          <template #icon>\n            <C_Icon name=\"mdi:redo\" :size=\"16\" color=\"currentColor\" />\n          </template>\n          重做\n        </NButton>\n      </div>\n\n      <div class=\"toolbar-section divider\" />\n\n      <div class=\"toolbar-section\">\n        <NButton\n          size=\"small\"\n          type=\"error\"\n          :disabled=\"isEmpty\"\n          @click=\"handleClear\"\n        >\n          <template #icon>\n            <C_Icon name=\"mdi:delete-outline\" :size=\"16\" color=\"currentColor\" />\n          </template>\n          清空\n        </NButton>\n      </div>\n    </div>\n\n    <div\n      class=\"signature-canvas-wrapper\"\n      :class=\"{ disabled, readonly }\"\n      :style=\"{\n        width: typeof width === 'number' ? `${width}px` : width,\n        height: typeof height === 'number' ? `${height}px` : height,\n        backgroundColor: backgroundColor || 'transparent',\n      }\"\n    >\n      <canvas\n        ref=\"canvasRef\"\n        class=\"signature-canvas\"\n        :class=\"{ disabled, readonly }\"\n      />\n      <div v-if=\"isEmpty && !disabled && !readonly\" class=\"canvas-placeholder\">\n        请在此处签名\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, reactive, toRef, onMounted, onUnmounted } from \"vue\";\nimport { NButton, NButtonGroup, NColorPicker, NInputNumber } from \"naive-ui\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport { useSignatureCanvas } from \"./composables/useSignatureCanvas\";\nimport { useSignatureHistory } from \"./composables/useSignatureHistory\";\nimport { useSignatureExport } from \"./composables/useSignatureExport\";\nimport {\n  DEFAULT_PEN_CONFIG,\n  DEFAULT_WATERMARK_CONFIG,\n  PRESET_COLORS,\n} from \"./data\";\nimport type {\n  ExportOptions,\n  PenConfig,\n  PenMode,\n  SignatureExpose,\n  SignaturePoint,\n  SignatureProps,\n  SignatureStroke,\n  WatermarkConfig,\n} from \"./types\";\n\ndefineOptions({ name: \"C_Signature\" });\n\nconst props = withDefaults(defineProps<SignatureProps>(), {\n  width: \"100%\",\n  height: 300,\n  disabled: false,\n  readonly: false,\n  showToolbar: true,\n  maxHistory: 50,\n});\n\nconst emit = defineEmits<{\n  \"start-draw\": [];\n  drawing: [point: SignaturePoint];\n  \"end-draw\": [stroke: SignatureStroke];\n  clear: [];\n  undo: [];\n  redo: [];\n  change: [data: SignatureStroke[]];\n}>();\n\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\nconst currentMode = ref<PenMode>(\"pen\");\nconst currentPenConfig = reactive<PenConfig>({\n  ...DEFAULT_PEN_CONFIG,\n  ...props.penConfig,\n});\nconst currentWatermark = reactive<WatermarkConfig>({\n  ...DEFAULT_WATERMARK_CONFIG,\n  ...props.watermark,\n});\n\nconst {\n  strokes,\n  canUndo,\n  canRedo,\n  isEmpty,\n  addStroke,\n  undo,\n  redo,\n  clear,\n  loadData,\n} = useSignatureHistory({\n  maxHistory: props.maxHistory,\n  onChange: (data) => {\n    canvasInstance.redrawStrokes(data as SignatureStroke[]);\n    emit(\"change\", data as SignatureStroke[]);\n  },\n});\n\nconst canvasInstance = useSignatureCanvas({\n  canvasRef,\n  penConfig: toRef(currentPenConfig),\n  mode: currentMode,\n  disabled: toRef(props, \"disabled\"),\n  onStrokeComplete: (stroke: SignatureStroke) => {\n    addStroke(stroke);\n    emit(\"end-draw\", stroke);\n  },\n  onDrawStart: () => emit(\"start-draw\"),\n  onDrawing: (point: SignaturePoint) => emit(\"drawing\", point),\n});\n\nconst exportInstance = useSignatureExport({\n  canvasRef,\n  watermark: toRef(currentWatermark),\n});\n\nconst handleUndo = (): boolean => {\n  const result = undo();\n  if (result) emit(\"undo\");\n  return result;\n};\n\nconst handleRedo = (): boolean => {\n  const result = redo();\n  if (result) emit(\"redo\");\n  return result;\n};\n\nconst handleClear = () => {\n  clear();\n  canvasInstance.clearCanvas();\n  emit(\"clear\");\n};\n\nconst exportSignature = async (\n  options?: ExportOptions,\n): Promise<string | Blob> => {\n  return exportInstance.exportSignature(options);\n};\n\nconst download = async (\n  filename?: string,\n  options?: ExportOptions,\n): Promise<void> => {\n  return exportInstance.download(filename, options);\n};\n\nconst loadImage = async (imageUrl: string): Promise<void> => {\n  await exportInstance.loadImage(imageUrl);\n  clear();\n};\n\nconst getSignatureData = (): SignatureStroke[] =>\n  strokes.value as SignatureStroke[];\nconst loadSignatureData = (data: SignatureStroke[]): void => loadData(data);\nconst isSignatureEmpty = (): boolean => isEmpty.value;\n\nonMounted(() => {\n  canvasInstance.initCanvas();\n  canvasInstance.bindEvents();\n  if (props.backgroundImage) loadImage(props.backgroundImage);\n});\n\nonUnmounted(() => canvasInstance.unbindEvents());\n\ndefineExpose<SignatureExpose>({\n  clear: handleClear,\n  undo: handleUndo,\n  redo: handleRedo,\n  export: exportSignature,\n  download,\n  loadImage,\n  getSignatureData,\n  loadSignatureData,\n  isEmpty: isSignatureEmpty,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"6dAmBA,SAAgB,EAAmB,EAAoC,CACrE,GAAM,CACJ,YACA,YACA,OACA,WACA,mBACA,cACA,aACE,EAEE,EAAY,EAAI,GAAM,CACtB,EAAgB,EAAsB,EAAE,CAAC,CAC3C,EAAuC,KAErC,MAAmB,CACvB,IAAM,EAAS,EAAU,MAGzB,GAFI,CAAC,IACL,EAAM,EAAO,WAAW,KAAM,CAAE,mBAAoB,GAAM,CAAC,CACvD,CAAC,GAAK,OACV,IAAM,EAAM,OAAO,kBAAoB,EACjC,EAAO,EAAO,uBAAuB,CAC3C,EAAO,MAAQ,EAAK,MAAQ,EAC5B,EAAO,OAAS,EAAK,OAAS,EAC9B,EAAO,MAAM,MAAQ,GAAG,EAAK,MAAM,IACnC,EAAO,MAAM,OAAS,GAAG,EAAK,OAAO,IACrC,EAAI,MAAM,EAAK,EAAI,CACnB,EAAI,QAAU,QACd,EAAI,SAAW,SAGX,EAAqB,GAA+C,CACxE,IAAM,EAAS,EAAU,MACzB,GAAI,CAAC,EAAQ,MAAO,CAAE,EAAG,EAAG,EAAG,EAAG,CAClC,IAAM,EAAO,EAAO,uBAAuB,CACvC,EACA,EACJ,GAAI,YAAa,GAAK,EAAE,QAAQ,OAAS,GACtC,sBAAuB,EAAE,QAAQ,YACzB,YAAa,GACrB,sBAAuB,QAExB,MAAO,CAAE,EAAG,EAAG,EAAG,EAAG,CAEvB,MAAO,CACL,EAAG,EAAU,EAAK,KAClB,EAAG,EAAU,EAAK,IAClB,UAAW,KAAK,KAAK,CACtB,EAGG,GACJ,EACA,EACA,EACA,EAAa,KACV,CACE,IACL,EAAI,MAAM,CACN,GACF,EAAI,yBAA2B,kBAC/B,EAAI,UAAY,KAEhB,EAAI,yBAA2B,cAC/B,EAAI,YAAc,EAAO,MACzB,EAAI,UAAY,EAAO,MACvB,EAAI,YAAc,EAAO,SAE3B,EAAI,WAAW,CACf,EAAI,OAAO,EAAK,EAAG,EAAK,EAAE,CAC1B,EAAI,OAAO,EAAG,EAAG,EAAG,EAAE,CACtB,EAAI,QAAQ,CACZ,EAAI,SAAS,GAGT,EAAgB,GAA+B,CACnD,GAAI,EAAS,MAAO,OACpB,EAAE,gBAAgB,CAClB,EAAU,MAAQ,GAClB,EAAc,MAAQ,EAAE,CACxB,IAAM,EAAQ,EAAkB,EAAE,CAClC,EAAc,MAAM,KAAK,EAAM,CAC/B,GAAa,EAGT,EAAQ,GAA+B,CAC3C,GAAI,CAAC,EAAU,OAAS,EAAS,MAAO,OACxC,EAAE,gBAAgB,CAClB,IAAM,EAAQ,EAAkB,EAAE,CAC5B,EAAY,EAAc,MAAM,EAAc,MAAM,OAAS,GAC/D,GACF,EAAW,EAAW,EAAO,EAAU,MAAO,EAAK,QAAU,SAAS,CAExE,EAAc,MAAM,KAAK,EAAM,CAC/B,EAAU,EAAM,EAGZ,EAAc,GAA+B,CAC7C,CAAC,EAAU,OAAS,EAAS,QACjC,EAAE,gBAAgB,CAClB,EAAU,MAAQ,GACd,EAAc,MAAM,OAAS,IAQ/B,EAPgC,CAC9B,OAAQ,CAAC,GAAG,EAAc,MAAM,CAChC,MAAO,EAAU,MAAM,MACvB,MAAO,EAAU,MAAM,MACvB,QAAS,EAAU,MAAM,QACzB,KAAM,EAAK,MACZ,CACuB,CACxB,EAAc,MAAQ,EAAE,IAmD5B,MAAO,CACL,UAAW,EAAS,EAAU,CAC9B,aACA,eA7BuB,CACvB,IAAM,EAAS,EAAU,MACpB,IACL,EAAO,iBAAiB,YAAa,EAAa,CAClD,EAAO,iBAAiB,YAAa,EAAK,CAC1C,EAAO,iBAAiB,UAAW,EAAW,CAC9C,EAAO,iBAAiB,aAAc,EAAW,CACjD,EAAO,iBAAiB,aAAc,EAAc,CAAE,QAAS,GAAO,CAAC,CACvE,EAAO,iBAAiB,YAAa,EAAM,CAAE,QAAS,GAAO,CAAC,CAC9D,EAAO,iBAAiB,WAAY,EAAW,CAC/C,EAAO,iBAAiB,cAAe,EAAW,GAoBlD,iBAjByB,CACzB,IAAM,EAAS,EAAU,MACpB,IACL,EAAO,oBAAoB,YAAa,EAAa,CACrD,EAAO,oBAAoB,YAAa,EAAK,CAC7C,EAAO,oBAAoB,UAAW,EAAW,CACjD,EAAO,oBAAoB,aAAc,EAAW,CACpD,EAAO,oBAAoB,aAAc,EAAa,CACtD,EAAO,oBAAoB,YAAa,EAAK,CAC7C,EAAO,oBAAoB,WAAY,EAAW,CAClD,EAAO,oBAAoB,cAAe,EAAW,GAQrD,cApDqB,GAA+B,CACpD,GAAI,CAAC,GAAO,CAAC,EAAU,MAAO,OAC9B,IAAM,EAAS,EAAU,MACzB,EAAI,UAAU,EAAG,EAAG,EAAO,MAAO,EAAO,OAAO,CAChD,EAAQ,QAAS,GAAW,CAC1B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAO,OAAO,OAAQ,IACxC,EACE,EAAO,OAAO,EAAI,GAClB,EAAO,OAAO,GACd,CAAE,MAAO,EAAO,MAAO,MAAO,EAAO,MAAO,QAAS,EAAO,QAAS,CACrE,EAAO,OAAS,SACjB,EAEH,EAwCF,gBArCwB,CACpB,CAAC,GAAO,CAAC,EAAU,OACvB,EAAI,UAAU,EAAG,EAAG,EAAU,MAAM,MAAO,EAAU,MAAM,OAAO,EAoCnE,CCnLH,SAAgB,EAAoB,EAAsC,EAAE,CAAE,CAC5E,GAAM,CAAE,aAAa,GAAI,YAAa,EAEhC,EAAU,EAAuB,EAAE,CAAC,CACpC,EAAe,EAAyB,EAAE,CAAC,CAC3C,EAAe,EAAI,GAAG,CAEtB,EAAU,MAAe,EAAa,MAAQ,EAAE,CAChD,EAAU,MACR,EAAa,MAAQ,EAAa,MAAM,OAAS,EACxD,CAEK,EAAa,GAA4B,CAC7C,EAAQ,MAAM,KAAK,EAAO,CAC1B,GAAe,EAGX,MAAsB,CAC1B,EAAa,MAAQ,EAAa,MAAM,MAAM,EAAG,EAAa,MAAQ,EAAE,CACxE,EAAa,MAAM,KAAK,CAAC,GAAG,EAAQ,MAAM,CAAC,CAC3C,EAAa,QACT,EAAa,MAAM,OAAS,IAC9B,EAAa,MAAM,OAAO,CAC1B,EAAa,SAEf,IAAW,EAAQ,MAAM,EAGrB,MACC,EAAQ,OACb,EAAa,QACb,EAAQ,MAAQ,CAAC,GAAG,EAAa,MAAM,EAAa,OAAO,CAC3D,IAAW,EAAQ,MAAM,CAClB,IAJoB,GAOvB,MACC,EAAQ,OACb,EAAa,QACb,EAAQ,MAAQ,CAAC,GAAG,EAAa,MAAM,EAAa,OAAO,CAC3D,IAAW,EAAQ,MAAM,CAClB,IAJoB,GAOvB,MAAc,CAClB,EAAQ,MAAQ,EAAE,CAClB,EAAa,MAAQ,CAAC,EAAE,CAAC,CACzB,EAAa,MAAQ,EACrB,IAAW,EAAQ,MAAM,EAGrB,EAAY,GAA4B,CAC5C,EAAQ,MAAQ,CAAC,GAAG,EAAK,CACzB,EAAa,MAAQ,CAAC,CAAC,GAAG,EAAK,CAAC,CAChC,EAAa,MAAQ,EACrB,IAAW,EAAQ,MAAM,EAGrB,EAAU,MAAe,EAAQ,MAAM,SAAW,EAAE,CAM1D,MAHA,GAAa,MAAQ,CAAC,EAAE,CAAC,CACzB,EAAa,MAAQ,EAEd,CACL,QAAS,EAAS,EAAQ,CAC1B,QAAS,EAAS,EAAQ,CAC1B,QAAS,EAAS,EAAQ,CAC1B,QAAS,EAAS,EAAQ,CAC1B,YACA,OACA,OACA,QACA,WACD,CCvEH,SAAgB,EAAmB,EAAoC,CACrE,GAAM,CAAE,YAAW,aAAc,EAE3B,GACJ,EACA,EACA,EACA,IAC6B,CAC7B,IACM,EAAY,CAChB,WAAY,CAAE,EAAG,GAAS,EAAG,EAAW,GAAS,CACjD,YAAa,CACX,EAAG,EAAO,MAAQ,EAAY,GAC9B,EAAG,EAAW,GACf,CACD,cAAe,CAAE,EAAG,GAAS,EAAG,EAAO,OAAS,GAAS,CACzD,eAAgB,CACd,EAAG,EAAO,MAAQ,EAAY,GAC9B,EAAG,EAAO,OAAS,GACpB,CACF,CACD,OACE,EAAU,IAAuC,EAAU,iBAIzD,GAAiB,EAA2B,IAAuB,CACvE,IAAM,EAAM,EAAO,WAAW,KAAK,CACnC,GAAI,CAAC,GAAO,CAAC,GAAW,OAAO,KAAM,OACrC,IAAM,EAAS,CACb,SAAU,EAAU,MAAM,UAAY,GACtC,MAAO,EAAU,MAAM,OAAS,UAChC,SAAU,EAAU,MAAM,UAAY,eACvC,CACD,EAAI,MAAM,CACV,EAAI,KAAO,GAAG,EAAO,SAAS,UAC9B,EAAI,UAAY,EAAO,MACvB,EAAI,aAAe,SACnB,IAAM,EAAY,EAAI,YAAY,EAAK,CAAC,MAClC,CAAE,IAAG,KAAM,EACf,EACA,EACA,EAAO,SACP,EAAO,SACR,CACD,EAAI,SAAS,EAAM,EAAG,EAAE,CACxB,EAAI,SAAS,EAGT,GACJ,EACA,EACA,IACG,CACH,IAAM,EAAa,SAAS,cAAc,SAAS,CACnD,EAAW,MAAQ,EAAa,MAChC,EAAW,OAAS,EAAa,OACjC,IAAM,EAAU,EAAW,WAAW,KAAK,CAC3C,GAAI,CAAC,EAAS,MAAU,MAAM,gBAAgB,CAM9C,OALI,IACF,EAAQ,UAAY,EACpB,EAAQ,SAAS,EAAG,EAAG,EAAW,MAAO,EAAW,OAAO,EAE7D,EAAQ,UAAU,EAAc,EAAG,EAAE,CAC9B,CAAE,OAAQ,EAAY,IAAK,EAAS,EAGvC,GACJ,EACA,IACsB,CACtB,GAAM,CACJ,oBAAoB,GACpB,kBAAkB,UAClB,mBAAmB,IACjB,EACE,CAAE,OAAQ,GAAe,EAC7B,EACA,EACA,EACD,CAMD,OAHI,GAAoB,GAAW,OAAO,MACxC,EAAc,EAAY,EAAU,MAAM,KAAK,CAE1C,GAGH,GACJ,EACA,IAEO,IAAI,SAAe,EAAS,IAAW,CAC5C,EAAO,OACL,GAAS,EAAO,EAAQ,EAAK,CAAG,EAAW,MAAM,OAAO,CAAC,CACzD,YACA,EACD,EACD,CAGE,EAAiB,GAAuC,CAC5D,IAAM,EAAM,EAAO,WAAW,KAAK,CACnC,GAAI,CAAC,EAAK,MAAO,GACjB,GAAM,CAAE,QAAS,EAAI,aAAa,EAAG,EAAG,EAAO,MAAO,EAAO,OAAO,CACpE,MAAO,CAAC,EAAK,KAAK,GAAK,IAAM,EAAE,EAG3B,EAAkB,MACtB,EAAyB,EAAE,GACA,CAC3B,IAAM,EAAS,EAAU,MACzB,GAAI,CAAC,EAAQ,MAAU,MAAM,cAAc,CAC3C,GAAI,EAAc,EAAO,CAAE,MAAU,MAAM,gBAAgB,CAC3D,GAAM,CAAE,SAAS,MAAO,UAAU,KAAS,EAC3C,GAAI,IAAW,MACb,MAAO,qHAET,IAAM,EAAa,EAAoB,EAAQ,EAAQ,CACvD,GAAI,IAAW,OAAQ,OAAO,EAAa,EAAY,EAAQ,CAC/D,IAAM,EAAW,IAAW,OAAS,aAAe,YACpD,OAAO,EAAW,UAAU,EAAU,EAAQ,EA0ChD,MAAO,CAAE,kBAAiB,SAvCT,MACf,EAAW,YACX,EAAyB,EAAE,GACT,CAClB,IAAM,EAAS,EAAQ,QAAU,MAC3B,EAAS,MAAM,EAAgB,CAAE,GAAG,EAAS,SAAQ,CAAC,CAC5D,GAAI,aAAkB,KAAM,CAC1B,IAAM,EAAM,IAAI,gBAAgB,EAAO,CACjC,EAAO,SAAS,cAAc,IAAI,CACxC,EAAK,KAAO,EACZ,EAAK,SAAW,GAAG,EAAS,GAAG,IAC/B,EAAK,OAAO,CACZ,IAAI,gBAAgB,EAAI,SACf,OAAO,GAAW,SAAU,CACrC,IAAM,EAAO,SAAS,cAAc,IAAI,CACxC,EAAK,KAAO,EACZ,EAAK,SAAW,GAAG,EAAS,GAAG,IAC/B,EAAK,OAAO,GAsBoB,UAlBlB,KAAO,IAAoC,CAC3D,IAAM,EAAS,EAAU,MACzB,GAAI,CAAC,EAAQ,MAAU,MAAM,cAAc,CAC3C,IAAM,EAAM,EAAO,WAAW,KAAK,CACnC,GAAI,CAAC,EAAK,MAAU,MAAM,kBAAkB,CAC5C,OAAO,IAAI,SAAS,EAAS,IAAW,CACtC,IAAM,EAAM,IAAI,MAChB,EAAI,YAAc,YAClB,EAAI,WAAe,CACjB,EAAI,UAAU,EAAG,EAAG,EAAO,MAAO,EAAO,OAAO,CAChD,EAAI,UAAU,EAAK,EAAG,EAAG,EAAO,MAAO,EAAO,OAAO,CACrD,GAAS,EAEX,EAAI,YAAgB,EAAW,MAAM,WAAW,IAAW,CAAC,CAC5D,EAAI,IAAM,GACV,EAG2C,CC9KjD,MAAa,EAAgC,CAC3C,MAAO,UACP,MAAO,EACP,QAAS,EACV,CAIY,EAA4C,CACvD,KAAM,GACN,KAAM,GACN,SAAU,GACV,MAAO,UACP,SAAU,eACX,CAEY,EAAgB,CAC3B,UACA,UACA,UACA,UACA,UACA,UACD,upBCiHD,IAAM,EAAQ,EASR,EAAO,EAUP,EAAY,EAA8B,KAAK,CAC/C,EAAc,EAAa,MAAM,CACjC,EAAmB,EAAoB,CAC3C,GAAG,EACH,GAAG,EAAM,UACV,CAAC,CACI,EAAmB,EAA0B,CACjD,GAAG,EACH,GAAG,EAAM,UACV,CAAC,CAEI,CACJ,UACA,UACA,UACA,UACA,YACA,OACA,OACA,QACA,YACE,EAAoB,CACtB,WAAY,EAAM,WAClB,SAAW,GAAS,CAClB,EAAe,cAAc,EAA0B,CACvD,EAAK,SAAU,EAA0B,EAE5C,CAAC,CAEI,EAAiB,EAAmB,CACxC,YACA,UAAW,EAAM,EAAiB,CAClC,KAAM,EACN,SAAU,EAAM,EAAO,WAAW,CAClC,iBAAmB,GAA4B,CAC7C,EAAU,EAAO,CACjB,EAAK,WAAY,EAAO,EAE1B,gBAAmB,EAAK,aAAa,CACrC,UAAY,GAA0B,EAAK,UAAW,EAAM,CAC7D,CAAC,CAEI,EAAiB,EAAmB,CACxC,YACA,UAAW,EAAM,EAAiB,CACnC,CAAC,CAEI,MAA4B,CAChC,IAAM,EAAS,GAAM,CAErB,OADI,GAAQ,EAAK,OAAO,CACjB,GAGH,MAA4B,CAChC,IAAM,EAAS,GAAM,CAErB,OADI,GAAQ,EAAK,OAAO,CACjB,GAGH,MAAoB,CACxB,GAAO,CACP,EAAe,aAAa,CAC5B,EAAK,QAAQ,EAGT,GAAkB,KACtB,IAEO,EAAe,gBAAgB,EAAQ,CAG1C,GAAW,MACf,EACA,IAEO,EAAe,SAAS,EAAU,EAAQ,CAG7C,EAAY,KAAO,IAAoC,CAC3D,MAAM,EAAe,UAAU,EAAS,CACxC,GAAO,SAQT,MAAgB,CACd,EAAe,YAAY,CAC3B,EAAe,YAAY,CACvB,EAAM,iBAAiB,EAAU,EAAM,gBAAgB,EAC3D,CAEF,MAAkB,EAAe,cAAc,CAAC,CAEhD,EAA8B,CAC5B,MAAO,EACP,KAAM,EACN,KAAM,EACN,OAAQ,GACR,YACA,YACA,qBAnBA,EAAQ,MAoBR,kBAnByB,GAAkC,EAAS,EAAK,CAoBzE,YAnBsC,EAAQ,MAoB/C,CAAC,aA/PA,EAsGK,MAtGL,EAsGK,CArGQ,EAAA,aAAA,GAAA,CAAX,EAiFK,MAjFL,EAiFK,CAhFH,EAuBK,MAvBL,EAuBK,CAtBH,EAqBc,EAAA,EAAA,CAAA,KAAA,eAXH,CATT,EASS,EAAA,EAAA,CAAA,CARN,KAAM,EAAA,QAAW,MAAA,UAAA,UAClB,KAAK,QACJ,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAW,QAER,KAAI,MAC4C,CAAzD,EAAyD,EAAA,CAAjD,KAAK,WAAY,KAAM,GAAI,MAAM,iCAG7C,CAAA,AAAA,EAAA,KAAA,EAFY,OAEZ,GAAA,CAAA,CAAA,yBACA,EASS,EAAA,EAAA,CAAA,CARN,KAAM,EAAA,QAAW,SAAA,UAAA,UAClB,KAAK,QACJ,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAW,WAER,KAAI,MAC8C,CAA3D,EAA2D,EAAA,CAAnD,KAAK,aAAc,KAAM,GAAI,MAAM,iCAG/C,CAAA,AAAA,EAAA,KAAA,EAFY,QAEZ,GAAA,CAAA,CAAA,2CAIJ,EAAsC,MAAA,CAAjC,MAAM,0BAAyB,CAAA,KAAA,GAAA,CAEzB,EAAA,QAAW,OAAA,GAAA,CAAtB,EAQK,MARL,GAQK,CAAA,AAAA,EAAA,KAPH,EAAoC,OAAA,CAA9B,MAAM,gBAAe,CAAC,KAAE,GAAA,CAC9B,EAKC,EAAA,EAAA,CAAA,CAJS,MAAO,EAAiB,iCAAjB,EAAiB,MAAK,EACpC,aAAY,GACb,KAAK,QACJ,SAAU,EAAA,EAAa,+CAIjB,EAAA,QAAW,OAAA,GAAA,CAAtB,EASK,MATL,GASK,CAAA,AAAA,EAAA,KARH,EAAoC,OAAA,CAA9B,MAAM,gBAAe,CAAC,KAAE,GAAA,CAC9B,EAMC,EAAA,EAAA,CAAA,CALS,MAAO,EAAiB,iCAAjB,EAAiB,MAAK,EACpC,IAAK,EACL,IAAK,GACN,KAAK,QACL,MAAA,CAAA,MAAA,OAAkB,4CAItB,EAAsC,MAAA,CAAjC,MAAM,0BAAyB,CAAA,KAAA,GAAA,CAEpC,EAaK,MAbL,GAaK,CAZH,EAKS,EAAA,EAAA,CAAA,CALA,KAAK,QAAS,SAAQ,CAAG,EAAA,EAAO,CAAG,QAAO,IACtC,KAAI,MAC4C,CAAzD,EAAyD,EAAA,CAAjD,KAAK,WAAY,KAAM,GAAI,MAAM,iCAG7C,CAAA,AAAA,EAAA,KAAA,EAFY,OAEZ,GAAA,CAAA,CAAA,6BACA,EAKS,EAAA,EAAA,CAAA,CALA,KAAK,QAAS,SAAQ,CAAG,EAAA,EAAO,CAAG,QAAO,IACtC,KAAI,MAC4C,CAAzD,EAAyD,EAAA,CAAjD,KAAK,WAAY,KAAM,GAAI,MAAM,iCAG7C,CAAA,AAAA,EAAA,KAAA,EAFY,OAEZ,GAAA,CAAA,CAAA,uCAGF,EAAsC,MAAA,CAAjC,MAAM,0BAAyB,CAAA,KAAA,GAAA,CAEpC,EAYK,MAZL,GAYK,CAXH,EAUS,EAAA,EAAA,CAAA,CATP,KAAK,QACL,KAAK,QACJ,SAAU,EAAA,EAAO,CACjB,QAAO,IAEG,KAAI,MACsD,CAAnE,EAAmE,EAAA,CAA3D,KAAK,qBAAsB,KAAM,GAAI,MAAM,iCAGvD,CAAA,AAAA,EAAA,MAAA,EAFY,OAEZ,GAAA,CAAA,CAAA,gDAIJ,EAiBK,MAAA,CAhBH,MAAK,EAAA,CAAC,2BAAyB,CAAA,SACrB,EAAA,SAAQ,SAAE,EAAA,SAAQ,CAAA,CAAA,CAC3B,MAAK,EAAA,cAAE,EAAA,OAAA,SAAA,GAAA,EAAA,MAAA,IAAA,EAAA,oBAAA,EAAA,QAAA,SAAA,GAAA,EAAA,OAAA,IAAA,EAAA,uBAAA,EAAA,iBAAA,kBAMR,EAIC,SAAA,SAHK,YAAJ,IAAI,EACJ,MAAK,EAAA,CAAC,mBAAiB,CAAA,SACb,EAAA,SAAQ,SAAE,EAAA,SAAQ,CAAA,CAAA,UAEnB,EAAA,EAAO,EAAA,CAAK,EAAA,UAAQ,CAAK,EAAA,UAAA,GAAA,CAApC,EAEK,MAFL,EAAwE,WAExE,EAAA,EAAA,OAAA,GAAA,CAAA,CAAA,EAAA,CAAA,CAAA"}

package/dist/C_Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Skeleton.js","names":["preset","repeat"],"sources":["../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_Skeleton 业务级骨架屏组件\r\n * 提供 8 种预设模式：text / avatar / card / table / form / list / detail / image\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    v-if=\"props.loading\"\r\n    class=\"c-skeleton\"\r\n    :class=\"[`c-skeleton--${animationType}`]\"\r\n  >\r\n    <!-- text 预设 -->\r\n    <template v-if=\"preset === 'text'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__text\"\r\n      >\r\n        <div\r\n          class=\"c-skeleton__line c-skeleton__item\"\r\n          :style=\"{ width: i === repeat ? '60%' : '100%' }\"\r\n        />\r\n      </div>\r\n    </template>\r\n\r\n    <!-- avatar 预设 -->\r\n    <template v-else-if=\"preset === 'avatar'\">\r\n      <div class=\"c-skeleton__avatar-group\">\r\n        <div class=\"c-skeleton__circle c-skeleton__item\" />\r\n        <div class=\"c-skeleton__avatar-text\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 40%\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            style=\"width: 60%\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- image 预设 -->\r\n    <template v-else-if=\"preset === 'image'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__image c-skeleton__item\"\r\n      >\r\n        <div class=\"c-skeleton__image-icon\">\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"currentColor\"\r\n            width=\"32\"\r\n            height=\"32\"\r\n          >\r\n            <path\r\n              d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- card 预设 -->\r\n    <template v-else-if=\"preset === 'card'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__card\"\r\n      >\r\n        <div\r\n          v-if=\"cardConfig.showCover\"\r\n          class=\"c-skeleton__card-cover c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__card-body\">\r\n          <div\r\n            v-for=\"t in cardConfig.titleLines\"\r\n            :key=\"`t-${t}`\"\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\r\n          />\r\n          <div class=\"c-skeleton__card-desc\">\r\n            <div\r\n              v-for=\"d in cardConfig.descLines\"\r\n              :key=\"`d-${d}`\"\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: d === cardConfig.descLines ? '70%' : '100%',\r\n              }\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"cardConfig.showFooter\"\r\n          class=\"c-skeleton__card-footer\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- table 预设 -->\r\n    <template v-else-if=\"preset === 'table'\">\r\n      <div class=\"c-skeleton__table\">\r\n        <div\r\n          v-if=\"tableConfig.showHeader\"\r\n          class=\"c-skeleton__table-header\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`h-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 60%\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-for=\"r in tableConfig.rows\"\r\n          :key=\"`r-${r}`\"\r\n          class=\"c-skeleton__table-row\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`c-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\r\n              }\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div class=\"c-skeleton__action-btns\">\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- form 预设 -->\r\n    <template v-else-if=\"preset === 'form'\">\r\n      <div\r\n        class=\"c-skeleton__form\"\r\n        :style=\"{ '--form-cols': formConfig.cols }\"\r\n      >\r\n        <div\r\n          v-for=\"f in formConfig.fields\"\r\n          :key=\"f\"\r\n          class=\"c-skeleton__form-field\"\r\n        >\r\n          <div\r\n            v-if=\"formConfig.showLabel\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n            :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\r\n          />\r\n        </div>\r\n        <div\r\n          v-if=\"formConfig.showActions\"\r\n          class=\"c-skeleton__form-actions\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 100px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- list 预设 -->\r\n    <template v-else-if=\"preset === 'list'\">\r\n      <div\r\n        v-for=\"i in listConfig.items\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__list-item\"\r\n      >\r\n        <div\r\n          v-if=\"listConfig.showAvatar\"\r\n          class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__list-content\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 30%\"\r\n          />\r\n          <div\r\n            v-for=\"d in listConfig.descLines\"\r\n            :key=\"`d-${d}`\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            :style=\"{\r\n              width: d === listConfig.descLines ? '50%' : '90%',\r\n            }\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- detail 预设 -->\r\n    <template v-else-if=\"preset === 'detail'\">\r\n      <div class=\"c-skeleton__detail\">\r\n        <div\r\n          v-if=\"detailConfig.showAvatar\"\r\n          class=\"c-skeleton__detail-header\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\r\n          />\r\n          <div class=\"c-skeleton__detail-title\">\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item\"\r\n              style=\"width: 120px\"\r\n            />\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 200px\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"c-skeleton__detail-body\">\r\n          <div\r\n            v-for=\"f in detailConfig.fields\"\r\n            :key=\"f\"\r\n            class=\"c-skeleton__detail-field\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n              :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\r\n            />\r\n            <div class=\"c-skeleton__detail-value\">\r\n              <div\r\n                v-for=\"v in detailConfig.valueLines\"\r\n                :key=\"`v-${v}`\"\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n                :style=\"{\r\n                  width: v === detailConfig.valueLines ? '60%' : '100%',\r\n                }\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n  </div>\r\n\r\n  <!-- 加载完成后显示插槽内容 -->\r\n  <slot v-else />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed } from 'vue'\r\n  import type {\r\n    SkeletonProps,\r\n    SkeletonTableConfig,\r\n    SkeletonFormConfig,\r\n    SkeletonListConfig,\r\n    SkeletonCardConfig,\r\n    SkeletonDetailConfig,\r\n  } from './types'\r\n\r\n  defineOptions({ name: 'C_Skeleton' })\r\n\r\n  const props = withDefaults(defineProps<SkeletonProps>(), {\r\n    preset: 'text',\r\n    loading: true,\r\n    animation: 'wave',\r\n    repeat: 3,\r\n    borderRadius: '4px',\r\n  })\r\n\r\n  const animationType = computed(() =>\r\n    props.animation === false ? 'none' : props.animation\r\n  )\r\n\r\n  const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\r\n    rows: props.table?.rows ?? 5,\r\n    cols: props.table?.cols ?? 4,\r\n    showHeader: props.table?.showHeader ?? true,\r\n    showActions: props.table?.showActions ?? true,\r\n  }))\r\n\r\n  const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\r\n    fields: props.form?.fields ?? 6,\r\n    cols: props.form?.cols ?? 2,\r\n    showLabel: props.form?.showLabel ?? true,\r\n    showActions: props.form?.showActions ?? true,\r\n  }))\r\n\r\n  const listConfig = computed<Required<SkeletonListConfig>>(() => ({\r\n    items: props.list?.items ?? 5,\r\n    showAvatar: props.list?.showAvatar ?? true,\r\n    descLines: props.list?.descLines ?? 2,\r\n  }))\r\n\r\n  const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\r\n    showCover: props.card?.showCover ?? true,\r\n    titleLines: props.card?.titleLines ?? 1,\r\n    descLines: props.card?.descLines ?? 2,\r\n    showFooter: props.card?.showFooter ?? true,\r\n  }))\r\n\r\n  const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\r\n    fields: props.detail?.fields ?? 6,\r\n    valueLines: props.detail?.valueLines ?? 1,\r\n    showAvatar: props.detail?.showAvatar ?? true,\r\n  }))\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_Skeleton 业务级骨架屏组件\r\n * 提供 8 种预设模式：text / avatar / card / table / form / list / detail / image\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    v-if=\"props.loading\"\r\n    class=\"c-skeleton\"\r\n    :class=\"[`c-skeleton--${animationType}`]\"\r\n  >\r\n    <!-- text 预设 -->\r\n    <template v-if=\"preset === 'text'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__text\"\r\n      >\r\n        <div\r\n          class=\"c-skeleton__line c-skeleton__item\"\r\n          :style=\"{ width: i === repeat ? '60%' : '100%' }\"\r\n        />\r\n      </div>\r\n    </template>\r\n\r\n    <!-- avatar 预设 -->\r\n    <template v-else-if=\"preset === 'avatar'\">\r\n      <div class=\"c-skeleton__avatar-group\">\r\n        <div class=\"c-skeleton__circle c-skeleton__item\" />\r\n        <div class=\"c-skeleton__avatar-text\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 40%\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            style=\"width: 60%\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- image 预设 -->\r\n    <template v-else-if=\"preset === 'image'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__image c-skeleton__item\"\r\n      >\r\n        <div class=\"c-skeleton__image-icon\">\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"currentColor\"\r\n            width=\"32\"\r\n            height=\"32\"\r\n          >\r\n            <path\r\n              d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- card 预设 -->\r\n    <template v-else-if=\"preset === 'card'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__card\"\r\n      >\r\n        <div\r\n          v-if=\"cardConfig.showCover\"\r\n          class=\"c-skeleton__card-cover c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__card-body\">\r\n          <div\r\n            v-for=\"t in cardConfig.titleLines\"\r\n            :key=\"`t-${t}`\"\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\r\n          />\r\n          <div class=\"c-skeleton__card-desc\">\r\n            <div\r\n              v-for=\"d in cardConfig.descLines\"\r\n              :key=\"`d-${d}`\"\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: d === cardConfig.descLines ? '70%' : '100%',\r\n              }\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"cardConfig.showFooter\"\r\n          class=\"c-skeleton__card-footer\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- table 预设 -->\r\n    <template v-else-if=\"preset === 'table'\">\r\n      <div class=\"c-skeleton__table\">\r\n        <div\r\n          v-if=\"tableConfig.showHeader\"\r\n          class=\"c-skeleton__table-header\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`h-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 60%\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-for=\"r in tableConfig.rows\"\r\n          :key=\"`r-${r}`\"\r\n          class=\"c-skeleton__table-row\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`c-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\r\n              }\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div class=\"c-skeleton__action-btns\">\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- form 预设 -->\r\n    <template v-else-if=\"preset === 'form'\">\r\n      <div\r\n        class=\"c-skeleton__form\"\r\n        :style=\"{ '--form-cols': formConfig.cols }\"\r\n      >\r\n        <div\r\n          v-for=\"f in formConfig.fields\"\r\n          :key=\"f\"\r\n          class=\"c-skeleton__form-field\"\r\n        >\r\n          <div\r\n            v-if=\"formConfig.showLabel\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n            :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\r\n          />\r\n        </div>\r\n        <div\r\n          v-if=\"formConfig.showActions\"\r\n          class=\"c-skeleton__form-actions\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 100px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- list 预设 -->\r\n    <template v-else-if=\"preset === 'list'\">\r\n      <div\r\n        v-for=\"i in listConfig.items\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__list-item\"\r\n      >\r\n        <div\r\n          v-if=\"listConfig.showAvatar\"\r\n          class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__list-content\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 30%\"\r\n          />\r\n          <div\r\n            v-for=\"d in listConfig.descLines\"\r\n            :key=\"`d-${d}`\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            :style=\"{\r\n              width: d === listConfig.descLines ? '50%' : '90%',\r\n            }\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- detail 预设 -->\r\n    <template v-else-if=\"preset === 'detail'\">\r\n      <div class=\"c-skeleton__detail\">\r\n        <div\r\n          v-if=\"detailConfig.showAvatar\"\r\n          class=\"c-skeleton__detail-header\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\r\n          />\r\n          <div class=\"c-skeleton__detail-title\">\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item\"\r\n              style=\"width: 120px\"\r\n            />\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 200px\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"c-skeleton__detail-body\">\r\n          <div\r\n            v-for=\"f in detailConfig.fields\"\r\n            :key=\"f\"\r\n            class=\"c-skeleton__detail-field\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n              :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\r\n            />\r\n            <div class=\"c-skeleton__detail-value\">\r\n              <div\r\n                v-for=\"v in detailConfig.valueLines\"\r\n                :key=\"`v-${v}`\"\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n                :style=\"{\r\n                  width: v === detailConfig.valueLines ? '60%' : '100%',\r\n                }\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n  </div>\r\n\r\n  <!-- 加载完成后显示插槽内容 -->\r\n  <slot v-else />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed } from 'vue'\r\n  import type {\r\n    SkeletonProps,\r\n    SkeletonTableConfig,\r\n    SkeletonFormConfig,\r\n    SkeletonListConfig,\r\n    SkeletonCardConfig,\r\n    SkeletonDetailConfig,\r\n  } from './types'\r\n\r\n  defineOptions({ name: 'C_Skeleton' })\r\n\r\n  const props = withDefaults(defineProps<SkeletonProps>(), {\r\n    preset: 'text',\r\n    loading: true,\r\n    animation: 'wave',\r\n    repeat: 3,\r\n    borderRadius: '4px',\r\n  })\r\n\r\n  const animationType = computed(() =>\r\n    props.animation === false ? 'none' : props.animation\r\n  )\r\n\r\n  const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\r\n    rows: props.table?.rows ?? 5,\r\n    cols: props.table?.cols ?? 4,\r\n    showHeader: props.table?.showHeader ?? true,\r\n    showActions: props.table?.showActions ?? true,\r\n  }))\r\n\r\n  const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\r\n    fields: props.form?.fields ?? 6,\r\n    cols: props.form?.cols ?? 2,\r\n    showLabel: props.form?.showLabel ?? true,\r\n    showActions: props.form?.showActions ?? true,\r\n  }))\r\n\r\n  const listConfig = computed<Required<SkeletonListConfig>>(() => ({\r\n    items: props.list?.items ?? 5,\r\n    showAvatar: props.list?.showAvatar ?? true,\r\n    descLines: props.list?.descLines ?? 2,\r\n  }))\r\n\r\n  const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\r\n    showCover: props.card?.showCover ?? true,\r\n    titleLines: props.card?.titleLines ?? 1,\r\n    descLines: props.card?.descLines ?? 2,\r\n    showFooter: props.card?.showFooter ?? true,\r\n  }))\r\n\r\n  const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\r\n    fields: props.detail?.fields ?? 6,\r\n    valueLines: props.detail?.valueLines ?? 1,\r\n    showAvatar: props.detail?.showAvatar ?? true,\r\n  }))\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_Skeleton 业务级骨架屏组件\r\n * 提供 8 种预设模式：text / avatar / card / table / form / list / detail / image\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    v-if=\"props.loading\"\r\n    class=\"c-skeleton\"\r\n    :class=\"[`c-skeleton--${animationType}`]\"\r\n  >\r\n    <!-- text 预设 -->\r\n    <template v-if=\"preset === 'text'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__text\"\r\n      >\r\n        <div\r\n          class=\"c-skeleton__line c-skeleton__item\"\r\n          :style=\"{ width: i === repeat ? '60%' : '100%' }\"\r\n        />\r\n      </div>\r\n    </template>\r\n\r\n    <!-- avatar 预设 -->\r\n    <template v-else-if=\"preset === 'avatar'\">\r\n      <div class=\"c-skeleton__avatar-group\">\r\n        <div class=\"c-skeleton__circle c-skeleton__item\" />\r\n        <div class=\"c-skeleton__avatar-text\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 40%\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            style=\"width: 60%\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- image 预设 -->\r\n    <template v-else-if=\"preset === 'image'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__image c-skeleton__item\"\r\n      >\r\n        <div class=\"c-skeleton__image-icon\">\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"currentColor\"\r\n            width=\"32\"\r\n            height=\"32\"\r\n          >\r\n            <path\r\n              d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- card 预设 -->\r\n    <template v-else-if=\"preset === 'card'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__card\"\r\n      >\r\n        <div\r\n          v-if=\"cardConfig.showCover\"\r\n          class=\"c-skeleton__card-cover c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__card-body\">\r\n          <div\r\n            v-for=\"t in cardConfig.titleLines\"\r\n            :key=\"`t-${t}`\"\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\r\n          />\r\n          <div class=\"c-skeleton__card-desc\">\r\n            <div\r\n              v-for=\"d in cardConfig.descLines\"\r\n              :key=\"`d-${d}`\"\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: d === cardConfig.descLines ? '70%' : '100%',\r\n              }\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"cardConfig.showFooter\"\r\n          class=\"c-skeleton__card-footer\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- table 预设 -->\r\n    <template v-else-if=\"preset === 'table'\">\r\n      <div class=\"c-skeleton__table\">\r\n        <div\r\n          v-if=\"tableConfig.showHeader\"\r\n          class=\"c-skeleton__table-header\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`h-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 60%\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-for=\"r in tableConfig.rows\"\r\n          :key=\"`r-${r}`\"\r\n          class=\"c-skeleton__table-row\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`c-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\r\n              }\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div class=\"c-skeleton__action-btns\">\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- form 预设 -->\r\n    <template v-else-if=\"preset === 'form'\">\r\n      <div\r\n        class=\"c-skeleton__form\"\r\n        :style=\"{ '--form-cols': formConfig.cols }\"\r\n      >\r\n        <div\r\n          v-for=\"f in formConfig.fields\"\r\n          :key=\"f\"\r\n          class=\"c-skeleton__form-field\"\r\n        >\r\n          <div\r\n            v-if=\"formConfig.showLabel\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n            :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\r\n          />\r\n        </div>\r\n        <div\r\n          v-if=\"formConfig.showActions\"\r\n          class=\"c-skeleton__form-actions\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 100px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- list 预设 -->\r\n    <template v-else-if=\"preset === 'list'\">\r\n      <div\r\n        v-for=\"i in listConfig.items\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__list-item\"\r\n      >\r\n        <div\r\n          v-if=\"listConfig.showAvatar\"\r\n          class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__list-content\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 30%\"\r\n          />\r\n          <div\r\n            v-for=\"d in listConfig.descLines\"\r\n            :key=\"`d-${d}`\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            :style=\"{\r\n              width: d === listConfig.descLines ? '50%' : '90%',\r\n            }\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- detail 预设 -->\r\n    <template v-else-if=\"preset === 'detail'\">\r\n      <div class=\"c-skeleton__detail\">\r\n        <div\r\n          v-if=\"detailConfig.showAvatar\"\r\n          class=\"c-skeleton__detail-header\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\r\n          />\r\n          <div class=\"c-skeleton__detail-title\">\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item\"\r\n              style=\"width: 120px\"\r\n            />\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 200px\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"c-skeleton__detail-body\">\r\n          <div\r\n            v-for=\"f in detailConfig.fields\"\r\n            :key=\"f\"\r\n            class=\"c-skeleton__detail-field\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n              :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\r\n            />\r\n            <div class=\"c-skeleton__detail-value\">\r\n              <div\r\n                v-for=\"v in detailConfig.valueLines\"\r\n                :key=\"`v-${v}`\"\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n                :style=\"{\r\n                  width: v === detailConfig.valueLines ? '60%' : '100%',\r\n                }\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n  </div>\r\n\r\n  <!-- 加载完成后显示插槽内容 -->\r\n  <slot v-else />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed } from 'vue'\r\n  import type {\r\n    SkeletonProps,\r\n    SkeletonTableConfig,\r\n    SkeletonFormConfig,\r\n    SkeletonListConfig,\r\n    SkeletonCardConfig,\r\n    SkeletonDetailConfig,\r\n  } from './types'\r\n\r\n  defineOptions({ name: 'C_Skeleton' })\r\n\r\n  const props = withDefaults(defineProps<SkeletonProps>(), {\r\n    preset: 'text',\r\n    loading: true,\r\n    animation: 'wave',\r\n    repeat: 3,\r\n    borderRadius: '4px',\r\n  })\r\n\r\n  const animationType = computed(() =>\r\n    props.animation === false ? 'none' : props.animation\r\n  )\r\n\r\n  const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\r\n    rows: props.table?.rows ?? 5,\r\n    cols: props.table?.cols ?? 4,\r\n    showHeader: props.table?.showHeader ?? true,\r\n    showActions: props.table?.showActions ?? true,\r\n  }))\r\n\r\n  const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\r\n    fields: props.form?.fields ?? 6,\r\n    cols: props.form?.cols ?? 2,\r\n    showLabel: props.form?.showLabel ?? true,\r\n    showActions: props.form?.showActions ?? true,\r\n  }))\r\n\r\n  const listConfig = computed<Required<SkeletonListConfig>>(() => ({\r\n    items: props.list?.items ?? 5,\r\n    showAvatar: props.list?.showAvatar ?? true,\r\n    descLines: props.list?.descLines ?? 2,\r\n  }))\r\n\r\n  const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\r\n    showCover: props.card?.showCover ?? true,\r\n    titleLines: props.card?.titleLines ?? 1,\r\n    descLines: props.card?.descLines ?? 2,\r\n    showFooter: props.card?.showFooter ?? true,\r\n  }))\r\n\r\n  const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\r\n    fields: props.detail?.fields ?? 6,\r\n    valueLines: props.detail?.valueLines ?? 1,\r\n    showAvatar: props.detail?.showAvatar ?? true,\r\n  }))\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_Skeleton.js","names":[],"sources":["../src/components/C_Skeleton/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式：text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n  <div\n    v-if=\"props.loading\"\n    class=\"c-skeleton\"\n    :class=\"[`c-skeleton--${animationType}`]\"\n  >\n    <!-- text 预设 -->\n    <template v-if=\"preset === 'text'\">\n      <div\n        v-for=\"i in repeat\"\n        :key=\"i\"\n        class=\"c-skeleton__text\"\n      >\n        <div\n          class=\"c-skeleton__line c-skeleton__item\"\n          :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n        />\n      </div>\n    </template>\n\n    <!-- avatar 预设 -->\n    <template v-else-if=\"preset === 'avatar'\">\n      <div class=\"c-skeleton__avatar-group\">\n        <div class=\"c-skeleton__circle c-skeleton__item\" />\n        <div class=\"c-skeleton__avatar-text\">\n          <div\n            class=\"c-skeleton__line c-skeleton__item\"\n            style=\"width: 40%\"\n          />\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n            style=\"width: 60%\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- image 预设 -->\n    <template v-else-if=\"preset === 'image'\">\n      <div\n        v-for=\"i in repeat\"\n        :key=\"i\"\n        class=\"c-skeleton__image c-skeleton__item\"\n      >\n        <div class=\"c-skeleton__image-icon\">\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            width=\"32\"\n            height=\"32\"\n          >\n            <path\n              d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n            />\n          </svg>\n        </div>\n      </div>\n    </template>\n\n    <!-- card 预设 -->\n    <template v-else-if=\"preset === 'card'\">\n      <div\n        v-for=\"i in repeat\"\n        :key=\"i\"\n        class=\"c-skeleton__card\"\n      >\n        <div\n          v-if=\"cardConfig.showCover\"\n          class=\"c-skeleton__card-cover c-skeleton__item\"\n        />\n        <div class=\"c-skeleton__card-body\">\n          <div\n            v-for=\"t in cardConfig.titleLines\"\n            :key=\"`t-${t}`\"\n            class=\"c-skeleton__line c-skeleton__item\"\n            :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n          />\n          <div class=\"c-skeleton__card-desc\">\n            <div\n              v-for=\"d in cardConfig.descLines\"\n              :key=\"`d-${d}`\"\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n              :style=\"{\n                width: d === cardConfig.descLines ? '70%' : '100%',\n              }\"\n            />\n          </div>\n        </div>\n        <div\n          v-if=\"cardConfig.showFooter\"\n          class=\"c-skeleton__card-footer\"\n        >\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n            style=\"width: 80px\"\n          />\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n            style=\"width: 80px\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- table 预设 -->\n    <template v-else-if=\"preset === 'table'\">\n      <div class=\"c-skeleton__table\">\n        <div\n          v-if=\"tableConfig.showHeader\"\n          class=\"c-skeleton__table-header\"\n        >\n          <div\n            v-for=\"c in tableConfig.cols\"\n            :key=\"`h-${c}`\"\n            class=\"c-skeleton__table-cell\"\n          >\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n            />\n          </div>\n          <div\n            v-if=\"tableConfig.showActions\"\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n          >\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n              style=\"width: 60%\"\n            />\n          </div>\n        </div>\n        <div\n          v-for=\"r in tableConfig.rows\"\n          :key=\"`r-${r}`\"\n          class=\"c-skeleton__table-row\"\n        >\n          <div\n            v-for=\"c in tableConfig.cols\"\n            :key=\"`c-${c}`\"\n            class=\"c-skeleton__table-cell\"\n          >\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n              :style=\"{\n                width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n              }\"\n            />\n          </div>\n          <div\n            v-if=\"tableConfig.showActions\"\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n          >\n            <div class=\"c-skeleton__action-btns\">\n              <div\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n                style=\"width: 40px\"\n              />\n              <div\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n                style=\"width: 40px\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n\n    <!-- form 预设 -->\n    <template v-else-if=\"preset === 'form'\">\n      <div\n        class=\"c-skeleton__form\"\n        :style=\"{ '--form-cols': formConfig.cols }\"\n      >\n        <div\n          v-for=\"f in formConfig.fields\"\n          :key=\"f\"\n          class=\"c-skeleton__form-field\"\n        >\n          <div\n            v-if=\"formConfig.showLabel\"\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n            :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n          />\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n          />\n        </div>\n        <div\n          v-if=\"formConfig.showActions\"\n          class=\"c-skeleton__form-actions\"\n        >\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n            style=\"width: 100px\"\n          />\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n            style=\"width: 80px\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- list 预设 -->\n    <template v-else-if=\"preset === 'list'\">\n      <div\n        v-for=\"i in listConfig.items\"\n        :key=\"i\"\n        class=\"c-skeleton__list-item\"\n      >\n        <div\n          v-if=\"listConfig.showAvatar\"\n          class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n        />\n        <div class=\"c-skeleton__list-content\">\n          <div\n            class=\"c-skeleton__line c-skeleton__item\"\n            style=\"width: 30%\"\n          />\n          <div\n            v-for=\"d in listConfig.descLines\"\n            :key=\"`d-${d}`\"\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n            :style=\"{\n              width: d === listConfig.descLines ? '50%' : '90%',\n            }\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- detail 预设 -->\n    <template v-else-if=\"preset === 'detail'\">\n      <div class=\"c-skeleton__detail\">\n        <div\n          v-if=\"detailConfig.showAvatar\"\n          class=\"c-skeleton__detail-header\"\n        >\n          <div\n            class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n          />\n          <div class=\"c-skeleton__detail-title\">\n            <div\n              class=\"c-skeleton__line c-skeleton__item\"\n              style=\"width: 120px\"\n            />\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n              style=\"width: 200px\"\n            />\n          </div>\n        </div>\n        <div class=\"c-skeleton__detail-body\">\n          <div\n            v-for=\"f in detailConfig.fields\"\n            :key=\"f\"\n            class=\"c-skeleton__detail-field\"\n          >\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n              :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n            />\n            <div class=\"c-skeleton__detail-value\">\n              <div\n                v-for=\"v in detailConfig.valueLines\"\n                :key=\"`v-${v}`\"\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n                :style=\"{\n                  width: v === detailConfig.valueLines ? '60%' : '100%',\n                }\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </div>\n\n  <!-- 加载完成后显示插槽内容 -->\n  <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n  import { computed } from 'vue'\n  import type {\n    SkeletonProps,\n    SkeletonTableConfig,\n    SkeletonFormConfig,\n    SkeletonListConfig,\n    SkeletonCardConfig,\n    SkeletonDetailConfig,\n  } from './types'\n\n  defineOptions({ name: 'C_Skeleton' })\n\n  const props = withDefaults(defineProps<SkeletonProps>(), {\n    preset: 'text',\n    loading: true,\n    animation: 'wave',\n    repeat: 3,\n    borderRadius: '4px',\n  })\n\n  const animationType = computed(() =>\n    props.animation === false ? 'none' : props.animation\n  )\n\n  const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n    rows: props.table?.rows ?? 5,\n    cols: props.table?.cols ?? 4,\n    showHeader: props.table?.showHeader ?? true,\n    showActions: props.table?.showActions ?? true,\n  }))\n\n  const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n    fields: props.form?.fields ?? 6,\n    cols: props.form?.cols ?? 2,\n    showLabel: props.form?.showLabel ?? true,\n    showActions: props.form?.showActions ?? true,\n  }))\n\n  const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n    items: props.list?.items ?? 5,\n    showAvatar: props.list?.showAvatar ?? true,\n    descLines: props.list?.descLines ?? 2,\n  }))\n\n  const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n    showCover: props.card?.showCover ?? true,\n    titleLines: props.card?.titleLines ?? 1,\n    descLines: props.card?.descLines ?? 2,\n    showFooter: props.card?.showFooter ?? true,\n  }))\n\n  const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n    fields: props.detail?.fields ?? 6,\n    valueLines: props.detail?.valueLines ?? 1,\n    showAvatar: props.detail?.showAvatar ?? true,\n  }))\n</script>\n\n<style lang=\"scss\">\n  @use './index.scss';\n</style>\n"],"mappings":"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"}

package/dist/C_Skeleton2.js

@@ -1,2 +1,2 @@
-import{Fragment as e,computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,createStaticVNode as a,defineComponent as o,normalizeClass as s,normalizeStyle as c,openBlock as l,renderList as u,renderSlot as d}from"vue";const f={key:0,class:`c-skeleton__card-cover c-skeleton__item`},p={class:`c-skeleton__card-body`},m={class:`c-skeleton__card-desc`},h={key:1,class:`c-skeleton__card-footer`},g={class:`c-skeleton__table`},_={key:0,class:`c-skeleton__table-header`},v={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},y={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},b={key:0,class:`c-skeleton__form-actions`},x={key:0,class:`c-skeleton__circle c-skeleton__circle--sm c-skeleton__item`},S={class:`c-skeleton__list-content`},C={class:`c-skeleton__detail`},w={key:0,class:`c-skeleton__detail-header`},T={class:`c-skeleton__detail-body`},E={class:`c-skeleton__detail-value`};var D=o({name:`C_Skeleton`,__name:`index`,props:{preset:{default:`text`},loading:{type:Boolean,default:!0},animation:{type:[String,Boolean],default:`wave`},repeat:{default:3},borderRadius:{default:`4px`},table:{},form:{},list:{},card:{},detail:{}},setup(o){let D=o,O=t(()=>D.animation===!1?`none`:D.animation),k=t(()=>({rows:D.table?.rows??5,cols:D.table?.cols??4,showHeader:D.table?.showHeader??!0,showActions:D.table?.showActions??!0})),A=t(()=>({fields:D.form?.fields??6,cols:D.form?.cols??2,showLabel:D.form?.showLabel??!0,showActions:D.form?.showActions??!0})),j=t(()=>({items:D.list?.items??5,showAvatar:D.list?.showAvatar??!0,descLines:D.list?.descLines??2})),M=t(()=>({showCover:D.card?.showCover??!0,titleLines:D.card?.titleLines??1,descLines:D.card?.descLines??2,showFooter:D.card?.showFooter??!0})),N=t(()=>({fields:D.detail?.fields??6,valueLines:D.detail?.valueLines??1,showAvatar:D.detail?.showAvatar??!0}));return(t,o)=>D.loading?(l(),r(`div`,{key:0,class:s([`c-skeleton`,[`c-skeleton--${O.value}`]])},[n(` text 预设 `),t.preset===`text`?(l(!0),r(e,{key:0},u(t.repeat,e=>(l(),r(`div`,{key:e,class:`c-skeleton__text`},[i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:c({width:e===t.repeat?`60%`:`100%`})},null,4)]))),128)):t.preset===`avatar`?(l(),r(e,{key:1},[n(` avatar 预设 `),o[0]||=a(`<div class="c-skeleton__avatar-group"><div class="c-skeleton__circle c-skeleton__item"></div><div class="c-skeleton__avatar-text"><div class="c-skeleton__line c-skeleton__item" style="width:40%;"></div><div class="c-skeleton__line c-skeleton__item c-skeleton__line--sm" style="width:60%;"></div></div></div>`,1)],64)):t.preset===`image`?(l(),r(e,{key:2},[n(` image 预设 `),(l(!0),r(e,null,u(t.repeat,e=>(l(),r(`div`,{key:e,class:`c-skeleton__image c-skeleton__item`},o[1]||=[i(`div`,{class:`c-skeleton__image-icon`},[i(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,width:`32`,height:`32`},[i(`path`,{d:`M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z`})])],-1)]))),128))],64)):t.preset===`card`?(l(),r(e,{key:3},[n(` card 预设 `),(l(!0),r(e,null,u(t.repeat,t=>(l(),r(`div`,{key:t,class:`c-skeleton__card`},[M.value.showCover?(l(),r(`div`,f)):n(`v-if`,!0),i(`div`,p,[(l(!0),r(e,null,u(M.value.titleLines,e=>(l(),r(`div`,{key:`t-${e}`,class:`c-skeleton__line c-skeleton__item`,style:c({width:e===M.value.titleLines?`50%`:`80%`})},null,4))),128)),i(`div`,m,[(l(!0),r(e,null,u(M.value.descLines,e=>(l(),r(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===M.value.descLines?`70%`:`100%`})},null,4))),128))])]),M.value.showFooter?(l(),r(`div`,h,o[2]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)])):n(`v-if`,!0)]))),128))],64)):t.preset===`table`?(l(),r(e,{key:4},[n(` table 预设 `),i(`div`,g,[k.value.showHeader?(l(),r(`div`,_,[(l(!0),r(e,null,u(k.value.cols,e=>(l(),r(`div`,{key:`h-${e}`,class:`c-skeleton__table-cell`},o[3]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`},null,-1)]))),128)),k.value.showActions?(l(),r(`div`,v,o[4]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`60%`}},null,-1)])):n(`v-if`,!0)])):n(`v-if`,!0),(l(!0),r(e,null,u(k.value.rows,t=>(l(),r(`div`,{key:`r-${t}`,class:`c-skeleton__table-row`},[(l(!0),r(e,null,u(k.value.cols,e=>(l(),r(`div`,{key:`c-${e}`,class:`c-skeleton__table-cell`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:`${Math.floor(50+t*e*17%50)}%`})},null,4)]))),128)),k.value.showActions?(l(),r(`div`,y,o[5]||=[i(`div`,{class:`c-skeleton__action-btns`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}}),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}})],-1)])):n(`v-if`,!0)]))),128))])],64)):t.preset===`form`?(l(),r(e,{key:5},[n(` form 预设 `),i(`div`,{class:`c-skeleton__form`,style:c({"--form-cols":A.value.cols})},[(l(!0),r(e,null,u(A.value.fields,e=>(l(),r(`div`,{key:e,class:`c-skeleton__form-field`},[A.value.showLabel?(l(),r(`div`,{key:0,class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:c({width:`${60+e*13%30}px`})},null,4)):n(`v-if`,!0),o[6]||=i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--input`},null,-1)]))),128)),A.value.showActions?(l(),r(`div`,b,o[7]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`100px`}},null,-1),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)])):n(`v-if`,!0)],4)],64)):t.preset===`list`?(l(),r(e,{key:6},[n(` list 预设 `),(l(!0),r(e,null,u(j.value.items,t=>(l(),r(`div`,{key:t,class:`c-skeleton__list-item`},[j.value.showAvatar?(l(),r(`div`,x)):n(`v-if`,!0),i(`div`,S,[o[8]||=i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`30%`}},null,-1),(l(!0),r(e,null,u(j.value.descLines,e=>(l(),r(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===j.value.descLines?`50%`:`90%`})},null,4))),128))])]))),128))],64)):t.preset===`detail`?(l(),r(e,{key:7},[n(` detail 预设 `),i(`div`,C,[N.value.showAvatar?(l(),r(`div`,w,o[9]||=[i(`div`,{class:`c-skeleton__circle c-skeleton__circle--lg c-skeleton__item`},null,-1),i(`div`,{class:`c-skeleton__detail-title`},[i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`120px`}}),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`200px`}})],-1)])):n(`v-if`,!0),i(`div`,T,[(l(!0),r(e,null,u(N.value.fields,t=>(l(),r(`div`,{key:t,class:`c-skeleton__detail-field`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:c({width:`${50+t*17%40}px`})},null,4),i(`div`,E,[(l(!0),r(e,null,u(N.value.valueLines,e=>(l(),r(`div`,{key:`v-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===N.value.valueLines?`60%`:`100%`})},null,4))),128))])]))),128))])])],64)):n(`v-if`,!0)],2)):(l(),r(e,{key:1},[n(` 加载完成后显示插槽内容 `),d(t.$slots,`default`)],2112))}});export{D as t};
+import{Fragment as e,computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,createStaticVNode as a,defineComponent as o,normalizeClass as s,normalizeStyle as c,openBlock as l,renderList as u,renderSlot as d}from"vue";const f={key:0,class:`c-skeleton__card-cover c-skeleton__item`},p={class:`c-skeleton__card-body`},m={class:`c-skeleton__card-desc`},h={key:1,class:`c-skeleton__card-footer`},g={class:`c-skeleton__table`},_={key:0,class:`c-skeleton__table-header`},v={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},y={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},b={key:0,class:`c-skeleton__form-actions`},x={key:0,class:`c-skeleton__circle c-skeleton__circle--sm c-skeleton__item`},S={class:`c-skeleton__list-content`},C={class:`c-skeleton__detail`},w={key:0,class:`c-skeleton__detail-header`},T={class:`c-skeleton__detail-body`},E={class:`c-skeleton__detail-value`},D=o({name:`C_Skeleton`,__name:`index`,props:{preset:{default:`text`},loading:{type:Boolean,default:!0},animation:{type:[String,Boolean],default:`wave`},repeat:{default:3},borderRadius:{default:`4px`},table:{},form:{},list:{},card:{},detail:{}},setup(o){let D=o,O=t(()=>D.animation===!1?`none`:D.animation),k=t(()=>({rows:D.table?.rows??5,cols:D.table?.cols??4,showHeader:D.table?.showHeader??!0,showActions:D.table?.showActions??!0})),A=t(()=>({fields:D.form?.fields??6,cols:D.form?.cols??2,showLabel:D.form?.showLabel??!0,showActions:D.form?.showActions??!0})),j=t(()=>({items:D.list?.items??5,showAvatar:D.list?.showAvatar??!0,descLines:D.list?.descLines??2})),M=t(()=>({showCover:D.card?.showCover??!0,titleLines:D.card?.titleLines??1,descLines:D.card?.descLines??2,showFooter:D.card?.showFooter??!0})),N=t(()=>({fields:D.detail?.fields??6,valueLines:D.detail?.valueLines??1,showAvatar:D.detail?.showAvatar??!0}));return(t,o)=>D.loading?(l(),r(`div`,{key:0,class:s([`c-skeleton`,[`c-skeleton--${O.value}`]])},[n(` text 预设 `),t.preset===`text`?(l(!0),r(e,{key:0},u(t.repeat,e=>(l(),r(`div`,{key:e,class:`c-skeleton__text`},[i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:c({width:e===t.repeat?`60%`:`100%`})},null,4)]))),128)):t.preset===`avatar`?(l(),r(e,{key:1},[n(` avatar 预设 `),o[0]||=a(`<div class="c-skeleton__avatar-group"><div class="c-skeleton__circle c-skeleton__item"></div><div class="c-skeleton__avatar-text"><div class="c-skeleton__line c-skeleton__item" style="width:40%;"></div><div class="c-skeleton__line c-skeleton__item c-skeleton__line--sm" style="width:60%;"></div></div></div>`,1)],64)):t.preset===`image`?(l(),r(e,{key:2},[n(` image 预设 `),(l(!0),r(e,null,u(t.repeat,e=>(l(),r(`div`,{key:e,class:`c-skeleton__image c-skeleton__item`},o[1]||=[i(`div`,{class:`c-skeleton__image-icon`},[i(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,width:`32`,height:`32`},[i(`path`,{d:`M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z`})])],-1)]))),128))],64)):t.preset===`card`?(l(),r(e,{key:3},[n(` card 预设 `),(l(!0),r(e,null,u(t.repeat,t=>(l(),r(`div`,{key:t,class:`c-skeleton__card`},[M.value.showCover?(l(),r(`div`,f)):n(`v-if`,!0),i(`div`,p,[(l(!0),r(e,null,u(M.value.titleLines,e=>(l(),r(`div`,{key:`t-${e}`,class:`c-skeleton__line c-skeleton__item`,style:c({width:e===M.value.titleLines?`50%`:`80%`})},null,4))),128)),i(`div`,m,[(l(!0),r(e,null,u(M.value.descLines,e=>(l(),r(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===M.value.descLines?`70%`:`100%`})},null,4))),128))])]),M.value.showFooter?(l(),r(`div`,h,o[2]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)])):n(`v-if`,!0)]))),128))],64)):t.preset===`table`?(l(),r(e,{key:4},[n(` table 预设 `),i(`div`,g,[k.value.showHeader?(l(),r(`div`,_,[(l(!0),r(e,null,u(k.value.cols,e=>(l(),r(`div`,{key:`h-${e}`,class:`c-skeleton__table-cell`},o[3]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`},null,-1)]))),128)),k.value.showActions?(l(),r(`div`,v,o[4]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`60%`}},null,-1)])):n(`v-if`,!0)])):n(`v-if`,!0),(l(!0),r(e,null,u(k.value.rows,t=>(l(),r(`div`,{key:`r-${t}`,class:`c-skeleton__table-row`},[(l(!0),r(e,null,u(k.value.cols,e=>(l(),r(`div`,{key:`c-${e}`,class:`c-skeleton__table-cell`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:`${Math.floor(50+t*e*17%50)}%`})},null,4)]))),128)),k.value.showActions?(l(),r(`div`,y,o[5]||=[i(`div`,{class:`c-skeleton__action-btns`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}}),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}})],-1)])):n(`v-if`,!0)]))),128))])],64)):t.preset===`form`?(l(),r(e,{key:5},[n(` form 预设 `),i(`div`,{class:`c-skeleton__form`,style:c({"--form-cols":A.value.cols})},[(l(!0),r(e,null,u(A.value.fields,e=>(l(),r(`div`,{key:e,class:`c-skeleton__form-field`},[A.value.showLabel?(l(),r(`div`,{key:0,class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:c({width:`${60+e*13%30}px`})},null,4)):n(`v-if`,!0),o[6]||=i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--input`},null,-1)]))),128)),A.value.showActions?(l(),r(`div`,b,o[7]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`100px`}},null,-1),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)])):n(`v-if`,!0)],4)],64)):t.preset===`list`?(l(),r(e,{key:6},[n(` list 预设 `),(l(!0),r(e,null,u(j.value.items,t=>(l(),r(`div`,{key:t,class:`c-skeleton__list-item`},[j.value.showAvatar?(l(),r(`div`,x)):n(`v-if`,!0),i(`div`,S,[o[8]||=i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`30%`}},null,-1),(l(!0),r(e,null,u(j.value.descLines,e=>(l(),r(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===j.value.descLines?`50%`:`90%`})},null,4))),128))])]))),128))],64)):t.preset===`detail`?(l(),r(e,{key:7},[n(` detail 预设 `),i(`div`,C,[N.value.showAvatar?(l(),r(`div`,w,o[9]||=[i(`div`,{class:`c-skeleton__circle c-skeleton__circle--lg c-skeleton__item`},null,-1),i(`div`,{class:`c-skeleton__detail-title`},[i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`120px`}}),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`200px`}})],-1)])):n(`v-if`,!0),i(`div`,T,[(l(!0),r(e,null,u(N.value.fields,t=>(l(),r(`div`,{key:t,class:`c-skeleton__detail-field`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:c({width:`${50+t*17%40}px`})},null,4),i(`div`,E,[(l(!0),r(e,null,u(N.value.valueLines,e=>(l(),r(`div`,{key:`v-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===N.value.valueLines?`60%`:`100%`})},null,4))),128))])]))),128))])])],64)):n(`v-if`,!0)],2)):(l(),r(e,{key:1},[n(` 加载完成后显示插槽内容 `),d(t.$slots,`default`)],2112))}});export{D as t};
 //# sourceMappingURL=C_Skeleton2.js.map

package/dist/C_Skeleton2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Skeleton2.js","names":["preset","repeat"],"sources":["../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_Skeleton 业务级骨架屏组件\r\n * 提供 8 种预设模式：text / avatar / card / table / form / list / detail / image\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    v-if=\"props.loading\"\r\n    class=\"c-skeleton\"\r\n    :class=\"[`c-skeleton--${animationType}`]\"\r\n  >\r\n    <!-- text 预设 -->\r\n    <template v-if=\"preset === 'text'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__text\"\r\n      >\r\n        <div\r\n          class=\"c-skeleton__line c-skeleton__item\"\r\n          :style=\"{ width: i === repeat ? '60%' : '100%' }\"\r\n        />\r\n      </div>\r\n    </template>\r\n\r\n    <!-- avatar 预设 -->\r\n    <template v-else-if=\"preset === 'avatar'\">\r\n      <div class=\"c-skeleton__avatar-group\">\r\n        <div class=\"c-skeleton__circle c-skeleton__item\" />\r\n        <div class=\"c-skeleton__avatar-text\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 40%\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            style=\"width: 60%\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- image 预设 -->\r\n    <template v-else-if=\"preset === 'image'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__image c-skeleton__item\"\r\n      >\r\n        <div class=\"c-skeleton__image-icon\">\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"currentColor\"\r\n            width=\"32\"\r\n            height=\"32\"\r\n          >\r\n            <path\r\n              d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- card 预设 -->\r\n    <template v-else-if=\"preset === 'card'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__card\"\r\n      >\r\n        <div\r\n          v-if=\"cardConfig.showCover\"\r\n          class=\"c-skeleton__card-cover c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__card-body\">\r\n          <div\r\n            v-for=\"t in cardConfig.titleLines\"\r\n            :key=\"`t-${t}`\"\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\r\n          />\r\n          <div class=\"c-skeleton__card-desc\">\r\n            <div\r\n              v-for=\"d in cardConfig.descLines\"\r\n              :key=\"`d-${d}`\"\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: d === cardConfig.descLines ? '70%' : '100%',\r\n              }\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"cardConfig.showFooter\"\r\n          class=\"c-skeleton__card-footer\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- table 预设 -->\r\n    <template v-else-if=\"preset === 'table'\">\r\n      <div class=\"c-skeleton__table\">\r\n        <div\r\n          v-if=\"tableConfig.showHeader\"\r\n          class=\"c-skeleton__table-header\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`h-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 60%\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-for=\"r in tableConfig.rows\"\r\n          :key=\"`r-${r}`\"\r\n          class=\"c-skeleton__table-row\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`c-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\r\n              }\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div class=\"c-skeleton__action-btns\">\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- form 预设 -->\r\n    <template v-else-if=\"preset === 'form'\">\r\n      <div\r\n        class=\"c-skeleton__form\"\r\n        :style=\"{ '--form-cols': formConfig.cols }\"\r\n      >\r\n        <div\r\n          v-for=\"f in formConfig.fields\"\r\n          :key=\"f\"\r\n          class=\"c-skeleton__form-field\"\r\n        >\r\n          <div\r\n            v-if=\"formConfig.showLabel\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n            :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\r\n          />\r\n        </div>\r\n        <div\r\n          v-if=\"formConfig.showActions\"\r\n          class=\"c-skeleton__form-actions\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 100px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- list 预设 -->\r\n    <template v-else-if=\"preset === 'list'\">\r\n      <div\r\n        v-for=\"i in listConfig.items\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__list-item\"\r\n      >\r\n        <div\r\n          v-if=\"listConfig.showAvatar\"\r\n          class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__list-content\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 30%\"\r\n          />\r\n          <div\r\n            v-for=\"d in listConfig.descLines\"\r\n            :key=\"`d-${d}`\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            :style=\"{\r\n              width: d === listConfig.descLines ? '50%' : '90%',\r\n            }\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- detail 预设 -->\r\n    <template v-else-if=\"preset === 'detail'\">\r\n      <div class=\"c-skeleton__detail\">\r\n        <div\r\n          v-if=\"detailConfig.showAvatar\"\r\n          class=\"c-skeleton__detail-header\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\r\n          />\r\n          <div class=\"c-skeleton__detail-title\">\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item\"\r\n              style=\"width: 120px\"\r\n            />\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 200px\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"c-skeleton__detail-body\">\r\n          <div\r\n            v-for=\"f in detailConfig.fields\"\r\n            :key=\"f\"\r\n            class=\"c-skeleton__detail-field\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n              :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\r\n            />\r\n            <div class=\"c-skeleton__detail-value\">\r\n              <div\r\n                v-for=\"v in detailConfig.valueLines\"\r\n                :key=\"`v-${v}`\"\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n                :style=\"{\r\n                  width: v === detailConfig.valueLines ? '60%' : '100%',\r\n                }\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n  </div>\r\n\r\n  <!-- 加载完成后显示插槽内容 -->\r\n  <slot v-else />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed } from 'vue'\r\n  import type {\r\n    SkeletonProps,\r\n    SkeletonTableConfig,\r\n    SkeletonFormConfig,\r\n    SkeletonListConfig,\r\n    SkeletonCardConfig,\r\n    SkeletonDetailConfig,\r\n  } from './types'\r\n\r\n  defineOptions({ name: 'C_Skeleton' })\r\n\r\n  const props = withDefaults(defineProps<SkeletonProps>(), {\r\n    preset: 'text',\r\n    loading: true,\r\n    animation: 'wave',\r\n    repeat: 3,\r\n    borderRadius: '4px',\r\n  })\r\n\r\n  const animationType = computed(() =>\r\n    props.animation === false ? 'none' : props.animation\r\n  )\r\n\r\n  const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\r\n    rows: props.table?.rows ?? 5,\r\n    cols: props.table?.cols ?? 4,\r\n    showHeader: props.table?.showHeader ?? true,\r\n    showActions: props.table?.showActions ?? true,\r\n  }))\r\n\r\n  const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\r\n    fields: props.form?.fields ?? 6,\r\n    cols: props.form?.cols ?? 2,\r\n    showLabel: props.form?.showLabel ?? true,\r\n    showActions: props.form?.showActions ?? true,\r\n  }))\r\n\r\n  const listConfig = computed<Required<SkeletonListConfig>>(() => ({\r\n    items: props.list?.items ?? 5,\r\n    showAvatar: props.list?.showAvatar ?? true,\r\n    descLines: props.list?.descLines ?? 2,\r\n  }))\r\n\r\n  const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\r\n    showCover: props.card?.showCover ?? true,\r\n    titleLines: props.card?.titleLines ?? 1,\r\n    descLines: props.card?.descLines ?? 2,\r\n    showFooter: props.card?.showFooter ?? true,\r\n  }))\r\n\r\n  const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\r\n    fields: props.detail?.fields ?? 6,\r\n    valueLines: props.detail?.valueLines ?? 1,\r\n    showAvatar: props.detail?.showAvatar ?? true,\r\n  }))\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_Skeleton 业务级骨架屏组件\r\n * 提供 8 种预设模式：text / avatar / card / table / form / list / detail / image\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    v-if=\"props.loading\"\r\n    class=\"c-skeleton\"\r\n    :class=\"[`c-skeleton--${animationType}`]\"\r\n  >\r\n    <!-- text 预设 -->\r\n    <template v-if=\"preset === 'text'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__text\"\r\n      >\r\n        <div\r\n          class=\"c-skeleton__line c-skeleton__item\"\r\n          :style=\"{ width: i === repeat ? '60%' : '100%' }\"\r\n        />\r\n      </div>\r\n    </template>\r\n\r\n    <!-- avatar 预设 -->\r\n    <template v-else-if=\"preset === 'avatar'\">\r\n      <div class=\"c-skeleton__avatar-group\">\r\n        <div class=\"c-skeleton__circle c-skeleton__item\" />\r\n        <div class=\"c-skeleton__avatar-text\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 40%\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            style=\"width: 60%\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- image 预设 -->\r\n    <template v-else-if=\"preset === 'image'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__image c-skeleton__item\"\r\n      >\r\n        <div class=\"c-skeleton__image-icon\">\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"currentColor\"\r\n            width=\"32\"\r\n            height=\"32\"\r\n          >\r\n            <path\r\n              d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- card 预设 -->\r\n    <template v-else-if=\"preset === 'card'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__card\"\r\n      >\r\n        <div\r\n          v-if=\"cardConfig.showCover\"\r\n          class=\"c-skeleton__card-cover c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__card-body\">\r\n          <div\r\n            v-for=\"t in cardConfig.titleLines\"\r\n            :key=\"`t-${t}`\"\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\r\n          />\r\n          <div class=\"c-skeleton__card-desc\">\r\n            <div\r\n              v-for=\"d in cardConfig.descLines\"\r\n              :key=\"`d-${d}`\"\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: d === cardConfig.descLines ? '70%' : '100%',\r\n              }\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"cardConfig.showFooter\"\r\n          class=\"c-skeleton__card-footer\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- table 预设 -->\r\n    <template v-else-if=\"preset === 'table'\">\r\n      <div class=\"c-skeleton__table\">\r\n        <div\r\n          v-if=\"tableConfig.showHeader\"\r\n          class=\"c-skeleton__table-header\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`h-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 60%\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-for=\"r in tableConfig.rows\"\r\n          :key=\"`r-${r}`\"\r\n          class=\"c-skeleton__table-row\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`c-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\r\n              }\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div class=\"c-skeleton__action-btns\">\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- form 预设 -->\r\n    <template v-else-if=\"preset === 'form'\">\r\n      <div\r\n        class=\"c-skeleton__form\"\r\n        :style=\"{ '--form-cols': formConfig.cols }\"\r\n      >\r\n        <div\r\n          v-for=\"f in formConfig.fields\"\r\n          :key=\"f\"\r\n          class=\"c-skeleton__form-field\"\r\n        >\r\n          <div\r\n            v-if=\"formConfig.showLabel\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n            :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\r\n          />\r\n        </div>\r\n        <div\r\n          v-if=\"formConfig.showActions\"\r\n          class=\"c-skeleton__form-actions\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 100px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- list 预设 -->\r\n    <template v-else-if=\"preset === 'list'\">\r\n      <div\r\n        v-for=\"i in listConfig.items\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__list-item\"\r\n      >\r\n        <div\r\n          v-if=\"listConfig.showAvatar\"\r\n          class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__list-content\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 30%\"\r\n          />\r\n          <div\r\n            v-for=\"d in listConfig.descLines\"\r\n            :key=\"`d-${d}`\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            :style=\"{\r\n              width: d === listConfig.descLines ? '50%' : '90%',\r\n            }\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- detail 预设 -->\r\n    <template v-else-if=\"preset === 'detail'\">\r\n      <div class=\"c-skeleton__detail\">\r\n        <div\r\n          v-if=\"detailConfig.showAvatar\"\r\n          class=\"c-skeleton__detail-header\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\r\n          />\r\n          <div class=\"c-skeleton__detail-title\">\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item\"\r\n              style=\"width: 120px\"\r\n            />\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 200px\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"c-skeleton__detail-body\">\r\n          <div\r\n            v-for=\"f in detailConfig.fields\"\r\n            :key=\"f\"\r\n            class=\"c-skeleton__detail-field\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n              :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\r\n            />\r\n            <div class=\"c-skeleton__detail-value\">\r\n              <div\r\n                v-for=\"v in detailConfig.valueLines\"\r\n                :key=\"`v-${v}`\"\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n                :style=\"{\r\n                  width: v === detailConfig.valueLines ? '60%' : '100%',\r\n                }\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n  </div>\r\n\r\n  <!-- 加载完成后显示插槽内容 -->\r\n  <slot v-else />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed } from 'vue'\r\n  import type {\r\n    SkeletonProps,\r\n    SkeletonTableConfig,\r\n    SkeletonFormConfig,\r\n    SkeletonListConfig,\r\n    SkeletonCardConfig,\r\n    SkeletonDetailConfig,\r\n  } from './types'\r\n\r\n  defineOptions({ name: 'C_Skeleton' })\r\n\r\n  const props = withDefaults(defineProps<SkeletonProps>(), {\r\n    preset: 'text',\r\n    loading: true,\r\n    animation: 'wave',\r\n    repeat: 3,\r\n    borderRadius: '4px',\r\n  })\r\n\r\n  const animationType = computed(() =>\r\n    props.animation === false ? 'none' : props.animation\r\n  )\r\n\r\n  const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\r\n    rows: props.table?.rows ?? 5,\r\n    cols: props.table?.cols ?? 4,\r\n    showHeader: props.table?.showHeader ?? true,\r\n    showActions: props.table?.showActions ?? true,\r\n  }))\r\n\r\n  const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\r\n    fields: props.form?.fields ?? 6,\r\n    cols: props.form?.cols ?? 2,\r\n    showLabel: props.form?.showLabel ?? true,\r\n    showActions: props.form?.showActions ?? true,\r\n  }))\r\n\r\n  const listConfig = computed<Required<SkeletonListConfig>>(() => ({\r\n    items: props.list?.items ?? 5,\r\n    showAvatar: props.list?.showAvatar ?? true,\r\n    descLines: props.list?.descLines ?? 2,\r\n  }))\r\n\r\n  const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\r\n    showCover: props.card?.showCover ?? true,\r\n    titleLines: props.card?.titleLines ?? 1,\r\n    descLines: props.card?.descLines ?? 2,\r\n    showFooter: props.card?.showFooter ?? true,\r\n  }))\r\n\r\n  const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\r\n    fields: props.detail?.fields ?? 6,\r\n    valueLines: props.detail?.valueLines ?? 1,\r\n    showAvatar: props.detail?.showAvatar ?? true,\r\n  }))\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-03-06\r\n * @Description: C_Skeleton 业务级骨架屏组件\r\n * 提供 8 种预设模式：text / avatar / card / table / form / list / detail / image\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\r\n-->\r\n<template>\r\n  <div\r\n    v-if=\"props.loading\"\r\n    class=\"c-skeleton\"\r\n    :class=\"[`c-skeleton--${animationType}`]\"\r\n  >\r\n    <!-- text 预设 -->\r\n    <template v-if=\"preset === 'text'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__text\"\r\n      >\r\n        <div\r\n          class=\"c-skeleton__line c-skeleton__item\"\r\n          :style=\"{ width: i === repeat ? '60%' : '100%' }\"\r\n        />\r\n      </div>\r\n    </template>\r\n\r\n    <!-- avatar 预设 -->\r\n    <template v-else-if=\"preset === 'avatar'\">\r\n      <div class=\"c-skeleton__avatar-group\">\r\n        <div class=\"c-skeleton__circle c-skeleton__item\" />\r\n        <div class=\"c-skeleton__avatar-text\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 40%\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            style=\"width: 60%\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- image 预设 -->\r\n    <template v-else-if=\"preset === 'image'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__image c-skeleton__item\"\r\n      >\r\n        <div class=\"c-skeleton__image-icon\">\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"currentColor\"\r\n            width=\"32\"\r\n            height=\"32\"\r\n          >\r\n            <path\r\n              d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- card 预设 -->\r\n    <template v-else-if=\"preset === 'card'\">\r\n      <div\r\n        v-for=\"i in repeat\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__card\"\r\n      >\r\n        <div\r\n          v-if=\"cardConfig.showCover\"\r\n          class=\"c-skeleton__card-cover c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__card-body\">\r\n          <div\r\n            v-for=\"t in cardConfig.titleLines\"\r\n            :key=\"`t-${t}`\"\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\r\n          />\r\n          <div class=\"c-skeleton__card-desc\">\r\n            <div\r\n              v-for=\"d in cardConfig.descLines\"\r\n              :key=\"`d-${d}`\"\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: d === cardConfig.descLines ? '70%' : '100%',\r\n              }\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-if=\"cardConfig.showFooter\"\r\n          class=\"c-skeleton__card-footer\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- table 预设 -->\r\n    <template v-else-if=\"preset === 'table'\">\r\n      <div class=\"c-skeleton__table\">\r\n        <div\r\n          v-if=\"tableConfig.showHeader\"\r\n          class=\"c-skeleton__table-header\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`h-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 60%\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div\r\n          v-for=\"r in tableConfig.rows\"\r\n          :key=\"`r-${r}`\"\r\n          class=\"c-skeleton__table-row\"\r\n        >\r\n          <div\r\n            v-for=\"c in tableConfig.cols\"\r\n            :key=\"`c-${c}`\"\r\n            class=\"c-skeleton__table-cell\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              :style=\"{\r\n                width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\r\n              }\"\r\n            />\r\n          </div>\r\n          <div\r\n            v-if=\"tableConfig.showActions\"\r\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\r\n          >\r\n            <div class=\"c-skeleton__action-btns\">\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n              <div\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\r\n                style=\"width: 40px\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- form 预设 -->\r\n    <template v-else-if=\"preset === 'form'\">\r\n      <div\r\n        class=\"c-skeleton__form\"\r\n        :style=\"{ '--form-cols': formConfig.cols }\"\r\n      >\r\n        <div\r\n          v-for=\"f in formConfig.fields\"\r\n          :key=\"f\"\r\n          class=\"c-skeleton__form-field\"\r\n        >\r\n          <div\r\n            v-if=\"formConfig.showLabel\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n            :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\r\n          />\r\n        </div>\r\n        <div\r\n          v-if=\"formConfig.showActions\"\r\n          class=\"c-skeleton__form-actions\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 100px\"\r\n          />\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\r\n            style=\"width: 80px\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- list 预设 -->\r\n    <template v-else-if=\"preset === 'list'\">\r\n      <div\r\n        v-for=\"i in listConfig.items\"\r\n        :key=\"i\"\r\n        class=\"c-skeleton__list-item\"\r\n      >\r\n        <div\r\n          v-if=\"listConfig.showAvatar\"\r\n          class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\r\n        />\r\n        <div class=\"c-skeleton__list-content\">\r\n          <div\r\n            class=\"c-skeleton__line c-skeleton__item\"\r\n            style=\"width: 30%\"\r\n          />\r\n          <div\r\n            v-for=\"d in listConfig.descLines\"\r\n            :key=\"`d-${d}`\"\r\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n            :style=\"{\r\n              width: d === listConfig.descLines ? '50%' : '90%',\r\n            }\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </template>\r\n\r\n    <!-- detail 预设 -->\r\n    <template v-else-if=\"preset === 'detail'\">\r\n      <div class=\"c-skeleton__detail\">\r\n        <div\r\n          v-if=\"detailConfig.showAvatar\"\r\n          class=\"c-skeleton__detail-header\"\r\n        >\r\n          <div\r\n            class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\r\n          />\r\n          <div class=\"c-skeleton__detail-title\">\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item\"\r\n              style=\"width: 120px\"\r\n            />\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n              style=\"width: 200px\"\r\n            />\r\n          </div>\r\n        </div>\r\n        <div class=\"c-skeleton__detail-body\">\r\n          <div\r\n            v-for=\"f in detailConfig.fields\"\r\n            :key=\"f\"\r\n            class=\"c-skeleton__detail-field\"\r\n          >\r\n            <div\r\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\r\n              :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\r\n            />\r\n            <div class=\"c-skeleton__detail-value\">\r\n              <div\r\n                v-for=\"v in detailConfig.valueLines\"\r\n                :key=\"`v-${v}`\"\r\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\r\n                :style=\"{\r\n                  width: v === detailConfig.valueLines ? '60%' : '100%',\r\n                }\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </template>\r\n  </div>\r\n\r\n  <!-- 加载完成后显示插槽内容 -->\r\n  <slot v-else />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed } from 'vue'\r\n  import type {\r\n    SkeletonProps,\r\n    SkeletonTableConfig,\r\n    SkeletonFormConfig,\r\n    SkeletonListConfig,\r\n    SkeletonCardConfig,\r\n    SkeletonDetailConfig,\r\n  } from './types'\r\n\r\n  defineOptions({ name: 'C_Skeleton' })\r\n\r\n  const props = withDefaults(defineProps<SkeletonProps>(), {\r\n    preset: 'text',\r\n    loading: true,\r\n    animation: 'wave',\r\n    repeat: 3,\r\n    borderRadius: '4px',\r\n  })\r\n\r\n  const animationType = computed(() =>\r\n    props.animation === false ? 'none' : props.animation\r\n  )\r\n\r\n  const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\r\n    rows: props.table?.rows ?? 5,\r\n    cols: props.table?.cols ?? 4,\r\n    showHeader: props.table?.showHeader ?? true,\r\n    showActions: props.table?.showActions ?? true,\r\n  }))\r\n\r\n  const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\r\n    fields: props.form?.fields ?? 6,\r\n    cols: props.form?.cols ?? 2,\r\n    showLabel: props.form?.showLabel ?? true,\r\n    showActions: props.form?.showActions ?? true,\r\n  }))\r\n\r\n  const listConfig = computed<Required<SkeletonListConfig>>(() => ({\r\n    items: props.list?.items ?? 5,\r\n    showAvatar: props.list?.showAvatar ?? true,\r\n    descLines: props.list?.descLines ?? 2,\r\n  }))\r\n\r\n  const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\r\n    showCover: props.card?.showCover ?? true,\r\n    titleLines: props.card?.titleLines ?? 1,\r\n    descLines: props.card?.descLines ?? 2,\r\n    showFooter: props.card?.showFooter ?? true,\r\n  }))\r\n\r\n  const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\r\n    fields: props.detail?.fields ?? 6,\r\n    valueLines: props.detail?.valueLines ?? 1,\r\n    showAvatar: props.detail?.showAvatar ?? true,\r\n  }))\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_Skeleton2.js","names":[],"sources":["../src/components/C_Skeleton/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式：text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n  <div\n    v-if=\"props.loading\"\n    class=\"c-skeleton\"\n    :class=\"[`c-skeleton--${animationType}`]\"\n  >\n    <!-- text 预设 -->\n    <template v-if=\"preset === 'text'\">\n      <div\n        v-for=\"i in repeat\"\n        :key=\"i\"\n        class=\"c-skeleton__text\"\n      >\n        <div\n          class=\"c-skeleton__line c-skeleton__item\"\n          :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n        />\n      </div>\n    </template>\n\n    <!-- avatar 预设 -->\n    <template v-else-if=\"preset === 'avatar'\">\n      <div class=\"c-skeleton__avatar-group\">\n        <div class=\"c-skeleton__circle c-skeleton__item\" />\n        <div class=\"c-skeleton__avatar-text\">\n          <div\n            class=\"c-skeleton__line c-skeleton__item\"\n            style=\"width: 40%\"\n          />\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n            style=\"width: 60%\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- image 预设 -->\n    <template v-else-if=\"preset === 'image'\">\n      <div\n        v-for=\"i in repeat\"\n        :key=\"i\"\n        class=\"c-skeleton__image c-skeleton__item\"\n      >\n        <div class=\"c-skeleton__image-icon\">\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            width=\"32\"\n            height=\"32\"\n          >\n            <path\n              d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n            />\n          </svg>\n        </div>\n      </div>\n    </template>\n\n    <!-- card 预设 -->\n    <template v-else-if=\"preset === 'card'\">\n      <div\n        v-for=\"i in repeat\"\n        :key=\"i\"\n        class=\"c-skeleton__card\"\n      >\n        <div\n          v-if=\"cardConfig.showCover\"\n          class=\"c-skeleton__card-cover c-skeleton__item\"\n        />\n        <div class=\"c-skeleton__card-body\">\n          <div\n            v-for=\"t in cardConfig.titleLines\"\n            :key=\"`t-${t}`\"\n            class=\"c-skeleton__line c-skeleton__item\"\n            :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n          />\n          <div class=\"c-skeleton__card-desc\">\n            <div\n              v-for=\"d in cardConfig.descLines\"\n              :key=\"`d-${d}`\"\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n              :style=\"{\n                width: d === cardConfig.descLines ? '70%' : '100%',\n              }\"\n            />\n          </div>\n        </div>\n        <div\n          v-if=\"cardConfig.showFooter\"\n          class=\"c-skeleton__card-footer\"\n        >\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n            style=\"width: 80px\"\n          />\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n            style=\"width: 80px\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- table 预设 -->\n    <template v-else-if=\"preset === 'table'\">\n      <div class=\"c-skeleton__table\">\n        <div\n          v-if=\"tableConfig.showHeader\"\n          class=\"c-skeleton__table-header\"\n        >\n          <div\n            v-for=\"c in tableConfig.cols\"\n            :key=\"`h-${c}`\"\n            class=\"c-skeleton__table-cell\"\n          >\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n            />\n          </div>\n          <div\n            v-if=\"tableConfig.showActions\"\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n          >\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n              style=\"width: 60%\"\n            />\n          </div>\n        </div>\n        <div\n          v-for=\"r in tableConfig.rows\"\n          :key=\"`r-${r}`\"\n          class=\"c-skeleton__table-row\"\n        >\n          <div\n            v-for=\"c in tableConfig.cols\"\n            :key=\"`c-${c}`\"\n            class=\"c-skeleton__table-cell\"\n          >\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n              :style=\"{\n                width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n              }\"\n            />\n          </div>\n          <div\n            v-if=\"tableConfig.showActions\"\n            class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n          >\n            <div class=\"c-skeleton__action-btns\">\n              <div\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n                style=\"width: 40px\"\n              />\n              <div\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n                style=\"width: 40px\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n\n    <!-- form 预设 -->\n    <template v-else-if=\"preset === 'form'\">\n      <div\n        class=\"c-skeleton__form\"\n        :style=\"{ '--form-cols': formConfig.cols }\"\n      >\n        <div\n          v-for=\"f in formConfig.fields\"\n          :key=\"f\"\n          class=\"c-skeleton__form-field\"\n        >\n          <div\n            v-if=\"formConfig.showLabel\"\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n            :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n          />\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n          />\n        </div>\n        <div\n          v-if=\"formConfig.showActions\"\n          class=\"c-skeleton__form-actions\"\n        >\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n            style=\"width: 100px\"\n          />\n          <div\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n            style=\"width: 80px\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- list 预设 -->\n    <template v-else-if=\"preset === 'list'\">\n      <div\n        v-for=\"i in listConfig.items\"\n        :key=\"i\"\n        class=\"c-skeleton__list-item\"\n      >\n        <div\n          v-if=\"listConfig.showAvatar\"\n          class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n        />\n        <div class=\"c-skeleton__list-content\">\n          <div\n            class=\"c-skeleton__line c-skeleton__item\"\n            style=\"width: 30%\"\n          />\n          <div\n            v-for=\"d in listConfig.descLines\"\n            :key=\"`d-${d}`\"\n            class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n            :style=\"{\n              width: d === listConfig.descLines ? '50%' : '90%',\n            }\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- detail 预设 -->\n    <template v-else-if=\"preset === 'detail'\">\n      <div class=\"c-skeleton__detail\">\n        <div\n          v-if=\"detailConfig.showAvatar\"\n          class=\"c-skeleton__detail-header\"\n        >\n          <div\n            class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n          />\n          <div class=\"c-skeleton__detail-title\">\n            <div\n              class=\"c-skeleton__line c-skeleton__item\"\n              style=\"width: 120px\"\n            />\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n              style=\"width: 200px\"\n            />\n          </div>\n        </div>\n        <div class=\"c-skeleton__detail-body\">\n          <div\n            v-for=\"f in detailConfig.fields\"\n            :key=\"f\"\n            class=\"c-skeleton__detail-field\"\n          >\n            <div\n              class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n              :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n            />\n            <div class=\"c-skeleton__detail-value\">\n              <div\n                v-for=\"v in detailConfig.valueLines\"\n                :key=\"`v-${v}`\"\n                class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n                :style=\"{\n                  width: v === detailConfig.valueLines ? '60%' : '100%',\n                }\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </div>\n\n  <!-- 加载完成后显示插槽内容 -->\n  <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n  import { computed } from 'vue'\n  import type {\n    SkeletonProps,\n    SkeletonTableConfig,\n    SkeletonFormConfig,\n    SkeletonListConfig,\n    SkeletonCardConfig,\n    SkeletonDetailConfig,\n  } from './types'\n\n  defineOptions({ name: 'C_Skeleton' })\n\n  const props = withDefaults(defineProps<SkeletonProps>(), {\n    preset: 'text',\n    loading: true,\n    animation: 'wave',\n    repeat: 3,\n    borderRadius: '4px',\n  })\n\n  const animationType = computed(() =>\n    props.animation === false ? 'none' : props.animation\n  )\n\n  const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n    rows: props.table?.rows ?? 5,\n    cols: props.table?.cols ?? 4,\n    showHeader: props.table?.showHeader ?? true,\n    showActions: props.table?.showActions ?? true,\n  }))\n\n  const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n    fields: props.form?.fields ?? 6,\n    cols: props.form?.cols ?? 2,\n    showLabel: props.form?.showLabel ?? true,\n    showActions: props.form?.showActions ?? true,\n  }))\n\n  const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n    items: props.list?.items ?? 5,\n    showAvatar: props.list?.showAvatar ?? true,\n    descLines: props.list?.descLines ?? 2,\n  }))\n\n  const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n    showCover: props.card?.showCover ?? true,\n    titleLines: props.card?.titleLines ?? 1,\n    descLines: props.card?.descLines ?? 2,\n    showFooter: props.card?.showFooter ?? true,\n  }))\n\n  const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n    fields: props.detail?.fields ?? 6,\n    valueLines: props.detail?.valueLines ?? 1,\n    showAvatar: props.detail?.showAvatar ?? true,\n  }))\n</script>\n\n<style lang=\"scss\">\n  @use './index.scss';\n</style>\n"],"mappings":"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"}