feat: 完善证书设置

web/src/views/setting/IndexView.vue

@@ -36,6 +36,7 @@ const { data: model } = useRequest(setting.list, {
     backup_path: '',
     https: false,
     acme: false,
+    public_ip: [],
     cert: '',
     key: ''
   }
@@ -45,14 +46,25 @@ const handleSave = () => {
   if (model.value.entrance.trim() === '') {
     model.value.entrance = '/'
   }
-  useRequest(setting.update(model.value)).onSuccess(() => {
+  useRequest(setting.update(model.value)).onSuccess(({ data }) => {
     window.$message.success($gettext('Saved successfully'))
+
+    // 更新语言设置
     if (model.value.locale !== themeStore.locale) {
       themeStore.setLocale(model.value.locale)
-      window.$message.info($gettext('Panel is restarting, page will refresh in 3 seconds'))
+    }
+
+    // 如果需要重启，则自动刷新页面
+    if (data.restart) {
+      window.$message.info($gettext('Panel is restarting, page will refresh in 5 seconds'))
       setTimeout(() => {
-        window.location.reload()
-      }, 3000)
+        const protocol = model.value.https ? 'https:' : 'http:'
+        const hostname = window.location.hostname
+        const port = model.value.port
+        const entrance = model.value.entrance || '/'
+        // 构建新的 URL
+        window.location.href = `${protocol}//${hostname}:${port}${entrance}`
+      }, 5000)
     }
   })
 }

web/src/views/setting/SettingBase.vue

@@ -29,13 +29,6 @@ const channels = [
 
 <template>
   <n-flex vertical>
-    <n-alert type="info">
-      {{
-        $gettext(
-          'Modifying panel port/entrance requires corresponding changes in the browser address bar to access the panel!'
-        )
-      }}
-    </n-alert>
     <n-form>
       <n-form-item :label="$gettext('Panel Name')">
         <n-input v-model:value="model.name" :placeholder="$gettext('Panel Name')" />

web/src/views/setting/SettingSafe.vue

@@ -1,9 +1,40 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 const { $gettext } = useGettext()
 
 const model = defineModel<any>('model', { type: Object, required: true })
+
+// HTTPS 模式：off / acme / custom
+const httpsMode = computed({
+  get: () => {
+    if (!model.value.https) return 'off'
+    return model.value.acme ? 'acme' : 'custom'
+  },
+  set: (value: string) => {
+    switch (value) {
+      case 'off':
+        model.value.https = false
+        model.value.acme = false
+        break
+      case 'acme':
+        model.value.https = true
+        model.value.acme = true
+        break
+      case 'custom':
+        model.value.https = true
+        model.value.acme = false
+        break
+    }
+  }
+})
+
+const httpsModeOptions = computed(() => [
+  { label: $gettext('Disabled'), value: 'off' },
+  { label: $gettext('ACME (Auto)'), value: 'acme' },
+  { label: $gettext('Custom Certificate'), value: 'custom' }
+])
 </script>
 
 <template>
@@ -182,39 +213,46 @@ const model = defineModel<any>('model', { type: Object, required: true })
             </template>
             {{
               $gettext(
-                'Enable HTTPS for the panel to ensure secure communication. You need to provide a valid SSL certificate and private key'
+                'Enable HTTPS for the panel. ACME will automatically obtain and renew certificates (requires panel accessible via public IP). Custom allows you to provide your own certificate'
               )
             }}
           </n-tooltip>
         </template>
-        <n-switch v-model:value="model.https" />
+        <n-radio-group v-model:value="httpsMode">
+          <n-radio-button
+            v-for="option in httpsModeOptions"
+            :key="option.value"
+            :value="option.value"
+            :label="option.label"
+          />
+        </n-radio-group>
       </n-form-item>
-      <n-form-item>
+      <n-form-item v-if="httpsMode === 'acme'" :label="$gettext('Panel Public IP')">
         <template #label>
           <n-tooltip>
             <template #trigger>
               <div class="flex items-center">
-                {{ $gettext('ACME') }}
+                {{ $gettext('Panel Public IP') }}
                 <the-icon :size="16" icon="mdi:help-circle-outline" class="ml-1" />
               </div>
             </template>
             {{
               $gettext(
-                'Use ACME protocol to automatically obtain and renew SSL certificates for the panel. Make sure your panel is accessible via the ip you provide'
+                'Panel public IP is used to issue HTTPS certificates using ACME. Ensure that the entered IP address is accessible from the public network.'
               )
             }}
           </n-tooltip>
         </template>
-        <n-switch v-model:value="model.acme" />
+        <n-dynamic-input v-model:value="model.public_ip" placeholder="127.0.0.1" show-sort-button />
       </n-form-item>
-      <n-form-item v-if="model.https && !model.acme" :label="$gettext('Certificate')">
+      <n-form-item v-if="httpsMode === 'custom'" :label="$gettext('Certificate')">
         <n-input
           v-model:value="model.cert"
           type="textarea"
           :autosize="{ minRows: 10, maxRows: 15 }"
         />
       </n-form-item>
-      <n-form-item v-if="model.https && !model.acme" :label="$gettext('Private Key')">
+      <n-form-item v-if="httpsMode === 'custom'" :label="$gettext('Private Key')">
         <n-input
           v-model:value="model.key"
           type="textarea"