@next-bricks/presentational 1.21.9 → 1.21.10

package/docs/eo-loading-step.react.md

@@ -0,0 +1,102 @@
+---
+tagName: eo-loading-step
+displayName: WrappedEoLoadingStep
+description: 加载步骤框。以全屏遮罩的形式展示多步骤加载进度，适用于系统初始化、批量操作等需要阻塞用户交互的场景。
+category: ""
+source: "@next-bricks/presentational"
+---
+
+# WrappedEoLoadingStep
+
+> 加载步骤框。以全屏遮罩的形式展示多步骤加载进度，适用于系统初始化、批量操作等需要阻塞用户交互的场景。
+
+## 导入
+
+```tsx
+import { WrappedEoLoadingStep } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性      | 类型                      | 必填 | 默认值 | 说明                                                                                                                                     |
+| --------- | ------------------------- | ---- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| visible   | `boolean \| undefined`    | 否   | -      | 是否可见。为 `true` 时展示全屏遮罩并锁定页面滚动，为 `false` 时隐藏遮罩并恢复滚动。                                                      |
+| width     | `string \| undefined`     | 否   | -      | 容器宽度，支持任意 CSS 宽度值（如 `"400px"`、`"50%"`）。不设置时使用默认宽度。                                                           |
+| stepTitle | `string \| undefined`     | 否   | -      | 步骤区域的标题文字，显示在步骤列表上方。                                                                                                 |
+| stepList  | `StepItem[] \| undefined` | 否   | -      | 步骤列表，每项包含 `title`（显示名称）和 `key`（唯一标识）。步骤按数组顺序渲染。                                                         |
+| curStep   | `string \| undefined`     | 否   | -      | 当前正在执行的步骤 `key`。key 对应的步骤显示为加载中（loading），之前的步骤显示为已完成（finished），之后的步骤显示为待执行（pending）。 |
+| onOpen    | `() => void`              | 否   | -      | 调用 `open()` 方法后触发。                                                                                                               |
+| onClose   | `() => void`              | 否   | -      | 调用 `close()` 方法后触发。                                                                                                              |
+
+## Examples
+
+### Basic
+
+展示一个多步骤加载进度框，`curStep` 为第二步时，第一步显示为已完成，第二步显示为加载中，其余步骤显示为待执行。
+
+```tsx preview minHeight="600px"
+<WrappedEoLoadingStep
+  visible={true}
+  stepTitle="正在分析中"
+  curStep="second"
+  stepList={[
+    { title: "正在从事件中获取资源信息...", key: "first" },
+    { title: "事件资源获取成功。", key: "second" },
+    { title: "正在匹配资源详情页...", key: "third" },
+    { title: "已为您匹配到最佳资源详情页。", key: "fourth" },
+    { title: "即将前往基础设施监控, 请等待...", key: "fifth" },
+  ]}
+/>
+```
+
+### Custom Width
+
+通过 `width` 属性自定义容器宽度。
+
+```tsx preview minHeight="600px"
+<WrappedEoLoadingStep
+  visible={true}
+  width="480px"
+  stepTitle="正在初始化系统"
+  curStep="step1"
+  stepList={[
+    { title: "正在检查环境依赖...", key: "step1" },
+    { title: "正在加载配置文件...", key: "step2" },
+    { title: "正在启动核心服务...", key: "step3" },
+  ]}
+/>
+```
+
+### Open and Close via Methods
+
+通过按钮调用 `open()` 和 `close()` 方法控制加载步骤框的显隐，并监听 `onOpen` 和 `onClose` 事件。
+
+```tsx preview minHeight="100px"
+function App() {
+  const ref = React.useRef(null);
+  const [log, setLog] = React.useState("");
+
+  return (
+    <div>
+      <button onClick={() => ref.current?.open()} style={{ marginRight: 8 }}>
+        打开加载框
+      </button>
+      <button onClick={() => ref.current?.close()}>关闭加载框</button>
+      {log && <div style={{ marginTop: 8 }}>{log}</div>}
+      <WrappedEoLoadingStep
+        ref={ref}
+        visible={false}
+        stepTitle="正在批量处理数据"
+        curStep="task2"
+        stepList={[
+          { title: "正在读取数据源...", key: "task1" },
+          { title: "正在处理数据...", key: "task2" },
+          { title: "正在写入结果...", key: "task3" },
+        ]}
+        onOpen={() => setLog("加载框已打开")}
+        onClose={() => setLog("加载框已关闭")}
+      />
+    </div>
+  );
+}
+```

package/docs/eo-pagination.md

@@ -1,9 +1,40 @@
-分页
+---
+tagName: eo-pagination
+displayName: WrappedEoPagination
+description: 分页
+category: navigation
+source: "@next-bricks/presentational"
+---
+
+# eo-pagination
+
+> 分页
+
+## Props
+
+| 属性            | 类型                | 必填 | 默认值              | 说明                                                              |
+| --------------- | ------------------- | ---- | ------------------- | ----------------------------------------------------------------- |
+| type            | `"page" \| "token"` | -    | `"page"`            | 分页模式：`page` 为页码模式，`token` 为令牌（游标）模式           |
+| total           | `number`            | -    | `0`                 | 数据总数                                                          |
+| page            | `number`            | -    | `1`                 | 当前页数                                                          |
+| pageSize        | `number`            | -    | `20`                | 每页条数                                                          |
+| pageSizeOptions | `number[]`          | -    | `[10, 20, 50, 100]` | 指定每页可以显示多少条                                            |
+| showSizeChanger | `boolean`           | -    | `true`              | 是否展示`pageSize`分页器                                          |
+| nextToken       | `string`            | -    | -                   | 令牌模式下的下一页令牌（nextToken），有值时"下一页"按钮可点击     |
+| previousToken   | `string`            | -    | -                   | 令牌模式下的上一页令牌（previousToken），有值时"上一页"按钮可点击 |
+
+## Events
+
+| 事件   | detail                                                                                                                                              | 说明                   |
+| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| change | `ChangeDetail` — 页码模式下为 `{ page: 当前页码, pageSize: 每页条数 }`；令牌模式下为 `{ type: "token", nextToken: 下一页令牌, pageSize: 每页条数 }` | 页码及每页条数改变事件 |
 
 ## Examples
 
 ### Basic
 
+基本用法，页码模式下展示分页并监听翻页事件。
+
 ```yaml preview
 brick: eo-pagination
 properties:
