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

2025-10-20 17:01:55 +08:00
parent acf5de942d fe2b1194bb
commit c3b956adf8
16 changed files with 400 additions and 193 deletions
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -28,14 +28,40 @@ button.sandblasted-blurred::after {
 button.sandblasted-blurred:active {
  opacity: 0.7;
 }
-html:root {
-  --van-dialog-width: 90rem;
-  --van-dialog-font-size: 5rem;
-  --van-dialog-header-line-height: 150%;
-  --van-dialog-message-font-size: 3.5rem;
-  --van-dialog-message-line-height: 150%;
-  --van-button-default-font-size: 4rem;
-  --van-dialog-button-height: 9rem;
-  --van-dialog-message-padding: 3rem 2.5rem;
-  --van-dialog-has-title-message-padding-top: 2.5rem;
+@media (prefers-color-scheme: dark) {
+  :root,
+  body {
+    background: white !important;
+    color: black !important;
+  }
+}
+html:root {
+  --van-overlay-background: rgba(0, 0, 0, 0.4);
+  --van-dialog-width: 45rem;
+  --van-dialog-font-size: 2.83rem;
+  --van-dialog-header-font-weight: 600;
+  --van-dialog-header-line-height: 95%;
+  --van-text-color: #000;
+  --van-dialog-header-padding-top: 3rem;
+  --van-dialog-message-font-size: 2rem;
+  --van-dialog-message-line-height: 130%;
+  --van-dialog-has-title-message-text-color: #000;
+  --van-button-default-font-size: 2.8rem;
+  --van-dialog-button-height: 6.8rem;
+  --van-dialog-message-padding: 3.5rem;
+  --van-dialog-has-title-message-padding-top: 2.5rem;
+  --van-button-default-color: #1B73E7;
+  --van-dialog-confirm-button-text-color: #1B73E7;
+}
+.van-toast__text {
+  font-size: 4rem;
+  height: 5rem;
+  line-height: 5rem;
+  padding: 0 2rem;
+}
+.van-toast__text {
+  font-size: 4rem;
+  height: 5rem;
+  line-height: 5rem;
+  padding: 0 2rem;
 }
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -23,6 +23,7 @@ button.sandblasted-blurred {
 	&::before {
 		backdrop-filter: blur(9.5rem);
 	}
+
 	&::after {
 		opacity: 0.1;
 		background: url('@/assets/images/customer_form_bg.png');
@@ -34,23 +35,38 @@ button.sandblasted-blurred {
 	}
 }

+//只使用浅色模式
+@media (prefers-color-scheme: dark) {
+	:root, body {
+		background: white !important;
+		color: black !important;
+	}
+}

 // vant dialog
 html:root {
-	--van-dialog-width: 90rem;
-	--van-dialog-font-size: 5rem;
-	--van-dialog-header-line-height: 150%;
-	--van-dialog-message-font-size: 3.5rem;
-	--van-dialog-message-line-height: 150%;
-	--van-button-default-font-size: 4rem;
-	--van-dialog-button-height: 9rem;
-	--van-dialog-message-padding: 3rem 2.5rem;
+	--van-overlay-background: rgba(0, 0, 0, 0.4);
+	--van-dialog-width: 45rem;
+	--van-dialog-font-size: 2.83rem;
+	--van-dialog-header-font-weight: 600;
+	--van-dialog-header-line-height: 95%;
+	--van-text-color: #000;
+	--van-dialog-header-padding-top: 3rem;
+	--van-dialog-message-font-size: 2rem;
+	--van-dialog-message-line-height: 130%;
+	--van-dialog-has-title-message-text-color: #000;
+	--van-button-default-font-size: 2.8rem;
+	--van-dialog-button-height: 6.8rem;
+	--van-dialog-message-padding: 3.5rem;
 	--van-dialog-has-title-message-padding-top: 2.5rem;
+	--van-button-default-color: #1B73E7;
+	--van-dialog-confirm-button-text-color: #1B73E7;
 }

+
 .van-toast__text {
-  font-size: 4rem;
-  height: 5rem;
-  line-height: 5rem;
-  padding: 0 2rem;
+	font-size: 4rem;
+	height: 5rem;
+	line-height: 5rem;
+	padding: 0 2rem;
 }
--- a/src/components/FooterNavigation.vue
+++ b/src/components/FooterNavigation.vue
@@ -18,8 +18,10 @@
 	}
 	const onHome = (nav) => {
 		showConfirmDialog({
-			title: 'Tip',
-			message: 'The current page has not been saved. Do you want to return to the home page?'
+			title: 'Return to Home Page?',
+			message: 'You have unsaved changes. Your progress will be lost.',
+			confirmButtonText: 'Yes',
+			cancelButtonText: 'Cancel',
 		})
 			.then(() => {
 				nav.path && router.push(nav.path)
--- a/src/components/selectStyle/selectItem.vue
+++ b/src/components/selectStyle/selectItem.vue
@@ -64,10 +64,10 @@ const {} = toRefs(data);
 				</div>
 			</div>
 			<div class="btn">
-				<div>
+				<!-- <div>
 					<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="30" />
 					<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="30" />
-				</div>
+				</div> -->
 				<div>
 					<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" />
 				</div>
@@ -75,9 +75,9 @@ const {} = toRefs(data);
 					<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="30" />
 					<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="30" />
 				</div> -->
-				<div>
+				<!-- <div>
 					<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="30" />
-				</div>
+				</div> -->
 			</div>
 		</div>
 		
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -107,7 +107,7 @@ const router = createRouter({
 		  // creation
 		  path: '/workshop/creation',
 		  name: 'creation',
-		  component: () => import('../views/Workshop/creation.vue'),
+		  component: () => import('../views/Workshop/creation/index.vue'),
 		},
        {
          // 完成创建
--- a/src/views/Workshop/creation.vue
+++ b/src/views/Workshop/creation.vue
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-	import { ref, reactive, onMounted } from 'vue'
-	import HeaderTitle from '@/components/HeaderTitle.vue'
-	import FooterNavigation from '@/components/FooterNavigation.vue'
-	import MyList from '@/components/myList.vue'
-
-	import { useRouter } from 'vue-router'
-	const router = useRouter()
-	const emit = defineEmits(['view-type'])
-
-	onMounted(() => {
-		emit('view-type', 1)
-	})
-	const onSave = () => {
-		console.log('保存')
-	}
-
-	const onContinue = () => {
-		router.push({ name: 'end' })
-	}
-	const list = reactive([{},{},{},{},{},{}])
-	const loading = ref(false)
-	const finish = ref(false)
-	const onLoad = () => {
-		loading.value = true
-		setTimeout(() => {
-			list.push({},{},{},{},{},{})
-			loading.value = false
-			if (list.length >= 20) {
-				finish.value = true
-			}
-		}, 1500)
-	}
-</script>
-
-<template>
-	<header-title style-type="2" />
-	<div class="creation">
-		<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">
-					<img src="@/assets/images/workshop/posture/posture_1.png" />
-				</div>
-			</my-list>
-		</div>
-		<div class="btns">
-			<button @click="onSave">Save</button>
-			<button @click="onContinue">Continue</button>
-		</div>
-	</div>
-	<footer-navigation is-placeholder />
-</template>
-
-<style scoped lang="less">
-	.creation {
-		width: 100%;
-		flex: 1;
-		overflow: hidden;
-		background-color: #e3e3e3;
-		border-radius: 1rem;
-		position: relative;
-		color: #000;
-		display: flex;
-		flex-direction: column;
-		> .title {
-			font-family: satoshiRegular;
-			font-size: 9rem;
-			text-align: center;
-			line-height: 124%;
-			font-weight: 500;
-			margin: 7.2rem 0;
-		}
-		> .list {
-			flex: 1;
-			margin: 0 3.8rem;
-			overflow: hidden;
-			> .my-list {
-				padding: 0 6rem;
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: space-between;
-				// justify-content: space-around;
-				.item {
-					width: 47%;
-					height: 52.9rem;
-					overflow: hidden;
-					border-radius: 2rem;
-					background-color: #fff;
-					margin-bottom: 4rem;
-					border: 0.1rem solid #000;
-					> img {
-						width: 100%;
-						height: 100%;
-						object-fit: contain;
-					}
-				}
-			}
-		}
-		> .btns {
-			margin: 9rem 0;
-			display: flex;
-			justify-content: center;
-
-			> button {
-				box-sizing: content-box;
-				font-family: satoshiRegular;
-				width: 35rem;
-				height: 8rem;
-				border-radius: 1.3rem;
-				background: #000;
-				font-weight: 400;
-				font-size: 4.2rem;
-				margin: 0 3.25rem;
-				color: #fff;
-				&:active {
-					opacity: 0.7;
-				}
-			}
-		}
-	}
-</style>
--- a/src/views/Workshop/creation/creation-details.vue
+++ b/src/views/Workshop/creation/creation-details.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+	import { ref, reactive, onMounted } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const query = router.currentRoute.value.query
+
+	onMounted(() => {})
+</script>
+
+<template>
+	<div class="creation-details">
+		{{ query }}
+	</div>
+</template>
+
+<style scoped lang="less">
+	.creation-details {
+		width: 100%;
+		flex: 1;
+		overflow: hidden;
+		background-color: #e3e3e3;
+		border-radius: 1rem;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+	}
+</style>
--- a/src/views/Workshop/creation/creation-list.vue
+++ b/src/views/Workshop/creation/creation-list.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+	import { ref, reactive, onMounted } from 'vue'
+	import MyList from '@/components/myList.vue'
+
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const emit = defineEmits(['view-type'])
+
+	onMounted(() => {
+		emit('view-type', 1)
+	})
+	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 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>
+	<div class="creation-list">
+		<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)">
+					<img src="@/assets/images/workshop/posture/posture_1.png" />
+					<div class="corner">
+						<div class="ai" v-if="v.isAi">Gen-AI</div>
+						<div class="tryon" v-else>Try-on</div>
+					</div>
+					<div class="icons">
+						<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>
+				</div>
+			</my-list>
+		</div>
+		<div class="btns">
+			<button @click="onSaveAll">Save All</button>
+			<button @click="onContinue">Continue</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.creation-list {
+		width: 100%;
+		flex: 1;
+		overflow: hidden;
+		background-color: #e3e3e3;
+		border-radius: 1rem;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+		> .title {
+			font-family: satoshiRegular;
+			font-size: 9rem;
+			text-align: center;
+			line-height: 124%;
+			font-weight: 500;
+			margin: 7.2rem 0;
+		}
+		> .list {
+			flex: 1;
+			margin: 0 3.8rem;
+			overflow: hidden;
+			> .my-list {
+				padding: 0 6rem;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				// justify-content: space-around;
+				.item {
+					width: 47%;
+					height: 52.9rem;
+					overflow: hidden;
+					border-radius: 2rem;
+					background-color: #fff;
+					margin-bottom: 4rem;
+					border: 0.1rem solid #000;
+					position: relative;
+					> img {
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+					> .corner {
+						position: absolute;
+						top: 0;
+						right: 0;
+						> div {
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							width: 12.6rem;
+							height: 3.6rem;
+							font-family: satoshiBold;
+							font-size: 1.6rem;
+							border-bottom-left-radius: 1.6rem;
+
+							background-color: #000;
+							color: #fff;
+						}
+						> .ai {
+							color: #646464;
+							background: linear-gradient(
+									137.95deg,
+									#7a96ac 2.28%,
+									#eaeff3 19.8%,
+									#c2d4e1 32.94%,
+									#ffffff 50.16%,
+									#d4dee5 62.15%,
+									#abbdc8 78.69%,
+									#bccad7 95.24%
+								),
+								linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5));
+						}
+					}
+					> .icons {
+						position: absolute;
+						bottom: 0;
+						right: 1.7rem;
+						display: flex;
+						align-items: center;
+						flex-direction: column;
+						> div {
+							margin-bottom: 2.2rem;
+							width: 5rem;
+							height: 5rem;
+							border-radius: 1rem;
+							border: 0.2rem solid #000;
+							--svg-icon-color: #000;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+						}
+					}
+				}
+			}
+		}
+		> .btns {
+			margin: 9rem 0;
+			display: flex;
+			justify-content: center;
+
+			> button {
+				box-sizing: content-box;
+				font-family: satoshiRegular;
+				width: 35rem;
+				height: 8rem;
+				border-radius: 1.3rem;
+				background: #000;
+				font-weight: 400;
+				font-size: 4.2rem;
+				margin: 0 3.25rem;
+				color: #fff;
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+</style>
--- a/src/views/Workshop/creation/index.vue
+++ b/src/views/Workshop/creation/index.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+	import { ref, reactive, onMounted, watch, computed } from 'vue'
+	import HeaderTitle from '@/components/HeaderTitle.vue'
+	import FooterNavigation from '@/components/FooterNavigation.vue'
+	import CreationList from '@/views/Workshop/creation/creation-list.vue'
+	import CreationDetails from '@/views/Workshop/creation/creation-details.vue'
+
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const detailsID = computed(() => router.currentRoute.value.query.did);
+	const emit = defineEmits(['view-type'])
+	watch(
+		() => router.currentRoute.value,
+		() => emit('view-type', 1)
+	)
+	
+	onMounted(() => {
+		emit('view-type', 1)
+	})
+</script>
+
+<template>
+	<header-title style-type="2" />
+	<creation-list v-show="!detailsID" />
+	<creation-details v-show="detailsID" />
+	<footer-navigation is-placeholder />
+</template>
+
+<style scoped lang="less">
+</style>
--- a/src/views/Workshop/customize.vue
+++ b/src/views/Workshop/customize.vue
@@ -27,7 +27,7 @@
 	const onRetry = () => {
 		router.back()
 	}
-	const onContinue = () => {
+	const onFinish = () => {
 		router.push({ name: 'creation' })
 	}
 </script>
@@ -49,20 +49,19 @@
 		</div>
 		<div class="card">
 			<img src="@/assets/images/workshop/posture/posture_1.png" />
-			<div class="select-box">
+			<!-- <div class="select-box">
 				<div class="icon"><SvgIcon name="history" size="35" /></div>
 				<div class="label">History</div>
 				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
-			</div>
+			</div> -->
 			<div class="icons">
 				<div @click="onLove"><SvgIcon :name="`love_${isLoved ? 1 : 0}`" size="35" /></div>
 				<div @click="onReload"><SvgIcon name="reload" size="35" /></div>
-				<div @click="onDownload"><SvgIcon name="download" size="35" /></div>
+				<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
 			</div>
 		</div>
 		<div class="btns">
-			<button @click="onRetry">Re-try?</button>
-			<button @click="onContinue">Continue</button>
+			<button @click="onFinish">Finish</button>
 		</div>
 	</div>
 	<footer-navigation />
@@ -88,13 +87,14 @@
 			font-family: satoshiRegular;
 			font-size: 3.74rem;
 			line-height: 124%;
+			color: rgba(0, 0, 0, 0.6);
 		}
 		> .input-box {
-			margin-top: 7.3rem;
+			margin-top: 6rem;
 			width: 87.5rem;
 			height: 8.3rem;
 			border-radius: 0.5rem;
-			border: 0.4rem solid #000000;
+			border: 0.3rem solid #000000;
 			box-sizing: content-box;
 			display: flex;
 			align-items: center;
@@ -127,9 +127,9 @@
 			}
 		}
 		> .card {
-			margin-top: 6.9rem;
-			width: 79.8rem;
-			height: 107.4rem;
+			margin-top: 6.4rem;
+			width: 72.9rem;
+			height: 102.3rem;
 			border-radius: 2rem;
 			// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
 			border: 0.2rem solid #d9d9d9;
@@ -181,20 +181,21 @@
 			}
 		}
 		> .btns {
-			margin-top: 2.5rem;
+			margin-top: 5.6rem;
 			width: 100%;
 			display: flex;
 			justify-content: center;
 			> button {
 				box-sizing: content-box;
 				font-family: satoshiRegular;
-				margin: 0 2rem;
-				width: 35rem;
-				height: 6rem;
+				// margin: 0 1.8rem;
+				margin: 0 5.2rem 0 auto;
+				width: 23.8rem;
+				height: 6.9rem;
 				border-radius: 1.3rem;
 				background: #000;
 				font-weight: 400;
-				font-size: 3.6rem;
+				font-size: 3.89rem;
 				color: #fff;
 				&:active {
 					opacity: 0.7;
--- a/src/views/Workshop/library.vue
+++ b/src/views/Workshop/library.vue
@@ -3,6 +3,7 @@
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import MyList from '@/components/myList.vue'
+	import router from '@/router'
 	const emit = defineEmits(['view-type'])

 	onMounted(() => {
@@ -25,10 +26,11 @@
 			}
 			loading.value = false
 			if (list.length >= 50) finish.value = true
-		}, 1500)
+		}, 500)
 	}
-	const onRetrieveItem = (i: number) => {
-		console.log('检索' + i)
+	const onDetailsItem = (v) => {
+		// console.log('检索' + i)
+		router.push({ name: 'creation', query: { date: v.datetime } })
 	}

 	const deleteItem = (i: number) => {
@@ -47,10 +49,10 @@
 						<img src="@/assets/images/workshop/posture/posture_1.png" />
 					</div>
 					<div class="content">
-						<span class="userID">User ID: {{ v.userID }}</span>
+						<!-- <span class="userID">User ID: {{ v.userID }}</span> -->
 						<span class="datetime">{{ v.datetime }}</span>
 						<span class="lastopened">Last opened {{ v.lastopened }}</span>
-						<button @click="onRetrieveItem(i)">Retrieve</button>
+						<button @click="onDetailsItem(v)">Details</button>
 					</div>
 					<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
 				</div>
--- a/src/views/Workshop/selectModelContinue.vue
+++ b/src/views/Workshop/selectModelContinue.vue
@@ -3,38 +3,47 @@ import { onMounted, onUnmounted, reactive, toRefs } from "vue";
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import FooterNavigation from '@/components/FooterNavigation.vue'
 import { useRouter } from 'vue-router'
+import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
 const router = useRouter()
 //const props = defineProps({
 //})
 const emit = defineEmits(['view-type'])
-// let data = reactive({
-// 	modelList: 
-// 	[
+let data = reactive({
+	modelList: 
+	[

-// 	],
-// 	selectedModelId: null,
-// })
+	],
+	isLoading: false,
+})

 // const setSelectedModelId = (item)=>{
 // 	data.selectedModelId = item.id;
 // }

+
 const onContinue = ()=>{
 	router.push('uploadFace')
+}

+const changeModel = ()=>{
+	router.push('selectModel')
 }

 onMounted(() => {
 	emit('view-type', 1)
+	data.isLoading = true;
+	setTimeout(()=>{
+		data.isLoading = false;
+	}, 2000)
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-// const { modelList, selectedModelId } = toRefs(data);
+const { isLoading } = toRefs(data);
 </script>
 <template>
 	<header-title style-type="2" />
-	<div class="selectModelContinue">
+	<div class="selectModelContinue" v-if="!isLoading">
 		<div class="text">
 			<div class="title">
 				Go with this Look?
@@ -58,12 +67,15 @@ defineExpose({})
 				</div>
 			</div>
 			<div class="again">
-				<div>Re-try?</div>
+				<div @click="changeModel">Change Model</div>
 				<div @click="onContinue">Continue</div>
 			</div>
 		</div>
 	</div>
-	<footer-navigation is-placeholder />
+	<footer-navigation is-placeholder v-if="!isLoading"/>
+	<div class="loading-container" v-if="isLoading">
+		<GenerateLoading title="Generating Results..." />
+	</div>
 </template>
 <style lang="less" scoped>
 	.selectModelContinue{
@@ -157,4 +169,11 @@ defineExpose({})
 			}
 		}
 	}
+	.loading-container{
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #fff;
+	}
 </style>
--- a/src/views/Workshop/selectStyle.vue
+++ b/src/views/Workshop/selectStyle.vue
@@ -66,8 +66,8 @@ let data = reactive({
 		
 	}
 })
-const toSelectModel = ()=>{
-	router.push({ path: 'selectModel' })
+const toSelectModelContinue = ()=>{
+	router.push({ path: 'selectModelContinue' })
 }
 onMounted(()=>{
 	emit('view-type', 1)
@@ -94,7 +94,7 @@ const { selectList, select } = toRefs(data);
 	</div>
 	<div class="footer placeholder"></div>
 	<div class="footer">
-		<button @click.stop="toSelectModel">Continue</button>
+		<button @click.stop="toSelectModelContinue">Continue</button>
 	</div>
 </template>
 <style lang="less" scoped>
--- a/src/views/asistant/components/GenerateLoading.vue
+++ b/src/views/asistant/components/GenerateLoading.vue
@@ -4,19 +4,23 @@
      <img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
      <!-- 阴影效果 -->
      <div class="loading-shadow"></div>
-      <div class="loading-text">Analyzing the Outfit...</div>
+      <div class="loading-text">{{ title }}</div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
 // 这个组件只负责显示loading动画
-interface LoadingProps {
-  // 可以在这里定义props类型
-}

 // 定义组件props类型
-const props = defineProps<LoadingProps>()
+const props = defineProps({
+	title: {
+		type: String,
+		default: 'Analyzing the Outfit...'
+	}
+})
+
+
 </script>

 <style lang="less" scoped>
--- a/src/views/asistant/components/NoticeList.vue
+++ b/src/views/asistant/components/NoticeList.vue
@@ -8,7 +8,7 @@

 <script setup lang="ts">
 import NoticeItem from './NoticeItem.vue'
-import ChatLoading from './ChatLoading.vue'
+import GenerateLoading from './GenerateLoading.vue'
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'

 // 定义消息类型
--- a/src/views/asistant/index.vue
+++ b/src/views/asistant/index.vue
@@ -4,7 +4,7 @@
      <HeaderTitle hasSetting styleType="2" />
    </div>
    <div class="loading-container" v-if="isLoading">
-      <ChatLoading />
+      <GenerateLoading />
    </div>
    <template v-else>
      <div class="content flex-1" v-if="!isLoading">
@@ -23,7 +23,7 @@
 import HeaderTitle from '@/components/HeaderTitle.vue'
 import NoticeList from './components/NoticeList.vue'
 import InputArea from './components/InputArea.vue'
-import ChatLoading from './components/ChatLoading.vue'
+import GenerateLoading from './components/GenerateLoading.vue'
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()