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

package/CHANGELOG.md

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

package/template/src/components/layout/index.vue

@@ -1,27 +1,24 @@
 <template>
     <div class="layout">
-        <template v-if="route.meta.showFullScreen">
-            <router-view></router-view>
-        </template>
-
-        <template v-else>
-            <div class="layout-inner">
-                <div class="header">
-                    <MyNavBar
-                        :title="title"
-                        :showLeftArrow="route.fullPath !== '/home'"
-                    />
-                </div>
+        <div class="layout-inner">
+            <div class="header">
+                <MyNavBar
+                    :title="title"
+                    :showLeftArrow="route.fullPath !== '/home'"
+                />
+            </div>
 
-                <div class="content">
-                    <router-view></router-view>
-                </div>
+            <div class="content">
+                <router-view></router-view>
+            </div>
 
-                <div class="footer">
-                    <MyTabBar />
-                </div>
+            <div
+                class="footer"
+                v-if="!route.meta.showFullScreen"
+            >
+                <MyTabBar />
             </div>
-        </template>
+        </div>
     </div>
 </template>
 

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

@@ -1,7 +1,7 @@
 <template>
     <div class="tab-bar">
         <van-tabbar
-            v-model="active"
+            v-model="defaultActive"
         >
             <template
                 v-for="item in loginStore.userMenus"
@@ -21,18 +21,21 @@
     lang="ts"
     name="MyTabBar"
 >
-    import {ref, onMounted} from 'vue'
+    import {computed} from 'vue'
     import {useRoute} from 'vue-router'
     import useLoginStore from '@/store/login'
 
     const route = useRoute()
     const loginStore = useLoginStore()
-    const active = ref(0)
-    console.log('--loginStore.userMenus', loginStore.userMenus)
 
