@next-bricks/vb-experiment 1.3.19 → 1.3.21

package/docs/app-playground.react.md

@@ -0,0 +1,105 @@
+---
+tagName: vb-experiment.app-playground
+displayName: WrappedVbExperimentAppPlayground
+description: App 编辑器与预览的集成 Playground，支持用 TSX 语法编写 App，并实时转换为 Storyboard 进行预览
+category: ""
+source: "@next-bricks/vb-experiment"
+---
+
+# WrappedVbExperimentAppPlayground
+
+> App 编辑器与预览的集成 Playground，支持用 TSX 语法编写 App，并实时转换为 Storyboard 进行预览
+
+## 导入
+
+```tsx
+import { WrappedVbExperimentAppPlayground } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性      | 类型         | 必填 | 默认值 | 说明                                                       |
+| --------- | ------------ | ---- | ------ | ---------------------------------------------------------- |
+| source    | `string`     | 否   | -      | 初始代码内容，仅在首次渲染时有效，后续更改不会同步到编辑器 |
+| extraLibs | `ExtraLib[]` | 否   | -      | 额外注入到编辑器的类型声明库，用于提供代码补全和类型检查   |
+
+## Events
+
+| 事件     | detail                              | 说明                 |
+| -------- | ----------------------------------- | -------------------- |
+| onChange | `string` — 当前编辑器中的代码字符串 | 编辑器内容变化时触发 |
+
+## Examples
+
+### Basic
+
+展示 App Playground 的基本用法，左侧代码编辑器，右侧实时预览。
+
+```tsx
+<WrappedVbExperimentAppPlayground
+  source={`
+import { useState } from "next-tsx";
+
+const RESPONSE = {
+  list: [
+    {
+      ip: "172.30.0.134",
+      disk_usage: [
+        {
+          total: "95.00GB",
+          used: "85.00GB",
+          free: "9.00GB",
+          percent: "91%",
+          rw_status: "rw",
+          device: "/dev/mapper/centos-root",
+          mount_point: "/"
+        }
+      ]
+    }
+  ]
+};
+
+export default (
+  <View title="磁盘使用情况">
+    {RESPONSE.list.map((item) => (
+      <Card title={item.ip}>
+        <Plaintext>磁盘空间使用</Plaintext>
+        <Table
+          dataSource={{ list: item.disk_usage }}
+          columns={[
+            { dataIndex: "device", key: "device", title: "设备" },
+            { dataIndex: "mount_point", key: "mount_point", title: "挂载点" },
+            { dataIndex: "total", key: "total", title: "总大小" },
+            { dataIndex: "used", key: "used", title: "已用空间" },
+            { dataIndex: "free", key: "free", title: "可用空间" },
+            { dataIndex: "percent", key: "percent", title: "使用率" }
+          ]}
+          rowKey="device"
+          pagination={false}
+        />
+      </Card>
+    ))}
+  </View>
+);
+  `}
+  style={{ display: "block", height: "600px" }}
+/>
+```
+
+### With Change Event
+
+监听代码变化事件，获取编辑器中最新的代码内容。
+
+```tsx
+<WrappedVbExperimentAppPlayground
+  source={`
+export default (
+  <View title="Hello World">
+    <Plaintext>Hello, Next TSX!</Plaintext>
+  </View>
+);
+  `}
+  style={{ display: "block", height: "300px" }}
+  onChange={(e) => console.log(e.detail)}
+/>
+```

package/docs/app-preview.md

@@ -0,0 +1,37 @@
+---
+tagName: vb-experiment.app-preview
+displayName: WrappedVbExperimentAppPreview
+description: 在 iframe 中实时预览 Storyboard 的 App 预览构件，通过内置的 AppPreviewer 接口渲染页面
+category: ""
+source: "@next-bricks/vb-experiment"
+---
+
+# vb-experiment.app-preview
+
+> 在 iframe 中实时预览 Storyboard 的 App 预览构件，通过内置的 AppPreviewer 接口渲染页面
+
+## Props
+
+| 属性       | 类型         | 必填 | 默认值 | 说明                                                       |
+| ---------- | ------------ | ---- | ------ | ---------------------------------------------------------- |
+| storyboard | `Storyboard` | 否   | -      | 要预览的 Storyboard 配置，更新后会自动触发 iframe 内容刷新 |
+
+## Examples
+
+### Basic
+
+展示 App Preview 基本用法，传入 Storyboard 配置后在 iframe 中渲染预览页面。
+
+```yaml preview
+brick: vb-experiment.app-preview
+properties:
+  storyboard:
+    routes:
+      - path: /preview
+        exact: true
+        bricks:
+          - brick: eo-button
+            properties:
+              textContent: Hello from App Preview
+              type: primary
+```

package/docs/app-preview.react.md

@@ -0,0 +1,51 @@
+---
+tagName: vb-experiment.app-preview
+displayName: WrappedVbExperimentAppPreview
+description: 在 iframe 中实时预览 Storyboard 的 App 预览构件，通过内置的 AppPreviewer 接口渲染页面
+category: ""
+source: "@next-bricks/vb-experiment"
+---
+
+# WrappedVbExperimentAppPreview
+
+> 在 iframe 中实时预览 Storyboard 的 App 预览构件，通过内置的 AppPreviewer 接口渲染页面
+
+## 导入
+
+```tsx
+import { WrappedVbExperimentAppPreview } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型         | 必填 | 默认值 | 说明                                                       |
+| ---------- | ------------ | ---- | ------ | ---------------------------------------------------------- |
+| storyboard | `Storyboard` | 否   | -      | 要预览的 Storyboard 配置，更新后会自动触发 iframe 内容刷新 |
+
+## Examples
+
+### Basic
+
+展示 App Preview 基本用法，传入 Storyboard 配置后在 iframe 中渲染预览页面。
+
+```tsx
+<WrappedVbExperimentAppPreview
+  storyboard={{
+    routes: [
+      {
+        path: "/preview",
+        exact: true,
+        bricks: [
+          {
+            brick: "eo-button",
+            properties: {
+              textContent: "Hello from App Preview",
+              type: "primary",
+            },
+          },
+        ],
+      },
+    ],
+  }}
+/>
+```

