chbim-time-axis-v2 0.0.12 → 0.0.14

package/README.md

@@ -29,6 +29,10 @@
 npm install chbim-time-axis-v2
 ```
 
+## 📺 示例项目
+
+查看完整的测试项目代码：[TimelineDemoV2](https://github.com/zg95/TimelineDemoV2)
+
 ## 🚀 快速开始
 
 ### 1. 引入样式
@@ -142,10 +146,19 @@ interface GanttTask {
   parentId?: string;
   warning?: string; // 内部计算的警告信息
   allowInstant?: boolean; // 是否允许在此任务行上右键添加瞬时点
+  attr?: Record<string, any>; // 自定义属性
+  class?: string; // 自定义类名
 }
 ```
 
-### 2. 任务组 (Group)
+### 2. 普通任务 (Task)
+
+最基础的任务类型，由开始时间和结束时间定义。
+
+- **行为**: 在甘特图上显示为连续的条形，支持拖拽移动和拖拽边缘调整大小。
+- **数据**: 直接使用通用接口中的 `startTime` 和 `endTime`。
+
+### 3. 任务组 (Group)
 
 用于组织子任务。时间范围通常由子任务决定，但也可以设置限制范围。
 
@@ -161,7 +174,7 @@ interface GanttGroup extends GanttTask {
 }
 ```
 
-### 3. 块状任务 (Block)
+### 4. 块状任务 (Block)
 
 适用于同一行展示多个不连续的时间段。
 
@@ -171,6 +184,8 @@ interface TaskBlock {
   endTime: string;
   name?: string;
   color?: string; // 支持 HEX, RGB 等 CSS 颜色值
+  attr?: Record<string, any>; // 自定义属性
+  class?: string; // 自定义类名
 }
 
 // 在 GanttTask 中使用
@@ -180,7 +195,7 @@ interface BlockTask extends GanttTask {
 }
 ```
 
-### 4. 瞬时任务 (Instant)
+### 5. 瞬时任务 (Instant)
 
 适用于展示时间点事件。
 
@@ -190,6 +205,8 @@ interface TaskInstant {
   time: string;
   name?: string;
   color?: string;
+  attr?: Record<string, any>; // 自定义属性
+  class?: string; // 自定义类名
 }
 
 // 在 GanttTask 中使用
@@ -220,6 +237,15 @@ interface InstantTask extends GanttTask {
 | `add`          | `parentId: string`                    | 点击分组行的 "+" 按钮时触发。                                                  |
 | `delete`       | `taskId: string`                      | 点击删除按钮时触发。                                                           |
 
+### Methods (暴露方法)
+
+通过 `ref` 获取组件实例后可调用的方法：
+
+| 方法名           | 参数 | 描述           |
+| :--------------- | :--- | :------------- |
+| `toggleMaximize` | -    | 切换最大化模式 |
+| `toggleMinimize` | -    | 切换最小化模式 |
+
 ### Slots (插槽)
 
 组件提供了丰富的插槽用于自定义 UI。
@@ -278,6 +304,24 @@ interface InstantTask extends GanttTask {
 </template>
 ```
 
+#### 4. 内容定制插槽
+
+支持自定义任务条、时间块和瞬时点的内容渲染。
+
+- `barContent`: 自定义普通任务条的内容。参数: `{ bar: GanttTask }`
+- `blockContent`: 自定义时间块的内容。参数: `{ block: TaskBlock, task: GanttTask }`
+- `instantContent`: 自定义瞬时点的内容。参数: `{ instant: TaskInstant, task: GanttTask }`
+
+```vue
+<template #barContent="{ bar }">
+  <div class="my-bar-content">{{ bar.name }}</div>
+</template>
+
+<template #blockContent="{ block }">
+  <span>{{ block.name }}</span>
+</template>
+```
+
 ## 🧩 Cesium 联动机制
 
 组件通过 `Cesium.Clock.onTick` 事件与 Cesium 保持高频同步：
@@ -293,7 +337,12 @@ A:
 
 - 对于 `block` 类型，在 `blocks` 数组中指定 `color` 属性。
 - 对于 `instant` 类型，在 `instants` 数组中指定 `color` 属性。
-- 对于普通 `task`，目前默认使用内置颜色（分组为蓝色，普通任务为青色），可通过 CSS 覆盖 `.taskBar` 样式或等待后续版本支持 `color` 字段。
+- 对于普通 `task`，建议在任务对象中设置 `class` 属性，并通过自定义 CSS 类来控制颜色。例如：
+  ```css
+  .my-red-task {
+    background-color: red !important;
+  }
+  ```
 
 **Q: 添加瞬时点（Instant）的功能在哪里？**
 A: 在设置了 `allowInstant: true` 的任务行（非分组）对应的空白时间轴区域**右键点击**，会弹出内置菜单 "添加瞬时任务"。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chbim-time-axis-v2",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "一个专为 Vue 3 设计的甘特图组件，完美集成 Cesium 时间轴功能。",
   "main": "dist/chbim-time-axis-v2.umd.js",
   "module": "dist/chbim-time-axis-v2.es.js",