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

package/dist/C_VtableGantt2.js.map

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

package/dist/C_WaterFall.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_WaterFall.js","names":[],"sources":["../src/components/C_WaterFall/constants.ts","../src/components/C_WaterFall/composables/useResponsiveColumns.ts","../src/components/C_WaterFall/composables/useWaterFallLayout.ts","../src/components/C_WaterFall/composables/useInfiniteScroll.ts","../src/components/C_WaterFall/index.vue","../src/components/C_WaterFall/index.vue","../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","/* unplugin-vue-components disabled */<!--\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","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_WaterFall.js","names":[],"sources":["../src/components/C_WaterFall/constants.ts","../src/components/C_WaterFall/composables/useResponsiveColumns.ts","../src/components/C_WaterFall/composables/useWaterFallLayout.ts","../src/components/C_WaterFall/composables/useInfiniteScroll.ts","../src/components/C_WaterFall/index.vue"],"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"],"mappings":"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"}

package/dist/C_WaterFall2.js

@@ -1,2 +1,2 @@
-import{t as e}from"./export-helper.js";import{NSpin as t}from"naive-ui";import{Fragment as n,computed as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,normalizeStyle as l,onBeforeUnmount as u,onMounted as d,openBlock as f,readonly as p,ref as m,renderList as h,renderSlot as g,toDisplayString as _,unref as v,watch as y}from"vue";const b=16,x=300,S=8,C=200,w=[{minWidth:1600,columns:6},{minWidth:1200,columns:5},{minWidth:992,columns:4},{minWidth:768,columns:3},{minWidth:480,columns:2},{minWidth:0,columns:1}],T=[180,360];function E(e,t,n){let r=m(4),i=m(0);function a(e){if(t?.value&&t.value>0)return t.value;let r=[...n?.value?.length?n.value:w].sort((e,t)=>t.minWidth-e.minWidth);for(let t of r)if(e>=t.minWidth)return t.columns;return 1}let o=null;function s(){let t=e.value;if(!t)return;o=new ResizeObserver(e=>{for(let t of e){let{width:e}=t.contentRect;i.value=e,r.value=a(e)}}),o.observe(t);let n=t.getBoundingClientRect();i.value=n.width,r.value=a(n.width)}function c(){o?.disconnect(),o=null}return d(s),u(c),y(e,()=>{c(),s()}),y([()=>t?.value,()=>n?.value],()=>{i.value>0&&(r.value=a(i.value))}),{columns:p(r),containerWidth:p(i)}}function D(e,t,n,r){let i=m([]),a=m(0),o=new Map;function s(e,t){o.set(e,t)}function c(){let s=t.value,c=n.value,l=r.value??16;if(s<=0||c<=0||e.value.length===0){i.value=[],a.value=0;return}let u=(c-(s-1)*l)/s,d=Array.from({length:s},(e,t)=>({index:t,height:0})),f=[];for(let t of e.value){let e=d.reduce((e,t)=>t.height<e.height?t:e),n=o.get(t.id)||(t.width>0?t.height/t.width*u:u),r=e.index*(u+l),i=e.height;f.push({item:t,columnIndex:e.index,x:r,y:i,width:u,height:n}),e.height=i+n+l}i.value=f,a.value=Math.max(...d.map(e=>e.height))-l}return y([e,()=>e.value.length,t,n,r],c,{immediate:!0}),{layoutItems:p(i),containerHeight:p(a),cacheImageHeight:s,relayout:c}}function O(e,t,n,r,i){let a=m(`idle`),o=null;function s(e){e[0]?.isIntersecting&&(!t.value||n.value||r.value||(a.value=`loading`,i()))}function c(){let n=e.value;!n||!t.value||(o=new IntersectionObserver(s,{rootMargin:`200px 0px`}),o.observe(n))}function l(){o?.disconnect(),o=null}return y([n,r],()=>{r.value?a.value=`no-more`:n.value?a.value=`loading`:a.value=`idle`}),d(c),u(l),y([e,t],()=>{l(),c()}),{status:p(a)}}const k=[`onClick`],A={class:`waterfall__card`},j=[`src`,`alt`,`loading`,`onLoad`,`onError`],M={key:0,class:`waterfall__title`},N={key:0,class:`waterfall__footer`},P={key:0,class:`waterfall__status`},F={key:1,class:`waterfall__status waterfall__status--done`};var I=e(c({name:`C_WaterFall`,__name:`index`,props:{items:{},columns:{default:void 0},gap:{default:16},lazy:{type:Boolean,default:!0},infinite:{type:Boolean,default:!1},skeleton:{type:Boolean,default:!0},skeletonCount:{default:8},animationDuration:{default:300},breakpoints:{default:void 0},loading:{type:Boolean,default:!1},noMore:{type:Boolean,default:!1}},emits:[`load-more`,`item-click`,`image-loaded`,`image-error`],setup(e,{expose:c,emit:u}){let d=e,p=u,y=m(),b=m(),{columns:x,containerWidth:S}=E(y,r(()=>d.columns),r(()=>d.breakpoints)),{layoutItems:C,containerHeight:w,cacheImageHeight:I,relayout:L}=D(r(()=>d.items),x,S,r(()=>d.gap)),R=r(()=>d.skeleton&&d.loading&&C.value.length===0),z=r(()=>{let e=x.value,t=S.value,n=d.gap;if(e<=0||t<=0)return[];let r=(t-(e-1)*n)/e,i=d.skeletonCount??8,a=Array(e).fill(0),o=[];for(let e=0;e<i;e++){let e=a.indexOf(Math.min(...a)),t=T[0]+Math.random()*(T[1]-T[0]);o.push({x:e*(r+n),y:a[e],width:r,height:t}),a[e]+=t+n}return o}),B=r(()=>z.value.length===0?0:Math.max(...z.value.map(e=>e.y+e.height))),V=r(()=>R.value?B.value:w.value),{status:H}=O(b,r(()=>d.infinite),r(()=>d.loading),r(()=>d.noMore),()=>p(`load-more`));function U(e,t){let n=t.target;if(n.naturalHeight&&n.naturalWidth){let t=n.naturalHeight/n.naturalWidth*e.width;I(e.item.id,t)}p(`image-loaded`,e.item)}function W(e){p(`image-error`,e.item)}function G(){y.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return c({relayout:L,scrollToTop:G,getColumns:()=>x.value,getContainerHeight:()=>w.value}),(e,r)=>(f(),a(`div`,{ref_key:`containerRef`,ref:y,class:`c-waterfall`},[o(`div`,{class:`waterfall__body`,style:l({height:`${V.value}px`,position:`relative`})},[R.value?(f(!0),a(n,{key:0},h(z.value,(t,n)=>(f(),a(`div`,{key:`sk-${n}`,class:`waterfall__skeleton`,style:l({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,height:`${t.height}px`,transition:`all ${d.animationDuration??v(300)}ms ease`})},[g(e.$slots,`skeleton`,{},()=>[r[0]||=o(`div`,{class:`waterfall__skeleton-inner`},null,-1)],!0)],4))),128)):i(`v-if`,!0),(f(!0),a(n,null,h(v(C),(t,n)=>(f(),a(`div`,{key:t.item.id,class:`waterfall__item`,style:l({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,transition:`all ${d.animationDuration??v(300)}ms ease`}),onClick:e=>p(`item-click`,t.item,n)},[g(e.$slots,`item`,{item:t.item,index:n,width:t.width,height:t.height},()=>[o(`div`,A,[o(`img`,{src:t.item.src,alt:t.item.title||``,loading:d.lazy?`lazy`:`eager`,class:`waterfall__image`,style:l({height:`${t.height}px`}),onLoad:e=>U(t,e),onError:e=>W(t)},null,44,j),t.item.title?(f(),a(`div`,M,_(t.item.title),1)):i(`v-if`,!0)])],!0)],12,k))),128))],4),d.infinite?(f(),a(`div`,N,[o(`div`,{ref_key:`sentinelRef`,ref:b,class:`waterfall__sentinel`},null,512),g(e.$slots,`footer`,{status:v(H)},()=>[d.loading?(f(),a(`div`,P,[s(v(t),{size:`small`}),r[1]||=o(`span`,null,`加载中…`,-1)])):d.noMore?(f(),a(`div`,F,` 没有更多了 `)):i(`v-if`,!0)],!0)])):i(`v-if`,!0)],512))}}),[[`__scopeId`,`data-v-fd4a1e91`]]);export{x as a,S as c,E as i,C as l,O as n,w as o,D as r,b as s,I as t,T as u};
+import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,normalizeStyle as c,onBeforeUnmount as l,onMounted as u,openBlock as d,readonly as f,ref as p,renderList as m,renderSlot as h,toDisplayString as g,unref as _,watch as v}from"vue";import{NSpin as y}from"naive-ui";const b=16,x=300,S=8,C=200,w=[{minWidth:1600,columns:6},{minWidth:1200,columns:5},{minWidth:992,columns:4},{minWidth:768,columns:3},{minWidth:480,columns:2},{minWidth:0,columns:1}],T=[180,360];function E(e,t,n){let r=p(4),i=p(0);function a(e){if(t?.value&&t.value>0)return t.value;let r=[...n?.value?.length?n.value:w].sort((e,t)=>t.minWidth-e.minWidth);for(let t of r)if(e>=t.minWidth)return t.columns;return 1}let o=null;function s(){let t=e.value;if(!t)return;o=new ResizeObserver(e=>{for(let t of e){let{width:e}=t.contentRect;i.value=e,r.value=a(e)}}),o.observe(t);let n=t.getBoundingClientRect();i.value=n.width,r.value=a(n.width)}function c(){o?.disconnect(),o=null}return u(s),l(c),v(e,()=>{c(),s()}),v([()=>t?.value,()=>n?.value],()=>{i.value>0&&(r.value=a(i.value))}),{columns:f(r),containerWidth:f(i)}}function D(e,t,n,r){let i=p([]),a=p(0),o=new Map;function s(e,t){o.set(e,t)}function c(){let s=t.value,c=n.value,l=r.value??16;if(s<=0||c<=0||e.value.length===0){i.value=[],a.value=0;return}let u=(c-(s-1)*l)/s,d=Array.from({length:s},(e,t)=>({index:t,height:0})),f=[];for(let t of e.value){let e=d.reduce((e,t)=>t.height<e.height?t:e),n=o.get(t.id)||(t.width>0?t.height/t.width*u:u),r=e.index*(u+l),i=e.height;f.push({item:t,columnIndex:e.index,x:r,y:i,width:u,height:n}),e.height=i+n+l}i.value=f,a.value=Math.max(...d.map(e=>e.height))-l}return v([e,()=>e.value.length,t,n,r],c,{immediate:!0}),{layoutItems:f(i),containerHeight:f(a),cacheImageHeight:s,relayout:c}}function O(e,t,n,r,i){let a=p(`idle`),o=null;function s(e){e[0]?.isIntersecting&&(!t.value||n.value||r.value||(a.value=`loading`,i()))}function c(){let n=e.value;!n||!t.value||(o=new IntersectionObserver(s,{rootMargin:`200px 0px`}),o.observe(n))}function d(){o?.disconnect(),o=null}return v([n,r],()=>{r.value?a.value=`no-more`:n.value?a.value=`loading`:a.value=`idle`}),u(c),l(d),v([e,t],()=>{d(),c()}),{status:f(a)}}const k=[`onClick`],A={class:`waterfall__card`},j=[`src`,`alt`,`loading`,`onLoad`,`onError`],M={key:0,class:`waterfall__title`},N={key:0,class:`waterfall__footer`},P={key:0,class:`waterfall__status`},F={key:1,class:`waterfall__status waterfall__status--done`};var I=e(s({name:`C_WaterFall`,__name:`index`,props:{items:{},columns:{default:void 0},gap:{default:16},lazy:{type:Boolean,default:!0},infinite:{type:Boolean,default:!1},skeleton:{type:Boolean,default:!0},skeletonCount:{default:8},animationDuration:{default:300},breakpoints:{default:void 0},loading:{type:Boolean,default:!1},noMore:{type:Boolean,default:!1}},emits:[`load-more`,`item-click`,`image-loaded`,`image-error`],setup(e,{expose:s,emit:l}){let u=e,f=l,v=p(),b=p(),{columns:x,containerWidth:S}=E(v,n(()=>u.columns),n(()=>u.breakpoints)),{layoutItems:C,containerHeight:w,cacheImageHeight:I,relayout:L}=D(n(()=>u.items),x,S,n(()=>u.gap)),R=n(()=>u.skeleton&&u.loading&&C.value.length===0),z=n(()=>{let e=x.value,t=S.value,n=u.gap;if(e<=0||t<=0)return[];let r=(t-(e-1)*n)/e,i=u.skeletonCount??8,a=Array(e).fill(0),o=[];for(let e=0;e<i;e++){let e=a.indexOf(Math.min(...a)),t=T[0]+Math.random()*(T[1]-T[0]);o.push({x:e*(r+n),y:a[e],width:r,height:t}),a[e]+=t+n}return o}),B=n(()=>z.value.length===0?0:Math.max(...z.value.map(e=>e.y+e.height))),V=n(()=>R.value?B.value:w.value),{status:H}=O(b,n(()=>u.infinite),n(()=>u.loading),n(()=>u.noMore),()=>f(`load-more`));function U(e,t){let n=t.target;if(n.naturalHeight&&n.naturalWidth){let t=n.naturalHeight/n.naturalWidth*e.width;I(e.item.id,t)}f(`image-loaded`,e.item)}function W(e){f(`image-error`,e.item)}function G(){v.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return s({relayout:L,scrollToTop:G,getColumns:()=>x.value,getContainerHeight:()=>w.value}),(e,n)=>(d(),i(`div`,{ref_key:`containerRef`,ref:v,class:`c-waterfall`},[a(`div`,{class:`waterfall__body`,style:c({height:`${V.value}px`,position:`relative`})},[R.value?(d(!0),i(t,{key:0},m(z.value,(t,r)=>(d(),i(`div`,{key:`sk-${r}`,class:`waterfall__skeleton`,style:c({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,height:`${t.height}px`,transition:`all ${u.animationDuration??_(300)}ms ease`})},[h(e.$slots,`skeleton`,{},()=>[n[0]||=a(`div`,{class:`waterfall__skeleton-inner`},null,-1)],!0)],4))),128)):r(`v-if`,!0),(d(!0),i(t,null,m(_(C),(t,n)=>(d(),i(`div`,{key:t.item.id,class:`waterfall__item`,style:c({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,transition:`all ${u.animationDuration??_(300)}ms ease`}),onClick:e=>f(`item-click`,t.item,n)},[h(e.$slots,`item`,{item:t.item,index:n,width:t.width,height:t.height},()=>[a(`div`,A,[a(`img`,{src:t.item.src,alt:t.item.title||``,loading:u.lazy?`lazy`:`eager`,class:`waterfall__image`,style:c({height:`${t.height}px`}),onLoad:e=>U(t,e),onError:e=>W(t)},null,44,j),t.item.title?(d(),i(`div`,M,g(t.item.title),1)):r(`v-if`,!0)])],!0)],12,k))),128))],4),u.infinite?(d(),i(`div`,N,[a(`div`,{ref_key:`sentinelRef`,ref:b,class:`waterfall__sentinel`},null,512),h(e.$slots,`footer`,{status:_(H)},()=>[u.loading?(d(),i(`div`,P,[o(_(y),{size:`small`}),n[1]||=a(`span`,null,`加载中…`,-1)])):u.noMore?(d(),i(`div`,F,` 没有更多了 `)):r(`v-if`,!0)],!0)])):r(`v-if`,!0)],512))}}),[[`__scopeId`,`data-v-fd4a1e91`]]);export{x as a,S as c,E as i,C as l,O as n,w as o,D as r,b as s,I as t,T as u};
 //# sourceMappingURL=C_WaterFall2.js.map

package/dist/C_WaterFall2.js.map

@@ -1 +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","/* unplugin-vue-components disabled */<!--\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","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n"],"mappings":"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"}
+{"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"],"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"],"mappings":"4YAEA,MAAa,EAAc,GACd,EAA6B,IAC7B,EAAyB,EACzB,EAA4B,IAE5B,EAA6C,CACxD,CAAE,SAAU,KAAM,QAAS,EAAG,CAC9B,CAAE,SAAU,KAAM,QAAS,EAAG,CAC9B,CAAE,SAAU,IAAK,QAAS,EAAG,CAC7B,CAAE,SAAU,IAAK,QAAS,EAAG,CAC7B,CAAE,SAAU,IAAK,QAAS,EAAG,CAC7B,CAAE,SAAU,EAAG,QAAS,EAAG,CAC5B,CAEY,EAA0C,CAAC,IAAK,IAAI,CCXjE,SAAgB,EACd,EACA,EACA,EACA,CACA,IAAM,EAAU,EAAI,EAAE,CAChB,EAAiB,EAAI,EAAE,CAE7B,SAAS,EAAe,EAAuB,CAC7C,GAAI,GAAc,OAAS,EAAa,MAAQ,EAC9C,OAAO,EAAa,MAItB,IAAM,EAAS,CAAC,GAHJ,GAAa,OAAO,OAC5B,EAAY,MACZ,EACmB,CAAC,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,SAAS,CAC/D,IAAK,IAAM,KAAM,EACf,GAAI,GAAS,EAAG,SAAU,OAAO,EAAG,QAEtC,MAAO,GAGT,IAAI,EAAwC,KAE5C,SAAS,GAAiB,CACxB,IAAM,EAAK,EAAa,MACxB,GAAI,CAAC,EAAI,OACT,EAAiB,IAAI,eAAgB,GAAY,CAC/C,IAAK,IAAM,KAAS,EAAS,CAC3B,GAAM,CAAE,SAAU,EAAM,YACxB,EAAe,MAAQ,EACvB,EAAQ,MAAQ,EAAe,EAAM,GAEvC,CACF,EAAe,QAAQ,EAAG,CAC1B,IAAM,EAAO,EAAG,uBAAuB,CACvC,EAAe,MAAQ,EAAK,MAC5B,EAAQ,MAAQ,EAAe,EAAK,MAAM,CAG5C,SAAS,GAAgB,CACvB,GAAgB,YAAY,CAC5B,EAAiB,KAiBnB,OAdA,EAAU,EAAe,CACzB,EAAgB,EAAc,CAE9B,EAAM,MAAoB,CACxB,GAAe,CACf,GAAgB,EAChB,CAEF,EAAM,KAAO,GAAc,UAAa,GAAa,MAAM,KAAQ,CAC7D,EAAe,MAAQ,IACzB,EAAQ,MAAQ,EAAe,EAAe,MAAM,GAEtD,CAEK,CACL,QAAS,EAAS,EAAQ,CAC1B,eAAgB,EAAS,EAAe,CACzC,CCzDH,SAAgB,EACd,EACA,EACA,EACA,EACA,CACA,IAAM,EAAc,EAA2B,EAAE,CAAC,CAC5C,EAAkB,EAAI,EAAE,CACxB,EAAmB,IAAI,IAE7B,SAAS,EAAiB,EAAqB,EAAoB,CACjE,EAAiB,IAAI,EAAI,EAAW,CAGtC,SAAS,GAAY,CACnB,IAAM,EAAO,EAAQ,MACf,EAAQ,EAAe,MACvB,EAAI,EAAI,OAAS,GAEvB,GAAI,GAAQ,GAAK,GAAS,GAAK,EAAM,MAAM,SAAW,EAAG,CACvD,EAAY,MAAQ,EAAE,CACtB,EAAgB,MAAQ,EACxB,OAGF,IAAM,GAAY,GAAS,EAAO,GAAK,GAAK,EACtC,EAAiC,MAAM,KAC3C,CAAE,OAAQ,EAAM,EACf,EAAG,KAAO,CAAE,MAAO,EAAG,OAAQ,EAAG,EACnC,CAEK,EAAgC,EAAE,CAExC,IAAK,IAAM,KAAQ,EAAM,MAAO,CAC9B,IAAM,EAAW,EAAY,QAAQ,EAAK,IACxC,EAAI,OAAS,EAAI,OAAS,EAAM,EACjC,CAGK,EADS,EAAiB,IAAI,EAAK,GAAG,GAGxC,EAAK,MAAQ,EACV,EAAK,OAAS,EAAK,MAAS,EAC7B,GAEA,EAAI,EAAS,OAAS,EAAW,GACjC,EAAI,EAAS,OAEnB,EAAO,KAAK,CACV,OACA,YAAa,EAAS,MACtB,IACA,IACA,MAAO,EACP,OAAQ,EACT,CAAC,CAEF,EAAS,OAAS,EAAI,EAAa,EAGrC,EAAY,MAAQ,EACpB,EAAgB,MAAQ,KAAK,IAAI,GAAG,EAAY,IAAK,GAAM,EAAE,OAAO,CAAC,CAAG,EAS1E,OANA,EACE,CAAC,MAAa,EAAM,MAAM,OAAQ,EAAS,EAAgB,EAAI,CAC/D,EACA,CAAE,UAAW,GAAM,CACpB,CAEM,CACL,YAAa,EAAS,EAAY,CAClC,gBAAiB,EAAS,EAAgB,CAC1C,mBACA,SAAU,EACX,CC/EH,SAAgB,EACd,EACA,EACA,EACA,EACA,EACA,CACA,IAAM,EAAS,EAA0B,OAAO,CAC5C,EAAwC,KAE5C,SAAS,EAAgB,EAAsC,CAC/C,EAAQ,IACV,iBACR,CAAC,EAAQ,OAAS,EAAQ,OAAS,EAAO,QAC9C,EAAO,MAAQ,UACf,GAAY,GAGd,SAAS,GAAiB,CACxB,IAAM,EAAK,EAAY,MACnB,CAAC,GAAM,CAAC,EAAQ,QACpB,EAAW,IAAI,qBAAqB,EAAiB,CACnD,WAAY,YACb,CAAC,CACF,EAAS,QAAQ,EAAG,EAGtB,SAAS,GAAgB,CACvB,GAAU,YAAY,CACtB,EAAW,KAqBb,OAlBA,EAAM,CAAC,EAAS,EAAO,KAAQ,CACzB,EAAO,MACT,EAAO,MAAQ,UACN,EAAQ,MACjB,EAAO,MAAQ,UAEf,EAAO,MAAQ,QAEjB,CAEF,EAAU,EAAe,CACzB,EAAgB,EAAc,CAE9B,EAAM,CAAC,EAAa,EAAQ,KAAQ,CAClC,GAAe,CACf,GAAgB,EAChB,CAEK,CAAE,OAAQ,EAAS,EAAO,CAAE,qsBCyDrC,IAAM,EAAQ,EAaR,EAAO,EAOP,EAAe,GAAkB,CACjC,EAAc,GAAkB,CAIhC,CAAE,UAAS,kBAAmB,EAClC,EAHmB,MAAe,EAAM,QAAQ,CAC3B,MAAe,EAAM,YAAY,CAKvD,CAIK,CAAE,cAAa,kBAAiB,mBAAkB,YACtD,EAHe,MAAe,EAAM,MAAM,CAGb,EAAS,EAFzB,MAAe,EAAM,IAAI,CAEuB,CAEzD,EAAe,MACb,EAAM,UAAY,EAAM,SAAW,EAAY,MAAM,SAAW,EACvE,CAEK,EAAgB,MAAe,CACnC,IAAM,EAAO,EAAQ,MACf,EAAQ,EAAe,MACvB,EAAI,EAAM,IAChB,GAAI,GAAQ,GAAK,GAAS,EAAG,MAAO,EAAE,CAEtC,IAAM,GAAY,GAAS,EAAO,GAAK,GAAK,EACtC,EAAQ,EAAM,eAAiB,EAC/B,EAAa,MAAM,EAAK,CAAC,KAAK,EAAE,CAChC,EAAoE,EAAE,CAE5E,IAAK,IAAI,EAAI,EAAG,EAAI,EAAO,IAAK,CAC9B,IAAM,EAAS,EAAW,QAAQ,KAAK,IAAI,GAAG,EAAW,CAAC,CACpD,EACJ,EAAsB,GACtB,KAAK,QAAQ,EAAI,EAAsB,GAAK,EAAsB,IACpE,EAAO,KAAK,CACV,EAAG,GAAU,EAAW,GACxB,EAAG,EAAW,GACd,MAAO,EACP,OAAQ,EACT,CAAC,CACF,EAAW,IAAW,EAAI,EAE5B,OAAO,GACP,CAEI,EAAiB,MACjB,EAAc,MAAM,SAAW,EAAU,EACtC,KAAK,IAAI,GAAG,EAAc,MAAM,IAAK,GAAM,EAAE,EAAI,EAAE,OAAO,CAAC,CAClE,CAEI,EAAa,MACjB,EAAa,MAAQ,EAAe,MAAQ,EAAgB,MAC7D,CAMK,CAAE,OAAQ,GAAiB,EAC/B,EALsB,MAAe,EAAM,SAAS,CACnC,MAAe,EAAM,QAAQ,CAC9B,MAAe,EAAM,OAAO,KAOtC,EAAK,YAAY,CACxB,CAED,SAAS,EAAkB,EAA0B,EAAc,CACjE,IAAM,EAAM,EAAM,OAClB,GAAI,EAAI,eAAiB,EAAI,aAAc,CACzC,IAAM,EAAc,EAAI,cAAgB,EAAI,aAAgB,EAAI,MAChE,EAAiB,EAAI,KAAK,GAAI,EAAW,CAE3C,EAAK,eAAgB,EAAI,KAAK,CAGhC,SAAS,EAAiB,EAA0B,CAClD,EAAK,cAAe,EAAI,KAAK,CAG/B,SAAS,GAAc,CACrB,EAAa,OAAO,eAAe,CAAE,SAAU,SAAU,MAAO,QAAS,CAAC,QAG5E,EAA8B,CAC5B,WACA,cACA,eAAkB,EAAQ,MAC1B,uBAA0B,EAAgB,MAC3C,CAAC,aAtNA,EA8EM,MAAA,SA9EG,eAAJ,IAAI,EAAe,MAAM,gBAC5B,EA4DM,MAAA,CA3DJ,MAAM,kBACL,MAAK,EAAA,CAAA,OAAA,GAAe,EAAA,MAAU,IAAA,SAAA,WAAA,CAAA,GAEf,EAAA,OAAA,EAAA,GAAA,CACd,EAgBM,EAAA,CAAA,IAAA,EAAA,CAAA,EAfgB,EAAA,OAAZ,EAAI,SADd,EAgBM,MAAA,CAdH,IAAG,MAAQ,IACZ,MAAM,sBACL,MAAK,EAAA,6BAAG,EAAA,EAAA,WAAA,EAAA,EAAA,aAAA,EAAA,MAAA,cAAA,EAAA,OAAA,sBAAA,EAAA,mBAAA,EAAA,IAAA,CAAA,aAST,EAEO,EAAA,OAAA,WAAA,EAAA,KAAA,CAAA,AAAA,EAAA,KADL,EAAyC,MAAA,CAApC,MAAM,4BAA2B,CAAA,KAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,EAAA,6BAK5C,EAmCM,EAAA,KAAA,EAlCmB,EAAA,EAAW,EAA1B,EAAK,SADf,EAmCM,MAAA,CAjCH,IAAK,EAAI,KAAK,GACf,MAAM,kBACL,MAAK,EAAA,6BAAG,EAAA,EAAA,WAAA,EAAA,EAAA,aAAA,EAAA,MAAA,sBAAA,EAAA,mBAAA,EAAA,IAAA,CAAA,WAOR,QAAK,GAAE,EAAI,aAAe,EAAI,KAAM,EAAK,GAE1C,EAqBO,EAAA,OAAA,OAAA,CAnBJ,KAAM,EAAI,KACH,QACP,MAAO,EAAI,MACX,OAAQ,EAAI,YAgBR,CAdL,EAaM,MAbN,EAaM,CAZJ,EAQE,MAAA,CAPC,IAAK,EAAI,KAAK,IACd,IAAK,EAAI,KAAK,OAAK,GACnB,QAAS,EAAM,KAAI,OAAA,QACpB,MAAM,mBACL,MAAK,EAAA,CAAA,OAAA,GAAe,EAAI,OAAM,IAAA,CAAA,CAC9B,OAAI,GAAE,EAAkB,EAAK,EAAM,CACnC,QAAK,GAAE,EAAiB,EAAG,aAEnB,EAAI,KAAK,OAAA,GAAA,CAApB,EAEM,MAFN,EAEM,EADD,EAAI,KAAK,MAAK,CAAA,EAAA,EAAA,EAAA,OAAA,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,aAOhB,EAAM,UAAA,GAAA,CAAjB,EAcM,MAdN,EAcM,CAbJ,EAAqD,MAAA,SAA5C,cAAJ,IAAI,EAAc,MAAM,iCAC7B,EAWO,EAAA,OAAA,SAAA,CAXc,OAAQ,EAAA,EAAY,CAAA,KAWlC,CAVM,EAAM,SAAA,GAAA,CAAjB,EAGM,MAHN,EAGM,CAFJ,EAAsB,EAAA,EAAA,CAAA,CAAf,KAAK,QAAO,CAAA,CAAA,AAAA,EAAA,KACnB,EAAiB,OAAA,KAAX,OAAI,GAAA,CAAA,CAAA,EAGC,EAAM,QAAA,GAAA,CADnB,EAKM,MALN,EAGC,UAED,EAAA,EAAA,OAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,EAAA,EAAA,OAAA,GAAA,CAAA,CAAA,IAAA"}