@robot-admin/naive-ui-components 0.3.0

package/dist/C_VtableGantt2.js.map

@@ -0,0 +1 @@
+{"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","../src/components/C_VtableGantt/index.vue"],"sourcesContent":["// 甘特图相关类型定义和预设配置\r\n\r\n// ==================== 类型定义 ====================\r\nexport interface GanttTask {\r\n  id: string | number\r\n  title: string\r\n  start: string | Date\r\n  end?: string | Date\r\n  progress?: number\r\n  priority?: string\r\n  type?: 'milestone' | 'task'\r\n  children?: GanttTask[]\r\n  [key: string]: any\r\n}\r\n\r\nexport interface GanttOptions {\r\n  [key: string]: any\r\n}\r\n\r\nexport type GanttPreset =\r\n  | 'basic'\r\n  | 'project'\r\n  | 'timeline'\r\n  | 'milestone'\r\n  | 'official'\r\n\r\n// ==================== 通用主题配置 ====================\r\n// 移除硬编码颜色，让背景透明以跟随系统主题\r\nexport const commonTheme = {\r\n  headerStyle: {\r\n    borderColor: 'rgba(128, 128, 128, 0.2)',\r\n    borderLineWidth: 1,\r\n    fontSize: 14,\r\n    fontWeight: 'bold',\r\n    // bgColor 留空或透明，自动跟随主题\r\n  },\r\n  bodyStyle: {\r\n    borderColor: 'rgba(128, 128, 128, 0.2)',\r\n    borderLineWidth: [1, 0, 1, 0],\r\n    fontSize: 13,\r\n    // bgColor 留空或透明，自动跟随主题\r\n  },\r\n}\r\n\r\n// ==================== 预设配置 ====================\r\nexport const presetConfigs = {\r\n  basic: {\r\n    overscrollBehavior: 'none',\r\n    headerRowHeight: 40,\r\n    rowHeight: 40,\r\n    taskListTable: {\r\n      columns: [\r\n        { field: 'title', title: '任务名称', width: 220, tree: true },\r\n        { field: 'start', title: '开始时间', width: 120 },\r\n        { field: 'end', title: '结束时间', width: 120 },\r\n        { field: 'progress', title: '进度', width: 80 },\r\n      ],\r\n      tableWidth: 420,\r\n      minTableWidth: 300,\r\n      theme: commonTheme,\r\n    },\r\n    frame: {\r\n      outerFrameStyle: {\r\n        borderLineWidth: 1,\r\n        borderColor: '#e1e4e8',\r\n        cornerRadius: 6,\r\n      },\r\n      verticalSplitLineMoveable: true,\r\n      verticalSplitLine: { lineColor: '#e1e4e8', lineWidth: 2 },\r\n    },\r\n    grid: {\r\n      // 移除 weekendBackgroundColor，让它透明跟随主题\r\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n    },\r\n    taskBar: {\r\n      startDateField: 'start',\r\n      endDateField: 'end',\r\n      progressField: 'progress',\r\n      moveable: true,\r\n      resizable: true,\r\n      labelText: '{title}',\r\n      labelTextStyle: { fontSize: 12, textAlign: 'left' },\r\n      barStyle: {\r\n        width: 18,\r\n        barColor: '#1890ff',\r\n        completedBarColor: '#52c41a',\r\n        cornerRadius: 4,\r\n        borderLineWidth: 0,\r\n      },\r\n      milestoneStyle: {\r\n        borderColor: '#fa8c16',\r\n        borderLineWidth: 1,\r\n        fillColor: '#ffd666',\r\n        width: 12,\r\n      },\r\n    },\r\n    timelineHeader: {\r\n      // 移除 backgroundColor，让它透明跟随主题\r\n      colWidth: 60,\r\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n      scales: [\r\n        {\r\n          unit: 'week',\r\n          step: 1,\r\n          format: (date: any) => `第${date.dateIndex}周`,\r\n          style: { fontSize: 12, fontWeight: 'bold' },\r\n        },\r\n        {\r\n          unit: 'day',\r\n          step: 1,\r\n          format: (date: any) => `${date.dateIndex}`,\r\n          style: { fontSize: 11 },\r\n        },\r\n      ],\r\n    },\r\n    scrollStyle: {\r\n      scrollRailColor: 'rgba(246,246,246,0.5)',\r\n      visible: 'scrolling',\r\n      width: 6,\r\n      scrollSliderCornerRadius: 2,\r\n      scrollSliderColor: '#1890ff',\r\n    },\r\n  },\r\n\r\n  project: {\r\n    overscrollBehavior: 'none',\r\n    headerRowHeight: 40,\r\n    rowHeight: 40,\r\n    taskListTable: {\r\n      columns: [\r\n        {\r\n          field: 'title',\r\n          title: '任务名称',\r\n          width: 200,\r\n          tree: true,\r\n          editor: 'input',\r\n        },\r\n        {\r\n          field: 'start',\r\n          title: '开始时间',\r\n          width: 120,\r\n          editor: 'date-input',\r\n        },\r\n        { field: 'end', title: '结束时间', width: 120, editor: 'date-input' },\r\n        { field: 'priority', title: '优先级', width: 80, editor: 'input' },\r\n        { field: 'progress', title: '进度%', width: 80, editor: 'input' },\r\n      ],\r\n      tableWidth: 480,\r\n      minTableWidth: 350,\r\n      maxTableWidth: 800,\r\n      theme: commonTheme,\r\n      hierarchyExpandLevel: 2,\r\n    },\r\n    frame: {\r\n      outerFrameStyle: {\r\n        borderLineWidth: 2,\r\n        borderColor: '#e1e4e8',\r\n        cornerRadius: 8,\r\n      },\r\n      verticalSplitLineMoveable: true,\r\n      verticalSplitLine: { lineColor: '#e1e4e8', lineWidth: 3 },\r\n    },\r\n    grid: {\r\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n    },\r\n    taskBar: {\r\n      startDateField: 'start',\r\n      endDateField: 'end',\r\n      progressField: 'progress',\r\n      moveable: true,\r\n      resizable: true,\r\n      hoverBarStyle: { barOverlayColor: 'rgba(24, 144, 255, 0.3)' },\r\n      labelText: '{title} {progress}%',\r\n      labelTextStyle: {\r\n        fontSize: 12,\r\n        textAlign: 'left',\r\n        textOverflow: 'ellipsis',\r\n      },\r\n      barStyle: {\r\n        width: 20,\r\n        barColor: '#1890ff',\r\n        completedBarColor: '#52c41a',\r\n        cornerRadius: 6,\r\n        borderLineWidth: 0,\r\n      },\r\n    },\r\n    timelineHeader: {\r\n      colWidth: 60,\r\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n      scales: [\r\n        {\r\n          unit: 'week',\r\n          step: 1,\r\n          startOfWeek: 'monday',\r\n          format: (date: any) => `第${date.dateIndex}周`,\r\n          style: { fontSize: 13, fontWeight: 'bold', textAlign: 'center' },\r\n        },\r\n        {\r\n          unit: 'day',\r\n          step: 1,\r\n          format: (date: any) => `${date.dateIndex}`,\r\n          style: { fontSize: 11, textAlign: 'center' },\r\n        },\r\n      ],\r\n    },\r\n    rowSeriesNumber: {\r\n      title: '序号',\r\n      dragOrder: true,\r\n      headerStyle: { borderColor: 'rgba(128, 128, 128, 0.2)' },\r\n      style: { borderColor: 'rgba(128, 128, 128, 0.2)' },\r\n    },\r\n    scrollStyle: {\r\n      scrollRailColor: 'rgba(246,246,246,0.5)',\r\n      visible: 'scrolling',\r\n      width: 6,\r\n      scrollSliderCornerRadius: 2,\r\n      scrollSliderColor: '#1890ff',\r\n    },\r\n  },\r\n\r\n  timeline: {\r\n    overscrollBehavior: 'none',\r\n    headerRowHeight: 45,\r\n    rowHeight: 40,\r\n    taskListTable: {\r\n      columns: [\r\n        { field: 'title', title: '事件名称', width: 250, tree: true },\r\n        { field: 'start', title: '时间', width: 150 },\r\n      ],\r\n      tableWidth: 400,\r\n      minTableWidth: 300,\r\n      theme: {\r\n        headerStyle: { ...commonTheme.headerStyle },\r\n        bodyStyle: commonTheme.bodyStyle,\r\n      },\r\n    },\r\n    frame: {\r\n      outerFrameStyle: {\r\n        borderLineWidth: 1,\r\n        borderColor: 'rgba(128, 128, 128, 0.3)',\r\n        cornerRadius: 4,\r\n      },\r\n      verticalSplitLineMoveable: true,\r\n    },\r\n    grid: {\r\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n    },\r\n    taskBar: {\r\n      startDateField: 'start',\r\n      endDateField: 'end',\r\n      progressField: 'progress',\r\n      moveable: true,\r\n      resizable: true,\r\n      labelText: '{title}',\r\n      labelTextStyle: { fontSize: 12, textAlign: 'left' },\r\n      barStyle: {\r\n        width: 22,\r\n        barColor: '#722ed1',\r\n        completedBarColor: '#b37feb',\r\n        cornerRadius: 8,\r\n        borderLineWidth: 0,\r\n      },\r\n    },\r\n    timelineHeader: {\r\n      colWidth: 60,\r\n      scales: [\r\n        {\r\n          unit: 'month',\r\n          step: 1,\r\n          format: (date: any) => `${date.dateIndex}月`,\r\n          style: { fontSize: 13, fontWeight: 'bold' },\r\n        },\r\n        {\r\n          unit: 'day',\r\n          step: 1,\r\n          format: (date: any) => `${date.dateIndex}`,\r\n          style: { fontSize: 11 },\r\n        },\r\n      ],\r\n    },\r\n    scrollStyle: {\r\n      scrollRailColor: 'rgba(246,246,246,0.5)',\r\n      visible: 'scrolling',\r\n      width: 6,\r\n      scrollSliderCornerRadius: 2,\r\n      scrollSliderColor: '#1890ff',\r\n    },\r\n  },\r\n\r\n  milestone: {\r\n    overscrollBehavior: 'none',\r\n    headerRowHeight: 40,\r\n    rowHeight: 38,\r\n    taskListTable: {\r\n      columns: [\r\n        { field: 'title', title: '里程碑', width: 200, tree: true },\r\n        { field: 'start', title: '目标日期', width: 120 },\r\n        { field: 'priority', title: '重要性', width: 100 },\r\n      ],\r\n      tableWidth: 400,\r\n      minTableWidth: 300,\r\n      theme: {\r\n        headerStyle: {\r\n          ...commonTheme.headerStyle,\r\n          borderColor: '#ffa940',\r\n        },\r\n        bodyStyle: { ...commonTheme.bodyStyle, borderColor: '#ffa940' },\r\n      },\r\n    },\r\n    frame: {\r\n      outerFrameStyle: {\r\n        borderLineWidth: 2,\r\n        borderColor: '#ffa940',\r\n        cornerRadius: 6,\r\n      },\r\n      verticalSplitLineMoveable: true,\r\n    },\r\n    grid: {\r\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(255, 168, 64, 0.3)' },\r\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(255, 168, 64, 0.3)' },\r\n    },\r\n    taskBar: {\r\n      startDateField: 'start',\r\n      endDateField: 'start',\r\n      labelText: '{title}',\r\n      labelTextStyle: { fontSize: 12, fontWeight: 'bold' },\r\n      barStyle: { width: 0, barColor: 'transparent' },\r\n      milestoneStyle: {\r\n        borderColor: '#fa8c16',\r\n        borderLineWidth: 2,\r\n        fillColor: '#ffd666',\r\n        width: 16,\r\n      },\r\n    },\r\n    timelineHeader: {\r\n      colWidth: 80,\r\n      scales: [\r\n        {\r\n          unit: 'month',\r\n          step: 1,\r\n          format: (date: any) => `${date.dateIndex}月`,\r\n          style: { fontSize: 13, fontWeight: 'bold' },\r\n        },\r\n        {\r\n          unit: 'week',\r\n          step: 1,\r\n          format: (date: any) => `第${date.dateIndex}周`,\r\n          style: { fontSize: 11 },\r\n        },\r\n      ],\r\n    },\r\n    scrollStyle: {\r\n      scrollRailColor: 'rgba(246,246,246,0.5)',\r\n      visible: 'scrolling',\r\n      width: 6,\r\n      scrollSliderCornerRadius: 2,\r\n      scrollSliderColor: '#1890ff',\r\n    },\r\n  },\r\n\r\n  official: {\r\n    overscrollBehavior: 'none',\r\n    headerRowHeight: 40,\r\n    rowHeight: 40,\r\n    taskListTable: {\r\n      columns: [\r\n        {\r\n          field: 'title',\r\n          title: 'title',\r\n          width: 180,\r\n          sort: true,\r\n          tree: true,\r\n          editor: 'input',\r\n        },\r\n        {\r\n          field: 'start',\r\n          title: 'start',\r\n          width: 120,\r\n          sort: true,\r\n          editor: 'date-input',\r\n        },\r\n        {\r\n          field: 'end',\r\n          title: 'end',\r\n          width: 120,\r\n          sort: true,\r\n          editor: 'date-input',\r\n        },\r\n        {\r\n          field: 'priority',\r\n          title: 'priority',\r\n          width: 80,\r\n          sort: true,\r\n          editor: 'input',\r\n        },\r\n        {\r\n          field: 'progress',\r\n          title: 'progress',\r\n          width: 80,\r\n          sort: true,\r\n          editor: 'input',\r\n        },\r\n      ],\r\n      tableWidth: 460,\r\n      minTableWidth: 350,\r\n      maxTableWidth: 800,\r\n      theme: {\r\n        headerStyle: {\r\n          ...commonTheme.headerStyle,\r\n          fontSize: 18,\r\n          color: 'red',\r\n        },\r\n        bodyStyle: {\r\n          ...commonTheme.bodyStyle,\r\n          fontSize: 16,\r\n          color: '#4D4D4D',\r\n        },\r\n      },\r\n      hierarchyExpandLevel: 2,\r\n    },\r\n    frame: {\r\n      outerFrameStyle: {\r\n        borderLineWidth: 2,\r\n        borderColor: '#e1e4e8',\r\n        cornerRadius: 8,\r\n      },\r\n      verticalSplitLineMoveable: true,\r\n      verticalSplitLine: { lineColor: '#e1e4e8', lineWidth: 3 },\r\n      horizontalSplitLine: { lineColor: '#e1e4e8', lineWidth: 3 },\r\n    },\r\n    grid: {\r\n      verticalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n      horizontalLine: { lineWidth: 1, lineColor: 'rgba(128, 128, 128, 0.2)' },\r\n    },\r\n    taskBar: {\r\n      startDateField: 'start',\r\n      endDateField: 'end',\r\n      progressField: 'progress',\r\n      moveable: true,\r\n      resizable: true,\r\n      hoverBarStyle: { barOverlayColor: 'rgba(99, 144, 0, 0.4)' },\r\n      labelText: '{title} {progress}%',\r\n      labelTextStyle: {\r\n        fontSize: 16,\r\n        textAlign: 'left',\r\n        textOverflow: 'ellipsis',\r\n      },\r\n      barStyle: {\r\n        width: 20,\r\n        barColor: '#ee8800',\r\n        completedBarColor: '#91e8e0',\r\n        cornerRadius: 8,\r\n        borderLineWidth: 1,\r\n        borderColor: 'black',\r\n      },\r\n      milestoneStyle: {\r\n        borderColor: 'red',\r\n        borderLineWidth: 1,\r\n        fillColor: 'green',\r\n        width: 15,\r\n      },\r\n    },\r\n    timelineHeader: {\r\n      backgroundColor: '#EEF1F5',\r\n      colWidth: 60,\r\n      horizontalLine: { lineWidth: 1, lineColor: '#e1e4e8' },\r\n      verticalLine: { lineWidth: 1, lineColor: '#e1e4e8' },\r\n      scales: [\r\n        {\r\n          unit: 'week',\r\n          step: 1,\r\n          startOfWeek: 'sunday',\r\n          format: (date: any) => `Week ${date.dateIndex}`,\r\n          style: {\r\n            fontSize: 20,\r\n            fontWeight: 'bold',\r\n            color: 'white',\r\n            strokeColor: 'black',\r\n            textAlign: 'right',\r\n            textBaseline: 'bottom',\r\n            textStick: true,\r\n          },\r\n        },\r\n        {\r\n          unit: 'day',\r\n          step: 1,\r\n          format: (date: any) => date.dateIndex.toString(),\r\n          style: {\r\n            fontSize: 20,\r\n            fontWeight: 'bold',\r\n            color: 'white',\r\n            strokeColor: 'black',\r\n            textAlign: 'right',\r\n            textBaseline: 'bottom',\r\n          },\r\n        },\r\n      ],\r\n    },\r\n    markLine: [\r\n      {\r\n        date: '2024-07-28',\r\n        style: { lineWidth: 1, lineColor: 'blue', lineDash: [8, 4] },\r\n      },\r\n      {\r\n        date: '2024-08-17',\r\n        style: { lineWidth: 2, lineColor: 'red', lineDash: [8, 4] },\r\n      },\r\n    ],\r\n    rowSeriesNumber: {\r\n      title: '行号',\r\n      dragOrder: true,\r\n      headerStyle: { borderColor: 'rgba(128, 128, 128, 0.2)' },\r\n      style: { borderColor: 'rgba(128, 128, 128, 0.2)' },\r\n    },\r\n    scrollStyle: {\r\n      scrollRailColor: 'rgba(246,246,246,0.5)',\r\n      visible: 'scrolling',\r\n      width: 6,\r\n      scrollSliderCornerRadius: 2,\r\n      scrollSliderColor: '#1890ff',\r\n    },\r\n  },\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-08-01\r\n * @Description: VTable 甘特图组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-vtable-gantt-wrapper\">\r\n    <div v-if=\"showToolbar\" class=\"gantt-toolbar\">\r\n      <div class=\"toolbar-left\">\r\n        <span class=\"gantt-title\">{{ title || \"甘特图\" }}</span>\r\n      </div>\r\n      <div class=\"toolbar-right\">\r\n        <NButton\r\n          v-if=\"showFullscreenButton\"\r\n          size=\"small\"\r\n          @click=\"toggleFullscreen\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon\r\n              :name=\"isFullscreen ? 'carbon:minimize' : 'carbon:maximize'\"\r\n              :size=\"16\"\r\n              color=\"currentColor\"\r\n            />\r\n          </template>\r\n          {{ isFullscreen ? \"退出全屏\" : \"全屏\" }}\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n    <div\r\n      ref=\"ganttContainerRef\"\r\n      class=\"gantt-container\"\r\n      :style=\"{ height: containerHeight }\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, watch, nextTick, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport {\r\n  presetConfigs,\r\n  type GanttTask,\r\n  type GanttOptions,\r\n  type GanttPreset,\r\n} from \"./data\";\r\n\r\ndefineOptions({ name: \"C_VtableGantt\" });\r\n\r\ninterface Props {\r\n  data?: GanttTask[];\r\n  options?: GanttOptions;\r\n  preset?: GanttPreset;\r\n  height?: string | number;\r\n  title?: string;\r\n  showToolbar?: boolean;\r\n  showFullscreenButton?: boolean;\r\n  theme?: \"light\" | \"dark\";\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  data: () => [],\r\n  options: () => ({}),\r\n  preset: \"basic\",\r\n  height: \"600px\",\r\n  title: \"\",\r\n  showToolbar: true,\r\n  showFullscreenButton: true,\r\n  theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  ganttCreated: [gantt: any];\r\n  taskClick: [task: GanttTask, event: Event];\r\n  taskChange: [task: GanttTask, changes: any];\r\n}>();\r\n\r\nconst ganttContainerRef = ref<HTMLDivElement>();\r\nconst ganttInstance = ref<any>();\r\nconst isFullscreen = ref(false);\r\n\r\nconst containerHeight = computed(() =>\r\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\r\n);\r\n\r\nconst deepMerge = (target: any, source: any, seen = new WeakMap()): any => {\r\n  if (!isObject(target)) return source;\r\n  if (!isObject(source)) return target;\r\n  if (seen.has(source)) return seen.get(source);\r\n  return createMergeResult(target, source, seen);\r\n};\r\n\r\nconst isObject = (value: any): boolean => {\r\n  return value !== null && typeof value === \"object\";\r\n};\r\n\r\nconst isSpecialObject = (value: any): boolean => {\r\n  return value instanceof Date || value instanceof RegExp;\r\n};\r\n\r\nconst createMergeResult = (\r\n  target: any,\r\n  source: any,\r\n  seen: WeakMap<any, any>,\r\n): any => {\r\n  const result = Array.isArray(target) ? [...target] : { ...target };\r\n  seen.set(source, result);\r\n  for (const key in source) {\r\n    if (!source.hasOwnProperty(key)) continue;\r\n    const sourceValue = source[key];\r\n    const shouldDeepMerge =\r\n      isObject(sourceValue) &&\r\n      !Array.isArray(sourceValue) &&\r\n      !isSpecialObject(sourceValue);\r\n    result[key] = shouldDeepMerge\r\n      ? deepMerge(target[key] || {}, sourceValue, seen)\r\n      : sourceValue;\r\n  }\r\n  return result;\r\n};\r\n\r\nconst processData = (data: GanttTask[]): GanttTask[] => {\r\n  return data.map((item) => ({\r\n    ...item,\r\n    title: item.title || `任务${item.id}`,\r\n    children: item.children ? processData(item.children) : undefined,\r\n  }));\r\n};\r\n\r\nconst getThemeConfig = (isDark: boolean) => ({\r\n  underlayBackgroundColor: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  timelineHeaderBg: isDark ? \"#2d2d2d\" : \"#EEF1F5\",\r\n  gridBg: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  lineColor: isDark ? \"rgba(255, 255, 255, 0.1)\" : \"rgba(128, 128, 128, 0.2)\",\r\n  textColor: isDark ? \"#ffffff\" : \"#000000\",\r\n});\r\n\r\nconst applyThemeToTimelineHeader = (timelineHeader: any, themeColors: any) => ({\r\n  ...timelineHeader,\r\n  backgroundColor: themeColors.timelineHeaderBg,\r\n  horizontalLine: {\r\n    ...timelineHeader?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...timelineHeader?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  scales: timelineHeader?.scales?.map((scale: any) => ({\r\n    ...scale,\r\n    style: {\r\n      ...scale.style,\r\n      color: themeColors.textColor,\r\n    },\r\n  })),\r\n});\r\n\r\nconst applyThemeToGrid = (grid: any, themeColors: any) => ({\r\n  ...grid,\r\n  backgroundColor: themeColors.gridBg,\r\n  horizontalLine: {\r\n    ...grid?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...grid?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n});\r\n\r\nconst buildGanttOptions = (\r\n  finalConfig: any,\r\n  processedData: GanttTask[],\r\n  tableTheme: any,\r\n  themeColors: any,\r\n) => ({\r\n  ...finalConfig,\r\n  records: processedData,\r\n  underlayBackgroundColor: themeColors.underlayBackgroundColor,\r\n  taskListTable: {\r\n    ...finalConfig.taskListTable,\r\n    theme: tableTheme,\r\n  },\r\n  timelineHeader: applyThemeToTimelineHeader(\r\n    finalConfig.timelineHeader,\r\n    themeColors,\r\n  ),\r\n  grid: applyThemeToGrid(finalConfig.grid, themeColors),\r\n});\r\n\r\nconst bindGanttEvents = (instance: any) => {\r\n  instance.on(\"click_cell\", (args: any) => {\r\n    const { record, event } = args || {};\r\n    if (record) emit(\"taskClick\", record, event);\r\n  });\r\n  instance.on(\"change_data\", (args: any) => {\r\n    const { record, changes } = args || {};\r\n    if (record && changes) emit(\"taskChange\", record, changes);\r\n  });\r\n};\r\n\r\nconst initGantt = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    const { Gantt } = await import(\"@visactor/vtable-gantt\");\r\n    const { themes } = await import(\"@visactor/vtable\");\r\n    const isDark = props.theme === \"dark\";\r\n    const presetConfig = presetConfigs[props.preset] || presetConfigs.basic;\r\n    const finalConfig = deepMerge(presetConfig, props.options);\r\n    const processedData = processData(props.data || []);\r\n    if (ganttInstance.value) ganttInstance.value.release();\r\n    const tableTheme = isDark ? themes.DARK : themes.DEFAULT;\r\n    const themeColors = getThemeConfig(isDark);\r\n    const ganttOptions = buildGanttOptions(\r\n      finalConfig,\r\n      processedData,\r\n      tableTheme,\r\n      themeColors,\r\n    );\r\n    ganttInstance.value = new Gantt(ganttContainerRef.value, ganttOptions);\r\n    bindGanttEvents(ganttInstance.value);\r\n    emit(\"ganttCreated\", ganttInstance.value);\r\n  } catch (error) {\r\n    console.error(\"甘特图初始化失败:\", error);\r\n  }\r\n};\r\n\r\nconst toggleFullscreen = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    if (!document.fullscreenElement) {\r\n      await ganttContainerRef.value.requestFullscreen();\r\n      isFullscreen.value = true;\r\n    } else {\r\n      await document.exitFullscreen();\r\n      isFullscreen.value = false;\r\n    }\r\n    setTimeout(() => ganttInstance.value?.resize?.(), 100);\r\n  } catch (error) {\r\n    console.warn(\"全屏切换失败:\", error);\r\n    isFullscreen.value = !isFullscreen.value;\r\n    nextTick(() => ganttInstance.value?.resize?.());\r\n  }\r\n};\r\n\r\nconst handleFullscreenChange = () => {\r\n  isFullscreen.value = !!document.fullscreenElement;\r\n  nextTick(() => ganttInstance.value?.resize?.());\r\n};\r\n\r\nconst updateData = (newData: GanttTask[]) => {\r\n  if (ganttInstance.value && newData) {\r\n    try {\r\n      ganttInstance.value.setRecords(processData(newData));\r\n    } catch (error) {\r\n      console.warn(\"更新数据失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst updateOptions = (newOptions: GanttOptions) => {\r\n  if (ganttInstance.value && newOptions) {\r\n    try {\r\n      ganttInstance.value.updateOption(newOptions);\r\n    } catch (error) {\r\n      console.warn(\"更新配置失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst destroyGantt = () => {\r\n  if (ganttInstance.value) {\r\n    try {\r\n      ganttInstance.value.release();\r\n    } catch (error) {\r\n      console.warn(\"销毁甘特图失败:\", error);\r\n    } finally {\r\n      ganttInstance.value = undefined;\r\n    }\r\n  }\r\n};\r\n\r\nwatch(\r\n  () => props.data,\r\n  (newData) => {\r\n    if (newData && ganttInstance.value) updateData(newData);\r\n  },\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => [props.options, props.preset],\r\n  () => nextTick(() => initGantt()),\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => props.theme,\r\n  () => nextTick(() => initGantt()),\r\n);\r\n\r\nonMounted(() => {\r\n  document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  nextTick(() => setTimeout(() => initGantt(), 100));\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  destroyGantt();\r\n});\r\n\r\ndefineExpose({\r\n  ganttInstance,\r\n  updateData,\r\n  updateOptions,\r\n  toggleFullscreen,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-08-01\r\n * @Description: VTable 甘特图组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-vtable-gantt-wrapper\">\r\n    <div v-if=\"showToolbar\" class=\"gantt-toolbar\">\r\n      <div class=\"toolbar-left\">\r\n        <span class=\"gantt-title\">{{ title || \"甘特图\" }}</span>\r\n      </div>\r\n      <div class=\"toolbar-right\">\r\n        <NButton\r\n          v-if=\"showFullscreenButton\"\r\n          size=\"small\"\r\n          @click=\"toggleFullscreen\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon\r\n              :name=\"isFullscreen ? 'carbon:minimize' : 'carbon:maximize'\"\r\n              :size=\"16\"\r\n              color=\"currentColor\"\r\n            />\r\n          </template>\r\n          {{ isFullscreen ? \"退出全屏\" : \"全屏\" }}\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n    <div\r\n      ref=\"ganttContainerRef\"\r\n      class=\"gantt-container\"\r\n      :style=\"{ height: containerHeight }\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, watch, nextTick, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport {\r\n  presetConfigs,\r\n  type GanttTask,\r\n  type GanttOptions,\r\n  type GanttPreset,\r\n} from \"./data\";\r\n\r\ndefineOptions({ name: \"C_VtableGantt\" });\r\n\r\ninterface Props {\r\n  data?: GanttTask[];\r\n  options?: GanttOptions;\r\n  preset?: GanttPreset;\r\n  height?: string | number;\r\n  title?: string;\r\n  showToolbar?: boolean;\r\n  showFullscreenButton?: boolean;\r\n  theme?: \"light\" | \"dark\";\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  data: () => [],\r\n  options: () => ({}),\r\n  preset: \"basic\",\r\n  height: \"600px\",\r\n  title: \"\",\r\n  showToolbar: true,\r\n  showFullscreenButton: true,\r\n  theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  ganttCreated: [gantt: any];\r\n  taskClick: [task: GanttTask, event: Event];\r\n  taskChange: [task: GanttTask, changes: any];\r\n}>();\r\n\r\nconst ganttContainerRef = ref<HTMLDivElement>();\r\nconst ganttInstance = ref<any>();\r\nconst isFullscreen = ref(false);\r\n\r\nconst containerHeight = computed(() =>\r\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\r\n);\r\n\r\nconst deepMerge = (target: any, source: any, seen = new WeakMap()): any => {\r\n  if (!isObject(target)) return source;\r\n  if (!isObject(source)) return target;\r\n  if (seen.has(source)) return seen.get(source);\r\n  return createMergeResult(target, source, seen);\r\n};\r\n\r\nconst isObject = (value: any): boolean => {\r\n  return value !== null && typeof value === \"object\";\r\n};\r\n\r\nconst isSpecialObject = (value: any): boolean => {\r\n  return value instanceof Date || value instanceof RegExp;\r\n};\r\n\r\nconst createMergeResult = (\r\n  target: any,\r\n  source: any,\r\n  seen: WeakMap<any, any>,\r\n): any => {\r\n  const result = Array.isArray(target) ? [...target] : { ...target };\r\n  seen.set(source, result);\r\n  for (const key in source) {\r\n    if (!source.hasOwnProperty(key)) continue;\r\n    const sourceValue = source[key];\r\n    const shouldDeepMerge =\r\n      isObject(sourceValue) &&\r\n      !Array.isArray(sourceValue) &&\r\n      !isSpecialObject(sourceValue);\r\n    result[key] = shouldDeepMerge\r\n      ? deepMerge(target[key] || {}, sourceValue, seen)\r\n      : sourceValue;\r\n  }\r\n  return result;\r\n};\r\n\r\nconst processData = (data: GanttTask[]): GanttTask[] => {\r\n  return data.map((item) => ({\r\n    ...item,\r\n    title: item.title || `任务${item.id}`,\r\n    children: item.children ? processData(item.children) : undefined,\r\n  }));\r\n};\r\n\r\nconst getThemeConfig = (isDark: boolean) => ({\r\n  underlayBackgroundColor: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  timelineHeaderBg: isDark ? \"#2d2d2d\" : \"#EEF1F5\",\r\n  gridBg: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  lineColor: isDark ? \"rgba(255, 255, 255, 0.1)\" : \"rgba(128, 128, 128, 0.2)\",\r\n  textColor: isDark ? \"#ffffff\" : \"#000000\",\r\n});\r\n\r\nconst applyThemeToTimelineHeader = (timelineHeader: any, themeColors: any) => ({\r\n  ...timelineHeader,\r\n  backgroundColor: themeColors.timelineHeaderBg,\r\n  horizontalLine: {\r\n    ...timelineHeader?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...timelineHeader?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  scales: timelineHeader?.scales?.map((scale: any) => ({\r\n    ...scale,\r\n    style: {\r\n      ...scale.style,\r\n      color: themeColors.textColor,\r\n    },\r\n  })),\r\n});\r\n\r\nconst applyThemeToGrid = (grid: any, themeColors: any) => ({\r\n  ...grid,\r\n  backgroundColor: themeColors.gridBg,\r\n  horizontalLine: {\r\n    ...grid?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...grid?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n});\r\n\r\nconst buildGanttOptions = (\r\n  finalConfig: any,\r\n  processedData: GanttTask[],\r\n  tableTheme: any,\r\n  themeColors: any,\r\n) => ({\r\n  ...finalConfig,\r\n  records: processedData,\r\n  underlayBackgroundColor: themeColors.underlayBackgroundColor,\r\n  taskListTable: {\r\n    ...finalConfig.taskListTable,\r\n    theme: tableTheme,\r\n  },\r\n  timelineHeader: applyThemeToTimelineHeader(\r\n    finalConfig.timelineHeader,\r\n    themeColors,\r\n  ),\r\n  grid: applyThemeToGrid(finalConfig.grid, themeColors),\r\n});\r\n\r\nconst bindGanttEvents = (instance: any) => {\r\n  instance.on(\"click_cell\", (args: any) => {\r\n    const { record, event } = args || {};\r\n    if (record) emit(\"taskClick\", record, event);\r\n  });\r\n  instance.on(\"change_data\", (args: any) => {\r\n    const { record, changes } = args || {};\r\n    if (record && changes) emit(\"taskChange\", record, changes);\r\n  });\r\n};\r\n\r\nconst initGantt = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    const { Gantt } = await import(\"@visactor/vtable-gantt\");\r\n    const { themes } = await import(\"@visactor/vtable\");\r\n    const isDark = props.theme === \"dark\";\r\n    const presetConfig = presetConfigs[props.preset] || presetConfigs.basic;\r\n    const finalConfig = deepMerge(presetConfig, props.options);\r\n    const processedData = processData(props.data || []);\r\n    if (ganttInstance.value) ganttInstance.value.release();\r\n    const tableTheme = isDark ? themes.DARK : themes.DEFAULT;\r\n    const themeColors = getThemeConfig(isDark);\r\n    const ganttOptions = buildGanttOptions(\r\n      finalConfig,\r\n      processedData,\r\n      tableTheme,\r\n      themeColors,\r\n    );\r\n    ganttInstance.value = new Gantt(ganttContainerRef.value, ganttOptions);\r\n    bindGanttEvents(ganttInstance.value);\r\n    emit(\"ganttCreated\", ganttInstance.value);\r\n  } catch (error) {\r\n    console.error(\"甘特图初始化失败:\", error);\r\n  }\r\n};\r\n\r\nconst toggleFullscreen = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    if (!document.fullscreenElement) {\r\n      await ganttContainerRef.value.requestFullscreen();\r\n      isFullscreen.value = true;\r\n    } else {\r\n      await document.exitFullscreen();\r\n      isFullscreen.value = false;\r\n    }\r\n    setTimeout(() => ganttInstance.value?.resize?.(), 100);\r\n  } catch (error) {\r\n    console.warn(\"全屏切换失败:\", error);\r\n    isFullscreen.value = !isFullscreen.value;\r\n    nextTick(() => ganttInstance.value?.resize?.());\r\n  }\r\n};\r\n\r\nconst handleFullscreenChange = () => {\r\n  isFullscreen.value = !!document.fullscreenElement;\r\n  nextTick(() => ganttInstance.value?.resize?.());\r\n};\r\n\r\nconst updateData = (newData: GanttTask[]) => {\r\n  if (ganttInstance.value && newData) {\r\n    try {\r\n      ganttInstance.value.setRecords(processData(newData));\r\n    } catch (error) {\r\n      console.warn(\"更新数据失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst updateOptions = (newOptions: GanttOptions) => {\r\n  if (ganttInstance.value && newOptions) {\r\n    try {\r\n      ganttInstance.value.updateOption(newOptions);\r\n    } catch (error) {\r\n      console.warn(\"更新配置失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst destroyGantt = () => {\r\n  if (ganttInstance.value) {\r\n    try {\r\n      ganttInstance.value.release();\r\n    } catch (error) {\r\n      console.warn(\"销毁甘特图失败:\", error);\r\n    } finally {\r\n      ganttInstance.value = undefined;\r\n    }\r\n  }\r\n};\r\n\r\nwatch(\r\n  () => props.data,\r\n  (newData) => {\r\n    if (newData && ganttInstance.value) updateData(newData);\r\n  },\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => [props.options, props.preset],\r\n  () => nextTick(() => initGantt()),\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => props.theme,\r\n  () => nextTick(() => initGantt()),\r\n);\r\n\r\nonMounted(() => {\r\n  document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  nextTick(() => setTimeout(() => initGantt(), 100));\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  destroyGantt();\r\n});\r\n\r\ndefineExpose({\r\n  ganttInstance,\r\n  updateData,\r\n  updateOptions,\r\n  toggleFullscreen,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-08-01\r\n * @Description: VTable 甘特图组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-vtable-gantt-wrapper\">\r\n    <div v-if=\"showToolbar\" class=\"gantt-toolbar\">\r\n      <div class=\"toolbar-left\">\r\n        <span class=\"gantt-title\">{{ title || \"甘特图\" }}</span>\r\n      </div>\r\n      <div class=\"toolbar-right\">\r\n        <NButton\r\n          v-if=\"showFullscreenButton\"\r\n          size=\"small\"\r\n          @click=\"toggleFullscreen\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon\r\n              :name=\"isFullscreen ? 'carbon:minimize' : 'carbon:maximize'\"\r\n              :size=\"16\"\r\n              color=\"currentColor\"\r\n            />\r\n          </template>\r\n          {{ isFullscreen ? \"退出全屏\" : \"全屏\" }}\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n    <div\r\n      ref=\"ganttContainerRef\"\r\n      class=\"gantt-container\"\r\n      :style=\"{ height: containerHeight }\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, watch, nextTick, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport {\r\n  presetConfigs,\r\n  type GanttTask,\r\n  type GanttOptions,\r\n  type GanttPreset,\r\n} from \"./data\";\r\n\r\ndefineOptions({ name: \"C_VtableGantt\" });\r\n\r\ninterface Props {\r\n  data?: GanttTask[];\r\n  options?: GanttOptions;\r\n  preset?: GanttPreset;\r\n  height?: string | number;\r\n  title?: string;\r\n  showToolbar?: boolean;\r\n  showFullscreenButton?: boolean;\r\n  theme?: \"light\" | \"dark\";\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  data: () => [],\r\n  options: () => ({}),\r\n  preset: \"basic\",\r\n  height: \"600px\",\r\n  title: \"\",\r\n  showToolbar: true,\r\n  showFullscreenButton: true,\r\n  theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  ganttCreated: [gantt: any];\r\n  taskClick: [task: GanttTask, event: Event];\r\n  taskChange: [task: GanttTask, changes: any];\r\n}>();\r\n\r\nconst ganttContainerRef = ref<HTMLDivElement>();\r\nconst ganttInstance = ref<any>();\r\nconst isFullscreen = ref(false);\r\n\r\nconst containerHeight = computed(() =>\r\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\r\n);\r\n\r\nconst deepMerge = (target: any, source: any, seen = new WeakMap()): any => {\r\n  if (!isObject(target)) return source;\r\n  if (!isObject(source)) return target;\r\n  if (seen.has(source)) return seen.get(source);\r\n  return createMergeResult(target, source, seen);\r\n};\r\n\r\nconst isObject = (value: any): boolean => {\r\n  return value !== null && typeof value === \"object\";\r\n};\r\n\r\nconst isSpecialObject = (value: any): boolean => {\r\n  return value instanceof Date || value instanceof RegExp;\r\n};\r\n\r\nconst createMergeResult = (\r\n  target: any,\r\n  source: any,\r\n  seen: WeakMap<any, any>,\r\n): any => {\r\n  const result = Array.isArray(target) ? [...target] : { ...target };\r\n  seen.set(source, result);\r\n  for (const key in source) {\r\n    if (!source.hasOwnProperty(key)) continue;\r\n    const sourceValue = source[key];\r\n    const shouldDeepMerge =\r\n      isObject(sourceValue) &&\r\n      !Array.isArray(sourceValue) &&\r\n      !isSpecialObject(sourceValue);\r\n    result[key] = shouldDeepMerge\r\n      ? deepMerge(target[key] || {}, sourceValue, seen)\r\n      : sourceValue;\r\n  }\r\n  return result;\r\n};\r\n\r\nconst processData = (data: GanttTask[]): GanttTask[] => {\r\n  return data.map((item) => ({\r\n    ...item,\r\n    title: item.title || `任务${item.id}`,\r\n    children: item.children ? processData(item.children) : undefined,\r\n  }));\r\n};\r\n\r\nconst getThemeConfig = (isDark: boolean) => ({\r\n  underlayBackgroundColor: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  timelineHeaderBg: isDark ? \"#2d2d2d\" : \"#EEF1F5\",\r\n  gridBg: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  lineColor: isDark ? \"rgba(255, 255, 255, 0.1)\" : \"rgba(128, 128, 128, 0.2)\",\r\n  textColor: isDark ? \"#ffffff\" : \"#000000\",\r\n});\r\n\r\nconst applyThemeToTimelineHeader = (timelineHeader: any, themeColors: any) => ({\r\n  ...timelineHeader,\r\n  backgroundColor: themeColors.timelineHeaderBg,\r\n  horizontalLine: {\r\n    ...timelineHeader?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...timelineHeader?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  scales: timelineHeader?.scales?.map((scale: any) => ({\r\n    ...scale,\r\n    style: {\r\n      ...scale.style,\r\n      color: themeColors.textColor,\r\n    },\r\n  })),\r\n});\r\n\r\nconst applyThemeToGrid = (grid: any, themeColors: any) => ({\r\n  ...grid,\r\n  backgroundColor: themeColors.gridBg,\r\n  horizontalLine: {\r\n    ...grid?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...grid?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n});\r\n\r\nconst buildGanttOptions = (\r\n  finalConfig: any,\r\n  processedData: GanttTask[],\r\n  tableTheme: any,\r\n  themeColors: any,\r\n) => ({\r\n  ...finalConfig,\r\n  records: processedData,\r\n  underlayBackgroundColor: themeColors.underlayBackgroundColor,\r\n  taskListTable: {\r\n    ...finalConfig.taskListTable,\r\n    theme: tableTheme,\r\n  },\r\n  timelineHeader: applyThemeToTimelineHeader(\r\n    finalConfig.timelineHeader,\r\n    themeColors,\r\n  ),\r\n  grid: applyThemeToGrid(finalConfig.grid, themeColors),\r\n});\r\n\r\nconst bindGanttEvents = (instance: any) => {\r\n  instance.on(\"click_cell\", (args: any) => {\r\n    const { record, event } = args || {};\r\n    if (record) emit(\"taskClick\", record, event);\r\n  });\r\n  instance.on(\"change_data\", (args: any) => {\r\n    const { record, changes } = args || {};\r\n    if (record && changes) emit(\"taskChange\", record, changes);\r\n  });\r\n};\r\n\r\nconst initGantt = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    const { Gantt } = await import(\"@visactor/vtable-gantt\");\r\n    const { themes } = await import(\"@visactor/vtable\");\r\n    const isDark = props.theme === \"dark\";\r\n    const presetConfig = presetConfigs[props.preset] || presetConfigs.basic;\r\n    const finalConfig = deepMerge(presetConfig, props.options);\r\n    const processedData = processData(props.data || []);\r\n    if (ganttInstance.value) ganttInstance.value.release();\r\n    const tableTheme = isDark ? themes.DARK : themes.DEFAULT;\r\n    const themeColors = getThemeConfig(isDark);\r\n    const ganttOptions = buildGanttOptions(\r\n      finalConfig,\r\n      processedData,\r\n      tableTheme,\r\n      themeColors,\r\n    );\r\n    ganttInstance.value = new Gantt(ganttContainerRef.value, ganttOptions);\r\n    bindGanttEvents(ganttInstance.value);\r\n    emit(\"ganttCreated\", ganttInstance.value);\r\n  } catch (error) {\r\n    console.error(\"甘特图初始化失败:\", error);\r\n  }\r\n};\r\n\r\nconst toggleFullscreen = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    if (!document.fullscreenElement) {\r\n      await ganttContainerRef.value.requestFullscreen();\r\n      isFullscreen.value = true;\r\n    } else {\r\n      await document.exitFullscreen();\r\n      isFullscreen.value = false;\r\n    }\r\n    setTimeout(() => ganttInstance.value?.resize?.(), 100);\r\n  } catch (error) {\r\n    console.warn(\"全屏切换失败:\", error);\r\n    isFullscreen.value = !isFullscreen.value;\r\n    nextTick(() => ganttInstance.value?.resize?.());\r\n  }\r\n};\r\n\r\nconst handleFullscreenChange = () => {\r\n  isFullscreen.value = !!document.fullscreenElement;\r\n  nextTick(() => ganttInstance.value?.resize?.());\r\n};\r\n\r\nconst updateData = (newData: GanttTask[]) => {\r\n  if (ganttInstance.value && newData) {\r\n    try {\r\n      ganttInstance.value.setRecords(processData(newData));\r\n    } catch (error) {\r\n      console.warn(\"更新数据失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst updateOptions = (newOptions: GanttOptions) => {\r\n  if (ganttInstance.value && newOptions) {\r\n    try {\r\n      ganttInstance.value.updateOption(newOptions);\r\n    } catch (error) {\r\n      console.warn(\"更新配置失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst destroyGantt = () => {\r\n  if (ganttInstance.value) {\r\n    try {\r\n      ganttInstance.value.release();\r\n    } catch (error) {\r\n      console.warn(\"销毁甘特图失败:\", error);\r\n    } finally {\r\n      ganttInstance.value = undefined;\r\n    }\r\n  }\r\n};\r\n\r\nwatch(\r\n  () => props.data,\r\n  (newData) => {\r\n    if (newData && ganttInstance.value) updateData(newData);\r\n  },\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => [props.options, props.preset],\r\n  () => nextTick(() => initGantt()),\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => props.theme,\r\n  () => nextTick(() => initGantt()),\r\n);\r\n\r\nonMounted(() => {\r\n  document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  nextTick(() => setTimeout(() => initGantt(), 100));\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  destroyGantt();\r\n});\r\n\r\ndefineExpose({\r\n  ganttInstance,\r\n  updateData,\r\n  updateOptions,\r\n  toggleFullscreen,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":";;;;;;AA4BA,MAAa,cAAc;CACzB,aAAa;EACX,aAAa;EACb,iBAAiB;EACjB,UAAU;EACV,YAAY;EAEb;CACD,WAAW;EACT,aAAa;EACb,iBAAiB;GAAC;GAAG;GAAG;GAAG;GAAE;EAC7B,UAAU;EAEX;CACF;AAGD,MAAa,gBAAgB;CAC3B,OAAO;EACL,oBAAoB;EACpB,iBAAiB;EACjB,WAAW;EACX,eAAe;GACb,SAAS;IACP;KAAE,OAAO;KAAS,OAAO;KAAQ,OAAO;KAAK,MAAM;KAAM;IACzD;KAAE,OAAO;KAAS,OAAO;KAAQ,OAAO;KAAK;IAC7C;KAAE,OAAO;KAAO,OAAO;KAAQ,OAAO;KAAK;IAC3C;KAAE,OAAO;KAAY,OAAO;KAAM,OAAO;KAAI;IAC9C;GACD,YAAY;GACZ,eAAe;GACf,OAAO;GACR;EACD,OAAO;GACL,iBAAiB;IACf,iBAAiB;IACjB,aAAa;IACb,cAAc;IACf;GACD,2BAA2B;GAC3B,mBAAmB;IAAE,WAAW;IAAW,WAAW;IAAG;GAC1D;EACD,MAAM;GAEJ,cAAc;IAAE,WAAW;IAAG,WAAW;IAA4B;GACrE,gBAAgB;IAAE,WAAW;IAAG,WAAW;IAA4B;GACxE;EACD,SAAS;GACP,gBAAgB;GAChB,cAAc;GACd,eAAe;GACf,UAAU;GACV,WAAW;GACX,WAAW;GACX,gBAAgB;IAAE,UAAU;IAAI,WAAW;IAAQ;GACnD,UAAU;IACR,OAAO;IACP,UAAU;IACV,mBAAmB;IACnB,cAAc;IACd,iBAAiB;IAClB;GACD,gBAAgB;IACd,aAAa;IACb,iBAAiB;IACjB,WAAW;IACX,OAAO;IACR;GACF;EACD,gBAAgB;GAEd,UAAU;GACV,gBAAgB;IAAE,WAAW;IAAG,WAAW;IAA4B;GACvE,cAAc;IAAE,WAAW;IAAG,WAAW;IAA4B;GACrE,QAAQ,CACN;IACE,MAAM;IACN,MAAM;IACN,SAAS,SAAc,IAAI,KAAK,UAAU;IAC1C,OAAO;KAAE,UAAU;KAAI,YAAY;KAAQ;IAC5C,EACD;IACE,MAAM;IACN,MAAM;IACN,SAAS,SAAc,GAAG,KAAK;IAC/B,OAAO,EAAE,UAAU,IAAI;IACxB,CACF;GACF;EACD,aAAa;GACX,iBAAiB;GACjB,SAAS;GACT,OAAO;GACP,0BAA0B;GAC1B,mBAAmB;GACpB;EACF;CAED,SAAS;EACP,oBAAoB;EACpB,iBAAiB;EACjB,WAAW;EACX,eAAe;GACb,SAAS;IACP;KACE,OAAO;KACP,OAAO;KACP,OAAO;KACP,MAAM;KACN,QAAQ;KACT;IACD;KACE,OAAO;KACP,OAAO;KACP,OAAO;KACP,QAAQ;KACT;IACD;KAAE,OAAO;KAAO,OAAO;KAAQ,OAAO;KAAK,QAAQ;KAAc;IACjE;KAAE,OAAO;KAAY,OAAO;KAAO,OAAO;KAAI,QAAQ;KAAS;IAC/D;KAAE,OAAO;KAAY,OAAO;KAAO,OAAO;KAAI,QAAQ;KAAS;IAChE;GACD,YAAY;GACZ,eAAe;GACf,eAAe;GACf,OAAO;GACP,sBAAsB;GACvB;EACD,OAAO;GACL,iBAAiB;IACf,iBAAiB;IACjB,aAAa;IACb,cAAc;IACf;GACD,2BAA2B;GAC3B,mBAAmB;IAAE,WAAW;IAAW,WAAW;IAAG;GAC1D;EACD,MAAM;GACJ,cAAc;IAAE,WAAW;IAAG,WAAW;IAA4B;GACrE,gBAAgB;IAAE,WAAW;IAAG,WAAW;IAA4B;GACxE;EACD,SAAS;GACP,gBAAgB;GAChB,cAAc;GACd,eAAe;GACf,UAAU;GACV,WAAW;GACX,eAAe,EAAE,iBAAiB,2BAA2B;GAC7D,WAAW;GACX,gBAAgB;IACd,UAAU;IACV,WAAW;IACX,cAAc;IACf;GACD,UAAU;IACR,OAAO;IACP,UAAU;IACV,mBAAmB;IACnB,cAAc;IACd,iBAAiB;IAClB;GACF;EACD,gBAAgB;GACd,UAAU;GACV,gBAAgB;IAAE,WAAW;IAAG,WAAW;IAA4B;GACvE,cAAc;IAAE,WAAW;IAAG,WAAW;IAA4B;GACrE,QAAQ,CACN;IACE,MAAM;IACN,MAAM;IACN,aAAa;IACb,SAAS,SAAc,IAAI,KAAK,UAAU;IAC1C,OAAO;KAAE,UAAU;KAAI,YAAY;KAAQ,WAAW;KAAU;IACjE,EACD;IACE,MAAM;IACN,MAAM;IACN,SAAS,SAAc,GAAG,KAAK;IAC/B,OAAO;KAAE,UAAU;KAAI,WAAW;KAAU;IAC7C,CACF;GACF;EACD,iBAAiB;GACf,OAAO;GACP,WAAW;GACX,aAAa,EAAE,aAAa,4BAA4B;GACxD,OAAO,EAAE,aAAa,4BAA4B;GACnD;EACD,aAAa;GACX,iBAAiB;GACjB,SAAS;GACT,OAAO;GACP,0BAA0B;GAC1B,mBAAmB;GACpB;EACF;CAED,UAAU;EACR,oBAAoB;EACpB,iBAAiB;EACjB,WAAW;EACX,eAAe;GACb,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAQ,OAAO;IAAK,MAAM;IAAM,EACzD;IAAE,OAAO;IAAS,OAAO;IAAM,OAAO;IAAK,CAC5C;GACD,YAAY;GACZ,eAAe;GACf,OAAO;IACL,aAAa,EAAE,GAAG,YAAY,aAAa;IAC3C,WAAW,YAAY;IACxB;GACF;EACD,OAAO;GACL,iBAAiB;IACf,iBAAiB;IACjB,aAAa;IACb,cAAc;IACf;GACD,2BAA2B;GAC5B;EACD,MAAM;GACJ,cAAc;IAAE,WAAW;IAAG,WAAW;IAA4B;GACrE,gBAAgB;IAAE,WAAW;IAAG,WAAW;IAA4B;GACxE;EACD,SAAS;GACP,gBAAgB;GAChB,cAAc;GACd,eAAe;GACf,UAAU;GACV,WAAW;GACX,WAAW;GACX,gBAAgB;IAAE,UAAU;IAAI,WAAW;IAAQ;GACnD,UAAU;IACR,OAAO;IACP,UAAU;IACV,mBAAmB;IACnB,cAAc;IACd,iBAAiB;IAClB;GACF;EACD,gBAAgB;GACd,UAAU;GACV,QAAQ,CACN;IACE,MAAM;IACN,MAAM;IACN,SAAS,SAAc,GAAG,KAAK,UAAU;IACzC,OAAO;KAAE,UAAU;KAAI,YAAY;KAAQ;IAC5C,EACD;IACE,MAAM;IACN,MAAM;IACN,SAAS,SAAc,GAAG,KAAK;IAC/B,OAAO,EAAE,UAAU,IAAI;IACxB,CACF;GACF;EACD,aAAa;GACX,iBAAiB;GACjB,SAAS;GACT,OAAO;GACP,0BAA0B;GAC1B,mBAAmB;GACpB;EACF;CAED,WAAW;EACT,oBAAoB;EACpB,iBAAiB;EACjB,WAAW;EACX,eAAe;GACb,SAAS;IACP;KAAE,OAAO;KAAS,OAAO;KAAO,OAAO;KAAK,MAAM;KAAM;IACxD;KAAE,OAAO;KAAS,OAAO;KAAQ,OAAO;KAAK;IAC7C;KAAE,OAAO;KAAY,OAAO;KAAO,OAAO;KAAK;IAChD;GACD,YAAY;GACZ,eAAe;GACf,OAAO;IACL,aAAa;KACX,GAAG,YAAY;KACf,aAAa;KACd;IACD,WAAW;KAAE,GAAG,YAAY;KAAW,aAAa;KAAW;IAChE;GACF;EACD,OAAO;GACL,iBAAiB;IACf,iBAAiB;IACjB,aAAa;IACb,cAAc;IACf;GACD,2BAA2B;GAC5B;EACD,MAAM;GACJ,cAAc;IAAE,WAAW;IAAG,WAAW;IAA2B;GACpE,gBAAgB;IAAE,WAAW;IAAG,WAAW;IAA2B;GACvE;EACD,SAAS;GACP,gBAAgB;GAChB,cAAc;GACd,WAAW;GACX,gBAAgB;IAAE,UAAU;IAAI,YAAY;IAAQ;GACpD,UAAU;IAAE,OAAO;IAAG,UAAU;IAAe;GAC/C,gBAAgB;IACd,aAAa;IACb,iBAAiB;IACjB,WAAW;IACX,OAAO;IACR;GACF;EACD,gBAAgB;GACd,UAAU;GACV,QAAQ,CACN;IACE,MAAM;IACN,MAAM;IACN,SAAS,SAAc,GAAG,KAAK,UAAU;IACzC,OAAO;KAAE,UAAU;KAAI,YAAY;KAAQ;IAC5C,EACD;IACE,MAAM;IACN,MAAM;IACN,SAAS,SAAc,IAAI,KAAK,UAAU;IAC1C,OAAO,EAAE,UAAU,IAAI;IACxB,CACF;GACF;EACD,aAAa;GACX,iBAAiB;GACjB,SAAS;GACT,OAAO;GACP,0BAA0B;GAC1B,mBAAmB;GACpB;EACF;CAED,UAAU;EACR,oBAAoB;EACpB,iBAAiB;EACjB,WAAW;EACX,eAAe;GACb,SAAS;IACP;KACE,OAAO;KACP,OAAO;KACP,OAAO;KACP,MAAM;KACN,MAAM;KACN,QAAQ;KACT;IACD;KACE,OAAO;KACP,OAAO;KACP,OAAO;KACP,MAAM;KACN,QAAQ;KACT;IACD;KACE,OAAO;KACP,OAAO;KACP,OAAO;KACP,MAAM;KACN,QAAQ;KACT;IACD;KACE,OAAO;KACP,OAAO;KACP,OAAO;KACP,MAAM;KACN,QAAQ;KACT;IACD;KACE,OAAO;KACP,OAAO;KACP,OAAO;KACP,MAAM;KACN,QAAQ;KACT;IACF;GACD,YAAY;GACZ,eAAe;GACf,eAAe;GACf,OAAO;IACL,aAAa;KACX,GAAG,YAAY;KACf,UAAU;KACV,OAAO;KACR;IACD,WAAW;KACT,GAAG,YAAY;KACf,UAAU;KACV,OAAO;KACR;IACF;GACD,sBAAsB;GACvB;EACD,OAAO;GACL,iBAAiB;IACf,iBAAiB;IACjB,aAAa;IACb,cAAc;IACf;GACD,2BAA2B;GAC3B,mBAAmB;IAAE,WAAW;IAAW,WAAW;IAAG;GACzD,qBAAqB;IAAE,WAAW;IAAW,WAAW;IAAG;GAC5D;EACD,MAAM;GACJ,cAAc;IAAE,WAAW;IAAG,WAAW;IAA4B;GACrE,gBAAgB;IAAE,WAAW;IAAG,WAAW;IAA4B;GACxE;EACD,SAAS;GACP,gBAAgB;GAChB,cAAc;GACd,eAAe;GACf,UAAU;GACV,WAAW;GACX,eAAe,EAAE,iBAAiB,yBAAyB;GAC3D,WAAW;GACX,gBAAgB;IACd,UAAU;IACV,WAAW;IACX,cAAc;IACf;GACD,UAAU;IACR,OAAO;IACP,UAAU;IACV,mBAAmB;IACnB,cAAc;IACd,iBAAiB;IACjB,aAAa;IACd;GACD,gBAAgB;IACd,aAAa;IACb,iBAAiB;IACjB,WAAW;IACX,OAAO;IACR;GACF;EACD,gBAAgB;GACd,iBAAiB;GACjB,UAAU;GACV,gBAAgB;IAAE,WAAW;IAAG,WAAW;IAAW;GACtD,cAAc;IAAE,WAAW;IAAG,WAAW;IAAW;GACpD,QAAQ,CACN;IACE,MAAM;IACN,MAAM;IACN,aAAa;IACb,SAAS,SAAc,QAAQ,KAAK;IACpC,OAAO;KACL,UAAU;KACV,YAAY;KACZ,OAAO;KACP,aAAa;KACb,WAAW;KACX,cAAc;KACd,WAAW;KACZ;IACF,EACD;IACE,MAAM;IACN,MAAM;IACN,SAAS,SAAc,KAAK,UAAU,UAAU;IAChD,OAAO;KACL,UAAU;KACV,YAAY;KACZ,OAAO;KACP,aAAa;KACb,WAAW;KACX,cAAc;KACf;IACF,CACF;GACF;EACD,UAAU,CACR;GACE,MAAM;GACN,OAAO;IAAE,WAAW;IAAG,WAAW;IAAQ,UAAU,CAAC,GAAG,EAAE;IAAE;GAC7D,EACD;GACE,MAAM;GACN,OAAO;IAAE,WAAW;IAAG,WAAW;IAAO,UAAU,CAAC,GAAG,EAAE;IAAE;GAC5D,CACF;EACD,iBAAiB;GACf,OAAO;GACP,WAAW;GACX,aAAa,EAAE,aAAa,4BAA4B;GACxD,OAAO,EAAE,aAAa,4BAA4B;GACnD;EACD,aAAa;GACX,iBAAiB;GACjB,SAAS;GACT,OAAO;GACP,0BAA0B;GAC1B,mBAAmB;GACpB;EACF;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEjdD,MAAM,QAAQ;EAWd,MAAM,OAAO;EAMb,MAAM,oBAAoB,KAAqB;EAC/C,MAAM,gBAAgB,KAAU;EAChC,MAAM,eAAe,IAAI,MAAM;EAE/B,MAAM,kBAAkB,eACtB,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,OAAO,MAAM,MAAM,OAChE;EAED,MAAM,aAAa,QAAa,QAAa,uBAAO,IAAI,SAAS,KAAU;AACzE,OAAI,CAAC,SAAS,OAAO,CAAE,QAAO;AAC9B,OAAI,CAAC,SAAS,OAAO,CAAE,QAAO;AAC9B,OAAI,KAAK,IAAI,OAAO,CAAE,QAAO,KAAK,IAAI,OAAO;AAC7C,UAAO,kBAAkB,QAAQ,QAAQ,KAAK;;EAGhD,MAAM,YAAY,UAAwB;AACxC,UAAO,UAAU,QAAQ,OAAO,UAAU;;EAG5C,MAAM,mBAAmB,UAAwB;AAC/C,UAAO,iBAAiB,QAAQ,iBAAiB;;EAGnD,MAAM,qBACJ,QACA,QACA,SACQ;GACR,MAAM,SAAS,MAAM,QAAQ,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,EAAE,GAAG,QAAQ;AAClE,QAAK,IAAI,QAAQ,OAAO;AACxB,QAAK,MAAM,OAAO,QAAQ;AACxB,QAAI,CAAC,OAAO,eAAe,IAAI,CAAE;IACjC,MAAM,cAAc,OAAO;AAK3B,WAAO,OAHL,SAAS,YAAY,IACrB,CAAC,MAAM,QAAQ,YAAY,IAC3B,CAAC,gBAAgB,YAAY,GAE3B,UAAU,OAAO,QAAQ,EAAE,EAAE,aAAa,KAAK,GAC/C;;AAEN,UAAO;;EAGT,MAAM,eAAe,SAAmC;AACtD,UAAO,KAAK,KAAK,UAAU;IACzB,GAAG;IACH,OAAO,KAAK,SAAS,KAAK,KAAK;IAC/B,UAAU,KAAK,WAAW,YAAY,KAAK,SAAS,GAAG;IACxD,EAAE;;EAGL,MAAM,kBAAkB,YAAqB;GAC3C,yBAAyB,SAAS,YAAY;GAC9C,kBAAkB,SAAS,YAAY;GACvC,QAAQ,SAAS,YAAY;GAC7B,WAAW,SAAS,6BAA6B;GACjD,WAAW,SAAS,YAAY;GACjC;EAED,MAAM,8BAA8B,gBAAqB,iBAAsB;GAC7E,GAAG;GACH,iBAAiB,YAAY;GAC7B,gBAAgB;IACd,GAAG,gBAAgB;IACnB,WAAW,YAAY;IACxB;GACD,cAAc;IACZ,GAAG,gBAAgB;IACnB,WAAW,YAAY;IACxB;GACD,QAAQ,gBAAgB,QAAQ,KAAK,WAAgB;IACnD,GAAG;IACH,OAAO;KACL,GAAG,MAAM;KACT,OAAO,YAAY;KACpB;IACF,EAAE;GACJ;EAED,MAAM,oBAAoB,MAAW,iBAAsB;GACzD,GAAG;GACH,iBAAiB,YAAY;GAC7B,gBAAgB;IACd,GAAG,MAAM;IACT,WAAW,YAAY;IACxB;GACD,cAAc;IACZ,GAAG,MAAM;IACT,WAAW,YAAY;IACxB;GACF;EAED,MAAM,qBACJ,aACA,eACA,YACA,iBACI;GACJ,GAAG;GACH,SAAS;GACT,yBAAyB,YAAY;GACrC,eAAe;IACb,GAAG,YAAY;IACf,OAAO;IACR;GACD,gBAAgB,2BACd,YAAY,gBACZ,YACD;GACD,MAAM,iBAAiB,YAAY,MAAM,YAAY;GACtD;EAED,MAAM,mBAAmB,aAAkB;AACzC,YAAS,GAAG,eAAe,SAAc;IACvC,MAAM,EAAE,QAAQ,UAAU,QAAQ,EAAE;AACpC,QAAI,OAAQ,MAAK,aAAa,QAAQ,MAAM;KAC5C;AACF,YAAS,GAAG,gBAAgB,SAAc;IACxC,MAAM,EAAE,QAAQ,YAAY,QAAQ,EAAE;AACtC,QAAI,UAAU,QAAS,MAAK,cAAc,QAAQ,QAAQ;KAC1D;;EAGJ,MAAM,YAAY,YAAY;AAC5B,OAAI,CAAC,kBAAkB,MAAO;AAC9B,OAAI;IACF,MAAM,EAAE,UAAU,MAAM,OAAO;IAC/B,MAAM,EAAE,WAAW,MAAM,OAAO;IAChC,MAAM,SAAS,MAAM,UAAU;IAE/B,MAAM,cAAc,UADC,cAAc,MAAM,WAAW,cAAc,OACtB,MAAM,QAAQ;IAC1D,MAAM,gBAAgB,YAAY,MAAM,QAAQ,EAAE,CAAC;AACnD,QAAI,cAAc,MAAO,eAAc,MAAM,SAAS;IAGtD,MAAM,eAAe,kBACnB,aACA,eAJiB,SAAS,OAAO,OAAO,OAAO,SAC7B,eAAe,OAAO,CAMzC;AACD,kBAAc,QAAQ,IAAI,MAAM,kBAAkB,OAAO,aAAa;AACtE,oBAAgB,cAAc,MAAM;AACpC,SAAK,gBAAgB,cAAc,MAAM;YAClC,OAAO;AACd,YAAQ,MAAM,aAAa,MAAM;;;EAIrC,MAAM,mBAAmB,YAAY;AACnC,OAAI,CAAC,kBAAkB,MAAO;AAC9B,OAAI;AACF,QAAI,CAAC,SAAS,mBAAmB;AAC/B,WAAM,kBAAkB,MAAM,mBAAmB;AACjD,kBAAa,QAAQ;WAChB;AACL,WAAM,SAAS,gBAAgB;AAC/B,kBAAa,QAAQ;;AAEvB,qBAAiB,cAAc,OAAO,UAAU,EAAE,IAAI;YAC/C,OAAO;AACd,YAAQ,KAAK,WAAW,MAAM;AAC9B,iBAAa,QAAQ,CAAC,aAAa;AACnC,mBAAe,cAAc,OAAO,UAAU,CAAC;;;EAInD,MAAM,+BAA+B;AACnC,gBAAa,QAAQ,CAAC,CAAC,SAAS;AAChC,kBAAe,cAAc,OAAO,UAAU,CAAC;;EAGjD,MAAM,cAAc,YAAyB;AAC3C,OAAI,cAAc,SAAS,QACzB,KAAI;AACF,kBAAc,MAAM,WAAW,YAAY,QAAQ,CAAC;YAC7C,OAAO;AACd,YAAQ,KAAK,WAAW,MAAM;;;EAKpC,MAAM,iBAAiB,eAA6B;AAClD,OAAI,cAAc,SAAS,WACzB,KAAI;AACF,kBAAc,MAAM,aAAa,WAAW;YACrC,OAAO;AACd,YAAQ,KAAK,WAAW,MAAM;;;EAKpC,MAAM,qBAAqB;AACzB,OAAI,cAAc,MAChB,KAAI;AACF,kBAAc,MAAM,SAAS;YACtB,OAAO;AACd,YAAQ,KAAK,YAAY,MAAM;aACvB;AACR,kBAAc,QAAQ;;;AAK5B,cACQ,MAAM,OACX,YAAY;AACX,OAAI,WAAW,cAAc,MAAO,YAAW,QAAQ;KAEzD,EAAE,MAAM,MAAM,CACf;AAED,cACQ,CAAC,MAAM,SAAS,MAAM,OAAO,QAC7B,eAAe,WAAW,CAAC,EACjC,EAAE,MAAM,MAAM,CACf;AAED,cACQ,MAAM,aACN,eAAe,WAAW,CAAC,CAClC;AAED,kBAAgB;AACd,YAAS,iBAAiB,oBAAoB,uBAAuB;AACrE,kBAAe,iBAAiB,WAAW,EAAE,IAAI,CAAC;IAClD;AAEF,oBAAkB;AAChB,YAAS,oBAAoB,oBAAoB,uBAAuB;AACxE,iBAAc;IACd;AAEF,WAAa;GACX;GACA;GACA;GACA;GACD,CAAC;;uBAtTA,mBA2BM,OA3BN,YA2BM,CA1BOA,KAAAA,4BAAX,mBAoBM,OApBN,YAoBM,CAnBJ,mBAEM,OAFN,YAEM,CADJ,mBAAqD,QAArD,YAAqD,gBAAxBC,KAAAA,SAAK,MAAA,EAAA,EAAA,IAEpC,mBAeM,OAfN,YAeM,CAbIC,KAAAA,qCADR,YAaU,MAAA,QAAA,EAAA;;IAXR,MAAK;IACJ,SAAO;;IAEG,MAAI,cAKX,CAJF,YAIE,gBAAA;KAHC,MAAM,aAAA,QAAY,oBAAA;KAClB,MAAM;KACP,OAAM;;2BAGV,iBADW,MACX,gBAAG,aAAA,QAAY,SAAA,KAAA,EAAA,EAAA;;mFAIrB,mBAIE,OAAA;aAHI;IAAJ,KAAI;IACJ,OAAM;IACL,OAAK,eAAA,EAAA,QAAY,gBAAA,OAAe,CAAA"}

