feat: 完成数据库设置界面

backend/app/api/v1/databse_mysql.go

@@ -61,3 +61,23 @@ func (b *BaseApi) DeleteMysql(c *gin.Context) {
 	}
 	helper.SuccessWithData(c, nil)
 }
+
+func (b *BaseApi) LoadStatus(c *gin.Context) {
+	data, err := mysqlService.LoadStatus("")
+	if err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+
+	helper.SuccessWithData(c, data)
+}
+
+func (b *BaseApi) LoadConf(c *gin.Context) {
+	data, err := mysqlService.LoadConf("")
+	if err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+
+	helper.SuccessWithData(c, data)
+}

backend/app/dto/database.go

@@ -22,3 +22,60 @@ type MysqlDBCreate struct {
 	PermissionIPs string `json:"permissionIPs"`
 	Description   string `json:"description"`
 }
+
+type MysqlStatus struct {
+	AbortedClients               string `json:"Aborted_clients"`
+	AbortedConnects              string `json:"Aborted_connects"`
+	BytesReceived                string `json:"Bytes_received"`
+	BytesSent                    string `json:"Bytes_sent"`
+	ComCommit                    string `json:"Com_commit"`
+	ComRollback                  string `json:"Com_rollback"`
+	Connections                  string `json:"Connections"`
+	CreatedTmpDiskTables         string `json:"Created_tmp_disk_tables"`
+	CreatedTmpTables             string `json:"Created_tmp_tables"`
+	InnodbBufferPoolPagesDirty   string `json:"Innodb_buffer_pool_pages_dirty"`
+	InnodbBufferPoolReadRequests string `json:"Innodb_buffer_pool_read_requests"`
+	InnodbBufferPoolReads        string `json:"Innodb_buffer_pool_reads"`
+	KeyReadRequests              string `json:"Key_read_requests"`
+	KeyReads                     string `json:"Key_reads"`
+	KeyWriteEequests             string `json:"Key_write_requests"`
+	KeyWrites                    string `json:"Key_writes"`
+	MaxUsedConnections           string `json:"Max_used_connections"`
+	OpenTables                   string `json:"Open_tables"`
+	OpenedFiles                  string `json:"Opened_files"`
+	OpenedTables                 string `json:"Opened_tables"`
+	QcacheHits                   string `json:"Qcache_hits"`
+	QcacheInserts                string `json:"Qcache_inserts"`
+	Questions                    string `json:"Questions"`
+	SelectFullJoin               string `json:"Select_full_join"`
+	SelectRangeCheck             string `json:"Select_range_check"`
+	SortMergePasses              string `json:"Sort_merge_passes"`
+	TableLocksWaited             string `json:"Table_locks_waited"`
+	ThreadsCached                string `json:"Threads_cached"`
+	ThreadsConnected             string `json:"Threads_connected"`
+	ThreadsCreated               string `json:"Threads_created"`
+	ThreadsRunning               string `json:"Threads_running"`
+	Uptime                       string `json:"Uptime"`
+	Run                          string `json:"Run"`
+	File                         string `json:"File"`
+	Position                     string `json:"Position"`
+}
+
+type MysqlConf struct {
+	BinlogCachSize       string `json:"binlog_cache_size"`
+	InnodbBufferPoolSize string `json:"innodb_buffer_pool_size"`
+	InnodbLogBufferSize  string `json:"innodb_log_buffer_size"`
+	JoinBufferSize       string `json:"join_buffer_size"`
+	KeyBufferSize        string `json:"key_buffer_size"`
+	MaxConnections       string `json:"max_connections"`
+	MaxHeapTableSize     string `json:"max_heap_table_size"`
+	QueryCacheSize       string `json:"query_cache_size"`
+	QueryCache_type      string `json:"query_cache_type"`
+	ReadBufferSize       string `json:"read_buffer_size"`
+	ReadRndBufferSize    string `json:"read_rnd_buffer_size"`
+	SortBufferSize       string `json:"sort_buffer_size"`
+	TableOpenCache       string `json:"table_open_cache"`
+	ThreadCacheSize      string `json:"thread_cache_size"`
+	ThreadStack          string `json:"thread_stack"`
+	Tmp_tableSize        string `json:"tmp_table_size"`
+}

