Merge branch 'master' of https://gitee.com/lvYeJu/lane-crawford-3

.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,59 @@
+<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

@@ -1,4 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router'
+
+/**
+ * 路由缓存机制:
+ * 1. 设置路由的meta属性为{ cache: true }，表示需要缓存
+ * 2. App.vue中使用RouteCache组件，通过路由的name来进行匹配
+ * 3. 路由的name默认是文件名,如果文件名与name不一致,通过defineOptions({ name: 'componentName' })来设置
+ */
+
+
 const router = createRouter({
   history: createWebHistory('/'),
   //   history: createWebHistory(import.meta.env.VITE_APP_URL),
@@ -53,7 +62,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',
@@ -62,7 +72,7 @@ const router = createRouter({
       children: [
         {
           path: '/workshop',
-        	redirect: "/workshop/selectStyle",
+          redirect: '/workshop/selectStyle'
         },
         {
           path: '/workshop/selectStyle',
@@ -95,19 +105,19 @@ 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',
-		  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'),
+          component: () => import('../views/Workshop/creation/index.vue')
         },
         {
           // 完成创建

src/types/define-options.d.ts

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

src/utils/tools.ts

@@ -46,3 +46,50 @@ export {
 	getUniversalZoomLevel,
 	getMousePosition,
 }
+
+
+/**
+ * 下载图片
+ * @param list 图片列表
+ * @param onProgress 下载进度回调
+ * @param onError 下载错误回调
+ * @param onSuccess 下载成功回调
+*/
+export async function DownloadImages(list:Array<{url:string,name:string}>, onProgress?:(count:number,total:number,item:any)=>void, onError?:(count:number,total:number,item:any)=>void, onSuccess?:(successCount:number,errCount:number)=>void) {
+	const total = list.length;
+	let count = 0;
+	let successCount = 0;
+	let errCount = 0;
+	for (let i = 0; i < list.length; i++) {
+		await new Promise((resolve) => {
+			const xhr = new XMLHttpRequest();
+			xhr.open("GET", list[i].url);
+			xhr.responseType = "blob"
+			xhr.onload = function () {
+				count++;
+				if (this.status === 200) {
+					const blob = this.response;
+					const a = document.createElement('a');
+					a.href = URL.createObjectURL(blob);
+					a.download = list[i].name || list[i].url;
+					a.click();
+					successCount++;
+					typeof onProgress === "function" && onProgress(count,total,list[i]);
+					resolve(blob);
+				} else {
+					errCount++;
+					typeof onError === "function" && onError(count,total,list[i]);
+					resolve(true);
+				}
+			};
+			xhr.onerror = function () {
+				count++;
+				errCount++;
+				typeof onError === "function" && onError(count,total,list[i]);
+				resolve(true);
+			};
+			xhr.send();
+		})
+	}
+	typeof onSuccess === "function" && onSuccess(successCount,errCount);
+}

src/views/Workshop/creation/creation-details.vue

@@ -1,15 +1,32 @@
 <script setup lang="ts">
-	import { ref, reactive, onMounted } from 'vue'
+	import { ref, reactive, onMounted, computed } from 'vue'
 	import { useRouter } from 'vue-router'
+	import { DownloadImages } from '@/utils/tools'
 	const router = useRouter()
-	const query = router.currentRoute.value.query
+	const query = computed(() => router.currentRoute.value.query)
 
 	onMounted(() => {})
+	const onDownload = () => {
+		DownloadImages([{
+			url: 'http://118.31.39.42:3000/falls/2.png',
+			name: 'lane-crawford.png'
+		}])
+	}
+	const onEdit = () => {
+		console.log('edit')
+	}
+	
 </script>
 
 <template>
 	<div class="creation-details">
-		{{ query }}
+		<div class="title">Lane Crawford</div>
+		<p class="tip">Business Casual Suits</p>
+		<div class="image"><img src="@/assets/images/workshop/creation-details.png" /></div>
+		<div class="btns">
+			<div class="icon" @click="onDownload"><SvgIcon name="download" size="33" /></div>
+			<button @click="onEdit">Edit</button>
+		</div>
 	</div>
 </template>
 
@@ -17,12 +34,73 @@
 	.creation-details {
 		width: 100%;
 		flex: 1;
-		overflow: hidden;
-		background-color: #e3e3e3;
+		overflow-y: auto;
+		background-color: #f3f3f3;
 		border-radius: 1rem;
-		position: relative;
 		color: #000;
 		display: flex;
 		flex-direction: column;
+		padding: 0 16.3rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		> .title {
+			font-family: satoshiBold;
+			font-size: 9.6rem;
+			line-height: 124%;
+			margin-top: 12rem;
+		}
+		> .tip {
+			margin-top: 2rem;
+			font-family: satoshiRegular;
+			font-size: 4rem;
+			line-height: 124%;
+			color: rgba(0, 0, 0, 0.6);
+		}
+		> .image {
+			margin-top: 13.7rem;
+			width: 100%;
+			height: 73.5rem;
+			border: 0.1rem solid #acacac;
+			background-color: #fff;
+			> img {
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		}
+		> .btns {
+			margin-top: 4.4rem;
+			margin-left: auto;
+			display: flex;
+			align-items: center;
+			> * {
+				margin-left: 1.7rem;
+			}
+			> .icon {
+				width: 7rem;
+				height: 7rem;
+				border-radius: 50%;
+				background-color: #fff;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			> button {
+				box-sizing: content-box;
+				font-family: satoshiBold;
+				// margin: 0 1.8rem;
+				border: none;
+				width: 14.6rem;
+				height: 7rem;
+				border-radius: 7rem;
+				background: #000;
+				font-size: 2.75rem;
+				color: #fff;
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
 	}
 </style>

src/views/Workshop/creation/creation-list.vue

@@ -1,55 +1,121 @@
 <script setup lang="ts">
-	import { ref, reactive, onMounted } from 'vue'
+	import { ref, reactive, onMounted, computed } from 'vue'
 	import MyList from '@/components/myList.vue'
+	import { DownloadImages } from '@/utils/tools'
 
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
 	const emit = defineEmits(['view-type'])
+	const query = router.currentRoute.value.query
 
 	onMounted(() => {
 		emit('view-type', 1)
 	})
+	const list = reactive([])
+	const loading = ref(false)
+	const finish = ref(false)
+	const selectCount = computed(() => list.filter((v) => v.selected).length)
+	const maxSelectCount = 10
+	const isChooseSave = ref(false) //是否选择保存模式
+
+	const onLoad = () => {
+		loading.value = true
+		setTimeout(() => {
+			for (var i = 0; i < 10; i++)
+				list.push({
+					id: list.length,
+					love: Math.random() > 0.5,
+					isAi: Math.random() > 0.5,
+
+					selected: list.length < maxSelectCount,
+					loading: false,
+					downloaded: false
+				})
+			loading.value = false
+			if (list.length >= 30) {
+				finish.value = true
+			}
+		}, 500)
+	}
+	const onItem = (v) => {
+		isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
+	}
 	const onDetailsItem = (v) => {
 		if (v.isAi) return
 		console.log('详情', v)
 		router.push({ query: { did: v.id } })
 	}
-
-	const onDownloadItem = (v) => {
-		console.log('保存', v)		
-	}
 	const onLoveItem = (v) => {
 		// Outfit暂时不可以like
 		console.log('喜欢', v)
 		v.love = !v.love
 	}
-	const onSaveAll = () => {
-		// console.log('保存')
-		for (var i = 1; i <= 20; i++) {
-			const a = document.createElement('a')
-			a.href = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAOsSURBVHgB7VrNahRBEK5dBRE16GJWElEJQbyYkJziTRRBX0OfQRB8AQmaHLwYX8CD68Z4U/AlBK/JNepBIdElcbOz9me6dntqeqa7JzOTPewHlR5nquuv/6prJRqipqmh6LWibUWRon4K9TQPeJtG/ywwz5Sij4r2tCy0nxXNGjyXLTyfFF1RVJe6Tuq2pZmzDE+jdSErDcspOnq6XVX0IoXnQLfPjYAMPNk0GPJQV9GWKVjghKKn5A5O5MkDWXVW1hbG9wIMPxDPLYsD+PdESr/ICEDfwSMDfA7CL1ki2VE0R+45vaBo36J8UvStacciEaBr+vt1i4Esc0rz3BR90b7EhzUheF93qJMbzNMRgt9ZeHco7uSS0R/Ta5aSIzCjvzHPHfH9G+k/5ssFo5MPwDsnZOxY+KRxNvD8RxC6lu91m5zIQ7ALNXIbKPXULMbdouEozqfwyJ3LKzI+cMn5aTiB9jYlp2k95RmAMw8oHogtH8W+cMlZofg6+WUY5gLz7BkyeCutxAEYcIbse7nPesNo4ICT2+gpl+IQuOTAiTcWI25QthM42ZcoeT60tWOVOgBENHSC27NkT0HwrkHx/f/AkF/zUewLHzkwaIaGU8g8sE5TfCTwPCF4uA9GbbDIXdtbkQ6wYQ8F71/dNrWT4LkqjGcHHpEYrW0hbI78TmEGeBeFjF1HHwTpGcVzLjYUZ8Fdik8XNn6ZLAFeo/j21jEM8zEe2BfKNsgPKxTPPk2HzO0StKr7JBxoUDx6XW3QImUDgjBaHUomc9Pkv78/pvj8llst2ieUcWHiTNE0IuReIDPIdQpbRxjF+xZZ/HzPJc+80HQDDLc5silk+gKL8oKiLzRM5r4qOk+eiSUztSnccJ6rLcOYPLAZGrKZDC7KmL/vKZm/2wg8yP35ApN3Cy4UeYwYCcPHGBVUNYXyrJkEf90i8CIdLkyfRYyU4QMNDy7fw4v1tAL1TKXpqaoyV4qeIitzWQdZaRXAmvaqzMpcqXqaFg+RoM1TsZW56RQ9R6kAIhH9Xx6vojK3QfHIF6HnFV5WVZnbKUHPNoYO0ZfDHQqWI9+Z6Du+59HTT/zSkRN9qgaJIASlq6OIsQPHjbEDxw3+wcBEVberQnY/OPBdvMSPaaGVuQXx7reFb7cEPT/wp6rKXLsEPbD9yJW5P+SuzOF5sgQ9TWZ4S+VX5orW0ybLfzUoszJXqp6qKnOl6uHLMuYV8myk2Vl31kjzgLdB4Zf6UD1rNj3/ANvoQHJNUkmmAAAAAElFTkSuQmCC`;
-			a.download = "content.png";
-			a.click()
+	const onDownloadItem = (v) => {
+		// console.log('保存', v)
+		if (v.loading) return
+		v.loading = true
+		v.selected = false
+		const obj = {
+			url: 'http://118.31.39.42:3000/falls/1.png',
+			name: v.id + '.png'
+		}
+		DownloadImages([obj], null, null, () => {
+			v.loading = false
+			v.downloaded = true
+		})
+	}
+	const onSelectItem = (v) => {
+		if (selectCount.value >= maxSelectCount && !v.selected) return
+		v.selected = !v.selected
+	}
+	const onChooseSave = () => {
+		isChooseSave.value = true
+	}
+	const onBackChooseSave = () => {
+		isChooseSave.value = false
+	}
+	const onConfirm = () => {
+		const downloadList = []
+		if (selectCount.value > 0) {
+			list.forEach((v, i) => {
+				if (v.selected) {
+					v.selected = false
+					v.loading = true
+					downloadList.push({
+						index: i,
+						url: 'http://118.31.39.42:3000/falls/1.png',
+						name: i + 1 + '.png'
+					})
+				}
+			})
+		}
+		if (selectCount.value < maxSelectCount) {
+			list.forEach((v) => {
+				if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount)
+					v.selected = true
+			})
+		}
+		if (downloadList.length > 0) {
+			DownloadImages(
+				downloadList,
+				(count, total, item) => {
+					list[item.index].loading = false
+					list[item.index].downloaded = true
+					console.log('下载成功', count, total, item)
+				},
+				(count, total, item) => {
+					list[item.index].loading = false
+					console.log('下载失败', count, total, item)
+				},
+				(successCount, errCount) => {
+					console.log('下载完成', successCount, errCount)
+				}
+			)
 		}
 	}
-
 	const onContinue = () => {
 		router.push({ name: 'end' })
 	}
-	const list = reactive([])
-	const loading = ref(false)
-	const finish = ref(false)
-	const onLoad = () => {
-		loading.value = true
-		setTimeout(() => {
-			for (var i = 0; i < 10; i++)
-				list.push({ id: list.length, love: Math.random() > 0.5, isAi: Math.random() > 0.5 })
-			loading.value = false
-			if (list.length >= 30) {
-				finish.value = true
-			}
-		}, 500)
-	}
 </script>
 
 <template>
@@ -57,7 +123,7 @@
 		<div class="title">Your Creation</div>
 		<div class="list">
 			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
-				<div class="item" v-for="(v, i) in list" :key="i" @click="onDetailsItem(v)">
+				<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)">
 					<img src="@/assets/images/workshop/posture/posture_1.png" />
 					<div class="corner">
 						<div class="ai" v-if="v.isAi">Gen-AI</div>
@@ -67,14 +133,28 @@
 						<div @click.stop="onLoveItem(v)">
 							<SvgIcon :name="`love_${v.love ? '1' : '0'}`" size="27" />
 						</div>
-						<div @click.stop="onDownloadItem(v)"><SvgIcon name="download" size="27" /></div>
+						<div @click.stop="onDownloadItem(v)">
+							<SvgIcon name="download" size="27" v-show="!v.loading" />
+							<van-loading color="#000" size="3rem" v-show="v.loading" />
 						</div>
 					</div>
+					<div class="icon-selected" v-show="isChooseSave && v.selected">
+						<SvgIcon name="modelSelected" size="50" />
+					</div>
+					<div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div>
+					<div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div>
+				</div>
 			</my-list>
 		</div>
-		<div class="btns">
-			<button @click="onSaveAll">Save All</button>
+		<div class="btns" v-show="!query.date">
+			<template v-if="!isChooseSave">
+				<button @click="onChooseSave">Choose to Save</button>
 				<button @click="onContinue">Continue</button>
+			</template>
+			<template v-else>
+				<button @click="onBackChooseSave">Back</button>
+				<button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button>
+			</template>
 		</div>
 	</div>
 </template>
@@ -102,8 +182,10 @@
 			flex: 1;
 			margin: 0 3.8rem;
 			overflow: hidden;
+			--border-radius: 2rem;
 			> .my-list {
 				padding: 0 6rem;
+				--my-list-footer-margin: 0 0 2rem;
 				display: flex;
 				flex-wrap: wrap;
 				justify-content: space-between;
@@ -111,8 +193,8 @@
 				.item {
 					width: 47%;
 					height: 52.9rem;
-					overflow: hidden;
-					border-radius: 2rem;
+					// overflow: hidden;
+					border-radius: var(--border-radius);
 					background-color: #fff;
 					margin-bottom: 4rem;
 					border: 0.1rem solid #000;
@@ -135,6 +217,7 @@
 							font-family: satoshiBold;
 							font-size: 1.6rem;
 							border-bottom-left-radius: 1.6rem;
+							border-top-right-radius: var(--border-radius);
 
 							background-color: #000;
 							color: #fff;
@@ -173,6 +256,27 @@
 							justify-content: center;
 						}
 					}
+					> .icon-selected {
+						position: absolute;
+						bottom: -2rem;
+						right: -2rem;
+						width: 5rem;
+						height: 5rem;
+					}
+					> .download-state {
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						background-color: rgba(0, 0, 0, 0.5);
+						border-radius: var(--border-radius);
+						color: #fff;
+						font-size: 4rem;
+					}
 				}
 			}
 		}
@@ -187,6 +291,7 @@
 				width: 35rem;
 				height: 8rem;
 				border-radius: 1.3rem;
+				border: none;
 				background: #000;
 				font-weight: 400;
 				font-size: 4.2rem;

src/views/Workshop/creation/index.vue

@@ -22,7 +22,7 @@
 <template>
 	<header-title style-type="2" />
 	<creation-list v-show="!detailsID" />
-	<creation-details v-show="detailsID" />
+	<creation-details v-if="detailsID" />
 	<footer-navigation is-placeholder />
 </template>
 

src/views/Workshop/customize.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
-	import { ref } from 'vue'
+	import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
+	import { ref,onMounted } from 'vue'
 	const emit = defineEmits(['viewType'])
 	import { useRouter } from 'vue-router'
 	const router = useRouter()
 
 	const inputText = ref('')
 	const isLoved = ref(false)
-
+	const loading = ref(true)
+	setTimeout(() => {
+		loading.value = false
+	}, 500);
 	const onSend = () => {
 		if (inputText.value === '') return
 		const text = inputText.value
@@ -34,6 +38,8 @@
 
 <template>
 	<header-title style-type="2" />
+	<div class="loading" v-if="loading"><generate-loading /></div>
+	<template v-else>
 		<div class="customize">
 			<div class="title">Customize your Look!</div>
 			<p class="tip">Refine your Look</p>
@@ -66,8 +72,16 @@
 		</div>
 		<footer-navigation />
 	</template>
+</template>
 
 <style scoped lang="less">
+	.loading{
+		width: 100%;
+		margin-top: 36.6rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 	.customize {
 		width: 100%;
 		position: relative;
@@ -189,6 +203,7 @@
 				box-sizing: content-box;
 				font-family: satoshiRegular;
 				// margin: 0 1.8rem;
+				border: none;
 				margin: 0 5.2rem 0 auto;
 				width: 23.8rem;
 				height: 6.9rem;

src/views/Workshop/uploadFace1.vue

@@ -32,7 +32,9 @@
 			</p>
 		</div>
 		<div class="btns">
-			<button class="sandblasted-blurred" @click="handleUploadFace"><span>Upload Face</span></button>
+			<button class="sandblasted-blurred" @click="handleUploadFace">
+				<span>Upload Face</span>
+			</button>
 			<button class="sandblasted-blurred" @click="handleFinish"><span>Finish</span></button>
 		</div>
 	</div>
@@ -54,25 +56,6 @@
 			width: 100%;
 			height: auto;
 		}
-		.btns {
-			width: 100%;
-			display: flex;
-			justify-content: center;
-
-			> button {
-				width: 40rem;
-				height: 8.3rem;
-				border-radius: 0.7rem;
-				border: 0.4rem solid #fff;
-				font-family: satoshiMedium;
-				font-weight: 500;
-				font-size: 5.5rem;
-				margin: 0 1.8rem;
-				color: #fff;
-			}
-		}
-	}
-	.upload-face-1 {
 		> .texts {
 			top: 0;
 			left: 0;
@@ -89,8 +72,16 @@
 			}
 		}
 		>.btns {
+			width: 100%;
+			display: flex;
+			justify-content: center;
 			bottom: 19.7rem;
+			> button {
+				width: 40rem;
+				height: 8.3rem;
+				border-radius: 0.7rem;
+				margin: 0 1.8rem;
+			}
 		}
 	}
-
 </style>

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, // ⚠️ 禁用大小写检查
     "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()],