@next-bricks/visual-builder 1.39.16 → 1.39.17

package/docs/raw-data-preview.react.md

@@ -0,0 +1,154 @@
+---
+tagName: visual-builder.raw-data-preview
+displayName: WrappedVisualBuilderRawDataPreview
+description: 原始数据预览，在 iframe 中渲染属性生成候选编排的对比表格，支持批注和确认操作
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderRawDataPreview
+
+> 原始数据预览，在 iframe 中渲染属性生成候选编排的对比表格，支持批注和确认操作
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderRawDataPreview } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                                                                                        | 必填 | 默认值    | 说明                                             |
+| ----------- | ------------------------------------------------------------------------------------------- | ---- | --------- | ------------------------------------------------ |
+| previewUrl  | `string`                                                                                    | 否   | -         | 预览 iframe 地址，默认使用内置预览地址           |
+| generations | `AttributeGeneration[]`                                                                     | 否   | -         | 属性生成数据列表                                 |
+| mocks       | `Record<string, unknown>[]`                                                                 | 否   | -         | 模拟数据列表，作为各属性的候补示例数据           |
+| busy        | `boolean`                                                                                   | 否   | -         | 是否处于加载中状态，为 true 时禁用批注和确认操作 |
+| category    | `"detail-item" \| "form-item" \| "table-column" \| "card-item" \| "metric-item" \| "value"` | 否   | `"value"` | 预览分类，影响数据容器的渲染方式                 |
+| theme       | `string`                                                                                    | 否   | -         | 预览主题                                         |
+| uiVersion   | `string`                                                                                    | 否   | -         | UI 版本                                          |
+| app         | `MicroApp`                                                                                  | 否   | -         | 微应用信息                                       |
+
+## Events
+
+| 事件             | detail                                                                                                                                                                                                        | 说明                                             |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| onComment        | `CommentDetail` — { comment: 批注内容, propertyInstanceId: 属性实例 ID }                                                                                                                                      | 提交批注时触发（在批注文本框中按 ⌘/Ctrl + 回车） |
+| onApprove        | `ApproveDetail` — { approved: 是否已确认, propertyInstanceId: 属性实例 ID }                                                                                                                                   | 点击确认 checkbox 时触发                         |
+| onViewAttrPrompt | `AttributeGeneration` — { generationId: 生成 ID, objectId: 对象 ID, objectName: 对象名称, propertyId: 属性 ID, propertyName: 属性名称, propertyType: 属性类型, candidates: 候选编排列表, mockData: 模拟数据 } | 点击属性类型链接查看提示词时触发                 |
+
+## Examples
+
+### Basic
+
+展示多个对象属性的候选编排，支持批注和确认操作。
+
+```tsx
+<WrappedVisualBuilderRawDataPreview
+  previewUrl="/preview/"
+  theme="light"
+  uiVersion="8.2"
+  style={{ height: "calc(100vh - 4em)" }}
+  generations={[
+    {
+      generationId: "6202dcb92c165",
+      objectId: "IDEA",
+      objectName: "想法",
+      propertyId: "predictDeliveryTime",
+      propertyName: "预计交付时间",
+      propertyInstanceId: "61df43df88cc1",
+      candidates: [
+        {
+          display: "text",
+          formatter: { format: "relative", type: "date-time" },
+          type: "date-time",
+          visualWeight: -1,
+        },
+        {
+          display: "text",
+          formatter: { format: "accurate", type: "date-time" },
+          type: "date-time",
+          visualWeight: 0,
+        },
+        {
+          display: "text",
+          formatter: { format: "full", type: "date-time" },
+          type: "date-time",
+          visualWeight: 1,
+        },
+        {
+          display: "text",
+          formatter: { format: "full", type: "date-time" },
+          type: "date-time",
+          visualWeight: 2,
+        },
+      ],
+      mockData: [
+        { predictDeliveryTime: "2024-06-30T12:00:00Z" },
+        { predictDeliveryTime: "2024-12-31T00:00:00Z" },
+      ],
+    },
+    {
+      generationId: "6202d9c17c601",
+      objectId: "IDEA",
+      objectName: "想法",
+      propertyId: "createRole",
+      propertyName: "创建 idea 的用户角色",
+      propertyInstanceId: "61df43df88d89",
+      candidates: [
+        {
+          display: "text",
+          style: { color: "var(--text-color-secondary)", size: "medium" },
+          type: "string",
+          visualWeight: -1,
+        },
+        {
+          display: "text",
+          style: { color: "var(--text-color-default)", size: "medium" },
+          type: "string",
+          visualWeight: 0,
+        },
+        {
+          display: "text",
+          style: {
+            color: "var(--text-color-default)",
+            fontWeight: "bold",
+            size: "large",
+          },
+          type: "string",
+          visualWeight: 2,
+        },
+      ],
+      mockData: [{ createRole: "Admin" }, { createRole: "Developer" }],
+    },
+  ]}
+  onComment={(e) => console.log(e.detail)}
+  onApprove={(e) => console.log(e.detail)}
+  onViewAttrPrompt={(e) => console.log(e.detail)}
+/>
+```
+
+### 加载中状态
+
+将 busy 设置为 true 以禁用批注和确认操作，适用于后台处理过程中。
+
+```tsx
+<WrappedVisualBuilderRawDataPreview
+  busy={true}
+  theme="light"
+  uiVersion="8.2"
+  style={{ height: "300px" }}
+  generations={[
+    {
+      generationId: "abc001",
+      objectId: "HOST",
+      objectName: "主机",
+      propertyId: "hostname",
+      propertyName: "主机名",
+      propertyInstanceId: "inst001",
+      candidates: [{ display: "text", type: "string", visualWeight: 0 }],
+      mockData: [{ hostname: "server-01" }],
+    },
+  ]}
+/>
+```

