@next-bricks/visual-builder 1.39.16 → 1.39.18

package/docs/generate-snippets-context-menu.md

@@ -0,0 +1,141 @@
+---
+tagName: visual-builder.generate-snippets-context-menu
+displayName: WrappedVisualBuilderGenerateSnippetsContextMenu
+description: 用于 Visual Builder 的代码片段右键上下文菜单，支持拖拽片段到画布，菜单位置自动适配视口边界
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.generate-snippets-context-menu
+
+> 用于 Visual Builder 的代码片段右键上下文菜单，支持拖拽片段到画布，菜单位置自动适配视口边界
+
+## Props
+
+| 属性     | 类型              | 必填 | 默认值 | 说明                                                          |
+| -------- | ----------------- | ---- | ------ | ------------------------------------------------------------- |
+| options  | `SnippetOption[]` | 否   | -      | 菜单选项列表，每组包含标题和子菜单项                          |
+| active   | `boolean`         | 否   | -      | 菜单是否处于激活（显示）状态，通过 open/close 方法控制        |
+| position | `Position`        | 否   | -      | 菜单显示位置，格式为 `[clientX, clientY]`，超出视口时自动修正 |
+
+## Events
+
+| 事件            | detail                                                                                         | 说明                                       |
+| --------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------ |
+| item.drag.start | `SnippetItem` — { text: 片段文本, icon: 图标, dragConf: { format: 数据格式, data: 数据内容 } } | 用户开始拖拽菜单项时触发                   |
+| item.drag.end   | `SnippetItem` — { text: 片段文本, icon: 图标, dragConf: { format: 数据格式, data: 数据内容 } } | 用户结束拖拽菜单项时触发，同时菜单自动关闭 |
+
+## Methods
+
+| 方法  | 参数                               | 返回值 | 说明                           |
+| ----- | ---------------------------------- | ------ | ------------------------------ |
+| open  | `({ position }: OpenInfo) => void` | `void` | 打开上下文菜单并定位到指定位置 |
+| close | `() => void`                       | `void` | 关闭上下文菜单                 |
+
+## Examples
+
+### Basic
+
+展示代码片段上下文菜单的基本用法，右键点击区域后显示菜单，可拖拽菜单项。
+
+```yaml preview
+- brick: div
+  properties:
+    textContent: 右键点击此区域打开菜单
+    style:
+      padding: 40px
+      border: 1px dashed #ccc
+      textAlign: center
+      userSelect: none
+  events:
+    contextmenu:
+      target: "#snippet-menu"
+      method: open
+      args:
+        - position:
+            - "<% EVENT.clientX %>"
+            - "<% EVENT.clientY %>"
+- brick: visual-builder.generate-snippets-context-menu
+  properties:
+    id: snippet-menu
+    options:
+      - title: 基础组件
+        children:
+          - text: 按钮
+            icon:
+              lib: antd
+              icon: border
+            dragConf:
+              format: text/plain
+              data:
+                brick: eo-button
+                properties:
+                  textContent: 新按钮
+          - text: 输入框
+            icon:
+              lib: antd
+              icon: edit
+            dragConf:
+              format: text/plain
+              data:
+                brick: eo-input
+      - title: 布局组件
+        children:
+          - text: 卡片
+            icon:
+              lib: antd
+              icon: credit-card
+            tooltip: 拖拽以添加卡片
+            dragConf:
+              format: text/plain
+              data:
+                brick: eo-card
+  events:
+    item.drag.start:
+      action: console.log
+    item.drag.end:
+      action: console.log
+```
+
+### With Disabled Items
+
+展示带有禁用状态的菜单项，禁用项不可拖拽。
+
+```yaml preview
+- brick: div
+  properties:
+    textContent: 右键点击此区域打开菜单（部分选项已禁用）
+    style:
+      padding: 40px
+      border: 1px dashed #ccc
+      textAlign: center
+      userSelect: none
+  events:
+    contextmenu:
+      target: "#snippet-menu-disabled"
+      method: open
+      args:
+        - position:
+            - "<% EVENT.clientX %>"
+            - "<% EVENT.clientY %>"
+- brick: visual-builder.generate-snippets-context-menu
+  properties:
+    id: snippet-menu-disabled
+    options:
+      - title: 组件列表
+        children:
+          - text: 按钮（可用）
+            icon:
+              lib: antd
+              icon: border
+            dragConf:
+              format: text/plain
+              data:
+                brick: eo-button
+          - text: 表格（禁用）
+            icon:
+              lib: antd
+              icon: table
+            disabled: true
+            tooltip: 该组件在当前场景不可用
+```

