alighasami/jordium-gantt-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
LINING-PC\lining
2025-11-13 10:28:44 +08:00
parent 0db919cf50
commit ae82e29947
8 changed files with 251 additions and 1979 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+24
View File
@@ -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/), 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). 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 ## [1.4.2-patch2] - 2025-11-11
### Fixed ### Fixed
README-EN.md
+47 -44
View File
@@ -1778,53 +1778,56 @@ Override or extend default translations via `localeMessages` prop:
<script setup lang="ts"> <script setup lang="ts">
const customMessages = { const customMessages = {
// Task list related "zh-CN": {
name: 'Task Name (Custom)', // Task list related
startDate: 'Start Date', name: 'Task Name (Custom)',
endDate: 'End Date', startDate: 'Start Date',
duration: 'Duration', endDate: 'End Date',
progress: 'Completion', duration: 'Duration',
predecessor: 'Predecessors', progress: 'Completion',
assignee: 'Assignee', predecessor: 'Predecessors',
estimatedHours: 'Estimated Hours', assignee: 'Assignee',
actualHours: 'Actual Hours' estimatedHours: 'Estimated Hours',
actualHours: 'Actual Hours'
// Toolbar related // Toolbar related
addTask: 'New Task', addTask: 'New Task',
addMilestone: 'New Milestone', addMilestone: 'New Milestone',
today: 'Today', today: 'Today',
exportCsv: 'Export CSV', exportCsv: 'Export CSV',
exportPdf: 'Export PDF', exportPdf: 'Export PDF',
fullscreen: 'Fullscreen', fullscreen: 'Fullscreen',
exitFullscreen: 'Exit Fullscreen', exitFullscreen: 'Exit Fullscreen',
language: 'Language', language: 'Language',
theme: 'Theme', theme: 'Theme',
expandAll: 'Expand All', expandAll: 'Expand All',
collapseAll: 'Collapse All' collapseAll: 'Collapse All'
// Internal Task editor related // Internal Task editor related
title: 'Task Details', title: 'Task Details',
titleEdit: 'Edit Task', titleEdit: 'Edit Task',
titleNew: 'New Task', titleNew: 'New Task',
name: 'Task Name', name: 'Task Name',
startDate: 'Start Date', startDate: 'Start Date',
endDate: 'End Date', endDate: 'End Date',
assignee: 'Assignee', assignee: 'Assignee',
predecessor: 'Predecessors', predecessor: 'Predecessors',
description: 'Description', description: 'Description',
estimatedHours: 'Estimated Hours', estimatedHours: 'Estimated Hours',
actualHours: 'Actual Hours', actualHours: 'Actual Hours',
progress: 'Progress', progress: 'Progress',
save: 'Save', save: 'Save',
cancel: 'Cancel', cancel: 'Cancel',
delete: 'Delete' delete: 'Delete'
// Other texts // Other texts
days: 'days', days: 'days',
hours: 'hours', hours: 'hours',
overtime: 'overtime', overtime: 'overtime',
overdue: 'overdue', overdue: 'overdue',
// ... More custom translations // ... More custom translations
},
"en-US": {......}
} }
</script> </script>
``` ```
README.md
+47 -44
View File
@@ -1769,53 +1769,56 @@ const handleLanguageChange = (lang: 'zh-CN' | 'en-US') => {
<script setup lang="ts"> <script setup lang="ts">
const customMessages = { const customMessages = {
// 任务列表相关 "zh-CN": {
name: '任务名称（自定义）', // 任务列表相关
startDate: '开始日期', name: '任务名称（自定义）',
endDate: '结束日期', startDate: '开始日期',
duration: '工期', endDate: '结束日期',
progress: '完成度', duration: '工期',
predecessor: '前置任务', progress: '完成度',
assignee: '负责人', predecessor: '前置任务',
estimatedHours: '预估工时', assignee: '负责人',
actualHours: '实际工时' estimatedHours: '预估工时',
actualHours: '实际工时'
// 工具栏相关 // 工具栏相关
addTask: '新建任务', addTask: '新建任务',
addMilestone: '新建里程碑', addMilestone: '新建里程碑',
today: '今天', today: '今天',
exportCsv: '导出 CSV', exportCsv: '导出 CSV',
exportPdf: '导出 PDF', exportPdf: '导出 PDF',
fullscreen: '全屏', fullscreen: '全屏',
exitFullscreen: '退出全屏', exitFullscreen: '退出全屏',
language: '语言', language: '语言',
theme: '主题', theme: '主题',
expandAll: '全部展开', expandAll: '全部展开',
collapseAll: '全部折叠' collapseAll: '全部折叠'
// 内置任务编辑器相关 // 内置任务编辑器相关
title: '任务详情', title: '任务详情',
titleEdit: '编辑任务', titleEdit: '编辑任务',
titleNew: '新建任务', titleNew: '新建任务',
name: '任务名称', name: '任务名称',
startDate: '开始日期', startDate: '开始日期',
endDate: '结束日期', endDate: '结束日期',
assignee: '负责人', assignee: '负责人',
predecessor: '前置任务', predecessor: '前置任务',
description: '描述', description: '描述',
estimatedHours: '预估工时', estimatedHours: '预估工时',
actualHours: '实际工时', actualHours: '实际工时',
progress: '进度', progress: '进度',
save: '保存', save: '保存',
cancel: '取消', cancel: '取消',
delete: '删除' delete: '删除'
// 其他文本 // 其他文本
days: '天', days: '天',
hours: '小时', hours: '小时',
overtime: '超时', overtime: '超时',
overdue: '逾期', overdue: '逾期',
// ... 更多自定义翻译 // ... 更多自定义翻译
},
"en-US": {......}
} }
</script> </script>
``` ```
demo/version-history.json
+20
View File
@@ -286,5 +286,25 @@
"Defect fix: Fixed the issue of invalid column width configuration in TaskList", "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>" "<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
+105 -106
View File
@@ -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"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue'
import { GanttChart } from 'jordium-gantt-vue3' import { GanttChart } from 'jordium-gantt-vue3'
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css' import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
@@ -121,7 +36,7 @@ const tasks = ref([
department: '管理部', department: '管理部',
departmentCode: 'D001', departmentCode: 'D001',
type: 'task', type: 'task',
} },
]) ])
const milestones = ref([ const milestones = ref([
@@ -130,8 +45,8 @@ const milestones = ref([
name: '项目立项', name: '项目立项',
startDate: '2025-10-29', startDate: '2025-10-29',
type: 'milestone', type: 'milestone',
icon: 'diamond' icon: 'diamond',
} },
]) ])
const customMessages = { const customMessages = {
@@ -142,13 +57,13 @@ const customMessages = {
'en-US': { 'en-US': {
department: 'Department', department: 'Department',
departmentCode: 'Department Code', departmentCode: 'Department Code',
} },
} }
// const tasks = ref([]) // const tasks = ref([])
// const milestones = ref([]) // const milestones = ref([])
const showAddTaskDrawer = ref(false); const showAddTaskDrawer = ref(false)
const showAddMilestoneDialog = ref(false); const showAddMilestoneDialog = ref(false)
// 定义可动态配置的列 // 定义可动态配置的列
const availableColumns = ref<TaskListColumnConfig[]>([ const availableColumns = ref<TaskListColumnConfig[]>([
@@ -164,7 +79,7 @@ const taskListConfig = {
defaultWidth: '50%', // 默认展开宽度50% defaultWidth: '50%', // 默认展开宽度50%
minWidth: '300px', // 最小宽度300px（默认280px） minWidth: '300px', // 最小宽度300px（默认280px）
maxWidth: '1200px', // 最大宽度1200px（默认1160px） maxWidth: '1200px', // 最大宽度1200px（默认1160px）
columns: availableColumns.value columns: availableColumns.value,
} }
// toolbar配置示例 // toolbar配置示例
@@ -179,18 +94,17 @@ const toolbarConfig: ToolbarConfig = {
showFullscreen: true, // 显示全屏按钮 showFullscreen: true, // 显示全屏按钮
showTimeScale: true, // 显示时间刻度按钮组 showTimeScale: true, // 显示时间刻度按钮组
timeScaleDimensions: [ // 显示所有时间刻度维度 timeScaleDimensions: [ // 显示所有时间刻度维度
'hour', 'day', 'week', 'month', 'quarter', 'year' 'hour', 'day', 'week', 'month', 'quarter', 'year',
], ],
defaultTimeScale: 'week', // 默认选中周视图 defaultTimeScale: 'week', // 默认选中周视图
showExpandCollapse: false // 显示展开/折叠按钮 showExpandCollapse: false, // 显示展开/折叠按钮
} }
const newTask = ref({ const newTask = ref({
name: '', name: '',
startDate: '', startDate: '',
endDate: '' endDate: '',
}); })
const addTask = () => { const addTask = () => {
tasks.value.push({ tasks.value.push({
@@ -202,10 +116,10 @@ const addTask = () => {
department: '未分配', department: '未分配',
departmentCode: 'D000', departmentCode: 'D000',
type: 'task', type: 'task',
}); })
newTask.value = { name: '', startDate: '', endDate: '' }; newTask.value = { name: '', startDate: '', endDate: '' }
showAddTaskDrawer.value = false; showAddTaskDrawer.value = false
}; }
const addMilestone = () => { const addMilestone = () => {
milestones.value.push({ milestones.value.push({
@@ -213,11 +127,11 @@ const addMilestone = () => {
name: newTask.value.name, name: newTask.value.name,
startDate: newTask.value.startDate, startDate: newTask.value.startDate,
type: 'milestone', type: 'milestone',
icon: 'diamond' icon: 'diamond',
}); })
console.log('milestones: ', milestones.value) console.log('milestones: ', milestones.value)
newTask.value = { name: '', startDate: '', endDate: '' }; newTask.value = { name: '', startDate: '', endDate: '' }
showAddMilestoneDialog.value = false; showAddMilestoneDialog.value = false
} }
const onTaskDblclick = (task: any) => { const onTaskDblclick = (task: any) => {
@@ -231,6 +145,91 @@ const onMilestoneDblclick = (milestone: any) => {
} }
</script> </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> <style scoped>
/* 抽屉遮罩层 */ /* 抽屉遮罩层 */
.drawer-overlay { .drawer-overlay {
npm-webpack-demo/src/main.js
+7 -7
View File
@@ -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 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "jordium-gantt-vue3", "name": "jordium-gantt-vue3",
"version": "1.4.2-patch.2", "version": "1.4.2-patch.3",
"type": "module", "type": "module",
"main": "dist/jordium-gantt-vue3.cjs.js", "main": "dist/jordium-gantt-vue3.cjs.js",
"module": "dist/jordium-gantt-vue3.es.js", "module": "dist/jordium-gantt-vue3.es.js",
yarn.lock
-1777
View File
File diff suppressed because it is too large Load Diff