v1.0.2 - updates
@@ -11,17 +11,17 @@
|
||||
|
||||
## 🖼️ Demo Show
|
||||
|
||||

|
||||

|
||||
|
||||
## 🎨 Theme Support
|
||||
|
||||
### Light Theme
|
||||
|
||||

|
||||

|
||||
|
||||
### Dark Theme
|
||||
|
||||

|
||||

|
||||
|
||||
## 🚀 Features
|
||||
|
||||
|
||||
@@ -13,17 +13,17 @@
|
||||
|
||||
## 🖼️ Demo展示
|
||||
|
||||

|
||||

|
||||
|
||||
## 🎨 主题支持
|
||||
|
||||
### 亮色主题
|
||||
|
||||

|
||||

|
||||
|
||||
### 暗色主题
|
||||
|
||||

|
||||

|
||||
|
||||
## 🚀 插件特点
|
||||
|
||||
|
||||
14
demo/App.vue
@@ -1,17 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
//import GanttChart from '../src/components/GanttChart.vue'
|
||||
//import TaskDrawer from '../src/components/TaskDrawer.vue'
|
||||
//import MilestoneDialog from '../src/components/MilestoneDialog.vue'
|
||||
import GanttChart from '../src/components/GanttChart.vue'
|
||||
import TaskDrawer from '../src/components/TaskDrawer.vue'
|
||||
import MilestoneDialog from '../src/components/MilestoneDialog.vue'
|
||||
import demoData from './data.json'
|
||||
import packageInfo from '../package.json'
|
||||
// 导入主题变量
|
||||
//import '../src/styles/theme-variables.css'
|
||||
import '../src/styles/theme-variables.css'
|
||||
import VersionHistoryDrawer from './VersionHistoryDrawer.vue'
|
||||
//import { useMessage } from '../src/composables/useMessage'
|
||||
//import type { Task } from '../src/models/Task'
|
||||
import { GanttChart, TaskDrawer, MilestoneDialog, useMessage, Task } from 'jordium-gantt-vue3'
|
||||
import 'jordium-gantt-vue3/dist/jordium-gantt-vue3.css'
|
||||
import { useMessage } from '../src/composables/useMessage'
|
||||
import type { Task } from '../src/models/Task'
|
||||
|
||||
const { showMessage } = useMessage()
|
||||
|
||||
|
||||
BIN
design/screenshots/dark-theme.png
Normal file
|
After Width: | Height: | Size: 218 KiB |
BIN
design/screenshots/demo.gif
Normal file
|
After Width: | Height: | Size: 17 MiB |
BIN
design/screenshots/light-theme.png
Normal file
|
After Width: | Height: | Size: 166 KiB |
@@ -109,14 +109,14 @@ const handleMilestoneDelete = async (milestoneId: number) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('milestone-deleted', {
|
||||
detail: { milestoneId },
|
||||
})
|
||||
}),
|
||||
)
|
||||
|
||||
// 触发强制更新事件,确保Timeline重新渲染
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('milestone-data-changed', {
|
||||
detail: { milestones: milestones.value },
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -248,7 +248,7 @@ const handleTaskAdd = (newTask: Task) => {
|
||||
const maxId = Math.max(
|
||||
...tasks.value.map(t => t.id || 0),
|
||||
...milestones.value.map(m => m.id || 0),
|
||||
0
|
||||
0,
|
||||
)
|
||||
newTask.id = maxId + 1
|
||||
}
|
||||
@@ -379,7 +379,7 @@ function handleTaskbarDragOrResizeEnd(newTask) {
|
||||
`开始: ${oldTask.startDate} → ${newTask.startDate}\n` +
|
||||
`结束: ${oldTask.endDate} → ${newTask.endDate}`,
|
||||
'info',
|
||||
{ closable: true }
|
||||
{ closable: true },
|
||||
)
|
||||
}
|
||||
function handleMilestoneDragEnd(newMilestone) {
|
||||
@@ -389,7 +389,7 @@ function handleMilestoneDragEnd(newMilestone) {
|
||||
`里程碑【${newMilestone.name}】\n` +
|
||||
`开始: ${oldMilestone.endDate} → ${newMilestone.startDate}`,
|
||||
'info',
|
||||
{ closable: true }
|
||||
{ closable: true },
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
0
public/assets/gantt-title-icon.svg
Normal file
BIN
public/assets/gitee.png
Normal file
|
After Width: | Height: | Size: 6.9 KiB |
1
public/assets/gitee.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750864628544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5058" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="5059"></path></svg>
|
||||
|
After Width: | Height: | Size: 1010 B |
BIN
public/assets/github.png
Normal file
|
After Width: | Height: | Size: 7.6 KiB |
1
public/assets/github.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750864675427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6018" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667" fill="#231F20" p-id="6019"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/assets/jordium-gantt-vue3-logo.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
12
public/assets/jordium-gantt-vue3-logo.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg class="gantt-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="4" width="20" height="2" rx="1" fill="#409eff" />
|
||||
<rect x="2" y="8" width="12" height="2" rx="1" fill="#67c23a" />
|
||||
<rect x="2" y="12" width="16" height="2" rx="1" fill="#e6a23c" />
|
||||
<rect x="2" y="16" width="8" height="2" rx="1" fill="#f56c6c" />
|
||||
<rect x="2" y="20" width="14" height="2" rx="1" fill="#909399" />
|
||||
<circle cx="22" cy="5" r="1" fill="#409eff" />
|
||||
<circle cx="16" cy="9" r="1" fill="#67c23a" />
|
||||
<circle cx="20" cy="13" r="1" fill="#e6a23c" />
|
||||
<circle cx="12" cy="17" r="1" fill="#f56c6c" />
|
||||
<circle cx="18" cy="21" r="1" fill="#909399" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 684 B |
BIN
public/assets/npm.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
1
public/assets/npm.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1751368683402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4438" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M117.149737 906.850263V117.160081h789.690182v789.690182z m148.521374-641.706667v492.533657h248.873374V367.843556h145.025293v389.906101h98.735321V265.143596z" fill="#CB3837" p-id="4439"></path></svg>
|
||||
|
After Width: | Height: | Size: 531 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -134,7 +134,7 @@ const handleTaskRowHover = (taskId: number | null) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('timeline-task-hover', {
|
||||
detail: taskId,
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -186,7 +186,7 @@ const handleMilestoneIconChange = (milestoneId: number, icon: string) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('milestone-icon-changed', {
|
||||
detail: { milestoneId, icon },
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -204,7 +204,7 @@ const handleMilestoneSave = (updatedMilestone: any) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('milestone-data-updated', {
|
||||
detail: { milestone: updatedMilestone },
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -217,14 +217,14 @@ const handleMilestoneDelete = (milestoneId: number) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('milestone-deleted', {
|
||||
detail: { milestoneId },
|
||||
})
|
||||
}),
|
||||
)
|
||||
|
||||
// 广播里程碑数据变化事件,确保Timeline重新渲染
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('milestone-data-changed', {
|
||||
detail: { milestoneId },
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -239,7 +239,7 @@ const handleMilestoneUpdate = (updatedMilestone: any) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('milestone-data-updated', {
|
||||
detail: { milestone: updatedMilestone },
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -301,7 +301,7 @@ watch(
|
||||
() => [timelineConfig.value.startDate, timelineConfig.value.endDate],
|
||||
() => {
|
||||
timelineData.value = generateTimelineData()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// 保证每次时间轴数据变化后都自动居中今日(仅初始化和外部props变更时触发,不因任务/里程碑变更触发)
|
||||
@@ -316,7 +316,7 @@ watch(
|
||||
})
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
// 将今日定位到时间线中间位置
|
||||
@@ -329,7 +329,7 @@ const scrollToTodayCenter = (retry = 0) => {
|
||||
const startNormalized = new Date(
|
||||
timelineStart.getFullYear(),
|
||||
timelineStart.getMonth(),
|
||||
timelineStart.getDate()
|
||||
timelineStart.getDate(),
|
||||
)
|
||||
|
||||
// 计算今天距离时间线开始日期的天数
|
||||
@@ -412,7 +412,7 @@ const scrollToToday = () => {
|
||||
const startNormalized = new Date(
|
||||
timelineStart.getFullYear(),
|
||||
timelineStart.getMonth(),
|
||||
timelineStart.getDate()
|
||||
timelineStart.getDate(),
|
||||
)
|
||||
|
||||
// 计算今天距离时间线开始日期的天数
|
||||
@@ -463,7 +463,7 @@ const updateTask = (updatedTask: Task) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('task-updated', {
|
||||
detail: updatedTask,
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -493,7 +493,7 @@ const handleDrawerSubmit = (task: Task) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('task-added', {
|
||||
detail: task,
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -599,7 +599,7 @@ onMounted(() => {
|
||||
// 监听TaskList的垂直滚动事件
|
||||
window.addEventListener(
|
||||
'task-list-vertical-scroll',
|
||||
handleTaskListVerticalScroll as EventListener
|
||||
handleTaskListVerticalScroll as EventListener,
|
||||
)
|
||||
// 监听语言变化
|
||||
window.addEventListener('locale-changed', handleLocaleChange as EventListener)
|
||||
@@ -652,7 +652,7 @@ watch(
|
||||
updateSvgSize()
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// 拖拽滑动相关状态
|
||||
@@ -762,7 +762,7 @@ const handleTimelineScroll = (event: Event) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('timeline-vertical-scroll', {
|
||||
detail: { scrollTop },
|
||||
})
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
@@ -795,7 +795,7 @@ onUnmounted(() => {
|
||||
window.removeEventListener('task-list-hover', handleTaskListHover as EventListener)
|
||||
window.removeEventListener(
|
||||
'task-list-vertical-scroll',
|
||||
handleTaskListVerticalScroll as EventListener
|
||||
handleTaskListVerticalScroll as EventListener,
|
||||
)
|
||||
window.removeEventListener('locale-changed', handleLocaleChange as EventListener)
|
||||
window.removeEventListener('splitter-drag-start', handleSplitterDragStart as EventListener)
|
||||
@@ -823,7 +823,7 @@ const handleTaskDelete = (taskId: number) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('task-deleted', {
|
||||
detail: taskId,
|
||||
})
|
||||
}),
|
||||
)
|
||||
|
||||
// 关闭抽屉
|
||||
|
||||
@@ -5,6 +5,8 @@ import vue from '@vitejs/plugin-vue'
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
build: {
|
||||
outDir: './npm-package/dist',
|
||||
emptyOutDir: true,
|
||||
lib: {
|
||||
entry: './src/index.ts',
|
||||
name: 'JordiumGanttVue3',
|
||||
|
||||