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

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

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+import { ConfigProvider } from 'antd'
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import zhCN from 'antd/locale/zh_CN'
+import { antdTokenStore } from '@/store/antdToken'
+import { getDarkTheme } from '@/utils'
+import Content from './content'
+
+import styles from './index.module.scss'
+
+interface LayoutProps {
+    [key: string]: any
+}
+
+const Layout: React.FC<LayoutProps> = ({ }) => {
+    const {antdToken} =  antdTokenStore()
+
+    useEffect(() => {
+        getDarkTheme(false)
+        dayjs.locale('zh-cn')
+    }, [])
+
+
+    // ********** 操作 **********
+
+
+    // ********** 渲染 **********
+    return (
+        <div className={styles.layout}>
+            <ConfigProvider
+                // 主题
+                theme={antdToken}
+                locale={zhCN}
+
+                button={{
+                    // 设置为 false 时，移除按钮中 2 个汉字之间的空格
+                    autoInsertSpace: false,
+                }}
+            >
+                <Content />
+            </ConfigProvider>
+        </div>
+    )
+}
+
+export default Layout

package/template/src/components/layout/side/index.module.scss

@@ -0,0 +1,31 @@
+.side {
+    flex-shrink: 0;
+    width: 200px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .logo {
+        height: 50px;
+        box-sizing: border-box;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-bottom: 1px solid var(--border-color-base);
+        border-right: 1px solid var(--border-color-base);
+
+        img {
+            width: 32px;
+            height: 32px;
+            margin-right: 12px;
+        }
+    }
+    
+
+    .menu {
+        flex: 1;
+        overflow-y: auto;
+        border-right: 1px solid var(--border-color-base) !important;
+    }
+}

package/template/src/components/layout/side/index.tsx

@@ -0,0 +1,109 @@
+import React, {useEffect, useLayoutEffect} from 'react'
+import {Menu} from 'antd'
+import type { MenuProps } from 'antd';
+import {useNavigate, useLocation} from 'react-router-dom'
+import {ComponentMap} from '@/router/router'
+import { menusStore } from '@/store/menus'
+import { tokenStore } from '@/store/token'
+
+import styles from './index.module.scss'
+
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+interface SideProps {
+    [key: string]: any
+}
+
+export const Side: React.FC<SideProps> = () => {
+    const location = useLocation()
+    const navigate = useNavigate()
+    const {menus} = menusStore()
+    const {token} = tokenStore()
+
+    // 激活的父菜单
+    const [openKeys, setOpenKeys] = React.useState<string[]>([])
+    // 激活的菜单项
+    const [selectedKeys, setSelectedKeys] = React.useState<string[]>([])
+    // 菜单
+    const [newMenuList, setNewMenuList] = React.useState<MenuItem[]>([])
+
+    useLayoutEffect(() => {
+        const newMenuList = menus.map((item: any) => {
+            const Icon = ComponentMap[item.icon]
+
+            return {
+                ...item,
+                icon: <Icon />
+            }
+        })
+        setNewMenuList(newMenuList)
+    }, [menus])
+
+    useEffect(() => {
+        const {pathname} = location ?? {}
+        const newPathname = pathname.slice(1)
+
+        
+        const pathnameList = newPathname.split('/')
+
+        if (pathnameList.length === 1) {
+            setOpenKeys([])
+            setSelectedKeys([pathnameList[0]])
+        }
+        else if (pathnameList.length === 2 || pathnameList.length === 3) {
+            setOpenKeys([pathnameList[0]])
+            setSelectedKeys([pathnameList[1]])
+        }
+    }, [])
+
+
+    // ********* 操作 ********
+    const onMenuItemOpenChange: MenuProps['onOpenChange'] = (openKeys: string[]) => {
+        const currentKey = openKeys.slice(-1)
+        setOpenKeys(currentKey)
+    }
+    
+    const onMenuItemClick: MenuProps['onClick'] = (e: any) => {
+        const {keyPath} = e ?? {}
+
+        if (keyPath.length === 1) {
+            setSelectedKeys(keyPath[0])
+            navigate(`/${keyPath[0]}`)
+        }
+        else if (keyPath.length === 2) {
+            setSelectedKeys(keyPath[0])
+            navigate(`/${keyPath[1]}/${keyPath[0]}`)
+        }
+    }
+
+
+    // ********* 渲染 ********
+    return (
+        <div className={styles.side}>
+            <div  className={styles.logo}>
+                <img
+                    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+                    alt="logo"
+                />
+
+                <span>后台管理系统</span>
+            </div>
+
+            <Menu
+                className={styles.menu}
+                style={{
+                    width: 200,
+                    height: '100%'
+                }}
+                mode={'inline'}
+                items={newMenuList}
+                openKeys={openKeys}
+                selectedKeys={selectedKeys}
+                onOpenChange={onMenuItemOpenChange}
+                onClick={onMenuItemClick}
+            />
+        </div>
+    )
+}