backend/app/service/database_mysql.go

@@ -1,8 +1,13 @@
 package service
 
 import (
+	"database/sql"
+	"encoding/json"
+	"fmt"
+
 	"github.com/1Panel-dev/1Panel/backend/app/dto"
 	"github.com/1Panel-dev/1Panel/backend/constant"
+	_ "github.com/go-sql-driver/mysql"
 	"github.com/jinzhu/copier"
 	"github.com/pkg/errors"
 )
@@ -13,6 +18,8 @@ type IMysqlService interface {
 	SearchWithPage(search dto.SearchWithPage) (int64, interface{}, error)
 	Create(mysqlDto dto.MysqlDBCreate) error
 	Delete(ids []uint) error
+	LoadStatus(version string) (*dto.MysqlStatus, error)
+	LoadConf(version string) (*dto.MysqlConf, error)
 }
 
 func NewIMysqlService() IMysqlService {
@@ -56,3 +63,63 @@ func (u *MysqlService) Delete(ids []uint) error {
 	}
 	return mysqlRepo.Delete(commonRepo.WithIdsIn(ids))
 }
+
+func (u *MysqlService) LoadConf(version string) (*dto.MysqlConf, error) {
+	connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "localhost", 2306)
+	db, err := sql.Open("mysql", connArgs)
+	if err != nil {
+		return nil, err
+	}
+	defer db.Close()
+
+	rows, err := db.Query("show variables")
+	if err != nil {
+		return nil, err
+	}
+	variableMap := make(map[string]string)
+	for rows.Next() {
+		var variableName, variableValue string
+		if err := rows.Scan(&variableName, &variableValue); err != nil {
+			continue
+		}
+		variableMap[variableName] = variableValue
+	}
+
+	var info dto.MysqlConf
+	arr, err := json.Marshal(variableMap)
+	if err != nil {
+		return nil, err
+	}
+	_ = json.Unmarshal(arr, &info)
+	return &info, nil
+}
+
+func (u *MysqlService) LoadStatus(version string) (*dto.MysqlStatus, error) {
+	connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "localhost", 2306)
+	db, err := sql.Open("mysql", connArgs)
+	if err != nil {
+		return nil, err
+	}
+	defer db.Close()
+
+	rows, err := db.Query("show status")
+	if err != nil {
+		return nil, err
+	}
+	variableMap := make(map[string]string)
+	for rows.Next() {
+		var variableName, variableValue string
+		if err := rows.Scan(&variableName, &variableValue); err != nil {
+			continue
+		}
+		variableMap[variableName] = variableValue
+	}
+
+	var info dto.MysqlStatus
+	arr, err := json.Marshal(variableMap)
+	if err != nil {
+		return nil, err
+	}
+	_ = json.Unmarshal(arr, &info)
+	return &info, nil
+}

backend/app/service/database_test.go

@@ -0,0 +1,44 @@
+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)
+	db, err := sql.Open("mysql", connArgs)
+	if err != nil {
+		fmt.Println(err)
+	}
+	defer db.Close()
+
+	rows, err := db.Query("show VARIABLES")
+	if err != nil {
+		fmt.Println(err)
+	}
+
+	variableMap := make(map[string]string)
+	for rows.Next() {
+		var variableName, variableValue string
+		if err := rows.Scan(&variableName, &variableValue); err != nil {
+			fmt.Println(err)
+		}
+		variableMap[variableName] = variableValue
+	}
+	var info dto.MysqlConf
+	arr, err := json.Marshal(variableMap)
+	if err != nil {
+		fmt.Println(err)
+	}
+	err = json.Unmarshal(arr, &info)
+	if err != nil {
+		fmt.Println(err)
+	}
+	fmt.Println(info)
+}

backend/app/service/mysql_test.go

