feat: 统一抽屉组件 (#5691)

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",

frontend/src/components/backup/index.vue

@@ -1,22 +1,12 @@
 <template>
-    <div>
-        <el-drawer
+    <DrawerPro
         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 + ')'"
+        :resource="detailName ? name + ' [' + detailName + ']' : name"
         :back="handleClose"
-                />
-                <DrawerHeader v-else :header="$t('commons.button.backup')" :resource="name" :back="handleClose" />
-            </template>
-
+        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>
-
+        </template>
+    </DrawerPro>
     <OpDialog ref="opRef" @search="search" />
-    </div>
-
     <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';

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);
 

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,
 });

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>

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);
     },
 };

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">
+                        <div v-if="showBack">
+                            <div class="flex justify-between">
                                 <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>
+                                        <slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
                                     </template>
-                            <template v-else-if="slots.buttons" #buttons>
+                                    <!-- <template v-else-if="slots.buttons" #buttons>
                                         <slot name="buttons"></slot>
-                            </template>
+                                    </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;
 }
 

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>

frontend/src/components/upload/index.vue

@@ -1,15 +1,13 @@
 <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>
+            <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])" />
@@ -61,7 +59,7 @@
                     >
                         <template #toolbar>
                             <el-button
-                            style="margin-left: 10px"
+                                class="ml-2.5"
                                 plain
                                 :disabled="selects.length === 0"
                                 @click="onBatchDelete(null)"
@@ -76,7 +74,12 @@
                                 {{ computeSize(row.size) }}
                             </template>
                         </el-table-column>
-                    <el-table-column show-overflow-tooltip :label="$t('commons.table.createdAt')" min-width="90" fix>
+                        <el-table-column
+                            show-overflow-tooltip
+                            :label="$t('commons.table.createdAt')"
+                            min-width="90"
+                            fix
+                        >
                             <template #default="{ row }">
                                 {{ row.createdAt }}
                             </template>
@@ -90,8 +93,8 @@
                         />
                     </ComplexTable>
                 </div>
-        </el-drawer>
-
+            </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';

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

@@ -1,14 +1,6 @@
 <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>
+    <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">
@@ -73,7 +65,8 @@
                 </div>
             </div>
             <MdEditor previewOnly v-model="app.readMe" :theme="isDarkTheme ? 'dark' : 'light'" />
-    </el-drawer>
+        </template>
+    </DrawerPro>
     <Install ref="installRef"></Install>
 </template>
 

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

@@ -1,17 +1,5 @@
 <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">
+    <DrawerPro v-model="open" :header="$t('app.install')" :back="handleClose" size="large">
         <el-alert
             :title="$t('app.appInstallWarn')"
             class="common-prompt"
@@ -19,14 +7,9 @@
             type="error"
             v-if="!isHostMode"
         />
-                <el-alert
-                    :title="$t('app.hostModeHelper')"
-                    class="common-prompt"
-                    :closable="false"
-                    type="warning"
-                    v-else
-                />
+        <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"
@@ -61,10 +44,7 @@
             </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-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" />
@@ -129,9 +109,6 @@
                 </div>
             </div>
         </el-form>
-            </el-col>
-        </el-row>
-
         <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';

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

@@ -1,25 +1,17 @@
 <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">
+    <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>
-            </Header>
-        </template>
-        <el-row v-if="!edit">
-            <el-col :span="22" :offset="1">
-                <el-descriptions border :column="1">
+        <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-col>
-        </el-row>
-        <el-row v-else v-loading="loading">
-            <el-col :span="22" :offset="1">
+
+        <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">
@@ -61,18 +53,13 @@
                         <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"
-                            >
+                        <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 style="width: 40%" v-model.number="paramModel.memoryLimit" maxlength="10">
+                        <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" />
@@ -105,8 +92,7 @@
                     </div>
                 </div>
             </el-form>
-            </el-col>
-        </el-row>
+        </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';

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

@@ -1,8 +1,6 @@
 <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>
-        </template>
+    <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">
@@ -25,17 +23,17 @@
                     </el-card>
                 </el-col>
             </el-row>
+        </template>
         <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';
 

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

@@ -1,15 +1,10 @@
 <template>
-    <el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="50%">
-        <template #header>
-            <Header
+    <DrawerPro
+        v-model="open"
         :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)">
@@ -30,9 +25,6 @@
                 </el-link>
             </el-descriptions-item>
         </el-descriptions>
-                </div>
-            </el-col>
-            <el-col :span="22" :offset="1">
         <el-form
             @submit.prevent
             ref="updateRef"
@@ -62,9 +54,8 @@
                 <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
             </el-form-item>
         </el-form>
-            </el-col>
 
-            <el-col :span="22" :offset="1" v-if="operateReq.operate === 'upgrade'">
+        <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>
@@ -87,8 +78,7 @@
                 :extensions="extensions"
                 v-model="newCompose"
             />
