kd-lane-container 0.1.0 → 0.1.2

package/README.md

@@ -143,12 +143,35 @@ console.log(gridSizes); // 输出泳道尺寸信息
 
 2. **监听事件动态渲染**：
    - 监听 `template-change` 事件，获取最新的泳道数据（`lanes`），动态渲染自定义抬头和泳道布局。
-   - 监听 `line-change` 事件，处理线条配置的变化。
+   - 监听 `line-change` 事件，处理线条配置的变化。从版本 0.1.1 开始，该事件会传递包含 `actionType` 属性的线条对象，可用于区分新增/更新和删除操作。
 
 3. **主题变化处理**：
    - 主题变更是由外部触发的，组件仅负责根据 `themeName` 属性正确渲染标题。
    - 模板和线条的变化需要自行处理，组件不会主动通知这些变化。
 
+#### 线条变更事件处理示例
+
+```javascript
+// 在组件方法中处理 line-change 事件
+lineChange(line) {
+  console.log('线条变更事件:', line);
+  
+  // 根据 actionType 区分操作类型
+  switch (line.actionType) {
+    case 'upsertLine':
+      console.log('新增或更新线条:', line);
+      // 处理线条新增或更新逻辑
+      break;
+    case 'delLine':
+      console.log('删除线条:', line);
+      // 处理线条删除逻辑
+      break;
+    default:
+      console.log('未知操作类型:', line.actionType);
+  }
+}
+```
+
 ### 4.2 场景与版本控制
 
 #### 4.2.1 场景唯一标识规则
