@yyp92-cli/template-vue-mobile 1.1.0

package/template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/src/App.vue

@@ -0,0 +1,24 @@
+<template>
+    <router-view></router-view>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="App"
+>
+    import {onMounted} from "vue";
+    import { Locale } from 'vant'
+    import zhCN from 'vant/es/locale/lang/zh-CN'
+    import {changeTheme} from '@/utils'
+
+    onMounted(() => {
+        changeTheme(false)
+        Locale.use('zh-CN', zhCN)
+    })
+</script>
+
+<style
+    scoped
+    lang="scss"
+></style>

package/template/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

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

@@ -0,0 +1,68 @@
+<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="content">
+                    <router-view></router-view>
+                </div>
+
+                <div class="footer">
+                    <MyTabBar />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Layout"
+>
+    import {ref, computed} from 'vue'
+    import { useRoute } from 'vue-router'
+    import MyNavBar from './navBar/index.vue'
+    import MyTabBar from './tabBar/index.vue'
+
+    const route = useRoute()
+
+    const title = computed(() => route.meta?.title || '首页')
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .layout {
+        width: 100%;
+        height: 100%;
+        background: var(--bg-white-color);
+
+        .layout-inner {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+
+            .header,
+            .footer {
+                flex-shrink: 0;
+            }
+
+            .content {
+                flex: 1;
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+    <div class="nav-bar">
+        <van-nav-bar
+            :title="title"
+            :left-arrow="showLeftArrow"
+            @click-left="onClickLeft"
+        />
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="MyNavBar"
+>
+    import {ref} from 'vue'
+    import {useRoute} from 'vue-router'
+    import router from '@/router'
+
+    defineProps([
+        'title',
+        'showLeftArrow'
+    ])
+
+    function onClickLeft() {
+        router.back()
+    }
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .nav-bar {}
+</style>

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

@@ -0,0 +1,47 @@
+<template>
+    <div class="tab-bar">
+        <van-tabbar
+            v-model="active"
+        >
+            <template
+                v-for="item in loginStore.userMenus"
+                :key="item.path"
+            >
+                <van-tabbar-item
+                    :to="item.path"
+                    :icon="item.meta.icon"
+                >{{item.meta.title}}</van-tabbar-item>
+            </template>
+        </van-tabbar>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="MyTabBar"
+>
+    import {ref, onMounted} 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
+    })
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .tab-bar {
+        width: 100%;
+        height: 50px;
+    }
+</style>

package/template/src/global/constants.ts

@@ -0,0 +1,4 @@
+export const LOGIN_TOKEN = 'login/token'
+export const USER_INFO = 'userInfo'
+export const MENUS = 'menus'
+export const PERMISSION = 'permisiion'

package/template/src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import router from '@/router'
+import store from '@/store'
+import App from './App.vue'
+
+import './styles/index.scss'
+
+const app = createApp(App)
+
+app.use(store)
+app.use(router)
+app.mount('#app')

package/template/src/router/index.ts

@@ -0,0 +1,38 @@
+import { LOGIN_TOKEN, PERMISSION, MENUS} from '@/global/constants'
+import { localCache } from '@/utils/cache'
+import { createRouter, createWebHistory } from 'vue-router'
+// import { getFirstMenu, getMenusRedirect, localRoutes } from '@/utils/map-menus'
+import {getLocalPromission} from '@/utils'
+import { routes } from './routes'
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: routes
+})
+
+/**
+ * * 导航守卫
+ * 参数： to(跳转到的位置)，from(从哪里跳转过来的)，next: 路由的放行函数
+ * 返回值：返回值决定导航的路径(不返回或者返回 undefined, 默认跳转)
+ */
+router.beforeEach((to, from, next) => {
+    const permission = localCache.getCache(PERMISSION) ?? []
+    const menus = localCache.getCache(MENUS) ?? []
+
+
+    if (to.path === '/') {
+        next({
+            path: menus[0]?.path || '/'
+        })
+    }
+    else if (!['/403', '/login'].includes(to.path) && !permission.includes(to.path) && getLocalPromission(routes).includes(to.path)) {
+        return next('/403')
+    }
+    else {
+        next()
+    }
+
+    next()
+})
+
+export default router