-            </el-col>
-        </el-row>
+        </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';

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

@@ -1,19 +1,6 @@
 <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">
+    <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>
@@ -35,12 +22,7 @@
             <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-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">
@@ -87,9 +69,6 @@
                 </div>
             </el-form-item>
         </el-form>
-                </el-col>
-            </el-row>
-        </div>
         <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';

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);

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

@@ -1,17 +1,12 @@
 <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 @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') }}
@@ -36,8 +31,6 @@
                 </el-checkbox>
             </el-form-item>
         </el-form>
-            </el-col>
-        </el-row>
         <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';

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>

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

@@ -1,26 +1,27 @@
 <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>
+            <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-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>
@@ -58,12 +59,13 @@
                     @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';

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);

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%"
-    >
-        <template #header>
-            <DrawerHeader
         :header="title"
-                :hideResource="dialogData.title === 'create'"
-                :resource="dialogData.rowData?.name"
         :back="handleClose"
-            />
-        </template>
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        size="large"
+    >
         <el-form
             ref="formRef"
             label-position="top"
@@ -23,8 +14,6 @@
             :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')"
@@ -40,13 +29,7 @@
                 <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-button style="margin-left: -5px" size="small" text type="primary" @click="goRouter()">
                             <el-icon><Position /></el-icon>
                             {{ $t('firewall.quickJump') }}
                         </el-button>
@@ -55,17 +38,8 @@
             </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 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>
@@ -94,10 +68,7 @@
                         </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"
-                                        />
+                                <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">
@@ -151,27 +122,16 @@
                             <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-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-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-option :value="item.option" :label="item.option.substring(0, 30)" />
                                             </el-tooltip>
                                         </div>
                                     </el-select>
@@ -204,10 +164,7 @@
                 <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-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">
@@ -278,8 +235,6 @@
                     v-model="dialogData.rowData!.envStr"
                 />
             </el-form-item>
-                </el-col>
-            </el-row>
         </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,

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

@@ -1,17 +1,12 @@
 <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]"
@@ -19,8 +14,6 @@
             >
                 <el-input v-model="renameForm.newName"></el-input>
             </el-form-item>
-                </el-col>
-            </el-row>
         </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);
 

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

@@ -1,15 +1,12 @@
 <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>
+        <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" />
@@ -20,7 +17,7 @@
                     prop="command"
                     :rules="Rules.requiredInput"
                 >
-                <el-checkbox style="width: 100px" border v-model="form.isCustom" @change="onChangeCommand">
+                    <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" />
@@ -31,7 +28,7 @@
                     prop="command"
                     :rules="Rules.requiredSelect"
                 >
-                <el-checkbox style="width: 100px" border v-model="form.isCustom" @change="onChangeCommand">
+                    <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">
@@ -51,7 +48,8 @@
                     v-if="terminalOpen"
                 ></Terminal>
             </el-form>
-    </el-drawer>
+        </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);

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

@@ -1,17 +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('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"
@@ -21,11 +15,7 @@
         />
         <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-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>
@@ -47,8 +37,6 @@
                 <span class="input-help">{{ $t('container.forcePullHelper') }}</span>
             </el-form-item>
         </el-form>
-            </el-col>
-        </el-row>
         <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);
 

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

@@ -1,17 +1,5 @@
 <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">
+    <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 />
@@ -65,8 +53,6 @@
             v-if="logVisible"
             :style="'height: calc(100vh - 370px);min-height: 200px'"
         />
-            </el-col>
-        </el-row>
 
         <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];

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>

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

@@ -1,17 +1,6 @@
 <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>
@@ -19,8 +8,6 @@
                     </template>
                 </el-input>
             </el-form-item>
-                </el-col>
-            </el-row>
         </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);
 

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

@@ -1,17 +1,5 @@
 <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">
+    <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">
@@ -42,8 +30,6 @@
             v-if="showLog"
             :style="'height: calc(100vh - 397px);min-height: 200px'"
         />
-            </el-col>
-        </el-row>
         <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);

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

@@ -1,17 +1,5 @@
 <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">
+    <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">
@@ -20,12 +8,7 @@
             </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-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">
@@ -44,8 +27,6 @@
             :style="'height: calc(100vh - 370px);min-height: 200px'"
             v-model:loading="loading"
         />
-            </el-col>
-        </el-row>
 
         <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);

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

@@ -1,17 +1,6 @@
 <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>
@@ -21,7 +10,7 @@
                 :rules="Rules.requiredSelect"
                 prop="repo"
             >
-                        <el-select style="width: 100%" clearable filterable v-model="form.repo" @change="changeRepo">
+                <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>
@@ -30,21 +19,13 @@
             </el-form-item>
 
             <el-form-item>
-                        <el-checkbox style="width: 100%" v-model="form.deleteTag">
+                <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
-                                style="width: 100%"
-                                v-for="item in tags"
-                                :key="item"
-                                :value="item"
-                                :label="item"
-                            />
+                    <el-checkbox v-for="item in tags" :key="item" :value="item" :label="item" />
                 </el-checkbox-group>
             </el-form-item>