package/dist/C_WaterFall-8sQDFXKg.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_WaterFall-8sQDFXKg.css","names":[],"sources":["../src/components/C_WaterFall/index.vue?vue&type=style&index=0&scoped=d436c326&lang.scss"],"sourcesContent":[".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.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_C_WaterFall = require('./C_WaterFall.js');
+
+exports.C_WaterFall = require_C_WaterFall.C_WaterFall_default;
+exports.DEFAULT_ANIMATION_DURATION = require_C_WaterFall.DEFAULT_ANIMATION_DURATION;
+exports.DEFAULT_BREAKPOINTS = require_C_WaterFall.DEFAULT_BREAKPOINTS;
+exports.DEFAULT_GAP = require_C_WaterFall.DEFAULT_GAP;
+exports.DEFAULT_SKELETON_COUNT = require_C_WaterFall.DEFAULT_SKELETON_COUNT;
+exports.INFINITE_SCROLL_THRESHOLD = require_C_WaterFall.INFINITE_SCROLL_THRESHOLD;
+exports.SKELETON_HEIGHT_RANGE = require_C_WaterFall.SKELETON_HEIGHT_RANGE;
+exports.useInfiniteScroll = require_C_WaterFall.useInfiniteScroll;
+exports.useResponsiveColumns = require_C_WaterFall.useResponsiveColumns;
+exports.useWaterFallLayout = require_C_WaterFall.useWaterFallLayout;

