workshop根据不同的viewType设置不同的样式调整到routeChche

src/components/RouteCache.vue

@@ -1,14 +1,17 @@
 <template>
-  <router-view v-slot="{ Component, route }">
-    <keep-alive :include="cachedViews">
-      <component :is="Component" :key="route.name" />
-    </keep-alive>
-  </router-view>
+	<div class="routeCache" :view-type="viewType">
+		<router-view v-slot="{ Component, route }" @view-type="changeViewType">
+			<keep-alive :include="cachedViews">
+				<component :is="Component" :key="route.name" />
+			</keep-alive>
+		</router-view>
+	</div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
 
 const route = useRoute()
 
@@ -51,9 +54,34 @@ const clearCache = (routeName?: string) => {
   }
 }
 
+//根据viewType设置布局风格样式
+const viewType = ref(0)
+const changeViewType = (v: number) => {
+	viewType.value = v
+}
+const router = useRouter()
+watch(
+	() => router.currentRoute.value,
+	() => (viewType.value = 0)
+)
+
+
 // 暴露方法供外部使用
 defineExpose({
   clearCache,
   cachedViews
 })
 </script>
+<style lang="less" scoped>
+	.routeCache {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		font-family: 'satoshiRegular';
+		&[view-type='1'] {
+			display: flex;
+			flex-direction: column;
+			overflow: hidden;
+		}
+	}
+</style>