@next-bricks/advanced 0.51.2 → 0.51.4

package/docs/eo-tree.react.md

@@ -0,0 +1,220 @@
+---
+tagName: eo-tree
+displayName: WrappedEoTree
+description: 树形构件
+category: display
+source: "@next-bricks/advanced"
+---
+
+# WrappedEoTree
+
+> 树形构件
+
+## 导入
+
+```tsx
+import { WrappedEoTree } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性             | 类型                               | 必填 | 默认值 | 说明                                                                            |
+| ---------------- | ---------------------------------- | ---- | ------ | ------------------------------------------------------------------------------- |
+| dataSource       | `TreeNode[]`                       | 否   | -      | 树形数据源                                                                      |
+| checkable        | `boolean`                          | 否   | -      | 是否显示 Checkbox，开启后可勾选节点                                             |
+| selectable       | `boolean`                          | 否   | -      | 是否可选中节点                                                                  |
+| defaultExpandAll | `boolean`                          | 否   | -      | 是否默认展开所有树节点                                                          |
+| showLine         | `boolean`                          | 否   | -      | 是否显示连接线                                                                  |
+| expandedKeys     | `TreeNodeKey[]`                    | 否   | -      | 受控展开的节点 key 集合                                                         |
+| checkedKeys      | `TreeNodeKey[]`                    | 否   | -      | 受控勾选的节点 key 集合（仅在 checkable 为 true 时有效）                        |
+| nodeDraggable    | `boolean \| { icon?: false }`      | 否   | -      | 是否允许拖拽节点，也可传入对象配置是否显示拖拽图标                              |
+| switcherIcon     | `"auto" \| "chevron" \| false`     | 否   | -      | 自定义展开/折叠图标，可选 auto（默认箭头）、chevron（下箭头）或 false（不显示） |
+| allowDrop        | `(info: AllowDropInfo) => boolean` | 否   | -      | 是否允许拖放到指定位置的判断函数                                                |
+| titleSuffixBrick | `{ useBrick: UseBrickConf }`       | 否   | -      | 节点标题后缀插槽，通过 useBrick 在每个节点标题后渲染自定义构件                  |
+
+## Events
+
+| 事件          | detail                                                                                                                           | 说明                               |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| onCheck       | `TreeNodeKey[]` — 所有勾选节点的 key 数组                                                                                        | 勾选状态变化时触发                 |
+| onCheckDetail | `CheckDetail` — { checkedKeys: 已勾选的节点 key 数组, halfCheckedKeys: 半选中的节点 key 数组 }                                   | 勾选状态变化时触发，包含半选中状态 |
+| onExpand      | `TreeNodeKey[]` — 当前展开的节点 key 数组                                                                                        | 展开/折叠节点时触发                |
+| onNodeDrop    | `DropDetail` — { dragNode: 被拖拽的节点, dropNode: 放置目标节点, dropPosition: 放置位置（0 表示内部，-1 表示上方，1 表示下方） } | 节点拖拽放置时触发                 |
+
+## Examples
+
+### Basic
+
+展示树形构件的基本用法，默认展开所有节点。
+
+```tsx
+<WrappedEoTree
+  defaultExpandAll={true}
+  dataSource={[
+    {
+      title: "parent 1",
+      key: "0-0",
+      children: [
+        {
+          title: "parent 1-0",
+          key: "0-0-0",
+          children: [
+            { title: "leaf", key: "0-0-0-0" },
+            { title: "leaf", key: "0-0-0-1" },
+          ],
+        },
+        {
+          title: "parent 1-1",
+          key: "0-0-1",
+          children: [{ title: "sss", key: "0-0-1-0" }],
+        },
+      ],
+    },
+  ]}
+/>
+```
+
+### Checkable
+
+开启 checkable 显示勾选框，并配置 showLine 显示连接线，勾选变化时触发 onCheck 事件。
+
+```tsx
+<WrappedEoTree
+  defaultExpandAll={true}
+  checkable={true}
+  selectable={false}
+  showLine={true}
+  switcherIcon="chevron"
+  dataSource={[
+    {
+      title: "parent 1",
+      key: "0-0",
+      children: [
+        {
+          title: "parent 1-0",
+          key: "0-0-0",
+          children: [
+            { title: "leaf", key: "0-0-0-0" },
+            { title: "leaf", key: "0-0-0-1" },
+          ],
+        },
+        {
+          title: "parent 1-1",
+          key: "0-0-1",
+          children: [{ title: "sss", key: "0-0-1-0" }],
+        },
+      ],
+    },
+  ]}
+  onCheck={(e) => console.log(e.detail)}
+  onCheckDetail={(e) => console.log(e.detail)}
+/>
+```
+
+### Title Suffix Brick
+
+通过 titleSuffixBrick 在每个节点标题后渲染自定义构件。
+
+```tsx
+<WrappedEoTree
+  defaultExpandAll={true}
+  titleSuffixBrick={{
+    useBrick: {
+      brick: "eo-link",
+      properties: {
+        icon: { lib: "antd", icon: "edit", theme: "outlined" },
+        style: { marginLeft: "5px", fontSize: "12px" },
+      },
+    },
+  }}
+  dataSource={[
+    {
+      title: "parent 1",
+      key: "0-0",
+      children: [
+        {
+          title: "parent 1-0",
+          key: "0-0-0",
+          children: [
+            { title: "leaf", key: "0-0-0-0" },
+            { title: "leaf", key: "0-0-0-1" },
+          ],
+        },
+        {
+          title: "parent 1-1",
+          key: "0-0-1",
+          children: [{ title: "sss", key: "0-0-1-0" }],
+        },
+      ],
+    },
+  ]}
+/>
+```
+
+### Draggable
+
+开启 nodeDraggable 允许拖拽节点，拖拽放置后触发 onNodeDrop 事件。
+
+```tsx
+<WrappedEoTree
+  defaultExpandAll={true}
+  nodeDraggable={true}
+  dataSource={[
+    {
+      title: "parent 1",
+      key: "0-0",
+      children: [
+        {
+          title: "parent 1-0",
+          key: "0-0-0",
+          children: [
+            { title: "leaf", key: "0-0-0-0" },
+            { title: "leaf", key: "0-0-0-1" },
+          ],
+        },
+        {
+          title: "parent 1-1",
+          key: "0-0-1",
+          children: [{ title: "sss", key: "0-0-1-0" }],
+        },
+      ],
+    },
+  ]}
+  onNodeDrop={(e) => console.log(e.detail)}
+/>
+```
+
+### Controlled Expand and Check
+
+通过 expandedKeys 和 checkedKeys 受控管理展开与勾选状态，并监听 onExpand 事件。
+
+```tsx
+<WrappedEoTree
+  checkable={true}
+  expandedKeys={["0-0"]}
+  checkedKeys={["0-0-0-0"]}
+  dataSource={[
+    {
+      title: "parent 1",
+      key: "0-0",
+      children: [
+        {
+          title: "parent 1-0",
+          key: "0-0-0",
+          children: [
+            { title: "leaf", key: "0-0-0-0" },
+            { title: "leaf", key: "0-0-0-1" },
+          ],
+        },
+        {
+          title: "parent 1-1",
+          key: "0-0-1",
+          children: [{ title: "sss", key: "0-0-1-0" }],
+        },
+      ],
+    },
+  ]}
+  onExpand={(e) => console.log(e.detail)}
+  onCheck={(e) => console.log(e.detail)}
+/>
+```

package/docs/eo-workbench-layout-v2.md

@@ -0,0 +1,204 @@
+---
+tagName: eo-workbench-layout-v2
+displayName: WrappedEoWorkbenchLayoutV2
+description: 工作台布局 V2，支持拖拽式卡片布局与全局样式（不使用 shadow DOM）
+category: layout
+source: "@next-bricks/advanced"
+---
+
+# eo-workbench-layout-v2
+
+> 工作台布局 V2，支持拖拽式卡片布局与全局样式（不使用 shadow DOM）
+
+## Props
+
+| 属性                       | 类型                                 | 必填 | 默认值 | 说明                                                         |
+| -------------------------- | ------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
+| cardTitle                  | `string`                             | 否   | -      | 编辑模式下左侧卡片列表面板的标题                             |
+| isEdit                     | `boolean`                            | 否   | -      | 是否进入编辑模式，编辑模式下可拖拽调整布局并显示卡片选择面板 |
+| layouts                    | `ExtraLayout[]`                      | 否   | -      | 当前布局配置，每项对应一个卡片的位置与大小及样式信息         |
+| toolbarBricks              | `{ useBrick: UseSingleBrickConf[] }` | 否   | -      | 编辑模式下工具栏区域的自定义构件                             |
+| componentList              | `WorkbenchComponent[]`               | 否   | -      | 组件列表，每项包含 key、title、useBrick 和 position 信息     |
+| customDefaultCardConfigMap | `Record<string, CardStyleConfig>`    | 否   | -      | 自定义卡片默认配置，用于覆盖默认卡片样式配置                 |
+| showSettingButton          | `boolean`                            | 否   | -      | 是否显示设置按钮，用于触发页面样式和布局设置                 |
+| gap                        | `number`                             | 否   | -      | 卡片之间的间距（px）                                         |
+
+## Events
+
+| 事件         | detail                                                                                              | 说明                           |
+| ------------ | --------------------------------------------------------------------------------------------------- | ------------------------------ |
+| change       | `ExtraLayout[]` — 当前布局配置数组                                                                  | 布局发生变化时触发             |
+| save         | `ExtraLayout[]` — 保存时的布局配置数组                                                              | 点击保存按钮时触发             |
+| cancel       | `void`                                                                                              | 点击取消按钮时触发             |
+| setting      | `void`                                                                                              | 点击设置按钮时触发             |
+| action.click | `{ action: SimpleAction; layouts: Layout[] }` — { action: 点击的操作项, layouts: 当前布局配置数组 } | 更多操作菜单中的操作点击时触发 |
+
+## Methods
+
+| 方法       | 参数                          | 返回值 | 说明         |
+| ---------- | ----------------------------- | ------ | ------------ |
+| setLayouts | `(layouts: Layout[]) => void` | `void` | 设置布局配置 |
+
+## Examples
+
+### Basic
+
+展示工作台布局 V2 的基本用法，通过 layouts 和 componentList 配置卡片布局。
+
+```yaml preview
+- brick: eo-workbench-layout-v2
+  properties:
+    layouts:
+      - i: hello
+        x: 0
+        y: 0
+        w: 2
+        h: 1
+        type: hello
+        cardWidth: 2
+      - i: world
+        x: 0
+        y: 1
+        w: 2
+        h: 1
+        type: world
+        cardWidth: 2
+      - i: small
+        x: 2
+        y: 0
+        w: 1
+        h: 1
+        type: small
+        cardWidth: 1
+    componentList:
+      - title: Hello 卡片
+        key: hello
+        position:
+          i: hello
+          x: 0
+          y: 0
+          w: 2
+          h: 1
+        useBrick:
+          brick: div
+          properties:
+            style:
+              padding: 16px
+              background: "#fff"
+              height: 100%
+            textContent: Hello World
+      - title: World 卡片
+        key: world
+        position:
+          i: world
+          x: 0
+          y: 2
+          w: 2
+          h: 1
+        useBrick:
+          brick: div
+          properties:
+            style:
+              padding: 16px
+              background: "#fff"
+              height: 100%
+            textContent: World Content
+      - title: Small 卡片
+        key: small
+        position:
+          i: small
+          x: 2
+          y: 0
+          w: 1
+          h: 1
+        useBrick:
+          brick: div
+          properties:
+            style:
+              padding: 16px
+              background: "#fff"
+              height: 100%
+            textContent: Small
+```
+
+### Edit Mode with Settings
+
+开启编辑模式，显示设置按钮，并监听 save、cancel、setting 事件。
+
+```yaml preview
+- brick: eo-workbench-layout-v2
+  events:
+    save:
+      - action: console.log
+    cancel:
+      - action: console.log
+    change:
+      - action: console.log
+    setting:
+      - action: console.log
+  properties:
+    isEdit: true
+    showSettingButton: true
+    gap: 16
+    layouts:
+      - i: hello
+        x: 0
+        y: 0
+        w: 2
+        h: 1
+        type: hello
+        cardWidth: 2
+      - i: small
+        x: 2
+        y: 0
+        w: 1
+        h: 1
+        type: small
+        cardWidth: 1
+    componentList:
+      - title: Hello 卡片
+        key: hello
+        position:
+          i: hello
+          x: 0
+          y: 0
+          w: 2
+          h: 1
+        useBrick:
+          brick: div
+          properties:
+            style:
+              padding: 16px
+              height: 100%
+            textContent: Hello World
+      - title: Small 卡片
+        key: small
+        position:
+          i: small
+          x: 2
+          y: 0
+          w: 1
+          h: 1
+        useBrick:
+          brick: div
+          properties:
+            style:
+              padding: 16px
+              height: 100%
+            textContent: Small
+      - title: Extra 卡片
+        key: extra
+        position:
+          i: extra
+          x: 0
+          y: 2
+          w: 2
+          h: 1
+        useBrick:
+          brick: div
+          properties:
+            style:
+              padding: 16px
+              height: 100%
+            textContent: Extra Content
+```

package/docs/eo-workbench-layout-v2.react.md

@@ -0,0 +1,162 @@
+---
+tagName: eo-workbench-layout-v2
+displayName: WrappedEoWorkbenchLayoutV2
+description: 工作台布局 V2，支持拖拽式卡片布局与全局样式（不使用 shadow DOM）
+category: layout
+source: "@next-bricks/advanced"
+---
+
+# WrappedEoWorkbenchLayoutV2
+
+> 工作台布局 V2，支持拖拽式卡片布局与全局样式（不使用 shadow DOM）
+
+## 导入
+
+```tsx
+import { WrappedEoWorkbenchLayoutV2 } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                       | 类型                                 | 必填 | 默认值 | 说明                                                         |
+| -------------------------- | ------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
+| cardTitle                  | `string`                             | 否   | -      | 编辑模式下左侧卡片列表面板的标题                             |
+| isEdit                     | `boolean`                            | 否   | -      | 是否进入编辑模式，编辑模式下可拖拽调整布局并显示卡片选择面板 |
+| layouts                    | `ExtraLayout[]`                      | 否   | -      | 当前布局配置，每项对应一个卡片的位置与大小及样式信息         |
+| toolbarBricks              | `{ useBrick: UseSingleBrickConf[] }` | 否   | -      | 编辑模式下工具栏区域的自定义构件                             |
+| componentList              | `WorkbenchComponent[]`               | 否   | -      | 组件列表，每项包含 key、title、useBrick 和 position 信息     |
+| customDefaultCardConfigMap | `Record<string, CardStyleConfig>`    | 否   | -      | 自定义卡片默认配置，用于覆盖默认卡片样式配置                 |
+| showSettingButton          | `boolean`                            | 否   | -      | 是否显示设置按钮，用于触发页面样式和布局设置                 |
+| gap                        | `number`                             | 否   | -      | 卡片之间的间距（px）                                         |
+
+## Events
+
+| 事件          | detail                                                                                              | 说明                           |
+| ------------- | --------------------------------------------------------------------------------------------------- | ------------------------------ |
+| onChange      | `ExtraLayout[]` — 当前布局配置数组                                                                  | 布局发生变化时触发             |
+| onSave        | `ExtraLayout[]` — 保存时的布局配置数组                                                              | 点击保存按钮时触发             |
+| onCancel      | `void`                                                                                              | 点击取消按钮时触发             |
+| onSetting     | `void`                                                                                              | 点击设置按钮时触发             |
+| onActionClick | `{ action: SimpleAction; layouts: Layout[] }` — { action: 点击的操作项, layouts: 当前布局配置数组 } | 更多操作菜单中的操作点击时触发 |
+
+## Methods
+
+| 方法       | 参数                          | 返回值 | 说明         |
+| ---------- | ----------------------------- | ------ | ------------ |
+| setLayouts | `(layouts: Layout[]) => void` | `void` | 设置布局配置 |
+
+## Examples
+
+### Basic
+
+展示工作台布局 V2 的基本用法，通过 layouts 和 componentList 配置卡片布局。
+
+```tsx
+<WrappedEoWorkbenchLayoutV2
+  layouts={[
+    { i: "hello", x: 0, y: 0, w: 2, h: 1, type: "hello", cardWidth: 2 },
+    { i: "world", x: 0, y: 1, w: 2, h: 1, type: "world", cardWidth: 2 },
+    { i: "small", x: 2, y: 0, w: 1, h: 1, type: "small", cardWidth: 1 },
+  ]}
+  componentList={[
+    {
+      title: "Hello 卡片",
+      key: "hello",
+      position: { i: "hello", x: 0, y: 0, w: 2, h: 1 },
+      useBrick: {
+        brick: "div",
+        properties: {
+          style: { padding: "16px", height: "100%" },
+          textContent: "Hello World",
+        },
+      },
+    },
+    {
+      title: "World 卡片",
+      key: "world",
+      position: { i: "world", x: 0, y: 2, w: 2, h: 1 },
+      useBrick: {
+        brick: "div",
+        properties: {
+          style: { padding: "16px", height: "100%" },
+          textContent: "World Content",
+        },
+      },
+    },
+    {
+      title: "Small 卡片",
+      key: "small",
+      position: { i: "small", x: 2, y: 0, w: 1, h: 1 },
+      useBrick: {
+        brick: "div",
+        properties: {
+          style: { padding: "16px", height: "100%" },
+          textContent: "Small",
+        },
+      },
+    },
+  ]}
+/>
+```
+
+### Edit Mode with Settings
+
+开启编辑模式，显示设置按钮，并监听 onSave、onCancel、onSetting 事件。
+
+```tsx
+const ref = useRef<any>();
+
+<WrappedEoWorkbenchLayoutV2
+  ref={ref}
+  isEdit={true}
+  showSettingButton={true}
+  gap={16}
+  layouts={[
+    { i: "hello", x: 0, y: 0, w: 2, h: 1, type: "hello", cardWidth: 2 },
+    { i: "small", x: 2, y: 0, w: 1, h: 1, type: "small", cardWidth: 1 },
+  ]}
+  componentList={[
+    {
+      title: "Hello 卡片",
+      key: "hello",
+      position: { i: "hello", x: 0, y: 0, w: 2, h: 1 },
+      useBrick: {
+        brick: "div",
+        properties: {
+          style: { padding: "16px", height: "100%" },
+          textContent: "Hello World",
+        },
+      },
+    },
+    {
+      title: "Small 卡片",
+      key: "small",
+      position: { i: "small", x: 2, y: 0, w: 1, h: 1 },
+      useBrick: {
+        brick: "div",
+        properties: {
+          style: { padding: "16px", height: "100%" },
+          textContent: "Small",
+        },
+      },
+    },
+    {
+      title: "Extra 卡片",
+      key: "extra",
+      position: { i: "extra", x: 0, y: 2, w: 2, h: 1 },
+      useBrick: {
+        brick: "div",
+        properties: {
+          style: { padding: "16px", height: "100%" },
+          textContent: "Extra Content",
+        },
+      },
+    },
+  ]}
+  onChange={(e) => console.log(e.detail)}
+  onSave={(e) => console.log(e.detail)}
+  onCancel={() => console.log("cancel")}
+  onSetting={() => console.log("setting")}
+  onActionClick={(e) => console.log(e.detail)}
+/>;
+```

