@next-bricks/presentational 1.21.9 → 1.21.11

package/docs/eo-info-card-item.md

@@ -1,100 +1,41 @@
-构件 `eo-info-card-item`
+---
+tagName: eo-info-card-item
+displayName: WrappedEoInfoCardItem
+description: 信息类卡片 —— 横向布局信息卡片
+category: card-info
+source: "@next-bricks/presentational"
+---
+
+# eo-info-card-item
+
+> 展示带图标、标题、描述和详细列表的横向布局信息卡片，支持链接跳转、插槽图标、标题后缀及操作区。
+
+## Props
+
+| 属性        | 类型               | 必填 | 默认值 | 说明                                                                               |
+| ----------- | ------------------ | ---- | ------ | ---------------------------------------------------------------------------------- |
+| cardTitle   | `string`           | 是   | -      | 卡片标题                                                                           |
+| description | `string`           | 否   | -      | 卡片描述信息                                                                       |
+| url         | `string`           | 否   | -      | 链接地址，点击卡片时跳转                                                           |
+| target      | `string`           | 否   | -      | 链接跳转目标，如 `_blank`；设置后使用 `window.open` 跳转，否则使用内部路由跳转     |
+| cardIcon    | `IconAvatar`       | 否   | -      | 图标配置，支持设置图标、颜色、尺寸、形状和背景色。`icon` slot 有内容时此属性不显示 |
+| detailList  | `InfoCardDetail[]` | 否   | -      | 详细列表，每项可设置标题、描述文字或自定义构件。4 项及以上时以等宽网格排列         |
+
+## Slots
+
+| 名称   | 说明                                                     |
+| ------ | -------------------------------------------------------- |
+| icon   | 图标区域，放置自定义图标；有内容时 `cardIcon` 属性不生效 |
+| title  | 标题后缀区域，通常放置状态标签等内容                     |
+| action | 操作区域，点击不会触发卡片跳转                           |
 
 ## Examples
 
 ### Basic
 
