diff --git a/src/composables/index.ts b/src/composables/index.ts
index 2a2a9a8f..7fd51910 100644
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -4,4 +4,4 @@ export { useOnlineCount } from "./websocket/useOnlineCount";
 
 export { useLayout } from "./layout/useLayout";
 export { useLayoutMenu } from "./layout/useLayoutMenu";
-export { useLayoutResponsive } from "./layout/useLayoutResponsive";
+export { useDeviceDetection } from "./layout/useDeviceDetection";
diff --git a/src/composables/layout/useDeviceDetection.ts b/src/composables/layout/useDeviceDetection.ts
index 83554505..8fe9513b 100644
--- a/src/composables/layout/useDeviceDetection.ts
+++ b/src/composables/layout/useDeviceDetection.ts
@@ -4,10 +4,10 @@ import { useAppStore } from "@/store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 
 /**
- * 响应式布局处理
+ * 设备检测和响应式处理
  * 监听屏幕尺寸变化，自动调整设备类型和侧边栏状态
  */
-export function useLayoutResponsive() {
+export function useDeviceDetection() {
   const appStore = useAppStore();
   const { width } = useWindowSize();
 
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index ec5fe380..ffc7717a 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,36 +1,47 @@
 <template>
-  <div class="layout" :class="layoutClass">
-    <!-- 移动端遮罩层 -->
-    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
+  <div class="layout-wrapper">
+    <component :is="currentLayoutComponent" />
 
-    <!-- 布局内容插槽 -->
-    <slot></slot>
+    <!-- 设置面板 - 独立于布局组件 -->
+    <Settings v-if="isShowSettings" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useLayout, useLayoutResponsive } from "@/composables";
+import { useRoute } from "vue-router";
+import { useLayout } from "@/composables/layout/useLayout";
+import LeftLayout from "@/layouts/modes/left/index.vue";
+import TopLayout from "@/layouts/modes/top/index.vue";
+import MixLayout from "@/layouts/modes/mix/index.vue";
+import Settings from "./components/Settings/index.vue";
+import { LayoutMode } from "@/enums/settings/layout.enum";
+import { defaultSettings } from "@/settings";
 
-// 布局相关
-const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
+const { currentLayout } = useLayout();
+const route = useRoute();
 
-// 响应式布局
-const { isMobile } = useLayoutResponsive();
+/// Select the corresponding component based on the current layout mode
+const currentLayoutComponent = computed(() => {
+  const override = route.meta?.layout as LayoutMode | undefined;
+  const layoutToUse = override ?? currentLayout.value;
+  switch (layoutToUse) {
+    case LayoutMode.TOP:
+      return TopLayout;
+    case LayoutMode.MIX:
+      return MixLayout;
+    case LayoutMode.LEFT:
+    default:
+      return LeftLayout;
+  }
+});
+
+/// Whether to show the settings panel
+const isShowSettings = computed(() => defaultSettings.showSettings);
 </script>
 
 <style lang="scss" scoped>
-.layout {
+.layout-wrapper {
   width: 100%;
   height: 100%;
-
-  &__overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-  }
 }
 </style>
diff --git a/src/layouts/modes/BaseLayout.vue b/src/layouts/modes/BaseLayout.vue
new file mode 100644
index 00000000..49337d37
--- /dev/null
+++ b/src/layouts/modes/BaseLayout.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="layout" :class="layoutClass">
+    <!-- 移动端遮罩层 - 当侧边栏打开时显示 -->
+    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
+
+    <!-- 布局内容插槽 - 各种布局模式的具体内容 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLayout, useLayoutResponsive } from "@/composables";
+
+/// Layout-related functionality and state management
+const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
+
+/// Responsive layout handling for mobile devices
+const { isMobile } = useLayoutResponsive();
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  width: 100%;
+  height: 100%;
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
+</style>
diff --git a/src/layouts/modes/base/index.vue b/src/layouts/modes/base/index.vue
new file mode 100644
index 00000000..ea9b1417
--- /dev/null
+++ b/src/layouts/modes/base/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="layout" :class="layoutClass">
+    <!-- 移动端遮罩层 - 当侧边栏打开时显示 -->
+    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
+
+    <!-- 布局内容插槽 - 各种布局模式的具体内容 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLayout, useDeviceDetection } from "@/composables";
+
+/// Layout-related functionality and state management
+const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
+
+/// Device detection for responsive layout
+const { isMobile } = useDeviceDetection();
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  width: 100%;
+  height: 100%;
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
+</style>
diff --git a/src/layouts/modes/index.vue b/src/layouts/modes/index.vue
deleted file mode 100644
index 08d1f41f..00000000
--- a/src/layouts/modes/index.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div class="layout-wrapper">
-    <component :is="currentLayoutComponent" />
-
-    <!-- 设置面板 - 独立于布局组件 -->
-    <Settings v-if="isShowSettings" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRoute } from "vue-router";
-import { useLayout } from "@/composables/layout/useLayout";
-import LeftLayout from "@/layouts/modes/left/index.vue";
-import TopLayout from "@/layouts/modes/top/index.vue";
-import MixLayout from "@/layouts/modes/mix/index.vue";
-import Settings from "../components/Settings/index.vue";
-import { LayoutMode } from "@/enums/settings/layout.enum";
-import { defaultSettings } from "@/settings";
-
-const { currentLayout } = useLayout();
-const route = useRoute();
-
-// 根据当前布局模式选择对应的组件
-const currentLayoutComponent = computed(() => {
-  const override = route.meta?.layout as LayoutMode | undefined;
-  const layoutToUse = override ?? currentLayout.value;
-  switch (layoutToUse) {
-    case LayoutMode.TOP:
-      return TopLayout;
-    case LayoutMode.MIX:
-      return MixLayout;
-    case LayoutMode.LEFT:
-    default:
-      return LeftLayout;
-  }
-});
-
-// 是否显示设置面板
-const isShowSettings = computed(() => defaultSettings.showSettings);
-</script>
-
-<style lang="scss" scoped>
-.layout-wrapper {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/layouts/modes/left/index.vue b/src/layouts/modes/left/index.vue
index af012c91..f341d1ca 100644
--- a/src/layouts/modes/left/index.vue
+++ b/src/layouts/modes/left/index.vue
@@ -30,7 +30,7 @@
 <script setup lang="ts">
 import { useLayout } from "@/composables/layout/useLayout";
 import { useLayoutMenu } from "@/composables/layout/useLayoutMenu";
-import BaseLayout from "@/layouts/index.vue";
+import BaseLayout from "../base/index.vue";
 import AppLogo from "../../components/AppLogo/index.vue";
 import NavBar from "../../components/NavBar/index.vue";
 import TagsView from "../../components/TagsView/index.vue";
diff --git a/src/layouts/modes/mix/index.vue b/src/layouts/modes/mix/index.vue
index ae7c85fe..02c40659 100644
--- a/src/layouts/modes/mix/index.vue
+++ b/src/layouts/modes/mix/index.vue
@@ -58,11 +58,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useWindowSize } from "@vueuse/core";
 import { useLayout, useLayoutMenu } from "@/composables";
