feat: 增加一个外部访问地址校验规则 (#4109)

Refs https://github.com/1Panel-dev/1Panel/issues/4091

frontend/src/global/form-rules.ts

@@ -487,6 +487,19 @@ const checkPHPExtensions = (rule, value, callback) => {
     }
 };
 
+const checkHttpOrHttps = (rule, value, callback) => {
+    if (value === '' || typeof value === 'undefined' || value == null) {
+        callback(new Error(i18n.global.t('commons.rule.paramHttp')));
+    } else {
+        const regHttpHttps = /^(http|https):\/\//;
+        if (!regHttpHttps.test(value)) {
+            callback(new Error(i18n.global.t('commons.rule.paramHttp')));
+        } else {
+            callback();
+        }
+    }
+};
+
 interface CommonRule {
     requiredInput: FormItemRule;
     requiredSelect: FormItemRule;
@@ -527,6 +540,7 @@ interface CommonRule {
     paramPort: FormItemRule;
     paramExtUrl: FormItemRule;
     paramSimple: FormItemRule;
+    paramHttp: FormItemRule;
 }
 
 export const Rules: CommonRule = {
@@ -730,4 +744,9 @@ export const Rules: CommonRule = {
         validator: checkPHPExtensions,
         trigger: 'blur',
     },
+    paramHttp: {
+        required: true,
+        validator: checkHttpOrHttps,
+        trigger: 'blur',
+    },
 };

frontend/src/lang/modules/en.ts

@@ -195,6 +195,7 @@ const message = {
             filePermission: 'File Permission Error',
             formatErr: 'Format error, please check and retry',
             phpExtension: 'Only supports , _ lowercase English and numbers',
+            paramHttp: 'Must start with http:// or https://',
         },
         res: {
             paramError: 'The request failed, please try again later!',
@@ -2206,6 +2207,11 @@ const message = {
                 httpHelper: 'Restrict the request method type of the website',
                 geoRule: 'Regional access restrictions',
                 geoHelper: 'Restrict access to your website from certain regions',
+                ipLocation: 'IP home location',
+                action: 'action',
+                ruleType: 'attack type',
+                ipHelper: 'Please enter IP',
+                attackLog: 'Attack Log',
             },
             monitor: {
                 name: 'Website Monitoring',

frontend/src/lang/modules/tw.ts

@@ -193,6 +193,7 @@ const message = {
             filePermission: '權限錯誤',
             formatErr: '格式錯誤，檢查後重試',
             phpExtension: '僅支持 , _ 小寫英文和數字',
+            paramHttp: '必須以 http:// 或 https:// 開頭',
         },
         res: {
             paramError: '請求失敗,請稍後重試!',
@@ -2061,6 +2062,11 @@ const message = {
                 httpHelper: '限制網站的請求方法類型',
                 geoRule: '地區存取限制',
                 geoHelper: '限制某些地區造訪你的網站',
+                ipLocation: 'IP 歸屬地',
+                action: '動作',
+                ruleType: '攻擊類型',
+                ipHelper: '請輸入 IP',
+                attackLog: '攻擊日誌',
             },
             monitor: {
                 name: '網站監控',

frontend/src/lang/modules/zh.ts

@@ -193,6 +193,7 @@ const message = {
             filePermission: '权限错误',
             formatErr: '格式错误，检查后重试',
             phpExtension: '仅支持 , _ 小写英文和数字',
+            paramHttp: '必须以 http:// 或 https:// 开头',
         },
         res: {
             paramError: '请求失败,请稍后重试!',
@@ -2062,6 +2063,11 @@ const message = {
             httpHelper: '限制网站的请求方法类型',
             geoRule: '地区访问限制',
             geoHelper: '限制某些地区访问你的网站',
+            ipLocation: 'IP 归属地',
+            action: '动作',
+            ruleType: '攻击类型',
+            ipHelper: '请输入 IP',
+            attackLog: '攻击日志',
         },
         monitor: {
             name: '网站监控',

frontend/src/views/app-store/detail/params/index.vue

@@ -25,7 +25,7 @@
                 @change="updateParam"
             ></el-input>
             <el-select
-                style="width: 100%"
+                class="p-w-200"
                 v-model="form[p.envKey]"
                 v-if="p.type == 'service'"
                 @change="changeService(form[p.envKey], p.services)"
@@ -42,7 +42,7 @@
                     {{ $t('app.toInstall') }}
                 </el-link>
             </span>
-            <el-select v-model="form[p.envKey]" v-if="p.type == 'select'" :multiple="p.multiple">
+            <el-select v-model="form[p.envKey]" v-if="p.type == 'select'" :multiple="p.multiple" class="p-w-200">
                 <el-option
                     v-for="service in p.values"
                     :key="service.label"
@@ -56,7 +56,7 @@
                         <el-select
                             v-model="form[p.envKey]"
                             @change="getServices(p.child.envKey, form[p.envKey], p)"
-                            style="width: 100%"
+                            class="p-w-200"
                         >
                             <el-option
                                 v-for="service in p.values"
@@ -73,6 +73,7 @@
                             v-model="form[p.child.envKey]"
                             v-if="p.child.type == 'service'"
                             @change="changeService(form[p.child.envKey], p.services)"
+                            class="p-w-200"
                         >
                             <el-option
                                 v-for="service in p.services"