From 0ff7c418bd26ec58db026b1112deef527cdca749 Mon Sep 17 00:00:00 2001
From: ssongliu <songlius11@163.com>
Date: Tue, 7 Mar 2023 18:21:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E5=BA=93=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=A2=9E=E5=8A=A0=E8=8C=83=E5=9B=B4=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../database/mysql/setting/slow-log/index.vue | 13 ++++++--
 .../mysql/setting/variables/index.vue         | 32 +++++++++----------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/database/mysql/setting/slow-log/index.vue b/frontend/src/views/database/mysql/setting/slow-log/index.vue
index ab452cb55..a0618d721 100644
--- a/frontend/src/views/database/mysql/setting/slow-log/index.vue
+++ b/frontend/src/views/database/mysql/setting/slow-log/index.vue
@@ -2,9 +2,10 @@
     <div>
         <span style="float: left; line-height: 30px">{{ $t('database.longQueryTime') }}</span>
         <div style="margin-left: 5px; float: left">
-            <el-input type="number" v-model.number="variables.long_query_time">
+            <el-input @input="checkValid" type="number" v-model.number="variables.long_query_time">
                 <template #append>{{ $t('database.second') }}</template>
             </el-input>
+            <span v-if="errTime" class="input-error">{{ $t('commons.rule.numberRange', [1, 600]) }}</span>
         </div>
         <span style="float: left; margin-left: 20px; line-height: 30px">{{ $t('database.isOn') }}</span>
         <el-switch
@@ -25,7 +26,7 @@
             :placeholder="$t('database.noData')"
             :indent-with-tab="true"
             :tabSize="4"
-            style="margin-top: 10px; height: calc(100vh - 392px)"
+            style="margin-top: 10px; height: calc(100vh - 392px); width: 100%"
             :lineWrapping="true"
             :matchBrackets="true"
             theme="cobalt"
@@ -63,6 +64,7 @@ const handleReady = (payload) => {
 
 const confirmDialogRef = ref();
 
+const errTime = ref();
 const isWatch = ref();
 let timer: NodeJS.Timer | null = null;
 
@@ -109,7 +111,14 @@ const onCancle = async () => {
     variables.slow_query_log = variables.slow_query_log === 'ON' ? 'OFF' : 'ON';
 };
 
+const checkValid = () => {
+    errTime.value = !(variables.long_query_time > 0 && variables.long_query_time < 600);
+};
+
 const onSave = async () => {
+    if (!(variables.long_query_time > 0 && variables.long_query_time < 600)) {
+        return;
+    }
     let param = [] as Array<Database.VariablesUpdate>;
     if (variables.slow_query_log !== oldVariables.value.slow_query_log) {
         param.push({ param: 'slow_query_log', value: variables.slow_query_log });
diff --git a/frontend/src/views/database/mysql/setting/variables/index.vue b/frontend/src/views/database/mysql/setting/variables/index.vue
index 59f1d235e..033c1af33 100644
--- a/frontend/src/views/database/mysql/setting/variables/index.vue
+++ b/frontend/src/views/database/mysql/setting/variables/index.vue
@@ -115,7 +115,7 @@
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import { Rules } from '@/global/form-rules';
+import { checkNumberRange, Rules } from '@/global/form-rules';
 import { FormInstance } from 'element-plus';
 import { Database } from '@/api/interface/database';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
@@ -151,23 +151,23 @@ let mysqlVariables = reactive({
     long_query_time: 0,
 });
 const variablesRules = reactive({
-    key_buffer_size: [Rules.number],
-    query_cache_size: [Rules.number],
-    tmp_table_size: [Rules.number],
-    innodb_buffer_pool_size: [Rules.number],
-    innodb_log_buffer_size: [Rules.number],
-    sort_buffer_size: [Rules.number],
-    read_buffer_size: [Rules.number],
-    read_rnd_buffer_size: [Rules.number],
-    join_buffer_size: [Rules.number],
-    thread_stack: [Rules.number],
-    binlog_cache_size: [Rules.number],
-    thread_cache_size: [Rules.number],
-    table_open_cache: [Rules.number],
-    max_connections: [Rules.number],
+    key_buffer_size: [Rules.number, checkNumberRange(1, 102400)],
+    query_cache_size: [Rules.number, checkNumberRange(1, 102400)],
+    tmp_table_size: [Rules.number, checkNumberRange(1, 102400)],
+    innodb_buffer_pool_size: [Rules.number, checkNumberRange(1, 102400)],
+    innodb_log_buffer_size: [Rules.number, checkNumberRange(1, 102400)],
+    sort_buffer_size: [Rules.number, checkNumberRange(1, 102400)],
+    read_buffer_size: [Rules.number, checkNumberRange(1, 102400)],
+    read_rnd_buffer_size: [Rules.number, checkNumberRange(1, 102400)],
+    join_buffer_size: [Rules.number, checkNumberRange(1, 102400)],
+    thread_stack: [Rules.number, checkNumberRange(1, 102400)],
+    binlog_cache_size: [Rules.number, checkNumberRange(1, 102400)],
+    thread_cache_size: [Rules.number, checkNumberRange(1, 10000)],
+    table_open_cache: [Rules.number, checkNumberRange(1, 10000)],
+    max_connections: [Rules.number, checkNumberRange(1, 10000)],
 
     slow_query_log: [Rules.requiredSelect],
-    long_query_time: [Rules.number],
+    long_query_time: [Rules.number, checkNumberRange(1, 102400)],
 });
 
 const mysqlName = ref();