From b9c5fee411cd112b1c5b2ec1b0417cd8c4f174a8 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 19 Dec 2023 16:06:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=A2=E6=9D=BF=E5=88=AB=E5=90=8D?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=B8=AD=E6=96=87=E5=8F=8A=E7=A9=BA=E6=A0=BC?=
 =?UTF-8?q?=20(#3382)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs #3380
---
 frontend/src/lang/modules/en.ts               |  2 ++
 frontend/src/lang/modules/tw.ts               |  1 +
 frontend/src/lang/modules/zh.ts               |  1 +
 .../src/views/setting/panel/name/index.vue    | 26 ++++++++++++++++---
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 5c6432555..91910214f 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/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',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index c16e808f8..559c92cfb 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -1116,6 +1116,7 @@ const message = {
         emailHelper: '用於密碼找回',
         title: '面板別名',
         panelPort: '面板端口',
+        titleHelper: '支援非特殊字符開頭，英文、中文、數字、空格、.-和_, 長度3-30',
         portHelper: '建議端口範圍8888 - 65535，註意：有安全組的服務器請提前在安全組放行新端口',
         portChange: '端口修改',
         portChangeHelper: '服務端口修改需要重啟服務，是否繼續？',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 2af5e9b07..9b797c164 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -1116,6 +1116,7 @@ const message = {
         passwd: '面板密码',
         emailHelper: '用于密码找回',
         title: '面板别名',
+        titleHelper: '支持非特殊字符开头，英文、中文、数字、空格、.-和_,长度3-30',
         panelPort: '面板端口',
         portHelper: '建议端口范围8888 - 65535，注意：有安全组的服务器请提前在安全组放行新端口',
         portChange: '端口修改',
diff --git a/frontend/src/views/setting/panel/name/index.vue b/frontend/src/views/setting/panel/name/index.vue
index d11137b18..615e0dd74 100644
--- a/frontend/src/views/setting/panel/name/index.vue
+++ b/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>();