From 7c2414e46c800c0d71926205593ac71d72d94502 Mon Sep 17 00:00:00 2001
From: ssongliu <songlius11@163.com>
Date: Mon, 24 Oct 2022 18:46:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E7=8A=B6=E6=80=81=E5=8F=8A=E8=B0=83=E4=BC=98?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E8=8E=B7=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/app/service/database_test.go          |  23 +-
 frontend/src/lang/modules/zh.ts               |   1 +
 frontend/src/utils/util.ts                    |   2 +-
 .../src/views/database/mysql/create/index.vue |  19 +-
 .../views/database/mysql/setting/index.vue    | 223 ++++++++++++------
 go.mod                                        |   2 +-
 6 files changed, 167 insertions(+), 103 deletions(-)

diff --git a/backend/app/service/database_test.go b/backend/app/service/database_test.go
index e32985956..2637b2d63 100644
--- a/backend/app/service/database_test.go
+++ b/backend/app/service/database_test.go
@@ -2,43 +2,32 @@ package service
 
 import (
 	"database/sql"
-	"encoding/json"
 	"fmt"
 	"testing"
 
-	"github.com/1Panel-dev/1Panel/backend/app/dto"
 	_ "github.com/go-sql-driver/mysql"
 )
 
 func TestMysql(t *testing.T) {
-	connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "localhost", 2306)
+	connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "172.16.10.143", 3306)
 	db, err := sql.Open("mysql", connArgs)
 	if err != nil {
 		fmt.Println(err)
 	}
 	defer db.Close()
 
-	rows, err := db.Query("show VARIABLES")
+	rows, err := db.Query("show master status")
 	if err != nil {
 		fmt.Println(err)
 	}
 
