fix: 系统密码过期样式调整

frontend/src/lang/modules/en.ts

@@ -356,8 +356,8 @@ export default {
         mount: 'Mount',
         serverPath: 'Server path',
         containerDir: 'Container path',
-        modeRW: 'Read-Write',
-        modeR: 'Read-Only',
+        modeRW: 'RW',
+        modeR: 'R',
         mode: 'Mode',
         env: 'Environment',
         restartPolicy: 'Restart policy',
@@ -652,6 +652,7 @@ export default {
         unSetting: 'Not set',
         noneSetting:
             'Set the expiration time for the panel password. After the expiration, you need to reset the password',
+        expirationHelper: 'If the password expiration time is [0] days, the password expiration function is disabled',
         days: 'Expiration Days',
         expiredHelper: 'The current password has expired. Please change the password again.',
         timeoutHelper:

frontend/src/lang/modules/zh.ts

@@ -666,6 +666,7 @@ export default {
         expirationTime: '密码过期时间',
         unSetting: '未设置',
         noneSetting: '为面板密码设置过期时间，过期后需要重新设置密码',
+        expirationHelper: '密码过期时间为 [0] 天时，则关闭密码过期功能',
         days: '过期天数',
         expiredHelper: '当前密码已过期，请重新修改密码：',
         timeoutHelper: '【 {0} 天后 】面板密码即将过期，过期后需要重新设置密码',

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

@@ -17,7 +17,7 @@
                         >
                             <el-input disabled v-model="form.settingInfo.expirationTime">
                                 <template #append>
-                                    <el-button @click="timeoutVisiable = true" icon="Collection">
+                                    <el-button @click="onChangeExoirationTime" icon="Setting">
                                         {{ $t('commons.button.set') }}
                                     </el-button>
                                 </template>
@@ -102,10 +102,17 @@
                 </el-row>
             </el-card>
         </el-form>
-        <el-dialog v-model="timeoutVisiable" :title="$t('setting.expirationTime')" width="30%">
+        <el-dialog
+            v-model="timeoutVisiable"
+            :destroy-on-close="true"
+            :close-on-click-modal="false"
+            :title="$t('setting.expirationTime')"
+            width="30%"
+        >
             <el-form ref="timeoutFormRef" label-width="80px" label-position="left" :model="timeoutForm">
                 <el-form-item :label="$t('setting.days')" prop="days" :rules="Rules.number">
                     <el-input clearable v-model.number="timeoutForm.days" />
+                    <span class="input-help">{{ $t('setting.expirationHelper') }}</span>
                 </el-form-item>
             </el-form>
             <template #footer>
@@ -138,6 +145,7 @@ const form = withDefaults(defineProps<Props>(), {
     settingInfo: {
         serverPort: '',
         securityEntrance: '',
+        expirationDays: 0,
         expirationTime: '',
         complexityVerification: '',
         mfaStatus: '',
@@ -188,6 +196,11 @@ const onCancelMfaBind = async () => {
     isMFAShow.value = false;
 };
 
+const onChangeExoirationTime = async () => {
+    timeoutForm.days = form.settingInfo.expirationDays;
+    timeoutVisiable.value = true;
+};
+
 const submitTimeout = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {