CloudSQLAdminPanel/public/scr/components/index.js

SPA_RESOLVE_INIT = function ($el, $router) {
    let body = document.querySelector('body');

    body.className = 'mdui-appbar-with-toolbar mdui-theme-primary-blue mdui-theme-accent-light-blue mdui-drawer-body-left mdui-loaded';
    mdui.JQ($el).empty();
    mdui.JQ($el).append(`
                    <header class="mdui-appbar mdui-appbar-fixed">
                        <div class="mdui-toolbar mdui-color-theme">
                            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}">
                                <i class="mdui-icon material-icons">menu</i>
                            </span>
                            <a href="#/index" class="mdui-typo-headline mdui-hidden-xs">CloudSQL Admin Panel</a>
                            <div class="mdui-toolbar-spacer"></div>
                            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
                                <i class="mdui-icon material-icons">exit_to_app</i>
                            </span>
                        </div>
                    </header>
            
                    <div class="mdui-drawer mdui-drawer-open" id="main-drawer">
                        <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
                            <li class="mdui-list-item mdui-ripple">
                                <i class="mdui-list-item-icon mdui-icon material-icons">view_list</i>
                                <div class="mdui-list-item-content">数据库列表</div>
                            </li>
                            <li class="mdui-list-item mdui-ripple">
                                <i class="mdui-list-item-icon mdui-icon material-icons">person</i>
                                <div class="mdui-list-item-content">用户列表</div>
                            </li>
                            <li class="mdui-list-item mdui-ripple">
                                <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
                                <div class="mdui-list-item-content">关于</div>
                            </li>
                        </div>
                    </div>
                
                    <div class="mdui-container main-container"></div>
                `);

    //左侧菜单栏
    let leftMenuButton = document.querySelector('span:nth-child(1).mdui-btn.mdui-btn-icon.mdui-ripple.mdui-ripple-white'),
        mainDrawer = new mdui.Drawer('#main-drawer');


    Utils.handleEvent('click', {
        onElement: leftMenuButton,
        withCallback: function () {
            mainDrawer.toggle();
        }
    })

    let databaseListButton = document.querySelector('#main-drawer li:nth-child(1)');

    Utils.handleEvent('click', {
        onElement: databaseListButton,
        withCallback: function () {
            window.location.hash = '/index/databaseList';
        }
    })

    let userListButton = document.querySelector('#main-drawer li:nth-child(2)');

    Utils.handleEvent('click', {
        onElement: userListButton,
        withCallback: function () {
            window.location.hash = '/index/userList';
        }
    })

    //退出登录按钮
    let signoutButton = document.querySelector('span:nth-child(4).mdui-btn.mdui-btn-icon.mdui-ripple.mdui-ripple-white i.mdui-icon.material-icons');
    Utils.handleEvent('click', {
        onElement: signoutButton,
        withCallback: function () {
            Utils.ajaxGet('http://admin.cloudsql.1473.cn/v1/signout', function (response) {
                if (response.status == 'successed') {
                    mdui.snackbar({
                        message: response.info
                    });
                    window.location.hash = response.url;
                } else {
                    console.log(response.info);
                    console.log(response.error);
                    mdui.snackbar({
                        message: response.info
                    });
                }
            });
        }
    })

    const inlineEl = document.querySelector('.mdui-container.main-container');
    const inlineRoute = [{
            path: '/index/main',
            fileName: 'src/components/main.js'
        },
        {
            path: '/index/databaseList',
            fileName: 'src/components/databaseList.js'
        },
        {
            path: '/index/userList',
            fileName: 'src/components/userList.js'
        },
    ]
    const inlineRouter = new SPARouter(inlineEl, inlineRouter, 'hash');
    inlineRouter.beforeEach((to, next) => {
        Utils.ajaxGet('http://admin.cloudsql.1473.cn/v1/index/signStatus', function (response) {
            if (response.status === 'signedin') {
                next();
            } else {
                window.location.hash = '/signin';
            }
        });
    });
}