create app

src/components/RouteCache.vue

@@ -0,0 +1,72 @@
+<template>
+	<router-view v-slot="{ Component, route }">
+		<keep-alive :include="cachedViews">
+			<component :is="Component" :key="route.name" />
+		</keep-alive>
+	</router-view>
+</template>
+
+<script setup lang="ts">
+	import { ref, watch, onMounted } from 'vue'
+	import { useRoute } from 'vue-router'
+	import MyEvent from '@/utils/myEvent'
+
+	const props = defineProps({})
+
+	const route = useRoute()
+
+	// 缓存的组件名称列表
+	const cachedViews = ref<string[]>([])
+
+	// 监听路由变化，管理缓存
+	watch(
+		() => route,
+		(newRoute) => {
+			const routeName = newRoute.name as string
+			const shouldCache = newRoute.meta?.cache === true
+
+			// console.log('🔄 路由变化:', { routeName, shouldCache, currentCache: cachedViews.value })
+
+			if (shouldCache && routeName && !cachedViews.value.includes(routeName)) {
+				cachedViews.value.push(routeName)
+				// console.log('✅ 添加到缓存:', routeName)
+			} else if (!shouldCache && routeName && cachedViews.value.includes(routeName)) {
+				// 从缓存列表中移除
+				const index = cachedViews.value.indexOf(routeName)
+				if (index > -1) {
+					cachedViews.value.splice(index, 1)
+					// console.log('❌ 从缓存移除:', routeName)
+				}
+			}
+		},
+		{ immediate: true, deep: true }
+	)
+
+	// 提供清除缓存的方法
+	const clearCache = (routeName?: string) => {
+		if (routeName) {
+			const index = cachedViews.value.indexOf(routeName)
+			if (index > -1) {
+				cachedViews.value.splice(index, 1)
+			}
+		} else {
+			cachedViews.value = []
+		}
+	}
+
+	onMounted(() => {
+		MyEvent.add('clearAllCache', clearCache)
+	})
+
+	// 暴露方法供外部使用
+	defineExpose({
+		clearCache,
+		cachedViews
+	})
+</script>
+<style lang="less" scoped>
+	.routeCache {
+		width: 100%;
+		height: 100%;
+	}
+</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="c-svg">
+    <svg
+      :class="svgClass"
+      v-bind="$attrs"
+      :style="{ color: color, fontSize: size/10 + 'rem' }"
+    >
+      <use :href="iconName"></use>
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: [Number, String],
+    default: 16,
+  },
+});
+const iconName = computed(() => `#icon-${props.name}`);
+const svgClass = computed(() => {
+  if (props.name) return `svg-icon icon-${props.name}`;
+  return "svg-icon";
+});
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+	color: var(--svg-icon-color);
+}
+.c-svg {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>