fix: 修复左侧菜单对图标的支持的问题

调整prettier配置让尖括号换行
删除不合适的示例代码

Author: chj_damon

.prettierrc.js

@@ -4,7 +4,7 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   bracketSpacing: true,
-  jsxBracketSameLine: true,
+  jsxBracketSameLine: false,
   arrowParens: 'avoid',
   insertPragma: false,
   tabWidth: 2,

config/config.prod.ts

@@ -46,7 +46,7 @@ export default defineConfig({
     { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' },
     {
       rel: 'stylesheet',
-      href: '//at.alicdn.com/t/font_1509107_vaarx0n4zz.css',
+      href: '//at.alicdn.com/t/font_1905159_jylqduh3ufd.css',
     },
   ],
   inlineLimit: 10,

config/config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
     { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' },
     {
       rel: 'stylesheet',
-      href: '//at.alicdn.com/t/font_1509107_vaarx0n4zz.css',
+      href: '//at.alicdn.com/t/font_1905159_jylqduh3ufd.css',
     },
   ],
   chainWebpack(config) {

config/routeConfig.ts

@@ -22,13 +22,7 @@ export default [
         routes: [
           { path: '/', redirect: '/homepage' },
           { path: '/homepage', component: './homepage', title: '首页' },
-          {
-            path: '/hotel',
-            component: './hotel',
-            routes: [
-              { path: '/hotel/hotelInfo', component: './hotel/HotelInfo', title: '酒店基本信息' },
-            ],
-          },
+          { path: '/hotel/hotelInfo', component: './hotel/hotelInfo', title: '酒店基本信息' },
         ],
       },
       { path: '*', component: './404' },

mock/route.ts

@@ -6,11 +6,13 @@ export default {
         name: 'homepage',
         apiUrl: '/homepage',
         description: '首页',
+        icon: 'iconyunyingguanli',
       },
       {
         name: 'hotel',
-        apiUrl: '/hotel',
-        description: '酒店',
+        apiUrl: '/hotel/hotelInfo',
+        description: '酒店基本信息',
+        icon: 'icongongsi',
       },
     ],
     code: 20000,

src/app.ts

@@ -30,7 +30,7 @@ export async function getInitialState() {
           type: 'asc',
         });
         const flatRoutes = arrayUtils.deepFlatten(routes);
-        flatRoutes.forEach((route) => {
+        flatRoutes.forEach(route => {
           if (route.privilegeList) {
             privileges.push(...route.privilegeList);
           }
@@ -53,20 +53,20 @@ export async function getInitialState() {
  * @param resources
  */
 function convertResourceToMenu(list: PrivilegeResource[]): MenuDataItem[] {
-  return list.map((item) => {
+  return list.map(item => {
     if (item.children && item.children.length > 0) {
       return {
         name: item.description,
         key: `${item.apiUrl}`,
-        customIcon: item.icon,
+        icon: item.icon,
         path: item.apiUrl,
         children: convertResourceToMenu(item.children),
       };
     }
     return {
       name: item.description,
       key: `${item.apiUrl}`,
-      customIcon: item.icon,
+      icon: item.icon,
       path: item.apiUrl,
     };
   });

src/components/Iconfont/index.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
 interface IconfontProps {
   name: string;
   className?: string;
-  style?: any;
+  style?: CSSProperties;
 }
 /** 自定义图标 */
 const Iconfont: React.FC<IconfontProps> = (props: IconfontProps) => {

src/components/Loading.tsx

@@ -10,7 +10,8 @@ export default function Loading() {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-      }}>
+      }}
+    >
       <Spin size="large" />
     </div>
   );

src/layouts/BasicLayout/index.module.less

@@ -1,3 +1,4 @@
+
 .basic-layout {
   width: 100%;
 
@@ -7,5 +8,37 @@
       min-height: calc(100vh - 64px - 32px);
       margin: 16px;
     }
+    .ant-menu .ant-menu-item {
+      padding: 0 16px !important;
+    }
+    .ant-menu-item .iconfont {
+      min-width: 14px;
+      margin-right: 10px;
+      font-size: 14px;
+      transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s
+    }
+    .ant-menu-item .iconfont + span {
+      opacity: 1;
+      transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s;
+    }
+
+    .ant-menu-dark .ant-menu-item .iconfont {
+      color: #fff;
+    }
+    .ant-menu-inline-collapsed .ant-menu-item .iconfont {
+      margin: 0;
+      font-size: 16px;
+      line-height: 40px;
+      display: inline-block;
+    }
+
+    .ant-menu-dark .ant-menu-item span.ant-pro-menu-item-title {
+      transition: none;
+    }
+    .ant-menu-inline-collapsed .ant-menu-item .iconfont + span.ant-pro-menu-item-title {
+      display: inline-block;
+      max-width: 0;
+      opacity: 0;
+    }
   }
 }

src/layouts/BasicLayout/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ProLayout from '@ant-design/pro-layout';
+import ProLayout, { MenuDataItem } from '@ant-design/pro-layout';
 import type { IRouteComponentProps } from 'umi';
 import { Link, useModel } from 'umi';
 import Iconfont from '@/components/Iconfont';
@@ -8,53 +8,35 @@ import Logo from './components/Logo';
 import defaultSettings from './defaultSettings';
 import styles from './index.module.less';
 
+const iconMap = {
+  iconyunyingguanli: <Iconfont name="iconyunyingguanli" style={{ marginRight: 10 }} />,
+  icongongsi: <Iconfont name="icongongsi" style={{ marginRight: 10 }} />,
+};
 export default function BasicLayout(props: IRouteComponentProps) {
   const [collapsed, handleMenuCollapse] = useState<boolean>(false);
   const { initialState } = useModel('@@initialState');
 
   const { menus = [] } = initialState!;
-  const menuDataRender = () => menus;
+
+  const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
+    menus.map(({ icon, children, ...item }) => ({
+      ...item,
+      icon: icon && iconMap[icon as string],
+      children: children && loopMenuItem(children),
+    }));
 
   return (
     <ProLayout
       className={styles['basic-layout']}
       logo={<Logo />}
       collapsed={collapsed}
       onCollapse={handleMenuCollapse}
-      menuHeaderRender={(logoDom, titleDom) => (
-        <Link to="/">
-          {logoDom}
-          {titleDom}
-        </Link>
-      )}
+      menuDataRender={() => loopMenuItem(menus)}
       menuItemRender={(menuItemProps, defaultDom) => {
-        return (
-          <Link to={menuItemProps.path || '/'}>
-            <span>
-              {menuItemProps.customIcon && (
-                <Iconfont
-                  name={menuItemProps.customIcon}
-                  style={{ marginRight: 10, fontSize: 17 }}
-                />
-              )}
-            </span>
-            <span>{defaultDom}</span>
-          </Link>
-        );
-      }}
-      subMenuItemRender={(menuItemProps: any, defaultDom: any) => {
-        return (
-          <span>
-            {menuItemProps.customIcon && (
-              <Iconfont name={menuItemProps.customIcon} style={{ marginRight: 10, fontSize: 17 }} />
-            )}
-            <span>{defaultDom}</span>
-          </span>
-        );
+        return <Link to={menuItemProps.path || '/'}>{defaultDom}</Link>;
       }}
       rightContentRender={(/** props: HeaderViewProps */) => <CustomHeaderRight />}
       onMenuHeaderClick={() => props.history.push('/')}
-      menuDataRender={menuDataRender}
       {...defaultSettings}
     >
       {props.children}