@yyp92-cli/template-react-pc 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/package.json +1 -1
- package/template/src/components/layout/content/index.tsx +40 -18
- package/template/src/components/layout/side/index.tsx +15 -6
- package/template/src/components/layout-horizontal/content/index.tsx +29 -7
- package/template/src/components/layout-horizontal/side/index.tsx +15 -6
- package/template/src/components/login/index.tsx +13 -1
- package/template/src/pages/home/index.tsx +5 -0
- package/template/src/router/router.tsx +28 -2
- package/template/src/store/login.ts +2 -6
- package/template/src/store/token.ts +28 -0
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -22,7 +22,7 @@ const Content: React.FC<ContentProps> = ({}) => {
|
|
|
22
22
|
permissions
|
|
23
23
|
} = permissionStore()
|
|
24
24
|
|
|
25
|
-
const [currentRouter, setCurrentRouter] = useState<RouterConfigItemProps>()
|
|
25
|
+
const [currentRouter, setCurrentRouter] = useState<RouterConfigItemProps | any>()
|
|
26
26
|
|
|
27
27
|
useEffect(() => {
|
|
28
28
|
const {pathname} = location ?? {}
|
|
@@ -30,13 +30,23 @@ const Content: React.FC<ContentProps> = ({}) => {
|
|
|
30
30
|
|
|
31
31
|
if (newPathname !== '') {
|
|
32
32
|
const pathnameList = newPathname.split('/')
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
const getCcondition = () => {
|
|
34
|
+
if (pathnameList.length === 1) {
|
|
35
|
+
return permissions.includes(pathnameList[0])
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
if (pathnameList.length === 2) {
|
|
39
|
+
return permissions.includes(pathnameList[1])
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
if (pathnameList.length === 3) {
|
|
43
|
+
return permissions.includes(`${pathnameList[1]}/${pathnameList[2]}`)
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return false
|
|
47
|
+
}
|
|
38
48
|
|
|
39
|
-
if (
|
|
49
|
+
if (getCcondition()) {
|
|
40
50
|
let newCurrentRouter: any = {}
|
|
41
51
|
|
|
42
52
|
if (pathnameList.length === 1) {
|
|
@@ -46,6 +56,10 @@ const Content: React.FC<ContentProps> = ({}) => {
|
|
|
46
56
|
const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
|
|
47
57
|
newCurrentRouter = parent?.children?.find((item: any) => item.key === pathnameList[1])
|
|
48
58
|
}
|
|
59
|
+
else if (pathnameList.length === 3) {
|
|
60
|
+
const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
|
|
61
|
+
newCurrentRouter = parent?.children?.find((item: any) => item.key === `${pathnameList[1]}/${pathnameList[2]}`)
|
|
62
|
+
}
|
|
49
63
|
|
|
50
64
|
setCurrentRouter(newCurrentRouter)
|
|
51
65
|
}
|
|
@@ -57,21 +71,29 @@ const Content: React.FC<ContentProps> = ({}) => {
|
|
|
57
71
|
|
|
58
72
|
|
|
59
73
|
// ********** 渲染 **********
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
74
|
+
const renderContent = () => {
|
|
75
|
+
if (!currentRouter) {
|
|
76
|
+
return null
|
|
77
|
+
}
|
|
63
78
|
|
|
64
|
-
|
|
65
|
-
|
|
79
|
+
return (
|
|
80
|
+
<div className={styles.layoutContent}>
|
|
81
|
+
{!currentRouter?.showFullScreen && <Side />}
|
|
66
82
|
|
|
67
|
-
<div className={styles.
|
|
68
|
-
<
|
|
69
|
-
</div>
|
|
83
|
+
<div className={styles.wraper}>
|
|
84
|
+
{!currentRouter?.showFullScreen && <Header />}
|
|
70
85
|
|
|
71
|
-
|
|
86
|
+
<div className={styles.contentInner}>
|
|
87
|
+
<Outlet />
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
{!currentRouter?.showFullScreen && <Footer />}
|
|
91
|
+
</div>
|
|
72
92
|
</div>
|
|
73
|
-
|
|
74
|
-
|
|
93
|
+
)
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
return renderContent()
|
|
75
97
|
}
|
|
76
98
|
|
|
77
99
|
export default Content
|
|
@@ -4,6 +4,8 @@ import type { MenuProps } from 'antd';
|
|
|
4
4
|
import {useNavigate, useLocation} from 'react-router-dom'
|
|
5
5
|
import {ComponentMap} from '@/router/router'
|
|
6
6
|
import { menusStore } from '@/store/menus'
|
|
7
|
+
import { localCache } from '@/utils'
|
|
8
|
+
import { LOGIN_TOKEN } from '@/global/constants'
|
|
7
9
|
|
|
8
10
|
import styles from './index.module.scss'
|
|
9
11
|
|
|
@@ -44,12 +46,19 @@ export const Side: React.FC<SideProps> = () => {
|
|
|
44
46
|
const newPathname = pathname.slice(1)
|
|
45
47
|
|
|
46
48
|
if (newPathname === '') {
|
|
47
|
-
const
|
|
48
|
-
const selectedKey = menus[0]?.children?.[0]?.key
|
|
49
|
+
const token = localCache.getCache(LOGIN_TOKEN)
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
if (token) {
|
|
52
|
+
const openKey = menus[0]?.key
|
|
53
|
+
const selectedKey = menus[0]?.children?.[0]?.key
|
|
54
|
+
|
|
55
|
+
setOpenKeys([openKey])
|
|
56
|
+
setSelectedKeys([selectedKey])
|
|
57
|
+
navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
navigate('/login')
|
|
61
|
+
}
|
|
53
62
|
}
|
|
54
63
|
else {
|
|
55
64
|
const pathnameList = newPathname.split('/')
|
|
@@ -58,7 +67,7 @@ export const Side: React.FC<SideProps> = () => {
|
|
|
58
67
|
setOpenKeys([])
|
|
59
68
|
setSelectedKeys([pathnameList[0]])
|
|
60
69
|
}
|
|
61
|
-
else if (pathnameList.length === 2) {
|
|
70
|
+
else if (pathnameList.length === 2 || pathnameList.length === 3) {
|
|
62
71
|
setOpenKeys([pathnameList[0]])
|
|
63
72
|
setSelectedKeys([pathnameList[1]])
|
|
64
73
|
}
|
|
@@ -29,13 +29,23 @@ const Content: React.FC<ContentProps> = ({ }) => {
|
|
|
29
29
|
|
|
30
30
|
if (newPathname !== '') {
|
|
31
31
|
const pathnameList = newPathname.split('/')
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
const getCcondition = () => {
|
|
33
|
+
if (pathnameList.length === 1) {
|
|
34
|
+
return permissions.includes(pathnameList[0])
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (pathnameList.length === 2) {
|
|
38
|
+
return permissions.includes(pathnameList[1])
|
|
39
|
+
}
|
|
37
40
|
|
|
38
|
-
|
|
41
|
+
if (pathnameList.length === 3) {
|
|
42
|
+
return permissions.includes(`${pathnameList[1]}/${pathnameList[2]}`)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return false
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (getCcondition()) {
|
|
39
49
|
let newCurrentRouter: any = {}
|
|
40
50
|
|
|
41
51
|
if (pathnameList.length === 1) {
|
|
@@ -45,6 +55,10 @@ const Content: React.FC<ContentProps> = ({ }) => {
|
|
|
45
55
|
const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
|
|
46
56
|
newCurrentRouter = parent?.children?.find((item: any) => item.key === pathnameList[1])
|
|
47
57
|
}
|
|
58
|
+
else if (pathnameList.length === 3) {
|
|
59
|
+
const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
|
|
60
|
+
newCurrentRouter = parent?.children?.find((item: any) => item.key === `${pathnameList[1]}/${pathnameList[2]}`)
|
|
61
|
+
}
|
|
48
62
|
|
|
49
63
|
setCurrentRouter(newCurrentRouter)
|
|
50
64
|
}
|
|
@@ -55,7 +69,12 @@ const Content: React.FC<ContentProps> = ({ }) => {
|
|
|
55
69
|
}, [location])
|
|
56
70
|
|
|
57
71
|
// ********** 渲染 **********
|
|
58
|
-
|
|
72
|
+
const renderContent = () => {
|
|
73
|
+
if (!currentRouter) {
|
|
74
|
+
return null
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
return (
|
|
59
78
|
<div className={styles.layoutContent}>
|
|
60
79
|
<div className={styles.wraper}>
|
|
61
80
|
{!currentRouter?.showFullScreen && <Header />}
|
|
@@ -68,6 +87,9 @@ const Content: React.FC<ContentProps> = ({ }) => {
|
|
|
68
87
|
</div>
|
|
69
88
|
</div>
|
|
70
89
|
)
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
return renderContent()
|
|
71
93
|
}
|
|
72
94
|
|
|
73
95
|
export default Content
|
|
@@ -4,6 +4,8 @@ import type { MenuProps } from 'antd';
|
|
|
4
4
|
import {useNavigate, useLocation} from 'react-router-dom'
|
|
5
5
|
import {ComponentMap} from '@/router/router'
|
|
6
6
|
import { menusStore } from '@/store/menus'
|
|
7
|
+
import { localCache } from '@/utils'
|
|
8
|
+
import { LOGIN_TOKEN } from '@/global/constants'
|
|
7
9
|
|
|
8
10
|
import styles from './index.module.scss'
|
|
9
11
|
|
|
@@ -44,12 +46,19 @@ export const Side: React.FC<SideProps> = ({}) => {
|
|
|
44
46
|
const newPathname = pathname.slice(1)
|
|
45
47
|
|
|
46
48
|
if (newPathname === '') {
|
|
47
|
-
const
|
|
48
|
-
const selectedKey = menus[0]?.children?.[0]?.key
|
|
49
|
+
const token = localCache.getCache(LOGIN_TOKEN)
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
if (token) {
|
|
52
|
+
const openKey = menus[0]?.key
|
|
53
|
+
const selectedKey = menus[0]?.children?.[0]?.key
|
|
54
|
+
|
|
55
|
+
// setOpenKeys([openKey])
|
|
56
|
+
setSelectedKeys([selectedKey])
|
|
57
|
+
navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
navigate('/login')
|
|
61
|
+
}
|
|
53
62
|
}
|
|
54
63
|
else {
|
|
55
64
|
const pathnameList = newPathname.split('/')
|
|
@@ -58,7 +67,7 @@ export const Side: React.FC<SideProps> = ({}) => {
|
|
|
58
67
|
setOpenKeys([])
|
|
59
68
|
setSelectedKeys([pathnameList[0]])
|
|
60
69
|
}
|
|
61
|
-
else if (pathnameList.length === 2) {
|
|
70
|
+
else if (pathnameList.length === 2 || pathnameList.length === 3) {
|
|
62
71
|
// setOpenKeys([pathnameList[0]])
|
|
63
72
|
setSelectedKeys([pathnameList[1]])
|
|
64
73
|
}
|
|
@@ -3,6 +3,8 @@ import {useNavigate, useSearchParams} from 'react-router-dom'
|
|
|
3
3
|
import { Button, Checkbox, Form, Input } from 'antd'
|
|
4
4
|
import { permissionStore } from '@/store/permission'
|
|
5
5
|
import { menusStore } from '@/store/menus'
|
|
6
|
+
import {userInfoStore} from '@/store/login'
|
|
7
|
+
import {tokenStore} from '@/store/token'
|
|
6
8
|
import { filterMenu } from '@/utils'
|
|
7
9
|
import { routerConfig } from '@/router/router'
|
|
8
10
|
|
|
@@ -30,7 +32,9 @@ const defaultList = [
|
|
|
30
32
|
'group22',
|
|
31
33
|
'group23',
|
|
32
34
|
'group24',
|
|
33
|
-
'group3'
|
|
35
|
+
'group3',
|
|
36
|
+
'group11/detail',
|
|
37
|
+
'group11/screen-detail'
|
|
34
38
|
]
|
|
35
39
|
|
|
36
40
|
const Login: React.FC<LoginProps> = ({}) => {
|
|
@@ -41,6 +45,8 @@ const Login: React.FC<LoginProps> = ({}) => {
|
|
|
41
45
|
setPermissions
|
|
42
46
|
} = permissionStore()
|
|
43
47
|
const {setMenus} = menusStore()
|
|
48
|
+
const {setUserInfo} = userInfoStore()
|
|
49
|
+
const {setToken} = tokenStore()
|
|
44
50
|
|
|
45
51
|
// ********操作 ********
|
|
46
52
|
const onFinish = async (values: any) => {
|
|
@@ -48,6 +54,12 @@ const Login: React.FC<LoginProps> = ({}) => {
|
|
|
48
54
|
|
|
49
55
|
if (values.username === 'yang' && values.password === '123456') {
|
|
50
56
|
setPermissions(defaultList)
|
|
57
|
+
setToken('111')
|
|
58
|
+
setUserInfo({
|
|
59
|
+
userName: 'yang',
|
|
60
|
+
userId: '001'
|
|
61
|
+
})
|
|
62
|
+
|
|
51
63
|
|
|
52
64
|
// todo模拟接口
|
|
53
65
|
setTimeout(() => {
|
|
@@ -78,6 +78,11 @@ const Home: React.FC<HomeProps> = () => {
|
|
|
78
78
|
<p>Bla bla ...</p>
|
|
79
79
|
</Modal>
|
|
80
80
|
</div>
|
|
81
|
+
|
|
82
|
+
<div style={{ marginTop: 20 }}>
|
|
83
|
+
<Button onClick={() => navigate('/group1/group11/detail')}>详情</Button>
|
|
84
|
+
<Button onClick={() => navigate('/group1/group11/screen-detail')}>详情-全屏</Button>
|
|
85
|
+
</div>
|
|
81
86
|
</div>
|
|
82
87
|
)
|
|
83
88
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import {createBrowserRouter} from 'react-router-dom'
|
|
3
3
|
import { AppstoreOutlined, MailOutlined, NodeCollapseOutlined, SettingOutlined } from '@ant-design/icons';
|
|
4
|
-
import Layout from '@/components/layout'
|
|
5
|
-
|
|
4
|
+
// import Layout from '@/components/layout'
|
|
5
|
+
import Layout from '@/components/layout-horizontal'
|
|
6
6
|
import Home from '@/pages/home'
|
|
7
7
|
import { Page403 } from '@/components/403'
|
|
8
8
|
import { Page404 } from '@/components/404'
|
|
@@ -47,6 +47,7 @@ export const routerConfig: any[] = [
|
|
|
47
47
|
key: 'group11',
|
|
48
48
|
icon: null,
|
|
49
49
|
hideInMenu: false,
|
|
50
|
+
showFullScreen: false,
|
|
50
51
|
element: <Home />
|
|
51
52
|
},
|
|
52
53
|
{
|
|
@@ -55,6 +56,7 @@ export const routerConfig: any[] = [
|
|
|
55
56
|
key: 'group12',
|
|
56
57
|
icon: null,
|
|
57
58
|
hideInMenu: false,
|
|
59
|
+
showFullScreen: false,
|
|
58
60
|
element: <>group12</>
|
|
59
61
|
},
|
|
60
62
|
{
|
|
@@ -63,8 +65,27 @@ export const routerConfig: any[] = [
|
|
|
63
65
|
key: 'group13',
|
|
64
66
|
icon: null,
|
|
65
67
|
hideInMenu: false,
|
|
68
|
+
showFullScreen: false,
|
|
66
69
|
element: <>group13</>
|
|
67
70
|
},
|
|
71
|
+
{
|
|
72
|
+
label: '分组11-详情',
|
|
73
|
+
path: 'group11/detail',
|
|
74
|
+
key: 'group11/detail',
|
|
75
|
+
icon: null,
|
|
76
|
+
hideInMenu: true,
|
|
77
|
+
showFullScreen: false,
|
|
78
|
+
element: <>分组11-详情</>
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
label: '分组11-详情-全屏',
|
|
82
|
+
path: 'group11/screen-detail',
|
|
83
|
+
key: 'group11/screen-detail',
|
|
84
|
+
icon: null,
|
|
85
|
+
hideInMenu: true,
|
|
86
|
+
showFullScreen: true,
|
|
87
|
+
element: <>分组11-详情-全屏</>
|
|
88
|
+
},
|
|
68
89
|
]
|
|
69
90
|
},
|
|
70
91
|
|
|
@@ -82,6 +103,7 @@ export const routerConfig: any[] = [
|
|
|
82
103
|
index: true,
|
|
83
104
|
icon: null,
|
|
84
105
|
hideInMenu: false,
|
|
106
|
+
showFullScreen: false,
|
|
85
107
|
element: <>group21</>,
|
|
86
108
|
},
|
|
87
109
|
{
|
|
@@ -90,6 +112,7 @@ export const routerConfig: any[] = [
|
|
|
90
112
|
key: 'group22',
|
|
91
113
|
icon: null,
|
|
92
114
|
hideInMenu: false,
|
|
115
|
+
showFullScreen: false,
|
|
93
116
|
element: <>group22</>,
|
|
94
117
|
},
|
|
95
118
|
{
|
|
@@ -98,6 +121,7 @@ export const routerConfig: any[] = [
|
|
|
98
121
|
key: 'group23',
|
|
99
122
|
icon: null,
|
|
100
123
|
hideInMenu: false,
|
|
124
|
+
showFullScreen: false,
|
|
101
125
|
element: <>group23</>,
|
|
102
126
|
},
|
|
103
127
|
{
|
|
@@ -118,6 +142,7 @@ export const routerConfig: any[] = [
|
|
|
118
142
|
key: 'group3',
|
|
119
143
|
icon: 'icon-2',
|
|
120
144
|
hideInMenu: false,
|
|
145
|
+
showFullScreen: true,
|
|
121
146
|
element: <>group3</>
|
|
122
147
|
}
|
|
123
148
|
]
|
|
@@ -155,6 +180,7 @@ export const routerConfig: any[] = [
|
|
|
155
180
|
element: <Page404 />,
|
|
156
181
|
icon: null,
|
|
157
182
|
hideInMenu: true,
|
|
183
|
+
showFullScreen: true,
|
|
158
184
|
children: [],
|
|
159
185
|
},
|
|
160
186
|
]
|
|
@@ -9,15 +9,13 @@ type UserInfoStoreState = {
|
|
|
9
9
|
userInfo: {
|
|
10
10
|
userId: string,
|
|
11
11
|
userName: string
|
|
12
|
-
}
|
|
13
|
-
token: string
|
|
12
|
+
}
|
|
14
13
|
}
|
|
15
14
|
|
|
16
15
|
type UserInfoStoreActions = {
|
|
17
16
|
setUserInfo: (
|
|
18
17
|
userInfo: UserInfoStoreState['userInfo']
|
|
19
|
-
) => void
|
|
20
|
-
setToken: (token: string) => void
|
|
18
|
+
) => void
|
|
21
19
|
}
|
|
22
20
|
|
|
23
21
|
type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
|
|
@@ -29,9 +27,7 @@ export const userInfoStore = create<UserInfoStore>()(
|
|
|
29
27
|
userName: '小明',
|
|
30
28
|
userId: '111'
|
|
31
29
|
},
|
|
32
|
-
token: '',
|
|
33
30
|
setUserInfo: (userInfo) => set({userInfo}),
|
|
34
|
-
setToken: (token) => set({token})
|
|
35
31
|
}),
|
|
36
32
|
{
|
|
37
33
|
name: USER_INFO
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* * 用户信息
|
|
3
|
+
*/
|
|
4
|
+
import { create } from 'zustand'
|
|
5
|
+
import { persist } from 'zustand/middleware'
|
|
6
|
+
import { LOGIN_TOKEN} from '@/global/constants'
|
|
7
|
+
|
|
8
|
+
type UserInfoStoreState = {
|
|
9
|
+
token: string
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
type UserInfoStoreActions = {
|
|
13
|
+
setToken: (token: string) => void
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
|
|
17
|
+
|
|
18
|
+
export const tokenStore = create<UserInfoStore>()(
|
|
19
|
+
persist(
|
|
20
|
+
(set) => ({
|
|
21
|
+
token: '',
|
|
22
|
+
setToken: (token) => set({token})
|
|
23
|
+
}),
|
|
24
|
+
{
|
|
25
|
+
name: LOGIN_TOKEN
|
|
26
|
+
}
|
|
27
|
+
)
|
|
28
|
+
)
|