angel-kanade模版增加主题切换功能 (#329)

resource/template/theme-angel-kanade/footer.html

@@ -1,4 +1,5 @@
 {{define "theme-angel-kanade/footer"}}
+</div>
 <div class="ui inverted vertical footer segment">
     <div class="ui center aligned is-size-7 container">
         <b>&copy; <a style="color: white;" href="/">{{.Conf.Site.Brand}}</a></b> | 
@@ -13,12 +14,12 @@
 <script src="/static/semantic-ui-alerts.min.js"></script>
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
 <script src="/static/main.js?v20240224"></script>
+<script src="/static/theme-default/js/mixin.js?v20240226"></script>
 <script>
     (function () {
         updateLang({{.LANG }});
     })();
 </script>
 </body>
-
 </html>
 {{end}}

resource/template/theme-angel-kanade/home.html

@@ -4,7 +4,6 @@
 {{template "theme-angel-kanade/menu" .}}
 <div class="nb-container">
   <div class="ui container"> 
-    <div id="app">
     <div class="ui styled fluid accordion" v-for="group in groups">
       <div class="active title">
         <i class="dropdown icon"></i>
@@ -121,7 +120,6 @@
     </div>
   </div>
 </div>
-</div>
 {{template "theme-angel-kanade/footer" .}}
 <script>
   const initData = JSON.parse('{{.Servers}}').servers;
@@ -129,10 +127,13 @@
     el: '#app',
     delimiters: ['@#', '#@'],
     data: {
+      defaultTemplate: {{.Conf.Site.Theme}},
+      templates: {{.Themes}},
       data: initData,
       groups: [],
       cache: [],
     },
+    mixins: [mixinsVue],
     created() {
       this.group()
     },

resource/template/theme-angel-kanade/menu.html

@@ -1,4 +1,5 @@
 {{define "theme-angel-kanade/menu"}}
+<div id="app">
 <div class="ui large top fixed menu nb-menu">
     <div class="ui container">
         <a class="item" href="/">
@@ -15,6 +16,14 @@
         {{else}}
         <a class='item{{if eq .MatchedPath "/"}} active{{end}}' href="/"><i class="home icon"></i>{{tr "Home"}}</a>
         <a class='item{{if eq .MatchedPath "/service"}} active{{end}}' href="/service"><i class="rss icon"></i>{{tr "Services"}}</a>
+        <div class="item ui simple dropdown">
+            <div class="text"><i class="bi bi-incognito icon" style="margin-right:3px;"></i>{{tr "Template" }}<i class="dropdown icon" style="margin-right:0px;"></i></div>
+            <div class="menu">
+                <a v-for="(value, key) in templates" :key="key" @click="toggleTemplate(key)" class="item"><i class="th large icon"></i>@#value#@
+                    <i class="check icon" v-if="preferredTemplate === key"></i>
+                </a>
+            </div>
+        </div>
         {{end}}
         <div class="right menu">
             <div class="item">

resource/template/theme-angel-kanade/service.html

@@ -76,10 +76,20 @@
                     {{end}}
                 </tbody>
             </table>
-
             {{end}}
         </div>
     </div>
 </div>
 {{template "theme-angel-kanade/footer" .}}
+<script>
+    new Vue({
+        el: '#app',
+        delimiters: ['@#', '#@'],
+        data: {
+            defaultTemplate: {{.Conf.Site.Theme}},
+            templates: {{.Themes}}
+        },
+        mixins: [mixinsVue]
+    })
+</script>
 {{end}}

resource/template/theme-default/header.html

@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css">
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
-    <link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v2024022601">
+    <link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v20240226">
     <link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.js"></script>

resource/template/theme-default/home.html

@@ -145,7 +145,6 @@
       cache: [],
       chartDataList: [], 
       activePopup: null,
-      
     },
     mixins: [mixinsVue],
     created() {

resource/template/theme-server-status/home.html

@@ -24,17 +24,18 @@
             page: 'index',
             defaultTemplate: {{.Conf.Site.Theme}},
             templates: {{.Themes}},
+            servers: [],
             nodesTag: [],
             nodesNoTag: [],
             chartDataList: []
         },
         mixins: [mixinsVue],
         created() {
-            initData = JSON.parse('{{.Servers}}').servers;
+            this.servers = JSON.parse('{{.Servers}}').servers;
             if(this.showGroup) {
-                this.nodesTag = this.groupingData(this.handleNodes(initData),"Tag");
+                this.nodesTag = this.groupingData(this.handleNodes(this.servers),"Tag");
             } else {
-                this.nodesNoTag = this.handleNodes(initData);
+                this.nodesNoTag = this.handleNodes(this.servers);
             }
         },
         mounted() {
@@ -367,8 +368,7 @@
                 chart.setOption(option);
             },
             reloadCharts() { // 重新加载所有图表
-                const data = JSON.parse('{{.Servers}}').servers;
+                this.servers.forEach(node => {
-                data.forEach(node => {
                     const id = node.ID;
                     const chartData = this.chartDataList[id - 1];
                     if (chartData) {