From fab65e2dd5bf9ee08f2b1cbed5d5f043971c4200 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Fri, 26 Jul 2024 15:12:44 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=96=B0=E5=BB=BAbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/app.tsx | 4 +- .../components/MenuIconSelector/index.less | 32 ++++ .../src/components/MenuIconSelector/index.tsx | 62 +++++++ react-ui/src/iconfont/iconfont.json | 163 ++++++++++++++++++ react-ui/src/pages/System/Menu/edit.tsx | 92 +++++----- 5 files changed, 299 insertions(+), 54 deletions(-) create mode 100644 react-ui/src/components/MenuIconSelector/index.less create mode 100644 react-ui/src/components/MenuIconSelector/index.tsx create mode 100644 react-ui/src/iconfont/iconfont.json diff --git a/react-ui/src/app.tsx b/react-ui/src/app.tsx index d6accb3..ff14f8c 100644 --- a/react-ui/src/app.tsx +++ b/react-ui/src/app.tsx @@ -181,7 +181,7 @@ export const patchClientRoutes: RuntimeConfig['patchClientRoutes'] = (e) => { }; export function render(oldRender: () => void) { - //console.log('render'); + // console.log('render'); const token = getAccessToken(); if (!token || token?.length === 0) { oldRender(); @@ -193,7 +193,6 @@ export function render(oldRender: () => void) { oldRender(); }) .catch(() => { - setRemoteMenu([]); oldRender(); }); } @@ -208,6 +207,7 @@ export const antd: RuntimeAntdConfig = (memo) => { colorWarning: themes['warningColor'], colorLink: themes['primaryColor'], colorText: themes['textColor'], + controlHeightLG: 46, }; memo.theme.components ??= {}; memo.theme.components.Tabs = {}; diff --git a/react-ui/src/components/MenuIconSelector/index.less b/react-ui/src/components/MenuIconSelector/index.less new file mode 100644 index 0000000..c4b134b --- /dev/null +++ b/react-ui/src/components/MenuIconSelector/index.less @@ -0,0 +1,32 @@ +.menu-icon-selector { + // grid 布局，每行显示 8 个图标 + display: grid; + grid-auto-rows: 1fr; + grid-template-columns: repeat(4, 1fr); + + &__item { + display: flex; + align-items: center; + justify-content: center; + height: 80px; + cursor: pointer; + + &__icon { + display: block; + } + + &__icon--active { + display: none; + } + + &:hover &__icon, + &:active &__icon { + display: none; + } + + &:hover &__icon--active, + &:active &__icon--active { + display: block; + } + } +} diff --git a/react-ui/src/components/MenuIconSelector/index.tsx b/react-ui/src/components/MenuIconSelector/index.tsx new file mode 100644 index 0000000..2709c22 --- /dev/null +++ b/react-ui/src/components/MenuIconSelector/index.tsx @@ -0,0 +1,62 @@ +import KFIcon from '@/components/KFIcon'; +import KFModal from '@/components/KFModal'; +import iconData from '@/iconfont/iconfont.json'; +import { type ModalProps } from 'antd'; +import { useEffect, useState } from 'react'; +import styles from './index.less'; + +interface MenuIconSelectorProps extends Omit { + selectedIcon?: string; + onOk: (param: string) => void; +} + +type IconObject = { + icon_id: string; + font_class: string; +}; + +function MenuIconSelector({ open, selectedIcon, onOk, ...rest }: MenuIconSelectorProps) { + const [icons, setIcons] = useState([]); + useEffect(() => { + const glyphs = iconData.glyphs as IconObject[]; + setIcons(glyphs.filter((item) => !item.font_class.endsWith('-active'))); + }, []); + + return ( + +
+ {icons.map((icon) => ( +
onOk(icon.font_class)} + > + + +
+ ))} +
+ + ); +} + +export default MenuIconSelector; diff --git a/react-ui/src/iconfont/iconfont.json b/react-ui/src/iconfont/iconfont.json new file mode 100644 index 0000000..db913c6 --- /dev/null +++ b/react-ui/src/iconfont/iconfont.json @@ -0,0 +1,163 @@ +{ + "id": "4511326", + "name": "复杂智能软件-导航", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "40233218", + "name": "操作手册-active", + "font_class": "manual-icon-active", + "unicode": "e62c", + "unicode_decimal": 58924 + }, + { + "icon_id": "40233217", + "name": "操作手册", + "font_class": "manual-icon", + "unicode": "e62d", + "unicode_decimal": 58925 + }, + { + "icon_id": "40171713", + "name": "监控运维-active", + "font_class": "monitor-icon-active", + "unicode": "e627", + "unicode_decimal": 58919 + }, + { + "icon_id": "40171711", + "name": "监控运维", + "font_class": "monitor-icon", + "unicode": "e629", + "unicode_decimal": 58921 + }, + { + "icon_id": "40171710", + "name": "开发环境-active", + "font_class": "developmentEnvironment-icon-active", + "unicode": "e62a", + "unicode_decimal": 58922 + }, + { + "icon_id": "40171699", + "name": "开发环境", + "font_class": "developmentEnvironment-icon", + "unicode": "e62b", + "unicode_decimal": 58923 + }, + { + "icon_id": "39969575", + "name": "系统管理", + "font_class": "system-icon", + "unicode": "e618", + "unicode_decimal": 58904 + }, + { + "icon_id": "39969573", + "name": "流水线-active", + "font_class": "workflow-icon-active", + "unicode": "e61a", + "unicode_decimal": 58906 + }, + { + "icon_id": "39969569", + "name": "数据准备-active", + "font_class": "datasetPreparation-icon-active", + "unicode": "e61c", + "unicode_decimal": 58908 + }, + { + "icon_id": "39969568", + "name": "数据准备", + "font_class": "datasetPreparation-icon", + "unicode": "e61d", + "unicode_decimal": 58909 + }, + { + "icon_id": "39969570", + "name": "模型在线部署", + "font_class": "modelDseployment-icon", + "unicode": "e61e", + "unicode_decimal": 58910 + }, + { + "icon_id": "39969567", + "name": "流水线", + "font_class": "workflow-icon", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "39969566", + "name": "AI资产管理-active", + "font_class": "aiAsset-icon-active", + "unicode": "e620", + "unicode_decimal": 58912 + }, + { + "icon_id": "39969563", + "name": "AI资产管理", + "font_class": "aiAsset-icon", + "unicode": "e621", + "unicode_decimal": 58913 + }, + { + "icon_id": "39969580", + "name": "工作空间", + "font_class": "workspace-icon", + "unicode": "e611", + "unicode_decimal": 58897 + }, + { + "icon_id": "39969572", + "name": "模型开发-active", + "font_class": "model-icon-active", + "unicode": "e610", + "unicode_decimal": 58896 + }, + { + "icon_id": "39969579", + "name": "系统管理-active", + "font_class": "system-icon-active", + "unicode": "e612", + "unicode_decimal": 58898 + }, + { + "icon_id": "39969578", + "name": "模型在线部署-active", + "font_class": "modelDseployment-icon-active", + "unicode": "e613", + "unicode_decimal": 58899 + }, + { + "icon_id": "39969565", + "name": "模型开发", + "font_class": "model-icon", + "unicode": "e614", + "unicode_decimal": 58900 + }, + { + "icon_id": "39969577", + "name": "应用开发", + "font_class": "appsDeployment-icon", + "unicode": "e615", + "unicode_decimal": 58901 + }, + { + "icon_id": "39969576", + "name": "工作空间-active", + "font_class": "workspace-icon-active", + "unicode": "e616", + "unicode_decimal": 58902 + }, + { + "icon_id": "39969574", + "name": "应用开发-active", + "font_class": "appsDeployment-icon-active", + "unicode": "e617", + "unicode_decimal": 58903 + } + ] +} diff --git a/react-ui/src/pages/System/Menu/edit.tsx b/react-ui/src/pages/System/Menu/edit.tsx index db4e6e8..e8ac269 100644 --- a/react-ui/src/pages/System/Menu/edit.tsx +++ b/react-ui/src/pages/System/Menu/edit.tsx @@ -1,7 +1,7 @@ import { DictValueEnumObj } from '@/components/DictTag'; -import IconSelector from '@/components/IconSelector'; import KFModal from '@/components/KFModal'; -import { createIcon } from '@/utils/IconUtil'; +import MenuIconSelector from '@/components/MenuIconSelector'; +import { openAntdModal } from '@/utils/modal'; import { ProForm, ProFormDigit, @@ -27,31 +27,39 @@ export type MenuFormProps = { menuTree: DataNode[]; }; +const formLayout = { + labelCol: { span: 8 }, + wrapperCol: { span: 16 }, +}; + +const formItemLayout = { + labelCol: { span: 4 }, + wrapperCol: { span: 20 }, +}; + const MenuForm: React.FC = (props) => { const [form] = Form.useForm(); - - const [menuTypeId, setMenuTypeId] = useState('M'); + const [menuTypeId, setMenuTypeId] = useState(); const [menuIconName, setMenuIconName] = useState(); - const [iconSelectorOpen, setIconSelectorOpen] = useState(false); - const { menuTree, visibleOptions, statusOptions } = props; useEffect(() => { form.resetFields(); setMenuIconName(props.values.icon); + setMenuTypeId(props.values.menuType ?? 'M'); form.setFieldsValue({ menuId: props.values.menuId, menuName: props.values.menuName, - parentId: props.values.parentId, - orderNum: props.values.orderNum, + parentId: props.values.parentId ?? 0, + orderNum: props.values.orderNum ?? 1, path: props.values.path, component: props.values.component, query: props.values.query, - isFrame: props.values.isFrame, - isCache: props.values.isCache, - menuType: props.values.menuType, - visible: props.values.visible, - status: props.values.status, + isFrame: props.values.isFrame ?? '1', + isCache: props.values.isCache ?? '1', + menuType: props.values.menuType ?? 'M', + visible: props.values.visible ?? Object.keys(visibleOptions)[0], + status: props.values.status ?? Object.keys(statusOptions)[0], perms: props.values.perms, icon: props.values.icon, createBy: props.values.createBy, @@ -73,9 +81,20 @@ const MenuForm: React.FC = (props) => { props.onSubmit(values as MenuFormData); }; + const selectIcon = () => { + const { close } = openAntdModal(MenuIconSelector, { + selectedIcon: menuIconName, + onOk: (icon) => { + setMenuIconName(icon); + form.setFieldsValue({ icon }); + close(); + }, + }); + }; + return ( = (props) => { submitter={false} layout="horizontal" onFinish={handleFinish} + {...formLayout} + size="large" > = (props) => { ]} /> = (props) => { ), }, ]} - fieldProps={{ - defaultValue: 0, - }} /> = (props) => { }, ]} fieldProps={{ - defaultValue: 'M', onChange: (e) => { setMenuTypeId(e.target.value); }, }} /> = (props) => { })} valueEnum={{}} hidden={menuTypeId === 'F'} - addonBefore={createIcon(menuIconName)} + // addonBefore={createIcon(menuIconName)} fieldProps={{ onClick: () => { - setIconSelectorOpen(true); + selectIcon(); }, }} placeholder="请输入菜单图标" @@ -209,9 +229,6 @@ const MenuForm: React.FC = (props) => { message: , }, ]} - fieldProps={{ - defaultValue: 1, - }} /> = (props) => { 0: '是', 1: '否', }} - initialValue="1" label={intl.formatMessage({ id: 'system.menu.is_frame', defaultMessage: '是否为外链', @@ -235,9 +251,6 @@ const MenuForm: React.FC = (props) => { ), }, ]} - fieldProps={{ - defaultValue: '1', - }} /> = (props) => { message: , }, ]} - fieldProps={{ - defaultValue: 0, - }} /> = (props) => { message: , }, ]} - fieldProps={{ - defaultValue: '0', - }} /> = (props) => { message: , }, ]} - fieldProps={{ - defaultValue: '0', - }} /> - { - setIconSelectorOpen(false); - }} - footer={null} - > - { - form.setFieldsValue({ icon: name }); - setMenuIconName(name); - setIconSelectorOpen(false); - }} - /> - ); };