@next-bricks/visual-builder 1.39.15 → 1.39.17

package/docs/workbench-history-action.md

@@ -1,11 +1,52 @@
-项目变更历史
+---
+tagName: visual-builder.workbench-history-action
+displayName: WrappedVisualBuilderWorkbenchHistoryAction
+description: 项目变更历史
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.workbench-history-action
+
+> 项目变更历史
+
+## Props
+
+| 属性      | 类型     | 必填 | 默认值 | 说明    |
+| --------- | -------- | ---- | ------ | ------- |
+| appId     | `string` | 是   | -      | 应用 ID |
+| projectId | `string` | 是   | -      | 项目 ID |
+
+## Events
+
+| 事件               | detail                                                                                                                     | 说明               |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| history.item.click | `HistoryData & { enableRollback: boolean }` — { enableRollback: 是否可回滚, action: 操作类型, user: 操作用户, ts: 时间戳 } | 点击历史项标题触发 |
+| rollback           | `HistoryData` — { action: 操作类型, user: 操作用户, ts: 时间戳 }                                                           | 点击回滚触发       |
+| rollback.all       | `void`                                                                                                                     | 点击全部回滚触发   |
+
+## Slots
+
+| 名称      | 说明                                                                             |
+| --------- | -------------------------------------------------------------------------------- |
+| (default) | 放置 modal 等弹层构件，使其成为 popover 的子内容，防止操作弹层时意外关闭 popover |
 
 ## Examples
 
 ### Basic
 
+显示项目变更历史弹窗，支持查看历史记录和回滚操作。
+
 ```yaml preview
 brick: visual-builder.workbench-history-action
 properties:
   appId: project-a
+  projectId: proj-001
+events:
+  history.item.click:
+    - action: console.log
+  rollback:
+    - action: console.log
+  rollback.all:
+    - action: console.log
 ```

package/docs/workbench-history-action.react.md

@@ -0,0 +1,54 @@
+---
+tagName: visual-builder.workbench-history-action
+displayName: WrappedVisualBuilderWorkbenchHistoryAction
+description: 项目变更历史
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderWorkbenchHistoryAction
+
+> 项目变更历史
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderWorkbenchHistoryAction } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性      | 类型     | 必填 | 默认值 | 说明    |
+| --------- | -------- | ---- | ------ | ------- |
+| appId     | `string` | 是   | -      | 应用 ID |
+| projectId | `string` | 是   | -      | 项目 ID |
+
+## Events
+
+| 事件               | detail                                                                                                                     | 说明               |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| onHistoryItemClick | `HistoryData & { enableRollback: boolean }` — { enableRollback: 是否可回滚, action: 操作类型, user: 操作用户, ts: 时间戳 } | 点击历史项标题触发 |
+| onRollback         | `HistoryData` — { action: 操作类型, user: 操作用户, ts: 时间戳 }                                                           | 点击回滚触发       |
+| onRollbackAll      | `void`                                                                                                                     | 点击全部回滚触发   |
+
+## Slots
+
+| 名称      | 说明                                                                             |
+| --------- | -------------------------------------------------------------------------------- |
+| (default) | 放置 modal 等弹层构件，使其成为 popover 的子内容，防止操作弹层时意外关闭 popover |
+
+## Examples
+
+### Basic
+
+显示项目变更历史弹窗，支持查看历史记录和回滚操作。
+
+```tsx
+<WrappedVisualBuilderWorkbenchHistoryAction
+  appId="project-a"
+  projectId="proj-001"
+  onHistoryItemClick={(e) => console.log(e.detail)}
+  onRollback={(e) => console.log(e.detail)}
+  onRollbackAll={() => console.log("rollback all")}
+/>
+```

package/docs/workbench-pane.md

