From 4aa42da642228e55b57cece1508f0de1104e6155 Mon Sep 17 00:00:00 2001
From: Jacky <me@jackyu.cn>
Date: Mon, 21 Apr 2025 07:34:35 +0000
Subject: [PATCH] refactor(preference): use pinia store

---
 api/settings/settings.go                      |   1 +
 app/src/api/settings.ts                       |   1 +
 app/src/components/Breadcrumb/index.ts        |   3 +
 app/src/components/EnvGroupTabs/index.ts      |   3 +
 app/src/components/EnvIndicator/index.ts      |   3 +
 app/src/components/ICP/index.ts               |   3 +
 app/src/components/Logo/index.ts              |   3 +
 app/src/components/NginxControl/index.ts      |   3 +
 app/src/components/NodeSelector/index.ts      |   3 +
 app/src/components/Notification/index.ts      |   3 +
 app/src/components/OTPInput/index.ts          |   3 +
 app/src/components/PageHeader/index.ts        |   3 +
 app/src/components/ReactiveFromNow/index.ts   |   3 +
 app/src/components/SensitiveString/index.ts   |   3 +
 app/src/components/SetLanguage/index.ts       |   3 +
 .../SwitchAppearance/SwitchAppearance.vue     |   2 +-
 app/src/components/SwitchAppearance/index.ts  |   3 +
 app/src/components/SystemRestore/index.ts     |   3 +
 app/src/components/TwoFA/index.ts             |   8 +
 app/src/components/VPSwitch/index.ts          |   3 +
 app/src/views/preference/Preference.vue       | 152 +++---------------
 .../{ => AuthSettings}/AddPasskey.vue         |   0
 .../components/{ => AuthSettings}/Passkey.vue |   4 +-
 .../{ => AuthSettings}/RecoveryCodes.vue      |   2 +-
 .../components/{ => AuthSettings}/TOTP.vue    |   4 +-
 .../components/AuthSettings/index.ts          |  11 ++
 app/src/views/preference/store/index.ts       | 127 +++++++++++++++
 .../preference/{ => tabs}/AppSettings.vue     |   7 +-
 .../preference/{ => tabs}/AuthSettings.vue    |  12 +-
 .../preference/{ => tabs}/CertSettings.vue    |   6 +-
 .../preference/{ => tabs}/ExternalNotify.vue  |   4 +-
 .../preference/{ => tabs}/HTTPSettings.vue    |   6 +-
 .../{ => tabs}/LogrotateSettings.vue          |   5 +-
 .../preference/{ => tabs}/NginxSettings.vue   |  18 ++-
 .../preference/{ => tabs}/NodeSettings.vue    |   8 +-
 .../preference/{ => tabs}/OpenAISettings.vue  |   6 +-
 .../preference/{ => tabs}/ServerSettings.vue  |   5 +-
 .../{ => tabs}/TerminalSettings.vue           |   5 +-
 app/src/views/preference/tabs/index.ts        |  11 ++
 39 files changed, 282 insertions(+), 171 deletions(-)
 create mode 100644 app/src/components/Breadcrumb/index.ts
 create mode 100644 app/src/components/EnvGroupTabs/index.ts
 create mode 100644 app/src/components/EnvIndicator/index.ts
 create mode 100644 app/src/components/ICP/index.ts
 create mode 100644 app/src/components/Logo/index.ts
 create mode 100644 app/src/components/NginxControl/index.ts
 create mode 100644 app/src/components/NodeSelector/index.ts
 create mode 100644 app/src/components/Notification/index.ts
 create mode 100644 app/src/components/OTPInput/index.ts
 create mode 100644 app/src/components/PageHeader/index.ts
 create mode 100644 app/src/components/ReactiveFromNow/index.ts
 create mode 100644 app/src/components/SensitiveString/index.ts
 create mode 100644 app/src/components/SetLanguage/index.ts
 create mode 100644 app/src/components/SwitchAppearance/index.ts
 create mode 100644 app/src/components/SystemRestore/index.ts
 create mode 100644 app/src/components/TwoFA/index.ts
 create mode 100644 app/src/components/VPSwitch/index.ts
 rename app/src/views/preference/components/{ => AuthSettings}/AddPasskey.vue (100%)
 rename app/src/views/preference/components/{ => AuthSettings}/Passkey.vue (96%)
 rename app/src/views/preference/components/{ => AuthSettings}/RecoveryCodes.vue (98%)
 rename app/src/views/preference/components/{ => AuthSettings}/TOTP.vue (96%)
 create mode 100644 app/src/views/preference/components/AuthSettings/index.ts
 create mode 100644 app/src/views/preference/store/index.ts
 rename app/src/views/preference/{ => tabs}/AppSettings.vue (63%)
 rename app/src/views/preference/{ => tabs}/AuthSettings.vue (92%)
 rename app/src/views/preference/{ => tabs}/CertSettings.vue (92%)
 rename app/src/views/preference/{ => tabs}/ExternalNotify.vue (77%)
 rename app/src/views/preference/{ => tabs}/HTTPSettings.vue (78%)
 rename app/src/views/preference/{ => tabs}/LogrotateSettings.vue (88%)
 rename app/src/views/preference/{ => tabs}/NginxSettings.vue (72%)
 rename app/src/views/preference/{ => tabs}/NodeSettings.vue (87%)
 rename app/src/views/preference/{ => tabs}/OpenAISettings.vue (93%)
 rename app/src/views/preference/{ => tabs}/ServerSettings.vue (89%)
 rename app/src/views/preference/{ => tabs}/TerminalSettings.vue (63%)
 create mode 100644 app/src/views/preference/tabs/index.ts