+展示带图标、描述和详细列表的基本横向信息卡片。
+
 ```yaml preview
-- brick: eo-info-card-item
-  properties:
-    style:
-      width: 100%
-    cardTitle: 持续集成
-    cardIcon:
-      color: green
-      icon:
-        icon: object-topology
-        lib: easyops
-        category: app
-      bgColor: var(--theme-green-background)
-    description: 支持展客户两会话健康和空间和健康和健康和健康几节课或军扩过过过过科技股科技股就开始刚开始搞是接口关键时刻哥萨克伽伽司空见惯撒十多个数据库高升控股撒奥会计噶会计师公开撒娇鬼萨科技馆萨科技会计师干撒冈萨加国盛金控hhhhhhhhhhhhh
-    detailList:
-      - useBrick:
-          brick: eo-tag
-          properties:
-            textContent: IT资源管理
-            tagStyle:
-              borderRadius: 3px
-              lineHeight: 32px
-      - useBrick:
-          brick: eo-tag
-          properties:
-            textContent: 存储设备
-            tagStyle:
-              borderRadius: 3px
-              lineHeight: 32px
-      - useBrick:
-          brick: eo-tag
-          properties:
-            textContent: 资源套餐
-            tagStyle:
-              borderRadius: 3px
-              lineHeight: 32px
-  slots:
-    action:
-      type: bricks
-      bricks:
-        - brick: eo-dropdown-actions
-          events:
-            advanced.setting:
-              - action: message.success
-                args:
-                  - click advanced button
-            button.delete:
-              - useProvider: basic.show-dialog
-                args:
-                  - type: confirm
-                    title: Please Confirm
-                    content: Are you sure?
-                callback:
-                  success:
-                    action: message.success
-                    args:
-                      - You just confirmed!
-                  error:
-                    action: message.warn
-                    args:
-                      - You just canceled.
-          children:
-            - brick: eo-button
-              properties:
-                type: text
-                icon:
-                  lib: fa
-                  icon: ellipsis-h
-                  color: red
-                size: small
-          properties:
-            actions:
-              - text: 高级设置
-                color: red
-                icon:
-                  icon: setting
-                  lib: antd
-                event: advanced.setting
-              - text: 删除
-                icon:
-                  lib: antd
-                  icon: delete
-                event: button.delete
-                tooltip: 删除
-                tooltipPlacement: right
-                danger: true
-                color: var(--theme-red-color)
-- brick: div
-  properties:
-    style:
-      height: 20px
 - brick: eo-info-card-item
   properties:
     style:
@@ -106,7 +47,8 @@
         icon: patch-management
         lib: easyops
         category: app
-    description: 资产盘点为设备运维人员提供便捷的设备资产盘点能力，使用自动化的盘点方式替换原有人工盘点，解放设备运维人员的双手
+      bgColor: var(--theme-orange-background)
+    description: 资产盘点为设备运维人员提供便捷的设备资产盘点能力，使用自动化的盘点方式替换原有人工盘点
     detailList:
       - desc: 7M
         title: 大小
@@ -116,67 +58,83 @@
         title: 下载率
       - desc: 2%
         title: 失败率
-  slots:
-    title:
-      type: bricks
-      bricks:
-        - brick: eo-tag
-          properties:
-            textContent: 生产
-            color: blue
-    action:
-      type: bricks
-      bricks:
-        - brick: eo-dropdown-actions
-          events:
-            advanced.setting:
-              - action: message.success
-                args:
-                  - click advanced button
-            button.delete:
-              - useProvider: basic.show-dialog
-                args:
-                  - type: confirm
-                    title: Please Confirm
-                    content: Are you sure?
-                callback:
-                  success:
-                    action: message.success
-                    args:
-                      - You just confirmed!
-                  error:
-                    action: message.warn
-                    args:
-                      - You just canceled.
-          children:
-            - brick: eo-button
-              properties:
-                type: text
-                icon:
-                  lib: fa
-                  icon: ellipsis-h
-                  color: red
-                size: small
-          properties:
-            actions:
-              - text: 高级设置
-                icon:
-                  icon: setting
-                  lib: antd
-                event: advanced.setting
-              - text: 删除
-                icon:
-                  lib: antd
-                  icon: delete
-                event: button.delete
-                tooltip: 删除
-                tooltipPlacement: right
-                color: var(--theme-red-color)
-                danger: true
+```
+
+### With url and target
+
+点击卡片时通过 `url` 和 `target` 跳转到指定地址。
+
+```yaml preview
+- brick: eo-info-card-item
+  properties:
+    style:
+      width: 100%
+    cardTitle: 持续集成
+    url: /ci
+    target: _blank
+    cardIcon:
+      color: green
+      icon:
+        icon: object-topology
+        lib: easyops
+        category: app
+      bgColor: var(--theme-green-background)
+    description: 持续集成服务，点击卡片在新标签页打开
+```
+
+### cardIcon shapes
+
+通过 `cardIcon.shape` 控制图标头像的形状，支持 `circle`、`square`、`round-square`。
+
+```yaml preview
 - brick: div
   properties:
     style:
-      height: 20px
+      display: flex
+      flexDirection: column
+      gap: 12px
+      width: 100%
+  children:
+    - brick: eo-info-card-item
+      properties:
+        cardTitle: 圆形图标 (circle)
+        cardIcon:
+          icon:
+            lib: antd
+            icon: app-store
+            theme: outlined
+          color: var(--theme-blue-color)
+          bgColor: var(--theme-blue-background)
+          shape: circle
+    - brick: eo-info-card-item
+      properties:
+        cardTitle: 方形图标 (square)
+        cardIcon:
+          icon:
+            lib: antd
+            icon: app-store
+            theme: outlined
+          color: var(--theme-purple-color)
+          bgColor: var(--theme-purple-background)
+          shape: square
+    - brick: eo-info-card-item
+      properties:
+        cardTitle: 圆角方形图标 (round-square)
+        cardIcon:
+          icon:
+            lib: antd
+            icon: app-store
+            theme: outlined
+          color: var(--theme-green-color)
+          bgColor: var(--theme-green-background)
+          shape: round-square
+```
+
+### detailList with useBrick
+
+`detailList` 中每项均可使用 `useBrick` 渲染自定义构件，`title` 显示为列标题，`desc` 在无 `useBrick` 时作为文字描述并带 tooltip。
+
+```yaml preview
 - brick: eo-info-card-item
   properties:
     style:
@@ -187,15 +145,12 @@
       icon:
         icon: chart-pie
         lib: fa
-    description: F5管理将企业F5BIG-IP设备统一管理，可在F5设备卡片页概览全部设备的状态，了解 VirtualServer、Pool、iRules资源信息
+    description: F5管理将企业F5BIG-IP设备统一管理，可在F5设备卡片页概览全部设备的状态
     detailList:
       - useBrick:
           brick: eo-switch
           properties:
-            name: enabled
             size: small
-            style:
-              marginTop: "-2.5px"
             value: true
         title: 是否启用
       - desc: "7663"
@@ -204,38 +159,36 @@
         title: 下载率
       - desc: 3%
         title: 失败率
+```
+
+### Slots
+
+使用 `icon` 插槽自定义图标，`title` 插槽在标题后追加标签，`action` 插槽放置操作按钮（点击不触发卡片跳转）。
+
+```yaml preview
+- brick: eo-info-card-item
+  properties:
+    style:
+      width: 100%
+    cardTitle: 资源监控微应用
+    description: 资源监控微应用相关前后台
+    detailList:
+      - desc: 7M
+        title: 大小
+      - desc: "863"
+        title: 下载次数
   slots:
     title:
       type: bricks
       bricks:
         - brick: eo-tag
           properties:
-            textContent: 测试
-            color: green
+            textContent: 生产
+            color: blue
     action:
       type: bricks
       bricks:
         - brick: eo-dropdown-actions
-          events:
-            advanced.setting:
-              - action: message.success
-                args:
-                  - click advanced button
-            button.delete:
-              - useProvider: basic.show-dialog
-                args:
-                  - type: confirm
-                    title: Please Confirm
-                    content: Are you sure?
-                callback:
-                  success:
-                    action: message.success
-                    args:
-                      - You just confirmed!
-                  error:
-                    action: message.warn
-                    args:
-                      - You just canceled.
           children:
             - brick: eo-button
               properties:
@@ -256,12 +209,5 @@
                   lib: antd
                   icon: delete
                 event: button.delete
-                tooltip: 删除
-                tooltipPlacement: right
                 danger: true
-                color: var(--theme-red-color)
-- brick: div
-  properties:
-    style:
-      height: 50px
 ```

