@next-bricks/presentational-bricks 1.339.0 → 1.339.2

package/dist/stories.json

@@ -5346,12 +5346,12 @@
       "id": "presentational-bricks.brick-result",
       "name": "presentational-bricks.brick-result",
       "dockind": "brick",
-      "description": "结果页面，可配置其状态，标题，次要标题和自定义图标",
+      "description": "结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画",
       "author": "ice",
       "slots": [
         {
           "name": "content",
-          "description": " 提供 content 插槽"
+          "description": " 提供 content 插槽，用于在结果页面下方放置自定义内容（如操作按钮、链接等）"
         }
       ],
       "history": [
@@ -5367,7 +5367,7 @@
           "type": "BrickResultStatus | EmptyResultStatus | IllustrationsStatus",
           "required": "true",
           "default": "-",
-          "description": "结果的状态, 决定图标和颜色；设置的值必须符合类型要求，否则返回空元素",
+          "description": "结果的状态，决定图标和颜色。支持三类值：BrickResultStatus（success/error/info/warning/404/403/500）显示 Ant Design 内置结果图标；EmptyResultStatus（empty/no-data/search-empty 等）显示空状态插画；设为 \"illustrations\" 时使用 illustrationsConfig 配置自定义插画。设置的值不符合任何类型时返回空元素",
           "group": "basic"
         },
         {
@@ -5397,7 +5397,7 @@
           "type": "IllustrationsConfig",
           "required": "false",
           "default": "{}",
-          "description": "自定义插画配置，size默认为middle，推荐使用size控制插画尺寸，可通过imageStyle覆盖size实现自定义大小（不推荐）",
+          "description": "自定义插画配置，仅当 status 为 \"illustrations\" 时生效。可通过 name 和 category 指定插画库图片，size 控制尺寸（默认 middle），imageStyle 覆盖样式（不推荐）",
           "group": "other"
         },
         {
@@ -5405,14 +5405,14 @@
           "type": "boolean",
           "required": "false",
           "default": "true",
-          "description": "在插画库的default分类下，使用新版本的图标替换default分类下图标",
+          "description": "是否使用新版插画替换插画库 default 分类下的图标，需配合特性开关 support-new-illustrations 及应用配置 supportNewIllustrations 启用",
           "group": "other"
         },
         {
           "name": "emptyResultSize",
           "type": "IconSize",
           "required": "false",
-          "description": "status为EmptyResultStatus时，设置插画的尺寸",
+          "description": "空结果插画的尺寸，仅当 status 为 EmptyResultStatus 类型时生效，可选值：small/middle/large/xlarge/unset，默认 middle",
           "group": "other"
         }
       ],
@@ -9853,13 +9853,13 @@
       "id": "presentational-bricks.brick-user",
       "name": "presentational-bricks.brick-user",
       "dockind": "brick",
-      "description": "展示用户头像加用户名",
+      "description": "展示用户头像和用户名的构件，支持昵称显示、showKey 显示、自定义 Tooltip 及头像大小和形状配置",
       "author": "ice",
       "slots": null,
       "history": [
         {
           "version": "1.152.0",
-          "change": "新属性 `shwNickname`"
+          "change": "新属性 `showNickname`"
         },
         {
           "version": "1.62.0",
@@ -9932,7 +9932,7 @@
         },
         {
           "name": "showNickname",
-          "type": "\"boolean\"",
+          "type": "boolean",
           "required": "false",
           "default": "false",
           "deprecated": true,
@@ -9940,24 +9940,24 @@
         },
         {
           "name": "showNicknameOrUsername",
-          "type": "\"boolean\"",
+          "type": "boolean",
           "required": "false",
           "default": "false",
           "description": "当有昵称时显示昵称，无昵称时显示用户名"
         },
         {
           "name": "displayShowKey",
-          "type": "\"boolean\"",
+          "type": "boolean",
           "required": "false",
           "default": "false",
-          "description": "是否显示 `showKey` ，如果有则显示`alan(hero)` or `alan`"
+          "description": "是否显示 showKey，启用后当用户拥有 showKey 时显示为 `name(showKey)` 格式（如 `alan(hero)`），否则仅显示用户名"
         },
         {
           "name": "iconMargin",
-          "type": "\"number\" | \"string\"",
+          "type": "number | string",
           "required": "false",
           "default": "0",
-          "description": "icon间距",
+          "description": "头像与用户名之间的间距，支持数字（像素）或 CSS 字符串（如 `\"0 8px\"`）",
           "group": "ui"
         },
         {
@@ -9965,7 +9965,7 @@
           "type": "string",
           "required": "false",
           "default": "-",
-          "description": "自定义toolTip替换字符串 例如：\"发起人：#{name}\"",
+          "description": "自定义 Tooltip 替换字符串，支持 `#{name}` 和 `#{showKey}` 占位符，例如 `\"发起人：#{name}\"`",
           "group": "basic"
         }
       ],
