@jiangood/open-admin 1.0.0-beta.5

package/src/layouts/admin/HeaderRight.jsx

@@ -0,0 +1,104 @@
+import {Badge, Dropdown} from "antd";
+import {NotificationOutlined, QuestionCircleOutlined, SettingOutlined, UserOutlined} from "@ant-design/icons";
+import React from "react";
+import {history} from "umi";
+import {DeviceUtils, HttpUtils, MessageUtils,  PageUtils, SysUtils} from "../../framework";
+
+
+const ID = 'header-right';
+export default class HeaderRight extends React.Component {
+
+    state = {
+        isMobileDevice: false
+    };
+
+    componentDidMount() {
+        document.dispatchEvent(new CustomEvent('componentDidMount', {detail: ID}))
+        if (DeviceUtils.isMobileDevice()) {
+            this.setState({isMobileDevice: true})
+        }
+    }
+
+
+
+    logout = () => {
+        HttpUtils.post('admin/auth/logout').then(async () => {
+            localStorage.clear()
+            await MessageUtils.alert('退出登录成功');
+            history.replace('/login')
+        }).catch(async e => {
+            let confirm = await MessageUtils.confirm('退出登录失败，是否清空缓存');
+            if (confirm) {
+                localStorage.clear();
+                history.replace('/login')
+            }
+        })
+    }
+
+    userCenter = () => {
+        PageUtils.open('/userCenter', '个人中心')
+    }
+
+    render() {
+        const info = SysUtils.getLoginInfo()
+
+        if (this.state.isMobileDevice) {
+            return <div className='header-right'>
+                <a onClick={this.logout}>退出</a>
+            </div>
+        }
+
+        return <div className='header-right'>
+
+            <div className='item'>
+                <UserOutlined/> {info.name}
+            </div>
+
+
+            <div className='item' onClick={() => PageUtils.open('/userCenter/message', '我的消息')}>
+                <Badge count={info.messageCount} size="small">
+                    <NotificationOutlined/>
+                </Badge>
+            </div>
+
+            <div className='item' title='操作手册' onClick={() => PageUtils.open('/userCenter/manual', '操作手册')}>
+                <QuestionCircleOutlined />
+            </div>
+
+
+            <div className='item'>
+
+                <Dropdown menu={{
+                    onClick: ({key}) => {
+                        switch (key) {
+                            case 'userCenter':
+                                this.userCenter()
+                                break;
+                            case 'logout':
+                                this.logout();
+                                break;
+                            case 'about':
+                                this.about()
+                                break
+                        }
+                    },
+                    items: [
+                        {key: 'userCenter', label: '个人中心'},
+                        {key: 'about', label: '关于系统'},
+                        {key: 'logout', label: '退出登录'},
+
+                    ]
+                }}><SettingOutlined/>
+
+                </Dropdown>
+
+            </div>
+
+        </div>
+    }
+
+
+    about = () => {
+        history.push("/about")
+    }
+}

package/src/layouts/admin/TabPageRender.jsx

