From 1bc93f81542b0aeb6d3106535a76126f4b1d7e6b Mon Sep 17 00:00:00 2001 From: chj_damon Date: Wed, 14 Apr 2021 16:19:55 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=B7=A6=E4=BE=A7?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=AF=B9=E5=9B=BE=E6=A0=87=E7=9A=84=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 调整prettier配置让尖括号换行 删除不合适的示例代码 --- .prettierrc.js | 2 +- config/config.prod.ts | 2 +- config/config.ts | 2 +- config/routeConfig.ts | 8 +--- mock/route.ts | 6 ++- src/app.ts | 8 ++-- src/components/Iconfont/index.tsx | 4 +- src/components/Loading.tsx | 3 +- src/layouts/BasicLayout/index.module.less | 33 ++++++++++++++++ src/layouts/BasicLayout/index.tsx | 46 +++++++---------------- src/layouts/index.tsx | 7 ++-- src/pages/404.tsx | 3 +- src/pages/hotel/HotelInfo/index.tsx | 23 +----------- src/pages/hotel/HotelMetaInfo/index.tsx | 13 ------- src/pages/hotel/HotelOtherInfo/index.tsx | 10 ----- src/pages/hotel/hotelInfo/index.tsx | 11 ++++++ src/pages/hotel/index.tsx | 18 --------- src/pages/hotel/useHotelService.test.ts | 13 ------- src/pages/hotel/useHotelService.ts | 27 ------------- 19 files changed, 82 insertions(+), 157 deletions(-) delete mode 100644 src/pages/hotel/HotelMetaInfo/index.tsx delete mode 100644 src/pages/hotel/HotelOtherInfo/index.tsx create mode 100644 src/pages/hotel/hotelInfo/index.tsx delete mode 100644 src/pages/hotel/index.tsx delete mode 100644 src/pages/hotel/useHotelService.test.ts delete mode 100644 src/pages/hotel/useHotelService.ts diff --git a/.prettierrc.js b/.prettierrc.js index a7ff1e5..2eb69f6 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -4,7 +4,7 @@ module.exports = { singleQuote: true, trailingComma: 'all', bracketSpacing: true, - jsxBracketSameLine: true, + jsxBracketSameLine: false, arrowParens: 'avoid', insertPragma: false, tabWidth: 2, diff --git a/config/config.prod.ts b/config/config.prod.ts index 94e40cf..1d35fbf 100644 --- a/config/config.prod.ts +++ b/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, diff --git a/config/config.ts b/config/config.ts index d0429f2..65b6083 100644 --- a/config/config.ts +++ b/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) { diff --git a/config/routeConfig.ts b/config/routeConfig.ts index 2033405..c8e278f 100644 --- a/config/routeConfig.ts +++ b/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' }, diff --git a/mock/route.ts b/mock/route.ts index 9f0c077..4389fc6 100644 --- a/mock/route.ts +++ b/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, diff --git a/src/app.ts b/src/app.ts index 70636f4..01d9bbb 100644 --- a/src/app.ts +++ b/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,12 +53,12 @@ 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), }; @@ -66,7 +66,7 @@ function convertResourceToMenu(list: PrivilegeResource[]): MenuDataItem[] { return { name: item.description, key: `${item.apiUrl}`, - customIcon: item.icon, + icon: item.icon, path: item.apiUrl, }; }); diff --git a/src/components/Iconfont/index.tsx b/src/components/Iconfont/index.tsx index f25841f..31cbaac 100644 --- a/src/components/Iconfont/index.tsx +++ b/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 = (props: IconfontProps) => { diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx index a3d79e5..53ae6d7 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -10,7 +10,8 @@ export default function Loading() { display: 'flex', justifyContent: 'center', alignItems: 'center', - }}> + }} + > ); diff --git a/src/layouts/BasicLayout/index.module.less b/src/layouts/BasicLayout/index.module.less index 1e014c1..052d25a 100644 --- a/src/layouts/BasicLayout/index.module.less +++ b/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; + } } } diff --git a/src/layouts/BasicLayout/index.tsx b/src/layouts/BasicLayout/index.tsx index 6e40b9a..d4c7f76 100644 --- a/src/layouts/BasicLayout/index.tsx +++ b/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,12 +8,22 @@ import Logo from './components/Logo'; import defaultSettings from './defaultSettings'; import styles from './index.module.less'; +const iconMap = { + iconyunyingguanli: , + icongongsi: , +}; export default function BasicLayout(props: IRouteComponentProps) { const [collapsed, handleMenuCollapse] = useState(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 ( } collapsed={collapsed} onCollapse={handleMenuCollapse} - menuHeaderRender={(logoDom, titleDom) => ( - - {logoDom} - {titleDom} - - )} + menuDataRender={() => loopMenuItem(menus)} menuItemRender={(menuItemProps, defaultDom) => { - return ( - - - {menuItemProps.customIcon && ( - - )} - - {defaultDom} - - ); - }} - subMenuItemRender={(menuItemProps: any, defaultDom: any) => { - return ( - - {menuItemProps.customIcon && ( - - )} - {defaultDom} - - ); + return {defaultDom}; }} rightContentRender={(/** props: HeaderViewProps */) => } onMenuHeaderClick={() => props.history.push('/')} - menuDataRender={menuDataRender} {...defaultSettings} > {props.children} diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index c46bd0b..7d42510 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -14,8 +14,8 @@ export default (props: IRouteComponentProps) => { } - getPopupContainer={trigger => trigger.parentElement || document.body} - form={{ validateMessages }}> + form={{ validateMessages }} + > { // compare(a, b) /** 用于检测是否暂停重新验证的函数，当返回 true 时将忽略所请求的数据和错误。默认返回 false */ // isPaused() - }}> + }} + > {props.children} diff --git a/src/pages/404.tsx b/src/pages/404.tsx index e413f8e..79381bd 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -9,7 +9,8 @@ export default () => { display: 'flex', justifyContent: 'center', alignItems: 'center', - }}> + }} + >
对不起，您访问的页面不存在
diff --git a/src/pages/hotel/HotelInfo/index.tsx b/src/pages/hotel/HotelInfo/index.tsx index 7deecf2..23bb42d 100644 --- a/src/pages/hotel/HotelInfo/index.tsx +++ b/src/pages/hotel/HotelInfo/index.tsx @@ -1,30 +1,11 @@ -import { Button } from 'antd'; +import React from 'react'; import { Link } from 'umi'; -import React, { useContext } from 'react'; -import { HotelDispatchContext } from '../useHotelService'; -import HotelOtherInfo from '../HotelOtherInfo'; -import HotelMetaInfo from '../HotelMetaInfo'; export default function HotelInfo() { - const {setValue, setName} = useContext(HotelDispatchContext); - - const changeValue = () => { - setValue(Math.random() * 100); - }; - - const changeName = () => { - setName((Math.random() * 100).toFixed(2)); - }; - - console.log('222') return (
酒店基本信息
- - homepage - -
); -}; +} diff --git a/src/pages/hotel/HotelMetaInfo/index.tsx b/src/pages/hotel/HotelMetaInfo/index.tsx deleted file mode 100644 index ef04d45..0000000 --- a/src/pages/hotel/HotelMetaInfo/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { useContext, useMemo } from 'react'; -import { HotelStateContext } from '../useHotelService'; - -export default function HotelMetaInfo() { - const {name} = useContext(HotelStateContext); - - console.log('444') - return useMemo(() => ( -
- name: {name} -
- ), [name]); -}; diff --git a/src/pages/hotel/HotelOtherInfo/index.tsx b/src/pages/hotel/HotelOtherInfo/index.tsx deleted file mode 100644 index 1bf1faa..0000000 --- a/src/pages/hotel/HotelOtherInfo/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React, { useContext, useMemo } from 'react'; -import { HotelStateContext } from '../useHotelService'; - -export default function HotelOtherInfo() { - const {value} = useContext(HotelStateContext); - - console.log('333') - return useMemo(() => (
value：{value}
), [value]); -}; - diff --git a/src/pages/hotel/hotelInfo/index.tsx b/src/pages/hotel/hotelInfo/index.tsx new file mode 100644 index 0000000..23bb42d --- /dev/null +++ b/src/pages/hotel/hotelInfo/index.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Link } from 'umi'; + +export default function HotelInfo() { + return ( +
+
酒店基本信息
+ homepage +
+ ); +} diff --git a/src/pages/hotel/index.tsx b/src/pages/hotel/index.tsx deleted file mode 100644 index 7c854d2..0000000 --- a/src/pages/hotel/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { useMemo } from 'react'; -import type { IRouteComponentProps } from 'umi'; - -import useHotelService, { HotelDispatchContext, HotelStateContext } from './useHotelService'; - -export default function Hotel(props: IRouteComponentProps) { - const {setValue, setName, value, name} = useHotelService(); - - const dispatchValues = useMemo(() => ({setValue, setName}), [setValue, setName]); - - const stateValues = useMemo(() => ({ value, name }), [value, name]); - - return - - {props.children} - - ; -} diff --git a/src/pages/hotel/useHotelService.test.ts b/src/pages/hotel/useHotelService.test.ts deleted file mode 100644 index 1e88e59..0000000 --- a/src/pages/hotel/useHotelService.test.ts +++ /dev/null @@ -1,13 +0,0 @@ -import fetch, { enableFetchMocks } from 'jest-fetch-mock'; - -describe('useHotelService', () => { - beforeEach(() => { - enableFetchMocks(); - }); - - test('should have hotel info after delay', async () => { - fetch.mockResponseOnce( - JSON.stringify({ success: true, data: [{ apiUrl: '123', comment: 'test' }] }), - ); - }); -}); diff --git a/src/pages/hotel/useHotelService.ts b/src/pages/hotel/useHotelService.ts deleted file mode 100644 index e000f0b..0000000 --- a/src/pages/hotel/useHotelService.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { useCallback, useState } from 'react'; -import getContextService from '@/utils/getContextService'; - -export default function useHotelService() { - const [value, setValue] = useState(0); - const [name, setName] = useState(''); - - const changeValue = useCallback((val: number) => { - setValue(val); - }, []); - - const changeName = useCallback((name: string) => { - setName(name); - }, []); - - return { - value, - name, - setValue: changeValue, - setName: changeName, - }; -} - -type ServiceReturnType = ReturnType; - -export const HotelDispatchContext = getContextService>(); -export const HotelStateContext = getContextService>();