服务不可用提示

site/theme/en-US.js

@@ -114,5 +114,7 @@ module.exports = {
     'app.docs.components.icon.pic-searcher.title': 'Search by image',
     'app.docs.components.icon.pic-searcher.placeholder':
       'Click or drag or paste file to this area to upload',
+    'app.docs.components.icon.pic-searcher.server-error':
+      'Predict service is temporarily unavailable',
   },
 };

site/theme/template/IconDisplay/IconPicSearcher.tsx

@@ -68,21 +68,29 @@ class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
   };
 
   predict = async (imageBase64: any) => {
+    const {
+      intl: { messages },
+    } = this.props;
     this.setState(() => ({ loading: true }));
-    const res = await fetch(
-      '//1647796581073291.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/cr-sh.cr-fc-predict__stable/cr-fc-predict/',
-      {
-        method: 'post',
-        body: JSON.stringify({
-          modelId: 'data_icon',
-          type: 'ic',
-          imageBase64,
-        }),
-      },
-    );
-    let icons = await res.json();
-    icons = icons.map((i: any) => ({ score: i.score, type: i.class_name.replace(/\s/g, '-') }));
-    this.setState(() => ({ icons, loading: false }));
+    try {
+      const res = await fetch(
+        '//1647796581073291.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/cr-sh.cr-fc-predict__stable/cr-fc-predict/',
+        {
+          method: 'post',
+          body: JSON.stringify({
+            modelId: 'data_icon',
+            type: 'ic',
+            imageBase64,
+          }),
+        },
+      );
+      let icons = await res.json();
+      icons = icons.map((i: any) => ({ score: i.score, type: i.class_name.replace(/\s/g, '-') }));
+      this.setState(() => ({ icons, loading: false }));
+    } catch (err) {
+      message.error(messages['app.docs.components.icon.pic-searcher.server-error']);
+      this.setState(() => ({ loading: false }));
+    }
   };
 
   toggleModal = () => {

site/theme/zh-CN.js

@@ -110,5 +110,6 @@ module.exports = {
     'app.docs.components.icon.category.logo': '品牌和标识',
     'app.docs.components.icon.pic-searcher.title': '按图片搜索',
     'app.docs.components.icon.pic-searcher.placeholder': '点击/拖拽/粘贴上传',
+    'app.docs.components.icon.pic-searcher.server-error': '识别服务暂不可用',
   },
 };