From a61487de9faa34b10490d265c83b85bcb072aecc Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Thu, 7 Sep 2023 17:18:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E5=BA=93=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E6=A3=80=E6=9F=A5=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=20(#2218)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../container/container/handle/index.vue      | 26 +++++++++++++------
 .../src/views/database/mysql/check/index.vue  | 16 ++++++------
 .../views/database/mysql/setting/index.vue    | 11 +++++++-
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/container/container/handle/index.vue b/frontend/src/views/container/container/handle/index.vue
index 39632e000..80b493515 100644
--- a/frontend/src/views/container/container/handle/index.vue
+++ b/frontend/src/views/container/container/handle/index.vue
@@ -1,11 +1,19 @@
 <template>
     <el-dialog v-model="open" :title="$t('app.delete')" width="30%" :close-on-click-modal="false">
-        <div>
-            <span class="lineClass" style="color: red">{{ msg }}</span>
-            <ul>
-                <li class="lineClass" v-for="(row, index) in containers" :key="index">{{ row }}</li>
-            </ul>
-        </div>
+        <el-row>
+            <el-col :span="20" :offset="2">
+                <el-alert :title="msg" show-icon type="error" :closable="false"></el-alert>
+                <div class="resource">
+                    <table>
+                        <tr v-for="(row, index) in containers" :key="index">
+                            <td>
+                                <span>{{ row }}</span>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </el-col>
+        </el-row>
 
         <template #footer>
             <span class="dialog-footer">
@@ -71,7 +79,9 @@ defineExpose({
 </script>
 
 <style scoped>
-.lineClass {
-    line-height: 25px;
+.resource {
+    margin-top: 10px;
+    max-height: 400px;
+    overflow: auto;
 }
 </style>
diff --git a/frontend/src/views/database/mysql/check/index.vue b/frontend/src/views/database/mysql/check/index.vue
index aef069c10..58740464c 100644
--- a/frontend/src/views/database/mysql/check/index.vue
+++ b/frontend/src/views/database/mysql/check/index.vue
@@ -7,14 +7,14 @@
         :destroy-on-close="true"
     >
         <el-row>
-            <el-alert
-                type="warning"
-                :description="$t('app.deleteHelper', [$t('app.database')])"
-                center
-                show-icon
-                :closable="false"
-            />
-            <el-col :span="12" :offset="6">
+            <el-col :span="20" :offset="2" v-if="open">
+                <el-alert
+                    type="error"
+                    :description="$t('app.deleteHelper', [$t('app.database')])"
+                    center
+                    show-icon
+                    :closable="false"
+                />
                 <br />
                 <el-descriptions border :column="1">
                     <el-descriptions-item>
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 6e2918944..ad650d55a 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -2,7 +2,16 @@
     <div v-loading="loading">
         <LayoutContent>
             <template #title>
-                <back-button name="MySQL" :header="$t('commons.button.set')" />
+                <back-button
+                    name="MySQL"
+                    :header="
+                        props.database +
+                        ' [' +
+                        (props.type === 'mysql' ? 'MySQL' : 'MariaDB') +
+                        '] - ' +
+                        $t('commons.button.set')
+                    "
+                />
             </template>
 
             <template #toolbar>