feat: 项目结构重构优化

src/layouts/LeftLayout.vue

@@ -0,0 +1,125 @@
+<template>
+  <BaseLayout>
+    <!-- 左侧è<EFBFBD>œå<EFBFBD>•æ ?-->
+    <div class="layout__sidebar" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
+      <div :class="{ 'has-logo': showLogo }" class="layout-sidebar">
+        <LayoutLogo v-if="showLogo" :collapse="!isSidebarOpen" />
+        <el-scrollbar>
+          <LayoutSidebar :data="routes" base-path="" />
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div
+      class="layout__main"
+      :class="{
+        hasTagsView: showTagsView,
+        'layout__main--collapsed': !isSidebarOpen,
+      }"
+    >
+      <LayoutNavbar />
+      <LayoutTagsView v-if="showTagsView" />
+      <LayoutMain />
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup lang="ts">
+import { useLayout } from "./useLayout";
+import BaseLayout from "./BaseLayout.vue";
+import LayoutLogo from "./components/LayoutLogo.vue";
+import LayoutNavbar from "./components/LayoutNavbar.vue";
+import LayoutTagsView from "./components/LayoutTagsView.vue";
+import LayoutMain from "./components/LayoutMain.vue";
+import LayoutSidebar from "./components/LayoutSidebar.vue";
+
+const { showTagsView, showLogo, isSidebarOpen, routes } = useLayout();
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  &__sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    width: $sidebar-width;
+    background-color: $menu-background;
+    transition: width 0.28s;
+
+    &--collapsed {
+      width: $sidebar-width-collapsed;
+    }
+
+    .layout-sidebar {
+      position: relative;
+      height: 100%;
+      background-color: var(--menu-background);
+      transition: width 0.28s;
+
+      &.has-logo {
+        .el-scrollbar {
+          height: calc(100vh - $navbar-height);
+        }
+      }
+
+      :deep(.el-menu) {
+        border: none;
+      }
+    }
+  }
+
+  &__main {
+    position: relative;
+    height: 100%;
+    margin-left: $sidebar-width;
+    overflow-y: auto;
+    transition: margin-left 0.28s;
+
+    &--collapsed {
+      margin-left: $sidebar-width-collapsed;
+    }
+
+    .fixed-header {
+      position: sticky;
+      top: 0;
+      z-index: 9;
+      transition: width 0.28s;
+    }
+  }
+}
+
+/* 移动端样�*/
+.mobile {
+  .layout__sidebar {
+    width: $sidebar-width !important;
+    transition:
+      transform 0.28s,
+      width 0s;
+  }
+
+  &.hideSidebar {
+    .layout__sidebar {
+      transform: translateX(-$sidebar-width);
+    }
+  }
+
+  &.openSidebar {
+    .layout__sidebar {
+      transform: translateX(0);
+    }
+  }
+
+  .layout__main {
+    margin-left: 0 !important;
+  }
+}
+
+.hasTagsView {
+  :deep(.app-main) {
+    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+  }
+}
+</style>