feat: 选择图标组件

@@ -19,5 +19,6 @@ export * from './qx-search-input';
 export * from './qx-dynamic-component';
 export * from './qx-widget-icon';
 export * from './qx-flow-node-selector';
+export * from './qx-icon-selector';
 
 

+// 图标形态
+export enum ICON_SHAPE {
+  line = '线性',
+  fill = '面性',
+}
+
+// 图标所属分类
+export const ICON_CLASSIFY: any = {
+  // media: '媒体',
+  logo: 'Logo',
+  file: '文件',
+  education: '教育',
+  // editor: '编辑',
+  device: '设备',
+  development: '研发',
+  design: '设计',
+  map: '地图',
+  building: '建筑',
+  business: '商业',
+  contact: '联络',
+  system: '系统',
+  user: '用户',
+  transport: '交通',
+  weather: '天气',
+};
+
+export const BG_COLORS: string[] = [
+  // '#F5212C',
+  // '#FA541C',
+  // '#FAAD14',
+  // '#ED7B2E',
+  // '#10C2C2',
+  // '#00A870',
+  // '#EC49B4',
+  // '#834EC2',
+  // '#242835',
+  '#FC6746',
+  '#1FBCD2',
+  '#FD9727',
+  '#50AE55',
+  '#B81E51',
+  '#4054B2',
+  '#465A63',
+];
+
+export const FORM_GROUP: any = {
+  form: 'icon-app-file-fill',
+  group: 'icon-app-folder-2-fill',
+  report: 'icon-app-shuju',
+  url: 'icon-app-share-forward-fill',
+  page: 'icon-app-presentation-2-fill',
+  dataset: 'icon-app-coin-2-fill',
+  datasetCube: 'icon-app-box-3-fill',
+};
+
+export const ICONS: any = {
+  system: [
+    'icon-app-add-circle',
+    'icon-app-alert',
+    'icon-app-alert-octagon',
+    'icon-app-brush',
+    'icon-app-certificate',
+    'icon-app-check-circle',
+    'icon-app-close-circle',
+    'icon-app-database',
+    'icon-app-delete-back',
+    'icon-app-door',
+    'icon-app-earlywarning',
+    'icon-app-entrance',
+    'icon-app-exit',
+    'icon-app-eye-close',
+    'icon-app-filter-2',
+    'icon-app-forbid-circle',
+    'icon-app-grid-2',
+    'icon-app-grid',
+    'icon-app-key-1',
+    'icon-app-lock',
+    'icon-app-minus-circle',
+    'icon-app-open-door',
+    'icon-app-open',
+    'icon-app-power',
+    'icon-app-question',
+    'icon-app-restore',
+    'icon-app-setting-4',
+    'icon-app-settings-1',
+    'icon-app-settings-2',
+    'icon-app-share-2',
+    'icon-app-share-3',
+    'icon-app-share-forward',
+    'icon-app-shield-2',
+    'icon-app-shield-3',
+    'icon-app-shield-4',
+    'icon-app-shield',
+    'icon-app-smile',
+    'icon-app-t-shirt',
+    'icon-app-thumb-down',
+    'icon-app-thumb-up',
+    'icon-app-time',
+    'icon-app-version',
+    'icon-app-warning',
+  ],
+  device: [
+    'icon-app-alarm-2',
+    'icon-app-airplay',
+    'icon-app-alarm-1',
+    'icon-app-battery-charging',
+    'icon-app-battery',
+    'icon-app-bluetooth',
+    'icon-app-bluetooth-off',
+    'icon-app-bulb',
+    'icon-app-ceiling-lamp',
+    'icon-app-cellphone',
+    'icon-app-cellphone-vibration',
+    'icon-app-chip',
+    'icon-app-computer-camera',
+    'icon-app-computer',
+    'icon-app-dashboaricon-app',
+    'icon-app-desk-lamp',
+    'icon-app-device',
+    'icon-app-flash',
+    'icon-app-fridge',
+    'icon-app-laptop',
+    'icon-app-microscope',
+    'icon-app-paicon-app',
+    'icon-app-plugin',
+    'icon-app-print',
+    'icon-app-qrcode',
+    'icon-app-radar-2',
+    'icon-app-radar',
+    'icon-app-radio',
+    'icon-app-sandglass',
+    'icon-app-scan-2',
+    'icon-app-scan',
+    'icon-app-telescope',
+    'icon-app-tv-1',
+    'icon-app-tv-2',
+    'icon-app-wifi',
+    'icon-app-wifi-off',
+  ],
+  user: [
+    'icon-app-user-1',
+    'icon-app-user-2',
+    'icon-app-user-4',
+    'icon-app-user-5',
+    'icon-app-badge',
+    'icon-app-contacts',
+    'icon-app-male',
+    'icon-app-female',
+    'icon-app-group',
+    'icon-app-IDcard',
+    'icon-app-user-add',
+    'icon-app-user-follow',
+    'icon-app-user-remove',
+  ],
+  business: [
+    'icon-app-auction',
+    'icon-app-award',
+    'icon-app-bank-card',
+    'icon-app-basket',
+    'icon-app-block',
+    'icon-app-calendar',
+    'icon-app-chart-bar',
+    'icon-app-chart-line',
+    'icon-app-coin-2',
+    'icon-app-coin',
+    'icon-app-copper-coin',
+    'icon-app-copyright',
+    'icon-app-coupon',
+    'icon-app-currency-bitcoin-2',
+    'icon-app-currency-cny',
+    'icon-app-currency-dollar',
+    'icon-app-currency-euro',
+    'icon-app-flag-1',
+    'icon-app-flag-3',
+    'icon-app-luggage',
+    'icon-app-medal',
+    'icon-app-presentation-2',
+    'icon-app-red-packet',
+    'icon-app-red-packet-open',
+    'icon-app-safe-box',
+    'icon-app-seal',
+    'icon-app-shopping-bag-1',
+    'icon-app-shopping-cart-2',
+    'icon-app-tag',
+    'icon-app-target',
+    'icon-app-trophy',
+    'icon-app-vip-1',
+    'icon-app-vip-2',
+    'icon-app-vip-3',
+    'icon-app-wallet-2',
+    'icon-app-wallet',
+    'icon-app-service',
+  ],
+  building: [
+    'icon-app-bridge',
+    'icon-app-building-1',
+    'icon-app-building-4',
+    'icon-app-campground',
+    'icon-app-factory',
+    'icon-app-greatwall',
+    'icon-app-home-1',
+    'icon-app-home-2',
+    'icon-app-home-3',
+    'icon-app-home-4',
+    'icon-app-lighthouse',
+    'icon-app-monument',
+    'icon-app-pavilon',
+    'icon-app-store',
+    'icon-app-tower',
+  ],
+  file: [
+    'icon-app-attachment',
+    'icon-app-box-2',
+    'icon-app-box-3',
+    'icon-app-box',
+    'icon-app-clipboard',
+    'icon-app-copy',
+    'icon-app-docment',
+    'icon-app-download-2',
+    'icon-app-download',
+    'icon-app-file-download',
+    'icon-app-file-export',
+    'icon-app-file',
+    'icon-app-file-import',
+    'icon-app-file-new',
+    'icon-app-file-zip',
+    'icon-app-folder-2',
+    'icon-app-link-2',
+    'icon-app-paper',
+    'icon-app-pic',
+    'icon-app-save',
+    'icon-app-search-1',
+    'icon-app-search',
+    'icon-app-unlink-2',
+    'icon-app-upload-2',
+    'icon-app-upload-3',
+    'icon-app-upload',
+    'icon-app-zoom-in',
+    'icon-app-zoom-out',
+  ],
+  education: [
+    'icon-app-book-2',
+    'icon-app-book-4',
+    'icon-app-book-5',
+    'icon-app-book',
+    'icon-app-bookmark',
+    'icon-app-desk',
+    'icon-app-flask-2',
+    'icon-app-flask',
+    'icon-app-globe',
+    'icon-app-mortarboard',
+    'icon-app-science',
+    'icon-app-diary',
+  ],
+  contact: [
+    'icon-app-chat-1',
+    'icon-app-chat-2',
+    'icon-app-chat-3',
+    'icon-app-invite',
+    'icon-app-mail-send',
+    'icon-app-message-1',
+    'icon-app-message-2',
+    'icon-app-message-4',
+  ],
+  transport: [
+    'icon-app-airplane',
+    'icon-app-baby-carriage',
+    'icon-app-bus',
+    'icon-app-car-2',
+    'icon-app-charging-pilen',
+    'icon-app-ebike',
+    'icon-app-flighicon-app-land',
+    'icon-app-flighicon-app-takeoff',
+    'icon-app-gas-station',
+    'icon-app-riding',
+    'icon-app-run',
+    'icon-app-scooter',
+    'icon-app-ship',
+    'icon-app-train-2',
+    'icon-app-train',
+    'icon-app-truck',
+    'icon-app-ufo',
+    'icon-app-walk',
+  ],
+  development: [
+    'icon-app-braces',
+    'icon-app-bug',
+    'icon-app-code',
+    'icon-app-cursor',
+    'icon-app-department',
+    'icon-app-directory',
+    'icon-app-git-commit',
+    'icon-app-git-compare',
+    'icon-app-git-pull-request-close',
+    'icon-app-git-pull-request',
+    'icon-app-performance',
+    'icon-app-terminal-box',
+    'icon-app-terminal',
+    'icon-app-web',
+  ],
+  design: [
+    'icon-app-anticlockwise',
+    'icon-app-bling',
+    'icon-app-brightness',
+    'icon-app-clockwise',
+    'icon-app-color-filter',
+    'icon-app-layout',
+    'icon-app-mosaic',
+    'icon-app-paint-2',
+    'icon-app-palette-2',
+    'icon-app-paster',
+    'icon-app-quill-pen',
+    'icon-app-ruler',
+    'icon-app-scale',
+    'icon-app-edit-3',
+    'icon-app-tablicon-app',
+  ],
+  weather: [
+    'icon-app-cloud-lightning',
+    'icon-app-cloud-snoicon-app',
+    'icon-app-lightning',
+    'icon-app-moon-cloudy',
+    'icon-app-moon',
+    'icon-app-rain',
+    'icon-app-sun-cloudy',
+    'icon-app-sun',
+    'icon-app-sunrise',
+    'icon-app-sunset',
+    'icon-app-thermometer',
+    'icon-app-typhoon',
+    'icon-app-umbrella',
+    'icon-app-wind',
+  ],
+  logo: [
+    'icon-app-alipay',
+    'icon-app-android-2',
+    'icon-app-android',
+    'icon-app-apple',
+    'icon-app-chrome',
+    'icon-app-dingding',
+    'icon-app-messenger',
+    'icon-app-moment',
+    'icon-app-qiyeweixin',
+    'icon-app-telegram',
+    'icon-app-wechat',
+    'icon-app-windows',
+  ],
+  map: [
+    'icon-app-compass',
+    'icon-app-earth',
+    'icon-app-location-2',
+    'icon-app-map',
+    'icon-app-navigation',
+    'icon-app-route',
+    'icon-app-world-2',
+  ],
+};
+
+export const MAP_OLD_ICONS: any = {
+  'icon-shiming': '',
+  'icon-pingtai': '',
+  'icon-feiji': '',
+  'icon-hezuo': '',
+  'icon-yinhang': '',
+  'icon-wenjianbao': '',
+  'icon-pailie': '',
+  'icon-app-caigou': 'icon-app-shopping-cart-2-fill',
+  'icon-app-qudao': 'icon-app-department-fill',
+  'icon-app-renqun': 'icon-app-group-fill',
+  'icon-app-kefu': 'icon-app-service-fill',
+  'icon-app-anquan': 'icon-app-shield-3-fill',
+  'icon-app-wangluo': '',
+  'icon-app-pachong': '',
+  'icon-app-hexin': 'icon-app-science-fill',
+  'icon-app-erweima': 'icon-app-qrcode-fill',
+  'icon-app-shujujiankong': 'icon-app-presentation-2-fill',
+  'icon-app-xingneng': 'icon-app-chip-fill',
+  'icon-app-jiankong': 'icon-app-computer-camera-fill',
+  'icon-app-quanqiu': 'icon-app-world-2-fill',
+  'icon-app-qizhi': 'icon-app-flag-1-fill',
+  'icon-app-zhenshikexin': 'icon-app-certificate-fill',
+  'icon-app-jiangzhang': 'icon-app-award-fill',
+  'icon-app-daikuan': 'icon-app-wallet-2-fill',
+  'icon-app-yusan': 'icon-app-umbrella-fill',
+  'icon-app-xiajia': '',
+  'icon-app-naozhong': 'icon-app-alarm-1-fill',
+  'icon-app-mima': '',
+  'icon-app-fangxiang': 'icon-app-dashboaricon-app-fill',
+  'icon-app-zhouqi': 'icon-app-sandglass-fill',
+  'icon-app-chaxun': 'icon-app-search-1-fill',
+  'icon-app-qiye': 'icon-app-building-1-fill',
+  'icon-app-qianyue': 'icon-app-quill-pen-fill',
+  'icon-app-chanpin': 'icon-app-box-3-fill',
+  'icon-app-APP': 'icon-app-cellphone-fill',
+  'icon-app-fengkong': 'icon-app-shield-4-fill',
+  'icon-app-tuisong': 'icon-app-mail-send-fill',
+  'icon-app-yinzhang': 'icon-app-seal-fill',
+  'icon-app-shouye': 'icon-app-home-4-fill',
+  'icon-app-zhuti': '',
+  'icon-app-yujing': '',
+  'icon-app-zhanbi': '',
+  'icon-app-bianji': 'icon-app-edit-3-fill',
+  'icon-app-shanchu': '',
+  'icon-app-yanzhengma': 'icon-app-shield-2-fill',
+  'icon-app-dingwei': '',
+  'icon-app-shuqian': 'icon-app-tag-fill',
+  'icon-app-gaoxing': 'icon-app-smile-fill',
+  'icon-app-xiangji': '',
+  'icon-app-zhengzhaozhizhao': 'icon-app-IDcard-fill',
+  'icon-app-jinbi': 'icon-app-coin-2-fill',
+  'icon-app-suoxiao': '',
+  'icon-app-bobei': 'icon-app-copper-coin-fill',
+  'icon-app-huankuan': '',
+  'icon-app-jiqiren': 'icon-app-android-fill',
+  'icon-app-yuyin': '',
+  'icon-app-toupiao': 'icon-app-invite-fill',
+  'icon-app-qianbao': '',
+  'icon-app-yuqi': '',
+  'icon-app-yinhangka': '',
+  'icon-app-wenjianjia': 'icon-app-folder-2-fill',
+  'icon-app-wenjian': 'icon-app-file-fill',
+  'icon-app-shujuku': 'icon-app-database-fill',
+  'icon-app-tishi': '',
+  'icon-app-tupian': '',
+  'icon-app-sousuo': 'icon-app-search-fill',
+  'icon-app-shuju': 'icon-app-performance-fill',
+  'icon-app-shaixuan': '',
+  'icon-app-shexiang': '',
+  'icon-app-rizhi': 'icon-app-diary-fill',
+  'icon-app-rili': 'icon-app-calendar-fill',
+  'icon-app-renlianshibie': 'icon-app-user-4-fill',
+  'icon-app-qukuai': 'icon-app-block-fill',
+  'icon-app-quanwei': 'icon-app-user-5-fill',
+  'icon-app-quanxian': '',
+  'icon-app-jishufuwu': 'icon-app-terminal-box-fill',
+  'icon-app-lunchuan': 'icon-app-ship-fill',
+  'icon-app-mubiao': 'icon-app-target-fill',
+  'icon-app-kaifang': 'icon-app-open-fill',
+  'icon-app-qianbi': '',
+  'icon-app-lianjie': '',
+  'icon-app-piaoju': 'icon-app-coupon-fill',
+  'icon-app-peizhi': 'icon-app-settings-2-fill',
+  'icon-app-qiche': 'icon-app-car-2-fill',
+  'icon-app-kaishi': '',
+  'icon-app-biaoji': '',
+  'icon-app-guanbituichu': 'icon-app-power-fill',
+  'icon-app-diannao': 'icon-app-computer-fill',
+  'icon-app-daichuli': 'icon-app-time-fill',
+  'icon-app-jinggao': 'icon-app-alert-fill',
+  'icon-app-huoche': 'icon-app-truck-fill',
+  'icon-app-jieqing': 'icon-app-currency-cny-fill',
+  'icon-app-huangguan': 'icon-app-vip-2-fill',
+  'icon-app-gouwu': 'icon-app-shopping-bag-1-fill',
+  'icon-app-dayin': '',
+  'icon-app-fenxiang': 'icon-app-share-forward-fill',
+  'icon-app-biaoge': 'icon-app-tablicon-app-fill',
+  'icon-app-chulizhong': '',
+  'icon-app-zanting': '',
+  'icon-app-zuanshi': 'icon-app-vip-1-fill',
+};

