feat: 页面统一页头

frontend/src/layout/layout-content.vue

@@ -12,6 +12,7 @@
                 ></back-button>
                 <!-- <el-page-header @back="reload" v-if="showBack" :content="header"></el-page-header> -->
                 <span v-else>{{ header }}</span>
+                <el-divider />
             </slot>
         </div>
         <div class="content-container__toolbar" v-if="slots.toolbar">
@@ -53,7 +54,6 @@ const showBack = computed(() => {
 
 .content-container__header {
     font-weight: 700;
-    padding: 5px 0 25px;
     font-size: 18px;
 }
 
@@ -70,4 +70,12 @@ const showBack = computed(() => {
         float: right;
     }
 }
+
+.el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 10px 0;
+    border-top: 1px var(--el-border-color) var(--el-border-style);
+}
 </style>

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

@@ -13,7 +13,7 @@
             <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
         </el-card>
         <el-card v-if="!isOnDetail" style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
-            <div>
+            <LayoutContent :header="$t('container.compose')">
                 <ComplexTable
                     :pagination-config="paginationConfig"
                     v-model:selects="selects"
@@ -57,7 +57,7 @@
                         fix
                     />
                 </ComplexTable>
-            </div>
+            </LayoutContent>
         </el-card>
 
         <EditDialog ref="dialogEditRef" />
@@ -68,6 +68,7 @@
 <script lang="ts" setup>
 import ComplexTable from '@/components/complex-table/index.vue';
 import { reactive, onMounted, ref } from 'vue';
+import LayoutContent from '@/layout/layout-content.vue';
 import EditDialog from '@/views/container/compose/edit/index.vue';
 import CreateDialog from '@/views/container/compose/create/index.vue';
 import ComposeDetial from '@/views/container/compose/detail/index.vue';

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

@@ -9,7 +9,13 @@
             <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
         </el-card>
         <el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
-            <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
+            <LayoutContent :header="$t('container.container')">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    v-model:selects="selects"
+                    :data="data"
+                    @search="search"
+                >
                     <template #toolbar>
                         <el-button icon="Plus" type="primary" @click="onCreate()">
                             {{ $t('commons.button.create') }}
@@ -76,6 +82,7 @@
                         fix
                     />
                 </ComplexTable>
+            </LayoutContent>
         </el-card>
 
         <CodemirrorDialog ref="mydetail" />
@@ -89,6 +96,7 @@
 </template>
 
 <script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import ReNameDialog from '@/views/container/container/rename/index.vue';
 import CreateDialog from '@/views/container/container/create/index.vue';

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

@@ -9,6 +9,7 @@
             <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
         </el-card>
         <el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
+            <LayoutContent :header="$t('container.image')">
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
                     <template #toolbar>
                         <el-button @click="onOpenPull">
@@ -42,6 +43,7 @@
                         :label="$t('commons.table.operate')"
                     />
                 </ComplexTable>
+            </LayoutContent>
         </el-card>
 
         <Pull ref="dialogPullRef" @search="search" />
@@ -82,6 +84,7 @@ import { reactive, onMounted, ref } from 'vue';
 import { dateFromat } from '@/utils/util';
 import Submenu from '@/views/container/index.vue';
 import { Container } from '@/api/interface/container';
+import LayoutContent from '@/layout/layout-content.vue';
 import Pull from '@/views/container/image/pull/index.vue';
 import Tag from '@/views/container/image/tag/index.vue';
 import Push from '@/views/container/image/push/index.vue';

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

@@ -9,7 +9,13 @@
             <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
         </el-card>
         <el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
-            <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
+            <LayoutContent :header="$t('container.network')">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    v-model:selects="selects"
+                    :data="data"
+                    @search="search"
+                >
                     <template #toolbar>
                         <el-button icon="Plus" type="primary" @click="onCreate()">
                             {{ $t('commons.button.create') }}
@@ -19,13 +25,24 @@
                         </el-button>
                     </template>
                     <el-table-column type="selection" :selectable="selectable" fix />
-                <el-table-column :label="$t('commons.table.name')" show-overflow-tooltip min-width="80" prop="name" fix>
+                    <el-table-column
+                        :label="$t('commons.table.name')"
+                        show-overflow-tooltip
+                        min-width="80"
+                        prop="name"
+                        fix
+                    >
                         <template #default="{ row }">
                             <el-link @click="onInspect(row.id)" type="primary">{{ row.name }}</el-link>
                             <el-tag effect="dark" round v-if="row.isSystem" style="margin-left: 5px">system</el-tag>
                         </template>
                     </el-table-column>
-                <el-table-column :label="$t('container.driver')" show-overflow-tooltip min-width="40" prop="driver" />
+                    <el-table-column
+                        :label="$t('container.driver')"
+                        show-overflow-tooltip
+                        min-width="40"
+                        prop="driver"
+                    />
                     <el-table-column :label="$t('container.subnet')" min-width="80" prop="subnet" fix />
                     <el-table-column :label="$t('container.gateway')" min-width="80" prop="gateway" fix />
                     <el-table-column :label="$t('container.tag')" min-width="140" fix>
@@ -50,6 +67,7 @@
                     />
                     <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
                 </ComplexTable>
+            </LayoutContent>
         </el-card>
 
         <CodemirrorDialog ref="codemirror" />
@@ -58,6 +76,7 @@
 </template>
 
 <script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import CreateDialog from '@/views/container/network/create/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/codemirror.vue';

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

@@ -9,7 +9,13 @@
             <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
         </el-card>
         <el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
-            <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
+            <LayoutContent :header="$t('container.repo')">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    v-model:selects="selects"
+                    :data="data"
+                    @search="search"
+                >
                     <template #toolbar>
                         <el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}