package/template/src/router/routes.tsx

@@ -0,0 +1,83 @@
+
+export const routes: any[] = [
+    {
+        path: '/',
+        name: 'main',
+        component: () => import('@/components/layout/index.vue'),
+        children: [
+            {
+                path: '/home',
+                name: 'home',
+                component: () => import('@/views/home/index.vue'),
+                meta: {
+                    title: '首页', 
+                    icon: 'wap-home-o',
+                    hideMenu: false,
+                    showFullScreen: false
+                }
+            },
+            {
+                path: '/message',
+                name: 'message',
+                component: () => import('@/views/message/index.vue'),
+                meta: {
+                    title: '消息', 
+                    icon: 'chat-o',
+                    hideMenu: false,
+                    showFullScreen: false
+                }
+            },
+            {
+                path: '/todo',
+                name: 'todo',
+                component: () => import('@/views/todo/index.vue'),
+                meta: {
+                    title: '代办', 
+                    icon: 'label-o',
+                    hideMenu: false,
+                    showFullScreen: false
+                }
+            },
+            {
+                path: '/mine',
+                name: 'mine',
+                component: () => import('@/views/mine/index.vue'),
+                meta: {
+                    title: '我的', 
+                    icon: 'user-o',
+                    hideMenu: false,
+                    showFullScreen: false
+                }
+            },
+            {
+                path: '/detail',
+                name: 'detail',
+                component: () => import('@/views/detail/index.vue'),
+                meta: {
+                    title: '详情', 
+                    icon: '',
+                    hideMenu: true,
+                    showFullScreen: true
+                }
+            },
+        ]
+    },
+
+    
+    {
+        path: '/login',
+        component: () => import('@/views/login/index.vue')
+    },
+
+    {
+        path: '/403',
+        component: () => import('@/views/403/index.vue')
+    },
+
+    {
+        path: '/:pathMatch(.*)',
+        component: () => import('@/views/404/index.vue')
+    }
+]
+
+export default routes

package/template/src/service/api.ts

@@ -0,0 +1,7 @@
+// 接口路径
+export const apiUrl: any = {
+    demoUrl: `/api/get`,
+    demoUrl1: `/api/post`
+}
+
+

package/template/src/service/config.ts

@@ -0,0 +1,9 @@
+export const BASE_URL = import.meta.env.VITE_BASE_URL
+
+export const TIMEOUT = 5000
+
+export const ErrorMessageData = {
+    ERR_NETWORK: '网络异常',
+    ERR_NOT_FOUND: '请求的资源在服务器上不存在',
+    ERR_FORBIDDEN: '没有权限'
+}

package/template/src/service/index.ts

@@ -0,0 +1 @@
+export * from './service'

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

