v1.4.2-patch.3 - 性能提升
This commit is contained in:
LINING-PC\lining
@@ -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
|
||||
|
||||
+47
-44
@@ -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>
|
||||
```
|
||||
|
||||
@@ -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>
|
||||
```
|
||||
|
||||
@@ -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>"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
+148
-149
@@ -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 {
|
||||
|
||||
@@ -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')
|
||||
|
||||
+1
-1
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user