From 2652e7089b4f29fcef071d1d788140661b30c34b Mon Sep 17 00:00:00 2001
From: ssongliu <songlius11@163.com>
Date: Mon, 30 Jan 2023 09:39:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E9=A1=B5=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/layout/layout-content.vue        |  10 +-
 .../src/views/container/compose/index.vue     |   5 +-
 .../src/views/container/container/index.vue   | 138 +++----
 frontend/src/views/container/image/index.vue  |  67 ++--
 .../src/views/container/network/index.vue     |  97 +++--
 frontend/src/views/container/repo/index.vue   |  78 ++--
 .../src/views/container/setting/index.vue     | 127 +++---
 .../src/views/container/template/index.vue    |  62 +--
 frontend/src/views/container/volume/index.vue |  77 ++--
 frontend/src/views/cronjob/index.vue          | 169 ++++----
 frontend/src/views/log/login/index.vue        |  59 +--
 frontend/src/views/log/operation/index.vue    |  81 ++--
 frontend/src/views/log/system/index.vue       |  33 +-
 frontend/src/views/setting/about/index.vue    |  66 ++--
 .../views/setting/backup-account/index.vue    | 368 ++++++++++--------
 frontend/src/views/setting/monitor/index.vue  |  76 ++--
 frontend/src/views/setting/snapshot/index.vue | 124 +++---
 17 files changed, 886 insertions(+), 751 deletions(-)

diff --git a/frontend/src/layout/layout-content.vue b/frontend/src/layout/layout-content.vue
index 7ff6bedf1..4f46f0497 100644
--- a/frontend/src/layout/layout-content.vue
+++ b/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>
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 36e128e21..8489f205b 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/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';
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index ba05eb89d..faea8dfa0 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -9,73 +9,80 @@
             <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">
-                <template #toolbar>
-                    <el-button icon="Plus" type="primary" @click="onCreate()">
-                        {{ $t('commons.button.create') }}
-                    </el-button>
-                    <el-button-group style="margin-left: 10px">
-                        <el-button :disabled="checkStatus('start')" @click="onOperate('start')">
-                            {{ $t('container.start') }}
-                        </el-button>
-                        <el-button :disabled="checkStatus('stop')" @click="onOperate('stop')">
-                            {{ $t('container.stop') }}
-                        </el-button>
-                        <el-button :disabled="checkStatus('restart')" @click="onOperate('restart')">
-                            {{ $t('container.restart') }}
-                        </el-button>
-                        <el-button :disabled="checkStatus('kill')" @click="onOperate('kill')">
-                            {{ $t('container.kill') }}
-                        </el-button>
-                        <el-button :disabled="checkStatus('pause')" @click="onOperate('pause')">
-                            {{ $t('container.pause') }}
-                        </el-button>
-                        <el-button :disabled="checkStatus('unpause')" @click="onOperate('unpause')">
-                            {{ $t('container.unpause') }}
-                        </el-button>
-                        <el-button :disabled="checkStatus('remove')" @click="onOperate('remove')">
-                            {{ $t('container.remove') }}
-                        </el-button>
-                    </el-button-group>
-                </template>
-                <el-table-column type="selection" fix />
-                <el-table-column
-                    :label="$t('commons.table.name')"
-                    show-overflow-tooltip
-                    min-width="100"
-                    prop="name"
-                    fix
+            <LayoutContent :header="$t('container.container')">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    v-model:selects="selects"
+                    :data="data"
+                    @search="search"
                 >
-                    <template #default="{ row }">
-                        <el-link @click="onInspect(row.containerID)" type="primary">{{ row.name }}</el-link>
+                    <template #toolbar>
+                        <el-button icon="Plus" type="primary" @click="onCreate()">
+                            {{ $t('commons.button.create') }}
+                        </el-button>
+                        <el-button-group style="margin-left: 10px">
+                            <el-button :disabled="checkStatus('start')" @click="onOperate('start')">
+                                {{ $t('container.start') }}
+                            </el-button>
+                            <el-button :disabled="checkStatus('stop')" @click="onOperate('stop')">
+                                {{ $t('container.stop') }}
+                            </el-button>
+                            <el-button :disabled="checkStatus('restart')" @click="onOperate('restart')">
+                                {{ $t('container.restart') }}
+                            </el-button>
+                            <el-button :disabled="checkStatus('kill')" @click="onOperate('kill')">
+                                {{ $t('container.kill') }}
+                            </el-button>
+                            <el-button :disabled="checkStatus('pause')" @click="onOperate('pause')">
+                                {{ $t('container.pause') }}
+                            </el-button>
+                            <el-button :disabled="checkStatus('unpause')" @click="onOperate('unpause')">
+                                {{ $t('container.unpause') }}
+                            </el-button>
+                            <el-button :disabled="checkStatus('remove')" @click="onOperate('remove')">
+                                {{ $t('container.remove') }}
+                            </el-button>
+                        </el-button-group>
                     </template>
-                </el-table-column>
-                <el-table-column
-                    :label="$t('container.image')"
-                    show-overflow-tooltip
-                    min-width="100"
-                    prop="imageName"
-                />
-                <el-table-column :label="$t('commons.table.status')" min-width="50" prop="state" fix>
-                    <template #default="{ row }">
-                        <Status :key="row.state" :status="row.state"></Status>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('container.upTime')" min-width="100" prop="runTime" fix />
-                <el-table-column
-                    prop="createTime"
-                    :label="$t('commons.table.date')"
-                    :formatter="dateFromat"
-                    show-overflow-tooltip
-                />
-                <fu-table-operations
-                    width="200px"
-                    :ellipsis="10"
-                    :buttons="buttons"
-                    :label="$t('commons.table.operate')"
-                    fix
-                />
-            </ComplexTable>
+                    <el-table-column type="selection" fix />
+                    <el-table-column
+                        :label="$t('commons.table.name')"
+                        show-overflow-tooltip
+                        min-width="100"
+                        prop="name"
+                        fix
+                    >
+                        <template #default="{ row }">
+                            <el-link @click="onInspect(row.containerID)" type="primary">{{ row.name }}</el-link>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        :label="$t('container.image')"
+                        show-overflow-tooltip
+                        min-width="100"
+                        prop="imageName"
+                    />
+                    <el-table-column :label="$t('commons.table.status')" min-width="50" prop="state" fix>
+                        <template #default="{ row }">
+                            <Status :key="row.state" :status="row.state"></Status>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('container.upTime')" min-width="100" prop="runTime" fix />
+                    <el-table-column
+                        prop="createTime"
+                        :label="$t('commons.table.date')"
+                        :formatter="dateFromat"
+                        show-overflow-tooltip
+                    />
+                    <fu-table-operations
+                        width="200px"
+                        :ellipsis="10"
+                        :buttons="buttons"
+                        :label="$t('commons.table.operate')"
+                        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';
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index b6b75ffec..9bbd52992 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -9,39 +9,41 @@
             <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" :data="data" @search="search">