package/dist/C_WaterFall.d.cts

@@ -0,0 +1,2 @@
+import { _ as WaterFallLayoutItem, a as DEFAULT_BREAKPOINTS, c as INFINITE_SCROLL_THRESHOLD, d as InfiniteScrollStatus, f as WaterFallBreakpoint, g as WaterFallItem, h as WaterFallExpose, i as DEFAULT_ANIMATION_DURATION, l as SKELETON_HEIGHT_RANGE, m as WaterFallEmits, n as useWaterFallLayout, o as DEFAULT_GAP, p as WaterFallColumn, r as useResponsiveColumns, s as DEFAULT_SKELETON_COUNT, t as useInfiniteScroll, u as _default, v as WaterFallProps } from "./useInfiniteScroll.js";
+export { _default as C_WaterFall, DEFAULT_ANIMATION_DURATION, DEFAULT_BREAKPOINTS, DEFAULT_GAP, DEFAULT_SKELETON_COUNT, INFINITE_SCROLL_THRESHOLD, type InfiniteScrollStatus, SKELETON_HEIGHT_RANGE, type WaterFallBreakpoint, type WaterFallColumn, type WaterFallEmits, type WaterFallExpose, type WaterFallItem, type WaterFallLayoutItem, type WaterFallProps, useInfiniteScroll, useResponsiveColumns, useWaterFallLayout };

package/dist/C_WaterFall.d.ts

@@ -0,0 +1,2 @@
+import { _ as WaterFallLayoutItem, a as DEFAULT_BREAKPOINTS, c as INFINITE_SCROLL_THRESHOLD, d as InfiniteScrollStatus, f as WaterFallBreakpoint, g as WaterFallItem, h as WaterFallExpose, i as DEFAULT_ANIMATION_DURATION, l as SKELETON_HEIGHT_RANGE, m as WaterFallEmits, n as useWaterFallLayout, o as DEFAULT_GAP, p as WaterFallColumn, r as useResponsiveColumns, s as DEFAULT_SKELETON_COUNT, t as useInfiniteScroll, u as _default, v as WaterFallProps } from "./useInfiniteScroll.js";
+export { _default as C_WaterFall, DEFAULT_ANIMATION_DURATION, DEFAULT_BREAKPOINTS, DEFAULT_GAP, DEFAULT_SKELETON_COUNT, INFINITE_SCROLL_THRESHOLD, type InfiniteScrollStatus, SKELETON_HEIGHT_RANGE, type WaterFallBreakpoint, type WaterFallColumn, type WaterFallEmits, type WaterFallExpose, type WaterFallItem, type WaterFallLayoutItem, type WaterFallProps, useInfiniteScroll, useResponsiveColumns, useWaterFallLayout };

