@yyp92-cli/template-react-pc 2.2.0 → 2.3.0

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

@@ -0,0 +1,267 @@
+import axios from 'axios'
+import { notification, message } from 'antd'
+import type { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'
+import type { MyInternalAxiosRequestConfig } from './type'
+import router from '@/router/router'
+import { userInfoStore } from '@/store/login'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
+import { permissionStore } from '@/store/permission'
+
+// * 存储待取消的请求：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（避免死循环）
+    userInfoStore.getState().clearUserInfo()
+    tokenStore.getState().clearToken()
+    menusStore.getState().clearMenus()
+    permissionStore.getState().clearPermissions()
+
+    // 排除登录页，避免死循环
+    const currentPath = window.location.pathname
+    const isLoginPage = currentPath === '/login'
+
+    if (!isLoginPage) {
+        // todo 暂时写死
+        router.navigate(`/login?redirect=${currentPath || '/'}`, {
+            replace: true,
+        })
+    }
+
+    // 3. 可选：显示提示信息
+    message.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 = tokenStore.getState().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) {
+            notification.error({
+                message: `请求错误 ${status}: ${config?.url}`,
+                description: statusText
+            })
+        }
+        else if (!response) {
+            notification.error({
+                message: '网络异常',
+                description: '您的网络发生异常，无法连接服务器'
+            })
+        }
+
+        // 其他错误处理（如网络错误、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/antdToken.ts

@@ -0,0 +1,35 @@
+/**
+ * * 用户信息
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { ANTDTOKEN} from '@/global/constants'
+import { lightToken } from '@/antdTheme/lightTheme'
+import { darkToken } from '@/antdTheme/darkTheme'
+
+type AntdTokenStoreState = {
+    antdToken: any
+}
+
+type AntdTokenStoreActions = {
+    setAntdToken: (
+        antdToken: AntdTokenStoreState['antdToken']
+    ) => void,
+}
+
+type AntdTokenStore = AntdTokenStoreState & AntdTokenStoreActions
+
+export const antdTokenStore = create<AntdTokenStore>()(
+    persist(
+        (set) => ({
+            antdToken: {},
+            setAntdToken: (isDark) => {
+                const antdToken = isDark ? darkToken : lightToken
+                return set({antdToken})
+            },
+        }),
+        {
+            name: ANTDTOKEN
+        }
+    )
+)

package/template/src/store/login.ts

@@ -0,0 +1,38 @@
+/**
+ * * 用户信息
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { USER_INFO} from '@/global/constants'
+
+type UserInfoStoreState = {
+    userInfo: {
+        userId?: string,
+        userName?: string
+    }
+}
+
+type UserInfoStoreActions = {
+    setUserInfo: (
+        userInfo: UserInfoStoreState['userInfo']
+    ) => void,
+    clearUserInfo: () => void
+}
+
+type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
+
+export const userInfoStore = create<UserInfoStore>()(
+    persist(
+        (set) => ({
+            userInfo: {
+                userName: '小明',
+                userId: '111'
+            },
+            setUserInfo: (userInfo) => set({userInfo}),
+            clearUserInfo: () => set({userInfo: {}})
+        }),
+        {
+            name: USER_INFO
+        }
+    )
+)

package/template/src/store/menus.ts

@@ -0,0 +1,30 @@
+/**
+ * * 用户菜单
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { MENUS} from '@/global/constants'
+
+type MenusStoreState = {
+    menus: any[]
+}
+
+type MenusStoreActions = {
+    setMenus: (menus: string[]) => void,
+    clearMenus: () => void
+}
+
+type MenusStore = MenusStoreState & MenusStoreActions
+
+export const menusStore = create<MenusStore>()(
+    persist(
+        (set) => ({
+            menus: [],
+            setMenus: (menus) => set({menus}),
+            clearMenus: () => set({menus: []}),
+        }),
+        {
+            name: MENUS
+        }
+    )
+)

package/template/src/store/permission.ts

@@ -0,0 +1,30 @@
+/**
+ * * 用户信息
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { PERMISSION} from '@/global/constants'
+
+type PermissionStoreState = {
+    permissions: string[]
+}
+
+type PermissionStoreActions = {
+    setPermissions: (permissions: string[]) => void,
+    clearPermissions: () => void
+}
+
+type PermissionStore = PermissionStoreState & PermissionStoreActions
+
+export const permissionStore = create<PermissionStore>()(
+    persist(
+        (set) => ({
+            permissions: [],
+            setPermissions: (permissions) => set({permissions}),
+            clearPermissions: () => set({permissions: []}),
+        }),
+        {
+            name: PERMISSION
+        }
+    )
+)

package/template/src/store/token.ts

@@ -0,0 +1,30 @@
+/**
+ * * 用户信息
+ */
+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,
+    clearToken: () => void
+}
+
+type UserInfoStore = UserInfoStoreState & UserInfoStoreActions
+
+export const tokenStore = create<UserInfoStore>()(
+    persist(
+        (set) => ({
+            token: '',
+            setToken: (token) => set({token}),
+            clearToken: () => set({token: ''})
+        }),
+        {
+            name: LOGIN_TOKEN
+        }
+    )
+)

package/template/src/theme/darkTheme.scss

