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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @yyp92-cli/template-react-mobile
 
+## 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-mobile",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "publishConfig": {
     "access": "public"
   },

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

@@ -4,10 +4,11 @@ import NavBar from '../navBar'
 import TabBar from '../tabBar'
 import { permissionStore } from '@/store/permission'
 import { routerConfig, type RouterConfigItemProps } from '@/router/router'
-
-import styles from './index.module.scss'
 import { localCache } from '@/utils'
 import { LOGIN_TOKEN } from '@/global/constants'
+import { tokenStore } from '@/store/token'
+
+import styles from './index.module.scss'
 
 interface ContentProps {
     [key: string]: any
@@ -20,6 +21,7 @@ const Content: React.FC<ContentProps> = ({}) => {
     const {
         permissions
     } = permissionStore()
+    const {token} = tokenStore()
 
     const [currentRouter, setCurrentRouter] = useState<RouterConfigItemProps>()
 
@@ -27,7 +29,10 @@ const Content: React.FC<ContentProps> = ({}) => {
         const {pathname} = location ?? {}
         const newPathname = pathname.slice(1)
 
-        if (newPathname !== '') {
+        if (!token) {
+            navigate('/login')
+        }
+        else if (newPathname !== '') {
             if (permissions.includes(newPathname)) {
                 const newCurrentRouter: any = routerConfig[0]?.children?.find((group: any) => group.key === newPathname) ?? {}
 
@@ -38,11 +43,9 @@ const Content: React.FC<ContentProps> = ({}) => {
             }
         }
         else {
-            const token = localCache.getCache(LOGIN_TOKEN)
-
-            if (!token) {
-                navigate('/login')
-            }
+            const newCurrentRouter: any = routerConfig[0]?.children?.find((group: any) => permissions.includes(group.key) ) ?? {}
+            setCurrentRouter(newCurrentRouter)
+            navigate(newCurrentRouter.path)
         }
     }, [location])
 
@@ -51,13 +54,13 @@ const Content: React.FC<ContentProps> = ({}) => {
     const renderContent = () => {
         const token = localCache.getCache(LOGIN_TOKEN)
 
-        if (!token) {
+        if (!token || !currentRouter) {
             return null
         }
 
         return (
             <div className={styles.layoutContent}>
-                {!currentRouter?.showFullScreen && <NavBar />}
+                <NavBar title={currentRouter?.label} />
 
                 <div className={styles.wraper}>
                     <Outlet />

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

@@ -1,11 +1,10 @@
-import React, {FC, useEffect, useState} from 'react'
-import {useLocation, useNavigate} from 'react-router-dom'
+import {FC, ReactNode} from 'react'
+import {useNavigate} from 'react-router-dom'
 import {NavBar as AntNavBar} from 'antd-mobile'
-import { menusStore } from '@/store/menus'
 import styles from './index.module.scss'
 
 interface NavBarProps {
-    title?: string
+    title?: ReactNode
     backUrl?: string
 }
 
@@ -13,18 +12,7 @@ const NavBar: FC<NavBarProps> = ({
     title = '首页',
     backUrl
 }) => {
-    const location = useLocation()
     const navigate = useNavigate()
-    const {menus} = menusStore()
-    const [curTitle, setCurTitle] = useState(title)
-
-    useEffect(() => {
-        const {pathname} = location ?? {}
-        const newPathname = pathname.slice(1)
-
-        const newCurrentRouter: any = menus?.find((group: any) => group.key === newPathname) ?? {}
-        setCurTitle(newCurrentRouter?.label ?? title)
-    }, [location])
 
 
     // ********* 操作 *********
@@ -40,7 +28,7 @@ const NavBar: FC<NavBarProps> = ({
         <div className={styles.navWraper}>
             <AntNavBar
                 onBack={goBack}
-            >{curTitle}</AntNavBar>
+            >{title}</AntNavBar>
         </div>
     )
 }

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

@@ -1,7 +1,7 @@
-import React, {FC, useState, useEffect, useLayoutEffect} from 'react'
-import {useNavigate, useLocation} from 'react-router-dom'
+import {FC, useState, useEffect, useLayoutEffect} from 'react'
+import {useNavigate} from 'react-router-dom'
 import {TabBar as AntTabBar} from 'antd-mobile'
-import routerConfig, { ComponentMap } from '@/router/router'
+import { ComponentMap } from '@/router/router'
 import styles from './index.module.scss'
 import { menusStore } from '@/store/menus'
 
@@ -9,7 +9,6 @@ interface TabBarProps {}
 
 const TabBar: FC<TabBarProps> = () => {
     const navigate = useNavigate()
-    const newLocation = useLocation()
     const {menus} = menusStore()
 
     const [tabs, setTabs] = useState<any[]>([])

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

@@ -4,6 +4,8 @@ import { Button, Form, Input } from 'antd-mobile'
 import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
 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'
 
@@ -25,7 +27,8 @@ const defaultList = [
     'todo',
     'message',
     'personalCenter',
-    'detail',
+    'home/detail',
+    'home/screen-detail',
 ]
 
 const Login: React.FC<LoginProps> = ({ }) => {
@@ -36,6 +39,8 @@ const Login: React.FC<LoginProps> = ({ }) => {
         setPermissions
     } = permissionStore()
     const { setMenus } = menusStore()
+    const { setToken } = tokenStore()
+    const { setUserInfo } = userInfoStore()
 
     const [visiblePassword, setVisiblePassword] = useState<boolean>(false)
 
@@ -46,6 +51,11 @@ const Login: React.FC<LoginProps> = ({ }) => {
 
         if (username === 'yang' && password === '123456') {
             setPermissions(defaultList)
+            setUserInfo({
+                userName: username,
+                userId: '3333'
+            })
+            setToken('222')
 
             // todo模拟接口
             setTimeout(() => {

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

@@ -44,6 +44,22 @@ const Home = () => {
                 >设置姓名</Button>
             </div>
 
+            <div style={{ marginTop: 20 }}>
+                <Button
+                    color="primary"
+                    onClick={() => {
+                        navigate('/home/detail')
+                    }}
+                >详情</Button>
+
+                <Button
+                    color="primary"
+                    onClick={() => {
+                        navigate('/home/screen-detail')
+                    }}
+                >全局屏详情</Button>
+            </div>
+
             {/* <DatePicker
                 title='时间选择'
                 visible={true}

package/template/src/router/router.tsx

@@ -83,12 +83,21 @@ export const routerConfig: RouterConfigItemProps[] = [
             // 需要全屏显示的页面
             {
                 label: '详情',
-                key: 'detail',
-                path: 'detail',
+                key: 'home/detail',
+                path: 'home/detail',
+                icon: null,
+                hideInMenu: true,
+                showFullScreen: false,
+                element: <>详情</>,
+            },
+            {
+                label: '全屏详情',
+                key: 'home/screen-detail',
+                path: 'home/screen-detail',
                 icon: null,
                 hideInMenu: true,
                 showFullScreen: true,
-                element: <>group22</>,
+                element: <>全屏详情</>,
             },
         ]
     },

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

@@ -105,7 +105,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

@@ -3,20 +3,19 @@
  */
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware';
+import { USER_INFO } from '@/global/constants';
 
 type UserInfoStoreState = {
     userInfo: {
         userId: string,
         userName: string
-    },
-    token: string
+    }
 }
 
 type UserInfoStoreActions = {
     setUserInfo: (
         nextUserInfo: UserInfoStoreState['userInfo']
-    ) => void,
-    setToken: (token: string) => void
+    ) => void
 }
 
 type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
@@ -28,12 +27,10 @@ export const userInfoStore = create<UserInfoStore>()(
                 userName: '小明',
                 userId: '111'
             },
-            token: '',
             setUserInfo: (userInfo) => set({userInfo}),
-            setToken: (token) => set({token})
         }),
         {
-            name: 'userInfo-local'
+            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
+        }
+    )
+)