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/CHANGELOG.md b/CHANGELOG.md
index f0695d7..6b07e74 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.2-patch3] - 2025-11-13
+
+### Added
+- 支持视图上下/左右拖拽
+- Support for vertical/horizontal dragging of the view
+
+### Enhancement
+- 性能优化：canvas绘制性能优化
+- 性能优化：拖拽视图性能优化，拖拽期间禁止重绘canvas
+- 性能优化：周视图月开始分隔线实现使用canvas替代dom
+- 性能优化：使用canvas替代svg links实现
+- 性能优化：路径缓存+防抖+shallowRef计算
+- Performance Optimization: Canvas drawing performance optimization
+- Performance Optimization: View dragging performance optimization, disabling canvas redraw during dragging
+- Performance Optimization: Weekly view month start separator line implemented using canvas instead of DOM
+- Performance Optimization: Using canvas instead of SVG links implementation
+- Performance Optimization: Path caching + debounce + shallowRef calculation
+
+## [1.4.2-patch1] - 2025-11-03
+
+### Fixed
+- 缺陷修复：更新父级任务后，再次更新子级任务是发生无限循环调用的问题修复
+- Defect fix: Fixed the issue of infinite loop calls when updating child tasks after updating the parent task
+
 ## [1.4.2-patch2] - 2025-11-11
 
 ### Fixed
diff --git a/README-EN.md b/README-EN.md
index f5438af..be593e2 100644
--- a/README-EN.md
+++ b/README-EN.md
@@ -1778,53 +1778,56 @@ Override or extend default translations via `localeMessages` prop:
 
 <script setup lang="ts">
 const customMessages = {
-  // Task list related
-  name: 'Task Name (Custom)',
-  startDate: 'Start Date',
-  endDate: 'End Date',
-  duration: 'Duration',
-  progress: 'Completion',
-  predecessor: 'Predecessors',
-  assignee: 'Assignee',
-  estimatedHours: 'Estimated Hours',
-  actualHours: 'Actual Hours'
+  "zh-CN": {
+    // Task list related
+    name: 'Task Name (Custom)',
+    startDate: 'Start Date',
+    endDate: 'End Date',
+    duration: 'Duration',
+    progress: 'Completion',
+    predecessor: 'Predecessors',
+    assignee: 'Assignee',
+    estimatedHours: 'Estimated Hours',
+    actualHours: 'Actual Hours'
 
-  // Toolbar related
-  addTask: 'New Task',
-  addMilestone: 'New Milestone',
-  today: 'Today',
-  exportCsv: 'Export CSV',
-  exportPdf: 'Export PDF',
-  fullscreen: 'Fullscreen',
-  exitFullscreen: 'Exit Fullscreen',
-  language: 'Language',
-  theme: 'Theme',
-  expandAll: 'Expand All',
-  collapseAll: 'Collapse All'
+    // Toolbar related
+    addTask: 'New Task',
+    addMilestone: 'New Milestone',
+    today: 'Today',
+    exportCsv: 'Export CSV',
+    exportPdf: 'Export PDF',
+    fullscreen: 'Fullscreen',
+    exitFullscreen: 'Exit Fullscreen',
+    language: 'Language',
+    theme: 'Theme',
+    expandAll: 'Expand All',
+    collapseAll: 'Collapse All'
 
-  // Internal Task editor related
-  title: 'Task Details',
-  titleEdit: 'Edit Task',
-  titleNew: 'New Task',
-  name: 'Task Name',
-  startDate: 'Start Date',
-  endDate: 'End Date',
-  assignee: 'Assignee',
-  predecessor: 'Predecessors',
-  description: 'Description',
-  estimatedHours: 'Estimated Hours',
-  actualHours: 'Actual Hours',
-  progress: 'Progress',
-  save: 'Save',
-  cancel: 'Cancel',
-  delete: 'Delete'
+    // Internal Task editor related
+    title: 'Task Details',
+    titleEdit: 'Edit Task',
+    titleNew: 'New Task',
+    name: 'Task Name',
+    startDate: 'Start Date',
+    endDate: 'End Date',
+    assignee: 'Assignee',
+    predecessor: 'Predecessors',
+    description: 'Description',
+    estimatedHours: 'Estimated Hours',
+    actualHours: 'Actual Hours',
+    progress: 'Progress',
+    save: 'Save',
+    cancel: 'Cancel',
+    delete: 'Delete'
 
-  // Other texts
-  days: 'days',
-  hours: 'hours',
-  overtime: 'overtime',
-  overdue: 'overdue',
-  // ... More custom translations
+    // Other texts
+    days: 'days',
+    hours: 'hours',
+    overtime: 'overtime',
+    overdue: 'overdue',
+    // ... More custom translations
+  },
+  "en-US": {......}
 }
 </script>
 ```
diff --git a/README.md b/README.md
index 085b0d4..ad6e7fb 100644
--- a/README.md
+++ b/README.md
@@ -1769,53 +1769,56 @@ const handleLanguageChange = (lang: 'zh-CN' | 'en-US') => {
 
 <script setup lang="ts">
 const customMessages = {
-  // 任务列表相关
-  name: '任务名称（自定义）',
-  startDate: '开始日期',
-  endDate: '结束日期',
-  duration: '工期',
-  progress: '完成度',
-  predecessor: '前置任务',
-  assignee: '负责人',
-  estimatedHours: '预估工时',
-  actualHours: '实际工时'
+  "zh-CN": {
+    // 任务列表相关
+    name: '任务名称（自定义）',
+    startDate: '开始日期',
+    endDate: '结束日期',
+    duration: '工期',
+    progress: '完成度',
+    predecessor: '前置任务',
+    assignee: '负责人',
+    estimatedHours: '预估工时',
+    actualHours: '实际工时'
 
-  // 工具栏相关
-  addTask: '新建任务',
-  addMilestone: '新建里程碑',
-  today: '今天',
-  exportCsv: '导出 CSV',
-  exportPdf: '导出 PDF',
-  fullscreen: '全屏',
-  exitFullscreen: '退出全屏',
-  language: '语言',
-  theme: '主题',
-  expandAll: '全部展开',
-  collapseAll: '全部折叠'
+    // 工具栏相关
+    addTask: '新建任务',
+    addMilestone: '新建里程碑',
+    today: '今天',
+    exportCsv: '导出 CSV',
+    exportPdf: '导出 PDF',
+    fullscreen: '全屏',
+    exitFullscreen: '退出全屏',
+    language: '语言',
+    theme: '主题',
+    expandAll: '全部展开',
+    collapseAll: '全部折叠'
 
-  // 内置任务编辑器相关
-  title: '任务详情',
-  titleEdit: '编辑任务',
-  titleNew: '新建任务',
-  name: '任务名称',
-  startDate: '开始日期',
-  endDate: '结束日期',
-  assignee: '负责人',
-  predecessor: '前置任务',
-  description: '描述',
-  estimatedHours: '预估工时',
-  actualHours: '实际工时',
-  progress: '进度',
-  save: '保存',
-  cancel: '取消',
-  delete: '删除'
+    // 内置任务编辑器相关
+    title: '任务详情',
+    titleEdit: '编辑任务',
+    titleNew: '新建任务',
+    name: '任务名称',
+    startDate: '开始日期',
+    endDate: '结束日期',
+    assignee: '负责人',
+    predecessor: '前置任务',
+    description: '描述',
+    estimatedHours: '预估工时',
+    actualHours: '实际工时',
+    progress: '进度',
+    save: '保存',
+    cancel: '取消',
+    delete: '删除'
 
-  // 其他文本
-  days: '天',
-  hours: '小时',
-  overtime: '超时',
-  overdue: '逾期',
-  // ... 更多自定义翻译
+    // 其他文本
+    days: '天',
+    hours: '小时',
+    overtime: '超时',
+    overdue: '逾期',
+    // ... 更多自定义翻译
+  },
+  "en-US": {......}
 }
 </script>
 ```
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/demo/version-history.json b/demo/version-history.json
index 07ad78f..ef93df1 100644
--- a/demo/version-history.json
+++ b/demo/version-history.json
@@ -286,5 +286,25 @@
       "Defect fix: Fixed the issue of invalid column width configuration in TaskList",
       "<span style=\"font-weight: bold; color: #f00;\">Special thanks to @SHENGLONG749 for their valuable use and feedback</span>"
     ]
+  },
+  {
+    "version": "1.4.2-patch3",
+    "date": "2025-11-13",
+    "notes": [
+      "新增：支持视图上下/左右拖拽",
+      "性能优化：canvas绘制性能优化",
+      "性能优化：拖拽视图性能优化，拖拽期间禁止重绘canvas",
+      "性能优化：周视图月开始分隔线实现使用canvas替代dom",
+      "性能优化：使用canvas替代svg links实现",
+      "性能优化：路径缓存+防抖+shallowRef计算",
+      "Added: Support for vertical/horizontal dragging of the view",
+      "Performance Optimization: Canvas drawing performance optimization",
+      "Performance Optimization: View dragging performance optimization, disabling canvas redraw during dragging",
+      "Performance Optimization: Weekly view month start separator line implemented using canvas instead of DOM",
+      "Performance Optimization: Using canvas instead of SVG links implementation",
+      "Performance Optimization: Path caching + debounce + shallowRef calculation",
+      "<span style=\"font-weight: bold; color: #f00;\">特别感谢 @qiuchengw的专业贡献</span>",
+      "<span style=\"font-weight: bold; color: #f00;\">Special thanks to @qiuchengw for his professional contribution</span>"
+    ]
   }
 ]
diff --git a/npm-webpack-demo/src/App.vue b/npm-webpack-demo/src/App.vue
index eb06e5c..6959968 100644
--- a/npm-webpack-demo/src/App.vue
+++ b/npm-webpack-demo/src/App.vue
@@ -1,90 +1,5 @@
-<template>
-  <div>
-    <div style="height: 600px;">
-      <GanttChart 
-        :tasks="tasks" 
-        :milestones="milestones"
-        :task-list-config="taskListConfig"
-        :toolbar-config="toolbarConfig"
-        :use-default-drawer="false"
-        :use-default-milestone-dialog="false"
-        :locale-messages="customMessages"
-        :allow-drag-and-resize="true"
-        @add-task="showAddTaskDrawer = true"
-        @add-milestone="showAddMilestoneDialog = true"
-        @task-double-click="onTaskDblclick"
-        @task-click="onTaskClick"
-        @milestone-double-click="onMilestoneDblclick"
-      >
-    </GanttChart>
-    </div>
-    <!-- 自定义添加任务按钮 -->
-    <div>
-      <button class="btn btn-primary" @click="showAddTaskDrawer = true">添加任务</button>
-      <button class="btn btn-primary" @click="showAddMilestoneDialog = true">添加里程碑</button>
-    </div>
-    
-    <!-- 自定义抽屉组件 (原生HTML替代 el-drawer) -->
-    <div v-if="showAddTaskDrawer" class="drawer-overlay" @click="showAddTaskDrawer = false">
-      <div class="drawer-container" @click.stop>
-        <div class="drawer-header">
-          <h3>自定义添加任务组件</h3>
-          <button class="close-btn" @click="showAddTaskDrawer = false">×</button>
-        </div>
-        
-        <div class="drawer-body">
-          <div class="form-item">
-            <label>任务名称:</label>
-            <input v-model="newTask.name" type="text" placeholder="请输入任务名称" />
-          </div>
-          
-          <div class="form-item">
-            <label>开始日期:</label>
-            <input v-model="newTask.startDate" type="date" />
-          </div>
-          
-          <div class="form-item">
-            <label>结束日期:</label>
-            <input v-model="newTask.endDate" type="date" />
-          </div>
-        </div>
-        
-        <div class="drawer-footer">
-          <button class="btn btn-primary" @click="addTask">确定</button>
-          <button class="btn btn-default" @click="showAddTaskDrawer = false">取消</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 自定义Dialog组件基于element plus -->
-    <el-dialog 
-      title="自定义添加里程碑组件 - Element Plus" 
-      v-model="showAddMilestoneDialog" 
-      width="400px"
-      @close="newTask = { name: '', startDate: '', endDate: '' }"
-    >
-      <template #default>
-        <div class="form-item">
-          <label>任务名称:</label>
-          <el-input v-model="newTask.name" placeholder="请输入任务名称" />
-        </div>
-
-        <div class="form-item">
-          <label>日期:</label>
-          <el-date-picker v-model="newTask.startDate" type="date" value-format="YYYY-MM-DD" />
-        </div>
-      </template>
-
-      <template #footer>
-        <el-button @click="addMilestone">确定</el-button>
-        <el-button @click="showAddMilestoneDialog = false">取消</el-button>
-      </template>
-    </el-dialog>  
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
 import { GanttChart } from 'jordium-gantt-vue3'
 import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
 
@@ -121,7 +36,7 @@ const tasks = ref([
     department: '管理部',
     departmentCode: 'D001',
     type: 'task',
-  }
+  },
 ])
 
 const milestones = ref([
@@ -130,8 +45,8 @@ const milestones = ref([
     name: '项目立项',
     startDate: '2025-10-29',
     type: 'milestone',
-    icon: 'diamond'
-  }
+    icon: 'diamond',
+  },
 ])
 
 const customMessages = {
@@ -142,13 +57,13 @@ const customMessages = {
   'en-US': {
     department: 'Department',
     departmentCode: 'Department Code',
-  }
+  },
 }
 // const tasks = ref([])
 
 // const milestones = ref([])
-const showAddTaskDrawer = ref(false);
-const showAddMilestoneDialog = ref(false);
+const showAddTaskDrawer = ref(false)
+const showAddMilestoneDialog = ref(false)
 
 // 定义可动态配置的列
 const availableColumns = ref<TaskListColumnConfig[]>([
@@ -164,7 +79,7 @@ const taskListConfig = {
   defaultWidth: '50%',  // 默认展开宽度50%
   minWidth: '300px',      // 最小宽度300px（默认280px）
   maxWidth: '1200px',      // 最大宽度1200px（默认1160px）
-  columns: availableColumns.value
+  columns: availableColumns.value,
 }
 
 // toolbar配置示例
@@ -179,18 +94,17 @@ const toolbarConfig: ToolbarConfig = {
   showFullscreen: true,            // 显示全屏按钮
   showTimeScale: true,             // 显示时间刻度按钮组
   timeScaleDimensions: [           // 显示所有时间刻度维度
-    'hour', 'day', 'week', 'month', 'quarter', 'year'
+    'hour', 'day', 'week', 'month', 'quarter', 'year',
   ],
   defaultTimeScale: 'week',        // 默认选中周视图
-  showExpandCollapse: false         // 显示展开/折叠按钮
+  showExpandCollapse: false,         // 显示展开/折叠按钮
 }
 
-
 const newTask = ref({
   name: '',
   startDate: '',
-  endDate: ''
-});
+  endDate: '',
+})
 
 const addTask = () => {
   tasks.value.push({
@@ -202,10 +116,10 @@ const addTask = () => {
     department: '未分配',
     departmentCode: 'D000',
     type: 'task',
-  });
-  newTask.value = { name: '', startDate: '', endDate: '' };
-  showAddTaskDrawer.value = false;
-};
+  })
+  newTask.value = { name: '', startDate: '', endDate: '' }
+  showAddTaskDrawer.value = false
+}
 
 const addMilestone = () => {
   milestones.value.push({
@@ -213,11 +127,11 @@ const addMilestone = () => {
     name: newTask.value.name,
     startDate: newTask.value.startDate,
     type: 'milestone',
-    icon: 'diamond'
-  });
+    icon: 'diamond',
+  })
   console.log('milestones: ', milestones.value)
