优化界面

web/public/js/components/common/labels.js

@@ -12,4 +12,9 @@ Vue.component("code-label", {
 // tiny标签
 Vue.component("tiny-label", {
 	template: `<span class="ui label tiny" style="margin-bottom: 0.5em"><slot></slot></span>`
-})
+})
+
+Vue.component("tiny-basic-label", {
+	template: `<span class="ui label tiny basic" style="margin-bottom: 0.5em"><slot></slot></span>`
+})
+

web/views/@default/@layout_override.css

@@ -22,4 +22,10 @@ table th.center,
 table td.center {
   text-align: center !important;
 }
+table th.width10 {
+  width: 10em;
+}
+table th.width5 {
+  width: 5em;
+}
 /*# sourceMappingURL=@layout_override.css.map */

web/views/@default/@layout_override.css.map

@@ -1 +1 @@
-{"version":3,"sources":["@layout_override.less"],"names":[],"mappings":"AACA,GAAG,OAAO,SAAU,MAAK,MAAM,QAAS,OAAM;AAAS,GAAG,OAAO,SAAU,MAAK,MAAM,QAAS,QAAO;EACrG,oCAAA;;AAGD,GAAG,OAAO,SAAU,MAAK,QAAS,OAAM;AAAS,GAAG,OAAO,SAAU,MAAK,QAAS,QAAO;EACzF,oCAAA;;AAGD,GAAG,MAAM;EACR,kCAAA;;AAID,IACC;EACC,2BAAA;;AAKF,KAAK;EACJ,sBAAA;;AAGD,KAAK,KAAK;EACT,yBAAA;;AAID,KACC,GAAE;AADH,KACY,GAAE;EACZ,6BAAA","file":"@layout_override.css"}
+{"version":3,"sources":["@layout_override.less"],"names":[],"mappings":"AACA,GAAG,OAAO,SAAU,MAAK,MAAM,QAAS,OAAM;AAAS,GAAG,OAAO,SAAU,MAAK,MAAM,QAAS,QAAO;EACrG,oCAAA;;AAGD,GAAG,OAAO,SAAU,MAAK,QAAS,OAAM;AAAS,GAAG,OAAO,SAAU,MAAK,QAAS,QAAO;EACzF,oCAAA;;AAGD,GAAG,MAAM;EACR,kCAAA;;AAID,IACC;EACC,2BAAA;;AAKF,KAAK;EACJ,sBAAA;;AAGD,KAAK,KAAK;EACT,yBAAA;;AAID,KACC,GAAE;AADH,KACY,GAAE;EACZ,6BAAA;;AAFF,KAKC,GAAE;EACD,WAAA;;AANF,KASC,GAAE;EACD,UAAA","file":"@layout_override.css"}

web/views/@default/@layout_override.less

@@ -32,4 +32,12 @@ table {
 	th.center, td.center {
 		text-align: center !important;
 	}
+
+	th.width10 {
+		width: 10em;
+	}
+
+	th.width5 {
+		width: 5em;
+	}
 }

web/views/@default/clusters/cluster/index.html

@@ -50,11 +50,11 @@
 	<tr>
 		<th class="one wide center">ID</th>
 		<th>节点名称</th>
-		<th class="two wide">所属分组</th>
+		<th class="width10">所属分组</th>
-		<th style="width:10em">IP</th>
+		<th class="width10">IP</th>
-		<th>DNS线路</th>
+		<th class="width10">DNS线路</th>
-		<th style="width:5em" class="center">CPU</th>
+		<th class="width5 center">CPU</th>
-		<th style="width:5em" class="center">内存</th>
+		<th class="width5 center">内存</th>
 		<!--<th>流量</th>
 		<th>连接数</th>-->
 		<th class="two wide center">状态</th>
@@ -65,14 +65,14 @@
 		<td nowrap="" class="center">{{node.id}}</td>
 		<td>{{node.name}}</td>
 		<td>
-			<span v-if="node.group != null" class="ui label tiny">{{node.group.name}}</span>
+			<tiny-basic-label v-if="node.group != null">{{node.group.name}}</tiny-basic-label>
 			<span v-else class="disabled">-</span>
 		</td>
 		<td>
 			<span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
 			<div v-else class="address-box">
 				<div v-for="addr in node.ipAddresses" style="margin-bottom:0.3em">