-	variableMap := make(map[string]string)
+	masterRows := make([]string, 5)
 	for rows.Next() {
-		var variableName, variableValue string
-		if err := rows.Scan(&variableName, &variableValue); err != nil {
+		if err := rows.Scan(&masterRows[0], &masterRows[1], &masterRows[2], &masterRows[3], &masterRows[4]); err != nil {
 			fmt.Println(err)
 		}
-		variableMap[variableName] = variableValue
 	}
-	var info dto.MysqlConf
-	arr, err := json.Marshal(variableMap)
-	if err != nil {
-		fmt.Println(err)
+	for k, v := range masterRows {
+		fmt.Println(k, v)
 	}
-	err = json.Unmarshal(arr, &info)
-	if err != nil {
-		fmt.Println(err)
-	}
-	fmt.Println(info)
 }
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 8c943b612..8cd0c3682 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -161,6 +161,7 @@ export default {
         loadBackup: '导入备份',
         setting: '数据库设置',
         remoteAccess: '远程访问',
+        changePassword: '改密',
 
         baseSetting: '基础设置',
         confChange: '配置修改',
diff --git a/frontend/src/utils/util.ts b/frontend/src/utils/util.ts
index c72385a2b..e000c3b20 100644
--- a/frontend/src/utils/util.ts
+++ b/frontend/src/utils/util.ts
@@ -111,7 +111,7 @@ export function computeSize(size: number): string {
     const num = 1024.0;
 
     if (size < num) return size + ' B';
-    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' K';
+    if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' KB';
     if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' MB';
     if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + ' GB';
     return (size / Math.pow(num, 4)).toFixed(2) + ' TB';
diff --git a/frontend/src/views/database/mysql/create/index.vue b/frontend/src/views/database/mysql/create/index.vue
index d1f1df7e8..aad897250 100644
--- a/frontend/src/views/database/mysql/create/index.vue
+++ b/frontend/src/views/database/mysql/create/index.vue
@@ -27,13 +27,13 @@
 
             <el-form-item :label="$t('database.permission')" prop="permission">
                 <el-select style="width: 100%" v-model="form.permission">
-                    <el-option value="local" :label="$t('database.permissionLocal')" />
-                    <el-option value="all" :label="$t('database.permissionAll')" />
+                    <el-option value="localhost" :label="$t('database.permissionLocal')" />
+                    <el-option value="%" :label="$t('database.permissionAll')" />
                     <el-option value="ip" :label="$t('database.permissionForIP')" />
                 </el-select>
             </el-form-item>
             <el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
-                <el-input type="password" clearable v-model="form.permissionIPs" />
+                <el-input clearable v-model="form.permissionIPs" />
             </el-form-item>
             <el-form-item :label="$t('commons.table.description')" prop="description">
                 <el-input type="textarea" clearable v-model="form.description" />
@@ -60,6 +60,7 @@ import { addMysqlDB } from '@/api/modules/database';
 const createVisiable = ref(false);
 const form = reactive({
     name: '',
+    version: '',
     format: '',
     username: '',
     password: '',
@@ -77,12 +78,16 @@ const rules = reactive({
 type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 
-const acceptParams = (): void => {
+interface DialogProps {
+    version: string;
+}
+const acceptParams = (params: DialogProps): void => {
     form.name = '';
+    form.version = params.version;
     form.format = 'utf8mb4';
     form.username = '';
     form.password = '';
-    form.permission = 'local';
+    form.permission = 'localhost';
     form.permissionIPs = '';
     form.description = '';
     createVisiable.value = true;
@@ -93,8 +98,10 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
+        if (form.permission === 'ip') {
+            form.permission = form.permissionIPs;
+        }
         await addMysqlDB(form);
-
         ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
         emit('search');
         createVisiable.value = false;
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 8bbb5dc79..dd293af85 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="demo-collapse">
+    <div class="demo-collapse" v-if="onSetting">
         <el-card>
             <el-collapse v-model="activeName" accordion>
                 <el-collapse-item title="基础设置" name="1">
@@ -77,19 +77,19 @@
                             <table style="width: 100%" class="myTable">
                                 <tr>
                                     <td>启动时间</td>
-                                    <td>2022/10/12 14:46:35</td>
+                                    <td>{{ mysqlStatus.run }}</td>
                                 </tr>
                                 <tr>
                                     <td>总连接次数</td>
-                                    <!-- <td>{{ mysqlStatus!.Connections }}</td> -->
+                                    <td>{{ mysqlStatus.connections }}</td>
                                 </tr>
                                 <tr>
                                     <td>发送</td>
-                                    <td>{{ (mysqlStatus!.Bytes_sent / 2014).toFixed(2) }} KB</td>
+                                    <td>{{ mysqlStatus!.bytesSent }}</td>
                                 </tr>
                                 <tr>
                                     <td>接收</td>
-                                    <td>{{ (mysqlStatus!.Bytes_received / 2014).toFixed(2) }} KB</td>
+                                    <td>{{ mysqlStatus!.bytesReceived }}</td>
                                 </tr>
                             </table>
                         </el-col>
@@ -97,19 +97,19 @@
                             <table style="width: 100%" class="myTable">
                                 <tr>
                                     <td>每秒查询</td>
-                                    <td>0</td>
+                                    <td>{{ mysqlStatus!.queryPerSecond }}</td>
                                 </tr>
                                 <tr>
                                     <td>每秒事务</td>
-                                    <td>0</td>
+                                    <td>{{ mysqlStatus!.txPerSecond }}</td>
                                 </tr>
                                 <tr>
                                     <td>File</td>
-                                    <td>{{ mysqlStatus!.File }}</td>
+                                    <td>{{ mysqlStatus!.file }}</td>
                                 </tr>
                                 <tr>
                                     <td>Position</td>
-                                    <td>{{ mysqlStatus!.Position }}</td>
+                                    <td>{{ mysqlStatus!.position }}</td>
                                 </tr>
                             </table>
                         </el-col>
@@ -120,73 +120,57 @@
                             <table style="margin-top: 20px; width: 100%" class="myTable">
                                 <tr>
                                     <td>活动/峰值连接数</td>
-                                    <td>
-                                        {{
-                                            (mysqlStatus!.Threads_running / mysqlStatus!.Max_used_connections).toFixed(
-                                                2,
-                                            )
-                                        }}%
-                                    </td>
+                                    <td>{{ mysqlStatus!.connInfo }}</td>
                                     <td>若值过大,增加max_connections</td>
                                 </tr>
                                 <tr>
                                     <td>线程缓存命中率</td>
-                                    <td></td>
+                                    <td>{{ mysqlStatus!.threadCacheHit }}</td>
                                     <td>若过低,增加thread_cache_size</td>
                                 </tr>
                                 <tr>
                                     <td>索引命中率</td>
-                                    <td>
-                                        {{ (1 - mysqlStatus!.Key_reads / mysqlStatus!.Key_read_requests).toFixed(2) }}%
-                                    </td>
+                                    <td>{{ mysqlStatus!.indexHit }}</td>
                                     <td>若过低,增加key_buffer_size</td>
                                 </tr>
                                 <tr>
                                     <td>Innodb 索引命中率</td>
-                                    <td>
-                                        {{
-                                            (
-                                                1 -
-                                                mysqlStatus!.Innodb_buffer_pool_reads /
-                                                    mysqlStatus!.Innodb_buffer_pool_read_requests
-                                            ).toFixed(2)
-                                        }}%
-                                    </td>
+                                    <td>{{ mysqlStatus!.innodbIndexHit }}</td>
                                     <td>若过低,增加innodb_buffer_pool_size</td>
                                 </tr>
                                 <tr>
                                     <td>查询缓存命中率</td>
-                                    <td>OFF</td>
+                                    <td>{{ mysqlStatus!.cacheHit }}</td>
                                     <td>若过低,增加query_cache_size</td>
                                 </tr>
                                 <tr>
                                     <td>创建临时表到磁盘</td>
-                                    <td>13.62%</td>
+                                    <td>{{ mysqlStatus!.tmpTableToDB }}</td>
                                     <td>若过大,尝试增加tmp_table_size</td>
                                 </tr>
                                 <tr>
                                     <td>已打开的表</td>
-                                    <td>{{ mysqlStatus!.Open_tables }}</td>
-                                    <td colspan="20">table_open_cache配置值应大于等于此值</td>
+                                    <td>{{ mysqlStatus!.openTables }}</td>
+                                    <td>table_open_cache配置值应大于等于此值</td>
                                 </tr>
                                 <tr>
                                     <td>没有使用索引的量</td>
-                                    <td>{{ mysqlStatus!.Select_full_join }}</td>
+                                    <td>{{ mysqlStatus!.selectFullJoin }}</td>
                                     <td>若不为0,请检查数据表的索引是否合理</td>
                                 </tr>
                                 <tr>
                                     <td>没有索引的JOIN量</td>
-                                    <td>0</td>
+                                    <td>{{ mysqlStatus!.selectRangeCheck }}</td>
                                     <td>若不为0,请检查数据表的索引是否合理</td>
                                 </tr>
                                 <tr>
                                     <td>排序后的合并次数</td>
-                                    <td>{{ mysqlStatus!.Sort_merge_passes }}</td>
+                                    <td>{{ mysqlStatus!.sortMergePasses }}</td>
                                     <td>若值过大,增加sort_buffer_size</td>
                                 </tr>
                                 <tr>
                                     <td>锁表次数</td>
-                                    <td>{{ mysqlStatus!.Table_locks_waited }}</td>
+                                    <td>{{ mysqlStatus!.tableLocksWaited }}</td>
                                     <td>若值过大,请考虑增加您的数据库性能</td>
                                 </tr>
                             </table>
@@ -200,102 +184,91 @@
                                 <el-col :span="1"><br /></el-col>
                                 <el-col :span="6">
                                     <el-form-item label="key_buffer_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.key_buffer_size">
                                             <template #append>MB</template>
                                         </el-input>
                                         <span class="input-help">用于索引的缓冲区大小</span>
                                     </el-form-item>
                                     <el-form-item label="query_cache_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.query_cache_size">
                                             <template #append>MB</template>
                                         </el-input>
                                         <span class="input-help">查询缓存,不开启请设为0</span>
                                     </el-form-item>
                                     <el-form-item label="tmp_table_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.tmp_table_size">
                                             <template #append>MB</template>
                                         </el-input>
                                         <span class="input-help">临时表缓存大小</span>
                                     </el-form-item>
                                     <el-form-item label="innodb_buffer_pool_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.innodb_buffer_pool_size">
                                             <template #append>MB</template>
                                         </el-input>
                                         <span class="input-help">Innodb缓冲区大小</span>
                                     </el-form-item>
                                     <el-form-item label="innodb_log_buffer_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.innodb_log_buffer_size">
                                             <template #append>MB</template>
                                         </el-input>
                                         <span class="input-help">Innodb日志缓冲区大小</span>
                                     </el-form-item>
                                     <el-form-item label="sort_buffer_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.sort_buffer_size">
                                             <template #append>KB</template>
                                         </el-input>
                                         <span class="input-help">* 连接数, 每个线程排序的缓冲大小</span>
                                     </el-form-item>
                                     <el-form-item label="read_buffer_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.read_buffer_size">
                                             <template #append>KB</template>
                                         </el-input>
                                         <span class="input-help">* 连接数, 读入缓冲区大小</span>
                                     </el-form-item>
 
                                     <el-form-item>
-                                        <el-button
-                                            icon="Collection"
-                                            type="primary"
-                                            size="default"
-                                            @click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
-                                        >
+                                        <el-button icon="Collection" type="primary" size="default">
                                             {{ $t('commons.button.save') }}
                                         </el-button>
-                                        <el-button
-                                            icon="RefreshLeft"
-                                            size="default"
-                                            @click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
-                                        >
-                                            重启数据库
-                                        </el-button>
+                                        <el-button icon="RefreshLeft" size="default">重启数据库</el-button>
                                     </el-form-item>
                                 </el-col>
                                 <el-col :span="2"><br /></el-col>
                                 <el-col :span="6">
                                     <el-form-item label="read_rnd_buffer_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.read_rnd_buffer_size">
                                             <template #append>KB</template>
                                         </el-input>
                                         <span class="input-help">* 连接数, 随机读取缓冲区大小</span>
                                     </el-form-item>
                                     <el-form-item label="join_buffer_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.join_buffer_size">
                                             <template #append>KB</template>
                                         </el-input>
                                         <span class="input-help">* 连接数, 关联表缓存大小</span>
                                     </el-form-item>
                                     <el-form-item label="thread_stack">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.thread_stack">
                                             <template #append>KB</template>
                                         </el-input>
                                         <span class="input-help">* 连接数, 每个线程的堆栈大小</span>
                                     </el-form-item>
                                     <el-form-item label="binlog_cache_size">
-                                        <el-input clearable v-model="form.port">
+                                        <el-input clearable v-model="mysqlVariables.binlog_cache_size">
                                             <template #append>KB</template>
                                         </el-input>
                                         <span class="input-help">* 连接数, 二进制日志缓存大小(4096的倍数)</span>
                                     </el-form-item>
                                     <el-form-item label="thread_cache_size">
-                                        <el-input clearable v-model="form.port" />
+                                        <el-input clearable v-model="mysqlVariables.thread_cache_size" />
                                         <span class="input-help">线程池大小</span>
                                     </el-form-item>
                                     <el-form-item label="table_open_cache">
-                                        <el-input clearable v-model="form.port" />
+                                        <el-input clearable v-model="mysqlVariables.table_open_cache" />
                                         <span class="input-help">表缓存</span>
                                     </el-form-item>
                                     <el-form-item label="max_connections">
-                                        <el-input clearable v-model="form.port" />
+                                        <el-input clearable v-model="mysqlVariables.max_connections" />
                                         <span class="input-help">最大连接数</span>
                                     </el-form-item>
                                 </el-col>
@@ -303,7 +276,7 @@
                         </el-form>
                     </el-card>
                 </el-collapse-item>
-                <el-collapse-item title="日志" name="4"></el-collapse-item>
+                <el-collapse-item title="日志" name="5"></el-collapse-item>
             </el-collapse>
         </el-card>
     </div>
@@ -311,13 +284,14 @@
 
 <script lang="ts" setup>
 import { FormInstance } from 'element-plus';
-import { onMounted, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { LoadFile } from '@/api/modules/files';
 import { loadMysqlStatus, loadMysqlVariables } from '@/api/modules/database';
 import { Database } from '@/api/interface/database';
+import { computeSize } from '@/utils/util';
 
 const extensions = [javascript(), oneDark];
 const activeName = ref('1');
@@ -335,29 +309,122 @@ const form = reactive({
 });
 const panelFormRef = ref<FormInstance>();
 const mysqlConf = ref();
-const mysqlVariables = ref();
-const mysqlStatus = ref<Database.MysqlStatus>();
+const mysqlVariables = reactive<Database.MysqlVariables>({
+    key_buffer_size: 0,
+    query_cache_size: 0,
+    tmp_table_size: 0,
+    innodb_buffer_pool_size: 0,
+    innodb_log_buffer_size: 0,
+    sort_buffer_size: 0,
+    read_buffer_size: 0,
+    read_rnd_buffer_size: 0,
+    join_buffer_size: 0,
+    thread_stack: 0,
+    binlog_cache_size: 0,
+    thread_cache_size: 0,
+    table_open_cache: 0,
+    max_connections: 0,
+});
+let mysqlStatus = reactive({
+    run: 0,
+    connections: 0,
+    bytesSent: '',
+    bytesReceived: '',
+
+    queryPerSecond: '',
+    txPerSecond: '',
+    file: '',
+    position: 0,
+
+    connInfo: '',
+    threadCacheHit: '',
+    indexHit: '',
+    innodbIndexHit: '',
+    cacheHit: '',
+    tmpTableToDB: '',
+    openTables: 0,
+    selectFullJoin: 0,
+    selectRangeCheck: 0,
+    sortMergePasses: 0,
+    tableLocksWaited: 0,
+});
+
+const onSetting = ref<boolean>(false);
+
+const acceptParams = (): void => {
+    onSetting.value = true;
+    loadMysqlConf('/opt/1Panel/conf/mysql.conf');
+    loadStatus();
+    loadVariables();
+};
+const onClose = (): void => {
+    onSetting.value = false;
+};
 
 const onSave = async (formEl: FormInstance | undefined, key: string, val: any) => {
     console.log(formEl, key, val);
 };
+
 const loadMysqlConf = async (path: string) => {
     const res = await LoadFile({ path: path });
     mysqlConf.value = res.data;
 };
+
 const loadVariables = async () => {
     const res = await loadMysqlVariables();
-    mysqlVariables.value = res.data;
-};
-const loadStatus = async () => {
-    const res = await loadMysqlStatus();
-    mysqlStatus.value = res.data;
+    mysqlVariables.key_buffer_size = res.data.key_buffer_size / 1024 / 1024;
+    mysqlVariables.query_cache_size = res.data.query_cache_size / 1024 / 1024;
+    mysqlVariables.tmp_table_size = res.data.tmp_table_size / 1024 / 1024;
+    mysqlVariables.innodb_buffer_pool_size = res.data.innodb_buffer_pool_size / 1024 / 1024;
+    mysqlVariables.innodb_log_buffer_size = res.data.innodb_log_buffer_size / 1024 / 1024;
+
+    mysqlVariables.sort_buffer_size = res.data.sort_buffer_size / 1024;
+    mysqlVariables.read_buffer_size = res.data.read_buffer_size / 1024;
+    mysqlVariables.read_rnd_buffer_size = res.data.read_rnd_buffer_size / 1024;
+    mysqlVariables.join_buffer_size = res.data.join_buffer_size / 1024;
+    mysqlVariables.thread_stack = res.data.thread_stack / 1024;
+    mysqlVariables.binlog_cache_size = res.data.binlog_cache_size / 1024;
+    mysqlVariables.thread_cache_size = res.data.thread_cache_size;
+    mysqlVariables.table_open_cache = res.data.table_open_cache;
+    mysqlVariables.max_connections = res.data.max_connections;
 };
 
-onMounted(() => {
-    console.log('dasdasd');
-    loadMysqlConf('/opt/1Panel/conf/mysql.conf');
-    loadStatus();
-    loadVariables();
+const loadStatus = async () => {
+    const res = await loadMysqlStatus();
+    let queryPerSecond = res.data.Questions / res.data.Uptime;
+    let txPerSecond = (res.data!.Com_commit + res.data.Com_rollback) / res.data.Uptime;
+
+    let threadCacheHit = (1 - res.data.Threads_created / res.data.Connections) * 100;
+    let cacheHit = (res.data.Qcache_hits / (res.data.Qcache_hits + res.data.Qcache_inserts)) * 100;
+    let indexHit = (1 - res.data.Key_reads / res.data.Key_read_requests) * 100;
+    let innodbIndexHit = (1 - res.data.Innodb_buffer_pool_reads / res.data.Innodb_buffer_pool_read_requests) * 100;
+    let tmpTableToDB = (res.data.Created_tmp_disk_tables / res.data.Created_tmp_tables) * 100;
+
+    mysqlStatus.run = res.data.Run;
+    mysqlStatus.connections = res.data.Connections;
+    mysqlStatus.bytesSent = res.data.Bytes_sent ? computeSize(res.data.Bytes_sent) : '0';
+    mysqlStatus.bytesReceived = res.data.Bytes_received ? computeSize(res.data.Bytes_received) : '0';
+
+    mysqlStatus.queryPerSecond = isNaN(queryPerSecond) || queryPerSecond === 0 ? '0' : queryPerSecond.toFixed(2);
+    mysqlStatus.txPerSecond = isNaN(txPerSecond) || txPerSecond === 0 ? '0' : txPerSecond.toFixed(2);
+    mysqlStatus.file = res.data.File;
+    mysqlStatus.position = res.data.Position;
+
+    mysqlStatus.connInfo = res.data.Threads_running + '/' + res.data.Max_used_connections;
+    mysqlStatus.threadCacheHit = isNaN(threadCacheHit) || threadCacheHit === 0 ? '0' : threadCacheHit.toFixed(2) + '%';
+    mysqlStatus.indexHit = isNaN(indexHit) || indexHit === 0 ? '0' : indexHit.toFixed(2) + '%';
+    mysqlStatus.innodbIndexHit = isNaN(innodbIndexHit) || innodbIndexHit === 0 ? '0' : innodbIndexHit.toFixed(2) + '%';
+    mysqlStatus.cacheHit = isNaN(cacheHit) || cacheHit === 0 ? 'OFF' : cacheHit.toFixed(2) + '%';
+    mysqlStatus.tmpTableToDB = isNaN(tmpTableToDB) || tmpTableToDB === 0 ? '0' : tmpTableToDB.toFixed(2) + '%';
+    mysqlStatus.openTables = res.data.Open_tables;
+    mysqlStatus.selectFullJoin = res.data.Select_full_join;
+    mysqlStatus.selectRangeCheck = res.data.Select_range_check;
+    mysqlStatus.sortMergePasses = res.data.Sort_merge_passes;
+    mysqlStatus.tableLocksWaited = res.data.Table_locks_waited;
+};
+
+defineExpose({
+    acceptParams,
+    onClose,
 });
 </script>
diff --git a/go.mod b/go.mod
index ba497606c..4daae0cc7 100644
--- a/go.mod
+++ b/go.mod
@@ -16,6 +16,7 @@ require (
 	github.com/gin-gonic/gin v1.8.1
 	github.com/go-gormigrate/gormigrate/v2 v2.0.2
 	github.com/go-playground/validator/v10 v10.11.0
+	github.com/go-sql-driver/mysql v1.6.0
 	github.com/gogf/gf v1.16.9
 	github.com/golang-jwt/jwt/v4 v4.4.2
 	github.com/gorilla/csrf v1.7.1
@@ -80,7 +81,6 @@ require (
 	github.com/go-openapi/swag v0.19.15 // indirect
 	github.com/go-playground/locales v0.14.0 // indirect
 	github.com/go-playground/universal-translator v0.18.0 // indirect
-	github.com/go-sql-driver/mysql v1.6.0 // indirect
 	github.com/goccy/go-json v0.9.7 // indirect
 	github.com/gogo/protobuf v1.3.2 // indirect
 	github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 // indirect