feat: 管理后台自定义代码

cmd/dashboard/controller/common_page.go

@@ -99,7 +99,6 @@ func (p *commonPage) service(c *gin.Context) {
 		"Title":              singleton.Localizer.MustLocalize(&i18n.LocalizeConfig{MessageID: "ServicesStatus"}),
 		"Services":           res.([]interface{})[0],
 		"CycleTransferStats": res.([]interface{})[1],
-		"CustomCode":         singleton.Conf.Site.CustomCode,
 	}))
 }
 
@@ -204,7 +203,6 @@ func (cp *commonPage) network(c *gin.Context) {
 	c.HTML(http.StatusOK, mygin.GetPreferredTheme(c, "/network"), mygin.CommonEnvironment(c, gin.H{
 		"Servers":         string(serversBytes),
 		"MonitorInfos":    string(monitorInfos),
-		"CustomCode":      singleton.Conf.Site.CustomCode,
 		"MaxTCPPingValue": singleton.Conf.MaxTCPPingValue,
 	}))
 }
@@ -254,8 +252,7 @@ func (cp *commonPage) home(c *gin.Context) {
 		return
 	}
 	c.HTML(http.StatusOK, mygin.GetPreferredTheme(c, "/home"), mygin.CommonEnvironment(c, gin.H{
-		"Servers":    string(stat),
-		"CustomCode": singleton.Conf.Site.CustomCode,
+		"Servers": string(stat),
 	}))
 }
 

cmd/dashboard/controller/controller.go

@@ -35,20 +35,27 @@ func ServeWeb(port uint) *http.Server {
 		pprof.Register(r)
 	}
 	r.Use(natGateway)
