fix: 前端页面架构重构初版

Yi.Ai.Vue3/src/layouts/index.vue

@@ -1,21 +1,41 @@
 <!-- 主布局 -->
 <script setup lang="ts">
 import type { LayoutType } from '@/config/design';
+import { useRoute } from 'vue-router';
+import { useResponsive } from '@/hooks/useResponsive';
 import LayoutBlankPage from '@/layouts/LayoutBlankPage/index.vue';
-// import { useScreenStore } from '@/hooks/useScreen';
+import LayoutDefault from '@/layouts/LayoutDefault/index.vue';
+import LayoutMobile from '@/layouts/LayoutMobile/index.vue';
 import LayoutVertical from '@/layouts/LayoutVertical/index.vue';
 import { useDesignStore } from '@/stores';
 
 // 这里添加布局类型
-const LayoutComponent: Record<LayoutType, Component> = {
+const LayoutComponent: Record<LayoutType | 'mobile', Component> = {
+  default: LayoutDefault,
   vertical: LayoutVertical,
   blankPage: LayoutBlankPage,
+  mobile: LayoutMobile,
+
 };
 
 const designStore = useDesignStore();
-// const { isMobile } = useScreenStore();
+const { isMobile } = useResponsive();
+const route = useRoute();
+
 /** 获取布局格式 */
-const layout = computed((): LayoutType => designStore.layout);
+const layout = computed((): LayoutType | 'mobile' => {
+  // 移动端强制使用移动布局
+  // if (isMobile.value) {
+  //   return 'mobile';
+  // }
+  // 优先使用路由 meta 中定义的 layout
+  if (route.meta?.layout) {
+    return route.meta.layout as LayoutType;
+  }
+  // 否则使用全局设置的 layout
+  return designStore.layout;
+});
+
 onMounted(() => {
   // 更好的做法是等待所有资源加载
   window.addEventListener('load', () => {