@next-bricks/visual-builder 1.39.16 → 1.39.17

package/docs/pre-generated-container.md

@@ -0,0 +1,56 @@
+---
+tagName: visual-builder.pre-generated-container
+displayName: WrappedVisualBuilderPreGeneratedContainer
+description: 预生成编排容器，使用 useBrick 渲染指定的构件配置，并将 dataSource 作为数据传入
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.pre-generated-container
+
+> 预生成编排容器，使用 useBrick 渲染指定的构件配置，并将 dataSource 作为数据传入
+
+## Props
+
+| 属性       | 类型           | 必填 | 默认值 | 说明             |
+| ---------- | -------------- | ---- | ------ | ---------------- |
+| useBrick   | `UseBrickConf` | 否   | -      | 要渲染的构件配置 |
+| dataSource | `unknown`      | 否   | -      | 传入构件的数据   |
+
+## Examples
+
+### Basic
+
+使用 useBrick 配置渲染一个简单的文本构件，并通过 dataSource 注入数据。
+
+```yaml preview
+brick: visual-builder.pre-generated-container
+properties:
+  useBrick:
+    brick: span
+    properties:
+      textContent: "<% DATA.label %>"
+  dataSource:
+    label: Hello World
+```
+
+### 渲染列表构件
+
+通过 useBrick 渲染列表构件，将 dataSource 传递给列表。
+
+```yaml preview
+brick: visual-builder.pre-generated-container
+properties:
+  useBrick:
+    brick: eo-descriptions
+    properties:
+      list:
+        - label: 名称
+          field: name
+        - label: 状态
+          field: status
+      dataSource: "<% DATA %>"
+  dataSource:
+    name: 示例对象
+    status: 运行中
+```

package/docs/pre-generated-container.react.md

@@ -0,0 +1,62 @@
+---
+tagName: visual-builder.pre-generated-container
+displayName: WrappedVisualBuilderPreGeneratedContainer
+description: 预生成编排容器，使用 useBrick 渲染指定的构件配置，并将 dataSource 作为数据传入
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderPreGeneratedContainer
+
+> 预生成编排容器，使用 useBrick 渲染指定的构件配置，并将 dataSource 作为数据传入
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderPreGeneratedContainer } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型           | 必填 | 默认值 | 说明             |
+| ---------- | -------------- | ---- | ------ | ---------------- |
+| useBrick   | `UseBrickConf` | 否   | -      | 要渲染的构件配置 |
+| dataSource | `unknown`      | 否   | -      | 传入构件的数据   |
+
+## Examples
+
+### Basic
+
+使用 useBrick 配置渲染一个简单的文本构件，并通过 dataSource 注入数据。
+
+```tsx
+<WrappedVisualBuilderPreGeneratedContainer
+  useBrick={{
+    brick: "span",
+    properties: {
+      textContent: "<% DATA.label %>",
+    },
+  }}
+  dataSource={{ label: "Hello World" }}
+/>
+```
+
+### 渲染列表构件
+
+通过 useBrick 渲染列表构件，将 dataSource 传递给列表。
+
+```tsx
+<WrappedVisualBuilderPreGeneratedContainer
+  useBrick={{
+    brick: "eo-descriptions",
+    properties: {
+      list: [
+        { label: "名称", field: "name" },
+        { label: "状态", field: "status" },
+      ],
+      dataSource: "<% DATA %>",
+    },
+  }}
+  dataSource={{ name: "示例对象", status: "运行中" }}
+/>
+```

package/docs/pre-generated-preview.md

