chore: ignore gosec errors

1. 首页通过在后台配置PublicNote字段，实现agent账单信息展示
2. 优化顶部导航，增加当前位置标识
3. 优化network页移动端样式
4. 优化后台server页展示，隐藏掉一些不重要的信息
5. 一些其他小优化
使用说明：https://github.com/naiba/nezha/pull/424#issuecomment-2386837658

.github/workflows/release.yml

@@ -4,54 +4,139 @@ on:
   push:
     tags:
       - "v*"
-  workflow_dispatch:
 
 jobs:
-  release:
+  build:
+    strategy:
+      fail-fast: true
+      matrix:
+        goos: [linux, windows]
+        goarch: [amd64]
+        include:
+          - goos: linux
+            goarch: s390x
+          - goos: linux
+            goarch: arm64
+            
+    name: Build artifacts
     runs-on: ubuntu-latest
+    container:
+      image: goreleaser/goreleaser-cross:v1.21
+    env:
+      GOOS: ${{ matrix.goos }}
+      GOARCH: ${{ matrix.goarch }}
+      GOARM: ${{ matrix.goarm }}
+    outputs:
+      tag_name: ${{ steps.extract_branch.outputs.tag }}
     steps:
+      - run: git config --global --add safe.directory /__w/nezha/nezha
       - uses: actions/checkout@v4
 
       - name: Fetch IPInfo GeoIP Database
-        env: 
+        if: github.event_name == 'push' && contains(github.ref, 'refs/tags/')
+        env:
           IPINFO_TOKEN: ${{ secrets.IPINFO_TOKEN }}
         run: |
           rm pkg/geoip/geoip.db