@@ -45,6 +51,7 @@
                     </el-table-column>
                     <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
                 </ComplexTable>
+            </LayoutContent>
         </el-card>
         <OperatorDialog @search="search" ref="dialogRef" />
         <DeleteDialog @search="search" ref="dialogDeleteRef" />
@@ -52,6 +59,7 @@
 </template>
 
 <script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import OperatorDialog from '@/views/container/repo/operator/index.vue';
 import DeleteDialog from '@/views/container/repo/delete/index.vue';

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

@@ -50,6 +50,7 @@
             </el-card>
         </div>
         <el-card style="margin-top: 20px">
+            <LayoutContent :header="$t('container.setting')">
                 <el-radio-group v-model="confShowType" @change="changeMode">
                     <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
                     <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
@@ -113,6 +114,7 @@
                         {{ $t('commons.button.save') }}
                     </el-button>
                 </div>
+            </LayoutContent>
         </el-card>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitSave"></ConfirmDialog>
@@ -124,6 +126,7 @@ import { ElMessage, FormInstance } from 'element-plus';
 import { onMounted, reactive, ref } from 'vue';
 import Submenu from '@/views/container/index.vue';
 import { Codemirror } from 'vue-codemirror';
+import LayoutContent from '@/layout/layout-content.vue';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { LoadFile } from '@/api/modules/files';

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

@@ -9,7 +9,13 @@
             <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
         </el-card>
         <el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
-            <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
+            <LayoutContent :header="$t('container.composeTemplate')">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    v-model:selects="selects"
+                    :data="data"
+                    @search="search"
+                >
                     <template #toolbar>
                         <el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}
@@ -38,6 +44,7 @@
                     </el-table-column>
                     <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
                 </ComplexTable>
+            </LayoutContent>
         </el-card>
 
         <el-dialog v-model="detailVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="70%">
@@ -72,6 +79,7 @@
 </template>
 
 <script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import Submenu from '@/views/container/index.vue';
 import { Codemirror } from 'vue-codemirror';

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