@@ -0,0 +1,83 @@
+---
+tagName: visual-builder.pre-generated-preview
+displayName: WrappedVisualBuilderPreGeneratedPreview
+description: 预生成编排预览，在 iframe 中渲染属性生成结果的对比表格
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.pre-generated-preview
+
+> 预生成编排预览，在 iframe 中渲染属性生成结果的对比表格
+
+## Props
+
+| 属性        | 类型                                                                                        | 必填 | 默认值    | 说明                             |
+| ----------- | ------------------------------------------------------------------------------------------- | ---- | --------- | -------------------------------- |
+| generations | `AttributeGeneration[]`                                                                     | 否   | -         | 属性生成数据列表                 |
+| category    | `"detail-item" \| "form-item" \| "table-column" \| "card-item" \| "metric-item" \| "value"` | 否   | `"value"` | 预览分类，影响数据容器的渲染方式 |
+| theme       | `string`                                                                                    | 否   | -         | 预览主题                         |
+| uiVersion   | `string`                                                                                    | 否   | -         | UI 版本                          |
+| app         | `MicroApp`                                                                                  | 否   | -         | 微应用信息                       |
+
+## Examples
+
+### Basic
+
+展示属性生成编排的对比表格预览，按展示等级分列渲染不同视觉重量的编排。
+
+```yaml preview minHeight="400px"
+brick: visual-builder.pre-generated-preview
+properties:
+  theme: <% THEME.getTheme() %>
+  uiVersion: "8.2"
+  category: detail-item
+  generations:
+    - instanceId: abc001
+      objectId: HOST
+      propertyId: hostname
+      propertyName: 主机名
+      displayLevel: 0
+      rwType: string
+      category: detail-item
+      mockData:
+        - server-01
+        - web-server-02
+      storyboard:
+        brick: span
+        properties:
+          textContent: "<% DATA.hostname %>"
+```
+
+### Form Item 预览
+
+以表单项模式预览生成的编排，适用于表单输入场景。
+
+```yaml preview minHeight="400px"
+brick: visual-builder.pre-generated-preview
+properties:
+  theme: <% THEME.getTheme() %>
+  uiVersion: "8.2"
+  category: form-item
+  generations:
+    - instanceId: abc002
+      objectId: HOST
+      propertyId: status
+      propertyName: 状态
+      displayLevel: 1
+      rwType: enum
+      category: form-item
+      mockData:
+        - running
+        - stopped
+      storyboard:
+        brick: eo-select
+        properties:
+          name: status
+          label: 状态
+          options:
+            - label: 运行中
+              value: running
+            - label: 已停止
+              value: stopped
+```

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

@@ -0,0 +1,92 @@
+---
+tagName: visual-builder.pre-generated-preview
+displayName: WrappedVisualBuilderPreGeneratedPreview
+description: 预生成编排预览，在 iframe 中渲染属性生成结果的对比表格
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderPreGeneratedPreview
+
+> 预生成编排预览，在 iframe 中渲染属性生成结果的对比表格
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderPreGeneratedPreview } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                                                                                        | 必填 | 默认值    | 说明                             |
+| ----------- | ------------------------------------------------------------------------------------------- | ---- | --------- | -------------------------------- |
+| generations | `AttributeGeneration[]`                                                                     | 否   | -         | 属性生成数据列表                 |
+| category    | `"detail-item" \| "form-item" \| "table-column" \| "card-item" \| "metric-item" \| "value"` | 否   | `"value"` | 预览分类，影响数据容器的渲染方式 |
+| theme       | `string`                                                                                    | 否   | -         | 预览主题                         |
+| uiVersion   | `string`                                                                                    | 否   | -         | UI 版本                          |
+| app         | `MicroApp`                                                                                  | 否   | -         | 微应用信息                       |
+
+## Examples
+
+### Basic
+
+展示属性生成编排的对比表格预览，按展示等级分列渲染不同视觉重量的编排。
+
+```tsx
+<WrappedVisualBuilderPreGeneratedPreview
+  theme="light"
+  uiVersion="8.2"
+  category="detail-item"
+  generations={[
+    {
+      instanceId: "abc001",
+      objectId: "HOST",
+      propertyId: "hostname",
+      propertyName: "主机名",
+      displayLevel: 0,
+      rwType: "string",
+      category: "detail-item",
+      mockData: ["server-01", "web-server-02"],
+      storyboard: {
+        brick: "span",
+        properties: { textContent: "<% DATA.hostname %>" },
+      },
+    },
+  ]}
+/>
+```
+
+### Form Item 预览
+
+以表单项模式预览生成的编排，适用于表单输入场景。
+
+```tsx
+<WrappedVisualBuilderPreGeneratedPreview
+  theme="light"
+  uiVersion="8.2"
+  category="form-item"
+  generations={[
+    {
+      instanceId: "abc002",
+      objectId: "HOST",
+      propertyId: "status",
+      propertyName: "状态",
+      displayLevel: 1,
+      rwType: "enum",
+      category: "form-item",
+      mockData: ["running", "stopped"],
+      storyboard: {
+        brick: "eo-select",
+        properties: {
+          name: "status",
+          label: "状态",
+          options: [
+            { label: "运行中", value: "running" },
+            { label: "已停止", value: "stopped" },
+          ],
+        },
+      },
+    },
+  ]}
+/>
+```

package/docs/pre-generated-table-view.md

