update 2025-02-09 12:21:58

luci-theme-design/Makefile

@@ -0,0 +1,15 @@
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+
+include $(TOPDIR)/rules.mk
+
+LUCI_TITLE:=Design Theme
+LUCI_DEPENDS:=
+PKG_VERSION:=6.0
+PKG_RELEASE:=20230224
+
+include $(TOPDIR)/feeds/luci/luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature

luci-theme-design/htdocs/luci-static/design/fonts/font.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe20a;" glyph-name="expand_less" d="M512 596.667l256-256-60-60-196 196-196-196-60 60z" />
+<glyph unicode="&#xe20b;" glyph-name="expand_more" d="M708 572.667l60-60-256-256-256 256 60 60 196-196z" />
+<glyph unicode="&#xe20e;" glyph-name="menu" d="M128 682.667h768v-86h-768v86zM128 384.667v84h768v-84h-768zM128 170.667v86h768v-86h-768z" />
+<glyph unicode="&#xe291;" glyph-name="favorite" d="M512 28.667l-62 56q-106 96-154 142t-107 114-81 123-22 113q0 98 67 166t167 68q116 0 192-90 76 90 192 90 100 0 167-68t67-166q0-78-52-162t-113-146-199-186z" />
+<glyph unicode="&#xe603;" glyph-name="spinner9" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96s96 42.98 96 96c0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96s-96-42.98-96-96c0-282.77 229.23-512 512-512z" />
+<glyph unicode="&#xf059;" glyph-name="question-circle" horiz-adv-x="878" d="M512 164.571v109.714q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-109.714q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM658.286 548.571q0 50.286-31.714 93.143t-79.143 66.286-97.143 23.429q-138.857 0-212-121.714-8.571-13.714 4.571-24l75.429-57.143q4-3.429 10.857-3.429 9.143 0 14.286 6.857 30.286 38.857 49.143 52.571 19.429 13.714 49.143 13.714 27.429 0 48.857-14.857t21.429-33.714q0-21.714-11.429-34.857t-38.857-25.714q-36-16-66-49.429t-30-71.714v-20.571q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143q0 10.857 12.286 28.286t31.143 28.286q18.286 10.286 28 16.286t26.286 20 25.429 27.429 16 34.571 7.143 46.286zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
+</font></defs></svg>

luci-theme-design/htdocs/luci-static/design/js/design.js