-                <template #toolbar>
-                    <el-button @click="onOpenPull">
-                        {{ $t('container.imagePull') }}
-                    </el-button>
-                    <el-button @click="onOpenload">
-                        {{ $t('container.importImage') }}
-                    </el-button>
-                    <el-button @click="onOpenBuild">
-                        {{ $t('container.build') }}
-                    </el-button>
-                </template>
-                <el-table-column label="ID" show-overflow-tooltip prop="id" min-width="60" />
-                <el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
-                    <template #default="{ row }">
-                        <el-tag style="margin-left: 5px" v-for="(item, index) of row.tags" :key="index">
-                            {{ item }}
-                        </el-tag>
+            <LayoutContent :header="$t('container.image')">
+                <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
+                    <template #toolbar>
+                        <el-button @click="onOpenPull">
+                            {{ $t('container.imagePull') }}
+                        </el-button>
+                        <el-button @click="onOpenload">
+                            {{ $t('container.importImage') }}
+                        </el-button>
+                        <el-button @click="onOpenBuild">
+                            {{ $t('container.build') }}
+                        </el-button>
                     </template>
-                </el-table-column>
-                <el-table-column :label="$t('container.size')" prop="size" min-width="70" fix />
-                <el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
-                    <template #default="{ row }">
-                        {{ dateFromat(0, 0, row.createdAt) }}
-                    </template>
-                </el-table-column>
-                <fu-table-operations
-                    width="200px"
-                    :ellipsis="10"
-                    :buttons="buttons"
-                    :label="$t('commons.table.operate')"
-                />
-            </ComplexTable>
+                    <el-table-column label="ID" show-overflow-tooltip prop="id" min-width="60" />
+                    <el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
+                        <template #default="{ row }">
+                            <el-tag style="margin-left: 5px" v-for="(item, index) of row.tags" :key="index">
+                                {{ item }}
+                            </el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('container.size')" prop="size" min-width="70" fix />
+                    <el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
+                        <template #default="{ row }">
+                            {{ dateFromat(0, 0, row.createdAt) }}
+                        </template>
+                    </el-table-column>
+                    <fu-table-operations
+                        width="200px"
+                        :ellipsis="10"
+                        :buttons="buttons"
+                        :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';
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index f4a5cb5d5..220fa53b4 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@@ -9,47 +9,65 @@
             <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">
-                <template #toolbar>
-                    <el-button icon="Plus" type="primary" @click="onCreate()">
-                        {{ $t('commons.button.create') }}
-                    </el-button>
-                    <el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
-                        {{ $t('commons.button.delete') }}
-                    </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>
-                    <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>
+            <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') }}
+                        </el-button>
+                        <el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
                     </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.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>
-                    <template #default="{ row }">
-                        <div v-for="(item, index) in row.labels" :key="index">
-                            <div v-if="row.expand || (!row.expand && index < 3)">
-                                <el-tag>{{ item }}</el-tag>
+                    <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
+                    >
+                        <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.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>
+                        <template #default="{ row }">
+                            <div v-for="(item, index) in row.labels" :key="index">
+                                <div v-if="row.expand || (!row.expand && index < 3)">
+                                    <el-tag>{{ item }}</el-tag>
+                                </div>
                             </div>
-                        </div>
-                        <div v-if="!row.expand && row.labels.length > 3">
-                            <el-button type="primary" link @click="row.expand = true">
-                                {{ $t('commons.button.expand') }}...
-                            </el-button>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    prop="createdAt"
-                    min-width="90"
-                    :label="$t('commons.table.date')"
-                    :formatter="dateFromat"
-                />
-                <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
-            </ComplexTable>
+                            <div v-if="!row.expand && row.labels.length > 3">
+                                <el-button type="primary" link @click="row.expand = true">
+                                    {{ $t('commons.button.expand') }}...
+                                </el-button>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        prop="createdAt"
+                        min-width="90"
+                        :label="$t('commons.table.date')"
+                        :formatter="dateFromat"
+                    />
+                    <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';
diff --git a/frontend/src/views/container/repo/index.vue b/frontend/src/views/container/repo/index.vue
index f7bba5c36..2158e10d5 100644
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@@ -9,42 +9,49 @@
             <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">
-                <template #toolbar>
-                    <el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
-                        {{ $t('commons.button.create') }}
-                    </el-button>
-                    <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
-                        {{ $t('commons.button.delete') }}
-                    </el-button>
-                </template>
-                <el-table-column type="selection" :selectable="selectable" fix />
-                <el-table-column :label="$t('commons.table.name')" prop="name" min-width="60" />
-                <el-table-column
-                    :label="$t('container.downloadUrl')"
-                    show-overflow-tooltip
-                    prop="downloadUrl"
-                    min-width="100"
-                    fix
-                />
-                <el-table-column :label="$t('container.protocol')" prop="protocol" min-width="60" fix />
-                <el-table-column :label="$t('commons.table.status')" prop="status" min-width="60" fix>
-                    <template #default="{ row }">
-                        <el-tag v-if="row.status === 'Success'" type="success">
-                            {{ $t('commons.status.success') }}
-                        </el-tag>
-                        <el-tooltip v-else effect="dark" :content="row.message" placement="bottom">
-                            <el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
-                        </el-tooltip>
+            <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') }}
+                        </el-button>
+                        <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
                     </template>
-                </el-table-column>
-                <el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
-                    <template #default="{ row }">
-                        {{ dateFromat(0, 0, row.createdAt) }}
-                    </template>
-                </el-table-column>
-                <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
-            </ComplexTable>
+                    <el-table-column type="selection" :selectable="selectable" fix />
+                    <el-table-column :label="$t('commons.table.name')" prop="name" min-width="60" />
+                    <el-table-column
+                        :label="$t('container.downloadUrl')"
+                        show-overflow-tooltip
+                        prop="downloadUrl"
+                        min-width="100"
+                        fix
+                    />
+                    <el-table-column :label="$t('container.protocol')" prop="protocol" min-width="60" fix />
+                    <el-table-column :label="$t('commons.table.status')" prop="status" min-width="60" fix>
+                        <template #default="{ row }">
+                            <el-tag v-if="row.status === 'Success'" type="success">
+                                {{ $t('commons.status.success') }}
+                            </el-tag>
+                            <el-tooltip v-else effect="dark" :content="row.message" placement="bottom">
+                                <el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
+                            </el-tooltip>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
+                        <template #default="{ row }">
+                            {{ dateFromat(0, 0, row.createdAt) }}
+                        </template>
+                    </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';
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index df22c4e7c..a46b52d5e 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -50,69 +50,71 @@
             </el-card>
         </div>
         <el-card style="margin-top: 20px">
