v1.4.2-patch.3 - 性能提升

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

README-EN.md

@@ -1778,6 +1778,7 @@ Override or extend default translations via `localeMessages` prop:
 
 <script setup lang="ts">
 const customMessages = {
+  "zh-CN": {
     // Task list related
     name: 'Task Name (Custom)',
     startDate: 'Start Date',
@@ -1825,6 +1826,8 @@ const customMessages = {
     overtime: 'overtime',
     overdue: 'overdue',
     // ... More custom translations
+  },
+  "en-US": {......}
 }
 </script>
 ```

README.md

@@ -1769,6 +1769,7 @@ const handleLanguageChange = (lang: 'zh-CN' | 'en-US') => {
 
 <script setup lang="ts">
 const customMessages = {
+  "zh-CN": {
     // 任务列表相关
     name: '任务名称（自定义）',
     startDate: '开始日期',
@@ -1816,6 +1817,8 @@ const customMessages = {
     overtime: '超时',
     overdue: '逾期',
     // ... 更多自定义翻译
+  },
+  "en-US": {......}
 }
 </script>
 ```

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>"
+    ]
   }
 ]

npm-webpack-demo/src/App.vue

@@ -1,3 +1,150 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { GanttChart } from 'jordium-gantt-vue3'
+import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
+
+// 定义类型接口
+interface TaskListColumnConfig {
+  key: string;
+  label: string;
+  visible: boolean;
+  width?: number;
+}
+
+interface ToolbarConfig {
+  showAddTask?: boolean;
+  showAddMilestone?: boolean;
+  showTodayLocate?: boolean;
+  showExportCsv?: boolean;
+  showExportPdf?: boolean;
+  showLanguage?: boolean;
+  showTheme?: boolean;
+  showFullscreen?: boolean;
+  showTimeScale?: boolean;
+  timeScaleDimensions?: string[];
+  defaultTimeScale?: string;
+  showExpandCollapse?: boolean;
+}
+
+const tasks = ref([
+  {
+    id: 1,
+    name: '项目启动',
+    startDate: '2025-10-30',
+    endDate: '2025-11-5',
+    progress: 100,
+    department: '管理部',
+    departmentCode: 'D001',
+    type: 'task',
+  },
+])
+
+const milestones = ref([
+  {
+    id: 101,
+    name: '项目立项',
+    startDate: '2025-10-29',
+    type: 'milestone',
+    icon: 'diamond',
+  },
+])
+
+const customMessages = {
+  'zh-CN': {
+    department: '部门',
+    departmentCode: '部门编号',
+  },
+  'en-US': {
+    department: 'Department',
+    departmentCode: 'Department Code',
+  },
+}
+// const tasks = ref([])
+
+// const milestones = ref([])
+const showAddTaskDrawer = ref(false)
+const showAddMilestoneDialog = ref(false)
+
+// 定义可动态配置的列
+const availableColumns = ref<TaskListColumnConfig[]>([
+  { key: 'startDate', label: '开始日期', visible: true },
+  { key: 'endDate', label: '结束日期', visible: true },
+  { key: 'progress', label: '进度', visible: true },
+  { key: 'department', label: '部门', visible: true, width: 120 },
+  { key: 'departmentCode', label: '部门编号', visible: true },
+])
+
+// TaskList宽度配置示例
+const taskListConfig = {
+  defaultWidth: '50%',  // 默认展开宽度50%
+  minWidth: '300px',      // 最小宽度300px（默认280px）
+  maxWidth: '1200px',      // 最大宽度1200px（默认1160px）
+  columns: availableColumns.value,
+}
+
+// toolbar配置示例
+const toolbarConfig: ToolbarConfig = {
+  showAddTask: true,               // 显示添加任务按钮
+  showAddMilestone: true,          // 显示添加里程碑按钮
+  showTodayLocate: true,           // 显示定位到今天按钮
+  showExportCsv: true,             // 显示导出CSV按钮
+  showExportPdf: true,             // 显示导出PDF按钮
+  showLanguage: true,              // 显示语言切换按钮
+  showTheme: true,                 // 显示主题切换按钮
+  showFullscreen: true,            // 显示全屏按钮
+  showTimeScale: true,             // 显示时间刻度按钮组
+  timeScaleDimensions: [           // 显示所有时间刻度维度
+    'hour', 'day', 'week', 'month', 'quarter', 'year',
+  ],
+  defaultTimeScale: 'week',        // 默认选中周视图
+  showExpandCollapse: false,         // 显示展开/折叠按钮
+}
+
+const newTask = ref({
+  name: '',
+  startDate: '',
+  endDate: '',
+})
+
+const addTask = () => {
+  tasks.value.push({
+    id: tasks.value.length + 1,
+    name: newTask.value.name,
+    startDate: newTask.value.startDate,
+    endDate: newTask.value.endDate,
+    progress: 0,
+    department: '未分配',
+    departmentCode: 'D000',
+    type: 'task',
+  })
+  newTask.value = { name: '', startDate: '', endDate: '' }
+  showAddTaskDrawer.value = false
+}
+
+const addMilestone = () => {
+  milestones.value.push({
+    id: milestones.value.length + 101,
+    name: newTask.value.name,
+    startDate: newTask.value.startDate,
+    type: 'milestone',
+    icon: 'diamond',
+  })
+  console.log('milestones: ', milestones.value)
+  newTask.value = { name: '', startDate: '', endDate: '' }
+  showAddMilestoneDialog.value = false
+}
+
+const onTaskDblclick = (task: any) => {
+  alert(`双击任务: ${task.name}`)
+}
+const onTaskClick = (task: any) => {
+  alert(`单击任务: ${task.name}`)
+}
+const onMilestoneDblclick = (milestone: any) => {
+  alert(`双击里程碑: ${milestone.name}`)
+}
+</script>
+
 <template>
   <div>
     <div style="height: 600px;">