package/docs/generate-snippets-context-menu.react.md

@@ -0,0 +1,134 @@
+---
+tagName: visual-builder.generate-snippets-context-menu
+displayName: WrappedVisualBuilderGenerateSnippetsContextMenu
+description: 用于 Visual Builder 的代码片段右键上下文菜单，支持拖拽片段到画布，菜单位置自动适配视口边界
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderGenerateSnippetsContextMenu
+
+> 用于 Visual Builder 的代码片段右键上下文菜单，支持拖拽片段到画布，菜单位置自动适配视口边界
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderGenerateSnippetsContextMenu } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性     | 类型              | 必填 | 默认值 | 说明                                                          |
+| -------- | ----------------- | ---- | ------ | ------------------------------------------------------------- |
+| options  | `SnippetOption[]` | 否   | -      | 菜单选项列表，每组包含标题和子菜单项                          |
+| active   | `boolean`         | 否   | -      | 菜单是否处于激活（显示）状态，通过 open/close 方法控制        |
+| position | `Position`        | 否   | -      | 菜单显示位置，格式为 `[clientX, clientY]`，超出视口时自动修正 |
+
+## Events
+
+| 事件            | detail                                                                                         | 说明                                       |
+| --------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------ |
+| onItemDragStart | `SnippetItem` — { text: 片段文本, icon: 图标, dragConf: { format: 数据格式, data: 数据内容 } } | 用户开始拖拽菜单项时触发                   |
+| onItemDragEnd   | `SnippetItem` — { text: 片段文本, icon: 图标, dragConf: { format: 数据格式, data: 数据内容 } } | 用户结束拖拽菜单项时触发，同时菜单自动关闭 |
+
+## Methods
+
+| 方法  | 参数                               | 返回值 | 说明                           |
+| ----- | ---------------------------------- | ------ | ------------------------------ |
+| open  | `({ position }: OpenInfo) => void` | `void` | 打开上下文菜单并定位到指定位置 |
+| close | `() => void`                       | `void` | 关闭上下文菜单                 |
+
+## Examples
+
+### Basic
+
+展示代码片段上下文菜单的基本用法，右键点击区域后显示菜单，可拖拽菜单项。
+
+```tsx
+const menuRef = useRef<any>();
+
+<div
+  style={{ padding: "40px", border: "1px dashed #ccc", textAlign: "center", userSelect: "none" }}
+  onContextMenu={(e) => {
+    e.preventDefault();
+    menuRef.current?.open({ position: [e.clientX, e.clientY] });
+  }}
+>
+  右键点击此区域打开菜单
+</div>
+<WrappedVisualBuilderGenerateSnippetsContextMenu
+  ref={menuRef}
+  options={[
+    {
+      title: "基础组件",
+      children: [
+        {
+          text: "按钮",
+          icon: { lib: "antd", icon: "border" },
+          dragConf: {
+            format: "text/plain",
+            data: { brick: "eo-button", properties: { textContent: "新按钮" } },
+          },
+        },
+        {
+          text: "输入框",
+          icon: { lib: "antd", icon: "edit" },
+          dragConf: { format: "text/plain", data: { brick: "eo-input" } },
+        },
+      ],
+    },
+    {
+      title: "布局组件",
+      children: [
+        {
+          text: "卡片",
+          icon: { lib: "antd", icon: "credit-card" },
+          tooltip: "拖拽以添加卡片",
+          dragConf: { format: "text/plain", data: { brick: "eo-card" } },
+        },
+      ],
+    },
+  ]}
+  onItemDragStart={(e) => console.log(e.detail)}
+  onItemDragEnd={(e) => console.log(e.detail)}
+/>
+```
+
+### With Disabled Items
+
+展示带有禁用状态的菜单项，禁用项不可拖拽。
+
+```tsx
+const menuRef = useRef<any>();
+
+<div
+  style={{ padding: "40px", border: "1px dashed #ccc", textAlign: "center", userSelect: "none" }}
+  onContextMenu={(e) => {
+    e.preventDefault();
+    menuRef.current?.open({ position: [e.clientX, e.clientY] });
+  }}
+>
+  右键点击此区域打开菜单（部分选项已禁用）
+</div>
+<WrappedVisualBuilderGenerateSnippetsContextMenu
+  ref={menuRef}
+  options={[
+    {
+      title: "组件列表",
+      children: [
+        {
+          text: "按钮（可用）",
+          icon: { lib: "antd", icon: "border" },
+          dragConf: { format: "text/plain", data: { brick: "eo-button" } },
+        },
+        {
+          text: "表格（禁用）",
+          icon: { lib: "antd", icon: "table" },
+          disabled: true,
+          tooltip: "该组件在当前场景不可用",
+        },
+      ],
+    },
+  ]}
+/>
+```