package/template/src/components/layout-horizontal/content/index.module.scss

@@ -0,0 +1,22 @@
+.layoutContent {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+.wraper {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.contentInner {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 16px 20px;
+}

package/template/src/components/layout-horizontal/content/index.tsx

@@ -0,0 +1,105 @@
+import React, {useState, useEffect} from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+
+import { Header } from '../header'
+import { Footer } from '../footer'
+import { routerConfig } from '@/router/router'
+import type { RouterConfigItemProps } from '@/router/router'
+import { permissionStore } from '@/store/permission'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
+
+import styles from './index.module.scss'
+
+interface ContentProps {
+    [key: string]: any
+}
+
+
+const Content: React.FC<ContentProps> = ({ }) => {
+    const location = useLocation()
+    const navigate = useNavigate()
+    const {token} = tokenStore()
+    const {menus} = menusStore()
+    const {
+        permissions
+    } = permissionStore()
+
+    const [currentRouter, setCurrentRouter] = useState<RouterConfigItemProps>()
+
+    useEffect(() => {
+        const { pathname } = location ?? {}
+        const newPathname = pathname.slice(1)
+
+       if (!token) {
+            navigate('/login')
+        }
+        else if (newPathname !== '') {
+            const pathnameList = newPathname.split('/')
+            const getCcondition = () => {
+                if (pathnameList.length === 1) {
+                    return permissions.includes(pathnameList[0])
+                }
+
+                if (pathnameList.length === 2) {
+                    return permissions.includes(pathnameList[1])
+                }
+
+                if (pathnameList.length === 3) {
+                    return permissions.includes(`${pathnameList[1]}/${pathnameList[2]}`)
+                }
+
+                return false
+            }
+
+            if (getCcondition()) {
+                let newCurrentRouter: any = {}
+
+                if (pathnameList.length === 1) {
+                    newCurrentRouter = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
+                }
+                else if (pathnameList.length === 2) {
+                    const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
+                    newCurrentRouter = parent?.children?.find((item: any) => item.key === pathnameList[1])
+                }
+                else if (pathnameList.length === 3) {
+                    const parent = routerConfig[0]?.children?.find((group: any) => group.key === pathnameList[0]) ?? {}
+                    newCurrentRouter = parent?.children?.find((item: any) => item.key === `${pathnameList[1]}/${pathnameList[2]}`)
+                }
+
+                setCurrentRouter(newCurrentRouter)
+            }
+            else {
+                navigate('/403')
+            }
+        }
+        else {
+            navigate(`/${menus[0]?.key}/${menus[0]?.children?.[0]?.key}`)
+        }
+    }, [location])
+
+    // ********** 渲染 **********
+    const renderContent = () => {
+        if (!currentRouter) {
+            return null
+        }
+
+        return (
+        <div className={styles.layoutContent}>
+            <div className={styles.wraper}>
+                {!currentRouter?.showFullScreen && <Header />}
+
+                <div className={styles.contentInner}>
+                    <Outlet />
+                </div>
+
+                {!currentRouter?.showFullScreen && <Footer />}
+            </div>
+        </div>
+    )
+    }
+
+    return renderContent()
+}
+
+export default Content

package/template/src/components/layout-horizontal/footer/index.module.scss

@@ -0,0 +1,12 @@
+.footer {
+    flex-shrink: 0;
+    width: 100%;
+    height: 50px;
+    box-sizing: border-box;
+    border-top: 1px solid var(--border-color-base);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    background: var(--bg-grey-color);
+}

package/template/src/components/layout-horizontal/footer/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import styles from './index.module.scss'
+
+interface FooterProps {
+    [key: string]: any
+}
+
+export const Footer: React.FC<FooterProps> = ({}) => {
+    return (
+        <div className={styles.footer}>
+            <div>财务系统注意事项</div>
+        </div>
+    )
+}

package/template/src/components/layout-horizontal/header/index.module.scss

@@ -0,0 +1,23 @@
+.header {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    width: 100%;
+    height: 50px;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color-base);
+
+    .avatar {
+        flex-shrink: 0;
+        margin-left: 20px;
+        display: flex;
+        align-items: center;
+
+        & > div {
+            margin-left: 10px;
+            font-size: 12px; 
+        }
+    }
+}

package/template/src/components/layout-horizontal/header/index.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react'
+import {useNavigate} from 'react-router-dom'
+import { Avatar, Button, Dropdown, Switch, Tooltip } from 'antd'
+import type { MenuProps } from 'antd'
+import { FullscreenExitOutlined, FullscreenOutlined, UserOutlined } from '@ant-design/icons'
+import { getDarkTheme } from '@/utils'
+import { userInfoStore } from '@/store/login'
+import { antdTokenStore } from '@/store/antdToken'
+import { tokenStore } from '@/store/token'
+import { menusStore } from '@/store/menus'
+import { permissionStore } from '@/store/permission'
+import {Side} from '../side'
+
+import styles from './index.module.scss'
+
+interface HeaderProps {
+    [key: string]: any
+}
+
+export const Header: React.FC<HeaderProps> = ({}) => {
+    const navigate = useNavigate()
+    const {clearUserInfo} = userInfoStore()
+    const {setAntdToken} = antdTokenStore()
+    const {clearToken} = tokenStore()
+    const {clearMenus} = menusStore()
+    const {clearPermissions} = permissionStore()
+    const [isFullScreen, setIsFullScreen] = useState<boolean>(false)
+
+
+    // ********* 操作 *********
+    const handleLogout = () => {
+        clearToken()
+        clearUserInfo()
+        clearMenus()
+        clearPermissions()
+
+        navigate('/login')
+    }
+
+    const handleFullScreen = () => {
+        // dom对象的一个属性：可以用来判断当前是不是全屏模式
+        // 全屏：true， 不是全屏：false
+        const full = document.fullscreenElement
+
+        if (!full) {
+            setIsFullScreen(true)
+            document.documentElement.requestFullscreen()
+        }
+        else {
+            setIsFullScreen(false)
+            document.exitFullscreen()
+        }
+    }
+
+    const handleChangeTheme = (checked: boolean) => {
+        getDarkTheme(checked)
+        setAntdToken(checked)
+    }
+
+
+    // ********* 渲染 *********
+    const items: MenuProps['items'] = [
+        {
+            label: (
+                <div
+                    onClick={handleLogout}
+                >退出登录</div>
+            ),
+            key: '0',
+        },
+    ]
+
+    return (
+        <div className={styles.header}>
+            <Side />
+
+            <div className={styles.avatar}>
+                <Tooltip title="切换主题">
+                    <Switch
+                        checkedChildren="暗黑"
+                        unCheckedChildren="明亮"
+                        defaultChecked={false}
+                        onChange={handleChangeTheme}
+                    />
+                </Tooltip>
+
+                <Tooltip title="全屏">
+                    <Button
+                        style={{
+                            margin: '0 10px'
+                        }}
+                        shape="circle"
+                        icon={
+                            !isFullScreen
+                                ? <FullscreenOutlined />
+                                : <FullscreenExitOutlined />
+                        }
+                        onClick={handleFullScreen}
+                    />
+                </Tooltip>
+
+                <Avatar
+                    style={{ backgroundColor: '#87d068' }}
+                    icon={<UserOutlined />} 
+                />
+
+                <Dropdown
+                    menu={{ items }}
+                >
+                    <div>{'xxx 已登录'}</div>
+                </Dropdown>
+            </div>
+        </div>
+    )
+}

package/template/src/components/layout-horizontal/index.module.scss

@@ -0,0 +1,8 @@
+.layout {
+    width: 100%;
+    height: 100%;
+    min-width: 1000px;
+    display: flex;
+    background: var(--bg-white-color);
+    color: var(--text-color);
+}

package/template/src/components/layout-horizontal/index.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react'
+import { ConfigProvider } from 'antd'
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import zhCN from 'antd/locale/zh_CN';
+import { getDarkTheme } from '@/utils'
+import { antdTokenStore } from '@/store/antdToken'
+import Content from './content'
+
+import styles from './index.module.scss'
+
+interface LayoutProps {
+    [key: string]: any
+}
+
+const Layout: React.FC<LayoutProps> = ({ }) => {
+    const {antdToken} =  antdTokenStore()
+
+    useEffect(() => {
+        getDarkTheme(false)
+        dayjs.locale('zh-cn')
+    }, [])
+
+
+    // ********** 操作 **********
+
+
+    // ********** 渲染 **********
+
+    return (
+        <div className={styles.layout}>
+            <ConfigProvider
+                // 主题
+                theme={antdToken}
+                locale={zhCN}
+
+                button={{
+                    // 设置为 false 时，移除按钮中 2 个汉字之间的空格
+                    autoInsertSpace: false,
+                }}
+            >
+                <Content />
+            </ConfigProvider>
+        </div>
+    )
+}
+
+export default Layout

package/template/src/components/layout-horizontal/side/index.module.scss

@@ -0,0 +1,32 @@
+.side {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+
+    .logo {
+        width: 169px;
+        height: 50px;
+        box-sizing: border-box;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 1px solid var(--border-color-base);
+        border-bottom: none;
+
+        img {
+            width: 32px;
+            height: 32px;
+            margin-right: 12px;
+        }
+    }
+    
+
+    .menu {
+        flex: 1;
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+}

package/template/src/components/layout-horizontal/side/index.tsx

@@ -0,0 +1,104 @@
+import React, {useEffect, useLayoutEffect} from 'react'
+import {Menu} from 'antd'
+import type { MenuProps } from 'antd';
+import {useNavigate, useLocation} from 'react-router-dom'
+import {ComponentMap} from '@/router/router'
+import { menusStore } from '@/store/menus'
+
+import styles from './index.module.scss'
+
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+interface SideProps {
+    [key: string]: any
+}
+
+export const Side: React.FC<SideProps> = ({}) => {
+    const navigate = useNavigate();
+    const location = useLocation()
+    const {menus} = menusStore()
+
+    // 激活的父菜单
+    const [openKeys, setOpenKeys] = React.useState<string[]>([])
+    // 激活的菜单项
+    const [selectedKeys, setSelectedKeys] = React.useState<string[]>([])
+    // 菜单
+    const [menuList, setMenuList] = React.useState<MenuItem[]>([])
+
+    useLayoutEffect(() => {
+        const newMenuList = menus.map((item: any) => {
+            const Icon = ComponentMap[item.icon]
+
+            return {
+                ...item,
+                icon: <Icon />
+            }
+        })
+        setMenuList(newMenuList)
+    }, [menus])
+
+    useEffect(() => {
+        const {pathname} = location ?? {}
+        const newPathname = pathname.slice(1)
+        const pathnameList = newPathname.split('/')
+
+        if (pathnameList.length === 1) {
+            setOpenKeys([])
+            setSelectedKeys([pathnameList[0]])
+        }
+        else if (pathnameList.length === 2 || pathnameList.length === 3) {
+            // setOpenKeys([pathnameList[0]])
+            setSelectedKeys([pathnameList[1]])
+        }
+    }, [])
+
+
+    // ********* 操作 ********
+    const onMenuItemOpenChange: MenuProps['onOpenChange'] = (openKeys: string[]) => {
+        const currentKey = openKeys.slice(-1)
+        setOpenKeys(currentKey)
+    }
+
+    const onMenuItemClick: MenuProps['onClick'] = (e: any) => {
+        const {keyPath} = e ?? {}
+
+        if (keyPath.length === 1) {
+            setSelectedKeys(keyPath[0])
+            navigate(`/${keyPath[0]}`)
+        }
+        else if (keyPath.length === 2) {
+            setSelectedKeys(keyPath[0])
+            navigate(`/${keyPath[1]}/${keyPath[0]}`)
+        }
+    }
+
+
+    // ********* 渲染 ********
+    return (
+        <div className={styles.side}>
+            <div  className={styles.logo}>
+                <img
+                    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+                    alt="logo"
+                />
+
+                <span>后台管理系统</span>
+            </div>
+
+            <Menu
+                className={styles.menu}
+                style={{
+                   borderBottom: 'none'
+                }}
+                mode={'horizontal'}
+                items={menuList}
+                openKeys={openKeys}
+                selectedKeys={selectedKeys}
+                onOpenChange={onMenuItemOpenChange}
+                onClick={onMenuItemClick}
+            />
+        </div>
+    )
+}