From d79814ff05e4c5a4faa059e8a6d03d2d49be9ada Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 5 Dec 2023 16:32:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E5=BA=93=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E8=B7=B3=E8=BD=AC=E5=A2=9E=E5=8A=A0=20Adminer=20(#318?=
 =?UTF-8?q?9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs #3014
---
 frontend/src/lang/modules/en.ts             |  1 +
 frontend/src/lang/modules/tw.ts             |  1 +
 frontend/src/lang/modules/zh.ts             |  1 +
 frontend/src/views/database/mysql/index.vue | 60 ++++++++++++++++-----
 4 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 206e9f81c..2d095fa34 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -345,6 +345,7 @@ const message = {
         logout: 'Logout',
     },
     database: {
+        manage: 'Management',
         database: 'database',
         deleteBackupHelper: 'Delete database backups simultaneously',
         delete: 'Delete operation cannot be rolled back, please input "',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index d9a96c9b0..ee6af02f3 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -342,6 +342,7 @@ const message = {
         logout: '退出登錄',
     },
     database: {
+        manage: '管理',
         database: '數據庫',
         deleteBackupHelper: '同時刪除數據庫備份',
         delete: '刪除操作無法回滾，請輸入 "',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 832177a66..2046a53bd 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -342,6 +342,7 @@ const message = {
         logout: '退出登录',
     },
     database: {
+        manage: '管理',
         database: '数据库',
         deleteBackupHelper: '同时删除数据库备份',
         delete: '删除操作无法回滚，请输入 "',
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 5f149d92a..63a1fde08 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -89,7 +89,18 @@
                         <el-button @click="goRemoteDB" type="primary" plain>
                             {{ $t('database.remoteDB') }}
                         </el-button>
-                        <el-button @click="goDashboard" icon="Position" type="primary" plain>phpMyAdmin</el-button>
+                        <el-dropdown class="ml-3">
+                            <el-button type="primary" plain>
+                                {{ $t('database.manage') }}
+                                <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                            </el-button>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item @click="goDashboard('phpMyAdmin')">phpMyAdmin</el-dropdown-item>
+                                    <el-dropdown-item @click="goDashboard('Adminer')" divided>Adminer</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
                     </el-col>
                     <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
                         <div class="search-button">
@@ -188,20 +199,20 @@
         </div>
 
         <el-dialog
-            v-model="phpVisible"
+            v-model="dashboardVisible"
             :title="$t('app.checkTitle')"
             width="30%"
             :close-on-click-modal="false"
             :destroy-on-close="true"
         >
-            <el-alert :closable="false" :title="$t('app.checkInstalledWarn', ['phpMyAdmin'])" type="info">
-                <el-link icon="Position" @click="getAppDetail('phpmyadmin')" type="primary">
+            <el-alert :closable="false" :title="$t('app.checkInstalledWarn', [dashboardName])" type="info">
+                <el-link icon="Position" @click="getAppDetail" type="primary">
                     {{ $t('database.goInstall') }}
                 </el-link>
             </el-alert>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="phpVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                    <el-button @click="dashboardVisible = false">{{ $t('commons.button.cancel') }}</el-button>
                 </span>
             </template>
         </el-dialog>
@@ -263,7 +274,10 @@ const checkRef = ref();
 const deleteRef = ref();
 
 const phpadminPort = ref();
-const phpVisible = ref(false);
+const adminerPort = ref();
+const dashboardName = ref();
+const dashboardKey = ref();
+const dashboardVisible = ref(false);
 
 const dialogPortJumpRef = ref();
 
@@ -392,23 +406,40 @@ const onChange = async (info: any) => {
     MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
 };
 
-const goDashboard = async () => {
-    if (phpadminPort.value === 0) {
-        phpVisible.value = true;
+const goDashboard = async (name: string) => {
+    if (name === 'phpMyAdmin') {
+        if (phpadminPort.value === 0) {
+            dashboardName.value = 'phpMyAdmin';
+            dashboardKey.value = 'phpmyadmin';
+            dashboardVisible.value = true;
+            return;
+        }
+        dialogPortJumpRef.value.acceptParams({ port: phpadminPort.value });
         return;
     }
-    dialogPortJumpRef.value.acceptParams({ port: phpadminPort.value });
+    if (adminerPort.value === 0) {
+        dashboardName.value = 'Adminer';
+        dashboardKey.value = 'adminer';
+        dashboardVisible.value = true;
+        return;
+    }
+    dialogPortJumpRef.value.acceptParams({ port: adminerPort.value });
 };
 
-const getAppDetail = (key: string) => {
-    router.push({ name: 'AppAll', query: { install: key } });
+const getAppDetail = () => {
+    router.push({ name: 'AppAll', query: { install: dashboardKey.value } });
 };
 
-const loadDashboardPort = async () => {
+const loadPhpMyAdminPort = async () => {
     const res = await GetAppPort('phpmyadmin', '');
     phpadminPort.value = res.data;
 };
 
+const loadAdminerPort = async () => {
+    const res = await GetAppPort('adminer', '');
+    adminerPort.value = res.data;
+};
+
 const checkExist = (data: App.CheckInstalled) => {
     mysqlStatus.value = data.status;
     mysqlVersion.value = data.version;
@@ -553,7 +584,8 @@ const buttons = [
 
 onMounted(() => {
     loadDBOptions();
-    loadDashboardPort();
+    loadPhpMyAdminPort();
+    loadAdminerPort();
 });
 </script>