调整界面

2025-11-03 12:20:28 +08:00 · 2020-11-10 15:40:22 +08:00
parent 26066daad7
commit c1b21e5309
35 changed files with 130 additions and 110 deletions
--- a/internal/web/actions/default/servers/components/componentutils/component_helper.go
+++ b/internal/web/actions/default/servers/components/componentutils/component_helper.go
@@ -1,7 +1,6 @@
 package componentutils

 import (
-	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/iwind/TeaGo/actions"
 	"github.com/iwind/TeaGo/maps"
 	"net/http"
@@ -19,15 +18,9 @@ func (this *ComponentHelper) BeforeAction(action *actions.ActionObject) {
 		return
 	}
 	action.Data["teaMenu"] = "servers"
+	action.Data["teaSubMenu"] = "components"
 	action.Data["mainTab"] = "component"

-	// 顶部标签栏
-	selectedTabbar := action.Data.GetString("mainTab")
-	tabbar := actionutils.NewTabbar()
-	tabbar.Add("服务", "", "/servers", "", selectedTabbar == "server")
-	tabbar.Add("通用", "", "/servers/components", "", selectedTabbar == "component")
-	actionutils.SetTabbar(action, tabbar)
-
 	// 创建左侧菜单
 	secondMenuItem := action.Data.GetString("secondMenuItem")
 	action.Data["leftMenuItems"] = this.createLeftMenus(secondMenuItem)
--- a/internal/web/actions/default/servers/components/helper.go
+++ b/internal/web/actions/default/servers/components/helper.go
@@ -1,7 +1,6 @@
 package components

 import (
-	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/iwind/TeaGo/actions"
 )

@@ -14,11 +13,4 @@ func NewHelper() *Helper {

 func (this *Helper) BeforeAction(action *actions.ActionObject) {
 	action.Data["teaMenu"] = "servers"
-
-	selectedTabbar, _ := action.Data["mainTab"]
-
-	tabbar := actionutils.NewTabbar()
-	tabbar.Add("服务", "", "/servers", "", selectedTabbar == "server")
-	tabbar.Add("通用", "", "/servers/components", "", selectedTabbar == "component")
-	actionutils.SetTabbar(action, tabbar)
 }
--- a/internal/web/actions/default/servers/helper.go
+++ b/internal/web/actions/default/servers/helper.go
@@ -1,7 +1,6 @@
 package servers

 import (
-	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/iwind/TeaGo/actions"
 )

@@ -14,11 +13,4 @@ func NewHelper() *Helper {

 func (this *Helper) BeforeAction(action *actions.ActionObject) {
 	action.Data["teaMenu"] = "servers"
-
-	selectedTabbar, _ := action.Data["mainTab"]
-
-	tabbar := actionutils.NewTabbar()
-	tabbar.Add("服务", "", "/servers", "", selectedTabbar == "server")
-	tabbar.Add("通用", "", "/servers/components", "", selectedTabbar == "component")
-	actionutils.SetTabbar(action, tabbar)
 }
--- a/internal/web/helpers/user_must_auth.go
+++ b/internal/web/helpers/user_must_auth.go
@@ -7,6 +7,7 @@ import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/utils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
 	"github.com/iwind/TeaGo/actions"
+	"github.com/iwind/TeaGo/maps"
 	"net/http"
 	"reflect"
 )
@@ -78,26 +79,33 @@ func (this *UserMustAuth) BeforeAction(actionPtr actions.ActionWrapper, paramNam
 	})

 	// 初始化变量
-	modules := []map[string]interface{}{
+	modules := []maps.Map{
 		{
-			"code":     "servers",
-			"menuName": "代理服务",
-			"icon":     "clone outsize",
+			"code": "servers",
+			"name": "代理服务",
+			"icon": "clone outsize",
+			"subItems": []maps.Map{
+				{
+					"name": "通用组件",
+					"url":  "/servers/components",
+					"code": "components",
+				},
+			},
 		},
 		{
-			"code":     "clusters",
-			"menuName": "节点集群",
-			"icon":     "cloud",
+			"code": "clusters",
+			"name": "节点集群",
+			"icon": "cloud",
 		},
 		{
-			"code":     "dns",
-			"menuName": "DNS",
-			"icon":     "globe",
+			"code": "dns",
+			"name": "DNS",
+			"icon": "globe",
 		},
 		{
-			"code":     "settings",
-			"menuName": "系统设置",
-			"icon":     "setting",
+			"code": "settings",
+			"name": "系统设置",
+			"icon": "setting",
 		},
 	}

@@ -121,6 +129,7 @@ func (this *UserMustAuth) BeforeAction(actionPtr actions.ActionWrapper, paramNam
 	action.Data["teaVersion"] = teaconst.Version
 	action.Data["teaIsSuper"] = false
 	action.Data["teaDemoEnabled"] = teaconst.IsDemo
+	action.Data["teaSubMenu"] = ""

 	// 菜单
 	action.Data["firstMenuItem"] = ""
--- a/web/views/@default/@layout.css
+++ b/web/views/@default/@layout.css
@@ -54,6 +54,9 @@
 .left-box.tiny {
  top: 10.5em;
 }
+.left-box.without-tabbar {
+  top: 3em;
+}
 .right-box {
  position: fixed;
  top: 7.5em;
@@ -71,6 +74,9 @@
 .right-box::-webkit-scrollbar {
  width: 4px;
 }
+.right-box.without-tabbar {
+  top: 3em;
+}
 /** 通用 **/
 .clear {
  clear: both;
@@ -182,6 +188,12 @@ p.margin {
 .main-menu .ui.labeled.icon.menu .item {
  font-size: 0.9em;
 }
+.main-menu .ui.menu .sub-items .item {
+  padding-left: 2.8em !important;
+}
+.main-menu .ui.menu .sub-items .item.active {
+  background-color: #2185d0 !important;
+}
 /** 扩展UI **/
 .field.text {
  padding: .5em;
--- a/web/views/@default/@layout.css.map
+++ b/web/views/@default/@layout.css.map
--- a/web/views/@default/@layout.html
+++ b/web/views/@default/@layout.html
@@ -48,31 +48,23 @@
            </a>-->

            <!-- 模块 -->
-            <a v-for="module in teaModules" class="item" :href="Tea.url(module.code)" :class="{active:teaMenu == module.code, separator:module.code.length == 0}">
-                <span v-if="module.code.length > 0">
-					<i class="window restore outline icon" v-if="module.icon == null"></i>
-                	<i class="ui icon" v-if="module.icon != null" :class="module.icon"></i>
-                	<span>{{module.menuName}}</span>
-				</span>
-            </a>
+			<div v-for="module in teaModules">
+				<a class="item" :href="Tea.url(module.code)" :class="{active:teaMenu == module.code && teaSubMenu.length == 0, separator:module.code.length == 0}">
+					<span v-if="module.code.length > 0">
+						<i class="window restore outline icon" v-if="module.icon == null"></i>
+						<i class="ui icon" v-if="module.icon != null" :class="module.icon"></i>
+						<span>{{module.name}}</span>
+					</span>
+				</a>
+				<div v-if="teaMenu == module.code" class="sub-items">
+					<a class="item" v-for="subItem in module.subItems" :href="subItem.url" :class="{active:subItem.code == teaSubMenu}">{{subItem.name}}</a>
+				</div>
+			</div>
        </div>
    </div>

    <!-- 右侧主操作栏 -->
    <div class="main" :class="{'without-menu':teaSubMenus.menus == null || teaSubMenus.menus.length == 0 || (teaSubMenus.menus.length == 1 && teaSubMenus.menus[0].alwaysActive), 'without-secondary-menu':teaSubMenus.alwaysMenu == null || teaSubMenus.alwaysMenu.items.length <= 1}" v-cloak="">
-		<!-- 左侧子菜单 -->
-		<div class="sub-menu" v-if="teaSubMenus.menus != null && teaSubMenus.menus.length > 0">
-			<div class="menus-box">
-				<div class="ui secondary menu vertical borderless blue pointing small" v-cloak="" v-for="menu in teaSubMenus.menus" v-if="!menu.alwaysActive">
-					<p class="item header" v-if="menu.name.length > 0 && !menu.alwaysActive" @click.prevent="showSubMenu(menu)">
-						<var v-html="menu.name"></var> <!--<span v-if="!menu.alwaysActive">({{menu.countNormalItems}})</span>--><!--<i class="icon angle" :class="{up:menu.isActive,down:!menu.isActive}" v-if="!menu.alwaysActive"></i>-->
-					</p>
-					<a :href="item.url" class="item" :class="{active:item.isActive,sortable:item.isSortable}" v-for="item in menu.items" v-show="true" :data-id="item.id"><var class="grey">{{item.name}}</var><sup v-if="item.supName.length > 0">&nbsp; {{item.supName}}</sup><span v-if="item.subName != null && item.subName.length > 0" :class="item.subColor">{{item.subName}}</span><i v-if="item.icon != null && item.icon.length > 0" :class="'ui icon ' + item.icon"></i>
-					</a>
-				</div>
-			</div>
-		</div>
-
        <!-- 操作菜单 -->
        <div class="ui top menu tabular tab-menu small" v-if="teaTabbar.length > 0">
            <a class="item" v-for="item in teaTabbar" :class="{'active':item.active,right:item.right}"  :href="item.url">
--- a/web/views/@default/@layout.less
+++ b/web/views/@default/@layout.less
@@ -130,8 +130,22 @@ div.margin, p.margin {
 	font-size: 0.9em;
 }

-.main-menu .ui.menu .item {
+.main-menu {
+	.ui.menu {
+		.item {

+		}
+
+		.sub-items {
+			.item {
+				padding-left: 2.8em !important;
+			}
+
+			.item.active {
+				background-color: #2185d0 !important;
+			}
+		}
+	}
 }

 /** 扩展UI **/
--- a/web/views/@default/@left_menu.less
+++ b/web/views/@default/@left_menu.less
@@ -63,7 +63,6 @@
 	}
 }

-
 .left-box::-webkit-scrollbar {
 	width: 4px;
 }
@@ -76,6 +75,10 @@
 	top: 10.5em;
 }

+.left-box.without-tabbar {
+	top: 3em;
+}
+
 .right-box {
 	position: fixed;
 	top: 7.5em;
@@ -95,3 +98,7 @@
 .right-box::-webkit-scrollbar {
 	width: 4px;
 }
+
+.right-box.without-tabbar {
+	top: 3em;
+}
--- a/web/views/@default/@left_menu_top.html
+++ b/web/views/@default/@left_menu_top.html
@@ -0,0 +1,9 @@
+<div class="margin"></div>
+
+<div class="left-box without-tabbar" :class="{disabled:leftMenuItemIsDisabled}">
+	<div class="ui menu text blue vertical small">
+		<a class="item" v-for="item in leftMenuItems" :href="item.url" :class="{active:item.isActive, separator:item.name == '-', on:item.isOn, off:item.isOff}">
+			<span v-if="item.name != '-'"><i class="icon play tiny" :style="{'visibility':item.isActive ? 'visible' : 'hidden'}"></i>{{item.name}}<var v-if="item.isOff">关</var></span>
+		</a>
+	</div>
+</div>
--- a/web/views/@default/servers/components/cache/clean.html
+++ b/web/views/@default/servers/components/cache/clean.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "policy_menu"}

 	<h3>选择集群</h3>
--- a/web/views/@default/servers/components/cache/index.html
+++ b/web/views/@default/servers/components/cache/index.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	<second-menu>
 		<menu-item href="/servers/components/cache" code="index">列表</menu-item>
 		<span class="item">|</span>
--- a/web/views/@default/servers/components/cache/policy.html
+++ b/web/views/@default/servers/components/cache/policy.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "policy_menu"}

 	<table class="ui table definition selectable">
--- a/web/views/@default/servers/components/cache/preheat.html
+++ b/web/views/@default/servers/components/cache/preheat.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "policy_menu"}

 	<h3>选择集群</h3>
--- a/web/views/@default/servers/components/cache/purge.html
+++ b/web/views/@default/servers/components/cache/purge.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "policy_menu"}

 	<h3>选择集群</h3>
--- a/web/views/@default/servers/components/cache/stat.html
+++ b/web/views/@default/servers/components/cache/stat.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "policy_menu"}

 	<h3>选择集群</h3>
--- a/web/views/@default/servers/components/cache/test.html
+++ b/web/views/@default/servers/components/cache/test.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "policy_menu"}

 	<h3>选择集群</h3>
