添加UI

static/admin/simpleui-x/js/cookie.js

@@ -0,0 +1,17 @@
+var username = document.cookie.split(";")[0].split("=")[1];
+//JS操作cookies方法!
+//写cookies
+function setCookie(name, value) {
+    var Days = 365;
+    var exp = new Date();
+    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
+    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
+}
+
+function getCookie(name) {
+    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+    if (arr = document.cookie.match(reg))
+        return unescape(arr[2]);
+    else
+        return null;
+}

static/admin/simpleui-x/js/index.js

@@ -0,0 +1,624 @@
+(function () {
+    if (window.frameElement) {
+        window.frameElement.contentWindow.parent.callback()
+    }
+
+    window.addEventListener('hashchange', function (e) {
+        if (e.newURL != e.oldURL) {
+            openByHash()
+        }
+    });
+
+    function openByHash() {
+        var hash = location.hash;
+        hash = hash.substring(1)
+
+        for (var i = 0; i < app.menuData.length; i++) {
+            var item = app.menuData[i]
+            if ((item.url || '/') == hash) {
+
+                app.openTab(item, item.eid, true, false);
+                break;
+            }
+        }
+    }
+
+    function changeUrl(data) {
+        if (data.url && data.url.indexOf('http') != 0) {
+            location.hash = '#' + (data.url || '/')
+        }
+    }
+
+    window.callback = function () {
+        window.location.reload()
+    }
+
+    var fontConfig = new Vue({
+        // el: '#dynamicCss',
+        data: {
+            fontSize: null
+        },
+        created: function () {
+            var val = getCookie('fontSize');
+            if (val) {
+                this.fontSize = parseInt(val);
+            } else {
+                this.fontSize = 0;
+            }
+        },
+        watch: {
+            fontSize: function (newValue) {
+                if (newValue != 0) {
+                    var fontStyle = document.getElementById('fontStyle');
+                    if (!fontStyle) {
+                        fontStyle = document.createElement('style');
+                        fontStyle.id = 'fontStyle';
+                        fontStyle.type = 'text/css';
+                        document.head.append(fontStyle);
+                    }
+                    fontStyle.innerHTML = '*{font-size:' + newValue + 'px!important;}'
+
+                } else {
+                    var fontStyle = document.getElementById('fontStyle');
+                    if (fontStyle) {
+                        fontStyle.remove();
+                    }
+                }
+            }
+        },
+        methods: {}
+    });
+
+    // Waves.init();
+
+    //为元素注册水波纹效果
+    Vue.directive('waves', {
+        // 当被绑定的元素插入到 DOM 中时……
+        inserted: function (el) {
+            // 聚焦元素
+            Waves.attach(el);
+            Waves.init();
+        }
+    });
+
+
+    window.getLanuage = function (key) {
+        if (!window.Lanuages) {
+            return "";
+        }
+        var val = Lanuages[key];
+        if (!val || val == "") {
+            val = key;
+        }
+        return val
+    }
+
+    new Vue({
+        el: '#main',
+        data: {
+            drawer: false,
+            mobile: false,
+            upgrade: {
+                isUpdate: false,
+                body: '',
+                version: '',
+                dialogVisible: false
+            },
+            isResize: false,
+            searchInput: '',
+            height: 1000,
+            fold: false,
+            zoom: false,
+            timeline: true,
+            tabs: [home],
+            tabModel: 0,
+            tabIndex: 0,
+            menus: [],
+            menuActive: '0',
+            breadcrumbs: [],
+            language: window.language,
+            pwdDialog: {},
+            themeDialogVisible: false,
+            small: false,
+            themes: SimpleuiThemes,
+            theme: "",
+            themeName: "",
+            popup: {
+                left: 0,
+                top: 0,
+                show: false,
+                tab: null,
+                menus: [{
+                    text: getLanuage('Refresh'),
+                    icon: 'el-icon-refresh',
+                    handler: function (tab, item) {
+                        try {
+                            document.getElementById(tab.id).contentWindow.location.reload(true);
+                        } catch (e) {
+                            console.log(e)
+                            var url = tab.url.split('?')[0];
+                            tab.url = url + '?_=' + new Date().getTime()
+                        }
+                    }
+                }, {
+                    text: getLanuage('Close current'),
+                    icon: 'el-icon-circle-close',
+                    handler: function (tab, item) {
+                        app.handleTabsEdit(tab.id, 'remove');
+                    }
+                }, {
+                    text: getLanuage('Close other'),
+                    icon: 'far fa-copy',
+                    handler: function (tab) {
+                        app.tabs.forEach(item => {
+                            if (item.id != tab.id) {
+                                app.handleTabsEdit(item.id, 'remove');
+                            }
+                        })
+                    }
+                }, {
+                    text: getLanuage('Close all'),
+                    icon: 'el-icon-close',
+                    handler: function (tab, item) {
+
+                        app.$confirm(Lanuages["Are you sure you want them all closed"], Lanuages.Tips, {
+                            confirmButtonText: Lanuages.ConfirmYes,
+                            cancelButtonText: Lanuages.ConfirmNo,
+                            type: 'warning'
+                        }).then(function () {
+                            app.tabs.forEach((tab, index) => {
+                                if (index != 0) {
+                                    app.handleTabsEdit(tab.id, 'remove');
+                                }
+                            });
+                            app.menuActive = '1';
+                        }).catch(function () {
+
+                        });
+
+                    }
+                }, {
+                    text: getLanuage('Open in a new page'),
+                    icon: 'el-icon-news',
+                    handler: function (tab, item) {
+                        window.open(tab.newUrl);
+                    }
+                }]
+            },
+            //菜单里面的模块
+            models: [],
+            fontDialogVisible: false,
+            fontSlider: 12,
+            loading: false,
+            menuTextShow: true,
+            menuData: []
+        },
+        watch: {
+            theme: function (newValue, oldValue) {
+                this.$nextTick(function () {
+                    if (window.renderCallback) {
+                        window.renderCallback(this);
+                    }
+                });
+            },
+            fold: function (newValue, oldValue) {
+                // console.log(newValue)
+            },
+            menus: function (newValue, oldValue) {
+                var self = this;
+
+                newValue.forEach(item => {
+                    if (item.id == '0') {
+                        return;
+                    }
+
+                    let models = [];
+
+                    function deep(menus) {
+                        menus.forEach(item => {
+                            //这是首页，不显示
+                            if (item.eid === "1") {
+                                return;
+                            }
+
+                            if (item.models) {
+                                deep(item.models);
+                            } else {
+                                //没有子级的时候，才加入到首页菜单中去
+                                models.push(item);
+                            }
+
+                        })
+
+                    }
+
+                    deep(newValue);
+
+                    self.models = models;
+
+                });
+            }
+            /*,
+            tabs: function (newValue, oldValue) {
+
+                //改变tab时把状态储存到sessionStorage
+                console.log(newValue)
+            }*/
+        },
+        created: function () {
+
+            // this.watch.theme('');
+
+            var val = getCookie('fold') == 'true';
+            this.small = this.fold = val;
+            this.menuTextShow = !this.fold;
+
+            var self = this;
+            window.onresize = function () {
+
+                self.height = document.documentElement.clientHeight || document.body.clientHeight
+                var width = document.documentElement.clientWidth || document.body.clientWidth;
+
+                if (!self.small) {
+
+                    self.menuTextShow = !(width < 800);
+                    self.$nextTick(() => {
+                        self.fold = width < 800;
+                    })
+                }
+                self.isResize = true;
+                self.mobile = width < 800;
+
+                //判断全屏状态
+                try {
+                    self.zoom = document.webkitIsFullScreen;
+                } catch (e) {
+                    //不是非webkit内核下，无能为力
+                }
+            }
+            window.app = this;
+
+
+            menus = this.handlerMenus(menus);
+
+            this.menus = window.menus
+
+            this.theme = getCookie('theme');
+            this.themeName = getCookie('theme_name');
+
+
+            //接收子页面的事件注册
+            window.themeEvents = [];
+            window.fontEvents = [];
+            window.addEvent = function (name, handler) {
+                if (name == 'theme') {
+                    themeEvents.push(handler);
+                } else if (name == 'font') {
+                    fontEvents.push(handler);
+                }
+            }
+            var temp_tabs = sessionStorage['tabs'];
+
+            if (temp_tabs && temp_tabs != '') {
+                this.tabs = JSON.parse(temp_tabs);
+            }
+            if (location.hash != '') {
+                openByHash();
+            }
+
+            //elementui布局问题，导致页面不能正常撑开，调用resize使其重新计算
+            if (window.onresize) {
+                window.onresize();
+            }
+            this.$nextTick(function () {
+                if (window.renderCallback) {
+                    window.renderCallback(this);
+                }
+            });
+        },
+        methods: {
+            handlerMenus(menus) {
+                let self = this;
+                menus.forEach(item => {
+                    item.icon = getIcon(item.name, item.icon);
+
+                    if (item.models) {
+                        item.models.forEach(mItem => {
+                            mItem.icon = getIcon(mItem.name, mItem.icon);
+                            self.menuData.push(mItem)
+                            if (mItem.models) {
+                                self.handlerMenus(mItem.models);
+                            }
+                        });
+                    } else {
+                        self.menuData.push(item)
+                    }
+                });
+                return menus;
+            },
+            syncTabs: function () {
+                if (window.sessionStorage) {
+                    sessionStorage['tabs'] = JSON.stringify(this.tabs);
+                }
+            },
+            reset: function () {
+                this.fontSlider = 14;
+                fontConfig.fontSize = 0;
+
+                setCookie('fontSize', 0);
+
+                this.fontDialogVisible = false;
+                fontEvents.forEach(handler => {
+                    handler(0);
+                });
+            },
+            fontClick: function () {
+                this.fontSlider = fontConfig.fontSize;
+                this.fontDialogVisible = !this.fontDialogVisible;
+            },
+            fontSlideChange: function (value) {
+                fontConfig.fontSize = value;
+                //写入cookie
+                setCookie('fontSize', value);
+                fontEvents.forEach(handler => {
+                    handler(value);
+                });
+
+            },
+            iframeLoad: function (tab, e) {
+                url = e.target.contentWindow.location.href
+
+                tab.newUrl = url;
+                tab.loading = false;
+                this.$forceUpdate();
+                var self = this;
+                e.target.contentWindow.beforeLoad = function () {
+                    tab.loading = true;
+                    self.$forceUpdate();
+                }
+                this.loading = false;
+            },
+            setTheme: function (item) {
+                var url = window.themeUrl;
+                if (item.file && item.file != '') {
+                    this.theme = url + item.file;
+                } else {
+                    this.theme = '';
+                }
+                this.themeName = item.text;
+                setCookie('theme', this.theme);
+                setCookie('theme_name', item.text);
+
+                var self = this;
+                //通知子页面
+                window.themeEvents.forEach(handler => {
+                    handler(self.theme)
+                });
+            },
+            openUrl: function (url) {
+                window.open(url);
+            },
+            contextmenu: function (item, e) {
+                //右键菜单，如果x+菜单宽度超过屏幕宽度，就默认为屏幕宽度-10-菜单宽度
+
+                //home没有popup menu
+                if (item.id == '0') {
+                    return;
+                }
+                this.popup.tab = item;
+                this.popup.show = true;
+                this.$nextTick(function () {
+                    let el = this.$refs.popupmenu;
+                    el.style.width = '150px';
+                    let x = e.clientX;
+
+                    let w = document.body.offsetWidth
+                    if (x + 150 > w) {
+                        x = w - 160;
+                    }
+
+                    this.popup.left = x;
+                    this.popup.top = e.clientY;
+                });
+            },
+            mainClick: function (e) {
+                this.popup.show = false;
+            },
+            tabClick: function (tab) {
+                var item = this.tabs[tab.index];
+                var index = item.index;
+                this.menuActive = String(index);
+                this.breadcrumbs = item.breadcrumbs;
+                if (tab.index == '0') {
+                    item.url = '/'
+                }
+                changeUrl(item);
+            },
+            handleTabsEdit: function (targetName, action) {
+
+                var self = this;
+                if (action === 'remove') {
+                    var next = '0';
+                    this.tabs.forEach((tab, index) => {
+                        if (tab.id == targetName) {
+                            var temp = self.tabs[index + 1] || self.tabs[index - 1];
+                            if (temp) {
+                                next = temp.id;
+                                self.menuActive = temp.index;
+                                self.breadcrumbs = temp.breadcrumbs;
+                                changeUrl(temp)
+                            }
+                        }
+                    });
+                    this.tabModel = next;
+
+                    if (targetName != 0) {
+                        this.tabs = this.tabs.filter(tab => tab.id !== targetName);
+                    }
+                    this.syncTabs();
+                }
+            }
+            ,
+            openTab: function (data, index, selected, loading) {
+                if (data.breadcrumbs) {
+                    this.breadcrumbs = data.breadcrumbs;
+                }
+                //如果data没有eid，就直接打开或者添加，根据url
+                if (!data.eid) {
+                    data.eid = new Date().getTime() + "" + Math.random();
+                }
+
+                if (index) {
+                    this.menuActive = String(index);
+                }
+                if (selected) {
+                    //找到name，打开
+                    // console.log(data)
+                    for (var i = 0; i < this.tabs.length; i++) {
+                        if (this.tabs[i].url == data.url) {
+                            this.tabModel = this.tabs[i].id;
+                            break;
+                        }
+                    }
+                    return;
+                }
+
+                this.breadcrumbs = data.breadcrumbs;
+                var exists = null;
+                //判断是否存在，存在就直接打开
+                for (var i = 0; i < this.tabs.length; i++) {
+                    var tab = this.tabs[i];
+                    if (tab.eid == data.eid) {
+                        exists = tab;
+                        continue;
+                    }
+                }
+
+                if (exists) {
+                    this.tabModel = exists.id;
+                } else {
+                    //其他的网址loading会一直转
+                    if (data.url && data.url.indexOf('http') != 0) {
+                        if (loading) {
+                            data.loading = true;
+                            this.loading = true;
+                        } else {
+                            data.loading = false;
+                            this.loading = false;
+                        }
+                    }
+                    // data.id = new Date().getTime() + "" + Math.random();
+                    data.id = data.eid;
+                    data.index = index;
+                    this.tabs.push(data);
+                    this.tabModel = data.id;
+                }
+                changeUrl(data)
+                this.syncTabs();
+            }
+            ,
+            foldClick: function () {
+
+                //移动端浮动菜单
+                var width = document.documentElement.clientWidth || document.body.clientWidth;
+                if (width < 800) {
+                    this.drawer = !this.drawer;
+                    return;
+                }
+                this.menuTextShow = !this.menuTextShow;
+                this.$nextTick(() => {
+                    this.fold = !this.fold;
+
+                    this.small = this.fold;
+                    //设置进cookie
+                    setCookie('fold', this.fold);
+                });
+
+
+            }
+            ,
+            changePassword: function () {
+                var width = document.documentElement.clientWidth || document.body.clientWidth;
+                if (width > 800) {
+                    this.pwdDialog = {
+                        url: window.urls.changePassword + '?dialog=1',
+                        name: language.change_password,
+                        show: true
+                    };
+                } else {
+                    this.openTab({
+                        url: window.urls.changePassword,
+                        icon: 'far fa-edit',
+                        name: language.change_password,
+                        breadcrumbs: [{
+                            name: language.change_password,
+                            icon: 'far fa-edit'
+                        }]
+                    })
+                    app.breadcrumbs = [language.change_password];
+                }
+            }
+            ,
+            logout: function () {
+                this.$confirm(language.confirm, Lanuages.Tips, {
+                    confirmButtonText: language.yes,
+                    cancelButtonText: language.no,
+                    type: 'warning'
+                }).then(function () {
+                    //清除cookie主题设置和sessionStore数据
+                    delete sessionStorage['tabs'];
+                    setCookie('theme', '');
+                    setCookie('theme_name', '');
+                    window.location.href = window.urls.logout;
+                }).catch(function () {
+
+                });
+            }
+            ,
+            goIndex: function (url) {
+                if (!url || url == 'None') {
+                    url = '/';
+                }
+                window.open(url);
+            }
+            ,
+            getLanuage: getLanuage,
+            getIcon: getIcon,
+            goZoom: function () {
+                var el = window.document.body;
+                if (!this.zoom) {
+
+                    var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
+                    if (!isFullscreen) {//进入全屏,多重短路表达式
+                        (el.requestFullscreen && el.requestFullscreen()) ||
+                        (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
+                        (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen());
+                    }
+                    this.zoom = true;
+                } else {
+
+                    document.exitFullscreen ? document.exitFullscreen() :
+                        document.mozCancelFullScreen ? document.mozCancelFullScreen() :
+                            document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
+                    this.zoom = false;
+                }
+            }
+            ,
+            displayTimeline: function () {
+                this.timeline = !this.timeline;
+            },
+            report: function (url) {
+                if (!url) {
+                    if (document.querySelector('html').lang) {
+                        url = 'https://simpleui.72wo.com';
+                    } else {
+                        url = 'https://github.com/newpanjing/simpleui/issues';
+                    }
+                }
+                window.open(url);
+            }
+        }
+    })
+
+
+})();

static/admin/simpleui-x/js/language.js

@@ -0,0 +1,10 @@
+window.getLanuage = function (key) {
+    if (!window.Lanuages) {
+        return "";
+    }
+    var val = Lanuages[key];
+    if (!val || val == "") {
+        val = key;
+    }
+    return val
+}

static/admin/simpleui-x/js/login.js

@@ -0,0 +1,25 @@
+if (parent.callback) {
+    //如果是在子框架内就把首页刷新
+    parent.callback();
+}
+var loginApp = new Vue({
+    el: '.login-main',
+    data: {
+        username: '',
+        password: '',
+        loading: false
+    },
+    methods: {
+        login: function () {
+            this.loading = true;
+            if (this.username === "" || this.password === "") {
+                this.$message.error("Please enter your username or password!");
+                this.loading = false;
+                return ;
+            }
+            this.$nextTick(function () {
+                document.getElementById('login-form').submit();
+            });
+        }
+    }
+});

static/admin/simpleui-x/js/menu.js

@@ -0,0 +1,34 @@
+Vue.component('sub-menu', {
+    props: ['menus', 'fold'],
+    methods: {
+        openTab(data) {
+            window.app.openTab(data);
+        }
+    },
+    template: `
+        <div>
+            <template v-for="(item,i) in menus" :key="item.eid">
+                <el-menu-item :index="item.eid" v-if="!item.models" @click="openTab(item,item.eid)">
+                    <i :class="item.icon"></i>
+                    <span v-show="!fold" slot="title" v-text="item.name"></span>
+                </el-menu-item>
+                <el-submenu :index="item.eid" v-else>
+                    <template slot="title">
+                        <i :class="item.icon"></i>
+                        <span v-show="!fold" v-text="item.name"></span>
+                    </template>
+                   <sub-menu :menus="item.models"></sub-menu>
+                </el-submenu>
+            </template>
+        </div>
+    `
+
+});
+Vue.component('multiple-menu', {
+    props: ['menus', 'menuActive', 'fold'],
+    template: `
+     <el-menu :unique-opened="true" :default-active="menuActive" :collapse="fold" :collapse-transition="true">
+        <sub-menu :menus="menus" :fold="fold"></sub-menu>
+    </el-menu>
+    `
+});