From 566a4f35689b24eb61e17793c5c19ed6fa8acc53 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Fri, 28 Apr 2023 14:48:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9D=A2=E6=9D=BF=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E8=AF=81=E4=B9=A6=E6=94=B9=E4=B8=BA=E6=8A=BD=E5=B1=89=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=20(#823)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/init/router/router.go                 |   2 -
 frontend/src/lang/modules/en.ts               |   3 +-
 frontend/src/lang/modules/zh.ts               |   3 +-
 frontend/src/views/setting/monitor/index.vue  |   2 +-
 frontend/src/views/setting/panel/index.vue    |   2 +-
 .../views/setting/panel/password/index.vue    |   2 +-
 .../src/views/setting/safe/entrance/index.vue |  30 ++-
 frontend/src/views/setting/safe/index.vue     |  80 +++---
 frontend/src/views/setting/safe/mfa/index.vue |  70 ++---
 frontend/src/views/setting/safe/ssl/index.vue | 250 ++++++++++--------
 .../src/views/setting/safe/timeout/index.vue  |  16 +-
 11 files changed, 263 insertions(+), 197 deletions(-)

diff --git a/backend/init/router/router.go b/backend/init/router/router.go
index c2a2ec62b..69d4d27aa 100644
--- a/backend/init/router/router.go
+++ b/backend/init/router/router.go
@@ -56,7 +56,6 @@ func Routers() *gin.Engine {
 	Router.SetFuncMap(template.FuncMap{
 		"Localize": ginI18n.GetMessage,
 	})
-	Router.Use(middleware.JwtAuth())
 
 	systemRouter := rou.RouterGroupApp
 
@@ -73,7 +72,6 @@ func Routers() *gin.Engine {
 
 	PrivateGroup := Router.Group("/api/v1")
 	PrivateGroup.Use(middleware.GlobalLoading())
-	//PrivateGroup.Use(middleware.SafetyAuth())
 	{
 		systemRouter.InitBaseRouter(PrivateGroup)
 		systemRouter.InitDashboardRouter(PrivateGroup)
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 05ae4efb8..aed1822ed 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -901,12 +901,13 @@ const message = {
             'If the https service is disabled, you need to restart the panel for it to take effect. Do you want to continue?',
 
         https: 'Setting up HTTPS protocol access for the panel can enhance the security of panel access.',
+        certType: 'Certificate type',
         selfSigned: 'Self signed',
         selfSignedHelper:
             'It is normal for self-signed certificates to be not trusted by browsers and display a security warning as the certificate is not issued by a trusted third party.',
         import: 'Import',
         select: 'Select',
-        domainOrIP: 'Domain/IP：',
+        domainOrIP: 'Domain or IP：',
         timeOut: 'Timeout',
         rootCrtDownload: 'Root certificate download',
         primaryKey: 'Primary key',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 5a061584a..a8e1671b5 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -937,11 +937,12 @@ const message = {
         sslDisableHelper: '禁用 https 服务，需要重启面板才能生效，是否继续？',
 
         https: '为面板设置 https 协议访问，提升面板访问安全性',
+        certType: '证书类型',
         selfSigned: '自签名',
         selfSignedHelper: '自签证书，不被浏览器信任，显示不安全是正常现象',
         import: '导入',
         select: '选择已有',
-        domainOrIP: '域名/IP：',
+        domainOrIP: '域名或 IP：',
         timeOut: '过期时间：',
         rootCrtDownload: '根证书下载',
         primaryKey: '密钥',
diff --git a/frontend/src/views/setting/monitor/index.vue b/frontend/src/views/setting/monitor/index.vue
index 9b7e1b945..9192da01b 100644
--- a/frontend/src/views/setting/monitor/index.vue
+++ b/frontend/src/views/setting/monitor/index.vue
@@ -5,7 +5,7 @@
                 <el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
                     <el-row>
                         <el-col :span="1"><br /></el-col>
-                        <el-col :span="16">
+                        <el-col :span="12">
                             <el-form-item
                                 :label="$t('setting.enableMonitor')"
                                 :rules="Rules.requiredInput"
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index adce87728..44b9329f4 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -5,7 +5,7 @@
                 <el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
                     <el-row>
                         <el-col :span="1"><br /></el-col>
-                        <el-col :span="16">
+                        <el-col :span="12">
                             <el-form-item :label="$t('setting.user')" :rules="Rules.userName" prop="userName">
                                 <el-input clearable v-model="form.userName">
                                     <template #append>
diff --git a/frontend/src/views/setting/panel/password/index.vue b/frontend/src/views/setting/panel/password/index.vue
index e1ba0dc52..8879d51b3 100644
--- a/frontend/src/views/setting/panel/password/index.vue
+++ b/frontend/src/views/setting/panel/password/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-loading="loading">
-        <el-drawer v-model="passwordVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
+        <el-drawer v-model="passwordVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
             <template #header>
                 <DrawerHeader :header="$t('setting.changePassword')" :back="handleClose" />
             </template>
diff --git a/frontend/src/views/setting/safe/entrance/index.vue b/frontend/src/views/setting/safe/entrance/index.vue
index 260ec1519..ad4c7f7fd 100644
--- a/frontend/src/views/setting/safe/entrance/index.vue
+++ b/frontend/src/views/setting/safe/entrance/index.vue
@@ -5,19 +5,23 @@
                 <DrawerHeader :header="$t('setting.entrance')" :back="handleClose" />
             </template>
             <el-form label-position="top" v-loading="loading">
-                <el-form-item :label="$t('setting.entrance')" prop="days">
-                    <el-input clearable v-model="securityEntrance">
-                        <template #append>
-                            <el-button @click="random" icon="RefreshRight"></el-button>
-                        </template>
-                    </el-input>
-                    <span class="input-help">
-                        {{ $t('setting.entranceInputHelper') }}
-                    </span>
-                    <span class="input-error" v-if="codeError">
-                        {{ $t('setting.entranceError') }}
-                    </span>
-                </el-form-item>
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('setting.entrance')" prop="days">
+                            <el-input clearable v-model="securityEntrance">
+                                <template #append>
+                                    <el-button @click="random" icon="RefreshRight"></el-button>
+                                </template>
+                            </el-input>
+                            <span class="input-help">
+                                {{ $t('setting.entranceInputHelper') }}
+                            </span>
+                            <span class="input-error" v-if="codeError">
+                                {{ $t('setting.entranceError') }}
+                            </span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
diff --git a/frontend/src/views/setting/safe/index.vue b/frontend/src/views/setting/safe/index.vue
index eedc85ac9..b158df635 100644
--- a/frontend/src/views/setting/safe/index.vue
+++ b/frontend/src/views/setting/safe/index.vue
@@ -5,7 +5,7 @@
                 <el-form :model="form" ref="panelFormRef" v-loading="loading" label-position="left" label-width="180px">
                     <el-row>
                         <el-col :span="1"><br /></el-col>
-                        <el-col :span="16">
+                        <el-col :span="12">
                             <el-form-item :label="$t('setting.panelPort')" :rules="Rules.port" prop="serverPort">
                                 <el-input clearable v-model.number="form.serverPort">
                                     <template #append>
@@ -94,12 +94,17 @@
                                     inactive-value="disable"
                                 />
                                 <span class="input-help">{{ $t('setting.https') }}</span>
-                                <SSLSetting
-                                    :type="form.sslType"
-                                    :status="form.ssl"
-                                    v-if="sslShow"
-                                    style="width: 100%"
-                                />
+                                <div v-if="form.ssl === 'enable' && sslInfo">
+                                    <el-tag>{{ $t('setting.domainOrIP') }} {{ sslInfo.domain }}</el-tag>
+                                    <el-tag style="margin-left: 5px">
+                                        {{ $t('setting.timeOut') }} {{ sslInfo.timeout }}
+                                    </el-tag>
+                                    <div>
+                                        <el-button link type="primary" @click="handleSSL">
+                                            {{ $t('commons.button.view') }}
+                                        </el-button>
+                                    </div>
+                                </div>
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -108,6 +113,7 @@
         </LayoutContent>
 
         <MfaSetting ref="mfaRef" @search="search" />
+        <SSLSetting ref="sslRef" @search="search" />
         <EntranceSetting ref="entranceRef" @search="search" />
         <TimeoutSetting ref="timeoutref" @search="search" />
     </div>
@@ -121,16 +127,27 @@ import SSLSetting from '@/views/setting/safe/ssl/index.vue';
 import MfaSetting from '@/views/setting/safe/mfa/index.vue';
 import TimeoutSetting from '@/views/setting/safe/timeout/index.vue';
 import EntranceSetting from '@/views/setting/safe/entrance/index.vue';
-import { updateSetting, getSettingInfo, updatePort, getSystemAvailable, updateSSL } from '@/api/modules/setting';
+import {
+    updateSetting,
+    getSettingInfo,
+    updatePort,
+    getSystemAvailable,
+    updateSSL,
+    loadSSLInfo,
+} from '@/api/modules/setting';
 import i18n from '@/lang';
 import { Rules } from '@/global/form-rules';
 import { MsgSuccess } from '@/utils/message';
+import { Setting } from '@/api/interface/setting';
 
 const loading = ref(false);
 const entranceRef = ref();
 const timeoutref = ref();
 const mfaRef = ref();
 
+const sslRef = ref();
+const sslInfo = ref<Setting.SSLInfo>();
+
 const form = reactive({
     serverPort: 9999,
     ssl: 'disable',
@@ -143,19 +160,15 @@ const form = reactive({
 });
 type FormInstance = InstanceType<typeof ElForm>;
 
-const sslShow = ref();
-const oldSSLStatus = ref();
-
 const unset = ref(i18n.global.t('setting.unSetting'));
 
 const search = async () => {
     const res = await getSettingInfo();
     form.serverPort = Number(res.data.serverPort);
     form.ssl = res.data.ssl;
-    oldSSLStatus.value = res.data.ssl;
     form.sslType = res.data.sslType;
     if (form.ssl === 'enable') {
-        sslShow.value = true;
+        loadInfo();
     }
     form.securityEntrance = res.data.securityEntrance;
     form.expirationDays = Number(res.data.expirationDays);
@@ -227,31 +240,31 @@ const onSavePort = async (formEl: FormInstance | undefined, key: string, val: an
 const handleMFA = async () => {
     if (form.mfaStatus === 'enable') {
         mfaRef.value.acceptParams();
-    } else {
-        loading.value = true;
-        await updateSetting({ key: 'MFAStatus', value: 'disable' })
-            .then(() => {
-                loading.value = false;
-                search();
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-            })
-            .catch(() => {
-                loading.value = false;
-            });
+        return;
     }
+    loading.value = true;
+    await updateSetting({ key: 'MFAStatus', value: 'disable' })
+        .then(() => {
+            loading.value = false;
+            search();
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+        })
+        .catch(() => {
+            loading.value = false;
+        });
 };
 
 const onChangeEntrance = async () => {
     entranceRef.value.acceptParams({ securityEntrance: form.securityEntrance });
 };
-
 const handleSSL = async () => {
     if (form.ssl === 'enable') {
-        sslShow.value = true;
-        return;
-    }
-    if (form.ssl === oldSSLStatus.value) {
-        sslShow.value = false;
+        let params = {
+            ssl: form.ssl,
+            sslType: form.sslType,
+            sslInfo: sslInfo.value,
+        };
+        sslRef.value!.acceptParams(params);
         return;
     }
     ElMessageBox.confirm(i18n.global.t('setting.sslDisableHelper'), i18n.global.t('setting.sslDisable'), {
@@ -260,7 +273,6 @@ const handleSSL = async () => {
         type: 'info',
     })
         .then(async () => {
-            sslShow.value = false;
             await updateSSL({ ssl: 'disable', domain: '', sslType: '', key: '', cert: '', sslID: 0 });
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             let href = window.location.href;
@@ -272,6 +284,12 @@ const handleSSL = async () => {
         });
 };
 
+const loadInfo = async () => {
+    await loadSSLInfo().then(async (res) => {
+        sslInfo.value = res.data;
+    });
+};
+
 const onChangeExpirationTime = async () => {
     timeoutref.value.acceptParams({ expirationDays: form.expirationDays });
 };
diff --git a/frontend/src/views/setting/safe/mfa/index.vue b/frontend/src/views/setting/safe/mfa/index.vue
index fcf162cb0..5439cfda5 100644
--- a/frontend/src/views/setting/safe/mfa/index.vue
+++ b/frontend/src/views/setting/safe/mfa/index.vue
@@ -11,40 +11,44 @@
                 <DrawerHeader :header="$t('setting.mfa')" :back="handleClose" />
             </template>
             <el-form :model="form" ref="formRef" v-loading="loading" label-position="top">
-                <el-form-item :label="$t('setting.mfaHelper1')">
-                    <ul>
-                        <li>Google Authenticator</li>
-                        <li>Microsoft Authenticator</li>
-                        <li>1Password</li>
-                        <li>LastPass</li>
-                        <li>Authenticator</li>
-                    </ul>
-                </el-form-item>
-                <el-form-item :label="$t('setting.mfaTypeOption')">
-                    <el-radio-group v-model="mode" @change="form.secret = ''">
-                        <el-radio label="scan">{{ $t('setting.qrCode') }}</el-radio>
-                        <el-radio label="input">{{ $t('setting.manualInput') }}</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item :label="$t('setting.mfaHelper2')" v-if="mode === 'scan'">
-                    <el-image style="width: 120px; height: 120px" :src="qrImage" />
-                </el-form-item>
-                <el-form-item
-                    :label="$t('setting.mfaSecret')"
-                    v-if="mode === 'input'"
-                    prop="secret"
-                    :rules="Rules.requiredInput"
-                >
-                    <el-input v-model="form.secret"></el-input>
-                </el-form-item>
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('setting.mfaHelper1')">
+                            <ul>
+                                <li>Google Authenticator</li>
+                                <li>Microsoft Authenticator</li>
+                                <li>1Password</li>
+                                <li>LastPass</li>
+                                <li>Authenticator</li>
+                            </ul>
+                        </el-form-item>
+                        <el-form-item :label="$t('setting.mfaTypeOption')">
+                            <el-radio-group v-model="mode" @change="form.secret = ''">
+                                <el-radio label="scan">{{ $t('setting.qrCode') }}</el-radio>
+                                <el-radio label="input">{{ $t('setting.manualInput') }}</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item :label="$t('setting.mfaHelper2')" v-if="mode === 'scan'">
+                            <el-image style="width: 120px; height: 120px" :src="qrImage" />
+                        </el-form-item>
+                        <el-form-item
+                            :label="$t('setting.mfaSecret')"
+                            v-if="mode === 'input'"
+                            prop="secret"
+                            :rules="Rules.requiredInput"
+                        >
+                            <el-input v-model="form.secret"></el-input>
+                        </el-form-item>
 
-                <el-form-item
-                    :label="mode === 'scan' ? $t('setting.mfaHelper3') : $t('setting.mfaCode')"
-                    prop="code"
-                    :rules="Rules.requiredInput"
-                >
-                    <el-input v-model="form.code"></el-input>
-                </el-form-item>
+                        <el-form-item
+                            :label="mode === 'scan' ? $t('setting.mfaHelper3') : $t('setting.mfaCode')"
+                            prop="code"
+                            :rules="Rules.requiredInput"
+                        >
+                            <el-input v-model="form.code"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
diff --git a/frontend/src/views/setting/safe/ssl/index.vue b/frontend/src/views/setting/safe/ssl/index.vue
index 4f39eda96..62f5d9c4a 100644
--- a/frontend/src/views/setting/safe/ssl/index.vue
+++ b/frontend/src/views/setting/safe/ssl/index.vue
@@ -1,94 +1,120 @@
 <template>
     <div>
-        <el-card>
-            <el-form ref="formRef" label-position="top" :model="form" :rules="rules">
-                <el-radio-group v-model="sslItemType">
-                    <el-radio label="self">{{ $t('setting.selfSigned') }}</el-radio>
-                    <el-radio label="select">{{ $t('setting.select') }}</el-radio>
-                    <el-radio label="import">{{ $t('setting.import') }}</el-radio>
-                </el-radio-group>
-                <span class="input-help" v-if="sslItemType === 'self'">{{ $t('setting.selfSignedHelper') }}</span>
-                <div v-if="sslInfo.timeout">
-                    <el-tag>{{ $t('setting.domainOrIP') }} {{ sslInfo.domain }}</el-tag>
-                    <el-tag style="margin-left: 5px">{{ $t('setting.timeOut') }} {{ sslInfo.timeout }}</el-tag>
-                    <el-button
-                        @click="onDownload"
-                        style="margin-left: 5px"
-                        v-if="sslItemType === 'self'"
-                        type="primary"
-                        link
-                        icon="Download"
-                    >
-                        {{ $t('setting.rootCrtDownload') }}
-                    </el-button>
-                </div>
+        <el-drawer
+            v-model="drawerVisiable"
+            :destroy-on-close="true"
+            @close="handleClose"
+            :close-on-click-modal="false"
+            size="50%"
+        >
+            <template #header>
+                <DrawerHeader header="https" :back="handleClose" />
+            </template>
+            <el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('setting.certType')">
+                            <el-radio-group v-model="form.sslType">
+                                <el-radio label="self">{{ $t('setting.selfSigned') }}</el-radio>
+                                <el-radio label="select">{{ $t('setting.select') }}</el-radio>
+                                <el-radio label="import">{{ $t('setting.import') }}</el-radio>
+                            </el-radio-group>
+                            <span class="input-help" v-if="form.sslType === 'self'">
+                                {{ $t('setting.selfSignedHelper') }}
+                            </span>
+                        </el-form-item>
 
-                <div v-if="sslItemType === 'import'">
-                    <el-form-item :label="$t('setting.primaryKey')" prop="key">
-                        <el-input v-model="form.key" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" />
-                    </el-form-item>
-                    <el-form-item class="margintop" :label="$t('setting.certificate')" prop="cert">
-                        <el-input v-model="form.cert" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" />
-                    </el-form-item>
-                </div>
+                        <el-form-item v-if="form.timeout">
+                            <el-tag>{{ $t('setting.domainOrIP') }} {{ form.domain }}</el-tag>
+                            <el-tag style="margin-left: 5px">{{ $t('setting.timeOut') }} {{ form.timeout }}</el-tag>
+                            <el-button
+                                @click="onDownload"
+                                style="margin-left: 5px"
+                                v-if="form.sslType === 'self'"
+                                type="primary"
+                                link
+                                icon="Download"
+                            >
+                                {{ $t('setting.rootCrtDownload') }}
+                            </el-button>
+                        </el-form-item>
 
-                <div v-if="sslItemType === 'select'">
-                    <el-form-item :label="$t('setting.certificate')" prop="sslID">
-                        <el-select v-model="form.sslID" @change="changeSSl(form.sslID)">
-                            <el-option
-                                v-for="(item, index) in sslList"
-                                :key="index"
-                                :label="item.primaryDomain"
-                                :value="item.id"
-                            ></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-descriptions
-                        class="margintop"
-                        :column="5"
-                        border
-                        direction="vertical"
-                        v-if="form.sslID > 0 && itemSSL"
-                    >
-                        <el-descriptions-item :label="$t('website.primaryDomain')">
-                            {{ itemSSL.primaryDomain }}
-                        </el-descriptions-item>
-                        <el-descriptions-item :label="$t('website.otherDomains')">
-                            {{ itemSSL.domains }}
-                        </el-descriptions-item>
-                        <el-descriptions-item :label="$t('ssl.provider')">
-                            {{ getProvider(itemSSL.provider) }}
-                        </el-descriptions-item>
-                        <el-descriptions-item
-                            :label="$t('ssl.acmeAccount')"
-                            v-if="itemSSL.acmeAccount?.email && itemSSL.provider !== 'manual'"
-                        >
-                            {{ itemSSL.acmeAccount.email }}
-                        </el-descriptions-item>
-                        <el-descriptions-item :label="$t('website.expireDate')">
-                            {{ dateFormatSimple(itemSSL.expireDate) }}
-                        </el-descriptions-item>
-                    </el-descriptions>
-                </div>
-                <el-button style="margin-top: 20px" type="primary" @click="onSaveSSL(formRef)">
-                    {{ $t('commons.button.saveAndEnable') }}
-                </el-button>
+                        <div v-if="form.sslType === 'import'">
+                            <el-form-item :label="$t('setting.primaryKey')" prop="key">
+                                <el-input v-model="form.key" :autosize="{ minRows: 5, maxRows: 10 }" type="textarea" />
+                            </el-form-item>
+                            <el-form-item class="margintop" :label="$t('setting.certificate')" prop="cert">
+                                <el-input v-model="form.cert" :autosize="{ minRows: 5, maxRows: 10 }" type="textarea" />
+                            </el-form-item>
+                        </div>
+
+                        <div v-if="form.sslType === 'select'">
+                            <el-form-item :label="$t('setting.certificate')" prop="sslID">
+                                <el-select v-model="form.sslID" @change="changeSSl(form.sslID)">
+                                    <el-option
+                                        v-for="(item, index) in sslList"
+                                        :key="index"
+                                        :label="item.primaryDomain"
+                                        :value="item.id"
+                                    ></el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-descriptions
+                                class="margintop"
+                                :column="5"
+                                border
+                                direction="vertical"
+                                v-if="form.sslID > 0 && itemSSL"
+                            >
+                                <el-descriptions-item :label="$t('website.primaryDomain')">
+                                    {{ itemSSL.primaryDomain }}
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('website.otherDomains')">
+                                    {{ itemSSL.domains }}
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('ssl.provider')">
+                                    {{ getProvider(itemSSL.provider) }}
+                                </el-descriptions-item>
+                                <el-descriptions-item
+                                    :label="$t('ssl.acmeAccount')"
+                                    v-if="itemSSL.acmeAccount?.email && itemSSL.provider !== 'manual'"
+                                >
+                                    {{ itemSSL.acmeAccount.email }}
+                                </el-descriptions-item>
+                                <el-descriptions-item :label="$t('website.expireDate')">
+                                    {{ dateFormatSimple(itemSSL.expireDate) }}
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </div>
+                    </el-col>
+                </el-row>
             </el-form>
-        </el-card>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button :disabled="loading" type="primary" @click="onSaveSSL(formRef)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
     </div>
 </template>
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
-import { loadSSLInfo } from '@/api/modules/setting';
 import { dateFormatSimple, getProvider } from '@/utils/util';
 import { ListSSL } from '@/api/modules/website';
-import { nextTick, onMounted, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateSSL } from '@/api/modules/setting';
 import { DownloadByPath } from '@/api/modules/files';
 import { Rules } from '@/global/form-rules';
 import { FormInstance } from 'element-plus';
+import { Setting } from '@/api/interface/setting';
+
+const loading = ref();
+const drawerVisiable = ref();
 
 const form = reactive({
     ssl: 'enable',
@@ -98,6 +124,7 @@ const form = reactive({
     cert: '',
     key: '',
     rootPath: '',
+    timeout: '',
 });
 
 const rules = reactive({
@@ -108,36 +135,32 @@ const rules = reactive({
 
 const formRef = ref<FormInstance>();
 
-const props = defineProps({
-    type: {
-        type: String,
-        default: 'self',
-    },
-});
-
-const sslInfo = reactive({
-    domain: '',
-    timeout: '',
-});
 const sslList = ref();
 const itemSSL = ref();
-const sslItemType = ref('self');
 
-const loadInfo = async () => {
-    await loadSSLInfo().then(async (res) => {
-        sslInfo.domain = res.data.domain || '';
-        sslInfo.timeout = res.data.timeout || '';
-        form.cert = res.data.cert;
-        form.key = res.data.key;
-        form.rootPath = res.data.rootPath;
-        if (res.data.sslID) {
-            form.sslID = res.data.sslID;
-            const ssls = await ListSSL({});
-            sslList.value = ssls.data || [];
-            changeSSl(form.sslID);
-        }
-    });
+interface DialogProps {
+    sslType: string;
+    sslInfo?: Setting.SSLInfo;
+}
+const acceptParams = async (params: DialogProps): Promise<void> => {
+    form.sslType = params.sslType;
+    form.cert = params.sslInfo?.cert || '';
+    form.key = params.sslInfo?.key || '';
+    form.rootPath = params.sslInfo?.rootPath || '';
+    form.domain = params.sslInfo?.domain || '';
+    form.timeout = params.sslInfo?.timeout || '';
+
+    if (params.sslInfo?.sslID) {
+        form.sslID = params.sslInfo.sslID;
+        const ssls = await ListSSL({});
+        sslList.value = ssls.data || [];
+        changeSSl(params.sslInfo?.sslID);
+    } else {
+        loadSSLs();
+    }
+    drawerVisiable.value = true;
 };
+const emit = defineEmits<{ (e: 'search'): void }>();
 
 const loadSSLs = async () => {
     const res = await ListSSL({});
@@ -163,13 +186,21 @@ const onDownload = async () => {
 };
 
 const onSaveSSL = async (formEl: FormInstance | undefined) => {
+    onDownload();
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        form.sslType = sslItemType.value;
+        let param = {
+            ssl: 'enable',
+            sslType: form.sslType,
+            domain: '',
+            sslID: form.sslID,
+            cert: form.cert,
+            key: form.key,
+        };
         let href = window.location.href;
-        form.domain = href.split('//')[1].split(':')[0];
-        await updateSSL(form).then(() => {
+        param.domain = href.split('//')[1].split(':')[0];
+        await updateSSL(param).then(() => {
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             let href = window.location.href;
             let address = href.split('://')[1];
@@ -178,12 +209,13 @@ const onSaveSSL = async (formEl: FormInstance | undefined) => {
     });
 };
 
-onMounted(() => {
-    nextTick(() => {
-        sslItemType.value = props.type;
-        loadInfo();
-    });
-    loadSSLs();
+const handleClose = () => {
+    emit('search');
+    drawerVisiable.value = false;
+};
+
+defineExpose({
+    acceptParams,
 });
 </script>
 
diff --git a/frontend/src/views/setting/safe/timeout/index.vue b/frontend/src/views/setting/safe/timeout/index.vue
index ea5625fbf..002702687 100644
--- a/frontend/src/views/setting/safe/timeout/index.vue
+++ b/frontend/src/views/setting/safe/timeout/index.vue
@@ -5,10 +5,18 @@
                 <DrawerHeader :header="$t('setting.expirationTime')" :back="handleClose" />
             </template>
             <el-form ref="timeoutFormRef" label-position="top" :model="form">
-                <el-form-item :label="$t('setting.days')" prop="days" :rules="[Rules.number, checkNumberRange(0, 60)]">
-                    <el-input clearable v-model.number="form.days" />
-                    <span class="input-help">{{ $t('setting.expirationHelper') }}</span>
-                </el-form-item>
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item
+                            :label="$t('setting.days')"
+                            prop="days"
+                            :rules="[Rules.number, checkNumberRange(0, 60)]"
+                        >
+                            <el-input clearable v-model.number="form.days" />
+                            <span class="input-help">{{ $t('setting.expirationHelper') }}</span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">