diff --git a/.gitignore b/.gitignore index bd6bd42..a8c4af4 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,5 @@ dist-ssr Thumbs.db ehthumbs.db Desktop.ini + +yarn.lock diff --git a/demo/App.vue b/demo/App.vue index 981972a..f9c5fe9 100644 --- a/demo/App.vue +++ b/demo/App.vue @@ -910,7 +910,7 @@ function taskDebug(item: any) { .app-container { width: 100%; height: 100%; - padding: 20px; + padding: 10px; box-sizing: border-box; background: var(--gantt-bg-secondary, #f0f2f5); display: flex; @@ -922,7 +922,7 @@ function taskDebug(item: any) { background: var(--gantt-bg-primary, #ffffff); border: 1px solid var(--gantt-border-color, #e4e7ed); border-radius: 8px; - margin-bottom: 20px; + margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; overflow: hidden; @@ -1453,7 +1453,6 @@ function taskDebug(item: any) { display: flex; align-items: flex-start; justify-content: flex-start; - margin-bottom: 24px; } .license-info { diff --git a/demo/style.css b/demo/style.css index 9fe2dbe..8f20d57 100644 --- a/demo/style.css +++ b/demo/style.css @@ -26,7 +26,6 @@ body { margin: 0; min-width: 320px; height: 100vh; - padding: 30px; box-sizing: border-box; display: flex; align-items: center; diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue index e82a0d6..beb908e 100644 --- a/src/components/GanttChart.vue +++ b/src/components/GanttChart.vue @@ -137,6 +137,32 @@ const ganttRootRef = ref(null) const ganttContainerWidth = ref(1920) // 默认使用常见的屏幕宽度作为初始值 // 监听容器宽度变化 +// 节流函数工具 +const throttle = unknown>(func: T, delay: number): T => { + let lastCall = 0 + let timeoutId: number | null = null + + return ((...args: Parameters) => { + const now = Date.now() + const remaining = delay - (now - lastCall) + + if (timeoutId) { + clearTimeout(timeoutId) + } + + if (remaining <= 0) { + lastCall = now + func(...args) + } else { + timeoutId = window.setTimeout(() => { + lastCall = Date.now() + func(...args) + timeoutId = null + }, remaining) + } + }) as T +} + const updateContainerWidth = () => { if (ganttRootRef.value) { const newWidth = ganttRootRef.value.clientWidth @@ -157,14 +183,17 @@ const updateContainerWidth = () => { } } +// 创建节流版本的 updateContainerWidth,避免频繁调用 +const throttledUpdateContainerWidth = throttle(updateContainerWidth, 100) + onMounted(() => { updateContainerWidth() - // 监听窗口大小变化 - window.addEventListener('resize', updateContainerWidth) + // 使用节流版本监听窗口大小变化 + window.addEventListener('resize', throttledUpdateContainerWidth) }) onUnmounted(() => { - window.removeEventListener('resize', updateContainerWidth) + window.removeEventListener('resize', throttledUpdateContainerWidth) }) // TaskList最小宽度,支持通过taskListConfig配置(支持像素和百分比) diff --git a/src/components/GanttLinks.vue b/src/components/GanttLinks.vue new file mode 100644 index 0000000..c0e76b2 --- /dev/null +++ b/src/components/GanttLinks.vue @@ -0,0 +1,446 @@ + + + + + diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 46f890c..359b813 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -1,7 +1,8 @@