package/docs/raw-metric-preview.md

@@ -0,0 +1,93 @@
+---
+tagName: visual-builder.raw-metric-preview
+displayName: WrappedVisualBuilderRawMetricPreview
+description: 原始指标预览，在 iframe 中渲染指标生成候选图表的对比表格
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.raw-metric-preview
+
+> 原始指标预览，在 iframe 中渲染指标生成候选图表的对比表格
+
+## Props
+
+| 属性        | 类型                 | 必填 | 默认值 | 说明                                     |
+| ----------- | -------------------- | ---- | ------ | ---------------------------------------- |
+| previewUrl  | `string`             | 否   | -      | 预览 iframe 地址，默认使用内置预览地址   |
+| generations | `MetricGeneration[]` | 否   | -      | 指标生成数据列表                         |
+| grouped     | `boolean`            | 否   | -      | 是否按分组显示，启用后表格额外显示分组列 |
+| busy        | `boolean`            | 否   | -      | 是否处于加载中状态                       |
+| theme       | `string`             | 否   | -      | 预览主题                                 |
+| uiVersion   | `string`             | 否   | -      | UI 版本                                  |
+| app         | `MicroApp`           | 否   | -      | 微应用信息                               |
+
+## Examples
+
+### Basic
+
+展示指标生成候选图表的对比表格，按视觉重量分列渲染不同展示形式。
+
+```yaml preview minHeight="400px"
+brick: visual-builder.raw-metric-preview
+properties:
+  theme: <% THEME.getTheme() %>
+  uiVersion: "8.2"
+  style:
+    height: 400px
+  generations:
+    - objectId: HOST
+      objectName: 主机
+      propertyId: cpu_usage
+      propertyName: CPU 使用率
+      propertyUnit: percent(100)
+      propertyDataType: double
+      candidates: []
+      mockData:
+        - 45.2
+        - 67.8
+        - 23.1
+        - 89.5
+        - 55.0
+```
+
+### 分组展示
+
+启用 grouped 属性将相关指标合并展示在同一分组下。
+
+```yaml preview minHeight="400px"
+brick: visual-builder.raw-metric-preview
+properties:
+  theme: <% THEME.getTheme() %>
+  uiVersion: "8.2"
+  grouped: true
+  style:
+    height: 400px
+  generations:
+    - objectId: HOST
+      objectName: 主机
+      propertyId: bytes_in
+      propertyName: 入流量
+      propertyUnit: bytes
+      propertyDataType: long
+      groupIndex: 0
+      group: 网络流量
+      candidates: []
+      mockData:
+        - 1024
+        - 2048
+        - 512
+    - objectId: HOST
+      objectName: 主机
+      propertyId: bytes_out
+      propertyName: 出流量
+      propertyUnit: bytes
+      propertyDataType: long
+      groupIndex: 0
+      group: 网络流量
+      candidates: []
+      mockData:
+        - 768
+        - 1536
+        - 256
+```

