v1.0.1 - 升级文档说明 & 增加npm包集成示例
This commit is contained in:
LINING-PC\lining
129
CHANGELOG.md
Normal file
129
CHANGELOG.md
Normal file
@@ -0,0 +1,129 @@
|
||||
# Changelog
|
||||
|
||||
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.0.1] - 2025-07-01
|
||||
|
||||
### Added
|
||||
- 增加npm安装及组件集成示例
|
||||
|
||||
## [1.0.0] - 2025-06-29
|
||||
|
||||
### Added
|
||||
- GanttChart 接口增强，提供更丰富的 API 支持
|
||||
- 添加 GanttChart 的拖拽事件回调功能
|
||||
- 添加 GanttChart 的里程碑拖拽事件回调功能
|
||||
- 重构项目目录结构，提升代码组织性
|
||||
|
||||
### Fixed
|
||||
- 修复里程碑点的样式问题
|
||||
|
||||
### Changed
|
||||
- 更新 README 文档，完善使用说明
|
||||
|
||||
### Documentation
|
||||
- 完善 API 文档和使用示例
|
||||
|
||||
## [0.9.8] - 2025-06-28
|
||||
|
||||
### Changed
|
||||
- 按钮样式统一管理，提升 UI 一致性
|
||||
|
||||
## [0.9.7] - 2025-06-28
|
||||
|
||||
### Fixed
|
||||
- 解决 Milestone 组件和类型的同名问题
|
||||
|
||||
## [0.9.6] - 2025-06-27
|
||||
|
||||
### Changed
|
||||
- 各个组件分离 Task/Milestone/Language 对象，提升模块化程度
|
||||
|
||||
## [0.9.5] - 2025-06-27
|
||||
|
||||
### Added
|
||||
- 统一管理各个组件的全球化配置
|
||||
|
||||
## [0.9.4] - 2025-06-27
|
||||
|
||||
### Changed
|
||||
- 调整暗黑主题的亮度和布局
|
||||
|
||||
### Fixed
|
||||
- 修复暗黑主题下的版本历史的样式
|
||||
|
||||
## [0.9.3] - 2025-06-27
|
||||
|
||||
### Fixed
|
||||
- 修复今日定位问题
|
||||
|
||||
## [0.9.2] - 2025-06-27
|
||||
|
||||
### Added
|
||||
- 增加历史版本查看功能
|
||||
|
||||
## [0.9.1] - 2025-06-27
|
||||
|
||||
### Improved
|
||||
- 优化时间轴的延伸功能
|
||||
|
||||
## [0.9.0] - 2025-06-26
|
||||
|
||||
### Added
|
||||
- 添加新增里程碑功能
|
||||
- 添加删除里程碑功能
|
||||
|
||||
## [0.8.5] - 2025-06-26
|
||||
|
||||
### Fixed
|
||||
- 升级 Timeline 今日定位和滑动问题
|
||||
|
||||
## [0.8.4] - 2025-06-25
|
||||
|
||||
### Added
|
||||
- 添加 Github 和 Gitee 的文档入口
|
||||
|
||||
### Changed
|
||||
- 升级需求/任务 TaskBar 新建以及上下级关系变更
|
||||
|
||||
## [0.8.3] - 2025-06-25
|
||||
|
||||
### Added
|
||||
- 升级里程碑 Taskbar，允许拖拽功能
|
||||
|
||||
## [0.8.2] - 2025-06-25
|
||||
|
||||
### Changed
|
||||
- 升级 Demo 演示
|
||||
- 移除导出按钮的初始化光晕效果
|
||||
|
||||
## [0.8.1] - 2025-06-25
|
||||
|
||||
### Improved
|
||||
- 升级优化 DatePicker 组件
|
||||
|
||||
---
|
||||
|
||||
## 版本说明
|
||||
|
||||
- **Major Version (1.x.x)**: 包含破坏性变更的重大版本更新
|
||||
- **Minor Version (x.1.x)**: 向后兼容的功能性新增
|
||||
- **Patch Version (x.x.1)**: 向后兼容的问题修复
|
||||
|
||||
## 图例
|
||||
|
||||
- 🎉 **Added**: 新增功能
|
||||
- 🔄 **Changed**: 功能变更
|
||||
- 🐛 **Fixed**: 问题修复
|
||||
- 🗑️ **Removed**: 功能移除
|
||||
- 📚 **Documentation**: 文档更新
|
||||
- ⚡ **Improved**: 性能优化
|
||||
|
||||
## 反馈与支持
|
||||
|
||||
- 📬 [提交 Github Issue](https://github.com/nelson820125/jordium-gantt-vue3/issues)
|
||||
- 📬 [提交 Gitee Issue](https://gitee.com/jordium/jordium-gantt-vue3/issues)
|
||||
- 📧 邮箱：ning.li@jordium.com / nelson820125@gmail.com / lining820125@163.com
|
||||
398
README-EN.md
Normal file
398
README-EN.md
Normal file
@@ -0,0 +1,398 @@
|
||||
# jordium-gantt-vue3
|
||||
|
||||
[](https://badge.fury.io/js/jordium-gantt-vue3)
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://vuejs.org/)
|
||||
[](https://www.typescriptlang.org/)
|
||||
|
||||
> Modern Vue 3 Gantt chart component library providing complete solutions for project management and task scheduling
|
||||
|
||||
## 🚀 Features
|
||||
|
||||
- 📊 **Complete Functionality**: Task management, milestone tracking, dependency relationships, progress visualization
|
||||
- 🎨 **Theme Switching**: Built-in light/dark themes with customizable theme variables
|
||||
- 🖱️ **Rich Interactions**: Drag adjustment, resizing, double-click editing, context menus
|
||||
- 🌍 **Internationalization**: Built-in Chinese/English support with custom language pack capability
|
||||
- 📱 **Responsive**: Desktop and mobile compatible with smooth touch experience
|
||||
- ⚡ **High Performance**: Virtual scrolling, lazy loading, optimized rendering
|
||||
- 🔧 **Extensible**: Rich API interfaces supporting custom components and events
|
||||
- 💎 **Type Safe**: Complete TypeScript support for better development experience
|
||||
|
||||
## 📦 Installation
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install jordium-gantt-vue3
|
||||
|
||||
# yarn
|
||||
yarn add jordium-gantt-vue3
|
||||
|
||||
# pnpm
|
||||
pnpm add jordium-gantt-vue3
|
||||
```
|
||||
|
||||
## 📄 License
|
||||
|
||||
[MIT License](./LICENSE) © 2025 JordiUM
|
||||
|
||||
---
|
||||
|
||||
> 💡 **Badge Downloads**：
|
||||
> - npm version badge：https://badge.fury.io/
|
||||
> - MIT license badge：https://img.shields.io/badge/license-MIT-blue.svg
|
||||
> - Vue version badge：https://img.shields.io/badge/vue-3.x-green.svg
|
||||
> - TypeScript badge：https://img.shields.io/badge/typescript-5.x-blue.svg
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
```
|
||||
jordium-gantt-vue3/
|
||||
├── src/ # Source code directory
|
||||
│ ├── components/ # Core components
|
||||
│ │ ├── GanttChart.vue # Main entry component
|
||||
│ │ ├── TaskList.vue # Task list
|
||||
│ │ ├── Timeline.vue # Timeline
|
||||
│ │ ├── TaskBar.vue # Task bar
|
||||
│ │ ├── MilestonePoint.vue # Milestone
|
||||
│ │ └── ... # Other components
|
||||
│ ├── models/ # Data models
|
||||
│ │ ├── classes/ # Class definitions
|
||||
│ │ └── configs/ # Configuration interfaces
|
||||
│ ├── composables/ # Composable functions
|
||||
│ ├── styles/ # Style files
|
||||
│ └── index.ts # Export entry
|
||||
├── demo/ # Development demo
|
||||
├── dist/ # Build output
|
||||
├── docs/ # Documentation
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## 🔧 API Reference
|
||||
|
||||
### GanttChart Properties
|
||||
|
||||
| Property | Type | Default | Description |
|
||||
|----------|------|---------|-------------|
|
||||
| `tasks` | `Task[]` | `[]` | Task data array |
|
||||
| `milestones` | `Task[]` | `[]` | Milestone data array |
|
||||
| `editComponent` | `any` | - | Custom edit component |
|
||||
| `useDefaultDrawer` | `boolean` | `true` | Use default edit drawer |
|
||||
| `showToolbar` | `boolean` | `true` | Show toolbar |
|
||||
| `toolbarConfig` | `ToolbarConfig` | `{}` | Toolbar configuration |
|
||||
| `localeMessages` | `Partial<Messages['zh-CN']>` | - | Custom locale messages |
|
||||
| `onTaskDoubleClick` | `(task: Task) => void` | - | Task double-click event callback |
|
||||
| `onTaskDelete` | `(task: Task) => void` | - | Task delete event callback |
|
||||
| `onTaskUpdate` | `(task: Task) => void` | - | Task update event callback |
|
||||
| `onTaskAdd` | `(task: Task) => void` | - | Task add event callback |
|
||||
| `onMilestoneSave` | `(milestone: Task) => void` | - | Milestone save event callback |
|
||||
| `onMilestoneDelete` | `(milestoneId: number) => void` | - | Milestone delete event callback |
|
||||
| `onMilestoneIconChange` | `(milestoneId: number, icon: string) => void` | - | Milestone icon change event callback |
|
||||
| `onAddTask` | `() => void` | - | Add task toolbar event callback |
|
||||
| `onAddMilestone` | `() => void` | - | Add milestone toolbar event callback |
|
||||
| `onTodayLocate` | `() => void` | - | Locate today toolbar event callback |
|
||||
| `onExportCsv` | `() => boolean \| void` | - | Export CSV toolbar event callback |
|
||||
| `onExportPdf` | `() => void` | - | Export PDF toolbar event callback |
|
||||
| `onLanguageChange` | `(lang: 'zh-CN' \| 'en-US') => void` | - | Language change toolbar event callback |
|
||||
| `onThemeChange` | `(isDark: boolean) => void` | - | Theme change toolbar event callback |
|
||||
| `onFullscreenChange` | `(isFullscreen: boolean) => void` | - | Fullscreen change toolbar event callback |
|
||||
|
||||
### GanttChart Events
|
||||
|
||||
| Event | Parameters | Description |
|
||||
|-------|------------|-------------|
|
||||
| `taskbar-drag-end` | `task: Task` | Task bar drag end |
|
||||
| `taskbar-resize-end` | `task: Task` | Task bar resize end |
|
||||
| `milestone-drag-end` | `milestone: Task` | Milestone drag end |
|
||||
|
||||
### Data Types
|
||||
|
||||
#### Core Types (src/models/classes)
|
||||
|
||||
**Task Type**
|
||||
```typescript
|
||||
interface Task {
|
||||
id: number // Unique task identifier
|
||||
name: string // Task name
|
||||
predecessor?: string // Predecessor task ID
|
||||
assignee?: string // Assignee
|
||||
startDate?: string // Start date (YYYY-MM-DD format)
|
||||
endDate?: string // End date (YYYY-MM-DD format)
|
||||
progress?: number // Completion progress (0-100)
|
||||
estimatedHours?: number // Estimated hours
|
||||
actualHours?: number // Actual hours
|
||||
parentId?: number // Parent task ID
|
||||
children?: Task[] // Child tasks array (supports nested structure)
|
||||
collapsed?: boolean // Whether child tasks are collapsed
|
||||
isParent?: boolean // Whether it's a parent task
|
||||
type?: string // Task type (task/story/bug/milestone)
|
||||
description?: string // Task description
|
||||
icon?: string // Task icon
|
||||
level?: number // Task level
|
||||
}
|
||||
```
|
||||
|
||||
**Milestone Type**
|
||||
```typescript
|
||||
// Milestone is actually a special usage of Task type
|
||||
// Task object with type: 'milestone' property
|
||||
interface Milestone extends Task {
|
||||
type: 'milestone' // Must be 'milestone'
|
||||
startDate: string // Milestone date (required)
|
||||
endDate?: string // End date (optional, usually same as startDate)
|
||||
}
|
||||
```
|
||||
|
||||
**Language Type**
|
||||
```typescript
|
||||
type Language = 'zh' | 'en' // Supported language types
|
||||
type Locale = 'zh-CN' | 'en-US' // Complete language locale identifiers
|
||||
```
|
||||
|
||||
#### Configuration Types (src/models/configs)
|
||||
|
||||
**TimelineConfig**
|
||||
```typescript
|
||||
interface TimelineConfig {
|
||||
startDate: Date // Timeline start date
|
||||
endDate: Date // Timeline end date
|
||||
zoomLevel: number // Zoom level
|
||||
}
|
||||
```
|
||||
|
||||
**ToolbarConfig**
|
||||
```typescript
|
||||
interface ToolbarConfig {
|
||||
showAddTask?: boolean // Show add task button
|
||||
showAddMilestone?: boolean // Show add milestone button
|
||||
showTodayLocate?: boolean // Show locate today button
|
||||
showExportCsv?: boolean // Show export CSV button
|
||||
showExportPdf?: boolean // Show export PDF button
|
||||
showLanguage?: boolean // Show language switch button
|
||||
showTheme?: boolean // Show theme switch button
|
||||
showFullscreen?: boolean // Show fullscreen toggle button
|
||||
}
|
||||
```
|
||||
|
||||
#### Composable Functions (src/composables)
|
||||
|
||||
**useI18n Internationalization Tool**
|
||||
```typescript
|
||||
// Provides multi-language support
|
||||
const {
|
||||
locale, // Current language
|
||||
setLocale, // Switch language
|
||||
t, // Translation function
|
||||
formatYearMonth // Year-month formatting
|
||||
} = useI18n()
|
||||
|
||||
// Supported languages
|
||||
type Locale = 'zh-CN' | 'en-US'
|
||||
```
|
||||
|
||||
**useMessage Message Tool**
|
||||
```typescript
|
||||
// Provides global message notifications
|
||||
const { showMessage } = useMessage()
|
||||
|
||||
// Message types
|
||||
type MessageType = 'success' | 'error' | 'warning' | 'info'
|
||||
|
||||
// Usage example
|
||||
showMessage('Operation successful', 'success')
|
||||
```
|
||||
|
||||
## 💻 Basic Usage
|
||||
|
||||
### Simple Example
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { GanttChart } from 'jordium-gantt-vue3'
|
||||
import 'jordium-gantt-vue3/dist/style.css'
|
||||
|
||||
const tasks = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Project Kickoff',
|
||||
startDate: '2025-01-01',
|
||||
endDate: '2025-01-15',
|
||||
progress: 80,
|
||||
assignee: 'John Doe'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Requirements Analysis',
|
||||
startDate: '2025-01-16',
|
||||
endDate: '2025-01-30',
|
||||
progress: 60,
|
||||
assignee: 'Jane Smith',
|
||||
predecessor: '1'
|
||||
}
|
||||
])
|
||||
|
||||
const milestones = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Project Milestone',
|
||||
startDate: '2025-01-31',
|
||||
type: 'milestone'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="height: 600px;">
|
||||
<GanttChart
|
||||
:tasks="tasks"
|
||||
:milestones="milestones"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Custom Event Handling
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { GanttChart } from 'jordium-gantt-vue3'
|
||||
|
||||
// Custom double-click handler
|
||||
const handleTaskDoubleClick = (task) => {
|
||||
console.log('Task double-clicked:', task)
|
||||
// Open custom edit interface
|
||||
router.push(`/task/${task.id}/edit`)
|
||||
}
|
||||
|
||||
// Custom delete handler
|
||||
const handleTaskDelete = async (task) => {
|
||||
const confirmed = await showConfirm(`Are you sure to delete task "${task.name}"?`)
|
||||
if (confirmed) {
|
||||
await api.deleteTask(task.id)
|
||||
// Refresh task list
|
||||
refreshTasks()
|
||||
}
|
||||
}
|
||||
|
||||
// Listen to drag events
|
||||
const handleTaskDragEnd = (task) => {
|
||||
console.log('Task drag ended:', task)
|
||||
// Save task time changes
|
||||
api.updateTask(task)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<GanttChart
|
||||
:tasks="tasks"
|
||||
:on-task-double-click="handleTaskDoubleClick"
|
||||
:on-task-delete="handleTaskDelete"
|
||||
:use-default-drawer="false"
|
||||
@taskbar-drag-end="handleTaskDragEnd"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Theme and Internationalization
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { GanttChart } from 'jordium-gantt-vue3'
|
||||
|
||||
// Toolbar configuration
|
||||
const toolbarConfig = {
|
||||
showLanguage: true,
|
||||
showTheme: true,
|
||||
showAddTask: true,
|
||||
showAddMilestone: true,
|
||||
showTodayLocate: true,
|
||||
showExportCsv: true,
|
||||
showExportPdf: true,
|
||||
showFullscreen: true
|
||||
}
|
||||
|
||||
// Custom locale messages
|
||||
const customLocaleMessages = {
|
||||
taskName: 'Custom Task Name',
|
||||
addTask: 'Custom Add Task'
|
||||
}
|
||||
|
||||
// Handle toolbar events
|
||||
const handleLanguageChange = (lang) => {
|
||||
console.log('Language changed to:', lang)
|
||||
}
|
||||
|
||||
const handleThemeChange = (isDark) => {
|
||||
console.log('Theme changed to:', isDark ? 'dark' : 'light')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<GanttChart
|
||||
:tasks="tasks"
|
||||
:milestones="milestones"
|
||||
:toolbar-config="toolbarConfig"
|
||||
:locale-messages="customLocaleMessages"
|
||||
:on-language-change="handleLanguageChange"
|
||||
:on-theme-change="handleThemeChange"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 🤝 Contributing & Collaboration
|
||||
|
||||
### Contributing
|
||||
|
||||
We welcome community contributions! If you want to participate in project development:
|
||||
|
||||
1. **Fork** this repository
|
||||
2. **Create** your feature branch (`git checkout -b feature/AmazingFeature`)
|
||||
3. **Commit** your changes (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. **Push** to the branch (`git push origin feature/AmazingFeature`)
|
||||
5. **Open** a Pull Request
|
||||
|
||||
### Report Issues
|
||||
|
||||
If you find bugs or have feature suggestions:
|
||||
|
||||
- 📬 [Submit Github Issue](https://github.com/nelson820125/jordium-gantt-vue3/issues)
|
||||
- 📬 [Submit Gitee Issue](https://gitee.com/jordium/jordium-gantt-vue3/issues)
|
||||
- 📧 Send email to：ning.li@jordium.com / nelson820125@gmail.com / lining820125@163.com
|
||||
|
||||
### Business Collaboration
|
||||
|
||||
We provide professional technical support and custom development services:
|
||||
|
||||
- 🏢 **Enterprise Customization**: Custom Gantt chart features based on business needs
|
||||
- 💼 **Technical Consulting**: Project management system architecture design consultation
|
||||
|
||||
**Contact Information**：
|
||||
- 📧 Business Email：ning.li@jordium.com / nelson820125@gmail.com
|
||||
|
||||
### Development Environment
|
||||
|
||||
```bash
|
||||
# Clone project
|
||||
git clone https://github.com/nelson820125/jordium-gantt-vue3.git
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development server
|
||||
npm run dev
|
||||
|
||||
# Build library
|
||||
npm run build:lib
|
||||
|
||||
# Run tests
|
||||
npm run test
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🔗 Related Links**
|
||||
- [GitHub Repository](https://github.com/nelson820125/jordium-gantt-vue3)
|
||||
- [Changelog](./CHANGELOG.md)
|
||||
|
||||
> 💡 **Tip**: If this project helps you, please give us a ⭐ Star!
|
||||
79
README.en.md
79
README.en.md
@@ -1,79 +0,0 @@
|
||||
# jordium-gantt-vue3
|
||||
|
||||
A modern, flexible, and feature-rich Gantt chart component library for Vue 3, designed for project management, task scheduling, milestone tracking, and timeline visualization. This plugin provides a highly interactive and customizable Gantt chart experience, supporting drag-and-drop, theme switching, and internationalization.
|
||||
|
||||
## Installation
|
||||
|
||||
Install via npm or yarn:
|
||||
|
||||
```bash
|
||||
npm install jordium-gantt-vue3
|
||||
# or
|
||||
yarn add jordium-gantt-vue3
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Props
|
||||
|
||||
| Prop | Type | Description |
|
||||
| ----------------- | ------------------- | ------------------------------------------- |
|
||||
| tasks | Task[] | Task data array |
|
||||
| milestones | Task[] | Milestone data array |
|
||||
| startDate | Date \| string | Timeline start date |
|
||||
| endDate | Date \| string | Timeline end date |
|
||||
| useDefaultDrawer | boolean | Use built-in task drawer |
|
||||
| onTaskDoubleClick | function | Task double-click handler |
|
||||
| onTaskDelete | function | Task delete handler |
|
||||
| onMilestoneSave | function | Milestone save handler |
|
||||
| editComponent | Component | Custom task edit component |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Payload | Description |
|
||||
| ----------------------- | --------------- | ------------------------------------------ |
|
||||
| @taskbar-drag-end | Task | Task bar drag end |
|
||||
| @taskbar-resize-end | Task | Task bar resize end |
|
||||
| @milestone-drag-end | Milestone | Milestone drag end |
|
||||
| @task-updated | Task | Task updated |
|
||||
| @task-added | Task | Task added |
|
||||
| @task-deleted | Task | Task deleted |
|
||||
| @milestone-data-updated | Milestone | Milestone updated |
|
||||
| @milestone-deleted | number | Milestone deleted (id) |
|
||||
|
||||
### Theming
|
||||
|
||||
- Supports light/dark mode via `isDark` prop or global theme variables.
|
||||
- Customize colors via CSS variables in `theme-variables.css`.
|
||||
|
||||
## Usage Example
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { GanttChart } from 'jordium-gantt-vue3'
|
||||
import 'jordium-gantt-vue3/dist/style.css'
|
||||
|
||||
const tasks = [
|
||||
// ...your task data
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<GanttChart :tasks="tasks" />
|
||||
</template>
|
||||
```
|
||||
|
||||
## Source Code & Demo
|
||||
|
||||
- Full source code and demo examples are available on GitHub:
|
||||
- [jordium-gantt-vue3 GitHub Repository](https://github.com/nelson820125/jordium-gantt-vue3)
|
||||
|
||||
## Author & Contribution
|
||||
|
||||
- Author: Jordium.com (Email: nelson820125@gmail.com / ning.li@jordium.com)
|
||||
- Feel free to submit issues or pull requests on GitHub.
|
||||
- Contributions, suggestions, and feedback are welcome!
|
||||
|
||||
---
|
||||
|
||||
For more details, see the [README](./README.md).
|
||||
@@ -366,14 +366,14 @@ const handleTaskDrawerDelete = (taskId: number) => {
|
||||
const handleGithubDocsClick = (event: Event) => {
|
||||
event.preventDefault()
|
||||
// 打开GitHub仓库的README页面
|
||||
window.open('https://github.com/jordium-gantt/jordium-gantt-vue3#readme', '_blank')
|
||||
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-gantt/jordium-gantt-vue3#readme', '_blank')
|
||||
window.open('https://gitee.com/jordium/jordium-gantt-vue3.git', '_blank')
|
||||
}
|
||||
|
||||
// 任务拖拽/拉伸/里程碑拖拽监听
|
||||
|
||||
@@ -80,5 +80,10 @@
|
||||
"更新README文档",
|
||||
"重构项目目录结构"
|
||||
]
|
||||
},
|
||||
{
|
||||
"version": "1.0.1",
|
||||
"date": "2025-07-01",
|
||||
"notes": ["增加npm安装及组件集成示例"]
|
||||
}
|
||||
]
|
||||
|
||||
768
packageDemo/App.vue
Normal file
768
packageDemo/App.vue
Normal file
@@ -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>
|
||||
332
packageDemo/VersionHistoryDrawer.vue
Normal file
332
packageDemo/VersionHistoryDrawer.vue
Normal file
@@ -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>
|
||||
187
packageDemo/data.json
Normal file
187
packageDemo/data.json
Normal file
@@ -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测试版本，提供给内部团队进行功能验证和测试。"
|
||||
}
|
||||
]
|
||||
}
|
||||
13
packageDemo/index.html
Normal file
13
packageDemo/index.html
Normal file
@@ -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>
|
||||
5
packageDemo/main.ts
Normal file
5
packageDemo/main.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
3412
packageDemo/package-lock.json
generated
Normal file
3412
packageDemo/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
39
packageDemo/package.json
Normal file
39
packageDemo/package.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
12
packageDemo/public/favicon.svg
Normal file
12
packageDemo/public/favicon.svg
Normal file
@@ -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 |
1
packageDemo/public/gitee.svg
Normal file
1
packageDemo/public/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 |
1
packageDemo/public/github.svg
Normal file
1
packageDemo/public/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 |
1
packageDemo/public/vite.svg
Normal file
1
packageDemo/public/vite.svg
Normal file
@@ -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 |
113
packageDemo/style.css
Normal file
113
packageDemo/style.css
Normal file
@@ -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;
|
||||
}
|
||||
89
packageDemo/version-history.json
Normal file
89
packageDemo/version-history.json
Normal file
@@ -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引用示例"]
|
||||
}
|
||||
]
|
||||
7
packageDemo/vite.config.ts
Normal file
7
packageDemo/vite.config.ts
Normal file
@@ -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