@@ -0,0 +1,105 @@
+---
+tagName: visual-builder.workbench-pane
+displayName: WrappedVisualBuilderWorkbenchPane
+description: 工作台侧边栏面板，可折叠的内容面板，包含标题栏和可滚动的内容区
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.workbench-pane
+
+> 工作台侧边栏面板，可折叠的内容面板，包含标题栏和可滚动的内容区
+
+## Props
+
+| 属性       | 类型      | 必填 | 默认值 | 说明                 |
+| ---------- | --------- | ---- | ------ | -------------------- |
+| titleLabel | `string`  | 否   | -      | 面板标题文本         |
+| active     | `boolean` | 否   | -      | 是否展开面板         |
+| badge      | `number`  | 否   | -      | 标题栏右侧的数字徽标 |
+
+## Events
+
+| 事件                  | detail                                              | 说明                               |
+| --------------------- | --------------------------------------------------- | ---------------------------------- |
+| active.change         | `boolean` — 当前展开状态，true 为展开，false 为折叠 | 面板展开/折叠状态变化时触发        |
+| active.firstActivated | `void`                                              | 面板首次被展开时触发（仅触发一次） |
+
+## Slots
+
+| 名称      | 说明                                 |
+| --------- | ------------------------------------ |
+| title     | 标题栏自定义内容，显示在标题文本右侧 |
+| actions   | 标题栏操作区，显示在 badge 左侧      |
+| (default) | 面板内容区，可滚动                   |
+
+## Examples
+
+### Basic
+
+展示一个可折叠的侧边栏面板，包含标题和内容区域。
+
+```yaml preview
+brick: visual-builder.workbench-pane
+properties:
+  titleLabel: 资源列表
+  active: true
+events:
+  active.change:
+    - action: console.log
+children:
+  - brick: div
+    properties:
+      textContent: 这是面板内容
+      style:
+        padding: 16px
+```
+
+### 带徽标和操作区
+
+在标题栏右侧显示数字徽标，并在操作区提供额外按钮。
+
+```yaml preview
+brick: visual-builder.workbench-pane
+properties:
+  titleLabel: 告警列表
+  active: true
+  badge: 5
+children:
+  - brick: eo-button
+    slot: actions
+    properties:
+      icon:
+        lib: antd
+        icon: plus
+        theme: outlined
+      type: text
+      size: small
+  - brick: div
+    properties:
+      textContent: 5 条告警信息
+      style:
+        padding: 16px
+```
+
+### 首次激活事件
+
+监听面板首次展开时触发的一次性事件，适用于懒加载场景。
+
+```yaml preview
+brick: visual-builder.workbench-pane
+properties:
+  titleLabel: 延迟加载内容
+  active: false
+events:
+  active.firstActivated:
+    - action: console.log
+      args:
+        - "面板首次展开，开始加载数据"
+children:
+  - brick: div
+    properties:
+      textContent: 内容将在首次展开后加载
+      style:
+        padding: 16px
+```

package/docs/workbench-pane.react.md

@@ -0,0 +1,90 @@
+---
+tagName: visual-builder.workbench-pane
+displayName: WrappedVisualBuilderWorkbenchPane
+description: 工作台侧边栏面板，可折叠的内容面板，包含标题栏和可滚动的内容区
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderWorkbenchPane
+
+> 工作台侧边栏面板，可折叠的内容面板，包含标题栏和可滚动的内容区
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderWorkbenchPane } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型      | 必填 | 默认值 | 说明                 |
+| ---------- | --------- | ---- | ------ | -------------------- |
+| titleLabel | `string`  | 否   | -      | 面板标题文本         |
+| active     | `boolean` | 否   | -      | 是否展开面板         |
+| badge      | `number`  | 否   | -      | 标题栏右侧的数字徽标 |
+
+## Events
+
+| 事件                   | detail                                              | 说明                               |
+| ---------------------- | --------------------------------------------------- | ---------------------------------- |
+| onActiveChange         | `boolean` — 当前展开状态，true 为展开，false 为折叠 | 面板展开/折叠状态变化时触发        |
+| onActiveFirstActivated | `void`                                              | 面板首次被展开时触发（仅触发一次） |
+
+## Slots
+
+| 名称      | 说明                                 |
+| --------- | ------------------------------------ |
+| title     | 标题栏自定义内容，显示在标题文本右侧 |
+| actions   | 标题栏操作区，显示在 badge 左侧      |
+| (default) | 面板内容区，可滚动                   |
+
+## Examples
+
+### Basic
+
+展示一个可折叠的侧边栏面板，包含标题和内容区域。
+
+```tsx
+<WrappedVisualBuilderWorkbenchPane
+  titleLabel="资源列表"
+  active={true}
+  onActiveChange={(e) => console.log(e.detail)}
+>
+  <div style={{ padding: "16px" }}>这是面板内容</div>
+</WrappedVisualBuilderWorkbenchPane>
+```
+
+### 带徽标和操作区
+
+在标题栏右侧显示数字徽标，并在操作区提供额外按钮。
+
+```tsx
+<WrappedVisualBuilderWorkbenchPane
+  titleLabel="告警列表"
+  active={true}
+  badge={5}
+>
+  <WrappedEoButton
+    slot="actions"
+    icon={{ lib: "antd", icon: "plus", theme: "outlined" }}
+    type="text"
+    size="small"
+  />
+  <div style={{ padding: "16px" }}>5 条告警信息</div>
+</WrappedVisualBuilderWorkbenchPane>
+```
+
+### 首次激活事件
+
+监听面板首次展开时触发的一次性事件，适用于懒加载场景。
+
+```tsx
+<WrappedVisualBuilderWorkbenchPane
+  titleLabel="延迟加载内容"
+  active={false}
+  onActiveFirstActivated={() => console.log("面板首次展开，开始加载数据")}
+>
+  <div style={{ padding: "16px" }}>内容将在首次展开后加载</div>
+</WrappedVisualBuilderWorkbenchPane>
+```