-                </el-col>
-            </el-row>
         </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);

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

@@ -1,17 +1,6 @@
 <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>
@@ -117,23 +106,11 @@
             </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-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-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.labelStr" />
             </el-form-item>
-                </el-col>
-            </el-row>
         </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';
 

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%"
-    >
-        <template #header>
-            <DrawerHeader
         :header="title + $t('container.repo')"
         :resource="dialogData.rowData?.name"
         :back="handleClose"
-            />
-        </template>
+        size="small"
+    >
         <el-form
             ref="formRef"
             label-position="top"
@@ -21,8 +14,6 @@
             :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
@@ -66,8 +57,6 @@
                     {{ $t('container.httpRepo') }}
                 </span>
             </el-form-item>
-                </el-col>
-            </el-row>
         </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';
 

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>

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%"
-    >
-        <template #header>
-            <DrawerHeader
-                :header="title + $t('container.composeTemplate')"
-                :hideResource="dialogData.title === 'create'"
-                :resource="dialogData.rowData?.name"
+        :header="$t('container.composeTemplate')"
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
         :back="handleClose"
-            />
-        </template>
+        size="large"
+    >
         <el-form
             v-loading="loading"
             label-position="top"
@@ -22,13 +14,8 @@
             :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-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>
@@ -48,8 +35,6 @@
                     v-model="dialogData.rowData!.content"
                 />
             </el-form-item>
-                </el-col>
-            </el-row>
         </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';
 

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

@@ -1,16 +1,5 @@
 <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">
+    <DrawerPro v-model="drawerVisible" :header="$t('container.createVolume')" :back="handleClose" size="small">
         <el-form
             ref="formRef"
             v-loading="loading"
@@ -31,11 +20,7 @@
             </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-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">
@@ -55,24 +40,12 @@
                 </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-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-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.labelStr" />
             </el-form-item>
         </el-form>
-            </el-col>
-        </el-row>
         <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);

frontend/src/views/cronjob/backup/index.vue

@@ -1,21 +1,12 @@
 <template>
-    <div>
-        <el-drawer
+    <DrawerPro
         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>
+        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';
 

frontend/src/views/cronjob/operate/index.vue

@@ -1,22 +1,12 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader
         :header="title"
-                :hideResource="dialogData.title === 'create'"
-                :resource="dialogData.rowData?.name"
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
         :back="handleClose"
-            />
-        </template>
+        size="large"
+    >
         <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'"
@@ -36,7 +26,7 @@
                     <el-option value="snapshot" :label="$t('cronjob.snapshot')" />
                     <el-option value="ntp" :label="$t('cronjob.ntp')" />
                 </el-select>
-                        <div v-else style="width: 100%">
+                <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">
@@ -75,11 +65,7 @@
             </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-input :disabled="dialogData.title === 'edit'" clearable v-model.trim="dialogData.rowData!.name" />
             </el-form-item>
 
             <el-form-item :label="$t('cronjob.cronSpec')" prop="spec">
@@ -129,9 +115,9 @@
                         </template>
                     </el-input>
                     <el-button
+                        class="ml-2.5"
                         link
                         type="primary"
-                                style="float: right; margin-top: 5px"
                         @click="handleSpecDelete(index)"
                         v-if="dialogData.rowData.specObjs.length > 1"
                     >
@@ -164,15 +150,10 @@
                 prop="command"
                 :rules="Rules.requiredInput"
             >
-                        <el-checkbox style="width: 100px" border v-model="dialogData.rowData!.isCustom">
+                <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-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" />
@@ -189,11 +170,7 @@
                 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 :disabled="websiteOptions.length === 0" :label="$t('commons.table.all')" value="all" />
                     <el-option
                         v-for="(item, index) in websiteOptions"
                         :key="index"
@@ -214,11 +191,7 @@
             <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"
-                                />
+                        <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>
@@ -241,17 +214,8 @@
                 </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"
-                                >
+                        <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') }}
@@ -332,11 +296,7 @@
                 <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-form-item v-if="hasExclusionRules()" :label="$t('cronjob.exclusionRules')" prop="exclusionRules">
                 <el-input
                     type="textarea"
                     :placeholder="$t('cronjob.rulesHelper')"
@@ -346,8 +306,6 @@
                 />
                 <span class="input-help">{{ $t('cronjob.exclusionRulesHelper') }}</span>
             </el-form-item>
-                </el-col>
-            </el-row>
         </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';

frontend/src/views/cronjob/record/index.vue

@@ -58,11 +58,9 @@
         </div>
 
         <LayoutContent :title="$t('cronjob.record')" :reload="true">
-            <template #search>
-                <el-row :gutter="20">
-                    <el-col :span="8">
+            <template #rightToolBar>
                 <el-date-picker