package/docs/raw-metric-preview.react.md

@@ -0,0 +1,94 @@
+---
+tagName: visual-builder.raw-metric-preview
+displayName: WrappedVisualBuilderRawMetricPreview
+description: 原始指标预览，在 iframe 中渲染指标生成候选图表的对比表格
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderRawMetricPreview
+
+> 原始指标预览，在 iframe 中渲染指标生成候选图表的对比表格
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderRawMetricPreview } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                 | 必填 | 默认值 | 说明                                     |
+| ----------- | -------------------- | ---- | ------ | ---------------------------------------- |
+| previewUrl  | `string`             | 否   | -      | 预览 iframe 地址，默认使用内置预览地址   |
+| generations | `MetricGeneration[]` | 否   | -      | 指标生成数据列表                         |
+| grouped     | `boolean`            | 否   | -      | 是否按分组显示，启用后表格额外显示分组列 |
+| busy        | `boolean`            | 否   | -      | 是否处于加载中状态                       |
+| theme       | `string`             | 否   | -      | 预览主题                                 |
+| uiVersion   | `string`             | 否   | -      | UI 版本                                  |
+| app         | `MicroApp`           | 否   | -      | 微应用信息                               |
+
+## Examples
+
+### Basic
+
+展示指标生成候选图表的对比表格，按视觉重量分列渲染不同展示形式。
+
+```tsx
+<WrappedVisualBuilderRawMetricPreview
+  theme="light"
+  uiVersion="8.2"
+  style={{ height: "400px" }}
+  generations={[
+    {
+      objectId: "HOST",
+      objectName: "主机",
+      propertyId: "cpu_usage",
+      propertyName: "CPU 使用率",
+      propertyUnit: "percent(100)",
+      propertyDataType: "double",
+      candidates: [],
+      mockData: [45.2, 67.8, 23.1, 89.5, 55.0],
+    },
+  ]}
+/>
+```
+
+### 分组展示
+
+启用 grouped 属性将相关指标合并展示在同一分组下。
+
+```tsx
+<WrappedVisualBuilderRawMetricPreview
+  theme="light"
+  uiVersion="8.2"
+  grouped={true}
+  style={{ height: "400px" }}
+  generations={[
+    {
+      objectId: "HOST",
+      objectName: "主机",
+      propertyId: "bytes_in",
+      propertyName: "入流量",
+      propertyUnit: "bytes",
+      propertyDataType: "long",
+      groupIndex: 0,
+      group: "网络流量",
+      candidates: [],
+      mockData: [1024, 2048, 512],
+    },
+    {
+      objectId: "HOST",
+      objectName: "主机",
+      propertyId: "bytes_out",
+      propertyName: "出流量",
+      propertyUnit: "bytes",
+      propertyDataType: "long",
+      groupIndex: 0,
+      group: "网络流量",
+      candidates: [],
+      mockData: [768, 1536, 256],
+    },
+  ]}
+/>
+```

package/docs/workbench-action-list.md

