@robot-admin/naive-ui-components 0.3.0

package/dist/C_Signature2.js.map

@@ -0,0 +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\nexport function useSignatureExport(options: UseSignatureExportOptions) {\r\n  const { canvasRef, watermark } = options\r\n\r\n  const getWatermarkPosition = (\r\n    canvas: HTMLCanvasElement,\r\n    textWidth: number,\r\n    fontSize: number,\r\n    position: string\r\n  ): { x: number; y: number } => {\r\n    const padding = 10\r\n    const positions = {\r\n      'top-left': { x: padding, y: fontSize + padding },\r\n      'top-right': { x: canvas.width - textWidth - padding, y: fontSize + padding },\r\n      'bottom-left': { x: padding, y: canvas.height - padding },\r\n      'bottom-right': { x: canvas.width - textWidth - padding, y: canvas.height - padding },\r\n    }\r\n    return positions[position as keyof typeof positions] || positions['bottom-right']\r\n  }\r\n\r\n  const drawWatermark = (canvas: HTMLCanvasElement, text: string): void => {\r\n    const ctx = canvas.getContext('2d')\r\n    if (!ctx || !watermark?.value?.show) return\r\n    const config = {\r\n      fontSize: watermark.value.fontSize || 12,\r\n      color: watermark.value.color || '#999999',\r\n      position: watermark.value.position || 'bottom-right',\r\n    }\r\n    ctx.save()\r\n    ctx.font = `${config.fontSize}px Arial`\r\n    ctx.fillStyle = config.color\r\n    ctx.textBaseline = 'bottom'\r\n    const textWidth = ctx.measureText(text).width\r\n    const { x, y } = getWatermarkPosition(canvas, textWidth, config.fontSize, config.position)\r\n    ctx.fillText(text, x, y)\r\n    ctx.restore()\r\n  }\r\n\r\n  const createTempCanvas = (\r\n    sourceCanvas: HTMLCanvasElement,\r\n    includeBackground: boolean,\r\n    backgroundColor: string\r\n  ) => {\r\n    const tempCanvas = document.createElement('canvas')\r\n    tempCanvas.width = sourceCanvas.width\r\n    tempCanvas.height = sourceCanvas.height\r\n    const tempCtx = tempCanvas.getContext('2d')\r\n    if (!tempCtx) throw new Error('无法创建临时 Canvas')\r\n    if (includeBackground) {\r\n      tempCtx.fillStyle = backgroundColor\r\n      tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height)\r\n    }\r\n    tempCtx.drawImage(sourceCanvas, 0, 0)\r\n    return { canvas: tempCanvas, ctx: tempCtx }\r\n  }\r\n\r\n  const prepareExportCanvas = (canvas: HTMLCanvasElement, options: ExportOptions): HTMLCanvasElement => {\r\n    const { includeBackground = false, backgroundColor = '#FFFFFF', includeWatermark = false } = options\r\n    const { canvas: tempCanvas } = createTempCanvas(canvas, includeBackground, backgroundColor)\r\n    if (includeWatermark && watermark?.value?.show && watermark.value.text) {\r\n      drawWatermark(tempCanvas, watermark.value.text)\r\n    }\r\n    return tempCanvas\r\n  }\r\n\r\n  const exportToBlob = (canvas: HTMLCanvasElement, quality: number): Promise<Blob> => {\r\n    return new Promise<Blob>((resolve, reject) => {\r\n      canvas.toBlob(\r\n        blob => (blob ? resolve(blob) : reject(new Error('导出失败'))),\r\n        'image/png',\r\n        quality\r\n      )\r\n    })\r\n  }\r\n\r\n  const exportSignature = async (options: ExportOptions = {}): Promise<string | Blob> => {\r\n    const canvas = canvasRef.value\r\n    if (!canvas) throw new Error('Canvas 未初始化')\r\n    const { format = 'png', quality = 0.92 } = options\r\n    if (format === 'svg') {\r\n      return 'data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\"><text>SVG export placeholder</text></svg>'\r\n    }\r\n    const tempCanvas = prepareExportCanvas(canvas, options)\r\n    if (format === 'blob') return exportToBlob(tempCanvas, quality)\r\n    const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png'\r\n    return tempCanvas.toDataURL(mimeType, quality)\r\n  }\r\n\r\n  const download = async (filename = 'signature', options: ExportOptions = {}): Promise<void> => {\r\n    const format = options.format || 'png'\r\n    const result = await exportSignature({ ...options, format })\r\n    if (result instanceof Blob) {\r\n      const url = URL.createObjectURL(result)\r\n      const link = document.createElement('a')\r\n      link.href = url\r\n      link.download = `${filename}.${format}`\r\n      link.click()\r\n      URL.revokeObjectURL(url)\r\n    } else if (typeof result === 'string') {\r\n      const link = document.createElement('a')\r\n      link.href = result\r\n      link.download = `${filename}.${format}`\r\n      link.click()\r\n    }\r\n  }\r\n\r\n  const loadImage = async (imageUrl: string): Promise<void> => {\r\n    const canvas = canvasRef.value\r\n    if (!canvas) throw new Error('Canvas 未初始化')\r\n    const ctx = canvas.getContext('2d')\r\n    if (!ctx) throw new Error('无法获取 Canvas 上下文')\r\n    return new Promise((resolve, reject) => {\r\n      const img = new Image()\r\n      img.crossOrigin = 'anonymous'\r\n      img.onload = () => {\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height)\r\n        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)\r\n        resolve()\r\n      }\r\n      img.onerror = () => reject(new Error(`图片加载失败: ${imageUrl}`))\r\n      img.src = imageUrl\r\n    })\r\n  }\r\n\r\n  return { exportSignature, download, loadImage }\r\n}\r\n","import type { EraserConfig, PenConfig, WatermarkConfig } from \"./types\";\r\n\r\nexport const DEFAULT_PEN_CONFIG: PenConfig = {\r\n  color: \"#000000\",\r\n  width: 2,\r\n  opacity: 1,\r\n};\r\n\r\nexport const DEFAULT_ERASER_CONFIG: EraserConfig = { size: 20 };\r\n\r\nexport const DEFAULT_WATERMARK_CONFIG: WatermarkConfig = {\r\n  show: false,\r\n  text: \"\",\r\n  fontSize: 12,\r\n  color: \"#999999\",\r\n  position: \"bottom-right\",\r\n};\r\n\r\nexport const PRESET_COLORS = [\r\n  \"#000000\",\r\n  \"#FF0000\",\r\n  \"#0000FF\",\r\n  \"#00AA00\",\r\n  \"#FF6600\",\r\n  \"#9900FF\",\r\n];\r\n\r\nexport const PRESET_WIDTHS = [1, 2, 3, 5, 8];\r\n\r\nexport const EXPORT_FORMAT_OPTIONS = [\r\n  { label: \"PNG\", value: \"png\" },\r\n  { label: \"JPEG\", value: \"jpeg\" },\r\n  { label: \"SVG\", value: \"svg\" },\r\n  { label: \"Blob\", value: \"blob\" },\r\n] as const;\r\n\r\nexport const WATERMARK_POSITION_OPTIONS = [\r\n  { label: \"左上\", value: \"top-left\" },\r\n  { label: \"右上\", value: \"top-right\" },\r\n  { label: \"左下\", value: \"bottom-left\" },\r\n  { label: \"右下\", value: \"bottom-right\" },\r\n] as const;\r\n","<!--\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","<!--\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":";;;;;;AAmBA,SAAgB,mBAAmB,SAAoC;CACrE,MAAM,EACJ,WACA,WACA,MACA,UACA,kBACA,aACA,cACE;CAEJ,MAAM,YAAY,IAAI,MAAM;CAC5B,MAAM,gBAAgB,IAAsB,EAAE,CAAC;CAC/C,IAAI,MAAuC;CAE3C,MAAM,mBAAmB;EACvB,MAAM,SAAS,UAAU;AACzB,MAAI,CAAC,OAAQ;AACb,QAAM,OAAO,WAAW,MAAM,EAAE,oBAAoB,MAAM,CAAC;AAC3D,MAAI,CAAC,IAAK;EACV,MAAM,MAAM,OAAO,oBAAoB;EACvC,MAAM,OAAO,OAAO,uBAAuB;AAC3C,SAAO,QAAQ,KAAK,QAAQ;AAC5B,SAAO,SAAS,KAAK,SAAS;AAC9B,SAAO,MAAM,QAAQ,GAAG,KAAK,MAAM;AACnC,SAAO,MAAM,SAAS,GAAG,KAAK,OAAO;AACrC,MAAI,MAAM,KAAK,IAAI;AACnB,MAAI,UAAU;AACd,MAAI,WAAW;;CAGjB,MAAM,qBAAqB,MAA+C;EACxE,MAAM,SAAS,UAAU;AACzB,MAAI,CAAC,OAAQ,QAAO;GAAE,GAAG;GAAG,GAAG;GAAG;EAClC,MAAM,OAAO,OAAO,uBAAuB;EAC3C,IAAI;EACJ,IAAI;AACJ,MAAI,aAAa,KAAK,EAAE,QAAQ,SAAS,EACvC,EAAC,CAAE,SAAS,WAAY,EAAE,QAAQ;WACzB,aAAa,EACtB,EAAC,CAAE,SAAS,WAAY;MAExB,QAAO;GAAE,GAAG;GAAG,GAAG;GAAG;AAEvB,SAAO;GACL,GAAG,UAAU,KAAK;GAClB,GAAG,UAAU,KAAK;GAClB,WAAW,KAAK,KAAK;GACtB;;CAGH,MAAM,cACJ,MACA,IACA,QACA,aAAa,UACV;AACH,MAAI,CAAC,IAAK;AACV,MAAI,MAAM;AACV,MAAI,YAAY;AACd,OAAI,2BAA2B;AAC/B,OAAI,YAAY;SACX;AACL,OAAI,2BAA2B;AAC/B,OAAI,cAAc,OAAO;AACzB,OAAI,YAAY,OAAO;AACvB,OAAI,cAAc,OAAO;;AAE3B,MAAI,WAAW;AACf,MAAI,OAAO,KAAK,GAAG,KAAK,EAAE;AAC1B,MAAI,OAAO,GAAG,GAAG,GAAG,EAAE;AACtB,MAAI,QAAQ;AACZ,MAAI,SAAS;;CAGf,MAAM,gBAAgB,MAA+B;AACnD,MAAI,SAAS,MAAO;AACpB,IAAE,gBAAgB;AAClB,YAAU,QAAQ;AAClB,gBAAc,QAAQ,EAAE;EACxB,MAAM,QAAQ,kBAAkB,EAAE;AAClC,gBAAc,MAAM,KAAK,MAAM;AAC/B,eAAa;;CAGf,MAAM,QAAQ,MAA+B;AAC3C,MAAI,CAAC,UAAU,SAAS,SAAS,MAAO;AACxC,IAAE,gBAAgB;EAClB,MAAM,QAAQ,kBAAkB,EAAE;EAClC,MAAM,YAAY,cAAc,MAAM,cAAc,MAAM,SAAS;AACnE,MAAI,UACF,YAAW,WAAW,OAAO,UAAU,OAAO,KAAK,UAAU,SAAS;AAExE,gBAAc,MAAM,KAAK,MAAM;AAC/B,YAAU,MAAM;;CAGlB,MAAM,cAAc,MAA+B;AACjD,MAAI,CAAC,UAAU,SAAS,SAAS,MAAO;AACxC,IAAE,gBAAgB;AAClB,YAAU,QAAQ;AAClB,MAAI,cAAc,MAAM,SAAS,GAAG;AAQlC,oBAPgC;IAC9B,QAAQ,CAAC,GAAG,cAAc,MAAM;IAChC,OAAO,UAAU,MAAM;IACvB,OAAO,UAAU,MAAM;IACvB,SAAS,UAAU,MAAM;IACzB,MAAM,KAAK;IACZ,CACuB;AACxB,iBAAc,QAAQ,EAAE;;;CAI5B,MAAM,iBAAiB,YAA+B;AACpD,MAAI,CAAC,OAAO,CAAC,UAAU,MAAO;EAC9B,MAAM,SAAS,UAAU;AACzB,MAAI,UAAU,GAAG,GAAG,OAAO,OAAO,OAAO,OAAO;AAChD,UAAQ,SAAS,WAAW;AAC1B,QAAK,IAAI,IAAI,GAAG,IAAI,OAAO,OAAO,QAAQ,IACxC,YACE,OAAO,OAAO,IAAI,IAClB,OAAO,OAAO,IACd;IAAE,OAAO,OAAO;IAAO,OAAO,OAAO;IAAO,SAAS,OAAO;IAAS,EACrE,OAAO,SAAS,SACjB;IAEH;;CAGJ,MAAM,oBAAoB;AACxB,MAAI,CAAC,OAAO,CAAC,UAAU,MAAO;AAC9B,MAAI,UAAU,GAAG,GAAG,UAAU,MAAM,OAAO,UAAU,MAAM,OAAO;;CAGpE,MAAM,mBAAmB;EACvB,MAAM,SAAS,UAAU;AACzB,MAAI,CAAC,OAAQ;AACb,SAAO,iBAAiB,aAAa,aAAa;AAClD,SAAO,iBAAiB,aAAa,KAAK;AAC1C,SAAO,iBAAiB,WAAW,WAAW;AAC9C,SAAO,iBAAiB,cAAc,WAAW;AACjD,SAAO,iBAAiB,cAAc,cAAc,EAAE,SAAS,OAAO,CAAC;AACvE,SAAO,iBAAiB,aAAa,MAAM,EAAE,SAAS,OAAO,CAAC;AAC9D,SAAO,iBAAiB,YAAY,WAAW;AAC/C,SAAO,iBAAiB,eAAe,WAAW;;CAGpD,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;AACzB,MAAI,CAAC,OAAQ;AACb,SAAO,oBAAoB,aAAa,aAAa;AACrD,SAAO,oBAAoB,aAAa,KAAK;AAC7C,SAAO,oBAAoB,WAAW,WAAW;AACjD,SAAO,oBAAoB,cAAc,WAAW;AACpD,SAAO,oBAAoB,cAAc,aAAa;AACtD,SAAO,oBAAoB,aAAa,KAAK;AAC7C,SAAO,oBAAoB,YAAY,WAAW;AAClD,SAAO,oBAAoB,eAAe,WAAW;;AAGvD,QAAO;EACL,WAAW,SAAS,UAAU;EAC9B;EACA;EACA;EACA;EACA;EACD;;;;;ACnLH,SAAgB,oBAAoB,UAAsC,EAAE,EAAE;CAC5E,MAAM,EAAE,aAAa,IAAI,aAAa;CAEtC,MAAM,UAAU,IAAuB,EAAE,CAAC;CAC1C,MAAM,eAAe,IAAyB,EAAE,CAAC;CACjD,MAAM,eAAe,IAAI,GAAG;CAE5B,MAAM,UAAU,eAAe,aAAa,QAAQ,EAAE;CACtD,MAAM,UAAU,eACR,aAAa,QAAQ,aAAa,MAAM,SAAS,EACxD;CAED,MAAM,aAAa,WAA4B;AAC7C,UAAQ,MAAM,KAAK,OAAO;AAC1B,iBAAe;;CAGjB,MAAM,sBAAsB;AAC1B,eAAa,QAAQ,aAAa,MAAM,MAAM,GAAG,aAAa,QAAQ,EAAE;AACxE,eAAa,MAAM,KAAK,CAAC,GAAG,QAAQ,MAAM,CAAC;AAC3C,eAAa;AACb,MAAI,aAAa,MAAM,SAAS,YAAY;AAC1C,gBAAa,MAAM,OAAO;AAC1B,gBAAa;;AAEf,aAAW,QAAQ,MAAM;;CAG3B,MAAM,aAAsB;AAC1B,MAAI,CAAC,QAAQ,MAAO,QAAO;AAC3B,eAAa;AACb,UAAQ,QAAQ,CAAC,GAAG,aAAa,MAAM,aAAa,OAAO;AAC3D,aAAW,QAAQ,MAAM;AACzB,SAAO;;CAGT,MAAM,aAAsB;AAC1B,MAAI,CAAC,QAAQ,MAAO,QAAO;AAC3B,eAAa;AACb,UAAQ,QAAQ,CAAC,GAAG,aAAa,MAAM,aAAa,OAAO;AAC3D,aAAW,QAAQ,MAAM;AACzB,SAAO;;CAGT,MAAM,cAAc;AAClB,UAAQ,QAAQ,EAAE;AAClB,eAAa,QAAQ,CAAC,EAAE,CAAC;AACzB,eAAa,QAAQ;AACrB,aAAW,QAAQ,MAAM;;CAG3B,MAAM,YAAY,SAA4B;AAC5C,UAAQ,QAAQ,CAAC,GAAG,KAAK;AACzB,eAAa,QAAQ,CAAC,CAAC,GAAG,KAAK,CAAC;AAChC,eAAa,QAAQ;AACrB,aAAW,QAAQ,MAAM;;CAG3B,MAAM,UAAU,eAAe,QAAQ,MAAM,WAAW,EAAE;AAG1D,cAAa,QAAQ,CAAC,EAAE,CAAC;AACzB,cAAa,QAAQ;AAErB,QAAO;EACL,SAAS,SAAS,QAAQ;EAC1B,SAAS,SAAS,QAAQ;EAC1B,SAAS,SAAS,QAAQ;EAC1B,SAAS,SAAS,QAAQ;EAC1B;EACA;EACA;EACA;EACA;EACD;;;;;AC1EH,SAAgB,mBAAmB,SAAoC;CACrE,MAAM,EAAE,WAAW,cAAc;CAEjC,MAAM,wBACJ,QACA,WACA,UACA,aAC6B;EAC7B,MAAM,UAAU;EAChB,MAAM,YAAY;GAChB,YAAY;IAAE,GAAG;IAAS,GAAG,WAAW;IAAS;GACjD,aAAa;IAAE,GAAG,OAAO,QAAQ,YAAY;IAAS,GAAG,WAAW;IAAS;GAC7E,eAAe;IAAE,GAAG;IAAS,GAAG,OAAO,SAAS;IAAS;GACzD,gBAAgB;IAAE,GAAG,OAAO,QAAQ,YAAY;IAAS,GAAG,OAAO,SAAS;IAAS;GACtF;AACD,SAAO,UAAU,aAAuC,UAAU;;CAGpE,MAAM,iBAAiB,QAA2B,SAAuB;EACvE,MAAM,MAAM,OAAO,WAAW,KAAK;AACnC,MAAI,CAAC,OAAO,CAAC,WAAW,OAAO,KAAM;EACrC,MAAM,SAAS;GACb,UAAU,UAAU,MAAM,YAAY;GACtC,OAAO,UAAU,MAAM,SAAS;GAChC,UAAU,UAAU,MAAM,YAAY;GACvC;AACD,MAAI,MAAM;AACV,MAAI,OAAO,GAAG,OAAO,SAAS;AAC9B,MAAI,YAAY,OAAO;AACvB,MAAI,eAAe;EACnB,MAAM,YAAY,IAAI,YAAY,KAAK,CAAC;EACxC,MAAM,EAAE,GAAG,MAAM,qBAAqB,QAAQ,WAAW,OAAO,UAAU,OAAO,SAAS;AAC1F,MAAI,SAAS,MAAM,GAAG,EAAE;AACxB,MAAI,SAAS;;CAGf,MAAM,oBACJ,cACA,mBACA,oBACG;EACH,MAAM,aAAa,SAAS,cAAc,SAAS;AACnD,aAAW,QAAQ,aAAa;AAChC,aAAW,SAAS,aAAa;EACjC,MAAM,UAAU,WAAW,WAAW,KAAK;AAC3C,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,gBAAgB;AAC9C,MAAI,mBAAmB;AACrB,WAAQ,YAAY;AACpB,WAAQ,SAAS,GAAG,GAAG,WAAW,OAAO,WAAW,OAAO;;AAE7D,UAAQ,UAAU,cAAc,GAAG,EAAE;AACrC,SAAO;GAAE,QAAQ;GAAY,KAAK;GAAS;;CAG7C,MAAM,uBAAuB,QAA2B,YAA8C;EACpG,MAAM,EAAE,oBAAoB,OAAO,kBAAkB,WAAW,mBAAmB,UAAU;EAC7F,MAAM,EAAE,QAAQ,eAAe,iBAAiB,QAAQ,mBAAmB,gBAAgB;AAC3F,MAAI,oBAAoB,WAAW,OAAO,QAAQ,UAAU,MAAM,KAChE,eAAc,YAAY,UAAU,MAAM,KAAK;AAEjD,SAAO;;CAGT,MAAM,gBAAgB,QAA2B,YAAmC;AAClF,SAAO,IAAI,SAAe,SAAS,WAAW;AAC5C,UAAO,QACL,SAAS,OAAO,QAAQ,KAAK,GAAG,uBAAO,IAAI,MAAM,OAAO,CAAC,EACzD,aACA,QACD;IACD;;CAGJ,MAAM,kBAAkB,OAAO,UAAyB,EAAE,KAA6B;EACrF,MAAM,SAAS,UAAU;AACzB,MAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,cAAc;EAC3C,MAAM,EAAE,SAAS,OAAO,UAAU,QAAS;AAC3C,MAAI,WAAW,MACb,QAAO;EAET,MAAM,aAAa,oBAAoB,QAAQ,QAAQ;AACvD,MAAI,WAAW,OAAQ,QAAO,aAAa,YAAY,QAAQ;EAC/D,MAAM,WAAW,WAAW,SAAS,eAAe;AACpD,SAAO,WAAW,UAAU,UAAU,QAAQ;;CAGhD,MAAM,WAAW,OAAO,WAAW,aAAa,UAAyB,EAAE,KAAoB;EAC7F,MAAM,SAAS,QAAQ,UAAU;EACjC,MAAM,SAAS,MAAM,gBAAgB;GAAE,GAAG;GAAS;GAAQ,CAAC;AAC5D,MAAI,kBAAkB,MAAM;GAC1B,MAAM,MAAM,IAAI,gBAAgB,OAAO;GACvC,MAAM,OAAO,SAAS,cAAc,IAAI;AACxC,QAAK,OAAO;AACZ,QAAK,WAAW,GAAG,SAAS,GAAG;AAC/B,QAAK,OAAO;AACZ,OAAI,gBAAgB,IAAI;aACf,OAAO,WAAW,UAAU;GACrC,MAAM,OAAO,SAAS,cAAc,IAAI;AACxC,QAAK,OAAO;AACZ,QAAK,WAAW,GAAG,SAAS,GAAG;AAC/B,QAAK,OAAO;;;CAIhB,MAAM,YAAY,OAAO,aAAoC;EAC3D,MAAM,SAAS,UAAU;AACzB,MAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,cAAc;EAC3C,MAAM,MAAM,OAAO,WAAW,KAAK;AACnC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,kBAAkB;AAC5C,SAAO,IAAI,SAAS,SAAS,WAAW;GACtC,MAAM,MAAM,IAAI,OAAO;AACvB,OAAI,cAAc;AAClB,OAAI,eAAe;AACjB,QAAI,UAAU,GAAG,GAAG,OAAO,OAAO,OAAO,OAAO;AAChD,QAAI,UAAU,KAAK,GAAG,GAAG,OAAO,OAAO,OAAO,OAAO;AACrD,aAAS;;AAEX,OAAI,gBAAgB,uBAAO,IAAI,MAAM,WAAW,WAAW,CAAC;AAC5D,OAAI,MAAM;IACV;;AAGJ,QAAO;EAAE;EAAiB;EAAU;EAAW;;;;;ACjIjD,MAAa,qBAAgC;CAC3C,OAAO;CACP,OAAO;CACP,SAAS;CACV;AAID,MAAa,2BAA4C;CACvD,MAAM;CACN,MAAM;CACN,UAAU;CACV,OAAO;CACP,UAAU;CACX;AAED,MAAa,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEiHD,MAAM,QAAQ;EASd,MAAM,OAAO;EAUb,MAAM,YAAY,IAA8B,KAAK;EACrD,MAAM,cAAc,IAAa,MAAM;EACvC,MAAM,mBAAmB,SAAoB;GAC3C,GAAG;GACH,GAAG,MAAM;GACV,CAAC;EACF,MAAM,mBAAmB,SAA0B;GACjD,GAAG;GACH,GAAG,MAAM;GACV,CAAC;EAEF,MAAM,EACJ,SACA,SACA,SACA,SACA,WACA,MACA,MACA,OACA,aACE,oBAAoB;GACtB,YAAY,MAAM;GAClB,WAAW,SAAS;AAClB,mBAAe,cAAc,KAA0B;AACvD,SAAK,UAAU,KAA0B;;GAE5C,CAAC;EAEF,MAAM,iBAAiB,mBAAmB;GACxC;GACA,WAAW,MAAM,iBAAiB;GAClC,MAAM;GACN,UAAU,MAAM,OAAO,WAAW;GAClC,mBAAmB,WAA4B;AAC7C,cAAU,OAAO;AACjB,SAAK,YAAY,OAAO;;GAE1B,mBAAmB,KAAK,aAAa;GACrC,YAAY,UAA0B,KAAK,WAAW,MAAM;GAC7D,CAAC;EAEF,MAAM,iBAAiB,mBAAmB;GACxC;GACA,WAAW,MAAM,iBAAiB;GACnC,CAAC;EAEF,MAAM,mBAA4B;GAChC,MAAM,SAAS,MAAM;AACrB,OAAI,OAAQ,MAAK,OAAO;AACxB,UAAO;;EAGT,MAAM,mBAA4B;GAChC,MAAM,SAAS,MAAM;AACrB,OAAI,OAAQ,MAAK,OAAO;AACxB,UAAO;;EAGT,MAAM,oBAAoB;AACxB,UAAO;AACP,kBAAe,aAAa;AAC5B,QAAK,QAAQ;;EAGf,MAAM,kBAAkB,OACtB,YAC2B;AAC3B,UAAO,eAAe,gBAAgB,QAAQ;;EAGhD,MAAM,WAAW,OACf,UACA,YACkB;AAClB,UAAO,eAAe,SAAS,UAAU,QAAQ;;EAGnD,MAAM,YAAY,OAAO,aAAoC;AAC3D,SAAM,eAAe,UAAU,SAAS;AACxC,UAAO;;EAGT,MAAM,yBACJ,QAAQ;EACV,MAAM,qBAAqB,SAAkC,SAAS,KAAK;EAC3E,MAAM,yBAAkC,QAAQ;AAEhD,kBAAgB;AACd,kBAAe,YAAY;AAC3B,kBAAe,YAAY;AAC3B,OAAI,MAAM,gBAAiB,WAAU,MAAM,gBAAgB;IAC3D;AAEF,oBAAkB,eAAe,cAAc,CAAC;AAEhD,WAA8B;GAC5B,OAAO;GACP,MAAM;GACN,MAAM;GACN,QAAQ;GACR;GACA;GACA;GACA;GACA,SAAS;GACV,CAAC;;uBA/PA,mBAsGM,OAtGN,YAsGM,CArGOA,KAAAA,4BAAX,mBAiFM,OAjFN,YAiFM;IAhFJ,mBAuBM,OAvBN,YAuBM,CAtBJ,YAqBe,MAAA,aAAA,EAAA,MAAA;4BAXH,CATV,YASU,MAAA,QAAA,EAAA;MARP,MAAM,YAAA,UAAW,QAAA,YAAA;MAClB,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,YAAA,QAAW;;MAER,MAAI,cAC6C,CAA1D,YAA0D,gBAAA;OAAlD,MAAK;OAAY,MAAM;OAAI,OAAM;;6BAG7C,2CAFa,QAEb,GAAA;;;sBACA,YASU,MAAA,QAAA,EAAA;MARP,MAAM,YAAA,UAAW,WAAA,YAAA;MAClB,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,YAAA,QAAW;;MAER,MAAI,cAC+C,CAA5D,YAA4D,gBAAA;OAApD,MAAK;OAAc,MAAM;OAAI,OAAM;;6BAG/C,2CAFa,SAEb,GAAA;;;;;;gCAIJ,mBAAuC,OAAA,EAAlC,OAAM,2BAAyB,EAAA,MAAA,GAAA;IAEzB,YAAA,UAAW,sBAAtB,mBAQM,OARN,YAQM,2BAPJ,mBAAqC,QAAA,EAA/B,OAAM,iBAAe,EAAC,MAAE,GAAA,GAC9B,YAKE,MAAA,aAAA,EAAA;KAJQ,OAAO,iBAAiB;6DAAjB,iBAAiB,QAAK;KACpC,cAAY;KACb,MAAK;KACJ,UAAU,MAAA,cAAa;;IAIjB,YAAA,UAAW,sBAAtB,mBASM,OATN,YASM,2BARJ,mBAAqC,QAAA,EAA/B,OAAM,iBAAe,EAAC,MAAE,GAAA,GAC9B,YAME,MAAA,aAAA,EAAA;KALQ,OAAO,iBAAiB;6DAAjB,iBAAiB,QAAK;KACpC,KAAK;KACL,KAAK;KACN,MAAK;KACL,OAAA,EAAA,SAAA,QAAmB;;gCAIvB,mBAAuC,OAAA,EAAlC,OAAM,2BAAyB,EAAA,MAAA,GAAA;IAEpC,mBAaM,OAbN,YAaM,CAZJ,YAKU,MAAA,QAAA,EAAA;KALD,MAAK;KAAS,UAAQ,CAAG,MAAA,QAAO;KAAG,SAAO;;KACtC,MAAI,cAC6C,CAA1D,YAA0D,gBAAA;MAAlD,MAAK;MAAY,MAAM;MAAI,OAAM;;4BAG7C,2CAFa,QAEb,GAAA;;;yBACA,YAKU,MAAA,QAAA,EAAA;KALD,MAAK;KAAS,UAAQ,CAAG,MAAA,QAAO;KAAG,SAAO;;KACtC,MAAI,cAC6C,CAA1D,YAA0D,gBAAA;MAAlD,MAAK;MAAY,MAAM;MAAI,OAAM;;4BAG7C,2CAFa,QAEb,GAAA;;;;gCAGF,mBAAuC,OAAA,EAAlC,OAAM,2BAAyB,EAAA,MAAA,GAAA;IAEpC,mBAYM,OAZN,YAYM,CAXJ,YAUU,MAAA,QAAA,EAAA;KATR,MAAK;KACL,MAAK;KACJ,UAAU,MAAA,QAAO;KACjB,SAAO;;KAEG,MAAI,cACuD,CAApE,YAAoE,gBAAA;MAA5D,MAAK;MAAsB,MAAM;MAAI,OAAM;;4BAGvD,6CAFa,QAEb,GAAA;;;;2CAIJ,mBAiBM,OAAA;IAhBJ,OAAK,eAAA,CAAC,4BAA0B;KAAA,UACtBC,KAAAA;KAAQ,UAAEC,KAAAA;KAAQ,CAAA,CAAA;IAC3B,OAAK,eAAA;mBAA2BC,KAAAA,UAAK,WAAA,GAAmBA,KAAAA,MAAK,MAAOA,KAAAA;oBAA+BC,KAAAA,WAAM,WAAA,GAAmBA,KAAAA,OAAM,MAAOA,KAAAA;sBAAkCC,KAAAA,mBAAe;;OAM3L,mBAIE,UAAA;aAHI;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,oBAAkB;KAAA,UACdJ,KAAAA;KAAQ,UAAEC,KAAAA;KAAQ,CAAA,CAAA;gBAEnB,MAAA,QAAO,IAAA,CAAKD,KAAAA,YAAQ,CAAKC,KAAAA,yBAApC,mBAEM,OAFN,YAAyE,WAEzE"}

package/dist/C_SplitPane-C6sBsfKY.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_SplitPane-C6sBsfKY.css","names":[],"sources":["../src/components/C_SplitPane/index.vue?vue&type=style&index=0&scoped=80043f11&lang.scss"],"sourcesContent":["/* 分割面板组件样式 */\n.c-split-pane[data-v-80043f11] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n  /* ─── 方向 ────────────────────────────────── */\n  /* ─── 拖拽中 ──────────────────────────────── */\n  /* ─── 禁用 ────────────────────────────────── */\n  /* ─── 折叠过渡 ────────────────────────────── */\n}\n.c-split-pane--horizontal[data-v-80043f11] {\n  flex-direction: row;\n}\n.c-split-pane--vertical[data-v-80043f11] {\n  flex-direction: column;\n}\n.c-split-pane--dragging .split-panel__content[data-v-80043f11] {\n  pointer-events: none;\n  user-select: none;\n}\n.c-split-pane--disabled .split-gutter[data-v-80043f11] {\n  cursor: default !important;\n  opacity: 0.5;\n}\n.c-split-pane--disabled .split-gutter[data-v-80043f11]:hover {\n  background: transparent;\n}\n.c-split-pane--collapsed-first .split-panel[data-v-80043f11], .c-split-pane--collapsed-second .split-panel[data-v-80043f11] {\n  transition: width 0.3s ease, height 0.3s ease;\n}\n\n/* ─── 面板 ──────────────────────────────────── */\n.split-panel[data-v-80043f11] {\n  overflow: hidden;\n  position: relative;\n}\n.split-panel__content[data-v-80043f11] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n}\n\n/* ─── 分割线手柄 ────────────────────────────── */\n.split-gutter[data-v-80043f11] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 1;\n  background: var(--c-border, #e1e4e8);\n  transition: background-color 0.2s ease;\n  outline: none;\n  /* 水平方向 */\n  /* 垂直方向 */\n  /* focus 轮廓 */\n  /* ─── 视觉指示条 ──────────────────────────── */\n  /* ─── 折叠按钮 ────────────────────────────── */\n}\n.c-split-pane--horizontal .split-gutter[data-v-80043f11] {\n  cursor: col-resize;\n  min-width: 4px;\n}\n.c-split-pane--horizontal .split-gutter[data-v-80043f11]:hover, .c-split-pane--horizontal .split-gutter[data-v-80043f11]:focus-visible {\n  background: var(--c-primary, #409eff);\n}\n.c-split-pane--vertical .split-gutter[data-v-80043f11] {\n  cursor: row-resize;\n  min-height: 4px;\n}\n.c-split-pane--vertical .split-gutter[data-v-80043f11]:hover, .c-split-pane--vertical .split-gutter[data-v-80043f11]:focus-visible {\n  background: var(--c-primary, #409eff);\n}\n.split-gutter[data-v-80043f11]:focus-visible {\n  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);\n}\n.split-gutter__visual[data-v-80043f11] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.split-gutter__dots[data-v-80043f11] {\n  display: flex;\n  gap: 2px;\n}\n.c-split-pane--horizontal .split-gutter__dots[data-v-80043f11] {\n  flex-direction: column;\n}\n.c-split-pane--vertical .split-gutter__dots[data-v-80043f11] {\n  flex-direction: row;\n}\n.split-gutter__dot[data-v-80043f11] {\n  width: 3px;\n  height: 3px;\n  border-radius: 50%;\n  background: var(--c-text-4, #ccc);\n  transition: background-color 0.2s ease;\n}\n.split-gutter:hover .split-gutter__dot[data-v-80043f11] {\n  background: #fff;\n}\n.split-gutter__collapse-btn[data-v-80043f11] {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: 1px solid var(--c-border, #e1e4e8);\n  border-radius: 50%;\n  background: var(--c-bg-card, #fff);\n  color: var(--c-text-3, #999);\n  font-size: 12px;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;\n  z-index: 2;\n  /* 水平方向的定位 */\n  /* 垂直方向的定位 */\n}\n.split-gutter:hover .split-gutter__collapse-btn[data-v-80043f11] {\n  opacity: 1;\n}\n.split-gutter__collapse-btn[data-v-80043f11]:hover {\n  color: var(--c-primary, #409eff);\n  background: var(--c-bg, #fff);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn[data-v-80043f11] {\n  left: 50%;\n  transform: translateX(-50%);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-80043f11] {\n  top: 8px;\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-80043f11] {\n  bottom: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn[data-v-80043f11] {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-80043f11] {\n  left: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-80043f11] {\n  right: 8px;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_SplitPane.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+require('./C_Icon.js');
+const require_C_SplitPane = require('./C_SplitPane.js');
+
+exports.C_SplitPane = require_C_SplitPane.C_SplitPane_default;
+exports.useSplitResize = require_C_SplitPane.useSplitResize;

package/dist/C_SplitPane.d.cts

@@ -0,0 +1,2 @@
+import { a as SplitDirection, c as SplitPaneProps, i as PanelInfo, n as _default, o as SplitPaneEmits, r as CollapseTarget, s as SplitPaneExpose, t as useSplitResize } from "./useSplitResize.js";
+export { _default as C_SplitPane, type CollapseTarget, type PanelInfo, type SplitDirection, type SplitPaneEmits, type SplitPaneExpose, type SplitPaneProps, useSplitResize };

package/dist/C_SplitPane.d.ts

@@ -0,0 +1,2 @@
+import { a as SplitDirection, c as SplitPaneProps, i as PanelInfo, n as _default, o as SplitPaneEmits, r as CollapseTarget, s as SplitPaneExpose, t as useSplitResize } from "./useSplitResize.js";
+export { _default as C_SplitPane, type CollapseTarget, type PanelInfo, type SplitDirection, type SplitPaneEmits, type SplitPaneExpose, type SplitPaneProps, useSplitResize };

package/dist/C_SplitPane.js

@@ -0,0 +1,4 @@
+import "./C_Icon2.js";
+import { n as useSplitResize, t as C_SplitPane_default } from "./C_SplitPane2.js";
+
+export { C_SplitPane_default as C_SplitPane, useSplitResize };

package/dist/C_SplitPane2.js

@@ -0,0 +1,356 @@
+import { t as C_Icon_default } from "./C_Icon2.js";
+import { t as export_helper_default } from "./export-helper.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderList, renderSlot, toRef, unref, withModifiers } from "vue";
+
+//#region src/components/C_SplitPane/composables/useSplitResize.ts
+/**
+* 分割面板拖拽调整逻辑
+*/
+function useSplitResize(options) {
+	const { containerRef, direction, defaultSize, minSize, maxSize, disabled, collapsible, step, onResize, onCollapse, onExpand, onDragStart, onDragEnd } = options;
+	/** 首面板当前大小（百分比） */
+	const panelSize = ref(defaultSize);
+	/** 是否正在拖拽 */
+	const isDragging = ref(false);
+	/** 折叠状态 */
+	const collapsedTarget = ref(null);
+	/** 折叠前记住的面板大小 */
+	const sizeBeforeCollapse = ref(defaultSize);
+	/** 首面板是否折叠 */
+	const isFirstCollapsed = computed(() => collapsedTarget.value === "first");
+	/** 第二面板是否折叠 */
+	const isSecondCollapsed = computed(() => collapsedTarget.value === "second");
+	/**
+	* 将大小限制在 min/max 范围内
+	*/
+	const clampSize = (size) => {
+		return Math.min(maxSize, Math.max(minSize, size));
+	};
+	/**
+	* 获取容器在分割方向上的总长度（px）
+	*/
+	const getContainerLength = () => {
+		const container = containerRef.value;
+		if (!container) return 0;
+		return direction.value === "horizontal" ? container.offsetWidth : container.offsetHeight;
+	};
+	/**
+	* 获取容器在分割方向上的起始坐标
+	*/
+	const getContainerStart = () => {
+		const container = containerRef.value;
+		if (!container) return 0;
+		const rect = container.getBoundingClientRect();
+		return direction.value === "horizontal" ? rect.left : rect.top;
+	};
+	/**
+	* 根据鼠标/触摸位置计算面板大小（百分比）
+	*/
+	const calcSizeFromPosition = (clientPos) => {
+		const containerLength = getContainerLength();
+		if (containerLength === 0) return panelSize.value;
+		return clampSize((clientPos - getContainerStart()) / containerLength * 100);
+	};
+	/**
+	* 获取事件的位置坐标
+	*/
+	const getClientPos = (e) => {
+		if (e instanceof TouchEvent) return direction.value === "horizontal" ? e.touches[0].clientX : e.touches[0].clientY;
+		return direction.value === "horizontal" ? e.clientX : e.clientY;
+	};
+	/**
+	* 更新面板大小
+	*/
+	const updateSize = (newSize) => {
+		const clamped = clampSize(newSize);
+		panelSize.value = clamped;
+		onResize?.(clamped, 100 - clamped);
+	};
+	const handleMouseMove = (e) => {
+		if (!isDragging.value || disabled.value) return;
+		e.preventDefault();
+		const newSize = calcSizeFromPosition(getClientPos(e));
+		if (collapsedTarget.value) collapsedTarget.value = null;
+		updateSize(newSize);
+	};
+	const handleMouseUp = () => {
+		if (!isDragging.value) return;
+		isDragging.value = false;
+		document.body.style.cursor = "";
+		document.body.style.userSelect = "";
+		onDragEnd?.(panelSize.value);
+		document.removeEventListener("mousemove", handleMouseMove);
+		document.removeEventListener("mouseup", handleMouseUp);
+		document.removeEventListener("touchmove", handleMouseMove);
+		document.removeEventListener("touchend", handleMouseUp);
+	};
+	const handleMouseDown = (e) => {
+		if (disabled.value) return;
+		e.preventDefault();
+		e.currentTarget?.focus();
+		isDragging.value = true;
+		document.body.style.cursor = direction.value === "horizontal" ? "col-resize" : "row-resize";
+		document.body.style.userSelect = "none";
+		onDragStart?.(panelSize.value);
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+		document.addEventListener("touchmove", handleMouseMove, { passive: false });
+		document.addEventListener("touchend", handleMouseUp);
+	};
+	const handleDoubleClick = () => {
+		if (disabled.value || !collapsible.value) return;
+		toggle("first");
+	};
+	const collapse = (target = "first") => {
+		if (!collapsible.value || collapsedTarget.value === target) return;
+		if (!collapsedTarget.value) sizeBeforeCollapse.value = panelSize.value;
+		collapsedTarget.value = target;
+		if (target === "first") panelSize.value = 0;
+		else panelSize.value = 100;
+		onCollapse?.(target);
+		onResize?.(panelSize.value, 100 - panelSize.value);
+	};
+	const expand = () => {
+		if (!collapsedTarget.value) return;
+		const target = collapsedTarget.value;
+		collapsedTarget.value = null;
+		panelSize.value = sizeBeforeCollapse.value;
+		onExpand?.(target);
+		onResize?.(panelSize.value, 100 - panelSize.value);
+	};
+	const toggle = (target = "first") => {
+		if (collapsedTarget.value) expand();
+		else collapse(target);
+	};
+	/**
+	* 根据按键获取增量
+	*/
+	const getKeyDelta = (key, isHorizontal) => {
+		return {
+			ArrowLeft: isHorizontal ? -step : 0,
+			ArrowRight: isHorizontal ? step : 0,
+			ArrowUp: !isHorizontal ? -step : 0,
+			ArrowDown: !isHorizontal ? step : 0
+		}[key] ?? null;
+	};
+	const handleKeyDown = (e) => {
+		if (disabled.value) return;
+		if (e.key === "Home") {
+			updateSize(minSize);
+			e.preventDefault();
+			return;
+		}
+		if (e.key === "End") {
+			updateSize(maxSize);
+			e.preventDefault();
+			return;
+		}
+		const delta = getKeyDelta(e.key, direction.value === "horizontal");
+		if (delta === null || delta === 0) return;
+		e.preventDefault();
+		if (collapsedTarget.value) collapsedTarget.value = null;
+		updateSize(panelSize.value + delta);
+	};
+	const resetSize = () => {
+		collapsedTarget.value = null;
+		panelSize.value = defaultSize;
+		onResize?.(defaultSize, 100 - defaultSize);
+	};
+	const setSize = (size) => {
+		collapsedTarget.value = null;
+		updateSize(size);
+	};
+	const getPanelInfo = () => ({
+		first: {
+			size: panelSize.value,
+			collapsed: isFirstCollapsed.value
+		},
+		second: {
+			size: 100 - panelSize.value,
+			collapsed: isSecondCollapsed.value
+		}
+	});
+	onUnmounted(() => {
+		document.removeEventListener("mousemove", handleMouseMove);
+		document.removeEventListener("mouseup", handleMouseUp);
+		document.removeEventListener("touchmove", handleMouseMove);
+		document.removeEventListener("touchend", handleMouseUp);
+	});
+	return {
+		panelSize,
+		isDragging,
+		collapsedTarget,
+		isFirstCollapsed,
+		isSecondCollapsed,
+		handleMouseDown,
+		handleDoubleClick,
+		handleKeyDown,
+		collapse,
+		expand,
+		toggle,
+		resetSize,
+		setSize,
+		getPanelInfo
+	};
+}
+
+//#endregion
+//#region src/components/C_SplitPane/index.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "split-panel__content" };
+const _hoisted_2 = ["aria-orientation", "aria-valuenow"];
+const _hoisted_3 = { class: "split-gutter__visual" };
+const _hoisted_4 = { class: "split-gutter__dots" };
+const _hoisted_5 = ["title"];
+const _hoisted_6 = ["title"];
+const _hoisted_7 = { class: "split-panel__content" };
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "C_SplitPane",
+	__name: "index",
+	props: {
+		direction: { default: "horizontal" },
+		defaultSize: { default: 50 },
+		minSize: { default: 0 },
+		maxSize: { default: 100 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		collapsible: {
+			type: Boolean,
+			default: true
+		},
+		showCollapseButton: {
+			type: Boolean,
+			default: true
+		},
+		gutterSize: { default: 6 },
+		step: { default: 2 }
+	},
+	emits: [
+		"resize",
+		"collapse",
+		"expand",
+		"drag-start",
+		"drag-end"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const containerRef = ref(null);
+		const { panelSize, isDragging, isFirstCollapsed, isSecondCollapsed, handleMouseDown, handleDoubleClick, handleKeyDown, collapse, expand, toggle, resetSize, setSize, getPanelInfo } = useSplitResize({
+			containerRef,
+			direction: toRef(props, "direction"),
+			defaultSize: props.defaultSize,
+			minSize: props.minSize,
+			maxSize: props.maxSize,
+			disabled: toRef(props, "disabled"),
+			collapsible: toRef(props, "collapsible"),
+			step: props.step,
+			onResize: (first, second) => emit("resize", first, second),
+			onCollapse: (target) => emit("collapse", target),
+			onExpand: (target) => emit("expand", target),
+			onDragStart: (size) => emit("drag-start", size),
+			onDragEnd: (size) => emit("drag-end", size)
+		});
+		const firstPanelStyle = computed(() => {
+			const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;
+			return props.direction === "horizontal" ? { width: sizeValue } : { height: sizeValue };
+		});
+		const secondPanelStyle = computed(() => {
+			const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;
+			return props.direction === "horizontal" ? { width: sizeValue } : { height: sizeValue };
+		});
+		const gutterStyle = computed(() => {
+			return props.direction === "horizontal" ? { width: `${props.gutterSize}px` } : { height: `${props.gutterSize}px` };
+		});
+		const collapseFirstIcon = computed(() => {
+			if (props.direction === "horizontal") return isFirstCollapsed.value ? "mdi:chevron-right" : "mdi:chevron-left";
+			return isFirstCollapsed.value ? "mdi:chevron-down" : "mdi:chevron-up";
+		});
+		const collapseSecondIcon = computed(() => {
+			if (props.direction === "horizontal") return isSecondCollapsed.value ? "mdi:chevron-left" : "mdi:chevron-right";
+			return isSecondCollapsed.value ? "mdi:chevron-up" : "mdi:chevron-down";
+		});
+		__expose({
+			collapse,
+			expand,
+			toggle,
+			resetSize,
+			getPanelInfo,
+			setSize
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: normalizeClass(["c-split-pane", [`c-split-pane--${_ctx.direction}`, {
+					"c-split-pane--dragging": unref(isDragging),
+					"c-split-pane--disabled": _ctx.disabled,
+					"c-split-pane--collapsed-first": unref(isFirstCollapsed),
+					"c-split-pane--collapsed-second": unref(isSecondCollapsed)
+				}]])
+			}, [
+				createCommentVNode(" 首面板 "),
+				createElementVNode("div", {
+					class: "split-panel split-panel--first",
+					style: normalizeStyle(firstPanelStyle.value)
+				}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "first", {}, void 0, true)])], 4),
+				createCommentVNode(" 分割线手柄 "),
+				createElementVNode("div", {
+					class: "split-gutter",
+					style: normalizeStyle(gutterStyle.value),
+					role: "separator",
+					"aria-orientation": _ctx.direction === "horizontal" ? "vertical" : "horizontal",
+					"aria-valuenow": Math.round(unref(panelSize)),
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					tabindex: "0",
+					onMousedown: _cache[4] || (_cache[4] = (...args) => unref(handleMouseDown) && unref(handleMouseDown)(...args)),
+					onTouchstart: _cache[5] || (_cache[5] = withModifiers((...args) => unref(handleMouseDown) && unref(handleMouseDown)(...args), ["prevent"])),
+					onDblclick: _cache[6] || (_cache[6] = (...args) => unref(handleDoubleClick) && unref(handleDoubleClick)(...args)),
+					onKeydown: _cache[7] || (_cache[7] = (...args) => unref(handleKeyDown) && unref(handleKeyDown)(...args))
+				}, [
+					createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [(openBlock(), createElementBlock(Fragment, null, renderList(3, (i) => {
+						return createElementVNode("span", {
+							key: i,
+							class: "split-gutter__dot"
+						});
+					}), 64))])]),
+					createCommentVNode(" 折叠按钮 "),
+					_ctx.showCollapseButton && _ctx.collapsible ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
+						class: "split-gutter__collapse-btn split-gutter__collapse-btn--first",
+						title: unref(isFirstCollapsed) ? "展开首面板" : "折叠首面板",
+						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(toggle)("first"), ["stop"])),
+						onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+					}, [createVNode(C_Icon_default, {
+						name: collapseFirstIcon.value,
+						size: 16,
+						color: "currentColor"
+					}, null, 8, ["name"])], 40, _hoisted_5), createElementVNode("button", {
+						class: "split-gutter__collapse-btn split-gutter__collapse-btn--second",
+						title: unref(isSecondCollapsed) ? "展开第二面板" : "折叠第二面板",
+						onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(toggle)("second"), ["stop"])),
+						onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+					}, [createVNode(C_Icon_default, {
+						name: collapseSecondIcon.value,
+						size: 16,
+						color: "currentColor"
+					}, null, 8, ["name"])], 40, _hoisted_6)], 64)) : createCommentVNode("v-if", true)
+				], 44, _hoisted_2),
+				createCommentVNode(" 第二面板 "),
+				createElementVNode("div", {
+					class: "split-panel split-panel--second",
+					style: normalizeStyle(secondPanelStyle.value)
+				}, [createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "second", {}, void 0, true)])], 4)
+			], 2);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/C_SplitPane/index.vue
+var C_SplitPane_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-80043f11"]]);
+
+//#endregion
+export { useSplitResize as n, C_SplitPane_default as t };
+//# sourceMappingURL=C_SplitPane2.js.map