-                            style="width: calc(100% - 20px)"
+                    class="mr-2.5"
                     @change="search()"
                     v-model="timeRangeLoad"
                     type="datetimerange"
@@ -71,8 +69,6 @@
                     :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="" />
@@ -80,8 +76,6 @@
                     <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>
             <template #main>
                 <div class="mainClass">

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

@@ -1,18 +1,13 @@
 <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>
@@ -22,11 +17,7 @@
                 <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 v-if="form.from !== 'local'" value="localhost" :label="$t('terminal.localhost')" />
                         <el-option value="ip" :label="$t('database.permissionForIP')" />
                     </el-select>
                 </el-form-item>
@@ -34,8 +25,6 @@
                     <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>
             <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';

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

@@ -1,17 +1,6 @@
 <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">
@@ -68,18 +57,10 @@
 
             <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"
-                            />
+                    <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-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" />
@@ -90,7 +71,6 @@
                     </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>
@@ -101,13 +81,9 @@
                     <CopyButton :content="form.password" type="icon" />
                 </el-form-item>
             </div>
-                </el-col>
-            </el-row>
         </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';

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

@@ -1,22 +1,10 @@
 <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">
+    <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" style="width: 120px">
+                        <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" />
@@ -35,15 +23,10 @@
                     </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 v-if="form.from !== 'local'" value="localhost" :label="$t('terminal.localhost')" />
                     <el-option value="ip" :label="$t('database.permissionForIP')" />
                 </el-select>
             </el-form-item>
@@ -51,19 +34,13 @@
                 <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>
-
         <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';
 

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>

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

@@ -1,29 +1,19 @@
 <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-input type="password" clearable show-password v-model="changeForm.password"></el-input>
                     </el-form-item>
                 </div>
                 <div v-if="changeForm.operation === 'privilege'">
@@ -43,8 +33,6 @@
                         <span class="input-help">{{ $t('database.remoteHelper') }}</span>
                     </el-form-item>
                 </div>
-                    </el-col>
-                </el-row>
             </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';

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')" />
-            </template>
-            <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
+        <LayoutContent backName="MySQL" :title="$t('database.remoteDB')">
+            <template #leftToolBar>
                 <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">
+            </template>
+            <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">

frontend/src/views/database/mysql/remote/operate/index.vue

@@ -1,28 +1,14 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader
-                :hideResource="dialogData.title === 'create'"
         :header="title"
-                :resource="dialogData.rowData?.name"
         :back="handleClose"
-            />
-        </template>
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        size="large"
+    >
         <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-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">
@@ -64,11 +50,7 @@
                 />
             </el-form-item>
             <el-form-item>
-                        <el-checkbox
-                            @change="isOK = false"
-                            v-model="dialogData.rowData!.ssl"
-                            :label="$t('database.ssl')"
-                        />
+                <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>
@@ -102,19 +84,12 @@
                     />
                 </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-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-col>
-            </el-row>
         </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';

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

@@ -1,9 +1,7 @@
 <template>
     <div v-loading="loading">
-        <LayoutContent>
-            <template #title>
-                <back-button name="MySQL" :header="props.database + ' ' + $t('commons.button.set')">
-                    <template #buttons>
+        <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>
@@ -43,8 +41,6 @@
                     {{ $t('database.slowLog') }}
                 </el-button>
             </template>
-                </back-button>
-            </template>
 
             <template #app>
                 <AppStatus :app-key="props.type" :app-name="props.database" v-model:loading="loading" />
@@ -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"

frontend/src/views/database/postgresql/bind/index.vue

@@ -1,18 +1,13 @@
 <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" />
@@ -23,8 +18,6 @@
                 <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-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';
 

frontend/src/views/database/postgresql/conn/index.vue

@@ -1,26 +1,11 @@
 <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"
-                                    >
+                            <el-tooltip v-if="loadPgInfo(true).length > 48" :content="loadPgInfo(true)" placement="top">
                                 {{ loadPgInfo(true).substring(0, 48) }}...
                             </el-tooltip>
                             <span else>
@@ -76,11 +61,7 @@
                         </template>
                     </el-input>
                 </el-form-item>
-                        <el-form-item
-                            :label="$t('commons.login.password')"
-                            :rules="Rules.paramComplexity"
-                            prop="password"
-                        >
+                <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" />
@@ -101,8 +82,6 @@
                     <CopyButton :content="form.password" type="icon" />
                 </el-form-item>
             </div>
-                </el-col>
-            </el-row>
         </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';

frontend/src/views/database/postgresql/create/index.vue

@@ -1,18 +1,7 @@
 <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>
@@ -37,11 +26,8 @@
                 <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>
-
         <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';
 

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-input type="password" clearable show-password v-model="changeForm.password"></el-input>
                     </el-form-item>
                 </div>