package/docs/tsx-playground.md

@@ -1,9 +1,37 @@
-构件 `vb-experiment.tsx-playground`
+---
+tagName: vb-experiment.tsx-playground
+displayName: WrappedVbExperimentTsxPlayground
+description: TSX 视图编辑器与实时预览的集成 Playground，支持用 TSX 语法编写视图，并即时渲染到右侧预览区
+category: ""
+source: "@next-bricks/vb-experiment"
+---
+
+# vb-experiment.tsx-playground
+
+> TSX 视图编辑器与实时预览的集成 Playground，支持用 TSX 语法编写视图，并即时渲染到右侧预览区
+
+## Props
+
+| 属性           | 类型           | 必填 | 默认值 | 说明                                                               |
+| -------------- | -------------- | ---- | ------ | ------------------------------------------------------------------ |
+| source         | `string`       | 否   | -      | 初始代码内容，仅在首次渲染时有效，后续更改不会同步到编辑器         |
+| extraLibs      | `ExtraLib[]`   | 否   | -      | 额外注入到编辑器的类型声明库，用于提供代码补全和类型检查           |
+| viewLibs       | `SourceFile[]` | 否   | -      | 额外的视图库源文件，会合并到类型声明中，并在解析视图时作为依赖提供 |
+| withoutWrapper | `boolean`      | 否   | -      | 是否跳过顶层 wrapper 包裹，启用后视图直接渲染为裸砖块列表          |
+| allowAnyBricks | `boolean`      | 否   | -      | 是否允许使用任意砖块，默认仅允许 next-tsx 白名单砖块               |
+
+## Events
+
+| 事件   | detail                              | 说明                 |
+| ------ | ----------------------------------- | -------------------- |
+| change | `string` — 当前编辑器中的代码字符串 | 编辑器内容变化时触发 |
 
 ## Examples
 
 ### Basic
 