package/dist/C_SplitPane2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_SplitPane2.js","names":["direction","disabled","showCollapseButton","collapsible"],"sources":["../src/components/C_SplitPane/composables/useSplitResize.ts","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue"],"sourcesContent":["import { ref, computed, onUnmounted } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CollapseTarget, SplitDirection } from \"../types\";\r\n\r\ninterface UseSplitResizeOptions {\r\n  /** 容器引用 */\r\n  containerRef: Ref<HTMLElement | null>;\r\n  /** 分割方向 */\r\n  direction: Ref<SplitDirection>;\r\n  /** 首面板默认大小（百分比） */\r\n  defaultSize: number;\r\n  /** 首面板最小大小（百分比） */\r\n  minSize: number;\r\n  /** 首面板最大大小（百分比） */\r\n  maxSize: number;\r\n  /** 是否禁用 */\r\n  disabled: Ref<boolean>;\r\n  /** 是否可折叠 */\r\n  collapsible: Ref<boolean>;\r\n  /** 键盘微调步长（百分比） */\r\n  step: number;\r\n  /** resize 回调 */\r\n  onResize?: (firstSize: number, secondSize: number) => void;\r\n  /** 折叠回调 */\r\n  onCollapse?: (target: CollapseTarget) => void;\r\n  /** 展开回调 */\r\n  onExpand?: (target: CollapseTarget) => void;\r\n  /** 拖拽开始回调 */\r\n  onDragStart?: (size: number) => void;\r\n  /** 拖拽结束回调 */\r\n  onDragEnd?: (size: number) => void;\r\n}\r\n\r\n/**\r\n * 分割面板拖拽调整逻辑\r\n */\r\nexport function useSplitResize(options: UseSplitResizeOptions) {\r\n  const {\r\n    containerRef,\r\n    direction,\r\n    defaultSize,\r\n    minSize,\r\n    maxSize,\r\n    disabled,\r\n    collapsible,\r\n    step,\r\n    onResize,\r\n    onCollapse,\r\n    onExpand,\r\n    onDragStart,\r\n    onDragEnd,\r\n  } = options;\r\n\r\n  /** 首面板当前大小（百分比） */\r\n  const panelSize = ref(defaultSize);\r\n  /** 是否正在拖拽 */\r\n  const isDragging = ref(false);\r\n  /** 折叠状态 */\r\n  const collapsedTarget = ref<CollapseTarget | null>(null);\r\n  /** 折叠前记住的面板大小 */\r\n  const sizeBeforeCollapse = ref(defaultSize);\r\n\r\n  /** 首面板是否折叠 */\r\n  const isFirstCollapsed = computed(() => collapsedTarget.value === \"first\");\r\n  /** 第二面板是否折叠 */\r\n  const isSecondCollapsed = computed(() => collapsedTarget.value === \"second\");\r\n\r\n  /**\r\n   * 将大小限制在 min/max 范围内\r\n   */\r\n  const clampSize = (size: number): number => {\r\n    return Math.min(maxSize, Math.max(minSize, size));\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的总长度（px）\r\n   */\r\n  const getContainerLength = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    return direction.value === \"horizontal\"\r\n      ? container.offsetWidth\r\n      : container.offsetHeight;\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的起始坐标\r\n   */\r\n  const getContainerStart = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    const rect = container.getBoundingClientRect();\r\n    return direction.value === \"horizontal\" ? rect.left : rect.top;\r\n  };\r\n\r\n  /**\r\n   * 根据鼠标/触摸位置计算面板大小（百分比）\r\n   */\r\n  const calcSizeFromPosition = (clientPos: number): number => {\r\n    const containerLength = getContainerLength();\r\n    if (containerLength === 0) return panelSize.value;\r\n\r\n    const containerStart = getContainerStart();\r\n    const offset = clientPos - containerStart;\r\n    const percentage = (offset / containerLength) * 100;\r\n\r\n    return clampSize(percentage);\r\n  };\r\n\r\n  /**\r\n   * 获取事件的位置坐标\r\n   */\r\n  const getClientPos = (e: MouseEvent | TouchEvent): number => {\r\n    if (e instanceof TouchEvent) {\r\n      return direction.value === \"horizontal\"\r\n        ? e.touches[0].clientX\r\n        : e.touches[0].clientY;\r\n    }\r\n    return direction.value === \"horizontal\" ? e.clientX : e.clientY;\r\n  };\r\n\r\n  /**\r\n   * 更新面板大小\r\n   */\r\n  const updateSize = (newSize: number) => {\r\n    const clamped = clampSize(newSize);\r\n    panelSize.value = clamped;\r\n    onResize?.(clamped, 100 - clamped);\r\n  };\r\n\r\n  /* ─── 拖拽逻辑 ──────────────────────────────── */\r\n  const handleMouseMove = (e: MouseEvent | TouchEvent) => {\r\n    if (!isDragging.value || disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    const pos = getClientPos(e);\r\n    const newSize = calcSizeFromPosition(pos);\r\n\r\n    /* 拖拽过程中取消折叠状态 */\r\n    if (collapsedTarget.value) {\r\n      collapsedTarget.value = null;\r\n    }\r\n    updateSize(newSize);\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n    if (!isDragging.value) return;\r\n\r\n    isDragging.value = false;\r\n    document.body.style.cursor = \"\";\r\n    document.body.style.userSelect = \"\";\r\n\r\n    onDragEnd?.(panelSize.value);\r\n\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  const handleMouseDown = (e: MouseEvent | TouchEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    /* preventDefault 会阻止默认聚焦行为，需手动 focus 以支持键盘控制 */\r\n    (e.currentTarget as HTMLElement)?.focus();\r\n    isDragging.value = true;\r\n\r\n    document.body.style.cursor =\r\n      direction.value === \"horizontal\" ? \"col-resize\" : \"row-resize\";\r\n    document.body.style.userSelect = \"none\";\r\n\r\n    onDragStart?.(panelSize.value);\r\n\r\n    document.addEventListener(\"mousemove\", handleMouseMove);\r\n    document.addEventListener(\"mouseup\", handleMouseUp);\r\n    document.addEventListener(\"touchmove\", handleMouseMove, { passive: false });\r\n    document.addEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  /* ─── 双击折叠 ──────────────────────────────── */\r\n  const handleDoubleClick = () => {\r\n    if (disabled.value || !collapsible.value) return;\r\n    toggle(\"first\");\r\n  };\r\n\r\n  /* ─── 折叠 / 展开 ───────────────────────────── */\r\n  const collapse = (target: CollapseTarget = \"first\") => {\r\n    if (!collapsible.value || collapsedTarget.value === target) return;\r\n\r\n    /* 记住折叠前的大小 */\r\n    if (!collapsedTarget.value) {\r\n      sizeBeforeCollapse.value = panelSize.value;\r\n    }\r\n\r\n    collapsedTarget.value = target;\r\n\r\n    if (target === \"first\") {\r\n      panelSize.value = 0;\r\n    } else {\r\n      panelSize.value = 100;\r\n    }\r\n\r\n    onCollapse?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const expand = () => {\r\n    if (!collapsedTarget.value) return;\r\n\r\n    const target = collapsedTarget.value;\r\n    collapsedTarget.value = null;\r\n    panelSize.value = sizeBeforeCollapse.value;\r\n\r\n    onExpand?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const toggle = (target: CollapseTarget = \"first\") => {\r\n    if (collapsedTarget.value) {\r\n      expand();\r\n    } else {\r\n      collapse(target);\r\n    }\r\n  };\r\n\r\n  /* ─── 键盘微调 ──────────────────────────────── */\r\n  /**\r\n   * 根据按键获取增量\r\n   */\r\n  const getKeyDelta = (key: string, isHorizontal: boolean): number | null => {\r\n    const keyMap: Record<string, number | null> = {\r\n      ArrowLeft: isHorizontal ? -step : 0,\r\n      ArrowRight: isHorizontal ? step : 0,\r\n      ArrowUp: !isHorizontal ? -step : 0,\r\n      ArrowDown: !isHorizontal ? step : 0,\r\n    };\r\n    return keyMap[key] ?? null;\r\n  };\r\n\r\n  const handleKeyDown = (e: KeyboardEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    /* Home / End 直接跳到极值 */\r\n    if (e.key === \"Home\") {\r\n      updateSize(minSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n    if (e.key === \"End\") {\r\n      updateSize(maxSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n\r\n    const delta = getKeyDelta(e.key, direction.value === \"horizontal\");\r\n    if (delta === null || delta === 0) return;\r\n\r\n    e.preventDefault();\r\n    if (collapsedTarget.value) collapsedTarget.value = null;\r\n    updateSize(panelSize.value + delta);\r\n  };\r\n\r\n  /* ─── 重置 / 查询 ───────────────────────────── */\r\n  const resetSize = () => {\r\n    collapsedTarget.value = null;\r\n    panelSize.value = defaultSize;\r\n    onResize?.(defaultSize, 100 - defaultSize);\r\n  };\r\n\r\n  const setSize = (size: number) => {\r\n    collapsedTarget.value = null;\r\n    updateSize(size);\r\n  };\r\n\r\n  const getPanelInfo = () => ({\r\n    first: {\r\n      size: panelSize.value,\r\n      collapsed: isFirstCollapsed.value,\r\n    },\r\n    second: {\r\n      size: 100 - panelSize.value,\r\n      collapsed: isSecondCollapsed.value,\r\n    },\r\n  });\r\n\r\n  /* 清理 */\r\n  onUnmounted(() => {\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  });\r\n\r\n  return {\r\n    panelSize,\r\n    isDragging,\r\n    collapsedTarget,\r\n    isFirstCollapsed,\r\n    isSecondCollapsed,\r\n    handleMouseDown,\r\n    handleDoubleClick,\r\n    handleKeyDown,\r\n    collapse,\r\n    expand,\r\n    toggle,\r\n    resetSize,\r\n    setSize,\r\n    getPanelInfo,\r\n  };\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":";;;;;;;;AAoCA,SAAgB,eAAe,SAAgC;CAC7D,MAAM,EACJ,cACA,WACA,aACA,SACA,SACA,UACA,aACA,MACA,UACA,YACA,UACA,aACA,cACE;;CAGJ,MAAM,YAAY,IAAI,YAAY;;CAElC,MAAM,aAAa,IAAI,MAAM;;CAE7B,MAAM,kBAAkB,IAA2B,KAAK;;CAExD,MAAM,qBAAqB,IAAI,YAAY;;CAG3C,MAAM,mBAAmB,eAAe,gBAAgB,UAAU,QAAQ;;CAE1E,MAAM,oBAAoB,eAAe,gBAAgB,UAAU,SAAS;;;;CAK5E,MAAM,aAAa,SAAyB;AAC1C,SAAO,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,KAAK,CAAC;;;;;CAMnD,MAAM,2BAAmC;EACvC,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW,QAAO;AACvB,SAAO,UAAU,UAAU,eACvB,UAAU,cACV,UAAU;;;;;CAMhB,MAAM,0BAAkC;EACtC,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW,QAAO;EACvB,MAAM,OAAO,UAAU,uBAAuB;AAC9C,SAAO,UAAU,UAAU,eAAe,KAAK,OAAO,KAAK;;;;;CAM7D,MAAM,wBAAwB,cAA8B;EAC1D,MAAM,kBAAkB,oBAAoB;AAC5C,MAAI,oBAAoB,EAAG,QAAO,UAAU;AAM5C,SAAO,WAHQ,YADQ,mBAAmB,IAEb,kBAAmB,IAEpB;;;;;CAM9B,MAAM,gBAAgB,MAAuC;AAC3D,MAAI,aAAa,WACf,QAAO,UAAU,UAAU,eACvB,EAAE,QAAQ,GAAG,UACb,EAAE,QAAQ,GAAG;AAEnB,SAAO,UAAU,UAAU,eAAe,EAAE,UAAU,EAAE;;;;;CAM1D,MAAM,cAAc,YAAoB;EACtC,MAAM,UAAU,UAAU,QAAQ;AAClC,YAAU,QAAQ;AAClB,aAAW,SAAS,MAAM,QAAQ;;CAIpC,MAAM,mBAAmB,MAA+B;AACtD,MAAI,CAAC,WAAW,SAAS,SAAS,MAAO;AAEzC,IAAE,gBAAgB;EAElB,MAAM,UAAU,qBADJ,aAAa,EAAE,CACc;AAGzC,MAAI,gBAAgB,MAClB,iBAAgB,QAAQ;AAE1B,aAAW,QAAQ;;CAGrB,MAAM,sBAAsB;AAC1B,MAAI,CAAC,WAAW,MAAO;AAEvB,aAAW,QAAQ;AACnB,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AAEjC,cAAY,UAAU,MAAM;AAE5B,WAAS,oBAAoB,aAAa,gBAAgB;AAC1D,WAAS,oBAAoB,WAAW,cAAc;AACtD,WAAS,oBAAoB,aAAa,gBAAgB;AAC1D,WAAS,oBAAoB,YAAY,cAAc;;CAGzD,MAAM,mBAAmB,MAA+B;AACtD,MAAI,SAAS,MAAO;AAEpB,IAAE,gBAAgB;AAElB,EAAC,EAAE,eAA+B,OAAO;AACzC,aAAW,QAAQ;AAEnB,WAAS,KAAK,MAAM,SAClB,UAAU,UAAU,eAAe,eAAe;AACpD,WAAS,KAAK,MAAM,aAAa;AAEjC,gBAAc,UAAU,MAAM;AAE9B,WAAS,iBAAiB,aAAa,gBAAgB;AACvD,WAAS,iBAAiB,WAAW,cAAc;AACnD,WAAS,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,OAAO,CAAC;AAC3E,WAAS,iBAAiB,YAAY,cAAc;;CAItD,MAAM,0BAA0B;AAC9B,MAAI,SAAS,SAAS,CAAC,YAAY,MAAO;AAC1C,SAAO,QAAQ;;CAIjB,MAAM,YAAY,SAAyB,YAAY;AACrD,MAAI,CAAC,YAAY,SAAS,gBAAgB,UAAU,OAAQ;AAG5D,MAAI,CAAC,gBAAgB,MACnB,oBAAmB,QAAQ,UAAU;AAGvC,kBAAgB,QAAQ;AAExB,MAAI,WAAW,QACb,WAAU,QAAQ;MAElB,WAAU,QAAQ;AAGpB,eAAa,OAAO;AACpB,aAAW,UAAU,OAAO,MAAM,UAAU,MAAM;;CAGpD,MAAM,eAAe;AACnB,MAAI,CAAC,gBAAgB,MAAO;EAE5B,MAAM,SAAS,gBAAgB;AAC/B,kBAAgB,QAAQ;AACxB,YAAU,QAAQ,mBAAmB;AAErC,aAAW,OAAO;AAClB,aAAW,UAAU,OAAO,MAAM,UAAU,MAAM;;CAGpD,MAAM,UAAU,SAAyB,YAAY;AACnD,MAAI,gBAAgB,MAClB,SAAQ;MAER,UAAS,OAAO;;;;;CAQpB,MAAM,eAAe,KAAa,iBAAyC;AAOzE,SAN8C;GAC5C,WAAW,eAAe,CAAC,OAAO;GAClC,YAAY,eAAe,OAAO;GAClC,SAAS,CAAC,eAAe,CAAC,OAAO;GACjC,WAAW,CAAC,eAAe,OAAO;GACnC,CACa,QAAQ;;CAGxB,MAAM,iBAAiB,MAAqB;AAC1C,MAAI,SAAS,MAAO;AAGpB,MAAI,EAAE,QAAQ,QAAQ;AACpB,cAAW,QAAQ;AACnB,KAAE,gBAAgB;AAClB;;AAEF,MAAI,EAAE,QAAQ,OAAO;AACnB,cAAW,QAAQ;AACnB,KAAE,gBAAgB;AAClB;;EAGF,MAAM,QAAQ,YAAY,EAAE,KAAK,UAAU,UAAU,aAAa;AAClE,MAAI,UAAU,QAAQ,UAAU,EAAG;AAEnC,IAAE,gBAAgB;AAClB,MAAI,gBAAgB,MAAO,iBAAgB,QAAQ;AACnD,aAAW,UAAU,QAAQ,MAAM;;CAIrC,MAAM,kBAAkB;AACtB,kBAAgB,QAAQ;AACxB,YAAU,QAAQ;AAClB,aAAW,aAAa,MAAM,YAAY;;CAG5C,MAAM,WAAW,SAAiB;AAChC,kBAAgB,QAAQ;AACxB,aAAW,KAAK;;CAGlB,MAAM,sBAAsB;EAC1B,OAAO;GACL,MAAM,UAAU;GAChB,WAAW,iBAAiB;GAC7B;EACD,QAAQ;GACN,MAAM,MAAM,UAAU;GACtB,WAAW,kBAAkB;GAC9B;EACF;AAGD,mBAAkB;AAChB,WAAS,oBAAoB,aAAa,gBAAgB;AAC1D,WAAS,oBAAoB,WAAW,cAAc;AACtD,WAAS,oBAAoB,aAAa,gBAAgB;AAC1D,WAAS,oBAAoB,YAAY,cAAc;GACvD;AAEF,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEzMH,MAAM,QAAQ;EAYd,MAAM,OAAO;EAQb,MAAM,eAAe,IAAwB,KAAK;EAElD,MAAM,EACJ,WACA,YACA,kBACA,mBACA,iBACA,mBACA,eACA,UACA,QACA,QACA,WACA,SACA,iBACE,eAAe;GACjB;GACA,WAAW,MAAM,OAAO,YAAY;GACpC,aAAa,MAAM;GACnB,SAAS,MAAM;GACf,SAAS,MAAM;GACf,UAAU,MAAM,OAAO,WAAW;GAClC,aAAa,MAAM,OAAO,cAAc;GACxC,MAAM,MAAM;GACZ,WAAW,OAAO,WAAW,KAAK,UAAU,OAAO,OAAO;GAC1D,aAAa,WAAW,KAAK,YAAY,OAAO;GAChD,WAAW,WAAW,KAAK,UAAU,OAAO;GAC5C,cAAc,SAAS,KAAK,cAAc,KAAK;GAC/C,YAAY,SAAS,KAAK,YAAY,KAAK;GAC5C,CAAC;EAGF,MAAM,kBAAkB,eAAe;GACrC,MAAM,YAAY,QAAQ,UAAU,MAAM,MAAM,MAAM,aAAa,EAAE;AACrE,UAAO,MAAM,cAAc,eACvB,EAAE,OAAO,WAAW,GACpB,EAAE,QAAQ,WAAW;IACzB;EAEF,MAAM,mBAAmB,eAAe;GACtC,MAAM,YAAY,QAAQ,MAAM,UAAU,MAAM,MAAM,MAAM,aAAa,EAAE;AAC3E,UAAO,MAAM,cAAc,eACvB,EAAE,OAAO,WAAW,GACpB,EAAE,QAAQ,WAAW;IACzB;EAEF,MAAM,cAAc,eAAe;AACjC,UAAO,MAAM,cAAc,eACvB,EAAE,OAAO,GAAG,MAAM,WAAW,KAAK,GAClC,EAAE,QAAQ,GAAG,MAAM,WAAW,KAAK;IACvC;EAGF,MAAM,oBAAoB,eAAe;AACvC,OAAI,MAAM,cAAc,aACtB,QAAO,iBAAiB,QAAQ,sBAAsB;AAExD,UAAO,iBAAiB,QAAQ,qBAAqB;IACrD;EAEF,MAAM,qBAAqB,eAAe;AACxC,OAAI,MAAM,cAAc,aACtB,QAAO,kBAAkB,QAAQ,qBAAqB;AAExD,UAAO,kBAAkB,QAAQ,mBAAmB;IACpD;AAGF,WAA8B;GAC5B;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;;uBApMA,mBAoEM,OAAA;aAnEA;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,gBAAc,kBACcA,KAAAA;+BAAyD,MAAA,WAAU;+BAAqCC,KAAAA;sCAAoD,MAAA,iBAAgB;uCAA6C,MAAA,kBAAiB;;;IAU5Q,mBAAA,QAAY;IACZ,mBAIM,OAAA;KAJD,OAAM;KAAkC,OAAK,eAAE,gBAAA,MAAe;QACjE,mBAEM,OAFN,YAEM,CADJ,WAAqB,KAAA,QAAA,SAAA,EAAA,EAAA,QAAA,KAAA;IAIzB,mBAAA,UAAc;IACd,mBAuCM,OAAA;KAtCJ,OAAM;KACL,OAAK,eAAE,YAAA,MAAW;KACnB,MAAK;KACJ,oBAAkBD,KAAAA,cAAS,eAAA,aAAA;KAC3B,iBAAe,KAAK,MAAM,MAAA,UAAS,CAAA;KACnC,iBAAe;KACf,iBAAe;KAChB,UAAS;KACR,aAAS,OAAA,OAAA,OAAA,kBAAE,MAAA,gBAAA,IAAA,MAAA,gBAAA,CAAA,GAAA,KAAe;KAC1B,cAAU,OAAA,OAAA,OAAA,KAAA,2BAAU,MAAA,gBAAA,IAAA,MAAA,gBAAA,CAAA,GAAA,KAAe,EAAA,CAAA,UAAA,CAAA;KACnC,YAAQ,OAAA,OAAA,OAAA,kBAAE,MAAA,kBAAA,IAAA,MAAA,kBAAA,CAAA,GAAA,KAAiB;KAC3B,WAAO,OAAA,OAAA,OAAA,kBAAE,MAAA,cAAA,IAAA,MAAA,cAAA,CAAA,GAAA,KAAa;;KAEvB,mBAIM,OAJN,YAIM,CAHJ,mBAEM,OAFN,YAEM,eADJ,mBAA0D,UAAA,MAAA,WAAxC,IAAL,MAAC;aAAd,mBAA0D,QAAA;OAApC,KAAK;OAAG,OAAM;;;KAIxC,mBAAA,SAAa;KACGE,KAAAA,sBAAsBC,KAAAA,4BAAtC,mBAiBW,UAAA,EAAA,KAAA,GAAA,EAAA,CAhBT,mBAOS,UAAA;MANP,OAAM;MACL,OAAO,MAAA,iBAAgB,GAAA,UAAA;MACvB,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,OAAM,CAAA,QAAA,EAAA,CAAA,OAAA,CAAA;MAClB,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAe,CAAA,OAAA,CAAA;SAEf,YAAoE,gBAAA;MAA3D,MAAM,kBAAA;MAAoB,MAAM;MAAI,OAAM;8CAErD,mBAOS,UAAA;MANP,OAAM;MACL,OAAO,MAAA,kBAAiB,GAAA,WAAA;MACxB,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,MAAA,OAAM,CAAA,SAAA,EAAA,CAAA,OAAA,CAAA;MAClB,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAe,CAAA,OAAA,CAAA;SAEf,YAAqE,gBAAA;MAA5D,MAAM,mBAAA;MAAqB,MAAM;MAAI,OAAM;;;IAK1D,mBAAA,SAAa;IACb,mBAIM,OAAA;KAJD,OAAM;KAAmC,OAAK,eAAE,iBAAA,MAAgB;QACnE,mBAEM,OAFN,YAEM,CADJ,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,QAAA,KAAA"}