-                    </el-col>
-                </el-row>
             </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';
 

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')" />
-            </template>
-            <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
+        <LayoutContent :title="$t('database.remoteDB')" backName="PostgreSQL">
+            <template #leftToolBar>
                 <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">
+            </template>
+            <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">

frontend/src/views/database/postgresql/remote/operate/index.vue

@@ -1,28 +1,14 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader
-                :hideResource="dialogData.title === 'create'"
         :header="title"
-                :resource="dialogData.rowData?.name"
         :back="handleClose"
-            />
-        </template>
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        size="large"
+    >
         <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-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">
@@ -55,8 +41,6 @@
             <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>
         <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';

frontend/src/views/database/postgresql/setting/index.vue

@@ -1,9 +1,7 @@
 <template>
     <div v-loading="loading">
-        <LayoutContent>
-            <template #title>
-                <back-button name="PostgreSQL" :header="props.database + ' ' + $t('commons.button.set')">
-                    <template #buttons>
+        <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>
@@ -19,8 +17,6 @@
                     {{ $t('database.log') }}
                 </el-button>
             </template>
-                </back-button>
-            </template>
 
             <template #app>
                 <AppStatus :app-key="props.type" :app-name="props.database" v-model:loading="loading" />

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>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
             </span>
         </template>
-        </el-drawer>
-
+    </DrawerPro>
     <OpDialog ref="opRef" @search="search" />
-    </div>
 </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();

frontend/src/views/database/redis/conn/index.vue

@@ -1,17 +1,6 @@
 <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">
@@ -83,8 +72,6 @@
                     <CopyButton :content="form.password" type="icon" />
                 </el-form-item>
             </div>
-                </el-col>
-            </el-row>
         </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';
 

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,16 +19,15 @@
                     @setting="onSetting"
                 ></AppStatus>
             </template>
-            <template #search v-if="!isOnSetting">
-                <div class="flex">
-                    <div>
+            <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>
-                    </div>
+            </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')">
@@ -58,10 +57,8 @@
                         </el-button>
                     </el-option-group>
                 </el-select>
-                </div>
             </template>
-        </LayoutContent>
-
+            <template #main v-if="!isOnSetting">
                 <div v-if="currentDB && !isOnSetting" class="mt-5">
                     <Terminal
                         :style="{ height: `calc(100vh - ${loadHeight()})` }"
@@ -82,7 +79,12 @@
                     <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-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') }}
@@ -108,6 +110,8 @@
                         </template>
                     </LayoutContent>
                 </div>
+            </template>
+        </LayoutContent>
 
         <Setting ref="settingRef" style="margin-top: 30px" />
         <Conn ref="connRef" @check-exist="reOpenTerminal" @close-terminal="closeTerminal(true)" />

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')" />
-            </template>
-            <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
+        <LayoutContent :title="$t('database.remoteDB')" backName="Redis">
+            <template #leftToolBar>
                 <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">
+            </template>
+            <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">

frontend/src/views/database/redis/remote/operate/index.vue

@@ -1,28 +1,14 @@
 <template>
-    <el-drawer
+    <DrawerPro
         v-model="drawerVisible"
-        :destroy-on-close="true"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        size="50%"
-    >
-        <template #header>
-            <DrawerHeader
-                :hideResource="dialogData.title === 'create'"
         :header="title"
-                :resource="dialogData.rowData?.name"
         :back="handleClose"
-            />
-        </template>
+        :resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
+        size="large"
+    >
         <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-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">
@@ -49,8 +35,6 @@
             <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>
         <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';

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>

frontend/src/views/host/file-management/batch-role/index.vue

@@ -1,17 +1,6 @@
 <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">
+    <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">
@@ -24,19 +13,17 @@
                     <el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
                 </el-form-item>
             </el-form>
-            </el-col>
-        </el-row>
+        </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';

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">
+    <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>
-            </el-col>
-        </el-row>
         <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';

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

@@ -1,10 +1,5 @@
 <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">
+    <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"
@@ -24,15 +19,13 @@
                 <el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
             </el-form-item>
         </el-form>
-            </el-col>
-        </el-row>
         <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;

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

@@ -1,17 +1,5 @@
 <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">
+    <DrawerPro v-model="open" :header="title" :back="handleClose" size="large">
         <el-form
             ref="fileForm"
             label-position="top"
@@ -44,15 +32,13 @@
                 <el-checkbox v-model="form.replace" :label="$t('file.replace')"></el-checkbox>
             </el-form-item>
         </el-form>