--- a/web/views/@default/servers/components/cache/update.html
+++ b/web/views/@default/servers/components/cache/update.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "policy_menu"}

 	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
--- a/web/views/@default/servers/components/groups/index.html
+++ b/web/views/@default/servers/components/groups/index.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	<first-menu>
 		<menu-item href="/servers/components/groups" active="true">列表</menu-item>
 		<span class="item">|</span>
--- a/web/views/@default/servers/components/index.html
+++ b/web/views/@default/servers/components/index.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
 		<input type="hidden" name="globalConfigJSON" :value="JSON.stringify(globalConfig)"/>
 		<table class="ui table selectable definition">
--- a/web/views/@default/servers/components/ip-library/index.html
+++ b/web/views/@default/servers/components/ip-library/index.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	<first-menu>
 		<menu-item v-for="type in types" :href="'/servers/components/ip-library?type=' + type.code" :active="type.code == selectedType">{{type.name}}</menu-item>
 		<span class="item">|</span>
--- a/web/views/@default/servers/components/log/index.html
+++ b/web/views/@default/servers/components/log/index.html
@@ -1,6 +1,6 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	<p class="ui message">此功能暂未开放敬请期待。</p>
 </div>
--- a/web/views/@default/servers/components/ssl/index.html
+++ b/web/views/@default/servers/components/ssl/index.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	<second-menu>
 		<menu-item href="/servers/components/ssl" :active="type == ''">所有证书({{countAll}})</menu-item>
 		<menu-item href="/servers/components/ssl?type=ca" :active="type == 'ca'">CA证书({{countCA}})</menu-item>
