@robot-admin/naive-ui-components 0.4.3 → 0.4.4

package/dist/C_VtableGantt2.js.map

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

@@ -1,13 +1 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_C_WaterFall = require('./C_WaterFall.js');
-
-exports.C_WaterFall = require_C_WaterFall.C_WaterFall_default;
-exports.DEFAULT_ANIMATION_DURATION = require_C_WaterFall.DEFAULT_ANIMATION_DURATION;
-exports.DEFAULT_BREAKPOINTS = require_C_WaterFall.DEFAULT_BREAKPOINTS;
-exports.DEFAULT_GAP = require_C_WaterFall.DEFAULT_GAP;
-exports.DEFAULT_SKELETON_COUNT = require_C_WaterFall.DEFAULT_SKELETON_COUNT;
-exports.INFINITE_SCROLL_THRESHOLD = require_C_WaterFall.INFINITE_SCROLL_THRESHOLD;
-exports.SKELETON_HEIGHT_RANGE = require_C_WaterFall.SKELETON_HEIGHT_RANGE;
-exports.useInfiniteScroll = require_C_WaterFall.useInfiniteScroll;
-exports.useResponsiveColumns = require_C_WaterFall.useResponsiveColumns;
-exports.useWaterFallLayout = require_C_WaterFall.useWaterFallLayout;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./C_WaterFall.js`);exports.C_WaterFall=e.t,exports.DEFAULT_ANIMATION_DURATION=e.a,exports.DEFAULT_BREAKPOINTS=e.o,exports.DEFAULT_GAP=e.s,exports.DEFAULT_SKELETON_COUNT=e.c,exports.INFINITE_SCROLL_THRESHOLD=e.l,exports.SKELETON_HEIGHT_RANGE=e.u,exports.useInfiniteScroll=e.n,exports.useResponsiveColumns=e.i,exports.useWaterFallLayout=e.r;

package/dist/C_WaterFall.js

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

package/dist/C_WaterFall.js.map

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