@@ -0,0 +1,47 @@
+:root[data-theme="dark"] {
+    --primary-text-color: #FFFFFF;
+    --primary-white-color: #2A2A2D;
+
+    // 全局主色
+    --primary-color: #3591F4;
+    --primary-color1: rgba(53, 145, 244, 0.1);
+    // 链接色
+    --link-color: #3591F4;
+    // 成功色
+    --success-color: #0CAA43;
+    --success-color1: rgba(12, 170, 67, 0.1);
+    // 警告色
+    --warning-color: #FFA00A;
+    --warning-color1: rgba(255, 160, 10, 0.1);
+    // 错误色
+    --error-color: #F43835;
+    --error-color1: rgba(244, 56, 53, 0.1);
+
+    // 主文本色
+    --text-color: #FFFFFF;
+    // 次文本色
+    --text-color-secondary: #898D97;
+
+    // 白的背景
+    --bg-white-color: #1C1C1C;
+    --bg-grey-color: #161616;
+    --bg-grey-color1: transparent;
+    --bg-black2-color: #222222;
+    --bg-hover-color: rgba(53, 145, 244, 0.1);
+    --bg-white-color1: rgba(0, 0, 0, 0.5);
+
+    // 边框、输入框、分割线
+    --border-color-base: #2A2A2D;
+    // icon
+    --icon-color: #898D97;
+
+    // 主字号
+    --font-size-base: 14px;
+  
+    // 组件/浮层圆角
+    --border-radius-base: 4px;
+    --modal-border-radius-base: 5px;
+  
+    // 阴影
+    --box-shadow-color: #000000;
+}

package/template/src/theme/lightTheme.scss

@@ -0,0 +1,49 @@
+:root[data-theme="light"] {
+    --primary-text-color: #FFFFFF;
+    --primary-white-color: #FFFFFF;
+  
+    // 全局主色
+    --primary-color: #3591F4;
+    --primary-color1: rgba(53, 145, 244, 0.1);
+    // 链接色
+    --link-color: var(--primary-color);
+    // 成功色
+    --success-color: #0CAA43;
+    --success-color1: rgba(12, 170, 67, 0.1);
+    // 警告色
+    --warning-color: #FFA00A;
+    --warning-color1: rgba(255, 160, 10, 0.1);
+    // 错误色
+    --error-color: #F43835;
+    --error-color1: rgba(244, 56, 53, 0.1);
+  
+    // 主文本色
+    --text-color: #363A45; 
+    // 次文本色
+    --text-color-secondary: #898D97; 
+  
+    // 白的背景
+    --bg-white-color: var(--primary-white-color);
+    --bg-grey-color: #F2F4F9;
+    --bg-grey-color1: var(--bg-grey-color);
+    --bg-black2-color: var(--primary-white-color);
+    --bg-hover-color: rgba(53, 145, 244, 0.1);
+    --bg-white-color1: rgba(255, 255, 255, 0.5);
+  
+    // 边框、输入框、分割线
+    --border-color-base: #DDE6F0;
+    // icon
+    --icon-color: #CCD6DD;
+  
+  
+  
+    // 主字号
+    --font-size-base: 14px;
+  
+    // 组件/浮层圆角
+    --border-radius-base: 4px;
+    --modal-border-radius-base: 5px;
+  
+    // 阴影
+    --box-shadow-color: #000000;
+}

package/template/src/utils/base64ToBlob.ts

@@ -0,0 +1,41 @@
+import { v4 as uuidv4 } from 'uuid'
+
+export const base64ToBlob = (
+    base64String: any,
+    type: string, 
+    fileName: string
+) => {
+    type = type || 'png'
+    let base64Arr = [];
+
+    try {
+        base64Arr = base64String?.split?.(",");
+    }
+    catch (error) {
+        base64String = `data:image/${type || "png"};base64,` + base64String;
+    }
+
+    base64Arr = base64String?.split(",");
+
+    let mime = base64Arr?.[0]?.match(/:(.*?);/)?.[1] || `image/${type}`;
+    // 去掉url的头，并转化为byte
+    let bytes = window.atob(base64Arr[1]); 
+    // 处理异常,将ascii码小于0的转换为大于0
+    let ab = new window.ArrayBuffer(bytes.length); 
+    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
+    let ia = new window.Uint8Array(ab); 
+
+    for (let i = 0; i < bytes.length; i++) {
+        ia[i] = bytes.charCodeAt(i);
+    }
+    let dateTime = new Date();
+    let name = uuidv4();
+    const blobObject: any = new window.Blob([ab], {
+        type: mime,
+    });
+
+    //禁止改动
+    blobObject.name = `${name}.${type}`; 
+
+    return blobObject;
+}

package/template/src/utils/cache.ts

@@ -0,0 +1,44 @@
+enum CacheType {
+    Local,
+    Session
+}
+
+class Cache {
+    storage: Storage
+
+    constructor(type: CacheType) {
+        this.storage = type === CacheType.Local
+            ? localStorage
+            : sessionStorage
+    }
+
+    setCache(key: string, value: any) {
+        if (value) {
+            this.storage.setItem(key, JSON.stringify(value))
+        }
+    }
+
+    getCache(key: string) {
+        const value = this.storage.getItem(key)
+
+        if (value) {
+            return JSON.parse(value)
+        }
+    }
+
+    removeCache(key: string) {
+        this.storage.removeItem(key)
+    }
+
+    clear() {
+        this.storage.clear()
+    }
+}
+
+const localCache = new Cache(CacheType.Local)
+const sessionCache = new Cache(CacheType.Session)
+
+export {
+    localCache,
+    sessionCache
+}

package/template/src/utils/changeTheme.ts

@@ -0,0 +1,14 @@
+// 主题切换
+export const getDarkTheme = (isDark: boolean) => {
+    // 获取根元素
+    const root = document.documentElement;
+
+    if (!isDark) {
+        // 修改 data-theme 属性的值为 "light"
+        root.setAttribute('data-theme', 'light');
+        return
+    }
+
+    // 修改 data-theme 属性的值为 "dark"
+    root.setAttribute('data-theme', 'dark');
+}