From a90a9fce5455089dbd4d0239c735c64844b70895 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Tue, 31 Jan 2023 18:52:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components.d.ts                      |   2 -
 .../src/components/app-layout/menu/index.scss |  91 +++++-
 .../src/components/app-layout/menu/index.vue  |   5 +-
 frontend/src/layout/layout-content.vue        |  10 +-
 frontend/src/styles/var.scss                  |   2 +
 frontend/src/views/app-store/apps/index.vue   |   2 +-
 .../file-management/change-role/index.vue     |   1 +
 .../host/file-management/create/index.vue     |   1 +
 .../src/views/login/components/login-form.vue |   2 +-
 .../views/setting/backup-account/index.vue    |   6 +-
 .../views/website/ssl/acme-account/index.vue  |   1 +
 .../src/views/website/ssl/create/index.vue    |   1 +
 .../src/views/website/ssl/detail/index.vue    |   1 +
 .../views/website/ssl/dns-account/index.vue   |   1 +
 frontend/src/views/website/ssl/index.vue      | 140 +++++----
 .../views/website/website/backup/index.vue    |   1 +
 .../config/basic/domain/create/index.vue      |  33 +-
 .../website/config/basic/limit-conn/index.vue |   8 +-
 .../views/website/website/create/index.vue    |   1 +
 .../views/website/website/default/index.vue   |   1 +
 frontend/src/views/website/website/index.vue  | 281 +++++++++---------
 21 files changed, 342 insertions(+), 249 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index dad9fe68a..a2be18cd0 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -36,7 +36,6 @@ declare module 'vue' {
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElDraw: typeof import('element-plus/es')['ElDraw']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@@ -44,7 +43,6 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormColumn: typeof import('element-plus/es')['ElFormColumn']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
diff --git a/frontend/src/components/app-layout/menu/index.scss b/frontend/src/components/app-layout/menu/index.scss
index cca63c1c2..ce0a75fa7 100644
--- a/frontend/src/components/app-layout/menu/index.scss
+++ b/frontend/src/components/app-layout/menu/index.scss
@@ -3,17 +3,16 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background-color: #191a20;
+    background-color: $menu-backgroup-color;
+
     transition: all 0.3s ease;
     .logo {
         box-sizing: border-box;
         height: 55px;
-        border-bottom: 1px solid #282a35;
-        box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
         span {
             font-size: 22px;
             font-weight: bold;
-            color: #dadada;
+            color: $primary-color;
             white-space: nowrap;
         }
         img {
@@ -37,27 +36,89 @@
         text-align: center;
     }
 }
+
 .el-menu,
 .el-menu--popup {
+    padding: 4px;
+    background: none !important;
+
     .el-menu-item {
+        border-radius: 4px !important;
+        background-color: $menu-item-backgroup-color;
+        margin: 10px;
+        height: 44px !important;
+
+        span {
+            color: rgba(31, 35, 41, 1);
+        }
+        .el-icon {
+            color: rgba(31, 35, 41, 1);
+        }
+
         &.is-active {
-            background-color: #060708;
+            background-color: #ffffff;
+
+            border: 2px solid $primary-color;
+
+            span {
+                color: $primary-color;
+            }
+
+            .el-icon {
+                color: $primary-color;
+            }
+
             &::before {
                 position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
+                border-radius: 4px;
+                top: 13px;
+                bottom: 15px;
+                left: 12px;
                 width: 4px;
+                height: 14px;
                 content: '';
                 background: $primary-color;
             }
         }
     }
-}
-.menu-href {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    color: #bdbdc0;
-    text-decoration: none;
+
+    :deep .el-sub-menu {
+        margin: 10px;
+
+        span {
+            color: rgba(31, 35, 41, 1);
+        }
+        .el-icon {
+            color: rgba(31, 35, 41, 1);
+        }
+
+        .el-sub-menu__title {
+            background-color: $menu-item-backgroup-color !important;
+            height: 44px;
+            border-radius: 4px !important;
+        }
+
+        &.is-opened,
+        &.is-active {
+            .el-sub-menu__title {
+                span {
+                    color: $primary-color;
+                }
+
+                .el-icon {
+                    color: $primary-color;
+                }
+            }
+        }
+
+        .el-menu {
+            background-color: $menu-item-backgroup-color;
+        }
+        .el-menu-item {
+            border-radius: 4px !important;
+            margin-left: 0px !important;
+            min-width: 100% !important;
+            height: 44px;
+        }
+    }
 }
diff --git a/frontend/src/components/app-layout/menu/index.vue b/frontend/src/components/app-layout/menu/index.vue
index fd6167059..4a4b98249 100644
--- a/frontend/src/components/app-layout/menu/index.vue
+++ b/frontend/src/components/app-layout/menu/index.vue
@@ -48,10 +48,9 @@ import { GlobalStore } from '@/store';
 const route = useRoute();
 const menuStore = MenuStore();
 const globalStore = GlobalStore();
-// const activeMenu = computed((): string => route.path);
-const activeMenu = computed(() => {
+const activeMenu = computed((): string => {
     const { meta, path } = route;
-    if (meta.activeMenu) {
+    if (typeof meta.activeMenu === 'string') {
         return meta.activeMenu;
     }
     return path;
diff --git a/frontend/src/layout/layout-content.vue b/frontend/src/layout/layout-content.vue
index 26aa74221..867b36d1a 100644
--- a/frontend/src/layout/layout-content.vue
+++ b/frontend/src/layout/layout-content.vue
@@ -57,8 +57,9 @@
                 <div v-if="slots.prompt">
                     <slot name="prompt"></slot>
                 </div>
-
-                <slot name="main"></slot>
+                <div class="main">
+                    <slot name="main"></slot>
+                </div>
             </el-card>
         </div>
         <slot></slot>
@@ -99,7 +100,6 @@ const showBack = computed(() => {
 }
 
 .content-container__toolbar {
-    // @include flex-row(space-between, center);
     margin-top: 30px;
 }
 
@@ -116,6 +116,10 @@ const showBack = computed(() => {
     margin-top: 20px;
 }
 
+.main {
+    margin-top: 20px;
+}
+
 .divider {
     margin-top: 20px;
     border: 0;
diff --git a/frontend/src/styles/var.scss b/frontend/src/styles/var.scss
index 1bcd46a96..87bf1e149 100644
--- a/frontend/src/styles/var.scss
+++ b/frontend/src/styles/var.scss
@@ -1,4 +1,6 @@
 $primary-color: #005eeb;
+$menu-backgroup-color: rgba(0, 94, 235, 0.1);
+$menu-item-backgroup-color: rgba(255, 255, 255, 0.3);
 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
     $colors: (
         'primary': (
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index f75caea05..aed3edf86 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -33,7 +33,7 @@
             </el-row>
         </template>
         <template #rightButton>
-            <el-button @click="sync" link :plain="true">{{ $t('app.syncAppList') }}</el-button>
+            <el-button @click="sync" type="primary" link :plain="true">{{ $t('app.syncAppList') }}</el-button>
         </template>
         <template #main>
             <el-row :gutter="5">
diff --git a/frontend/src/views/host/file-management/change-role/index.vue b/frontend/src/views/host/file-management/change-role/index.vue
index f57ed531d..06e2391f4 100644
--- a/frontend/src/views/host/file-management/change-role/index.vue
+++ b/frontend/src/views/host/file-management/change-role/index.vue
@@ -19,6 +19,7 @@
 </template>
 
 <script setup lang="ts">
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { ref } from 'vue';
 import { File } from '@/api/interface/file';
 import { ChangeFileMode } from '@/api/modules/files';
diff --git a/frontend/src/views/host/file-management/create/index.vue b/frontend/src/views/host/file-management/create/index.vue
index 5a9b95992..b6befa172 100644
--- a/frontend/src/views/host/file-management/create/index.vue
+++ b/frontend/src/views/host/file-management/create/index.vue
@@ -60,6 +60,7 @@
 </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 { ElMessage, FormInstance, FormRules } from 'element-plus';
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 516fb940f..b095defa4 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -385,7 +385,7 @@ onMounted(() => {
             margin-top: 10px;
         }
 
-        & ::v-deep .el-input__inner {
+        & :deep .el-input__inner {
             border-radius: 0;
         }
     }
diff --git a/frontend/src/views/setting/backup-account/index.vue b/frontend/src/views/setting/backup-account/index.vue
index 9ccd1603b..03786dc97 100644
--- a/frontend/src/views/setting/backup-account/index.vue
+++ b/frontend/src/views/setting/backup-account/index.vue
@@ -59,7 +59,7 @@
                                     {{ s3Data.bucket }}
                                 </el-form-item>
                                 <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFormat(0, 0, s3Data.createdAt) }}
+                                    {{ dateFormatSimple(s3Data.createdAt) }}
                                 </el-form-item>
                             </div>
                             <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
@@ -101,7 +101,7 @@
                                     {{ ossData.bucket }}
                                 </el-form-item>
                                 <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFormat(0, 0, ossData.createdAt) }}
+                                    {{ dateFormatSimple(ossData.createdAt) }}
                                 </el-form-item>
                             </div>
                             <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
@@ -145,7 +145,7 @@
                                     {{ minioData.bucket }}
                                 </el-form-item>
                                 <el-form-item :label="$t('commons.table.createdAt')">
-                                    {{ dateFormat(0, 0, minioData.createdAt) }}
+                                    {{ dateFormatSimple(minioData.createdAt) }}
                                 </el-form-item>
                             </div>
                             <el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
diff --git a/frontend/src/views/website/ssl/acme-account/index.vue b/frontend/src/views/website/ssl/acme-account/index.vue
index eb22da39d..d70b7a32d 100644
--- a/frontend/src/views/website/ssl/acme-account/index.vue
+++ b/frontend/src/views/website/ssl/acme-account/index.vue
@@ -21,6 +21,7 @@
     </el-drawer>
 </template>
 <script lang="ts" setup>
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Website } from '@/api/interface/website';
 import { DeleteAcmeAccount, SearchAcmeAccount } from '@/api/modules/website';
 import ComplexTable from '@/components/complex-table/index.vue';
diff --git a/frontend/src/views/website/ssl/create/index.vue b/frontend/src/views/website/ssl/create/index.vue
index 03c6446e3..950c2c806 100644
--- a/frontend/src/views/website/ssl/create/index.vue
+++ b/frontend/src/views/website/ssl/create/index.vue
@@ -92,6 +92,7 @@
 </template>
 
 <script lang="ts" setup>
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Website } from '@/api/interface/website';
 import { CreateSSL, GetDnsResolve, SearchAcmeAccount, SearchDnsAccount } from '@/api/modules/website';
 import { Rules } from '@/global/form-rules';
diff --git a/frontend/src/views/website/ssl/detail/index.vue b/frontend/src/views/website/ssl/detail/index.vue
index da8fe2168..ab00b191f 100644
--- a/frontend/src/views/website/ssl/detail/index.vue
+++ b/frontend/src/views/website/ssl/detail/index.vue
@@ -62,6 +62,7 @@
     </el-drawer>
 </template>
 <script lang="ts" setup>
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { GetSSL } from '@/api/modules/website';
 import { ref } from 'vue';
 import { dateFormatSimple, getProvider } from '@/utils/util';
diff --git a/frontend/src/views/website/ssl/dns-account/index.vue b/frontend/src/views/website/ssl/dns-account/index.vue
index 7538de3e2..67a5cfed9 100644
--- a/frontend/src/views/website/ssl/dns-account/index.vue
+++ b/frontend/src/views/website/ssl/dns-account/index.vue
@@ -34,6 +34,7 @@
 </template>
 
 <script lang="ts" setup>
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import Create from './create/index.vue';
 import { Website } from '@/api/interface/website';
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index aa263e949..f5a892f56 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -1,74 +1,82 @@
 <template>
-    <RouterButton :buttons="routerButton" />
-    <LayoutContent :title="$t('website.ssl')">
-        <template #prompt>
-            <el-alert type="info" :closable="false">
-                <template #default>
-                    <span><span v-html="$t('website.encryptHelper')"></span></span>
-                </template>
-            </el-alert>
-        </template>
-        <template #toolbar>
-            <el-button type="primary" @click="openSSL()">
-                {{ $t('ssl.create') }}
-            </el-button>
-            <el-button type="primary" plain @click="openAcmeAccount()">
-                {{ $t('website.acmeAccountManage') }}
-            </el-button>
-            <el-button type="primary" plain @click="openDnsAccount()">
-                {{ $t('website.dnsAccountManage') }}
-            </el-button>
-        </template>
-        <template #main>
-            <br />
-            <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
-                <el-table-column
-                    :label="$t('website.domain')"
-                    fix
-                    show-overflow-tooltip
-                    prop="primaryDomain"
-                ></el-table-column>
-                <el-table-column
-                    :label="$t('website.otherDomains')"
-                    fix
-                    show-overflow-tooltip
-                    prop="domains"
-                ></el-table-column>
-                <el-table-column :label="$t('ssl.provider')" fix show-overflow-tooltip prop="provider">
-                    <template #default="{ row }">{{ getProvider(row.provider) }}</template>
-                </el-table-column>
-                <el-table-column
-                    :label="$t('ssl.acmeAccount')"
-                    fix
-                    show-overflow-tooltip
-                    prop="acmeAccount.email"
-                ></el-table-column>
-                <el-table-column :label="$t('website.brand')" fix show-overflow-tooltip prop="type"></el-table-column>
-                <el-table-column
-                    prop="expireDate"
-                    :label="$t('website.expireDate')"
-                    :formatter="dateFormat"
-                    show-overflow-tooltip
-                />
-                <fu-table-operations
-                    :ellipsis="3"
-                    :buttons="buttons"
-                    :label="$t('commons.table.operate')"
-                    fixed="right"
-                    fix
-                />
-            </ComplexTable>
-        </template>
-        <DnsAccount ref="dnsAccountRef"></DnsAccount>
-        <AcmeAccount ref="acmeAccountRef"></AcmeAccount>
-        <Create ref="sslCreateRef" @close="search()"></Create>
-        <Renew ref="renewRef" @close="search()"></Renew>
-        <Detail ref="detailRef"></Detail>
-    </LayoutContent>
+    <div>
+        <RouterButton :buttons="routerButton" />
+        <LayoutContent :title="$t('website.ssl')">
+            <template #prompt>
+                <el-alert type="info" :closable="false">
+                    <template #default>
+                        <span><span v-html="$t('website.encryptHelper')"></span></span>
+                    </template>
+                </el-alert>
+            </template>
+            <template #toolbar>
+                <el-button type="primary" @click="openSSL()">
+                    {{ $t('ssl.create') }}
+                </el-button>
+                <el-button type="primary" plain @click="openAcmeAccount()">
+                    {{ $t('website.acmeAccountManage') }}
+                </el-button>
+                <el-button type="primary" plain @click="openDnsAccount()">
+                    {{ $t('website.dnsAccountManage') }}
+                </el-button>
+            </template>
+            <template #main>
+                <br />
+                <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
+                    <el-table-column
+                        :label="$t('website.domain')"
+                        fix
+                        show-overflow-tooltip
+                        prop="primaryDomain"
+                    ></el-table-column>
+                    <el-table-column
+                        :label="$t('website.otherDomains')"
+                        fix
+                        show-overflow-tooltip
+                        prop="domains"
+                    ></el-table-column>
+                    <el-table-column :label="$t('ssl.provider')" fix show-overflow-tooltip prop="provider">
+                        <template #default="{ row }">{{ getProvider(row.provider) }}</template>
+                    </el-table-column>
+                    <el-table-column
+                        :label="$t('ssl.acmeAccount')"
+                        fix
+                        show-overflow-tooltip
+                        prop="acmeAccount.email"
+                    ></el-table-column>
+                    <el-table-column
+                        :label="$t('website.brand')"
+                        fix
+                        show-overflow-tooltip
+                        prop="type"
+                    ></el-table-column>
+                    <el-table-column
+                        prop="expireDate"
+                        :label="$t('website.expireDate')"
+                        :formatter="dateFormat"
+                        show-overflow-tooltip
+                    />
+                    <fu-table-operations
+                        :ellipsis="3"
+                        :buttons="buttons"
+                        :label="$t('commons.table.operate')"
+                        fixed="right"
+                        fix
+                    />
+                </ComplexTable>
+            </template>
+            <DnsAccount ref="dnsAccountRef"></DnsAccount>
+            <AcmeAccount ref="acmeAccountRef"></AcmeAccount>
+            <Create ref="sslCreateRef" @close="search()"></Create>
+            <Renew ref="renewRef" @close="search()"></Renew>
+            <Detail ref="detailRef"></Detail>
+        </LayoutContent>
+    </div>
 </template>
 
 <script lang="ts" setup>
 import LayoutContent from '@/layout/layout-content.vue';
+import RouterButton from '@/components/router-button/index.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import { onMounted, reactive, ref } from 'vue';
 import { DeleteSSL, SearchSSL } from '@/api/modules/website';
diff --git a/frontend/src/views/website/website/backup/index.vue b/frontend/src/views/website/website/backup/index.vue
index cad7e5739..0aa9edad7 100644
--- a/frontend/src/views/website/website/backup/index.vue
+++ b/frontend/src/views/website/website/backup/index.vue
@@ -33,6 +33,7 @@
 </template>
 
 <script lang="ts" setup>
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import { reactive, ref } from 'vue';
 import { dateFormat } from '@/utils/util';
diff --git a/frontend/src/views/website/website/config/basic/domain/create/index.vue b/frontend/src/views/website/website/config/basic/domain/create/index.vue
index af2fba94d..1ccd1e76a 100644
--- a/frontend/src/views/website/website/config/basic/domain/create/index.vue
+++ b/frontend/src/views/website/website/config/basic/domain/create/index.vue
@@ -1,19 +1,27 @@
 <template>
-    <el-dialog
+    <el-drawer
         v-model="open"
         :close-on-click-modal="false"
-        :title="$t('website.create')"
-        width="40%"
+        :title="$t('website.addDomain')"
+        size="40%"
         :before-close="handleClose"
     >
-        <el-form ref="domainForm" label-position="right" :model="domain" label-width="130px" :rules="rules">
-            <el-form-item :label="$t('website.domain')" prop="domain">
-                <el-input v-model="domain.domain"></el-input>
-            </el-form-item>
-            <el-form-item :label="$t('website.port')" prop="port">
-                <el-input v-model.number="domain.port"></el-input>
-            </el-form-item>
-        </el-form>
+        <template #header>
+            <DrawerHeader :header="$t('website.addDomain')" :back="handleClose" />
+        </template>
+
+        <el-row>
+            <el-col :span="22" :offset="1">
+                <el-form ref="domainForm" label-position="top" :model="domain" :rules="rules">
+                    <el-form-item :label="$t('website.domain')" prop="domain">
+                        <el-input v-model="domain.domain"></el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('website.port')" prop="port">
+                        <el-input v-model.number="domain.port"></el-input>
+                    </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>
@@ -22,10 +30,11 @@
                 </el-button>
             </span>
         </template>
-    </el-dialog>
+    </el-drawer>
 </template>
 
 <script lang="ts" setup>
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { CreateDomain } from '@/api/modules/website';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/website/config/basic/limit-conn/index.vue b/frontend/src/views/website/website/config/basic/limit-conn/index.vue
index a577aa367..69a1317a9 100644
--- a/frontend/src/views/website/website/config/basic/limit-conn/index.vue
+++ b/frontend/src/views/website/website/config/basic/limit-conn/index.vue
@@ -1,17 +1,17 @@
 <template>
     <el-row :gutter="20">
         <el-col :span="8" :offset="1">
+            <el-form-item prop="enable" :label="$t('website.enableOrNot')">
+                <el-switch v-model="enable" @change="changeEnable"></el-switch>
+            </el-form-item>
             <el-form
                 ref="limitForm"
-                label-position="right"
+                label-position="left"
                 :model="form"
                 :rules="rules"
                 :loading="loading"
                 label-width="100px"
             >
-                <el-form-item prop="enable" :label="$t('website.enableOrNot')">
-                    <el-switch v-model="enable" @change="changeEnable"></el-switch>
-                </el-form-item>
                 <el-form-item :label="$t('website.limit')">
                     <el-select v-model="ruleKey" @change="changeRule(ruleKey)">
                         <el-option
diff --git a/frontend/src/views/website/website/create/index.vue b/frontend/src/views/website/website/create/index.vue
index 38ab8d622..c8f7e18bd 100644
--- a/frontend/src/views/website/website/create/index.vue
+++ b/frontend/src/views/website/website/create/index.vue
@@ -168,6 +168,7 @@
 </template>
 
 <script lang="ts" setup name="CreateWebSite">
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { App } from '@/api/interface/app';
 import { Website } from '@/api/interface/website';
 import { GetApp, GetAppDetail, SearchApp, GetAppInstalled } from '@/api/modules/app';
diff --git a/frontend/src/views/website/website/default/index.vue b/frontend/src/views/website/website/default/index.vue
index 0d7cf72a3..7259c4094 100644
--- a/frontend/src/views/website/website/default/index.vue
+++ b/frontend/src/views/website/website/default/index.vue
@@ -37,6 +37,7 @@
     </el-drawer>
 </template>
 <script lang="ts" setup>
+import DrawerHeader from '@/components/drawer-header/index.vue';
 import { Website } from '@/api/interface/Website';
 import { ChangeDefaultServer, ListWebsites } from '@/api/modules/website';
 import i18n from '@/lang';
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index 29fb25d4e..3f3a6c807 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -1,150 +1,153 @@
 <template>
-    <RouterButton
-        :buttons="[
-            {
-                label: i18n.global.t('website.website'),
-                path: '/websites',
-            },
-        ]"
-    />
-    <br />
-    <LayoutContent :title="$t('website.website')" v-loading="loading">
-        <template #app>
-            <AppStatus
-                :app-key="'nginx'"
-                @setting="setting"
-                v-model:loading="loading"
-                @is-exist="checkExist"
-            ></AppStatus>
-        </template>
-        <template v-if="nginxIsExist && !openNginxConfig" #toolbar>
-            <el-row :class="{ mask: nginxStatus != 'Running' }">
-                <el-col :span="20">
-                    <el-button type="primary" @click="openCreate">
-                        {{ $t('website.create') }}
-                    </el-button>
-                    <el-button type="primary" plain @click="openGroup">
-                        {{ $t('website.group') }}
-                    </el-button>
-                    <el-button type="primary" plain @click="openDefault">
-                        {{ $t('website.defaulServer') }}
-                    </el-button>
-                </el-col>
-                <el-col :span="4">
-                    <div class="search-button">
-                        <el-input
-                            v-model="req.name"
-                            clearable
-                            @clear="search()"
-                            suffix-icon="Search"
-                            @keyup.enter="search()"
-                            @blur="search()"
-                            :placeholder="$t('commons.button.search')"
-                        ></el-input>
-                    </div>
-                </el-col>
-            </el-row>
-        </template>
-        <template v-if="nginxIsExist && !openNginxConfig" #search>
-            <div :class="{ mask: nginxStatus != 'Running' }">
-                <el-select v-model="req.websiteGroupId" @change="search()">
-                    <el-option :label="$t('website.allGroup')" :value="0"></el-option>
-                    <el-option
-                        v-for="(group, index) in groups"
-                        :key="index"
-                        :label="group.name"
-                        :value="group.id"
-                    ></el-option>
-                </el-select>
-            </div>
-        </template>
-        <template v-if="nginxIsExist && !openNginxConfig" #main>
-            <ComplexTable
-                :pagination-config="paginationConfig"
-                :data="data"
-                @search="search()"
-                :class="{ mask: nginxStatus != 'Running' }"
-            >
-                <el-table-column :label="$t('commons.table.name')" fix show-overflow-tooltip prop="primaryDomain">
-                    <template #default="{ row }">
-                        <el-link type="primary" @click="openConfig(row.id)">
-                            {{ row.primaryDomain }}
-                        </el-link>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('commons.table.type')" fix prop="type">
-                    <template #default="{ row }">
-                        {{ $t('website.' + row.type) }}
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('commons.table.status')" prop="status">
-                    <template #default="{ row }">
-                        <el-button
-                            v-if="row.status === 'Running'"
-                            link
-                            type="success"
-                            @click="opWebsite('stop', row.id)"
-                        >
-                            {{ $t('commons.status.running') }}
+    <div>
+        <RouterButton
+            :buttons="[
+                {
+                    label: i18n.global.t('website.website'),
+                    path: '/websites',
+                },
+            ]"
+        />
+        <br />
+        <LayoutContent :title="$t('website.website')" v-loading="loading">
+            <template #app>
+                <AppStatus
+                    :app-key="'nginx'"
+                    @setting="setting"
+                    v-model:loading="loading"
+                    @is-exist="checkExist"
+                ></AppStatus>
+            </template>
+            <template v-if="nginxIsExist && !openNginxConfig" #toolbar>
+                <el-row :class="{ mask: nginxStatus != 'Running' }">
+                    <el-col :span="20">
+                        <el-button type="primary" @click="openCreate">
+                            {{ $t('website.create') }}
                         </el-button>
-                        <el-button v-else link type="danger" @click="opWebsite('start', row.id)">
-                            {{ $t('commons.status.stopped') }}
+                        <el-button type="primary" plain @click="openGroup">
+                            {{ $t('website.group') }}
                         </el-button>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('website.remark')" prop="remark"></el-table-column>
-                <el-table-column :label="$t('website.protocol')" prop="protocol"></el-table-column>
-                <el-table-column :label="$t('website.expireDate')">
-                    <template #default="{ row, $index }">
-                        <div v-show="row.showdate">
-                            <el-date-picker
-                                v-model="row.expireDate"
-                                type="date"
-                                :disabled-date="checkDate"
-                                :shortcuts="shortcuts"
-                                :clearable="false"
-                                :default-value="setDate(row.expireDate)"
-                                :ref="(el) => setdateRefs(el, $index)"
-                                @change="submitDate(row)"
-                                @visible-change="(visibility:boolean) => pickerVisibility(visibility, row)"
-                                size="small"
-                            ></el-date-picker>
+                        <el-button type="primary" plain @click="openDefault">
+                            {{ $t('website.defaulServer') }}
+                        </el-button>
+                    </el-col>
+                    <el-col :span="4">
+                        <div class="search-button">
+                            <el-input
+                                v-model="req.name"
+                                clearable
+                                @clear="search()"
+                                suffix-icon="Search"
+                                @keyup.enter="search()"
+                                @blur="search()"
+                                :placeholder="$t('commons.button.search')"
+                            ></el-input>
                         </div>
-                        <div v-show="!row.showdate">
-                            <span v-if="isEver(row.expireDate)" @click="openDatePicker(row, $index)">
-                                {{ $t('website.neverExpire') }}
-                            </span>
-                            <span v-else @click="openDatePicker(row, $index)">
-                                {{ dateFormatSimple(row.expireDate) }}
-                            </span>
-                        </div>
-                    </template>
-                </el-table-column>
-                <fu-table-operations
-                    :ellipsis="10"
-                    width="260px"
-                    :buttons="buttons"
-                    :label="$t('commons.table.operate')"
-                    fixed="right"
-                    fix
-                />
-            </ComplexTable>
-            <el-card width="30%" v-if="nginxStatus != 'Running'" class="mask-prompt">
-                <span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['OpenResty']) }}</span>
-            </el-card>
-        </template>
-    </LayoutContent>
-    <NginxConfig v-if="openNginxConfig" v-loading="loading" :containerName="containerName" :status="nginxStatus" />
-    <CreateWebSite ref="createRef" @close="search" />
-    <DeleteWebsite ref="deleteRef" @close="search" />
-    <WebSiteGroup ref="groupRef" />
-    <UploadDialog ref="uploadRef" />
-    <BackupRecords ref="dialogBackupRef" />
-    <DefaultServer ref="defaultRef" />
+                    </el-col>
+                </el-row>
+            </template>
+            <template v-if="nginxIsExist && !openNginxConfig" #search>
+                <div :class="{ mask: nginxStatus != 'Running' }">
+                    <el-select v-model="req.websiteGroupId" @change="search()">
+                        <el-option :label="$t('website.allGroup')" :value="0"></el-option>
+                        <el-option
+                            v-for="(group, index) in groups"
+                            :key="index"
+                            :label="group.name"
+                            :value="group.id"
+                        ></el-option>
+                    </el-select>
+                </div>
+            </template>
+            <template v-if="nginxIsExist && !openNginxConfig" #main>
+                <ComplexTable
+                    :pagination-config="paginationConfig"
+                    :data="data"
+                    @search="search()"
+                    :class="{ mask: nginxStatus != 'Running' }"
+                >
+                    <el-table-column :label="$t('commons.table.name')" fix show-overflow-tooltip prop="primaryDomain">
+                        <template #default="{ row }">
+                            <el-link type="primary" @click="openConfig(row.id)">
+                                {{ row.primaryDomain }}
+                            </el-link>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('commons.table.type')" fix prop="type">
+                        <template #default="{ row }">
+                            {{ $t('website.' + row.type) }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('commons.table.status')" prop="status">
+                        <template #default="{ row }">
+                            <el-button
+                                v-if="row.status === 'Running'"
+                                link
+                                type="success"
+                                @click="opWebsite('stop', row.id)"
+                            >
+                                {{ $t('commons.status.running') }}
+                            </el-button>
+                            <el-button v-else link type="danger" @click="opWebsite('start', row.id)">
+                                {{ $t('commons.status.stopped') }}
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('website.remark')" prop="remark"></el-table-column>
+                    <el-table-column :label="$t('website.protocol')" prop="protocol"></el-table-column>
+                    <el-table-column :label="$t('website.expireDate')">
+                        <template #default="{ row, $index }">
+                            <div v-show="row.showdate">
+                                <el-date-picker
+                                    v-model="row.expireDate"
+                                    type="date"
+                                    :disabled-date="checkDate"
+                                    :shortcuts="shortcuts"
+                                    :clearable="false"
+                                    :default-value="setDate(row.expireDate)"
+                                    :ref="(el) => setdateRefs(el, $index)"
+                                    @change="submitDate(row)"
+                                    @visible-change="(visibility:boolean) => pickerVisibility(visibility, row)"
+                                    size="small"
+                                ></el-date-picker>
+                            </div>
+                            <div v-show="!row.showdate">
+                                <span v-if="isEver(row.expireDate)" @click="openDatePicker(row, $index)">
+                                    {{ $t('website.neverExpire') }}
+                                </span>
+                                <span v-else @click="openDatePicker(row, $index)">
+                                    {{ dateFormatSimple(row.expireDate) }}
+                                </span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <fu-table-operations
+                        :ellipsis="10"
+                        width="260px"
+                        :buttons="buttons"
+                        :label="$t('commons.table.operate')"
+                        fixed="right"
+                        fix
+                    />
+                </ComplexTable>
+                <el-card width="30%" v-if="nginxStatus != 'Running'" class="mask-prompt">
+                    <span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['OpenResty']) }}</span>
+                </el-card>
+            </template>
+        </LayoutContent>
+        <NginxConfig v-if="openNginxConfig" v-loading="loading" :containerName="containerName" :status="nginxStatus" />
+        <CreateWebSite ref="createRef" @close="search" />
+        <DeleteWebsite ref="deleteRef" @close="search" />
+        <WebSiteGroup ref="groupRef" />
+        <UploadDialog ref="uploadRef" />
+        <BackupRecords ref="dialogBackupRef" />
+        <DefaultServer ref="defaultRef" />
+    </div>
 </template>
 
 <script lang="ts" setup>
 import LayoutContent from '@/layout/layout-content.vue';
+import RouterButton from '@/components/router-button/index.vue';
 import BackupRecords from '@/views/website/website/backup/index.vue';
 import UploadDialog from '@/views/website/website/upload/index.vue';
 import DefaultServer from '@/views/website/website/default/index.vue';