@lee576/vue3-gantt 1.0.0 → 1.0.2

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,110 @@ 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 Container Height (Important!)
+
+**The component requires an explicit container height to display properly**. Here are several recommended configuration methods:
+
+#### Method 1: Using Viewport Height (Simplest)
+
+```vue
+<template>
+  <div class="gantt-container">
+    <gantt 
+      :styleConfig="styleConfig" 
+      :dataConfig="dataConfig" 
+      :eventConfig="eventConfig"
+    />
+  </div>
+</template>
+
+<style scoped>
+.gantt-container {
+  height: 100vh; /* Use viewport height directly */
+}
+</style>
+```
+
+#### Method 2: Using Percentage Height (Requires html/body Configuration)
+
+```vue
+<template>
+  <div id="app">
+    <gantt 
+      :styleConfig="styleConfig" 
+      :dataConfig="dataConfig" 
+      :eventConfig="eventConfig"
+    />
+  </div>
+</template>
+
+<style>
+/* Global styles: Ensure html and body have height */
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  height: 100%; /* Now 100% works properly */
+}
+</style>
+```
+
+#### Method 3: Using Fixed Pixel Value
+
+```vue
+<style scoped>
+.gantt-container {
+  height: 800px; /* Fixed height */
+}
+</style>
+```
+
+#### Method 4: Using Flex Layout
+
+```vue
+<template>
+  <div class="page-wrapper">
+    <div class="header">Header</div>
+    <div class="gantt-container">
+      <gantt ... />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.gantt-container {
+  flex: 1; /* Auto-fill remaining space */
+}
+</style>
+```
+
+### 3. Configure Component
+
 ```vue
 <template>
   <gantt 
@@ -80,17 +200,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 +344,8 @@ interface ProgressUpdateDetail {
 
 ## Task Data Format
 
+### Regular Task
+
 ```typescript
 {
   id: '1',                              // Task ID
@@ -247,6 +359,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 +408,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 +417,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

@@ -21,19 +21,9 @@
 
 ## 界面预览
 
-```
-┌─────────────────────────────────────────────────────────────────────────────┐
-│                        Vue3 Gantt 专业组件                                  │
-├─────────────────┬───────────────────────────────────────────────────────────┤
-│ 任务名称        │ 12/01  12/02  12/03  12/04  12/05  12/06  12/07  12/08   │
-├─────────────────┼───────────────────────────────────────────────────────────┤
-│ 主任务1 - 项目规划│ ████████████████████████████████████████████ 85%        │
-│   子任务1.1 - 需求│   ████████████ 100%                                     │
-│ 主任务2 - 开发阶段│       ████████████████████████████ 60%                  │
-│ 主任务3 - 测试阶段│             ████████████████ 45%                        │
-│ 主任务4 - 部署上线│                   ████████ 30%                          │
-│ 主任务5 - 维护优化│                       ████ 0%                           │
-└─────────────────┴───────────────────────────────────────────────────────────┘
+<img width="1913" height="923" alt="image" src="https://github.com/user-attachments/assets/34562bf8-0709-44aa-a05d-6e970ea8b57f" />
+<img width="1915" height="916" alt="image" src="https://github.com/user-attachments/assets/d6a60ba1-9f5b-479a-b402-68014ec7c935" />
+
 ```
 
 **主要特点：**
@@ -48,6 +38,7 @@
 
 - **多视图模式** - 支持月、日、周、时四种时间粒度视图
 - **任务依赖关系** - 支持 FS、SS、FF、SF 四种依赖类型
+- **里程碑功能** - 菱形图标标记项目关键节点，支持作为依赖源和目标
 - **主题系统** - 内置 5 种主题，支持自定义主题
 - **国际化支持** - 内置 8 种语言，可扩展更多语言
 - **进度管理** - 可视化进度条，支持拖拽调整进度
@@ -57,9 +48,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 +85,110 @@ 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. 配置容器高度（重要！）
+
+**组件必须有明确的容器高度才能正常显示**。以下是几种推荐的配置方式：
+
+#### 方式 1：使用视口高度（最简单）
+
+```vue
+<template>
+  <div class="gantt-container">
+    <gantt 
+      :styleConfig="styleConfig" 
+      :dataConfig="dataConfig" 
+      :eventConfig="eventConfig"
+    />
+  </div>
+</template>
+
+<style scoped>
+.gantt-container {
+  height: 100vh; /* 直接使用视口高度 */
+}
+</style>
+```
+
+#### 方式 2：使用百分比高度（需要配置 html/body）
+
+```vue
+<template>
+  <div id="app">
+    <gantt 
+      :styleConfig="styleConfig" 
+      :dataConfig="dataConfig" 
+      :eventConfig="eventConfig"
+    />
+  </div>
+</template>
+
+<style>
+/* 全局样式：确保 html 和 body 有高度 */
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  height: 100%; /* 现在 100% 就能正常工作了 */
+}
+</style>
+```
+
+#### 方式 3：使用固定像素值
+
+```vue
+<style scoped>
+.gantt-container {
+  height: 800px; /* 固定高度 */
+}
+</style>
+```
+
+#### 方式 4：使用 Flex 布局
+
+```vue
+<template>
+  <div class="page-wrapper">
+    <div class="header">Header</div>
+    <div class="gantt-container">
+      <gantt ... />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.gantt-container {
+  flex: 1; /* 自动填充剩余空间 */
+}
+</style>
+```
+
+### 3. 配置组件
+
 ```vue
 <template>
   <gantt 
@@ -89,17 +199,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 +343,8 @@ interface ProgressUpdateDetail {
 
 ## 任务数据格式
 
+### 普通任务
+
 ```typescript
 {
   id: '1',                              // 任务ID
@@ -256,6 +358,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 +406,8 @@ interface ProgressUpdateDetail {
 
 ### 配置示例
 
+#### 普通任务依赖
+
 ```typescript
 import { LinkType } from './components/gantt/Types';
 
@@ -296,6 +423,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 +847,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