feat: 数据库管理跳转增加 Adminer (#3189)

Refs #3014

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 "',

frontend/src/lang/modules/tw.ts

@@ -342,6 +342,7 @@ const message = {
         logout: '退出登錄',
     },
     database: {
+        manage: '管理',
         database: '數據庫',
         deleteBackupHelper: '同時刪除數據庫備份',
         delete: '刪除操作無法回滾，請輸入 "',

frontend/src/lang/modules/zh.ts

@@ -342,6 +342,7 @@ const message = {
         logout: '退出登录',
     },
     database: {
+        manage: '管理',
         database: '数据库',
         deleteBackupHelper: '同时删除数据库备份',
         delete: '删除操作无法回滚，请输入 "',

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-alert :closable="false" :title="$t('app.checkInstalledWarn', [dashboardName])" type="info">
-                <el-link icon="Position" @click="getAppDetail('phpmyadmin')" type="primary">
+                <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 () => {
+const goDashboard = async (name: string) => {
-    if (phpadminPort.value === 0) {
+    if (name === 'phpMyAdmin') {
-        phpVisible.value = true;
+        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) => {
+const getAppDetail = () => {
-    router.push({ name: 'AppAll', query: { install: key } });
+    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>