fix: Fix the issue of compose name validation errors (#7382)

Refs #7380

frontend/src/global/form-rules.ts

@@ -220,6 +220,19 @@ const checkImageName = (rule: any, value: any, callback: any) => {
     }
 };
 
+const checkComposeName = (rule: any, value: any, callback: any) => {
+    if (value === '' || typeof value === 'undefined' || value == null) {
+        callback(new Error(i18n.global.t('commons.rule.composeName')));
+    } else {
+        const reg = /^[a-z0-9]{1}[a-z0-9_-]{0,256}$/;
+        if (!reg.test(value) && value !== '') {
+            callback(new Error(i18n.global.t('commons.rule.composeName')));
+        } else {
+            callback();
+        }
+    }
+};
+
 const checkVolumeName = (rule: any, value: any, callback: any) => {
     if (value === '' || typeof value === 'undefined' || value == null) {
         callback(new Error(i18n.global.t('commons.rule.volumeName')));
@@ -564,6 +577,7 @@ interface CommonRule {
     simplePassword: FormItemRule;
     dbName: FormItemRule;
     imageName: FormItemRule;
+    composeName: FormItemRule;
     volumeName: FormItemRule;
     linuxName: FormItemRule;
     password: FormItemRule;
@@ -644,6 +658,11 @@ export const Rules: CommonRule = {
         validator: checkImageName,
         trigger: 'blur',
     },
+    composeName: {
+        required: true,
+        validator: checkComposeName,
+        trigger: 'blur',
+    },
     volumeName: {
         required: true,
         validator: checkVolumeName,

frontend/src/lang/modules/en.ts

@@ -195,6 +195,8 @@ const message = {
             dbName: `This field mustn't start with underscore character and must consist of English, numbers, and "_" characters with a length of 1-64.`,
             imageName:
                 'This field must consist of English, numbers, ":", "@", "/", ".", "-", and "_" characters with a length of 1-256.',
+            composeName:
+                'Supports non-special characters at the beginning, lowercase letters, numbers, - and _, length 1-256',
             volumeName:
                 'This field must consist of English, numbers, ".", "-", and "_" characters with a length of 2-30.',
             supervisorName:

frontend/src/lang/modules/tw.ts

@@ -194,6 +194,7 @@ const message = {
             simplePassword: '支持非底線開頭，英文、數字、_,長度1-30',
             dbName: '支持非特殊字符開頭，英文、中文、數字、.-_，長度1-64',
             imageName: '支持英文、數字、:@/.-_,長度1-256',
+            composeName: '支持非特殊字符開頭，小寫英文、數字、-和_，長度1-256',
             volumeName: '支持英文、數字、.-和_,長度2-30',
             supervisorName: '支援非特殊字元開頭,英文、數字、-和_,長度1-128',
             complexityPassword: '請輸入長度為 8-30 位，並包含字母、數字、至少兩種特殊字符的密碼組合',

frontend/src/lang/modules/zh.ts

@@ -193,6 +193,7 @@ const message = {
             simplePassword: '支持非下划线开头，英文、数字、_,长度1-30',
             dbName: '支持非特殊字符开头，英文、中文、数字、.-_,长度1-64',
             imageName: '支持英文、数字、:@/.-_,长度1-256',
+            composeName: '支持非特殊字符开头，小写英文、数字、-和_,长度1-256',
             volumeName: '支持英文、数字、.-和_,长度2-30',
             supervisorName: '支持非特殊字符开头,英文、数字、-和_,长度1-128',
             complexityPassword: '请输入长度为 8-30 位且包含字母、数字、特殊字符至少两项的密码组合',

frontend/src/views/container/compose/create/index.vue

@@ -169,7 +169,7 @@ const form = reactive({
     envFileContent: `env_file:\n  - 1panel.env`,
 });
 const rules = reactive({
-    name: [Rules.requiredInput, Rules.imageName],
+    name: [Rules.requiredInput, Rules.composeName],
     path: [Rules.requiredInput],
     template: [Rules.requiredSelect],
 });