feat: 页面缓存

.eslintrc.cjs

@@ -27,5 +27,6 @@ rules: {
   ],
   parserOptions: {
     ecmaVersion: 'latest'
-  }
+	},
+	globals: { defineOptions: 'readonly' }
 }

package.json

@@ -44,6 +44,7 @@
     "typescript": "~4.8.4",
     "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
+    "unplugin-vue-define-options": "^3.1.1",
     "vite": "^4.1.4",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.2.0"

src/App.vue

@@ -1,7 +1,11 @@
 <template>
-  <RouterView />
+  <RouteCache />
 </template>
 
+<script setup lang="ts">
+import RouteCache from '@/components/RouteCache.vue'
+</script>
+
 <style lang="less">
 #app{
 	

src/components/RouteCache.vue

@@ -0,0 +1,60 @@
+<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 } from 'vue'
+import { useRoute } from 'vue-router'
+
+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 = []
+  }
+}
+
+// 暴露方法供外部使用
+defineExpose({
+  clearCache,
+  cachedViews
+})
+</script>

src/router/index.ts

@@ -25,7 +25,7 @@ const router = createRouter({
     {
       path: '/stylist',
       name: 'StylistPage',
-      redirect:'/stylist/index',
+      redirect: '/stylist/index',
       component: () => import('@/views/stylist/container.vue'),
       children: [
         {
@@ -53,7 +53,8 @@ const router = createRouter({
     {
       path: '/asistant',
       name: 'asistant',
-      component: () => import('../views/asistant/index.vue')
+      component: () => import('../views/asistant/index.vue'),
+      meta: { cache: true }
     },
     {
       path: '/workshop',
@@ -61,8 +62,8 @@ const router = createRouter({
       component: () => import('../views/Workshop/index.vue'),
       children: [
         {
-        	path: '/workshop',
+          path: '/workshop',
-        	redirect: "/workshop/selectStyle",
+          redirect: '/workshop/selectStyle'
         },
         {
           path: '/workshop/selectStyle',
@@ -95,20 +96,20 @@ const router = createRouter({
           // 自定义创作
           path: '/workshop/customize',
           name: 'customize',
-          component: () => import('../views/Workshop/customize.vue'),
+          component: () => import('../views/Workshop/customize.vue')
         },
         {
           // library
           path: '/workshop/library',
-		  name: 'library',
+          name: 'library',
-		  component: () => import('../views/Workshop/library.vue'),
+          component: () => import('../views/Workshop/library.vue')
+        },
+        {
+          // creation
+          path: '/workshop/creation',
+          name: 'creation',
+          component: () => import('../views/Workshop/creation/index.vue')
         },
-		{
-		  // creation
-		  path: '/workshop/creation',
-		  name: 'creation',
-		  component: () => import('../views/Workshop/creation/index.vue'),
-		},
         {
           // 完成创建
           path: '/workshop/end',

src/types/define-options.d.ts

@@ -0,0 +1,5 @@
+declare global {
+  const defineOptions: <T = Record<string, any>>(options: T) => T
+}
+
+export {}

src/views/asistant/index.vue

@@ -24,10 +24,14 @@ import HeaderTitle from '@/components/HeaderTitle.vue'
 import NoticeList from './components/NoticeList.vue'
 import InputArea from './components/InputArea.vue'
 import GenerateLoading from './components/GenerateLoading.vue'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onActivated } from 'vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 
+defineOptions({
+  name:'asistant'
+})
+
 // 定义NoticeList组件引用类型
 interface NoticeListRef {
   simulateSendMessage: () => void
@@ -77,9 +81,15 @@ const messageList = ref<ChatMessage[]>([
 ])
 
 onMounted(() => {
+  console.log('🚀 组件挂载 - onMounted 触发')
   // handleSendMessage('123')
 })
 
+onActivated(() => {
+  console.log('🔄 缓存页面激活 - onActivated 触发')
+  console.log('当前消息数量:', messageList.value.length)
+})
+
 const handleSendMessage = (message: string): void => {
   console.log('收到消息:', message)
   messageList.value.push({
@@ -98,7 +108,7 @@ const handleContinue = () => {
   isLoading.value = true
   setTimeout(() => {
     router.push('/workshop/selectStyle')
-    // isLoading.value = false
+    isLoading.value = false
   }, 1000)
 }
 </script>

tsconfig.json

@@ -1,11 +1,11 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/types/**/*.d.ts"],
   "compilerOptions": {
-	"forceConsistentCasingInFileNames": false, // ⚠️ 禁用大小写检查
+    "forceConsistentCasingInFileNames": false, // ⚠️ 禁用大小写检查
-	"allowJs": true,
+    "allowJs": true,
     "baseUrl": ".",
-    "types": ["node"],
+    "types": ["node", "unplugin-vue-define-options/macros-global"],
     "paths": {
       "@/*": ["./src/*"],
       "_c/*": ["./src/components/*"]

vite.config.ts

@@ -4,6 +4,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
+import DefineOptions from 'unplugin-vue-define-options/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import path from 'path'
 import { VantResolver } from '@vant/auto-import-resolver'
@@ -16,6 +17,7 @@ import { VantResolver } from '@vant/auto-import-resolver'
 export default defineConfig({
   plugins: [
     vue(),
+    DefineOptions(),
     // ...
     AutoImport({
       resolvers: [VantResolver()],