package/dist/C_WaterFall.js

@@ -0,0 +1,3 @@
+import { a as DEFAULT_ANIMATION_DURATION, c as DEFAULT_SKELETON_COUNT, i as useResponsiveColumns, l as INFINITE_SCROLL_THRESHOLD, n as useInfiniteScroll, o as DEFAULT_BREAKPOINTS, r as useWaterFallLayout, s as DEFAULT_GAP, t as C_WaterFall_default, u as SKELETON_HEIGHT_RANGE } from "./C_WaterFall2.js";
+
+export { C_WaterFall_default as C_WaterFall, DEFAULT_ANIMATION_DURATION, DEFAULT_BREAKPOINTS, DEFAULT_GAP, DEFAULT_SKELETON_COUNT, INFINITE_SCROLL_THRESHOLD, SKELETON_HEIGHT_RANGE, useInfiniteScroll, useResponsiveColumns, useWaterFallLayout };

package/dist/C_WaterFall2.js

@@ -0,0 +1,365 @@
+import { t as export_helper_default } from "./export-helper.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, readonly, ref, renderList, renderSlot, toDisplayString, unref, watch } from "vue";
+import { NSpin } from "naive-ui";
+
+//#region src/components/C_WaterFall/constants.ts
+const DEFAULT_GAP = 16;
+const DEFAULT_ANIMATION_DURATION = 300;
+const DEFAULT_SKELETON_COUNT = 8;
+const INFINITE_SCROLL_THRESHOLD = 200;
+const DEFAULT_BREAKPOINTS = [
+	{
+		minWidth: 1600,
+		columns: 6
+	},
+	{
+		minWidth: 1200,
+		columns: 5
+	},
+	{
+		minWidth: 992,
+		columns: 4
+	},
+	{
+		minWidth: 768,
+		columns: 3
+	},
+	{
+		minWidth: 480,
+		columns: 2
+	},
+	{
+		minWidth: 0,
+		columns: 1
+	}
+];
+const SKELETON_HEIGHT_RANGE = [180, 360];
+
+//#endregion
+//#region src/components/C_WaterFall/composables/useResponsiveColumns.ts
+function useResponsiveColumns(containerRef, fixedColumns, breakpoints) {
+	const columns = ref(4);
+	const containerWidth = ref(0);
+	function resolveColumns(width) {
+		if (fixedColumns?.value && fixedColumns.value > 0) return fixedColumns.value;
+		const sorted = [...breakpoints?.value?.length ? breakpoints.value : DEFAULT_BREAKPOINTS].sort((a, b) => b.minWidth - a.minWidth);
+		for (const bp of sorted) if (width >= bp.minWidth) return bp.columns;
+		return 1;
+	}
+	let resizeObserver = null;
+	function startObserving() {
+		const el = containerRef.value;
+		if (!el) return;
+		resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width } = entry.contentRect;
+				containerWidth.value = width;
+				columns.value = resolveColumns(width);
+			}
+		});
+		resizeObserver.observe(el);
+		const rect = el.getBoundingClientRect();
+		containerWidth.value = rect.width;
+		columns.value = resolveColumns(rect.width);
+	}
+	function stopObserving() {
+		resizeObserver?.disconnect();
+		resizeObserver = null;
+	}
+	onMounted(startObserving);
+	onBeforeUnmount(stopObserving);
+	watch(containerRef, () => {
+		stopObserving();
+		startObserving();
+	});
+	watch([() => fixedColumns?.value, () => breakpoints?.value], () => {
+		if (containerWidth.value > 0) columns.value = resolveColumns(containerWidth.value);
+	});
+	return {
+		columns: readonly(columns),
+		containerWidth: readonly(containerWidth)
+	};
+}
+
+//#endregion
+//#region src/components/C_WaterFall/composables/useWaterFallLayout.ts
+function useWaterFallLayout(items, columns, containerWidth, gap) {
+	const layoutItems = ref([]);
+	const containerHeight = ref(0);
+	const imageHeightCache = /* @__PURE__ */ new Map();
+	function cacheImageHeight(id, realHeight) {
+		imageHeightCache.set(id, realHeight);
+	}
+	function calculate() {
+		const cols = columns.value;
+		const width = containerWidth.value;
+		const g = gap.value ?? DEFAULT_GAP;
+		if (cols <= 0 || width <= 0 || items.value.length === 0) {
+			layoutItems.value = [];
+			containerHeight.value = 0;
+			return;
+		}
+		const colWidth = (width - (cols - 1) * g) / cols;
+		const columnState = Array.from({ length: cols }, (_, i) => ({
+			index: i,
+			height: 0
+		}));
+		const result = [];
+		for (const item of items.value) {
+			const shortest = columnState.reduce((min, col) => col.height < min.height ? col : min);
+			const cached = imageHeightCache.get(item.id);
+			const itemHeight = cached ? cached : item.width > 0 ? item.height / item.width * colWidth : colWidth;
+			const x = shortest.index * (colWidth + g);
+			const y = shortest.height;
+			result.push({
+				item,
+				columnIndex: shortest.index,
+				x,
+				y,
+				width: colWidth,
+				height: itemHeight
+			});
+			shortest.height = y + itemHeight + g;
+		}
+		layoutItems.value = result;
+		containerHeight.value = Math.max(...columnState.map((c) => c.height)) - g;
+	}
+	watch([
+		items,
+		() => items.value.length,
+		columns,
+		containerWidth,
+		gap
+	], calculate, { immediate: true });
+	return {
+		layoutItems: readonly(layoutItems),
+		containerHeight: readonly(containerHeight),
+		cacheImageHeight,
+		relayout: calculate
+	};
+}
+
+//#endregion
+//#region src/components/C_WaterFall/composables/useInfiniteScroll.ts
+function useInfiniteScroll(sentinelRef, enabled, loading, noMore, onLoadMore) {
+	const status = ref("idle");
+	let observer = null;
+	function handleIntersect(entries) {
+		if (!entries[0]?.isIntersecting) return;
+		if (!enabled.value || loading.value || noMore.value) return;
+		status.value = "loading";
+		onLoadMore();
+	}
+	function startObserving() {
+		const el = sentinelRef.value;
+		if (!el || !enabled.value) return;
+		observer = new IntersectionObserver(handleIntersect, { rootMargin: `${INFINITE_SCROLL_THRESHOLD}px 0px` });
+		observer.observe(el);
+	}
+	function stopObserving() {
+		observer?.disconnect();
+		observer = null;
+	}
+	watch([loading, noMore], () => {
+		if (noMore.value) status.value = "no-more";
+		else if (loading.value) status.value = "loading";
+		else status.value = "idle";
+	});
+	onMounted(startObserving);
+	onBeforeUnmount(stopObserving);
+	watch([sentinelRef, enabled], () => {
+		stopObserving();
+		startObserving();
+	});
+	return { status: readonly(status) };
+}
+
+//#endregion
+//#region src/components/C_WaterFall/index.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "waterfall__card" };
+const _hoisted_3 = [
+	"src",
+	"alt",
+	"loading",
+	"onLoad",
+	"onError"
+];
+const _hoisted_4 = {
+	key: 0,
+	class: "waterfall__title"
+};
+const _hoisted_5 = {
+	key: 0,
+	class: "waterfall__footer"
+};
+const _hoisted_6 = {
+	key: 0,
+	class: "waterfall__status"
+};
+const _hoisted_7 = {
+	key: 1,
+	class: "waterfall__status waterfall__status--done"
+};
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "C_WaterFall",
+	__name: "index",
+	props: {
+		items: {},
+		columns: { default: void 0 },
+		gap: { default: DEFAULT_GAP },
+		lazy: {
+			type: Boolean,
+			default: true
+		},
+		infinite: {
+			type: Boolean,
+			default: false
+		},
+		skeleton: {
+			type: Boolean,
+			default: true
+		},
+		skeletonCount: { default: DEFAULT_SKELETON_COUNT },
+		animationDuration: { default: DEFAULT_ANIMATION_DURATION },
+		breakpoints: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		noMore: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"load-more",
+		"item-click",
+		"image-loaded",
+		"image-error"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const containerRef = ref();
+		const sentinelRef = ref();
+		const { columns, containerWidth } = useResponsiveColumns(containerRef, computed(() => props.columns), computed(() => props.breakpoints));
+		const { layoutItems, containerHeight, cacheImageHeight, relayout } = useWaterFallLayout(computed(() => props.items), columns, containerWidth, computed(() => props.gap));
+		const showSkeleton = computed(() => props.skeleton && props.loading && layoutItems.value.length === 0);
+		const skeletonItems = computed(() => {
+			const cols = columns.value;
+			const width = containerWidth.value;
+			const g = props.gap;
+			if (cols <= 0 || width <= 0) return [];
+			const colWidth = (width - (cols - 1) * g) / cols;
+			const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;
+			const colHeights = Array(cols).fill(0);
+			const result = [];
+			for (let i = 0; i < count; i++) {
+				const minIdx = colHeights.indexOf(Math.min(...colHeights));
+				const h = SKELETON_HEIGHT_RANGE[0] + Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);
+				result.push({
+					x: minIdx * (colWidth + g),
+					y: colHeights[minIdx],
+					width: colWidth,
+					height: h
+				});
+				colHeights[minIdx] += h + g;
+			}
+			return result;
+		});
+		const skeletonHeight = computed(() => {
+			if (skeletonItems.value.length === 0) return 0;
+			return Math.max(...skeletonItems.value.map((s) => s.y + s.height));
+		});
+		const bodyHeight = computed(() => showSkeleton.value ? skeletonHeight.value : containerHeight.value);
+		const { status: scrollStatus } = useInfiniteScroll(sentinelRef, computed(() => props.infinite), computed(() => props.loading), computed(() => props.noMore), () => emit("load-more"));
+		function handleImageLoaded(lay, event) {
+			const img = event.target;
+			if (img.naturalHeight && img.naturalWidth) {
+				const realHeight = img.naturalHeight / img.naturalWidth * lay.width;
+				cacheImageHeight(lay.item.id, realHeight);
+			}
+			emit("image-loaded", lay.item);
+		}
+		function handleImageError(lay) {
+			emit("image-error", lay.item);
+		}
+		function scrollToTop() {
+			containerRef.value?.scrollIntoView({
+				behavior: "smooth",
+				block: "start"
+			});
+		}
+		__expose({
+			relayout,
+			scrollToTop,
+			getColumns: () => columns.value,
+			getContainerHeight: () => containerHeight.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: "c-waterfall"
+			}, [createElementVNode("div", {
+				class: "waterfall__body",
+				style: normalizeStyle({
+					height: `${bodyHeight.value}px`,
+					position: "relative"
+				})
+			}, [showSkeleton.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(skeletonItems.value, (sk, idx) => {
+				return openBlock(), createElementBlock("div", {
+					key: `sk-${idx}`,
+					class: "waterfall__skeleton",
+					style: normalizeStyle({
+						position: "absolute",
+						left: `${sk.x}px`,
+						top: `${sk.y}px`,
+						width: `${sk.width}px`,
+						height: `${sk.height}px`,
+						transition: `all ${props.animationDuration ?? unref(DEFAULT_ANIMATION_DURATION)}ms ease`
+					})
+				}, [renderSlot(_ctx.$slots, "skeleton", {}, () => [_cache[0] || (_cache[0] = createElementVNode("div", { class: "waterfall__skeleton-inner" }, null, -1))], true)], 4);
+			}), 128)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(layoutItems), (lay, index) => {
+				return openBlock(), createElementBlock("div", {
+					key: lay.item.id,
+					class: "waterfall__item",
+					style: normalizeStyle({
+						position: "absolute",
+						left: `${lay.x}px`,
+						top: `${lay.y}px`,
+						width: `${lay.width}px`,
+						transition: `all ${props.animationDuration ?? unref(DEFAULT_ANIMATION_DURATION)}ms ease`
+					}),
+					onClick: ($event) => emit("item-click", lay.item, index)
+				}, [renderSlot(_ctx.$slots, "item", {
+					item: lay.item,
+					index,
+					width: lay.width,
+					height: lay.height
+				}, () => [createElementVNode("div", _hoisted_2, [createElementVNode("img", {
+					src: lay.item.src,
+					alt: lay.item.title || "",
+					loading: props.lazy ? "lazy" : "eager",
+					class: "waterfall__image",
+					style: normalizeStyle({ height: `${lay.height}px` }),
+					onLoad: ($event) => handleImageLoaded(lay, $event),
+					onError: ($event) => handleImageError(lay)
+				}, null, 44, _hoisted_3), lay.item.title ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(lay.item.title), 1)) : createCommentVNode("v-if", true)])], true)], 12, _hoisted_1);
+			}), 128))], 4), props.infinite ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", {
+				ref_key: "sentinelRef",
+				ref: sentinelRef,
+				class: "waterfall__sentinel"
+			}, null, 512), renderSlot(_ctx.$slots, "footer", { status: unref(scrollStatus) }, () => [props.loading ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(unref(NSpin), { size: "small" }), _cache[1] || (_cache[1] = createElementVNode("span", null, "加载中…", -1))])) : props.noMore ? (openBlock(), createElementBlock("div", _hoisted_7, " 没有更多了 ")) : createCommentVNode("v-if", true)], true)])) : createCommentVNode("v-if", true)], 512);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/C_WaterFall/index.vue
+var C_WaterFall_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d436c326"]]);
+
+//#endregion
+export { DEFAULT_ANIMATION_DURATION as a, DEFAULT_SKELETON_COUNT as c, useResponsiveColumns as i, INFINITE_SCROLL_THRESHOLD as l, useInfiniteScroll as n, DEFAULT_BREAKPOINTS as o, useWaterFallLayout as r, DEFAULT_GAP as s, C_WaterFall_default as t, SKELETON_HEIGHT_RANGE as u };
+//# sourceMappingURL=C_WaterFall2.js.map