+展示 TSX Playground 的基本用法，左侧代码编辑器，右侧实时预览视图。
+
 ```yaml preview minHeight="600px"
 - brick: vb-experiment.tsx-playground
   properties:
@@ -51,38 +79,6 @@
                   {
                     "path": "/opt/maxkb/maxkb-pro-v2.0.1-x86_64-offline-installer/images/maxkb-pro.tar.gz",
                     "size": "1.00GB"
-                  },
-                  {
-                    "path": "/data/easyops/kafka/data/aggregate.metric.message.json-0/00000000000044787540.log",
-                    "size": "759.00MB"
-                  },
-                  {
-                    "size": "739.00MB",
-                    "path": "/data/easyops/kafka/data/monitor.metric.message.json-0/00000000000741056461.log"
-                  },
-                  {
-                    "path": "/data/easyops/mysql/data/ib_logfile1",
-                    "size": "512.00MB"
-                  },
-                  {
-                    "size": "512.00MB",
-                    "path": "/data/easyops/mysql/data/ib_logfile0"
-                  },
-                  {
-                    "size": "452.00MB",
-                    "path": "/usr/local/easyops/clickhouse/bin/clickhouse"
-                  },
-                  {
-                    "path": "/data/easyops/seaweedfs/data/data/easyops_5.dat",
-                    "size": "371.00MB"
-                  },
-                  {
-                    "size": "369.00MB",
-                    "path": "/data/easyops/seaweedfs/data/data/easyops_6.dat"
-                  },
-                  {
-                    "size": "360.00MB",
-                    "path": "/data/easyops/seaweedfs/data/data/easyops_1.dat"
                   }
                 ],
                 "device": "/dev/mapper/centos-root",
@@ -176,3 +172,42 @@
         border: none!important;
       }
 ```
+
+### Without Wrapper
+
+跳过顶层包裹，直接渲染裸砖块列表，适合嵌入到其他布局中使用。
+
+```yaml preview minHeight="300px"
+brick: vb-experiment.tsx-playground
+properties:
+  style:
+    display: block
+    height: 300px
+  withoutWrapper: true
+  source: |
+    export default (
+      <Button type="primary">Hello World</Button>
+    );
+```
+
+### Allow Any Bricks
+
+允许使用任意砖块（不限于 next-tsx 白名单），适合高级使用场景。
+
+```yaml preview minHeight="300px"
+brick: vb-experiment.tsx-playground
+properties:
+  style:
+    display: block
+    height: 300px
+  allowAnyBricks: true
+  source: |
+    export default (
+      <View title="自定义砖块示例">
+        <Plaintext>支持使用任意砖块</Plaintext>
+      </View>
+    );
+events:
+  change:
+    action: console.log
+```

package/docs/tsx-playground.react.md