@@ -0,0 +1,177 @@
+XHR = function() {
+    this.reinit = function() {
+        if (window.XMLHttpRequest) {
+            this._xmlHttp = new XMLHttpRequest();
+        } else if (window.ActiveXObject) {
+            this._xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
+        } else {
+            alert("xhr.js: XMLHttpRequest is not supported by this browser!");
+        }
+    }
+    this.busy = function() {
+        if (!this._xmlHttp)
+            return false;
+        switch (this._xmlHttp.readyState) {
+            case 1:
+            case 2:
+            case 3:
+                return true;
+            default:
+                return false;
+        }
+    }
+    this.abort = function() {
+        if (this.busy())
+            this._xmlHttp.abort();
+    }
+    this.get = function(url, data, callback) {
+        this.reinit();
+        var xhr = this._xmlHttp;
+        var code = this._encode(data);
+        url = location.protocol + '//' + location.host + url;
+        if (code)
+            if (url.substr(url.length - 1, 1) == '&')
+                url += code;
+            else
+                url += '?' + code;
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+                var json = null;
+                if (xhr.getResponseHeader("Content-Type") == "application/json") {
+                    try {
+                        json = eval('(' + xhr.responseText + ')');
+                    } catch (e) {
+                        json = null;
+                    }
+                }
+                callback(xhr, json);
+            }
+        }
+        xhr.send(null);
+    }
+    this.post = function(url, data, callback) {
+        this.reinit();
+        var xhr = this._xmlHttp;
+        var code = this._encode(data);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4)
+                callback(xhr);
+        }
+        xhr.open('POST', url, true);
+        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+        xhr.send(code);
+    }
+    this.cancel = function() {
+        this._xmlHttp.onreadystatechange = function() {};
+        this._xmlHttp.abort();
+    }
+    this.send_form = function(form, callback, extra_values) {
+        var code = '';
+        for (var i = 0; i < form.elements.length; i++) {
+            var e = form.elements[i];
+            if (e.options) {
+                code += (code ? '&' : '') +
+                    form.elements[i].name + '=' + encodeURIComponent(e.options[e.selectedIndex].value);
+            } else if (e.length) {
+                for (var j = 0; j < e.length; j++)
+                    if (e[j].name) {
+                        code += (code ? '&' : '') +
+                            e[j].name + '=' + encodeURIComponent(e[j].value);
+                    }
+            } else {
+                code += (code ? '&' : '') +
+                    e.name + '=' + encodeURIComponent(e.value);
+            }
+        }
+        if (typeof extra_values == 'object')
+            for (var key in extra_values)
+                code += (code ? '&' : '') +
+                key + '=' + encodeURIComponent(extra_values[key]);
+        return ((form.method == 'get') ? this.get(form.getAttribute('action'), code, callback) : this.post(form.getAttribute('action'), code, callback));
+    }
+    this._encode = function(obj) {
+        obj = obj ? obj : {};
+        obj['_'] = Math.random();
+        if (typeof obj == 'object') {
+            var code = '';
+            var self = this;
+            for (var k in obj)
+                code += (code ? '&' : '') +
+                k + '=' + encodeURIComponent(obj[k]);
+            return code;
+        }
+        return obj;
+    }
+}
+XHR.get = function(url, data, callback) {
+    (new XHR()).get(url, data, callback);
+}
+XHR.poll = function(interval, url, data, callback) {
+    if (isNaN(interval) || interval < 1)
+        interval = 5;
+    if (!XHR._q) {
+        XHR._t = 0;
+        XHR._q = [];
+        XHR._r = function() {
+            for (var i = 0, e = XHR._q[0]; i < XHR._q.length; e = XHR._q[++i]) {
+                if (!(XHR._t % e.interval) && !e.xhr.busy())
+                    e.xhr.get(e.url, e.data, e.callback);
+            }
+            XHR._t++;
+        };
+    }
+    XHR._q.push({
+        interval: interval,
+        callback: callback,
+        url: url,
+        data: data,
+        xhr: new XHR()
+    });
+    XHR.run();
+}
+XHR.halt = function() {
+    if (XHR._i) {
+        try {
+            document.getElementById('xhr_poll_status').style.display = '';
+            document.getElementById('xhr_poll_status_on').style.display = 'none';
+            document.getElementById('xhr_poll_status_off').style.display = '';
+            document.getElementById('notice_status').style.marginRight = '30px'
+        } catch (e) {}
+        window.clearInterval(XHR._i);
+        XHR._i = null;
+    }
+}
+XHR.run = function() {
+    if (XHR._r && !XHR._i) {
+        try {
+            document.getElementById('xhr_poll_status').style.display = '';
+            document.getElementById('xhr_poll_status_on').style.display = '';
+            document.getElementById('xhr_poll_status_off').style.display = 'none';
+            document.getElementById('notice_status').style.marginRight = '30px'
+        } catch (e) {}
+        XHR._r();
+        XHR._i = window.setInterval(XHR._r, 1000);
+    }
+}
+XHR.running = function() {
+    return !!(XHR._r && XHR._i);
+};
+(function($) {
+    function settingsStatusRealtimeOverflow() {
+        if (self.location.pathname.includes("status/realtime")) {
+            const nodeStatusRealtime = $('.node-status-realtime');
+            const selectorValues = ['bandwidth', 'wifirate', 'wireless'];
+            for (let i = 0; i < selectorValues.length; i++) {
+                const value = selectorValues[i];
+                const target = nodeStatusRealtime.find(`embed[src="/luci-static/resources/${value}.svg"] + div + br + table`);
+                if (target.length) {
+                    target.wrap('<div style="overflow-x: auto;"></div>');
+                }
+            }
+        }
+    }
+    $(document).ready(() => {
+        settingsStatusRealtimeOverflow();
+    });
+})(jQuery);

