feat: 添加默认布局和第二布局,更新路由配置以支持新布局
Some checks failed
/ depcheck (push) Waiting to run
/ playwright (push) Has been cancelled
/ build-and-deploy-to-vercel (push) Has been cancelled

This commit is contained in:
严浩
2024-12-25 00:33:35 +08:00
parent bfbeb326bc
commit cce5d94017
6 changed files with 51 additions and 11 deletions

View File

@ -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>

View File

@ -1,9 +0,0 @@
<template>
<RouterView />
</template>
<script setup lang="ts">
import { RouterView } from 'vue-router';
</script>
<style scoped></style>

8
src/layouts/second.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<div class="layout-tip">[second layout]</div>
<RouterView />
</template>
<script setup lang="ts"></script>
<style scoped></style>

View File

@ -74,3 +74,8 @@ watch(
</template>
</main>
</template>
<route lang="yaml">
meta:
layout: second
</route>

View File

@ -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',

View File

@ -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