@@ -1,34 +0,0 @@
-package service
-
-import (
-	"context"
-	"database/sql"
-	"fmt"
-	"log"
-	"testing"
-	"time"
-
-	_ "gorm.io/driver/mysql"
-)
-
-func TestMysql(t *testing.T) {
-	connArgs := fmt.Sprintf("%s:%s@tcp(%s:%d)/?charset=utf8", "root", "Calong@2015", "localhost", 2306)
-	db, err := sql.Open("mysql", connArgs)
-	if err != nil {
-		fmt.Println(err)
-	}
-	defer db.Close()
-	ctx, cancelfunc := context.WithTimeout(context.Background(), 5*time.Second)
-	defer cancelfunc()
-	res, err := db.ExecContext(ctx, "CREATE DATABASE IF NOT EXISTS "+"songli")
-	if err != nil {
-		log.Printf("Error %s when creating DB\n", err)
-		return
-	}
-
-	// res, err := db.Exec("SHOW DATABASES;")
-	// if err != nil {
-	// 	fmt.Println(err)
-	// }
-	fmt.Println(res)
-}

backend/router/ro_database.go

@@ -24,5 +24,7 @@ func (s *DatabaseRouter) InitDatabaseRouter(Router *gin.RouterGroup) {
 		withRecordRouter.POST("", baseApi.CreateMysql)
 		withRecordRouter.POST("/del", baseApi.DeleteMysql)
 		cmdRouter.POST("/search", baseApi.SearchMysql)
+		cmdRouter.GET("/conf", baseApi.LoadConf)
+		cmdRouter.GET("/status", baseApi.LoadStatus)
 	}
 }

frontend/src/api/interface/database.ts

@@ -19,4 +19,59 @@ export namespace Database {
         permissionIPs: string;
         description: string;
     }
+    export interface MysqlVariables {
+        binlog_cache_size: number;
+        innodb_buffer_pool_size: number;
+        innodb_log_buffer_size: number;
+        join_buffer_size: number;
+        key_buffer_size: number;
+        max_connections: number;
+        max_heap_table_size: number;
+        query_cache_size: number;
+        query_cache_type: string;
+        read_buffer_size: number;
+        read_rnd_buffer_size: number;
+        sort_buffer_size: number;
+        table_open_cache: number;
+        thread_cache_size: number;
+        thread_stack: number;
+        tmp_table_size: number;
+    }
+    export interface MysqlStatus {
+        Aborted_clients: number;
+        Aborted_connects: number;
+        Bytes_received: number;
+        Bytes_sent: number;
+        Com_commit: number;
+        Com_rollback: number;
+        Connections: number;
+        Created_tmp_disk_tables: number;
+        Created_tmp_tables: number;
+        Innodb_buffer_pool_pages_dirty: number;
+        Innodb_buffer_pool_read_requests: number;
+        Innodb_buffer_pool_reads: number;
+        Key_read_requests: number;
+        Key_reads: number;
+        Key_write_requests: number;
+        Key_writes: number;
+        Max_used_connections: number;
+        Open_tables: number;
+        Opened_files: number;
+        Opened_tables: number;
+        Qcache_hits: number;
+        Qcache_inserts: number;
+        Questions: number;
+        Select_full_join: number;
+        Select_range_check: number;
+        Sort_merge_passes: number;
+        Table_locks_waited: number;
+        Threads_cached: number;
+        Threads_connected: number;
+        Threads_created: number;
+        Threads_running: number;
+        Uptime: number;
+        Run: number;
+        File: string;
+        Position: number;
+    }
 }

frontend/src/api/modules/database.ts