package/docs/eo-info-card-item.react.md

@@ -0,0 +1,188 @@
+---
+tagName: eo-info-card-item
+displayName: WrappedEoInfoCardItem
+description: 信息类卡片 —— 横向布局信息卡片
+category: card-info
+source: "@next-bricks/presentational"
+---
+
+# WrappedEoInfoCardItem
+
+> 展示带图标、标题、描述和详细列表的横向布局信息卡片，支持链接跳转、插槽图标、标题后缀及操作区。
+
+## 导入
+
+```tsx
+import { WrappedEoInfoCardItem } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型               | 必填 | 默认值 | 说明                                                                                                                                                                       |
+| ----------- | ------------------ | ---- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| cardTitle   | `string`           | 是   | -      | 卡片标题                                                                                                                                                                   |
+| description | `string`           | 否   | -      | 卡片描述信息                                                                                                                                                               |
+| url         | `string`           | 否   | -      | 链接地址，点击卡片时跳转                                                                                                                                                   |
+| target      | `string`           | 否   | -      | 链接跳转目标，如 `_blank`；设置后使用 `window.open` 跳转，否则使用内部路由跳转                                                                                             |
+| cardIcon    | `IconAvatar`       | 否   | -      | 图标配置，支持设置图标、颜色、尺寸、形状和背景色。`icon` slot 有内容时此属性不显示                                                                                         |
+| detailList  | `InfoCardDetail[]` | 否   | -      | 详细列表，每项可设置标题、描述文字或自定义构件。4 项及以上时以等宽网格排列。`InfoCardDetail` — \{ title: 列标题, desc: 文字描述（带 tooltip）, useBrick: 自定义构件配置 \} |
+
+## Slots
+
+| 名称   | 说明                                                     |
+| ------ | -------------------------------------------------------- |
+| icon   | 图标区域，放置自定义图标；有内容时 `cardIcon` 属性不生效 |
+| title  | 标题后缀区域，通常放置状态标签等内容                     |
+| action | 操作区域，点击不会触发卡片跳转                           |
+
+## Examples
+
+### Basic
+
+展示带图标、描述和详细列表的基本横向信息卡片。
+
+```tsx
+<WrappedEoInfoCardItem
+  style={{ width: "100%" }}
+  cardTitle="资产盘点"
+  cardIcon={{
+    color: "orange",
+    icon: { icon: "patch-management", lib: "easyops", category: "app" },
+    bgColor: "var(--theme-orange-background)",
+  }}
+  description="资产盘点为设备运维人员提供便捷的设备资产盘点能力，使用自动化的盘点方式替换原有人工盘点"
+  detailList={[
+    { desc: "7M", title: "大小" },
+    { desc: "863", title: "下载次数" },
+    { desc: "80%", title: "下载率" },
+    { desc: "2%", title: "失败率" },
+  ]}
+/>
+```
+
+### With url and target
+
+点击卡片时通过 `url` 和 `target` 跳转到指定地址。
+
+```tsx
+<WrappedEoInfoCardItem
+  style={{ width: "100%" }}
+  cardTitle="持续集成"
+  url="/ci"
+  target="_blank"
+  cardIcon={{
+    color: "green",
+    icon: { icon: "object-topology", lib: "easyops", category: "app" },
+    bgColor: "var(--theme-green-background)",
+  }}
+  description="持续集成服务，点击卡片在新标签页打开"
+/>
+```
+
+### cardIcon shapes
+
+通过 `cardIcon.shape` 控制图标头像的形状，支持 `circle`、`square`、`round-square`。
+
+```tsx
+<div
+  style={{ display: "flex", flexDirection: "column", gap: 12, width: "100%" }}
+>
+  <WrappedEoInfoCardItem
+    cardTitle="圆形图标 (circle)"
+    cardIcon={{
+      icon: { lib: "antd", icon: "app-store", theme: "outlined" },
+      color: "var(--theme-blue-color)",
+      bgColor: "var(--theme-blue-background)",
+      shape: "circle",
+    }}
+  />
+  <WrappedEoInfoCardItem
+    cardTitle="方形图标 (square)"
+    cardIcon={{
+      icon: { lib: "antd", icon: "app-store", theme: "outlined" },
+      color: "var(--theme-purple-color)",
+      bgColor: "var(--theme-purple-background)",
+      shape: "square",
+    }}
+  />
+  <WrappedEoInfoCardItem
+    cardTitle="圆角方形图标 (round-square)"
+    cardIcon={{
+      icon: { lib: "antd", icon: "app-store", theme: "outlined" },
+      color: "var(--theme-green-color)",
+      bgColor: "var(--theme-green-background)",
+      shape: "round-square",
+    }}
+  />
+</div>
+```
+
+### detailList with useBrick
+
+`detailList` 中每项均可使用 `useBrick` 渲染自定义构件，`title` 显示为列标题，`desc` 在无 `useBrick` 时作为文字描述并带 tooltip。
+
+```tsx
+<WrappedEoInfoCardItem
+  style={{ width: "100%" }}
+  cardTitle="资源监控微应用"
+  cardIcon={{
+    color: "blue",
+    icon: { icon: "chart-pie", lib: "fa" },
+  }}
+  description="F5管理将企业F5BIG-IP设备统一管理，可在F5设备卡片页概览全部设备的状态"
+  detailList={[
+    {
+      useBrick: {
+        brick: "eo-switch",
+        properties: { size: "small", value: true },
+      },
+      title: "是否启用",
+    },
+    { desc: "7663", title: "下载次数" },
+    { desc: "90%", title: "下载率" },
+    { desc: "3%", title: "失败率" },
+  ]}
+/>
+```
+
+### Slots
+
+使用 `icon` 插槽自定义图标，`title` 插槽在标题后追加标签，`action` 插槽放置操作按钮（点击不触发卡片跳转）。
+
+```tsx
+<WrappedEoInfoCardItem
+  style={{ width: "100%" }}
+  cardTitle="资源监控微应用"
+  description="资源监控微应用相关前后台"
+  detailList={[
+    { desc: "7M", title: "大小" },
+    { desc: "863", title: "下载次数" },
+  ]}
+>
+  <WrappedEoTag slot="title" color="blue">
+    生产
+  </WrappedEoTag>
+  <WrappedEoDropdownActions
+    slot="action"
+    actions={[
+      {
+        text: "高级设置",
+        icon: { icon: "setting", lib: "antd" },
+        event: "advanced.setting",
+      },
+      {
+        text: "删除",
+        icon: { lib: "antd", icon: "delete" },
+        event: "button.delete",
+        danger: true,
+      },
+    ]}
+  >
+    <WrappedEoButton
+      type="text"
+      icon={{ lib: "fa", icon: "ellipsis-h" }}
+      size="small"
+    />
+  </WrappedEoDropdownActions>
+</WrappedEoInfoCardItem>
+```

package/docs/eo-loading-step.md

@@ -1,9 +1,45 @@
-加载步骤框
+---
+tagName: eo-loading-step
+displayName: EoLoadingStep
+description: 加载步骤框。以全屏遮罩的形式展示多步骤加载进度，适用于系统初始化、批量操作等需要阻塞用户交互的场景。
+category: ""
+source: "@next-bricks/presentational"
+---
+
+# eo-loading-step
+
+> 加载步骤框。以全屏遮罩的形式展示多步骤加载进度，适用于系统初始化、批量操作等需要阻塞用户交互的场景。
+
+## 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）。 |
+
+## Events
+
+| 事件  | 详情类型 | 说明                        |
+| ----- | -------- | --------------------------- |
+| open  | `void`   | 调用 `open()` 方法后触发。  |
+| close | `void`   | 调用 `close()` 方法后触发。 |
+
+## Methods
+
+| 方法  | 签名         | 说明                                                            |
+| ----- | ------------ | --------------------------------------------------------------- |
+| open  | `() => void` | 打开加载步骤框。将 `visible` 设为 `true` 并触发 `open` 事件。   |
+| close | `() => void` | 关闭加载步骤框。将 `visible` 设为 `false` 并触发 `close` 事件。 |
 
 ## Examples
 
 ### Basic
 
+展示一个多步骤加载进度框，`curStep` 为第二步时，第一步显示为已完成，第二步显示为加载中，其余步骤显示为待执行。
+
 ```yaml preview minHeight="600px"
 brick: eo-loading-step
 properties:
