diff --git a/frontend/src/global/form-rules.ts b/frontend/src/global/form-rules.ts
index 3a3761aa1..d26e8c085 100644
--- a/frontend/src/global/form-rules.ts
+++ b/frontend/src/global/form-rules.ts
@@ -45,7 +45,7 @@ const checkUserName = (rule: any, value: any, callback: any) => {
     if (value === '' || typeof value === 'undefined' || value == null) {
         callback(new Error(i18n.global.t('commons.rule.userName')));
     } else {
-        const reg = /^[a-zA-Z\u4e00-\u9fa5]{1}[a-zA-Z0-9_\u4e00-\u9fa5]{5,30}$/;
+        const reg = /^[a-zA-Z\u4e00-\u9fa5]{1}[a-zA-Z0-9_\u4e00-\u9fa5]{2,30}$/;
         if (!reg.test(value) && value !== '') {
             callback(new Error(i18n.global.t('commons.rule.userName')));
         } else {
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 96693bf43..b5a86ee03 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -120,7 +120,7 @@ export default {
             requiredInput: 'Please enter the required fields',
             requiredSelect: 'Please select the required fields',
             commonName: 'Support English, Chinese, numbers, .-, and _ length 1-30',
-            userName: 'Support English, Chinese, numbers and _ length 5-30',
+            userName: 'Support English, Chinese, numbers and _ length 3-30',
             simpleName: 'Support English, numbers and _ length 1-30',
             dbName: 'Support English, Chinese, numbers, .-, and _ length 1-16',
             imageName: 'Support English, Chinese, numbers, :.-_, length 1-30',
@@ -726,6 +726,8 @@ export default {
         all: 'All',
         panel: 'Panel',
         user: 'UserName',
+        userChange: 'Change username',
+        userChangeHelper: 'Change the user name and restart the service. Do you want to continue?',
         passwd: 'Password',
         emailHelper: 'For password retrieval',
         title: 'Panel alias',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index cb1b64897..dee7ec582 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -125,7 +125,7 @@ export default {
             requiredInput: '请填写必填项',
             requiredSelect: '请选择必选项',
             commonName: '支持英文、中文、数字、.-和_,长度1-30',
-            userName: '支持英文、中文、数字和_,长度5-30',
+            userName: '支持英文、中文、数字和_,长度3-30',
             simpleName: '支持英文、数字、_,长度1-30',
             dbName: '支持英文、中文、数字、.-_,长度1-16',
             imageName: '支持英文、中文、数字、:.-_,长度1-30',
@@ -734,7 +734,9 @@ export default {
         all: '全部',
         panel: '面板',
         user: '用户名称',
-        passwd: '帐户密码',
+        userChange: '修改用户名',
+        userChangeHelper: '修改用户名将重启服务，是否继续？',
+        passwd: '用户密码',
         emailHelper: '用于密码找回',
         title: '面板别名',
         panelPort: '面板端口',
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 2bd4617f5..90c77bab9 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -189,7 +189,7 @@ const registerForm = reactive({
     rePassword: '',
 });
 const registerRules = reactive({
-    name: [Rules.requiredInput],
+    name: [Rules.requiredInput, Rules.userName],
     password: [Rules.requiredInput, Rules.password],
     rePassword: [Rules.requiredInput, Rules.password, { validator: checkPassword, trigger: 'blur' }],
 });
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index 4c23bbac4..26d97ee53 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -11,7 +11,7 @@
                                     <template #append>
                                         <el-button
                                             style="width: 85px"
-                                            @click="onSave(panelFormRef, 'UserName', form.userName)"
+                                            @click="onSaveUserName(panelFormRef, 'UserName', form.userName)"
                                             icon="Collection"
                                         >
                                             {{ $t('commons.button.save') }}
@@ -120,7 +120,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted, computed } from 'vue';
-import { ElForm } from 'element-plus';
+import { ElForm, ElMessageBox } from 'element-plus';
 import LayoutContent from '@/layout/layout-content.vue';
 import { syncTime, getSettingInfo, updateSetting } from '@/api/modules/setting';
 import { Rules } from '@/global/form-rules';
@@ -176,6 +176,32 @@ const onChangePassword = () => {
     passwordRef.value.acceptParams({ complexityVerification: form.complexityVerification });
 };
 
+const onSaveUserName = async (formEl: FormInstance | undefined, key: string, val: any) => {
+    if (!formEl) return;
+    const result = await formEl.validateField('userName', callback);
+    if (!result) {
+        return;
+    }
+    ElMessageBox.confirm(i18n.t('setting.userChangeHelper'), i18n.t('setting.userChange'), {
+        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: 'login', params: { code: '' } });
+                globalStore.setLogStatus(false);
+                return;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
 const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
     if (!formEl) return;
     const result = await formEl.validateField(key.replace(key[0], key[0].toLowerCase()), callback);