-            <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>
-            </el-radio-group>
-            <el-row style="margin-top: 20px" v-if="confShowType === 'base'">
-                <el-col :span="1"><br /></el-col>
-                <el-col :span="10">
-                    <el-form :model="form" ref="formRef" label-width="120px">
-                        <el-form-item :label="$t('container.mirrors')" prop="mirrors">
-                            <el-input
-                                type="textarea"
-                                :placeholder="$t('container.mirrorHelper')"
-                                :autosize="{ minRows: 3, maxRows: 10 }"
-                                v-model="form.mirrors"
-                            />
-                            <span class="input-help">{{ $t('container.mirrorsHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('container.registries')" prop="registries">
-                            <el-input
-                                type="textarea"
-                                :placeholder="$t('container.registrieHelper')"
-                                :autosize="{ minRows: 3, maxRows: 10 }"
-                                v-model="form.registries"
-                            />
-                        </el-form-item>
-                        <el-form-item label="live-restore" prop="liveRestore">
-                            <el-switch v-model="form.liveRestore"></el-switch>
-                            <span class="input-help">{{ $t('container.liveHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item label="cgroup-driver" prop="cgroupDriver">
-                            <el-radio-group v-model="form.cgroupDriver">
-                                <el-radio label="cgroupfs">cgroupfs</el-radio>
-                                <el-radio label="systemd">systemd</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                                {{ $t('commons.button.save') }}
-                            </el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
+            <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>
+                </el-radio-group>
+                <el-row style="margin-top: 20px" v-if="confShowType === 'base'">
+                    <el-col :span="1"><br /></el-col>
+                    <el-col :span="10">
+                        <el-form :model="form" ref="formRef" label-width="120px">
+                            <el-form-item :label="$t('container.mirrors')" prop="mirrors">
+                                <el-input
+                                    type="textarea"
+                                    :placeholder="$t('container.mirrorHelper')"
+                                    :autosize="{ minRows: 3, maxRows: 10 }"
+                                    v-model="form.mirrors"
+                                />
+                                <span class="input-help">{{ $t('container.mirrorsHelper') }}</span>
+                            </el-form-item>
+                            <el-form-item :label="$t('container.registries')" prop="registries">
+                                <el-input
+                                    type="textarea"
+                                    :placeholder="$t('container.registrieHelper')"
+                                    :autosize="{ minRows: 3, maxRows: 10 }"
+                                    v-model="form.registries"
+                                />
+                            </el-form-item>
+                            <el-form-item label="live-restore" prop="liveRestore">
+                                <el-switch v-model="form.liveRestore"></el-switch>
+                                <span class="input-help">{{ $t('container.liveHelper') }}</span>
+                            </el-form-item>
+                            <el-form-item label="cgroup-driver" prop="cgroupDriver">
+                                <el-radio-group v-model="form.cgroupDriver">
+                                    <el-radio label="cgroupfs">cgroupfs</el-radio>
+                                    <el-radio label="systemd">systemd</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                                    {{ $t('commons.button.save') }}
+                                </el-button>
+                            </el-form-item>
+                        </el-form>
+                    </el-col>
+                </el-row>
 
-            <div v-if="confShowType === 'all'">
-                <codemirror
-                    :autofocus="true"
-                    placeholder="None data"
-                    :indent-with-tab="true"
-                    :tabSize="4"
-                    style="margin-top: 10px; height: calc(100vh - 380px)"
-                    :lineWrapping="true"
-                    :matchBrackets="true"
-                    theme="cobalt"
-                    :styleActiveLine="true"
-                    :extensions="extensions"
-                    v-model="dockerConf"
-                    :readOnly="true"
-                />
-                <el-button :disabled="loading" type="primary" @click="onSaveFile" style="margin-top: 5px">
-                    {{ $t('commons.button.save') }}
-                </el-button>
-            </div>
+                <div v-if="confShowType === 'all'">
+                    <codemirror
+                        :autofocus="true"
+                        placeholder="None data"
+                        :indent-with-tab="true"
+                        :tabSize="4"
+                        style="margin-top: 10px; height: calc(100vh - 380px)"
+                        :lineWrapping="true"
+                        :matchBrackets="true"
+                        theme="cobalt"
+                        :styleActiveLine="true"
+                        :extensions="extensions"
+                        v-model="dockerConf"
+                        :readOnly="true"
+                    />
+                    <el-button :disabled="loading" type="primary" @click="onSaveFile" style="margin-top: 5px">
+                        {{ $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';
diff --git a/frontend/src/views/container/template/index.vue b/frontend/src/views/container/template/index.vue
index 6d30f774a..bb8267622 100644
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@@ -9,35 +9,42 @@
             <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">
-                <template #toolbar>
-                    <el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
-                        {{ $t('commons.button.create') }}
-                    </el-button>
-                    <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
-                        {{ $t('commons.button.delete') }}
-                    </el-button>
-                </template>
-                <el-table-column type="selection" fix />
-                <el-table-column
-                    :label="$t('commons.table.name')"
-                    show-overflow-tooltip
-                    min-width="100"
-                    prop="name"
-                    fix
+            <LayoutContent :header="$t('container.composeTemplate')">
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    v-model:selects="selects"
+                    :data="data"
+                    @search="search"
                 >
-                    <template #default="{ row }">
-                        <el-link @click="onOpenDetail(row)" type="primary">{{ row.name }}</el-link>
+                    <template #toolbar>
+                        <el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
+                            {{ $t('commons.button.create') }}
+                        </el-button>
+                        <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
                     </template>
-                </el-table-column>
-                <el-table-column :label="$t('container.description')" prop="description" min-width="200" fix />
-                <el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
-                    <template #default="{ row }">
-                        {{ dateFromat(0, 0, row.createdAt) }}
-                    </template>
-                </el-table-column>
-                <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
-            </ComplexTable>
+                    <el-table-column type="selection" fix />
+                    <el-table-column
+                        :label="$t('commons.table.name')"
+                        show-overflow-tooltip
+                        min-width="100"
+                        prop="name"
+                        fix
+                    >
+                        <template #default="{ row }">
+                            <el-link @click="onOpenDetail(row)" type="primary">{{ row.name }}</el-link>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('container.description')" prop="description" min-width="200" fix />
+                    <el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
+                        <template #default="{ row }">
+                            {{ dateFromat(0, 0, row.createdAt) }}
+                        </template>
+                    </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';
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index beed13c80..68ca26b65 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -9,36 +9,54 @@
             <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">
-                <template #toolbar>
-                    <el-button icon="Plus" type="primary" @click="onCreate()">
-                        {{ $t('commons.button.create') }}
-                    </el-button>
-                    <el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
-                        {{ $t('commons.button.delete') }}
-                    </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>
-                    <template #default="{ row }">
-                        <el-link @click="onInspect(row.name)" type="primary">{{ row.name }}</el-link>
+            <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') }}
+                        </el-button>
+                        <el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
                     </template>
-                </el-table-column>
-                <el-table-column
-                    :label="$t('container.mountpoint')"
-                    show-overflow-tooltip
-                    min-width="120"
-                    prop="mountpoint"
-                />
-                <el-table-column :label="$t('container.driver')" show-overflow-tooltip min-width="80" prop="driver" />
-                <el-table-column
-                    prop="createdAt"
-                    min-width="90"
-                    :label="$t('commons.table.date')"
-                    :formatter="dateFromat"
-                />
-                <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
-            </ComplexTable>
+                    <el-table-column type="selection" 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>
+                    </el-table-column>
+                    <el-table-column
+                        :label="$t('container.mountpoint')"
+                        show-overflow-tooltip
+                        min-width="120"
+                        prop="mountpoint"
+                    />
+                    <el-table-column
+                        :label="$t('container.driver')"
+                        show-overflow-tooltip
+                        min-width="80"
+                        prop="driver"
+                    />
+                    <el-table-column
+                        prop="createdAt"
+                        min-width="90"
+                        :label="$t('commons.table.date')"
+                        :formatter="dateFromat"
+                    />
+                    <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';
diff --git a/frontend/src/views/cronjob/index.vue b/frontend/src/views/cronjob/index.vue
index 87cf4bec3..d535d7009 100644
--- a/frontend/src/views/cronjob/index.vue
+++ b/frontend/src/views/cronjob/index.vue
@@ -1,83 +1,94 @@
 <template>
     <div>
-        <ComplexTable
-            :pagination-config="paginationConfig"
-            v-model:selects="selects"
-            @search="search"
-            style="margin-top: 20px"
-            :data="data"
-        >
-            <template #toolbar>
-                <el-button type="primary" icon="Plus" @click="onOpenDialog('create')">
-                    {{ $t('commons.button.create') }}
-                </el-button>
-                <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
-                    {{ $t('commons.button.delete') }}
-                </el-button>
-            </template>
-            <el-table-column type="selection" fix />
-            <el-table-column :label="$t('cronjob.taskName')" prop="name" />
-            <el-table-column :label="$t('commons.table.status')" prop="status">
-                <template #default="{ row }">
-                    <el-button
-                        v-if="row.status === 'Enable'"
-                        @click="onChangeStatus(row.id, 'disable')"
-                        link
-                        type="success"
-                    >
-                        {{ $t('commons.status.enabled') }}
-                    </el-button>
-                    <el-button v-else link type="danger" @click="onChangeStatus(row.id, 'enable')">
-                        {{ $t('commons.status.disabled') }}
-                    </el-button>
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('cronjob.cronSpec')">
-                <template #default="{ row }">
-                    <span v-if="row.specType.indexOf('N') === -1 || row.specType === 'perWeek'">
-                        {{ $t('cronjob.' + row.specType) }}
-                    </span>
-                    <span v-else>{{ $t('cronjob.per') }}</span>
-                    <span v-if="row.specType === 'perMonth'">
-                        {{ row.day }}{{ $t('cronjob.day') }} {{ loadZero(row.hour) }} :
-                        {{ loadZero(row.minute) }}
-                    </span>
-                    <span v-if="row.specType === 'perWeek'">
-                        {{ loadWeek(row.week) }} {{ loadZero(row.hour) }} : {{ loadZero(row.minute) }}
-                    </span>
-                    <span v-if="row.specType === 'perDay'">
-                        &#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) }}
-                    </span>
-                    <span v-if="row.specType === 'perNHour'">
-                        {{ row.hour }}{{ $t('cronjob.hour') }}, {{ loadZero(row.minute) }}
-                    </span>
-                    <span v-if="row.specType === 'perHour'">{{ loadZero(row.minute) }}</span>
-                    <span v-if="row.specType === 'perNMinute'">{{ row.minute }}{{ $t('cronjob.minute') }}</span>
-                    {{ $t('cronjob.handle') }}
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('cronjob.retainCopies')" prop="retainCopies" />
-            <el-table-column :label="$t('cronjob.lastRecrodTime')" prop="lastRecrodTime">
-                <template #default="{ row }">
-                    {{ row.lastRecrodTime }}
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('cronjob.target')" prop="targetDir">
-                <template #default="{ row }">
-                    {{ loadBackupName(row.targetDir) }}
-                </template>
-            </el-table-column>
-            <fu-table-operations
-                width="200px"
-                :buttons="buttons"
-                :ellipsis="10"
-                :label="$t('commons.table.operate')"
-                fix
-            />
-        </ComplexTable>
+        <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"
+                    :data="data"
+                >
+                    <template #toolbar>
+                        <el-button type="primary" icon="Plus" @click="onOpenDialog('create')">
+                            {{ $t('commons.button.create') }}
+                        </el-button>
+                        <el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                    </template>
+                    <el-table-column type="selection" fix />
+                    <el-table-column :label="$t('cronjob.taskName')" prop="name" />
+                    <el-table-column :label="$t('commons.table.status')" prop="status">
+                        <template #default="{ row }">
+                            <el-button
+                                v-if="row.status === 'Enable'"
+                                @click="onChangeStatus(row.id, 'disable')"
+                                link
+                                type="success"
+                            >
+                                {{ $t('commons.status.enabled') }}
+                            </el-button>
+                            <el-button v-else link type="danger" @click="onChangeStatus(row.id, 'enable')">
+                                {{ $t('commons.status.disabled') }}
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('cronjob.cronSpec')">
+                        <template #default="{ row }">
+                            <span v-if="row.specType.indexOf('N') === -1 || row.specType === 'perWeek'">
+                                {{ $t('cronjob.' + row.specType) }}
+                            </span>
+                            <span v-else>{{ $t('cronjob.per') }}</span>
+                            <span v-if="row.specType === 'perMonth'">
+                                {{ row.day }}{{ $t('cronjob.day') }} {{ loadZero(row.hour) }} :
+                                {{ loadZero(row.minute) }}
+                            </span>
+                            <span v-if="row.specType === 'perWeek'">
+                                {{ loadWeek(row.week) }} {{ loadZero(row.hour) }} : {{ loadZero(row.minute) }}
+                            </span>
+                            <span v-if="row.specType === 'perDay'">
+                                &#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) }}
+                            </span>
+                            <span v-if="row.specType === 'perNHour'">
+                                {{ row.hour }}{{ $t('cronjob.hour') }}, {{ loadZero(row.minute) }}
+                            </span>
+                            <span v-if="row.specType === 'perHour'">{{ loadZero(row.minute) }}</span>
+                            <span v-if="row.specType === 'perNMinute'">{{ row.minute }}{{ $t('cronjob.minute') }}</span>
+                            {{ $t('cronjob.handle') }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('cronjob.retainCopies')" prop="retainCopies" />
+                    <el-table-column :label="$t('cronjob.lastRecrodTime')" prop="lastRecrodTime">
+                        <template #default="{ row }">
+                            {{ row.lastRecrodTime }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('cronjob.target')" prop="targetDir">
+                        <template #default="{ row }">
+                            {{ loadBackupName(row.targetDir) }}
+                        </template>
+                    </el-table-column>
+                    <fu-table-operations
+                        width="200px"
+                        :buttons="buttons"
+                        :ellipsis="10"
+                        :label="$t('commons.table.operate')"
+                        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,
diff --git a/frontend/src/views/log/login/index.vue b/frontend/src/views/log/login/index.vue
index 47aa787cb..bb3a2cd9c 100644
--- a/frontend/src/views/log/login/index.vue
+++ b/frontend/src/views/log/login/index.vue
@@ -2,35 +2,37 @@
     <div>
         <Submenu activeName="login" />
         <el-card style="margin-top: 20px">
-            <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
-                <template #toolbar>
-                    <el-button type="primary" @click="onClean()">
-                        {{ $t('logs.deleteLogs') }}
-                    </el-button>
-                </template>
-
-                <el-table-column min-width="40" :label="$t('logs.loginIP')" prop="ip" />
-                <el-table-column min-width="40" :label="$t('logs.loginAddress')" prop="address" />
-                <el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" />
-                <el-table-column min-width="40" :label="$t('logs.loginStatus')" prop="status">
-                    <template #default="{ row }">
-                        <div v-if="row.status === 'Success'">
-                            <el-tag type="success">{{ $t('commons.status.success') }}</el-tag>
-                        </div>
-                        <div v-else>
-                            <el-tooltip class="box-item" effect="dark" :content="row.message" placement="top-start">
-                                <el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
-                            </el-tooltip>
-                        </div>
+            <LayoutContent :header="$t('logs.login')">
+                <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
+                    <template #toolbar>
+                        <el-button type="primary" @click="onClean()">
+                            {{ $t('logs.deleteLogs') }}
+                        </el-button>
                     </template>
-                </el-table-column>
-                <el-table-column
-                    prop="createdAt"
-                    :label="$t('commons.table.date')"
-                    :formatter="dateFromat"
-                    show-overflow-tooltip
-                />
-            </ComplexTable>
+
+                    <el-table-column min-width="40" :label="$t('logs.loginIP')" prop="ip" />
+                    <el-table-column min-width="40" :label="$t('logs.loginAddress')" prop="address" />
+                    <el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" />
+                    <el-table-column min-width="40" :label="$t('logs.loginStatus')" prop="status">
+                        <template #default="{ row }">
+                            <div v-if="row.status === 'Success'">
+                                <el-tag type="success">{{ $t('commons.status.success') }}</el-tag>
+                            </div>
+                            <div v-else>
+                                <el-tooltip class="box-item" effect="dark" :content="row.message" placement="top-start">
+                                    <el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
+                                </el-tooltip>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        prop="createdAt"
+                        :label="$t('commons.table.date')"
+                        :formatter="dateFromat"
+                        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';
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index 93a1ec40d..2476f327c 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -2,46 +2,48 @@
     <div>
         <Submenu activeName="operation" />
         <el-card style="margin-top: 20px">
-            <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
-                <template #toolbar>
-                    <el-button type="primary" @click="onClean()">
-                        {{ $t('logs.deleteLogs') }}
-                    </el-button>
-                </template>
+            <LayoutContent :header="$t('logs.operation')">
+                <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
+                    <template #toolbar>
+                        <el-button type="primary" @click="onClean()">
+                            {{ $t('logs.deleteLogs') }}
+                        </el-button>
+                    </template>
 
-                <el-table-column :label="$t('logs.resource')" prop="group" fix>
-                    <template #default="{ row }">
-                        {{ $t('logs.detail.' + row.group) }}
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('logs.operate')" min-width="150px" prop="detailZH" />
-                <el-table-column :label="$t('logs.status')" prop="status">
-                    <template #default="{ row }">
-                        <el-tag v-if="row.status === 'Success'" class="ml-2" type="success">
-                            {{ $t('commons.status.success') }}
-                        </el-tag>
-                        <div v-else>
-                            <el-popover
-                                placement="top-start"
-                                :title="$t('commons.table.message')"
-                                :width="400"
-                                trigger="hover"
-                                :content="row.message"
-                            >
-                                <template #reference>
-                                    <el-tag class="ml-2" type="danger">{{ $t('commons.status.failed') }}</el-tag>
-                                </template>
-                            </el-popover>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    prop="createdAt"
-                    :label="$t('commons.table.date')"
-                    :formatter="dateFromat"
-                    show-overflow-tooltip
-                />
-            </ComplexTable>
+                    <el-table-column :label="$t('logs.resource')" prop="group" fix>
+                        <template #default="{ row }">
+                            {{ $t('logs.detail.' + row.group) }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('logs.operate')" min-width="150px" prop="detailZH" />
+                    <el-table-column :label="$t('logs.status')" prop="status">
+                        <template #default="{ row }">
+                            <el-tag v-if="row.status === 'Success'" class="ml-2" type="success">
+                                {{ $t('commons.status.success') }}
+                            </el-tag>
+                            <div v-else>
+                                <el-popover
+                                    placement="top-start"
+                                    :title="$t('commons.table.message')"
+                                    :width="400"
+                                    trigger="hover"
+                                    :content="row.message"
+                                >
+                                    <template #reference>
+                                        <el-tag class="ml-2" type="danger">{{ $t('commons.status.failed') }}</el-tag>
+                                    </template>
+                                </el-popover>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        prop="createdAt"
+                        :label="$t('commons.table.date')"
+                        :formatter="dateFromat"
+                        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';
diff --git a/frontend/src/views/log/system/index.vue b/frontend/src/views/log/system/index.vue
index 310060578..10e7c229a 100644
--- a/frontend/src/views/log/system/index.vue
+++ b/frontend/src/views/log/system/index.vue
@@ -2,27 +2,30 @@
     <div>
         <Submenu activeName="system" />
         <el-card style="margin-top: 20px">
-            <codemirror
-                :autofocus="true"
-                placeholder="None data"
-                :indent-with-tab="true"
-                :tabSize="4"
-                style="height: calc(100vh - 150px)"
-                :lineWrapping="true"
-                :matchBrackets="true"
-                theme="cobalt"
-                :styleActiveLine="true"
-                :extensions="extensions"
-                @ready="handleReady"
-                v-model="logs"
-                :readOnly="true"
-            />
+            <LayoutContent :header="$t('logs.system')">
+                <codemirror
+                    :autofocus="true"
+                    placeholder="None data"
+                    :indent-with-tab="true"
+                    :tabSize="4"
+                    style="height: calc(100vh - 180px)"
+                    :lineWrapping="true"
+                    :matchBrackets="true"
+                    theme="cobalt"
+                    :styleActiveLine="true"
+                    :extensions="extensions"
+                    @ready="handleReady"
+                    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';
diff --git a/frontend/src/views/setting/about/index.vue b/frontend/src/views/setting/about/index.vue
index 2a9fefb64..da466cd55 100644
--- a/frontend/src/views/setting/about/index.vue
+++ b/frontend/src/views/setting/about/index.vue
@@ -2,41 +2,38 @@
     <div>
         <Submenu activeName="about" />
         <el-card style="margin-top: 20px">
-            <template #header>
-                <div class="card-header">
-                    <span>{{ $t('setting.about') }}</span>
+            <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" />
+                    </div>
+                    <h3>{{ $t('setting.description') }}</h3>
+                    <h3>
+                        {{ version }}
+                        <el-button type="primary" link @click="onLoadUpgradeInfo">
+                            {{ $t('setting.upgradeCheck') }}
+                        </el-button>
+                    </h3>
+                    <div style="margin-top: 10px">
+                        <el-link @click="toGithub">
+                            <svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-huaban88"></svg-icon>
+                            <span style="line-height: 20px">{{ $t('setting.project') }}</span>
+                        </el-link>
+                        <el-link @click="toIssue" style="margin-left: 15px">
+                            <svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-bug"></svg-icon>
+                            <span>{{ $t('setting.issue') }}</span>
+                        </el-link>
+                        <el-link @click="toTalk" style="margin-left: 15px">
+                            <svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-taolun"></svg-icon>
+                            <span>{{ $t('setting.chat') }}</span>
+                        </el-link>
+                        <el-link @click="toGithubStar" style="margin-left: 15px">
+                            <svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-star"></svg-icon>
+                            <span>{{ $t('setting.star') }}</span>
+                        </el-link>
+                    </div>
                 </div>
-            </template>
-            <div style="text-align: center">
-                <div style="justify-self: center">
-                    <img style="width: 80px" src="@/assets/images/ko_image.png" />
-                </div>
-                <h3>{{ $t('setting.description') }}</h3>
-                <h3>
-                    {{ version }}
-                    <el-button type="primary" link @click="onLoadUpgradeInfo">
-                        {{ $t('setting.upgradeCheck') }}
-                    </el-button>
-                </h3>
-                <div style="margin-top: 10px">
-                    <el-link @click="toGithub">
-                        <svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-huaban88"></svg-icon>
-                        <span style="line-height: 20px">{{ $t('setting.project') }}</span>
-                    </el-link>
-                    <el-link @click="toIssue" style="margin-left: 15px">
-                        <svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-bug"></svg-icon>
-                        <span>{{ $t('setting.issue') }}</span>
-                    </el-link>
-                    <el-link @click="toTalk" style="margin-left: 15px">
-                        <svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-taolun"></svg-icon>
-                        <span>{{ $t('setting.chat') }}</span>
-                    </el-link>
-                    <el-link @click="toGithubStar" style="margin-left: 15px">
-                        <svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-star"></svg-icon>
-                        <span>{{ $t('setting.star') }}</span>
-                    </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';
diff --git a/frontend/src/views/setting/backup-account/index.vue b/frontend/src/views/setting/backup-account/index.vue
index bb70f7b82..2038c0ee5 100644
--- a/frontend/src/views/setting/backup-account/index.vue
+++ b/frontend/src/views/setting/backup-account/index.vue
@@ -2,186 +2,213 @@
     <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">
-                <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>
-                            <div style="float: right">
-                                <el-button round @click="onOpenDialog('edit', 'local', localData)">
-                                    {{ $t('commons.button.edit') }}
-                                </el-button>
-                            </div>
-                        </template>
-                        <el-form-item :label="$t('setting.currentPath')">
-                            {{ localData.varsJson['dir'] }}
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.createdAt')">
-                            {{ dateFromat(0, 0, localData.createdAt) }}
-                        </el-form-item>
-                    </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">
-                <el-col :span="12">
-                    <el-card>
-                        <template #header>
-                            <svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
-                            <span style="font-size: 16px; font-weight: 500">&nbsp;MIMIO</span>
-                            <div style="float: right">
-                                <el-button :disabled="minioData.id === 0" round @click="onBatchDelete(minioData)">
-                                    {{ $t('commons.button.delete') }}
-                                </el-button>
-                                <el-button
-                                    round
-                                    :disabled="minioData.id === 0"
-                                    @click="onOpenDialog('edit', 'MINIO', minioData)"
-                                >
-                                    {{ $t('commons.button.edit') }}
-                                </el-button>
-                            </div>
-                        </template>
-                        <div v-if="minioData.id !== 0">
-                            <el-form-item label="Endpoint">
-                                {{ minioData.varsJson['endpoint'] }}
-                            </el-form-item>
-                            <el-form-item label="Bucket">
-                                {{ minioData.bucket }}
+            <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>
+                                <div style="float: right">
+                                    <el-button round @click="onOpenDialog('edit', 'local', localData)">
+                                        {{ $t('commons.button.edit') }}
+                                    </el-button>
+                                </div>
+                            </template>
+                            <el-form-item :label="$t('setting.currentPath')">
+                                {{ localData.varsJson['dir'] }}
                             </el-form-item>
                             <el-form-item :label="$t('commons.table.createdAt')">
-                                {{ dateFromat(0, 0, minioData.createdAt) }}
+                                {{ dateFromat(0, 0, localData.createdAt) }}
                             </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')">
-                                {{ $t('setting.createBackupAccount', ['MINIO']) }}
-                            </el-button>
-                        </el-alert>
-                    </el-card>
-                </el-col>
-                <el-col :span="12">
-                    <el-card>
-                        <template #header>
-                            <svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
-                            <span style="font-size: 16px; font-weight: 500">&nbsp;OSS</span>
-                            <div style="float: right">
-                                <el-button round :disabled="ossData.id === 0" @click="onBatchDelete(ossData)">
-                                    {{ $t('commons.button.delete') }}
-                                </el-button>
-                                <el-button
-                                    round
-                                    :disabled="ossData.id === 0"
-                                    @click="onOpenDialog('edit', 'OSS', ossData)"
-                                >
-                                    {{ $t('commons.button.edit') }}
-                                </el-button>
+                        </el-card>
+                    </el-col>
+                </el-row>
+            </LayoutContent>
+
+            <LayoutContent :header="$t('setting.thirdParty')" style="margin-top: 20px">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-card>
+                            <template #header>
+                                <svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
+                                <span style="font-size: 16px; font-weight: 500">&nbsp;MIMIO</span>
+                                <div style="float: right">
+                                    <el-button :disabled="minioData.id === 0" round @click="onBatchDelete(minioData)">
+                                        {{ $t('commons.button.delete') }}
+                                    </el-button>
+                                    <el-button
+                                        round
+                                        :disabled="minioData.id === 0"
+                                        @click="onOpenDialog('edit', 'MINIO', minioData)"
+                                    >
+                                        {{ $t('commons.button.edit') }}
+                                    </el-button>
+                                </div>
+                            </template>
+                            <div v-if="minioData.id !== 0">
+                                <el-form-item label="Endpoint">
+                                    {{ minioData.varsJson['endpoint'] }}
+                                </el-form-item>
+                                <el-form-item label="Bucket">
+                                    {{ minioData.bucket }}
+                                </el-form-item>
+                                <el-form-item :label="$t('commons.table.createdAt')">
+                                    {{ dateFromat(0, 0, minioData.createdAt) }}
+                                </el-form-item>
                             </div>
-                        </template>
-                        <div v-if="ossData.id !== 0">
-                            <el-form-item label="Endpoint">
-                                {{ ossData.varsJson['endpoint'] }}
-                            </el-form-item>
-                            <el-form-item label="Bucket">
-                                {{ ossData.bucket }}
-                            </el-form-item>
-                            <el-form-item :label="$t('commons.table.createdAt')">
-                                {{ dateFromat(0, 0, ossData.createdAt) }}
-                            </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')">
-                                {{ $t('setting.createBackupAccount', ['OSS']) }}
-                            </el-button>
-                        </el-alert>
-                    </el-card>
-                </el-col>
-            </el-row>
-            <el-row :gutter="20" style="margin-top: 20px">
-                <el-col :span="12">
-                    <el-card>
-                        <template #header>
-                            <svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon>
-                            <span style="font-size: 16px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span>
-                            <div style="float: right">
-                                <el-button round :disabled="s3Data.id === 0" @click="onBatchDelete(s3Data)">
-                                    {{ $t('commons.button.delete') }}
-                                </el-button>
-                                <el-button
-                                    round
-                                    :disabled="s3Data.id === 0"
-                                    @click="onOpenDialog('edit', 'S3', s3Data)"
-                                >
-                                    {{ $t('commons.button.edit') }}
-                                </el-button>
-                            </div>
-                        </template>
-                        <div v-if="s3Data.id !== 0">
-                            <el-form-item label="Region">
-                                {{ s3Data.varsJson['region'] }}
-                            </el-form-item>
-                            <el-form-item label="Endpoint">
-                                {{ s3Data.varsJson['endpoint'] }}
-                            </el-form-item>
-                            <el-form-item label="Bucket">
-                                {{ s3Data.bucket }}
-                            </el-form-item>
-                            <el-form-item :label="$t('commons.table.createdAt')">
-                                {{ dateFromat(0, 0, s3Data.createdAt) }}
-                            </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')">
-                                {{ $t('setting.createBackupAccount', ['S3']) }}
-                            </el-button>
-                        </el-alert>
-                    </el-card>
-                </el-col>
-                <el-col :span="12">
-                    <el-card>
-                        <template #header>
-                            <svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon>
-                            <span style="font-size: 16px; font-weight: 500">&nbsp;SFTP</span>
-                            <div style="float: right">
-                                <el-button round :disabled="sftpData.id === 0" @click="onBatchDelete(sftpData)">
-                                    {{ $t('commons.button.delete') }}
-                                </el-button>
+                            <el-alert v-else center style="height: 127px; background-color: #e2e4ec" :closable="false">
                                 <el-button
+                                    size="large"
                                     round
                                     plain
-                                    :disabled="sftpData.id === 0"
-                                    @click="onOpenDialog('edit', 'SFTP', sftpData)"
+                                    type="primary"
+                                    @click="onOpenDialog('create', 'MINIO')"
                                 >
-                                    {{ $t('commons.button.edit') }}
+                                    {{ $t('setting.createBackupAccount', ['MINIO']) }}
                                 </el-button>
+                            </el-alert>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-card>
+                            <template #header>
+                                <svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
+                                <span style="font-size: 16px; font-weight: 500">&nbsp;OSS</span>
+                                <div style="float: right">
+                                    <el-button round :disabled="ossData.id === 0" @click="onBatchDelete(ossData)">
+                                        {{ $t('commons.button.delete') }}
+                                    </el-button>
+                                    <el-button
+                                        round
+                                        :disabled="ossData.id === 0"
+                                        @click="onOpenDialog('edit', 'OSS', ossData)"
+                                    >
+                                        {{ $t('commons.button.edit') }}
+                                    </el-button>
+                                </div>
+                            </template>
+                            <div v-if="ossData.id !== 0">
+                                <el-form-item label="Endpoint">
+                                    {{ ossData.varsJson['endpoint'] }}
+                                </el-form-item>
+                                <el-form-item label="Bucket">
+                                    {{ ossData.bucket }}
+                                </el-form-item>
+                                <el-form-item :label="$t('commons.table.createdAt')">
+                                    {{ dateFromat(0, 0, ossData.createdAt) }}
+                                </el-form-item>
                             </div>
-                        </template>
-                        <div v-if="sftpData.id !== 0">
-                            <el-form-item :label="$t('setting.address')">
-                                {{ sftpData.varsJson['address'] }}
-                            </el-form-item>
-                            <el-form-item :label="$t('setting.port')">
-                                {{ sftpData.varsJson['port'] }}
-                            </el-form-item>
-                            <el-form-item :label="$t('setting.path')">
-                                {{ sftpData.bucket }}
-                            </el-form-item>
-                            <el-form-item :label="$t('commons.table.createdAt')">
-                                {{ dateFromat(0, 0, sftpData.createdAt) }}
-                            </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')">
-                                {{ $t('setting.createBackupAccount', ['SFTP']) }}
-                            </el-button>
-                        </el-alert>
-                    </el-card>
-                </el-col>
-            </el-row>
+                            <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')"
+                                >
+                                    {{ $t('setting.createBackupAccount', ['OSS']) }}
+                                </el-button>
+                            </el-alert>
+                        </el-card>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20" style="margin-top: 20px">
+                    <el-col :span="12">
+                        <el-card>
+                            <template #header>
+                                <svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon>
+                                <span style="font-size: 16px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span>
+                                <div style="float: right">
+                                    <el-button round :disabled="s3Data.id === 0" @click="onBatchDelete(s3Data)">
+                                        {{ $t('commons.button.delete') }}
+                                    </el-button>
+                                    <el-button
+                                        round
+                                        :disabled="s3Data.id === 0"
+                                        @click="onOpenDialog('edit', 'S3', s3Data)"
+                                    >
+                                        {{ $t('commons.button.edit') }}
+                                    </el-button>
+                                </div>
+                            </template>
+                            <div v-if="s3Data.id !== 0">
+                                <el-form-item label="Region">
+                                    {{ s3Data.varsJson['region'] }}
+                                </el-form-item>
+                                <el-form-item label="Endpoint">
+                                    {{ s3Data.varsJson['endpoint'] }}
+                                </el-form-item>
+                                <el-form-item label="Bucket">
+                                    {{ s3Data.bucket }}
+                                </el-form-item>
+                                <el-form-item :label="$t('commons.table.createdAt')">
+                                    {{ dateFromat(0, 0, s3Data.createdAt) }}
+                                </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')"
+                                >
+                                    {{ $t('setting.createBackupAccount', ['S3']) }}
+                                </el-button>
+                            </el-alert>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-card>
+                            <template #header>
+                                <svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon>
+                                <span style="font-size: 16px; font-weight: 500">&nbsp;SFTP</span>
+                                <div style="float: right">
+                                    <el-button round :disabled="sftpData.id === 0" @click="onBatchDelete(sftpData)">
+                                        {{ $t('commons.button.delete') }}
+                                    </el-button>
+                                    <el-button
+                                        round
+                                        plain
+                                        :disabled="sftpData.id === 0"
+                                        @click="onOpenDialog('edit', 'SFTP', sftpData)"
+                                    >
+                                        {{ $t('commons.button.edit') }}
+                                    </el-button>
+                                </div>
+                            </template>
+                            <div v-if="sftpData.id !== 0">
+                                <el-form-item :label="$t('setting.address')">
+                                    {{ sftpData.varsJson['address'] }}
+                                </el-form-item>
+                                <el-form-item :label="$t('setting.port')">
+                                    {{ sftpData.varsJson['port'] }}
+                                </el-form-item>
+                                <el-form-item :label="$t('setting.path')">
+                                    {{ sftpData.bucket }}
+                                </el-form-item>
+                                <el-form-item :label="$t('commons.table.createdAt')">
+                                    {{ dateFromat(0, 0, sftpData.createdAt) }}
+                                </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')"
+                                >
+                                    {{ $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';
diff --git a/frontend/src/views/setting/monitor/index.vue b/frontend/src/views/setting/monitor/index.vue
index 46442c814..d5c0b49d6 100644
--- a/frontend/src/views/setting/monitor/index.vue
+++ b/frontend/src/views/setting/monitor/index.vue
@@ -3,43 +3,44 @@
         <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>
-                <el-row>
-                    <el-col :span="1"><br /></el-col>
-                    <el-col :span="10">
-                        <el-form-item
-                            :label="$t('setting.enableMonitor')"
-                            :rules="Rules.requiredInput"
-                            prop="monitorStatus"
-                        >
-                            <el-switch
-                                @change="onSave(panelFormRef, 'MonitorStatus', form.monitorStatus)"
-                                v-model="form.monitorStatus"
-                                active-value="enable"
-                                inactive-value="disable"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.storeDays')" :rules="Rules.number" prop="monitorStoreDays">
-                            <el-input clearable v-model.number="form.monitorStoreDays">
-                                <template #append>
-                                    <el-button
-                                        @click="onSave(panelFormRef, 'MonitorStoreDays', form.monitorStoreDays)"
-                                        icon="Collection"
-                                    >
-                                        {{ $t('commons.button.save') }}
-                                    </el-button>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button @click="onClean()" icon="Delete">{{ $t('setting.cleanMonitor') }}</el-button>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+                <LayoutContent :header="$t('menu.monitor')">
+                    <el-row>
+                        <el-col :span="1"><br /></el-col>
+                        <el-col :span="10">
+                            <el-form-item
+                                :label="$t('setting.enableMonitor')"
+                                :rules="Rules.requiredInput"
+                                prop="monitorStatus"
+                            >
+                                <el-switch
+                                    @change="onSave(panelFormRef, 'MonitorStatus', form.monitorStatus)"
+                                    v-model="form.monitorStatus"
+                                    active-value="enable"
+                                    inactive-value="disable"
+                                />
+                            </el-form-item>
+                            <el-form-item
+                                :label="$t('setting.storeDays')"
+                                :rules="Rules.number"
+                                prop="monitorStoreDays"
+                            >
+                                <el-input clearable v-model.number="form.monitorStoreDays">
+                                    <template #append>
+                                        <el-button
+                                            @click="onSave(panelFormRef, 'MonitorStoreDays', form.monitorStoreDays)"
+                                            icon="Collection"
+                                        >
+                                            {{ $t('commons.button.save') }}
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button @click="onClean()" icon="Delete">{{ $t('setting.cleanMonitor') }}</el-button>
+                            </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';
diff --git a/frontend/src/views/setting/snapshot/index.vue b/frontend/src/views/setting/snapshot/index.vue
index c3267a07a..1afced35d 100644
--- a/frontend/src/views/setting/snapshot/index.vue
+++ b/frontend/src/views/setting/snapshot/index.vue
@@ -2,66 +2,73 @@
     <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">
-                <template #toolbar>
-                    <el-button type="primary" icon="Plus" @click="onCreate()">
-                        {{ $t('setting.createSnapshot') }}
-                    </el-button>
-                    <el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
-                        {{ $t('commons.button.delete') }}
-                    </el-button>
-                </template>
-                <el-table-column type="selection" fix />
-                <el-table-column
-                    show-overflow-tooltip
-                    :label="$t('commons.table.name')"
-                    min-width="100"
-                    prop="name"
-                    fix
-                />
-                <el-table-column
-                    :label="$t('commons.table.description')"
-                    min-width="150"
-                    show-overflow-tooltip
-                    prop="description"
-                />
-                <el-table-column :label="$t('setting.backupAccount')" min-width="150" prop="from" />
-                <el-table-column :label="$t('setting.backup')" min-width="80" prop="status">
-                    <template #default="{ row }">
-                        <el-tag v-if="row.status === 'Success'" type="success">
-                            {{ $t('commons.table.statusSuccess') }}
-                        </el-tag>
-                        <el-tag v-if="row.status === 'Waiting'" type="info">
-                            {{ $t('commons.table.statusWaiting') }}
-                        </el-tag>
-                        <el-tooltip
-                            v-if="row.status === 'Failed'"
-                            class="box-item"
-                            effect="dark"
-                            :content="row.message"
-                            placement="top-start"
-                        >
-                            <el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag>
-                        </el-tooltip>
+            <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') }}
+                        </el-button>
+                        <el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
                     </template>
-                </el-table-column>
-                <el-table-column
-                    prop="createdAt"
-                    :label="$t('commons.table.date')"
-                    :formatter="dateFromat"
-                    show-overflow-tooltip
-                />
-                <fu-table-operations
-                    width="200px"
-                    :ellipsis="10"
-                    :buttons="buttons"
-                    :label="$t('commons.table.operate')"
-                    fix
-                />
-            </ComplexTable>
+                    <el-table-column type="selection" fix />
+                    <el-table-column
+                        show-overflow-tooltip
+                        :label="$t('commons.table.name')"
+                        min-width="100"
+                        prop="name"
+                        fix
+                    />
+                    <el-table-column
+                        :label="$t('commons.table.description')"
+                        min-width="150"
+                        show-overflow-tooltip
+                        prop="description"
+                    />
+                    <el-table-column :label="$t('setting.backupAccount')" min-width="150" prop="from" />
+                    <el-table-column :label="$t('setting.backup')" min-width="80" prop="status">
+                        <template #default="{ row }">
+                            <el-tag v-if="row.status === 'Success'" type="success">
+                                {{ $t('commons.table.statusSuccess') }}
+                            </el-tag>
+                            <el-tag v-if="row.status === 'Waiting'" type="info">
+                                {{ $t('commons.table.statusWaiting') }}
+                            </el-tag>
+                            <el-tooltip
+                                v-if="row.status === 'Failed'"
+                                class="box-item"
+                                effect="dark"
+                                :content="row.message"
+                                placement="top-start"
+                            >
+                                <el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag>
+                            </el-tooltip>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        prop="createdAt"
+                        :label="$t('commons.table.date')"
+                        :formatter="dateFromat"
+                        show-overflow-tooltip
+                    />
+                    <fu-table-operations
+                        width="200px"
+                        :ellipsis="10"
+                        :buttons="buttons"
+                        :label="$t('commons.table.operate')"
+                        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';