-            </el-col>
-        </el-row>
         <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 {

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

@@ -1,18 +1,5 @@
 <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">
+    <DrawerPro v-model="open" :header="$t('commons.button.create')" :back="handleClose" size="normal">
         <el-form
             ref="fileForm"
             label-position="top"
@@ -46,20 +33,16 @@
             </el-form-item>
         </el-form>
         <FileRole v-if="setRole" :mode="'0755'" @get-mode="getMode" :key="open.toString()"></FileRole>
-            </el-col>
-        </el-row>
-
         <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';

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

@@ -1,17 +1,5 @@
 <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">
+    <DrawerPro v-model="open" :header="$t('file.deCompress')" :resource="name" :back="handleClose" size="normal">
         <el-form
             ref="fileForm"
             label-position="top"
@@ -34,15 +22,13 @@
                 <el-input v-model="form.secret"></el-input>
             </el-form-item>
         </el-form>
-            </el-col>
-        </el-row>
         <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 {

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

@@ -1,17 +1,12 @@
 <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>
+    <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)" :loading="loading">
+                    <el-button type="primary" link small @click="getDirSize(data)">
                         <span v-if="data.dirSize == undefined">
                             {{ $t('file.calculate') }}
                         </span>
@@ -27,9 +22,7 @@
                 {{ dateFormatSimple(data.modTime) }}
             </el-descriptions-item>
         </el-descriptions>
-            </el-col>
-        </el-row>
-    </el-drawer>
+    </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;

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

@@ -1,19 +1,6 @@
 <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" />
@@ -24,8 +11,6 @@
                     <template #append>{{ extension }}</template>
                 </el-input>
             </el-form-item>
-                </el-col>
-            </el-row>
         </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>;

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" />
-        </template>
+    <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>
-    </el-drawer>
+        </template>
+    </DrawerPro>
 </template>
 
 <script setup lang="ts">

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">

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

@@ -1,16 +1,5 @@
 <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">
+    <DrawerPro v-model="open" :header="title" :back="handleClose" size="normal">
         <el-form
             @submit.prevent
             ref="fileForm"
@@ -34,8 +23,6 @@
                 </el-radio-group>
             </div>
         </el-form>
-            </el-col>
-        </el-row>
         <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';
 

frontend/src/views/host/file-management/recycle-bin/index.vue

@@ -1,14 +1,6 @@
 <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>
+    <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') }}
@@ -41,7 +33,11 @@
                     </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.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) }}
@@ -57,7 +53,8 @@
             </ComplexTable>
             <Delete ref="deleteRef" @close="search" />
             <Reduce ref="reduceRef" @close="search" />
-    </el-drawer>
+        </template>
+    </DrawerPro>
 </template>
 
 <script lang="ts" setup>

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

@@ -1,10 +1,5 @@
 <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">
+    <DrawerPro v-model="open" :header="$t('file.rename')" :resource="oldName" :back="handleClose" size="normal">
         <el-form
             ref="fileForm"
             label-position="top"
@@ -20,15 +15,13 @@
                 <el-input v-model.trim="addForm.newName" />
             </el-form-item>
         </el-form>
-            </el-col>
-        </el-row>
         <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;

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

@@ -1,27 +1,25 @@
 <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>
+    <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>
+                    <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>
 
             <div>
-            <div class="el-upload-dragger" @dragover="handleDragover" @drop="handleDrop" @dragleave="handleDragleave">
+                <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>
@@ -47,7 +45,12 @@
             >
                 <template #tip>
                     <el-text>{{ uploadHelper }}</el-text>
-                <el-progress v-if="loading" text-inside :stroke-width="20" :percentage="uploadPercent"></el-progress>
+                    <el-progress
+                        v-if="loading"
+                        text-inside
+                        :stroke-width="20"
+                        :percentage="uploadPercent"
+                    ></el-progress>
                 </template>
             </el-upload>
 
@@ -77,6 +80,8 @@
                     </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';

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

@@ -1,17 +1,5 @@
 <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">
+    <DrawerPro v-model="open" :header="$t('file.download')" :back="handleClose" size="large">
         <el-form
             ref="fileForm"
             label-position="top"
@@ -38,8 +26,6 @@
                 <span class="input-help">{{ $t('file.ignoreCertificateHelper') }}</span>
             </el-form-item>
         </el-form>
-            </el-col>
-        </el-row>
         <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 {

frontend/src/views/host/firewall/forward/operate/index.vue

@@ -1,20 +1,8 @@
 <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">
+    <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 style="width: 100%" v-model="dialogData.rowData!.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" />
@@ -35,10 +23,7 @@
             <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>
         <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>

frontend/src/views/host/firewall/ip/operate/index.vue

@@ -1,18 +1,13 @@
 <template>
-    <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="title" :back="handleClose" size="large">
+        <el-form
+            ref="formRef"
+            label-position="top"
+            @submit.prevent
+            :model="dialogData.rowData"
+            :rules="rules"
+            v-loading="loading"
         >
-        <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'"
@@ -33,10 +28,7 @@
             <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>
         <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';

frontend/src/views/host/firewall/port/operate/index.vue

@@ -1,20 +1,8 @@
 <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">
+    <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 style="width: 100%" v-model="dialogData.rowData!.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" />
@@ -22,11 +10,7 @@
             </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"
-                            />
+                <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>
@@ -57,10 +41,7 @@
             <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>
         <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';

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

@@ -1,28 +1,9 @@
 <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>
+    <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-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('monitor.storeDays')"
-                            :rules="[Rules.integerNumber]"
-                            prop="monitorStoreDays"
-                        >
+            <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">
@@ -32,8 +13,7 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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 }>();
 

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

