优化界面

2025-11-04 13:10:26 +08:00 · 2021-12-06 08:55:47 +08:00
parent 3e43a5d866
commit ec49f238d6
8 changed files with 146 additions and 74 deletions
--- a/web/public/js/components.js
+++ b/web/public/js/components.js
@@ -20,13 +20,16 @@ Vue.component("traffic-map-box", {
 			maxPercent *= 1.2 // 不要让某一项100%
 		}

+		let screenIsNarrow = window.innerWidth < 512
+
 		return {
 			isAttack: isAttack,
 			stats: this.vStats,
 			chart: null,
 			minOpacity: 0.2,
 			maxPercent: maxPercent,
-			selectedCountryName: ""
+			selectedCountryName: "",
+			screenIsNarrow: screenIsNarrow
 		}
 	},
 	methods: {
@@ -41,14 +44,14 @@ Vue.component("traffic-map-box", {
 					left: 0,
 					right: 0
 				},
-				roam: true,
+				roam: false,
 				tooltip: {
 					trigger: "item"
 				},
 				series: [{
 					type: "map",
 					map: "world",
-					zoom: 1.2,
+					zoom: 1.3,
 					selectedMode: false,
 					itemStyle: {
 						areaColor: "#E9F0F9",
@@ -126,7 +129,7 @@ Vue.component("traffic-map-box", {
 			})
 			this.chart.resize()
 		},
-		select: function (countryName) {
+		selectCountry: function (countryName) {
 			if (this.chart == null) {
 				return
 			}
@@ -166,20 +169,52 @@ Vue.component("traffic-map-box", {
 				}
 			})
 			this.chart.setOption(option)
+		},
+		select: function (args) {
+			this.selectCountry(args.countryName)
 		}
 	},
 	template: `<div>
-<table style="width: 100%; border: 0; padding: 0; margin: 0">
+	<table style="width: 100%; border: 0; padding: 0; margin: 0">
+		<tbody>
       	<tr>
           <td>
-               <div class="traffic-map-box" id="traffic-map-box" ></div>
+               <div class="traffic-map-box" id="traffic-map-box"></div>
           </td>
-           <td style="width: 14em">
-           		<div style="overflow-y: auto; height: 16em">
+           <td style="width: 14em" v-if="!screenIsNarrow">
+           		<traffic-map-box-table :v-stats="stats" :v-is-attack="isAttack" @select="select"></traffic-map-box-table>
+           </td>
+       </tr>
+       </tbody>
+       <tbody v-if="screenIsNarrow">
+		   <tr>
+				<td colspan="2">
+					<traffic-map-box-table :v-stats="stats" :v-is-attack="isAttack" @select="select"></traffic-map-box-table>
+				</td>
+			</tr>
+		</tbody>
+   </table>
+</div>`
+})
+
+Vue.component("traffic-map-box-table", {
+	props: ["v-stats", "v-is-attack"],
+	data: function () {
+		return {
+			stats: this.vStats,
+			isAttack: this.vIsAttack
+		}
+	},
+	methods: {
+		select: function (countryName) {
+			this.$emit("select", {countryName: countryName})
+		}
+	},
+	template: `<div style="overflow-y: auto; max-height: 16em" class="narrow-scrollbar">
 	   <table class="ui table selectable">
 		  <thead>
 			<tr>
-							<th colspan="2">国家/地区排行</th>
+				<th colspan="2">国家/地区排行&nbsp; <tip-icon content="只有开启了统计的服务才会有记录。"></tip-icon></th>
 			</tr>
 		  </thead>
 		   <tbody v-if="stats.length == 0">
@@ -201,11 +236,7 @@ Vue.component("traffic-map-box", {
 			   </tr>
 		   </tbody>
 	   </table>
-               </div>
-           </td>
-       </tr>
-   </table>
-</div>`
+   </div>`
 })

 // 显示节点的多个集群
--- a/web/public/js/components/maps/traffic-map-box.js
+++ b/web/public/js/components/maps/traffic-map-box.js
@@ -20,13 +20,16 @@ Vue.component("traffic-map-box", {
 			maxPercent *= 1.2 // 不要让某一项100%
 		}

+		let screenIsNarrow = window.innerWidth < 512
+
 		return {
 			isAttack: isAttack,
 			stats: this.vStats,
 			chart: null,
 			minOpacity: 0.2,
 			maxPercent: maxPercent,
-			selectedCountryName: ""
+			selectedCountryName: "",
+			screenIsNarrow: screenIsNarrow
 		}
 	},
 	methods: {
@@ -41,14 +44,14 @@ Vue.component("traffic-map-box", {
 					left: 0,
 					right: 0
 				},
-				roam: true,
+				roam: false,
 				tooltip: {
 					trigger: "item"
 				},
 				series: [{
 					type: "map",
 					map: "world",
-					zoom: 1.2,
+					zoom: 1.3,
 					selectedMode: false,
 					itemStyle: {
 						areaColor: "#E9F0F9",
@@ -126,7 +129,7 @@ Vue.component("traffic-map-box", {
 			})
 			this.chart.resize()
 		},
-		select: function (countryName) {
+		selectCountry: function (countryName) {
 			if (this.chart == null) {
 				return
 			}
@@ -166,20 +169,52 @@ Vue.component("traffic-map-box", {
 				}
 			})
 			this.chart.setOption(option)
+		},
+		select: function (args) {
+			this.selectCountry(args.countryName)
 		}
 	},
 	template: `<div>
-<table style="width: 100%; border: 0; padding: 0; margin: 0">
+	<table style="width: 100%; border: 0; padding: 0; margin: 0">
+		<tbody>
       	<tr>
           <td>
-               <div class="traffic-map-box" id="traffic-map-box" ></div>
+               <div class="traffic-map-box" id="traffic-map-box"></div>
           </td>
-           <td style="width: 14em">
-           		<div style="overflow-y: auto; height: 16em">
+           <td style="width: 14em" v-if="!screenIsNarrow">
+           		<traffic-map-box-table :v-stats="stats" :v-is-attack="isAttack" @select="select"></traffic-map-box-table>
+           </td>
+       </tr>
+       </tbody>
+       <tbody v-if="screenIsNarrow">
+		   <tr>
+				<td colspan="2">
+					<traffic-map-box-table :v-stats="stats" :v-is-attack="isAttack" @select="select"></traffic-map-box-table>
+				</td>
+			</tr>
+		</tbody>
+   </table>
+</div>`
+})
+
+Vue.component("traffic-map-box-table", {
+	props: ["v-stats", "v-is-attack"],
+	data: function () {
+		return {
+			stats: this.vStats,
+			isAttack: this.vIsAttack
+		}
+	},
+	methods: {
+		select: function (countryName) {
+			this.$emit("select", {countryName: countryName})
+		}
+	},
+	template: `<div style="overflow-y: auto; max-height: 16em" class="narrow-scrollbar">
 	   <table class="ui table selectable">
 		  <thead>
 			<tr>
-							<th colspan="2">国家/地区排行</th>
+				<th colspan="2">国家/地区排行&nbsp; <tip-icon content="只有开启了统计的服务才会有记录。"></tip-icon></th>
 			</tr>
 		  </thead>
 		   <tbody v-if="stats.length == 0">
@@ -201,9 +236,5 @@ Vue.component("traffic-map-box", {
 			   </tr>
 		   </tbody>
 	   </table>
-               </div>
-           </td>
-       </tr>
-   </table>
-</div>`
+   </div>`
 })
--- a/web/views/@default/@layout.css
+++ b/web/views/@default/@layout.css
@@ -95,6 +95,9 @@ body.expanded .right-box {
 .main.without-footer .left-box {
  bottom: 0.2em;
 }
+.narrow-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
 /** 通用 **/
 .clear {
  clear: both;
--- a/web/views/@default/@layout.css.map
+++ b/web/views/@default/@layout.css.map
--- a/web/views/@default/@left_menu.less
+++ b/web/views/@default/@left_menu.less
@@ -127,3 +127,8 @@ body.expanded .right-box {
 .main.without-footer .left-box {
 	bottom: 0.2em;
 }
+
+// scrollbar
+.narrow-scrollbar::-webkit-scrollbar {
+	width: 4px;
+}
--- a/web/views/@default/dashboard/boards/index.html
+++ b/web/views/@default/dashboard/boards/index.html
@@ -118,7 +118,7 @@
 <div class="ui divider"></div>

 <!-- 流量地图 -->
-<div class="traffic-map-box" v-if="!isLoading">
+<div v-if="!isLoading">
    <traffic-map-box :v-stats="topCountryStats"></traffic-map-box>
 </div>
 <div class="ui divider"></div>
--- a/web/views/@default/dashboard/boards/waf.html
+++ b/web/views/@default/dashboard/boards/waf.html
@@ -33,7 +33,7 @@

 <!-- 流量地图 -->
 <div class="ui divider"></div>
-<div class="traffic-map-box" v-if="!isLoading">
+<div v-if="!isLoading">
    <traffic-map-box :v-stats="topCountryStats" :v-is-attack="true"></traffic-map-box>
 </div>
 <div class="ui divider"></div>
--- a/web/views/@default/servers/server/stat/index.js
+++ b/web/views/@default/servers/server/stat/index.js
@@ -81,7 +81,9 @@ Tea.context(function () {
 					data: stats.map(function (v) {
 						return v.countRequests / axis.divider
 					}),
-
+					itemStyle: {
+						color: "#61A0A8"
+					},
 					areaStyle: {
 						color: "#9DD3E8"
 					},