feat: 完成 mysql 性能优化功能及国际化

backend/app/api/v1/databse_mysql.go

@@ -42,6 +42,23 @@ func (b *BaseApi) UpdateMysql(c *gin.Context) {
 	helper.SuccessWithData(c, nil)
 }
 
+func (b *BaseApi) UpdateMysqlVariables(c *gin.Context) {
+	var req dto.MysqlVariablesUpdate
+	if err := c.ShouldBindJSON(&req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
+		return
+	}
+	if err := global.VALID.Struct(req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrBadRequest, constant.ErrTypeInvalidParams, err)
+		return
+	}
+	if err := mysqlService.UpdateVariables(req); err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+	helper.SuccessWithData(c, nil)
+}
+
 func (b *BaseApi) SearchMysql(c *gin.Context) {
 	var req dto.SearchWithPage
 	if err := c.ShouldBindJSON(&req); err != nil {

backend/app/dto/database.go

@@ -80,6 +80,25 @@ type MysqlVariables struct {
 	Tmp_tableSize        string `json:"tmp_table_size"`
 }
 
+type MysqlVariablesUpdate struct {
+	Version              string `json:"version" validate:"required"`
+	KeyBufferSize        int64  `json:"key_buffer_size" validate:"required"`
+	QueryCacheSize       int64  `json:"query_cache_size" validate:"required"`
+	TmpTableSize         int64  `json:"tmp_table_size" validate:"required"`
+	InnodbBufferPoolSize int64  `json:"innodb_buffer_pool_size" validate:"required"`
+	InnodbLogBufferSize  int64  `json:"innodb_log_buffer_size" validate:"required"`
+	SortBufferSize       int64  `json:"sort_buffer_size" validate:"required"`
+	ReadBufferSize       int64  `json:"read_buffer_size" validate:"required"`
+
+	ReadRndBufferSize int64 `json:"read_rnd_buffer_size" validate:"required"`
+	JoinBufferSize    int64 `json:"join_buffer_size" validate:"required"`
+	ThreadStack       int64 `json:"thread_stack" validate:"required"`
+	BinlogCachSize    int64 `json:"binlog_cache_size" validate:"required"`
+	ThreadCacheSize   int64 `json:"thread_cache_size" validate:"required"`
+	TableOpenCache    int64 `json:"table_open_cache" validate:"required"`
+	MaxConnections    int64 `json:"max_connections" validate:"required"`
+}
+
 type ChangeDBInfo struct {
 	ID        uint   `json:"id" validate:"required"`
 	Operation string `json:"operation" validate:"required,oneof=password privilege"`

backend/app/service/database_mysql.go

@@ -20,6 +20,7 @@ type IMysqlService interface {
 	SearchWithPage(search dto.SearchWithPage) (int64, interface{}, error)
 	Create(mysqlDto dto.MysqlDBCreate) error
 	ChangeInfo(info dto.ChangeDBInfo) error
+	UpdateVariables(variables dto.MysqlVariablesUpdate) error
 	Delete(ids []uint) error
 	LoadStatus(version string) (*dto.MysqlStatus, error)
 	LoadVariables(version string) (*dto.MysqlVariables, error)
@@ -164,6 +165,60 @@ func (u *MysqlService) ChangeInfo(info dto.ChangeDBInfo) error {
 	return nil
 }
 
+func (u *MysqlService) UpdateVariables(variables dto.MysqlVariablesUpdate) error {
+	db, err := newDatabaseClient()
+	if err != nil {
+		return err
+	}
+	defer db.Close()
+
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL key_buffer_size=%d", variables.KeyBufferSize)); err != nil {
+		return err
+	}
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL query_cache_size=%d", variables.QueryCacheSize)); err != nil {
+		return err
+	}
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL tmp_table_size=%d", variables.TmpTableSize)); err != nil {
+		return err
+	}
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL innodb_buffer_pool_size=%d", variables.InnodbBufferPoolSize)); err != nil {
+		return err
+	}
+	// if _, err := db.Exec(fmt.Sprintf("SET GLOBAL innodb_log_buffer_size=%d", variables.InnodbLogBufferSize)); err != nil {
+	// 	return err
+	// }
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL sort_buffer_size=%d", variables.SortBufferSize)); err != nil {
+		return err
+	}
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL read_buffer_size=%d", variables.ReadBufferSize)); err != nil {
+		return err
+	}
+
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL read_rnd_buffer_size=%d", variables.ReadRndBufferSize)); err != nil {
+		return err
+	}
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL join_buffer_size=%d", variables.JoinBufferSize)); err != nil {
+		return err
+	}
+	// if _, err := db.Exec(fmt.Sprintf("SET GLOBAL thread_stack=%d", variables.ThreadStack)); err != nil {
+	// 	return err
+	// }
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL binlog_cache_size=%d", variables.BinlogCachSize)); err != nil {
+		return err
+	}
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL thread_cache_size=%d", variables.ThreadCacheSize)); err != nil {
+		return err
+	}
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL table_open_cache=%d", variables.TableOpenCache)); err != nil {
+		return err
+	}
+	if _, err := db.Exec(fmt.Sprintf("SET GLOBAL max_connections=%d", variables.MaxConnections)); err != nil {
+		return err
+	}
+
+	return nil
+}
+
 func (u *MysqlService) LoadVariables(version string) (*dto.MysqlVariables, error) {
 	db, err := newDatabaseClient()
 	if err != nil {

backend/app/service/database_test.go

@@ -3,8 +3,10 @@ package service
 import (
 	"database/sql"
 	"fmt"
+	"reflect"
 	"testing"
 
+	"github.com/1Panel-dev/1Panel/backend/app/dto"
 	_ "github.com/go-sql-driver/mysql"
 )
 
@@ -16,18 +18,54 @@ func TestMysql(t *testing.T) {
 	}
 	defer db.Close()
 
-	rows, err := db.Query("show master status")
+	rows, err := db.Query("show variables")
 	if err != nil {
 		fmt.Println(err)
 	}
+	variableMap := make(map[string]int)
 
-	masterRows := make([]string, 5)
 	for rows.Next() {
-		if err := rows.Scan(&masterRows[0], &masterRows[1], &masterRows[2], &masterRows[3], &masterRows[4]); err != nil {
+		var variableName string
+		var variableValue int
+		if err := rows.Scan(&variableName, &variableValue); err != nil {
 			fmt.Println(err)
 		}
+		variableMap[variableName] = variableValue
 	}
-	for k, v := range masterRows {
+	for k, v := range variableMap {
 		fmt.Println(k, v)
 	}
 }
+
+func TestMs(t *testing.T) {
+	db, err := newDatabaseClient()
+	if err != nil {
+		fmt.Println(err)
+	}
+	defer db.Close()
+
+	variables := dto.MysqlVariablesUpdate{
+		Version:              "5.7.39",
+		KeyBufferSize:        8388608,
+		QueryCacheSize:       1048576,
+		TmpTableSize:         16777216,
+		InnodbBufferPoolSize: 134217728,
+		InnodbLogBufferSize:  16777216,
+		SortBufferSize:       262144,
+		ReadBufferSize:       131072,
+
+		ReadRndBufferSize: 262144,
+		JoinBufferSize:    262144,
+		ThreadStack:       262144,
+		BinlogCachSize:    32768,
+		ThreadCacheSize:   9,
+		TableOpenCache:    2000,
+		MaxConnections:    150,
+	}
+
+	v := reflect.ValueOf(variables)
+	typeOfS := v.Type()
+	for i := 0; i < v.NumField(); i++ {
+		fmt.Printf("SET GLOBAL %s=%d \n", typeOfS.Field(i).Name, v.Field(i).Interface())
+	}
+}

backend/router/ro_database.go

@@ -24,6 +24,7 @@ func (s *DatabaseRouter) InitDatabaseRouter(Router *gin.RouterGroup) {
 		withRecordRouter.POST("", baseApi.CreateMysql)
 		withRecordRouter.PUT("/:id", baseApi.UpdateMysql)
 		withRecordRouter.POST("/del", baseApi.DeleteMysql)
+		withRecordRouter.POST("/variables/update", baseApi.UpdateMysqlVariables)
 		cmdRouter.POST("/search", baseApi.SearchMysql)
 		cmdRouter.GET("/conf", baseApi.LoadConf)
 		cmdRouter.GET("/status", baseApi.LoadStatus)

frontend/src/api/interface/database.ts

@@ -19,6 +19,7 @@ export namespace Database {
         description: string;
     }
     export interface MysqlVariables {
+        version: string;
         binlog_cache_size: number;
         innodb_buffer_pool_size: number;
         innodb_log_buffer_size: number;

frontend/src/api/modules/database.ts

@@ -12,6 +12,9 @@ export const addMysqlDB = (params: Database.MysqlDBCreate) => {
 export const updateMysqlDBInfo = (params: Database.ChangeInfo) => {
     return http.put(`/databases/${params.id}`, params);
 };
+export const updateMysqlVariables = (params: Database.MysqlVariables) => {
+    return http.post(`/databases/variables/update`, params);
+};
 export const deleteMysqlDB = (params: { ids: number[] }) => {
     return http.post(`/databases/del`, params);
 };

frontend/src/lang/modules/zh.ts

@@ -165,8 +165,54 @@ export default {
 
         baseSetting: '基础设置',
         confChange: '配置修改',
+
         currentStatus: '当前状态',
         runTime: '启动时间',
+        connections: '总连接数',
+        bytesSent: '发送',
+        bytesReceived: '接收',
+        queryPerSecond: '每秒查询',
+        txPerSecond: '每秒事务',
+        connInfo: '活动/峰值连接数',
+        connInfoHelper: '若值过大，增加 max_connections',
+        threadCacheHit: '线程缓存命中率',
+        threadCacheHitHelper: '若过低,增加 thread_cache_size',
+        indexHit: '索引命中率',
+        indexHitHelper: '若过低,增加 key_buffer_size',
+        innodbIndexHit: 'Innodb 索引命中率',
+        innodbIndexHitHelper: '若过低,增加 innodb_buffer_pool_size',
+        cacheHit: '查询缓存命中率',
+        cacheHitHelper: '若过低,增加 query_cache_size',
+        tmpTableToDB: '创建临时表到磁盘',
+        tmpTableToDBHelper: '若过大,尝试增加 tmp_table_size',
+        openTables: '已打开的表',
+        openTablesHelper: 'table_open_cache 配置值应大于等于此值',
+        selectFullJoin: '没有使用索引的量',
+        selectFullJoinHelper: '若不为0，请检查数据表的索引是否合理',
+        selectRangeCheck: '没有索引的 JOIN 量',
+        selectRangeCheckHelper: '若不为0，请检查数据表的索引是否合理',
+        sortMergePasses: '排序后的合并次数',
+        sortMergePassesHelper: '若值过大，增加sort_buffer_size',
+        tableLocksWaited: '锁表次数',
+        tableLocksWaitedHelper: '若值过大，请考虑增加您的数据库性能',
+
+        performanceTuning: '性能调整',
+        optimizationScheme: '优化方案',
+        keyBufferSizeHelper: '用于索引的缓冲区大小',
+        queryCacheSizeHelper: '查询缓存，不开启请设为0',
+        tmpTableSizeHelper: '临时表缓存大小',
+        innodbBufferPoolSizeHelper: 'Innodb 缓冲区大小',
+        innodbLogBufferSizeHelper: 'Innodb 日志缓冲区大小',
+        sortBufferSizeHelper: '* 连接数, 每个线程排序的缓冲大小',
+        readBufferSizeHelper: '* 连接数, 读入缓冲区大小',
+        readRndBufferSizeHelper: '* 连接数, 随机读取缓冲区大小',
+        joinBufferSizeHelper: '* 连接数, 关联表缓存大小',
+        threadStackelper: '* 连接数, 每个线程的堆栈大小',
+        binlogCacheSizeHelper: '* 连接数, 二进制日志缓存大小(4096的倍数)',
+        threadCacheSizeHelper: '线程池大小',
+        tableOpenCacheHelper: '表缓存',
+        maxConnectionsHelper: '最大连接数',
+        restart: '重启数据库',
     },
     container: {
         operatorHelper: '将对选中容器进行 {0} 操作，是否继续？',

frontend/src/views/database/mysql/setting/helper.ts

@@ -0,0 +1,103 @@
+export const planOptions = [
+    {
+        id: 1,
+        title: '1-2GB',
+        data: {
+            version: '',
+            key_buffer_size: 128,
+            query_cache_size: 64,
+            tmp_table_size: 64,
+            innodb_buffer_pool_size: 256,
+            sort_buffer_size: 768,
+            read_buffer_size: 768,
+            read_rnd_buffer_size: 512,
+            join_buffer_size: 1024,
+            thread_stack: 256,
+            binlog_cache_size: 64,
+            thread_cache_size: 64,
+            table_open_cache: 128,
+            max_connections: 100,
+        },
+    },
+    {
+        id: 2,
+        title: '2-4GB',
+        data: {
+            version: '',
+            key_buffer_size: 256,
+            query_cache_size: 128,
+            tmp_table_size: 384,
+            innodb_buffer_pool_size: 384,
+            sort_buffer_size: 768,
+            read_buffer_size: 768,
+            read_rnd_buffer_size: 512,
+            join_buffer_size: 2048,
+            thread_stack: 256,
+            binlog_cache_size: 64,
+            thread_cache_size: 96,
+            table_open_cache: 192,
+            max_connections: 200,
+        },
+    },
+    {
+        id: 3,
+        title: '4-8GB',
+        data: {
+            version: '',
+            key_buffer_size: 384,
+            query_cache_size: 192,
+            tmp_table_size: 512,
+            innodb_buffer_pool_size: 512,
+            sort_buffer_size: 1024,
+            read_buffer_size: 1024,
+            read_rnd_buffer_size: 768,
+            join_buffer_size: 2048,
+            thread_stack: 256,
+            binlog_cache_size: 128,
+            thread_cache_size: 128,
+            table_open_cache: 384,
+            max_connections: 300,
+        },
+    },
+    {
+        id: 4,
+        title: '8-16GB',
+        data: {
+            version: '',
+            key_buffer_size: 512,
+            query_cache_size: 256,
+            tmp_table_size: 1024,
+            innodb_buffer_pool_size: 1024,
+            sort_buffer_size: 2048,
+            read_buffer_size: 2048,
+            read_rnd_buffer_size: 1024,
+            join_buffer_size: 4096,
+            thread_stack: 384,
+            binlog_cache_size: 192,
+            thread_cache_size: 192,
+            table_open_cache: 1024,
+            max_connections: 400,
+        },
+    },
+    {
+        id: 5,
+        title: '16-32GB',
+        data: {
+            version: '',
+            key_buffer_size: 1024,
+            query_cache_size: 384,
+            tmp_table_size: 2048,
+            innodb_buffer_pool_size: 4096,
+            innodb_log_buffer_size: 32,
+            sort_buffer_size: 4096,
+            read_buffer_size: 4096,
+            read_rnd_buffer_size: 2048,
+            join_buffer_size: 8192,
+            thread_stack: 512,
+            binlog_cache_size: 256,
+            thread_cache_size: 256,
+            table_open_cache: 2048,
+            max_connections: 500,
+        },
+    },
+];

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

@@ -2,7 +2,7 @@
     <div class="demo-collapse" v-if="onSetting">
         <el-card>
             <el-collapse v-model="activeName" accordion>
-                <el-collapse-item title="基础设置" name="1">
+                <el-collapse-item :title="$t('database.baseSetting')" name="1">
                     <el-form :model="form" ref="panelFormRef" label-width="120px">
                         <el-row>
                             <el-col :span="1"><br /></el-col>
@@ -47,7 +47,7 @@
                         </el-row>
                     </el-form>
                 </el-collapse-item>
-                <el-collapse-item title="配置修改" name="2">
+                <el-collapse-item :title="$t('database.confChange')" name="2">
                     <codemirror
                         :autofocus="true"
                         placeholder="None data"
@@ -70,25 +70,25 @@
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </el-collapse-item>
-                <el-collapse-item title="当前状态" name="3">
+                <el-collapse-item :title="$t('database.currentStatus')" 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>{{ $t('database.runTime') }}</td>
                                     <td>{{ mysqlStatus.run }}</td>
                                 </tr>
                                 <tr>
-                                    <td>总连接次数</td>
+                                    <td>{{ $t('database.connections') }}</td>
                                     <td>{{ mysqlStatus.connections }}</td>
                                 </tr>
                                 <tr>
-                                    <td>发送</td>
+                                    <td>{{ $t('database.bytesSent') }}</td>
                                     <td>{{ mysqlStatus!.bytesSent }}</td>
                                 </tr>
                                 <tr>
-                                    <td>接收</td>
+                                    <td>{{ $t('database.bytesReceived') }}</td>
                                     <td>{{ mysqlStatus!.bytesReceived }}</td>
                                 </tr>
                             </table>
@@ -96,11 +96,11 @@
                         <el-col :span="6">
                             <table style="width: 100%" class="myTable">
                                 <tr>
-                                    <td>每秒查询</td>
+                                    <td>{{ $t('database.queryPerSecond') }}</td>
                                     <td>{{ mysqlStatus!.queryPerSecond }}</td>
                                 </tr>
                                 <tr>
-                                    <td>每秒事务</td>
+                                    <td>{{ $t('database.queryPerSecond') }}</td>
                                     <td>{{ mysqlStatus!.txPerSecond }}</td>
                                 </tr>
                                 <tr>
@@ -119,157 +119,184 @@
                         <el-col :span="12">
                             <table style="margin-top: 20px; width: 100%" class="myTable">
                                 <tr>
-                                    <td>活动/峰值连接数</td>
+                                    <td>{{ $t('database.queryPerSecond') }}</td>
                                     <td>{{ mysqlStatus!.connInfo }}</td>
-                                    <td>若值过大,增加max_connections</td>
+                                    <td>{{ $t('database.connInfoHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>线程缓存命中率</td>
+                                    <td>{{ $t('database.threadCacheHit') }}</td>
                                     <td>{{ mysqlStatus!.threadCacheHit }}</td>
-                                    <td>若过低,增加thread_cache_size</td>
+                                    <td>{{ $t('database.threadCacheHitHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>索引命中率</td>
+                                    <td>{{ $t('database.indexHit') }}</td>
                                     <td>{{ mysqlStatus!.indexHit }}</td>
-                                    <td>若过低,增加key_buffer_size</td>
+                                    <td>{{ $t('database.indexHitHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>Innodb 索引命中率</td>
+                                    <td>{{ $t('database.innodbIndexHit') }}</td>
                                     <td>{{ mysqlStatus!.innodbIndexHit }}</td>
-                                    <td>若过低,增加innodb_buffer_pool_size</td>
+                                    <td>{{ $t('database.innodbIndexHitHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>查询缓存命中率</td>
+                                    <td>{{ $t('database.cacheHit') }}</td>
                                     <td>{{ mysqlStatus!.cacheHit }}</td>
-                                    <td>若过低,增加query_cache_size</td>
+                                    <td>{{ $t('database.cacheHitHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>创建临时表到磁盘</td>
+                                    <td>{{ $t('database.tmpTableToDB') }}</td>
                                     <td>{{ mysqlStatus!.tmpTableToDB }}</td>
-                                    <td>若过大,尝试增加tmp_table_size</td>
+                                    <td>{{ $t('database.tmpTableToDBHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>已打开的表</td>
+                                    <td>{{ $t('database.openTables') }}</td>
                                     <td>{{ mysqlStatus!.openTables }}</td>
-                                    <td>table_open_cache配置值应大于等于此值</td>
+                                    <td>{{ $t('database.openTablesHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>没有使用索引的量</td>
+                                    <td>{{ $t('database.selectFullJoin') }}</td>
                                     <td>{{ mysqlStatus!.selectFullJoin }}</td>
-                                    <td>若不为0,请检查数据表的索引是否合理</td>
+                                    <td>{{ $t('database.selectFullJoinHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>没有索引的JOIN量</td>
+                                    <td>{{ $t('database.selectRangeCheck') }}</td>
                                     <td>{{ mysqlStatus!.selectRangeCheck }}</td>
-                                    <td>若不为0,请检查数据表的索引是否合理</td>
+                                    <td>{{ $t('database.selectRangeCheckHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>排序后的合并次数</td>
+                                    <td>{{ $t('database.sortMergePasses') }}</td>
                                     <td>{{ mysqlStatus!.sortMergePasses }}</td>
-                                    <td>若值过大,增加sort_buffer_size</td>
+                                    <td>{{ $t('database.sortMergePassesHelper') }}</td>
                                 </tr>
                                 <tr>
-                                    <td>锁表次数</td>
+                                    <td>{{ $t('database.tableLocksWaited') }}</td>
                                     <td>{{ mysqlStatus!.tableLocksWaited }}</td>
-                                    <td>若值过大,请考虑增加您的数据库性能</td>
+                                    <td>{{ $t('database.tableLocksWaitedHelper') }}</td>
                                 </tr>
                             </table>
                         </el-col>
                     </el-row>
                 </el-collapse-item>
-                <el-collapse-item title="性能调整" name="4">
+                <el-collapse-item :title="$t('database.performanceTuning')" name="4">
                     <el-card>
-                        <el-form :model="form" ref="panelFormRef" label-width="160px">
+                        <el-form
+                            :model="mysqlVariables"
+                            :rules="variablesRules"
+                            ref="variableFormRef"
+                            label-width="160px"
+                        >
                             <el-row>
                                 <el-col :span="1"><br /></el-col>
-                                <el-col :span="6">
+                                <el-col :span="9">
-                                    <el-form-item label="key_buffer_size">
+                                    <el-form-item :label="$t('database.optimizationScheme')">
-                                        <el-input clearable v-model="mysqlVariables.key_buffer_size">
+                                        <el-select @change="changePlan" clearable v-model="plan">
+                                            <el-option
+                                                v-for="item in planOptions"
+                                                :key="item.id"
+                                                :label="item.title"
+                                                :value="item.id"
+                                            />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                            <el-row>
+                                <el-col :span="1"><br /></el-col>
+                                <el-col :span="9">
+                                    <el-form-item label="key_buffer_size" prop="key_buffer_size">
+                                        <el-input clearable v-model.number="mysqlVariables.key_buffer_size">
                                             <template #append>MB</template>
                                         </el-input>
-                                        <span class="input-help">用于索引的缓冲区大小</span>
+                                        <span class="input-help">{{ $t('database.keyBufferSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="query_cache_size">
+                                    <el-form-item label="query_cache_size" prop="query_cache_size">
-                                        <el-input clearable v-model="mysqlVariables.query_cache_size">
+                                        <el-input clearable v-model.number="mysqlVariables.query_cache_size">
                                             <template #append>MB</template>
                                         </el-input>
-                                        <span class="input-help">查询缓存,不开启请设为0</span>
+                                        <span class="input-help">{{ $t('database.queryCacheSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="tmp_table_size">
+                                    <el-form-item label="tmp_table_size" prop="tmp_table_size">
-                                        <el-input clearable v-model="mysqlVariables.tmp_table_size">
+                                        <el-input clearable v-model.number="mysqlVariables.tmp_table_size">
                                             <template #append>MB</template>
                                         </el-input>
-                                        <span class="input-help">临时表缓存大小</span>
+                                        <span class="input-help">{{ $t('database.tmpTableSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="innodb_buffer_pool_size">
+                                    <el-form-item label="innodb_buffer_pool_size" prop="innodb_buffer_pool_size">
-                                        <el-input clearable v-model="mysqlVariables.innodb_buffer_pool_size">
+                                        <el-input clearable v-model.number="mysqlVariables.innodb_buffer_pool_size">
                                             <template #append>MB</template>
                                         </el-input>
-                                        <span class="input-help">Innodb缓冲区大小</span>
+                                        <span class="input-help">{{ $t('database.innodbBufferPoolSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="innodb_log_buffer_size">
+                                    <el-form-item label="innodb_log_buffer_size" prop="innodb_log_buffer_size">
-                                        <el-input clearable v-model="mysqlVariables.innodb_log_buffer_size">
+                                        <el-input clearable v-model.number="mysqlVariables.innodb_log_buffer_size">
                                             <template #append>MB</template>
                                         </el-input>
-                                        <span class="input-help">Innodb日志缓冲区大小</span>
+                                        <span class="input-help">{{ $t('database.innodbLogBufferSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="sort_buffer_size">
+                                    <el-form-item label="sort_buffer_size" prop="sort_buffer_size">
-                                        <el-input clearable v-model="mysqlVariables.sort_buffer_size">
+                                        <el-input clearable v-model.number="mysqlVariables.sort_buffer_size">
                                             <template #append>KB</template>
                                         </el-input>
-                                        <span class="input-help">* 连接数, 每个线程排序的缓冲大小</span>
+                                        <span class="input-help">{{ $t('database.sortBufferSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="read_buffer_size">
+                                    <el-form-item label="read_buffer_size" prop="read_buffer_size">
-                                        <el-input clearable v-model="mysqlVariables.read_buffer_size">
+                                        <el-input clearable v-model.number="mysqlVariables.read_buffer_size">
                                             <template #append>KB</template>
                                         </el-input>
-                                        <span class="input-help">* 连接数, 读入缓冲区大小</span>
+                                        <span class="input-help">{{ $t('database.readBufferSizeHelper') }}</span>
                                     </el-form-item>
 
                                     <el-form-item>
-                                        <el-button icon="Collection" type="primary" size="default">
+                                        <el-button
+                                            icon="Collection"
+                                            @click="onSaveVariables(variableFormRef)"
+                                            type="primary"
+                                            size="default"
+                                        >
                                             {{ $t('commons.button.save') }}
                                         </el-button>
-                                        <el-button icon="RefreshLeft" size="default">重启数据库</el-button>
+                                        <el-button icon="RefreshLeft" size="default">
+                                            {{ $t('database.restart') }}
+                                        </el-button>
                                     </el-form-item>
                                 </el-col>
                                 <el-col :span="2"><br /></el-col>
-                                <el-col :span="6">
+                                <el-col :span="9">
-                                    <el-form-item label="read_rnd_buffer_size">
+                                    <el-form-item label="read_rnd_buffer_size" prop="read_rnd_buffer_size">
-                                        <el-input clearable v-model="mysqlVariables.read_rnd_buffer_size">
+                                        <el-input clearable v-model.number="mysqlVariables.read_rnd_buffer_size">
                                             <template #append>KB</template>
                                         </el-input>
-                                        <span class="input-help">* 连接数, 随机读取缓冲区大小</span>
+                                        <span class="input-help">{{ $t('database.readRndBufferSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="join_buffer_size">
+                                    <el-form-item label="join_buffer_size" prop="join_buffer_size">
-                                        <el-input clearable v-model="mysqlVariables.join_buffer_size">
+                                        <el-input clearable v-model.number="mysqlVariables.join_buffer_size">
                                             <template #append>KB</template>
                                         </el-input>
-                                        <span class="input-help">* 连接数, 关联表缓存大小</span>
+                                        <span class="input-help">{{ $t('database.joinBufferSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="thread_stack">
+                                    <el-form-item label="thread_stack" prop="thread_stack">
-                                        <el-input clearable v-model="mysqlVariables.thread_stack">
+                                        <el-input clearable v-model.number="mysqlVariables.thread_stack">
                                             <template #append>KB</template>
                                         </el-input>
-                                        <span class="input-help">* 连接数, 每个线程的堆栈大小</span>
+                                        <span class="input-help">{{ $t('database.threadStackelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="binlog_cache_size">
+                                    <el-form-item label="binlog_cache_size" prop="binlog_cache_size">
-                                        <el-input clearable v-model="mysqlVariables.binlog_cache_size">
+                                        <el-input clearable v-model.number="mysqlVariables.binlog_cache_size">
                                             <template #append>KB</template>
                                         </el-input>
-                                        <span class="input-help">* 连接数, 二进制日志缓存大小(4096的倍数)</span>
+                                        <span class="input-help">{{ $t('database.binlogCacheSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="thread_cache_size">
+                                    <el-form-item label="thread_cache_size" prop="thread_cache_size">
-                                        <el-input clearable v-model="mysqlVariables.thread_cache_size" />
+                                        <el-input clearable v-model.number="mysqlVariables.thread_cache_size" />
-                                        <span class="input-help">线程池大小</span>
+                                        <span class="input-help">{{ $t('database.threadCacheSizeHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="table_open_cache">
+                                    <el-form-item label="table_open_cache" prop="table_open_cache">
-                                        <el-input clearable v-model="mysqlVariables.table_open_cache" />
+                                        <el-input clearable v-model.number="mysqlVariables.table_open_cache" />
-                                        <span class="input-help">表缓存</span>
+                                        <span class="input-help">{{ $t('database.tableOpenCacheHelper') }}</span>
                                     </el-form-item>
-                                    <el-form-item label="max_connections">
+                                    <el-form-item label="max_connections" prop="max_connections">
-                                        <el-input clearable v-model="mysqlVariables.max_connections" />
+                                        <el-input clearable v-model.number="mysqlVariables.max_connections" />
-                                        <span class="input-help">最大连接数</span>
+                                        <span class="input-help">{{ $t('database.maxConnectionsHelper') }}</span>
                                     </el-form-item>
                                 </el-col>
                             </el-row>
@@ -283,15 +310,17 @@
 </template>
 
 <script lang="ts" setup>
-import { FormInstance } from 'element-plus';
+import { ElMessage, FormInstance } from 'element-plus';
 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 { planOptions } from './helper';
-import { Database } from '@/api/interface/database';
+import { loadMysqlStatus, loadMysqlVariables, updateMysqlVariables } from '@/api/modules/database';
 import { computeSize } from '@/utils/util';
+import { Rules } from '@/global/form-rules';
+import i18n from '@/lang';
 
 const extensions = [javascript(), oneDark];
 const activeName = ref('1');
@@ -309,7 +338,12 @@ const form = reactive({
 });
 const panelFormRef = ref<FormInstance>();
 const mysqlConf = ref();
-const mysqlVariables = reactive<Database.MysqlVariables>({
+
+const plan = ref();
+
+const variableFormRef = ref<FormInstance>();
+let mysqlVariables = reactive({
+    version: '',
     key_buffer_size: 0,
     query_cache_size: 0,
     tmp_table_size: 0,
@@ -325,6 +359,22 @@ const mysqlVariables = reactive<Database.MysqlVariables>({
     table_open_cache: 0,
     max_connections: 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],
+});
 let mysqlStatus = reactive({
     run: 0,
     connections: 0,
@@ -350,12 +400,17 @@ let mysqlStatus = reactive({
 });
 
 const onSetting = ref<boolean>(false);
+const paramVersion = ref();
 
-const acceptParams = (): void => {
+interface DialogProps {
+    version: string;
+}
+const acceptParams = (params: DialogProps): void => {
     onSetting.value = true;
     loadMysqlConf('/opt/1Panel/conf/mysql.conf');
     loadStatus();
     loadVariables();
+    paramVersion.value = params.version;
 };
 const onClose = (): void => {
     onSetting.value = false;
@@ -372,21 +427,70 @@ const loadMysqlConf = async (path: string) => {
 
 const loadVariables = async () => {
     const res = await loadMysqlVariables();
-    mysqlVariables.key_buffer_size = res.data.key_buffer_size / 1024 / 1024;
+    mysqlVariables.key_buffer_size = Number(res.data.key_buffer_size) / 1024 / 1024;
-    mysqlVariables.query_cache_size = res.data.query_cache_size / 1024 / 1024;
+    mysqlVariables.query_cache_size = Number(res.data.query_cache_size) / 1024 / 1024;
-    mysqlVariables.tmp_table_size = res.data.tmp_table_size / 1024 / 1024;
+    mysqlVariables.tmp_table_size = Number(res.data.tmp_table_size) / 1024 / 1024;
-    mysqlVariables.innodb_buffer_pool_size = res.data.innodb_buffer_pool_size / 1024 / 1024;
+    mysqlVariables.innodb_buffer_pool_size = Number(res.data.innodb_buffer_pool_size) / 1024 / 1024;
-    mysqlVariables.innodb_log_buffer_size = res.data.innodb_log_buffer_size / 1024 / 1024;
+    mysqlVariables.innodb_log_buffer_size = Number(res.data.innodb_log_buffer_size) / 1024 / 1024;
 
-    mysqlVariables.sort_buffer_size = res.data.sort_buffer_size / 1024;
+    mysqlVariables.sort_buffer_size = Number(res.data.sort_buffer_size) / 1024;
-    mysqlVariables.read_buffer_size = res.data.read_buffer_size / 1024;
+    mysqlVariables.read_buffer_size = Number(res.data.read_buffer_size) / 1024;
-    mysqlVariables.read_rnd_buffer_size = res.data.read_rnd_buffer_size / 1024;
+    mysqlVariables.read_rnd_buffer_size = Number(res.data.read_rnd_buffer_size) / 1024;
-    mysqlVariables.join_buffer_size = res.data.join_buffer_size / 1024;
+    mysqlVariables.join_buffer_size = Number(res.data.join_buffer_size) / 1024;
-    mysqlVariables.thread_stack = res.data.thread_stack / 1024;
+    mysqlVariables.thread_stack = Number(res.data.thread_stack) / 1024;
-    mysqlVariables.binlog_cache_size = res.data.binlog_cache_size / 1024;
+    mysqlVariables.binlog_cache_size = Number(res.data.binlog_cache_size) / 1024;
-    mysqlVariables.thread_cache_size = res.data.thread_cache_size;
+    mysqlVariables.thread_cache_size = Number(res.data.thread_cache_size);
-    mysqlVariables.table_open_cache = res.data.table_open_cache;
+    mysqlVariables.table_open_cache = Number(res.data.table_open_cache);
-    mysqlVariables.max_connections = res.data.max_connections;
+    mysqlVariables.max_connections = Number(res.data.max_connections);
+};
+
+const changePlan = async () => {
+    for (const item of planOptions) {
+        if (item.id === plan.value) {
+            mysqlVariables.key_buffer_size = item.data.key_buffer_size;
+            mysqlVariables.query_cache_size = item.data.query_cache_size;
+            mysqlVariables.tmp_table_size = item.data.tmp_table_size;
+            mysqlVariables.innodb_buffer_pool_size = item.data.innodb_buffer_pool_size;
+
+            mysqlVariables.sort_buffer_size = item.data.sort_buffer_size;
+            mysqlVariables.read_buffer_size = item.data.read_buffer_size;
+            mysqlVariables.read_rnd_buffer_size = item.data.read_rnd_buffer_size;
+            mysqlVariables.join_buffer_size = item.data.join_buffer_size;
+            mysqlVariables.thread_stack = item.data.thread_stack;
+            mysqlVariables.binlog_cache_size = item.data.binlog_cache_size;
+            mysqlVariables.thread_cache_size = item.data.thread_cache_size;
+            mysqlVariables.table_open_cache = item.data.table_open_cache;
+            mysqlVariables.max_connections = item.data.max_connections;
+            break;
+        }
+    }
+};
+
+const onSaveVariables = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        let itemForm = {
+            version: paramVersion.value,
+            key_buffer_size: mysqlVariables.key_buffer_size * 1024 * 1024,
+            query_cache_size: mysqlVariables.query_cache_size * 1024 * 1024,
+            tmp_table_size: mysqlVariables.tmp_table_size * 1024 * 1024,
+            innodb_buffer_pool_size: mysqlVariables.innodb_buffer_pool_size * 1024 * 1024,
+            innodb_log_buffer_size: mysqlVariables.innodb_log_buffer_size * 1024 * 1024,
+
+            sort_buffer_size: mysqlVariables.sort_buffer_size * 1024,
+            read_buffer_size: mysqlVariables.read_buffer_size * 1024,
+            read_rnd_buffer_size: mysqlVariables.read_rnd_buffer_size * 1024,
+            join_buffer_size: mysqlVariables.join_buffer_size * 1024,
+            thread_stack: mysqlVariables.thread_stack * 1024,
+            binlog_cache_size: mysqlVariables.binlog_cache_size * 1024,
+            thread_cache_size: mysqlVariables.thread_cache_size,
+            table_open_cache: mysqlVariables.table_open_cache,
+            max_connections: mysqlVariables.max_connections,
+        };
+        await updateMysqlVariables(itemForm);
+        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+    });
 };
 
 const loadStatus = async () => {