@@ -1,19 +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="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('monitor.interval')" :back="handleClose" />
-            </template>
+    <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-row type="flex" justify="center">
-                    <el-col :span="22">
             <el-form-item
                 :label="$t('monitor.interval')"
                 :rules="[Rules.integerNumber, checkNumberRange(1, 60)]"
@@ -21,8 +8,6 @@
             >
                 <el-input clearable v-model.number="form.monitorInterval" />
             </el-form-item>
-                    </el-col>
-                </el-row>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -32,8 +17,7 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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 }>();
 

frontend/src/views/host/process/process/detail/index.vue

@@ -1,10 +1,6 @@
 <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" />
-        </template>
-        <el-row>
-            <el-col>
+    <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>
@@ -87,14 +83,12 @@
                     </el-table>
                 </el-tab-pane>
             </el-tabs>
-            </el-col>
-        </el-row>
-    </el-drawer>
+        </template>
+    </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';

frontend/src/views/host/ssh/ssh/address/index.vue

@@ -1,26 +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="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">
+    <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>
@@ -46,8 +26,6 @@
                 </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">
@@ -57,8 +35,7 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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 }>();

frontend/src/views/host/ssh/ssh/port/index.vue

@@ -1,24 +1,9 @@
 <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>
+    <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-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">
@@ -28,15 +13,13 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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';
 

frontend/src/views/host/ssh/ssh/pubkey/index.vue

@@ -1,19 +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="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('ssh.pubkey')" :back="handleClose" />
-            </template>
+    <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-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" />
@@ -47,8 +34,6 @@
                     </el-button>
                 </div>
             </el-form-item>
-                    </el-col>
-                </el-row>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -58,8 +43,7 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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();

frontend/src/views/host/ssh/ssh/root/index.vue

@@ -1,19 +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="30%"
-        >
-            <template #header>
-                <DrawerHeader :header="$t('ssh.permitRootLogin')" :back="handleClose" />
-            </template>
+    <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-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" />
@@ -22,8 +9,6 @@
                     <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">
@@ -33,8 +18,7 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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 }>();
 

frontend/src/views/host/terminal/command/index.vue

@@ -61,21 +61,12 @@
                 </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%"
-        >
-            <template #header>
-                <DrawerHeader
             :header="$t('commons.button.' + operate) + $t('terminal.quickCommand')"
             :back="handleClose"
-                />
-            </template>
-            <el-row type="flex" justify="center">
-                <el-col :span="22">
+            size="small"
+        >
             <el-form
                 @submit.prevent
                 ref="commandInfoRef"
@@ -98,8 +89,6 @@
                     <el-input type="textarea" clearable v-model="commandInfo.command" />
                 </el-form-item>
             </el-form>
-                </el-col>
-            </el-row>
             <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';
 

frontend/src/views/host/terminal/host/change-group/index.vue

@@ -1,28 +1,21 @@
 <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%">
+                <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>
-                </el-col>
-            </el-row>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@@ -31,8 +24,7 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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';
 

frontend/src/views/host/terminal/host/operate/index.vue

@@ -1,18 +1,6 @@
 <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">
+    <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 }}
@@ -41,17 +29,8 @@
                     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 :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')"
@@ -74,12 +53,7 @@
             </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-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">
@@ -89,8 +63,6 @@
                 <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>
@@ -102,8 +74,7 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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';

frontend/src/views/host/terminal/terminal/host-create.vue

@@ -1,18 +1,6 @@
 <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>
+    <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-row type="flex" justify="center">
-                    <el-col :span="22">
             <el-alert
                 v-if="isLocal"
                 class="common-prompt"
@@ -34,27 +22,13 @@
                     <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 :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-form-item :label="$t('terminal.keyPassword')" v-if="hostInfo.authMode === 'key'" prop="passPhrase">
                 <el-input
                     @change="isOK = false"
                     type="password"
@@ -66,7 +40,7 @@
             <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-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">
@@ -75,8 +49,6 @@
             <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">
@@ -89,8 +61,7 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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';

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

@@ -1,18 +1,6 @@
 <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>
+    <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-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>
@@ -24,19 +12,9 @@
             </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>
+                <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>
@@ -47,7 +25,7 @@
             <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-select v-model.trim="endpointProto" class="p-w-100">
                             <el-option label="http" value="http" />
                             <el-option label="https" value="https" />
                         </el-select>
@@ -55,23 +33,15 @@
                 </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-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 style="width: 20%" plain @click="getBuckets(formRef)">
+                <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-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')" />
@@ -80,7 +50,7 @@
                 </el-select>
                 <el-alert
                     v-if="cosData.rowData!.varsJson['scType'] === 'Archive' || cosData.rowData!.varsJson['scType'] === 'Deep_Archive'"