@@ -0,0 +1,46 @@
+---
+tagName: visual-builder.pre-generated-table-view
+displayName: WrappedVisualBuilderPreGeneratedTableView
+description: 预生成编排表格视图，使用 CSS Grid 布局渲染子构件
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.pre-generated-table-view
+
+> 预生成编排表格视图，使用 CSS Grid 布局渲染子构件
+
+## Examples
+
+### Basic
+
+使用 CSS Grid 布局将子构件排列成表格，通过 style 属性定义列宽。
+
+```yaml preview
+brick: visual-builder.pre-generated-table-view
+properties:
+  style:
+    gridTemplateColumns: "120px 1fr 1fr"
+children:
+  - brick: div
+    properties:
+      textContent: 列1标题
+      className: head-cell
+  - brick: div
+    properties:
+      textContent: 列2标题
+      className: head-cell
+  - brick: div
+    properties:
+      textContent: 列3标题
+      className: head-cell
+  - brick: div
+    properties:
+      textContent: 数据A
+  - brick: div
+    properties:
+      textContent: 数据B
+  - brick: div
+    properties:
+      textContent: 数据C
+```

package/docs/pre-generated-table-view.react.md

@@ -0,0 +1,36 @@
+---
+tagName: visual-builder.pre-generated-table-view
+displayName: WrappedVisualBuilderPreGeneratedTableView
+description: 预生成编排表格视图，使用 CSS Grid 布局渲染子构件
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderPreGeneratedTableView
+
+> 预生成编排表格视图，使用 CSS Grid 布局渲染子构件
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderPreGeneratedTableView } from "@easyops/wrapped-components";
+```
+
+## Examples
+
+### Basic
+
+使用 CSS Grid 布局将子构件排列成表格，通过 style 属性定义列宽。
+
+```tsx
+<WrappedVisualBuilderPreGeneratedTableView
+  style={{ gridTemplateColumns: "120px 1fr 1fr" }}
+>
+  <div className="head-cell">列1标题</div>
+  <div className="head-cell">列2标题</div>
+  <div className="head-cell">列3标题</div>
+  <div>数据A</div>
+  <div>数据B</div>
+  <div>数据C</div>
+</WrappedVisualBuilderPreGeneratedTableView>
+```

package/docs/property-editor.md

@@ -1,9 +1,50 @@
-构件 `visual-builder.property-editor`
+---
+tagName: visual-builder.property-editor
+displayName: WrappedVisualBuilderPropertyEditor
+description: 构件属性编辑器，基于 Formily 渲染指定构件的属性编辑表单
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# visual-builder.property-editor
+
+> 构件属性编辑器，基于 Formily 渲染指定构件的属性编辑表单
+
+## Props
+
+| 属性           | 类型             | 必填 | 默认值 | 说明                                             |
+| -------------- | ---------------- | ---- | ------ | ------------------------------------------------ |
+| editorName     | `string`         | 否   | -      | 构件名称，用于加载对应的属性编辑器               |
+| values         | `any`            | 否   | -      | 属性编辑器的当前值                               |
+| advancedMode   | `boolean`        | 否   | -      | 是否启用高级模式，高级模式下直接编辑原始属性对象 |
+| dataList       | `DataItem[]`     | 是   | -      | 数据列表，用于编辑器中的数据绑定选项             |
+| editorPackages | `BrickPackage[]` | 是   | -      | 构件包信息，用于加载自定义编辑器                 |
+| links          | `any`            | 是   | -      | 链接配置，用于编辑器中的跳转链接选项             |
+| extraLibs      | `SelectOptions`  | 是   | -      | 额外的代码补全库，用于代码编辑器的类型提示       |
+| childSlots     | `SelectOptions`  | 是   | -      | 子插槽选项，用于编辑器中选择子插槽               |
+
+## Events
+
+| 事件             | detail                                             | 说明                            |
+| ---------------- | -------------------------------------------------- | ------------------------------- |
+| validate.success | `Record<string, unknown>` — 表单验证成功后的表单值 | 表单验证成功时触发事件          |
+| validate.error   | `any[]` — 表单验证错误信息数组                     | 表单验证报错时触发事件          |
+| values.change    | `any` — 当前表单的最新值                           | 表单值发生变化时触发            |
+| token.click      | `string` — 被点击的 token 字符串                   | 点击代码编辑器中的 token 时触发 |
+| trigger.action   | `string` — 触发的动作标识                          | 编辑器内部触发自定义动作时触发  |
+
+## Methods
+
+| 方法     | 参数         | 返回值 | 说明                                                                               |
+| -------- | ------------ | ------ | ---------------------------------------------------------------------------------- |
+| validate | `() => void` | `void` | 触发表单校验，验证成功后触发 validate.success 事件，失败后触发 validate.error 事件 |
 
 ## Examples
 
 ### Basic
 
+选择构件后加载对应的属性编辑器，支持普通模式与高级模式切换，点击 Submit 触发校验。
+
 ```yaml preview
 - brick: eo-select
   properties:
@@ -28,6 +69,8 @@
       - action: console.log
     validate.error:
       - action: console.log