@@ -9,7 +9,13 @@
             <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
         </el-card>
         <el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
-            <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
+            <LayoutContent :header="$t('container.volume')">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    v-model:selects="selects"
+                    :data="data"
+                    @search="search"
+                >
                     <template #toolbar>
                         <el-button icon="Plus" type="primary" @click="onCreate()">
                             {{ $t('commons.button.create') }}
@@ -19,7 +25,13 @@
                         </el-button>
                     </template>
                     <el-table-column type="selection" fix />
-                <el-table-column :label="$t('commons.table.name')" show-overflow-tooltip min-width="80" prop="name" fix>
+                    <el-table-column
+                        :label="$t('commons.table.name')"
+                        show-overflow-tooltip
+                        min-width="80"
+                        prop="name"
+                        fix
+                    >
                         <template #default="{ row }">
                             <el-link @click="onInspect(row.name)" type="primary">{{ row.name }}</el-link>
                         </template>
@@ -30,7 +42,12 @@
                         min-width="120"
                         prop="mountpoint"
                     />
-                <el-table-column :label="$t('container.driver')" show-overflow-tooltip min-width="80" prop="driver" />
+                    <el-table-column
+                        :label="$t('container.driver')"
+                        show-overflow-tooltip
+                        min-width="80"
+                        prop="driver"
+                    />
                     <el-table-column
                         prop="createdAt"
                         min-width="90"
@@ -39,6 +56,7 @@
                     />
                     <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
                 </ComplexTable>
+            </LayoutContent>
         </el-card>
 
         <CodemirrorDialog ref="codemirror" />
@@ -47,6 +65,7 @@
 </template>
 
 <script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import CreateDialog from '@/views/container/volume/create/index.vue';
 import Submenu from '@/views/container/index.vue';

frontend/src/views/cronjob/index.vue

@@ -1,10 +1,18 @@
 <template>
     <div>
+        <el-card class="topRouterCard">
+            <el-radio-group v-model="active">
+                <el-radio-button class="topRouterButton" size="default" label="cronjob">
+                    {{ $t('cronjob.cronTask') }}
+                </el-radio-button>
+            </el-radio-group>
+        </el-card>
+        <el-card style="margin-top: 20px">
+            <LayoutContent :header="$t('cronjob.cronTask')">
                 <ComplexTable
                     :pagination-config="paginationConfig"
                     v-model:selects="selects"
                     @search="search"
-            style="margin-top: 20px"
                     :data="data"
                 >
                     <template #toolbar>
@@ -49,7 +57,8 @@
                                 &#32;{{ loadZero(row.hour) }} : {{ loadZero(row.minute) }}
                             </span>
                             <span v-if="row.specType === 'perNDay'">
-                        {{ row.day }} {{ $t('cronjob.day1') }}, {{ loadZero(row.hour) }} : {{ loadZero(row.minute) }}
+                                {{ row.day }} {{ $t('cronjob.day1') }}, {{ loadZero(row.hour) }} :
+                                {{ loadZero(row.minute) }}
                             </span>
                             <span v-if="row.specType === 'perNHour'">
                                 {{ row.hour }}{{ $t('cronjob.hour') }}, {{ loadZero(row.minute) }}
@@ -78,6 +87,8 @@
                         fix
                     />
                 </ComplexTable>
+            </LayoutContent>
+        </el-card>
 
         <OperatrDialog @search="search" ref="dialogRef" />
         <RecordDialog ref="dialogRecordRef" />
@@ -88,6 +99,7 @@
 import ComplexTable from '@/components/complex-table/index.vue';
 import OperatrDialog from '@/views/cronjob/operate/index.vue';
 import RecordDialog from '@/views/cronjob/record/index.vue';
+import LayoutContent from '@/layout/layout-content.vue';
 import { loadZero } from '@/utils/util';
 import { onMounted, reactive, ref } from 'vue';
 import { deleteCronjob, getCronjobPage, handleOnce, updateStatus } from '@/api/modules/cronjob';