package/docs/workbench-sidebar.md

@@ -0,0 +1,88 @@
+---
+tagName: visual-builder.workbench-sidebar
+displayName: WrappedVisualBuilderWorkbenchSidebar
+description: 工作台侧边栏容器，包含标题栏和面板容器，自动管理子面板（workbench-pane）的展开/折叠布局
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.workbench-sidebar
+
+> 工作台侧边栏容器，包含标题栏和面板容器，自动管理子面板（workbench-pane）的展开/折叠布局
+
+## Props
+
+| 属性       | 类型     | 必填 | 默认值 | 说明           |
+| ---------- | -------- | ---- | ------ | -------------- |
+| titleLabel | `string` | 否   | -      | 侧边栏标题文本 |
+
+## Slots
+
+| 名称         | 说明                       |
+| ------------ | -------------------------- |
+| titleToolbar | 标题栏右侧工具栏区域       |
+| (default)    | 放置 workbench-pane 子面板 |
+
+## Examples
+
+### Basic
+
+展示包含多个可折叠面板的侧边栏容器，子面板会自动响应展开/折叠状态调整布局。
+
+```yaml preview
+brick: visual-builder.workbench-sidebar
+properties:
+  titleLabel: 工作区
+children:
+  - brick: visual-builder.workbench-pane
+    properties:
+      titleLabel: 资源列表
+      active: true
+    children:
+      - brick: div
+        properties:
+          textContent: 资源内容区域
+          style:
+            padding: 16px
+  - brick: visual-builder.workbench-pane
+    properties:
+      titleLabel: 属性面板
+      active: false
+    children:
+      - brick: div
+        properties:
+          textContent: 属性内容区域
+          style:
+            padding: 16px
+```
+
+### 带标题栏工具栏
+
+在侧边栏标题栏右侧添加操作按钮。
+
+```yaml preview
+brick: visual-builder.workbench-sidebar
+properties:
+  titleLabel: 组件树
+children:
+  - brick: eo-button
+    slot: titleToolbar
+    properties:
+      icon:
+        lib: antd
+        icon: plus
+        theme: outlined
+      type: text
+      size: small
+      tooltip: 新增节点
+  - brick: visual-builder.workbench-pane
+    properties:
+      titleLabel: 页面结构
+      active: true
+    children:
+      - brick: div
+        properties:
+          textContent: 页面结构树
+          style:
+            padding: 16px
+```

package/docs/workbench-sidebar.react.md

