@robot-admin/naive-ui-components 0.3.1 → 0.3.3

package/dist/C_VtableGantt-BpY-Rng3.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_VtableGantt-BpY-Rng3.css","names":[],"sources":["../src/components/C_VtableGantt/index.vue?vue&type=style&index=0&scoped=f7a9da66&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 甘特图组件样式 */\n.c-vtable-gantt-wrapper[data-v-f7a9da66] {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--c-border, #e1e4e8);\n  border-radius: var(--c-radius, 8px);\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  height: 100%;\n}\n.c-vtable-gantt-wrapper .gantt-toolbar[data-v-f7a9da66] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--c-border, #e1e4e8);\n  min-height: 48px;\n  flex-shrink: 0;\n}\n.c-vtable-gantt-wrapper .gantt-toolbar .toolbar-left .gantt-title[data-v-f7a9da66] {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--c-text-1, #333);\n}\n.c-vtable-gantt-wrapper .gantt-toolbar .toolbar-right[data-v-f7a9da66] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] {\n  flex: 1;\n  position: relative;\n  min-height: 400px;\n  overflow: hidden;\n  /* 确保甘特图组件完全填充容器 */\n  /* 确保甘特图内部组件正确填充 */\n  /* 防止内部表格自动调整高度 */\n  /* 防止拖动时底部色块闪烁 */\n  /* 针对拖动元素的优化 */\n  /* 防止拖动时底部区域的重绘闪烁 */\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] > * {\n  width: 100%;\n  height: 100%;\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] .vtable-gantt {\n  width: 100% !important;\n  height: 100% !important;\n  overflow: hidden;\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] .vtable-gantt * {\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  -webkit-font-smoothing: subpixel-antialiased;\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] .vtable-gantt-table {\n  height: 100% !important;\n  box-sizing: border-box;\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] .vtable-gantt-chart {\n  position: relative;\n  overflow: hidden;\n  will-change: transform;\n  transform: translateZ(0);\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] .vtable-gantt-task {\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] .vtable-gantt-task.dragging {\n  z-index: 1000;\n  pointer-events: none;\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] .vtable-gantt-chart-container {\n  position: relative;\n  overflow: hidden;\n}\n.c-vtable-gantt-wrapper .gantt-container[data-v-f7a9da66] .vtable-gantt-chart-container::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: transparent;\n  pointer-events: none;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_VtableGantt2.js

@@ -1,7 +1,7 @@
 import { t as C_Icon_default } from "./C_Icon2.js";
 import { t as export_helper_default } from "./export-helper.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
 import { NButton } from "naive-ui";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
 
 //#region src/components/C_VtableGantt/data.ts
 const commonTheme = {
@@ -866,7 +866,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 
 //#endregion
 //#region src/components/C_VtableGantt/index.vue
-var C_VtableGantt_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bdd6834b"]]);
+var C_VtableGantt_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f7a9da66"]]);
 
 //#endregion
 export { presetConfigs as n, C_VtableGantt_default as t };

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","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-08-01\r\n * @Description: VTable 甘特图组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-vtable-gantt-wrapper\">\r\n    <div v-if=\"showToolbar\" class=\"gantt-toolbar\">\r\n      <div class=\"toolbar-left\">\r\n        <span class=\"gantt-title\">{{ title || \"甘特图\" }}</span>\r\n      </div>\r\n      <div class=\"toolbar-right\">\r\n        <NButton\r\n          v-if=\"showFullscreenButton\"\r\n          size=\"small\"\r\n          @click=\"toggleFullscreen\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon\r\n              :name=\"isFullscreen ? 'carbon:minimize' : 'carbon:maximize'\"\r\n              :size=\"16\"\r\n              color=\"currentColor\"\r\n            />\r\n          </template>\r\n          {{ isFullscreen ? \"退出全屏\" : \"全屏\" }}\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n    <div\r\n      ref=\"ganttContainerRef\"\r\n      class=\"gantt-container\"\r\n      :style=\"{ height: containerHeight }\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, watch, nextTick, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport {\r\n  presetConfigs,\r\n  type GanttTask,\r\n  type GanttOptions,\r\n  type GanttPreset,\r\n} from \"./data\";\r\n\r\ndefineOptions({ name: \"C_VtableGantt\" });\r\n\r\ninterface Props {\r\n  data?: GanttTask[];\r\n  options?: GanttOptions;\r\n  preset?: GanttPreset;\r\n  height?: string | number;\r\n  title?: string;\r\n  showToolbar?: boolean;\r\n  showFullscreenButton?: boolean;\r\n  theme?: \"light\" | \"dark\";\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  data: () => [],\r\n  options: () => ({}),\r\n  preset: \"basic\",\r\n  height: \"600px\",\r\n  title: \"\",\r\n  showToolbar: true,\r\n  showFullscreenButton: true,\r\n  theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  ganttCreated: [gantt: any];\r\n  taskClick: [task: GanttTask, event: Event];\r\n  taskChange: [task: GanttTask, changes: any];\r\n}>();\r\n\r\nconst ganttContainerRef = ref<HTMLDivElement>();\r\nconst ganttInstance = ref<any>();\r\nconst isFullscreen = ref(false);\r\n\r\nconst containerHeight = computed(() =>\r\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\r\n);\r\n\r\nconst deepMerge = (target: any, source: any, seen = new WeakMap()): any => {\r\n  if (!isObject(target)) return source;\r\n  if (!isObject(source)) return target;\r\n  if (seen.has(source)) return seen.get(source);\r\n  return createMergeResult(target, source, seen);\r\n};\r\n\r\nconst isObject = (value: any): boolean => {\r\n  return value !== null && typeof value === \"object\";\r\n};\r\n\r\nconst isSpecialObject = (value: any): boolean => {\r\n  return value instanceof Date || value instanceof RegExp;\r\n};\r\n\r\nconst createMergeResult = (\r\n  target: any,\r\n  source: any,\r\n  seen: WeakMap<any, any>,\r\n): any => {\r\n  const result = Array.isArray(target) ? [...target] : { ...target };\r\n  seen.set(source, result);\r\n  for (const key in source) {\r\n    if (!source.hasOwnProperty(key)) continue;\r\n    const sourceValue = source[key];\r\n    const shouldDeepMerge =\r\n      isObject(sourceValue) &&\r\n      !Array.isArray(sourceValue) &&\r\n      !isSpecialObject(sourceValue);\r\n    result[key] = shouldDeepMerge\r\n      ? deepMerge(target[key] || {}, sourceValue, seen)\r\n      : sourceValue;\r\n  }\r\n  return result;\r\n};\r\n\r\nconst processData = (data: GanttTask[]): GanttTask[] => {\r\n  return data.map((item) => ({\r\n    ...item,\r\n    title: item.title || `任务${item.id}`,\r\n    children: item.children ? processData(item.children) : undefined,\r\n  }));\r\n};\r\n\r\nconst getThemeConfig = (isDark: boolean) => ({\r\n  underlayBackgroundColor: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  timelineHeaderBg: isDark ? \"#2d2d2d\" : \"#EEF1F5\",\r\n  gridBg: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  lineColor: isDark ? \"rgba(255, 255, 255, 0.1)\" : \"rgba(128, 128, 128, 0.2)\",\r\n  textColor: isDark ? \"#ffffff\" : \"#000000\",\r\n});\r\n\r\nconst applyThemeToTimelineHeader = (timelineHeader: any, themeColors: any) => ({\r\n  ...timelineHeader,\r\n  backgroundColor: themeColors.timelineHeaderBg,\r\n  horizontalLine: {\r\n    ...timelineHeader?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...timelineHeader?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  scales: timelineHeader?.scales?.map((scale: any) => ({\r\n    ...scale,\r\n    style: {\r\n      ...scale.style,\r\n      color: themeColors.textColor,\r\n    },\r\n  })),\r\n});\r\n\r\nconst applyThemeToGrid = (grid: any, themeColors: any) => ({\r\n  ...grid,\r\n  backgroundColor: themeColors.gridBg,\r\n  horizontalLine: {\r\n    ...grid?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...grid?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n});\r\n\r\nconst buildGanttOptions = (\r\n  finalConfig: any,\r\n  processedData: GanttTask[],\r\n  tableTheme: any,\r\n  themeColors: any,\r\n) => ({\r\n  ...finalConfig,\r\n  records: processedData,\r\n  underlayBackgroundColor: themeColors.underlayBackgroundColor,\r\n  taskListTable: {\r\n    ...finalConfig.taskListTable,\r\n    theme: tableTheme,\r\n  },\r\n  timelineHeader: applyThemeToTimelineHeader(\r\n    finalConfig.timelineHeader,\r\n    themeColors,\r\n  ),\r\n  grid: applyThemeToGrid(finalConfig.grid, themeColors),\r\n});\r\n\r\nconst bindGanttEvents = (instance: any) => {\r\n  instance.on(\"click_cell\", (args: any) => {\r\n    const { record, event } = args || {};\r\n    if (record) emit(\"taskClick\", record, event);\r\n  });\r\n  instance.on(\"change_data\", (args: any) => {\r\n    const { record, changes } = args || {};\r\n    if (record && changes) emit(\"taskChange\", record, changes);\r\n  });\r\n};\r\n\r\nconst initGantt = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    const { Gantt } = await import(\"@visactor/vtable-gantt\");\r\n    const { themes } = await import(\"@visactor/vtable\");\r\n    const isDark = props.theme === \"dark\";\r\n    const presetConfig = presetConfigs[props.preset] || presetConfigs.basic;\r\n    const finalConfig = deepMerge(presetConfig, props.options);\r\n    const processedData = processData(props.data || []);\r\n    if (ganttInstance.value) ganttInstance.value.release();\r\n    const tableTheme = isDark ? themes.DARK : themes.DEFAULT;\r\n    const themeColors = getThemeConfig(isDark);\r\n    const ganttOptions = buildGanttOptions(\r\n      finalConfig,\r\n      processedData,\r\n      tableTheme,\r\n      themeColors,\r\n    );\r\n    ganttInstance.value = new Gantt(ganttContainerRef.value, ganttOptions);\r\n    bindGanttEvents(ganttInstance.value);\r\n    emit(\"ganttCreated\", ganttInstance.value);\r\n  } catch (error) {\r\n    console.error(\"甘特图初始化失败:\", error);\r\n  }\r\n};\r\n\r\nconst toggleFullscreen = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    if (!document.fullscreenElement) {\r\n      await ganttContainerRef.value.requestFullscreen();\r\n      isFullscreen.value = true;\r\n    } else {\r\n      await document.exitFullscreen();\r\n      isFullscreen.value = false;\r\n    }\r\n    setTimeout(() => ganttInstance.value?.resize?.(), 100);\r\n  } catch (error) {\r\n    console.warn(\"全屏切换失败:\", error);\r\n    isFullscreen.value = !isFullscreen.value;\r\n    nextTick(() => ganttInstance.value?.resize?.());\r\n  }\r\n};\r\n\r\nconst handleFullscreenChange = () => {\r\n  isFullscreen.value = !!document.fullscreenElement;\r\n  nextTick(() => ganttInstance.value?.resize?.());\r\n};\r\n\r\nconst updateData = (newData: GanttTask[]) => {\r\n  if (ganttInstance.value && newData) {\r\n    try {\r\n      ganttInstance.value.setRecords(processData(newData));\r\n    } catch (error) {\r\n      console.warn(\"更新数据失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst updateOptions = (newOptions: GanttOptions) => {\r\n  if (ganttInstance.value && newOptions) {\r\n    try {\r\n      ganttInstance.value.updateOption(newOptions);\r\n    } catch (error) {\r\n      console.warn(\"更新配置失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst destroyGantt = () => {\r\n  if (ganttInstance.value) {\r\n    try {\r\n      ganttInstance.value.release();\r\n    } catch (error) {\r\n      console.warn(\"销毁甘特图失败:\", error);\r\n    } finally {\r\n      ganttInstance.value = undefined;\r\n    }\r\n  }\r\n};\r\n\r\nwatch(\r\n  () => props.data,\r\n  (newData) => {\r\n    if (newData && ganttInstance.value) updateData(newData);\r\n  },\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => [props.options, props.preset],\r\n  () => nextTick(() => initGantt()),\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => props.theme,\r\n  () => nextTick(() => initGantt()),\r\n);\r\n\r\nonMounted(() => {\r\n  document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  nextTick(() => setTimeout(() => initGantt(), 100));\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  destroyGantt();\r\n});\r\n\r\ndefineExpose({\r\n  ganttInstance,\r\n  updateData,\r\n  updateOptions,\r\n  toggleFullscreen,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-08-01\r\n * @Description: VTable 甘特图组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-vtable-gantt-wrapper\">\r\n    <div v-if=\"showToolbar\" class=\"gantt-toolbar\">\r\n      <div class=\"toolbar-left\">\r\n        <span class=\"gantt-title\">{{ title || \"甘特图\" }}</span>\r\n      </div>\r\n      <div class=\"toolbar-right\">\r\n        <NButton\r\n          v-if=\"showFullscreenButton\"\r\n          size=\"small\"\r\n          @click=\"toggleFullscreen\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon\r\n              :name=\"isFullscreen ? 'carbon:minimize' : 'carbon:maximize'\"\r\n              :size=\"16\"\r\n              color=\"currentColor\"\r\n            />\r\n          </template>\r\n          {{ isFullscreen ? \"退出全屏\" : \"全屏\" }}\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n    <div\r\n      ref=\"ganttContainerRef\"\r\n      class=\"gantt-container\"\r\n      :style=\"{ height: containerHeight }\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, watch, nextTick, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport {\r\n  presetConfigs,\r\n  type GanttTask,\r\n  type GanttOptions,\r\n  type GanttPreset,\r\n} from \"./data\";\r\n\r\ndefineOptions({ name: \"C_VtableGantt\" });\r\n\r\ninterface Props {\r\n  data?: GanttTask[];\r\n  options?: GanttOptions;\r\n  preset?: GanttPreset;\r\n  height?: string | number;\r\n  title?: string;\r\n  showToolbar?: boolean;\r\n  showFullscreenButton?: boolean;\r\n  theme?: \"light\" | \"dark\";\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  data: () => [],\r\n  options: () => ({}),\r\n  preset: \"basic\",\r\n  height: \"600px\",\r\n  title: \"\",\r\n  showToolbar: true,\r\n  showFullscreenButton: true,\r\n  theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  ganttCreated: [gantt: any];\r\n  taskClick: [task: GanttTask, event: Event];\r\n  taskChange: [task: GanttTask, changes: any];\r\n}>();\r\n\r\nconst ganttContainerRef = ref<HTMLDivElement>();\r\nconst ganttInstance = ref<any>();\r\nconst isFullscreen = ref(false);\r\n\r\nconst containerHeight = computed(() =>\r\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\r\n);\r\n\r\nconst deepMerge = (target: any, source: any, seen = new WeakMap()): any => {\r\n  if (!isObject(target)) return source;\r\n  if (!isObject(source)) return target;\r\n  if (seen.has(source)) return seen.get(source);\r\n  return createMergeResult(target, source, seen);\r\n};\r\n\r\nconst isObject = (value: any): boolean => {\r\n  return value !== null && typeof value === \"object\";\r\n};\r\n\r\nconst isSpecialObject = (value: any): boolean => {\r\n  return value instanceof Date || value instanceof RegExp;\r\n};\r\n\r\nconst createMergeResult = (\r\n  target: any,\r\n  source: any,\r\n  seen: WeakMap<any, any>,\r\n): any => {\r\n  const result = Array.isArray(target) ? [...target] : { ...target };\r\n  seen.set(source, result);\r\n  for (const key in source) {\r\n    if (!source.hasOwnProperty(key)) continue;\r\n    const sourceValue = source[key];\r\n    const shouldDeepMerge =\r\n      isObject(sourceValue) &&\r\n      !Array.isArray(sourceValue) &&\r\n      !isSpecialObject(sourceValue);\r\n    result[key] = shouldDeepMerge\r\n      ? deepMerge(target[key] || {}, sourceValue, seen)\r\n      : sourceValue;\r\n  }\r\n  return result;\r\n};\r\n\r\nconst processData = (data: GanttTask[]): GanttTask[] => {\r\n  return data.map((item) => ({\r\n    ...item,\r\n    title: item.title || `任务${item.id}`,\r\n    children: item.children ? processData(item.children) : undefined,\r\n  }));\r\n};\r\n\r\nconst getThemeConfig = (isDark: boolean) => ({\r\n  underlayBackgroundColor: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  timelineHeaderBg: isDark ? \"#2d2d2d\" : \"#EEF1F5\",\r\n  gridBg: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  lineColor: isDark ? \"rgba(255, 255, 255, 0.1)\" : \"rgba(128, 128, 128, 0.2)\",\r\n  textColor: isDark ? \"#ffffff\" : \"#000000\",\r\n});\r\n\r\nconst applyThemeToTimelineHeader = (timelineHeader: any, themeColors: any) => ({\r\n  ...timelineHeader,\r\n  backgroundColor: themeColors.timelineHeaderBg,\r\n  horizontalLine: {\r\n    ...timelineHeader?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...timelineHeader?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  scales: timelineHeader?.scales?.map((scale: any) => ({\r\n    ...scale,\r\n    style: {\r\n      ...scale.style,\r\n      color: themeColors.textColor,\r\n    },\r\n  })),\r\n});\r\n\r\nconst applyThemeToGrid = (grid: any, themeColors: any) => ({\r\n  ...grid,\r\n  backgroundColor: themeColors.gridBg,\r\n  horizontalLine: {\r\n    ...grid?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...grid?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n});\r\n\r\nconst buildGanttOptions = (\r\n  finalConfig: any,\r\n  processedData: GanttTask[],\r\n  tableTheme: any,\r\n  themeColors: any,\r\n) => ({\r\n  ...finalConfig,\r\n  records: processedData,\r\n  underlayBackgroundColor: themeColors.underlayBackgroundColor,\r\n  taskListTable: {\r\n    ...finalConfig.taskListTable,\r\n    theme: tableTheme,\r\n  },\r\n  timelineHeader: applyThemeToTimelineHeader(\r\n    finalConfig.timelineHeader,\r\n    themeColors,\r\n  ),\r\n  grid: applyThemeToGrid(finalConfig.grid, themeColors),\r\n});\r\n\r\nconst bindGanttEvents = (instance: any) => {\r\n  instance.on(\"click_cell\", (args: any) => {\r\n    const { record, event } = args || {};\r\n    if (record) emit(\"taskClick\", record, event);\r\n  });\r\n  instance.on(\"change_data\", (args: any) => {\r\n    const { record, changes } = args || {};\r\n    if (record && changes) emit(\"taskChange\", record, changes);\r\n  });\r\n};\r\n\r\nconst initGantt = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    const { Gantt } = await import(\"@visactor/vtable-gantt\");\r\n    const { themes } = await import(\"@visactor/vtable\");\r\n    const isDark = props.theme === \"dark\";\r\n    const presetConfig = presetConfigs[props.preset] || presetConfigs.basic;\r\n    const finalConfig = deepMerge(presetConfig, props.options);\r\n    const processedData = processData(props.data || []);\r\n    if (ganttInstance.value) ganttInstance.value.release();\r\n    const tableTheme = isDark ? themes.DARK : themes.DEFAULT;\r\n    const themeColors = getThemeConfig(isDark);\r\n    const ganttOptions = buildGanttOptions(\r\n      finalConfig,\r\n      processedData,\r\n      tableTheme,\r\n      themeColors,\r\n    );\r\n    ganttInstance.value = new Gantt(ganttContainerRef.value, ganttOptions);\r\n    bindGanttEvents(ganttInstance.value);\r\n    emit(\"ganttCreated\", ganttInstance.value);\r\n  } catch (error) {\r\n    console.error(\"甘特图初始化失败:\", error);\r\n  }\r\n};\r\n\r\nconst toggleFullscreen = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    if (!document.fullscreenElement) {\r\n      await ganttContainerRef.value.requestFullscreen();\r\n      isFullscreen.value = true;\r\n    } else {\r\n      await document.exitFullscreen();\r\n      isFullscreen.value = false;\r\n    }\r\n    setTimeout(() => ganttInstance.value?.resize?.(), 100);\r\n  } catch (error) {\r\n    console.warn(\"全屏切换失败:\", error);\r\n    isFullscreen.value = !isFullscreen.value;\r\n    nextTick(() => ganttInstance.value?.resize?.());\r\n  }\r\n};\r\n\r\nconst handleFullscreenChange = () => {\r\n  isFullscreen.value = !!document.fullscreenElement;\r\n  nextTick(() => ganttInstance.value?.resize?.());\r\n};\r\n\r\nconst updateData = (newData: GanttTask[]) => {\r\n  if (ganttInstance.value && newData) {\r\n    try {\r\n      ganttInstance.value.setRecords(processData(newData));\r\n    } catch (error) {\r\n      console.warn(\"更新数据失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst updateOptions = (newOptions: GanttOptions) => {\r\n  if (ganttInstance.value && newOptions) {\r\n    try {\r\n      ganttInstance.value.updateOption(newOptions);\r\n    } catch (error) {\r\n      console.warn(\"更新配置失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst destroyGantt = () => {\r\n  if (ganttInstance.value) {\r\n    try {\r\n      ganttInstance.value.release();\r\n    } catch (error) {\r\n      console.warn(\"销毁甘特图失败:\", error);\r\n    } finally {\r\n      ganttInstance.value = undefined;\r\n    }\r\n  }\r\n};\r\n\r\nwatch(\r\n  () => props.data,\r\n  (newData) => {\r\n    if (newData && ganttInstance.value) updateData(newData);\r\n  },\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => [props.options, props.preset],\r\n  () => nextTick(() => initGantt()),\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => props.theme,\r\n  () => nextTick(() => initGantt()),\r\n);\r\n\r\nonMounted(() => {\r\n  document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  nextTick(() => setTimeout(() => initGantt(), 100));\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  destroyGantt();\r\n});\r\n\r\ndefineExpose({\r\n  ganttInstance,\r\n  updateData,\r\n  updateOptions,\r\n  toggleFullscreen,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-08-01\r\n * @Description: VTable 甘特图组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div class=\"c-vtable-gantt-wrapper\">\r\n    <div v-if=\"showToolbar\" class=\"gantt-toolbar\">\r\n      <div class=\"toolbar-left\">\r\n        <span class=\"gantt-title\">{{ title || \"甘特图\" }}</span>\r\n      </div>\r\n      <div class=\"toolbar-right\">\r\n        <NButton\r\n          v-if=\"showFullscreenButton\"\r\n          size=\"small\"\r\n          @click=\"toggleFullscreen\"\r\n        >\r\n          <template #icon>\r\n            <C_Icon\r\n              :name=\"isFullscreen ? 'carbon:minimize' : 'carbon:maximize'\"\r\n              :size=\"16\"\r\n              color=\"currentColor\"\r\n            />\r\n          </template>\r\n          {{ isFullscreen ? \"退出全屏\" : \"全屏\" }}\r\n        </NButton>\r\n      </div>\r\n    </div>\r\n    <div\r\n      ref=\"ganttContainerRef\"\r\n      class=\"gantt-container\"\r\n      :style=\"{ height: containerHeight }\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, watch, nextTick, onMounted, onUnmounted } from \"vue\";\r\nimport { NButton } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport {\r\n  presetConfigs,\r\n  type GanttTask,\r\n  type GanttOptions,\r\n  type GanttPreset,\r\n} from \"./data\";\r\n\r\ndefineOptions({ name: \"C_VtableGantt\" });\r\n\r\ninterface Props {\r\n  data?: GanttTask[];\r\n  options?: GanttOptions;\r\n  preset?: GanttPreset;\r\n  height?: string | number;\r\n  title?: string;\r\n  showToolbar?: boolean;\r\n  showFullscreenButton?: boolean;\r\n  theme?: \"light\" | \"dark\";\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  data: () => [],\r\n  options: () => ({}),\r\n  preset: \"basic\",\r\n  height: \"600px\",\r\n  title: \"\",\r\n  showToolbar: true,\r\n  showFullscreenButton: true,\r\n  theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  ganttCreated: [gantt: any];\r\n  taskClick: [task: GanttTask, event: Event];\r\n  taskChange: [task: GanttTask, changes: any];\r\n}>();\r\n\r\nconst ganttContainerRef = ref<HTMLDivElement>();\r\nconst ganttInstance = ref<any>();\r\nconst isFullscreen = ref(false);\r\n\r\nconst containerHeight = computed(() =>\r\n  typeof props.height === \"number\" ? `${props.height}px` : props.height,\r\n);\r\n\r\nconst deepMerge = (target: any, source: any, seen = new WeakMap()): any => {\r\n  if (!isObject(target)) return source;\r\n  if (!isObject(source)) return target;\r\n  if (seen.has(source)) return seen.get(source);\r\n  return createMergeResult(target, source, seen);\r\n};\r\n\r\nconst isObject = (value: any): boolean => {\r\n  return value !== null && typeof value === \"object\";\r\n};\r\n\r\nconst isSpecialObject = (value: any): boolean => {\r\n  return value instanceof Date || value instanceof RegExp;\r\n};\r\n\r\nconst createMergeResult = (\r\n  target: any,\r\n  source: any,\r\n  seen: WeakMap<any, any>,\r\n): any => {\r\n  const result = Array.isArray(target) ? [...target] : { ...target };\r\n  seen.set(source, result);\r\n  for (const key in source) {\r\n    if (!source.hasOwnProperty(key)) continue;\r\n    const sourceValue = source[key];\r\n    const shouldDeepMerge =\r\n      isObject(sourceValue) &&\r\n      !Array.isArray(sourceValue) &&\r\n      !isSpecialObject(sourceValue);\r\n    result[key] = shouldDeepMerge\r\n      ? deepMerge(target[key] || {}, sourceValue, seen)\r\n      : sourceValue;\r\n  }\r\n  return result;\r\n};\r\n\r\nconst processData = (data: GanttTask[]): GanttTask[] => {\r\n  return data.map((item) => ({\r\n    ...item,\r\n    title: item.title || `任务${item.id}`,\r\n    children: item.children ? processData(item.children) : undefined,\r\n  }));\r\n};\r\n\r\nconst getThemeConfig = (isDark: boolean) => ({\r\n  underlayBackgroundColor: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  timelineHeaderBg: isDark ? \"#2d2d2d\" : \"#EEF1F5\",\r\n  gridBg: isDark ? \"#1e1e1e\" : \"#ffffff\",\r\n  lineColor: isDark ? \"rgba(255, 255, 255, 0.1)\" : \"rgba(128, 128, 128, 0.2)\",\r\n  textColor: isDark ? \"#ffffff\" : \"#000000\",\r\n});\r\n\r\nconst applyThemeToTimelineHeader = (timelineHeader: any, themeColors: any) => ({\r\n  ...timelineHeader,\r\n  backgroundColor: themeColors.timelineHeaderBg,\r\n  horizontalLine: {\r\n    ...timelineHeader?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...timelineHeader?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  scales: timelineHeader?.scales?.map((scale: any) => ({\r\n    ...scale,\r\n    style: {\r\n      ...scale.style,\r\n      color: themeColors.textColor,\r\n    },\r\n  })),\r\n});\r\n\r\nconst applyThemeToGrid = (grid: any, themeColors: any) => ({\r\n  ...grid,\r\n  backgroundColor: themeColors.gridBg,\r\n  horizontalLine: {\r\n    ...grid?.horizontalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n  verticalLine: {\r\n    ...grid?.verticalLine,\r\n    lineColor: themeColors.lineColor,\r\n  },\r\n});\r\n\r\nconst buildGanttOptions = (\r\n  finalConfig: any,\r\n  processedData: GanttTask[],\r\n  tableTheme: any,\r\n  themeColors: any,\r\n) => ({\r\n  ...finalConfig,\r\n  records: processedData,\r\n  underlayBackgroundColor: themeColors.underlayBackgroundColor,\r\n  taskListTable: {\r\n    ...finalConfig.taskListTable,\r\n    theme: tableTheme,\r\n  },\r\n  timelineHeader: applyThemeToTimelineHeader(\r\n    finalConfig.timelineHeader,\r\n    themeColors,\r\n  ),\r\n  grid: applyThemeToGrid(finalConfig.grid, themeColors),\r\n});\r\n\r\nconst bindGanttEvents = (instance: any) => {\r\n  instance.on(\"click_cell\", (args: any) => {\r\n    const { record, event } = args || {};\r\n    if (record) emit(\"taskClick\", record, event);\r\n  });\r\n  instance.on(\"change_data\", (args: any) => {\r\n    const { record, changes } = args || {};\r\n    if (record && changes) emit(\"taskChange\", record, changes);\r\n  });\r\n};\r\n\r\nconst initGantt = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    const { Gantt } = await import(\"@visactor/vtable-gantt\");\r\n    const { themes } = await import(\"@visactor/vtable\");\r\n    const isDark = props.theme === \"dark\";\r\n    const presetConfig = presetConfigs[props.preset] || presetConfigs.basic;\r\n    const finalConfig = deepMerge(presetConfig, props.options);\r\n    const processedData = processData(props.data || []);\r\n    if (ganttInstance.value) ganttInstance.value.release();\r\n    const tableTheme = isDark ? themes.DARK : themes.DEFAULT;\r\n    const themeColors = getThemeConfig(isDark);\r\n    const ganttOptions = buildGanttOptions(\r\n      finalConfig,\r\n      processedData,\r\n      tableTheme,\r\n      themeColors,\r\n    );\r\n    ganttInstance.value = new Gantt(ganttContainerRef.value, ganttOptions);\r\n    bindGanttEvents(ganttInstance.value);\r\n    emit(\"ganttCreated\", ganttInstance.value);\r\n  } catch (error) {\r\n    console.error(\"甘特图初始化失败:\", error);\r\n  }\r\n};\r\n\r\nconst toggleFullscreen = async () => {\r\n  if (!ganttContainerRef.value) return;\r\n  try {\r\n    if (!document.fullscreenElement) {\r\n      await ganttContainerRef.value.requestFullscreen();\r\n      isFullscreen.value = true;\r\n    } else {\r\n      await document.exitFullscreen();\r\n      isFullscreen.value = false;\r\n    }\r\n    setTimeout(() => ganttInstance.value?.resize?.(), 100);\r\n  } catch (error) {\r\n    console.warn(\"全屏切换失败:\", error);\r\n    isFullscreen.value = !isFullscreen.value;\r\n    nextTick(() => ganttInstance.value?.resize?.());\r\n  }\r\n};\r\n\r\nconst handleFullscreenChange = () => {\r\n  isFullscreen.value = !!document.fullscreenElement;\r\n  nextTick(() => ganttInstance.value?.resize?.());\r\n};\r\n\r\nconst updateData = (newData: GanttTask[]) => {\r\n  if (ganttInstance.value && newData) {\r\n    try {\r\n      ganttInstance.value.setRecords(processData(newData));\r\n    } catch (error) {\r\n      console.warn(\"更新数据失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst updateOptions = (newOptions: GanttOptions) => {\r\n  if (ganttInstance.value && newOptions) {\r\n    try {\r\n      ganttInstance.value.updateOption(newOptions);\r\n    } catch (error) {\r\n      console.warn(\"更新配置失败:\", error);\r\n    }\r\n  }\r\n};\r\n\r\nconst destroyGantt = () => {\r\n  if (ganttInstance.value) {\r\n    try {\r\n      ganttInstance.value.release();\r\n    } catch (error) {\r\n      console.warn(\"销毁甘特图失败:\", error);\r\n    } finally {\r\n      ganttInstance.value = undefined;\r\n    }\r\n  }\r\n};\r\n\r\nwatch(\r\n  () => props.data,\r\n  (newData) => {\r\n    if (newData && ganttInstance.value) updateData(newData);\r\n  },\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => [props.options, props.preset],\r\n  () => nextTick(() => initGantt()),\r\n  { deep: true },\r\n);\r\n\r\nwatch(\r\n  () => props.theme,\r\n  () => nextTick(() => initGantt()),\r\n);\r\n\r\nonMounted(() => {\r\n  document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  nextTick(() => setTimeout(() => initGantt(), 100));\r\n});\r\n\r\nonUnmounted(() => {\r\n  document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\r\n  destroyGantt();\r\n});\r\n\r\ndefineExpose({\r\n  ganttInstance,\r\n  updateData,\r\n  updateOptions,\r\n  toggleFullscreen,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
+{"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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"}

package/dist/C_WaterFall-HWB-gPON.css.map

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

package/dist/C_WaterFall2.js

@@ -1,6 +1,6 @@
 import { t as export_helper_default } from "./export-helper.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, readonly, ref, renderList, renderSlot, toDisplayString, unref, watch } from "vue";
 import { NSpin } from "naive-ui";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, readonly, ref, renderList, renderSlot, toDisplayString, unref, watch } from "vue";
 
 //#region src/components/C_WaterFall/constants.ts
 const DEFAULT_GAP = 16;
@@ -358,7 +358,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 
 //#endregion
 //#region src/components/C_WaterFall/index.vue
-var C_WaterFall_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d436c326"]]);
+var C_WaterFall_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-fd4a1e91"]]);
 
 //#endregion
 export { DEFAULT_ANIMATION_DURATION as a, DEFAULT_SKELETON_COUNT as c, useResponsiveColumns as i, INFINITE_SCROLL_THRESHOLD as l, useInfiniteScroll as n, DEFAULT_BREAKPOINTS as o, useWaterFallLayout as r, DEFAULT_GAP as s, C_WaterFall_default as t, SKELETON_HEIGHT_RANGE as u };

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