@@ -0,0 +1,270 @@
+import axios from 'axios'
+import { Toast } from 'vant'
+import type { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'
+import type { MyInternalAxiosRequestConfig } from './type'
+import { localCache } from '@/utils/cache'
+import { LOGIN_TOKEN, USER_INFO, MENUS, PERMISSION } from '@/global/constants'
+import router from '@/router'
+
+// * 存储待取消的请求：key 是请求唯一标识，value 是 AbortController 实例
+const pendingRequests = new Map()
+
+/**
+ * * 生成请求唯一标识
+ * @param config - Axios 请求配置
+ * @returns 唯一标识字符串
+ */
+const generateKey = (config: AxiosRequestConfig) => {
+    const {
+        method,
+        url,
+        params,
+        data
+    } = config
+
+    // 拼接方法、URL、参数（params 是 URL 参数，data 是请求体参数）
+    return [
+        method?.toUpperCase(),
+        url,
+        JSON.stringify(params || {}),
+        JSON.stringify(data || {})
+    ].join('&')
+}
+
+/**
+ * * 添加请求到待取消列表（若存在重复请求则先取消）
+ * @param config - Axios 请求配置
+ */
+const addPendingRequest = (config: AxiosRequestConfig) => {
+    const requestKey = generateKey(config)
+
+    // 若存在重复请求，先取消旧请求
+    if (pendingRequests.has(requestKey)) {
+        const controller = pendingRequests.get(requestKey)
+        controller.abort(`取消重复请求：${requestKey}`)
+        pendingRequests.delete(requestKey)
+    }
+
+    // 创建新的 AbortController 并关联到请求
+    const controller = new AbortController()
+    // 将 signal 绑定到请求配置
+    config.signal = controller.signal
+    pendingRequests.set(requestKey, controller)
+}
+
+/**
+ * * 从待取消列表中移除请求（请求完成/失败/取消时调用）
+ * @param config - Axios 请求配置
+ */
+const removePendingRequest = (config: AxiosRequestConfig) => {
+    const requestKey = generateKey(config)
+
+    if (pendingRequests.has(requestKey)) {
+        pendingRequests.delete(requestKey)
+    }
+}
+
+// * Token 过期处理函数
+function handleTokenExpired() {
+    // 1. 清除本地存储的 Token（避免死循环）
+    localCache.removeCache(LOGIN_TOKEN)
+    localCache.removeCache(USER_INFO)
+    localCache.removeCache(MENUS)
+    localCache.removeCache(PERMISSION)
+
+    // 2. 跳转到登录页，记录当前路径（方便登录后跳转回来）
+    const currentPath = router?.currentRoute?.value?.fullPath
+
+    if (currentPath !== '/login') {
+        router.push({
+            path: '/login',
+            // 携带当前路径作为跳转参数
+            query: {
+                redirect: currentPath
+            } 
+        })
+    }
+
+    // 3. 可选：显示提示信息
+    Toast.show({
+        icon: 'fail',
+        content: '登录已过期，请重新登录',
+    })
+}
+
+
+// * 创建 Axios 实例
+const instance = axios.create({
+    // 从环境变量取 baseURL
+    baseURL: import.meta.env.VITE_APP_BASE_API,
+    timeout: 5000
+})
+
+// * 请求拦截器：添加取消逻辑
+instance.interceptors.request.use(
+    (config: MyInternalAxiosRequestConfig) => {
+        // 允许通过配置关闭取消功能（例如某些特殊长轮询请求）
+        if (config.cancelable !== false) {
+            addPendingRequest(config)
+        }
+
+        const token = localCache.getCache(LOGIN_TOKEN)
+
+        if (config.headers && token) {
+            config.headers.Authorization = `Bearer ${token}`
+        }
+
+        return config
+    },
+    (error) => Promise.reject(error)
+)
+
+// * 响应拦截器：清理已完成的请求
+instance.interceptors.response.use(
+    (response: AxiosResponse) => {
+        const {
+            config,
+            data: responseData
+        } = response ?? {}
+        const {
+            code,
+            message
+        } = responseData ?? {}
+
+        removePendingRequest(config)
+
+        // * 统一处理接口成功后，返回的 code !== 0 的错误，这样业务代码就不用写错误的逻辑了
+        if (code !== 0) {
+            // handleTokenExpired()
+            message.error(message)
+            return Promise.reject(message)
+        }
+
+        // 直接返回响应体数据
+        return responseData
+    },
+    (error: AxiosError) => {
+        const {
+            config,
+            response
+        } = error ?? {}
+        const { status, statusText } = response ?? {}
+
+        // 移除已失败/取消的请求
+        if (error.config) {
+            removePendingRequest(error.config)
+        }
+
+        // 区分取消错误和其他错误
+        if (axios.isCancel(error)) {
+            // 取消请求不视为错误，返回 null
+            return Promise.resolve(null)
+        }
+
+        // * token 过期， 后端返回 401 状态码
+        if (status === 401) {
+            handleTokenExpired()
+
+            return Promise.reject(error)
+        }
+
+        // 异常处理程序
+        if (response && status) {
+            Toast.show({
+                icon: 'fail',
+                content: statusText,
+            })
+        }
+        else if (!response) {
+            Toast.show({
+                icon: 'fail',
+                content: '您的网络发生异常，无法连接服务器'
+            })
+        }
+
+        // 其他错误处理（如网络错误、404等）
+        return Promise.reject(error)
+    }
+)
+
+// 扩展实例：添加手动取消方法
+const requestFn = {
+    ...instance,
+
+    request<T = any>(config: AxiosRequestConfig) {
+        // 返回 promise
+        return new Promise<T>((resolve, reject) => {
+            instance
+                .request<any, T>(config)
+                .then((res) => {
+                    resolve(res)
+                })
+                .catch((err) => {
+                    reject(err)
+                })
+        })
+    },
+
+    get(config: AxiosRequestConfig) {
+        return this.request({
+            ...config,
+            method: 'GET'
+        })
+    },
+
+    post(config: AxiosRequestConfig) {
+        return this.request({
+            ...config,
+            method: 'POST'
+        })
+    },
+
+    delete(config: AxiosRequestConfig) {
+        return this.request({
+            ...config,
+            method: 'DELETE'
+        })
+    },
+
+    patch(config: AxiosRequestConfig) {
+        return this.request({
+            ...config,
+            method: 'PATCH'
+        })
+    },
+
+    /**
+     * 手动取消单个请求
+     * @param config - 请求配置（需包含 method、url，可选 params/data）
+     * @param message - 取消原因
+     * @returns 是否取消成功
+     */
+    cancelOne: (
+        config: AxiosRequestConfig,
+        message: string = '手动取消请求'
+    ) => {
+        const key = generateKey(config)
+
+        if (pendingRequests.has(key)) {
+            pendingRequests.get(key).abort(message)
+            pendingRequests.delete(key)
+
+            return true
+        }
+
+        return false
+    },
+
+    /**
+     * 取消所有待处理的请求
+     * @param message - 取消原因
+     */
+    cancelAll: (message: string = '取消所有请求') => {
+        pendingRequests.forEach((controller, key) => {
+            controller.abort(`${message}：${key}`)
+            pendingRequests.delete(key)
+        })
+    }
+}
+
+export default requestFn

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

@@ -0,0 +1,5 @@
+import type { InternalAxiosRequestConfig } from 'axios'
+
+export interface MyInternalAxiosRequestConfig extends InternalAxiosRequestConfig {
+    cancelable?: boolean
+}

package/template/src/service/service.ts

@@ -0,0 +1,27 @@
+import requestFn from './request'
+import {apiUrl} from './api'
+
+// 具体的接口
+export const getDemo = () => {
+    const queryData = {}
+
+    return requestFn.get({
+        url: apiUrl.demoUrl,
+        params: {
+            name: '111',
+            age: 20
+        }
+    })
+}
+
+export const postDemo = () => {
+    const queryData = {}
+
+    return requestFn.post({
+        url: apiUrl.demoUrl1,
+        data: {
+            name: '111222',
+            age: 20
+        }
+    })
+}

package/template/src/store/index.ts

@@ -0,0 +1,14 @@
+import {createPinia} from 'pinia'
+import useLoginStore from './login'
+import type { App } from 'vue'
+
+const pinia = createPinia()
+
+function registerStore(app: App<Element>) {
+    app.use(pinia)
+
+    const loginStore = useLoginStore()
+    loginStore.loadLocalCacheAction()
+}
+
+export default registerStore