@yyp92-cli/template-react-mobile 1.1.0

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

@@ -0,0 +1,127 @@
+import React, {useState} from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { Button, Form, Input } from 'antd-mobile'
+import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
+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 = [
+    'home',
+    'todo',
+    'message',
+    'personalCenter',
+    'detail',
+]
+
+const Login: React.FC<LoginProps> = ({ }) => {
+    // 获取 navigate 方法
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+    const {
+        setPermissions
+    } = permissionStore()
+    const { setMenus } = menusStore()
+
+    const [visiblePassword, setVisiblePassword] = useState<boolean>(false)
+
+
+    // ********操作 ********　
+    const onFinish = (values: any) => {
+        const {username, password} = values
+
+        if (username === 'yang' && password === '123456') {
+            setPermissions(defaultList)
+
+            // todo模拟接口
+            setTimeout(() => {
+                const list = filterMenu((routerConfig as any)[0].children, defaultList)
+                setMenus(list)
+            }, 0)
+
+            setTimeout(() => {
+                const redirect = searchParams.get('redirect')
+                navigate(redirect || '/')
+            }, 500)
+        }
+    }
+
+
+    // ********　渲染 ********　
+    return (
+        <div className={styles.login}>
+            <div className={styles.loginInner}>
+                <Form
+                    layout='horizontal'
+                    onFinish={onFinish}
+                    footer={
+                        <Button
+                            block
+                            type='submit'
+                            color='primary'
+                            size='large'
+                        >
+                            提交
+                        </Button>
+                    }
+                >
+                    <Form.Header>登录</Form.Header>
+
+                    <Form.Item
+                        name='username'
+                        label='姓名'
+                        rules={[{ required: true, message: '姓名不能为空' }]}
+                    >
+                        <Input
+                            placeholder='请输入姓名'
+                            autoComplete="off"
+                            clearable
+                        />
+                    </Form.Item>
+
+                    <Form.Item
+                        name='password'
+                        label='密码'
+                        rules={[{ required: true, message: '密码不能为空' }]}
+                        extra={
+                            <>
+                                {
+                                    !visiblePassword
+                                        ? (
+                                            <EyeInvisibleOutline onClick={() => setVisiblePassword(true)} />
+                                        )
+                                        : (
+                                            <EyeOutline onClick={() => setVisiblePassword(false)} />
+                                        )
+                                }
+                            </>
+                        }
+                    >
+                        <Input
+                            type="password"
+                            placeholder='请输入姓名'
+                            autoComplete="off"
+                            clearable
+                        />
+                    </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 = 'permisiion'

package/template/src/pages/home/index.module.scss

@@ -0,0 +1,4 @@
+
+.home {
+    color: var(--text-color);
+}

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import {Button, Input, DatePicker} from 'antd-mobile'
+import {useNavigate, useLocation} from 'react-router-dom'
+import { userInfoStore } from '@/store/login'
+import styles from './index.module.scss'
+
+const Home = () => {
+    const navigate = useNavigate()
+     const {
+        userInfo,
+        setUserInfo
+    } = userInfoStore()
+
+    return (
+        <div className={styles.box}>
+            首页
+
+            <Button
+                color='primary'
+                onClick={() => navigate('/403')}
+            >403</Button>
+
+            <Button
+                color='primary'
+                onClick={() => navigate('/login')}
+            >login</Button>
+
+            <div style={{ marginTop: 20 }}>
+                <div>姓名：{userInfo.userName}</div>
+
+                <Button
+                    color="primary"
+                    onClick={() => {
+                        setUserInfo({
+                            userName: '小红',
+                            userId: '222'
+                        })
+                    }}
+                >设置姓名</Button>
+
+                <Button
+                    color="primary"
+                    disabled
+                >设置姓名</Button>
+            </div>
+
+            {/* <DatePicker
+                title='时间选择'
+                visible={true}
+            /> */}
+        </div>
+    )
+}
+
+export default Home

package/template/src/pages/message/index.module.scss

@@ -0,0 +1,4 @@
+
+.message {
+    color: var(--text-color);
+}

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import {Button, Input} from 'antd-mobile'
+import styles from './index.module.scss'
+
+const Message = () => {
+    return (
+        <div className={styles.message}>
+            消息
+        </div>
+    )
+}
+
+export default Message

package/template/src/pages/mine/index.module.scss

@@ -0,0 +1,3 @@
+.mine {
+    color: var(--text-color);
+}

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import {useNavigate} from 'react-router-dom'
+import {Button, Input} from 'antd-mobile'
+import { LOGIN_TOKEN, USER_INFO, MENUS, PERMISSION } from '@/global/constants'
+import { localCache } from '@/utils/cache'
+import styles from './index.module.scss'
+
+const Mine = () => {
+    const navigate = useNavigate()
+
+    const handleLogout = () => {
+        localCache.removeCache(LOGIN_TOKEN)
+        localCache.removeCache(USER_INFO)
+        localCache.removeCache(MENUS)
+        localCache.removeCache(PERMISSION)
+
+        navigate('/login')
+    }
+
+    return (
+        <div className={styles.mine}>
+            我的
+
+            <Button
+                color='primary'
+                fill='solid'
+                onClick={handleLogout}
+            >
+                退出登录
+            </Button>
+        </div>
+    )
+}
+
+export default Mine

package/template/src/pages/todo/index.module.scss

@@ -0,0 +1,4 @@
+
+.todo {
+    color: var(--text-color);
+}

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import {Button, Input} from 'antd-mobile'
+import styles from './index.module.scss'
+
+const Todo = () => {
+    return (
+        <div className={styles.todo}>
+            代办
+        </div>
+    )
+}
+
+export default Todo

package/template/src/router/router.tsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import {createBrowserRouter} from 'react-router-dom'
+import {
+  AppOutline,
+  MessageOutline,
+  MessageFill,
+  UnorderedListOutline,
+  UserOutline,
+} from 'antd-mobile-icons'
+import Home from '@/pages/home'
+import Todo from '@/pages/todo'
+import Message from '@/pages/message'
+import Mine from '@/pages/mine'
+import { Page403 } from '@/components/403'
+import { Page404 } from '@/components/404'
+import Login from '@/components/login'
+import { Layout } from '@/components'
+
+// * 解决把 menu 存储在 zustand 中，在 antd Menu组件中使用报错
+export const ComponentMap: any = {
+    "icon-1": AppOutline,
+    "icon-2": UnorderedListOutline,
+    "icon-3": MessageOutline,
+    "icon-4": UserOutline,
+}
+
+export interface RouterConfigItemProps {
+    label?: React.ReactNode,
+    key?: string,
+    path: string,
+    icon?: React.ReactNode,
+    element?: React.ReactNode | null,
+
+    // 是否在菜单里显示
+    hideInMenu?: boolean,
+
+    // 是否全屏显示
+    showFullScreen?: boolean,
+    children?: RouterConfigItemProps[]
+}
+
+export const routerConfig: RouterConfigItemProps[] = [
+    {
+        path: '/',
+        element: <Layout />,
+        children: [
+            {
+                label: '首页',
+                key: 'home',
+                path: 'home',
+                icon: 'icon-1',
+                hideInMenu: false,
+                element: <Home />,
+            },
+
+            {
+                label: '待办',
+                key: 'todo',
+                path: 'todo',
+                icon: 'icon-2',
+                hideInMenu: false,
+                element: <Todo />,
+            },
+
+            {
+                label: '消息',
+                key: 'message',
+                path: 'message',
+                icon: 'icon-3',
+                hideInMenu: false,
+                element: <Message />,
+            },
+
+            {
+                label: '我的',
+                key: 'personalCenter',
+                path: 'personalCenter',
+                icon: 'icon-4',
+                hideInMenu: false,
+                element: <Mine />,
+            },
+
+            // 需要全屏显示的页面
+            {
+                label: '详情',
+                key: 'detail',
+                path: 'detail',
+                icon: null,
+                hideInMenu: true,
+                showFullScreen: true,
+                element: <>group22</>,
+            },
+        ]
+    },
+
+    
+    // login
+    {
+        path: 'login',
+        label: 'login',
+        element: <Login />,
+        icon: null,
+        hideInMenu: true,
+        showFullScreen: true,
+    },
+
+    // 403
+    {
+        path: '403',
+        label: '403',
+        element: <Page403 />,
+        icon: null,
+        hideInMenu: true,
+        showFullScreen: true,
+    },
+
+    // 404
+    {
+        path: '*',
+        label: '404',
+        element: <Page404 />,
+        icon: null,
+        hideInMenu: true,
+    },
+]
+
+const router = createBrowserRouter(routerConfig)
+
+export default router

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,267 @@
+import axios from 'axios'
+import { Toast } from 'antd-mobile'
+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/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)
+
+    // 排除登录页，避免死循环
+    const currentPath = window.location.pathname
+    const isLoginPage = currentPath === '/login'
+    if (!isLoginPage) {
+        // todo 暂时写死
+        router.navigate(`/login?redirect=${currentPath || '/'}`, {
+            replace: true,
+        })
+    }
+
+    // 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
+}