-    onMounted(() => {
-        const index = loginStore.userMenus.findIndex((item: any) => item.path === route.path)
-        active.value = index || 0
+
+    const defaultActive = computed(() => {
+        const list = route.path?.split('/') 
+        const newPath = list.length > 3 ? list?.slice(0, 3)?.join('/') : route.path
+
+        const index = loginStore.userMenus.findIndex((item: any) => newPath.indexOf(item.path) > -1)
+
+        return index
     })
 </script>
 

package/template/src/router/index.ts

@@ -20,26 +20,34 @@ router.beforeEach((to, from, next) => {
     const menus = localCache.getCache(MENUS) ?? []
     const token = localCache.getCache(LOGIN_TOKEN)
 
-    if (to.path === '/') {
-        if (!token) {
-            next({
-                path: '/login'
-            })
-        }
-        else {
-            next({
-                path: menus[0]?.path || '/'
-            })
+    if (!token) {
+        // 直接允许通过，不重复重定向
+        if (to.path === '/login') {
+            next()
+            return
         }
+
+        next({
+            path: '/login',
+            query: {
+                redirect: to.path
+            }
+        })
+        return
+    }
+    else if (to.path === '/') {
+        next({
+            path: menus[0]?.path || '/'
+        })
+        return
     }
     else if (!['/403', '/login'].includes(to.path) && !permission.includes(to.path) && getLocalPromission(routes).includes(to.path)) {
-        return next('/403')
+        next('/403')
+        return
     }
     else {
         next()
     }
-
-    next()
 })
 
 export default router

package/template/src/router/routes.tsx

@@ -50,13 +50,24 @@ export const routes: any[] = [
                 }
             },
             {
-                path: '/detail',
-                name: 'detail',
-                component: () => import('@/views/detail/index.vue'),
+                path: '/home/detail',
+                name: '/home/detail',
+                component: () => import('@/views/home/detail/index.vue'),
                 meta: {
                     title: '详情', 
                     icon: '',
                     hideMenu: true,
+                    showFullScreen: false
+                }
+            },
+            {
+                path: '/home/screen-detail',
+                name: '/home/screen-detail',
+                component: () => import('@/views/home/screen-detail/index.vue'),
+                meta: {
+                    title: '详情-全屏', 
+                    icon: '',
+                    hideMenu: true,
                     showFullScreen: true
                 }
             },

package/template/src/store/login/index.ts

@@ -23,14 +23,28 @@ const useLoginStore = defineStore(
         actions: {
             async loginAccountAction(account: any) {
                 try {
-                    setTimeout(() => {
+                    await new Promise((resolve) => {
+                        const userInfo = {
+                            username: account.username
+                        }
+                        const token = '111'
+                        this.userInfo = userInfo
+                        this.token = token
+                        
+                        localCache.setCache(USER_INFO, userInfo)
+                        localCache.setCache(LOGIN_TOKEN, token)
+
                         const menus = routes[0].children.filter((item: any) => !item.meta.hideMenu)
                         const promissions = routes[0].children.map((item: any) => item.path)
                         this.userMenus = menus
 
                         localCache.setCache(MENUS, menus)
                         localCache.setCache(PERMISSION, promissions)
-                    }, 3000)
+
+                        setTimeout(() => {
+                            resolve(true)
+                        }, 5000)
+                    })
                 }
                 catch(error) {
                     return error

package/template/src/views/home/index.vue

@@ -1,6 +1,18 @@
 <template>
     <div class="home">
         <h2>home</h2>
+
+        <div>
+            <van-button
+                type="primary"
+                @click="handleJump"
+            >详情</van-button>
+
+            <van-button
+                type="primary"
+                @click="handleJump1"
+            >详情-全屏</van-button>
+        </div>
     </div>
 </template>
 
@@ -9,6 +21,17 @@
     lang="ts"
     name="Home"
 >
+    import {useRouter} from 'vue-router'
+
+    const router = useRouter()
+
+    function handleJump() {
+        router.push('/home/detail')
+    }
+
+    function handleJump1() {
+        router.push('/home/screen-detail')
+    }
 </script>
 
 <style

package/template/src/views/home/screen-detail/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="detail">
+        <h2>detail-screen</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Detail"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .detail {}
+</style>

package/template/src/views/login/index.vue

@@ -21,8 +21,13 @@
             </van-cell-group>
 
             <div style="margin: 16px;">
-                <van-button round block type="primary" native-type="submit">
-                提交
+                <van-button
+                    round
+                    block
+                    type="primary"
+                    native-type="submit"
+                >
+                    提交
                 </van-button>
             </div>
         </van-form>
@@ -36,8 +41,8 @@
 >
     import { ref } from 'vue'
     import {useRoute} from 'vue-router'
-    import { showLoadingToast, closeToast } from 'vant'
     import useLoginStore from '@/store/login'
+
     import router from '@/router'
 
     const route = useRoute()

package/template/tsconfig.app.json

@@ -19,6 +19,8 @@
     "include": [
         "src/**/*.ts",
         "src/**/*.tsx",
-        "src/**/*.vue"
+        "src/**/*.vue",
+        "src/**/*.d.ts", // 关键：包含所有 .d.ts 类型文件
+        "auto-imports.d.ts"
     ]
 }

package/template/vite.config.ts

@@ -9,6 +9,7 @@ import Components from 'unplugin-vue-components/vite'
 import { VantResolver } from '@vant/auto-import-resolver'
 
 
+
 // https://vite.dev/config/
 export default defineConfig({
     base:'./',
@@ -31,10 +32,20 @@ export default defineConfig({
     plugins: [
         vue(),
         AutoImport({
-            resolvers: [VantResolver()],
+            resolvers: [
+                VantResolver({
+                    importStyle: 'css'
+                })
+            ],
+            dts: 'auto-imports.d.ts',
         }),
         Components({
-            resolvers: [VantResolver()],
+            resolvers: [
+                VantResolver({
+                    importStyle: 'css'
+                })
+            ],
+            dts: 'components.d.ts',
         })
     ],