-	tmpl := template.New("").Funcs(funcMap)
-	var err error
-	tmpl, err = tmpl.ParseFS(resource.TemplateFS, "template/**/*.html")
-	if err != nil {
-		panic(err)
+	if os.Getenv("NZ_LOCAL_TEMPLATE") == "true" {
+		r.SetFuncMap(funcMap)
+		r.Use(mygin.RecordPath)
+		r.Static("/static", "resource/static")
+		r.LoadHTMLGlob("resource/template/**/*.html")
+	} else {
+		tmpl := template.New("").Funcs(funcMap)
+		var err error
+		tmpl, err = tmpl.ParseFS(resource.TemplateFS, "template/**/*.html")
+		if err != nil {
+			panic(err)
+		}
+		tmpl = loadThirdPartyTemplates(tmpl)
+		r.SetHTMLTemplate(tmpl)
+		r.Use(mygin.RecordPath)
+		staticFs, err := fs.Sub(resource.StaticFS, "static")
+		if err != nil {
+			panic(err)
+		}
+		r.StaticFS("/static", http.FS(staticFs))
 	}
-	tmpl = loadThirdPartyTemplates(tmpl)
-	r.SetHTMLTemplate(tmpl)
-	r.Use(mygin.RecordPath)
-	staticFs, err := fs.Sub(resource.StaticFS, "static")
-	if err != nil {
-		panic(err)
-	}
-	r.StaticFS("/static", http.FS(staticFs))
 	r.Static("/static-custom", "resource/static/custom")
 	routers(r)
 	page404 := func(c *gin.Context) {

cmd/dashboard/controller/member_api.go

@@ -908,6 +908,7 @@ type settingForm struct {
 	Theme                   string
 	DashboardTheme          string
 	CustomCode              string
+	CustomCodeDashboard     string
 	ViewPassword            string
 	IgnoredIPNotification   string
 	IPChangeNotificationTag string // IP变更提醒的通知组
@@ -973,6 +974,7 @@ func (ma *memberAPI) updateSetting(c *gin.Context) {
 	singleton.Conf.Site.Theme = sf.Theme
 	singleton.Conf.Site.DashboardTheme = sf.DashboardTheme
 	singleton.Conf.Site.CustomCode = sf.CustomCode
+	singleton.Conf.Site.CustomCodeDashboard = sf.CustomCodeDashboard
 	singleton.Conf.Site.ViewPassword = sf.ViewPassword
 	singleton.Conf.Oauth2.Admin = sf.Admin
 	// 保证NotificationTag不为空

model/config.go

@@ -80,12 +80,13 @@ type Config struct {
 	Debug    bool   // debug模式开关
 	Language string // 系统语言，默认 zh-CN
 	Site     struct {
-		Brand          string // 站点名称
-		CookieName     string // 浏览器 Cookie 名称
-		Theme          string
-		DashboardTheme string
-		CustomCode     string
-		ViewPassword   string // 前台查看密码
+		Brand               string // 站点名称
+		CookieName          string // 浏览器 Cookie 名称
+		Theme               string
+		DashboardTheme      string
+		CustomCode          string
+		CustomCodeDashboard string
+		ViewPassword        string // 前台查看密码
 	}
 	Oauth2 struct {
 		Type            string

pkg/mygin/mygin.go

@@ -26,6 +26,8 @@ func CommonEnvironment(c *gin.Context, data map[string]interface{}) gin.H {
 	data["Version"] = singleton.Version
 	data["Conf"] = singleton.Conf
 	data["Themes"] = model.Themes
+	data["CustomCode"] = singleton.Conf.Site.CustomCode
+	data["CustomCodeDashboard"] = singleton.Conf.Site.CustomCodeDashboard
 	// 是否是管理页面
 	data["IsAdminPage"] = adminPage[data["MatchedPath"].(string)]
 	// 站点标题

pkg/mygin/view_password.go

@@ -37,8 +37,7 @@ func ValidateViewPassword(opt ValidateViewPasswordOption) gin.HandlerFunc {
 		}
 		if opt.IsPage {
 			c.HTML(http.StatusOK, GetPreferredTheme(c, "/viewpassword"), CommonEnvironment(c, gin.H{
-				"Title":      singleton.Localizer.MustLocalize(&i18n.LocalizeConfig{MessageID: "VerifyPassword"}),
-				"CustomCode": singleton.Conf.Site.CustomCode,
+				"Title": singleton.Localizer.MustLocalize(&i18n.LocalizeConfig{MessageID: "VerifyPassword"}),
 			}))
 
 		} else {

resource/l10n/en-US.toml

@@ -331,6 +331,9 @@ other = "Frontend Theme"
 [CustomCodes]
 other = "Custom Codes (Style and Script)"
 
+[CustomCodesDashboard]
+other = "Custom Codes for Dashboard"
+
 [AccessPassword]
 other = "Frontend Access Password"
 

resource/l10n/es-ES.toml

@@ -331,6 +331,9 @@ other = "Tema de Frontend"
 [CustomCodes]
 other = "Códigos Personalizados (Incluye style y script)"
 
+[CustomCodesDashboard]
+other = "Custom Codes for Dashboard"
+
 [AccessPassword]
 other = "Contraseña de Acceso al Frontend"
 

resource/l10n/zh-CN.toml

@@ -331,6 +331,9 @@ other = "前台界面主题"
 [CustomCodes]
 other = "自定义代码（包括 style 和 script）"
 
+[CustomCodesDashboard]
+other = "Custom Codes for Dashboard"
+
 [AccessPassword]
 other = "前台访问密码"
 

resource/l10n/zh-TW.toml

@@ -331,6 +331,9 @@ other = "前台界面主題"
 [CustomCodes]
 other = "自定義代碼（包括 style 和 script）"
 
+[CustomCodesDashboard]
+other = "Custom Codes for Dashboard"
+
 [AccessPassword]
 other = "前台訪問密碼"
 

resource/static/darkmode.css

@@ -0,0 +1,148 @@
+.ui.container {
+    width: 95vw !important;
+    max-width: 1680px !important;
+}
+
+html[nz-theme='dark'] {
+    body {
+        background-color: #121212 !important;
+        color: #fff !important;
+    }
+
+    .ui.menu {
+        background-color: #282828 !important;
+    }
+
+    .ui.menu * {
+        color: #fff !important;
+    }
+
+    .accordion {
+        background-color: #282828 !important;
+    }
+
+    .accordion .title {
+        color: #fff !important;
+    }
+
+    .ui.card {
+        background-color: #3f3f3f !important;
+        border: none !important;
+        box-shadow: none !important;
+    }
+
+    .header {
+        color: #fff !important;
+    }
+
+    .description {
+        color: #fff !important;
+    }
+
+    .icon {
+        color: #fff !important;
+    }
+
+    .ui.popup {
+        background-color: #575757 !important;
+        color: #fff !important;
+    }
+
+    .ui.table {
+        background-color: #282828 !important;
+        color: #fff !important;
+    }
+
+    .ui thead th {
+        background-color: #3f3f3f !important;
+        color: #fff !important;
+    }
+
+    .ui.buttons .button {
+        background-color: #3f3f3f !important;
+        color: #fff !important;
+    }
+
+    .ui.modal {
+        background-color: #282828 !important;
+    }
+
+    .ui.modal * {
+        color: #fff !important;
+    }
+
+    textarea,
+    input,
+    select,
+    .dropdown {
+        background-color: #3f3f3f !important;
+        color: #fff !important;
+    }
+
+    .ui.message {
+        background-color: unset !important;
+    }
+
+    .ui.dropdown .menu {
+        background-color: #575757 !important;
+        color: #fff !important;
+    }
+
+    .ui.modal>.header {
+        background-color: #3f3f3f !important;
+    }
+
+    .ui.modal>.content {
+        background-color: #282828 !important;
+    }
+
+    .ui.modal>.actions {
+        background-color: #3f3f3f !important;
+    }
+
+    #alert {
+        background-color: #3f3f3f !important;
+        color: #fff !important;
+    }
+
+    .ui.form .field>label {
+        color: unset !important;
+    }
+
+    .ui.segment {
+        background-color: #3f3f3f !important;
+    }
+
+    .ui.segment textarea,
+    input,
+    select,
+    .dropdown {
+        background-color: #575757 !important;
+        color: #fff !important;
+    }
+
+    form label {
+        color: #fff !important;
+    }
+
+    .ui.inverted.segment {
+        background-color: #121212 !important;
+    }
+
+    .ui.inverted.segment * {
+        color: #8b8b8b !important;
+    }
+
+    .menu .dropdown {
+        background-color: #282828 !important;
+        color: #fff !important;
+    }
+
+    .ui.menu .ui.dropdown .menu>.item {
+        color: #fff !important;
+    }
+
+    .login .ui.message{
+        color: #8b8b8b !important;
+    }
+}

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

@@ -1,46 +1,54 @@
 /* 屏幕适配 */
 @media only screen and (min-width:1200px) {
   .ui.container {
-    width:95% !important;
+    width: 95% !important;
     font-size: 90% !important;
     max-width: 1300px !important;
   }
 }
+
 @media only screen and (max-width:767px) {
-  .ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui) {
-    margin-top:0.4em !important;
+
+  .ui.card>.content>.header:not(.ui),
+  .ui.cards>.card>.content>.header:not(.ui) {
+    margin-top: 0.4em !important;
   }
-  .ui.menu .item>img:not(.ui){
+
+  .ui.menu .item>img:not(.ui) {
     width: 2.2rem;
   }
-  .ui.menu .item:before{
-    width:0.5px;
+
+  .ui.menu .item:before {
+    width: 0.5px;
   }
-  .ui.menu .item{
+
+  .ui.menu .item {
     padding: 0.9rem 0.55rem;
   }
-  .ui.large.menu{
+
+  .ui.large.menu {
     font-size: 1rem;
   }
 }
 
 i.icon {
-  color:#000;
-  width:1.2em !important;
+  color: #000;
+  width: 1.2em !important;
 }
+
 i.fi {
-    width:0.9em;
-    margin:0px 6px 0px 2px;
+  width: 0.9em;
+  margin: 0px 6px 0px 2px;
 }
 
 body {
-  content:" " !important;
-  background:fixed !important;
-  z-index:-1 !important;
-  top:0 !important;
-  right:0 !important;
-  bottom:0 !important;
-  left:0 !important;
+  content: " " !important;
+  background: fixed !important;
+  z-index: -1 !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
 }
 
 td {
@@ -65,79 +73,80 @@ td {
   padding-top: unset;
 }
 
-.login.nb-container > .grid {
+.login.nb-container>.grid {
   width: 100%;
   margin: 0 auto;
 }
 
-.login.nb-container > .grid .column {
+.login.nb-container>.grid .column {
   max-width: 450px;
 }
 
-.ui.menu .item-right:before{
-  width:0px;
+.ui.menu .item-right:before {
+  width: 0px;
 }
 
 .status.cards .flag {
   margin-right: 0 !important;
 }
 
-.status.cards .header > .info.icon {
+.status.cards .header>.info.icon {
   float: right;
   margin-right: 0;
 }
 
 .ui.grid {
-  margin-bottom:-0.5em
+  margin-bottom: -0.5em
 }
 
-.ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui){
+.ui.card>.content>.header:not(.ui),
+.ui.cards>.card>.content>.header:not(.ui) {
   line-height: 1em;
 }
 
 .status.cards .wide.column {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-  height:2.3rem !important;
+  height: 2.3rem !important;
 }
 
 .status.cards .wide.column:nth-child(1) {
-  margin-top:1.2rem !important;
+  margin-top: 1.2rem !important;
 }
 
 .status.cards .wide.column:nth-child(2) {
-  margin-top:1.2rem !important;
+  margin-top: 1.2rem !important;
 }
 
 .status.cards .three.wide.column {
   text-align: center;
-  width: 22%!important;
+  width: 22% !important;
 }
 
-.status.cards .thirteen.wide.column{
-  width: 78%!important;
-  padding-left:0;
+.status.cards .thirteen.wide.column {
+  width: 78% !important;
+  padding-left: 0;
 }
 
 .status.cards .description {
-  padding-bottom:0 !important;
+  padding-bottom: 0 !important;
 }
 
 .status.cards .flag {
-  margin-right:0.5rem !important;
+  margin-right: 0.5rem !important;
 }
 
-.status.cards .header > .info.icon {
+.status.cards .header>.info.icon {
   float: right;
-  margin-right:0 !important;
+  margin-right: 0 !important;
 }
 
 .ui.popup:before {
   display: none;
 }
 
-.closePopup{
-  color:rgb(10, 148, 242) !important;
+.closePopup {
+  color: rgb(10, 148, 242) !important;
   position: absolute;
   top: 7px;
   right: 10px;
@@ -150,26 +159,26 @@ td {
 }
 
 .ui.content {
-  margin:0 !important;
-  padding:1em !important;
+  margin: 0 !important;
+  padding: 1em !important;
 }
 
 .status.cards .ui.content.popup {
-  min-width:calc(100%)!important;
-  line-height:2rem !important;
-  border-radius:5px !important;
-  border:1px solid transparent !important;
-  font-family:Arial,Helvetica,sans-serif !important;
+  min-width: calc(100%) !important;
+  line-height: 2rem !important;
+  border-radius: 5px !important;
+  border: 1px solid transparent !important;
+  font-family: Arial, Helvetica, sans-serif !important;
 }
 
 .status.cards .outline.icon {
-  margin-right:1px !important;
+  margin-right: 1px !important;
 }
 
 .ui.progress .bar {
-  min-width:1.8em !important;
-  border-radius:5px !important;
-  line-height:1.65em !important;
+  min-width: 1.8em !important;
+  border-radius: 5px !important;
+  line-height: 1.65em !important;
   text-align: right;
   padding-right: 0.4em;
   color: rgba(255, 255, 255, 0.7);
@@ -182,7 +191,7 @@ td {
   align-items: center;
 }
 
-.service-status .delay-today > i {
+.service-status .delay-today>i {
   display: inline-block;
   width: 1.2em;
   height: 1.2em;

resource/template/common/footer.html

@@ -17,5 +17,6 @@
     })();
 </script>
 </body>
+
 </html>
 {{end}}

resource/template/common/header.html

@@ -11,7 +11,12 @@
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/semantic.min.css">
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/assets/font-logos.css">
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
-    <link rel="stylesheet" type="text/css" href="/static/main.css?v2022042314">
+    <link rel="stylesheet" type="text/css" href="/static/main.css?v20240813">
+    <link rel="stylesheet" type="text/css" href="/static/darkmode.css?v20240813">
+    <script>
+        document.documentElement.setAttribute('nz-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    </script>
 </head>
+{{if ts .CustomCodeDashboard}} {{.CustomCodeDashboard|safe}} {{end}}
 <body>
 {{end}}

resource/template/component/api.html

@@ -10,7 +10,7 @@
             </div>
         </form>
     </div>
-    <div class=" actions">
+    <div class="actions">
         <div class="ui negative button">{{tr "Cancel"}}</div>
         <button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
         </button>

resource/template/component/cron.html

@@ -60,7 +60,7 @@
             </p>
         </div>
     </div>
-    <div class=" actions">
+    <div class="actions">
         <div class="ui negative button">{{tr "Cancel"}}</div>
         <button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
         </button>

resource/template/component/server.html

@@ -71,7 +71,7 @@
             </div>
         </form>
     </div>
-    <div class=" actions">
+    <div class="actions">
         <div class="ui negative button">{{tr "Cancel"}}</div>
         <button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
         </button>

resource/template/dashboard-default/api.html

@@ -10,7 +10,7 @@
                 </button>
             </div>
         </div>
-        <table class="ui very basic table">
+        <table class="ui basic table">
             <thead>
             <tr>
                 <th>{{tr "Token"}}</th>

resource/template/dashboard-default/cron.html

@@ -10,7 +10,7 @@
                 </button>
             </div>
         </div>
-        <table class="ui very basic table">
+        <table class="ui basic table">
             <thead>
                 <tr>
                     <th>ID</th>

resource/template/dashboard-default/monitor.html

@@ -9,7 +9,7 @@
         </button>
       </div>
     </div>
-    <table class="ui very basic table">
+    <table class="ui basic table">
       <thead>
         <tr>
           <th>ID</th>

resource/template/dashboard-default/nat.html

@@ -10,7 +10,7 @@
                 </button>
             </div>
         </div>
-        <table class="ui very basic table">
+        <table class="ui basic table">
             <thead>
                 <tr>
                     <th>ID</th>

resource/template/dashboard-default/notification.html

@@ -10,7 +10,7 @@
                 </button>
             </div>
         </div>
-        <table class="ui very basic table">
+        <table class="ui basic table">
             <thead>
                 <tr>
                     <th>ID</th>
@@ -52,7 +52,7 @@
                 </button>
             </div>
         </div>
-        <table class="ui very basic table">
+        <table class="ui basic table">
             <thead>
                 <tr>
                     <th>ID</th>

resource/template/dashboard-default/server.html

@@ -19,7 +19,7 @@
                 </button>
             </div>
         </div>
-        <table class="ui very basic table">
+        <table class="ui basic table">
             <thead>
                 <tr>
                     <th><button onclick="checkAllServer()" class="ui mini nezha-primary-btn button">{{tr "SelectAll"}}</button></th>

resource/template/dashboard-default/setting.html

@@ -41,6 +41,10 @@
                 <label>{{tr "CustomCodes"}}</label>
                 <textarea name="CustomCode">{{.Conf.Site.CustomCode}}</textarea>
             </div>
+            <div class="field">
+                <label>{{tr "CustomCodesDashboard"}}</label>
+                <textarea name="CustomCodeDashboard">{{.Conf.Site.CustomCodeDashboard}}</textarea>
+            </div>
             <div class="field">
                 <label>{{tr "AccessPassword"}}</label>
                 <input type="text" name="ViewPassword" placeholder="" value="{{.Conf.Site.ViewPassword}}">
@@ -128,13 +132,13 @@
     })
     $('.checkbox').checkbox()
     $('#settingForm').find("select[name=Cover]").val({{.Conf.Cover }});
-    {{if .Conf.EnableIPChangeNotification}}
+    {{ if .Conf.EnableIPChangeNotification}}
     $('.checkbox.ip-change').checkbox('set checked')
     {{ end }}
-    {{if .Conf.EnablePlainIPInNotification}}
+    {{ if .Conf.EnablePlainIPInNotification}}
     $('.checkbox.plain-ip').checkbox('set checked')
     {{ end }}
-    {{if .Conf.DisableSwitchTemplateInFrontend }}
+    {{ if .Conf.DisableSwitchTemplateInFrontend }}
     $('.checkbox.disable-switch-template').checkbox('set checked')
     {{ end }}
 </script>

resource/template/theme-default/footer.html

@@ -10,8 +10,8 @@
 {{ if not .Conf.DisableSwitchTemplateInFrontend }}
 <script>
     function showSwitchTemplate(list, currentBackendTheme) {
-        console.log(list, currentBackendTheme);
-        console.log("currentBackendTheme:",currentBackendTheme);
+        // console.log(list, currentBackendTheme);
+        // console.log("currentBackendTheme:",currentBackendTheme);
     }
     showSwitchTemplate({{ .Themes }}, {{ .Conf.Site.Theme }})
 </script>

resource/template/theme-default/header.html

@@ -1,6 +1,7 @@
 {{define "theme-default/header"}}
 <!DOCTYPE html>
 <html lang="{{.Conf.Language}}">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,13 +15,17 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/flag-icons.min.css">
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
     <link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v20240616">
+    <link rel="stylesheet" type="text/css" href="/static/darkmode.css?v20240813">
     <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/semantic.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script>
     <script src="/static/semantic-ui-alerts.min.js"></script>
     <script src="/static/theme-default/js/mixin.js?v20240302"></script>
+    <script>
+        document.documentElement.setAttribute('nz-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    </script>
 </head>
+
 <body>
-{{end}} 
-            
+    {{end}}

resource/template/theme-default/network.html

@@ -18,7 +18,7 @@
         </div>
     </div>
     <div class="ui container">
-        <div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
+        <div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;overflow: hidden"></div>
     </div>
 </div>