From e6041107c5fb2f8509ed883f5793cd8af75997b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Sat, 7 Aug 2021 17:38:27 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9aside=E5=92=8Ccontent?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/index.scss | 71 +++++++++++++++++++++------------------ src/layouts/index.tsx | 8 +++-- src/router/asyncRoutes.ts | 3 +- 3 files changed, 45 insertions(+), 37 deletions(-) diff --git a/src/layouts/index.scss b/src/layouts/index.scss index 3783ed6..490f3d1 100644 --- a/src/layouts/index.scss +++ b/src/layouts/index.scss @@ -21,45 +21,50 @@ } } } -.app-sider{ - .app-logo { - background:#2b2f3a; - height: 64px; - line-height: 64px; - overflow: hidden; - .app-logo-img{ - width: 60px; - margin-left: 25px; - animation: app-logo-spin infinite 10s linear; - } - @keyframes app-logo-spin { - from { - transform: rotate(0deg); +.sider-box { + height: 100vh; + overflow: auto; + .app-sider{ + height: 100%; + .app-logo { + background:#2b2f3a; + height: 64px; + line-height: 64px; + overflow: hidden; + .app-logo-img{ + width: 60px; + margin-left: 25px; + animation: app-logo-spin infinite 10s linear; + } + @keyframes app-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } - to { - transform: rotate(360deg); + h1{ + display: inline-block; + color:#fff; + font-size: 18px; + text-align: center; + font-weight: normal; } } - h1{ - display: inline-block; + .logo-wrap{ color:#fff; font-size: 18px; - text-align: center; - font-weight: normal; } - } - .logo-wrap{ - color:#fff; - font-size: 18px; - } - .app-logo-on{ - overflow: hidden; - text-align: center; - .title{ - display:none; - } - .app-logo-img{ - margin-left: 0; + .app-logo-on{ + overflow: hidden; + text-align: center; + .title{ + display:none; + } + .app-logo-img{ + margin-left: 0; + } } } } diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 80058d6..515e957 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -8,9 +8,11 @@ import AppContent from './Content' import './index.scss' const AppLayout: FC = () => ( - - - + +
+ +
+ diff --git a/src/router/asyncRoutes.ts b/src/router/asyncRoutes.ts index 0218fca..d07b26d 100644 --- a/src/router/asyncRoutes.ts +++ b/src/router/asyncRoutes.ts @@ -3,5 +3,6 @@ import { lazy } from 'react' export default { // 根据后端返回数据code字段映射组件 overview: lazy(() => import('@/views/dashboard')), - orderProfile: lazy(() => import('@/views/shop/decoration')), + shopDecoration: lazy(() => import('@/views/shop/decoration')), + authMenu: lazy(() => import('@/views/auth/menu')), } -- Gitee From 8d39c7cc76a9805c8bf6b0956ba7baf1793cb36d Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Sun, 8 Aug 2021 15:25:44 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E5=90=8E=E7=AB=AF=E5=8A=A8=E6=80=81?= =?UTF-8?q?=E8=B7=AF=E7=94=B1=E4=BC=98=E5=8C=961?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/auth/menu.ts | 38 ++++++++++++++++ src/hooks/auth/menu.ts | 20 +++++++++ src/layouts/Content/index.tsx | 60 +++++++++++++++---------- src/layouts/Sider/Menu/index.tsx | 4 +- src/router/addRoutes.ts | 32 -------------- src/router/asyncRoutes.ts | 3 +- src/router/index.ts | 75 +++++++++++++++++--------------- 7 files changed, 138 insertions(+), 94 deletions(-) create mode 100644 src/api/auth/menu.ts create mode 100644 src/hooks/auth/menu.ts delete mode 100644 src/router/addRoutes.ts diff --git a/src/api/auth/menu.ts b/src/api/auth/menu.ts new file mode 100644 index 0000000..a83c592 --- /dev/null +++ b/src/api/auth/menu.ts @@ -0,0 +1,38 @@ +import request from '@/utils/request' +// import { ResMenuTree, MenuQuery, SaveMenu } from '@/model/system/MenuTree' + +/** + * 获取所有菜单 + * @param data + * @returns + */ +export function getTreeMenu(data: any): Promise { + return request.get('/api/auth/module/list', data) +} +/** + * 新增菜单 + * @param data + * @returns + */ +export function addMenu(data: any): Promise { + const params = data // 解决eslint提示 禁止对函数参数再赋值 + if (params.parentId == null) params.parentId = 0 + return request.post('/api/auth/module', params) +} +/** + * 修改菜单 + * @param data + * @returns + */ +export function updateMenu(data: any): Promise { + const params = data // 解决eslint提示 禁止对函数参数再赋值 + if (params.parentId == null) params.parentId = 0 + return request.put(`/api/auth/module/${params.id}`, params) +} +/** + * 删除菜单 + * @param id + */ +export function removeMenu(id: number): Promise { + return request.delete(`/api/auth/module/${id}`) +} diff --git a/src/hooks/auth/menu.ts b/src/hooks/auth/menu.ts new file mode 100644 index 0000000..92792ce --- /dev/null +++ b/src/hooks/auth/menu.ts @@ -0,0 +1,20 @@ +import { getTreeMenu } from '@/api/auth/menu' +import { useEffect, useState } from 'react' + +export function useMenuTreeTable() { + const [tableData, setTableData] = useState([]) + const [loading, setLoading] = useState(false) + const tableParams = { + name: '', + code: '', + } + + useEffect(() => { + setLoading(true) + const fetchData = async() => { + const result = await getTreeMenu(tableParams) + } + }, []) + + return { loading, tableData, setTableData } +} diff --git a/src/layouts/Content/index.tsx b/src/layouts/Content/index.tsx index 69f505f..4ccb5fb 100644 --- a/src/layouts/Content/index.tsx +++ b/src/layouts/Content/index.tsx @@ -1,35 +1,49 @@ import { FC } from 'react' import { Redirect, Switch, withRouter, Route } from 'react-router-dom' -import routes from '@/router' +import setRouter from '@/router' import { Layout } from 'antd' import { RouteComponentProps } from 'react-router' import { IRoute } from '@/interface/router' +import useUserInfo from '@/hooks/user' const { Content } = Layout +// function getRouters(menu: any) { +// menu.forEach((item: any) => { +// if (!item.children) { +// menus.push(item) +// } else { +// getRouters(item.children) +// } +// }) +// } +// getRouters(routes) -const menus: IRoute[] = [] - -function getRouters(menu: any) { - menu.forEach((item: any) => { - if (!item.children) { - menus.push(item) - } else { - getRouters(item.children) - } +const AppContent: FC = () => { + const { userData } = useUserInfo() + const { menu } = userData + const asyncRoutes = setRouter(menu) + const menus: IRoute[] = [] + const filterRouters = ((routes: any) => { + routes.forEach((route:IRoute) => { + if (!route.children) { + menus.push(route) + } else { + filterRouters(route.children) + } + }) }) + filterRouters(asyncRoutes) + return ( + + + + {menus.map((route: IRoute) => ( + + ))} + + + + ) } -getRouters(routes) - -const AppContent: FC = () => ( - - - - {menus.map((route: IRoute) => ( - - ))} - - - -) export default withRouter(AppContent) diff --git a/src/layouts/Sider/Menu/index.tsx b/src/layouts/Sider/Menu/index.tsx index f653707..018491b 100644 --- a/src/layouts/Sider/Menu/index.tsx +++ b/src/layouts/Sider/Menu/index.tsx @@ -6,7 +6,7 @@ import { IRoute, MenuInfo } from '@/interface/router' import Icon from '@/components/Icon' import { useStore } from '@/store' import { observer } from 'mobx-react' -import { addRoutes } from '@/router/addRoutes' +import setRouter from '@/router' import useUserInfo from '@/hooks/user' const SiderMenu: FC = () => { @@ -38,7 +38,7 @@ const SiderMenu: FC = () => { return pre }, []) } - const asyncRoutes = addRoutes(menu) + const asyncRoutes = setRouter(menu) const menuTree = getMenuTree(asyncRoutes) const selectBreadcrumb = (currentKey: string, pathname: string) => { diff --git a/src/router/addRoutes.ts b/src/router/addRoutes.ts deleted file mode 100644 index 1a9f4b6..0000000 --- a/src/router/addRoutes.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { IRoute } from '@/interface/router' -import asyncRoutes from './asyncRoutes' - -function formatRoutes(menus: any): Array { - const ret: IRoute[] = [] - if (!menus?.length) { - return [] - } - - menus.forEach((menu) => { - const { name, code, path, iconClass } = menu - const temp: IRoute = { - title: name, - path, - name: code, - icon: iconClass, - key: code, - component: asyncRoutes[code], - } - if (menu?.children?.length) { - temp.children = [] - temp.children.push(...formatRoutes(menu.children)) - } - ret.push(temp) - }) - return ret -} - -export function addRoutes(menus: any[]) { - const routes = formatRoutes(menus) - return routes -} diff --git a/src/router/asyncRoutes.ts b/src/router/asyncRoutes.ts index d07b26d..b7aebf2 100644 --- a/src/router/asyncRoutes.ts +++ b/src/router/asyncRoutes.ts @@ -3,6 +3,7 @@ import { lazy } from 'react' export default { // 根据后端返回数据code字段映射组件 overview: lazy(() => import('@/views/dashboard')), + shopOverview: lazy(() => import('@/views/shop/overview')), shopDecoration: lazy(() => import('@/views/shop/decoration')), - authMenu: lazy(() => import('@/views/auth/menu')), + // authMenu: lazy(() => import('@/views/auth/menu')), } diff --git a/src/router/index.ts b/src/router/index.ts index d627f51..fec13dc 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,44 +1,11 @@ import { IRoute } from '@/interface/router' import { lazy } from 'react' +import asyncRoutes from './asyncRoutes' const router: Array = [ { - path: '/overview', - title: '概况', - name: 'overview', - exact: true, - icon: 'DashboardOutlined', - key: 'overview', - component: lazy(() => import(/* webpackChunkName: "Home" */ '@/views/dashboard')), - }, - { - path: '/shop', - title: '店铺', - name: 'shop', - exact: true, - key: 'shop', - icon: 'FileUnknownOutlined', - component: lazy(() => import('@/layouts/index')), - children: [ - { - title: '店铺概况', - path: '/shop/overview', - name: 'overview', - icon: 'FileTextOutlined', - component: lazy(() => import(/* webpackChunkName: "overview" */ '@/views/shop/overview')), - }, - { - title: '店铺装修', - path: '/shop/decoration', - name: 'decoration', - icon: 'FileTextOutlined', - component: lazy(() => import(/* webpackChunkName: "decoration" */ '@/views/shop/decoration')), - }, - ], - }, - { - path: '/error/404', title: '错误页面', + path: '/error/404', name: 'Error', icon: 'FileUnknownOutlined', hidden: true, @@ -54,4 +21,40 @@ const router: Array = [ }, ] -export default router +const formatRoutes = (menus: any): Array => { + const routes: IRoute[] = [] + if (!menus?.length) { + return [] + } + + menus.forEach((menu) => { + const { name, code, path, iconClass } = menu + const route: IRoute = { + title: name, + path, + name: code, + icon: iconClass, + key: code, + component: asyncRoutes[code], + } + if (menu?.children?.length) { + route.children = [] + route.children.push(...formatRoutes(menu.children)) + } + routes.push(route) + }) + return routes +} +const setRouter = (menus?:any): Array => { + let userRouter: IRoute[] = [] + if (menus?.length) { + const asyncRouter = formatRoutes(menus) + asyncRouter.push(...router) + userRouter = asyncRouter + } else { + userRouter = router + } + return userRouter +} + +export default setRouter -- Gitee From 33ab795514b124385849c280547f8b28b179010a Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Sun, 8 Aug 2021 17:12:28 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E6=B3=A8=E5=86=8C?= =?UTF-8?q?=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/Content/index.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/layouts/Content/index.tsx b/src/layouts/Content/index.tsx index 4ccb5fb..f96a6ce 100644 --- a/src/layouts/Content/index.tsx +++ b/src/layouts/Content/index.tsx @@ -7,16 +7,6 @@ import { IRoute } from '@/interface/router' import useUserInfo from '@/hooks/user' const { Content } = Layout -// function getRouters(menu: any) { -// menu.forEach((item: any) => { -// if (!item.children) { -// menus.push(item) -// } else { -// getRouters(item.children) -// } -// }) -// } -// getRouters(routes) const AppContent: FC = () => { const { userData } = useUserInfo() @@ -26,7 +16,9 @@ const AppContent: FC = () => { const filterRouters = ((routes: any) => { routes.forEach((route:IRoute) => { if (!route.children) { - menus.push(route) + if (route.component) { + menus.push(route) + } } else { filterRouters(route.children) } -- Gitee From 01cedfddadb334a28f1f871e7447cf84f5dbcfb0 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Sun, 8 Aug 2021 23:22:41 +0800 Subject: [PATCH 4/5] =?UTF-8?q?token=E5=A4=B1=E6=95=88=E8=B7=B3=E8=BD=AC?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/request.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/utils/request.ts b/src/utils/request.ts index 6c5cf68..1bcc0ce 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -30,6 +30,10 @@ service.interceptors.response.use( if (data.code !== 200) { message.error(data.message) + if (data.code === 416) { + // token失效 跳转login + window.location.href = '/login' + } return Promise.reject(data) } if (!data) { -- Gitee From 4dfab873eb627723e694b55bcf0d0f2b4b72c93a Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Mon, 9 Aug 2021 03:35:39 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 登录后me接口调用调整 2. mobx数据存储调用调整 3. 侧栏菜单动态加载修复 --- src/layouts/Content/index.tsx | 6 +++--- src/layouts/Header/index.tsx | 9 ++++---- src/layouts/Sider/Menu/index.tsx | 6 ++---- src/layouts/index.tsx | 37 ++++++++++++++++++++++---------- src/store/modules/user.ts | 10 +++++++-- 5 files changed, 43 insertions(+), 25 deletions(-) diff --git a/src/layouts/Content/index.tsx b/src/layouts/Content/index.tsx index f96a6ce..ac69e40 100644 --- a/src/layouts/Content/index.tsx +++ b/src/layouts/Content/index.tsx @@ -4,13 +4,13 @@ import setRouter from '@/router' import { Layout } from 'antd' import { RouteComponentProps } from 'react-router' import { IRoute } from '@/interface/router' -import useUserInfo from '@/hooks/user' +import { useStore } from '@/store' const { Content } = Layout const AppContent: FC = () => { - const { userData } = useUserInfo() - const { menu } = userData + const { userStore } = useStore() + const { menu } = userStore const asyncRoutes = setRouter(menu) const menus: IRoute[] = [] const filterRouters = ((routes: any) => { diff --git a/src/layouts/Header/index.tsx b/src/layouts/Header/index.tsx index d863b67..5494657 100644 --- a/src/layouts/Header/index.tsx +++ b/src/layouts/Header/index.tsx @@ -6,7 +6,6 @@ import Hamburger from '@/components/Hamburger' import headImg from '@/assets/images/default-head-02.png' import BreadCrumb from '@/components/BreadCrumb' import { useStore } from '@/store' -import useUserInfo from '@/hooks/user' const { Header } = Layout @@ -16,9 +15,9 @@ type Props = { const AppHeader: FC = () => { const history = useHistory() const { userStore } = useStore() - const { userData } = useUserInfo() - console.log(userStore) - console.log(userData) + const { userInfo } = userStore + // console.log(userInfo) + // console.log(userStore) const onDropMenu = (e: any) => { if (e.key === 'logout') { @@ -55,7 +54,7 @@ const AppHeader: FC = () => {
- {userData?.activeUsers?.nickName} + {userInfo.nickName}
{/*
*/} diff --git a/src/layouts/Sider/Menu/index.tsx b/src/layouts/Sider/Menu/index.tsx index 018491b..5c6f6f4 100644 --- a/src/layouts/Sider/Menu/index.tsx +++ b/src/layouts/Sider/Menu/index.tsx @@ -7,12 +7,10 @@ import Icon from '@/components/Icon' import { useStore } from '@/store' import { observer } from 'mobx-react' import setRouter from '@/router' -import useUserInfo from '@/hooks/user' const SiderMenu: FC = () => { - const { appStore } = useStore() - const { userData } = useUserInfo() - const { menu } = userData + const { appStore, userStore } = useStore() + const { menu } = userStore let openMenu: Array = [] let openKey: Array = [] diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 515e957..a97a362 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -1,22 +1,37 @@ -import { FC } from 'react' +import { FC, useEffect } from 'react' import { RouteComponentProps } from 'react-router' import { Layout } from 'antd' +import useUserInfo from '@/hooks/user' +import { useStore } from '@/store' +import { observer } from 'mobx-react' import AppSider from './Sider' import AppHeader from './Header' import AppContent from './Content' import './index.scss' -const AppLayout: FC = () => ( - -
- -
+const AppLayout: FC = () => { + // 登录后me接口信息存入mobx-userStroe + const { userData } = useUserInfo() + const { userStore } = useStore() + const setUserStore = () => { + userStore.getUserData(userData) + } + useEffect(() => { + setUserStore() + }, [userData]) + + return ( - - +
+ +
+ + + + - -) + ) +} -export default AppLayout +export default observer(AppLayout) diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index b85c5fa..93159ad 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -15,7 +15,7 @@ class User { @observable menu = [] - @observable userInfo = {} + @observable userInfo: any = {} // 暂时解决类型报错，待定义类型 @observable phone = '' @@ -29,7 +29,7 @@ class User { sessionStorage.setItem('refreshToken', refreshToken) - await this.getUserInfo() + // await this.getUserInfo() return Promise.resolve(response) } catch (e) { @@ -50,6 +50,12 @@ class User { } } + @action getUserData = (userData) => { + const { menu, activeUsers } = cloneDeep(userData) + this.menu = menu + this.userInfo = activeUsers + } + @action logout = () => { removeToken() this.menu = [] -- Gitee