@@ -0,0 +1,158 @@
+import React from "react";
+import {withRouter} from "umi";
+import {Tabs} from "antd";
+import {PageRender} from "../PageRender";
+import {PageUtils} from "../../framework";
+
+class TabPageRender extends React.Component {
+
+    state = {
+        active: null,
+        urlLabelMap: {},
+        tabs: [],
+    }
+
+    componentDidMount() {
+        const url = this.getUrl(this.props)
+        this.onUrlChange(url);
+
+        document.addEventListener('close-page-event', (e)=>{
+            const url = e.detail.url
+            this.onRemove(url)
+        })
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const url = this.getUrl(this.props)
+        const pUrl = this.getUrl(prevProps)
+
+        if (url !== pUrl) {
+            this.onUrlChange(url);
+        }
+    }
+
+    onUrlChange = url => {
+        const {location} = this.props
+
+        const {pathname, search} = location
+        let {tabs} = this.state
+
+        const old = tabs.find(t => t.key === url)
+        if (old == null) {
+            const cmp = <PageRender pathname={pathname} search={search}/>
+            let label = this.getLabel(pathname);
+            tabs.push({
+                key: url,
+                label: label,
+                children: cmp
+            });
+            this.setState({tabs: [...tabs]})
+        }else {
+            const menu = this.props.pathMenuMap[pathname]
+            if (menu && menu.refreshOnTabClick) {
+                this.refresh(pathname)
+            }
+        }
+
+        this.setState({active: url})
+    };
+
+    getLabel(path) {
+        if (path === '/') {
+            return '首页'
+        }
+        let label = PageUtils.currentLabel();
+
+        if (!label) {
+            const menu = this.props.pathMenuMap[path]
+            if (menu) {
+                return menu.name
+            }
+        }
+
+        return label;
+    }
+
+
+    render() {
+        let {tabs} = this.state
+        if (tabs.length === 0) {
+            return null
+        }
+
+        return <>
+            <Tabs
+                items={tabs}
+                activeKey={this.state.active}
+                onChange={this.onChange}
+                onEdit={this.onRemove}
+
+                hideAdd
+                size='small'
+                type='editable-card'
+                style={{background: 'white'}}
+                rootClassName='tmgg-layout-tabs'
+
+                onTabClick={this.onTabClick}
+
+            >
+            </Tabs>
+        </>
+    }
+
+    lastTabClickTime = 0
+    onTabClick = (key, event) => {
+        let now = new Date().getTime();
+        let doubleClick = now - this.lastTabClickTime < 300;
+        // 双击时刷新
+        if (doubleClick) {
+            this.refresh(key);
+        }
+
+        this.lastTabClickTime = now
+    };
+
+    refresh = key => {
+        const tabs = this.state.tabs;
+        const tab = tabs.find(t => t.key === key)
+        if(tab != null){
+            const old = tab.children
+            if(old != null){
+                console.log('准备刷新：', key)
+                tab.children = '刷新中...'
+                this.setState({tabs}, () => {
+                    console.log('刷新节点', tab)
+                    tab.children = old
+                    this.setState({tabs})
+                })
+            }
+        }
+    };
+
+    onChange = url => {
+        if (url !== this.state.active) {
+            this.props.history.push(url)
+        }
+    };
+
+    onRemove = url => {
+        let {tabs} = this.state
+        tabs = tabs.filter(t => t.key !== url)
+
+        this.setState({tabs})
+        if (tabs.length > 0) {
+            this.setState({active: tabs[tabs.length - 1].key})
+        }
+    };
+
+    getUrl = props => {
+        const {location} = props
+        const {pathname, search} = location
+        return pathname + search;
+    }
+
+}
+
+
+// 让组件有路由相关的参数，如 this.props.location
+export default withRouter(TabPageRender)

package/src/layouts/admin/index.jsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import {Badge, Layout, Menu, Watermark} from 'antd';
+
+import {history, Link} from 'umi';
+import "./index.less"
+import {Gap, HttpUtils, NamedIcon, PageUtils, SysUtils, ThemeUtils, TreeUtils} from "../../framework";
+
+import HeaderRight from "./HeaderRight";
+import TabPageRender from "./TabPageRender";
+
+const {Header, Sider, Content} = Layout;
+/**
+ * 带菜单的布局，主要处理布局宇框架结构
+ */
+export default class extends React.Component {
+
+    state = {
+        loginInfo: {},
+
+        menuTree: [],
+        menuMap: {},
+        pathMenuMap: {},
+
+
+        currentMenuKey: null,
+
+
+        siteInfo: {},
+    }
+
+
+    componentDidMount() {
+        console.log('Admin Layout didMount')
+        // 判断是否手机端，自动收起菜单
+
+
+        let siteInfo = SysUtils.getSiteInfo();
+        const loginInfo = SysUtils.getLoginInfo()
+        this.setState({siteInfo, loginInfo})
+
+        this.initMenu()
+    }
+
+
+    initMenu = () => {
+        HttpUtils.get('/admin/menuInfo').then(info => {
+            const {menuTree, pathMenuMap, menuMap} = info
+            this.setState({menuMap})
+
+            let pathname = PageUtils.currentPathname();
+
+            TreeUtils.walk(menuTree, (item) => {
+                item.icon = <NamedIcon name={item.icon || 'AppstoreOutlined'} style={{fontSize: 12}}/>
+            })
+
+            if (pathname !== "" && pathname !== "/") {
+                let menu = pathMenuMap[pathname]
+                if (menu) {
+                    this.setState({currentMenuKey: menu.key})
+                }
+            }
+
+            this.setState({menuTree, pathMenuMap})
+
+            this.loadBadge(menuMap)
+        })
+
+
+    }
+    actionRef = React.createRef()
+
+
+    loadBadge = menuMap => {
+        for (let id in menuMap) {
+            const item = menuMap[id]
+            const {messageCountUrl} = item;
+            if (!messageCountUrl) {
+                continue
+            }
+            HttpUtils.get(messageCountUrl).then(rs => {
+                const {menuTree} = this.state
+                const menu = TreeUtils.findByKey(id, menuTree, 'key')
+                if (menu) {
+                    menu.icon = <Badge dot count={rs} size={"small"}>{menu.icon}</Badge>
+                    this.setState({menuTree: [...menuTree]})
+                }
+
+            })
+        }
+    };
+
+
+    render() {
+        const {siteInfo, loginInfo} = this.state
+
+        return <Layout className='main-layout'>
+            <Header className='header'>
+                <div className='header-left'>
+                    {siteInfo.logoUrl &&
+                        <img className='logo-img' src={siteInfo.logoUrl} onClick={() => history.push('/')} alt='logo'/>}
+                    <h3 className='hide-on-mobile'>
+                        <Link to="/" style={{color: ThemeUtils.getColor("primary-color")}}>{siteInfo.title} </Link>
+                    </h3>
+
+                </div>
+                <HeaderRight/>
+            </Header>
+
+            <Layout style={{height: '100%'}}>
+                <Sider id='left-sider'
+                       collapsible
+                       breakpoint={'md'}
+                >
+                    <Gap/>
+
+
+                    <Menu items={this.state.menuTree}
+                          theme='dark'
+                          mode="inline"
+                          className='left-menu'
+                          onClick={({key}) => {
+                              const menu = this.state.menuMap[key]
+                              let {path} = menu;
+                              this.setState({currentMenuKey: key})
+                              history.push(path)
+                          }}
+                          selectedKeys={[this.state.currentMenuKey]}
+                          inlineIndent={16}
+                    >
+                    </Menu>
+
+                </Sider>
+
+                <Content id='admin-layout-content'>
+                    {this.getContent(loginInfo)}
+                </Content>
+
+            </Layout>
+        </Layout>
+    }
+
+
+    getContent = () => {
+        const {siteInfo, loginInfo} = this.state
+        if (this.state.menuTree.length === 0) { // 加载菜单中
+            return <></>
+        }
+        let tabPageRenderNode = <TabPageRender pathMenuMap={this.state.pathMenuMap}/>;
+        if (siteInfo.waterMark === true) {
+            return <Watermark content={[loginInfo.name, loginInfo.account]}>
+                {tabPageRenderNode}
+            </Watermark>
+        }
+
+        return tabPageRenderNode
+    };
+}
+
+

