优化界面/删除不需要的文件

.gitignore

@@ -2,4 +2,7 @@
 *-plus.sh
 *_plus.html
 *_plus.js
-*@plus.js
+*@plus.js
+*_plus.less
+*_plus.css
+*_plus.css.map

web/public/js/utils.js

@@ -604,6 +604,272 @@ window.teaweb = {
 		chart.setOption(option)
 		chart.resize()
 	},
+	renderGaugeChart: function (options) {
+		let chartId = options.id
+		let name = options.name // 标题
+		let min = options.min // 最小值
+		let max = options.max // 最大值
+		let value = options.value // 当前值
+		let unit = options.unit // 单位
+		let detail = options.detail // 说明文字
+		let color = options.color // 颜色
+		let startAngle = options.startAngle
+		if (startAngle == null) {
+			startAngle = 225
+		}
+		let endAngle = options.endAngle
+		if (endAngle == null) {
+			endAngle = -45
+		}
+
+		color = this.chartColor(color)
+
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+		let chart = this.initChart(chartBox)
+
+		let option = {
+			textStyle: {
+				fontFamily: "Lato,'Helvetica Neue',Arial,Helvetica,sans-serif"
+			},
+			color: color,
+			title: (name != null && name.length > 0) ? {
+				text: name,
+				top: 1,
+				bottom: 0,
+				x: "center",
+				textStyle: {
+					fontSize: 12,
+					fontWeight: "bold",
+					fontFamily: "Lato,'Helvetica Neue',Arial,Helvetica,sans-serif"
+				}
+			} : null,
+			legend: {
+				data: [""]
+			},
+			xAxis: {
+				data: []
+			},
+			yAxis: {},
+			series: [{
+				name: "",
+				type: "gauge",
+				min: min,
+				max: max,
+				startAngle: startAngle,
+				endAngle: endAngle,
+
+				data: [
+					{
+						"name": "",// 不显示名称
+						"value": Math.round(value * 100) / 100
+					}
+				],
+				radius: "100%",
+				center: ["50%", (name != null && name.length > 0) ? "60%" : "50%"],
+
+				splitNumber: 5,
+				splitLine: {
+					length: 4
+				},
+
+				axisLine: {
+					lineStyle: {
+						width: 4
+					}
+				},
+				axisTick: {
+					show: true,
+					length: 2
+				},
+				axisLabel: {
+					formatter: function (v) {
+						return v;
+					},
+					textStyle: {
+						fontSize: 8
+					}
+				},
+				progress: {
+					show: true,
+					width: 4
+				},
+				detail: {
+					formatter: function (v) {
+						return unit;
+					},
+					textStyle: {
+						fontSize: 12,
+						fontWeight: "normal",
+						fontFamily: "Arial,Helvetica,sans-serif",
+						color: "grey"
+						//lineHeight: 16
+					},
+					valueAnimation: true
+				},
+
+				pointer: {
+					width: 2
+				}
+			}],
+
+			grid: {
+				left: -2,
+				right: 0,
+				bottom: 0,
+				top: 0
+			},
+			axisPointer: {
+				show: false
+			},
+			tooltip: {
+				formatter: 'X:{b0} Y:{c0}',
+				show: false
+			},
+			animation: true
+		};
+
+		chart.setOption(option)
+	},
+
+	renderPercentChart: function (options) {
+		let chartId = options.id
+		let color = this.chartColor(options.color)
+		let value = options.value
+		let name = options.name
+		let total = options.total
+		if (total == null) {
+			total = 100
+		}
+		let unit = options.unit
+		if (unit == null) {
+			unit = ""
+		}
+
+		let max = options.max
+		if (max != null && max <= value) {
+			max = null
+		}
+		let maxColor = this.chartColor(options.maxColor)
+		let maxName = options.maxName
+
+		let chartBox = document.getElementById(chartId)
+		if (chartBox == null) {
+			return
+		}
+		let chart = this.initChart(chartBox)
+
+		let option = {
+			tooltip: {
+				formatter: "{a} <br/>{b} : {c}" + unit
+			},
+			series: [
+				{
+					name: name,
+					max: total,
+					type: "gauge",
+					radius: "100%",
+					detail: {
+						formatter: "{value}",
+						show: false,
+						valueAnimation: true
+					},
+					data: [
+						{
+							value: value,
+							name: name
+						}
+					],
+					pointer: {
+						show: false
+					},
+					splitLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: true,
+						lineStyle: {
+							width: 4
+						}
+					},
+					progress: {
+						show: true,
+						width: 4,
+						itemStyle: {
+							color: color
+						}
+					},
+					splitNumber: {
+						show: false
+					},
+					title: {
+						show: false
+					},
+					startAngle: 270,
+					endAngle: -90
+				}
+			]
+		}
+
+		if (max != null) {
+			option.series.push({
+				name: maxName,
+				max: total,
+				type: "gauge",
+				radius: "100%",
+				detail: {
+					formatter: "{value}",
+					show: false,
+					valueAnimation: true
+				},
+				data: [
+					{
+						value: max,
+						name: maxName
+					}
+				],
+				pointer: {
+					show: false
+				},
+				splitLine: {
+					show: false
+				},
+				axisTick: {
+					show: false
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						width: 4
+					}
+				},
+				progress: {
+					show: true,
+					width: 4,
+					itemStyle: {
+						color: maxColor,
+						opacity: 0.3
+					}
+				},
+				splitNumber: {
+					show: false
+				},
+				title: {
+					show: false
+				},
+				startAngle: 270,
+				endAngle: -90
+			})
+		}
+
+		chart.setOption(option)
+	},
+
 	xRotation: function (chart, names) {
 		let chartWidth = chart.getWidth()
 		let width = 0
@@ -616,11 +882,17 @@ window.teaweb = {
 
 		return [40, -20]
 	},
+	chartMap: {}, // dom id => chart
 	initChart: function (dom) {
+		let domId = dom.getAttribute("id")
+		if (domId != null && domId.length > 0 && typeof (this.chartMap[domId]) == "object") {
+			return this.chartMap[domId]
+		}
 		let instance = echarts.init(dom)
 		window.addEventListener("resize", function () {
 			instance.resize()
 		})
+		this.chartMap[domId] = instance
 		return instance
 	},
 	encodeHTML: function (s) {
@@ -629,6 +901,25 @@ window.teaweb = {
 		s = s.replace(/>/g, "&gt;")
 		s = s.replace(/"/, "&quot;")
 		return s
+	},
+	chartColor: function (color) {
+		if (color == null || color.length == 0) {
+			color = "#5470c6"
+		}
+
+		if (color == "red") {
+			color = "#ee6666"
+		}
+		if (color == "yellow") {
+			color = "#fac858"
+		}
+		if (color == "blue") {
+			color = "#5470c6"
+		}
+		if (color == "green") {
+			color = "#3ba272"
+		}
+		return color
 	}
 }
 

web/views/@default/@grids.css

@@ -0,0 +1,37 @@
+.grid.counter-chart {
+  margin-top: 1.5em !important;
+  margin-left: 0.4em !important;
+}
+.grid.counter-chart .column {
+  margin-bottom: 1em;
+  font-size: 0.85em;
+  text-align: center;
+  position: relative;
+  border: 1px rgba(0, 0, 0, 0.1) solid;
+  border-right: 0;
+}
+.grid.counter-chart .column div.value {
+  margin-top: 1.5em;
+  font-weight: normal;
+}
+.grid.counter-chart .column div.value span {
+  font-size: 1.5em;
+  margin-right: 0.2em;
+}
+.grid.counter-chart .column.with-border {
+  border-right: 1px rgba(0, 0, 0, 0.1) solid;
+}
+.grid.counter-chart h4 {
+  font-size: 1em;
+  text-align: left;
+}
+.grid.counter-chart h4 a {
+  display: none;
+}
+.grid.counter-chart .column:hover {
+  background: rgba(0, 0, 0, 0.1) !important;
+}
+.grid.counter-chart .column:hover a {
+  display: inline;
+}
+/*# sourceMappingURL=@grids.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@grids.less"],"names":[],"mappings":"AAAA,KAAK;EACJ,iBAAA;EACA,kBAAA;;AAFD,KAAK,cAIJ;EACC,kBAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;EACA,oCAAA;EACA,eAAA;;AAVF,KAAK,cAIJ,QAQC,IAAG;EACF,iBAAA;EACA,mBAAA;;AAdH,KAAK,cAIJ,QAQC,IAAG,MAIF;EACC,gBAAA;EACA,mBAAA;;AAlBJ,KAAK,cAuBJ,QAAO;EACN,0CAAA;;AAxBF,KAAK,cA2BJ;EAKC,cAAA;EACA,gBAAA;;AAjCF,KAAK,cA2BJ,GACC;EACC,aAAA;;AA7BH,KAAK,cAoCJ,QAAO;EACN,8BAAA;;AArCF,KAAK,cAoCJ,QAAO,MAGN;EACC,eAAA","file":"@grids.css"}

web/views/@default/@grids.less

@@ -0,0 +1,44 @@
+.grid.counter-chart {
+	margin-top: 1.5em !important;
+	margin-left: 0.4em !important;
+
+	.column {
+		margin-bottom: 1em;
+		font-size: 0.85em;
+		text-align: center;
+		position: relative;
+		border: 1px rgba(0, 0, 0, .1) solid;
+		border-right: 0;
+
+		div.value {
+			margin-top: 1.5em;
+			font-weight: normal;
+
+			span {
+				font-size: 1.5em;
+				margin-right: 0.2em;
+			}
+		}
+	}
+
+	.column.with-border {
+		border-right: 1px rgba(0, 0, 0, .1) solid;
+	}
+
+	h4 {
+		a {
+			display: none;
+		}
+
+		font-size: 1.0em;
+		text-align: left;
+	}
+
+	.column:hover {
+		background: rgba(0, 0, 0, .05)!important;
+
+		a {
+			display: inline;
+		}
+	}
+}

web/views/@default/@layout.css

@@ -104,6 +104,42 @@ body.expanded .right-box {
 .narrow-scrollbar::-webkit-scrollbar {
   width: 4px;
 }
+.grid.counter-chart {
+  margin-top: 1.5em !important;
+  margin-left: 0.4em !important;
+}
+.grid.counter-chart .column {
+  margin-bottom: 1em;
+  font-size: 0.85em;
+  text-align: center;
+  position: relative;
+  border: 1px rgba(0, 0, 0, 0.1) solid;
+  border-right: 0;
+}
+.grid.counter-chart .column div.value {
+  margin-top: 1.5em;
+  font-weight: normal;
+}
+.grid.counter-chart .column div.value span {
+  font-size: 1.5em;
+  margin-right: 0.2em;
+}
+.grid.counter-chart .column.with-border {
+  border-right: 1px rgba(0, 0, 0, 0.1) solid;
+}
+.grid.counter-chart h4 {
+  font-size: 1em;
+  text-align: left;
+}
+.grid.counter-chart h4 a {
+  display: none;
+}
+.grid.counter-chart .column:hover {
+  background: rgba(0, 0, 0, 0.05) !important;
+}
+.grid.counter-chart .column:hover a {
+  display: inline;
+}
 /** 通用 **/
 .clear {
   clear: both;
@@ -237,7 +273,7 @@ p.margin {
 .main-menu .ui.menu .item.expend .subtitle {
   display: block;
   font-size: 10px;
-  padding-left: 2.0em;
+  padding-left: 2em;
   margin-top: 0.5em;
   color: grey;
 }
@@ -272,7 +308,7 @@ p.margin {
 }
 /** 扩展UI **/
 .field.text {
-  padding: .5em;
+  padding: 0.5em;
 }
 .form .fields:not(.inline) .field {
   margin-bottom: 0.5em !important;
@@ -730,7 +766,7 @@ var.dash {
   opacity: 0.1;
 }
 .sortable-drag {
-  opacity: 1.0;
+  opacity: 1;
 }
 .icon.handle {
   cursor: pointer;

web/views/@default/@layout.less

@@ -1,4 +1,5 @@
 @import "./@left_menu";
+@import "./@grids";
 
 /** 通用 **/
 .clear {

web/views/@default/clusters/cluster/boards/index_plus.css

@@ -1,30 +1,6 @@
 .message.loading {
   padding: 1.5em;
 }
-.grid {
-  margin-top: 2em !important;
-  margin-left: 2em !important;
-}
-.grid .column {
-  margin-bottom: 2em;
-  border-right: 1px #eee solid;
-}
-.grid .column div.value {
-  margin-top: 1.5em;
-}
-.grid .column div.value span {
-  font-size: 2em;
-  margin-right: 0.2em;
-}
-.grid .column.no-border {
-  border-right: 0;
-}
-.grid h4 a {
-  display: none;
-}
-.grid .column:hover a {
-  display: inline;
-}
 .chart-box {
   height: 14em;
 }
@@ -32,4 +8,4 @@ h4 span {
   font-size: 0.8em;
   color: grey;
 }
-/*# sourceMappingURL=index.css.map */
+/*# sourceMappingURL=index_plus.css.map */

web/views/@default/clusters/cluster/boards/index_plus.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,QAAQ;EACP,cAAA;;AAGD;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"index.css"}
+{"version":3,"sources":["index_plus.less"],"names":[],"mappings":"AAAA,QAAQ;EACP,cAAA;;AAGD;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"index_plus.css"}

web/views/@default/clusters/cluster/boards/index_plus.less

@@ -2,41 +2,6 @@
 	padding: 1.5em;
 }
 
-.grid {
-	margin-top: 2em !important;
-	margin-left: 2em !important;
-
-	.column {
-		margin-bottom: 2em;
-		border-right: 1px #eee solid;
-
-		div.value {
-			margin-top: 1.5em;
-
-			span {
-				font-size: 2em;
-				margin-right: 0.2em;
-			}
-		}
-	}
-
-	.column.no-border {
-		border-right: 0;
-	}
-
-	h4 {
-		a {
-			display: none;
-		}
-	}
-
-	.column:hover {
-		a {
-			display: inline;
-		}
-	}
-}
-
 .chart-box {
 	height: 14em;
 }

web/views/@default/clusters/cluster/node/boards/index_plus.css

@@ -1,30 +1,6 @@
 .message.loading {
   padding: 1.5em;
 }
-.grid {
-  margin-top: 2em !important;
-  margin-left: 2em !important;
-}
-.grid .column {
-  margin-bottom: 2em;
-  border-right: 1px #eee solid;
-}
-.grid .column div.value {
-  margin-top: 1.5em;
-}
-.grid .column div.value span {
-  font-size: 2em;
-  margin-right: 0.2em;
-}
-.grid .column.no-border {
-  border-right: 0;
-}
-.grid h4 a {
-  display: none;
-}
-.grid .column:hover a {
-  display: inline;
-}
 .chart-box {
   height: 14em;
 }
@@ -32,4 +8,4 @@ h4 span {
   font-size: 0.8em;
   color: grey;
 }
-/*# sourceMappingURL=index.css.map */
+/*# sourceMappingURL=index_plus.css.map */

web/views/@default/clusters/cluster/node/boards/index_plus.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,QAAQ;EACP,cAAA;;AAGD;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"index.css"}
+{"version":3,"sources":["index_plus.less"],"names":[],"mappings":"AAAA,QAAQ;EACP,cAAA;;AAGD;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"index_plus.css"}

web/views/@default/clusters/cluster/node/boards/index_plus.less

@@ -2,41 +2,6 @@
 	padding: 1.5em;
 }
 
-.grid {
-	margin-top: 2em !important;
-	margin-left: 2em !important;
-
-	.column {
-		margin-bottom: 2em;
-		border-right: 1px #eee solid;
-
-		div.value {
-			margin-top: 1.5em;
-
-			span {
-				font-size: 2em;
-				margin-right: 0.2em;
-			}
-		}
-	}
-
-	.column.no-border {
-		border-right: 0;
-	}
-
-	h4 {
-		a {
-			display: none;
-		}
-	}
-
-	.column:hover {
-		a {
-			display: inline;
-		}
-	}
-}
-
 .chart-box {
 	height: 14em;
 }

web/views/@default/dashboard/boards/dns_plus.css

@@ -3,31 +3,7 @@
   right: 1em;
   top: 1.8em;
 }
-.grid {
-  margin-top: 2em !important;
-  margin-left: 2em !important;
-}
-.grid .column {
-  margin-bottom: 2em;
-  border-right: 1px #eee solid;
-}
-.grid .column div.value {
-  margin-top: 1.5em;
-}
-.grid .column div.value span {
-  font-size: 2em;
-  margin-right: 0.2em;
-}
-.grid .column.no-border {
-  border-right: 0;
-}
-.grid h4 a {
-  display: none;
-}
-.grid .column:hover a {
-  display: inline;
-}
 .chart-box {
   height: 14em;
 }
-/*# sourceMappingURL=dns.css.map */
+/*# sourceMappingURL=dns_plus.css.map */

web/views/@default/dashboard/boards/dns_plus.css.map

@@ -1 +1 @@
-{"version":3,"sources":["dns.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA","file":"dns.css"}
+{"version":3,"sources":["dns_plus.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,YAAA","file":"dns_plus.css"}

web/views/@default/dashboard/boards/dns_plus.less

@@ -6,41 +6,6 @@
 	}
 }
 
-.grid {
-	margin-top: 2em !important;
-	margin-left: 2em !important;
-
-	.column {
-		margin-bottom: 2em;
-		border-right: 1px #eee solid;
-
-		div.value {
-			margin-top: 1.5em;
-
-			span {
-				font-size: 2em;
-				margin-right: 0.2em;
-			}
-		}
-	}
-
-	.column.no-border {
-		border-right: 0;
-	}
-
-	h4 {
-		a {
-			display: none;
-		}
-	}
-
-	.column:hover {
-		a {
-			display: inline;
-		}
-	}
-}
-
 .chart-box {
 	height: 14em;
 }

web/views/@default/dashboard/boards/index_plus.css

@@ -3,29 +3,18 @@
   right: 1em;
   top: 2em;
 }
-.grid {
+.grid.realtime-chart {
-  margin-top: 2em !important;
+  margin-left: 0.4em !important;
-  margin-left: 2em !important;
 }
-.grid .column {
+.grid.realtime-chart .column {
-  margin-bottom: 2em;
+  margin-bottom: 1em;
-  border-right: 1px #eee solid;
+  border-right: 1px rgba(0, 0, 0, 0.1) solid;
 }
-.grid .column div.value {
+.grid.realtime-chart .column.no-border {
-  margin-top: 1.5em;
-}
-.grid .column div.value span {
-  font-size: 2em;
-  margin-right: 0.2em;
-}
-.grid .column.no-border {
   border-right: 0;
 }
-.grid h4 a {
+.grid.realtime-chart .chart {
-  display: none;
+  height: 10em;
-}
-.grid .column:hover a {
-  display: inline;
 }
 .chart-box {
   height: 14em;
@@ -40,4 +29,33 @@ h4 span {
   font-size: 0.8em;
   color: grey;
 }
-/*# sourceMappingURL=index.css.map */
+.percent-box {
+  position: relative;
+  text-align: center;
+}
+.percent-box .detail {
+  position: absolute;
+  top: 50%;
+  margin-top: -2em;
+  left: 0;
+  right: 0;
+  font-size: 0.8em;
+}
+.percent-box .detail .label {
+  color: grey;
+}
+.percent-box .detail .value {
+  font-size: 1.2em;
+}
+.percent-box .summary {
+  color: grey;
+  margin-top: 0.5em;
+}
+.percent-box .summary span {
+  font-size: 0.8em;
+  padding-left: 0.2em;
+}
+.percent-box .summary a {
+  font-size: 0.8em;
+}
+/*# sourceMappingURL=index_plus.css.map */

web/views/@default/dashboard/boards/index_plus.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,EACC,MAAK;EACJ,kBAAA;EACA,UAAA;EACA,QAAA;;AAKH;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD;EACC,YAAA;;AADD,gBAGC,IAAG;EACF,UAAA;;AAIF,EACC;EACC,gBAAA;EACA,WAAA","file":"index.css"}
+{"version":3,"sources":["index_plus.less"],"names":[],"mappings":"AAAA,GAAG,QACF,EACC,MAAK;EACJ,kBAAA;EACA,UAAA;EACA,QAAA;;AAKH,KAAK;EACJ,kBAAA;;AADD,KAAK,eAGJ;EACC,kBAAA;EACA,0CAAA;;AALF,KAAK,eAQJ,QAAO;EACN,eAAA;;AATF,KAAK,eAYJ;EACC,YAAA;;AAIF;EACC,YAAA;;AAGD;EACC,YAAA;;AADD,gBAGC,IAAG;EACF,UAAA;;AAIF,EACC;EACC,gBAAA;EACA,WAAA;;AAIF;EACC,kBAAA;EACA,kBAAA;;AAFD,YAIC;EACC,kBAAA;EACA,QAAA;EACA,gBAAA;EACA,OAAA;EACA,QAAA;EACA,gBAAA;;AAVF,YAIC,QAQC;EACC,WAAA;;AAbH,YAIC,QAYC;EACC,gBAAA;;AAjBH,YAqBC;EACC,WAAA;EACA,iBAAA;;AAvBF,YAqBC,SAIC;EACC,gBAAA;EACA,mBAAA;;AA3BH,YAqBC,SASC;EACC,gBAAA","file":"index_plus.css"}

web/views/@default/dashboard/boards/index_plus.less

@@ -8,38 +8,20 @@
 	}
 }
 
-.grid {
+.grid.realtime-chart {
-	margin-top: 2em !important;
+	margin-left: 0.4em !important;
-	margin-left: 2em !important;
 
 	.column {
-		margin-bottom: 2em;
+		margin-bottom: 1em;
-		border-right: 1px #eee solid;
+		border-right: 1px rgba(0, 0, 0, .1) solid;
-
-		div.value {
-			margin-top: 1.5em;
-
-			span {
-				font-size: 2em;
-				margin-right: 0.2em;
-			}
-		}
 	}
 
 	.column.no-border {
 		border-right: 0;
 	}
 
-	h4 {
+	.chart {
-		a {
+		height: 10em;
-			display: none;
-		}
-	}
-
-	.column:hover {
-		a {
-			display: inline;
-		}
 	}
 }
 
@@ -60,4 +42,40 @@ h4 {
 		font-size: 0.8em;
 		color: grey;
 	}
+}
+
+.percent-box {
+	position: relative;
+	text-align: center;
+
+	.detail {
+		position: absolute;
+		top: 50%;
+		margin-top: -2em;
+		left: 0;
+		right: 0;
+		font-size: 0.8em;
+
+		.label {
+			color: grey;
+		}
+
+		.value {
+			font-size: 1.2em;
+		}
+	}
+
+	.summary {
+		color: grey;
+		margin-top: 0.5em;
+
+		span {
+			font-size: 0.8em;
+			padding-left: 0.2em;
+		}
+
+		a {
+			font-size: 0.8em;
+		}
+	}
 }

web/views/@default/dashboard/boards/user_plus.css

@@ -3,30 +3,6 @@
   right: 1em;
   top: 1.8em;
 }
-.grid {
-  margin-top: 2em !important;
-  margin-left: 2em !important;
-}
-.grid .column {
-  margin-bottom: 2em;
-  border-right: 1px #eee solid;
-}
-.grid .column div.value {
-  margin-top: 1.5em;
-}
-.grid .column div.value span {
-  font-size: 2em;
-  margin-right: 0.2em;
-}
-.grid .column.no-border {
-  border-right: 0;
-}
-.grid h4 a {
-  display: none;
-}
-.grid .column:hover a {
-  display: inline;
-}
 .chart-box {
   height: 14em;
 }
@@ -34,4 +10,4 @@ h4 span {
   font-size: 0.8em;
   color: grey;
 }
-/*# sourceMappingURL=user.css.map */
+/*# sourceMappingURL=user_plus.css.map */

web/views/@default/dashboard/boards/user_plus.css.map

@@ -1 +1 @@
-{"version":3,"sources":["user.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"user.css"}
+{"version":3,"sources":["user_plus.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,YAAA;;AAGD,EACC;EACC,gBAAA;EACA,WAAA","file":"user_plus.css"}

web/views/@default/dashboard/boards/user_plus.less

@@ -6,41 +6,6 @@
 	}
 }
 
-.grid {
-	margin-top: 2em !important;
-	margin-left: 2em !important;
-
-	.column {
-		margin-bottom: 2em;
-		border-right: 1px #eee solid;
-
-		div.value {
-			margin-top: 1.5em;
-
-			span {
-				font-size: 2em;
-				margin-right: 0.2em;
-			}
-		}
-	}
-
-	.column.no-border {
-		border-right: 0;
-	}
-
-	h4 {
-		a {
-			display: none;
-		}
-	}
-
-	.column:hover {
-		a {
-			display: inline;
-		}
-	}
-}
-
 .chart-box {
 	height: 14em;
 }

web/views/@default/dashboard/boards/waf_plus.css

@@ -3,30 +3,6 @@
   right: 1em;
   top: 1.8em;
 }
-.grid {
-  margin-top: 2em !important;
-  margin-left: 2em !important;
-}
-.grid .column {
-  margin-bottom: 2em;
-  border-right: 1px #eee solid;
-}
-.grid .column div.value {
-  margin-top: 1.5em;
-}
-.grid .column div.value span {
-  font-size: 2em;
-  margin-right: 0.2em;
-}
-.grid .column.no-border {
-  border-right: 0;
-}
-.grid h4 a {
-  display: none;
-}
-.grid .column:hover a {
-  display: inline;
-}
 .chart-box {
   height: 14em;
 }
@@ -44,4 +20,4 @@ h4.header a {
   font-size: 0.85em;
   float: right;
 }
-/*# sourceMappingURL=waf.css.map */
+/*# sourceMappingURL=waf_plus.css.map */

web/views/@default/dashboard/boards/waf_plus.css.map

@@ -1 +1 @@
-{"version":3,"sources":["waf.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA;;AAGD;EACC,YAAA;;AADD,gBAGC,IAAG;EACF,UAAA;;AAIF;EACC,gBAAA;EACA,YAAA;;AAGD,EAAE,OACD;EACC,iBAAA;EACA,YAAA","file":"waf.css"}
+{"version":3,"sources":["waf_plus.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,YAAA;;AAGD;EACC,YAAA;;AADD,gBAGC,IAAG;EACF,UAAA;;AAIF;EACC,gBAAA;EACA,YAAA;;AAGD,EAAE,OACD;EACC,iBAAA;EACA,YAAA","file":"waf_plus.css"}

web/views/@default/dashboard/boards/waf_plus.less

@@ -6,41 +6,6 @@
 	}
 }
 
-.grid {
-	margin-top: 2em !important;
-	margin-left: 2em !important;
-
-	.column {
-		margin-bottom: 2em;
-		border-right: 1px #eee solid;
-
-		div.value {
-			margin-top: 1.5em;
-
-			span {
-				font-size: 2em;
-				margin-right: 0.2em;
-			}
-		}
-	}
-
-	.column.no-border {
-		border-right: 0;
-	}
-
-	h4 {
-		a {
-			display: none;
-		}
-	}
-
-	.column:hover {
-		a {
-			display: inline;
-		}
-	}
-}
-
 .chart-box {
 	height: 14em;
 }

web/views/@default/ns/domains/keys/createPopup.html

@@ -1,40 +0,0 @@
-{$layout "layout_popup"}
-
-<h3>创建密钥</h3>
-<form class="ui form" data-tea-action="$" data-tea-success="success">
-    <csrf-token></csrf-token>
-    <input type="hidden" name="domainId" :value="domainId"/>
-    <table class="ui table definition selectable">
-        <tr>
-            <td class="title">密钥名称 *</td>
-            <td>
-                <input type="text" name="name" ref="focus"/>
-            </td>
-        </tr>
-        <tr>
-            <td>算法 *</td>
-            <td>
-                <select class="ui dropdown auto-width" name="algo">
-                    <option value="">[选择算法]</option>
-                    <option v-for="algo in algorithms" :value="algo.code">{{algo.name}}</option>
-                </select>
-            </td>
-        </tr>
-        <tr>
-            <td>密码 *</td>
-            <td>
-                <div style="margin-bottom: 1em">
-                    <radio name="secretType" value="clear" :v-value="'clear'" v-model="secretType">明文密码</radio>
-                    &nbsp; &nbsp;
-                    <radio name="secretType" value="base64" :v-value="'base64'" v-model="secretType">Base64密码</radio>
-                </div>
-                <textarea name="secret" maxlength="256" v-model="secret" rows="3"></textarea>
-                <p class="comment" v-if="secretType == 'clear'">客户端需要将明文转换为BASE64使用。</p>
-                <div style="margin-top: 1em">
-                    <a href="" @click.prevent="generateSecret">[随机生成]</a>
-                </div>
-            </td>
-        </tr>
-    </table>
-    <submit-btn></submit-btn>
-</form>

web/views/@default/ns/domains/keys/createPopup.js

@@ -1,20 +0,0 @@
-Tea.context(function () {
-	this.secretType = "clear"
-	this.secret = ""
-
-	this.$delay(function () {
-		this.$watch("secretType", function () {
-			this.secret = ""
-		})
-	})
-
-	this.generateSecret = function () {
-		this.$post(".generateSecret")
-			.params({
-				secretType: this.secretType
-			})
-			.success(function (resp) {
-				this.secret = resp.data.secret
-			})
-	}
-})

web/views/@default/ns/domains/keys/index.html

@@ -1,38 +0,0 @@
-{$layout}
-{$template "../domain_menu"}
-
-<second-menu>
-    <menu-item @click.prevent="createKey">[创建密钥]</menu-item>
-</second-menu>
-
-<tip-message-box>这里的密钥可以用于TSIG通讯校验。</tip-message-box>
-
-<p class="comment" v-if="keys.length == 0">暂时还没有密钥。</p>
-
-<table class="ui table celled selectable" v-if="keys.length > 0">
-    <thead>
-        <tr>
-            <th class="three wide">密钥名称</th>
-            <th class="three wide">算法</th>
-            <th>密码</th>
-            <th class="two wide">密码类型</th>
-            <th class="two wide">状态</th>
-            <th class="two op">操作</th>
-        </tr>
-    </thead>
-    <tr v-for="key in keys">
-        <td>{{key.name}}</td>
-        <td>{{key.algoName}}</td>
-        <td>{{key.secret}}</td>
-        <td>{{key.secretTypeName}}</td>
-        <td>
-            <label-on :v-is-on="key.isOn"></label-on>
-        </td>
-        <td>
-            <a href="" @click.prevent="updateKey(key.id)">修改</a> &nbsp;
-            <a href="" @click.prevent="deleteKey(key.id)">删除</a>
-        </td>
-    </tr>
-</table>
-
-<div class="page" v-html="page"></div>

web/views/@default/ns/domains/keys/index.js

@@ -1,31 +0,0 @@
-Tea.context(function () {
-	this.createKey = function () {
-		teaweb.popup(Tea.url(".createPopup?domainId=" + this.domain.id), {
-			height: "24em",
-			callback: function () {
-				teaweb.successRefresh("保存成功")
-			}
-		})
-	}
-
-	this.updateKey = function (keyId) {
-		teaweb.popup(Tea.url(".updatePopup?keyId=" + keyId), {
-			height: "27em",
-			callback: function () {
-				teaweb.successRefresh("保存成功")
-			}
-		})
-	}
-
-	this.deleteKey = function (keyId) {
-		teaweb.confirm("确定要删除这个密钥吗？", function () {
-			this.$post(".delete")
-				.params({
-					keyId: keyId
-				})
-				.success(function () {
-					teaweb.successRefresh("删除成功")
-				})
-		})
-	}
-})

web/views/@default/ns/domains/keys/updatePopup.html

@@ -1,46 +0,0 @@
-{$layout "layout_popup"}
-
-<h3>修改密钥</h3>
-<form class="ui form" data-tea-action="$" data-tea-success="success">
-    <csrf-token></csrf-token>
-    <input type="hidden" name="keyId" :value="key.id"/>
-    <table class="ui table definition selectable">
-        <tr>
-            <td class="title">密钥名称 *</td>
-            <td>
-                <input type="text" name="name" ref="focus" v-model="key.name"/>
-            </td>
-        </tr>
-        <tr>
-            <td>算法 *</td>
-            <td>
-                <select class="ui dropdown auto-width" name="algo" v-model="key.algo">
-                    <option value="">[选择算法]</option>
-                    <option v-for="algo in algorithms" :value="algo.code">{{algo.name}}</option>
-                </select>
-            </td>
-        </tr>
-        <tr>
-            <td>密码 *</td>
-            <td>
-                <div style="margin-bottom: 1em">
-                    <radio name="secretType" value="clear" :v-value="'clear'" v-model="secretType">明文密码</radio>
-                    &nbsp; &nbsp;
-                    <radio name="secretType" value="base64" :v-value="'base64'" v-model="secretType">Base64密码</radio>
-                </div>
-                <textarea name="secret" maxlength="256" v-model="secret" rows="3"></textarea>
-                <p class="comment" v-if="secretType == 'clear'">客户端需要将明文转换为BASE64使用。</p>
-                <div style="margin-top: 1em">
-                    <a href="" @click.prevent="generateSecret">[随机生成]</a>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <td>是否启用</td>
-            <td>
-                <checkbox name="isOn" v-model="key.isOn"></checkbox>
-            </td>
-        </tr>
-    </table>
-    <submit-btn></submit-btn>
-</form>

web/views/@default/ns/domains/keys/updatePopup.js

@@ -1,20 +0,0 @@
-Tea.context(function () {
-	this.secretType = this.key.secretType
-	this.secret = this.key.secret
-
-	this.$delay(function () {
-		this.$watch("secretType", function () {
-			this.secret = ""
-		})
-	})
-
-	this.generateSecret = function () {
-		this.$post(".generateSecret")
-			.params({
-				secretType: this.secretType
-			})
-			.success(function (resp) {
-				this.secret = resp.data.secret
-			})
-	}
-})

web/views/@default/ns/domains/records/createPopup.html

@@ -1,54 +0,0 @@
-{$layout "layout_popup"}
-
-<h3>创建记录</h3>
-<form class="ui form" data-tea-action="$" data-tea-success="success">
-    <csrf-token></csrf-token>
-    <input type="hidden" name="domainId" :value="domain.id"/>
-    <table class="ui table definition selectable">
-        <tr>
-            <td class="title">记录名</td>
-            <td>
-                <div class="ui input right labeled">
-                    <input type="text" name="name" ref="focus"/>
-                    <span class="ui label">.{{domain.name}}</span>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <td>记录类型</td>
-            <td>
-                <select class="ui dropdown auto-width" name="type" v-model="type" @change="changeType">
-                    <option v-for="t in types" :value="t.type">{{t.type}}</option>
-                </select>
-                <p class="comment">{{typeDescription}}</p>
-            </td>
-        </tr>
-        <tr>
-            <td>记录值</td>
-            <td>
-                <input type="text" name="value" maxlength="512"/>
-            </td>
-        </tr>
-        <tr>
-            <td>TTL</td>
-            <td>
-                <select class="ui dropdown auto-width" name="ttl">
-                    <option v-for="v in ttlValues" :value="v.value">{{v.name}}</option>
-                </select>
-            </td>
-        </tr>
-        <tr>
-            <td>线路</td>
-            <td>
-                <ns-routes-selector></ns-routes-selector>
-            </td>
-        </tr>
-        <tr>
-            <td>备注</td>
-            <td>
-                <textarea rows="2" name="description"></textarea>
-            </td>
-        </tr>
-    </table>
-    <submit-btn></submit-btn>
-</form>

web/views/@default/ns/domains/records/createPopup.js

@@ -1,15 +0,0 @@
-Tea.context(function () {
-	this.type = "A"
-	this.typeDescription = ""
-
-	this.changeType = function () {
-		let that = this
-		this.types.forEach(function (v) {
-			if (v.type == that.type) {
-				that.typeDescription = v.description
-			}
-		})
-	}
-
-	this.changeType()
-})

web/views/@default/ns/domains/records/index.html

@@ -1,62 +0,0 @@
-{$layout}
-{$template "../domain_menu"}
-
-<second-menu>
-    <menu-item @click.prevent="createRecord">[创建记录]</menu-item>
-</second-menu>
-
-<form class="ui form" method="get" action="/ns/domains/records">
-    <input type="hidden" name="domainId" :value="domain.id"/>
-    <div class="ui fields inline">
-        <div class="ui field">
-            <select class="ui dropdown" name="type" v-model="type">
-                <option value="">[记录类型]</option>
-                <option v-for="t in types" :value="t.type">{{t.type}}</option>
-            </select>
-        </div>
-        <div class="ui field">
-            <ns-route-selector :v-route-code="routeCode"></ns-route-selector>
-        </div>
-        <div class="ui field">
-            <input type="text" placeholder="记录名、备注..." name="keyword" v-model="keyword"/>
-        </div>
-        <div class="ui field">
-            <button type="submit" class="ui button">搜索</button>
-        </div>
-    </div>
-</form>
-
-<p class="comment" v-if="records.length == 0">暂时还没有记录。</p>
-<table class="ui table selectable celled" v-if="records.length > 0">
-    <thead>
-        <tr>
-            <th>记录名</th>
-            <th>记录类型</th>
-            <th>记录值</th>
-            <th>TTL</th>
-            <th>线路</th>
-            <th>备注</th>
-            <th class="two wide">状态</th>
-            <th class="two op">操作</th>
-        </tr>
-    </thead>
-    <tr v-for="record in records">
-        <td><keyword :v-word="keyword">{{record.name}}</keyword></td>
-        <td>{{record.type}}</td>
-        <td><keyword :v-word="keyword">{{record.value}}</keyword></td>
-        <td>{{formatTTL(record.ttl)}}</td>
-        <td>
-            <div v-for="route in record.routes" style="margin-top: 0.3em; margin-bottom: 0.3em">
-                <span class="ui label basic text tiny">{{route.name}}</span>
-            </div>
-        </td>
-        <td><keyword :v-word="keyword">{{record.description}}</keyword></td>
-        <td><label-on :v-is-on="record.isOn"></label-on></td>
-        <td>
-            <a href="" @click.prevent="updateRecord(record.id)">修改</a> &nbsp;
-            <a href="" @click.prevent="deleteRecord(record.id)">删除</a>
-        </td>
-    </tr>
-</table>
-
-<div class="page" v-html="page"></div>

web/views/@default/ns/domains/records/index.js

@@ -1,52 +0,0 @@
-Tea.context(function () {
-	this.createRecord = function () {
-		teaweb.popup("/ns/domains/records/createPopup?domainId=" + this.domain.id, {
-			height: "33em",
-			callback: function () {
-				teaweb.success("保存成功", function () {
-					teaweb.reload()
-				})
-			}
-		})
-	}
-
-	this.updateRecord = function (recordId) {
-		teaweb.popup("/ns/domains/records/updatePopup?recordId=" + recordId, {
-			height: "33em",
-			callback: function () {
-				teaweb.success("保存成功", function () {
-					teaweb.reload()
-				})
-			}
-		})
-	}
-
-	this.deleteRecord = function (recordId) {
-		let that = this
-		teaweb.confirm("确定要删除此记录吗？", function () {
-			that.$post(".delete")
-				.params({
-					recordId: recordId
-				})
-				.success(function () {
-					teaweb.reload()
-				})
-		})
-	}
-
-	this.formatTTL = function (ttl) {
-		if (ttl % 86400 == 0) {
-			let days = ttl / 86400
-			return days + "天"
-		}
-		if (ttl % 3600 == 0) {
-			let hours = ttl / 3600
-			return hours + "小时"
-		}
-		if (ttl % 60 == 0) {
-			let minutes = ttl / 60
-			return minutes + "分钟"
-		}
-		return ttl + "秒"
-	}
-})

web/views/@default/ns/domains/records/updatePopup.html

@@ -1,65 +0,0 @@
-{$layout "layout_popup"}
-
-<h3>修改记录</h3>
-<form class="ui form" data-tea-action="$" data-tea-success="success">
-    <csrf-token></csrf-token>
-    <input type="hidden" name="recordId" :value="record.id"/>
-    <table class="ui table definition selectable">
-        <tr>
-            <td class="title">记录名</td>
-            <td>
-                <div class="ui input right labeled">
-                    <input type="text" name="name" ref="focus" v-model="record.name"/>
-                    <span class="ui label">.{{domain.name}}</span>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <td>记录类型</td>
-            <td>
-                <select class="ui dropdown auto-width" name="type" v-model="type" @change="changeType">
-                    <option v-for="t in types" :value="t.type">{{t.type}}</option>
-                </select>
-                <p class="comment">{{typeDescription}}</p>
-            </td>
-        </tr>
-        <tr>
-            <td>记录值</td>
-            <td>
-                <input type="text" name="value" maxlength="512" v-model="record.value"/>
-            </td>
-        </tr>
-        <tr>
-            <td>TTL</td>
-            <td>
-                <select class="ui dropdown auto-width" name="ttl" v-model="record.ttl">
-                    <option v-for="v in ttlValues" :value="v.value">{{v.name}}</option>
-                </select>
-            </td>
-        </tr>
-        <tr>
-            <td>线路</td>
-            <td>
-                <ns-routes-selector :v-routes="record.routes"></ns-routes-selector>
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2"><more-options-indicator></more-options-indicator></td>
-        </tr>
-        <tbody v-show="moreOptionsVisible">
-            <tr>
-                <td>备注</td>
-                <td>
-                    <textarea rows="2" name="description" v-model="record.description"></textarea>
-                </td>
-            </tr>
-            <tr>
-                <td>是否启用</td>
-                <td>
-                    <checkbox name="isOn" v-model="record.isOn"></checkbox>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <submit-btn></submit-btn>
-</form>

web/views/@default/ns/domains/records/updatePopup.js

@@ -1,15 +0,0 @@
-Tea.context(function () {
-	this.type = this.record.type
-	this.typeDescription = ""
-
-	this.changeType = function () {
-		let that = this
-		this.types.forEach(function (v) {
-			if (v.type == that.type) {
-				that.typeDescription = v.description
-			}
-		})
-	}
-
-	this.changeType()
-})

web/views/@default/ns/index.css

@@ -1,33 +0,0 @@
-.ui.message .icon {
-  position: absolute;
-  right: 1em;
-  top: 1.8em;
-}
-.grid {
-  margin-top: 2em !important;
-  margin-left: 2em !important;
-}
-.grid .column {
-  margin-bottom: 2em;
-  border-right: 1px #eee solid;
-}
-.grid .column div.value {
-  margin-top: 1.5em;
-}
-.grid .column div.value span {
-  font-size: 2em;
-  margin-right: 0.2em;
-}
-.grid .column.no-border {
-  border-right: 0;
-}
-.grid h4 a {
-  display: none;
-}
-.grid .column:hover a {
-  display: inline;
-}
-.chart-box {
-  height: 14em;
-}
-/*# sourceMappingURL=index.css.map */

web/views/@default/ns/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,0BAAA;EACA,2BAAA;;AAFD,KAIC;EACC,kBAAA;EACA,4BAAA;;AANF,KAIC,QAIC,IAAG;EACF,iBAAA;;AATH,KAIC,QAIC,IAAG,MAGF;EACC,cAAA;EACA,mBAAA;;AAbJ,KAkBC,QAAO;EACN,eAAA;;AAnBF,KAsBC,GACC;EACC,aAAA;;AAxBH,KA4BC,QAAO,MACN;EACC,eAAA;;AAKH;EACC,YAAA","file":"index.css"}

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

@@ -1,60 +0,0 @@
-{$layout}
-{$template "/echarts"}
-
-<div class="ui four columns grid">
-    <div class="ui column">
-        <h4>域名<link-icon href="/ns/domains"></link-icon></h4>
-        <div class="value"><span>{{board.countDomains}}</span>个</div>
-    </div>
-    <div class="ui column">
-        <h4>记录<link-icon href="/ns/domains"></link-icon></h4>
-        <div class="value"><span>{{board.countRecords}}</span>个</div>
-    </div>
-    <div class="ui column">
-        <h4>集群<link-icon href="/ns/clusters"></link-icon></h4>
-        <div class="value"><span>{{board.countClusters}}</span>个</div>
-    </div>
-    <div class="ui column no-border">
-        <h4>节点<link-icon href="/ns/clusters"></link-icon></h4>
-        <div class="value"><span>{{board.countNodes}}</span>
-            <span v-if="board.countOfflineNodes > 0" class="red" style="font-size: 1em">{{board.countOfflineNodes}}离线</span>
-            <span v-else style="font-size: 1em">个</span>
-        </div>
-    </div>
-</div>
-
-<!-- 流量统计 -->
-<div class="ui menu tabular">
-    <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
-    <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
-</div>
-
-
-<!-- 按小时统计流量 -->
-<div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
-
-<!-- 按日统计流量 -->
-<div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
-<div class="ui divider"></div>
-
-<!-- 域名排行 -->
-<h4>域名访问排行 <span>（24小时）</span></h4>
-<div class="chart-box" id="top-domains-chart"></div>
-<div class="ui divider"></div>
-
-<!-- 节点排行 -->
-<h4>节点访问排行 <span>（24小时）</span></h4>
-<div class="chart-box" id="top-nodes-chart"></div>
-<div class="ui divider"></div>
-
-<!-- 系统信息 -->
-<div class="ui divider"></div>
-<div class="ui menu tabular">
-    <a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">DNS节点CPU</a>
-    <a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">DNS节点内存</a>
-    <a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">DNS节点负载</a>
-</div>
-
-<div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
-<div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
-<div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></div>

web/views/@default/ns/index.js

@@ -1,246 +0,0 @@
-Tea.context(function () {
-	this.$delay(function () {
-		this.reloadHourlyTrafficChart()
-		this.reloadTopDomainsChart()
-		this.reloadTopNodesChart()
-		this.reloadCPUChart()
-	})
-
-	/**
-	 * 流量统计
-	 */
-	this.trafficTab = "hourly"
-
-	this.selectTrafficTab = function (tab) {
-		this.trafficTab = tab
-		if (tab == "hourly") {
-			this.$delay(function () {
-				this.reloadHourlyTrafficChart()
-			})
-		} else if (tab == "daily") {
-			this.$delay(function () {
-				this.reloadDailyTrafficChart()
-			})
-		}
-	}
-
-	this.reloadHourlyTrafficChart = function () {
-		let stats = this.hourlyStats
-		this.reloadTrafficChart("hourly-traffic-chart", "流量统计", stats, function (args) {
-			return stats[args.dataIndex].day + " " + stats[args.dataIndex].hour + "时 流量: " + teaweb.formatBytes(stats[args.dataIndex].bytes)
-		})
-	}
-
-	this.reloadDailyTrafficChart = function () {
-		let stats = this.dailyStats
-		this.reloadTrafficChart("daily-traffic-chart", "流量统计", stats, function (args) {
-			return stats[args.dataIndex].day + " 流量: " + teaweb.formatBytes(stats[args.dataIndex].bytes)
-		})
-	}
-
-	this.reloadTrafficChart = function (chartId, name, stats, tooltipFunc) {
-		let chartBox = document.getElementById(chartId)
-		if (chartBox == null) {
-			return
-		}
-
-		let axis = teaweb.bytesAxis(stats, function (v) {
-			return v.bytes
-		})
-
-		let chart = teaweb.initChart(chartBox)
-		let option = {
-			xAxis: {
-				data: stats.map(function (v) {
-					if (v.hour != null) {
-						return v.hour
-					}
-					return v.day
-				})
-			},
-			yAxis: {
-				axisLabel: {
-					formatter: function (value) {
-						return value + axis.unit
-					}
-				}
-			},
-			tooltip: {
-				show: true,
-				trigger: "item",
-				formatter: tooltipFunc
-			},
-			grid: {
-				left: 50,
-				top: 40,
-				right: 20,
-				bottom: 20
-			},
-			series: [
-				{
-					name: "流量",
-					type: "line",
-					data: stats.map(function (v) {
-						return v.bytes / axis.divider
-					}),
-					itemStyle: {
-						color: "#9DD3E8"
-					},
-					areaStyle: {
-						color: "#9DD3E8"
-					},
-					smooth: true
-				}
-			],
-			animation: true
-		}
-		chart.setOption(option)
-		chart.resize()
-	}
-
-	// 域名排行
-	this.reloadTopDomainsChart = function () {
-		let that = this
-		let axis = teaweb.countAxis(this.topDomainStats, function (v) {
-			return v.countRequests
-		})
-		teaweb.renderBarChart({
-			id: "top-domains-chart",
-			name: "域名",
-			values: this.topDomainStats,
-			x: function (v) {
-				return v.domainName
-			},
-			tooltip: function (args, stats) {
-				return stats[args.dataIndex].domainName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
-			},
-			value: function (v) {
-				return v.countRequests / axis.divider;
-			},
-			axis: axis,
-			click: function (args, stats) {
-				window.location = "/ns/domains/domain?domainId=" + stats[args.dataIndex].domainId
-			}
-		})
-	}
-
-	// 节点排行
-	this.reloadTopNodesChart = function () {
-		let that = this
-		let axis = teaweb.countAxis(this.topNodeStats, function (v) {
-			return v.countRequests
-		})
-		teaweb.renderBarChart({
-			id: "top-nodes-chart",
-			name: "节点",
-			values: this.topNodeStats,
-			x: function (v) {
-				return v.nodeName
-			},
-			tooltip: function (args, stats) {
-				return stats[args.dataIndex].nodeName + "<br/>请求数：" + " " + teaweb.formatNumber(stats[args.dataIndex].countRequests) + "<br/>流量：" + teaweb.formatBytes(stats[args.dataIndex].bytes)
-			},
-			value: function (v) {
-				return v.countRequests / axis.divider;
-			},
-			axis: axis,
-			click: function (args, stats) {
-				window.location = "/ns/clusters/cluster/node?nodeId=" + stats[args.dataIndex].nodeId + "&clusterId=" + stats[args.dataIndex].clusterId
-			}
-		})
-	}
-
-	/**
-	 * 系统信息
-	 */
-	this.nodeStatusTab = "cpu"
-
-	this.selectNodeStatusTab = function (tab) {
-		this.nodeStatusTab = tab
-		this.$delay(function () {
-			switch (tab) {
-				case "cpu":
-					this.reloadCPUChart()
-					break
-				case "memory":
-					this.reloadMemoryChart()
-					break
-				case "load":
-					this.reloadLoadChart()
-					break
-			}
-		})
-	}
-
-	this.reloadCPUChart = function () {
-		let axis = {unit: "%", divider: 1}
-		teaweb.renderLineChart({
-			id: "cpu-chart",
-			name: "CPU",
-			values: this.cpuValues,
-			x: function (v) {
-				return v.time
-			},
-			tooltip: function (args, stats) {
-				return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
-			},
-			value: function (v) {
-				return v.value * 100;
-			},
-			axis: axis,
-			max: 100
-		})
-	}
-
-	this.reloadMemoryChart = function () {
-		let axis = {unit: "%", divider: 1}
-		teaweb.renderLineChart({
-			id: "memory-chart",
-			name: "内存",
-			values: this.memoryValues,
-			x: function (v) {
-				return v.time
-			},
-			tooltip: function (args, stats) {
-				return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100 * 100) / 100) + "%"
-			},
-			value: function (v) {
-				return v.value * 100;
-			},
-			axis: axis,
-			max: 100
-		})
-	}
-
-	this.reloadLoadChart = function () {
-		let axis = {unit: "", divider: 1}
-		let max = this.loadValues.$map(function (k, v) {
-			return v.value
-		}).$max()
-		if (max < 10) {
-			max = 10
-		} else if (max < 20) {
-			max = 20
-		} else if (max < 100) {
-			max = 100
-		} else {
-			max = null
-		}
-		teaweb.renderLineChart({
-			id: "load-chart",
-			name: "负载",
-			values: this.loadValues,
-			x: function (v) {
-				return v.time
-			},
-			tooltip: function (args, stats) {
-				return stats[args.dataIndex].time + "：" + (Math.ceil(stats[args.dataIndex].value * 100) / 100)
-			},
-			value: function (v) {
-				return v.value;
-			},
-			axis: axis,
-			max: max
-		})
-	}
-})

web/views/@default/ns/index.less

@@ -1,46 +0,0 @@
-.ui.message {
-	.icon {
-		position: absolute;
-		right: 1em;
-		top: 1.8em;
-	}
-}
-
-.grid {
-	margin-top: 2em !important;
-	margin-left: 2em !important;
-
-	.column {
-		margin-bottom: 2em;
-		border-right: 1px #eee solid;
-
-		div.value {
-			margin-top: 1.5em;
-
-			span {
-				font-size: 2em;
-				margin-right: 0.2em;
-			}
-		}
-	}
-
-	.column.no-border {
-		border-right: 0;
-	}
-
-	h4 {
-		a {
-			display: none;
-		}
-	}
-
-	.column:hover {
-		a {
-			display: inline;
-		}
-	}
-}
-
-.chart-box {
-	height: 14em;
-}

web/views/@default/ns/index_plus.css

@@ -0,0 +1,9 @@
+.ui.message .icon {
+  position: absolute;
+  right: 1em;
+  top: 1.8em;
+}
+.chart-box {
+  height: 14em;
+}
+/*# sourceMappingURL=index_plus.css.map */

web/views/@default/ns/index_plus.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index_plus.less"],"names":[],"mappings":"AAAA,GAAG,QACF;EACC,kBAAA;EACA,UAAA;EACA,UAAA;;AAIF;EACC,YAAA","file":"index_plus.css"}

web/views/@default/ns/index_plus.less

@@ -0,0 +1,11 @@
+.ui.message {
+	.icon {
+		position: absolute;
+		right: 1em;
+		top: 1.8em;
+	}
+}
+
+.chart-box {
+	height: 14em;
+}

web/views/@default/ns/routes/@menu.html

@@ -1,4 +0,0 @@
-<first-menu>
-    <menu-item href="" @click.prevent="createRoute()">[创建线路]</menu-item>
-</first-menu>
-<div class="margin"></div>

web/views/@default/ns/routes/createPopup.html

@@ -1,26 +0,0 @@
-{$layout "layout_popup"}
-
-<h3>创建线路</h3>
-<form class="ui form" data-tea-action="$" data-tea-success="success">
-    <csrf-token></csrf-token>
-    <input type="hidden" name="clusterId" :value="clusterId"/>
-    <input type="hidden" name="domainId" :value="domainId"/>
-    <input type="hidden" name="userId" :value="userId"/>
-
-    <table class="ui table definition selectable">
-        <tr>
-            <td class="title">线路名称 *</td>
-            <td>
-                <input type="text" name="name" maxlength="100" ref="focus"/>
-            </td>
-        </tr>
-        <tr>
-            <td>IP范围</td>
-            <td>
-                <ns-route-ranges-box></ns-route-ranges-box>
-            </td>
-        </tr>
-    </table>
-
-    <submit-btn></submit-btn>
-</form>

web/views/@default/ns/routes/index.html

@@ -1,36 +0,0 @@
-{$layout}
-{$template "menu"}
-
-<div v-if="routes.length == 0">
-    <p class="comment">暂时还没有线路。</p>
-</div>
-
-<div v-show="routes.length > 0">
-    <table class="ui table selectable celled" id="sortable-table">
-        <thead>
-            <tr>
-                <th style="width: 3em"></th>
-                <th>线路名称</th>
-                <th>代号</th>
-                <th class="two wide">状态</th>
-                <th class="two op">操作</th>
-            </tr>
-        </thead>
-        <tbody v-for="route in routes" :v-id="route.id">
-            <tr>
-                <td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
-                <td>{{route.name}}</td>
-                <td>id:{{route.id}}</td>
-                <td>
-                    <label-on :v-is-on="route.isOn"></label-on>
-                </td>
-                <td>
-                    <a href="" @click.prevent="updateRoute(route.id)">修改</a> &nbsp;
-                    <a href="" @click.prevent="deleteRoute(route.id)">删除</a>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-
-    <p class="comment" v-if="routes.length > 0">可以拖动左侧的<i class="icon bars"></i>排序。</p>
-</div>

web/views/@default/ns/routes/index.js

@@ -1,49 +0,0 @@
-Tea.context(function () {
-	this.$delay(function () {
-		let that = this
-		sortTable(function (ids) {
-			that.$post(".sort")
-				.params({
-					routeIds: ids
-				})
-				.success(function () {
-					teaweb.successToast("排序保存成功")
-				})
-		})
-	})
-
-	this.createRoute = function () {
-		teaweb.popup("/ns/routes/createPopup", {
-			width: "42em",
-			callback: function () {
-				teaweb.success("保存成功", function () {
-					teaweb.reload()
-				})
-			}
-		})
-	}
-
-	this.updateRoute = function (routeId) {
-		teaweb.popup("/ns/routes/updatePopup?routeId=" + routeId, {
-			width: "42em",
-			callback: function () {
-				teaweb.success("保存成功", function () {
-					teaweb.reload()
-				})
-			}
-		})
-	}
-
-	this.deleteRoute = function (routeId) {
-		let that = this
-		teaweb.confirm("确定要删除此线路吗？", function () {
-			that.$post(".delete")
-				.params({
-					routeId: routeId
-				})
-				.success(function () {
-					teaweb.reload()
-				})
-		})
-	}
-})

web/views/@default/ns/routes/updatePopup.html

@@ -1,34 +0,0 @@
-{$layout "layout_popup"}
-
-<h3>修改线路</h3>
-<form class="ui form" data-tea-action="$" data-tea-success="success">
-    <csrf-token></csrf-token>
-    <input type="hidden" name="routeId" :value="route.id"/>
-    <table class="ui table definition selectable">
-        <tr>
-            <td class="title">线路名称 *</td>
-            <td>
-                <input type="text" name="name" maxlength="100" ref="focus" v-model="route.name"/>
-            </td>
-        </tr>
-        <tr>
-            <td>IP范围</td>
-            <td>
-                <ns-route-ranges-box :v-ranges="route.ranges"></ns-route-ranges-box>
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2"><more-options-indicator></more-options-indicator></td>
-        </tr>
-        <tbody v-show="moreOptionsVisible">
-            <tr>
-                <td>是否启用</td>
-                <td>
-                    <checkbox name="isOn" value="1" v-model="route.isOn"></checkbox>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-
-    <submit-btn></submit-btn>
-</form>

web/views/@default/ns/settings/accesslogs/index.html

@@ -1,10 +0,0 @@
-{$layout}
-{$template "/left_menu_top"}
-
-<div class="right-box without-tabbar">
-    <form class="ui form" data-tea-action="$" data-tea-success="success">
-        <csrf-token></csrf-token>
-        <ns-access-log-ref-box :v-access-log-ref="config" :v-is-parent="true"></ns-access-log-ref-box>
-        <submit-btn></submit-btn>
-    </form>
-</div>

web/views/@default/ns/settings/accesslogs/index.js

@@ -1,3 +0,0 @@
-Tea.context(function () {
-	this.success = NotifyReloadSuccess("保存成功")
-})

web/views/@default/ns/test/index.css

@@ -1,14 +0,0 @@
-pre.pre-box {
-  background: #eee;
-  padding: 1em;
-}
-.reasons {
-  margin-top: 0.3em;
-}
-.reasons ul {
-  margin: 0;
-  list-style: none;
-  padding: 0;
-  line-height: 1.8;
-}
-/*# sourceMappingURL=index.css.map */

web/views/@default/ns/test/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG;EACF,gBAAA;EACA,YAAA;;AAGD;EACC,iBAAA;;AADD,QAGC;EACC,SAAA;EACA,gBAAA;EACA,UAAA;EACA,gBAAA","file":"index.css"}

web/views/@default/ns/test/index.html

@@ -1,83 +0,0 @@
-{$layout}
-
-<form class="ui form" data-tea-action="$" data-tea-timeout="30" data-tea-before="before" data-tea-success="success" data-tea-done="done">
-    <table class="ui table definition selectable">
-        <tr>
-            <td>集群 *</td>
-            <td>
-                <select class="ui dropdown auto-width" name="clusterId" v-model="clusterId" @change="changeCluster">
-                    <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
-                </select>
-                <p class="comment">这里只列出有节点的集群。</p>
-            </td>
-        </tr>
-        <tr v-if="clusterId > 0">
-            <td>节点 *</td>
-            <td>
-                <div class="ui fields inline">
-                    <div class="ui field">
-                        <select class="ui dropdown auto-width" name="nodeId" v-model="nodeId" @change="changeNode">
-                            <option v-for="node in nodes" :value="node.id">{{node.name}}</option>
-                        </select>
-                    </div>
-                    <div class="ui field" v-if="selectedNode != null">
-                        &nbsp; &nbsp; 节点IP:
-                    </div>
-                    <div class="ui field" v-if="selectedNode != null">
-                        <select class="ui dropdown auto-width" name="ip">
-                            <option v-for="ip in selectedNode.addrs" :value="ip">{{ip}}</option>
-                        </select>
-                    </div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <td class="title">域名 *</td>
-            <td>
-                <div class="ui fields inline">
-                    <div class="ui field">
-                        <input type="text" name="domain" size="40" maxlength="200" ref="focus" placeholder="xxx.com"/>
-                    </div>
-                    <div class="ui field">
-                        <select class="ui dropdown auto-width" name="type">
-                            <option v-for="type in recordTypes" :value="type.type">{{type.type}}</option>
-                        </select>
-                    </div>
-                </div>
-
-                <p class="comment">要解析的域名和记录类型。</p>
-            </td>
-        </tr>
-        <tr>
-            <td>模拟客户端IP</td>
-            <td>
-                <input type="text" name="clientIP" style="width: 12em" maxlength="128" placeholder="x.x.x.x"/>
-                <p class="comment">可选项，用来模拟客户端IP。</p>
-            </td>
-        </tr>
-        <tr>
-            <td>解析结果</td>
-            <td>
-                <div v-if="result != null">
-                    <span class="red" v-if="!result.isOk">{{result.err}}</span>
-                    <div class="reasons" v-if="result.isNetErr">
-                        可能的原因有：
-                        <ul>
-                            <li>1. DNS节点IP填写错误；</li>
-                            <li>2. DNS节点没有启动；</li>
-                            <li>3. DNS节点53/udp端口没有加入到节点防火墙规则或者其他安全策略中：</li>
-                            <li>4. DNS节点IP地址填写错误；</li>
-                            <li>5. 其他原因。</li>
-                        </ul>
-                    </div>
-
-                    <div v-if="result.isOk">
-                        <pre class="pre-box"><span class="green">{{result.result}}</span></pre>
-                    </div>
-                </div>
-            </td>
-        </tr>
-    </table>
-    <submit-btn v-if="!isDoing">开始解析</submit-btn>
-    <button class="ui button disabled" type="button" v-if="isDoing">解析中...</button>
-</form>

web/views/@default/ns/test/index.js

@@ -1,51 +0,0 @@
-Tea.context(function () {
-	this.clusterId = 0
-	if (this.clusters.length > 0) {
-		this.clusterId = this.clusters[0].id
-		this.$delay(function () {
-			this.changeCluster()
-		})
-	}
-
-	this.nodeId = 0
-	this.nodes = []
-	this.selectedNode = null
-
-	this.isDoing = false
-	this.result = null
-
-	this.before = function () {
-		this.isDoing = true
-		this.result = null
-	}
-
-	this.success = function (resp) {
-		this.result = resp.data
-	}
-
-	this.done = function () {
-		this.isDoing = false
-	}
-
-	this.changeCluster = function () {
-		this.nodeId = 0
-		this.$post(".nodeOptions")
-			.params({
-				clusterId: this.clusterId
-			})
-			.success(function (resp) {
-				this.nodes = resp.data.nodes
-				if (this.nodes.length > 0) {
-					this.nodeId = this.nodes[0].id
-					this.changeNode()
-				}
-			})
-	}
-
-	this.changeNode = function () {
-		let that = this
-		this.selectedNode = this.nodes.$find(function (k, v) {
-			return v.id == that.nodeId
-		})
-	}
-})

web/views/@default/ns/test/index.less

@@ -1,15 +0,0 @@
-pre.pre-box {
-	background: #eee;
-	padding: 1em;
-}
-
-.reasons {
-	margin-top: 0.3em;
-
-	ul {
-		margin: 0;
-		list-style: none;
-		padding: 0;
-		line-height: 1.8;
-	}
-}