From e6522ded626e89f3b0cfb2fe7ed459bdb9b93acf Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 5 Sep 2023 17:34:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20MySQL=20=E6=95=B0=E6=8D=AE=E5=BA=93?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E9=A1=B9=E5=A2=9E=E5=8A=A0=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=20(#2189)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/database/mysql/index.vue | 25 ++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 58ca5abeb..5b2a8029d 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -25,7 +25,7 @@
             <template #search v-if="currentDB">
                 <el-select v-model="currentDBName" @change="changeDatabase()">
                     <template #prefix>{{ $t('commons.table.type') }}</template>
-                    <el-option-group :label="$t('database.local')" v-if="dbOptionsLocal.length !== 0">
+                    <el-option-group :label="$t('database.local')">
                         <div v-for="(item, index) in dbOptionsLocal" :key="index">
                             <el-option
                                 v-if="item.from === 'local'"
@@ -33,8 +33,11 @@
                                 :label="item.database + ' [' + item.type + ']'"
                             ></el-option>
                         </div>
+                        <el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position">
+                            {{ $t('database.goInstall') }}
+                        </el-button>
                     </el-option-group>
-                    <el-option-group :label="$t('database.remote')" v-if="dbOptionsRemote.length !== 0">
+                    <el-option-group :label="$t('database.remote')">
                         <div v-for="(item, index) in dbOptionsRemote" :key="index">
                             <el-option
                                 v-if="item.from === 'remote'"
@@ -42,6 +45,9 @@
                                 :label="item.database + ' [' + item.type + ']'"
                             ></el-option>
                         </div>
+                        <el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position">
+                            {{ $t('database.createRemoteDB') }}
+                        </el-button>
                     </el-option-group>
                 </el-select>
             </template>
@@ -156,7 +162,7 @@
                     <div class="app-warn">
                         <div>
                             <span>{{ $t('app.checkInstalledWarn', [$t('database.noMysql')]) }}</span>
-                            <span @click="goRouter">
+                            <span @click="goRouter('app')">
                                 <el-icon><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
@@ -354,8 +360,12 @@ const loadDB = async () => {
     });
 };
 
-const goRouter = async () => {
-    router.push({ name: 'AppAll', query: { install: 'mysql' } });
+const goRouter = async (target: string) => {
+    if (target === 'app') {
+        router.push({ name: 'AppAll', query: { install: 'mysql' } });
+        return;
+    }
+    router.push({ name: 'MySQL-Remote' });
 };
 
 const onChange = async (info: any) => {
@@ -529,4 +539,9 @@ onMounted(() => {
     margin-left: 5px;
     margin-top: 3px;
 }
+.jumpAdd {
+    margin-top: 10px;
+    margin-left: 15px;
+    font-size: 12px;
+}
 </style>