From 0ec65c3e24190b879739da554fc4bece6242459c Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Thu, 2 Mar 2023 15:46:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20OpenResty=20?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E7=9A=84=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/global/form-rules.ts             | 11 +++++++++
 frontend/src/lang/modules/en.ts               |  2 ++
 frontend/src/lang/modules/zh.ts               |  1 +
 .../website/nginx/performance/index.vue       | 24 +++++++++++--------
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/frontend/src/global/form-rules.ts b/frontend/src/global/form-rules.ts
index ec40c6915..44ffdaee5 100644
--- a/frontend/src/global/form-rules.ts
+++ b/frontend/src/global/form-rules.ts
@@ -186,6 +186,17 @@ const checkParamUrlAndPort = (rule: any, value: any, callback: any) => {
     }
 };
 
+export function checkNumberRange(min: number, max: number): FormItemRule {
+    return {
+        required: true,
+        trigger: 'blur',
+        min: min,
+        max: max,
+        type: 'number',
+        message: i18n.global.t('commons.rule.numberRange', [min, max]),
+    };
+}
+
 interface CommonRule {
     requiredInput: FormItemRule;
     requiredSelect: FormItemRule;
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index b784d02ef..237f4b45d 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -136,8 +136,10 @@ export default {
             domain: 'domain name format error',
             databaseName: 'Support English, numbers, _, length 1-30',
             ipErr: 'IP [{0}] format error, please check',
+            numberRange: 'Number range: {0} - {1}',
             paramName: 'Support English, numbers, .- and _, length 2-30',
             paramComplexity: 'Support English, numbers, {0}, length 6-30',
+            paramUrlAndPort: 'The format is http(s)://(domain name/ip):(port)',
         },
         res: {
             paramError: 'The request failed, please try again later!',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 3d02b3bb9..23e998944 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -141,6 +141,7 @@ export default {
             domain: '域名格式错误',
             databaseName: '支持英文、数字、_,长度1-30',
             ipErr: 'IP [{0}] 格式错误,请检查',
+            numberRange: '数字范围: {0} - {1}',
             paramName: '支持英文、数字、.-和_,长度2-30',
             paramComplexity: '支持英文、数字、{0},长度6-30',
             paramUrlAndPort: '格式为 http(s)://(域名/ip):(端口)',
diff --git a/frontend/src/views/website/website/nginx/performance/index.vue b/frontend/src/views/website/website/nginx/performance/index.vue
index d2e67e5e0..c160d9574 100644
--- a/frontend/src/views/website/website/nginx/performance/index.vue
+++ b/frontend/src/views/website/website/nginx/performance/index.vue
@@ -5,23 +5,27 @@
                 <el-col :span="1"><br /></el-col>
                 <el-col :span="9">
                     <el-form-item label="server_names_hash_bucket_size" prop="server_names_hash_bucket_size">
-                        <el-input clearable v-model.number="form.server_names_hash_bucket_size"></el-input>
+                        <el-input
+                            clearable
+                            type="number"
+                            v-model.number="form.server_names_hash_bucket_size"
+                        ></el-input>
                         <span class="input-help">{{ $t('nginx.serverNamesHashBucketSizeHelper') }}</span>
                     </el-form-item>
                     <el-form-item label="client_header_buffer_size" prop="client_header_buffer_size">
-                        <el-input clearable v-model.number="form.client_header_buffer_size">
+                        <el-input clearable type="number" v-model.number="form.client_header_buffer_size">
                             <template #append>K</template>
                         </el-input>
                         <span class="input-help">{{ $t('nginx.clientHeaderBufferSizeHelper') }}</span>
                     </el-form-item>
                     <el-form-item label="client_max_body_size" prop="client_max_body_size">
-                        <el-input clearable v-model.number="form.client_max_body_size">
+                        <el-input clearable type="number" v-model.number="form.client_max_body_size">
                             <template #append>MB</template>
                         </el-input>
                         <span class="input-help">{{ $t('nginx.clientMaxBodySizeHelper') }}</span>
                     </el-form-item>
                     <el-form-item label="keepalive_timeout" prop="keepalive_timeout">
-                        <el-input clearable v-model.number="form.keepalive_timeout"></el-input>
+                        <el-input clearable type="number" v-model.number="form.keepalive_timeout"></el-input>
                         <span class="input-help">{{ $t('nginx.keepaliveTimeoutHelper') }}</span>
                     </el-form-item>
                     <el-form-item>
@@ -57,7 +61,7 @@
 <script lang="ts" setup>
 import { Nginx } from '@/api/interface/nginx';
 import { GetNginxConfigByScope, UpdateNginxConfigByScope } from '@/api/modules/nginx';
-import { Rules } from '@/global/form-rules';
+import { checkNumberRange, Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
@@ -85,13 +89,13 @@ let nginxFormRef = ref();
 let loading = ref(false);
 
 const variablesRules = reactive({
-    server_names_hash_bucket_size: [Rules.number],
-    client_header_buffer_size: [Rules.number],
-    client_max_body_size: [Rules.number],
-    keepalive_timeout: [Rules.number],
+    server_names_hash_bucket_size: [checkNumberRange(1, 9999)],
+    client_header_buffer_size: [checkNumberRange(0, 999999999)],
+    client_max_body_size: [checkNumberRange(0, 999999999)],
+    keepalive_timeout: [checkNumberRange(0, 999999999)],
     gzip: [Rules.requiredSelect],
     gzip_min_length: [Rules.requiredSelect],
-    gzip_comp_level: [Rules.number],
+    gzip_comp_level: [checkNumberRange(1, 9)],
 });
 
 const getParams = async () => {