feat: 面板设置统一改为抽屉实现 (#880)

frontend/src/views/setting/panel/index.vue

@@ -2,39 +2,32 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('setting.panel')" :divider="true">
             <template #main>
-                <el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
+                <el-form :model="form" label-position="left" label-width="180px">
                     <el-row>
                         <el-col :span="1"><br /></el-col>
                         <el-col :span="12">
-                            <el-form-item :label="$t('setting.user')" :rules="Rules.userName" prop="userName">
+                            <el-form-item :label="$t('setting.user')" prop="userName">
-                                <el-input clearable v-model="form.userName">
+                                <el-input disabled v-model="form.userName">
                                     <template #append>
-                                        <el-button
+                                        <el-button @click="onChangeUserName()" icon="Setting">
-                                            style="width: 85px"
-                                            @click="onSaveUserName(panelFormRef, 'UserName', form.userName)"
-                                            icon="Collection"
-                                        >
-                                            {{ $t('commons.button.save') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-
-                            <el-form-item :label="$t('setting.passwd')" :rules="Rules.requiredInput" prop="password">
-                                <el-input type="password" disabled v-model="form.password">
-                                    <template #append>
-                                        <el-button style="width: 85px" icon="Setting" @click="onChangePassword">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
                                 </el-input>
                             </el-form-item>
 
-                            <el-form-item :label="$t('setting.theme')" :rules="Rules.requiredSelect" prop="theme">
+                            <el-form-item :label="$t('setting.passwd')" prop="password">
-                                <el-radio-group
+                                <el-input type="password" disabled v-model="form.password">
-                                    @change="onSave(panelFormRef, 'Theme', form.theme)"
+                                    <template #append>
-                                    v-model="form.theme"
+                                        <el-button icon="Setting" @click="onChangePassword">
-                                >
+                                            {{ $t('commons.button.set') }}
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                            </el-form-item>
+
+                            <el-form-item :label="$t('setting.theme')" prop="theme">
+                                <el-radio-group @change="onSave('Theme', form.theme)" v-model="form.theme">
                                     <el-radio-button label="light">
                                         <el-icon><Sunny /></el-icon>
                                         {{ $t('setting.light') }}
@@ -46,24 +39,20 @@
                                 </el-radio-group>
                             </el-form-item>
 
-                            <el-form-item :label="$t('setting.title')" :rules="Rules.requiredInput" prop="panelName">
+                            <el-form-item :label="$t('setting.title')" prop="panelName">
-                                <el-input clearable v-model="form.panelName">
+                                <el-input disabled v-model="form.panelName">
                                     <template #append>
-                                        <el-button
+                                        <el-button icon="Setting" @click="onChangeTitle">
-                                            style="width: 85px"
+                                            {{ $t('commons.button.set') }}
-                                            @click="onSave(panelFormRef, 'PanelName', form.panelName)"
-                                            icon="Collection"
-                                        >
-                                            {{ $t('commons.button.save') }}
                                         </el-button>
                                     </template>
                                 </el-input>
                             </el-form-item>
 
-                            <el-form-item :label="$t('setting.language')" :rules="Rules.requiredSelect" prop="language">
+                            <el-form-item :label="$t('setting.language')" prop="language">
                                 <el-radio-group
                                     style="width: 100%"
-                                    @change="onSave(panelFormRef, 'Language', form.language)"
+                                    @change="onSave('Language', form.language)"
                                     v-model="form.language"
                                 >
                                     <el-radio label="zh">中文</el-radio>
@@ -71,38 +60,23 @@
                                 </el-radio-group>
                             </el-form-item>
 
-                            <el-form-item
+                            <el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
-                                :label="$t('setting.sessionTimeout')"
+                                <el-input disabled v-model.number="form.sessionTimeout">
-                                :rules="[Rules.integerNumber, checkNumberRange(300, 864000)]"
-                                prop="sessionTimeout"
-                            >
-                                <el-input v-model.number="form.sessionTimeout">
                                     <template #append>
-                                        <el-button
+                                        <el-button @click="onChangeTimeout" icon="Setting">
-                                            style="width: 85px"
+                                            {{ $t('commons.button.set') }}
-                                            @click="onSave(panelFormRef, 'SessionTimeout', form.sessionTimeout)"
-                                            icon="Collection"
-                                        >
-                                            {{ $t('commons.button.save') }}
                                         </el-button>
                                     </template>
                                 </el-input>
-                                <div>
                                 <span class="input-help">
                                     {{ $t('setting.sessionTimeoutHelper', [form.sessionTimeout]) }}
                                 </span>
-                                </div>
                             </el-form-item>
 
                             <el-form-item :label="$t('setting.syncTime')">
                                 <el-input disabled v-model="form.localTime">
                                     <template #append>
-                                        <el-button
+                                        <el-button v-show="!show" @click="onSyncTime" icon="Refresh">
-                                            style="width: 85px"
-                                            v-show="!show"
-                                            @click="onSyncTime"
-                                            icon="Refresh"
-                                        >
                                             {{ $t('commons.button.sync') }}
                                         </el-button>
                                         <div style="width: 45px" v-show="show">
@@ -116,23 +90,27 @@
                 </el-form>
             </template>
         </LayoutContent>
+
         <Password ref="passwordRef" />
+        <UserName ref="userNameRef" />
+        <PanelName ref="panelNameRef" @search="search()" />
+        <Timeout ref="timeoutRef" @search="search()" />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted, computed } from 'vue';
-import { ElForm, ElMessageBox } from 'element-plus';
+import { ElForm } from 'element-plus';
 import LayoutContent from '@/layout/layout-content.vue';
 import { syncTime, getSettingInfo, updateSetting, getSystemAvailable } from '@/api/modules/setting';
-import { Rules, checkNumberRange } from '@/global/form-rules';
 import { GlobalStore } from '@/store';
 import { useI18n } from 'vue-i18n';
 import { useTheme } from '@/hooks/use-theme';
-import { MsgError, MsgSuccess } from '@/utils/message';
+import { MsgSuccess } from '@/utils/message';
 import Password from '@/views/setting/panel/password/index.vue';
-import router from '@/routers';
+import UserName from '@/views/setting/panel/username/index.vue';
-import { logOutApi } from '@/api/modules/auth';
+import Timeout from '@/views/setting/panel/timeout/index.vue';
+import PanelName from '@/views/setting/panel/name/index.vue';
 
 const loading = ref(false);
 const i18n = useI18n();
@@ -140,8 +118,6 @@ const globalStore = GlobalStore();
 const themeConfig = computed(() => globalStore.themeConfig);
 const { switchDark } = useTheme();
 
-type FormInstance = InstanceType<typeof ElForm>;
-
 const form = reactive({
     userName: '',
     password: '',
@@ -159,7 +135,10 @@ const TIME_COUNT = ref(10);
 const count = ref();
 const show = ref();
 
+const userNameRef = ref();
 const passwordRef = ref();
+const panelNameRef = ref();
+const timeoutRef = ref();
 
 const search = async () => {
     const res = await getSettingInfo();
@@ -172,73 +151,29 @@ const search = async () => {
     form.language = res.data.language;
     form.complexityVerification = res.data.complexityVerification;
 };
-const panelFormRef = ref<FormInstance>();
 
 const onChangePassword = () => {
     passwordRef.value.acceptParams({ complexityVerification: form.complexityVerification });
 };
-
+const onChangeUserName = () => {
-const onSaveUserName = async (formEl: FormInstance | undefined, key: string, val: any) => {
+    userNameRef.value.acceptParams({ userName: form.userName });
-    if (!formEl) return;
+};
-    const result = await formEl.validateField('userName', callback);
+const onChangeTitle = () => {
-    if (!result) {
+    panelNameRef.value.acceptParams({ panelName: form.panelName });
-        return;
+};
-    }
+const onChangeTimeout = () => {
-    ElMessageBox.confirm(i18n.t('setting.userChangeHelper'), i18n.t('setting.userChange'), {
+    timeoutRef.value.acceptParams({ sessionTimeout: form.sessionTimeout });
-        confirmButtonText: i18n.t('commons.button.confirm'),
-        cancelButtonText: i18n.t('commons.button.cancel'),
-        type: 'info',
-    }).then(async () => {
-        await updateSetting({ key: key, value: val })
-            .then(async () => {
-                await logOutApi();
-                loading.value = false;
-                MsgSuccess(i18n.t('commons.msg.operationSuccess'));
-                router.push({ name: 'entrance', params: { code: globalStore.entrance } });
-                globalStore.setLogStatus(false);
-                return;
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-    });
 };
 
-const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
+const onSave = async (key: string, val: any) => {
-    if (!formEl) return;
-    const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);
-    if (!result) {
-        return;
-    }
-    if (val === '') {
-        return;
-    }
     loading.value = true;
-    switch (key) {
+    if (key === 'Language') {
-        case 'Language':
         i18n.locale.value = val;
         globalStore.updateLanguage(val);
-            break;
+    }
-        case 'Theme':
+    if (key === 'Theme') {
         globalStore.setThemeConfig({ ...themeConfig.value, theme: val });
         switchDark();
-            break;
-        case 'SessionTimeout':
-            if (Number(val) < 300) {
-                loading.value = false;
-                MsgError(i18n.t('setting.sessionTimeoutError'));
-                search();
-                return;
-            }
-            break;
-        case 'PanelName':
-            globalStore.setThemeConfig({ ...themeConfig.value, panelName: val });
-            document.title = val;
-            break;
-        case 'MonitorStoreDays':
-        case 'ServerPort':
-            val = val + '';
-            break;
     }
     let param = {
         key: key,
@@ -246,14 +181,6 @@ const onSave = async (formEl: FormInstance | undefined, key: string, val: any) =
     };
     await updateSetting(param)
         .then(async () => {
-            if (param.key === 'UserName') {
-                await logOutApi();
-                loading.value = false;
-                MsgSuccess(i18n.t('commons.msg.operationSuccess'));
-                router.push({ name: 'entrance', params: { code: globalStore.entrance } });
-                globalStore.setLogStatus(false);
-                return;
-            }
             if (param.key === 'Language') {
                 location.reload();
             }
@@ -280,14 +207,6 @@ function countdown() {
     }, 1000);
 }
 
-function callback(error: any) {
-    if (error) {
-        return error.message;
-    } else {
-        return;
-    }
-}
-
 const onSyncTime = async () => {
     loading.value = true;
     await syncTime()

frontend/src/views/setting/panel/name/index.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
+            <template #header>
+                <DrawerHeader :header="$t('setting.title')" :back="handleClose" />
+            </template>
+            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('setting.title')" prop="panelName" :rules="Rules.requiredInput">
+                            <el-input clearable v-model="form.panelName" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button :disabled="loading" type="primary" @click="onSavePanelName(formRef)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+<script lang="ts" setup>
+import { computed, reactive, ref } from 'vue';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+import { updateSetting } from '@/api/modules/setting';
+import { FormInstance } from 'element-plus';
+import { Rules } from '@/global/form-rules';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+const themeConfig = computed(() => globalStore.themeConfig);
+
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+interface DialogProps {
+    panelName: string;
+}
+const drawerVisiable = ref();
+const loading = ref();
+
+const form = reactive({
+    panelName: '',
+});
+
+const formRef = ref<FormInstance>();
+
+const acceptParams = (params: DialogProps): void => {
+    form.panelName = params.panelName;
+    drawerVisiable.value = true;
+};
+
+const onSavePanelName = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        await updateSetting({ key: 'PanelName', value: form.panelName })
+            .then(async () => {
+                globalStore.setThemeConfig({ ...themeConfig.value, panelName: form.panelName });
+                document.title = form.panelName;
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                loading.value = false;
+                drawerVisiable.value = false;
+                emit('search');
+                return;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
+const handleClose = () => {
+    drawerVisiable.value = false;
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>

frontend/src/views/setting/panel/timeout/index.vue

@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
+            <template #header>
+                <DrawerHeader :header="$t('setting.sessionTimeout')" :back="handleClose" />
+            </template>
+            <el-form
+                ref="formRef"
+                label-position="top"
+                :rules="rules"
+                :model="form"
+                @submit.prevent
+                v-loading="loading"
+            >
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
+                            <el-input clearable v-model.number="form.sessionTimeout" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button :disabled="loading" type="primary" @click="onSaveTimeout(formRef)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+import { FormInstance } from 'element-plus';
+import { Rules, checkNumberRange } from '@/global/form-rules';
+import { updateSetting } from '@/api/modules/setting';
+
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+interface DialogProps {
+    sessionTimeout: number;
+}
+const drawerVisiable = ref();
+const loading = ref();
+
+const form = reactive({
+    sessionTimeout: 86400,
+});
+
+const rules = reactive({
+    sessionTimeout: [Rules.integerNumber, checkNumberRange(300, 864000)],
+});
+
+const formRef = ref<FormInstance>();
+
+const acceptParams = (params: DialogProps): void => {
+    form.sessionTimeout = params.sessionTimeout;
+    drawerVisiable.value = true;
+};
+
+const onSaveTimeout = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        await updateSetting({ key: 'SessionTimeout', value: form.sessionTimeout + '' })
+            .then(async () => {
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                loading.value = false;
+                drawerVisiable.value = false;
+                emit('search');
+                return;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
+const handleClose = () => {
+    drawerVisiable.value = false;
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>

frontend/src/views/setting/panel/username/index.vue

@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
+            <template #header>
+                <DrawerHeader :header="$t('setting.user')" :back="handleClose" />
+            </template>
+            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('setting.user')" prop="userName" :rules="Rules.userName">
+                            <el-input clearable v-model="form.userName" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button :disabled="loading" type="primary" @click="onSaveUserName(formRef)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+import { updateSetting } from '@/api/modules/setting';
+import { ElMessageBox, FormInstance } from 'element-plus';
+import { Rules } from '@/global/form-rules';
+import { logOutApi } from '@/api/modules/auth';
+import router from '@/routers';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+interface DialogProps {
+    userName: string;
+}
+const drawerVisiable = ref();
+const loading = ref();
+
+const form = reactive({
+    userName: '',
+});
+
+const formRef = ref<FormInstance>();
+
+const acceptParams = (params: DialogProps): void => {
+    form.userName = params.userName;
+    drawerVisiable.value = true;
+};
+
+const onSaveUserName = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        ElMessageBox.confirm(i18n.global.t('setting.userChangeHelper'), i18n.global.t('setting.userChange'), {
+            confirmButtonText: i18n.global.t('commons.button.confirm'),
+            cancelButtonText: i18n.global.t('commons.button.cancel'),
+            type: 'info',
+        }).then(async () => {
+            await updateSetting({ key: 'UserName', value: form.userName })
+                .then(async () => {
+                    await logOutApi();
+                    loading.value = false;
+                    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                    router.push({ name: 'entrance', params: { code: globalStore.entrance } });
+                    globalStore.setLogStatus(false);
+                    return;
+                })
+                .catch(() => {
+                    loading.value = false;
+                });
+        });
+    });
+};
+
+const handleClose = () => {
+    drawerVisiable.value = false;
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>

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

@@ -4,11 +4,18 @@
             <template #header>
                 <DrawerHeader :header="$t('setting.entrance')" :back="handleClose" />
             </template>
-            <el-form label-position="top" @submit.prevent v-loading="loading">
+            <el-form
+                ref="formRef"
+                label-position="top"
+                :model="form"
+                @submit.prevent
+                v-loading="loading"
+                :rules="rules"
+            >
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
-                        <el-form-item :label="$t('setting.entrance')" prop="days">
+                        <el-form-item :label="$t('setting.entrance')" prop="securityEntrance">
-                            <el-input clearable v-model="securityEntrance">
+                            <el-input clearable v-model="form.securityEntrance">
                                 <template #append>
                                     <el-button @click="random" icon="RefreshRight"></el-button>
                                 </template>
@@ -16,9 +23,6 @@
                             <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>
@@ -26,7 +30,7 @@
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="submitEntrance">
+                    <el-button :disabled="loading" type="primary" @click="submitEntrance(formRef)">
                         {{ $t('commons.button.confirm') }}
                     </el-button>
                 </span>
@@ -35,12 +39,13 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 import { getRandomStr } from '@/utils/util';
+import { FormInstance } from 'element-plus';
 const globalStore = GlobalStore();
 
 const emit = defineEmits<{ (e: 'search'): void }>();
@@ -48,36 +53,49 @@ const emit = defineEmits<{ (e: 'search'): void }>();
 interface DialogProps {
     securityEntrance: string;
 }
-const securityEntrance = ref();
 const drawerVisiable = ref();
 const loading = ref();
-const codeError = ref();
+
+const form = reactive({
+    securityEntrance: '',
+});
+
+const formRef = ref<FormInstance>();
+const rules = reactive({
+    securityEntrance: [{ validator: checkSecurityEntrance, trigger: 'blur' }],
+});
+
+function checkSecurityEntrance(rule: any, value: any, callback: any) {
+    if (form.securityEntrance !== '') {
+        const reg = /^[A-Za-z0-9]{6,10}$/;
+        if (!reg.test(form.securityEntrance)) {
+            return callback(new Error(i18n.global.t('setting.entranceError')));
+        }
+    }
+    callback();
+}
 
 const acceptParams = (params: DialogProps): void => {
-    securityEntrance.value = params.securityEntrance;
+    form.securityEntrance = params.securityEntrance;
     drawerVisiable.value = true;
 };
 
 const random = async () => {
-    securityEntrance.value = getRandomStr(10);
+    form.securityEntrance = getRandomStr(10);
 };
 
-const submitEntrance = async () => {
+const submitEntrance = async (formEl: FormInstance | undefined) => {
-    if (securityEntrance.value !== '') {
+    if (!formEl) return;
-        const reg = /^[A-Za-z0-9]{6,10}$/;
+    formEl.validate(async (valid) => {
-        if (!reg.test(securityEntrance.value)) {
+        if (!valid) return;
-            codeError.value = true;
-            return;
-        }
-    }
         let param = {
             key: 'SecurityEntrance',
-        value: securityEntrance.value,
+            value: form.securityEntrance,
         };
         loading.value = true;
         await updateSetting(param)
             .then(() => {
-            globalStore.entrance = securityEntrance.value;
+                globalStore.entrance = form.securityEntrance;
                 loading.value = false;
                 drawerVisiable.value = false;
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
@@ -86,6 +104,7 @@ const submitEntrance = async () => {
             .catch(() => {
                 loading.value = false;
             });
+    });
 };
 
 const handleClose = () => {
@@ -96,9 +115,3 @@ defineExpose({
     acceptParams,
 });
 </script>
-
-<style scoped lang="scss">
-.margintop {
-    margin-top: 10px;
-}
-</style>

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

@@ -2,19 +2,15 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('setting.safe')" :divider="true">
             <template #main>
-                <el-form :model="form" ref="panelFormRef" v-loading="loading" label-position="left" label-width="180px">
+                <el-form :model="form" v-loading="loading" label-position="left" label-width="180px">
                     <el-row>
                         <el-col :span="1"><br /></el-col>
                         <el-col :span="12">
-                            <el-form-item :label="$t('setting.panelPort')" :rules="Rules.port" prop="serverPort">
+                            <el-form-item :label="$t('setting.panelPort')" prop="serverPort">
-                                <el-input clearable v-model.number="form.serverPort">
+                                <el-input disabled v-model.number="form.serverPort">
                                     <template #append>
-                                        <el-button
+                                        <el-button @click="onChangePort" icon="Setting">
-                                            style="width: 85px"
+                                            {{ $t('commons.button.set') }}
-                                            @click="onSavePort(panelFormRef, 'ServerPort', form.serverPort)"
-                                            icon="Collection"
-                                        >
-                                            {{ $t('commons.button.save') }}
                                         </el-button>
                                     </template>
                                 </el-input>
@@ -28,14 +24,14 @@
                                     v-model="form.securityEntrance"
                                 >
                                     <template #append>
-                                        <el-button style="width: 85px" @click="onChangeEntrance" icon="Setting">
+                                        <el-button @click="onChangeEntrance" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
                                 </el-input>
                                 <el-input disabled v-if="!form.securityEntrance" v-model="unset">
                                     <template #append>
-                                        <el-button style="width: 85px" @click="onChangeEntrance" icon="Setting">
+                                        <el-button @click="onChangeEntrance" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -46,7 +42,7 @@
                             <el-form-item :label="$t('setting.expirationTime')" prop="expirationTime">
                                 <el-input disabled v-model="form.expirationTime">
                                     <template #append>
-                                        <el-button style="width: 85px" @click="onChangeExpirationTime" icon="Setting">
+                                        <el-button @click="onChangeExpirationTime" icon="Setting">
                                             {{ $t('commons.button.set') }}
                                         </el-button>
                                     </template>
@@ -62,9 +58,7 @@
                             </el-form-item>
                             <el-form-item :label="$t('setting.complexity')" prop="complexityVerification">
                                 <el-switch
-                                    @change="
+                                    @change="onSaveComplexity"
-                                        onSave(panelFormRef, 'ComplexityVerification', form.complexityVerification)
-                                    "
                                     v-model="form.complexityVerification"
                                     active-value="enable"
                                     inactive-value="disable"
@@ -112,6 +106,7 @@
             </template>
         </LayoutContent>
 
+        <PortSetting ref="portRef" />
         <MfaSetting ref="mfaRef" @search="search" />
         <SSLSetting ref="sslRef" @search="search" />
         <EntranceSetting ref="entranceRef" @search="search" />
@@ -123,25 +118,19 @@
 import { ref, reactive, onMounted } from 'vue';
 import { ElForm, ElMessageBox } from 'element-plus';
 import LayoutContent from '@/layout/layout-content.vue';
+import PortSetting from '@/views/setting/safe/port/index.vue';
 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 {
+import { updateSetting, getSettingInfo, getSystemAvailable, updateSSL, loadSSLInfo } from '@/api/modules/setting';
-    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 portRef = ref();
 const timeoutref = ref();
 const mfaRef = ref();
 
@@ -155,10 +144,9 @@ const form = reactive({
     securityEntrance: '',
     expirationDays: 0,
     expirationTime: '',
-    complexityVerification: '',
+    complexityVerification: 'disable',
     mfaStatus: 'disable',
 });
-type FormInstance = InstanceType<typeof ElForm>;
 
 const unset = ref(i18n.global.t('setting.unSetting'));
 
@@ -176,20 +164,11 @@ const search = async () => {
     form.complexityVerification = res.data.complexityVerification;
     form.mfaStatus = res.data.mfaStatus;
 };
-const panelFormRef = ref<FormInstance>();
 
-const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
+const onSaveComplexity = async () => {
-    if (!formEl) return;
-    const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);
-    if (!result) {
-        return;
-    }
-    if (val === '') {
-        return;
-    }
     let param = {
-        key: key,
+        key: 'ComplexityVerification',
-        value: val + '',
+        value: form.complexityVerification,
     };
     loading.value = true;
     await updateSetting(param)
@@ -202,41 +181,7 @@ const onSave = async (formEl: FormInstance | undefined, key: string, val: any) =
             loading.value = false;
         });
 };
-function callback(error: any) {
+
-    if (error) {
-        return error.message;
-    } else {
-        return;
-    }
-}
-const onSavePort = async (formEl: FormInstance | undefined, key: string, val: any) => {
-    if (!formEl) return;
-    const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);
-    if (!result) {
-        return;
-    }
-    ElMessageBox.confirm(i18n.global.t('setting.portChangeHelper'), i18n.global.t('setting.portChange'), {
-        confirmButtonText: i18n.global.t('commons.button.confirm'),
-        cancelButtonText: i18n.global.t('commons.button.cancel'),
-        type: 'info',
-    }).then(async () => {
-        loading.value = true;
-        let param = {
-            serverPort: val,
-        };
-        await updatePort(param)
-            .then(() => {
-                loading.value = false;
-                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-                let href = window.location.href;
-                let ip = href.split('//')[1].split(':')[0];
-                window.open(`${href.split('//')[0]}//${ip}:${val}/`, '_self');
-            })
-            .catch(() => {
-                loading.value = false;
-            });
-    });
-};
 const handleMFA = async () => {
     if (form.mfaStatus === 'enable') {
         mfaRef.value.acceptParams();
@@ -257,6 +202,9 @@ const handleMFA = async () => {
 const onChangeEntrance = async () => {
     entranceRef.value.acceptParams({ securityEntrance: form.securityEntrance });
 };
+const onChangePort = async () => {
+    portRef.value.acceptParams({ serverPort: form.serverPort });
+};
 const handleSSL = async () => {
     if (form.ssl === 'enable') {
         let params = {

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

@@ -0,0 +1,87 @@
+<template>
+    <div>
+        <el-drawer v-model="drawerVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
+            <template #header>
+                <DrawerHeader :header="$t('setting.panelPort')" :back="handleClose" />
+            </template>
+            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('setting.panelPort')" prop="serverPort" :rules="Rules.port">
+                            <el-input clearable v-model.number="form.serverPort" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button :disabled="loading" type="primary" @click="onSavePort(formRef)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+import { updatePort } from '@/api/modules/setting';
+import { ElMessageBox, FormInstance } from 'element-plus';
+import { Rules } from '@/global/form-rules';
+
+interface DialogProps {
+    serverPort: number;
+}
+const drawerVisiable = ref();
+const loading = ref();
+
+const form = reactive({
+    serverPort: 9999,
+});
+
+const formRef = ref<FormInstance>();
+
+const acceptParams = (params: DialogProps): void => {
+    form.serverPort = params.serverPort;
+    drawerVisiable.value = true;
+};
+
+const onSavePort = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        ElMessageBox.confirm(i18n.global.t('setting.portChangeHelper'), i18n.global.t('setting.portChange'), {
+            confirmButtonText: i18n.global.t('commons.button.confirm'),
+            cancelButtonText: i18n.global.t('commons.button.cancel'),
+            type: 'info',
+        }).then(async () => {
+            loading.value = true;
+            let param = {
+                serverPort: form.serverPort,
+            };
+            await updatePort(param)
+                .then(() => {
+                    loading.value = false;
+                    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                    let href = window.location.href;
+                    let ip = href.split('//')[1].split(':')[0];
+                    window.open(`${href.split('//')[0]}//${ip}:${form.serverPort}/`, '_self');
+                })
+                .catch(() => {
+                    loading.value = false;
+                });
+        });
+    });
+};
+
+const handleClose = () => {
+    drawerVisiable.value = false;
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>

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

@@ -186,7 +186,6 @@ const onDownload = async () => {
 };
 
 const onSaveSSL = async (formEl: FormInstance | undefined) => {
-    onDownload();
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;

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

@@ -81,9 +81,3 @@ defineExpose({
     acceptParams,
 });
 </script>
-
-<style scoped lang="scss">
-.margintop {
-    margin-top: 10px;
-}
-</style>