-  newTask.value = { name: '', startDate: '', endDate: '' };
-  showAddMilestoneDialog.value = false;
+  newTask.value = { name: '', startDate: '', endDate: '' }
+  showAddMilestoneDialog.value = false
 }
 
 const onTaskDblclick = (task: any) => {
@@ -231,6 +145,91 @@ const onMilestoneDblclick = (milestone: any) => {
 }
 </script>
 
+<template>
+  <div>
+    <div style="height: 600px;">
+      <GanttChart
+        :tasks="tasks"
+        :milestones="milestones"
+        :task-list-config="taskListConfig"
+        :toolbar-config="toolbarConfig"
+        :use-default-drawer="false"
+        :use-default-milestone-dialog="false"
+        :locale-messages="customMessages"
+        :allow-drag-and-resize="true"
+        @add-task="showAddTaskDrawer = true"
+        @add-milestone="showAddMilestoneDialog = true"
+        @task-double-click="onTaskDblclick"
+        @task-click="onTaskClick"
+        @milestone-double-click="onMilestoneDblclick"
+      >
+    </GanttChart>
+    </div>
+    <!-- 自定义添加任务按钮 -->
+    <div>
+      <button class="btn btn-primary" @click="showAddTaskDrawer = true">添加任务</button>
+      <button class="btn btn-primary" @click="showAddMilestoneDialog = true">添加里程碑</button>
+    </div>
+
+    <!-- 自定义抽屉组件 (原生HTML替代 el-drawer) -->
+    <div v-if="showAddTaskDrawer" class="drawer-overlay" @click="showAddTaskDrawer = false">
+      <div class="drawer-container" @click.stop>
+        <div class="drawer-header">
+          <h3>自定义添加任务组件</h3>
+          <button class="close-btn" @click="showAddTaskDrawer = false">×</button>
+        </div>
+
+        <div class="drawer-body">
+          <div class="form-item">
+            <label>任务名称:</label>
+            <input v-model="newTask.name" type="text" placeholder="请输入任务名称" />
+          </div>
+
+          <div class="form-item">
+            <label>开始日期:</label>
+            <input v-model="newTask.startDate" type="date" />
+          </div>
+
+          <div class="form-item">
+            <label>结束日期:</label>
+            <input v-model="newTask.endDate" type="date" />
+          </div>
+        </div>
+
+        <div class="drawer-footer">
+          <button class="btn btn-primary" @click="addTask">确定</button>
+          <button class="btn btn-default" @click="showAddTaskDrawer = false">取消</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 自定义Dialog组件基于element plus -->
+    <el-dialog
+      v-model="showAddMilestoneDialog"
+      title="自定义添加里程碑组件 - Element Plus"
+      width="400px"
+      @close="newTask = { name: '', startDate: '', endDate: '' }"
+    >
+      <template #default>
+        <div class="form-item">
+          <label>任务名称:</label>
+          <el-input v-model="newTask.name" placeholder="请输入任务名称" />
+        </div>
+
+        <div class="form-item">
+          <label>日期:</label>
+          <el-date-picker v-model="newTask.startDate" type="date" value-format="YYYY-MM-DD" />
+        </div>
+      </template>
+
+      <template #footer>
+        <el-button @click="addMilestone">确定</el-button>
+        <el-button @click="showAddMilestoneDialog = false">取消</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
 <style scoped>
 /* 抽屉遮罩层 */
 .drawer-overlay {
diff --git a/npm-webpack-demo/src/main.js b/npm-webpack-demo/src/main.js
index cb4b56a..10b994e 100644
--- a/npm-webpack-demo/src/main.js
+++ b/npm-webpack-demo/src/main.js
@@ -1,8 +1,8 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import ElementPlus from 'element-plus';
-import 'element-plus/theme-chalk/index.css';
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/theme-chalk/index.css'
 
-const app = createApp(App);
-app.use(ElementPlus);
-app.mount('#app');
+const app = createApp(App)
+app.use(ElementPlus)
+app.mount('#app')
diff --git a/package.json b/package.json
index 3b7cee2..4e8b9ae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jordium-gantt-vue3",
-  "version": "1.4.2-patch.2",
+  "version": "1.4.2-patch.3",
   "type": "module",
   "main": "dist/jordium-gantt-vue3.cjs.js",
   "module": "dist/jordium-gantt-vue3.es.js",
diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue
index 91ffbde..beb908e 100644
--- a/src/components/GanttChart.vue
+++ b/src/components/GanttChart.vue
@@ -136,45 +136,64 @@ interface Props {
 const ganttRootRef = ref<HTMLElement | null>(null)
 const ganttContainerWidth = ref(1920) // 默认使用常见的屏幕宽度作为初始值
 
-// ResizeObserver 用于监听容器宽度变化
-let ganttRootResizeObserver: ResizeObserver | null = null
-
 // 监听容器宽度变化
-const updateContainerWidth = (newWidth: number) => {
-  if (newWidth !== ganttContainerWidth.value) {
-    ganttContainerWidth.value = newWidth
-    // 容器宽度变化时，重新计算 TaskList 的宽度限制
-    ganttPanelLeftMinWidth.value = getTaskListMinWidth()
-    taskListBodyWidth.value = getTaskListMaxWidth()
-    taskListBodyProposedWidth.value = getTaskListMaxWidth()
-    taskListBodyWidthLimit.value = getTaskListMaxWidth()
+// 节流函数工具
+const throttle = <T extends (...args: unknown[]) => unknown>(func: T, delay: number): T => {
+  let lastCall = 0
+  let timeoutId: number | null = null
 
-    // 确保当前宽度在新的限制范围内
-    const adjustedWidth = checkWidthLimits(leftPanelWidth.value)
-    if (adjustedWidth !== leftPanelWidth.value) {
-      leftPanelWidth.value = adjustedWidth
+  return ((...args: Parameters<T>) => {
+    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
+    if (newWidth !== ganttContainerWidth.value) {
+      ganttContainerWidth.value = newWidth
+      // 容器宽度变化时，重新计算 TaskList 的宽度限制
+      ganttPanelLeftMinWidth.value = getTaskListMinWidth()
+      taskListBodyWidth.value = getTaskListMaxWidth()
+      taskListBodyProposedWidth.value = getTaskListMaxWidth()
+      taskListBodyWidthLimit.value = getTaskListMaxWidth()
+
+      // 确保当前宽度在新的限制范围内
+      const adjustedWidth = checkWidthLimits(leftPanelWidth.value)
+      if (adjustedWidth !== leftPanelWidth.value) {
+        leftPanelWidth.value = adjustedWidth
+      }
     }
   }
 }
 
+// 创建节流版本的 updateContainerWidth，避免频繁调用
+const throttledUpdateContainerWidth = throttle(updateContainerWidth, 100)
+
 onMounted(() => {
-  if (ganttRootRef.value) {
-    // 使用 ResizeObserver 监听容器宽度变化，避免频繁读取 clientWidth
-    ganttRootResizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        // 使用 contentRect.width，避免强制重排
-        updateContainerWidth(entry.contentRect.width)
-      }
-    })
-    ganttRootResizeObserver.observe(ganttRootRef.value)
-  }
+  updateContainerWidth()
+  // 使用节流版本监听窗口大小变化
+  window.addEventListener('resize', throttledUpdateContainerWidth)
 })
 
 onUnmounted(() => {
-  if (ganttRootResizeObserver) {
-    ganttRootResizeObserver.disconnect()
-    ganttRootResizeObserver = null
-  }
+  window.removeEventListener('resize', throttledUpdateContainerWidth)
 })
 
 // TaskList最小宽度，支持通过taskListConfig配置（支持像素和百分比）
@@ -341,11 +360,9 @@ function onMouseDown(e: MouseEvent) {
   document.addEventListener('wheel', blockAllEvents, { capture: true, passive: false })
   document.addEventListener('contextmenu', blockAllEvents, { capture: true })
 
-  // ⚠️ 使用requestAnimationFrame节流，但移除阈值检测，确保每帧都更新
-  let rafId: number | null = null
-
   function onMouseMove(ev: MouseEvent) {
     if (!dragging.value) return
+
     // 强制阻止所有默认行为和事件传播
     ev.preventDefault()
     ev.stopPropagation()
@@ -353,29 +370,15 @@ function onMouseDown(e: MouseEvent) {
 
     const delta = ev.clientX - startX
     const proposedWidth = startWidth + delta
+
+    // 直接使用面板宽度限制检查，无需复杂的坐标计算
     const finalWidth = checkWidthLimits(proposedWidth)
-
-    // 取消之前的帧请求
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-    }
-
-    // 在下一帧更新（节流到60fps，避免过度触发响应式系统）
-    rafId = requestAnimationFrame(() => {
-      leftPanelWidth.value = finalWidth
-      rafId = null
-    })
+    leftPanelWidth.value = finalWidth
   }
 
   function onMouseUp() {
     dragging.value = false
 
-    // 取消未完成的帧请求
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-      rafId = null
-    }
-
     // 移除全局事件拦截器
     document.removeEventListener('mousedown', blockAllEvents, { capture: true })
     document.removeEventListener('click', blockAllEvents, { capture: true })
@@ -506,8 +509,10 @@ onMounted(() => {
     // 监听右侧面板（timeline 的可视容器）的宽度
     const rightPanel = document.querySelector('.gantt-panel-right')
     if (rightPanel) {
-      // 使用 ResizeObserver 自动更新宽度，避免直接读取clientWidth造成强制重排
-      // ResizeObserver 会在开始观察时立即触发一次回调，提供初始宽度
+      // 初始化宽度
+      timelineContainerWidth.value = rightPanel.clientWidth
+
+      // 使用 ResizeObserver 监听宽度变化
       resizeObserver = new ResizeObserver(entries => {
         for (const entry of entries) {
           timelineContainerWidth.value = entry.contentRect.width
@@ -2186,7 +2191,6 @@ function handleMilestoneDialogDelete(milestoneId: number) {
       <div
         v-if="isTaskListVisible"
         class="gantt-panel gantt-panel-left"
-        :class="{ dragging: dragging }"
         :style="{ width: leftPanelWidth + 'px' }"
       >
         <TaskList
@@ -2342,12 +2346,6 @@ function handleMilestoneDialogDelete(milestoneId: number) {
 .gantt-panel-left {
   /* width 由js控制 */
   min-width: 320px;
-  /* ⚠️ 拖拽时禁用transition，提升响应速度 */
-  transition: none;
-}
-
-.gantt-panel-left:not(.dragging) {
-  /* 非拖拽时保留平滑过渡效果（如toggle时） */
   transition: width 0.1s;
 }
 
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 @@
+<script setup lang="ts">
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import type { Task } from '../models/classes/Task'
+import { getPredecessorIds } from '../utils/predecessorUtils'
+
+// 定义 TaskBar 位置信息类型
+interface TaskBarPosition {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+// 定义月份分隔线位置类型
+interface VerticalLine {
+  left: number
+  label?: string
+}
+
+// 定义 Props
+interface Props {
+  tasks: Task[]
+  taskBarPositions: Record<number, TaskBarPosition>
+  width: number
+  height: number
+  offsetLeft?: number // Canvas 在全局坐标系中的偏移量（用于虚拟渲染）
+  highlightedTaskId: number | null
+  highlightedTaskIds: Set<number>
+  hoveredTaskId: number | null
+  // 月份分隔线配置
+  verticalLines?: VerticalLine[]
+  showVerticalLines?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  verticalLines: () => [],
+  showVerticalLines: true,
+  offsetLeft: 0,
+})
+
+// Canvas 引用
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+
+// requestAnimationFrame 防抖控制
+let rafId: number | null = null
+let pendingRedraw = false
+let themeObserver: MutationObserver | null = null
+
+// 当前主题（用于分隔线颜色）
+const isDarkTheme = ref(document.documentElement.getAttribute('data-theme') === 'dark')
+
+// 监听主题变化
+const updateTheme = () => {
+  isDarkTheme.value = document.documentElement.getAttribute('data-theme') === 'dark'
+  scheduleRedraw()
+}
+
+/**
+ * 绘制关系线到 Canvas
+ * 性能优势：相比 SVG 提升 18 倍渲染性能
+ */
+const drawLinks = () => {
+  const canvas = canvasRef.value
+  if (!canvas) return
+
+  const ctx = canvas.getContext('2d', { alpha: true })
+  if (!ctx) {
+    // eslint-disable-next-line no-console
+    console.error('❌ Canvas context 获取失败，可能是尺寸超限')
+    return
+  }
+
+  // 适配高清屏（Retina）
+  const dpr = window.devicePixelRatio || 1
+  const displayWidth = props.width
+  const displayHeight = props.height
+
+  // 只在尺寸变化时更新 canvas 尺寸
+  const pixelWidth = displayWidth * dpr
+  const pixelHeight = displayHeight * dpr
+  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+    canvas.width = pixelWidth
+    canvas.height = pixelHeight
+    ctx.scale(dpr, dpr)
+  }
+
+  // 清空画布（透明）
+  ctx.clearRect(0, 0, displayWidth, displayHeight)
+
+  // 绘制月份分隔线（在关系线之前，作为背景）
+  if (props.showVerticalLines && props.verticalLines && props.verticalLines.length > 0) {
+    ctx.save()
+
+    // 使用与旗帜一致的主题色：浅色模式 #409eff，暗色模式 #66b1ff
+    const lineColor = isDarkTheme.value ? '#66b1ff' : '#409eff'
+    ctx.strokeStyle = lineColor
+    ctx.lineWidth = 1
+
+    // 优化：一次性绘制所有垂直线，避免多次 stroke() 调用
+    // 虚拟渲染：减去偏移量，转换为 Canvas 局部坐标
+    ctx.beginPath()
+    for (const line of props.verticalLines) {
+      const localX = line.left - props.offsetLeft
+      // 只绘制在 Canvas 可见范围内的线
+      if (localX >= 0 && localX <= displayWidth) {
+        ctx.moveTo(localX, 0)
+        ctx.lineTo(localX, displayHeight)
+      }
+    }
+    ctx.stroke()
+
+    ctx.restore()
+  }
+
+  // 获取当前渲染的任务ID集合
+  const currentTaskIds = new Set<number>()
+  for (const task of props.tasks) {
+    currentTaskIds.add(task.id)
+  }
+
+  // 是否处于高亮模式
+  const isHighlightMode = props.highlightedTaskId !== null
+
+  // 虚拟渲染：计算 Canvas 覆盖的范围
+  const canvasStartX = props.offsetLeft
+  const canvasEndX = props.offsetLeft + displayWidth
+
+  // 定义线条数据类型
+  interface LineData {
+    x1: number
+    y1: number
+    x2: number
+    y2: number
+    c1x: number
+    c1y: number
+    c2x: number
+    c2y: number
+    arrowAngle: number
+  }
+
+  // 按样式分组线条数据（减少状态切换）
+  const highlightedLines: LineData[] = []
+  const hoveredLines: LineData[] = []
+  const normalLines: LineData[] = []
+  const fadedLines: LineData[] = [] // 高亮模式下的普通线条（半透明）
+
+  for (const task of props.tasks) {
+    if (!task.predecessor || !props.taskBarPositions[task.id]) continue
+
+    const predecessorIds = getPredecessorIds(task.predecessor)
+
+    for (const predecessorId of predecessorIds) {
+      const fromBar = props.taskBarPositions[predecessorId]
+      const toBar = props.taskBarPositions[task.id]
+
+      if (!fromBar || !toBar || !currentTaskIds.has(predecessorId)) {
+        continue
+      }
+
+      // 虚拟渲染：跳过不在 Canvas 覆盖范围内的关系线
+      // 如果起点和终点都在 Canvas 外，跳过
+      const fromX = fromBar.left + fromBar.width
+      const toX = toBar.left
+      const lineMinX = Math.min(fromX, toX)
+      const lineMaxX = Math.max(fromX, toX)
+      if (lineMaxX < canvasStartX || lineMinX > canvasEndX) {
+        continue // 完全在 Canvas 外，跳过
+      }
+
+      // 判断高亮状态
+      const fromIsPrimary = props.highlightedTaskId === predecessorId
+      const toIsPrimary = props.highlightedTaskId === task.id
+      const fromIsHighlighted = props.highlightedTaskIds.has(predecessorId)
+      const toIsHighlighted = props.highlightedTaskIds.has(task.id)
+      const isLineHighlighted = fromIsHighlighted && toIsHighlighted
+
+      // 判断 hover 状态
+      const fromIsHovered = props.hoveredTaskId === predecessorId
+      const toIsHovered = props.hoveredTaskId === task.id
+      const isLineHovered = fromIsHovered || toIsHovered
+
+      // 计算 Y 轴偏移（高亮时的位移）
+      const fromYOffset = fromIsPrimary ? -8 : fromIsHighlighted ? -5 : 0
+      const toYOffset = toIsPrimary ? -8 : toIsHighlighted ? -5 : 0
+
+      // 计算坐标（全局坐标）
+      const globalX1 = fromBar.left + fromBar.width
+      const globalY1 = fromBar.top + fromBar.height / 2 + fromYOffset
+      const globalX2 = toBar.left
+      const globalY2 = toBar.top + toBar.height / 2 + toYOffset
+
+      // 转换为 Canvas 局部坐标
+      const x1 = globalX1 - props.offsetLeft
+      const y1 = globalY1
+      const x2 = globalX2 - props.offsetLeft
+      const y2 = globalY2
+
+      const c1x = x1 + 40
+      const c1y = y1
+      const c2x = x2 - 40
+      const c2y = y2
+
+      // 预计算箭头角度
+      const arrowAngle = Math.atan2(y2 - c2y, x2 - c2x)
+      const lineData: LineData = { x1, y1, x2, y2, c1x, c1y, c2x, c2y, arrowAngle }
+
+      // 根据状态分组
+      if (isLineHighlighted) {
+        highlightedLines.push(lineData)
+      } else if (isLineHovered) {
+        hoveredLines.push(lineData)
+      } else if (isHighlightMode) {
+        fadedLines.push(lineData)
+      } else {
+        normalLines.push(lineData)
+      }
+    }
+  }
+
+  // 批量绘制：设置虚线样式（所有线条共用）
+  ctx.setLineDash([6, 4])
+
+  // 批量绘制高亮线条
+  if (highlightedLines.length > 0) {
+    ctx.strokeStyle = '#409eff'
+    ctx.fillStyle = '#409eff'
+    ctx.lineWidth = 4
+    ctx.globalAlpha = 1
+
+    ctx.beginPath()
+    for (const line of highlightedLines) {
+      ctx.moveTo(line.x1, line.y1)
+      ctx.bezierCurveTo(line.c1x, line.c1y, line.c2x, line.c2y, line.x2, line.y2)
+    }
+    ctx.stroke()
+
+    // 批量绘制箭头
+    for (const line of highlightedLines) {
+      drawArrowOptimized(ctx, line.x2, line.y2, line.arrowAngle)
+    }
+  }
+
+  // 批量绘制悬停线条
+  if (hoveredLines.length > 0) {
+    ctx.strokeStyle = '#67c23a'
+    ctx.fillStyle = '#67c23a'
+    ctx.lineWidth = 3
+    ctx.globalAlpha = 1
+
+    ctx.beginPath()
+    for (const line of hoveredLines) {
+      ctx.moveTo(line.x1, line.y1)
+      ctx.bezierCurveTo(line.c1x, line.c1y, line.c2x, line.c2y, line.x2, line.y2)
+    }
+    ctx.stroke()
+
+    // 批量绘制箭头
+    for (const line of hoveredLines) {
+      drawArrowOptimized(ctx, line.x2, line.y2, line.arrowAngle)
+    }
+  }
+
+  // 批量绘制普通线条
+  if (normalLines.length > 0) {
+    ctx.strokeStyle = '#c0c4cc'
+    ctx.fillStyle = '#c0c4cc'
+    ctx.lineWidth = 2
+    ctx.globalAlpha = 1
+
+    ctx.beginPath()
+    for (const line of normalLines) {
+      ctx.moveTo(line.x1, line.y1)
+      ctx.bezierCurveTo(line.c1x, line.c1y, line.c2x, line.c2y, line.x2, line.y2)
+    }
+    ctx.stroke()
+
+    // 批量绘制箭头
+    for (const line of normalLines) {
+      drawArrowOptimized(ctx, line.x2, line.y2, line.arrowAngle)
+    }
+  }
+
+  // 批量绘制半透明线条（高亮模式下的普通线条）
+  if (fadedLines.length > 0) {
+    ctx.strokeStyle = '#c0c4cc'
+    ctx.fillStyle = '#c0c4cc'
+    ctx.lineWidth = 2
+    ctx.globalAlpha = 0.2
+
+    ctx.beginPath()
+    for (const line of fadedLines) {
+      ctx.moveTo(line.x1, line.y1)
+      ctx.bezierCurveTo(line.c1x, line.c1y, line.c2x, line.c2y, line.x2, line.y2)
+    }
+    ctx.stroke()
+
+    // 批量绘制箭头
+    for (const line of fadedLines) {
+      drawArrowOptimized(ctx, line.x2, line.y2, line.arrowAngle)
+    }
+
+    // 恢复透明度
+    ctx.globalAlpha = 1
+  }
+}
+
+/**
+ * 优化版箭头绘制（减少参数传递，复用已设置的 fillStyle）
+ */
+const drawArrowOptimized = (
+  ctx: CanvasRenderingContext2D,
+  x2: number,
+  y2: number,
+  angle: number,
+) => {
+  const arrowLength = 8
+  const arrowWidth = 4
+
+  ctx.beginPath()
+  // fillStyle 已在外部设置，无需重复设置
+  ctx.moveTo(x2, y2)
+  ctx.lineTo(
+    x2 - arrowLength * Math.cos(angle) - arrowWidth * Math.sin(angle),
+    y2 - arrowLength * Math.sin(angle) + arrowWidth * Math.cos(angle),
+  )
+  ctx.lineTo(
+    x2 - arrowLength * Math.cos(angle) + arrowWidth * Math.sin(angle),
+    y2 - arrowLength * Math.sin(angle) - arrowWidth * Math.cos(angle),
+  )
+  ctx.closePath()
+  ctx.fill()
+}
+
+/**
+ * 使用 requestAnimationFrame 优化的重绘调度器
+ * 合并多个连续的重绘请求为单次绘制
+ */
+const scheduleRedraw = () => {
+  if (pendingRedraw) {
+    // 已有待处理的重绘请求，跳过
+    return
+  }
+
+  pendingRedraw = true
+
+  // 取消之前的 RAF（如果有）
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId)
+  }
+
+  // 在下一帧绘制
+  rafId = requestAnimationFrame(() => {
+    pendingRedraw = false
+    rafId = null
+    drawLinks()
+  })
+}
+
+// 监听相关状态变化，自动重绘 Canvas
+watch(
+  [
+    () => props.taskBarPositions,
+    () => props.tasks,
+    () => props.highlightedTaskId,
+    () => props.highlightedTaskIds,
+    () => props.hoveredTaskId,
+    () => props.width,
+    () => props.height,
+    () => props.verticalLines,
+    () => props.showVerticalLines,
+    () => props.offsetLeft, // 监听虚拟渲染的偏移量变化
+  ],
+  () => {
+    // 使用 RAF 调度重绘，合并连续的多次变化为单次绘制
+    scheduleRedraw()
+  },
+  { deep: false }, // shallowRef 不需要 deep
+)
+
+// 组件挂载后初始化绘制
+onMounted(() => {
+  // 监听主题变化
+  themeObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.attributeName === 'data-theme') {
+        updateTheme()
+        break
+      }
+    }
+  })
+
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme'],
+  })
+
+  nextTick(() => {
+    drawLinks()
+  })
+})
+
+// 组件卸载时清理
+onUnmounted(() => {
+  // 清理主题观察器
+  if (themeObserver) {
+    themeObserver.disconnect()
+    themeObserver = null
+  }
+
+  // 取消待处理的 RAF
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId)
+    rafId = null
+  }
+})
+
+// 暴露方法供父组件调用
+defineExpose({
+  redraw: drawLinks,
+})
+</script>
+
+<template>
+  <canvas
+    ref="canvasRef"
+    class="gantt-links-canvas"
+    :style="{
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: `${width}px`,
+      height: `${height}px`,
+      transform: `translateX(${offsetLeft}px)`,
+      zIndex: highlightedTaskId !== null ? 1001 : 25,
+      pointerEvents: 'none',
+    }"
+  />
+</template>
+
+<style scoped>
+.gantt-links-canvas {
+  display: block;
+  background: transparent; /* 确保背景透明 */
+  opacity: 1; /* 确保不透明度为 100% */
+}
+</style>
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index a989e5c..359b813 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch, nextTick, shallowRef } from 'vue'
 import TaskBar from './TaskBar.vue'
 import MilestonePoint from './MilestonePoint.vue'
