From 67fac9673ff5c34c5ad4e1a0bdd3ea00627a2264 Mon Sep 17 00:00:00 2001
From: zhoux <zhouxia@supervision.ltd>
Date: Tue, 28 Nov 2023 14:25:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=80=89=E6=8B=A9=E4=BA=A4=E4=BA=92=E6=95=B4?=
 =?UTF-8?q?=E4=BD=93=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/defaultIcon.ts                         |  32 ++
 src/components/IconSelector/Category.tsx      |   2 +-
 src/components/IconSelector/CopyableIcon.tsx  |   5 +
 src/components/IconSelector/index.tsx         |  31 +-
 src/components/RightContent/index.tsx         |  12 +-
 src/global.css                                |  45 ++
 src/global.less                               |  50 ++
 .../System/MenuList/component/CreateForm.tsx  |  60 +--
 .../System/MenuList/component/UpdateForm.tsx  | 489 +++++++++++-------
 src/utils/IconUtil.ts                         |   6 +-
 10 files changed, 488 insertions(+), 244 deletions(-)
 create mode 100644 config/defaultIcon.ts

diff --git a/config/defaultIcon.ts b/config/defaultIcon.ts
new file mode 100644
index 0000000..42ee906
--- /dev/null
+++ b/config/defaultIcon.ts
@@ -0,0 +1,32 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-28 14:13:05
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-11-28 14:16:48
+ * @FilePath: \general-ai-platform-web\config\defaultIcon.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
+ */
+
+import { proFormItemStyleProps } from './defaultForm';
+
+// 分步表单统一配置
+export const proIconSelectWrapStyle: React.CSSProperties = {
+  position: 'relative',
+  width: proFormItemStyleProps.width + 48,
+  background: 'red',
+  left: 0,
+};
+
+export const proIconSelectStyle: React.CSSProperties = {
+  position: 'absolute',
+  left: '0',
+  padding: 16,
+  top: '5%',
+  width: '94%',
+  height: 500,
+  zIndex: 9,
+  boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.30)',
+  background: '#fff',
+  borderRadius: 4,
+  overflowY: 'scroll',
+};
diff --git a/src/components/IconSelector/Category.tsx b/src/components/IconSelector/Category.tsx
index dd0e93f..1a862c3 100644
--- a/src/components/IconSelector/Category.tsx
+++ b/src/components/IconSelector/Category.tsx
@@ -40,7 +40,7 @@ const Category: React.FC<CategoryProps> = props => {
 
   return (
     <div>
-      <h4>{intl.formatMessage({
+      <h4 style={{paddingTop: 16}}>{intl.formatMessage({
         id: `app.docs.components.icon.category.${title}`,
         defaultMessage: '信息',
       })}</h4>
diff --git a/src/components/IconSelector/CopyableIcon.tsx b/src/components/IconSelector/CopyableIcon.tsx
index 371cba0..214b5c7 100644
--- a/src/components/IconSelector/CopyableIcon.tsx
+++ b/src/components/IconSelector/CopyableIcon.tsx
@@ -24,11 +24,16 @@ const CopyableIcon: React.FC<CopyableIconProps> = ({
   theme,
 }) => {
   const className = classNames({
+    gn: true,
+    themeBgHover: true,
     copied: justCopied === name,
     [theme]: !!theme,
   });
   return (
     <li className={className}
+    style={{
+      lineHeight: '48px',
+    }}
       onClick={() => {
         if (onSelect) {
           onSelect(theme, name);
diff --git a/src/components/IconSelector/index.tsx b/src/components/IconSelector/index.tsx
index 16d3f59..01f9a5d 100644
--- a/src/components/IconSelector/index.tsx
+++ b/src/components/IconSelector/index.tsx
@@ -92,7 +92,20 @@ const IconSelector: React.FC<IconSelectorProps> = (props) => {
   }, [displayState.searchKey, displayState.theme]);
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <div className='gn' style={{ display: 'flex', justifyContent: 'space-between' }}>
+        {/* 
+        * //TODO 二级：输入框上方提示文案悬浮会覆盖清空菜单图标项按钮
+        */}
+      <Input.Search
+          // placeholder={messages['app.docs.components.icon.search.placeholder']}
+          style={{ marginRight: 12, flex: 1 }}
+          allowClear
+          onChange={e => handleSearchIcon(e.currentTarget.value)}
+          size="large"
+          autoFocus
+          suffix={<IconPicSearcher />}
+        />
+        {/* <Icon component={OutlinedIcon} /> <Icon component={FilledIcon} TwoToneIcon /> */}
         <Radio.Group
           value={displayState.theme}
           onChange={handleChangeTheme}
@@ -101,15 +114,15 @@ const IconSelector: React.FC<IconSelectorProps> = (props) => {
           buttonStyle="solid"
           options={[
             {
-              label:  <Icon component={OutlinedIcon} />,
+              label:  <>线性</> ,
               value: ThemeType.Outlined
             },
             {
-              label: <Icon component={FilledIcon} />,
+              label: <>填充</> ,
               value: ThemeType.Filled
             },
             {
-              label: <Icon component={TwoToneIcon} />,
+              label: <>彩色</>,
               value: ThemeType.TwoTone
             },
           ]}
@@ -124,15 +137,7 @@ const IconSelector: React.FC<IconSelectorProps> = (props) => {
             <Icon components={TwoToneIcon} /> {messages['app.docs.components.icon.two-tone']}
           </Radio.Button> */}
         </Radio.Group>
-        <Input.Search
-          // placeholder={messages['app.docs.components.icon.search.placeholder']}
-          style={{ margin: '0 10px', flex: 1 }}
-          allowClear
-          onChange={e => handleSearchIcon(e.currentTarget.value)}
-          size="large"
-          autoFocus
-          suffix={<IconPicSearcher />}
-        />
+      
       </div>
       {renderCategories}
     </>
diff --git a/src/components/RightContent/index.tsx b/src/components/RightContent/index.tsx
index 1dbdf7e..4418bb9 100644
--- a/src/components/RightContent/index.tsx
+++ b/src/components/RightContent/index.tsx
@@ -1,3 +1,11 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-01 13:56:33
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-11-28 11:34:00
+ * @FilePath: \general-ai-platform-web\src\components\RightContent\index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { SelectLang as UmiSelectLang } from '@umijs/max';
 import React from 'react';
@@ -38,7 +46,7 @@ export const SelectRole = () => {
   const { currentUser } = initialState || {};
 
   return (
-    <>
+    <span className='gn'>
       {
         currentUser && (
           <Select
@@ -52,7 +60,7 @@ export const SelectRole = () => {
           />
         )
       }
-    </>
+    </span>
 
   );
 };
diff --git a/src/global.css b/src/global.css
index 4212bf1..b9bc39e 100644
--- a/src/global.css
+++ b/src/global.css
@@ -170,6 +170,27 @@ a.ant-dropdown-trigger {
 .ant-descriptions .ant-descriptions-row > td {
   padding-right: 12px;
 }
+::-webkit-scrollbar-track-piece {
+  -webkit-border-radius: 0;
+}
+::-webkit-scrollbar {
+  width: 5px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #CCC;
+  -webkit-border-radius: 6px;
+  outline-offset: -2px;
+  -moz-opacity: 0.5;
+  -khtml-opacity: 0.5;
+  opacity: 0.5;
+}
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #878987;
+  -webkit-border-radius: 6px;
+}
 .gn {
   /* UI 规范表 // update 使用中
   适用说明 
@@ -199,6 +220,27 @@ a.ant-dropdown-trigger {
 .gn .ant-pro-table-list-toolbar-container {
   padding-block: 8px;
 }
+.gn .ant-pro-global-header-header-actions-item > * {
+  padding-block: 0;
+}
+.gn .ant-radio-group-large .ant-radio-button-wrapper {
+  height: 32px;
+  line-height: 32px;
+}
+.gn .ant-input-affix-wrapper-lg {
+  height: 32px;
+  line-height: 32px;
+  font-size: 14px;
+}
+.gn .ant-btn.ant-btn-lg {
+  font-size: 14px;
+  height: 32px;
+  border-radius: 4px;
+}
+.gn .ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
+}
 .gn.h2 {
   font-size: 18px;
 }
@@ -220,3 +262,6 @@ a.ant-dropdown-trigger {
 .gn .border_bottom_1 {
   border-bottom: 1px solid #E0E0E0;
 }
+.gn.themeBgHover:hover {
+  background-color: #155BD4;
+}
diff --git a/src/global.less b/src/global.less
index d7bcdc5..c8020ac 100644
--- a/src/global.less
+++ b/src/global.less
@@ -217,6 +217,29 @@ a.ant-dropdown-trigger{
   }
 }
 
+// 美化滚动条
+::-webkit-scrollbar-track-piece {
+  -webkit-border-radius: 0
+}
+::-webkit-scrollbar {
+  width: 5px;
+  height: 10px
+}
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #CCC;
+  -webkit-border-radius: 6px;
+  outline-offset: -2px;
+  -moz-opacity: 0.5;
+  -khtml-opacity: 0.5;
+  opacity: 0.5
+}
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #878987;
+  -webkit-border-radius: 6px
+}
+
 .gn {
   // TODO_update 重置覆盖默认样式，使用统一类名gn + 需要覆盖的类名
   .ant-pro-checkcard-content {
@@ -245,6 +268,29 @@ a.ant-dropdown-trigger{
   .ant-pro-table-list-toolbar-container {
     padding-block: 8px;
   }
+
+  .ant-pro-global-header-header-actions-item >*{
+    padding-block: 0;
+  }
+
+  .ant-radio-group-large .ant-radio-button-wrapper {
+    height: 32px;
+    line-height: 32px;
+  }
+  .ant-input-affix-wrapper-lg{
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+  }
+  .ant-btn.ant-btn-lg {
+    font-size: 14px;
+    height: 32px;
+    border-radius: 4px;
+  }
+  .ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
+    border-start-start-radius: 4px;
+    border-end-start-radius: 4px;
+}
   
   /* UI 规范表 // update 使用中
   适用说明 
@@ -281,6 +327,10 @@ a.ant-dropdown-trigger{
   .border_bottom_1 {
     border-bottom: 1px solid #E0E0E0
   }
+
+  &.themeBgHover:hover{
+    background-color: #155BD4;
+  }
 }
 // .p1{
 
diff --git a/src/pages/System/MenuList/component/CreateForm.tsx b/src/pages/System/MenuList/component/CreateForm.tsx
index 5b00b56..38df1f7 100644
--- a/src/pages/System/MenuList/component/CreateForm.tsx
+++ b/src/pages/System/MenuList/component/CreateForm.tsx
@@ -17,6 +17,7 @@ import { Form, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 // 表单宽度 804 两列
 import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
+import { proIconSelectStyle, proIconSelectWrapStyle } from '../../../../../config/defaultIcon';
 
 export type FormValueType = {
   target?: string;
@@ -44,6 +45,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
   ]);
 
   useEffect(() => {
+    setIconSelectorOpen(false);
     if (props.values.id !== undefined && props.values.id !== 0) {
       setParentId(props.values.id as number);
       setParentSelectOptions([{ label: props.values.title, value: props.values.id }]);
@@ -71,6 +73,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
+        setMenuIconName('');
         console.log(values);
         postMenuCreateMenu(values)
           .then(() => {
@@ -245,7 +248,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
                   hidden={record.type === 'M'}
                   // disabled={record.type === 'M'}
                 />
-
+                {/* TODO 新增图标没有更改 */}
                 <ProFormSelect
                   width={proFormItemStyleProps.column2Width}
                   name="icon"
@@ -257,8 +260,16 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
                   hidden={parentId !== 0}
                   addonBefore={createIcon(menuIconName)}
                   fieldProps={{
+                    // suffixIcon:  {createIcon(menuIconName)},
+                    // dropdownRender:() => <><QuestionCircleOutlined /></>,
+                    labelInValue: true,
+                    notFoundContent: null, // 将选项内容为空隐去，使用自定义的图标选择组件
+                    filterOption: false,
                     onClick: () => {
-                      setIconSelectorOpen(true);
+                      setIconSelectorOpen(!iconSelectorOpen);
+                    },
+                    onClear: () => {
+                      setMenuIconName('');
                     },
                   }}
                   placeholder={`${intl.formatMessage({
@@ -277,20 +288,21 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
                     },
                   ]}
                 />
-
-                {iconSelectorOpen ? (
-                  <>
-                    <IconSelector
-                      onSelect={(name: string) => {
-                        form.setFieldsValue({ icon: name });
-                        setMenuIconName(name);
-                        setIconSelectorOpen(false);
-                      }}
-                    />
-                  </>
-                ) : (
-                  ''
-                )}
+                <div style={proIconSelectWrapStyle}>
+                  {iconSelectorOpen ? (
+                    <div style={proIconSelectStyle}>
+                      <IconSelector
+                        onSelect={(name: string) => {
+                          form.setFieldsValue({ icon: name });
+                          setMenuIconName(name);
+                          setIconSelectorOpen(false);
+                        }}
+                      />
+                    </div>
+                  ) : (
+                    ''
+                  )}
+                </div>
               </ProForm.Group>
             );
           }
@@ -338,22 +350,6 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
           required={false}
         ></ProFormSwitch>
       </ProForm.Group>
-      {/* <Modal
-        width={800}
-        open={iconSelectorOpen}
-        onCancel={() => {
-          setIconSelectorOpen(false);
-        }}
-        footer={null}
-      >
-        <IconSelector
-          onSelect={(name: string) => {
-            form.setFieldsValue({ icon: name });
-            setMenuIconName(name);
-            setIconSelectorOpen(false);
-          }}
-        />
-      </Modal> */}
     </ModalForm>
   );
 };
diff --git a/src/pages/System/MenuList/component/UpdateForm.tsx b/src/pages/System/MenuList/component/UpdateForm.tsx
index 25315c2..fbe5bf4 100644
--- a/src/pages/System/MenuList/component/UpdateForm.tsx
+++ b/src/pages/System/MenuList/component/UpdateForm.tsx
@@ -1,15 +1,22 @@
-import {ModalForm, ProForm, ProFormDependency, ProFormRadio} from '@ant-design/pro-components';
-import {ProFormText} from '@ant-design/pro-components';
-import {ProFormSwitch} from '@ant-design/pro-components';
-import {ProFormSelect, ProFormDigit} from '@ant-design/pro-components';
-import {FormattedMessage, useIntl} from '@umijs/max';
-import React, {useEffect, useState} from 'react';
-import {App, Button, Form, message, Modal} from 'antd';
-import {putMenuUpdateMenu} from "@/services/system/Menu";
-import {createIcon} from "@/utils/IconUtil";
-import IconSelector from "@/components/IconSelector";
+import IconSelector from '@/components/IconSelector';
+import { putMenuUpdateMenu } from '@/services/system/Menu';
+import { createIcon } from '@/utils/IconUtil';
+import {
+  ModalForm,
+  ProForm,
+  ProFormDependency,
+  ProFormDigit,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Form, Modal, message } from 'antd';
+import React, { useEffect, useState } from 'react';
 // 表单宽度 804 两列
 import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
+import { proIconSelectStyle, proIconSelectWrapStyle } from '../../../../../config/defaultIcon';
 export type FormValueType = {
   target?: string;
   template?: string;
@@ -25,17 +32,19 @@ export type UpdateFormProps = {
   reload: any;
 };
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
-
   const intl = useIntl();
   const [form] = Form.useForm<API.Menu>();
   const [menuIconName, setMenuIconName] = useState<any>();
   const [iconSelectorOpen, setIconSelectorOpen] = useState<boolean>(false);
   const [parentId, setParentId] = useState<number>(0);
-  const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([{label: '根节点', value: 0}]);
+  const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([
+    { label: '根节点', value: 0 },
+  ]);
 
-  useEffect(()=>{
-    setMenuIconName(props.values.icon)
-  }, [props.updateModalOpen])
+  useEffect(() => {
+    setIconSelectorOpen(false);
+    setMenuIconName(props.values.icon);
+  }, [props.updateModalOpen]);
 
   return (
     <ModalForm<API.Menu>
@@ -53,207 +62,297 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        console.log(values)
-        putMenuUpdateMenu(values).then(() => {
-          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
-          props.reload()
-        }).catch(() => {
-          message.error(intl.formatMessage({id: 'common.error', defaultMessage: '$$$'}))
-        })
+        setMenuIconName('');
+        console.log(values);
+        putMenuUpdateMenu(values)
+          .then(() => {
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
+            props.reload();
+          })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.error', defaultMessage: '$$$' }));
+          });
         props.handleModal();
         return true;
       }}
     >
-
       <ProForm.Group>
-        <ProFormText width={proFormItemStyleProps.column2Width} name="id" label="id" disabled={true} initialValue={props.values.id}/>
-        <ProFormSelect width={proFormItemStyleProps.column2Width} name="parentId"
-                       disabled={true}
-                       initialValue={parentId}
-                       request={async () => parentSelectOptions}
-                       label={<FormattedMessage id="system.menu.table.list.parentId" defaultMessage="$$$"/>}
-                       placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.parentId', defaultMessage: '$$$'})}`}
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="id"
+          label="id"
+          disabled={true}
+          initialValue={props.values.id}
+        />
+        <ProFormSelect
+          width={proFormItemStyleProps.column2Width}
+          name="parentId"
+          disabled={true}
+          initialValue={parentId}
+          request={async () => parentSelectOptions}
+          label={<FormattedMessage id="system.menu.table.list.parentId" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_select',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'system.menu.table.list.parentId',
+            defaultMessage: '$$$',
+          })}`}
         />
       </ProForm.Group>
       <ProForm.Group>
-        <ProFormRadio.Group width={proFormItemStyleProps.column2Width} name="type"
-                            required={true}
-                            label={<FormattedMessage id="system.menu.table.list.type" defaultMessage="$$$"/>}
-                            initialValue={props.values.type}
-                            disabled={true}
-                            options={[
-                              {
-                                label: intl.formatMessage({id: 'system.menu.table.list.type_M', defaultMessage: '$$$'}),
-                                value: 'M',
-                              },
-                              {
-                                label: intl.formatMessage({id: 'system.menu.table.list.type_C', defaultMessage: '$$$'}),
-                                value: 'C',
-                              },
-                              {
-                                label: intl.formatMessage({id: 'system.menu.table.list.type_F', defaultMessage: '$$$'}),
-                                value: 'F',
-                              },
-                              {
-                                label: intl.formatMessage({id: 'system.menu.table.list.type_E', defaultMessage: '$$$'}),
-                                value: 'E',
-                              },
-                            ]}>
-
-        </ProFormRadio.Group>
+        <ProFormRadio.Group
+          width={proFormItemStyleProps.column2Width}
+          name="type"
+          required={true}
+          label={<FormattedMessage id="system.menu.table.list.type" defaultMessage="$$$" />}
+          initialValue={props.values.type}
+          disabled={true}
+          options={[
+            {
+              label: intl.formatMessage({
+                id: 'system.menu.table.list.type_M',
+                defaultMessage: '$$$',
+              }),
+              value: 'M',
+            },
+            {
+              label: intl.formatMessage({
+                id: 'system.menu.table.list.type_C',
+                defaultMessage: '$$$',
+              }),
+              value: 'C',
+            },
+            {
+              label: intl.formatMessage({
+                id: 'system.menu.table.list.type_F',
+                defaultMessage: '$$$',
+              }),
+              value: 'F',
+            },
+            {
+              label: intl.formatMessage({
+                id: 'system.menu.table.list.type_E',
+                defaultMessage: '$$$',
+              }),
+              value: 'E',
+            },
+          ]}
+        ></ProFormRadio.Group>
       </ProForm.Group>
       <ProForm.Group>
-        <ProFormText width={proFormItemStyleProps.column2Width} name="title"
-                     label={<FormattedMessage id="system.menu.table.list.title" defaultMessage="$$$"/>}
-                     placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.title', defaultMessage: '$$$'})}`}
-                     required={true}
-                     initialValue={props.values.title}
-                     rules={[
-                       {
-                         required: true,
-                         message: (
-                           <FormattedMessage
-                             id="system.menu.table.rule.required.name"
-                             defaultMessage="name is required"
-                           />
-                         ),
-                       },
-                     ]}
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="title"
+          label={<FormattedMessage id="system.menu.table.list.title" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({ id: 'system.menu.table.list.title', defaultMessage: '$$$' })}`}
+          required={true}
+          initialValue={props.values.title}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="system.menu.table.rule.required.name"
+                  defaultMessage="name is required"
+                />
+              ),
+            },
+          ]}
         />
-        <ProFormDigit width={proFormItemStyleProps.column2Width} fieldProps={{precision: 0}} name="sort"
-                      label={<FormattedMessage id="system.menu.table.list.sort" defaultMessage="$$$"/>}
-                      placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.sort', defaultMessage: '$$$'})}`}
-                      initialValue={props.values.sort}
+        <ProFormDigit
+          width={proFormItemStyleProps.column2Width}
+          fieldProps={{ precision: 0 }}
+          name="sort"
+          label={<FormattedMessage id="system.menu.table.list.sort" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({ id: 'system.menu.table.list.sort', defaultMessage: '$$$' })}`}
+          initialValue={props.values.sort}
         />
       </ProForm.Group>
       <ProFormDependency name={['type']}>
-        {
-          (record) => {
-            let isShow = (record.type !== 'F' && record.type !== 'E')
-            if (isShow) {
-              return (
-                <ProForm.Group>
-                  <ProFormText width={proFormItemStyleProps.column2Width} name="name"
-                               label={<FormattedMessage id="system.menu.table.list.name" defaultMessage="$$$"/>}
-                               placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.name', defaultMessage: '$$$'})}`}
-                               required={true}
-                               initialValue={props.values.name}
-                               rules={[
-                                 {
-                                   required: true,
-                                   message: (
-                                     <FormattedMessage
-                                       id="system.menu.table.rule.required.name"
-                                       defaultMessage="name is required"
-                                     />
-                                   ),
-                                 },
-                               ]}
-                  />
-                  <ProFormText width={proFormItemStyleProps.column2Width} name="path"
-                               label={<FormattedMessage id="system.menu.table.list.path" defaultMessage="$$$"/>}
-                               placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.path', defaultMessage: '$$$'})}`}
-                               required={true}
-                               initialValue={props.values.path}
-                               rules={[
-                                 {
-                                   required: true,
-                                   message: (
-                                     <FormattedMessage
-                                       id="system.menu.table.rule.required.name"
-                                       defaultMessage="name is required"
-                                     />
-                                   ),
-                                 },
-                               ]}
-                  />
-                  <ProFormText width={proFormItemStyleProps.column2Width} name="component"
-                               label={<FormattedMessage id="system.menu.table.list.component" defaultMessage="$$$"/>}
-                               placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.component', defaultMessage: '$$$'})}`}
-                               required={true}
-                                initialValue={props.values.component}
-                               hidden={record.type === 'M'}
-                    // disabled={record.type === 'M'}
-                  />
+        {(record) => {
+          let isShow = record.type !== 'F' && record.type !== 'E';
+          if (isShow) {
+            return (
+              <ProForm.Group>
+                <ProFormText
+                  width={proFormItemStyleProps.column2Width}
+                  name="name"
+                  label={<FormattedMessage id="system.menu.table.list.name" defaultMessage="$$$" />}
+                  placeholder={`${intl.formatMessage({
+                    id: 'common.please_input',
+                    defaultMessage: '$$$',
+                  })}${intl.formatMessage({
+                    id: 'system.menu.table.list.name',
+                    defaultMessage: '$$$',
+                  })}`}
+                  required={true}
+                  initialValue={props.values.name}
+                  rules={[
+                    {
+                      required: true,
+                      message: (
+                        <FormattedMessage
+                          id="system.menu.table.rule.required.name"
+                          defaultMessage="name is required"
+                        />
+                      ),
+                    },
+                  ]}
+                />
+                <ProFormText
+                  width={proFormItemStyleProps.column2Width}
+                  name="path"
+                  label={<FormattedMessage id="system.menu.table.list.path" defaultMessage="$$$" />}
+                  placeholder={`${intl.formatMessage({
+                    id: 'common.please_input',
+                    defaultMessage: '$$$',
+                  })}${intl.formatMessage({
+                    id: 'system.menu.table.list.path',
+                    defaultMessage: '$$$',
+                  })}`}
+                  required={true}
+                  initialValue={props.values.path}
+                  rules={[
+                    {
+                      required: true,
+                      message: (
+                        <FormattedMessage
+                          id="system.menu.table.rule.required.name"
+                          defaultMessage="name is required"
+                        />
+                      ),
+                    },
+                  ]}
+                />
+                <ProFormText
+                  width={proFormItemStyleProps.column2Width}
+                  name="component"
+                  label={
+                    <FormattedMessage id="system.menu.table.list.component" defaultMessage="$$$" />
+                  }
+                  placeholder={`${intl.formatMessage({
+                    id: 'common.please_input',
+                    defaultMessage: '$$$',
+                  })}${intl.formatMessage({
+                    id: 'system.menu.table.list.component',
+                    defaultMessage: '$$$',
+                  })}`}
+                  required={true}
+                  initialValue={props.values.component}
+                  hidden={record.type === 'M'}
+                  // disabled={record.type === 'M'}
+                />
 
-                  <ProFormSelect
-                    width={proFormItemStyleProps.column2Width}
-                    name="icon"
-                    label={intl.formatMessage({
-                      id: 'system.menu.table.list.icon',
-                      defaultMessage: '$$$',
-                    })}
-                    valueEnum={{}}
-                    hidden={record.type !== 'M'}
-                    addonBefore={createIcon(menuIconName)}
-                    fieldProps={{
-                      onClick: () => {
-                        setIconSelectorOpen(true);
-                      },
-                    }}
-                    initialValue={props.values.icon}
-                    placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.icon', defaultMessage: '$$$'})}`}
-                    rules={[
-                      {
-                        required: false,
-                        message: <FormattedMessage id="请选择菜单图标！" defaultMessage="请选择菜单图标！"/>,
-                      },
-                    ]}
-                  />
-                </ProForm.Group>
-              )
-            }
+                <ProFormSelect
+                  width={proFormItemStyleProps.column2Width}
+                  name="icon"
+                  label={intl.formatMessage({
+                    id: 'system.menu.table.list.icon',
+                    defaultMessage: '$$$',
+                  })}
+                  valueEnum={{}}
+                  hidden={record.type !== 'M'}
+                  addonBefore={createIcon(menuIconName)}
+                  fieldProps={{
+                    labelInValue: true,
+                    notFoundContent: null, // 将选项内容为空隐去，使用自定义的图标选择组件
+                    filterOption: false,
+                    onClick: () => {
+                      setIconSelectorOpen(!iconSelectorOpen);
+                    },
+                    onClear: () => {
+                      setMenuIconName('');
+                    },
+                  }}
+                  initialValue={props.values.icon}
+                  placeholder={`${intl.formatMessage({
+                    id: 'common.please_select',
+                    defaultMessage: '$$$',
+                  })}${intl.formatMessage({
+                    id: 'system.menu.table.list.icon',
+                    defaultMessage: '$$$',
+                  })}`}
+                  rules={[
+                    {
+                      required: false,
+                      message: (
+                        <FormattedMessage id="请选择菜单图标！" defaultMessage="请选择菜单图标！" />
+                      ),
+                    },
+                  ]}
+                />
+                                <div style={proIconSelectWrapStyle}>
+                  {iconSelectorOpen ? (
+                    <div style={proIconSelectStyle}>
+                      <IconSelector
+                        onSelect={(name: string) => {
+                          form.setFieldsValue({ icon: name });
+                          setMenuIconName(name);
+                          setIconSelectorOpen(false);
+                        }}
+                      />
+                    </div>
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </ProForm.Group>
+            );
           }
-        }
-
+        }}
       </ProFormDependency>
       <ProForm.Group>
         <ProFormDependency name={['type']}>
-          {
-            (record) => {
-              return (
-                <ProFormText width={proFormItemStyleProps.column2Width} name="permission"
-                             initialValue={props.values.permission}
-                             label={<FormattedMessage id="system.menu.table.list.permission" defaultMessage="$$$"/>}
-                             placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.permission', defaultMessage: '$$$'})}`}
-                             disabled={record.type === 'M'}
-                />
-              )
-            }
-          }
-
+          {(record) => {
+            return (
+              <ProFormText
+                width={proFormItemStyleProps.column2Width}
+                name="permission"
+                initialValue={props.values.permission}
+                label={
+                  <FormattedMessage id="system.menu.table.list.permission" defaultMessage="$$$" />
+                }
+                placeholder={`${intl.formatMessage({
+                  id: 'common.please_input',
+                  defaultMessage: '$$$',
+                })}${intl.formatMessage({
+                  id: 'system.menu.table.list.permission',
+                  defaultMessage: '$$$',
+                })}`}
+                disabled={record.type === 'M'}
+              />
+            );
+          }}
         </ProFormDependency>
       </ProForm.Group>
       <ProForm.Group>
-        <ProFormText width={proFormItemStyleProps.column2Width} name="remark"
-                     initialValue={props.values.remark}
-                     label={<FormattedMessage id="system.menu.table.list.remark" defaultMessage="$$$"/>}
-                     placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.remark', defaultMessage: '$$$'})}`}
-                     required={false}/>
-        <ProFormSwitch width={proFormItemStyleProps.column2Width} name="hidden" initialValue={props.values.hidden}
-                       label={<FormattedMessage id="system.menu.table.list.hidden" defaultMessage="$$$"/>}
-                       required={false}>
-
-        </ProFormSwitch>
-      </ProForm.Group>
-      <Modal
-        width={800}
-        open={iconSelectorOpen}
-        onCancel={() => {
-          setIconSelectorOpen(false);
-        }}
-        footer={null}
-      >
-        <IconSelector
-          onSelect={(name: string) => {
-            form.setFieldsValue({icon: name});
-            setMenuIconName(name);
-            setIconSelectorOpen(false);
-          }}
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="remark"
+          initialValue={props.values.remark}
+          label={<FormattedMessage id="system.menu.table.list.remark" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({ id: 'system.menu.table.list.remark', defaultMessage: '$$$' })}`}
+          required={false}
         />
-      </Modal>
-
-
-    </ModalForm>)
-}
+        <ProFormSwitch
+          width={proFormItemStyleProps.column2Width}
+          name="hidden"
+          initialValue={props.values.hidden}
+          label={<FormattedMessage id="system.menu.table.list.hidden" defaultMessage="$$$" />}
+          required={false}
+        ></ProFormSwitch>
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
 export default UpdateForm;
diff --git a/src/utils/IconUtil.ts b/src/utils/IconUtil.ts
index 31102ee..19446c4 100644
--- a/src/utils/IconUtil.ts
+++ b/src/utils/IconUtil.ts
@@ -8,7 +8,11 @@ export function getIcon(name: string): React.ReactNode | string {
   return icon || '';
 }
 
-export function createIcon(icon: string | any): React.ReactNode | string {
+export function createIcon(icon?: string | any): React.ReactNode | string {
+  if(!icon){
+    return ''
+  }
+  console.log(icon,'createIcon_icon')
   if (typeof icon === 'object') {
     return icon;
   }