✨ add theme hotaru

cmd/dashboard/controller/common_page.go

@@ -35,7 +35,7 @@ func (cp *commonPage) home(c *gin.Context) {
 	if ok {
 		data["Admin"] = u
 	}
-	c.HTML(http.StatusOK, "page/home", mygin.CommonEnvironment(c, data))
+	c.HTML(http.StatusOK, "theme-"+dao.Conf.Site.Theme+"/home", mygin.CommonEnvironment(c, data))
 }
 
 var upgrader = websocket.Upgrader{}

cmd/dashboard/controller/guest_page.go

@@ -39,7 +39,7 @@ func (gp *guestPage) serve() {
 }
 
 func (gp *guestPage) login(c *gin.Context) {
-	c.HTML(http.StatusOK, "page/login", mygin.CommonEnvironment(c, gin.H{
+	c.HTML(http.StatusOK, "dashboard/login", mygin.CommonEnvironment(c, gin.H{
 		"Title": "登录",
 	}))
 }

cmd/dashboard/controller/member_api.go

@@ -30,6 +30,7 @@ func (ma *memberAPI) serve() {
 
 	mr.POST("/logout", ma.logout)
 	mr.POST("/server", ma.addOrEditServer)
+	mr.POST("/setting", ma.updateSetting)
 	mr.DELETE("/server/:id", ma.delete)
 }
 
@@ -124,3 +125,33 @@ func (ma *memberAPI) logout(c *gin.Context) {
 		Code: http.StatusOK,
 	})
 }
+
+type settingForm struct {
+	Title string
+	Admin string
+	Theme string
+}
+
+func (ma *memberAPI) updateSetting(c *gin.Context) {
+	var sf settingForm
+	if err := c.ShouldBind(&sf); err != nil {
+		c.JSON(http.StatusOK, model.Response{
+			Code:    http.StatusBadRequest,
+			Message: fmt.Sprintf("请求错误：%s", err),
+		})
+		return
+	}
+	dao.Conf.Site.Brand = sf.Title
+	dao.Conf.Site.Theme = sf.Theme
+	dao.Conf.GitHub.Admin = sf.Admin
+	if err := dao.Conf.Save(); err != nil {
+		c.JSON(http.StatusOK, model.Response{
+			Code:    http.StatusBadRequest,
+			Message: fmt.Sprintf("请求错误：%s", err),
+		})
+		return
+	}
+	c.JSON(http.StatusOK, model.Response{
+		Code: http.StatusOK,
+	})
+}

cmd/dashboard/controller/member_page.go

@@ -22,13 +22,21 @@ func (mp *memberPage) serve() {
 		Redirect: "/login",
 	}))
 	mr.GET("/server", mp.server)
