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>

src/views/Workshop/index.vue

@@ -1,42 +1,10 @@
 <script setup lang="ts">
-	import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
-	import { useRouter } from 'vue-router'
+	import RouteCache from '@/components/RouteCache.vue'
 	//const props = defineProps({
 	//})
 	//const emit = defineEmits([
 	//])
-	let data = reactive({})
-	onMounted(() => {})
-	onUnmounted(() => {})
-	defineExpose({})
-	const {} = toRefs(data)
-	const workshopContent = ref<HTMLDivElement>()
-	const router = useRouter()
-
-	const viewType = ref(0)
-	watch(
-		() => router.currentRoute.value,
-		() => (viewType.value = 0)
-	)
-	const changeViewType = (v: number) => {
-		viewType.value = v
-	}
 </script>
 <template>
-	<div class="workshop" :view-type="viewType">
-		<router-view @view-type="changeViewType" />
-	</div>
-</template>
-<style lang="less" scoped>
-	.workshop {
-		width: 100%;
-		height: 100%;
-		position: relative;
-		font-family: 'satoshiRegular';
-		&[view-type='1'] {
-			display: flex;
-			flex-direction: column;
-			overflow: hidden;
-		}
-	}
-</style>
+	<RouteCache />
+</template>