管理界面可以切换风格

internal/configloaders/admin_module.go

@@ -44,6 +44,7 @@ func loadAdminModuleMapping() (map[int64]*AdminModuleList, error) {
 		list := &AdminModuleList{
 			IsSuper:  m.IsSuper,
 			Fullname: m.Fullname,
+			Theme:    m.Theme,
 		}
 
 		for _, pbModule := range m.Modules {
@@ -132,6 +133,29 @@ func FindAdminFullname(adminId int64) string {
 	return ""
 }
 
+// FindAdminTheme 查找某个管理员选择的风格
+func FindAdminTheme(adminId int64) string {
+	locker.Lock()
+	defer locker.Unlock()
+
+	list, ok := sharedAdminModuleMapping[adminId]
+	if ok {
+		return list.Theme
+	}
+	return ""
+}
+
+// UpdateAdminTheme 设置某个管理员的风格
+func UpdateAdminTheme(adminId int64, theme string) {
+	locker.Lock()
+	defer locker.Unlock()
+
+	list, ok := sharedAdminModuleMapping[adminId]
+	if ok {
+		list.Theme = theme
+	}
+}
+
 // AllModuleMaps 所有权限列表
 func AllModuleMaps() []maps.Map {
 	m := []maps.Map{

internal/configloaders/admin_module_list.go

@@ -6,6 +6,7 @@ type AdminModuleList struct {
 	IsSuper  bool
 	Modules  []*systemconfigs.AdminModule
 	Fullname string
+	Theme    string
 }
 
 func (this *AdminModuleList) Allow(module string) bool {

internal/web/actions/default/index/index.go

@@ -70,7 +70,7 @@ func (this *IndexAction) RunGet(params struct {
 	this.Show()
 }
 
-// 提交
+// RunPost 提交
 func (this *IndexAction) RunPost(params struct {
 	Token    string
 	Username string

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

@@ -29,6 +29,7 @@ func init() {
 			Post("/eventLevelOptions", new(EventLevelOptionsAction)).
 			Post("/showTip", new(ShowTipAction)).
 			Post("/hideTip", new(HideTipAction)).
+			Post("/theme", new(ThemeAction)).
 
 			EndAll()
 	})

internal/web/actions/default/ui/theme.go

@@ -0,0 +1,47 @@
+// Copyright 2021 Liuxiangchao iwind.liu@gmail.com. All rights reserved.
+
+package ui
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/configloaders"
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+)
+
+type ThemeAction struct {
+	actionutils.ParentAction
+}
+
+func (this *ThemeAction) RunPost(params struct{}) {
+	theme := configloaders.FindAdminTheme(this.AdminId())
+
+	var themes = []string{"theme1", "theme2", "theme3"}
+	var nextTheme = "theme1"
+	if len(theme) == 0 {
+		nextTheme = "theme2"
+	} else {
+		for index, t := range themes {
+			if t == theme {
+				if index < len(themes)-1 {
+					nextTheme = themes[index+1]
+					break
+				}
+			}
+		}
+	}
+
+	_, err := this.RPC().AdminRPC().UpdateAdminTheme(this.AdminContext(), &pb.UpdateAdminThemeRequest{
+		AdminId: this.AdminId(),
+		Theme:   nextTheme,
+	})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	configloaders.UpdateAdminTheme(this.AdminId(), nextTheme)
+
+	this.Data["theme"] = nextTheme
+
+	this.Success()
+}

internal/web/helpers/user_must_auth.go

@@ -91,6 +91,7 @@ func (this *userMustAuth) BeforeAction(actionPtr actions.ActionWrapper, paramNam
 	action.Data["teaFaviconFileId"] = config.FaviconFileId
 	action.Data["teaLogoFileId"] = config.LogoFileId
 	action.Data["teaUsername"] = configloaders.FindAdminFullname(adminId)
+	action.Data["teaTheme"] = configloaders.FindAdminTheme(adminId)
 
 	action.Data["teaUserAvatar"] = ""
 

web/public/js/utils.js

@@ -275,7 +275,7 @@ window.teaweb = {
 
 		Swal.fire(config);
 	},
-	successToast: function (message, timeout) {
+	successToast: function (message, timeout, callback) {
 		if (timeout == null) {
 			timeout = 2000
 		}
@@ -288,7 +288,12 @@ window.teaweb = {
 			icon: "success",
 			width: width,
 			timer: timeout,
-			showConfirmButton: false
+			showConfirmButton: false,
+			onAfterClose: function () {
+				if (typeof callback == "function") {
+					callback()
+				}
+			}
 		});
 	},
 	successRefresh: function (message) {

web/views/@default/@layout.css

@@ -273,7 +273,6 @@ body.expanded .main {
   z-index: 1000;
   overflow-x: auto;
   border: 0 !important;
-  background: #14539A !important;
 }
 .top-nav img.avatar {
   width: 1.6em !important;
@@ -297,6 +296,15 @@ body.expanded .main {
 .top-nav .item.red {
   color: red !important;
 }
+.top-nav.theme1 {
+  background: #14539A !important;
+}
+.top-nav.theme2 {
+  background: #276AC6 !important;
+}
+.top-nav.theme3 {
+  background: #007D9C !important;
+}
 .top-nav::-webkit-scrollbar {
   height: 2px;
 }
@@ -410,14 +418,30 @@ body.expanded .main {
   top: 2em;
   bottom: 0;
   overflow-y: auto;
-  background: #14539A !important;
   z-index: 10;
 }
 .main-menu .menu {
-  background: #14539A !important;
   border: 0 !important;
   box-shadow: none !important;
 }
+.main-menu.theme1 {
+  background: #14539A !important;
+}
+.main-menu.theme1 .menu {
+  background: #14539A !important;
+}
+.main-menu.theme2 {
+  background: #276AC6 !important;
+}
+.main-menu.theme2 .menu {
+  background: #276AC6 !important;
+}
+.main-menu.theme3 {
+  background: #007D9C !important;
+}
+.main-menu.theme3 .menu {
+  background: #007D9C !important;
+}
 .main-menu::-webkit-scrollbar {
   width: 2px;
 }

web/views/@default/@layout.html

@@ -25,7 +25,7 @@
 
 <div>
     <!-- 顶部导航 -->
-    <div class="ui menu top-nav blue inverted small borderless" v-cloak="">
+    <div class="ui menu top-nav blue inverted small borderless" :class="(teaTheme == null || teaTheme.length == 0) ? 'theme1': teaTheme" v-cloak="">
         <a href="/" class="item">
 			<i class="ui icon leaf" v-if="teaLogoFileId == 0"></i><img v-if="teaLogoFileId > 0" :src="'/ui/image/' + teaLogoFileId" style="width: auto;height: 1.6em"/> &nbsp; {{teaTitle}}&nbsp;<sup v-if="teaShowVersion">v{{teaVersion}}</sup> &nbsp;
 		</a>
@@ -58,6 +58,9 @@
                 <span class="hover-span"><span class="disabled">{{teaUsername}}</span></span>
 			</a>
 
+            <!-- 背景颜色 -->
+            <a href="" class="item" title="点击切换背景颜色" @click.prevent="changeTheme()"><i class="icon adjust"></i></a>
+
             <!-- 退出登录 -->
             <a :href="Tea.url('logout')" class="item" title="安全退出登录"><i class="icon sign out"></i>
                 <span class="hover-span"><span class="disabled">退出登录</span></span>
@@ -66,7 +69,7 @@
     </div>
 
     <!-- 左侧主菜单 -->
-    <div class="main-menu" v-cloak="">
+    <div class="main-menu" :class="(teaTheme == null || teaTheme.length == 0) ? 'theme1': teaTheme" v-cloak="">
         <div class="ui labeled menu vertical blue inverted tiny borderless">
 			<div class="item"></div>
             <!--<a :href="Tea.url('dashboard')" class="item" :class="{active:teaMenu == 'dashboard'}">

web/views/@default/@layout.js

@@ -21,6 +21,17 @@ Tea.context(function () {
         this.loadDNSTasks()
     })
 
+	/**
+	 * 切换模板
+	 */
+	this.changeTheme = function () {
+		this.$post("/ui/theme")
+			.success(function (resp) {
+				teaweb.successToast("界面风格已切换")
+				this.teaTheme = resp.data.theme
+			})
+	}
+
     /**
      * 左侧子菜单
      */

web/views/@default/@layout.less

@@ -241,7 +241,6 @@ body.expanded .main {
 	z-index: 1000;
 	overflow-x: auto;
 	border: 0 !important;
-	background: #14539A !important;
 
 	img.avatar {
 		width: 1.6em !important;
@@ -279,6 +278,18 @@ body.expanded .main {
 	}
 }
 
+.top-nav.theme1 {
+	background: #14539A !important;
+}
+
+.top-nav.theme2 {
+	background: #276AC6 !important;
+}
+
+.top-nav.theme3 {
+	background: #007D9C !important;
+}
+
 .top-nav::-webkit-scrollbar {
 	height: 2px;
 }
@@ -419,16 +430,35 @@ body.expanded .main {
 	top: 2em;
 	bottom: 0;
 	overflow-y: auto;
-	background: #14539A !important;
 	z-index: 10;
 
 	.menu {
-		background: #14539A !important;
 		border: 0 !important;
 		box-shadow: none !important;
 	}
 }
 
+.main-menu.theme1 {
+	background: #14539A !important;
+	.menu {
+		background: #14539A !important;
+	}
+}
+
+.main-menu.theme2 {
+	background: #276AC6 !important;
+	.menu {
+		background: #276AC6 !important;
+	}
+}
+
+.main-menu.theme3 {
+	background: #007D9C !important;
+	.menu {
+		background: #007D9C !important;
+	}
+}
+
 .main-menu::-webkit-scrollbar {
 	width: 2px;
 }