refactor: upgrade ant design vue v3 to v4

2025-05-11 02:15:48 +02:00 · 2023-11-26 00:23:29 +08:00 · 2023-11-26 00:23:29 +08:00 · d84dbffb54
commit d84dbffb54
parent c578f26054
142 changed files with 7883 additions and 13745 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,4 @@
+.git
+frontend/node_modules
+.idea
+tmp
--- a/.editorconfig
+++ b/.editorconfig
@ -5,11 +5,14 @@ block_comment_start = /*
 block_comment_end = */
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

+[*.go]
+indent_size = 4
+
 [README.md]
 indent_style = space
 indent_size = 4
--- a/dev.Dockerfile
+++ b/dev.Dockerfile
@ -5,7 +5,7 @@ EXPOSE 80 443

 # COPY resources/development/sources.list /etc/apt/sources.list

-ENV GO_VERSION="1.21.0"
+ENV GO_VERSION="1.21.4"
 ENV GO_ARCH="linux-arm64"
 ENV GO_TAR="go${GO_VERSION}.${GO_ARCH}.tar.gz"
 ENV PATH="${PATH}:/usr/local/go/bin"
@ -14,7 +14,15 @@ RUN set -x \
    # create nginx user/group first, to be consistent throughout docker variants
    && addgroup --system --gid 101 nginx \
    && adduser --system --disabled-login --ingroup nginx --no-create-home --home /nonexistent --gecos "nginx user" --shell /bin/false --uid 101 nginx \
-    && apt update && apt install -y wget nginx gcc curl
+    && apt update && apt install gcc curl gnupg2 ca-certificates lsb-release ubuntu-keyring wget -y \
+    && curl https://nginx.org/keys/nginx_signing.key | gpg --dearmor \
+           | tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/null \
+    && echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] \
+       http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" \
+           | tee /etc/apt/sources.list.d/nginx.list
+
+RUN echo "Package: *\nPin: origin nginx.org\nPin: release o=nginx\nPin-Priority: 900\n" | tee /etc/apt/preferences.d/99nginx \
+    && apt update && apt install nginx -y

 RUN wget https://go.dev/dl/${GO_TAR} && \
    rm -rf /usr/local/go && tar -C /usr/local -xzf ${GO_TAR} && rm -f ${GO_TAR}
--- a/frontend/.yarnrc.yml
+++ b/frontend/.yarnrc.yml
@ -1 +0,0 @@
-nodeLinker: pnp
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@ -3,11 +3,9 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}

-declare module '@vue/runtime-core' {
+declare module 'vue' {
  export interface GlobalComponents {
    AAlert: typeof import('ant-design-vue/es')['Alert']
    AAvatar: typeof import('ant-design-vue/es')['Avatar']
@ -87,5 +85,9 @@ declare module '@vue/runtime-core' {
    StdDataEntryComponentsStdSelect: typeof import('./src/components/StdDataEntry/components/StdSelect.vue')['default']
    StdDataEntryComponentsStdSelector: typeof import('./src/components/StdDataEntry/components/StdSelector.vue')['default']
    StdDataEntryStdFormItem: typeof import('./src/components/StdDataEntry/StdFormItem.vue')['default']
+    SwitchAppearanceIconsVPIconMoon: typeof import('./src/components/SwitchAppearance/icons/VPIconMoon.vue')['default']
+    SwitchAppearanceIconsVPIconSun: typeof import('./src/components/SwitchAppearance/icons/VPIconSun.vue')['default']
+    SwitchAppearanceSwitchAppearance: typeof import('./src/components/SwitchAppearance/SwitchAppearance.vue')['default']
+    VPSwitchVPSwitch: typeof import('./src/components/VPSwitch/VPSwitch.vue')['default']
  }
 }
--- a/frontend/package.json
+++ b/frontend/package.json
@ -11,51 +11,48 @@
    "gettext:compile": "vue-gettext-compile"
  },
  "dependencies": {
-        "@ant-design/icons-vue": "^6.1.0",
+    "@ant-design/icons-vue": "^7.0.1",
    "@formkit/auto-animate": "^0.8.0",
-        "@types/lodash": "^4.14.188",
-        "@types/marked": "^4.0.8",
+    "@types/lodash": "^4.14.202",
    "@types/nprogress": "^0.2.0",
    "@types/sortablejs": "^1.15.0",
-        "@vue/reactivity": "^3.3.4",
-        "@vue/shared": "^3.3.4",
-        "ant-design-vue": "^3.2.17",
+    "@vue/reactivity": "^3.3.9",
+    "@vue/shared": "^3.3.9",
+    "ant-design-vue": "4.0.7",
    "apexcharts": "^3.36.3",
-        "axios": "^1.6.0",
-        "dayjs": "^1.11.7",
-        "highlight.js": "^11.7.0",
+    "axios": "^1.6.2",
+    "dayjs": "^1.11.10",
+    "highlight.js": "^11.9.0",
    "lodash": "^4.17.21",
-        "marked": "^4.2.5",
+    "marked": "^10.0.0",
    "nprogress": "^0.2.0",
-        "pinia": "^2.0.28",
+    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.0.2",
    "reconnecting-websocket": "^4.4.0",
    "sortablejs": "^1.15.0",
    "vite-plugin-build-id": "^0.2.3",
-        "vue": "^3.2.47",
+    "vue": "^3.3.9",
    "vue-github-button": "https://github.com/0xJacky/vue-github-button",
-        "vue-router": "^4.1.6",
-        "vue3-ace-editor": "2.2.2",
-        "vue3-apexcharts": "^1.4.1",
-        "vue3-gettext": "^2.5.0-alpha.1",
+    "vue-router": "^4.2.5",
+    "vue3-ace-editor": "2.2.4",
+    "vue3-apexcharts": "^1.4.4",
+    "vue3-gettext": "^3.0.0-beta.2",
    "vuedraggable": "^4.1.0",
-        "xterm": "^5.1.0",
-        "xterm-addon-attach": "^0.8.0",
-        "xterm-addon-fit": "^0.7.0"
+    "xterm": "^5.3.0",
+    "xterm-addon-attach": "^0.9.0",
+    "xterm-addon-fit": "^0.8.0"
  },
  "devDependencies": {
-        "@vitejs/plugin-vue": "^4.2.1",
-        "@vitejs/plugin-vue-jsx": "^3.0.1",
-        "@vue/compiler-sfc": "^3.3.4",
-        "@zougt/vite-plugin-theme-preprocessor": "^1.4.8",
-        "ace-builds": "^1.30.0",
-        "less": "^4.1.3",
-        "typescript": "^5.0.4",
-        "unplugin-vue-components": "^0.24.1",
-        "vite": "^4.5.0",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/compiler-sfc": "^3.3.9",
+    "ace-builds": "^1.31.2",
+    "less": "^4.2.0",
+    "typescript": "^5.3.2",
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^5.0.2",
    "vite-plugin-html": "^3.2.0",
-        "vite-svg-loader": "^4.0.0",
-        "vue-tsc": "^1.6.1"
-    },
-    "packageManager": "yarn@3.6.4"
+    "vite-svg-loader": "^5.1.0",
+    "vue-tsc": "^1.8.22"
+  }
 }
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -2,39 +2,42 @@
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 import {useSettingsStore} from '@/pinia'
-import {dark_mode} from '@/lib/theme'
+import {computed, provide} from 'vue'