package/docs/page-arch-node.md

@@ -1,9 +1,48 @@
-构件 `visual-builder.page-arch-node`
+---
+tagName: visual-builder.page-arch-node
+displayName: WrappedVisualBuilderPageArchNode
+description: Visual Builder 页面架构图节点，支持页面（page）和看板（board）两种类型，可内联编辑标签、追加子节点、显示外链和子节点
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.page-arch-node
+
+> Visual Builder 页面架构图节点，支持页面（page）和看板（board）两种类型，可内联编辑标签、追加子节点、显示外链和子节点
+
+## Props
+
+| 属性               | 类型                | 必填 | 默认值 | 说明                                                                                     |
+| ------------------ | ------------------- | ---- | ------ | ---------------------------------------------------------------------------------------- |
+| label              | `string`            | 否   | -      | 节点标签文字，支持内联双击编辑                                                           |
+| type               | `"page" \| "board"` | 否   | -      | 节点类型，"page" 渲染为页面缩略图样式（高 130px），"board" 渲染为列表图标样式（高 70px） |
+| external           | `ExtraNodeData`     | 否   | -      | 外部链接节点数据，仅 type="page" 时显示，点击触发 external.click 事件                    |
+| subNodes           | `ExtraNodeData[]`   | 否   | -      | 子节点列表，仅 type="page" 时显示，每个子节点可双击和右键操作                            |
+| active             | `boolean`           | 否   | -      | 是否为当前激活节点，仅控制 CSS 样式（render: false），不触发重新渲染                     |
+| notSynced          | `boolean`           | 否   | -      | 是否标记为未同步状态，仅控制 CSS 样式（render: false），不触发重新渲染                   |
+| disableChildAppend | `boolean`           | 否   | -      | 是否禁用追加子节点按钮，仅控制 CSS 样式（render: false），不触发重新渲染                 |
+| autoFocusOnce      | `string`            | 否   | -      | 自动聚焦标识符，设置后节点首次挂载时会自动进入标签编辑模式，同一标识符只触发一次         |
+
+## Events
+
+| 事件                 | detail                                                                                                                | 说明                           |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
+| label.editing.change | `boolean` — 当前标签是否正在编辑                                                                                      | 节点标签编辑状态变化时触发     |
+| label.change         | `string` — 编辑完成后的新标签文字                                                                                     | 节点标签编辑完成（失焦）后触发 |
+| node.click           | `void`                                                                                                                | 点击节点主体区域时触发         |
+| node.dblclick        | `void`                                                                                                                | 双击节点主体区域时触发         |
+| node.contextmenu     | `ContextMenuDetail` — { clientX: 鼠标 X 坐标, clientY: 鼠标 Y 坐标 }                                                  | 在节点上触发右键菜单时触发     |
+| child.append         | `void`                                                                                                                | 点击节点的添加子节点按钮时触发 |
+| external.click       | `ExtraNodeData` — { id: 外链节点 ID, label: 外链节点标签 }                                                            | 点击节点的外链区域时触发       |
+| subNode.dblclick     | `ExtraNodeData` — { id: 子节点 ID, label: 子节点标签 }                                                                | 双击子节点时触发               |
+| subNode.contextmenu  | `SubNodeContextMenuData` — { node: { id: 子节点 ID, label: 子节点标签 }, clientX: 鼠标 X 坐标, clientY: 鼠标 Y 坐标 } | 在子节点上触发右键菜单时触发   |
 
 ## Examples
 
 ### Basic
 