luci-theme-design/htdocs/luci-static/design/js/script.js

@@ -0,0 +1,178 @@
+(function($) {
+    $(".main > .loading").fadeOut();
+
+    function trimText(text) {
+        return text.replace(/[ \t\n\r]+/g, " ");
+    }
+    var lastNode = undefined;
+    var mainNodeName = undefined;
+    var nodeUrl = "";
+    (function(node) {
+        if (node[0] == "admin") {
+            luciLocation = [node[1], node[2]];
+        } else {
+            luciLocation = node;
+        }
+        for (var i in luciLocation) {
+            nodeUrl += luciLocation[i];
+            if (i != luciLocation.length - 1) {
+                nodeUrl += "/";
+            }
+        }
+    })(luciLocation);
+
+    function getCurrentNodeByUrl() {
+        if (!$('body').hasClass('logged-in')) {
+            luciLocation = ["Main", "Login"];
+            return true;
+        }
+        const urlReg = new RegExp(nodeUrl + "$")
+        var ret = false;
+        $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast");
+        $(".main > .main-left > .nav > .slide > .menu").removeClass("active");
+        $(".main > .main-left > .nav > .slide > .menu").each(function() {
+            var ulNode = $(this);
+            ulNode.next().find("a").each(function() {
+                var that = $(this);
+                var href = that.attr("href");
+                if (urlReg.test(href)) {
+                    ulNode.click();
+                    ulNode.next(".slide-menu").stop(true, true);
+                    lastNode = that.parent();
+                    lastNode.addClass("active");
+                    ret = true;
+                    return true;
+                }
+            });
+        });
+        return ret;
+    }
+    $(".main > .main-left > .nav > .slide > .menu").click(function() {
+        var ul = $(this).next(".slide-menu");
+        var menu = $(this);
+        if (!menu.hasClass("exit")) {
+            $(".main > .main-left > .nav > .slide > .active").next(".slide-menu").stop(true).slideUp("fast");
+            $(".main > .main-left > .nav > .slide > .menu").removeClass("active");
+            if (!ul.is(":visible")) {
+                menu.addClass("active");
+                ul.addClass("active");
+                ul.stop(true).slideDown("fast");
+            } else {
+                ul.stop(true).slideUp("fast", function() {
+                    menu.removeClass("active");
+                    ul.removeClass("active");
+                });
+            }
+            return false;
+        }
+    });
+    $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function() {
+        if (lastNode != undefined)
+            lastNode.removeClass("active");
+        $(this).parent().addClass("active");
+        $(".main > .loading").fadeIn("fast");
+        return true;
+    });
+    $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function() {
+        if (lastNode != undefined)
+            lastNode.removeClass("active");
+        $(this).addClass("active");
+        $(".main > .loading").fadeIn("fast");
+        window.location = $($(this).find("a")[0]).attr("href");
+        return false;
+    });
+    if (getCurrentNodeByUrl()) {
+        mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
+        mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
+        $("body").addClass(mainNodeName);
+    }
+    $("#maincontent > .container").find("a").each(function() {
+        var that = $(this);
+        var onclick = that.attr("onclick");
+        if (onclick == undefined || onclick == "") {
+            that.click(function() {
+                var href = that.attr("href");
+                if (href.indexOf("#") == -1) {
+                    $(".main > .loading").fadeIn("fast");
+                    return true;
+                }
+            });
+        }
+    });
+    var showSide = false;
+    $(".showSide").click(function() {
+        if (showSide) {
+            $(".darkMask").stop(true).fadeOut("fast");
+            $(".main-left").stop(true).animate({
+                width: "0"
+            }, "fast");
+            $(".main-right").css("overflow-y", "auto");
+            $("header>.container>.brand").css("padding", "0 4.5rem")
+            showSide = false;
+        } else {
+            $(".darkMask").stop(true).fadeIn("fast");
+            $(".main-left").stop(true).animate({
+                width: "18rem"
+            }, "fast");
+            $(".main-right").css("overflow-y", "hidden");
+            $(".showSide").css("display", "none");
+            $("header").css("box-shadow", "18rem 2px 4px rgb(0 0 0 / 8%)")
+            $("header>.container>.brand").css("padding", '0rem')
+            showSide = true;
+        }
+    });
+    $(".darkMask").click(function() {
+        if (showSide) {
+            $(".darkMask").stop(true).fadeOut("fast");
+            $(".main-left").stop(true).animate({
+                width: "0"
+            }, "fast");
+            $(".main-right").css("overflow-y", "auto");
+            $(".showSide").css("display", "");
+            $("header").css("box-shadow", "0 2px 4px rgb(0 0 0 / 8%)")
+            $("header>.container>.brand").css("padding", "0 4.5rem")
+            showSide = false;
+        }
+    });
+    $(window).resize(function() {
+        if ($(window).width() > 992) {
+            showSide = false;
+            $(".showSide").css("display", "");
+            $(".main-left").css("width", "");
+            $(".darkMask").stop(true);
+            $(".darkMask").css("display", "none");
+            $("header").css("box-shadow", "18rem 2px 4px rgb(0 0 0 / 8%)")
+            $("header>.container>.brand").css("padding", '0rem')
+        } else {
+            $("header").css("box-shadow", "0 2px 4px rgb(0 0 0 / 8%)")
+            $("header>.container>.brand").css("padding", "0 4.5rem")
+        }
+        if (showSide) {
+            $("header").css("box-shadow", "18rem 2px 4px rgb(0 0 0 / 8%)")
+            $("header>.container>.brand").css("padding", '0rem')
+        }
+    });
+    $(".main-right").focus();
+    $(".main-right").blur();
+    $("input").attr("size", "0");
+    if (mainNodeName != undefined) {
+        switch (mainNodeName) {
+            case "node-status-system_log":
+            case "node-status-kernel_log":
+                $("#syslog").focus(function() {
+                    $("#syslog").blur();
+                    $(".main-right").focus();
+                    $(".main-right").blur();
+                });
+                break;
+            case "node-status-firewall":
+                var button = $(".node-status-firewall > .main fieldset li > a");
+                button.addClass("cbi-button cbi-button-reset a-to-btn");
+                break;
+            case "node-system-reboot":
+                var button = $(".node-system-reboot > .main > .main-right p > a");
+                button.addClass("cbi-button cbi-input-reset a-to-btn");
+                break;
+        }
+    }
+})(jQuery);