@@ -0,0 +1,80 @@
+---
+tagName: visual-builder.workbench-action-list
+displayName: WrappedVisualBuilderWorkbenchActionList
+description: 工作台侧边栏操作列表，根据菜单配置渲染一组 workbench-action 按钮，并根据当前路由高亮激活项
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.workbench-action-list
+
+> 工作台侧边栏操作列表，根据菜单配置渲染一组 workbench-action 按钮，并根据当前路由高亮激活项
+
+## Props
+
+| 属性  | 类型          | 必填 | 默认值 | 说明                                      |
+| ----- | ------------- | ---- | ------ | ----------------------------------------- |
+| appId | `string`      | 否   | -      | 当前应用 ID，用于在切换应用时重置历史记录 |
+| menu  | `SidebarMenu` | 是   | -      | 侧边栏菜单配置                            |
+
+## Examples
+
+### Basic
+
+根据菜单配置渲染侧边栏操作按钮列表，自动根据当前路由高亮对应的按钮。
+
+```yaml preview
+brick: visual-builder.workbench-action-list
+properties:
+  appId: my-app
+  menu:
+    menuItems:
+      - type: default
+        text: 首页
+        to: /home
+        icon:
+          lib: antd
+          icon: home
+          theme: outlined
+      - type: default
+        text: 设置
+        to: /settings
+        icon:
+          lib: antd
+          icon: setting
+          theme: outlined
+      - type: default
+        text: 用户
+        to: /users
+        icon:
+          lib: antd
+          icon: user
+          theme: outlined
+```
+
+### 外部链接菜单项
+
+菜单项中使用 href 配置外部链接，点击后不会记录路由历史。
+
+```yaml preview
+brick: visual-builder.workbench-action-list
+properties:
+  appId: my-app
+  menu:
+    menuItems:
+      - type: default
+        text: 内部页面
+        to: /internal
+        icon:
+          lib: antd
+          icon: appstore
+          theme: outlined
+      - type: default
+        text: 外部文档
+        href: https://example.com/docs
+        target: _blank
+        icon:
+          lib: antd
+          icon: book
+          theme: outlined
+```

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

@@ -0,0 +1,85 @@
+---
+tagName: visual-builder.workbench-action-list
+displayName: WrappedVisualBuilderWorkbenchActionList
+description: 工作台侧边栏操作列表，根据菜单配置渲染一组 workbench-action 按钮，并根据当前路由高亮激活项
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderWorkbenchActionList
+
+> 工作台侧边栏操作列表，根据菜单配置渲染一组 workbench-action 按钮，并根据当前路由高亮激活项
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderWorkbenchActionList } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性  | 类型          | 必填 | 默认值 | 说明                                      |
+| ----- | ------------- | ---- | ------ | ----------------------------------------- |
+| appId | `string`      | 否   | -      | 当前应用 ID，用于在切换应用时重置历史记录 |
+| menu  | `SidebarMenu` | 是   | -      | 侧边栏菜单配置                            |
+
+## Examples
+
+### Basic
+
+根据菜单配置渲染侧边栏操作按钮列表，自动根据当前路由高亮对应的按钮。
+
+```tsx
+<WrappedVisualBuilderWorkbenchActionList
+  appId="my-app"
+  menu={{
+    menuItems: [
+      {
+        type: "default",
+        text: "首页",
+        to: "/home",
+        icon: { lib: "antd", icon: "home", theme: "outlined" },
+      },
+      {
+        type: "default",
+        text: "设置",
+        to: "/settings",
+        icon: { lib: "antd", icon: "setting", theme: "outlined" },
+      },
+      {
+        type: "default",
+        text: "用户",
+        to: "/users",
+        icon: { lib: "antd", icon: "user", theme: "outlined" },
+      },
+    ],
+  }}
+/>
+```
+
+### 外部链接菜单项
+
+菜单项中使用 href 配置外部链接，点击后不会记录路由历史。
+
+```tsx
+<WrappedVisualBuilderWorkbenchActionList
+  appId="my-app"
+  menu={{
+    menuItems: [
+      {
+        type: "default",
+        text: "内部页面",
+        to: "/internal",
+        icon: { lib: "antd", icon: "appstore", theme: "outlined" },
+      },
+      {
+        type: "default",
+        text: "外部文档",
+        href: "https://example.com/docs",
+        target: "_blank",
+        icon: { lib: "antd", icon: "book", theme: "outlined" },
+      },
+    ],
+  }}
+/>
+```

package/docs/workbench-action.md