@@ -19,6 +50,8 @@ events:
 
 ### By token
 
+使用令牌（游标）模式进行分页，通过 nextToken 和 previousToken 控制翻页。
+
 ```yaml preview
 brick: eo-pagination
 properties:
@@ -32,3 +65,43 @@ events:
       args:
         - <% EVENT.detail %>
 ```
+
+### Hide Size Changer
+
+隐藏每页条数选择器。
+
+```yaml preview
+brick: eo-pagination
+properties:
+  total: 500
+  pageSize: 10
+  page: 1
+  showSizeChanger: false
+events:
+  change:
+    - action: console.log
+      args:
+        - <% EVENT.detail %>
+```
+
+### Custom Page Size Options
+
+自定义每页条数选项。
+
+```yaml preview
+brick: eo-pagination
+properties:
+  total: 2000
+  pageSize: 25
+  page: 1
+  pageSizeOptions:
+    - 25
+    - 50
+    - 100
+    - 200
+events:
+  change:
+    - action: console.log
+      args:
+        - <% EVENT.detail %>
+```

package/docs/eo-pagination.react.md

@@ -0,0 +1,93 @@
+---
+tagName: eo-pagination
+displayName: WrappedEoPagination
+description: 分页
+category: navigation
+source: "@next-bricks/presentational"
+---
+
+# WrappedEoPagination
+
+> 分页
+
+## 导入
+
+```tsx
+import { WrappedEoPagination } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性            | 类型                | 必填 | 默认值              | 说明                                                              |
+| --------------- | ------------------- | ---- | ------------------- | ----------------------------------------------------------------- |
+| type            | `"page" \| "token"` | -    | `"page"`            | 分页模式：`page` 为页码模式，`token` 为令牌（游标）模式           |
+| total           | `number`            | -    | `0`                 | 数据总数                                                          |
+| page            | `number`            | -    | `1`                 | 当前页数                                                          |
+| pageSize        | `number`            | -    | `20`                | 每页条数                                                          |
+| pageSizeOptions | `number[]`          | -    | `[10, 20, 50, 100]` | 指定每页可以显示多少条                                            |
+| showSizeChanger | `boolean`           | -    | `true`              | 是否展示`pageSize`分页器                                          |
+| nextToken       | `string`            | -    | -                   | 令牌模式下的下一页令牌（nextToken），有值时"下一页"按钮可点击     |
+| previousToken   | `string`            | -    | -                   | 令牌模式下的上一页令牌（previousToken），有值时"上一页"按钮可点击 |
+
+## Events
+
+| 事件     | detail                                                                                                                                              | 说明                   |
+| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| onChange | `ChangeDetail` — 页码模式下为 `{ page: 当前页码, pageSize: 每页条数 }`；令牌模式下为 `{ type: "token", nextToken: 下一页令牌, pageSize: 每页条数 }` | 页码及每页条数改变事件 |
+
+## Examples
+
+### Basic
+
+基本用法，页码模式下展示分页并监听翻页事件。
+
+```tsx
+<WrappedEoPagination
+  total={1000}
+  pageSize={20}
+  page={1}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### By token
+
+使用令牌（游标）模式进行分页，通过 nextToken 和 previousToken 控制翻页。
+
+```tsx
+<WrappedEoPagination
+  type="token"
+  pageSize={20}
+  nextToken="abc"
+  previousToken="def"
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Hide Size Changer
+
+隐藏每页条数选择器。
+
+```tsx
+<WrappedEoPagination
+  total={500}
+  pageSize={10}
+  page={1}
+  showSizeChanger={false}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Custom Page Size Options
+
+自定义每页条数选项。
+
+```tsx
+<WrappedEoPagination
+  total={2000}
+  pageSize={25}
+  page={1}
+  pageSizeOptions={[25, 50, 100, 200]}
+  onChange={(e) => console.log(e.detail)}
+/>
+```