优化看板中的统计图表

web/public/js/components/common/grid_columns.js

@@ -0,0 +1,71 @@
+Vue.component("columns-grid", {
+	props: [],
+	mounted: function () {
+		this.columns = this.calculateColumns()
+
+		let that = this
+		window.addEventListener("resize", function () {
+			that.columns = that.calculateColumns()
+		})
+	},
+	data: function () {
+		return {
+			columns: "four"
+		}
+	},
+	methods: {
+		calculateColumns: function () {
+			let w = window.innerWidth
+			let columns = Math.floor(w / 250)
+			if (columns == 0) {
+				columns = 1
+			}
+
+			let columnElements = this.$el.getElementsByClassName("column")
+			if (columnElements.length == 0) {
+				return
+			}
+			let maxColumns = columnElements.length
+			if (columns > maxColumns) {
+				columns = maxColumns
+			}
+
+			// 添加右侧边框
+			for (let index = 0; index < columnElements.length; index++) {
+				let el = columnElements[index]
+				el.className = el.className.replace("with-border", "")
+				if (index % columns == columns - 1 || index == columnElements.length - 1 /** 最后一个 **/) {
+					el.className += " with-border"
+				}
+			}
+
+			switch (columns) {
+				case 1:
+					return "one"
+				case 2:
+					return "two"
+				case 3:
+					return "three"
+				case 4:
+					return "four"
+				case 5:
+					return "five"
+				case 6:
+					return "six"
+				case 7:
+					return "seven"
+				case 8:
+					return "eight"
+				case 9:
+					return "nine"
+				case 10:
+					return "ten"
+				default:
+					return "ten"
+			}
+		}
+	},
+	template: `<div :class="'ui ' + columns + ' columns grid counter-chart'">
+	<slot></slot>
+</div>`
+})

web/views/@default/@grids.css

@@ -1,5 +1,5 @@
 .grid.counter-chart {
-  margin-top: 1.5em !important;
+  margin-top: 1em !important;
   margin-left: 0.4em !important;
 }
 .grid.counter-chart .column {
@@ -22,14 +22,19 @@
   border-right: 1px rgba(0, 0, 0, 0.1) solid;
 }
 .grid.counter-chart h4 {
+  color: grey;
+  position: relative;
   font-size: 1em;
   text-align: left;
 }
 .grid.counter-chart h4 a {
+  position: absolute;
+  right: 0.1em;
+  font-size: 1.26em;
   display: none;
 }
 .grid.counter-chart .column:hover {
-  background: rgba(0, 0, 0, 0.1) !important;
+  background: rgba(0, 0, 0, 0.03) !important;
 }
 .grid.counter-chart .column:hover a {
   display: inline;

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

@@ -1 +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"}
+{"version":3,"sources":["@grids.less"],"names":[],"mappings":"AAAA,KAAK;EACJ,0BAAA;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;EACC,WAAA;EACA,kBAAA;EASA,cAAA;EACA,gBAAA;;AAvCF,KAAK,cA2BJ,GAIC;EACC,kBAAA;EACA,YAAA;EACA,iBAAA;EACA,aAAA;;AAnCH,KAAK,cA0CJ,QAAO;EACN,+BAAA;;AA3CF,KAAK,cA0CJ,QAAO,MAGN;EACC,eAAA","file":"@grids.css"}

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

@@ -51,7 +51,7 @@
 </div>
 
 <!-- 统计图表 -->
-<div class="ui three columns grid counter-chart" v-if="!isLoading">
+<columns-grid v-if="!isLoading">
     <div class="ui column">
         <h4>集群<link-icon href="/clusters" v-if="dashboard.canGoNodes"></link-icon></h4>
         <div class="value"><span>{{dashboard.countNodeClusters}}</span>个</div>
@@ -85,7 +85,7 @@
         <h4>今日流量</h4>
         <div class="value"><span>{{todayTraffic}}</span>{{todayTrafficUnit}}</div>
     </div>
-</div>
+</columns-grid>
 
 <div class="ui divider" v-show="!isLoading"></div>