fix: 数据库删除检查样式调整 (#2218)

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>

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>

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>