-                                style="margin-top: 10px"
+                    class="mt-2.5"
                     :closable="false"
                     type="warning"
                     :title="$t('setting.archiveHelper')"
@@ -89,21 +59,16 @@
             <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>
 </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';

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

@@ -1,18 +1,6 @@
 <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>
+    <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-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>
@@ -22,14 +10,10 @@
             <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-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-select v-model.trim="domainProto" class="p-w-100">
                             <el-option label="http" value="http" />
                             <el-option label="https" value="https" />
                         </el-select>
@@ -37,19 +21,14 @@
                 </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-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 style="width: 20%" plain @click="getBuckets(formRef)">
+                <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"
@@ -59,25 +38,19 @@
                     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>
 </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';

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>
+    <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-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-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>
 </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';
 

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

@@ -1,18 +1,6 @@
 <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>
+    <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-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>
@@ -33,14 +21,10 @@
                 </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-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 style="width: 20%" plain @click="getBuckets(formRef)">
+                <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>
@@ -48,21 +32,16 @@
             <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>
 </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';

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

@@ -1,24 +1,6 @@
 <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">
+    <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>
@@ -39,11 +21,7 @@
                     </el-link>
                 </span>
             </el-form-item>
-                        <el-form-item
-                            :label="$t('setting.client_id')"
-                            prop="varsJson.client_id"
-                            :rules="Rules.requiredInput"
-                        >
+            <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
@@ -53,15 +31,11 @@
             >
                 <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-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%">
+                <div class="!w-full">
                     <el-input
                         style="width: calc(100% - 80px)"
                         :rows="3"
@@ -88,21 +62,16 @@
             <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>
-                </span>
         </template>
-        </el-drawer>
-    </div>
+    </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';
 

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

@@ -1,18 +1,6 @@
 <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>
+    <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-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>
@@ -25,7 +13,7 @@
             <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-select v-model.trim="endpointProto" class="!w-full">
                             <el-option label="http" value="http" />
                             <el-option label="https" value="https" />
                         </el-select>
@@ -33,23 +21,15 @@
                 </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-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 style="width: 20%" plain @click="getBuckets(formRef)">
+                <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-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')" />
@@ -58,7 +38,7 @@
                 </el-select>
                 <el-alert
                     v-if="ossData.rowData!.varsJson['scType'] === 'Archive' || ossData.rowData!.varsJson['scType'] === 'ColdArchive'"
-                                style="margin-top: 10px"
+                    class="mt-2.5"
                     :closable="false"
                     type="warning"
                     :title="$t('setting.archiveHelper')"
@@ -67,21 +47,16 @@
             <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>
 </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';

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

@@ -1,18 +1,6 @@
 <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>
+    <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-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>
@@ -28,7 +16,7 @@
             <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-select v-model.trim="endpointProto" class="p-w-100">
                             <el-option label="http" value="http" />
                             <el-option label="https" value="https" />
                         </el-select>
@@ -36,19 +24,15 @@
                 </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-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 style="width: 20%" plain @click="getBuckets(formRef)">
+                <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-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')" />
@@ -57,7 +41,7 @@
                 </el-select>
                 <el-alert
                     v-if="s3Data.rowData!.varsJson['scType'] === 'Archive' || s3Data.rowData!.varsJson['scType'] === 'ColdArchive'"
-                                style="margin-top: 10px"
+                    class="mt-2.5"
                     :closable="false"
                     type="warning"
                     :title="$t('setting.archiveHelper')"
@@ -66,21 +50,16 @@
             <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>
 </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';

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

@@ -1,18 +1,6 @@
 <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>
+    <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-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>
@@ -20,49 +8,27 @@
                 <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-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-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 :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>
 </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';
 

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>
+    <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-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-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"
-                                >
+                    <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-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 :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>
-                </span>
         </template>
-        </el-drawer>
-    </div>
+    </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';
 

frontend/src/views/setting/panel/default-network/index.vue

@@ -1,23 +1,7 @@
 <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>
+    <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-row type="flex" justify="center">
-                    <el-col :span="22">
-                        <el-form-item
-                            :label="$t('setting.defaultNetwork')"
-                            prop="defaultNetwork"
-                            :rules="Rules.requiredSelect"
-                        >
+            <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"
@@ -27,8 +11,6 @@
                     />
                 </el-select>
             </el-form-item>
-                    </el-col>
-                </el-row>
         </el-form>
         <template #footer>
             <span class="dialog-footer">
@@ -38,8 +20,7 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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();

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,7 +19,7 @@
                     </template>
                 </el-table-column>
             </ComplexTable>
-
+        </template>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@@ -38,13 +28,11 @@
                 </el-button>
             </span>
         </template>
-        </el-drawer>
-    </div>
+    </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';

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">
+    <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-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>
 </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);