gantt-planing-vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 GOaroundT-T
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,199 @@
+# gantt-planing-vue
+
+现代化 Vue 3 工程项目进度管理与 4 合 1 网络图引擎组件库（甘特图 + 时标网络图 + 双代号 ADM + 单代号 PERT/PDM 前导图），原生支持 CAD 级平移缩放视口与关键路径法（CPM）算法。
+
+[![Vue 3](https://img.shields.io/badge/Vue-3.5%2B-brightgreen.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.7%2B-blue.svg)](https://www.typescriptlang.org/)
+[![Vite](https://img.shields.io/badge/Vite-5.4%2B-646CFF.svg)](https://vitejs.dev/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## 🌟 核心特性
+
+### 1. 4 合 1 进度图表引擎（统一底层数据驱动）
+- **甘特图（Gantt Chart）**：
+  - 无限级任务树与表格（WBS、工期、进度、起止日期）。
+  - 大数据高性能**手动虚拟滚动**（Phantom 容器 + translateY 视口裁剪）。
+  - **指针式响应式拖拽**：支持任务条整体平移、左右端工期拉伸、进度拖动。
+  - **依赖连线绘制**：拖动任务条右侧连线锚点直接拉线连接紧后任务。
+  - **丰富快捷键操作**：`Tab`（任务降级为子节点）、`Shift + Tab`（任务升级）、`Delete`（删除任务）、`Ctrl + D`（快捷复制下行新建）、`Ctrl + X / C / V`（任务剪切/复制/粘贴）。
+- **时标网络图（Time-Scaled Network Diagram）**：
+  - 水平实箭线表示工作持续时间 $DU$。
+  - 工程标准**自由时差波形线（Wave Line / Free Float FF）**自动生成。
+  - 紧后工作折线/垂直逻辑转移线。
+- **双代号网络图（ADM - Arrow Diagramming Method）**：
+  - 节点为事件编号圆圈 $(i) \to (j)$，满足拓扑编号 $i < j$。
+  - 箭线上方标注工作名称，下方标注持续时间。
+  - 逻辑断路与虚工作自动生成**虚箭线（Dashed Arrow）**。
+- **单代号 / PERT 前导图（PDM - Precedence Diagramming Method）**：
+  - 工程级**标准六参数活动卡片**：
+    $$\begin{array}{|c|c|c|} \hline \text{最早开始 (ES)} & \text{工期 (DU)} & \text{最早完成 (EF)} \\ \hline \multicolumn{3}{|c|}{\text{工作名称 / 关键路径徽标}} \\ \hline \text{最迟开始 (LS)} & \text{总时差 (TF)} & \text{最迟完成 (LF)} \\ \hline \end{array}$$
+  - 基于拓扑分层的 Sugiyama 正交避让连线布局。
+
+### 2. 关键路径法（CPM）引擎
+- 内置标准 CPM 前向正推算法（Forward Pass，求 $ES, EF$）与逆向逆推算法（Backward Pass，求 $LS, LF$）。
+- 自动计算**总时差（Total Float $TF$）**与**自由时差（Free Float $FF$）**。
+- 自动识别关键工作（$TF = 0$）并在图表中以醒目红色标注**关键线路（Critical Path）**。
+
+### 3. CAD 级交互视口（useCadViewport）
+- **无级缩放**：滚轮以鼠标当前光标坐标为中心无级放大/缩小（20% ~ 350%）。
+- **画布平移**：鼠标左键/中键拖拽画布无限平移。
+- **CAD 控制台**：放大、缩小、1:1 原始比例还原、**一键全图自适应居中（Fit to Screen）**。
+- 点阵背景底纹与图例系统。
+
+---
+
+## 📦 安装
+
+```bash
+npm install gantt-planing-vue
+# 或者
+pnpm add gantt-planing-vue
+# 或者
+yarn add gantt-planing-vue
+```
+
+---
+
+## 🚀 快速上手
+
+### 1. 全局注册插件
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import GanttPlaningVue from 'gantt-planing-vue'
+import 'gantt-planing-vue/style.css'
+
+const app = createApp(App)
+app.use(GanttPlaningVue)
+app.mount('#app')
+```
+
+### 2. 在组件中使用
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { GanttChart, ScaleMode, ViewMode, type Task, type TreeColumn } from 'gantt-planing-vue'
+
+const tasks = ref<Task[]>([
+  {
+    id: 1,
+    parent_id: 0,
+    name: '基础工程',
+    duration: 5,
+    progress: 40,
+    start: new Date(2026, 8, 1),
+    end: new Date(2026, 8, 6),
+    children: [],
+  },
+  {
+    id: 2,
+    parent_id: 0,
+    name: '主体结构施工',
+    duration: 10,
+    progress: 10,
+    dependencies: ['1'], // 紧前任务为基础工程
+    start: new Date(2026, 8, 6),
+    end: new Date(2026, 8, 16),
+    children: [],
+  },
+])
+
+const columns = ref<TreeColumn[]>([
+  { type: 'selection', title: '任务名称', field: 'name', width: 260, align: 'left' },
+  { title: '工期', field: 'duration', width: 80, align: 'center' },
+  { title: '进度', field: 'progress', width: 80, align: 'center' },
+])
+
+const viewMode = ref<ViewMode>(ViewMode.GanttViewer)
+const scaleMode = ref<ScaleMode>(ScaleMode.Day)
+</script>
+
+<template>
+  <div style="width: 100vw; height: 100vh;">
+    <!-- 切换模式：ViewMode.GanttViewer | ViewMode.TimeViewer | ViewMode.AdmViewer | ViewMode.PdmViewer -->
+    <GanttChart
+      v-model:tasks="tasks"
+      :task-data="tasks"
+      :column-data="columns"
+      :scale-mode="scaleMode"
+      :view-mode="viewMode"
+    />
+  </div>
+</template>
+```
+
+---
+
+## 🛠️ 单独使用 CAD 网络图查看器
+
+如果只需要使用独立的 CAD 网络图查看器，可以直接使用 `DiagramViewer`：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { DiagramViewer, type Task } from 'gantt-planing-vue'
+
+const tasks = ref<Task[]>([/* 任务数据 */])
+const mode = ref<'time' | 'adm' | 'pert'>('pert')
+</script>
+
+<template>
+  <div style="width: 1000px; height: 600px;">
+    <DiagramViewer
+      :tasks="tasks"
+      :mode="mode"
+      :show-toolbar="true"
+      :show-legend="true"
+    />
+  </div>
+</template>
+```
+
+---
+
+## 🧮 独立调用 CPM 关键路径算法
+
+```typescript
+import { calculateCpm } from 'gantt-planing-vue'
+
+const result = calculateCpm(tasks)
+console.log('总工期:', result.totalDuration)
+console.log('关键线路任务 ID 列表:', result.criticalPath)
+
+// 每个活动的六参数：
+result.activityList.forEach(act => {
+  console.log(`${act.name}: ES=${act.es}, EF=${act.ef}, LS=${act.ls}, LF=${act.lf}, 总时差TF=${act.tf}, 自由时差FF=${act.ff}, 关键工作=${act.isCritical}`)
+})
+```
+
+---
+
+## 💻 本地运行 Demo
+
+```bash
+# 进入项目根目录
+cd gantt-planing-vue
+
+# 安装依赖
+npm install
+
+# 启动 Vite 开发服务器预览 Demo
+npm run dev
+
+# 运行类型检查
+npm run typecheck
+
+# 构建生产产物
+npm run build
+```
+
+---
+
+## 📄 开源许可证
+
+[MIT License](LICENSE) © 2026