--- a/web/views/@default/servers/components/waf/export.html
+++ b/web/views/@default/servers/components/waf/export.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "waf_menu"}

 	<p class="ui message">此功能暂未开放，敬请期待。</p>
--- a/web/views/@default/servers/components/waf/group.html
+++ b/web/views/@default/servers/components/waf/group.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "waf_menu"}

 	<h3>分组<a href="" @click.prevent="updateGroup(group.id)">[修改]</a></h3>
--- a/web/views/@default/servers/components/waf/groups.html
+++ b/web/views/@default/servers/components/waf/groups.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "waf_menu"}

 	<second-menu style="margin-top:-1em">
--- a/web/views/@default/servers/components/waf/import.html
+++ b/web/views/@default/servers/components/waf/import.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "waf_menu"}

 	<p class="ui message">此功能暂未开放，敬请期待。</p>
--- a/web/views/@default/servers/components/waf/index.html
+++ b/web/views/@default/servers/components/waf/index.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	<second-menu>
 		<menu-item href="/servers/components/waf" code="index">列表</menu-item>
 		<span class="item">|</span>
--- a/web/views/@default/servers/components/waf/ipadmin/index.html
+++ b/web/views/@default/servers/components/waf/ipadmin/index.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "../waf_menu"}
 	{$template "menu"}

