@robot-admin/naive-ui-components 0.10.3 → 0.11.1

package/dist/C_VtableGantt2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"C_VtableGantt2.js","names":["showToolbar","title","showFullscreenButton"],"sources":["../src/components/C_VtableGantt/data.ts","../src/components/C_VtableGantt/index.vue","../src/components/C_VtableGantt/index.vue"],"sourcesContent":["// 甘特图相关类型定义和预设配置\n\n// ==================== 类型定义 ====================\nexport interface GanttTask {\n  id: string | number\n  title: string\n  start: string | Date\n  end?: string | Date\n  progress?: number\n  priority?: string\n  type?: 'milestone' | 'task'\n  children?: GanttTask[]\n  [key: string]: any\n}\n\nexport interface GanttOptions {\n  [key: string]: any\n}\n\nexport type GanttPreset =\n  | 'basic'\n  | 'project'\n  | 'timeline'\n  | 'milestone'\n  | 'official'\n\n// ==================== 通用主题配置 ====================\n// 移除硬编码颜色，让背景透明以跟随系统主题\nexport const commonTheme = {\n  headerStyle: {\n    borderColor: 'rgba(128, 128, 128, 0.2)',\n    borderLineWidth: 1,\n    fontSize: 14,\n    fontWeight: 'bold',\n    // bgColor 留空或透明，自动跟随主题\n  },\n  bodyStyle: {\n    borderColor: 'rgba(128, 128, 128, 0.2)',\n    borderLineWidth: [1, 0, 1, 0],\n    fontSize: 13,\n    // bgColor 留空或透明，自动跟随主题\n  },\n}\n\n// ==================== 预设配置 ====================\nexport const presetConfigs = {\n  basic: {\n    overscrollBehavior: 'none',\n    headerRowHeight: 40,\n    rowHeight: 40,\n    taskListTable: {\n      columns: [\n        { field: 'title', title: '任务名称', width: 220, tree: true },\n        { field: 'start', title: '开始时间', width: 120 },\n        { field: 'end', title: '结束时间', width: 120 },\n        { field: 'progress', title: '进度', width: 80 },\n      ],\n      tableWidth: 420,\n      minTableWidth: 300,\n      theme: commonTheme,\n    },\n    frame: {\n      outerFrameStyle: {\n        borderLineWidth: 1,\n        borderColor: '#e1e4e8',\n        cornerRadius: 6,\n      },\n      verticalSplitLineMoveable: true,\n      verticalSplitLine: { lineColor: '#e1e4e8', lineWidth: 2 },\n    },\n    grid: {\n      // 移除 weekendBackgroundColor，让它透明跟随主题\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n    },\n    taskBar: {\n      startDateField: 'start',\n      endDateField: 'end',\n      progressField: 'progress',\n      moveable: true,\n      resizable: true,\n      labelText: '{title}',\n      labelTextStyle: { fontSize: 12, textAlign: 'left' },\n      barStyle: {\n        width: 18,\n        barColor: '#1890ff',\n        completedBarColor: '#52c41a',\n        cornerRadius: 4,\n        borderLineWidth: 0,\n      },\n      milestoneStyle: {\n        borderColor: '#fa8c16',\n        borderLineWidth: 1,\n        fillColor: '#ffd666',\n        width: 12,\n      },\n    },\n    timelineHeader: {\n      // 移除 backgroundColor，让它透明跟随主题\n      colWidth: 60,\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n      scales: [\n        {\n          unit: 'week',\n          step: 1,\n          format: (date: any) => `第${date.dateIndex}周`,\n          style: { fontSize: 12, fontWeight: 'bold' },\n        },\n        {\n          unit: 'day',\n          step: 1,\n          format: (date: any) => `${date.dateIndex}`,\n          style: { fontSize: 11 },\n        },\n      ],\n    },\n    scrollStyle: {\n      scrollRailColor: 'rgba(246,246,246,0.5)',\n      visible: 'scrolling',\n      width: 6,\n      scrollSliderCornerRadius: 2,\n      scrollSliderColor: '#1890ff',\n    },\n  },\n\n  project: {\n    overscrollBehavior: 'none',\n    headerRowHeight: 40,\n    rowHeight: 40,\n    taskListTable: {\n      columns: [\n        {\n          field: 'title',\n          title: '任务名称',\n          width: 200,\n          tree: true,\n          editor: 'input',\n        },\n        {\n          field: 'start',\n          title: '开始时间',\n          width: 120,\n          editor: 'date-input',\n        },\n        { field: 'end', title: '结束时间', width: 120, editor: 'date-input' },\n        { field: 'priority', title: '优先级', width: 80, editor: 'input' },\n        { field: 'progress', title: '进度%', width: 80, editor: 'input' },\n      ],\n      tableWidth: 480,\n      minTableWidth: 350,\n      maxTableWidth: 800,\n      theme: commonTheme,\n      hierarchyExpandLevel: 2,\n    },\n    frame: {\n      outerFrameStyle: {\n        borderLineWidth: 2,\n        borderColor: '#e1e4e8',\n        cornerRadius: 8,\n      },\n      verticalSplitLineMoveable: true,\n      verticalSplitLine: { lineColor: '#e1e4e8', lineWidth: 3 },\n    },\n    grid: {\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n    },\n    taskBar: {\n      startDateField: 'start',\n      endDateField: 'end',\n      progressField: 'progress',\n      moveable: true,\n      resizable: true,\n      hoverBarStyle: { barOverlayColor: 'rgba(24, 144, 255, 0.3)' },\n      labelText: '{title} {progress}%',\n      labelTextStyle: {\n        fontSize: 12,\n        textAlign: 'left',\n        textOverflow: 'ellipsis',\n      },\n      barStyle: {\n        width: 20,\n        barColor: '#1890ff',\n        completedBarColor: '#52c41a',\n        cornerRadius: 6,\n        borderLineWidth: 0,\n      },\n    },\n    timelineHeader: {\n      colWidth: 60,\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n      scales: [\n        {\n          unit: 'week',\n          step: 1,\n          startOfWeek: 'monday',\n          format: (date: any) => `第${date.dateIndex}周`,\n          style: { fontSize: 13, fontWeight: 'bold', textAlign: 'center' },\n        },\n        {\n          unit: 'day',\n          step: 1,\n          format: (date: any) => `${date.dateIndex}`,\n          style: { fontSize: 11, textAlign: 'center' },\n        },\n      ],\n    },\n    rowSeriesNumber: {\n      title: '序号',\n      dragOrder: true,\n      headerStyle: { borderColor: 'rgba(128, 128, 128, 0.2)' },\n      style: { borderColor: 'rgba(128, 128, 128, 0.2)' },\n    },\n    scrollStyle: {\n      scrollRailColor: 'rgba(246,246,246,0.5)',\n      visible: 'scrolling',\n      width: 6,\n      scrollSliderCornerRadius: 2,\n      scrollSliderColor: '#1890ff',\n    },\n  },\n\n  timeline: {\n    overscrollBehavior: 'none',\n    headerRowHeight: 45,\n    rowHeight: 40,\n    taskListTable: {\n      columns: [\n        { field: 'title', title: '事件名称', width: 250, tree: true },\n        { field: 'start', title: '时间', width: 150 },\n      ],\n      tableWidth: 400,\n      minTableWidth: 300,\n      theme: {\n        headerStyle: { ...commonTheme.headerStyle },\n        bodyStyle: commonTheme.bodyStyle,\n      },\n    },\n    frame: {\n      outerFrameStyle: {\n        borderLineWidth: 1,\n        borderColor: 'rgba(128, 128, 128, 0.3)',\n        cornerRadius: 4,\n      },\n      verticalSplitLineMoveable: true,\n    },\n    grid: {\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n    },\n    taskBar: {\n      startDateField: 'start',\n      endDateField: 'end',\n      progressField: 'progress',\n      moveable: true,\n      resizable: true,\n      labelText: '{title}',\n      labelTextStyle: { fontSize: 12, textAlign: 'left' },\n      barStyle: {\n        width: 22,\n        barColor: '#722ed1',\n        completedBarColor: '#b37feb',\n        cornerRadius: 8,\n        borderLineWidth: 0,\n      },\n    },\n    timelineHeader: {\n      colWidth: 60,\n      scales: [\n        {\n          unit: 'month',\n          step: 1,\n          format: (date: any) => `${date.dateIndex}月`,\n          style: { fontSize: 13, fontWeight: 'bold' },\n        },\n        {\n          unit: 'day',\n          step: 1,\n          format: (date: any) => `${date.dateIndex}`,\n          style: { fontSize: 11 },\n        },\n      ],\n    },\n    scrollStyle: {\n      scrollRailColor: 'rgba(246,246,246,0.5)',\n      visible: 'scrolling',\n      width: 6,\n      scrollSliderCornerRadius: 2,\n      scrollSliderColor: '#1890ff',\n    },\n  },\n\n  milestone: {\n    overscrollBehavior: 'none',\n    headerRowHeight: 40,\n    rowHeight: 38,\n    taskListTable: {\n      columns: [\n        { field: 'title', title: '里程碑', width: 200, tree: true },\n        { field: 'start', title: '目标日期', width: 120 },\n        { field: 'priority', title: '重要性', width: 100 },\n      ],\n      tableWidth: 400,\n      minTableWidth: 300,\n      theme: {\n        headerStyle: {\n          ...commonTheme.headerStyle,\n          borderColor: '#ffa940',\n        },\n        bodyStyle: { ...commonTheme.bodyStyle, borderColor: '#ffa940' },\n      },\n    },\n    frame: {\n      outerFrameStyle: {\n        borderLineWidth: 2,\n        borderColor: '#ffa940',\n        cornerRadius: 6,\n      },\n      verticalSplitLineMoveable: true,\n    },\n    grid: {\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(255, 168, 64, 0.3)' },\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(255, 168, 64, 0.3)' },\n    },\n    taskBar: {\n      startDateField: 'start',\n      endDateField: 'start',\n      labelText: '{title}',\n      labelTextStyle: { fontSize: 12, fontWeight: 'bold' },\n      barStyle: { width: 0, barColor: 'transparent' },\n      milestoneStyle: {\n        borderColor: '#fa8c16',\n        borderLineWidth: 2,\n        fillColor: '#ffd666',\n        width: 16,\n      },\n    },\n    timelineHeader: {\n      colWidth: 80,\n      scales: [\n        {\n          unit: 'month',\n          step: 1,\n          format: (date: any) => `${date.dateIndex}月`,\n          style: { fontSize: 13, fontWeight: 'bold' },\n        },\n        {\n          unit: 'week',\n          step: 1,\n          format: (date: any) => `第${date.dateIndex}周`,\n          style: { fontSize: 11 },\n        },\n      ],\n    },\n    scrollStyle: {\n      scrollRailColor: 'rgba(246,246,246,0.5)',\n      visible: 'scrolling',\n      width: 6,\n      scrollSliderCornerRadius: 2,\n      scrollSliderColor: '#1890ff',\n    },\n  },\n\n  official: {\n    overscrollBehavior: 'none',\n    headerRowHeight: 40,\n    rowHeight: 40,\n    taskListTable: {\n      columns: [\n        {\n          field: 'title',\n          title: 'title',\n          width: 180,\n          sort: true,\n          tree: true,\n          editor: 'input',\n        },\n        {\n          field: 'start',\n          title: 'start',\n          width: 120,\n          sort: true,\n          editor: 'date-input',\n        },\n        {\n          field: 'end',\n          title: 'end',\n          width: 120,\n          sort: true,\n          editor: 'date-input',\n        },\n        {\n          field: 'priority',\n          title: 'priority',\n          width: 80,\n          sort: true,\n          editor: 'input',\n        },\n        {\n          field: 'progress',\n          title: 'progress',\n          width: 80,\n          sort: true,\n          editor: 'input',\n        },\n      ],\n      tableWidth: 460,\n      minTableWidth: 350,\n      maxTableWidth: 800,\n      theme: {\n        headerStyle: {\n          ...commonTheme.headerStyle,\n          fontSize: 18,\n          color: 'red',\n        },\n        bodyStyle: {\n          ...commonTheme.bodyStyle,\n          fontSize: 16,\n          color: '#4D4D4D',\n        },\n      },\n      hierarchyExpandLevel: 2,\n    },\n    frame: {\n      outerFrameStyle: {\n        borderLineWidth: 2,\n        borderColor: '#e1e4e8',\n        cornerRadius: 8,\n      },\n      verticalSplitLineMoveable: true,\n      verticalSplitLine: { lineColor: '#e1e4e8', lineWidth: 3 },\n      horizontalSplitLine: { lineColor: '#e1e4e8', lineWidth: 3 },\n    },\n    grid: {\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\n    },\n    taskBar: {\n      startDateField: 'start',\n      endDateField: 'end',\n      progressField: 'progress',\n      moveable: true,\n      resizable: true,\n      hoverBarStyle: { barOverlayColor: 'rgba(99, 144, 0, 0.4)' },\n      labelText: '{title} {progress}%',\n      labelTextStyle: {\n        fontSize: 16,\n        textAlign: 'left',\n        textOverflow: 'ellipsis',\n      },\n      barStyle: {\n        width: 20,\n        barColor: '#ee8800',\n        completedBarColor: '#91e8e0',\n        cornerRadius: 8,\n        borderLineWidth: 1,\n        borderColor: 'black',\n      },\n      milestoneStyle: {\n        borderColor: 'red',\n        borderLineWidth: 1,\n        fillColor: 'green',\n        width: 15,\n      },\n    },\n    timelineHeader: {\n      backgroundColor: '#EEF1F5',\n      colWidth: 60,\n      horizontalLine: { lineWidth: 1, lineColor: '#e1e4e8' },\n      verticalLine: { lineWidth: 1, lineColor: '#e1e4e8' },\n      scales: [\n        {\n          unit: 'week',\n          step: 1,\n          startOfWeek: 'sunday',\n          format: (date: any) => `Week ${date.dateIndex}`,\n          style: {\n            fontSize: 20,\n            fontWeight: 'bold',\n            color: 'white',\n            strokeColor: 'black',\n            textAlign: 'right',\n            textBaseline: 'bottom',\n            textStick: true,\n          },\n        },\n        {\n          unit: 'day',\n          step: 1,\n          format: (date: any) => date.dateIndex.toString(),\n          style: {\n            fontSize: 20,\n            fontWeight: 'bold',\n            color: 'white',\n            strokeColor: 'black',\n            textAlign: 'right',\n            textBaseline: 'bottom',\n          },\n        },\n      ],\n    },\n    markLine: [\n      {\n        date: '2024-07-28',\n        style: { lineWidth: 1, lineColor: 'blue', lineDash: [8, 4] },\n      },\n      {\n        date: '2024-08-17',\n        style: { lineWidth: 2, lineColor: 'red', lineDash: [8, 4] },\n      },\n    ],\n    rowSeriesNumber: {\n      title: '行号',\n      dragOrder: true,\n      headerStyle: { borderColor: 'rgba(128, 128, 128, 0.2)' },\n      style: { borderColor: 'rgba(128, 128, 128, 0.2)' },\n    },\n    scrollStyle: {\n      scrollRailColor: 'rgba(246,246,246,0.5)',\n      visible: 'scrolling',\n      width: 6,\n      scrollSliderCornerRadius: 2,\n      scrollSliderColor: '#1890ff',\n    },\n  },\n}\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-08-01\n * @Description: VTable 甘特图组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div class=\"c-vtable-gantt-wrapper\">\n    <div v-if=\"showToolbar\" class=\"gantt-toolbar\">\n      <div class=\"toolbar-left\">\n        <span class=\"gantt-title\">{{ title || \"甘特图\" }}</span>\n      </div>\n      <div class=\"toolbar-right\">\n        <NButton\n          v-if=\"showFullscreenButton\"\n          size=\"small\"\n          @click=\"toggleFullscreen\"\n        >\n          <template #icon>\n            <C_Icon\n              :name=\"isFullscreen ? 'carbon:minimize' : 'carbon:maximize'\"\n              :size=\"16\"\n              color=\"currentColor\"\n            />\n          </template>\n          {{ isFullscreen ? \"退出全屏\" : \"全屏\" }}\n        </NButton>\n      </div>\n    </div>\n    <div\n      ref=\"ganttContainerRef\"\n      class=\"gantt-container\"\n      :style=\"{ height: containerHeight }\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onUnmounted } from \"vue\";\nimport { NButton } from \"naive-ui\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport {\n  presetConfigs,\n  type GanttTask,\n  type GanttOptions,\n  type GanttPreset,\n} from \"./data\";\n\ndefineOptions({ name: \"C_VtableGantt\" });\n\ninterface Props {\n  data?: GanttTask[];\n  options?: GanttOptions;\n  preset?: GanttPreset;\n  height?: string | number;\n  title?: string;\n  showToolbar?: boolean;\n  showFullscreenButton?: boolean;\n  theme?: \"light\" | \"dark\";\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  data: () => [],\n  options: () => ({}),\n  preset: \"basic\",\n  height: \"600px\",\n  title: \"\",\n  showToolbar: true,\n  showFullscreenButton: true,\n  theme: \"light\",\n});\n\nconst emit = defineEmits<{\n  ganttCreated: [gantt: any];\n  taskClick: [task: GanttTask, event: Event];\n  taskChange: [task: GanttTask, changes: any];\n}>();\n\nconst ganttContainerRef = ref<HTMLDivElement>();\nconst ganttInstance = ref<any>();\nconst isFullscreen = ref(false);\n\nconst containerHeight = computed(() =>\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\n);\n\nconst deepMerge = (target: any, source: any, seen = new WeakMap()): any => {\n  if (!isObject(target)) return source;\n  if (!isObject(source)) return target;\n  if (seen.has(source)) return seen.get(source);\n  return createMergeResult(target, source, seen);\n};\n\nconst isObject = (value: any): boolean => {\n  return value !== null && typeof value === \"object\";\n};\n\nconst isSpecialObject = (value: any): boolean => {\n  return value instanceof Date || value instanceof RegExp;\n};\n\nconst createMergeResult = (\n  target: any,\n  source: any,\n  seen: WeakMap<any, any>,\n): any => {\n  const result = Array.isArray(target) ? [...target] : { ...target };\n  seen.set(source, result);\n  for (const key in source) {\n    if (!source.hasOwnProperty(key)) continue;\n    const sourceValue = source[key];\n    const shouldDeepMerge =\n      isObject(sourceValue) &&\n      !Array.isArray(sourceValue) &&\n      !isSpecialObject(sourceValue);\n    result[key] = shouldDeepMerge\n      ? deepMerge(target[key] || {}, sourceValue, seen)\n      : sourceValue;\n  }\n  return result;\n};\n\nconst processData = (data: GanttTask[]): GanttTask[] => {\n  return data.map((item) => ({\n    ...item,\n    title: item.title || `任务${item.id}`,\n    children: item.children ? processData(item.children) : undefined,\n  }));\n};\n\nconst getThemeConfig = (isDark: boolean) => ({\n  underlayBackgroundColor: isDark ? \"#1e1e1e\" : \"#ffffff\",\n  timelineHeaderBg: isDark ? \"#2d2d2d\" : \"#EEF1F5\",\n  gridBg: isDark ? \"#1e1e1e\" : \"#ffffff\",\n  lineColor: isDark ? \"rgba(255, 255, 255, 0.1)\" : \"rgba(128, 128, 128, 0.2)\",\n  textColor: isDark ? \"#ffffff\" : \"#000000\",\n});\n\nconst applyThemeToTimelineHeader = (timelineHeader: any, themeColors: any) => ({\n  ...timelineHeader,\n  backgroundColor: themeColors.timelineHeaderBg,\n  horizontalLine: {\n    ...timelineHeader?.horizontalLine,\n    lineColor: themeColors.lineColor,\n  },\n  verticalLine: {\n    ...timelineHeader?.verticalLine,\n    lineColor: themeColors.lineColor,\n  },\n  scales: timelineHeader?.scales?.map((scale: any) => ({\n    ...scale,\n    style: {\n      ...scale.style,\n      color: themeColors.textColor,\n    },\n  })),\n});\n\nconst applyThemeToGrid = (grid: any, themeColors: any) => ({\n  ...grid,\n  backgroundColor: themeColors.gridBg,\n  horizontalLine: {\n    ...grid?.horizontalLine,\n    lineColor: themeColors.lineColor,\n  },\n  verticalLine: {\n    ...grid?.verticalLine,\n    lineColor: themeColors.lineColor,\n  },\n});\n\nconst buildGanttOptions = (\n  finalConfig: any,\n  processedData: GanttTask[],\n  tableTheme: any,\n  themeColors: any,\n) => ({\n  ...finalConfig,\n  records: processedData,\n  underlayBackgroundColor: themeColors.underlayBackgroundColor,\n  taskListTable: {\n    ...finalConfig.taskListTable,\n    theme: tableTheme,\n  },\n  timelineHeader: applyThemeToTimelineHeader(\n    finalConfig.timelineHeader,\n    themeColors,\n  ),\n  grid: applyThemeToGrid(finalConfig.grid, themeColors),\n});\n\nconst bindGanttEvents = (instance: any) => {\n  instance.on(\"click_cell\", (args: any) => {\n    const { record, event } = args || {};\n    if (record) emit(\"taskClick\", record, event);\n  });\n  instance.on(\"change_data\", (args: any) => {\n    const { record, changes } = args || {};\n    if (record && changes) emit(\"taskChange\", record, changes);\n  });\n};\n\nconst initGantt = async () => {\n  if (!ganttContainerRef.value) return;\n  try {\n    const { Gantt } = await import(\"@visactor/vtable-gantt\");\n    const { themes } = await import(\"@visactor/vtable\");\n    const isDark = props.theme === \"dark\";\n    const presetConfig = presetConfigs[props.preset] || presetConfigs.basic;\n    const finalConfig = deepMerge(presetConfig, props.options);\n    const processedData = processData(props.data || []);\n    if (ganttInstance.value) ganttInstance.value.release();\n    const tableTheme = isDark ? themes.DARK : themes.DEFAULT;\n    const themeColors = getThemeConfig(isDark);\n    const ganttOptions = buildGanttOptions(\n      finalConfig,\n      processedData,\n      tableTheme,\n      themeColors,\n    );\n    ganttInstance.value = new Gantt(ganttContainerRef.value, ganttOptions);\n    bindGanttEvents(ganttInstance.value);\n    emit(\"ganttCreated\", ganttInstance.value);\n  } catch (error) {\n    console.error(\"甘特图初始化失败:\", error);\n  }\n};\n\nconst toggleFullscreen = async () => {\n  if (!ganttContainerRef.value) return;\n  try {\n    if (!document.fullscreenElement) {\n      await ganttContainerRef.value.requestFullscreen();\n      isFullscreen.value = true;\n    } else {\n      await document.exitFullscreen();\n      isFullscreen.value = false;\n    }\n    setTimeout(() => ganttInstance.value?.resize?.(), 100);\n  } catch (error) {\n    console.warn(\"全屏切换失败:\", error);\n    isFullscreen.value = !isFullscreen.value;\n    nextTick(() => ganttInstance.value?.resize?.());\n  }\n};\n\nconst handleFullscreenChange = () => {\n  isFullscreen.value = !!document.fullscreenElement;\n  nextTick(() => ganttInstance.value?.resize?.());\n};\n\nconst updateData = (newData: GanttTask[]) => {\n  if (ganttInstance.value && newData) {\n    try {\n      ganttInstance.value.setRecords(processData(newData));\n    } catch (error) {\n      console.warn(\"更新数据失败:\", error);\n    }\n  }\n};\n\nconst updateOptions = (newOptions: GanttOptions) => {\n  if (ganttInstance.value && newOptions) {\n    try {\n      ganttInstance.value.updateOption(newOptions);\n    } catch (error) {\n      console.warn(\"更新配置失败:\", error);\n    }\n  }\n};\n\nconst destroyGantt = () => {\n  if (ganttInstance.value) {\n    try {\n      ganttInstance.value.release();\n    } catch (error) {\n      console.warn(\"销毁甘特图失败:\", error);\n    } finally {\n      ganttInstance.value = undefined;\n    }\n  }\n};\n\nwatch(\n  () => props.data,\n  (newData) => {\n    if (newData && ganttInstance.value) updateData(newData);\n  },\n  { deep: true },\n);\n\nwatch(\n  () => [props.options, props.preset],\n  () => nextTick(() => initGantt()),\n  { deep: true },\n);\n\nwatch(\n  () => props.theme,\n  () => nextTick(() => initGantt()),\n);\n\nonMounted(() => {\n  document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n  nextTick(() => setTimeout(() => initGantt(), 100));\n});\n\nonUnmounted(() => {\n  document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n  destroyGantt();\n});\n\ndefineExpose({\n  ganttInstance,\n  updateData,\n  updateOptions,\n  toggleFullscreen,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-08-01\n * @Description: VTable 甘特图组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div class=\"c-vtable-gantt-wrapper\">\n    <div v-if=\"showToolbar\" class=\"gantt-toolbar\">\n      <div class=\"toolbar-left\">\n        <span class=\"gantt-title\">{{ title || \"甘特图\" }}</span>\n      </div>\n      <div class=\"toolbar-right\">\n        <NButton\n          v-if=\"showFullscreenButton\"\n          size=\"small\"\n          @click=\"toggleFullscreen\"\n        >\n          <template #icon>\n            <C_Icon\n              :name=\"isFullscreen ? 'carbon:minimize' : 'carbon:maximize'\"\n              :size=\"16\"\n              color=\"currentColor\"\n            />\n          </template>\n          {{ isFullscreen ? \"退出全屏\" : \"全屏\" }}\n        </NButton>\n      </div>\n    </div>\n    <div\n      ref=\"ganttContainerRef\"\n      class=\"gantt-container\"\n      :style=\"{ height: containerHeight }\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onUnmounted } from \"vue\";\nimport { NButton } from \"naive-ui\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport {\n  presetConfigs,\n  type GanttTask,\n  type GanttOptions,\n  type GanttPreset,\n} from \"./data\";\n\ndefineOptions({ name: \"C_VtableGantt\" });\n\ninterface Props {\n  data?: GanttTask[];\n  options?: GanttOptions;\n  preset?: GanttPreset;\n  height?: string | number;\n  title?: string;\n  showToolbar?: boolean;\n  showFullscreenButton?: boolean;\n  theme?: \"light\" | \"dark\";\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  data: () => [],\n  options: () => ({}),\n  preset: \"basic\",\n  height: \"600px\",\n  title: \"\",\n  showToolbar: true,\n  showFullscreenButton: true,\n  theme: \"light\",\n});\n\nconst emit = defineEmits<{\n  ganttCreated: [gantt: any];\n  taskClick: [task: GanttTask, event: Event];\n  taskChange: [task: GanttTask, changes: any];\n}>();\n\nconst ganttContainerRef = ref<HTMLDivElement>();\nconst ganttInstance = ref<any>();\nconst isFullscreen = ref(false);\n\nconst containerHeight = computed(() =>\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\n);\n\nconst deepMerge = (target: any, source: any, seen = new WeakMap()): any => {\n  if (!isObject(target)) return source;\n  if (!isObject(source)) return target;\n  if (seen.has(source)) return seen.get(source);\n  return createMergeResult(target, source, seen);\n};\n\nconst isObject = (value: any): boolean => {\n  return value !== null && typeof value === \"object\";\n};\n\nconst isSpecialObject = (value: any): boolean => {\n  return value instanceof Date || value instanceof RegExp;\n};\n\nconst createMergeResult = (\n  target: any,\n  source: any,\n  seen: WeakMap<any, any>,\n): any => {\n  const result = Array.isArray(target) ? [...target] : { ...target };\n  seen.set(source, result);\n  for (const key in source) {\n    if (!source.hasOwnProperty(key)) continue;\n    const sourceValue = source[key];\n    const shouldDeepMerge =\n      isObject(sourceValue) &&\n      !Array.isArray(sourceValue) &&\n      !isSpecialObject(sourceValue);\n    result[key] = shouldDeepMerge\n      ? deepMerge(target[key] || {}, sourceValue, seen)\n      : sourceValue;\n  }\n  return result;\n};\n\nconst processData = (data: GanttTask[]): GanttTask[] => {\n  return data.map((item) => ({\n    ...item,\n    title: item.title || `任务${item.id}`,\n    children: item.children ? processData(item.children) : undefined,\n  }));\n};\n\nconst getThemeConfig = (isDark: boolean) => ({\n  underlayBackgroundColor: isDark ? \"#1e1e1e\" : \"#ffffff\",\n  timelineHeaderBg: isDark ? \"#2d2d2d\" : \"#EEF1F5\",\n  gridBg: isDark ? \"#1e1e1e\" : \"#ffffff\",\n  lineColor: isDark ? \"rgba(255, 255, 255, 0.1)\" : \"rgba(128, 128, 128, 0.2)\",\n  textColor: isDark ? \"#ffffff\" : \"#000000\",\n});\n\nconst applyThemeToTimelineHeader = (timelineHeader: any, themeColors: any) => ({\n  ...timelineHeader,\n  backgroundColor: themeColors.timelineHeaderBg,\n  horizontalLine: {\n    ...timelineHeader?.horizontalLine,\n    lineColor: themeColors.lineColor,\n  },\n  verticalLine: {\n    ...timelineHeader?.verticalLine,\n    lineColor: themeColors.lineColor,\n  },\n  scales: timelineHeader?.scales?.map((scale: any) => ({\n    ...scale,\n    style: {\n      ...scale.style,\n      color: themeColors.textColor,\n    },\n  })),\n});\n\nconst applyThemeToGrid = (grid: any, themeColors: any) => ({\n  ...grid,\n  backgroundColor: themeColors.gridBg,\n  horizontalLine: {\n    ...grid?.horizontalLine,\n    lineColor: themeColors.lineColor,\n  },\n  verticalLine: {\n    ...grid?.verticalLine,\n    lineColor: themeColors.lineColor,\n  },\n});\n\nconst buildGanttOptions = (\n  finalConfig: any,\n  processedData: GanttTask[],\n  tableTheme: any,\n  themeColors: any,\n) => ({\n  ...finalConfig,\n  records: processedData,\n  underlayBackgroundColor: themeColors.underlayBackgroundColor,\n  taskListTable: {\n    ...finalConfig.taskListTable,\n    theme: tableTheme,\n  },\n  timelineHeader: applyThemeToTimelineHeader(\n    finalConfig.timelineHeader,\n    themeColors,\n  ),\n  grid: applyThemeToGrid(finalConfig.grid, themeColors),\n});\n\nconst bindGanttEvents = (instance: any) => {\n  instance.on(\"click_cell\", (args: any) => {\n    const { record, event } = args || {};\n    if (record) emit(\"taskClick\", record, event);\n  });\n  instance.on(\"change_data\", (args: any) => {\n    const { record, changes } = args || {};\n    if (record && changes) emit(\"taskChange\", record, changes);\n  });\n};\n\nconst initGantt = async () => {\n  if (!ganttContainerRef.value) return;\n  try {\n    const { Gantt } = await import(\"@visactor/vtable-gantt\");\n    const { themes } = await import(\"@visactor/vtable\");\n    const isDark = props.theme === \"dark\";\n    const presetConfig = presetConfigs[props.preset] || presetConfigs.basic;\n    const finalConfig = deepMerge(presetConfig, props.options);\n    const processedData = processData(props.data || []);\n    if (ganttInstance.value) ganttInstance.value.release();\n    const tableTheme = isDark ? themes.DARK : themes.DEFAULT;\n    const themeColors = getThemeConfig(isDark);\n    const ganttOptions = buildGanttOptions(\n      finalConfig,\n      processedData,\n      tableTheme,\n      themeColors,\n    );\n    ganttInstance.value = new Gantt(ganttContainerRef.value, ganttOptions);\n    bindGanttEvents(ganttInstance.value);\n    emit(\"ganttCreated\", ganttInstance.value);\n  } catch (error) {\n    console.error(\"甘特图初始化失败:\", error);\n  }\n};\n\nconst toggleFullscreen = async () => {\n  if (!ganttContainerRef.value) return;\n  try {\n    if (!document.fullscreenElement) {\n      await ganttContainerRef.value.requestFullscreen();\n      isFullscreen.value = true;\n    } else {\n      await document.exitFullscreen();\n      isFullscreen.value = false;\n    }\n    setTimeout(() => ganttInstance.value?.resize?.(), 100);\n  } catch (error) {\n    console.warn(\"全屏切换失败:\", error);\n    isFullscreen.value = !isFullscreen.value;\n    nextTick(() => ganttInstance.value?.resize?.());\n  }\n};\n\nconst handleFullscreenChange = () => {\n  isFullscreen.value = !!document.fullscreenElement;\n  nextTick(() => ganttInstance.value?.resize?.());\n};\n\nconst updateData = (newData: GanttTask[]) => {\n  if (ganttInstance.value && newData) {\n    try {\n      ganttInstance.value.setRecords(processData(newData));\n    } catch (error) {\n      console.warn(\"更新数据失败:\", error);\n    }\n  }\n};\n\nconst updateOptions = (newOptions: GanttOptions) => {\n  if (ganttInstance.value && newOptions) {\n    try {\n      ganttInstance.value.updateOption(newOptions);\n    } catch (error) {\n      console.warn(\"更新配置失败:\", error);\n    }\n  }\n};\n\nconst destroyGantt = () => {\n  if (ganttInstance.value) {\n    try {\n      ganttInstance.value.release();\n    } catch (error) {\n      console.warn(\"销毁甘特图失败:\", error);\n    } finally {\n      ganttInstance.value = undefined;\n    }\n  }\n};\n\nwatch(\n  () => props.data,\n  (newData) => {\n    if (newData && ganttInstance.value) updateData(newData);\n  },\n  { deep: true },\n);\n\nwatch(\n  () => [props.options, props.preset],\n  () => nextTick(() => initGantt()),\n  { deep: true },\n);\n\nwatch(\n  () => props.theme,\n  () => nextTick(() => initGantt()),\n);\n\nonMounted(() => {\n  document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n  nextTick(() => setTimeout(() => initGantt(), 100));\n});\n\nonUnmounted(() => {\n  document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n  destroyGantt();\n});\n\ndefineExpose({\n  ganttInstance,\n  updateData,\n  updateOptions,\n  toggleFullscreen,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}

package/dist/C_WaterFall-BJ_39ext.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"C_WaterFall-BJ_39ext.css","names":[],"sources":["../src/components/C_WaterFall/index.vue?vue&type=style&index=0&scoped=d436c326&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-waterfall[data-v-d436c326] {\n  width: 100%;\n}\n.waterfall__body[data-v-d436c326] {\n  overflow: hidden;\n}\n.waterfall__item[data-v-d436c326] {\n  cursor: pointer;\n}\n.waterfall__card[data-v-d436c326] {\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--border-color);\n  background: var(--card-color);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n}\n.waterfall__card[data-v-d436c326]:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n.waterfall__image[data-v-d436c326] {\n  display: block;\n  width: 100%;\n  object-fit: cover;\n  background: var(--body-color);\n}\n.waterfall__title[data-v-d436c326] {\n  padding: 10px 12px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--text-color-1);\n  word-break: break-all;\n}\n.waterfall__skeleton[data-v-d436c326] {\n  overflow: hidden;\n  border-radius: 8px;\n}\n.waterfall__skeleton-inner[data-v-d436c326] {\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: linear-gradient(90deg, var(--body-color) 25%, color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%, var(--body-color) 63%);\n  background-size: 400% 100%;\n  animation: shimmer-d436c326 1.4s ease infinite;\n}\n@keyframes shimmer-d436c326 {\n0% {\n    background-position: 100% 50%;\n}\n100% {\n    background-position: 0 50%;\n}\n}\n.waterfall__footer[data-v-d436c326] {\n  padding: 24px 0;\n  text-align: center;\n}\n.waterfall__sentinel[data-v-d436c326] {\n  height: 1px;\n}\n.waterfall__status[data-v-d436c326] {\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  font-size: 13px;\n  color: var(--text-color-3);\n}\n.waterfall__status--done[data-v-d436c326] {\n  color: var(--text-color-4);\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"}

package/dist/C_WaterFall-cYc1vntE.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"C_WaterFall-cYc1vntE.css","names":[],"sources":["../src/components/C_WaterFall/index.vue?vue&type=style&index=0&scoped=d436c326&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-waterfall[data-v-d436c326] {\n  width: 100%;\n}\n.waterfall__body[data-v-d436c326] {\n  overflow: hidden;\n}\n.waterfall__item[data-v-d436c326] {\n  cursor: pointer;\n}\n.waterfall__card[data-v-d436c326] {\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--border-color);\n  background: var(--card-color);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n}\n.waterfall__card[data-v-d436c326]:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n.waterfall__image[data-v-d436c326] {\n  display: block;\n  width: 100%;\n  object-fit: cover;\n  background: var(--body-color);\n}\n.waterfall__title[data-v-d436c326] {\n  padding: 10px 12px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--text-color-1);\n  word-break: break-all;\n}\n.waterfall__skeleton[data-v-d436c326] {\n  overflow: hidden;\n  border-radius: 8px;\n}\n.waterfall__skeleton-inner[data-v-d436c326] {\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: linear-gradient(90deg, var(--body-color) 25%, color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%, var(--body-color) 63%);\n  background-size: 400% 100%;\n  animation: shimmer-d436c326 1.4s ease infinite;\n}\n@keyframes shimmer-d436c326 {\n0% {\n    background-position: 100% 50%;\n}\n100% {\n    background-position: 0 50%;\n}\n}\n.waterfall__footer[data-v-d436c326] {\n  padding: 24px 0;\n  text-align: center;\n}\n.waterfall__sentinel[data-v-d436c326] {\n  height: 1px;\n}\n.waterfall__status[data-v-d436c326] {\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  font-size: 13px;\n  color: var(--text-color-3);\n}\n.waterfall__status--done[data-v-d436c326] {\n  color: var(--text-color-4);\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"}

package/dist/C_WaterFall.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"C_WaterFall.js","names":[],"sources":["../src/components/C_WaterFall/constants.ts","../src/components/C_WaterFall/composables/useResponsiveColumns.ts","../src/components/C_WaterFall/composables/useWaterFallLayout.ts","../src/components/C_WaterFall/composables/useInfiniteScroll.ts","../src/components/C_WaterFall/index.vue","../src/components/C_WaterFall/index.vue"],"sourcesContent":["import type { WaterFallBreakpoint } from \"./types\";\r\n\r\nexport const DEFAULT_GAP = 16;\r\nexport const DEFAULT_ANIMATION_DURATION = 300;\r\nexport const DEFAULT_SKELETON_COUNT = 8;\r\nexport const INFINITE_SCROLL_THRESHOLD = 200;\r\n\r\nexport const DEFAULT_BREAKPOINTS: WaterFallBreakpoint[] = [\r\n  { minWidth: 1600, columns: 6 },\r\n  { minWidth: 1200, columns: 5 },\r\n  { minWidth: 992, columns: 4 },\r\n  { minWidth: 768, columns: 3 },\r\n  { minWidth: 480, columns: 2 },\r\n  { minWidth: 0, columns: 1 },\r\n];\r\n\r\nexport const SKELETON_HEIGHT_RANGE: [number, number] = [180, 360];\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { WaterFallBreakpoint } from \"../types\";\r\nimport { DEFAULT_BREAKPOINTS } from \"../constants\";\r\n\r\nexport function useResponsiveColumns(\r\n  containerRef: Ref<HTMLElement | undefined>,\r\n  fixedColumns?: Ref<number | undefined>,\r\n  breakpoints?: Ref<WaterFallBreakpoint[] | undefined>,\r\n) {\r\n  const columns = ref(4);\r\n  const containerWidth = ref(0);\r\n\r\n  function resolveColumns(width: number): number {\r\n    if (fixedColumns?.value && fixedColumns.value > 0)\r\n      return fixedColumns.value;\r\n    const bps = breakpoints?.value?.length\r\n      ? breakpoints.value\r\n      : DEFAULT_BREAKPOINTS;\r\n    const sorted = [...bps].sort((a, b) => b.minWidth - a.minWidth);\r\n    for (const bp of sorted) {\r\n      if (width >= bp.minWidth) return bp.columns;\r\n    }\r\n    return 1;\r\n  }\r\n\r\n  let resizeObserver: ResizeObserver | null = null;\r\n\r\n  function startObserving() {\r\n    const el = containerRef.value;\r\n    if (!el) return;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      for (const entry of entries) {\r\n        const { width } = entry.contentRect;\r\n        containerWidth.value = width;\r\n        columns.value = resolveColumns(width);\r\n      }\r\n    });\r\n    resizeObserver.observe(el);\r\n    const rect = el.getBoundingClientRect();\r\n    containerWidth.value = rect.width;\r\n    columns.value = resolveColumns(rect.width);\r\n  }\r\n\r\n  function stopObserving() {\r\n    resizeObserver?.disconnect();\r\n    resizeObserver = null;\r\n  }\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch(containerRef, () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  watch([() => fixedColumns?.value, () => breakpoints?.value], () => {\r\n    if (containerWidth.value > 0) {\r\n      columns.value = resolveColumns(containerWidth.value);\r\n    }\r\n  });\r\n\r\n  return {\r\n    columns: readonly(columns),\r\n    containerWidth: readonly(containerWidth),\r\n  };\r\n}\r\n","import { ref, readonly, watch } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallColumn,\r\n} from \"../types\";\r\nimport { DEFAULT_GAP } from \"../constants\";\r\n\r\nexport function useWaterFallLayout(\r\n  items: Ref<WaterFallItem[]>,\r\n  columns: Readonly<Ref<number>>,\r\n  containerWidth: Readonly<Ref<number>>,\r\n  gap: Ref<number>,\r\n) {\r\n  const layoutItems = ref<WaterFallLayoutItem[]>([]);\r\n  const containerHeight = ref(0);\r\n  const imageHeightCache = new Map<string | number, number>();\r\n\r\n  function cacheImageHeight(id: string | number, realHeight: number) {\r\n    imageHeightCache.set(id, realHeight);\r\n  }\r\n\r\n  function calculate() {\r\n    const cols = columns.value;\r\n    const width = containerWidth.value;\r\n    const g = gap.value ?? DEFAULT_GAP;\r\n\r\n    if (cols <= 0 || width <= 0 || items.value.length === 0) {\r\n      layoutItems.value = [];\r\n      containerHeight.value = 0;\r\n      return;\r\n    }\r\n\r\n    const colWidth = (width - (cols - 1) * g) / cols;\r\n    const columnState: WaterFallColumn[] = Array.from(\r\n      { length: cols },\r\n      (_, i) => ({ index: i, height: 0 }),\r\n    );\r\n\r\n    const result: WaterFallLayoutItem[] = [];\r\n\r\n    for (const item of items.value) {\r\n      const shortest = columnState.reduce((min, col) =>\r\n        col.height < min.height ? col : min,\r\n      );\r\n\r\n      const cached = imageHeightCache.get(item.id);\r\n      const itemHeight = cached\r\n        ? cached\r\n        : item.width > 0\r\n          ? (item.height / item.width) * colWidth\r\n          : colWidth;\r\n\r\n      const x = shortest.index * (colWidth + g);\r\n      const y = shortest.height;\r\n\r\n      result.push({\r\n        item,\r\n        columnIndex: shortest.index,\r\n        x,\r\n        y,\r\n        width: colWidth,\r\n        height: itemHeight,\r\n      });\r\n\r\n      shortest.height = y + itemHeight + g;\r\n    }\r\n\r\n    layoutItems.value = result;\r\n    containerHeight.value = Math.max(...columnState.map((c) => c.height)) - g;\r\n  }\r\n\r\n  watch(\r\n    [items, () => items.value.length, columns, containerWidth, gap],\r\n    calculate,\r\n    { immediate: true },\r\n  );\r\n\r\n  return {\r\n    layoutItems: readonly(layoutItems),\r\n    containerHeight: readonly(containerHeight),\r\n    cacheImageHeight,\r\n    relayout: calculate,\r\n  };\r\n}\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { InfiniteScrollStatus } from \"../types\";\r\nimport { INFINITE_SCROLL_THRESHOLD } from \"../constants\";\r\n\r\nexport function useInfiniteScroll(\r\n  sentinelRef: Ref<HTMLElement | undefined>,\r\n  enabled: Ref<boolean>,\r\n  loading: Ref<boolean>,\r\n  noMore: Ref<boolean>,\r\n  onLoadMore: () => void,\r\n) {\r\n  const status = ref<InfiniteScrollStatus>(\"idle\");\r\n  let observer: IntersectionObserver | null = null;\r\n\r\n  function handleIntersect(entries: IntersectionObserverEntry[]) {\r\n    const entry = entries[0];\r\n    if (!entry?.isIntersecting) return;\r\n    if (!enabled.value || loading.value || noMore.value) return;\r\n    status.value = \"loading\";\r\n    onLoadMore();\r\n  }\r\n\r\n  function startObserving() {\r\n    const el = sentinelRef.value;\r\n    if (!el || !enabled.value) return;\r\n    observer = new IntersectionObserver(handleIntersect, {\r\n      rootMargin: `${INFINITE_SCROLL_THRESHOLD}px 0px`,\r\n    });\r\n    observer.observe(el);\r\n  }\r\n\r\n  function stopObserving() {\r\n    observer?.disconnect();\r\n    observer = null;\r\n  }\r\n\r\n  watch([loading, noMore], () => {\r\n    if (noMore.value) {\r\n      status.value = \"no-more\";\r\n    } else if (loading.value) {\r\n      status.value = \"loading\";\r\n    } else {\r\n      status.value = \"idle\";\r\n    }\r\n  });\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch([sentinelRef, enabled], () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  return { status: readonly(status) };\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\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 ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\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 ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n"],"mappings":"uGAEA,MAKa,EAA6C,CACxD,CAAE,SAAU,KAAM,QAAS,EAAG,CAC9B,CAAE,SAAU,KAAM,QAAS,EAAG,CAC9B,CAAE,SAAU,IAAK,QAAS,EAAG,CAC7B,CAAE,SAAU,IAAK,QAAS,EAAG,CAC7B,CAAE,SAAU,IAAK,QAAS,EAAG,CAC7B,CAAE,SAAU,EAAG,QAAS,EAAG,CAC5B,CAEY,EAA0C,CAAC,IAAK,IAAI,CCXjE,SAAgB,EACd,EACA,EACA,EACA,CACA,IAAM,GAAA,EAAA,EAAA,KAAc,EAAE,CAChB,GAAA,EAAA,EAAA,KAAqB,EAAE,CAE7B,SAAS,EAAe,EAAuB,CAC7C,GAAI,GAAc,OAAS,EAAa,MAAQ,EAC9C,OAAO,EAAa,MAItB,IAAM,EAAS,CAAC,GAHJ,GAAa,OAAO,OAC5B,EAAY,MACZ,EACmB,CAAC,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,SAAS,CAC/D,IAAK,IAAM,KAAM,EACf,GAAI,GAAS,EAAG,SAAU,OAAO,EAAG,QAEtC,MAAO,GAGT,IAAI,EAAwC,KAE5C,SAAS,GAAiB,CACxB,IAAM,EAAK,EAAa,MACxB,GAAI,CAAC,EAAI,OACT,EAAiB,IAAI,eAAgB,GAAY,CAC/C,IAAK,IAAM,KAAS,EAAS,CAC3B,GAAM,CAAE,SAAU,EAAM,YACxB,EAAe,MAAQ,EACvB,EAAQ,MAAQ,EAAe,EAAM,GAEvC,CACF,EAAe,QAAQ,EAAG,CAC1B,IAAM,EAAO,EAAG,uBAAuB,CACvC,EAAe,MAAQ,EAAK,MAC5B,EAAQ,MAAQ,EAAe,EAAK,MAAM,CAG5C,SAAS,GAAgB,CACvB,GAAgB,YAAY,CAC5B,EAAiB,KAiBnB,OAdA,EAAA,EAAA,WAAU,EAAe,EACzB,EAAA,EAAA,iBAAgB,EAAc,EAE9B,EAAA,EAAA,OAAM,MAAoB,CACxB,GAAe,CACf,GAAgB,EAChB,EAEF,EAAA,EAAA,OAAM,KAAO,GAAc,UAAa,GAAa,MAAM,KAAQ,CAC7D,EAAe,MAAQ,IACzB,EAAQ,MAAQ,EAAe,EAAe,MAAM,GAEtD,CAEK,CACL,SAAA,EAAA,EAAA,UAAkB,EAAQ,CAC1B,gBAAA,EAAA,EAAA,UAAyB,EAAe,CACzC,CCzDH,SAAgB,EACd,EACA,EACA,EACA,EACA,CACA,IAAM,GAAA,EAAA,EAAA,KAAyC,EAAE,CAAC,CAC5C,GAAA,EAAA,EAAA,KAAsB,EAAE,CACxB,EAAmB,IAAI,IAE7B,SAAS,EAAiB,EAAqB,EAAoB,CACjE,EAAiB,IAAI,EAAI,EAAW,CAGtC,SAAS,GAAY,CACnB,IAAM,EAAO,EAAQ,MACf,EAAQ,EAAe,MACvB,EAAI,EAAI,OAAS,GAEvB,GAAI,GAAQ,GAAK,GAAS,GAAK,EAAM,MAAM,SAAW,EAAG,CACvD,EAAY,MAAQ,EAAE,CACtB,EAAgB,MAAQ,EACxB,OAGF,IAAM,GAAY,GAAS,EAAO,GAAK,GAAK,EACtC,EAAiC,MAAM,KAC3C,CAAE,OAAQ,EAAM,EACf,EAAG,KAAO,CAAE,MAAO,EAAG,OAAQ,EAAG,EACnC,CAEK,EAAgC,EAAE,CAExC,IAAK,IAAM,KAAQ,EAAM,MAAO,CAC9B,IAAM,EAAW,EAAY,QAAQ,EAAK,IACxC,EAAI,OAAS,EAAI,OAAS,EAAM,EACjC,CAGK,EADS,EAAiB,IAAI,EAAK,GAAG,GAGxC,EAAK,MAAQ,EACV,EAAK,OAAS,EAAK,MAAS,EAC7B,GAEA,EAAI,EAAS,OAAS,EAAW,GACjC,EAAI,EAAS,OAEnB,EAAO,KAAK,CACV,OACA,YAAa,EAAS,MACtB,IACA,IACA,MAAO,EACP,OAAQ,EACT,CAAC,CAEF,EAAS,OAAS,EAAI,EAAa,EAGrC,EAAY,MAAQ,EACpB,EAAgB,MAAQ,KAAK,IAAI,GAAG,EAAY,IAAK,GAAM,EAAE,OAAO,CAAC,CAAG,EAS1E,OANA,EAAA,EAAA,OACE,CAAC,MAAa,EAAM,MAAM,OAAQ,EAAS,EAAgB,EAAI,CAC/D,EACA,CAAE,UAAW,GAAM,CACpB,CAEM,CACL,aAAA,EAAA,EAAA,UAAsB,EAAY,CAClC,iBAAA,EAAA,EAAA,UAA0B,EAAgB,CAC1C,mBACA,SAAU,EACX,CC/EH,SAAgB,EACd,EACA,EACA,EACA,EACA,EACA,CACA,IAAM,GAAA,EAAA,EAAA,KAAmC,OAAO,CAC5C,EAAwC,KAE5C,SAAS,EAAgB,EAAsC,CAC/C,EAAQ,IACV,iBACR,CAAC,EAAQ,OAAS,EAAQ,OAAS,EAAO,QAC9C,EAAO,MAAQ,UACf,GAAY,GAGd,SAAS,GAAiB,CACxB,IAAM,EAAK,EAAY,MACnB,CAAC,GAAM,CAAC,EAAQ,QACpB,EAAW,IAAI,qBAAqB,EAAiB,CACnD,WAAY,YACb,CAAC,CACF,EAAS,QAAQ,EAAG,EAGtB,SAAS,GAAgB,CACvB,GAAU,YAAY,CACtB,EAAW,KAqBb,OAlBA,EAAA,EAAA,OAAM,CAAC,EAAS,EAAO,KAAQ,CACzB,EAAO,MACT,EAAO,MAAQ,UACN,EAAQ,MACjB,EAAO,MAAQ,UAEf,EAAO,MAAQ,QAEjB,EAEF,EAAA,EAAA,WAAU,EAAe,EACzB,EAAA,EAAA,iBAAgB,EAAc,EAE9B,EAAA,EAAA,OAAM,CAAC,EAAa,EAAQ,KAAQ,CAClC,GAAe,CACf,GAAgB,EAChB,CAEK,CAAE,QAAA,EAAA,EAAA,UAAiB,EAAO,CAAE,mtBCyDrC,IAAM,EAAQ,EAaR,EAAO,EAOP,GAAA,EAAA,EAAA,MAAiC,CACjC,GAAA,EAAA,EAAA,MAAgC,CAIhC,CAAE,UAAS,kBAAmB,EAClC,GAAA,EAAA,EAAA,cAHkC,EAAM,QAAQ,EAAA,EAAA,EAAA,cACZ,EAAM,YAAY,CAKvD,CAIK,CAAE,cAAa,kBAAiB,mBAAkB,YACtD,GAAA,EAAA,EAAA,cAH8B,EAAM,MAAM,CAGb,EAAS,GAAA,EAAA,EAAA,cAFV,EAAM,IAAI,CAEuB,CAEzD,GAAA,EAAA,EAAA,cACE,EAAM,UAAY,EAAM,SAAW,EAAY,MAAM,SAAW,EACvE,CAEK,GAAA,EAAA,EAAA,cAA+B,CACnC,IAAM,EAAO,EAAQ,MACf,EAAQ,EAAe,MACvB,EAAI,EAAM,IAChB,GAAI,GAAQ,GAAK,GAAS,EAAG,MAAO,EAAE,CAEtC,IAAM,GAAY,GAAS,EAAO,GAAK,GAAK,EACtC,EAAQ,EAAM,eAAiB,EAC/B,EAAa,MAAM,EAAK,CAAC,KAAK,EAAE,CAChC,EAAoE,EAAE,CAE5E,IAAK,IAAI,EAAI,EAAG,EAAI,EAAO,IAAK,CAC9B,IAAM,EAAS,EAAW,QAAQ,KAAK,IAAI,GAAG,EAAW,CAAC,CACpD,EACJ,EAAsB,GACtB,KAAK,QAAQ,EAAI,EAAsB,GAAK,EAAsB,IACpE,EAAO,KAAK,CACV,EAAG,GAAU,EAAW,GACxB,EAAG,EAAW,GACd,MAAO,EACP,OAAQ,EACT,CAAC,CACF,EAAW,IAAW,EAAI,EAE5B,OAAO,GACP,CAEI,GAAA,EAAA,EAAA,cACA,EAAc,MAAM,SAAW,EAAU,EACtC,KAAK,IAAI,GAAG,EAAc,MAAM,IAAK,GAAM,EAAE,EAAI,EAAE,OAAO,CAAC,CAClE,CAEI,GAAA,EAAA,EAAA,cACJ,EAAa,MAAQ,EAAe,MAAQ,EAAgB,MAC7D,CAMK,CAAE,OAAQ,GAAiB,EAC/B,GAAA,EAAA,EAAA,cALqC,EAAM,SAAS,EAAA,EAAA,EAAA,cACpB,EAAM,QAAQ,EAAA,EAAA,EAAA,cACf,EAAM,OAAO,KAOtC,EAAK,YAAY,CACxB,CAED,SAAS,EAAkB,EAA0B,EAAc,CACjE,IAAM,EAAM,EAAM,OAClB,GAAI,EAAI,eAAiB,EAAI,aAAc,CACzC,IAAM,EAAc,EAAI,cAAgB,EAAI,aAAgB,EAAI,MAChE,EAAiB,EAAI,KAAK,GAAI,EAAW,CAE3C,EAAK,eAAgB,EAAI,KAAK,CAGhC,SAAS,EAAiB,EAA0B,CAClD,EAAK,cAAe,EAAI,KAAK,CAG/B,SAAS,GAAc,CACrB,EAAa,OAAO,eAAe,CAAE,SAAU,SAAU,MAAO,QAAS,CAAC,QAG5E,EAA8B,CAC5B,WACA,cACA,eAAkB,EAAQ,MAC1B,uBAA0B,EAAgB,MAC3C,CAAC,oDCxIM,MAAA,SA9EG,eAAJ,IAAI,EAAe,MAAM,yCA6DtB,MAAA,CA3DJ,MAAM,kBACL,OAAA,EAAA,EAAA,gBAAK,CAAA,OAAA,GAAe,EAAA,MAAU,IAAA,SAAA,WAAA,CAAA,GAEf,EAAA,QAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBAiBR,EAAA,SAAA,CAAA,IAAA,EAAA,EAAA,EAAA,EAAA,YAfgB,EAAA,OAAZ,EAAI,gDAeR,MAAA,CAdH,IAAG,MAAQ,IACZ,MAAM,sBACL,OAAA,EAAA,EAAA,gBAAK,6BAA6D,EAAG,EAAC,WAA2B,EAAG,EAAC,aAA6B,EAAG,MAAK,cAA8B,EAAG,OAAM,sBAAsC,EAAM,oBAAA,EAAA,EAAA,OAAqB,IAA0B,CAAA,8BAWtQ,EAAA,OAAA,WAAA,EAAA,KAAA,CAAA,AAAA,EAAA,MAAA,EAAA,EAAA,oBADoC,MAAA,CAApC,MAAM,4BAA2B,CAAA,KAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,EAAA,2FAwCtC,EAAA,SAAA,MAAA,EAAA,EAAA,aAAA,EAAA,EAAA,OAlCmB,EAAW,EAA1B,EAAK,gDAkCT,MAAA,CAjCH,IAAK,EAAI,KAAK,GACf,MAAM,kBACL,OAAA,EAAA,EAAA,gBAAK,6BAAyD,EAAI,EAAC,WAAyB,EAAI,EAAC,aAA2B,EAAI,MAAK,sBAAoC,EAAM,oBAAA,EAAA,EAAA,OAAqB,IAA0B,CAAA,WAO9N,QAAK,GAAE,EAAI,aAAe,EAAI,KAAM,EAAA,oBAuB9B,EAAA,OAAA,OAAA,CAnBJ,KAAM,EAAI,KACH,QACP,MAAO,EAAI,MACX,OAAQ,EAAI,YAgBR,EAAA,EAAA,EAAA,oBADC,MAbN,EAaM,EAAA,EAAA,EAAA,oBAJF,MAAA,CAPC,IAAK,EAAI,KAAK,IACd,IAAK,EAAI,KAAK,OAAK,GACnB,QAAS,EAAM,KAAI,OAAA,QACpB,MAAM,mBACL,OAAA,EAAA,EAAA,gBAAK,CAAA,OAAA,GAAe,EAAI,OAAM,IAAA,CAAA,CAC9B,OAAI,GAAE,EAAkB,EAAK,EAAM,CACnC,QAAK,GAAE,EAAiB,EAAA,aAEhB,EAAI,KAAK,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEd,MAFN,GAAA,EAAA,EAAA,iBACK,EAAI,KAAK,MAAK,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,aAOhB,EAAM,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAcX,MAdN,EAcM,EAAA,EAAA,EAAA,oBAbiD,MAAA,SAA5C,cAAJ,IAAI,EAAc,MAAM,kDAYtB,EAAA,OAAA,SAAA,CAXc,QAAA,EAAA,EAAA,OAAQ,EAAY,CAAA,KAWlC,CAVM,EAAM,UAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAGX,MAHN,EAGM,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAFkB,EAAA,MAAA,CAAA,CAAf,KAAK,QAAO,CAAA,CAAA,AAAA,EAAA,MAAA,EAAA,EAAA,oBACF,OAAA,KAAX,OAAI,GAAA,CAAA,CAAA,EAGC,EAAM,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIb,MALN,EAGC,UAED,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,IAAA"}