@@ -99,6 +111,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 
 const selects = ref<any>([]);
 
+const active = ref('cronjob');
 const data = ref();
 const paginationConfig = reactive({
     currentPage: 1,

frontend/src/views/log/login/index.vue

@@ -2,6 +2,7 @@
     <div>
         <Submenu activeName="login" />
         <el-card style="margin-top: 20px">
+            <LayoutContent :header="$t('logs.login')">
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
                     <template #toolbar>
                         <el-button type="primary" @click="onClean()">
@@ -31,6 +32,7 @@
                         show-overflow-tooltip
                     />
                 </ComplexTable>
+            </LayoutContent>
         </el-card>
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitClean"></ConfirmDialog>
     </div>
@@ -40,6 +42,7 @@
 import ComplexTable from '@/components/complex-table/index.vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { dateFromat } from '@/utils/util';
+import LayoutContent from '@/layout/layout-content.vue';
 import { cleanLogs, getLoginLogs } from '@/api/modules/log';
 import Submenu from '@/views/log/index.vue';
 import { onMounted, reactive, ref } from '@vue/runtime-core';

frontend/src/views/log/operation/index.vue

@@ -2,6 +2,7 @@
     <div>
         <Submenu activeName="operation" />
         <el-card style="margin-top: 20px">
+            <LayoutContent :header="$t('logs.operation')">
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
                     <template #toolbar>
                         <el-button type="primary" @click="onClean()">
@@ -42,6 +43,7 @@
                         show-overflow-tooltip
                     />
                 </ComplexTable>
+            </LayoutContent>
         </el-card>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitClean"></ConfirmDialog>
@@ -52,6 +54,7 @@
 import ComplexTable from '@/components/complex-table/index.vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { dateFromat } from '@/utils/util';
+import LayoutContent from '@/layout/layout-content.vue';
 import { cleanLogs, getOperationLogs } from '@/api/modules/log';
 import Submenu from '@/views/log/index.vue';
 import { onMounted, reactive, ref } from '@vue/runtime-core';

frontend/src/views/log/system/index.vue

@@ -2,12 +2,13 @@
     <div>
         <Submenu activeName="system" />
         <el-card style="margin-top: 20px">
+            <LayoutContent :header="$t('logs.system')">
                 <codemirror
                     :autofocus="true"
                     placeholder="None data"
                     :indent-with-tab="true"
                     :tabSize="4"
-                style="height: calc(100vh - 150px)"
+                    style="height: calc(100vh - 180px)"
                     :lineWrapping="true"
                     :matchBrackets="true"
                     theme="cobalt"
@@ -17,12 +18,14 @@
                     v-model="logs"
                     :readOnly="true"
                 />
+            </LayoutContent>
         </el-card>
     </div>
 </template>
 
 <script setup lang="ts">
 import { Codemirror } from 'vue-codemirror';
+import LayoutContent from '@/layout/layout-content.vue';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { nextTick, onMounted, ref, shallowRef } from 'vue';

frontend/src/views/setting/about/index.vue

@@ -2,11 +2,7 @@
     <div>
         <Submenu activeName="about" />
         <el-card style="margin-top: 20px">
-            <template #header>
-                <div class="card-header">
-                    <span>{{ $t('setting.about') }}</span>
-                </div>
-            </template>
+            <LayoutContent :header="$t('setting.about')">
                 <div style="text-align: center">
                     <div style="justify-self: center">
                         <img style="width: 80px" src="@/assets/images/ko_image.png" />
@@ -37,6 +33,7 @@
                         </el-link>
                     </div>
                 </div>
+            </LayoutContent>
         </el-card>
         <el-drawer :key="refresh" v-model="drawerShow" size="50%">
             <el-form label-width="120px">
@@ -64,6 +61,7 @@
 </template>
 
 <script lang="ts" setup>
+import LayoutContent from '@/layout/layout-content.vue';
 import { getSettingInfo, loadUpgradeInfo } from '@/api/modules/setting';
 import Submenu from '@/views/setting/index.vue';
 import { onMounted, ref } from 'vue';

frontend/src/views/setting/backup-account/index.vue

@@ -2,13 +2,15 @@
     <div>
         <Submenu activeName="backupaccount" />
         <el-form label-position="left" label-width="130px" :v-key="reflash">
-            <div style="margin-top: 20px"><span style="font-size: 16px; font-weight: 500">Local</span></div>
-            <el-row :gutter="20" style="margin-top: 10px">
+            <LayoutContent header="Local" style="margin-top: 20px">
+                <el-row :gutter="20">
                     <el-col :span="24">
                         <el-card>
                             <template #header>
                                 <svg-icon style="font-size: 7px" iconName="p-file-folder"></svg-icon>
-                            <span style="font-size: 16px; font-weight: 500">&nbsp;{{ $t('setting.serverDisk') }}</span>
+                                <span style="font-size: 16px; font-weight: 500">
+                                    &nbsp;{{ $t('setting.serverDisk') }}
+                                </span>
                                 <div style="float: right">
                                     <el-button round @click="onOpenDialog('edit', 'local', localData)">
                                         {{ $t('commons.button.edit') }}
@@ -24,10 +26,10 @@
                         </el-card>
                     </el-col>
                 </el-row>
-            <div style="margin-top: 20px">
-                <span style="font-size: 16px; font-weight: 500">{{ $t('setting.thirdParty') }}</span>
-            </div>
-            <el-row :gutter="20" style="margin-top: 10px">
+            </LayoutContent>
+
+            <LayoutContent :header="$t('setting.thirdParty')" style="margin-top: 20px">
+                <el-row :gutter="20">
                     <el-col :span="12">
                         <el-card>
                             <template #header>
@@ -58,7 +60,13 @@
                                 </el-form-item>
                             </div>
                             <el-alert v-else center style="height: 127px; background-color: #e2e4ec" :closable="false">
-                            <el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'MINIO')">
+                                <el-button
+                                    size="large"
+                                    round
+                                    plain
+                                    type="primary"
+                                    @click="onOpenDialog('create', 'MINIO')"
+                                >
                                     {{ $t('setting.createBackupAccount', ['MINIO']) }}
                                 </el-button>
                             </el-alert>
@@ -94,7 +102,13 @@
                                 </el-form-item>
                             </div>
                             <el-alert v-else center style="height: 127px; background-color: #e2e4ec" :closable="false">
-                            <el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'OSS')">
+                                <el-button
+                                    size="large"
+                                    round
+                                    plain
+                                    type="primary"
+                                    @click="onOpenDialog('create', 'OSS')"
+                                >
                                     {{ $t('setting.createBackupAccount', ['OSS']) }}
                                 </el-button>
                             </el-alert>