luci-theme-design/htdocs/luci-static/design/js/style.js

@@ -0,0 +1,32 @@
+(function ($) {
+
+    // 修复某些插件导致在https下env(safe-area-inset-bottom)为0的情况
+    var url = self.location.href; 
+    if ((/(iPhone|iPad|iPod|iOS|Mac|Macintosh)/i.test(navigator.userAgent)) && url.indexOf("openclash") != -1 ) {
+        var oMeta = document.createElement('meta');
+        oMeta.content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover';
+        oMeta.name = 'viewport';
+        document.getElementsByTagName('head')[0].appendChild(oMeta);
+    }
+
+		// 设置indicators图标，(放在menu script执行之前passwall某些代码错误中断导致失败)
+		const callback = function (mutationsList, observer) {
+			const firstChild = document.querySelector("#indicators > :first-child");
+			if (firstChild && firstChild.getAttribute("data-indicator") !== "uci-changes") {
+				firstChild.textContent = '\ue6b9';
+			}
+		}
+		const observer = new MutationObserver(callback);
+		const config = { childList: true, attributes: true, subtree: true };
+		const targetNode = document.getElementById("indicators");
+		observer.observe(targetNode, config);
+
+		// 监听窗口大小，动态设置header box阴影长度
+        $(window).resize( function  () {
+			if (window.innerWidth <= 992) {
+				$("header").css("box-shadow",   "0 2px 4px rgb(0 0 0 / 8%)")
+			} else {
+				$("header").css("box-shadow",   "17rem 2px 4px rgb(0 0 0 / 8%)")
+			}
+        });
+})(jQuery);

luci-theme-design/htdocs/luci-static/design/manifest.json

