优化交互

web/public/js/components/common/combo-box.js

@@ -110,6 +110,29 @@ Vue.component("combo-box", {
 		},
 		change: function () {
 			this.$emit("change", this.selectedItem)
+
+			let that = this
+			setTimeout(function () {
+				if (that.$refs.selectedLabel != null) {
+					that.$refs.selectedLabel.focus()
+				}
+			})
+		},
+		submitForm: function (event) {
+			if (event.target.tagName != "A") {
+				return
+			}
+			let parentBox = this.$refs.selectedLabel.parentNode
+			while (true) {
+				parentBox = parentBox.parentNode
+				if (parentBox == null || parentBox.tagName == "BODY") {
+					return
+				}
+				if (parentBox.tagName == "FORM") {
+					parentBox.submit()
+					break
+				}
+			}
 		}
 	},
 	template: `<div style="display: inline; z-index: 10; background: white">
@@ -121,9 +144,9 @@ Vue.component("combo-box", {
 	<!-- 当前选中 -->
 	<div v-if="selectedItem != null">
 		<input type="hidden" :name="name" :value="selectedItem.value"/>
-		<span class="ui label basic">{{title}}：{{selectedItem.name}}
+		<a href="" class="ui label basic" ref="selectedLabel" @click.prevent="submitForm"><span>{{title}}：{{selectedItem.name}}</span>
-			<a href="" title="清除" @click.prevent="reset"><i class="icon remove small"></i></a>
+			<span title="清除" @click.prevent="reset"><i class="icon remove small"></i></span>
-		</span>
+		</a>
 	</div>
 	
 	<!-- 菜单 -->

web/views/@default/clusters/ip-addrs/index.html

@@ -6,10 +6,7 @@
 <form class="ui form" method="get" action="/clusters/ip-addrs">
     <div class="ui fields inline">
         <div class="ui field">
-            集群：
+            <node-cluster-combo-box :v-cluster-id="clusterId"></node-cluster-combo-box>
-        </div>
-        <div class="ui field">
-            <cluster-selector :v-cluster-id="clusterId"></cluster-selector>
         </div>
         <div class="ui field">
             状态：

web/views/@default/servers/index.html

@@ -27,35 +27,28 @@
 <form method="get" class="ui form" action="/servers">
     <input type="hidden" name="auditingFlag" :value="auditingFlag"/>
 	<div class="ui margin"></div>
-    <div class="ui menu basic text">
+    <div class="ui fields inline">
-        <div class="item">
+        <div class="ui field" v-if="clusters.length > 0">
-            <div class="ui fields inline">
+            <node-cluster-combo-box :v-cluster-id="clusterId"></node-cluster-combo-box>
-                <div class="ui field" v-if="clusters.length > 0">
-                    <select class="ui dropdown auto-width" name="clusterId" v-model="clusterId">
-                        <option value="0">[选择集群]</option>
-                        <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
-                    </select>
-                </div>
-                <div class="ui field" v-if="groups.length > 0">
-                    <select class="ui dropdown auto-width" name="groupId" v-model="groupId">
-                        <option value="0">[选择分组]</option>
-                        <option v-for="group in groups" :value="group.id">{{group.name}}</option>
-                    </select>
-                </div>
-                <div class="ui field">
-                    <input type="text" name="keyword" style="width:10em" placeholder="关键词" v-model="keyword"/>
-                </div>
-                <div class="ui field">
-                    <button type="submit" class="ui button">搜索</button>
-                    &nbsp;
-                    <a href="/servers" v-if="clusterId > 0 || groupId > 0 || keyword.length > 0">[清除条件]</a>
-                </div>
-                <div class="ui field" v-if="clusterId == 0 && groupId == 0 && keyword.length == 0 && latestServers.length > 0">
-                    <a href="" @click.prevent="showLatest()">常用<i class="icon angle" :class="{down: !latestVisible, up: latestVisible}"></i> </a>
-                </div>
-            </div>
         </div>
-        <div class="item right">
+        <div class="ui field" v-if="groups.length > 0">
+            <select class="ui dropdown auto-width" name="groupId" v-model="groupId">
+                <option value="0">[选择分组]</option>
+                <option v-for="group in groups" :value="group.id">{{group.name}}</option>
+            </select>
+        </div>
+        <div class="ui field">
+            <input type="text" name="keyword" style="width:10em" placeholder="关键词" v-model="keyword"/>
+        </div>
+        <div class="ui field">
+            <button type="submit" class="ui button">搜索</button>
+            &nbsp;
+            <a href="/servers" v-if="clusterId > 0 || groupId > 0 || keyword.length > 0">[清除条件]</a>
+        </div>
+        <div class="ui field" v-if="clusterId == 0 && groupId == 0 && keyword.length == 0 && latestServers.length > 0">
+            <a href="" @click.prevent="showLatest()">常用<i class="icon angle" :class="{down: !latestVisible, up: latestVisible}"></i> </a>
+        </div>
+        <div class="ui field">
             <checkbox name="checkDNS" :v-value="1" v-model="checkDNS">检查域名解析</checkbox>
         </div>
     </div>