v1.0.1 - 升级文档说明 & 增加npm包集成示例
This commit is contained in:
LINING-PC\lining
@@ -0,0 +1,768 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import demoData from './data.json'
|
||||
import packageInfo from '../package.json'
|
||||
// 导入主题变量
|
||||
import VersionHistoryDrawer from './VersionHistoryDrawer.vue'
|
||||
import { GanttChart, TaskDrawer, MilestoneDialog, useMessage, Task } from 'jordium-gantt-vue3'
|
||||
import 'jordium-gantt-vue3/dist/jordium-gantt-vue3.css'
|
||||
|
||||
const { showMessage } = useMessage()
|
||||
|
||||
const tasks = ref<Task[]>([])
|
||||
const milestones = ref<Task[]>([])
|
||||
|
||||
// TaskDrawer状态管理
|
||||
const showTaskDrawer = ref(false)
|
||||
const currentTask = ref<Task | null>(null)
|
||||
const isEditMode = ref(false)
|
||||
|
||||
// MilestoneDialog状态管理
|
||||
const showMilestoneDialog = ref(false)
|
||||
const currentMilestone = ref<Task | null>(null)
|
||||
const isMilestoneEditMode = ref(false)
|
||||
|
||||
// 版本历史Drawer状态
|
||||
const showVersionDrawer = ref(false)
|
||||
|
||||
const toolbarConfig = {
|
||||
showAddTask: true,
|
||||
showAddMilestone: true,
|
||||
showTodayLocate: true,
|
||||
showExportCsv: true,
|
||||
showExportPdf: true,
|
||||
showLanguage: true,
|
||||
showTheme: true,
|
||||
showFullscreen: true,
|
||||
}
|
||||
|
||||
// 自定义CSV导出处理器（可选）
|
||||
const handleCustomCsvExport = () => {
|
||||
showMessage('自定义CSV导出被调用', 'info', { closable: true })
|
||||
|
||||
// 这里可以实现自定义的CSV导出逻辑
|
||||
// 例如：添加额外的数据处理、格式化、或发送到服务器等
|
||||
|
||||
// 如果不实现自定义逻辑，组件会使用内置的默认导出功能
|
||||
// return false // 返回false让组件使用默认实现
|
||||
|
||||
// 示例：这里直接使用默认实现
|
||||
return false
|
||||
}
|
||||
|
||||
// 其他工具栏事件处理器示例
|
||||
const handleAddTask = () => {
|
||||
// 打开TaskDrawer进行新建任务
|
||||
currentTask.value = null
|
||||
isEditMode.value = false
|
||||
showTaskDrawer.value = true
|
||||
}
|
||||
|
||||
const handleAddMilestone = () => {
|
||||
// 打开MilestoneDialog进行新建里程碑
|
||||
currentMilestone.value = null
|
||||
isMilestoneEditMode.value = false
|
||||
showMilestoneDialog.value = true
|
||||
}
|
||||
|
||||
const handleLanguageChange = (lang: 'zh' | 'en') => {
|
||||
showMessage(`语言切换到：${lang}`, 'info', { closable: true })
|
||||
}
|
||||
|
||||
const handleThemeChange = (isDark: boolean) => {
|
||||
showMessage(`主题切换到：${isDark ? '暗黑模式' : '明亮模式'}`, 'info', { closable: true })
|
||||
}
|
||||
|
||||
// 里程碑保存处理器示例
|
||||
const handleMilestoneSave = (milestone: Task) => {
|
||||
// 更新本地里程碑数据
|
||||
const milestoneIndex = milestones.value.findIndex(m => m.id === milestone.id)
|
||||
if (milestoneIndex !== -1) {
|
||||
// 更新现有里程碑
|
||||
milestones.value[milestoneIndex] = { ...milestone }
|
||||
} else {
|
||||
// 新增里程碑
|
||||
const newMilestone = {
|
||||
...milestone,
|
||||
id: Date.now(), // 生成临时ID
|
||||
type: 'milestone',
|
||||
}
|
||||
milestones.value.push(newMilestone)
|
||||
}
|
||||
|
||||
// 关闭里程碑对话框
|
||||
showMilestoneDialog.value = false
|
||||
}
|
||||
|
||||
// 里程碑删除处理器
|
||||
const handleMilestoneDelete = async (milestoneId: number) => {
|
||||
// 从里程碑数据中删除
|
||||
const milestoneIndex = milestones.value.findIndex(m => m.id === milestoneId)
|
||||
if (milestoneIndex !== -1) {
|
||||
milestones.value.splice(milestoneIndex, 1)
|
||||
showMessage('里程碑删除成功', 'success', { closable: false })
|
||||
|
||||
// 等待DOM更新完成
|
||||
await nextTick()
|
||||
|
||||
// 触发全局事件，通知其他组件里程碑已删除
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('milestone-deleted', {
|
||||
detail: { milestoneId },
|
||||
})
|
||||
)
|
||||
|
||||
// 触发强制更新事件，确保Timeline重新渲染
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('milestone-data-changed', {
|
||||
detail: { milestones: milestones.value },
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
// 关闭里程碑对话框
|
||||
showMilestoneDialog.value = false
|
||||
}
|
||||
|
||||
// 任务更新处理器
|
||||
const handleTaskUpdate = (updatedTask: Task) => {
|
||||
// 先找到原任务，检查parentId是否改变了
|
||||
const findOriginalTask = (taskArray: Task[]): Task | null => {
|
||||
for (const task of taskArray) {
|
||||
if (task.id === updatedTask.id) {
|
||||
return task
|
||||
}
|
||||
if (task.children && task.children.length > 0) {
|
||||
const found = findOriginalTask(task.children)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const originalTask = findOriginalTask(tasks.value)
|
||||
if (!originalTask) {
|
||||
showMessage(`未找到要更新的任务，ID： ${updatedTask.id}`, 'warning', { closable: true })
|
||||
return
|
||||
}
|
||||
|
||||
// 检查parentId是否改变了
|
||||
const parentIdChanged = originalTask.parentId !== updatedTask.parentId
|
||||
|
||||
if (parentIdChanged) {
|
||||
// parentId改变了，需要移除任务并重新添加到新位置
|
||||
const removeTaskFromArray = (taskArray: Task[]): Task | null => {
|
||||
for (let i = 0; i < taskArray.length; i++) {
|
||||
if (taskArray[i].id === updatedTask.id) {
|
||||
const removedTask = taskArray.splice(i, 1)[0]
|
||||
return removedTask
|
||||
}
|
||||
|
||||
if (taskArray[i].children && taskArray[i].children.length > 0) {
|
||||
const removedTask = removeTaskFromArray(taskArray[i].children!)
|
||||
if (removedTask) {
|
||||
if (taskArray[i].children!.length === 0) {
|
||||
delete taskArray[i].children
|
||||
taskArray[i].isParent = taskArray[i].type === 'story'
|
||||
}
|
||||
return removedTask
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const removedTask = removeTaskFromArray(tasks.value)
|
||||
if (!removedTask) return
|
||||
|
||||
const taskToAdd = {
|
||||
...updatedTask,
|
||||
isParent:
|
||||
updatedTask.type === 'story' || (updatedTask.children && updatedTask.children.length > 0),
|
||||
}
|
||||
|
||||
// 重新添加到新位置
|
||||
if (taskToAdd.parentId) {
|
||||
const addToParentChildren = (taskArray: Task[]): boolean => {
|
||||
for (const task of taskArray) {
|
||||
if (task.id === taskToAdd.parentId) {
|
||||
if (!task.children) task.children = []
|
||||
task.children.push(taskToAdd)
|
||||
task.isParent = true
|
||||
return true
|
||||
}
|
||||
if (task.children && task.children.length > 0) {
|
||||
if (addToParentChildren(task.children)) return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
if (!addToParentChildren(tasks.value)) {
|
||||
showMessage(`未找到新父任务，ID： ${taskToAdd.parentId}，将作为顶级任务添加`, 'warning', {
|
||||
closable: true,
|
||||
})
|
||||
tasks.value.push(taskToAdd)
|
||||
}
|
||||
} else {
|
||||
tasks.value.push(taskToAdd)
|
||||
}
|
||||
} else {
|
||||
// parentId没有改变，只是就地更新任务数据
|
||||
const updateTaskInPlace = (taskArray: Task[]): boolean => {
|
||||
for (let i = 0; i < taskArray.length; i++) {
|
||||
if (taskArray[i].id === updatedTask.id) {
|
||||
// 保持原有的children和层级关系
|
||||
taskArray[i] = {
|
||||
...updatedTask,
|
||||
children: taskArray[i].children, // 保持原有的children
|
||||
isParent:
|
||||
updatedTask.type === 'story' ||
|
||||
(taskArray[i].children && taskArray[i].children.length > 0),
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
if (taskArray[i].children && taskArray[i].children.length > 0) {
|
||||
if (updateTaskInPlace(taskArray[i].children!)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
if (!updateTaskInPlace(tasks.value)) {
|
||||
showMessage(`就地更新失败，未找到任务，ID： ${updatedTask.id}`, 'warning', { closable: true })
|
||||
}
|
||||
}
|
||||
|
||||
showMessage('任务更新完成', 'success', { closable: false })
|
||||
}
|
||||
|
||||
// 任务添加处理器
|
||||
const handleTaskAdd = (newTask: Task) => {
|
||||
// 为新任务生成ID（如果没有的话）
|
||||
if (!newTask.id) {
|
||||
// 找到当前最大的ID，然后+1
|
||||
const maxId = Math.max(
|
||||
...tasks.value.map(t => t.id || 0),
|
||||
...milestones.value.map(m => m.id || 0),
|
||||
0
|
||||
)
|
||||
newTask.id = maxId + 1
|
||||
}
|
||||
|
||||
// 设置isParent属性
|
||||
newTask.isParent = newTask.type === 'story' || (newTask.children && newTask.children.length > 0)
|
||||
|
||||
// 处理父子关系
|
||||
if (newTask.parentId) {
|
||||
// 如果有上级任务，需要将子任务添加到父任务的children中
|
||||
const addToParentChildren = (taskArray: Task[]): boolean => {
|
||||
for (const task of taskArray) {
|
||||
if (task.id === newTask.parentId) {
|
||||
// 找到父任务
|
||||
if (!task.children) {
|
||||
// 如果父任务没有children属性，创建一个
|
||||
task.children = []
|
||||
}
|
||||
// 将新任务添加到父任务的children中
|
||||
task.children.push({ ...newTask })
|
||||
return true
|
||||
}
|
||||
// 递归查找父任务（支持多层嵌套）
|
||||
if (task.children && task.children.length > 0) {
|
||||
if (addToParentChildren(task.children)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 尝试添加到父任务的children中
|
||||
if (!addToParentChildren(tasks.value)) {
|
||||
console.warn('未找到父任务，ID：', newTask.parentId, '，将作为顶级任务添加')
|
||||
// 如果没找到父任务，作为顶级任务添加
|
||||
tasks.value.push({ ...newTask })
|
||||
}
|
||||
} else {
|
||||
// 没有父任务，作为顶级任务添加
|
||||
tasks.value.push({ ...newTask })
|
||||
}
|
||||
}
|
||||
|
||||
// 任务删除处理器
|
||||
const handleTaskDelete = (taskToDelete: Task) => {
|
||||
// 递归查找和删除任务（支持嵌套结构）
|
||||
const deleteTaskFromArray = (taskArray: Task[]): boolean => {
|
||||
for (let i = 0; i < taskArray.length; i++) {
|
||||
if (taskArray[i].id === taskToDelete.id) {
|
||||
// 找到任务，删除它
|
||||
taskArray.splice(i, 1)
|
||||
showMessage('已删除任务', 'success', { closable: false })
|
||||
return true
|
||||
}
|
||||
|
||||
// 如果有子任务，递归查找
|
||||
if (taskArray[i].children && taskArray[i].children.length > 0) {
|
||||
if (deleteTaskFromArray(taskArray[i].children!)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
if (!deleteTaskFromArray(tasks.value)) {
|
||||
showMessage(`未找到要删除的任务，ID： ${taskToDelete.id}`, 'warning', { closable: true })
|
||||
}
|
||||
}
|
||||
|
||||
// 里程碑图标变更处理器
|
||||
const handleMilestoneIconChange = (milestoneId: number, icon: string) => {
|
||||
const milestoneIndex = milestones.value.findIndex(m => m.id === milestoneId)
|
||||
if (milestoneIndex !== -1) {
|
||||
milestones.value[milestoneIndex].icon = icon
|
||||
} else {
|
||||
showMessage(`未找到要更新图标的里程碑，ID： ${milestoneId}`, 'warning', { closable: true })
|
||||
}
|
||||
}
|
||||
|
||||
// TaskDrawer事件处理器
|
||||
const handleTaskDrawerSubmit = (task: Task) => {
|
||||
if (isEditMode.value) {
|
||||
// 编辑模式：更新任务
|
||||
handleTaskUpdate(task)
|
||||
} else {
|
||||
// 新建模式：添加任务
|
||||
handleTaskAdd(task)
|
||||
}
|
||||
showTaskDrawer.value = false
|
||||
}
|
||||
|
||||
const handleTaskDrawerClose = () => {
|
||||
showTaskDrawer.value = false
|
||||
currentTask.value = null
|
||||
isEditMode.value = false
|
||||
}
|
||||
|
||||
const handleTaskDrawerDelete = (taskId: number) => {
|
||||
const taskToDelete = tasks.value.find(t => t.id === taskId)
|
||||
if (taskToDelete) {
|
||||
handleTaskDelete(taskToDelete)
|
||||
}
|
||||
showTaskDrawer.value = false
|
||||
}
|
||||
|
||||
// GitHub 文档处理函数
|
||||
const handleGithubDocsClick = (event: Event) => {
|
||||
event.preventDefault()
|
||||
// 打开GitHub仓库的README页面
|
||||
window.open('https://github.com/nelson820125/jordium-gantt-vue3', '_blank')
|
||||
}
|
||||
|
||||
// Gitee 文档处理函数
|
||||
const handleGiteeDocsClick = (event: Event) => {
|
||||
event.preventDefault()
|
||||
// 打开Gitee仓库的README页面
|
||||
window.open('https://gitee.com/jordium/jordium-gantt-vue3.git', '_blank')
|
||||
}
|
||||
|
||||
// 任务拖拽/拉伸/里程碑拖拽监听
|
||||
function handleTaskbarDragOrResizeEnd(newTask) {
|
||||
const oldTask = findTaskDeep(tasks.value, newTask.id)
|
||||
if (!oldTask) return
|
||||
showMessage(
|
||||
`任务【${newTask.name}】\n` +
|
||||
`开始: ${oldTask.startDate} → ${newTask.startDate}\n` +
|
||||
`结束: ${oldTask.endDate} → ${newTask.endDate}`,
|
||||
'info',
|
||||
{ closable: true }
|
||||
)
|
||||
}
|
||||
function handleMilestoneDragEnd(newMilestone) {
|
||||
const oldMilestone = findTaskDeep(milestones.value, newMilestone.id)
|
||||
if (!oldMilestone) return
|
||||
showMessage(
|
||||
`里程碑【${newMilestone.name}】\n` +
|
||||
`开始: ${oldMilestone.endDate} → ${newMilestone.startDate}`,
|
||||
'info',
|
||||
{ closable: true }
|
||||
)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tasks.value = demoData.tasks as Task[]
|
||||
milestones.value = demoData.milestones as Task[]
|
||||
})
|
||||
|
||||
// 递归查找任务/里程碑，因为原始结构一致
|
||||
function findTaskDeep(taskArray: Task[], id: number): Task | null {
|
||||
for (const task of taskArray) {
|
||||
if (task.id === id) return task
|
||||
if (task.children && task.children.length > 0) {
|
||||
const found = findTaskDeep(task.children, id)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h1 class="page-title">
|
||||
<div class="title-left">
|
||||
<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>
|
||||
Jordium Gantt Vue3 Demo
|
||||
<span class="version-badge" style="cursor: pointer" @click="showVersionDrawer = true">{{
|
||||
packageInfo.version
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="docs-links">
|
||||
<a href="#github-docs" class="doc-link github-link" @click="handleGithubDocsClick">
|
||||
<img class="doc-icon" src="./public/github.svg" alt="GitHub" />
|
||||
</a>
|
||||
<span class="docs-divider"></span>
|
||||
<a href="#gitee-docs" class="doc-link gitee-link" @click="handleGiteeDocsClick">
|
||||
<img class="doc-icon" src="./public/gitee.svg" alt="Gitee" />
|
||||
</a>
|
||||
</div>
|
||||
</h1>
|
||||
<VersionHistoryDrawer :visible="showVersionDrawer" @close="showVersionDrawer = false" />
|
||||
<div class="gantt-wrapper">
|
||||
<GanttChart
|
||||
:tasks="tasks"
|
||||
:milestones="milestones"
|
||||
:toolbar-config="toolbarConfig"
|
||||
:on-add-task="handleAddTask"
|
||||
:on-add-milestone="handleAddMilestone"
|
||||
:on-export-csv="handleCustomCsvExport"
|
||||
:on-language-change="handleLanguageChange"
|
||||
:on-theme-change="handleThemeChange"
|
||||
:on-milestone-save="handleMilestoneSave"
|
||||
:on-milestone-delete="handleMilestoneDelete"
|
||||
:on-task-update="handleTaskUpdate"
|
||||
:on-task-add="handleTaskAdd"
|
||||
:on-task-delete="handleTaskDelete"
|
||||
:on-milestone-icon-change="handleMilestoneIconChange"
|
||||
@taskbar-drag-end="handleTaskbarDragOrResizeEnd"
|
||||
@taskbar-resize-end="handleTaskbarDragOrResizeEnd"
|
||||
@milestone-drag-end="handleMilestoneDragEnd"
|
||||
/>
|
||||
</div>
|
||||
<div class="license-info">
|
||||
<p>MIT License @JORDIUM.COM</p>
|
||||
</div>
|
||||
|
||||
<!-- TaskDrawer用于新建/编辑任务 -->
|
||||
<TaskDrawer
|
||||
v-model:visible="showTaskDrawer"
|
||||
:task="currentTask"
|
||||
:is-edit="isEditMode"
|
||||
@submit="handleTaskDrawerSubmit"
|
||||
@close="handleTaskDrawerClose"
|
||||
@delete="handleTaskDrawerDelete"
|
||||
/>
|
||||
|
||||
<!-- MilestoneDialog用于新建/编辑里程碑 -->
|
||||
<MilestoneDialog
|
||||
:visible="showMilestoneDialog"
|
||||
:milestone="currentMilestone"
|
||||
@update:visible="showMilestoneDialog = $event"
|
||||
@save="handleMilestoneSave"
|
||||
@delete="handleMilestoneDelete"
|
||||
@close="showMilestoneDialog = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
background: var(--gantt-bg-secondary, #f0f2f5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 20px 0;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--gantt-text-primary, #333);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.title-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.gantt-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.gantt-icon:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.version-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #409eff 0%, #36d1dc 50%, #667eea 100%);
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
line-height: 1;
|
||||
margin-left: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 0 20px rgba(64, 158, 255, 0.3),
|
||||
0 4px 15px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.version-badge::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.version-badge:hover {
|
||||
transform: scale(1.05) translateY(-1px);
|
||||
box-shadow:
|
||||
0 0 30px rgba(64, 158, 255, 0.5),
|
||||
0 8px 25px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
background: linear-gradient(135deg, #4dabf7 0%, #40c9ff 50%, #74c0fc 100%);
|
||||
}
|
||||
|
||||
.version-badge:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* 科技感呼吸动画 */
|
||||
@keyframes glow-pulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow:
|
||||
0 0 20px rgba(64, 158, 255, 0.3),
|
||||
0 4px 15px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 30px rgba(64, 158, 255, 0.5),
|
||||
0 4px 15px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.gantt-wrapper {
|
||||
flex: 1 1 0%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.license-info {
|
||||
text-align: center;
|
||||
color: var(--gantt-text-muted, #c0c4cc);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 全局暗色主题支持 */
|
||||
:global(html[data-theme='dark']) {
|
||||
background: #1e1e1e !important;
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) body {
|
||||
background: #1e1e1e !important;
|
||||
color: #e5e5e5 !important;
|
||||
}
|
||||
|
||||
/* 暗黑模式下的版本标签 */
|
||||
:global(html[data-theme='dark']) .version-badge {
|
||||
background: linear-gradient(135deg, #1a73e8 0%, #00bcd4 50%, #3f51b5 100%);
|
||||
box-shadow:
|
||||
0 0 25px rgba(102, 177, 255, 0.4),
|
||||
0 4px 15px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) .version-badge:hover {
|
||||
background: linear-gradient(135deg, #2196f3 0%, #00e5ff 50%, #5c6bc0 100%);
|
||||
box-shadow:
|
||||
0 0 35px rgba(102, 177, 255, 0.6),
|
||||
0 8px 25px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(102, 177, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 暗黑模式的呼吸动画 */
|
||||
@keyframes glow-pulse-dark {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow:
|
||||
0 0 25px rgba(102, 177, 255, 0.4),
|
||||
0 4px 15px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 35px rgba(102, 177, 255, 0.6),
|
||||
0 4px 15px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.docs-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.docs-divider {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
border-left: 1.5px dashed #bbb;
|
||||
margin: 0 8px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--gantt-text-primary, #333333);
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.doc-link:hover {
|
||||
color: var(--gantt-text-primary, #333333);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.doc-link:nth-child(2) {
|
||||
color: #c71d23;
|
||||
}
|
||||
|
||||
.doc-link:nth-child(2):hover {
|
||||
color: #a91b1b;
|
||||
background-color: rgba(199, 29, 35, 0.1);
|
||||
}
|
||||
|
||||
.doc-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
/* GitHub 图标样式 - 黑色 */
|
||||
.github-link .doc-icon {
|
||||
filter: brightness(0) saturate(100%);
|
||||
}
|
||||
|
||||
.github-link:hover .doc-icon {
|
||||
filter: brightness(0) saturate(100%) invert(20%) sepia(15%) saturate(1500%) hue-rotate(200deg);
|
||||
}
|
||||
|
||||
/* Gitee 图标样式 - 红色 */
|
||||
.gitee-link .doc-icon {
|
||||
filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(2000%) hue-rotate(350deg)
|
||||
brightness(0.8);
|
||||
}
|
||||
|
||||
.gitee-link:hover .doc-icon {
|
||||
filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(2500%) hue-rotate(350deg)
|
||||
brightness(0.7);
|
||||
}
|
||||
|
||||
/* 移除旧的基于 SVG color 的样式，现在使用 filter */
|
||||
|
||||
/* 暗黑模式下覆盖所有链接样式 */
|
||||
:global(html[data-theme='dark']) .doc-link {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) .doc-link:hover {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) .doc-link:nth-child(2) {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) .doc-link:nth-child(2):hover {
|
||||
color: #ffffff !important;
|
||||
background-color: rgba(199, 29, 35, 0.1);
|
||||
}
|
||||
|
||||
/* 暗黑模式下图标样式 */
|
||||
:global(html[data-theme='dark']) .github-link .doc-icon {
|
||||
filter: brightness(0) saturate(100%) invert(100%);
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) .github-link:hover .doc-icon {
|
||||
filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(2000%) hue-rotate(190deg)
|
||||
brightness(1.2);
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) .gitee-link .doc-icon {
|
||||
filter: brightness(0) saturate(100%) invert(45%) sepia(100%) saturate(1500%) hue-rotate(340deg)
|
||||
brightness(1.1);
|
||||
}
|
||||
|
||||
:global(html[data-theme='dark']) .gitee-link:hover .doc-icon {
|
||||
filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(1800%) hue-rotate(340deg)
|
||||
brightness(1.2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,332 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
const props = defineProps<{ visible: boolean }>()
|
||||
|
||||
const versionList = ref<any[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await fetch('./version-history.json')
|
||||
const data = await res.json()
|
||||
// 按日期和版本号倒序排列
|
||||
versionList.value = data.sort((a, b) => {
|
||||
if (a.date === b.date) {
|
||||
// 版本号倒序
|
||||
return b.version.localeCompare(a.version, undefined, { numeric: true })
|
||||
}
|
||||
return b.date.localeCompare(a.date)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="props.visible" class="drawer-mask" @click="$emit('close')"></div>
|
||||
<div class="version-history-drawer" :class="{ open: props.visible }">
|
||||
<div class="drawer-header">
|
||||
<h3 class="drawer-title">版本历史</h3>
|
||||
<button class="drawer-close-btn" type="button" @click="$emit('close')">
|
||||
<svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="drawer-body">
|
||||
<div class="version-timeline">
|
||||
<div
|
||||
v-for="(item, idx) in versionList"
|
||||
:key="item.version"
|
||||
class="version-timeline-group"
|
||||
>
|
||||
<div :class="['version-timeline-dot', idx === 0 ? 'latest' : '']">
|
||||
<div class="dot-label">
|
||||
<span class="dot-version">{{ item.version }}</span>
|
||||
<span class="dot-date">{{ item.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="version-timeline-content version-card">
|
||||
<ul class="version-notes">
|
||||
<li v-for="(note, nidx) in item.notes" :key="nidx">{{ note }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.version-history-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 540px; /* 增加Drawer宽度，适中大气 */
|
||||
height: 100vh;
|
||||
background: var(--gantt-bg-primary, #fff);
|
||||
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.1);
|
||||
z-index: 2000;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 去除圆角 */
|
||||
}
|
||||
.version-history-drawer.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.drawer-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5); /* 与TaskDrawer一致 */
|
||||
z-index: 1999;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--gantt-border-light, #ebeef5);
|
||||
background: var(--gantt-bg-secondary, #f5f7fa);
|
||||
}
|
||||
.drawer-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--gantt-text-primary, #303133);
|
||||
}
|
||||
|
||||
.drawer-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
color: var(--gantt-text-muted, #909399);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.drawer-close-btn:hover {
|
||||
color: var(--gantt-text-secondary, #606266);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.drawer-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 32px 32px 32px 60px;
|
||||
background: var(--gantt-bg-primary, #fff); /* 统一用变量，便于主题切换 */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #b3c6e0 #f0f2f5;
|
||||
/* 去除圆角 */
|
||||
}
|
||||
.drawer-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
.drawer-body::-webkit-scrollbar-thumb {
|
||||
background: #b3c6e0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.drawer-body::-webkit-scrollbar-track {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
.version-timeline {
|
||||
position: relative;
|
||||
margin-left: 140px;
|
||||
border-left: 0;
|
||||
}
|
||||
.version-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
var(--gantt-timeline-line, #a0cfff) 0 8px,
|
||||
transparent 8px 16px
|
||||
);
|
||||
border-radius: 1px;
|
||||
z-index: 0;
|
||||
}
|
||||
.version-timeline-group {
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
padding-left: 18px;
|
||||
min-height: 60px;
|
||||
transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.version-timeline-dot {
|
||||
position: absolute;
|
||||
left: -13px;
|
||||
top: 18px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--gantt-timeline-dot, #a0cfff); /* 更柔和主色 */
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 0 0 2px var(--gantt-timeline-line, #b3d8ff);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
transition:
|
||||
background 0.2s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
.version-timeline-group:hover .version-timeline-dot {
|
||||
background: var(--gantt-timeline-dot-hover, #409eff); /* hover主色 */
|
||||
}
|
||||
.version-timeline-dot.latest {
|
||||
background: var(--gantt-primary, #409eff);
|
||||
}
|
||||
.dot-label {
|
||||
position: absolute;
|
||||
left: -140px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
min-width: 90px;
|
||||
max-width: 110px;
|
||||
font-size: 13px;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.version-timeline-group:hover .dot-label {
|
||||
left: -110px; /* 悬停时向右移动，接近原点 */
|
||||
}
|
||||
.version-timeline-content.version-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.08); /* 主色阴影 */
|
||||
padding: 18px 18px 12px 18px;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
transition: box-shadow 0.2s;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.version-timeline-group:hover .version-timeline-content.version-card {
|
||||
box-shadow: 0 8px 24px rgba(64, 158, 255, 0.16);
|
||||
}
|
||||
.version-timeline-content.version-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -16px; /* 让箭头更靠近原点但不覆盖 */
|
||||
top: 18px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
filter: drop-shadow(-2px 0 2px var(--gantt-timeline-line, #a0cfff));
|
||||
z-index: 1;
|
||||
}
|
||||
.version-timeline-group:hover .version-timeline-content.version-card::before {
|
||||
filter: drop-shadow(-2px 0 2px var(--gantt-primary, #409eff));
|
||||
}
|
||||
.version-notes {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
list-style: disc;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.version-timeline-group:hover .version-notes {
|
||||
color: #333;
|
||||
}
|
||||
.dot-version {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: var(--gantt-primary, #409eff); /* 统一主色 */
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 1px 4px rgba(64, 158, 255, 0.08);
|
||||
}
|
||||
.dot-date {
|
||||
color: #b0b3bb;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.2px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* 暗黑主题适配，完全对齐TaskDrawer风格 */
|
||||
:global(html[data-theme='dark']) .version-history-drawer {
|
||||
background: var(--gantt-bg-primary, #6b6b6b) !important;
|
||||
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .drawer-header {
|
||||
background: var(--gantt-bg-secondary, #4b4b4b) !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .drawer-title {
|
||||
color: var(--gantt-text-white, #fff) !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .drawer-close-btn:hover {
|
||||
background: var(--gantt-bg-hover, rgba(255, 255, 255, 0.1)) !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
:global(html[data-theme='dark']) .drawer-body {
|
||||
background: var(--gantt-bg-primary, #6b6b6b) !important;
|
||||
scrollbar-color: #888888 #4b4b4b !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .drawer-body::-webkit-scrollbar-thumb {
|
||||
background: #888888 !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .drawer-body::-webkit-scrollbar-track {
|
||||
background: #4b4b4b !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .version-timeline-content.version-card {
|
||||
background: var(--gantt-bg-secondary, #4b4b4b) !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.32) !important;
|
||||
color: var(--gantt-text-white, #fff) !important;
|
||||
}
|
||||
:global(html[data-theme='dark'])
|
||||
.version-timeline-group:hover
|
||||
.version-timeline-content.version-card {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.44) !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .version-timeline-content.version-card::before {
|
||||
filter: drop-shadow(-2px 0 2px #222) !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .dot-version {
|
||||
color: var(--gantt-primary, #3399ff) !important;
|
||||
text-shadow: 0 1px 4px rgba(51, 153, 255, 0.12) !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .dot-date {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .version-notes {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .version-timeline-dot {
|
||||
background: var(--gantt-timeline-dot, #3399ff) !important;
|
||||
box-shadow: 0 0 0 2px #222 !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .version-timeline-dot.latest {
|
||||
background: var(--gantt-primary, #3399ff) !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .version-timeline-group:hover .version-timeline-dot {
|
||||
background: var(--gantt-primary, #3399ff) !important;
|
||||
}
|
||||
:global(html[data-theme='dark']) .version-timeline::before {
|
||||
background: repeating-linear-gradient(to bottom, #3399ff 0 8px, transparent 8px 16px) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,187 @@
|
||||
{
|
||||
"tasks": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "项目启动",
|
||||
"assignee": "张三",
|
||||
"startDate": "2025-06-15",
|
||||
"endDate": "2025-06-25",
|
||||
"progress": 100,
|
||||
"estimatedHours": 40,
|
||||
"actualHours": 38,
|
||||
"type": "story",
|
||||
"children": [
|
||||
{
|
||||
"id": 2,
|
||||
"name": "需求分析",
|
||||
"assignee": "李四",
|
||||
"startDate": "2025-04-16",
|
||||
"endDate": "2025-06-20",
|
||||
"progress": 100,
|
||||
"estimatedHours": 16,
|
||||
"actualHours": 15,
|
||||
"type": "task"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "技术选型",
|
||||
"assignee": "王五",
|
||||
"startDate": "2025-06-21",
|
||||
"endDate": "2025-06-28",
|
||||
"progress": 80,
|
||||
"estimatedHours": 24,
|
||||
"actualHours": 28,
|
||||
"type": "story",
|
||||
"children": [
|
||||
{
|
||||
"id": 4,
|
||||
"name": "调研A",
|
||||
"predecessor": "2",
|
||||
"assignee": "赵六",
|
||||
"startDate": "2025-06-21",
|
||||
"endDate": "2025-06-23",
|
||||
"progress": 80,
|
||||
"estimatedHours": 8,
|
||||
"actualHours": 10,
|
||||
"type": "task"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "调研B",
|
||||
"predecessor": "4",
|
||||
"assignee": "钱七",
|
||||
"startDate": "2025-06-24",
|
||||
"endDate": "2025-06-28",
|
||||
"progress": 0,
|
||||
"estimatedHours": 16,
|
||||
"actualHours": 0,
|
||||
"type": "task"
|
||||
}
|
||||
],
|
||||
"collapsed": false
|
||||
}
|
||||
],
|
||||
"collapsed": false
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "开发阶段",
|
||||
"assignee": "开发团队",
|
||||
"startDate": "2025-06-29",
|
||||
"endDate": "2025-07-15",
|
||||
"progress": 30,
|
||||
"estimatedHours": 120,
|
||||
"actualHours": 45,
|
||||
"type": "story",
|
||||
"children": [
|
||||
{
|
||||
"id": 8,
|
||||
"name": "前端开发",
|
||||
"assignee": "李四",
|
||||
"startDate": "2025-06-29",
|
||||
"endDate": "2025-07-10",
|
||||
"progress": 40,
|
||||
"estimatedHours": 80,
|
||||
"actualHours": 35,
|
||||
"type": "task",
|
||||
"predecessor": "5"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"name": "后端开发",
|
||||
"assignee": "李四",
|
||||
"startDate": "2025-07-07",
|
||||
"endDate": "2025-07-15",
|
||||
"progress": 0,
|
||||
"estimatedHours": 80,
|
||||
"actualHours": 0,
|
||||
"type": "task",
|
||||
"predecessor": "5"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"name": "Job开发",
|
||||
"assignee": "李四",
|
||||
"startDate": "2025-07-07",
|
||||
"endDate": "2025-07-18",
|
||||
"progress": 0,
|
||||
"estimatedHours": 88,
|
||||
"actualHours": 0,
|
||||
"type": "task",
|
||||
"predecessor": "5"
|
||||
}
|
||||
],
|
||||
"collapsed": false
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"name": "测试阶段",
|
||||
"assignee": "测试团队",
|
||||
"startDate": "2025-07-21",
|
||||
"endDate": "2025-07-31",
|
||||
"progress": 0,
|
||||
"estimatedHours": 80,
|
||||
"actualHours": 0,
|
||||
"type": "story",
|
||||
"children": [
|
||||
{
|
||||
"id": 14,
|
||||
"name": "SIT",
|
||||
"assignee": "李四",
|
||||
"startDate": "2025-07-21",
|
||||
"endDate": "2025-07-28",
|
||||
"progress": 0,
|
||||
"estimatedHours": 48,
|
||||
"actualHours": 0,
|
||||
"type": "task",
|
||||
"predecessor": "7"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"name": "UAT",
|
||||
"assignee": "李四",
|
||||
"startDate": "2025-07-29",
|
||||
"endDate": "2025-07-31",
|
||||
"progress": 0,
|
||||
"estimatedHours": 24,
|
||||
"actualHours": 0,
|
||||
"type": "task",
|
||||
"predecessor": "7"
|
||||
}
|
||||
],
|
||||
"collapsed": false
|
||||
}
|
||||
],
|
||||
"milestones": [
|
||||
{
|
||||
"id": 6,
|
||||
"name": "技术选型完成",
|
||||
"assignee": "王五",
|
||||
"startDate": "2025-06-25",
|
||||
"endDate": "2025-06-25",
|
||||
"type": "milestone",
|
||||
"icon": "diamond",
|
||||
"description": "完成技术选型调研，确定项目技术栈和架构方案。"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"name": "开发完成",
|
||||
"assignee": "开发团队",
|
||||
"startDate": "2025-07-11",
|
||||
"endDate": "2025-07-11",
|
||||
"type": "milestone",
|
||||
"icon": "rocket",
|
||||
"description": "完成所有开发任务，准备进入测试阶段。"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"name": "Alpha版本发布",
|
||||
"assignee": "项目经理",
|
||||
"startDate": "2025-07-15",
|
||||
"endDate": "2025-07-15",
|
||||
"type": "milestone",
|
||||
"icon": "rocket",
|
||||
"description": "发布Alpha测试版本，提供给内部团队进行功能验证和测试。"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/public/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Jordium Gantt Vue3 Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
Generated
+3412
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "packagedemo",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:demo": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"build:demo": "vue-tsc -b && vite build",
|
||||
"build:lib": "vite build --config vite.config.lib.ts"
|
||||
},
|
||||
"keywords": [
|
||||
"jordium-gantt-vue3",
|
||||
"vue3",
|
||||
"gantt",
|
||||
"chart",
|
||||
"component"
|
||||
],
|
||||
"author": "Jordium.com",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jordium-gantt-vue3": "^1.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||
"@typescript-eslint/parser": "^6.21.0",
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"@vue/eslint-config-prettier": "^8.0.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.25.0",
|
||||
"prettier": "^3.2.5",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vue-tsc": "^2.2.8"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<svg 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: 665 B |
@@ -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 |
@@ -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 |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,113 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
height: 100vh;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
/* 黑暗模式全局样式 */
|
||||
html[data-theme='dark'] {
|
||||
background: #1e1e1e !important;
|
||||
color-scheme: dark !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] body {
|
||||
background: #1e1e1e !important;
|
||||
color: #e5e5e5 !important;
|
||||
}
|
||||
|
||||
/* 明亮模式全局样式 */
|
||||
html[data-theme='light'] {
|
||||
background: #ffffff !important;
|
||||
color-scheme: light !important;
|
||||
}
|
||||
|
||||
html[data-theme='light'] body {
|
||||
background: #ffffff !important;
|
||||
color: #333333 !important;
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
[
|
||||
{
|
||||
"version": "alpha 0.8.1",
|
||||
"date": "2025-06-25",
|
||||
"notes": ["升级优化DatePicker组件"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.8.2",
|
||||
"date": "2025-06-25",
|
||||
"notes": ["升级Demo", "移除导出按钮的初始化光晕效果"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.8.3",
|
||||
"date": "2025-06-25",
|
||||
"notes": ["升级里程碑Taskbar，允许拖拽"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.8.4",
|
||||
"date": "2025-06-25",
|
||||
"notes": ["升级需求/任务TaskBar新建以及上下级关系变更", "添加Github和Gitee的文档入口"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.8.5",
|
||||
"date": "2025-06-26",
|
||||
"notes": ["升级Timeline今日定位和滑动问题"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.9.0",
|
||||
"date": "2025-06-26",
|
||||
"notes": ["添加新增里程碑和删除里程碑功能"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.9.1",
|
||||
"date": "2025-06-27",
|
||||
"notes": ["优化时间轴的延伸"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.9.2",
|
||||
"date": "2025-06-27",
|
||||
"notes": ["增加历史版本查看"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.9.3",
|
||||
"date": "2025-06-27",
|
||||
"notes": ["修复今日定位问题"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.9.4",
|
||||
"date": "2025-06-27",
|
||||
"notes": ["调整暗黑主题的亮度", "调整暗黑主题的布局", "修复暗黑主题下的版本历史的样式"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.9.5",
|
||||
"date": "2025-06-27",
|
||||
"notes": ["统一管理各个组件的全球化配置"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.9.6",
|
||||
"date": "2025-06-27",
|
||||
"notes": ["各个组件分离Task/Milestone/Language对象"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.9.7",
|
||||
"date": "2025-06-28",
|
||||
"notes": ["解决Milestone组件和类型的同名问题"]
|
||||
},
|
||||
{
|
||||
"version": "alpha 0.9.8",
|
||||
"date": "2025-06-28",
|
||||
"notes": ["按钮样式统一管理"]
|
||||
},
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"date": "2025-06-29",
|
||||
"notes": [
|
||||
"GanttChart接口增强",
|
||||
"添加GanttChart的拖拽事件回调",
|
||||
"添加GanttChart的里程碑拖拽事件回调",
|
||||
"修复里程碑点的样式问题",
|
||||
"更新README文档",
|
||||
"重构项目目录结构"
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "1.0.1",
|
||||
"date": "2025-07-01",
|
||||
"notes": ["增加NPM引用示例"]
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
Reference in New Issue
Block a user