+展示页面架构图节点的基本用法，包含节点标签和页面类型。
+
 ```yaml preview
 brick: visual-builder.page-arch-node
 properties:
@@ -11,8 +50,21 @@ properties:
   type: page
 ```
 
+### Board Type
+
+展示看板类型节点，渲染为带列表图标的简洁样式。
+
+```yaml preview
+brick: visual-builder.page-arch-node
+properties:
+  label: 看板视图
+  type: board
+```
+
 ### With SubNodes
 
+展示包含子节点的页面节点，子节点以骨架屏样式列于节点内部。
+
 ```yaml preview
 brick: visual-builder.page-arch-node
 properties:
@@ -22,3 +74,37 @@ properties:
     - label: 详情
       id: detail
 ```
+
+### With External Link
+
+展示带外链节点的页面节点，外链区域可点击触发跳转事件。
+
+```yaml preview
+brick: visual-builder.page-arch-node
+properties:
+  label: 主机列表
+  type: page
+  external:
+    id: host-detail
+    label: 主机详情
+  subNodes:
+    - label: IP 列
+      id: ip-col
+    - label: 主机名列
+      id: hostname-col
+events:
+  label.change:
+    action: console.log
+  node.click:
+    action: console.log
+  child.append:
+    action: console.log
+  external.click:
+    action: console.log
+  subNode.dblclick:
+    action: console.log
+  subNode.contextmenu:
+    action: console.log
+  node.contextmenu:
+    action: console.log
+```

package/docs/page-arch-node.react.md

