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

package/template/src/components/login/index.module.scss

@@ -0,0 +1,23 @@
+.login {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .loginInner {
+        width: 500px;
+        padding: 16px;
+        border-radius: 10px;
+        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+        
+        .title {
+            font-size: 18px;
+            font-weight: 600;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+    }
+}

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

@@ -0,0 +1,133 @@
+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 {userInfoStore} from '@/store/login'
+import {tokenStore} from '@/store/token'
+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',
+    'group11/detail',
+    'group11/screen-detail'
+]
+
+const Login: React.FC<LoginProps> = ({}) => {
+    // 获取 navigate 方法
+    const navigate = useNavigate()
+    const [searchParams] = useSearchParams()
+    const {
+        setPermissions
+    } = permissionStore()
+    const {setMenus} = menusStore()
+    const {setUserInfo} = userInfoStore()
+    const {setToken} = tokenStore()
+
+    // ********操作 ********　
+    const onFinish = async (values: any) => {
+        console.log('Success:', values)
+
+        if (values.username === 'admin' && values.password === '123456') {
+            setPermissions(defaultList)
+            setToken('111')
+            setUserInfo({
+                userName: 'admin',
+                userId: '001'
+            })
+            
+
+            // 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,5 @@
+export const LOGIN_TOKEN = 'login/token'
+export const USER_INFO = 'userInfo'
+export const MENUS = 'menus'
+export const PERMISSION = 'permission'
+export const ANTDTOKEN = 'antd/token'

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

@@ -0,0 +1,90 @@
+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 style={{ marginTop: 20 }}>
+                <Button onClick={() => navigate('/group1/group11/detail')}>详情</Button>
+                <Button onClick={() => navigate('/group1/group11/screen-detail')}>详情-全屏</Button>
+            </div>
+        </div>
+    )
+}
+
+export default Home

package/template/src/router/router.tsx

@@ -0,0 +1,190 @@
+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,
+                        showFullScreen: false,
+                        element: <Home />
+                    },
+                    {
+                        label: '分组12',
+                        path: 'group12',
+                        key: 'group12',
+                        icon: null,
+                        hideInMenu: false,
+                        showFullScreen: false,
+                        element: <>group12</>
+                    },
+                    {
+                        label: '分组13',
+                        path: 'group13',
+                        key: 'group13',
+                        icon: null,
+                        hideInMenu: false,
+                        showFullScreen: false,
+                        element: <>group13</>
+                    },
+                    {
+                        label: '分组11-详情',
+                        path: 'group11/detail',
+                        key: 'group11/detail',
+                        icon: null,
+                        hideInMenu: true,
+                        showFullScreen: false,
+                        element: <>分组11-详情</>
+                    },
+                    {
+                        label: '分组11-详情-全屏',
+                        path: 'group11/screen-detail',
+                        key: 'group11/screen-detail',
+                        icon: null,
+                        hideInMenu: true,
+                        showFullScreen: true,
+                        element: <>分组11-详情-全屏</>
+                    },
+                ]
+            },
+
+            {
+                label: '分组2',
+                path: 'group2',
+                key: 'group2',
+                icon: 'icon-2',
+                hideInMenu: false,
+                children: [
+                    {
+                        label: '分组21',
+                        path: 'group21',
+                        key: 'group21',
+                        index: true,
+                        icon: null,
+                        hideInMenu: false,
+                        showFullScreen: false,
+                        element: <>group21</>,
+                    },
+                    {
+                        label: '分组22',
+                        path: 'group22',
+                        key: 'group22',
+                        icon: null,
+                        hideInMenu: false,
+                        showFullScreen: false,
+                        element: <>group22</>,
+                    },
+                    {
+                        label: '分组23',
+                        path: 'group23',
+                        key: 'group23',
+                        icon: null,
+                        hideInMenu: false,
+                        showFullScreen: 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,
+                showFullScreen: true,
+                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,
+        showFullScreen: 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'