package/dist/C_WaterFall2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"C_WaterFall2.js","names":[],"sources":["../src/components/C_WaterFall/constants.ts","../src/components/C_WaterFall/composables/useResponsiveColumns.ts","../src/components/C_WaterFall/composables/useWaterFallLayout.ts","../src/components/C_WaterFall/composables/useInfiniteScroll.ts","../src/components/C_WaterFall/index.vue","../src/components/C_WaterFall/index.vue"],"sourcesContent":["import type { WaterFallBreakpoint } from \"./types\";\r\n\r\nexport const DEFAULT_GAP = 16;\r\nexport const DEFAULT_ANIMATION_DURATION = 300;\r\nexport const DEFAULT_SKELETON_COUNT = 8;\r\nexport const INFINITE_SCROLL_THRESHOLD = 200;\r\n\r\nexport const DEFAULT_BREAKPOINTS: WaterFallBreakpoint[] = [\r\n  { minWidth: 1600, columns: 6 },\r\n  { minWidth: 1200, columns: 5 },\r\n  { minWidth: 992, columns: 4 },\r\n  { minWidth: 768, columns: 3 },\r\n  { minWidth: 480, columns: 2 },\r\n  { minWidth: 0, columns: 1 },\r\n];\r\n\r\nexport const SKELETON_HEIGHT_RANGE: [number, number] = [180, 360];\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { WaterFallBreakpoint } from \"../types\";\r\nimport { DEFAULT_BREAKPOINTS } from \"../constants\";\r\n\r\nexport function useResponsiveColumns(\r\n  containerRef: Ref<HTMLElement | undefined>,\r\n  fixedColumns?: Ref<number | undefined>,\r\n  breakpoints?: Ref<WaterFallBreakpoint[] | undefined>,\r\n) {\r\n  const columns = ref(4);\r\n  const containerWidth = ref(0);\r\n\r\n  function resolveColumns(width: number): number {\r\n    if (fixedColumns?.value && fixedColumns.value > 0)\r\n      return fixedColumns.value;\r\n    const bps = breakpoints?.value?.length\r\n      ? breakpoints.value\r\n      : DEFAULT_BREAKPOINTS;\r\n    const sorted = [...bps].sort((a, b) => b.minWidth - a.minWidth);\r\n    for (const bp of sorted) {\r\n      if (width >= bp.minWidth) return bp.columns;\r\n    }\r\n    return 1;\r\n  }\r\n\r\n  let resizeObserver: ResizeObserver | null = null;\r\n\r\n  function startObserving() {\r\n    const el = containerRef.value;\r\n    if (!el) return;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      for (const entry of entries) {\r\n        const { width } = entry.contentRect;\r\n        containerWidth.value = width;\r\n        columns.value = resolveColumns(width);\r\n      }\r\n    });\r\n    resizeObserver.observe(el);\r\n    const rect = el.getBoundingClientRect();\r\n    containerWidth.value = rect.width;\r\n    columns.value = resolveColumns(rect.width);\r\n  }\r\n\r\n  function stopObserving() {\r\n    resizeObserver?.disconnect();\r\n    resizeObserver = null;\r\n  }\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch(containerRef, () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  watch([() => fixedColumns?.value, () => breakpoints?.value], () => {\r\n    if (containerWidth.value > 0) {\r\n      columns.value = resolveColumns(containerWidth.value);\r\n    }\r\n  });\r\n\r\n  return {\r\n    columns: readonly(columns),\r\n    containerWidth: readonly(containerWidth),\r\n  };\r\n}\r\n","import { ref, readonly, watch } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallColumn,\r\n} from \"../types\";\r\nimport { DEFAULT_GAP } from \"../constants\";\r\n\r\nexport function useWaterFallLayout(\r\n  items: Ref<WaterFallItem[]>,\r\n  columns: Readonly<Ref<number>>,\r\n  containerWidth: Readonly<Ref<number>>,\r\n  gap: Ref<number>,\r\n) {\r\n  const layoutItems = ref<WaterFallLayoutItem[]>([]);\r\n  const containerHeight = ref(0);\r\n  const imageHeightCache = new Map<string | number, number>();\r\n\r\n  function cacheImageHeight(id: string | number, realHeight: number) {\r\n    imageHeightCache.set(id, realHeight);\r\n  }\r\n\r\n  function calculate() {\r\n    const cols = columns.value;\r\n    const width = containerWidth.value;\r\n    const g = gap.value ?? DEFAULT_GAP;\r\n\r\n    if (cols <= 0 || width <= 0 || items.value.length === 0) {\r\n      layoutItems.value = [];\r\n      containerHeight.value = 0;\r\n      return;\r\n    }\r\n\r\n    const colWidth = (width - (cols - 1) * g) / cols;\r\n    const columnState: WaterFallColumn[] = Array.from(\r\n      { length: cols },\r\n      (_, i) => ({ index: i, height: 0 }),\r\n    );\r\n\r\n    const result: WaterFallLayoutItem[] = [];\r\n\r\n    for (const item of items.value) {\r\n      const shortest = columnState.reduce((min, col) =>\r\n        col.height < min.height ? col : min,\r\n      );\r\n\r\n      const cached = imageHeightCache.get(item.id);\r\n      const itemHeight = cached\r\n        ? cached\r\n        : item.width > 0\r\n          ? (item.height / item.width) * colWidth\r\n          : colWidth;\r\n\r\n      const x = shortest.index * (colWidth + g);\r\n      const y = shortest.height;\r\n\r\n      result.push({\r\n        item,\r\n        columnIndex: shortest.index,\r\n        x,\r\n        y,\r\n        width: colWidth,\r\n        height: itemHeight,\r\n      });\r\n\r\n      shortest.height = y + itemHeight + g;\r\n    }\r\n\r\n    layoutItems.value = result;\r\n    containerHeight.value = Math.max(...columnState.map((c) => c.height)) - g;\r\n  }\r\n\r\n  watch(\r\n    [items, () => items.value.length, columns, containerWidth, gap],\r\n    calculate,\r\n    { immediate: true },\r\n  );\r\n\r\n  return {\r\n    layoutItems: readonly(layoutItems),\r\n    containerHeight: readonly(containerHeight),\r\n    cacheImageHeight,\r\n    relayout: calculate,\r\n  };\r\n}\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { InfiniteScrollStatus } from \"../types\";\r\nimport { INFINITE_SCROLL_THRESHOLD } from \"../constants\";\r\n\r\nexport function useInfiniteScroll(\r\n  sentinelRef: Ref<HTMLElement | undefined>,\r\n  enabled: Ref<boolean>,\r\n  loading: Ref<boolean>,\r\n  noMore: Ref<boolean>,\r\n  onLoadMore: () => void,\r\n) {\r\n  const status = ref<InfiniteScrollStatus>(\"idle\");\r\n  let observer: IntersectionObserver | null = null;\r\n\r\n  function handleIntersect(entries: IntersectionObserverEntry[]) {\r\n    const entry = entries[0];\r\n    if (!entry?.isIntersecting) return;\r\n    if (!enabled.value || loading.value || noMore.value) return;\r\n    status.value = \"loading\";\r\n    onLoadMore();\r\n  }\r\n\r\n  function startObserving() {\r\n    const el = sentinelRef.value;\r\n    if (!el || !enabled.value) return;\r\n    observer = new IntersectionObserver(handleIntersect, {\r\n      rootMargin: `${INFINITE_SCROLL_THRESHOLD}px 0px`,\r\n    });\r\n    observer.observe(el);\r\n  }\r\n\r\n  function stopObserving() {\r\n    observer?.disconnect();\r\n    observer = null;\r\n  }\r\n\r\n  watch([loading, noMore], () => {\r\n    if (noMore.value) {\r\n      status.value = \"no-more\";\r\n    } else if (loading.value) {\r\n      status.value = \"loading\";\r\n    } else {\r\n      status.value = \"idle\";\r\n    }\r\n  });\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch([sentinelRef, enabled], () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  return { status: readonly(status) };\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\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 ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\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 ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n"],"mappings":"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"}