package/docs/eo-workbench-layout.md

@@ -1,9 +1,45 @@
-工作台布局
+---
+tagName: eo-workbench-layout
+displayName: WrappedEoWorkbenchLayout
+description: 工作台布局（拖拽式卡片布局，支持编辑模式）
+category: layout
+source: "@next-bricks/advanced"
+---
+
+# eo-workbench-layout
+
+> 工作台布局（拖拽式卡片布局，支持编辑模式）。⚠️ 已废弃，请使用 `eo-workbench-layout-v2`。
+
+## Props
+
+| 属性          | 类型       | 必填 | 默认值 | 说明                                                         |
+| ------------- | ---------- | ---- | ------ | ------------------------------------------------------------ |
+| cardTitle     | `string`   | 否   | -      | 编辑模式下左侧卡片列表面板的标题                             |
+| isEdit        | `boolean`  | 否   | -      | 是否进入编辑模式，编辑模式下可拖拽调整布局并显示卡片选择面板 |
+| layouts       | `Layout[]` | 否   | -      | 当前布局配置，每项对应一个卡片的位置与大小                   |
+| componentList | `Item[]`   | 否   | -      | 组件列表，每项包含 key、title、useBrick 和 position 信息     |
+
+## Events
+
+| 事件         | detail                                                                                              | 说明               |
+| ------------ | --------------------------------------------------------------------------------------------------- | ------------------ |
+| change       | `Layout[]` — 当前布局配置数组                                                                       | 布局发生变化时触发 |
+| save         | `Layout[]` — 保存时的布局配置数组                                                                   | 点击保存按钮时触发 |
+| cancel       | `void`                                                                                              | 点击取消按钮时触发 |
+| action.click | `{ action: SimpleAction; layouts: Layout[] }` — { action: 点击的操作项, layouts: 当前布局配置数组 } | 操作点击事件       |
+
+## Methods
+
+| 方法       | 参数                          | 返回值 | 说明         |
+| ---------- | ----------------------------- | ------ | ------------ |
+| setLayouts | `(layouts: Layout[]) => void` | `void` | 设置布局配置 |
 
 ## Examples
 
 ### Basic
 
+展示工作台布局的基本用法，通过 layouts 和 componentList 配置卡片位置与内容。
+
 ```yaml preview
 - brick: eo-workbench-layout
   properties:
@@ -100,12 +136,18 @@
         key: custom
 ```
 
-### Edit & Event
+### Edit Mode
+
+开启 isEdit 进入编辑模式，支持拖拽调整卡片位置，并监听 save 和 cancel 事件。
 
 ```yaml preview
 - brick: eo-workbench-layout
   events:
-    save.layout:
+    save:
+      - action: console.log
+    cancel:
+      - action: console.log
+    change:
       - action: console.log
   properties:
     isEdit: true