do not check description file for theme-custom (#437)

* do not check description file for theme-custom

* deprecation note

.github/sync.py

@@ -31,6 +31,40 @@ def get_github_latest_release():
         print("No releases found.")
 
 
+def delete_gitee_releases(latest_id, client, uri, token):
+    get_data = {
+        'access_token': token
+    }
+
+    release_info = []
+    release_response = client.get(uri, json=get_data)
+    if release_response.status_code == 200:
+        release_info = release_response.json()
+    else:
+        print(
+            f"Request failed with status code {release_response.status_code}")
+
+    release_ids = []
+    for block in release_info:
+        if 'id' in block:
+            release_ids.append(block['id'])
+
+    print(f'Current release ids: {release_ids}')
+    release_ids.remove(latest_id)
+
+    for id in release_ids:
+        release_uri = f"{uri}/{id}"
+        delete_data = {
+            'access_token': token
+        }
+        delete_response = client.delete(release_uri, json=delete_data)
+        if delete_response.status_code == 204:
+            print(f'Successfully deleted release #{id}.')
+        else:
+            raise ValueError(
+                f"Request failed with status code {delete_response.status_code}")
+
+
 def sync_to_gitee(tag: str, body: str, files: slice):
     release_id = ""
     owner = "naibahq"
@@ -63,20 +97,31 @@ def sync_to_gitee(tag: str, body: str, files: slice):
     asset_api_uri = f"{release_api_uri}/{release_id}/attach_files"
 
     for file_path in files:
-        files = {
+        success = False
-            'file': open(file_path, 'rb')
-        }
 
-        asset_api_response = requests.post(
+        while not success:
-            asset_api_uri, params={'access_token': access_token}, files=files)
+            files = {
+                'file': open(file_path, 'rb')
+            }
 
-        if asset_api_response.status_code == 201:
+            asset_api_response = requests.post(
-            asset_info = asset_api_response.json()
+                asset_api_uri, params={'access_token': access_token}, files=files)
-            asset_name = asset_info.get('name')
+
-            print(f"Successfully uploaded {asset_name}!")
+            if asset_api_response.status_code == 201:
-        else:
+                asset_info = asset_api_response.json()
-            print(
+                asset_name = asset_info.get('name')
-                f"Request failed with status code {asset_api_response.status_code}")
+                print(f"Successfully uploaded {asset_name}!")
+                success = True
+            else:
+                print(
+                    f"Request failed with status code {asset_api_response.status_code}")
+
+    # 仅保留最新 Release 以防超出 Gitee 仓库配额
+    try:
+        delete_gitee_releases(release_id, api_client,
+                              release_api_uri, access_token)
+    except ValueError as e:
+        print(e)
 
     api_client.close()
     print("Sync is completed!")

.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.23
+    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.23.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.23.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.2-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.2-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,44 +44,47 @@ 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>
 <a href="https://github.com/cantoblanco" title="Kris"><img src="https://avatars.githubusercontent.com/u/116849421?v=4" width="50;" alt="Kris"/></a>
 <a href="https://github.com/lemoeo" title="Lemoe"><img src="https://avatars.githubusercontent.com/u/18618627?v=4" width="50;" alt="Lemoe"/></a>
-<a href="https://github.com/CosmosZ-code" title="CosmosZ-code"><img src="https://avatars.githubusercontent.com/u/81398224?v=4" width="50;" alt="CosmosZ-code"/></a>
-<a href="https://github.com/liuyanxi975" title="刘颜溪"><img src="https://avatars.githubusercontent.com/u/24417037?v=4" width="50;" alt="刘颜溪"/></a>
 <a href="https://github.com/spiritLHLS" title="spiritlhl"><img src="https://avatars.githubusercontent.com/u/103393591?v=4" width="50;" alt="spiritlhl"/></a>
-<a href="https://github.com/1ridic" title="1ridic"><img src="https://avatars.githubusercontent.com/u/88495501?v=4" width="50;" alt="1ridic"/></a>
+<a href="https://github.com/liuyanxi975" title="刘颜溪"><img src="https://avatars.githubusercontent.com/u/24417037?v=4" width="50;" alt="刘颜溪"/></a>
+<a href="https://github.com/CosmosZ-code" title="CosmosZ-code"><img src="https://avatars.githubusercontent.com/u/81398224?v=4" width="50;" alt="CosmosZ-code"/></a>
 <a href="https://github.com/lvgj-stack" title="Ko no dio"><img src="https://avatars.githubusercontent.com/u/38449861?v=4" width="50;" alt="Ko no dio"/></a>
 <a href="https://github.com/hhhkkk520" title="Kris"><img src="https://avatars.githubusercontent.com/u/52115472?v=4" width="50;" alt="Kris"/></a>
-<a href="https://github.com/rootmelo92118" title="rootmelo92118"><img src="https://avatars.githubusercontent.com/u/32770959?v=4" width="50;" alt="rootmelo92118"/></a>
+<a href="https://github.com/1ridic" title="1ridic"><img src="https://avatars.githubusercontent.com/u/88495501?v=4" width="50;" alt="1ridic"/></a>
 <a href="https://github.com/Mmx233" title="Mmx"><img src="https://avatars.githubusercontent.com/u/36563672?v=4" width="50;" alt="Mmx"/></a>
-<a href="https://github.com/coreff" title="Core F"><img src="https://avatars.githubusercontent.com/u/38347122?v=4" width="50;" alt="Core F"/></a>
+<a href="https://github.com/rootmelo92118" title="rootmelo92118"><img src="https://avatars.githubusercontent.com/u/32770959?v=4" width="50;" alt="rootmelo92118"/></a>
-<a href="https://github.com/Creling" title="Creling"><img src="https://avatars.githubusercontent.com/u/43109504?v=4" width="50;" alt="Creling"/></a>
+<a href="https://github.com/zhucaidan" title="zhucaidan"><img src="https://avatars.githubusercontent.com/u/47970938?v=4" width="50;" alt="zhucaidan"/></a>
-<a href="https://github.com/DarcJC" title="Darc Z."><img src="https://avatars.githubusercontent.com/u/53445798?v=4" width="50;" alt="Darc Z."/></a>
-<a href="https://github.com/HsukqiLee" title="HsukqiLee"><img src="https://avatars.githubusercontent.com/u/79034142?v=4" width="50;" alt="HsukqiLee"/></a>
-<a href="https://github.com/ch8o" title="no-name-now"><img src="https://avatars.githubusercontent.com/u/9103372?v=4" width="50;" alt="no-name-now"/></a>
-<a href="https://github.com/fscarmen" title="fscarmen"><img src="https://avatars.githubusercontent.com/u/62703343?v=4" width="50;" alt="fscarmen"/></a>
 <a href="https://github.com/iilemon" title="Sean"><img src="https://avatars.githubusercontent.com/u/33201711?v=4" width="50;" alt="Sean"/></a>
+<a href="https://github.com/fscarmen" title="fscarmen"><img src="https://avatars.githubusercontent.com/u/62703343?v=4" width="50;" alt="fscarmen"/></a>
+<a href="https://github.com/ch8o" title="no-name-now"><img src="https://avatars.githubusercontent.com/u/9103372?v=4" width="50;" alt="no-name-now"/></a>
+<a href="https://github.com/HsukqiLee" title="HsukqiLee"><img src="https://avatars.githubusercontent.com/u/79034142?v=4" width="50;" alt="HsukqiLee"/></a>
+<a href="https://github.com/DarcJC" title="Darc Z."><img src="https://avatars.githubusercontent.com/u/53445798?v=4" width="50;" alt="Darc Z."/></a>
+<a href="https://github.com/Creling" title="Creling"><img src="https://avatars.githubusercontent.com/u/43109504?v=4" width="50;" alt="Creling"/></a>
+<a href="https://github.com/coreff" title="Core F"><img src="https://avatars.githubusercontent.com/u/38347122?v=4" width="50;" alt="Core F"/></a>
 <a href="https://github.com/nickfox-taterli" title="Tater Li"><img src="https://avatars.githubusercontent.com/u/19658596?v=4" width="50;" alt="Tater Li"/></a>
 <a href="https://github.com/hmsjy2017" title="Tony"><img src="https://avatars.githubusercontent.com/u/42692274?v=4" width="50;" alt="Tony"/></a>
 <a href="https://github.com/adminsama" title="adminsama"><img src="https://avatars.githubusercontent.com/u/60880076?v=4" width="50;" alt="adminsama"/></a>
 <a href="https://github.com/acgpiano" title="Acgpiano"><img src="https://avatars.githubusercontent.com/u/15900800?v=4" width="50;" alt="Acgpiano"/></a>
 <a href="https://github.com/eya46" title="eya46"><img src="https://avatars.githubusercontent.com/u/61458340?v=4" width="50;" alt="eya46"/></a>
 <a href="https://github.com/guoyongchang" title="guoyongchang"><img src="https://avatars.githubusercontent.com/u/10484506?v=4" width="50;" alt="guoyongchang"/></a>
+<a href="https://github.com/hiDandelion" title="hiDandelion"><img src="https://avatars.githubusercontent.com/u/77157418?v=4" width="50;" alt="hiDandelion"/></a>
 <a href="https://github.com/yuanweize" title="I"><img src="https://avatars.githubusercontent.com/u/30067203?v=4" width="50;" alt="I"/></a>
 <a href="https://github.com/lvyaoting" title="lvyaoting"><img src="https://avatars.githubusercontent.com/u/166296299?v=4" width="50;" alt="lvyaoting"/></a>
+<a href="https://github.com/lyj0309" title="lyj"><img src="https://avatars.githubusercontent.com/u/50474995?v=4" width="50;" alt="lyj"/></a>
 <a href="https://github.com/unclezs" title="unclezs"><img src="https://avatars.githubusercontent.com/u/42318775?v=4" width="50;" alt="unclezs"/></a>
 <a href="https://github.com/ysicing" title="缘生"><img src="https://avatars.githubusercontent.com/u/8605565?v=4" width="50;" alt="缘生"/></a>
-<a href="https://github.com/zhucaidan" title="zhucaidan"><img src="https://avatars.githubusercontent.com/u/47970938?v=4" width="50;" alt="zhucaidan"/></a>
 <a href="https://github.com/arkylin" title="凌"><img src="https://avatars.githubusercontent.com/u/35104502?v=4" width="50;" alt="凌"/></a>
 <a href="https://github.com/colour93" title="玖叁"><img src="https://avatars.githubusercontent.com/u/64313711?v=4" width="50;" alt="玖叁"/></a>
 <a href="https://github.com/IamTaoChen" title="Tao Chen"><img src="https://avatars.githubusercontent.com/u/42793494?v=4" width="50;" alt="Tao Chen"/></a>
 <a href="https://github.com/Septrum101" title="Spetrum"><img src="https://avatars.githubusercontent.com/u/11692994?v=4" width="50;" alt="Spetrum"/></a>
 <a href="https://github.com/dreamingsleeping" title="Nanjing Hopefun Network Technology Co. Ltd."><img src="https://avatars.githubusercontent.com/u/13828658?v=4" width="50;" alt="Nanjing Hopefun Network Technology Co. Ltd."/></a>
+<a href="https://github.com/silver-ymz" title="Mingzhuo Yin"><img src="https://avatars.githubusercontent.com/u/78400701?v=4" width="50;" alt="Mingzhuo Yin"/></a>
 <a href="https://github.com/MartijnLindeman" title="Martijn Lindeman"><img src="https://avatars.githubusercontent.com/u/78365708?v=4" width="50;" alt="Martijn Lindeman"/></a>
 <a href="https://github.com/xrgzs" title="MadDogOwner"><img src="https://avatars.githubusercontent.com/u/26499123?v=4" width="50;" alt="MadDogOwner"/></a>
 <a href="https://github.com/funnyzak" title="Leon"><img src="https://avatars.githubusercontent.com/u/2562087?v=4" width="50;" alt="Leon"/></a>
@@ -89,7 +92,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

@@ -46,6 +46,8 @@ func (cp *commonPage) serve() {
 	cr.GET("/network", cp.network)
 	cr.GET("/ws", cp.ws)
 	cr.POST("/terminal", cp.createTerminal)
+	cr.GET("/file", cp.createFM)
+	cr.GET("/file/:id", cp.fm)
 }
 
 type viewPasswordForm struct {
@@ -99,7 +101,6 @@ func (p *commonPage) service(c *gin.Context) {
 		"Title":              singleton.Localizer.MustLocalize(&i18n.LocalizeConfig{MessageID: "ServicesStatus"}),
 		"Services":           res.([]interface{})[0],
 		"CycleTransferStats": res.([]interface{})[1],
-		"CustomCode":         singleton.Conf.Site.CustomCode,
 	}))
 }
 
@@ -204,12 +205,11 @@ func (cp *commonPage) network(c *gin.Context) {
 	c.HTML(http.StatusOK, mygin.GetPreferredTheme(c, "/network"), mygin.CommonEnvironment(c, gin.H{
 		"Servers":         string(serversBytes),
 		"MonitorInfos":    string(monitorInfos),
-		"CustomCode":      singleton.Conf.Site.CustomCode,
 		"MaxTCPPingValue": singleton.Conf.MaxTCPPingValue,
 	}))
 }
 
-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,
@@ -254,14 +256,13 @@ func (cp *commonPage) home(c *gin.Context) {
 		return
 	}
 	c.HTML(http.StatusOK, mygin.GetPreferredTheme(c, "/home"), mygin.CommonEnvironment(c, gin.H{
-		"Servers":    string(stat),
+		"Servers": string(stat),
-		"CustomCode": singleton.Conf.Site.CustomCode,
 	}))
 }
 
 var upgrader = websocket.Upgrader{
-	ReadBufferSize:  10240,
+	ReadBufferSize:  32768,
-	WriteBufferSize: 10240,
+	WriteBufferSize: 32768,
 }
 
 type Data struct {
@@ -286,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
 		}
@@ -430,5 +431,130 @@ func (cp *commonPage) createTerminal(c *gin.Context) {
 	c.HTML(http.StatusOK, "dashboard-"+singleton.Conf.Site.DashboardTheme+"/terminal", mygin.CommonEnvironment(c, gin.H{
 		"SessionID":  streamId,
 		"ServerName": server.Name,
+		"ServerID":   server.ID,
+	}))
+}
+
+func (cp *commonPage) fm(c *gin.Context) {
+	streamId := c.Param("id")
+	if _, err := rpc.NezhaHandlerSingleton.GetStream(streamId); err != nil {
+		mygin.ShowErrorPage(c, mygin.ErrInfo{
+			Code:  http.StatusForbidden,
+			Title: "无权访问",
+			Msg:   "FM会话不存在",
+			Link:  "/",
+			Btn:   "返回首页",
+		}, true)
+		return
+	}
+	defer rpc.NezhaHandlerSingleton.CloseStream(streamId)
+
+	wsConn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
+	if err != nil {
+		mygin.ShowErrorPage(c, mygin.ErrInfo{
+			Code: http.StatusInternalServerError,
+			Title: singleton.Localizer.MustLocalize(&i18n.LocalizeConfig{
+				MessageID: "NetworkError",
+			}),
+			Msg:  "Websocket协议切换失败",
+			Link: "/",
+			Btn:  "返回首页",
+		}, true)
+		return
+	}
+	defer wsConn.Close()
+	conn := websocketx.NewConn(wsConn)
+
+	go func() {
+		// PING 保活
+		for {
+			if err = conn.WriteMessage(websocket.PingMessage, []byte{}); err != nil {
+				return
+			}
+			time.Sleep(time.Second * 10)
+		}
+	}()
+
+	if err = rpc.NezhaHandlerSingleton.UserConnected(streamId, conn); err != nil {
+		return
+	}
+
+	rpc.NezhaHandlerSingleton.StartStream(streamId, time.Second*10)
+}
+
+func (cp *commonPage) createFM(c *gin.Context) {
+	IdString := c.Query("id")
+	if _, authorized := c.Get(model.CtxKeyAuthorizedUser); !authorized {
+		mygin.ShowErrorPage(c, mygin.ErrInfo{
+			Code:  http.StatusForbidden,
+			Title: "无权访问",
+			Msg:   "用户未登录",
+			Link:  "/login",
+			Btn:   "去登录",
+		}, true)
+		return
+	}
+
+	streamId, err := uuid.GenerateUUID()
+	if err != nil {
+		mygin.ShowErrorPage(c, mygin.ErrInfo{
+			Code: http.StatusInternalServerError,
+			Title: singleton.Localizer.MustLocalize(&i18n.LocalizeConfig{
+				MessageID: "SystemError",
+			}),
+			Msg:  "生成会话ID失败",
+			Link: "/server",
+			Btn:  "返回重试",
+		}, true)
+		return
+	}
+
+	rpc.NezhaHandlerSingleton.CreateStream(streamId)
+
+	serverId, err := strconv.Atoi(IdString)
+	if err != nil {
+		mygin.ShowErrorPage(c, mygin.ErrInfo{
+			Code:  http.StatusForbidden,
+			Title: "请求失败",
+			Msg:   "请求参数有误：" + err.Error(),
+			Link:  "/server",
+			Btn:   "返回重试",
+		}, true)
+		return
+	}
+
+	singleton.ServerLock.RLock()
+	server := singleton.ServerList[uint64(serverId)]
+	singleton.ServerLock.RUnlock()
+	if server == nil {
+		mygin.ShowErrorPage(c, mygin.ErrInfo{
+			Code:  http.StatusForbidden,
+			Title: "请求失败",
+			Msg:   "服务器不存在或处于离线状态",
+			Link:  "/server",
+			Btn:   "返回重试",
+		}, true)
+		return
+	}
+
+	fmData, _ := utils.Json.Marshal(&model.TaskFM{
+		StreamID: streamId,
+	})
+	if err := server.TaskStream.Send(&proto.Task{
+		Type: model.TaskTypeFM,
+		Data: string(fmData),
+	}); err != nil {
+		mygin.ShowErrorPage(c, mygin.ErrInfo{
+			Code:  http.StatusForbidden,
+			Title: "请求失败",
+			Msg:   "Agent信令下发失败",
+			Link:  "/server",
+			Btn:   "返回重试",
+		}, true)
+		return
+	}
+
+	c.HTML(http.StatusOK, "dashboard-"+singleton.Conf.Site.DashboardTheme+"/file", mygin.CommonEnvironment(c, gin.H{
+		"SessionID": streamId,
 	}))
 }

cmd/dashboard/controller/controller.go

