添加匹配度等相关文案

site/theme/en-US.js

@@ -118,5 +118,9 @@ module.exports = {
       'Click or drag or paste file to this area to upload',
     'app.docs.components.icon.pic-searcher.server-error':
       'Predict service is temporarily unavailable',
+    'app.docs.components.icon.pic-searcher.matching': 'Matching...',
+    'app.docs.components.icon.pic-searcher.result-tip': 'Match the following icons for you:',
+    'app.docs.components.icon.pic-searcher.th-icon': 'Icon',
+    'app.docs.components.icon.pic-searcher.th-score': 'Probability',
   },
 };

site/theme/static/icon-pic-searcher.less

@@ -29,18 +29,23 @@
 }
 
 .icon-pic-search-result {
-  margin-top: 10px;
+  margin-top: 20px;
+  padding: 0 10px;
+  > .result-tip {
+    padding: 10px 0;
+    color: @text-color-secondary;
+  }
+  > table {
+    width: 100%;
+    .col-icon {
+      width: 80px;
+      padding: 10px 0;
+      > i {
+        font-size: 30px;
 
-  > div {
-    display: flex;
-    align-items: center;
-
-    > i {
-      margin: 10px 20px 10px 0;
-      font-size: 30px;
-
-      :hover {
-        color: @link-hover-color;
+        :hover {
+          color: @link-hover-color;
+        }
       }
     }
   }

site/theme/template/IconDisplay/IconPicSearcher.tsx

@@ -134,18 +134,37 @@ class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
               {messages['app.docs.components.icon.pic-searcher.placeholder']}
             </p>
           </Dragger>
-          <Spin spinning={loading}>
+          <Spin spinning={loading} tip={messages['app.docs.components.icon.pic-searcher.matching']}>
             <div className="icon-pic-search-result">
-              {icons.map((icon: iconObject) => (
-                <div key={icon.type}>
-                  <CopyToClipboard text={`<Icon type="${icon.type}" />`} onCopy={this.onCopied}>
-                    <Tooltip title={icon.type} placement="right">
-                      <Icon type={icon.type} />
-                    </Tooltip>
-                  </CopyToClipboard>
-                  <Progress percent={Math.ceil(icon.score * 100)} />
+              {icons.length > 0 && (
+                <div className="result-tip">
+                  {messages['app.docs.components.icon.pic-searcher.result-tip']}
                 </div>
-              ))}
+              )}
+              <table>
+                {icons.length > 0 && (
+                  <tr>
+                    <th className="col-icon">
+                      {messages['app.docs.components.icon.pic-searcher.th-icon']}
+                    </th>
+                    <th>{messages['app.docs.components.icon.pic-searcher.th-score']}</th>
+                  </tr>
+                )}
+                {icons.map((icon: iconObject) => (
+                  <tr key={icon.type}>
+                    <td className="col-icon">
+                      <CopyToClipboard text={`<Icon type="${icon.type}" />`} onCopy={this.onCopied}>
+                        <Tooltip title={icon.type} placement="right">
+                          <Icon type={icon.type} />
+                        </Tooltip>
+                      </CopyToClipboard>
+                    </td>
+                    <td>
+                      <Progress percent={Math.ceil(icon.score * 100)} />
+                    </td>
+                  </tr>
+                ))}
+              </table>
             </div>
           </Spin>
         </Modal>

site/theme/zh-CN.js

@@ -112,5 +112,9 @@ module.exports = {
     'app.docs.components.icon.pic-searcher.title': '按图片搜索',
     'app.docs.components.icon.pic-searcher.placeholder': '点击/拖拽/粘贴上传',
     'app.docs.components.icon.pic-searcher.server-error': '识别服务暂不可用',
+    'app.docs.components.icon.pic-searcher.matching': '匹配中...',
+    'app.docs.components.icon.pic-searcher.result-tip': '为您匹配到以下图标：',
+    'app.docs.components.icon.pic-searcher.th-icon': '图标',
+    'app.docs.components.icon.pic-searcher.th-score': '匹配度',
   },
 };