基本样式完成

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

@@ -0,0 +1,42 @@
+.icon-pic-searcher {
+  margin: 1px 8px;
+  display: inline-block;
+
+  .icon-pic-btn {
+    color: rgba(0, 0, 0, 0.45);
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.8);
+    }
+  }
+}
+
+.icon-pic-preview {
+  width: 66px;
+  height: 66px;
+  padding: 8px;
+  margin-top: 10px;
+  text-align: center;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  > img {
+    max-width: 50px;
+    max-height: 50px;
+  }
+}
+
+.icon-pic-search-result {
+  padding: 20px 10px 0px 0px;
+
+  > div {
+    display: flex;
+    align-items: center;
+
+    > i {
+      margin: 10px 20px 10px 0;
+      font-size: 30px;
+    }
+  }
+}

site/theme/static/index.less

@@ -14,6 +14,7 @@
 @import './demo';
 @import './colors';
 @import './icons';
+@import './icon-pic-searcher';
 @import './mock-browser';
 @import './new-version-info-modal';
 @import './motion';

site/theme/template/IconDisplay/IconPicSearcher.tsx

@@ -0,0 +1,143 @@
+import React, { Component } from 'react';
+import { Upload, Tooltip, Icon, Modal, Progress, message } from 'antd';
+
+const { Dragger } = Upload;
+
+interface PicSearcherProps {}
+
+interface PicSearcherState {
+  loading: Boolean;
+  modalVisible: Boolean;
+  icons: Array<string>;
+  justCopied: string | null;
+  fileList: Array<any>;
+}
+
+interface iconObject {
+  class_name: string;
+  score: number;
+}
+
+class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
+  copyId?: number;
+
+  state = {
+    loading: false,
+    modalVisible: false,
+    icons: [],
+    justCopied: null,
+    fileList: [],
+  };
+
+  componentDidMount() {
+    document.addEventListener('paste', this.onPaste);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('paste', this.onPaste);
+    window.clearTimeout(this.copyId);
+  }
+
+  onCopied = (type: string, text: string) => {
+    message.success(
+      <span>
+        <code className="copied-code">{text}</code> copied 🎉
+      </span>,
+    );
+    this.setState({ justCopied: type }, () => {
+      this.copyId = window.setTimeout(() => {
+        this.setState({ justCopied: null });
+      }, 2000);
+    });
+  };
+
+  onPaste = (event: ClipboardEvent) => {
+    const items = event.clipboardData && event.clipboardData.items;
+    let file = null;
+    if (items && items.length) {
+      for (let i = 0; i < items.length; i += 1) {
+        if (items[i].type.indexOf('image') !== -1) {
+          file = items[i].getAsFile();
+          break;
+        }
+      }
+    }
+    if (file) this.uploadFile(file);
+  };
+
+  uploadFile = (file: File) => {
+    const reader: FileReader = new FileReader();
+    reader.onload = () => {
+      this.predict(reader.result);
+      this.setState(() => ({
+        fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }],
+      }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  predict = async (imageBase64: any) => {
+    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,
+        }),
+      },
+    );
+    const icons = await res.json();
+    console.log(icons);
+    this.setState(() => ({ icons, loading: false }));
+  };
+
+  toggleModal = () => {
+    this.setState(prev => ({ modalVisible: !prev.modalVisible }));
+  };
+
+  customRequest = (options: any) => {
+    this.uploadFile(options.file);
+  };
+
+  render() {
+    const { modalVisible, icons, fileList } = this.state;
+    return (
+      <div className="icon-pic-searcher">
+        <Tooltip title="截图搜索，支持 CTL+V 粘贴图片" visible>
+          <Icon type="camera" className="icon-pic-btn" onClick={this.toggleModal} />
+        </Tooltip>
+        <Modal
+          title="截图搜索"
+          visible={modalVisible}
+          onOk={this.toggleModal}
+          onCancel={this.toggleModal}
+        >
+          <Dragger
+            listType="picture"
+            customRequest={this.customRequest}
+            fileList={fileList}
+            showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
+          >
+            <p className="ant-upload-drag-icon">
+              <Icon type="inbox" />
+            </p>
+            <p className="ant-upload-text">点击/拖拽/粘贴上传</p>
+          </Dragger>
+          <div className="icon-pic-search-result">
+            {icons.map((icon: iconObject) => (
+              <div key={icon.class_name}>
+                <Icon type={icon.class_name.replace(/\s/g, '-')} />
+                <Progress percent={Math.ceil(icon.score * 100)} />
+              </div>
+            ))}
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default PicSearcher;

site/theme/template/IconDisplay/index.tsx

@@ -7,6 +7,7 @@ import { injectIntl } from 'react-intl';
 import debounce from 'lodash/debounce';
 import { ThemeType } from 'antd/es/icon';
 import Category from './Category';
+import IconPicSearcher from './IconPicSearcher';
 import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
 import categories, { Categories, CategoriesKeys } from './fields';
 
@@ -124,6 +125,7 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
             onChange={e => this.handleSearchIcon(e.currentTarget.value)}
             size="large"
             autoFocus
+            suffix={<IconPicSearcher />}
           />
         </div>
         {this.renderCategories(list)}