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

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

@@ -1,267 +0,0 @@
-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

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

package/template/src/service/service.ts

@@ -1,27 +0,0 @@
-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

@@ -1,35 +0,0 @@
-/**
- * * 用户信息
- */
-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

@@ -1,38 +0,0 @@
-/**
- * * 用户信息
- */
-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

@@ -1,30 +0,0 @@
-/**
- * * 用户菜单
- */
-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

@@ -1,30 +0,0 @@
-/**
- * * 用户信息
- */
-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

@@ -1,30 +0,0 @@
-/**
- * * 用户信息
- */
-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

@@ -1,47 +0,0 @@
-: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

@@ -1,49 +0,0 @@
-: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

@@ -1,41 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,14 +0,0 @@
-// 主题切换
-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');
-}