chbim-time-axis-v2 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +63 -48
  2. package/dist/chbim-time-axis-v2.es.js +6 -6
  3. package/dist/chbim-time-axis-v2.umd.js +1 -1
  4. package/dist/style.css +1 -1
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -1,48 +1,63 @@
1
1
  # chbim-time-axis-v2
2
2
 
3
- A Gantt chart component integrated with Cesium timeline for Vue 3.
3
+ [![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)
4
+ [![License](https://img.shields.io/npm/l/chbim-time-axis-v2.svg?style=flat-square)](https://www.npmjs.com/package/chbim-time-axis-v2)
5
+ [![Downloads](https://img.shields.io/npm/dt/chbim-time-axis-v2.svg?style=flat-square)](https://www.npmjs.com/package/chbim-time-axis-v2)
4
6
 
5
- ## Installation
7
+ 一个专为 Vue 3 设计的甘特图组件，完美集成 Cesium 时间轴功能。
8
+
9
+ ## ✨ 特性
10
+
11
+ - 🤝 **Cesium 集成**: 与 Cesium Viewer 和 Timeline 无缝同步，实现二三维联动。
12
+ - 📅 **多功能甘特图**: 支持任务组、普通任务、时间块（Block）和瞬时点（Instant）多种类型。
13
+ - 🎨 **高度可定制**: 提供丰富的插槽（Slots）和事件（Events）以满足不同业务需求。
14
+ - ⚡ **TypeScript 支持**: 提供完整的类型定义，开发体验更佳。
15
+
16
+ ## 📦 安装
17
+
18
+ 使用 npm 或 yarn 安装：
6
19
 
7
20
  ```bash
8
21
  npm install chbim-time-axis-v2
22
+ # 或者
23
+ yarn add chbim-time-axis-v2
9
24
  ```
10
25
 
11
- ## Usage
26
+ ## 🚀 使用指南
12
27
 
13
- ### 1. Global Registration (Optional)
28
+ ### 1. 全局注册（可选）
14
29
 
15
- You can register the component globally using `app.use()`:
30
+ 在 `main.ts` 中引入并注册：
16
31
 
17
32
  ```typescript
18
33
  // main.ts
19
34
  import { createApp } from "vue";
20
35
  import App from "./App.vue";
21
36
  import CesiumGantt from "chbim-time-axis-v2";
22
- import "chbim-time-axis-v2/dist/style.css";
37
+ import "chbim-time-axis-v2/dist/style.css"; // 引入样式文件
23
38
 
24
39
  const app = createApp(App);
25
40
  app.use(CesiumGantt);
26
41
  app.mount("#app");
27
42
  ```
28
43
 
29
- Then use it in any component without import:
44
+ 之后可以在任意组件中直接使用，无需再次导入：
30
45
 
31
46
  ```vue
32
47
  <CesiumGantt :viewer="viewer" v-model:tasks="tasks" />
33
48
  ```
34
49
 
35
- ### 2. Local Registration (Recommended)
50
+ ### 2. 局部注册（推荐）
36
51
 
37
- Import directly in your component:
52
+ 在组件中直接导入使用：
38
53
 
39
54
  ```vue
40
55
  <template>
41
56
  <div class="container">
42
- <!-- Cesium Viewer Container -->
57
+ <!-- Cesium Viewer 容器 -->
43
58
  <div ref="cesiumContainer" class="cesium-container"></div>
44
59
 
45
- <!-- Gantt Component -->
60
+ <!-- 甘特图组件容器 -->
46
61
  <div class="gantt-container">
47
62
  <CesiumGantt
48
63
  v-if="viewer"
@@ -62,24 +77,24 @@ import {
62
77
  type GanttTask,
63
78
  type GanttGroup,
64
79
  } from "chbim-time-axis-v2";
65
- import "chbim-time-axis-v2/dist/style.css"; // Import styles
80
+ import "chbim-time-axis-v2/dist/style.css"; // 务必引入样式
66
81
  import * as Cesium from "cesium";
67
82
  import dayjs from "dayjs";
68
83
 
69
- // Setup Cesium
84
+ // Cesium 相关设置
70
85
  const cesiumContainer = ref<HTMLElement | null>(null);
71
86
  const viewer = ref<Cesium.Viewer | null>(null);
72
87
 
73
- // Task Data
88
+ // 任务数据示例
74
89
  const tasks = ref<(GanttTask | GanttGroup)[]>([
75
90
  {
76
91
  id: "1",
77
- name: "Task Group 1",
92
+ name: "示例任务组 1",
78
93
  type: "group",
79
94
  children: [
80
95
  {
81
96
  id: "1-1",
82
- name: "Task 1",
97
+ name: "任务 1",
83
98
  startTime: dayjs().toISOString(),
84
99
  endTime: dayjs().add(2, "day").toISOString(),
85
100
  },
@@ -87,7 +102,7 @@ const tasks = ref<(GanttTask | GanttGroup)[]>([
87
102
  },
88
103
  ]);
89
104
 
90
- // Initialize Cesium
105
+ // 初始化 Cesium
91
106
  onMounted(() => {
92
107
  if (cesiumContainer.value) {
93
108
  viewer.value = new Cesium.Viewer(cesiumContainer.value, {
@@ -104,13 +119,13 @@ onUnmounted(() => {
104
119
  }
105
120
  });
106
121
 
107
- // Event Handlers
122
+ // 事件处理
108
123
  const handleTaskEnter = (items: any[]) => {
109
- console.log("Entered tasks:", items);
124
+ console.log("进入任务时间段:", items);
110
125
  };
111
126
 
112
127
  const handleTaskLeave = (items: any[]) => {
113
- console.log("Left tasks:", items);
128
+ console.log("离开任务时间段:", items);
114
129
  };
115
130
  </script>
116
131
 
@@ -125,44 +140,44 @@ const handleTaskLeave = (items: any[]) => {
125
140
  width: 100%;
126
141
  }
127
142
  .gantt-container {
128
- height: 300px; /* Adjust height as needed */
143
+ height: 300px; /* 根据需要调整高度 */
129
144
  background: #2b2b2b;
130
145
  }
131
146
  </style>
132
147
  ```
133
148
 
134
- ## Props
149
+ ## ⚙️ 组件属性 (Props)
135
150
 
136
- | Prop | Type | Description |
137
- | -------- | ----------------------------- | -------------------------------------------------------------------- |
138
- | `viewer` | `Cesium.Viewer` | The Cesium Viewer instance. Required for timeline synchronization. |
139
- | `clock` | `Cesium.Clock` | (Optional) Explicit Cesium Clock instance if not using viewer.clock. |
140
- | `tasks` | `(GanttTask \| GanttGroup)[]` | The list of tasks to display. Supports `v-model:tasks`. |
151
+ | 属性名 | 类型 | 描述 |
152
+ | :------- | :---------------------------- | :------------------------------------------------------------- |
153
+ | `viewer` | `Cesium.Viewer` | **必传**。Cesium Viewer 实例，用于时间轴同步。 |
154
+ | `clock` | `Cesium.Clock` | (可选) 如果不使用 viewer.clock，可显式传入 Cesium Clock 实例。 |
155
+ | `tasks` | `(GanttTask \| GanttGroup)[]` | 任务列表数据。支持 `v-model:tasks` 双向绑定。 |
141
156
 
142
- ## Events
157
+ ## 📡 事件系统 (Events)
143
158
 
144
- | Event | Payload | Description |
145
- | -------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
146
- | `update:tasks` | `tasks[]` | Emitted when tasks are updated (dragged, edited). |
147
- | `task-enter` | `items[]` | Emitted when the timeline playback enters a task's time range. Payload contains `{ task, block?, instant? }`. |
148
- | `task-leave` | `items[]` | Emitted when the timeline playback leaves a task's time range. |
149
- | `add` | `parentId` | Emitted when the add button is clicked on a group (if using default slot). |
150
- | `delete` | `taskId` | Emitted when the delete button is clicked on a task (if using default slot). |
159
+ | 事件名 | 载荷 (Payload) | 描述 |
160
+ | :------------- | :------------- | :---------------------------------------------------------------------------------------- |
161
+ | `update:tasks` | `tasks[]` | 当任务被更新（拖拽、编辑）时触发。 |
162
+ | `task-enter` | `items[]` | 当时间轴播放**进入**某个任务的时间范围时触发。Payload 包含 `{ task, block?, instant? }`。 |
163
+ | `task-leave` | `items[]` | 当时间轴播放**离开**某个任务的时间范围时触发。 |
164
+ | `add` | `parentId` | 点击组（group）上的新增按钮时触发（如果使用默认插槽）。 |
165
+ | `delete` | `taskId` | 点击任务上的删除按钮时触发（如果使用默认插槽）。 |
151
166
 
152
- ## Task Data Structure
167
+ ## 📊 数据结构
153
168
 
154
- ### GanttTask
169
+ ### GanttTask 类型定义
155
170
 
156
171
  ```typescript
157
172
  interface GanttTask {
158
173
  id: string;
159
174
  name: string;
160
- startTime: string; // ISO 8601 string
161
- endTime: string; // ISO 8601 string
175
+ startTime: string; // ISO 8601 格式字符串
176
+ endTime: string; // ISO 8601 格式字符串
162
177
  type?: "task" | "group" | "block" | "instant";
163
- children?: GanttTask[]; // For groups
178
+ children?: GanttTask[]; // 仅 "group" 类型有效
164
179
 
165
- // For 'block' type
180
+ // 当 type 为 'block' 时使用
166
181
  blocks?: {
167
182
  startTime: string;
168
183
  endTime: string;
@@ -170,7 +185,7 @@ interface GanttTask {
170
185
  color?: string;
171
186
  }[];
172
187
 
173
- // For 'instant' type
188
+ // 当 type 为 'instant' 时使用
174
189
  instants?: {
175
190
  id: string;
176
191
  time: string;
@@ -180,10 +195,10 @@ interface GanttTask {
180
195
  }
181
196
  ```
182
197
 
183
- ## Slots
198
+ ## 🧩 插槽 (Slots)
184
199
 
185
- | Slot Name | Props | Description |
186
- | ---------------- | -------------------------------------------- | -------------------------------------------------- |
187
- | `toolbar` | `{ togglePlay, isPlaying, handleResetView }` | Custom content for the toolbar area. |
188
- | `taskOp` | `{ item }` | Custom operation buttons in the task list row. |
189
- | `barContextMenu` | `{ task, block, instant, close }` | Custom context menu when right-clicking task bars. |
200
+ | 插槽名称 | Props 参数 | 描述 |
201
+ | :--------------- | :------------------------------------------- | :----------------------------------- |
202
+ | `toolbar` | `{ togglePlay, isPlaying, handleResetView }` | 自定义顶部工具栏区域的内容。 |
203
+ | `taskOp` | `{ item }` | 自定义任务列表每一行的操作按钮区域。 |
204
+ | `barContextMenu` | `{ task, block, instant, close }` | 自定义右键点击任务条时的上下文菜单。 |
package/dist/chbim-time-axis-v2.es.js CHANGED
@@ -12641,7 +12641,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
12641
12641
  class: "instantTaskPoint draggable",
12642
12642
  style: normalizeStyle({
12643
12643
  left: inst.left - 10 + "px",
12644
- /* Center the circle */
12644
+ /* 居中圆圈 */
12645
12645
  width: "18px",
12646
12646
  height: "18px",
12647
12647
  backgroundColor: inst.color || "#ffffff",
@@ -12670,8 +12670,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
12670
12670
  };
12671
12671
  }
12672
12672
  });
12673
- const TimelineChart_vue_vue_type_style_index_0_scoped_c5b5f160_lang = "";
12674
- const TimelineChart = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-c5b5f160"]]);
12673
+ const TimelineChart_vue_vue_type_style_index_0_scoped_92426524_lang = "";
12674
+ const TimelineChart = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-92426524"]]);
12675
12675
  const _hoisted_1 = { class: "toolbar" };
12676
12676
  const _hoisted_2 = { style: { "flex": "1", "display": "flex", "align-items": "center", "height": "100%" } };
12677
12677
  const _hoisted_3 = { class: "left-controls" };
@@ -12801,7 +12801,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
12801
12801
  time,
12802
12802
  name: "新瞬时点",
12803
12803
  color: "#ffffff"
12804
- // Default to white
12804
+ // 默认为白色
12805
12805
  });
12806
12806
  emit("taskUpdate", JSON.parse(JSON.stringify(t)));
12807
12807
  return true;
@@ -13517,8 +13517,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
13517
13517
  };
13518
13518
  }
13519
13519
  });
13520
- const CesiumGantt_vue_vue_type_style_index_0_scoped_cd0cef0f_lang = "";
13521
- const CesiumGantt = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cd0cef0f"]]);
13520
+ const CesiumGantt_vue_vue_type_style_index_0_scoped_6d73b641_lang = "";
13521
+ const CesiumGantt = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6d73b641"]]);
13522
13522
  CesiumGantt.install = (app) => {
13523
13523
  app.component("CesiumGantt", CesiumGantt);
13524
13524
  };