@yyp92-cli/template-vue-pc 1.2.0

package/template/src/router/index.ts

@@ -0,0 +1,41 @@
+import { LOGIN_TOKEN, PERMISSION, USER_MENUS} from '@/global/constants'
+import { localCache } from '@/utils/cache'
+import { createRouter, createWebHistory } from 'vue-router'
+import { getFirstMenu, getMenusRedirect, localRoutes } from '@/utils/map-menus'
+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(USER_MENUS) ?? []
+    // 只有登陆成功(token)，才能真正进入到 main 页面
+    const token = localCache.getCache(LOGIN_TOKEN)
+
+    const newUrl = getMenusRedirect(menus, to.path)
+
+    if (to.path === '/') {
+        next({
+            path: getFirstMenu(menus)
+        })
+    }
+    else if (newUrl) {
+        next(newUrl)
+    }
+    else if (!['/403', '/login'].includes(to.path) && !permission.includes(to.path) && localRoutes.includes(to.path)) {
+        return next('/403')
+    }
+    else {
+        next()
+    }
+})
+
+export default router

package/template/src/router/routes.ts

@@ -0,0 +1,189 @@
+export const routes = [
+    {
+        path: '/',
+        name: 'main',
+        component: () => import('../views/main/index.vue'),
+        children: [
+            {
+                path: '/analysis',
+                name: 'analysis',
+                meta: {
+                    title: '系统总览', 
+                    icon: 'el-icon-monitor',
+                    hideMenu: false
+                },
+                children: [
+                    {
+                        path: '/overview',
+                        name: 'overview',
+                        component: () => import('@/views/main/analysis/overview/index.vue'),
+                        meta: {
+                            title: '核心技术', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    },
+                    {
+                        path: '/dashboard',
+                        name: 'dashboard',
+                        component: () => import('@/views/main/analysis/dashboard/index.vue'),
+                        meta: {
+                            title: '商品统计', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    }
+                ]
+            },
+            {
+                path: '/system',
+                name: 'system',
+                meta: {
+                    title: '系统管理', 
+                    icon: 'el-icon-setting',
+                    hideMenu: false
+                },
+                children: [
+                    {
+                        path: '/user',
+                        name: 'user',
+                        component: () => import('@/views/main/system/user/index.vue'),
+                        meta: {
+                            title: '用户管理', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    },
+                    {
+                        path: '/department',
+                        name: 'department',
+                        component: () => import('@/views/main/system/department/index.vue'),
+                        meta: {
+                            title: '部门管理', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    },
+                    {
+                        path: '/menu',
+                        name: 'menu',
+                        component: () => import('@/views/main/system/menu/index.vue'),
+                        meta: {
+                            title: '菜单管理', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    },
+                    {
+                        path: '/role',
+                        name: 'role',
+                        component: () => import('@/views/main/system/role/index.vue'),
+                        meta: {
+                            title: '角色管理', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    }
+                ]
+            },
+            {
+                path: '/product',
+                name: 'product',
+                meta: {
+                    title: '商品中心', 
+                    icon: 'el-icon-goods',
+                    hideMenu: false
+                },
+                children: [
+                    {
+                        path: '/category',
+                        name: 'category',
+                        component: () => import('@/views/main/product/category/index.vue'),
+                        meta: {
+                            title: '商品类别', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    },
+                    {
+                        path: '/goods',
+                        name: 'goods',
+                        component: () => import('@/views/main/product/goods/index.vue'),
+                        meta: {
+                            title: '商品信息', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    }
+                ]
+            },
+            {
+                path: '/story',
+                name: 'story',
+                meta: {
+                    title: '随便聊聊', 
+                    icon: 'el-icon-setting',
+                    hideMenu: false
+                },
+                children: [
+                    {
+                        path: '/chat',
+                        name: 'chat',
+                        component: () => import('@/views/main/story/chat/index.vue'),
+                        meta: {
+                            title: '你的故事', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    },
+                    {
+                        path: '/list',
+                        name: 'list',
+                        component: () => import('@/views/main/story/list/index.vue'),
+                        meta: {
+                            title: '故事列表', 
+                            hideMenu: false,
+                            showFullScreen: false
+                        }
+                    }
+                ]
+            },
+            {
+                path: '/fullScreen',
+                name: 'fullScreen',
+                component: () => import('@/views/main/fullScreen/index.vue'),
+                meta: {
+                    title: '数据大屏', 
+                    icon: 'el-icon-monitor',
+                    hideMenu: false,
+                    showFullScreen: true
+                }
+            },
+            {
+                path: '/detail',
+                name: 'detail',
+                component: () => import('@/views/main/detail/index.vue'),
+                meta: {
+                    title: '页面详情', 
+                    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/not-found/index.vue')
+    }
+]

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

@@ -0,0 +1,90 @@
+import requestFn from '../request'
+// todo 测试数据，正式使用删除
+import {loginData, userInfoMock, userMenus, userList, userListDelete, userRoleList, userMenuList, userDepartmentList} from '@/mock'
+import type {IAccount} from '@/types'
+
+export const accountLoginRequest = (account: IAccount) => {
+    // return requestFn.post({
+    //     url: '/login',
+    //     data: account
+    // })
+
+    return Promise.resolve({data: loginData})
+}
+
+export const getUserInfoById = (id: number) => {
+    // return requestFn.get({
+    //     url: `/users/${id}`,
+    // })
+
+    return Promise.resolve({data: userInfoMock})
+}
+
+export const getUserMenusByRoleId = (id: number) => {
+    // return requestFn.get({
+    //     url: `/role/${id}/menu`
+    // })
+
+    return Promise.resolve({data: userMenus})
+}
+
+
+// 用户列表
+export const postUserList = (queryInfo: any) => {
+    // return requestFn.post({
+    //     url: 'users/list',
+    //     data: queryInfo
+    // })
+
+    return Promise.resolve({data: userList})
+}
+
+export function deleteUserById(id: number) {
+    // return requestFn.delete({
+    //     url: `/users/${id}`,
+    // })
+
+    return Promise.resolve({data: userListDelete})
+}
+
+export function getEntireRoles() {
+    // return requestFn.post({
+    //     url: '/role/list'
+    // })
+
+    return Promise.resolve({data: userRoleList})
+}
+
+export function getEntireDepartments() {
+    // return requestFn.post({
+    //     url: '/department/list'
+    // })
+
+    return Promise.resolve({data: userDepartmentList})
+}
+
+export function getEntireMenu() {
+    // return requestFn.post({
+    //     url: '/menu/list'
+    // })
+
+    return Promise.resolve({data: userMenuList})
+}
+
+export function newUserData(userInfo: any) {
+    // return requestFn.post({
+    //     url: '/users',
+    //     data: userInfo
+    // })
+
+    return Promise.resolve({data: '创建用户成功~'})
+}
+
+export function editUserData(id: number, userInfo: any) {
+    // return requestFn.patch({
+    //     url: `/users/${id}`,
+    //     data: userInfo
+    // })
+
+    return Promise.resolve({data: '编辑用户成功~'})
+}

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

@@ -0,0 +1,268 @@
+import axios from 'axios'
+import { ElNotification, ElMessage } from 'element-plus'
+import type { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'
+import type { MyInternalAxiosRequestConfig } from './type'
+import { localCache } from '@/utils/cache'
+import { LOGIN_TOKEN, USER_INFO } 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)
+
+    // 2. 跳转到登录页，记录当前路径（方便登录后跳转回来）
+    const currentPath = router?.currentRoute?.value?.fullPath
+
+    if (currentPath !== '/login') {
+        router.push({
+            path: '/login',
+            // 携带当前路径作为跳转参数
+            query: {
+                redirect: currentPath
+            } 
+        })
+    }
+
+    // 3. 可选：显示提示信息
+    ElMessage.error('登录已过期，请重新登录')
+}
+
+
+// * 创建 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()
+            ElMessage.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) {
+            ElNotification({
+                title: `请求错误 ${status}: ${config?.url}`,
+                message: statusText,
+                type: 'error',
+            })
+
+        }
+        else if (!response) {
+            ElNotification({
+                title: '网络异常',
+                message: '您的网络发生异常，无法连接服务器',
+                type: 'error',
+            })
+        }
+
+        // 其他错误处理（如网络错误、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/store/counter.ts

@@ -0,0 +1,19 @@
+import {defineStore} from 'pinia'
+
+const useCountStore = defineStore('counter', {
+    state: () => ({
+        counter: 100
+    }),
+    getters: {
+        doubleCounter(state) {
+            return state.counter * 2
+        }
+    },
+    actions: {
+        changeCounterAction(newCounter: number) {
+            this.counter = newCounter
+        }
+    }
+})
+
+export default useCountStore

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