@@ -0,0 +1,66 @@
+---
+tagName: visual-builder.workbench-sidebar
+displayName: WrappedVisualBuilderWorkbenchSidebar
+description: 工作台侧边栏容器，包含标题栏和面板容器，自动管理子面板（workbench-pane）的展开/折叠布局
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderWorkbenchSidebar
+
+> 工作台侧边栏容器，包含标题栏和面板容器，自动管理子面板（workbench-pane）的展开/折叠布局
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderWorkbenchSidebar } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型     | 必填 | 默认值 | 说明           |
+| ---------- | -------- | ---- | ------ | -------------- |
+| titleLabel | `string` | 否   | -      | 侧边栏标题文本 |
+
+## Slots
+
+| 名称         | 说明                       |
+| ------------ | -------------------------- |
+| titleToolbar | 标题栏右侧工具栏区域       |
+| (default)    | 放置 workbench-pane 子面板 |
+
+## Examples
+
+### Basic
+
+展示包含多个可折叠面板的侧边栏容器，子面板会自动响应展开/折叠状态调整布局。
+
+```tsx
+<WrappedVisualBuilderWorkbenchSidebar titleLabel="工作区">
+  <WrappedVisualBuilderWorkbenchPane titleLabel="资源列表" active={true}>
+    <div style={{ padding: "16px" }}>资源内容区域</div>
+  </WrappedVisualBuilderWorkbenchPane>
+  <WrappedVisualBuilderWorkbenchPane titleLabel="属性面板" active={false}>
+    <div style={{ padding: "16px" }}>属性内容区域</div>
+  </WrappedVisualBuilderWorkbenchPane>
+</WrappedVisualBuilderWorkbenchSidebar>
+```
+
+### 带标题栏工具栏
+
+在侧边栏标题栏右侧添加操作按钮。
+
+```tsx
+<WrappedVisualBuilderWorkbenchSidebar titleLabel="组件树">
+  <WrappedEoButton
+    slot="titleToolbar"
+    icon={{ lib: "antd", icon: "plus", theme: "outlined" }}
+    type="text"
+    size="small"
+    tooltip="新增节点"
+  />
+  <WrappedVisualBuilderWorkbenchPane titleLabel="页面结构" active={true}>
+    <div style={{ padding: "16px" }}>页面结构树</div>
+  </WrappedVisualBuilderWorkbenchPane>
+</WrappedVisualBuilderWorkbenchSidebar>
+```

package/docs/workbench-tree.md