@@ -13,3 +13,10 @@ export const addMysqlDB = (params: Database.MysqlDBCreate) => {
 export const deleteMysqlDB = (params: { ids: number[] }) => {
     return http.post(`/databases/del`, params);
 };
+
+export const loadMysqlVariables = () => {
+    return http.get<Database.MysqlVariables>(`/databases/conf`);
+};
+export const loadMysqlStatus = () => {
+    return http.get<Database.MysqlStatus>(`/databases/status`);
+};

frontend/src/lang/modules/zh.ts

@@ -26,6 +26,7 @@ export default {
             handle: '执行',
             expand: '展开',
             log: '日志',
+            back: '返回',
             saveAndEnable: '保存并启用',
         },
         search: {
@@ -159,6 +160,12 @@ export default {
         backupList: '备份列表',
         loadBackup: '导入备份',
         setting: '数据库设置',
+        remoteAccess: '远程访问',
+
+        baseSetting: '基础设置',
+        confChange: '配置修改',
+        currentStatus: '当前状态',
+        runTime: '启动时间',
     },
     container: {
         operatorHelper: '将对选中容器进行 {0} 操作，是否继续？',

frontend/src/styles/common.scss

@@ -123,4 +123,39 @@
   transform-origin: left;
   width: 110%;
   display: inline-block;
+}
+
+.myTable {
+    border-collapse: collapse;
+    font-size: 12px;
+    table-layout: fixed;
+}
+
+.myTable td {
+    width: 35%;
+    padding: 8px;
+    height: 23px;
+    border: 1px solid #383c42;
+    word-wrap: break-word;
+}
+
+.myTable td div {
+    margin-top: 2px
+}
+
+.myTable th {
+    border: 0;
+    height: 30px;
+}
+
+.myTable tr:hover {
+    background-color: #d9dde2;
+}
+
+.myTable tr:first-child:hover {
+    background-color: transparent !important;
+}
+
+.myTable tr td:nth-child(even) {
+    color: #85888e;
 }

frontend/src/views/database/mysql/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <Submenu activeName="mysql" />
-        <el-dropdown size="large" split-button style="margin-top: 20px; margin-bottom: 5px">
+        <el-dropdown size="default" split-button style="margin-top: 20px; margin-bottom: 5px">
             Mysql 版本 {{ version }}
             <template #dropdown>
                 <el-dropdown-menu v-model="version">
@@ -10,14 +10,31 @@
                 </el-dropdown-menu>
             </template>
         </el-dropdown>
-        <el-button style="margin-top: 20px; margin-left: 10px" size="large" icon="Setting" @click="onOpenDialog()">
+        <el-button
+            v-if="!isOnSetting"
+            style="margin-top: 20px; margin-left: 10px"
+            size="default"
+            icon="Setting"
+            @click="onSetting"
+        >
             {{ $t('database.setting') }}
         </el-button>
-        <el-card>
+        <el-button
+            v-if="isOnSetting"
+            style="margin-top: 20px; margin-left: 10px"
+            size="default"
+            icon="Back"
+            @click="isOnSetting = false"
+        >
+            {{ $t('commons.button.back') }}列表
+        </el-button>
+
+        <Setting ref="settingRef" v-if="isOnSetting"></Setting>
+
+        <el-card v-if="!isOnSetting">
             <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" @search="search" :data="data">
                 <template #toolbar>
                     <el-button type="primary" @click="onOpenDialog()">{{ $t('commons.button.create') }}</el-button>
-                    <el-button @click="onOpenDialog()">{{ $t('database.rootPassword') }}</el-button>
                     <el-button @click="onOpenDialog()">phpMyAdmin</el-button>
                     <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
                         {{ $t('commons.button.delete') }}
@@ -51,6 +68,7 @@
 <script lang="ts" setup>
 import ComplexTable from '@/components/complex-table/index.vue';
 import OperatrDialog from '@/views/database/mysql/create/index.vue';
+import Setting from '@/views/database/mysql/setting/index.vue';
 import Submenu from '@/views/database/index.vue';
 import { dateFromat } from '@/utils/util';
 import { onMounted, reactive, ref } from 'vue';
@@ -61,6 +79,7 @@ import { useDeleteData } from '@/hooks/use-delete-data';
 
 const selects = ref<any>([]);
 const version = ref<string>('5.7.39');
+const isOnSetting = ref<boolean>();
 
 const data = ref();
 const paginationConfig = reactive({
@@ -74,6 +93,12 @@ const onOpenDialog = async () => {
     dialogRef.value!.acceptParams();
 };
 
+const settingRef = ref();
+const onSetting = async () => {
+    isOnSetting.value = true;
+    console.log(settingRef.value);
+};
+
 const search = async () => {
     let params = {
         page: paginationConfig.currentPage,

frontend/src/views/database/mysql/setting/index.vue

@@ -0,0 +1,363 @@
+<template>
+    <div class="demo-collapse">
+        <el-card>
+            <el-collapse v-model="activeName" accordion>
+                <el-collapse-item title="基础设置" name="1">
+                    <el-form :model="form" ref="panelFormRef" label-width="120px">
+                        <el-row>
+                            <el-col :span="1"><br /></el-col>
+                            <el-col :span="10">
+                                <el-form-item :label="$t('setting.port')" prop="port">
+                                    <el-input clearable v-model="form.port">
+                                        <template #append>
+                                            <el-button
+                                                @click="onSave(panelFormRef, 'port', form.port)"
+                                                icon="Collection"
+                                            >
+                                                {{ $t('commons.button.save') }}
+                                            </el-button>
+                                        </template>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item :label="$t('setting.password')" prop="password">
+                                    <el-input clearable v-model="form.port">
+                                        <template #append>
+                                            <el-button
+                                                @click="onSave(panelFormRef, 'password', form.password)"
+                                                icon="Collection"
+                                            >
+                                                {{ $t('commons.button.save') }}
+                                            </el-button>
+                                        </template>
+                                    </el-input>
+                                </el-form-item>
+                                <el-form-item :label="$t('database.remoteAccess')" prop="remoteAccess">
+                                    <el-input clearable v-model="form.port">
+                                        <template #append>
+                                            <el-button
+                                                @click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
+                                                icon="Collection"
+                                            >
+                                                {{ $t('commons.button.save') }}
+                                            </el-button>
+                                        </template>
+                                    </el-input>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </el-collapse-item>
+                <el-collapse-item title="配置修改" name="2">
+                    <codemirror
+                        :autofocus="true"
+                        placeholder="None data"
+                        :indent-with-tab="true"
+                        :tabSize="4"
+                        style="margin-top: 10px; max-height: 500px"
+                        :lineWrapping="true"
+                        :matchBrackets="true"
+                        theme="cobalt"
+                        :styleActiveLine="true"
+                        :extensions="extensions"
+                        v-model="mysqlConf"
+                        :readOnly="true"
+                    />
+                    <el-button
+                        type="primary"
+                        style="width: 120px; margin-top: 10px"
+                        @click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
+                    >
+                        {{ $t('commons.button.save') }}
+                    </el-button>
+                </el-collapse-item>
+                <el-collapse-item title="当前状态" name="3">
+                    <el-row :gutter="20">
+                        <el-col :span="1"><br /></el-col>
+                        <el-col :span="6">
+                            <table style="width: 100%" class="myTable">
+                                <tr>
+                                    <td>启动时间</td>
+                                    <td>2022/10/12 14:46:35</td>
+                                </tr>
+                                <tr>
+                                    <td>总连接次数</td>
+                                    <!-- <td>{{ mysqlStatus!.Connections }}</td> -->
+                                </tr>
+                                <tr>
+                                    <td>发送</td>
+                                    <td>{{ (mysqlStatus!.Bytes_sent / 2014).toFixed(2) }} KB</td>
+                                </tr>
+                                <tr>
+                                    <td>接收</td>
+                                    <td>{{ (mysqlStatus!.Bytes_received / 2014).toFixed(2) }} KB</td>
+                                </tr>
+                            </table>
+                        </el-col>
+                        <el-col :span="6">
+                            <table style="width: 100%" class="myTable">
+                                <tr>
+                                    <td>每秒查询</td>
+                                    <td>0</td>
+                                </tr>
+                                <tr>
+                                    <td>每秒事务</td>
+                                    <td>0</td>
+                                </tr>
+                                <tr>
+                                    <td>File</td>
+                                    <td>{{ mysqlStatus!.File }}</td>
+                                </tr>
+                                <tr>
+                                    <td>Position</td>
+                                    <td>{{ mysqlStatus!.Position }}</td>
+                                </tr>
+                            </table>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="1"><br /></el-col>
+                        <el-col :span="12">
+                            <table style="margin-top: 20px; width: 100%" class="myTable">
+                                <tr>
+                                    <td>活动/峰值连接数</td>
+                                    <td>
+                                        {{
+                                            (mysqlStatus!.Threads_running / mysqlStatus!.Max_used_connections).toFixed(
+                                                2,
+                                            )
+                                        }}%
+                                    </td>
+                                    <td>若值过大,增加max_connections</td>
+                                </tr>
+                                <tr>
+                                    <td>线程缓存命中率</td>
+                                    <td></td>
+                                    <td>若过低,增加thread_cache_size</td>
+                                </tr>
+                                <tr>
+                                    <td>索引命中率</td>
+                                    <td>
+                                        {{ (1 - mysqlStatus!.Key_reads / mysqlStatus!.Key_read_requests).toFixed(2) }}%
+                                    </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>若过低,增加innodb_buffer_pool_size</td>
+                                </tr>
+                                <tr>
+                                    <td>查询缓存命中率</td>
+                                    <td>OFF</td>
+                                    <td>若过低,增加query_cache_size</td>
+                                </tr>
+                                <tr>
+                                    <td>创建临时表到磁盘</td>
+                                    <td>13.62%</td>
+                                    <td>若过大,尝试增加tmp_table_size</td>
+                                </tr>
+                                <tr>
+                                    <td>已打开的表</td>
+                                    <td>{{ mysqlStatus!.Open_tables }}</td>
+                                    <td colspan="20">table_open_cache配置值应大于等于此值</td>
+                                </tr>
+                                <tr>
+                                    <td>没有使用索引的量</td>
+                                    <td>{{ mysqlStatus!.Select_full_join }}</td>
+                                    <td>若不为0,请检查数据表的索引是否合理</td>
+                                </tr>
+                                <tr>
+                                    <td>没有索引的JOIN量</td>
+                                    <td>0</td>
+                                    <td>若不为0,请检查数据表的索引是否合理</td>
+                                </tr>
+                                <tr>
+                                    <td>排序后的合并次数</td>
+                                    <td>{{ mysqlStatus!.Sort_merge_passes }}</td>
+                                    <td>若值过大,增加sort_buffer_size</td>
+                                </tr>
+                                <tr>
+                                    <td>锁表次数</td>
+                                    <td>{{ mysqlStatus!.Table_locks_waited }}</td>
+                                    <td>若值过大,请考虑增加您的数据库性能</td>
+                                </tr>
+                            </table>
+                        </el-col>
+                    </el-row>
+                </el-collapse-item>
+                <el-collapse-item title="性能调整" name="4">
+                    <el-card>
+                        <el-form :model="form" ref="panelFormRef" label-width="160px">
+                            <el-row>
+                                <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">
+                                            <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">
+                                            <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">
+                                            <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">
+                                            <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">
+                                            <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">
+                                            <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">
+                                            <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)"
+                                        >
+                                            {{ $t('commons.button.save') }}
+                                        </el-button>
+                                        <el-button
+                                            icon="RefreshLeft"
+                                            size="default"
+                                            @click="onSave(panelFormRef, 'remoteAccess', form.remoteAccess)"
+                                        >
+                                            重启数据库
+                                        </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">
+                                            <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">
+                                            <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">
+                                            <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">
+                                            <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" />
+                                        <span class="input-help">线程池大小</span>
+                                    </el-form-item>
+                                    <el-form-item label="table_open_cache">
+                                        <el-input clearable v-model="form.port" />
+                                        <span class="input-help">表缓存</span>
+                                    </el-form-item>
+                                    <el-form-item label="max_connections">
+                                        <el-input clearable v-model="form.port" />
+                                        <span class="input-help">最大连接数</span>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                        </el-form>
+                    </el-card>
+                </el-collapse-item>
+                <el-collapse-item title="日志" name="4"></el-collapse-item>
+            </el-collapse>
+        </el-card>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { FormInstance } from 'element-plus';
+import { onMounted, 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';
+
+const extensions = [javascript(), oneDark];
+const activeName = ref('1');
+
+const form = reactive({
+    port: '',
+    password: '',
+    remoteAccess: '',
+    sessionTimeout: 0,
+    localTime: '',
+    panelName: '',
+    theme: '',
+    language: '',
+    complexityVerification: '',
+});
+const panelFormRef = ref<FormInstance>();
+const mysqlConf = ref();
+const mysqlVariables = ref();
+const mysqlStatus = ref<Database.MysqlStatus>();
+
+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;
+};
+
+onMounted(() => {
+    console.log('dasdasd');
+    loadMysqlConf('/opt/1Panel/conf/mysql.conf');
+    loadStatus();
+    loadVariables();
+});
+</script>