@@ -1,13 +1,12 @@
 package controller
 
 import (
-	"encoding/json"
 	"fmt"
 	"html/template"
-	"io/fs"
 	"log"
 	"net/http"
 	"os"
+	"path/filepath"
 	"strconv"
 	"strings"
 	"time"
@@ -44,12 +43,7 @@ func ServeWeb(port uint) *http.Server {
 	tmpl = loadThirdPartyTemplates(tmpl)
 	r.SetHTMLTemplate(tmpl)
 	r.Use(mygin.RecordPath)
-	staticFs, err := fs.Sub(resource.StaticFS, "static")
+	r.StaticFS("/static", http.FS(resource.StaticFS))
-	if err != nil {
-		panic(err)
-	}
-	r.StaticFS("/static", http.FS(staticFs))
-	r.Static("/static-custom", "resource/static/custom")
 	routers(r)
 	page404 := func(c *gin.Context) {
 		mygin.ShowErrorPage(c, mygin.ErrInfo{
@@ -90,7 +84,7 @@ func routers(r *gin.Engine) {
 }
 
 func loadThirdPartyTemplates(tmpl *template.Template) *template.Template {
-	var ret = tmpl
+	ret := tmpl
 	themes, err := os.ReadDir("resource/template")
 	if err != nil {
 		log.Printf("NEZHA>> Error reading themes folder: %v", err)
@@ -100,17 +94,61 @@ func loadThirdPartyTemplates(tmpl *template.Template) *template.Template {
 		if !theme.IsDir() {
 			continue
 		}
-		// load templates
+
-		t, err := ret.ParseGlob(fmt.Sprintf("resource/template/%s/*.html", theme.Name()))
+		themeDir := theme.Name()
-		if err != nil {
+		if themeDir == "theme-custom" {
-			log.Printf("NEZHA>> Error parsing templates %s error: %v", theme.Name(), err)
+			// for backward compatibility
+			// note: will remove this in future versions
+			ret = loadTemplates(ret, themeDir)
 			continue
 		}
-		ret = t
+
+		if strings.HasPrefix(themeDir, "dashboard-") {
+			// load dashboard templates, ignore desc file
+			ret = loadTemplates(ret, themeDir)
+			continue
+		}
+
+		if !strings.HasPrefix(themeDir, "theme-") {
+			log.Printf("NEZHA>> Invalid theme name: %s", themeDir)
+			continue
+		}
+
+		descPath := filepath.Join("resource", "template", themeDir, "theme.json")
+		desc, err := os.ReadFile(filepath.Clean(descPath))
+		if err != nil {
+			log.Printf("NEZHA>> Error opening %s config: %v", themeDir, err)
+			continue
+		}
+
+		themeName, err := utils.GjsonGet(desc, "name")
+		if err != nil {
+			log.Printf("NEZHA>> Error opening %s config: not a valid description file", theme.Name())
+			continue
+		}
+
+		// load templates
+		ret = loadTemplates(ret, themeDir)
+
+		themeKey := strings.TrimPrefix(themeDir, "theme-")
+		model.Themes[themeKey] = themeName.String()
 	}
+
 	return ret
 }
 
+func loadTemplates(tmpl *template.Template, themeDir string) *template.Template {
+	// load templates
+	templatePath := filepath.Join("resource", "template", themeDir, "*.html")
+	t, err := tmpl.ParseGlob(templatePath)
+	if err != nil {
+		log.Printf("NEZHA>> Error parsing templates %s: %v", themeDir, err)
+		return tmpl
+	}
+
+	return t
+}
+
 var funcMap = template.FuncMap{
 	"tr": func(id string, dataAndCount ...interface{}) string {
 		conf := i18n.LocalizeConfig{
@@ -270,7 +308,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

@@ -7,10 +7,12 @@ import (
 	"net/http"
 	"strconv"
 	"strings"
+	"sync"
 	"time"
 
 	"github.com/gin-gonic/gin"
 	"github.com/jinzhu/copier"
+	"golang.org/x/net/idna"
 	"gorm.io/gorm"
 
 	"github.com/naiba/nezha/model"
@@ -37,6 +39,7 @@ func (ma *memberAPI) serve() {
 
 	mr.GET("/search-server", ma.searchServer)
 	mr.GET("/search-tasks", ma.searchTask)
+	mr.GET("/search-ddns", ma.searchDDNS)
 	mr.POST("/server", ma.addOrEditServer)
 	mr.POST("/monitor", ma.addOrEditMonitor)
 	mr.POST("/cron", ma.addOrEditCron)
@@ -45,6 +48,7 @@ func (ma *memberAPI) serve() {
 	mr.POST("/batch-update-server-group", ma.batchUpdateServerGroup)
 	mr.POST("/batch-delete-server", ma.batchDeleteServer)
 	mr.POST("/notification", ma.addOrEditNotification)
+	mr.POST("/ddns", ma.addOrEditDDNS)
 	mr.POST("/nat", ma.addOrEditNAT)
 	mr.POST("/alert-rule", ma.addOrEditAlertRule)
 	mr.POST("/setting", ma.updateSetting)
@@ -210,6 +214,11 @@ func (ma *memberAPI) delete(c *gin.Context) {
 		if err == nil {
 			singleton.OnDeleteNotification(id)
 		}
+	case "ddns":
+		err = singleton.DB.Unscoped().Delete(&model.DDNSProfile{}, "id = ?", id).Error
+		if err == nil {
+			singleton.OnDDNSUpdate()
+		}
 	case "nat":
 		err = singleton.DB.Unscoped().Delete(&model.NAT{}, "id = ?", id).Error
 		if err == nil {
@@ -298,19 +307,38 @@ func (ma *memberAPI) searchTask(c *gin.Context) {
 	})
 }
 
+func (ma *memberAPI) searchDDNS(c *gin.Context) {
+	var ddns []model.DDNSProfile
+	likeWord := "%" + c.Query("word") + "%"
+	singleton.DB.Select("id,name").Where("id = ? OR name LIKE ?",
+		c.Query("word"), likeWord).Find(&ddns)
+
+	var resp []searchResult
+	for i := 0; i < len(ddns); i++ {
+		resp = append(resp, searchResult{
+			Value: ddns[i].ID,
+			Name:  ddns[i].Name,
+			Text:  ddns[i].Name,
+		})
+	}
+
+	c.JSON(http.StatusOK, map[string]interface{}{
+		"success": true,
+		"results": resp,
+	})
+}
+
 type serverForm struct {
-	ID           uint64
+	ID              uint64
-	Name         string `binding:"required"`
+	Name            string `binding:"required"`
-	DisplayIndex int
+	DisplayIndex    int
-	Secret       string
+	Secret          string
-	Tag          string
+	Tag             string
-	Note         string
+	Note            string
-	HideForGuest string
+	PublicNote      string
-	EnableDDNS   string
+	HideForGuest    string
-	EnableIPv4   string
+	EnableDDNS      string
-	EnableIpv6   string
+	DDNSProfilesRaw string
-	DDNSDomain   string
-	DDNSProfile  string
 }
 
 func (ma *memberAPI) addOrEditServer(c *gin.Context) {
@@ -325,20 +353,21 @@ 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"
+		s.DDNSProfilesRaw = sf.DDNSProfilesRaw
-		s.EnableIpv6 = sf.EnableIpv6 == "on"
+		err = utils.Json.Unmarshal([]byte(sf.DDNSProfilesRaw), &s.DDNSProfiles)
-		s.DDNSDomain = sf.DDNSDomain
+		if err == nil {
-		s.DDNSProfile = sf.DDNSProfile
+			if s.ID == 0 {
-		if s.ID == 0 {
+				s.Secret, err = utils.GenerateRandomString(18)
-			s.Secret, err = utils.GenerateRandomString(18)
+				if err == nil {
-			if err == nil {
+					err = singleton.DB.Create(&s).Error
-				err = singleton.DB.Create(&s).Error
+				}
+			} else {
+				isEdit = true
+				err = singleton.DB.Save(&s).Error
 			}
-		} else {
-			isEdit = true
-			err = singleton.DB.Save(&s).Error
 		}
 	}
 	if err != nil {
@@ -384,6 +413,7 @@ func (ma *memberAPI) addOrEditServer(c *gin.Context) {
 	} else {
 		s.Host = &model.Host{}
 		s.State = &model.HostState{}
+		s.TaskCloseLock = new(sync.Mutex)
 		singleton.ServerLock.Lock()
 		singleton.SecretToID[s.Secret] = s.ID
 		singleton.ServerList[s.ID] = &s
@@ -739,6 +769,81 @@ func (ma *memberAPI) addOrEditNotification(c *gin.Context) {
 	})
 }
 
+type ddnsForm struct {
+	ID                 uint64
+	MaxRetries         uint64
+	EnableIPv4         string
+	EnableIPv6         string
+	Name               string
+	Provider           uint8
+	DomainsRaw         string
+	AccessID           string
+	AccessSecret       string
+	WebhookURL         string
+	WebhookMethod      uint8
+	WebhookRequestType uint8
+	WebhookRequestBody string
+	WebhookHeaders     string
+}
+
+func (ma *memberAPI) addOrEditDDNS(c *gin.Context) {
+	var df ddnsForm
+	var p model.DDNSProfile
+	err := c.ShouldBindJSON(&df)
+	if err == nil {
+		if df.MaxRetries < 1 || df.MaxRetries > 10 {
+			err = errors.New("重试次数必须为大于 1 且不超过 10 的整数")
+		}
+	}
+	if err == nil {
+		p.Name = df.Name
+		p.ID = df.ID
+		enableIPv4 := df.EnableIPv4 == "on"
+		enableIPv6 := df.EnableIPv6 == "on"
+		p.EnableIPv4 = &enableIPv4
+		p.EnableIPv6 = &enableIPv6
+		p.MaxRetries = df.MaxRetries
+		p.Provider = df.Provider
+		p.DomainsRaw = df.DomainsRaw
+		p.Domains = strings.Split(p.DomainsRaw, ",")
+		p.AccessID = df.AccessID
+		p.AccessSecret = df.AccessSecret
+		p.WebhookURL = df.WebhookURL
+		p.WebhookMethod = df.WebhookMethod
+		p.WebhookRequestType = df.WebhookRequestType
+		p.WebhookRequestBody = df.WebhookRequestBody
+		p.WebhookHeaders = df.WebhookHeaders
+
+		for n, domain := range p.Domains {
+			// IDN to ASCII
+			domainValid, domainErr := idna.Lookup.ToASCII(domain)
+			if domainErr != nil {
+				err = fmt.Errorf("域名 %s 解析错误: %v", domain, domainErr)
+				break
+			}
+			p.Domains[n] = domainValid
+		}
+	}
+	if err == nil {
+		if p.ID == 0 {
+			err = singleton.DB.Create(&p).Error
+		} else {
+			err = singleton.DB.Save(&p).Error
+		}
+	}
+	if err != nil {
+		c.JSON(http.StatusOK, model.Response{
+			Code:    http.StatusBadRequest,
+			Message: fmt.Sprintf("请求错误：%s", err),
+		})
+		return
+	}
+	singleton.OnDDNSUpdate()
+	c.JSON(http.StatusOK, model.Response{
+		Code: http.StatusOK,
+	})
+}
+
 type natForm struct {
 	ID       uint64
 	Name     string
@@ -906,6 +1011,7 @@ type settingForm struct {
 	Theme                   string
 	DashboardTheme          string
 	CustomCode              string
+	CustomCodeDashboard     string
 	ViewPassword            string
 	IgnoredIPNotification   string
 	IPChangeNotificationTag string // IP变更提醒的通知组
@@ -935,7 +1041,7 @@ func (ma *memberAPI) updateSetting(c *gin.Context) {
 		return
 	}
 
-	if _, yes := model.Themes[sf.DashboardTheme]; !yes {
+	if _, yes := model.DashboardThemes[sf.DashboardTheme]; !yes {
 		c.JSON(http.StatusOK, model.Response{
 			Code:    http.StatusBadRequest,
 			Message: fmt.Sprintf("后台主题不存在：%s", sf.DashboardTheme),
@@ -971,6 +1077,7 @@ func (ma *memberAPI) updateSetting(c *gin.Context) {
 	singleton.Conf.Site.Theme = sf.Theme
 	singleton.Conf.Site.DashboardTheme = sf.DashboardTheme
 	singleton.Conf.Site.CustomCode = sf.CustomCode
+	singleton.Conf.Site.CustomCodeDashboard = sf.CustomCodeDashboard
 	singleton.Conf.Site.ViewPassword = sf.ViewPassword
 	singleton.Conf.Oauth2.Admin = sf.Admin
 	// 保证NotificationTag不为空

cmd/dashboard/controller/member_page.go

@@ -27,6 +27,7 @@ func (mp *memberPage) serve() {
 	mr.GET("/monitor", mp.monitor)
 	mr.GET("/cron", mp.cron)
 	mr.GET("/notification", mp.notification)
+	mr.GET("/ddns", mp.ddns)
 	mr.GET("/nat", mp.nat)
 	mr.GET("/setting", mp.setting)
 	mr.GET("/api", mp.api)
@@ -78,6 +79,17 @@ func (mp *memberPage) notification(c *gin.Context) {
 	}))
 }
 
+func (mp *memberPage) ddns(c *gin.Context) {
+	var data []model.DDNSProfile
+	singleton.DB.Find(&data)
+	c.HTML(http.StatusOK, "dashboard-"+singleton.Conf.Site.DashboardTheme+"/ddns", mygin.CommonEnvironment(c, gin.H{
+		"Title":        singleton.Localizer.MustLocalize(&i18n.LocalizeConfig{MessageID: "DDNS"}),
+		"DDNS":         data,
+		"ProviderMap":  model.ProviderMap,
+		"ProviderList": model.ProviderList,
+	}))
+}
+
 func (mp *memberPage) nat(c *gin.Context) {
 	var data []model.NAT
 	singleton.DB.Find(&data)

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

@@ -4,10 +4,13 @@ import (
 	"context"
 	"fmt"
 	"log"
+	"time"
+	_ "time/tzdata"
 
 	"github.com/naiba/nezha/cmd/dashboard/controller"
 	"github.com/naiba/nezha/cmd/dashboard/rpc"
 	"github.com/naiba/nezha/model"
+	"github.com/naiba/nezha/proto"
 	"github.com/naiba/nezha/service/singleton"
 	"github.com/ory/graceful"
 	flag "github.com/spf13/pflag"
@@ -68,6 +71,7 @@ func main() {
 	go singleton.AlertSentinelStart()
 	singleton.NewServiceSentinel(serviceSentinelDispatchBus)
 	srv := controller.ServeWeb(singleton.Conf.HTTPPort)
+	go dispatchReportInfoTask()
 	if err := graceful.Graceful(func() error {
 		return srv.ListenAndServe()
 	}, func(c context.Context) error {
@@ -80,3 +84,18 @@ func main() {
 		log.Printf("NEZHA>> ERROR: %v", err)
 	}
 }
+
+func dispatchReportInfoTask() {
+	time.Sleep(time.Second * 15)
+	singleton.ServerLock.RLock()
+	defer singleton.ServerLock.RUnlock()
+	for _, server := range singleton.ServerList {
+		if server == nil || server.TaskStream == nil {
+			continue
+		}
+		server.TaskStream.Send(&proto.Task{
+			Type: model.TaskTypeReportHostInfo,
+			Data: "",
+		})
+	}
+}

go.mod

@@ -14,12 +14,18 @@ require (
 	github.com/hashicorp/go-uuid v1.0.3
 	github.com/jinzhu/copier v0.4.0
 	github.com/json-iterator/go v1.1.12
+	github.com/libdns/cloudflare v0.1.1
+	github.com/libdns/libdns v0.2.2
+	github.com/libdns/tencentcloud v1.0.0
+	github.com/miekg/dns v1.1.62
 	github.com/nicksnyder/go-i18n/v2 v2.4.0
 	github.com/ory/graceful v0.1.3
+	github.com/oschwald/maxminddb-golang v1.13.1
 	github.com/patrickmn/go-cache v2.1.0+incompatible
 	github.com/robfig/cron/v3 v3.0.1
 	github.com/spf13/pflag v1.0.5
 	github.com/spf13/viper v1.18.2
+	github.com/tidwall/gjson v1.18.0
 	github.com/xanzy/go-gitlab v0.103.0
 	golang.org/x/crypto v0.25.0
 	golang.org/x/net v0.27.0
@@ -61,7 +67,6 @@ require (
 	github.com/mitchellh/mapstructure v1.5.0 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
-	github.com/oschwald/maxminddb-golang v1.13.1 // indirect
 	github.com/pelletier/go-toml/v2 v2.1.0 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/sagikazarmark/locafero v0.4.0 // indirect
@@ -70,14 +75,19 @@ require (
 	github.com/spf13/afero v1.11.0 // indirect
 	github.com/spf13/cast v1.6.0 // indirect
 	github.com/subosito/gotenv v1.6.0 // indirect
+	github.com/tencentcloud/tencentcloud-sdk-go/tencentcloud/common v1.0.597 // indirect
+	github.com/tidwall/match v1.1.1 // indirect
+	github.com/tidwall/pretty v1.2.0 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.11 // indirect
 	go.uber.org/atomic v1.9.0 // indirect
 	go.uber.org/multierr v1.9.0 // indirect
 	golang.org/x/arch v0.3.0 // indirect
 	golang.org/x/exp v0.0.0-20230905200255-921286631fa9 // indirect
+	golang.org/x/mod v0.18.0 // indirect
 	golang.org/x/sys v0.22.0 // indirect
 	golang.org/x/time v0.5.0 // indirect
+	golang.org/x/tools v0.22.0 // indirect
 	google.golang.org/genproto/googleapis/rpc v0.0.0-20240227224415-6ceb2ff114de // indirect
 	gopkg.in/ini.v1 v1.67.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect

go.sum

@@ -107,6 +107,12 @@ github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/leodido/go-urn v1.2.1/go.mod h1:zt4jvISO2HfUBqxjfIshjdMTYS56ZS/qv49ictyFfxY=
 github.com/leodido/go-urn v1.2.4 h1:XlAE/cm/ms7TE/VMVoduSpNBoyc2dOxHs5MZSwAN63Q=
 github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
+github.com/libdns/cloudflare v0.1.1 h1:FVPfWwP8zZCqj268LZjmkDleXlHPlFU9KC4OJ3yn054=
+github.com/libdns/cloudflare v0.1.1/go.mod h1:9VK91idpOjg6v7/WbjkEW49bSCxj00ALesIFDhJ8PBU=
+github.com/libdns/libdns v0.2.2 h1:O6ws7bAfRPaBsgAYt8MDe2HcNBGC29hkZ9MX2eUSX3s=
+github.com/libdns/libdns v0.2.2/go.mod h1:4Bj9+5CQiNMVGf87wjX4CY3HQJypUHRuLvlsfsZqLWQ=
+github.com/libdns/tencentcloud v1.0.0 h1:u4LXnYu/lu/9P5W+MCVPeSDnwI+6w+DxYhQ1wSnQOuU=
+github.com/libdns/tencentcloud v1.0.0/go.mod h1:NlCgPumzUsZWSOo1+Q/Hfh8G6TNRAaTUeWQdg6LbtUI=
 github.com/magiconair/properties v1.8.7 h1:IeQXZAiQcpL9mgcAe1Nu6cX9LLw6ExEHKjN0VQdvPDY=
 github.com/magiconair/properties v1.8.7/go.mod h1:Dhd985XPs7jluiymwWYZ0G4Z61jb3vdS329zhj2hYo0=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
@@ -116,6 +122,8 @@ github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWE
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-sqlite3 v1.14.17 h1:mCRHCLDUBXgpKAqIKsaAaAsrAlbkeomtRFKXh2L6YIM=
 github.com/mattn/go-sqlite3 v1.14.17/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
+github.com/miekg/dns v1.1.62 h1:cN8OuEF1/x5Rq6Np+h1epln8OiyPWV+lROx9LxcGgIQ=
+github.com/miekg/dns v1.1.62/go.mod h1:mvDlcItzm+br7MToIKqkglaGhlFMHJ9DTNNWONWXbNQ=
 github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
 github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -175,10 +183,19 @@ github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
-github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
+github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/subosito/gotenv v1.6.0 h1:9NlTDc1FTs4qu0DDq7AEtTPNw6SVm7uBMsUCUjABIf8=
 github.com/subosito/gotenv v1.6.0/go.mod h1:Dk4QP5c2W3ibzajGcXpNraDfq2IrhjMIvMSWPKKo0FU=
+github.com/tencentcloud/tencentcloud-sdk-go/tencentcloud/common v1.0.597 h1:C0GHdLTfikLVoEzfhgPfrZ7LwlG0xiCmk6iwNKE+xs0=
+github.com/tencentcloud/tencentcloud-sdk-go/tencentcloud/common v1.0.597/go.mod h1:7sCQWVkxcsR38nffDW057DRGk8mUjK1Ing/EFOK8s8Y=
+github.com/tidwall/gjson v1.18.0 h1:FIDeeyB800efLX89e5a8Y0BNH+LOngJyGrIWxG2FKQY=
+github.com/tidwall/gjson v1.18.0/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
+github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA=
+github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
+github.com/tidwall/pretty v1.2.0 h1:RWIZEg2iJ8/g6fDDYzMpobmaoGh5OLl4AXtGUGPcqCs=
+github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
 github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
 github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/ugorji/go v1.2.7/go.mod h1:nF9osbDWLy6bDVv/Rtoh6QgnvNDpmCalQV5urGCCS6M=
@@ -202,6 +219,8 @@ golang.org/x/crypto v0.25.0 h1:ypSNr+bnYL2YhwoMt2zPxHFmbAN1KZs/njMG3hxUp30=
 golang.org/x/crypto v0.25.0/go.mod h1:T+wALwcMOSE0kXgUAnPAHqTLW+XHgcELELW8VaDgm/M=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9 h1:GoHiUyI/Tp2nVkLI2mCxVkOjsbSXD66ic0XW0js0R9g=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9/go.mod h1:S2oDrQGGwySpoQPVqRShND87VCbxmc6bL1Yd2oYrm6k=
+golang.org/x/mod v0.18.0 h1:5+9lSbEzPSdWkH32vYPBwEpX8KwDbM52Ud9xBUvNlb0=
+golang.org/x/mod v0.18.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
 golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.27.0 h1:5K3Njcw06/l2y9vpGCSdcxWOYHOUk3dVNGDXN+FvAys=
@@ -231,8 +250,8 @@ golang.org/x/text v0.16.0/go.mod h1:GhwF1Be+LQoKShO3cGOHzqOgRrGaYc9AvblQOmPVHnI=
 golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
 golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d h1:vU5i/LfpvrRCpgM/VPfJLg5KjxD3E+hfT1SH+d9zLwg=
+golang.org/x/tools v0.22.0 h1:gqSGLZqv+AI9lIQzniJ0nZDRG5GBPsSi+DRNHWNz6yA=
-golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
+golang.org/x/tools v0.22.0/go.mod h1:aCwcsjqvq7Yqt6TNyX7QMU2enbQ/Gt0bo6krSeEri+c=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20240227224415-6ceb2ff114de h1:cZGRis4/ot9uVm639a+rHCUaG0JJHEsdyzSQTMX+suY=
 google.golang.org/genproto/googleapis/rpc v0.0.0-20240227224415-6ceb2ff114de/go.mod h1:H4O17MA/PE9BsGx3w+a+W2VOLLD1Qf7oJneAoU6WktY=

model/config.go

@@ -23,7 +23,6 @@ var Themes = map[string]string{
 	"hotaru":        "Hotaru",
 	"angel-kanade":  "AngelKanade",
 	"server-status": "ServerStatus",
-	"custom":        "Custom(local)",
 }
 
 var DashboardThemes = map[string]string{
@@ -80,12 +79,13 @@ type Config struct {
 	Debug    bool   // debug模式开关
 	Language string // 系统语言，默认 zh-CN
 	Site     struct {
-		Brand          string // 站点名称
+		Brand               string // 站点名称
-		CookieName     string // 浏览器 Cookie 名称
+		CookieName          string // 浏览器 Cookie 名称
-		Theme          string
+		Theme               string
-		DashboardTheme string
+		DashboardTheme      string
-		CustomCode     string
+		CustomCode          string
-		ViewPassword   string // 前台查看密码
+		CustomCodeDashboard string
+		ViewPassword        string // 前台查看密码
 	}
 	Oauth2 struct {
 		Type            string
@@ -125,30 +125,6 @@ type Config struct {
 	IgnoredIPNotificationServerIDs map[uint64]bool // [ServerID] -> bool(值为true代表当前ServerID在特定服务器列表内）
 	MaxTCPPingValue                int32
 	AvgPingCount                   int
-
-	// 动态域名解析更新
-	DDNS struct {
-		Enable             bool
-		Provider           string
-		AccessID           string
-		AccessSecret       string
-		WebhookURL         string
-		WebhookMethod      string
-		WebhookRequestBody string
-		WebhookHeaders     string
-		MaxRetries         uint32
-		Profiles           map[string]DDNSProfile
-	}
-}
-
-type DDNSProfile struct {
-	Provider           string
-	AccessID           string
-	AccessSecret       string
-	WebhookURL         string
-	WebhookMethod      string
-	WebhookRequestBody string
-	WebhookHeaders     string
 }
 
 // Read 读取配置文件并应用
@@ -189,9 +165,6 @@ func (c *Config) Read(path string) error {
 	if c.AvgPingCount == 0 {
 		c.AvgPingCount = 2
 	}
-	if c.DDNS.MaxRetries == 0 {
-		c.DDNS.MaxRetries = 3
-	}
 	if c.Oauth2.OidcScopes == "" {
 		c.Oauth2.OidcScopes = "openid,profile,email"
 	}

model/ddns.go

@@ -0,0 +1,100 @@
+package model
+
+import (
+	"strings"
+
+	"gorm.io/gorm"
+)
+
+const (
+	ProviderDummy = iota
+	ProviderWebHook
+	ProviderCloudflare
+	ProviderTencentCloud
+)
+
+const (
+	_Dummy        = "dummy"
+	_WebHook      = "webhook"
+	_Cloudflare   = "cloudflare"
+	_TencentCloud = "tencentcloud"
+)
+
+var ProviderMap = map[uint8]string{
+	ProviderDummy:        _Dummy,
+	ProviderWebHook:      _WebHook,
+	ProviderCloudflare:   _Cloudflare,
+	ProviderTencentCloud: _TencentCloud,
+}
+
+var ProviderList = []DDNSProvider{
+	{
+		Name: _Dummy,
+		ID:   ProviderDummy,
+	},
+	{
+		Name:         _Cloudflare,
+		ID:           ProviderCloudflare,
+		AccessSecret: true,
+	},
+	{
+		Name:         _TencentCloud,
+		ID:           ProviderTencentCloud,
+		AccessID:     true,
+		AccessSecret: true,
+	},
+	// Least frequently used, always place this at the end
+	{
+		Name:               _WebHook,
+		ID:                 ProviderWebHook,
+		AccessID:           true,
+		AccessSecret:       true,
+		WebhookURL:         true,
+		WebhookMethod:      true,
+		WebhookRequestType: true,
+		WebhookRequestBody: true,
+		WebhookHeaders:     true,
+	},
+}
+
+type DDNSProfile struct {
+	Common
+	EnableIPv4         *bool
+	EnableIPv6         *bool
+	MaxRetries         uint64
+	Name               string
+	Provider           uint8
+	AccessID           string
+	AccessSecret       string
+	WebhookURL         string
+	WebhookMethod      uint8
+	WebhookRequestType uint8
+	WebhookRequestBody string
+	WebhookHeaders     string
+
+	Domains    []string `gorm:"-"`
+	DomainsRaw string
+}
+
+func (d DDNSProfile) TableName() string {
+	return "ddns"
+}
+
+func (d *DDNSProfile) AfterFind(tx *gorm.DB) error {
+	if d.DomainsRaw != "" {
+		d.Domains = strings.Split(d.DomainsRaw, ",")
+	}
+	return nil
+}
+
+type DDNSProvider struct {
+	Name               string
+	ID                 uint8
+	AccessID           bool
+	AccessSecret       bool
+	WebhookURL         bool
+	WebhookMethod      bool
+	WebhookRequestType bool
+	WebhookRequestBody bool
+	WebhookHeaders     bool
+}

model/monitor.go

@@ -13,7 +13,7 @@ import (
 
 const (
 	_ = iota
-	TaskTypeHTTPGET
+	TaskTypeHTTPGet
 	TaskTypeICMPPing
 	TaskTypeTCPPing
 	TaskTypeCommand
@@ -22,6 +22,8 @@ const (
 	TaskTypeKeepalive
 	TaskTypeTerminalGRPC
 	TaskTypeNAT
+	TaskTypeReportHostInfo
+	TaskTypeFM
 )
 
 type TerminalTask struct {
@@ -33,6 +35,10 @@ type TaskNAT struct {
 	Host     string
 }
 
+type TaskFM struct {
+	StreamID string
+}
+
 const (
 	MonitorCoverAll = iota
 	MonitorCoverIgnoreAll

model/notification.go

@@ -71,8 +71,8 @@ func (ns *NotificationServerBundle) reqBody(message string) (string, error) {
 			return string(msgBytes)[1 : len(msgBytes)-1]
 		}), nil
 	case NotificationRequestTypeForm:
-		var data map[string]string
+		data, err := utils.GjsonParseStringMap(n.RequestBody)
-		if err := utils.Json.Unmarshal([]byte(n.RequestBody), &data); err != nil {
+		if err != nil {
 			return "", err
 		}
 		params := url.Values{}
@@ -99,8 +99,8 @@ func (n *Notification) setRequestHeader(req *http.Request) error {
 	if n.RequestHeader == "" {
 		return nil
 	}
-	var m map[string]string
+	m, err := utils.GjsonParseStringMap(n.RequestHeader)
-	if err := utils.Json.Unmarshal([]byte(n.RequestHeader), &m); err != nil {
+	if err != nil {
 		return err
 	}
 	for k, v := range m {
@@ -170,14 +170,23 @@ func (ns *NotificationServerBundle) replaceParamsInString(str string, message st
 
 	if ns.Server != nil {
 		str = strings.ReplaceAll(str, "#SERVER.NAME#", mod(ns.Server.Name))
+		str = strings.ReplaceAll(str, "#SERVER.ID#", mod(fmt.Sprintf("%d", ns.Server.ID)))
 		str = strings.ReplaceAll(str, "#SERVER.CPU#", mod(fmt.Sprintf("%f", ns.Server.State.CPU)))
 		str = strings.ReplaceAll(str, "#SERVER.MEM#", mod(fmt.Sprintf("%d", ns.Server.State.MemUsed)))
 		str = strings.ReplaceAll(str, "#SERVER.SWAP#", mod(fmt.Sprintf("%d", ns.Server.State.SwapUsed)))
 		str = strings.ReplaceAll(str, "#SERVER.DISK#", mod(fmt.Sprintf("%d", ns.Server.State.DiskUsed)))
+		str = strings.ReplaceAll(str, "#SERVER.MEMUSED#", mod(fmt.Sprintf("%d", ns.Server.State.MemUsed)))
+		str = strings.ReplaceAll(str, "#SERVER.SWAPUSED#", mod(fmt.Sprintf("%d", ns.Server.State.SwapUsed)))
+		str = strings.ReplaceAll(str, "#SERVER.DISKUSED#", mod(fmt.Sprintf("%d", ns.Server.State.DiskUsed)))
+		str = strings.ReplaceAll(str, "#SERVER.MEMTOTAL#", mod(fmt.Sprintf("%d", ns.Server.Host.MemTotal)))
+		str = strings.ReplaceAll(str, "#SERVER.SWAPTOTAL#", mod(fmt.Sprintf("%d", ns.Server.Host.SwapTotal)))
+		str = strings.ReplaceAll(str, "#SERVER.DISKTOTAL#", mod(fmt.Sprintf("%d", ns.Server.Host.DiskTotal)))
 		str = strings.ReplaceAll(str, "#SERVER.NETINSPEED#", mod(fmt.Sprintf("%d", ns.Server.State.NetInSpeed)))
 		str = strings.ReplaceAll(str, "#SERVER.NETOUTSPEED#", mod(fmt.Sprintf("%d", ns.Server.State.NetOutSpeed)))
 		str = strings.ReplaceAll(str, "#SERVER.TRANSFERIN#", mod(fmt.Sprintf("%d", ns.Server.State.NetInTransfer)))
 		str = strings.ReplaceAll(str, "#SERVER.TRANSFEROUT#", mod(fmt.Sprintf("%d", ns.Server.State.NetOutTransfer)))
+		str = strings.ReplaceAll(str, "#SERVER.NETINTRANSFER#", mod(fmt.Sprintf("%d", ns.Server.State.NetInTransfer)))
+		str = strings.ReplaceAll(str, "#SERVER.NETOUTTRANSFER#", mod(fmt.Sprintf("%d", ns.Server.State.NetOutTransfer)))
 		str = strings.ReplaceAll(str, "#SERVER.LOAD1#", mod(fmt.Sprintf("%f", ns.Server.State.Load1)))
 		str = strings.ReplaceAll(str, "#SERVER.LOAD5#", mod(fmt.Sprintf("%f", ns.Server.State.Load5)))
 		str = strings.ReplaceAll(str, "#SERVER.LOAD15#", mod(fmt.Sprintf("%f", ns.Server.State.Load15)))

model/notification_test.go

@@ -72,11 +72,11 @@ func execCase(t *testing.T, item testSt) {
 			UdpConnCount:   0,
 			ProcessCount:   0,
 		},
-		LastActive:            time.Time{},
+		LastActive:              time.Time{},
-		TaskClose:             nil,
+		TaskClose:               nil,
-		TaskStream:            nil,
+		TaskStream:              nil,
-		PrevHourlyTransferIn:  0,
+		PrevTransferInSnapshot:  0,
-		PrevHourlyTransferOut: 0,
+		PrevTransferOutSnapshot: 0,
 	}
 	ns := NotificationServerBundle{
 		Notification: &n,

model/rule.go

@@ -1,10 +1,13 @@
 package model
 
 import (
+	"slices"
 	"strings"
 	"time"
 
 	"gorm.io/gorm"
+
+	"github.com/naiba/nezha/pkg/utils"
 )
 
 const (
@@ -42,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{} {
 	// 监控全部但是排除了此服务器
@@ -103,21 +93,21 @@ func (u *Rule) Snapshot(cycleTransferStats *CycleTransferStats, server *Server,
 			src = float64(server.LastActive.Unix())
 		}
 	case "transfer_in_cycle":
-		src = float64(server.State.NetInTransfer - uint64(server.PrevHourlyTransferIn))
+		src = float64(utils.Uint64SubInt64(server.State.NetInTransfer, server.PrevTransferInSnapshot))
 		if u.CycleInterval != 0 {
 			var res NResult
 			db.Model(&Transfer{}).Select("SUM(`in`) AS n").Where("datetime(`created_at`) >= datetime(?) AND server_id = ?", u.GetTransferDurationStart().UTC(), server.ID).Scan(&res)
 			src += float64(res.N)
 		}
 	case "transfer_out_cycle":
-		src = float64(server.State.NetOutTransfer - uint64(server.PrevHourlyTransferOut))
+		src = float64(utils.Uint64SubInt64(server.State.NetOutTransfer, server.PrevTransferOutSnapshot))
 		if u.CycleInterval != 0 {
 			var res NResult
 			db.Model(&Transfer{}).Select("SUM(`out`) AS n").Where("datetime(`created_at`) >= datetime(?) AND server_id = ?", u.GetTransferDurationStart().UTC(), server.ID).Scan(&res)
 			src += float64(res.N)
 		}
 	case "transfer_all_cycle":
-		src = float64(server.State.NetOutTransfer - uint64(server.PrevHourlyTransferOut) + server.State.NetInTransfer - uint64(server.PrevHourlyTransferIn))
+		src = float64(utils.Uint64SubInt64(server.State.NetOutTransfer, server.PrevTransferOutSnapshot) + utils.Uint64SubInt64(server.State.NetInTransfer, server.PrevTransferInSnapshot))
 		if u.CycleInterval != 0 {
 			var res NResult
 			db.Model(&Transfer{}).Select("SUM(`in`+`out`) AS n").Where("datetime(`created_at`) >= datetime(?) AND server_id = ?", u.GetTransferDurationStart().UTC(), server.ID).Scan(&res)
@@ -143,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

@@ -3,35 +3,39 @@ package model
 import (
 	"fmt"
 	"html/template"
+	"log"
+	"sync"
 	"time"
 
 	"github.com/naiba/nezha/pkg/utils"
 	pb "github.com/naiba/nezha/proto"
+	"gorm.io/gorm"
 )
 
 type Server struct {
 	Common
 	Name         string
-	Tag          string // 分组名
+	Tag          string   // 分组名
-	Secret       string `gorm:"uniqueIndex" json:"-"`
+	Secret       string   `gorm:"uniqueIndex" json:"-"`
-	Note         string `json:"-"` // 管理员可见备注
+	Note         string   `json:"-"`                    // 管理员可见备注
-	DisplayIndex int    // 展示排序，越大越靠前
+	PublicNote   string   `json:"PublicNote,omitempty"` // 公开备注
-	HideForGuest bool   // 对游客隐藏
+	DisplayIndex int      // 展示排序，越大越靠前
-	EnableDDNS   bool   // 是否启用DDNS 未在配置文件中启用DDNS 或 DDNS检查时间为0时此项无效
+	HideForGuest bool     // 对游客隐藏
-	EnableIPv4   bool   // 是否启用DDNS IPv4
+	EnableDDNS   bool     // 启用DDNS
-	EnableIpv6   bool   // 是否启用DDNS IPv6
+	DDNSProfiles []uint64 `gorm:"-" json:"-"` // DDNS配置
-	DDNSDomain   string // DDNS中的前缀 如基础域名为abc.oracle DDNSName为mjj 就会把mjj.abc.oracle解析服务器IP 为空则停用
+
-	DDNSProfile  string // DDNS配置
+	DDNSProfilesRaw string `gorm:"default:'[]';column:ddns_profiles_raw" json:"-"`
 
 	Host       *Host      `gorm:"-"`
 	State      *HostState `gorm:"-"`
 	LastActive time.Time  `gorm:"-"`
 
-	TaskClose  chan error                        `gorm:"-" json:"-"`
+	TaskClose     chan error                        `gorm:"-" json:"-"`
-	TaskStream pb.NezhaService_RequestTaskServer `gorm:"-" json:"-"`
+	TaskCloseLock *sync.Mutex                       `gorm:"-" json:"-"`
+	TaskStream    pb.NezhaService_RequestTaskServer `gorm:"-" json:"-"`
 
-	PrevHourlyTransferIn  int64 `gorm:"-" json:"-"` // 上次数据点时的入站使用量
+	PrevTransferInSnapshot  int64 `gorm:"-" json:"-"` // 上次数据点时的入站使用量
-	PrevHourlyTransferOut int64 `gorm:"-" json:"-"` // 上次数据点时的出站使用量
+	PrevTransferOutSnapshot int64 `gorm:"-" json:"-"` // 上次数据点时的出站使用量
 }
 
 func (s *Server) CopyFromRunningServer(old *Server) {
@@ -39,9 +43,20 @@ func (s *Server) CopyFromRunningServer(old *Server) {
 	s.State = old.State
 	s.LastActive = old.LastActive
 	s.TaskClose = old.TaskClose
+	s.TaskCloseLock = old.TaskCloseLock
 	s.TaskStream = old.TaskStream
-	s.PrevHourlyTransferIn = old.PrevHourlyTransferIn
+	s.PrevTransferInSnapshot = old.PrevTransferInSnapshot
-	s.PrevHourlyTransferOut = old.PrevHourlyTransferOut
+	s.PrevTransferOutSnapshot = old.PrevTransferOutSnapshot
+}
+
+func (s *Server) AfterFind(tx *gorm.DB) error {
+	if s.DDNSProfilesRaw != "" {
+		if err := utils.Json.Unmarshal([]byte(s.DDNSProfilesRaw), &s.DDNSProfiles); err != nil {
+			log.Println("NEZHA>> Server.AfterFind:", err)
+			return nil
+		}
+	}
+	return nil
 }
 
 func boolToString(b bool) string {
@@ -51,12 +66,12 @@ 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)
+	ddnsProfilesRaw, _ := utils.Json.Marshal(s.DDNSProfilesRaw)
-	ddnsProfile, _ := utils.Json.Marshal(s.DDNSProfile)
+	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}`, s.ID, name, secret, s.DisplayIndex, tag, note, boolToString(s.HideForGuest), boolToString(s.EnableDDNS), boolToString(s.EnableIPv4), boolToString(s.EnableIpv6), ddnsDomain, ddnsProfile)) // #nosec
+	return template.JS(fmt.Sprintf(`{"ID":%d,"Name":%s,"Secret":%s,"DisplayIndex":%d,"Tag":%s,"Note":%s,"HideForGuest": %s,"EnableDDNS": %s,"DDNSProfilesRaw": %s,"PublicNote": %s}`, s.ID, name, secret, s.DisplayIndex, tag, note, boolToString(s.HideForGuest), boolToString(s.EnableDDNS), ddnsProfilesRaw, 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

@@ -1,177 +0,0 @@
-package ddns
-
-import (
-	"bytes"
-	"encoding/json"
-	"fmt"
-	"io"
-	"log"
-	"net/http"
-)
-
-type ProviderCloudflare struct {
-	Secret string
-}
-
-func (provider *ProviderCloudflare) UpdateDomain(domainConfig *DomainConfig) bool {
-	if domainConfig == nil {
-		return false
-	}
-
-	zoneID, err := provider.getZoneID(domainConfig.FullDomain)
-	if err != nil {
-		log.Printf("无法获取 zone ID: %s\n", err)
-		return false
-	}
-
-	// 当IPv4和IPv6同时成功才算作成功
-	var resultV4 = true
-	var resultV6 = true
-	if domainConfig.EnableIPv4 {
-		if !provider.addDomainRecord(zoneID, domainConfig, true) {
-			resultV4 = false
-		}
-	}
-
-	if domainConfig.EnableIpv6 {
-		if !provider.addDomainRecord(zoneID, domainConfig, false) {
-			resultV6 = false
-		}
-	}
-
-	return resultV4 && resultV6
-}
-
-func (provider *ProviderCloudflare) addDomainRecord(zoneID string, domainConfig *DomainConfig, isIpv4 bool) bool {
-	record, err := provider.findDNSRecord(zoneID, domainConfig.FullDomain, isIpv4)
-	if err != nil {
-		log.Printf("查找 DNS 记录时出错: %s\n", err)
-		return false
-	}
-
-	if record == nil {
-		// 添加 DNS 记录
-		return provider.createDNSRecord(zoneID, domainConfig, isIpv4)
-	} else {
-		// 更新 DNS 记录
-		return provider.updateDNSRecord(zoneID, record["id"].(string), domainConfig, isIpv4)
-	}
-}
-
-func (provider *ProviderCloudflare) getZoneID(domain string) (string, error) {
-	_, realDomain := SplitDomain(domain)
-	url := fmt.Sprintf("https://api.cloudflare.com/client/v4/zones?name=%s", realDomain)
-	body, err := provider.sendRequest("GET", url, nil)
-	if err != nil {
-		return "", err
-	}
-
-	var res map[string]interface{}
-	err = json.Unmarshal(body, &res)
-	if err != nil {
-		return "", err
-	}
-
-	result := res["result"].([]interface{})
-	if len(result) > 0 {
-		zoneID := result[0].(map[string]interface{})["id"].(string)
-		return zoneID, nil
-	}
-
-	return "", fmt.Errorf("找不到 Zone ID")
-}
-
-func (provider *ProviderCloudflare) findDNSRecord(zoneID string, domain string, isIPv4 bool) (map[string]interface{}, error) {
-	var ipType = "A"
-	if !isIPv4 {
-		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)
-	if err != nil {
-		return nil, err
-	}
-
-	var res map[string]interface{}
-	err = json.Unmarshal(body, &res)
-	if err != nil {
-		return nil, err
-	}
-
-	result := res["result"].([]interface{})
-	if len(result) > 0 {
-		return result[0].(map[string]interface{}), nil
-	}
-
-	return nil, nil // 没有找到 DNS 记录
-}
-
-func (provider *ProviderCloudflare) createDNSRecord(zoneID string, domainConfig *DomainConfig, isIPv4 bool) bool {
-	var ipType = "A"
-	var ipAddr = domainConfig.Ipv4Addr
-	if !isIPv4 {
-		ipType = "AAAA"
-		ipAddr = domainConfig.Ipv6Addr
-	}
-	url := fmt.Sprintf("https://api.cloudflare.com/client/v4/zones/%s/dns_records", zoneID)
-	data := map[string]interface{}{
-		"type":    ipType,
-		"name":    domainConfig.FullDomain,
-		"content": ipAddr,
-		"ttl":     60,
-		"proxied": false,
-	}
-	jsonData, _ := json.Marshal(data)
-	_, err := provider.sendRequest("POST", url, jsonData)
-	return err == nil
-}
-
-func (provider *ProviderCloudflare) updateDNSRecord(zoneID string, recordID string, domainConfig *DomainConfig, isIPv4 bool) bool {
-	var ipType = "A"
-	var ipAddr = domainConfig.Ipv4Addr
-	if !isIPv4 {
-		ipType = "AAAA"
-		ipAddr = domainConfig.Ipv6Addr
-	}
-	url := fmt.Sprintf("https://api.cloudflare.com/client/v4/zones/%s/dns_records/%s", zoneID, recordID)
-	data := map[string]interface{}{
-		"type":    ipType,
-		"name":    domainConfig.FullDomain,
-		"content": ipAddr,
-		"ttl":     60,
-		"proxied": false,
-	}
-	jsonData, _ := json.Marshal(data)
-	_, err := provider.sendRequest("PATCH", url, jsonData)
-	return err == nil
-}
-
-// 以下为辅助方法，如发送 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("Content-Type", "application/json")
-
-	resp, err := client.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())
-		}
-	}(resp.Body)
-
-	body, err := io.ReadAll(resp.Body)
-	if err != nil {
-		return nil, err
-	}
-
-	return body, nil
-}

pkg/ddns/ddns.go

@@ -1,14 +1,126 @@
 package ddns
 
-type DomainConfig struct {
+import (
-	EnableIPv4 bool
+	"context"
-	EnableIpv6 bool
+	"fmt"
-	FullDomain string
+	"log"
-	Ipv4Addr   string
+	"time"
-	Ipv6Addr   string
+
+	"github.com/libdns/libdns"
+	"github.com/miekg/dns"
+
+	"github.com/naiba/nezha/model"
+	"github.com/naiba/nezha/pkg/utils"
+)
+
+var dnsTimeOut = 10 * time.Second
+
+type IP struct {
+	Ipv4Addr string
+	Ipv6Addr string
 }
 
-type Provider interface {
+type Provider struct {
-	// UpdateDomain Return is updated
+	ctx        context.Context
-	UpdateDomain(domainConfig *DomainConfig) bool
+	ipAddr     string
+	recordType string
+	domain     string
+	prefix     string
+	zone       string
+
+	DDNSProfile *model.DDNSProfile
+	IPAddrs     *IP
+	Setter      libdns.RecordSetter
+}
+
+func (provider *Provider) UpdateDomain(ctx context.Context) {
+	provider.ctx = ctx
+	for _, domain := range provider.DDNSProfile.Domains {
+		for retries := 0; retries < int(provider.DDNSProfile.MaxRetries); retries++ {
+			provider.domain = domain
+			log.Printf("NEZHA>> 正在尝试更新域名(%s)DDNS(%d/%d)", provider.domain, retries+1, provider.DDNSProfile.MaxRetries)
+			if err := provider.updateDomain(); err != nil {
+				log.Printf("NEZHA>> 尝试更新域名(%s)DDNS失败: %v", provider.domain, err)
+			} else {
+				log.Printf("NEZHA>> 尝试更新域名(%s)DDNS成功", provider.domain)
+				break
+			}
+		}
+	}
+}
+
+func (provider *Provider) updateDomain() error {
+	var err error
+	provider.prefix, provider.zone, err = splitDomainSOA(provider.domain)
+	if err != nil {
+		return err
+	}
+
+	// 当IPv4和IPv6同时成功才算作成功
+	if *provider.DDNSProfile.EnableIPv4 {
+		provider.recordType = getRecordString(true)
+		provider.ipAddr = provider.IPAddrs.Ipv4Addr
+		if err = provider.addDomainRecord(); err != nil {
+			return err
+		}
+	}
+
+	if *provider.DDNSProfile.EnableIPv6 {
+		provider.recordType = getRecordString(false)
+		provider.ipAddr = provider.IPAddrs.Ipv6Addr
+		if err = provider.addDomainRecord(); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
+func (provider *Provider) addDomainRecord() error {
+	_, err := provider.Setter.SetRecords(provider.ctx, provider.zone,
+		[]libdns.Record{
+			{
+				Type:  provider.recordType,
+				Name:  provider.prefix,
+				Value: provider.ipAddr,
+				TTL:   time.Minute,
+			},
+		})
+	return err
+}
+
+func splitDomainSOA(domain string) (prefix string, zone string, err error) {
+	c := &dns.Client{Timeout: dnsTimeOut}
+
+	domain += "."
+	indexes := dns.Split(domain)
+
+	var r *dns.Msg
+	for _, idx := range indexes {
+		m := new(dns.Msg)
+		m.SetQuestion(domain[idx:], dns.TypeSOA)
+
+		for _, server := range utils.DNSServers {
+			r, _, err = c.Exchange(m, server)
+			if err != nil {
+				return
+			}
+			if len(r.Answer) > 0 {
+				if soa, ok := r.Answer[0].(*dns.SOA); ok {
+					zone = soa.Hdr.Name
+					prefix = libdns.RelativeName(domain, zone)
+					return
+				}
+			}
+		}
+	}
+
+	return "", "", fmt.Errorf("SOA record not found for domain: %s", domain)
+}
+
+func getRecordString(isIpv4 bool) string {
+	if isIpv4 {
+		return "A"
+	}
+	return "AAAA"
 }

pkg/ddns/ddns_test.go

@@ -0,0 +1,49 @@
+package ddns
+
+import (
+	"os"
+	"testing"
+)
+
+type testSt struct {
+	domain string
+	zone   string
+	prefix string
+}
+
+func TestSplitDomainSOA(t *testing.T) {
+	if ci := os.Getenv("CI"); ci != "" { // skip if test on CI
+		return
+	}
+
+	cases := []testSt{
+		{
+			domain: "www.example.co.uk",
+			zone:   "example.co.uk.",
+			prefix: "www",
+		},
+		{
+			domain: "abc.example.com",
+			zone:   "example.com.",
+			prefix: "abc",
+		},
+		{
+			domain: "example.com",
+			zone:   "example.com.",
+			prefix: "",
+		},
+	}
+
+	for _, c := range cases {
+		prefix, zone, err := splitDomainSOA(c.domain)
+		if err != nil {
+			t.Fatalf("Error: %s", err)
+		}
+		if prefix != c.prefix {
+			t.Fatalf("Expected prefix %s, but got %s", c.prefix, prefix)
+		}
+		if zone != c.zone {
+			t.Fatalf("Expected zone %s, but got %s", c.zone, zone)
+		}
+	}
+}

pkg/ddns/dummy.go

@@ -1,7 +0,0 @@
-package ddns
-
-type ProviderDummy struct{}
-
-func (provider *ProviderDummy) UpdateDomain(domainConfig *DomainConfig) bool {
-	return false
-}

pkg/ddns/dummy/dummy.go

@@ -0,0 +1,16 @@
+package dummy
+
+import (
+	"context"
+
+	"github.com/libdns/libdns"
+)
+
+// Internal use
+type Provider struct {
+}
+
+func (provider *Provider) SetRecords(ctx context.Context, zone string,
+	recs []libdns.Record) ([]libdns.Record, error) {
+	return recs, 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

@@ -1,228 +0,0 @@
-package ddns
-
-import (
-	"bytes"
-	"crypto/hmac"
-	"crypto/sha256"
-	"encoding/hex"
-	"encoding/json"
-	"io"
-	"log"
-	"net/http"
-	"strconv"
-	"strings"
-	"time"
-)
-
-const (
-	url = "https://dnspod.tencentcloudapi.com"
-)
-
-type ProviderTencentCloud struct {
-	SecretID  string
-	SecretKey string
-}
-
-func (provider *ProviderTencentCloud) UpdateDomain(domainConfig *DomainConfig) bool {
-	if domainConfig == nil {
-		return false
-	}
-
-	// 当IPv4和IPv6同时成功才算作成功
-	var resultV4 = true
-	var resultV6 = true
-	if domainConfig.EnableIPv4 {
-		if !provider.addDomainRecord(domainConfig, true) {
-			resultV4 = false
-		}
-	}
-
-	if domainConfig.EnableIpv6 {
-		if !provider.addDomainRecord(domainConfig, false) {
-			resultV6 = false
-		}
-	}
-
-	return resultV4 && resultV6
-}
-
-func (provider *ProviderTencentCloud) addDomainRecord(domainConfig *DomainConfig, isIpv4 bool) bool {
-	record, err := provider.findDNSRecord(domainConfig.FullDomain, isIpv4)
-	if err != nil {
-		log.Printf("查找 DNS 记录时出错: %s\n", err)
-		return false
-	}
-
-	if errResponse, ok := record["Error"].(map[string]interface{}); ok {
-		if errCode, ok := errResponse["Code"].(string); ok && errCode == "ResourceNotFound.NoDataOfRecord" { // 没有找到 DNS 记录
-			// 添加 DNS 记录
-			return provider.createDNSRecord(domainConfig.FullDomain, domainConfig, isIpv4)
-		} else {
-			log.Printf("查询 DNS 记录时出错，错误代码为: %s\n", errCode)
-		}
-	}
-
-	// 默认情况下更新 DNS 记录
-	return provider.updateDNSRecord(domainConfig.FullDomain, record["RecordList"].([]interface{})[0].(map[string]interface{})["RecordId"].(float64), domainConfig, isIpv4)
-}
-
-func (provider *ProviderTencentCloud) findDNSRecord(domain string, isIPv4 bool) (map[string]interface{}, error) {
-	var ipType = "A"
-	if !isIPv4 {
-		ipType = "AAAA"
-	}
-	_, realDomain := SplitDomain(domain)
-	prefix, _ := SplitDomain(domain)
-	data := map[string]interface{}{
-		"RecordType": ipType,
-		"Domain":     realDomain,
-		"RecordLine": "默认",
-		"Subdomain":  prefix,
-	}
-	jsonData, _ := json.Marshal(data)
-	body, err := provider.sendRequest("DescribeRecordList", jsonData)
-	if err != nil {
-		return nil, err
-	}
-
-	var res map[string]interface{}
-	err = json.Unmarshal(body, &res)
-	if err != nil {
-		return nil, err
-	}
-
-	result := res["Response"].(map[string]interface{})
-	return result, nil
-}
-
-func (provider *ProviderTencentCloud) createDNSRecord(domain string, domainConfig *DomainConfig, isIPv4 bool) bool {
-	var ipType = "A"
-	var ipAddr = domainConfig.Ipv4Addr
-	if !isIPv4 {
-		ipType = "AAAA"
-		ipAddr = domainConfig.Ipv6Addr
-	}
-	_, realDomain := SplitDomain(domain)
-	prefix, _ := SplitDomain(domain)
-	data := map[string]interface{}{
-		"RecordType": ipType,
-		"RecordLine": "默认",
-		"Domain":     realDomain,
-		"SubDomain":  prefix,
-		"Value":      ipAddr,
-		"TTL":        600,
-	}
-	jsonData, _ := json.Marshal(data)
-	_, err := provider.sendRequest("CreateRecord", jsonData)
-	return err == nil
-}
-
-func (provider *ProviderTencentCloud) updateDNSRecord(domain string, recordID float64, domainConfig *DomainConfig, isIPv4 bool) bool {
-	var ipType = "A"
-	var ipAddr = domainConfig.Ipv4Addr
-	if !isIPv4 {
-		ipType = "AAAA"
-		ipAddr = domainConfig.Ipv6Addr
-	}
-	_, realDomain := SplitDomain(domain)
-	prefix, _ := SplitDomain(domain)
-	data := map[string]interface{}{
-		"RecordType": ipType,
-		"RecordLine": "默认",
-		"Domain":     realDomain,
-		"SubDomain":  prefix,
-		"Value":      ipAddr,
-		"TTL":        600,
-		"RecordId":   recordID,
-	}
-	jsonData, _ := json.Marshal(data)
-	_, err := provider.sendRequest("ModifyRecord", jsonData)
-	return err == nil
-}
-
-// 以下为辅助方法，如发送 HTTP 请求等
-func (provider *ProviderTencentCloud) sendRequest(action string, data []byte) ([]byte, error) {
-	client := &http.Client{}
-	req, err := http.NewRequest("POST", url, bytes.NewBuffer(data))
-	if err != nil {
-		return nil, err
-	}
-
-	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))
-	resp, err := client.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())
-		}
-	}(resp.Body)
-
-	body, err := io.ReadAll(resp.Body)
-	if err != nil {
-		return nil, err
-	}
-
-	return body, nil
-}
-
-// https://github.com/jeessy2/ddns-go/blob/master/util/tencent_cloud_signer.go
-
-func (provider *ProviderTencentCloud) sha256hex(s string) string {
-	b := sha256.Sum256([]byte(s))
-	return hex.EncodeToString(b[:])
-}
-
-func (provider *ProviderTencentCloud) hmacsha256(s, key string) string {
-	hashed := hmac.New(sha256.New, []byte(key))
-	hashed.Write([]byte(s))
-	return string(hashed.Sum(nil))
-}
-
-func (provider *ProviderTencentCloud) WriteString(strs ...string) string {
-	var b strings.Builder
-	for _, str := range strs {
-		b.WriteString(str)
-	}
-
-	return b.String()
-}
-
-func (provider *ProviderTencentCloud) signRequest(secretId string, secretKey string, r *http.Request, action string, payload string) {
-	algorithm := "TC3-HMAC-SHA256"
-	service := "dnspod"
-	host := provider.WriteString(service, ".tencentcloudapi.com")
-	timestamp := time.Now().Unix()
-	timestampStr := strconv.FormatInt(timestamp, 10)
-
-	// 步骤 1：拼接规范请求串
-	canonicalHeaders := provider.WriteString("content-type:application/json\nhost:", host, "\nx-tc-action:", strings.ToLower(action), "\n")
-	signedHeaders := "content-type;host;x-tc-action"
-	hashedRequestPayload := provider.sha256hex(payload)
-	canonicalRequest := provider.WriteString("POST\n/\n\n", canonicalHeaders, "\n", signedHeaders, "\n", hashedRequestPayload)
-
-	// 步骤 2：拼接待签名字符串
-	date := time.Unix(timestamp, 0).UTC().Format("2006-01-02")
-	credentialScope := provider.WriteString(date, "/", service, "/tc3_request")
-	hashedCanonicalRequest := provider.sha256hex(canonicalRequest)
-	string2sign := provider.WriteString(algorithm, "\n", timestampStr, "\n", credentialScope, "\n", hashedCanonicalRequest)
-
-	// 步骤 3：计算签名
-	secretDate := provider.hmacsha256(date, provider.WriteString("TC3", secretKey))
-	secretService := provider.hmacsha256(service, secretDate)
-	secretSigning := provider.hmacsha256("tc3_request", secretService)
-	signature := hex.EncodeToString([]byte(provider.hmacsha256(string2sign, secretSigning)))
-
-	// 步骤 4：拼接 Authorization
-	authorization := provider.WriteString(algorithm, " Credential=", secretId, "/", credentialScope, ", SignedHeaders=", signedHeaders, ", Signature=", signature)
-
-	r.Header.Add("Authorization", authorization)
-	r.Header.Set("Host", host)
-	r.Header.Set("X-TC-Action", action)
-	r.Header.Add("X-TC-Timestamp", timestampStr)
-}

pkg/ddns/webhook.go

@@ -1,59 +0,0 @@
-package ddns
-
-import (
-	"bytes"
-	"log"
-	"net/http"
-	"strings"
-)
-
-type ProviderWebHook struct {
-	URL           string
-	RequestMethod string
-	RequestBody   string
-	RequestHeader string
-}
-
-func (provider *ProviderWebHook) UpdateDomain(domainConfig *DomainConfig) bool {
-	if domainConfig == nil {
-		return false
-	}
-
-	if domainConfig.FullDomain == "" {
-		log.Println("NEZHA>> Failed to update an empty domain")
-		return false
-	}
-	updated := false
-	client := &http.Client{}
-	if domainConfig.EnableIPv4 && domainConfig.Ipv4Addr != "" {
-		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")
-		body := provider.FormatWebhookString(provider.RequestBody, domainConfig, "ipv6")
-		header := provider.FormatWebhookString(provider.RequestHeader, domainConfig, "ipv6")
-		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
-			}
-		}
-	}
-	return updated
-}

pkg/ddns/webhook/webhook.go

@@ -0,0 +1,180 @@
+package webhook
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"net/http"
+	"net/url"
+	"strings"
+
+	"github.com/libdns/libdns"
+	"github.com/naiba/nezha/model"
+	"github.com/naiba/nezha/pkg/utils"
+)
+
+const (
+	_ = iota
+	methodGET
+	methodPOST
+	methodPATCH
+	methodDELETE
+	methodPUT
+)
+
+const (
+	_ = iota
+	requestTypeJSON
+	requestTypeForm
+)
+
+var requestTypes = map[uint8]string{
+	methodGET:    "GET",
+	methodPOST:   "POST",
+	methodPATCH:  "PATCH",
+	methodDELETE: "DELETE",
+	methodPUT:    "PUT",
+}
+
+// Internal use
+type Provider struct {
+	ipAddr     string
+	ipType     string
+	recordType string
+	domain     string
+
+	DDNSProfile *model.DDNSProfile
+}
+
+func (provider *Provider) SetRecords(ctx context.Context, zone string,
+	recs []libdns.Record) ([]libdns.Record, error) {
+	for _, rec := range recs {
+		provider.recordType = rec.Type
+		provider.ipType = recordToIPType(provider.recordType)
+		provider.ipAddr = rec.Value
+		provider.domain = fmt.Sprintf("%s.%s", rec.Name, strings.TrimSuffix(zone, "."))
+
+		req, err := provider.prepareRequest(ctx)
+		if err != nil {
+			return nil, fmt.Errorf("failed to update a domain: %s. Cause by: %v", provider.domain, err)
+		}
+		if _, err := utils.HttpClient.Do(req); err != nil {
+			return nil, fmt.Errorf("failed to update a domain: %s. Cause by: %v", provider.domain, err)
+		}
+	}
+
+	return recs, nil
+}
+
+func (provider *Provider) prepareRequest(ctx context.Context) (*http.Request, error) {
+	u, err := provider.reqUrl()
+	if err != nil {
+		return nil, err
+	}
+
+	body, err := provider.reqBody()
+	if err != nil {
+		return nil, err
+	}
+
+	headers, err := utils.GjsonParseStringMap(
+		provider.formatWebhookString(provider.DDNSProfile.WebhookHeaders))
+	if err != nil {
+		return nil, err
+	}
+
+	req, err := http.NewRequestWithContext(ctx, requestTypes[provider.DDNSProfile.WebhookMethod], u.String(), strings.NewReader(body))
+	if err != nil {
+		return nil, err
+	}
+
+	provider.setContentType(req)
+
+	for k, v := range headers {
+		req.Header.Set(k, v)
+	}
+
+	return req, nil
+}
+
+func (provider *Provider) setContentType(req *http.Request) {
+	if provider.DDNSProfile.WebhookMethod == methodGET {
+		return
+	}
+	if provider.DDNSProfile.WebhookRequestType == requestTypeForm {
+		req.Header.Set("Content-Type", "application/x-www-form-urlencoded")
+	} else {
+		req.Header.Set("Content-Type", "application/json")
+	}
+}
+
+func (provider *Provider) reqUrl() (*url.URL, error) {
+	formattedUrl := strings.ReplaceAll(provider.DDNSProfile.WebhookURL, "#", "%23")
+
+	u, err := url.Parse(formattedUrl)
+	if err != nil {
+		return nil, err
+	}
+
+	// Only handle queries here
+	q := u.Query()
+	for p, vals := range q {
+		for n, v := range vals {
+			vals[n] = provider.formatWebhookString(v)
+		}
+		q[p] = vals
+	}
+
+	u.RawQuery = q.Encode()
+	return u, nil
+}
+
+func (provider *Provider) reqBody() (string, error) {
+	if provider.DDNSProfile.WebhookMethod == methodGET ||
+		provider.DDNSProfile.WebhookMethod == methodDELETE {
+		return "", nil
+	}
+
+	switch provider.DDNSProfile.WebhookRequestType {
+	case requestTypeJSON:
+		return provider.formatWebhookString(provider.DDNSProfile.WebhookRequestBody), nil
+	case requestTypeForm:
+		data, err := utils.GjsonParseStringMap(provider.DDNSProfile.WebhookRequestBody)
+		if err != nil {
+			return "", err
+		}
+		params := url.Values{}
+		for k, v := range data {
+			params.Add(k, provider.formatWebhookString(v))
+		}
+		return params.Encode(), nil
+	default:
+		return "", errors.New("request type not supported")
+	}
+}
+
+func (provider *Provider) formatWebhookString(s string) string {
+	r := strings.NewReplacer(
+		"#ip#", provider.ipAddr,
+		"#domain#", provider.domain,
+		"#type#", provider.ipType,
+		"#record#", provider.recordType,
+		"#access_id#", provider.DDNSProfile.AccessID,
+		"#access_secret#", provider.DDNSProfile.AccessSecret,
+		"\r", "",
+	)
+
+	result := r.Replace(strings.TrimSpace(s))
+	return result
+}
+
+func recordToIPType(record string) string {
+	switch record {
+	case "A":
+		return "ipv4"
+	case "AAAA":
+		return "ipv6"
+	default:
+		return ""
+	}
+}

pkg/ddns/webhook/webhook_test.go

@@ -0,0 +1,116 @@
+package webhook
+
+import (
+	"context"
+	"testing"
+
+	"github.com/naiba/nezha/model"
+)
+
+var (
+	reqTypeForm = "application/x-www-form-urlencoded"
+	reqTypeJSON = "application/json"
+)
+
+type testSt struct {
+	profile           model.DDNSProfile
+	expectURL         string
+	expectBody        string
+	expectContentType string
+	expectHeader      map[string]string
+}
+
+func execCase(t *testing.T, item testSt) {
+	pw := Provider{DDNSProfile: &item.profile}
+	pw.ipAddr = "1.1.1.1"
+	pw.domain = item.profile.Domains[0]
+	pw.ipType = "ipv4"
+	pw.recordType = "A"
+	pw.DDNSProfile = &item.profile
+
+	reqUrl, err := pw.reqUrl()
+	if err != nil {
+		t.Fatalf("Error: %s", err)
+	}
+	if item.expectURL != reqUrl.String() {
+		t.Fatalf("Expected %s, but got %s", item.expectURL, reqUrl.String())
+	}
+
+	reqBody, err := pw.reqBody()
+	if err != nil {
+		t.Fatalf("Error: %s", err)
+	}
+	if item.expectBody != reqBody {
+		t.Fatalf("Expected %s, but got %s", item.expectBody, reqBody)
+	}
+
+	req, err := pw.prepareRequest(context.Background())
+	if err != nil {
+		t.Fatalf("Error: %s", err)
+	}
+
+	if item.expectContentType != req.Header.Get("Content-Type") {
+		t.Fatalf("Expected %s, but got %s", item.expectContentType, req.Header.Get("Content-Type"))
+	}
+
+	for k, v := range item.expectHeader {
+		if v != req.Header.Get(k) {
+			t.Fatalf("Expected %s, but got %s", v, req.Header.Get(k))
+		}
+	}
+}
+
+func TestWebhookRequest(t *testing.T) {
+	ipv4 := true
+
+	cases := []testSt{
+		{
+			profile: model.DDNSProfile{
+				Domains:        []string{"www.example.com"},
+				MaxRetries:     1,
+				EnableIPv4:     &ipv4,
+				WebhookURL:     "http://ddns.example.com/?ip=#ip#",
+				WebhookMethod:  methodGET,
+				WebhookHeaders: `{"ip":"#ip#","record":"#record#"}`,
+			},
+			expectURL:         "http://ddns.example.com/?ip=1.1.1.1",
+			expectContentType: "",
+			expectHeader: map[string]string{
+				"ip":     "1.1.1.1",
+				"record": "A",
+			},
+		},
+		{
+			profile: model.DDNSProfile{
+				Domains:            []string{"www.example.com"},
+				MaxRetries:         1,
+				EnableIPv4:         &ipv4,
+				WebhookURL:         "http://ddns.example.com/api",
+				WebhookMethod:      methodPOST,
+				WebhookRequestType: requestTypeJSON,
+				WebhookRequestBody: `{"ip":"#ip#","record":"#record#"}`,
+			},
+			expectURL:         "http://ddns.example.com/api",
+			expectContentType: reqTypeJSON,
+			expectBody:        `{"ip":"1.1.1.1","record":"A"}`,
+		},
+		{
+			profile: model.DDNSProfile{
+				Domains:            []string{"www.example.com"},
+				MaxRetries:         1,
+				EnableIPv4:         &ipv4,
+				WebhookURL:         "http://ddns.example.com/api",
+				WebhookMethod:      methodPOST,
+				WebhookRequestType: requestTypeForm,
+				WebhookRequestBody: `{"ip":"#ip#","record":"#record#"}`,
+			},
+			expectURL:         "http://ddns.example.com/api",
+			expectContentType: reqTypeForm,
+			expectBody:        "ip=1.1.1.1&record=A",
+		},
+	}
+
+	for _, c := range cases {
+		execCase(t, c)
+	}
+}

pkg/mygin/mygin.go

@@ -16,6 +16,7 @@ var adminPage = map[string]bool{
 	"/monitor":      true,
 	"/setting":      true,
 	"/notification": true,
+	"/ddns":         true,
 	"/nat":          true,
 	"/cron":         true,
 	"/api":          true,
@@ -26,6 +27,8 @@ func CommonEnvironment(c *gin.Context, data map[string]interface{}) gin.H {
 	data["Version"] = singleton.Version
 	data["Conf"] = singleton.Conf
 	data["Themes"] = model.Themes
+	data["CustomCode"] = singleton.Conf.Site.CustomCode
+	data["CustomCodeDashboard"] = singleton.Conf.Site.CustomCodeDashboard
 	// 是否是管理页面
 	data["IsAdminPage"] = adminPage[data["MatchedPath"].(string)]
 	// 站点标题

pkg/mygin/view_password.go

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

pkg/utils/gjson.go

@@ -0,0 +1,40 @@
+package utils
+
+import (
+	"errors"
+
+	"github.com/tidwall/gjson"
+)
+
+var (
+	ErrGjsonNotFound  = errors.New("specified path does not exist")
+	ErrGjsonWrongType = errors.New("wrong type")
+)
+
+func GjsonGet(json []byte, path string) (gjson.Result, error) {
+	result := gjson.GetBytes(json, path)
+	if !result.Exists() {
+		return result, ErrGjsonNotFound
+	}
+
+	return result, nil
+}
+
+func GjsonParseStringMap(jsonObject string) (map[string]string, error) {
+	if jsonObject == "" {
+		return nil, nil
+	}
+
+	result := gjson.Parse(jsonObject)
+	if !result.IsObject() {
+		return nil, ErrGjsonWrongType
+	}
+
+	ret := make(map[string]string)
+	result.ForEach(func(key, value gjson.Result) bool {
+		ret[key.String()] = value.String()
+		return true
+	})
+
+	return ret, nil
+}

pkg/utils/hfs.go

@@ -0,0 +1,33 @@
+package utils
+
+import (
+	"embed"
+	"io/fs"
+	"os"
+)
+
+// HybridFS combines embed.FS and os.DirFS.
+type HybridFS struct {
+	embedFS, dir fs.FS
+}
+
+func NewHybridFS(embed embed.FS, subDir string, localDir string) (*HybridFS, error) {
+	subFS, err := fs.Sub(embed, subDir)
+	if err != nil {
+		return nil, err
+	}
+
+	return &HybridFS{
+		embedFS: subFS,
+		dir:     os.DirFS(localDir),
+	}, nil
+}
+
+func (hfs *HybridFS) Open(name string) (fs.File, error) {
+	// Ensure embed files are not replaced
+	if file, err := hfs.embedFS.Open(name); err == nil {
+		return file, nil
+	}
+
+	return hfs.dir.Open(name)
+}

pkg/utils/http.go

@@ -22,6 +22,8 @@ func init() {
 			SkipVerifySSL: false,
 		}),
 	})
+
+	http.DefaultClient.Timeout = time.Minute * 10
 }
 
 type _httpTransport struct {

pkg/utils/utils.go

@@ -10,7 +10,11 @@ import (
 	jsoniter "github.com/json-iterator/go"
 )
 
-var Json = jsoniter.ConfigCompatibleWithStandardLibrary
+var (
+	Json = jsoniter.ConfigCompatibleWithStandardLibrary
+
+	DNSServers = []string{"1.1.1.1:53", "223.5.5.5:53", "[2606:4700:4700::1111]:53", "[2400:3200::1]:53"}
+)
 
 func IsWindows() bool {
 	return os.PathSeparator == '\\' && os.PathListSeparator == ';'
@@ -76,3 +80,13 @@ func GenerateRandomString(n int) (string, error) {
 	}
 	return string(ret), nil
 }
+
+func Uint64SubInt64(a uint64, b int64) uint64 {
+	if b < 0 {
+		return a + uint64(-b)
+	}
+	if a < uint64(b) {
+		return 0
+	}
+	return a - uint64(b)
+}

resource/l10n/en-US.toml

@@ -23,19 +23,19 @@ other = "Home"
 other = "Back to Homepage"
 
 [AdminPanel]
-other = "Admin Panel"
+other = "Dashboard"
 
 [Logout]
-other = "Logout"
+other = "Log out"
 
 [Login]
-other = "Login"
+other = "Log in"
 
 [ConfirmLogout]
-other = "Do you want to Logout?"
+other = "Confirm Logging Out?"
 
 [AfterLoggingOutYouHaveToLoginAgain]
-other = "You need to Login again to continue"
+other = "You will need to log in again to continue"
 
 [Cancel]
 other = "Cancel"
@@ -56,7 +56,7 @@ other = "Cron Expression"
 other = "Backup"
 
 [3amDaily]
-other = "(Daily at 3 AM)"
+other = "(At 3 AM)"
 
 [Command]
 other = "Command"
@@ -71,7 +71,7 @@ other = "Ignore All, Execute Only on Specific Servers"
 other = "Cover All, Except Specific Servers"
 
 [ExecuteByTriggerServer]
-other = "Execute on Trigger Server"
+other = "Execute on Alarmed Servers"
 
 [SpecificServers]
 other = "Specific Servers"
@@ -95,7 +95,7 @@ other = "Cron Task"
 other = "Trigger Task"
 
 [TheFormaOfTheScheduleIs]
-other = "The Cron Expression is like:"
+other = "The Cron Expression format is:"
 
 [SecondsMinutesHoursDaysMonthsWeeksSeeDetails]
 other = "Sec Min Hour Day Month Week, see details in "
@@ -104,7 +104,7 @@ other = "Sec Min Hour Day Month Week, see details in "
 other = "CRON Expression Format"
 
 [IntroductionOfCommands]
-other = "Introduction of Commands: Writing commands is similar to shell/bat scripts. It's advised not to break lines, and multiple commands can be connected with <code>&&</code> or <code>&</code>. If a command cannot be found, it might be due to <code>PATH</code> environment variable configuration issues. On <code>Linux</code> servers, you can add <code>source ~/.bashrc</code> at the beginning of the command, or use the command's absolute path."
+other = "Note on writing commands: It is similar to shell/bat scripts. but it's advised not to start a newline, and connect multiple commands with <code>&&</code> or <code>;</code>. If a command cannot be found, it is possibly due to <code>PATH</code> environment variable issues. On <code>Linux</code> servers, you can add <code>source ~/.bashrc</code> at the beginning of the command, or just use the absolute path."
 
 [AddMonitor]
 other = "Add Service Monitor"
@@ -119,7 +119,7 @@ other = "Target"
 other = "Type"
 
 [SslExpirationOrChange]
-other = "(SSL Expiration or Change)"
+other = "(Certificate Expiration and Changes)"
 
 [Duration]
 other = "Interval"
@@ -134,10 +134,10 @@ other = "Enable Failure Notification"
 other = "Failure Notification"
 
 [MaxLatency]
-other = "Max Latency (ms)"
+other = "Maximum Latency (ms)"
 
 [MinLatency]
-other = "Min Latency (ms)"
+other = "Minimum Latency (ms)"
 
 [EnableLatencyNotification]
 other = "Enable Latency Notification"
@@ -147,7 +147,7 @@ other = "Latency Notification"
 
 [IntroductionOfMonitor]
 other = """
-For type <b>HTTP-GET</b>, enter URL (with http/https, HTTPS protocol will also monitor SSL certificate);<br>
+For type <b>HTTP-GET</b>, enter URL (with http/https scheme, HTTPS protocol will also monitor SSL certificate);<br>
 For type <b>ICMP-Ping</b>, enter domain/IP without port: example.com;<br>
 For type <b>TCP-Ping</b>, enter domain/IP + port number: example.com:22"""
 
@@ -182,16 +182,16 @@ other = "Notification Trigger Mode"
 other = "Always Trigger"
 
 [ModeOnetimeTrigger]
-other = "Always Trigger"
+other = "Trigger Once"
 
 [EnableTriggerTask]
 other = "Enable Trigger Task"
 
 [FailTriggerTasks]
-other = "Tasks triggered during an alarm"
+other = "Tasks to trigger on an alarm"
 
 [RecoverTriggerTasks]
-other = "Tasks triggered during recovery"
+other = "Tasks to trigger after recovery"
 
 [Enable]
 other = "Enable"
@@ -218,7 +218,7 @@ other = "Einstein Lightspeed 1"
 other = "Display Index"
 
 [TheLargerTheNumberTheHigherThePriority]
-other = "Higher Number, Higher Priority"
+other = "Greater Number, Higher Priority"
 
 [Secret]
 other = "Secret"
@@ -226,11 +226,14 @@ other = "Secret"
 [Note]
 other = "Note"
 
+[PublicNote]
+other = "Public Note"
+
 [LinuxOneKeyInstall]
-other = "Linux One-Command Install"
+other = "Linux Installation Command"
 
 [NoDomainAlert]
-other = "Set CDN bypassed Domain/IP in setting before using this function"
+other = "Please set the IP (or a domain pointed to it) of the original server in settings"
 
 [PushSuccessfully]
 other = "Send Success Notification"
@@ -251,13 +254,13 @@ other = "Cover All"
 other = "Ignore All"
 
 [ByTrigger]
-other = "Execute by Trigger"
+other = "Alarmed Servers"
 
 [DeleteScheduledTask]
 other = "Delete Scheduled Task"
 
 [ConfirmToDeleteThisScheduledTask]
-other = "Are you sure you want to Delete?"
+other = "Confirm deletion?"
 
 [AccessDenied]
 other = "Access Denied"
@@ -278,22 +281,22 @@ other = "Don't Have an Account?"
 other = "HTTP(S)/SSL Certificate"
 
 [TCPPort]
-other = "TCP Port"
+other = "TCPing"
 
 [DeleteService]
 other = "Remove Service Monitor"
 
 [ConfirmToDeleteThisService]
-other = "Confirm to Delete This Service?"
+other = "Confirm Deleting This Service?"
 
 [DeleteNotificationMethod]
 other = "Delete Notification Method"
 
 [ConfirmToDeleteThisNotificationMethod]
-other = "Confirm to Delete This Notification Method?"
+other = "Confirm Deleting This Notification Method?"
 
 [ForceUpdate]
-other = "Force to Update"
+other = "Trigger Agent Update"
 
 [SelectAll]
 other = "Select All"
@@ -302,7 +305,7 @@ other = "Select All"
 other = "Version"
 
 [OneKeyInstall]
-other = "One-Command Install"
+other = "Installation commands"
 
 [ClickToCopy]
 other = "Click To Copy"
@@ -311,7 +314,7 @@ other = "Click To Copy"
 other = "Delete Server"
 
 [ConfirmToDeleteServer]
-other = "Confirm to Delete Server?"
+other = "Confirm Deleting This Server?"
 
 [NoServerSelected]
 other = "No Server Selected"
@@ -331,6 +334,9 @@ other = "Frontend Theme"
 [CustomCodes]
 other = "Custom Codes (Style and Script)"
 
+[CustomCodesDashboard]
+other = "Custom Codes for Dashboard"
+
 [AccessPassword]
 other = "Frontend Access Password"
 
@@ -539,7 +545,7 @@ other = "Scheduled Tasks"
 other = "API Management"
 
 [IssueNewApiToken]
-other = "Issue New API Token"
+other = "Generate New API Token"
 
 [Token]
 other = "Token"
@@ -548,10 +554,10 @@ other = "Token"
 other = "Delete Token"
 
 [ConfirmToDeleteThisToken]
-other = "Confirm to Delete This Token?"
+other = "Confirm Deleting This Token?"
 
 [YouAreNotAuthorized]
-other = "Not Authorized for This Page"
+other = "This Page needs Authorization"
 
 [WrongAccessPassword]
 other = "Wrong Access Password"
@@ -599,13 +605,13 @@ other = "IP Changed"
 other = "Remaining Data"
 
 [DashboardTheme]
-other = "Admin Panel Theme"
+other = "Dashboard Theme"
 
 [Info]
 other = "Info"
 
 [HideForGuest]
-other = "Hide for Guest"
+other = "Hide from Guest"
 
 [Menu]
 other = "Menu"
@@ -616,20 +622,62 @@ other = "Network"
 [EnableShowInService]
 other = "Enable Show in Service"
 
+[DDNS]
+other = "Dynamic DNS"
+
+[DDNSProfiles]
+other = "DDNS Profiles"
+
+[AddDDNSProfile]
+other = "New Profile"
+
 [EnableDDNS]
 other = "Enable DDNS"
 
 [EnableIPv4]
-other = "Enable DDNS IPv4"
+other = "IPv4 Enabled"
 
-[EnableIpv6]
+[EnableIPv6]
-other = "Enable DDNS IPv6"
+other = "IPv6 Enabled"
 
 [DDNSDomain]
-other = "DDNS Domain"
+other = "Domains"
 
-[DDNSProfile]
+[DDNSDomains]
-other = "DDNS Profile Name"
+other = "Domains (separate with comma)"
+
+[DDNSProvider]
+other = "DDNS Provider"
+
+[MaxRetries]
+other = "Maximum retry attempts"
+
+[DDNSAccessID]
+other = "Credential 1"
+
+[DDNSAccessSecret]
+other = "Credential 2"
+
+[DDNSTokenID]
+other = "Token ID"
+
+[DDNSTokenSecret]
+other = "Token Secret"
+
+[WebhookURL]
+other = "Webhook URL"
+
+[WebhookMethod]
+other = "Webhook Request Method"
+
+[WebhookRequestType]
+other = "Webhook Request Type"
+
+[WebhookHeaders]
+other = "Webhook Request Headers"
+
+[WebhookRequestBody]
+other = "Webhook Request Body"
 
 [Feature]
 other = "Feature"
@@ -650,4 +698,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"
+
+[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

@@ -71,7 +71,7 @@ other = "Ignorar todo, ejecutar solo a través de servidores específicos"
 other = "Incluir todo, excepto servidores específicos"
 
 [ExecuteByTriggerServer]
-other = "Ejecutar por servidor disparador"
+other = "Ejecutar en servidores con alarma"
 
 [SpecificServers]
 other = "Servidores Específicos"
@@ -104,7 +104,7 @@ other = "Segundos, Minutos, Horas, Días, Meses, Semanas - Ver detalles a"
 other = "Formato de Expresión de Cron"
 
 [IntroductionOfCommands]
-other = "Introducción de Comandos: Escriba comandos como en scripts shell/bat. Evite saltos de línea; conecte múltiples comandos con <code>&&</code> o <code>&</code>. Si no se encuentra un comando, verifique la variable de entorno <code>PATH</code>. En servidores <code>Linux</code>, antepóngale <code>source ~/.bashrc</code> a los comandos, o use rutas absolutas."
+other = "Introducción de Comandos: Escriba comandos como en scripts shell/bat. Evite saltos de línea; conecte múltiples comandos con <code>&&</code> o <code>;</code>. Si no se encuentra un comando, verifique la variable de entorno <code>PATH</code>. En servidores <code>Linux</code>, antepóngale <code>source ~/.bashrc</code> a los comandos, o use rutas absolutas."
 
 [AddMonitor]
 other = "Agregar Monitor de Servicio"
@@ -226,6 +226,9 @@ other = "Secreto"
 [Note]
 other = "Nota"
 
+[PublicNote]
+other = "Nota Pública"
+
 [LinuxOneKeyInstall]
 other = "Instalación Linux con Un Solo Clic"
 
@@ -251,7 +254,7 @@ other = "Cubrir Todo"
 other = "Ignorar Todo"
 
 [ByTrigger]
-other = "Ejecutar por Disparador"
+other = "Servidores con alarma"
 
 [DeleteScheduledTask]
 other = "Eliminar Tarea Programada"
@@ -278,7 +281,7 @@ other = "¿No tiene una cuenta?"
 other = "Certificados HTTP(S)/SSL"
 
 [TCPPort]
-other = "Puerto TCP"
+other = "TCPing"
 
 [DeleteService]
 other = "Eliminar Servicio"
@@ -331,6 +334,9 @@ other = "Tema de Frontend"
 [CustomCodes]
 other = "Códigos Personalizados (Incluye style y script)"
 
+[CustomCodesDashboard]
+other = "Custom Codes for Dashboard"
+
 [AccessPassword]
 other = "Contraseña de Acceso al Frontend"
 
@@ -616,20 +622,62 @@ other = "Red"
 [EnableShowInService]
 other = "Mostrar en servicio"
 
+[DDNS]
+other = "DNS Dinámico"
+
+[DDNSProfiles]
+other = "Perfiles DDNS"
+
+[AddDDNSProfile]
+other = "Nuevo Perfil"
+
 [EnableDDNS]
 other = "Habilitar DDNS"
 
 [EnableIPv4]
-other = "Habilitar DDNS IPv4"
+other = "IPv4 Activado"
 
-[EnableIpv6]
+[EnableIPv6]
-other = "Habilitar DDNS IPv6"
+other = "IPv6 Activado"
 
 [DDNSDomain]
-other = "Dominio DDNS"
+other = "Dominios"
 
-[DDNSProfile]
+[DDNSDomains]
-other = "Nombre del perfil de DDNS"
+other = "Dominios (separados por comas)"
+
+[DDNSProvider]
+other = "Proveedor DDNS"
+
+[MaxRetries]
+other = "Número máximo de intentos de reintento"
+
+[DDNSAccessID]
+other = "Credencial 1"
+
+[DDNSAccessSecret]
+other = "Credencial 2"
+
+[DDNSTokenID]
+other = "ID del Token"
+
+[DDNSTokenSecret]
+other = "Secreto del Token"
+
+[WebhookURL]
+other = "URL del Webhook"
+
+[WebhookMethod]
+other = "Método de Solicitud del Webhook"
+
+[WebhookRequestType]
+other = "Tipo de solicitud del Webhook"
+
+[WebhookHeaders]
+other = "Encabezados de Solicitud del Webhook"
+
+[WebhookRequestBody]
+other = "Cuerpo de Solicitud del Webhook"
 
 [Feature]
 other = "Característica"
@@ -650,4 +698,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 = "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

@@ -71,7 +71,7 @@ other = "忽略所有，仅通过特定服务器执行"
 other = "覆盖所有，仅特定服务器不执行"
 
 [ExecuteByTriggerServer]
-other = "由触发的服务器执行"
+other = "由触发告警的服务器执行"
 
 [SpecificServers]
 other = "特定服务器"
@@ -104,7 +104,7 @@ 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 = "新增监控"
@@ -226,6 +226,9 @@ other = "密钥"
 [Note]
 other = "备注"
 
+[PublicNote]
+other = "公开备注"
+
 [LinuxOneKeyInstall]
 other = "Linux 一键安装"
 
@@ -251,7 +254,7 @@ other = "覆盖所有"
 other = "忽略所有"
 
 [ByTrigger]
-other = "触发执行"
+other = "触发告警的服务器"
 
 [DeleteScheduledTask]
 other = "删除计划任务"
@@ -278,7 +281,7 @@ other = "没有账号？"
 other = "HTTP(S)/SSL证书"
 
 [TCPPort]
-other = "TCP 端口"
+other = "TCPing"
 
 [DeleteService]
 other = "移除服务"
@@ -331,6 +334,9 @@ other = "前台界面主题"
 [CustomCodes]
 other = "自定义代码（包括 style 和 script）"
 
+[CustomCodesDashboard]
+other = "Custom Codes for Dashboard"
+
 [AccessPassword]
 other = "前台访问密码"
 
@@ -419,7 +425,7 @@ other = "活动"
 other = "版本"
 
 [NetSpeed]
-other = "网络"
+other = "网速"
 
 [Uptime]
 other = "在线"
@@ -616,20 +622,62 @@ other = "网络"
 [EnableShowInService]
 other = "在服务中显示"
 
+[DDNS]
+other = "动态 DNS"
+
+[DDNSProfiles]
+other = "DDNS配置"
+
+[AddDDNSProfile]
+other = "新配置"
+
 [EnableDDNS]
-other = "启用DDNS"
+other = "启用 DDNS"
 
 [EnableIPv4]
-other = "启用DDNS IPv4"
+other = "启用 DDNS IPv4"
 
-[EnableIpv6]
+[EnableIPv6]
-other = "启用DDNS IPv6"
+other = "启用 DDNS IPv6"
 
 [DDNSDomain]
-other = "DDNS域名"
+other = "DDNS 域名"
 
-[DDNSProfile]
+[DDNSDomains]
-other = "DDNS配置名"
+other = "域名（逗号分隔）"
+
+[DDNSProvider]
+other = "DDNS 供应商"
+
+[MaxRetries]
+other = "最大重试次数"
+
+[DDNSAccessID]
+other = "DDNS 凭据 1"
+
+[DDNSAccessSecret]
+other = "DDNS 凭据 2"
+
+[DDNSTokenID]
+other = "令牌 ID"
+
+[DDNSTokenSecret]
+other = "令牌 Secret"
+
+[WebhookURL]
+other = "Webhook 地址"
+
+[WebhookMethod]
+other = "Webhook 请求方式"
+
+[WebhookRequestType]
+other = "Webhook 请求类型"
+
+[WebhookHeaders]
+other = "Webhook 请求头"
+
+[WebhookRequestBody]
+other = "Webhook 请求体"
 
 [Feature]
 other = "功能"
@@ -650,4 +698,52 @@ other = "禁止前台切换模板"
 other = "服务器世界分布图"
 
 [NAT]
-other = "内网穿透"
+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 = "備份"
@@ -71,7 +71,7 @@ other = "忽略所有，僅通過特定伺服器執行"
 other = "覆蓋所有，僅特定伺服器不執行"
 
 [ExecuteByTriggerServer]
-other = "由觸發的伺服器執行"
+other = "由觸發告警的伺服器執行"
 
 [SpecificServers]
 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 一鍵安裝"
 
@@ -251,13 +254,13 @@ other = "覆蓋所有"
 other = "忽略所有"
 
 [ByTrigger]
-other = "觸發執行"
+other = "觸發告警的伺服器"
 
 [DeleteScheduledTask]
-other = "刪除計劃任務"
+other = "刪除排程任務"
 
 [ConfirmToDeleteThisScheduledTask]
-other = "確認刪除此計劃任務？"
+other = "確認刪除此排程任務？"
 
 [AccessDenied]
 other = "訪問被拒絕"
@@ -278,7 +281,7 @@ other = "沒有帳號？"
 other = "HTTP(S)/SSL證書"
 
 [TCPPort]
-other = "TCP 端口"
+other = "TCPing"
 
 [DeleteService]
 other = "移除服務"
@@ -331,6 +334,9 @@ other = "前台界面主題"
 [CustomCodes]
 other = "自定義代碼（包括 style 和 script）"
 
+[CustomCodesDashboard]
+other = "Custom Codes for Dashboard"
+
 [AccessPassword]
 other = "前台訪問密碼"
 
@@ -404,7 +410,7 @@ other = "流量"
 other = "負載"
 
 [ProcessCount]
-other = "進程數"
+other = "行程數"
 
 [ConnCount]
 other = "連接數"
@@ -419,7 +425,7 @@ other = "活動"
 other = "版本"
 
 [NetSpeed]
-other = "網絡"
+other = "網速"
 
 [Uptime]
 other = "在線"
@@ -455,7 +461,7 @@ other = "狀態"
 other = "可用性"
 
 [AverageLatency]
-other = "平均響應時間"
+other = "平均回應時間"
 
 [CycleTransferStats]
 other = "周期性流量統計"
@@ -521,7 +527,7 @@ other = "發生錯誤"
 other = "系統錯誤"
 
 [NetworkError]
-other = "網絡錯誤"
+other = "網路錯誤"
 
 [ServicesStatus]
 other = "服務狀態"
@@ -533,7 +539,7 @@ other = "伺服器管理"
 other = "服務監控"
 
 [ScheduledTasks]
-other = "計劃任務"
+other = "排程任務"
 
 [ApiManagement]
 other = "API 管理"
@@ -611,25 +617,67 @@ other = "對遊客隱藏"
 other = "菜單"
 
 [NetworkSpiter]
-other = "網絡"
+other = "網路"
 
 [EnableShowInService]
 other = "在服務中顯示"
 
+[DDNS]
+other = "動態 DNS"
+
+[DDNSProfiles]
+other = "DDNS配置"
+
+[AddDDNSProfile]
+other = "新增配置"
+
 [EnableDDNS]
-other = "啟用DDNS"
+other = "啟用 DDNS"
 
 [EnableIPv4]
-other = "啟用DDNS IPv4"
+other = "啟用 DDNS IPv4"
 
-[EnableIpv6]
+[EnableIPv6]
-other = "啟用DDNS IPv6"
+other = "啟用 DDNS IPv6"
 
 [DDNSDomain]
-other = "DDNS網域"
+other = "DDNS 域名"
 
-[DDNSProfile]
+[DDNSDomains]
-other = "DDNS設定名"
+other = "域名（逗號分隔）"
+
+[DDNSProvider]
+other = "DDN S供應商"
+
+[MaxRetries]
+other = "最大重試次數"
+
+[DDNSAccessID]
+other = "DDNS 憑據 1"
+
+[DDNSAccessSecret]
+other = "DDNS 憑據 2"
+
+[DDNSTokenID]
+other = "令牌 ID"
+
+[DDNSTokenSecret]
+other = "令牌 Secret"
+
+[WebhookURL]
+other = "Webhook 地址"
+
+[WebhookMethod]
+other = "Webhook 請求方式"
+
+[WebhookRequestType]
+other = "Webhook 請求類型"
+
+[WebhookHeaders]
+other = "Webhook 請求頭"
+
+[WebhookRequestBody]
+other = "Webhook 請求體"
 
 [Feature]
 other = "功能"
@@ -650,4 +698,52 @@ other = "禁止前台切換主題"
 other = "伺服器世界分布圖"
 
 [NAT]
-other = "NAT"
+other = "NAT穿透"
+
+[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/resource.go

@@ -2,10 +2,14 @@ package resource
 
 import (
 	"embed"
+
+	"github.com/naiba/nezha/pkg/utils"
 )
 
+var StaticFS *utils.HybridFS
+
 //go:embed static
-var StaticFS embed.FS
+var staticFS embed.FS
 
 //go:embed template
 var TemplateFS embed.FS
@@ -13,6 +17,14 @@ var TemplateFS embed.FS
 //go:embed l10n
 var I18nFS embed.FS
 
+func init() {
+	var err error
+	StaticFS, err = utils.NewHybridFS(staticFS, "static", "resource/static/custom")
+	if err != nil {
+		panic(err)
+	}
+}
+
 func IsTemplateFileExist(name string) bool {
 	_, err := TemplateFS.Open(name)
 	return err == nil

resource/static/darkmode.css

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

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.css

@@ -9,6 +9,11 @@ td {
   word-break: break-all;
 }
 
+.ui.container{
+  width: 95vw !important;
+  max-width: 1680px !important;
+}
+
 .nb-container {
   padding-top: 75px;
   min-height: 100vh;

resource/static/main.js

@@ -99,7 +99,11 @@ function showFormModal(modelSelector, formID, URL, getData) {
                 item.name === "DisplayIndex" ||
                 item.name === "Type" ||
                 item.name === "Cover" ||
-                item.name === "Duration"
+                item.name === "Duration" ||
+                item.name === "MaxRetries" ||
+                item.name === "Provider" ||
+                item.name === "WebhookMethod" ||
+                item.name === "WebhookRequestType"
               ) {
                 obj[item.name] = parseInt(item.value);
               } else if (item.name.endsWith("Latency")) {
@@ -128,6 +132,16 @@ function showFormModal(modelSelector, formID, URL, getData) {
                 }
               }
 
+              if (item.name.endsWith("DDNSProfilesRaw")) {
+                if (item.value.length > 2) {
+                  obj[item.name] = JSON.stringify(
+                    [...item.value.matchAll(/\d+/gm)].map((k) =>
+                      parseInt(k[0])
+                    )
+                  );
+                }
+              }
+
               return obj;
             }, {});
         $.post(URL, JSON.stringify(data))
@@ -207,6 +221,7 @@ function addOrEditAlertRule(rule) {
       );
     }
   }
+  // 需要在 showFormModal 进一步拼接数组
   modal
     .find("input[name=FailTriggerTasksRaw]")
     .val(rule ? "[]," + failTriggerTasks.substr(1, failTriggerTasks.length - 2) : "[]");
@@ -256,6 +271,55 @@ function addOrEditNotification(notification) {
   );
 }
 
+function addOrEditDDNS(ddns) {
+  const modal = $(".ddns.modal");
+  modal.children(".header").text((ddns ? LANG.Edit : LANG.Add));
+  modal
+    .find(".nezha-primary-btn.button")
+    .html(
+      ddns
+        ? LANG.Edit + '<i class="edit icon"></i>'
+        : LANG.Add + '<i class="add icon"></i>'
+    );
+  modal.find("input[name=ID]").val(ddns ? ddns.ID : null);
+  modal.find("input[name=Name]").val(ddns ? ddns.Name : null);
+  modal.find("input[name=DomainsRaw]").val(ddns ? ddns.DomainsRaw : null);
+  modal.find("input[name=AccessID]").val(ddns ? ddns.AccessID : null);
+  modal.find("input[name=AccessSecret]").val(ddns ? ddns.AccessSecret : null);
+  modal.find("input[name=MaxRetries]").val(ddns ? ddns.MaxRetries : 3);
+  modal.find("input[name=WebhookURL]").val(ddns ? ddns.WebhookURL : null);
+  modal
+    .find("textarea[name=WebhookHeaders]")
+    .val(ddns ? ddns.WebhookHeaders : null);
+  modal
+    .find("textarea[name=WebhookRequestBody]")
+    .val(ddns ? ddns.WebhookRequestBody : null);
+  modal
+    .find("select[name=Provider]")
+    .val(ddns ? ddns.Provider : 0);
+  modal
+    .find("select[name=WebhookMethod]")
+    .val(ddns ? ddns.WebhookMethod : 1);
+  modal
+    .find("select[name=WebhookRequestType]")
+    .val(ddns ? ddns.WebhookRequestType : 1);
+  if (ddns && ddns.EnableIPv4) {
+    modal.find(".ui.enableipv4.checkbox").checkbox("set checked");
+  } else {
+    modal.find(".ui.enableipv4.checkbox").checkbox("set unchecked");
+  }
+  if (ddns && ddns.EnableIPv6) {
+    modal.find(".ui.enableipv6.checkbox").checkbox("set checked");
+  } else {
+    modal.find(".ui.enableipv6.checkbox").checkbox("set unchecked");
+  }
+  showFormModal(
+    ".ddns.modal",
+    "#ddnsForm",
+    "/api/ddns"
+  );
+}
+
 function addOrEditNAT(nat) {
   const modal = $(".nat.modal");
   modal.children(".header").text((nat ? LANG.Edit : LANG.Add));
@@ -325,12 +389,38 @@ function addOrEditServer(server, conf) {
   modal.find("input[name=id]").val(server ? server.ID : null);
   modal.find("input[name=name]").val(server ? server.Name : null);
   modal.find("input[name=Tag]").val(server ? server.Tag : null);
-  modal.find("input[name=DDNSDomain]").val(server ? server.DDNSDomain : null);
+  modal.find("a.ui.label.visible").each((i, el) => {
-  modal.find("input[name=DDNSProfile]").val(server ? server.DDNSProfile : null);
+    el.remove();
+  });
+  var ddns;
+  if (server) {
+    ddns = server.DDNSProfilesRaw;
+    let serverList;
+    try {
+      serverList = JSON.parse(ddns);
+    } catch (error) {
+      serverList = "[]";
+    }
+    const node = modal.find("i.dropdown.icon.ddnsProfiles");
+    for (let i = 0; i < serverList.length; i++) {
+      node.after(
+        '<a class="ui label transition visible" data-value="' +
+        serverList[i] +
+        '" style="display: inline-block !important;">ID:' +
+        serverList[i] +
+        '<i class="delete icon"></i></a>'
+      );
+    }
+  }
+  // 需要在 showFormModal 进一步拼接数组
+  modal
+    .find("input[name=DDNSProfilesRaw]")
+    .val(server ? "[]," + ddns.substr(1, ddns.length - 2) : "[]");
   modal
     .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", "");
@@ -341,26 +431,17 @@ function addOrEditServer(server, conf) {
     modal.find(".command.field").attr("style", "display:none");
     modal.find("input[name=secret]").val("");
   }
-  if (server && server.HideForGuest) {
-    modal.find(".ui.hideforguest.checkbox").checkbox("set checked");
-  } else {
-    modal.find(".ui.hideforguest.checkbox").checkbox("set unchecked");
-  }
   if (server && server.EnableDDNS) {
     modal.find(".ui.enableddns.checkbox").checkbox("set checked");
   } else {
     modal.find(".ui.enableddns.checkbox").checkbox("set unchecked");
   }
-  if (server && server.EnableIPv4) {
+  if (server && server.HideForGuest) {
-    modal.find(".ui.enableipv4.checkbox").checkbox("set checked");
+    modal.find(".ui.hideforguest.checkbox").checkbox("set checked");
   } else {
-    modal.find(".ui.enableipv4.checkbox").checkbox("set unchecked");
+    modal.find(".ui.hideforguest.checkbox").checkbox("set unchecked");
-  }
-  if (server && server.EnableIpv6) {
-    modal.find(".ui.enableipv6.checkbox").checkbox("set checked");
-  } else {
-    modal.find(".ui.enableipv6.checkbox").checkbox("set unchecked");
   }
+
   showFormModal(".server.modal", "#serverForm", "/api/server");
 }
 
@@ -446,6 +527,7 @@ function addOrEditMonitor(monitor) {
       );
     }
   }
+  // 需要在 showFormModal 进一步拼接数组
   modal
     .find("input[name=FailTriggerTasksRaw]")
     .val(monitor ? "[]," + failTriggerTasks.substr(1, failTriggerTasks.length - 2) : "[]");
@@ -491,6 +573,7 @@ function addOrEditCron(cron) {
       );
     }
   }
+  // 需要在 showFormModal 进一步拼接数组
   modal
     .find("input[name=ServersRaw]")
     .val(cron ? "[]," + servers.substr(1, servers.length - 2) : "[]");
@@ -620,3 +703,15 @@ $(document).ready(() => {
     });
   } catch (error) { }
 });
+
+$(document).ready(() => {
+  try {
+    $(".ui.ddns.search.dropdown").dropdown({
+      clearable: true,
+      apiSettings: {
+        url: "/api/search-ddns?word={query}",
+        cache: false,
+      },
+    });
+  } catch (error) { }
+});

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/css/main.css

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

resource/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

@@ -1,6 +1,6 @@
 body[theme="dark"] {
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-    background: rgba(49, 54, 59, 1);
+    background-color: rgba(49, 54, 59, 1);
     color: #f1f1f1;
 }
 
@@ -8,8 +8,12 @@ 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 {
-    list-style-image: initial;
     background-color: rgba(23, 26, 30, 1);
     border-color: rgba(49, 54, 59, 1);
     box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
@@ -28,10 +32,10 @@ body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
 body[theme="dark"] .navbar .navbar-nav > .open > a:focus,
 body[theme="dark"] .navbar .navbar-nav > .open > a:hover,
 body[theme="dark"] .navbar .navbar-nav > .active > a,
-body[theme="dark"] .navbar .navbar-nav > .open > a{
+body[theme="dark"] .navbar .navbar-nav > .open > a {
-    background-image: none !important;
+    background-image: none;
-    box-shadow: none !important;
+    box-shadow: none;
-    background-color: transparent !important;
+    background-color: transparent;
 }
 
 body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
@@ -39,7 +43,6 @@ body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
 }
 
 body[theme="dark"] .content {
-    background-image: initial;
     background-color: rgba(28, 29, 38, 1);
     border: none;
     box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
@@ -48,7 +51,6 @@ body[theme="dark"] .content {
 }
 
 body[theme="dark"] .table {
-    background-image: initial;
     background-color: rgba(28, 29, 38, 1);
     border-color: #545b5e;
 }
@@ -56,7 +58,7 @@ body[theme="dark"] .table {
 body[theme="dark"] .table > tbody > tr > td:before,
 body[theme="dark"] .table > tfoot > tr > td:before,
 body[theme="dark"] .table > thead > tr > td:before,
-body[theme="dark"] .table > thead > tr.node-group-cell > th:before{
+body[theme="dark"] .table > thead > tr.node-group-cell > th:before {
     background-color: rgba(58, 62, 65, 1);
 }
 
@@ -69,11 +71,10 @@ body[theme="dark"] .table-striped tbody > tr.even > th {
 body[theme="dark"] .table-striped tbody > tr,
 body[theme="dark"] .table-striped tbody > tr.odd > td,
 body[theme="dark"] .table-striped tbody > tr.odd > th {
-    /* background-color: rgba(28, 29, 38, 1); 282B2E*/
     background-color: rgba(34, 35, 46, 1);
 }
 
-body[theme="dark"] .table-hover > tbody > tr:hover{
+body[theme="dark"] .table-hover > tbody > tr:hover {
     background-color: unset;
 }
 
@@ -82,19 +83,18 @@ body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
 }
 
 /* expandRow展开部分样式 */
-body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
+body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before {
-    /* background-color: rgba(28, 29, 38, 1); 282B2E*/
     background-color: rgba(34, 35, 46, 1);
 }
 
-body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
+body[theme="dark"] .table > tbody > tr.expandRow.even > td:before {
     background-color: rgba(28, 29, 38, 1);
 }
 /* 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 {
@@ -102,35 +102,35 @@ body[theme="dark"] .progress-bar {
 }
 
 body[theme="dark"] .progress-bar-success {
-    background-image: linear-gradient(#4d853a 0, #367e36 100%);
+    background-image: linear-gradient(to right, rgba(77, 133, 58, 1) 0, rgba(54, 126, 54, 1) 100%);
-}
-
-body[theme="dark"] .progress-offline .progress-bar-success {
-    background-image: linear-gradient(#808080 0, #808080 100%);
 }
 
 body[theme="dark"] .progress-bar-warning {
-    background-image: linear-gradient(#995f0d 0, #b5710f 100%);
+    background-image: linear-gradient(to right, rgba(153, 95, 13, 1) 0, rgba(181, 113, 15, 1) 100%);
-}
-
-body[theme="dark"] .progress-offline .progress-bar-warning {
-    background-image: linear-gradient(#808080 0, #808080 100%);
 }
 
 body[theme="dark"] .progress-bar-danger {
-    background-image: linear-gradient(#942320 0, #a12623 100%);
+    background-image: linear-gradient(to right, rgba(145, 35, 32, 1) 0, rgba(161, 38, 35, 1) 100%);
+}
+
+body[theme="dark"] .progress-offline .progress-bar-success {
+    background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
+}
+
+body[theme="dark"] .progress-offline .progress-bar-warning {
+    background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
 }
 
 body[theme="dark"] .progress-offline .progress-bar-danger {
-    background-image: linear-gradient(#808080 0, #808080 100%);
+    background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
 }
 
 body[theme="dark"] .node-cell.status .status-icon.online {
-    background-image: linear-gradient(#4d853a 0, #367e36 100%);
+    background-image: linear-gradient(rgba(77, 133, 58, 1) 0, rgba(54, 126, 54, 1) 100%);
 }
 
 body[theme="dark"] .node-cell.status .status-icon.offline {
-    background-image: linear-gradient(#9b2522 0, #9b2522 100%);
+    background-image: linear-gradient(rgba(155, 37, 34, 1) 0, rgba(161, 38, 35, 1) 100%);
 }
 
 body[theme="dark"] .service-status .danger {
@@ -155,20 +155,29 @@ body[theme="dark"] footer p a:hover {
     text-decoration: none;
 }
 
-body[theme="dark"] .modal-content{
+body[theme="dark"] .modal-content {
     background-color: rgba(28, 29, 38, 1);
     color: #f1f1f1;
 }
 
-body[theme="dark"] .modal-header{
+body[theme="dark"] #earthChartBox .modal-content {
-    border-bottom-color:#080808;
+    background-color: rgba(0, 0, 0, 1);
-}
-
-body[theme="dark"] .modal-header i{
     color: #f1f1f1;
 }
 
-body[theme="dark"] .toolbox i{
+body[theme="dark"] .modal-header {
+    border-bottom-color:#080808;
+}
+
+body[theme="dark"] .modal-header i.xclose {
+    color: #f1f1f1;
+}
+
+body[theme="dark"] .toolbox i {
     color: rgba(241, 241, 241, 1);
     background-color: rgba(0, 0, 0, 0.5);
+}
+
+body[theme="dark"] .network-box .network-box-header {
+    border-bottom-color: rgba(110, 112, 121, 0.25);
 }

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

@@ -0,0 +1,123 @@
+body[theme="dark"]::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-image: url(/static/theme-server-status/img/bg.jpg);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: cover;
+    z-index: -1;
+}
+
+body[theme="dark"] {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #f1f1f1;
+}
+
+body[theme="dark"] .navbar {
+    /** 顶部导航条 背景 **/
+    background-color: rgba(0, 0, 0, 0.8);
+    box-shadow: none;
+    border: none;
+}
+
+body[theme="dark"] .navbar .navbar-brand {
+    color: #ffffff;
+}
+
+body[theme="dark"] .navbar .dropdown-menu {
+    /** 二级导航下拉 背景 **/
+    background-color: rgba(0, 0, 0, 0.85);
+    border-top: none;
+    border-color: #31363b;
+    box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
+}
+
+body[theme="dark"] .navbar .dropdown-menu > li > a {
+    color: #c8c3bc;
+}
+
+body[theme="dark"] .navbar .dropdown-menu > li > a:focus,
+body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
+    /** 二级导航鼠标悬停选中背景 **/
+    background-color: rgba(0, 0, 0, 0.95);
+    background-image: linear-gradient(#1c1d26 0, #1c1d26 100%);
+}
+
+body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
+    color: #f1f1f1;
+}
+
+body[theme="dark"] .table,
+body[theme="dark"] .table-condensed > tbody > tr,
+body[theme="dark"] .table-hover > tbody > tr,
+body[theme="dark"] .table-hover > tbody > tr:hover,
+body[theme="dark"] .table-striped tbody > tr.even,
+body[theme="dark"] .table-striped tbody > tr.odd,
+body[theme="dark"] .table-striped tbody > tr.even > td,
+body[theme="dark"] .table-striped tbody > tr.even > th,
+body[theme="dark"] .table-striped tbody > tr.odd > td,
+body[theme="dark"] .table-striped tbody > tr.odd > th,
+body[theme="dark"] .table-striped tbody > tr.even > td:hover,
+body[theme="dark"] .table-striped tbody > tr.even > th:hover,
+body[theme="dark"] .table-striped tbody > tr.odd > td:hover,
+body[theme="dark"] .table-striped tbody > tr.odd > th:hover,
+body[theme="dark"] .table-striped tbody > tr.expandRow:hover {
+    background-color: transparent !important;
+}
+
+body[theme="dark"] .content {
+    /** 主box 背景 **/
+    background-color: rgba(28, 29, 38, 0.8); 
+    border: none;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
+}
+
+body[theme="dark"] .table > thead > tr.node-group-tag > th,
+body[theme="dark"] .table > thead > tr.node-group-tag > th:before {
+    background: unset;
+}
+
+body[theme="dark"] .table > tbody > tr > td:before,
+body[theme="dark"] .table > tfoot > tr > td:before,
+body[theme="dark"] .table > thead > tr > td:before,
+body[theme="dark"] .table > thead > tr.node-group-cell > th:before {
+     /** border-bottom 颜色 **/
+    background-color: rgba(155, 155, 155, 0.1); 
+}
+
+body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
+    background-color: unset;
+}
+
+/* expandRow展开部分样式 */
+body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before {
+    background-color: unset;
+}
+
+body[theme="dark"] .table > tbody > tr.expandRow.even > td:before {
+    background-color: unset;
+}
+/* expandRow展开部分样式结束 */
+
+body[theme="dark"] .progress {
+    background-image: none;
+    background-color: rgba(255, 255, 255, 0.075); 
+}
+
+body[theme="dark"] .progress-bar-success {
+    background-image: linear-gradient(to right, rgba(77, 133, 58, 0.9) 0, rgba(54, 126, 54, 0.9) 100%);
+}
+
+body[theme="dark"] .progress-bar-warning {
+    background-image: linear-gradient(to right, rgba(153, 95, 13, 0.9) 0, rgba(181, 113, 15, 0.9) 100%);
+}
+
+body[theme="dark"] .progress-bar-danger {
+    background-image: linear-gradient(to right, rgba(145, 35, 32, 0.8) 0, rgba(161, 38, 35, 0.8) 100%);
+}

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

@@ -0,0 +1,134 @@
+body[theme="light"]::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-image: url(/static/theme-server-status/img/bg.jpg);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: cover;
+    z-index: -1;
+}
+
+body[theme="light"] {
+    background-image: unset;
+}
+
+body[theme="light"]::after {
+    content: "";
+    position: fixed;
+}
+
+body[theme="light"] .navbar {
+    /** 顶部导航条 背景 **/
+    background-color: rgba(255, 255, 255, 0.9);
+    border-bottom: 1px #cecece solid;
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+}
+
+body[theme="light"] .navbar .dropdown-menu {
+    /** 二级导航下拉 **/
+    background-color: rgba(255, 255, 255, 0.8);
+    border-color: rgba(0, 0, 0, .05);
+}
+
+
+body[theme="light"] .navbar .dropdown-menu > li > a:focus,
+body[theme="light"] .navbar .dropdown-menu > li > a:hover {
+    /** 二级导航鼠标悬停选中背景 **/
+    background-color: rgba(0, 0, 0, .05);
+}
+
+body[theme="light"] .navbar .navbar-collapse {
+    border-color:rgba(0, 0, 0, 0.085);
+}
+
+body[theme="light"]  .navbar .navbar-toggle .icon-bar {
+    background-color: rgba(0, 0, 0, 0.9);
+}
+
+body[theme="light"] .navbar .navbar-toggle:focus, 
+body[theme="light"] .navbar .navbar-toggle:hover {
+    background-color: unset;
+}
+
+body[theme="light"] .table,
+body[theme="light"] .table-condensed > tbody > tr,
+body[theme="light"] .table-hover > tbody > tr,
+body[theme="light"] .table-hover > tbody > tr:hover,
+body[theme="light"] .table-striped tbody > tr.even,
+body[theme="light"] .table-striped tbody > tr.odd,
+body[theme="light"] .table-striped tbody > tr.even > td,
+body[theme="light"] .table-striped tbody > tr.even > th,
+body[theme="light"] .table-striped tbody > tr.odd > td,
+body[theme="light"] .table-striped tbody > tr.odd > th,
+body[theme="light"] .table-striped tbody > tr.even > td:hover,
+body[theme="light"] .table-striped tbody > tr.even > th:hover,
+body[theme="light"] .table-striped tbody > tr.odd > td:hover,
+body[theme="light"] .table-striped tbody > tr.odd > th:hover,
+body[theme="light"] .table-striped tbody > tr.expandRow:hover {
+    background-color: transparent !important;
+}
+
+body[theme="light"] .content {
+    /** 主box 背景 **/
+    background-color: rgba(245, 245, 245, 0.8);
+    border: none;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
+}
+
+body[theme="light"] .table > thead > tr.node-group-tag > th,
+body[theme="light"] .table > thead > tr.node-group-tag > th:before {
+    background: unset;
+}
+
+body[theme="light"] .table > tbody > tr > td:before,
+body[theme="light"] .table > tfoot > tr > td:before,
+body[theme="light"] .table > thead > tr > td:before,
+body[theme="light"] .table > thead > tr.node-group-cell > th:before {
+     /** border-bottom 颜色 **/
+    background-color: rgba(0, 0, 0, 0.075); 
+}
+
+body[theme="light"] .table-hover > tbody > tr:not(.expandRow):hover > td {
+    background-color: unset;
+}
+
+/* expandRow展开部分样式 */
+body[theme="light"] .table > tbody > tr.expandRow.odd > td:before {
+    background-color: unset;
+}
+
+body[theme="light"] .table > tbody > tr.expandRow.even > td:before {
+    background-color: unset;
+}
+/* expandRow展开部分样式结束 */
+
+body[theme="light"] .progress {
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.015); 
+}
+
+body[theme="light"] .progress-bar-success {
+    background-image: linear-gradient(to right, rgba(50, 205, 50, 0.6) 0, rgba(68, 157, 68, 0.6) 100%);
+}
+
+body[theme="light"] .progress-bar-warning {
+    background-image: linear-gradient(to right, rgba(236, 151, 31, 0.6) 0, rgba(255, 125, 80, 0.6) 100%);
+}
+
+body[theme="light"] .progress-bar-danger {
+    background-image: linear-gradient(to right, rgba(255, 70, 0, 0.6) 0, rgba(201, 48, 44,0.6) 100%);   
+}
+
+body[theme="light"] .toolbox i {
+    background-color: rgba(255, 255, 255, .55);
+}
+
+@media only screen and (max-width: 767px) {
+    body[theme="light"] .navbar .navbar-nav .open .dropdown-menu {
+        background-color: rgba(235, 235, 235, 0.75);
+    }
+}

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

@@ -3,16 +3,26 @@ body {
     padding-bottom: 30px !important;
 }
 
+.container-fluid{
+    max-width: 1680px;
+    width: 95vw;
+    margin: 0 auto;
+}
+
+.container-fluid::-webkit-scrollbar {
+    display: none;
+}
+
+.nezha {
+    min-height: calc(100vh - 100px);
+}
+
 /* 导航部分 开始*/
 .navbar {
     min-height: 40px !important;
     margin:0 auto;
     font-size: 14px;
-}
+    z-index:99999999;
-
-.navbar .container{
-    max-width: 95vw;
-    margin: 0 auto;
 }
 
 .navbar-inverse{
@@ -46,11 +56,6 @@ body {
     word-break: break-all;
 }
 
-.navbar .node-cell-expand-label {
-    /*margin-right: 5px;*/
-}
-
-.navbar .dropdown:hover,
 .navbar .dropdown a{
     cursor: pointer;
 }
@@ -75,12 +80,10 @@ body {
 .navbar .navbar-collapse{
     max-height: 500px;
 }
-
 /* 导航部分 结束 */
 
 
 /* toolbox 开始 */
-
 .toolbox {
     position: fixed;
     bottom:20px;
@@ -121,7 +124,6 @@ body {
 .toolbox .showGoTop i.goTop {
     font-size: 1.55rem;
 }
-
 /* toolbox 结束 */
 
 
@@ -138,12 +140,12 @@ body {
     border-radius: 3px;
 }
 
-.table th, .table td {
+.table-responsive{
-    text-align: left;
+    border: none;
 }
 
-tr.accordion-toggle{
+.table th, .table td {
-    cursor:pointer;
+    text-align: left;
 }
 
 .table > tbody > tr > td,
@@ -171,6 +173,15 @@ tr.accordion-toggle{
     height: 0.7px;
 }
 
+table.monitor-detail{
+    margin:5px 0px 10px 0px;
+}
+
+tr.accordion-toggle{
+    cursor:pointer;
+}
+
+.table .network-thead-tr th,
 .table .node-group-tag th{
     font-size: 18px;
     padding-bottom:15px;
@@ -239,11 +250,29 @@ 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;
 }
 
-/*加快Agent详情下拉展示速度*/
+/*agent详情下拉速度*/
 .collapsing{
     -webkit-transition-property:height,visibility;
     -o-transition-property:height,visibility;
@@ -255,13 +284,10 @@ tr.accordion-toggle{
     -o-transition-timing-function: linear;
     transition-timing-function: linear
 }
-
 /*正文结束*/
 
 /* 服务页 正文*/
-.service-status {
+.service-status {}
-
-}
 
 .service-status .service-status-th{
     min-width:60px;
@@ -307,70 +333,191 @@ tr.accordion-toggle{
 .service-status .tooltip-inner {
     max-width: 500px;
 }
+
+td.ping-network-quality {
+    width: 600px;
+}
 /* 服务页 正文结束 */
 
-
+/* 网络页 正文*/
-/* 服务器分布图 */
+.network-box .btn-group.open .dropdown-toggle {
-#mapChartBox{
+    box-shadow:unset;
-    z-index: 999999999;
 }
 
-.modal-content{
+.network-box .network-box-header {
-    display: flex;
+    font-size: 18px;
-    flex-direction: column;
+    padding: 5px 0px 15px 5px;
-    pointer-events: auto;
+    cursor: pointer;
+    width: 100%;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
 }
 
-.modal-dialog-centered{
+.network-box .network-box-header .dropdown-menu {
+    max-height: 22.5em;
+    overflow-y: auto;
+    z-index:99999998;
+    min-width: 200px;
+    padding: 0px;
+}
+
+.network-box .network-box-header .dropdown-menu::-webkit-scrollbar {
+    display: none;
+}
+
+.network-box .network-box-header .dropdown-menu li {
+    height: 2em;
+    cursor: pointer;
+}
+
+.network-box .network-box-header .dropdown-menu li.input-group {
     margin: 0 auto;
-    width: 1134px;
+    display: flex;
-    max-width: 1134px;
+    position: sticky;
+    top: 0;
+    z-index: 99999997;
+}
+
+.network-box .network-box-header .dropdown-menu li.input-group input {
+    width: 100%;
+    height: 2em;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+}
+
+.network-box .network-box-header .dropdown-menu li a {
+    padding: 5px 5px 5px 15px;
+}
+
+.network-box .network-box-header .dropdown-menu li.hidden {
+    height: 0;
+    display: none;
+    visibility:hidden;
+}
+
+.network-box .network-box-header .dropdown-menu li.visible {
+    display: block;
+}
+
+.network-box .chartTitle {
+    cursor: pointer;
+    text-align: center;
+    font-size: 18px;
+    margin: 18px 0px 15px 0px;
+}
+
+.network-box .chartTitle i.chartCountryCode {
+    font-size: 16px;
+    border-radius: 12.5%;
+}
+
+/* 网络页 正文结束 */
+
+/* 地图版服务器分布图 */
+#mapChartBox {
+    z-index: 999999999;
+    padding-left: 0 !important;
+}
+
+.modal-open .modal {
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.modal-dialog-centered {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 100%;
     display: flex;
     align-items: center; /* 垂直居中 */
     justify-content: center; /* 水平居中 */
     min-height: calc(100%) /* 确保模态框占据整个视口高度 */
 }
 
-.modal-header{
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+    border-radius: unset;
+    border: none;
+}
+
+.modal-header {
     position: relative;
 }
 
-.modal-header i{
+.modal-header h4 {
+    cursor: pointer;
+}
+
+.modal-header i.xclose {
     cursor: pointer;
     position: absolute;
-    font-size: 2em;
+    font-size: 30px;
-    top: 13px;
+    top: 12px;
-    right: 13px;
+    right: 10px;
 }
 
-footer{
+.modal-body {
-    padding-bottom: 2rem;
+    padding: 0px;
 }
 
-footer p{
+a.template-item, a.cdn-item {
+    display: block;
+}
+
+footer {
+    padding-bottom: 20px;
+}
+
+footer p {
     text-align: center;
     font-size: 10px;
 }
 
 @media only screen and (max-width: 1200px) {
-    .accordian-body{
+    .accordian-body {
         margin: 5px 0px 5px 10px;        
     }
-    .table .node-group-tag th{
+    table.monitor-detail {
+        margin:0px 0px 2px 0px;
+    }
+    .table .network-thead-tr th,
+    .table .node-group-tag th {
         font-size:16px;
         padding-bottom:6px;
     }
 }
 
+/* 彩虹旗 */
+.fi-rb {
+    background-image: url(/static/theme-server-status/img/rb.png);
+}
+
 @media only screen and (max-width: 767px) {
     body {
         font-size: 10px !important;
         padding-top:60px !important;
     }
+    .nezha {
+        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;
         margin-bottom: 10px;
     }
+    footer {
+        padding-bottom: 10px;
+    }
+    .cycle-transfer-stats .dataTables_wrapper {
+        margin-bottom: -10px;
+    }
     .navbar .navbar-nav .open .dropdown-menu>li>a {
         color: #f1f1f1;
     }
@@ -390,57 +537,78 @@ footer p{
     }
     .node-cell.os,
     .node-cell.uptime,
-    .node-cell.traffic{
+    .node-cell.traffic {
         display: none;
         visibility: hidden;
     }
-    .node-cell.location{
+    .node-cell.location {
         display: table-cell;
         visibility: visible;
     }
-    .node-cell-os-text,.node-cell-location-text{
+    .node-cell-os-text,.node-cell-location-text {
         display: none;
         visibility: hidden;
     }
-    .accordian-body{
+    .node-cell.network {
+        min-width: 95px;
+        max-width: 95px;
+    }
+    .node-cell.remaining {
+        min-width: 75px;
+        max-width: 75px;    
+    }
+    .accordian-body {
         margin: 5px 0px 5px 10px;        
     }
-    .table .node-group-tag th{
+    table.monitor-detail {
-        font-size:16px;
+        margin:0px 0px 2px 0px;
+    }
+    .table .network-thead-tr th,
+    .table .node-group-tag th {
+        font-size:14px;
         padding-bottom:6px;
     }
-    .service-status .service-status-th{
+    .table tr.network td {
+        font-size: 12px;
+    }
+    .service-status .service-status-th {
         min-width:30px;
     }
-    .service-status .delay-today{
+    .service-status .delay-today {
         margin-top:4px;
         justify-content: center;
     }
-    .service-status .delay-today i{
+    .service-status .delay-today i {
         margin-right:0px;
     }
-    .service-status .delay-today-text{
+    .service-status .delay-today-text {
         display: none;
         visibility: hidden;
     }
-    .service-status .service-averagelatency-th{
+    .service-status .service-averagelatency-th {
         min-width:70px;
     }
-    .service-status .service-30daysonline-th{
+    .service-status .service-30daysonline-th {
         min-width:75px;
     }
     .toolbox {
         right: 18px;
     }
-    .modal-dialog-centered{
+    td.ping-network-quality {
-        width: 95%;
+        width: 110px;
     }
-    .modal-title{
+    .network-box .network-box-header {
-        line-height: 0.5;
+        margin: 8px 0px 0px 8px;
+        font-size: 16px;
+        border-bottom: none;
     }
-    .modal-header i{
+    .network-box .chartTitle {
-        top: 8px;
+        font-size: 16px;
-        right: 8px;
+        margin: 10px 0px 10px 0px;
+    }
+    .network-box .chartTitle i.chartCountryCode {
+        font-size: 15px;
+        border-radius: 12.5%;
     }
 }
 

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

@@ -1,326 +0,0 @@
-/**
-* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
-*/
-;(function(window, document) {
-/*jshint evil:true */
-  /** version */
-  var version = '3.7.3';
-
-  /** Preset options */
-  var options = window.html5 || {};
-
-  /** Used to skip problem elements */
-  var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
-
-  /** Not all elements can be cloned in IE **/
-  var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
-
-  /** Detect whether the browser supports default html5 styles */
-  var supportsHtml5Styles;
-
-  /** Name of the expando, to work with multiple documents or to re-shiv one document */
-  var expando = '_html5shiv';
-
-  /** The id for the documents expando */
-  var expanID = 0;
-
-  /** Cached data for each document */
-  var expandoData = {};
-
-  /** Detect whether the browser supports unknown elements */
-  var supportsUnknownElements;
-
-  (function() {
-    try {
-        var a = document.createElement('a');
-        a.innerHTML = '<xyz></xyz>';
-        //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
-        supportsHtml5Styles = ('hidden' in a);
-
-        supportsUnknownElements = a.childNodes.length == 1 || (function() {
-          // assign a false positive if unable to shiv
-          (document.createElement)('a');
-          var frag = document.createDocumentFragment();
-          return (
-            typeof frag.cloneNode == 'undefined' ||
-            typeof frag.createDocumentFragment == 'undefined' ||
-            typeof frag.createElement == 'undefined'
-          );
-        }());
-    } catch(e) {
-      // assign a false positive if detection fails => unable to shiv
-      supportsHtml5Styles = true;
-      supportsUnknownElements = true;
-    }
-
-  }());
-
-  /*--------------------------------------------------------------------------*/
-
-  /**
-   * Creates a style sheet with the given CSS text and adds it to the document.
-   * @private
-   * @param {Document} ownerDocument The document.
-   * @param {String} cssText The CSS text.
-   * @returns {StyleSheet} The style element.
-   */
-  function addStyleSheet(ownerDocument, cssText) {
-    var p = ownerDocument.createElement('p'),
-        parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
-
-    p.innerHTML = 'x<style>' + cssText + '</style>';
-    return parent.insertBefore(p.lastChild, parent.firstChild);
-  }
-
-  /**
-   * Returns the value of `html5.elements` as an array.
-   * @private
-   * @returns {Array} An array of shived element node names.
-   */
-  function getElements() {
-    var elements = html5.elements;
-    return typeof elements == 'string' ? elements.split(' ') : elements;
-  }
-
-  /**
-   * Extends the built-in list of html5 elements
-   * @memberOf html5
-   * @param {String|Array} newElements whitespace separated list or array of new element names to shiv
-   * @param {Document} ownerDocument The context document.
-   */
-  function addElements(newElements, ownerDocument) {
-    var elements = html5.elements;
-    if(typeof elements != 'string'){
-      elements = elements.join(' ');
-    }
-    if(typeof newElements != 'string'){
-      newElements = newElements.join(' ');
-    }
-    html5.elements = elements +' '+ newElements;
-    shivDocument(ownerDocument);
-  }
-
-   /**
-   * Returns the data associated to the given document
-   * @private
-   * @param {Document} ownerDocument The document.
-   * @returns {Object} An object of data.
-   */
-  function getExpandoData(ownerDocument) {
-    var data = expandoData[ownerDocument[expando]];
-    if (!data) {
-        data = {};
-        expanID++;
-        ownerDocument[expando] = expanID;
-        expandoData[expanID] = data;
-    }
-    return data;
-  }
-
-  /**
-   * returns a shived element for the given nodeName and document
-   * @memberOf html5
-   * @param {String} nodeName name of the element
-   * @param {Document|DocumentFragment} ownerDocument The context document.
-   * @returns {Object} The shived element.
-   */
-  function createElement(nodeName, ownerDocument, data){
-    if (!ownerDocument) {
-        ownerDocument = document;
-    }
-    if(supportsUnknownElements){
-        return ownerDocument.createElement(nodeName);
-    }
-    if (!data) {
-        data = getExpandoData(ownerDocument);
-    }
-    var node;
-
-    if (data.cache[nodeName]) {
-        node = data.cache[nodeName].cloneNode();
-    } else if (saveClones.test(nodeName)) {
-        node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
-    } else {
-        node = data.createElem(nodeName);
-    }
-
-    // Avoid adding some elements to fragments in IE < 9 because
-    // * Attributes like `name` or `type` cannot be set/changed once an element
-    //   is inserted into a document/fragment
-    // * Link elements with `src` attributes that are inaccessible, as with
-    //   a 403 response, will cause the tab/window to crash
-    // * Script elements appended to fragments will execute when their `src`
-    //   or `text` property is set
-    return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;
-  }
-
-  /**
-   * returns a shived DocumentFragment for the given document
-   * @memberOf html5
-   * @param {Document} ownerDocument The context document.
-   * @returns {Object} The shived DocumentFragment.
-   */
-  function createDocumentFragment(ownerDocument, data){
-    if (!ownerDocument) {
-        ownerDocument = document;
-    }
-    if(supportsUnknownElements){
-        return ownerDocument.createDocumentFragment();
-    }
-    data = data || getExpandoData(ownerDocument);
-    var clone = data.frag.cloneNode(),
-        i = 0,
-        elems = getElements(),
-        l = elems.length;
-    for(;i<l;i++){
-        clone.createElement(elems[i]);
-    }
-    return clone;
-  }
-
-  /**
-   * Shivs the `createElement` and `createDocumentFragment` methods of the document.
-   * @private
-   * @param {Document|DocumentFragment} ownerDocument The document.
-   * @param {Object} data of the document.
-   */
-  function shivMethods(ownerDocument, data) {
-    if (!data.cache) {
-        data.cache = {};
-        data.createElem = ownerDocument.createElement;
-        data.createFrag = ownerDocument.createDocumentFragment;
-        data.frag = data.createFrag();
-    }
-
-
-    ownerDocument.createElement = function(nodeName) {
-      //abort shiv
-      if (!html5.shivMethods) {
-          return data.createElem(nodeName);
-      }
-      return createElement(nodeName, ownerDocument, data);
-    };
-
-    ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
-      'var n=f.cloneNode(),c=n.createElement;' +
-      'h.shivMethods&&(' +
-        // unroll the `createElement` calls
-        getElements().join().replace(/[\w\-:]+/g, function(nodeName) {
-          data.createElem(nodeName);
-          data.frag.createElement(nodeName);
-          return 'c("' + nodeName + '")';
-        }) +
-      ');return n}'
-    )(html5, data.frag);
-  }
-
-  /*--------------------------------------------------------------------------*/
-
-  /**
-   * Shivs the given document.
-   * @memberOf html5
-   * @param {Document} ownerDocument The document to shiv.
-   * @returns {Document} The shived document.
-   */
-  function shivDocument(ownerDocument) {
-    if (!ownerDocument) {
-        ownerDocument = document;
-    }
-    var data = getExpandoData(ownerDocument);
-
-    if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
-      data.hasCSS = !!addStyleSheet(ownerDocument,
-        // corrects block display not defined in IE6/7/8/9
-        'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
-        // adds styling not present in IE6/7/8/9
-        'mark{background:#FF0;color:#000}' +
-        // hides non-rendered elements
-        'template{display:none}'
-      );
-    }
-    if (!supportsUnknownElements) {
-      shivMethods(ownerDocument, data);
-    }
-    return ownerDocument;
-  }
-
-  /*--------------------------------------------------------------------------*/
-
-  /**
-   * The `html5` object is exposed so that more elements can be shived and
-   * existing shiving can be detected on iframes.
-   * @type Object
-   * @example
-   *
-   * // options can be changed before the script is included
-   * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
-   */
-  var html5 = {
-
-    /**
-     * An array or space separated string of node names of the elements to shiv.
-     * @memberOf html5
-     * @type Array|String
-     */
-    'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video',
-
-    /**
-     * current version of html5shiv
-     */
-    'version': version,
-
-    /**
-     * A flag to indicate that the HTML5 style sheet should be inserted.
-     * @memberOf html5
-     * @type Boolean
-     */
-    'shivCSS': (options.shivCSS !== false),
-
-    /**
-     * Is equal to true if a browser supports creating unknown/HTML5 elements
-     * @memberOf html5
-     * @type boolean
-     */
-    'supportsUnknownElements': supportsUnknownElements,
-
-    /**
-     * A flag to indicate that the document's `createElement` and `createDocumentFragment`
-     * methods should be overwritten.
-     * @memberOf html5
-     * @type Boolean
-     */
-    'shivMethods': (options.shivMethods !== false),
-
-    /**
-     * A string to describe the type of `html5` object ("default" or "default print").
-     * @memberOf html5
-     * @type String
-     */
-    'type': 'default',
-
-    // shivs the document according to the specified `html5` object options
-    'shivDocument': shivDocument,
-
-    //creates a shived element
-    createElement: createElement,
-
-    //creates a shived documentFragment
-    createDocumentFragment: createDocumentFragment,
-
-    //extends list of elements
-    addElements: addElements
-  };
-
-  /*--------------------------------------------------------------------------*/
-
-  // expose html5
-  window.html5 = html5;
-
-  // shiv the document
-  shivDocument(document);
-
-  if(typeof module == 'object' && module.exports){
-    module.exports = html5;
-  }
-
-}(typeof window !== "undefined" ? window : this, document));

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

@@ -1,25 +1,34 @@
 const mixinsVue = {
     data: {
         cache: [],
+        isMobile: false,
         theme: "light",
         isSystemTheme: false,
         showGroup: false,
         showGoTop: false,
+        showTools: false,
         preferredTemplate: null,
-        isMobile: false,
+        semiTransparent: false,
         staticUrl: '/static/theme-server-status',
         adaptedTemplates: [
             { key: 'default', name: 'Default', icon: 'th large' },
             { key: 'angel-kanade', name: 'AngelKanade', icon: 'square' },
             { key: 'server-status', name: 'ServerStatus', icon: 'list' }
-        ]
+        ],
+        colors: [],
+        colorsDark: ['#4992FF', '#08C091', '#FDDD5F', '#FF6E76', '#58D9F9', '#7CFFB2', '#FF8A44', '#8D48E3', '#DD79FF', '#5470C6', '#3BA272', '#FAC758', '#EE6666', '#72C0DE', '#91CC76', '#FB8352', '#9A60B4', '#EA7BCC'],
+        colorsLight: ['#5470C6', '#3BA272', '#FAC758', '#EE6666', '#72C0DE', '#91CC76', '#FB8352', '#9A60B4', '#EA7BCC', '#4992FF', '#08C091', '#FDDD5F', '#FF6E76', '#58D9F9', '#7CFFB2', '#FF8A44', '#8D48E3', '#DD79FF'],
     },
     created() {
         this.isMobile = this.checkIsMobile();
         this.theme = this.initTheme();
         this.showGroup = this.initShowGroup();
+        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);
@@ -32,6 +41,9 @@ const mixinsVue = {
                 window.location.reload();
             }
         },
+        toggleShowTools() {
+            this.showTools = !this.showTools;
+        },
         initTheme() {
             const storedTheme = localStorage.getItem("theme");
             const theme = (storedTheme === 'dark' || storedTheme === 'light') ? storedTheme : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
@@ -45,7 +57,7 @@ const mixinsVue = {
             // 重新赋值全局调色
             this.colors = this.theme == "dark" ? this.colorsDark : this.colorsLight;
             
-            if(this.$root.page == 'index') {
+            if(this.$root.page == 'index' || this.$root.page == 'network') {
                 this.reloadCharts(); // 重新载入echarts图表
             }
         },
@@ -64,6 +76,21 @@ const mixinsVue = {
                 this.$root.initTooltip();
             }
         },
+        initSemiTransparent() {
+            const storedSemiTransparent = localStorage.getItem("semiTransparent");
+            const semiTransparent = storedSemiTransparent !== null ? JSON.parse(storedSemiTransparent) : false;
+            if (storedSemiTransparent === null) {
+                localStorage.setItem("semiTransparent", semiTransparent);
+            }
+            return semiTransparent;
+        },
+        toggleSemiTransparent(){
+            this.semiTransparent = !this.semiTransparent;
+            localStorage.setItem("semiTransparent", this.semiTransparent);
+            if(this.$root.page == 'index' || this.$root.page == 'network') {
+                this.reloadCharts(); // 重新载入echarts图表
+            }
+        },
         updateCookie(name, value) {
             document.cookie = name + "=" + value +"; path=/";
         },
@@ -106,6 +133,7 @@ const mixinsVue = {
         },
         handleScroll() {
             this.showGoTop = window.scrollY >= 100;
+            if(this.showTools) this.showTools = false;
         },
         groupingData(data, field) {
             let map = new Map();
@@ -126,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/static/theme-server-status/js/respond.min.js

@@ -1,5 +0,0 @@
-/*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl
- * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
- *  */
-
-!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);

resource/template/common/footer.html

@@ -10,12 +10,13 @@
 <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?v20241011"></script>
 <script>
     (function () {
         updateLang({{.LANG }});
     })();
 </script>
 </body>
+
 </html>
 {{end}}

resource/template/common/header.html

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

resource/template/common/menu.html

@@ -9,6 +9,7 @@
         <a class='item{{if eq .MatchedPath "/monitor"}} active{{end}}' href="/monitor"><i class="rss icon"></i>{{tr "Services"}}</a>
         <a class='item{{if eq .MatchedPath "/cron"}} active{{end}}' href="/cron"><i class="clock icon"></i>{{tr "Task"}}</a>
         <a class='item{{if eq .MatchedPath "/notification"}} active{{end}}' href="/notification"><i class="bell icon"></i>{{tr "Notification"}}</a>
+        <a class='item{{if eq .MatchedPath "/ddns"}} active{{end}}' href="/ddns"><i class="globe icon"></i>{{tr "DDNS"}}</a>
         <a class='item{{if eq .MatchedPath "/nat"}} active{{end}}' href="/nat"><i class="exchange icon"></i>{{tr "NAT"}}</a>
         <a class='item{{if eq .MatchedPath "/setting"}} active{{end}}' href="/setting">
             <i class="settings icon"></i>{{tr "Settings"}}

resource/template/component/api.html

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

resource/template/component/cron.html

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

resource/template/component/ddns.html

@@ -0,0 +1,86 @@
+{{define "component/ddns"}}
+<div class="ui tiny ddns modal transition hidden">
+    <div class="header">Add</div>
+    <div class="content">
+        <form id="ddnsForm" class="ui form">
+            <input type="hidden" name="ID">
+            <div class="field">
+                <label>{{tr "Name"}}</label>
+                <input type="text" name="Name">
+            </div>
+            <div class="field">
+                <label>{{tr "DDNSProvider"}}</label>
+                <select name="Provider" class="ui fluid dropdown" id="providerSelect" onchange="toggleFields()">
+                    {{ range $provider := .ProviderList }}
+                    <option value="{{ $provider.ID }}">
+                        {{ $provider.Name }}
+                    </option>
+                    {{ end }}
+                </select>
+            </div>
+            <div class="field">
+                <label>{{tr "DDNSDomains"}}</label>
+                <input type="text" name="DomainsRaw" placeholder="www.example.com">
+            </div>
+            <div class="field">
+                <label>{{tr "DDNSAccessID"}}</label>
+                <input type="text" name="AccessID" placeholder="{{tr "DDNSTokenID"}}">
+            </div>
+            <div class="field">
+                <label>{{tr "DDNSAccessSecret"}}</label>
+                <input type="text" name="AccessSecret" placeholder="{{tr "DDNSTokenSecret"}}">
+            </div>
+            <div class="field">
+                <label>{{tr "MaxRetries"}}</label>
+                <input type="number" name="MaxRetries" placeholder="3">
+            </div>
+            <div class="field">
+                <label>{{tr "WebhookURL"}}</label>
+                <input type="text" name="WebhookURL" placeholder="https://ddns.example.com/?record=#record#">
+            </div>
+            <div class="field">
+                <label>{{tr "WebhookMethod"}}</label>
+                <select name="WebhookMethod" class="ui fluid dropdown">
+                    <option value="1">GET</option>
+                    <option value="2">POST</option>
+                    <option value="3">PATCH</option>
+                    <option value="4">DELETE</option>
+                    <option value="5">PUT</option>
+                </select>
+            </div>
+            <div class="field">
+                <label>{{tr "WebhookRequestType"}}</label>
+                <select name="WebhookRequestType" class="ui fluid dropdown">
+                    <option value="1">JSON</option>
+                    <option value="2">Form</option>
+                </select>
+            </div>
+            <div class="field">
+                <label>{{tr "WebhookHeaders"}}</label>
+                <textarea name="WebhookHeaders" placeholder='{"User-Agent":"Nezha-Agent"}'></textarea>
+            </div>
+            <div class="field">
+                <label>{{tr "WebhookRequestBody"}}</label>
+                <textarea name="WebhookRequestBody" placeholder='{&#13;&#10; "ip": #ip#,&#13;&#10; "domain": "#domain#"&#13;&#10;}'></textarea>
+            </div>
+            <div class="field">
+                <div class="ui enableipv4 checkbox">
+                    <input name="EnableIPv4" type="checkbox" tabindex="0" class="hidden">
+                    <label>{{tr "EnableIPv4"}}</label>
+                </div>
+            </div>
+            <div class="field">
+                <div class="ui enableipv6 checkbox">
+                    <input name="EnableIPv6" type="checkbox" tabindex="0" class="hidden">
+                    <label>{{tr "EnableIPv6"}}</label>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="actions">
+        <div class="ui negative button">{{tr "Cancel"}}</div>
+        <button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
+        </button>
+    </div>
+</div>
+{{end}}

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

@@ -20,42 +20,35 @@
                 <label>{{tr "Secret"}}</label>
                 <input type="text" name="secret">
             </div>
+            <div class="field">
+                <label>{{tr "DDNSProfiles"}}</label>
+                <div class="ui fluid multiple ddns search selection dropdown">
+                    <input type="hidden" name="DDNSProfilesRaw">
+                    <i class="dropdown icon ddnsProfiles"></i>
+                    <div class="default text">{{tr "EnterIdAndNameToSearch"}}</div>
+                    <div class="menu"></div>
+                </div>
+            </div>
+            <div class="field">
+                <div class="ui enableddns checkbox">
+                    <input name="EnableDDNS" type="checkbox" tabindex="0" class="hidden" />
+                    <label>{{tr "EnableDDNS"}}</label>
+                </div>
+            </div>
             <div class="field">
                 <div class="ui hideforguest checkbox">
                     <input name="HideForGuest" type="checkbox" tabindex="0" class="hidden" />
                     <label>{{tr "HideForGuest"}}</label>
                 </div>
             </div>
-            <div class="field">
-                <div class="ui enableddns checkbox">
-                    <input name="EnableDDNS" type="checkbox" tabindex="0" />
-                    <label>{{tr "EnableDDNS"}}</label>
-                </div>
-            </div>
-            <div class="field">
-                <div class="ui enableipv4 checkbox">
-                    <input name="EnableIPv4" type="checkbox" tabindex="0" />
-                    <label>{{tr "EnableIPv4"}}</label>
-                </div>
-            </div>
-            <div class="field">
-                <div class="ui enableipv6 checkbox">
-                    <input name="EnableIpv6" type="checkbox" tabindex="0" />
-                    <label>{{tr "EnableIpv6"}}</label>
-                </div>
-            </div>
-            <div class="field">
-                <label>{{tr "DDNSDomain"}}</label>
-                <input type="text" name="DDNSDomain" placeholder="{{tr "DDNSDomain"}}">
-            </div>
-            <div class="field">
-                <label>{{tr "DDNSProfile"}}</label>
-                <input type="text" name="DDNSProfile" placeholder="{{tr "DDNSProfile"}}">
-            </div>
             <div class="field">
                 <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">
@@ -71,7 +64,7 @@
             </div>
         </form>
     </div>
-    <div class=" actions">
+    <div class="actions">
         <div class="ui negative button">{{tr "Cancel"}}</div>
         <button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
         </button>

resource/template/dashboard-default/api.html

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

resource/template/dashboard-default/cron.html

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

resource/template/dashboard-default/ddns.html

@@ -0,0 +1,58 @@
+{{define "dashboard-default/ddns"}}
+{{template "common/header" .}}
+{{template "common/menu" .}}
+<div class="nb-container">
+    <div class="ui container">
+        <div class="ui grid">
+            <div class="right floated right aligned twelve wide column">
+                <button class="ui right labeled nezha-primary-btn icon button" onclick="addOrEditDDNS()"><i
+                        class="add icon"></i> {{tr "AddDDNSProfile"}}
+                </button>
+            </div>
+        </div>
+        <table class="ui basic table">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>{{tr "Name"}}</th>
+                    <th>{{tr "EnableIPv4"}}</th>
+                    <th>{{tr "EnableIPv6"}}</th>
+                    <th>{{tr "DDNSProvider"}}</th>
+                    <th>{{tr "DDNSDomain"}}</th>
+                    <th>{{tr "MaxRetries"}}</th>
+                    <th>{{tr "Administration"}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{range $item := .DDNS}}
+                <tr>
+                    <td>{{$item.ID}}</td>
+                    <td>{{$item.Name}}</td>
+                    <td>{{$item.EnableIPv4}}</td>
+                    <td>{{$item.EnableIPv6}}</td>
+                    <td>{{index $.ProviderMap $item.Provider}}</td>
+                    <td>{{$item.DomainsRaw}}</td>
+                    <td>{{$item.MaxRetries}}</td>
+                    <td>
+                        <div class="ui mini icon buttons">
+                            <button class="ui button" onclick="addOrEditDDNS({{$item}})">
+                                <i class="edit icon"></i>
+                            </button>
+                            <button class="ui button"
+                                onclick="showConfirm('确定删除DDNS配置？','确认删除',deleteRequest,'/api/ddns/'+{{$item.ID}})">
+                                <i class="trash alternate outline icon"></i>
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                {{end}}
+            </tbody>
+        </table>
+    </div>
+</div>
+{{template "component/ddns" .}}
+{{template "common/footer" .}}
+<script>
+    $('.checkbox').checkbox()
+</script>
+{{end}}

resource/template/dashboard-default/file.html

@@ -0,0 +1,495 @@
+{{define "dashboard-default/file"}}
+<!DOCTYPE html>
+<html lang="{{.Conf.Language}}">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>File List</title>
+    <link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
+</head>
+<style>
+    body {
+        font-family: 'Roboto', sans-serif;
+    }
+
+    .file-list {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    .file-item {
+        margin: 5px 0;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    #top-app-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px;
+    }
+
+    #current-directory {
+        font-size: 1rem;
+        font-weight: normal;
+        margin: 0 15px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: calc(100% - 100px);
+        box-sizing: border-box;
+    }
+</style>
+
+<body>
+    <div id="top-app-bar">
+        <mdui-dropdown>
+            <mdui-button-icon slot="trigger" icon="menu"></mdui-button-icon>
+            <mdui-menu>
+                <mdui-menu-item id="refresh">{{tr "Refresh"}}</mdui-menu-item>
+                <mdui-menu-item id="copy">{{tr "CopyPath"}}</mdui-menu-item>
+                <mdui-menu-item id="goto">{{tr "Goto"}}</mdui-menu-item>
+            </mdui-menu>
+        </mdui-dropdown>
+        <span id="current-directory"></span>
+        <mdui-button-icon id="upload" icon="upload"></mdui-button-icon>
+    </div>
+
+    <mdui-list id="file-list" class="file-list"></mdui-list>
+
+    <mdui-dialog id="error-dialog" headline="Error"
+        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="{{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">{{tr "GotoGo"}}</mdui-button>
+        <mdui-button id="goto-close" slot="action" variant="tonal">{{tr "GotoClose"}}</mdui-button>
+    </mdui-dialog>
+
+    <script>
+        let currentPath = '/opt/nezha/';
+        let fileName = '';
+        let receivedBuffer = []; // 用于缓存数据块
+        let expectedLength = 0;
+        let receivedLength = 0;
+        let isFirstChunk = true;
+        let isUpCompleted = false;
+        let handleReady = false;
+        let worker;
+
+        function updateDirectoryTitle() {
+            const directoryTitle = document.getElementById('current-directory');
+            directoryTitle.textContent = `${currentPath}`;
+        }
+
+        function updateFileList(items) {
+            const fileListElement = document.getElementById('file-list');
+            fileListElement.innerHTML = '';
+
+            if (currentPath !== '/') {
+                const upItem = document.createElement('mdui-list-item');
+                upItem.className = 'file-item up-directory';
+                upItem.setAttribute('icon', 'arrow_back');
+                upItem.textContent = "..";
+                upItem.onclick = function () {
+                    const lastSlashIndex = currentPath.lastIndexOf('/', currentPath.length - 2);
+                    currentPath = currentPath.substring(0, lastSlashIndex + 1) || '/';
+                    listFile();
+                };
+                fileListElement.appendChild(upItem);
+            }
+
+            items.sort((a, b) => {
+                if (a.fileType === 'dir' && b.fileType !== 'dir') {
+                    return -1;
+                }
+                if (a.fileType !== 'dir' && b.fileType === 'dir') {
+                    return 1;
+                }
+                return a.name.localeCompare(b.name);
+            });
+
+            items.forEach(item => {
+                const listItem = document.createElement('mdui-list-item');
+                listItem.className = `file-item ${item.fileType.toLowerCase()}`;
+                listItem.setAttribute('nonclickable', 'true');
+                listItem.setAttribute('icon', 'insert_drive_file');
+                listItem.textContent = `${item.name}`;
+
+                if (item.fileType === 'dir') {
+                    listItem.setAttribute('nonclickable', 'false');
+                    listItem.setAttribute('icon', 'folder');
+                    listItem.style.cursor = 'pointer';
+                    listItem.onclick = function () {
+                        currentPath += `${item.name}/`;
+                        listFile();
+                    };
+                } else {
+                    const downloadButton = document.createElement('mdui-button-icon');
+                    downloadButton.setAttribute('slot', 'end-icon');
+                    downloadButton.setAttribute('icon', 'download');
+                    downloadButton.onclick = function () {
+                        const filePath = currentPath + item.name;
+                        fileName = item.name;
+                        downloadFile(filePath);
+                    };
+                    listItem.appendChild(downloadButton);
+                }
+
+                fileListElement.appendChild(listItem);
+            });
+            updateDirectoryTitle();
+        }
+
+        function resetUpdState() {
+            receivedBuffer = [];
+            expectedLength = 0;
+            receivedLength = 0;
+            isFirstChunk = true;
+        }
+
+        function downloadFile(filePath) {
+            showUpdModal('d');
+
+            const prefix = new Int8Array([1]); // Request download
+            const filePathMessage = new TextEncoder().encode(filePath);
+
+            const msg = new Int8Array(prefix.length + filePathMessage.length);
+            msg.set(prefix);
+            msg.set(filePathMessage, prefix.length);
+
+            socket.send(msg);
+        }
+
+        function listFile() {
+            const prefix = new Int8Array([0]);
+            const resizeMessage = new TextEncoder().encode(currentPath);
+
+            const msg = new Int8Array(prefix.length + resizeMessage.length);
+            msg.set(prefix);
+            msg.set(resizeMessage, prefix.length);
+
+            socket.send(msg);
+        }
+
+        async function uploadFile(file) {
+            showUpdModal('u');
+
+            const chunkSize = 1048576; // 1MB chunk
+            let offset = 0;
+
+            const filePath = `${currentPath}${file.name}`;
+            const fileSize = file.size;
+            const messageType = 2;
+
+            // Build header (type + file size + path)
+            const filePathBytes = new TextEncoder().encode(filePath);
+            const header = new ArrayBuffer(1 + 8 + filePathBytes.length);
+            const headerView = new DataView(header);
+
+            headerView.setUint8(0, messageType);
+            headerView.setBigUint64(1, BigInt(fileSize), false);
+
+            new Uint8Array(header, 9).set(filePathBytes);
+
+            // Send header
+            socket.send(header);
+
+            // Send data chunks
+            while (offset < fileSize) {
+                const chunk = file.slice(offset, offset + chunkSize);
+                const arrayBuffer = await readFileAsArrayBuffer(chunk);
+                socket.send(arrayBuffer);
+                offset += chunkSize;
+            }
+
+            const checkCompletion = setInterval(() => {
+                if (isUpCompleted) {
+                    clearInterval(checkCompletion);
+                    hideUpdModal();
+                    resetUpdState();
+                    listFile();
+                }
+            }, 100);
+        }
+
+        async function parseFileList(arrayBuffer) {
+            const dataView = new DataView(arrayBuffer);
+            const items = [];
+            let offset = 4;
+
+            const pathLength = dataView.getUint32(offset);
+            offset += 4;
+
+            const pathArray = new Uint8Array(arrayBuffer, offset, pathLength);
+            currentPath = new TextDecoder('utf-8').decode(pathArray);
+            offset += pathLength;
+
+            while (offset < dataView.byteLength) {
+                const fileType = dataView.getUint8(offset);
+                offset += 1;
+
+                const nameLength = dataView.getUint8(offset);
+                offset += 1;
+
+                if (offset + nameLength > dataView.byteLength) {
+                    console.error('Error: Name length exceeds buffer size');
+                    break;
+                }
+
+                const nameArray = new Uint8Array(arrayBuffer, offset, nameLength);
+                const name = new TextDecoder('utf-8').decode(nameArray);
+                offset += nameLength;
+
+                items.push({
+                    fileType: fileType === 0x01 ? 'dir' : 'f',
+                    name: name,
+                });
+            }
+
+            return { items };
+        }
+
+        function readFileAsArrayBuffer(blob) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = () => reject(reader.error);
+                reader.readAsArrayBuffer(blob);
+            });
+        }
+
+        function concatenateArrayBuffers(buffers) {
+            let totalLength = 0;
+            buffers.forEach(buf => totalLength += buf.byteLength);
+
+            const result = new Uint8Array(totalLength);
+            let offset = 0;
+            buffers.forEach(buf => {
+                result.set(new Uint8Array(buf), offset);
+                offset += buf.byteLength;
+            });
+
+            return result.buffer;
+        }
+
+        function arraysEqual(a, b) {
+            if (a.length !== b.length) return false;
+            for (let i = 0; i < a.length; i++) {
+                if (a[i] !== b[i]) return false;
+            }
+            return true;
+        }
+
+        async function copyTextToClipboard(text) {
+            try {
+                await navigator.clipboard.writeText(text);
+            } catch (err) {
+                console.error('Failed to copy text to clipboard: ', err);
+            }
+        }
+
+        async function handleError(errMsg) {
+            try {
+                console.error('Received error: ', errMsg);
+                hideUpdModal();
+                const errorDialog = document.getElementById('error-dialog');
+                errorDialog.open = true;
+                if (socket.readyState === WebSocket.OPEN) {
+                    socket.close(1000, 'Closing due to error');
+                }
+            } catch (error) {
+                console.error('Error while handling error and closing WebSocket:', error);
+            }
+        }
+
+        function showUpdModal(operation) {
+            const modal = document.getElementById('upd-modal');
+            modal.open = true;
+            if (operation === 'd') {
+                modal.setAttribute('headline', 'Downloading...');
+            } else if (operation === 'u') {
+                modal.setAttribute('headline', 'Uploading...');
+            }
+        }
+
+        function hideUpdModal() {
+            const modal = document.getElementById('upd-modal');
+            modal.open = false;
+        }
+
+        function waitForHandleReady() {
+            return new Promise(resolve => {
+                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}}');
+        socket.binaryType = 'arraybuffer';
+
+        socket.onmessage = async function (event) {
+            try {
+                const arrayBuffer = event.data;
+
+                if (isFirstChunk) {
+                    const identifier = new Uint8Array(arrayBuffer, 0, 4);
+                    const fileIdentifier = new Uint8Array([0x4E, 0x5A, 0x54, 0x44]); // NZTD
+                    const fileNameIdentifier = new Uint8Array([0x4E, 0x5A, 0x46, 0x4E]); // NZFN
+                    const errorIdentifier = new Uint8Array([0x4E, 0x45, 0x52, 0x52]); // NERR
+                    const completeIdentifier = new Uint8Array([0x4E, 0x5A, 0x55, 0x50]); // NZUP
+
+                    if (arraysEqual(identifier, fileIdentifier)) {
+                        worker = new Worker('/static/file.js');
+                        worker.onmessage = async function (event) {
+                            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);
+
+                                    // Delete the file in OPFS
+                                    window.addEventListener('beforeunload', async () => {
+                                        await worker.postMessage({ operation: 3, arrayBuffer: null, fileName: event.data.fileName });
+                                    });
+
+                                    hideUpdModal();
+                                    resetUpdState();
+                                    break;
+                            }
+                        };
+                        await worker.postMessage({ operation: 1, arrayBuffer: arrayBuffer, fileName: fileName });
+                        isFirstChunk = false;
+                    } else if (arraysEqual(identifier, fileNameIdentifier)) {
+                        // List files
+                        const { items } = await parseFileList(arrayBuffer);
+                        updateFileList(items);
+                        return;
+                    } else if (arraysEqual(identifier, errorIdentifier)) {
+                        // Handle error
+                        const errBytes = arrayBuffer.slice(4);
+                        const errMsg = new TextDecoder('utf-8').decode(errBytes);
+                        await handleError(errMsg);
+                        return;
+                    } else if (arraysEqual(identifier, completeIdentifier)) {
+                        // Upload is completed
+                        isUpCompleted = true;
+                        return;
+                    } else {
+                        console.log('Unknown identifier');
+                        return;
+                    }
+                } else {
+                    await waitForHandleReady();
+                    await worker.postMessage({ operation: 2, arrayBuffer: arrayBuffer, fileName: fileName });
+                }
+            } catch (error) {
+                console.error('Error processing received data:', error);
+            }
+        };
+
+        socket.onopen = function (event) {
+            listFile();
+        };
+
+        socket.onerror = function (event) {
+            console.error('WebSocket error:', event);
+        };
+
+        socket.onclose = function (event) {
+            console.log('WebSocket connection closed:', event);
+        };
+
+        document.getElementById('refresh').addEventListener('click', listFile);
+
+        document.getElementById('copy').addEventListener('click', async () => {
+            await copyTextToClipboard(currentPath);
+        });
+
+        document.getElementById('goto').addEventListener('click', function () {
+            const dialog = document.getElementById('goto-dialog');
+            const textField = document.getElementById('goto-text');
+            const goButton = document.getElementById('goto-go');
+            const closeButton = document.getElementById('goto-close');
+
+            dialog.open = true;
+
+            // Ensure the path ends with a separator
+            const updateText = function (event) {
+                let text = event.target.value;
+                if (!text.endsWith('/')) {
+                    text += '/';
+                }
+                return text;
+            };
+
+            const handleGoClick = function () {
+                let text = updateText({ target: textField });
+                currentPath = text;
+                listFile();
+                dialog.open = false;
+            };
+
+            textField.removeEventListener('change', updateText);
+            textField.addEventListener('change', updateText);
+
+            goButton.removeEventListener('click', handleGoClick);
+            goButton.addEventListener('click', handleGoClick);
+
+            closeButton.addEventListener("click", () => dialog.open = false);
+        });
+
+        document.getElementById('upload').addEventListener('click', async function () {
+            const fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.style.display = 'none';
+
+            fileInput.addEventListener('change', async function (event) {
+                const file = event.target.files[0];
+                if (file) {
+                    await uploadFile(file);
+                    isUpCompleted = false;
+                }
+            });
+
+            document.body.appendChild(fileInput);
+            fileInput.click();
+            document.body.removeChild(fileInput);
+        });
+    </script>
+</body>
+
+</html>
+{{end}}

resource/template/dashboard-default/monitor.html

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

resource/template/dashboard-default/nat.html

@@ -10,14 +10,14 @@
                 </button>
             </div>
         </div>
-        <table class="ui very basic table">
+        <table class="ui basic table">
             <thead>
                 <tr>
                     <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/notification.html

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

resource/template/dashboard-default/server.html

@@ -19,7 +19,7 @@
                 </button>
             </div>
         </div>
-        <table class="ui very basic table">
+        <table class="ui basic table">
             <thead>
                 <tr>
                     <th><button onclick="checkAllServer()" class="ui mini nezha-primary-btn button">{{tr "SelectAll"}}</button></th>
@@ -28,14 +28,12 @@
                     <th>{{tr "ServerGroup"}}</th>
                     <th>IP</th>
                     <th>{{tr "VersionNumber"}}</th>
-                    <th>{{tr "HideForGuest"}}</th>
                     <th>{{tr "EnableDDNS"}}</th>
-                    <th>{{tr "EnableIPv4"}}</th>
+                    <th>{{tr "HideForGuest"}}</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>
@@ -48,11 +46,8 @@
                     <td>{{$server.Tag}}</td>
                     <td>{{$server.Host.IP}}</td>
                     <td>{{$server.Host.Version}}</td>
-                    <td>{{$server.HideForGuest}}</td>
                     <td>{{$server.EnableDDNS}}</td>
-                    <td>{{$server.EnableIPv4}}</td>
+                    <td>{{$server.HideForGuest}}</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"
@@ -155,8 +159,8 @@
     }
     function batchEditServerGroup() {
         let groupName = prompt('{{tr "InputServerGroupName"}}')
-        if (!groupName) {
+        if (groupName === null) {
-            return;
+            return
         }
         const servers = []
         checkBoxList.forEach(cb => {

resource/template/dashboard-default/setting.html

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

resource/template/dashboard-default/terminal.html

@@ -1,6 +1,7 @@
 {{define "dashboard-default/terminal"}}
 <!DOCTYPE html>
 <html lang="{{.Conf.Language}}">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -22,17 +23,53 @@
     body {
         background-color: black;
     }
+
+    #file-list-iframe {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 30%;
+        height: 100%;
+        border: none;
+        background-color: white;
+        display: none;
+        z-index: 10;
+    }
+
+    #folder-button {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 25px;
+        font-size: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        z-index: 20;
+    }
 </style>
+
 <body onresize="onResize()">
     <div id="terminal-container"></div>
+    <iframe id="file-list-iframe" src=""></iframe>
+    <button id="folder-button">📁</button>
+
     <script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
-    <script src="https://unpkg.com/@xterm/[email protected]/lib/addon-attach.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/@xterm/[email protected]/lib/addon-attach.js"></script>
     <script>
         let sendResizing = false;
 
         function doResize() {
             fitAddon.fit()
+
             const w = fitAddon.proposeDimensions();
             const prefix = new Int8Array([1]);
             const resizeMessage = new TextEncoder().encode(JSON.stringify({
@@ -70,10 +107,13 @@
             cursorBlink: true,
         });
         const socket = new WebSocket((window.location.protocol == 'https:' ? 'wss' : 'ws') + '://' + window.location.host + '/terminal/' + '{{.SessionID}}');
+
         const attachAddon = new AttachAddon.AttachAddon(socket);
-        const fitAddon = new FitAddon.FitAddon();
         term.loadAddon(attachAddon);
+
+        const fitAddon = new FitAddon.FitAddon();
         term.loadAddon(fitAddon);
+
         term.open(document.getElementById('terminal-container'));
 
         socket.onopen = () => {
@@ -88,7 +128,29 @@
         socket.onerror = () => {
             alert('{{tr "TerminalConnectionFailed"}}')
         }
+
+        // 处理文件夹按钮点击事件
+        const folderButton = document.getElementById('folder-button');
+        const fileListIframe = document.getElementById('file-list-iframe');
+        let fileListVisible = false;
+
+        folderButton.addEventListener('click', () => {
+            if (!fileListVisible) {
+                // 显示文件列表
+                const params = new URLSearchParams({
+                    id: "{{.ServerID}}"
+                }).toString();
+                fileListIframe.src = `/file?${params}`;
+                fileListIframe.style.display = 'block';
+                fileListVisible = true;
+            } else {
+                // 隐藏文件列表
+                fileListIframe.style.display = 'none';
+                fileListVisible = false;
+            }
+        });
     </script>
 </body>
+
 </html>
 {{end}}

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

@@ -13,7 +13,7 @@
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/semantic-ui/2.4.1/semantic.min.js"></script>
 <script src="/static/semantic-ui-alerts.min.js"></script>
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
-<script src="/static/main.js?v20240330"></script>
+<script src="/static/main.js?v20241011"></script>
 <script src="/static/theme-default/js/mixin.js?v20240302"></script>
 <script>
     (function () {

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

@@ -25,7 +25,7 @@
                     v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br />
                   CPU: @#server.Host.CPU#@<br />
                   <template v-if="server.Host.GPU">
-                      GPU: @#server.Host.GPU#@
+                      GPU: @#server.Host.GPU#@<br />
                   </template>
                   {{tr "DiskUsed"}}:
                   @#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
@@ -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/footer.html

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

resource/template/theme-default/header.html

@@ -1,26 +1,40 @@
 {{define "theme-default/header"}}
 <!DOCTYPE html>
 <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">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/flag-icons.min.css">
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
-    <link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v20240616">
+    <link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v20240816">
+    <link rel="stylesheet" type="text/css" href="/static/darkmode.css?v20240816">
     <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/semantic.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script>
     <script src="/static/semantic-ui-alerts.min.js"></script>
-    <script src="/static/theme-default/js/mixin.js?v20240302"></script>
+    <script 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>
 </head>
+
 <body>
-{{end}} 
+    {{end}}
-            

resource/template/theme-default/home.html

@@ -194,7 +194,7 @@
             ]
         },
         mixins: [mixinsVue],
-            created() {
+        created() {
             this.servers = JSON.parse('{{.Servers}}').servers;
             this.group()
         },
@@ -240,12 +240,12 @@
                 const itemHeight = isMobile ? 10 : 10;
                 const gridLeft = 25;
                 const gridRight = 12;
-                const fontColor = "rgba(0, 0, 0, 0.68)";
                 const backgroundColor = '';
                 const borderColor = "#ffffff";
                 const chartData = this.chartDataList[id - 1];
                 const chartContainer = this.$refs[`chart${id}`][0];
-                const chart = echarts.init(chartContainer, null, {
+                const chartTheme = $('html').attr('nz-theme') == "dark" ? "dark" : "";
+                const chart = echarts.init(chartContainer, chartTheme, {
                     renderer: 'canvas',
                     useDirtyRect: false,
                     width: 'auto',
@@ -283,7 +283,6 @@
                         trigger: 'axis',
                         textStyle: {
                             fontSize: fontSize,
-                            color: fontColor
                         }
                     },
                     legend: {
@@ -292,7 +291,6 @@
                         show: true,
                         textStyle: {
                             fontSize: fontSize,
-                            color: fontColor
                         },
                         lineStyle: {
                             cap: 'butt'
@@ -332,7 +330,6 @@
                     series: seriesData,
                     textStyle: {
                         fontSize: fontSize,
-                        color: fontColor
                     },
                     grid: {
                         top: '30',
@@ -477,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="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;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) {
@@ -65,21 +69,13 @@
                     }
                 },
                 grid: {
-                    left: '8%',
+                    left: this.isMobile ? '8%' : '3.8%',
-                    right: '8%',
+                    right: this.isMobile ? '8%' : '3.8%',
-                },
-                backgroundColor: 'rgba(255, 255, 255, 0.8)',
-                toolbox: {
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: 'none'
-                        },
-                        restore: {},
-                        saveAsImage: {}
-                    }
                 },
+                backgroundColor: '',
                 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);
             },
@@ -243,7 +251,8 @@
                 return str.includes('Windows')
             },
             renderChart() {
-              this.myChart = echarts.init(this.$refs.chartDom);
+              const chartTheme = $('html').attr('nz-theme') == "dark" ? "dark" : "";
+              this.myChart = echarts.init(this.$refs.chartDom,chartTheme);
               this.myChart.setOption(this.option);
             },
             resizeHandle () {

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

@@ -1,21 +0,0 @@
-{{define "theme-server-status/content-footer"}}
-<footer>
-    <p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p>
-</footer>
-<aside class="toolbox">
-    <span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
-        <i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
-    </span>
-    <span class="toggleView">
-        <i v-if="showGroup" @click="toggleShowGroup" class="show-nogroup bi bi-justify"></i>
-        <i v-else @click="toggleShowGroup" class="show-group bi bi-view-stacked"></i>
-    </span>
-    <span class="setTheme">
-        <i v-if="theme === 'light'" @click="setTheme('dark')" class="setTheme-dark bi bi-moon-fill"></i>
-        <i v-else @click="setTheme('light')" class="setTheme-light bi bi-brightness-high-fill"></i>
-    </span>
-    <span v-if="showGoTop" class="showGoTop">
-        <i @click="goTop" class="goTop bi bi-arrow-up"></i>
-    </span>
-</aside>
-{{end}}

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

@@ -1,4 +1,38 @@
 {{define "theme-server-status/footer"}}
+    </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>
+    <aside class="toolbox">
+        <template v-if="showTools">
+            <span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
+                <i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
+            </span>
+            <span class="toggleView">
+                <i v-if="showGroup" @click="toggleShowGroup" class="show-nogroup bi bi-justify"></i>
+                <i v-else @click="toggleShowGroup" class="show-group bi bi-view-stacked"></i>
+            </span>
+            <span class="toggleSemiTransparent" @click="toggleSemiTransparent">
+                <i class="bi" :class="semiTransparent ? 'bi-droplet' : 'bi-droplet-half'"></i>
+            </span>
+        </template>
+           <span v-if="!showTools">
+            <i @click="toggleShowTools" class="bi bi-three-dots"></i>
+        </span>
+        <span class="setTheme">
+            <i v-if="theme === 'light'" @click="setTheme('dark')" class="setTheme-dark bi bi-moon-fill"></i>
+            <i v-else @click="setTheme('light')" class="setTheme-light bi bi-brightness-high-fill"></i>
+        </span>
+        <span v-if="showGoTop" class="showGoTop">
+            <i @click="goTop" class="goTop bi bi-arrow-up"></i>
+        </span>
+    </aside>
+    <template v-if="semiTransparent">
+        <link rel="stylesheet" href="/static/theme-server-status/css/light.plus.css?v20241008">
+    	<link rel="stylesheet" href="/static/theme-server-status/css/dark.plus.css?v20241008"> 
+    </template>
+</div>
+{{if ts .CustomCode}}{{.CustomCode|safe}}{{end}}
 </body>
 </html>
 {{end}}

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

@@ -2,16 +2,22 @@
 <!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]/dist/css/bootstrap-theme.min.css">
-    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240724">
-    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240724">
-    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240407">
     <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">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/flag-icons.min.css">
@@ -20,17 +26,13 @@
     <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>
-    <script src="/static/theme-server-status/js/mixin.js?v20240711"></script>
+    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20241008">
-    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20241008">
-    <!--[if lt IE 9]>
+    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20241008">
-    <script src="/static/theme-server-status/js/html5shiv.js"></script>
+    <script src="/static/theme-server-status/js/mixin.js?v20240915"></script>
-    <script src="/static/theme-server-status/js/respond.min.js"></script>
-    <![endif]-->
-    {{if ts .CustomCode}}
-    {{.CustomCode|safe}}
-    {{end}}
 </head>
 <body>
+<div id="app">
 {{end}}
 
 

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="nodesNoTag.some(item => item.additional && item.additional.price && Object.keys(item.additional.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="nodesNoTag.some(item => item.additional && item.additional.remaining && Object.keys(item.additional.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>
@@ -30,11 +32,18 @@
                 <i v-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i>
                 <i v-else-if='getFontLogoClass(node.host.Platform) == "" && node.stateuptime > 0' class="fl-tux"></i>
                 <i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i>
-                <span class="node-cell-os-text">@#getPlatformName(node.os)#@</span>
+                <span class="node-cell-os-text">@#getPlatformName(node.os) === '' && node.stateuptime > 0 ? 'linux' : getPlatformName(node.os)#@</span>
             </td>
-            <td style="text-align: center;" class="node-cell location">
+            <td class="node-cell location center">
-                <i :class="'fi fi-' + node.location"></i>
+                <i :class="'fi fi-' + (node.stateuptime > 0 ? (node.location || 'rb') : '')"></i>
-                <span class="node-cell-location-text text-uppercase">@#node.location#@</span>
+                <span class="node-cell-location-text text-uppercase">@#node.stateuptime > 0 ? (node.location || 'RB') : ''#@</span>
+            </td>
+            <td v-if="nodesNoTag.some(item => item.additional && item.additional.price && Object.keys(item.additional.price).length > 0)" class="node-cell price center">
+                <template v-if="node.additional && node.additional.price">
+                    <span v-if="node.additional.price.amount == 0" class="node-cell-price-text">FREE</span>
+                    <span v-else-if="node.additional.price.amount == -1" class="node-cell-price-text">PAYG</span>
+                    <span v-else class="node-cell-price-text">@#node.additional.price.amount#@@#(node.additional.price.cycle ? '/' + node.additional.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>
@@ -59,6 +68,21 @@
                     </div>
                 </div>
             </td>
+            <td v-if="nodesNoTag.some(item => item.additional && item.additional.remaining && Object.keys(item.additional.remaining).length > 0)" class="node-cell remaining">
+                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
+                    <template v-if="node.additional && node.additional.remaining.format">
+                        <div :style="node.additional.remaining.format.style" :class="node.additional.remaining.days == 'lifetime' ? '' : node.additional.remaining.format.class"></div>
+                        <div class="additional">
+                            <small v-if="node.additional.remaining.days == 'lifetime'">{{tr "Lifetime"}}</small>
+                            <small v-else-if="node.additional.remaining.days < 0">{{tr "Expired"}}</small>
+                            <small v-else>
+                                <span class="node-cell-remaining-days">@#node.additional.remaining.days#@{{tr "Days"}}</span>
+                                <span class="node-cell-remaining-percent">@#node.additional.remaining.percent#@%</span>
+                            </small>
+                        </div>
+                    </template>
+                </div>
+            </td>
         </tr>
         <tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'">
             <td colspan="16">
@@ -66,8 +90,8 @@
                     <div style="display: flex;left-items: center;justify-content: center;flex-direction: column; max-width: 89vw">
                         <span class="node-cell-expand">
                             <span class="node-cell-expand-label">{{tr "Platform"}}:</span>
-                            @#node.host.Platform#@-@#node.host.PlatformVersion#@
+                            <span v-if="node.host.Platform">@#node.host.Platform#@@#node.host.PlatformVersion ? '-' + node.host.PlatformVersion : ''#@</span>
-                            [<span v-if="node.host.Virtualization">@#node.host.Virtualization#@:</span>@#node.host.Arch#@]
+                            <span v-if="node.host.Arch">[@#node.host.Virtualization ? node.host.Virtualization + ':' : ''#@@#node.host.Arch#@]</span>
                         </span>
                         <span class="node-cell-expand" v-if="node.host.CPU">
                             <span class="node-cell-expand-label">CPU:</span>
@@ -143,7 +167,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="group.data.some(item => item.additional && item.additional.price && Object.keys(item.additional.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="group.data.some(item => item.additional && item.additional.remaining && Object.keys(item.additional.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>
@@ -33,11 +35,18 @@
                 <i v-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i>
                 <i v-else-if='getFontLogoClass(node.host.Platform) == "" && node.stateuptime > 0' class="fl-tux"></i>
                 <i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i>
-                <span class="node-cell-os-text">@#getPlatformName(node.os)#@</span>
+                <span class="node-cell-os-text">@#getPlatformName(node.os) === '' && node.stateuptime > 0 ? 'linux' : getPlatformName(node.os)#@</span>
             </td>
-            <td style="text-align: center;" class="node-cell location">
+            <td class="node-cell location center">
-                <i :class="'fi fi-' + node.location"></i>
+                <i :class="'fi fi-' + (node.stateuptime > 0 ? (node.location || 'rb') : '')"></i>
-                <span class="node-cell-location-text text-uppercase">&nbsp;@#node.location#@</span>
+                <span class="node-cell-location-text text-uppercase">@#node.stateuptime > 0 ? (node.location || 'RB') : ''#@</span>
+            </td>
+            <td v-if="group.data.some(item => item.additional && item.additional.price && Object.keys(item.additional.price).length > 0)" class="node-cell price center">
+                <template v-if="node.additional && node.additional.price">
+                    <span v-if="node.additional.price.amount == 0" class="node-cell-price-text">FREE</span>
+                    <span v-else-if="node.additional.price.amount == -1" class="node-cell-price-text">PAYG</span>
+                    <span v-else class="node-cell-price-text">@#node.additional.price.amount#@@#(node.additional.price.cycle ? '/' + node.additional.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>
@@ -62,6 +71,21 @@
                     </div>
                 </div>
             </td>
+            <td v-if="group.data.some(item => item.additional && item.additional.remaining && Object.keys(item.additional.remaining).length > 0)" class="node-cell remaining">
+                <div :class="['progress', node.online ? 'progress-online' : 'progress-offline']">
+                    <template v-if="node.additional && node.additional.remaining.format">
+                        <div :style="node.additional.remaining.format.style" :class="node.additional.remaining.days == 'lifetime' ? '' : node.additional.remaining.format.class"></div>
+                        <div class="additional">
+                            <small v-if="node.additional.remaining.days == 'lifetime'">{{tr "Lifetime"}}</small>
+                            <small v-else-if="node.additional.remaining.days < 0">{{tr "Expired"}}</small>
+                            <small v-else>
+                                <span class="node-cell-remaining-days">@#node.additional.remaining.days#@{{tr "Days"}}</span>
+                                <span class="node-cell-remaining-percent">@#node.additional.remaining.percent#@%</span>
+                            </small>
+                        </div>
+                    </template>
+                </div>
+            </td>
         </tr>
         <tr class="expandRow" :class="index % 2 === 0 ? 'odd': 'even'">
             <td colspan="16">
@@ -69,8 +93,8 @@
                     <div style="display: flex;left-items: center;justify-content: center;flex-direction: column; max-width: 89vw">
                         <span class="node-cell-expand">
                             <span class="node-cell-expand-label">{{tr "Platform"}}:</span>
-                            @#node.host.Platform#@-@#node.host.PlatformVersion#@
+                            <span v-if="node.host.Platform">@#node.host.Platform#@@#node.host.PlatformVersion ? '-' + node.host.PlatformVersion : ''#@</span>
-                            [<span v-if="node.host.Virtualization">@#node.host.Virtualization#@:</span>@#node.host.Arch#@]
+                            <span v-if="node.host.Arch">[@#node.host.Virtualization ? node.host.Virtualization + ':' : ''#@@#node.host.Arch#@]</span>
                         </span>
                         <span class="node-cell-expand" v-if="node.host.CPU">
                             <span class="node-cell-expand-label">CPU:</span>
@@ -146,7 +170,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

@@ -1,34 +1,35 @@
 {{define "theme-server-status/home"}}
 {{template "theme-server-status/header" .}}
-<div id="app">
+{{template "theme-server-status/menu" .}}   
-    {{template "theme-server-status/content-nav" .}}   
+<!--  showGroup true -->
-    <!--  showGroup true -->
+<template v-if="showGroup">
-    <template v-if="showGroup">
+    <div class="container-fluid table-responsive content" v-for="group in nodesTag">
-        <section class="container table-responsive content" style="max-width: 95vw" v-for="group in nodesTag">
+        {{template "theme-server-status/home-group-true" .}} 
-            {{template "theme-server-status/home-group-true" .}} 
+    </div>
-        </section>
+</template>
-    </template>
+<!--  showGroup false -->
-    <!--  showGroup false -->
+<template v-else>
-    <template v-else>
+    <div class="container-fluid table-responsive content">
-        <section class="container table-responsive content" style="max-width: 95vw">
+        {{template "theme-server-status/home-group-false" .}}
-            {{template "theme-server-status/home-group-false" .}}
+    </div>
-        </section>
+</template>
-    </template>
+<div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true" style="padding-left:0">
-    <div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
-        <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
-            <div class="modal-content">
+            <div class="modal-header">
-                <div class="modal-header">
+                <h4 class="modal-title" id="mapChartTitle">
-                    <h4 class="modal-title" id="mapChartTitle">{{tr "ServersOnWorldMap"}}</h4>
+                    <i class="bi bi-geo-alt"></i>
-                    <i class="bi bi-x" data-dismiss="modal" aria-label="Close"></i>
+                    <span>{{tr "ServersOnWorldMap"}}</span>
-                </div>
+                </h4>
-                <div class="modal-body">
+                <i class="bi bi-x xclose" data-dismiss="modal" aria-label="Close"></i>
-                    <div id="mapChart" style="width:100%;height:auto;"></div>
+            </div>
-                </div>
+            <div class="modal-body">
+                <div id="mapChart"></div>
             </div>
         </div>
     </div>
-    {{template "theme-server-status/content-footer" .}}
 </div>
+{{template "theme-server-status/footer" .}}
 <script>
     new Vue({
         el: '#app',
@@ -41,6 +42,7 @@
             servers: [],
             nodesTag: [],
             nodesNoTag: [],
+            additional: {},
             chartDataList: [],
             ws: null,
             language: {{.Conf.Language}},
@@ -70,17 +72,32 @@
         mixins: [mixinsVue],
         created() {
             this.servers = JSON.parse('{{.Servers}}').servers;
+            this.additional = this.initAdditional(this.servers);
             if(this.showGroup) {
                 this.nodesTag = this.groupingData(this.handleNodes(this.servers),"Tag");
+                this.nodesTag.forEach(group => {
+                    group.data.forEach(item => {
+                        const additionalData = this.additional[item.ID];
+                        if (additionalData) {
+                            item.additional = additionalData; // 添加 additional 属性
+                        }
+                    });
+                });
             } else {
                 this.nodesNoTag = this.handleNodes(this.servers);
+                this.nodesNoTag.forEach(item => {
+                    const additionalData = this.additional[item.ID];
+                    if (additionalData) {
+                        item.additional = additionalData; // 添加 additional 属性
+                    }
+                });
             }
             this.initCountryMap().then(countryMap => {
                 this.countryMap = countryMap;
                 this.countryNameMap = this.initCountryNameMap();
                 this.countryServer = this.initCountryServer();
                 this.countryMapChartData = this.initCountryMapChartData();
-            })
+            });
         },
         mounted() {
             // 初始化时建立WebSocket连接
@@ -97,6 +114,49 @@
             });
         },
         methods: {
+            initAdditional(servers) {
+                let nodes = {};
+                servers?.forEach(server => {
+                    if (server.PublicNote) {
+                        const remainingFormat = this.getRemainingFormat(server.live, server.PublicNote);
+                        const remainingDays = this.getRemainingDays(this.getNoteElementValue(server.PublicNote, "billingDataMod", "endDate"), server.PublicNote);
+                        const remainingPercent = this.getRemainingPercent(
+                            this.getNoteElementValue(server.PublicNote, "billingDataMod", "startDate"),
+                            this.getNoteElementValue(server.PublicNote, "billingDataMod", "endDate"),
+                            server.PublicNote
+                        );
+                        const priceAmount = this.getNoteElementValue(server.PublicNote, "billingDataMod", "amount");
+                        const priceCycle = this.getNoteElementValue(server.PublicNote, "billingDataMod", "cycle");
+
+                        // 初始化节点
+                        nodes[server.ID] = {
+                            "remaining": {},
+                            "price": {}
+                        };
+
+                        if (remainingFormat) {
+                            nodes[server.ID].remaining.format = remainingFormat;
+                        }
+
+                        if (remainingDays) {
+                            nodes[server.ID].remaining.days = remainingDays;
+                        }
+
+                        if (remainingPercent) {
+                            nodes[server.ID].remaining.percent = this.toFixed2(100 - remainingPercent);
+                        }
+
+                        if (priceAmount) {
+                            nodes[server.ID].price.amount = priceAmount;
+                        }
+
+                        if (priceCycle && priceAmount) {
+                            nodes[server.ID].price.cycle = priceCycle;
+                        }
+                    }
+                });
+                return nodes;
+            },
             initCountryMap() {
                 return fetch(this.staticUrl + '/maps/nezha.countrymap.json')
                     .then(response => response.json())
@@ -154,15 +214,17 @@
                     return;
                 }
                 const unit = this.language=='zh-CN' ? '台' : 'servers';
-                const isMobile = this.checkIsMobile();
+                const width = window.innerWidth;
-                const width = isMobile ? 338 : 1102;
+                const height = 0.95 * window.innerHeight;
-                const height = isMobile ? 200 : 500;
                 const backgroundColor = this.theme == "dark" ? '' : '';
                 const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
                 const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
                 const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff"; 
-                const fontSize = isMobile ? 10 : 12;
+                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 +232,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 +293,10 @@
                                 }
                             ]
                         };
-                        mapChart.setOption(option);
+                        setTimeout(() => {
+                            mapChart.hideLoading();
+                            mapChart.setOption(option);
+                        }, 1000);
                     });
             },
             isWindowsPlatform(str) {
@@ -382,8 +454,22 @@
                     }
                     if(this.showGroup) {
                         this.nodesTag = this.groupingData(this.handleNodes(data.servers),"Tag");
+                        this.nodesTag.forEach(group => {
+                            group.data.forEach(item => {
+                                const additionalData = this.additional[item.ID];
+                                if (additionalData) {
+                                    item.additional = additionalData; // 添加 additional 属性
+                                }
+                            });
+                        });
                     } else {
                         this.nodesNoTag = this.handleNodes(data.servers);
+                        this.nodesNoTag.forEach(item => {
+                            const additionalData = this.additional[item.ID];
+                            if (additionalData) {
+                                item.additional = additionalData; // 添加 additional 属性
+                            }
+                        });
                     }
                 }
                 this.ws.onclose = () => {
@@ -470,115 +556,188 @@
                 // 如果所有元素的 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 => {
-                        console.error('Error fetching data:', error);
+                        console.log('Error fetching data:', error);
                     });
             },
             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 isMobile = this.checkIsMobile();
+                const fontSize = this.isMobile ? 10 : 14;
-                const fontSize = isMobile ? 10 : 14;
+                const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 25 : 36);
-                const gridLeft = isMobile ? 25 : 36;
+                const gridRight = this.isMobile ? 5 : 20;
-                const gridRight = isMobile ? 5 : 20;
+                const legendLeft = this.isMobile ? 'center' : 'center';
-                const legendLeft = isMobile ? 'center' : 'center';
+                const legendTop = this.isMobile ? 5 : 5;
-                const legendTop = isMobile ? 5 : 5;
+                const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
-                const legendPadding= 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 = theme == "dark" ? "#1C1D26" : '#ffffff';
+                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 = theme == "dark" ? "#31363B" : "#ffffff";
+                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 chart = echarts.init(chartContainer, chartTheme, {
+                const splitLineWidth = this.isMobile ? 0.5 : 1;
+                const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
+                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',
-                    };
+                            connectNulls: true,
+                            legendHoverLink: false,
+                            emphasis: {
+                                disabled: true
+                            },
+                            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) / (isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (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 = isMobile ? 'rect' : ""; 
+                const legendIcon = this.isMobile ? 'rect' : ""; 
-                const itemWidth = isMobile ? 10 : 25;
+                const itemWidth = this.isMobile ? 10 : 25;
-                const itemHeight = isMobile ? 10 : 14;
+                const itemHeight = this.isMobile ? 10 : 14;
                 chart.resize({
                     width: 'auto',
                     height: height
                 });
-
                 const option = {
+                    color: this.colors,
                     backgroundColor: backgroundColor,
-                    title: {
+                    textStyle: {
-                        show: false
+                        fontSize: fontSize,
+                        color: fontColor
                     },
-                    tooltip: {
+                    grid: {
-                        trigger: 'axis',
+                        top: gridTop,
-                        backgroundColor: tooltipBackgroundColor,
+                        left: gridLeft,
-                        borderColor: tooltipBorderColor,
+                        right: gridRight,
-                        textStyle: {
+                    },
-                            fontSize: fontSize,
+                    title: {
-                            color: fontColor
+                        show: false,
+                    },
+                    series: seriesData.flat(),
+                    xAxis: {
+                        type: 'time',
+                        axisLabel: {
+                            textStyle: {
+                                fontSize: fontSize
+                            }
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel: {
+                            textStyle: {
+                                fontSize: fontSize
+                            }
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                width: splitLineWidth
+                            }
                         }
                     },
                     legend: {
@@ -596,21 +755,26 @@
                         itemWidth: itemWidth,
                         itemHeight: itemHeight,
                     },
-                    xAxis: {
+                    tooltip: {
-                        type: 'time',
+                        trigger: 'axis',
-                        data: xAxisData,
+                        backgroundColor: tooltipBackgroundColor,
-                        axisLabel: {
+                        borderColor: tooltipBorderColor,
-                            textStyle: {
+                        textStyle: {
-                                fontSize: fontSize
+                            fontSize: fontSize,
-                            }
+                            color: fontColor
-                        }
+                        },
-                    },
+                        formatter: function (params) {
-                    yAxis: {
+                            let tooltipContent = '';
-                        type: 'value',
+                            const formattedTime = new Date(params[0].value[0]).toLocaleString(); 
-                        axisLabel: {
+                            tooltipContent += `<span style="line-height:2em">${formattedTime}</span><br>`;
-                            textStyle: {
+                            params.forEach(param => {
-                                fontSize: fontSize
+                                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: [
@@ -619,31 +783,370 @@
                             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 'mo':
+                    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 'yr':
+                    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.log("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.log("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') {
+                    return null; // 如果无效，返回 null 或其他错误处理逻辑
+                }
+
+                // 处理特殊时间格式
+                if (startDate.includes('0000-00-00') || endDate.includes("0000-00-00")) {
+                    return this.formatPercents(online, this.toFixed2(100));
+                }
+
+                // 检查 startDate 和 endDate 是否为合法的Date
+                if (isNaN(new Date(startDate).getTime()) || isNaN(new Date(endDate).getTime())) {
+                    return {
+                        "class": "",
+                        "style": "width: 0%",
+                        "percent": "0"
+                    }
+                }
+
+                //处理特殊时间格式
+                const percent = this.getRemainingPercent(startDate, endDate, note);
+                return this.formatPercents(online, this.toFixed2(percent));                    
+                
+            },
+            getRemainingDays(endDate, note) {
+                // 检查 endDate 是否有效
+                if (!endDate || typeof endDate !== 'string') {
+                    return null;
+                }
+
+                // 处理特殊时间格式
+                if (endDate.includes("0000-00-00")) {
+                    return "lifetime";
+                }
+
+                // 检查 startDate 和 endDate 是否为合法的Date
+                if (isNaN(new Date(endDate).getTime())) {
+                    return "NaN";
+                }
+                
+                // 获取当前时间，并调整时区
+                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 (!startDate || !endDate || typeof startDate !== 'string' || typeof endDate !== 'string') {
+                    return null;
+                }
+
+                // 处理特殊时间格式
+                if (startDate.includes("0000-00-00") || endDate.includes("0000-00-00")) {
+                    return 100;
+                }
+
+                // 检查 startDate 和 endDate 是否为合法的Date
+                if (isNaN(new Date(startDate).getTime()) || isNaN(new Date(endDate).getTime())) {
+                    return "NaN";
+                }
+                
+                // 获取当前时间并调整时区
+                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.01; //避免当条件判断!percent被过滤
+                }
+                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);
             }
         }
     })
 </script>
-{{template "theme-server-status/footer" .}}
 {{end}}

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

@@ -1,6 +1,6 @@
-{{define "theme-server-status/content-nav"}}
+{{define "theme-server-status/menu"}}
-<header role="navigation" class="navbar navbar-inverse navbar-fixed-top" style="z-index:99999999;">
+<header role="navigation" class="navbar navbar-inverse navbar-fixed-top">
-    <div class="container">
+    <div class="container-fluid">
         <div class="navbar-header">
             <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                 <span class="sr-only">Toggle navigation</span>
@@ -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,5 +53,6 @@
         </nav>
     </div>
 </header>
+<section class="nezha">
 {{end}}
 

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

@@ -1,243 +1,363 @@
 {{define "theme-server-status/network"}}
 {{template "theme-server-status/header" .}}
-<div id="app">
+{{template "theme-server-status/menu" .}}
-    {{template "theme-server-status/content-nav" .}}
+<div class="container-fluid content network-box">
-    <div class="container table-responsive content" style="max-width: 95vw">
+    <div class="network-box-header btn-group">
-        <table class="table table-striped table-condensed table-hover">
+        <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <button class="ui nezha-primary-btn button"
+            <i class="bi bi-list-ul"></i> {{tr "NetworkSpiterList"}} <i class="bi bi-chevron-compact-down"></i>
-                    v-for="server in servers"
+        </div>
-                    style="margin-top: 3px"
+        <ul class="dropdown-menu">
-                    @click="redirectNetwork(server.ID)">
+            <li class="input-group fixed-top">
-                @#server.Name#@&nbsp;&nbsp;<i :class="'fi fi-' + server.Host.CountryCode"></i><span class="node-cell-location-text text-uppercase">&nbsp;&nbsp;@#server.Host.CountryCode#@</span>
+                <input type="text" id="dropdown-search" class="form-control" placeholder="Search...">
-            </button>
+            </li>
-        </table>
+            <li class="dropdown-item" v-for="server in servers" @click="showCharts(server.ID)">
+                <a><i :class="'fi fi-' + (server.Host.CountryCode || 'rb')"></i> @#server.Name#@ <i v-if="server.ID == currentServerId" class="check icon"></i></a>
+            </li>
+        </ul>
     </div>
-    <div class="container table-responsive content" style="max-width: 95vw">
+    <div class="chartTitle" @click="showCharts(nextServerId)"><i class="chartCountryCode" :class="'fi fi-' + chartCountryCode"></i> @#chartTitle#@</div>
-        <div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
+    <div id="chartbox" style="width:100%;height:auto;"></div>
-    </div>
-    {{template "theme-server-status/content-footer" .}}
 </div>
-
+{{template "theme-server-status/footer" .}}
 <script>
-    const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
-    const initData = JSON.parse('{{.Servers}}').servers;
-    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
     new Vue({
         el: '#app',
         delimiters: ['@#', '#@'],
         data: {
             page: 'network',
-            defaultTemplate: {{.Conf.Site.Theme}},
+            defaultTemplate: "{{.Conf.Site.Theme}}",
-            templates: {{.Themes}},
+            templates: "{{.Themes }}",
-            servers: initData,
+            servers: [],
-            option: {
+            chartDataList: [],
-                tooltip: {
+            chartTitle: '',
-                    trigger: 'axis',
+            chartCountryCode: '',
-                    position: function (pt) {
+            chart: null,
-                        return [pt[0], '10%'];
+            currentServerId: '',
-                    },
+            nextServerId: '',
-                    formatter: function(params){
-                        let result = params[0].axisValueLabel + "<br />";
-                        params.forEach(function(item){
-                            result += item.marker + item.seriesName + ": " + item.value[1].toFixed(2) + " ms<br />";
-                         })
-                        return result;
-                    },
-                    confine: true,
-                    transitionDuration: 0
-                },
-                title: {
-                    left: 'center',
-                    text: "",
-                    textStyle: {}
-                },
-                legend: {
-                    top: '5%',
-                    data: [],
-                    textStyle: {
-                        fontSize: 14
-                    }
-                },
-                backgroundColor: 'rgba(255, 255, 255, 0.8)',
-                toolbox: {
-                    feature: {
-                        dataZoom: {
-                            yAxisIndex: 'none'
-                        },
-                        restore: {},
-                        saveAsImage: {}
-                    }
-                },
-                dataZoom: [
-                    {
-                        start: 0,
-                        end: 100
-                    }
-                ],
-                xAxis: {
-                    type: 'time',
-                    boundaryGap: false
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: false
-                },
-                series: [],
-            },
-            chartOnOff: true,
         },
         mixins: [mixinsVue],
+        created() {
+            this.servers = JSON.parse('{{.Servers}}').servers;
+            this.showCharts(this.servers[0].ID);
+        },
         mounted() {
-            this.renderChart();
+            this.initSearch();            
-            this.parseMonitorInfo(monitorInfo);
         },
         methods: {
-            getFontLogoClass(str) {
+            showCharts(id) {
-                if (["almalinux",
+                // 发起数据请求
-                        "alpine",
+                const url = `/api/v1/monitor/${id}`;
-                        "aosc",
+                fetch(url)
-                        "apple",
+                    .then(response => response.json())
-                        "archlinux",
+                    .then(data => {
-                        "archlabs",
+                        if (data.result) { // 数据请求成功，更新数据并渲染图表
-                        "artix",
+                            this.chartDataList[id] = data.result;
-                        "budgie",
+                            this.$nextTick(() => {
-                        "centos",
+                                this.renderCharts(id);
-                        "coreos",
-                        "debian",
-                        "deepin",
-                        "devuan",
-                        "docker",
-                        "elementary",
-                        "fedora",
-                        "ferris",
-                        "flathub",
-                        "freebsd",
-                        "gentoo",
-                        "gnu-guix",
-                        "illumos",
-                        "kali-linux",
-                        "linuxmint",
-                        "mageia",
-                        "mandriva",
-                        "manjaro",
-                        "nixos",
-                        "openbsd",
-                        "opensuse",
-                        "pop-os",
-                        "raspberry-pi",
-                        "redhat",
-                        "rocky-linux",
-                        "sabayon",
-                        "slackware",
-                        "snappy",
-                        "solus",
-                        "tux",
-                        "ubuntu",
-                        "void",
-                        "zorin"].indexOf(str)
-                    > -1) {
-                    return str;
-                }
-                if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
-                    return 'tux';
-                }
-                if (str == 'amazon') {
-                    return 'redhat';
-                }
-                if (str == 'arch') {
-                    return 'archlinux';
-                }
-                return '';
-            },
-            redirectNetwork(id) {
-                this.getMonitorHistory(id)
-                .then(function(monitorInfo) {
-                      var vm = app.__vue__;
-                      vm.parseMonitorInfo(monitorInfo);
-                })
-                .catch(function(error){
-                    window.location.href = "/404";
-                })
-            },
-            getMonitorHistory(id) {
-                  return $.ajax({
-                    url: "/api/v1/monitor/"+id,
-                    method: "GET"
-                  });
-            },
-            parseMonitorInfo(monitorInfo) {
-                let tSeries = [];
-                let tLegendData = [];
-                var lcolors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
-                for (let i = 0; i < monitorInfo.result.length; i++) {
-                    var lcolor = lcolors[i % lcolors.length];
-                    var rgbaColorMarker = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.5)';
-                    var rgbaColorBar = 'rgba(' + parseInt(lcolor.slice(1, 3), 16) + ',' + parseInt(lcolor.slice(3, 5), 16) + ',' + parseInt(lcolor.slice(5, 7), 16) + ',0.35)';
-                    let loss = 0;
-                    let data = [];
-                    let datal = [];
-                    for (let j = 0; j < monitorInfo.result[i].created_at.length; j++) {
-                        avgDelay = Math.round(monitorInfo.result[i].avg_delay[j]);
-                        if (avgDelay > 0 && avgDelay < MaxTCPPingValue) {
-                            data.push([monitorInfo.result[i].created_at[j], avgDelay]);
-                        }
-                        else {
-                            loss += 1;
-                            datal.push({
-                                xAxis: monitorInfo.result[i].created_at[j],
-                                label: { show: false },
-                                emphasis: { disabled: true },
-                                lineStyle: {
-                                    type: "solid",
-                                    color: rgbaColorBar
-                                }
                             });
+                        } else {
+                            console.log('this server (id:'+ id + ') has no monitor.');
                         }
-                    }
+                    })
-                    lossRate = ((loss / monitorInfo.result[i].created_at.length) * 100).toFixed(1);
+                    .catch(error => {
-                    if (lossRate > 99) {
+                        console.error('Error fetching data:', error);
-                        datal = [];
+                    });
-                    }
+            },
-                    legendName = monitorInfo.result[i].monitor_name +" "+ lossRate + "%";
+            renderCharts(id, reload = false) {
-                    tLegendData.push(legendName);
+                if(!this.chartDataList[id]) return;
-                    tSeries.push({
+                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 - 180) : (window.innerHeight - 250);
+                const fontSize = this.isMobile ? 10 : 14;
+                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 markPointSymbolSize = this.isMobile ? 36 : 42;
+                const markPointItemStyleOpacity = this.semiTransparent ? 1 : 1;
+                const markPointFontSize = this.isMobile ? 8 : 10;
+                const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
+                const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
+                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)=> {
+                    let loss = 0;
+                    let totalLossRate = 0;
+                    let legendName = '';
+                    let data = { main: [], markLine: []};
+                    item.avg_delay.forEach((avgDelay, index) => {
+                        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]
+                            );
+                        }
+                    });
+                    totalLossRate = ((loss / item.created_at.length) * 100).toFixed(1);
+                    legendName = `${item.monitor_name} ${totalLossRate}%`;
+                    legendData.push(legendName);
+                    seriesData.push(
+                        {
                             name: legendName,
                             type: 'line',
                             smooth: true,
                             symbol: 'none',
-                            data: data,
+                            connectNulls: true,
+                            legendHoverLink: false,
+                            emphasis: {
+                                disabled: true
+                            },
+                            lineStyle: {
+                                width: lineStyleWidth
+                            },  
+                            data: data['main'],
                             markLine: {
                                 symbol: "none",
                                 symbolSize :0,
-                                data: datal
+                                data: data['markLine'],
+                                itemStyle: { 
+                                    opacity: markLineItemStyleOpacity
+                                },
+                                lineStyle:{
+                                    width: markLineLineStyleWidth
+                                }
                             },
                             markPoint: {
                                 data: [
-                                    { type: 'max', symbol: 'pin', name: 'Max', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8 } },
+                                    { 
-                                    { type: 'min', symbol: 'pin', name: 'Min', itemStyle: { color: rgbaColorMarker }, symbolSize: 30, label: { fontSize: 8, offset: [0, 7.5] }, symbolRotate: 180 }
+                                        name: 'Max',
+                                        type: 'max', 
+                                        symbol: 'pin', 
+                                        itemStyle: { 
+                                            opacity: markPointItemStyleOpacity
+                                        }, 
+                                        symbolSize: markPointSymbolSize, 
+                                        label: { 
+                                            fontSize: markPointFontSize,
+                                            formatter: function (params) {
+                                                return Math.round(params.value);
+                                            }
+                                        }
+                                    },
+                                    {
+                                        name: 'Min',
+                                        type: 'min', 
+                                        symbol: 'pin', 
+                                        itemStyle: { 
+                                            opacity: markPointItemStyleOpacity
+                                        }, 
+                                        symbolSize: markPointSymbolSize, 
+                                        label: { 
+                                            fontSize: markPointFontSize,
+                                            offset: [0, 8],
+                                            formatter: function (params) {
+                                                return Math.round(params.value);
+                                            }
+                                        }, 
+                                        symbolRotate: 180 
+                                    }
                                 ]
                             }
-                    });
+                        }
+                    );
+                });
+                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 height = autoheight + 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;
+                this.chart.resize({
+                    width: 'auto',
+                    height: height
+                });
+                // 设置图表配置项
+                const option = {
+                    color: this.colors,
+                    backgroundColor: backgroundColor,
+                    textStyle: {
+                        fontSize: fontSize,
+                        color: fontColor
+                    },
+                    grid: {
+                        top: gridTop,
+                        left: gridLeft,
+                        right: gridRight,
+                        bottom: gridBottom
+                    },
+                    title: {
+                        show: false,
+                    },
+                    series: seriesData.flat(),
+                    xAxis: {
+                        type: 'time',
+                        axisLabel: {
+                            textStyle: {
+                                fontSize: fontSize
+                            }
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel: {
+                            textStyle: {
+                                fontSize: fontSize
+                            }
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                width: splitLineWidth
+                            }
+                        }
+                    },
+                    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
+                        }
+                    ]
+                };
+                setTimeout(() => {
+                    this.chart.hideLoading();
+                    this.chart.setOption(option);
+                }, 1000);
+            },
+            reloadCharts() {
+                const chartData = this.chartDataList[this.currentServerId];
+                if (chartData) {
+                    this.renderCharts(this.currentServerId,true);
                 }
-                this.option.title.text = monitorInfo.result[0].server_name;
-                this.option.series = tSeries;
-                this.option.legend.data = tLegendData;
-                this.myChart.clear();
-                this.myChart.setOption(this.option);
             },
-            isWindowsPlatform(str) {
+            disposeCharts(chart){
-                return str.includes('Windows')
+                chart.dispose();
+                chart = null;
             },
-            renderChart() {
+            getServerCountryCode(id){
-              this.myChart = echarts.init(this.$refs.chartDom);
+                const result = this.servers.find(item => item.ID == id);
-              this.myChart.setOption(this.option);
+                return result.Host.CountryCode ? result.Host.CountryCode : 'rb';
             },
-        },
+            getNextServerId(id) {
-        beforeDestroy() {
+                const currentIndex = this.servers.findIndex(item => item.ID === id);
-            this.myChart.dispose();
+                if (currentIndex === -1) {
-            this.myChart = null;
+                    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();
+                    $('.dropdown-menu .dropdown-item').each(function() {
+                        var text = $(this).text().toLowerCase();
+                        if (text.indexOf(searchTerm) > -1) {
+                            $(this).removeClass('hidden').addClass('visible'); // 显示元素
+                        } else {
+                            $(this).removeClass('visible').addClass('hidden'); // 隐藏元素
+                        }
+                    });
+                });
+            }
+        }
     });
 </script>
-{{template "theme-server-status/footer" .}}
 {{end}}

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

@@ -1,77 +1,75 @@
 {{define "theme-server-status/service"}}
 {{template "theme-server-status/header" .}}
-<div id="app">
+{{template "theme-server-status/menu" .}}
-    {{template "theme-server-status/content-nav" .}}
+<!--  showGroup true -->
-    <!--  showGroup true -->
+<template v-if="showGroup">
-    <template v-if="showGroup">
+    <div v-if="servicesTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
-        <section v-if="servicesTag.length === 0" class="container content" style="max-width: 95vw; 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>
-            <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
+    </div>
-        </section>
+    <div v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
-        <section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
+        {{template "theme-server-status/service-group-true" .}} 
-            {{template "theme-server-status/service-group-true" .}} 
+    </div>
-        </section>
+</template>
-    </template>
+<!--  showGroup false -->
-    <!--  showGroup false -->
+<template v-else>
-    <template v-else>
+    <div v-if="servicesNoTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
-        <section v-if="servicesNoTag.length === 0" class="container content" style="max-width: 95vw; 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>
-            <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
+    </div>
-        </section>
+    <div v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
-        <section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
+        {{template "theme-server-status/service-group-false" .}}
-            {{template "theme-server-status/service-group-false" .}}
+    </div>
-        </section>
+</template>
-    </template>
+{{if .CycleTransferStats}}
-    {{if .CycleTransferStats}}
+    <div class="container-fluid content table-responsive">
-        <section class="container content table-responsive" style="max-width: 95vw">
+        <table class="table table-striped table-condensed table-hover">
-            <table class="table table-striped table-condensed table-hover">
+            <thead>
-                <thead>
+                <tr class="node-group-tag">
-                    <tr class="node-group-tag">
+                    <th colspan="16" style="border:none;">
-                        <th colspan="16" style="border:none;">
+                        {{tr "CycleTransferStats"}}
-                            {{tr "CycleTransferStats"}}
+                    </th>
-                        </th>
+                </tr>
-                    </tr>
+                <tr class="node-group-cell">
-                    <tr class="node-group-cell">
+                    <th class="node-cell center">ID</th>
-                        <th class="node-cell center">ID</th>
+                    <th class="node-cell center">{{tr "Rules"}}</th>
-                        <th class="node-cell center">{{tr "Rules"}}</th>
+                    <th class="node-cell center">{{tr "Server"}}</th>
-                        <th class="node-cell center">{{tr "Server"}}</th>
+                    <th class="node-cell center">{{tr "From"}}</th>
-                        <th class="node-cell center">{{tr "From"}}</th>
+                    <th class="node-cell center">{{tr "To"}}</th>
-                        <th class="node-cell center">{{tr "To"}}</th>
+                    <th class="node-cell center">MAX</th>
-                        <th class="node-cell center">MAX</th>
+                    <th class="node-cell center">MIN</th>
-                        <th class="node-cell center">MIN</th>
+                    <th class="node-cell center">{{tr "NextCheck"}}</th>
-                        <th class="node-cell center">{{tr "NextCheck"}}</th>
+                    <th class="node-cell center">{{tr "CurrentUsage"}}</th>
-                        <th class="node-cell center">{{tr "CurrentUsage"}}</th>
+                    <th class="node-cell center">{{tr "Transleft"}}</th>
-                        <th class="node-cell center">{{tr "Transleft"}}</th>
+                </tr>
-                    </tr>
+            </thead>
-                </thead>
+            <tbody>
-                <tbody>
+                {{range $id, $stats := .CycleTransferStats}}
-                    {{range $id, $stats := .CycleTransferStats}}
+                    {{range $innerId, $transfer := $stats.Transfer}}
-                        {{range $innerId, $transfer := $stats.Transfer}}
+                        {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
-                            {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
+                        <tr>
-                            <tr>
+                            <td class="node-cell center">{{$id}}</td>
-                                <td class="node-cell center">{{$id}}</td>
+                            <td class="node-cell center">{{$stats.Name}}</td>
-                                <td class="node-cell center">{{$stats.Name}}</td>
+                            <td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
-                                <td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
+                            <td class="node-cell center">{{$stats.From|tf}}</td>
-                                <td class="node-cell center">{{$stats.From|tf}}</td>
+                            <td class="node-cell center">{{$stats.To|tf}}</td>
-                                <td class="node-cell center">{{$stats.To|tf}}</td>
+                            <td class="node-cell center">{{$stats.Max|bf}}</td>
-                                <td class="node-cell center">{{$stats.Max|bf}}</td>
+                            <td class="node-cell center">{{$stats.Min|bf}}</td>
-                                <td class="node-cell center">{{$stats.Min|bf}}</td>
+                            <td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
-                                <td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
+                            <td class="node-cell center">{{$transfer|bf}}</td>
-                                <td class="node-cell center">{{$transfer|bf}}</td>
+                            <td class="node-cell center">
-                                <td class="node-cell center">
+                                <div class="progress">
-                                    <div class="progress">
+                                    <div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
-                                        <div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
+                                        <small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
-                                            <small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
-                                        </div>
                                     </div>
-                                </td>
+                                </div>
-                            </tr>
+                            </td>
-                        {{end}}
+                        </tr>
                     {{end}}
-                </tbody>
+                {{end}}
-            </table>
+            </tbody>
-        </section>
+        </table>
-    {{end}}
+    </div>
-    {{template "theme-server-status/content-footer" .}}
+{{end}}
-</div>
+{{template "theme-server-status/footer" .}}
 <script>
     new Vue({
         el: '#app',
@@ -240,5 +238,4 @@
         }
     })
 </script>
-{{template "theme-server-status/footer" .}}
 {{end}}