添加匹配度等相关文案

pl2476 · Aug 22, 2019 · 3ac8f09 · 3ac8f09
1 parent 9425048
commit 3ac8f09
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 22 deletions.
diff --git a/site/theme/en-US.js b/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',
   },
 };
diff --git a/site/theme/static/icon-pic-searcher.less b/site/theme/static/icon-pic-searcher.less
@@ -29,18 +29,23 @@
 }
 
 .icon-pic-search-result {
-  margin-top: 10px;
-
-  > div {
-    display: flex;
-    align-items: center;
-
-    > i {
-      margin: 10px 20px 10px 0;
-      font-size: 30px;
-
-      :hover {
-        color: @link-hover-color;
+  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;
+
+        :hover {
+          color: @link-hover-color;
+        }
       }
     }
   }

diff --git a/site/theme/template/IconDisplay/IconPicSearcher.tsx b/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>

diff --git a/site/theme/zh-CN.js b/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': '匹配度',
   },
 };