fix: 统一抽屉警告或提示信息样式 (#1453)

Author: ssongliu

frontend/src/views/app-store/detail/install/index.vue

@@ -11,9 +11,12 @@
         </template>
         <el-row v-loading="loading">
             <el-col :span="22" :offset="1">
-                <el-alert type="error" :closable="false">
-                    <p>{{ $t('app.appInstallWarn') }}</p>
-                </el-alert>
+                <el-alert
+                    :title="$t('app.appInstallWarn')"
+                    style="margin-bottom: 20px"
+                    :closable="false"
+                    type="error"
+                />
                 <el-form
                     @submit.prevent
                     ref="paramForm"

frontend/src/views/app-store/installed/detail/index.vue

@@ -20,7 +20,12 @@
         </el-row>
         <el-row v-else v-loading="loading">
             <el-col :span="22" :offset="1">
-                <el-alert :title="$t('app.updateHelper')" type="warning" :closable="false" />
+                <el-alert
+                    :title="$t('app.updateHelper')"
+                    type="warning"
+                    :closable="false"
+                    style="margin-bottom: 20px"
+                />
                 <el-form @submit.prevent ref="paramForm" :model="paramModel" label-position="top" :rules="rules">
                     <div v-for="(p, index) in params" :key="index">
                         <el-form-item :prop="p.key" :label="getLabel(p)">

frontend/src/views/app-store/installed/index.vue

@@ -64,11 +64,7 @@
                     </span>
                 </template>
             </el-alert>
-            <el-alert type="info" :closable="false" v-if="mode === 'upgrade'">
-                <template #default>
-                    <span>{{ $t('app.upgradeHelper') }}</span>
-                </template>
-            </el-alert>
+            <el-alert type="info" :title="$t('app.upgradeHelper')" :closable="false" v-if="mode === 'upgrade'" />
             <div class="update-prompt" v-if="data == null">
                 <span>{{ mode === 'upgrade' ? $t('app.updatePrompt') : $t('app.installPrompt') }}</span>
                 <div>

frontend/src/views/container/container/upgrade/index.vue

@@ -3,16 +3,17 @@
         <template #header>
             <DrawerHeader :header="$t('container.upgrade')" :resource="form.name" :back="handleClose" />
         </template>
-        <el-alert v-if="form.fromApp" style="margin-bottom: 20px" :closable="false" type="error">
-            <template #default>
-                <span>
-                    <span>{{ $t('container.appHelper') }}</span>
-                </span>
-            </template>
-        </el-alert>
-        <el-form @submit.prevent ref="formRef" v-loading="loading" :model="form" label-position="top">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
+
+        <el-row v-loading="loading">
+            <el-col :span="22" :offset="1">
+                <el-alert
+                    v-if="form.fromApp"
+                    :title="$t('container.appHelper')"
+                    style="margin-bottom: 20px"
+                    :closable="false"
+                    type="error"
+                />
+                <el-form @submit.prevent ref="formRef" v-loading="loading" :model="form" label-position="top">
                     <el-form-item :label="$t('container.oldImage')" prop="oldImage">
                         <el-tag>{{ form.imageName }}:{{ form.oldTag }}</el-tag>
                     </el-form-item>
@@ -22,9 +23,9 @@
                         </el-input>
                         <span class="input-help">{{ $t('container.upgradeHelper') }}</span>
                     </el-form-item>
-                </el-col>
-            </el-row>
-        </el-form>
+                </el-form>
+            </el-col>
+        </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="loading" @click="drawerVisiable = false">

frontend/src/views/database/mysql/check/index.vue

@@ -45,7 +45,7 @@ const acceptParams = (props: InstallRrops) => {
 };
 
 const toApp = () => {
-    router.push({ name: 'App' });
+    router.push({ name: 'AppInstalled' });
 };
 
 defineExpose({

frontend/src/views/host/file-management/chown/index.vue

@@ -5,6 +5,7 @@
         </template>
         <el-row>
             <el-col :span="22" :offset="1">
+                <el-alert :title="$t('file.ownerHelper')" type="info" :closable="false" style="margin-bottom: 20px" />
                 <el-form
                     ref="fileForm"
                     label-position="top"
@@ -22,9 +23,6 @@
                     <el-form-item v-if="isDir">
                         <el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
                     </el-form-item>
-                    <el-form-item>
-                        <el-alert :title="$t('file.ownerHelper')" type="info" :closable="false" />
-                    </el-form-item>
                 </el-form>
             </el-col>
         </el-row>

frontend/src/views/host/ssh/log/log.vue

@@ -2,13 +2,7 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('ssh.loginLogs')">
             <template #prompt>
-                <el-alert type="info" :closable="false">
-                    <template #default>
-                        <span>
-                            {{ $t('ssh.sshAlert') }}
-                        </span>
-                    </template>
-                </el-alert>
+                <el-alert type="info" :title="$t('ssh.sshAlert')" :closable="false" />
             </template>
             <template #toolbar>
                 <el-row>

frontend/src/views/setting/panel/timezone/index.vue

@@ -4,16 +4,16 @@
             <template #header>
                 <DrawerHeader :header="$t('setting.timeZone')" :back="handleClose" />
             </template>
-            <el-alert v-if="canChangeZone()" style="margin-bottom: 20px" :closable="false" type="warning">
-                <template #default>
-                    <span>
-                        <span>{{ $t('setting.timeZoneHelper') }}</span>
-                    </span>
-                </template>
-            </el-alert>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
+            <el-row type="flex" justify="center">
+                <el-col :span="22">
+                    <el-alert
+                        v-if="canChangeZone()"
+                        :title="$t('setting.timeZoneHelper')"
+                        style="margin-bottom: 20px"
+                        :closable="false"
+                        type="warning"
+                    />
+                    <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
                         <el-form-item :label="$t('setting.timeZone')" prop="timeZone" :rules="Rules.requiredInput">
                             <el-select filterable :disabled="canChangeZone()" v-model="form.timeZone">
                                 <el-option v-for="item in zones" :key="item" :label="item" :value="item" />
@@ -46,9 +46,9 @@
                                 {{ $t('setting.timeZoneNY') }}
                             </el-button>
                         </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
+                    </el-form>
+                </el-col>
+            </el-row>
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>