优化“集群设置--网站设置”页面

web/views/@default/clusters/cluster/settings/global-server-config/index.html

@@ -3,11 +3,16 @@
 {$template "/left_menu_with_menu"}
 
 <div class="right-box with-menu">
-    <form class="ui form" data-tea-action="$" data-tea-success="success">
+    <second-menu>
+        <a v-for="item in titleMenus" :class="{active: item.id == currentItem}" :href="'#' + item.id" class="item" @click.prevent="selectItem(item)">{{item.name}}</a>
+    </second-menu>
+
+    <form class="ui form" data-tea-action="$" data-tea-success="success" id="global-config-form">
         <csrf-token></csrf-token>
         <input type="hidden" name="clusterId" :value="clusterId"/>
 
-        <h4>域名绑定</h4>
+        <div v-show="currentItem == 'title-server-name-bind'">
+            <h4 id="title-server-name-bind">域名绑定</h4>
 
             <table class="ui table definition selectable">
                 <tr>
@@ -80,9 +85,10 @@
                     </td>
                 </tr>
             </table>
+        </div>
 
-        <div v-show="teaIsPlus">
-            <h4>域名审核</h4>
+        <div v-show="teaIsPlus && currentItem == 'title-server-name-auditing'">
+            <h4 id="title-server-name-auditing" v-if="teaIsPlus">域名审核</h4>
             <table class="ui table definition selectable">
                 <tr>
                     <td class="title">域名变更时需要审核</td>
@@ -101,7 +107,8 @@
             </table>
         </div>
 
-        <h4>访问日志</h4>
+        <div v-show="currentItem == 'title-access-log'">
+            <h4 id="title-access-log">访问日志</h4>
             <table class="ui table definition selectable">
                 <tr>
                     <td>允许记录访问日志</td>
@@ -146,8 +153,10 @@
                     </td>
                 </tr>
             </table>
+        </div>
 
-        <h4>运行日志</h4>
+        <div v-show="currentItem == 'title-server-log'">
+            <h4 id="title-server-log">运行日志</h4>
             <table class="ui table definition selectable">
                 <tr>
                     <td class="title">记录网站错误</td>
@@ -157,8 +166,10 @@
                     </td>
                 </tr>
             </table>
+        </div>
 
-        <h4>性能</h4>
+        <div v-show="currentItem == 'title-performance'">
+            <h4 id="title-performance">性能</h4>
             <table class="ui table definition selectable">
                 <tr>
                     <td class="title">自动读数据超时</td>
@@ -182,9 +193,10 @@
                     </td>
                 </tr>
             </table>
+        </div>
 
-        <div v-show="teaIsPlus">
-            <h4>Ln节点</h4>
+        <div v-show="teaIsPlus && currentItem == 'title-ln'">
+            <h4 id="title-ln" v-if="teaIsPlus">Ln节点</h4>
             <table class="ui table definition selectable">
                 <tr>
                     <td>强制Ln请求</td>
@@ -207,7 +219,8 @@
             </table>
         </div>
 
-        <h4>TCP/UDP相关</h4>
+        <div v-show="currentItem == 'title-tcp-udp'">
+            <h4 id="title-tcp-udp">TCP/UDP相关</h4>
             <table class="ui table definition selectable">
                 <tr>
                     <td class="title">允许的端口范围</td>
@@ -234,8 +247,10 @@
                     </td>
                 </tr>
             </table>
+        </div>
 
-        <h4>其他</h4>
+        <div v-show="currentItem == 'title-others'">
+            <h4 id="title-others">其他</h4>
             <table class="ui table definition selectable">
                 <tr>
                     <td class="title">服务器旗标</td>
@@ -266,7 +281,8 @@
                     </td>
                 </tr>
             </table>
-
+        </div>
+        <div class="margin"></div>
         <submit-btn></submit-btn>
     </form>
 </div>

web/views/@default/clusters/cluster/settings/global-server-config/index.js

@@ -1,6 +1,29 @@
 Tea.context(function () {
 	this.success = NotifyReloadSuccess("保存成功")
 
+	// Menu
+	this.currentItem = ""
+
+	this.titleMenus = []
+	this.$delay(function () {
+		let elements = document.querySelectorAll("#global-config-form h4")
+		this.currentItem = elements[0].getAttribute("id")
+		for (let i = 0; i < elements.length; i++) {
+			let textContent = elements[i].textContent
+			if (textContent == null || textContent.length == 0) {
+				textContent = elements[i].innerText
+			}
+			this.titleMenus.push({
+				name: textContent,
+				id: elements[i].getAttribute("id")
+			})
+		}
+	})
+
+	this.selectItem = function (item) {
+		this.currentItem = item.id
+	}
+
 	/**
 	 * TCP端口
 	 */