@@ -0,0 +1,25 @@
+{
+    "name": "Design",
+    "short_name": "Design",
+    "description": "Design for OpenWRT by 2smile.",
+    "start_url": "/",
+    "scope": "/",
+    "orientation": "portrait",
+    "display": "standalone",
+    "prompt_message": "在主屏幕添加图标，以便快速访问 Design",
+    "icons": [
+        {
+            "src": "images/icon.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "images/icon.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        }
+    ],
+    "gcm_sender_id": "524223308106",
+    "gcm_user_visible_only": true,
+    "status": "ok"
+}

luci-theme-design/htdocs/luci-static/resources/menu-design.js

@@ -0,0 +1,200 @@
+'use strict';
+'require baseclass';
+'require ui';
+
+return baseclass.extend({
+	__init__: function() {
+		ui.menu.load().then(L.bind(this.render, this));
+	},
+
+	render: function(tree) {
+		var node = tree,
+		    url = '';
+
+		this.renderModeMenu(node);
+
+		if (L.env.dispatchpath.length >= 3) {
+			for (var i = 0; i < 3 && node; i++) {
+				node = node.children[L.env.dispatchpath[i]];
+				url = url + (url ? '/' : '') + L.env.dispatchpath[i];
+			}
+
+			if (node)
+				this.renderTabMenu(node, url);
+		}
+
+		document.querySelector('.showSide')
+			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+
+		document.querySelector('.darkMask')
+			.addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
+			
+		document.querySelector(".main > .loading").style.opacity = '0';
+		document.querySelector(".main > .loading").style.visibility = 'hidden';
+
+		if (window.innerWidth <= 992)
+			document.querySelector('.main-left').style.width = '0';
+
+		document.querySelector('.main-right').style.overflow = 'auto';
+		window.addEventListener('resize', this.handleSidebarToggle, true);
+	},
+
+	handleMenuExpand: function(ev) {
+		var a = ev.target, slide = a.parentNode, slide_menu = a.nextElementSibling;
+		var collapse = false;
+
+		document.querySelectorAll('.main .main-left .nav > li >ul.active').forEach(function (ul) {
+			$(ul).stop(true).slideUp("fast", function () {
+				ul.classList.remove('active');
+				ul.previousElementSibling.classList.remove('active');
+			});
+			if (!collapse && ul === slide_menu) {
+				collapse = true;
+			}
+
+		});
+
+		if (!slide_menu)
+			return;
+		
+		
+		if (!collapse) {
+			$(slide).find(".slide-menu").slideDown("fast",function(){
+				slide_menu.classList.add('active');
+				a.classList.add('active');
+			});
+			a.blur();
+		}
+		ev.preventDefault();
+		ev.stopPropagation();
+	},
+
+	renderMainMenu: function(tree, url, level) {
+		var l = (level || 0) + 1,
+		    ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }),
+		    children = ui.menu.getChildren(tree);
+
+		if (children.length == 0 || l > 2)
+			return E([]);
+		for (var i = 0; i < children.length; i++) {
+			var isActive = ((L.env.dispatchpath[l] == children[i].name) && (L.env.dispatchpath[l - 1] == tree.name)),
+				submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, l),
+				hasChildren = submenu.children.length,
+				slideClass = hasChildren ? 'slide' : null,
+				menuClass = hasChildren ? 'menu' : null;
+			if (isActive) {
+				ul.classList.add('active');
+				slideClass += " active";
+				menuClass += " active";
+			}
+
+			ul.appendChild(E('li', { 'class': slideClass }, [
+				E('a', {
+					'href': L.url(url, children[i].name),
+					'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null,
+					'class': menuClass,
+					'data-title': hasChildren ? children[i].title.replace(" ", "_") : children[i].title.replace(" ", "_"),
+				}, [_(children[i].title)]),
+				submenu
+			]));
+		}
+
+		if (l == 1) {
+			var container = document.querySelector('#mainmenu');
+
+			container.appendChild(ul);
+			container.style.display = '';
+		}
+
+		return ul;
+	},
+
+	renderModeMenu: function(tree) {
+		var ul = document.querySelector('#modemenu'),
+		    children = ui.menu.getChildren(tree);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+
+			ul.appendChild(E('li', {}, [
+				E('a', {
+					'href': L.url(children[i].name),
+					'class': isActive ? 'active' : null
+				}, [ _(children[i].title) ])
+			]));
+
+			if (isActive)
+				this.renderMainMenu(children[i], children[i].name);
+
+			if (i > 0 && i < children.length)
+				ul.appendChild(E('li', {'class': 'divider'}, [E('span')]))
+		}
+
+		if (children.length > 1)
+			ul.parentElement.style.display = '';
+	},
+
+	renderTabMenu: function(tree, url, level) {
+		var container = document.querySelector('#tabmenu'),
+			l = (level || 0) + 1,
+			ul = E('ul', { 'class': 'tabs' }),
+			children = ui.menu.getChildren(tree),
+			activeNode = null;
+
+		if (children.length == 0)
+			return E([]);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
+				activeClass = isActive ? ' active' : '',
+				className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+
+			ul.appendChild(E('li', { 'class': className }, [
+				E('a', { 'href': L.url(url, children[i].name) }, [_(children[i].title)])
+			]));
+
+			if (isActive)
+				activeNode = children[i];
+		}
+
+		container.appendChild(ul);
+		container.style.display = '';
+
+		if (activeNode)
+			container.appendChild(this.renderTabMenu(activeNode, url + '/' + activeNode.name, l));
+
+		return ul;
+	},
+
+	handleSidebarToggle: function(ev) {
+		var width = window.innerWidth,
+		    darkMask = document.querySelector('.darkMask'),
+		    mainRight = document.querySelector('.main-right'),
+		    mainLeft = document.querySelector('.main-left'),
+		    open = mainLeft.style.width == '';
+
+			if (width > 992 || ev.type == 'resize')
+				open = true;
+				
+		darkMask.style.visibility = open ? '' : 'visible';
+		darkMask.style.opacity = open ? '': 1;
+
+		if (width <= 992)
+			mainLeft.style.width = open ? '0' : '';
+		else
+			mainLeft.style.width = ''
+
+		// 初始化设置，css后置设置导致刷新会闪现。
+		mainLeft.style.transition = 'visibility 2000ms, width 200ms';
+		mainLeft.style.visibility = open ? '' : 'visible';
+
+		mainRight.style['overflow-y'] = open ? 'auto' : 'visible';
+
+		if (open) {
+			$("header").css("box-shadow",   "0 2px 4px rgb(0 0 0 / 8%)")
+		} else {
+			$("header").css("box-shadow",   "17rem 2px 4px rgb(0 0 0 / 8%)")
+		}
+	},
+});
+

