@next-bricks/presentational 1.21.9 → 1.21.11

package/dist-types/loading-step/index.d.ts

@@ -14,36 +14,36 @@ export interface EoLoadingStepEventsMapping {
     onClose: "close";
 }
 /**
- * 加载步骤框
+ * @description 加载步骤框。以全屏遮罩的形式展示多步骤加载进度，适用于系统初始化、批量操作等需要阻塞用户交互的场景。
  */
 export declare class EoLoadingStep extends ReactNextElement implements EoLoadingStepProps {
     #private;
     /**
-     * 是否可见
+     * @description 是否可见。为 `true` 时展示全屏遮罩并锁定页面滚动，为 `false` 时隐藏遮罩并恢复滚动。
      */
     accessor visible: boolean | undefined;
     /**
-     * 宽度
+     * @description 容器宽度，支持任意 CSS 宽度值（如 `"400px"`、`"50%"`）。不设置时使用默认宽度。
      */
     accessor width: string | undefined;
     /**
-     * 步骤标题
+     * @description 步骤区域的标题文字，显示在步骤列表上方。
      */
     accessor stepTitle: string | undefined;
     /**
-     * 步骤列表
+     * @description 步骤列表，每项包含 `title`（显示名称）和 `key`（唯一标识）。步骤按数组顺序渲染。
      */
     accessor stepList: StepItem[] | undefined;
     /**
-     * 当前步骤
+     * @description 当前正在执行的步骤 `key`。key 对应的步骤显示为加载中（loading），之前的步骤显示为已完成（finished），之后的步骤显示为待执行（pending）。
      */
     accessor curStep: string | undefined;
     /**
-     * 打开
+     * @description 打开加载步骤框。将 `visible` 设为 `true` 并触发 `open` 事件。
      */
     open(): void;
     /**
-     * 关闭
+     * @description 关闭加载步骤框。将 `visible` 设为 `false` 并触发 `close` 事件。
      */
     close(): void;
     disconnectedCallback(): void;

package/dist-types/pagination/index.d.ts

@@ -36,6 +36,7 @@ export interface EoPaginationEventsMapping {
 export declare class EoPagination extends ReactNextElement implements EoPaginationProps {
     #private;
     /**
+     * 分页模式：`page` 为页码模式，`token` 为令牌（游标）模式
      * @default "page"
      */
     accessor type: "page" | "token" | undefined;
@@ -60,7 +61,13 @@ export declare class EoPagination extends ReactNextElement implements EoPaginati
      * @default true
      */
     accessor showSizeChanger: boolean | undefined;
+    /**
+     * 令牌模式下的下一页令牌（nextToken），有值时"下一页"按钮可点击
+     */
     accessor nextToken: string | undefined;
+    /**
+     * 令牌模式下的上一页令牌（previousToken），有值时"上一页"按钮可点击
+     */
     accessor previousToken: string | undefined;
     render(): React.JSX.Element;
 }

package/dist-types/statistics-card/index.d.ts

@@ -21,7 +21,7 @@ export interface EoStatisticsCardProps {
  * 统计卡片
  *
  * @slot titlePrefix - 标题前缀，放置辅助信息
- * @slot titleSuffix - 标题前缀，放置辅助信息
+ * @slot titleSuffix - 标题后缀，放置辅助信息
  * @slot description - 描述信息，通常是对于统计值的描述
  * @slot basicContent - 卡片右侧内容区，适合放置迷你图表，常用于小卡片
  * @slot extraContent - 卡片下方内容区，适合放置图表，用于展示更多信息的场景
@@ -42,7 +42,7 @@ export declare class EoStatisticsCard extends ReactNextElement {
      */
     accessor unit: string | undefined;
     /**
-     * 图标
+     * 图标，支持 GeneralIconProps 的所有字段，额外支持 `color`（图标颜色）和 `bgColor`（背景色）
      */
     accessor icon: EoStatisticsCardProps["icon"] | undefined;
     /**

package/docs/eo-alert.md

@@ -1,9 +1,39 @@
-告警提示
+---
+tagName: eo-alert
+displayName: WrappedEoAlert
+description: 告警提示
+category: display-component
+source: "@next-bricks/presentational"
+---
+
+# eo-alert
+
+> 告警提示
+
+## Props
+
+| 属性                | 类型                                          | 必填 | 默认值 | 说明                                                                                                            |
+| ------------------- | --------------------------------------------- | ---- | ------ | --------------------------------------------------------------------------------------------------------------- |
+| type                | `"success" \| "info" \| "warning" \| "error"` | 是   | -      | 警告类型                                                                                                        |
+| hasTitle            | `boolean`                                     | 否   | -      | 是否显示标题。开启后，可以使用 `title` 插槽                                                                     |
+| showIcon            | `boolean`                                     | 否   | -      | 是否显示提示图标                                                                                                |
+| closable            | `boolean`                                     | 否   | -      | 是否显示关闭按钮                                                                                                |
+| localStorageKey     | `string`                                      | 否   | -      | 以该值和页面 url 作为命名空间，决定是否显示该警告提示。关闭后将记录到 localStorage，下次访问同一 url 时不再显示 |
+| disableUrlNamespace | `boolean`                                     | 否   | -      | 仅以 `localStorageKey` 作为命名空间（不拼接页面 url），关闭后在所有页面均不再显示                               |
+
+## Slots
+
+| 名称     | 说明                         |
+| -------- | ---------------------------- |
+| （默认） | 内容区                       |
+| title    | 标题，需配合 `hasTitle` 使用 |
 
 ## Examples
 
 ### Basic
 
+展示四种警告类型（`info`、`success`、`warning`、`error`），并启用关闭按钮。
+
 ```yaml preview
 brick: div
 properties:
@@ -42,6 +72,8 @@ slots:
 
 ### HasTitle
 
+通过 `hasTitle` 启用标题区域，并使用 `title` 插槽放置标题内容。
+
 ```yaml preview
 brick: div
 properties:
@@ -110,3 +142,35 @@ slots:
                 properties:
                   textContent: 出错了
 ```
+
+### LocalStorageKey
+
+通过 `localStorageKey` 和 `disableUrlNamespace` 控制关闭后的持久化范围：`disableUrlNamespace` 为 `true` 时，关闭后在所有页面均不再显示；否则仅在当前 url 下不再显示。
+
+```yaml preview
+brick: div
+properties:
+  style:
+    display: flex
+    flex-direction: column
+    gap: 10px
+slots:
+  "":
+    type: bricks
+    bricks:
+      - brick: eo-alert
+        properties:
+          textContent: 关闭后仅在当前页面不再显示（localStorageKey + url 命名空间）。
+          type: info
+          closable: true
+          showIcon: true
+          localStorageKey: demo-alert-url
+      - brick: eo-alert
+        properties:
+          textContent: 关闭后在所有页面均不再显示（仅 localStorageKey 命名空间）。
+          type: warning
+          closable: true
+          showIcon: true
+          localStorageKey: demo-alert-global
+          disableUrlNamespace: true
+```

package/docs/eo-alert.react.md

@@ -0,0 +1,127 @@
+---
+tagName: eo-alert
+displayName: WrappedEoAlert
+description: 告警提示
+category: display-component
+source: "@next-bricks/presentational"
+---
+
+# WrappedEoAlert
+
+> 告警提示
+
+## 导入
+
+```tsx
+import { WrappedEoAlert } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                | 类型                                          | 必填 | 默认值 | 说明                                                                                                            |
+| ------------------- | --------------------------------------------- | ---- | ------ | --------------------------------------------------------------------------------------------------------------- |
+| type                | `"success" \| "info" \| "warning" \| "error"` | 是   | -      | 警告类型                                                                                                        |
+| hasTitle            | `boolean`                                     | 否   | -      | 是否显示标题。开启后，可以使用 `title` 插槽                                                                     |
+| showIcon            | `boolean`                                     | 否   | -      | 是否显示提示图标                                                                                                |
+| closable            | `boolean`                                     | 否   | -      | 是否显示关闭按钮                                                                                                |
+| localStorageKey     | `string`                                      | 否   | -      | 以该值和页面 url 作为命名空间，决定是否显示该警告提示。关闭后将记录到 localStorage，下次访问同一 url 时不再显示 |
+| disableUrlNamespace | `boolean`                                     | 否   | -      | 仅以 `localStorageKey` 作为命名空间（不拼接页面 url），关闭后在所有页面均不再显示                               |
+
+## Slots
+
+| 名称     | 说明                         |
+| -------- | ---------------------------- |
+| （默认） | 内容区                       |
+| title    | 标题，需配合 `hasTitle` 使用 |
+
+## Examples
+
+### Basic
+
+展示四种警告类型（`info`、`success`、`warning`、`error`），并启用关闭按钮。
+
+```tsx preview
+import { WrappedEoAlert } from "@easyops/wrapped-components";
+
+export default function App() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <WrappedEoAlert type="info" closable>
+        你好！欢迎使用EasyOps 2.0专业版，你可以根据自身需求添加业务模块。
+      </WrappedEoAlert>
+      <WrappedEoAlert type="success" closable showIcon>
+        恭喜！你所提交的信息已经审核通过。
+      </WrappedEoAlert>
+      <WrappedEoAlert type="warning" closable showIcon>
+        系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！
+      </WrappedEoAlert>
+      <WrappedEoAlert type="error" closable showIcon>
+        系统错误，请稍后重试。
+      </WrappedEoAlert>
+    </div>
+  );
+}
+```
+
+### HasTitle
+
+通过 `hasTitle` 启用标题区域，并使用 `title` 插槽放置标题内容。
+
+```tsx preview
+import { WrappedEoAlert } from "@easyops/wrapped-components";
+
+export default function App() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <WrappedEoAlert type="info" closable hasTitle showIcon>
+        <div slot="title">帮助信息</div>
+        你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。
+      </WrappedEoAlert>
+      <WrappedEoAlert type="success" closable hasTitle showIcon>
+        <div slot="title">已成功</div>
+        你所提交的审核信息已全部通过审核，请及时跟进申请状况。
+      </WrappedEoAlert>
+      <WrappedEoAlert type="warning" closable hasTitle showIcon>
+        <div slot="title">请注意</div>
+        你所提交的审核信息审核失败，可以进入个人信箱查看原因。如有疑问，请联系客服人员。
+      </WrappedEoAlert>
+      <WrappedEoAlert type="error" closable hasTitle showIcon>
+        <div slot="title">出错了</div>
+        你的账户会员使用权限将在3天后到期，请及时跟进申请状况，如有疑问，请联系审核人员。
+      </WrappedEoAlert>
+    </div>
+  );
+}
+```
+
+### LocalStorageKey
+
+通过 `localStorageKey` 和 `disableUrlNamespace` 控制关闭后的持久化范围：`disableUrlNamespace` 为 `true` 时，关闭后在所有页面均不再显示；否则仅在当前 url 下不再显示。
+
+```tsx preview
+import { WrappedEoAlert } from "@easyops/wrapped-components";
+
+export default function App() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <WrappedEoAlert
+        type="info"
+        closable
+        showIcon
+        localStorageKey="demo-alert-url"
+      >
+        关闭后仅在当前页面不再显示（localStorageKey + url 命名空间）。
+      </WrappedEoAlert>
+      <WrappedEoAlert
+        type="warning"
+        closable
+        showIcon
+        localStorageKey="demo-alert-global"
+        disableUrlNamespace
+      >
+        关闭后在所有页面均不再显示（仅 localStorageKey 命名空间）。
+      </WrappedEoAlert>
+    </div>
+  );
+}
+```