@lee576/vue3-gantt 1.0.0 → 1.0.1

package/README.en-US.md

@@ -39,6 +39,7 @@ A feature-rich, highly customizable Vue 3 Gantt chart component that supports ta
 
 - **Multiple View Modes** - Month, Day, Week, and Hour time granularity views
 - **Task Dependencies** - Support for FS, SS, FF, SF dependency types
+- **Milestone Support** - Diamond markers for key project milestones with dependency support
 - **Theme System** - 5 built-in themes with custom theme support
 - **Internationalization** - Built-in 8 languages, easily extensible
 - **Progress Management** - Visual progress bars with drag-to-adjust
@@ -48,9 +49,24 @@ A feature-rich, highly customizable Vue 3 Gantt chart component that supports ta
 
 ## Installation
 
+### Option 1: Install via npm (Recommended)
+
+```bash
+# Using npm
+npm install @lee576/vue3-gantt
+
+# Or using yarn
+yarn add @lee576/vue3-gantt
+
+# Or using pnpm
+pnpm add @lee576/vue3-gantt
+```
+
+### Option 2: Build from Source
+
 ```bash
 # Clone repository
-git clone <repository-url>
+git clone https://github.com/lee576/vue3-gantt.git
 
 # Install dependencies
 npm install
@@ -70,6 +86,23 @@ npm run dev
 
 ## Basic Usage
 
+### 1. Import Component and Styles
+
+```typescript
+import { ref, onMounted } from 'vue';
+import dayjs from 'dayjs';
+// Import Gantt component and types
+import Gantt, { 
+  type DataConfig, 
+  type StyleConfig, 
+  type EventConfig 
+} from '@lee576/vue3-gantt';
+// Import styles
+import '@lee576/vue3-gantt/style.css';
+import { LinkType } from '@lee576/vue3-gantt';
+
+### 2. Configure Component
+
 ```vue
 <template>
   <gantt 
@@ -80,17 +113,7 @@ npm run dev
 </template>
 ```
 
