feat: 面板别名支持中文及空格 (#3382)

Refs #3380

frontend/src/lang/modules/en.ts

@@ -1173,6 +1173,8 @@ const message = {
         emailHelper: 'For password retrieval',
         title: 'Panel Alias',
         panelPort: 'Panel Port',
+        titleHelper:
+            'Supports non-special character starting, English, Chinese, numbers, spaces, .- and _, length 3-30',
         portHelper:
             'The recommended port range is 8888 to 65535. Note: If the server has a security group, permit the new port from the security group in advance',
         portChange: 'Port change',

frontend/src/lang/modules/tw.ts

@@ -1116,6 +1116,7 @@ const message = {
         emailHelper: '用於密碼找回',
         title: '面板別名',
         panelPort: '面板端口',
+        titleHelper: '支援非特殊字符開頭，英文、中文、數字、空格、.-和_, 長度3-30',
         portHelper: '建議端口範圍8888 - 65535，註意：有安全組的服務器請提前在安全組放行新端口',
         portChange: '端口修改',
         portChangeHelper: '服務端口修改需要重啟服務，是否繼續？',

frontend/src/lang/modules/zh.ts

@@ -1116,6 +1116,7 @@ const message = {
         passwd: '面板密码',
         emailHelper: '用于密码找回',
         title: '面板别名',
+        titleHelper: '支持非特殊字符开头，英文、中文、数字、空格、.-和_,长度3-30',
         panelPort: '面板端口',
         portHelper: '建议端口范围8888 - 65535，注意：有安全组的服务器请提前在安全组放行新端口',
         portChange: '端口修改',

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

@@ -4,10 +4,17 @@
             <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-form
+                ref="formRef"
+                label-position="top"
+                :model="form"
+                :rules="rules"
+                @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.simpleName">
+                        <el-form-item :label="$t('setting.title')" prop="panelName">
                             <el-input clearable v-model="form.panelName" />
                         </el-form-item>
                     </el-col>
@@ -30,7 +37,6 @@ 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';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 const globalStore = GlobalStore();
@@ -47,6 +53,20 @@ const loading = ref();
 const form = reactive({
     panelName: '',
 });
+const rules = reactive({
+    panelName: [{ validator: checkPanelName, trigger: 'blur', required: true }],
+});
+
+function checkPanelName(rule: any, value: any, callback: any) {
+    if (value === '') {
+        return callback(new Error(i18n.global.t('setting.titleHelper')));
+    }
+    const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1}[a-zA-Z0-9_ .\u4e00-\u9fa5-]{2,29}$/;
+    if (!reg.test(value)) {
+        return callback(new Error(i18n.global.t('setting.titleHelper')));
+    }
+    callback();
+}
 
 const formRef = ref<FormInstance>();