refactor: ♻️ 布局代码目录结构重构

src/layouts/index.vue

@@ -1,48 +1,36 @@
 <template>
-  <div class="layout-wrapper">
-    <component :is="currentLayoutComponent" />
+  <div class="layout" :class="layoutClass">
+    <!-- 移动端遮罩层 -->
+    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
 
-    <!-- 设置面板 - 独立于布局组件 -->
-    <Settings v-if="isShowSettings" />
+    <!-- 布局内容插槽 -->
+    <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { useRoute } from "vue-router";
-import { useLayout } from "@/composables/layout/useLayout";
-import LeftLayout from "./views/LeftLayout.vue";
-import TopLayout from "./views/TopLayout.vue";
-import MixLayout from "./views/MixLayout.vue";
-import Settings from "./components/Settings/index.vue";
-import { LayoutMode } from "@/enums/settings/layout.enum";
-import { defaultSettings } from "@/settings";
+import { useLayout, useLayoutResponsive } from "@/composables";
 
-const { currentLayout } = useLayout();
-const route = useRoute();
+// 布局相关
+const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
 
-// 根据当前布局模式选择对应的组件
-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);
+// 响应式布局
+const { isMobile } = useLayoutResponsive();
 </script>
 
 <style lang="scss" scoped>
-.layout-wrapper {
+.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>