@@ -10495,7 +10495,7 @@
           "type": "boolean",
           "required": false,
           "default": "false",
-          "description": "文案是否超出隐藏",
+          "description": "文案超出时是否隐藏溢出文本并在鼠标悬停时显示 Tooltip",
           "group": "other"
         },
         {
@@ -10517,8 +10517,8 @@
       "events": [
         {
           "type": "brick-value-mapping.click",
-          "detail": "{ data: any; value: string | number }",
-          "description": "点击事件"
+          "detail": "{ data: 通过 dataSource 传入的附加数据, value: 当前映射的原始值 }",
+          "description": "点击事件，需设置 `triggerClickEvent` 为 true 才会触发"
         }
       ],
       "interface": []
@@ -12663,7 +12663,7 @@
       "id": "presentational-bricks.cost-time",
       "name": "presentational-bricks.cost-time",
       "dockind": "brick",
-      "description": "如：15秒、1天",
+      "description": "耗时展示构件，将毫秒级时间自动转换为人类可读的时间文本（如\"15秒\"、\"1天\"），支持直接传入耗时或通过起止时间自动计算",
       "author": "lynette",
       "slots": null,
       "history": null,
@@ -12680,21 +12680,21 @@
           "name": "startTime",
           "type": "string | number",
           "required": "false",
-          "description": "起始时间",
+          "description": "起始时间，与 endTime 配合使用，当未传入 cost 时自动计算耗时",
           "group": "basic"
         },
         {
           "name": "endTime",
           "type": "string | number",
           "required": "false",
-          "description": "结束时间",
+          "description": "结束时间，与 startTime 配合使用，当未传入 cost 时自动计算耗时",
           "group": "basic"
         },
         {
           "name": "unitStyle",
           "type": "CSSProperties",
           "required": "false",
-          "description": "单位样式",
+          "description": "时间单位文本的自定义样式，设置后将使用自定义渲染逻辑而非默认的 costTime 函数",
           "group": "ui"
         },
         {
@@ -12969,9 +12969,9 @@
         },
         {
           "name": "format",
-          "type": "number",
+          "type": "string",
           "required": "false",
-          "description": "日期格式",
+          "description": "自定义日期显示格式，例如 \"YYYY-MM-DD HH:mm:ss\"",
           "group": "other"
         },
         {
@@ -14643,7 +14643,7 @@
           "name": "href",
           "type": "string",
           "required": "false",
-          "description": "是否使用原生 <a> 标签，通常用于外链的跳转",
+          "description": "外链地址，使用原生 `<a>` 标签跳转，通常用于外部链接",
           "group": "advanced"
         },
         {
@@ -14665,8 +14665,8 @@
       "events": [
         {
           "type": "label.click",
-          "detail": "any",
-          "description": "点击 label 触发的事件，详情为编排者输入的 dataSource"
+          "detail": "编排者通过 `dataSource` 属性传入的自定义数据（若未设置则回退到已废弃的 `data` 属性）",
+          "description": "点击 label 时触发"
         }
       ],
       "interface": []

package/docs/brick-result.md

@@ -0,0 +1,197 @@
+---
+tagName: presentational-bricks.brick-result
+displayName: WrappedPresentationalBricksBrickResult
+description: 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画
+category:
+source: "@next-bricks/presentational-bricks"
+---
+
+# presentational-bricks.brick-result
+
+> 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画
+
+## Props
+
+| 属性                | 类型                                                            | 必填 | 默认值 | 说明                                                                                                                                                                                                                                                                                                  |
+| ------------------- | --------------------------------------------------------------- | ---- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| status              | `BrickResultStatus \| EmptyResultStatus \| IllustrationsStatus` | 是   | -      | 结果的状态，决定图标和颜色。支持三类值：BrickResultStatus（success/error/info/warning/404/403/500）显示 Ant Design 内置结果图标；EmptyResultStatus（empty/no-data/search-empty 等）显示空状态插画；设为 "illustrations" 时使用 illustrationsConfig 配置自定义插画。设置的值不符合任何类型时返回空元素 |
+| customTitle         | `string`                                                        | -    | -      | 主标题文字                                                                                                                                                                                                                                                                                            |
+| subTitle            | `string`                                                        | -    | -      | 次标题文字                                                                                                                                                                                                                                                                                            |
+| icon                | `string`                                                        | -    | -      | [自定义图标](https://ant.design/components/icon-cn/), 仅当 status 为 `BrickResultStatus` 时有效                                                                                                                                                                                                       |
+| illustrationsConfig | `IllustrationsConfig`                                           | -    | `{}`   | 自定义插画配置，仅当 status 为 "illustrations" 时生效。可通过 name 和 category 指定插画库图片，size 控制尺寸（默认 middle），imageStyle 覆盖样式（不推荐）                                                                                                                                            |
+| useNewIllustration  | `any`                                                           | -    | `true` | 是否使用新版插画替换插画库 default 分类下的图标，需配合特性开关 support-new-illustrations 及应用配置 supportNewIllustrations 启用                                                                                                                                                                     |
+| emptyResultSize     | `IconSize`                                                      | -    | -      | 空结果插画的尺寸，仅当 status 为 EmptyResultStatus 类型时生效，可选值：small/middle/large/xlarge/unset，默认 middle                                                                                                                                                                                   |
+
+## Slots
+
+| 名称    | 说明                                                                      |
+| ------- | ------------------------------------------------------------------------- |
+| content | 提供 content 插槽，用于在结果页面下方放置自定义内容（如操作按钮、链接等） |
+
+## Examples
+
+### Basic 基础用法
+
+#### 成功结果状态
+
+展示操作成功的结果页面。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: success
+  customTitle: 操作执行成功
+  subTitle: 任务已完成，请查看详情
+```
+
+#### 信息提示结果
+
+展示普通信息的结果页面，包含主标题和次标题。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: info
+  customTitle: 今天是星期二
+  subTitle: 2019/10/29 21:35
+```
+
+#### 警告结果并自定义图标
+
+展示警告状态的结果页面，并通过 icon 属性自定义图标。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: warning
+  customTitle: 今日有雨
+  subTitle: 明天天气会好转
+  icon: question
+```
+
+#### 404 结果并使用 content 插槽
+
+展示 404 状态的结果页面，并在 content 插槽中放置自定义内容。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: "404"
+  customTitle: HTTP 404
+slots:
+  content:
+    type: bricks
+    bricks:
+      - brick: div
+        properties:
+          style:
+            textAlign: center
+          textContent: 页面未找到，请检查链接地址
+```
+
+### Empty 空结果状态
+
+#### 空数据状态
+
+展示空数据的结果页面，使用 empty 状态。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: empty
+slots:
+  content:
+    type: bricks
+    bricks:
+      - brick: div
+        properties:
+          style:
+            textAlign: center
+          textContent: 请前往首页进行创建
+```
+
+#### 搜索结果为空
+
+展示搜索无结果的状态页面。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: search-empty
+slots:
+  content:
+    type: bricks
+    bricks:
+      - brick: div
+        properties:
+          style:
+            textAlign: center
+          textContent: 搜索为空
+```
+
+#### 空结果自定义尺寸
+
+通过 emptyResultSize 控制空结果插画的尺寸大小。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: no-data
+  customTitle: 暂无数据
+  emptyResultSize: large
+```
+
+### Illustrations 自定义插画
+
+#### 使用插画库自定义插画
+
+status 设为 illustrations 时启用自定义插画模式，通过 illustrationsConfig 的 name 和 category 指定插画。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: illustrations
+  illustrationsConfig:
+    name: search-empty
+    category: default
+    imageStyle:
+      width: 250px
+slots:
+  content:
+    type: bricks
+    bricks:
+      - brick: div
+        properties:
+          style:
+            textAlign: center
+          textContent: 搜索为空
+```
+
+#### 自定义插画尺寸
+
+通过 illustrationsConfig 的 size 属性控制插画尺寸。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: illustrations
+  customTitle: 暂无内容
+  illustrationsConfig:
+    name: no-content
+    category: easyops2
+    size: small
+```
+
+### Advanced 高级用法
+
+#### 关闭新版插画
+
+通过 useNewIllustration 设为 false 关闭新版插画替换。
+
+```yaml preview
+brick: presentational-bricks.brick-result
+properties:
+  status: empty
+  customTitle: 暂无数据
+  useNewIllustration: false
+```

package/docs/brick-result.react.md

@@ -0,0 +1,177 @@
+---
+tagName: presentational-bricks.brick-result
+displayName: WrappedPresentationalBricksBrickResult
+description: 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画
+category:
+source: "@next-bricks/presentational-bricks"
+---
+
+# WrappedPresentationalBricksBrickResult
+
+> 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画
+
+## 导入
+
+```tsx
+import { WrappedPresentationalBricksBrickResult } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                | 类型                                                            | 必填 | 默认值 | 说明                                                                                                                                                                                                                                                                                                  |
+| ------------------- | --------------------------------------------------------------- | ---- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| status              | `BrickResultStatus \| EmptyResultStatus \| IllustrationsStatus` | 是   | -      | 结果的状态，决定图标和颜色。支持三类值：BrickResultStatus（success/error/info/warning/404/403/500）显示 Ant Design 内置结果图标；EmptyResultStatus（empty/no-data/search-empty 等）显示空状态插画；设为 "illustrations" 时使用 illustrationsConfig 配置自定义插画。设置的值不符合任何类型时返回空元素 |
+| customTitle         | `string`                                                        | -    | -      | 主标题文字                                                                                                                                                                                                                                                                                            |
+| subTitle            | `string`                                                        | -    | -      | 次标题文字                                                                                                                                                                                                                                                                                            |
+| icon                | `string`                                                        | -    | -      | [自定义图标](https://ant.design/components/icon-cn/), 仅当 status 为 `BrickResultStatus` 时有效                                                                                                                                                                                                       |
+| illustrationsConfig | `IllustrationsConfig`                                           | -    | `{}`   | 自定义插画配置，仅当 status 为 "illustrations" 时生效。可通过 name 和 category 指定插画库图片，size 控制尺寸（默认 middle），imageStyle 覆盖样式（不推荐）                                                                                                                                            |
+| useNewIllustration  | `any`                                                           | -    | `true` | 是否使用新版插画替换插画库 default 分类下的图标，需配合特性开关 support-new-illustrations 及应用配置 supportNewIllustrations 启用                                                                                                                                                                     |
+| emptyResultSize     | `IconSize`                                                      | -    | -      | 空结果插画的尺寸，仅当 status 为 EmptyResultStatus 类型时生效，可选值：small/middle/large/xlarge/unset，默认 middle                                                                                                                                                                                   |
+
+## Slots
+
+| 名称    | 说明                                                                      |
+| ------- | ------------------------------------------------------------------------- |
+| content | 提供 content 插槽，用于在结果页面下方放置自定义内容（如操作按钮、链接等） |
+
+## Examples
+
+### Basic 基础用法
+
+#### 成功结果状态
+
+展示操作成功的结果页面。
+
+```tsx
+<WrappedPresentationalBricksBrickResult
+  status="success"
+  customTitle="操作执行成功"
+  subTitle="任务已完成，请查看详情"
+/>
+```
+
+#### 信息提示结果
+
+展示普通信息的结果页面，包含主标题和次标题。
+
+```tsx
+<WrappedPresentationalBricksBrickResult
+  status="info"
+  customTitle="今天是星期二"
+  subTitle="2019/10/29 21:35"
+/>
+```
+
+#### 警告结果并自定义图标
+
+展示警告状态的结果页面，并通过 icon 属性自定义图标。
+
+```tsx
+<WrappedPresentationalBricksBrickResult
+  status="warning"
+  customTitle="今日有雨"
+  subTitle="明天天气会好转"
+  icon="question"
+/>
+```
+
+#### 404 结果并使用 content 插槽
+
+展示 404 状态的结果页面，并在 content 插槽中放置自定义内容。
+
+```tsx
+<WrappedPresentationalBricksBrickResult status="404" customTitle="HTTP 404">
+  <div slot="content" style={{ textAlign: "center" }}>
+    页面未找到，请检查链接地址
+  </div>
+</WrappedPresentationalBricksBrickResult>
+```
+
+### Empty 空结果状态
+
+#### 空数据状态
+
+展示空数据的结果页面，使用 empty 状态。
+
+```tsx
+<WrappedPresentationalBricksBrickResult status="empty">
+  <div slot="content" style={{ textAlign: "center" }}>
+    请前往首页进行创建
+  </div>
+</WrappedPresentationalBricksBrickResult>
+```
+
+#### 搜索结果为空
+
+展示搜索无结果的状态页面。
+
+```tsx
+<WrappedPresentationalBricksBrickResult status="search-empty">
+  <div slot="content" style={{ textAlign: "center" }}>
+    搜索为空
+  </div>
+</WrappedPresentationalBricksBrickResult>
+```
+
+#### 空结果自定义尺寸
+
+通过 emptyResultSize 控制空结果插画的尺寸大小。
+
+```tsx
+<WrappedPresentationalBricksBrickResult
+  status="no-data"
+  customTitle="暂无数据"
+  emptyResultSize="large"
+/>
+```
+
+### Illustrations 自定义插画
+
+#### 使用插画库自定义插画
+
+status 设为 illustrations 时启用自定义插画模式，通过 illustrationsConfig 的 name 和 category 指定插画。
+
+```tsx
+<WrappedPresentationalBricksBrickResult
+  status="illustrations"
+  illustrationsConfig={{
+    name: "search-empty",
+    category: "default",
+    imageStyle: { width: "250px" },
+  }}
+>
+  <div slot="content" style={{ textAlign: "center" }}>
+    搜索为空
+  </div>
+</WrappedPresentationalBricksBrickResult>
+```
+
+#### 自定义插画尺寸
+
+通过 illustrationsConfig 的 size 属性控制插画尺寸。
+
+```tsx
+<WrappedPresentationalBricksBrickResult
+  status="illustrations"
+  customTitle="暂无内容"
+  illustrationsConfig={{
+    name: "no-content",
+    category: "easyops2",
+    size: "small",
+  }}
+/>
+```
+
+### Advanced 高级用法
+
+#### 关闭新版插画
+
+通过 useNewIllustration 设为 false 关闭新版插画替换。
+
+```tsx
+<WrappedPresentationalBricksBrickResult
+  status="empty"
+  customTitle="暂无数据"
+  useNewIllustration={false}
+/>
+```