feat: Service组件支持隐藏错误提示 (#6431)

Author: lurunze1226

docs/zh-CN/components/service.md

@@ -677,6 +677,45 @@ ws.on('connection', function connection(ws) {
 }
 ```
 
+## 隐藏错误信息
+
+> 2.8.1 及以上版本
+
+默认会将接口返回的错误信息展示在 Service 的顶部区域，可以通过设置`"showErrorMsg": false`隐藏错误提示。
+
+```schema: scope="body"
+{
+  "type": "service",
+  "api": "/api/mock2/page/initDataError",
+  "body": [
+    {
+      "type": "tpl",
+      "tpl": "展示错误信息"
+    },
+    {
+      "type": "icon",
+      "icon": "fa-solid fa-arrow-up"
+    }
+  ]
+}
+```
+
+设置`"showErrorMsg": false`隐藏错误提示，仅保留 toast 提示
+
+```schema: scope="body"
+{
+  "type": "service",
+  "api": "/api/mock2/page/initDataError",
+  "showErrorMsg": false,
+  "body": [
+    {
+      "type": "tpl",
+      "tpl": "不展示错误信息"
+    }
+  ]
+}
+```
+
 ## 属性表
 
 | 属性名                | 类型                                                                                            | 默认值         | 说明                                                                          | 版本                                                                                    |
@@ -696,6 +735,7 @@ ws.on('connection', function connection(ws) {
 | interval              | `number`                                                                                        |                | 轮询时间间隔，单位 ms(最低 1000)                                              |
 | silentPolling         | `boolean`                                                                                       | `false`        | 配置轮询时是否显示加载动画                                                    |
 | stopAutoRefreshWhen   | [表达式](../../docs/concepts/expression)                                                        |                | 配置停止轮询的条件                                                            |
+| showErrorMsg          | `boolean`                                                                                       |       `true`         | 是否以Alert的形式显示api接口响应的错误信息，默认展示                                                            | `2.8.1` |
 
 ## 事件表
 

packages/amis/src/renderers/Service.tsx

@@ -12,7 +12,7 @@ import {
   isEffectiveApi,
   str2AsyncFunction
 } from 'amis-core';
-import {Spinner, SpinnerExtraProps} from 'amis-ui';
+import {Spinner, SpinnerExtraProps, Alert2 as Alert} from 'amis-ui';
 import {
   autobind,
   isObject,
@@ -138,6 +138,11 @@ export interface ServiceSchema extends BaseSchema, SpinnerExtraProps {
   messages?: SchemaMessage;
 
   name?: SchemaName;
+
+  /**
+   * 是否以Alert的形式显示api接口响应的错误信息，默认展示
+   */
+  showErrorMsg?: boolean;
 }
 
 export interface ServiceProps
@@ -162,7 +167,8 @@ export default class Service extends React.Component<ServiceProps> {
   static defaultProps: Partial<ServiceProps> = {
     messages: {
       fetchFailed: 'fetchFailed'
-    }
+    },
+    showErrorMsg: true
   };
 
   static propsList: Array<string> = [];
@@ -736,22 +742,20 @@ export default class Service extends React.Component<ServiceProps> {
       render,
       classPrefix: ns,
       classnames: cx,
-      loadingConfig
+      loadingConfig,
+      showErrorMsg
     } = this.props;
 
     return (
       <div className={cx(`${ns}Service`, className)} style={style}>
-        {store.error ? (
-          <div className={cx(`Alert Alert--danger`)}>
-            <button
-              className={cx('Alert-close')}
-              onClick={() => store.updateMessage('')}
-              type="button"
-            >
-              <span>×</span>
-            </button>
+        {store.error && showErrorMsg !== false ? (
+          <Alert
+            level="danger"
+            showCloseButton
+            onClose={() => store.updateMessage('')}
+          >
             {store.msg}
-          </div>
+          </Alert>
         ) : null}
 
         {this.renderBody()}