feat: 图标搜索优化, 给选中的图标添加背景色,方便识别 (#754)

![image](/attachments/52e527f2-5952-4ad4-b09e-d49222425be6)

Reviewed-on: daoyoucloud/tachybase#754
Co-authored-by: bai.zixv <bai.zixv@foxmail.com>
Co-committed-by: bai.zixv <bai.zixv@foxmail.com>

packages/core/client/src/schema-component/antd/icon-picker/IconFilterInput.tsx

@@ -9,5 +9,5 @@ export const IconFilterInput = (props) => {
     changeFilterKey(inputValue);
   }, 100);
 
-  return <Input allowClear placeholder={`antd的key,例如"ApiOutlined",忽略大小写`} onChange={onChange} />;
+  return <Input allowClear placeholder={`Antd的key,例如"ApiOutlined",忽略大小写`} onChange={onChange} />;
 };

packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx

@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react';
 import { Icon, icons } from '../../../icon';
 import { Tooltip } from 'antd';
+import { css } from '@emotion/css';
 
 export const IconFilterList = (props) => {
-  const { filterKey, onChange, changePop } = props;
+  const { currentKey, filterKey, onChange, changePop } = props;
 
   const iconKeysByFilter = useMemo(() => {
     if (!filterKey) {
@@ -21,7 +22,13 @@ export const IconFilterList = (props) => {
   return (
     <div style={{ width: '26em', maxHeight: '20em', overflowY: 'auto' }}>
       {[...iconKeysByFilter.keys()].map((key) => (
-        <span key={key} style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}>
+        <span
+          key={key}
+          className={css`
+            background-color: ${currentKey == key ? '#9bb0d393' : ''};
+          `}
+          style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}
+        >
           <Tooltip
             destroyTooltipOnHide
             mouseEnterDelay={0.3}
@@ -33,11 +40,11 @@ export const IconFilterList = (props) => {
             }}
           >
             <Icon
+              type={key}
               onClick={() => {
                 onChange(key);
                 changePop(false);
               }}
-              type={key}
             />
           </Tooltip>
         </span>

packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx

@@ -3,9 +3,9 @@ import { useFormLayout } from '@formily/antd-v5';
 import { connect, mapProps, mapReadPretty } from '@nocobase/schema';
 import { isValid } from '@nocobase/schema';
 import { Button, Space } from 'antd';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon, hasIcon, icons } from '../../../icon';
+import { Icon, hasIcon } from '../../../icon';
 import { StablePopover } from '../popover';
 import { IconFilterInput } from './IconFilterInput';
 import { IconFilterList } from './IconList';
@@ -32,7 +32,7 @@ function IconField(props: any) {
           content={
             <>
               <IconFilterInput changeFilterKey={setFilterKey} />
-              <IconFilterList filterKey={filterKey} onChange={onChange} changePop={setVisible} />
+              <IconFilterList currentKey={value} filterKey={filterKey} onChange={onChange} changePop={setVisible} />
             </>
           }
           title={t('Icon')}