-
 ```typescript
-import { ref, onMounted } from 'vue';
-import dayjs from 'dayjs';
-import Gantt, { 
-  type DataConfig, 
-  type StyleConfig, 
-  type EventConfig 
-} from './components/gantt/Gantt.vue';
-import { LinkType } from './components/gantt/Types';
-
 // Style configuration
 const styleConfig = ref<StyleConfig>({
   headersHeight: 100,  // Header height
@@ -234,6 +257,8 @@ interface ProgressUpdateDetail {
 
 ## Task Data Format
 
+### Regular Task
+
 ```typescript
 {
   id: '1',                              // Task ID
@@ -247,6 +272,29 @@ interface ProgressUpdateDetail {
 }
 ```
 
+### Milestone Task
+
+Milestones are key project checkpoints, displayed with diamond icons. The key characteristic is **start date equals end date**:
+
+```typescript
+{
+  id: 'milestone-1',                   // Milestone ID
+  pid: '0',                             // Parent task ID
+  taskNo: '🎯 Requirements Complete', // Milestone name
+  level: 'Urgent',                      // Priority
+  start_date: '2024-12-02 18:00:00',   // Start time
+  end_date: '2024-12-02 18:00:00',     // End time (same as start)
+  job_progress: '1.0',                 // Milestones are usually 100%
+  spend_time: null,
+  type: 'milestone'                    // Optional: explicitly mark as milestone
+}
+```
+
+**Milestone Recognition Rules**:
+1. **Auto-detection**: Automatically displayed as diamond when `start_date === end_date`
+2. **Explicit marking**: Set `type: 'milestone'` field
+3. **Custom function**: Custom logic via `styleConfig.setTaskType`
+
 ## Task Dependencies
 
 ```
@@ -273,6 +321,8 @@ Finish-Start (FS)  Start-Start (SS)   Finish-Finish (FF) Start-Finish (SF)
 
 ### Configuration Example
 
+#### Regular Task Dependencies
+
 ```typescript
 import { LinkType } from './components/gantt/Types';
 
@@ -280,14 +330,34 @@ dependencies: [
   // Task 2 starts after Task 1 finishes
   { sourceTaskId: '1', targetTaskId: '2', type: LinkType.FINISH_TO_START },
   
-  // Task 3 and Task 4 start simultaneously
+  // Task 3 and Task 4 start together
   { sourceTaskId: '3', targetTaskId: '4', type: LinkType.START_TO_START },
   
-  // Task 5 and Task 6 must finish simultaneously
+  // Task 5 and Task 6 must finish together
   { sourceTaskId: '5', targetTaskId: '6', type: LinkType.FINISH_TO_FINISH },
 ]
 ```
 
+#### Milestone Dependencies
+
+Milestones support being **source** or **target** in dependency relationships:
+
+```typescript
+dependencies: [
+  // Task completion → Milestone
+  { sourceTaskId: 'task-5', targetTaskId: 'milestone-1', type: LinkType.FINISH_TO_START },
+  
+  // Milestone → Task starts
+  { sourceTaskId: 'milestone-1', targetTaskId: 'task-6', type: LinkType.FINISH_TO_START },
+  
+  // Multiple tasks → Same milestone
+  { sourceTaskId: 'frontend-dev', targetTaskId: 'milestone-2', type: LinkType.FINISH_TO_START },
+  { sourceTaskId: 'backend-dev', targetTaskId: 'milestone-2', type: LinkType.FINISH_TO_START },
+]
+```
+
+```
+
 ## View Modes
 
 | Mode | Time Unit | Header Example | Use Case |

package/README.md

@@ -48,6 +48,7 @@
 
 - **多视图模式** - 支持月、日、周、时四种时间粒度视图
 - **任务依赖关系** - 支持 FS、SS、FF、SF 四种依赖类型
+- **里程碑功能** - 菱形图标标记项目关键节点，支持作为依赖源和目标
 - **主题系统** - 内置 5 种主题，支持自定义主题
 - **国际化支持** - 内置 8 种语言，可扩展更多语言
 - **进度管理** - 可视化进度条，支持拖拽调整进度
@@ -57,9 +58,24 @@
 
 ## 安装
 
+### 方式一：通过 npm 安装（推荐）
+
+```bash
+# 使用 npm 安装
+npm install @lee576/vue3-gantt
+
+# 或使用 yarn
+yarn add @lee576/vue3-gantt
+
+# 或使用 pnpm
+pnpm add @lee576/vue3-gantt
+```
+
+### 方式二：从源码构建
+
 ```bash
 # 克隆项目
-git clone <repository-url>
+git clone https://github.com/lee576/vue3-gantt.git
 
 # 安装依赖
 npm install
@@ -79,6 +95,23 @@ npm run dev
 
 ## 基本使用
 
+### 1. 引入组件和样式
+
+```typescript
+import { ref, onMounted } from 'vue';
+import dayjs from 'dayjs';
+// 引入甘特图组件和类型
+import Gantt, { 
+  type DataConfig, 
+  type StyleConfig, 
+  type EventConfig 
+} from '@lee576/vue3-gantt';
+// 引入样式文件
+import '@lee576/vue3-gantt/style.css';
+import { LinkType } from '@lee576/vue3-gantt';
+
+### 2. 配置组件
+
 ```vue
 <template>
   <gantt 
@@ -89,17 +122,7 @@ npm run dev
 </template>
 ```
 
-
 ```typescript
-import { ref, onMounted } from 'vue';
-import dayjs from 'dayjs';
-import Gantt, { 
-  type DataConfig, 
-  type StyleConfig, 
-  type EventConfig 
-} from './components/gantt/Gantt.vue';
-import { LinkType } from './components/gantt/Types';
-
 // 样式配置
 const styleConfig = ref<StyleConfig>({
   headersHeight: 100,  // 表头高度
@@ -243,6 +266,8 @@ interface ProgressUpdateDetail {
 
 ## 任务数据格式
 
+### 普通任务
+
 ```typescript
 {
   id: '1',                              // 任务ID
@@ -256,6 +281,29 @@ interface ProgressUpdateDetail {
 }
 ```
 
+### 里程碑任务
+
+里程碑是项目中的关键节点，使用菱形图标显示，特点是**开始日期等于结束日期**：
+
+```typescript
+{
+  id: 'milestone-1',                   // 里程碑ID
+  pid: '0',                             // 父任务ID
+  taskNo: '🎯 需求分析完成',         // 里程碑名称
+  level: '紧急',                        // 优先级
+  start_date: '2024-12-02 18:00:00',   // 开始时间
+  end_date: '2024-12-02 18:00:00',     // 结束时间（与开始时间相同）
+  job_progress: '1.0',                 // 里程碑通常为100%
+  spend_time: null,
+  type: 'milestone'                    // 可选：显式标记为里程碑
+}
+```
+
+**里程碑识别规则**：
+1. **自动识别**：当 `start_date === end_date` 时自动显示为菱形
+2. **显式标记**：设置 `type: 'milestone'` 字段
+3. **自定义函数**：通过 `styleConfig.setTaskType` 自定义判断逻辑
+
 ## 任务依赖关系
 
 ```
@@ -281,6 +329,8 @@ interface ProgressUpdateDetail {
 
 ### 配置示例
 
+#### 普通任务依赖
+
 ```typescript
 import { LinkType } from './components/gantt/Types';
 
@@ -296,6 +346,24 @@ dependencies: [
 ]
 ```
 
+#### 里程碑依赖
+
+里程碑支持作为依赖关系的**源**或**目标**：
+
+```typescript
+dependencies: [
+  // 任务完成 → 里程碑
+  { sourceTaskId: 'task-5', targetTaskId: 'milestone-1', type: LinkType.FINISH_TO_START },
+  
+  // 里程碑 → 任务开始
+  { sourceTaskId: 'milestone-1', targetTaskId: 'task-6', type: LinkType.FINISH_TO_START },
+  
+  // 多个任务 → 同一个里程碑
+  { sourceTaskId: 'frontend-dev', targetTaskId: 'milestone-2', type: LinkType.FINISH_TO_START },
+  { sourceTaskId: 'backend-dev', targetTaskId: 'milestone-2', type: LinkType.FINISH_TO_START },
+]
+```
+
 ## 视图模式
 
 | 模式 | 时间单位 | 表头示例 | 适用场景 |
@@ -702,6 +770,7 @@ A feature-rich, highly customizable Vue 3 Gantt chart component that supports ta
 
 - **Multiple View Modes** - Month, Day, Week, and Hour time granularity views
 - **Task Dependencies** - Support for FS, SS, FF, SF dependency types
+- **Milestone Support** - Diamond markers for key project milestones with dependency support
 - **Theme System** - 5 built-in themes with custom theme support
 - **Internationalization** - Built-in 8 languages, easily extensible
 - **Progress Management** - Visual progress bars with drag-to-adjust