package/dist/C_WorkFlow-BFzRGGhJ.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"C_WorkFlow-BFzRGGhJ.css","names":[],"sources":["../src/components/C_WorkFlow/nodes/StartNode.vue?vue&type=style&index=0&scoped=8dfd664b&lang.scss","../src/components/C_WorkFlow/nodes/ApprovalNode.vue?vue&type=style&index=0&scoped=f7fd7107&lang.scss","../src/components/C_WorkFlow/nodes/CopyNode.vue?vue&type=style&index=0&scoped=6ae0b500&lang.scss","../src/components/C_WorkFlow/nodes/ConditionNode.vue?vue&type=style&index=0&scoped=60e87967&lang.scss","../src/components/C_WorkFlow/index.vue?vue&type=style&index=0&scoped=6ed6dbc9&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.start-node[data-v-8dfd664b] {\n  position: relative;\n}\n.node-content[data-v-8dfd664b] {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  padding: 16px 20px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  min-width: 160px;\n  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  cursor: pointer;\n}\n.node-content[data-v-8dfd664b]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);\n}\n.node-icon[data-v-8dfd664b] {\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.node-info[data-v-8dfd664b] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  text-align: center;\n}\n.node-text[data-v-8dfd664b] {\n  font-weight: 600;\n  font-size: 14px;\n}\n.initiator-name[data-v-8dfd664b] {\n  font-size: 12px;\n  opacity: 0.9;\n  background: rgba(255, 255, 255, 0.2);\n  padding: 2px 8px;\n  border-radius: 8px;\n}\n.placeholder-text[data-v-8dfd664b] {\n  font-size: 11px;\n  opacity: 0.7;\n  font-style: italic;\n}\n.add-node-btn[data-v-8dfd664b] {\n  position: absolute;\n  left: 50%;\n  bottom: -20px;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #1890ff, #722ed1);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  font-size: 16px;\n  font-weight: bold;\n  z-index: 10;\n}\n.add-node-btn[data-v-8dfd664b]:hover {\n  transform: translateX(-50%) scale(1.1);\n  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);\n}","/* unplugin-vue-components disabled */.approval-node[data-v-f7fd7107] {\n  position: relative;\n}\n.status-indicator[data-v-f7fd7107] {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  z-index: 2;\n  background: #faad14;\n}\n.status-indicator.approved[data-v-f7fd7107] {\n  background: #52c41a;\n}\n.status-indicator.rejected[data-v-f7fd7107] {\n  background: #ff4d4f;\n}\n.status-indicator.pending[data-v-f7fd7107] {\n  background: #1890ff;\n}\n.delete-btn[data-v-f7fd7107] {\n  position: absolute;\n  top: -10px;\n  right: -10px;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #ff4d4f;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 100; /* 确保在所有元素之上 */\n  opacity: 0;\n  transform: scale(0.8);\n  transition: all 0.2s ease;\n  border: 2px solid white;\n  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);\n}\n.delete-btn[data-v-f7fd7107]:hover {\n  transform: scale(1);\n  background: #ff7875;\n  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);\n}\n.delete-btn[data-v-f7fd7107]:active {\n  transform: scale(0.95);\n}\n.approval-node:hover .delete-btn[data-v-f7fd7107] {\n  opacity: 1;\n  transform: scale(1);\n}\n.node-card[data-v-f7fd7107] {\n  background: white;\n  border-radius: 12px;\n  min-width: 240px;\n  max-width: 300px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  border: 2px solid transparent;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  cursor: pointer;\n}\n.node-card[data-v-f7fd7107]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n  border-color: #1890ff;\n}\n.node-header[data-v-f7fd7107] {\n  padding: 12px 16px;\n  background: linear-gradient(135deg, #e6f7ff, #f0f9ff);\n  border-bottom: 1px solid #91d5ff;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.node-icon[data-v-f7fd7107] {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #1890ff;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.node-title[data-v-f7fd7107] {\n  font-weight: 600;\n  color: var(--n-text-color-1);\n  font-size: 14px;\n  flex: 1;\n}\n.node-badge[data-v-f7fd7107] {\n  background: #1890ff;\n  color: white;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 16px;\n  text-align: center;\n}\n.approval-mode-badge[data-v-f7fd7107] {\n  background: #f0f0f0;\n  color: #666;\n  padding: 2px 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  font-weight: 500;\n}\n.node-content[data-v-f7fd7107] {\n  padding: 16px;\n}\n.approvers-list[data-v-f7fd7107] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.approver-tag[data-v-f7fd7107] {\n  background: linear-gradient(135deg, #e6f7ff, #f0f9ff);\n  border: 1px solid #91d5ff;\n  border-radius: 8px;\n  padding: 8px 12px;\n  transition: all 0.2s ease;\n}\n.approver-tag[data-v-f7fd7107]:hover {\n  transform: translateX(2px);\n  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);\n}\n.approver-tag .approver-info[data-v-f7fd7107] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.approver-tag .approver-info .approver-avatar[data-v-f7fd7107] {\n  flex-shrink: 0;\n}\n.approver-tag .approver-info .approver-details[data-v-f7fd7107] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.approver-tag .approver-info .approver-details .approver-name[data-v-f7fd7107] {\n  font-weight: 600;\n  color: #1890ff;\n  font-size: 13px;\n}\n.approver-tag .approver-info .approver-details .approver-dept[data-v-f7fd7107] {\n  font-size: 11px;\n  color: #666;\n  background: rgba(0, 0, 0, 0.05);\n  padding: 1px 4px;\n  border-radius: 4px;\n  display: inline-block;\n}\n.approver-tag .approver-info .approver-details .approver-role[data-v-f7fd7107] {\n  font-size: 10px;\n  color: #999;\n}\n.more-count[data-v-f7fd7107] {\n  background: #f0f0f0;\n  color: #8c8c8c;\n  padding: 6px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  border: 1px dashed #d9d9d9;\n}\n.placeholder[data-v-f7fd7107] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  color: #8c8c8c;\n  font-size: 12px;\n  padding: 20px 0;\n  border: 1px dashed #d9d9d9;\n  border-radius: 8px;\n  background: #fafafa;\n}\n.placeholder span[data-v-f7fd7107] {\n  font-weight: 500;\n}\n.add-node-btn[data-v-f7fd7107] {\n  position: absolute;\n  left: 50%;\n  bottom: -20px;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #1890ff, #722ed1);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 10;\n}\n.add-node-btn[data-v-f7fd7107]:hover {\n  transform: translateX(-50%) scale(1.1);\n  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);\n}","/* unplugin-vue-components disabled */.copy-node[data-v-6ae0b500] {\n  position: relative;\n}\n.status-indicator[data-v-6ae0b500] {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  z-index: 2;\n  background: #faad14;\n}\n.status-indicator.completed[data-v-6ae0b500] {\n  background: #52c41a;\n}\n.status-indicator.active[data-v-6ae0b500] {\n  background: #1890ff;\n}\n.delete-btn[data-v-6ae0b500] {\n  position: absolute;\n  top: -10px;\n  right: -10px;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #ff4d4f;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 100;\n  opacity: 0;\n  transform: scale(0.8);\n  transition: all 0.2s ease;\n  border: 2px solid white;\n  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);\n}\n.delete-btn[data-v-6ae0b500]:hover {\n  transform: scale(1);\n  background: #ff7875;\n  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);\n}\n.delete-btn[data-v-6ae0b500]:active {\n  transform: scale(0.95);\n}\n.copy-node:hover .delete-btn[data-v-6ae0b500] {\n  opacity: 1;\n  transform: scale(1);\n}\n.node-card[data-v-6ae0b500] {\n  background: white;\n  border-radius: 12px;\n  min-width: 200px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  border: 2px solid transparent;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  cursor: pointer;\n}\n.node-card[data-v-6ae0b500]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n  border-color: #52c41a;\n}\n.node-header[data-v-6ae0b500] {\n  padding: 12px 16px;\n  background: #f6ffed;\n  border-bottom: 1px solid #d9f7be;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.node-icon[data-v-6ae0b500] {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #52c41a;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n}\n.node-title[data-v-6ae0b500] {\n  font-weight: 600;\n  color: #262626;\n  font-size: 14px;\n  flex: 1;\n}\n.node-badge[data-v-6ae0b500] {\n  background: #52c41a;\n  color: white;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 16px;\n  text-align: center;\n}\n.node-content[data-v-6ae0b500] {\n  padding: 16px;\n}\n.copy-users-list[data-v-6ae0b500] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n.copy-user-tag[data-v-6ae0b500] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #f6ffed;\n  color: #52c41a;\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  border: 1px solid #b7eb8f;\n}\n.more-count[data-v-6ae0b500] {\n  background: #f0f0f0;\n  color: #8c8c8c;\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.placeholder[data-v-6ae0b500] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #8c8c8c;\n  font-size: 12px;\n  padding: 8px 0;\n}\n.add-node-btn[data-v-6ae0b500] {\n  position: absolute;\n  left: 50%;\n  bottom: -20px;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #52c41a, #389e0d);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  font-size: 16px;\n  font-weight: bold;\n  z-index: 10;\n}\n.add-node-btn[data-v-6ae0b500]:hover {\n  transform: translateX(-50%) scale(1.1);\n  box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);\n}","/* unplugin-vue-components disabled */.condition-node[data-v-60e87967] {\n  position: relative;\n}\n.status-indicator[data-v-60e87967] {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  z-index: 2;\n  background: #faad14;\n}\n.status-indicator.completed[data-v-60e87967] {\n  background: #52c41a;\n}\n.status-indicator.active[data-v-60e87967] {\n  background: #fa8c16;\n}\n.delete-btn[data-v-60e87967] {\n  position: absolute;\n  top: -10px;\n  right: -10px;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #ff4d4f;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 100;\n  opacity: 0;\n  transform: scale(0.8);\n  transition: all 0.2s ease;\n  border: 2px solid white;\n  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);\n}\n.delete-btn[data-v-60e87967]:hover {\n  transform: scale(1);\n  background: #ff7875;\n  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);\n}\n.delete-btn[data-v-60e87967]:active {\n  transform: scale(0.95);\n}\n.condition-node:hover .delete-btn[data-v-60e87967] {\n  opacity: 1;\n  transform: scale(1);\n}\n.node-card[data-v-60e87967] {\n  background: white;\n  border-radius: 12px;\n  min-width: 220px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  border: 2px solid transparent;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  cursor: pointer;\n}\n.node-card[data-v-60e87967]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n  border-color: #fa8c16;\n}\n.node-header[data-v-60e87967] {\n  padding: 12px 16px;\n  background: #fff7e6;\n  border-bottom: 1px solid #ffe7ba;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.node-icon[data-v-60e87967] {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #fa8c16;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n}\n.node-title[data-v-60e87967] {\n  font-weight: 600;\n  color: #262626;\n  font-size: 14px;\n  flex: 1;\n}\n.node-badge[data-v-60e87967] {\n  background: #fa8c16;\n  color: white;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 16px;\n  text-align: center;\n}\n.node-content[data-v-60e87967] {\n  padding: 16px;\n}\n.conditions-list[data-v-60e87967] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.condition-tag[data-v-60e87967] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #fff7e6;\n  color: #fa8c16;\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-size: 12px;\n  border: 1px solid #ffd591;\n  transition: all 0.2s ease;\n}\n.condition-tag[data-v-60e87967]:hover {\n  background: #ffe7ba;\n  transform: translateX(2px);\n}\n.condition-icon[data-v-60e87967] {\n  font-weight: bold;\n  color: #d48806;\n}\n.more-count[data-v-60e87967] {\n  background: #f0f0f0;\n  color: #8c8c8c;\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  margin-top: 4px;\n}\n.placeholder[data-v-60e87967] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #8c8c8c;\n  font-size: 12px;\n  padding: 8px 0;\n}\n.add-node-btn[data-v-60e87967] {\n  position: absolute;\n  left: 50%;\n  bottom: -20px;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #fa8c16, #d48806);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  font-size: 16px;\n  font-weight: bold;\n  z-index: 10;\n}\n.add-node-btn[data-v-60e87967]:hover {\n  transform: translateX(-50%) scale(1.1);\n  box-shadow: 0 6px 20px rgba(250, 140, 22, 0.4);\n}","/* unplugin-vue-components disabled *//* C_WorkFlow 组件样式 */\n.approval-workflow-container[data-v-6ed6dbc9] {\n  width: 100%;\n  height: 600px;\n  position: relative;\n  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n}\n.floating-toolbar[data-v-6ed6dbc9] {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--n-card-color);\n  backdrop-filter: blur(10px);\n  padding: 8px 12px;\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  border: 1px solid var(--n-border-color);\n}\n.floating-toolbar .toolbar-divider[data-v-6ed6dbc9] {\n  width: 1px;\n  height: 20px;\n  background: var(--n-border-color);\n  margin: 0 4px;\n}\n.workflow-canvas[data-v-6ed6dbc9] {\n  width: 100%;\n  height: 100%;\n}\n.add-node-menu[data-v-6ed6dbc9] {\n  position: fixed;\n  z-index: 1000;\n  pointer-events: none;\n}\n.add-node-menu .add-menu-content[data-v-6ed6dbc9] {\n  background: var(--n-card-color);\n  border-radius: 12px;\n  padding: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n  border: 1px solid var(--n-border-color);\n  display: flex;\n  gap: 8px;\n  pointer-events: auto;\n  animation: menuSlideUp-6ed6dbc9 0.3s ease;\n}\n.add-menu-item[data-v-6ed6dbc9] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 12px 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  min-width: 70px;\n  background: var(--n-color-embedded);\n}\n.add-menu-item[data-v-6ed6dbc9]:hover {\n  background: var(--n-color-hover);\n}\n.menu-icon[data-v-6ed6dbc9] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 6px;\n  color: white;\n}\n.menu-icon.approval-icon[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #1890ff, #722ed1);\n}\n.menu-icon.copy-icon[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #52c41a, #389e0d);\n}\n.menu-icon.condition-icon[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #fa8c16, #d48806);\n}\n.menu-text[data-v-6ed6dbc9] {\n  font-size: 12px;\n  font-weight: 500;\n}\n@keyframes menuSlideUp-6ed6dbc9 {\nfrom {\n    opacity: 0;\n    transform: translateY(10px);\n}\nto {\n    opacity: 1;\n    transform: translateY(0);\n}\n}\n/* 流程/数据校验结果显示样式 */\n.validation-success[data-v-6ed6dbc9] {\n  text-align: center;\n  padding: 40px 20px;\n  color: #52c41a;\n}\n.validation-success .success-icon[data-v-6ed6dbc9] {\n  margin-bottom: 16px;\n}\n.validation-success h3[data-v-6ed6dbc9] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n.validation-success p[data-v-6ed6dbc9] {\n  margin: 0;\n  color: #666;\n  font-size: 14px;\n}\n.validation-errors .error-summary[data-v-6ed6dbc9] {\n  text-align: center;\n  padding: 20px;\n  background: #fff2f0;\n  border-radius: 8px;\n  margin-bottom: 20px;\n  border: 1px solid #ffccc7;\n}\n.validation-errors .error-summary .error-icon[data-v-6ed6dbc9] {\n  margin-bottom: 12px;\n}\n.validation-errors .error-summary h3[data-v-6ed6dbc9] {\n  margin: 0 0 8px 0;\n  color: #ff4d4f;\n  font-size: 16px;\n  font-weight: 600;\n}\n.validation-errors .error-summary p[data-v-6ed6dbc9] {\n  margin: 0;\n  color: var(--n-text-color-2);\n  font-size: 14px;\n}\n.validation-errors .error-list[data-v-6ed6dbc9] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.validation-errors .error-item[data-v-6ed6dbc9] {\n  background: white;\n  border: 1px solid #f0f0f0;\n  border-radius: 8px;\n  padding: 16px;\n  transition: all 0.2s ease;\n}\n.validation-errors .error-item[data-v-6ed6dbc9]:hover {\n  border-color: #d9d9d9;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n.validation-errors .error-item .error-header[data-v-6ed6dbc9] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 8px;\n}\n.validation-errors .error-item .error-header .error-number[data-v-6ed6dbc9] {\n  width: 24px;\n  height: 24px;\n  background: #ff4d4f;\n  color: white;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n.validation-errors .error-item .error-header .error-info[data-v-6ed6dbc9] {\n  flex: 1;\n  min-width: 0;\n}\n.validation-errors .error-item .error-header .error-info .error-node[data-v-6ed6dbc9] {\n  display: block;\n  color: var(--n-text-color-1);\n  font-size: 14px;\n  margin-bottom: 2px;\n}\n.validation-errors .error-item .error-header .error-info .error-field[data-v-6ed6dbc9] {\n  color: var(--n-text-color-3);\n  font-size: 12px;\n}\n.validation-errors .error-item .error-header .error-type[data-v-6ed6dbc9] {\n  padding: 2px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n}\n.validation-errors .error-item .error-header .error-type.required[data-v-6ed6dbc9] {\n  background: #fff2f0;\n  color: #ff4d4f;\n  border: 1px solid #ffccc7;\n}\n.validation-errors .error-item .error-header .error-type.incomplete[data-v-6ed6dbc9] {\n  background: #fff7e6;\n  color: #fa8c16;\n  border: 1px solid #ffd591;\n}\n.validation-errors .error-item .error-header .error-type.warning[data-v-6ed6dbc9] {\n  background: #fffbe6;\n  color: #faad14;\n  border: 1px solid #ffe58f;\n}\n.validation-errors .error-item .error-message[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n  font-size: 13px;\n  line-height: 1.5;\n  margin-bottom: 12px;\n  padding-left: 36px;\n}\n.validation-errors .error-item .error-actions[data-v-6ed6dbc9] {\n  padding-left: 36px;\n}\n.validation-errors .validation-tips[data-v-6ed6dbc9] {\n  margin-top: 24px;\n  padding: 16px;\n  background: #f6ffed;\n  border-radius: 8px;\n  border: 1px solid #b7eb8f;\n}\n.validation-errors .validation-tips h4[data-v-6ed6dbc9] {\n  margin: 0 0 12px 0;\n  color: #389e0d;\n  font-size: 14px;\n  font-weight: 600;\n}\n.validation-errors .validation-tips ul[data-v-6ed6dbc9] {\n  margin: 0;\n  padding-left: 16px;\n  color: var(--n-text-color-2);\n  font-size: 13px;\n  line-height: 1.6;\n}\n.validation-errors .validation-tips ul li[data-v-6ed6dbc9] {\n  margin-bottom: 6px;\n}\n.validation-errors .validation-tips ul li strong[data-v-6ed6dbc9] {\n  color: var(--n-text-color-1);\n}\n.validation-footer[data-v-6ed6dbc9] {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n/* 边的样式（Vue Flow） */\n[data-v-6ed6dbc9] .vue-flow__edge {\n  stroke: #1890ff;\n  stroke-width: 2px;\n}\n[data-v-6ed6dbc9] .vue-flow__edge-path {\n  stroke: #1890ff;\n  stroke-width: 2px;\n}\n[data-v-6ed6dbc9] .vue-flow__arrowhead {\n  fill: #1890ff;\n}\n[data-v-6ed6dbc9] .vue-flow__edge.animated {\n  stroke-dasharray: 5;\n  animation: dashdraw-6ed6dbc9 0.5s linear infinite;\n}\n@keyframes dashdraw-6ed6dbc9 {\nto {\n    stroke-dashoffset: -10;\n}\n}\n/* 暗色主题适配 */\n[data-theme=dark][data-v-6ed6dbc9] {\n  /* 添加节点菜单文字 */\n}\n[data-theme=dark] .approval-workflow-container[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n}\n[data-theme=dark] .add-menu-item span[data-v-6ed6dbc9] {\n  color: white;\n}\n[data-theme=dark] .validation-success[data-v-6ed6dbc9] {\n  color: #52c41a;\n}\n[data-theme=dark] .validation-success h3[data-v-6ed6dbc9] {\n  color: #52c41a;\n}\n[data-theme=dark] .validation-success p[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n}\n[data-theme=dark] .validation-errors .error-summary[data-v-6ed6dbc9] {\n  background: rgba(255, 77, 79, 0.1);\n  border-color: rgba(255, 77, 79, 0.3);\n}\n[data-theme=dark] .validation-errors .error-summary h3[data-v-6ed6dbc9] {\n  color: #ff4d4f;\n}\n[data-theme=dark] .validation-errors .error-summary p[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n}\n[data-theme=dark] .validation-errors .error-item[data-v-6ed6dbc9] {\n  background: var(--n-card-color);\n  border-color: var(--n-border-color);\n}\n[data-theme=dark] .validation-errors .error-item[data-v-6ed6dbc9]:hover {\n  border-color: rgba(255, 255, 255, 0.2);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n[data-theme=dark] .validation-errors .error-item .error-info .error-node[data-v-6ed6dbc9] {\n  color: var(--n-text-color-1);\n}\n[data-theme=dark] .validation-errors .error-item .error-info .error-field[data-v-6ed6dbc9] {\n  color: var(--n-text-color-3);\n}\n[data-theme=dark] .validation-errors .error-item .error-type.required[data-v-6ed6dbc9] {\n  background: rgba(255, 77, 79, 0.15);\n  color: #ff7875;\n  border-color: rgba(255, 77, 79, 0.3);\n}\n[data-theme=dark] .validation-errors .error-item .error-type.incomplete[data-v-6ed6dbc9] {\n  background: rgba(250, 140, 22, 0.15);\n  color: #ffa940;\n  border-color: rgba(250, 140, 22, 0.3);\n}\n[data-theme=dark] .validation-errors .error-item .error-type.warning[data-v-6ed6dbc9] {\n  background: rgba(250, 173, 20, 0.15);\n  color: #ffc53d;\n  border-color: rgba(250, 173, 20, 0.3);\n}\n[data-theme=dark] .validation-errors .error-item .error-message[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n}\n[data-theme=dark] .validation-errors .validation-tips[data-v-6ed6dbc9] {\n  background: rgba(82, 196, 26, 0.1);\n  border-color: rgba(82, 196, 26, 0.3);\n}\n[data-theme=dark] .validation-errors .validation-tips h4[data-v-6ed6dbc9] {\n  color: #73d13d;\n}\n[data-theme=dark] .validation-errors .validation-tips ul[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n}\n[data-theme=dark] .validation-errors .validation-tips ul li strong[data-v-6ed6dbc9] {\n  color: var(--n-text-color-1);\n}\n\n/* ─── 流程预览抽屉样式 ────────────────────────────────────── */\n.preview-stats[data-v-6ed6dbc9] {\n  display: flex;\n  gap: 12px;\n  margin-bottom: 24px;\n  flex-wrap: wrap;\n}\n.preview-stats .stat-item[data-v-6ed6dbc9] {\n  flex: 1;\n  min-width: 70px;\n  text-align: center;\n  padding: 12px 8px;\n  border-radius: 10px;\n  background: var(--n-action-color);\n  border: 1px solid var(--n-border-color);\n  transition: all 0.2s;\n}\n.preview-stats .stat-item .stat-value[data-v-6ed6dbc9] {\n  display: block;\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--n-text-color-1);\n}\n.preview-stats .stat-item .stat-label[data-v-6ed6dbc9] {\n  display: block;\n  font-size: 12px;\n  color: var(--n-text-color-3);\n  margin-top: 4px;\n}\n.preview-stats .stat-item.approval .stat-value[data-v-6ed6dbc9] {\n  color: #ff6b35;\n}\n.preview-stats .stat-item.copy .stat-value[data-v-6ed6dbc9] {\n  color: #1890ff;\n}\n.preview-stats .stat-item.condition .stat-value[data-v-6ed6dbc9] {\n  color: #faad14;\n}\n.preview-stats .stat-item.edge .stat-value[data-v-6ed6dbc9] {\n  color: #52c41a;\n}\n.preview-timeline[data-v-6ed6dbc9] {\n  position: relative;\n  padding: 0 0 0 8px;\n  /* 不同节点类型的圆点颜色 */\n}\n.preview-timeline .preview-step[data-v-6ed6dbc9] {\n  display: flex;\n  gap: 16px;\n  position: relative;\n  padding-bottom: 8px;\n}\n.preview-timeline .preview-step:last-child .step-line[data-v-6ed6dbc9] {\n  display: none;\n}\n.preview-timeline .step-connector[data-v-6ed6dbc9] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-shrink: 0;\n  width: 32px;\n}\n.preview-timeline .step-connector .step-dot[data-v-6ed6dbc9] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  flex-shrink: 0;\n  z-index: 1;\n  background: #999;\n}\n.preview-timeline .step-connector .step-line[data-v-6ed6dbc9] {\n  width: 2px;\n  flex: 1;\n  min-height: 20px;\n  background: var(--n-border-color);\n}\n.preview-timeline .start .step-dot[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #667eea, #764ba2);\n}\n.preview-timeline .approval .step-dot[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #ff6b35, #ff4500);\n}\n.preview-timeline .copy .step-dot[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #1890ff, #096dd9);\n}\n.preview-timeline .condition .step-dot[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #faad14, #d48806);\n}\n.preview-timeline .step-content[data-v-6ed6dbc9] {\n  flex: 1;\n  padding-bottom: 20px;\n  min-width: 0;\n}\n.preview-timeline .step-content .step-header[data-v-6ed6dbc9] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n.preview-timeline .step-content .step-header .step-order[data-v-6ed6dbc9] {\n  font-size: 12px;\n  color: var(--n-text-color-3);\n  font-weight: 500;\n}\n.preview-timeline .step-content .step-header .step-type-badge[data-v-6ed6dbc9] {\n  font-size: 11px;\n  padding: 1px 8px;\n  border-radius: 10px;\n  background: var(--n-action-color);\n  color: var(--n-text-color-2);\n  border: 1px solid var(--n-border-color);\n}\n.preview-timeline .step-content .step-title[data-v-6ed6dbc9] {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--n-text-color-1);\n  margin-bottom: 8px;\n}\n.preview-timeline .step-content .step-details[data-v-6ed6dbc9] {\n  background: var(--n-action-color);\n  border-radius: 8px;\n  padding: 10px 14px;\n  border: 1px solid var(--n-border-color);\n}\n.preview-timeline .step-content .step-details .step-detail-item[data-v-6ed6dbc9] {\n  font-size: 13px;\n  color: var(--n-text-color-2);\n  line-height: 1.8;\n  word-break: break-all;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n.preview-timeline .step-content .step-details .step-detail-item[data-v-6ed6dbc9]:not(:last-child) {\n  border-bottom: 1px dashed var(--n-border-color);\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n}\n.preview-timeline .step-content .step-details .step-detail-item.is-warning[data-v-6ed6dbc9] {\n  color: #faad14;\n}\n.preview-timeline .step-content .step-details .step-detail-item .detail-label[data-v-6ed6dbc9] {\n  color: var(--n-text-color-3);\n  font-size: 12px;\n  flex-shrink: 0;\n  line-height: 24px;\n}\n.preview-timeline .step-content .step-details .step-detail-item .mode-badge[data-v-6ed6dbc9] {\n  display: inline-block;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 10px;\n  border-radius: 12px;\n  line-height: 20px;\n}\n.preview-timeline .step-content .step-details .step-detail-item .mode-badge.any[data-v-6ed6dbc9] {\n  background: rgba(24, 144, 255, 0.1);\n  color: #1890ff;\n  border: 1px solid rgba(24, 144, 255, 0.25);\n}\n.preview-timeline .step-content .step-details .step-detail-item .mode-badge.all[data-v-6ed6dbc9] {\n  background: rgba(255, 77, 79, 0.1);\n  color: #ff4d4f;\n  border: 1px solid rgba(255, 77, 79, 0.25);\n}\n.preview-timeline .step-content .step-details .step-detail-item .mode-badge.sequence[data-v-6ed6dbc9] {\n  background: rgba(114, 46, 209, 0.1);\n  color: #722ed1;\n  border: 1px solid rgba(114, 46, 209, 0.25);\n}\n.preview-timeline .step-content .step-details .step-detail-item .user-tag[data-v-6ed6dbc9] {\n  margin: 1px 2px;\n}\n.preview-timeline .step-content .step-details .step-detail-item .warning-text[data-v-6ed6dbc9] {\n  color: #faad14;\n  font-weight: 500;\n}\n.preview-empty[data-v-6ed6dbc9] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 0;\n}\n.preview-empty p[data-v-6ed6dbc9] {\n  margin-top: 12px;\n  color: var(--n-text-color-3);\n  font-size: 14px;\n}\n.preview-footer[data-v-6ed6dbc9] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\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;ACtEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACnNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACjKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AC3KA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_WorkFlow-DSyCOvRp.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"C_WorkFlow-DSyCOvRp.css","names":[],"sources":["../src/components/C_WorkFlow/nodes/StartNode.vue?vue&type=style&index=0&scoped=8dfd664b&lang.scss","../src/components/C_WorkFlow/nodes/ApprovalNode.vue?vue&type=style&index=0&scoped=f7fd7107&lang.scss","../src/components/C_WorkFlow/nodes/CopyNode.vue?vue&type=style&index=0&scoped=6ae0b500&lang.scss","../src/components/C_WorkFlow/nodes/ConditionNode.vue?vue&type=style&index=0&scoped=60e87967&lang.scss","../src/components/C_WorkFlow/index.vue?vue&type=style&index=0&scoped=6ed6dbc9&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.start-node[data-v-8dfd664b] {\n  position: relative;\n}\n.node-content[data-v-8dfd664b] {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  padding: 16px 20px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  min-width: 160px;\n  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  cursor: pointer;\n}\n.node-content[data-v-8dfd664b]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);\n}\n.node-icon[data-v-8dfd664b] {\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.node-info[data-v-8dfd664b] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  text-align: center;\n}\n.node-text[data-v-8dfd664b] {\n  font-weight: 600;\n  font-size: 14px;\n}\n.initiator-name[data-v-8dfd664b] {\n  font-size: 12px;\n  opacity: 0.9;\n  background: rgba(255, 255, 255, 0.2);\n  padding: 2px 8px;\n  border-radius: 8px;\n}\n.placeholder-text[data-v-8dfd664b] {\n  font-size: 11px;\n  opacity: 0.7;\n  font-style: italic;\n}\n.add-node-btn[data-v-8dfd664b] {\n  position: absolute;\n  left: 50%;\n  bottom: -20px;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #1890ff, #722ed1);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  font-size: 16px;\n  font-weight: bold;\n  z-index: 10;\n}\n.add-node-btn[data-v-8dfd664b]:hover {\n  transform: translateX(-50%) scale(1.1);\n  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);\n}","/* unplugin-vue-components disabled */.approval-node[data-v-f7fd7107] {\n  position: relative;\n}\n.status-indicator[data-v-f7fd7107] {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  z-index: 2;\n  background: #faad14;\n}\n.status-indicator.approved[data-v-f7fd7107] {\n  background: #52c41a;\n}\n.status-indicator.rejected[data-v-f7fd7107] {\n  background: #ff4d4f;\n}\n.status-indicator.pending[data-v-f7fd7107] {\n  background: #1890ff;\n}\n.delete-btn[data-v-f7fd7107] {\n  position: absolute;\n  top: -10px;\n  right: -10px;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #ff4d4f;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 100; /* 确保在所有元素之上 */\n  opacity: 0;\n  transform: scale(0.8);\n  transition: all 0.2s ease;\n  border: 2px solid white;\n  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);\n}\n.delete-btn[data-v-f7fd7107]:hover {\n  transform: scale(1);\n  background: #ff7875;\n  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);\n}\n.delete-btn[data-v-f7fd7107]:active {\n  transform: scale(0.95);\n}\n.approval-node:hover .delete-btn[data-v-f7fd7107] {\n  opacity: 1;\n  transform: scale(1);\n}\n.node-card[data-v-f7fd7107] {\n  background: white;\n  border-radius: 12px;\n  min-width: 240px;\n  max-width: 300px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  border: 2px solid transparent;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  cursor: pointer;\n}\n.node-card[data-v-f7fd7107]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n  border-color: #1890ff;\n}\n.node-header[data-v-f7fd7107] {\n  padding: 12px 16px;\n  background: linear-gradient(135deg, #e6f7ff, #f0f9ff);\n  border-bottom: 1px solid #91d5ff;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.node-icon[data-v-f7fd7107] {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #1890ff;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.node-title[data-v-f7fd7107] {\n  font-weight: 600;\n  color: var(--n-text-color-1);\n  font-size: 14px;\n  flex: 1;\n}\n.node-badge[data-v-f7fd7107] {\n  background: #1890ff;\n  color: white;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 16px;\n  text-align: center;\n}\n.approval-mode-badge[data-v-f7fd7107] {\n  background: #f0f0f0;\n  color: #666;\n  padding: 2px 6px;\n  border-radius: 8px;\n  font-size: 10px;\n  font-weight: 500;\n}\n.node-content[data-v-f7fd7107] {\n  padding: 16px;\n}\n.approvers-list[data-v-f7fd7107] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.approver-tag[data-v-f7fd7107] {\n  background: linear-gradient(135deg, #e6f7ff, #f0f9ff);\n  border: 1px solid #91d5ff;\n  border-radius: 8px;\n  padding: 8px 12px;\n  transition: all 0.2s ease;\n}\n.approver-tag[data-v-f7fd7107]:hover {\n  transform: translateX(2px);\n  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);\n}\n.approver-tag .approver-info[data-v-f7fd7107] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.approver-tag .approver-info .approver-avatar[data-v-f7fd7107] {\n  flex-shrink: 0;\n}\n.approver-tag .approver-info .approver-details[data-v-f7fd7107] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.approver-tag .approver-info .approver-details .approver-name[data-v-f7fd7107] {\n  font-weight: 600;\n  color: #1890ff;\n  font-size: 13px;\n}\n.approver-tag .approver-info .approver-details .approver-dept[data-v-f7fd7107] {\n  font-size: 11px;\n  color: #666;\n  background: rgba(0, 0, 0, 0.05);\n  padding: 1px 4px;\n  border-radius: 4px;\n  display: inline-block;\n}\n.approver-tag .approver-info .approver-details .approver-role[data-v-f7fd7107] {\n  font-size: 10px;\n  color: #999;\n}\n.more-count[data-v-f7fd7107] {\n  background: #f0f0f0;\n  color: #8c8c8c;\n  padding: 6px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  border: 1px dashed #d9d9d9;\n}\n.placeholder[data-v-f7fd7107] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  color: #8c8c8c;\n  font-size: 12px;\n  padding: 20px 0;\n  border: 1px dashed #d9d9d9;\n  border-radius: 8px;\n  background: #fafafa;\n}\n.placeholder span[data-v-f7fd7107] {\n  font-weight: 500;\n}\n.add-node-btn[data-v-f7fd7107] {\n  position: absolute;\n  left: 50%;\n  bottom: -20px;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #1890ff, #722ed1);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 10;\n}\n.add-node-btn[data-v-f7fd7107]:hover {\n  transform: translateX(-50%) scale(1.1);\n  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);\n}","/* unplugin-vue-components disabled */.copy-node[data-v-6ae0b500] {\n  position: relative;\n}\n.status-indicator[data-v-6ae0b500] {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  z-index: 2;\n  background: #faad14;\n}\n.status-indicator.completed[data-v-6ae0b500] {\n  background: #52c41a;\n}\n.status-indicator.active[data-v-6ae0b500] {\n  background: #1890ff;\n}\n.delete-btn[data-v-6ae0b500] {\n  position: absolute;\n  top: -10px;\n  right: -10px;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #ff4d4f;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 100;\n  opacity: 0;\n  transform: scale(0.8);\n  transition: all 0.2s ease;\n  border: 2px solid white;\n  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);\n}\n.delete-btn[data-v-6ae0b500]:hover {\n  transform: scale(1);\n  background: #ff7875;\n  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);\n}\n.delete-btn[data-v-6ae0b500]:active {\n  transform: scale(0.95);\n}\n.copy-node:hover .delete-btn[data-v-6ae0b500] {\n  opacity: 1;\n  transform: scale(1);\n}\n.node-card[data-v-6ae0b500] {\n  background: white;\n  border-radius: 12px;\n  min-width: 200px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  border: 2px solid transparent;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  cursor: pointer;\n}\n.node-card[data-v-6ae0b500]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n  border-color: #52c41a;\n}\n.node-header[data-v-6ae0b500] {\n  padding: 12px 16px;\n  background: #f6ffed;\n  border-bottom: 1px solid #d9f7be;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.node-icon[data-v-6ae0b500] {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #52c41a;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n}\n.node-title[data-v-6ae0b500] {\n  font-weight: 600;\n  color: #262626;\n  font-size: 14px;\n  flex: 1;\n}\n.node-badge[data-v-6ae0b500] {\n  background: #52c41a;\n  color: white;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 16px;\n  text-align: center;\n}\n.node-content[data-v-6ae0b500] {\n  padding: 16px;\n}\n.copy-users-list[data-v-6ae0b500] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n.copy-user-tag[data-v-6ae0b500] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #f6ffed;\n  color: #52c41a;\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  border: 1px solid #b7eb8f;\n}\n.more-count[data-v-6ae0b500] {\n  background: #f0f0f0;\n  color: #8c8c8c;\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.placeholder[data-v-6ae0b500] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #8c8c8c;\n  font-size: 12px;\n  padding: 8px 0;\n}\n.add-node-btn[data-v-6ae0b500] {\n  position: absolute;\n  left: 50%;\n  bottom: -20px;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #52c41a, #389e0d);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  font-size: 16px;\n  font-weight: bold;\n  z-index: 10;\n}\n.add-node-btn[data-v-6ae0b500]:hover {\n  transform: translateX(-50%) scale(1.1);\n  box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);\n}","/* unplugin-vue-components disabled */.condition-node[data-v-60e87967] {\n  position: relative;\n}\n.status-indicator[data-v-60e87967] {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  z-index: 2;\n  background: #faad14;\n}\n.status-indicator.completed[data-v-60e87967] {\n  background: #52c41a;\n}\n.status-indicator.active[data-v-60e87967] {\n  background: #fa8c16;\n}\n.delete-btn[data-v-60e87967] {\n  position: absolute;\n  top: -10px;\n  right: -10px;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #ff4d4f;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 100;\n  opacity: 0;\n  transform: scale(0.8);\n  transition: all 0.2s ease;\n  border: 2px solid white;\n  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);\n}\n.delete-btn[data-v-60e87967]:hover {\n  transform: scale(1);\n  background: #ff7875;\n  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);\n}\n.delete-btn[data-v-60e87967]:active {\n  transform: scale(0.95);\n}\n.condition-node:hover .delete-btn[data-v-60e87967] {\n  opacity: 1;\n  transform: scale(1);\n}\n.node-card[data-v-60e87967] {\n  background: white;\n  border-radius: 12px;\n  min-width: 220px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  border: 2px solid transparent;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  cursor: pointer;\n}\n.node-card[data-v-60e87967]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n  border-color: #fa8c16;\n}\n.node-header[data-v-60e87967] {\n  padding: 12px 16px;\n  background: #fff7e6;\n  border-bottom: 1px solid #ffe7ba;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.node-icon[data-v-60e87967] {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #fa8c16;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n}\n.node-title[data-v-60e87967] {\n  font-weight: 600;\n  color: #262626;\n  font-size: 14px;\n  flex: 1;\n}\n.node-badge[data-v-60e87967] {\n  background: #fa8c16;\n  color: white;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  min-width: 16px;\n  text-align: center;\n}\n.node-content[data-v-60e87967] {\n  padding: 16px;\n}\n.conditions-list[data-v-60e87967] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.condition-tag[data-v-60e87967] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #fff7e6;\n  color: #fa8c16;\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-size: 12px;\n  border: 1px solid #ffd591;\n  transition: all 0.2s ease;\n}\n.condition-tag[data-v-60e87967]:hover {\n  background: #ffe7ba;\n  transform: translateX(2px);\n}\n.condition-icon[data-v-60e87967] {\n  font-weight: bold;\n  color: #d48806;\n}\n.more-count[data-v-60e87967] {\n  background: #f0f0f0;\n  color: #8c8c8c;\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  margin-top: 4px;\n}\n.placeholder[data-v-60e87967] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #8c8c8c;\n  font-size: 12px;\n  padding: 8px 0;\n}\n.add-node-btn[data-v-60e87967] {\n  position: absolute;\n  left: 50%;\n  bottom: -20px;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #fa8c16, #d48806);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  font-size: 16px;\n  font-weight: bold;\n  z-index: 10;\n}\n.add-node-btn[data-v-60e87967]:hover {\n  transform: translateX(-50%) scale(1.1);\n  box-shadow: 0 6px 20px rgba(250, 140, 22, 0.4);\n}","/* unplugin-vue-components disabled *//* C_WorkFlow 组件样式 */\n.approval-workflow-container[data-v-6ed6dbc9] {\n  width: 100%;\n  height: 600px;\n  position: relative;\n  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n}\n.floating-toolbar[data-v-6ed6dbc9] {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--n-card-color);\n  backdrop-filter: blur(10px);\n  padding: 8px 12px;\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  border: 1px solid var(--n-border-color);\n}\n.floating-toolbar .toolbar-divider[data-v-6ed6dbc9] {\n  width: 1px;\n  height: 20px;\n  background: var(--n-border-color);\n  margin: 0 4px;\n}\n.workflow-canvas[data-v-6ed6dbc9] {\n  width: 100%;\n  height: 100%;\n}\n.add-node-menu[data-v-6ed6dbc9] {\n  position: fixed;\n  z-index: 1000;\n  pointer-events: none;\n}\n.add-node-menu .add-menu-content[data-v-6ed6dbc9] {\n  background: var(--n-card-color);\n  border-radius: 12px;\n  padding: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n  border: 1px solid var(--n-border-color);\n  display: flex;\n  gap: 8px;\n  pointer-events: auto;\n  animation: menuSlideUp-6ed6dbc9 0.3s ease;\n}\n.add-menu-item[data-v-6ed6dbc9] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 12px 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  min-width: 70px;\n  background: var(--n-color-embedded);\n}\n.add-menu-item[data-v-6ed6dbc9]:hover {\n  background: var(--n-color-hover);\n}\n.menu-icon[data-v-6ed6dbc9] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 6px;\n  color: white;\n}\n.menu-icon.approval-icon[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #1890ff, #722ed1);\n}\n.menu-icon.copy-icon[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #52c41a, #389e0d);\n}\n.menu-icon.condition-icon[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #fa8c16, #d48806);\n}\n.menu-text[data-v-6ed6dbc9] {\n  font-size: 12px;\n  font-weight: 500;\n}\n@keyframes menuSlideUp-6ed6dbc9 {\nfrom {\n    opacity: 0;\n    transform: translateY(10px);\n}\nto {\n    opacity: 1;\n    transform: translateY(0);\n}\n}\n/* 流程/数据校验结果显示样式 */\n.validation-success[data-v-6ed6dbc9] {\n  text-align: center;\n  padding: 40px 20px;\n  color: #52c41a;\n}\n.validation-success .success-icon[data-v-6ed6dbc9] {\n  margin-bottom: 16px;\n}\n.validation-success h3[data-v-6ed6dbc9] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n.validation-success p[data-v-6ed6dbc9] {\n  margin: 0;\n  color: #666;\n  font-size: 14px;\n}\n.validation-errors .error-summary[data-v-6ed6dbc9] {\n  text-align: center;\n  padding: 20px;\n  background: #fff2f0;\n  border-radius: 8px;\n  margin-bottom: 20px;\n  border: 1px solid #ffccc7;\n}\n.validation-errors .error-summary .error-icon[data-v-6ed6dbc9] {\n  margin-bottom: 12px;\n}\n.validation-errors .error-summary h3[data-v-6ed6dbc9] {\n  margin: 0 0 8px 0;\n  color: #ff4d4f;\n  font-size: 16px;\n  font-weight: 600;\n}\n.validation-errors .error-summary p[data-v-6ed6dbc9] {\n  margin: 0;\n  color: var(--n-text-color-2);\n  font-size: 14px;\n}\n.validation-errors .error-list[data-v-6ed6dbc9] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.validation-errors .error-item[data-v-6ed6dbc9] {\n  background: white;\n  border: 1px solid #f0f0f0;\n  border-radius: 8px;\n  padding: 16px;\n  transition: all 0.2s ease;\n}\n.validation-errors .error-item[data-v-6ed6dbc9]:hover {\n  border-color: #d9d9d9;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n.validation-errors .error-item .error-header[data-v-6ed6dbc9] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 8px;\n}\n.validation-errors .error-item .error-header .error-number[data-v-6ed6dbc9] {\n  width: 24px;\n  height: 24px;\n  background: #ff4d4f;\n  color: white;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n.validation-errors .error-item .error-header .error-info[data-v-6ed6dbc9] {\n  flex: 1;\n  min-width: 0;\n}\n.validation-errors .error-item .error-header .error-info .error-node[data-v-6ed6dbc9] {\n  display: block;\n  color: var(--n-text-color-1);\n  font-size: 14px;\n  margin-bottom: 2px;\n}\n.validation-errors .error-item .error-header .error-info .error-field[data-v-6ed6dbc9] {\n  color: var(--n-text-color-3);\n  font-size: 12px;\n}\n.validation-errors .error-item .error-header .error-type[data-v-6ed6dbc9] {\n  padding: 2px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n}\n.validation-errors .error-item .error-header .error-type.required[data-v-6ed6dbc9] {\n  background: #fff2f0;\n  color: #ff4d4f;\n  border: 1px solid #ffccc7;\n}\n.validation-errors .error-item .error-header .error-type.incomplete[data-v-6ed6dbc9] {\n  background: #fff7e6;\n  color: #fa8c16;\n  border: 1px solid #ffd591;\n}\n.validation-errors .error-item .error-header .error-type.warning[data-v-6ed6dbc9] {\n  background: #fffbe6;\n  color: #faad14;\n  border: 1px solid #ffe58f;\n}\n.validation-errors .error-item .error-message[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n  font-size: 13px;\n  line-height: 1.5;\n  margin-bottom: 12px;\n  padding-left: 36px;\n}\n.validation-errors .error-item .error-actions[data-v-6ed6dbc9] {\n  padding-left: 36px;\n}\n.validation-errors .validation-tips[data-v-6ed6dbc9] {\n  margin-top: 24px;\n  padding: 16px;\n  background: #f6ffed;\n  border-radius: 8px;\n  border: 1px solid #b7eb8f;\n}\n.validation-errors .validation-tips h4[data-v-6ed6dbc9] {\n  margin: 0 0 12px 0;\n  color: #389e0d;\n  font-size: 14px;\n  font-weight: 600;\n}\n.validation-errors .validation-tips ul[data-v-6ed6dbc9] {\n  margin: 0;\n  padding-left: 16px;\n  color: var(--n-text-color-2);\n  font-size: 13px;\n  line-height: 1.6;\n}\n.validation-errors .validation-tips ul li[data-v-6ed6dbc9] {\n  margin-bottom: 6px;\n}\n.validation-errors .validation-tips ul li strong[data-v-6ed6dbc9] {\n  color: var(--n-text-color-1);\n}\n.validation-footer[data-v-6ed6dbc9] {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n/* 边的样式（Vue Flow） */\n[data-v-6ed6dbc9] .vue-flow__edge {\n  stroke: #1890ff;\n  stroke-width: 2px;\n}\n[data-v-6ed6dbc9] .vue-flow__edge-path {\n  stroke: #1890ff;\n  stroke-width: 2px;\n}\n[data-v-6ed6dbc9] .vue-flow__arrowhead {\n  fill: #1890ff;\n}\n[data-v-6ed6dbc9] .vue-flow__edge.animated {\n  stroke-dasharray: 5;\n  animation: dashdraw-6ed6dbc9 0.5s linear infinite;\n}\n@keyframes dashdraw-6ed6dbc9 {\nto {\n    stroke-dashoffset: -10;\n}\n}\n/* 暗色主题适配 */\n[data-theme=dark][data-v-6ed6dbc9] {\n  /* 添加节点菜单文字 */\n}\n[data-theme=dark] .approval-workflow-container[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n}\n[data-theme=dark] .add-menu-item span[data-v-6ed6dbc9] {\n  color: white;\n}\n[data-theme=dark] .validation-success[data-v-6ed6dbc9] {\n  color: #52c41a;\n}\n[data-theme=dark] .validation-success h3[data-v-6ed6dbc9] {\n  color: #52c41a;\n}\n[data-theme=dark] .validation-success p[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n}\n[data-theme=dark] .validation-errors .error-summary[data-v-6ed6dbc9] {\n  background: rgba(255, 77, 79, 0.1);\n  border-color: rgba(255, 77, 79, 0.3);\n}\n[data-theme=dark] .validation-errors .error-summary h3[data-v-6ed6dbc9] {\n  color: #ff4d4f;\n}\n[data-theme=dark] .validation-errors .error-summary p[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n}\n[data-theme=dark] .validation-errors .error-item[data-v-6ed6dbc9] {\n  background: var(--n-card-color);\n  border-color: var(--n-border-color);\n}\n[data-theme=dark] .validation-errors .error-item[data-v-6ed6dbc9]:hover {\n  border-color: rgba(255, 255, 255, 0.2);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n[data-theme=dark] .validation-errors .error-item .error-info .error-node[data-v-6ed6dbc9] {\n  color: var(--n-text-color-1);\n}\n[data-theme=dark] .validation-errors .error-item .error-info .error-field[data-v-6ed6dbc9] {\n  color: var(--n-text-color-3);\n}\n[data-theme=dark] .validation-errors .error-item .error-type.required[data-v-6ed6dbc9] {\n  background: rgba(255, 77, 79, 0.15);\n  color: #ff7875;\n  border-color: rgba(255, 77, 79, 0.3);\n}\n[data-theme=dark] .validation-errors .error-item .error-type.incomplete[data-v-6ed6dbc9] {\n  background: rgba(250, 140, 22, 0.15);\n  color: #ffa940;\n  border-color: rgba(250, 140, 22, 0.3);\n}\n[data-theme=dark] .validation-errors .error-item .error-type.warning[data-v-6ed6dbc9] {\n  background: rgba(250, 173, 20, 0.15);\n  color: #ffc53d;\n  border-color: rgba(250, 173, 20, 0.3);\n}\n[data-theme=dark] .validation-errors .error-item .error-message[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n}\n[data-theme=dark] .validation-errors .validation-tips[data-v-6ed6dbc9] {\n  background: rgba(82, 196, 26, 0.1);\n  border-color: rgba(82, 196, 26, 0.3);\n}\n[data-theme=dark] .validation-errors .validation-tips h4[data-v-6ed6dbc9] {\n  color: #73d13d;\n}\n[data-theme=dark] .validation-errors .validation-tips ul[data-v-6ed6dbc9] {\n  color: var(--n-text-color-2);\n}\n[data-theme=dark] .validation-errors .validation-tips ul li strong[data-v-6ed6dbc9] {\n  color: var(--n-text-color-1);\n}\n\n/* ─── 流程预览抽屉样式 ────────────────────────────────────── */\n.preview-stats[data-v-6ed6dbc9] {\n  display: flex;\n  gap: 12px;\n  margin-bottom: 24px;\n  flex-wrap: wrap;\n}\n.preview-stats .stat-item[data-v-6ed6dbc9] {\n  flex: 1;\n  min-width: 70px;\n  text-align: center;\n  padding: 12px 8px;\n  border-radius: 10px;\n  background: var(--n-action-color);\n  border: 1px solid var(--n-border-color);\n  transition: all 0.2s;\n}\n.preview-stats .stat-item .stat-value[data-v-6ed6dbc9] {\n  display: block;\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--n-text-color-1);\n}\n.preview-stats .stat-item .stat-label[data-v-6ed6dbc9] {\n  display: block;\n  font-size: 12px;\n  color: var(--n-text-color-3);\n  margin-top: 4px;\n}\n.preview-stats .stat-item.approval .stat-value[data-v-6ed6dbc9] {\n  color: #ff6b35;\n}\n.preview-stats .stat-item.copy .stat-value[data-v-6ed6dbc9] {\n  color: #1890ff;\n}\n.preview-stats .stat-item.condition .stat-value[data-v-6ed6dbc9] {\n  color: #faad14;\n}\n.preview-stats .stat-item.edge .stat-value[data-v-6ed6dbc9] {\n  color: #52c41a;\n}\n.preview-timeline[data-v-6ed6dbc9] {\n  position: relative;\n  padding: 0 0 0 8px;\n  /* 不同节点类型的圆点颜色 */\n}\n.preview-timeline .preview-step[data-v-6ed6dbc9] {\n  display: flex;\n  gap: 16px;\n  position: relative;\n  padding-bottom: 8px;\n}\n.preview-timeline .preview-step:last-child .step-line[data-v-6ed6dbc9] {\n  display: none;\n}\n.preview-timeline .step-connector[data-v-6ed6dbc9] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-shrink: 0;\n  width: 32px;\n}\n.preview-timeline .step-connector .step-dot[data-v-6ed6dbc9] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  flex-shrink: 0;\n  z-index: 1;\n  background: #999;\n}\n.preview-timeline .step-connector .step-line[data-v-6ed6dbc9] {\n  width: 2px;\n  flex: 1;\n  min-height: 20px;\n  background: var(--n-border-color);\n}\n.preview-timeline .start .step-dot[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #667eea, #764ba2);\n}\n.preview-timeline .approval .step-dot[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #ff6b35, #ff4500);\n}\n.preview-timeline .copy .step-dot[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #1890ff, #096dd9);\n}\n.preview-timeline .condition .step-dot[data-v-6ed6dbc9] {\n  background: linear-gradient(135deg, #faad14, #d48806);\n}\n.preview-timeline .step-content[data-v-6ed6dbc9] {\n  flex: 1;\n  padding-bottom: 20px;\n  min-width: 0;\n}\n.preview-timeline .step-content .step-header[data-v-6ed6dbc9] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n.preview-timeline .step-content .step-header .step-order[data-v-6ed6dbc9] {\n  font-size: 12px;\n  color: var(--n-text-color-3);\n  font-weight: 500;\n}\n.preview-timeline .step-content .step-header .step-type-badge[data-v-6ed6dbc9] {\n  font-size: 11px;\n  padding: 1px 8px;\n  border-radius: 10px;\n  background: var(--n-action-color);\n  color: var(--n-text-color-2);\n  border: 1px solid var(--n-border-color);\n}\n.preview-timeline .step-content .step-title[data-v-6ed6dbc9] {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--n-text-color-1);\n  margin-bottom: 8px;\n}\n.preview-timeline .step-content .step-details[data-v-6ed6dbc9] {\n  background: var(--n-action-color);\n  border-radius: 8px;\n  padding: 10px 14px;\n  border: 1px solid var(--n-border-color);\n}\n.preview-timeline .step-content .step-details .step-detail-item[data-v-6ed6dbc9] {\n  font-size: 13px;\n  color: var(--n-text-color-2);\n  line-height: 1.8;\n  word-break: break-all;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n.preview-timeline .step-content .step-details .step-detail-item[data-v-6ed6dbc9]:not(:last-child) {\n  border-bottom: 1px dashed var(--n-border-color);\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n}\n.preview-timeline .step-content .step-details .step-detail-item.is-warning[data-v-6ed6dbc9] {\n  color: #faad14;\n}\n.preview-timeline .step-content .step-details .step-detail-item .detail-label[data-v-6ed6dbc9] {\n  color: var(--n-text-color-3);\n  font-size: 12px;\n  flex-shrink: 0;\n  line-height: 24px;\n}\n.preview-timeline .step-content .step-details .step-detail-item .mode-badge[data-v-6ed6dbc9] {\n  display: inline-block;\n  font-size: 12px;\n  font-weight: 600;\n  padding: 2px 10px;\n  border-radius: 12px;\n  line-height: 20px;\n}\n.preview-timeline .step-content .step-details .step-detail-item .mode-badge.any[data-v-6ed6dbc9] {\n  background: rgba(24, 144, 255, 0.1);\n  color: #1890ff;\n  border: 1px solid rgba(24, 144, 255, 0.25);\n}\n.preview-timeline .step-content .step-details .step-detail-item .mode-badge.all[data-v-6ed6dbc9] {\n  background: rgba(255, 77, 79, 0.1);\n  color: #ff4d4f;\n  border: 1px solid rgba(255, 77, 79, 0.25);\n}\n.preview-timeline .step-content .step-details .step-detail-item .mode-badge.sequence[data-v-6ed6dbc9] {\n  background: rgba(114, 46, 209, 0.1);\n  color: #722ed1;\n  border: 1px solid rgba(114, 46, 209, 0.25);\n}\n.preview-timeline .step-content .step-details .step-detail-item .user-tag[data-v-6ed6dbc9] {\n  margin: 1px 2px;\n}\n.preview-timeline .step-content .step-details .step-detail-item .warning-text[data-v-6ed6dbc9] {\n  color: #faad14;\n  font-weight: 500;\n}\n.preview-empty[data-v-6ed6dbc9] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 0;\n}\n.preview-empty p[data-v-6ed6dbc9] {\n  margin-top: 12px;\n  color: var(--n-text-color-3);\n  font-size: 14px;\n}\n.preview-footer[data-v-6ed6dbc9] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\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;ACtEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACnNA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACjKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AC3KA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}