@@ -58,8 +205,8 @@
 
     <!-- 自定义Dialog组件基于element plus -->
     <el-dialog
-      title="自定义添加里程碑组件 - Element Plus" 
       v-model="showAddMilestoneDialog"
+      title="自定义添加里程碑组件 - Element Plus"
       width="400px"
       @close="newTask = { name: '', startDate: '', endDate: '' }"
     >
@@ -83,154 +230,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue';
-import { GanttChart } from 'jordium-gantt-vue3'
-import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
-
-// 定义类型接口
-interface TaskListColumnConfig {
-  key: string;
-  label: string;
-  visible: boolean;
-  width?: number;
-}
-
-interface ToolbarConfig {
-  showAddTask?: boolean;
-  showAddMilestone?: boolean;
-  showTodayLocate?: boolean;
-  showExportCsv?: boolean;
-  showExportPdf?: boolean;
-  showLanguage?: boolean;
-  showTheme?: boolean;
-  showFullscreen?: boolean;
-  showTimeScale?: boolean;
-  timeScaleDimensions?: string[];
-  defaultTimeScale?: string;
-  showExpandCollapse?: boolean;
-}
-
-const tasks = ref([
-  {
-    id: 1,
-    name: '项目启动',
-    startDate: '2025-10-30',
-    endDate: '2025-11-5',
-    progress: 100,
-    department: '管理部',
-    departmentCode: 'D001',
-    type: 'task',
-  }
-])
-
-const milestones = ref([
-  {
-    id: 101,
-    name: '项目立项',
-    startDate: '2025-10-29',
-    type: 'milestone',
-    icon: 'diamond'
-  }
-])
-
-const customMessages = {
-  'zh-CN': {
-    department: '部门',
-    departmentCode: '部门编号',
-  },
-  'en-US': {
-    department: 'Department',
-    departmentCode: 'Department Code',
-  }
-}
-// const tasks = ref([])
-
-// const milestones = ref([])
-const showAddTaskDrawer = ref(false);
-const showAddMilestoneDialog = ref(false);
-
-// 定义可动态配置的列
-const availableColumns = ref<TaskListColumnConfig[]>([
-  { key: 'startDate', label: '开始日期', visible: true },
-  { key: 'endDate', label: '结束日期', visible: true },
-  { key: 'progress', label: '进度', visible: true },
-  { key: 'department', label: '部门', visible: true, width: 120 },
-  { key: 'departmentCode', label: '部门编号', visible: true },
-])
-
-// TaskList宽度配置示例
-const taskListConfig = {
-  defaultWidth: '50%',  // 默认展开宽度50%
-  minWidth: '300px',      // 最小宽度300px（默认280px）
-  maxWidth: '1200px',      // 最大宽度1200px（默认1160px）
-  columns: availableColumns.value
-}
-
-// toolbar配置示例
-const toolbarConfig: ToolbarConfig = {
-  showAddTask: true,               // 显示添加任务按钮
-  showAddMilestone: true,          // 显示添加里程碑按钮
-  showTodayLocate: true,           // 显示定位到今天按钮
-  showExportCsv: true,             // 显示导出CSV按钮
-  showExportPdf: true,             // 显示导出PDF按钮
-  showLanguage: true,              // 显示语言切换按钮
-  showTheme: true,                 // 显示主题切换按钮
-  showFullscreen: true,            // 显示全屏按钮
-  showTimeScale: true,             // 显示时间刻度按钮组
-  timeScaleDimensions: [           // 显示所有时间刻度维度
-    'hour', 'day', 'week', 'month', 'quarter', 'year'
-  ],
-  defaultTimeScale: 'week',        // 默认选中周视图
-  showExpandCollapse: false         // 显示展开/折叠按钮
-}
-
-
-const newTask = ref({
-  name: '',
-  startDate: '',
-  endDate: ''
-});
-
-const addTask = () => {
-  tasks.value.push({
-    id: tasks.value.length + 1,
-    name: newTask.value.name,
-    startDate: newTask.value.startDate,
-    endDate: newTask.value.endDate,
-    progress: 0,
-    department: '未分配',
-    departmentCode: 'D000',
-    type: 'task',
-  });
-  newTask.value = { name: '', startDate: '', endDate: '' };
-  showAddTaskDrawer.value = false;
-};
-
-const addMilestone = () => {
-  milestones.value.push({
-    id: milestones.value.length + 101,
-    name: newTask.value.name,
-    startDate: newTask.value.startDate,
-    type: 'milestone',
-    icon: 'diamond'
-  });
-  console.log('milestones: ', milestones.value)
-  newTask.value = { name: '', startDate: '', endDate: '' };
-  showAddMilestoneDialog.value = false;
-}
-
-const onTaskDblclick = (task: any) => {
-  alert(`双击任务: ${task.name}`)
-}
-const onTaskClick = (task: any) => {
-  alert(`单击任务: ${task.name}`)
-}
-const onMilestoneDblclick = (milestone: any) => {
-  alert(`双击里程碑: ${milestone.name}`)
-}
-</script>
-
 <style scoped>
 /* 抽屉遮罩层 */
 .drawer-overlay {

npm-webpack-demo/src/main.js

@@ -1,8 +1,8 @@
-import { createApp } from 'vue';
+import { createApp } from 'vue'
-import App from './App.vue';
+import App from './App.vue'
-import ElementPlus from 'element-plus';
+import ElementPlus from 'element-plus'
-import 'element-plus/theme-chalk/index.css';
+import 'element-plus/theme-chalk/index.css'
 
-const app = createApp(App);
+const app = createApp(App)
-app.use(ElementPlus);
+app.use(ElementPlus)
-app.mount('#app');
+app.mount('#app')

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",