在服务看板中可以切换到附近的服务

internal/web/actions/default/servers/init.go

@@ -16,7 +16,9 @@ func init() {
 			GetPost("/create", new(CreateAction)).
 			GetPost("/update", new(UpdateAction)).
 			Post("/fixLog", new(FixLogAction)).
+			Post("/nearby", new(NearbyAction)).
 
+			//
 			GetPost("/addPortPopup", new(AddPortPopupAction)).
 			GetPost("/addServerNamePopup", new(AddServerNamePopupAction)).
 			GetPost("/addOriginPopup", new(AddOriginPopupAction)).

internal/web/actions/default/servers/nearby.go

@@ -0,0 +1,56 @@
+// Copyright 2021 Liuxiangchao iwind.liu@gmail.com. All rights reserved.
+
+package servers
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/iwind/TeaGo/maps"
+	"github.com/iwind/TeaGo/types"
+	"strings"
+)
+
+// NearbyAction 查找附近的Server
+type NearbyAction struct {
+	actionutils.ParentAction
+}
+
+func (this *NearbyAction) RunPost(params struct {
+	ServerId int64
+	Url      string
+}) {
+	var groupMaps = []maps.Map{}
+
+	resp, err := this.RPC().ServerRPC().FindNearbyServers(this.AdminContext(), &pb.FindNearbyServersRequest{ServerId: params.ServerId})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+	for _, group := range resp.Groups {
+		switch resp.Scope {
+		case "cluster":
+			group.Name = "[集群]" + group.Name
+		case "group":
+			group.Name = "[分组]" + group.Name
+		}
+
+		var itemMaps = []maps.Map{}
+		for _, server := range group.Servers {
+			itemMaps = append(itemMaps, maps.Map{
+				"name":     server.Name,
+				"url":      strings.ReplaceAll(params.Url, "${serverId}", types.String(server.Id)),
+				"isActive": params.ServerId == server.Id,
+			})
+		}
+
+		groupMaps = append(groupMaps, maps.Map{
+			"name":  group.Name,
+			"items": itemMaps,
+		})
+	}
+
+	this.Data["scope"] = resp.Scope
+	this.Data["groups"] = groupMaps
+
+	this.Success()
+}

web/public/js/components/common/more-items-angle.js

@@ -0,0 +1,83 @@
+// 可以展示更多条目的角图表
+Vue.component("more-items-angle", {
+	props: ["v-data-url", "v-url"],
+	data: function () {
+		return {
+			visible: false
+		}
+	},
+	methods: {
+		show: function () {
+			this.visible = !this.visible
+			if (this.visible) {
+				this.showBox()
+			} else {
+				this.hideBox()
+			}
+		},
+		showBox: function () {
+			let that = this
+
+			this.visible = true
+
+			Tea.action(this.vDataUrl)
+				.params({
+					url: this.vUrl
+				})
+				.post()
+				.success(function (resp) {
+					let groups = resp.data.groups
+
+					let boxLeft = that.$el.offsetLeft + 120;
+					let boxTop = that.$el.offsetTop + 70;
+
+					let box = document.createElement("div")
+					box.setAttribute("id", "more-items-box")
+					box.style.cssText = "z-index: 100; position: absolute; left: " + boxLeft + "px; top: " + boxTop + "px; max-height: 30em; overflow: auto; border-bottom: 1px solid rgba(34,36,38,.15)"
+					document.body.append(box)
+
+					let menuHTML = "<ul class=\"ui labeled menu vertical borderless\" style=\"padding: 0\">"
+					groups.forEach(function (group) {
+						menuHTML += "<div class=\"item header\">" + teaweb.encodeHTML(group.name) + "</div>"
+						group.items.forEach(function (item) {
+							menuHTML += "<a href=\"" + item.url + "\" class=\"item " + (item.isActive ? "active" : "") + "\" style=\"font-size: 0.9em;\">" + teaweb.encodeHTML(item.name) + "<i class=\"icon right angle\"></i></a>"
+						})
+					})
+					menuHTML += "</ul>"
+					box.innerHTML = menuHTML
+
+					let listener = function (e) {
+						if (e.target.tagName == "I") {
+							return
+						}
+
+						if (!that.isInBox(box, e.target)) {
+							document.removeEventListener("click", listener)
+							that.hideBox()
+						}
+					}
+					document.addEventListener("click", listener)
+				})
+		},
+		hideBox: function () {
+			let box = document.getElementById("more-items-box")
+			if (box != null) {
+				box.parentNode.removeChild(box)
+			}
+			this.visible = false
+		},
+		isInBox: function (parent, child) {
+			while (true) {
+				if (child == null) {
+					break
+				}
+				if (child.parentNode == parent) {
+					return true
+				}
+				child = child.parentNode
+			}
+			return false
+		}
+	},
+	template: `<a href="" class="item" @click.prevent="show"><i class="icon angle" :class="{down: !visible, up: visible}"></i></a>`
+})

web/public/js/utils.js

@@ -602,6 +602,7 @@ window.teaweb = {
 		s = s.replace("&", "&")
 		s = s.replace("<", "&lt;")
 		s = s.replace(">", "&gt;")
+		s = s.replace("\"", "&quot;")
 		return s
 	}
 }

web/views/@default/@layout.css

@@ -368,6 +368,9 @@ body.expanded .main {
   .main {
     left: 4em;
   }
+  .main .main-box {
+    display: block;
+  }
 }
 .main.without-menu {
   left: 9em;

web/views/@default/@layout.html

@@ -108,7 +108,10 @@
         </div>
 
         <!-- 功能区 -->
+        <div class="main-box">
             {$TEA.VIEW}
+            <div class="clear"></div>
+        </div>
     </div>
 
 	<!-- 底部 -->

web/views/@default/@layout.less

@@ -341,11 +341,20 @@ body.expanded .main {
 	padding-bottom: 5em;
 	padding-right: 1em;
 	right: 1em;
+
+
+	.main-box {
+
+	}
 }
 
 @media screen and (max-width: 512px) {
 	.main {
 		left: 4em;
+
+		.main-box {
+			display: block;
+		}
 	}
 }
 

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

@@ -5,6 +5,10 @@
     <menu-item href="/servers">服务列表</menu-item>
     <span class="item disabled">|</span>
     <menu-item :href="'/servers/server?serverId=' + server.id" active="true">"{{server.name}}"看板</menu-item>
+    <span class="disabled item">|</span>
+    <more-items-angle
+            :v-data-url="'/servers/nearby?serverId=' + server.id"
+            :v-url="'/servers/server/boards?serverId=${serverId}'"></more-items-angle>
 </first-menu>
 
 <!-- 加载中 -->