wip: 临时提交

src/layout/components/Sidebar/index.vue

@@ -1,45 +0,0 @@
-<template>
-  <div :class="{ 'has-logo': sidebarLogo }">
-    <!-- 混合布局 -->
-    <div v-if="layout == LayoutMode.MIX" class="flex w-full">
-      <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
-      <SidebarMixTopMenu class="flex-1" />
-      <NavbarActions />
-    </div>
-
-    <!-- 顶部布局 || 左侧布局 -->
-    <template v-else>
-      <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
-      <el-scrollbar>
-        <SidebarMenu :data="permissionStore.routes" base-path="" />
-      </el-scrollbar>
-
-      <!-- 顶部导航 -->
-      <NavbarActions v-if="layout == LayoutMode.TOP" />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { LayoutMode } from "@/enums/settings/layout.enum";
-import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
-import NavbarActions from "../NavBar/components/NavbarActions.vue";
-
-const appStore = useAppStore();
-const settingsStore = useSettingsStore();
-const permissionStore = usePermissionStore();
-
-const sidebarLogo = computed(() => settingsStore.sidebarLogo);
-const layout = computed(() => settingsStore.layout);
-
-const isSidebarCollapsed = computed(() => !appStore.sidebar.opened);
-</script>
-
-<style lang="scss" scoped>
-.has-logo {
-  .el-scrollbar {
-    height: calc(100vh - $navbar-height);
-  }
-}
-</style>

src/layouts/components/BaseLayout.vue

@@ -19,7 +19,7 @@
 <script setup lang="ts">
 import { useLayout } from "../composables/useLayout";
 import { useLayoutResponsive } from "../composables/useLayoutResponsive";
-import Settings from "@/layout/components/Settings/index.vue";
+import Settings from "@/layouts/components/Settings/index.vue";
 
 // 布局相关
 const { layoutClass, isShowSettings, isSidebarOpen, closeSidebar } = useLayout();

src/layouts/components/LayoutMenu.vue

@@ -45,7 +45,7 @@ import type { RouteRecordRaw } from "vue-router";
 import { SidebarColor } from "@/enums/settings/theme.enum";
 import { useSettingsStore, useAppStore } from "@/store";
 import { isExternal } from "@/utils/index";
