初始化

web/src/layouts/frontend/components/header.vue

@@ -0,0 +1,127 @@
+<template>
+    <el-header class="header">
+        <el-row justify="center">
+            <el-col class="header-row" :xs="24" :sm="24" :md="16">
+                <div @click="router.push({ name: '/' })" class="header-logo">
+                    <img src="~assets/logo.png" />
+                    <span class="site-name">{{ siteConfig.siteName }}</span>
+                </div>
+                <div v-if="!memberCenter.state.menuExpand" @click="memberCenter.toggleMenuExpand(true)" class="user-menus-expand hidden-md-and-up">
+                    <Icon name="fa fa-indent" color="var(--el-color-primary)" size="20" />
+                </div>
+
+                <el-scrollbar ref="layoutMenuScrollbarRef" class="hidden-sm-and-down">
+                    <Menu class="frontend-header-menu" :ellipsis="false" mode="horizontal" />
+                </el-scrollbar>
+            </el-col>
+        </el-row>
+        <el-drawer
+            class="ba-aside-drawer"
+            :append-to-body="true"
+            v-model="memberCenter.state.menuExpand"
+            :with-header="false"
+            direction="ltr"
+            :size="memberCenter.state.shrink ? '70%' : '40%'"
+        >
+            <div class="header-row">
+                <div @click="router.push({ name: '/' })" class="header-logo">
+                    <img src="~assets/logo.png" />
+                    <span class="site-name">{{ siteConfig.siteName }}</span>
+                </div>
+                <div @click="memberCenter.toggleMenuExpand(false)" class="user-menus-expand hidden-md-and-up">
+                    <Icon name="fa fa-dedent" color="var(--el-color-primary)" size="20" />
+                </div>
+            </div>
+            <Menu :show-icon="true" mode="vertical" />
+        </el-drawer>
+    </el-header>
+</template>
+
+<script setup lang="ts">
+import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+import { initialize } from '/@/api/frontend/index'
+import Menu from '/@/layouts/frontend/components/menu.vue'
+import { useMemberCenter } from '/@/stores/memberCenter'
+import { layoutMenuScrollbarRef } from '/@/stores/refs'
+import { useSiteConfig } from '/@/stores/siteConfig'
+
+const router = useRouter()
+const siteConfig = useSiteConfig()
+const memberCenter = useMemberCenter()
+
+onBeforeRouteUpdate(() => {
+    memberCenter.toggleMenuExpand(false)
+})
+
+/**
+ * 前端初始化请求，获取站点配置信息，动态路由信息等
+ */
+initialize()
+</script>
+
+<style scoped lang="scss">
+.header {
+    background-color: var(--ba-bg-color-overlay);
+    box-shadow: 0 0 8px rgba(0 0 0 / 8%);
+    .frontend-header-menu {
+        height: var(--el-header-height);
+    }
+}
+.header-row {
+    display: flex;
+    justify-content: space-between;
+    .header-logo {
+        display: flex;
+        height: var(--el-header-height);
+        align-items: center;
+        padding-right: 15px;
+        cursor: pointer;
+        img {
+            height: 34px;
+            width: 34px;
+        }
+        .site-name {
+            padding-left: 4px;
+            font-size: var(--el-font-size-large);
+            white-space: nowrap;
+        }
+    }
+    .user-menus-expand {
+        display: flex;
+        height: var(--el-header-height);
+        align-items: center;
+        justify-content: center;
+    }
+}
+.ba-aside-drawer {
+    .header-row {
+        padding: 10px 20px;
+        background-color: var(--el-color-info-light-9);
+        .header-logo {
+            img {
+                height: 28px;
+                width: 28px;
+            }
+        }
+    }
+}
+
+@at-root html.dark {
+    .header-logo .site-name {
+        color: var(--el-text-color-primary);
+    }
+}
+@media screen and (max-width: 768px) {
+    .user-menus-expand {
+        padding: 0;
+    }
+}
+@media screen and (max-width: 414px) {
+    .frontend-header-menu :deep(.el-sub-menu .el-sub-menu__title) {
+        padding: 0 20px;
+        .el-icon {
+            display: none;
+        }
+    }
+}
+</style>