@@ -0,0 +1,97 @@
+---
+tagName: visual-builder.page-arch-node
+displayName: WrappedVisualBuilderPageArchNode
+description: Visual Builder 页面架构图节点，支持页面（page）和看板（board）两种类型，可内联编辑标签、追加子节点、显示外链和子节点
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderPageArchNode
+
+> Visual Builder 页面架构图节点，支持页面（page）和看板（board）两种类型，可内联编辑标签、追加子节点、显示外链和子节点
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderPageArchNode } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性               | 类型                | 必填 | 默认值 | 说明                                                                                     |
+| ------------------ | ------------------- | ---- | ------ | ---------------------------------------------------------------------------------------- |
+| label              | `string`            | 否   | -      | 节点标签文字，支持内联双击编辑                                                           |
+| type               | `"page" \| "board"` | 否   | -      | 节点类型，"page" 渲染为页面缩略图样式（高 130px），"board" 渲染为列表图标样式（高 70px） |
+| external           | `ExtraNodeData`     | 否   | -      | 外部链接节点数据，仅 type="page" 时显示，点击触发 external.click 事件                    |
+| subNodes           | `ExtraNodeData[]`   | 否   | -      | 子节点列表，仅 type="page" 时显示，每个子节点可双击和右键操作                            |
+| active             | `boolean`           | 否   | -      | 是否为当前激活节点，仅控制 CSS 样式（render: false），不触发重新渲染                     |
+| notSynced          | `boolean`           | 否   | -      | 是否标记为未同步状态，仅控制 CSS 样式（render: false），不触发重新渲染                   |
+| disableChildAppend | `boolean`           | 否   | -      | 是否禁用追加子节点按钮，仅控制 CSS 样式（render: false），不触发重新渲染                 |
+| autoFocusOnce      | `string`            | 否   | -      | 自动聚焦标识符，设置后节点首次挂载时会自动进入标签编辑模式，同一标识符只触发一次         |
+
+## Events
+
+| 事件                 | detail                                                                                                                | 说明                           |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
+| onLabelEditingChange | `boolean` — 当前标签是否正在编辑                                                                                      | 节点标签编辑状态变化时触发     |
+| onLabelChange        | `string` — 编辑完成后的新标签文字                                                                                     | 节点标签编辑完成（失焦）后触发 |
+| onNodeClick          | `void`                                                                                                                | 点击节点主体区域时触发         |
+| onNodeDblclick       | `void`                                                                                                                | 双击节点主体区域时触发         |
+| onNodeContextmenu    | `ContextMenuDetail` — { clientX: 鼠标 X 坐标, clientY: 鼠标 Y 坐标 }                                                  | 在节点上触发右键菜单时触发     |
+| onChildAppend        | `void`                                                                                                                | 点击节点的添加子节点按钮时触发 |
+| onExternalClick      | `ExtraNodeData` — { id: 外链节点 ID, label: 外链节点标签 }                                                            | 点击节点的外链区域时触发       |
+| onSubNodeDblclick    | `ExtraNodeData` — { id: 子节点 ID, label: 子节点标签 }                                                                | 双击子节点时触发               |
+| onSubNodeContextmenu | `SubNodeContextMenuData` — { node: { id: 子节点 ID, label: 子节点标签 }, clientX: 鼠标 X 坐标, clientY: 鼠标 Y 坐标 } | 在子节点上触发右键菜单时触发   |
+
+## Examples
+
+### Basic
+
+展示页面架构图节点的基本用法，包含节点标签和页面类型。
+
+```tsx
+<WrappedVisualBuilderPageArchNode label="名称" type="page" />
+```
+
+### Board Type
+
+展示看板类型节点，渲染为带列表图标的简洁样式。
+
+```tsx
+<WrappedVisualBuilderPageArchNode label="看板视图" type="board" />
+```
+
+### With SubNodes
+
+展示包含子节点的页面节点，子节点以骨架屏样式列于节点内部。
+
+```tsx
+<WrappedVisualBuilderPageArchNode
+  label="列表"
+  type="page"
+  subNodes={[{ label: "详情", id: "detail" }]}
+/>
+```
+
+### With External Link
+
+展示带外链节点的页面节点，外链区域可点击触发跳转事件。
+
+```tsx
+<WrappedVisualBuilderPageArchNode
+  label="主机列表"
+  type="page"
+  external={{ id: "host-detail", label: "主机详情" }}
+  subNodes={[
+    { label: "IP 列", id: "ip-col" },
+    { label: "主机名列", id: "hostname-col" },
+  ]}
+  onLabelChange={(e) => console.log(e.detail)}
+  onNodeClick={(e) => console.log(e.detail)}
+  onChildAppend={(e) => console.log(e.detail)}
+  onExternalClick={(e) => console.log(e.detail)}
+  onSubNodeDblclick={(e) => console.log(e.detail)}
+  onSubNodeContextmenu={(e) => console.log(e.detail)}
+  onNodeContextmenu={(e) => console.log(e.detail)}
+/>
+```

package/docs/pre-generated-config-preview.md