-          wget -O pkg/geoip/geoip.db https://ipinfo.io/data/free/country.mmdb?token=${IPINFO_TOKEN}
+          wget -qO pkg/geoip/geoip.db https://ipinfo.io/data/free/country.mmdb?token=${IPINFO_TOKEN}
+
+      - name: Set up Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.21.x"
+     
+      - name: Build
+        uses: goreleaser/goreleaser-action@v6
+        with:
+          distribution: goreleaser
+          version: '~> v2'
+          args: build --single-target --clean --skip=validate
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dashboard-${{ env.GOOS }}-${{ env.GOARCH }}
+          path: |
+            ./dist/*/*
+
+  release:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && contains(github.ref, 'refs/tags/')
+    needs: build
+    name: Release
+    steps:
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: ./assets
+
+      - name: Archive and compress binaries
+        run: |
+          for file in assets/*/*/*; do
+            if [ -f "$file" ]; then
+              chmod +x "$file"
+              export fileWithoutExt=${file%.*}
+              zip -jr "$fileWithoutExt.zip" "$file"
+            fi
+          done
+
+      - name: Release
+        uses: ncipollo/release-action@v1
+        with:
+          artifacts: "assets/*/*/*.zip"
+          generateReleaseNotes: true
+
+      - name: Purge jsdelivr cache
+        run: |
+          curl -s https://purge.jsdelivr.net/gh/${{ github.repository_owner }}/nezha@master/script/install.sh
+          curl -s https://purge.jsdelivr.net/gh/${{ github.repository_owner }}/nezha@master/script/nezha-agent.service
+          curl -s https://purge.jsdelivr.net/gh/${{ github.repository_owner }}/nezha@master/script/docker-compose.yaml
+          curl -s https://purge.jsdelivr.net/gh/${{ github.repository_owner }}/nezha@master/script/config.yaml
+          LOWER_USERNAME=$(echo "${{ github.repository_owner }}" | tr '[:upper:]' '[:lower:]')
+          curl -s https://purge.jsdelivr.net/gh/$LOWER_USERNAME/nezha@master/script/install.sh
+          curl -s https://purge.jsdelivr.net/gh/$LOWER_USERNAME/nezha@master/script/nezha-agent.service
+          curl -s https://purge.jsdelivr.net/gh/$LOWER_USERNAME/nezha@master/script/docker-compose.yaml
+          curl -s https://purge.jsdelivr.net/gh/$LOWER_USERNAME/nezha@master/script/config.yaml
+
+      - name: Trigger sync
+        env:
+          GH_REPO: ${{ github.repository }}
+          GH_TOKEN: ${{ github.token }}
+          GH_DEBUG: api
+        run: |
+          gh workflow run sync-release.yml
+
+  release-docker:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && contains(github.ref, 'refs/tags/')
+    needs: build
+    name: Release Docker images
+    steps:
+      - uses: actions/checkout@v4
+        
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: ./assets
+
+      - name: Fix permissions
+        run: |
+          chmod -R +x ./assets/*
+          mkdir dist
+          mv ./assets/*/*/* ./dist
 
       - name: Extract branch name
         run: |
           export TAG_NAME=$(echo ${GITHUB_REF#refs/tags/})
           echo "tag=$TAG_NAME" >> $GITHUB_OUTPUT
         id: extract_branch
-
+         
-      - name: xgo build
+      - name: Log into GHCR
-        uses: crazy-max/ghaction-xgo@v2
-        with:
-          xgo_version: latest
-          go_version: 1.21.x
-          dest: dist
-          pkg: cmd/dashboard
-          prefix: dashboard
-          targets: linux/amd64,linux/arm64,linux/arm-7,linux/s390x,linux/riscv64,windows/amd64,windows/386,windows/arm64 # linux/386,
-          v: true
-          x: false
-          race: false
-          tags: timetzdata
-          ldflags: -s -w --extldflags '-static -fpic' -X github.com/naiba/nezha/service/singleton.Version=${{ steps.extract_branch.outputs.tag }}
-          buildmode: default
-
-      - name: fix dist
-        run: |
-          ls -al dist/
-          mv dist/dashboard-linux-arm-7 dist/dashboard-linux-arm
-
-      - name: Log in to the GHCR
         uses: docker/login-action@master
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+          password: ${{ github.token }}
 
       - name: Log in to the AliyunCS
         uses: docker/login-action@master
@@ -68,13 +153,13 @@ jobs:
 
       - name: Set up image name
         run: |
-          GHRC_IMAGE_NAME=$(echo "ghcr.io/${{ github.repository_owner }}/nezha-dashboard" | tr '[:upper:]' '[:lower:]')
+          GHCR_IMAGE_NAME=$(echo "ghcr.io/${{ github.repository_owner }}/nezha-dashboard" | tr '[:upper:]' '[:lower:]')
           if [ ${{ github.repository_owner }} = "naiba" ]
             then ALI_IMAGE_NAME=$(echo "registry.cn-shanghai.aliyuncs.com/naibahq/nezha-dashboard")
             else ALI_IMAGE_NAME=$(echo "registry.cn-shanghai.aliyuncs.com/${{ github.repository_owner }}/nezha-dashboard" | tr '[:upper:]' '[:lower:]')
           fi
-          echo "::set-output name=GHRC_IMAGE_NAME::$GHRC_IMAGE_NAME"
+          echo "GHCR_IMAGE_NAME=$GHCR_IMAGE_NAME" >> $GITHUB_OUTPUT
-          echo "::set-output name=ALI_IMAGE_NAME::$ALI_IMAGE_NAME"
+          echo "ALI_IMAGE_NAME=$ALI_IMAGE_NAME" >> $GITHUB_OUTPUT
         id: image-name
 
       - name: Build dasbboard image And Push
@@ -82,49 +167,10 @@ jobs:
         with:
           context: .
           file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64,linux/arm,linux/s390x,linux/riscv64 # linux/386,
+          platforms: linux/amd64,linux/arm64,linux/s390x
           push: true
           tags: |
-            ${{ steps.image-name.outputs.GHRC_IMAGE_NAME }}:latest
+            ${{ steps.image-name.outputs.GHCR_IMAGE_NAME }}:latest
-            ${{ steps.image-name.outputs.GHRC_IMAGE_NAME }}:${{ steps.extract_branch.outputs.tag }}
+            ${{ steps.image-name.outputs.GHCR_IMAGE_NAME }}:${{ steps.extract_branch.outputs.tag }}
             ${{ steps.image-name.outputs.ALI_IMAGE_NAME }}:latest
             ${{ steps.image-name.outputs.ALI_IMAGE_NAME }}:${{ steps.extract_branch.outputs.tag }}
-
-      - name: Compress dist files
-        run: |
-          for file in dist/*; do
-            if [ -f "$file" ]; then
-              zip -r "$file.zip" "$file"
-            fi
-          done
-
-      - name: Release
-        uses: ncipollo/release-action@v1
-        with:
-          artifacts: "dist/*.zip"
-          generateReleaseNotes: true
-
-      - name: Purge jsdelivr cache
-        run: |
-          curl -s https://purge.jsdelivr.net/gh/${{ github.repository_owner }}/nezha@master/script/install.sh
-          curl -s https://purge.jsdelivr.net/gh/${{ github.repository_owner }}/nezha@master/script/nezha-agent.service
-          curl -s https://purge.jsdelivr.net/gh/${{ github.repository_owner }}/nezha@master/script/docker-compose.yaml
-          curl -s https://purge.jsdelivr.net/gh/${{ github.repository_owner }}/nezha@master/script/config.yaml
-          LOWER_USERNAME=$(echo "${{ github.repository_owner }}" | tr '[:upper:]' '[:lower:]')
-          curl -s https://purge.jsdelivr.net/gh/$LOWER_USERNAME/nezha@master/script/install.sh
-          curl -s https://purge.jsdelivr.net/gh/$LOWER_USERNAME/nezha@master/script/nezha-agent.service
-          curl -s https://purge.jsdelivr.net/gh/$LOWER_USERNAME/nezha@master/script/docker-compose.yaml
-          curl -s https://purge.jsdelivr.net/gh/$LOWER_USERNAME/nezha@master/script/config.yaml
-
-      - name: Trigger sync
-        if: ${{ env.SYNCED == 0 }}
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            await github.rest.actions.createWorkflowDispatch({
-            owner: 'naiba',
-            repo: 'nezha',
-            workflow_id: 'sync-release.yml',
-            ref: 'master'
-            })

.github/workflows/test-on-pr.yml

@@ -1,43 +0,0 @@
-name: Run Tests on PR
-
-on:
-  pull_request:
-    branches:
-      - master
-jobs:
-  tests:
-    runs-on: ubuntu-latest
-    env:
-      GO111MODULE: on
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-go@v4
-        with:
-          go-version: "^1.21.3"
-      - name: Unit test
-        run: |
-          go test -v ./...
-      - name: Run Gosec Security Scanner
-        uses: securego/gosec@master
-        with:
-          args: --exclude=G104,G402 ./...
-      - name: xgo build
-        uses: crazy-max/ghaction-xgo@v2
-        with:
-          xgo_version: latest
-          go_version: 1.21.x
-          dest: dist
-          pkg: cmd/dashboard
-          prefix: dashboard
-          targets: linux/amd64,linux/arm64,linux/arm-7,linux/s390x,linux/riscv64,windows/amd64,windows/386,windows/arm64 # linux/386,
-          v: true
-          x: false
-          race: false
-          tags: timetzdata
-          ldflags: -s -w --extldflags '-static -fpic' -X github.com/naiba/nezha/service/singleton.Version=test
-          buildmode: default
-      - name: fix dist
-        run: |
-          ls -al dist/
-          mv dist/dashboard-linux-arm-7 dist/dashboard-linux-arm
-

.github/workflows/test.yml

@@ -10,40 +10,36 @@ on:
       - "go.sum"
       - "resource/**"
       - ".github/workflows/test.yml"
+  pull_request:
+    branches:
+      - master
 
 jobs:
   tests:
-    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: true
+      matrix:
+        os: [ubuntu, windows, macos]
+        
+    runs-on: ${{ matrix.os }}-latest
     env:
       GO111MODULE: on
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-go@v4
+        
+      - uses: actions/setup-go@v5
         with:
-          go-version: "^1.21.3"
+          go-version: "1.21.x"
+          
       - name: Unit test
         run: |
           go test -v ./...
+          
+      - name: Build test
+        run: go build -v ./cmd/dashboard
+          
       - name: Run Gosec Security Scanner
+        if: runner.os == 'Linux'
         uses: securego/gosec@master
         with:
-          args: --exclude=G104,G402 ./...
+          args: --exclude=G104,G402,G115,G203 ./...
-      - name: xgo build
-        uses: crazy-max/ghaction-xgo@v2
-        with:
-          xgo_version: latest
-          go_version: 1.21.x
-          dest: dist
-          pkg: cmd/dashboard
-          prefix: dashboard
-          targets: linux/amd64,linux/arm64,linux/arm-7,linux/s390x,linux/riscv64,windows/amd64,windows/386,windows/arm64 # linux/386,
-          v: true
-          x: false
-          race: false
-          tags: timetzdata
-          ldflags: -s -w --extldflags '-static -fpic' -X github.com/naiba/nezha/service/singleton.Version=test
-          buildmode: default
-      - name: fix dist
-        run: |
-          ls -al dist/
-          mv dist/dashboard-linux-arm-7 dist/dashboard-linux-arm

.goreleaser.yml

@@ -0,0 +1,71 @@
+version: 2
+before:
+  hooks:
+    - go mod tidy -v
+builds:
+  - id: linux_arm64
+    env:
+      - CGO_ENABLED=1
+      - CC=aarch64-linux-gnu-gcc
+    ldflags:
+      - -s -w
+      - -X github.com/naiba/nezha/service/singleton.Version={{.Version}}
+      - -extldflags "-static -fpic"
+    flags:
+      - -trimpath
+    goos:
+      - linux
+    goarch:
+      - arm64
+    main: ./cmd/dashboard
+    binary: dashboard-{{ .Os }}-{{ .Arch }}
+  - id: linux_amd64
+    env:
+      - CGO_ENABLED=1
+      - CC=x86_64-linux-gnu-gcc
+    ldflags:
+      - -s -w
+      - -X github.com/naiba/nezha/service/singleton.Version={{.Version}}
+      - -extldflags "-static -fpic"
+    flags:
+      - -trimpath
+    goos:
+      - linux
+    goarch:
+      - amd64
+    main: ./cmd/dashboard
+    binary: dashboard-{{ .Os }}-{{ .Arch }}
+  - id: linux_s390x
+    env:
+      - CGO_ENABLED=1
+      - CC=s390x-linux-gnu-gcc
+    ldflags:
+      - -s -w
+      - -X github.com/naiba/nezha/service/singleton.Version={{.Version}}
+      - -extldflags "-static -fpic"
+    flags:
+      - -trimpath
+    goos:
+      - linux
+    goarch:
+      - s390x
+    main: ./cmd/dashboard
+    binary: dashboard-{{ .Os }}-{{ .Arch }}
+  - id: windows_amd64
+    env:
+      - CGO_ENABLED=1
+      - CC=x86_64-w64-mingw32-gcc
+    ldflags:
+      - -s -w
+      - -X github.com/naiba/nezha/service/singleton.Version={{.Version}}
+      - -extldflags "-static -fpic"
+    flags:
+      - -trimpath
+    goos:
+      - windows
+    goarch:
+      - amd64
+    main: ./cmd/dashboard
+    binary: dashboard-{{ .Os }}-{{ .Arch }}
+snapshot:
+  version_template: "dashboard"

Dockerfile

@@ -1,16 +1,12 @@
-# latest 镜像还没有 riscv64 https://hub.docker.com/_/alpine/tags
+FROM alpine AS certs
-FROM alpine:edge
+RUN apk update && apk add ca-certificates
+
+FROM busybox:stable-musl
 
 ARG TARGETOS
 ARG TARGETARCH
 
-RUN apk update && \
+COPY --from=certs /etc/ssl/certs /etc/ssl/certs
-    apk upgrade --no-cache && \
-    apk add --no-cache tzdata && \
-    cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \
-    echo 'Asia/Shanghai' >/etc/timezone && \
-    rm -rf /var/cache/apk/*
-
 COPY ./script/entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 
@@ -19,4 +15,6 @@ COPY dist/dashboard-${TARGETOS}-${TARGETARCH} ./app
 
 VOLUME ["/dashboard/data"]
 EXPOSE 80 5555
+ARG TZ=Asia/Shanghai
+ENV TZ=$TZ
 ENTRYPOINT ["/entrypoint.sh"]

README.md

@@ -4,7 +4,7 @@
   <br>
   <small><i>LOGO designed by <a href="https://xio.ng" target="_blank">熊大</a> .</i></small>
   <br><br>
-<img alt="GitHub release (with filter)" src="https://img.shields.io/github/v/release/naiba/nezha?color=brightgreen&style=for-the-badge&logo=github&label=Dashboard">&nbsp;<img src="https://img.shields.io/github/v/release/nezhahq/agent?color=brightgreen&label=Agent&style=for-the-badge&logo=github">&nbsp;<img src="https://img.shields.io/github/actions/workflow/status/nezhahq/agent/agent.yml?label=Agent%20CI&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/badge/Installer-v0.18.3-brightgreen?style=for-the-badge&logo=linux">
+<img alt="GitHub release (with filter)" src="https://img.shields.io/github/v/release/naiba/nezha?color=brightgreen&style=for-the-badge&logo=github&label=Dashboard">&nbsp;<img src="https://img.shields.io/github/v/release/nezhahq/agent?color=brightgreen&label=Agent&style=for-the-badge&logo=github">&nbsp;<img src="https://img.shields.io/github/actions/workflow/status/nezhahq/agent/agent.yml?label=Agent%20CI&logo=github&style=for-the-badge">&nbsp;<img src="https://img.shields.io/badge/Installer-v0.19.0-brightgreen?style=for-the-badge&logo=linux">
   <br>
   <br>
   <p>:trollface: <b>Nezha Monitoring: Self-hostable, lightweight, servers and websites monitoring and O&M tool.</b></p>
@@ -44,8 +44,8 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <a href="https://github.com/AkkiaS7" title="Akkia"><img src="https://avatars.githubusercontent.com/u/68485070?v=4" width="50;" alt="Akkia"/></a>
 <a href="https://github.com/Erope" title="卖女孩的小火柴"><img src="https://avatars.githubusercontent.com/u/44471469?v=4" width="50;" alt="卖女孩的小火柴"/></a>
 <a href="https://github.com/uubulb" title="UUBulb"><img src="https://avatars.githubusercontent.com/u/35923940?v=4" width="50;" alt="UUBulb"/></a>
-<a href="https://github.com/dysf888" title="黑歌"><img src="https://avatars.githubusercontent.com/u/47450409?v=4" width="50;" alt="黑歌"/></a>
 <a href="https://github.com/nap0o" title="nap0o"><img src="https://avatars.githubusercontent.com/u/144927971?v=4" width="50;" alt="nap0o"/></a>
+<a href="https://github.com/dysf888" title="黑歌"><img src="https://avatars.githubusercontent.com/u/47450409?v=4" width="50;" alt="黑歌"/></a>
 <a href="https://github.com/xykt" title="xykt"><img src="https://avatars.githubusercontent.com/u/152045469?v=4" width="50;" alt="xykt"/></a>
 <a href="https://github.com/MikoyChinese" title="MikoyChinese"><img src="https://avatars.githubusercontent.com/u/22676744?v=4" width="50;" alt="MikoyChinese"/></a>
 <a href="https://github.com/JackieSung4ev" title="JackieSung4ev"><img src="https://avatars.githubusercontent.com/u/24974735?v=4" width="50;" alt="JackieSung4ev"/></a>
@@ -91,7 +91,7 @@ You can change the dashboard language in the settings page (`/setting`) after th
 <a href="https://github.com/techotaku" title="Ian Li"><img src="https://avatars.githubusercontent.com/u/1948179?v=4" width="50;" alt="Ian Li"/></a>
 <a href="https://github.com/GreenTeodoro839" title="GreenTeodoro839"><img src="https://avatars.githubusercontent.com/u/77104800?v=4" width="50;" alt="GreenTeodoro839"/></a>
 <a href="https://github.com/Es-dese" title="Esdese"><img src="https://avatars.githubusercontent.com/u/71542548?v=4" width="50;" alt="Esdese"/></a>
-<a href="https://github.com/wwng2333" title="Crazy"><img src="https://avatars.githubusercontent.com/u/17147265?v=4" width="50;" alt="Crazy"/></a>
+<a href="https://github.com/wwng2333" title=":D"><img src="https://avatars.githubusercontent.com/u/17147265?v=4" width="50;" alt=":D"/></a>
 <a href="https://github.com/wellcoming" title="Coming"><img src="https://avatars.githubusercontent.com/u/74850890?v=4" width="50;" alt="Coming"/></a><!--GAMFC_DELIMITER_END-->
 
 ## Special Thanks

cmd/dashboard/controller/common_page.go

@@ -209,7 +209,7 @@ func (cp *commonPage) network(c *gin.Context) {
 	}))
 }
 
-func (cp *commonPage) getServerStat(c *gin.Context) ([]byte, error) {
+func (cp *commonPage) getServerStat(c *gin.Context, withPublicNote bool) ([]byte, error) {
 	_, isMember := c.Get(model.CtxKeyAuthorizedUser)
 	_, isViewPasswordVerfied := c.Get(model.CtxKeyViewPasswordVerified)
 	authorized := isMember || isViewPasswordVerfied
@@ -217,18 +217,20 @@ func (cp *commonPage) getServerStat(c *gin.Context) ([]byte, error) {
 		singleton.SortedServerLock.RLock()
 		defer singleton.SortedServerLock.RUnlock()
 
-		var servers []*model.Server
+		var serverList []*model.Server
-
 		if authorized {
-			servers = singleton.SortedServerList
+			serverList = singleton.SortedServerList
 		} else {
-			filteredServers := make([]*model.Server, len(singleton.SortedServerListForGuest))
+			serverList = singleton.SortedServerListForGuest
-			for i, server := range singleton.SortedServerListForGuest {
+		}
-				filteredServer := *server
+
-				filteredServer.DDNSDomain = "redacted"
+		var servers []*model.Server
-				filteredServers[i] = &filteredServer
+		for _, server := range serverList {
+			item := *server
+			if !withPublicNote {
+				item.PublicNote = ""
 			}
-			servers = filteredServers
+			servers = append(servers, &item)
 		}
 
 		return utils.Json.Marshal(Data{
@@ -240,7 +242,7 @@ func (cp *commonPage) getServerStat(c *gin.Context) ([]byte, error) {
 }
 
 func (cp *commonPage) home(c *gin.Context) {
-	stat, err := cp.getServerStat(c)
+	stat, err := cp.getServerStat(c, true)
 	if err != nil {
 		mygin.ShowErrorPage(c, mygin.ErrInfo{
 			Code: http.StatusInternalServerError,
@@ -285,7 +287,7 @@ func (cp *commonPage) ws(c *gin.Context) {
 	defer conn.Close()
 	count := 0
 	for {
-		stat, err := cp.getServerStat(c)
+		stat, err := cp.getServerStat(c, false)
 		if err != nil {
 			continue
 		}

cmd/dashboard/controller/controller.go

@@ -1,7 +1,6 @@
 package controller
 
 import (
-	"encoding/json"
 	"fmt"
 	"html/template"
 	"io/fs"
@@ -277,7 +276,7 @@ func natGateway(c *gin.Context) {
 	rpc.NezhaHandlerSingleton.CreateStream(streamId)
 	defer rpc.NezhaHandlerSingleton.CloseStream(streamId)
 
-	taskData, err := json.Marshal(model.TaskNAT{
+	taskData, err := utils.Json.Marshal(model.TaskNAT{
 		StreamID: streamId,
 		Host:     natConfig.Host,
 	})

cmd/dashboard/controller/member_api.go

@@ -306,6 +306,7 @@ type serverForm struct {
 	Secret       string
 	Tag          string
 	Note         string
+	PublicNote   string
 	HideForGuest string
 	EnableDDNS   string
 	EnableIPv4   string
@@ -326,6 +327,7 @@ func (ma *memberAPI) addOrEditServer(c *gin.Context) {
 		s.ID = sf.ID
 		s.Tag = sf.Tag
 		s.Note = sf.Note
+		s.PublicNote = sf.PublicNote
 		s.HideForGuest = sf.HideForGuest == "on"
 		s.EnableDDNS = sf.EnableDDNS == "on"
 		s.EnableIPv4 = sf.EnableIPv4 == "on"

cmd/dashboard/controller/oauth2.go

@@ -2,7 +2,6 @@ package controller
 
 import (
 	"context"
-	"encoding/json"
 	"errors"
 	"fmt"
 	"net/http"
@@ -199,7 +198,7 @@ func (oa *oauth2controller) callback(c *gin.Context) {
 			if err == nil {
 				defer resp.Body.Close()
 				var cloudflareUserInfo *cloudflare.UserInfo
-				if err := json.NewDecoder(resp.Body).Decode(&cloudflareUserInfo); err == nil {
+				if err := utils.Json.NewDecoder(resp.Body).Decode(&cloudflareUserInfo); err == nil {
 					user = cloudflareUserInfo.MapToNezhaUser()
 				}
 			}

cmd/dashboard/main.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"log"
 	"time"
+	_ "time/tzdata"
 
 	"github.com/naiba/nezha/cmd/dashboard/controller"
 	"github.com/naiba/nezha/cmd/dashboard/rpc"

model/rule.go

@@ -1,6 +1,7 @@
 package model
 
 import (
+	"slices"
 	"strings"
 	"time"
 
@@ -44,19 +45,6 @@ func percentage(used, total uint64) float64 {
 	return float64(used) * 100 / float64(total)
 }
 
-func maxSliceValue(slice []float64) float64 {
-	if len(slice) != 0 {
-		max := slice[0]
-		for _, val := range slice {
-			if max < val {
-				max = val
-			}
-		}
-		return max
-	}
-	return 0
-}
-
 // Snapshot 未通过规则返回 struct{}{}, 通过返回 nil
 func (u *Rule) Snapshot(cycleTransferStats *CycleTransferStats, server *Server, db *gorm.DB) interface{} {
 	// 监控全部但是排除了此服务器
@@ -145,7 +133,7 @@ func (u *Rule) Snapshot(cycleTransferStats *CycleTransferStats, server *Server,
 					temp = append(temp, tempStat.Temperature)
 				}
 			}
-			src = maxSliceValue(temp)
+			src = slices.Max(temp)
 		}
 	}
 

model/server.go

@@ -15,7 +15,8 @@ type Server struct {
 	Name         string
 	Tag          string // 分组名
 	Secret       string `gorm:"uniqueIndex" json:"-"`
-	Note         string `json:"-"` // 管理员可见备注
+	Note         string `json:"-"`                    // 管理员可见备注
+	PublicNote   string `json:"PublicNote,omitempty"` // 公开备注
 	DisplayIndex int    // 展示排序，越大越靠前
 	HideForGuest bool   // 对游客隐藏
 	EnableDDNS   bool   `json:"-"` // 是否启用DDNS 未在配置文件中启用DDNS 或 DDNS检查时间为0时此项无效
@@ -54,12 +55,13 @@ func boolToString(b bool) string {
 	return "false"
 }
 
-func (s Server) Marshal() template.JS {
+func (s Server) MarshalForDashboard() template.JS {
 	name, _ := utils.Json.Marshal(s.Name)
 	tag, _ := utils.Json.Marshal(s.Tag)
 	note, _ := utils.Json.Marshal(s.Note)
 	secret, _ := utils.Json.Marshal(s.Secret)
 	ddnsDomain, _ := utils.Json.Marshal(s.DDNSDomain)
 	ddnsProfile, _ := utils.Json.Marshal(s.DDNSProfile)
-	return template.JS(fmt.Sprintf(`{"ID":%d,"Name":%s,"Secret":%s,"DisplayIndex":%d,"Tag":%s,"Note":%s,"HideForGuest": %s,"EnableDDNS": %s,"EnableIPv4": %s,"EnableIpv6": %s,"DDNSDomain": %s,"DDNSProfile": %s}`, s.ID, name, secret, s.DisplayIndex, tag, note, boolToString(s.HideForGuest), boolToString(s.EnableDDNS), boolToString(s.EnableIPv4), boolToString(s.EnableIpv6), ddnsDomain, ddnsProfile)) // #nosec
+	publicNote, _ := utils.Json.Marshal(s.PublicNote)
+	return template.JS(fmt.Sprintf(`{"ID":%d,"Name":%s,"Secret":%s,"DisplayIndex":%d,"Tag":%s,"Note":%s,"HideForGuest": %s,"EnableDDNS": %s,"EnableIPv4": %s,"EnableIpv6": %s,"DDNSDomain": %s,"DDNSProfile": %s,"PublicNote": %s}`, s.ID, name, secret, s.DisplayIndex, tag, note, boolToString(s.HideForGuest), boolToString(s.EnableDDNS), boolToString(s.EnableIPv4), boolToString(s.EnableIpv6), ddnsDomain, ddnsProfile, publicNote))
 }

model/server_test.go

@@ -18,7 +18,7 @@ func TestServerMarshal(t *testing.T) {
 			Name: patterns[i],
 			Tag:  patterns[i],
 		}
-		serverStr := string(server.Marshal())
+		serverStr := string(server.MarshalForDashboard())
 		var serverRestore Server
 		if utils.Json.Unmarshal([]byte(serverStr), &serverRestore) != nil {
 			t.Fatalf("Error: %s", serverStr)

pkg/ddns/cloudflare.go

@@ -2,169 +2,217 @@ package ddns
 
 import (
 	"bytes"
-	"encoding/json"
 	"fmt"
 	"io"
 	"log"
 	"net/http"
+	"net/url"
+
+	"github.com/naiba/nezha/pkg/utils"
 )
 
+const baseEndpoint = "https://api.cloudflare.com/client/v4/zones"
+
 type ProviderCloudflare struct {
-	Secret string
+	secret       string
+	zoneId       string
+	recordId     string
+	domainConfig *DomainConfig
 }
 
-func (provider *ProviderCloudflare) UpdateDomain(domainConfig *DomainConfig) bool {
+type cfReq struct {
-	if domainConfig == nil {
+	Name    string `json:"name"`
-		return false
+	Type    string `json:"type"`
-	}
+	Content string `json:"content"`
+	TTL     uint32 `json:"ttl"`
+	Proxied bool   `json:"proxied"`
+}
 
-	zoneID, err := provider.getZoneID(domainConfig.FullDomain)
+type cfResp struct {
+	Result []struct {
+		ID   string `json:"id"`
+		Name string `json:"name"`
+	} `json:"result"`
+}
+
+func NewProviderCloudflare(s string) *ProviderCloudflare {
+	return &ProviderCloudflare{
+		secret: s,
+	}
+}
+
+func (provider *ProviderCloudflare) UpdateDomain(domainConfig *DomainConfig) error {
+	if domainConfig == nil {
+		return fmt.Errorf("获取 DDNS 配置失败")
+	}
+	provider.domainConfig = domainConfig
+
+	err := provider.getZoneID()
 	if err != nil {
-		log.Printf("无法获取 zone ID: %s\n", err)
+		return fmt.Errorf("无法获取 zone ID: %s", err)
-		return false
 	}
 
 	// 当IPv4和IPv6同时成功才算作成功
-	var resultV4 = true
+	if provider.domainConfig.EnableIPv4 {
-	var resultV6 = true
+		if err = provider.addDomainRecord(true); err != nil {
-	if domainConfig.EnableIPv4 {
+			return err
-		if !provider.addDomainRecord(zoneID, domainConfig, true) {
-			resultV4 = false
 		}
 	}
 
-	if domainConfig.EnableIpv6 {
+	if provider.domainConfig.EnableIpv6 {
-		if !provider.addDomainRecord(zoneID, domainConfig, false) {
+		if err = provider.addDomainRecord(false); err != nil {
-			resultV6 = false
+			return err
 		}
 	}
 
-	return resultV4 && resultV6
+	return nil
 }
 
-func (provider *ProviderCloudflare) addDomainRecord(zoneID string, domainConfig *DomainConfig, isIpv4 bool) bool {
+func (provider *ProviderCloudflare) addDomainRecord(isIpv4 bool) error {
-	record, err := provider.findDNSRecord(zoneID, domainConfig.FullDomain, isIpv4)
+	err := provider.findDNSRecord(isIpv4)
 	if err != nil {
-		log.Printf("查找 DNS 记录时出错: %s\n", err)
+		return fmt.Errorf("查找 DNS 记录时出错: %s", err)
-		return false
 	}
 
-	if record == nil {
+	if provider.recordId == "" {
 		// 添加 DNS 记录
-		return provider.createDNSRecord(zoneID, domainConfig, isIpv4)
+		return provider.createDNSRecord(isIpv4)
 	} else {
 		// 更新 DNS 记录
-		return provider.updateDNSRecord(zoneID, record["id"].(string), domainConfig, isIpv4)
+		return provider.updateDNSRecord(isIpv4)
 	}
 }
 
-func (provider *ProviderCloudflare) getZoneID(domain string) (string, error) {
+func (provider *ProviderCloudflare) getZoneID() error {
-	_, realDomain := SplitDomain(domain)
+	_, realDomain := splitDomain(provider.domainConfig.FullDomain)
-	url := fmt.Sprintf("https://api.cloudflare.com/client/v4/zones?name=%s", realDomain)
+	zu, _ := url.Parse(baseEndpoint)
-	body, err := provider.sendRequest("GET", url, nil)
+
+	q := zu.Query()
+	q.Set("name", realDomain)
+	zu.RawQuery = q.Encode()
+
+	body, err := provider.sendRequest("GET", zu.String(), nil)
 	if err != nil {
-		return "", err
+		return err
 	}
 
-	var res map[string]interface{}
+	res := &cfResp{}
-	err = json.Unmarshal(body, &res)
+	err = utils.Json.Unmarshal(body, res)
 	if err != nil {
-		return "", err
+		return err
 	}
 
-	result := res["result"].([]interface{})
+	result := res.Result
 	if len(result) > 0 {
-		zoneID := result[0].(map[string]interface{})["id"].(string)
+		provider.zoneId = result[0].ID
-		return zoneID, nil
+		return nil
 	}
 
-	return "", fmt.Errorf("找不到 Zone ID")
+	return fmt.Errorf("找不到 Zone ID")
 }
 
-func (provider *ProviderCloudflare) findDNSRecord(zoneID string, domain string, isIPv4 bool) (map[string]interface{}, error) {
+func (provider *ProviderCloudflare) findDNSRecord(isIPv4 bool) error {
-	var ipType = "A"
+	var ipType string
-	if !isIPv4 {
+	if isIPv4 {
+		ipType = "A"
+	} else {
 		ipType = "AAAA"
 	}
-	url := fmt.Sprintf("https://api.cloudflare.com/client/v4/zones/%s/dns_records?type=%s&name=%s", zoneID, ipType, domain)
+
-	body, err := provider.sendRequest("GET", url, nil)
+	de, _ := url.JoinPath(baseEndpoint, provider.zoneId, "dns_records")
+	du, _ := url.Parse(de)
+
+	q := du.Query()
+	q.Set("name", provider.domainConfig.FullDomain)
+	q.Set("type", ipType)
+	du.RawQuery = q.Encode()
+
+	body, err := provider.sendRequest("GET", du.String(), nil)
 	if err != nil {
-		return nil, err
+		return err
 	}
 
-	var res map[string]interface{}
+	res := &cfResp{}
-	err = json.Unmarshal(body, &res)
+	err = utils.Json.Unmarshal(body, res)
 	if err != nil {
-		return nil, err
+		return err
 	}
 
-	result := res["result"].([]interface{})
+	result := res.Result
 	if len(result) > 0 {
-		return result[0].(map[string]interface{}), nil
+		provider.recordId = result[0].ID
+		return nil
 	}
 
-	return nil, nil // 没有找到 DNS 记录
+	return nil
 }
 
-func (provider *ProviderCloudflare) createDNSRecord(zoneID string, domainConfig *DomainConfig, isIPv4 bool) bool {
+func (provider *ProviderCloudflare) createDNSRecord(isIPv4 bool) error {
-	var ipType = "A"
+	var ipType, ipAddr string
-	var ipAddr = domainConfig.Ipv4Addr
+	if isIPv4 {
-	if !isIPv4 {
+		ipType = "A"
+		ipAddr = provider.domainConfig.Ipv4Addr
+	} else {
 		ipType = "AAAA"
-		ipAddr = domainConfig.Ipv6Addr
+		ipAddr = provider.domainConfig.Ipv6Addr
 	}
-	url := fmt.Sprintf("https://api.cloudflare.com/client/v4/zones/%s/dns_records", zoneID)
+
-	data := map[string]interface{}{
+	de, _ := url.JoinPath(baseEndpoint, provider.zoneId, "dns_records")
-		"type":    ipType,
+	data := &cfReq{
-		"name":    domainConfig.FullDomain,
+		Name:    provider.domainConfig.FullDomain,
-		"content": ipAddr,
+		Type:    ipType,
-		"ttl":     60,
+		Content: ipAddr,
-		"proxied": false,
+		TTL:     60,
+		Proxied: false,
 	}
-	jsonData, _ := json.Marshal(data)
+
-	_, err := provider.sendRequest("POST", url, jsonData)
+	jsonData, _ := utils.Json.Marshal(data)
-	return err == nil
+	_, err := provider.sendRequest("POST", de, jsonData)
+	return err
 }
 
-func (provider *ProviderCloudflare) updateDNSRecord(zoneID string, recordID string, domainConfig *DomainConfig, isIPv4 bool) bool {
+func (provider *ProviderCloudflare) updateDNSRecord(isIPv4 bool) error {
-	var ipType = "A"
+	var ipType, ipAddr string
-	var ipAddr = domainConfig.Ipv4Addr
+	if isIPv4 {
-	if !isIPv4 {
+		ipType = "A"
+		ipAddr = provider.domainConfig.Ipv4Addr
+	} else {
 		ipType = "AAAA"
-		ipAddr = domainConfig.Ipv6Addr
+		ipAddr = provider.domainConfig.Ipv6Addr
 	}
-	url := fmt.Sprintf("https://api.cloudflare.com/client/v4/zones/%s/dns_records/%s", zoneID, recordID)
+
-	data := map[string]interface{}{
+	de, _ := url.JoinPath(baseEndpoint, provider.zoneId, "dns_records", provider.recordId)
-		"type":    ipType,
+	data := &cfReq{
-		"name":    domainConfig.FullDomain,
+		Name:    provider.domainConfig.FullDomain,
-		"content": ipAddr,
+		Type:    ipType,
-		"ttl":     60,
+		Content: ipAddr,
-		"proxied": false,
+		TTL:     60,
+		Proxied: false,
 	}
-	jsonData, _ := json.Marshal(data)
+
-	_, err := provider.sendRequest("PATCH", url, jsonData)
+	jsonData, _ := utils.Json.Marshal(data)
-	return err == nil
+	_, err := provider.sendRequest("PATCH", de, jsonData)
+	return err
 }
 
 // 以下为辅助方法，如发送 HTTP 请求等
 func (provider *ProviderCloudflare) sendRequest(method string, url string, data []byte) ([]byte, error) {
-	client := &http.Client{}
 	req, err := http.NewRequest(method, url, bytes.NewBuffer(data))
 	if err != nil {
 		return nil, err
 	}
 
-	req.Header.Add("Authorization", fmt.Sprintf("Bearer %s", provider.Secret))
+	req.Header.Add("Authorization", fmt.Sprintf("Bearer %s", provider.secret))
 	req.Header.Add("Content-Type", "application/json")
 
-	resp, err := client.Do(req)
+	resp, err := utils.HttpClient.Do(req)
 	if err != nil {
 		return nil, err
 	}
 	defer func(Body io.ReadCloser) {
 		err := Body.Close()
 		if err != nil {
-			log.Printf("NEZHA>> 无法关闭HTTP响应体流: %s\n", err.Error())
+			log.Printf("NEZHA>> 无法关闭HTTP响应体流: %s", err.Error())
 		}
 	}(resp.Body)
 

pkg/ddns/ddns.go

@@ -1,5 +1,7 @@
 package ddns
 
+import "golang.org/x/net/publicsuffix"
+
 type DomainConfig struct {
 	EnableIPv4 bool
 	EnableIpv6 bool
@@ -10,5 +12,11 @@ type DomainConfig struct {
 
 type Provider interface {
 	// UpdateDomain Return is updated
-	UpdateDomain(domainConfig *DomainConfig) bool
+	UpdateDomain(*DomainConfig) error
+}
+
+func splitDomain(domain string) (prefix string, realDomain string) {
+	realDomain, _ = publicsuffix.EffectiveTLDPlusOne(domain)
+	prefix = domain[:len(domain)-len(realDomain)-1]
+	return prefix, realDomain
 }

pkg/ddns/dummy.go

@@ -2,6 +2,6 @@ package ddns
 
 type ProviderDummy struct{}
 
-func (provider *ProviderDummy) UpdateDomain(domainConfig *DomainConfig) bool {
+func (provider *ProviderDummy) UpdateDomain(domainConfig *DomainConfig) error {
-	return false
+	return nil
 }

pkg/ddns/helper.go

@@ -1,40 +0,0 @@
-package ddns
-
-import (
-	"golang.org/x/net/publicsuffix"
-	"net/http"
-	"strings"
-)
-
-func (provider ProviderWebHook) FormatWebhookString(s string, config *DomainConfig, ipType string) string {
-	if config == nil {
-		return s
-	}
-
-	result := strings.TrimSpace(s)
-	result = strings.Replace(s, "{ip}", config.Ipv4Addr, -1)
-	result = strings.Replace(result, "{domain}", config.FullDomain, -1)
-	result = strings.Replace(result, "{type}", ipType, -1)
-	// remove \r
-	result = strings.Replace(result, "\r", "", -1)
-	return result
-}
-
-func SetStringHeadersToRequest(req *http.Request, headers []string) {
-	if req == nil {
-		return
-	}
-	for _, element := range headers {
-		kv := strings.SplitN(element, ":", 2)
-		if len(kv) == 2 {
-			req.Header.Add(kv[0], kv[1])
-		}
-	}
-}
-
-// SplitDomain 分割域名为前缀和一级域名
-func SplitDomain(domain string) (prefix string, realDomain string) {
-	realDomain, _ = publicsuffix.EffectiveTLDPlusOne(domain)
-	prefix = domain[:len(domain)-len(realDomain)-1]
-	return prefix, realDomain
-}

pkg/ddns/tencentcloud.go

@@ -5,145 +5,180 @@ import (
 	"crypto/hmac"
 	"crypto/sha256"
 	"encoding/hex"
-	"encoding/json"
+	"fmt"
 	"io"
 	"log"
 	"net/http"
 	"strconv"
 	"strings"
 	"time"
+
+	"github.com/naiba/nezha/pkg/utils"
 )
 
-const (
+const te = "https://dnspod.tencentcloudapi.com"
-	url = "https://dnspod.tencentcloudapi.com"
-)
 
 type ProviderTencentCloud struct {
-	SecretID  string
+	secretID     string
-	SecretKey string
+	secretKey    string
+	domainConfig *DomainConfig
+	resp         *tcResp
 }
 
-func (provider *ProviderTencentCloud) UpdateDomain(domainConfig *DomainConfig) bool {
+type tcReq struct {
-	if domainConfig == nil {
+	RecordType string `json:"RecordType"`
-		return false
+	Domain     string `json:"Domain"`
+	RecordLine string `json:"RecordLine"`
+	Subdomain  string `json:"Subdomain,omitempty"`
+	SubDomain  string `json:"SubDomain,omitempty"` // As is
+	Value      string `json:"Value,omitempty"`
+	TTL        uint32 `json:"TTL,omitempty"`
+	RecordId   uint64 `json:"RecordId,omitempty"`
+}
+
+type tcResp struct {
+	Response struct {
+		RecordList []struct {
+			RecordId uint64
+			Value    string
+		}
+		Error struct {
+			Code string
+		}
 	}
+}
+
+func NewProviderTencentCloud(id, key string) *ProviderTencentCloud {
+	return &ProviderTencentCloud{
+		secretID:  id,
+		secretKey: key,
+	}
+}
+
+func (provider *ProviderTencentCloud) UpdateDomain(domainConfig *DomainConfig) error {
+	if domainConfig == nil {
+		return fmt.Errorf("获取 DDNS 配置失败")
+	}
+	provider.domainConfig = domainConfig
 
 	// 当IPv4和IPv6同时成功才算作成功
-	var resultV4 = true
+	var err error
-	var resultV6 = true
+	if provider.domainConfig.EnableIPv4 {
-	if domainConfig.EnableIPv4 {
+		if err = provider.addDomainRecord(true); err != nil {
-		if !provider.addDomainRecord(domainConfig, true) {
+			return err
-			resultV4 = false
 		}
 	}
 
-	if domainConfig.EnableIpv6 {
+	if provider.domainConfig.EnableIpv6 {
-		if !provider.addDomainRecord(domainConfig, false) {
+		if err = provider.addDomainRecord(false); err != nil {
-			resultV6 = false
+			return err
 		}
 	}
 
-	return resultV4 && resultV6
+	return err
 }
 
-func (provider *ProviderTencentCloud) addDomainRecord(domainConfig *DomainConfig, isIpv4 bool) bool {
+func (provider *ProviderTencentCloud) addDomainRecord(isIpv4 bool) error {
-	record, err := provider.findDNSRecord(domainConfig.FullDomain, isIpv4)
+	err := provider.findDNSRecord(isIpv4)
 	if err != nil {
-		log.Printf("查找 DNS 记录时出错: %s\n", err)
+		return fmt.Errorf("查找 DNS 记录时出错: %s", err)
-		return false
 	}
 
-	if errResponse, ok := record["Error"].(map[string]interface{}); ok {
+	if provider.resp.Response.Error.Code == "ResourceNotFound.NoDataOfRecord" { // 没有找到 DNS 记录
-		if errCode, ok := errResponse["Code"].(string); ok && errCode == "ResourceNotFound.NoDataOfRecord" { // 没有找到 DNS 记录
+		return provider.createDNSRecord(isIpv4)
-			// 添加 DNS 记录
+	} else if provider.resp.Response.Error.Code != "" {
-			return provider.createDNSRecord(domainConfig.FullDomain, domainConfig, isIpv4)
+		return fmt.Errorf("查询 DNS 记录时出错，错误代码为: %s", provider.resp.Response.Error.Code)
-		} else {
-			log.Printf("查询 DNS 记录时出错，错误代码为: %s\n", errCode)
-		}
 	}
 
 	// 默认情况下更新 DNS 记录
-	return provider.updateDNSRecord(domainConfig.FullDomain, record["RecordList"].([]interface{})[0].(map[string]interface{})["RecordId"].(float64), domainConfig, isIpv4)
+	return provider.updateDNSRecord(isIpv4)
 }
 
-func (provider *ProviderTencentCloud) findDNSRecord(domain string, isIPv4 bool) (map[string]interface{}, error) {
+func (provider *ProviderTencentCloud) findDNSRecord(isIPv4 bool) error {
-	var ipType = "A"
+	var ipType string
-	if !isIPv4 {
+	if isIPv4 {
+		ipType = "A"
+	} else {
 		ipType = "AAAA"
 	}
-	_, realDomain := SplitDomain(domain)
+
-	prefix, _ := SplitDomain(domain)
+	prefix, realDomain := splitDomain(provider.domainConfig.FullDomain)
-	data := map[string]interface{}{
+	data := &tcReq{
-		"RecordType": ipType,
+		RecordType: ipType,
-		"Domain":     realDomain,
+		Domain:     realDomain,
-		"RecordLine": "默认",
+		RecordLine: "默认",
-		"Subdomain":  prefix,
+		Subdomain:  prefix,
 	}
-	jsonData, _ := json.Marshal(data)
+
+	jsonData, _ := utils.Json.Marshal(data)
 	body, err := provider.sendRequest("DescribeRecordList", jsonData)
 	if err != nil {
-		return nil, err
+		return err
 	}
 
-	var res map[string]interface{}
+	provider.resp = &tcResp{}
-	err = json.Unmarshal(body, &res)
+	err = utils.Json.Unmarshal(body, provider.resp)
 	if err != nil {
-		return nil, err
+		return err
 	}
 
-	result := res["Response"].(map[string]interface{})
+	return nil
-	return result, nil
 }
 
-func (provider *ProviderTencentCloud) createDNSRecord(domain string, domainConfig *DomainConfig, isIPv4 bool) bool {
+func (provider *ProviderTencentCloud) createDNSRecord(isIPv4 bool) error {
-	var ipType = "A"
+	var ipType, ipAddr string
-	var ipAddr = domainConfig.Ipv4Addr
+	if isIPv4 {
-	if !isIPv4 {
+		ipType = "A"
+		ipAddr = provider.domainConfig.Ipv4Addr
+	} else {
 		ipType = "AAAA"
-		ipAddr = domainConfig.Ipv6Addr
+		ipAddr = provider.domainConfig.Ipv6Addr
 	}
-	_, realDomain := SplitDomain(domain)
+
-	prefix, _ := SplitDomain(domain)
+	prefix, realDomain := splitDomain(provider.domainConfig.FullDomain)
-	data := map[string]interface{}{
+	data := &tcReq{
-		"RecordType": ipType,
+		RecordType: ipType,
-		"RecordLine": "默认",
+		RecordLine: "默认",
-		"Domain":     realDomain,
+		Domain:     realDomain,
-		"SubDomain":  prefix,
+		SubDomain:  prefix,
-		"Value":      ipAddr,
+		Value:      ipAddr,
-		"TTL":        600,
+		TTL:        600,
 	}
-	jsonData, _ := json.Marshal(data)
+
+	jsonData, _ := utils.Json.Marshal(data)
 	_, err := provider.sendRequest("CreateRecord", jsonData)
-	return err == nil
+	return err
 }
 
-func (provider *ProviderTencentCloud) updateDNSRecord(domain string, recordID float64, domainConfig *DomainConfig, isIPv4 bool) bool {
+func (provider *ProviderTencentCloud) updateDNSRecord(isIPv4 bool) error {
-	var ipType = "A"
+	var ipType, ipAddr string
-	var ipAddr = domainConfig.Ipv4Addr
+	if isIPv4 {
-	if !isIPv4 {
+		ipType = "A"
+		ipAddr = provider.domainConfig.Ipv4Addr
+	} else {
 		ipType = "AAAA"
-		ipAddr = domainConfig.Ipv6Addr
+		ipAddr = provider.domainConfig.Ipv6Addr
 	}
-	_, realDomain := SplitDomain(domain)
+
-	prefix, _ := SplitDomain(domain)
+	prefix, realDomain := splitDomain(provider.domainConfig.FullDomain)
-	data := map[string]interface{}{
+	data := &tcReq{
-		"RecordType": ipType,
+		RecordType: ipType,
-		"RecordLine": "默认",
+		RecordLine: "默认",
-		"Domain":     realDomain,
+		Domain:     realDomain,
-		"SubDomain":  prefix,
+		SubDomain:  prefix,
-		"Value":      ipAddr,
+		Value:      ipAddr,
-		"TTL":        600,
+		TTL:        600,
-		"RecordId":   recordID,
+		RecordId:   provider.resp.Response.RecordList[0].RecordId,
 	}
-	jsonData, _ := json.Marshal(data)
+
+	jsonData, _ := utils.Json.Marshal(data)
 	_, err := provider.sendRequest("ModifyRecord", jsonData)
-	return err == nil
+	return err
 }
 
 // 以下为辅助方法，如发送 HTTP 请求等
 func (provider *ProviderTencentCloud) sendRequest(action string, data []byte) ([]byte, error) {
-	client := &http.Client{}
+	req, err := http.NewRequest("POST", te, bytes.NewBuffer(data))
-	req, err := http.NewRequest("POST", url, bytes.NewBuffer(data))
 	if err != nil {
 		return nil, err
 	}
@@ -151,8 +186,8 @@ func (provider *ProviderTencentCloud) sendRequest(action string, data []byte) ([
 	req.Header.Set("Content-Type", "application/json")
 	req.Header.Set("X-TC-Version", "2021-03-23")
 
-	provider.signRequest(provider.SecretID, provider.SecretKey, req, action, string(data))
+	provider.signRequest(provider.secretID, provider.secretKey, req, action, string(data))
-	resp, err := client.Do(req)
+	resp, err := utils.HttpClient.Do(req)
 	if err != nil {
 		return nil, err
 	}

pkg/ddns/webhook.go

@@ -2,58 +2,109 @@ package ddns
 
 import (
 	"bytes"
-	"log"
+	"fmt"
 	"net/http"
+	"net/url"
 	"strings"
+
+	"github.com/naiba/nezha/pkg/utils"
 )
 
 type ProviderWebHook struct {
-	URL           string
+	url           string
-	RequestMethod string
+	requestMethod string
-	RequestBody   string
+	requestBody   string
-	RequestHeader string
+	requestHeader string
+	domainConfig  *DomainConfig
 }
 
-func (provider *ProviderWebHook) UpdateDomain(domainConfig *DomainConfig) bool {
+func NewProviderWebHook(s, rm, rb, rh string) *ProviderWebHook {
+	return &ProviderWebHook{
+		url:           s,
+		requestMethod: rm,
+		requestBody:   rb,
+		requestHeader: rh,
+	}
+}
+
+func (provider *ProviderWebHook) UpdateDomain(domainConfig *DomainConfig) error {
 	if domainConfig == nil {
-		return false
+		return fmt.Errorf("获取 DDNS 配置失败")
+	}
+	provider.domainConfig = domainConfig
+
+	if provider.domainConfig.FullDomain == "" {
+		return fmt.Errorf("failed to update an empty domain")
 	}
 
-	if domainConfig.FullDomain == "" {
+	if provider.domainConfig.EnableIPv4 && provider.domainConfig.Ipv4Addr != "" {
-		log.Println("NEZHA>> Failed to update an empty domain")
+		req, err := provider.prepareRequest(true)
-		return false
+		if err != nil {
-	}
+			return fmt.Errorf("failed to update a domain: %s. Cause by: %v", provider.domainConfig.FullDomain, err)
-	updated := false
+		}
-	client := &http.Client{}
+		if _, err := utils.HttpClient.Do(req); err != nil {
-	if domainConfig.EnableIPv4 && domainConfig.Ipv4Addr != "" {
+			return fmt.Errorf("failed to update a domain: %s. Cause by: %v", provider.domainConfig.FullDomain, err)
-		url := provider.FormatWebhookString(provider.URL, domainConfig, "ipv4")
-		body := provider.FormatWebhookString(provider.RequestBody, domainConfig, "ipv4")
-		header := provider.FormatWebhookString(provider.RequestHeader, domainConfig, "ipv4")
-		headers := strings.Split(header, "\n")
-		req, err := http.NewRequest(provider.RequestMethod, url, bytes.NewBufferString(body))
-		if err == nil && req != nil {
-			SetStringHeadersToRequest(req, headers)
-			if _, err := client.Do(req); err != nil {
-				log.Printf("NEZHA>> Failed to update a domain: %s. Cause by: %s\n", domainConfig.FullDomain, err.Error())
-			} else {
-				updated = true
-			}
 		}
 	}
-	if domainConfig.EnableIpv6 && domainConfig.Ipv6Addr != "" {
+
-		url := provider.FormatWebhookString(provider.URL, domainConfig, "ipv6")
+	if provider.domainConfig.EnableIpv6 && provider.domainConfig.Ipv6Addr != "" {
-		body := provider.FormatWebhookString(provider.RequestBody, domainConfig, "ipv6")
+		req, err := provider.prepareRequest(false)
-		header := provider.FormatWebhookString(provider.RequestHeader, domainConfig, "ipv6")
+		if err != nil {
-		headers := strings.Split(header, "\n")
+			return fmt.Errorf("failed to update a domain: %s. Cause by: %v", provider.domainConfig.FullDomain, err)
-		req, err := http.NewRequest(provider.RequestMethod, url, bytes.NewBufferString(body))
+		}
-		if err == nil && req != nil {
+		if _, err := utils.HttpClient.Do(req); err != nil {
-			SetStringHeadersToRequest(req, headers)
+			return fmt.Errorf("failed to update a domain: %s. Cause by: %v", provider.domainConfig.FullDomain, err)
-			if _, err := client.Do(req); err != nil {
-				log.Printf("NEZHA>> Failed to update a domain: %s. Cause by: %s\n", domainConfig.FullDomain, err.Error())
-			} else {
-				updated = true
-			}
 		}
 	}
-	return updated
+	return nil
+}
+
+func (provider *ProviderWebHook) prepareRequest(isIPv4 bool) (*http.Request, error) {
+	u, err := url.Parse(provider.url)
+	if err != nil {
+		return nil, fmt.Errorf("failed parsing url: %v", err)
+	}
+
+	// Only handle queries here
+	q := u.Query()
+	for p, vals := range q {
+		for n, v := range vals {
+			vals[n] = provider.formatWebhookString(v, isIPv4)
+		}
+		q[p] = vals
+	}
+
+	u.RawQuery = q.Encode()
+	body := provider.formatWebhookString(provider.requestBody, isIPv4)
+	header := provider.formatWebhookString(provider.requestHeader, isIPv4)
+	headers := strings.Split(header, "\n")
+
+	req, err := http.NewRequest(provider.requestMethod, u.String(), bytes.NewBufferString(body))
+	if err != nil {
+		return nil, fmt.Errorf("failed creating new request: %v", err)
+	}
+
+	utils.SetStringHeadersToRequest(req, headers)
+	return req, nil
+}
+
+func (provider *ProviderWebHook) formatWebhookString(s string, isIPv4 bool) string {
+	var ipAddr, ipType string
+	if isIPv4 {
+		ipAddr = provider.domainConfig.Ipv4Addr
+		ipType = "ipv4"
+	} else {
+		ipAddr = provider.domainConfig.Ipv6Addr
+		ipType = "ipv6"
+	}
+
+	r := strings.NewReplacer(
+		"{ip}", ipAddr,
+		"{domain}", provider.domainConfig.FullDomain,
+		"{type}", ipType,
+		"\r", "",
+	)
+
+	result := r.Replace(strings.TrimSpace(s))
+	return result
 }

pkg/utils/utils.go

@@ -3,6 +3,7 @@ package utils
 import (
 	"crypto/rand"
 	"math/big"
+	"net/http"
 	"os"
 	"regexp"
 	"strings"
@@ -86,3 +87,15 @@ func Uint64SubInt64(a uint64, b int64) uint64 {
 	}
 	return a - uint64(b)
 }
+
+func SetStringHeadersToRequest(req *http.Request, headers []string) {
+	if req == nil {
+		return
+	}
+	for _, element := range headers {
+		kv := strings.SplitN(element, ":", 2)
+		if len(kv) == 2 {
+			req.Header.Add(kv[0], kv[1])
+		}
+	}
+}

resource/l10n/en-US.toml

@@ -226,6 +226,9 @@ other = "Secret"
 [Note]
 other = "Note"
 
+[PublicNote]
+other = "Public Note"
+
 [LinuxOneKeyInstall]
 other = "Linux One-Command Install"
 
@@ -653,7 +656,52 @@ other = "Disable Switch Template in Frontend"
 other = "Servers On World Map"
 
 [NAT]
-other = "NAT"
+other = "NAT Traversal"
+
+[LocalService]
+other = "Local service"
+
+[LocalServicePlaceholder]
+other = "192.168.1.1:80 (with port)"
+
+[BindHostname]
+other = "Bind hostname"
 
 [NetworkSpiterList]
-other = "Network Monitor"
+other = "Network Monitor"
+
+[Refresh]
+other = "Refresh"
+
+[CopyPath]
+other = "Copy Path"
+
+[Goto]
+other = "Go to"
+
+[GotoHeadline]
+other = "Go to a Folder"
+
+[GotoGo]
+other = "Go"
+
+[GotoClose]
+other = "Cancel"
+
+[FMError]
+other = "Agent returned an error, please view the console for details. To open a new connection, reopen the FM again."
+
+[Remaining]
+other = "Remaining"
+
+[Lifetime]
+other = "Lifetime"
+
+[Price]
+other = "Price"
+
+[Expired]
+other = "Expired"
+
+[Days]
+other = "d"

resource/l10n/es-ES.toml

@@ -226,6 +226,9 @@ other = "Secreto"
 [Note]
 other = "Nota"
 
+[PublicNote]
+other = "Nota Pública"
+
 [LinuxOneKeyInstall]
 other = "Instalación Linux con Un Solo Clic"
 
@@ -653,7 +656,52 @@ other = "Deshabilitar Cambio de Plantilla en Frontend"
 other = "Servidores en el mapa mundial"
 
 [NAT]
-other = "NAT"
+other = "NAT traversal"
+
+[LocalService]
+other = "Servicio de red local"
+
+[LocalServicePlaceholder]
+other = "192.168.1.1:80 (con puerto)"
+
+[BindHostname]
+other = "Vincular nombre de host"
 
 [NetworkSpiterList]
-other = "Red Monitor"
+other = "Monitor de red"
+
+[Refresh]
+other = "Actualizar"
+
+[CopyPath]
+other = "Copiar ruta"
+
+[Goto]
+other = "Ir a"
+
+[GotoHeadline]
+other = "Ir a una carpeta"
+
+[GotoGo]
+other = "Ir"
+
+[GotoClose]
+other = "Cancelar"
+
+[FMError]
+other = "Agent devolvió un error, consulte la consola para obtener más detalles. Para abrir una nueva conexión, vuelva a abrir el FM."
+
+[Remaining]
+other = "Remaining"
+
+[Lifetime]
+other = "Lifetime"
+
+[Price]
+other = "Price"
+
+[Expired]
+other = "Expired"
+
+[Days]
+other = "d"

resource/l10n/zh-CN.toml

@@ -226,6 +226,9 @@ other = "密钥"
 [Note]
 other = "备注"
 
+[PublicNote]
+other = "公开备注"
+
 [LinuxOneKeyInstall]
 other = "Linux 一键安装"
 
@@ -655,5 +658,50 @@ other = "服务器世界分布图"
 [NAT]
 other = "内网穿透"
 
+[LocalService]
+other = "内网服务"
+
+[LocalServicePlaceholder]
+other = "192.168.1.1:80(带端口)"
+
+[BindHostname]
+other = "绑定域名"
+
 [NetworkSpiterList]
 other = "网络监控"
+
+[Refresh]
+other = "刷新"
+
+[CopyPath]
+other = "复制路径"
+
+[Goto]
+other = "跳往"
+
+[GotoHeadline]
+other = "跳往文件夹"
+
+[GotoGo]
+other = "确认"
+
+[GotoClose]
+other = "取消"
+
+[FMError]
+other = "Agent 返回了错误，请查看控制台获取详细信息。要建立新连接，请重新打开 FM。"
+
+[Remaining]
+other = "剩余"
+
+[Lifetime]
+other = "永续"
+
+[Price]
+other = "价格"
+
+[Expired]
+other = "已到期"
+
+[Days]
+other = "天"

resource/l10n/zh-TW.toml

@@ -50,7 +50,7 @@ other = "新增計劃任務"
 other = "名稱"
 
 [Scheduler]
-other = "計劃"
+other = "排程"
 
 [BackUp]
 other = "備份"
@@ -80,37 +80,37 @@ other = "特定伺服器"
 other = "輸入ID/名稱以搜尋"
 
 [NotificationMethodGroup]
-other = "通知方式組"
+other = "通知群組"
 
 [PushSuccessMessages]
-other = "推送成功的消息"
+other = "推送成功的訊息"
 
 [TaskType]
 other = "任務類型"
 
 [CronTask]
-other = "計劃任務"
+other = "排程任務"
 
 [TriggerTask]
 other = "觸發任務"
 
 [TheFormaOfTheScheduleIs]
-other = "計劃的格式為："
+other = "排程的格式為："
 
 [SecondsMinutesHoursDaysMonthsWeeksSeeDetails]
 other = "秒 分 時 天 月 星期，詳情見"
 
 [ScheduleExpressionFormat]
-other = "計劃表達式格式"
+other = "排程表達式格式"
 
 [IntroductionOfCommands]
-other = "命令說明：編寫命令時類似於 shell/bat 腳本。建議不要換行，多個命令可用 <code>&&</code> 或 <code>&</code> 連接，若出現命令無法找到的情況，可能是由於 <code>PATH</code> 環境變量配置問題。在 <code>Linux</code> 伺服器上，可在命令開頭加入 <code>source ~/.bashrc</code>，或使用命令的絕對路徑執行。"
+other = "命令說明：編寫命令時類似於 shell/bat 腳本。建議不要換行，多個命令可用 <code>&&</code> 或 <code>&</code> 連接，若出現命令無法找到的情況，可能是由於 <code>PATH</code> 環境變數配置問題。在 <code>Linux</code> 伺服器上，可在命令開頭加入 <code>source ~/.bashrc</code>，或使用命令的絕對路徑執行。"
 
 [AddMonitor]
 other = "新增監控"
 
 [Blog]
-other = "博客"
+other = "部落格"
 
 [Target]
 other = "目標"
@@ -158,7 +158,7 @@ other = "新增通知方式"
 other = "分組"
 
 [DoNotSendTestMessages]
-other = "不發送測試信息"
+other = "不發送測試訊息"
 
 [RequestMethod]
 other = "請求方式"
@@ -221,11 +221,14 @@ other = "排序"
 other = "越大越靠前"
 
 [Secret]
-other = "密鑰"
+other = "金鑰"
 
 [Note]
 other = "備註"
 
+[PublicNote]
+other = "公開備註"
+
 [LinuxOneKeyInstall]
 other = "Linux 一鍵安裝"
 
@@ -254,10 +257,10 @@ other = "忽略所有"
 other = "觸發執行"
 
 [DeleteScheduledTask]
-other = "刪除計劃任務"
+other = "刪除排程任務"
 
 [ConfirmToDeleteThisScheduledTask]
-other = "確認刪除此計劃任務？"
+other = "確認刪除此排程任務？"
 
 [AccessDenied]
 other = "訪問被拒絕"
@@ -407,7 +410,7 @@ other = "流量"
 other = "負載"
 
 [ProcessCount]
-other = "進程數"
+other = "行程數"
 
 [ConnCount]
 other = "連接數"
@@ -422,7 +425,7 @@ other = "活動"
 other = "版本"
 
 [NetSpeed]
-other = "網絡"
+other = "網路"
 
 [Uptime]
 other = "在線"
@@ -458,7 +461,7 @@ other = "狀態"
 other = "可用性"
 
 [AverageLatency]
-other = "平均響應時間"
+other = "平均回應時間"
 
 [CycleTransferStats]
 other = "周期性流量統計"
@@ -524,7 +527,7 @@ other = "發生錯誤"
 other = "系統錯誤"
 
 [NetworkError]
-other = "網絡錯誤"
+other = "網路錯誤"
 
 [ServicesStatus]
 other = "服務狀態"
@@ -536,7 +539,7 @@ other = "伺服器管理"
 other = "服務監控"
 
 [ScheduledTasks]
-other = "計劃任務"
+other = "排程任務"
 
 [ApiManagement]
 other = "API 管理"
@@ -614,7 +617,7 @@ other = "對遊客隱藏"
 other = "菜單"
 
 [NetworkSpiter]
-other = "網絡"
+other = "網路"
 
 [EnableShowInService]
 other = "在服務中顯示"
@@ -653,7 +656,52 @@ other = "禁止前台切換主題"
 other = "伺服器世界分布圖"
 
 [NAT]
-other = "NAT"
+other = "NAT穿透"
+
+[LocalService]
+other = "內網服務"
+
+[LocalServicePlaceholder]
+other = "192.168.1.1:80(帶埠號)"
+
+[BindHostname]
+other = "綁定網域"
 
 [NetworkSpiterList]
-other = "網絡監控"
+other = "網路監控"
+
+[Refresh]
+other = "重新整理"
+
+[CopyPath]
+other = "複製路徑"
+
+[Goto]
+other = "跳至"
+
+[GotoHeadline]
+other = "跳至資料夾"
+
+[GotoGo]
+other = "確定"
+
+[GotoClose]
+other = "取消"
+
+[FMError]
+other = "Agent 回傳了錯誤，請查看主控台獲取詳細資訊。要建立新連線，請重新開啟 FM。"
+
+[Remaining]
+other = "剩餘"
+
+[Lifetime]
+other = "永續"
+
+[Price]
+other = "價格"
+
+[Expired]
+other = "已到期"
+
+[Days]
+other = "天"

resource/static/file.js

@@ -0,0 +1,70 @@
+let receivedLength = 0;
+let expectedLength = 0;
+let root;
+let draftHandle;
+let accessHandle;
+
+const Operation = Object.freeze({
+    WriteHeader: 1,
+    WriteChunks: 2,
+    DeleteFiles: 3
+});
+
+onmessage = async function (event) {
+    try {
+        const { operation, arrayBuffer, fileName } = event.data;
+
+        switch (operation) {
+            case Operation.WriteHeader: {
+                const dataView = new DataView(arrayBuffer);
+                expectedLength = Number(dataView.getBigUint64(4, false));
+                receivedLength = 0;
+
+                // Create a new temporary file
+                root = await navigator.storage.getDirectory();
+                draftHandle = await root.getFileHandle(fileName, { create: true });
+                accessHandle = await draftHandle.createSyncAccessHandle();
+
+                // Inform that file handle is created
+                const dataChunk = arrayBuffer.slice(12);
+                receivedLength += dataChunk.byteLength;
+                accessHandle.write(dataChunk, { at: 0 });
+                const progress = 'got handle';
+                postMessage({ type: 'progress', progress: progress });
+                break;
+            }
+            case Operation.WriteChunks: {
+                if (!accessHandle) {
+                    throw new Error('accessHandle is undefined');
+                }
+
+                const dataChunk = arrayBuffer;
+                accessHandle.write(dataChunk, { at: receivedLength });
+                receivedLength += dataChunk.byteLength;
+
+                if (receivedLength === expectedLength) {
+                    accessHandle.flush();
+                    accessHandle.close();
+
+                    const fileBlob = await draftHandle.getFile();
+                    const blob = new Blob([fileBlob], { type: 'application/octet-stream' });
+
+                    postMessage({ type: 'result', blob: blob, fileName: fileName });
+                }
+                break;
+            }
+            case Operation.DeleteFiles: {
+                for await (const [name, handle] of root.entries()) {
+                    if (handle.kind === 'file') {
+                        await root.removeEntry(name);
+                    } else if (handle.kind === 'directory') {
+                        await root.removeEntry(name, { recursive: true });
+                    }
+                }
+                break;
+            }
+        }
+    } catch (error) {
+        postMessage({ error: error.message });
+    }
+};

resource/static/main.js

@@ -331,6 +331,7 @@ function addOrEditServer(server, conf) {
     .find("input[name=DisplayIndex]")
     .val(server ? server.DisplayIndex : null);
   modal.find("textarea[name=Note]").val(server ? server.Note : null);
+  modal.find("textarea[name=PublicNote]").val(server ? server.PublicNote : null);
   if (server) {
     modal.find(".secret.field").attr("style", "");
     modal.find(".command.field").attr("style", "");

resource/static/manifest-en-US.json

@@ -0,0 +1,36 @@
+{
+    "name": "Nezha",
+    "short_name": "Nezha",
+    "icons": [
+        {
+            "src": "/static/manifest-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/static/manifest-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "/static/manifest-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/static/manifest-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ],
+    "start_url": "/",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#000000",
+    "lang": "eu-US",
+    "dir": "auto"
+}

resource/static/manifest-zh-CN.json

@@ -0,0 +1,36 @@
+{
+    "name": "哪吒监控",
+    "short_name": "哪吒监控",
+    "icons": [
+        {
+            "src": "/static/manifest-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/static/manifest-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "/static/manifest-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/static/manifest-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ],
+    "start_url": "/",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#000000",
+    "lang": "zh-CN",
+    "dir": "auto"
+}

resource/static/theme-default/js/mixin.js

@@ -13,7 +13,18 @@ const mixinsVue = {
         this.isMobile = this.checkIsMobile();
         this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate;
     },
+    mounted() {
+        this.initDropdown();
+    },
     methods: {
+        initDropdown() {
+            if(this.isMobile) $('.ui.dropdown').dropdown({
+                action: 'hide',
+                on: 'click',
+                duration: 100,
+                direction: 'direction'
+            });
+        },
         toggleTemplate(template) {
             if( template != this.preferredTemplate){
                 this.preferredTemplate = template;

resource/static/theme-server-status/css/dark.css

@@ -8,6 +8,11 @@ body[theme="dark"] .navbar .navbar-brand {
     color: #ffffff;
 }
 
+body[theme="dark"] .navbar .navbar-nav li.pc-active a,
+body[theme="dark"] .navbar .navbar-nav li.m-active a{
+    color: rgba(73, 146, 255, 1);
+}
+
 body[theme="dark"] .navbar .dropdown-menu {
     background-color: rgba(23, 26, 30, 1);
     border-color: rgba(49, 54, 59, 1);
@@ -88,8 +93,8 @@ body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
 /* expandRow展开部分样式结束 */
 
 body[theme="dark"] .progress {
-    background-image: linear-gradient(#2c2c2c 0,rgba(28, 29, 38, 1) 100%);
+    background-image: none;
-    background-color: rgba(28, 29, 38, 1);
+    background-color: rgba(255, 255, 255, 0.075); 
 }
 
 body[theme="dark"] .progress-bar {
@@ -174,5 +179,5 @@ body[theme="dark"] .toolbox i{
 }
 
 body[theme="dark"] .network-box .network-box-header{
-    border-bottom: 1px solid rgba(110, 112, 121, 0.25);
+    border-bottom-color: rgba(110, 112, 121, 0.25);
 }

resource/static/theme-server-status/css/light.css

@@ -16,10 +16,15 @@ body[theme="light"] .navbar .navbar-brand {
     color: rgba(0, 0, 0, 0.87);
 }
 
-body[theme="light"] .navbar .navbar-nav > li > a{
+body[theme="light"] .navbar .navbar-nav > li > a {
     color: rgba(0, 0, 0, 0.87);
 }
 
+body[theme="light"] .navbar .navbar-nav li.pc-active a,
+body[theme="light"] .navbar .navbar-nav li.m-active a {
+    color: rgba(73, 146, 255, 1);
+}
+
 body[theme="light"] .navbar .navbar-nav > .open > a:focus,
 body[theme="light"] .navbar .navbar-nav > .open > a:hover,
 body[theme="light"] .navbar .navbar-nav > .active > a,
@@ -198,7 +203,7 @@ body[theme="light"] .modal-header i.xclose{
 }
 
 body[theme="light"] .network-box .network-box-header{
-    border-bottom: 1px solid rgba(224, 230, 241, 0.6);
+    border-bottom-color: rgba(224, 230, 241, 0.6);
 }
 
 @media only screen and (max-width: 767px) {

resource/static/theme-server-status/css/main.css

@@ -237,8 +237,8 @@ tr.accordion-toggle{
 }
 
 .node-cell.network {
-    min-width: 100px;
+    min-width: 110px;
-    max-width: 100px;
+    max-width: 110px;
 }
 
 .node-cell.traffic {
@@ -250,6 +250,24 @@ tr.accordion-toggle{
     max-width: 50px;
 }
 
+.node-cell.remaining {
+    min-width: 65px;
+    max-width: 65px;    
+}
+
+.node-cell.remaining .additional {
+    position: absolute;
+    left: 0; 
+    font-size: 12px;
+    text-align: center;
+    width: 100%;
+}
+
+.node-cell.remaining .additional small{
+    white-space: nowrap;
+    font-size: 80%;
+}
+
 .temp-detail {
     cursor: pointer;
 }
@@ -331,6 +349,8 @@ td.ping-network-quality {
     padding: 5px 0px 15px 5px;
     cursor: pointer;
     width: 100%;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
 }
 
 .network-box .network-box-header .dropdown-menu {
@@ -381,6 +401,7 @@ td.ping-network-quality {
 }
 
 .network-box .chartTitle {
+    cursor: pointer;
     text-align: center;
     font-size: 18px;
     margin: 18px 0px 15px 0px;
@@ -480,7 +501,12 @@ footer p{
         padding-top:60px !important;
     }
     .nezha {
-        min-height: calc(74.5vh);
+        min-height: calc(100vh - 90px);
+        min-height: calc(var(--vh, 1vh) * 100 - 90px);
+    }
+    #chartbox {
+        min-height: calc(100vh - 170px);
+        min-height: calc(var(--vh, 1vh) * 100 - 170px);    
     }
     .content {
         padding: 0;
@@ -523,6 +549,10 @@ footer p{
         display: none;
         visibility: hidden;
     }
+    .node-cell.remaining {
+        min-width: 75px;
+        max-width: 75px;    
+    }
     .accordian-body{
         margin: 5px 0px 5px 10px;        
     }
@@ -566,6 +596,7 @@ footer p{
     .network-box .network-box-header {
         margin: 8px 0px 0px 8px;
         font-size: 16px;
+        border-bottom: none;
     }
     .network-box .chartTitle {
         font-size: 16px;

resource/static/theme-server-status/js/mixin.js

@@ -26,7 +26,9 @@ const mixinsVue = {
         this.semiTransparent = this.initSemiTransparent();
         this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate;
         this.colors = this.theme == "dark" ? this.colorsDark : this.colorsLight;
+        this.setBenchmarkHeight();
         window.addEventListener('scroll', this.handleScroll);
+        window.addEventListener('resize', this.setBenchmarkHeight());
     },
     destroyed() {
         window.removeEventListener('scroll', this.handleScroll);
@@ -152,6 +154,15 @@ const mixinsVue = {
         },
         checkIsMobile() { // 检测设备类型,页面宽度小于768px认为是移动设备
             return window.innerWidth <= 768;
+        },
+        isMenuActive(page){
+            if(page == this.$root.page) {
+                return this.isMobile ? 'm-active' : 'pc-active'; 
+            }
+        },
+        setBenchmarkHeight() {
+            let vh = window.innerHeight * 0.01;
+            document.documentElement.style.setProperty('--vh', `${vh}px`);
         }
     }
 }

resource/template/common/footer.html

@@ -10,7 +10,7 @@
 <script src="https://unpkg.com/[email protected]/dist/semantic.min.js"></script>
 <script src="/static/semantic-ui-alerts.min.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
-<script src="/static/main.js?v20240714"></script>
+<script src="/static/main.js?v2024927"></script>
 <script>
     (function () {
         updateLang({{.LANG }});

resource/template/component/nat.html

@@ -13,11 +13,11 @@
                 <input type="number" name="ServerID" placeholder="1">
             </div>
             <div class="field">
-                <label>内网服务</label>
+                <label>{{tr "LocalService"}}</label>
-                <input type="text" name="Host" placeholder="192.168.1.1:80(带端口)">
+                <input type="text" name="Host" placeholder="{{tr "LocalServicePlaceholder"}}">
             </div>
             <div class="field">
-                <label>绑定域名</label>
+                <label>{{tr "BindHostname"}}</label>
                 <input type="text" name="Domain" placeholder="router.app.yourdomain.com">
             </div>
         </form>

resource/template/component/server.html

@@ -56,6 +56,10 @@
                 <label>{{tr "Note"}}</label>
                 <textarea name="Note"></textarea>
             </div>
+            <div class="field">
+                <label>{{tr "PublicNote"}}</label>
+                <textarea name="PublicNote"></textarea>
+            </div>
             <div class="command field">
                 <label>{{tr "LinuxOneKeyInstall"}}</label>
                 <div class="ui message">

resource/template/dashboard-default/file.html

@@ -58,9 +58,9 @@
         <mdui-dropdown>
             <mdui-button-icon slot="trigger" icon="menu"></mdui-button-icon>
             <mdui-menu>
-                <mdui-menu-item id="refresh">Refresh</mdui-menu-item>
+                <mdui-menu-item id="refresh">{{tr "Refresh"}}</mdui-menu-item>
-                <mdui-menu-item id="copy">Copy path</mdui-menu-item>
+                <mdui-menu-item id="copy">{{tr "CopyPath"}}</mdui-menu-item>
-                <mdui-menu-item id="goto">Go to</mdui-menu-item>
+                <mdui-menu-item id="goto">{{tr "Goto"}}</mdui-menu-item>
             </mdui-menu>
         </mdui-dropdown>
         <span id="current-directory"></span>
@@ -70,16 +70,16 @@
     <mdui-list id="file-list" class="file-list"></mdui-list>
 
     <mdui-dialog id="error-dialog" headline="Error"
-        description="Agent returned an error, please view the console for details. To open a new connection, reopen the FM again."></mdui-dialog>
+        description="{{tr "FMError"}}"></mdui-dialog>
 
     <mdui-dialog id="upd-modal" class="modal">
         <mdui-linear-progress id="upd-progress"></mdui-linear-progress>
     </mdui-dialog>
 
-    <mdui-dialog id="goto-dialog" headline="Go to a folder" close-on-overlay-click>
+    <mdui-dialog id="goto-dialog" headline="{{tr "GotoHeadline"}}" close-on-overlay-click>
         <mdui-text-field id="goto-text" variant="outlined" value=""></mdui-text-field>
-        <mdui-button id="goto-go" slot="action" variant="text">Go</mdui-button>
+        <mdui-button id="goto-go" slot="action" variant="text">{{tr "GotoGo"}}</mdui-button>
-        <mdui-button id="goto-close" slot="action" variant="tonal">Close</mdui-button>
+        <mdui-button id="goto-close" slot="action" variant="tonal">{{tr "GotoClose"}}</mdui-button>
     </mdui-dialog>
 
     <script>
@@ -90,6 +90,8 @@
         let receivedLength = 0;
         let isFirstChunk = true;
         let isUpCompleted = false;
+        let handleReady = false;
+        let worker;
 
         function updateDirectoryTitle() {
             const directoryTitle = document.getElementById('current-directory');
@@ -160,7 +162,6 @@
             expectedLength = 0;
             receivedLength = 0;
             isFirstChunk = true;
-            updateProgress(0);
         }
 
         function downloadFile(filePath) {
@@ -220,7 +221,7 @@
 
             const checkCompletion = setInterval(() => {
                 if (isUpCompleted) {
-                    clearInterval(checkCompletion); // 任务完成后停止检查
+                    clearInterval(checkCompletion);
                     hideUpdModal();
                     resetUpdState();
                     listFile();
@@ -265,20 +266,6 @@
             return { items };
         }
 
-        async function handleDownloadFile(blob) {
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = fileName;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-
-            hideUpdModal();
-            resetUpdState();
-        }
-
         function readFileAsArrayBuffer(blob) {
             return new Promise((resolve, reject) => {
                 const reader = new FileReader();
@@ -337,8 +324,6 @@
             modal.open = true;
             if (operation === 'd') {
                 modal.setAttribute('headline', 'Downloading...');
-                modal.setAttribute('value', '0');
-                modal.setAttribute('max', '100');
             } else if (operation === 'u') {
                 modal.setAttribute('headline', 'Uploading...');
             }
@@ -349,9 +334,17 @@
             modal.open = false;
         }
 
-        function updateProgress(percentage) {
+        function waitForHandleReady() {
-            const progressBar = document.getElementById('upd-progress');
+            return new Promise(resolve => {
-            progressBar.value = percentage;
+                const checkReady = () => {
+                    if (handleReady) {
+                        resolve();
+                    } else {
+                        setTimeout(checkReady, 10);
+                    }
+                };
+                checkReady();
+            });
         }
 
         const socket = new WebSocket((window.location.protocol === 'https:' ? 'wss' : 'ws') + '://' + window.location.host + '/file/' + '{{.SessionID}}');
@@ -369,31 +362,36 @@
                     const completeIdentifier = new Uint8Array([0x4E, 0x5A, 0x55, 0x50]); // NZUP
 
                     if (arraysEqual(identifier, fileIdentifier)) {
-                        // Download
+                        worker = new Worker('/static/file.js');
-                        const dataView = new DataView(arrayBuffer);
+                        worker.onmessage = async function (event) {
-                        expectedLength = Number(dataView.getBigUint64(4, false));
+                            switch (event.data.type) {
+                                case 'error':
+                                    console.error('Error from worker:', event.data.error);
+                                    break;
+                                case 'progress':
+                                    handleReady = true;
+                                    break;
+                                case 'result':
+                                    handleReady = false;
+                                    const url = URL.createObjectURL(event.data.blob);
+                                    const anchor = document.createElement('a');
+                                    anchor.href = url;
+                                    anchor.download = event.data.fileName;
+                                    anchor.click();
+                                    URL.revokeObjectURL(url);
 
-                        isFirstChunk = false;
+                                    // Delete the file in OPFS
-                        receivedLength = 0;
+                                    window.addEventListener('beforeunload', async () => {
+                                        await worker.postMessage({ operation: 3, arrayBuffer: null, fileName: event.data.fileName });
+                                    });
 
-                        // Initialize writer
+                                    hideUpdModal();
-                        const stream = new WritableStream({
+                                    resetUpdState();
-                            write(chunk) {
+                                    break;
-                                receivedBuffer.push(chunk);
-                            },
-                            close() {
-                                // Save to blob
-                                const completeBlob = new Blob(receivedBuffer);
-                                handleDownloadFile(completeBlob);
                             }
-                        });
+                        };
-
+                        await worker.postMessage({ operation: 1, arrayBuffer: arrayBuffer, fileName: fileName });
-                        writer = stream.getWriter();
+                        isFirstChunk = false;
-
-                        // Read data after 12 bytes (if any)
-                        const dataChunk = arrayBuffer.slice(12);
-                        writer.write(dataChunk);
-                        receivedLength += dataChunk.byteLength;
                     } else if (arraysEqual(identifier, fileNameIdentifier)) {
                         // List files
                         const { items } = await parseFileList(arrayBuffer);
@@ -414,23 +412,11 @@
                         return;
                     }
                 } else {
-                    // Handle data chunks
+                    await waitForHandleReady();
-                    receivedLength += arrayBuffer.byteLength;
+                    await worker.postMessage({ operation: 2, arrayBuffer: arrayBuffer, fileName: fileName });
-                    writer.write(arrayBuffer);
-
-                    // Update progress bar
-                    const percentage = Math.min((receivedLength / expectedLength) * 100, 100);
-                    updateProgress(percentage);
-
-                    if (receivedLength === expectedLength) {
-                        writer.close(); // Close the writer
-                    }
                 }
             } catch (error) {
                 console.error('Error processing received data:', error);
-                if (writer) {
-                    writer.abort();
-                }
             }
         };
 
@@ -494,6 +480,7 @@
                 const file = event.target.files[0];
                 if (file) {
                     await uploadFile(file);
+                    isUpCompleted = false;
                 }
             });
 

resource/template/dashboard-default/nat.html

@@ -16,8 +16,8 @@
                     <th>ID</th>
                     <th>{{tr "Name"}}</th>
                     <th>Agent ID</th>
-                    <th>内网服务</th>
+                    <th>{{tr "LocalService"}}</th>
-                    <th>绑定域名</th>
+                    <th>{{tr "BindHostname"}}</th>
                     <th>{{tr "Administration"}}</th>
                 </tr>
             </thead>

resource/template/dashboard-default/server.html

@@ -30,12 +30,10 @@
                     <th>{{tr "VersionNumber"}}</th>
                     <th>{{tr "HideForGuest"}}</th>
                     <th>{{tr "EnableDDNS"}}</th>
-                    <th>{{tr "EnableIPv4"}}</th>
-                    <th>{{tr "EnableIpv6"}}</th>
-                    <th>{{tr "DDNSDomain"}}</th>
                     <th>{{tr "Secret"}}</th>
                     <th>{{tr "OneKeyInstall"}}</th>
                     <th>{{tr "Note"}}</th>
+                    <th>{{tr "PublicNote"}}</th>
                     <th>{{tr "Administration"}}</th>
                 </tr>
             </thead>
@@ -50,9 +48,6 @@
                     <td>{{$server.Host.Version}}</td>
                     <td>{{$server.HideForGuest}}</td>
                     <td>{{$server.EnableDDNS}}</td>
-                    <td>{{$server.EnableIPv4}}</td>
-                    <td>{{$server.EnableIpv6}}</td>
-                    <td>{{$server.DDNSDomain}}</td>
                     <td>
                         <button class="ui icon green mini button" data-clipboard-text="{{$server.Secret}}" data-tooltip="{{tr "ClickToCopy"}}">
                             <i class="copy icon"></i>
@@ -75,13 +70,22 @@
                             <i class="apple icon"></i>
                         </button>
                     </td>
-                    <td style="word-break: break-word;white-space: pre-wrap;">{{$server.Note}}</td>
+                    <td>
+                        {{if $server.Note}}
+                            <button class="ui icon green mini button" title="{{ $server.Note }}" onclick="addOrEditServer({{$server.MarshalForDashboard}})"><i class="sticky note icon"></i></button>
+                        {{end}}
+                    </td>
+                    <td>
+                        {{if $server.PublicNote}}
+                            <button class="ui icon green mini button" title="{{$server.PublicNote}}" onclick="addOrEditServer({{$server.MarshalForDashboard}})"><i class="sticky clipboard icon"></i></button>
+                        {{end}}
+                    </td>
                     <td>
                         <div class="ui mini icon buttons">
                             <button class="ui button" onclick="connectToServer({{$server.ID}})">
                                 <i class="terminal icon"></i>
                             </button>
-                            <button class="ui button" onclick="addOrEditServer({{$server.Marshal}})">
+                            <button class="ui button" onclick="addOrEditServer({{$server.MarshalForDashboard}})">
                                 <i class="edit icon"></i>
                             </button>
                             <button class="ui button"

resource/template/dashboard-default/terminal.html

@@ -63,7 +63,7 @@
     <script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
     <script src="https://unpkg.com/@xterm/[email protected]/lib/addon-fit.js"></script>
     <script src="https://unpkg.com/@xterm/[email protected]/lib/addon-web-links.js"></script>
-    <script src="https://unpkg.com/trzsz@1.1.5/lib/trzsz.js"></script>
+    <script src="https://unpkg.com/@xterm/[email protected]1.0/lib/addon-attach.js"></script>
     <script>
         let sendResizing = false;
 
@@ -107,10 +107,10 @@
             cursorBlink: true,
         });
         const socket = new WebSocket((window.location.protocol == 'https:' ? 'wss' : 'ws') + '://' + window.location.host + '/terminal/' + '{{.SessionID}}');
-        socket.binaryType = 'arraybuffer';
 
-        const trzszAddon = new TrzszAddon(socket);
+        const attachAddon = new AttachAddon.AttachAddon(socket);
-        term.loadAddon(trzszAddon);
+        term.loadAddon(attachAddon);
+
         const fitAddon = new FitAddon.FitAddon();
         term.loadAddon(fitAddon);
 

resource/template/theme-angel-kanade/home.html

@@ -261,22 +261,23 @@
         const x = readableBytes(bs)
         return x != "NaN undefined" ? x : '0B'
       },
-      getCoreAndGHz(str){
+      getCoreAndGHz(arr) {
-        if((str || []).hasOwnProperty(0) === false){
+        if ((arr || []).length === 0) {
-            return '';
+          return '';
         }
-        str = str[0];
+        let totalCores = 0;
-	    let GHz = str.match(/(\d|\.)+GHz/g);
+        arr.forEach(str => {
-	    let Core = str.match(/(\d|\.)+ Physical/g);
+          let coreMatch = str.match(/(\d+(\.\d+)?) Physical/g);
-	    GHz = GHz!==null?GHz.hasOwnProperty(0)===false?'':GHz[0]:''
+          let coreCount = 0;
-	    Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?'
+          if (coreMatch) {
-	    if(Core === '?'){
+            coreCount = parseFloat(coreMatch[0]);
-	        let Core = str.match(/(\d|\.)+ Virtual/g);
+            } else {
-	        Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?'
+            let coreMatch = str.match(/(\d+(\.\d+)?) Virtual/g);
-	        return Core.replace('Virtual','Core')
+            coreCount = coreMatch ? parseFloat(coreMatch[0]) : 0;
-	    }
+          }
-	    return Core.replace('Physical','Core');
+            totalCores += coreCount;
-	   
+        });
+        return `${totalCores} Cores`;
       },
       getByteToGB(bs){
         return (bs/1024/1024/1024).toFixed(2) + 'GB'

resource/template/theme-default/header.html

@@ -3,12 +3,21 @@
 <html lang="{{.Conf.Language}}">
 
 <head>
-    <meta charset="UTF-8">
+    <title>{{ .Title }}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta content="telephone=no" name="format-detection">
-    <title>{{.Title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="theme-color" content="#000000" />
+    {{ if eq .Conf.Language "zh-CN" }}
+        <link rel="manifest" href="/static/manifest-zh-CN.json?v20240905" />
+    {{ else }}
+        <link rel="manifest" href="/static/manifest-en-US.json?v20240905" />
+    {{ end }}
+    <link rel="apple-touch-startup-image" href="/static/logo.svg" />
+    <link rel="shortcut icon" type="image/png" href="/static/logo.svg">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/semantic.min.css">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/assets/font-logos.css">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/font/bootstrap-icons.min.css">
@@ -21,7 +30,7 @@
     <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 src="/static/theme-default/js/mixin.js?v20240911"></script>
     <script>
         document.documentElement.setAttribute('nz-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
     </script>

resource/template/theme-default/home.html

@@ -194,7 +194,7 @@
             ]
         },
         mixins: [mixinsVue],
-            created() {
+        created() {
             this.servers = JSON.parse('{{.Servers}}').servers;
             this.group()
         },
@@ -474,21 +474,23 @@
                 const sizes = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
                 return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
             },
-            getCoreAndGHz(str){
+            getCoreAndGHz(arr) {
-                if ((str || []).hasOwnProperty(0) === false) {
+                if ((arr || []).length === 0) {
                     return '';
                 }
-                str = str[0];
+                let totalCores = 0;
-                let GHz = str.match(/(\d|\.)+GHz/g);
+                arr.forEach(str => {
-                let Core = str.match(/(\d|\.)+ Physical/g);
+                    let coreMatch = str.match(/(\d+(\.\d+)?) Physical/g);
-                GHz = GHz !== null ? GHz.hasOwnProperty(0) === false ? '' : GHz[0] : ''
+                    let coreCount = 0;
-                Core = Core !== null ? Core.hasOwnProperty(0) === false ? '?' : Core[0] : '?'
+                    if (coreMatch) {
-                if (Core === '?') {
+                        coreCount = parseFloat(coreMatch[0]);
-                    let Core = str.match(/(\d|\.)+ Virtual/g);
+                    } else {
-                    Core = Core !== null ? Core.hasOwnProperty(0) === false ? '?' : Core[0] : '?'
+                        let coreMatch = str.match(/(\d+(\.\d+)?) Virtual/g);
-                    return Core.replace('Virtual', 'Core')
+                        coreCount = coreMatch ? parseFloat(coreMatch[0]) : 0;
-                }
+                    }
-                return Core.replace('Physical', 'Core');
+                    totalCores += coreCount;
+                });
+                return `${totalCores} Cores`;
             },
             getK2Gb(bs){
                 bs = bs / 1024 / 1024 / 1024;

resource/template/theme-default/menu.html

@@ -7,7 +7,7 @@
         </a>
         <a class='item' href="/"><i class="home icon"></i>{{tr "Home"}}</a>
         <template v-if="isMobile"> 
-            <div class="item ui simple dropdown">
+            <div class="item ui dropdown" :class="{ simple: !isMobile }">
                 <div class="text"><i class="bi bi-gear-wide-connected icon" style="margin-right:3px;"></i>{{tr "Feature" }}<i class="dropdown icon" style="margin-right:0px;"></i></div>
                 <div class="menu">
                     <a href="/service" class="item"><i class="rss icon"></i>{{tr "Services" }}</a>
@@ -20,7 +20,7 @@
             <a href="/network" class="item"><i class="bi bi-hdd-network icon"></i>{{tr "NetworkSpiter"}}</a>
         </template>
         {{ if not .Conf.DisableSwitchTemplateInFrontend }}        
-            <div class="item ui simple dropdown">
+            <div class="item ui dropdown" :class="{ simple: !isMobile }">
                 <div class="text"><i class="bi bi-incognito icon" style="margin-right:3px;"></i>{{tr "Template" }}<i class="dropdown icon" style="margin-right:0px;"></i></div>
                 <div class="menu"> 
                     <a v-for="(item, index) in adaptedTemplates" :key="index" @click="toggleTemplate(item.key)" class="item">

resource/template/theme-default/network.html

@@ -18,7 +18,7 @@
         </div>
     </div>
     <div class="ui container">
-        <div ref="chartDom" style="margin-top: 15px;height: 520px;overflow: hidden"></div>
+        <div ref="chartDom" style="margin-top: 15px;height: auto;overflow: hidden"></div>
     </div>
 </div>
 
@@ -36,7 +36,11 @@
             defaultTemplate: {{.Conf.Site.Theme}},
             templates: {{.Themes}},
             servers: initData,
-            option: {
+            option: {}
+        },
+        mixins: [mixinsVue],
+        created() {
+            this.option = {
                 tooltip: {
                     trigger: 'axis',
                     position: function (pt) {
@@ -69,17 +73,9 @@
                     right: this.isMobile ? '8%' : '3.8%',
                 },
                 backgroundColor: '',
-                toolbox: {
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: 'none'
-                        },
-                        restore: {},
-                        saveAsImage: {}
-                    }
-                },
                 dataZoom: [
                     {
+                        type: 'slider',
                         start: 0,
                         end: 100
                     }
@@ -93,10 +89,8 @@
                     boundaryGap: false
                 },
                 series: [],
-            },
+            }
-            chartOnOff: true,
         },
-        mixins: [mixinsVue],
         mounted() {
             this.renderChart();
             this.parseMonitorInfo(monitorInfo);
@@ -236,6 +230,20 @@
                 this.option.title.text = monitorInfo.result[0].server_name;
                 this.option.series = tSeries;
                 this.option.legend.data = tLegendData;
+                const maxLegendsPerRowMobile = localStorage.getItem("maxLegendsPerRowMobile") ? localStorage.getItem("maxLegendsPerRowMobile") : 2;
+                const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6;
+                const autoIncrement = Math.floor((tLegendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 28 : 34);
+                const height = 520 + autoIncrement;
+                const gridTop = 60 + autoIncrement;
+                this.option.grid = {
+                    left: this.isMobile ? '8%' : '3.8%',
+                    right: this.isMobile ? '8%' : '3.8%',
+                    top: gridTop
+                };
+                this.myChart.resize({
+                    width: 'auto',
+                    height: height
+                });
                 this.myChart.clear();
                 this.myChart.setOption(this.option);
             },

resource/template/theme-server-status/footer.html

@@ -1,5 +1,5 @@
 {{define "theme-server-status/footer"}}
-    </div>
+    </section>
     <footer class="container-fluid">
         <p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p>
     </footer>

resource/template/theme-server-status/header.html

@@ -2,11 +2,21 @@
 <!DOCTYPE html>
 <html lang="{{.Conf.Language}}">
 <head>
-    <title>{{ .Title }}</title>
+    <title>{{.Title}}</title>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta content="telephone=no" name="format-detection">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="theme-color" content="#000000" />
+    {{if eq .Conf.Language "zh-CN"}}
+        <link rel="manifest" href="/static/manifest-zh-CN.json?v20240905" />
+    {{else}}
+        <link rel="manifest" href="/static/manifest-en-US.json?v20240905" />
+    {{end}}
+    <link rel="apple-touch-startup-image" href="/static/logo.svg" />
+    <link rel="shortcut icon" type="image/png" href="/static/logo.svg">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/assets/font-logos.css">
@@ -16,10 +26,10 @@
     <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.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>
-    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v202408016">
+    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240929">
-    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v202408011">
+    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v202409029">
-    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240811">
+    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240916">
-    <script src="/static/theme-server-status/js/mixin.js?v20240811"></script>
+    <script src="/static/theme-server-status/js/mixin.js?v20240915"></script>
 </head>
 <body>
 <div id="app">

resource/template/theme-server-status/home-group-false.html

@@ -6,6 +6,7 @@
         <th class="node-cell name center">{{tr "Name"}}</th>
         <th class="node-cell os center">{{tr "Platform"}}</th>
         <th class="node-cell location center">{{tr "Location"}}</th>
+        <th v-if="additional && Object.values(additional).filter(item => item.price).length > 0" class="node-cell price center">{{tr "Price"}}</th>
         <th class="node-cell uptime center">{{tr "Uptime"}}</th>
         <th class="node-cell load center">{{tr "Load"}}</th>
         <th class="node-cell network center">{{tr "NetSpeed"}}↓|↑</th>
@@ -13,12 +14,13 @@
         <th class="node-cell cpu center">{{tr "CpuUsed"}}</th>
         <th class="node-cell memory center">{{tr "MemUsed"}}</th>
         <th class="node-cell hdd center">{{tr "DiskUsed"}}</th>
+        <th v-if="additional && Object.values(additional).filter(item => item.remaining).length > 0" class="node-cell remaining center">{{tr "Remaining"}}</th>
     </tr>
     </thead>
     <tbody id="servers">
     <template v-for="(node,index) in nodesNoTag">
         <tr :id="'r'+node.ID" data-toggle="collapse" :data-target="'#rt'+node.ID" class="accordion-toggle" :class="index % 2 === 0 ? 'odd': 'even'" 
-        aria-expanded="false" @click="showCharts($event, node.ID)">
+        aria-expanded="false" @click="showCharts(node.ID)">
             <td class="node-cell status center">
                 <div class="status-container">
                     <div v-if="node.online" class="status-icon online"></div>
@@ -36,6 +38,12 @@
                 <i :class="'fi fi-' + node.location"></i>
                 <span class="node-cell-location-text text-uppercase">@#node.location#@</span>
             </td>
+            <td v-if="additional && Object.values(additional).filter(item => item.price).length > 0" class="node-cell price center">
+                <template v-if="additional[node.ID] && additional[node.ID].price">
+                    <span v-if="additional[node.ID].price.amount == 0" class="node-cell-price-text">Free</span>
+                    <span v-else class="node-cell-price-text">@#additional[node.ID].price.amount#@@#(additional[node.ID].price.cycle ? '/' + additional[node.ID].price.cycle : '')#@</span>
+                </template>
+            </td>
             <td style="text-align: center;" class="node-cell uptime">@#node.uptime#@</td>
             <td style="text-align: center;" class="node-cell load">@#node.load#@</td>
             <td style="text-align: center;" class="node-cell network">@#node.network#@</td>
@@ -59,6 +67,21 @@
                     </div>
                 </div>
             </td>
+            <td v-if="additional && Object.values(additional).filter(item => item.remaining).length > 0" class="node-cell remaining">
+                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
+                    <template v-if="additional[node.ID] && additional[node.ID].remaining.format">
+                        <div :style="additional[node.ID].remaining.format.style" :class="additional[node.ID].remaining.days == 'lifetime' ? '' : additional[node.ID].remaining.format.class"></div>
+                        <div class="additional">
+                            <small v-if="additional[node.ID].remaining.days == 'lifetime'">{{tr "Lifetime"}}</small>
+                            <small v-else-if="additional[node.ID].remaining.days < 0">{{tr "Expired"}}</small>
+                            <small v-else>
+                                <span class="node-cell-remaining-days">@#additional[node.ID].remaining.days#@{{tr "Days"}}</span>
+                                <span class="node-cell-remaining-percent">@#additional[node.ID].remaining.percent#@%</span>
+                            </small>
+                        </div>
+                    </template>
+                </div>
+            </td>
         </tr>
         <tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'">
             <td colspan="16">
@@ -143,7 +166,7 @@
                             @#node.host.Version#@
                         </span>
                         <span class="node-echarts-expand">
-                            <div class="chartbox" chartbox-show="0" :key="node.ID" :ref="`chart${node.ID}`" style="width: 100%; height: auto;"></div>
+                            <div class="chartbox" :id="`chart-${node.ID}`" chartbox-show="0" :key="node.ID" style="width: 100%; height: auto;"></div>
                         </span>
                     </div>
                 </div>

resource/template/theme-server-status/home-group-true.html

@@ -9,6 +9,7 @@
         <th class="node-cell name center">{{tr "Name"}}</th>
         <th class="node-cell os center">{{tr "Platform"}}</th>
         <th class="node-cell location center">{{tr "Location"}}</th>
+        <th v-if="additional && Object.values(additional).filter(item => item.price).length > 0" class="node-cell price center">{{tr "Price"}}</th>
         <th class="node-cell uptime center">{{tr "Uptime"}}</th>
         <th class="node-cell load center">{{tr "Load"}}</th>
         <th class="node-cell network center">{{tr "NetSpeed"}}↓|↑</th>
@@ -16,12 +17,13 @@
         <th class="node-cell cpu center">{{tr "CpuUsed"}}</th>
         <th class="node-cell memory center">{{tr "MemUsed"}}</th>
         <th class="node-cell hdd center">{{tr "DiskUsed"}}</th>
+        <th v-if="additional && Object.values(additional).filter(item => item.remaining).length > 0" class="node-cell remaining center">{{tr "Remaining"}}</th>
     </tr>
     </thead>
     <tbody id="servers">
     <template v-for="(node,index) in group.data">
         <tr :id="'r'+node.ID" data-toggle="collapse" :data-target="'#rt'+node.ID" class="accordion-toggle"
-            :class="index % 2 === 0 ? 'odd': 'even'" aria-expanded="false" @click="showCharts($event, node.ID)">
+            :class="index % 2 === 0 ? 'odd': 'even'" aria-expanded="false" @click="showCharts(node.ID)">
             <td class="node-cell status center">
                 <div class="status-container">
                     <div v-if="node.online" class="status-icon online"></div>
@@ -39,6 +41,12 @@
                 <i :class="'fi fi-' + node.location"></i>
                 <span class="node-cell-location-text text-uppercase">&nbsp;@#node.location#@</span>
             </td>
+            <td v-if="additional && Object.values(additional).filter(item => item.price).length > 0" class="node-cell price center">
+                <template v-if="additional[node.ID] && additional[node.ID].price">
+                    <span v-if="additional[node.ID].price.amount == 0" class="node-cell-price-text">Free</span>
+                    <span v-else class="node-cell-price-text">@#additional[node.ID].price.amount#@@#(additional[node.ID].price.cycle ? '/' + additional[node.ID].price.cycle : '')#@</span>
+                </template>
+            </td>
             <td style="text-align: center;" class="node-cell uptime">@#node.uptime#@</td>
             <td style="text-align: center;" class="node-cell load">@#node.load#@</td>
             <td style="text-align: center;" class="node-cell network">@#node.network#@</td>
@@ -62,6 +70,21 @@
                     </div>
                 </div>
             </td>
+            <td v-if="additional && Object.values(additional).filter(item => item.remaining).length > 0" class="node-cell remaining">
+                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
+                    <template v-if="additional[node.ID] && additional[node.ID].remaining.format">
+                        <div :style="additional[node.ID].remaining.format.style" :class="additional[node.ID].remaining.days == 'lifetime' ? '' : additional[node.ID].remaining.format.class"></div>
+                        <div class="additional">
+                            <small v-if="additional[node.ID].remaining.days == 'lifetime'">{{tr "Lifetime"}}</small>
+                            <small v-else-if="additional[node.ID].remaining.days < 0">{{tr "Expired"}}</small>
+                            <small v-else>
+                                <span class="node-cell-remaining-days">@#additional[node.ID].remaining.days#@{{tr "Days"}}</span>
+                                <span class="node-cell-remaining-percent">@#additional[node.ID].remaining.percent#@%</span>
+                            </small>
+                        </div>
+                    </template>
+                </div>
+            </td>
         </tr>
         <tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'">
             <td colspan="16">
@@ -146,7 +169,7 @@
                             @#node.host.Version#@
                         </span>
                         <span class="node-echarts-expand">
-                            <div class="chartbox" chartbox-show="0" :key="node.ID" :ref="`chart${node.ID}`" style="width: 100%; height: auto;"></div>
+                            <div class="chartbox" :id="`chart-${node.ID}`" chartbox-show="0" :key="node.ID" style="width: 100%; height: auto;"></div>
                         </span>
                     </div>
                 </div>

resource/template/theme-server-status/home.html

@@ -3,15 +3,15 @@
 {{template "theme-server-status/menu" .}}   
 <!--  showGroup true -->
 <template v-if="showGroup">
-    <section class="container-fluid table-responsive content" v-for="group in nodesTag">
+    <div class="container-fluid table-responsive content" v-for="group in nodesTag">
         {{template "theme-server-status/home-group-true" .}} 
-    </section>
+    </div>
 </template>
 <!--  showGroup false -->
 <template v-else>
-    <section class="container-fluid table-responsive content">
+    <div class="container-fluid table-responsive content">
         {{template "theme-server-status/home-group-false" .}}
-    </section>
+    </div>
 </template>
 <div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true" style="padding-left:0">
     <div class="modal-dialog modal-lg modal-dialog-centered">
@@ -42,6 +42,7 @@
             servers: [],
             nodesTag: [],
             nodesNoTag: [],
+            additional: {},
             chartDataList: [],
             ws: null,
             language: {{.Conf.Language}},
@@ -81,7 +82,8 @@
                 this.countryNameMap = this.initCountryNameMap();
                 this.countryServer = this.initCountryServer();
                 this.countryMapChartData = this.initCountryMapChartData();
-            })
+            });
+            this.additional = this.initAdditional(this.servers);
         },
         mounted() {
             // 初始化时建立WebSocket连接
@@ -98,6 +100,25 @@
             });
         },
         methods: {
+            initAdditional(servers) {
+                let nodes = {};
+                servers?.forEach(server => {
+                    if(server.PublicNote) {
+                        nodes[server.ID] = {
+                            "remaining": {
+                                format: this.getRemainingFormat(server.live, server.PublicNote),
+                                days: this.getRemainingDays(this.getNoteElementValue(server.PublicNote, "billingDataMod", "endDate"),server.PublicNote),
+                                percent: this.toFixed2(100 - this.getRemainingPercent(this.getNoteElementValue(server.PublicNote, "billingDataMod", "startDate"), this.getNoteElementValue(server.PublicNote, "billingDataMod", "endDate"), server.PublicNote))
+                            },
+                            "price": {
+                                amount: this.getNoteElementValue(server.PublicNote, "billingDataMod", "amount"),
+                                cycle: this.getNoteElementValue(server.PublicNote, "billingDataMod", "cycle")
+                            }
+                        };
+                    }
+                });
+                return nodes;
+            },
             initCountryMap() {
                 return fetch(this.staticUrl + '/maps/nezha.countrymap.json')
                     .then(response => response.json())
@@ -162,7 +183,10 @@
                 const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
                 const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff"; 
                 const fontSize = this.isMobile ? 10 : 12;
-                const fontColor = this.theme == "dark" ? "#000000" : "#000000";     
+                const fontColor = this.theme == "dark" ? "#000000" : "#000000"; 
+                const showLoadingMaskColor = this.theme == "dark" ? 'rgba(28, 29, 38, 1)' : 'rgba(249, 249, 249, 1)';
+                const showLoadingTextColor = this.theme == "dark" ? 'rgba(241, 241, 241, 1)' : 'rgba(0, 0, 0, 1)';
+                const showLoadingColor = inRangeColor;    
                 const chartContainer = document.getElementById('mapChart');
                 const mapChart = echarts.init(chartContainer, '', { // init图表
                     renderer: 'canvas',
@@ -170,6 +194,13 @@
                     width: width,
                     height: height,
                 });
+                mapChart.showLoading({
+                    text: 'loading',
+                    textColor: showLoadingTextColor,
+                    color: showLoadingColor,
+                    maskColor: showLoadingMaskColor,
+                    zlevel: 2
+                });
                 fetch(this.staticUrl + '/maps/' + this.countryMapGeoFile)
                     .then(response => response.json())
                     .then(worldMap => {
@@ -224,7 +255,10 @@
                                 }
                             ]
                         };
-                        mapChart.setOption(option);
+                        setTimeout(() => {
+                            mapChart.hideLoading();
+                            mapChart.setOption(option);
+                        }, 1000);
                     });
             },
             isWindowsPlatform(str) {
@@ -470,24 +504,27 @@
                 // 如果所有元素的 Temperature 都为 0，则返回一个默认值 0
                 return 0;
             },
-            showCharts(event, id) {
+            showCharts(id,changeChartboxShow=true) {
-                const chartContainer = this.$refs[`chart${id}`][0];
+                const chartContainer = document.getElementById(`chart-${id}`);
-                const chartboxShow = chartContainer.getAttribute('chartbox-show');
+                if(changeChartboxShow){
-                chartContainer.setAttribute('chartbox-show', chartboxShow === '0' ? '1' : '0');
+                    const chartboxShow = chartContainer.getAttribute('chartbox-show');
-                const isAriaExpandedFalse = event.currentTarget.getAttribute('aria-expanded') === 'false';
+                    chartContainer.setAttribute('chartbox-show', chartboxShow === '0' ? '1' : '0');
-                if (!isAriaExpandedFalse) return;
+                    const collapseContainer = document.getElementById(`r${id}`);
+                    const isAriaExpandedFalse = collapseContainer.getAttribute('aria-expanded') === 'false';
+                    if (!isAriaExpandedFalse) return;
+                }
                 // 发起数据请求
                 const url = `/api/v1/monitor/${id}`;
                 fetch(url)
                     .then(response => response.json())
                     .then(data => {
                         if (data.result) { // 数据请求成功，更新数据并渲染图表
-                            this.chartDataList[id - 1] = data.result;
+                            this.chartDataList[id] = data.result;
                             this.$nextTick(() => {
                                 this.renderCharts(id);
                             });
                         } else {
-                            console.log('this agent (id:'+ id + ') has no monitor.');
+                            console.log('this server (id:'+ id + ') has no monitor.');
                         }
                     })
                     .catch(error => {
@@ -495,76 +532,116 @@
                     });
             },
             renderCharts(id, reload = false) {
-                if (!this.chartDataList[id - 1]) return;
+                if (!this.chartDataList[id]) return;
-                const chartData = this.chartDataList[id - 1];
+                const chartData = this.chartDataList[id];
-                const chartContainer = this.$refs[`chart${id}`][0];
+                const chartContainer = document.getElementById(`chart-${id}`);
-                if (reload) { //点击切换亮色/暗色风格模式时,重新载入echarts图表的逻辑,
+                if (reload) {
-                    // 第一步,查找已经渲染出的图表容器,并销毁它
                     const existingChart = echarts.getInstanceByDom(chartContainer);
                     if (existingChart) existingChart.dispose();
-                    // 第二步,如果图表容器处于不可见状态chartboxShow=0,不重新渲染出新的图表,
-                    // 如果图表容器处于可见状态chartboxShow=1,重新渲染出新的图表
                     const chartboxShow = chartContainer.getAttribute('chartbox-show');
                     if ( chartboxShow === '0' ) return; 
                 }
-                // 定义图表参数值
                 const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
                 const fontSize = this.isMobile ? 10 : 14;
-                const gridLeft = this.isMobile ? 25 : 36;
+                const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 25 : 36);
                 const gridRight = this.isMobile ? 5 : 20;
                 const legendLeft = this.isMobile ? 'center' : 'center';
                 const legendTop = this.isMobile ? 5 : 5;
                 const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
                 const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                 const theme = localStorage.getItem("theme") ? localStorage.getItem("theme") : systemDarkMode;
-                const chartTheme = theme == "dark" ? "dark" : "default";
+                const chartTheme = this.theme == "dark" ? "dark" : "default";
-                const fontColor = theme == "dark" ? "#f1f1f1" : "#000000";
+                const fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000";
                 const backgroundColor = theme == "dark" ? '' : '';
                 const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
                 const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");
                 const lineStyleWidth = this.isMobile ? 1 : 2;
                 const splitLineWidth = this.isMobile ? 0.5 : 1;
-                // 渲染图表
+                const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
-                const chart = echarts.init(chartContainer, chartTheme, {
+                const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
+                const chart = echarts.init(chartContainer, chartTheme, { // init图表
                     renderer: 'canvas',
                     useDirtyRect: false,
                     width: 'auto',
-                    height: 300,
+                    height: 300
                 });
-                const xAxisData = chartData[0].created_at.map(time => new Date(time).toLocaleString());
+                let legendData = [];
-                const seriesData = chartData.map(item => {
+                let seriesData = [];
+                chartData.forEach((item,key)=> {
                     let loss = 0;
-                    const data = item.avg_delay.map((avgDelay, index) => {                        
+                    let totalLossRate = 0;
-                        if(avgDelay > 0 && avgDelay < MaxTCPPingValue){
+                    let legendName = '';
-                            loss += avgDelay > 0.9 * MaxTCPPingValue ? 1 : 0;
+                    let data = { main: [], markLine: []};
-                            return [item.created_at[index], avgDelay.toFixed(2)];
+                    item.avg_delay.forEach((avgDelay, index) => {
-                        }else{
+                        const threshold = 0.9 * MaxTCPPingValue; // 定义阀值,用于判断是否丢包
+                        // 定义丢包 1. avgDelay==0  2. avgDelay>=MaxTCPPingValue 3. avgDelay>=threshold
+                        if(avgDelay == 0 || avgDelay >= MaxTCPPingValue){ //绝对丢包
                             loss += 1;
+                            const lossrate = 100 * loss / (index + 1);
+                            if(lossrate != 100) {
+                                data['markLine'].push({
+                                    xAxis: item.created_at[index],
+                                    label: { show: false },
+                                    emphasis: { disabled: true },
+                                    lineStyle: { type: "solid" }
+                                });
+                            }
+                        } else if (avgDelay >= threshold && avgDelay < MaxTCPPingValue){ // 相对丢包
+                            loss += 1;
+                            const lossrate = 100 * loss / (index + 1);
+                            if(lossrate != 100) {
+                                data['main'].push(
+                                    [item.created_at[index], avgDelay, lossrate]
+                                );
+                                data['markLine'].push({
+                                    xAxis: item.created_at[index],
+                                    label: { show: false },
+                                    emphasis: { disabled: true },
+                                    lineStyle: { type: "solid" }
+                                });
+                            }
+                        } else { // 未丢包
+                            const lossrate = 100 * loss / (index + 1);
+                            data['main'].push(
+                                [item.created_at[index], avgDelay, lossrate]
+                            );
                         }
                     });
-                    const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
+                    totalLossRate = ((loss / item.created_at.length) * 100).toFixed(1);
-                    item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
+                    legendName = `${item.monitor_name} ${totalLossRate}%`;
-                    return {
+                    legendData.push(legendName);
-                        name: item.monitor_name,
+                    seriesData.push(
-                        type: 'line',
+                        {
-                        smooth: true,
+                            name: legendName,
-                        symbol: 'none',
+                            type: 'line',
-                        data: data,
+                            smooth: true,
-                        connectNulls: true,
+                            symbol: 'none',
-                        legendHoverLink: false,
+                            connectNulls: true,
-                        emphasis: {
+                            legendHoverLink: false,
-                            disabled: true
+                            emphasis: {
-                        },
+                                disabled: true
-                        lineStyle: {
+                            },
-                            width: lineStyleWidth
+                            lineStyle: {
-                        }  
+                                width: lineStyleWidth
-                    };
+                            },  
+                            data: data['main'],
+                            markLine: {
+                                symbol: "none",
+                                symbolSize :0,
+                                data: data['markLine'],
+                                itemStyle: { 
+                                    opacity: markLineItemStyleOpacity
+                                },
+                                lineStyle:{
+                                    width: markLineLineStyleWidth
+                                }
+                            }
+                        }
+                    );
                 });
-
-                const legendData = chartData.map(item => item.monitor_name);
                 const maxLegendsPerRowMobile = localStorage.getItem("maxLegendsPerRowMobile") ? localStorage.getItem("maxLegendsPerRowMobile") : 3;
                 const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6;
-                const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28);
+                const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28);            
                 const height = 300 + autoIncrement;
                 const gridTop = 40 + autoIncrement;
                 const legendIcon = this.isMobile ? 'rect' : ""; 
@@ -574,39 +651,24 @@
                     width: 'auto',
                     height: height
                 });
-
                 const option = {
+                    color: this.colors,
                     backgroundColor: backgroundColor,
+                    textStyle: {
+                        fontSize: fontSize,
+                        color: fontColor
+                    },
+                    grid: {
+                        top: gridTop,
+                        left: gridLeft,
+                        right: gridRight,
+                    },
                     title: {
-                        show: false
+                        show: false,
-                    },
-                    tooltip: {
-                        trigger: 'axis',
-                        backgroundColor: tooltipBackgroundColor,
-                        borderColor: tooltipBorderColor,
-                        textStyle: {
-                            fontSize: fontSize,
-                            color: fontColor
-                        }
-                    },
-                    legend: {
-                        data: legendData,
-                        show: true,
-                        icon: legendIcon,
-                        textStyle: {
-                            fontSize: fontSize,
-                            color: fontColor
-                        },
-                        top: legendTop,
-                        bottom: 0,
-                        left: legendLeft,
-                        padding: legendPadding,
-                        itemWidth: itemWidth,
-                        itemHeight: itemHeight,
                     },
+                    series: seriesData.flat(),
                     xAxis: {
                         type: 'time',
-                        data: xAxisData,
                         axisLabel: {
                             textStyle: {
                                 fontSize: fontSize
@@ -626,34 +688,386 @@
                             }
                         }
                     },
+                    legend: {
+                        data: legendData,
+                        show: true,
+                        icon: legendIcon,
+                        textStyle: {
+                            fontSize: fontSize,
+                            color: fontColor
+                        },
+                        top: legendTop,
+                        bottom: 0,
+                        left: legendLeft,
+                        padding: legendPadding,
+                        itemWidth: itemWidth,
+                        itemHeight: itemHeight,
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        backgroundColor: tooltipBackgroundColor,
+                        borderColor: tooltipBorderColor,
+                        textStyle: {
+                            fontSize: fontSize,
+                            color: fontColor
+                        },
+                        formatter: function (params) {
+                            let tooltipContent = '';
+                            const formattedTime = new Date(params[0].value[0]).toLocaleString(); 
+                            tooltipContent += `<span style="line-height:2em">${formattedTime}</span><br>`;
+                            params.forEach(param => {
+                                const formattedTime = new Date(param.value[0]).toLocaleString();
+                                if (!param.seriesName.includes('stack')) {
+                                    const name = param.seriesName.replace(/\s\d+(\.\d+)?%$/, '');
+                                    tooltipContent += `<span style="line-height:2em">${param.marker} ${name} ${param.value[2].toFixed(1)}% ${param.value[1].toFixed(2)}</span><br>`;
+                                }
+                            });
+                            return tooltipContent;
+                        }
+                    },
                     dataZoom: [
                         {
                             type: 'slider',
                             start: 0,
                             end: 100
                         }
-                    ],
+                    ]
-                    series: seriesData,
-                    textStyle: {
-                        fontSize: fontSize,
-                        color: fontColor
-                    },
-                    grid: {
-                        top: gridTop,
-                        left: gridLeft,
-                        right: gridRight
-                    }
                 };
                 chart.setOption(option);
             },
-            reloadCharts() { // 重新加载所有图表
+            reloadCharts() {
                 this.servers.forEach(node => {
                     const id = node.ID;
-                    const chartData = this.chartDataList[id - 1];
+                    const chartData = this.chartDataList[id];
                     if (chartData) {
                         this.renderCharts(id,true);
                     }
                 });
+            },
+            getNoteElementValue(string, elementName, childElementName) {
+                let obj;
+
+                try {
+                    obj = JSON.parse(string);
+                } catch (e) {
+                    return null; 
+                }
+
+                if (!elementName) return null;
+
+                if (childElementName) {
+                    return obj[elementName] && childElementName in obj[elementName] ? obj[elementName][childElementName] : null;
+                } else {
+                    return elementName in obj ? obj[elementName] : null;
+                }
+            },
+            getBillingCycle(billingCycle) { 
+                // 统一转换为小写进行比较
+                const cycle = billingCycle.toLowerCase();
+
+                switch (cycle) {
+                    case '月':
+                    case 'month':
+                    case 'monthly':
+                    case 'm':
+                        return "M";
+                    case '季':
+                    case 'quarterly':
+                    case 'q':
+                        return "Q";                        
+                    case '半':
+                    case '半年':
+                    case 'half':
+                    case 'semi-annually':
+                    case 'h':
+                        return "H";                        
+                    case '年':
+                    case 'year':
+                    case 'annually':
+                    case 'y':
+                        return "Y";
+                    default:
+                        return null;
+                }                
+            },
+            getAdjustTimezone(reference, target) {
+                // 获取时区
+                const referenceTimezoneOffset = reference.getTimezoneOffset(); 
+                const targetTimezoneOffset = target.getTimezoneOffset();
+
+                // 计算时区差异
+                const timezoneDifference = (referenceTimezoneOffset - targetTimezoneOffset) * 60 * 1000;
+
+                // 将 target 日期调整到 reference 时区
+                return new Date(target.getTime() + timezoneDifference);
+            },
+            getAutoRenewalEndDate(endDate, billingCycle) {
+                const expiration = new Date(endDate);
+                const current = this.getAdjustTimezone(new Date(endDate), new Date());
+
+                // 如果 expiration 无效，返回 null 并记录日志
+                if (isNaN(expiration.getTime())) {
+                    console.error("getAutoRenewalEndDate: Invalid expiration format");
+                }
+
+                const result = {
+                    flag: 1,  // 1表示需要更新
+                    check: 0, // 判断逻辑标记
+                    count: 0  // 周期累计计数
+                };
+
+                // 如果当前时间还没到到期时间，直接返回到期时间
+                if (current < expiration) {
+                    result.flag = 0;
+                    result.date = expiration;
+                    return result;
+                }
+
+                let nextExpiration = new Date(expiration); // 初始化为原到期时间
+                let newExpirationMonth = expiration.getMonth(); // 获取expiration初始月份
+
+                switch (billingCycle.toUpperCase()) {
+                    case 'M': // 月度
+                        nextExpiration.setFullYear(current.getFullYear());
+
+                        const monthCheck = current < new Date(current.getFullYear(), current.getMonth(), expiration.getDate());
+
+                        // 检查当前月是否在有效期内
+                        if (monthCheck) {
+                            nextExpiration.setMonth(current.getMonth());
+                            result.check = 1;
+                        } else {
+                            nextExpiration.setMonth(current.getMonth() + 1);
+                            result.check = 2;
+                        }
+                        break;
+
+                    case 'Q': // 季度
+                        nextExpiration.setFullYear(current.getFullYear());
+
+                        // 每次增加 3 个月，直到新的月份大于当前月份
+                        while (newExpirationMonth < current.getMonth()) {
+                            newExpirationMonth += 3;
+                            result.count += 1;
+                        }
+
+                        // nextExpiration设置获取到的新月份
+                        nextExpiration.setMonth(newExpirationMonth);
+
+                        const quarterlyCheck = current < nextExpiration;
+
+                        // 检查新月份是否在有效期内
+                        if (quarterlyCheck) {
+                            result.check = 3;
+                        } else {
+                            nextExpiration.setMonth(current.getMonth() + 3);
+                            result.check = 4;
+                            result.count += 1;
+                        }
+                        break;
+
+                    case 'H': // 半年
+                        nextExpiration.setFullYear(current.getFullYear());
+                
+                        // 每次增加 6 个月，直到新的月份大于当前月份
+                        while (newExpirationMonth < current.getMonth()) {
+                            newExpirationMonth += 6;
+                            result.count += 1;
+                        }
+
+                        // nextExpiration设置获取到的新月份
+                        nextExpiration.setMonth(newExpirationMonth);
+
+                        const halfCheck = current < nextExpiration;
+
+                        // 检查新月份是否在有效期内
+                        if (halfCheck) {
+                            result.check = 5;
+                        } else {
+                            nextExpiration.setMonth(current.getMonth() + 6);
+                            result.check = 6;
+                            result.count += 1;
+                        }    
+                        break;
+
+                    case 'Y': // 年度
+                        const yearCheck = current < new Date(current.getFullYear(), expiration.getMonth(), expiration.getDate());
+
+                        // 如果当前时间比这一年有效期早，则到期为本年
+                        if (yearCheck) {
+                            nextExpiration.setFullYear(current.getFullYear());
+                            result.check = 7;
+                        } else {
+                            // 否则推到下一年
+                            nextExpiration.setFullYear(current.getFullYear() + 1);
+                            result.check = 8;
+                        }
+                        break;
+
+                    default:
+                        throw new Error("Invalid billing cycle");
+                }
+
+                // 保持原到期时间的时分秒
+                nextExpiration.setHours(expiration.getHours());
+                nextExpiration.setMinutes(expiration.getMinutes());
+                nextExpiration.setSeconds(expiration.getSeconds());
+
+                result.date = nextExpiration;
+
+                return result;
+            },
+            getAutoRenewalStartDate(flag, startDate, check, count) {
+                //1.判断什么时候改变 2.如何改变
+                const start = new Date(startDate);
+                const current = this.getAdjustTimezone(start, new Date());
+
+                // 检查 startDate 格式是否有效，若无效返回 null
+                if (isNaN(start.getTime())) {
+                    console.error("getAutoRenewalStartDate: Invalid startDate format");
+                }
+
+                // 如果 flag 为 0，直接返回开始日期
+                if (flag === 0) {
+                    return start;
+                } 
+
+                // 初始化新的开始日期
+                const newStart = new Date(start);
+
+                switch (check) {
+                    case 1: // 处理月份：设置为上个月
+                        newStart.setFullYear(current.getFullYear());
+                        newStart.setMonth(current.getMonth() - 1);
+                        break;
+
+                    case 2: // 处理月份：设置为当前月
+                        newStart.setFullYear(current.getFullYear());
+                        newStart.setMonth(current.getMonth());
+                        break;
+
+                    case 3:
+                    case 4: // 处理季度
+                        newStart.setFullYear(current.getFullYear());
+                        newStart.setMonth(start.getMonth() + 3 * count);
+                        break;
+
+                    case 5:
+                    case 6: // 处理半年
+                        newStart.setFullYear(current.getFullYear());
+                        newStart.setMonth(start.getMonth() + 6 * count);
+                        break;
+
+                    case 7: // 处理年份：设置为上一年
+                        newStart.setFullYear(current.getFullYear() - 1);
+                        break;
+
+                    case 8: // 处理年份：保持当前年份
+                        newStart.setFullYear(current.getFullYear());
+                        break;
+
+                    default: // 默认处理：直接返回
+                        return;
+                }
+
+                return newStart;
+            },
+            getRemainingFormat(online, note) {
+                if (!note) return null;
+                const startDate = this.getNoteElementValue(note, "billingDataMod", "startDate");
+                const endDate = this.getNoteElementValue(note, "billingDataMod", "endDate");
+                
+                // 检查 startDate 和 endDate 是否有效
+                if (!startDate || !endDate || typeof startDate !== 'string' || typeof endDate !== 'string') {
+                    console.error("getRemainingFormat: Invalid startDate or endDate in note");
+                    return null; // 如果无效，返回 null 或其他错误处理逻辑
+                }
+
+                //处理特殊时间格式
+                if (startDate.includes('0000-00-00') || endDate.includes("0000-00-00")) {
+                    return this.formatPercents(online, this.toFixed2(100));
+                } else {
+                    const percent = this.getRemainingPercent(startDate, endDate, note);
+                    return this.formatPercents(online, this.toFixed2(percent));                    
+                }
+            },
+            getRemainingDays(endDate, note) {
+                // 检查 endDate 是否有效
+                if (!endDate || typeof endDate !== 'string') {
+                    console.error("getRemainingDays: Invalid endDate format");
+                    return null;
+                }
+
+                // 处理特殊时间格式
+                if (endDate.includes("0000-00-00")) return "lifetime";
+
+                // 获取当前时间，并调整时区
+                const currentTime = this.getAdjustTimezone(new Date(endDate), new Date());
+
+                // 获取计费周期和自动续订日期
+                const billingCycle = this.getNoteElementValue(note, "billingDataMod", "cycle") || "月";
+                const autoEndDate = this.getAutoRenewalEndDate(
+                    this.getNoteElementValue(note, "billingDataMod", "endDate"),
+                    this.getBillingCycle(billingCycle)
+                );
+
+                // 检查 autoRenewal 状态
+                const autoRenewal = this.getNoteElementValue(note, "billingDataMod", "autoRenewal") == 1;
+
+                // 确定到期时间
+                const end = autoRenewal ? autoEndDate.date : new Date(endDate);
+
+                // 计算剩余天数
+                const timeDiff = end - currentTime;
+                const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
+
+                return daysDiff;
+            },
+            getRemainingPercent(startDate, endDate, note) {
+                // 检查 startDate 和 endDate 是否为有效字符串并处理特殊格式
+                if (typeof startDate !== 'string' || typeof endDate !== 'string') {
+                    console.error("getRemainingPercent: Invalid startDate or endDate format");
+                    return null;
+                }
+                
+                if (startDate.includes("0000-00-00") || endDate.includes("0000-00-00")) return 100;
+
+                // 获取当前时间并调整时区
+                const now = this.getAdjustTimezone(new Date(endDate), new Date());
+
+                // 获取计费周期
+                const billingCycle = this.getNoteElementValue(note, "billingDataMod", "cycle") || "月";
+
+                // 自动获取结束日期
+                const autoEndDate = this.getAutoRenewalEndDate(
+                    this.getNoteElementValue(note, "billingDataMod", "endDate"),
+                    this.getBillingCycle(billingCycle)
+                );
+
+                // 自动获取开始日期
+                const autoStartDate = autoEndDate.flag == 1
+                    ? this.getAutoRenewalStartDate(autoEndDate.flag, this.getNoteElementValue(note, "billingDataMod", "startDate"), autoEndDate.check, autoEndDate.count)
+                    : new Date(startDate);
+                
+                // 计算开始和结束时间
+                const autoRenewal = this.getNoteElementValue(note, "billingDataMod", "autoRenewal") == 1;
+                const start = autoRenewal ? autoStartDate : new Date(startDate);
+                const end = autoRenewal ? autoEndDate.date : new Date(endDate);
+
+                // 计算剩余百分比
+                if (now < start) {
+                    return 0;
+                }
+                if (now >= end) {
+                    return 100;
+                }
+
+                const totalDuration = end - start;
+                const elapsedDuration = now - start;
+                const percent = (elapsedDuration / totalDuration) * 100;
+
+                // 确保百分比在 0-100 之间
+                return Math.min(Math.max(percent, 0), 100);
             }
         }
     })

resource/template/theme-server-status/menu.html

@@ -15,20 +15,9 @@
         </div>
         <nav id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
-                <li><a href="/"><i class="home icon"></i>{{tr "Home" }}</a></li>
+                <li :class="isMenuActive('index')"><a href="/"><i class="home icon"></i>{{tr "Home" }}</a></li>
-                <template v-if="isMobile"> 
+                <li :class="isMenuActive('service')"><a href="/service"><i class="rss icon"></i>{{tr "Services" }}</a></li>
-                    <li class="dropdown">
+                <li :class="isMenuActive('network')"><a href="/network"><i class="bi bi-hdd-network icon"></i>{{tr "NetworkSpiter"}}</a></li>
-                        <a data-toggle="dropdown"><i class="bi bi-gear-wide-connected" style="position:relative;top:1px;margin-right:3px;font-size:1.1rem;"></i>{{tr "Feature" }}<b class="caret"></b></a>
-                        <ul class="dropdown-menu" style="min-width:100px;">
-                            <li><a href="/service"><i class="rss icon"></i>{{tr "Services" }}</a></li>
-                            <li><a href="/network"><i class="bi bi-hdd-network icon"></i>{{tr "NetworkSpiter"}}</a></li>                   
-                        </ul>
-                    </li>
-                </template>
-                <template v-else>
-                    <li><a href="/service"><i class="rss icon"></i>{{tr "Services" }}</a></li>
-                    <li><a href="/network"><i class="bi bi-hdd-network icon"></i>{{tr "NetworkSpiter"}}</a></li>
-                </template>
                 {{ if not .Conf.DisableSwitchTemplateInFrontend }}
                     <li class="dropdown">
                         <a data-toggle="dropdown"><i class="bi bi-incognito" style="position:relative;top:1px;margin-right:3px;font-size:1.2rem;vertical-align:top;"></i>{{tr "Template" }}<b class="caret"></b></a>
@@ -64,6 +53,6 @@
         </nav>
     </div>
 </header>
-<div class="nezha">
+<section class="nezha">
 {{end}}
 

resource/template/theme-server-status/network.html

@@ -15,7 +15,7 @@
             </li>
         </ul>
     </div>
-    <div class="chartTitle"><i class="chartCountryCode" :class="'fi fi-' + chartCountryCode"></i> @#chartTitle#@</div>
+    <div class="chartTitle" @click="showCharts(nextServerId)"><i class="chartCountryCode" :class="'fi fi-' + chartCountryCode"></i> @#chartTitle#@</div>
     <div id="chartbox" style="width:100%;height:auto;"></div>
 </div>
 {{template "theme-server-status/footer" .}}
@@ -32,7 +32,8 @@
             chartTitle: '',
             chartCountryCode: '',
             chart: null,
-            currentServerId: ''
+            currentServerId: '',
+            nextServerId: '',
         },
         mixins: [mixinsVue],
         created() {
@@ -66,37 +67,47 @@
                 if(!this.chartDataList[id]) return;
                 if(this.chart) this.disposeCharts(this.chart);
                 this.currentServerId = id;
+                this.nextServerId = this.getNextServerId(id);
                 this.chartCountryCode = this.getServerCountryCode(id);
                 this.chartTitle = this.chartDataList[id][0].server_name;
                 const chartData = this.chartDataList[id];
                 const chartContainer = document.getElementById('chartbox');
-                // 定义图表参数值
                 const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
-                const autoheight = this.isMobile ? (window.innerHeight - 200) : (window.innerHeight - 250);
+                const autoheight = this.isMobile ? (window.innerHeight - 180) : (window.innerHeight - 250);
                 const fontSize = this.isMobile ? 10 : 14;
-                const gridLeft = this.isMobile ? 30 : 36;
+                const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 30 : 36);
                 const gridRight = this.isMobile ? 12 : 20;
                 const legendLeft = this.isMobile ? 'center' : 'center';
                 const legendTop = this.isMobile ? 5 : 5;
                 const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
                 const fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000";
+                const chartTheme = this.theme == "dark" ? "dark" : "default";
                 const backgroundColor = this.theme == "dark" ? '' : '';
                 const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
                 const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");
                 const lineStyleWidth = this.isMobile ? 1 : 2;
                 const splitLineWidth = this.isMobile ? 0.5 : 1;
-                const splitLineColor = this.theme == "dark" ? "rgba(110, 112, 121, 0.95)" : "rgba(224, 230, 241, 0.95)";
+                const markPointSymbolSize = this.isMobile ? 36 : 42;
-                const markPointLabelColor = this.theme == "dark" ? "#111111" : "#000000";
+                const markPointItemStyleOpacity = this.semiTransparent ? 1 : 1;
-                const markPointItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
+                const markPointFontSize = this.isMobile ? 8 : 10;
                 const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
                 const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
-                this.chart = echarts.init(chartContainer, '', { // init图表
+                const showLoadingMaskColor = this.theme == "dark" ? 'rgba(0, 0, 0, 0)' : 'rgba(255, 255, 255, 0)';
+                const showLoadingTextColor = this.theme == "dark" ? 'rgba(241, 241, 241, 1)' : 'rgba(0, 0, 0, 1)';
+                const showLoadingColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
+                this.chart = echarts.init(chartContainer, chartTheme, { // init图表
                     renderer: 'canvas',
                     useDirtyRect: false,
                     width: 'auto',
                     height: autoheight,
                 });
-                // 获取图表数据
+                this.chart.showLoading({
+                    text: 'loading',
+                    textColor: showLoadingTextColor,
+                    color: showLoadingColor,
+                    maskColor: showLoadingMaskColor,
+                    zlevel: 2
+                });
                 let legendData = [];
                 let seriesData = [];
                 chartData.forEach((item,key)=> {
@@ -111,9 +122,6 @@
                             loss += 1;
                             const lossrate = 100 * loss / (index + 1);
                             if(lossrate != 100) {
-                                data['main'].push(
-                                    [item.created_at[index], MaxTCPPingValue, lossrate]
-                                );
                                 data['markLine'].push({
                                     xAxis: item.created_at[index],
                                     label: { show: false },
@@ -142,11 +150,9 @@
                             );
                         }
                     });
-                    // 处理legendData
                     totalLossRate = ((loss / item.created_at.length) * 100).toFixed(1);
                     legendName = `${item.monitor_name} ${totalLossRate}%`;
                     legendData.push(legendName);
-                    // 处理seriesData
                     seriesData.push(
                         {
                             name: legendName,
@@ -182,10 +188,9 @@
                                         itemStyle: { 
                                             opacity: markPointItemStyleOpacity
                                         }, 
-                                        symbolSize: 30, 
+                                        symbolSize: markPointSymbolSize, 
                                         label: { 
-                                            fontSize: 8,
+                                            fontSize: markPointFontSize,
-                                            color: markPointLabelColor,
                                             formatter: function (params) {
                                                 return Math.round(params.value);
                                             }
@@ -198,10 +203,9 @@
                                         itemStyle: { 
                                             opacity: markPointItemStyleOpacity
                                         }, 
-                                        symbolSize: 30, 
+                                        symbolSize: markPointSymbolSize, 
                                         label: { 
-                                            fontSize: 8,
+                                            fontSize: markPointFontSize,
-                                            color: markPointLabelColor,
                                             offset: [0, 8],
                                             formatter: function (params) {
                                                 return Math.round(params.value);
@@ -218,7 +222,8 @@
                 const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6;
                 const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28);
                 const height = autoheight + autoIncrement;
-                const gridTop = 40 + autoIncrement;
+                const gridTop = this.isMobile ? ( 60 + autoIncrement) : (80 + autoIncrement);
+                const gridBottom = this.isMobile ? 70 : 90;
                 const legendIcon = this.isMobile ? 'rect' : ""; 
                 const itemWidth = this.isMobile ? 10 : 25;
                 const itemHeight = this.isMobile ? 10 : 14;
@@ -228,28 +233,22 @@
                 });
                 // 设置图表配置项
                 const option = {
-                    // 全局调色盘
                     color: this.colors,
-                    // 背景颜色
                     backgroundColor: backgroundColor,
-                    // 文字样式
                     textStyle: {
                         fontSize: fontSize,
                         color: fontColor
                     },
-                    // 图表网格设置
                     grid: {
                         top: gridTop,
                         left: gridLeft,
-                        right: gridRight
+                        right: gridRight,
+                        bottom: gridBottom
                     },
-                    // 图表标题设置
                     title: {
                         show: false,
                     },
-                    // 图表系列数据设置
                     series: seriesData.flat(),
-                    // X轴设置
                     xAxis: {
                         type: 'time',
                         axisLabel: {
@@ -258,7 +257,6 @@
                             }
                         }
                     },
-                    // Y轴设置
                     yAxis: {
                         type: 'value',
                         axisLabel: {
@@ -268,12 +266,10 @@
                         },
                         splitLine: {
                             lineStyle: {
-                                width: splitLineWidth,
+                                width: splitLineWidth
-                                color: splitLineColor
                             }
                         }
                     },
-                    // 图例设置
                     legend: {
                         data: legendData,
                         show: true,
@@ -289,7 +285,6 @@
                         itemWidth: itemWidth,
                         itemHeight: itemHeight,
                     },
-                    // 提示框设置
                     tooltip: {
                         trigger: 'axis',
                         backgroundColor: tooltipBackgroundColor,
@@ -312,7 +307,6 @@
                             return tooltipContent;
                         }
                     },
-                    // 数据缩放设置
                     dataZoom: [
                         {
                             type: 'slider',
@@ -321,17 +315,16 @@
                         }
                     ]
                 };
-                // 设置图表的配置选项
+                setTimeout(() => {
-                this.chart.setOption(option);
+                    this.chart.hideLoading();
+                    this.chart.setOption(option);
+                }, 1000);
             },
-            reloadCharts() { // 重新加载所有图表
+            reloadCharts() {
-                this.servers.forEach(node => {
+                const chartData = this.chartDataList[this.currentServerId];
-                    const id = node.ID;
+                if (chartData) {
-                    const chartData = this.chartDataList[id];
+                    this.renderCharts(this.currentServerId,true);
-                    if (chartData) {
+                }
-                        this.renderCharts(id,true);
-                    }
-                });
             },
             disposeCharts(chart){
                 chart.dispose();
@@ -341,6 +334,16 @@
                 const result = this.servers.find(item => item.ID == id);
                 return result.Host.CountryCode ? result.Host.CountryCode : 'rb';
             },
+            getNextServerId(id) {
+                const currentIndex = this.servers.findIndex(item => item.ID === id);
+                if (currentIndex === -1) {
+                    return this.servers[0].ID;
+                }
+                // 判断是否有下一个元素
+                const nextIndex = currentIndex + 1;
+                // 如果有下一个元素，返回下一个元素的 ID；否则返回第一个元素的 ID
+                return nextIndex < this.servers.length ? this.servers[nextIndex].ID : this.servers[0].ID;
+            },
             initSearch() {
                 $('#dropdown-search').on('keyup', function() {
                     var searchTerm = $(this).val().toLowerCase();

resource/template/theme-server-status/service.html

@@ -3,24 +3,24 @@
 {{template "theme-server-status/menu" .}}
 <!--  showGroup true -->
 <template v-if="showGroup">
-    <section v-if="servicesTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
+    <div v-if="servicesTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
         <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
-    </section>
+    </div>
-    <section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
+    <div v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
         {{template "theme-server-status/service-group-true" .}} 
-    </section>
+    </div>
 </template>
 <!--  showGroup false -->
 <template v-else>
-    <section v-if="servicesNoTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
+    <div v-if="servicesNoTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
         <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
-    </section>
+    </div>
-    <section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
+    <div v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
         {{template "theme-server-status/service-group-false" .}}
-    </section>
+    </div>
 </template>
 {{if .CycleTransferStats}}
-    <section class="container-fluid content table-responsive">
+    <div class="container-fluid content table-responsive">
         <table class="table table-striped table-condensed table-hover">
             <thead>
                 <tr class="node-group-tag">
@@ -67,7 +67,7 @@
                 {{end}}
             </tbody>
         </table>
-    </section>
+    </div>
 {{end}}
 {{template "theme-server-status/footer" .}}
 <script>

script/install.sh

@@ -12,7 +12,7 @@ NZ_DASHBOARD_PATH="${NZ_BASE_PATH}/dashboard"
 NZ_AGENT_PATH="${NZ_BASE_PATH}/agent"
 NZ_DASHBOARD_SERVICE="/etc/systemd/system/nezha-dashboard.service"
 NZ_DASHBOARD_SERVICERC="/etc/init.d/nezha-dashboard"
-NZ_VERSION="v0.18.3"
+NZ_VERSION="v0.19.0"
 
 red='\033[0;31m'
 green='\033[0;32m'
@@ -604,7 +604,7 @@ restart_and_update_standalone() {
         NZ_DASHBOARD_URL="https://${GITHUB_URL}/naibahq/nezha/releases/download/$version/dashboard-linux-$os_arch.zip"
     fi
 
-    sudo wget -qO $NZ_DASHBOARD_PATH/app.zip $NZ_DASHBOARD_URL >/dev/null 2>&1 && sudo unzip -qq $NZ_DASHBOARD_PATH/app.zip -d $NZ_DASHBOARD_PATH && sudo mv $NZ_DASHBOARD_PATH/dist/dashboard-linux-$os_arch $NZ_DASHBOARD_PATH/app && sudo rm -r $NZ_DASHBOARD_PATH/app.zip $NZ_DASHBOARD_PATH/dist
+    sudo wget -qO $NZ_DASHBOARD_PATH/app.zip $NZ_DASHBOARD_URL >/dev/null 2>&1 && sudo unzip -qq -o $NZ_DASHBOARD_PATH/app.zip -d $NZ_DASHBOARD_PATH && sudo mv $NZ_DASHBOARD_PATH/dashboard-linux-$os_arch $NZ_DASHBOARD_PATH/app && sudo rm $NZ_DASHBOARD_PATH/app.zip
 
     if [ "$os_alpine" != 1 ]; then
         sudo systemctl enable nezha-dashboard

script/install_en.sh

@@ -12,7 +12,7 @@ NZ_DASHBOARD_PATH="${NZ_BASE_PATH}/dashboard"
 NZ_AGENT_PATH="${NZ_BASE_PATH}/agent"
 NZ_DASHBOARD_SERVICE="/etc/systemd/system/nezha-dashboard.service"
 NZ_DASHBOARD_SERVICERC="/etc/init.d/nezha-dashboard"
-NZ_VERSION="v0.18.3"
+NZ_VERSION="v0.19.0"
 
 red='\033[0;31m'
 green='\033[0;32m'
@@ -598,7 +598,7 @@ restart_and_update_standalone() {
         NZ_DASHBOARD_URL="https://${GITHUB_URL}/naibahq/nezha/releases/download/$version/dashboard-linux-$os_arch.zip"
     fi
 
-    sudo wget -qO $NZ_DASHBOARD_PATH/app.zip $NZ_DASHBOARD_URL >/dev/null 2>&1 && sudo unzip -qq $NZ_DASHBOARD_PATH/app.zip -d $NZ_DASHBOARD_PATH && sudo mv $NZ_DASHBOARD_PATH/dist/dashboard-linux-$os_arch $NZ_DASHBOARD_PATH/app && sudo rm -r $NZ_DASHBOARD_PATH/app.zip $NZ_DASHBOARD_PATH/dist
+    sudo wget -qO $NZ_DASHBOARD_PATH/app.zip $NZ_DASHBOARD_URL >/dev/null 2>&1 && sudo unzip -qq -o $NZ_DASHBOARD_PATH/app.zip -d $NZ_DASHBOARD_PATH && sudo mv $NZ_DASHBOARD_PATH/dashboard-linux-$os_arch $NZ_DASHBOARD_PATH/app && sudo rm $NZ_DASHBOARD_PATH/app.zip
 
     if [ "$os_alpine" != 1 ]; then
         sudo systemctl enable nezha-dashboard

service/rpc/io_stream.go

@@ -3,6 +3,7 @@ package rpc
 import (
 	"errors"
 	"io"
+	"sync"
 	"sync/atomic"
 	"time"
 )
@@ -14,6 +15,18 @@ type ioStreamContext struct {
 	agentIoConnectCh chan struct{}
 }
 
+type bp struct {
+	buf []byte
+}
+
+var bufPool = sync.Pool{
+	New: func() any {
+		return &bp{
+			buf: make([]byte, 1024*1024),
+		}
+	},
+}
+
 func (s *NezhaHandler) CreateStream(streamId string) {
 	s.ioStreamMutex.Lock()
 	defer s.ioStreamMutex.Unlock()
@@ -117,7 +130,9 @@ LOOP:
 	endCh := make(chan struct{})
 
 	go func() {
-		_, innerErr := io.CopyBuffer(stream.userIo, stream.agentIo, make([]byte, 1048576))
+		bp := bufPool.Get().(*bp)
+		defer bufPool.Put(bp)
+		_, innerErr := io.CopyBuffer(stream.userIo, stream.agentIo, bp.buf)
 		if innerErr != nil {
 			err = innerErr
 		}
@@ -126,7 +141,9 @@ LOOP:
 		}
 	}()
 	go func() {
-		_, innerErr := io.CopyBuffer(stream.agentIo, stream.userIo, make([]byte, 1048576))
+		bp := bufPool.Get().(*bp)
+		defer bufPool.Put(bp)
+		_, innerErr := io.CopyBuffer(stream.agentIo, stream.userIo, bp.buf)
 		if innerErr != nil {
 			err = innerErr
 		}

service/rpc/nezha.go

@@ -159,7 +159,7 @@ func (s *NezhaHandler) ReportSystemInfo(c context.Context, r *pb.Host) (*pb.Rece
 
 		} else {
 			// 虽然会在启动时panic, 可以断言不会走这个分支, 但是考虑到动态加载配置或者其它情况, 这里输出一下方便检查奇奇怪怪的BUG
-			log.Printf("NEZHA>> 未找到对应的DDNS配置(%s), 或者是provider填写不正确, 请前往config.yml检查你的设置\n", singleton.ServerList[clientID].DDNSProfile)
+			log.Printf("NEZHA>> 未找到对应的DDNS配置(%s), 或者是provider填写不正确, 请前往config.yml检查你的设置", singleton.ServerList[clientID].DDNSProfile)
 		}
 
 	}

service/singleton/ddns.go

@@ -3,86 +3,72 @@ package singleton
 import (
 	"fmt"
 	"log"
+	"slices"
 
 	ddns2 "github.com/naiba/nezha/pkg/ddns"
 )
 
-func RetryableUpdateDomain(provider ddns2.Provider, config *ddns2.DomainConfig, maxRetries int) bool {
+const (
-	if nil == config {
+	ProviderWebHook      = "webhook"
-		return false
+	ProviderCloudflare   = "cloudflare"
+	ProviderTencentCloud = "tencentcloud"
+)
+
+type ProviderFunc func(*ddns2.DomainConfig) ddns2.Provider
+
+func RetryableUpdateDomain(provider ddns2.Provider, domainConfig *ddns2.DomainConfig, maxRetries int) {
+	if domainConfig == nil {
+		return
 	}
 	for retries := 0; retries < maxRetries; retries++ {
-		log.Printf("NEZHA>> 正在尝试更新域名(%s)DDNS(%d/%d)\n", config.FullDomain, retries+1, maxRetries)
+		log.Printf("NEZHA>> 正在尝试更新域名(%s)DDNS(%d/%d)", domainConfig.FullDomain, retries+1, maxRetries)
-		if provider.UpdateDomain(config) {
+		if err := provider.UpdateDomain(domainConfig); err != nil {
-			log.Printf("NEZHA>> 尝试更新域名(%s)DDNS成功\n", config.FullDomain)
+			log.Printf("NEZHA>> 尝试更新域名(%s)DDNS失败: %v", domainConfig.FullDomain, err)
-			return true
+		} else {
+			log.Printf("NEZHA>> 尝试更新域名(%s)DDNS成功", domainConfig.FullDomain)
+			break
 		}
 	}
-	log.Printf("NEZHA>> 尝试更新域名(%s)DDNS失败\n", config.FullDomain)
-	return false
 }
 
+// Deprecated
 func GetDDNSProviderFromString(provider string) (ddns2.Provider, error) {
 	switch provider {
-	case "webhook":
+	case ProviderWebHook:
-		return &ddns2.ProviderWebHook{
+		return ddns2.NewProviderWebHook(Conf.DDNS.WebhookURL, Conf.DDNS.WebhookMethod, Conf.DDNS.WebhookRequestBody, Conf.DDNS.WebhookHeaders), nil
-			URL:           Conf.DDNS.WebhookURL,
+	case ProviderCloudflare:
-			RequestMethod: Conf.DDNS.WebhookMethod,
+		return ddns2.NewProviderCloudflare(Conf.DDNS.AccessSecret), nil
-			RequestBody:   Conf.DDNS.WebhookRequestBody,
+	case ProviderTencentCloud:
-			RequestHeader: Conf.DDNS.WebhookHeaders,
+		return ddns2.NewProviderTencentCloud(Conf.DDNS.AccessID, Conf.DDNS.AccessSecret), nil
-		}, nil
+	default:
-	case "dummy":
+		return new(ddns2.ProviderDummy), fmt.Errorf("无法找到配置的DDNS提供者 %s", provider)
-		return &ddns2.ProviderDummy{}, nil
-	case "cloudflare":
-		return &ddns2.ProviderCloudflare{
-			Secret: Conf.DDNS.AccessSecret,
-		}, nil
-	case "tencentcloud":
-		return &ddns2.ProviderTencentCloud{
-			SecretID:  Conf.DDNS.AccessID,
-			SecretKey: Conf.DDNS.AccessSecret,
-		}, nil
 	}
-	return &ddns2.ProviderDummy{}, fmt.Errorf("无法找到配置的DDNS提供者%s", Conf.DDNS.Provider)
 }
 
 func GetDDNSProviderFromProfile(profileName string) (ddns2.Provider, error) {
 	profile, ok := Conf.DDNS.Profiles[profileName]
 	if !ok {
-		return &ddns2.ProviderDummy{}, fmt.Errorf("未找到配置项 %s", profileName)
+		return new(ddns2.ProviderDummy), fmt.Errorf("未找到配置项 %s", profileName)
 	}
 
 	switch profile.Provider {
-	case "webhook":
+	case ProviderWebHook:
-		return &ddns2.ProviderWebHook{
+		return ddns2.NewProviderWebHook(profile.WebhookURL, profile.WebhookMethod, profile.WebhookRequestBody, profile.WebhookHeaders), nil
-			URL:           profile.WebhookURL,
+	case ProviderCloudflare:
-			RequestMethod: profile.WebhookMethod,
+		return ddns2.NewProviderCloudflare(profile.AccessSecret), nil
-			RequestBody:   profile.WebhookRequestBody,
+	case ProviderTencentCloud:
-			RequestHeader: profile.WebhookHeaders,
+		return ddns2.NewProviderTencentCloud(profile.AccessID, profile.AccessSecret), nil
-		}, nil
+	default:
-	case "dummy":
+		return new(ddns2.ProviderDummy), fmt.Errorf("无法找到配置的DDNS提供者 %s", profile.Provider)
-		return &ddns2.ProviderDummy{}, nil
-	case "cloudflare":
-		return &ddns2.ProviderCloudflare{
-			Secret: profile.AccessSecret,
-		}, nil
-	case "tencentcloud":
-		return &ddns2.ProviderTencentCloud{
-			SecretID:  profile.AccessID,
-			SecretKey: profile.AccessSecret,
-		}, nil
 	}
-	return &ddns2.ProviderDummy{}, fmt.Errorf("无法找到配置的DDNS提供者%s", profile.Provider)
 }
 
 func ValidateDDNSProvidersFromProfiles() error {
-	validProviders := map[string]bool{"webhook": true, "dummy": true, "cloudflare": true, "tencentcloud": true}
+	validProviders := []string{ProviderWebHook, ProviderCloudflare, ProviderTencentCloud}
-	providers := make(map[string]string)
+	for _, profile := range Conf.DDNS.Profiles {
-	for profileName, profile := range Conf.DDNS.Profiles {
+		if ok := slices.Contains(validProviders, profile.Provider); !ok {
-		if _, ok := validProviders[profile.Provider]; !ok {
 			return fmt.Errorf("无法找到配置的DDNS提供者%s", profile.Provider)
 		}
-		providers[profileName] = profile.Provider
 	}
 	return nil
 }