From e3f23fa7b1257b44c087a434f7a637d62c8362a0 Mon Sep 17 00:00:00 2001
From: "bai.zixv" <bai.zixv@foxmail.com>
Date: Wed, 17 Apr 2024 13:56:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E6=A0=87=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E6=90=9C=E7=B4=A2,=20=E6=82=AC=E6=B5=AE?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20(#743)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

![image](/attachments/24bd3a25-990d-431c-8682-a7e034d7826d)

Co-authored-by: sealday <zhanglin@daoyoucloud.com>
Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachycode/pulls/743
Co-authored-by: bai.zixv <bai.zixv@foxmail.com>
Co-committed-by: bai.zixv <bai.zixv@foxmail.com>
---
 .env.example                                  |  6 +--
 .../antd/icon-picker/IconFilter.tsx           | 13 +++++
 .../antd/icon-picker/IconList.tsx             | 47 +++++++++++++++++++
 .../antd/icon-picker/IconPicker.tsx           | 28 +++++------
 4 files changed, 74 insertions(+), 20 deletions(-)
 create mode 100644 packages/core/client/src/schema-component/antd/icon-picker/IconFilter.tsx
 create mode 100644 packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx

diff --git a/.env.example b/.env.example
index 7a39ba96d..492d6dace 100644
--- a/.env.example
+++ b/.env.example
@@ -57,7 +57,7 @@ CACHE_MEMORY_MAX=2000
 ################# STORAGE (Initialization only) #################
 
 INIT_LANG=en-US
-INIT_ROOT_EMAIL=admin@nocobase.com
-INIT_ROOT_PASSWORD=admin123
+INIT_ROOT_EMAIL=admin@tachybase.com
+INIT_ROOT_PASSWORD=!Admin123.
 INIT_ROOT_NICKNAME=Super Admin
-INIT_ROOT_USERNAME=nocobase
+INIT_ROOT_USERNAME=tachybase
diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconFilter.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconFilter.tsx
new file mode 100644
index 000000000..699ab65c7
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/icon-picker/IconFilter.tsx
@@ -0,0 +1,13 @@
+import { Input } from 'antd';
+import _ from 'lodash';
+import React from 'react';
+
+export const IconFilter = (props) => {
+  const { changeFilterKey } = props;
+  const onChange = _.debounce((e) => {
+    const inputValue = e.target.value;
+    changeFilterKey(inputValue);
+  }, 100);
+
+  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
new file mode 100644
index 000000000..1afbdb52e
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/icon-picker/IconList.tsx
@@ -0,0 +1,47 @@
+import React, { useMemo, useState } from 'react';
+import { Icon, icons } from '../../../icon';
+import { Tooltip } from 'antd';
+
+export const IconList = (props) => {
+  const { filterKey, onChange, changePop } = props;
+
+  const iconKeysByFilter = useMemo(() => {
+    if (!filterKey) {
+      return icons;
+    }
+    const filterIcons = new Map();
+    for (const key of icons.keys()) {
+      if (key.toLowerCase().includes(filterKey.toLowerCase())) {
+        filterIcons.set(key, icons.get(key));
+      }
+    }
+    return filterIcons;
+  }, [filterKey]);
+
+  return (
+    <div style={{ width: '26em', maxHeight: '20em', overflowY: 'auto' }}>
+      {[...iconKeysByFilter.keys()].map((key) => (
+        <span key={key} style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}>
+          <Tooltip
+            destroyTooltipOnHide
+            mouseEnterDelay={0.3}
+            mouseLeaveDelay={0.3}
+            placement="top"
+            title={key}
+            arrow={{
+              pointAtCenter: true,
+            }}
+          >
+            <Icon
+              onClick={() => {
+                onChange(key);
+                changePop(false);
+              }}
+              type={key}
+            />
+          </Tooltip>
+        </span>
+      ))}
+    </div>
+  );
+};
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 4528d7b13..0a568e07f 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,16 +3,20 @@ 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, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon, hasIcon, icons } from '../../../icon';
 import { StablePopover } from '../popover';
+import { IconFilter } from './IconFilter';
+import { IconList } from './IconList';
 
 function IconField(props: any) {
-  const layout = useFormLayout();
   const { value, onChange, disabled } = props;
-  const [visible, setVisible] = useState(false);
   const { t } = useTranslation();
+  const layout = useFormLayout();
+  const [visible, setVisible] = useState(false);
+  const [filterKey, setFilterKey] = useState('');
+
   return (
     <div>
       <Space.Compact>
@@ -26,20 +30,10 @@ function IconField(props: any) {
             setVisible(val);
           }}
           content={
-            <div style={{ width: '26em', maxHeight: '20em', overflowY: 'auto' }}>
-              {[...icons.keys()].map((key) => (
-                <span
-                  key={key}
-                  style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}
-                  onClick={() => {
-                    onChange(key);
-                    setVisible(false);
-                  }}
-                >
-                  <Icon type={key} />
-                </span>
-              ))}
-            </div>
+            <>
+              <IconFilter changeFilterKey={setFilterKey} />
+              <IconList filterKey={filterKey} onChange={onChange} changePop={setVisible} />
+            </>
           }
           title={t('Icon')}
           trigger="click"