+@import '~@qx/ui/src/style/variable.less';
+
+.qx-select-icon-container {
+  position: relative;
+  font-size: 0;
+
+  .cover-icon,
+  .cover-img {
+    height: 48px;
+    width: 48px;
+    border-radius: 8px;
+
+    &.cover-icon {
+      color: #ffffff;
+      background-color: @B8;
+
+      svg {
+        width: 24px;
+        height: 24px;
+        margin: 12px;
+      }
+    }
+  }
+  .anticon-edit {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: none;
+    padding: 12px;
+    color: #fff;
+    font-size: 24px;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  &:hover {
+    .anticon-edit {
+      display: inline-block;
+    }
+  }
+}
+
+.qx-icon-picker-overlay {
+  width: 490px;
+
+  .ant-popover-inner {
+    border-radius: 8px;
+
+    .ant-popover-inner-content {
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    .ant-tabs-nav::before {
+      display: none;
+    }
+    .ant-tabs-tabpane {
+      display: flex;
+      flex-direction: column;
+      height: 336px;
+    }
+    .ant-tabs-tabpane-hidden {
+      display: none;
+    }
+  }
+}
+
+.qx-select-custom-icons {
+  position: relative;
+  .block-color-box {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    padding-bottom: 16px;
+
+    .block-color {
+      width: 32px;
+      height: 32px;
+      font-size: 16px;
+      text-align: center;
+      vertical-align: middle;
+      border-radius: 4px;
+      cursor: pointer;
+      &--default {
+        color: #fff;
+        background-color: @B8;
+      }
+    }
+  }
+  .anticon-check {
+    color: #fff;
+    vertical-align: middle;
+  }
+  .block-icon-box {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    height: 288px;
+
+    &.height336 {
+      height: 336px;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -16px;
+      right: -16px;
+      height: 1px;
+      background-color: #e9e9ea;
+    }
+
+    .icon-list {
+      position: relative;
+      height: 100%;
+      overflow: auto;
+      flex: 1;
+
+      .icon-classify-label {
+        font-size: 12px;
+        color: #7c7e86;
+        line-height: 20px;
+        padding: 16px 0 12px;
+      }
+      .icon-classify-list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        .block-icon {
+          width: 12.5%;
+          height: 32px;
+          text-align: center;
+          cursor: pointer;
+
+          .anticon {
+            height: 32px;
+            width: 32px;
+            border-radius: 4px;
+            padding-top: 6px;
+            box-sizing: border-box;
+            display: inline-block;
+
+            &:hover {
+              background: @N3;
+              border-radius: 4px;
+              color: #50535d;
+            }
+
+            svg {
+              width: 20px;
+              height: 20px;
+            }
+          }
+
+          &--default {
+            color: #fff !important;
+            background-color: @B8 !important;
+          }
+        }
+      }
+    }
+    .icon-classify {
+      display: flex;
+      flex-direction: column;
+      width: 96px;
+      border-left: 1px solid #e9e9ea;
+      margin-right: -16px;
+      align-items: center;
+
+      .classify-switch {
+        margin: 12px 0 16px;
+      }
+
+      .classify-label-list {
+        flex: 1;
+        width: 100%;
+        overflow: auto;
+
+        .classify-label {
+          font-size: 12px;
+          color: #50535d;
+          line-height: 24px;
+          width: 64px;
+          margin: 4px auto;
+          text-align: center;
+          cursor: pointer;
+
+          &:hover {
+            background: @N3;
+            border-radius: 4px;
+            color: #50535d;
+          }
+          &.active {
+            position: relative;
+            color: @B8;
+            background-color: @B3;
+            border-radius: 4px;
+          }
+          &:first-child {
+            margin-top: 0;
+          }
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+  .custom-icon-box {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+    height: 336px;
+    justify-content: flex-start;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    padding-top: 10px;
+
+    .custom-icon-item {
+      width: 12.5%;
+
+      .qx-custom-preview {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        margin: 0 10px 10px 0;
+        padding: 6px 0;
+        text-align: center;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        box-sizing: border-box;
+
+        &:hover {
+          cursor: pointer;
+
+          .qx-custom-preview_text {
+            display: block;
+          }
+
+          .qx-custom-preview_icon {
+            display: block;
+            cursor: pointer;
+          }
+        }
+
+        &_icon {
+          position: absolute;
+          top: -6px;
+          right: -6px;
+          z-index: 9999;
+          display: none;
+          width: 14px;
+          height: 14px;
+          color: white;
+          line-height: 10px;
+          text-align: center;
+          background-color: rgb(207, 207, 207);
+          border-radius: 50%;
+        }
+      }
+
+      .qx-custom-upload {
+        width: 40px !important;
+        margin: 0 10px 10px 0;
+
+        .ant-upload.ant-upload-select {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          border: 1px solid #d9d9d9;
+          border-radius: 2px;
+          cursor: pointer;
+
+          .ant-upload {
+            width: 100%;
+          }
+
+          img {
+            width: 24px;
+            height: 24px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.qx-select-custom-desc-icon-wrap {
+  position: relative;
+
+  .custom-desc-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: @N7;
+    margin-left: 4px;
+  }
+}
+

+### 选择icon
+
+### 
+
+```tsx
+import { request, QxIconSelector } from '@qx/common';
+import React, { useState } from 'react';
+
+export default () => {
+  const [value, setValue] = useState({
+    showThemePicker: true,
+    iconColor: "#B81E51",
+    type : "icon-app-eye-close-fill"
+  });
+  return (
+    <QxIconSelector
+      value={value}
+      onChange={(values)=> {
+        console.log(values,'lllll')
+        setValue(values)
+      }}
+    />
+  );
+};
+```
+
+<API></API>

+import React, { useEffect, useRef, useState } from 'react';
+import defaultImg from './img/default_cover.png';
+import classNames from 'classnames';
+import _  from 'lodash';
+import {
+  Image,
+  message,
+  Popconfirm,
+  Popover,
+  Spin,
+  Tabs,
+  Tooltip,
+  Upload,
+  Switch,
+} from 'antd';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  EditOutlined,
+  PlusOutlined,
+  ExclamationCircleOutlined,
+} from '@ant-design/icons';
+import {
+  FORM_GROUP,
+  ICON_CLASSIFY,
+  BG_COLORS,
+  ICONS,
+  MAP_OLD_ICONS,
+} from './enum';
+import { deleteImg, getHistoryDataImg } from './service';
+import './index.less';
+import {QxBaseIcon, UploadFile} from "@qx/common";
+
+interface IconProps {
+  value: {
+    type: string; // icon图标标识或者是http的url
+    iconColor: string; // icon图标颜色
+    belongTo?: string;
+    showThemePicker?: boolean; // 是否展示主题选择模块
+  };
+  onChange: (value: {
+    type: string;
+    iconColor: string;
+    belongTo?: string;
+    showThemePicker: boolean | undefined;
+  }) => void;
+}
+export const QxIconSelector: React.FC<IconProps> = (props) => {
+  const { value, onChange } = props;
+  const { iconColor, belongTo, showThemePicker } = value || {};
+
+  const defaultIcon =
+    (belongTo && FORM_GROUP[belongTo]) || 'icon-app-grid-2-fill';
+  const icon =
+    MAP_OLD_ICONS[value?.type] || // 映射老图标的标识
+    ((value?.type?.includes('http') || // 自定义图标http直接返回
+      !Object.keys(MAP_OLD_ICONS).includes(value?.type)) &&
+      value?.type) ||
+    defaultIcon; // 默认值
+  const [bgColor, setBgColor] = useState<string>('');
+  const [blockIcon, setBlockIcon] = useState<string>('');
+  const [iconType, setIconType] = useState<'system' | 'custom'>();
+  const [historyImg, setHistoryImg] = useState<any[]>([]);
+  const [getDataLoading, setGetDataLoading] = useState<boolean>(false);
+  const [uploading, setUploading] = useState<boolean>(false);
+  const [iconShape, setIconShape] = useState<'fill' | 'line'>('fill');
+  const [activeClassify, setActiveClassify] = useState<string>('');
+  const iconListRef = useRef<HTMLDivElement>(null);
+
+  // 新增应用时传递初始icon
+  if (value && !value.type) {
+    onChange({
+      type: icon,
+      iconColor: iconColor,
+      belongTo,
+      showThemePicker,
+    });
+  }
+
+  const findClassifyByIcon = (icon: string) => {
+    const splitIcon = icon?.split('-') || [];
+    splitIcon.pop();
+    const joinIcon = splitIcon.join('-');
+    return (
+      Object.keys(ICONS).find((cfy) => ICONS[cfy].includes(joinIcon)) || ''
+    );
+  };
+
+  const scrollIntoView = (dom: HTMLElement, params: any = {}) => {
+    dom.scrollIntoView(
+      Object.assign({ block: 'start', inline: 'nearest' }, params),
+    );
+  };
+
+  useEffect(() => {
+    setBlockIcon(icon);
+    setBgColor(iconColor || '');
+    setIconType(icon?.includes('http') ? 'custom' : 'system');
+    setIconShape(icon?.split('-').pop() === 'line' ? 'line' : 'fill');
+  }, [icon, iconColor]);
+
+  useEffect(() => {
+    const cfy = findClassifyByIcon(icon);
+    setActiveClassify(cfy);
+  }, []);
+
+  const onClickPopover = () => {
+    setTimeout(() => {
+      const cfy = findClassifyByIcon(blockIcon);
+      const iconItemDom: any = document.querySelector(
+        `div[icon-name=${blockIcon}]`,
+      );
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      iconItemDom && scrollIntoView(iconItemDom);
+      setTimeout(() => {
+        // 恢复icon滚动副作用
+        const iconCfyDOm: any = document.getElementById(
+          `qx-icon-classify-${cfy}`,
+        );
+        setActiveClassify(cfy);
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        iconCfyDOm && scrollIntoView(iconCfyDOm, { block: 'center' });
+      }, 1000);
+    }, 500);
+  };
+
+  const onTabsChange = async (key: string) => {
+    if (key === 'custom') {
+      //获取历史上传的数据
+      try {
+        setGetDataLoading(true);
+        const res = await getHistoryDataImg({
+          appCode: 'my_icon',
+          funCode: 'my_icon',
+          mediaType: 'img',
+        });
+        setHistoryImg(res.list || []);
+        setGetDataLoading(false);
+      } catch (e) {
+        setHistoryImg([]);
+        setGetDataLoading(false);
+      }
+    }
+  };
+
+  const onIconShapeChange = (checked: boolean) => {
+    setIconShape(checked ? 'line' : 'fill');
+    const icon = blockIcon?.split('-');
+    icon.pop();
+    icon.push(checked ? 'line' : 'fill');
+    onChange({
+      type: icon.join('-'),
+      iconColor: bgColor,
+      belongTo,
+      showThemePicker,
+    });
+  };
+
+  const onScrollIconList = _.throttle(
+    () => {
+      Object.keys(ICONS).forEach((cfy) => {
+        const iconItemDom: any = document.getElementById(`qx-icon-list-${cfy}`);
+        const distance = Math.abs(
+          iconItemDom?.offsetTop - (iconListRef.current?.scrollTop || 0),
+        );
+        if (distance < 40) {
+          const iconCfyDOm: any = document.getElementById(
+            `qx-icon-classify-${cfy}`,
+          );
+          scrollIntoView(iconCfyDOm, { block: 'center' });
+          setActiveClassify(cfy);
+        }
+      });
+    },
+    30,
+    { leading: false },
+  );
+
+  const onSelectClassify = (cfy: string) => {
+    setActiveClassify(cfy);
+    const iconItemDom: any = document.getElementById(`qx-icon-list-${cfy}`);
+    scrollIntoView(iconItemDom);
+    // window.scrollTo({ top: iconItemDom.offsetTop, behavior: 'smooth' });
+  };
+
+  const handleUpload = (file: any) => {
+    // console.log('文件对象:',file);
+    const imgArr = _.cloneDeep(historyImg);
+    const formData = {
+      file: 'file',
+      appCode: 'my_icon',
+      funCode: 'my_icon',
+      publicFile: true, //长期有效文件
+    };
+    UploadFile(
+      file,
+      formData,
+      () => {},
+      (cr: any) => {
+        // console.log('回调数据:',cr)
+        const thumbUrl = cr.data?.qgImg?.urlMap?.thumb;
+        if (Boolean(cr.success) && cr.data && cr.data.fileId && thumbUrl) {
+          // message.success('上传成功')
+          setIconType('custom');
+          setBlockIcon(thumbUrl);
+          onChange({
+            type: thumbUrl,
+            iconColor: bgColor,
+            belongTo,
+            showThemePicker,
+          });
+          setUploading(false);
+          imgArr.unshift(cr.data);
+        } else {
+          // 上传失败
+          message.error('上传失败');
+        }
+        setHistoryImg([...imgArr]);
+      },
+    );
+  };
+
+  const beforeUpload = (file: any) => {
+    // console.log(file);
+    const fileType =
+      file.type === 'image/jpeg' ||
+      file.type === 'image/png' ||
+      file.type === 'image/jpg';
+    if (!fileType) {
+      message.error('请选择jpg或png或jpeg格式的文件');
+    }
+    const fileSize = file.size / 1024 / 1024 < 1;
+    if (!fileSize) {
+      message.error('请选择小于1MB的文件');
+    }
+    if (fileType && fileSize) {
+      //如果文件符合上传条件
+      setUploading(true);
+      handleUpload(file);
+    }
+  };
+
+  const handleDelete = async (fileId: string, index: number) => {
+    const imgArr = _.cloneDeep(historyImg);
+    await deleteImg([fileId]);
+    imgArr.splice(index, 1);
+    setHistoryImg([...imgArr]);
+  };
+
+  const renderContent = () => {
+    return (
+      <div className={'qx-select-custom-icons'}>
+        <Tabs
+          defaultActiveKey={'system'}
+          centered
+          tabBarGutter={60}
+          onChange={onTabsChange}
+        >
+          <Tabs.TabPane tab="系统图标" key="system">
+            {showThemePicker ? (
+              <div className="block-color-box">
+                {/* 系统默认颜色 */}
+                <div
+                  className={'block-color block-color--default'}
+                  onClick={() => {
+                    onChange({
+                      type: blockIcon,
+                      iconColor: '',
+                      belongTo,
+                      showThemePicker,
+                    });
+                  }}
+                >
+                  {!bgColor && <CheckOutlined />}
+                </div>
+                {BG_COLORS.map((color: string) => {
+                  return (
+                    <div
+                      key={color}
+                      style={{ backgroundColor: color }}
+                      className={'block-color'}
+                      onClick={() => {
+                        onChange({
+                          type: blockIcon,
+                          iconColor: color,
+                          belongTo,
+                          showThemePicker,
+                        });
+                      }}
+                    >
+                      {color === bgColor && <CheckOutlined />}
+                    </div>
+                  );
+                })}
+              </div>
+            ) : null}
+            <div
+              className={classNames(
+                'block-icon-box',
+                !showThemePicker && 'height336',
+              )}
+            >
+              <div
+                className="icon-list"
+                ref={iconListRef}
+                onScroll={onScrollIconList}
+              >
+                {Object.keys(ICONS).map((cfy) => {
+                  return (
+                    <div id={`qx-icon-list-${cfy}`} key={cfy}>
+                      <div className="icon-classify-label">
+                        {ICON_CLASSIFY[cfy]}
+                      </div>
+                      <div className="icon-classify-list">
+                        {ICONS[cfy].map((item: string) => {
+                          const icon = `${item}-${iconShape}`;
+                          return (
+                            <div
+                              key={icon}
+                              className={'block-icon'}
+                              icon-name={icon}
+                            >
+                              <QxBaseIcon
+                                type={icon}
+                                onClick={() => {
+                                  onChange({
+                                    type: icon,
+                                    iconColor: bgColor,
+                                    belongTo,
+                                    showThemePicker,
+                                  });
+                                  const cfy = findClassifyByIcon(icon);
+                                  const iconCfyDOm: any =
+                                    document.getElementById(
+                                      `qx-icon-classify-${cfy}`,
+                                    );
+                                  scrollIntoView(iconCfyDOm, {
+                                    block: 'center',
+                                  });
+                                  setActiveClassify(cfy);
+                                }}
+                                style={{
+                                  color:
+                                    bgColor && icon === blockIcon
+                                      ? '#fff'
+                                      : 'rgba(0, 0, 0, 0.45)',
+                                  backgroundColor:
+                                    icon === blockIcon ? bgColor : '',
+                                }}
+                                className={classNames({
+                                  'block-icon--default':
+                                    icon === blockIcon && !bgColor,
+                                })}
+                              />
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+              <div className="icon-classify">
+                <Switch
+                  checked={iconShape === 'line' ? true : false}
+                  className="classify-switch"
+                  checkedChildren="线性"
+                  unCheckedChildren="面性"
+                  onChange={onIconShapeChange}
+                />
+                <div className="classify-label-list">
+                  {Object.keys(ICONS).map((cfy) => {
+                    return (
+                      <div
+                        id={`qx-icon-classify-${cfy}`}
+                        className={classNames(
+                          'classify-label',
+                          activeClassify === cfy && 'active',
+                        )}
+                        key={cfy}
+                        onClick={() => onSelectClassify(cfy)}
+                      >
+                        {ICON_CLASSIFY[cfy]}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </Tabs.TabPane>
+          <Tabs.TabPane
+            tab={
+              <div className="qx-select-custom-desc-icon-wrap">
+                自定义图标&ensp;
+                <Tooltip
+                  title={
+                    '请选择1MB以内的jpg、jpeg或png图片，建议尺寸144*144像素'
+                  }
+                  color="#ffffff"
+                  overlayStyle={{ maxWidth: '240px' }}
+                  overlayInnerStyle={{
+                    fontSize: '14px',
+                    color: '#50535D',
+                    textAlign: 'justify',
+                    lineHeight: '22px',
+                  }}
+                  placement={'right'}
+                >
+                  <ExclamationCircleOutlined className="custom-desc-icon" />
+                </Tooltip>
+              </div>
+            }
+            key="custom"
+          >
+            <Spin spinning={getDataLoading} style={{ top: '70px' }}>
+              <div className="custom-icon-box">
+                <div className="custom-icon-item">
+                  <Upload
+                    name="icon"
+                    listType="picture-card"
+                    accept=".jpg,.png"
+                    maxCount={1}
+                    showUploadList={false}
+                    beforeUpload={beforeUpload}
+                    className={'qx-custom-upload'}
+                  >
+                    <PlusOutlined />
+                  </Upload>
+                </div>
+                {historyImg && historyImg.length ? (
+                  <>
+                    <div
+                      style={{
+                        height: '40px',
+                        width: '40px',
+                        textAlign: 'center',
+                        paddingTop: '10px',
+                        display: uploading ? '' : 'none',
+                        margin: '0 10px 10px 0',
+                      }}
+                    >
+                      <Spin tip={''} size={'small'} spinning={true} />
+                    </div>
+                    {/*<Image.PreviewGroup>*/}
+                    {historyImg.map((item: any, index: number) => {
+                      return (
+                        <div className="custom-icon-item" key={index}>
+                          <div className={'qx-custom-preview'}>
+                            <Popconfirm
+                              title={`确定要删除这张图片吗？`}
+                              okText="确定"
+                              cancelText="取消"
+                              onConfirm={() => handleDelete(item.fileId, index)}
+                            >
+                              <div className={'qx-custom-preview_icon'}>
+                                <CloseOutlined style={{ fontSize: '8px' }} />
+                              </div>
+                            </Popconfirm>
+                            <Image
+                              src={item?.qgImg?.urlMap?.thumb || 'error'}
+                              fallback={defaultImg}
+                              preview={false}
+                              style={{ width: '24px', height: '24px' }}
+                              onClick={() => {
+                                setBlockIcon(item?.qgImg?.urlMap?.thumb);
+                                setIconType('custom');
+                                onChange({
+                                  type: item?.qgImg?.urlMap?.thumb,
+                                  iconColor: bgColor,
+                                  belongTo,
+                                  showThemePicker,
+                                });
+                              }}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
+                    {/*</Image.PreviewGroup>*/}
+                  </>
+                ) : null}
+              </div>
+            </Spin>
+          </Tabs.TabPane>
+        </Tabs>
+      </div>
+    );
+  };
+  return (
+    <div className="qx-select-icon-container" style={{ width: 'auto' }}>
+      <Popover
+        content={renderContent}
+        placement="right"
+        trigger="click"
+        overlayClassName={'qx-icon-picker-overlay'}
+        onOpenChange={onClickPopover}
+        // getPopupContainer={(triggerNode) => triggerNode} // 图标不跟随标签
+      >
+        {iconType === 'custom' ? (
+          <Image
+            className="cover-img"
+            src={blockIcon || 'error'}
+            fallback={defaultImg}
+            preview={false}
+          />
+        ) : (
+          <QxBaseIcon
+            className="cover-icon default__icon"
+            type={blockIcon}
+            style={{ backgroundColor: bgColor }}
+          />
+        )}
+        <EditOutlined />
+      </Popover>
+    </div>
+  );
+};

+import { request } from '@qx/common';
+
+// 获取用户上传的历史图片
+export function getHistoryDataImg(params: any) {
+  return request.post(
+    `/qgyun-service-fs-manager/file/page?pageNum=1&pageSize=200&source=LowCode`,
+    {
+      data: params,
+    },
+  );
+}
+
+// 删除图片(可以批量操作)
+export function deleteImg(params: any) {
+  return request.post(`/qgyun-service-fs-manager/file/status/disable`, {
+    data: params,
+  });
+}

 import { createRequest } from '@qx/utils';
-export const request = createRequest();
+import UploadFile from './uploadFile'
+
+const request = createRequest();
+export {UploadFile, request}
 

+import { QxUploadCore, deleteUploadFile as deleteFile } from '@qx/utils'; // 晴晴抽出
+import { createRequest } from '@qx/utils';
+const request = createRequest()
+
+const UploadFile = (
+  file: any,
+  formData: any,
+  progress: any,
+  callback?: any,
+  extraHandle?: {
+    FileDoneList?: any;
+    deleteTempList?: () => void;
+    existMsg?: string;
+  },
+  maxCount?: number,
+) => {
+  QxUploadCore(
+    request,
+    file,
+    formData,
+    () => {},
+    callback,
+    extraHandle,
+    maxCount,
+  );
+};
+export default UploadFile;
+
+export { deleteFile };