fix: 面板设置证书改为抽屉实现 (#823)

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)

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',

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: '密钥',

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"

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>

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>

frontend/src/views/setting/safe/entrance/index.vue

@@ -5,6 +5,8 @@
                 <DrawerHeader :header="$t('setting.entrance')" :back="handleClose" />
             </template>
             <el-form label-position="top" v-loading="loading">
+                <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>
@@ -18,6 +20,8 @@
                                 {{ $t('setting.entranceError') }}
                             </span>
                         </el-form-item>
+                    </el-col>
+                </el-row>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">

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,7 +240,8 @@ const onSavePort = async (formEl: FormInstance | undefined, key: string, val: an
 const handleMFA = async () => {
     if (form.mfaStatus === 'enable') {
         mfaRef.value.acceptParams();
-    } else {
+        return;
+    }
     loading.value = true;
     await updateSetting({ key: 'MFAStatus', value: 'disable' })
         .then(() => {
@@ -238,20 +252,19 @@ const handleMFA = async () => {
         .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 });
 };

frontend/src/views/setting/safe/mfa/index.vue

@@ -11,6 +11,8 @@
                 <DrawerHeader :header="$t('setting.mfa')" :back="handleClose" />
             </template>
             <el-form :model="form" ref="formRef" v-loading="loading" label-position="top">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
                         <el-form-item :label="$t('setting.mfaHelper1')">
                             <ul>
                                 <li>Google Authenticator</li>
@@ -45,6 +47,8 @@
                         >
                             <el-input v-model="form.code"></el-input>
                         </el-form-item>
+                    </el-col>
+                </el-row>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">

frontend/src/views/setting/safe/ssl/index.vue

@@ -1,38 +1,54 @@
 <template>
     <div>
-        <el-card>
-            <el-form ref="formRef" label-position="top" :model="form" :rules="rules">
-                <el-radio-group v-model="sslItemType">
+        <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="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>
+                            <span class="input-help" v-if="form.sslType === 'self'">
+                                {{ $t('setting.selfSignedHelper') }}
+                            </span>
+                        </el-form-item>
+
+                        <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="sslItemType === 'self'"
+                                v-if="form.sslType === 'self'"
                                 type="primary"
                                 link
                                 icon="Download"
                             >
                                 {{ $t('setting.rootCrtDownload') }}
                             </el-button>
-                </div>
+                        </el-form-item>
 
-                <div v-if="sslItemType === 'import'">
+                        <div v-if="form.sslType === 'import'">
                             <el-form-item :label="$t('setting.primaryKey')" prop="key">
-                        <el-input v-model="form.key" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" />
+                                <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: 2, maxRows: 6 }" type="textarea" />
+                                <el-input v-model="form.cert" :autosize="{ minRows: 5, maxRows: 10 }" type="textarea" />
                             </el-form-item>
                         </div>
 
-                <div v-if="sslItemType === 'select'">
+                        <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
@@ -70,25 +86,35 @@
                                 </el-descriptions-item>
                             </el-descriptions>
                         </div>
-                <el-button style="margin-top: 20px" type="primary" @click="onSaveSSL(formRef)">
-                    {{ $t('commons.button.saveAndEnable') }}
-                </el-button>
+                    </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;
+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(form.sslID);
+        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>
 

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-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">