@yyp92-cli/template-react-pc 1.1.0

package/template/src/components/login/index.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import {useNavigate, useSearchParams} from 'react-router-dom'
+import { Button, Checkbox, Form, Input } from 'antd'
+import { permissionStore } from '@/store/permission'
+import { menusStore } from '@/store/menus'
+import { filterMenu } from '@/utils'
+import { routerConfig } from '@/router/router'
+
+import styles from './index.module.scss'
+
+
+interface LoginProps {
+    [key: string]: any
+}
+
+type FieldType = {
+    username?: string;
+    password?: string;
+    remember?: string;
+}
+
+// todo 测试数据
+const defaultList = [
+    'group1',
+    'group11',
+    'group12',
+    'group13',
+    'group2',
+    'group21',
+    'group22',
+    'group23',
+    'group24',
+    'group3'
+]
+
+const Login: React.FC<LoginProps> = ({}) => {
+    // 获取 navigate 方法
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+    const {
+        setPermissions
+    } = permissionStore()
+    const {setMenus} = menusStore()
+
+    // ********操作 ********　
+    const onFinish = async (values: any) => {
+        console.log('Success:', values)
+
+        if (values.username === 'yang' && values.password === '123456') {
+            setPermissions(defaultList)
+
+            // todo模拟接口
+            setTimeout(() => {
+                const list = filterMenu(routerConfig[0].children, defaultList)
+                setMenus(list)
+            }, 0)
+
+            setTimeout(() => {
+                const redirect = searchParams.get('redirect')
+                navigate(redirect || '/')
+            }, 500)
+        }
+    }
+      
+    const onFinishFailed = (errorInfo: any) => {
+        console.log('Failed:', errorInfo)
+    }
+
+    // ********　渲染 ********　
+    return (
+        <div className={styles.login}>
+            <div className={styles.loginInner}>
+                <div  className={styles.title}>登录</div>
+
+                <Form
+                    // className={styles.loginInner}
+                    name="basic"
+                    labelCol={{ span: 6 }}
+                    wrapperCol={{ span: 18 }}
+                    style={{ maxWidth: 600 }}
+                    initialValues={{ remember: true }}
+                    onFinish={onFinish}
+                    onFinishFailed={onFinishFailed}
+                    autoComplete="off"
+                >
+                    <Form.Item<FieldType>
+                        label="Username"
+                        name="username"
+                        rules={[{ required: true, message: 'Please input your username!' }]}
+                    >
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item<FieldType>
+                        label="Password"
+                        name="password"
+                        rules={[{ required: true, message: 'Please input your password!' }]}
+                    >
+                        <Input.Password />
+                    </Form.Item>
+
+                    <Form.Item<FieldType>
+                        name="remember"
+                        valuePropName="checked"
+                        wrapperCol={{ offset: 8, span: 16 }}
+                    >
+                        <Checkbox>Remember me</Checkbox>
+                    </Form.Item>
+
+                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+                        <Button type="primary" htmlType="submit">
+                            Submit
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </div>
+        </div>
+    )
+}
+
+export default Login

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 = 'permission'

package/template/src/pages/home/index.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Button, Modal, DatePicker } from 'antd'
+import { userInfoStore } from '@/store/login'
+import {getDemo, postDemo} from '@/service'
+
+import styles from './index.module.scss'
+
+interface HomeProps {
+    [key: string]: any
+}
+
+const Home: React.FC<HomeProps> = () => {
+    const navigate = useNavigate()
+    const {
+        userInfo,
+        setUserInfo
+    } = userInfoStore()
+
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        postDemo()
+    }, [])
+
+    // ********* 操作 *********
+    const showModal = () => {
+        setOpen(true);
+    };
+
+    const hideModal = () => {
+        setOpen(false);
+    };
+
+
+
+    // ********* 渲染 *********
+    return (
+        <div>
+            <Button onClick={() => navigate('/403')}>403</Button>
+            <Button onClick={() => navigate('/login')}>login</Button>
+
+            <div style={{ marginTop: 20 }}>
+                <div>姓名：{userInfo.userName}</div>
+
+                <Button
+                    type="primary"
+                    onClick={() => {
+                        setUserInfo({
+                            userName: '小红',
+                            userId: '222'
+                        })
+                    }}
+                >设置姓名</Button>
+
+                <Button
+                    type="primary"
+                    disabled
+                >设置姓名</Button>
+            </div>
+
+            <DatePicker />
+
+            <div style={{ marginTop: 20 }}>
+                <Button type="primary" onClick={showModal}>
+                    Modal
+                </Button>
+                <Modal
+                    title="Modal"
+                    open={open}
+                    onOk={hideModal}
+                    onCancel={hideModal}
+                    okText="确认"
+                    cancelText="取消"
+                >
+                    <p>Bla bla ...</p>
+                    <p>Bla bla ...</p>
+                    <p>Bla bla ...</p>
+                </Modal>
+            </div>
+        </div>
+    )
+}
+
+export default Home

