chbim-time-axis-v2 0.0.5 → 0.0.7

package/README.md

@@ -0,0 +1,204 @@
+# chbim-time-axis-v2
+
+[![npm version](https://img.shields.io/npm/v/chbim-time-axis-v2.svg?style=flat-square)](https://www.npmjs.com/package/chbim-time-axis-v2)
+[![License](https://img.shields.io/npm/l/chbim-time-axis-v2.svg?style=flat-square)](https://www.npmjs.com/package/chbim-time-axis-v2)
+[![Downloads](https://img.shields.io/npm/dt/chbim-time-axis-v2.svg?style=flat-square)](https://www.npmjs.com/package/chbim-time-axis-v2)
+
+一个专为 Vue 3 设计的甘特图组件，完美集成 Cesium 时间轴功能。
+
+## ✨ 特性
+
+- 🤝 **Cesium 集成**: 与 Cesium Viewer 和 Timeline 无缝同步，实现二三维联动。
+- 📅 **多功能甘特图**: 支持任务组、普通任务、时间块（Block）和瞬时点（Instant）多种类型。
+- 🎨 **高度可定制**: 提供丰富的插槽（Slots）和事件（Events）以满足不同业务需求。
+- ⚡ **TypeScript 支持**: 提供完整的类型定义，开发体验更佳。
+
+## 📦 安装
+
+使用 npm 或 yarn 安装：
+
+```bash
+npm install chbim-time-axis-v2
+# 或者
+yarn add chbim-time-axis-v2
+```
+
+## 🚀 使用指南
+
+### 1. 全局注册（可选）
+
+在 `main.ts` 中引入并注册：
+
+```typescript
+// main.ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import CesiumGantt from "chbim-time-axis-v2";
+import "chbim-time-axis-v2/dist/style.css"; // 引入样式文件
+
+const app = createApp(App);
+app.use(CesiumGantt);
+app.mount("#app");
+```
+
+之后可以在任意组件中直接使用，无需再次导入：
+
+```vue
+<CesiumGantt :viewer="viewer" v-model:tasks="tasks" />
+```
+
+### 2. 局部注册（推荐）
+
+在组件中直接导入使用：
+
+```vue
+<template>
+  <div class="container">
+    <!-- Cesium Viewer 容器 -->
+    <div ref="cesiumContainer" class="cesium-container"></div>
+
+    <!-- 甘特图组件容器 -->
+    <div class="gantt-container">
+      <CesiumGantt
+        v-if="viewer"
+        :viewer="viewer"
+        v-model:tasks="tasks"
+        @task-enter="handleTaskEnter"
+        @task-leave="handleTaskLeave"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import {
+  CesiumGantt,
+  type GanttTask,
+  type GanttGroup,
+} from "chbim-time-axis-v2";
+import "chbim-time-axis-v2/dist/style.css"; // 务必引入样式
+import * as Cesium from "cesium";
+import dayjs from "dayjs";
+
+// Cesium 相关设置
+const cesiumContainer = ref<HTMLElement | null>(null);
+const viewer = ref<Cesium.Viewer | null>(null);
+
+// 任务数据示例
+const tasks = ref<(GanttTask | GanttGroup)[]>([
+  {
+    id: "1",
+    name: "示例任务组 1",
+    type: "group",
+    children: [
+      {
+        id: "1-1",
+        name: "任务 1",
+        startTime: dayjs().toISOString(),
+        endTime: dayjs().add(2, "day").toISOString(),
+      },
+    ],
+  },
+]);
+
+// 初始化 Cesium
+onMounted(() => {
+  if (cesiumContainer.value) {
+    viewer.value = new Cesium.Viewer(cesiumContainer.value, {
+      timeline: true,
+      animation: true,
+      baseLayerPicker: false,
+    });
+  }
+});
+
+onUnmounted(() => {
+  if (viewer.value) {
+    viewer.value.destroy();
+  }
+});
+
+// 事件处理
+const handleTaskEnter = (items: any[]) => {
+  console.log("进入任务时间段:", items);
+};
+
+const handleTaskLeave = (items: any[]) => {
+  console.log("离开任务时间段:", items);
+};
+</script>
+
+<style>
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.cesium-container {
+  flex: 1;
+  width: 100%;
+}
+.gantt-container {
+  height: 300px; /* 根据需要调整高度 */
+  background: #2b2b2b;
+}
+</style>
+```
+
+## ⚙️ 组件属性 (Props)
+
+| 属性名   | 类型                          | 描述                                                           |
+| :------- | :---------------------------- | :------------------------------------------------------------- |
+| `viewer` | `Cesium.Viewer`               | **必传**。Cesium Viewer 实例，用于时间轴同步。                 |
+| `clock`  | `Cesium.Clock`                | (可选) 如果不使用 viewer.clock，可显式传入 Cesium Clock 实例。 |
+| `tasks`  | `(GanttTask \| GanttGroup)[]` | 任务列表数据。支持 `v-model:tasks` 双向绑定。                  |
+
+## 📡 事件系统 (Events)
+
+| 事件名         | 载荷 (Payload) | 描述                                                                                      |
+| :------------- | :------------- | :---------------------------------------------------------------------------------------- |
+| `update:tasks` | `tasks[]`      | 当任务被更新（拖拽、编辑）时触发。                                                        |
+| `task-enter`   | `items[]`      | 当时间轴播放**进入**某个任务的时间范围时触发。Payload 包含 `{ task, block?, instant? }`。 |
+| `task-leave`   | `items[]`      | 当时间轴播放**离开**某个任务的时间范围时触发。                                            |
+| `add`          | `parentId`     | 点击组（group）上的新增按钮时触发（如果使用默认插槽）。                                   |
+| `delete`       | `taskId`       | 点击任务上的删除按钮时触发（如果使用默认插槽）。                                          |
+
+## 📊 数据结构
+
+### GanttTask 类型定义
+
+```typescript
+interface GanttTask {
+  id: string;
+  name: string;
+  startTime: string; // ISO 8601 格式字符串
+  endTime: string; // ISO 8601 格式字符串
+  type?: "task" | "group" | "block" | "instant";
+  children?: GanttTask[]; // 仅 "group" 类型有效
+
+  // 当 type 为 'block' 时使用
+  blocks?: {
+    startTime: string;
+    endTime: string;
+    name: string;
+    color?: string;
+  }[];
+
+  // 当 type 为 'instant' 时使用
+  instants?: {
+    id: string;
+    time: string;
+    name: string;
+    color?: string;
+  }[];
+}
+```
+
+## 🧩 插槽 (Slots)
+
+| 插槽名称         | Props 参数                                   | 描述                                 |
+| :--------------- | :------------------------------------------- | :----------------------------------- |
+| `toolbar`        | `{ togglePlay, isPlaying, handleResetView }` | 自定义顶部工具栏区域的内容。         |
+| `taskOp`         | `{ item }`                                   | 自定义任务列表每一行的操作按钮区域。 |
+| `barContextMenu` | `{ task, block, instant, close }`            | 自定义右键点击任务条时的上下文菜单。 |

package/{index.es.js → dist/chbim-time-axis-v2.es.js}

@@ -12641,7 +12641,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     class: "instantTaskPoint draggable",
                     style: normalizeStyle({
                       left: inst.left - 10 + "px",
-                      /* Center the circle */
+                      /* 居中圆圈 */
                       width: "18px",
                       height: "18px",
                       backgroundColor: inst.color || "#ffffff",
@@ -12670,8 +12670,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TimelineChart_vue_vue_type_style_index_0_scoped_c5b5f160_lang = "";
-const TimelineChart = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-c5b5f160"]]);
+const TimelineChart_vue_vue_type_style_index_0_scoped_92426524_lang = "";
+const TimelineChart = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-92426524"]]);
 const _hoisted_1 = { class: "toolbar" };
 const _hoisted_2 = { style: { "flex": "1", "display": "flex", "align-items": "center", "height": "100%" } };
 const _hoisted_3 = { class: "left-controls" };
@@ -12801,7 +12801,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 time,
                 name: "新瞬时点",
                 color: "#ffffff"
-                // Default to white
+                // 默认为白色
               });
               emit("taskUpdate", JSON.parse(JSON.stringify(t)));
               return true;
@@ -13517,8 +13517,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CesiumGantt_vue_vue_type_style_index_0_scoped_cd0cef0f_lang = "";
-const CesiumGantt = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cd0cef0f"]]);
+const CesiumGantt_vue_vue_type_style_index_0_scoped_6d73b641_lang = "";
+const CesiumGantt = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6d73b641"]]);
 CesiumGantt.install = (app) => {
   app.component("CesiumGantt", CesiumGantt);
 };