package/src/layouts/admin/index.less

@@ -0,0 +1,65 @@
+.main-layout {
+  min-height: 100vh;
+  .header {
+    padding: 0 20px;
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgb(233, 237, 240);
+    background-color: rgb(246, 248, 250);
+
+    .header-left {
+
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .logo-img {
+        height: 38px;
+        cursor: pointer;
+      }
+    }
+
+    .header-right {
+      line-height: 36px;
+      display: flex;
+      align-items: center;
+
+      .item {
+        padding: 0 0.5rem;
+        cursor: pointer;
+
+        &:hover {
+          background: #063A69;
+          color: white;
+        }
+      }
+    }
+
+  }
+
+
+  #left-sider {
+    .left-menu {
+      overflow: auto;
+      scrollbar-width: thin;
+      scrollbar-color: unset;
+
+      .ant-menu-submenu-selected {
+        div {
+          color: white !important;
+        }
+      }
+    }
+
+  }
+
+  #admin-layout-content {
+    .tmgg-layout-tabs {
+      &>.ant-tabs-nav {
+        margin-bottom: 8px;
+      }
+    }
+  }
+}

package/src/layouts/index.jsx

@@ -0,0 +1,187 @@
+import AdminLayout from "./admin"
+import React from "react";
+import {ConfigProvider} from "antd";
+
+import {Outlet, withRouter} from "umi";
+import zhCN from 'antd/locale/zh_CN';
+import {
+    ArrUtils,
+    HttpUtils,
+    MessageHolder,
+    PageLoading,
+    PageUtils, StringUtils,
+    SysUtils,
+    ThemeUtils,
+} from "../framework";
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+import '../style/global.less'
+import './index.less'
+import {Logger} from "../framework/utils/Logger";
+
+dayjs.locale('zh-cn');
+
+// 不需要登录的页面
+const SIMPLE_URLS = ['/login', '/test']
+
+function checkIsSimplePage(pathname) {
+    if(pathname === '/' || pathname === '/index'){
+        return false;
+    }
+    // 测试页面
+    if(pathname.startsWith("/test/")){
+        return true
+    }
+    let count = StringUtils.count(pathname,'/');
+    return ArrUtils.contains(SIMPLE_URLS, pathname) || count === 1;
+}
+
+function checkIsPurePage(pathname){
+    if(pathname.startsWith("/test/")){
+        return true
+    }
+    return false
+}
+
+class _Layouts extends React.Component {
+
+    log = Logger.getLogger('Layouts')
+
+    state = {
+        messageHolderInit:false,
+        siteInfoLoading: true,
+        loginInfoFinish: false
+    }
+
+    onMessageHolderFinish = () => {
+        this.loadSiteInfo()
+        this.setState({messageHolderInit:true});
+    }
+
+
+    loadSiteInfo = () => {
+        HttpUtils.get("/admin/public/site-info").then(rs => {
+            SysUtils.setSiteInfo(rs)
+            this.setState({siteInfoLoading: false})
+            this.loadLoginInfo()
+        })
+    };
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const pre = prevProps.location.pathname
+        const cur = this.props.location.pathname
+        if (pre !== cur) {
+            this.loadLoginInfo()
+        }
+    }
+
+
+
+    loadLoginInfo = () => {
+        let {pathname} = this.props.location;
+        if (checkIsPurePage(pathname) || checkIsSimplePage(pathname) || this.state.loginInfoFinish) {
+            return;
+        }
+
+        HttpUtils.get('/admin/public/checkLogin')
+            .then(rs => {
+                const {needUpdatePwd, dictMap, loginInfo} = rs
+                SysUtils.setDictInfo(dictMap)
+                SysUtils.setLoginInfo(loginInfo)
+                if (!needUpdatePwd) {
+                    this.setState({loginInfoFinish: true});
+                    return;
+                }
+
+                if (needUpdatePwd) {
+                    PageUtils.open('/userCenter/ChangePassword', '修改密码')
+                    return;
+                }
+            })
+            .catch(async () => {
+                PageUtils.redirectToLogin()
+            })
+    }
+
+    render() {
+        return <ConfigProvider
+            input={{autoComplete: 'off'}}
+            form={{
+                validateMessages: {
+                    required: '必填项'
+                }, colon: false
+            }}
+            button={{
+                autoInsertSpace: false
+            }}
+            locale={zhCN}
+            theme={{
+                token: {
+                    colorPrimary: ThemeUtils.getColor("primary-color"),
+                    colorSuccess: ThemeUtils.getColor("success-color"),
+                    colorWarning: ThemeUtils.getColor("warning-color"),
+                    colorError: ThemeUtils.getColor("error-color"),
+                    borderRadius: 4,
+                },
+                components: {
+                    Menu: {
+                        darkItemBg: ThemeUtils.getColor("primary-color"),
+                        darkPopupBg: ThemeUtils.getColor("primary-color"),
+                        darkItemSelectedBg: ThemeUtils.getColor("primary-color-click"),
+                        darkItemHoverBg: ThemeUtils.getColor("primary-color-hover"),
+                        darkSubMenuItemBg: ThemeUtils.getColor("primary-color")
+                    },
+                    Layout: {
+                        siderBg: ThemeUtils.getColor("primary-color"),
+                        triggerBg: ThemeUtils.getColor("primary-color-click"),
+                        headerBg: 'white',
+                        triggerHeight: 32
+                    }
+                }
+            }}>
+
+            <MessageHolder onFinish={this.onMessageHolderFinish} />
+            {this.renderContent()}
+        </ConfigProvider>
+    }
+
+
+    renderContent = () => {
+        let {pathname} = this.props.location;
+
+        if(checkIsPurePage(pathname)){
+            return <Outlet/>
+        }
+
+        if(!this.state.messageHolderInit) {
+            this.log.info('加载message holder...')
+            return <PageLoading message='加载消息组件...'/>
+        }
+
+        let {params = {}} = this.props.location;
+        console.log('layout: params', params)
+        if (checkIsSimplePage(pathname) || params.hasOwnProperty('_noLayout')) {
+            return <Outlet/>
+        }
+
+
+
+        if (this.state.siteInfoLoading) {
+            return <PageLoading message='加载站点信息...'/>
+        }
+        
+
+
+        if (!this.state.loginInfoFinish) {
+            return <PageLoading message='加载登录信息...'/>
+        }
+
+        return <AdminLayout path={this.state.path} logo={this.props.logo}/>
+    };
+}
+
+
+export const Layouts = withRouter(_Layouts);
+export default Layouts
+export * from './PageRender'

package/src/layouts/index.less

@@ -0,0 +1,24 @@
+html,body{
+  margin: 0;
+  padding: 0;
+}
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+.hide-on-mobile{        //电脑端css
+}
+
+@media (max-width: 767px) {        //移动端css
+
+  .hide-on-mobile{
+    display: none !important;
+  }
+
+}
+
+
+