From 3008b68234659fbc7a7ec81cffbdb6a66de630a8 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Fri, 23 May 2025 13:43:59 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/index.vue       | 45 -------------------
 .../components/AppMain/index.vue              |  0
 .../{LayoutBase.vue => BaseLayout.vue}        |  2 +-
 src/layouts/components/LayoutMenu.vue         |  2 +-
 .../{LeftSideLayout => LeftLayout}/index.vue  | 16 +++----
 .../{MixMenuLayout => MixLayout}/index.vue    | 20 ++++-----
 .../NavBar/components/NavbarActions.vue       |  0
 .../components/NavBar/index.vue               |  0
 .../Settings/components/LayoutSelect.vue      |  0
 .../components/Settings/index.vue             |  0
 .../Sidebar/components/SidebarLogo.vue        |  0
 .../Sidebar/components/SidebarMenu.vue        |  0
 .../Sidebar/components/SidebarMenuItem.vue    |  0
 .../components/SidebarMenuItemTitle.vue       |  0
 .../Sidebar/components/SidebarMixTopMenu.vue  |  0
 .../components/TagsView/index.vue             |  0
 .../{TopMenuLayout => TopLayout}/index.vue    | 42 +++++------------
 src/layouts/index.vue                         | 12 ++---
 18 files changed, 36 insertions(+), 103 deletions(-)
 delete mode 100644 src/layout/components/Sidebar/index.vue
 rename src/{layout => layouts}/components/AppMain/index.vue (100%)
 rename src/layouts/components/{LayoutBase.vue => BaseLayout.vue} (94%)
 rename src/layouts/components/{LeftSideLayout => LeftLayout}/index.vue (85%)
 rename src/layouts/components/{MixMenuLayout => MixLayout}/index.vue (90%)
 rename src/{layout => layouts}/components/NavBar/components/NavbarActions.vue (100%)
 rename src/{layout => layouts}/components/NavBar/index.vue (100%)
 rename src/{layout => layouts}/components/Settings/components/LayoutSelect.vue (100%)
 rename src/{layout => layouts}/components/Settings/index.vue (100%)
 rename src/{layout => layouts}/components/Sidebar/components/SidebarLogo.vue (100%)
 rename src/{layout => layouts}/components/Sidebar/components/SidebarMenu.vue (100%)
 rename src/{layout => layouts}/components/Sidebar/components/SidebarMenuItem.vue (100%)
 rename src/{layout => layouts}/components/Sidebar/components/SidebarMenuItemTitle.vue (100%)
 rename src/{layout => layouts}/components/Sidebar/components/SidebarMixTopMenu.vue (100%)
 rename src/{layout => layouts}/components/TagsView/index.vue (100%)
 rename src/layouts/components/{TopMenuLayout => TopLayout}/index.vue (58%)

diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
deleted file mode 100644
index 67acf469..00000000
--- a/src/layout/components/Sidebar/index.vue
+++ /dev/null
@@ -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>
diff --git a/src/layout/components/AppMain/index.vue b/src/layouts/components/AppMain/index.vue
similarity index 100%
rename from src/layout/components/AppMain/index.vue
rename to src/layouts/components/AppMain/index.vue
diff --git a/src/layouts/components/LayoutBase.vue b/src/layouts/components/BaseLayout.vue
similarity index 94%
rename from src/layouts/components/LayoutBase.vue
rename to src/layouts/components/BaseLayout.vue
index bcd43332..501b1d70 100644
--- a/src/layouts/components/LayoutBase.vue
+++ b/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();
diff --git a/src/layouts/components/LayoutMenu.vue b/src/layouts/components/LayoutMenu.vue
index 2c5ae936..7ec2074b 100644
--- a/src/layouts/components/LayoutMenu.vue
+++ b/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({
diff --git a/src/layouts/components/LeftSideLayout/index.vue b/src/layouts/components/LeftLayout/index.vue
similarity index 85%
rename from src/layouts/components/LeftSideLayout/index.vue
rename to src/layouts/components/LeftLayout/index.vue
index fee1ebcf..66afabac 100644
--- a/src/layouts/components/LeftSideLayout/index.vue
+++ b/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 TagsView from "@/layout/components/TagsView/index.vue";
-import AppMain from "@/layout/components/AppMain/index.vue";
+import NavBar from "@/layouts/components/NavBar/index.vue";
+import TagsView from "@/layouts/components/TagsView/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("🔍 LeftSideLayout - isMobile:", isMobile.value);
+console.log("🔍 LeftLayout - isSidebarOpen:", isSidebarOpen.value);
+console.log("🔍 LeftLayout - isMobile:", isMobile.value);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layouts/components/MixMenuLayout/index.vue b/src/layouts/components/MixLayout/index.vue
similarity index 90%
rename from src/layouts/components/MixMenuLayout/index.vue
rename to src/layouts/components/MixLayout/index.vue
index 30f16b39..46fac677 100644
--- a/src/layouts/components/MixMenuLayout/index.vue
+++ b/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 SidebarLogo from "@/layout/components/Sidebar/components/SidebarLogo.vue";
-import SidebarMixTopMenu from "@/layout/components/Sidebar/components/SidebarMixTopMenu.vue";
-import NavbarActions from "@/layout/components/NavBar/components/NavbarActions.vue";
-import TagsView from "@/layout/components/TagsView/index.vue";
-import AppMain from "@/layout/components/AppMain/index.vue";
-import SidebarMenuItem from "@/layout/components/Sidebar/components/SidebarMenuItem.vue";
+import BaseLayout from "../BaseLayout.vue";
+import SidebarLogo from "@/layouts/components/Sidebar/components/SidebarLogo.vue";
+import SidebarMixTopMenu from "@/layouts/components/Sidebar/components/SidebarMixTopMenu.vue";
+import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue";
+import TagsView from "@/layouts/components/TagsView/index.vue";
+import AppMain from "@/layouts/components/AppMain/index.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>
diff --git a/src/layout/components/NavBar/components/NavbarActions.vue b/src/layouts/components/NavBar/components/NavbarActions.vue
similarity index 100%
rename from src/layout/components/NavBar/components/NavbarActions.vue
rename to src/layouts/components/NavBar/components/NavbarActions.vue
diff --git a/src/layout/components/NavBar/index.vue b/src/layouts/components/NavBar/index.vue
similarity index 100%
rename from src/layout/components/NavBar/index.vue
rename to src/layouts/components/NavBar/index.vue
diff --git a/src/layout/components/Settings/components/LayoutSelect.vue b/src/layouts/components/Settings/components/LayoutSelect.vue
similarity index 100%
rename from src/layout/components/Settings/components/LayoutSelect.vue
rename to src/layouts/components/Settings/components/LayoutSelect.vue
diff --git a/src/layout/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
similarity index 100%
rename from src/layout/components/Settings/index.vue
rename to src/layouts/components/Settings/index.vue
diff --git a/src/layout/components/Sidebar/components/SidebarLogo.vue b/src/layouts/components/Sidebar/components/SidebarLogo.vue
similarity index 100%
rename from src/layout/components/Sidebar/components/SidebarLogo.vue
rename to src/layouts/components/Sidebar/components/SidebarLogo.vue
diff --git a/src/layout/components/Sidebar/components/SidebarMenu.vue b/src/layouts/components/Sidebar/components/SidebarMenu.vue
similarity index 100%
rename from src/layout/components/Sidebar/components/SidebarMenu.vue
rename to src/layouts/components/Sidebar/components/SidebarMenu.vue
diff --git a/src/layout/components/Sidebar/components/SidebarMenuItem.vue b/src/layouts/components/Sidebar/components/SidebarMenuItem.vue
similarity index 100%
rename from src/layout/components/Sidebar/components/SidebarMenuItem.vue
rename to src/layouts/components/Sidebar/components/SidebarMenuItem.vue
diff --git a/src/layout/components/Sidebar/components/SidebarMenuItemTitle.vue b/src/layouts/components/Sidebar/components/SidebarMenuItemTitle.vue
similarity index 100%
rename from src/layout/components/Sidebar/components/SidebarMenuItemTitle.vue
rename to src/layouts/components/Sidebar/components/SidebarMenuItemTitle.vue
diff --git a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue b/src/layouts/components/Sidebar/components/SidebarMixTopMenu.vue
similarity index 100%
rename from src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
rename to src/layouts/components/Sidebar/components/SidebarMixTopMenu.vue
diff --git a/src/layout/components/TagsView/index.vue b/src/layouts/components/TagsView/index.vue
similarity index 100%
rename from src/layout/components/TagsView/index.vue
rename to src/layouts/components/TagsView/index.vue
diff --git a/src/layouts/components/TopMenuLayout/index.vue b/src/layouts/components/TopLayout/index.vue
similarity index 58%
rename from src/layouts/components/TopMenuLayout/index.vue
rename to src/layouts/components/TopLayout/index.vue
index 9f7607c0..a3be577a 100644
--- a/src/layouts/components/TopMenuLayout/index.vue
+++ b/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>
-          <SidebarMenu :data="routes" base-path="" menu-mode="horizontal" />
-        </el-scrollbar>
+        <LayoutMenu :data="routes" menu-mode="horizontal" base-path="" />
         <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 TagsView from "@/layout/components/TagsView/index.vue";
-import AppMain from "@/layout/components/AppMain/index.vue";
-import SidebarMenu from "../LayoutMenu.vue";
+import LayoutMenu from "../LayoutMenu.vue";
+import NavbarActions from "@/layouts/components/NavBar/components/NavbarActions.vue";
+import TagsView from "@/layouts/components/TagsView/index.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) {
-  .app-main {
+.hasTagsView {
+  :deep(.app-main) {
     height: calc(100vh - $navbar-height - $tags-view-height) !important;
   }
 }
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 6c7209a3..97d31741 100644
--- a/src/layouts/index.vue
+++ b/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 TopMenuLayout from "./components/TopMenuLayout/index.vue";
-import MixMenuLayout from "./components/MixMenuLayout/index.vue";
+import LeftLayout from "./components/LeftLayout/index.vue";
+import TopLayout from "./components/TopLayout/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>