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

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

@@ -1,59 +0,0 @@
-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 { lightToken } from '@/antdTheme/lightTheme'
-import Content from './content'
-
-import styles from './index.module.scss'
-
-interface LayoutProps {
-    [key: string]: any
-}
-
-const Layout: React.FC<LayoutProps> = ({ }) => {
-    useEffect(() => {
-        getDarkTheme(0)
-        dayjs.locale('zh-cn')
-    }, [])
-
-
-    // ********** 操作 **********
-    // 主题切换
-    const getDarkTheme = (theme: number) => {
-        // 获取根元素
-        const root = document.documentElement;
-
-        if (theme != 1) {
-            // 修改 data-theme 属性的值为 "light"
-            root.setAttribute('data-theme', 'light');
-            return
-        }
-
-        // 修改 data-theme 属性的值为 "dark"
-        root.setAttribute('data-theme', 'dark');
-    }
-
-
-    // ********** 渲染 **********
-
-    return (
-        <div className={styles.layout}>
-            <ConfigProvider
-                // 主题
-                theme={lightToken}
-                locale={zhCN}
-
-                button={{
-                    // 设置为 false 时，移除按钮中 2 个汉字之间的空格
-                    autoInsertSpace: false,
-                }}
-            >
-                <Content />
-            </ConfigProvider>
-        </div>
-    )
-}
-
-export default Layout

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

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

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

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

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

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

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

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

@@ -1,112 +0,0 @@
-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 { 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 {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)
-    }
-
-
-    // ********* 渲染 *********
-    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

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

@@ -1,59 +0,0 @@
-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 { lightToken } from '@/antdTheme/lightTheme'
-import Content from './content'
-
-import styles from './index.module.scss'
-
-interface LayoutProps {
-    [key: string]: any
-}
-
-const Layout: React.FC<LayoutProps> = ({ }) => {
-    useEffect(() => {
-        getDarkTheme(0)
-        dayjs.locale('zh-cn')
-    }, [])
-
-
-    // ********** 操作 **********
-    // 主题切换
-    const getDarkTheme = (theme: number) => {
-        // 获取根元素
-        const root = document.documentElement;
-
-        if (theme != 1) {
-            // 修改 data-theme 属性的值为 "light"
-            root.setAttribute('data-theme', 'light');
-            return
-        }
-
-        // 修改 data-theme 属性的值为 "dark"
-        root.setAttribute('data-theme', 'dark');
-    }
-
-
-    // ********** 渲染 **********
-
-    return (
-        <div className={styles.layout}>
-            <ConfigProvider
-                // 主题
-                theme={lightToken}
-                locale={zhCN}
-
-                button={{
-                    // 设置为 false 时，移除按钮中 2 个汉字之间的空格
-                    autoInsertSpace: false,
-                }}
-            >
-                <Content />
-            </ConfigProvider>
-        </div>
-    )
-}
-
-export default Layout

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

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

@@ -1,104 +0,0 @@
-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>
-    )
-}