@@ -135,7 +149,13 @@
                                 </el-form-item>
                             </div>
                             <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
-                            <el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'S3')">
+                                <el-button
+                                    size="large"
+                                    round
+                                    plain
+                                    type="primary"
+                                    @click="onOpenDialog('create', 'S3')"
+                                >
                                     {{ $t('setting.createBackupAccount', ['S3']) }}
                                 </el-button>
                             </el-alert>
@@ -175,13 +195,20 @@
                                 </el-form-item>
                             </div>
                             <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
-                            <el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'SFTP')">
+                                <el-button
+                                    size="large"
+                                    round
+                                    plain
+                                    type="primary"
+                                    @click="onOpenDialog('create', 'SFTP')"
+                                >
                                     {{ $t('setting.createBackupAccount', ['SFTP']) }}
                                 </el-button>
                             </el-alert>
                         </el-card>
                     </el-col>
                 </el-row>
+            </LayoutContent>
         </el-form>
         <DialogOperate ref="dialogRef" @search="search" />
     </div>
@@ -189,6 +216,7 @@
 <script setup lang="ts">
 import { dateFromat } from '@/utils/util';
 import { onMounted, ref } from 'vue';
+import LayoutContent from '@/layout/layout-content.vue';
 import { getBackupList, deleteBackup } from '@/api/modules/backup';
 import DialogOperate from '@/views/setting/backup-account/operate/index.vue';
 import Submenu from '@/views/setting/index.vue';