package/dist/C_WaterFall2.js.map

@@ -0,0 +1 @@
+{"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","../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","<!--\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":";;;;;AAEA,MAAa,cAAc;AAC3B,MAAa,6BAA6B;AAC1C,MAAa,yBAAyB;AACtC,MAAa,4BAA4B;AAEzC,MAAa,sBAA6C;CACxD;EAAE,UAAU;EAAM,SAAS;EAAG;CAC9B;EAAE,UAAU;EAAM,SAAS;EAAG;CAC9B;EAAE,UAAU;EAAK,SAAS;EAAG;CAC7B;EAAE,UAAU;EAAK,SAAS;EAAG;CAC7B;EAAE,UAAU;EAAK,SAAS;EAAG;CAC7B;EAAE,UAAU;EAAG,SAAS;EAAG;CAC5B;AAED,MAAa,wBAA0C,CAAC,KAAK,IAAI;;;;ACXjE,SAAgB,qBACd,cACA,cACA,aACA;CACA,MAAM,UAAU,IAAI,EAAE;CACtB,MAAM,iBAAiB,IAAI,EAAE;CAE7B,SAAS,eAAe,OAAuB;AAC7C,MAAI,cAAc,SAAS,aAAa,QAAQ,EAC9C,QAAO,aAAa;EAItB,MAAM,SAAS,CAAC,GAHJ,aAAa,OAAO,SAC5B,YAAY,QACZ,oBACmB,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS;AAC/D,OAAK,MAAM,MAAM,OACf,KAAI,SAAS,GAAG,SAAU,QAAO,GAAG;AAEtC,SAAO;;CAGT,IAAI,iBAAwC;CAE5C,SAAS,iBAAiB;EACxB,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;AACT,mBAAiB,IAAI,gBAAgB,YAAY;AAC/C,QAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,UAAU,MAAM;AACxB,mBAAe,QAAQ;AACvB,YAAQ,QAAQ,eAAe,MAAM;;IAEvC;AACF,iBAAe,QAAQ,GAAG;EAC1B,MAAM,OAAO,GAAG,uBAAuB;AACvC,iBAAe,QAAQ,KAAK;AAC5B,UAAQ,QAAQ,eAAe,KAAK,MAAM;;CAG5C,SAAS,gBAAgB;AACvB,kBAAgB,YAAY;AAC5B,mBAAiB;;AAGnB,WAAU,eAAe;AACzB,iBAAgB,cAAc;AAE9B,OAAM,oBAAoB;AACxB,iBAAe;AACf,kBAAgB;GAChB;AAEF,OAAM,OAAO,cAAc,aAAa,aAAa,MAAM,QAAQ;AACjE,MAAI,eAAe,QAAQ,EACzB,SAAQ,QAAQ,eAAe,eAAe,MAAM;GAEtD;AAEF,QAAO;EACL,SAAS,SAAS,QAAQ;EAC1B,gBAAgB,SAAS,eAAe;EACzC;;;;;ACzDH,SAAgB,mBACd,OACA,SACA,gBACA,KACA;CACA,MAAM,cAAc,IAA2B,EAAE,CAAC;CAClD,MAAM,kBAAkB,IAAI,EAAE;CAC9B,MAAM,mCAAmB,IAAI,KAA8B;CAE3D,SAAS,iBAAiB,IAAqB,YAAoB;AACjE,mBAAiB,IAAI,IAAI,WAAW;;CAGtC,SAAS,YAAY;EACnB,MAAM,OAAO,QAAQ;EACrB,MAAM,QAAQ,eAAe;EAC7B,MAAM,IAAI,IAAI,SAAS;AAEvB,MAAI,QAAQ,KAAK,SAAS,KAAK,MAAM,MAAM,WAAW,GAAG;AACvD,eAAY,QAAQ,EAAE;AACtB,mBAAgB,QAAQ;AACxB;;EAGF,MAAM,YAAY,SAAS,OAAO,KAAK,KAAK;EAC5C,MAAM,cAAiC,MAAM,KAC3C,EAAE,QAAQ,MAAM,GACf,GAAG,OAAO;GAAE,OAAO;GAAG,QAAQ;GAAG,EACnC;EAED,MAAM,SAAgC,EAAE;AAExC,OAAK,MAAM,QAAQ,MAAM,OAAO;GAC9B,MAAM,WAAW,YAAY,QAAQ,KAAK,QACxC,IAAI,SAAS,IAAI,SAAS,MAAM,IACjC;GAED,MAAM,SAAS,iBAAiB,IAAI,KAAK,GAAG;GAC5C,MAAM,aAAa,SACf,SACA,KAAK,QAAQ,IACV,KAAK,SAAS,KAAK,QAAS,WAC7B;GAEN,MAAM,IAAI,SAAS,SAAS,WAAW;GACvC,MAAM,IAAI,SAAS;AAEnB,UAAO,KAAK;IACV;IACA,aAAa,SAAS;IACtB;IACA;IACA,OAAO;IACP,QAAQ;IACT,CAAC;AAEF,YAAS,SAAS,IAAI,aAAa;;AAGrC,cAAY,QAAQ;AACpB,kBAAgB,QAAQ,KAAK,IAAI,GAAG,YAAY,KAAK,MAAM,EAAE,OAAO,CAAC,GAAG;;AAG1E,OACE;EAAC;QAAa,MAAM,MAAM;EAAQ;EAAS;EAAgB;EAAI,EAC/D,WACA,EAAE,WAAW,MAAM,CACpB;AAED,QAAO;EACL,aAAa,SAAS,YAAY;EAClC,iBAAiB,SAAS,gBAAgB;EAC1C;EACA,UAAU;EACX;;;;;AC/EH,SAAgB,kBACd,aACA,SACA,SACA,QACA,YACA;CACA,MAAM,SAAS,IAA0B,OAAO;CAChD,IAAI,WAAwC;CAE5C,SAAS,gBAAgB,SAAsC;AAE7D,MAAI,CADU,QAAQ,IACV,eAAgB;AAC5B,MAAI,CAAC,QAAQ,SAAS,QAAQ,SAAS,OAAO,MAAO;AACrD,SAAO,QAAQ;AACf,cAAY;;CAGd,SAAS,iBAAiB;EACxB,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,MAAM,CAAC,QAAQ,MAAO;AAC3B,aAAW,IAAI,qBAAqB,iBAAiB,EACnD,YAAY,GAAG,0BAA0B,SAC1C,CAAC;AACF,WAAS,QAAQ,GAAG;;CAGtB,SAAS,gBAAgB;AACvB,YAAU,YAAY;AACtB,aAAW;;AAGb,OAAM,CAAC,SAAS,OAAO,QAAQ;AAC7B,MAAI,OAAO,MACT,QAAO,QAAQ;WACN,QAAQ,MACjB,QAAO,QAAQ;MAEf,QAAO,QAAQ;GAEjB;AAEF,WAAU,eAAe;AACzB,iBAAgB,cAAc;AAE9B,OAAM,CAAC,aAAa,QAAQ,QAAQ;AAClC,iBAAe;AACf,kBAAgB;GAChB;AAEF,QAAO,EAAE,QAAQ,SAAS,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEyDrC,MAAM,QAAQ;EAad,MAAM,OAAO;EAOb,MAAM,eAAe,KAAkB;EACvC,MAAM,cAAc,KAAkB;EAItC,MAAM,EAAE,SAAS,mBAAmB,qBAClC,cAHmB,eAAe,MAAM,QAAQ,EAC3B,eAAe,MAAM,YAAY,CAKvD;EAID,MAAM,EAAE,aAAa,iBAAiB,kBAAkB,aACtD,mBAHe,eAAe,MAAM,MAAM,EAGb,SAAS,gBAFzB,eAAe,MAAM,IAAI,CAEuB;EAE/D,MAAM,eAAe,eACb,MAAM,YAAY,MAAM,WAAW,YAAY,MAAM,WAAW,EACvE;EAED,MAAM,gBAAgB,eAAe;GACnC,MAAM,OAAO,QAAQ;GACrB,MAAM,QAAQ,eAAe;GAC7B,MAAM,IAAI,MAAM;AAChB,OAAI,QAAQ,KAAK,SAAS,EAAG,QAAO,EAAE;GAEtC,MAAM,YAAY,SAAS,OAAO,KAAK,KAAK;GAC5C,MAAM,QAAQ,MAAM,iBAAiB;GACrC,MAAM,aAAa,MAAM,KAAK,CAAC,KAAK,EAAE;GACtC,MAAM,SAAoE,EAAE;AAE5E,QAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;IAC9B,MAAM,SAAS,WAAW,QAAQ,KAAK,IAAI,GAAG,WAAW,CAAC;IAC1D,MAAM,IACJ,sBAAsB,KACtB,KAAK,QAAQ,IAAI,sBAAsB,KAAK,sBAAsB;AACpE,WAAO,KAAK;KACV,GAAG,UAAU,WAAW;KACxB,GAAG,WAAW;KACd,OAAO;KACP,QAAQ;KACT,CAAC;AACF,eAAW,WAAW,IAAI;;AAE5B,UAAO;IACP;EAEF,MAAM,iBAAiB,eAAe;AACpC,OAAI,cAAc,MAAM,WAAW,EAAG,QAAO;AAC7C,UAAO,KAAK,IAAI,GAAG,cAAc,MAAM,KAAK,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC;IAClE;EAEF,MAAM,aAAa,eACjB,aAAa,QAAQ,eAAe,QAAQ,gBAAgB,MAC7D;EAMD,MAAM,EAAE,QAAQ,iBAAiB,kBAC/B,aALsB,eAAe,MAAM,SAAS,EACnC,eAAe,MAAM,QAAQ,EAC9B,eAAe,MAAM,OAAO,QAOtC,KAAK,YAAY,CACxB;EAED,SAAS,kBAAkB,KAA0B,OAAc;GACjE,MAAM,MAAM,MAAM;AAClB,OAAI,IAAI,iBAAiB,IAAI,cAAc;IACzC,MAAM,aAAc,IAAI,gBAAgB,IAAI,eAAgB,IAAI;AAChE,qBAAiB,IAAI,KAAK,IAAI,WAAW;;AAE3C,QAAK,gBAAgB,IAAI,KAAK;;EAGhC,SAAS,iBAAiB,KAA0B;AAClD,QAAK,eAAe,IAAI,KAAK;;EAG/B,SAAS,cAAc;AACrB,gBAAa,OAAO,eAAe;IAAE,UAAU;IAAU,OAAO;IAAS,CAAC;;AAG5E,WAA8B;GAC5B;GACA;GACA,kBAAkB,QAAQ;GAC1B,0BAA0B,gBAAgB;GAC3C,CAAC;;uBAtNA,mBA8EM,OAAA;aA9EG;IAAJ,KAAI;IAAe,OAAM;OAC5B,mBA4DM,OAAA;IA3DJ,OAAM;IACL,OAAK,eAAA;KAAA,QAAA,GAAe,WAAA,MAAU;KAAA,UAAA;KAAA,CAAA;OAEf,aAAA,0BACd,mBAgBM,UAAA,EAAA,KAAA,GAAA,EAAA,WAfgB,cAAA,QAAZ,IAAI,QAAG;wBADjB,mBAgBM,OAAA;KAdH,KAAG,MAAQ;KACZ,OAAM;KACL,OAAK,eAAA;;eAA6D,GAAG,EAAC;cAA2B,GAAG,EAAC;gBAA6B,GAAG,MAAK;iBAA8B,GAAG,OAAM;yBAAsC,MAAM,qBAAqB,MAAA,2BAA0B,CAAA;;QAS7Q,WAEO,KAAA,QAAA,YAAA,EAAA,QAAA,2BADL,mBAAyC,OAAA,EAApC,OAAM,6BAA2B,EAAA,MAAA,GAAA;mEAK5C,mBAmCM,UAAA,MAAA,WAlCmB,MAAA,YAAW,GAA1B,KAAK,UAAK;wBADpB,mBAmCM,OAAA;KAjCH,KAAK,IAAI,KAAK;KACf,OAAM;KACL,OAAK,eAAA;;eAAyD,IAAI,EAAC;cAAyB,IAAI,EAAC;gBAA2B,IAAI,MAAK;yBAAoC,MAAM,qBAAqB,MAAA,2BAA0B,CAAA;;KAO9N,UAAK,WAAE,KAAI,cAAe,IAAI,MAAM,MAAK;QAE1C,WAqBO,KAAA,QAAA,QAAA;KAnBJ,MAAM,IAAI;KACH;KACP,OAAO,IAAI;KACX,QAAQ,IAAI;aAgBR,CAdL,mBAaM,OAbN,YAaM,CAZJ,mBAQE,OAAA;KAPC,KAAK,IAAI,KAAK;KACd,KAAK,IAAI,KAAK,SAAK;KACnB,SAAS,MAAM,OAAI,SAAA;KACpB,OAAM;KACL,OAAK,eAAA,EAAA,QAAA,GAAe,IAAI,OAAM,KAAA,CAAA;KAC9B,SAAI,WAAE,kBAAkB,KAAK,OAAM;KACnC,UAAK,WAAE,iBAAiB,IAAG;8BAEnB,IAAI,KAAK,sBAApB,mBAEM,OAFN,YAEM,gBADD,IAAI,KAAK,MAAK,EAAA,EAAA;mBAOhB,MAAM,yBAAjB,mBAcM,OAdN,YAcM,CAbJ,mBAAqD,OAAA;aAA5C;IAAJ,KAAI;IAAc,OAAM;kBAC7B,WAWO,KAAA,QAAA,UAAA,EAXc,QAAQ,MAAA,aAAY,EAAA,QAWlC,CAVM,MAAM,wBAAjB,mBAGM,OAHN,YAGM,CAFJ,YAAsB,MAAA,MAAA,EAAA,EAAf,MAAK,SAAO,CAAA,4BACnB,mBAAiB,QAAA,MAAX,QAAI,GAAA,OAGC,MAAM,uBADnB,mBAKM,OALN,YAGC,UAED"}