luci-theme-design/luasrc/view/themes/design/footer.htm

@@ -0,0 +1,30 @@
+<%#
+	Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+
+	luci-theme-material
+	Copyright 2015 Lutty Yang <lutty@wcan.in>
+
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/LuttyYang/luci-theme-material/issues
+
+	luci-theme-bootstrap:
+	Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+	https://github.com/muicss/mui
+
+	Licensed to the public under the Apache License 2.0
+-%>
+
+<% local ver = require "luci.version" %>
+					</div>
+					<footer class="mobile-hide">
+						<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
+					</footer>
+				</div>
+			</div>
+			<script type="text/javascript">L.require('menu-design')</script>
+		</body>
+	</html>

luci-theme-design/luasrc/view/themes/design/header.htm

@@ -0,0 +1,122 @@
+<%# Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI luci-theme-material
+	Copyright2015-2017 Lutty Yang <lutty@wcan.in>
+	Have a bug? Please create an issue here on GitHub!
+	https://github.com/LuttyYang/luci-theme-material/issues
+
+	luci-theme-bootstrap:
+		Copyright 2008 Steven Barth <steven@midlink.org>
+		Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
+		Copyright 2012 David Menting <david@nut-bolt.nl>
+
+	MUI:
+		https://github.com/muicss/mui
+
+		Licensed to the public under the Apache License 2.0
+-%>
+
+<% 
+	local sys=require "luci.sys"
+	local util=require "luci.util"
+	local http=require "luci.http"
+	local disp=require "luci.dispatcher"
+	local ver=require "luci.version"
+
+	local boardinfo=util.ubus("system", "board" ) or { }
+
+	local node=disp.context.dispatched
+	local path=table.concat(disp.context.path, "-" )
+
+	http.prepare_content("text/html; charset=UTF-8") 
+-%>
+
+<!DOCTYPE html>
+<html lang="<%=luci.i18n.context.lang%>">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover" />
+		<link rel="manifest" href="<%=media%>/manifest.json">
+		<title>
+			<%=striptags( (boardinfo.hostname or "OpenWrt" ) .. ( (node and node.title) and ' - ' .. translate(node.title) or '' )) %> - LuCI
+		</title>
+		<meta name="format-detection" content="telephone=no, email=no" />
+		<meta name="x5-fullscreen" content="true">
+		<meta name="full-screen" content="yes">
+		<meta name="x5-page-mode" content="app">
+		<meta name="browsermode" content="application">
+		<meta name="msapplication-tap-highlight" content="no">
+		<meta name="apple-mobile-web-app-status-bar-style" content="default" />
+		<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
+		<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "OpenWrt") ) %> - LuCI">
+		<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "OpenWrt") ) %> - LuCI">
+		<meta name="msapplication-TileImage" content="<%=media%>/images/icon.png" />
+		<link rel="icon" href="<%=media%>/images/icon.png" sizes="192x192">
+		<link rel="apple-touch-icon" sizes="192x192" href="<%=media%>/images/icon.png">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="apple-touch-fullscreen" content="yes" />
+		<meta name="msapplication-TileColor" content="#09c">
+		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+		<link rel="stylesheet" href="<%=media%>/css/style.css?v=<%= ver.luciversion %>">
+		<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></script>
+		<link rel="shortcut icon" href="<%=media%>/favicon.ico">
+		<% if node and node.css then %>
+			<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
+		<% end -%>
+		<script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
+		<script src="<%=resource%>/cbi.js"></script>
+		<script src="<%=resource%>/luci.js?v=<%=ver.luciversion%>"></script>
+		<% if css then %>
+			<style title="text/css">
+				<%= css %>
+			</style>
+		<% end -%>
+		<script src="<%=media%>/js/jquery.min.js?v=<%= ver.luciversion %>"></script>
+		<script src="<%=media%>/js/design.js?v=<%= ver.luciversion %>"></script>
+	</head>
+
+	<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>">
+		<header>
+			<div class="fill">
+				<div class="container">
+					<span class="showSide"></span>
+					<a class="brand" href="#">
+						<%=striptags(boardinfo.hostname or "OpenWrt")%>
+					</a>
+					<div class="status" id="indicators"></div>
+				</div>
+			</div>
+		</header>
+
+		<div class="main">
+			<div style="" class="loading">
+				<span>
+					<div class="loading-img"></div>
+					<%:Collecting data...%>
+				</span>
+			</div>
+			<div class="main-left" id="mainmenu" style="display:none"></div>
+			<div class="main-right">
+				<div class="modemenu-buttons" style="display:none">
+					<ul id="modemenu"></ul>
+				</div>
+				<div class="darkMask"></div>
+				<div id="maincontent">
+					<div class="container">
+						<%- if luci.sys.process.info("uid")==0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and path ~="admin-system-admin-password" then -%>
+						<%- end -%>
+					<noscript>
+						<div class="alert-message warning">
+							<h4>
+								<%:JavaScript required!%>
+							</h4>
+							<p>
+								<%:You must enable JavaScript in your browser or LuCI will not work properly.%>
+							</p>
+						</div>
+					</noscript>
+
+					<div id="tabmenu" style="display:none"></div>
+					<script src="<%=media%>/js/style.js?v=<%=ver.luciversion%>"></script>

luci-theme-design/root/etc/uci-defaults/30_luci-theme-design

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+if [ "$PKG_UPGRADE" != 1 ]; then
+	uci get luci.themes.Design >/dev/null 2>&1 || \
+	uci batch <<-EOF
+		set luci.themes.Design=/luci-static/design
+		set luci.main.mediaurlbase=/luci-static/design
+		commit luci
+	EOF
+fi
+
+exit 0