优化左侧菜单显示

internal/web/helpers/user_must_auth.go

@@ -140,10 +140,11 @@ func (this *userMustAuth) modules(adminId int64) []maps.Map {
 			"icon":   "dashboard",
 		},
 		{
-			"code":   "servers",
-			"module": configloaders.AdminModuleCodeServer,
-			"name":   "网站服务",
-			"icon":   "clone outsize",
+			"code":     "servers",
+			"module":   configloaders.AdminModuleCodeServer,
+			"name":     "网站服务",
+			"subtitle": "服务列表",
+			"icon":     "clone outsize",
 			"subItems": []maps.Map{
 				{
 					"name": "通用设置",
@@ -173,10 +174,11 @@ func (this *userMustAuth) modules(adminId int64) []maps.Map {
 			},
 		},
 		{
-			"code":   "clusters",
-			"module": configloaders.AdminModuleCodeNode,
-			"name":   "边缘节点",
-			"icon":   "cloud",
+			"code":     "clusters",
+			"module":   configloaders.AdminModuleCodeNode,
+			"name":     "边缘节点",
+			"subtitle": "集群列表",
+			"icon":     "cloud",
 			"subItems": []maps.Map{
 				{
 					"name": "SSH认证",
@@ -191,10 +193,11 @@ func (this *userMustAuth) modules(adminId int64) []maps.Map {
 			},
 		},
 		{
-			"code":   "dns",
-			"module": configloaders.AdminModuleCodeDNS,
-			"name":   "域名解析",
-			"icon":   "globe",
+			"code":     "dns",
+			"module":   configloaders.AdminModuleCodeDNS,
+			"name":     "域名解析",
+			"subtitle": "集群列表",
+			"icon":     "globe",
 			"subItems": []maps.Map{
 				{
 					"name": "问题修复",
@@ -233,10 +236,11 @@ func (this *userMustAuth) modules(adminId int64) []maps.Map {
 			"icon":   "history",
 		},
 		{
-			"code":   "settings",
-			"module": configloaders.AdminModuleCodeSetting,
-			"name":   "系统设置",
-			"icon":   "setting",
+			"code":     "settings",
+			"module":   configloaders.AdminModuleCodeSetting,
+			"name":     "系统设置",
+			"subtitle": "基本设置",
+			"icon":     "setting",
 			"subItems": []maps.Map{
 				{
 					"name": "高级设置",

web/views/@default/@layout.css

@@ -201,8 +201,18 @@ p.margin {
 .main-menu .ui.labeled.icon.menu .item {
   font-size: 0.9em;
 }
+.main-menu .ui.menu .item .subtitle {
+  display: none;
+}
+.main-menu .ui.menu .item.expend .subtitle {
+  display: block;
+  font-size: 10px;
+  padding-left: 2.0em;
+  margin-top: 0.5em;
+  color: grey;
+}
 .main-menu .ui.menu .sub-items .item {
-  padding-left: 2.82em !important;
+  padding-left: 2.8em !important;
 }
 .main-menu .ui.menu .sub-items .item.active {
   background-color: #2185d0 !important;

web/views/@default/@layout.html

@@ -74,12 +74,13 @@
 
             <!-- 模块 -->
 			<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}">
+				<a class="item" :href="Tea.url(module.code)" :class="{active:teaMenu == module.code && teaSubMenu.length == 0, separator:module.code.length == 0, expend: teaMenu == module.code}">
 					<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>
+                    <div class="subtitle" v-if="module.subtitle != null && module.subtitle.length > 0">{{module.subtitle}}</div>
 				</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>

web/views/@default/@layout.less

@@ -146,12 +146,22 @@ div.margin, p.margin {
 .main-menu {
 	.ui.menu {
 		.item {
+			.subtitle {
+				display: none;
+			}
+		}
 
+		.item.expend .subtitle {
+			display: block;
+			font-size: 10px;
+			padding-left: 2.0em;
+			margin-top: 0.5em;
+			color: grey;
 		}
 
 		.sub-items {
 			.item {
-				padding-left: 2.82em !important;
+				padding-left: 2.8em !important;
 			}
 
 			.item.active {