From cce5d940172927622bf4a631574f276555c3ea2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?=
 <37316281+yanhao98@users.noreply.github.com>
Date: Wed, 25 Dec 2024 00:33:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E7=AC=AC=E4=BA=8C=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=8C=E6=9B=B4=E6=96=B0=E8=B7=AF=E7=94=B1=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E4=BB=A5=E6=94=AF=E6=8C=81=E6=96=B0=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/default-layout.vue             | 25 ++++++++++++++++++++++
 src/layouts/default.vue                    |  9 --------
 src/layouts/second.vue                     |  8 +++++++
 src/pages/data-loaders.[id]/index.page.vue |  5 +++++
 src/pages/index-page.vue                   |  9 ++++++++
 vite.config.plugins.ts                     |  6 ++++--
 6 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 src/layouts/default-layout.vue
 delete mode 100644 src/layouts/default.vue
 create mode 100644 src/layouts/second.vue

diff --git a/src/layouts/default-layout.vue b/src/layouts/default-layout.vue
new file mode 100644
index 0000000..dd56008
--- /dev/null
+++ b/src/layouts/default-layout.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="layout-tip">[default layout]</div>
+  <RouterView />
+</template>
+
+<script setup lang="ts"></script>
+
+<style>
+.layout-tip {
+  position: fixed;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  background-color: #fafafa;
+  border: 1px solid #ccc;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  text-transform: uppercase;
+  opacity: 0.8;
+  background: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
+  backdrop-filter: blur(5px); /* 背景模糊 */
+}
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
deleted file mode 100644
index 6357ca2..0000000
--- a/src/layouts/default.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <RouterView />
-</template>
-
-<script setup lang="ts">
-import { RouterView } from 'vue-router';
-</script>
-
-<style scoped></style>
diff --git a/src/layouts/second.vue b/src/layouts/second.vue
new file mode 100644
index 0000000..47c6744
--- /dev/null
+++ b/src/layouts/second.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="layout-tip">[second layout]</div>
+  <RouterView />
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/pages/data-loaders.[id]/index.page.vue b/src/pages/data-loaders.[id]/index.page.vue
index 43f4057..ebcf862 100644
--- a/src/pages/data-loaders.[id]/index.page.vue
+++ b/src/pages/data-loaders.[id]/index.page.vue
@@ -74,3 +74,8 @@ watch(
     </template>
   </main>
 </template>
+
+<route lang="yaml">
+meta:
+  layout: second
+</route>
diff --git a/src/pages/index-page.vue b/src/pages/index-page.vue
index f797487..e0bcf92 100644
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@@ -1,7 +1,16 @@
 <script lang="tsx" setup>
+import { router } from '@/plugins/router';
+import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts';
 import { routes } from 'vue-router/auto-routes';
 import I18nComp from '../components/i18nComp/index.vue';
 
+const getRoutes = createGetRoutes(router);
+const setupLayoutsResult = setupLayouts(routes);
+
+console.debug(`routes :>> `, routes);
+console.debug(`getRoutes() :>> `, getRoutes()); // 获取路由表但是不包含布局路由
+console.debug(`setupLayoutsResult :>> `, setupLayoutsResult);
+
 useHead({
   // Titles
   title: 'Hello World',
diff --git a/vite.config.plugins.ts b/vite.config.plugins.ts
index 9dcc5b1..c8291a6 100644
--- a/vite.config.plugins.ts
+++ b/vite.config.plugins.ts
@@ -48,8 +48,10 @@ export function Plugins() {
       },
     }), // https://vue-macros.dev/zh-CN/guide/bundler-integration.html
 
-    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
-    Layouts(),
+    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts?tab=readme-ov-file#configuration
+    Layouts({
+      defaultLayout: 'default-layout',
+    }),
 
     // https://github.com/antfu/unocss
     // see uno.config.ts for config