From eff3e8fcc5cb5dbca33a12986739be49685d1002 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Sun, 10 Sep 2023 17:20:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E5=BA=93=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E9=A1=B9=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96=20(#2235?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/cronjob/operate/index.vue | 28 +++++++++++++++-----
 frontend/src/views/database/mysql/index.vue  | 28 +++++++++++++-------
 2 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/cronjob/operate/index.vue b/frontend/src/views/cronjob/operate/index.vue
index 3de2d2acc..0de45df66 100644
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/operate/index.vue
@@ -125,7 +125,12 @@
                             <el-select class="selectClass" clearable v-model="dialogData.rowData!.appID">
                                 <el-option :label="$t('commons.table.all')" value="all" />
                                 <div v-for="item in appOptions" :key="item.id">
-                                    <el-option :label="item.key + ' [' + item.name + ']'" :value="item.id + ''" />
+                                    <el-option :value="item.id + ''">
+                                        <span>{{ item.name }}</span>
+                                        <el-tag class="tagClass">
+                                            {{ item.key }}
+                                        </el-tag>
+                                    </el-option>
                                 </div>
                             </el-select>
                         </el-form-item>
@@ -135,12 +140,15 @@
                         <el-form-item :label="$t('cronjob.database')" prop="dbName">
                             <el-select class="selectClass" clearable v-model="dialogData.rowData!.dbName">
                                 <el-option :label="$t('commons.table.all')" value="all" />
-                                <el-option
-                                    v-for="item in mysqlInfo.dbs"
-                                    :key="item.id"
-                                    :label="item.database + ' [' + item.name + ']'"
-                                    :value="item.id + ''"
-                                />
+                                <el-option v-for="item in mysqlInfo.dbs" :key="item.id" :value="item.id + ''">
+                                    <span>{{ item.name }}</span>
+                                    <el-tag class="tagClass">
+                                        {{ item.from === 'local' ? $t('database.local') : $t('database.remote') }}
+                                    </el-tag>
+                                    <el-tag class="tagClass">
+                                        {{ item.database }}
+                                    </el-tag>
+                                </el-option>
                             </el-select>
                         </el-form-item>
                     </div>
@@ -609,4 +617,10 @@ defineExpose({
 .selectClass {
     width: 100%;
 }
+.tagClass {
+    float: right;
+    margin-right: 10px;
+    font-size: 12px;
+    margin-top: 5px;
+}
 </style>
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index cbcf23628..7e08212ab 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -27,11 +27,12 @@
                     <template #prefix>{{ $t('commons.table.type') }}</template>
                     <el-option-group :label="$t('database.local')">
                         <div v-for="(item, index) in dbOptionsLocal" :key="index">
-                            <el-option
-                                v-if="item.from === 'local'"
-                                :value="item.database"
-                                :label="item.database + ' [' + (item.type === 'mysql' ? 'MySQL' : 'MariaDB') + ']'"
-                            ></el-option>
+                            <el-option v-if="item.from === 'local'" :value="item.database">
+                                <span>{{ item.database }}</span>
+                                <el-tag class="tagClass">
+                                    {{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }}
+                                </el-tag>
+                            </el-option>
                         </div>
                         <el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position">
                             {{ $t('database.goInstall') }}
@@ -39,11 +40,12 @@
                     </el-option-group>
                     <el-option-group :label="$t('database.remote')">
                         <div v-for="(item, index) in dbOptionsRemote" :key="index">
-                            <el-option
-                                v-if="item.from === 'remote'"
-                                :value="item.database"
-                                :label="item.database + ' [' + (item.type === 'mysql' ? 'MySQL' : 'MariaDB') + ']'"
-                            ></el-option>
+                            <el-option v-if="item.from === 'remote'" :value="item.database">
+                                <span>{{ item.database }}</span>
+                                <el-tag class="tagClass">
+                                    {{ item.type === 'mysql' ? 'MySQL' : 'MariaDB' }}
+                                </el-tag>
+                            </el-option>
                         </div>
                         <el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position">
                             {{ $t('database.createRemoteDB') }}
@@ -563,6 +565,12 @@ onMounted(() => {
 .jumpAdd {
     margin-top: 10px;
     margin-left: 15px;
+    margin-bottom: 5px;
     font-size: 12px;
 }
+.tagClass {
+    float: right;
+    font-size: 12px;
+    margin-top: 5px;
+}
 </style>