-import BaseLayout from "@/layouts/index.vue";
+import BaseLayout from "../base/index.vue";
 import AppLogo from "../../components/AppLogo/index.vue";
 import MixTopMenu from "../../components/Menu/MixTopMenu.vue";
 import NavbarActions from "../../components/NavBar/components/NavbarActions.vue";
diff --git a/src/layouts/modes/top/index.vue b/src/layouts/modes/top/index.vue
index f82e3504..52967743 100644
--- a/src/layouts/modes/top/index.vue
+++ b/src/layouts/modes/top/index.vue
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { useLayout } from "@/composables/layout/useLayout";
 import { useLayoutMenu } from "@/composables/layout/useLayoutMenu";
-import BaseLayout from "@/layouts/index.vue";
+import BaseLayout from "../base/index.vue";
 import AppLogo from "../../components/AppLogo/index.vue";
 import BasicMenu from "../../components/Menu/BasicMenu.vue";
 import NavbarActions from "../../components/NavBar/components/NavbarActions.vue";
diff --git a/src/router/index.ts b/src/router/index.ts
index 1b20750e..2f156190 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import type { App } from "vue";
 import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router";
 
-export const Layout = () => import("@/layouts/modes/index.vue");
+export const Layout = () => import("@/layouts/index.vue");
 
 // 静态路由
 export const constantRoutes: RouteRecordRaw[] = [
diff --git a/src/store/modules/permission-store.ts b/src/store/modules/permission-store.ts
index 8f8b99b4..a4088f7f 100644
--- a/src/store/modules/permission-store.ts
+++ b/src/store/modules/permission-store.ts
@@ -5,7 +5,7 @@ import router from "@/router";
 
 import MenuAPI, { type RouteVO } from "@/api/system/menu-api";
 const modules = import.meta.glob("../../views/**/**.vue");
-const Layout = () => import("@/layouts/modes/index.vue");
+const Layout = () => import("@/layouts/index.vue");
 
 export const usePermissionStore = defineStore("permission", () => {
   // 所有路由（静态路由 + 动态路由）