initHeader

frontend/src/layouts/LayoutClassic/index.scss

@@ -0,0 +1,60 @@
+.el-container {
+  width: 100%;
+  height: 100%;
+  :deep(.el-header) {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 55px;
+    padding: 0 15px 0 0;
+    background-color: var(--el-header-bg-color);
+    border-bottom: 1px solid var(--el-header-border-color);
+    .header-lf {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      white-space: nowrap;
+      .logo {
+        flex-shrink: 0;
+        width: 210px;
+        margin-right: 16px;
+        .logo-img {
+          width: 28px;
+          object-fit: contain;
+          margin-right: 6px;
+        }
+        .logo-text {
+          font-size: 21.5px;
+          font-weight: bold;
+          color: var(--el-header-logo-text-color);
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .classic-content {
+    display: flex;
+    height: calc(100% - 55px);
+    :deep(.el-aside) {
+      width: auto;
+      background-color: var(--el-menu-bg-color);
+      border-right: 1px solid var(--el-aside-border-color);
+      .aside-box {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        transition: width 0.3s ease;
+        .el-menu {
+          width: 100%;
+          overflow-x: hidden;
+          border-right: none;
+        }
+      }
+    }
+    .classic-main {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

frontend/src/layouts/LayoutClassic/index.vue

@@ -0,0 +1,62 @@
+<!-- 经典布局 -->
+<template>
+  <el-container class="layout">
+    <el-header>
+      <div class="header-lf mask-image">
+        <div class="logo flx-center">
+          <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
+          <span class="logo-text">{{ title }}</span>
+        </div>
+        <ToolBarLeft />
+      </div>
+      <div class="header-ri">
+        <ToolBarRight />
+      </div>
+    </el-header>
+    <el-container class="classic-content">
+      <el-aside>
+        <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
+          <el-scrollbar>
+            <el-menu
+              :router="false"
+              :default-active="activeMenu"
+              :collapse="isCollapse"
+              :unique-opened="accordion"
+              :collapse-transition="false"
+            >
+              <SubMenu :menu-list="menuList" />
+            </el-menu>
+          </el-scrollbar>
+        </div>
+      </el-aside>
+      <el-container class="classic-main">
+        <Main />
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts" name="layoutClassic">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useAuthStore } from "@/stores/modules/auth";
+import { useGlobalStore } from "@/stores/modules/global";
+import Main from "@/layouts/components/Main/index.vue";
+import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
+import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
+import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
+
+const title = import.meta.env.VITE_GLOB_APP_TITLE;
+
+const route = useRoute();
+const authStore = useAuthStore();
+const globalStore = useGlobalStore();
+const accordion = computed(() => globalStore.accordion);
+const isCollapse = computed(() => globalStore.isCollapse);
+const menuList = computed(() => authStore.showMenuListGet);
+const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>