-import SidebarMenuItem from "@/layout/components/Sidebar/components/SidebarMenuItem.vue";
+import SidebarMenuItem from "@/layouts/components/Sidebar/components/SidebarMenuItem.vue";
 import variables from "@/styles/variables.module.scss";
 
 const props = defineProps({

src/layouts/components/LeftLayout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutBase>
+  <BaseLayout>
     <!-- 左侧菜单栏 -->
     <div class="layout__sidebar" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
       <LayoutSidebar :show-logo="isShowLogo" :is-collapsed="!isSidebarOpen">
@@ -21,17 +21,17 @@
       <TagsView v-if="isShowTagsView" />
       <AppMain />
     </div>
-  </LayoutBase>
+  </BaseLayout>
 </template>
 
 <script setup lang="ts">
 import { useLayout } from "../../composables/useLayout";
 import { useLayoutMenu } from "../../composables/useLayoutMenu";
-import LayoutBase from "../LayoutBase.vue";
+import BaseLayout from "../BaseLayout.vue";
 import LayoutSidebar from "../common/LayoutSidebar.vue";
-import NavBar from "@/layout/components/NavBar/index.vue";
+import NavBar from "@/layouts/components/NavBar/index.vue";
-import TagsView from "@/layout/components/TagsView/index.vue";
+import TagsView from "@/layouts/components/TagsView/index.vue";
-import AppMain from "@/layout/components/AppMain/index.vue";
+import AppMain from "@/layouts/components/AppMain/index.vue";
 import SidebarMenu from "../LayoutMenu.vue";
 
 // 布局相关参数
@@ -41,8 +41,8 @@ const { isShowTagsView, isShowLogo, isSidebarOpen, isMobile } = useLayout();
 const { routes } = useLayoutMenu();
 
 // 添加调试日志
-console.log("🔍 LeftSideLayout - isSidebarOpen:", isSidebarOpen.value);
+console.log("🔍 LeftLayout - isSidebarOpen:", isSidebarOpen.value);
-console.log("🔍 LeftSideLayout - isMobile:", isMobile.value);
+console.log("🔍 LeftLayout - isMobile:", isMobile.value);
 </script>
 
 <style lang="scss" scoped>

src/layouts/components/MixLayout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutBase>
+  <BaseLayout>
     <!-- 顶部菜单栏 -->
     <div class="layout__header">
       <div class="layout__header-content">
@@ -54,7 +54,7 @@
         <AppMain />
       </div>
     </div>
-  </LayoutBase>
+  </BaseLayout>
 </template>
 
 <script setup lang="ts">
@@ -62,13 +62,13 @@ import { computed } from "vue";
 import { useRoute } from "vue-router";
 import { useLayout } from "../../composables/useLayout";
 import { useLayoutMenu } from "../../composables/useLayoutMenu";
-import LayoutBase from "../LayoutBase.vue";
+import BaseLayout from "../BaseLayout.vue";
-import SidebarLogo from "@/layout/components/Sidebar/components/SidebarLogo.vue";
+import SidebarLogo from "@/layouts/components/Sidebar/components/SidebarLogo.vue";
-import SidebarMixTopMenu from "@/layout/components/Sidebar/components/SidebarMixTopMenu.vue";
+import SidebarMixTopMenu from "@/layouts/components/Sidebar/components/SidebarMixTopMenu.vue";
-import NavbarActions from "@/layout/components/NavBar/components/NavbarActions.vue";
+import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue";
-import TagsView from "@/layout/components/TagsView/index.vue";
+import TagsView from "@/layouts/components/TagsView/index.vue";
-import AppMain from "@/layout/components/AppMain/index.vue";
+import AppMain from "@/layouts/components/AppMain/index.vue";
-import SidebarMenuItem from "@/layout/components/Sidebar/components/SidebarMenuItem.vue";
+import SidebarMenuItem from "@/layouts/components/Sidebar/components/SidebarMenuItem.vue";
 import Hamburger from "@/components/Hamburger/index.vue";
 import variables from "@/styles/variables.module.scss";
 
@@ -103,7 +103,7 @@ function resolvePath(routePath: string) {
   return `${activeTopMenuPath.value}/${routePath}`;
 }
 
-console.log("🎨 MixMenuLayout rendered");
+console.log("🎨 MixLayout rendered");
 </script>
 
 <style lang="scss" scoped>

src/layouts/components/TopLayout/index.vue

@@ -1,11 +1,9 @@
 <template>
-  <LayoutBase>
+  <BaseLayout>
     <!-- 顶部菜单栏 -->
     <div class="layout__header">
       <LayoutSidebar :show-logo="isShowLogo" :is-collapsed="false">
-        <el-scrollbar>
+        <LayoutMenu :data="routes" menu-mode="horizontal" base-path="" />
-          <SidebarMenu :data="routes" base-path="" menu-mode="horizontal" />
-        </el-scrollbar>
         <NavbarActions />
       </LayoutSidebar>
     </div>
@@ -15,18 +13,18 @@
       <TagsView v-if="isShowTagsView" />
       <AppMain />
     </div>
-  </LayoutBase>
+  </BaseLayout>
 </template>
 
 <script setup lang="ts">
 import { useLayout } from "../../composables/useLayout";
 import { useLayoutMenu } from "../../composables/useLayoutMenu";
-import LayoutBase from "../LayoutBase.vue";
+import BaseLayout from "../BaseLayout.vue";
 import LayoutSidebar from "../common/LayoutSidebar.vue";
-import NavbarActions from "@/layout/components/NavBar/components/NavbarActions.vue";
+import LayoutMenu from "../LayoutMenu.vue";
-import TagsView from "@/layout/components/TagsView/index.vue";
+import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue";
-import AppMain from "@/layout/components/AppMain/index.vue";
+import TagsView from "@/layouts/components/TagsView/index.vue";
-import SidebarMenu from "../LayoutMenu.vue";
+import AppMain from "@/layouts/components/AppMain/index.vue";
 
 // 布局相关参数
 const { isShowTagsView, isShowLogo } = useLayout();
@@ -49,37 +47,17 @@ const { routes } = useLayoutMenu();
       display: flex;
       width: 100% !important;
       height: $navbar-height;
-
-      .el-scrollbar {
-        flex: 1;
-        height: $navbar-height;
-      }
-
-      .el-menu-item,
-      .el-sub-menu__title,
-      .el-menu--horizontal {
-        height: $navbar-height;
-        line-height: $navbar-height;
-      }
     }
   }
 
   &__main {
-    position: relative;
     height: calc(100vh - $navbar-height);
-    margin-left: 0;
     overflow-y: auto;
-
-    .fixed-header {
-      position: sticky;
-      top: 0;
-      z-index: 9;
-    }
   }
 }
 
-:deep(.hasTagsView) {
+.hasTagsView {
-  .app-main {
+  :deep(.app-main) {
     height: calc(100vh - $navbar-height - $tags-view-height) !important;
   }
 }

src/layouts/index.vue

@@ -5,9 +5,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useLayout } from "./composables/useLayout";
-import LeftSideLayout from "./components/LeftSideLayout/index.vue";
+import LeftLayout from "./components/LeftLayout/index.vue";
-import TopMenuLayout from "./components/TopMenuLayout/index.vue";
+import TopLayout from "./components/TopLayout/index.vue";
-import MixMenuLayout from "./components/MixMenuLayout/index.vue";
+import MixLayout from "./components/MixLayout/index.vue";
 import { LayoutMode } from "@/enums/settings/layout.enum";
 
 const { currentLayout } = useLayout();
@@ -16,12 +16,12 @@ const { currentLayout } = useLayout();
 const currentLayoutComponent = computed(() => {
   switch (currentLayout.value) {
     case LayoutMode.TOP:
-      return TopMenuLayout;
+      return TopLayout;
     case LayoutMode.MIX:
-      return MixMenuLayout;
+      return MixLayout;
     case LayoutMode.LEFT:
     default:
-      return LeftSideLayout;
+      return LeftLayout;
   }
 });
 </script>