feat: 修改菜单样式

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']

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;
+                border-radius: 4px;
-                bottom: 0;
+                top: 13px;
-                left: 0;
+                bottom: 15px;
+                left: 12px;
                 width: 4px;
+                height: 14px;
                 content: '';
                 background: $primary-color;
             }
         }
     }
-}
+
-.menu-href {
+    :deep .el-sub-menu {
-    display: inline-block;
+        margin: 10px;
-    width: 100%;
+
-    height: 100%;
+        span {
-    color: #bdbdc0;
+            color: rgba(31, 35, 41, 1);
-    text-decoration: none;
+        }
+        .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;
+        }
+    }
 }

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((): string => {
-const activeMenu = computed(() => {
     const { meta, path } = route;
-    if (meta.activeMenu) {
+    if (typeof meta.activeMenu === 'string') {
         return meta.activeMenu;
     }
     return path;

frontend/src/layout/layout-content.vue

@@ -57,8 +57,9 @@
                 <div v-if="slots.prompt">
                     <slot name="prompt"></slot>
                 </div>
-
+                <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;

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': (

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

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

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

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

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

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

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

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

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

frontend/src/views/website/ssl/index.vue

@@ -1,4 +1,5 @@
 <template>
+    <div>
         <RouterButton :buttons="routerButton" />
         <LayoutContent :title="$t('website.ssl')">
             <template #prompt>
@@ -43,7 +44,12 @@
                         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
+                        :label="$t('website.brand')"
+                        fix
+                        show-overflow-tooltip
+                        prop="type"
+                    ></el-table-column>
                     <el-table-column
                         prop="expireDate"
                         :label="$t('website.expireDate')"
@@ -65,10 +71,12 @@
             <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';

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

frontend/src/views/website/website/config/basic/domain/create/index.vue

@@ -1,12 +1,18 @@
 <template>
-    <el-dialog
+    <el-drawer
         v-model="open"
         :close-on-click-modal="false"
-        :title="$t('website.create')"
+        :title="$t('website.addDomain')"
-        width="40%"
+        size="40%"
         :before-close="handleClose"
     >
-        <el-form ref="domainForm" label-position="right" :model="domain" label-width="130px" :rules="rules">
+        <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>
@@ -14,6 +20,8 @@
                         <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';

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

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

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

frontend/src/views/website/website/index.vue

@@ -1,4 +1,5 @@
 <template>
+    <div>
         <RouterButton
             :buttons="[
                 {
@@ -141,10 +142,12 @@
         <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';