@@ -0,0 +1,74 @@
+---
+tagName: visual-builder.pre-generated-config-preview
+displayName: WrappedVisualBuilderPreGeneratedConfigPreview
+description: AI 预生成配置预览构件，在 iframe 中将属性列表渲染为表格或描述列表，用于直观展示配置结果
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.pre-generated-config-preview
+
+> AI 预生成配置预览构件，在 iframe 中将属性列表渲染为表格或描述列表，用于直观展示配置结果
+
+## Props
+
+| 属性       | 类型                        | 必填 | 默认值 | 说明                                                                        |
+| ---------- | --------------------------- | ---- | ------ | --------------------------------------------------------------------------- |
+| previewUrl | `string`                    | 否   | -      | 预览 iframe 的地址，默认使用内置预览地址                                    |
+| container  | `"table" \| "descriptions"` | 否   | -      | 容器类型，"table" 渲染为表格，"descriptions" 渲染为描述列表，默认为 "table" |
+| attrList   | `ObjectAttr[]`              | 否   | -      | 属性列表，每项包含 id、name，以及可选的可视化配置                           |
+| mockList   | `Record<string, unknown>[]` | 否   | -      | 模拟数据列表，用于填充预览中的真实数据                                      |
+
+## Examples
+
+### Table Preview
+
+以表格形式预览属性列表配置。
+
+```yaml preview
+brick: visual-builder.pre-generated-config-preview
+properties:
+  container: table
+  attrList:
+    - id: name
+      name: 名称
+    - id: ip
+      name: IP 地址
+    - id: status
+      name: 运营状态
+    - id: createTime
+      name: 创建时间
+  mockList:
+    - name: 主机-001
+      ip: "192.168.1.1"
+      status: 运行中
+      createTime: "2024-01-01"
+    - name: 主机-002
+      ip: "192.168.1.2"
+      status: 已停止
+      createTime: "2024-01-02"
+```
+
+### Descriptions Preview
+
+以描述列表形式预览属性配置，适合展示单条记录的详细信息。
+
+```yaml preview
+brick: visual-builder.pre-generated-config-preview
+properties:
+  container: descriptions
+  attrList:
+    - id: name
+      name: 名称
+    - id: ip
+      name: IP 地址
+    - id: status
+      name: 运营状态
+    - id: createTime
+      name: 创建时间
+  mockList:
+    - name: 主机-001
+      ip: "192.168.1.1"
+      status: 运行中
+      createTime: "2024-01-01"
+```

package/docs/pre-generated-config-preview.react.md

@@ -0,0 +1,82 @@
+---
+tagName: visual-builder.pre-generated-config-preview
+displayName: WrappedVisualBuilderPreGeneratedConfigPreview
+description: AI 预生成配置预览构件，在 iframe 中将属性列表渲染为表格或描述列表，用于直观展示配置结果
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderPreGeneratedConfigPreview
+
+> AI 预生成配置预览构件，在 iframe 中将属性列表渲染为表格或描述列表，用于直观展示配置结果
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderPreGeneratedConfigPreview } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型                        | 必填 | 默认值 | 说明                                                                        |
+| ---------- | --------------------------- | ---- | ------ | --------------------------------------------------------------------------- |
+| previewUrl | `string`                    | 否   | -      | 预览 iframe 的地址，默认使用内置预览地址                                    |
+| container  | `"table" \| "descriptions"` | 否   | -      | 容器类型，"table" 渲染为表格，"descriptions" 渲染为描述列表，默认为 "table" |
+| attrList   | `ObjectAttr[]`              | 否   | -      | 属性列表，每项包含 id、name，以及可选的可视化配置                           |
+| mockList   | `Record<string, unknown>[]` | 否   | -      | 模拟数据列表，用于填充预览中的真实数据                                      |
+
+## Examples
+
+### Table Preview
+
+以表格形式预览属性列表配置。
+
+```tsx
+<WrappedVisualBuilderPreGeneratedConfigPreview
+  container="table"
+  attrList={[
+    { id: "name", name: "名称" },
+    { id: "ip", name: "IP 地址" },
+    { id: "status", name: "运营状态" },
+    { id: "createTime", name: "创建时间" },
+  ]}
+  mockList={[
+    {
+      name: "主机-001",
+      ip: "192.168.1.1",
+      status: "运行中",
+      createTime: "2024-01-01",
+    },
+    {
+      name: "主机-002",
+      ip: "192.168.1.2",
+      status: "已停止",
+      createTime: "2024-01-02",
+    },
+  ]}
+/>
+```
+
+### Descriptions Preview
+
+以描述列表形式预览属性配置，适合展示单条记录的详细信息。
+
+```tsx
+<WrappedVisualBuilderPreGeneratedConfigPreview
+  container="descriptions"
+  attrList={[
+    { id: "name", name: "名称" },
+    { id: "ip", name: "IP 地址" },
+    { id: "status", name: "运营状态" },
+    { id: "createTime", name: "创建时间" },
+  ]}
+  mockList={[
+    {
+      name: "主机-001",
+      ip: "192.168.1.1",
+      status: "运行中",
+      createTime: "2024-01-01",
+    },
+  ]}
+/>
+```