-let media = window.matchMedia('(prefers-color-scheme: dark)')
+const media = window.matchMedia('(prefers-color-scheme: dark)')

 const callback = (media: { matches: any; }) => {
  const settings = useSettingsStore()
  if (settings.preference_theme === 'auto') {
    if (media.matches) {
-            dark_mode(true)
      settings.set_theme('dark')
    } else {
-            dark_mode(false)
-            settings.set_theme('auto')
+      settings.set_theme('light')
    }
  } else {
-        dark_mode(settings.preference_theme === 'dark')
+    settings.set_theme(settings.preference_theme)
  }
 }

 callback(media)

-if (typeof media.addEventListener === 'function') {
-    media.addEventListener('change', callback)
-} else if (typeof media.addListener === 'function') {
-    media.addListener(callback)
-}
+const devicePrefersTheme = computed(() => {
+  return media.matches ? 'dark' : 'light'
+})

+provide('devicePrefersTheme', devicePrefersTheme)
+
+media.addEventListener('change', callback)
 </script>

 <template>
  <router-view/>
 </template>

+<style lang="less">
+@import "ant-design-vue/dist/reset.css";
+</style>
+
 <style lang="less" scoped>

 </style>
--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@ -14,9 +14,9 @@ const auth = {
    })
  },
  async casdoorLogin(code: string, state: string) {
-        await http.post("/casdoor_callback", {
+    await http.post('/casdoor_callback', {
      code: code,
-            state: state,
+      state: state
    })
      .then((r) => {
        login(r.token)
--- a/frontend/src/api/domain.ts
+++ b/frontend/src/api/domain.ts
@ -1,6 +1,6 @@
 import Curd from '@/api/curd'
 import http from '@/lib/http'
-import {AxiosRequestConfig} from "axios/index";
+import {AxiosRequestConfig} from 'axios/index'

 class Domain extends Curd {
  enable(name: string, config: AxiosRequestConfig) {
--- a/frontend/src/assets/svg/ChatGPT_logo.svg
+++ b/frontend/src/assets/svg/ChatGPT_logo.svg
@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2406 2406"><path d="M1 578.4C1 259.5 259.5 1 578.4 1h1249.1c319 0 577.5 258.5 577.5 577.4V2406H578.4C259.5 2406 1 2147.5 1 1828.6V578.4z" fill="#74aa9c"/><path d="M1107.3 299.1c-198 0-373.9 127.3-435.2 315.3C544.8 640.6 434.9 720.2 370.5 833c-99.3 171.4-76.6 386.9 56.4 533.8-41.1 123.1-27 257.7 38.6 369.2 98.7 172 297.3 260.2 491.6 219.2 86.1 97 209.8 152.3 339.6 151.8 198 0 373.9-127.3 435.3-315.3 127.5-26.3 237.2-105.9 301-218.5 99.9-171.4 77.2-386.9-55.8-533.9v-.6c41.1-123.1 27-257.8-38.6-369.8-98.7-171.4-297.3-259.6-491-218.6-86.6-96.8-210.5-151.8-340.3-151.2zm0 117.5-.6.6c79.7 0 156.3 27.5 217.6 78.4-2.5 1.2-7.4 4.3-11 6.1L952.8 709.3c-18.4 10.4-29.4 30-29.4 51.4V1248l-155.1-89.4V755.8c-.1-187.1 151.6-338.9 339-339.2zm434.2 141.9c121.6-.2 234 64.5 294.7 169.8 39.2 68.6 53.9 148.8 40.4 226.5-2.5-1.8-7.3-4.3-10.4-6.1l-360.4-208.2c-18.4-10.4-41-10.4-59.4 0L1024 984.2V805.4L1372.7 604c51.3-29.7 109.5-45.4 168.8-45.5zM650 743.5v427.9c0 21.4 11 40.4 29.4 51.4l421.7 243-155.7 90L597.2 1355c-162-93.8-217.4-300.9-123.8-462.8C513.1 823.6 575.5 771 650 743.5zm807.9 106 348.8 200.8c162.5 93.7 217.6 300.6 123.8 462.8l.6.6c-39.8 68.6-102.4 121.2-176.5 148.2v-428c0-21.4-11-41-29.4-51.4l-422.3-243.7 155-89.3zM1201.7 997l177.8 102.8v205.1l-177.8 102.8-177.8-102.8v-205.1L1201.7 997zm279.5 161.6 155.1 89.4v402.2c0 187.3-152 339.2-339 339.2v-.6c-79.1 0-156.3-27.6-217-78.4 2.5-1.2 8-4.3 11-6.1l360.4-207.5c18.4-10.4 30-30 29.4-51.4l.1-486.8zM1380 1421.9v178.8l-348.8 200.8c-162.5 93.1-369.6 38-463.4-123.7h.6c-39.8-68-54-148.8-40.5-226.5 2.5 1.8 7.4 4.3 10.4 6.1l360.4 208.2c18.4 10.4 41 10.4 59.4 0l421.9-243.7z" fill="white"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2406 2406">
+    <path
+            d="M1 578.4C1 259.5 259.5 1 578.4 1h1249.1c319 0 577.5 258.5 577.5 577.4V2406H578.4C259.5 2406 1 2147.5 1 1828.6V578.4z"
+            fill="#74aa9c"/>
+    <path
+            d="M1107.3 299.1c-198 0-373.9 127.3-435.2 315.3C544.8 640.6 434.9 720.2 370.5 833c-99.3 171.4-76.6 386.9 56.4 533.8-41.1 123.1-27 257.7 38.6 369.2 98.7 172 297.3 260.2 491.6 219.2 86.1 97 209.8 152.3 339.6 151.8 198 0 373.9-127.3 435.3-315.3 127.5-26.3 237.2-105.9 301-218.5 99.9-171.4 77.2-386.9-55.8-533.9v-.6c41.1-123.1 27-257.8-38.6-369.8-98.7-171.4-297.3-259.6-491-218.6-86.6-96.8-210.5-151.8-340.3-151.2zm0 117.5-.6.6c79.7 0 156.3 27.5 217.6 78.4-2.5 1.2-7.4 4.3-11 6.1L952.8 709.3c-18.4 10.4-29.4 30-29.4 51.4V1248l-155.1-89.4V755.8c-.1-187.1 151.6-338.9 339-339.2zm434.2 141.9c121.6-.2 234 64.5 294.7 169.8 39.2 68.6 53.9 148.8 40.4 226.5-2.5-1.8-7.3-4.3-10.4-6.1l-360.4-208.2c-18.4-10.4-41-10.4-59.4 0L1024 984.2V805.4L1372.7 604c51.3-29.7 109.5-45.4 168.8-45.5zM650 743.5v427.9c0 21.4 11 40.4 29.4 51.4l421.7 243-155.7 90L597.2 1355c-162-93.8-217.4-300.9-123.8-462.8C513.1 823.6 575.5 771 650 743.5zm807.9 106 348.8 200.8c162.5 93.7 217.6 300.6 123.8 462.8l.6.6c-39.8 68.6-102.4 121.2-176.5 148.2v-428c0-21.4-11-41-29.4-51.4l-422.3-243.7 155-89.3zM1201.7 997l177.8 102.8v205.1l-177.8 102.8-177.8-102.8v-205.1L1201.7 997zm279.5 161.6 155.1 89.4v402.2c0 187.3-152 339.2-339 339.2v-.6c-79.1 0-156.3-27.6-217-78.4 2.5-1.2 8-4.3 11-6.1l360.4-207.5c18.4-10.4 30-30 29.4-51.4l.1-486.8zM1380 1421.9v178.8l-348.8 200.8c-162.5 93.1-369.6 38-463.4-123.7h.6c-39.8-68-54-148.8-40.5-226.5 2.5 1.8 7.4 4.3 10.4 6.1l360.4 208.2c18.4 10.4 41 10.4 59.4 0l421.9-243.7z"
+            fill="white"/>
+</svg>
--- a/frontend/src/assets/svg/cpu.svg
+++ b/frontend/src/assets/svg/cpu.svg
@ -1 +1,11 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683971182420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M768 896H256c-72.533333 0-128-55.466667-128-128V256c0-72.533333 55.466667-128 128-128h512c72.533333 0 128 55.466667 128 128v512c0 72.533333-55.466667 128-128 128zM256 213.333333c-25.6 0-42.666667 17.066667-42.666667 42.666667v512c0 25.6 17.066667 42.666667 42.666667 42.666667h512c25.6 0 42.666667-17.066667 42.666667-42.666667V256c0-25.6-17.066667-42.666667-42.666667-42.666667H256z" p-id="2502"></path><path d="M640 682.666667H384c-25.6 0-42.666667-17.066667-42.666667-42.666667V384c0-25.6 17.066667-42.666667 42.666667-42.666667h256c25.6 0 42.666667 17.066667 42.666667 42.666667v256c0 25.6-17.066667 42.666667-42.666667 42.666667z m-213.333333-85.333334h170.666666v-170.666666h-170.666666v170.666666zM384 213.333333c-25.6 0-42.666667-17.066667-42.666667-42.666666V42.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 25.6-17.066667 42.666667-42.666667 42.666666zM640 213.333333c-25.6 0-42.666667-17.066667-42.666667-42.666666V42.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 25.6-17.066667 42.666667-42.666667 42.666666zM384 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667v-128c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v128c0 25.6-17.066667 42.666667-42.666667 42.666667zM640 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667v-128c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v128c0 25.6-17.066667 42.666667-42.666667 42.666667zM981.333333 426.666667h-128c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666667h128c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667zM981.333333 640h-128c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666666h128c25.6 0 42.666667 17.066667 42.666667 42.666666s-17.066667 42.666667-42.666667 42.666667zM170.666667 426.666667H42.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h128c25.6 0 42.666667 17.066667 42.666666 42.666667s-17.066667 42.666667-42.666666 42.666667zM170.666667 640H42.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666h128c25.6 0 42.666667 17.066667 42.666666 42.666666s-17.066667 42.666667-42.666666 42.666667z" p-id="2503"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1683971182420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501"
+     width="200" height="200">
+    <path
+            d="M768 896H256c-72.533333 0-128-55.466667-128-128V256c0-72.533333 55.466667-128 128-128h512c72.533333 0 128 55.466667 128 128v512c0 72.533333-55.466667 128-128 128zM256 213.333333c-25.6 0-42.666667 17.066667-42.666667 42.666667v512c0 25.6 17.066667 42.666667 42.666667 42.666667h512c25.6 0 42.666667-17.066667 42.666667-42.666667V256c0-25.6-17.066667-42.666667-42.666667-42.666667H256z"
+            p-id="2502"></path>
+    <path
+            d="M640 682.666667H384c-25.6 0-42.666667-17.066667-42.666667-42.666667V384c0-25.6 17.066667-42.666667 42.666667-42.666667h256c25.6 0 42.666667 17.066667 42.666667 42.666667v256c0 25.6-17.066667 42.666667-42.666667 42.666667z m-213.333333-85.333334h170.666666v-170.666666h-170.666666v170.666666zM384 213.333333c-25.6 0-42.666667-17.066667-42.666667-42.666666V42.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 25.6-17.066667 42.666667-42.666667 42.666666zM640 213.333333c-25.6 0-42.666667-17.066667-42.666667-42.666666V42.666667c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 25.6-17.066667 42.666667-42.666667 42.666666zM384 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667v-128c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v128c0 25.6-17.066667 42.666667-42.666667 42.666667zM640 1024c-25.6 0-42.666667-17.066667-42.666667-42.666667v-128c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666667 42.666666v128c0 25.6-17.066667 42.666667-42.666667 42.666667zM981.333333 426.666667h-128c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666667h128c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667zM981.333333 640h-128c-25.6 0-42.666667-17.066667-42.666666-42.666667s17.066667-42.666667 42.666666-42.666666h128c25.6 0 42.666667 17.066667 42.666667 42.666666s-17.066667 42.666667-42.666667 42.666667zM170.666667 426.666667H42.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h128c25.6 0 42.666667 17.066667 42.666666 42.666667s-17.066667 42.666667-42.666666 42.666667zM170.666667 640H42.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666h128c25.6 0 42.666667 17.066667 42.666666 42.666666s-17.066667 42.666667-42.666666 42.666667z"
+            p-id="2503"></path>
+</svg>
--- a/frontend/src/assets/svg/memory.svg
+++ b/frontend/src/assets/svg/memory.svg
@ -1 +1,8 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683972914887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5222" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M922.688 810.624h-149.312a37.376 37.376 0 0 1-37.312-37.376L736 736h-49.792v74.688H611.584V736h-49.792v74.688H462.208V736h-49.728v74.688H337.792V736H288l-0.256 37.248a37.312 37.312 0 0 1-37.312 37.376h-149.12A37.312 37.312 0 0 1 64 773.248V250.752c0-20.672 16.704-37.376 37.312-37.376h821.312a37.312 37.312 0 0 1 37.376 37.376v522.496a37.312 37.312 0 0 1-37.312 37.376z m-37.376-177.344h-39.168a37.376 37.376 0 0 1 0-74.752h39.168V288.128H138.688v270.4h37.952a37.376 37.376 0 0 1 0 74.752h-37.952v102.528H213.12l0.256-49.6c0-20.672 4.288-24.896 24.896-24.896h547.584c20.608 0 24.896 4.224 24.896 24.896v49.6h74.624V633.28zM736 337.792h74.688V512H736V337.792z m-174.208 0h74.688V512H561.792V337.792z m-174.208 0h74.688V512H387.584V337.792z m-174.272 0H288V512l-73.472-0.128-1.216-174.08z" p-id="5223"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1683972914887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5222"
+     width="200" height="200">
+    <path
+            d="M922.688 810.624h-149.312a37.376 37.376 0 0 1-37.312-37.376L736 736h-49.792v74.688H611.584V736h-49.792v74.688H462.208V736h-49.728v74.688H337.792V736H288l-0.256 37.248a37.312 37.312 0 0 1-37.312 37.376h-149.12A37.312 37.312 0 0 1 64 773.248V250.752c0-20.672 16.704-37.376 37.312-37.376h821.312a37.312 37.312 0 0 1 37.376 37.376v522.496a37.312 37.312 0 0 1-37.312 37.376z m-37.376-177.344h-39.168a37.376 37.376 0 0 1 0-74.752h39.168V288.128H138.688v270.4h37.952a37.376 37.376 0 0 1 0 74.752h-37.952v102.528H213.12l0.256-49.6c0-20.672 4.288-24.896 24.896-24.896h547.584c20.608 0 24.896 4.224 24.896 24.896v49.6h74.624V633.28zM736 337.792h74.688V512H736V337.792z m-174.208 0h74.688V512H561.792V337.792z m-174.208 0h74.688V512H387.584V337.792z m-174.272 0H288V512l-73.472-0.128-1.216-174.08z"
+            p-id="5223"></path>
+</svg>
--- a/frontend/src/assets/svg/pulse.svg
+++ b/frontend/src/assets/svg/pulse.svg
@ -1 +1,8 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683971747666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8583" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M448 938.666667a21.333333 21.333333 0 0 1-20.38-15.06L272.6 419.833333l-61.52 123.04A21.333333 21.333333 0 0 1 192 554.666667H21.333333a21.333333 21.333333 0 0 1 0-42.666667h157.48l79.44-158.873333a21.333333 21.333333 0 0 1 39.466667 3.266666L444.666667 834 597.84 144.706667a21.333333 21.333333 0 0 1 41.213333-1.646667l155.013334 503.773333 61.52-123.04A21.333333 21.333333 0 0 1 874.666667 512h128a21.333333 21.333333 0 0 1 0 42.666667h-114.813334l-79.44 158.873333a21.333333 21.333333 0 0 1-39.466666-3.266667L622 232.666667 468.826667 921.96a21.333333 21.333333 0 0 1-20 16.666667z" fill="#5C5C66" p-id="8584"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1683971747666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8583"
+     width="200" height="200">
+    <path
+            d="M448 938.666667a21.333333 21.333333 0 0 1-20.38-15.06L272.6 419.833333l-61.52 123.04A21.333333 21.333333 0 0 1 192 554.666667H21.333333a21.333333 21.333333 0 0 1 0-42.666667h157.48l79.44-158.873333a21.333333 21.333333 0 0 1 39.466667 3.266666L444.666667 834 597.84 144.706667a21.333333 21.333333 0 0 1 41.213333-1.646667l155.013334 503.773333 61.52-123.04A21.333333 21.333333 0 0 1 874.666667 512h128a21.333333 21.333333 0 0 1 0 42.666667h-114.813334l-79.44 158.873333a21.333333 21.333333 0 0 1-39.466666-3.266667L622 232.666667 468.826667 921.96a21.333333 21.333333 0 0 1-20 16.666667z"
+            fill="#5C5C66" p-id="8584"></path>
+</svg>
--- a/frontend/src/components/Chart/RadialBarChart.vue
+++ b/frontend/src/components/Chart/RadialBarChart.vue
@ -1,10 +1,16 @@
 <script setup lang="ts">
 import VueApexCharts from 'vue3-apexcharts'
 import {reactive} from 'vue'
+import {useSettingsStore} from '@/pinia'
+import {storeToRefs} from 'pinia'

 const {series, centerText, colors, name, bottomText}
  = defineProps(['series', 'centerText', 'colors', 'name', 'bottomText'])

+const settings = useSettingsStore()
+
+const {theme} = storeToRefs(settings)
+
 const chartOptions = reactive({
  series: series,
  chart: {
@ -52,7 +58,8 @@ const chartOptions = reactive({
 </script>

 <template>
-    <div class="radial-bar-container">
+  <!-- Use theme as key to rerender the chart when theme changes to prevent style issues -->
+  <div class="radial-bar-container" :key="theme">
    <p class="text">{{ centerText }}</p>
    <p class="bottom_text">{{ bottomText }}</p>
    <VueApexCharts v-if="centerText" class="radialBar" type="radialBar" height="205" :options="chartOptions"
--- a/frontend/src/components/NginxControl/NginxControl.vue
+++ b/frontend/src/components/NginxControl/NginxControl.vue
@ -64,7 +64,7 @@ watch(visible, (v) => {

 <template>
  <a-popover
-        v-model:visible="visible"
+    v-model:open="visible"
    @confirm="reload_nginx"
    placement="bottomRight"
  >
--- a/frontend/src/components/StdDataDisplay/StdBatchEdit.vue
+++ b/frontend/src/components/StdDataDisplay/StdBatchEdit.vue
@ -51,7 +51,7 @@ async function ok() {
    class="std-curd-edit-modal"
    :mask="false"
    :title="$gettext('Batch Modify')"
-        v-model:visible="visible"
+    v-model:open="visible"
    :cancel-text="$gettext('Cancel')"
    :ok-text="$gettext('OK')"
    @ok="ok"
--- a/frontend/src/components/StdDataDisplay/StdCurd.vue
+++ b/frontend/src/components/StdDataDisplay/StdCurd.vue
@ -170,7 +170,7 @@ const selectedRowKeys = ref([])
      class="std-curd-edit-modal"
      :mask="false"
      :title="edit_text?edit_text:(data.id ? $gettext('Modify') : $gettext('Add'))"
-            :visible="visible"
+      :open="visible"
      :cancel-text="$gettext('Cancel')"
      :ok-text="$gettext('OK')"
      @cancel="cancel"
--- a/frontend/src/components/StdDataEntry/StdDataEntry.tsx
+++ b/frontend/src/components/StdDataEntry/StdDataEntry.tsx
@ -12,9 +12,9 @@ export default defineComponent({
      props.dataList.forEach((v: any) => {
        let show = true
        if (v.edit.show) {
-                    if (typeof v.edit.show === "boolean") {
+          if (typeof v.edit.show === 'boolean') {
            show = v.edit.show
-                    } else if (typeof v.edit.show === "function") {
+          } else if (typeof v.edit.show === 'function') {
            show = v.edit.show(props.dataSource)
          }
        }
--- a/frontend/src/components/StdDataEntry/components/StdSelector.vue
+++ b/frontend/src/components/StdDataEntry/components/StdSelector.vue
@ -80,7 +80,7 @@ const _selectedKey = computed({
      </div>
      <a-modal
        :mask="false"
-                :visible="visible"
+        :open="visible"
        :cancel-text="$gettext('Cancel')"
        :ok-text="$gettext('OK')"
        :title="$gettext('Selector')"
--- a/frontend/src/components/SwitchAppearance/SwitchAppearance.vue
+++ b/frontend/src/components/SwitchAppearance/SwitchAppearance.vue
@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import {computed, inject, Ref} from 'vue'
+import VPSwitch from '@/components/VPSwitch/VPSwitch.vue'
+import VPIconMoon from './icons/VPIconMoon.vue'
+import VPIconSun from './icons/VPIconSun.vue'
+import {useSettingsStore} from '@/pinia'
+import {useGettext} from 'vue3-gettext'
+
+const {$gettext} = useGettext()
+
+const settings = useSettingsStore()
+const devicePrefersTheme = inject('devicePrefersTheme') as Ref<string>
+const isDark = computed(() => settings.theme === 'dark')
+
+const switchTitle = computed(() => {
+  return isDark.value ? $gettext('Switch to light theme') : $gettext('Switch to dark theme')
+})
+
+async function toggleAppearance() {
+  if (isDark.value) {
+    settings.set_theme('light')
+  } else {
+    settings.set_theme('dark')
+  }
+
+  if (devicePrefersTheme.value === settings.theme) {
+    settings.set_preference_theme('auto')
+  } else {
+    settings.set_preference_theme(settings.theme)
+  }
+}
+</script>
+
+<template>
+  <VPSwitch
+    :title="switchTitle"
+    class="VPSwitchAppearance"
+    :aria-checked="isDark"
+    @click="toggleAppearance"
+  >
+    <VPIconSun class="sun"/>
+    <VPIconMoon class="moon"/>
+  </VPSwitch>
+</template>
+
+<style scoped>
+.sun {
+  opacity: 1;
+}
+
+.moon {
+  opacity: 0;
+}
+
+.dark .sun {
+  opacity: 0;
+}
+
+.dark .moon {
+  opacity: 1;
+}
+
+.dark .VPSwitchAppearance :deep(.check) {
+  /*rtl:ignore*/
+  transform: translateX(18px);
+}
+</style>
--- a/frontend/src/components/SwitchAppearance/icons/VPIconMoon.vue
+++ b/frontend/src/components/SwitchAppearance/icons/VPIconMoon.vue
@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path
+      d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"/>
+  </svg>
+</template>
--- a/frontend/src/components/SwitchAppearance/icons/VPIconSun.vue
+++ b/frontend/src/components/SwitchAppearance/icons/VPIconSun.vue
@ -0,0 +1,18 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path
+      d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"/>
+    <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"/>
+    <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"/>
+    <path
+      d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"/>
+    <path
+      d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"/>
+    <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"/>
+    <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"/>
+    <path
+      d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"/>
+    <path
+      d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"/>
+  </svg>
+</template>
--- a/frontend/src/components/VPSwitch/VPSwitch.vue
+++ b/frontend/src/components/VPSwitch/VPSwitch.vue
@ -0,0 +1,92 @@
+<template>
+  <button class="VPSwitch" type="button" role="switch">
+    <span class="check">
+      <span class="icon" v-if="$slots.default">
+        <slot/>
+      </span>
+    </span>
+  </button>
+</template>
+
+<style lang="less">
+.light {
+  --vp-c-border: #c2c2c4;
+  --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
+  --vp-c-indigo-1: #3451b2;
+  --vp-c-white: #ffffff;
+  --vp-c-black: #000000;
+  --vp-c-text-1: rgba(60, 60, 67);
+  --vp-c-text-2: rgba(60, 60, 67, 0.78);
+  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --vp-c-text-3: rgba(235, 235, 245, 0.38);
+}
+
+.dark {
+  --vp-c-border: #3c3f44;
+  --vp-c-gray-soft: rgba(101, 117, 133, 0.16);
+  --vp-c-indigo-1: #a8b1ff;
+  --vp-c-neutral: var(--vp-c-white);
+  --vp-c-neutral-inverse: var(--vp-c-black);
+  --vp-c-text-1: rgba(255, 255, 245, 0.86);
+}
+
+* {
+  --vp-c-neutral: var(--vp-c-black);
+  --vp-c-neutral-inverse: var(--vp-c-white);
+  --vp-input-border-color: var(--vp-c-border);
+  --vp-input-switch-bg-color: var(--vp-c-gray-soft);
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+}
+
+.VPSwitch {
+  position: relative;
+  border-radius: 11px;
+  display: block;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  transition: border-color 0.25s !important;
+}
+
+.VPSwitch:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.check {
+  position: absolute;
+  top: 1px;
+  /*rtl:ignore*/
+  left: 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--vp-c-neutral-inverse);
+  box-shadow: var(--vp-shadow-1);
+  transition: transform 0.25s !important;
+}
+
+.icon {
+  position: relative;
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.icon svg {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 12px;
+  height: 12px;
+  fill: var(--vp-c-text-2);
+}
+
+.dark .icon svg {
+  fill: var(--vp-c-text-1);
+  transition: opacity 0.25s !important;
+}
+</style>
--- a/frontend/src/dark.less
+++ b/frontend/src/dark.less
@ -1,9 +0,0 @@
-@import "ant-design-vue/dist/antd.dark";
-
-.directive-editor-extra {
-    background-color: rgba(0, 0, 0, 0.84) !important;
-}
-
-.issue-cert-log-container {
-    background-color: rgba(0, 0, 0, 0.84) !important;
-}
--- a/frontend/src/language/en/app.po
+++ b/frontend/src/language/en/app.po
--- a/frontend/src/language/es/app.po
+++ b/frontend/src/language/es/app.po
--- a/frontend/src/language/fr_FR/app.po
+++ b/frontend/src/language/fr_FR/app.po
--- a/frontend/src/language/messages.pot
+++ b/frontend/src/language/messages.pot
--- a/frontend/src/language/ru_RU/app.po
+++ b/frontend/src/language/ru_RU/app.po
--- a/frontend/src/language/translations.json
+++ b/frontend/src/language/translations.json
--- a/frontend/src/language/zh_CN/app.mo
+++ b/frontend/src/language/zh_CN/app.mo
--- a/frontend/src/language/zh_CN/app.po
+++ b/frontend/src/language/zh_CN/app.po
--- a/frontend/src/language/zh_TW/app.po
+++ b/frontend/src/language/zh_TW/app.po
--- a/frontend/src/layouts/BaseLayout.vue
+++ b/frontend/src/layouts/BaseLayout.vue
@ -7,9 +7,11 @@ import zh_CN from 'ant-design-vue/es/locale/zh_CN'
 import zh_TW from 'ant-design-vue/es/locale/zh_TW'
 import en_US from 'ant-design-vue/es/locale/en_US'
 import {computed, ref} from 'vue'
+import {theme} from 'ant-design-vue'
 import _ from 'lodash'

 import gettext from '@/gettext'
+import {useSettingsStore} from '@/pinia'

 const drawer_visible = ref(false)
 const collapsed = ref(collapse())
@ -36,15 +38,18 @@ const lang = computed(() => {
      return en_US
  }
 })
-
+const settings = useSettingsStore()
+const is_theme_dark = computed(() => settings.theme == 'dark')
 </script>
 <template>
-    <a-config-provider :locale="lang" :autoInsertSpaceInButton="false">
+  <a-config-provider :theme="{
+      algorithm: is_theme_dark?theme.darkAlgorithm:theme.defaultAlgorithm,
+    }" :locale="lang" :autoInsertSpaceInButton="false">
    <a-layout style="min-height: 100%;">
      <div class="drawer-sidebar">
        <a-drawer
          :closable="false"
-                    v-model:visible="drawer_visible"
+          v-model:open="drawer_visible"
          placement="left"
          @close="drawer_visible=false"
          width="256"
--- a/frontend/src/layouts/HeaderLayout.vue
+++ b/frontend/src/layouts/HeaderLayout.vue
@ -6,6 +6,7 @@ import auth from '@/api/auth'
 import {HomeOutlined, LogoutOutlined, MenuUnfoldOutlined} from '@ant-design/icons-vue'
 import {useRouter} from 'vue-router'
 import NginxControl from '@/components/NginxControl/NginxControl.vue'
+import SwitchAppearance from '@/components/SwitchAppearance/SwitchAppearance.vue'

 const {$gettext} = gettext

@ -27,7 +28,9 @@ function logout() {
    </div>

    <a-space class="user-wrapper" :size="24">
-            <set-language class="set_lang"/>
+      <SetLanguage class="set_lang"/>
+
+      <SwitchAppearance/>

      <a href="/">
        <HomeOutlined/>
--- a/frontend/src/lib/theme/index.ts
+++ b/frontend/src/lib/theme/index.ts
@ -1,32 +0,0 @@
-function changeCss(css: string, value: string) {
-    const body = document.body.style
-    body.setProperty(css, value)
-}
-
-function changeTheme(theme: string) {
-    const head = document.head
-    document.getElementById('theme')?.remove()
-    const styleDom = document.createElement('style')
-    styleDom.id = 'theme'
-    styleDom.innerHTML = theme
-    head.appendChild(styleDom)
-}
-
-export const dark_mode = async (enabled: Boolean) => {
-    document.body.setAttribute('class', enabled ? 'dark' : 'light')
-    if (enabled) {
-        changeTheme((await import('@/dark.less?inline')).default)
-        changeCss('--page-bg-color', '#141414')
-        changeCss('--head-bg-color', 'rgba(0, 0, 0, 0.5)')
-        changeCss('--line-color', '#2e2e2e')
-        changeCss('--content-bg-color', 'rgb(255 255 255 / 4%)')
-        changeCss('--text-color', 'rgba(255, 255, 255, 0.85)')
-    } else {
-        changeTheme((await import('@/style.less?inline')).default)
-        changeCss('--page-bg-color', 'white')
-        changeCss('--head-bg-color', 'rgba(255, 255, 255, 0.7)')
-        changeCss('--line-color', '#e8e8e8')
-        changeCss('--content-bg-color', '#f0f2f5')
-        changeCss('--text-color', 'rgba(0, 0, 0, 0.85)')
-    }
-}
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@ -3,7 +3,6 @@ import {createPinia} from 'pinia'
 import gettext from './gettext'
 import App from './App.vue'
 import router from './routes'
-//import 'ant-design-vue/dist/antd.less'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import {useSettingsStore} from '@/pinia'
 import {autoAnimatePlugin} from '@formkit/auto-animate/vue'
--- a/frontend/src/pinia/moudule/settings.ts
+++ b/frontend/src/pinia/moudule/settings.ts
@ -21,6 +21,7 @@ export const useSettingsStore = defineStore('settings', {
    },
    set_theme(t: string) {
      this.theme = t
+      document.body.setAttribute('class', t == 'dark' ? 'dark' : 'light')
    },
    set_preference_theme(t: string) {
      this.preference_theme = t
--- a/frontend/src/pinia/moudule/user.ts
+++ b/frontend/src/pinia/moudule/user.ts
@ -15,7 +15,7 @@ export const useUserStore = defineStore('user', {
    },
    logout() {
      this.token = ''
-        },
+    }
  },
  persist: true
 })
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@ -1 +0,0 @@
-@import 'ant-design-vue/dist/antd.less';
--- a/frontend/src/version.json
+++ b/frontend/src/version.json
@ -1 +1 @@
-{"version":"2.0.0-beta.4","build_id":19,"total_build":223}
+{"version":"2.0.0-beta.4","build_id":25,"total_build":229}
--- a/frontend/src/views/domain/cert/ChangeCert.vue
+++ b/frontend/src/views/domain/cert/ChangeCert.vue
@ -86,7 +86,7 @@ function ok() {
    <a-button @click="open">{{ $gettext('Change Certificate') }}</a-button>
    <a-modal
      :title="$gettext('Change Certificate')"
-            v-model:visible="visible"
+      v-model:open="visible"
      :mask="false"
      @ok="ok"
    >
--- a/frontend/src/views/domain/cert/components/ObtainCert.vue
+++ b/frontend/src/views/domain/cert/components/ObtainCert.vue
@ -224,7 +224,7 @@ function next() {
 <template>
  <a-modal
    :title="$gettext('Obtain certificate')"
-        v-model:visible="modalVisible"
+    v-model:open="modalVisible"
    :mask-closable="modalClosable"
    :footer="null" :closable="modalClosable" force-render>
    <template v-if="step===1">
--- a/frontend/src/views/domain/components/SiteDuplicate.vue
+++ b/frontend/src/views/domain/components/SiteDuplicate.vue
@ -108,7 +108,7 @@ watch(() => gettext.current, () => {
 </script>

 <template>
-    <a-modal :title="$gettext('Duplicate')" v-model:visible="show" @ok="onSubmit"
+  <a-modal :title="$gettext('Duplicate')" v-model:open="show" @ok="onSubmit"
           :confirm-loading="loading" :mask="null">
    <a-form layout="vertical">
      <a-form-item :label="$gettext('Name')" v-bind="validateInfos.name">
--- a/frontend/src/views/domain/ngx_conf/LocationEditor.vue
+++ b/frontend/src/views/domain/ngx_conf/LocationEditor.vue
@ -85,7 +85,7 @@ function remove(index: number) {
    </template>
  </draggable>

-    <a-modal :title="$gettext('Add Location')" v-model:visible="adding" @ok="save">
+  <a-modal :title="$gettext('Add Location')" v-model:open="adding" @ok="save">
    <a-form layout="vertical">
      <a-form-item :label="$gettext('Comments')">
        <a-textarea v-model:value="location.comments"/>
--- a/frontend/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
+++ b/frontend/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue
@ -99,7 +99,7 @@ provide('build_template', build_template)
    </div>
    <a-modal
      :title="data.name"
-            v-model:visible="visible"
+      v-model:open="visible"
      :mask="false"
      :ok-text="$gettext('Add')"
      @ok="add"
--- a/frontend/src/views/environment/Environment.vue
+++ b/frontend/src/views/environment/Environment.vue
@ -3,9 +3,9 @@ import {useGettext} from 'vue3-gettext'
 import {customRender, datetime} from '@/components/StdDataDisplay/StdTableTransformer'
 import environment from '@/api/environment'
 import StdCurd from '@/components/StdDataDisplay/StdCurd.vue'
-import {input, antSwitch, textarea} from '@/components/StdDataEntry'
+import {input} from '@/components/StdDataEntry'
 import {h} from 'vue'
-import {Badge, Tag} from 'ant-design-vue'
+import {Badge} from 'ant-design-vue'

 const {$gettext, interpolate} = useGettext()

@ -84,16 +84,16 @@ const columns = [{
    },
    sorter: true,
    pithy: true
-}, {
+  }, {
    title: () => $gettext('Updated at'),
    dataIndex: 'updated_at',
    customRender: datetime,
    sorter: true,
    pithy: true
-}, {
+  }, {
    title: () => $gettext('Action'),
    dataIndex: 'action'
-}]
+  }]

 </script>

--- a/frontend/src/views/other/Login.vue
+++ b/frontend/src/views/other/Login.vue
@ -9,7 +9,6 @@ import auth from '@/api/auth'
 import install from '@/api/install'
 import SetLanguage from '@/components/SetLanguage/SetLanguage.vue'
 import http from '@/lib/http'
-import {onMounted} from 'vue'

 const thisYear = new Date().getFullYear()

@ -75,7 +74,7 @@ watch(() => gettext.current, () => {
 const has_casdoor = ref(false)
 const casdoor_uri = ref('')

-http.get("/casdoor_uri")
+http.get('/casdoor_uri')
  .then((response) => {
    if (response?.uri) {
      has_casdoor.value = true
@ -84,7 +83,7 @@ http.get("/casdoor_uri")
  })
  .catch((e) => {
    message.error($gettext(e.message ?? 'Server error'))
-    });
+  })

 const loginWithCasdoor = () => {
  window.location.href = casdoor_uri.value
--- a/frontend/src/views/preference/BasicSettings.vue
+++ b/frontend/src/views/preference/BasicSettings.vue
@ -10,19 +10,6 @@ const theme = inject('theme')

 <template>
  <a-form layout="vertical">
-        <a-form-item :label="$gettext('Theme')">
-            <a-select v-model:value="theme">
-                <a-select-option value="auto">
-                    {{ $gettext('Auto') }}
-                </a-select-option>
-                <a-select-option value="light">
-                    {{ $gettext('Light') }}
-                </a-select-option>
-                <a-select-option value="dark">
-                    {{ $gettext('Dark') }}
-                </a-select-option>
-            </a-select>
-        </a-form-item>
    <a-form-item :label="$gettext('HTTP Host')">
      <p>{{ data.server.http_host }}</p>
    </a-form-item>
--- a/frontend/src/views/preference/Preference.vue
+++ b/frontend/src/views/preference/Preference.vue
@ -2,8 +2,6 @@
 import {useGettext} from 'vue3-gettext'
 import {onMounted, provide, ref, watch} from 'vue'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
-import {useSettingsStore} from '@/pinia'
-import {dark_mode} from '@/lib/theme'
 import settings from '@/api/settings'
 import {message} from 'ant-design-vue'
 import BasicSettings from '@/views/preference/BasicSettings.vue'
@ -14,10 +12,9 @@ import {useRoute, useRouter} from 'vue-router'

 const {$gettext} = useGettext()

-const settingsStore = useSettingsStore()
-const theme = ref(settingsStore.theme)
 const data = ref<IData>({
  server: {
+    http_host: '0.0.0.0',
    http_port: '9000',
    run_mode: 'debug',
    jwt_secret: '',
@ -56,9 +53,6 @@ settings.get().then(r => {
 })

 async function save() {
-    settingsStore.set_theme(theme.value)
-    settingsStore.set_preference_theme(theme.value)
-    await dark_mode(theme.value === 'dark')
  // fix type
  data.value.server.http_challenge_port = data.value.server.http_challenge_port.toString()
  settings.save(data.value).then(r => {
@ -70,7 +64,6 @@ async function save() {
 }

 provide('data', data)
-provide('theme', theme)

 const router = useRouter()
 const route = useRoute()
--- a/frontend/src/views/system/Upgrade.vue
+++ b/frontend/src/views/system/Upgrade.vue
@ -150,7 +150,7 @@ async function perform_upgrade() {
  <a-card :title="$gettext('Upgrade')">
    <a-modal
      :title="$gettext('Core Upgrade')"
-            v-model:visible="modalVisible"
+      v-model:open="modalVisible"
      :mask-closable="false"
      :footer="null" :closable="modalClosable" force-render>
      <a-progress
--- a/frontend/version.json
+++ b/frontend/version.json
@ -1 +1 @@
-{"version":"2.0.0-beta.4","build_id":19,"total_build":223}
+{"version":"2.0.0-beta.4","build_id":25,"total_build":229}
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
--- a/server/api/domain.go
+++ b/server/api/domain.go
@ -325,8 +325,6 @@ func EnableDomain(c *gin.Context) {
 	output, err := nginx.TestConf()
 	if err != nil {
 		_ = os.Remove(enabledConfigFilePath)
-		ErrHandler(c, err)
-		return
 	}

 	if nginx.GetLogLevel(output) > nginx.Warn {
@ -337,11 +335,7 @@ func EnableDomain(c *gin.Context) {
 		return
 	}

-	output, err = nginx.Reload()
-	if err != nil {
-		ErrHandler(c, err)
-		return
-	}
+	output, _ = nginx.Reload()

 	if nginx.GetLogLevel(output) > nginx.Warn {
 		c.JSON(http.StatusInternalServerError, gin.H{
@ -380,11 +374,7 @@ func DisableDomain(c *gin.Context) {
 		return
 	}

-	output, err := nginx.Reload()
-	if err != nil {
-		ErrHandler(c, err)
-		return
-	}
+	output, _ := nginx.Reload()

 	if nginx.GetLogLevel(output) > nginx.Warn {
 		c.JSON(http.StatusInternalServerError, gin.H{
--- a/server/internal/analytic/node.go
+++ b/server/internal/analytic/node.go
@ -102,7 +102,6 @@ func InitNode(env *model.Environment) (n *Node) {
        return
    }

-	logger.Debug(string(bytes))
    err = json.Unmarshal(bytes, &n.NodeInfo)
    if err != nil {
        logger.Error(err)
--- a/server/internal/analytic/node_record.go
+++ b/server/internal/analytic/node_record.go
@ -106,7 +106,6 @@ func nodeAnalyticRecord(env *model.Environment, ctx context.Context) (err error)
 			websocket.CloseNormalClosure) {
 			return err
 		}
-		logger.Debugf("recv: %s %s", env.Name, message)

 		err = json.Unmarshal(message, &nodeStat)