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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-// * 接口测试网站：https://httpbin.org/#/
-
-// 接口路径
-export const apiUrl: any = {
-    demoUrl: `/api/get`,
-    demoUrl1: `/api/post`
-}
-
-

package/template/src/service/config.ts

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

@@ -1 +0,0 @@
-export * from './service'