+	mr.GET("/setting", mp.setting)
 }
 
 func (mp *memberPage) server(c *gin.Context) {
 	dao.ServerLock.RLock()
 	defer dao.ServerLock.RUnlock()
-	c.HTML(http.StatusOK, "page/server", mygin.CommonEnvironment(c, gin.H{
+	c.HTML(http.StatusOK, "dashboard/server", mygin.CommonEnvironment(c, gin.H{
 		"Title":   "服务器管理",
 		"Servers": dao.ServerList,
 	}))
 }
+
+func (mp *memberPage) setting(c *gin.Context) {
+	c.HTML(http.StatusOK, "dashboard/setting", mygin.CommonEnvironment(c, gin.H{
+		"Title": "系统设置",
+		"Conf":  dao.Conf,
+	}))
+}

go.mod

@@ -22,4 +22,5 @@ require (
 	golang.org/x/oauth2 v0.0.0-20200902213428-5d25da1a8d43
 	google.golang.org/grpc v1.33.1
 	google.golang.org/protobuf v1.25.0
+	gopkg.in/yaml.v2 v2.2.8
 )

model/config.go

@@ -2,9 +2,12 @@ package model
 
 import (
 	"fmt"
+	"io/ioutil"
+	"os"
 
 	"github.com/fsnotify/fsnotify"
 	"github.com/spf13/viper"
+	"gopkg.in/yaml.v2"
 )
 
 // Config ..
@@ -13,6 +16,7 @@ type Config struct {
 	Site  struct {
 		Brand      string // 站点名称
 		CookieName string // 浏览器 Cookie 名称
+		Theme      string
 	}
 	GitHub struct {
 		Admin        string // 管理员ID列表
@@ -38,11 +42,23 @@ func (c *Config) Read(path string) error {
 		return err
 	}
 
+	if c.Site.Theme == "" {
+		c.Site.Theme = "default"
+	}
+
 	c.v.OnConfigChange(func(in fsnotify.Event) {
-		fmt.Println("配置文件更新，重载配置")
 		c.v.Unmarshal(c)
+		fmt.Println("配置文件更新，重载配置", c)
 	})
 
 	go c.v.WatchConfig()
 	return nil
 }
+
+func (c *Config) Save() error {
+	data, err := yaml.Marshal(c)
+	if err != nil {
+		return err
+	}
+	return ioutil.WriteFile(c.v.ConfigFileUsed(), data, os.ModePerm)
+}

pkg/mygin/error.go

@@ -20,7 +20,7 @@ type ErrInfo struct {
 // ShowErrorPage ..
 func ShowErrorPage(c *gin.Context, i ErrInfo, isPage bool) {
 	if isPage {
-		c.HTML(http.StatusOK, "page/error", CommonEnvironment(c, gin.H{
+		c.HTML(http.StatusOK, "dashboard/error", CommonEnvironment(c, gin.H{
 			"Code":  i.Code,
 			"Title": i.Title,
 			"Msg":   i.Msg,

resource/static/theme-hotaru/css/darkmode.css

@@ -0,0 +1,47 @@
+/* Dark mode */
+
+#darkmodeButton {
+    background-color: black;
+    width: 3rem;
+    height: 3rem;
+    position: fixed;
+    bottom: 2rem;
+    right: 0.5rem;
+    z-index: 9999;
+    border-radius: 50%;
+    outline: 0;
+}
+
+body.dark #darkmodeButton {
+    background-color: white;
+}
+
+body.dark {
+    background: #263236;
+    color: #aaa;
+}
+
+body.dark table.table-striped tr.even {
+    background-color: #212f36;
+}
+
+body.dark table.table-striped tr.odd {
+    background-color: #2f3c42;
+}
+
+body.dark tr.expandRow {
+    background-color: #263238 !important;
+}
+
+body.dark .panel {
+    background-color: #384d58;
+    color: #aaa;
+}
+
+body.dark .panel h3, body.dark .panel span {
+    color: #aaa;
+}
+
+body.dark .page-section {
+    border-bottom: 1px solid #212f36;
+}

resource/static/theme-hotaru/css/main.css

@@ -0,0 +1,312 @@
+body {
+    margin: 0;
+    color: #616366;
+    background: url(../img/bg_parts.png) repeat-y left top, url(../img/bg.png) repeat left top;
+}
+
+a {
+    -webkit-transition: all ease-in .15s;
+    -moz-transition: all ease-in .15s;
+    -ms-transition: all ease-in .15s;
+    -o-transition: all ease-in .15s;
+    transition: all ease-in .15s;
+}
+
+th {
+    padding: 0;
+    text-align: center;
+}
+
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+@media (max-width: 991px) {
+    .container {
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+}
+
+@media (max-width: 767px) {
+    .container {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
+.page-section {
+    padding-top: 48px;
+    padding-bottom: 55px;
+    border-bottom: 1px solid #edeff2;
+}
+
+@media (max-width: 991px) {
+    .page-section {
+        padding-top: 25px;
+        padding-bottom: 35px;
+    }
+}
+
+.location-header {
+    padding: 0 0 20px 0;
+}
+
+.location-header .h4 {
+    margin: 0;
+}
+
+.location-header .h4 small {
+    display: block;
+    padding: 3px 0 0 0;
+    color: #919699;
+    font-size: 12px;
+    font-weight: 300;
+    text-transform: none;
+}
+
+.location-info {
+    margin: 0 0 -5px 0;
+    font-size: 14px;
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translateX(0) translateY(0);
+    transform: translateX(0) translateY(0);
+    -webkit-transition: all ease-in .25s, transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
+    -moz-transition: all ease-in .25s, transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all ease-in .25s, transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.location-info>li {
+    margin: 0;
+}
+
+.location-header>i {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    font-size: 24px;
+}
+
+.location-progress .progress {
+    margin: 0 0 15px 0;
+}
+
+.progress {
+    background-color: #d5dade;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.progress-bar {
+    background: linear-gradient(to right, #44ce78 0%, #43ce9f 100%) !important;
+}
+
+.progress-bar-danger {
+    background: #d9534f !important;
+}
+
+.progress-bar-warning {
+    background: #f0ad4e !important;
+}
+
+.progress-sm {
+    height: 5px;
+}
+
+.table {
+    /* font-size: 0.9rem; */
+    font-weight: 800;
+}
+
+.table>thead>tr>th:first-child {
+    padding-left: 5px;
+}
+
+.table>thead>tr>th:last-child {
+    padding-right: 5px;
+}
+
+.hotaru-cover p,
+h1 {
+    color: white;
+    font-weight: bolder;
+}
+
+
+@media only screen and (min-width: 992px) {
+    .hotaru-cover {
+        background: url(../img/tenshi_l.png) center no-repeat;
+        background-size: 100%;
+    }
+}
+
+@media only screen and (max-width: 992px) {
+
+    #location,
+    tr td:nth-child(4) {
+        display: none;
+        visibility: hidden;
+    }
+
+    .hotaru-cover {
+        background: url(../img/tenshi_l.png) center no-repeat;
+        background-size: 100%;
+    }
+}
+
+@media only screen and (max-width: 720px) {
+
+    #type,
+    tr td:nth-child(3) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #location,
+    tr td:nth-child(4) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #uptime,
+    tr td:nth-child(5) {
+        display: none;
+        visibility: hidden;
+    }
+
+    .hotaru-cover {
+        background: url(../img/tenshi.png) no-repeat;
+        background-size: 100%;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+
+    #type,
+    tr td:nth-child(3) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #location,
+    tr td:nth-child(4) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #uptime,
+    tr td:nth-child(5) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #load,
+    tr td:nth-child(6) {
+        display: none;
+        visibility: hidden;
+    }
+
+    .hotaru-cover {
+        background: url(../img/tenshi.png) no-repeat;
+        background-size: 100%;
+    }
+}
+
+@media only screen and (max-width: 533px) {
+
+    #type,
+    tr td:nth-child(3) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #location,
+    tr td:nth-child(4) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #uptime,
+    tr td:nth-child(5) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #traffic,
+    tr td:nth-child(8) {
+        display: none;
+        visibility: hidden;
+    }
+
+    #load,
+    tr td:nth-child(6) {
+        display: none;
+        visibility: hidden;
+    }
+
+    .hotaru-cover {
+        background: url(../img/tenshi.png) no-repeat;
+        background-size: 100%;
+    }
+
+    @media only screen and (max-width: 450px) {
+        body {
+            font-size: 10px;
+        }
+
+        .content {
+            padding: 0;
+        }
+
+        #name,
+        tr td:nth-child(2) {
+            min-width: 20px;
+            max-width: 60px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        #type,
+        tr td:nth-child(3) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #location,
+        tr td:nth-child(4) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #uptime,
+        tr td:nth-child(5) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #traffic,
+        tr td:nth-child(8) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #hdd,
+        tr td:nth-child(11) {
+            display: none;
+            visibility: hidden;
+        }
+
+        #cpu,
+        #ram {
+            min-width: 20px;
+            max-width: 40px;
+        }
+
+        .hotaru-cover {
+            background: url(../img/tenshi.png) no-repeat;
+            background-size: 100%;
+        }
+    }