--- a/web/views/@default/servers/components/waf/ipadmin/lists.html
+++ b/web/views/@default/servers/components/waf/ipadmin/lists.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "../waf_menu"}
 	{$template "menu"}

--- a/web/views/@default/servers/components/waf/ipadmin/provinces.html
+++ b/web/views/@default/servers/components/waf/ipadmin/provinces.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "../waf_menu"}
 	{$template "menu"}

--- a/web/views/@default/servers/components/waf/log.html
+++ b/web/views/@default/servers/components/waf/log.html
@@ -9,9 +9,9 @@
 <link rel="stylesheet" href="/js/pikaday.triangle.css"/>
 {$end}

-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "waf_menu"}

 	<form method="get" class="ui form small" :action="path" autocomplete="off">
--- a/web/views/@default/servers/components/waf/policy.html
+++ b/web/views/@default/servers/components/waf/policy.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "waf_menu"}

 	<table class="ui table definition selectable">
--- a/web/views/@default/servers/components/waf/test.html
+++ b/web/views/@default/servers/components/waf/test.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "waf_menu"}

 	<p class="ui message">此功能暂未开放，敬请期待。</p>
--- a/web/views/@default/servers/components/waf/update.html
+++ b/web/views/@default/servers/components/waf/update.html
@@ -1,7 +1,7 @@
 {$layout}
-{$template "/left_menu"}
+{$template "/left_menu_top"}

-<div class="right-box">
+<div class="right-box without-tabbar">
 	{$template "waf_menu"}

 	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">