@yyp92-cli/template-react-pc 1.2.1 → 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.
Files changed (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/template/src/components/layout/content/index.tsx +40 -18
  4. package/template/src/components/layout/side/index.tsx +1 -1
  5. package/template/src/components/layout-horizontal/content/index.tsx +29 -7
  6. package/template/src/components/layout-horizontal/side/index.tsx +1 -1
  7. package/template/src/components/login/index.tsx +13 -1
  8. package/template/src/pages/home/index.tsx +5 -0
  9. package/template/src/router/router.tsx +28 -2
  10. package/template/src/store/login.ts +2 -6
  11. package/template/src/store/token.ts +28 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @yyp92-cli/template-react-pc
2
2
 
3
+ ## 1.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 项目模板-二级路由修改
8
+
3
9
  ## 1.2.1
4
10
 
5
11
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yyp92-cli/template-react-pc",
3
- "version": "1.2.1",
3
+ "version": "1.3.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
package/template/src/components/layout/content/index.tsx 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 condition = pathnameList.length === 1
34
- ? permissions.includes(pathnameList[0])
35
- : pathnameList.length === 2
36
- ? permissions.includes(pathnameList[1])
37
- : false
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 (condition) {
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
- return (
61
- <div className={styles.layoutContent}>
62
- {!currentRouter?.showFullScreen && <Side />}
74
+ const renderContent = () => {
75
+ if (!currentRouter) {
76
+ return null
77
+ }
63
78
 
64
- <div className={styles.wraper}>
65
- {!currentRouter?.showFullScreen && <Header />}
79
+ return (
80
+ <div className={styles.layoutContent}>
81
+ {!currentRouter?.showFullScreen && <Side />}
66
82
 
67
- <div className={styles.contentInner}>
68
- <Outlet />
69
- </div>
83
+ <div className={styles.wraper}>
84
+ {!currentRouter?.showFullScreen && <Header />}
70
85
 
71
- {!currentRouter?.showFullScreen && <Footer />}
86
+ <div className={styles.contentInner}>
87
+ <Outlet />
88
+ </div>
89
+
90
+ {!currentRouter?.showFullScreen && <Footer />}
91
+ </div>
72
92
  </div>
73
- </div>
74
- )
93
+ )
94
+ }
95
+
96
+ return renderContent()
75
97
  }
76
98
 
77
99
  export default Content
package/template/src/components/layout/side/index.tsx CHANGED
@@ -67,7 +67,7 @@ export const Side: React.FC<SideProps> = () => {
67
67
  setOpenKeys([])
68
68
  setSelectedKeys([pathnameList[0]])
69
69
  }
70
- else if (pathnameList.length === 2) {
70
+ else if (pathnameList.length === 2 || pathnameList.length === 3) {
71
71
  setOpenKeys([pathnameList[0]])
72
72
  setSelectedKeys([pathnameList[1]])
73
73
  }
package/template/src/components/layout-horizontal/content/index.tsx CHANGED
@@ -29,13 +29,23 @@ const Content: React.FC<ContentProps> = ({ }) => {
29
29
 
30
30
  if (newPathname !== '') {
31
31
  const pathnameList = newPathname.split('/')
32
- const condition = pathnameList.length === 1
33
- ? permissions.includes(pathnameList[0])
34
- : pathnameList.length === 2
35
- ? permissions.includes(pathnameList[1])
36
- : false
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
- if (condition) {
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
- return (
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
package/template/src/components/layout-horizontal/side/index.tsx CHANGED
@@ -67,7 +67,7 @@ export const Side: React.FC<SideProps> = ({}) => {
67
67
  setOpenKeys([])
68
68
  setSelectedKeys([pathnameList[0]])
69
69
  }
70
- else if (pathnameList.length === 2) {
70
+ else if (pathnameList.length === 2 || pathnameList.length === 3) {
71
71
  // setOpenKeys([pathnameList[0]])
72
72
  setSelectedKeys([pathnameList[1]])
73
73
  }
package/template/src/components/login/index.tsx CHANGED
@@ -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(() => {
package/template/src/pages/home/index.tsx CHANGED
@@ -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
  }
package/template/src/router/router.tsx CHANGED
@@ -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
- // import Layout from '@/components/layout-horizontal'
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
  ]
package/template/src/store/login.ts CHANGED
@@ -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
package/template/src/store/token.ts ADDED
@@ -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
+ )