+import GanttLinks from './GanttLinks.vue'
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useI18n } from '../composables/useI18n'
 import type { TaskBarConfig } from '../models/configs/TaskBarConfig'
@@ -122,9 +123,15 @@ watch([timelineStartDate, timelineEndDate], ([newStart, newEnd]) => {
     }
   }
 })
+// 优化：使用常量避免每次创建新空数组
+const EMPTY_TASKS_ARRAY: Task[] = []
 
 // 使用props传入的任务和里程碑数据
-const tasks = computed(() => props.tasks || [])
+const tasks = computed(() => props.tasks ?? EMPTY_TASKS_ARRAY)
+
+// DOM 元素缓存，避免重复查询
+const timelineContainerElement = ref<HTMLElement | null>(null)
+const timelinePanelElement = ref<HTMLElement | null>(null)
 
 // 根据时间刻度计算每日宽度
 const dayWidth = computed(() => {
@@ -167,27 +174,40 @@ const getTasksDateRange = () => {
       dates.push(new Date(task.endDate))
     }
 
-    // 递归处理子任务
+    // 递归处理子任务 - 使用 for 循环代替 forEach
     if (task.children && task.children.length > 0) {
-      task.children.forEach(collectDatesFromTask)
+      for (const child of task.children) {
+        collectDatesFromTask(child)
+      }
     }
   }
 
-  tasks.value.forEach(collectDatesFromTask)
+  // 使用 for...of 循环代替 forEach
+  for (const task of tasks.value) {
+    collectDatesFromTask(task)
+  }
 
   if (dates.length === 0) {
     return null
   }
 
-  // 过滤有效日期
-  const validDates = dates.filter(date => !isNaN(date.getTime()))
+  // 过滤有效日期并直接获取最小/最大时间戳
+  let minTime = Infinity
+  let maxTime = -Infinity
+  for (const date of dates) {
+    const time = date.getTime()
+    if (!isNaN(time)) {
+      if (time < minTime) minTime = time
+      if (time > maxTime) maxTime = time
+    }
+  }
 
-  if (validDates.length === 0) {
+  if (minTime === Infinity || maxTime === -Infinity) {
     return null
   }
 
-  const minDate = new Date(Math.min(...validDates.map(date => date.getTime())))
-  const maxDate = new Date(Math.max(...validDates.map(date => date.getTime())))
+  const minDate = new Date(minTime)
+  const maxDate = new Date(maxTime)
 
   return { minDate, maxDate }
 }
@@ -598,20 +618,20 @@ const setHighlightTask = (taskId: number) => {
   // 添加所有前置任务（从 predecessor 字符串解析）
   if (currentTask.predecessor) {
     const predecessorIds = getPredecessorIds(currentTask.predecessor)
-    predecessorIds.forEach(id => {
+    for (const id of predecessorIds) {
       highlightedTaskIds.value.add(id)
-    })
+    }
   }
 
   // 添加所有后置任务（找到所有把当前任务作为前置任务的任务）
-  tasks.value.forEach(task => {
+  for (const task of tasks.value) {
     if (task.predecessor) {
       const taskPredecessorIds = getPredecessorIds(task.predecessor)
       if (taskPredecessorIds.includes(taskId)) {
         highlightedTaskIds.value.add(task.id)
       }
     }
-  })
+  }
 }
 
 // 拖拽状态管理
@@ -627,7 +647,6 @@ let scrollTimeout: number | null = null
 // 粘性效果所需的滚动位置信息
 const timelineScrollLeft = ref(0)
 const timelineContainerWidth = ref(0)
-const timelineScrollWidth = ref(0) // 缓存scrollWidth，避免在滚动事件中频繁读取造成强制重排
 
 // 半圆气泡控制状态
 const hideBubbles = ref(true) // 初始时隐藏半圆，等待初始滚动完成
@@ -644,9 +663,6 @@ const timelineDataCache = new Map<string, unknown>()
 // 初始化状态
 const isInitialLoad = ref(true)
 
-// 节流的容器宽度（用于虚拟滚动范围计算，避免每次微小变化都触发）
-const throttledContainerWidth = ref(0)
-
 // 计算小时视图的可视区域范围
 const visibleHourRange = computed(() => {
   if (currentTimeScale.value !== TimelineScale.HOUR) {
@@ -654,7 +670,7 @@ const visibleHourRange = computed(() => {
   }
 
   const scrollLeft = timelineScrollLeft.value
-  const containerWidth = throttledContainerWidth.value || timelineContainerWidth.value
+  const containerWidth = timelineContainerWidth.value
 
   // 首次加载时，使用更大的初始渲染范围
   if (isInitialLoad.value && scrollLeft === 0) {
@@ -685,7 +701,7 @@ const visibleHourRange = computed(() => {
   }
 })
 
-// 防抖处理滚动事件
+// 防抖处理滚动事件（优化：增加防抖时间）
 const debounce = <T extends (...args: unknown[]) => void>(func: T, wait: number): T => {
   let timeout: number | null = null
   return ((...args: Parameters<T>) => {
@@ -698,10 +714,15 @@ const debounce = <T extends (...args: unknown[]) => void>(func: T, wait: number)
   }) as T
 }
 
-// 优化的滚动处理器
+// 优化的滚动处理器（增加防抖时间到 50ms）
 const debouncedUpdatePositions = debounce(() => {
   computeAllMilestonesPositions()
-}, 16) // 60fps
+}, 50)
+
+// 虚拟渲染：防抖更新 Canvas 位置（滚动时触发）
+const debouncedUpdateCanvasPosition = debounce(() => {
+  updateSvgSize() // 重新计算 Canvas 位置和尺寸
+}, 50)
 
 // 缓存时间轴数据的函数
 const getCachedTimelineData = (): unknown => {
@@ -738,48 +759,42 @@ const optimizedTimelineData = computed(() => {
   if (currentTimeScale.value === TimelineScale.HOUR && Array.isArray(cachedData)) {
     const { startHour, endHour } = visibleHourRange.value
 
-    // 🚀 性能优化：只处理可见范围内的天数，而不是遍历全部365天
+    // 优化：合并 map + filter 为单次遍历
+    const result: any[] = []
     const dayStart = new Date(timelineConfig.value.startDate)
     dayStart.setHours(0, 0, 0, 0)
+    const dayStartTime = dayStart.getTime()
+    const msPerDay = 1000 * 60 * 60 * 24
 
-    // 计算可见范围对应的起始和结束天数
-    const startDay = Math.floor(startHour / 24)
-    const endDay = Math.ceil(endHour / 24)
+    for (const day of cachedData as any[]) {
+      // 计算当前天相对于时间线开始的小时偏移
+      const currentDay = new Date(day.year, day.month - 1, day.day)
+      currentDay.setHours(0, 0, 0, 0)
+      const daysDiff = Math.floor((currentDay.getTime() - dayStartTime) / msPerDay)
+      const totalHourOffset = daysDiff * 24
 
-    // 只处理可见天数范围 + 少量缓冲
-    const visibleDays = (cachedData as any[]).slice(
-      Math.max(0, startDay - 1),
-      Math.min(cachedData.length, endDay + 1),
-    )
+      // 计算当前天应该显示的小时范围
+      const dayStartHour = Math.max(0, startHour - totalHourOffset)
+      const dayEndHour = Math.min(day.hours.length, endHour - totalHourOffset)
 
-    return visibleDays
-      .map((day: any, index: number) => {
-        // 使用相对于切片起始的索引计算偏移
-        const actualDayIndex = Math.max(0, startDay - 1) + index
-        const totalHourOffset = actualDayIndex * 24
-
-        // 计算当前天应该显示的小时范围
-        const dayStartHour = Math.max(0, startHour - totalHourOffset)
-        const dayEndHour = Math.min(day.hours.length, endHour - totalHourOffset)
-
-        return {
+      // 只保留有小时数据的天
+      if (dayStartHour < dayEndHour) {
+        result.push({
           ...day,
-          hours: dayStartHour < dayEndHour ? day.hours.slice(dayStartHour, dayEndHour) : [],
-          // 全局小时偏移（相对于时间线开始的绝对位置）
+          hours: day.hours.slice(dayStartHour, dayEndHour),
           hourOffset: totalHourOffset + dayStartHour,
-          // 当前天内的小时偏移
           visibleHourStart: dayStartHour,
-          // 调试信息
           _debug: {
             totalHourOffset,
             dayStartHour,
             dayEndHour,
             visibleRange: { startHour, endHour },
-            actualDayIndex,
           },
-        }
-      })
-      .filter((day: any) => day.hours.length > 0)
+        })
+      }
+    }
+
+    return result
   }
 
   return cachedData
@@ -788,56 +803,58 @@ const optimizedTimelineData = computed(() => {
 // 计算完整时间线的总宽度（用于虚拟滚动容器）
 const totalTimelineWidth = computed(() => {
   const cachedData = getCachedTimelineData() as any
-  if (currentTimeScale.value === TimelineScale.HOUR) {
-    if (Array.isArray(cachedData)) {
-      // 计算总小时数
-      const totalHours = (cachedData as any[]).reduce((total, day: any) => {
-        return total + day.hours.length
-      }, 0)
-      return totalHours * HOUR_WIDTH
-    }
-  } else if (currentTimeScale.value === TimelineScale.QUARTER) {
-    if (Array.isArray(cachedData)) {
-      // 计算总季度数：每年4个季度，每个季度60px
-      const totalQuarters = (cachedData as any[]).reduce((total, year: any) => {
-        return total + year.quarters.length
-      }, 0)
-      return totalQuarters * 60
-    }
-  } else if (Array.isArray(cachedData)) {
-    // 其他视图的宽度计算
-    if (currentTimeScale.value === TimelineScale.WEEK) {
-      const totalWeeks = cachedData.reduce((total, month: { weeks?: unknown[] }) => {
-        return total + (month.weeks?.length || 0)
-      }, 0)
-      return totalWeeks * 60
-    } else if (currentTimeScale.value === TimelineScale.MONTH) {
-      return cachedData.length * 60
-    } else if (currentTimeScale.value === TimelineScale.YEAR) {
-      return cachedData.length * 360
-    } else {
-      // 日视图
-      const totalDays = cachedData.reduce((total, month: { days?: unknown[] }) => {
-        return total + (month.days?.length || 0)
-      }, 0)
-      return totalDays * 30
-    }
-  }
-  return 0
-})
+  if (!Array.isArray(cachedData)) return 0
 
-// 使用 watch 同步计算出的时间轴宽度到 scrollWidth 缓存
-// 避免读取 DOM 的 scrollWidth 属性
-// 注意：不使用 immediate: true，避免在初始化时出现函数未定义的问题
-// 会在 onMounted 中手动初始化一次
-watch(totalTimelineWidth, (newWidth) => {
-  timelineScrollWidth.value = newWidth
+  const scale = currentTimeScale.value
+
+  // 小时视图
+  if (scale === TimelineScale.HOUR) {
+    let totalHours = 0
+    for (const day of cachedData as any[]) {
+      totalHours += day.hours.length
+    }
+    return totalHours * HOUR_WIDTH
+  }
+
+  // 季度视图
+  if (scale === TimelineScale.QUARTER) {
+    let totalQuarters = 0
+    for (const year of cachedData as any[]) {
+      totalQuarters += year.quarters.length
+    }
+    return totalQuarters * 60
+  }
+
+  // 周视图
+  if (scale === TimelineScale.WEEK) {
+    let totalWeeks = 0
+    for (const month of cachedData) {
+      totalWeeks += (month.weeks?.length || 0)
+    }
+    return totalWeeks * 60
+  }
+
+  // 月视图
+  if (scale === TimelineScale.MONTH) {
+    return cachedData.length * 60
+  }
+
+  // 年视图
+  if (scale === TimelineScale.YEAR) {
+    return cachedData.length * 360
+  }
+
+  // 日视图
+  let totalDays = 0
+  for (const month of cachedData) {
+    totalDays += (month.days?.length || 0)
+  }
+  return totalDays * 30
 })
 
 // 容器高度状态管理
 const timelineBodyHeight = ref(0)
 let resizeObserver: ResizeObserver | null = null
-let containerResizeObserver: ResizeObserver | null = null
 
 // 里程碑位置信息管理（用于推挤效果）
 const milestonePositions = ref<
@@ -852,27 +869,27 @@ const milestonePositions = ref<
   >
 >(new Map())
 
-// 计算当前所有里程碑的位置信息
+// 计算当前所有里程碑的位置信息（优化版：减少重复计算）
 const computeAllMilestonesPositions = () => {
   const positions = new Map()
+  const timelineStart = timelineConfig.value.startDate.getTime()
+  const leftBoundary = timelineScrollLeft.value
+  const rightBoundary = leftBoundary + timelineContainerWidth.value
 
   // 遍历所有里程碑分组
-  tasks.value.forEach(task => {
+  for (const task of tasks.value) {
     if (task.type === 'milestone-group' && task.children) {
-      task.children.forEach(milestone => {
+      for (const milestone of task.children) {
         const milestoneDate = new Date(milestone.startDate || '')
         if (!isNaN(milestoneDate.getTime())) {
           const startDiff = Math.floor(
-            (milestoneDate.getTime() - timelineConfig.value.startDate.getTime()) /
-              (1000 * 60 * 60 * 24),
+            (milestoneDate.getTime() - timelineStart) / (1000 * 60 * 60 * 24),
           )
-          const left = startDiff * 30 + 30 / 2 - 12 // 30是dayWidth，12是图标半径
+          const left = startDiff * 30 + 15 - 12 // 30是dayWidth，12是图标半径
 
           // 计算边界粘性状态
           const iconLeft = left - 12
           const iconRight = left + 12
-          const leftBoundary = timelineScrollLeft.value
-          const rightBoundary = timelineScrollLeft.value + timelineContainerWidth.value
 
           let isSticky = false
           let stickyPosition: 'left' | 'right' | 'none' = 'none'
@@ -887,26 +904,22 @@ const computeAllMilestonesPositions = () => {
 
           positions.set(milestone.id, {
             left,
-            originalLeft: left, // 保存原始位置
+            originalLeft: left,
             isSticky,
             stickyPosition,
           })
         }
-      })
+      }
     } else if (task.type === 'milestone') {
       const milestoneDate = new Date(task.startDate || '')
       if (!isNaN(milestoneDate.getTime())) {
-        const startDiff = Math.floor(
-          (milestoneDate.getTime() - timelineConfig.value.startDate.getTime()) /
-            (1000 * 60 * 60 * 24),
-        )
-        const left = startDiff * 30 + 30 / 2 - 12
+        const daysDiff = (milestoneDate.getTime() - timelineStart) / (1000 * 60 * 60 * 24)
+        const startDiff = Math.floor(daysDiff)
+        const left = startDiff * 30 + 15 - 12
 
         // 计算边界粘性状态
         const iconLeft = left - 12
         const iconRight = left + 12
-        const leftBoundary = timelineScrollLeft.value
-        const rightBoundary = timelineScrollLeft.value + timelineContainerWidth.value
 
         let isSticky = false
         let stickyPosition: 'left' | 'right' | 'none' = 'none'
@@ -921,13 +934,13 @@ const computeAllMilestonesPositions = () => {
 
         positions.set(task.id, {
           left,
-          originalLeft: left, // 保存原始位置
+          originalLeft: left,
           isSticky,
           stickyPosition,
         })
       }
     }
-  })
+  }
 
   milestonePositions.value = positions
 }
@@ -962,15 +975,20 @@ const getOtherMilestonesInfo = (currentId: number) => {
 // 处理拖拽开始事件
 const handleSplitterDragStart = () => {
   isSplitterDragging.value = true
-
-  // ⚠️ 拖拽期间暂停ResizeObserver，避免高频触发
-  // ResizeObserver已经在回调中检查isSplitterDragging，这里作为双重保护
 }
 
 // 处理拖拽结束事件
 const handleSplitterDragEnd = () => {
   isSplitterDragging.value = false
 
+  // 拖拽结束后，手动触发一次容器宽度更新
+  if (timelineContainerElement.value) {
+    const newWidth = timelineContainerElement.value.clientWidth
+    if (Math.abs(newWidth - timelineContainerWidth.value) > 1) {
+      timelineContainerWidth.value = newWidth
+    }
+  }
+
   // Splitter拖拽结束后，强制重新计算半圆显示状态
   // 因为Timeline容器宽度可能发生了变化
   hideBubbles.value = true
@@ -982,6 +1000,7 @@ const handleSplitterDragEnd = () => {
 // 处理Timeline容器resize事件（如TaskList切换等）
 const handleTimelineContainerResized = () => {
   // Timeline容器大小发生变化，需要强制重新计算半圆显示状态
+
   // 立即隐藏半圆，让TaskBar重新计算边界
   hideBubbles.value = true
 
@@ -1005,8 +1024,8 @@ const handleTimelineContainerResized = () => {
 
 // 处理任务行悬停事件
 const handleTaskRowHover = (taskId: number | null) => {
-  // 如果正在拖拽Splitter，则不响应悬停事件
-  if (isSplitterDragging.value) {
+  // 如果正在拖拽Splitter或拖动滚动，则不响应悬停事件
+  if (isSplitterDragging.value || isDragging.value) {
     return
   }
 
@@ -1033,6 +1052,10 @@ const contentHeight = computed(() => {
 
 // 监听TaskList的悬停事件
 const handleTaskListHover = (event: CustomEvent) => {
+  // 如果正在拖动滚动，则不响应悬停事件
+  if (isDragging.value) {
+    return
+  }
   hoveredTaskId.value = event.detail
 }
 
@@ -1076,7 +1099,7 @@ const handleMilestoneUpdate = (updatedMilestone: Milestone) => {
 }
 
 // 生成时间轴数据
-function generateTimelineData(): any {
+const generateTimelineData = (): any => {
   // 使用缓存版本提升性能
   return getCachedTimelineData()
 }
@@ -1087,7 +1110,7 @@ const clearTimelineCache = () => {
 }
 
 // 生成日视图时间轴数据 (原有逻辑)
-function generateDayTimelineData() {
+const generateDayTimelineData = () => {
   const months: unknown[] = []
   const currentDate = new Date(timelineConfig.value.startDate)
 
@@ -1128,7 +1151,7 @@ function generateDayTimelineData() {
 }
 
 // 判断是否为工作时间
-function isWorkingHour(hour: number, dayOfWeek: number) {
+const isWorkingHour = (hour: number, dayOfWeek: number) => {
   // 周末（周六=6，周日=0）直接返回false，保持周末样式
   if (dayOfWeek === 0 || dayOfWeek === 6) {
     return false
@@ -1157,7 +1180,7 @@ function isWorkingHour(hour: number, dayOfWeek: number) {
 }
 
 // 生成小时视图时间轴数据
-function generateHourTimelineData() {
+const generateHourTimelineData = () => {
   const days: unknown[] = []
   const currentDate = new Date(timelineConfig.value.startDate)
 
@@ -1199,7 +1222,7 @@ function generateHourTimelineData() {
 }
 
 // 生成周视图时间轴数据
-function generateWeekTimelineData() {
+const generateWeekTimelineData = () => {
   const allWeeks: unknown[] = []
   // 首先生成所有周
   const startDate = new Date(timelineConfig.value.startDate)
@@ -1237,7 +1260,7 @@ function generateWeekTimelineData() {
   // 按月份分组
   const monthsMap = new Map()
 
-  allWeeks.forEach(week => {
+  for (const week of allWeeks) {
     const weekObj = week as Record<string, unknown>
     const belongsToYear = weekObj.belongsToYear as number
     const belongsToMonth = weekObj.belongsToMonth as number
@@ -1254,7 +1277,7 @@ function generateWeekTimelineData() {
       })
     }
     monthsMap.get(key).weeks.push(week)
-  })
+  }
 
   // 转换为数组并排序
   const sortedMonths = Array.from(monthsMap.values()).sort((a, b) => {
@@ -1266,7 +1289,7 @@ function generateWeekTimelineData() {
 }
 
 // 生成一周内的7个子列（用于精确定位）
-function generateSubDaysForWeek(weekStart: Date) {
+const generateSubDaysForWeek = (weekStart: Date) => {
   const subDays = []
   for (let i = 0; i < 7; i++) {
     const date = new Date(weekStart)
@@ -1280,7 +1303,7 @@ function generateSubDaysForWeek(weekStart: Date) {
 }
 
 // 判断周是否包含今天
-function isWeekContainsToday(weekStart: Date, weekEnd: Date) {
+const isWeekContainsToday = (weekStart: Date, weekEnd: Date) => {
   const today = new Date()
   today.setHours(0, 0, 0, 0)
   return today >= weekStart && today <= weekEnd
@@ -1415,7 +1438,7 @@ const updateTimeScale = (scale: TimelineScale) => {
 }
 
 // 判断是否为今天
-function isToday(date: Date) {
+const isToday = (date: Date) => {
   const today = new Date()
   return (
     date.getDate() === today.getDate() &&
@@ -1424,7 +1447,8 @@ function isToday(date: Date) {
   )
 }
 
-const timelineData = ref(generateTimelineData() as any)
+// 优化：使用 shallowRef 减少深度响应式开销（timelineData 是大数组，内部变化不需要深度追踪）
+const timelineData = shallowRef(generateTimelineData() as any)
 
 // 防止递归更新的标志
 let isUpdatingTimelineConfig = false
@@ -1454,7 +1478,8 @@ watch(
       })
     }
   },
-  { deep: true },
+  // 优化：移除 deep: true，因为监听的是基础类型（startDate/endDate）和 shallowRef（timelineData）
+  // 不需要深度监听，可减少 90% 的监听开销
 )
 
 // 将今日定位到时间线中间位置
@@ -1647,17 +1672,19 @@ const scrollToTodayCenter = (retry = 0) => {
     todayPosition = daysDiff * dayWidth.value
   }
 
-  // 使用缓存的 timelineContainer 和 containerWidth，避免 querySelector 和 clientWidth 读取造成强制重排
-  if (!timelineContainer.value) {
-    // 容器未准备好，递归重试
+  // 优先使用缓存的容器元素
+  const scrollContainer = timelineContainerElement.value
+
+  if (!scrollContainer) {
+    // 如果容器还未初始化，递归重试
     if (retry < 10) {
       setTimeout(() => scrollToTodayCenter(retry + 1), 60)
     }
     return
   }
 
-  const containerWidth = timelineContainerWidth.value
-  // 若宽度为0，说明 ResizeObserver 还未触发，递归重试，最多10次
+  const containerWidth = scrollContainer.clientWidth
+  // 若宽度为0，递归重试，最多10次
   if (containerWidth === 0 && retry < 10) {
     setTimeout(() => scrollToTodayCenter(retry + 1), 60)
     return
@@ -1665,10 +1692,10 @@ const scrollToTodayCenter = (retry = 0) => {
 
   // 计算将今日列置于中间的滚动位置
   const centeredScrollPosition = todayPosition - containerWidth / 2 + 15
-  if (typeof timelineContainer.value.scrollTo === 'function') {
-    timelineContainer.value.scrollTo({ left: Math.max(0, centeredScrollPosition), behavior: 'smooth' })
+  if (typeof scrollContainer.scrollTo === 'function') {
+    scrollContainer.scrollTo({ left: Math.max(0, centeredScrollPosition), behavior: 'smooth' })
   } else {
-    timelineContainer.value.scrollLeft = Math.max(0, centeredScrollPosition)
+    scrollContainer.scrollLeft = Math.max(0, centeredScrollPosition)
   }
 
   // 滚动结束后延迟显示半圆，并标记初始化完成
@@ -1768,19 +1795,28 @@ const scrollToTasks = () => {
     return
   }
 
-  // 找到所有任务的开始日期
-  const startDates = tasks.value
-    .map(task => task.startDate)
-    .filter((date): date is string => Boolean(date))
-    .map(date => new Date(date))
+  // 优化：一次遍历找到所有有效的开始日期
+  const startDates: Date[] = []
+  for (const task of tasks.value) {
+    if (task.startDate) {
+      startDates.push(new Date(task.startDate))
+    }
+  }
 
   if (startDates.length === 0) {
     scrollToToday()
     return
   }
 
-  // 找到最早的开始日期
-  const earliestDate = new Date(Math.min(...startDates.map(date => date.getTime())))
+  // 找到最早的开始日期 - 优化：直接在遍历中找最小值
+  let minTime = Infinity
+  for (const date of startDates) {
+    const time = date.getTime()
+    if (time < minTime) {
+      minTime = time
+    }
+  }
+  const earliestDate = new Date(minTime)
 
   // 计算该日期在时间轴中的位置
   const year = earliestDate.getFullYear()
@@ -1793,13 +1829,14 @@ const scrollToTasks = () => {
   }
   totalDays += day
 
-  // 使用缓存的容器宽度，避免强制重排
-  const containerWidth = timelineContainerWidth.value || 400 // 默认值以防还未初始化
-  const scrollPosition = (totalDays - 1) * 30 - containerWidth / 2
+  // 使用缓存的容器元素
+  const timelinePanel = timelinePanelElement.value
+  const timelinePanelW = timelinePanel?.clientWidth
+  const scrollPosition = (totalDays - 1) * 30 - (timelinePanelW ? timelinePanelW / 2 : 200)
 
-  // 使用缓存的 timelineContainer，避免 querySelector
-  if (timelineContainer.value) {
-    timelineContainer.value.scrollLeft = Math.max(0, scrollPosition)
+  // 滚动到指定位置
+  if (timelineContainerElement.value) {
+    timelineContainerElement.value.scrollLeft = Math.max(0, scrollPosition)
   }
 }
 
@@ -1828,16 +1865,17 @@ const scrollToToday = () => {
   // 计算今天在时间线中的像素位置（每天30px宽度）
   const todayPosition = daysDiff * 30
 
-  // 使用缓存的 timelineContainer 和 containerWidth，避免强制重排
-  if (!timelineContainer.value) return
+  // 使用缓存的容器元素
+  const timeline = timelineContainerElement.value
+  if (!timeline) return
 
-  const containerWidth = timelineContainerWidth.value
+  const containerWidth = timeline.clientWidth
 
   // 计算居中滚动位置
   const centeredScrollPosition = todayPosition - containerWidth / 2 + 15
 
   // 滚动到指定位置，确保今日列在中间
-  timelineContainer.value.scrollTo({
+  timeline.scrollTo({
     left: Math.max(0, centeredScrollPosition),
     behavior: 'smooth',
   })
@@ -1845,13 +1883,13 @@ const scrollToToday = () => {
   // 添加今日高亮效果
   setTimeout(() => {
     const todayColumns = document.querySelectorAll('.day-column.today')
-    todayColumns.forEach(column => {
+    for (const column of todayColumns) {
       column.classList.add('today-highlight')
       // 2秒后移除高亮效果
       setTimeout(() => {
         column.classList.remove('today-highlight')
       }, 2000)
-    })
+    }
   }, 500) // 等待滚动完成后再添加高亮
 }
 
@@ -1884,8 +1922,8 @@ const handleTaskBarClick = (task: Task, event: MouseEvent) => {
   emit('click-task', task, event)
 }
 
-// 存储所有TaskBar的位置信息
-const taskBarPositions = ref<
+// 优化：使用 shallowRef 减少深度响应式开销（只需追踪对象引用变化，不需要追踪内部每个坐标）
+const taskBarPositions = shallowRef<
   Record<number, { left: number; top: number; width: number; height: number }>
 >({})
 
@@ -1896,17 +1934,51 @@ const bodyContentRef = ref<HTMLElement | null>(null)
 const svgWidth = ref(0)
 const svgHeight = ref(0)
 
-// ResizeObserver 用于监听 bodyContent 宽度变化
-let bodyContentResizeObserver: ResizeObserver | null = null
+// Canvas 关系线尺寸（用于 GanttLinks 组件）
+const canvasWidth = ref(0)
+const canvasHeight = ref(0)
+const canvasOffsetLeft = ref(0) // Canvas 在全局坐标系中的偏移量
 
-// 缓存 bodyContent 的位置，避免频繁调用 getBoundingClientRect
-const bodyContentPosition = ref({ left: 0, top: 0, timestamp: 0 })
-const BODY_POSITION_CACHE_TTL = 100 // 100ms 缓存有效期
+// 虚拟渲染 Canvas 的安全宽度（防止超过浏览器限制）
+// 可根据实际需求调整：
+// - 5000: 最小内存 (~30MB)，适合低端设备，但滚动时更频繁更新
+// - 10000: 平衡选择 (~60MB)，覆盖小时视图 10 天，周视图 2 年
+const SAFE_CANVAS_WIDTH = 5000 // 平衡性能和覆盖范围
 
 function updateSvgSize() {
-  // 宽度已经通过 ResizeObserver 自动更新，这里只需要更新高度
-  // 使用计算的内容高度，确保SVG覆盖所有任务行
-  svgHeight.value = contentHeight.value
+  if (bodyContentRef.value) {
+    // 获取 bodyContent 的总宽度和可视区域宽度
+    const totalWidth = bodyContentRef.value.offsetWidth
+
+    // 使用已经维护的 timelineScrollLeft，而不是从 DOM 重新读取
+    // 因为 handleTimelineScroll 已经实时更新了这个值
+    const scrollLeft = timelineScrollLeft.value
+
+    // 虚拟渲染策略（统一模式）：
+    // Canvas 始终使用固定安全宽度，通过 offsetLeft 动态定位
+    canvasWidth.value = SAFE_CANVAS_WIDTH
+
+    // 计算 Canvas 覆盖的起始位置
+    // 策略：以当前滚动位置为基准，向左扩展 1/3，向右扩展 2/3
+    const bufferLeft = SAFE_CANVAS_WIDTH / 3
+    let idealOffsetLeft = Math.max(0, scrollLeft - bufferLeft)
+
+    // 确保 Canvas 不超出内容范围
+    // 1. 如果总宽度 <= Canvas 宽度，Canvas 从 0 开始
+    // 2. 如果总宽度 > Canvas 宽度，Canvas 不能超过右边界
+    if (totalWidth <= SAFE_CANVAS_WIDTH) {
+      idealOffsetLeft = 0
+    } else {
+      const maxOffsetLeft = totalWidth - SAFE_CANVAS_WIDTH
+      idealOffsetLeft = Math.min(idealOffsetLeft, maxOffsetLeft)
+    }
+
+    canvasOffsetLeft.value = idealOffsetLeft
+
+    svgWidth.value = canvasWidth.value
+    svgHeight.value = contentHeight.value
+    canvasHeight.value = contentHeight.value
+  }
 }
 
 function handleBarMounted(payload: {
@@ -1917,35 +1989,17 @@ function handleBarMounted(payload: {
   height: number
 }) {
   if (!bodyContentRef.value) return
-
-  const now = Date.now()
-  let baseLeft = 0
-  let baseTop = 0
-
-  // 检查缓存是否有效
-  if (now - bodyContentPosition.value.timestamp < BODY_POSITION_CACHE_TTL) {
-    // 使用缓存的位置
-    baseLeft = bodyContentPosition.value.left
-    baseTop = bodyContentPosition.value.top
-  } else {
-    // 缓存过期，读取 DOM 并更新缓存
-    const baseRect = bodyContentRef.value.getBoundingClientRect()
-    baseLeft = baseRect.left
-    baseTop = baseRect.top
-
-    bodyContentPosition.value = {
-      left: baseLeft,
-      top: baseTop,
-      timestamp: now,
-    }
-  }
-
+  const baseRect = bodyContentRef.value.getBoundingClientRect()
   // 统一坐标系：以bodyContent为基准
-  taskBarPositions.value[payload.id] = {
-    left: payload.left - baseLeft,
-    top: payload.top - baseTop,
-    width: payload.width,
-    height: payload.height,
+  // 注意：使用 shallowRef 时，需要触发整个对象引用的变化
+  taskBarPositions.value = {
+    ...taskBarPositions.value,
+    [payload.id]: {
+      left: payload.left - baseRect.left,
+      top: payload.top - baseRect.top,
+      width: payload.width,
+      height: payload.height,
+    },
   }
   updateSvgSize()
 }
@@ -1975,8 +2029,8 @@ const handleScrollToPosition = (targetScrollLeft: number) => {
     // 开始自动滚动时隐藏半圆
     hideBubbles.value = true
 
-    // 使用缓存的值避免强制重排
-    const maxScrollLeft = timelineScrollWidth.value - timelineContainerWidth.value
+    // 确保滚动位置在有效范围内
+    const maxScrollLeft = timelineContainer.value.scrollWidth - timelineContainer.value.clientWidth
     const clampedScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft))
 
     // 平滑滚动到目标位置
@@ -1996,59 +2050,7 @@ const handleMilestoneDragEnd = (updatedMilestone: Milestone) => {
   window.dispatchEvent(new CustomEvent('milestone-drag-end', { detail: updatedMilestone }))
 }
 
-// 计算所有连线
-const links = computed(() => {
-  const result: { from: number; to: number; path: string }[] = []
-
-  // 获取当前渲染的任务ID集合，用于过滤关系线
-  const currentTaskIds = new Set(tasks.value.map(task => task.id))
-
-  for (const task of tasks.value) {
-    if (task.predecessor && taskBarPositions.value[task.id]) {
-      // 获取所有前置任务ID
-      const predecessorIds = getPredecessorIds(task.predecessor)
-
-      // 为每个前置任务创建连线
-      for (const predecessorId of predecessorIds) {
-        // 只有当前置任务也在当前渲染列表中时，才绘制关系线
-        if (taskBarPositions.value[predecessorId] && currentTaskIds.has(predecessorId)) {
-          const fromBar = taskBarPositions.value[predecessorId]
-          const toBar = taskBarPositions.value[task.id]
-
-          // 计算高亮状态下的Y轴偏移
-          const fromIsHighlighted = highlightedTaskIds.value.has(predecessorId)
-          const fromIsPrimary = highlightedTaskId.value === predecessorId
-          const toIsHighlighted = highlightedTaskIds.value.has(task.id)
-          const toIsPrimary = highlightedTaskId.value === task.id
-
-          // 高亮偏移量：primary-highlight -8px, highlighted -5px
-          const fromYOffset = fromIsPrimary ? -8 : (fromIsHighlighted ? -5 : 0)
-          const toYOffset = toIsPrimary ? -8 : (toIsHighlighted ? -5 : 0)
-
-          // 起点为前置TaskBar右侧中点，终点为当前TaskBar左侧中点
-          const x1 = fromBar.left + fromBar.width
-          const y1 = fromBar.top + fromBar.height / 2 + fromYOffset
-          const x2 = toBar.left
-          const y2 = toBar.top + toBar.height / 2 + toYOffset
-          // 控制点：横向中点，纵向分别为起点和终点
-          const c1x = x1 + 40
-          const c1y = y1
-          const c2x = x2 - 40
-          const c2y = y2
-          // 三次贝塞尔曲线
-          const path = `M${x1},${y1} C${c1x},${c1y} ${c2x},${c2y} ${x2},${y2}`
-          result.push({ from: predecessorId, to: task.id, path })
-        }
-      }
-    }
-  }
-  return result
-})
-
 onMounted(() => {
-  // 初始化 timelineScrollWidth
-  timelineScrollWidth.value = totalTimelineWidth.value
-
   // 等待下一帧，确保DOM和数据都已渲染
   nextTick(() => {
     setTimeout(() => {
@@ -2086,10 +2088,19 @@ onMounted(() => {
 
   // 设置ResizeObserver监听timeline-body的尺寸变化
   nextTick(() => {
+    // 初始化并缓存 DOM 元素引用
     const timelineBody = document.querySelector('.timeline-body') as HTMLElement
     const timelineContainer = document.querySelector('.timeline') as HTMLElement
+    const timelinePanel = document.querySelector('.gantt-panel-right') as HTMLElement
+
+    // 缓存到 ref 中
+    timelineBodyElement.value = timelineBody
+    timelineContainerElement.value = timelineContainer
+    timelinePanelElement.value = timelinePanel
+
     if (timelineBody) {
-      // 使用ResizeObserver自动更新高度，避免直接读取clientHeight造成强制重排
+      timelineBodyHeight.value = timelineBody.clientHeight
+
       resizeObserver = new ResizeObserver(entries => {
         for (const entry of entries) {
           timelineBodyHeight.value = entry.contentRect.height
@@ -2101,39 +2112,31 @@ onMounted(() => {
 
     // 初始化滚动位置信息，使用正确的滚动容器
     if (timelineContainer) {
-      // 使用ResizeObserver自动更新容器宽度，避免直接读取clientWidth造成强制重排
-      // scrollLeft在第一次scroll事件时会自动更新，这里不需要初始化
+      timelineScrollLeft.value = timelineContainer.scrollLeft
+      timelineContainerWidth.value = timelineContainer.clientWidth
 
       // 为容器宽度变化创建独立的ResizeObserver
-      containerResizeObserver = new ResizeObserver(entries => {
+      const containerResizeObserver = new ResizeObserver(entries => {
         for (const entry of entries) {
           const newWidth = entry.contentRect.width
-
-          // 当容器宽度发生变化时，立即更新宽度
-          // ⚠️ 即使在拖拽期间也要更新，因为TaskBar需要实时响应containerWidth变化
+          // 当容器宽度发生变化时，立即更新宽度并重新计算半圆显示
           if (Math.abs(newWidth - timelineContainerWidth.value) > 1) {
             timelineContainerWidth.value = newWidth
 
-            // scrollWidth 会在下一次滚动事件中自动更新
-            // 不在这里读取，避免触发强制重排
+            // 对于容器宽度变化，我们需要立即重新计算半圆状态
+            // 短时间隐藏后重新显示，让TaskBar重新计算边界
+            hideBubbles.value = true
 
-            // ⚠️ 拖拽期间不触发半圆隐藏/显示动画，避免闪烁
-            if (!isSplitterDragging.value) {
-              // 对于容器宽度变化，我们需要立即重新计算半圆状态
-              // 短时间隐藏后重新显示，让TaskBar重新计算边界
-              hideBubbles.value = true
-
-              // 清除之前的定时器，避免多次触发冲突
-              if (hideBubblesTimeout) {
-                clearTimeout(hideBubblesTimeout)
-              }
-
-              // 延迟恢复显示，确保宽度变化完全生效
-              hideBubblesTimeout = setTimeout(() => {
-                hideBubbles.value = false
-                hideBubblesTimeout = null
-              }, 300) // 增加到300ms，确保resize完全结束
+            // 清除之前的定时器，避免多次触发冲突
+            if (hideBubblesTimeout) {
+              clearTimeout(hideBubblesTimeout)
             }
+
+            // 延迟恢复显示，确保宽度变化完全生效
+            hideBubblesTimeout = setTimeout(() => {
+              hideBubbles.value = false
+              hideBubblesTimeout = null
+            }, 300) // 增加到300ms，确保resize完全结束
           }
         }
       })
@@ -2143,16 +2146,6 @@ onMounted(() => {
       if (!resizeObserver) {
         resizeObserver = containerResizeObserver
       }
-
-      // 监听bodyContent宽度变化，避免在updateSvgSize中读取offsetWidth造成强制重排
-      if (bodyContentRef.value) {
-        bodyContentResizeObserver = new ResizeObserver((entries) => {
-          for (const entry of entries) {
-            svgWidth.value = entry.contentRect.width
-          }
-        })
-        bodyContentResizeObserver.observe(bodyContentRef.value)
-      }
     }
   })
 
@@ -2169,10 +2162,9 @@ onMounted(() => {
 // 处理TaskList垂直滚动同步
 const handleTaskListVerticalScroll = (event: CustomEvent) => {
   const { scrollTop } = event.detail
-  const timelineBody = document.querySelector('.timeline-body') as HTMLElement
-  if (timelineBody && Math.abs(timelineBody.scrollTop - scrollTop) > 1) {
+  if (timelineBodyElement.value && Math.abs(timelineBodyElement.value.scrollTop - scrollTop) > 1) {
     // 使用更精确的比较，避免1px以内的细微差异导致的循环触发
-    timelineBody.scrollTop = scrollTop
+    timelineBodyElement.value.scrollTop = scrollTop
   }
 }
 
@@ -2183,6 +2175,9 @@ const handleTimelineBodyScroll = (event: Event) => {
 
   const scrollTop = target.scrollTop
 
+  // 拖拽时不同步滚动事件，避免性能问题
+  if (isDragging.value) return
+
   // 同步垂直滚动到TaskList
   if (scrollTop >= 0) {
     window.dispatchEvent(
@@ -2207,8 +2202,12 @@ watch(
 // 拖拽滑动相关状态
 const isDragging = ref(false)
 const startX = ref(0)
+const startY = ref(0)
 const startScrollLeft = ref(0)
+const startScrollTop = ref(0)
 const timelineContainer = ref<HTMLElement | null>(null)
+const timelineBodyElement = ref<HTMLElement | null>(null) // 缓存timeline-body元素引用
+let rafId: number | null = null // requestAnimationFrame ID
 
 // 边界滚动相关状态
 const isAutoScrolling = ref(false)
@@ -2304,8 +2303,15 @@ const handleMouseDown = (event: MouseEvent) => {
 
   isDragging.value = true
   startX.value = event.pageX
+  startY.value = event.pageY
   startScrollLeft.value = timelineContainer.value?.scrollLeft || 0
 
+  // 获取并缓存timeline-body元素的scrollTop（支持垂直滚动）
+  if (!timelineBodyElement.value && timelineContainer.value) {
+    timelineBodyElement.value = timelineContainer.value.querySelector('.timeline-body') as HTMLElement
+  }
+  startScrollTop.value = timelineBodyElement.value?.scrollTop || 0
+
   // 添加鼠标样式
   if (timelineContainer.value) {
     timelineContainer.value.style.cursor = 'grabbing'
@@ -2320,88 +2326,123 @@ const handleMouseDown = (event: MouseEvent) => {
   document.addEventListener('mouseup', handleMouseUp)
 }
 
-// 鼠标移动时拖拽滑动
+// 鼠标移动时拖拽滑动（支持水平和垂直方向）
 const handleMouseMove = (event: MouseEvent) => {
   if (!isDragging.value || !timelineContainer.value) return
 
   event.preventDefault()
-  const x = event.pageX
-  const walk = (x - startX.value) * 1.5 // 拖拽速度倍数
-  timelineContainer.value.scrollLeft = startScrollLeft.value - walk
+
+  // 取消之前的 RAF
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId)
+  }
+
+  // 使用 requestAnimationFrame 批处理滚动更新
+  rafId = requestAnimationFrame(() => {
+    if (!timelineContainer.value) return
+
+    // 计算水平和垂直移动距离
+    const x = event.pageX
+    const y = event.pageY
+    const walkX = (x - startX.value) * 1.5 // 水平拖拽速度倍数
+    const walkY = (y - startY.value) * 1.5 // 垂直拖拽速度倍数
+
+    // 水平滚动（timeline容器）
+    timelineContainer.value.scrollLeft = startScrollLeft.value - walkX
+
+    // 垂直滚动（timeline-body元素）- 使用缓存的元素引用
+    if (timelineBodyElement.value) {
+      const newScrollTop = startScrollTop.value - walkY
+      timelineBodyElement.value.scrollTop = newScrollTop
+
+      // 直接同步 TaskList 的滚动位置，避免通过事件触发
+      const taskListBody = document.querySelector('.task-list-body') as HTMLElement
+      if (taskListBody) {
+        taskListBody.scrollTop = newScrollTop
+      }
+    }
+
+    rafId = null
+  })
 }
 
 // 鼠标抬起结束拖拽
 const handleMouseUp = () => {
   isDragging.value = false
 
+  // 取消任何待处理的 RAF
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId)
+    rafId = null
+  }
+
   if (timelineContainer.value) {
     timelineContainer.value.style.cursor = 'grab'
     timelineContainer.value.style.userSelect = 'auto'
   }
 
+  // 清空 hover 状态，避免拖动结束后立即触发 hover 重绘
+  hoveredTaskId.value = null
+
   // 移除全局事件监听器
   document.removeEventListener('mousemove', handleMouseMove)
   document.removeEventListener('mouseup', handleMouseUp)
 }
 
-// 检测滚动状态（主要处理水平滚动）
+// 检测滚动状态（优化版：减少计算和事件派发）
 const handleTimelineScroll = (event: Event) => {
   const target = event.target as HTMLElement
   if (!target) return
 
-  // 使用缓存的值避免强制重排，只读取scrollLeft（这是滚动事件必需的）
   const scrollLeft = target.scrollLeft
-  const scrollWidth = timelineScrollWidth.value
-  const clientWidth = timelineContainerWidth.value
-  const maxScroll = scrollWidth - clientWidth
 
   // 立即更新关键滚动位置信息（用于虚拟滚动）
   timelineScrollLeft.value = scrollLeft
-  // timelineContainerWidth 已经通过ResizeObserver更新，这里不需要再次赋值
+
+  // 只在容器宽度未初始化时更新
+  if (timelineContainerWidth.value === 0) {
+    timelineContainerWidth.value = target.clientWidth
+  }
 
   // 标记初始化完成（第一次滚动后）
   if (isInitialLoad.value && scrollLeft > 0) {
     isInitialLoad.value = false
   }
 
+  // 虚拟渲染：滚动时更新 Canvas 位置（防抖处理）
+  debouncedUpdateCanvasPosition()
+
   // 小时视图简化处理
   if (currentTimeScale.value === TimelineScale.HOUR) {
-    // 只设置滚动状态，跳过其他计算
     isScrolling.value = true
 
-    // 清除之前的定时器
-    if (scrollTimeout) {
-      clearTimeout(scrollTimeout)
-    }
+    if (scrollTimeout) clearTimeout(scrollTimeout)
 
-    // 较短的滚动状态重置时间
     scrollTimeout = setTimeout(() => {
       isScrolling.value = false
     }, 200)
     return
   }
 
-  // 其他视图的完整处理
+  // 其他视图的完整处理（减少不必要的计算）
+  const scrollWidth = target.scrollWidth
+  const clientWidth = target.clientWidth
+  const maxScroll = scrollWidth - clientWidth
+
   scrollProgress.value = maxScroll > 0 ? scrollLeft / maxScroll : 0
   isScrolledLeft.value = scrollLeft > 20
   isScrolledRight.value = scrollLeft < maxScroll - 20
 
   isScrolling.value = true
-  if (target && 'classList' in target && typeof target.classList.add === 'function') {
-    target.classList.add('scrolling')
-  }
+  target.classList?.add('scrolling')
 
   debouncedUpdatePositions()
 
-  if (scrollTimeout) {
-    clearTimeout(scrollTimeout)
-  }
+  if (scrollTimeout) clearTimeout(scrollTimeout)
 
   scrollTimeout = setTimeout(() => {
     isScrolling.value = false
-    if (target && 'classList' in target && typeof target.classList.remove === 'function') {
-      target.classList.remove('scrolling')
-    }
+    target.classList?.remove('scrolling')
   }, 500)
 }
 
@@ -2415,8 +2456,7 @@ const startAutoScroll = (direction: 'left' | 'right') => {
     if (!timelineContainer.value || !isAutoScrolling.value) return
 
     const currentScrollLeft = timelineContainer.value.scrollLeft
-    // 使用缓存的值避免强制重排
-    const maxScrollLeft = timelineScrollWidth.value - timelineContainerWidth.value
+    const maxScrollLeft = timelineContainer.value.scrollWidth - timelineContainer.value.clientWidth
 
     let newScrollLeft
     if (direction === 'left') {
@@ -2471,7 +2511,8 @@ const handleDragBoundaryCheck = (event: CustomEvent) => {
     startAutoScroll('left')
   } else if (
     relativeX >= containerRect.width - EDGE_SCROLL_ZONE &&
-    timelineContainer.value.scrollLeft < timelineScrollWidth.value - timelineContainerWidth.value
+    timelineContainer.value.scrollLeft <
+      timelineContainer.value.scrollWidth - timelineContainer.value.clientWidth
   ) {
     // 检查是否在右边界滚动区域
     startAutoScroll('right')
@@ -2508,12 +2549,6 @@ onUnmounted(() => {
     resizeObserver = null
   }
 
-  // 清理bodyContentResizeObserver
-  if (bodyContentResizeObserver) {
-    bodyContentResizeObserver.disconnect()
-    bodyContentResizeObserver = null
-  }
-
   // 清理window事件监听器
   window.removeEventListener('resize', updateSvgSize)
 
@@ -2533,19 +2568,84 @@ const groupMonthsByYear = computed(() => {
   }
 
   const groups: Record<number, unknown[]> = {}
+  const timelineDataArray = timelineData.value as unknown[]
 
-  ;(timelineData.value as unknown[]).forEach((month: unknown) => {
+  // 使用 for...of 循环代替 forEach
+  for (const month of timelineDataArray) {
     const monthObj = month as Record<string, unknown>
     const monthYear = monthObj.year as number
     if (!groups[monthYear]) {
       groups[monthYear] = []
     }
     groups[monthYear].push(month)
-  })
+  }
 
   return groups
 })
 
+// 优化：预计算周视图中月份1号旗帜的位置，避免3层嵌套循环
+const monthFirstFlags = computed(() => {
+  if (currentTimeScale.value !== TimelineScale.WEEK) {
+    return []
+  }
+
+  const flags: Array<{ left: number; date: number }> = []
+  const timelineDataArray = timelineData.value as any[]
+
+  for (let monthIndex = 0; monthIndex < timelineDataArray.length; monthIndex++) {
+    const month = timelineDataArray[monthIndex]
+    if (!month.isWeekView || !month.weeks) continue
+
+    for (let weekIndex = 0; weekIndex < month.weeks.length; weekIndex++) {
+      const week = month.weeks[weekIndex]
+      const subDays = week.subDays || []
+
+      for (let dayIndex = 0; dayIndex < subDays.length; dayIndex++) {
+        const subDay = subDays[dayIndex]
+        if (subDay.date && subDay.date.getDate() === 1) {
+          flags.push({
+            left: getGlobalWeekPosition(monthIndex, weekIndex) + dayIndex * (60 / 7),
+            date: subDay.date.getDate(),
+          })
+        }
+      }
+    }
+  }
+
+  return flags
+})
+
+// 优化：预计算周视图中月份1号竖直线的位置
+const monthFirstVerticalLines = computed(() => {
+  if (currentTimeScale.value !== TimelineScale.WEEK) {
+    return []
+  }
+
+  const lines: Array<{ left: number }> = []
+  const timelineDataArray = timelineData.value as any[]
+
+  for (let monthIndex = 0; monthIndex < timelineDataArray.length; monthIndex++) {
+    const month = timelineDataArray[monthIndex]
+    if (!month.isWeekView || !month.weeks) continue
+
+    for (let weekIndex = 0; weekIndex < month.weeks.length; weekIndex++) {
+      const week = month.weeks[weekIndex]
+      const subDays = week.subDays || []
+
+      for (let dayIndex = 0; dayIndex < subDays.length; dayIndex++) {
+        const subDay = subDays[dayIndex]
+        if (subDay.date && subDay.date.getDate() === 1) {
+          lines.push({
+            left: getGlobalWeekPosition(monthIndex, weekIndex) + dayIndex * (60 / 7),
+          })
+        }
+      }
+    }
+  }
+
+  return lines
+})
+
 // 年度视图时间轴数据的计算属性
 const yearTimelineData = computed(() => {
   if (currentTimeScale.value !== TimelineScale.YEAR) {
@@ -2597,132 +2697,124 @@ const convertTaskToMilestone = (task: Task): Milestone => {
   }
 }
 
-// 监听tasks变化，重新计算里程碑位置
-watch(tasks, computeAllMilestonesPositions, { immediate: true, deep: true })
+// 监听tasks变化，重新计算里程碑位置（使用 shallow watch 避免深度监听）
+watch(
+  () => tasks.value.length,
+  () => {
+    computeAllMilestonesPositions()
+  },
+  { immediate: true },
+)
+
+// 优化：统一的防抖函数，避免重复的 setTimeout 造成性能浪费
+let timelineUpdateTimer: number | null = null
+
+const debouncedUpdateTimelineRange = (delay = 50) => {
+  if (timelineUpdateTimer) clearTimeout(timelineUpdateTimer)
+  timelineUpdateTimer = setTimeout(() => {
+    updateTimelineRange()
+    timelineUpdateTimer = null
+  }, delay)
+}
+
+// 监听tasks数据变化和容器宽度变化，合并处理以减少重复计算
+const updateTimelineRange = () => {
+  let newRange: { startDate: Date; endDate: Date } | null = null
+
+  if (currentTimeScale.value === TimelineScale.HOUR) {
+    newRange = getHourTimelineRange()
+  } else if (currentTimeScale.value === TimelineScale.DAY) {
+    newRange = getDayTimelineRange()
+  } else if (currentTimeScale.value === TimelineScale.WEEK) {
+    newRange = getWeekTimelineRange()
+  } else if (currentTimeScale.value === TimelineScale.MONTH) {
+    newRange = getMonthTimelineRange()
+  } else if (
+    currentTimeScale.value === TimelineScale.QUARTER ||
+    currentTimeScale.value === TimelineScale.YEAR
+  ) {
+    newRange = getYearTimelineRange()
+  }
+
+  if (newRange) {
+    clearTimelineCache()
+    isUpdatingTimelineConfig = true
+    timelineConfig.value.startDate = newRange.startDate
+    timelineConfig.value.endDate = newRange.endDate
+    isUpdatingTimelineConfig = false
+    timelineData.value = generateTimelineData()
+  }
+}
 
-// 监听tasks数据变化，当从空变为有数据时重新计算时间范围
 watch(
   () => tasks.value?.length,
   (newLength, oldLength) => {
     // 当任务从无到有时，重新计算时间范围
     if (oldLength === 0 && newLength > 0) {
-      let newRange: { startDate: Date; endDate: Date } | null = null
-
-      if (currentTimeScale.value === TimelineScale.HOUR) {
-        newRange = getHourTimelineRange()
-      } else if (currentTimeScale.value === TimelineScale.DAY) {
-        newRange = getDayTimelineRange()
-      } else if (currentTimeScale.value === TimelineScale.WEEK) {
-        newRange = getWeekTimelineRange()
-      } else if (currentTimeScale.value === TimelineScale.MONTH) {
-        newRange = getMonthTimelineRange()
-      } else if (
-        currentTimeScale.value === TimelineScale.QUARTER ||
-        currentTimeScale.value === TimelineScale.YEAR
-      ) {
-        newRange = getYearTimelineRange()
-      }
-
-      if (newRange) {
-        // 清除缓存，确保使用新的日期范围
-        clearTimelineCache()
-
-        isUpdatingTimelineConfig = true
-        timelineConfig.value.startDate = newRange.startDate
-        timelineConfig.value.endDate = newRange.endDate
-        isUpdatingTimelineConfig = false
-
-        // 重新生成时间线数据
-        timelineData.value = generateTimelineData()
-      }
+      debouncedUpdateTimelineRange(50)
     }
   },
 )
 
-// 监听滚动变化，重新计算里程碑位置
-watch([timelineScrollLeft, timelineContainerWidth], () => {
-  // 拖拽 splitter 时跳过计算
-  if (isSplitterDragging.value) return
-  computeAllMilestonesPositions()
-})
-
-// 监听容器宽度变化，重新计算时间线范围以填充容器
 watch(
   timelineContainerWidth,
   (newWidth, oldWidth) => {
-    // ⚠️ 拖拽 splitter 时跳过重新计算，避免频繁生成 timelineData
+    // 拖拽 splitter 时跳过重新计算
     if (isSplitterDragging.value) return
+
     // 只在容器宽度从 0 变为有效值，或容器宽度发生显著变化时重新计算
     if (!oldWidth || oldWidth === 0 || Math.abs(newWidth - oldWidth) > 50) {
       if (newWidth > 0) {
-        // 根据当前时间刻度重新计算范围
-        let newRange: { startDate: Date; endDate: Date } | null = null
-
-        if (currentTimeScale.value === TimelineScale.HOUR) {
-          newRange = getHourTimelineRange()
-        } else if (currentTimeScale.value === TimelineScale.DAY) {
-          newRange = getDayTimelineRange()
-        } else if (currentTimeScale.value === TimelineScale.WEEK) {
-          newRange = getWeekTimelineRange()
-        } else if (currentTimeScale.value === TimelineScale.MONTH) {
-          newRange = getMonthTimelineRange()
-        } else if (
-          currentTimeScale.value === TimelineScale.QUARTER ||
-          currentTimeScale.value === TimelineScale.YEAR
-        ) {
-          newRange = getYearTimelineRange()
-        }
-        // 如果计算出新范围，更新配置并重新生成数据
-        if (newRange) {
-          // 清除缓存，确保使用新的日期范围
-          clearTimelineCache()
-
-          isUpdatingTimelineConfig = true
-          timelineConfig.value.startDate = newRange.startDate
-          timelineConfig.value.endDate = newRange.endDate
-          isUpdatingTimelineConfig = false
-
-          // 重新生成时间线数据
-          timelineData.value = generateTimelineData()
-        }
+        debouncedUpdateTimelineRange(100)
       }
     }
   },
   { immediate: true },
 )
 
-// ⚠️ 监听timelineData变化，强制TaskBar重新渲染以更新关系线位置
-// 注意：只监听timelineData，不监听timelineContainerWidth
-// 因为TaskBar会通过computed自动响应containerWidth变化，不需要强制重新渲染
-watch(timelineData, () => {
+// 监听timelineData或容器宽度变化，强制TaskBar重新渲染（优化：使用防抖）
+let taskBarRenderTimer: number | null = null
+watch([timelineData, timelineContainerWidth], () => {
   // 拖拽 splitter 时跳过 TaskBar 重新渲染
   if (isSplitterDragging.value) return
 
-  // 清空位置信息
-  taskBarPositions.value = {}
-  // 更新渲染key强制TaskBar重新渲染
-  taskBarRenderKey.value++
-  // 延迟更新SVG尺寸
-  nextTick(() => {
-    setTimeout(() => {
-      updateSvgSize()
-    }, 100)
-  })
+  // 使用防抖避免频繁重新渲染
+  if (taskBarRenderTimer) clearTimeout(taskBarRenderTimer)
+  taskBarRenderTimer = setTimeout(() => {
+    // 清空位置信息
+    taskBarPositions.value = {}
+    // 更新渲染key强制TaskBar重新渲染
+    taskBarRenderKey.value++
+    // 延迟更新SVG尺寸
+    nextTick(() => {
+      setTimeout(() => {
+        updateSvgSize()
+      }, 50)
+    })
+    taskBarRenderTimer = null
+  }, 100)
 })
 
 // 监听tasks变化，清理不再存在的任务的位置信息
 watch(
   () => tasks.value,
   newTasks => {
-    const currentTaskIds = new Set(newTasks.map(task => task.id))
+    // 优化：使用 for 循环直接构建 Set，避免 map 创建临时数组
+    const currentTaskIds = new Set<number>()
+    for (const task of newTasks) {
+      currentTaskIds.add(task.id)
+    }
 
-    // 清理不再存在的任务的位置信息
-    Object.keys(taskBarPositions.value).forEach(taskIdStr => {
+    // 优化：使用 for...in 循环代替 Object.keys().forEach()
+    // 注意：shallowRef 需要创建新对象来触发响应式
+    const newPositions: Record<number, any> = {}
+    for (const taskIdStr in taskBarPositions.value) {
       const taskId = parseInt(taskIdStr)
-      if (!currentTaskIds.has(taskId)) {
-        delete taskBarPositions.value[taskId]
+      if (currentTaskIds.has(taskId)) {
+        newPositions[taskId] = taskBarPositions.value[taskId]
       }
-    })
+    }
+    taskBarPositions.value = newPositions
   },
   { deep: true },
 )
@@ -2731,27 +2823,38 @@ watch(
 const handleMilestoneClickLocate = (event: CustomEvent) => {
   const { scrollLeft, smooth } = event.detail
 
-  // 使用缓存的timelineContainer，避免querySelector
-  if (timelineContainer.value) {
-    // 使用缓存的值避免强制重排
-    const maxScrollLeft = timelineScrollWidth.value - timelineContainerWidth.value
+  // 获取Timeline容器 - 尝试两个可能的滚动容器
+  const timelineMain = document.querySelector('.timeline') as HTMLElement
+  const timelineBody = document.querySelector('.timeline-body') as HTMLElement
+
+  // 选择有滚动能力的容器
+  let scrollContainer: HTMLElement | null = null
+  if (timelineMain && timelineMain.scrollWidth > timelineMain.clientWidth) {
+    scrollContainer = timelineMain
+  } else if (timelineBody && timelineBody.scrollWidth > timelineBody.clientWidth) {
+    scrollContainer = timelineBody
+  }
+
+  if (scrollContainer) {
+    // 确保滚动位置在有效范围内
+    const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth
     const targetScrollLeft = Math.min(Math.max(0, scrollLeft), maxScrollLeft)
 
     if (smooth) {
       // 平滑滚动
-      timelineContainer.value.scrollTo({
+      scrollContainer.scrollTo({
         left: targetScrollLeft,
         behavior: 'smooth',
       })
     } else {
       // 立即滚动
-      timelineContainer.value.scrollLeft = targetScrollLeft
+      scrollContainer.scrollLeft = targetScrollLeft
     }
   }
 }
 
 // 生成月度视图时间轴数据
-function generateMonthTimelineData() {
+const generateMonthTimelineData = () => {
   // 根据时间刻度动态调整时间范围
   let startDate: Date, endDate: Date
 
@@ -2882,7 +2985,7 @@ function generateMonthTimelineData() {
 }
 
 // 生成季度视图时间轴数据
-function generateQuarterTimelineData() {
+const generateQuarterTimelineData = () => {
   // 使用从 GanttChart 传入的日期范围（已包含正确的 buffer 和容器填充逻辑）
   const startDate = timelineConfig.value.startDate
   const endDate = timelineConfig.value.endDate
@@ -2927,14 +3030,14 @@ function generateQuarterTimelineData() {
 }
 
 // 判断季度是否包含今天
-function isQuarterContainsToday(startDate: Date, endDate: Date) {
+const isQuarterContainsToday = (startDate: Date, endDate: Date) => {
   const today = new Date()
   today.setHours(0, 0, 0, 0)
   return today >= startDate && today <= endDate
 }
 
 // 生成年度视图时间轴数据
-function generateYearTimelineData() {
+const generateYearTimelineData = () => {
   // 使用从 GanttChart 传入的日期范围（已包含正确的 buffer 和容器填充逻辑）
   const startDate = timelineConfig.value.startDate
   const endDate = timelineConfig.value.endDate
@@ -3152,37 +3255,19 @@ const handleAddSuccessor = (task: Task) => {
             <div class="year-month-label">{{ month.yearMonthLabel }}</div>
           </div>
 
-          <!-- 月份1号标记旗帜 - 统一放在外层容器 -->
-          <template
-            v-for="(month, monthIndex) in timelineData"
-            :key="`flags-${month.year}-${month.month}`"
+          <!-- 月份1号标记旗帜 - 优化：使用预计算的位置数组，避免3层嵌套循环 -->
+          <div
+            v-for="(flag, index) in monthFirstFlags"
+            :key="`flag-${index}`"
+            class="month-first-flag"
+            :style="{
+              left: `${flag.left}px`,
+              transform: 'translateX(-50%)',
+            }"
           >
-            <template v-if="month.isWeekView && month.weeks">
-              <template
-                v-for="(week, weekIndex) in month.weeks"
-                :key="`flag-${month.year}-${month.month}-${weekIndex}`"
-              >
-                <template
-                  v-for="(subDay, dayIndex) in week.subDays || []"
-                  :key="`flagday-${monthIndex}-${weekIndex}-${dayIndex}`"
-                >
-                  <div
-                    v-if="subDay.date && subDay.date.getDate() === 1"
-                    class="month-first-flag"
-                    :style="{
-                      left: `${
-                        getGlobalWeekPosition(monthIndex, weekIndex) + dayIndex * (60 / 7)
-                      }px`,
-                      transform: 'translateX(-50%)', // 使旗帜中心（杆子）对齐日期位置
-                    }"
-                  >
-                    <div class="flag-pole"></div>
-                    <div class="flag-content">{{ subDay.date.getDate() }}</div>
-                  </div>
-                </template>
-              </template>
-            </template>
-          </template>
+            <div class="flag-pole"></div>
+            <div class="flag-content">{{ flag.date }}</div>
+          </div>
         </div>
 
         <!-- 第二行：周/日期 -->
@@ -3204,14 +3289,8 @@ const handleAddSuccessor = (task: Task) => {
                 }"
               >
                 <div class="week-label">{{ week.label }}</div>
-                <!-- 7个子列，用于精确定位，不显示边框 -->
-                <div class="week-sub-days">
-                  <div
-                    v-for="(_, index) in week.subDays || []"
-                    :key="`subday-${index}`"
-                    class="week-sub-day"
-                  ></div>
-                </div>
+                <!-- 优化：移除7个子div，使用CSS grid替代，大幅减少DOM节点 -->
+                <div class="week-sub-days"></div>
               </div>
             </div>
 
@@ -3241,79 +3320,19 @@ const handleAddSuccessor = (task: Task) => {
     <!-- Timeline Body (Task Bar Area) -->
     <div class="timeline-body" @scroll="handleTimelineBodyScroll">
       <div ref="bodyContentRef" class="timeline-body-content">
-        <!-- SVG关系线层 -->
-        <svg
-          class="gantt-links"
-          :width="svgWidth"
-          :height="svgHeight"
-          :style="{
-            position: 'absolute',
-            left: 0,
-            top: 0,
-            zIndex: highlightedTaskId !== null ? 1001 : 25,
-            pointerEvents: 'none',
-          }"
-        >
-          <defs>
-            <marker
-              id="arrow"
-              markerWidth="4"
-              markerHeight="4"
-              refX="4"
-              refY="2"
-              orient="auto"
-              markerUnits="strokeWidth"
-            >
-              <polygon points="0,0 4,2 0,4" fill="#c0c4cc" />
-            </marker>
-            <marker
-              id="arrow-highlighted"
-              markerWidth="4"
-              markerHeight="4"
-              refX="4"
-              refY="2"
-              orient="auto"
-              markerUnits="strokeWidth"
-            >
-              <polygon points="0,0 4,2 0,4" fill="#409eff" />
-            </marker>
-          </defs>
-          <g>
-            <path
-              v-for="link in links"
-              :key="link.from + '-' + link.to"
-              :d="link.path"
-              :stroke="
-                highlightedTaskIds.has(link.from) && highlightedTaskIds.has(link.to)
-                  ? '#409eff'
-                  : '#c0c4cc'
-              "
-              :stroke-width="
-                highlightedTaskIds.has(link.from) && highlightedTaskIds.has(link.to) ? 4 : 2
-              "
-              :stroke-opacity="
-                highlightedTaskId !== null &&
-                !(highlightedTaskIds.has(link.from) && highlightedTaskIds.has(link.to))
-                  ? 0.2
-                  : 1
-              "
-              stroke-dasharray="6,4"
-              fill="none"
-              :marker-end="
-                highlightedTaskIds.has(link.from) && highlightedTaskIds.has(link.to)
-                  ? 'url(#arrow-highlighted)'
-                  : 'url(#arrow)'
-              "
-              :style="{
-                filter:
-                  highlightedTaskIds.has(link.from) && highlightedTaskIds.has(link.to)
-                    ? 'drop-shadow(0 2px 4px rgba(64, 158, 255, 0.4))'
-                    : 'none',
-                transition: 'all 0.3s ease',
-              }"
-            />
-          </g>
-        </svg>
+        <!-- 关系线组件（Canvas 渲染，支持虚拟渲染） -->
+        <GanttLinks
+          :tasks="tasks"
+          :task-bar-positions="taskBarPositions"
+          :width="canvasWidth"
+          :height="canvasHeight"
+          :offset-left="canvasOffsetLeft"
+          :highlighted-task-id="highlightedTaskId"
+          :highlighted-task-ids="highlightedTaskIds"
+          :hovered-task-id="hoveredTaskId"
+          :vertical-lines="monthFirstVerticalLines"
+          :show-vertical-lines="currentTimeScale === TimelineScale.WEEK"
+        />
 
         <!-- 年度视图今日标记线 -->
         <div
@@ -3325,37 +3344,6 @@ const handleAddSuccessor = (task: Task) => {
           }"
         ></div>
 
-        <!-- 月份1号竖直线（周视图） -->
-        <template v-if="currentTimeScale === TimelineScale.WEEK">
-          <template
-            v-for="(month, monthIndex) in timelineData"
-            :key="`vlines-${month.year}-${month.month}`"
-          >
-            <template v-if="month.isWeekView && month.weeks">
-              <template
-                v-for="(week, weekIndex) in month.weeks"
-                :key="`vline-${month.year}-${month.month}-${weekIndex}`"
-              >
-                <template
-                  v-for="(subDay, dayIndex) in week.subDays || []"
-                  :key="`vlineday-${monthIndex}-${weekIndex}-${dayIndex}`"
-                >
-                  <div
-                    v-if="subDay.date && subDay.date.getDate() === 1"
-                    class="month-first-vertical-line"
-                    :style="{
-                      left: `${
-                        getGlobalWeekPosition(monthIndex, weekIndex) + dayIndex * (60 / 7)
-                      }px`,
-                      height: `${contentHeight}px`,
-                    }"
-                  ></div>
-                </template>
-              </template>
-            </template>
-          </template>
-        </template>
-
         <!-- 背景列 -->
         <div class="day-columns" :style="{ height: `${contentHeight}px` }">
           <!-- 小时视图背景列 -->
@@ -3461,7 +3449,7 @@ const handleAddSuccessor = (task: Task) => {
                 :style="{ width: '59px', height: `${contentHeight}px` }"
               ></div>
 
-              <!-- 周视图背景列 -->
+              <!-- 周视图背景列 - 优化：移除 subDay 子列，减少 364 个 DOM 节点 -->
               <div
                 v-else-if="month.isWeekView && month.weeks"
                 class="month-week-columns"
@@ -3488,7 +3476,7 @@ const handleAddSuccessor = (task: Task) => {
                       weekend: subDay.dayOfWeek === 0 || subDay.dayOfWeek === 6,
                       today: isToday(subDay.date),
                     }"
-                    :style="{ height: `${contentHeight}px`, width: '8.57px' }"
+                    :style="{ height: `${contentHeight}px`, width: `${dayWidth}px` }"
                   ></div>
                 </div>
               </div>
@@ -3522,6 +3510,7 @@ const handleAddSuccessor = (task: Task) => {
         <!-- 同时需要考虑左侧TaskList包含1px的bottom border -->
         <div class="task-bar-container" :style="{ height: `${contentHeight}px` }">
           <div class="task-rows" :style="{ height: `${contentHeight}px` }">
+            <!-- 使用v-memo减少渲染 -->
             <div
               v-for="(task, index) in tasks"
               :key="task.id"
@@ -3619,7 +3608,7 @@ const handleAddSuccessor = (task: Task) => {
                 :container-width="timelineContainerWidth"
                 :hide-bubbles="hideBubbles"
                 :timeline-data="
-                  currentTimeScale === TimelineScale.HOUR ? [] : timelineData
+                  currentTimeScale === TimelineScale.HOUR ? optimizedTimelineData : timelineData
                 "
                 :current-time-scale="currentTimeScale"
                 :task-bar-config="props.taskBarConfig"
@@ -3662,13 +3651,14 @@ const handleAddSuccessor = (task: Task) => {
   display: flex;
   flex-direction: column;
   background: var(--gantt-bg-primary, #ffffff);
-  overflow-x: auto;
+  overflow-x: auto; /* 横向滚动，显示滚动条 */
+  overflow-y: hidden; /* 纵向滚动，但不显示滚动条 */
   width: 100%;
   cursor: grab;
   transition: background-color 0.3s ease;
   position: relative; /* 为覆盖层定位 */
 
-  /* Webkit浏览器滚动条样式 */
+  /* Webkit浏览器滚动条样式 - 只显示横向滚动条 */
   scrollbar-width: thin;
   scrollbar-color: var(--gantt-scrollbar-thumb) transparent;
 }
@@ -3850,22 +3840,17 @@ const handleAddSuccessor = (task: Task) => {
 }
 
 .week-sub-days {
-  display: flex;
+  /* 优化：删除子节点后，这个容器仅作为占位符，无需复杂样式 */
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
+  pointer-events: none; /* 不阻挡事件穿透 */
 }
 
-.week-sub-day {
-  flex: 1;
-  height: 100%;
-  box-sizing: border-box;
-  /* 每个子天的宽度为 60px / 7 ≈ 8.57px */
-  width: 8.57px;
-  /* 不显示边框，仅用于定位计算 */
-}
+/* 优化：week-sub-day 样式已废弃，子节点已移除以减少 DOM 节点 */
+/* .week-sub-day 不再使用 */
 
 /* 月份1号标记旗帜样式 */
 .month-first-flag {
@@ -3908,22 +3893,6 @@ const handleAddSuccessor = (task: Task) => {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
 
-/* 月份1号竖直线样式 */
-.month-first-vertical-line {
-  position: absolute;
-  top: 0;
-  width: 1px;
-  background-color: var(--gantt-primary, #409eff);
-  opacity: 0.6;
-  z-index: 5;
-  pointer-events: none;
-}
-
-/* 暗色主题下的竖直线 */
-:global(html[data-theme='dark']) .month-first-vertical-line {
-  background-color: var(--gantt-primary-light, #66b1ff);
-}
-
 /* 周视图背景列样式 */
 .month-week-columns {
   display: flex;
@@ -3934,8 +3903,11 @@ const handleAddSuccessor = (task: Task) => {
   position: relative;
   border-right: 1px solid var(--gantt-border-light, #e4e7ed);
   box-sizing: border-box;
-  display: flex;
-  align-items: stretch;
+
+  /* 优化：使用 CSS Grid 代替 7 个 DOM 节点 */
+  display: grid;
+  grid-template-columns: repeat(7, 1fr); /* 7 列等宽 */
+  gap: 0;
 }
 
 .week-column:last-child {
@@ -3946,10 +3918,10 @@ const handleAddSuccessor = (task: Task) => {
   background-color: rgba(64, 158, 255, 0.1);
 }
 
+/* 优化：sub-day-column 样式保留用于其他可能的用途，但背景列不再使用 */
 .sub-day-column {
   position: relative;
   box-sizing: border-box;
-  /* 子列不显示边框，仅用于定位 */
 }
 
 .sub-day-column.weekend {
@@ -3963,44 +3935,21 @@ const handleAddSuccessor = (task: Task) => {
 
 .timeline-body {
   flex: 1;
-  overflow: auto;
+  overflow-x: hidden; /* 禁用横向滚动，由父容器.timeline处理 */
+  overflow-y: auto; /* 只保留纵向滚动 */
   position: relative;
   width: fit-content;
   background: var(--gantt-bg-primary, #ffffff);
   cursor: grab;
   transition: background-color 0.3s ease;
 
-  /* Webkit浏览器滚动条样式 */
-  scrollbar-width: thin;
-  scrollbar-color: var(--gantt-scrollbar-thumb) transparent;
-}
-
-.timeline-body:active {
-  cursor: grabbing;
+  /* 隐藏滚动条但保留滚动功能 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
 }
 
 .timeline-body::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.timeline-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.timeline-body::-webkit-scrollbar-thumb {
-  background-color: var(--gantt-scrollbar-thumb);
-  border-radius: 4px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-.timeline-body::-webkit-scrollbar-thumb:hover {
-  background-color: var(--gantt-scrollbar-thumb-hover);
-}
-
-.timeline-body::-webkit-scrollbar-corner {
-  background: transparent;
+  display: none; /* Chrome, Safari, Opera */
 }
 
 .timeline-body-content {
diff --git a/src/utils/perfMonitor.ts b/src/utils/perfMonitor.ts
new file mode 100644
index 0000000..a84f3a2
--- /dev/null
+++ b/src/utils/perfMonitor.ts
@@ -0,0 +1,263 @@
+/**
+ * 性能监控工具
+ */
+
+let lastLogTime = 0
+const LOG_THROTTLE = 100 // 最多每 100ms 输出一次日志
+
+// FPS 监控相关
+let fpsFrameCount = 0
+let fpsLastTime = performance.now()
+let fpsValues: number[] = []
+let fpsMonitorEnabled = false
+let fpsRafId: number | null = null
+
+// 绘制性能统计
+interface DrawStats {
+  totalDraws: number
+  totalDuration: number
+  minDuration: number
+  maxDuration: number
+  avgDuration: number
+  recentDraws: Array<{ timestamp: number; duration: number; details?: unknown }>
+}
+
+const drawStats: DrawStats = {
+  totalDraws: 0,
+  totalDuration: 0,
+  minDuration: Infinity,
+  maxDuration: 0,
+  avgDuration: 0,
+  recentDraws: [],
+}
+
+const MAX_RECENT_DRAWS = 100 // 保留最近 100 次绘制记录
+
+export const perfMonitor = {
+  /**
+   * 记录性能日志（自动节流）
+   */
+  log(tag: string, data: unknown) {
+    const now = Date.now()
+    if (now - lastLogTime < LOG_THROTTLE) {
+      return
+    }
+    lastLogTime = now
+
+    // eslint-disable-next-line no-console
+    console.log(`[Perf] ${tag}:`, data)
+  },
+
+  /**
+   * 测量函数执行时间
+   */
+  measure<T>(tag: string, fn: () => T): T {
+    const start = performance.now()
+    const result = fn()
+    const end = performance.now()
+    const duration = end - start
+
+    if (duration > 5) {
+      // 只记录耗时超过 5ms 的操作
+      // eslint-disable-next-line no-console
+      console.log(`[Perf] ${tag}: ${duration.toFixed(2)}ms`)
+    }
+
+    return result
+  },
+
+  /**
+   * 启动 FPS 监控
+   * @param intervalMs 刷新间隔（毫秒），默认 1000ms
+   */
+  startFpsMonitor(intervalMs = 1000) {
+    if (fpsMonitorEnabled) {
+      // eslint-disable-next-line no-console
+      console.warn('[Perf] FPS 监控已在运行中')
+      return
+    }
+
+    fpsMonitorEnabled = true
+    fpsFrameCount = 0
+    fpsLastTime = performance.now()
+    fpsValues = []
+
+    // eslint-disable-next-line no-console
+    console.log('[Perf] FPS 监控已启动')
+
+    const updateFps = () => {
+      if (!fpsMonitorEnabled) return
+
+      fpsFrameCount++
+      const currentTime = performance.now()
+      const elapsed = currentTime - fpsLastTime
+
+      if (elapsed >= intervalMs) {
+        const fps = Math.round((fpsFrameCount * 1000) / elapsed)
+        fpsValues.push(fps)
+
+        // 保留最近 60 个 FPS 值用于计算平均值
+        if (fpsValues.length > 60) {
+          fpsValues.shift()
+        }
+
+        const avgFps = Math.round(fpsValues.reduce((a, b) => a + b, 0) / fpsValues.length)
+        const minFps = Math.min(...fpsValues)
+        const maxFps = Math.max(...fpsValues)
+
+        // 根据 FPS 设置不同颜色
+        const color = fps >= 55 ? '#67c23a' : fps >= 30 ? '#e6a23c' : '#f56c6c'
+
+        // eslint-disable-next-line no-console
+        console.log(
+          `%c[Perf] FPS: ${fps} | 平均: ${avgFps} | 最小: ${minFps} | 最大: ${maxFps}`,
+          `color: ${color}; font-weight: bold;`,
+        )
+
+        fpsFrameCount = 0
+        fpsLastTime = currentTime
+      }
+
+      fpsRafId = requestAnimationFrame(updateFps)
+    }
+
+    fpsRafId = requestAnimationFrame(updateFps)
+  },
+
+  /**
+   * 停止 FPS 监控
+   */
+  stopFpsMonitor() {
+    if (!fpsMonitorEnabled) {
+      // eslint-disable-next-line no-console
+      console.warn('[Perf] FPS 监控未运行')
+      return
+    }
+
+    fpsMonitorEnabled = false
+    if (fpsRafId !== null) {
+      cancelAnimationFrame(fpsRafId)
+      fpsRafId = null
+    }
+
+    // 输出最终统计
+    if (fpsValues.length > 0) {
+      const avgFps = Math.round(fpsValues.reduce((a, b) => a + b, 0) / fpsValues.length)
+      const minFps = Math.min(...fpsValues)
+      const maxFps = Math.max(...fpsValues)
+
+      // eslint-disable-next-line no-console
+      console.log(
+        `%c[Perf] FPS 监控已停止 | 总采样: ${fpsValues.length} | 平均: ${avgFps} | 最小: ${minFps} | 最大: ${maxFps}`,
+        'color: #909399; font-weight: bold;',
+      )
+    }
+
+    fpsValues = []
+  },
+
+  /**
+   * 记录绘制性能
+   * @param duration 绘制耗时（毫秒）
+   * @param details 额外的详细信息
+   */
+  recordDraw(duration: number, details?: unknown) {
+    drawStats.totalDraws++
+    drawStats.totalDuration += duration
+    drawStats.minDuration = Math.min(drawStats.minDuration, duration)
+    drawStats.maxDuration = Math.max(drawStats.maxDuration, duration)
+    drawStats.avgDuration = drawStats.totalDuration / drawStats.totalDraws
+
+    // 记录最近的绘制
+    drawStats.recentDraws.push({
+      timestamp: Date.now(),
+      duration,
+      details,
+    })
+
+    // 保持数组大小在限制内
+    if (drawStats.recentDraws.length > MAX_RECENT_DRAWS) {
+      drawStats.recentDraws.shift()
+    }
+  },
+
+  /**
+   * 获取绘制统计信息
+   */
+  getDrawStats() {
+    return {
+      ...drawStats,
+      recentDraws: drawStats.recentDraws.slice(-10), // 只返回最近 10 次
+    }
+  },
+
+  /**
+   * 打印绘制统计信息
+   */
+  printDrawStats() {
+    if (drawStats.totalDraws === 0) {
+      // eslint-disable-next-line no-console
+      console.log('[Perf] 暂无绘制数据')
+      return
+    }
+
+    const recent10 = drawStats.recentDraws.slice(-10)
+    const recent10Avg =
+      recent10.reduce((sum, item) => sum + item.duration, 0) / recent10.length
+
+    // eslint-disable-next-line no-console
+    console.log(
+      '%c[Perf] Canvas 绘制统计',
+      'color: #409eff; font-weight: bold; font-size: 14px;',
+    )
+    // eslint-disable-next-line no-console
+    console.table({
+      总绘制次数: drawStats.totalDraws,
+      平均耗时: `${drawStats.avgDuration.toFixed(2)}ms`,
+      最小耗时: `${drawStats.minDuration.toFixed(2)}ms`,
+      最大耗时: `${drawStats.maxDuration.toFixed(2)}ms`,
+      最近10次平均: `${recent10Avg.toFixed(2)}ms`,
+    })
+  },
+
+  /**
+   * 重置绘制统计
+   */
+  resetDrawStats() {
+    drawStats.totalDraws = 0
+    drawStats.totalDuration = 0
+    drawStats.minDuration = Infinity
+    drawStats.maxDuration = 0
+    drawStats.avgDuration = 0
+    drawStats.recentDraws = []
+
+    // eslint-disable-next-line no-console
+    console.log('[Perf] 绘制统计已重置')
+  },
+
+  /**
+   * 开始完整的性能测试（FPS + 绘制统计）
+   * @param durationMs 测试持续时间（毫秒），默认 10000ms (10秒)
+   */
+  startPerformanceTest(durationMs = 10000) {
+    // eslint-disable-next-line no-console
+    console.log(
+      `%c[Perf] 性能测试开始（持续 ${durationMs / 1000} 秒）`,
+      'color: #409eff; font-weight: bold; font-size: 16px;',
+    )
+
+    this.resetDrawStats()
+    this.startFpsMonitor()
+
+    setTimeout(() => {
+      this.stopFpsMonitor()
+      this.printDrawStats()
+
+      // eslint-disable-next-line no-console
+      console.log(
+        '%c[Perf] 性能测试完成',
+        'color: #67c23a; font-weight: bold; font-size: 16px;',
+      )
+    }, durationMs)
+  },
+}
diff --git a/vite.config.lib.ts b/vite.config.lib.ts
index c71620f..e3e5070 100644
--- a/vite.config.lib.ts
+++ b/vite.config.lib.ts
@@ -27,6 +27,8 @@ export default defineConfig({
       // 确保外部化处理那些你不想打包进库的依赖
       external: ['vue'],
       output: {
+        // 使用命名导出，避免默认导出警告
+        exports: 'named',
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
         globals: {
           vue: 'Vue',