From b1bff7d27e8eeb771d56221bbdd2c08fb0cbb87c Mon Sep 17 00:00:00 2001
From: "bai.zixv" <bai.zixv@foxmail.com>
Date: Thu, 18 Apr 2024 13:37:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E6=A0=87=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96,=20=E7=BB=99=E9=80=89=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=B7=BB=E5=8A=A0=E8=83=8C=E6=99=AF=E8=89=B2?=
 =?UTF-8?q?,=E6=96=B9=E4=BE=BF=E8=AF=86=E5=88=AB=20(#754)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/754
Co-authored-by: bai.zixv <bai.zixv@foxmail.com>
Co-committed-by: bai.zixv <bai.zixv@foxmail.com>
---
 .../antd/icon-picker/IconFilterInput.tsx            |  2 +-
 .../schema-component/antd/icon-picker/IconList.tsx  | 13 ++++++++++---
 .../antd/icon-picker/IconPicker.tsx                 |  6 +++---
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconFilterInput.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconFilterInput.tsx
index 43dca75e2..33a3692c1 100644
--- a/packages/core/client/src/schema-component/antd/icon-picker/IconFilterInput.tsx
+++ b/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} />;
 };
diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx
index 7588ed5c6..813e87b29 100644
--- a/packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx
+++ b/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>
diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
index 9d260ad8d..1e877d442 100644
--- a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx
+++ b/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')}