@@ -369,75 +392,81 @@ handleCustomMenuClick(event) {
 }
 ```
 
-## 5. 组件 API
-
-### 5.1 Props
-
-| 属性名           | 类型   | 默认值  | 说明               |
-| ---------------- | ------ | ------- | ------------------ |
-| config           | Object | 必填    | 组件配置对象       |
-| headerPadding    | Number | 4       | 泳道头部内边距     |
-| headerItemHeight | Number | 20      | 头部线条项高度     |
-| itemGap          | Number | 2       | 线条项之间的间距   |
-| customMenuList   | Array  | []      | 自定义菜单列表     |
-| themeName        | String | "white" | 当前使用的主题名称 |
-
-### 5.2 事件
-
-| 事件名              | 参数     | 说明               |
-| ------------------- | -------- | ------------------ |
-| onCustomMenuClicked | event    | 自定义菜单点击事件 |
-| line-change         | line     | 线条变化事件       |
-| template-change     | template | 模板变化事件       |
-
-### 5.3 方法
-
-#### 5.3.1 组件实例方法
-
-| 方法名          | 作用描述                                                                 | 入参 |
-|----------------|-------------------------------------------------------------------------|------|
-| `getGridSize`  | 获取泳道的精确尺寸（包括泳道抬头部分）                                     | 无   |
-| `restoreSetting` | 恢复组件的初始设置（如重置模板、泳道和线条配置到默认状态）                  | 无   |
-
-#### 5.3.2 数据源方法（仅 custom 模式需要实现）
-
-**注：以下方法仅在使用 `custom` 模式时需要了解和实现，local 模式下不需要考虑。**
-
-组件内部提供的方法主要用于模板和线条的管理：
-
-- upsertTemplate(data) - 新增或更新模板
-
-  - 参数：`data` - 模板数据
-  - 返回值：`Promise<Object>` - 插入或更新后的**完整**模板对象
-
-- delTemplate(data) - 删除模板
-
-  - 参数：`data` - 模板数据（需包含`templateId`）
-  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
-
-- upsertLane(data) - 新增或更新泳道
-
-  - 参数：`data` - 泳道数据
-  - 返回值：`Promise<Object>` - 插入或更新后的**完整**泳道对象
-
-- delLane(lane) - 删除泳道
-
-  - 参数：`lane` - 泳道数据（需包含`laneId`和`lines`数组）
-  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
-
-- upsertLine(data) - 新增或更新线条
-
-  - 参数：`data` - 线条数据
-  - 返回值：`Promise<Object>` - 插入或更新后的**完整线**条对象
-
-- delLine(data) - 删除线条
-
-  - 参数：`data` - 线条数据（需包含`lineId`和`laneId`）
-  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
-
-- restoreSetting() - 恢复默认设置
-  - 功能：将当前场景的数据重置为初始配置状态
-  - 实现逻辑：使用构造函数传入的初始 dataSource 重新初始化数据
+## 5. 组件 API
+
+### 5.1 Props
+
+| 属性名           | 类型   | 默认值  | 说明               |
+| ---------------- | ------ | ------- | ------------------ |
+| config           | Object | 必填    | 组件配置对象       |
+| headerPadding    | Number | 4       | 泳道头部内边距     |
+| headerItemHeight | Number | 20      | 头部线条项高度     |
+| itemGap          | Number | 2       | 线条项之间的间距   |
+| customMenuList   | Array  | []      | 自定义菜单列表     |
+| themeName        | String | "white" | 当前使用的主题名称 |
+
+### 5.2 事件
+
+| 事件名              | 参数     | 说明               |
+| ------------------- | -------- | ------------------ |
+| onCustomMenuClicked | event    | 自定义菜单点击事件 |
+| line-change         | line     | 线条变化事件       |
+| template-change     | template | 模板变化事件       |
+
+**line-change 事件参数说明：**
+- 从版本 0.1.0 开始，`line-change` 事件会传递包含 `actionType` 属性的线条对象
+- `actionType` 标识操作类型，可能的值为：
+  - `"upsertLine"` - 新增或更新线条操作
+  - `"delLine"` - 删除线条操作
+
+### 5.3 方法
+
+#### 5.3.1 组件实例方法
+
+| 方法名          | 作用描述                                                                 | 入参 |
+|----------------|-------------------------------------------------------------------------|------|
+| `getGridSize`  | 获取泳道的精确尺寸（包括泳道抬头部分）                                     | 无   |
+| `restoreSetting` | 恢复组件的初始设置（如重置模板、泳道和线条配置到默认状态）                  | 无   |
+
+#### 5.3.2 数据源方法（仅 custom 模式需要实现）
+
+**注：以下方法仅在使用 `custom` 模式时需要了解和实现，local 模式下不需要考虑。**
+
+组件内部提供的方法主要用于模板和线条的管理：
+
+- upsertTemplate(data) - 新增或更新模板
+
+  - 参数：`data` - 模板数据
+  - 返回值：`Promise<Object>` - 插入或更新后的**完整**模板对象
+
+- delTemplate(data) - 删除模板
+
+  - 参数：`data` - 模板数据（需包含`templateId`）
+  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+
+- upsertLane(data) - 新增或更新泳道
+
+  - 参数：`data` - 泳道数据
+  - 返回值：`Promise<Object>` - 插入或更新后的**完整**泳道对象
+
+- delLane(lane) - 删除泳道
+
+  - 参数：`lane` - 泳道数据（需包含`laneId`和`lines`数组）
+  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+
+- upsertLine(data) - 新增或更新线条
+
+  - 参数：`data` - 线条数据
+  - 返回值：`Promise<Object>` - 插入或更新后的**完整线**条对象
+
+- delLine(data) - 删除线条
+
+  - 参数：`data` - 线条数据（需包含`lineId`和`laneId`）
+  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+
+- restoreSetting() - 恢复默认设置
+  - 功能：将当前场景的数据重置为初始配置状态
+  - 实现逻辑：使用构造函数传入的初始 dataSource 重新初始化数据
   - 返回值：`Promise<void>` - 恢复默认设置的 Promise
 
 ## 6. 自定义插槽
@@ -525,7 +554,7 @@ handleCustomMenuClick(event) {
 ### 7.2 CSS 变量使用示例
 
 ```css
-.kd-lane-chart-container {
+.kd-lane-container {
   --kd-lane-container-border-color: white;
   --kd-lane-container-context-background-color: darkgray;
   --kd-lane-container-header-item-color: white;