package/dist/C_Steps-CODHN5Hs.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Steps-CODHN5Hs.css","names":[],"sources":["../src/components/C_Steps/index.vue?vue&type=style&index=0&scoped=0ccfa846&lang.scss"],"sourcesContent":[".c-steps[data-v-0ccfa846] {\n  --step-gap: 24px;\n  --icon-size: 32px;\n  --line-width: 2px;\n  --primary: var(--c-primary, #18a058);\n  --success: var(--c-success, #18a058);\n  --warning: var(--c-warning, #f0a020);\n  --error: var(--c-error, #d03050);\n  --border: var(--c-border, rgba(0, 0, 0, 0.09));\n  --bg-hover: rgba(0, 0, 0, 0.04);\n  display: flex;\n}\n.steps-horizontal[data-v-0ccfa846] {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.steps-vertical[data-v-0ccfa846] {\n  flex-direction: column;\n}\n.step-item[data-v-0ccfa846] {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: 12px;\n}\n.steps-horizontal .step-item[data-v-0ccfa846] {\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  min-width: 0;\n}\n.steps-vertical .step-item[data-v-0ccfa846] {\n  flex-direction: row;\n  min-height: 72px;\n  flex: none;\n  width: 100%;\n}\n.step-indicator[data-v-0ccfa846] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.steps-horizontal .step-indicator[data-v-0ccfa846] {\n  width: 100%;\n  justify-content: center;\n}\n.steps-vertical .step-indicator[data-v-0ccfa846] {\n  flex-direction: column;\n}\n.step-icon[data-v-0ccfa846] {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--line-width) solid var(--border);\n  background: var(--c-bg-card, #fff);\n  position: relative;\n  z-index: 1;\n  transition: all 0.2s ease;\n  font-size: 16px;\n}\n.step-finish .step-icon[data-v-0ccfa846] {\n  border-color: var(--success);\n  color: var(--success);\n}\n.step-process .step-icon[data-v-0ccfa846] {\n  border-color: var(--primary);\n  background: var(--primary);\n  color: white;\n}\n.step-error .step-icon[data-v-0ccfa846] {\n  border-color: var(--error);\n  color: var(--error);\n}\n.step-index[data-v-0ccfa846] {\n  font-size: 14px;\n  font-weight: 500;\n}\n.step-line[data-v-0ccfa846] {\n  background: var(--border);\n  position: absolute;\n  transition: background 0.2s ease;\n}\n.steps-horizontal .step-line[data-v-0ccfa846] {\n  height: var(--line-width);\n  left: calc(50% + var(--icon-size) / 2);\n  right: calc(-50% + var(--icon-size) / 2 + var(--step-gap));\n  top: calc(var(--icon-size) / 2);\n}\n.steps-vertical .step-line[data-v-0ccfa846] {\n  width: var(--line-width);\n  top: calc(var(--icon-size) + 4px);\n  bottom: calc(-72px + var(--icon-size) + 4px);\n  left: calc(var(--icon-size) / 2 - 1px);\n}\n.step-finish .step-line[data-v-0ccfa846] {\n  background: var(--success);\n}\n.step-content[data-v-0ccfa846] {\n  flex: 1;\n  min-width: 0;\n}\n.steps-vertical .step-content[data-v-0ccfa846] {\n  padding-top: 4px;\n}\n.step-title[data-v-0ccfa846] {\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 22px;\n  margin-bottom: 2px;\n  word-break: break-word;\n}\n.step-time[data-v-0ccfa846] {\n  font-size: 12px;\n  line-height: 20px;\n  margin-bottom: 2px;\n  opacity: 0.65;\n}\n.step-finish .step-time[data-v-0ccfa846] {\n  color: var(--success);\n}\n.step-description[data-v-0ccfa846] {\n  font-size: 12px;\n  line-height: 20px;\n  opacity: 0.65;\n}\n.step-wait .step-title[data-v-0ccfa846] {\n  opacity: 0.65;\n}\n.step-process .step-title[data-v-0ccfa846] {\n  color: var(--primary);\n  font-weight: 600;\n}\n.step-error .step-title[data-v-0ccfa846] {\n  color: var(--error);\n}\n.step-clickable[data-v-0ccfa846] {\n  cursor: pointer;\n}\n.step-clickable:hover .step-icon[data-v-0ccfa846] {\n  transform: scale(1.05);\n}\n.step-clickable:not(.step-process):hover .step-icon[data-v-0ccfa846] {\n  background: var(--bg-hover);\n}\n.step-clickable:hover .step-title[data-v-0ccfa846] {\n  color: var(--primary);\n}\n@media (max-width: 768px) {\n.steps-horizontal[data-v-0ccfa846] {\n    flex-wrap: wrap;\n}\n.steps-horizontal .step-item[data-v-0ccfa846] {\n    flex: 0 0 50%;\n    margin-bottom: 24px;\n}\n.steps-horizontal .step-line[data-v-0ccfa846] {\n    display: none;\n}\n}\n@media (prefers-reduced-motion: reduce) {\n.step-icon[data-v-0ccfa846],\n  .step-line[data-v-0ccfa846] {\n    transition: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}