@@ -0,0 +1,139 @@
+---
+tagName: vb-experiment.tsx-playground
+displayName: WrappedVbExperimentTsxPlayground
+description: TSX 视图编辑器与实时预览的集成 Playground，支持用 TSX 语法编写视图，并即时渲染到右侧预览区
+category: ""
+source: "@next-bricks/vb-experiment"
+---
+
+# WrappedVbExperimentTsxPlayground
+
+> TSX 视图编辑器与实时预览的集成 Playground，支持用 TSX 语法编写视图，并即时渲染到右侧预览区
+
+## 导入
+
+```tsx
+import { WrappedVbExperimentTsxPlayground } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性           | 类型           | 必填 | 默认值 | 说明                                                               |
+| -------------- | -------------- | ---- | ------ | ------------------------------------------------------------------ |
+| source         | `string`       | 否   | -      | 初始代码内容，仅在首次渲染时有效，后续更改不会同步到编辑器         |
+| extraLibs      | `ExtraLib[]`   | 否   | -      | 额外注入到编辑器的类型声明库，用于提供代码补全和类型检查           |
+| viewLibs       | `SourceFile[]` | 否   | -      | 额外的视图库源文件，会合并到类型声明中，并在解析视图时作为依赖提供 |
+| withoutWrapper | `boolean`      | 否   | -      | 是否跳过顶层 wrapper 包裹，启用后视图直接渲染为裸砖块列表          |
+| allowAnyBricks | `boolean`      | 否   | -      | 是否允许使用任意砖块，默认仅允许 next-tsx 白名单砖块               |
+
+## Events
+
+| 事件     | detail                              | 说明                 |
+| -------- | ----------------------------------- | -------------------- |
+| onChange | `string` — 当前编辑器中的代码字符串 | 编辑器内容变化时触发 |
+
+## Examples
+
+### Basic
+
+展示 TSX Playground 的基本用法，左侧代码编辑器，右侧实时预览视图。
+
+```tsx
+<WrappedVbExperimentTsxPlayground
+  source={`
+import { useState } from "next-tsx";
+
+const RESPONSE = {
+  list: [
+    {
+      ip: "172.30.0.134",
+      disk_usage: [
+        {
+          total: "95.00GB",
+          used: "85.00GB",
+          free: "9.00GB",
+          percent: "91%",
+          rw_status: "rw",
+          large_files: [
+            { size: "1.00GB", path: "/opt/maxkb/maxkb-pro-2.0.1.tgz" }
+          ],
+          device: "/dev/mapper/centos-root",
+          mount_point: "/"
+        }
+      ],
+      inode_usage: [
+        {
+          total_inodes: 21162000,
+          used_inodes: 1385716,
+          free_inodes: 19776284,
+          percent: "7%",
+          device: "/dev/mapper/centos-root",
+          mount_point: "/"
+        }
+      ]
+    }
+  ]
+};
+
+export default (
+  <View title="磁盘使用情况">
+    {RESPONSE.list.map((item) => (
+      <Card title={item.ip}>
+        <Plaintext>磁盘空间使用</Plaintext>
+        <Table
+          dataSource={{ list: item.disk_usage }}
+          columns={[
+            { dataIndex: "device", key: "device", title: "设备" },
+            { dataIndex: "mount_point", key: "mount_point", title: "挂载点" },
+            { dataIndex: "total", key: "total", title: "总大小" },
+            { dataIndex: "used", key: "used", title: "已用空间" },
+            { dataIndex: "free", key: "free", title: "可用空间" },
+            { dataIndex: "percent", key: "percent", title: "使用率" },
+            { dataIndex: "rw_status", key: "rw_status", title: "读写状态" }
+          ]}
+          rowKey="device"
+          pagination={false}
+        />
+      </Card>
+    ))}
+  </View>
+);
+  `}
+  style={{ display: "block", position: "fixed", inset: 0 }}
+/>
+```
+
+### Without Wrapper
+
+跳过顶层包裹，直接渲染裸砖块列表，适合嵌入到其他布局中使用。
+
+```tsx
+<WrappedVbExperimentTsxPlayground
+  withoutWrapper={true}
+  source={`
+export default (
+  <Button type="primary">Hello World</Button>
+);
+  `}
+  style={{ display: "block", height: "300px" }}
+/>
+```
+
+### Allow Any Bricks
+
+允许使用任意砖块（不限于 next-tsx 白名单），适合高级使用场景。
+
+```tsx
+<WrappedVbExperimentTsxPlayground
+  allowAnyBricks={true}
+  source={`
+export default (
+  <View title="自定义砖块示例">
+    <Plaintext>支持使用任意砖块</Plaintext>
+  </View>
+);
+  `}
+  style={{ display: "block", height: "300px" }}
+  onChange={(e) => console.log(e.detail)}
+/>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/vb-experiment",
-  "version": "1.3.19",
+  "version": "1.3.21",
   "homepage": "https://github.com/easyops-cn/next-advanced-bricks/tree/master/bricks/vb-experiment",
   "repository": {
     "type": "git",
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "@next-bricks/vs": "*"
   },
-  "gitHead": "53186cc54c9c1599b8677eedd6ea0825310bbe37"
+  "gitHead": "bfc02e6cd7028ac3f92808235d9f3fcc0dfde393"
 }