-					<div class="ui label tiny">{{addr.ip}}
+					<div class="ui label tiny basic">{{addr.ip}}
 						<span class="small" v-if="addr.name.length > 0">（{{addr.name}}<span v-if="!addr.canAccess">，不可访问</span>）</span>
 						<span class="small" v-if="addr.name.length == 0 && !addr.canAccess">（不可访问）</span>
 					</div>
@@ -81,7 +81,9 @@
 		</td>
 		<td>
 			<div v-if="node.dnsRouteNames.length > 0">
-				<div v-for="routeName in node.dnsRouteNames" style="margin-bottom: 0.4em">{{routeName}}</div>
+				<div v-for="routeName in node.dnsRouteNames">
+					<tiny-basic-label>{{routeName}}</tiny-basic-label>
+				</div>
 			</div>
 			<span v-else class="disabled">-</span>
 		</td>

web/views/@default/dns/providers/index.html

@@ -10,9 +10,8 @@
 	<thead>
 		<tr>
 			<th>账号说明</th>
-			<th>服务商</th>
+			<th class="width10">服务商</th>
-			<th class="center">域名</th>
+			<th class="width5 center">域名</th>
-			<th>数据更新时间</th>
 			<th class="two op">操作</th>
 		</tr>
 	</thead>
@@ -23,10 +22,6 @@
 			<span v-if="provider.countDomains == 0" class="disabled">0</span>
 			<span v-else>{{provider.countDomains}}</span>
 		</td>
-		<td>
-			<span v-if="provider.dataUpdatedTime.length > 0">{{provider.dataUpdatedTime}}</span>
-			<span v-else class="disabled">-</span>
-		</td>
 		<td>
 			<a :href="'/dns/providers/provider?providerId=' + provider.id">详情</a> &nbsp; &nbsp; <a href="" @click.prevent="deleteProvider(provider.id)">删除</a>
 		</td>

web/views/@default/dns/providers/provider.html

@@ -52,9 +52,9 @@
 	<thead>
 		<tr>
 			<th>域名</th>
-			<th>线路</th>
+			<th class="width10 center">线路</th>
-			<th>节点域名</th>
+			<th class="width10 center">节点域名</th>
-			<th>服务域名</th>
+			<th class="width10 center">服务域名</th>
 			<th>数据更新时间</th>
 			<th>状态</th>
 			<th class="three op">操作</th>
@@ -62,15 +62,15 @@
 	</thead>
 	<tr v-for="(domain, index) in domains">
 		<td>{{domain.name}}</td>
-		<td>
+		<td class="center">
 			<a href="" v-if="domain.countRoutes > 0" @click.prevent="showRoutes(domain.id)">{{domain.countRoutes}}个</a>
 			<span v-else class="disabled">0个</span>
 		</td>
-		<td>
+		<td class="center">
 			<span v-if="domain.countNodeRecords > 0">{{domain.countNodeRecords}}个</span>
 			<span v-else class="disabled">0个</span>
 		</td>
-		<td>
+		<td class="center">
 			<span v-if="domain.countServerRecords > 0">{{domain.countServerRecords}}个</span>
 			<span v-else class="disabled">0个</span>
 		</td>

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

@@ -38,14 +38,14 @@
 	</thead>
 	<tr v-for="server in servers">
 		<td>{{server.name}}
-			<div style="margin-top:0.2em">
+			<div style="margin-top:0.4em">
-				<tiny-label>{{server.serverTypeName}}</tiny-label>
+				<tiny-basic-label>{{server.serverTypeName}}</tiny-basic-label>
 			</div>
 		</td>
 		<td>
 			<div v-if="server.groups.length > 0">
 				<div  v-for="group in server.groups">
-					<tiny-label>{{group.name}}</tiny-label>
+					<tiny-basic-label>{{group.name}}</tiny-basic-label>
 				</div>
 			</div>
 			<span class="disabled" v-else>-</span>
@@ -62,7 +62,7 @@
 		<td>
 			<span v-if="server.ports.length == 0">-</span>
 			<div v-for="port in server.ports">
-				<tiny-label>{{port.portRange}}<span class="small">（{{port.protocol}}）</span></tiny-label>
+				<tiny-basic-label>{{port.portRange}}<span class="small">（{{port.protocol}}）</span></tiny-basic-label>
 			</div>
 		</td>
 		<td class="center">