From da8fb57268f450e43688c5d7d0af57a021c8a93d Mon Sep 17 00:00:00 2001 From: naiba Date: Tue, 13 Aug 2024 23:50:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=98=E8=AE=A4=E4=B8=BB=E9=A2=98=20?= =?UTF-8?q?dark=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cmd/dashboard/controller/controller.go | 33 ++-- resource/static/darkmode.css | 148 ++++++++++++++++++ resource/static/theme-default/css/main.css | 111 +++++++------ resource/template/common/footer.html | 4 +- resource/template/common/header.html | 3 +- resource/template/component/api.html | 2 +- resource/template/component/cron.html | 2 +- resource/template/component/server.html | 2 +- resource/template/dashboard-default/api.html | 2 +- resource/template/dashboard-default/cron.html | 2 +- .../template/dashboard-default/monitor.html | 2 +- resource/template/dashboard-default/nat.html | 2 +- .../dashboard-default/notification.html | 4 +- .../template/dashboard-default/server.html | 2 +- resource/template/theme-default/footer.html | 5 +- resource/template/theme-default/header.html | 1 + resource/template/theme-default/network.html | 2 +- 17 files changed, 248 insertions(+), 79 deletions(-) create mode 100644 resource/static/darkmode.css diff --git a/cmd/dashboard/controller/controller.go b/cmd/dashboard/controller/controller.go index 9279769..6628781 100644 --- a/cmd/dashboard/controller/controller.go +++ b/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) { diff --git a/resource/static/darkmode.css b/resource/static/darkmode.css new file mode 100644 index 0000000..7afaf28 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/resource/static/theme-default/css/main.css b/resource/static/theme-default/css/main.css index e464120..a4e83f1 100644 --- a/resource/static/theme-default/css/main.css +++ b/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; diff --git a/resource/template/common/footer.html b/resource/template/common/footer.html index 015e6ae..1fc1fda 100644 --- a/resource/template/common/footer.html +++ b/resource/template/common/footer.html @@ -14,8 +14,10 @@ + {{end}} \ No newline at end of file diff --git a/resource/template/common/header.html b/resource/template/common/header.html index d8b382f..e723e96 100644 --- a/resource/template/common/header.html +++ b/resource/template/common/header.html @@ -11,7 +11,8 @@ - + + {{end}} \ No newline at end of file diff --git a/resource/template/component/api.html b/resource/template/component/api.html index 02b6c6c..6d613e0 100644 --- a/resource/template/component/api.html +++ b/resource/template/component/api.html @@ -10,7 +10,7 @@ -
+
{{tr "Cancel"}}
diff --git a/resource/template/component/cron.html b/resource/template/component/cron.html index 1ac3463..ecaf653 100644 --- a/resource/template/component/cron.html +++ b/resource/template/component/cron.html @@ -60,7 +60,7 @@

-
+
{{tr "Cancel"}}
diff --git a/resource/template/component/server.html b/resource/template/component/server.html index 6635f50..24bb58f 100644 --- a/resource/template/component/server.html +++ b/resource/template/component/server.html @@ -71,7 +71,7 @@
-
+
{{tr "Cancel"}}
diff --git a/resource/template/dashboard-default/api.html b/resource/template/dashboard-default/api.html index cf92564..9a3fc3d 100644 --- a/resource/template/dashboard-default/api.html +++ b/resource/template/dashboard-default/api.html @@ -10,7 +10,7 @@
- +
diff --git a/resource/template/dashboard-default/cron.html b/resource/template/dashboard-default/cron.html index d136e76..df07da4 100644 --- a/resource/template/dashboard-default/cron.html +++ b/resource/template/dashboard-default/cron.html @@ -10,7 +10,7 @@ -
{{tr "Token"}}
+
diff --git a/resource/template/dashboard-default/monitor.html b/resource/template/dashboard-default/monitor.html index 241cbc6..f61a12c 100644 --- a/resource/template/dashboard-default/monitor.html +++ b/resource/template/dashboard-default/monitor.html @@ -9,7 +9,7 @@ -
ID
+
diff --git a/resource/template/dashboard-default/nat.html b/resource/template/dashboard-default/nat.html index 3f159bf..e2449fc 100644 --- a/resource/template/dashboard-default/nat.html +++ b/resource/template/dashboard-default/nat.html @@ -10,7 +10,7 @@ -
ID
+
diff --git a/resource/template/dashboard-default/notification.html b/resource/template/dashboard-default/notification.html index 133aa8e..1d855e2 100644 --- a/resource/template/dashboard-default/notification.html +++ b/resource/template/dashboard-default/notification.html @@ -10,7 +10,7 @@ -
ID
+
@@ -52,7 +52,7 @@ -
ID
+
diff --git a/resource/template/dashboard-default/server.html b/resource/template/dashboard-default/server.html index a219e13..66655ca 100644 --- a/resource/template/dashboard-default/server.html +++ b/resource/template/dashboard-default/server.html @@ -19,7 +19,7 @@ -
ID
+
diff --git a/resource/template/theme-default/footer.html b/resource/template/theme-default/footer.html index 8108af9..57e2ff2 100644 --- a/resource/template/theme-default/footer.html +++ b/resource/template/theme-default/footer.html @@ -10,10 +10,11 @@ {{ if not .Conf.DisableSwitchTemplateInFrontend }} {{ end }} diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html index d7490b6..c57abc3 100644 --- a/resource/template/theme-default/network.html +++ b/resource/template/theme-default/network.html @@ -18,7 +18,7 @@
-
+