@@ -0,0 +1,80 @@
+---
+tagName: visual-builder.workbench-action
+displayName: WrappedVisualBuilderWorkbenchAction
+description: 工作台侧边栏操作按钮，显示图标链接并在右侧显示 tooltip
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.workbench-action
+
+> 工作台侧边栏操作按钮，显示图标链接并在右侧显示 tooltip
+
+## Props
+
+| 属性    | 类型               | 必填 | 默认值 | 说明                     |
+| ------- | ------------------ | ---- | ------ | ------------------------ |
+| icon    | `GeneralIconProps` | 否   | -      | 按钮图标配置             |
+| to      | `string`           | 否   | -      | 路由跳转地址             |
+| active  | `boolean`          | 否   | -      | 是否处于激活状态         |
+| href    | `string`           | 否   | -      | 外部链接地址             |
+| target  | `string`           | 否   | -      | 链接打开方式             |
+| tooltip | `string`           | 否   | -      | 鼠标悬停时显示的提示文字 |
+
+## Examples
+
+### Basic
+
+显示一个带有图标和 tooltip 的侧边栏操作按钮。
+
+```yaml preview
+brick: visual-builder.workbench-action
+properties:
+  icon:
+    lib: antd
+    icon: home
+    theme: outlined
+  to: /home
+  tooltip: 首页
+```
+
+### 激活状态
+
+通过 active 属性控制按钮的高亮激活状态。
+
+```yaml preview
+- brick: visual-builder.workbench-action
+  properties:
+    icon:
+      lib: antd
+      icon: setting
+      theme: outlined
+    to: /settings
+    active: true
+    tooltip: 设置
+- brick: visual-builder.workbench-action
+  properties:
+    icon:
+      lib: antd
+      icon: user
+      theme: outlined
+    to: /profile
+    active: false
+    tooltip: 个人中心
+```
+
+### 外部链接
+
+使用 href 和 target 配置跳转到外部地址。
+
+```yaml preview
+brick: visual-builder.workbench-action
+properties:
+  icon:
+    lib: antd
+    icon: link
+    theme: outlined
+  href: https://example.com
+  target: _blank
+  tooltip: 外部链接
+```

package/docs/workbench-action.react.md

@@ -0,0 +1,76 @@
+---
+tagName: visual-builder.workbench-action
+displayName: WrappedVisualBuilderWorkbenchAction
+description: 工作台侧边栏操作按钮，显示图标链接并在右侧显示 tooltip
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderWorkbenchAction
+
+> 工作台侧边栏操作按钮，显示图标链接并在右侧显示 tooltip
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderWorkbenchAction } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性    | 类型               | 必填 | 默认值 | 说明                     |
+| ------- | ------------------ | ---- | ------ | ------------------------ |
+| icon    | `GeneralIconProps` | 否   | -      | 按钮图标配置             |
+| to      | `string`           | 否   | -      | 路由跳转地址             |
+| active  | `boolean`          | 否   | -      | 是否处于激活状态         |
+| href    | `string`           | 否   | -      | 外部链接地址             |
+| target  | `string`           | 否   | -      | 链接打开方式             |
+| tooltip | `string`           | 否   | -      | 鼠标悬停时显示的提示文字 |
+
+## Examples
+
+### Basic
+
+显示一个带有图标和 tooltip 的侧边栏操作按钮。
+
+```tsx
+<WrappedVisualBuilderWorkbenchAction
+  icon={{ lib: "antd", icon: "home", theme: "outlined" }}
+  to="/home"
+  tooltip="首页"
+/>
+```
+
+### 激活状态
+
+通过 active 属性控制按钮的高亮激活状态。
+
+```tsx
+<>
+  <WrappedVisualBuilderWorkbenchAction
+    icon={{ lib: "antd", icon: "setting", theme: "outlined" }}
+    to="/settings"
+    active={true}
+    tooltip="设置"
+  />
+  <WrappedVisualBuilderWorkbenchAction
+    icon={{ lib: "antd", icon: "user", theme: "outlined" }}
+    to="/profile"
+    active={false}
+    tooltip="个人中心"
+  />
+</>
+```
+
+### 外部链接
+
+使用 href 和 target 配置跳转到外部地址。
+
+```tsx
+<WrappedVisualBuilderWorkbenchAction
+  icon={{ lib: "antd", icon: "link", theme: "outlined" }}
+  href="https://example.com"
+  target="_blank"
+  tooltip="外部链接"
+/>
+```