diff --git a/api/settings/settings.go b/api/settings/settings.go
index a50fe36c..7dfcb692 100644
--- a/api/settings/settings.go
+++ b/api/settings/settings.go
@@ -25,6 +25,7 @@ func GetSettings(c *gin.Context) {
 	settings.NginxSettings.ErrorLogPath = nginx.GetErrorLogPath()
 	settings.NginxSettings.ConfigDir = nginx.GetConfPath()
 	settings.NginxSettings.PIDPath = nginx.GetPIDPath()
+	settings.NginxSettings.StubStatusPort = settings.NginxSettings.GetStubStatusPort()
 
 	if settings.NginxSettings.ReloadCmd == "" {
 		settings.NginxSettings.ReloadCmd = "nginx -s reload"
diff --git a/app/src/api/settings.ts b/app/src/api/settings.ts
index 90d19288..d97e0b4f 100644
--- a/app/src/api/settings.ts
+++ b/app/src/api/settings.ts
@@ -64,6 +64,7 @@ export interface NginxSettings {
   reload_cmd: string
   restart_cmd: string
   stub_status_port: number
+  container_name: string
 }
 
 export interface NodeSettings {
diff --git a/app/src/components/Breadcrumb/index.ts b/app/src/components/Breadcrumb/index.ts
new file mode 100644
index 00000000..4211b0d7
--- /dev/null
+++ b/app/src/components/Breadcrumb/index.ts
@@ -0,0 +1,3 @@
+import Breadcrumb from './Breadcrumb.vue'
+
+export default Breadcrumb
diff --git a/app/src/components/EnvGroupTabs/index.ts b/app/src/components/EnvGroupTabs/index.ts
new file mode 100644
index 00000000..d38d49cb
--- /dev/null
+++ b/app/src/components/EnvGroupTabs/index.ts
@@ -0,0 +1,3 @@
+import EnvGroupTabs from './EnvGroupTabs.vue'
+
+export default EnvGroupTabs
diff --git a/app/src/components/EnvIndicator/index.ts b/app/src/components/EnvIndicator/index.ts
new file mode 100644
index 00000000..92a202b6
--- /dev/null
+++ b/app/src/components/EnvIndicator/index.ts
@@ -0,0 +1,3 @@
+import EnvIndicator from './EnvIndicator.vue'
+
+export default EnvIndicator
diff --git a/app/src/components/ICP/index.ts b/app/src/components/ICP/index.ts
new file mode 100644
index 00000000..af5fccc8
--- /dev/null
+++ b/app/src/components/ICP/index.ts
@@ -0,0 +1,3 @@
+import ICP from './ICP.vue'
+
+export default ICP
diff --git a/app/src/components/Logo/index.ts b/app/src/components/Logo/index.ts
new file mode 100644
index 00000000..372f4623
--- /dev/null
+++ b/app/src/components/Logo/index.ts
@@ -0,0 +1,3 @@
+import Logo from './Logo.vue'
+
+export default Logo
diff --git a/app/src/components/NginxControl/index.ts b/app/src/components/NginxControl/index.ts
new file mode 100644
index 00000000..c8116bf6
--- /dev/null
+++ b/app/src/components/NginxControl/index.ts
@@ -0,0 +1,3 @@
+import NginxControl from './NginxControl.vue'
+
+export default NginxControl
diff --git a/app/src/components/NodeSelector/index.ts b/app/src/components/NodeSelector/index.ts
new file mode 100644
index 00000000..a47f1e99
--- /dev/null
+++ b/app/src/components/NodeSelector/index.ts
@@ -0,0 +1,3 @@
+import NodeSelector from './NodeSelector.vue'
+
+export default NodeSelector
diff --git a/app/src/components/Notification/index.ts b/app/src/components/Notification/index.ts
new file mode 100644
index 00000000..0caca02d
--- /dev/null
+++ b/app/src/components/Notification/index.ts
@@ -0,0 +1,3 @@
+import Notification from './Notification.vue'
+
+export default Notification
diff --git a/app/src/components/OTPInput/index.ts b/app/src/components/OTPInput/index.ts
new file mode 100644
index 00000000..77378f29
--- /dev/null
+++ b/app/src/components/OTPInput/index.ts
@@ -0,0 +1,3 @@
+import OTPInput from './OTPInput.vue'
+
+export default OTPInput
diff --git a/app/src/components/PageHeader/index.ts b/app/src/components/PageHeader/index.ts
new file mode 100644
index 00000000..e30aad17
--- /dev/null
+++ b/app/src/components/PageHeader/index.ts
@@ -0,0 +1,3 @@
+import PageHeader from './PageHeader.vue'
+
+export default PageHeader
diff --git a/app/src/components/ReactiveFromNow/index.ts b/app/src/components/ReactiveFromNow/index.ts
new file mode 100644
index 00000000..6c637061
--- /dev/null
+++ b/app/src/components/ReactiveFromNow/index.ts
@@ -0,0 +1,3 @@
+import ReactiveFromNow from './ReactiveFromNow.vue'
+
+export default ReactiveFromNow
diff --git a/app/src/components/SensitiveString/index.ts b/app/src/components/SensitiveString/index.ts
new file mode 100644
index 00000000..17e9a8ec
--- /dev/null
+++ b/app/src/components/SensitiveString/index.ts
@@ -0,0 +1,3 @@
+import SensitiveString from './SensitiveString.vue'
+
+export default SensitiveString
diff --git a/app/src/components/SetLanguage/index.ts b/app/src/components/SetLanguage/index.ts
new file mode 100644
index 00000000..f02f7b97
--- /dev/null
+++ b/app/src/components/SetLanguage/index.ts
@@ -0,0 +1,3 @@
+import SetLanguage from './SetLanguage.vue'
+
+export default SetLanguage
diff --git a/app/src/components/SwitchAppearance/SwitchAppearance.vue b/app/src/components/SwitchAppearance/SwitchAppearance.vue
index ff2baaba..e34aa1c0 100644
--- a/app/src/components/SwitchAppearance/SwitchAppearance.vue
+++ b/app/src/components/SwitchAppearance/SwitchAppearance.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue'
-import VPSwitch from '@/components/VPSwitch/VPSwitch.vue'
+import VPSwitch from '@/components/VPSwitch'
 import { useSettingsStore } from '@/pinia'
 import VPIconMoon from './icons/VPIconMoon.vue'
 import VPIconSun from './icons/VPIconSun.vue'
diff --git a/app/src/components/SwitchAppearance/index.ts b/app/src/components/SwitchAppearance/index.ts
new file mode 100644
index 00000000..c2113914
--- /dev/null
+++ b/app/src/components/SwitchAppearance/index.ts
@@ -0,0 +1,3 @@
+import SwitchAppearance from './SwitchAppearance.vue'
+
+export default SwitchAppearance
diff --git a/app/src/components/SystemRestore/index.ts b/app/src/components/SystemRestore/index.ts
new file mode 100644
index 00000000..493e4c9f
--- /dev/null
+++ b/app/src/components/SystemRestore/index.ts
@@ -0,0 +1,3 @@
+import SystemRestoreContainer from './SystemRestoreContent.vue'
+
+export default SystemRestoreContainer
diff --git a/app/src/components/TwoFA/index.ts b/app/src/components/TwoFA/index.ts
new file mode 100644
index 00000000..86df4a51
--- /dev/null
+++ b/app/src/components/TwoFA/index.ts
@@ -0,0 +1,8 @@
+import Authorization from './Authorization.vue'
+import use2FAModal from './use2FAModal'
+
+export default Authorization
+
+export {
+  use2FAModal,
+}
diff --git a/app/src/components/VPSwitch/index.ts b/app/src/components/VPSwitch/index.ts
new file mode 100644
index 00000000..a9b675bb
--- /dev/null
+++ b/app/src/components/VPSwitch/index.ts
@@ -0,0 +1,3 @@
+import VPSwitch from './VPSwitch.vue'
+
+export default VPSwitch
diff --git a/app/src/views/preference/Preference.vue b/app/src/views/preference/Preference.vue
index 5c2fe577..44ff93c0 100644
--- a/app/src/views/preference/Preference.vue
+++ b/app/src/views/preference/Preference.vue
@@ -1,137 +1,23 @@
 <script setup lang="ts">
-import type { Settings } from '@/api/settings'
-import settings from '@/api/settings'
-import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
-import use2FAModal from '@/components/TwoFA/use2FAModal'
-import { useSettingsStore } from '@/pinia'
-import AppSettings from '@/views/preference/AppSettings.vue'
-import AuthSettings from '@/views/preference/AuthSettings.vue'
-import CertSettings from '@/views/preference/CertSettings.vue'
-import ExternalNotify from '@/views/preference/ExternalNotify.vue'
-import HTTPSettings from '@/views/preference/HTTPSettings.vue'
-import LogrotateSettings from '@/views/preference/LogrotateSettings.vue'
-import NginxSettings from '@/views/preference/NginxSettings.vue'
-import NodeSettings from '@/views/preference/NodeSettings.vue'
-import OpenAISettings from '@/views/preference/OpenAISettings.vue'
-import ServerSettings from '@/views/preference/ServerSettings.vue'
-import TerminalSettings from '@/views/preference/TerminalSettings.vue'
-import { message } from 'ant-design-vue'
-import { storeToRefs } from 'pinia'
+import FooterToolBar from '@/components/FooterToolbar'
+import {
+  AppSettings,
+  AuthSettings,
+  CertSettings,
+  ExternalNotify,
+  HTTPSettings,
+  LogrotateSettings,
+  NginxSettings,
+  NodeSettings,
+  OpenAISettings,
+  ServerSettings,
+  TerminalSettings,
+} from '@/views/preference/tabs'
+import useSystemSettingsStore from './store'
 
-const data = ref<Settings>({
-  app: {
-    page_size: 10,
-    jwt_secret: '',
-  },
-  server: {
-    host: '0.0.0.0',
-    port: 9000,
-    run_mode: 'debug',
-    enable_https: false,
-    ssl_cert: '',
-    ssl_key: '',
-  },
-  database: {
-    name: '',
-  },
-  auth: {
-    ip_white_list: [],
-    ban_threshold_minutes: 10,
-    max_attempts: 10,
-  },
-  casdoor: {
-    endpoint: '',
-    client_id: '',
-    client_secret: '',
-    certificate_path: '',
-    organization: '',
-    application: '',
-    redirect_uri: '',
-  },
-  cert: {
-    email: '',
-    ca_dir: '',
-    renewal_interval: 7,
-    recursive_nameservers: [],
-    http_challenge_port: '9180',
-  },
-  http: {
-    github_proxy: '',
-    insecure_skip_verify: false,
-  },
-  logrotate: {
-    enabled: false,
-    cmd: '',
-    interval: 1440,
-  },
-  nginx: {
-    access_log_path: '',
-    error_log_path: '',
-    config_dir: '',
-    config_path: '',
-    log_dir_white_list: [],
-    pid_path: '',
-    test_config_cmd: '',
-    reload_cmd: '',
-    restart_cmd: '',
-    stub_status_port: 51820,
-  },
-  node: {
-    name: '',
-    secret: '',
-    skip_installation: false,
-    demo: false,
-    icp_number: '',
-    public_security_number: '',
-  },
-  openai: {
-    model: '',
-    base_url: '',
-    proxy: '',
-    token: '',
-    api_type: 'OPEN_AI',
-    enable_code_completion: false,
-    code_completion_model: '',
-  },
-  terminal: {
-    start_cmd: '',
-  },
-  webauthn: {
-    rp_display_name: '',
-    rpid: '',
-    rp_origins: [],
-  },
-})
+const systemSettingsStore = useSystemSettingsStore()
 
-settings.get().then(r => {
-  data.value = r
-})
-
-const settingsStore = useSettingsStore()
-const { server_name } = storeToRefs(settingsStore)
-const errors = ref<Record<string, Record<string, string>>>({})
-const refAuthSettings = useTemplateRef('refAuthSettings')
-
-async function save() {
-  // fix type
-  data.value.cert.http_challenge_port = data.value.cert.http_challenge_port.toString()
-
-  const otpModal = use2FAModal()
-
-  otpModal.open().then(() => {
-    settings.save(data.value).then(r => {
-      if (!settingsStore.is_remote)
-        server_name.value = r?.server?.name ?? ''
-      data.value = r
-      refAuthSettings.value?.getBannedIPs?.()
-      message.success($gettext('Save successfully'))
-      errors.value = {}
-    })
-  })
-}
-
-provide('data', data)
-provide('errors', errors)
+systemSettingsStore.getSettings()
 
 const router = useRouter()
 const route = useRoute()
@@ -195,7 +81,7 @@ onMounted(() => {
           key="auth"
           :tab="$gettext('Auth')"
         >
-          <AuthSettings ref="refAuthSettings" />
+          <AuthSettings />
         </ATabPane>
         <ATabPane
           key="cert"
@@ -226,7 +112,7 @@ onMounted(() => {
     <FooterToolBar v-if="activeKey !== 'external_notify'">
       <AButton
         type="primary"
-        @click="save"
+        @click="systemSettingsStore.save"
       >
         {{ $gettext('Save') }}
       </AButton>
diff --git a/app/src/views/preference/components/AddPasskey.vue b/app/src/views/preference/components/AuthSettings/AddPasskey.vue
similarity index 100%
rename from app/src/views/preference/components/AddPasskey.vue
rename to app/src/views/preference/components/AuthSettings/AddPasskey.vue
diff --git a/app/src/views/preference/components/Passkey.vue b/app/src/views/preference/components/AuthSettings/Passkey.vue
similarity index 96%
rename from app/src/views/preference/components/Passkey.vue
rename to app/src/views/preference/components/AuthSettings/Passkey.vue
index 84b1c7bf..f0e12c56 100644
--- a/app/src/views/preference/components/Passkey.vue
+++ b/app/src/views/preference/components/AuthSettings/Passkey.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { Passkey } from '@/api/passkey'
 import passkey from '@/api/passkey'
-import ReactiveFromNow from '@/components/ReactiveFromNow/ReactiveFromNow.vue'
+import ReactiveFromNow from '@/components/ReactiveFromNow'
 import { formatDateTime } from '@/lib/helper'
 import { useUserStore } from '@/pinia'
-import AddPasskey from '@/views/preference/components/AddPasskey.vue'
 import { DeleteOutlined, EditOutlined, KeyOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import AddPasskey from './AddPasskey.vue'
 
 dayjs.extend(relativeTime)
 
diff --git a/app/src/views/preference/components/RecoveryCodes.vue b/app/src/views/preference/components/AuthSettings/RecoveryCodes.vue
similarity index 98%
rename from app/src/views/preference/components/RecoveryCodes.vue
rename to app/src/views/preference/components/AuthSettings/RecoveryCodes.vue
index 29058e3c..a40af7bb 100644
--- a/app/src/views/preference/components/RecoveryCodes.vue
+++ b/app/src/views/preference/components/AuthSettings/RecoveryCodes.vue
@@ -2,7 +2,7 @@
 import type { TwoFAStatus } from '@/api/2fa'
 import type { RecoveryCode } from '@/api/recovery'
 import recovery from '@/api/recovery'
-import use2FAModal from '@/components/TwoFA/use2FAModal'
+import { use2FAModal } from '@/components/TwoFA'
 import { CopyOutlined, WarningOutlined } from '@ant-design/icons-vue'
 import { UseClipboard } from '@vueuse/components'
 import { message } from 'ant-design-vue'
diff --git a/app/src/views/preference/components/TOTP.vue b/app/src/views/preference/components/AuthSettings/TOTP.vue
similarity index 96%
rename from app/src/views/preference/components/TOTP.vue
rename to app/src/views/preference/components/AuthSettings/TOTP.vue
index 5bffcee6..49eb3f6f 100644
--- a/app/src/views/preference/components/TOTP.vue
+++ b/app/src/views/preference/components/AuthSettings/TOTP.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { RecoveryCode } from '@/api/recovery'
 import otp from '@/api/otp'
-import OTPInput from '@/components/OTPInput/OTPInput.vue'
-import use2FAModal from '@/components/TwoFA/use2FAModal'
+import OTPInput from '@/components/OTPInput'
+import { use2FAModal } from '@/components/TwoFA'
 import { CheckCircleOutlined } from '@ant-design/icons-vue'
 import { UseClipboard } from '@vueuse/components'
 import { message } from 'ant-design-vue'
diff --git a/app/src/views/preference/components/AuthSettings/index.ts b/app/src/views/preference/components/AuthSettings/index.ts
new file mode 100644
index 00000000..a066ee80
--- /dev/null
+++ b/app/src/views/preference/components/AuthSettings/index.ts
@@ -0,0 +1,11 @@
+import AddPasskey from './AddPasskey.vue'
+import Passkey from './Passkey.vue'
+import RecoveryCodes from './RecoveryCodes.vue'
+import TOTP from './TOTP.vue'
+
+export {
+  AddPasskey,
+  Passkey,
+  RecoveryCodes,
+  TOTP,
+}
diff --git a/app/src/views/preference/store/index.ts b/app/src/views/preference/store/index.ts
new file mode 100644
index 00000000..1cb90709
--- /dev/null
+++ b/app/src/views/preference/store/index.ts
@@ -0,0 +1,127 @@
+import type { Settings } from '@/api/settings'
+import settings from '@/api/settings'
+import { use2FAModal } from '@/components/TwoFA'
+import { useSettingsStore } from '@/pinia'
+import { message } from 'ant-design-vue'
+import { defineStore } from 'pinia'
+
+const useSystemSettingsStore = defineStore('systemSettings', () => {
+  const data = ref<Settings>({
+    app: {
+      page_size: 10,
+      jwt_secret: '',
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 9000,
+      run_mode: 'debug',
+      enable_https: false,
+      ssl_cert: '',
+      ssl_key: '',
+    },
+    database: {
+      name: '',
+    },
+    auth: {
+      ip_white_list: [],
+      ban_threshold_minutes: 10,
+      max_attempts: 10,
+    },
+    casdoor: {
+      endpoint: '',
+      client_id: '',
+      client_secret: '',
+      certificate_path: '',
+      organization: '',
+      application: '',
+      redirect_uri: '',
+    },
+    cert: {
+      email: '',
+      ca_dir: '',
+      renewal_interval: 7,
+      recursive_nameservers: [],
+      http_challenge_port: '9180',
+    },
+    http: {
+      github_proxy: '',
+      insecure_skip_verify: false,
+    },
+    logrotate: {
+      enabled: false,
+      cmd: '',
+      interval: 1440,
+    },
+    nginx: {
+      access_log_path: '',
+      error_log_path: '',
+      config_dir: '',
+      config_path: '',
+      log_dir_white_list: [],
+      pid_path: '',
+      test_config_cmd: '',
+      reload_cmd: '',
+      restart_cmd: '',
+      stub_status_port: 51820,
+      container_name: '',
+    },
+    node: {
+      name: '',
+      secret: '',
+      skip_installation: false,
+      demo: false,
+      icp_number: '',
+      public_security_number: '',
+    },
+    openai: {
+      model: '',
+      base_url: '',
+      proxy: '',
+      token: '',
+      api_type: 'OPEN_AI',
+      enable_code_completion: false,
+      code_completion_model: '',
+    },
+    terminal: {
+      start_cmd: '',
+    },
+    webauthn: {
+      rp_display_name: '',
+      rpid: '',
+      rp_origins: [],
+    },
+  })
+  const errors = ref<Record<string, Record<string, string>>>({})
+
+  function getSettings() {
+    settings.get().then(r => {
+      data.value = r
+    })
+  }
+
+  async function save() {
+    if (!data.value)
+      return
+
+    // fix type
+    data.value.cert.http_challenge_port = data.value.cert.http_challenge_port.toString()
+
+    const otpModal = use2FAModal()
+
+    otpModal.open().then(() => {
+      settings.save(data.value!).then(r => {
+        const settingsStore = useSettingsStore()
+        const { server_name } = storeToRefs(settingsStore)
+        if (!settingsStore.is_remote)
+          server_name.value = r?.server?.name ?? ''
+        data.value = r
+        message.success($gettext('Save successfully'))
+        errors.value = {}
+      })
+    })
+  }
+
+  return { data, errors, getSettings, save }
+})
+
+export default useSystemSettingsStore
diff --git a/app/src/views/preference/AppSettings.vue b/app/src/views/preference/tabs/AppSettings.vue
similarity index 63%
rename from app/src/views/preference/AppSettings.vue
rename to app/src/views/preference/tabs/AppSettings.vue
index 89786573..2f8ccd11 100644
--- a/app/src/views/preference/AppSettings.vue
+++ b/app/src/views/preference/tabs/AppSettings.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { Settings } from '@/api/settings'
-import SensitiveString from '@/components/SensitiveString/SensitiveString.vue'
+import SensitiveString from '@/components/SensitiveString'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
+const systemSettingsStore = useSystemSettingsStore()
+const { data } = storeToRefs(systemSettingsStore)
 </script>
 
 <template>
diff --git a/app/src/views/preference/AuthSettings.vue b/app/src/views/preference/tabs/AuthSettings.vue
similarity index 92%
rename from app/src/views/preference/AuthSettings.vue
rename to app/src/views/preference/tabs/AuthSettings.vue
index 48363546..ee30b918 100644
--- a/app/src/views/preference/AuthSettings.vue
+++ b/app/src/views/preference/tabs/AuthSettings.vue
@@ -1,18 +1,18 @@
 <script setup lang="tsx">
 import type { TwoFAStatus } from '@/api/2fa'
 import type { RecoveryCode } from '@/api/recovery'
-import type { BannedIP, Settings } from '@/api/settings'
+import type { BannedIP } from '@/api/settings'
 import type { CustomRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import type { Ref } from 'vue'
 import twoFA from '@/api/2fa'
 import setting from '@/api/settings'
-import RecoveryCodes from '@/views/preference/components/RecoveryCodes.vue'
-import TOTP from '@/views/preference/components/TOTP.vue'
 import { message } from 'ant-design-vue'
 import dayjs from 'dayjs'
-import PasskeyRegistration from './components/Passkey.vue'
+import { Passkey, RecoveryCodes, TOTP } from '../components/AuthSettings'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
+const systemSettingsStore = useSystemSettingsStore()
+const { data } = storeToRefs(systemSettingsStore)
 
 const bannedIPColumns = [{
   title: $gettext('IP'),
@@ -68,7 +68,7 @@ get2FAStatus()
   <div class="flex justify-center">
     <div>
       <h2>{{ $gettext('2FA Settings') }}</h2>
-      <PasskeyRegistration class="mb-4" />
+      <Passkey class="mb-4" />
 
       <TOTP
         v-model:recovery-codes="recoveryCodes"
diff --git a/app/src/views/preference/CertSettings.vue b/app/src/views/preference/tabs/CertSettings.vue
similarity index 92%
rename from app/src/views/preference/CertSettings.vue
rename to app/src/views/preference/tabs/CertSettings.vue
index 609014ea..3e870483 100644
--- a/app/src/views/preference/CertSettings.vue
+++ b/app/src/views/preference/tabs/CertSettings.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Settings } from '@/api/settings'
 import { DeleteOutlined, HolderOutlined } from '@ant-design/icons-vue'
 import Draggable from 'vuedraggable'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
-const errors: Record<string, Record<string, string>> = inject('errors') as Record<string, Record<string, string>>
+const systemSettingsStore = useSystemSettingsStore()
+const { data, errors } = storeToRefs(systemSettingsStore)
 </script>
 
 <template>
diff --git a/app/src/views/preference/ExternalNotify.vue b/app/src/views/preference/tabs/ExternalNotify.vue
similarity index 77%
rename from app/src/views/preference/ExternalNotify.vue
rename to app/src/views/preference/tabs/ExternalNotify.vue
index 43c90332..2dc061b5 100644
--- a/app/src/views/preference/ExternalNotify.vue
+++ b/app/src/views/preference/tabs/ExternalNotify.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import externalNotify from '@/api/external_notify'
 import { StdCurd } from '@/components/StdDesign/StdDataDisplay'
-import columns from './components/ExternalNotify/columns'
-import ExternalNotifyEditor from './components/ExternalNotify/ExternalNotifyEditor.vue'
+import ExternalNotifyEditor from '../components/ExternalNotify'
+import columns from '../components/ExternalNotify/columns'
 </script>
 
 <template>
diff --git a/app/src/views/preference/HTTPSettings.vue b/app/src/views/preference/tabs/HTTPSettings.vue
similarity index 78%
rename from app/src/views/preference/HTTPSettings.vue
rename to app/src/views/preference/tabs/HTTPSettings.vue
index b319c0b4..b86e908f 100644
--- a/app/src/views/preference/HTTPSettings.vue
+++ b/app/src/views/preference/tabs/HTTPSettings.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Settings } from '@/api/settings'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
-const errors: Record<string, Record<string, string>> = inject('errors') as Record<string, Record<string, string>>
+const systemSettingsStore = useSystemSettingsStore()
+const { data, errors } = storeToRefs(systemSettingsStore)
 </script>
 
 <template>
diff --git a/app/src/views/preference/LogrotateSettings.vue b/app/src/views/preference/tabs/LogrotateSettings.vue
similarity index 88%
rename from app/src/views/preference/LogrotateSettings.vue
rename to app/src/views/preference/tabs/LogrotateSettings.vue
index f85735b6..6e20eb6c 100644
--- a/app/src/views/preference/LogrotateSettings.vue
+++ b/app/src/views/preference/tabs/LogrotateSettings.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { Settings } from '@/api/settings'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
+const systemSettingsStore = useSystemSettingsStore()
+const { data } = storeToRefs(systemSettingsStore)
 </script>
 
 <template>
diff --git a/app/src/views/preference/NginxSettings.vue b/app/src/views/preference/tabs/NginxSettings.vue
similarity index 72%
rename from app/src/views/preference/NginxSettings.vue
rename to app/src/views/preference/tabs/NginxSettings.vue
index 38e5a5b5..ef186860 100644
--- a/app/src/views/preference/NginxSettings.vue
+++ b/app/src/views/preference/tabs/NginxSettings.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { Settings } from '@/api/settings'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
+const systemSettingsStore = useSystemSettingsStore()
+const { data } = storeToRefs(systemSettingsStore)
 </script>
 
 <template>
@@ -42,6 +43,19 @@ const data: Ref<Settings> = inject('data') as Ref<Settings>
     <AFormItem :label="$gettext('Nginx Restart Command')">
       {{ data.nginx.restart_cmd }}
     </AFormItem>
+    <AFormItem :label="$gettext('Nginx Control Mode')">
+      <div v-if="data.nginx.container_name">
+        <ATag color="blue" tag>
+          {{ $gettext('External Docker Container') }}
+        </ATag>
+        {{ data.nginx.container_name }}
+      </div>
+      <div v-else>
+        <ATag color="green" tag>
+          {{ $gettext('Local') }}
+        </ATag>
+      </div>
+    </AFormItem>
   </AForm>
 </template>
 
diff --git a/app/src/views/preference/NodeSettings.vue b/app/src/views/preference/tabs/NodeSettings.vue
similarity index 87%
rename from app/src/views/preference/NodeSettings.vue
rename to app/src/views/preference/tabs/NodeSettings.vue
index f19672ed..32deb263 100644
--- a/app/src/views/preference/NodeSettings.vue
+++ b/app/src/views/preference/tabs/NodeSettings.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { Settings } from '@/api/settings'
-import SensitiveString from '@/components/SensitiveString/SensitiveString.vue'
+import SensitiveString from '@/components/SensitiveString'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
-const errors: Record<string, Record<string, string>> = inject('errors') as Record<string, Record<string, string>>
+const systemSettingsStore = useSystemSettingsStore()
+const { data, errors } = storeToRefs(systemSettingsStore)
 </script>
 
 <template>
diff --git a/app/src/views/preference/OpenAISettings.vue b/app/src/views/preference/tabs/OpenAISettings.vue
similarity index 93%
rename from app/src/views/preference/OpenAISettings.vue
rename to app/src/views/preference/tabs/OpenAISettings.vue
index 7c7982cb..09c4e9e6 100644
--- a/app/src/views/preference/OpenAISettings.vue
+++ b/app/src/views/preference/tabs/OpenAISettings.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { Settings } from '@/api/settings'
 import { LLM_MODELS, LLM_PROVIDERS } from '@/constants/llm'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
-const errors: Record<string, Record<string, string>> = inject('errors') as Record<string, Record<string, string>>
+const systemSettingsStore = useSystemSettingsStore()
+const { data, errors } = storeToRefs(systemSettingsStore)
 
 const models = LLM_MODELS.map(model => ({
   value: model,
diff --git a/app/src/views/preference/ServerSettings.vue b/app/src/views/preference/tabs/ServerSettings.vue
similarity index 89%
rename from app/src/views/preference/ServerSettings.vue
rename to app/src/views/preference/tabs/ServerSettings.vue
index aa62541a..3e6b090c 100644
--- a/app/src/views/preference/ServerSettings.vue
+++ b/app/src/views/preference/tabs/ServerSettings.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { Cert } from '@/api/cert'
-import type { Settings } from '@/api/settings'
 import ChangeCert from '@/views/site/site_edit/components/Cert/ChangeCert.vue'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
+const systemSettingsStore = useSystemSettingsStore()
+const { data } = storeToRefs(systemSettingsStore)
 
 function handleCertChange(certs: Cert[]) {
   if (certs.length > 0 && data.value?.server) {
diff --git a/app/src/views/preference/TerminalSettings.vue b/app/src/views/preference/tabs/TerminalSettings.vue
similarity index 63%
rename from app/src/views/preference/TerminalSettings.vue
rename to app/src/views/preference/tabs/TerminalSettings.vue
index 9a2a40e3..288eda2d 100644
--- a/app/src/views/preference/TerminalSettings.vue
+++ b/app/src/views/preference/tabs/TerminalSettings.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { Settings } from '@/api/settings'
+import useSystemSettingsStore from '../store'
 
-const data: Ref<Settings> = inject('data') as Ref<Settings>
+const systemSettingsStore = useSystemSettingsStore()
+const { data } = storeToRefs(systemSettingsStore)
 </script>
 
 <template>
diff --git a/app/src/views/preference/tabs/index.ts b/app/src/views/preference/tabs/index.ts
new file mode 100644
index 00000000..24f2a68b
--- /dev/null
+++ b/app/src/views/preference/tabs/index.ts
@@ -0,0 +1,11 @@
+export { default as AppSettings } from './AppSettings.vue'
+export { default as AuthSettings } from './AuthSettings.vue'
+export { default as CertSettings } from './CertSettings.vue'
+export { default as ExternalNotify } from './ExternalNotify.vue'
+export { default as HTTPSettings } from './HTTPSettings.vue'
+export { default as LogrotateSettings } from './LogrotateSettings.vue'
+export { default as NginxSettings } from './NginxSettings.vue'
+export { default as NodeSettings } from './NodeSettings.vue'
+export { default as OpenAISettings } from './OpenAISettings.vue'
+export { default as ServerSettings } from './ServerSettings.vue'
+export { default as TerminalSettings } from './TerminalSettings.vue'