@@ -0,0 +1,217 @@
+---
+tagName: visual-builder.workbench-tree
+displayName: WrappedVisualBuilderWorkbenchTree
+description: 工作台树形组件，支持搜索、拖拽排序、折叠展开和节点操作
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.workbench-tree
+
+> 工作台树形组件，支持搜索、拖拽排序、折叠展开和节点操作
+
+## Props
+
+| 属性                | 类型                                                   | 必填 | 默认值 | 说明                                            |
+| ------------------- | ------------------------------------------------------ | ---- | ------ | ----------------------------------------------- |
+| nodes               | `WorkbenchNodeData[]`                                  | 是   | -      | 树节点数据列表                                  |
+| actions             | `WorkbenchTreeAction[]`                                | 是   | -      | 节点操作按钮配置列表                            |
+| actionsHidden       | `boolean`                                              | 是   | -      | 是否隐藏节点操作按钮                            |
+| placeholder         | `string`                                               | 是   | -      | 无数据时显示的占位文本                          |
+| isTransformName     | `boolean`                                              | 是   | -      | 是否将节点名称转换为可读格式                    |
+| searchPlaceholder   | `string`                                               | 是   | -      | 搜索框占位文本                                  |
+| noSearch            | `boolean`                                              | 是   | -      | 是否隐藏搜索框                                  |
+| activeKey           | `string \| number`                                     | 是   | -      | 当前激活节点的 key                              |
+| showMatchedNodeOnly | `boolean`                                              | 是   | -      | 搜索时是否只显示匹配的节点                      |
+| matchNodeDataFields | `string \| string[]`                                   | 是   | -      | 搜索时匹配的节点数据字段，"\*" 表示匹配所有字段 |
+| fixedActionsFor     | `Record<string, unknown> \| Record<string, unknown>[]` | 是   | -      | 始终显示操作按钮的节点数据条件                  |
+| collapsible         | `boolean`                                              | 是   | -      | 是否启用节点折叠功能                            |
+| collapsedNodes      | `string[]`                                             | 是   | -      | 当前已折叠节点的 ID 列表                        |
+| allowDrag           | `boolean`                                              | 是   | -      | 是否允许拖拽排序                                |
+| allowDragToRoot     | `boolean`                                              | 是   | -      | 是否允许拖拽到根节点位置                        |
+| allowDragToInside   | `boolean`                                              | 是   | -      | 是否允许拖拽到节点内部成为子节点                |
+| nodeKey             | `string`                                               | 是   | -      | 节点唯一标识字段名                              |
+| skipNotify          | `boolean`                                              | 是   | -      | 是否跳过节点点击时的通知                        |
+
+## Events
+
+| 事件         | detail                                                                                 | 说明                        |
+| ------------ | -------------------------------------------------------------------------------------- | --------------------------- |
+| action.click | `ActionClickDetail` — { action: 操作标识, data: 节点数据 }                             | 点击节点操作按钮时触发      |
+| node.click   | `unknown` — 节点的 data 数据                                                           | 点击节点时触发              |
+| node.drop    | `any` — 拖拽完成后的节点位置信息                                                       | 拖拽节点完成时触发          |
+| context.menu | `unknown` — { active: true, node: 节点的 data 数据, x: 鼠标 X 坐标, y: 鼠标 Y 坐标 }   | 右键点击节点时触发          |
+| node.toggle  | `{ nodeId: string; collapsed: boolean; }` — { nodeId: 节点 ID, collapsed: 是否已折叠 } | 节点折叠/展开状态变化时触发 |
+
+## Examples
+
+### Basic
+
+展示基本的树形结构，包含节点数据和操作按钮。
+
+```yaml preview
+brick: visual-builder.workbench-tree
+properties:
+  nodes:
+    - key: "1"
+      name: 页面A
+      data:
+        id: "1"
+        type: page
+      children:
+        - key: "1-1"
+          name: 子页面A1
+          data:
+            id: "1-1"
+            type: page
+        - key: "1-2"
+          name: 子页面A2
+          data:
+            id: "1-2"
+            type: page
+    - key: "2"
+      name: 页面B
+      data:
+        id: "2"
+        type: page
+  actions:
+    - action: add
+      icon:
+        lib: antd
+        icon: plus
+        theme: outlined
+      title: 新增
+    - action: delete
+      icon:
+        lib: antd
+        icon: delete
+        theme: outlined
+      title: 删除
+  actionsHidden: false
+  placeholder: 暂无页面
+  searchPlaceholder: 搜索页面
+  noSearch: false
+  activeKey: "1"
+  showMatchedNodeOnly: false
+  matchNodeDataFields: []
+  fixedActionsFor: []
+  collapsible: true
+  collapsedNodes: []
+  allowDrag: false
+  allowDragToRoot: false
+  allowDragToInside: false
+  nodeKey: ""
+  skipNotify: false
+events:
+  node.click:
+    - action: console.log
+  action.click:
+    - action: console.log
+```
+
+### 可拖拽排序
+
+启用拖拽功能，支持在节点间拖拽调整顺序和层级。
+
+```yaml preview
+brick: visual-builder.workbench-tree
+properties:
+  nodes:
+    - key: "1"
+      name: 构件A
+      data:
+        id: "1"
+      children: []
+    - key: "2"
+      name: 构件B
+      data:
+        id: "2"
+      children:
+        - key: "2-1"
+          name: 子构件B1
+          data:
+            id: "2-1"
+        - key: "2-2"
+          name: 子构件B2
+          data:
+            id: "2-2"
+    - key: "3"
+      name: 构件C
+      data:
+        id: "3"
+      children: []
+  actions: []
+  actionsHidden: true
+  placeholder: 暂无构件
+  searchPlaceholder: 搜索构件
+  noSearch: false
+  activeKey: ""
+  showMatchedNodeOnly: false
+  matchNodeDataFields: []
+  fixedActionsFor: []
+  collapsible: true
+  collapsedNodes: []
+  allowDrag: true
+  allowDragToRoot: true
+  allowDragToInside: true
+  nodeKey: ""
+  skipNotify: false
+events:
+  node.drop:
+    - action: console.log
+  node.toggle:
+    - action: console.log
+```
+
+### 搜索和右键菜单
+
+启用节点数据字段搜索，并监听右键菜单事件。
+
+```yaml preview
+brick: visual-builder.workbench-tree
+properties:
+  nodes:
+    - key: "1"
+      name: 登录页
+      data:
+        id: "1"
+        path: /login
+    - key: "2"
+      name: 首页
+      data:
+        id: "2"
+        path: /home
+    - key: "3"
+      name: 详情页
+      data:
+        id: "3"
+        path: /detail
+  actions:
+    - action: edit
+      icon:
+        lib: antd
+        icon: edit
+        theme: outlined
+      title: 编辑
+  actionsHidden: false
+  placeholder: 暂无页面
+  searchPlaceholder: 搜索路径或名称
+  noSearch: false
+  activeKey: "2"
+  showMatchedNodeOnly: true
+  matchNodeDataFields:
+    - path
+  fixedActionsFor: []
+  collapsible: false
+  collapsedNodes: []
+  allowDrag: false
+  allowDragToRoot: false
+  allowDragToInside: false
+  nodeKey: ""
+  skipNotify: false
+events:
+  context.menu:
+    - action: console.log
+  action.click:
+    - action: console.log
+```