@yyp92-cli/template-react-pc 1.2.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @yyp92-cli/template-react-pc
 
+## 1.4.0
+
+### Minor Changes
+
+- 路由修改
+
+## 1.3.0
+
+### Minor Changes
+
+- 项目模板-二级路由修改
+
 ## 1.2.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yyp92-cli/template-react-pc",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "publishConfig": {
     "access": "public"
   },

package/template/src/components/layout/content/index.tsx

@@ -6,6 +6,8 @@ import {Footer} from '../footer'
 import {routerConfig} from '@/router/router'
 import type {RouterConfigItemProps} from '@/router/router'
 import { permissionStore } from '@/store/permission'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
 
 import styles from './index.module.scss'
 
@@ -21,22 +23,37 @@ const Content: React.FC<ContentProps> = ({}) => {
     const {
         permissions
     } = permissionStore()
+    const {token} = tokenStore()
+    const {menus} = menusStore()
 
-    const [currentRouter, setCurrentRouter] = useState<RouterConfigItemProps>()
+    const [currentRouter, setCurrentRouter] = useState<RouterConfigItemProps | any>()
 
     useEffect(() => {
         const {pathname} = location ?? {}
         const newPathname = pathname.slice(1)
 
-        if (newPathname !== '') {
+        if (!token) {
+            navigate('/login')
+        }
+        else if (newPathname !== '') {
             const pathnameList = newPathname.split('/')
-            const condition = pathnameList.length === 1
-                ? permissions.includes(pathnameList[0])
-                : pathnameList.length === 2
-                    ? permissions.includes(pathnameList[1])
-                    : false
+            const getCcondition = () => {
+                if (pathnameList.length === 1) {
+                    return permissions.includes(pathnameList[0])
+                }
+
+                if (pathnameList.length === 2) {
+                    return permissions.includes(pathnameList[1])
+                }
+
+                if (pathnameList.length === 3) {
+                    return permissions.includes(`${pathnameList[1]}/${pathnameList[2]}`)
+                }
+
+                return false
+            }
 
-            if (condition) {
+            if (getCcondition()) {
                 let newCurrentRouter: any = {}
 
                 if (pathnameList.length === 1) {
@@ -46,6 +63,10 @@ const Content: React.FC<ContentProps> = ({}) => {
                     const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
                     newCurrentRouter = parent?.children?.find((item: any) => item.key === pathnameList[1])
                 }
+                else if (pathnameList.length === 3) {
+                    const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
+                    newCurrentRouter = parent?.children?.find((item: any) => item.key === `${pathnameList[1]}/${pathnameList[2]}`)
+                }
 
                 setCurrentRouter(newCurrentRouter)
             }
@@ -53,25 +74,36 @@ const Content: React.FC<ContentProps> = ({}) => {
                 navigate('/403')
             }
         }
+        else {
+            navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
+        }
     }, [location])
 
 
     // ********** 渲染 **********
-    return (
-        <div className={styles.layoutContent}>
-            {!currentRouter?.showFullScreen && <Side />}
+    const renderContent = () => {
+        if (!currentRouter) {
+            return null
+        }
 
-            <div className={styles.wraper}>
-                {!currentRouter?.showFullScreen && <Header />}
+        return (
+            <div className={styles.layoutContent}>
+                {!currentRouter?.showFullScreen && <Side />}
 
-                <div className={styles.contentInner}>
-                    <Outlet />
-                </div>
+                <div className={styles.wraper}>
+                    {!currentRouter?.showFullScreen && <Header />}
+
+                    <div className={styles.contentInner}>
+                        <Outlet />
+                    </div>
 
-                {!currentRouter?.showFullScreen && <Footer />}
+                    {!currentRouter?.showFullScreen && <Footer />}
+                </div>
             </div>
-        </div>
-    )
+        )
+    }
+
+    return renderContent()
 }
 
 export default Content

package/template/src/components/layout/side/index.tsx

@@ -4,8 +4,7 @@ import type { MenuProps } from 'antd';
 import {useNavigate, useLocation} from 'react-router-dom'
 import {ComponentMap} from '@/router/router'
 import { menusStore } from '@/store/menus'
-import { localCache } from '@/utils'
-import { LOGIN_TOKEN } from '@/global/constants'
+import { tokenStore } from '@/store/token'
 
 import styles from './index.module.scss'
 
@@ -21,6 +20,7 @@ export const Side: React.FC<SideProps> = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const {menus} = menusStore()
+    const {token} = tokenStore()
 
     // 激活的父菜单
     const [openKeys, setOpenKeys] = React.useState<string[]>([])
@@ -45,32 +45,16 @@ export const Side: React.FC<SideProps> = () => {
         const {pathname} = location ?? {}
         const newPathname = pathname.slice(1)
 
-        if (newPathname === '') {
-            const token = localCache.getCache(LOGIN_TOKEN)
+        
+        const pathnameList = newPathname.split('/')
 
-            if (token) {
-                const openKey = menus[0]?.key
-                const selectedKey = menus[0]?.children?.[0]?.key
-
-                setOpenKeys([openKey])
-                setSelectedKeys([selectedKey])
-                navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
-            }
-            else {
-                navigate('/login')
-            }
+        if (pathnameList.length === 1) {
+            setOpenKeys([])
+            setSelectedKeys([pathnameList[0]])
         }
-        else {
-            const pathnameList = newPathname.split('/')
-
-            if (pathnameList.length === 1) {
-                setOpenKeys([])
-                setSelectedKeys([pathnameList[0]])
-            }
-            else if (pathnameList.length === 2) {
-                setOpenKeys([pathnameList[0]])
-                setSelectedKeys([pathnameList[1]])
-            }
+        else if (pathnameList.length === 2 || pathnameList.length === 3) {
+            setOpenKeys([pathnameList[0]])
+            setSelectedKeys([pathnameList[1]])
         }
     }, [])
 

package/template/src/components/layout-horizontal/content/index.tsx

@@ -6,6 +6,8 @@ import { Footer } from '../footer'
 import { routerConfig } from '@/router/router'
 import type { RouterConfigItemProps } from '@/router/router'
 import { permissionStore } from '@/store/permission'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
 
 import styles from './index.module.scss'
 
@@ -17,6 +19,8 @@ interface ContentProps {
 const Content: React.FC<ContentProps> = ({ }) => {
     const location = useLocation()
     const navigate = useNavigate()
+    const {token} = tokenStore()
+    const {menus} = menusStore()
     const {
         permissions
     } = permissionStore()
@@ -27,15 +31,28 @@ const Content: React.FC<ContentProps> = ({ }) => {
         const { pathname } = location ?? {}
         const newPathname = pathname.slice(1)
 
-        if (newPathname !== '') {
+       if (!token) {
+            navigate('/login')
+        }
+        else if (newPathname !== '') {
             const pathnameList = newPathname.split('/')
-            const condition = pathnameList.length === 1
-                ? permissions.includes(pathnameList[0])
-                : pathnameList.length === 2
-                    ? permissions.includes(pathnameList[1])
-                    : false
+            const getCcondition = () => {
+                if (pathnameList.length === 1) {
+                    return permissions.includes(pathnameList[0])
+                }
+
+                if (pathnameList.length === 2) {
+                    return permissions.includes(pathnameList[1])
+                }
+
+                if (pathnameList.length === 3) {
+                    return permissions.includes(`${pathnameList[1]}/${pathnameList[2]}`)
+                }
 
-            if (condition) {
+                return false
+            }
+
+            if (getCcondition()) {
                 let newCurrentRouter: any = {}
 
                 if (pathnameList.length === 1) {
@@ -45,6 +62,10 @@ const Content: React.FC<ContentProps> = ({ }) => {
                     const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
                     newCurrentRouter = parent?.children?.find((item: any) => item.key === pathnameList[1])
                 }
+                else if (pathnameList.length === 3) {
+                    const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
+                    newCurrentRouter = parent?.children?.find((item: any) => item.key === `${pathnameList[1]}/${pathnameList[2]}`)
+                }
 
                 setCurrentRouter(newCurrentRouter)
             }
@@ -52,10 +73,18 @@ const Content: React.FC<ContentProps> = ({ }) => {
                 navigate('/403')
             }
         }
+        else {
+            navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
+        }
     }, [location])
 
     // ********** 渲染 **********
-    return (
+    const renderContent = () => {
+        if (!currentRouter) {
+            return null
+        }
+
+        return (
         <div className={styles.layoutContent}>
             <div className={styles.wraper}>
                 {!currentRouter?.showFullScreen && <Header />}
@@ -68,6 +97,9 @@ const Content: React.FC<ContentProps> = ({ }) => {
             </div>
         </div>
     )
+    }
+
+    return renderContent()
 }
 
 export default Content

package/template/src/components/layout-horizontal/side/index.tsx

@@ -44,33 +44,15 @@ export const Side: React.FC<SideProps> = ({}) => {
     useEffect(() => {
         const {pathname} = location ?? {}
         const newPathname = pathname.slice(1)
+        const pathnameList = newPathname.split('/')
 
-        if (newPathname === '') {
-            const token = localCache.getCache(LOGIN_TOKEN)
-
-            if (token) {
-                const openKey = menus[0]?.key
-                const selectedKey = menus[0]?.children?.[0]?.key
-
-                // setOpenKeys([openKey])
-                setSelectedKeys([selectedKey])
-                navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
-            }
-            else {
-                navigate('/login')
-            }
+        if (pathnameList.length === 1) {
+            setOpenKeys([])
+            setSelectedKeys([pathnameList[0]])
         }
-        else {
-            const pathnameList = newPathname.split('/')
-
-            if (pathnameList.length === 1) {
-                setOpenKeys([])
-                setSelectedKeys([pathnameList[0]])
-            }
-            else if (pathnameList.length === 2) {
-                // setOpenKeys([pathnameList[0]])
-                setSelectedKeys([pathnameList[1]])
-            }
+        else if (pathnameList.length === 2 || pathnameList.length === 3) {
+            // setOpenKeys([pathnameList[0]])
+            setSelectedKeys([pathnameList[1]])
         }
     }, [])
 

package/template/src/components/login/index.tsx

@@ -3,6 +3,8 @@ import {useNavigate, useSearchParams} from 'react-router-dom'
 import { Button, Checkbox, Form, Input } from 'antd'
 import { permissionStore } from '@/store/permission'
 import { menusStore } from '@/store/menus'
+import {userInfoStore} from '@/store/login'
+import {tokenStore} from '@/store/token'
 import { filterMenu } from '@/utils'
 import { routerConfig } from '@/router/router'
 
@@ -30,7 +32,9 @@ const defaultList = [
     'group22',
     'group23',
     'group24',
-    'group3'
+    'group3',
+    'group11/detail',
+    'group11/screen-detail'
 ]
 
 const Login: React.FC<LoginProps> = ({}) => {
@@ -41,6 +45,8 @@ const Login: React.FC<LoginProps> = ({}) => {
         setPermissions
     } = permissionStore()
     const {setMenus} = menusStore()
+    const {setUserInfo} = userInfoStore()
+    const {setToken} = tokenStore()
 
     // ********操作 ********　
     const onFinish = async (values: any) => {
@@ -48,6 +54,12 @@ const Login: React.FC<LoginProps> = ({}) => {
 
         if (values.username === 'yang' && values.password === '123456') {
             setPermissions(defaultList)
+            setToken('111')
+            setUserInfo({
+                userName: 'yang',
+                userId: '001'
+            })
+            
 
             // todo模拟接口
             setTimeout(() => {

package/template/src/pages/home/index.tsx

@@ -78,6 +78,11 @@ const Home: React.FC<HomeProps> = () => {
                     <p>Bla bla ...</p>
                 </Modal>
             </div>
+
+            <div style={{ marginTop: 20 }}>
+                <Button onClick={() => navigate('/group1/group11/detail')}>详情</Button>
+                <Button onClick={() => navigate('/group1/group11/screen-detail')}>详情-全屏</Button>
+            </div>
         </div>
     )
 }

package/template/src/router/router.tsx

@@ -47,6 +47,7 @@ export const routerConfig: any[] = [
                         key: 'group11',
                         icon: null,
                         hideInMenu: false,
+                        showFullScreen: false,
                         element: <Home />
                     },
                     {
@@ -55,6 +56,7 @@ export const routerConfig: any[] = [
                         key: 'group12',
                         icon: null,
                         hideInMenu: false,
+                        showFullScreen: false,
                         element: <>group12</>
                     },
                     {
@@ -63,8 +65,27 @@ export const routerConfig: any[] = [
                         key: 'group13',
                         icon: null,
                         hideInMenu: false,
+                        showFullScreen: false,
                         element: <>group13</>
                     },
+                    {
+                        label: '分组11-详情',
+                        path: 'group11/detail',
+                        key: 'group11/detail',
+                        icon: null,
+                        hideInMenu: true,
+                        showFullScreen: false,
+                        element: <>分组11-详情</>
+                    },
+                    {
+                        label: '分组11-详情-全屏',
+                        path: 'group11/screen-detail',
+                        key: 'group11/screen-detail',
+                        icon: null,
+                        hideInMenu: true,
+                        showFullScreen: true,
+                        element: <>分组11-详情-全屏</>
+                    },
                 ]
             },
 
@@ -82,6 +103,7 @@ export const routerConfig: any[] = [
                         index: true,
                         icon: null,
                         hideInMenu: false,
+                        showFullScreen: false,
                         element: <>group21</>,
                     },
                     {
@@ -90,6 +112,7 @@ export const routerConfig: any[] = [
                         key: 'group22',
                         icon: null,
                         hideInMenu: false,
+                        showFullScreen: false,
                         element: <>group22</>,
                     },
                     {
@@ -98,6 +121,7 @@ export const routerConfig: any[] = [
                         key: 'group23',
                         icon: null,
                         hideInMenu: false,
+                        showFullScreen: false,
                         element: <>group23</>,
                     },
                     {
@@ -118,6 +142,7 @@ export const routerConfig: any[] = [
                 key: 'group3',
                 icon: 'icon-2',
                 hideInMenu: false,
+                showFullScreen: true,
                 element: <>group3</>
             }
         ]
@@ -155,6 +180,7 @@ export const routerConfig: any[] = [
         element: <Page404 />,
         icon: null,
         hideInMenu: true,
+        showFullScreen: true,
         children: [],
     },
 ]

package/template/src/service/request/index.ts

@@ -103,7 +103,7 @@ instance.interceptors.request.use(
             addPendingRequest(config)
         }
 
-        const token = localCache.getCache(LOGIN_TOKEN)
+        const token = localCache.getCache(LOGIN_TOKEN)?.state?.token
 
         if (config.headers && token) {
             config.headers.Authorization = `Bearer ${token}`

package/template/src/store/login.ts

@@ -9,15 +9,13 @@ type UserInfoStoreState = {
     userInfo: {
         userId: string,
         userName: string
-    },
-    token: string
+    }
 }
 
 type UserInfoStoreActions = {
     setUserInfo: (
         userInfo: UserInfoStoreState['userInfo']
-    ) => void,
-    setToken: (token: string) => void
+    ) => void
 }
 
 type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
@@ -29,9 +27,7 @@ export const userInfoStore = create<UserInfoStore>()(
                 userName: '小明',
                 userId: '111'
             },
-            token: '',
             setUserInfo: (userInfo) => set({userInfo}),
-            setToken: (token) => set({token})
         }),
         {
             name: USER_INFO

package/template/src/store/token.ts

@@ -0,0 +1,28 @@
+/**
+ * * 用户信息
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { LOGIN_TOKEN} from '@/global/constants'
+
+type UserInfoStoreState = {
+    token: string
+}
+
+type UserInfoStoreActions = {
+    setToken: (token: string) => void
+}
+
+type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
+
+export const tokenStore = create<UserInfoStore>()(
+    persist(
+        (set) => ({
+            token: '',
+            setToken: (token) => set({token})
+        }),
+        {
+            name: LOGIN_TOKEN
+        }
+    )
+)