@@ -22,3 +58,62 @@ properties:
     - title: 即将前往基础设施监控, 请等待...
       key: fifth
 ```
+
+### Custom Width
+
+通过 `width` 属性自定义容器宽度。
+
+```yaml preview minHeight="600px"
+brick: eo-loading-step
+properties:
+  visible: true
+  width: "480px"
+  stepTitle: 正在初始化系统
+  curStep: step1
+  stepList:
+    - title: 正在检查环境依赖...
+      key: step1
+    - title: 正在加载配置文件...
+      key: step2
+    - title: 正在启动核心服务...
+      key: step3
+```
+
+### Open and Close via Methods
+
+通过按钮调用 `open()` 和 `close()` 方法控制加载步骤框的显隐，并监听 `open` 和 `close` 事件。
+
+```yaml preview minHeight="100px"
+brick: div
+children:
+  - brick: eo-button
+    properties:
+      type: primary
+      textContent: 打开加载框
+    events:
+      click:
+        target: "#loadingStep"
+        method: open
+  - brick: eo-loading-step
+    properties:
+      id: loadingStep
+      visible: false
+      stepTitle: 正在批量处理数据
+      curStep: task2
+      stepList:
+        - title: 正在读取数据源...
+          key: task1
+        - title: 正在处理数据...
+          key: task2
+        - title: 正在写入结果...
+          key: task3
+    events:
+      open:
+        action: console.log
+        args:
+          - 加载框已打开
+      close:
+        action: console.log
+        args:
+          - 加载框已关闭
+```