+    values.change:
+      - action: console.log
 - brick: eo-search-bar
   context:
     - name: isAdvanced

package/docs/property-editor.react.md

@@ -0,0 +1,97 @@
+---
+tagName: visual-builder.property-editor
+displayName: WrappedVisualBuilderPropertyEditor
+description: 构件属性编辑器，基于 Formily 渲染指定构件的属性编辑表单
+category: ""
+source: "@next-bricks/visual-builder"
+---
+
+# WrappedVisualBuilderPropertyEditor
+
+> 构件属性编辑器，基于 Formily 渲染指定构件的属性编辑表单
+
+## 导入
+
+```tsx
+import { WrappedVisualBuilderPropertyEditor } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性           | 类型             | 必填 | 默认值 | 说明                                             |
+| -------------- | ---------------- | ---- | ------ | ------------------------------------------------ |
+| editorName     | `string`         | 否   | -      | 构件名称，用于加载对应的属性编辑器               |
+| values         | `any`            | 否   | -      | 属性编辑器的当前值                               |
+| advancedMode   | `boolean`        | 否   | -      | 是否启用高级模式，高级模式下直接编辑原始属性对象 |
+| dataList       | `DataItem[]`     | 是   | -      | 数据列表，用于编辑器中的数据绑定选项             |
+| editorPackages | `BrickPackage[]` | 是   | -      | 构件包信息，用于加载自定义编辑器                 |
+| links          | `any`            | 是   | -      | 链接配置，用于编辑器中的跳转链接选项             |
+| extraLibs      | `SelectOptions`  | 是   | -      | 额外的代码补全库，用于代码编辑器的类型提示       |
+| childSlots     | `SelectOptions`  | 是   | -      | 子插槽选项，用于编辑器中选择子插槽               |
+
+## Events
+
+| 事件              | detail                                             | 说明                            |
+| ----------------- | -------------------------------------------------- | ------------------------------- |
+| onValidateSuccess | `Record<string, unknown>` — 表单验证成功后的表单值 | 表单验证成功时触发事件          |
+| onValidateError   | `any[]` — 表单验证错误信息数组                     | 表单验证报错时触发事件          |
+| onValuesChange    | `any` — 当前表单的最新值                           | 表单值发生变化时触发            |
+| onTokenClick      | `string` — 被点击的 token 字符串                   | 点击代码编辑器中的 token 时触发 |
+| onTriggerAction   | `string` — 触发的动作标识                          | 编辑器内部触发自定义动作时触发  |
+
+## Methods
+
+| 方法     | 参数         | 返回值 | 说明                                                                               |
+| -------- | ------------ | ------ | ---------------------------------------------------------------------------------- |
+| validate | `() => void` | `void` | 触发表单校验，验证成功后触发 validate.success 事件，失败后触发 validate.error 事件 |
+
+## Examples
+
+### Basic
+
+选择构件后加载对应的属性编辑器，支持普通模式与高级模式切换，点击 Submit 触发校验。
+
+```tsx
+import { useRef, useState } from "react";
+import { WrappedVisualBuilderPropertyEditor } from "@easyops/wrapped-components";
+import { WrappedEoSelect } from "@easyops/wrapped-components";
+import { WrappedEoSearchBar } from "@easyops/wrapped-components";
+import { WrappedEoButton } from "@easyops/wrapped-components";
+import { WrappedEoLink } from "@easyops/wrapped-components";
+
+function PropertyEditorExample() {
+  const editorRef = useRef<any>();
+  const [editorName, setEditorName] = useState("eo-button");
+  const [isAdvanced, setIsAdvanced] = useState(false);
+
+  return (
+    <>
+      <WrappedEoSelect
+        label="选择一个构件"
+        value={editorName}
+        style={{ display: "block", marginBottom: "2em" }}
+        onChange={(e) => setEditorName(e.detail.value)}
+      />
+      <WrappedVisualBuilderPropertyEditor
+        ref={editorRef}
+        editorName={editorName}
+        advancedMode={isAdvanced}
+        onValidateSuccess={(e) => console.log(e.detail)}
+        onValidateError={(e) => console.log(e.detail)}
+        onValuesChange={(e) => console.log(e.detail)}
+      />
+      <WrappedEoSearchBar>
+        <WrappedEoButton
+          slot="start"
+          onClick={() => editorRef.current?.validate()}
+        >
+          Submit
+        </WrappedEoButton>
+        <WrappedEoLink slot="end" onClick={() => setIsAdvanced(!isAdvanced)}>
+          {`切换到${isAdvanced ? "普通" : "高级"}模式`}
+        </WrappedEoLink>
+      </WrappedEoSearchBar>
+    </>
+  );
+}
+```