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

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>
 
         <!-- 功能区 -->
-        {$TEA.VIEW}
+        <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>
 
 <!-- 加载中 -->