From ed2f5c42d08e2e354b0b386dfab54c3affbbb6a2 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:48:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=9F=E4=B8=80=E6=8A=BD=E5=B1=89?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=20(#5691)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |   2 +-
 frontend/src/components/backup/index.vue      |  35 +-
 .../src/components/complex-table/index.vue    |   7 +-
 frontend/src/components/del-dialog/index.vue  |   4 +-
 frontend/src/components/drawer-pro/index.vue  | 122 ++++
 frontend/src/components/index.ts              |   2 +
 .../src/components/layout-content/index.vue   |  40 +-
 .../src/components/table-setting/index.vue    |   2 +-
 frontend/src/components/upload/index.vue      | 176 ++---
 frontend/src/views/app-store/detail/index.vue | 135 ++--
 .../views/app-store/detail/install/index.vue  | 244 +++----
 .../app-store/installed/detail/index.vue      | 199 +++---
 .../app-store/installed/ignore/index.vue      |  52 +-
 .../app-store/installed/upgrade/index.vue     | 171 +++--
 .../views/container/compose/create/index.vue  | 165 ++---
 .../views/container/compose/edit/index.vue    |  16 +-
 .../container/container/commit/index.vue      |  70 +-
 .../src/views/container/container/index.vue   |   1 +
 .../views/container/container/log/index.vue   | 111 +--
 .../container/container/monitor/index.vue     |  23 +-
 .../container/container/operate/index.vue     | 492 ++++++--------
 .../container/container/rename/index.vue      |  34 +-
 .../container/container/terminal/index.vue    |  99 ++-
 .../container/container/upgrade/index.vue     |  87 +--
 .../src/views/container/image/build/index.vue | 123 ++--
 frontend/src/views/container/image/index.vue  |   2 +-
 .../src/views/container/image/load/index.vue  |  32 +-
 .../src/views/container/image/pull/index.vue  |  79 +--
 .../src/views/container/image/push/index.vue  |  76 +--
 .../src/views/container/image/tag/index.vue   |  72 +-
 .../views/container/network/create/index.vue  | 240 +++----
 .../views/container/repo/operator/index.vue   | 110 ++-
 .../views/container/template/detail/index.vue |  15 +-
 .../container/template/operator/index.vue     |  70 +-
 .../views/container/volume/create/index.vue   | 124 ++--
 frontend/src/views/cronjob/backup/index.vue   |  30 +-
 frontend/src/views/cronjob/operate/index.vue  | 615 ++++++++---------
 frontend/src/views/cronjob/record/index.vue   |  42 +-
 .../src/views/database/mysql/bind/index.vue   |  59 +-
 .../src/views/database/mysql/conn/index.vue   | 187 +++--
 .../src/views/database/mysql/create/index.vue | 110 ++-
 frontend/src/views/database/mysql/index.vue   |   2 -
 .../views/database/mysql/password/index.vue   |  75 +-
 .../src/views/database/mysql/remote/index.vue |  21 +-
 .../database/mysql/remote/operate/index.vue   | 202 +++---
 .../views/database/mysql/setting/index.vue    |  90 ++-
 .../views/database/postgresql/bind/index.vue  |  40 +-
 .../views/database/postgresql/conn/index.vue  | 186 +++--
 .../database/postgresql/create/index.vue      |  63 +-
 .../database/postgresql/password/index.vue    |  41 +-
 .../database/postgresql/remote/index.vue      |  21 +-
 .../postgresql/remote/operate/index.vue       |  95 ++-
 .../database/postgresql/setting/index.vue     |  36 +-
 .../views/database/redis/command/index.vue    |  32 +-
 .../src/views/database/redis/conn/index.vue   | 156 ++---
 frontend/src/views/database/redis/index.vue   | 170 ++---
 .../src/views/database/redis/remote/index.vue |  21 +-
 .../database/redis/remote/operate/index.vue   |  85 +--
 .../views/database/redis/setting/index.vue    |   2 +-
 .../host/file-management/batch-role/index.vue |  45 +-
 .../file-management/change-role/index.vue     |  27 +-
 .../host/file-management/chown/index.vue      |  50 +-
 .../host/file-management/compress/index.vue   |  83 +--
 .../host/file-management/create/index.vue     |  87 +--
 .../host/file-management/decompress/index.vue |  63 +-
 .../host/file-management/detail/index.vue     |  54 +-
 .../host/file-management/download/index.vue   |  40 +-
 .../host/file-management/favorite/index.vue   |  21 +-
 .../src/views/host/file-management/index.vue  |   2 +-
 .../views/host/file-management/move/index.vue |  64 +-
 .../file-management/recycle-bin/index.vue     | 113 ++--
 .../host/file-management/rename/index.vue     |  42 +-
 .../host/file-management/upload/index.vue     | 148 ++--
 .../views/host/file-management/wget/index.vue |  71 +-
 .../host/firewall/forward/operate/index.vue   |  61 +-
 .../views/host/firewall/ip/operate/index.vue  |  71 +-
 .../host/firewall/port/operate/index.vue      | 100 ++-
 .../views/host/monitor/setting/days/index.vue |  51 +-
 .../host/monitor/setting/interval/index.vue   |  55 +-
 .../host/process/process/detail/index.vue     | 176 +++--
 .../src/views/host/ssh/ssh/address/index.vue  |  98 +--
 .../src/views/host/ssh/ssh/port/index.vue     |  47 +-
 .../src/views/host/ssh/ssh/pubkey/index.vue   | 103 ++-
 .../src/views/host/ssh/ssh/root/index.vue     |  57 +-
 .../src/views/host/terminal/command/index.vue |  66 +-
 .../host/terminal/host/change-group/index.vue |  59 +-
 .../host/terminal/host/operate/index.vue      | 182 +++--
 .../host/terminal/terminal/host-create.vue    | 156 ++---
 .../setting/backup-account/cos/index.vue      | 176 ++---
 .../setting/backup-account/kodo/index.vue     | 132 ++--
 .../setting/backup-account/local/index.vue    |  66 +-
 .../setting/backup-account/minio/index.vue    | 108 ++-
 .../setting/backup-account/onedrive/index.vue | 176 ++---
 .../setting/backup-account/oss/index.vue      | 142 ++--
 .../views/setting/backup-account/s3/index.vue | 144 ++--
 .../setting/backup-account/sftp/index.vue     |  95 +--
 .../setting/backup-account/webdav/index.vue   | 104 +--
 .../setting/panel/default-network/index.vue   |  64 +-
 .../views/setting/panel/hidemenu/index.vue    |  38 +-
 .../src/views/setting/panel/name/index.vue    |  51 +-
 .../views/setting/panel/password/index.vue    |  87 +--
 .../src/views/setting/panel/proxy/index.vue   | 133 ++--
 .../views/setting/panel/systemip/index.vue    |  53 +-
 .../src/views/setting/panel/timeout/index.vue |  51 +-
 .../views/setting/panel/username/index.vue    |  51 +-
 .../src/views/setting/safe/allowips/index.vue |  58 +-
 .../src/views/setting/safe/bind/index.vue     | 102 ++-
 .../src/views/setting/safe/domain/index.vue   |  53 +-
 .../src/views/setting/safe/entrance/index.vue |  69 +-
 frontend/src/views/setting/safe/mfa/index.vue | 134 ++--
 .../src/views/setting/safe/port/index.vue     |  44 +-
 .../src/views/setting/safe/response/index.vue |  59 +-
 frontend/src/views/setting/safe/ssl/index.vue | 241 +++----
 .../src/views/setting/safe/timeout/index.vue  |  54 +-
 .../setting/snapshot/ignore-rule/index.vue    |  89 +--
 .../views/setting/snapshot/import/index.vue   |  92 ++-
 frontend/src/views/setting/snapshot/index.vue |  78 +--
 .../views/setting/snapshot/status/index.vue   | 260 ++++---
 .../src/views/toolbox/device/dns/index.vue    | 116 ++--
 .../views/toolbox/device/hostname/index.vue   |  58 +-
 .../src/views/toolbox/device/hosts/index.vue  | 121 ++--
 .../src/views/toolbox/device/ntp/index.vue    |  64 +-
 .../src/views/toolbox/device/passwd/index.vue |  77 +--
 .../src/views/toolbox/device/swap/index.vue   | 173 +++--
 .../views/toolbox/device/time-zone/index.vue  | 115 ++--
 .../toolbox/fail2ban/ban-action/index.vue     | 103 ++-
 .../views/toolbox/fail2ban/ban-time/index.vue |  73 +-
 .../toolbox/fail2ban/find-time/index.vue      |  70 +-
 .../src/views/toolbox/fail2ban/ips/index.vue  |  26 +-
 .../views/toolbox/fail2ban/log-path/index.vue |  60 +-
 .../toolbox/fail2ban/max-retry/index.vue      |  57 +-
 .../src/views/toolbox/fail2ban/port/index.vue |  53 +-
 frontend/src/views/toolbox/ftp/log/index.vue  |  15 +-
 .../src/views/toolbox/ftp/operate/index.vue   |  69 +-
 .../views/toolbox/supervisor/config/index.vue |   2 +-
 .../views/toolbox/supervisor/create/index.vue |  66 +-
 .../views/toolbox/supervisor/file/index.vue   | 101 +--
 .../toolbox/supervisor/status/init/index.vue  |  55 +-
 .../website/runtime/go/operate/index.vue      | 271 ++++----
 .../website/runtime/java/operate/index.vue    | 272 ++++----
 .../website/runtime/node/module/index.vue     |  85 +--
 .../website/runtime/node/operate/index.vue    | 360 +++++-----
 .../website/runtime/php/create/index.vue      | 293 ++++----
 .../website/runtime/php/extensions/index.vue  |  47 +-
 .../views/website/ssl/acme-account/index.vue  |  76 +--
 frontend/src/views/website/ssl/ca/index.vue   |  68 +-
 .../src/views/website/ssl/create/index.vue    | 290 ++++----
 .../src/views/website/ssl/detail/index.vue    | 132 ++--
 .../views/website/ssl/dns-account/index.vue   |  56 +-
 frontend/src/views/website/ssl/index.vue      |   1 -
 .../src/views/website/ssl/upload/index.vue    |  88 +--
 .../views/website/website/create/index.vue    | 639 +++++++++---------
 .../views/website/website/default/index.vue   |  49 +-
 .../src/views/website/website/html/index.vue  |  38 +-
 154 files changed, 6464 insertions(+), 8584 deletions(-)
 create mode 100644 frontend/src/components/drawer-pro/index.vue

diff --git a/frontend/package.json b/frontend/package.json
index ba98f1c9a..ee83d9fc3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,7 +37,7 @@
         "codemirror": "^6.0.1",
         "echarts": "^5.5.0",
         "element-plus": "^2.7.5",
-        "fit2cloud-ui-plus": "^1.1.4",
+        "fit2cloud-ui-plus": "^1.1.5",
         "highlight.js": "^11.9.0",
         "js-base64": "^3.7.7",
         "md-editor-v3": "^2.11.3",
diff --git a/frontend/src/components/backup/index.vue b/frontend/src/components/backup/index.vue
index 9a813b590..8ebb9ffde 100644
--- a/frontend/src/components/backup/index.vue
+++ b/frontend/src/components/backup/index.vue
@@ -1,22 +1,12 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="backupVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader
-                    v-if="detailName"
-                    :header="$t('commons.button.backup')"
-                    :resource="name + '(' + detailName + ')'"
-                    :back="handleClose"
-                />
-                <DrawerHeader v-else :header="$t('commons.button.backup')" :resource="name" :back="handleClose" />
-            </template>
-
+    <DrawerPro
+        v-model="backupVisible"
+        :header="$t('commons.button.backup')"
+        :resource="detailName ? name + ' [' + detailName + ']' : name"
+        :back="handleClose"
+        size="large"
+    >
+        <template #content>
             <div class="mb-5" v-if="type === 'app'">
                 <el-alert :closable="false" type="warning">
                     <div class="mt-2 text-xs">
@@ -70,11 +60,9 @@
 
                 <fu-table-operations width="230px" :buttons="buttons" :label="$t('commons.table.operate')" fix />
             </ComplexTable>
-        </el-drawer>
-
-        <OpDialog ref="opRef" @search="search" />
-    </div>
-
+        </template>
+    </DrawerPro>
+    <OpDialog ref="opRef" @search="search" />
     <AppBackUp ref="backupRef" @close="search" />
     <AppRecover ref="recoverRef" />
 </template>
@@ -84,7 +72,6 @@ import { reactive, ref } from 'vue';
 import { computeSize, dateFormat, downloadFile } from '@/utils/util';
 import { getBackupList } from '@/api/modules/setting';
 import i18n from '@/lang';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { deleteBackupRecord, downloadBackupRecord, searchBackupRecords } from '@/api/modules/setting';
 import { Backup } from '@/api/interface/backup';
 import router from '@/routers';
diff --git a/frontend/src/components/complex-table/index.vue b/frontend/src/components/complex-table/index.vue
index d5c83cdae..68912da5a 100644
--- a/frontend/src/components/complex-table/index.vue
+++ b/frontend/src/components/complex-table/index.vue
@@ -3,7 +3,7 @@
         <div class="complex-table__header" v-if="slots.header || header">
             <slot name="header">{{ header }}</slot>
         </div>
-        <div v-if="slots.toolbar" class="bt-5">
+        <div v-if="slots.toolbar">
             <slot name="toolbar"></slot>
         </div>
 
@@ -48,7 +48,6 @@ const props = defineProps({
     paginationConfig: {
         type: Object,
         required: false,
-        default: () => {},
     },
     heightDiff: {
         type: Number,
@@ -126,6 +125,10 @@ onMounted(() => {
         font-size: 18px;
     }
 
+    .complex-table__body {
+        margin-top: 10px;
+    }
+
     .complex-table__toolbar {
         @include flex-row(space-between, center);
 
diff --git a/frontend/src/components/del-dialog/index.vue b/frontend/src/components/del-dialog/index.vue
index ffc777327..94a8feba4 100644
--- a/frontend/src/components/del-dialog/index.vue
+++ b/frontend/src/components/del-dialog/index.vue
@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import { onMounted, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
 
 defineOptions({ name: 'OpDialog' });
 
@@ -103,8 +103,6 @@ const handleClose = () => {
     open.value = false;
 };
 
-onMounted(() => {});
-
 defineExpose({
     acceptParams,
 });
diff --git a/frontend/src/components/drawer-pro/index.vue b/frontend/src/components/drawer-pro/index.vue
new file mode 100644
index 000000000..2df89f107
--- /dev/null
+++ b/frontend/src/components/drawer-pro/index.vue
@@ -0,0 +1,122 @@
+<template>
+    <el-drawer
+        v-model="localOpenPage"
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :size="size"
+    >
+        <template #header>
+            <el-page-header @back="handleBack">
+                <template #content>
+                    <span>{{ header }}</span>
+                    <span v-if="resource != ''">
+                        -
+                        <el-tooltip v-if="resource.length > 25" :content="resource" placement="bottom">
+                            <el-text type="primary">{{ resource.substring(0, 23) + '...' }}</el-text>
+                        </el-tooltip>
+                        <el-text type="primary" v-else>{{ resource }}</el-text>
+                    </span>
+                    <el-divider v-if="slots.buttons" direction="vertical" />
+                    <slot v-if="slots.buttons" name="buttons"></slot>
+                </template>
+                <template #extra>
+                    <el-tooltip :content="loadTooltip()" placement="top" v-if="fullScreen">
+                        <el-button @click="toggleFullscreen" link icon="FullScreen" plain class="mr-5"></el-button>
+                    </el-tooltip>
+                    <slot v-if="slots.extra" name="extra"></slot>
+                </template>
+            </el-page-header>
+        </template>
+
+        <div v-if="slots.content">
+            <slot name="content"></slot>
+        </div>
+        <el-row v-else>
+            <el-col :span="22" :offset="1">
+                <slot></slot>
+            </el-col>
+        </el-row>
+
+        <template #footer v-if="slots.footer">
+            <slot name="footer"></slot>
+        </template>
+    </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue';
+defineOptions({ name: 'DrawerPro' });
+import screenfull from 'screenfull';
+import i18n from '@/lang';
+
+const props = defineProps({
+    header: String,
+    back: Function,
+    resource: {
+        type: String,
+        default: '',
+    },
+    size: {
+        type: String,
+        default: 'normal',
+    },
+    modelValue: {
+        type: Boolean,
+        default: false,
+    },
+    fullScreen: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const slots = useSlots();
+
+const emit = defineEmits(['update:modelValue']);
+
+const size = computed(() => {
+    switch (props.size) {
+        case 'small':
+            return '30%';
+        case 'normal':
+            return '40%';
+        case 'large':
+            return '50%';
+        case 'full':
+            return '100%';
+        default:
+            return '50%';
+    }
+});
+
+const localOpenPage = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value: boolean) {
+        emit('update:modelValue', value);
+    },
+});
+
+const handleBack = () => {
+    if (props.back) {
+        props.back();
+    } else {
+        closePage();
+    }
+};
+
+const closePage = () => {
+    localOpenPage.value = false;
+};
+
+function toggleFullscreen() {
+    if (screenfull.isEnabled) {
+        screenfull.toggle();
+    }
+}
+const loadTooltip = () => {
+    return i18n.global.t('commons.button.' + (screenfull.isFullscreen ? 'quitFullscreen' : 'fullscreen'));
+};
+</script>
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 7cc84b273..3128c51a5 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -10,6 +10,7 @@ import Tooltip from '@/components/tooltip/index.vue';
 import CopyButton from '@/components/copy-button/index.vue';
 import MsgInfo from '@/components/msg-info/index.vue';
 import MainDiv from '@/components/main-div/index.vue';
+import DrawerPro from '@/components/drawer-pro/index.vue';
 export default {
     install(app: App) {
         app.component(LayoutContent.name, LayoutContent);
@@ -23,5 +24,6 @@ export default {
         app.component(TableSetting.name, TableSetting);
         app.component(MsgInfo.name, MsgInfo);
         app.component(MainDiv.name, MainDiv);
+        app.component(DrawerPro.name, DrawerPro);
     },
 };
diff --git a/frontend/src/components/layout-content/index.vue b/frontend/src/components/layout-content/index.vue
index 65eab012d..ab7e21d31 100644
--- a/frontend/src/components/layout-content/index.vue
+++ b/frontend/src/components/layout-content/index.vue
@@ -19,23 +19,29 @@
         </div>
         <div class="content-container__main" v-if="slots.main">
             <el-card>
-                <div class="content-container__title" v-if="slots.title || title">
+                <div class="content-container__title" v-if="title">
                     <slot name="title">
-                        <back-button
-                            :path="backPath"
-                            :name="backName"
-                            :to="backTo"
-                            :header="title"
-                            :reload="reload"
-                            v-if="showBack"
-                        >
-                            <template v-if="slots.leftToolBar" #buttons>
-                                <slot name="leftToolBar"></slot>
-                            </template>
-                            <template v-else-if="slots.buttons" #buttons>
-                                <slot name="buttons"></slot>
-                            </template>
-                        </back-button>
+                        <div v-if="showBack">
+                            <div class="flex justify-between">
+                                <back-button
+                                    :path="backPath"
+                                    :name="backName"
+                                    :to="backTo"
+                                    :header="title"
+                                    :reload="reload"
+                                >
+                                    <template v-if="slots.leftToolBar" #buttons>
+                                        <slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
+                                    </template>
+                                    <!-- <template v-else-if="slots.buttons" #buttons>
+                                        <slot name="buttons"></slot>
+                                    </template> -->
+                                </back-button>
+                                <div>
+                                    <slot name="rightToolBar" v-if="slots.rightToolBar"></slot>
+                                </div>
+                            </div>
+                        </div>
                         <div class="flex justify-between" v-else>
                             <div>
                                 {{ title }}
@@ -106,7 +112,7 @@ const showBack = computed(() => {
 }
 
 .content-container__title {
-    font-weight: 700;
+    font-weight: 400;
     font-size: 18px;
 }
 
diff --git a/frontend/src/components/table-setting/index.vue b/frontend/src/components/table-setting/index.vue
index 8feba514c..3f5208f2d 100644
--- a/frontend/src/components/table-setting/index.vue
+++ b/frontend/src/components/table-setting/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-popover placement="bottom-start" :width="200" trigger="click">
+        <el-popover placement="bottom-start" :width="200" trigger="hover">
             <template #reference>
                 <el-button class="timer-button" :icon="Refresh"></el-button>
             </template>
diff --git a/frontend/src/components/upload/index.vue b/frontend/src/components/upload/index.vue
index 672005881..7f72fa1aa 100644
--- a/frontend/src/components/upload/index.vue
+++ b/frontend/src/components/upload/index.vue
@@ -1,97 +1,100 @@
 <template>
     <div>
-        <el-drawer
+        <DrawerPro
             v-model="upVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
+            :header="$t('commons.button.import')"
+            :resource="title"
+            :back="handleClose"
+            size="large"
         >
-            <template #header>
-                <DrawerHeader :header="$t('commons.button.import')" :resource="title" :back="handleClose" />
-            </template>
-            <div v-loading="loading">
-                <div class="mb-4" v-if="type === 'mysql' || type === 'mariadb'">
-                    <el-alert type="error" :title="$t('database.formatHelper', [remark])" />
-                </div>
-                <div class="mb-4" v-if="type === 'website'">
-                    <el-alert :closable="false" type="warning" :title="$t('website.websiteBackupWarn')"></el-alert>
-                </div>
-                <el-upload ref="uploadRef" drag :on-change="fileOnChange" class="upload-demo" :auto-upload="false">
-                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-                    <div class="el-upload__text">
-                        {{ $t('database.dropHelper') }}
-                        <em>{{ $t('database.clickHelper') }}</em>
+            <template #content>
+                <div v-loading="loading">
+                    <div class="mb-4" v-if="type === 'mysql' || type === 'mariadb'">
+                        <el-alert type="error" :title="$t('database.formatHelper', [remark])" />
                     </div>
-                    <template #tip>
-                        <el-progress
-                            v-if="isUpload"
-                            text-inside
-                            :stroke-width="12"
-                            :percentage="uploadPercent"
-                        ></el-progress>
-                        <div
-                            v-if="type === 'mysql' || type === 'mariadb' || type === 'postgresql'"
-                            style="width: 80%"
-                            class="el-upload__tip"
-                        >
-                            <span class="input-help">{{ $t('database.supportUpType') }}</span>
-                            <span class="input-help">
-                                {{ $t('database.zipFormat') }}
-                            </span>
+                    <div class="mb-4" v-if="type === 'website'">
+                        <el-alert :closable="false" type="warning" :title="$t('website.websiteBackupWarn')"></el-alert>
+                    </div>
+                    <el-upload ref="uploadRef" drag :on-change="fileOnChange" class="upload-demo" :auto-upload="false">
+                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                        <div class="el-upload__text">
+                            {{ $t('database.dropHelper') }}
+                            <em>{{ $t('database.clickHelper') }}</em>
                         </div>
-                        <div v-else style="width: 80%" class="el-upload__tip">
-                            <span class="input-help">{{ $t('website.supportUpType') }}</span>
-                            <span class="input-help">
-                                {{ $t('website.zipFormat', [type + '.json']) }}
-                            </span>
-                        </div>
-                    </template>
-                </el-upload>
-                <el-button :disabled="isUpload" v-if="uploaderFiles.length === 1" icon="Upload" @click="onSubmit">
-                    {{ $t('commons.button.upload') }}
-                </el-button>
+                        <template #tip>
+                            <el-progress
+                                v-if="isUpload"
+                                text-inside
+                                :stroke-width="12"
+                                :percentage="uploadPercent"
+                            ></el-progress>
+                            <div
+                                v-if="type === 'mysql' || type === 'mariadb' || type === 'postgresql'"
+                                style="width: 80%"
+                                class="el-upload__tip"
+                            >
+                                <span class="input-help">{{ $t('database.supportUpType') }}</span>
+                                <span class="input-help">
+                                    {{ $t('database.zipFormat') }}
+                                </span>
+                            </div>
+                            <div v-else style="width: 80%" class="el-upload__tip">
+                                <span class="input-help">{{ $t('website.supportUpType') }}</span>
+                                <span class="input-help">
+                                    {{ $t('website.zipFormat', [type + '.json']) }}
+                                </span>
+                            </div>
+                        </template>
+                    </el-upload>
+                    <el-button :disabled="isUpload" v-if="uploaderFiles.length === 1" icon="Upload" @click="onSubmit">
+                        {{ $t('commons.button.upload') }}
+                    </el-button>
 
-                <el-divider />
-                <ComplexTable
-                    :pagination-config="paginationConfig"
-                    @search="search"
-                    v-model:selects="selects"
-                    :data="data"
-                >
-                    <template #toolbar>
-                        <el-button
-                            style="margin-left: 10px"
-                            plain
-                            :disabled="selects.length === 0"
-                            @click="onBatchDelete(null)"
+                    <el-divider />
+                    <ComplexTable
+                        :pagination-config="paginationConfig"
+                        @search="search"
+                        v-model:selects="selects"
+                        :data="data"
+                    >
+                        <template #toolbar>
+                            <el-button
+                                class="ml-2.5"
+                                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 prop="name" />
+                        <el-table-column :label="$t('file.size')" prop="size">
+                            <template #default="{ row }">
+                                {{ computeSize(row.size) }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            show-overflow-tooltip
+                            :label="$t('commons.table.createdAt')"
+                            min-width="90"
+                            fix
                         >
-                            {{ $t('commons.button.delete') }}
-                        </el-button>
-                    </template>
-                    <el-table-column type="selection" fix />
-                    <el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="name" />
-                    <el-table-column :label="$t('file.size')" prop="size">
-                        <template #default="{ row }">
-                            {{ computeSize(row.size) }}
-                        </template>
-                    </el-table-column>
-                    <el-table-column show-overflow-tooltip :label="$t('commons.table.createdAt')" min-width="90" fix>
-                        <template #default="{ row }">
-                            {{ row.createdAt }}
-                        </template>
-                    </el-table-column>
-                    <fu-table-operations
-                        width="150px"
-                        :buttons="buttons"
-                        :ellipsis="10"
-                        :label="$t('commons.table.operate')"
-                        fix
-                    />
-                </ComplexTable>
-            </div>
-        </el-drawer>
-
+                            <template #default="{ row }">
+                                {{ row.createdAt }}
+                            </template>
+                        </el-table-column>
+                        <fu-table-operations
+                            width="150px"
+                            :buttons="buttons"
+                            :ellipsis="10"
+                            :label="$t('commons.table.operate')"
+                            fix
+                        />
+                    </ComplexTable>
+                </div>
+            </template>
+        </DrawerPro>
         <OpDialog ref="opRef" @search="search" />
     </div>
     <AppRecover ref="recoverRef" />
@@ -103,7 +106,6 @@ import { computeSize } from '@/utils/util';
 import i18n from '@/lang';
 import { UploadFile, UploadFiles, UploadInstance } from 'element-plus';
 import { File } from '@/api/interface/file';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { BatchDeleteFile, CheckFile, ChunkUploadFileData, GetUploadList } from '@/api/modules/files';
 import { loadBaseDir } from '@/api/modules/setting';
 import { MsgError, MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 48de41ad7..5bc8dae34 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -1,79 +1,72 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('app.detail')" :back="handleClose" />
-        </template>
-        <div class="brief" v-loading="loadingApp">
-            <div class="detail flex">
-                <div class="w-12 h-12 rounded p-1 shadow-md icon">
-                    <img :src="app.icon" alt="App Icon" class="w-full h-full rounded" style="object-fit: contain" />
+    <DrawerPro v-model="open" :header="$t('app.detail')" :back="handleClose" size="large">
+        <template #content>
+            <div class="brief" v-loading="loadingApp">
+                <div class="detail flex">
+                    <div class="w-12 h-12 rounded p-1 shadow-md icon">
+                        <img :src="app.icon" alt="App Icon" class="w-full h-full rounded" style="object-fit: contain" />
+                    </div>
+                    <div class="ml-4">
+                        <div class="name mb-2">
+                            <span>{{ app.name }}</span>
+                        </div>
+                        <div class="description mb-4">
+                            <span>
+                                {{ language == 'zh' || language == 'tw' ? app.shortDescZh : app.shortDescEn }}
+                            </span>
+                        </div>
+                        <br />
+                        <div v-if="!loadingDetail" class="mb-2">
+                            <el-alert
+                                v-if="!appDetail.enable"
+                                :title="$t('app.limitHelper')"
+                                type="warning"
+                                show-icon
+                                :closable="false"
+                            />
+                        </div>
+                        <el-button
+                            round
+                            v-if="appDetail.enable && operate === 'install'"
+                            @click="openInstall"
+                            type="primary"
+                            class="brief-button"
+                        >
+                            {{ $t('app.install') }}
+                        </el-button>
+                    </div>
                 </div>
-                <div class="ml-4">
-                    <div class="name mb-2">
-                        <span>{{ app.name }}</span>
-                    </div>
-                    <div class="description mb-4">
-                        <span>
-                            {{ language == 'zh' || language == 'tw' ? app.shortDescZh : app.shortDescEn }}
-                        </span>
-                    </div>
-                    <br />
-                    <div v-if="!loadingDetail" class="mb-2">
-                        <el-alert
-                            v-if="!appDetail.enable"
-                            :title="$t('app.limitHelper')"
-                            type="warning"
-                            show-icon
-                            :closable="false"
-                        />
-                    </div>
-                    <el-button
-                        round
-                        v-if="appDetail.enable && operate === 'install'"
-                        @click="openInstall"
-                        type="primary"
-                        class="brief-button"
-                    >
-                        {{ $t('app.install') }}
-                    </el-button>
-                </div>
-            </div>
-            <div class="divider"></div>
-            <div class="descriptions">
-                <div>
-                    <el-descriptions direction="vertical">
-                        <el-descriptions-item>
-                            <div class="icons">
-                                <el-link @click="toLink(app.website)">
-                                    <el-icon><OfficeBuilding /></el-icon>
-                                    <span>{{ $t('app.appOfficeWebsite') }}</span>
+                <div class="divider"></div>
+                <div class="descriptions">
+                    <div>
+                        <el-descriptions direction="vertical">
+                            <el-descriptions-item>
+                                <div class="icons">
+                                    <el-link @click="toLink(app.website)">
+                                        <el-icon><OfficeBuilding /></el-icon>
+                                        <span>{{ $t('app.appOfficeWebsite') }}</span>
+                                    </el-link>
+                                </div>
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <el-link @click="toLink(app.document)">
+                                    <el-icon><Document /></el-icon>
+                                    <span>{{ $t('app.document') }}</span>
                                 </el-link>
-                            </div>
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <el-link @click="toLink(app.document)">
-                                <el-icon><Document /></el-icon>
-                                <span>{{ $t('app.document') }}</span>
-                            </el-link>
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <el-link @click="toLink(app.github)">
-                                <el-icon><Link /></el-icon>
-                                <span>{{ $t('app.github') }}</span>
-                            </el-link>
-                        </el-descriptions-item>
-                    </el-descriptions>
+                            </el-descriptions-item>
+                            <el-descriptions-item>
+                                <el-link @click="toLink(app.github)">
+                                    <el-icon><Link /></el-icon>
+                                    <span>{{ $t('app.github') }}</span>
+                                </el-link>
+                            </el-descriptions-item>
+                        </el-descriptions>
+                    </div>
                 </div>
             </div>
-        </div>
-        <MdEditor previewOnly v-model="app.readMe" :theme="isDarkTheme ? 'dark' : 'light'" />
-    </el-drawer>
+            <MdEditor previewOnly v-model="app.readMe" :theme="isDarkTheme ? 'dark' : 'light'" />
+        </template>
+    </DrawerPro>
     <Install ref="installRef"></Install>
 </template>
 
diff --git a/frontend/src/views/app-store/detail/install/index.vue b/frontend/src/views/app-store/detail/install/index.vue
index 43d475b48..1687d9879 100644
--- a/frontend/src/views/app-store/detail/install/index.vue
+++ b/frontend/src/views/app-store/detail/install/index.vue
@@ -1,137 +1,114 @@
 <template>
-    <el-drawer
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        v-model="open"
-        :title="$t('app.install')"
-        size="50%"
-        :before-close="handleClose"
-    >
-        <template #header>
-            <Header :header="$t('app.install')" :back="handleClose"></Header>
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-alert
-                    :title="$t('app.appInstallWarn')"
-                    class="common-prompt"
-                    :closable="false"
-                    type="error"
-                    v-if="!isHostMode"
-                />
-                <el-alert
-                    :title="$t('app.hostModeHelper')"
-                    class="common-prompt"
-                    :closable="false"
-                    type="warning"
-                    v-else
-                />
-                <el-form
-                    @submit.prevent
-                    ref="paramForm"
-                    label-position="top"
-                    :model="req"
-                    label-width="150px"
-                    :rules="rules"
-                    :validate-on-rule-change="false"
+    <DrawerPro v-model="open" :header="$t('app.install')" :back="handleClose" size="large">
+        <el-alert
+            :title="$t('app.appInstallWarn')"
+            class="common-prompt"
+            :closable="false"
+            type="error"
+            v-if="!isHostMode"
+        />
+        <el-alert :title="$t('app.hostModeHelper')" class="common-prompt" :closable="false" type="warning" v-else />
+        <el-form
+            v-loading="loading"
+            @submit.prevent
+            ref="paramForm"
+            label-position="top"
+            :model="req"
+            label-width="150px"
+            :rules="rules"
+            :validate-on-rule-change="false"
+        >
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-model.trim="req.name"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('app.version')" prop="version">
+                <el-select v-model="req.version" @change="getAppDetail(req.version)">
+                    <el-option
+                        v-for="(version, index) in appVersions"
+                        :key="index"
+                        :label="version"
+                        :value="version"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <Params
+                :key="paramKey"
+                v-if="open"
+                v-model:form="req.params"
+                v-model:params="installData.params"
+                v-model:rules="rules.params"
+                :propStart="'params.'"
+            ></Params>
+            <el-form-item prop="advanced">
+                <el-checkbox v-model="req.advanced" :label="$t('app.advanced')" size="large" />
+            </el-form-item>
+            <div v-if="req.advanced">
+                <el-form-item :label="$t('app.containerName')" prop="containerName">
+                    <el-input v-model.trim="req.containerName" :placeholder="$t('app.containerNameHelper')"></el-input>
+                </el-form-item>
+                <el-form-item prop="allowPort" v-if="!isHostMode">
+                    <el-checkbox v-model="req.allowPort" :label="$t('app.allowPort')" size="large" />
+                    <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
+                </el-form-item>
+                <el-form-item
+                    :label="$t('container.cpuQuota')"
+                    prop="cpuQuota"
+                    :rules="checkNumberRange(0, limits.cpu)"
                 >
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input v-model.trim="req.name"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('app.version')" prop="version">
-                        <el-select v-model="req.version" @change="getAppDetail(req.version)">
-                            <el-option
-                                v-for="(version, index) in appVersions"
-                                :key="index"
-                                :label="version"
-                                :value="version"
-                            ></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <Params
-                        :key="paramKey"
-                        v-if="open"
-                        v-model:form="req.params"
-                        v-model:params="installData.params"
-                        v-model:rules="rules.params"
-                        :propStart="'params.'"
-                    ></Params>
-                    <el-form-item prop="advanced">
-                        <el-checkbox v-model="req.advanced" :label="$t('app.advanced')" size="large" />
-                    </el-form-item>
-                    <div v-if="req.advanced">
-                        <el-form-item :label="$t('app.containerName')" prop="containerName">
-                            <el-input
-                                v-model.trim="req.containerName"
-                                :placeholder="$t('app.containerNameHelper')"
-                            ></el-input>
-                        </el-form-item>
-                        <el-form-item prop="allowPort" v-if="!isHostMode">
-                            <el-checkbox v-model="req.allowPort" :label="$t('app.allowPort')" size="large" />
-                            <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('container.cpuQuota')"
-                            prop="cpuQuota"
-                            :rules="checkNumberRange(0, limits.cpu)"
-                        >
-                            <el-input type="number" style="width: 40%" v-model.number="req.cpuQuota" maxlength="5">
-                                <template #append>{{ $t('app.cpuCore') }}</template>
-                            </el-input>
-                            <span class="input-help">
-                                {{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
-                            </span>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('container.memoryLimit')"
-                            prop="memoryLimit"
-                            :rules="checkNumberRange(0, limits.memory)"
-                        >
-                            <el-input style="width: 40%" v-model.number="req.memoryLimit" maxlength="10">
-                                <template #append>
-                                    <el-select
-                                        v-model="req.memoryUnit"
-                                        placeholder="Select"
-                                        style="width: 85px"
-                                        @change="changeUnit"
-                                    >
-                                        <el-option label="MB" value="M" />
-                                        <el-option label="GB" value="G" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                            <span class="input-help">
-                                {{ $t('container.limitHelper', [limits.memory]) }}{{ req.memoryUnit }}B
-                            </span>
-                        </el-form-item>
-                        <el-form-item prop="editCompose">
-                            <el-checkbox v-model="req.editCompose" :label="$t('app.editCompose')" size="large" />
-                            <span class="input-help">{{ $t('app.editComposeHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item pro="pullImage">
-                            <el-checkbox v-model="req.pullImage" :label="$t('container.forcePull')" size="large" />
-                            <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
-                        </el-form-item>
-                        <div v-if="req.editCompose">
-                            <codemirror
-                                :autofocus="true"
-                                placeholder=""
-                                :indent-with-tab="true"
-                                :tabSize="4"
-                                style="height: 400px"
-                                :lineWrapping="true"
-                                :matchBrackets="true"
-                                theme="cobalt"
-                                :styleActiveLine="true"
-                                :extensions="extensions"
-                                v-model="req.dockerCompose"
-                            />
-                        </div>
-                    </div>
-                </el-form>
-            </el-col>
-        </el-row>
-
+                    <el-input type="number" style="width: 40%" v-model.number="req.cpuQuota" maxlength="5">
+                        <template #append>{{ $t('app.cpuCore') }}</template>
+                    </el-input>
+                    <span class="input-help">
+                        {{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
+                    </span>
+                </el-form-item>
+                <el-form-item
+                    :label="$t('container.memoryLimit')"
+                    prop="memoryLimit"
+                    :rules="checkNumberRange(0, limits.memory)"
+                >
+                    <el-input style="width: 40%" v-model.number="req.memoryLimit" maxlength="10">
+                        <template #append>
+                            <el-select
+                                v-model="req.memoryUnit"
+                                placeholder="Select"
+                                style="width: 85px"
+                                @change="changeUnit"
+                            >
+                                <el-option label="MB" value="M" />
+                                <el-option label="GB" value="G" />
+                            </el-select>
+                        </template>
+                    </el-input>
+                    <span class="input-help">
+                        {{ $t('container.limitHelper', [limits.memory]) }}{{ req.memoryUnit }}B
+                    </span>
+                </el-form-item>
+                <el-form-item prop="editCompose">
+                    <el-checkbox v-model="req.editCompose" :label="$t('app.editCompose')" size="large" />
+                    <span class="input-help">{{ $t('app.editComposeHelper') }}</span>
+                </el-form-item>
+                <el-form-item pro="pullImage">
+                    <el-checkbox v-model="req.pullImage" :label="$t('container.forcePull')" size="large" />
+                    <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
+                </el-form-item>
+                <div v-if="req.editCompose">
+                    <codemirror
+                        :autofocus="true"
+                        placeholder=""
+                        :indent-with-tab="true"
+                        :tabSize="4"
+                        style="height: 400px"
+                        :lineWrapping="true"
+                        :matchBrackets="true"
+                        theme="cobalt"
+                        :styleActiveLine="true"
+                        :extensions="extensions"
+                        v-model="req.dockerCompose"
+                    />
+                </div>
+            </div>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -140,7 +117,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup name="appInstall">
@@ -151,7 +128,6 @@ import { FormInstance, FormRules } from 'element-plus';
 import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import Params from '../params/index.vue';
-import Header from '@/components/drawer-header/index.vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
diff --git a/frontend/src/views/app-store/installed/detail/index.vue b/frontend/src/views/app-store/installed/detail/index.vue
index 14250b93a..a124600a1 100644
--- a/frontend/src/views/app-store/installed/detail/index.vue
+++ b/frontend/src/views/app-store/installed/detail/index.vue
@@ -1,112 +1,98 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="40%">
-        <template #header>
-            <Header :header="$t('app.param')" :back="handleClose">
-                <template #buttons>
-                    <el-button type="primary" plain @click="editParam" :disabled="loading">
-                        {{ edit ? $t('app.detail') : $t('commons.button.edit') }}
-                    </el-button>
-                </template>
-            </Header>
+    <DrawerPro v-model="open" :header="$t('app.param')" :back="handleClose" size="normal">
+        <template #buttons>
+            <el-button type="primary" plain @click="editParam" :disabled="loading">
+                {{ edit ? $t('app.detail') : $t('commons.button.edit') }}
+            </el-button>
         </template>
-        <el-row v-if="!edit">
-            <el-col :span="22" :offset="1">
-                <el-descriptions border :column="1">
-                    <el-descriptions-item v-for="(param, key) in params" :label="getLabel(param)" :key="key">
-                        <span>{{ param.showValue && param.showValue != '' ? param.showValue : param.value }}</span>
-                    </el-descriptions-item>
-                </el-descriptions>
-            </el-col>
-        </el-row>
-        <el-row v-else v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-alert :title="$t('app.updateHelper')" type="warning" :closable="false" class="common-prompt" />
-                <el-form @submit.prevent ref="paramForm" :model="paramModel" label-position="top" :rules="rules">
-                    <div v-for="(p, index) in params" :key="index">
-                        <el-form-item :prop="p.key" :label="getLabel(p)">
-                            <el-input
-                                v-if="p.type == 'number'"
-                                type="number"
-                                v-model.number="paramModel.params[p.key]"
-                                :disabled="!p.edit"
-                            ></el-input>
-                            <el-select
-                                v-model="paramModel.params[p.key]"
-                                v-else-if="p.type == 'select'"
-                                :multiple="p.multiple"
-                            >
-                                <el-option
-                                    v-for="value in p.values"
-                                    :key="value.label"
-                                    :value="value.value"
-                                    :label="value.label"
-                                    :disabled="!p.edit"
-                                ></el-option>
-                            </el-select>
-                            <el-input v-else v-model.trim="paramModel.params[p.key]" :disabled="!p.edit"></el-input>
-                        </el-form-item>
-                    </div>
-                    <el-form-item prop="advanced">
-                        <el-checkbox v-model="paramModel.advanced" :label="$t('app.advanced')" size="large" />
-                    </el-form-item>
-                    <div v-if="paramModel.advanced">
-                        <el-form-item :label="$t('app.containerName')" prop="containerName">
-                            <el-input
-                                v-model.trim="paramModel.containerName"
-                                :placeholder="$t('app.containerNameHelper')"
-                            ></el-input>
-                        </el-form-item>
-                        <el-form-item prop="allowPort" v-if="!paramModel.isHostMode">
-                            <el-checkbox v-model="paramModel.allowPort" :label="$t('app.allowPort')" size="large" />
-                            <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('container.cpuQuota')" prop="cpuQuota">
-                            <el-input
-                                type="number"
-                                style="width: 40%"
-                                v-model.number="paramModel.cpuQuota"
-                                maxlength="5"
-                            >
-                                <template #append>{{ $t('app.cpuCore') }}</template>
-                            </el-input>
-                            <span class="input-help">{{ $t('container.limitHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('container.memoryLimit')" prop="memoryLimit">
-                            <el-input style="width: 40%" v-model.number="paramModel.memoryLimit" maxlength="10">
-                                <template #append>
-                                    <el-select v-model="paramModel.memoryUnit" placeholder="Select" style="width: 85px">
-                                        <el-option label="KB" value="K" />
-                                        <el-option label="MB" value="M" />
-                                        <el-option label="GB" value="G" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                            <span class="input-help">{{ $t('container.limitHelper') }}</span>
-                        </el-form-item>
+        <el-descriptions border :column="1" v-if="!edit">
+            <el-descriptions-item v-for="(param, key) in params" :label="getLabel(param)" :key="key">
+                <span>{{ param.showValue && param.showValue != '' ? param.showValue : param.value }}</span>
+            </el-descriptions-item>
+        </el-descriptions>
 
-                        <el-form-item prop="editCompose">
-                            <el-checkbox v-model="paramModel.editCompose" :label="$t('app.editCompose')" size="large" />
-                            <span class="input-help">{{ $t('app.editComposeHelper') }}</span>
-                        </el-form-item>
-                        <div v-if="paramModel.editCompose">
-                            <codemirror
-                                :autofocus="true"
-                                placeholder=""
-                                :indent-with-tab="true"
-                                :tabSize="4"
-                                style="height: 400px"
-                                :lineWrapping="true"
-                                :matchBrackets="true"
-                                theme="cobalt"
-                                :styleActiveLine="true"
-                                :extensions="extensions"
-                                v-model="paramModel.dockerCompose"
-                            />
-                        </div>
+        <div v-else v-loading="loading">
+            <el-alert :title="$t('app.updateHelper')" type="warning" :closable="false" class="common-prompt" />
+            <el-form @submit.prevent ref="paramForm" :model="paramModel" label-position="top" :rules="rules">
+                <div v-for="(p, index) in params" :key="index">
+                    <el-form-item :prop="p.key" :label="getLabel(p)">
+                        <el-input
+                            v-if="p.type == 'number'"
+                            type="number"
+                            v-model.number="paramModel.params[p.key]"
+                            :disabled="!p.edit"
+                        ></el-input>
+                        <el-select
+                            v-model="paramModel.params[p.key]"
+                            v-else-if="p.type == 'select'"
+                            :multiple="p.multiple"
+                        >
+                            <el-option
+                                v-for="value in p.values"
+                                :key="value.label"
+                                :value="value.value"
+                                :label="value.label"
+                                :disabled="!p.edit"
+                            ></el-option>
+                        </el-select>
+                        <el-input v-else v-model.trim="paramModel.params[p.key]" :disabled="!p.edit"></el-input>
+                    </el-form-item>
+                </div>
+                <el-form-item prop="advanced">
+                    <el-checkbox v-model="paramModel.advanced" :label="$t('app.advanced')" size="large" />
+                </el-form-item>
+                <div v-if="paramModel.advanced">
+                    <el-form-item :label="$t('app.containerName')" prop="containerName">
+                        <el-input
+                            v-model.trim="paramModel.containerName"
+                            :placeholder="$t('app.containerNameHelper')"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item prop="allowPort" v-if="!paramModel.isHostMode">
+                        <el-checkbox v-model="paramModel.allowPort" :label="$t('app.allowPort')" size="large" />
+                        <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
+                    </el-form-item>
+                    <el-form-item :label="$t('container.cpuQuota')" prop="cpuQuota">
+                        <el-input type="number" class="!w-2/5" v-model.number="paramModel.cpuQuota" maxlength="5">
+                            <template #append>{{ $t('app.cpuCore') }}</template>
+                        </el-input>
+                        <span class="input-help">{{ $t('container.limitHelper') }}</span>
+                    </el-form-item>
+                    <el-form-item :label="$t('container.memoryLimit')" prop="memoryLimit">
+                        <el-input class="!w-2/5" v-model.number="paramModel.memoryLimit" maxlength="10">
+                            <template #append>
+                                <el-select v-model="paramModel.memoryUnit" placeholder="Select" style="width: 85px">
+                                    <el-option label="KB" value="K" />
+                                    <el-option label="MB" value="M" />
+                                    <el-option label="GB" value="G" />
+                                </el-select>
+                            </template>
+                        </el-input>
+                        <span class="input-help">{{ $t('container.limitHelper') }}</span>
+                    </el-form-item>
+
+                    <el-form-item prop="editCompose">
+                        <el-checkbox v-model="paramModel.editCompose" :label="$t('app.editCompose')" size="large" />
+                        <span class="input-help">{{ $t('app.editComposeHelper') }}</span>
+                    </el-form-item>
+                    <div v-if="paramModel.editCompose">
+                        <codemirror
+                            :autofocus="true"
+                            placeholder=""
+                            :indent-with-tab="true"
+                            :tabSize="4"
+                            style="height: 400px"
+                            :lineWrapping="true"
+                            :matchBrackets="true"
+                            theme="cobalt"
+                            :styleActiveLine="true"
+                            :extensions="extensions"
+                            v-model="paramModel.dockerCompose"
+                        />
                     </div>
-                </el-form>
-            </el-col>
-        </el-row>
+                </div>
+            </el-form>
+        </div>
         <template #footer v-if="edit">
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -115,13 +101,12 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
 import { GetAppInstallParams, UpdateAppInstallParams } from '@/api/modules/app';
 import { reactive, ref } from 'vue';
-import Header from '@/components/drawer-header/index.vue';
 import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/app-store/installed/ignore/index.vue b/frontend/src/views/app-store/installed/ignore/index.vue
index 06c43f66e..f5a9ba10d 100644
--- a/frontend/src/views/app-store/installed/ignore/index.vue
+++ b/frontend/src/views/app-store/installed/ignore/index.vue
@@ -1,41 +1,39 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="30%">
-        <template #header>
-            <Header :header="$t('app.ignoreList')" :back="handleClose"></Header>
+    <DrawerPro v-model="open" :header="$t('app.ignoreList')" :back="handleClose" size="small">
+        <template #content>
+            <el-row :gutter="5">
+                <el-col v-for="(app, index) in apps" :key="index">
+                    <el-card class="app-margin">
+                        <el-row :gutter="20">
+                            <el-col :span="6">
+                                <el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
+                            </el-col>
+                            <el-col :span="12">
+                                <span>{{ app.name }}</span>
+                                <div class="app-margin">
+                                    <el-tag>{{ app.version }}</el-tag>
+                                </div>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-button type="primary" link @click="cancelIgnore(app.detailID)">
+                                    {{ $t('app.cancelIgnore') }}
+                                </el-button>
+                            </el-col>
+                        </el-row>
+                    </el-card>
+                </el-col>
+            </el-row>
         </template>
-        <el-row :gutter="5">
-            <el-col v-for="(app, index) in apps" :key="index">
-                <el-card class="app-margin">
-                    <el-row :gutter="20">
-                        <el-col :span="6">
-                            <el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
-                        </el-col>
-                        <el-col :span="12">
-                            <span>{{ app.name }}</span>
-                            <div class="app-margin">
-                                <el-tag>{{ app.version }}</el-tag>
-                            </div>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-button type="primary" link @click="cancelIgnore(app.detailID)">
-                                {{ $t('app.cancelIgnore') }}
-                            </el-button>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
-        </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { GetIgnoredApp, IgnoreUpgrade } from '@/api/modules/app';
 import { ref } from 'vue';
-import Header from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 
diff --git a/frontend/src/views/app-store/installed/upgrade/index.vue b/frontend/src/views/app-store/installed/upgrade/index.vue
index b1c0af9fd..4424919ff 100644
--- a/frontend/src/views/app-store/installed/upgrade/index.vue
+++ b/frontend/src/views/app-store/installed/upgrade/index.vue
@@ -1,94 +1,84 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="50%">
-        <template #header>
-            <Header
-                :header="$t('commons.button.' + operateReq.operate)"
-                :resource="resourceName"
-                :back="handleClose"
-            ></Header>
-        </template>
-        <el-row :gutter="10">
-            <el-col :span="22" :offset="1">
-                <div>
-                    <el-descriptions direction="vertical">
-                        <el-descriptions-item>
-                            <el-link @click="toLink(app.website)">
-                                <el-icon><OfficeBuilding /></el-icon>
-                                <span>{{ $t('app.appOfficeWebsite') }}</span>
-                            </el-link>
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <el-link @click="toLink(app.document)">
-                                <el-icon><Document /></el-icon>
-                                <span>{{ $t('app.document') }}</span>
-                            </el-link>
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <el-link @click="toLink(app.github)">
-                                <el-icon><Link /></el-icon>
-                                <span>{{ $t('app.github') }}</span>
-                            </el-link>
-                        </el-descriptions-item>
-                    </el-descriptions>
-                </div>
-            </el-col>
-            <el-col :span="22" :offset="1">
-                <el-form
-                    @submit.prevent
-                    ref="updateRef"
-                    :rules="rules"
-                    label-position="top"
-                    :model="operateReq"
-                    v-loading="loading"
-                >
-                    <el-form-item :label="$t('app.versionSelect')" prop="detailId">
-                        <el-select v-model="operateReq.version" @change="getVersions(operateReq.version)">
-                            <el-option
-                                v-for="(version, index) in versions"
-                                :key="index"
-                                :value="version.version"
-                                :label="version.version"
-                            ></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item prop="backup" v-if="operateReq.operate === 'upgrade'">
-                        <el-checkbox v-model="operateReq.backup" :label="$t('app.backupApp')" />
-                        <span class="input-help">
-                            <el-text type="warning">{{ $t('app.backupAppHelper') }}</el-text>
-                        </span>
-                    </el-form-item>
-                    <el-form-item pro="pullImage" v-if="operateReq.operate === 'upgrade'">
-                        <el-checkbox v-model="operateReq.pullImage" :label="$t('container.forcePull')" size="large" />
-                        <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
-                    </el-form-item>
-                </el-form>
-            </el-col>
+    <DrawerPro
+        v-model="open"
+        :header="$t('commons.button.' + operateReq.operate)"
+        :resource="resourceName"
+        :back="handleClose"
+    >
+        <el-descriptions direction="vertical">
+            <el-descriptions-item>
+                <el-link @click="toLink(app.website)">
+                    <el-icon><OfficeBuilding /></el-icon>
+                    <span>{{ $t('app.appOfficeWebsite') }}</span>
+                </el-link>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <el-link @click="toLink(app.document)">
+                    <el-icon><Document /></el-icon>
+                    <span>{{ $t('app.document') }}</span>
+                </el-link>
+            </el-descriptions-item>
+            <el-descriptions-item>
+                <el-link @click="toLink(app.github)">
+                    <el-icon><Link /></el-icon>
+                    <span>{{ $t('app.github') }}</span>
+                </el-link>
+            </el-descriptions-item>
+        </el-descriptions>
+        <el-form
+            @submit.prevent
+            ref="updateRef"
+            :rules="rules"
+            label-position="top"
+            :model="operateReq"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('app.versionSelect')" prop="detailId">
+                <el-select v-model="operateReq.version" @change="getVersions(operateReq.version)">
+                    <el-option
+                        v-for="(version, index) in versions"
+                        :key="index"
+                        :value="version.version"
+                        :label="version.version"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item prop="backup" v-if="operateReq.operate === 'upgrade'">
+                <el-checkbox v-model="operateReq.backup" :label="$t('app.backupApp')" />
+                <span class="input-help">
+                    <el-text type="warning">{{ $t('app.backupAppHelper') }}</el-text>
+                </span>
+            </el-form-item>
+            <el-form-item pro="pullImage" v-if="operateReq.operate === 'upgrade'">
+                <el-checkbox v-model="operateReq.pullImage" :label="$t('container.forcePull')" size="large" />
+                <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
+            </el-form-item>
+        </el-form>
 
-            <el-col :span="22" :offset="1" v-if="operateReq.operate === 'upgrade'">
-                <el-text type="warning">{{ $t('app.upgradeWarn') }}</el-text>
-                <el-button class="ml-1.5" type="text" @click="openDiff()">{{ $t('app.showDiff') }}</el-button>
-                <div>
-                    <el-checkbox v-model="useNewCompose" :label="$t('app.useCustom')" size="large" />
-                </div>
-                <div v-if="useNewCompose">
-                    <el-text type="danger">{{ $t('app.useCustomHelper') }}</el-text>
-                </div>
-                <codemirror
-                    v-if="useNewCompose"
-                    :autofocus="true"
-                    placeholder=""
-                    :indent-with-tab="true"
-                    :tabSize="4"
-                    style="width: 100%; height: calc(100vh - 500px); margin-top: 10px"
-                    :lineWrapping="true"
-                    :matchBrackets="true"
-                    theme="cobalt"
-                    :styleActiveLine="true"
-                    :extensions="extensions"
-                    v-model="newCompose"
-                />
-            </el-col>
-        </el-row>
+        <div v-if="operateReq.operate === 'upgrade'">
+            <el-text type="warning">{{ $t('app.upgradeWarn') }}</el-text>
+            <el-button class="ml-1.5" type="text" @click="openDiff()">{{ $t('app.showDiff') }}</el-button>
+            <div>
+                <el-checkbox v-model="useNewCompose" :label="$t('app.useCustom')" size="large" />
+            </div>
+            <div v-if="useNewCompose">
+                <el-text type="danger">{{ $t('app.useCustomHelper') }}</el-text>
+            </div>
+            <codemirror
+                v-if="useNewCompose"
+                :autofocus="true"
+                placeholder=""
+                :indent-with-tab="true"
+                :tabSize="4"
+                style="width: 100%; height: calc(100vh - 500px); margin-top: 10px"
+                :lineWrapping="true"
+                :matchBrackets="true"
+                theme="cobalt"
+                :styleActiveLine="true"
+                :extensions="extensions"
+                v-model="newCompose"
+            />
+        </div>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -98,7 +88,7 @@
             </span>
         </template>
         <Diff ref="composeDiffRef" @confirm="getNewCompose" />
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
@@ -106,7 +96,6 @@ import { GetAppUpdateVersions, IgnoreUpgrade, InstalledOp } from '@/api/modules/
 import i18n from '@/lang';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { reactive, ref, onBeforeUnmount } from 'vue';
-import Header from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { Rules } from '@/global/form-rules';
 import Diff from './diff/index.vue';
diff --git a/frontend/src/views/container/compose/create/index.vue b/frontend/src/views/container/compose/create/index.vue
index ad1d4e83b..ae0cbaadf 100644
--- a/frontend/src/views/container/compose/create/index.vue
+++ b/frontend/src/views/container/compose/create/index.vue
@@ -1,95 +1,74 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        @close="handleClose"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('container.compose')" :back="handleClose" />
-        </template>
-        <div v-loading="loading">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form ref="formRef" @submit.prevent label-position="top" :model="form" :rules="rules">
-                        <el-form-item :label="$t('container.from')">
-                            <el-radio-group v-model="form.from" @change="onEdit('form')">
-                                <el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
-                                <el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
-                                <el-radio value="template">{{ $t('container.composeTemplate') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item v-if="form.from === 'path'" prop="path">
-                            <el-input
-                                @change="onEdit('')"
-                                :placeholder="$t('commons.example') + '/tmp/docker-compose.yml'"
-                                v-model="form.path"
-                            >
-                                <template #prepend>
-                                    <FileList @choose="loadDir" :dir="false"></FileList>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item v-if="form.from === 'template'" prop="template">
-                            <el-select v-model="form.template" @change="onEdit('template')">
-                                <template #prefix>{{ $t('container.template') }}</template>
-                                <el-option
-                                    v-for="item in templateOptions"
-                                    :key="item.id"
-                                    :value="item.id"
-                                    :label="item.name"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item v-if="form.from === 'edit' || form.from === 'template'" prop="name">
-                            <el-input @input="changePath" @change="onEdit('')" v-model.trim="form.name">
-                                <template #prefix>
-                                    <span style="margin-right: 8px">{{ $t('file.dir') }}</span>
-                                </template>
-                            </el-input>
-                            <span class="input-help">
-                                {{ $t('container.composePathHelper', [composeFile]) }}
-                            </span>
-                        </el-form-item>
-                        <el-form-item>
-                            <div v-if="form.from === 'edit' || form.from === 'template'" style="width: 100%">
-                                <el-radio-group v-model="mode" size="small">
-                                    <el-radio-button label="edit">{{ $t('commons.button.edit') }}</el-radio-button>
-                                    <el-radio-button label="log">{{ $t('commons.button.log') }}</el-radio-button>
-                                </el-radio-group>
-                                <codemirror
-                                    @change="onEdit('')"
-                                    v-if="mode === 'edit'"
-                                    :autofocus="true"
-                                    placeholder="#Define or paste the content of your docker-compose file here"
-                                    :indent-with-tab="true"
-                                    :tabSize="4"
-                                    style="width: 100%; height: calc(100vh - 376px)"
-                                    :lineWrapping="true"
-                                    :matchBrackets="true"
-                                    theme="cobalt"
-                                    :styleActiveLine="true"
-                                    :extensions="extensions"
-                                    v-model="form.file"
-                                />
-                            </div>
-                            <div style="width: 100%">
-                                <LogFile
-                                    ref="logRef"
-                                    v-model:is-reading="isReading"
-                                    :config="logConfig"
-                                    :default-button="false"
-                                    v-if="mode === 'log' && showLog"
-                                    :style="'height: calc(100vh - 370px);min-height: 200px'"
-                                />
-                            </div>
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
-        </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('container.compose')" :back="handleClose" size="large">
+        <el-form ref="formRef" @submit.prevent label-position="top" :model="form" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('container.from')">
+                <el-radio-group v-model="form.from" @change="onEdit('form')">
+                    <el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
+                    <el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
+                    <el-radio value="template">{{ $t('container.composeTemplate') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="form.from === 'path'" prop="path">
+                <el-input
+                    @change="onEdit('')"
+                    :placeholder="$t('commons.example') + '/tmp/docker-compose.yml'"
+                    v-model="form.path"
+                >
+                    <template #prepend>
+                        <FileList @choose="loadDir" :dir="false"></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item v-if="form.from === 'template'" prop="template">
+                <el-select v-model="form.template" @change="onEdit('template')">
+                    <template #prefix>{{ $t('container.template') }}</template>
+                    <el-option v-for="item in templateOptions" :key="item.id" :value="item.id" :label="item.name" />
+                </el-select>
+            </el-form-item>
+            <el-form-item v-if="form.from === 'edit' || form.from === 'template'" prop="name">
+                <el-input @input="changePath" @change="onEdit('')" v-model.trim="form.name">
+                    <template #prefix>
+                        <span style="margin-right: 8px">{{ $t('file.dir') }}</span>
+                    </template>
+                </el-input>
+                <span class="input-help">
+                    {{ $t('container.composePathHelper', [composeFile]) }}
+                </span>
+            </el-form-item>
+            <el-form-item>
+                <div v-if="form.from === 'edit' || form.from === 'template'" style="width: 100%">
+                    <el-radio-group v-model="mode" size="small">
+                        <el-radio-button label="edit">{{ $t('commons.button.edit') }}</el-radio-button>
+                        <el-radio-button label="log">{{ $t('commons.button.log') }}</el-radio-button>
+                    </el-radio-group>
+                    <codemirror
+                        @change="onEdit('')"
+                        v-if="mode === 'edit'"
+                        :autofocus="true"
+                        placeholder="#Define or paste the content of your docker-compose file here"
+                        :indent-with-tab="true"
+                        :tabSize="4"
+                        style="width: 100%; height: calc(100vh - 376px)"
+                        :lineWrapping="true"
+                        :matchBrackets="true"
+                        theme="cobalt"
+                        :styleActiveLine="true"
+                        :extensions="extensions"
+                        v-model="form.file"
+                    />
+                </div>
+                <div style="width: 100%">
+                    <LogFile
+                        ref="logRef"
+                        v-model:is-reading="isReading"
+                        :config="logConfig"
+                        :default-button="false"
+                        v-if="mode === 'log' && showLog"
+                        :style="'height: calc(100vh - 370px);min-height: 200px'"
+                    />
+                </div>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">
@@ -100,7 +79,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -110,8 +89,6 @@ import { Codemirror } from 'vue-codemirror';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessageBox } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
-import { listComposeTemplate, testCompose, upCompose } from '@/api/modules/container';
 import { loadBaseDir } from '@/api/modules/setting';
 import { MsgError } from '@/utils/message';
 import { javascript } from '@codemirror/lang-javascript';
diff --git a/frontend/src/views/container/compose/edit/index.vue b/frontend/src/views/container/compose/edit/index.vue
index 21cc76830..666df7ee1 100644
--- a/frontend/src/views/container/compose/edit/index.vue
+++ b/frontend/src/views/container/compose/edit/index.vue
@@ -1,14 +1,11 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="composeVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="$t('commons.button.edit')"
+        :back="handleClose"
+        :resource="name"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader :header="$t('commons.button.edit')" :resource="name" :back="handleClose" />
-        </template>
         <div v-loading="loading">
             <codemirror
                 :autofocus="true"
@@ -34,7 +31,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { Codemirror } from 'vue-codemirror';
@@ -44,7 +41,6 @@ import { ref } from 'vue';
 import { composeUpdate } from '@/api/modules/container';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 const composeVisible = ref(false);
diff --git a/frontend/src/views/container/container/commit/index.vue b/frontend/src/views/container/container/commit/index.vue
index e654c7c84..0e44ff3e2 100644
--- a/frontend/src/views/container/container/commit/index.vue
+++ b/frontend/src/views/container/container/commit/index.vue
@@ -1,43 +1,36 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="$t('container.makeImage')"
+        :back="handleClose"
+        :resource="form.containerName"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader :header="$t('container.makeImage')" :resource="form.containerName" :back="handleClose" />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form @submit.prevent ref="formRef" :model="form" label-position="top">
-                    <el-form-item prop="newImageName" :rules="Rules.imageName">
-                        <template #label>
-                            {{ $t('container.newImageName') }}
-                        </template>
-                        <el-input v-model="form.newImageName" />
-                    </el-form-item>
-                    <el-form-item prop="comment">
-                        <template #label>
-                            {{ $t('container.commitMessage') }}
-                        </template>
-                        <el-input v-model="form.comment" />
-                    </el-form-item>
-                    <el-form-item prop="author">
-                        <template #label>
-                            {{ $t('container.author') }}
-                        </template>
-                        <el-input v-model="form.author" />
-                    </el-form-item>
-                    <el-form-item prop="pause">
-                        <el-checkbox v-model="form.pause">
-                            {{ $t('container.ifPause') }}
-                        </el-checkbox>
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+        <el-form @submit.prevent ref="formRef" :model="form" label-position="top" v-loading="loading">
+            <el-form-item prop="newImageName" :rules="Rules.imageName">
+                <template #label>
+                    {{ $t('container.newImageName') }}
+                </template>
+                <el-input v-model="form.newImageName" />
+            </el-form-item>
+            <el-form-item prop="comment">
+                <template #label>
+                    {{ $t('container.commitMessage') }}
+                </template>
+                <el-input v-model="form.comment" />
+            </el-form-item>
+            <el-form-item prop="author">
+                <template #label>
+                    {{ $t('container.author') }}
+                </template>
+                <el-input v-model="form.author" />
+            </el-form-item>
+            <el-form-item prop="pause">
+                <el-checkbox v-model="form.pause">
+                    {{ $t('container.ifPause') }}
+                </el-checkbox>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="loading" @click="drawerVisible = false">
@@ -48,12 +41,11 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { ElForm } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 55a9a29ae..37534814e 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -59,6 +59,7 @@
                     trigger="hover"
                     :title="$t('commons.table.selectColumn')"
                     popper-class="popper-class"
+                    :only-icon="true"
                 />
             </template>
             <template #main>
diff --git a/frontend/src/views/container/container/log/index.vue b/frontend/src/views/container/container/log/index.vue
index ba4ef569f..dc253399c 100644
--- a/frontend/src/views/container/container/log/index.vue
+++ b/frontend/src/views/container/container/log/index.vue
@@ -1,69 +1,71 @@
 <template>
     <div>
-        <el-drawer
+        <DrawerPro
             v-model="logVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            :before-close="handleClose"
-            :size="globalStore.isFullScreen ? '100%' : '50%'"
+            :header="$t('commons.button.log')"
+            :back="handleClose"
+            :resource="logSearch.container"
+            :size="globalStore.isFullScreen ? 'full' : 'large'"
         >
-            <template #header>
-                <DrawerHeader :header="$t('commons.button.log')" :resource="logSearch.container" :back="handleClose">
-                    <template #extra v-if="!mobile">
-                        <el-tooltip :content="loadTooltip()" placement="top">
-                            <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
-                        </el-tooltip>
-                    </template>
-                </DrawerHeader>
+            <template #extra v-if="!mobile">
+                <el-tooltip :content="loadTooltip()" placement="top">
+                    <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
+                </el-tooltip>
             </template>
-            <div>
-                <el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode">
-                    <template #prefix>{{ $t('container.fetch') }}</template>
-                    <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
-                </el-select>
-                <el-select @change="searchLogs" class="tailClass" v-model.number="logSearch.tail">
-                    <template #prefix>{{ $t('container.lines') }}</template>
-                    <el-option :value="0" :label="$t('commons.table.all')" />
-                    <el-option :value="100" :label="100" />
-                    <el-option :value="200" :label="200" />
-                    <el-option :value="500" :label="500" />
-                    <el-option :value="1000" :label="1000" />
-                </el-select>
-                <div class="margin-button" style="float: left">
-                    <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
-                        {{ $t('commons.button.watch') }}
-                    </el-checkbox>
+            <template #content>
+                <div>
+                    <el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode">
+                        <template #prefix>{{ $t('container.fetch') }}</template>
+                        <el-option
+                            v-for="item in timeOptions"
+                            :key="item.label"
+                            :value="item.value"
+                            :label="item.label"
+                        />
+                    </el-select>
+                    <el-select @change="searchLogs" class="tailClass" v-model.number="logSearch.tail">
+                        <template #prefix>{{ $t('container.lines') }}</template>
+                        <el-option :value="0" :label="$t('commons.table.all')" />
+                        <el-option :value="100" :label="100" />
+                        <el-option :value="200" :label="200" />
+                        <el-option :value="500" :label="500" />
+                        <el-option :value="1000" :label="1000" />
+                    </el-select>
+                    <div class="margin-button" style="float: left">
+                        <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
+                            {{ $t('commons.button.watch') }}
+                        </el-checkbox>
+                    </div>
+                    <el-button class="margin-button" @click="onDownload" icon="Download">
+                        {{ $t('file.download') }}
+                    </el-button>
+                    <el-button class="margin-button" @click="onClean" icon="Delete">
+                        {{ $t('commons.button.clean') }}
+                    </el-button>
                 </div>
-                <el-button class="margin-button" @click="onDownload" icon="Download">
-                    {{ $t('file.download') }}
-                </el-button>
-                <el-button class="margin-button" @click="onClean" icon="Delete">
-                    {{ $t('commons.button.clean') }}
-                </el-button>
-            </div>
 
-            <codemirror
-                :autofocus="true"
-                :placeholder="$t('commons.msg.noneData')"
-                :indent-with-tab="true"
-                :tabSize="4"
-                style="margin-top: 20px; height: calc(100vh - 230px)"
-                :lineWrapping="true"
-                :matchBrackets="true"
-                theme="cobalt"
-                :styleActiveLine="true"
-                :extensions="extensions"
-                v-model="logInfo"
-                @ready="handleReady"
-                :disabled="true"
-            />
+                <codemirror
+                    :autofocus="true"
+                    :placeholder="$t('commons.msg.noneData')"
+                    :indent-with-tab="true"
+                    :tabSize="4"
+                    style="margin-top: 20px; height: calc(100vh - 230px)"
+                    :lineWrapping="true"
+                    :matchBrackets="true"
+                    theme="cobalt"
+                    :styleActiveLine="true"
+                    :extensions="extensions"
+                    v-model="logInfo"
+                    @ready="handleReady"
+                    :disabled="true"
+                />
+            </template>
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 </span>
             </template>
-        </el-drawer>
+        </DrawerPro>
     </div>
 </template>
 
@@ -75,7 +77,6 @@ import { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { ElMessageBox } from 'element-plus';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import screenfull from 'screenfull';
diff --git a/frontend/src/views/container/container/monitor/index.vue b/frontend/src/views/container/container/monitor/index.vue
index c74c7e6c9..e819fcff9 100644
--- a/frontend/src/views/container/container/monitor/index.vue
+++ b/frontend/src/views/container/container/monitor/index.vue
@@ -1,15 +1,11 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="monitorVisible"
-        :destroy-on-close="true"
-        @close="handleClose"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="$t('container.monitor')"
+        :back="handleClose"
+        :resource="title"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader :header="$t('container.monitor')" :resource="title" :back="handleClose" />
-        </template>
         <el-form label-position="top" @submit.prevent>
             <el-form-item :label="$t('container.refreshTime')">
                 <el-select v-model="timeInterval" @change="changeTimer">
@@ -30,7 +26,7 @@
                 v-if="chartsOption['cpuChart']"
             />
         </el-card>
-        <el-card style="margin-top: 10px">
+        <el-card class="mt-2.5">
             <v-charts
                 height="200px"
                 id="memoryChart"
@@ -39,7 +35,7 @@
                 v-if="chartsOption['memoryChart']"
             />
         </el-card>
-        <el-card style="margin-top: 10px">
+        <el-card class="mt-2.5">
             <v-charts
                 height="200px"
                 id="ioChart"
@@ -48,7 +44,7 @@
                 v-if="chartsOption['ioChart']"
             />
         </el-card>
-        <el-card style="margin-top: 10px">
+        <el-card class="mt-2.5">
             <v-charts
                 height="200px"
                 id="networkChart"
@@ -57,7 +53,7 @@
                 v-if="chartsOption['networkChart']"
             />
         </el-card>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -66,7 +62,6 @@ import { containerStats } from '@/api/modules/container';
 import { dateFormatForSecond } from '@/utils/util';
 import VCharts from '@/components/v-charts/index.vue';
 import i18n from '@/lang';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const title = ref();
 const monitorVisible = ref(false);
diff --git a/frontend/src/views/container/container/operate/index.vue b/frontend/src/views/container/container/operate/index.vue
index c6aa4dd16..758885250 100644
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/frontend/src/views/container/container/operate/index.vue
@@ -1,20 +1,11 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        @close="handleClose"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="title"
+        :back="handleClose"
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader
-                :header="title"
-                :hideResource="dialogData.title === 'create'"
-                :resource="dialogData.rowData?.name"
-                :back="handleClose"
-            />
-        </template>
         <el-form
             ref="formRef"
             label-position="top"
@@ -23,263 +14,227 @@
             :rules="rules"
             label-width="80px"
         >
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-alert
-                        v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)"
-                        :title="$t('container.containerFromAppHelper')"
-                        :closable="false"
-                        type="error"
-                    />
-                    <el-form-item class="mt-5" :label="$t('commons.table.name')" prop="name">
-                        <el-input
-                            :disabled="isFromApp(dialogData.rowData!)"
-                            clearable
-                            v-model.trim="dialogData.rowData!.name"
-                        />
-                        <div v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)">
-                            <span class="input-help">
-                                {{ $t('container.containerFromAppHelper1') }}
-                                <el-button
-                                    style="margin-left: -5px"
-                                    size="small"
-                                    text
-                                    type="primary"
-                                    @click="goRouter()"
-                                >
-                                    <el-icon><Position /></el-icon>
-                                    {{ $t('firewall.quickJump') }}
-                                </el-button>
-                            </span>
-                        </div>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.image')" prop="image">
-                        <el-checkbox v-model="dialogData.rowData!.imageInput" :label="$t('container.input')" />
-                        <el-select
-                            v-if="!dialogData.rowData!.imageInput"
-                            filterable
-                            v-model="dialogData.rowData!.image"
-                        >
-                            <el-option
-                                v-for="(item, index) of images"
-                                :key="index"
-                                :value="item.option"
-                                :label="item.option"
-                            />
-                        </el-select>
-                        <el-input v-else v-model="dialogData.rowData!.image" />
-                    </el-form-item>
-                    <el-form-item prop="forcePull">
-                        <el-checkbox v-model="dialogData.rowData!.forcePull">
-                            {{ $t('container.forcePull') }}
-                        </el-checkbox>
-                        <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.port')">
-                        <el-radio-group v-model="dialogData.rowData!.publishAllPorts" class="ml-4">
-                            <el-radio :value="false">{{ $t('container.exposePort') }}</el-radio>
-                            <el-radio :value="true">{{ $t('container.exposeAll') }}</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item v-if="!dialogData.rowData!.publishAllPorts">
-                        <el-card class="widthClass">
-                            <el-table
-                                v-if="dialogData.rowData!.exposedPorts.length !== 0"
-                                :data="dialogData.rowData!.exposedPorts"
-                            >
-                                <el-table-column :label="$t('container.server')" min-width="150">
-                                    <template #default="{ row }">
-                                        <el-input :placeholder="$t('container.serverExample')" v-model="row.host" />
-                                    </template>
-                                </el-table-column>
-                                <el-table-column :label="$t('container.container')" min-width="80">
-                                    <template #default="{ row }">
-                                        <el-input
-                                            :placeholder="$t('container.containerExample')"
-                                            v-model="row.containerPort"
-                                        />
-                                    </template>
-                                </el-table-column>
-                                <el-table-column :label="$t('commons.table.protocol')" min-width="50">
-                                    <template #default="{ row }">
-                                        <el-select
-                                            v-model="row.protocol"
-                                            style="width: 100%"
-                                            :placeholder="$t('container.serverExample')"
-                                        >
-                                            <el-option label="tcp" value="tcp" />
-                                            <el-option label="udp" value="udp" />
-                                        </el-select>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column min-width="35">
-                                    <template #default="scope">
-                                        <el-button link type="primary" @click="handlePortsDelete(scope.$index)">
-                                            {{ $t('commons.button.delete') }}
-                                        </el-button>
-                                    </template>
-                                </el-table-column>
-                            </el-table>
-
-                            <el-button class="ml-3 mt-2" @click="handlePortsAdd()">
-                                {{ $t('commons.button.add') }}
-                            </el-button>
-                        </el-card>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.network')" prop="network">
-                        <el-select v-model="dialogData.rowData!.network">
-                            <el-option
-                                v-for="(item, indexV) of networks"
-                                :key="indexV"
-                                :value="item.option"
-                                :label="item.option"
-                            />
-                        </el-select>
-                    </el-form-item>
-
-                    <el-form-item label="ipv4" prop="ipv4">
-                        <el-input v-model="dialogData.rowData!.ipv4" :placeholder="$t('container.inputIpv4')" />
-                    </el-form-item>
-                    <el-form-item label="ipv6" prop="ipv6">
-                        <el-input v-model="dialogData.rowData!.ipv6" :placeholder="$t('container.inputIpv6')" />
-                    </el-form-item>
-
-                    <el-form-item :label="$t('container.mount')">
-                        <div v-for="(row, index) in dialogData.rowData!.volumes" :key="index" style="width: 100%">
-                            <el-card class="mt-1">
-                                <el-radio-group v-model="row.type">
-                                    <el-radio-button value="volume">{{ $t('container.volumeOption') }}</el-radio-button>
-                                    <el-radio-button value="bind">{{ $t('container.hostOption') }}</el-radio-button>
-                                </el-radio-group>
-                                <el-button
-                                    class="float-right mt-3"
-                                    link
-                                    type="primary"
-                                    @click="handleVolumesDelete(index)"
+            <el-alert
+                v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)"
+                :title="$t('container.containerFromAppHelper')"
+                :closable="false"
+                type="error"
+            />
+            <el-form-item class="mt-5" :label="$t('commons.table.name')" prop="name">
+                <el-input
+                    :disabled="isFromApp(dialogData.rowData!)"
+                    clearable
+                    v-model.trim="dialogData.rowData!.name"
+                />
+                <div v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)">
+                    <span class="input-help">
+                        {{ $t('container.containerFromAppHelper1') }}
+                        <el-button style="margin-left: -5px" size="small" text type="primary" @click="goRouter()">
+                            <el-icon><Position /></el-icon>
+                            {{ $t('firewall.quickJump') }}
+                        </el-button>
+                    </span>
+                </div>
+            </el-form-item>
+            <el-form-item :label="$t('container.image')" prop="image">
+                <el-checkbox v-model="dialogData.rowData!.imageInput" :label="$t('container.input')" />
+                <el-select v-if="!dialogData.rowData!.imageInput" filterable v-model="dialogData.rowData!.image">
+                    <el-option v-for="(item, index) of images" :key="index" :value="item.option" :label="item.option" />
+                </el-select>
+                <el-input v-else v-model="dialogData.rowData!.image" />
+            </el-form-item>
+            <el-form-item prop="forcePull">
+                <el-checkbox v-model="dialogData.rowData!.forcePull">
+                    {{ $t('container.forcePull') }}
+                </el-checkbox>
+                <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.port')">
+                <el-radio-group v-model="dialogData.rowData!.publishAllPorts" class="ml-4">
+                    <el-radio :value="false">{{ $t('container.exposePort') }}</el-radio>
+                    <el-radio :value="true">{{ $t('container.exposeAll') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="!dialogData.rowData!.publishAllPorts">
+                <el-card class="widthClass">
+                    <el-table
+                        v-if="dialogData.rowData!.exposedPorts.length !== 0"
+                        :data="dialogData.rowData!.exposedPorts"
+                    >
+                        <el-table-column :label="$t('container.server')" min-width="150">
+                            <template #default="{ row }">
+                                <el-input :placeholder="$t('container.serverExample')" v-model="row.host" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column :label="$t('container.container')" min-width="80">
+                            <template #default="{ row }">
+                                <el-input :placeholder="$t('container.containerExample')" v-model="row.containerPort" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column :label="$t('commons.table.protocol')" min-width="50">
+                            <template #default="{ row }">
+                                <el-select
+                                    v-model="row.protocol"
+                                    style="width: 100%"
+                                    :placeholder="$t('container.serverExample')"
                                 >
+                                    <el-option label="tcp" value="tcp" />
+                                    <el-option label="udp" value="udp" />
+                                </el-select>
+                            </template>
+                        </el-table-column>
+                        <el-table-column min-width="35">
+                            <template #default="scope">
+                                <el-button link type="primary" @click="handlePortsDelete(scope.$index)">
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
-                                <el-row class="mt-4" :gutter="5">
-                                    <el-col :span="10">
-                                        <el-form-item
-                                            v-if="row.type === 'volume'"
-                                            :label="$t('container.volumeOption')"
-                                        >
-                                            <el-select filterable v-model="row.sourceDir">
-                                                <div v-for="(item, indexV) of volumes" :key="indexV">
-                                                    <el-tooltip :hide-after="20" :content="item.option" placement="top">
-                                                        <el-option
-                                                            :value="item.option"
-                                                            :label="item.option.substring(0, 30)"
-                                                        />
-                                                    </el-tooltip>
-                                                </div>
-                                            </el-select>
-                                        </el-form-item>
-                                        <el-form-item v-else :label="$t('container.hostOption')">
-                                            <el-input v-model="row.sourceDir" />
-                                        </el-form-item>
-                                    </el-col>
-                                    <el-col :span="5">
-                                        <el-form-item :label="$t('container.mode')">
-                                            <el-select class="widthClass" filterable v-model="row.mode">
-                                                <el-option value="rw" :label="$t('container.modeRW')" />
-                                                <el-option value="ro" :label="$t('container.modeR')" />
-                                            </el-select>
-                                        </el-form-item>
-                                    </el-col>
-                                    <el-col :span="9">
-                                        <el-form-item :label="$t('container.containerDir')">
-                                            <el-input v-model="row.containerDir" />
-                                        </el-form-item>
-                                    </el-col>
-                                </el-row>
-                            </el-card>
-                        </div>
-                        <el-button @click="handleVolumesAdd()">
-                            {{ $t('commons.button.add') }}
-                        </el-button>
-                    </el-form-item>
-                    <el-form-item label="Command" prop="cmdStr">
-                        <el-input v-model="dialogData.rowData!.cmdStr" :placeholder="$t('container.cmdHelper')" />
-                    </el-form-item>
-                    <el-form-item label="Entrypoint" prop="entrypointStr">
-                        <el-input
-                            v-model="dialogData.rowData!.entrypointStr"
-                            :placeholder="$t('container.entrypointHelper')"
-                        />
-                    </el-form-item>
-                    <el-form-item prop="autoRemove">
-                        <el-checkbox v-model="dialogData.rowData!.autoRemove">
-                            {{ $t('container.autoRemove') }}
-                        </el-checkbox>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-checkbox v-model="dialogData.rowData!.privileged">
-                            {{ $t('container.privileged') }}
-                        </el-checkbox>
-                        <span class="input-help">{{ $t('container.privilegedHelper') }}</span>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.console')">
-                        <el-checkbox v-model="dialogData.rowData!.tty">{{ $t('container.tty') }}</el-checkbox>
-                        <el-checkbox v-model="dialogData.rowData!.openStdin">
-                            {{ $t('container.openStdin') }}
-                        </el-checkbox>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.restartPolicy')" prop="restartPolicy">
-                        <el-radio-group v-model="dialogData.rowData!.restartPolicy">
-                            <el-radio value="no">{{ $t('container.no') }}</el-radio>
-                            <el-radio value="always">{{ $t('container.always') }}</el-radio>
-                            <el-radio value="on-failure">{{ $t('container.onFailure') }}</el-radio>
-                            <el-radio value="unless-stopped">{{ $t('container.unlessStopped') }}</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.cpuShare')" prop="cpuShares">
-                        <el-input class="mini-form-item" v-model.number="dialogData.rowData!.cpuShares" />
-                        <span class="input-help">{{ $t('container.cpuShareHelper') }}</span>
-                    </el-form-item>
-                    <el-form-item
-                        :label="$t('container.cpuQuota')"
-                        prop="nanoCPUs"
-                        :rules="checkFloatNumberRange(0, Number(limits.cpu))"
-                    >
-                        <el-input class="mini-form-item" v-model="dialogData.rowData!.nanoCPUs">
-                            <template #append>
-                                <div style="width: 35px">{{ $t('commons.units.core') }}</div>
                             </template>
-                        </el-input>
-                        <span class="input-help">
-                            {{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
-                        </span>
-                    </el-form-item>
-                    <el-form-item
-                        :label="$t('container.memoryLimit')"
-                        prop="memory"
-                        :rules="checkFloatNumberRange(0, Number(limits.memory))"
-                    >
-                        <el-input class="mini-form-item" v-model="dialogData.rowData!.memory">
-                            <template #append><div style="width: 35px">MB</div></template>
-                        </el-input>
-                        <span class="input-help">{{ $t('container.limitHelper', [limits.memory]) }}MB</span>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.tag')" prop="labelsStr">
-                        <el-input
-                            type="textarea"
-                            :placeholder="$t('container.tagHelper')"
-                            :rows="3"
-                            v-model="dialogData.rowData!.labelsStr"
-                        />
-                    </el-form-item>
-                    <el-form-item :label="$t('container.env')" prop="envStr">
-                        <el-input
-                            type="textarea"
-                            :placeholder="$t('container.tagHelper')"
-                            :rows="3"
-                            v-model="dialogData.rowData!.envStr"
-                        />
-                    </el-form-item>
-                </el-col>
-            </el-row>
+                        </el-table-column>
+                    </el-table>
+
+                    <el-button class="ml-3 mt-2" @click="handlePortsAdd()">
+                        {{ $t('commons.button.add') }}
+                    </el-button>
+                </el-card>
+            </el-form-item>
+            <el-form-item :label="$t('container.network')" prop="network">
+                <el-select v-model="dialogData.rowData!.network">
+                    <el-option
+                        v-for="(item, indexV) of networks"
+                        :key="indexV"
+                        :value="item.option"
+                        :label="item.option"
+                    />
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="ipv4" prop="ipv4">
+                <el-input v-model="dialogData.rowData!.ipv4" :placeholder="$t('container.inputIpv4')" />
+            </el-form-item>
+            <el-form-item label="ipv6" prop="ipv6">
+                <el-input v-model="dialogData.rowData!.ipv6" :placeholder="$t('container.inputIpv6')" />
+            </el-form-item>
+
+            <el-form-item :label="$t('container.mount')">
+                <div v-for="(row, index) in dialogData.rowData!.volumes" :key="index" style="width: 100%">
+                    <el-card class="mt-1">
+                        <el-radio-group v-model="row.type">
+                            <el-radio-button value="volume">{{ $t('container.volumeOption') }}</el-radio-button>
+                            <el-radio-button value="bind">{{ $t('container.hostOption') }}</el-radio-button>
+                        </el-radio-group>
+                        <el-button class="float-right mt-3" link type="primary" @click="handleVolumesDelete(index)">
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                        <el-row class="mt-4" :gutter="5">
+                            <el-col :span="10">
+                                <el-form-item v-if="row.type === 'volume'" :label="$t('container.volumeOption')">
+                                    <el-select filterable v-model="row.sourceDir">
+                                        <div v-for="(item, indexV) of volumes" :key="indexV">
+                                            <el-tooltip :hide-after="20" :content="item.option" placement="top">
+                                                <el-option :value="item.option" :label="item.option.substring(0, 30)" />
+                                            </el-tooltip>
+                                        </div>
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item v-else :label="$t('container.hostOption')">
+                                    <el-input v-model="row.sourceDir" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="5">
+                                <el-form-item :label="$t('container.mode')">
+                                    <el-select class="widthClass" filterable v-model="row.mode">
+                                        <el-option value="rw" :label="$t('container.modeRW')" />
+                                        <el-option value="ro" :label="$t('container.modeR')" />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="9">
+                                <el-form-item :label="$t('container.containerDir')">
+                                    <el-input v-model="row.containerDir" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-card>
+                </div>
+                <el-button @click="handleVolumesAdd()">
+                    {{ $t('commons.button.add') }}
+                </el-button>
+            </el-form-item>
+            <el-form-item label="Command" prop="cmdStr">
+                <el-input v-model="dialogData.rowData!.cmdStr" :placeholder="$t('container.cmdHelper')" />
+            </el-form-item>
+            <el-form-item label="Entrypoint" prop="entrypointStr">
+                <el-input v-model="dialogData.rowData!.entrypointStr" :placeholder="$t('container.entrypointHelper')" />
+            </el-form-item>
+            <el-form-item prop="autoRemove">
+                <el-checkbox v-model="dialogData.rowData!.autoRemove">
+                    {{ $t('container.autoRemove') }}
+                </el-checkbox>
+            </el-form-item>
+            <el-form-item>
+                <el-checkbox v-model="dialogData.rowData!.privileged">
+                    {{ $t('container.privileged') }}
+                </el-checkbox>
+                <span class="input-help">{{ $t('container.privilegedHelper') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('container.console')">
+                <el-checkbox v-model="dialogData.rowData!.tty">{{ $t('container.tty') }}</el-checkbox>
+                <el-checkbox v-model="dialogData.rowData!.openStdin">
+                    {{ $t('container.openStdin') }}
+                </el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('container.restartPolicy')" prop="restartPolicy">
+                <el-radio-group v-model="dialogData.rowData!.restartPolicy">
+                    <el-radio value="no">{{ $t('container.no') }}</el-radio>
+                    <el-radio value="always">{{ $t('container.always') }}</el-radio>
+                    <el-radio value="on-failure">{{ $t('container.onFailure') }}</el-radio>
+                    <el-radio value="unless-stopped">{{ $t('container.unlessStopped') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('container.cpuShare')" prop="cpuShares">
+                <el-input class="mini-form-item" v-model.number="dialogData.rowData!.cpuShares" />
+                <span class="input-help">{{ $t('container.cpuShareHelper') }}</span>
+            </el-form-item>
+            <el-form-item
+                :label="$t('container.cpuQuota')"
+                prop="nanoCPUs"
+                :rules="checkFloatNumberRange(0, Number(limits.cpu))"
+            >
+                <el-input class="mini-form-item" v-model="dialogData.rowData!.nanoCPUs">
+                    <template #append>
+                        <div style="width: 35px">{{ $t('commons.units.core') }}</div>
+                    </template>
+                </el-input>
+                <span class="input-help">
+                    {{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
+                </span>
+            </el-form-item>
+            <el-form-item
+                :label="$t('container.memoryLimit')"
+                prop="memory"
+                :rules="checkFloatNumberRange(0, Number(limits.memory))"
+            >
+                <el-input class="mini-form-item" v-model="dialogData.rowData!.memory">
+                    <template #append><div style="width: 35px">MB</div></template>
+                </el-input>
+                <span class="input-help">{{ $t('container.limitHelper', [limits.memory]) }}MB</span>
+            </el-form-item>
+            <el-form-item :label="$t('container.tag')" prop="labelsStr">
+                <el-input
+                    type="textarea"
+                    :placeholder="$t('container.tagHelper')"
+                    :rows="3"
+                    v-model="dialogData.rowData!.labelsStr"
+                />
+            </el-form-item>
+            <el-form-item :label="$t('container.env')" prop="envStr">
+                <el-input
+                    type="textarea"
+                    :placeholder="$t('container.tagHelper')"
+                    :rows="3"
+                    v-model="dialogData.rowData!.envStr"
+                />
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -291,7 +246,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -299,7 +254,6 @@ import { reactive, ref } from 'vue';
 import { Rules, checkFloatNumberRange, checkNumberRange } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessageBox } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import {
     listImage,
     listVolume,
diff --git a/frontend/src/views/container/container/rename/index.vue b/frontend/src/views/container/container/rename/index.vue
index feb62f8e4..3f7fffcc1 100644
--- a/frontend/src/views/container/container/rename/index.vue
+++ b/frontend/src/views/container/container/rename/index.vue
@@ -1,26 +1,19 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="newNameVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="30%"
+        :header="$t('container.rename')"
+        :back="handleClose"
+        :resource="renameForm.name"
+        size="small"
     >
-        <template #header>
-            <DrawerHeader :header="$t('container.rename')" :resource="renameForm.name" :back="handleClose" />
-        </template>
         <el-form @submit.prevent ref="newNameRef" v-loading="loading" :model="renameForm" label-position="top">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item
-                        :label="$t('container.newName')"
-                        :rules="[Rules.containerName, Rules.requiredInput]"
-                        prop="newName"
-                    >
-                        <el-input v-model="renameForm.newName"></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item
+                :label="$t('container.newName')"
+                :rules="[Rules.containerName, Rules.requiredInput]"
+                prop="newName"
+            >
+                <el-input v-model="renameForm.newName"></el-input>
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -32,7 +25,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -42,7 +35,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElForm } from 'element-plus';
 import { reactive, ref } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/container/container/terminal/index.vue b/frontend/src/views/container/container/terminal/index.vue
index cfef40767..fab1e5fdf 100644
--- a/frontend/src/views/container/container/terminal/index.vue
+++ b/frontend/src/views/container/container/terminal/index.vue
@@ -1,57 +1,55 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="terminalVisible"
-        @close="handleClose"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="$t('container.containerTerminal')"
+        :back="handleClose"
+        :resource="title"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader :header="$t('container.containerTerminal')" :resource="title" :back="handleClose" />
-        </template>
-        <el-form ref="formRef" :model="form" label-position="top">
-            <el-form-item :label="$t('commons.table.user')" prop="user">
-                <el-input placeholder="root" clearable v-model="form.user" />
-            </el-form-item>
-            <el-form-item
-                v-if="form.isCustom"
-                :label="$t('container.command')"
-                prop="command"
-                :rules="Rules.requiredInput"
-            >
-                <el-checkbox style="width: 100px" border v-model="form.isCustom" @change="onChangeCommand">
-                    {{ $t('container.custom') }}
-                </el-checkbox>
-                <el-input style="width: calc(100% - 100px)" clearable v-model="form.command" />
-            </el-form-item>
-            <el-form-item
-                v-if="!form.isCustom"
-                :label="$t('container.command')"
-                prop="command"
-                :rules="Rules.requiredSelect"
-            >
-                <el-checkbox style="width: 100px" border v-model="form.isCustom" @change="onChangeCommand">
-                    {{ $t('container.custom') }}
-                </el-checkbox>
-                <el-select style="width: calc(100% - 100px)" filterable clearable v-model="form.command">
-                    <el-option value="/bin/ash" label="/bin/ash" />
-                    <el-option value="/bin/bash" label="/bin/bash" />
-                    <el-option value="/bin/sh" label="/bin/sh" />
-                </el-select>
-            </el-form-item>
+        <template #content>
+            <el-form ref="formRef" :model="form" label-position="top">
+                <el-form-item :label="$t('commons.table.user')" prop="user">
+                    <el-input placeholder="root" clearable v-model="form.user" />
+                </el-form-item>
+                <el-form-item
+                    v-if="form.isCustom"
+                    :label="$t('container.command')"
+                    prop="command"
+                    :rules="Rules.requiredInput"
+                >
+                    <el-checkbox class="p-w-100" border v-model="form.isCustom" @change="onChangeCommand">
+                        {{ $t('container.custom') }}
+                    </el-checkbox>
+                    <el-input style="width: calc(100% - 100px)" clearable v-model="form.command" />
+                </el-form-item>
+                <el-form-item
+                    v-if="!form.isCustom"
+                    :label="$t('container.command')"
+                    prop="command"
+                    :rules="Rules.requiredSelect"
+                >
+                    <el-checkbox class="p-w-100" border v-model="form.isCustom" @change="onChangeCommand">
+                        {{ $t('container.custom') }}
+                    </el-checkbox>
+                    <el-select style="width: calc(100% - 100px)" filterable clearable v-model="form.command">
+                        <el-option value="/bin/ash" label="/bin/ash" />
+                        <el-option value="/bin/bash" label="/bin/bash" />
+                        <el-option value="/bin/sh" label="/bin/sh" />
+                    </el-select>
+                </el-form-item>
 
-            <el-button v-if="!terminalOpen" @click="initTerm(formRef)">
-                {{ $t('commons.button.conn') }}
-            </el-button>
-            <el-button v-else @click="onClose()">{{ $t('commons.button.disconn') }}</el-button>
-            <Terminal
-                style="height: calc(100vh - 302px); margin-top: 18px"
-                ref="terminalRef"
-                v-if="terminalOpen"
-            ></Terminal>
-        </el-form>
-    </el-drawer>
+                <el-button v-if="!terminalOpen" @click="initTerm(formRef)">
+                    {{ $t('commons.button.conn') }}
+                </el-button>
+                <el-button v-else @click="onClose()">{{ $t('commons.button.disconn') }}</el-button>
+                <Terminal
+                    style="height: calc(100vh - 302px); margin-top: 18px"
+                    ref="terminalRef"
+                    v-if="terminalOpen"
+                ></Terminal>
+            </el-form>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -59,7 +57,6 @@ import { reactive, ref, nextTick } from 'vue';
 import { ElForm, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import Terminal from '@/components/terminal/index.vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const title = ref();
 const terminalVisible = ref(false);
diff --git a/frontend/src/views/container/container/upgrade/index.vue b/frontend/src/views/container/container/upgrade/index.vue
index 5b0fc07a5..b72ccb01b 100644
--- a/frontend/src/views/container/container/upgrade/index.vue
+++ b/frontend/src/views/container/container/upgrade/index.vue
@@ -1,54 +1,42 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="$t('commons.button.upgrade')"
+        :back="handleClose"
+        :resource="form.containerName"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader :header="$t('commons.button.upgrade')" :resource="form.containerName" :back="handleClose" />
-        </template>
-
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-alert
-                    :title="$t('container.appHelper')"
-                    v-if="form.fromApp"
-                    class="common-prompt"
-                    :closable="false"
-                    type="error"
-                />
-                <el-form @submit.prevent ref="formRef" :model="form" label-position="top">
-                    <el-form-item :label="$t('container.oldImage')" prop="oldImage">
-                        <el-tooltip
-                            placement="top-start"
-                            :content="form.oldImageName"
-                            v-if="form.oldImageName.length > 50"
-                        >
-                            <el-tag>{{ form.oldImageName.substring(0, 50) }}...</el-tag>
-                        </el-tooltip>
-                        <el-tag v-else>{{ form.oldImageName }}</el-tag>
-                    </el-form-item>
-                    <el-form-item prop="newImageName" :rules="Rules.imageName">
-                        <template #label>
-                            {{ $t('container.targetImage') }}
-                            <span v-if="!form.hasName">
-                                {{ ' (' + $t('container.imageLoadErr') + ')' }}
-                            </span>
-                        </template>
-                        <el-input v-model="form.newImageName" />
-                        <span class="input-help">{{ $t('container.upgradeHelper') }}</span>
-                    </el-form-item>
-                    <el-form-item prop="forcePull">
-                        <el-checkbox v-model="form.forcePull">
-                            {{ $t('container.forcePull') }}
-                        </el-checkbox>
-                        <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+        <el-alert
+            :title="$t('container.appHelper')"
+            v-if="form.fromApp"
+            class="common-prompt"
+            :closable="false"
+            type="error"
+        />
+        <el-form @submit.prevent ref="formRef" :model="form" label-position="top">
+            <el-form-item :label="$t('container.oldImage')" prop="oldImage">
+                <el-tooltip placement="top-start" :content="form.oldImageName" v-if="form.oldImageName.length > 50">
+                    <el-tag>{{ form.oldImageName.substring(0, 50) }}...</el-tag>
+                </el-tooltip>
+                <el-tag v-else>{{ form.oldImageName }}</el-tag>
+            </el-form-item>
+            <el-form-item prop="newImageName" :rules="Rules.imageName">
+                <template #label>
+                    {{ $t('container.targetImage') }}
+                    <span v-if="!form.hasName">
+                        {{ ' (' + $t('container.imageLoadErr') + ')' }}
+                    </span>
+                </template>
+                <el-input v-model="form.newImageName" />
+                <span class="input-help">{{ $t('container.upgradeHelper') }}</span>
+            </el-form-item>
+            <el-form-item prop="forcePull">
+                <el-checkbox v-model="form.forcePull">
+                    {{ $t('container.forcePull') }}
+                </el-checkbox>
+                <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="loading" @click="drawerVisible = false">
@@ -59,7 +47,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -69,7 +57,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElForm } from 'element-plus';
 import { reactive, ref } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/container/image/build/index.vue b/frontend/src/views/container/image/build/index.vue
index 6174d92c5..9a457185c 100644
--- a/frontend/src/views/container/image/build/index.vue
+++ b/frontend/src/views/container/image/build/index.vue
@@ -1,72 +1,58 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        :destroy-on-close="true"
-        @close="handleClose"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('container.imageBuild')" :back="handleClose" />
-        </template>
-        <el-row type="flex" justify="center">
-            <el-col :span="22">
-                <el-form ref="formRef" label-position="top" :model="form" label-width="80px" :rules="rules">
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input :placeholder="$t('container.imageNameHelper')" v-model.trim="form.name" clearable />
-                    </el-form-item>
-                    <el-form-item label="Dockerfile" prop="from">
-                        <el-radio-group @change="onEdit()" v-model="form.from">
-                            <el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
-                            <el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput">
-                        <codemirror
-                            @change="onEdit()"
-                            :autofocus="true"
-                            placeholder="#Define or paste the content of your Dockerfile here"
-                            :indent-with-tab="true"
-                            :tabSize="4"
-                            style="width: 100%; height: calc(100vh - 520px)"
-                            :lineWrapping="true"
-                            :matchBrackets="true"
-                            theme="cobalt"
-                            :styleActiveLine="true"
-                            :extensions="extensions"
-                            v-model="form.dockerfile"
-                            :readOnly="true"
-                        />
-                    </el-form-item>
-                    <el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
-                        <el-input @change="onEdit()" clearable v-model="form.dockerfile">
-                            <template #prepend>
-                                <FileList @choose="loadBuildDir"></FileList>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.tag')">
-                        <el-input
-                            @change="onEdit()"
-                            :placeholder="$t('container.tagHelper')"
-                            type="textarea"
-                            :rows="3"
-                            v-model="form.tagStr"
-                        />
-                    </el-form-item>
-                </el-form>
-
-                <LogFile
-                    ref="logRef"
-                    :config="logConfig"
-                    :default-button="false"
-                    v-model:is-reading="isReading"
-                    v-if="logVisible"
-                    :style="'height: calc(100vh - 370px);min-height: 200px'"
+    <DrawerPro v-model="drawerVisible" :header="$t('container.imageBuild')" :back="handleClose" size="large">
+        <el-form ref="formRef" label-position="top" :model="form" label-width="80px" :rules="rules">
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input :placeholder="$t('container.imageNameHelper')" v-model.trim="form.name" clearable />
+            </el-form-item>
+            <el-form-item label="Dockerfile" prop="from">
+                <el-radio-group @change="onEdit()" v-model="form.from">
+                    <el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
+                    <el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput">
+                <codemirror
+                    @change="onEdit()"
+                    :autofocus="true"
+                    placeholder="#Define or paste the content of your Dockerfile here"
+                    :indent-with-tab="true"
+                    :tabSize="4"
+                    style="width: 100%; height: calc(100vh - 520px)"
+                    :lineWrapping="true"
+                    :matchBrackets="true"
+                    theme="cobalt"
+                    :styleActiveLine="true"
+                    :extensions="extensions"
+                    v-model="form.dockerfile"
+                    :readOnly="true"
                 />
-            </el-col>
-        </el-row>
+            </el-form-item>
+            <el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
+                <el-input @change="onEdit()" clearable v-model="form.dockerfile">
+                    <template #prepend>
+                        <FileList @choose="loadBuildDir"></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('container.tag')">
+                <el-input
+                    @change="onEdit()"
+                    :placeholder="$t('container.tagHelper')"
+                    type="textarea"
+                    :rows="3"
+                    v-model="form.tagStr"
+                />
+            </el-form-item>
+        </el-form>
+
+        <LogFile
+            ref="logRef"
+            :config="logConfig"
+            :default-button="false"
+            v-model:is-reading="isReading"
+            v-if="logVisible"
+            :style="'height: calc(100vh - 370px);min-height: 200px'"
+        />
 
         <template #footer>
             <span class="dialog-footer">
@@ -76,7 +62,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -89,7 +75,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm, ElMessage } from 'element-plus';
 import { imageBuild } from '@/api/modules/container';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const logVisible = ref<boolean>(false);
 const extensions = [javascript(), oneDark];
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index 7e10fcfd9..5f661ff12 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -25,7 +25,7 @@
                 </el-button>
             </template>
             <template #rightToolBar>
-                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-" />
+                <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
                 <TableSetting @search="search()" />
             </template>
             <template #main>
diff --git a/frontend/src/views/container/image/load/index.vue b/frontend/src/views/container/image/load/index.vue
index 74cea4487..18240c6c9 100644
--- a/frontend/src/views/container/image/load/index.vue
+++ b/frontend/src/views/container/image/load/index.vue
@@ -1,26 +1,13 @@
 <template>
-    <el-drawer
-        v-model="loadVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="30%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('container.importImage')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="loadVisible" :header="$t('container.importImage')" :back="handleClose" size="small">
         <el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('container.path')" :rules="Rules.requiredInput" prop="path">
-                        <el-input v-model="form.path">
-                            <template #prepend>
-                                <FileList @choose="loadLoadDir" :dir="false"></FileList>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item :label="$t('container.path')" :rules="Rules.requiredInput" prop="path">
+                <el-input v-model="form.path">
+                    <template #prepend>
+                        <FileList @choose="loadLoadDir" :dir="false"></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -32,7 +19,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -43,7 +30,6 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { imageLoad } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref(false);
 
diff --git a/frontend/src/views/container/image/pull/index.vue b/frontend/src/views/container/image/pull/index.vue
index b0624eb93..b163415b8 100644
--- a/frontend/src/views/container/image/pull/index.vue
+++ b/frontend/src/views/container/image/pull/index.vue
@@ -1,49 +1,35 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        @close="onCloseLog"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('container.imagePull')" :back="onCloseLog" />
-        </template>
-        <el-row type="flex" justify="center">
-            <el-col :span="22">
-                <el-form ref="formRef" label-position="top" :model="form">
-                    <el-form-item :label="$t('container.from')">
-                        <el-checkbox @change="onEdit()" v-model="form.fromRepo">
-                            {{ $t('container.imageRepo') }}
-                        </el-checkbox>
-                    </el-form-item>
-                    <el-form-item
-                        v-if="form.fromRepo"
-                        :label="$t('container.repoName')"
-                        :rules="Rules.requiredSelect"
-                        prop="repoID"
-                    >
-                        <el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
-                            <el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.imageName')" :rules="Rules.imageName" prop="imageName">
-                        <el-input @change="onEdit()" v-model.trim="form.imageName">
-                            <template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
-                        </el-input>
-                    </el-form-item>
-                </el-form>
-                <LogFile
-                    ref="logRef"
-                    :config="logConfig"
-                    :default-button="false"
-                    v-model:is-reading="isReading"
-                    v-if="showLog"
-                    :style="'height: calc(100vh - 397px);min-height: 200px'"
-                />
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="drawerVisible" :header="$t('container.imagePull')" :back="onCloseLog" size="large">
+        <el-form ref="formRef" label-position="top" :model="form">
+            <el-form-item :label="$t('container.from')">
+                <el-checkbox @change="onEdit()" v-model="form.fromRepo">
+                    {{ $t('container.imageRepo') }}
+                </el-checkbox>
+            </el-form-item>
+            <el-form-item
+                v-if="form.fromRepo"
+                :label="$t('container.repoName')"
+                :rules="Rules.requiredSelect"
+                prop="repoID"
+            >
+                <el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
+                    <el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('container.imageName')" :rules="Rules.imageName" prop="imageName">
+                <el-input @change="onEdit()" v-model.trim="form.imageName">
+                    <template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <LogFile
+            ref="logRef"
+            :config="logConfig"
+            :default-button="false"
+            v-model:is-reading="isReading"
+            v-if="showLog"
+            :style="'height: calc(100vh - 397px);min-height: 200px'"
+        />
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">
@@ -54,7 +40,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -64,7 +50,6 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { imagePull } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
 const drawerVisible = ref(false);
diff --git a/frontend/src/views/container/image/push/index.vue b/frontend/src/views/container/image/push/index.vue
index d8241068e..1a5f509b1 100644
--- a/frontend/src/views/container/image/push/index.vue
+++ b/frontend/src/views/container/image/push/index.vue
@@ -1,51 +1,32 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        :destroy-on-close="true"
-        @close="onCloseLog"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('container.imagePush')" :back="onCloseLog" />
-        </template>
-        <el-row type="flex" justify="center">
-            <el-col :span="22">
-                <el-form ref="formRef" label-position="top" :model="form" label-width="80px">
-                    <el-form-item :label="$t('container.tag')" :rules="Rules.requiredSelect" prop="tagName">
-                        <el-select @change="onEdit(true)" filterable v-model="form.tagName">
-                            <el-option v-for="item in form.tags" :key="item" :value="item" :label="item" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.repoName')" :rules="Rules.requiredSelect" prop="repoID">
-                        <el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
-                            <el-option
-                                v-for="item in dialogData.repos"
-                                :key="item.id"
-                                :value="item.id"
-                                :label="item.name"
-                            />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.image')" :rules="Rules.imageName" prop="name">
-                        <el-input @change="onEdit()" v-model.trim="form.name">
-                            <template #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
-                        </el-input>
-                    </el-form-item>
-                </el-form>
+    <DrawerPro v-model="drawerVisible" :header="$t('container.imagePush')" :back="onCloseLog" size="large">
+        <el-form ref="formRef" label-position="top" :model="form" label-width="80px">
+            <el-form-item :label="$t('container.tag')" :rules="Rules.requiredSelect" prop="tagName">
+                <el-select @change="onEdit(true)" filterable v-model="form.tagName">
+                    <el-option v-for="item in form.tags" :key="item" :value="item" :label="item" />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('container.repoName')" :rules="Rules.requiredSelect" prop="repoID">
+                <el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
+                    <el-option v-for="item in dialogData.repos" :key="item.id" :value="item.id" :label="item.name" />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('container.image')" :rules="Rules.imageName" prop="name">
+                <el-input @change="onEdit()" v-model.trim="form.name">
+                    <template #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
+                </el-input>
+            </el-form-item>
+        </el-form>
 
-                <LogFile
-                    ref="logRef"
-                    :config="logConfig"
-                    :default-button="false"
-                    v-model:is-reading="isReading"
-                    v-if="logVisible"
-                    :style="'height: calc(100vh - 370px);min-height: 200px'"
-                    v-model:loading="loading"
-                />
-            </el-col>
-        </el-row>
+        <LogFile
+            ref="logRef"
+            :config="logConfig"
+            :default-button="false"
+            v-model:is-reading="isReading"
+            v-if="logVisible"
+            :style="'height: calc(100vh - 370px);min-height: 200px'"
+            v-model:loading="loading"
+        />
 
         <template #footer>
             <span class="dialog-footer">
@@ -57,7 +38,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -67,7 +48,6 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { imagePush } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
 const drawerVisible = ref(false);
diff --git a/frontend/src/views/container/image/tag/index.vue b/frontend/src/views/container/image/tag/index.vue
index bd52d8061..e111092ed 100644
--- a/frontend/src/views/container/image/tag/index.vue
+++ b/frontend/src/views/container/image/tag/index.vue
@@ -1,50 +1,31 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('container.imageTag')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="drawerVisible" :header="$t('container.imageTag')" :back="handleClose" size="large">
         <el-form v-loading="loading" label-position="top" ref="formRef" :model="form" label-width="80px">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('container.from')">
-                        <el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
-                    </el-form-item>
-                    <el-form-item
-                        v-if="form.fromRepo"
-                        :label="$t('container.repoName')"
-                        :rules="Rules.requiredSelect"
-                        prop="repo"
-                    >
-                        <el-select style="width: 100%" clearable filterable v-model="form.repo" @change="changeRepo">
-                            <el-option v-for="item in repos" :key="item.id" :value="item.name" :label="item.name" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.imageTag')" :rules="Rules.imageName" prop="targetName">
-                        <el-input v-model="form.targetName" />
-                    </el-form-item>
+            <el-form-item :label="$t('container.from')">
+                <el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item
+                v-if="form.fromRepo"
+                :label="$t('container.repoName')"
+                :rules="Rules.requiredSelect"
+                prop="repo"
+            >
+                <el-select clearable filterable v-model="form.repo" @change="changeRepo">
+                    <el-option v-for="item in repos" :key="item.id" :value="item.name" :label="item.name" />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('container.imageTag')" :rules="Rules.imageName" prop="targetName">
+                <el-input v-model="form.targetName" />
+            </el-form-item>
 
-                    <el-form-item>
-                        <el-checkbox style="width: 100%" v-model="form.deleteTag">
-                            {{ $t('container.imageTagDeleteHelper') }}
-                        </el-checkbox>
-                        <el-checkbox-group class="ml-5" v-if="form.deleteTag" v-model="form.deleteTags">
-                            <el-checkbox
-                                style="width: 100%"
-                                v-for="item in tags"
-                                :key="item"
-                                :value="item"
-                                :label="item"
-                            />
-                        </el-checkbox-group>
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item>
+                <el-checkbox v-model="form.deleteTag">
+                    {{ $t('container.imageTagDeleteHelper') }}
+                </el-checkbox>
+                <el-checkbox-group class="ml-5" v-if="form.deleteTag" v-model="form.deleteTags">
+                    <el-checkbox v-for="item in tags" :key="item" :value="item" :label="item" />
+                </el-checkbox-group>
+            </el-form-item>
         </el-form>
 
         <template #footer>
@@ -57,7 +38,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -67,7 +48,6 @@ import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { imageRemove, imageTag } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
 const loading = ref(false);
diff --git a/frontend/src/views/container/network/create/index.vue b/frontend/src/views/container/network/create/index.vue
index d8604a50f..9af47f2c4 100644
--- a/frontend/src/views/container/network/create/index.vue
+++ b/frontend/src/views/container/network/create/index.vue
@@ -1,139 +1,116 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('container.createNetwork')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="drawerVisible" :header="$t('container.createNetwork')" :back="handleClose" size="large">
         <el-form ref="formRef" label-position="top" v-loading="loading" :model="form" :rules="rules" label-width="80px">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('container.networkName')" prop="name">
-                        <el-input clearable v-model.trim="form.name" />
-                    </el-form-item>
-                    <el-form-item :label="$t('container.driver')" prop="driver">
-                        <el-select v-model="form.driver">
-                            <el-option label="bridge" value="bridge" />
-                            <el-option label="ipvlan" value="ipvlan" />
-                            <el-option label="macvlan" value="macvlan" />
-                            <el-option label="overlay" value="overlay" />
-                        </el-select>
-                    </el-form-item>
+            <el-form-item :label="$t('container.networkName')" prop="name">
+                <el-input clearable v-model.trim="form.name" />
+            </el-form-item>
+            <el-form-item :label="$t('container.driver')" prop="driver">
+                <el-select v-model="form.driver">
+                    <el-option label="bridge" value="bridge" />
+                    <el-option label="ipvlan" value="ipvlan" />
+                    <el-option label="macvlan" value="macvlan" />
+                    <el-option label="overlay" value="overlay" />
+                </el-select>
+            </el-form-item>
 
-                    <el-checkbox v-model="form.ipv4">IPv4</el-checkbox>
-                    <div v-if="form.ipv4">
-                        <el-row type="flex" justify="center" :gutter="20">
-                            <el-col :span="12">
-                                <el-form-item :label="$t('container.subnet')" prop="subnet">
-                                    <el-input placeholder="172.16.10.0/24" clearable v-model.trim="form.subnet" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item :label="$t('container.gateway')" prop="gateway">
-                                    <el-input placeholder="172.16.10.12" clearable v-model.trim="form.gateway" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item :label="$t('container.scope')" prop="scope">
-                                    <el-input placeholder="172.16.10.0/16" clearable v-model.trim="form.scope" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12"></el-col>
-                        </el-row>
-                        <el-form-item :label="$t('container.auxAddress')" prop="scopeV6">
-                            <el-table :data="form.auxAddress" v-if="form.auxAddress.length !== 0">
-                                <el-table-column :label="$t('container.label')" min-width="100">
-                                    <template #default="{ row }">
-                                        <el-input placeholder="my-router" v-model="row.key" />
-                                    </template>
-                                </el-table-column>
-                                <el-table-column label="IP" min-width="150">
-                                    <template #default="{ row }">
-                                        <el-input placeholder="172.16.10.13" v-model="row.value" />
-                                    </template>
-                                </el-table-column>
-                                <el-table-column min-width="40">
-                                    <template #default="scope">
-                                        <el-button link type="primary" @click="handleV4Delete(scope.$index)">
-                                            {{ $t('commons.button.delete') }}
-                                        </el-button>
-                                    </template>
-                                </el-table-column>
-                            </el-table>
-                            <el-button class="mt-2" @click="handleV4Add()">
-                                {{ $t('commons.button.add') }}
-                            </el-button>
+            <el-checkbox v-model="form.ipv4">IPv4</el-checkbox>
+            <div v-if="form.ipv4">
+                <el-row type="flex" justify="center" :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item :label="$t('container.subnet')" prop="subnet">
+                            <el-input placeholder="172.16.10.0/24" clearable v-model.trim="form.subnet" />
                         </el-form-item>
-                    </div>
-
-                    <el-checkbox class="mb-4" v-model="form.ipv6">IPv6</el-checkbox>
-                    <div v-if="form.ipv6">
-                        <el-row type="flex" justify="center" :gutter="20">
-                            <el-col :span="12">
-                                <el-form-item :label="$t('container.subnet')" prop="subnetV6">
-                                    <el-input placeholder="2408:400e::/48" clearable v-model.trim="form.subnetV6" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item :label="$t('container.gateway')" prop="gatewayV6">
-                                    <el-input placeholder="2408:400e::1" clearable v-model.trim="form.gatewayV6" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item :label="$t('container.scope')" prop="scopeV6">
-                                    <el-input placeholder="2408:400e::/64" clearable v-model.trim="form.scopeV6" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12"></el-col>
-                        </el-row>
-                        <el-form-item :label="$t('container.auxAddress')" prop="scopeV6">
-                            <el-table :data="form.auxAddressV6" v-if="form.auxAddressV6.length !== 0">
-                                <el-table-column :label="$t('container.label')" min-width="100">
-                                    <template #default="{ row }">
-                                        <el-input placeholder="my-router" v-model="row.key" />
-                                    </template>
-                                </el-table-column>
-                                <el-table-column label="IP" min-width="150">
-                                    <template #default="{ row }">
-                                        <el-input placeholder="2408:400e::3" v-model="row.value" />
-                                    </template>
-                                </el-table-column>
-                                <el-table-column min-width="40">
-                                    <template #default="scope">
-                                        <el-button link type="primary" @click="handleV6Delete(scope.$index)">
-                                            {{ $t('commons.button.delete') }}
-                                        </el-button>
-                                    </template>
-                                </el-table-column>
-                            </el-table>
-                            <el-button class="mt-2" @click="handleV6Add()">
-                                {{ $t('commons.button.add') }}
-                            </el-button>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('container.gateway')" prop="gateway">
+                            <el-input placeholder="172.16.10.12" clearable v-model.trim="form.gateway" />
                         </el-form-item>
-                    </div>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('container.scope')" prop="scope">
+                            <el-input placeholder="172.16.10.0/16" clearable v-model.trim="form.scope" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12"></el-col>
+                </el-row>
+                <el-form-item :label="$t('container.auxAddress')" prop="scopeV6">
+                    <el-table :data="form.auxAddress" v-if="form.auxAddress.length !== 0">
+                        <el-table-column :label="$t('container.label')" min-width="100">
+                            <template #default="{ row }">
+                                <el-input placeholder="my-router" v-model="row.key" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="IP" min-width="150">
+                            <template #default="{ row }">
+                                <el-input placeholder="172.16.10.13" v-model="row.value" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column min-width="40">
+                            <template #default="scope">
+                                <el-button link type="primary" @click="handleV4Delete(scope.$index)">
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-button class="mt-2" @click="handleV4Add()">
+                        {{ $t('commons.button.add') }}
+                    </el-button>
+                </el-form-item>
+            </div>
 
-                    <el-form-item :label="$t('container.option')" prop="optionStr">
-                        <el-input
-                            type="textarea"
-                            :placeholder="$t('container.tagHelper')"
-                            :rows="3"
-                            v-model="form.optionStr"
-                        />
-                    </el-form-item>
-                    <el-form-item :label="$t('container.tag')" prop="labelStr">
-                        <el-input
-                            type="textarea"
-                            :placeholder="$t('container.tagHelper')"
-                            :rows="3"
-                            v-model="form.labelStr"
-                        />
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-checkbox class="mb-4" v-model="form.ipv6">IPv6</el-checkbox>
+            <div v-if="form.ipv6">
+                <el-row type="flex" justify="center" :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item :label="$t('container.subnet')" prop="subnetV6">
+                            <el-input placeholder="2408:400e::/48" clearable v-model.trim="form.subnetV6" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('container.gateway')" prop="gatewayV6">
+                            <el-input placeholder="2408:400e::1" clearable v-model.trim="form.gatewayV6" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item :label="$t('container.scope')" prop="scopeV6">
+                            <el-input placeholder="2408:400e::/64" clearable v-model.trim="form.scopeV6" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12"></el-col>
+                </el-row>
+                <el-form-item :label="$t('container.auxAddress')" prop="scopeV6">
+                    <el-table :data="form.auxAddressV6" v-if="form.auxAddressV6.length !== 0">
+                        <el-table-column :label="$t('container.label')" min-width="100">
+                            <template #default="{ row }">
+                                <el-input placeholder="my-router" v-model="row.key" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="IP" min-width="150">
+                            <template #default="{ row }">
+                                <el-input placeholder="2408:400e::3" v-model="row.value" />
+                            </template>
+                        </el-table-column>
+                        <el-table-column min-width="40">
+                            <template #default="scope">
+                                <el-button link type="primary" @click="handleV6Delete(scope.$index)">
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-button class="mt-2" @click="handleV6Add()">
+                        {{ $t('commons.button.add') }}
+                    </el-button>
+                </el-form-item>
+            </div>
+
+            <el-form-item :label="$t('container.option')" prop="optionStr">
+                <el-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.optionStr" />
+            </el-form-item>
+            <el-form-item :label="$t('container.tag')" prop="labelStr">
+                <el-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.labelStr" />
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -145,7 +122,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -154,7 +131,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { createNetwork } from '@/api/modules/container';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { checkIp, checkIpV6 } from '@/utils/util';
 
diff --git a/frontend/src/views/container/repo/operator/index.vue b/frontend/src/views/container/repo/operator/index.vue
index 9254e2e59..9c635eb6b 100644
--- a/frontend/src/views/container/repo/operator/index.vue
+++ b/frontend/src/views/container/repo/operator/index.vue
@@ -1,18 +1,11 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="30%"
+        :header="title + $t('container.repo')"
+        :resource="dialogData.rowData?.name"
+        :back="handleClose"
+        size="small"
     >
-        <template #header>
-            <DrawerHeader
-                :header="title + $t('container.repo')"
-                :resource="dialogData.rowData?.name"
-                :back="handleClose"
-            />
-        </template>
         <el-form
             ref="formRef"
             label-position="top"
@@ -21,53 +14,49 @@
             :rules="rules"
             label-width="120px"
         >
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input
-                            clearable
-                            :disabled="dialogData.title === 'edit'"
-                            v-model.trim="dialogData.rowData!.name"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.auth')" prop="auth">
-                        <el-radio-group v-model="dialogData.rowData!.auth">
-                            <el-radio :value="true">{{ $t('commons.true') }}</el-radio>
-                            <el-radio :value="false">{{ $t('commons.false') }}</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.username')" prop="username">
-                        <el-input clearable v-model.trim="dialogData.rowData!.username"></el-input>
-                    </el-form-item>
-                    <el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.password')" prop="password">
-                        <el-input
-                            clearable
-                            type="password"
-                            show-password
-                            v-model.trim="dialogData.rowData!.password"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.downloadUrl')" prop="downloadUrl">
-                        <el-input
-                            clearable
-                            v-model.trim="dialogData.rowData!.downloadUrl"
-                            :placeholder="'172.16.10.10:8081'"
-                        ></el-input>
-                        <span v-if="dialogData.rowData!.downloadUrl" class="input-help">
-                            docker pull {{ dialogData.rowData!.downloadUrl }}/nginx
-                        </span>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.protocol')" prop="protocol">
-                        <el-radio-group v-model="dialogData.rowData!.protocol">
-                            <el-radio label="http">http</el-radio>
-                            <el-radio label="https">https</el-radio>
-                        </el-radio-group>
-                        <span v-if="dialogData.rowData!.protocol === 'http'" class="input-help">
-                            {{ $t('container.httpRepo') }}
-                        </span>
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input
+                    clearable
+                    :disabled="dialogData.title === 'edit'"
+                    v-model.trim="dialogData.rowData!.name"
+                ></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('container.auth')" prop="auth">
+                <el-radio-group v-model="dialogData.rowData!.auth">
+                    <el-radio :value="true">{{ $t('commons.true') }}</el-radio>
+                    <el-radio :value="false">{{ $t('commons.false') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.username')" prop="username">
+                <el-input clearable v-model.trim="dialogData.rowData!.username"></el-input>
+            </el-form-item>
+            <el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.password')" prop="password">
+                <el-input
+                    clearable
+                    type="password"
+                    show-password
+                    v-model.trim="dialogData.rowData!.password"
+                ></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('container.downloadUrl')" prop="downloadUrl">
+                <el-input
+                    clearable
+                    v-model.trim="dialogData.rowData!.downloadUrl"
+                    :placeholder="'172.16.10.10:8081'"
+                ></el-input>
+                <span v-if="dialogData.rowData!.downloadUrl" class="input-help">
+                    docker pull {{ dialogData.rowData!.downloadUrl }}/nginx
+                </span>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.protocol')" prop="protocol">
+                <el-radio-group v-model="dialogData.rowData!.protocol">
+                    <el-radio label="http">http</el-radio>
+                    <el-radio label="https">https</el-radio>
+                </el-radio-group>
+                <span v-if="dialogData.rowData!.protocol === 'http'" class="input-help">
+                    {{ $t('container.httpRepo') }}
+                </span>
+            </el-form-item>
         </el-form>
 
         <template #footer>
@@ -80,7 +69,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -89,7 +78,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Container } from '@/api/interface/container';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { createImageRepo, updateImageRepo } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/container/template/detail/index.vue b/frontend/src/views/container/template/detail/index.vue
index e57ad8f67..414edadaa 100644
--- a/frontend/src/views/container/template/detail/index.vue
+++ b/frontend/src/views/container/template/detail/index.vue
@@ -1,16 +1,5 @@
 <template>
-    <el-drawer
-        v-model="detailVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <div class="card-header">
-                <span>{{ $t('commons.button.view') }}</span>
-            </div>
-        </template>
+    <DrawerPro v-model="detailVisible" :header="$t('commons.button.view')" size="large">
         <codemirror
             :autofocus="true"
             :placeholder="$t('commons.msg.noneData')"
@@ -30,7 +19,7 @@
                 <el-button @click="detailVisible = false">{{ $t('commons.button.cancel') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/container/template/operator/index.vue b/frontend/src/views/container/template/operator/index.vue
index 11fae9f75..305db1d02 100644
--- a/frontend/src/views/container/template/operator/index.vue
+++ b/frontend/src/views/container/template/operator/index.vue
@@ -1,19 +1,11 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="$t('container.composeTemplate')"
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        :back="handleClose"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader
-                :header="title + $t('container.composeTemplate')"
-                :hideResource="dialogData.title === 'create'"
-                :resource="dialogData.rowData?.name"
-                :back="handleClose"
-            />
-        </template>
         <el-form
             v-loading="loading"
             label-position="top"
@@ -22,34 +14,27 @@
             :rules="rules"
             label-width="80px"
         >
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input
-                            :disabled="dialogData.title === 'edit'"
-                            v-model.trim="dialogData.rowData!.name"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.description')">
-                        <el-input v-model="dialogData.rowData!.description"></el-input>
-                    </el-form-item>
-                    <el-form-item>
-                        <codemirror
-                            :autofocus="true"
-                            placeholder="#Define or paste the content of your docker-compose file here"
-                            :indent-with-tab="true"
-                            :tabSize="4"
-                            style="width: 100%; height: calc(100vh - 351px)"
-                            :lineWrapping="true"
-                            :matchBrackets="true"
-                            theme="cobalt"
-                            :styleActiveLine="true"
-                            :extensions="extensions"
-                            v-model="dialogData.rowData!.content"
-                        />
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input :disabled="dialogData.title === 'edit'" v-model.trim="dialogData.rowData!.name"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('container.description')">
+                <el-input v-model="dialogData.rowData!.description"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <codemirror
+                    :autofocus="true"
+                    placeholder="#Define or paste the content of your docker-compose file here"
+                    :indent-with-tab="true"
+                    :tabSize="4"
+                    style="width: 100%; height: calc(100vh - 351px)"
+                    :lineWrapping="true"
+                    :matchBrackets="true"
+                    theme="cobalt"
+                    :styleActiveLine="true"
+                    :extensions="extensions"
+                    v-model="dialogData.rowData!.content"
+                />
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -61,7 +46,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -73,7 +58,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Container } from '@/api/interface/container';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { createComposeTemplate, updateComposeTemplate } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/container/volume/create/index.vue b/frontend/src/views/container/volume/create/index.vue
index 296ac08e6..197090d1d 100644
--- a/frontend/src/views/container/volume/create/index.vue
+++ b/frontend/src/views/container/volume/create/index.vue
@@ -1,78 +1,51 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="30%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('container.createVolume')" :back="handleClose" />
-        </template>
-        <el-row type="flex" justify="center">
-            <el-col :span="22">
-                <el-form
-                    ref="formRef"
-                    v-loading="loading"
-                    label-position="top"
-                    :model="form"
-                    :rules="rules"
-                    label-width="80px"
-                    @submit.prevent
-                >
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input clearable v-model.trim="form.name" />
-                    </el-form-item>
-                    <el-form-item :label="$t('container.driver')" prop="driver">
-                        <el-tag type="success">local</el-tag>
-                    </el-form-item>
-                    <el-form-item :label="$t('container.nfsEnable')" prop="nfsStatus">
-                        <el-switch v-model="form.nfsStatus" active-value="enable" inactive-value="disable" />
-                    </el-form-item>
-                    <div v-if="form.nfsStatus === 'enable'">
-                        <el-form-item :label="$t('container.nfsAddress')" prop="nfsAddress">
-                            <el-input
-                                clearable
-                                v-model.trim="form.nfsAddress"
-                                :placeholder="$t('commons.rule.hostHelper')"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('container.version')" prop="nfsVersion">
-                            <el-radio-group v-model="form.nfsVersion">
-                                <el-radio value="v3">NFS</el-radio>
-                                <el-radio value="v4">NFS4</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item :label="$t('container.mountpoint')" prop="nfsMount">
-                            <el-input
-                                clearable
-                                v-model.trim="form.nfsMount"
-                                :placeholder="$t('container.mountpointNFSHelper')"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('container.options')" prop="nfsOption">
-                            <el-input clearable v-model.trim="form.nfsOption" />
-                        </el-form-item>
-                    </div>
-                    <el-form-item :label="$t('container.option')" prop="optionStr">
-                        <el-input
-                            type="textarea"
-                            :placeholder="$t('container.tagHelper')"
-                            :rows="3"
-                            v-model="form.optionStr"
-                        />
-                    </el-form-item>
-                    <el-form-item :label="$t('container.tag')" prop="labelStr">
-                        <el-input
-                            type="textarea"
-                            :placeholder="$t('container.tagHelper')"
-                            :rows="3"
-                            v-model="form.labelStr"
-                        />
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="drawerVisible" :header="$t('container.createVolume')" :back="handleClose" size="small">
+        <el-form
+            ref="formRef"
+            v-loading="loading"
+            label-position="top"
+            :model="form"
+            :rules="rules"
+            label-width="80px"
+            @submit.prevent
+        >
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input clearable v-model.trim="form.name" />
+            </el-form-item>
+            <el-form-item :label="$t('container.driver')" prop="driver">
+                <el-tag type="success">local</el-tag>
+            </el-form-item>
+            <el-form-item :label="$t('container.nfsEnable')" prop="nfsStatus">
+                <el-switch v-model="form.nfsStatus" active-value="enable" inactive-value="disable" />
+            </el-form-item>
+            <div v-if="form.nfsStatus === 'enable'">
+                <el-form-item :label="$t('container.nfsAddress')" prop="nfsAddress">
+                    <el-input clearable v-model.trim="form.nfsAddress" :placeholder="$t('commons.rule.hostHelper')" />
+                </el-form-item>
+                <el-form-item :label="$t('container.version')" prop="nfsVersion">
+                    <el-radio-group v-model="form.nfsVersion">
+                        <el-radio value="v3">NFS</el-radio>
+                        <el-radio value="v4">NFS4</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item :label="$t('container.mountpoint')" prop="nfsMount">
+                    <el-input
+                        clearable
+                        v-model.trim="form.nfsMount"
+                        :placeholder="$t('container.mountpointNFSHelper')"
+                    />
+                </el-form-item>
+                <el-form-item :label="$t('container.options')" prop="nfsOption">
+                    <el-input clearable v-model.trim="form.nfsOption" />
+                </el-form-item>
+            </div>
+            <el-form-item :label="$t('container.option')" prop="optionStr">
+                <el-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.optionStr" />
+            </el-form-item>
+            <el-form-item :label="$t('container.tag')" prop="labelStr">
+                <el-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.labelStr" />
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="loading" @click="drawerVisible = false">
@@ -83,7 +56,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -92,7 +65,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { createVolume } from '@/api/modules/container';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
 const loading = ref(false);
diff --git a/frontend/src/views/cronjob/backup/index.vue b/frontend/src/views/cronjob/backup/index.vue
index 4683c6ab1..bd2f11175 100644
--- a/frontend/src/views/cronjob/backup/index.vue
+++ b/frontend/src/views/cronjob/backup/index.vue
@@ -1,21 +1,12 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="backupVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader
-                    v-if="cronjob"
-                    :header="$t('commons.button.backup')"
-                    :resource="cronjob"
-                    :back="handleClose"
-                />
-                <DrawerHeader v-else :header="$t('commons.button.backup')" :resource="cronjob" :back="handleClose" />
-            </template>
+    <DrawerPro
+        v-model="backupVisible"
+        :header="$t('commons.button.backup')"
+        :resource="cronjob"
+        :back="handleClose"
+        size="large"
+    >
+        <template #content>
             <ComplexTable
                 v-loading="loading"
                 :pagination-config="paginationConfig"
@@ -48,15 +39,14 @@
 
                 <fu-table-operations width="130px" :buttons="buttons" :label="$t('commons.table.operate')" fix />
             </ComplexTable>
-        </el-drawer>
-    </div>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { computeSize, dateFormat, downloadFile } from '@/utils/util';
 import i18n from '@/lang';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { downloadBackupRecord, searchBackupRecordsByCronjob } from '@/api/modules/setting';
 import { Backup } from '@/api/interface/backup';
 
diff --git a/frontend/src/views/cronjob/operate/index.vue b/frontend/src/views/cronjob/operate/index.vue
index 82c0964b7..20d4c7072 100644
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/operate/index.vue
@@ -1,353 +1,311 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="title"
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        :back="handleClose"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader
-                :header="title"
-                :hideResource="dialogData.title === 'create'"
-                :resource="dialogData.rowData?.name"
-                :back="handleClose"
-            />
-        </template>
         <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('cronjob.taskType')" prop="type">
-                        <el-select
-                            v-if="dialogData.title === 'create'"
-                            class="selectClass"
-                            @change="changeType"
-                            v-model="dialogData.rowData!.type"
+            <el-form-item :label="$t('cronjob.taskType')" prop="type">
+                <el-select
+                    v-if="dialogData.title === 'create'"
+                    class="selectClass"
+                    @change="changeType"
+                    v-model="dialogData.rowData!.type"
+                >
+                    <el-option value="shell" :label="$t('cronjob.shell')" />
+                    <el-option value="app" :label="$t('cronjob.app')" />
+                    <el-option value="website" :label="$t('cronjob.website')" />
+                    <el-option value="database" :label="$t('cronjob.database')" />
+                    <el-option value="directory" :label="$t('cronjob.directory')" />
+                    <el-option value="log" :label="$t('cronjob.log')" />
+                    <el-option value="curl" :label="$t('cronjob.curl')" />
+                    <el-option value="cutWebsiteLog" :label="$t('cronjob.cutWebsiteLog')" />
+                    <el-option value="clean" :label="$t('setting.diskClean')" />
+                    <el-option value="snapshot" :label="$t('cronjob.snapshot')" />
+                    <el-option value="ntp" :label="$t('cronjob.ntp')" />
+                </el-select>
+                <div v-else class="w-full">
+                    <el-tag>{{ $t('cronjob.' + dialogData.rowData!.type) }}</el-tag>
+                </div>
+                <div v-if="dialogData.rowData!.type === 'log'" class="logText">
+                    <span class="input-help">
+                        {{ $t('cronjob.logHelper1') }}
+                        <el-link class="link" icon="Position" @click="goRouter('/logs/system')" type="primary">
+                            {{ $t('firewall.quickJump') }}
+                        </el-link>
+                    </span>
+                    <span class="input-help">
+                        {{ $t('cronjob.logHelper2') }}
+                        <el-link class="link" icon="Position" @click="goRouter('/logs/ssh')" type="primary">
+                            {{ $t('firewall.quickJump') }}
+                        </el-link>
+                    </span>
+                    <span class="input-help">
+                        {{ $t('cronjob.logHelper3') }}
+                        <el-link class="link" icon="Position" @click="goRouter('/logs/website')" type="primary">
+                            {{ $t('firewall.quickJump') }}
+                        </el-link>
+                    </span>
+                </div>
+                <div v-if="dialogData.rowData!.type === 'ntp'">
+                    <span class="input-help">
+                        {{ $t('cronjob.ntp_helper') }}
+                        <el-link
+                            style="font-size: 12px"
+                            icon="Position"
+                            @click="goRouter('/toolbox/device')"
+                            type="primary"
                         >
-                            <el-option value="shell" :label="$t('cronjob.shell')" />
-                            <el-option value="app" :label="$t('cronjob.app')" />
-                            <el-option value="website" :label="$t('cronjob.website')" />
-                            <el-option value="database" :label="$t('cronjob.database')" />
-                            <el-option value="directory" :label="$t('cronjob.directory')" />
-                            <el-option value="log" :label="$t('cronjob.log')" />
-                            <el-option value="curl" :label="$t('cronjob.curl')" />
-                            <el-option value="cutWebsiteLog" :label="$t('cronjob.cutWebsiteLog')" />
-                            <el-option value="clean" :label="$t('setting.diskClean')" />
-                            <el-option value="snapshot" :label="$t('cronjob.snapshot')" />
-                            <el-option value="ntp" :label="$t('cronjob.ntp')" />
-                        </el-select>
-                        <div v-else style="width: 100%">
-                            <el-tag>{{ $t('cronjob.' + dialogData.rowData!.type) }}</el-tag>
-                        </div>
-                        <div v-if="dialogData.rowData!.type === 'log'" class="logText">
-                            <span class="input-help">
-                                {{ $t('cronjob.logHelper1') }}
-                                <el-link class="link" icon="Position" @click="goRouter('/logs/system')" type="primary">
-                                    {{ $t('firewall.quickJump') }}
-                                </el-link>
-                            </span>
-                            <span class="input-help">
-                                {{ $t('cronjob.logHelper2') }}
-                                <el-link class="link" icon="Position" @click="goRouter('/logs/ssh')" type="primary">
-                                    {{ $t('firewall.quickJump') }}
-                                </el-link>
-                            </span>
-                            <span class="input-help">
-                                {{ $t('cronjob.logHelper3') }}
-                                <el-link class="link" icon="Position" @click="goRouter('/logs/website')" type="primary">
-                                    {{ $t('firewall.quickJump') }}
-                                </el-link>
-                            </span>
-                        </div>
-                        <div v-if="dialogData.rowData!.type === 'ntp'">
-                            <span class="input-help">
-                                {{ $t('cronjob.ntp_helper') }}
-                                <el-link
-                                    style="font-size: 12px"
-                                    icon="Position"
-                                    @click="goRouter('/toolbox/device')"
-                                    type="primary"
-                                >
-                                    {{ $t('firewall.quickJump') }}
-                                </el-link>
-                            </span>
-                        </div>
-                    </el-form-item>
+                            {{ $t('firewall.quickJump') }}
+                        </el-link>
+                    </span>
+                </div>
+            </el-form-item>
 
-                    <el-form-item :label="$t('cronjob.taskName')" prop="name">
-                        <el-input
-                            :disabled="dialogData.title === 'edit'"
-                            clearable
-                            v-model.trim="dialogData.rowData!.name"
+            <el-form-item :label="$t('cronjob.taskName')" prop="name">
+                <el-input :disabled="dialogData.title === 'edit'" clearable v-model.trim="dialogData.rowData!.name" />
+            </el-form-item>
+
+            <el-form-item :label="$t('cronjob.cronSpec')" prop="spec">
+                <div v-for="(specObj, index) of dialogData.rowData.specObjs" :key="index" style="width: 100%">
+                    <el-select class="specTypeClass" v-model="specObj.specType" @change="changeSpecType(index)">
+                        <el-option
+                            v-for="item in specOptions"
+                            :key="item.label"
+                            :value="item.value"
+                            :label="item.label"
                         />
-                    </el-form-item>
-
-                    <el-form-item :label="$t('cronjob.cronSpec')" prop="spec">
-                        <div v-for="(specObj, index) of dialogData.rowData.specObjs" :key="index" style="width: 100%">
-                            <el-select class="specTypeClass" v-model="specObj.specType" @change="changeSpecType(index)">
-                                <el-option
-                                    v-for="item in specOptions"
-                                    :key="item.label"
-                                    :value="item.value"
-                                    :label="item.label"
-                                />
-                            </el-select>
-                            <el-select v-if="specObj.specType === 'perWeek'" class="specClass" v-model="specObj.week">
-                                <el-option
-                                    v-for="item in weekOptions"
-                                    :key="item.label"
-                                    :value="item.value"
-                                    :label="item.label"
-                                />
-                            </el-select>
-                            <el-input v-if="hasDay(specObj)" class="specClass" v-model.number="specObj.day">
-                                <template #append>
-                                    <div class="append">{{ $t('cronjob.day') }}</div>
-                                </template>
-                            </el-input>
-                            <el-input v-if="hasHour(specObj)" class="specClass" v-model.number="specObj.hour">
-                                <template #append>
-                                    <div class="append">{{ $t('commons.units.hour') }}</div>
-                                </template>
-                            </el-input>
-                            <el-input
-                                v-if="specObj.specType !== 'perNSecond'"
-                                class="specClass"
-                                v-model.number="specObj.minute"
-                            >
-                                <template #append>
-                                    <div class="append">{{ $t('commons.units.minute') }}</div>
-                                </template>
-                            </el-input>
-                            <el-input
-                                v-if="specObj.specType === 'perNSecond'"
-                                class="specClass"
-                                v-model.number="specObj.second"
-                            >
-                                <template #append>
-                                    <div class="append">{{ $t('commons.units.second') }}</div>
-                                </template>
-                            </el-input>
-                            <el-button
-                                link
-                                type="primary"
-                                style="float: right; margin-top: 5px"
-                                @click="handleSpecDelete(index)"
-                                v-if="dialogData.rowData.specObjs.length > 1"
-                            >
-                                {{ $t('commons.button.delete') }}
-                            </el-button>
-                            <el-divider v-if="dialogData.rowData.specObjs.length > 1" class="divider" />
-                        </div>
-                    </el-form-item>
-                    <el-button class="mb-3" @click="handleSpecAdd()">
-                        {{ $t('commons.button.add') }}
+                    </el-select>
+                    <el-select v-if="specObj.specType === 'perWeek'" class="specClass" v-model="specObj.week">
+                        <el-option
+                            v-for="item in weekOptions"
+                            :key="item.label"
+                            :value="item.value"
+                            :label="item.label"
+                        />
+                    </el-select>
+                    <el-input v-if="hasDay(specObj)" class="specClass" v-model.number="specObj.day">
+                        <template #append>
+                            <div class="append">{{ $t('cronjob.day') }}</div>
+                        </template>
+                    </el-input>
+                    <el-input v-if="hasHour(specObj)" class="specClass" v-model.number="specObj.hour">
+                        <template #append>
+                            <div class="append">{{ $t('commons.units.hour') }}</div>
+                        </template>
+                    </el-input>
+                    <el-input
+                        v-if="specObj.specType !== 'perNSecond'"
+                        class="specClass"
+                        v-model.number="specObj.minute"
+                    >
+                        <template #append>
+                            <div class="append">{{ $t('commons.units.minute') }}</div>
+                        </template>
+                    </el-input>
+                    <el-input
+                        v-if="specObj.specType === 'perNSecond'"
+                        class="specClass"
+                        v-model.number="specObj.second"
+                    >
+                        <template #append>
+                            <div class="append">{{ $t('commons.units.second') }}</div>
+                        </template>
+                    </el-input>
+                    <el-button
+                        class="ml-2.5"
+                        link
+                        type="primary"
+                        @click="handleSpecDelete(index)"
+                        v-if="dialogData.rowData.specObjs.length > 1"
+                    >
+                        {{ $t('commons.button.delete') }}
                     </el-button>
+                    <el-divider v-if="dialogData.rowData.specObjs.length > 1" class="divider" />
+                </div>
+            </el-form-item>
+            <el-button class="mb-3" @click="handleSpecAdd()">
+                {{ $t('commons.button.add') }}
+            </el-button>
 
-                    <el-form-item v-if="hasScript()">
-                        <el-checkbox v-model="dialogData.rowData!.inContainer">
-                            {{ $t('cronjob.containerCheckBox') }}
-                        </el-checkbox>
-                    </el-form-item>
-                    <el-form-item
-                        v-if="hasScript() && dialogData.rowData!.inContainer"
-                        :label="$t('cronjob.containerName')"
-                        prop="containerName"
-                    >
-                        <el-select class="selectClass" v-model="dialogData.rowData!.containerName">
-                            <el-option v-for="item in containerOptions" :key="item" :value="item" :label="item" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item
-                        v-if="hasScript() && dialogData.rowData!.inContainer"
-                        :label="$t('container.command')"
-                        prop="command"
-                        :rules="Rules.requiredInput"
-                    >
-                        <el-checkbox style="width: 100px" border v-model="dialogData.rowData!.isCustom">
-                            {{ $t('container.custom') }}
-                        </el-checkbox>
-                        <el-select
-                            style="width: calc(100% - 100px)"
-                            filterable
-                            clearable
-                            v-model="dialogData.rowData!.command"
-                        >
-                            <el-option value="ash" label="/bin/ash" />
-                            <el-option value="bash" label="/bin/bash" />
-                            <el-option value="sh" label="/bin/sh" />
-                        </el-select>
-                    </el-form-item>
+            <el-form-item v-if="hasScript()">
+                <el-checkbox v-model="dialogData.rowData!.inContainer">
+                    {{ $t('cronjob.containerCheckBox') }}
+                </el-checkbox>
+            </el-form-item>
+            <el-form-item
+                v-if="hasScript() && dialogData.rowData!.inContainer"
+                :label="$t('cronjob.containerName')"
+                prop="containerName"
+            >
+                <el-select class="selectClass" v-model="dialogData.rowData!.containerName">
+                    <el-option v-for="item in containerOptions" :key="item" :value="item" :label="item" />
+                </el-select>
+            </el-form-item>
+            <el-form-item
+                v-if="hasScript() && dialogData.rowData!.inContainer"
+                :label="$t('container.command')"
+                prop="command"
+                :rules="Rules.requiredInput"
+            >
+                <el-checkbox class="w-full" border v-model="dialogData.rowData!.isCustom">
+                    {{ $t('container.custom') }}
+                </el-checkbox>
+                <el-select style="width: calc(100% - 100px)" filterable clearable v-model="dialogData.rowData!.command">
+                    <el-option value="ash" label="/bin/ash" />
+                    <el-option value="bash" label="/bin/bash" />
+                    <el-option value="sh" label="/bin/sh" />
+                </el-select>
+            </el-form-item>
 
-                    <el-form-item v-if="hasScript()" :label="$t('cronjob.shellContent')" prop="script">
-                        <el-input clearable type="textarea" :rows="5" v-model="dialogData.rowData!.script" />
-                    </el-form-item>
+            <el-form-item v-if="hasScript()" :label="$t('cronjob.shellContent')" prop="script">
+                <el-input clearable type="textarea" :rows="5" v-model="dialogData.rowData!.script" />
+            </el-form-item>
 
-                    <el-form-item
-                        v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'cutWebsiteLog'"
-                        :label="dialogData.rowData!.type === 'website' ? $t('cronjob.website'):$t('website.website')"
-                        prop="website"
+            <el-form-item
+                v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'cutWebsiteLog'"
+                :label="dialogData.rowData!.type === 'website' ? $t('cronjob.website'):$t('website.website')"
+                prop="website"
+            >
+                <el-select class="selectClass" v-model="dialogData.rowData!.website">
+                    <el-option :disabled="websiteOptions.length === 0" :label="$t('commons.table.all')" value="all" />
+                    <el-option
+                        v-for="(item, index) in websiteOptions"
+                        :key="index"
+                        :value="item.id + ''"
+                        :label="item.primaryDomain"
                     >
-                        <el-select class="selectClass" v-model="dialogData.rowData!.website">
-                            <el-option
-                                :disabled="websiteOptions.length === 0"
-                                :label="$t('commons.table.all')"
-                                value="all"
-                            />
-                            <el-option
-                                v-for="(item, index) in websiteOptions"
-                                :key="index"
-                                :value="item.id + ''"
-                                :label="item.primaryDomain"
-                            >
-                                <span>{{ item.primaryDomain }}</span>
+                        <span>{{ item.primaryDomain }}</span>
+                        <el-tag class="tagClass">
+                            {{ item.alias }}
+                        </el-tag>
+                    </el-option>
+                </el-select>
+                <span class="input-help" v-if="dialogData.rowData!.type === 'cutWebsiteLog'">
+                    {{ $t('cronjob.cutWebsiteLogHelper') }}
+                </span>
+            </el-form-item>
+
+            <div v-if="dialogData.rowData!.type === 'app'">
+                <el-form-item :label="$t('cronjob.app')" prop="appID">
+                    <el-select class="selectClass" clearable v-model="dialogData.rowData!.appID">
+                        <el-option :disabled="appOptions.length === 0" :label="$t('commons.table.all')" value="all" />
+                        <div v-for="item in appOptions" :key="item.id">
+                            <el-option :value="item.id + ''" :label="item.name">
+                                <span>{{ item.name }}</span>
                                 <el-tag class="tagClass">
-                                    {{ item.alias }}
+                                    {{ item.key }}
                                 </el-tag>
                             </el-option>
-                        </el-select>
-                        <span class="input-help" v-if="dialogData.rowData!.type === 'cutWebsiteLog'">
-                            {{ $t('cronjob.cutWebsiteLogHelper') }}
-                        </span>
-                    </el-form-item>
+                        </div>
+                    </el-select>
+                </el-form-item>
+            </div>
 
-                    <div v-if="dialogData.rowData!.type === 'app'">
-                        <el-form-item :label="$t('cronjob.app')" prop="appID">
-                            <el-select class="selectClass" clearable v-model="dialogData.rowData!.appID">
-                                <el-option
-                                    :disabled="appOptions.length === 0"
-                                    :label="$t('commons.table.all')"
-                                    value="all"
-                                />
-                                <div v-for="item in appOptions" :key="item.id">
-                                    <el-option :value="item.id + ''" :label="item.name">
-                                        <span>{{ item.name }}</span>
-                                        <el-tag class="tagClass">
-                                            {{ item.key }}
-                                        </el-tag>
-                                    </el-option>
-                                </div>
-                            </el-select>
-                        </el-form-item>
-                    </div>
+            <div v-if="dialogData.rowData!.type === 'database'">
+                <el-form-item :label="$t('cronjob.database')">
+                    <el-radio-group v-model="dialogData.rowData!.dbType" @change="loadDatabases">
+                        <el-radio value="mysql">MySQL</el-radio>
+                        <el-radio value="mariadb">Mariadb</el-radio>
+                        <el-radio value="postgresql">PostgreSQL</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item :label="$t('cronjob.database')" prop="dbName">
+                    <el-select class="selectClass" clearable v-model="dialogData.rowData!.dbName">
+                        <el-option :disabled="dbInfo.dbs.length === 0" :label="$t('commons.table.all')" value="all" />
+                        <el-option v-for="item in dbInfo.dbs" :key="item.id" :value="item.id + ''" :label="item.name">
+                            <span>{{ item.name }}</span>
+                            <el-tag class="tagClass">
+                                {{ item.from === 'local' ? $t('database.local') : $t('database.remote') }}
+                            </el-tag>
+                            <el-tag class="tagClass">
+                                {{ item.database }}
+                            </el-tag>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+            </div>
 
-                    <div v-if="dialogData.rowData!.type === 'database'">
-                        <el-form-item :label="$t('cronjob.database')">
-                            <el-radio-group v-model="dialogData.rowData!.dbType" @change="loadDatabases">
-                                <el-radio value="mysql">MySQL</el-radio>
-                                <el-radio value="mariadb">Mariadb</el-radio>
-                                <el-radio value="postgresql">PostgreSQL</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item :label="$t('cronjob.database')" prop="dbName">
-                            <el-select class="selectClass" clearable v-model="dialogData.rowData!.dbName">
-                                <el-option
-                                    :disabled="dbInfo.dbs.length === 0"
-                                    :label="$t('commons.table.all')"
-                                    value="all"
-                                />
-                                <el-option
-                                    v-for="item in dbInfo.dbs"
-                                    :key="item.id"
-                                    :value="item.id + ''"
-                                    :label="item.name"
-                                >
-                                    <span>{{ item.name }}</span>
-                                    <el-tag class="tagClass">
-                                        {{ item.from === 'local' ? $t('database.local') : $t('database.remote') }}
-                                    </el-tag>
-                                    <el-tag class="tagClass">
-                                        {{ item.database }}
-                                    </el-tag>
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                    </div>
+            <el-form-item
+                v-if="dialogData.rowData!.type === 'directory'"
+                :label="$t('cronjob.sourceDir')"
+                prop="sourceDir"
+            >
+                <el-input v-model="dialogData.rowData!.sourceDir">
+                    <template #prepend>
+                        <FileList @choose="loadDir" :dir="true"></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
 
-                    <el-form-item
-                        v-if="dialogData.rowData!.type === 'directory'"
-                        :label="$t('cronjob.sourceDir')"
-                        prop="sourceDir"
+            <div v-if="isBackup()">
+                <el-form-item :label="$t('setting.backupAccount')" prop="backupAccountList">
+                    <el-select
+                        multiple
+                        class="selectClass"
+                        v-model="dialogData.rowData!.backupAccountList"
+                        @change="changeAccount"
                     >
-                        <el-input v-model="dialogData.rowData!.sourceDir">
-                            <template #prepend>
-                                <FileList @choose="loadDir" :dir="true"></FileList>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-
-                    <div v-if="isBackup()">
-                        <el-form-item :label="$t('setting.backupAccount')" prop="backupAccountList">
-                            <el-select
-                                multiple
-                                class="selectClass"
-                                v-model="dialogData.rowData!.backupAccountList"
-                                @change="changeAccount"
-                            >
-                                <div v-for="item in backupOptions" :key="item.label">
-                                    <el-option :value="item.value" :label="item.label" />
-                                </div>
-                            </el-select>
-                            <span class="input-help">
-                                {{ $t('cronjob.targetHelper') }}
-                                <el-link
-                                    style="font-size: 12px"
-                                    icon="Position"
-                                    @click="goRouter('/settings/backupaccount')"
-                                    type="primary"
-                                >
-                                    {{ $t('firewall.quickJump') }}
-                                </el-link>
-                            </span>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.compressPassword')"
-                            prop="secret"
-                            v-if="isBackup() && dialogData.rowData!.type !== 'database'"
+                        <div v-for="item in backupOptions" :key="item.label">
+                            <el-option :value="item.value" :label="item.label" />
+                        </div>
+                    </el-select>
+                    <span class="input-help">
+                        {{ $t('cronjob.targetHelper') }}
+                        <el-link
+                            style="font-size: 12px"
+                            icon="Position"
+                            @click="goRouter('/settings/backupaccount')"
+                            type="primary"
                         >
-                            <el-input v-model="dialogData.rowData!.secret" />
-                        </el-form-item>
-                        <el-form-item :label="$t('cronjob.default_download_path')" prop="defaultDownload">
-                            <el-select class="selectClass" v-model="dialogData.rowData!.defaultDownload">
-                                <div v-for="item in accountOptions" :key="item.label">
-                                    <el-option :value="item.value" :label="item.label" />
-                                </div>
-                            </el-select>
-                        </el-form-item>
-                    </div>
+                            {{ $t('firewall.quickJump') }}
+                        </el-link>
+                    </span>
+                </el-form-item>
+                <el-form-item
+                    :label="$t('setting.compressPassword')"
+                    prop="secret"
+                    v-if="isBackup() && dialogData.rowData!.type !== 'database'"
+                >
+                    <el-input v-model="dialogData.rowData!.secret" />
+                </el-form-item>
+                <el-form-item :label="$t('cronjob.default_download_path')" prop="defaultDownload">
+                    <el-select class="selectClass" v-model="dialogData.rowData!.defaultDownload">
+                        <div v-for="item in accountOptions" :key="item.label">
+                            <el-option :value="item.value" :label="item.label" />
+                        </div>
+                    </el-select>
+                </el-form-item>
+            </div>
 
-                    <el-form-item :label="$t('cronjob.retainCopies')" prop="retainCopies">
-                        <el-input-number
-                            style="width: 200px"
-                            :min="1"
-                            step-strictly
-                            :step="1"
-                            v-model.number="dialogData.rowData!.retainCopies"
-                        ></el-input-number>
-                        <span v-if="isBackup()" class="input-help">{{ $t('cronjob.retainCopiesHelper1') }}</span>
-                        <span v-else class="input-help">{{ $t('cronjob.retainCopiesHelper') }}</span>
-                    </el-form-item>
+            <el-form-item :label="$t('cronjob.retainCopies')" prop="retainCopies">
+                <el-input-number
+                    style="width: 200px"
+                    :min="1"
+                    step-strictly
+                    :step="1"
+                    v-model.number="dialogData.rowData!.retainCopies"
+                ></el-input-number>
+                <span v-if="isBackup()" class="input-help">{{ $t('cronjob.retainCopiesHelper1') }}</span>
+                <span v-else class="input-help">{{ $t('cronjob.retainCopiesHelper') }}</span>
+            </el-form-item>
 
-                    <el-form-item v-if="dialogData.rowData!.type === 'curl'" :label="$t('cronjob.url')" prop="url">
-                        <el-input clearable v-model.trim="dialogData.rowData!.url" />
-                    </el-form-item>
+            <el-form-item v-if="dialogData.rowData!.type === 'curl'" :label="$t('cronjob.url')" prop="url">
+                <el-input clearable v-model.trim="dialogData.rowData!.url" />
+            </el-form-item>
 
-                    <el-form-item
-                        v-if="hasExclusionRules()"
-                        :label="$t('cronjob.exclusionRules')"
-                        prop="exclusionRules"
-                    >
-                        <el-input
-                            type="textarea"
-                            :placeholder="$t('cronjob.rulesHelper')"
-                            :rows="3"
-                            clearable
-                            v-model="dialogData.rowData!.exclusionRules"
-                        />
-                        <span class="input-help">{{ $t('cronjob.exclusionRulesHelper') }}</span>
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item v-if="hasExclusionRules()" :label="$t('cronjob.exclusionRules')" prop="exclusionRules">
+                <el-input
+                    type="textarea"
+                    :placeholder="$t('cronjob.rulesHelper')"
+                    :rows="3"
+                    clearable
+                    v-model="dialogData.rowData!.exclusionRules"
+                />
+                <span class="input-help">{{ $t('cronjob.exclusionRulesHelper') }}</span>
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -357,7 +315,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -371,7 +329,6 @@ import { Cronjob } from '@/api/interface/cronjob';
 import { addCronjob, editCronjob } from '@/api/modules/cronjob';
 import { listDbItems } from '@/api/modules/database';
 import { GetWebsiteOptions } from '@/api/modules/website';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { useRouter } from 'vue-router';
 import { listContainer } from '@/api/modules/container';
diff --git a/frontend/src/views/cronjob/record/index.vue b/frontend/src/views/cronjob/record/index.vue
index 587cf6f3f..811c43ad1 100644
--- a/frontend/src/views/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/record/index.vue
@@ -58,30 +58,24 @@
         </div>
 
         <LayoutContent :title="$t('cronjob.record')" :reload="true">
-            <template #search>
-                <el-row :gutter="20">
-                    <el-col :span="8">
-                        <el-date-picker
-                            style="width: calc(100% - 20px)"
-                            @change="search()"
-                            v-model="timeRangeLoad"
-                            type="datetimerange"
-                            :range-separator="$t('commons.search.timeRange')"
-                            :start-placeholder="$t('commons.search.timeStart')"
-                            :end-placeholder="$t('commons.search.timeEnd')"
-                            :shortcuts="shortcuts"
-                        ></el-date-picker>
-                    </el-col>
-                    <el-col :span="16">
-                        <el-select @change="search()" v-model="searchInfo.status" class="p-w-200">
-                            <template #prefix>{{ $t('commons.table.status') }}</template>
-                            <el-option :label="$t('commons.table.all')" value="" />
-                            <el-option :label="$t('commons.status.success')" value="Success" />
-                            <el-option :label="$t('commons.status.waiting')" value="Waiting" />
-                            <el-option :label="$t('commons.status.failed')" value="Failed" />
-                        </el-select>
-                    </el-col>
-                </el-row>
+            <template #rightToolBar>
+                <el-date-picker
+                    class="mr-2.5"
+                    @change="search()"
+                    v-model="timeRangeLoad"
+                    type="datetimerange"
+                    :range-separator="$t('commons.search.timeRange')"
+                    :start-placeholder="$t('commons.search.timeStart')"
+                    :end-placeholder="$t('commons.search.timeEnd')"
+                    :shortcuts="shortcuts"
+                ></el-date-picker>
+                <el-select @change="search()" v-model="searchInfo.status" class="p-w-200">
+                    <template #prefix>{{ $t('commons.table.status') }}</template>
+                    <el-option :label="$t('commons.table.all')" value="" />
+                    <el-option :label="$t('commons.status.success')" value="Success" />
+                    <el-option :label="$t('commons.status.waiting')" value="Waiting" />
+                    <el-option :label="$t('commons.status.failed')" value="Failed" />
+                </el-select>
             </template>
             <template #main>
                 <div class="mainClass">
diff --git a/frontend/src/views/database/mysql/bind/index.vue b/frontend/src/views/database/mysql/bind/index.vue
index 9129a63c5..3dddd4b51 100644
--- a/frontend/src/views/database/mysql/bind/index.vue
+++ b/frontend/src/views/database/mysql/bind/index.vue
@@ -1,41 +1,30 @@
 <template>
     <div>
-        <el-drawer
+        <DrawerPro
             v-model="bindVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            width="30%"
+            :header="$t('database.userBind')"
+            :resource="form.mysqlName"
+            :back="handleClose"
+            size="small"
         >
-            <template #header>
-                <DrawerHeader :header="$t('database.userBind')" :resource="form.mysqlName" :back="handleClose" />
-            </template>
             <el-form v-loading="loading" ref="changeFormRef" :model="form" :rules="rules" label-position="top">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.login.username')" prop="username">
-                            <el-input v-model="form.username"></el-input>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.password')" prop="password">
-                            <el-input type="password" clearable show-password v-model="form.password"></el-input>
-                        </el-form-item>
-                        <el-form-item :label="$t('database.permission')" prop="permission">
-                            <el-select v-model="form.permission">
-                                <el-option value="%" :label="$t('database.permissionAll')" />
-                                <el-option
-                                    v-if="form.from !== 'local'"
-                                    value="localhost"
-                                    :label="$t('terminal.localhost')"
-                                />
-                                <el-option value="ip" :label="$t('database.permissionForIP')" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
-                            <el-input clearable :rows="3" type="textarea" v-model="form.permissionIPs" />
-                            <span class="input-help">{{ $t('database.remoteHelper') }}</span>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+                <el-form-item :label="$t('commons.login.username')" prop="username">
+                    <el-input v-model="form.username"></el-input>
+                </el-form-item>
+                <el-form-item :label="$t('commons.login.password')" prop="password">
+                    <el-input type="password" clearable show-password v-model="form.password"></el-input>
+                </el-form-item>
+                <el-form-item :label="$t('database.permission')" prop="permission">
+                    <el-select v-model="form.permission">
+                        <el-option value="%" :label="$t('database.permissionAll')" />
+                        <el-option v-if="form.from !== 'local'" value="localhost" :label="$t('terminal.localhost')" />
+                        <el-option value="ip" :label="$t('database.permissionForIP')" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
+                    <el-input clearable :rows="3" type="textarea" v-model="form.permissionIPs" />
+                    <span class="input-help">{{ $t('database.remoteHelper') }}</span>
+                </el-form-item>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
@@ -47,8 +36,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-drawer>
-
+        </DrawerPro>
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
     </div>
 </template>
@@ -57,7 +45,6 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { bindUser } from '@/api/modules/database';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Rules } from '@/global/form-rules';
 import { MsgSuccess } from '@/utils/message';
 import { checkIp } from '@/utils/util';
diff --git a/frontend/src/views/database/mysql/conn/index.vue b/frontend/src/views/database/mysql/conn/index.vue
index 218cabe76..63af27a71 100644
--- a/frontend/src/views/database/mysql/conn/index.vue
+++ b/frontend/src/views/database/mysql/conn/index.vue
@@ -1,113 +1,89 @@
 <template>
-    <el-drawer
-        v-model="dialogVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="30%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="dialogVisible" :header="$t('database.databaseConnInfo')" :back="handleClose" size="small">
         <el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
-                        <el-card class="mini-border-card">
-                            <el-descriptions :column="1">
-                                <el-descriptions-item :label="$t('database.connAddress')">
-                                    <el-tooltip
-                                        v-if="loadMysqlInfo(true).length > 48"
-                                        :content="loadMysqlInfo(true)"
-                                        placement="top"
-                                    >
-                                        {{ loadMysqlInfo(true).substring(0, 48) }}...
-                                    </el-tooltip>
-                                    <span else>
-                                        {{ loadMysqlInfo(true) }}
-                                    </span>
-                                    <CopyButton :content="loadMysqlInfo(true)" type="icon" />
-                                </el-descriptions-item>
-                                <el-descriptions-item :label="$t('database.connPort')">
-                                    3306
-                                    <CopyButton content="3306" type="icon" />
-                                </el-descriptions-item>
-                            </el-descriptions>
-                        </el-card>
-                        <span class="input-help">
-                            {{ $t('database.containerConnHelper') }}
-                        </span>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.remoteConn')">
-                        <el-card class="mini-border-card">
-                            <el-descriptions :column="1">
-                                <el-descriptions-item :label="$t('database.connAddress')">
-                                    <el-tooltip
-                                        v-if="loadMysqlInfo(false).length > 48"
-                                        :content="loadMysqlInfo(false)"
-                                        placement="top"
-                                    >
-                                        {{ loadMysqlInfo(false).substring(0, 48) }}...
-                                    </el-tooltip>
-                                    <span else>
-                                        {{ loadMysqlInfo(false) }}
-                                    </span>
-                                    <CopyButton :content="loadMysqlInfo(false)" type="icon" />
-                                </el-descriptions-item>
-                                <el-descriptions-item :label="$t('database.connPort')">
-                                    {{ form.port }}
-                                    <CopyButton :content="form.port + ''" type="icon" />
-                                </el-descriptions-item>
-                            </el-descriptions>
-                        </el-card>
-                        <span v-if="form.from === 'local'" class="input-help">
-                            {{ $t('database.remoteConnHelper2') }}
-                        </span>
-                    </el-form-item>
-                    <el-divider border-style="dashed" />
+            <el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
+                <el-card class="mini-border-card">
+                    <el-descriptions :column="1">
+                        <el-descriptions-item :label="$t('database.connAddress')">
+                            <el-tooltip
+                                v-if="loadMysqlInfo(true).length > 48"
+                                :content="loadMysqlInfo(true)"
+                                placement="top"
+                            >
+                                {{ loadMysqlInfo(true).substring(0, 48) }}...
+                            </el-tooltip>
+                            <span else>
+                                {{ loadMysqlInfo(true) }}
+                            </span>
+                            <CopyButton :content="loadMysqlInfo(true)" type="icon" />
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('database.connPort')">
+                            3306
+                            <CopyButton content="3306" type="icon" />
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </el-card>
+                <span class="input-help">
+                    {{ $t('database.containerConnHelper') }}
+                </span>
+            </el-form-item>
+            <el-form-item :label="$t('database.remoteConn')">
+                <el-card class="mini-border-card">
+                    <el-descriptions :column="1">
+                        <el-descriptions-item :label="$t('database.connAddress')">
+                            <el-tooltip
+                                v-if="loadMysqlInfo(false).length > 48"
+                                :content="loadMysqlInfo(false)"
+                                placement="top"
+                            >
+                                {{ loadMysqlInfo(false).substring(0, 48) }}...
+                            </el-tooltip>
+                            <span else>
+                                {{ loadMysqlInfo(false) }}
+                            </span>
+                            <CopyButton :content="loadMysqlInfo(false)" type="icon" />
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('database.connPort')">
+                            {{ form.port }}
+                            <CopyButton :content="form.port + ''" type="icon" />
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </el-card>
+                <span v-if="form.from === 'local'" class="input-help">
+                    {{ $t('database.remoteConnHelper2') }}
+                </span>
+            </el-form-item>
+            <el-divider border-style="dashed" />
 
-                    <div v-if="form.from === 'local'">
-                        <el-form-item :label="$t('database.remoteAccess')" prop="privilege">
-                            <el-switch
-                                v-model="form.privilege"
-                                :disabled="form.status !== 'Running'"
-                                @change="onSaveAccess"
-                            />
-                            <span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('database.rootPassword')"
-                            :rules="Rules.paramComplexity"
-                            prop="password"
-                        >
-                            <el-input type="password" show-password clearable v-model="form.password">
-                                <template #append>
-                                    <CopyButton :content="form.password" />
-                                    <el-button @click="random" class="p-ml-5">
-                                        {{ $t('commons.button.random') }}
-                                    </el-button>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                    </div>
-
-                    <div v-if="form.from !== 'local'">
-                        <el-form-item :label="$t('commons.login.username')">
-                            <el-tag>{{ form.username }}</el-tag>
-                            <CopyButton :content="form.username" type="icon" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.password')">
-                            <el-tag>{{ form.password }}</el-tag>
-                            <CopyButton :content="form.password" type="icon" />
-                        </el-form-item>
-                    </div>
-                </el-col>
-            </el-row>
+            <div v-if="form.from === 'local'">
+                <el-form-item :label="$t('database.remoteAccess')" prop="privilege">
+                    <el-switch v-model="form.privilege" :disabled="form.status !== 'Running'" @change="onSaveAccess" />
+                    <span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
+                </el-form-item>
+                <el-form-item :label="$t('database.rootPassword')" :rules="Rules.paramComplexity" prop="password">
+                    <el-input type="password" show-password clearable v-model="form.password">
+                        <template #append>
+                            <CopyButton :content="form.password" />
+                            <el-button @click="random" class="p-ml-5">
+                                {{ $t('commons.button.random') }}
+                            </el-button>
+                        </template>
+                    </el-input>
+                </el-form-item>
+            </div>
+            <div v-if="form.from !== 'local'">
+                <el-form-item :label="$t('commons.login.username')">
+                    <el-tag>{{ form.username }}</el-tag>
+                    <CopyButton :content="form.username" type="icon" />
+                </el-form-item>
+                <el-form-item :label="$t('commons.login.password')">
+                    <el-tag>{{ form.password }}</el-tag>
+                    <CopyButton :content="form.password" type="icon" />
+                </el-form-item>
+            </div>
         </el-form>
-
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit" @cancel="loadPassword"></ConfirmDialog>
         <ConfirmDialog ref="confirmAccessDialogRef" @confirm="onSubmitAccess" @cancel="loadAccess"></ConfirmDialog>
-
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="loading" @click="dialogVisible = false">
@@ -118,7 +94,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -129,7 +105,6 @@ import { ElForm } from 'element-plus';
 import { getDatabase, loadRemoteAccess, updateMysqlAccess, updateMysqlPassword } from '@/api/modules/database';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { GetAppConnInfo } from '@/api/modules/app';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { getRandomStr } from '@/utils/util';
 import { getSettingInfo } from '@/api/modules/setting';
diff --git a/frontend/src/views/database/mysql/create/index.vue b/frontend/src/views/database/mysql/create/index.vue
index d9f7506a3..226e2c32b 100644
--- a/frontend/src/views/database/mysql/create/index.vue
+++ b/frontend/src/views/database/mysql/create/index.vue
@@ -1,69 +1,46 @@
 <template>
-    <el-drawer
-        v-model="createVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="30%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('database.create')" :back="handleClose" />
-        </template>
-        <div v-loading="loading">
-            <el-form ref="formRef" label-position="top" :model="form" :rules="rules">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.name')" prop="name">
-                            <el-input clearable v-model.trim="form.name" @input="form.username = form.name">
-                                <template #append>
-                                    <el-select v-model="form.format" style="width: 120px">
-                                        <el-option label="utf8mb4" value="utf8mb4" />
-                                        <el-option label="utf-8" value="utf8" />
-                                        <el-option label="gbk" value="gbk" />
-                                        <el-option label="big5" value="big5" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.username')" prop="username">
-                            <el-input clearable v-model.trim="form.username" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.password')" prop="password">
-                            <el-input type="password" clearable show-password v-model.trim="form.password">
-                                <template #append>
-                                    <el-button @click="random">{{ $t('commons.button.random') }}</el-button>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-
-                        <el-form-item :label="$t('database.permission')" prop="permission">
-                            <el-select v-model="form.permission">
-                                <el-option value="%" :label="$t('database.permissionAll')" />
-                                <el-option
-                                    v-if="form.from !== 'local'"
-                                    value="localhost"
-                                    :label="$t('terminal.localhost')"
-                                />
-                                <el-option value="ip" :label="$t('database.permissionForIP')" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
-                            <el-input clearable :rows="3" type="textarea" v-model="form.permissionIPs" />
-                            <span class="input-help">{{ $t('database.remoteHelper') }}</span>
-                        </el-form-item>
-
-                        <el-form-item :label="$t('commons.table.type')" prop="database">
-                            <el-tag>{{ form.database + ' [' + form.type + ']' }}</el-tag>
-                        </el-form-item>
-
-                        <el-form-item :label="$t('commons.table.description')" prop="description">
-                            <el-input type="textarea" clearable v-model="form.description" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </div>
-
+    <DrawerPro v-model="createVisible" :header="$t('database.create')" :back="handleClose" size="normal">
+        <el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input clearable v-model.trim="form.name" @input="form.username = form.name">
+                    <template #append>
+                        <el-select v-model="form.format" class="p-w-100">
+                            <el-option label="utf8mb4" value="utf8mb4" />
+                            <el-option label="utf-8" value="utf8" />
+                            <el-option label="gbk" value="gbk" />
+                            <el-option label="big5" value="big5" />
+                        </el-select>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.username')" prop="username">
+                <el-input clearable v-model.trim="form.username" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.password')" prop="password">
+                <el-input type="password" clearable show-password v-model.trim="form.password">
+                    <template #append>
+                        <el-button @click="random">{{ $t('commons.button.random') }}</el-button>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('database.permission')" prop="permission">
+                <el-select v-model="form.permission">
+                    <el-option value="%" :label="$t('database.permissionAll')" />
+                    <el-option v-if="form.from !== 'local'" value="localhost" :label="$t('terminal.localhost')" />
+                    <el-option value="ip" :label="$t('database.permissionForIP')" />
+                </el-select>
+            </el-form-item>
+            <el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
+                <el-input clearable :rows="3" type="textarea" v-model="form.permissionIPs" />
+                <span class="input-help">{{ $t('database.remoteHelper') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.type')" prop="database">
+                <el-tag>{{ form.database + ' [' + form.type + ']' }}</el-tag>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input type="textarea" clearable v-model="form.description" />
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="loading" @click="createVisible = false">
@@ -74,7 +51,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -83,7 +60,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { addMysqlDB } from '@/api/modules/database';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { checkIp, getRandomStr } from '@/utils/util';
 
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index f1aea8507..2611ceb44 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -257,10 +257,8 @@
         <UploadDialog ref="uploadRef" />
         <OperateDialog @search="search" ref="dialogRef" />
         <Backups ref="dialogBackupRef" />
-
         <AppResources ref="checkRef"></AppResources>
         <DeleteDialog ref="deleteRef" @search="search" />
-
         <PortJumpDialog ref="dialogPortJumpRef" />
     </div>
 </template>
diff --git a/frontend/src/views/database/mysql/password/index.vue b/frontend/src/views/database/mysql/password/index.vue
index f044da9d3..832302043 100644
--- a/frontend/src/views/database/mysql/password/index.vue
+++ b/frontend/src/views/database/mysql/password/index.vue
@@ -1,50 +1,38 @@
 <template>
     <div>
-        <el-drawer
+        <DrawerPro
             v-model="changeVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            width="30%"
+            :header="title"
+            :resource="changeForm.mysqlName"
+            :back="handleClose"
+            size="small"
         >
-            <template #header>
-                <DrawerHeader :header="title" :resource="changeForm.mysqlName" :back="handleClose" />
-            </template>
             <el-form v-loading="loading" ref="changeFormRef" :model="changeForm" :rules="rules" label-position="top">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <div v-if="changeForm.operation === 'password'">
-                            <el-form-item :label="$t('commons.login.username')" prop="userName">
-                                <el-input disabled v-model="changeForm.userName"></el-input>
-                            </el-form-item>
-                            <el-form-item :label="$t('commons.login.password')" prop="password">
-                                <el-input
-                                    type="password"
-                                    clearable
-                                    show-password
-                                    v-model="changeForm.password"
-                                ></el-input>
-                            </el-form-item>
-                        </div>
-                        <div v-if="changeForm.operation === 'privilege'">
-                            <el-form-item :label="$t('database.permission')" prop="privilege">
-                                <el-select style="width: 100%" v-model="changeForm.privilege">
-                                    <el-option value="%" :label="$t('database.permissionAll')" />
-                                    <el-option
-                                        v-if="changeForm.from !== 'local'"
-                                        value="localhost"
-                                        :label="$t('terminal.localhost')"
-                                    />
-                                    <el-option value="ip" :label="$t('database.permissionForIP')" />
-                                </el-select>
-                            </el-form-item>
-                            <el-form-item v-if="changeForm.privilege === 'ip'" prop="privilegeIPs">
-                                <el-input clearable :rows="3" type="textarea" v-model="changeForm.privilegeIPs" />
-                                <span class="input-help">{{ $t('database.remoteHelper') }}</span>
-                            </el-form-item>
-                        </div>
-                    </el-col>
-                </el-row>
+                <div v-if="changeForm.operation === 'password'">
+                    <el-form-item :label="$t('commons.login.username')" prop="userName">
+                        <el-input disabled v-model="changeForm.userName"></el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('commons.login.password')" prop="password">
+                        <el-input type="password" clearable show-password v-model="changeForm.password"></el-input>
+                    </el-form-item>
+                </div>
+                <div v-if="changeForm.operation === 'privilege'">
+                    <el-form-item :label="$t('database.permission')" prop="privilege">
+                        <el-select style="width: 100%" v-model="changeForm.privilege">
+                            <el-option value="%" :label="$t('database.permissionAll')" />
+                            <el-option
+                                v-if="changeForm.from !== 'local'"
+                                value="localhost"
+                                :label="$t('terminal.localhost')"
+                            />
+                            <el-option value="ip" :label="$t('database.permissionForIP')" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item v-if="changeForm.privilege === 'ip'" prop="privilegeIPs">
+                        <el-input clearable :rows="3" type="textarea" v-model="changeForm.privilegeIPs" />
+                        <span class="input-help">{{ $t('database.remoteHelper') }}</span>
+                    </el-form-item>
+                </div>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
@@ -56,7 +44,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-drawer>
+        </DrawerPro>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
     </div>
@@ -66,7 +54,6 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { deleteCheckMysqlDB, updateMysqlAccess, updateMysqlPassword } from '@/api/modules/database';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Rules } from '@/global/form-rules';
 import { MsgSuccess } from '@/utils/message';
 import { checkIp } from '@/utils/util';
diff --git a/frontend/src/views/database/mysql/remote/index.vue b/frontend/src/views/database/mysql/remote/index.vue
index db437f609..2415a3e43 100644
--- a/frontend/src/views/database/mysql/remote/index.vue
+++ b/frontend/src/views/database/mysql/remote/index.vue
@@ -1,20 +1,13 @@
 <template>
     <div v-loading="loading">
-        <LayoutContent>
-            <template #title>
-                <back-button name="MySQL" :header="$t('database.remoteDB')" />
+        <LayoutContent backName="MySQL" :title="$t('database.remoteDB')">
+            <template #leftToolBar>
+                <el-button type="primary" @click="onOpenDialog('create')">
+                    {{ $t('database.createRemoteDB') }}
+                </el-button>
             </template>
-            <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('database.createRemoteDB') }}
-                        </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
-                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+            <template #rightToolBar>
+                <TableSearch @search="search()" v-model:searchName="searchName" />
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
diff --git a/frontend/src/views/database/mysql/remote/operate/index.vue b/frontend/src/views/database/mysql/remote/operate/index.vue
index ec794666a..18abab445 100644
--- a/frontend/src/views/database/mysql/remote/operate/index.vue
+++ b/frontend/src/views/database/mysql/remote/operate/index.vue
@@ -1,120 +1,95 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="title"
+        :back="handleClose"
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader
-                :hideResource="dialogData.title === 'create'"
-                :header="title"
-                :resource="dialogData.rowData?.name"
-                :back="handleClose"
-            />
-        </template>
         <el-form ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData" :rules="rules">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input
-                            v-if="dialogData.title === 'create'"
-                            clearable
-                            v-model.trim="dialogData.rowData!.name"
-                        />
-                        <el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.type')" prop="type">
-                        <el-radio-group v-model="dialogData.rowData!.type" @change="changeType">
-                            <el-radio-button value="mysql">MySQL</el-radio-button>
-                            <el-radio-button value="mariadb">MariaDB</el-radio-button>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.version')" prop="version">
-                        <el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
-                            <div v-if="dialogData.rowData!.type === 'mysql'">
-                                <el-radio label="8.x" value="8.x" />
-                                <el-radio label="5.7" value="5.7" />
-                                <el-radio label="5.6" value="5.6" />
-                            </div>
-                            <div v-else>
-                                <el-radio label="10.x" value="10.x" />
-                                <el-radio label="11.x" value="11.x" />
-                            </div>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.address')" prop="address">
-                        <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.port')" prop="port">
-                        <el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.username')" prop="username">
-                        <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.username" />
-                        <span class="input-help">{{ $t('database.userHelper') }}</span>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.password')" prop="password">
-                        <el-input
-                            @change="isOK = false"
-                            type="password"
-                            clearable
-                            show-password
-                            v-model.trim="dialogData.rowData!.password"
-                        />
-                    </el-form-item>
-                    <el-form-item>
-                        <el-checkbox
-                            @change="isOK = false"
-                            v-model="dialogData.rowData!.ssl"
-                            :label="$t('database.ssl')"
-                        />
-                    </el-form-item>
-                    <div v-if="dialogData.rowData!.ssl">
-                        <el-form-item>
-                            <el-checkbox
-                                @change="isOK = false"
-                                v-model="dialogData.rowData!.hasCA"
-                                :label="$t('database.hasCA')"
-                            />
-                        </el-form-item>
-                        <el-form-item>
-                            <el-checkbox
-                                @change="isOK = false"
-                                v-model="dialogData.rowData!.skipVerify"
-                                :label="$t('database.skipVerify')"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('database.clientKey')" prop="clientKey">
-                            <el-input
-                                type="textarea"
-                                @change="isOK = false"
-                                clearable
-                                v-model="dialogData.rowData!.clientKey"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('database.clientCert')" prop="clientCert">
-                            <el-input
-                                type="textarea"
-                                @change="isOK = false"
-                                clearable
-                                v-model="dialogData.rowData!.clientCert"
-                            />
-                        </el-form-item>
-                        <el-form-item v-if="dialogData.rowData!.hasCA" :label="$t('database.caCert')" prop="rootCert">
-                            <el-input
-                                type="textarea"
-                                @change="isOK = false"
-                                clearable
-                                v-model="dialogData.rowData!.rootCert"
-                            />
-                        </el-form-item>
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-if="dialogData.title === 'create'" clearable v-model.trim="dialogData.rowData!.name" />
+                <el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.type')" prop="type">
+                <el-radio-group v-model="dialogData.rowData!.type" @change="changeType">
+                    <el-radio-button value="mysql">MySQL</el-radio-button>
+                    <el-radio-button value="mariadb">MariaDB</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('database.version')" prop="version">
+                <el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
+                    <div v-if="dialogData.rowData!.type === 'mysql'">
+                        <el-radio label="8.x" value="8.x" />
+                        <el-radio label="5.7" value="5.7" />
+                        <el-radio label="5.6" value="5.6" />
                     </div>
-                    <el-form-item :label="$t('commons.table.description')" prop="description">
-                        <el-input clearable v-model.trim="dialogData.rowData!.description" />
-                    </el-form-item>
-                </el-col>
-            </el-row>
+                    <div v-else>
+                        <el-radio label="10.x" value="10.x" />
+                        <el-radio label="11.x" value="11.x" />
+                    </div>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('database.address')" prop="address">
+                <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.port')" prop="port">
+                <el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.username')" prop="username">
+                <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.username" />
+                <span class="input-help">{{ $t('database.userHelper') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.password')" prop="password">
+                <el-input
+                    @change="isOK = false"
+                    type="password"
+                    clearable
+                    show-password
+                    v-model.trim="dialogData.rowData!.password"
+                />
+            </el-form-item>
+            <el-form-item>
+                <el-checkbox @change="isOK = false" v-model="dialogData.rowData!.ssl" :label="$t('database.ssl')" />
+            </el-form-item>
+            <div v-if="dialogData.rowData!.ssl">
+                <el-form-item>
+                    <el-checkbox
+                        @change="isOK = false"
+                        v-model="dialogData.rowData!.hasCA"
+                        :label="$t('database.hasCA')"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <el-checkbox
+                        @change="isOK = false"
+                        v-model="dialogData.rowData!.skipVerify"
+                        :label="$t('database.skipVerify')"
+                    />
+                </el-form-item>
+                <el-form-item :label="$t('database.clientKey')" prop="clientKey">
+                    <el-input
+                        type="textarea"
+                        @change="isOK = false"
+                        clearable
+                        v-model="dialogData.rowData!.clientKey"
+                    />
+                </el-form-item>
+                <el-form-item :label="$t('database.clientCert')" prop="clientCert">
+                    <el-input
+                        type="textarea"
+                        @change="isOK = false"
+                        clearable
+                        v-model="dialogData.rowData!.clientCert"
+                    />
+                </el-form-item>
+                <el-form-item v-if="dialogData.rowData!.hasCA" :label="$t('database.caCert')" prop="rootCert">
+                    <el-input type="textarea" @change="isOK = false" clearable v-model="dialogData.rowData!.rootCert" />
+                </el-form-item>
+            </div>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input clearable v-model.trim="dialogData.rowData!.description" />
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -127,7 +102,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -135,7 +110,6 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Database } from '@/api/interface/database';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Rules } from '@/global/form-rules';
 import { addDatabase, checkDatabase, editDatabase } from '@/api/modules/database';
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 96e6b994f..3139d41a8 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -1,49 +1,45 @@
 <template>
     <div v-loading="loading">
-        <LayoutContent>
-            <template #title>
-                <back-button name="MySQL" :header="props.database + ' ' + $t('commons.button.set')">
-                    <template #buttons>
-                        <el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
-                            {{ $t('database.confChange') }}
-                        </el-button>
-                        <el-button
-                            type="primary"
-                            :disabled="mysqlStatus !== 'Running'"
-                            :plain="activeName !== 'status'"
-                            @click="activeName = 'status'"
-                        >
-                            {{ $t('database.currentStatus') }}
-                        </el-button>
-                        <el-button
-                            type="primary"
-                            :disabled="mysqlStatus !== 'Running'"
-                            :plain="activeName !== 'tuning'"
-                            @click="activeName = 'tuning'"
-                        >
-                            {{ $t('database.performanceTuning') }}
-                        </el-button>
-                        <el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
-                            {{ $t('commons.table.port') }}
-                        </el-button>
-                        <el-button
-                            type="primary"
-                            :disabled="mysqlStatus !== 'Running'"
-                            :plain="activeName !== 'log'"
-                            @click="activeName = 'log'"
-                        >
-                            {{ $t('database.log') }}
-                        </el-button>
-                        <el-button
-                            type="primary"
-                            :disabled="mysqlStatus !== 'Running'"
-                            @click="jumpToSlowlog"
-                            :plain="activeName !== 'slowLog'"
-                        >
-                            {{ $t('database.slowLog') }}
-                        </el-button>
-                    </template>
-                </back-button>
+        <LayoutContent backName="MySQL" :title="props.database + ' ' + $t('commons.button.set')">
+            <template #leftToolBar>
+                <el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
+                    {{ $t('database.confChange') }}
+                </el-button>
+                <el-button
+                    type="primary"
+                    :disabled="mysqlStatus !== 'Running'"
+                    :plain="activeName !== 'status'"
+                    @click="activeName = 'status'"
+                >
+                    {{ $t('database.currentStatus') }}
+                </el-button>
+                <el-button
+                    type="primary"
+                    :disabled="mysqlStatus !== 'Running'"
+                    :plain="activeName !== 'tuning'"
+                    @click="activeName = 'tuning'"
+                >
+                    {{ $t('database.performanceTuning') }}
+                </el-button>
+                <el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
+                    {{ $t('commons.table.port') }}
+                </el-button>
+                <el-button
+                    type="primary"
+                    :disabled="mysqlStatus !== 'Running'"
+                    :plain="activeName !== 'log'"
+                    @click="activeName = 'log'"
+                >
+                    {{ $t('database.log') }}
+                </el-button>
+                <el-button
+                    type="primary"
+                    :disabled="mysqlStatus !== 'Running'"
+                    @click="jumpToSlowlog"
+                    :plain="activeName !== 'slowLog'"
+                >
+                    {{ $t('database.slowLog') }}
+                </el-button>
             </template>
 
             <template #app>
@@ -65,17 +61,17 @@
                         :extensions="extensions"
                         v-model="mysqlConf"
                     />
-                    <el-button style="margin-top: 10px" @click="getDefaultConfig()">
+                    <el-button class="mt-2.5" @click="getDefaultConfig()">
                         {{ $t('app.defaultConfig') }}
                     </el-button>
-                    <el-button type="primary" style="margin-top: 10px" @click="onSaveConf">
+                    <el-button type="primary" class="mt-2.5" @click="onSaveConf">
                         {{ $t('commons.button.save') }}
                     </el-button>
                     <el-row>
                         <el-col :span="8">
                             <el-alert
                                 v-if="useOld"
-                                style="margin-top: 10px"
+                                class="mt-2.5"
                                 :title="$t('app.defaultConfigHelper')"
                                 type="info"
                                 :closable="false"
diff --git a/frontend/src/views/database/postgresql/bind/index.vue b/frontend/src/views/database/postgresql/bind/index.vue
index f85fc7d11..95ca3b8c5 100644
--- a/frontend/src/views/database/postgresql/bind/index.vue
+++ b/frontend/src/views/database/postgresql/bind/index.vue
@@ -1,30 +1,23 @@
 <template>
     <div>
-        <el-drawer
+        <DrawerPro
             v-model="bindVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            width="30%"
+            :header="$t('database.userBind')"
+            :resource="form.name"
+            :back="handleClose"
+            size="small"
         >
-            <template #header>
-                <DrawerHeader :header="$t('database.userBind')" :resource="form.name" :back="handleClose" />
-            </template>
             <el-form v-loading="loading" ref="changeFormRef" :model="form" :rules="rules" label-position="top">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-alert type="warning" :title="$t('database.pgBindHelper')" :closable="false" />
-                        <el-form-item class="mt-5" :label="$t('database.userBind')" prop="username">
-                            <el-input v-model="form.username" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.password')" prop="password">
-                            <el-input type="password" clearable show-password v-model="form.password" />
-                        </el-form-item>
-                        <el-form-item :label="$t('database.permission')" prop="superUser">
-                            <el-checkbox v-model="form.superUser">{{ $t('database.pgSuperUser') }}</el-checkbox>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+                <el-alert type="warning" :title="$t('database.pgBindHelper')" :closable="false" />
+                <el-form-item class="mt-5" :label="$t('database.userBind')" prop="username">
+                    <el-input v-model="form.username" />
+                </el-form-item>
+                <el-form-item :label="$t('commons.login.password')" prop="password">
+                    <el-input type="password" clearable show-password v-model="form.password" />
+                </el-form-item>
+                <el-form-item :label="$t('database.permission')" prop="superUser">
+                    <el-checkbox v-model="form.superUser">{{ $t('database.pgSuperUser') }}</el-checkbox>
+                </el-form-item>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
@@ -36,7 +29,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-drawer>
+        </DrawerPro>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
     </div>
@@ -46,7 +39,6 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { bindPostgresqlUser } from '@/api/modules/database';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Rules } from '@/global/form-rules';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/database/postgresql/conn/index.vue b/frontend/src/views/database/postgresql/conn/index.vue
index 0f4ffc6b5..62deca211 100644
--- a/frontend/src/views/database/postgresql/conn/index.vue
+++ b/frontend/src/views/database/postgresql/conn/index.vue
@@ -1,108 +1,87 @@
 <template>
-    <el-drawer
-        v-model="dialogVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="30%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="dialogVisible" :header="$t('database.databaseConnInfo')" :back="handleClose" size="small">
         <el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
-                        <el-card class="mini-border-card">
-                            <el-descriptions :column="1">
-                                <el-descriptions-item :label="$t('database.connAddress')">
-                                    <el-tooltip
-                                        v-if="loadPgInfo(true).length > 48"
-                                        :content="loadPgInfo(true)"
-                                        placement="top"
-                                    >
-                                        {{ loadPgInfo(true).substring(0, 48) }}...
-                                    </el-tooltip>
-                                    <span else>
-                                        {{ loadPgInfo(true) }}
-                                    </span>
-                                    <CopyButton :content="loadPgInfo(true)" type="icon" />
-                                </el-descriptions-item>
-                                <el-descriptions-item :label="$t('database.connPort')">
-                                    {{ form.port }}
-                                    <CopyButton :content="form.port + ''" type="icon" />
-                                </el-descriptions-item>
-                            </el-descriptions>
-                        </el-card>
-                        <span class="input-help">
-                            {{ $t('database.containerConnHelper') }}
-                        </span>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.remoteConn')">
-                        <el-card class="mini-border-card">
-                            <el-descriptions :column="1">
-                                <el-descriptions-item :label="$t('database.connAddress')">
-                                    <el-tooltip
-                                        v-if="loadPgInfo(false).length > 48"
-                                        :content="loadPgInfo(false)"
-                                        placement="top"
-                                    >
-                                        {{ loadPgInfo(false).substring(0, 48) }}...
-                                    </el-tooltip>
-                                    <span else>
-                                        {{ loadPgInfo(false) }}
-                                    </span>
-                                    <CopyButton :content="loadPgInfo(false)" type="icon" />
-                                </el-descriptions-item>
-                                <el-descriptions-item :label="$t('database.connPort')">
-                                    {{ form.port }}
-                                    <CopyButton :content="form.port + ''" type="icon" />
-                                </el-descriptions-item>
-                            </el-descriptions>
-                        </el-card>
-                        <span v-if="form.from === 'local'" class="input-help">
-                            {{ $t('database.remoteConnHelper2') }}
-                        </span>
-                    </el-form-item>
+            <el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
+                <el-card class="mini-border-card">
+                    <el-descriptions :column="1">
+                        <el-descriptions-item :label="$t('database.connAddress')">
+                            <el-tooltip v-if="loadPgInfo(true).length > 48" :content="loadPgInfo(true)" placement="top">
+                                {{ loadPgInfo(true).substring(0, 48) }}...
+                            </el-tooltip>
+                            <span else>
+                                {{ loadPgInfo(true) }}
+                            </span>
+                            <CopyButton :content="loadPgInfo(true)" type="icon" />
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('database.connPort')">
+                            {{ form.port }}
+                            <CopyButton :content="form.port + ''" type="icon" />
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </el-card>
+                <span class="input-help">
+                    {{ $t('database.containerConnHelper') }}
+                </span>
+            </el-form-item>
+            <el-form-item :label="$t('database.remoteConn')">
+                <el-card class="mini-border-card">
+                    <el-descriptions :column="1">
+                        <el-descriptions-item :label="$t('database.connAddress')">
+                            <el-tooltip
+                                v-if="loadPgInfo(false).length > 48"
+                                :content="loadPgInfo(false)"
+                                placement="top"
+                            >
+                                {{ loadPgInfo(false).substring(0, 48) }}...
+                            </el-tooltip>
+                            <span else>
+                                {{ loadPgInfo(false) }}
+                            </span>
+                            <CopyButton :content="loadPgInfo(false)" type="icon" />
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('database.connPort')">
+                            {{ form.port }}
+                            <CopyButton :content="form.port + ''" type="icon" />
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </el-card>
+                <span v-if="form.from === 'local'" class="input-help">
+                    {{ $t('database.remoteConnHelper2') }}
+                </span>
+            </el-form-item>
 
-                    <el-divider border-style="dashed" />
-                    <div v-if="form.from === 'local'">
-                        <el-form-item :label="$t('commons.login.username')" prop="username">
-                            <el-input type="text" readonly disabled v-model="form.username">
-                                <template #append>
-                                    <el-button-group>
-                                        <CopyButton :content="form.username" />
-                                    </el-button-group>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('commons.login.password')"
-                            :rules="Rules.paramComplexity"
-                            prop="password"
-                        >
-                            <el-input type="password" show-password clearable v-model="form.password">
-                                <template #append>
-                                    <CopyButton :content="form.password" />
-                                    <el-button @click="random" class="p-ml-5">
-                                        {{ $t('commons.button.random') }}
-                                    </el-button>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                    </div>
-                    <div v-if="form.from !== 'local'">
-                        <el-form-item :label="$t('commons.login.username')">
-                            <el-tag>{{ form.username }}</el-tag>
-                            <CopyButton :content="form.username" type="icon" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.password')">
-                            <el-tag>{{ form.password }}</el-tag>
-                            <CopyButton :content="form.password" type="icon" />
-                        </el-form-item>
-                    </div>
-                </el-col>
-            </el-row>
+            <el-divider border-style="dashed" />
+            <div v-if="form.from === 'local'">
+                <el-form-item :label="$t('commons.login.username')" prop="username">
+                    <el-input type="text" readonly disabled v-model="form.username">
+                        <template #append>
+                            <el-button-group>
+                                <CopyButton :content="form.username" />
+                            </el-button-group>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
+                    <el-input type="password" show-password clearable v-model="form.password">
+                        <template #append>
+                            <CopyButton :content="form.password" />
+                            <el-button @click="random" class="p-ml-5">
+                                {{ $t('commons.button.random') }}
+                            </el-button>
+                        </template>
+                    </el-input>
+                </el-form-item>
+            </div>
+            <div v-if="form.from !== 'local'">
+                <el-form-item :label="$t('commons.login.username')">
+                    <el-tag>{{ form.username }}</el-tag>
+                    <CopyButton :content="form.username" type="icon" />
+                </el-form-item>
+                <el-form-item :label="$t('commons.login.password')">
+                    <el-tag>{{ form.password }}</el-tag>
+                    <CopyButton :content="form.password" type="icon" />
+                </el-form-item>
+            </div>
         </el-form>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit" @cancel="loadPassword"></ConfirmDialog>
@@ -117,7 +96,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -128,7 +107,6 @@ import { ElForm } from 'element-plus';
 import { getDatabase, updatePostgresqlPassword } from '@/api/modules/database';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { GetAppConnInfo } from '@/api/modules/app';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { getRandomStr } from '@/utils/util';
 import { getSettingInfo } from '@/api/modules/setting';
diff --git a/frontend/src/views/database/postgresql/create/index.vue b/frontend/src/views/database/postgresql/create/index.vue
index d620c123f..87708775e 100644
--- a/frontend/src/views/database/postgresql/create/index.vue
+++ b/frontend/src/views/database/postgresql/create/index.vue
@@ -1,47 +1,33 @@
 <template>
-    <el-drawer
-        v-model="createVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="30%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('database.create')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="createVisible" :header="$t('database.create')" :back="handleClose" size="small">
         <div v-loading="loading">
             <el-form ref="formRef" label-position="top" :model="form" :rules="rules">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.name')" prop="name">
-                            <el-input clearable v-model.trim="form.name" @input="form.username = form.name"></el-input>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.username')" prop="username">
-                            <el-input clearable v-model.trim="form.username" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.password')" prop="password">
-                            <el-input type="password" clearable show-password v-model.trim="form.password">
-                                <template #append>
-                                    <el-button @click="random">{{ $t('commons.button.random') }}</el-button>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item :label="$t('database.permission')" prop="superUser">
-                            <el-checkbox v-model="form.superUser">{{ $t('database.pgSuperUser') }}</el-checkbox>
-                        </el-form-item>
+                <el-form-item :label="$t('commons.table.name')" prop="name">
+                    <el-input clearable v-model.trim="form.name" @input="form.username = form.name"></el-input>
+                </el-form-item>
+                <el-form-item :label="$t('commons.login.username')" prop="username">
+                    <el-input clearable v-model.trim="form.username" />
+                </el-form-item>
+                <el-form-item :label="$t('commons.login.password')" prop="password">
+                    <el-input type="password" clearable show-password v-model.trim="form.password">
+                        <template #append>
+                            <el-button @click="random">{{ $t('commons.button.random') }}</el-button>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item :label="$t('database.permission')" prop="superUser">
+                    <el-checkbox v-model="form.superUser">{{ $t('database.pgSuperUser') }}</el-checkbox>
+                </el-form-item>
 
-                        <el-form-item :label="$t('commons.table.type')" prop="database">
-                            <el-tag>{{ form.database + ' [' + form.type + ']' }}</el-tag>
-                        </el-form-item>
+                <el-form-item :label="$t('commons.table.type')" prop="database">
+                    <el-tag>{{ form.database + ' [' + form.type + ']' }}</el-tag>
+                </el-form-item>
 
-                        <el-form-item :label="$t('commons.table.description')" prop="description">
-                            <el-input type="textarea" clearable v-model="form.description" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+                <el-form-item :label="$t('commons.table.description')" prop="description">
+                    <el-input type="textarea" clearable v-model="form.description" />
+                </el-form-item>
             </el-form>
         </div>
-
         <template #footer>
             <span class="dialog-footer">
                 <el-button :disabled="loading" @click="createVisible = false">
@@ -52,7 +38,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -61,7 +47,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { addPostgresqlDB } from '@/api/modules/database';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { getRandomStr } from '@/utils/util';
 
diff --git a/frontend/src/views/database/postgresql/password/index.vue b/frontend/src/views/database/postgresql/password/index.vue
index 0af30a303..d3ab80f45 100644
--- a/frontend/src/views/database/postgresql/password/index.vue
+++ b/frontend/src/views/database/postgresql/password/index.vue
@@ -1,33 +1,21 @@
 <template>
     <div>
-        <el-drawer
+        <DrawerPro
             v-model="changeVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            width="30%"
+            :header="title"
+            :resource="changeForm.postgresqlName"
+            :back="handleClose"
+            size="small"
         >
-            <template #header>
-                <DrawerHeader :header="title" :resource="changeForm.postgresqlName" :back="handleClose" />
-            </template>
             <el-form v-loading="loading" ref="changeFormRef" :rules="rules" :model="changeForm" label-position="top">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <div v-if="changeForm.operation === 'password'">
-                            <el-form-item :label="$t('commons.login.username')" prop="username">
-                                <el-input disabled v-model="changeForm.username"></el-input>
-                            </el-form-item>
-                            <el-form-item :label="$t('commons.login.password')" prop="password">
-                                <el-input
-                                    type="password"
-                                    clearable
-                                    show-password
-                                    v-model="changeForm.password"
-                                ></el-input>
-                            </el-form-item>
-                        </div>
-                    </el-col>
-                </el-row>
+                <div v-if="changeForm.operation === 'password'">
+                    <el-form-item :label="$t('commons.login.username')" prop="username">
+                        <el-input disabled v-model="changeForm.username"></el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('commons.login.password')" prop="password">
+                        <el-input type="password" clearable show-password v-model="changeForm.password"></el-input>
+                    </el-form-item>
+                </div>
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
@@ -39,7 +27,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-drawer>
+        </DrawerPro>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
     </div>
@@ -49,7 +37,6 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { deleteCheckPostgresqlDB, updatePostgresqlPassword } from '@/api/modules/database';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { Rules } from '@/global/form-rules';
 
diff --git a/frontend/src/views/database/postgresql/remote/index.vue b/frontend/src/views/database/postgresql/remote/index.vue
index 531c4dfa4..500b0487c 100644
--- a/frontend/src/views/database/postgresql/remote/index.vue
+++ b/frontend/src/views/database/postgresql/remote/index.vue
@@ -1,20 +1,13 @@
 <template>
     <div v-loading="loading">
-        <LayoutContent>
-            <template #title>
-                <back-button name="PostgreSQL" :header="$t('database.remoteDB')" />
+        <LayoutContent :title="$t('database.remoteDB')" backName="PostgreSQL">
+            <template #leftToolBar>
+                <el-button type="primary" @click="onOpenDialog('create')">
+                    {{ $t('database.createRemoteDB') }}
+                </el-button>
             </template>
-            <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('database.createRemoteDB') }}
-                        </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
-                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+            <template #rightToolBar>
+                <TableSearch @search="search()" v-model:searchName="searchName" />
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
diff --git a/frontend/src/views/database/postgresql/remote/operate/index.vue b/frontend/src/views/database/postgresql/remote/operate/index.vue
index 66916c16a..e23204439 100644
--- a/frontend/src/views/database/postgresql/remote/operate/index.vue
+++ b/frontend/src/views/database/postgresql/remote/operate/index.vue
@@ -1,62 +1,46 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="title"
+        :back="handleClose"
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader
-                :hideResource="dialogData.title === 'create'"
-                :header="title"
-                :resource="dialogData.rowData?.name"
-                :back="handleClose"
-            />
-        </template>
         <el-form ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData" :rules="rules">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input
-                            v-if="dialogData.title === 'create'"
-                            clearable
-                            v-model.trim="dialogData.rowData!.name"
-                        />
-                        <el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.version')" prop="version">
-                        <el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
-                            <el-radio label="16.x" value="16.x" />
-                            <el-radio label="15.x" value="15.x" />
-                            <el-radio label="14.x" value="14.x" />
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.address')" prop="address">
-                        <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.port')" prop="port">
-                        <el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.username')" prop="username">
-                        <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.username" />
-                        <span class="input-help">{{ $t('database.pgUserHelper') }}</span>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.password')" prop="password">
-                        <el-input
-                            @change="isOK = false"
-                            type="password"
-                            clearable
-                            show-password
-                            v-model.trim="dialogData.rowData!.password"
-                        />
-                    </el-form-item>
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-if="dialogData.title === 'create'" clearable v-model.trim="dialogData.rowData!.name" />
+                <el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
+            </el-form-item>
+            <el-form-item :label="$t('database.version')" prop="version">
+                <el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
+                    <el-radio label="16.x" value="16.x" />
+                    <el-radio label="15.x" value="15.x" />
+                    <el-radio label="14.x" value="14.x" />
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('database.address')" prop="address">
+                <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.port')" prop="port">
+                <el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.username')" prop="username">
+                <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.username" />
+                <span class="input-help">{{ $t('database.pgUserHelper') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.password')" prop="password">
+                <el-input
+                    @change="isOK = false"
+                    type="password"
+                    clearable
+                    show-password
+                    v-model.trim="dialogData.rowData!.password"
+                />
+            </el-form-item>
 
-                    <el-form-item :label="$t('commons.table.description')" prop="description">
-                        <el-input clearable v-model.trim="dialogData.rowData!.description" />
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input clearable v-model.trim="dialogData.rowData!.description" />
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -69,7 +53,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -77,7 +61,6 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Database } from '@/api/interface/database';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Rules } from '@/global/form-rules';
 import { addDatabase, checkDatabase, editDatabase } from '@/api/modules/database';
diff --git a/frontend/src/views/database/postgresql/setting/index.vue b/frontend/src/views/database/postgresql/setting/index.vue
index 1c95df932..4ee42cc2c 100644
--- a/frontend/src/views/database/postgresql/setting/index.vue
+++ b/frontend/src/views/database/postgresql/setting/index.vue
@@ -1,25 +1,21 @@
 <template>
     <div v-loading="loading">
-        <LayoutContent>
-            <template #title>
-                <back-button name="PostgreSQL" :header="props.database + ' ' + $t('commons.button.set')">
-                    <template #buttons>
-                        <el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
-                            {{ $t('database.confChange') }}
-                        </el-button>
-                        <el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
-                            {{ $t('commons.table.port') }}
-                        </el-button>
-                        <el-button
-                            type="primary"
-                            :disabled="postgresqlStatus !== 'Running'"
-                            :plain="activeName !== 'log'"
-                            @click="activeName = 'log'"
-                        >
-                            {{ $t('database.log') }}
-                        </el-button>
-                    </template>
-                </back-button>
+        <LayoutContent :title="props.database + ' ' + $t('commons.button.set')" backName="PostgreSQL">
+            <template #leftToolBar>
+                <el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
+                    {{ $t('database.confChange') }}
+                </el-button>
+                <el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
+                    {{ $t('commons.table.port') }}
+                </el-button>
+                <el-button
+                    type="primary"
+                    :disabled="postgresqlStatus !== 'Running'"
+                    :plain="activeName !== 'log'"
+                    @click="activeName = 'log'"
+                >
+                    {{ $t('database.log') }}
+                </el-button>
             </template>
 
             <template #app>
diff --git a/frontend/src/views/database/redis/command/index.vue b/frontend/src/views/database/redis/command/index.vue
index 417a7f82f..c12ab0f57 100644
--- a/frontend/src/views/database/redis/command/index.vue
+++ b/frontend/src/views/database/redis/command/index.vue
@@ -1,16 +1,6 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            @close="handleClose"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('database.redisQuickCmd')" :back="handleClose" />
-            </template>
+    <DrawerPro v-model="drawerVisible" :header="$t('database.redisQuickCmd')" :back="handleClose" size="large">
+        <template #content>
             <el-button type="primary" @click="handleCmdAdd()">
                 {{ $t('commons.button.add') }}
             </el-button>
@@ -66,15 +56,14 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                </span>
-            </template>
-        </el-drawer>
-
-        <OpDialog ref="opRef" @search="search" />
-    </div>
+        </template>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
+            </span>
+        </template>
+    </DrawerPro>
+    <OpDialog ref="opRef" @search="search" />
 </template>
 
 <script setup lang="ts">
@@ -82,7 +71,6 @@ import { Command } from '@/api/interface/command';
 import { saveRedisCommand, deleteRedisCommand, getRedisCommandPage } from '@/api/modules/host';
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 
 const drawerVisible = ref();
diff --git a/frontend/src/views/database/redis/conn/index.vue b/frontend/src/views/database/redis/conn/index.vue
index 8dd0367a7..30c241e6d 100644
--- a/frontend/src/views/database/redis/conn/index.vue
+++ b/frontend/src/views/database/redis/conn/index.vue
@@ -1,90 +1,77 @@
 <template>
-    <el-drawer
-        v-model="dialogVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="30%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="dialogVisible" :header="$t('database.databaseConnInfo')" :back="handleClose" size="small">
         <el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top" :rules="rules">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
-                        <el-card class="mini-border-card">
-                            <el-descriptions :column="1">
-                                <el-descriptions-item :label="$t('database.connAddress')">
-                                    <el-tooltip
-                                        v-if="loadRedisInfo(true).length > 48"
-                                        :content="loadRedisInfo(true)"
-                                        placement="top"
-                                    >
-                                        {{ loadRedisInfo(true).substring(0, 48) }}...
-                                    </el-tooltip>
-                                    <span else>
-                                        {{ loadRedisInfo(true) }}
-                                    </span>
-                                    <CopyButton :content="loadRedisInfo(true)" type="icon" />
-                                </el-descriptions-item>
-                                <el-descriptions-item :label="$t('database.connPort')">
-                                    6379
-                                    <CopyButton content="6379" type="icon" />
-                                </el-descriptions-item>
-                            </el-descriptions>
-                        </el-card>
-                        <span class="input-help">
-                            {{ $t('database.containerConnHelper') }}
-                        </span>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.remoteConn')">
-                        <el-card class="mini-border-card">
-                            <el-descriptions :column="1">
-                                <el-descriptions-item :label="$t('database.connAddress')">
-                                    <el-tooltip
-                                        v-if="loadRedisInfo(false).length > 48"
-                                        :content="loadRedisInfo(false)"
-                                        placement="top"
-                                    >
-                                        {{ loadRedisInfo(false).substring(0, 48) }}...
-                                    </el-tooltip>
-                                    <span else>
-                                        {{ loadRedisInfo(false) }}
-                                    </span>
-                                    <CopyButton :content="loadRedisInfo(false)" type="icon" />
-                                </el-descriptions-item>
-                                <el-descriptions-item :label="$t('database.connPort')">
-                                    {{ form.port }}
-                                    <CopyButton :content="form.port + ''" type="icon" />
-                                </el-descriptions-item>
-                            </el-descriptions>
-                        </el-card>
-                        <span class="input-help">
-                            {{ $t('database.remoteConnHelper2') }}
-                        </span>
-                    </el-form-item>
+            <el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
+                <el-card class="mini-border-card">
+                    <el-descriptions :column="1">
+                        <el-descriptions-item :label="$t('database.connAddress')">
+                            <el-tooltip
+                                v-if="loadRedisInfo(true).length > 48"
+                                :content="loadRedisInfo(true)"
+                                placement="top"
+                            >
+                                {{ loadRedisInfo(true).substring(0, 48) }}...
+                            </el-tooltip>
+                            <span else>
+                                {{ loadRedisInfo(true) }}
+                            </span>
+                            <CopyButton :content="loadRedisInfo(true)" type="icon" />
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('database.connPort')">
+                            6379
+                            <CopyButton content="6379" type="icon" />
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </el-card>
+                <span class="input-help">
+                    {{ $t('database.containerConnHelper') }}
+                </span>
+            </el-form-item>
+            <el-form-item :label="$t('database.remoteConn')">
+                <el-card class="mini-border-card">
+                    <el-descriptions :column="1">
+                        <el-descriptions-item :label="$t('database.connAddress')">
+                            <el-tooltip
+                                v-if="loadRedisInfo(false).length > 48"
+                                :content="loadRedisInfo(false)"
+                                placement="top"
+                            >
+                                {{ loadRedisInfo(false).substring(0, 48) }}...
+                            </el-tooltip>
+                            <span else>
+                                {{ loadRedisInfo(false) }}
+                            </span>
+                            <CopyButton :content="loadRedisInfo(false)" type="icon" />
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('database.connPort')">
+                            {{ form.port }}
+                            <CopyButton :content="form.port + ''" type="icon" />
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </el-card>
+                <span class="input-help">
+                    {{ $t('database.remoteConnHelper2') }}
+                </span>
+            </el-form-item>
 
-                    <el-divider border-style="dashed" />
-                    <el-form-item :label="$t('commons.login.password')" v-if="form.from === 'local'" prop="password">
-                        <el-input type="password" show-password clearable v-model="form.password">
-                            <template #append>
-                                <CopyButton :content="form.password" />
-                                <el-button @click="random" class="p-ml-5">
-                                    {{ $t('commons.button.random') }}
-                                </el-button>
-                            </template>
-                        </el-input>
-                    </el-form-item>
+            <el-divider border-style="dashed" />
+            <el-form-item :label="$t('commons.login.password')" v-if="form.from === 'local'" prop="password">
+                <el-input type="password" show-password clearable v-model="form.password">
+                    <template #append>
+                        <CopyButton :content="form.password" />
+                        <el-button @click="random" class="p-ml-5">
+                            {{ $t('commons.button.random') }}
+                        </el-button>
+                    </template>
+                </el-input>
+            </el-form-item>
 
-                    <div v-if="form.from !== 'local'">
-                        <el-form-item :label="$t('commons.login.password')">
-                            <el-tag>{{ form.password }}</el-tag>
-                            <CopyButton :content="form.password" type="icon" />
-                        </el-form-item>
-                    </div>
-                </el-col>
-            </el-row>
+            <div v-if="form.from !== 'local'">
+                <el-form-item :label="$t('commons.login.password')">
+                    <el-tag>{{ form.password }}</el-tag>
+                    <CopyButton :content="form.password" type="icon" />
+                </el-form-item>
+            </div>
         </el-form>
 
         <ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
@@ -99,7 +86,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -110,7 +97,6 @@ import { changeRedisPassword, getDatabase } from '@/api/modules/database';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { GetAppConnInfo } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { getRandomStr } from '@/utils/util';
 import { getSettingInfo } from '@/api/modules/setting';
 
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index d5008ee9e..e53711665 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -8,7 +8,7 @@
                 </div>
             </el-card>
         </div>
-        <LayoutContent>
+        <LayoutContent title="Redis">
             <template #app v-if="currentDB?.from === 'local'">
                 <AppStatus
                     :app-key="'redis'"
@@ -19,96 +19,100 @@
                     @setting="onSetting"
                 ></AppStatus>
             </template>
-            <template #search v-if="!isOnSetting">
-                <div class="flex">
-                    <div>
-                        <el-button v-if="currentDB" type="primary" plain @click="onLoadConn">
-                            {{ $t('database.databaseConnInfo') }}
+            <template #leftToolBar v-if="!isOnSetting">
+                <el-button v-if="currentDB" type="primary" plain @click="onLoadConn">
+                    {{ $t('database.databaseConnInfo') }}
+                </el-button>
+                <el-button @click="goRemoteDB" type="primary" plain>
+                    {{ $t('database.remoteDB') }}
+                </el-button>
+            </template>
+            <template #rightToolBar v-if="!isOnSetting">
+                <el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-200 ml-5" v-if="currentDB">
+                    <template #prefix>{{ $t('commons.table.type') }}</template>
+                    <el-option-group :label="$t('database.local')">
+                        <div v-for="(item, index) in dbOptionsLocal" :key="index">
+                            <el-option v-if="item.from === 'local'" :value="item.database" class="optionClass">
+                                <span v-if="item.database.length < 25">{{ item.database }}</span>
+                                <el-tooltip v-else :content="item.database" placement="top">
+                                    <span>{{ item.database.substring(0, 25) }}...</span>
+                                </el-tooltip>
+                            </el-option>
+                        </div>
+                        <el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position">
+                            {{ $t('database.goInstall') }}
                         </el-button>
-                        <el-button @click="goRemoteDB" type="primary" plain>
-                            {{ $t('database.remoteDB') }}
+                    </el-option-group>
+                    <el-option-group :label="$t('database.remote')">
+                        <div v-for="(item, index) in dbOptionsRemote" :key="index">
+                            <el-option v-if="item.from === 'remote'" :value="item.database" class="optionClass">
+                                <span v-if="item.database.length < 25">{{ item.database }}</span>
+                                <el-tooltip v-else :content="item.database" placement="top">
+                                    <span>{{ item.database.substring(0, 25) }}...</span>
+                                </el-tooltip>
+                            </el-option>
+                        </div>
+                        <el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position">
+                            {{ $t('database.createRemoteDB') }}
+                        </el-button>
+                    </el-option-group>
+                </el-select>
+            </template>
+            <template #main v-if="!isOnSetting">
+                <div v-if="currentDB && !isOnSetting" class="mt-5">
+                    <Terminal
+                        :style="{ height: `calc(100vh - ${loadHeight()})` }"
+                        :key="isRefresh"
+                        ref="terminalRef"
+                        v-show="redisStatus === 'Running' && terminalShow"
+                    />
+                    <el-empty
+                        v-if="redisStatus !== 'Running' || (currentDB.from === 'remote' && !redisCliExist)"
+                        :image-size="80"
+                        :style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }"
+                        :description="loadErrMsg()"
+                    >
+                        <el-button v-if="currentDB.from === 'remote'" type="primary" @click="installCli">
+                            {{ $t('commons.button.enable') }}
+                        </el-button>
+                    </el-empty>
+                    <div>
+                        <el-select v-model="quickCmd" clearable filterable @change="quickInput" style="width: 90%">
+                            <template #prefix>{{ $t('terminal.quickCommand') }}</template>
+                            <el-option
+                                v-for="cmd in quickCmdList"
+                                :key="cmd.id"
+                                :label="cmd.name"
+                                :value="cmd.command"
+                            />
+                        </el-select>
+                        <el-button @click="onSetQuickCmd" icon="Setting" style="width: 10%">
+                            {{ $t('commons.button.set') }}
                         </el-button>
                     </div>
-                    <el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-200 ml-5" v-if="currentDB">
-                        <template #prefix>{{ $t('commons.table.type') }}</template>
-                        <el-option-group :label="$t('database.local')">
-                            <div v-for="(item, index) in dbOptionsLocal" :key="index">
-                                <el-option v-if="item.from === 'local'" :value="item.database" class="optionClass">
-                                    <span v-if="item.database.length < 25">{{ item.database }}</span>
-                                    <el-tooltip v-else :content="item.database" placement="top">
-                                        <span>{{ item.database.substring(0, 25) }}...</span>
-                                    </el-tooltip>
-                                </el-option>
+                </div>
+
+                <div v-if="dbOptionsLocal.length === 0 && dbOptionsRemote.length === 0">
+                    <LayoutContent :title="'Redis ' + $t('menu.database')" :divider="true">
+                        <template #main>
+                            <div class="app-warn">
+                                <div>
+                                    <span>{{ $t('app.checkInstalledWarn', ['Redis']) }}</span>
+                                    <span @click="goRouter('app')">
+                                        <el-icon class="ml-2"><Position /></el-icon>
+                                        {{ $t('database.goInstall') }}
+                                    </span>
+                                    <div>
+                                        <img src="@/assets/images/no_app.svg" />
+                                    </div>
+                                </div>
                             </div>
-                            <el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position">
-                                {{ $t('database.goInstall') }}
-                            </el-button>
-                        </el-option-group>
-                        <el-option-group :label="$t('database.remote')">
-                            <div v-for="(item, index) in dbOptionsRemote" :key="index">
-                                <el-option v-if="item.from === 'remote'" :value="item.database" class="optionClass">
-                                    <span v-if="item.database.length < 25">{{ item.database }}</span>
-                                    <el-tooltip v-else :content="item.database" placement="top">
-                                        <span>{{ item.database.substring(0, 25) }}...</span>
-                                    </el-tooltip>
-                                </el-option>
-                            </div>
-                            <el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position">
-                                {{ $t('database.createRemoteDB') }}
-                            </el-button>
-                        </el-option-group>
-                    </el-select>
+                        </template>
+                    </LayoutContent>
                 </div>
             </template>
         </LayoutContent>
 
-        <div v-if="currentDB && !isOnSetting" class="mt-5">
-            <Terminal
-                :style="{ height: `calc(100vh - ${loadHeight()})` }"
-                :key="isRefresh"
-                ref="terminalRef"
-                v-show="redisStatus === 'Running' && terminalShow"
-            />
-            <el-empty
-                v-if="redisStatus !== 'Running' || (currentDB.from === 'remote' && !redisCliExist)"
-                :image-size="80"
-                :style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }"
-                :description="loadErrMsg()"
-            >
-                <el-button v-if="currentDB.from === 'remote'" type="primary" @click="installCli">
-                    {{ $t('commons.button.enable') }}
-                </el-button>
-            </el-empty>
-            <div>
-                <el-select v-model="quickCmd" clearable filterable @change="quickInput" style="width: 90%">
-                    <template #prefix>{{ $t('terminal.quickCommand') }}</template>
-                    <el-option v-for="cmd in quickCmdList" :key="cmd.id" :label="cmd.name" :value="cmd.command" />
-                </el-select>
-                <el-button @click="onSetQuickCmd" icon="Setting" style="width: 10%">
-                    {{ $t('commons.button.set') }}
-                </el-button>
-            </div>
-        </div>
-
-        <div v-if="dbOptionsLocal.length === 0 && dbOptionsRemote.length === 0">
-            <LayoutContent :title="'Redis ' + $t('menu.database')" :divider="true">
-                <template #main>
-                    <div class="app-warn">
-                        <div>
-                            <span>{{ $t('app.checkInstalledWarn', ['Redis']) }}</span>
-                            <span @click="goRouter('app')">
-                                <el-icon class="ml-2"><Position /></el-icon>
-                                {{ $t('database.goInstall') }}
-                            </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </LayoutContent>
-        </div>
-
         <Setting ref="settingRef" style="margin-top: 30px" />
         <Conn ref="connRef" @check-exist="reOpenTerminal" @close-terminal="closeTerminal(true)" />
         <el-dialog
diff --git a/frontend/src/views/database/redis/remote/index.vue b/frontend/src/views/database/redis/remote/index.vue
index 4ca325fde..a1682de83 100644
--- a/frontend/src/views/database/redis/remote/index.vue
+++ b/frontend/src/views/database/redis/remote/index.vue
@@ -1,20 +1,13 @@
 <template>
     <div v-loading="loading">
-        <LayoutContent>
-            <template #title>
-                <back-button name="Redis" :header="$t('database.remoteDB')" />
+        <LayoutContent :title="$t('database.remoteDB')" backName="Redis">
+            <template #leftToolBar>
+                <el-button type="primary" @click="onOpenDialog('create')">
+                    {{ $t('database.createRemoteDB') }}
+                </el-button>
             </template>
-            <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('database.createRemoteDB') }}
-                        </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
-                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+            <template #rightToolBar>
+                <TableSearch @search="search()" v-model:searchName="searchName" />
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
diff --git a/frontend/src/views/database/redis/remote/operate/index.vue b/frontend/src/views/database/redis/remote/operate/index.vue
index c1fcec269..3b24c2e8b 100644
--- a/frontend/src/views/database/redis/remote/operate/index.vue
+++ b/frontend/src/views/database/redis/remote/operate/index.vue
@@ -1,56 +1,40 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="title"
+        :back="handleClose"
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader
-                :hideResource="dialogData.title === 'create'"
-                :header="title"
-                :resource="dialogData.rowData?.name"
-                :back="handleClose"
-            />
-        </template>
         <el-form ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData" :rules="rules">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input
-                            v-if="dialogData.title === 'create'"
-                            clearable
-                            v-model.trim="dialogData.rowData!.name"
-                        />
-                        <el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.version')" prop="version">
-                        <el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
-                            <el-radio label="6.x" value="6.x" />
-                            <el-radio label="7.x" value="7.x" />
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item :label="$t('database.address')" prop="address">
-                        <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.port')" prop="port">
-                        <el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.password')" prop="password">
-                        <el-input
-                            @change="isOK = false"
-                            type="password"
-                            clearable
-                            show-password
-                            v-model.trim="dialogData.rowData!.password"
-                        />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.description')" prop="description">
-                        <el-input clearable v-model.trim="dialogData.rowData!.description" />
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-if="dialogData.title === 'create'" clearable v-model.trim="dialogData.rowData!.name" />
+                <el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
+            </el-form-item>
+            <el-form-item :label="$t('database.version')" prop="version">
+                <el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
+                    <el-radio label="6.x" value="6.x" />
+                    <el-radio label="7.x" value="7.x" />
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('database.address')" prop="address">
+                <el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.port')" prop="port">
+                <el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.password')" prop="password">
+                <el-input
+                    @change="isOK = false"
+                    type="password"
+                    clearable
+                    show-password
+                    v-model.trim="dialogData.rowData!.password"
+                />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input clearable v-model.trim="dialogData.rowData!.description" />
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -63,7 +47,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -71,7 +55,6 @@ import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Database } from '@/api/interface/database';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Rules } from '@/global/form-rules';
 import { addDatabase, checkDatabase, editDatabase } from '@/api/modules/database';
diff --git a/frontend/src/views/database/redis/setting/index.vue b/frontend/src/views/database/redis/setting/index.vue
index de9172f01..bdb453ac3 100644
--- a/frontend/src/views/database/redis/setting/index.vue
+++ b/frontend/src/views/database/redis/setting/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-show="settingShow" v-loading="loading">
         <LayoutContent :title="database + ' ' + $t('commons.button.set')" :reload="true">
-            <template #buttons>
+            <template #leftToolBar>
                 <el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
                     {{ $t('database.confChange') }}
                 </el-button>
diff --git a/frontend/src/views/host/file-management/batch-role/index.vue b/frontend/src/views/host/file-management/batch-role/index.vue
index dccceea0a..b78427581 100644
--- a/frontend/src/views/host/file-management/batch-role/index.vue
+++ b/frontend/src/views/host/file-management/batch-role/index.vue
@@ -1,42 +1,29 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :before-close="handleClose"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('file.setRole')" :back="handleClose" />
-        </template>
-
-        <el-row>
-            <el-col :span="22" :offset="1" v-loading="loading">
-                <FileRole :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
-                <el-form ref="fileForm" label-position="left" :model="addForm" label-width="100px" :rules="rules">
-                    <el-form-item :label="$t('commons.table.user')" prop="user">
-                        <el-input v-model.trim="addForm.user" />
-                    </el-form-item>
-                    <el-form-item :label="$t('file.group')" prop="group">
-                        <el-input v-model.trim="addForm.group" />
-                    </el-form-item>
-                    <el-form-item>
-                        <el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="$t('file.setRole')" :back="handleClose" size="large">
+        <div v-loading="loading">
+            <FileRole :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
+            <el-form ref="fileForm" label-position="left" :model="addForm" label-width="100px" :rules="rules">
+                <el-form-item :label="$t('commons.table.user')" prop="user">
+                    <el-input v-model.trim="addForm.user" />
+                </el-form-item>
+                <el-form-item :label="$t('file.group')" prop="group">
+                    <el-input v-model.trim="addForm.group" />
+                </el-form-item>
+                <el-form-item>
+                    <el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
+                </el-form-item>
+            </el-form>
+        </div>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit()">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { reactive, ref } from 'vue';
 import { File } from '@/api/interface/file';
 import { BatchChangeRole } from '@/api/modules/files';
diff --git a/frontend/src/views/host/file-management/change-role/index.vue b/frontend/src/views/host/file-management/change-role/index.vue
index 5004614f7..2907ef3ae 100644
--- a/frontend/src/views/host/file-management/change-role/index.vue
+++ b/frontend/src/views/host/file-management/change-role/index.vue
@@ -1,34 +1,19 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :before-close="handleClose"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('file.setRole')" :resource="name" :back="handleClose" />
-        </template>
-
-        <el-row>
-            <el-col :span="22" :offset="1">
-                <FileRole v-loading="loading" :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
-                <el-form-item v-if="form.isDir">
-                    <el-checkbox v-model="form.sub">{{ $t('file.containSub') }}</el-checkbox>
-                </el-form-item>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="$t('file.setRole')" :back="handleClose" :resource="name" size="large">
+        <FileRole v-loading="loading" :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
+        <el-form-item v-if="form.isDir">
+            <el-checkbox v-model="form.sub">{{ $t('file.containSub') }}</el-checkbox>
+        </el-form-item>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit()">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { ref } from 'vue';
 import { File } from '@/api/interface/file';
 import { ChangeFileMode } from '@/api/modules/files';
diff --git a/frontend/src/views/host/file-management/chown/index.vue b/frontend/src/views/host/file-management/chown/index.vue
index 0cc8027a6..9427d306e 100644
--- a/frontend/src/views/host/file-management/chown/index.vue
+++ b/frontend/src/views/host/file-management/chown/index.vue
@@ -1,38 +1,31 @@
 <template>
-    <el-drawer v-model="open" size="40%" :close-on-click-modal="false" :close-on-press-escape="false">
-        <template #header>
-            <DrawerHeader :header="$t('file.changeOwner')" :resource="name" :back="handleClose" />
-        </template>
-        <el-row>
-            <el-col :span="22" :offset="1">
-                <el-alert :title="$t('file.ownerHelper')" type="info" :closable="false" class="common-prompt" />
-                <el-form
-                    ref="fileForm"
-                    label-position="top"
-                    :model="addForm"
-                    label-width="100px"
-                    :rules="rules"
-                    v-loading="loading"
-                >
-                    <el-form-item :label="$t('commons.table.user')" prop="user">
-                        <el-input v-model.trim="addForm.user" />
-                    </el-form-item>
-                    <el-form-item :label="$t('file.group')" prop="group">
-                        <el-input v-model.trim="addForm.group" />
-                    </el-form-item>
-                    <el-form-item v-if="isDir">
-                        <el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="$t('file.setRole')" :back="handleClose" :resource="name" size="normal">
+        <el-alert :title="$t('file.ownerHelper')" type="info" :closable="false" class="common-prompt" />
+        <el-form
+            ref="fileForm"
+            label-position="top"
+            :model="addForm"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('commons.table.user')" prop="user">
+                <el-input v-model.trim="addForm.user" />
+            </el-form-item>
+            <el-form-item :label="$t('file.group')" prop="group">
+                <el-input v-model.trim="addForm.group" />
+            </el-form-item>
+            <el-form-item v-if="isDir">
+                <el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -42,7 +35,6 @@ import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 interface OwnerProps {
     path: string;
diff --git a/frontend/src/views/host/file-management/compress/index.vue b/frontend/src/views/host/file-management/compress/index.vue
index d8466e091..ca6768c21 100644
--- a/frontend/src/views/host/file-management/compress/index.vue
+++ b/frontend/src/views/host/file-management/compress/index.vue
@@ -1,58 +1,44 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :before-close="handleClose"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="title" :back="handleClose" />
-        </template>
-        <el-row>
-            <el-col :span="22" :offset="1">
-                <el-form
-                    ref="fileForm"
-                    label-position="top"
-                    :model="form"
-                    label-width="100px"
-                    :rules="rules"
-                    v-loading="loading"
-                >
-                    <el-form-item :label="$t('file.compressType')" prop="type">
-                        <el-select v-model="form.type">
-                            <el-option v-for="item in options" :key="item" :label="item" :value="item" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input v-model="form.name">
-                            <template #append>{{ extension }}</template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('file.compressDst')" prop="dst">
-                        <el-input v-model="form.dst">
-                            <template #prepend>
-                                <FileList :path="form.dst" @choose="getLinkPath" :dir="true"></FileList>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('setting.compressPassword')" prop="secret" v-if="form.type === 'tar.gz'">
-                        <el-input v-model="form.secret"></el-input>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-checkbox v-model="form.replace" :label="$t('file.replace')"></el-checkbox>
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="title" :back="handleClose" size="large">
+        <el-form
+            ref="fileForm"
+            label-position="top"
+            :model="form"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('file.compressType')" prop="type">
+                <el-select v-model="form.type">
+                    <el-option v-for="item in options" :key="item" :label="item" :value="item" />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-model="form.name">
+                    <template #append>{{ extension }}</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('file.compressDst')" prop="dst">
+                <el-input v-model="form.dst">
+                    <template #prepend>
+                        <FileList :path="form.dst" @choose="getLinkPath" :dir="true"></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('setting.compressPassword')" prop="secret" v-if="form.type === 'tar.gz'">
+                <el-input v-model="form.secret"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-checkbox v-model="form.replace" :label="$t('file.replace')"></el-checkbox>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
@@ -64,7 +50,6 @@ import { Rules } from '@/global/form-rules';
 import { CompressExtension, CompressType } from '@/enums/files';
 import { CompressFile } from '@/api/modules/files';
 import FileList from '@/components/file-list/index.vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
 interface CompressProps {
diff --git a/frontend/src/views/host/file-management/create/index.vue b/frontend/src/views/host/file-management/create/index.vue
index a41ed3db1..e8fda59f9 100644
--- a/frontend/src/views/host/file-management/create/index.vue
+++ b/frontend/src/views/host/file-management/create/index.vue
@@ -1,65 +1,48 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :before-close="handleClose"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="40%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('commons.button.create')" :back="handleClose" />
-        </template>
-
-        <el-row>
-            <el-col :span="22" :offset="1">
-                <el-form
-                    ref="fileForm"
-                    label-position="top"
-                    :model="addForm"
-                    label-width="100px"
-                    :rules="rules"
-                    v-loading="loading"
-                    @submit.enter.prevent
-                >
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input v-model.trim="addForm.name" />
-                    </el-form-item>
-                    <el-form-item v-if="!addForm.isDir">
-                        <el-checkbox v-model="addForm.isLink" :label="$t('file.link')"></el-checkbox>
-                    </el-form-item>
-                    <el-form-item :label="$t('file.linkType')" v-if="addForm.isLink" prop="linkType">
-                        <el-radio-group v-model="addForm.isSymlink">
-                            <el-radio :value="true">{{ $t('file.softLink') }}</el-radio>
-                            <el-radio :value="false">{{ $t('file.hardLink') }}</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item v-if="addForm.isLink" :label="$t('file.linkPath')" prop="linkPath">
-                        <el-input v-model="addForm.linkPath">
-                            <template #prepend>
-                                <FileList @choose="getLinkPath"></FileList>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
-                    </el-form-item>
-                </el-form>
-                <FileRole v-if="setRole" :mode="'0755'" @get-mode="getMode" :key="open.toString()"></FileRole>
-            </el-col>
-        </el-row>
-
+    <DrawerPro v-model="open" :header="$t('commons.button.create')" :back="handleClose" size="normal">
+        <el-form
+            ref="fileForm"
+            label-position="top"
+            :model="addForm"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
+            @submit.enter.prevent
+        >
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-model.trim="addForm.name" />
+            </el-form-item>
+            <el-form-item v-if="!addForm.isDir">
+                <el-checkbox v-model="addForm.isLink" :label="$t('file.link')"></el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('file.linkType')" v-if="addForm.isLink" prop="linkType">
+                <el-radio-group v-model="addForm.isSymlink">
+                    <el-radio :value="true">{{ $t('file.softLink') }}</el-radio>
+                    <el-radio :value="false">{{ $t('file.hardLink') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="addForm.isLink" :label="$t('file.linkPath')" prop="linkPath">
+                <el-input v-model="addForm.linkPath">
+                    <template #prepend>
+                        <FileList @choose="getLinkPath"></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
+            </el-form-item>
+        </el-form>
+        <FileRole v-if="setRole" :mode="'0755'" @get-mode="getMode" :key="open.toString()"></FileRole>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { ref, reactive, computed } from 'vue';
 import { File } from '@/api/interface/file';
 import { FormInstance, FormRules } from 'element-plus';
diff --git a/frontend/src/views/host/file-management/decompress/index.vue b/frontend/src/views/host/file-management/decompress/index.vue
index 2a921beb0..359996bba 100644
--- a/frontend/src/views/host/file-management/decompress/index.vue
+++ b/frontend/src/views/host/file-management/decompress/index.vue
@@ -1,48 +1,34 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :before-close="handleClose"
-        size="40%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('file.deCompress')" :resource="name" :back="handleClose" />
-        </template>
-        <el-row>
-            <el-col :span="22" :offset="1">
-                <el-form
-                    ref="fileForm"
-                    label-position="top"
-                    :model="form"
-                    label-width="100px"
-                    :rules="rules"
-                    v-loading="loading"
-                >
-                    <el-form-item :label="$t('commons.table.name')">
-                        <el-input v-model="name" disabled></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('file.deCompressDst')" prop="dst">
-                        <el-input v-model="form.dst">
-                            <template #prepend>
-                                <FileList :path="form.dst" @choose="getLinkPath" :dir="true"></FileList>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('setting.compressPassword')" prop="secret" v-if="name.includes('tar.gz')">
-                        <el-input v-model="form.secret"></el-input>
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="$t('file.deCompress')" :resource="name" :back="handleClose" size="normal">
+        <el-form
+            ref="fileForm"
+            label-position="top"
+            :model="form"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('commons.table.name')">
+                <el-input v-model="name" disabled></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('file.deCompressDst')" prop="dst">
+                <el-input v-model="form.dst">
+                    <template #prepend>
+                        <FileList :path="form.dst" @choose="getLinkPath" :dir="true"></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('setting.compressPassword')" prop="secret" v-if="name.includes('tar.gz')">
+                <el-input v-model="form.secret"></el-input>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
@@ -54,7 +40,6 @@ import { Rules } from '@/global/form-rules';
 import { DeCompressFile } from '@/api/modules/files';
 import { Mimetypes } from '@/global/mimetype';
 import FileList from '@/components/file-list/index.vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
 interface CompressProps {
diff --git a/frontend/src/views/host/file-management/detail/index.vue b/frontend/src/views/host/file-management/detail/index.vue
index 1b61f8e0b..e75dc82fb 100644
--- a/frontend/src/views/host/file-management/detail/index.vue
+++ b/frontend/src/views/host/file-management/detail/index.vue
@@ -1,35 +1,28 @@
 <template>
-    <el-drawer v-model="open" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
-        <template #header>
-            <DrawerHeader :header="$t('file.info')" :back="handleClose" />
-        </template>
-        <el-row>
-            <el-col>
-                <el-descriptions :column="1" border>
-                    <el-descriptions-item :label="$t('file.fileName')">{{ data.name }}</el-descriptions-item>
-                    <el-descriptions-item :label="$t('commons.table.type')">{{ data.type }}</el-descriptions-item>
-                    <el-descriptions-item :label="$t('file.path')">{{ data.path }}</el-descriptions-item>
-                    <el-descriptions-item :label="$t('file.size')">
-                        <span v-if="data.isDir">
-                            <el-button type="primary" link small @click="getDirSize(data)" :loading="loading">
-                                <span v-if="data.dirSize == undefined">
-                                    {{ $t('file.calculate') }}
-                                </span>
-                                <span v-else>{{ computeSize(data.dirSize) }}</span>
-                            </el-button>
+    <DrawerPro v-model="open" :header="$t('file.info')" :back="handleClose" size="large">
+        <el-descriptions :column="1" border>
+            <el-descriptions-item :label="$t('file.fileName')">{{ data.name }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('commons.table.type')">{{ data.type }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('file.path')">{{ data.path }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('file.size')">
+                <span v-if="data.isDir">
+                    <el-button type="primary" link small @click="getDirSize(data)">
+                        <span v-if="data.dirSize == undefined">
+                            {{ $t('file.calculate') }}
                         </span>
-                        <span v-else>{{ computeSize(data.size) }}</span>
-                    </el-descriptions-item>
-                    <el-descriptions-item :label="$t('file.role')">{{ data.mode }}</el-descriptions-item>
-                    <el-descriptions-item :label="$t('commons.table.user')">{{ data.user }}</el-descriptions-item>
-                    <el-descriptions-item :label="$t('file.group')">{{ data.group }}</el-descriptions-item>
-                    <el-descriptions-item :label="$t('commons.table.updatedAt')">
-                        {{ dateFormatSimple(data.modTime) }}
-                    </el-descriptions-item>
-                </el-descriptions>
-            </el-col>
-        </el-row>
-    </el-drawer>
+                        <span v-else>{{ computeSize(data.dirSize) }}</span>
+                    </el-button>
+                </span>
+                <span v-else>{{ computeSize(data.size) }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('file.role')">{{ data.mode }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('commons.table.user')">{{ data.user }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('file.group')">{{ data.group }}</el-descriptions-item>
+            <el-descriptions-item :label="$t('commons.table.updatedAt')">
+                {{ dateFormatSimple(data.modTime) }}
+            </el-descriptions-item>
+        </el-descriptions>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -37,7 +30,6 @@ import { ComputeDirSize, GetFileContent } from '@/api/modules/files';
 import { computeSize } from '@/utils/util';
 import { ref } from 'vue';
 import { dateFormatSimple } from '@/utils/util';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 interface InfoProps {
     path: string;
diff --git a/frontend/src/views/host/file-management/download/index.vue b/frontend/src/views/host/file-management/download/index.vue
index 680c66be8..f0fd2ddde 100644
--- a/frontend/src/views/host/file-management/download/index.vue
+++ b/frontend/src/views/host/file-management/download/index.vue
@@ -1,31 +1,16 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :title="$t('file.download')"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :before-close="handleClose"
-        size="40%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('file.download')" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="open" :header="$t('file.download')" :back="handleClose" size="normal">
         <el-form ref="fileForm" label-position="top" :model="addForm" :rules="rules" v-loading="loading">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('file.compressType')" prop="type">
-                        <el-select v-model="addForm.type">
-                            <el-option v-for="item in options" :key="item" :label="item" :value="item" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input v-model="addForm.name">
-                            <template #append>{{ extension }}</template>
-                        </el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item :label="$t('file.compressType')" prop="type">
+                <el-select v-model="addForm.type">
+                    <el-option v-for="item in options" :key="item" :label="item" :value="item" />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-model="addForm.name">
+                    <template #append>{{ extension }}</template>
+                </el-input>
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -33,7 +18,7 @@
                 <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
@@ -43,7 +28,6 @@ import { computed, reactive, ref } from 'vue';
 import { DownloadFile } from '@/api/modules/files';
 import { File } from '@/api/interface/file';
 import { Rules } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 interface DownloadProps {
     paths: Array<string>;
diff --git a/frontend/src/views/host/file-management/favorite/index.vue b/frontend/src/views/host/file-management/favorite/index.vue
index e765a35c4..733c6d5d5 100644
--- a/frontend/src/views/host/file-management/favorite/index.vue
+++ b/frontend/src/views/host/file-management/favorite/index.vue
@@ -1,19 +1,12 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :before-close="handleClose"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('file.favorite')" :back="handleClose" />
+    <DrawerPro v-model="open" :header="$t('file.favorite')" :back="handleClose" size="large">
+        <template #content>
+            <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
+                <el-table-column :label="$t('file.path')" show-overflow-tooltip prop="path"></el-table-column>
+                <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
+            </ComplexTable>
         </template>
-        <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
-            <el-table-column :label="$t('file.path')" show-overflow-tooltip prop="path"></el-table-column>
-            <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
-        </ComplexTable>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 07687a5c6..0375b6b68 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -138,7 +138,7 @@
                         </el-table>
                     </div>
                 </el-popover>
-                <el-button class="btn mr-5" @click="openRecycleBin">
+                <el-button class="btn mr-2.5" @click="openRecycleBin">
                     {{ $t('file.recycleBin') }}
                 </el-button>
                 <div class="w-96">
diff --git a/frontend/src/views/host/file-management/move/index.vue b/frontend/src/views/host/file-management/move/index.vue
index 6804a6716..9a21ef011 100644
--- a/frontend/src/views/host/file-management/move/index.vue
+++ b/frontend/src/views/host/file-management/move/index.vue
@@ -1,41 +1,28 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="40%"
-    >
-        <template #header>
-            <DrawerHeader :header="title" :back="handleClose" />
-        </template>
-        <el-row>
-            <el-col :span="22" :offset="1">
-                <el-form
-                    @submit.prevent
-                    ref="fileForm"
-                    label-position="top"
-                    :model="addForm"
-                    :rules="rules"
-                    v-loading="loading"
-                >
-                    <el-form-item :label="$t('file.path')" prop="newPath">
-                        <el-input v-model="addForm.newPath">
-                            <template #prepend><FileList @choose="getPath" :dir="true"></FileList></template>
-                        </el-input>
-                    </el-form-item>
-                    <div v-if="changeName">
-                        <el-form-item :label="$t('commons.table.name')" prop="name">
-                            <el-input v-model="addForm.name" :disabled="addForm.cover"></el-input>
-                        </el-form-item>
-                        <el-radio-group v-model="addForm.cover" @change="changeType">
-                            <el-radio :value="true" size="large">{{ $t('file.replace') }}</el-radio>
-                            <el-radio :value="false" size="large">{{ $t('file.rename') }}</el-radio>
-                        </el-radio-group>
-                    </div>
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="title" :back="handleClose" size="normal">
+        <el-form
+            @submit.prevent
+            ref="fileForm"
+            label-position="top"
+            :model="addForm"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('file.path')" prop="newPath">
+                <el-input v-model="addForm.newPath">
+                    <template #prepend><FileList @choose="getPath" :dir="true"></FileList></template>
+                </el-input>
+            </el-form-item>
+            <div v-if="changeName">
+                <el-form-item :label="$t('commons.table.name')" prop="name">
+                    <el-input v-model="addForm.name" :disabled="addForm.cover"></el-input>
+                </el-form-item>
+                <el-radio-group v-model="addForm.cover" @change="changeType">
+                    <el-radio :value="true" size="large">{{ $t('file.replace') }}</el-radio>
+                    <el-radio :value="false" size="large">{{ $t('file.rename') }}</el-radio>
+                </el-radio-group>
+            </div>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose(false)" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -44,7 +31,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -54,7 +41,6 @@ import i18n from '@/lang';
 import { FormInstance, FormRules } from 'element-plus';
 import { ref, reactive, computed } from 'vue';
 import FileList from '@/components/file-list/index.vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { getDateStr } from '@/utils/util';
 
diff --git a/frontend/src/views/host/file-management/recycle-bin/index.vue b/frontend/src/views/host/file-management/recycle-bin/index.vue
index 868db749a..aaf8139b0 100644
--- a/frontend/src/views/host/file-management/recycle-bin/index.vue
+++ b/frontend/src/views/host/file-management/recycle-bin/index.vue
@@ -1,63 +1,60 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :before-close="handleClose"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('file.recycleBin')" :back="handleClose" />
-        </template>
-        <div class="flex space-x-4">
-            <el-button @click="clear" type="primary" :disabled="data == null || data.length == 0">
-                {{ $t('file.clearRecycleBin') }}
-            </el-button>
-            <el-button @click="patchDelete" :disabled="data == null || selects.length == 0">
-                {{ $t('commons.button.delete') }}
-            </el-button>
-            <el-button @click="patchReduce" :disabled="data == null || selects.length == 0">
-                {{ $t('file.reduce') }}
-            </el-button>
-            <el-form-item :label="$t('file.fileRecycleBin')">
-                <el-switch v-model="status" active-value="enable" inactive-value="disable" @change="changeStatus" />
-            </el-form-item>
-        </div>
-        <ComplexTable
-            :pagination-config="paginationConfig"
-            v-model:selects="selects"
-            :data="data"
-            @search="search"
-            class="mt-5"
-        >
-            <el-table-column type="selection" fix />
-            <el-table-column prop="name" :label="$t('commons.table.name')" show-overflow-tooltip>
-                <template #default="{ row }">
-                    <span class="text-ellipsis" type="primary">
-                        <svg-icon v-if="row.isDir" className="table-icon" iconName="p-file-folder"></svg-icon>
-                        <svg-icon v-else className="table-icon" iconName="p-file-normal"></svg-icon>
-                        {{ row.name }}
-                    </span>
-                </template>
-            </el-table-column>
+    <DrawerPro v-model="open" :header="$t('file.recycleBin')" :back="handleClose" size="large">
+        <template #content>
+            <div class="flex space-x-4">
+                <el-button @click="clear" type="primary" :disabled="data == null || data.length == 0">
+                    {{ $t('file.clearRecycleBin') }}
+                </el-button>
+                <el-button @click="patchDelete" :disabled="data == null || selects.length == 0">
+                    {{ $t('commons.button.delete') }}
+                </el-button>
+                <el-button @click="patchReduce" :disabled="data == null || selects.length == 0">
+                    {{ $t('file.reduce') }}
+                </el-button>
+                <el-form-item :label="$t('file.fileRecycleBin')">
+                    <el-switch v-model="status" active-value="enable" inactive-value="disable" @change="changeStatus" />
+                </el-form-item>
+            </div>
+            <ComplexTable
+                :pagination-config="paginationConfig"
+                v-model:selects="selects"
+                :data="data"
+                @search="search"
+                class="mt-5"
+            >
+                <el-table-column type="selection" fix />
+                <el-table-column prop="name" :label="$t('commons.table.name')" show-overflow-tooltip>
+                    <template #default="{ row }">
+                        <span class="text-ellipsis" type="primary">
+                            <svg-icon v-if="row.isDir" className="table-icon" iconName="p-file-folder"></svg-icon>
+                            <svg-icon v-else className="table-icon" iconName="p-file-normal"></svg-icon>
+                            {{ row.name }}
+                        </span>
+                    </template>
+                </el-table-column>
 
-            <el-table-column :label="$t('file.sourcePath')" show-overflow-tooltip prop="sourcePath"></el-table-column>
-            <el-table-column :label="$t('file.size')" prop="size" max-width="50">
-                <template #default="{ row }">
-                    {{ getFileSize(row.size) }}
-                </template>
-            </el-table-column>
-            <el-table-column
-                :label="$t('file.deleteTime')"
-                prop="deleteTime"
-                :formatter="dateFormat"
-                show-overflow-tooltip
-            ></el-table-column>
-            <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
-        </ComplexTable>
-        <Delete ref="deleteRef" @close="search" />
-        <Reduce ref="reduceRef" @close="search" />
-    </el-drawer>
+                <el-table-column
+                    :label="$t('file.sourcePath')"
+                    show-overflow-tooltip
+                    prop="sourcePath"
+                ></el-table-column>
+                <el-table-column :label="$t('file.size')" prop="size" max-width="50">
+                    <template #default="{ row }">
+                        {{ getFileSize(row.size) }}
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    :label="$t('file.deleteTime')"
+                    prop="deleteTime"
+                    :formatter="dateFormat"
+                    show-overflow-tooltip
+                ></el-table-column>
+                <fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
+            </ComplexTable>
+            <Delete ref="deleteRef" @close="search" />
+            <Reduce ref="reduceRef" @close="search" />
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/host/file-management/rename/index.vue b/frontend/src/views/host/file-management/rename/index.vue
index 657dc4497..f371cbd15 100644
--- a/frontend/src/views/host/file-management/rename/index.vue
+++ b/frontend/src/views/host/file-management/rename/index.vue
@@ -1,34 +1,27 @@
 <template>
-    <el-drawer v-model="open" size="40%" :close-on-click-modal="false" :close-on-press-escape="false">
-        <template #header>
-            <DrawerHeader :header="$t('file.rename')" :resource="oldName" :back="handleClose" />
-        </template>
-        <el-row>
-            <el-col :span="22" :offset="1">
-                <el-form
-                    ref="fileForm"
-                    label-position="top"
-                    :model="addForm"
-                    label-width="100px"
-                    :rules="rules"
-                    v-loading="loading"
-                >
-                    <el-form-item :label="$t('file.path')" prop="path">
-                        <el-input v-model="addForm.path" disabled />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.name')" prop="newName">
-                        <el-input v-model.trim="addForm.newName" />
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="$t('file.rename')" :resource="oldName" :back="handleClose" size="normal">
+        <el-form
+            ref="fileForm"
+            label-position="top"
+            :model="addForm"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('file.path')" prop="path">
+                <el-input v-model="addForm.path" disabled />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.name')" prop="newName">
+                <el-input v-model.trim="addForm.newName" />
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
                 <el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -39,7 +32,6 @@ import { reactive, ref } from 'vue';
 import { File } from '@/api/interface/file';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 interface RenameProps {
     path: string;
diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue
index a1ee33c50..2e6e55e2a 100644
--- a/frontend/src/views/host/file-management/upload/index.vue
+++ b/frontend/src/views/host/file-management/upload/index.vue
@@ -1,82 +1,87 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :before-close="handleClose"
-        size="40%"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('file.upload')" :back="handleClose" />
-        </template>
-        <div class="button-container">
-            <div>
-                <el-button type="primary" @click="upload('file')">
-                    {{ $t('file.upload') }}{{ $t('file.file') }}
-                </el-button>
-                <el-button type="primary" @click="upload('dir')">{{ $t('file.upload') }}{{ $t('file.dir') }}</el-button>
+    <DrawerPro v-model="open" :header="$t('file.upload')" :back="handleClose" size="normal">
+        <template #content>
+            <div class="button-container">
+                <div>
+                    <el-button type="primary" @click="upload('file')">
+                        {{ $t('file.upload') }}{{ $t('file.file') }}
+                    </el-button>
+                    <el-button type="primary" @click="upload('dir')">
+                        {{ $t('file.upload') }}{{ $t('file.dir') }}
+                    </el-button>
+                </div>
+                <el-button @click="clearFiles">{{ $t('file.clearList') }}</el-button>
             </div>
-            <el-button @click="clearFiles">{{ $t('file.clearList') }}</el-button>
-        </div>
 
-        <div>
-            <div class="el-upload-dragger" @dragover="handleDragover" @drop="handleDrop" @dragleave="handleDragleave">
-                <div class="flex items-center justify-center h-52">
-                    <div>
-                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-                        <div class="el-upload__text">
-                            {{ $t('file.dropHelper') }}
+            <div>
+                <div
+                    class="el-upload-dragger"
+                    @dragover="handleDragover"
+                    @drop="handleDrop"
+                    @dragleave="handleDragleave"
+                >
+                    <div class="flex items-center justify-center h-52">
+                        <div>
+                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                            <div class="el-upload__text">
+                                {{ $t('file.dropHelper') }}
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <el-upload
-            action="#"
-            :auto-upload="false"
-            ref="uploadRef"
-            :on-change="fileOnChange"
-            :on-exceed="handleExceed"
-            :on-success="handleSuccess"
-            :show-file-list="false"
-            multiple
-            v-model:file-list="uploaderFiles"
-            :limit="1000"
-        >
-            <template #tip>
-                <el-text>{{ uploadHelper }}</el-text>
-                <el-progress v-if="loading" text-inside :stroke-width="20" :percentage="uploadPercent"></el-progress>
-            </template>
-        </el-upload>
-
-        <div>
-            <p
-                v-for="(item, index) in uploaderFiles"
-                :key="index"
-                class="file-item"
-                @mouseover="hoverIndex = index"
-                @mouseout="hoverIndex = null"
+            <el-upload
+                action="#"
+                :auto-upload="false"
+                ref="uploadRef"
+                :on-change="fileOnChange"
+                :on-exceed="handleExceed"
+                :on-success="handleSuccess"
+                :show-file-list="false"
+                multiple
+                v-model:file-list="uploaderFiles"
+                :limit="1000"
             >
-                <el-icon class="file-icon"><Document /></el-icon>
-                <span v-if="item.raw.webkitRelativePath != ''">{{ item.raw.webkitRelativePath }}</span>
-                <span v-else>{{ item.name }}</span>
-                <span v-if="item.status === 'success'" class="success-icon">
-                    <el-icon><Select /></el-icon>
-                </span>
-                <span v-else>
-                    <el-button
-                        class="delete-button"
-                        type="primary"
-                        link
-                        @click="removeFile(index)"
-                        :disabled="loading"
-                        :icon="Close"
-                    ></el-button>
-                </span>
-            </p>
-        </div>
+                <template #tip>
+                    <el-text>{{ uploadHelper }}</el-text>
+                    <el-progress
+                        v-if="loading"
+                        text-inside
+                        :stroke-width="20"
+                        :percentage="uploadPercent"
+                    ></el-progress>
+                </template>
+            </el-upload>
+
+            <div>
+                <p
+                    v-for="(item, index) in uploaderFiles"
+                    :key="index"
+                    class="file-item"
+                    @mouseover="hoverIndex = index"
+                    @mouseout="hoverIndex = null"
+                >
+                    <el-icon class="file-icon"><Document /></el-icon>
+                    <span v-if="item.raw.webkitRelativePath != ''">{{ item.raw.webkitRelativePath }}</span>
+                    <span v-else>{{ item.name }}</span>
+                    <span v-if="item.status === 'success'" class="success-icon">
+                        <el-icon><Select /></el-icon>
+                    </span>
+                    <span v-else>
+                        <el-button
+                            class="delete-button"
+                            type="primary"
+                            link
+                            @click="removeFile(index)"
+                            :disabled="loading"
+                            :icon="Close"
+                        ></el-button>
+                    </span>
+                </p>
+            </div>
+        </template>
+
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -85,7 +90,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
@@ -93,7 +98,6 @@ import { nextTick, reactive, ref } from 'vue';
 import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
 import { ChunkUploadFileData, UploadFileData } from '@/api/modules/files';
 import i18n from '@/lang';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message';
 import { Close, Document, UploadFilled } from '@element-plus/icons-vue';
 import { TimeoutEnum } from '@/enums/http-enum';
diff --git a/frontend/src/views/host/file-management/wget/index.vue b/frontend/src/views/host/file-management/wget/index.vue
index 81f7c504e..c805d3220 100644
--- a/frontend/src/views/host/file-management/wget/index.vue
+++ b/frontend/src/views/host/file-management/wget/index.vue
@@ -1,45 +1,31 @@
 <template>
-    <el-drawer
-        v-model="open"
-        :destroy-on-close="true"
-        :before-close="handleClose"
-        size="50%"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('file.download')" :back="handleClose" />
-        </template>
-        <el-row>
-            <el-col :span="22" :offset="1">
-                <el-form
-                    ref="fileForm"
-                    label-position="top"
-                    :model="addForm"
-                    label-width="100px"
-                    :rules="rules"
-                    v-loading="loading"
-                >
-                    <el-form-item :label="$t('file.downloadUrl')" prop="url">
-                        <el-input v-model="addForm.url" @input="getFileName" />
-                    </el-form-item>
-                    <el-form-item :label="$t('file.path')" prop="path">
-                        <el-input v-model="addForm.path">
-                            <template #prepend><FileList :path="addForm.path" @choose="getPath"></FileList></template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input v-model="addForm.name"></el-input>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-checkbox v-model="addForm.ignoreCertificate">
-                            {{ $t('file.ignoreCertificate') }}
-                        </el-checkbox>
-                        <span class="input-help">{{ $t('file.ignoreCertificateHelper') }}</span>
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="$t('file.download')" :back="handleClose" size="large">
+        <el-form
+            ref="fileForm"
+            label-position="top"
+            :model="addForm"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('file.downloadUrl')" prop="url">
+                <el-input v-model="addForm.url" @input="getFileName" />
+            </el-form-item>
+            <el-form-item :label="$t('file.path')" prop="path">
+                <el-input v-model="addForm.path">
+                    <template #prepend><FileList :path="addForm.path" @choose="getPath"></FileList></template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-model="addForm.name"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-checkbox v-model="addForm.ignoreCertificate">
+                    {{ $t('file.ignoreCertificate') }}
+                </el-checkbox>
+                <span class="input-help">{{ $t('file.ignoreCertificateHelper') }}</span>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose()" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -48,7 +34,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -58,7 +44,6 @@ import i18n from '@/lang';
 import { FormInstance, FormRules } from 'element-plus';
 import { reactive, ref } from 'vue';
 import FileList from '@/components/file-list/index.vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 
 interface WgetProps {
diff --git a/frontend/src/views/host/firewall/forward/operate/index.vue b/frontend/src/views/host/firewall/forward/operate/index.vue
index ec982f9f6..79d971aae 100644
--- a/frontend/src/views/host/firewall/forward/operate/index.vue
+++ b/frontend/src/views/host/firewall/forward/operate/index.vue
@@ -1,44 +1,29 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="title" :back="handleClose" />
-        </template>
-        <div v-loading="loading">
-            <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.protocol')" prop="protocol">
-                            <el-select style="width: 100%" v-model="dialogData.rowData!.protocol">
-                                <el-option value="tcp" label="tcp" />
-                                <el-option value="udp" label="udp" />
-                                <el-option value="tcp/udp" label="tcp/udp" />
-                            </el-select>
-                        </el-form-item>
+    <DrawerPro v-model="drawerVisible" :header="title" :back="handleClose" size="large">
+        <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('commons.table.protocol')" prop="protocol">
+                <el-select class="w-full" v-model="dialogData.rowData!.protocol">
+                    <el-option value="tcp" label="tcp" />
+                    <el-option value="udp" label="udp" />
+                    <el-option value="tcp/udp" label="tcp/udp" />
+                </el-select>
+            </el-form-item>
 
-                        <el-form-item :label="$t('firewall.sourcePort')" prop="port">
-                            <el-input clearable v-model.trim="dialogData.rowData!.port" />
-                        </el-form-item>
+            <el-form-item :label="$t('firewall.sourcePort')" prop="port">
+                <el-input clearable v-model.trim="dialogData.rowData!.port" />
+            </el-form-item>
 
-                        <el-form-item :label="$t('firewall.targetIP')" prop="targetIP">
-                            <el-input v-model.trim="dialogData.rowData!.targetIP" />
-                            <span class="input-help">{{ $t('firewall.forwardHelper1') }}</span>
-                            <span class="input-help">{{ $t('firewall.forwardHelper2') }}</span>
-                            <span class="input-help">{{ $t('firewall.forwardHelper3') }}</span>
-                        </el-form-item>
+            <el-form-item :label="$t('firewall.targetIP')" prop="targetIP">
+                <el-input v-model.trim="dialogData.rowData!.targetIP" />
+                <span class="input-help">{{ $t('firewall.forwardHelper1') }}</span>
+                <span class="input-help">{{ $t('firewall.forwardHelper2') }}</span>
+                <span class="input-help">{{ $t('firewall.forwardHelper3') }}</span>
+            </el-form-item>
 
-                        <el-form-item :label="$t('firewall.targetPort')" prop="targetPort">
-                            <el-input clearable v-model.trim="dialogData.rowData!.targetPort" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </div>
+            <el-form-item :label="$t('firewall.targetPort')" prop="targetPort">
+                <el-input clearable v-model.trim="dialogData.rowData!.targetPort" />
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@@ -47,7 +32,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/host/firewall/ip/operate/index.vue b/frontend/src/views/host/firewall/ip/operate/index.vue
index 163985a45..679221ef4 100644
--- a/frontend/src/views/host/firewall/ip/operate/index.vue
+++ b/frontend/src/views/host/firewall/ip/operate/index.vue
@@ -1,42 +1,34 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="title" :back="handleClose" />
-        </template>
-        <div v-loading="loading">
-            <el-form ref="formRef" label-position="top" @submit.prevent :model="dialogData.rowData" :rules="rules">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('firewall.address')" prop="address">
-                            <el-input
-                                :disabled="dialogData.title === 'edit'"
-                                :rows="3"
-                                type="textarea"
-                                clearable
-                                v-model.trim="dialogData.rowData!.address"
-                            />
-                            <span class="input-help">{{ $t('firewall.addressHelper1') }}</span>
-                            <span class="input-help">{{ $t('firewall.addressHelper2') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('firewall.strategy')" prop="strategy">
-                            <el-radio-group v-model="dialogData.rowData!.strategy">
-                                <el-radio value="accept">{{ $t('firewall.allow') }}</el-radio>
-                                <el-radio value="drop">{{ $t('firewall.deny') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.description')" prop="description">
-                            <el-input clearable v-model.trim="dialogData.rowData!.description" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </div>
+    <DrawerPro v-model="drawerVisible" :header="title" :back="handleClose" size="large">
+        <el-form
+            ref="formRef"
+            label-position="top"
+            @submit.prevent
+            :model="dialogData.rowData"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('firewall.address')" prop="address">
+                <el-input
+                    :disabled="dialogData.title === 'edit'"
+                    :rows="3"
+                    type="textarea"
+                    clearable
+                    v-model.trim="dialogData.rowData!.address"
+                />
+                <span class="input-help">{{ $t('firewall.addressHelper1') }}</span>
+                <span class="input-help">{{ $t('firewall.addressHelper2') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('firewall.strategy')" prop="strategy">
+                <el-radio-group v-model="dialogData.rowData!.strategy">
+                    <el-radio value="accept">{{ $t('firewall.allow') }}</el-radio>
+                    <el-radio value="drop">{{ $t('firewall.deny') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input clearable v-model.trim="dialogData.rowData!.description" />
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@@ -45,14 +37,13 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { Host } from '@/api/interface/host';
 import { operateIPRule, updateAddrRule } from '@/api/modules/host';
diff --git a/frontend/src/views/host/firewall/port/operate/index.vue b/frontend/src/views/host/firewall/port/operate/index.vue
index 95b622c75..ec95a4c05 100644
--- a/frontend/src/views/host/firewall/port/operate/index.vue
+++ b/frontend/src/views/host/firewall/port/operate/index.vue
@@ -1,66 +1,47 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="title" :back="handleClose" />
-        </template>
-        <div v-loading="loading">
-            <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.protocol')" prop="protocol">
-                            <el-select style="width: 100%" v-model="dialogData.rowData!.protocol">
-                                <el-option value="tcp" label="tcp" />
-                                <el-option value="udp" label="udp" />
-                                <el-option value="tcp/udp" label="tcp/udp" />
-                            </el-select>
-                        </el-form-item>
+    <DrawerPro v-model="drawerVisible" :header="title" :back="handleClose" size="large">
+        <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('commons.table.protocol')" prop="protocol">
+                <el-select class="w-full" v-model="dialogData.rowData!.protocol">
+                    <el-option value="tcp" label="tcp" />
+                    <el-option value="udp" label="udp" />
+                    <el-option value="tcp/udp" label="tcp/udp" />
+                </el-select>
+            </el-form-item>
 
-                        <el-form-item :label="$t('commons.table.port')" prop="port">
-                            <el-input
-                                :disabled="dialogData.title === 'edit'"
-                                clearable
-                                v-model.trim="dialogData.rowData!.port"
-                            />
-                            <span class="input-help">{{ $t('firewall.portHelper1') }}</span>
-                            <span class="input-help">{{ $t('firewall.portHelper2') }}</span>
-                        </el-form-item>
+            <el-form-item :label="$t('commons.table.port')" prop="port">
+                <el-input :disabled="dialogData.title === 'edit'" clearable v-model.trim="dialogData.rowData!.port" />
+                <span class="input-help">{{ $t('firewall.portHelper1') }}</span>
+                <span class="input-help">{{ $t('firewall.portHelper2') }}</span>
+            </el-form-item>
 
-                        <el-form-item :label="$t('firewall.source')" prop="source">
-                            <el-radio-group v-model="dialogData.rowData!.source">
-                                <el-radio value="anyWhere">{{ $t('firewall.anyWhere') }}</el-radio>
-                                <el-radio value="address">{{ $t('firewall.address') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
+            <el-form-item :label="$t('firewall.source')" prop="source">
+                <el-radio-group v-model="dialogData.rowData!.source">
+                    <el-radio value="anyWhere">{{ $t('firewall.anyWhere') }}</el-radio>
+                    <el-radio value="address">{{ $t('firewall.address') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
 
-                        <el-form-item
-                            :label="$t('firewall.address')"
-                            v-if="dialogData.rowData!.source === 'address'"
-                            prop="address"
-                        >
-                            <el-input v-model.trim="dialogData.rowData!.address" />
-                            <span class="input-help">{{ $t('firewall.addressHelper1') }}</span>
-                            <span class="input-help">{{ $t('firewall.addressHelper2') }}</span>
-                        </el-form-item>
+            <el-form-item
+                :label="$t('firewall.address')"
+                v-if="dialogData.rowData!.source === 'address'"
+                prop="address"
+            >
+                <el-input v-model.trim="dialogData.rowData!.address" />
+                <span class="input-help">{{ $t('firewall.addressHelper1') }}</span>
+                <span class="input-help">{{ $t('firewall.addressHelper2') }}</span>
+            </el-form-item>
 
-                        <el-form-item :label="$t('firewall.strategy')" prop="strategy">
-                            <el-radio-group v-model="dialogData.rowData!.strategy">
-                                <el-radio value="accept">{{ $t('firewall.accept') }}</el-radio>
-                                <el-radio value="drop">{{ $t('firewall.drop') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.description')" prop="description">
-                            <el-input clearable v-model.trim="dialogData.rowData!.description" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </div>
+            <el-form-item :label="$t('firewall.strategy')" prop="strategy">
+                <el-radio-group v-model="dialogData.rowData!.strategy">
+                    <el-radio value="accept">{{ $t('firewall.accept') }}</el-radio>
+                    <el-radio value="drop">{{ $t('firewall.drop') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input clearable v-model.trim="dialogData.rowData!.description" />
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@@ -69,7 +50,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -77,7 +58,6 @@ import { reactive, ref } from 'vue';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { Host } from '@/api/interface/host';
 import { operatePortRule, updatePortRule } from '@/api/modules/host';
diff --git a/frontend/src/views/host/monitor/setting/days/index.vue b/frontend/src/views/host/monitor/setting/days/index.vue
index cf01c7682..a4a6dae81 100644
--- a/frontend/src/views/host/monitor/setting/days/index.vue
+++ b/frontend/src/views/host/monitor/setting/days/index.vue
@@ -1,39 +1,19 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            @close="handleClose"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('monitor.storeDays')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('monitor.storeDays')"
-                            :rules="[Rules.integerNumber]"
-                            prop="monitorStoreDays"
-                        >
-                            <el-input clearable v-model.number="form.monitorStoreDays" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('monitor.storeDays')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('monitor.storeDays')" :rules="[Rules.integerNumber]" prop="monitorStoreDays">
+                <el-input clearable v-model.number="form.monitorStoreDays" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -42,7 +22,6 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateSetting } from '@/api/modules/setting';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
diff --git a/frontend/src/views/host/monitor/setting/interval/index.vue b/frontend/src/views/host/monitor/setting/interval/index.vue
index 3efece7ea..8b4f2cce1 100644
--- a/frontend/src/views/host/monitor/setting/interval/index.vue
+++ b/frontend/src/views/host/monitor/setting/interval/index.vue
@@ -1,39 +1,23 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            @close="handleClose"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('monitor.interval')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('monitor.interval')"
-                            :rules="[Rules.integerNumber, checkNumberRange(1, 60)]"
-                            prop="monitorInterval"
-                        >
-                            <el-input clearable v-model.number="form.monitorInterval" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('monitor.interval')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item
+                :label="$t('monitor.interval')"
+                :rules="[Rules.integerNumber, checkNumberRange(1, 60)]"
+                prop="monitorInterval"
+            >
+                <el-input clearable v-model.number="form.monitorInterval" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -42,7 +26,6 @@ import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { updateSetting } from '@/api/modules/setting';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
diff --git a/frontend/src/views/host/process/process/detail/index.vue b/frontend/src/views/host/process/process/detail/index.vue
index 1cc285e44..7487ddfa6 100644
--- a/frontend/src/views/host/process/process/detail/index.vue
+++ b/frontend/src/views/host/process/process/detail/index.vue
@@ -1,100 +1,94 @@
 <template>
-    <el-drawer v-model="open" size="40%" :close-on-click-modal="false" :close-on-press-escape="false">
-        <template #header>
-            <DrawerHeader :header="$t('app.detail')" :back="handleClose" :resource="resourceName" />
+    <DrawerPro v-model="open" :header="$t('app.detail')" :resource="resourceName" :back="handleClose" size="large">
+        <template #content>
+            <el-tabs v-model="activeName" type="card">
+                <el-tab-pane :label="$t('process.basic')" name="basic">
+                    <el-descriptions :column="2" border>
+                        <el-descriptions-item :label="$t('commons.table.name')" min-width="100px">
+                            {{ data.name }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('process.status')">{{ data.status }}</el-descriptions-item>
+                        <el-descriptions-item :label="$t('process.pid')">{{ data.PID }}</el-descriptions-item>
+                        <el-descriptions-item :label="$t('process.ppid')">{{ data.PPID }}</el-descriptions-item>
+                        <el-descriptions-item :label="$t('process.numThreads')">
+                            {{ data.numThreads }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('process.numConnections')">
+                            {{ data.numConnections }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('process.diskRead')">
+                            {{ data.diskRead }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('process.diskWrite')">
+                            {{ data.diskWrite }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('commons.table.user')">
+                            {{ data.username }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('process.startTime')">
+                            {{ data.startTime }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('process.cmdLine')">
+                            {{ data.cmdLine }}
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('process.mem')" name="mem">
+                    <el-descriptions :column="2" border>
+                        <el-descriptions-item :label="'rss'">{{ data.rss }}</el-descriptions-item>
+                        <el-descriptions-item :label="'swap'">{{ data.swap }}</el-descriptions-item>
+                        <el-descriptions-item :label="'vms'">{{ data.vms }}</el-descriptions-item>
+                        <el-descriptions-item :label="'hwm'">{{ data.hwm }}</el-descriptions-item>
+                        <el-descriptions-item :label="'data'">{{ data.data }}</el-descriptions-item>
+                        <el-descriptions-item :label="'stack'">{{ data.stack }}</el-descriptions-item>
+                        <el-descriptions-item :label="'locked'">{{ data.locked }}</el-descriptions-item>
+                    </el-descriptions>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('process.openFiles')" name="openFiles">
+                    <el-table :data="data.openFiles" border style="width: 100%">
+                        <el-table-column prop="path" :label="$t('process.file')" />
+                        <el-table-column prop="fd" label="fd" width="100px" />
+                    </el-table>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('process.env')" name="env">
+                    <codemirror
+                        :autofocus="true"
+                        :indent-with-tab="true"
+                        :tabSize="4"
+                        style="height: calc(100vh - 200px)"
+                        :lineWrapping="true"
+                        :matchBrackets="true"
+                        theme="cobalt"
+                        :styleActiveLine="true"
+                        :extensions="extensions"
+                        v-model="envStr"
+                        :disabled="true"
+                    />
+                </el-tab-pane>
+                <el-tab-pane :label="$t('process.net')" name="net">
+                    <el-table :data="data.connects" border style="width: 100%">
+                        <el-table-column prop="localaddr" :label="$t('process.laddr')">
+                            <template #default="{ row }">
+                                <span>{{ row.localaddr.ip }}</span>
+                                <span v-if="row.localaddr.port > 0">:{{ row.localaddr.port }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="remoteaddr" :label="$t('process.raddr')">
+                            <template #default="{ row }">
+                                <span>{{ row.remoteaddr.ip }}</span>
+                                <span v-if="row.remoteaddr.port > 0">:{{ row.remoteaddr.port }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="status" :label="$t('app.status')" />
+                    </el-table>
+                </el-tab-pane>
+            </el-tabs>
         </template>
-        <el-row>
-            <el-col>
-                <el-tabs v-model="activeName" type="card">
-                    <el-tab-pane :label="$t('process.basic')" name="basic">
-                        <el-descriptions :column="2" border>
-                            <el-descriptions-item :label="$t('commons.table.name')" min-width="100px">
-                                {{ data.name }}
-                            </el-descriptions-item>
-                            <el-descriptions-item :label="$t('process.status')">{{ data.status }}</el-descriptions-item>
-                            <el-descriptions-item :label="$t('process.pid')">{{ data.PID }}</el-descriptions-item>
-                            <el-descriptions-item :label="$t('process.ppid')">{{ data.PPID }}</el-descriptions-item>
-                            <el-descriptions-item :label="$t('process.numThreads')">
-                                {{ data.numThreads }}
-                            </el-descriptions-item>
-                            <el-descriptions-item :label="$t('process.numConnections')">
-                                {{ data.numConnections }}
-                            </el-descriptions-item>
-                            <el-descriptions-item :label="$t('process.diskRead')">
-                                {{ data.diskRead }}
-                            </el-descriptions-item>
-                            <el-descriptions-item :label="$t('process.diskWrite')">
-                                {{ data.diskWrite }}
-                            </el-descriptions-item>
-                            <el-descriptions-item :label="$t('commons.table.user')">
-                                {{ data.username }}
-                            </el-descriptions-item>
-                            <el-descriptions-item :label="$t('process.startTime')">
-                                {{ data.startTime }}
-                            </el-descriptions-item>
-                            <el-descriptions-item :label="$t('process.cmdLine')">
-                                {{ data.cmdLine }}
-                            </el-descriptions-item>
-                        </el-descriptions>
-                    </el-tab-pane>
-                    <el-tab-pane :label="$t('process.mem')" name="mem">
-                        <el-descriptions :column="2" border>
-                            <el-descriptions-item :label="'rss'">{{ data.rss }}</el-descriptions-item>
-                            <el-descriptions-item :label="'swap'">{{ data.swap }}</el-descriptions-item>
-                            <el-descriptions-item :label="'vms'">{{ data.vms }}</el-descriptions-item>
-                            <el-descriptions-item :label="'hwm'">{{ data.hwm }}</el-descriptions-item>
-                            <el-descriptions-item :label="'data'">{{ data.data }}</el-descriptions-item>
-                            <el-descriptions-item :label="'stack'">{{ data.stack }}</el-descriptions-item>
-                            <el-descriptions-item :label="'locked'">{{ data.locked }}</el-descriptions-item>
-                        </el-descriptions>
-                    </el-tab-pane>
-                    <el-tab-pane :label="$t('process.openFiles')" name="openFiles">
-                        <el-table :data="data.openFiles" border style="width: 100%">
-                            <el-table-column prop="path" :label="$t('process.file')" />
-                            <el-table-column prop="fd" label="fd" width="100px" />
-                        </el-table>
-                    </el-tab-pane>
-                    <el-tab-pane :label="$t('process.env')" name="env">
-                        <codemirror
-                            :autofocus="true"
-                            :indent-with-tab="true"
-                            :tabSize="4"
-                            style="height: calc(100vh - 200px)"
-                            :lineWrapping="true"
-                            :matchBrackets="true"
-                            theme="cobalt"
-                            :styleActiveLine="true"
-                            :extensions="extensions"
-                            v-model="envStr"
-                            :disabled="true"
-                        />
-                    </el-tab-pane>
-                    <el-tab-pane :label="$t('process.net')" name="net">
-                        <el-table :data="data.connects" border style="width: 100%">
-                            <el-table-column prop="localaddr" :label="$t('process.laddr')">
-                                <template #default="{ row }">
-                                    <span>{{ row.localaddr.ip }}</span>
-                                    <span v-if="row.localaddr.port > 0">:{{ row.localaddr.port }}</span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="remoteaddr" :label="$t('process.raddr')">
-                                <template #default="{ row }">
-                                    <span>{{ row.remoteaddr.ip }}</span>
-                                    <span v-if="row.remoteaddr.port > 0">:{{ row.remoteaddr.port }}</span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="status" :label="$t('app.status')" />
-                        </el-table>
-                    </el-tab-pane>
-                </el-tabs>
-            </el-col>
-        </el-row>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
diff --git a/frontend/src/views/host/ssh/ssh/address/index.vue b/frontend/src/views/host/ssh/ssh/address/index.vue
index 333eb34f8..06a761e34 100644
--- a/frontend/src/views/host/ssh/ssh/address/index.vue
+++ b/frontend/src/views/host/ssh/ssh/address/index.vue
@@ -1,64 +1,41 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            @close="handleClose"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('ssh.listenAddress')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :rules="rules"
-                :model="form"
-                @submit.prevent
-                v-loading="loading"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-alert class="common-prompt" :closable="false" type="error">
-                            <template #default>
-                                <span>
-                                    {{ $t('ssh.listenHelper', [form.port]) }}
-                                </span>
-                            </template>
-                        </el-alert>
-                        <el-form-item label="IPv4" prop="listenAddressV4">
-                            <el-checkbox
-                                v-model="form.ipv4All"
-                                @change="form.listenAddressV4 = form.ipv4All ? '0.0.0.0' : form.listenAddressV4"
-                            >
-                                {{ $t('setting.bindAll') }}
-                            </el-checkbox>
-                            <el-input :disabled="form.ipv4All" clearable v-model="form.listenAddressV4"></el-input>
-                        </el-form-item>
-                        <el-form-item label="IPv6" prop="listenAddressV6">
-                            <el-checkbox
-                                v-model="form.ipv6All"
-                                @change="form.listenAddressV6 = form.ipv6All ? '::' : form.listenAddressV6"
-                            >
-                                {{ $t('setting.bindAll') }}
-                            </el-checkbox>
-                            <el-input :disabled="form.ipv6All" clearable v-model="form.listenAddressV6"></el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('ssh.listenAddress')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :rules="rules" :model="form" @submit.prevent v-loading="loading">
+            <el-alert class="common-prompt" :closable="false" type="error">
+                <template #default>
+                    <span>
+                        {{ $t('ssh.listenHelper', [form.port]) }}
+                    </span>
+                </template>
+            </el-alert>
+            <el-form-item label="IPv4" prop="listenAddressV4">
+                <el-checkbox
+                    v-model="form.ipv4All"
+                    @change="form.listenAddressV4 = form.ipv4All ? '0.0.0.0' : form.listenAddressV4"
+                >
+                    {{ $t('setting.bindAll') }}
+                </el-checkbox>
+                <el-input :disabled="form.ipv4All" clearable v-model="form.listenAddressV4"></el-input>
+            </el-form-item>
+            <el-form-item label="IPv6" prop="listenAddressV6">
+                <el-checkbox
+                    v-model="form.ipv6All"
+                    @change="form.listenAddressV6 = form.ipv6All ? '::' : form.listenAddressV6"
+                >
+                    {{ $t('setting.bindAll') }}
+                </el-checkbox>
+                <el-input :disabled="form.ipv6All" clearable v-model="form.listenAddressV6"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -66,7 +43,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { updateSSH } from '@/api/modules/host';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { checkIp, checkIpV6 } from '@/utils/util';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/host/ssh/ssh/port/index.vue b/frontend/src/views/host/ssh/ssh/port/index.vue
index ad8d582a5..5bf00b118 100644
--- a/frontend/src/views/host/ssh/ssh/port/index.vue
+++ b/frontend/src/views/host/ssh/ssh/port/index.vue
@@ -1,42 +1,25 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            @close="handleClose"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('commons.table.port')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.port')" prop="port" :rules="Rules.port">
-                            <el-input clearable v-model.number="form.port" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('commons.table.port')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('commons.table.port')" prop="port" :rules="Rules.port">
+                <el-input clearable v-model.number="form.port" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Rules } from '@/global/form-rules';
 import { updateSSH } from '@/api/modules/host';
 
diff --git a/frontend/src/views/host/ssh/ssh/pubkey/index.vue b/frontend/src/views/host/ssh/ssh/pubkey/index.vue
index 994663be1..534e6dec2 100644
--- a/frontend/src/views/host/ssh/ssh/pubkey/index.vue
+++ b/frontend/src/views/host/ssh/ssh/pubkey/index.vue
@@ -1,65 +1,49 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            @close="handleClose"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('ssh.pubkey')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :rules="rules" :model="form" v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('ssh.encryptionMode')" prop="encryptionMode">
-                            <el-select v-model="form.encryptionMode" @change="onLoadSecret">
-                                <el-option label="ED25519" value="ed25519" />
-                                <el-option label="ECDSA" value="ecdsa" />
-                                <el-option label="RSA" value="rsa" />
-                                <el-option label="DSA" value="dsa" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.password')" prop="password">
-                            <el-input v-model="form.password" type="password" show-password>
-                                <template #append>
-                                    <el-button @click="onCopy(form.password)">
-                                        {{ $t('commons.button.copy') }}
-                                    </el-button>
-                                    <el-divider direction="vertical" />
-                                    <el-button @click="random">
-                                        {{ $t('commons.button.random') }}
-                                    </el-button>
-                                </template>
-                            </el-input>
-                        </el-form-item>
+    <DrawerPro v-model="drawerVisible" :header="$t('ssh.pubkey')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :rules="rules" :model="form" v-loading="loading">
+            <el-form-item :label="$t('ssh.encryptionMode')" prop="encryptionMode">
+                <el-select v-model="form.encryptionMode" @change="onLoadSecret">
+                    <el-option label="ED25519" value="ed25519" />
+                    <el-option label="ECDSA" value="ecdsa" />
+                    <el-option label="RSA" value="rsa" />
+                    <el-option label="DSA" value="dsa" />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.password')" prop="password">
+                <el-input v-model="form.password" type="password" show-password>
+                    <template #append>
+                        <el-button @click="onCopy(form.password)">
+                            {{ $t('commons.button.copy') }}
+                        </el-button>
+                        <el-divider direction="vertical" />
+                        <el-button @click="random">
+                            {{ $t('commons.button.random') }}
+                        </el-button>
+                    </template>
+                </el-input>
+            </el-form-item>
 
-                        <el-form-item :label="$t('ssh.key')" prop="primaryKey" v-if="form.encryptionMode">
-                            <el-input v-model="form.primaryKey" :rows="5" type="textarea" />
-                            <div v-if="form.primaryKey">
-                                <el-button icon="CopyDocument" class="marginTop" @click="onCopy(form.primaryKey)">
-                                    {{ $t('file.copy') }}
-                                </el-button>
-                                <el-button icon="Download" class="marginTop" @click="onDownload">
-                                    {{ $t('commons.button.download') }}
-                                </el-button>
-                            </div>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button @click="onGenerate(formRef)" type="primary">
-                        {{ $t('ssh.generate') }}
+            <el-form-item :label="$t('ssh.key')" prop="primaryKey" v-if="form.encryptionMode">
+                <el-input v-model="form.primaryKey" :rows="5" type="textarea" />
+                <div v-if="form.primaryKey">
+                    <el-button icon="CopyDocument" class="marginTop" @click="onCopy(form.primaryKey)">
+                        {{ $t('file.copy') }}
                     </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+                    <el-button icon="Download" class="marginTop" @click="onDownload">
+                        {{ $t('commons.button.download') }}
+                    </el-button>
+                </div>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button @click="onGenerate(formRef)" type="primary">
+                    {{ $t('ssh.generate') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { generateSecret, loadSecret } from '@/api/modules/host';
@@ -68,7 +52,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { copyText, dateFormatForName, getRandomStr } from '@/utils/util';
 import { FormInstance } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { reactive, ref } from 'vue';
 
 const loading = ref();
diff --git a/frontend/src/views/host/ssh/ssh/root/index.vue b/frontend/src/views/host/ssh/ssh/root/index.vue
index c8770c3fd..b2fa343b4 100644
--- a/frontend/src/views/host/ssh/ssh/root/index.vue
+++ b/frontend/src/views/host/ssh/ssh/root/index.vue
@@ -1,40 +1,24 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            @close="handleClose"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('ssh.permitRootLogin')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('ssh.permitRootLogin')" prop="permitRootLogin">
-                            <el-select v-model="form.permitRootLogin" style="width: 100%">
-                                <el-option :label="$t('ssh.rootHelper1')" value="yes" />
-                                <el-option :label="$t('ssh.rootHelper2')" value="no" />
-                                <el-option :label="$t('ssh.rootHelper3')" value="without-password" />
-                                <el-option :label="$t('ssh.rootHelper4')" value="forced-commands-only" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('ssh.permitRootLogin')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('ssh.permitRootLogin')" prop="permitRootLogin">
+                <el-select v-model="form.permitRootLogin" style="width: 100%">
+                    <el-option :label="$t('ssh.rootHelper1')" value="yes" />
+                    <el-option :label="$t('ssh.rootHelper2')" value="no" />
+                    <el-option :label="$t('ssh.rootHelper3')" value="without-password" />
+                    <el-option :label="$t('ssh.rootHelper4')" value="forced-commands-only" />
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -42,7 +26,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { updateSSH } from '@/api/modules/host';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
diff --git a/frontend/src/views/host/terminal/command/index.vue b/frontend/src/views/host/terminal/command/index.vue
index bb5aa0e63..0cbea1931 100644
--- a/frontend/src/views/host/terminal/command/index.vue
+++ b/frontend/src/views/host/terminal/command/index.vue
@@ -61,45 +61,34 @@
                 </ComplexTable>
             </template>
         </LayoutContent>
-        <el-drawer
+        <DrawerPro
             v-model="cmdVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
+            :header="$t('commons.button.' + operate) + $t('terminal.quickCommand')"
+            :back="handleClose"
+            size="small"
         >
-            <template #header>
-                <DrawerHeader
-                    :header="$t('commons.button.' + operate) + $t('terminal.quickCommand')"
-                    :back="handleClose"
-                />
-            </template>
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form
-                        @submit.prevent
-                        ref="commandInfoRef"
-                        label-width="100px"
-                        label-position="top"
-                        :model="commandInfo"
-                        :rules="rules"
-                    >
-                        <el-form-item :label="$t('commons.table.name')" prop="name">
-                            <el-input clearable v-model="commandInfo.name" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.group')" prop="name">
-                            <el-select filterable v-model="commandInfo.groupID" clearable style="width: 100%">
-                                <div v-for="item in groupList" :key="item.id">
-                                    <el-option :label="item.name" :value="item.id" />
-                                </div>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('terminal.command')" prop="command">
-                            <el-input type="textarea" clearable v-model="commandInfo.command" />
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
+            <el-form
+                @submit.prevent
+                ref="commandInfoRef"
+                label-width="100px"
+                label-position="top"
+                :model="commandInfo"
+                :rules="rules"
+            >
+                <el-form-item :label="$t('commons.table.name')" prop="name">
+                    <el-input clearable v-model="commandInfo.name" />
+                </el-form-item>
+                <el-form-item :label="$t('commons.table.group')" prop="name">
+                    <el-select filterable v-model="commandInfo.groupID" clearable style="width: 100%">
+                        <div v-for="item in groupList" :key="item.id">
+                            <el-option :label="item.name" :value="item.id" />
+                        </div>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :label="$t('terminal.command')" prop="command">
+                    <el-input type="textarea" clearable v-model="commandInfo.command" />
+                </el-form-item>
+            </el-form>
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="cmdVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@@ -108,7 +97,7 @@
                     </el-button>
                 </span>
             </template>
-        </el-drawer>
+        </DrawerPro>
 
         <OpDialog ref="opRef" @search="search" />
         <GroupDialog @search="loadGroups" ref="dialogGroupRef" />
@@ -125,7 +114,6 @@ import { reactive, ref } from 'vue';
 import type { ElForm } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { GetGroupList } from '@/api/modules/group';
 
diff --git a/frontend/src/views/host/terminal/host/change-group/index.vue b/frontend/src/views/host/terminal/host/change-group/index.vue
index d10633f57..9c6ba374d 100644
--- a/frontend/src/views/host/terminal/host/change-group/index.vue
+++ b/frontend/src/views/host/terminal/host/change-group/index.vue
@@ -1,38 +1,30 @@
 <template>
-    <div v-loading="loading">
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
+    <DrawerPro v-model="drawerVisible" :header="$t('terminal.groupChange')" :back="handleClose" size="small">
+        <el-form
+            @submit.prevent
+            ref="hostInfoRef"
+            label-position="top"
+            :model="dialogData"
+            :rules="rules"
+            v-loading="loading"
         >
-            <template #header>
-                <DrawerHeader :header="$t('terminal.groupChange')" :back="handleClose" />
-            </template>
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form @submit.prevent ref="hostInfoRef" label-position="top" :model="dialogData" :rules="rules">
-                        <el-form-item :label="$t('commons.table.group')" prop="group">
-                            <el-select filterable v-model="dialogData.groupID" clearable style="width: 100%">
-                                <div v-for="item in groupList" :key="item.id">
-                                    <el-option :label="item.name" :value="item.id" />
-                                </div>
-                            </el-select>
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button type="primary" @click="onSubmit(hostInfoRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+            <el-form-item :label="$t('commons.table.group')" prop="group">
+                <el-select filterable v-model="dialogData.groupID" clearable class="w-full">
+                    <div v-for="item in groupList" :key="item.id">
+                        <el-option :label="item.name" :value="item.id" />
+                    </div>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="onSubmit(hostInfoRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -41,7 +33,6 @@ import type { ElForm } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { editHostGroup } from '@/api/modules/host';
 import { GetGroupList } from '@/api/modules/group';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/host/terminal/host/operate/index.vue b/frontend/src/views/host/terminal/host/operate/index.vue
index 26c4ac714..81def230c 100644
--- a/frontend/src/views/host/terminal/host/operate/index.vue
+++ b/frontend/src/views/host/terminal/host/operate/index.vue
@@ -1,109 +1,80 @@
 <template>
-    <div v-loading="loading">
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('terminal.host')" :back="handleClose" />
-            </template>
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form ref="hostInfoRef" label-position="top" :model="dialogData.rowData" :rules="rules">
-                        <el-form-item :label="$t('terminal.ip')" prop="addr">
-                            <el-tag v-if="dialogData.rowData!.addr === '127.0.0.1' && dialogData.title === 'edit'">
-                                {{ dialogData.rowData!.addr }}
-                            </el-tag>
-                            <el-input @change="isOK = false" v-else clearable v-model.trim="dialogData.rowData!.addr" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.username')" prop="user">
-                            <el-input @change="isOK = false" clearable v-model="dialogData.rowData!.user" />
-                        </el-form-item>
-                        <el-form-item :label="$t('terminal.authMode')" prop="authMode">
-                            <el-radio-group @change="isOK = false" v-model="dialogData.rowData!.authMode">
-                                <el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
-                                <el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('commons.login.password')"
-                            v-if="dialogData.rowData!.authMode === 'password'"
-                            prop="password"
-                        >
-                            <el-input
-                                @change="isOK = false"
-                                clearable
-                                show-password
-                                type="password"
-                                v-model="dialogData.rowData!.password"
-                            />
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('terminal.key')"
-                            v-if="dialogData.rowData!.authMode === 'key'"
-                            prop="privateKey"
-                        >
-                            <el-input
-                                @change="isOK = false"
-                                clearable
-                                type="textarea"
-                                v-model="dialogData.rowData!.privateKey"
-                            />
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('terminal.keyPassword')"
-                            v-if="dialogData.rowData!.authMode === 'key'"
-                            prop="passPhrase"
-                        >
-                            <el-input
-                                @change="isOK = false"
-                                type="password"
-                                show-password
-                                clearable
-                                v-model="dialogData.rowData!.passPhrase"
-                            />
-                        </el-form-item>
-                        <el-checkbox clearable v-model.number="dialogData.rowData!.rememberPassword">
-                            {{ $t('terminal.rememberPassword') }}
-                        </el-checkbox>
-                        <el-form-item style="margin-top: 10px" :label="$t('commons.table.port')" prop="port">
-                            <el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.group')" prop="groupID">
-                            <el-select filterable v-model="dialogData.rowData!.groupID" clearable style="width: 100%">
-                                <el-option
-                                    v-for="item in groupList"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.id"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.title')" prop="name">
-                            <el-input clearable v-model="dialogData.rowData!.name" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.description')" prop="description">
-                            <el-input clearable type="textarea" v-model="dialogData.rowData!.description" />
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button @click="submitAddHost(hostInfoRef, 'testconn')">
-                        {{ $t('terminal.testConn') }}
-                    </el-button>
-                    <el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostInfoRef, dialogData.title)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('terminal.host')" :back="handleClose" size="large">
+        <el-form ref="hostInfoRef" label-position="top" :model="dialogData.rowData" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('terminal.ip')" prop="addr">
+                <el-tag v-if="dialogData.rowData!.addr === '127.0.0.1' && dialogData.title === 'edit'">
+                    {{ dialogData.rowData!.addr }}
+                </el-tag>
+                <el-input @change="isOK = false" v-else clearable v-model.trim="dialogData.rowData!.addr" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.username')" prop="user">
+                <el-input @change="isOK = false" clearable v-model="dialogData.rowData!.user" />
+            </el-form-item>
+            <el-form-item :label="$t('terminal.authMode')" prop="authMode">
+                <el-radio-group @change="isOK = false" v-model="dialogData.rowData!.authMode">
+                    <el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
+                    <el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item
+                :label="$t('commons.login.password')"
+                v-if="dialogData.rowData!.authMode === 'password'"
+                prop="password"
+            >
+                <el-input
+                    @change="isOK = false"
+                    clearable
+                    show-password
+                    type="password"
+                    v-model="dialogData.rowData!.password"
+                />
+            </el-form-item>
+            <el-form-item :label="$t('terminal.key')" v-if="dialogData.rowData!.authMode === 'key'" prop="privateKey">
+                <el-input @change="isOK = false" clearable type="textarea" v-model="dialogData.rowData!.privateKey" />
+            </el-form-item>
+            <el-form-item
+                :label="$t('terminal.keyPassword')"
+                v-if="dialogData.rowData!.authMode === 'key'"
+                prop="passPhrase"
+            >
+                <el-input
+                    @change="isOK = false"
+                    type="password"
+                    show-password
+                    clearable
+                    v-model="dialogData.rowData!.passPhrase"
+                />
+            </el-form-item>
+            <el-checkbox clearable v-model.number="dialogData.rowData!.rememberPassword">
+                {{ $t('terminal.rememberPassword') }}
+            </el-checkbox>
+            <el-form-item style="margin-top: 10px" :label="$t('commons.table.port')" prop="port">
+                <el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.group')" prop="groupID">
+                <el-select filterable v-model="dialogData.rowData!.groupID" clearable style="width: 100%">
+                    <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id" />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.title')" prop="name">
+                <el-input clearable v-model="dialogData.rowData!.name" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input clearable type="textarea" v-model="dialogData.rowData!.description" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button @click="submitAddHost(hostInfoRef, 'testconn')">
+                    {{ $t('terminal.testConn') }}
+                </el-button>
+                <el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostInfoRef, dialogData.title)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -111,7 +82,6 @@ import { ref, reactive } from 'vue';
 import type { ElForm } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { addHost, editHost, testByInfo } from '@/api/modules/host';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { GetGroupList } from '@/api/modules/group';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/host/terminal/terminal/host-create.vue b/frontend/src/views/host/terminal/terminal/host-create.vue
index 7753700d6..46d52b7df 100644
--- a/frontend/src/views/host/terminal/terminal/host-create.vue
+++ b/frontend/src/views/host/terminal/terminal/host-create.vue
@@ -1,96 +1,67 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="dialogVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('terminal.addHost')" :back="handleClose" />
-            </template>
-            <el-form ref="hostRef" label-width="100px" label-position="top" :model="hostInfo" :rules="rules">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-alert
-                            v-if="isLocal"
-                            class="common-prompt"
-                            center
-                            :title="$t('terminal.connLocalErr')"
-                            :closable="false"
-                            type="warning"
-                        />
-                        <el-form-item :label="$t('terminal.ip')" prop="addr">
-                            <el-input @change="isOK = false" v-if="!isLocal" clearable v-model.trim="hostInfo.addr" />
-                            <el-tag v-if="isLocal">{{ hostInfo.addr }}</el-tag>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.login.username')" prop="user">
-                            <el-input @change="isOK = false" clearable v-model="hostInfo.user" />
-                        </el-form-item>
-                        <el-form-item :label="$t('terminal.authMode')" prop="authMode">
-                            <el-radio-group @change="isOK = false" v-model="hostInfo.authMode">
-                                <el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
-                                <el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('commons.login.password')"
-                            v-if="hostInfo.authMode === 'password'"
-                            prop="password"
-                        >
-                            <el-input
-                                @change="isOK = false"
-                                clearable
-                                show-password
-                                type="password"
-                                v-model="hostInfo.password"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('terminal.key')" v-if="hostInfo.authMode === 'key'" prop="privateKey">
-                            <el-input @change="isOK = false" clearable type="textarea" v-model="hostInfo.privateKey" />
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('terminal.keyPassword')"
-                            v-if="hostInfo.authMode === 'key'"
-                            prop="passPhrase"
-                        >
-                            <el-input
-                                @change="isOK = false"
-                                type="password"
-                                show-password
-                                clearable
-                                v-model="hostInfo.passPhrase"
-                            />
-                        </el-form-item>
-                        <el-checkbox clearable v-model.number="hostInfo.rememberPassword">
-                            {{ $t('terminal.rememberPassword') }}
-                        </el-checkbox>
-                        <el-form-item style="margin-top: 10px" :label="$t('commons.table.port')" prop="port">
-                            <el-input @change="isOK = false" clearable v-model.number="hostInfo.port" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.title')" prop="name">
-                            <el-input clearable v-model="hostInfo.name" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.description')" prop="description">
-                            <el-input clearable v-model="hostInfo.description" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="dialogVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button @click="submitAddHost(hostRef, 'testConn')">
-                        {{ $t('terminal.testConn') }}
-                    </el-button>
-                    <el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostRef, 'saveAndConn')">
-                        {{ $t('terminal.saveAndConn') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="dialogVisible" :header="$t('terminal.addHost')" :back="handleClose" size="large">
+        <el-form ref="hostRef" label-width="100px" label-position="top" :model="hostInfo" :rules="rules">
+            <el-alert
+                v-if="isLocal"
+                class="common-prompt"
+                center
+                :title="$t('terminal.connLocalErr')"
+                :closable="false"
+                type="warning"
+            />
+            <el-form-item :label="$t('terminal.ip')" prop="addr">
+                <el-input @change="isOK = false" v-if="!isLocal" clearable v-model.trim="hostInfo.addr" />
+                <el-tag v-if="isLocal">{{ hostInfo.addr }}</el-tag>
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.username')" prop="user">
+                <el-input @change="isOK = false" clearable v-model="hostInfo.user" />
+            </el-form-item>
+            <el-form-item :label="$t('terminal.authMode')" prop="authMode">
+                <el-radio-group @change="isOK = false" v-model="hostInfo.authMode">
+                    <el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
+                    <el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.password')" v-if="hostInfo.authMode === 'password'" prop="password">
+                <el-input @change="isOK = false" clearable show-password type="password" v-model="hostInfo.password" />
+            </el-form-item>
+            <el-form-item :label="$t('terminal.key')" v-if="hostInfo.authMode === 'key'" prop="privateKey">
+                <el-input @change="isOK = false" clearable type="textarea" v-model="hostInfo.privateKey" />
+            </el-form-item>
+            <el-form-item :label="$t('terminal.keyPassword')" v-if="hostInfo.authMode === 'key'" prop="passPhrase">
+                <el-input
+                    @change="isOK = false"
+                    type="password"
+                    show-password
+                    clearable
+                    v-model="hostInfo.passPhrase"
+                />
+            </el-form-item>
+            <el-checkbox clearable v-model.number="hostInfo.rememberPassword">
+                {{ $t('terminal.rememberPassword') }}
+            </el-checkbox>
+            <el-form-item class="mt-2.5" :label="$t('commons.table.port')" prop="port">
+                <el-input @change="isOK = false" clearable v-model.number="hostInfo.port" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.title')" prop="name">
+                <el-input clearable v-model="hostInfo.name" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input clearable v-model="hostInfo.description" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button @click="submitAddHost(hostRef, 'testConn')">
+                    {{ $t('terminal.testConn') }}
+                </el-button>
+                <el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostRef, 'saveAndConn')">
+                    {{ $t('terminal.saveAndConn') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
@@ -98,7 +69,6 @@ import { ElForm } from 'element-plus';
 import { Host } from '@/api/interface/host';
 import { Rules } from '@/global/form-rules';
 import { addHost, testByInfo } from '@/api/modules/host';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import i18n from '@/lang';
 import { reactive, ref } from 'vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/setting/backup-account/cos/index.vue b/frontend/src/views/setting/backup-account/cos/index.vue
index a98e7e8ac..85963ce20 100644
--- a/frontend/src/views/setting/backup-account/cos/index.vue
+++ b/frontend/src/views/setting/backup-account/cos/index.vue
@@ -1,109 +1,74 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
-            </template>
-            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="cosData.rowData">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
-                            <el-tag>{{ $t('setting.' + cosData.rowData!.type) }}</el-tag>
-                        </el-form-item>
-                        <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
-                            <el-input v-model.trim="cosData.rowData!.accessKey" />
-                        </el-form-item>
-                        <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
-                            <el-input show-password clearable v-model.trim="cosData.rowData!.credential" />
-                        </el-form-item>
-                        <el-form-item label="Region" prop="varsJson.region" :rules="Rules.requiredInput">
-                            <el-checkbox v-model="regionInput" :label="$t('container.input')" />
-                            <el-select
-                                v-if="!regionInput"
-                                v-model="cosData.rowData!.varsJson['region']"
-                                filterable
-                                clearable
-                            >
-                                <el-option
-                                    v-for="item in cities"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :value="item.value"
-                                >
-                                    <span style="float: left">{{ item.label }}</span>
-                                    <span class="option-help">
-                                        {{ item.value }}
-                                    </span>
-                                </el-option>
-                            </el-select>
-                            <el-input v-else v-model.trim="cosData.rowData!.varsJson['region']" />
-                        </el-form-item>
-                        <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
-                            <el-input v-model.trim="cosData.rowData!.varsJson['endpointItem']">
-                                <template #prepend>
-                                    <el-select v-model.trim="endpointProto" style="width: 100px">
-                                        <el-option label="http" value="http" />
-                                        <el-option label="https" value="https" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select
-                                @change="errBuckets = false"
-                                style="width: 80%"
-                                v-model="cosData.rowData!.bucket"
-                            >
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.scType')"
-                            prop="varsJson.scType"
-                            :rules="[Rules.requiredSelect]"
-                        >
-                            <el-select v-model="cosData.rowData!.varsJson['scType']">
-                                <el-option value="Standard" :label="$t('setting.scStandard')" />
-                                <el-option value="Standard_IA" :label="$t('setting.scStandard_IA')" />
-                                <el-option value="Archive" :label="$t('setting.scArchive')" />
-                                <el-option value="Deep_Archive" :label="$t('setting.scDeep_Archive')" />
-                            </el-select>
-                            <el-alert
-                                v-if="cosData.rowData!.varsJson['scType'] === 'Archive' || cosData.rowData!.varsJson['scType'] === 'Deep_Archive'"
-                                style="margin-top: 10px"
-                                :closable="false"
-                                type="warning"
-                                :title="$t('setting.archiveHelper')"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
-                            <el-input clearable v-model.trim="cosData.rowData!.backupPath" placeholder="/1panel" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="handleClose">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
+        <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="cosData.rowData">
+            <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                <el-tag>{{ $t('setting.' + cosData.rowData!.type) }}</el-tag>
+            </el-form-item>
+            <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
+                <el-input v-model.trim="cosData.rowData!.accessKey" />
+            </el-form-item>
+            <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
+                <el-input show-password clearable v-model.trim="cosData.rowData!.credential" />
+            </el-form-item>
+            <el-form-item label="Region" prop="varsJson.region" :rules="Rules.requiredInput">
+                <el-checkbox v-model="regionInput" :label="$t('container.input')" />
+                <el-select v-if="!regionInput" v-model="cosData.rowData!.varsJson['region']" filterable clearable>
+                    <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
+                        <span class="float-left">{{ item.label }}</span>
+                        <span class="option-help">
+                            {{ item.value }}
+                        </span>
+                    </el-option>
+                </el-select>
+                <el-input v-else v-model.trim="cosData.rowData!.varsJson['region']" />
+            </el-form-item>
+            <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
+                <el-input v-model.trim="cosData.rowData!.varsJson['endpointItem']">
+                    <template #prepend>
+                        <el-select v-model.trim="endpointProto" class="p-w-100">
+                            <el-option label="http" value="http" />
+                            <el-option label="https" value="https" />
+                        </el-select>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="Bucket" prop="bucket">
+                <el-select @change="errBuckets = false" class="!w-4/5" v-model="cosData.rowData!.bucket">
+                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                </el-select>
+                <el-button class="!w-1/5" plain @click="getBuckets(formRef)">
+                    {{ $t('setting.loadBucket') }}
+                </el-button>
+                <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('setting.scType')" prop="varsJson.scType" :rules="[Rules.requiredSelect]">
+                <el-select v-model="cosData.rowData!.varsJson['scType']">
+                    <el-option value="Standard" :label="$t('setting.scStandard')" />
+                    <el-option value="Standard_IA" :label="$t('setting.scStandard_IA')" />
+                    <el-option value="Archive" :label="$t('setting.scArchive')" />
+                    <el-option value="Deep_Archive" :label="$t('setting.scDeep_Archive')" />
+                </el-select>
+                <el-alert
+                    v-if="cosData.rowData!.varsJson['scType'] === 'Archive' || cosData.rowData!.varsJson['scType'] === 'Deep_Archive'"
+                    class="mt-2.5"
+                    :closable="false"
+                    type="warning"
+                    :title="$t('setting.archiveHelper')"
+                />
+            </el-form-item>
+            <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
+                <el-input clearable v-model.trim="cosData.rowData!.backupPath" placeholder="/1panel" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="handleClose">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -112,7 +77,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
 import { deepCopy, spliceHttp, splitHttp } from '@/utils/util';
 import { MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/setting/backup-account/kodo/index.vue b/frontend/src/views/setting/backup-account/kodo/index.vue
index 2ba5d565c..29a431d2e 100644
--- a/frontend/src/views/setting/backup-account/kodo/index.vue
+++ b/frontend/src/views/setting/backup-account/kodo/index.vue
@@ -1,83 +1,56 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
-            </template>
-            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="kodoData.rowData">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
-                            <el-tag>{{ $t('setting.' + kodoData.rowData!.type) }}</el-tag>
-                        </el-form-item>
-                        <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
-                            <el-input v-model.trim="kodoData.rowData!.accessKey" />
-                        </el-form-item>
-                        <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
-                            <el-input show-password clearable v-model.trim="kodoData.rowData!.credential" />
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.domain')"
-                            prop="varsJson.domainItem"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input v-model="kodoData.rowData!.varsJson['domainItem']">
-                                <template #prepend>
-                                    <el-select v-model.trim="domainProto" style="width: 100px">
-                                        <el-option label="http" value="http" />
-                                        <el-option label="https" value="https" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select
-                                @change="errBuckets = false"
-                                style="width: 80%"
-                                v-model="kodoData.rowData!.bucket"
-                            >
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
-                        </el-form-item>
-
-                        <el-form-item :label="$t('cronjob.requestExpirationTime')" prop="varsJson.timeout">
-                            <el-input-number
-                                style="width: 200px"
-                                :min="1"
-                                step-strictly
-                                :step="1"
-                                v-model.number="kodoData.rowData!.varsJson['timeout']"
-                            ></el-input-number>
-                        </el-form-item>
-
-                        <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
-                            <el-input clearable v-model.trim="kodoData.rowData!.backupPath" placeholder="/1panel" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="handleClose">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
+        <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="kodoData.rowData">
+            <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                <el-tag>{{ $t('setting.' + kodoData.rowData!.type) }}</el-tag>
+            </el-form-item>
+            <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
+                <el-input v-model.trim="kodoData.rowData!.accessKey" />
+            </el-form-item>
+            <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
+                <el-input show-password clearable v-model.trim="kodoData.rowData!.credential" />
+            </el-form-item>
+            <el-form-item :label="$t('setting.domain')" prop="varsJson.domainItem" :rules="Rules.requiredInput">
+                <el-input v-model="kodoData.rowData!.varsJson['domainItem']">
+                    <template #prepend>
+                        <el-select v-model.trim="domainProto" class="p-w-100">
+                            <el-option label="http" value="http" />
+                            <el-option label="https" value="https" />
+                        </el-select>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="Bucket" prop="bucket">
+                <el-select @change="errBuckets = false" class="!w-4/5" v-model="kodoData.rowData!.bucket">
+                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                </el-select>
+                <el-button class="!w-1/5" plain @click="getBuckets(formRef)">
+                    {{ $t('setting.loadBucket') }}
+                </el-button>
+                <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+            </el-form-item>
+           <el-form-item :label="$t('cronjob.requestExpirationTime')" prop="varsJson.timeout">
+                <el-input-number
+                    style="width: 200px"
+                    :min="1"
+                    step-strictly
+                    :step="1"
+                    v-model.number="kodoData.rowData!.varsJson['timeout']"
+                ></el-input-number>
+            </el-form-item>
+            <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
+                <el-input clearable v-model.trim="kodoData.rowData!.backupPath" placeholder="/1panel" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="handleClose">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -86,7 +59,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
 import { deepCopy, spliceHttp, splitHttp } from '@/utils/util';
 import { MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/setting/backup-account/local/index.vue b/frontend/src/views/setting/backup-account/local/index.vue
index 396880c01..2107e37af 100644
--- a/frontend/src/views/setting/backup-account/local/index.vue
+++ b/frontend/src/views/setting/backup-account/local/index.vue
@@ -1,47 +1,26 @@
 <template>
-    <div v-loading="loading">
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
-            </template>
-            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
-                            <el-tag>{{ $t('setting.' + dialogData.rowData!.type) }}</el-tag>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.backupDir')"
-                            prop="varsJson['dir']"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input v-model="dialogData.rowData!.varsJson['dir']">
-                                <template #prepend>
-                                    <FileList @choose="loadDir" :dir="true"></FileList>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="handleClose">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
+        <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData">
+            <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                <el-tag>{{ $t('setting.' + dialogData.rowData!.type) }}</el-tag>
+            </el-form-item>
+            <el-form-item :label="$t('setting.backupDir')" prop="varsJson['dir']" :rules="Rules.requiredInput">
+                <el-input v-model="dialogData.rowData!.varsJson['dir']">
+                    <template #prepend>
+                        <FileList @choose="loadDir" :dir="true"></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="handleClose">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -51,7 +30,6 @@ import FileList from '@/components/file-list/index.vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/setting/backup-account/minio/index.vue b/frontend/src/views/setting/backup-account/minio/index.vue
index 6faa3a959..322f095c4 100644
--- a/frontend/src/views/setting/backup-account/minio/index.vue
+++ b/frontend/src/views/setting/backup-account/minio/index.vue
@@ -1,68 +1,47 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
-            </template>
-            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="minioData.rowData">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
-                            <el-tag>{{ $t('setting.' + minioData.rowData!.type) }}</el-tag>
-                        </el-form-item>
-                        <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
-                            <el-input v-model.trim="minioData.rowData!.accessKey" />
-                        </el-form-item>
-                        <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
-                            <el-input show-password clearable v-model.trim="minioData.rowData!.credential" />
-                        </el-form-item>
-                        <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
-                            <el-input v-model="minioData.rowData!.varsJson['endpointItem']">
-                                <template #prepend>
-                                    <el-select v-model.trim="endpointProto" style="width: 100px">
-                                        <el-option label="http" value="http" />
-                                        <el-option label="https" value="https" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select
-                                style="width: 80%"
-                                @change="errBuckets = false"
-                                v-model="minioData.rowData!.bucket"
-                            >
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
-                            <el-input clearable v-model.trim="minioData.rowData!.backupPath" placeholder="/1panel" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="handleClose">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
+        <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="minioData.rowData">
+            <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                <el-tag>{{ $t('setting.' + minioData.rowData!.type) }}</el-tag>
+            </el-form-item>
+            <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
+                <el-input v-model.trim="minioData.rowData!.accessKey" />
+            </el-form-item>
+            <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
+                <el-input show-password clearable v-model.trim="minioData.rowData!.credential" />
+            </el-form-item>
+            <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
+                <el-input v-model="minioData.rowData!.varsJson['endpointItem']">
+                    <template #prepend>
+                        <el-select v-model.trim="endpointProto" style="width: 100px">
+                            <el-option label="http" value="http" />
+                            <el-option label="https" value="https" />
+                        </el-select>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="Bucket" prop="bucket">
+                <el-select class="!w-4/5" @change="errBuckets = false" v-model="minioData.rowData!.bucket">
+                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                </el-select>
+                <el-button class="!w-1/5" plain @click="getBuckets(formRef)">
+                    {{ $t('setting.loadBucket') }}
+                </el-button>
+                <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
+                <el-input clearable v-model.trim="minioData.rowData!.backupPath" placeholder="/1panel" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="handleClose">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -71,7 +50,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
 import { deepCopy, splitHttp, spliceHttp } from '@/utils/util';
 import { MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/setting/backup-account/onedrive/index.vue b/frontend/src/views/setting/backup-account/onedrive/index.vue
index 1e7478368..5fdfb1ceb 100644
--- a/frontend/src/views/setting/backup-account/onedrive/index.vue
+++ b/frontend/src/views/setting/backup-account/onedrive/index.vue
@@ -1,108 +1,77 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
-            </template>
-            <el-form
-                @submit.prevent
-                ref="formRef"
-                v-loading="loading"
-                label-position="top"
-                :model="oneDriveData.rowData"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.type')" prop="type">
-                            <el-tag>{{ $t('setting.' + oneDriveData.rowData!.type) }}</el-tag>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-radio-group v-model="oneDriveData.rowData!.varsJson['isCN']" @change="changeFrom">
-                                <el-radio-button :value="false">{{ $t('setting.isNotCN') }}</el-radio-button>
-                                <el-radio-button :value="true">{{ $t('setting.isCN') }}</el-radio-button>
-                            </el-radio-group>
-                            <span class="input-help">
-                                {{ $t('setting.onedrive_helper') }}
-                                <el-link
-                                    style="font-size: 12px; margin-left: 5px"
-                                    icon="Position"
-                                    @click="toDoc(true)"
-                                    type="primary"
-                                >
-                                    {{ $t('firewall.quickJump') }}
-                                </el-link>
-                            </span>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.client_id')"
-                            prop="varsJson.client_id"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input v-model.trim="oneDriveData.rowData!.varsJson['client_id']" />
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.client_secret')"
-                            prop="varsJson.client_secret"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input v-model.trim="oneDriveData.rowData!.varsJson['client_secret']" />
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.redirect_uri')"
-                            prop="varsJson.redirect_uri"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input v-model.trim="oneDriveData.rowData!.varsJson['redirect_uri']" />
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.code')" prop="varsJson.code" :rules="rules.driveCode">
-                            <div style="width: 100%">
-                                <el-input
-                                    style="width: calc(100% - 80px)"
-                                    :rows="3"
-                                    type="textarea"
-                                    clearable
-                                    v-model.trim="oneDriveData.rowData!.varsJson['code']"
-                                />
-                                <el-button class="append-button" @click="jumpAzure(formRef)">
-                                    {{ $t('setting.loadCode') }}
-                                </el-button>
-                            </div>
-                            <span class="input-help">
-                                {{ $t('setting.codeHelper') }}
-                                <el-link
-                                    style="font-size: 12px; margin-left: 5px"
-                                    icon="Position"
-                                    @click="toDoc(false)"
-                                    type="primary"
-                                >
-                                    {{ $t('firewall.quickJump') }}
-                                </el-link>
-                            </span>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
-                            <el-input clearable v-model.trim="oneDriveData.rowData!.backupPath" placeholder="/1panel" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="handleClose">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
+    <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
+        <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="oneDriveData.rowData">
+            <el-form-item :label="$t('commons.table.type')" prop="type">
+                <el-tag>{{ $t('setting.' + oneDriveData.rowData!.type) }}</el-tag>
+            </el-form-item>
+            <el-form-item>
+                <el-radio-group v-model="oneDriveData.rowData!.varsJson['isCN']" @change="changeFrom">
+                    <el-radio-button :value="false">{{ $t('setting.isNotCN') }}</el-radio-button>
+                    <el-radio-button :value="true">{{ $t('setting.isCN') }}</el-radio-button>
+                </el-radio-group>
+                <span class="input-help">
+                    {{ $t('setting.onedrive_helper') }}
+                    <el-link
+                        style="font-size: 12px; margin-left: 5px"
+                        icon="Position"
+                        @click="toDoc(true)"
+                        type="primary"
+                    >
+                        {{ $t('firewall.quickJump') }}
+                    </el-link>
                 </span>
-            </template>
-        </el-drawer>
-    </div>
+            </el-form-item>
+            <el-form-item :label="$t('setting.client_id')" prop="varsJson.client_id" :rules="Rules.requiredInput">
+                <el-input v-model.trim="oneDriveData.rowData!.varsJson['client_id']" />
+            </el-form-item>
+            <el-form-item
+                :label="$t('setting.client_secret')"
+                prop="varsJson.client_secret"
+                :rules="Rules.requiredInput"
+            >
+                <el-input v-model.trim="oneDriveData.rowData!.varsJson['client_secret']" />
+            </el-form-item>
+            <el-form-item :label="$t('setting.redirect_uri')" prop="varsJson.redirect_uri" :rules="Rules.requiredInput">
+                <el-input v-model.trim="oneDriveData.rowData!.varsJson['redirect_uri']" />
+            </el-form-item>
+            <el-form-item :label="$t('setting.code')" prop="varsJson.code" :rules="rules.driveCode">
+                <div class="!w-full">
+                    <el-input
+                        style="width: calc(100% - 80px)"
+                        :rows="3"
+                        type="textarea"
+                        clearable
+                        v-model.trim="oneDriveData.rowData!.varsJson['code']"
+                    />
+                    <el-button class="append-button" @click="jumpAzure(formRef)">
+                        {{ $t('setting.loadCode') }}
+                    </el-button>
+                </div>
+                <span class="input-help">
+                    {{ $t('setting.codeHelper') }}
+                    <el-link
+                        style="font-size: 12px; margin-left: 5px"
+                        icon="Position"
+                        @click="toDoc(false)"
+                        type="primary"
+                    >
+                        {{ $t('firewall.quickJump') }}
+                    </el-link>
+                </span>
+            </el-form-item>
+            <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
+                <el-input clearable v-model.trim="oneDriveData.rowData!.backupPath" placeholder="/1panel" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="handleClose">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -111,7 +80,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup, getOneDriveInfo } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/setting/backup-account/oss/index.vue b/frontend/src/views/setting/backup-account/oss/index.vue
index b7942c1ec..3b5522b7a 100644
--- a/frontend/src/views/setting/backup-account/oss/index.vue
+++ b/frontend/src/views/setting/backup-account/oss/index.vue
@@ -1,87 +1,62 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
-            </template>
-            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="ossData.rowData">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
-                            <el-tag>{{ $t('setting.' + ossData.rowData!.type) }}</el-tag>
-                        </el-form-item>
-                        <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
-                            <el-input v-model.trim="ossData.rowData!.accessKey" />
-                        </el-form-item>
-                        <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
-                            <el-input show-password clearable v-model.trim="ossData.rowData!.credential" />
-                        </el-form-item>
-                        <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
-                            <el-input v-model="ossData.rowData!.varsJson['endpointItem']">
-                                <template #prepend>
-                                    <el-select v-model.trim="endpointProto" style="width: 100px">
-                                        <el-option label="http" value="http" />
-                                        <el-option label="https" value="https" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select
-                                @change="errBuckets = false"
-                                style="width: 80%"
-                                v-model="ossData.rowData!.bucket"
-                            >
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.scType')"
-                            prop="varsJson.scType"
-                            :rules="[Rules.requiredSelect]"
-                        >
-                            <el-select v-model="ossData.rowData!.varsJson['scType']">
-                                <el-option value="Standard" :label="$t('setting.scStandard')" />
-                                <el-option value="IA" :label="$t('setting.scStandard_IA')" />
-                                <el-option value="Archive" :label="$t('setting.scArchive')" />
-                                <el-option value="ColdArchive" :label="$t('setting.scDeep_Archive')" />
-                            </el-select>
-                            <el-alert
-                                v-if="ossData.rowData!.varsJson['scType'] === 'Archive' || ossData.rowData!.varsJson['scType'] === 'ColdArchive'"
-                                style="margin-top: 10px"
-                                :closable="false"
-                                type="warning"
-                                :title="$t('setting.archiveHelper')"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
-                            <el-input clearable v-model.trim="ossData.rowData!.backupPath" placeholder="/1panel" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="handleClose">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
+        <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="ossData.rowData">
+            <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                <el-tag>{{ $t('setting.' + ossData.rowData!.type) }}</el-tag>
+            </el-form-item>
+            <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
+                <el-input v-model.trim="ossData.rowData!.accessKey" />
+            </el-form-item>
+            <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
+                <el-input show-password clearable v-model.trim="ossData.rowData!.credential" />
+            </el-form-item>
+            <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
+                <el-input v-model="ossData.rowData!.varsJson['endpointItem']">
+                    <template #prepend>
+                        <el-select v-model.trim="endpointProto" class="!w-full">
+                            <el-option label="http" value="http" />
+                            <el-option label="https" value="https" />
+                        </el-select>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="Bucket" prop="bucket">
+                <el-select @change="errBuckets = false" class="!w-4/5" v-model="ossData.rowData!.bucket">
+                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                </el-select>
+                <el-button class="!w-1/5" plain @click="getBuckets(formRef)">
+                    {{ $t('setting.loadBucket') }}
+                </el-button>
+                <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('setting.scType')" prop="varsJson.scType" :rules="[Rules.requiredSelect]">
+                <el-select v-model="ossData.rowData!.varsJson['scType']">
+                    <el-option value="Standard" :label="$t('setting.scStandard')" />
+                    <el-option value="IA" :label="$t('setting.scStandard_IA')" />
+                    <el-option value="Archive" :label="$t('setting.scArchive')" />
+                    <el-option value="ColdArchive" :label="$t('setting.scDeep_Archive')" />
+                </el-select>
+                <el-alert
+                    v-if="ossData.rowData!.varsJson['scType'] === 'Archive' || ossData.rowData!.varsJson['scType'] === 'ColdArchive'"
+                    class="mt-2.5"
+                    :closable="false"
+                    type="warning"
+                    :title="$t('setting.archiveHelper')"
+                />
+            </el-form-item>
+            <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
+                <el-input clearable v-model.trim="ossData.rowData!.backupPath" placeholder="/1panel" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="handleClose">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -90,7 +65,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
 import { deepCopy, spliceHttp, splitHttp } from '@/utils/util';
 import { MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/setting/backup-account/s3/index.vue b/frontend/src/views/setting/backup-account/s3/index.vue
index 7ac43eae9..304548b60 100644
--- a/frontend/src/views/setting/backup-account/s3/index.vue
+++ b/frontend/src/views/setting/backup-account/s3/index.vue
@@ -1,86 +1,65 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
-            </template>
-            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="s3Data.rowData">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
-                            <el-tag>{{ $t('setting.' + s3Data.rowData!.type) }}</el-tag>
-                        </el-form-item>
-                        <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
-                            <el-input v-model.trim="s3Data.rowData!.accessKey" />
-                        </el-form-item>
-                        <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
-                            <el-input show-password clearable v-model.trim="s3Data.rowData!.credential" />
-                        </el-form-item>
-                        <el-form-item label="Region" prop="varsJson.region" :rules="Rules.requiredInput">
-                            <el-input pro v-model.trim="s3Data.rowData!.varsJson['region']" />
-                        </el-form-item>
-                        <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
-                            <el-input v-model="s3Data.rowData!.varsJson['endpointItem']">
-                                <template #prepend>
-                                    <el-select v-model.trim="endpointProto" style="width: 100px">
-                                        <el-option label="http" value="http" />
-                                        <el-option label="https" value="https" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item label="Bucket" prop="bucket">
-                            <el-select @change="errBuckets = false" style="width: 80%" v-model="s3Data.rowData!.bucket">
-                                <el-option v-for="item in buckets" :key="item" :value="item" />
-                            </el-select>
-                            <el-button style="width: 20%" plain @click="getBuckets(formRef)">
-                                {{ $t('setting.loadBucket') }}
-                            </el-button>
-                            <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.scType')"
-                            prop="varsJson.scType"
-                            :rules="[Rules.requiredSelect]"
-                        >
-                            <el-select v-model="s3Data.rowData!.varsJson['scType']">
-                                <el-option value="STANDARD" :label="$t('setting.scStandard')" />
-                                <el-option value="STANDARD_IA" :label="$t('setting.scStandard_IA')" />
-                                <el-option value="GLACIER" :label="$t('setting.scArchive')" />
-                                <el-option value="DEEP_ARCHIVE" :label="$t('setting.scDeep_Archive')" />
-                            </el-select>
-                            <el-alert
-                                v-if="s3Data.rowData!.varsJson['scType'] === 'Archive' || s3Data.rowData!.varsJson['scType'] === 'ColdArchive'"
-                                style="margin-top: 10px"
-                                :closable="false"
-                                type="warning"
-                                :title="$t('setting.archiveHelper')"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
-                            <el-input clearable v-model.trim="s3Data.rowData!.backupPath" placeholder="/1panel" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="handleClose">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
+        <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="s3Data.rowData">
+            <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                <el-tag>{{ $t('setting.' + s3Data.rowData!.type) }}</el-tag>
+            </el-form-item>
+            <el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
+                <el-input v-model.trim="s3Data.rowData!.accessKey" />
+            </el-form-item>
+            <el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
+                <el-input show-password clearable v-model.trim="s3Data.rowData!.credential" />
+            </el-form-item>
+            <el-form-item label="Region" prop="varsJson.region" :rules="Rules.requiredInput">
+                <el-input pro v-model.trim="s3Data.rowData!.varsJson['region']" />
+            </el-form-item>
+            <el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
+                <el-input v-model="s3Data.rowData!.varsJson['endpointItem']">
+                    <template #prepend>
+                        <el-select v-model.trim="endpointProto" class="p-w-100">
+                            <el-option label="http" value="http" />
+                            <el-option label="https" value="https" />
+                        </el-select>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="Bucket" prop="bucket">
+                <el-select @change="errBuckets = false" class="!w-4/5" v-model="s3Data.rowData!.bucket">
+                    <el-option v-for="item in buckets" :key="item" :value="item" />
+                </el-select>
+                <el-button class="!w-1/5" plain @click="getBuckets(formRef)">
+                    {{ $t('setting.loadBucket') }}
+                </el-button>
+                <span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('setting.scType')" prop="varsJson.scType" :rules="[Rules.requiredSelect]">
+                <el-select v-model="s3Data.rowData!.varsJson['scType']">
+                    <el-option value="STANDARD" :label="$t('setting.scStandard')" />
+                    <el-option value="STANDARD_IA" :label="$t('setting.scStandard_IA')" />
+                    <el-option value="GLACIER" :label="$t('setting.scArchive')" />
+                    <el-option value="DEEP_ARCHIVE" :label="$t('setting.scDeep_Archive')" />
+                </el-select>
+                <el-alert
+                    v-if="s3Data.rowData!.varsJson['scType'] === 'Archive' || s3Data.rowData!.varsJson['scType'] === 'ColdArchive'"
+                    class="mt-2.5"
+                    :closable="false"
+                    type="warning"
+                    :title="$t('setting.archiveHelper')"
+                />
+            </el-form-item>
+            <el-form-item :label="$t('setting.backupDir')" prop="backupPath">
+                <el-input clearable v-model.trim="s3Data.rowData!.backupPath" placeholder="/1panel" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="handleClose">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -89,7 +68,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
 import { deepCopy, spliceHttp, splitHttp } from '@/utils/util';
 import { MsgSuccess } from '@/utils/message';
diff --git a/frontend/src/views/setting/backup-account/sftp/index.vue b/frontend/src/views/setting/backup-account/sftp/index.vue
index 352d77c84..6fa311244 100644
--- a/frontend/src/views/setting/backup-account/sftp/index.vue
+++ b/frontend/src/views/setting/backup-account/sftp/index.vue
@@ -1,68 +1,34 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
-            </template>
-            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="sftpData.rowData">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
-                            <el-tag>{{ $t('setting.' + sftpData.rowData!.type) }}</el-tag>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.address')" prop="varsJson.address" :rules="Rules.host">
-                            <el-input v-model.trim="sftpData.rowData!.varsJson['address']" />
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.port')" prop="varsJson.port" :rules="[Rules.port]">
-                            <el-input-number
-                                :min="0"
-                                :max="65535"
-                                v-model.number="sftpData.rowData!.varsJson['port']"
-                            />
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('commons.login.username')"
-                            prop="accessKey"
-                            :rules="[Rules.requiredInput]"
-                        >
-                            <el-input v-model.trim="sftpData.rowData!.accessKey" />
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('commons.login.password')"
-                            prop="credential"
-                            :rules="[Rules.requiredInput]"
-                        >
-                            <el-input
-                                type="password"
-                                clearable
-                                show-password
-                                v-model.trim="sftpData.rowData!.credential"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.backupDir')" prop="bucket" :rules="[Rules.requiredInput]">
-                            <el-input v-model.trim="sftpData.rowData!.bucket" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="handleClose">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
+        <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="sftpData.rowData">
+            <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                <el-tag>{{ $t('setting.' + sftpData.rowData!.type) }}</el-tag>
+            </el-form-item>
+            <el-form-item :label="$t('setting.address')" prop="varsJson.address" :rules="Rules.host">
+                <el-input v-model.trim="sftpData.rowData!.varsJson['address']" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.port')" prop="varsJson.port" :rules="[Rules.port]">
+                <el-input-number :min="0" :max="65535" v-model.number="sftpData.rowData!.varsJson['port']" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.username')" prop="accessKey" :rules="[Rules.requiredInput]">
+                <el-input v-model.trim="sftpData.rowData!.accessKey" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.password')" prop="credential" :rules="[Rules.requiredInput]">
+                <el-input type="password" clearable show-password v-model.trim="sftpData.rowData!.credential" />
+            </el-form-item>
+            <el-form-item :label="$t('setting.backupDir')" prop="bucket" :rules="[Rules.requiredInput]">
+                <el-input v-model.trim="sftpData.rowData!.bucket" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="handleClose">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -71,7 +37,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/setting/backup-account/webdav/index.vue b/frontend/src/views/setting/backup-account/webdav/index.vue
index 5d6273d3c..19d380d4b 100644
--- a/frontend/src/views/setting/backup-account/webdav/index.vue
+++ b/frontend/src/views/setting/backup-account/webdav/index.vue
@@ -1,76 +1,37 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
-            </template>
-            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="webdavData.rowData">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
-                            <el-tag>{{ $t('setting.' + webdavData.rowData!.type) }}</el-tag>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.address')"
-                            prop="varsJson.address"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input v-model="webdavData.rowData!.varsJson['address']" />
-                            <span class="input-help">
-                                {{ $t('setting.WebDAVAlist') }}
-                                <el-link
-                                    style="font-size: 12px; margin-left: 5px"
-                                    icon="Position"
-                                    @click="toDoc()"
-                                    type="primary"
-                                >
-                                    {{ $t('firewall.quickJump') }}
-                                </el-link>
-                            </span>
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('commons.login.username')"
-                            prop="accessKey"
-                            :rules="[Rules.requiredInput]"
-                        >
-                            <el-input v-model.trim="webdavData.rowData!.accessKey" />
-                        </el-form-item>
-                        <el-form-item
-                            :label="$t('commons.login.password')"
-                            prop="credential"
-                            :rules="[Rules.requiredInput]"
-                        >
-                            <el-input
-                                type="password"
-                                clearable
-                                show-password
-                                v-model.trim="webdavData.rowData!.credential"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.backupDir')" prop="bucket" :rules="[Rules.requiredInput]">
-                            <el-input v-model.trim="webdavData.rowData!.bucket" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="handleClose">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
+    <DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
+        <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="webdavData.rowData">
+            <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                <el-tag>{{ $t('setting.' + webdavData.rowData!.type) }}</el-tag>
+            </el-form-item>
+            <el-form-item :label="$t('setting.address')" prop="varsJson.address" :rules="Rules.requiredInput">
+                <el-input v-model="webdavData.rowData!.varsJson['address']" />
+                <span class="input-help">
+                    {{ $t('setting.WebDAVAlist') }}
+                    <el-link style="font-size: 12px; margin-left: 5px" icon="Position" @click="toDoc()" type="primary">
+                        {{ $t('firewall.quickJump') }}
+                    </el-link>
                 </span>
-            </template>
-        </el-drawer>
-    </div>
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.username')" prop="accessKey" :rules="[Rules.requiredInput]">
+                <el-input v-model.trim="webdavData.rowData!.accessKey" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.password')" prop="credential" :rules="[Rules.requiredInput]">
+                <el-input type="password" clearable show-password v-model.trim="webdavData.rowData!.credential" />
+            </el-form-item>
+            <el-form-item :label="$t('setting.backupDir')" prop="bucket" :rules="[Rules.requiredInput]">
+                <el-input v-model.trim="webdavData.rowData!.bucket" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="handleClose">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -79,7 +40,6 @@ import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
 import { Backup } from '@/api/interface/backup';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 
diff --git a/frontend/src/views/setting/panel/default-network/index.vue b/frontend/src/views/setting/panel/default-network/index.vue
index 8421743c9..6f55635e0 100644
--- a/frontend/src/views/setting/panel/default-network/index.vue
+++ b/frontend/src/views/setting/panel/default-network/index.vue
@@ -1,45 +1,26 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.defaultNetwork')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('setting.defaultNetwork')"
-                            prop="defaultNetwork"
-                            :rules="Rules.requiredSelect"
-                        >
-                            <el-select v-model="form.defaultNetwork" filterable>
-                                <el-option
-                                    v-for="item in netOptions"
-                                    :key="item"
-                                    :label="item == 'all' ? $t('commons.table.all') : item"
-                                    :value="item"
-                                />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.defaultNetwork')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('setting.defaultNetwork')" prop="defaultNetwork" :rules="Rules.requiredSelect">
+                <el-select v-model="form.defaultNetwork" filterable>
+                    <el-option
+                        v-for="item in netOptions"
+                        :key="item"
+                        :label="item == 'all' ? $t('commons.table.all') : item"
+                        :value="item"
+                    />
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -48,7 +29,6 @@ import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { getNetworkOptions } from '@/api/modules/host';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/setting/panel/hidemenu/index.vue b/frontend/src/views/setting/panel/hidemenu/index.vue
index 2e6e146d3..288564f3f 100644
--- a/frontend/src/views/setting/panel/hidemenu/index.vue
+++ b/frontend/src/views/setting/panel/hidemenu/index.vue
@@ -1,20 +1,10 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.advancedMenuHide')" :back="handleClose" />
-            </template>
-
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.advancedMenuHide')" :back="handleClose" size="small">
+        <template #content>
             <ComplexTable
+                class="mb-5 w-full"
                 :data="treeData.hideMenu"
                 :show-header="false"
-                style="width: 100%; margin-bottom: 20px"
                 row-key="id"
                 default-expand-all
             >
@@ -29,22 +19,20 @@
                     </template>
                 </el-table-column>
             </ComplexTable>
-
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="saveHideMenus">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+        </template>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="saveHideMenus">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import { updateMenu } from '@/api/modules/setting';
diff --git a/frontend/src/views/setting/panel/name/index.vue b/frontend/src/views/setting/panel/name/index.vue
index 3f957efcb..5b5f13510 100644
--- a/frontend/src/views/setting/panel/name/index.vue
+++ b/frontend/src/views/setting/panel/name/index.vue
@@ -1,41 +1,17 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.title')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :model="form"
-                :rules="rules"
-                @submit.prevent
-                v-loading="loading"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.title')" prop="panelName">
-                            <el-input clearable v-model="form.panelName" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSavePanelName(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.title')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" :rules="rules" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('setting.title')" prop="panelName">
+                <el-input clearable v-model="form.panelName" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSavePanelName(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { computed, reactive, ref } from 'vue';
@@ -44,7 +20,6 @@ import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { FormInstance } from 'element-plus';
 import { GlobalStore } from '@/store';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 const globalStore = GlobalStore();
 const themeConfig = computed(() => globalStore.themeConfig);
 
diff --git a/frontend/src/views/setting/panel/password/index.vue b/frontend/src/views/setting/panel/password/index.vue
index da6c8c0c1..5a1e1a0ac 100644
--- a/frontend/src/views/setting/panel/password/index.vue
+++ b/frontend/src/views/setting/panel/password/index.vue
@@ -1,58 +1,36 @@
 <template>
-    <div v-loading="loading">
-        <el-drawer
-            v-model="passwordVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.changePassword')" :back="handleClose" />
-            </template>
-            <el-form ref="passFormRef" label-position="top" :model="passForm" :rules="passRules">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.oldPassword')" prop="oldPassword">
-                            <el-input type="password" show-password clearable v-model.trim="passForm.oldPassword" />
-                        </el-form-item>
-                        <el-form-item
-                            v-if="complexityVerification === 'disable'"
-                            :label="$t('setting.newPassword')"
-                            prop="newPassword"
-                        >
-                            <el-input type="password" show-password clearable v-model.trim="passForm.newPassword" />
-                        </el-form-item>
-                        <el-form-item
-                            v-if="complexityVerification === 'enable'"
-                            :label="$t('setting.newPassword')"
-                            prop="newPasswordComplexity"
-                        >
-                            <el-input
-                                type="password"
-                                show-password
-                                clearable
-                                v-model.trim="passForm.newPasswordComplexity"
-                            />
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.retryPassword')" prop="retryPassword">
-                            <el-input type="password" show-password clearable v-model.trim="passForm.retryPassword" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="passwordVisible = false">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="submitChangePassword(passFormRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="passwordVisible" :header="$t('setting.changePassword')" :back="handleClose" size="small">
+        <el-form ref="passFormRef" label-position="top" :model="passForm" :rules="passRules" v-loading="loading">
+            <el-form-item :label="$t('setting.oldPassword')" prop="oldPassword">
+                <el-input type="password" show-password clearable v-model.trim="passForm.oldPassword" />
+            </el-form-item>
+            <el-form-item
+                v-if="complexityVerification === 'disable'"
+                :label="$t('setting.newPassword')"
+                prop="newPassword"
+            >
+                <el-input type="password" show-password clearable v-model.trim="passForm.newPassword" />
+            </el-form-item>
+            <el-form-item
+                v-if="complexityVerification === 'enable'"
+                :label="$t('setting.newPassword')"
+                prop="newPasswordComplexity"
+            >
+                <el-input type="password" show-password clearable v-model.trim="passForm.newPasswordComplexity" />
+            </el-form-item>
+            <el-form-item :label="$t('setting.retryPassword')" prop="retryPassword">
+                <el-input type="password" show-password clearable v-model.trim="passForm.retryPassword" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="passwordVisible = false">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="submitChangePassword(passFormRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -64,7 +42,6 @@ import { FormInstance } from 'element-plus';
 import { GlobalStore } from '@/store';
 import { reactive, ref } from 'vue';
 import { updatePassword } from '@/api/modules/setting';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { logOutApi } from '@/api/modules/auth';
 
 const globalStore = GlobalStore();
diff --git a/frontend/src/views/setting/panel/proxy/index.vue b/frontend/src/views/setting/panel/proxy/index.vue
index d379a07c2..6e868ee6b 100644
--- a/frontend/src/views/setting/panel/proxy/index.vue
+++ b/frontend/src/views/setting/panel/proxy/index.vue
@@ -1,80 +1,60 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="passwordVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.proxy')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-alert class="common-prompt" :closable="false" type="warning">
-                            <template #default>
-                                {{ $t('setting.proxyHelper') }}
-                                <ul style="margin-left: -20px">
-                                    <li v-if="isProductPro">{{ $t('setting.proxyHelper1') }}</li>
-                                    <li v-if="isProductPro">{{ $t('setting.proxyHelper2') }}</li>
-                                    <li>{{ $t('setting.proxyHelper3') }}</li>
-                                </ul>
-                            </template>
-                        </el-alert>
-                        <el-form-item :label="$t('setting.proxyType')" prop="proxyType">
-                            <el-select v-model="form.proxyType" clearable>
-                                <el-option value="close" :label="$t('commons.button.close')" />
-                                <el-option value="socks5" label="SOCKS5" />
-                                <el-option value="http" label="HTTP" />
-                                <el-option value="https" label="HTTPS" />
-                            </el-select>
-                        </el-form-item>
-                        <div v-if="form.proxyType !== 'close'">
-                            <el-form-item :label="$t('setting.proxyUrl')" prop="proxyUrl">
-                                <el-input
-                                    clearable
-                                    v-model.trim="form.proxyUrl"
-                                    v-if="form.proxyType == 'http' || form.proxyType === 'https'"
-                                >
-                                    <template #prepend>
-                                        <span>{{ form.proxyType }}</span>
-                                    </template>
-                                </el-input>
-                                <el-input clearable v-model.trim="form.proxyUrl" v-else />
-                            </el-form-item>
-                            <el-form-item :label="$t('setting.proxyPort')" prop="proxyPortItem">
-                                <el-input clearable type="number" v-model.number="form.proxyPortItem" />
-                            </el-form-item>
-                            <el-form-item :label="$t('commons.login.username')" prop="proxyUser">
-                                <el-input clearable v-model.trim="form.proxyUser" />
-                            </el-form-item>
-                            <el-form-item :label="$t('commons.login.password')" prop="proxyPasswd">
-                                <el-input type="password" show-password clearable v-model.trim="form.proxyPasswd" />
-                            </el-form-item>
-                            <el-form-item>
-                                <el-checkbox
-                                    v-model="form.proxyPasswdKeepItem"
-                                    :label="$t('setting.proxyPasswdKeep')"
-                                />
-                            </el-form-item>
-                        </div>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="passwordVisible = false">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="submitChangePassword(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="passwordVisible" :header="$t('setting.proxy')" :back="handleClose" size="large">
+        <el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
+            <el-alert class="common-prompt" :closable="false" type="warning">
+                <template #default>
+                    {{ $t('setting.proxyHelper') }}
+                    <ul class="-ml-5">
+                        <li v-if="isProductPro">{{ $t('setting.proxyHelper1') }}</li>
+                        <li v-if="isProductPro">{{ $t('setting.proxyHelper2') }}</li>
+                        <li>{{ $t('setting.proxyHelper3') }}</li>
+                    </ul>
+                </template>
+            </el-alert>
+            <el-form-item :label="$t('setting.proxyType')" prop="proxyType">
+                <el-select v-model="form.proxyType" clearable>
+                    <el-option value="close" :label="$t('commons.button.close')" />
+                    <el-option value="socks5" label="SOCKS5" />
+                    <el-option value="http" label="HTTP" />
+                    <el-option value="https" label="HTTPS" />
+                </el-select>
+            </el-form-item>
+            <div v-if="form.proxyType !== 'close'">
+                <el-form-item :label="$t('setting.proxyUrl')" prop="proxyUrl">
+                    <el-input
+                        clearable
+                        v-model.trim="form.proxyUrl"
+                        v-if="form.proxyType == 'http' || form.proxyType === 'https'"
+                    >
+                        <template #prepend>
+                            <span>{{ form.proxyType }}</span>
+                        </template>
+                    </el-input>
+                    <el-input clearable v-model.trim="form.proxyUrl" v-else />
+                </el-form-item>
+                <el-form-item :label="$t('setting.proxyPort')" prop="proxyPortItem">
+                    <el-input clearable type="number" v-model.number="form.proxyPortItem" />
+                </el-form-item>
+                <el-form-item :label="$t('commons.login.username')" prop="proxyUser">
+                    <el-input clearable v-model.trim="form.proxyUser" />
+                </el-form-item>
+                <el-form-item :label="$t('commons.login.password')" prop="proxyPasswd">
+                    <el-input type="password" show-password clearable v-model.trim="form.proxyPasswd" />
+                </el-form-item>
+                <el-form-item>
+                    <el-checkbox v-model="form.proxyPasswdKeepItem" :label="$t('setting.proxyPasswdKeep')" />
+                </el-form-item>
+            </div>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="passwordVisible = false">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="submitChangePassword(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -83,7 +63,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateProxy } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 import { storeToRefs } from 'pinia';
diff --git a/frontend/src/views/setting/panel/systemip/index.vue b/frontend/src/views/setting/panel/systemip/index.vue
index 30f36fb3f..3dddc6d5e 100644
--- a/frontend/src/views/setting/panel/systemip/index.vue
+++ b/frontend/src/views/setting/panel/systemip/index.vue
@@ -1,42 +1,18 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.systemIP')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :model="form"
-                :rules="rules"
-                @submit.prevent
-                v-loading="loading"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.systemIP')" prop="systemIP">
-                            <el-input clearable v-model="form.systemIP" />
-                            <span class="input-help">{{ $t('commons.rule.hostHelper') }}</span>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSaveSystemIP(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.systemIP')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" :rules="rules" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('setting.systemIP')" prop="systemIP">
+                <el-input clearable v-model="form.systemIP" />
+                <span class="input-help">{{ $t('commons.rule.hostHelper') }}</span>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSaveSystemIP(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -44,7 +20,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { FormInstance } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { checkDomain, checkIpV4V6 } from '@/utils/util';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/setting/panel/timeout/index.vue b/frontend/src/views/setting/panel/timeout/index.vue
index d4985cfb5..029aee645 100644
--- a/frontend/src/views/setting/panel/timeout/index.vue
+++ b/frontend/src/views/setting/panel/timeout/index.vue
@@ -1,41 +1,17 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.sessionTimeout')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :rules="rules"
-                :model="form"
-                @submit.prevent
-                v-loading="loading"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
-                            <el-input clearable v-model.number="form.sessionTimeout" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSaveTimeout(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.sessionTimeout')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :rules="rules" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
+                <el-input clearable v-model.number="form.sessionTimeout" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSaveTimeout(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -43,7 +19,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateSetting } from '@/api/modules/setting';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/setting/panel/username/index.vue b/frontend/src/views/setting/panel/username/index.vue
index 6b32478e6..a7bce9c60 100644
--- a/frontend/src/views/setting/panel/username/index.vue
+++ b/frontend/src/views/setting/panel/username/index.vue
@@ -1,41 +1,17 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.user')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :model="form"
-                @submit.prevent
-                v-loading="loading"
-                :rules="rules"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.user')" prop="userName">
-                            <el-input clearable v-model.trim="form.userName" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSaveUserName(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.user')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading" :rules="rules">
+            <el-form-item :label="$t('setting.user')" prop="userName">
+                <el-input clearable v-model.trim="form.userName" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSaveUserName(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -46,7 +22,6 @@ import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { logOutApi } from '@/api/modules/auth';
 import router from '@/routers';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
diff --git a/frontend/src/views/setting/safe/allowips/index.vue b/frontend/src/views/setting/safe/allowips/index.vue
index 38c91d636..4b2ca9736 100644
--- a/frontend/src/views/setting/safe/allowips/index.vue
+++ b/frontend/src/views/setting/safe/allowips/index.vue
@@ -1,47 +1,18 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.allowIPs')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                @submit.prevent
-                :model="form"
-                :rules="rules"
-                v-loading="loading"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.allowIPs')" prop="allowIPs">
-                            <el-input
-                                type="textarea"
-                                :placeholder="$t('setting.allowIPEgs')"
-                                :rows="3"
-                                v-model="form.allowIPs"
-                            />
-                            <span class="input-help">{{ $t('setting.allowIPsHelper1') }}</span>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.allowIPs')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" @submit.prevent :model="form" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('setting.allowIPs')" prop="allowIPs">
+                <el-input type="textarea" :placeholder="$t('setting.allowIPEgs')" :rows="3" v-model="form.allowIPs" />
+                <span class="input-help">{{ $t('setting.allowIPsHelper1') }}</span>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -50,7 +21,6 @@ import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { checkCidr, checkIpV4V6 } from '@/utils/util';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
diff --git a/frontend/src/views/setting/safe/bind/index.vue b/frontend/src/views/setting/safe/bind/index.vue
index ea7760056..5e60f507e 100644
--- a/frontend/src/views/setting/safe/bind/index.vue
+++ b/frontend/src/views/setting/safe/bind/index.vue
@@ -1,62 +1,47 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.bindInfo')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.ipv6')" prop="ipv6" :rules="Rules.requiredSelect">
-                            <el-radio-group style="width: 100%" v-model="form.ipv6" @change="onChangeMode()">
-                                <el-radio value="enable">{{ $t('commons.button.enable') }}</el-radio>
-                                <el-radio value="disable">{{ $t('commons.button.disable') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item
-                            v-if="form.ipv6 === 'disable'"
-                            :label="$t('setting.bindAddress')"
-                            prop="bindAddress"
-                            :rules="Rules.ip"
-                        >
-                            <el-checkbox v-model="form.input" :label="$t('container.input')" />
-                            <el-select v-if="!form.input" clearable v-model="form.bindAddress">
-                                <el-option value="0.0.0.0" label="0.0.0.0"></el-option>
-                                <div v-for="item in interfaceOptions" :key="item">
-                                    <el-option v-if="item.indexOf(':') === -1" :value="item" :label="item" />
-                                </div>
-                            </el-select>
-                            <el-input v-else clearable v-model="form.bindAddress"></el-input>
-                        </el-form-item>
-                        <el-form-item v-else :label="$t('setting.bindAddress')" prop="bindAddress" :rules="Rules.ipV6">
-                            <el-checkbox v-model="form.input" :label="$t('container.input')" />
-                            <el-select v-if="!form.input" clearable v-model="form.bindAddress">
-                                <el-option value="::" label="::"></el-option>
-                                <div v-for="item in interfaceOptions" :key="item">
-                                    <el-option v-if="item.indexOf(':') !== -1" :value="item" :label="item" />
-                                </div>
-                            </el-select>
-                            <el-input v-else clearable v-model="form.bindAddress"></el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSavePort(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.bindInfo')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('setting.ipv6')" prop="ipv6" :rules="Rules.requiredSelect">
+                <el-radio-group style="width: 100%" v-model="form.ipv6" @change="onChangeMode()">
+                    <el-radio value="enable">{{ $t('commons.button.enable') }}</el-radio>
+                    <el-radio value="disable">{{ $t('commons.button.disable') }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item
+                v-if="form.ipv6 === 'disable'"
+                :label="$t('setting.bindAddress')"
+                prop="bindAddress"
+                :rules="Rules.ip"
+            >
+                <el-checkbox v-model="form.input" :label="$t('container.input')" />
+                <el-select v-if="!form.input" clearable v-model="form.bindAddress">
+                    <el-option value="0.0.0.0" label="0.0.0.0"></el-option>
+                    <div v-for="item in interfaceOptions" :key="item">
+                        <el-option v-if="item.indexOf(':') === -1" :value="item" :label="item" />
+                    </div>
+                </el-select>
+                <el-input v-else clearable v-model="form.bindAddress"></el-input>
+            </el-form-item>
+            <el-form-item v-else :label="$t('setting.bindAddress')" prop="bindAddress" :rules="Rules.ipV6">
+                <el-checkbox v-model="form.input" :label="$t('container.input')" />
+                <el-select v-if="!form.input" clearable v-model="form.bindAddress">
+                    <el-option value="::" label="::"></el-option>
+                    <div v-for="item in interfaceOptions" :key="item">
+                        <el-option v-if="item.indexOf(':') !== -1" :value="item" :label="item" />
+                    </div>
+                </el-select>
+                <el-input v-else clearable v-model="form.bindAddress"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSavePort(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -66,7 +51,6 @@ import { updateBindInfo, loadInterfaceAddr } from '@/api/modules/setting';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { GlobalStore } from '@/store';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 const globalStore = GlobalStore();
 
 interface DialogProps {
diff --git a/frontend/src/views/setting/safe/domain/index.vue b/frontend/src/views/setting/safe/domain/index.vue
index 11ffce266..0cd40b571 100644
--- a/frontend/src/views/setting/safe/domain/index.vue
+++ b/frontend/src/views/setting/safe/domain/index.vue
@@ -1,42 +1,18 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.bindDomain')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :rules="rules"
-                :model="form"
-                @submit.prevent
-                v-loading="loading"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.bindDomain')" prop="bindDomain">
-                            <el-input clearable v-model="form.bindDomain" />
-                            <span class="input-help">{{ $t('setting.bindDomainHelper1') }}</span>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSavePort(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.bindDomain')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :rules="rules" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('setting.bindDomain')" prop="bindDomain">
+                <el-input clearable v-model="form.bindDomain" />
+                <span class="input-help">{{ $t('setting.bindDomainHelper1') }}</span>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSavePort(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -44,7 +20,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { ElMessageBox, FormInstance } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
diff --git a/frontend/src/views/setting/safe/entrance/index.vue b/frontend/src/views/setting/safe/entrance/index.vue
index 2e42aeaf1..cf4cc5e1a 100644
--- a/frontend/src/views/setting/safe/entrance/index.vue
+++ b/frontend/src/views/setting/safe/entrance/index.vue
@@ -1,51 +1,27 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.entrance')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :model="form"
-                @submit.prevent
-                v-loading="loading"
-                :rules="rules"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.entrance')" prop="securityEntrance">
-                            <el-input clearable v-model="form.securityEntrance">
-                                <template #append>
-                                    <el-button @click="random">{{ $t('setting.randomGenerate') }}</el-button>
-                                </template>
-                            </el-input>
-                            <span class="input-help">
-                                {{ $t('setting.entranceInputHelper') }}
-                            </span>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-checkbox v-model="show" :label="$t('setting.showEntrance')" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="submitEntrance(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.entrance')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading" :rules="rules">
+            <el-form-item :label="$t('setting.entrance')" prop="securityEntrance">
+                <el-input clearable v-model="form.securityEntrance">
+                    <template #append>
+                        <el-button @click="random">{{ $t('setting.randomGenerate') }}</el-button>
+                    </template>
+                </el-input>
+                <span class="input-help">
+                    {{ $t('setting.entranceInputHelper') }}
                 </span>
-            </template>
-        </el-drawer>
-    </div>
+            </el-form-item>
+            <el-form-item>
+                <el-checkbox v-model="show" :label="$t('setting.showEntrance')" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="submitEntrance(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -55,7 +31,6 @@ import { updateSetting } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
 import { getRandomStr } from '@/utils/util';
 import { FormInstance } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 const globalStore = GlobalStore();
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/setting/safe/mfa/index.vue b/frontend/src/views/setting/safe/mfa/index.vue
index 2a2320b29..2e7819826 100644
--- a/frontend/src/views/setting/safe/mfa/index.vue
+++ b/frontend/src/views/setting/safe/mfa/index.vue
@@ -1,85 +1,60 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            @close="handleClose"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.mfa')" :back="handleClose" />
-            </template>
-            <el-alert class="common-prompt" :closable="false" type="warning">
-                <template #default>
-                    <span>
-                        <span>{{ $t('setting.mfaAlert') }}</span>
-                    </span>
-                </template>
-            </el-alert>
-            <el-form
-                :model="form"
-                ref="formRef"
-                @submit.prevent
-                v-loading="loading"
-                label-position="top"
-                :rules="rules"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.mfaHelper1')">
-                            <ul class="help-ul">
-                                <li>Google Authenticator</li>
-                                <li>Microsoft Authenticator</li>
-                                <li>1Password</li>
-                                <li>LastPass</li>
-                                <li>Authenticator</li>
-                            </ul>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.mfaHelper2')">
-                            <el-image class="w-32 h-32" :src="qrImage" />
-                            <span class="input-help flex items-center">
-                                <span>{{ $t('setting.secret') }}: {{ form.secret }}</span>
-                                <CopyButton :content="form.secret" type="icon" />
-                            </span>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.title')" prop="title">
-                            <el-input v-model="form.title">
-                                <template #append>
-                                    <el-button @click="loadMfaCodeBefore(formRef)">
-                                        {{ $t('commons.button.save') }}
-                                    </el-button>
-                                </template>
-                            </el-input>
-                            <span class="input-help">{{ $t('setting.mfaTitleHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.mfaInterval')" prop="interval">
-                            <el-input v-model.number="form.interval">
-                                <template #append>
-                                    <el-button @click="loadMfaCodeBefore(formRef)">
-                                        {{ $t('commons.button.save') }}
-                                    </el-button>
-                                </template>
-                            </el-input>
-                            <span class="input-help">{{ $t('setting.mfaIntervalHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.mfaCode')" prop="code">
-                            <el-input v-model="form.code"></el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onBind(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.mfa')" :back="handleClose" size="small">
+        <el-alert class="common-prompt" :closable="false" type="warning">
+            <template #default>
+                <span>
+                    <span>{{ $t('setting.mfaAlert') }}</span>
                 </span>
             </template>
-        </el-drawer>
-    </div>
+        </el-alert>
+        <el-form :model="form" ref="formRef" @submit.prevent v-loading="loading" label-position="top" :rules="rules">
+            <el-form-item :label="$t('setting.mfaHelper1')">
+                <ul class="help-ul">
+                    <li>Google Authenticator</li>
+                    <li>Microsoft Authenticator</li>
+                    <li>1Password</li>
+                    <li>LastPass</li>
+                    <li>Authenticator</li>
+                </ul>
+            </el-form-item>
+            <el-form-item :label="$t('setting.mfaHelper2')">
+                <el-image class="w-32 h-32" :src="qrImage" />
+                <span class="input-help flex items-center">
+                    <span>{{ $t('setting.secret') }}: {{ form.secret }}</span>
+                    <CopyButton :content="form.secret" type="icon" />
+                </span>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.title')" prop="title">
+                <el-input v-model="form.title">
+                    <template #append>
+                        <el-button @click="loadMfaCodeBefore(formRef)">
+                            {{ $t('commons.button.save') }}
+                        </el-button>
+                    </template>
+                </el-input>
+                <span class="input-help">{{ $t('setting.mfaTitleHelper') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('setting.mfaInterval')" prop="interval">
+                <el-input v-model.number="form.interval">
+                    <template #append>
+                        <el-button @click="loadMfaCodeBefore(formRef)">
+                            {{ $t('commons.button.save') }}
+                        </el-button>
+                    </template>
+                </el-input>
+                <span class="input-help">{{ $t('setting.mfaIntervalHelper') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('setting.mfaCode')" prop="code">
+                <el-input v-model="form.code"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onBind(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { bindMFA, loadMFA } from '@/api/modules/setting';
@@ -88,7 +63,6 @@ import { Rules, checkNumberRange } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const loading = ref();
 const qrImage = ref();
diff --git a/frontend/src/views/setting/safe/port/index.vue b/frontend/src/views/setting/safe/port/index.vue
index 902ce1d43..f92630082 100644
--- a/frontend/src/views/setting/safe/port/index.vue
+++ b/frontend/src/views/setting/safe/port/index.vue
@@ -1,34 +1,17 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.panelPort')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.panelPort')" prop="serverPort" :rules="Rules.port">
-                            <el-input clearable v-model.number="form.serverPort" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSavePort(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.panelPort')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('setting.panelPort')" prop="serverPort" :rules="Rules.port">
+                <el-input clearable v-model.number="form.serverPort" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSavePort(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -38,7 +21,6 @@ import { updatePort } from '@/api/modules/setting';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { GlobalStore } from '@/store';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 const globalStore = GlobalStore();
 
 interface DialogProps {
diff --git a/frontend/src/views/setting/safe/response/index.vue b/frontend/src/views/setting/safe/response/index.vue
index 8115a4a3a..cdb2f8e67 100644
--- a/frontend/src/views/setting/safe/response/index.vue
+++ b/frontend/src/views/setting/safe/response/index.vue
@@ -1,51 +1,24 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.noAuthSetting')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('setting.responseSetting')"
-                            prop="noAuthSetting"
-                            :rules="Rules.requiredSelect"
-                        >
-                            <el-select v-model="form.noAuthSetting">
-                                <el-option
-                                    v-for="item in options"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :value="item.value"
-                                />
-                            </el-select>
-                            <span class="input-help">{{ $t('setting.noAuthSettingHelper') }}</span>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.noAuthSetting')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('setting.responseSetting')" prop="noAuthSetting" :rules="Rules.requiredSelect">
+                <el-select v-model="form.noAuthSetting">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+                <span class="input-help">{{ $t('setting.noAuthSettingHelper') }}</span>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { updateSetting } from '@/api/modules/setting';
diff --git a/frontend/src/views/setting/safe/ssl/index.vue b/frontend/src/views/setting/safe/ssl/index.vue
index d0ecee2de..5be5128f1 100644
--- a/frontend/src/views/setting/safe/ssl/index.vue
+++ b/frontend/src/views/setting/safe/ssl/index.vue
@@ -1,135 +1,117 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            @close="handleClose"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.panelSSL')" :back="handleClose" />
-            </template>
-            <el-alert class="common-prompt" :closable="false" type="error">
-                <template #default>
-                    <span>
-                        <span>{{ $t('setting.panelSSLHelper') }}</span>
-                    </span>
-                </template>
-            </el-alert>
-            <el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.certType')">
-                            <el-radio-group v-model="form.sslType">
-                                <el-radio value="self">{{ $t('setting.selfSigned') }}</el-radio>
-                                <el-radio value="select">{{ $t('setting.select') }}</el-radio>
-                                <el-radio value="import">{{ $t('commons.button.import') }}</el-radio>
-                            </el-radio-group>
-                            <span class="input-help" v-if="form.sslType === 'self'">
-                                {{ $t('setting.selfSignedHelper') }}
-                            </span>
-                        </el-form-item>
-                        <el-form-item v-if="form.sslType === 'import'" :label="$t('commons.button.import')" prop="type">
-                            <el-select v-model="form.itemSSLType">
-                                <el-option :label="$t('website.pasteSSL')" value="paste"></el-option>
-                                <el-option :label="$t('website.localSSL')" value="local"></el-option>
-                            </el-select>
-                        </el-form-item>
-
-                        <el-form-item v-if="form.timeout">
-                            <el-tag>{{ $t('setting.domainOrIP') }} {{ form.domain }}</el-tag>
-                            <el-tag style="margin-left: 5px">{{ $t('setting.timeOut') }} {{ form.timeout }}</el-tag>
-                            <el-button
-                                @click="onDownload"
-                                style="margin-left: 5px"
-                                v-if="form.sslType === 'self'"
-                                type="primary"
-                                link
-                                icon="Download"
-                            >
-                                {{ $t('setting.rootCrtDownload') }}
-                            </el-button>
-                        </el-form-item>
-
-                        <div v-if="form.sslType === 'import' && form.itemSSLType === 'paste'">
-                            <el-form-item :label="$t('website.privateKey')" prop="key">
-                                <el-input v-model="form.key" :rows="5" type="textarea" />
-                            </el-form-item>
-                            <el-form-item class="marginTop" :label="$t('website.certificate')" prop="cert">
-                                <el-input v-model="form.cert" :rows="5" type="textarea" />
-                            </el-form-item>
-                        </div>
-
-                        <div v-if="form.sslType === 'import' && form.itemSSLType === 'local'">
-                            <el-form-item :label="$t('website.privateKey')" prop="key">
-                                <el-input v-model="form.key">
-                                    <template #prepend>
-                                        <FileList @choose="getKeyPath" :dir="false"></FileList>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item class="marginTop" :label="$t('website.certificate')" prop="cert">
-                                <el-input v-model="form.cert">
-                                    <template #prepend>
-                                        <FileList @choose="getCertPath" :dir="false"></FileList>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-                        </div>
-
-                        <div v-if="form.sslType === 'select'">
-                            <el-form-item :label="$t('setting.certificate')" prop="sslID">
-                                <el-select v-model="form.sslID" @change="changeSSl(form.sslID)">
-                                    <el-option
-                                        v-for="(item, index) in sslList"
-                                        :key="index"
-                                        :label="item.primaryDomain"
-                                        :value="item.id"
-                                    ></el-option>
-                                </el-select>
-                            </el-form-item>
-                            <el-descriptions
-                                class="marginTop"
-                                :column="5"
-                                border
-                                direction="vertical"
-                                v-if="form.sslID > 0 && itemSSL"
-                            >
-                                <el-descriptions-item :label="$t('website.primaryDomain')">
-                                    {{ itemSSL.primaryDomain }}
-                                </el-descriptions-item>
-                                <el-descriptions-item :label="$t('website.otherDomains')">
-                                    {{ itemSSL.domains }}
-                                </el-descriptions-item>
-                                <el-descriptions-item :label="$t('ssl.provider')">
-                                    {{ getProvider(itemSSL.provider) }}
-                                </el-descriptions-item>
-                                <el-descriptions-item
-                                    :label="$t('ssl.acmeAccount')"
-                                    v-if="itemSSL.acmeAccount?.email && itemSSL.provider !== 'manual'"
-                                >
-                                    {{ itemSSL.acmeAccount.email }}
-                                </el-descriptions-item>
-                                <el-descriptions-item :label="$t('website.expireDate')">
-                                    {{ dateFormatSimple(itemSSL.expireDate) }}
-                                </el-descriptions-item>
-                            </el-descriptions>
-                        </div>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSaveSSL(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.panelSSL')" :back="handleClose" size="large">
+        <el-alert class="common-prompt" :closable="false" type="error">
+            <template #default>
+                <span>
+                    <span>{{ $t('setting.panelSSLHelper') }}</span>
                 </span>
             </template>
-        </el-drawer>
-    </div>
+        </el-alert>
+        <el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('setting.certType')">
+                <el-radio-group v-model="form.sslType">
+                    <el-radio value="self">{{ $t('setting.selfSigned') }}</el-radio>
+                    <el-radio value="select">{{ $t('setting.select') }}</el-radio>
+                    <el-radio value="import">{{ $t('commons.button.import') }}</el-radio>
+                </el-radio-group>
+                <span class="input-help" v-if="form.sslType === 'self'">
+                    {{ $t('setting.selfSignedHelper') }}
+                </span>
+            </el-form-item>
+            <el-form-item v-if="form.sslType === 'import'" :label="$t('commons.button.import')" prop="type">
+                <el-select v-model="form.itemSSLType">
+                    <el-option :label="$t('website.pasteSSL')" value="paste"></el-option>
+                    <el-option :label="$t('website.localSSL')" value="local"></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item v-if="form.timeout">
+                <el-tag>{{ $t('setting.domainOrIP') }} {{ form.domain }}</el-tag>
+                <el-tag style="margin-left: 5px">{{ $t('setting.timeOut') }} {{ form.timeout }}</el-tag>
+                <el-button
+                    @click="onDownload"
+                    style="margin-left: 5px"
+                    v-if="form.sslType === 'self'"
+                    type="primary"
+                    link
+                    icon="Download"
+                >
+                    {{ $t('setting.rootCrtDownload') }}
+                </el-button>
+            </el-form-item>
+
+            <div v-if="form.sslType === 'import' && form.itemSSLType === 'paste'">
+                <el-form-item :label="$t('website.privateKey')" prop="key">
+                    <el-input v-model="form.key" :rows="5" type="textarea" />
+                </el-form-item>
+                <el-form-item class="marginTop" :label="$t('website.certificate')" prop="cert">
+                    <el-input v-model="form.cert" :rows="5" type="textarea" />
+                </el-form-item>
+            </div>
+
+            <div v-if="form.sslType === 'import' && form.itemSSLType === 'local'">
+                <el-form-item :label="$t('website.privateKey')" prop="key">
+                    <el-input v-model="form.key">
+                        <template #prepend>
+                            <FileList @choose="getKeyPath" :dir="false"></FileList>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item class="marginTop" :label="$t('website.certificate')" prop="cert">
+                    <el-input v-model="form.cert">
+                        <template #prepend>
+                            <FileList @choose="getCertPath" :dir="false"></FileList>
+                        </template>
+                    </el-input>
+                </el-form-item>
+            </div>
+
+            <div v-if="form.sslType === 'select'">
+                <el-form-item :label="$t('setting.certificate')" prop="sslID">
+                    <el-select v-model="form.sslID" @change="changeSSl(form.sslID)">
+                        <el-option
+                            v-for="(item, index) in sslList"
+                            :key="index"
+                            :label="item.primaryDomain"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-descriptions
+                    class="marginTop"
+                    :column="5"
+                    border
+                    direction="vertical"
+                    v-if="form.sslID > 0 && itemSSL"
+                >
+                    <el-descriptions-item :label="$t('website.primaryDomain')">
+                        {{ itemSSL.primaryDomain }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('website.otherDomains')">
+                        {{ itemSSL.domains }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('ssl.provider')">
+                        {{ getProvider(itemSSL.provider) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item
+                        :label="$t('ssl.acmeAccount')"
+                        v-if="itemSSL.acmeAccount?.email && itemSSL.provider !== 'manual'"
+                    >
+                        {{ itemSSL.acmeAccount.email }}
+                    </el-descriptions-item>
+                    <el-descriptions-item :label="$t('website.expireDate')">
+                        {{ dateFormatSimple(itemSSL.expireDate) }}
+                    </el-descriptions-item>
+                </el-descriptions>
+            </div>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSaveSSL(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
@@ -142,7 +124,6 @@ import { downloadSSL, updateSSL } from '@/api/modules/setting';
 import { Rules } from '@/global/form-rules';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Setting } from '@/api/interface/setting';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
diff --git a/frontend/src/views/setting/safe/timeout/index.vue b/frontend/src/views/setting/safe/timeout/index.vue
index 99d0dba54..e0ac5af9d 100644
--- a/frontend/src/views/setting/safe/timeout/index.vue
+++ b/frontend/src/views/setting/safe/timeout/index.vue
@@ -1,39 +1,22 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.expirationTime')" :back="handleClose" />
-            </template>
-            <el-form ref="timeoutFormRef" @submit.prevent label-position="top" :model="form">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('setting.days')"
-                            prop="days"
-                            :rules="[Rules.integerNumberWith0, checkNumberRange(0, 60)]"
-                        >
-                            <el-input clearable v-model.number="form.days" />
-                            <span class="input-help">{{ $t('setting.expirationHelper') }}</span>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button type="primary" @click="submitTimeout(timeoutFormRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.expirationTime')" :back="handleClose" size="small">
+        <el-form ref="timeoutFormRef" @submit.prevent label-position="top" :model="form">
+            <el-form-item
+                :label="$t('setting.days')"
+                prop="days"
+                :rules="[Rules.integerNumberWith0, checkNumberRange(0, 60)]"
+            >
+                <el-input clearable v-model.number="form.days" />
+                <span class="input-help">{{ $t('setting.expirationHelper') }}</span>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button type="primary" @click="submitTimeout(timeoutFormRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -41,7 +24,6 @@ import { MsgSuccess } from '@/utils/message';
 import { updateSetting } from '@/api/modules/setting';
 import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import i18n from '@/lang';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/setting/snapshot/ignore-rule/index.vue b/frontend/src/views/setting/snapshot/ignore-rule/index.vue
index af20806b0..58d4e65e3 100644
--- a/frontend/src/views/setting/snapshot/ignore-rule/index.vue
+++ b/frontend/src/views/setting/snapshot/ignore-rule/index.vue
@@ -1,67 +1,48 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.ignoreRule')" :back="handleClose" />
-            </template>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.ignoreRule')" :back="handleClose" size="small">
+        <el-alert :closable="false" type="warning">{{ $t('setting.ignoreHelper') }}</el-alert>
+        <el-form ref="formRef" :model="form" :rules="rules" v-loading="loading" class="mt-2">
+            <el-form-item prop="tmpRule">
+                <div class="w-full">
+                    <el-input
+                        v-model="form.tmpRule"
+                        :rows="5"
+                        style="width: calc(100% - 50px)"
+                        type="textarea"
+                        :placeholder="$t('setting.ignoreHelper1')"
+                    />
+                    <FileList @choose="loadDir" :path="baseDir" :isAll="true"></FileList>
+                </div>
+            </el-form-item>
+        </el-form>
 
-            <el-alert :closable="false" type="warning">{{ $t('setting.ignoreHelper') }}</el-alert>
-            <el-row type="flex" justify="center" v-loading="loading" class="mt-2">
-                <el-col :span="22">
-                    <el-form ref="formRef" :model="form" :rules="rules">
-                        <el-form-item prop="tmpRule">
-                            <div class="w-full">
-                                <el-input
-                                    v-model="form.tmpRule"
-                                    :rows="5"
-                                    style="width: calc(100% - 50px)"
-                                    type="textarea"
-                                    :placeholder="$t('setting.ignoreHelper1')"
-                                />
-                                <FileList @choose="loadDir" :path="baseDir" :isAll="true"></FileList>
-                            </div>
-                        </el-form-item>
-                    </el-form>
+        <el-button :disabled="form.tmpRule === ''" @click="handleAdd(formRef)">
+            {{ $t('xpack.tamper.addRule') }}
+        </el-button>
 
-                    <el-button :disabled="form.tmpRule === ''" @click="handleAdd(formRef)">
-                        {{ $t('xpack.tamper.addRule') }}
+        <el-table :data="tableList">
+            <el-table-column prop="value" />
+            <el-table-column min-width="18">
+                <template #default="scope">
+                    <el-button link type="primary" @click="handleDelete(scope.$index)">
+                        {{ $t('commons.button.delete') }}
                     </el-button>
-
-                    <el-table :data="tableList">
-                        <el-table-column prop="value" />
-                        <el-table-column min-width="18">
-                            <template #default="scope">
-                                <el-button link type="primary" @click="handleDelete(scope.$index)">
-                                    {{ $t('commons.button.delete') }}
-                                </el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </el-col>
-            </el-row>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave()">
-                        {{ $t('commons.button.save') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+        <template #footer>
+            <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            <el-button :disabled="loading" type="primary" @click="onSave()">
+                {{ $t('commons.button.save') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import FileList from '@/components/file-list/index.vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { FormInstance } from 'element-plus';
 import { getSettingInfo, loadBaseDir, updateSetting } from '@/api/modules/setting';
 
diff --git a/frontend/src/views/setting/snapshot/import/index.vue b/frontend/src/views/setting/snapshot/import/index.vue
index 788f34a35..942a12b87 100644
--- a/frontend/src/views/setting/snapshot/import/index.vue
+++ b/frontend/src/views/setting/snapshot/import/index.vue
@@ -1,62 +1,50 @@
 <template>
-    <div>
-        <el-drawer v-model="drawerVisible" size="30%" :close-on-click-modal="false" :close-on-press-escape="false">
-            <template #header>
-                <DrawerHeader :header="$t('setting.importSnapshot')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.backupAccount')" prop="from">
-                            <el-select style="width: 100%" v-model="form.from" @change="loadFiles" clearable>
-                                <el-option
-                                    v-for="item in backupOptions"
-                                    :key="item.label"
-                                    :value="item.value"
-                                    :label="item.label"
-                                />
-                            </el-select>
-                            <div v-if="form.from === 'LOCAL'">
-                                <span class="import-help">{{ $t('setting.importHelper') }}</span>
-                                <span @click="toFolder()" class="import-link-help">{{ backupPath }}</span>
-                            </div>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.name')" prop="names">
-                            <el-select style="width: 100%" v-model="form.names" multiple clearable>
-                                <el-option
-                                    :disabled="checkDisable(item)"
-                                    v-for="item in fileNames"
-                                    :key="item"
-                                    :value="item"
-                                    :label="item"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.description')" prop="description">
-                            <el-input type="textarea" clearable v-model="form.description" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="drawerVisible = false">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="submitImport(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.importSnapshot')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('setting.backupAccount')" prop="from">
+                <el-select v-model="form.from" @change="loadFiles" clearable>
+                    <el-option
+                        v-for="item in backupOptions"
+                        :key="item.label"
+                        :value="item.value"
+                        :label="item.label"
+                    />
+                </el-select>
+                <div v-if="form.from === 'LOCAL'">
+                    <span class="import-help">{{ $t('setting.importHelper') }}</span>
+                    <span @click="toFolder()" class="import-link-help">{{ backupPath }}</span>
+                </div>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.name')" prop="names">
+                <el-select v-model="form.names" multiple clearable>
+                    <el-option
+                        :disabled="checkDisable(item)"
+                        v-for="item in fileNames"
+                        :key="item"
+                        :value="item"
+                        :label="item"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input type="textarea" clearable v-model="form.description" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button :disabled="loading" @click="drawerVisible = false">
+                {{ $t('commons.button.cancel') }}
+            </el-button>
+            <el-button :disabled="loading" type="primary" @click="submitImport(formRef)">
+                {{ $t('commons.button.confirm') }}
+            </el-button>
+        </template>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import i18n from '@/lang';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { snapshotImport } from '@/api/modules/setting';
 import { getBackupList, getFilesFromBackup } from '@/api/modules/setting';
 import { Rules } from '@/global/form-rules';
diff --git a/frontend/src/views/setting/snapshot/index.vue b/frontend/src/views/setting/snapshot/index.vue
index 9cf002f1f..76d6d40bd 100644
--- a/frontend/src/views/setting/snapshot/index.vue
+++ b/frontend/src/views/setting/snapshot/index.vue
@@ -116,10 +116,7 @@
         </LayoutContent>
         <RecoverStatus ref="recoverStatusRef" @search="search()"></RecoverStatus>
         <SnapshotImport ref="importRef" @search="search()" />
-        <el-drawer v-model="drawerVisible" size="50%" :close-on-click-modal="false" :close-on-press-escape="false">
-            <template #header>
-                <DrawerHeader :header="$t('setting.createSnapshot')" :back="handleClose" />
-            </template>
+        <DrawerPro v-model="drawerVisible" :header="$t('setting.createSnapshot')" :back="handleClose" size="large">
             <el-form
                 v-loading="loading"
                 label-position="top"
@@ -128,48 +125,42 @@
                 :model="snapInfo"
                 :rules="rules"
             >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('setting.backupAccount')" prop="fromAccounts">
-                            <el-select multiple @change="changeAccount" v-model="snapInfo.fromAccounts" clearable>
-                                <el-option
-                                    v-for="item in backupOptions"
-                                    :key="item.label"
-                                    :value="item.value"
-                                    :label="item.label"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('cronjob.default_download_path')" prop="defaultDownload">
-                            <el-select v-model="snapInfo.defaultDownload" clearable>
-                                <el-option
-                                    v-for="item in accountOptions"
-                                    :key="item.label"
-                                    :value="item.value"
-                                    :label="item.label"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.compressPassword')" prop="secret">
-                            <el-input v-model="snapInfo.secret"></el-input>
-                        </el-form-item>
-                        <el-form-item :label="$t('commons.table.description')" prop="description">
-                            <el-input type="textarea" clearable v-model="snapInfo.description" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+                <el-form-item :label="$t('setting.backupAccount')" prop="fromAccounts">
+                    <el-select multiple @change="changeAccount" v-model="snapInfo.fromAccounts" clearable>
+                        <el-option
+                            v-for="item in backupOptions"
+                            :key="item.label"
+                            :value="item.value"
+                            :label="item.label"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item :label="$t('cronjob.default_download_path')" prop="defaultDownload">
+                    <el-select v-model="snapInfo.defaultDownload" clearable>
+                        <el-option
+                            v-for="item in accountOptions"
+                            :key="item.label"
+                            :value="item.value"
+                            :label="item.label"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item :label="$t('setting.compressPassword')" prop="secret">
+                    <el-input v-model="snapInfo.secret"></el-input>
+                </el-form-item>
+                <el-form-item :label="$t('commons.table.description')" prop="description">
+                    <el-input type="textarea" clearable v-model="snapInfo.description" />
+                </el-form-item>
             </el-form>
             <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="drawerVisible = false">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="submitAddSnapshot(snapRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
+                <el-button :disabled="loading" @click="drawerVisible = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="submitAddSnapshot(snapRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
             </template>
-        </el-drawer>
+        </DrawerPro>
 
         <OpDialog ref="opRef" @search="search" @submit="onSubmitDelete()">
             <template #content>
@@ -189,7 +180,6 @@
 </template>
 
 <script setup lang="ts">
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { snapshotCreate, searchSnapshotPage, snapshotDelete, updateSnapshotDescription } from '@/api/modules/setting';
 import { onMounted, reactive, ref } from 'vue';
 import { computeSize, dateFormat } from '@/utils/util';
diff --git a/frontend/src/views/setting/snapshot/status/index.vue b/frontend/src/views/setting/snapshot/status/index.vue
index 14c0b1605..4816fe4aa 100644
--- a/frontend/src/views/setting/snapshot/status/index.vue
+++ b/frontend/src/views/setting/snapshot/status/index.vue
@@ -1,145 +1,124 @@
 <template>
-    <div v-loading="loading">
-        <el-drawer v-model="drawerVisible" :close-on-click-modal="false" :close-on-press-escape="false">
-            <template #header>
-                <DrawerHeader :header="$t('setting.recoverDetail')" :back="handleClose" />
-            </template>
-
-            <el-form label-position="top">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <span class="card-title">{{ $t('setting.recover') }}</span>
-                        <el-divider class="divider" />
-                        <div v-if="!snapInfo.recoverStatus && !snapInfo.lastRecoveredAt">
-                            <el-alert center class="alert" style="height: 257px" :closable="false">
-                                <el-button size="large" round plain type="primary" @click="recoverSnapshot(true)">
-                                    {{ $t('setting.recover') }}
-                                </el-button>
-                            </el-alert>
-                        </div>
-                        <el-card v-else class="mini-border-card">
-                            <div v-if="!snapInfo.recoverStatus" class="mini-border-card">
-                                <div v-if="snapInfo.lastRecoveredAt">
-                                    <el-form-item :label="$t('commons.table.status')">
-                                        <el-tag type="success">
-                                            {{ $t('commons.table.statusSuccess') }}
-                                        </el-tag>
-                                        <el-button
-                                            @click="recoverSnapshot(true)"
-                                            style="margin-left: 10px"
-                                            type="primary"
-                                        >
-                                            {{ $t('setting.recover') }}
-                                        </el-button>
-                                    </el-form-item>
-                                    <el-form-item :label="$t('setting.lastRecoverAt')">
-                                        {{ snapInfo.lastRecoveredAt }}
-                                    </el-form-item>
-                                </div>
-                            </div>
-                            <div v-else>
-                                <el-form-item :label="$t('commons.table.status')">
-                                    <el-tag type="danger" v-if="snapInfo.recoverStatus === 'Failed'">
-                                        {{ $t('commons.table.statusFailed') }}
-                                    </el-tag>
-                                    <el-tag type="success" v-if="snapInfo.recoverStatus === 'Success'">
-                                        {{ $t('commons.table.statusSuccess') }}
-                                    </el-tag>
-                                    <el-tag type="info" v-if="snapInfo.recoverStatus === 'Waiting'">
-                                        {{ $t('commons.table.statusWaiting') }}
-                                    </el-tag>
-                                </el-form-item>
-                                <el-form-item
-                                    :label="$t('setting.lastRecoverAt')"
-                                    v-if="snapInfo.recoverStatus !== 'Waiting'"
-                                >
-                                    {{ snapInfo.lastRecoveredAt }}
-                                </el-form-item>
-                                <div v-if="snapInfo.recoverStatus === 'Failed'">
-                                    <el-form-item :label="$t('commons.button.log')">
-                                        <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
-                                            {{ snapInfo.recoverMessage }}
-                                        </span>
-                                    </el-form-item>
-                                    <el-form-item>
-                                        <el-button @click="recoverSnapshot(false)" type="primary">
-                                            {{ $t('commons.button.retry') }}
-                                        </el-button>
-                                    </el-form-item>
-                                </div>
-                            </div>
-                        </el-card>
-
-                        <div v-if="snapInfo.recoverStatus === 'Failed'">
-                            <span class="card-title">{{ $t('setting.rollback') }}</span>
-                            <el-divider class="divider" />
-                            <div v-if="!snapInfo.rollbackStatus && !snapInfo.lastRollbackedAt">
-                                <el-alert center class="alert" style="height: 257px" :closable="false">
-                                    <el-button size="large" round plain type="primary" @click="rollbackSnapshot()">
-                                        {{ $t('setting.rollback') }}
-                                    </el-button>
-                                </el-alert>
-                            </div>
-                            <div v-if="!snapInfo.rollbackStatus">
-                                <div v-if="snapInfo.lastRollbackedAt">
-                                    <el-form-item :label="$t('commons.table.status')">
-                                        <el-tag type="success">
-                                            {{ $t('commons.table.statusSuccess') }}
-                                        </el-tag>
-                                        <el-button @click="rollbackSnapshot" style="margin-left: 10px" type="primary">
-                                            {{ $t('setting.rollback') }}
-                                        </el-button>
-                                    </el-form-item>
-                                    <el-form-item :label="$t('setting.lastRollbackAt')">
-                                        {{ snapInfo.lastRollbackedAt }}
-                                    </el-form-item>
-                                </div>
-                            </div>
-                            <div v-else>
-                                <el-form-item :label="$t('commons.table.status')">
-                                    <el-tag type="success" v-if="snapInfo.rollbackStatus === 'Success'">
-                                        {{ $t('commons.table.statusSuccess') }}
-                                    </el-tag>
-                                    <el-tag type="danger" v-if="snapInfo.rollbackStatus === 'Failed'">
-                                        {{ $t('commons.table.statusFailed') }}
-                                    </el-tag>
-                                    <el-tag type="info" v-if="snapInfo.rollbackStatus === 'Waiting'">
-                                        {{ $t('commons.table.statusWaiting') }}
-                                    </el-tag>
-                                    <el-button
-                                        style="margin-left: 15px"
-                                        :disabled="snapInfo.rollbackStatus !== 'Success'"
-                                        @click="rollbackSnapshot"
-                                    >
-                                        {{ $t('setting.rollback') }}
-                                    </el-button>
-                                </el-form-item>
-                                <el-form-item
-                                    :label="$t('setting.lastRollbackAt')"
-                                    v-if="snapInfo.rollbackStatus !== 'Waiting'"
-                                >
-                                    {{ snapInfo.lastRollbackedAt }}
-                                </el-form-item>
-                                <div v-if="snapInfo.rollbackStatus === 'Failed'">
-                                    <el-form-item :label="$t('commons.button.log')">
-                                        <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
-                                            {{ snapInfo.rollbackMessage }}
-                                        </span>
-                                    </el-form-item>
-                                    <el-form-item>
-                                        <el-button @click="rollbackSnapshot()" type="primary">
-                                            {{ $t('commons.button.retry') }}
-                                        </el-button>
-                                    </el-form-item>
-                                </div>
-                            </div>
-                        </div>
-                    </el-col>
-                </el-row>
-            </el-form>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.recoverDetail')" :back="handleClose" size="small">
+        <el-form label-position="top" v-loading="loading">
+            <span class="card-title">{{ $t('setting.recover') }}</span>
+            <el-divider class="divider" />
+            <div v-if="!snapInfo.recoverStatus && !snapInfo.lastRecoveredAt">
+                <el-alert center class="alert" style="height: 257px" :closable="false">
+                    <el-button size="large" round plain type="primary" @click="recoverSnapshot(true)">
+                        {{ $t('setting.recover') }}
+                    </el-button>
+                </el-alert>
+            </div>
+            <el-card v-else class="mini-border-card">
+                <div v-if="!snapInfo.recoverStatus" class="mini-border-card">
+                    <div v-if="snapInfo.lastRecoveredAt">
+                        <el-form-item :label="$t('commons.table.status')">
+                            <el-tag type="success">
+                                {{ $t('commons.table.statusSuccess') }}
+                            </el-tag>
+                            <el-button @click="recoverSnapshot(true)" style="margin-left: 10px" type="primary">
+                                {{ $t('setting.recover') }}
+                            </el-button>
+                        </el-form-item>
+                        <el-form-item :label="$t('setting.lastRecoverAt')">
+                            {{ snapInfo.lastRecoveredAt }}
+                        </el-form-item>
+                    </div>
+                </div>
+                <div v-else>
+                    <el-form-item :label="$t('commons.table.status')">
+                        <el-tag type="danger" v-if="snapInfo.recoverStatus === 'Failed'">
+                            {{ $t('commons.table.statusFailed') }}
+                        </el-tag>
+                        <el-tag type="success" v-if="snapInfo.recoverStatus === 'Success'">
+                            {{ $t('commons.table.statusSuccess') }}
+                        </el-tag>
+                        <el-tag type="info" v-if="snapInfo.recoverStatus === 'Waiting'">
+                            {{ $t('commons.table.statusWaiting') }}
+                        </el-tag>
+                    </el-form-item>
+                    <el-form-item :label="$t('setting.lastRecoverAt')" v-if="snapInfo.recoverStatus !== 'Waiting'">
+                        {{ snapInfo.lastRecoveredAt }}
+                    </el-form-item>
+                    <div v-if="snapInfo.recoverStatus === 'Failed'">
+                        <el-form-item :label="$t('commons.button.log')">
+                            <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
+                                {{ snapInfo.recoverMessage }}
+                            </span>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="recoverSnapshot(false)" type="primary">
+                                {{ $t('commons.button.retry') }}
+                            </el-button>
+                        </el-form-item>
+                    </div>
+                </div>
+            </el-card>
 
+            <div v-if="snapInfo.recoverStatus === 'Failed'">
+                <span class="card-title">{{ $t('setting.rollback') }}</span>
+                <el-divider class="divider" />
+                <div v-if="!snapInfo.rollbackStatus && !snapInfo.lastRollbackedAt">
+                    <el-alert center class="alert" style="height: 257px" :closable="false">
+                        <el-button size="large" round plain type="primary" @click="rollbackSnapshot()">
+                            {{ $t('setting.rollback') }}
+                        </el-button>
+                    </el-alert>
+                </div>
+                <div v-if="!snapInfo.rollbackStatus">
+                    <div v-if="snapInfo.lastRollbackedAt">
+                        <el-form-item :label="$t('commons.table.status')">
+                            <el-tag type="success">
+                                {{ $t('commons.table.statusSuccess') }}
+                            </el-tag>
+                            <el-button @click="rollbackSnapshot" style="margin-left: 10px" type="primary">
+                                {{ $t('setting.rollback') }}
+                            </el-button>
+                        </el-form-item>
+                        <el-form-item :label="$t('setting.lastRollbackAt')">
+                            {{ snapInfo.lastRollbackedAt }}
+                        </el-form-item>
+                    </div>
+                </div>
+                <div v-else>
+                    <el-form-item :label="$t('commons.table.status')">
+                        <el-tag type="success" v-if="snapInfo.rollbackStatus === 'Success'">
+                            {{ $t('commons.table.statusSuccess') }}
+                        </el-tag>
+                        <el-tag type="danger" v-if="snapInfo.rollbackStatus === 'Failed'">
+                            {{ $t('commons.table.statusFailed') }}
+                        </el-tag>
+                        <el-tag type="info" v-if="snapInfo.rollbackStatus === 'Waiting'">
+                            {{ $t('commons.table.statusWaiting') }}
+                        </el-tag>
+                        <el-button
+                            style="margin-left: 15px"
+                            :disabled="snapInfo.rollbackStatus !== 'Success'"
+                            @click="rollbackSnapshot"
+                        >
+                            {{ $t('setting.rollback') }}
+                        </el-button>
+                    </el-form-item>
+                    <el-form-item :label="$t('setting.lastRollbackAt')" v-if="snapInfo.rollbackStatus !== 'Waiting'">
+                        {{ snapInfo.lastRollbackedAt }}
+                    </el-form-item>
+                    <div v-if="snapInfo.rollbackStatus === 'Failed'">
+                        <el-form-item :label="$t('commons.button.log')">
+                            <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
+                                {{ snapInfo.rollbackMessage }}
+                            </span>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="rollbackSnapshot()" type="primary">
+                                {{ $t('commons.button.retry') }}
+                            </el-button>
+                        </el-form-item>
+                    </div>
+                </div>
+            </div>
+        </el-form>
+    </DrawerPro>
     <SnapRecover ref="recoverRef" @close="handleClose" />
 </template>
 
@@ -148,7 +127,6 @@ import { ref } from 'vue';
 import { Setting } from '@/api/interface/setting';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { snapshotRollback } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 import { loadOsInfo } from '@/api/modules/dashboard';
diff --git a/frontend/src/views/toolbox/device/dns/index.vue b/frontend/src/views/toolbox/device/dns/index.vue
index a7d64e3d5..821e57799 100644
--- a/frontend/src/views/toolbox/device/dns/index.vue
+++ b/frontend/src/views/toolbox/device/dns/index.vue
@@ -1,81 +1,55 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
+    <DrawerPro v-model="drawerVisible" header="DNS" :back="handleClose" size="large">
+        <el-alert :title="$t('toolbox.device.dnsAlert')" class="common-prompt" :closable="false" type="warning" />
+        <el-radio-group v-model="confShowType" @change="changeMode">
+            <el-radio-button value="form">{{ $t('database.baseConf') }}</el-radio-button>
+            <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
+        </el-radio-group>
+        <el-form
+            class="mt-4"
+            v-if="confShowType === 'form'"
+            ref="formRef"
+            label-position="top"
+            @submit.prevent
+            :model="form"
+            v-loading="loading"
         >
-            <template #header>
-                <DrawerHeader header="DNS" :back="handleClose" />
-            </template>
-
-            <el-row type="flex" justify="center" v-loading="loading">
-                <el-col :span="22">
-                    <el-alert
-                        :title="$t('toolbox.device.dnsAlert')"
-                        class="common-prompt"
-                        :closable="false"
-                        type="warning"
-                    />
-                    <el-radio-group v-model="confShowType" @change="changeMode">
-                        <el-radio-button value="form">{{ $t('database.baseConf') }}</el-radio-button>
-                        <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
-                    </el-radio-group>
-                    <el-form
-                        class="mt-4"
-                        v-if="confShowType === 'form'"
-                        ref="formRef"
-                        label-position="top"
-                        @submit.prevent
-                        :model="form"
-                    >
-                        <el-form-item label="DNS" prop="dns">
-                            <el-input
-                                type="textarea"
-                                :placeholder="$t('toolbox.device.dnsHelper1')"
-                                :rows="8"
-                                v-model="form.dns"
-                            />
-                        </el-form-item>
-                    </el-form>
-                    <div v-else>
-                        <codemirror
-                            :autofocus="true"
-                            placeholder="# The DNS configuration file does not exist or is empty (/etc/resolv.conf)"
-                            :indent-with-tab="true"
-                            :tabSize="4"
-                            style="margin-top: 10px; height: calc(100vh - 260px)"
-                            :lineWrapping="true"
-                            :matchBrackets="true"
-                            theme="cobalt"
-                            :styleActiveLine="true"
-                            :extensions="extensions"
-                            v-model="dnsConf"
-                        />
-                    </div>
-                </el-col>
-            </el-row>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" @click="onTest()">
-                        {{ $t('toolbox.device.dnsCheck') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave()">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+            <el-form-item label="DNS" prop="dns">
+                <el-input type="textarea" :placeholder="$t('toolbox.device.dnsHelper1')" :rows="8" v-model="form.dns" />
+            </el-form-item>
+        </el-form>
+        <div v-else>
+            <codemirror
+                :autofocus="true"
+                placeholder="# The DNS configuration file does not exist or is empty (/etc/resolv.conf)"
+                :indent-with-tab="true"
+                :tabSize="4"
+                style="margin-top: 10px; height: calc(100vh - 260px)"
+                :lineWrapping="true"
+                :matchBrackets="true"
+                theme="cobalt"
+                :styleActiveLine="true"
+                :extensions="extensions"
+                v-model="dnsConf"
+            />
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" @click="onTest()">
+                    {{ $t('toolbox.device.dnsCheck') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave()">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { loadDeviceConf, checkDNS, updateDevice, updateDeviceByConf } from '@/api/modules/toolbox';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
diff --git a/frontend/src/views/toolbox/device/hostname/index.vue b/frontend/src/views/toolbox/device/hostname/index.vue
index 2e369c272..a92e5c661 100644
--- a/frontend/src/views/toolbox/device/hostname/index.vue
+++ b/frontend/src/views/toolbox/device/hostname/index.vue
@@ -1,45 +1,20 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('toolbox.device.hostname')" :back="handleClose" />
-            </template>
-
-            <el-row type="flex" justify="center" v-loading="loading">
-                <el-col :span="22">
-                    <el-alert
-                        :title="$t('toolbox.device.hostnameHelper')"
-                        class="common-prompt"
-                        :closable="false"
-                        type="warning"
-                    />
-                    <el-form ref="formRef" label-position="top" :model="form" @submit.prevent>
-                        <el-form-item
-                            :label="$t('toolbox.device.hostname')"
-                            prop="hostname"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input clearable v-model.trim="form.hostname" />
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSaveHostame(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('toolbox.device.hostname')" :back="handleClose" size="small">
+        <el-alert :title="$t('toolbox.device.hostnameHelper')" class="common-prompt" :closable="false" type="warning" />
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('toolbox.device.hostname')" prop="hostname" :rules="Rules.requiredInput">
+                <el-input clearable v-model.trim="form.hostname" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSaveHostame(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -47,7 +22,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateDevice } from '@/api/modules/toolbox';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/toolbox/device/hosts/index.vue b/frontend/src/views/toolbox/device/hosts/index.vue
index f686992c5..ae19a2960 100644
--- a/frontend/src/views/toolbox/device/hosts/index.vue
+++ b/frontend/src/views/toolbox/device/hosts/index.vue
@@ -1,79 +1,62 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader header="Hosts" :back="handleClose" />
-            </template>
-
-            <el-row type="flex" justify="center" v-loading="loading">
-                <el-col :span="22">
-                    <el-radio-group v-model="confShowType" @change="changeMode">
-                        <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
-                        <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
-                    </el-radio-group>
-                    <div v-if="confShowType === 'base'">
-                        <el-table :data="form.hosts">
-                            <el-table-column label="IP" min-width="60">
-                                <template #default="{ row }">
-                                    <el-input placeholder="172.16.10.111" v-model="row.ip" />
-                                </template>
-                            </el-table-column>
-                            <el-table-column :label="$t('toolbox.device.hosts')" min-width="150">
-                                <template #default="{ row }">
-                                    <el-input placeholder="test.hostname.com" v-model="row.host" />
-                                </template>
-                            </el-table-column>
-                            <el-table-column min-width="30">
-                                <template #default="scope">
-                                    <el-button link type="primary" @click="handleHostsDelete(scope.$index)">
-                                        {{ $t('commons.button.delete') }}
-                                    </el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                        <el-button class="ml-3 mt-2" @click="handleHostsAdd()">
-                            {{ $t('commons.button.add') }}
+    <DrawerPro v-model="drawerVisible" header="Hosts" :back="handleClose" size="large">
+        <el-radio-group v-model="confShowType" @change="changeMode">
+            <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
+            <el-radio-button value="all">{{ $t('database.allConf') }}</el-radio-button>
+        </el-radio-group>
+        <div v-if="confShowType === 'base'">
+            <el-table :data="form.hosts">
+                <el-table-column label="IP" min-width="60">
+                    <template #default="{ row }">
+                        <el-input placeholder="172.16.10.111" v-model="row.ip" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('toolbox.device.hosts')" min-width="150">
+                    <template #default="{ row }">
+                        <el-input placeholder="test.hostname.com" v-model="row.host" />
+                    </template>
+                </el-table-column>
+                <el-table-column min-width="30">
+                    <template #default="scope">
+                        <el-button link type="primary" @click="handleHostsDelete(scope.$index)">
+                            {{ $t('commons.button.delete') }}
                         </el-button>
-                    </div>
-                    <div v-else>
-                        <codemirror
-                            :autofocus="true"
-                            placeholder="# The hosts configuration file does not exist or is empty (/etc/hosts)"
-                            :indent-with-tab="true"
-                            :tabSize="4"
-                            style="margin-top: 10px; height: calc(100vh - 200px)"
-                            :lineWrapping="true"
-                            :matchBrackets="true"
-                            theme="cobalt"
-                            :styleActiveLine="true"
-                            :extensions="extensions"
-                            v-model="hostsConf"
-                        />
-                    </div>
-                </el-col>
-            </el-row>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave()">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-button class="ml-3 mt-2" @click="handleHostsAdd()">
+                {{ $t('commons.button.add') }}
+            </el-button>
+        </div>
+        <div v-else>
+            <codemirror
+                :autofocus="true"
+                placeholder="# The hosts configuration file does not exist or is empty (/etc/hosts)"
+                :indent-with-tab="true"
+                :tabSize="4"
+                style="margin-top: 10px; height: calc(100vh - 200px)"
+                :lineWrapping="true"
+                :matchBrackets="true"
+                theme="cobalt"
+                :styleActiveLine="true"
+                :extensions="extensions"
+                v-model="hostsConf"
+            />
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave()">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { loadDeviceConf, updateDeviceByConf, updateDeviceHost } from '@/api/modules/toolbox';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
diff --git a/frontend/src/views/toolbox/device/ntp/index.vue b/frontend/src/views/toolbox/device/ntp/index.vue
index b44716b8b..31e1854a0 100644
--- a/frontend/src/views/toolbox/device/ntp/index.vue
+++ b/frontend/src/views/toolbox/device/ntp/index.vue
@@ -1,50 +1,34 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('toolbox.device.syncSite')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('toolbox.device.syncSite')" prop="ntpSite" :rules="Rules.domain">
-                            <el-input v-model="form.ntpSite" />
-                            <el-button type="primary" link class="tagClass" @click="form.ntpSite = 'pool.ntp.org'">
-                                {{ $t('website.default') }}
-                            </el-button>
-                            <el-button type="primary" link class="tagClass" @click="form.ntpSite = 'ntp.aliyun.com'">
-                                {{ $t('toolbox.device.ntpALi') }}
-                            </el-button>
-                            <el-button type="primary" link class="tagClass" @click="form.ntpSite = 'time.google.com'">
-                                {{ $t('toolbox.device.ntpGoogle') }}
-                            </el-button>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSyncTime(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('toolbox.device.syncSite')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('toolbox.device.syncSite')" prop="ntpSite" :rules="Rules.domain">
+                <el-input v-model="form.ntpSite" />
+                <el-button type="primary" link class="tagClass" @click="form.ntpSite = 'pool.ntp.org'">
+                    {{ $t('website.default') }}
+                </el-button>
+                <el-button type="primary" link class="tagClass" @click="form.ntpSite = 'ntp.aliyun.com'">
+                    {{ $t('toolbox.device.ntpALi') }}
+                </el-button>
+                <el-button type="primary" link class="tagClass" @click="form.ntpSite = 'time.google.com'">
+                    {{ $t('toolbox.device.ntpGoogle') }}
+                </el-button>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSyncTime(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Rules } from '@/global/form-rules';
 import { updateDevice } from '@/api/modules/toolbox';
 
diff --git a/frontend/src/views/toolbox/device/passwd/index.vue b/frontend/src/views/toolbox/device/passwd/index.vue
index f49213f0a..ba8afb19c 100644
--- a/frontend/src/views/toolbox/device/passwd/index.vue
+++ b/frontend/src/views/toolbox/device/passwd/index.vue
@@ -1,50 +1,34 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="passwordVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('setting.changePassword')" :back="handleClose" />
-            </template>
-
-            <el-row type="flex" justify="center" v-loading="loading">
-                <el-col :span="22">
-                    <el-form ref="formRef" label-position="top" :model="form" :rules="passRules">
-                        <el-alert
-                            :title="$t('toolbox.device.passwordHelper')"
-                            class="common-prompt"
-                            :closable="false"
-                            type="warning"
-                        />
-                        <el-form-item :label="$t('setting.user')" prop="user">
-                            <el-input clearable v-model.trim="form.user" />
-                            <span class="input-help">{{ $t('toolbox.device.userHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.newPassword')" prop="newPassword">
-                            <el-input type="password" show-password clearable v-model.trim="form.newPassword" />
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.retryPassword')" prop="retryPassword">
-                            <el-input type="password" show-password clearable v-model.trim="form.retryPassword" />
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button :disabled="loading" @click="passwordVisible = false">
-                        {{ $t('commons.button.cancel') }}
-                    </el-button>
-                    <el-button :disabled="loading" type="primary" @click="submitChangePassword(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="passwordVisible" :header="$t('setting.changePassword')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" :rules="passRules" v-loading="loading">
+            <el-alert
+                :title="$t('toolbox.device.passwordHelper')"
+                class="common-prompt"
+                :closable="false"
+                type="warning"
+            />
+            <el-form-item :label="$t('setting.user')" prop="user">
+                <el-input clearable v-model.trim="form.user" />
+                <span class="input-help">{{ $t('toolbox.device.userHelper') }}</span>
+            </el-form-item>
+            <el-form-item :label="$t('setting.newPassword')" prop="newPassword">
+                <el-input type="password" show-password clearable v-model.trim="form.newPassword" />
+            </el-form-item>
+            <el-form-item :label="$t('setting.retryPassword')" prop="retryPassword">
+                <el-input type="password" show-password clearable v-model.trim="form.retryPassword" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button :disabled="loading" @click="passwordVisible = false">
+                    {{ $t('commons.button.cancel') }}
+                </el-button>
+                <el-button :disabled="loading" type="primary" @click="submitChangePassword(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -53,7 +37,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateDevicePasswd } from '@/api/modules/toolbox';
 
 const formRef = ref<FormInstance>();
diff --git a/frontend/src/views/toolbox/device/swap/index.vue b/frontend/src/views/toolbox/device/swap/index.vue
index 77be80fc2..bb85ee660 100644
--- a/frontend/src/views/toolbox/device/swap/index.vue
+++ b/frontend/src/views/toolbox/device/swap/index.vue
@@ -1,107 +1,90 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="50%"
-        >
-            <template #header>
-                <DrawerHeader header="Swap" :back="handleClose" />
+    <DrawerPro v-model="drawerVisible" header="Swap" :back="handleClose" size="large">
+        <el-alert class="common-prompt" :closable="false" type="warning">
+            <template #default>
+                <ul style="margin-left: -20px">
+                    <li>{{ $t('toolbox.swap.swapHelper1') }}</li>
+                    <li>{{ $t('toolbox.swap.swapHelper2') }}</li>
+                    <li>{{ $t('toolbox.swap.swapHelper3') }}</li>
+                    <li>{{ $t('toolbox.swap.swapHelper4') }}</li>
+                </ul>
             </template>
+        </el-alert>
+        <el-card>
+            <el-form label-position="top" class="ml-3" v-loading="loading">
+                <el-row type="flex" justify="center" :gutter="20">
+                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
+                        <el-form-item>
+                            <template #label>
+                                <span class="status-label">Swap {{ $t('home.total') }}</span>
+                            </template>
+                            <span class="status-count">{{ form.swapMemoryTotal }}</span>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
+                        <el-form-item>
+                            <template #label>
+                                <span class="status-label">Swap {{ $t('home.used') }}</span>
+                            </template>
+                            <span class="status-count">{{ form.swapMemoryUsed }}</span>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
+                        <el-form-item>
+                            <template #label>
+                                <span class="status-label">Swap {{ $t('home.free') }}</span>
+                            </template>
+                            <span class="status-count">{{ form.swapMemoryAvailable }}</span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </el-card>
 
-            <el-row type="flex" justify="center" v-loading="loading">
-                <el-col :span="22">
-                    <el-alert class="common-prompt" :closable="false" type="warning">
-                        <template #default>
-                            <ul style="margin-left: -20px">
-                                <li>{{ $t('toolbox.swap.swapHelper1') }}</li>
-                                <li>{{ $t('toolbox.swap.swapHelper2') }}</li>
-                                <li>{{ $t('toolbox.swap.swapHelper3') }}</li>
-                                <li>{{ $t('toolbox.swap.swapHelper4') }}</li>
-                            </ul>
+        <el-table :data="form.swapDetails" class="mt-5">
+            <el-table-column :label="$t('file.path')" min-width="120" prop="path">
+                <template #default="{ row }">
+                    <span>{{ row.path }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('file.size')" min-width="150">
+                <template #default="{ row }">
+                    <el-input placeholder="1024" type="number" v-model.number="row.size">
+                        <template #append>
+                            <el-select v-model="row.sizeUnit" style="width: 85px">
+                                <el-option label="KB" value="KB" />
+                                <el-option label="MB" value="MB" />
+                                <el-option label="GB" value="GB" />
+                            </el-select>
                         </template>
-                    </el-alert>
-                    <el-card>
-                        <el-form label-position="top" class="ml-3">
-                            <el-row type="flex" justify="center" :gutter="20">
-                                <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
-                                    <el-form-item>
-                                        <template #label>
-                                            <span class="status-label">Swap {{ $t('home.total') }}</span>
-                                        </template>
-                                        <span class="status-count">{{ form.swapMemoryTotal }}</span>
-                                    </el-form-item>
-                                </el-col>
-                                <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
-                                    <el-form-item>
-                                        <template #label>
-                                            <span class="status-label">Swap {{ $t('home.used') }}</span>
-                                        </template>
-                                        <span class="status-count">{{ form.swapMemoryUsed }}</span>
-                                    </el-form-item>
-                                </el-col>
-                                <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
-                                    <el-form-item>
-                                        <template #label>
-                                            <span class="status-label">Swap {{ $t('home.free') }}</span>
-                                        </template>
-                                        <span class="status-count">{{ form.swapMemoryAvailable }}</span>
-                                    </el-form-item>
-                                </el-col>
-                            </el-row>
-                        </el-form>
-                    </el-card>
-
-                    <el-table :data="form.swapDetails" class="mt-5">
-                        <el-table-column :label="$t('file.path')" min-width="120" prop="path">
-                            <template #default="{ row }">
-                                <span>{{ row.path }}</span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column :label="$t('file.size')" min-width="150">
-                            <template #default="{ row }">
-                                <el-input placeholder="1024" type="number" v-model.number="row.size">
-                                    <template #append>
-                                        <el-select v-model="row.sizeUnit" style="width: 85px">
-                                            <el-option label="KB" value="KB" />
-                                            <el-option label="MB" value="MB" />
-                                            <el-option label="GB" value="GB" />
-                                        </el-select>
-                                    </template>
-                                </el-input>
-                            </template>
-                        </el-table-column>
-                        <el-table-column :label="$t('home.used')" min-width="70" prop="used">
-                            <template #default="{ row }">
-                                <span v-if="row.used !== '-'">{{ computeSize(row.used * 1024) }}</span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column min-width="70">
-                            <template #default="scope">
-                                <el-button link type="primary" @click="onSave(scope.row)">
-                                    {{ $t('commons.button.save') }}
-                                </el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                    <span class="input-help">{{ $t('toolbox.swap.swapOff') }}</span>
-                </el-col>
-            </el-row>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+                    </el-input>
+                </template>
+            </el-table-column>
+            <el-table-column :label="$t('home.used')" min-width="70" prop="used">
+                <template #default="{ row }">
+                    <span v-if="row.used !== '-'">{{ computeSize(row.used * 1024) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column min-width="70">
+                <template #default="scope">
+                    <el-button link type="primary" @click="onSave(scope.row)">
+                        {{ $t('commons.button.save') }}
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <span class="input-help">{{ $t('toolbox.swap.swapOff') }}</span>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateDeviceSwap, getDeviceBase } from '@/api/modules/toolbox';
 import { computeSize, splitSize } from '@/utils/util';
 import { loadBaseDir } from '@/api/modules/setting';
diff --git a/frontend/src/views/toolbox/device/time-zone/index.vue b/frontend/src/views/toolbox/device/time-zone/index.vue
index 2dc3107e3..8777b1b42 100644
--- a/frontend/src/views/toolbox/device/time-zone/index.vue
+++ b/frontend/src/views/toolbox/device/time-zone/index.vue
@@ -1,73 +1,49 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('toolbox.device.timeZone')" :back="handleClose" />
-            </template>
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-alert
-                        :title="$t('toolbox.device.timeZoneHelper')"
-                        class="common-prompt"
-                        :closable="false"
-                        type="warning"
-                    />
-                    <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                        <el-form-item
-                            :label="$t('toolbox.device.timeZone')"
-                            prop="timeZone"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-select filterable :disabled="canChangeZone()" v-model="form.timeZone">
-                                <el-option v-for="item in zones" :key="item" :label="item" :value="item" />
-                            </el-select>
-                            <el-button
-                                :disabled="canChangeZone()"
-                                type="primary"
-                                link
-                                class="tagClass"
-                                @click="form.timeZone = 'Asia/Shanghai'"
-                            >
-                                {{ $t('toolbox.device.timeZoneCN') }}
-                            </el-button>
-                            <el-button
-                                :disabled="canChangeZone()"
-                                type="primary"
-                                link
-                                class="tagClass"
-                                @click="form.timeZone = 'America/Los_Angeles'"
-                            >
-                                {{ $t('toolbox.device.timeZoneAM') }}
-                            </el-button>
-                            <el-button
-                                :disabled="canChangeZone()"
-                                type="primary"
-                                link
-                                class="tagClass"
-                                @click="form.timeZone = 'America/New_York'"
-                            >
-                                {{ $t('toolbox.device.timeZoneNY') }}
-                            </el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-col>
-            </el-row>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('toolbox.device.timeZone')" :back="handleClose" size="small">
+        <el-alert :title="$t('toolbox.device.timeZoneHelper')" class="common-prompt" :closable="false" type="warning" />
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('toolbox.device.timeZone')" prop="timeZone" :rules="Rules.requiredInput">
+                <el-select filterable :disabled="canChangeZone()" v-model="form.timeZone">
+                    <el-option v-for="item in zones" :key="item" :label="item" :value="item" />
+                </el-select>
+                <el-button
+                    :disabled="canChangeZone()"
+                    type="primary"
+                    link
+                    class="tagClass"
+                    @click="form.timeZone = 'Asia/Shanghai'"
+                >
+                    {{ $t('toolbox.device.timeZoneCN') }}
+                </el-button>
+                <el-button
+                    :disabled="canChangeZone()"
+                    type="primary"
+                    link
+                    class="tagClass"
+                    @click="form.timeZone = 'America/Los_Angeles'"
+                >
+                    {{ $t('toolbox.device.timeZoneAM') }}
+                </el-button>
+                <el-button
+                    :disabled="canChangeZone()"
+                    type="primary"
+                    link
+                    class="tagClass"
+                    @click="form.timeZone = 'America/New_York'"
+                >
+                    {{ $t('toolbox.device.timeZoneNY') }}
+                </el-button>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -76,7 +52,6 @@ import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { GlobalStore } from '@/store';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { loadTimeZoneOptions, updateDevice } from '@/api/modules/toolbox';
 const globalStore = GlobalStore();
 
diff --git a/frontend/src/views/toolbox/fail2ban/ban-action/index.vue b/frontend/src/views/toolbox/fail2ban/ban-action/index.vue
index 3bbbda702..b9bfeb8d3 100644
--- a/frontend/src/views/toolbox/fail2ban/ban-action/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ban-action/index.vue
@@ -1,66 +1,44 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('toolbox.fail2ban.banAction')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('toolbox.fail2ban.banAction')"
-                            prop="banAction"
-                            :rules="Rules.requiredSelect"
-                        >
-                            <el-select v-model="form.banAction">
-                                <el-option value="iptables-allports" class="option">
-                                    <span class="option-content">iptables-allports</span>
-                                    <span class="input-help option-helper">
-                                        {{
-                                            $t('toolbox.fail2ban.banActionOption', ['iptables']) +
-                                            $t('toolbox.fail2ban.allPorts')
-                                        }}
-                                    </span>
-                                </el-option>
-                                <el-option value="iptables-multiport" class="option">
-                                    <span class="option-content">iptables-multiport</span>
-                                    <span class="input-help option-helper">
-                                        {{ $t('toolbox.fail2ban.banActionOption', ['iptables']) }}
-                                    </span>
-                                </el-option>
-                                <el-option value="firewallcmd-ipset" class="option">
-                                    <span class="option-content">firewallcmd-ipset</span>
-                                    <span class="input-help option-helper">
-                                        {{ $t('toolbox.fail2ban.banActionOption', ['firewallcmd ipset']) }}
-                                    </span>
-                                </el-option>
-                                <el-option value="ufw" class="option">
-                                    <span class="option-content">ufw</span>
-                                    <span class="input-help option-helper">
-                                        {{ $t('toolbox.fail2ban.banActionOption', ['ufw']) }}
-                                    </span>
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('toolbox.fail2ban.banAction')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('toolbox.fail2ban.banAction')" prop="banAction" :rules="Rules.requiredSelect">
+                <el-select v-model="form.banAction">
+                    <el-option value="iptables-allports" class="option">
+                        <span class="option-content">iptables-allports</span>
+                        <span class="input-help option-helper">
+                            {{ $t('toolbox.fail2ban.banActionOption', ['iptables']) + $t('toolbox.fail2ban.allPorts') }}
+                        </span>
+                    </el-option>
+                    <el-option value="iptables-multiport" class="option">
+                        <span class="option-content">iptables-multiport</span>
+                        <span class="input-help option-helper">
+                            {{ $t('toolbox.fail2ban.banActionOption', ['iptables']) }}
+                        </span>
+                    </el-option>
+                    <el-option value="firewallcmd-ipset" class="option">
+                        <span class="option-content">firewallcmd-ipset</span>
+                        <span class="input-help option-helper">
+                            {{ $t('toolbox.fail2ban.banActionOption', ['firewallcmd ipset']) }}
+                        </span>
+                    </el-option>
+                    <el-option value="ufw" class="option">
+                        <span class="option-content">ufw</span>
+                        <span class="input-help option-helper">
+                            {{ $t('toolbox.fail2ban.banActionOption', ['ufw']) }}
+                        </span>
+                    </el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -68,7 +46,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateFail2ban } from '@/api/modules/toolbox';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/toolbox/fail2ban/ban-time/index.vue b/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
index d374087b6..a93cbc843 100644
--- a/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ban-time/index.vue
@@ -1,58 +1,35 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('toolbox.fail2ban.banTime')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :model="form"
-                :rules="rules"
-                @submit.prevent
-                v-loading="loading"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('toolbox.fail2ban.banTime')" prop="banTime">
-                            <el-input type="number" v-model.number="form.banTime">
-                                <template #append>
-                                    <el-select v-model.number="form.banTimeUnit" style="width: 100px">
-                                        <el-option :label="$t('commons.units.second')" value="s" />
-                                        <el-option :label="$t('commons.units.minute')" value="m" />
-                                        <el-option :label="$t('commons.units.hour')" value="h" />
-                                        <el-option :label="$t('commons.units.day')" value="d" />
-                                        <el-option :label="$t('commons.units.year')" value="y" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('toolbox.fail2ban.banTime')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" :rules="rules" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('toolbox.fail2ban.banTime')" prop="banTime">
+                <el-input type="number" v-model.number="form.banTime">
+                    <template #append>
+                        <el-select v-model.number="form.banTimeUnit" style="width: 100px">
+                            <el-option :label="$t('commons.units.second')" value="s" />
+                            <el-option :label="$t('commons.units.minute')" value="m" />
+                            <el-option :label="$t('commons.units.hour')" value="h" />
+                            <el-option :label="$t('commons.units.day')" value="d" />
+                            <el-option :label="$t('commons.units.year')" value="y" />
+                        </el-select>
+                    </template>
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateFail2ban } from '@/api/modules/toolbox';
 import { splitTime, transTimeUnit } from '@/utils/util';
 
diff --git a/frontend/src/views/toolbox/fail2ban/find-time/index.vue b/frontend/src/views/toolbox/fail2ban/find-time/index.vue
index 17549697e..078ab686e 100644
--- a/frontend/src/views/toolbox/fail2ban/find-time/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/find-time/index.vue
@@ -1,48 +1,29 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('toolbox.fail2ban.findTime')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('toolbox.fail2ban.findTime')"
-                            prop="findTime"
-                            :rules="Rules.integerNumber"
-                        >
-                            <el-input clearable v-model.number="form.findTime">
-                                <template #append>
-                                    <el-select v-model="form.findTimeUnit" style="width: 100px">
-                                        <el-option :label="$t('commons.units.second')" value="s" />
-                                        <el-option :label="$t('commons.units.minute')" value="m" />
-                                        <el-option :label="$t('commons.units.hour')" value="h" />
-                                        <el-option :label="$t('commons.units.day')" value="d" />
-                                        <el-option :label="$t('commons.units.year')" value="y" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('toolbox.fail2ban.findTime')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('toolbox.fail2ban.findTime')" prop="findTime" :rules="Rules.integerNumber">
+                <el-input clearable v-model.number="form.findTime">
+                    <template #append>
+                        <el-select v-model="form.findTimeUnit" style="width: 100px">
+                            <el-option :label="$t('commons.units.second')" value="s" />
+                            <el-option :label="$t('commons.units.minute')" value="m" />
+                            <el-option :label="$t('commons.units.hour')" value="h" />
+                            <el-option :label="$t('commons.units.day')" value="d" />
+                            <el-option :label="$t('commons.units.year')" value="y" />
+                        </el-select>
+                    </template>
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -50,7 +31,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateFail2ban } from '@/api/modules/toolbox';
 import { splitTime, transTimeUnit } from '@/utils/util';
 
diff --git a/frontend/src/views/toolbox/fail2ban/ips/index.vue b/frontend/src/views/toolbox/fail2ban/ips/index.vue
index 8f3413939..e952e01a8 100644
--- a/frontend/src/views/toolbox/fail2ban/ips/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/ips/index.vue
@@ -1,23 +1,14 @@
 <template>
-    <el-drawer
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :destroy-on-close="true"
+    <DrawerPro
         v-model="drawerVisible"
-        size="30%"
+        :header="$t('toolbox.fail2ban.' + form.operate + 'IP')"
+        :back="handleClose"
+        size="small"
     >
-        <template #header>
-            <Header :header="$t('toolbox.fail2ban.' + form.operate + 'IP')" :back="handleClose"></Header>
-        </template>
-
         <el-form ref="formRef" label-position="top" :model="form" @submit.prevent :rules="rules" v-loading="loading">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('toolbox.fail2ban.' + form.operate + 'IP')" prop="ips">
-                        <el-input :rows="25" type="textarea" clearable v-model="form.ips" />
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item :label="$t('toolbox.fail2ban.' + form.operate + 'IP')" prop="ips">
+                <el-input :rows="25" type="textarea" clearable v-model="form.ips" />
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -27,12 +18,11 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import { operatorFail2banSSHD, searchFail2ban } from '@/api/modules/toolbox';
-import Header from '@/components/drawer-header/index.vue';
 import { FormInstance } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
diff --git a/frontend/src/views/toolbox/fail2ban/log-path/index.vue b/frontend/src/views/toolbox/fail2ban/log-path/index.vue
index c7bb168b2..9e57b94a9 100644
--- a/frontend/src/views/toolbox/fail2ban/log-path/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/log-path/index.vue
@@ -1,43 +1,24 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('toolbox.fail2ban.logPath')" :back="handleClose" />
-            </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('toolbox.fail2ban.logPath')"
-                            prop="logPath"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input v-model="form.logPath">
-                                <template #prepend>
-                                    <FileList @choose="loadLogPath"></FileList>
-                                </template>
-                            </el-input>
-                            <span class="input-help">{{ $t('toolbox.fail2ban.logPathHelper') }}</span>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('toolbox.fail2ban.logPath')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('toolbox.fail2ban.logPath')" prop="logPath" :rules="Rules.requiredInput">
+                <el-input v-model="form.logPath">
+                    <template #prepend>
+                        <FileList @choose="loadLogPath"></FileList>
+                    </template>
+                </el-input>
+                <span class="input-help">{{ $t('toolbox.fail2ban.logPathHelper') }}</span>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -46,7 +27,6 @@ import { MsgSuccess } from '@/utils/message';
 import { updateFail2ban } from '@/api/modules/toolbox';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
 
diff --git a/frontend/src/views/toolbox/fail2ban/max-retry/index.vue b/frontend/src/views/toolbox/fail2ban/max-retry/index.vue
index cc4444f9e..7213ffd24 100644
--- a/frontend/src/views/toolbox/fail2ban/max-retry/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/max-retry/index.vue
@@ -1,43 +1,21 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('toolbox.fail2ban.maxRetry')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :rules="rules"
-                :model="form"
-                @submit.prevent
-                v-loading="loading"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('toolbox.fail2ban.maxRetry')" prop="maxRetry">
-                            <el-input type="number" clearable v-model.number="form.maxRetry">
-                                <template #append>{{ $t('commons.units.time') }}</template>
-                            </el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('toolbox.fail2ban.maxRetry')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :rules="rules" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('toolbox.fail2ban.maxRetry')" prop="maxRetry">
+                <el-input type="number" clearable v-model.number="form.maxRetry">
+                    <template #append>{{ $t('commons.units.time') }}</template>
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -45,7 +23,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateFail2ban } from '@/api/modules/toolbox';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/toolbox/fail2ban/port/index.vue b/frontend/src/views/toolbox/fail2ban/port/index.vue
index 9d166c211..31ab3c689 100644
--- a/frontend/src/views/toolbox/fail2ban/port/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/port/index.vue
@@ -1,41 +1,19 @@
 <template>
-    <div>
-        <el-drawer
-            v-model="drawerVisible"
-            :destroy-on-close="true"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            size="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('toolbox.fail2ban.sshPort')" :back="handleClose" />
-            </template>
-            <el-form
-                ref="formRef"
-                label-position="top"
-                :rules="rules"
-                :model="form"
-                @submit.prevent
-                v-loading="loading"
-            >
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item :label="$t('toolbox.fail2ban.sshPort')" prop="port">
-                            <el-input type="number" clearable v-model.number="form.port" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
-                    <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
-                        {{ $t('commons.button.confirm') }}
-                    </el-button>
-                </span>
-            </template>
-        </el-drawer>
-    </div>
+    <DrawerPro v-model="drawerVisible" :header="$t('toolbox.fail2ban.sshPort')" :back="handleClose" size="small">
+        <el-form ref="formRef" label-position="top" :rules="rules" :model="form" @submit.prevent v-loading="loading">
+            <el-form-item :label="$t('toolbox.fail2ban.sshPort')" prop="port">
+                <el-input type="number" clearable v-model.number="form.port" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button :disabled="loading" type="primary" @click="onSave(formRef)">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
@@ -43,7 +21,6 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import { Rules, checkNumberRange } from '@/global/form-rules';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { updateFail2ban } from '@/api/modules/toolbox';
 
 const emit = defineEmits<{ (e: 'search'): void }>();
diff --git a/frontend/src/views/toolbox/ftp/log/index.vue b/frontend/src/views/toolbox/ftp/log/index.vue
index 3870ec30e..0bd9ddeab 100644
--- a/frontend/src/views/toolbox/ftp/log/index.vue
+++ b/frontend/src/views/toolbox/ftp/log/index.vue
@@ -1,20 +1,10 @@
 <template>
-    <el-drawer
-        v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader header="FTP" :resource="paginationConfig.user" :back="handleClose" />
-        </template>
+    <DrawerPro v-model="drawerVisible" header="FTP" :resource="paginationConfig.user" :back="handleClose" size="large">
         <el-select @change="search" class="p-w-200" clearable v-model="paginationConfig.operation">
             <template #prefix>{{ $t('commons.table.operate') }}</template>
             <el-option value="PUT" :label="$t('file.upload')" />
             <el-option value="GET" :label="$t('file.download')" />
         </el-select>
-
         <ComplexTable class="mt-2" :pagination-config="paginationConfig" :data="data" @search="search">
             <el-table-column label="ip" prop="ip" show-overflow-tooltip />
             <el-table-column :label="$t('commons.table.status')" min-width="50" show-overflow-tooltip prop="status">
@@ -45,12 +35,11 @@
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { searchFtpLog } from '@/api/modules/toolbox';
 import { computeSizeFromByte } from '@/utils/util';
 import i18n from '@/lang';
diff --git a/frontend/src/views/toolbox/ftp/operate/index.vue b/frontend/src/views/toolbox/ftp/operate/index.vue
index c136cbb54..3662f9205 100644
--- a/frontend/src/views/toolbox/ftp/operate/index.vue
+++ b/frontend/src/views/toolbox/ftp/operate/index.vue
@@ -1,48 +1,32 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
+        :header="title"
+        :resource="dialogData.title === 'add' ? '' : dialogData.rowData?.user"
+        :back="handleClose"
+        size="large"
     >
-        <template #header>
-            <DrawerHeader
-                :header="title"
-                :hideResource="dialogData.title === 'add'"
-                :resource="dialogData.rowData?.user"
-                :back="handleClose"
-            />
-        </template>
         <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules" v-loading="loading">
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
-                    <el-form-item :label="$t('commons.login.username')" prop="user">
-                        <el-input
-                            :disabled="dialogData.title === 'edit'"
-                            clearable
-                            v-model.trim="dialogData.rowData!.user"
-                        />
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.login.password')" prop="password">
-                        <el-input type="password" clearable v-model="dialogData.rowData!.password" show-password>
-                            <template #append>
-                                <el-button @click="random">{{ $t('commons.button.random') }}</el-button>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('file.root')" prop="path">
-                        <el-input v-model="dialogData.rowData!.path">
-                            <template #prepend>
-                                <FileList @choose="loadDir" :dir="true"></FileList>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('commons.table.description')" prop="description">
-                        <el-input type="textarea" :rows="3" clearable v-model="dialogData.rowData!.description" />
-                    </el-form-item>
-                </el-col>
-            </el-row>
+            <el-form-item :label="$t('commons.login.username')" prop="user">
+                <el-input :disabled="dialogData.title === 'edit'" clearable v-model.trim="dialogData.rowData!.user" />
+            </el-form-item>
+            <el-form-item :label="$t('commons.login.password')" prop="password">
+                <el-input type="password" clearable v-model="dialogData.rowData!.password" show-password>
+                    <template #append>
+                        <el-button @click="random">{{ $t('commons.button.random') }}</el-button>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('file.root')" prop="path">
+                <el-input v-model="dialogData.rowData!.path">
+                    <template #prepend>
+                        <FileList @choose="loadDir" :dir="true"></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('commons.table.description')" prop="description">
+                <el-input type="textarea" :rows="3" clearable v-model="dialogData.rowData!.description" />
+            </el-form-item>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -52,7 +36,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -61,7 +45,6 @@ import { Rules } from '@/global/form-rules';
 import FileList from '@/components/file-list/index.vue';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
 import { Toolbox } from '@/api/interface/toolbox';
 import { createFtp, updateFtp } from '@/api/modules/toolbox';
diff --git a/frontend/src/views/toolbox/supervisor/config/index.vue b/frontend/src/views/toolbox/supervisor/config/index.vue
index 116d95c4b..ec473f8dd 100644
--- a/frontend/src/views/toolbox/supervisor/config/index.vue
+++ b/frontend/src/views/toolbox/supervisor/config/index.vue
@@ -1,6 +1,6 @@
 <template>
     <LayoutContent :title="$t('tool.supervisor.config')" :reload="true">
-        <template #buttons>
+        <template #leftToolBar>
             <el-button type="primary" :plain="activeName !== '1'" @click="changeTab('1')">
                 {{ $t('nginx.configResource') }}
             </el-button>
diff --git a/frontend/src/views/toolbox/supervisor/create/index.vue b/frontend/src/views/toolbox/supervisor/create/index.vue
index 97b092306..c7c6ba440 100644
--- a/frontend/src/views/toolbox/supervisor/create/index.vue
+++ b/frontend/src/views/toolbox/supervisor/create/index.vue
@@ -1,40 +1,36 @@
 <template>
-    <el-drawer
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
+    <DrawerPro
         v-model="open"
-        size="30%"
+        :header="process.operate == 'create' ? $t('commons.button.create') : $t('commons.button.edit')"
+        :back="handleClose"
+        size="small"
     >
-        <template #header>
-            <DrawerHeader
-                :header="process.operate == 'create' ? $t('commons.button.create') : $t('commons.button.edit')"
-                :back="handleClose"
-            />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form ref="processForm" label-position="top" :model="process" label-width="100px" :rules="rules">
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input v-model.trim="process.name" :disabled="process.operate == 'update'"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('tool.supervisor.user')" prop="user">
-                        <el-input v-model.trim="process.user"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('tool.supervisor.dir')" prop="dir">
-                        <el-input v-model.trim="process.dir">
-                            <template #prepend><FileList @choose="getPath" :dir="true"></FileList></template>
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('tool.supervisor.command')" prop="command">
-                        <el-input v-model="process.command"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('tool.supervisor.numprocs')" prop="numprocsNum">
-                        <el-input type="number" v-model.number="process.numprocsNum"></el-input>
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+        <el-form
+            ref="processForm"
+            label-position="top"
+            :model="process"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input v-model.trim="process.name" :disabled="process.operate == 'update'"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('tool.supervisor.user')" prop="user">
+                <el-input v-model.trim="process.user"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('tool.supervisor.dir')" prop="dir">
+                <el-input v-model.trim="process.dir">
+                    <template #prepend><FileList @choose="getPath" :dir="true"></FileList></template>
+                </el-input>
+            </el-form-item>
+            <el-form-item :label="$t('tool.supervisor.command')" prop="command">
+                <el-input v-model="process.command"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('tool.supervisor.numprocs')" prop="numprocsNum">
+                <el-input type="number" v-model.number="process.numprocsNum"></el-input>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
@@ -43,7 +39,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/toolbox/supervisor/file/index.vue b/frontend/src/views/toolbox/supervisor/file/index.vue
index 58ab67a3b..260980b77 100644
--- a/frontend/src/views/toolbox/supervisor/file/index.vue
+++ b/frontend/src/views/toolbox/supervisor/file/index.vue
@@ -1,49 +1,36 @@
 <template>
-    <el-drawer
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        v-model="open"
-        :size="globalStore.isFullScreen ? '100%' : '50%'"
-        :before-close="handleClose"
-    >
-        <template #header>
-            <DrawerHeader :header="title" :back="handleClose">
-                <template #extra v-if="!mobile">
-                    <el-tooltip :content="loadTooltip()" placement="top">
-                        <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
-                    </el-tooltip>
-                </template>
-            </DrawerHeader>
+    <DrawerPro v-model="open" :header="title" :back="handleClose" size="large" :fullScreen="true">
+        <template #content>
+            <div v-if="req.file != 'config'">
+                <el-tabs v-model="req.file" type="card" @tab-click="handleChange">
+                    <el-tab-pane :label="$t('logs.runLog')" name="out.log"></el-tab-pane>
+                    <el-tab-pane :label="$t('logs.errLog')" name="err.log"></el-tab-pane>
+                </el-tabs>
+                <el-checkbox border v-model="tailLog" class="float-left" @change="changeTail">
+                    {{ $t('commons.button.watch') }}
+                </el-checkbox>
+                <el-button class="ml-5" @click="cleanLog" icon="Delete">
+                    {{ $t('commons.button.clean') }}
+                </el-button>
+            </div>
+            <br />
+            <div v-loading="loading">
+                <codemirror
+                    style="height: calc(100vh - 430px); min-height: 300px"
+                    :autofocus="true"
+                    :placeholder="$t('website.noLog')"
+                    :indent-with-tab="true"
+                    :tabSize="4"
+                    :lineWrapping="true"
+                    :matchBrackets="true"
+                    theme="cobalt"
+                    :styleActiveLine="true"
+                    :extensions="extensions"
+                    v-model="content"
+                    @ready="handleReady"
+                />
+            </div>
         </template>
-        <div v-if="req.file != 'config'">
-            <el-tabs v-model="req.file" type="card" @tab-click="handleChange">
-                <el-tab-pane :label="$t('logs.runLog')" name="out.log"></el-tab-pane>
-                <el-tab-pane :label="$t('logs.errLog')" name="err.log"></el-tab-pane>
-            </el-tabs>
-            <el-checkbox border v-model="tailLog" style="float: left" @change="changeTail">
-                {{ $t('commons.button.watch') }}
-            </el-checkbox>
-            <el-button style="margin-left: 20px" @click="cleanLog" icon="Delete">
-                {{ $t('commons.button.clean') }}
-            </el-button>
-        </div>
-        <br />
-        <div v-loading="loading">
-            <codemirror
-                style="height: calc(100vh - 430px); min-height: 300px"
-                :autofocus="true"
-                :placeholder="$t('website.noLog')"
-                :indent-with-tab="true"
-                :tabSize="4"
-                :lineWrapping="true"
-                :matchBrackets="true"
-                theme="cobalt"
-                :styleActiveLine="true"
-                :extensions="extensions"
-                v-model="content"
-                @ready="handleReady"
-            />
-        </div>
 
         <template #footer>
             <span>
@@ -53,21 +40,18 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
-
+    </DrawerPro>
     <OpDialog ref="opRef" @search="getContent" />
 </template>
 <script lang="ts" setup>
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
-import { computed, onUnmounted, reactive, ref, shallowRef } from 'vue';
+import { onUnmounted, reactive, ref, shallowRef } from 'vue';
 import { OperateSupervisorProcessFile } from '@/api/modules/host-tool';
 import i18n from '@/lang';
 import { TabsPaneContext } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
-import screenfull from 'screenfull';
-import { GlobalStore } from '@/store';
 
 const extensions = [javascript(), oneDark];
 const loading = ref(false);
@@ -82,7 +66,6 @@ const req = reactive({
 });
 const title = ref('');
 const opRef = ref();
-const globalStore = GlobalStore();
 
 const view = shallowRef();
 const handleReady = (payload) => {
@@ -92,19 +75,6 @@ let timer: NodeJS.Timer | null = null;
 
 const em = defineEmits(['search']);
 
-const mobile = computed(() => {
-    return globalStore.isMobile();
-});
-
-function toggleFullscreen() {
-    if (screenfull.isEnabled) {
-        screenfull.toggle();
-    }
-}
-const loadTooltip = () => {
-    return i18n.global.t('commons.button.' + (screenfull.isFullscreen ? 'quitFullscreen' : 'fullscreen'));
-};
-
 const getContent = () => {
     loading.value = true;
     OperateSupervisorProcessFile(req)
@@ -163,11 +133,6 @@ const acceptParams = (name: string, file: string, operate: string) => {
     title.value = file == 'config' ? i18n.global.t('website.source') : i18n.global.t('commons.button.log');
     getContent();
     open.value = true;
-    if (!mobile.value) {
-        screenfull.on('change', () => {
-            globalStore.isFullScreen = screenfull.isFullscreen;
-        });
-    }
 };
 
 const cleanLog = async () => {
diff --git a/frontend/src/views/toolbox/supervisor/status/init/index.vue b/frontend/src/views/toolbox/supervisor/status/init/index.vue
index 60257e175..7553adecd 100644
--- a/frontend/src/views/toolbox/supervisor/status/init/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/init/index.vue
@@ -1,33 +1,28 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="30%">
-        <template #header>
-            <DrawerHeader :header="$t('commons.button.init')" :back="handleClose" />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form ref="initForm" label-position="top" :model="initModel" label-width="100px" :rules="rules">
-                    <el-form-item :label="$t('tool.supervisor.primaryConfig')" prop="primaryConfig">
-                        <el-input v-model.trim="initModel.primaryConfig"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('tool.supervisor.serviceName')" prop="serviceName">
-                        <el-input v-model.trim="initModel.serviceName"></el-input>
-                        <span class="input-help">{{ $t('tool.supervisor.serviceNameHelper') }}</span>
-                    </el-form-item>
-                    <el-alert
-                        :title="$t('tool.supervisor.initWarn')"
-                        class="common-prompt"
-                        :closable="false"
-                        type="error"
-                    />
-                    <el-alert
-                        :title="$t('tool.supervisor.restartHelper')"
-                        class="common-prompt"
-                        :closable="false"
-                        type="error"
-                    />
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="$t('commons.button.init')" :back="handleClose" size="small">
+        <el-form
+            ref="initForm"
+            label-position="top"
+            :model="initModel"
+            label-width="100px"
+            :rules="rules"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('tool.supervisor.primaryConfig')" prop="primaryConfig">
+                <el-input v-model.trim="initModel.primaryConfig"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('tool.supervisor.serviceName')" prop="serviceName">
+                <el-input v-model.trim="initModel.serviceName"></el-input>
+                <span class="input-help">{{ $t('tool.supervisor.serviceNameHelper') }}</span>
+            </el-form-item>
+            <el-alert :title="$t('tool.supervisor.initWarn')" class="common-prompt" :closable="false" type="error" />
+            <el-alert
+                :title="$t('tool.supervisor.restartHelper')"
+                class="common-prompt"
+                :closable="false"
+                type="error"
+            />
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose()" :disabled="loading">
@@ -39,7 +34,7 @@
             </span>
         </template>
         <ConfirmDialog ref="confirmDialogRef" @confirm="submit(initForm)"></ConfirmDialog>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
diff --git a/frontend/src/views/website/runtime/go/operate/index.vue b/frontend/src/views/website/runtime/go/operate/index.vue
index 3e5d7400e..00c83797e 100644
--- a/frontend/src/views/website/runtime/go/operate/index.vue
+++ b/frontend/src/views/website/runtime/go/operate/index.vue
@@ -1,152 +1,136 @@
 <template>
-    <el-drawer
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
+    <DrawerPro
         v-model="open"
-        size="50%"
+        :header="$t('runtime.' + mode)"
+        size="large"
+        :resource="mode === 'edit' ? runtime.name : ''"
+        :back="handleClose"
     >
-        <template #header>
-            <DrawerHeader
-                :header="$t('runtime.' + mode)"
-                :hideResource="mode == 'create'"
-                :resource="runtime.name"
-                :back="handleClose"
-            />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form
-                    ref="runtimeForm"
-                    label-position="top"
-                    :model="runtime"
-                    label-width="125px"
-                    :rules="rules"
-                    :validate-on-rule-change="false"
-                >
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('runtime.app')" prop="appID">
-                        <el-row :gutter="20">
-                            <el-col :span="12">
-                                <el-select
-                                    v-model="runtime.appID"
-                                    :disabled="mode === 'edit'"
-                                    @change="changeApp(runtime.appID)"
-                                    class="p-w-200"
-                                >
-                                    <el-option
-                                        v-for="(app, index) in apps"
-                                        :key="index"
-                                        :label="app.name"
-                                        :value="app.id"
-                                    ></el-option>
-                                </el-select>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-select
-                                    v-model="runtime.version"
-                                    :disabled="mode === 'edit'"
-                                    @change="changeVersion()"
-                                    class="p-w-200"
-                                >
-                                    <el-option
-                                        v-for="(version, index) in appVersions"
-                                        :key="index"
-                                        :label="version"
-                                        :value="version"
-                                    ></el-option>
-                                </el-select>
-                            </el-col>
-                        </el-row>
-                    </el-form-item>
-                    <el-form-item :label="$t('tool.supervisor.dir')" prop="codeDir">
-                        <el-input v-model.trim="runtime.codeDir" :disabled="mode === 'edit'">
-                            <template #prepend>
-                                <FileList
-                                    :disabled="mode === 'edit'"
-                                    :path="runtime.codeDir"
-                                    @choose="getPath"
-                                    :dir="true"
-                                ></FileList>
-                            </template>
-                        </el-input>
+        <el-form
+            v-loading="loading"
+            ref="runtimeForm"
+            label-position="top"
+            :model="runtime"
+            label-width="125px"
+            :rules="rules"
+            :validate-on-rule-change="false"
+        >
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('runtime.app')" prop="appID">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-select
+                            v-model="runtime.appID"
+                            :disabled="mode === 'edit'"
+                            @change="changeApp(runtime.appID)"
+                            class="p-w-200"
+                        >
+                            <el-option
+                                v-for="(app, index) in apps"
+                                :key="index"
+                                :label="app.name"
+                                :value="app.id"
+                            ></el-option>
+                        </el-select>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-select
+                            v-model="runtime.version"
+                            :disabled="mode === 'edit'"
+                            @change="changeVersion()"
+                            class="p-w-200"
+                        >
+                            <el-option
+                                v-for="(version, index) in appVersions"
+                                :key="index"
+                                :label="version"
+                                :value="version"
+                            ></el-option>
+                        </el-select>
+                    </el-col>
+                </el-row>
+            </el-form-item>
+            <el-form-item :label="$t('tool.supervisor.dir')" prop="codeDir">
+                <el-input v-model.trim="runtime.codeDir" :disabled="mode === 'edit'">
+                    <template #prepend>
+                        <FileList
+                            :disabled="mode === 'edit'"
+                            :path="runtime.codeDir"
+                            @choose="getPath"
+                            :dir="true"
+                        ></FileList>
+                    </template>
+                </el-input>
+                <span class="input-help">
+                    {{ $t('runtime.goDirHelper') }}
+                </span>
+            </el-form-item>
+            <el-row :gutter="20">
+                <el-col :span="18">
+                    <el-form-item :label="$t('runtime.runScript')" prop="params.EXEC_SCRIPT">
+                        <el-input v-model="runtime.params['EXEC_SCRIPT']"></el-input>
                         <span class="input-help">
-                            {{ $t('runtime.goDirHelper') }}
+                            {{ $t('runtime.goHelper') }}
                         </span>
                     </el-form-item>
-                    <el-row :gutter="20">
-                        <el-col :span="18">
-                            <el-form-item :label="$t('runtime.runScript')" prop="params.EXEC_SCRIPT">
-                                <el-input v-model="runtime.params['EXEC_SCRIPT']"></el-input>
-                                <span class="input-help">
-                                    {{ $t('runtime.goHelper') }}
-                                </span>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="7">
-                            <el-form-item :label="$t('runtime.appPort')" prop="params.GO_APP_PORT">
-                                <el-input v-model.number="runtime.params['GO_APP_PORT']" />
-                                <span class="input-help">{{ $t('runtime.appPortHelper') }}</span>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="7">
-                            <el-form-item :label="$t('runtime.externalPort')" prop="port">
-                                <el-input v-model.number="runtime.port" />
-                                <span class="input-help">{{ $t('runtime.externalPortHelper') }}</span>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="4">
-                            <el-form-item :label="$t('commons.button.add') + $t('commons.table.port')">
-                                <el-button @click="addPort">
-                                    <el-icon><Plus /></el-icon>
-                                </el-button>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item :label="$t('app.allowPort')" prop="params.HOST_IP">
-                                <el-switch
-                                    v-model="runtime.params['HOST_IP']"
-                                    :active-value="'0.0.0.0'"
-                                    :inactive-value="'127.0.0.1'"
-                                />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20" v-for="(port, index) of runtime.exposedPorts" :key="index">
-                        <el-col :span="7">
-                            <el-form-item
-                                :prop="'exposedPorts.' + index + '.containerPort'"
-                                :rules="rules.params.GO_APP_PORT"
-                            >
-                                <el-input v-model.number="port.containerPort" :placeholder="$t('runtime.appPort')" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="7">
-                            <el-form-item
-                                :prop="'exposedPorts.' + index + '.hostPort'"
-                                :rules="rules.params.GO_APP_PORT"
-                            >
-                                <el-input v-model.number="port.hostPort" :placeholder="$t('runtime.externalPort')" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="4">
-                            <el-form-item>
-                                <el-button type="primary" @click="removePort(index)" link>
-                                    {{ $t('commons.button.delete') }}
-                                </el-button>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-form-item :label="$t('app.containerName')" prop="params.CONTAINER_NAME">
-                        <el-input v-model.trim="runtime.params['CONTAINER_NAME']"></el-input>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="7">
+                    <el-form-item :label="$t('runtime.appPort')" prop="params.GO_APP_PORT">
+                        <el-input v-model.number="runtime.params['GO_APP_PORT']" />
+                        <span class="input-help">{{ $t('runtime.appPortHelper') }}</span>
                     </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+                </el-col>
+                <el-col :span="7">
+                    <el-form-item :label="$t('runtime.externalPort')" prop="port">
+                        <el-input v-model.number="runtime.port" />
+                        <span class="input-help">{{ $t('runtime.externalPortHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item :label="$t('commons.button.add') + $t('commons.table.port')">
+                        <el-button @click="addPort">
+                            <el-icon><Plus /></el-icon>
+                        </el-button>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item :label="$t('app.allowPort')" prop="params.HOST_IP">
+                        <el-switch
+                            v-model="runtime.params['HOST_IP']"
+                            :active-value="'0.0.0.0'"
+                            :inactive-value="'127.0.0.1'"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20" v-for="(port, index) of runtime.exposedPorts" :key="index">
+                <el-col :span="7">
+                    <el-form-item :prop="'exposedPorts.' + index + '.containerPort'" :rules="rules.params.GO_APP_PORT">
+                        <el-input v-model.number="port.containerPort" :placeholder="$t('runtime.appPort')" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="7">
+                    <el-form-item :prop="'exposedPorts.' + index + '.hostPort'" :rules="rules.params.GO_APP_PORT">
+                        <el-input v-model.number="port.hostPort" :placeholder="$t('runtime.externalPort')" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item>
+                        <el-button type="primary" @click="removePort(index)" link>
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-form-item :label="$t('app.containerName')" prop="params.CONTAINER_NAME">
+                <el-input v-model.trim="runtime.params['CONTAINER_NAME']"></el-input>
+            </el-form-item>
+        </el-form>
+
         <template #footer>
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -155,7 +139,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -168,7 +152,6 @@ import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { reactive, ref, watch } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 interface OperateRrops {
     id?: number;
diff --git a/frontend/src/views/website/runtime/java/operate/index.vue b/frontend/src/views/website/runtime/java/operate/index.vue
index 6d1232b2b..c5578f94a 100644
--- a/frontend/src/views/website/runtime/java/operate/index.vue
+++ b/frontend/src/views/website/runtime/java/operate/index.vue
@@ -1,152 +1,137 @@
 <template>
-    <el-drawer
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
+    <DrawerPro
         v-model="open"
-        size="50%"
+        :header="$t('runtime.' + mode)"
+        size="large"
+        :resource="mode === 'edit' ? runtime.name : ''"
+        :back="handleClose"
     >
-        <template #header>
-            <DrawerHeader
-                :header="$t('runtime.' + mode)"
-                :hideResource="mode == 'create'"
-                :resource="runtime.name"
-                :back="handleClose"
-            />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form
-                    ref="runtimeForm"
-                    label-position="top"
-                    :model="runtime"
-                    label-width="125px"
-                    :rules="rules"
-                    :validate-on-rule-change="false"
-                >
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('runtime.app')" prop="appID">
-                        <el-row :gutter="20">
-                            <el-col :span="12">
-                                <el-select
-                                    v-model="runtime.appID"
-                                    :disabled="mode === 'edit'"
-                                    @change="changeApp(runtime.appID)"
-                                    class="p-w-200"
-                                >
-                                    <el-option
-                                        v-for="(app, index) in apps"
-                                        :key="index"
-                                        :label="app.name"
-                                        :value="app.id"
-                                    ></el-option>
-                                </el-select>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-select
-                                    v-model="runtime.version"
-                                    :disabled="mode === 'edit'"
-                                    @change="changeVersion()"
-                                    class="p-w-200"
-                                >
-                                    <el-option
-                                        v-for="(version, index) in appVersions"
-                                        :key="index"
-                                        :label="version"
-                                        :value="version"
-                                    ></el-option>
-                                </el-select>
-                            </el-col>
-                        </el-row>
-                    </el-form-item>
-                    <el-form-item :label="$t('tool.supervisor.dir')" prop="codeDir">
-                        <el-input v-model.trim="runtime.codeDir" :disabled="mode === 'edit'">
-                            <template #prepend>
-                                <FileList
-                                    :disabled="mode === 'edit'"
-                                    :path="runtime.codeDir"
-                                    @choose="getPath"
-                                    :dir="true"
-                                ></FileList>
-                            </template>
-                        </el-input>
+        <el-form
+            ref="runtimeForm"
+            label-position="top"
+            :model="runtime"
+            label-width="125px"
+            :rules="rules"
+            :validate-on-rule-change="false"
+        >
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('runtime.app')" prop="appID">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-select
+                            v-model="runtime.appID"
+                            :disabled="mode === 'edit'"
+                            @change="changeApp(runtime.appID)"
+                            class="p-w-200"
+                        >
+                            <el-option
+                                v-for="(app, index) in apps"
+                                :key="index"
+                                :label="app.name"
+                                :value="app.id"
+                            ></el-option>
+                        </el-select>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-select
+                            v-model="runtime.version"
+                            :disabled="mode === 'edit'"
+                            @change="changeVersion()"
+                            class="p-w-200"
+                        >
+                            <el-option
+                                v-for="(version, index) in appVersions"
+                                :key="index"
+                                :label="version"
+                                :value="version"
+                            ></el-option>
+                        </el-select>
+                    </el-col>
+                </el-row>
+            </el-form-item>
+            <el-form-item :label="$t('tool.supervisor.dir')" prop="codeDir">
+                <el-input v-model.trim="runtime.codeDir" :disabled="mode === 'edit'">
+                    <template #prepend>
+                        <FileList
+                            :disabled="mode === 'edit'"
+                            :path="runtime.codeDir"
+                            @choose="getPath"
+                            :dir="true"
+                        ></FileList>
+                    </template>
+                </el-input>
+                <span class="input-help">
+                    {{ $t('runtime.javaDirHelper') }}
+                </span>
+            </el-form-item>
+            <el-row :gutter="20">
+                <el-col :span="18">
+                    <el-form-item :label="$t('runtime.runScript')" prop="params.EXEC_SCRIPT">
+                        <el-input v-model="runtime.params['EXEC_SCRIPT']"></el-input>
                         <span class="input-help">
-                            {{ $t('runtime.javaDirHelper') }}
+                            {{ $t('runtime.javaScriptHelper') }}
                         </span>
                     </el-form-item>
-                    <el-row :gutter="20">
-                        <el-col :span="18">
-                            <el-form-item :label="$t('runtime.runScript')" prop="params.EXEC_SCRIPT">
-                                <el-input v-model="runtime.params['EXEC_SCRIPT']"></el-input>
-                                <span class="input-help">
-                                    {{ $t('runtime.javaScriptHelper') }}
-                                </span>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="7">
-                            <el-form-item :label="$t('runtime.appPort')" prop="params.JAVA_APP_PORT">
-                                <el-input v-model.number="runtime.params['JAVA_APP_PORT']" />
-                                <span class="input-help">{{ $t('runtime.appPortHelper') }}</span>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="7">
-                            <el-form-item :label="$t('runtime.externalPort')" prop="port">
-                                <el-input v-model.number="runtime.port" />
-                                <span class="input-help">{{ $t('runtime.externalPortHelper') }}</span>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="4">
-                            <el-form-item :label="$t('commons.button.add') + $t('commons.table.port')">
-                                <el-button @click="addPort">
-                                    <el-icon><Plus /></el-icon>
-                                </el-button>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item :label="$t('app.allowPort')" prop="params.HOST_IP">
-                                <el-switch
-                                    v-model="runtime.params['HOST_IP']"
-                                    :active-value="'0.0.0.0'"
-                                    :inactive-value="'127.0.0.1'"
-                                />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20" v-for="(port, index) of runtime.exposedPorts" :key="index">
-                        <el-col :span="7">
-                            <el-form-item
-                                :prop="'exposedPorts.' + index + '.containerPort'"
-                                :rules="rules.params.JAVA_APP_PORT"
-                            >
-                                <el-input v-model.number="port.containerPort" :placeholder="$t('runtime.appPort')" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="7">
-                            <el-form-item
-                                :prop="'exposedPorts.' + index + '.hostPort'"
-                                :rules="rules.params.JAVA_APP_PORT"
-                            >
-                                <el-input v-model.number="port.hostPort" :placeholder="$t('runtime.externalPort')" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="4">
-                            <el-form-item>
-                                <el-button type="primary" @click="removePort(index)" link>
-                                    {{ $t('commons.button.delete') }}
-                                </el-button>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-form-item :label="$t('app.containerName')" prop="params.CONTAINER_NAME">
-                        <el-input v-model.trim="runtime.params['CONTAINER_NAME']"></el-input>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="7">
+                    <el-form-item :label="$t('runtime.appPort')" prop="params.JAVA_APP_PORT">
+                        <el-input v-model.number="runtime.params['JAVA_APP_PORT']" />
+                        <span class="input-help">{{ $t('runtime.appPortHelper') }}</span>
                     </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+                </el-col>
+                <el-col :span="7">
+                    <el-form-item :label="$t('runtime.externalPort')" prop="port">
+                        <el-input v-model.number="runtime.port" />
+                        <span class="input-help">{{ $t('runtime.externalPortHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item :label="$t('commons.button.add') + $t('commons.table.port')">
+                        <el-button @click="addPort">
+                            <el-icon><Plus /></el-icon>
+                        </el-button>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item :label="$t('app.allowPort')" prop="params.HOST_IP">
+                        <el-switch
+                            v-model="runtime.params['HOST_IP']"
+                            :active-value="'0.0.0.0'"
+                            :inactive-value="'127.0.0.1'"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20" v-for="(port, index) of runtime.exposedPorts" :key="index">
+                <el-col :span="7">
+                    <el-form-item
+                        :prop="'exposedPorts.' + index + '.containerPort'"
+                        :rules="rules.params.JAVA_APP_PORT"
+                    >
+                        <el-input v-model.number="port.containerPort" :placeholder="$t('runtime.appPort')" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="7">
+                    <el-form-item :prop="'exposedPorts.' + index + '.hostPort'" :rules="rules.params.JAVA_APP_PORT">
+                        <el-input v-model.number="port.hostPort" :placeholder="$t('runtime.externalPort')" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item>
+                        <el-button type="primary" @click="removePort(index)" link>
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-form-item :label="$t('app.containerName')" prop="params.CONTAINER_NAME">
+                <el-input v-model.trim="runtime.params['CONTAINER_NAME']"></el-input>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -155,7 +140,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -168,7 +153,6 @@ import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { reactive, ref, watch } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 interface OperateRrops {
     id?: number;
diff --git a/frontend/src/views/website/runtime/node/module/index.vue b/frontend/src/views/website/runtime/node/module/index.vue
index 2b6f9b686..774339ddc 100644
--- a/frontend/src/views/website/runtime/node/module/index.vue
+++ b/frontend/src/views/website/runtime/node/module/index.vue
@@ -1,46 +1,49 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="50%">
-        <template #header>
-            <DrawerHeader :header="$t('runtime.moduleManager')" :back="handleClose" />
+    <DrawerPro v-model="open" :header="$t('runtime.moduleManager')" size="large" :back="handleClose">
+        <template #content>
+            <el-row :gutter="20" v-loading="loading">
+                <el-col :span="10">
+                    <el-input v-model="module">
+                        <template #prepend>{{ packageManager }}</template>
+                    </el-input>
+                </el-col>
+                <el-col :span="14">
+                    <el-button @click="operateModule('install', module)" type="primary" :disabled="module === ''">
+                        {{ $t('commons.operate.install') }}
+                    </el-button>
+                </el-col>
+                <el-col>
+                    <ComplexTable :data="data" @search="search()" class="mt-5" :height="800">
+                        <el-table-column
+                            :label="$t('commons.table.name')"
+                            prop="name"
+                            min-width="100px"
+                        ></el-table-column>
+                        <el-table-column :label="$t('container.version')" prop="version" width="80px"></el-table-column>
+                        <el-table-column
+                            :label="$t('commons.table.protocol')"
+                            prop="license"
+                            width="120px"
+                        ></el-table-column>
+                        <el-table-column
+                            :label="$t('container.description')"
+                            fix
+                            min-width="120px"
+                            prop="description"
+                        ></el-table-column>
+                        <fu-table-operations
+                            :ellipsis="10"
+                            width="150px"
+                            :buttons="buttons"
+                            :label="$t('commons.table.operate')"
+                            fixed="right"
+                            fix
+                        />
+                    </ComplexTable>
+                </el-col>
+            </el-row>
         </template>
-        <el-row :gutter="20" v-loading="loading">
-            <el-col :span="10">
-                <el-input v-model="module">
-                    <template #prepend>{{ packageManager }}</template>
-                </el-input>
-            </el-col>
-            <el-col :span="14">
-                <el-button @click="operateModule('install', module)" type="primary" :disabled="module === ''">
-                    {{ $t('commons.operate.install') }}
-                </el-button>
-            </el-col>
-            <el-col>
-                <ComplexTable :data="data" @search="search()" class="mt-5" :height="800">
-                    <el-table-column :label="$t('commons.table.name')" prop="name" min-width="100px"></el-table-column>
-                    <el-table-column :label="$t('container.version')" prop="version" width="80px"></el-table-column>
-                    <el-table-column
-                        :label="$t('commons.table.protocol')"
-                        prop="license"
-                        width="120px"
-                    ></el-table-column>
-                    <el-table-column
-                        :label="$t('container.description')"
-                        fix
-                        min-width="120px"
-                        prop="description"
-                    ></el-table-column>
-                    <fu-table-operations
-                        :ellipsis="10"
-                        width="150px"
-                        :buttons="buttons"
-                        :label="$t('commons.table.operate')"
-                        fixed="right"
-                        fix
-                    />
-                </ComplexTable>
-            </el-col>
-        </el-row>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
diff --git a/frontend/src/views/website/runtime/node/operate/index.vue b/frontend/src/views/website/runtime/node/operate/index.vue
index 508ee8eae..33b347bee 100644
--- a/frontend/src/views/website/runtime/node/operate/index.vue
+++ b/frontend/src/views/website/runtime/node/operate/index.vue
@@ -1,198 +1,185 @@
 <template>
-    <el-drawer
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
+    <DrawerPro
         v-model="open"
-        size="50%"
+        :header="$t('runtime.' + mode)"
+        :resource="mode === 'edit' ? runtime.name : ''"
+        size="large"
+        :back="handleClose"
     >
-        <template #header>
-            <DrawerHeader
-                :header="$t('runtime.' + mode)"
-                :hideResource="mode == 'create'"
-                :resource="runtime.name"
-                :back="handleClose"
-            />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form
-                    ref="runtimeForm"
-                    label-position="top"
-                    :model="runtime"
-                    label-width="125px"
-                    :rules="rules"
-                    :validate-on-rule-change="false"
-                >
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('runtime.app')" prop="appID">
-                        <el-row :gutter="20">
-                            <el-col :span="12">
-                                <el-select
-                                    v-model="runtime.appID"
-                                    :disabled="mode === 'edit'"
-                                    @change="changeApp(runtime.appID)"
-                                    class="p-w-200"
-                                >
-                                    <el-option
-                                        v-for="(app, index) in apps"
-                                        :key="index"
-                                        :label="app.name"
-                                        :value="app.id"
-                                    ></el-option>
-                                </el-select>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-select
-                                    v-model="runtime.version"
-                                    :disabled="mode === 'edit'"
-                                    @change="changeVersion()"
-                                    class="p-w-200"
-                                >
-                                    <el-option
-                                        v-for="(version, index) in appVersions"
-                                        :key="index"
-                                        :label="version"
-                                        :value="version"
-                                    ></el-option>
-                                </el-select>
-                            </el-col>
-                        </el-row>
-                    </el-form-item>
-                    <el-form-item :label="$t('runtime.codeDir')" prop="codeDir">
-                        <el-input v-model.trim="runtime.codeDir" :disabled="mode === 'edit'">
-                            <template #prepend>
-                                <FileList
-                                    :disabled="mode === 'edit'"
-                                    :path="runtime.codeDir"
-                                    @choose="getPath"
-                                    :dir="true"
-                                ></FileList>
-                            </template>
-                        </el-input>
-                    </el-form-item>
-                    <el-row :gutter="20">
-                        <el-col :span="18">
-                            <el-form-item :label="$t('runtime.runScript')" prop="params.EXEC_SCRIPT">
-                                <el-select
-                                    v-model="runtime.params['EXEC_SCRIPT']"
-                                    v-if="runtime.params['CUSTOM_SCRIPT'] == '0'"
-                                >
-                                    <el-option
-                                        v-for="(script, index) in scripts"
-                                        :key="index"
-                                        :label="script.name + ' 【 ' + script.script + ' 】'"
-                                        :value="script.name"
-                                    >
-                                        <el-row :gutter="10">
-                                            <el-col :span="4">{{ script.name }}</el-col>
-                                            <el-col :span="10">{{ ' 【 ' + script.script + ' 】' }}</el-col>
-                                        </el-row>
-                                    </el-option>
-                                </el-select>
-                                <el-input v-else v-model="runtime.params['EXEC_SCRIPT']"></el-input>
-                                <span class="input-help" v-if="runtime.params['CUSTOM_SCRIPT'] == '0'">
-                                    {{ $t('runtime.runScriptHelper') }}
-                                </span>
-                                <span class="input-help" v-else>
-                                    {{ $t('runtime.customScriptHelper') }}
-                                </span>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item :label="$t('runtime.customScript')" prop="params.CUSTOM_SCRIPT">
-                                <el-switch
-                                    v-model="runtime.params['CUSTOM_SCRIPT']"
-                                    :active-value="'1'"
-                                    :inactive-value="'0'"
-                                    @change="changeScriptType"
-                                />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20">
-                        <el-col :span="7">
-                            <el-form-item :label="$t('runtime.appPort')" prop="params.NODE_APP_PORT">
-                                <el-input v-model.number="runtime.params['NODE_APP_PORT']" />
-                                <span class="input-help">{{ $t('runtime.appPortHelper') }}</span>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="7">
-                            <el-form-item :label="$t('runtime.externalPort')" prop="port">
-                                <el-input v-model.number="runtime.port" />
-                                <span class="input-help">{{ $t('runtime.externalPortHelper') }}</span>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="4">
-                            <el-form-item :label="$t('commons.button.add') + $t('commons.table.port')">
-                                <el-button @click="addPort">
-                                    <el-icon><Plus /></el-icon>
-                                </el-button>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item :label="$t('app.allowPort')" prop="params.HOST_IP">
-                                <el-switch
-                                    v-model="runtime.params['HOST_IP']"
-                                    :active-value="'0.0.0.0'"
-                                    :inactive-value="'127.0.0.1'"
-                                />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row :gutter="20" v-for="(port, index) of runtime.exposedPorts" :key="index">
-                        <el-col :span="7">
-                            <el-form-item
-                                :prop="'exposedPorts.' + index + '.containerPort'"
-                                :rules="rules.params.NODE_APP_PORT"
-                            >
-                                <el-input v-model.number="port.containerPort" :placeholder="$t('runtime.appPort')" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="7">
-                            <el-form-item
-                                :prop="'exposedPorts.' + index + '.hostPort'"
-                                :rules="rules.params.NODE_APP_PORT"
-                            >
-                                <el-input v-model.number="port.hostPort" :placeholder="$t('runtime.externalPort')" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="4">
-                            <el-form-item>
-                                <el-button type="primary" @click="removePort(index)" link>
-                                    {{ $t('commons.button.delete') }}
-                                </el-button>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-form-item :label="$t('runtime.packageManager')" prop="params.PACKAGE_MANAGER">
-                        <el-select v-model="runtime.params['PACKAGE_MANAGER']">
-                            <el-option label="npm" value="npm"></el-option>
-                            <el-option label="yarn" value="yarn"></el-option>
-                            <el-option v-if="hasPnpm" label="pnpm" value="pnpm"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="$t('runtime.imageSource')" prop="source">
-                        <el-select v-model="runtime.source" filterable allow-create default-first-option>
+        <el-form
+            v-loading="loading"
+            ref="runtimeForm"
+            label-position="top"
+            :model="runtime"
+            label-width="125px"
+            :rules="rules"
+            :validate-on-rule-change="false"
+        >
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('runtime.app')" prop="appID">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-select
+                            v-model="runtime.appID"
+                            :disabled="mode === 'edit'"
+                            @change="changeApp(runtime.appID)"
+                            class="p-w-200"
+                        >
                             <el-option
-                                v-for="(source, index) in imageSources"
+                                v-for="(app, index) in apps"
                                 :key="index"
-                                :label="source.label + ' [' + source.value + ']'"
-                                :value="source.value"
+                                :label="app.name"
+                                :value="app.id"
                             ></el-option>
                         </el-select>
-                        <span class="input-help">
-                            {{ $t('runtime.phpsourceHelper') }}
+                    </el-col>
+                    <el-col :span="12">
+                        <el-select
+                            v-model="runtime.version"
+                            :disabled="mode === 'edit'"
+                            @change="changeVersion()"
+                            class="p-w-200"
+                        >
+                            <el-option
+                                v-for="(version, index) in appVersions"
+                                :key="index"
+                                :label="version"
+                                :value="version"
+                            ></el-option>
+                        </el-select>
+                    </el-col>
+                </el-row>
+            </el-form-item>
+            <el-form-item :label="$t('runtime.codeDir')" prop="codeDir">
+                <el-input v-model.trim="runtime.codeDir" :disabled="mode === 'edit'">
+                    <template #prepend>
+                        <FileList
+                            :disabled="mode === 'edit'"
+                            :path="runtime.codeDir"
+                            @choose="getPath"
+                            :dir="true"
+                        ></FileList>
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-row :gutter="20">
+                <el-col :span="18">
+                    <el-form-item :label="$t('runtime.runScript')" prop="params.EXEC_SCRIPT">
+                        <el-select
+                            v-model="runtime.params['EXEC_SCRIPT']"
+                            v-if="runtime.params['CUSTOM_SCRIPT'] == '0'"
+                        >
+                            <el-option
+                                v-for="(script, index) in scripts"
+                                :key="index"
+                                :label="script.name + ' 【 ' + script.script + ' 】'"
+                                :value="script.name"
+                            >
+                                <el-row :gutter="10">
+                                    <el-col :span="4">{{ script.name }}</el-col>
+                                    <el-col :span="10">{{ ' 【 ' + script.script + ' 】' }}</el-col>
+                                </el-row>
+                            </el-option>
+                        </el-select>
+                        <el-input v-else v-model="runtime.params['EXEC_SCRIPT']"></el-input>
+                        <span class="input-help" v-if="runtime.params['CUSTOM_SCRIPT'] == '0'">
+                            {{ $t('runtime.runScriptHelper') }}
+                        </span>
+                        <span class="input-help" v-else>
+                            {{ $t('runtime.customScriptHelper') }}
                         </span>
                     </el-form-item>
-                    <el-form-item :label="$t('app.containerName')" prop="params.CONTAINER_NAME">
-                        <el-input v-model.trim="runtime.params['CONTAINER_NAME']"></el-input>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item :label="$t('runtime.customScript')" prop="params.CUSTOM_SCRIPT">
+                        <el-switch
+                            v-model="runtime.params['CUSTOM_SCRIPT']"
+                            :active-value="'1'"
+                            :inactive-value="'0'"
+                            @change="changeScriptType"
+                        />
                     </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="7">
+                    <el-form-item :label="$t('runtime.appPort')" prop="params.NODE_APP_PORT">
+                        <el-input v-model.number="runtime.params['NODE_APP_PORT']" />
+                        <span class="input-help">{{ $t('runtime.appPortHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="7">
+                    <el-form-item :label="$t('runtime.externalPort')" prop="port">
+                        <el-input v-model.number="runtime.port" />
+                        <span class="input-help">{{ $t('runtime.externalPortHelper') }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item :label="$t('commons.button.add') + $t('commons.table.port')">
+                        <el-button @click="addPort">
+                            <el-icon><Plus /></el-icon>
+                        </el-button>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item :label="$t('app.allowPort')" prop="params.HOST_IP">
+                        <el-switch
+                            v-model="runtime.params['HOST_IP']"
+                            :active-value="'0.0.0.0'"
+                            :inactive-value="'127.0.0.1'"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20" v-for="(port, index) of runtime.exposedPorts" :key="index">
+                <el-col :span="7">
+                    <el-form-item
+                        :prop="'exposedPorts.' + index + '.containerPort'"
+                        :rules="rules.params.NODE_APP_PORT"
+                    >
+                        <el-input v-model.number="port.containerPort" :placeholder="$t('runtime.appPort')" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="7">
+                    <el-form-item :prop="'exposedPorts.' + index + '.hostPort'" :rules="rules.params.NODE_APP_PORT">
+                        <el-input v-model.number="port.hostPort" :placeholder="$t('runtime.externalPort')" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item>
+                        <el-button type="primary" @click="removePort(index)" link>
+                            {{ $t('commons.button.delete') }}
+                        </el-button>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-form-item :label="$t('runtime.packageManager')" prop="params.PACKAGE_MANAGER">
+                <el-select v-model="runtime.params['PACKAGE_MANAGER']">
+                    <el-option label="npm" value="npm"></el-option>
+                    <el-option label="yarn" value="yarn"></el-option>
+                    <el-option v-if="hasPnpm" label="pnpm" value="pnpm"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('runtime.imageSource')" prop="source">
+                <el-select v-model="runtime.source" filterable allow-create default-first-option>
+                    <el-option
+                        v-for="(source, index) in imageSources"
+                        :key="index"
+                        :label="source.label + ' [' + source.value + ']'"
+                        :value="source.value"
+                    ></el-option>
+                </el-select>
+                <span class="input-help">
+                    {{ $t('runtime.phpsourceHelper') }}
+                </span>
+            </el-form-item>
+            <el-form-item :label="$t('app.containerName')" prop="params.CONTAINER_NAME">
+                <el-input v-model.trim="runtime.params['CONTAINER_NAME']"></el-input>
+            </el-form-item>
+        </el-form>
+
         <template #footer>
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -201,7 +188,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -214,7 +201,6 @@ import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 import { FormInstance } from 'element-plus';
 import { computed, reactive, ref, watch } from 'vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 interface OperateRrops {
     id?: number;
diff --git a/frontend/src/views/website/runtime/php/create/index.vue b/frontend/src/views/website/runtime/php/create/index.vue
index 1f9d06be7..58913a129 100644
--- a/frontend/src/views/website/runtime/php/create/index.vue
+++ b/frontend/src/views/website/runtime/php/create/index.vue
@@ -1,153 +1,153 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="50%">
-        <template #header>
-            <DrawerHeader :header="$t('runtime.' + mode)" :resource="runtime.name" :back="handleClose" />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form
-                    ref="runtimeForm"
-                    label-position="top"
-                    :model="runtime"
-                    label-width="125px"
-                    :rules="rules"
-                    :validate-on-rule-change="false"
+    <DrawerPro
+        v-model="open"
+        :header="$t('runtime.' + mode)"
+        size="large"
+        :resource="mode === 'edit' ? runtime.name : ''"
+        :back="handleClose"
+    >
+        <el-form
+            ref="runtimeForm"
+            label-position="top"
+            :model="runtime"
+            label-width="125px"
+            :rules="rules"
+            :validate-on-rule-change="false"
+            v-loading="loading"
+        >
+            <el-form-item :label="$t('commons.table.name')" prop="name">
+                <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('runtime.resource')" prop="resource">
+                <el-radio-group
+                    :disabled="mode === 'edit'"
+                    v-model="runtime.resource"
+                    @change="changeResource(runtime.resource)"
                 >
-                    <el-form-item :label="$t('commons.table.name')" prop="name">
-                        <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('runtime.resource')" prop="resource">
-                        <el-radio-group
-                            :disabled="mode === 'edit'"
-                            v-model="runtime.resource"
-                            @change="changeResource(runtime.resource)"
-                        >
-                            <el-radio :value="'appstore'">
-                                {{ $t('runtime.appstore') }}
-                            </el-radio>
-                            <el-radio :value="'local'">
-                                {{ $t('runtime.local') }}
-                            </el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                    <div v-if="runtime.resource === 'appstore'">
-                        <el-form-item :label="$t('runtime.app')" prop="appID">
-                            <el-row :gutter="20">
-                                <el-col :span="12">
-                                    <el-select
-                                        v-model="runtime.appID"
-                                        :disabled="mode === 'edit'"
-                                        @change="changeApp(runtime.appID)"
-                                        class="p-w-200"
-                                    >
-                                        <el-option
-                                            v-for="(app, index) in apps"
-                                            :key="index"
-                                            :label="app.name"
-                                            :value="app.id"
-                                        ></el-option>
-                                    </el-select>
-                                </el-col>
-                                <el-col :span="12">
-                                    <el-select
-                                        v-model="runtime.version"
-                                        :disabled="mode === 'edit'"
-                                        @change="changeVersion()"
-                                        class="p-w-200"
-                                    >
-                                        <el-option
-                                            v-for="(version, index) in appVersions"
-                                            :key="index"
-                                            :label="version"
-                                            :value="version"
-                                        ></el-option>
-                                    </el-select>
-                                </el-col>
-                            </el-row>
+                    <el-radio :value="'appstore'">
+                        {{ $t('runtime.appstore') }}
+                    </el-radio>
+                    <el-radio :value="'local'">
+                        {{ $t('runtime.local') }}
+                    </el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <div v-if="runtime.resource === 'appstore'">
+                <el-form-item :label="$t('runtime.app')" prop="appID">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-select
+                                v-model="runtime.appID"
+                                :disabled="mode === 'edit'"
+                                @change="changeApp(runtime.appID)"
+                                class="p-w-200"
+                            >
+                                <el-option
+                                    v-for="(app, index) in apps"
+                                    :key="index"
+                                    :label="app.name"
+                                    :value="app.id"
+                                ></el-option>
+                            </el-select>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-select
+                                v-model="runtime.version"
+                                :disabled="mode === 'edit'"
+                                @change="changeVersion()"
+                                class="p-w-200"
+                            >
+                                <el-option
+                                    v-for="(version, index) in appVersions"
+                                    :key="index"
+                                    :label="version"
+                                    :value="version"
+                                ></el-option>
+                            </el-select>
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+                <div v-if="initParam">
+                    <div v-if="runtime.type === 'php'">
+                        <el-form-item :label="$t('runtime.image')" prop="image">
+                            <el-input v-model="runtime.image"></el-input>
                         </el-form-item>
-                        <div v-if="initParam">
-                            <div v-if="runtime.type === 'php'">
-                                <el-form-item :label="$t('runtime.image')" prop="image">
-                                    <el-input v-model="runtime.image"></el-input>
-                                </el-form-item>
-                                <el-form-item :label="$t('runtime.source')" prop="source">
-                                    <el-select v-model="runtime.source" filterable allow-create default-first-option>
-                                        <el-option
-                                            v-for="(source, index) in phpSources"
-                                            :key="index"
-                                            :label="source.label + ' [' + source.value + ']'"
-                                            :value="source.value"
-                                        ></el-option>
-                                    </el-select>
-                                    <span class="input-help">
-                                        {{ $t('runtime.phpsourceHelper') }}
-                                    </span>
-                                </el-form-item>
-                                <el-form-item :label="$t('php.extensions')">
-                                    <el-select v-model="extensions" @change="changePHPExtension()" clearable>
-                                        <el-option
-                                            v-for="(extension, index) in phpExtensions"
-                                            :key="index"
-                                            :label="extension.name"
-                                            :value="extension.extensions"
-                                        ></el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <Params
-                                    v-if="mode === 'create'"
-                                    v-model:form="runtime.params"
-                                    v-model:params="appParams"
-                                    v-model:rules="rules"
-                                ></Params>
-                                <EditParams
-                                    v-if="mode === 'edit'"
-                                    v-model:form="runtime.params"
-                                    v-model:params="editParams"
-                                    v-model:rules="rules"
-                                ></EditParams>
-                                <el-form-item>
-                                    <el-alert :title="$t('runtime.buildHelper')" type="warning" :closable="false" />
-                                </el-form-item>
-                                <el-form-item>
-                                    <el-alert type="info" :closable="false">
-                                        <span>{{ $t('runtime.extendHelper') }}</span>
-                                        <el-link
-                                            target="_blank"
-                                            type="primary"
-                                            href="https://1panel.cn/docs/user_manual/websites/php/#php_1"
-                                        >
-                                            {{ $t('php.toExtensionsList') }}
-                                        </el-link>
-                                        <br />
-                                    </el-alert>
-                                </el-form-item>
-                                <div v-if="mode == 'edit'">
-                                    <el-form-item>
-                                        <el-checkbox v-model="runtime.rebuild">
-                                            {{ $t('runtime.rebuild') }}
-                                        </el-checkbox>
-                                    </el-form-item>
-                                    <el-form-item>
-                                        <el-alert type="info" :closable="false">
-                                            <span>{{ $t('runtime.rebuildHelper') }}</span>
-                                            <br />
-                                        </el-alert>
-                                    </el-form-item>
-                                </div>
-                            </div>
+                        <el-form-item :label="$t('runtime.source')" prop="source">
+                            <el-select v-model="runtime.source" filterable allow-create default-first-option>
+                                <el-option
+                                    v-for="(source, index) in phpSources"
+                                    :key="index"
+                                    :label="source.label + ' [' + source.value + ']'"
+                                    :value="source.value"
+                                ></el-option>
+                            </el-select>
+                            <span class="input-help">
+                                {{ $t('runtime.phpsourceHelper') }}
+                            </span>
+                        </el-form-item>
+                        <el-form-item :label="$t('php.extensions')">
+                            <el-select v-model="extensions" @change="changePHPExtension()" clearable>
+                                <el-option
+                                    v-for="(extension, index) in phpExtensions"
+                                    :key="index"
+                                    :label="extension.name"
+                                    :value="extension.extensions"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <Params
+                            v-if="mode === 'create'"
+                            v-model:form="runtime.params"
+                            v-model:params="appParams"
+                            v-model:rules="rules"
+                        ></Params>
+                        <EditParams
+                            v-if="mode === 'edit'"
+                            v-model:form="runtime.params"
+                            v-model:params="editParams"
+                            v-model:rules="rules"
+                        ></EditParams>
+                        <el-form-item>
+                            <el-alert :title="$t('runtime.buildHelper')" type="warning" :closable="false" />
+                        </el-form-item>
+                        <el-form-item>
+                            <el-alert type="info" :closable="false">
+                                <span>{{ $t('runtime.extendHelper') }}</span>
+                                <el-link
+                                    target="_blank"
+                                    type="primary"
+                                    href="https://1panel.cn/docs/user_manual/websites/php/#php_1"
+                                >
+                                    {{ $t('php.toExtensionsList') }}
+                                </el-link>
+                                <br />
+                            </el-alert>
+                        </el-form-item>
+                        <div v-if="mode == 'edit'">
+                            <el-form-item>
+                                <el-checkbox v-model="runtime.rebuild">
+                                    {{ $t('runtime.rebuild') }}
+                                </el-checkbox>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-alert type="info" :closable="false">
+                                    <span>{{ $t('runtime.rebuildHelper') }}</span>
+                                    <br />
+                                </el-alert>
+                            </el-form-item>
                         </div>
                     </div>
-                    <div v-else>
-                        <el-form-item>
-                            <el-alert :title="$t('runtime.localHelper')" type="info" :closable="false" />
-                        </el-form-item>
-                        <el-form-item :label="$t('runtime.version')" prop="version">
-                            <el-input v-model="runtime.version" :placeholder="$t('runtime.versionHelper')"></el-input>
-                        </el-form-item>
-                    </div>
-                </el-form>
-            </el-col>
-        </el-row>
+                </div>
+            </div>
+            <div v-else>
+                <el-form-item>
+                    <el-alert :title="$t('runtime.localHelper')" type="info" :closable="false" />
+                </el-form-item>
+                <el-form-item :label="$t('runtime.version')" prop="version">
+                    <el-input v-model="runtime.version" :placeholder="$t('runtime.versionHelper')"></el-input>
+                </el-form-item>
+            </div>
+        </el-form>
         <template #footer>
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -156,7 +156,7 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
@@ -171,7 +171,6 @@ import { FormInstance } from 'element-plus';
 import { reactive, ref } from 'vue';
 import Params from '../param/index.vue';
 import EditParams from '../edit/index.vue';
-import DrawerHeader from '@/components/drawer-header/index.vue';
 
 interface OperateRrops {
     id?: number;
diff --git a/frontend/src/views/website/runtime/php/extensions/index.vue b/frontend/src/views/website/runtime/php/extensions/index.vue
index 6e0a4e203..2f2de7ca5 100644
--- a/frontend/src/views/website/runtime/php/extensions/index.vue
+++ b/frontend/src/views/website/runtime/php/extensions/index.vue
@@ -1,32 +1,25 @@
 <template>
-    <el-drawer
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        v-model="open"
-        size="50%"
-        :before-close="handleClose"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('php.extensions')" :back="handleClose" />
+    <DrawerPro v-model="open" :header="$t('php.extensions')" size="large" :back="handleClose">
+        <template #content>
+            <ComplexTable :data="data" @search="search()" :pagination-config="paginationConfig">
+                <template #toolbar>
+                    <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
+                </template>
+                <el-table-column :label="$t('commons.table.name')" width="150px" prop="name"></el-table-column>
+                <el-table-column :label="$t('php.extension')" fix prop="extensions"></el-table-column>
+                <fu-table-operations
+                    :ellipsis="10"
+                    width="120px"
+                    :buttons="buttons"
+                    :label="$t('commons.table.operate')"
+                    fixed="right"
+                    fix
+                />
+            </ComplexTable>
+            <Create ref="createRef" @close="search()" />
+            <OpDialog ref="opRef" @search="search" />
         </template>
-        <ComplexTable :data="data" @search="search()" :pagination-config="paginationConfig">
-            <template #toolbar>
-                <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
-            </template>
-            <el-table-column :label="$t('commons.table.name')" width="150px" prop="name"></el-table-column>
-            <el-table-column :label="$t('php.extension')" fix prop="extensions"></el-table-column>
-            <fu-table-operations
-                :ellipsis="10"
-                width="120px"
-                :buttons="buttons"
-                :label="$t('commons.table.operate')"
-                fixed="right"
-                fix
-            />
-        </ComplexTable>
-        <Create ref="createRef" @close="search()" />
-        <OpDialog ref="opRef" @search="search" />
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
 import { DeletePHPExtensions, SearchPHPExtensions } from '@/api/modules/runtime';
diff --git a/frontend/src/views/website/ssl/acme-account/index.vue b/frontend/src/views/website/ssl/acme-account/index.vue
index 66f344a79..6eadb5e69 100644
--- a/frontend/src/views/website/ssl/acme-account/index.vue
+++ b/frontend/src/views/website/ssl/acme-account/index.vue
@@ -1,48 +1,46 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="60%">
-        <template #header>
-            <DrawerHeader :header="$t('website.acmeAccountManage')" :back="handleClose" />
+    <DrawerPro v-model="open" :header="$t('website.acmeAccountManage')" size="large" :back="handleClose">
+        <template #content>
+            <div class="mb-1.5">
+                <el-alert :title="$t('ssl.acmeHelper')" type="info" :closable="false" />
+            </div>
+            <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
+                <template #toolbar>
+                    <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
+                </template>
+                <el-table-column
+                    :label="$t('website.email')"
+                    fix
+                    show-overflow-tooltip
+                    prop="email"
+                    min-width="100px"
+                ></el-table-column>
+                <el-table-column :label="$t('website.acmeAccountType')" fix show-overflow-tooltip prop="type">
+                    <template #default="{ row }">
+                        {{ getAccountName(row.type) }}
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('website.keyType')" fix show-overflow-tooltip prop="keyType">
+                    <template #default="{ row }">
+                        {{ getKeyName(row.keyType) }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="URL" show-overflow-tooltip prop="url" min-width="300px"></el-table-column>
+                <fu-table-operations
+                    :ellipsis="1"
+                    :buttons="buttons"
+                    :label="$t('commons.table.operate')"
+                    fixed="right"
+                    fix
+                />
+            </ComplexTable>
+            <Create ref="createRef" @close="search()"></Create>
         </template>
-        <div class="mb-1.5">
-            <el-alert :title="$t('ssl.acmeHelper')" type="info" :closable="false" />
-        </div>
-        <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
-            <template #toolbar>
-                <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
-            </template>
-            <el-table-column
-                :label="$t('website.email')"
-                fix
-                show-overflow-tooltip
-                prop="email"
-                min-width="100px"
-            ></el-table-column>
-            <el-table-column :label="$t('website.acmeAccountType')" fix show-overflow-tooltip prop="type">
-                <template #default="{ row }">
-                    {{ getAccountName(row.type) }}
-                </template>
-            </el-table-column>
-            <el-table-column :label="$t('website.keyType')" fix show-overflow-tooltip prop="keyType">
-                <template #default="{ row }">
-                    {{ getKeyName(row.keyType) }}
-                </template>
-            </el-table-column>
-            <el-table-column label="URL" show-overflow-tooltip prop="url" min-width="300px"></el-table-column>
-            <fu-table-operations
-                :ellipsis="1"
-                :buttons="buttons"
-                :label="$t('commons.table.operate')"
-                fixed="right"
-                fix
-            />
-        </ComplexTable>
-        <Create ref="createRef" @close="search()"></Create>
-    </el-drawer>
+    </DrawerPro>
     <OpDialog ref="opRef" @search="search" />
 </template>
 
 <script lang="ts" setup>
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Website } from '@/api/interface/website';
 import { DeleteAcmeAccount, SearchAcmeAccount } from '@/api/modules/website';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/ssl/ca/index.vue b/frontend/src/views/website/ssl/ca/index.vue
index ec7045f5e..9a61a7e03 100644
--- a/frontend/src/views/website/ssl/ca/index.vue
+++ b/frontend/src/views/website/ssl/ca/index.vue
@@ -1,47 +1,39 @@
 <template>
-    <el-drawer
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        v-model="open"
-        size="50%"
-        @close="handleClose"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('ssl.ca')" :back="handleClose" />
-        </template>
-        <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
-            <template #toolbar>
-                <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
-            </template>
-            <el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="name"></el-table-column>
-            <el-table-column :label="$t('website.keyType')" show-overflow-tooltip prop="keyType">
-                <template #default="{ row }">
-                    {{ getKeyName(row.keyType) }}
+    <DrawerPro v-model="open" :header="$t('ssl.ca')" size="large" :back="handleClose">
+        <template #content>
+            <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
+                <template #toolbar>
+                    <el-button type="primary" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
                 </template>
-            </el-table-column>
-            <el-table-column
-                prop="createdAt"
-                :label="$t('commons.table.date')"
-                :formatter="dateFormat"
-                show-overflow-tooltip
-            />
-            <fu-table-operations
-                :ellipsis="3"
-                :buttons="buttons"
-                :label="$t('commons.table.operate')"
-                fix
-                width="250px"
-            />
-        </ComplexTable>
-        <Create ref="createRef" @close="search()" />
-        <Obtain ref="obtainRef" @close="search()" />
-        <Detail ref="detailRef" />
-    </el-drawer>
+                <el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="name"></el-table-column>
+                <el-table-column :label="$t('website.keyType')" show-overflow-tooltip prop="keyType">
+                    <template #default="{ row }">
+                        {{ getKeyName(row.keyType) }}
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    prop="createdAt"
+                    :label="$t('commons.table.date')"
+                    :formatter="dateFormat"
+                    show-overflow-tooltip
+                />
+                <fu-table-operations
+                    :ellipsis="3"
+                    :buttons="buttons"
+                    :label="$t('commons.table.operate')"
+                    fix
+                    width="250px"
+                />
+            </ComplexTable>
+            <Create ref="createRef" @close="search()" />
+            <Obtain ref="obtainRef" @close="search()" />
+            <Detail ref="detailRef" />
+        </template>
+    </DrawerPro>
     <OpDialog ref="opRef" @search="search" />
 </template>
 
 <script lang="ts" setup>
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Website } from '@/api/interface/website';
 import { DeleteCA, SearchCAs, DownloadCAFile } from '@/api/modules/website';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/ssl/create/index.vue b/frontend/src/views/website/ssl/create/index.vue
index 49bcd79eb..d0301fb24 100644
--- a/frontend/src/views/website/ssl/create/index.vue
+++ b/frontend/src/views/website/ssl/create/index.vue
@@ -1,164 +1,143 @@
 <template>
-    <el-drawer
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        v-model="open"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('ssl.' + operate)" :back="handleClose" />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form ref="sslForm" label-position="top" :model="ssl" label-width="100px" :rules="rules">
-                    <el-row :gutter="20">
-                        <el-col :span="12">
-                            <el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
-                                <el-input v-model.trim="ssl.primaryDomain"></el-input>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item :label="$t('ssl.fromWebsite')">
-                                <el-select v-model="websiteID" @change="changeWebsite">
-                                    <el-option
-                                        v-for="(site, key) in websites"
-                                        :key="key"
-                                        :value="site.id"
-                                        :label="site.primaryDomain"
-                                    ></el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-form-item :label="$t('website.otherDomains')" prop="otherDomains">
-                        <el-input type="textarea" :rows="3" v-model="ssl.otherDomains"></el-input>
+    <DrawerPro v-model="open" :header="$t('ssl.' + operate)" size="large" :back="handleClose">
+        <el-form ref="sslForm" label-position="top" :model="ssl" label-width="100px" :rules="rules" v-loading="loading">
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
+                        <el-input v-model.trim="ssl.primaryDomain"></el-input>
                     </el-form-item>
-                    <el-form-item :label="$t('website.remark')" prop="description">
-                        <el-input v-model="ssl.description"></el-input>
-                    </el-form-item>
-                    <el-form-item
-                        :label="$t('website.acmeAccount')"
-                        prop="acmeAccountId"
-                        v-if="ssl.provider != 'selfSigned'"
-                    >
-                        <el-select v-model="ssl.acmeAccountId">
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item :label="$t('ssl.fromWebsite')">
+                        <el-select v-model="websiteID" @change="changeWebsite">
                             <el-option
-                                v-for="(acme, index) in acmeAccounts"
-                                :key="index"
-                                :label="acme.email + ' [' + getAccountName(acme.type) + '] '"
-                                :value="acme.id"
-                            >
-                                <span>{{ acme.email }}</span>
-                                <el-tag type="success" class="ml-2">{{ getAccountName(acme.type) }}</el-tag>
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="$t('website.keyType')" prop="keyType">
-                        <el-select v-model="ssl.keyType" :disabled="operate == 'edit'">
-                            <el-option
-                                v-for="(keyType, index) in KeyTypes"
-                                :key="index"
-                                :label="keyType.label"
-                                :value="keyType.value"
+                                v-for="(site, key) in websites"
+                                :key="key"
+                                :value="site.id"
+                                :label="site.primaryDomain"
                             ></el-option>
                         </el-select>
                     </el-form-item>
-                    <el-form-item :label="$t('website.provider')" prop="provider" v-if="ssl.provider != 'selfSigned'">
-                        <el-radio-group v-model="ssl.provider" @change="changeProvider()">
-                            <el-radio value="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio>
-                            <el-radio value="dnsManual">{{ $t('website.dnsManual') }}</el-radio>
-                            <el-radio value="http">HTTP</el-radio>
-                        </el-radio-group>
-                        <span class="input-help" v-if="ssl.provider === 'dnsManual'">
-                            {{ $t('ssl.dnsMauanlHelper') }}
-                        </span>
-                        <span class="input-help" v-if="ssl.provider === 'http'">
-                            {{ $t('ssl.httpHelper') }}
-                        </span>
-                        <span class="input-help text-red-500" v-if="ssl.provider === 'http'">
-                            {{ $t('ssl.httpHelper2') }}
-                        </span>
-                    </el-form-item>
-                    <el-form-item
-                        :label="$t('website.dnsAccount')"
-                        prop="dnsAccountId"
-                        v-if="ssl.provider === 'dnsAccount'"
+                </el-col>
+            </el-row>
+            <el-form-item :label="$t('website.otherDomains')" prop="otherDomains">
+                <el-input type="textarea" :rows="3" v-model="ssl.otherDomains"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('website.remark')" prop="description">
+                <el-input v-model="ssl.description"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('website.acmeAccount')" prop="acmeAccountId" v-if="ssl.provider != 'selfSigned'">
+                <el-select v-model="ssl.acmeAccountId">
+                    <el-option
+                        v-for="(acme, index) in acmeAccounts"
+                        :key="index"
+                        :label="acme.email + ' [' + getAccountName(acme.type) + '] '"
+                        :value="acme.id"
                     >
-                        <el-select v-model="ssl.dnsAccountId">
-                            <el-option
-                                v-for="(dns, index) in dnsAccounts"
-                                :key="index"
-                                :label="dns.name + ' [' + getDNSName(dns.type) + '] '"
-                                :value="dns.id"
-                            >
-                                <el-row>
-                                    <el-col :span="6">
-                                        <span>{{ dns.name }}</span>
-                                    </el-col>
-                                    <el-col :span="11">
-                                        <span>
-                                            <el-tag type="success">{{ getDNSName(dns.type) }}</el-tag>
-                                        </span>
-                                    </el-col>
-                                </el-row>
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item :label="''" prop="autoRenew" v-if="ssl.provider !== 'dnsManual'">
-                        <el-checkbox v-model="ssl.autoRenew" :label="$t('ssl.autoRenew')" />
-                    </el-form-item>
-                    <el-form-item :label="''" prop="pushDir">
-                        <el-checkbox v-model="ssl.pushDir" :label="$t('ssl.pushDir')" />
-                    </el-form-item>
-                    <el-form-item :label="$t('ssl.dir')" prop="dir" v-if="ssl.pushDir">
-                        <el-input v-model.trim="ssl.dir">
-                            <template #prepend>
-                                <FileList :path="ssl.dir" @choose="getPath" :dir="true"></FileList>
-                            </template>
-                        </el-input>
-                        <span class="input-help">
-                            {{ $t('ssl.pushDirHelper') }}
-                        </span>
-                    </el-form-item>
-                    <el-form-item :label="''" prop="execShell">
-                        <el-checkbox v-model="ssl.execShell" :label="$t('ssl.execShell')" />
-                    </el-form-item>
-                    <el-form-item :label="$t('ssl.shell')" prop="shell" v-if="ssl.execShell">
-                        <el-input type="textarea" :rows="4" v-model="ssl.shell" />
-                        <span class="input-help">
-                            {{ $t('ssl.shellHelper') }}
-                        </span>
-                    </el-form-item>
-                    <div v-if="ssl.provider != 'selfSigned'">
-                        <el-form-item :label="''" prop="disableCNAME">
-                            <el-checkbox v-model="ssl.disableCNAME" :label="$t('ssl.disableCNAME')" />
-                            <span class="input-help">
-                                {{ $t('ssl.disableCNAMEHelper') }}
-                            </span>
-                        </el-form-item>
-                        <el-form-item :label="''" prop="skipDNS">
-                            <el-checkbox v-model="ssl.skipDNS" :label="$t('ssl.skipDNSCheck')" />
-                            <span class="input-help">
-                                {{ $t('ssl.skipDNSCheckHelper') }}
-                            </span>
-                        </el-form-item>
-                        <el-form-item :label="$t('ssl.nameserver') + '1'" prop="nameserver1">
-                            <el-input v-model.trim="ssl.nameserver1"></el-input>
-                            <span class="input-help">
-                                {{ $t('ssl.nameserverHelper') }}
-                            </span>
-                        </el-form-item>
-                        <el-form-item :label="$t('ssl.nameserver') + '2'" prop="nameserver1">
-                            <el-input v-model.trim="ssl.nameserver2"></el-input>
-                            <span class="input-help">
-                                {{ $t('ssl.nameserverHelper') }}
-                            </span>
-                        </el-form-item>
-                    </div>
-                </el-form>
-            </el-col>
-        </el-row>
+                        <span>{{ acme.email }}</span>
+                        <el-tag type="success" class="ml-2">{{ getAccountName(acme.type) }}</el-tag>
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('website.keyType')" prop="keyType">
+                <el-select v-model="ssl.keyType" :disabled="operate == 'edit'">
+                    <el-option
+                        v-for="(keyType, index) in KeyTypes"
+                        :key="index"
+                        :label="keyType.label"
+                        :value="keyType.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('website.provider')" prop="provider" v-if="ssl.provider != 'selfSigned'">
+                <el-radio-group v-model="ssl.provider" @change="changeProvider()">
+                    <el-radio value="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio>
+                    <el-radio value="dnsManual">{{ $t('website.dnsManual') }}</el-radio>
+                    <el-radio value="http">HTTP</el-radio>
+                </el-radio-group>
+                <span class="input-help" v-if="ssl.provider === 'dnsManual'">
+                    {{ $t('ssl.dnsMauanlHelper') }}
+                </span>
+                <span class="input-help" v-if="ssl.provider === 'http'">
+                    {{ $t('ssl.httpHelper') }}
+                </span>
+                <span class="input-help text-red-500" v-if="ssl.provider === 'http'">
+                    {{ $t('ssl.httpHelper2') }}
+                </span>
+            </el-form-item>
+            <el-form-item :label="$t('website.dnsAccount')" prop="dnsAccountId" v-if="ssl.provider === 'dnsAccount'">
+                <el-select v-model="ssl.dnsAccountId">
+                    <el-option
+                        v-for="(dns, index) in dnsAccounts"
+                        :key="index"
+                        :label="dns.name + ' [' + getDNSName(dns.type) + '] '"
+                        :value="dns.id"
+                    >
+                        <el-row>
+                            <el-col :span="6">
+                                <span>{{ dns.name }}</span>
+                            </el-col>
+                            <el-col :span="11">
+                                <span>
+                                    <el-tag type="success">{{ getDNSName(dns.type) }}</el-tag>
+                                </span>
+                            </el-col>
+                        </el-row>
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="''" prop="autoRenew" v-if="ssl.provider !== 'dnsManual'">
+                <el-checkbox v-model="ssl.autoRenew" :label="$t('ssl.autoRenew')" />
+            </el-form-item>
+            <el-form-item :label="''" prop="pushDir">
+                <el-checkbox v-model="ssl.pushDir" :label="$t('ssl.pushDir')" />
+            </el-form-item>
+            <el-form-item :label="$t('ssl.dir')" prop="dir" v-if="ssl.pushDir">
+                <el-input v-model.trim="ssl.dir">
+                    <template #prepend>
+                        <FileList :path="ssl.dir" @choose="getPath" :dir="true"></FileList>
+                    </template>
+                </el-input>
+                <span class="input-help">
+                    {{ $t('ssl.pushDirHelper') }}
+                </span>
+            </el-form-item>
+            <el-form-item :label="''" prop="execShell">
+                <el-checkbox v-model="ssl.execShell" :label="$t('ssl.execShell')" />
+            </el-form-item>
+            <el-form-item :label="$t('ssl.shell')" prop="shell" v-if="ssl.execShell">
+                <el-input type="textarea" :rows="4" v-model="ssl.shell" />
+                <span class="input-help">
+                    {{ $t('ssl.shellHelper') }}
+                </span>
+            </el-form-item>
+            <div v-if="ssl.provider != 'selfSigned'">
+                <el-form-item :label="''" prop="disableCNAME">
+                    <el-checkbox v-model="ssl.disableCNAME" :label="$t('ssl.disableCNAME')" />
+                    <span class="input-help">
+                        {{ $t('ssl.disableCNAMEHelper') }}
+                    </span>
+                </el-form-item>
+                <el-form-item :label="''" prop="skipDNS">
+                    <el-checkbox v-model="ssl.skipDNS" :label="$t('ssl.skipDNSCheck')" />
+                    <span class="input-help">
+                        {{ $t('ssl.skipDNSCheckHelper') }}
+                    </span>
+                </el-form-item>
+                <el-form-item :label="$t('ssl.nameserver') + '1'" prop="nameserver1">
+                    <el-input v-model.trim="ssl.nameserver1"></el-input>
+                    <span class="input-help">
+                        {{ $t('ssl.nameserverHelper') }}
+                    </span>
+                </el-form-item>
+                <el-form-item :label="$t('ssl.nameserver') + '2'" prop="nameserver1">
+                    <el-input v-model.trim="ssl.nameserver2"></el-input>
+                    <span class="input-help">
+                        {{ $t('ssl.nameserverHelper') }}
+                    </span>
+                </el-form-item>
+            </div>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -167,11 +146,10 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Website } from '@/api/interface/website';
 import { CreateSSL, ListWebsites, SearchAcmeAccount, SearchDnsAccount, UpdateSSL } from '@/api/modules/website';
 import { Rules } from '@/global/form-rules';
diff --git a/frontend/src/views/website/ssl/detail/index.vue b/frontend/src/views/website/ssl/detail/index.vue
index d22bd0910..56b6b83eb 100644
--- a/frontend/src/views/website/ssl/detail/index.vue
+++ b/frontend/src/views/website/ssl/detail/index.vue
@@ -1,74 +1,72 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="50%">
-        <template #header>
-            <DrawerHeader :header="$t('ssl.detail')" :back="handleClose" />
+    <DrawerPro v-model="open" :header="$t('ssl.detail')" size="large" :back="handleClose">
+        <template #content>
+            <div v-loading="loading">
+                <el-radio-group v-model="curr">
+                    <el-radio-button value="detail">{{ $t('ssl.msg') }}</el-radio-button>
+                    <el-radio-button value="ssl">{{ $t('ssl.ssl') }}</el-radio-button>
+                    <el-radio-button value="key">{{ $t('ssl.key') }}</el-radio-button>
+                </el-radio-group>
+                <div v-if="curr === 'detail'" class="mt-5">
+                    <el-descriptions border :column="1">
+                        <el-descriptions-item :label="$t('website.primaryDomain')">
+                            {{ ssl.primaryDomain }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('website.otherDomains')">
+                            {{ ssl.domains }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('ssl.commonName')">
+                            {{ ssl.type }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('website.brand')">
+                            {{ ssl.organization }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('ssl.startDate')">
+                            {{ dateFormatSimple(ssl.startDate) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('website.expireDate')">
+                            {{ dateFormatSimple(ssl.expireDate) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('ssl.applyType')">
+                            {{ getProvider(ssl.provider) }}
+                        </el-descriptions-item>
+                        <el-descriptions-item
+                            :label="$t('website.dnsAccount')"
+                            v-if="ssl.dnsAccount && ssl.dnsAccount.id > 0"
+                        >
+                            {{ ssl.dnsAccount.name }}
+                            <el-tag type="info">{{ getDNSName(ssl.dnsAccount.type) }}</el-tag>
+                        </el-descriptions-item>
+                        <el-descriptions-item
+                            :label="$t('ssl.acmeAccount')"
+                            v-if="ssl.acmeAccount && ssl.acmeAccount.id > 0"
+                        >
+                            {{ ssl.acmeAccount.email }}
+                        </el-descriptions-item>
+                        <el-descriptions-item :label="$t('ssl.pushDir')" v-if="ssl.pushDir">
+                            {{ ssl.dir }}
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </div>
+                <div v-else-if="curr === 'ssl'" class="mt-5">
+                    <el-input v-model="ssl.pem" :rows="15" type="textarea" id="textArea" />
+                    <div>
+                        <br />
+                        <CopyButton :content="ssl.pem" />
+                    </div>
+                </div>
+                <div v-else class="mt-5">
+                    <el-input v-model="ssl.privateKey" :rows="15" type="textarea" id="textArea" />
+                    <div>
+                        <br />
+                        <CopyButton :content="ssl.privateKey" />
+                    </div>
+                </div>
+            </div>
         </template>
-        <div v-loading="loading">
-            <el-radio-group v-model="curr">
-                <el-radio-button value="detail">{{ $t('ssl.msg') }}</el-radio-button>
-                <el-radio-button value="ssl">{{ $t('ssl.ssl') }}</el-radio-button>
-                <el-radio-button value="key">{{ $t('ssl.key') }}</el-radio-button>
-            </el-radio-group>
-            <div v-if="curr === 'detail'" class="mt-5">
-                <el-descriptions border :column="1">
-                    <el-descriptions-item :label="$t('website.primaryDomain')">
-                        {{ ssl.primaryDomain }}
-                    </el-descriptions-item>
-                    <el-descriptions-item :label="$t('website.otherDomains')">
-                        {{ ssl.domains }}
-                    </el-descriptions-item>
-                    <el-descriptions-item :label="$t('ssl.commonName')">
-                        {{ ssl.type }}
-                    </el-descriptions-item>
-                    <el-descriptions-item :label="$t('website.brand')">
-                        {{ ssl.organization }}
-                    </el-descriptions-item>
-                    <el-descriptions-item :label="$t('ssl.startDate')">
-                        {{ dateFormatSimple(ssl.startDate) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item :label="$t('website.expireDate')">
-                        {{ dateFormatSimple(ssl.expireDate) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item :label="$t('ssl.applyType')">
-                        {{ getProvider(ssl.provider) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item
-                        :label="$t('website.dnsAccount')"
-                        v-if="ssl.dnsAccount && ssl.dnsAccount.id > 0"
-                    >
-                        {{ ssl.dnsAccount.name }}
-                        <el-tag type="info">{{ getDNSName(ssl.dnsAccount.type) }}</el-tag>
-                    </el-descriptions-item>
-                    <el-descriptions-item
-                        :label="$t('ssl.acmeAccount')"
-                        v-if="ssl.acmeAccount && ssl.acmeAccount.id > 0"
-                    >
-                        {{ ssl.acmeAccount.email }}
-                    </el-descriptions-item>
-                    <el-descriptions-item :label="$t('ssl.pushDir')" v-if="ssl.pushDir">
-                        {{ ssl.dir }}
-                    </el-descriptions-item>
-                </el-descriptions>
-            </div>
-            <div v-else-if="curr === 'ssl'" class="mt-5">
-                <el-input v-model="ssl.pem" :rows="15" type="textarea" id="textArea" />
-                <div>
-                    <br />
-                    <CopyButton :content="ssl.pem" />
-                </div>
-            </div>
-            <div v-else class="mt-5">
-                <el-input v-model="ssl.privateKey" :rows="15" type="textarea" id="textArea" />
-                <div>
-                    <br />
-                    <CopyButton :content="ssl.privateKey" />
-                </div>
-            </div>
-        </div>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { GetSSL } from '@/api/modules/website';
 import { ref } from 'vue';
 import { dateFormatSimple, getProvider, getDNSName } from '@/utils/util';
diff --git a/frontend/src/views/website/ssl/dns-account/index.vue b/frontend/src/views/website/ssl/dns-account/index.vue
index 47e494304..823b0d911 100644
--- a/frontend/src/views/website/ssl/dns-account/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/index.vue
@@ -1,36 +1,38 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" :size="'50%'">
-        <template #header>
-            <DrawerHeader :header="$t('website.dnsAccountManage')" :back="handleClose" />
-        </template>
-        <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
-            <template #toolbar>
-                <el-button type="primary" @click="openCreate">
-                    {{ $t('commons.button.create') }}
-                </el-button>
-            </template>
-            <el-table-column :label="$t('commons.table.name')" fix show-overflow-tooltip prop="name"></el-table-column>
-            <el-table-column :label="$t('commons.table.type')" prop="type">
-                <template #default="{ row }">
-                    <span>{{ getDNSName(row.type) }}</span>
+    <DrawerPro v-model="open" :header="$t('website.dnsAccountManage')" size="large" :back="handleClose">
+        <template #content>
+            <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
+                <template #toolbar>
+                    <el-button type="primary" @click="openCreate">
+                        {{ $t('commons.button.create') }}
+                    </el-button>
                 </template>
-            </el-table-column>
-            <fu-table-operations
-                :ellipsis="1"
-                :buttons="buttons"
-                :label="$t('commons.table.operate')"
-                fixed="right"
-                fix
-            />
-        </ComplexTable>
-        <Create ref="createRef" @close="search()"></Create>
-    </el-drawer>
-
+                <el-table-column
+                    :label="$t('commons.table.name')"
+                    fix
+                    show-overflow-tooltip
+                    prop="name"
+                ></el-table-column>
+                <el-table-column :label="$t('commons.table.type')" prop="type">
+                    <template #default="{ row }">
+                        <span>{{ getDNSName(row.type) }}</span>
+                    </template>
+                </el-table-column>
+                <fu-table-operations
+                    :ellipsis="1"
+                    :buttons="buttons"
+                    :label="$t('commons.table.operate')"
+                    fixed="right"
+                    fix
+                />
+            </ComplexTable>
+            <Create ref="createRef" @close="search()"></Create>
+        </template>
+    </DrawerPro>
     <OpDialog ref="opRef" @search="search" />
 </template>
 
 <script lang="ts" setup>
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import Create from './create/index.vue';
 import { Website } from '@/api/interface/website';
 import { DeleteDnsAccount, SearchDnsAccount } from '@/api/modules/website';
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index 9d4673ddf..7c77e2a06 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -23,7 +23,6 @@
                 </el-button>
             </template>
             <template #main>
-                <br />
                 <ComplexTable
                     :data="data"
                     :pagination-config="paginationConfig"
diff --git a/frontend/src/views/website/ssl/upload/index.vue b/frontend/src/views/website/ssl/upload/index.vue
index c00e163dd..2e59e2de9 100644
--- a/frontend/src/views/website/ssl/upload/index.vue
+++ b/frontend/src/views/website/ssl/upload/index.vue
@@ -1,53 +1,40 @@
 <template>
-    <el-drawer
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        v-model="open"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader :header="$t('ssl.upload')" :back="handleClose" />
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form ref="sslForm" label-position="top" :model="ssl" label-width="100px" :rules="rules">
-                    <el-form-item :label="$t('website.importType')" prop="type">
-                        <el-select v-model="ssl.type">
-                            <el-option :label="$t('website.pasteSSL')" :value="'paste'"></el-option>
-                            <el-option :label="$t('website.localSSL')" :value="'local'"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <div v-if="ssl.type === 'paste'">
-                        <el-form-item :label="$t('website.privateKey')" prop="privateKey">
-                            <el-input v-model="ssl.privateKey" :rows="6" type="textarea" />
-                        </el-form-item>
-                        <el-form-item :label="$t('website.certificate')" prop="certificate">
-                            <el-input v-model="ssl.certificate" :rows="6" type="textarea" />
-                        </el-form-item>
-                    </div>
-                    <div v-if="ssl.type === 'local'">
-                        <el-form-item :label="$t('website.privateKeyPath')" prop="privateKeyPath">
-                            <el-input v-model="ssl.privateKeyPath">
-                                <template #prepend>
-                                    <FileList @choose="getPrivateKeyPath" :dir="false"></FileList>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item :label="$t('website.certificatePath')" prop="certificatePath">
-                            <el-input v-model="ssl.certificatePath">
-                                <template #prepend>
-                                    <FileList @choose="getCertificatePath" :dir="false"></FileList>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                    </div>
-                    <el-form-item :label="$t('website.remark')" prop="description">
-                        <el-input v-model="ssl.description"></el-input>
-                    </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="$t('ssl.upload')" size="large" :back="handleClose">
+        <el-form ref="sslForm" label-position="top" :model="ssl" label-width="100px" :rules="rules" v-loading="loading">
+            <el-form-item :label="$t('website.importType')" prop="type">
+                <el-select v-model="ssl.type">
+                    <el-option :label="$t('website.pasteSSL')" :value="'paste'"></el-option>
+                    <el-option :label="$t('website.localSSL')" :value="'local'"></el-option>
+                </el-select>
+            </el-form-item>
+            <div v-if="ssl.type === 'paste'">
+                <el-form-item :label="$t('website.privateKey')" prop="privateKey">
+                    <el-input v-model="ssl.privateKey" :rows="6" type="textarea" />
+                </el-form-item>
+                <el-form-item :label="$t('website.certificate')" prop="certificate">
+                    <el-input v-model="ssl.certificate" :rows="6" type="textarea" />
+                </el-form-item>
+            </div>
+            <div v-if="ssl.type === 'local'">
+                <el-form-item :label="$t('website.privateKeyPath')" prop="privateKeyPath">
+                    <el-input v-model="ssl.privateKeyPath">
+                        <template #prepend>
+                            <FileList @choose="getPrivateKeyPath" :dir="false"></FileList>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item :label="$t('website.certificatePath')" prop="certificatePath">
+                    <el-input v-model="ssl.certificatePath">
+                        <template #prepend>
+                            <FileList @choose="getCertificatePath" :dir="false"></FileList>
+                        </template>
+                    </el-input>
+                </el-form-item>
+            </div>
+            <el-form-item :label="$t('website.remark')" prop="description">
+                <el-input v-model="ssl.description"></el-input>
+            </el-form-item>
+        </el-form>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -56,11 +43,10 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { UploadSSL } from '@/api/modules/website';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/website/create/index.vue b/frontend/src/views/website/website/create/index.vue
index 96121c98c..28d5840b7 100644
--- a/frontend/src/views/website/website/create/index.vue
+++ b/frontend/src/views/website/website/create/index.vue
@@ -1,355 +1,337 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="50%">
-        <template #header>
-            <DrawerHeader :header="$t('website.create')" :back="handleClose">
-                <template #buttons>
-                    <span class="drawer-header-button">
-                        <template
-                            v-for="item in [
-                                {
-                                    label: i18n.global.t('website.deployment'),
-                                    value: 'deployment',
-                                },
-                                {
-                                    label: i18n.global.t('runtime.runtime'),
-                                    value: 'runtime',
-                                },
+    <DrawerPro v-model="open" :header="$t('website.create')" size="large" :back="handleClose">
+        <template #buttons>
+            <span class="drawer-header-button">
+                <template
+                    v-for="item in [
+                        {
+                            label: i18n.global.t('website.deployment'),
+                            value: 'deployment',
+                        },
+                        {
+                            label: i18n.global.t('runtime.runtime'),
+                            value: 'runtime',
+                        },
 
-                                {
-                                    label: i18n.global.t('website.proxy'),
-                                    value: 'proxy',
-                                },
-                                {
-                                    label: i18n.global.t('website.static'),
-                                    value: 'static',
-                                },
-                            ]"
-                            :key="item.value"
-                        >
-                            <el-button
-                                :class="website.type === item.value ? 'active-button' : ''"
-                                @click="changeType(item.value)"
-                                :type="website.type === item.value ? '' : 'info'"
-                                :plain="website.type === item.value"
-                                :text="website.type !== item.value"
-                                :bg="website.type !== item.value"
-                            >
-                                {{ item.label }}
-                            </el-button>
-                        </template>
-                    </span>
-                </template>
-            </DrawerHeader>
-        </template>
-        <el-row v-loading="loading" :class="{ mask: !versionExist }">
-            <el-col :span="22" :offset="1">
-                <el-alert
-                    v-if="website.type == 'deployment'"
-                    :title="$t('website.websiteDeploymentHelper')"
-                    type="info"
-                    :closable="false"
-                />
-                <el-alert
-                    v-if="website.type == 'static'"
-                    :title="$t('website.websiteStatictHelper')"
-                    type="info"
-                    :closable="false"
-                />
-                <el-alert
-                    v-if="website.type == 'proxy'"
-                    :title="$t('website.websiteProxyHelper')"
-                    type="info"
-                    :closable="false"
-                />
-                <el-alert
-                    v-if="website.type == 'runtime'"
-                    :title="$t('website.runtimeProxyHelper')"
-                    type="info"
-                    :closable="false"
-                />
-                <br />
-                <el-form
-                    ref="websiteForm"
-                    label-position="top"
-                    :model="website"
-                    label-width="125px"
-                    :rules="rules"
-                    :validate-on-rule-change="false"
+                        {
+                            label: i18n.global.t('website.proxy'),
+                            value: 'proxy',
+                        },
+                        {
+                            label: i18n.global.t('website.static'),
+                            value: 'static',
+                        },
+                    ]"
+                    :key="item.value"
                 >
-                    <el-form-item :label="$t('website.group')" prop="webSiteGroupId">
-                        <el-select v-model="website.webSiteGroupId">
+                    <el-button
+                        :class="website.type === item.value ? 'active-button' : ''"
+                        @click="changeType(item.value)"
+                        :type="website.type === item.value ? '' : 'info'"
+                        :plain="website.type === item.value"
+                        :text="website.type !== item.value"
+                        :bg="website.type !== item.value"
+                    >
+                        {{ item.label }}
+                    </el-button>
+                </template>
+            </span>
+        </template>
+        <div v-loading="loading" :class="{ mask: !versionExist }">
+            <el-alert
+                v-if="website.type == 'deployment'"
+                :title="$t('website.websiteDeploymentHelper')"
+                type="info"
+                :closable="false"
+            />
+            <el-alert
+                v-if="website.type == 'static'"
+                :title="$t('website.websiteStatictHelper')"
+                type="info"
+                :closable="false"
+            />
+            <el-alert
+                v-if="website.type == 'proxy'"
+                :title="$t('website.websiteProxyHelper')"
+                type="info"
+                :closable="false"
+            />
+            <el-alert
+                v-if="website.type == 'runtime'"
+                :title="$t('website.runtimeProxyHelper')"
+                type="info"
+                :closable="false"
+            />
+            <br />
+            <el-form
+                ref="websiteForm"
+                label-position="top"
+                :model="website"
+                label-width="125px"
+                :rules="rules"
+                :validate-on-rule-change="false"
+            >
+                <el-form-item :label="$t('website.group')" prop="webSiteGroupId">
+                    <el-select v-model="website.webSiteGroupId">
+                        <el-option
+                            v-for="(group, index) in groups"
+                            :key="index"
+                            :label="group.name"
+                            :value="group.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <div v-if="website.type === 'deployment'">
+                    <el-form-item prop="appType">
+                        <el-radio-group v-model="website.appType" @change="changeAppType(website.appType)">
+                            <el-radio :label="'installed'" :value="'installed'">
+                                {{ $t('website.appInstalled') }}
+                            </el-radio>
+                            <el-radio :label="'new'" :value="'new'">
+                                {{ $t('website.appNew') }}
+                            </el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item
+                        v-if="website.appType == 'installed'"
+                        :label="$t('website.appInstalled')"
+                        prop="appInstallId"
+                    >
+                        <el-select v-model="website.appInstallId" class="p-w-200">
                             <el-option
-                                v-for="(group, index) in groups"
+                                v-for="(appInstall, index) in appInstalls"
                                 :key="index"
-                                :label="group.name"
-                                :value="group.id"
+                                :label="appInstall.name"
+                                :value="appInstall.id"
                             ></el-option>
                         </el-select>
                     </el-form-item>
-                    <div v-if="website.type === 'deployment'">
-                        <el-form-item prop="appType">
-                            <el-radio-group v-model="website.appType" @change="changeAppType(website.appType)">
-                                <el-radio :label="'installed'" :value="'installed'">
-                                    {{ $t('website.appInstalled') }}
-                                </el-radio>
-                                <el-radio :label="'new'" :value="'new'">
-                                    {{ $t('website.appNew') }}
-                                </el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item
-                            v-if="website.appType == 'installed'"
-                            :label="$t('website.appInstalled')"
-                            prop="appInstallId"
-                        >
-                            <el-select v-model="website.appInstallId" class="p-w-200">
-                                <el-option
-                                    v-for="(appInstall, index) in appInstalls"
-                                    :key="index"
-                                    :label="appInstall.name"
-                                    :value="appInstall.id"
-                                ></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <div v-if="website.appType == 'new'">
-                            <el-form-item :label="$t('app.app')" prop="appinstall.appId">
-                                <el-row :gutter="20">
-                                    <el-col :span="12">
-                                        <el-select
-                                            v-model="website.appinstall.appId"
-                                            @change="changeApp()"
-                                            class="p-w-200"
-                                        >
-                                            <el-option
-                                                v-for="(app, index) in apps"
-                                                :key="index"
-                                                :label="app.name"
-                                                :value="app.id"
-                                            ></el-option>
-                                        </el-select>
-                                    </el-col>
-                                    <el-col :span="12">
-                                        <el-select
-                                            v-model="website.appinstall.version"
-                                            @change="getAppDetail(website.appinstall.version)"
-                                            class="p-w-200"
-                                        >
-                                            <el-option
-                                                v-for="(version, index) in appVersions"
-                                                :key="index"
-                                                :label="version"
-                                                :value="version"
-                                            ></el-option>
-                                        </el-select>
-                                    </el-col>
-                                </el-row>
-                            </el-form-item>
-                            <el-form-item :label="$t('commons.table.name')" prop="appinstall.name">
-                                <el-input v-model.trim="website.appinstall.name"></el-input>
-                            </el-form-item>
-                            <Params
-                                :key="paramKey"
-                                v-model:form="website.appinstall.params"
-                                v-model:rules="rules.appinstall.params"
-                                :params="appParams"
-                                :propStart="'appinstall.params.'"
-                            ></Params>
-                        </div>
-                    </div>
-                    <div v-if="website.type === 'runtime'">
-                        <el-row :gutter="20">
-                            <el-col :span="8">
-                                <el-form-item :label="$t('commons.table.type')" prop="runtimeType">
-                                    <el-select v-model="website.runtimeType" @change="changeRuntimeType()">
-                                        <el-option label="PHP" value="php"></el-option>
-                                        <el-option label="Node.js" value="node"></el-option>
-                                        <el-option label="Java" value="java"></el-option>
-                                        <el-option label="Go" value="go"></el-option>
+                    <div v-if="website.appType == 'new'">
+                        <el-form-item :label="$t('app.app')" prop="appinstall.appId">
+                            <el-row :gutter="20">
+                                <el-col :span="12">
+                                    <el-select v-model="website.appinstall.appId" @change="changeApp()" class="p-w-200">
+                                        <el-option
+                                            v-for="(app, index) in apps"
+                                            :key="index"
+                                            :label="app.name"
+                                            :value="app.id"
+                                        ></el-option>
                                     </el-select>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="16">
-                                <el-form-item :label="$t('runtime.runtime')" prop="runtimeID">
+                                </el-col>
+                                <el-col :span="12">
                                     <el-select
-                                        v-model="website.runtimeID"
-                                        @change="changeRuntime(website.runtimeID)"
-                                        filterable
+                                        v-model="website.appinstall.version"
+                                        @change="getAppDetail(website.appinstall.version)"
+                                        class="p-w-200"
                                     >
                                         <el-option
-                                            v-for="run in runtimes"
-                                            :key="run.name"
-                                            :label="run.name + ' [' + $t('runtime.' + run.resource) + ']'"
-                                            :value="run.id"
-                                        >
-                                            <el-row>
-                                                <el-col :span="14">
-                                                    <span class="runtimeName">
-                                                        {{ run.name }}
-                                                    </span>
-                                                </el-col>
-                                                <el-col :span="10">
-                                                    {{ ' [' + $t('runtime.' + run.resource) + ']' }}
-                                                </el-col>
-                                            </el-row>
-                                        </el-option>
+                                            v-for="(version, index) in appVersions"
+                                            :key="index"
+                                            :label="version"
+                                            :value="version"
+                                        ></el-option>
                                     </el-select>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <div v-if="website.runtimeType === 'php'">
-                            <Params
-                                v-if="runtimeResource === 'appstore'"
-                                :key="paramKey"
-                                v-model:form="website.appinstall.params"
-                                v-model:rules="rules.appinstall.params"
-                                :params="appParams"
-                                :propStart="'appinstall.params.'"
-                            ></Params>
-                            <div v-else>
-                                <el-form-item :label="$t('website.proxyType')" prop="proxyType">
-                                    <el-select v-model="website.proxyType">
-                                        <el-option :label="$t('website.tcp')" :value="'tcp'"></el-option>
-                                        <el-option :label="$t('website.unix')" :value="'unix'"></el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item
-                                    v-if="website.proxyType === 'tcp'"
-                                    :label="$t('commons.table.port')"
-                                    prop="port"
-                                >
-                                    <el-input v-model.number="website.port"></el-input>
-                                </el-form-item>
-                            </div>
-                        </div>
+                                </el-col>
+                            </el-row>
+                        </el-form-item>
+                        <el-form-item :label="$t('commons.table.name')" prop="appinstall.name">
+                            <el-input v-model.trim="website.appinstall.name"></el-input>
+                        </el-form-item>
+                        <Params
+                            :key="paramKey"
+                            v-model:form="website.appinstall.params"
+                            v-model:rules="rules.appinstall.params"
+                            :params="appParams"
+                            :propStart="'appinstall.params.'"
+                        ></Params>
                     </div>
-                    <el-form-item
-                        prop="advanced"
-                        v-if="
-                            (website.type === 'runtime' && website.runtimeType === 'php') ||
-                            (website.type === 'deployment' && website.appType === 'new')
-                        "
-                    >
-                        <el-checkbox v-model="website.appinstall.advanced" :label="$t('app.advanced')" size="large" />
-                    </el-form-item>
-
-                    <div v-if="website.appinstall.advanced">
-                        <el-form-item :label="$t('app.containerName')" prop="containerName">
-                            <el-input
-                                v-model.trim="website.appinstall.containerName"
-                                :placeholder="$t('app.containerNameHelper')"
-                            ></el-input>
-                        </el-form-item>
-                        <el-form-item :label="$t('container.cpuQuota')" prop="appinstall.cpuQuota">
-                            <el-input
-                                type="number"
-                                style="width: 40%"
-                                v-model.number="website.appinstall.cpuQuota"
-                                maxlength="5"
-                            >
-                                <template #append>{{ $t('app.cpuCore') }}</template>
-                            </el-input>
-                            <span class="input-help">{{ $t('container.limitHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item :label="$t('container.memoryLimit')" prop="appinstall.memoryLimit">
-                            <el-input style="width: 40%" v-model.number="website.appinstall.memoryLimit" maxlength="10">
-                                <template #append>
-                                    <el-select
-                                        v-model="website.appinstall.memoryUnit"
-                                        placeholder="Select"
-                                        class="pre-select"
-                                    >
-                                        <el-option label="KB" value="K" />
-                                        <el-option label="MB" value="M" />
-                                        <el-option label="GB" value="G" />
-                                    </el-select>
-                                </template>
-                            </el-input>
-                            <span class="input-help">{{ $t('container.limitHelper') }}</span>
-                        </el-form-item>
-                        <el-form-item prop="allowPort" v-if="website.type === 'deployment'">
-                            <el-checkbox
-                                v-model="website.appinstall.allowPort"
-                                :label="$t('app.allowPort')"
-                                size="large"
-                            />
-                            <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
-                        </el-form-item>
-                    </div>
-                    <el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
-                        <el-input
-                            v-model.trim="website.primaryDomain"
-                            @input="changeAlias(website.primaryDomain)"
-                            :placeholder="$t('website.primaryDomainHelper')"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item :label="$t('website.otherDomains')" prop="otherDomains">
-                        <el-input
-                            type="textarea"
-                            :rows="3"
-                            v-model="website.otherDomains"
-                            :placeholder="$t('website.domainHelper')"
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item prop="IPV6">
-                        <el-checkbox v-model="website.IPV6" :label="$t('website.ipv6')" size="large" />
-                    </el-form-item>
-                    <el-form-item :label="$t('website.alias')" prop="alias">
-                        <el-input v-model.trim="website.alias" :placeholder="$t('website.aliasHelper')"></el-input>
-                        <div>
-                            <span class="input-help">
-                                <span>{{ $t('website.staticPath') + staticPath + website.alias }}</span>
-                                <span v-if="website.type === 'static' && website.alias != ''">{{ '/index' }}</span>
-                            </span>
-                        </div>
-                    </el-form-item>
-
-                    <el-form-item prop="enableFtp" v-if="website.type === 'static' || website.type === 'runtime'">
-                        <el-checkbox
-                            @change="random"
-                            v-model="website.enableFtp"
-                            :label="$t('website.enableFtp')"
-                            size="large"
-                        />
-                        <span class="input-help">{{ $t('website.ftpHelper') }}</span>
-                    </el-form-item>
-                    <el-row :gutter="20" v-if="website.enableFtp">
-                        <el-col :span="12">
-                            <el-form-item prop="ftpUser" :label="$t('website.ftpUser')">
-                                <el-input v-model="website.ftpUser" />
+                </div>
+                <div v-if="website.type === 'runtime'">
+                    <el-row :gutter="20">
+                        <el-col :span="8">
+                            <el-form-item :label="$t('commons.table.type')" prop="runtimeType">
+                                <el-select v-model="website.runtimeType" @change="changeRuntimeType()">
+                                    <el-option label="PHP" value="php"></el-option>
+                                    <el-option label="Node.js" value="node"></el-option>
+                                    <el-option label="Java" value="java"></el-option>
+                                    <el-option label="Go" value="go"></el-option>
+                                </el-select>
                             </el-form-item>
                         </el-col>
-                        <el-col :span="12">
-                            <el-form-item prop="ftpPassword" :label="$t('website.ftpPassword')">
-                                <el-input type="password" clearable v-model="website.ftpPassword" show-password>
-                                    <template #append>
-                                        <el-button @click="random">{{ $t('commons.button.random') }}</el-button>
-                                    </template>
-                                </el-input>
+                        <el-col :span="16">
+                            <el-form-item :label="$t('runtime.runtime')" prop="runtimeID">
+                                <el-select
+                                    v-model="website.runtimeID"
+                                    @change="changeRuntime(website.runtimeID)"
+                                    filterable
+                                >
+                                    <el-option
+                                        v-for="run in runtimes"
+                                        :key="run.name"
+                                        :label="run.name + ' [' + $t('runtime.' + run.resource) + ']'"
+                                        :value="run.id"
+                                    >
+                                        <el-row>
+                                            <el-col :span="14">
+                                                <span class="runtimeName">
+                                                    {{ run.name }}
+                                                </span>
+                                            </el-col>
+                                            <el-col :span="10">
+                                                {{ ' [' + $t('runtime.' + run.resource) + ']' }}
+                                            </el-col>
+                                        </el-row>
+                                    </el-option>
+                                </el-select>
                             </el-form-item>
                         </el-col>
                     </el-row>
+                    <div v-if="website.runtimeType === 'php'">
+                        <Params
+                            v-if="runtimeResource === 'appstore'"
+                            :key="paramKey"
+                            v-model:form="website.appinstall.params"
+                            v-model:rules="rules.appinstall.params"
+                            :params="appParams"
+                            :propStart="'appinstall.params.'"
+                        ></Params>
+                        <div v-else>
+                            <el-form-item :label="$t('website.proxyType')" prop="proxyType">
+                                <el-select v-model="website.proxyType">
+                                    <el-option :label="$t('website.tcp')" :value="'tcp'"></el-option>
+                                    <el-option :label="$t('website.unix')" :value="'unix'"></el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item
+                                v-if="website.proxyType === 'tcp'"
+                                :label="$t('commons.table.port')"
+                                prop="port"
+                            >
+                                <el-input v-model.number="website.port"></el-input>
+                            </el-form-item>
+                        </div>
+                    </div>
+                </div>
+                <el-form-item
+                    prop="advanced"
+                    v-if="
+                        (website.type === 'runtime' && website.runtimeType === 'php') ||
+                        (website.type === 'deployment' && website.appType === 'new')
+                    "
+                >
+                    <el-checkbox v-model="website.appinstall.advanced" :label="$t('app.advanced')" size="large" />
+                </el-form-item>
 
-                    <el-form-item
-                        v-if="website.type === 'proxy'"
-                        :label="$t('website.proxyAddress')"
-                        prop="proxyAddress"
-                    >
-                        <el-input v-model="website.proxyAddress" :placeholder="$t('website.proxyHelper')">
-                            <template #prepend>
-                                <el-select v-model="website.proxyProtocol" class="pre-select">
-                                    <el-option label="http" value="http://" />
-                                    <el-option label="https" value="https://" />
-                                    <el-option :label="$t('website.other')" value="" />
+                <div v-if="website.appinstall.advanced">
+                    <el-form-item :label="$t('app.containerName')" prop="containerName">
+                        <el-input
+                            v-model.trim="website.appinstall.containerName"
+                            :placeholder="$t('app.containerNameHelper')"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('container.cpuQuota')" prop="appinstall.cpuQuota">
+                        <el-input
+                            type="number"
+                            style="width: 40%"
+                            v-model.number="website.appinstall.cpuQuota"
+                            maxlength="5"
+                        >
+                            <template #append>{{ $t('app.cpuCore') }}</template>
+                        </el-input>
+                        <span class="input-help">{{ $t('container.limitHelper') }}</span>
+                    </el-form-item>
+                    <el-form-item :label="$t('container.memoryLimit')" prop="appinstall.memoryLimit">
+                        <el-input style="width: 40%" v-model.number="website.appinstall.memoryLimit" maxlength="10">
+                            <template #append>
+                                <el-select
+                                    v-model="website.appinstall.memoryUnit"
+                                    placeholder="Select"
+                                    class="pre-select"
+                                >
+                                    <el-option label="KB" value="K" />
+                                    <el-option label="MB" value="M" />
+                                    <el-option label="GB" value="G" />
                                 </el-select>
                             </template>
                         </el-input>
+                        <span class="input-help">{{ $t('container.limitHelper') }}</span>
                     </el-form-item>
-                    <el-form-item :label="$t('website.remark')" prop="remark">
-                        <el-input type="textarea" :rows="3" clearable v-model="website.remark" />
+                    <el-form-item prop="allowPort" v-if="website.type === 'deployment'">
+                        <el-checkbox v-model="website.appinstall.allowPort" :label="$t('app.allowPort')" size="large" />
+                        <span class="input-help">{{ $t('app.allowPortHelper') }}</span>
                     </el-form-item>
-                </el-form>
-            </el-col>
-        </el-row>
+                </div>
+                <el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
+                    <el-input
+                        v-model.trim="website.primaryDomain"
+                        @input="changeAlias(website.primaryDomain)"
+                        :placeholder="$t('website.primaryDomainHelper')"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item :label="$t('website.otherDomains')" prop="otherDomains">
+                    <el-input
+                        type="textarea"
+                        :rows="3"
+                        v-model="website.otherDomains"
+                        :placeholder="$t('website.domainHelper')"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item prop="IPV6">
+                    <el-checkbox v-model="website.IPV6" :label="$t('website.ipv6')" size="large" />
+                </el-form-item>
+                <el-form-item :label="$t('website.alias')" prop="alias">
+                    <el-input v-model.trim="website.alias" :placeholder="$t('website.aliasHelper')"></el-input>
+                    <div>
+                        <span class="input-help">
+                            <span>{{ $t('website.staticPath') + staticPath + website.alias }}</span>
+                            <span v-if="website.type === 'static' && website.alias != ''">{{ '/index' }}</span>
+                        </span>
+                    </div>
+                </el-form-item>
+
+                <el-form-item prop="enableFtp" v-if="website.type === 'static' || website.type === 'runtime'">
+                    <el-checkbox
+                        @change="random"
+                        v-model="website.enableFtp"
+                        :label="$t('website.enableFtp')"
+                        size="large"
+                    />
+                    <span class="input-help">{{ $t('website.ftpHelper') }}</span>
+                </el-form-item>
+                <el-row :gutter="20" v-if="website.enableFtp">
+                    <el-col :span="12">
+                        <el-form-item prop="ftpUser" :label="$t('website.ftpUser')">
+                            <el-input v-model="website.ftpUser" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item prop="ftpPassword" :label="$t('website.ftpPassword')">
+                            <el-input type="password" clearable v-model="website.ftpPassword" show-password>
+                                <template #append>
+                                    <el-button @click="random">{{ $t('commons.button.random') }}</el-button>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-form-item v-if="website.type === 'proxy'" :label="$t('website.proxyAddress')" prop="proxyAddress">
+                    <el-input v-model="website.proxyAddress" :placeholder="$t('website.proxyHelper')">
+                        <template #prepend>
+                            <el-select v-model="website.proxyProtocol" class="pre-select">
+                                <el-option label="http" value="http://" />
+                                <el-option label="https" value="https://" />
+                                <el-option :label="$t('website.other')" value="" />
+                            </el-select>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item :label="$t('website.remark')" prop="remark">
+                    <el-input type="textarea" :rows="3" clearable v-model="website.remark" />
+                </el-form-item>
+            </el-form>
+        </div>
         <template #footer>
             <span>
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -364,11 +346,10 @@
                 {{ $t('runtime.openrestyWarn') }}
             </span>
         </el-card>
-    </el-drawer>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup name="CreateWebSite">
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { App } from '@/api/interface/app';
 import { GetApp, GetAppDetail, SearchApp, GetAppInstalled, GetAppDetailByID } from '@/api/modules/app';
 import { CreateWebsite, PreCheck } from '@/api/modules/website';
diff --git a/frontend/src/views/website/website/default/index.vue b/frontend/src/views/website/website/default/index.vue
index ed7524d09..c975fa92a 100644
--- a/frontend/src/views/website/website/default/index.vue
+++ b/frontend/src/views/website/website/default/index.vue
@@ -1,31 +1,23 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="40%">
-        <template #header>
-            <DrawerHeader :header="$t('website.defaultServer')" :back="handleClose"></DrawerHeader>
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-form @submit.prevent label-position="top">
-                    <el-form-item :label="$t('website.defaultServer')">
-                        <el-select v-model="defaultId" style="width: 100%">
-                            <el-option :value="0" :key="-1" :label="$t('website.noDefaultServer')"></el-option>
-                            <el-option
-                                v-for="(website, key) in websites"
-                                :key="key"
-                                :value="website.id"
-                                :label="website.primaryDomain"
-                            ></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-form>
-                <el-alert :closable="false">
-                    <template #default>
-                        <span style="white-space: pre-line">{{ $t('website.defaultServerHelper') }}</span>
-                    </template>
-                </el-alert>
-            </el-col>
-        </el-row>
-
+    <DrawerPro v-model="open" :header="$t('website.defaultServer')" size="normal" :back="handleClose">
+        <el-form @submit.prevent label-position="top" v-loading="loading">
+            <el-form-item :label="$t('website.defaultServer')">
+                <el-select v-model="defaultId">
+                    <el-option :value="0" :key="-1" :label="$t('website.noDefaultServer')"></el-option>
+                    <el-option
+                        v-for="(website, key) in websites"
+                        :key="key"
+                        :value="website.id"
+                        :label="website.primaryDomain"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <el-alert :closable="false">
+            <template #default>
+                <span class="whitespace-pre-line">{{ $t('website.defaultServerHelper') }}</span>
+            </template>
+        </el-alert>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -34,10 +26,9 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Website } from '@/api/interface/website';
 import { ChangeDefaultServer, ListWebsites } from '@/api/modules/website';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/website/html/index.vue b/frontend/src/views/website/website/html/index.vue
index 115afb732..6e3bff8cc 100644
--- a/frontend/src/views/website/website/html/index.vue
+++ b/frontend/src/views/website/website/html/index.vue
@@ -1,25 +1,18 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="40%">
-        <template #header>
-            <DrawerHeader :header="$t('website.defaultHtml')" :back="handleClose"></DrawerHeader>
-        </template>
-        <el-row v-loading="loading">
-            <el-col :span="22" :offset="1">
-                <el-select v-model="type" class="w-full" @change="get()">
-                    <el-option :value="'404'" :label="$t('website.website404')"></el-option>
-                    <el-option :value="'domain404'" :label="$t('website.domain404')"></el-option>
-                    <el-option :value="'index'" :label="$t('website.indexHtml')"></el-option>
-                    <el-option :value="'php'" :label="$t('website.indexPHP')"></el-option>
-                    <el-option :value="'stop'" :label="$t('website.stopHtml')"></el-option>
-                </el-select>
-                <div class="mt-1.5">
-                    <el-text v-if="type == '404'" type="info">
-                        {{ $t('website.website404Helper') }}
-                    </el-text>
-                </div>
-                <div ref="htmlRef" class="default-html"></div>
-            </el-col>
-        </el-row>
+    <DrawerPro v-model="open" :header="$t('website.defaultHtml')" :back="handleClose" size="normal">
+        <el-select v-model="type" class="w-full" @change="get()" v-loading="loading">
+            <el-option :value="'404'" :label="$t('website.website404')"></el-option>
+            <el-option :value="'domain404'" :label="$t('website.domain404')"></el-option>
+            <el-option :value="'index'" :label="$t('website.indexHtml')"></el-option>
+            <el-option :value="'php'" :label="$t('website.indexPHP')"></el-option>
+            <el-option :value="'stop'" :label="$t('website.stopHtml')"></el-option>
+        </el-select>
+        <div class="mt-1.5">
+            <el-text v-if="type == '404'" type="info">
+                {{ $t('website.website404Helper') }}
+            </el-text>
+        </div>
+        <div ref="htmlRef" class="default-html"></div>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@@ -28,10 +21,9 @@
                 </el-button>
             </span>
         </template>
-    </el-drawer>
+    </DrawerPro>
 </template>
 <script lang="ts" setup>
-import DrawerHeader from '@/components/drawer-header/index.vue';
 import { UpdateDefaultHtml, GetDefaultHtml } from '@/api/modules/website';
 import i18n from '@/lang';
 import { ref } from 'vue';