package/template/src/router/router.tsx

@@ -0,0 +1,164 @@
+import React from 'react'
+import {createBrowserRouter} from 'react-router-dom'
+import { AppstoreOutlined, MailOutlined, NodeCollapseOutlined, SettingOutlined } from '@ant-design/icons';
+// import Layout from '@/components/layout'
+import Layout from '@/components/layout-horizontal'
+import Home from '@/pages/home'
+import { Page403 } from '@/components/403'
+import { Page404 } from '@/components/404'
+import Login from '@/components/login'
+
+export interface RouterConfigItemProps {
+    path: string,
+    label?: React.ReactNode,
+    icon?: React.ReactNode,
+    element?: React.ReactNode | null,
+    // 是否在菜单里显示
+    hideInMenu?: boolean,
+    index?: boolean,
+
+    // 是否全屏显示
+    showFullScreen?: boolean,
+    children?: RouterConfigItemProps[],
+}
+
+// * 解决把 menu 存储在 zustand 中，在 antd Menu组件中使用报错
+export const ComponentMap: any = {
+    "icon-1": AppstoreOutlined,
+    "icon-2": SettingOutlined
+}
+
+
+export const routerConfig: any[] = [
+    {
+        path: '/',
+        element: <Layout />,
+        children: [
+            {
+                label: '分组1',
+                path: 'group1',
+                key: 'group1',
+                icon: 'icon-1',
+                hideInMenu: false,
+                children: [
+                    {
+                        label: '分组11',
+                        path: 'group11',
+                        key: 'group11',
+                        icon: null,
+                        hideInMenu: false,
+                        element: <Home />
+                    },
+                    {
+                        label: '分组12',
+                        path: 'group12',
+                        key: 'group12',
+                        icon: null,
+                        hideInMenu: false,
+                        element: <>group12</>
+                    },
+                    {
+                        label: '分组13',
+                        path: 'group13',
+                        key: 'group13',
+                        icon: null,
+                        hideInMenu: false,
+                        element: <>group13</>
+                    },
+                ]
+            },
+
+            {
+                label: '分组2',
+                path: 'group2',
+                key: 'group2',
+                icon: 'icon-2',
+                hideInMenu: false,
+                children: [
+                    {
+                        label: '分组21',
+                        path: 'group21',
+                        key: 'group21',
+                        index: true,
+                        icon: null,
+                        hideInMenu: false,
+                        element: <>group21</>,
+                    },
+                    {
+                        label: '分组22',
+                        path: 'group22',
+                        key: 'group22',
+                        icon: null,
+                        hideInMenu: false,
+                        element: <>group22</>,
+                    },
+                    {
+                        label: '分组23',
+                        path: 'group23',
+                        key: 'group23',
+                        icon: null,
+                        hideInMenu: false,
+                        element: <>group23</>,
+                    },
+                    {
+                        label: '分组24',
+                        path: 'group24',
+                        key: 'group24',
+                        icon: null,
+                        hideInMenu: true,
+                        showFullScreen: true,
+                        element: <>group24</>,
+                    },
+                ]
+            },
+
+            {
+                label: '分组3',
+                path: 'group3',
+                key: 'group3',
+                icon: 'icon-2',
+                hideInMenu: false,
+                element: <>group3</>
+            }
+        ]
+    },
+
+    
+
+
+    // login
+    {
+        path: '/login',
+        label: 'login',
+        element: <Login />,
+        icon: null,
+        hideInMenu: true,
+        showFullScreen: true,
+        children: [],
+    },
+
+    // 403
+    {
+        path: '/403',
+        label: '403',
+        element: <Page403 />,
+        icon: null,
+        hideInMenu: true,
+        showFullScreen: true,
+        children: [],
+    },
+
+    // 404
+    {
+        path: '*',
+        label: '404',
+        element: <Page404 />,
+        icon: null,
+        hideInMenu: true,
+        children: [],
+    },
+]
+
+const router = createBrowserRouter(routerConfig as any)
+
+export default router

package/template/src/service/api.ts

@@ -0,0 +1,9 @@
+// * 接口测试网站：https://httpbin.org/#/
+
+// 接口路径
+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,265 @@
+import axios from 'axios'
+import { notification, message } from 'antd'
+import type { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'
+import type { MyInternalAxiosRequestConfig } from './type'
+import { localCache } from '@/utils/cache'
+import { LOGIN_TOKEN, USER_INFO, PERMISSION, MENUS } from '@/global/constants'
+import router from '@/router/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(PERMISSION)
+    localCache.removeCache(MENUS)
+
+    // 排除登录页，避免死循环
+    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 = 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) {
+            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
+        }
+    })
+}