frontend/src/views/setting/monitor/index.vue

@@ -3,11 +3,7 @@
         <Submenu activeName="monitor" />
         <el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
             <el-card style="margin-top: 20px">
-                <template #header>
-                    <div class="card-header">
-                        <span>{{ $t('menu.monitor') }}</span>
-                    </div>
-                </template>
+                <LayoutContent :header="$t('menu.monitor')">
                     <el-row>
                         <el-col :span="1"><br /></el-col>
                         <el-col :span="10">
@@ -23,7 +19,11 @@
                                     inactive-value="disable"
                                 />
                             </el-form-item>
-                        <el-form-item :label="$t('setting.storeDays')" :rules="Rules.number" prop="monitorStoreDays">
+                            <el-form-item
+                                :label="$t('setting.storeDays')"
+                                :rules="Rules.number"
+                                prop="monitorStoreDays"
+                            >
                                 <el-input clearable v-model.number="form.monitorStoreDays">
                                     <template #append>
                                         <el-button
@@ -40,6 +40,7 @@
                             </el-form-item>
                         </el-col>
                     </el-row>
+                </LayoutContent>
             </el-card>
         </el-form>
     </div>
@@ -48,6 +49,7 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
 import { ElMessage, FormInstance } from 'element-plus';
+import LayoutContent from '@/layout/layout-content.vue';
 import { cleanMonitors, getSettingInfo, updateSetting } from '@/api/modules/setting';
 import { useDeleteData } from '@/hooks/use-delete-data';
 import Submenu from '@/views/setting/index.vue';

frontend/src/views/setting/snapshot/index.vue

@@ -2,7 +2,13 @@
     <div v-loading="loading">
         <Submenu activeName="snapshot" />
         <el-card v-if="!isRecordShow" style="margin-top: 20px">
-            <ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
+            <LayoutContent :header="$t('setting.snapshot')">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    v-model:selects="selects"
+                    :data="data"
+                    @search="search"
+                >
                     <template #toolbar>
                         <el-button type="primary" icon="Plus" @click="onCreate()">
                             {{ $t('setting.createSnapshot') }}
@@ -59,9 +65,10 @@
                         fix
                     />
                 </ComplexTable>
+            </LayoutContent>
         </el-card>
         <RecoverStatus ref="recoverStatusRef"></RecoverStatus>
-        <el-dialog v-model="dialogVisiable" :title="$t('setting.createSnapshot')" width="30%">
+        <el-drawer v-model="dialogVisiable" :title="$t('setting.createSnapshot')" size="50%">
             <el-form v-loading="loading" ref="snapRef" label-width="100px" :model="snapInfo" :rules="rules">
                 <el-form-item :label="$t('cronjob.target')" prop="from">
                     <el-select v-model="snapInfo.from" clearable>
@@ -87,7 +94,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-dialog>
+        </el-drawer>
     </div>
 </template>
 
@@ -103,6 +110,7 @@ import i18n from '@/lang';
 import { ElMessage } from 'element-plus';
 import { Setting } from '@/api/interface/setting';
 import Submenu from '@/views/setting/index.vue';
+import LayoutContent from '@/layout/layout-content.vue';
 import RecoverStatus from '@/views/setting/snapshot/status/index.vue';
 import { getBackupList } from '@/api/modules/backup';
 import { loadBackupName } from '../helper';