fix

src/components/HeaderTitle.vue

@@ -3,7 +3,7 @@
 	const router = useRouter()
 
 	defineProps({
-		title: { type: String, default: 'AI STYLING ASSISTANT' },
+		title: { type: String, default: 'AI STYLING ASSISTANT' }
 	})
 
 	const emit = defineEmits(['clickReturn', 'clickProfile'])
@@ -40,20 +40,21 @@
 		justify-content: center;
 
 		> .return {
+			color: #2c2c2c;
 			position: absolute;
 			left: 7rem;
 			display: inline-block;
 		}
 		> .title {
-			font-size: 4.8rem;
-			color: var(--header-title-color, #000);
-			font-family: 'boskaRegular';
+			color: #2c2c2c;
+			font-family: 'satoshiRegular';
+			font-size: 4rem;
 		}
 		> .profile {
 			position: absolute;
 			right: 7rem;
 			display: inline-block;
-			color: var(--header-title-color, #000);
+			color: #333;
 		}
 	}
 </style>

src/types/enum.ts

@@ -3,11 +3,11 @@ export const FlowType = {
 	/** 主流程 */
 	MAIN: 'main',
 	/** 历史流程 */
-	HISTORICAL: 'historical',
+	HISTORY: 'history',
 	/** 历史流程-Outfit */
-	H_OUTFIT: 'historical-outfit',
+	H_OUTFIT: 'history-outfit',
 	/** 历史流程-Tryon */
-	H_TRYON: 'historical-tryon',
+	H_TRYON: 'history-tryon',
 	/** 历史流程-AI */
-	H_AI: 'historical-ai',
+	H_AI: 'history-ai',
 }

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

@@ -1,367 +1,459 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from 'vue'
-import MyList from '@/components/MyList.vue'
-import { DownloadImages } from '@/utils/tools'
-import {
-  getTryOnEffectFavoriteList,
-  getTryOnEffectStyleList,
-  setTryOnEffectFavorite,
-  cancelTryOnEffectFavorite
-} from '@/api/workshop'
+	import { ref, reactive, onMounted, computed } from 'vue'
+	import MyList from '@/components/MyList.vue'
+	import { DownloadImages } from '@/utils/tools'
+	import { FlowType } from '@/types/enum'
+	import {
+		getTryOnEffectFavoriteList,
+		getTryOnEffectStyleList,
+		setTryOnEffectFavorite,
+		cancelTryOnEffectFavorite
+	} from '@/api/workshop'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const emit = defineEmits(['view-type'])
+	const query = computed(() => router.currentRoute.value.query)
+	const visitRecordId = computed(() => query.value.visitRecordId) // 访问记录ID
+	import { useGenerateStore } from '@/stores'
+	const generateStore = useGenerateStore()
+	const props = defineProps({
+		// 是否单选模式
+		isChooseOne: { type: Boolean, default: false }
+	})
+	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) //是否选择保存模式
 
-import { useRouter } from 'vue-router'
-const router = useRouter()
-const emit = defineEmits(['view-type'])
-const query = computed(() => router.currentRoute.value.query)
-const visitRecordId = computed(() => query.value.visitRecordId) // 访问记录ID
-import { useGenerateStore } from '@/stores'
-const generateStore = useGenerateStore()
+	const navLst = [
+		{ label: 'Outfit', value: 'outfit', flowType: FlowType.H_OUTFIT },
+		{ label: 'Try-on', value: 'tryOn', flowType: FlowType.H_TRYON },
+		{ label: 'Gen-AI', value: 'genAi', flowType: FlowType.H_AI }
+	]
+	const navActive = ref('outfit')
+	const clickNav = (v) => {
+		navActive.value = v.value
+		console.log(v)
+	}
+	const onLoad = () => {
+		loading.value = true
+		const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
+		const id = visitRecordId.value || generateStore.styleId
+		http(id)
+			.then((data) => {
+				data?.forEach((v) => {
+					const obj = {
+						tryOnId: v.tryOnId,
+						tryOnUrl: v.tryOnUrl,
+						styleUrl: v.styleUrl,
+						isFavorite: !!v.isFavorite,
+						isRegenerated: !!v.isRegenerated,
 
-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) //是否选择保存模式
+						selected: false,
+						loading: false,
+						downloaded: false
+					}
+					list.push(obj)
+				})
+				loading.value = false
+				finish.value = true
+			})
+			.catch((err) => {
+				console.error(err)
+				loading.value = false
+				finish.value = true
+			})
+	}
+	const onItem = (v) => {
+		if (props.isChooseOne) {
+			onSelectItem(v)
+		} else {
+			isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
+		}
+	}
+	// 详情页
+	const onDetailsItem = (v) => {
+		if (v.isRegenerated) return
+		router.push({ query: { ...query.value, styleUrl: v.styleUrl } })
+	}
+	// 喜欢
+	const isLoveLoading = ref(false)
+	const onLoveItem = (v) => {
+		if (isLoveLoading.value) return
+		const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
+		isLoveLoading.value = true
+		v.isFavorite = !v.isFavorite
+		http(v.tryOnId)
+			.then(() => {
+				isLoveLoading.value = false
+			})
+			.catch((err) => {
+				console.error(err)
+				isLoveLoading.value = false
+			})
+	}
 
-const onLoad = () => {
-  loading.value = true
-  const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList
-  const id = visitRecordId.value || generateStore.styleId
-  http(id)
-    .then((data) => {
-      data?.forEach((v) => {
-        const obj = {
-          tryOnId: v.tryOnId,
-          tryOnUrl: v.tryOnUrl,
-          styleUrl: v.styleUrl,
-          isFavorite: !!v.isFavorite,
-          isRegenerated: !!v.isRegenerated,
+	const shareImageToWhatsapp = async (url) => {
+		// 把图片 URL 转为 Blob
+		const blob = await fetch(url).then((res) => res.blob())
 
-          selected: list.length < maxSelectCount,
-          loading: false,
-          downloaded: false
-        }
-        list.push(obj)
-      })
-      loading.value = false
-      finish.value = true
-    })
-    .catch((err) => {
-      console.error(err)
-      loading.value = false
-      finish.value = true
-    })
-}
-const onItem = (v) => {
-  isChooseSave.value ? onSelectItem(v) : onDetailsItem(v)
-}
-// 详情页
-const onDetailsItem = (v) => {
-  if (v.isRegenerated) return
-  router.push({ query: { ...query.value, styleUrl: v.styleUrl } })
-}
-// 喜欢
-const isLoveLoading = ref(false)
-const onLoveItem = (v) => {
-  if (isLoveLoading.value) return
-  const http = v.isFavorite ? cancelTryOnEffectFavorite : setTryOnEffectFavorite
-  isLoveLoading.value = true
-  v.isFavorite = !v.isFavorite
-  http(v.tryOnId)
-    .then(() => {
-      isLoveLoading.value = false
-    })
-    .catch((err) => {
-      console.error(err)
-      isLoveLoading.value = false
-    })
-}
+		// 创建文件对象
+		const file = new File([blob], 'image.jpg', { type: 'image/jpeg' })
 
-const shareImageToWhatsapp = async (url) => {
-  // 把图片 URL 转为 Blob
-  const blob = await fetch(url).then((res) => res.blob())
+		// 判断浏览器是否支持文件分享
+		if (navigator.canShare && navigator.canShare({ files: [file] })) {
+			await navigator.share({
+				files: [file]
+			})
+		} else {
+			// 你可以附加一些自定义文本
+			const message = 'share image ' + url
 
-  // 创建文件对象
-  const file = new File([blob], 'image.jpg', { type: 'image/jpeg' })
+			// 构造WhatsApp链接
+			const whatsappLink = `https://api.whatsapp.com/send/?text=${encodeURIComponent(message)}`
+			window.open(whatsappLink, '_blank')
+		}
+	}
 
-  // 判断浏览器是否支持文件分享
-  if (navigator.canShare && navigator.canShare({ files: [file] })) {
-    await navigator.share({
-      files: [file]
-    })
-  } else {
-    // 你可以附加一些自定义文本
-    const message = 'share image ' + url
+	const isShare = ref(false)
+	const handleOpenShare = () => {
+		isShare.value = !isShare.value
 
-    // 构造WhatsApp链接
-    const whatsappLink = `https://api.whatsapp.com/send/?text=${encodeURIComponent(message)}`
-    window.open(whatsappLink, '_blank')
-  }
-}
+		alert(`现在${isShare.value ? '可以' : '不可以'}分享`)
+	}
 
-const isShare = ref(false)
-const handleOpenShare = () => {
-  isShare.value = !isShare.value
-
-  alert(`现在${isShare.value ? '可以' : '不可以'}分享`)
-}
-
-const onDownloadItem = async (v) => {
-  if (isShare.value) {
-    await shareImageToWhatsapp(v.tryOnUrl)
-    return
-  }
-  if (v.loading) return
-  v.loading = true
-  v.selected = false
-  DownloadImages([{ url: v.tryOnUrl }], 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: v.tryOnUrl
-        })
-      }
-    })
-  }
-  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 onDownloadItem = async (v) => {
+		if (isShare.value) {
+			await shareImageToWhatsapp(v.tryOnUrl)
+			return
+		}
+		if (v.loading) return
+		v.loading = true
+		v.selected = false
+		DownloadImages([{ url: v.tryOnUrl }], null, null, () => {
+			v.loading = false
+			v.downloaded = true
+		})
+	}
+	const onSelectItem = (v) => {
+		if (props.isChooseOne) {
+			list.forEach((v) => (v.selected = false))
+			v.selected = true
+		} else {
+			if (selectCount.value >= maxSelectCount && !v.selected) return
+			v.selected = !v.selected
+		}
+	}
+	const onChooseSave = () => {
+		isChooseSave.value = true
+		if (selectCount.value < maxSelectCount) {
+			list.forEach((v) => {
+				if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount)
+					v.selected = 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: v.tryOnUrl
+					})
+				}
+			})
+		}
+		onChooseSave()
+		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 = () => {
+		if (props.isChooseOne) {
+			const selectedItem = list.find((v) => v.selected)
+			const nav = navLst.find((v) => v.value === navActive.value)
+			if (!selectedItem || !nav) return
+			router.push({ name: 'HomeNav', query: { flowType: nav.flowType } })
+		} else {
+			router.push({ name: 'end' })
+		}
+	}
 </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="onItem(v)">
-          <img v-lazy="v.tryOnUrl" />
-          <div class="corner">
-            <div class="ai" v-if="v.isRegenerated">Gen-AI</div>
-            <div class="tryon" v-else>Try-on</div>
-          </div>
-          <div class="icons">
-            <div @click.stop="onLoveItem(v)">
-              <SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" 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" v-show="!visitRecordId">
-      <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>
+	<div class="creation-list">
+		<div class="title" v-if="isChooseOne">Choose One to Start.</div>
+		<div class="title" v-else>Your Creation</div>
+		<div class="nav">
+			<div
+				class="item"
+				v-for="(v, i) in navLst"
+				:key="i"
+				@click="clickNav(v)"
+				:class="{ active: v.value === navActive }"
+			>
+				{{ v.label }}
+			</div>
+		</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="onItem(v)">
+					<img v-lazy="v.tryOnUrl" />
+					<!-- <div class="corner">
+						<div class="ai" v-if="v.isRegenerated">Gen-AI</div>
+						<div class="tryon" v-else>Try-on</div>
+					</div> -->
+					<div class="icons" v-if="!isChooseOne">
+						<div @click.stop="onLoveItem(v)">
+							<SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" 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 || isChooseOne) && 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 class="download-state" v-show="selectCount && isChooseOne && !v.selected"></div>
+				</div>
+			</my-list>
+		</div>
+		<div class="btns" v-show="!visitRecordId">
+			<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 class="creation-footer" v-if="isChooseOne">
+			<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;
-    --border-radius: 2rem;
-    > .my-list {
-      padding: 0 6rem;
-      --my-list-footer-margin: 0 0 2rem;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-content: flex-start;
-      .item {
-        width: 47%;
-        height: 62.2rem;
-        // overflow: hidden;
-        border-radius: var(--border-radius);
-        background-color: #fff;
-        margin-bottom: 4rem;
-        border: 0.1rem solid #000;
-        position: relative;
-        > img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          border-radius: var(--border-radius);
-        }
-        > .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;
-            border-top-right-radius: var(--border-radius);
+	.creation-list {
+		width: 100%;
+		flex: 1;
+		overflow: hidden;
+		background-color: #f6f6f6;
+		border-radius: 1rem;
+		position: relative;
+		color: #000;
+		display: flex;
+		flex-direction: column;
+		> .title {
+			font-family: 'satoshiBold';
+			font-size: 8.6rem;
+			text-align: center;
+			line-height: 124%;
+			margin: 3.8rem 0;
+		}
+		> .nav {
+			margin: 2rem 14.3rem 5rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			> .item {
+				font-family: satoshiMedium;
+				font-size: 4rem;
+				color: #a1a1a1;
+				padding-bottom: 1.2rem;
+				&.active {
+					color: #000;
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						height: 0.8rem;
+						background-color: #000;
+						border-radius: 0.25rem;
+					}
+				}
+			}
+		}
+		> .list {
+			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;
+				align-content: flex-start;
+				.item {
+					width: 47%;
+					height: 62.2rem;
+					// overflow: hidden;
+					border-radius: var(--border-radius);
+					background-color: #fff;
+					margin-bottom: 4rem;
+					border: 0.1rem solid #000;
+					position: relative;
+					> img {
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+						border-radius: var(--border-radius);
+					}
+					> .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;
+							border-top-right-radius: var(--border-radius);
 
-            background-color: #000;
-            color: #fff;
-          }
-          > .ai {
-            color: #646464;
-            background: linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5)),
-              linear-gradient(
-                165.5deg,
-                #7a96ac 2.28%,
-                #eaeff3 19.8%,
-                #c2d4e1 32.94%,
-                #ffffff 50.16%,
-                #d4dee5 62.15%,
-                #abbdc8 78.69%,
-                #bccad7 95.24%
-              );
-          }
-        }
-        > .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 rgba(0, 0, 0, 0.5);
-            --svg-icon-color: #000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #fff;
-          }
-        }
-        > .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;
-        }
-      }
-    }
-  }
-  > .btns {
-    margin: 9rem 0;
-    display: flex;
-    justify-content: center;
+							background-color: #000;
+							color: #fff;
+						}
+						> .ai {
+							color: #646464;
+							background: linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5)),
+								linear-gradient(
+									165.5deg,
+									#7a96ac 2.28%,
+									#eaeff3 19.8%,
+									#c2d4e1 32.94%,
+									#ffffff 50.16%,
+									#d4dee5 62.15%,
+									#abbdc8 78.69%,
+									#bccad7 95.24%
+								);
+						}
+					}
+					> .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 rgba(0, 0, 0, 0.5);
+							--svg-icon-color: #000;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							background-color: #fff;
+						}
+					}
+					> .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;
+					}
+				}
+			}
+		}
+		> .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;
-      border: none;
-      background: #000;
-      font-weight: 400;
-      font-size: 4.2rem;
-      margin: 0 3.25rem;
-      color: #fff;
-      &:active {
-        opacity: 0.7;
-      }
-    }
-  }
-}
+			> button {
+				box-sizing: content-box;
+				font-family: satoshiRegular;
+				width: 35rem;
+				height: 8rem;
+				border-radius: 1.3rem;
+				border: none;
+				background: #000;
+				font-weight: 400;
+				font-size: 4.2rem;
+				margin: 0 3.25rem;
+				color: #fff;
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
+		.creation-footer {
+			height: 16.5rem;
+			background-color: #fff;
+			box-shadow: -2.6rem -1.4rem 3.47rem 0rem rgba(0, 0, 0, 0.05);
+			display: flex;
+			align-items: center;
+			> button {
+				font-family: satoshiRegular;
+				font-size: 3.6rem;
+				color: #fff;
+				width: 24.6rem;
+				height: 6.7rem;
+				border-radius: 0.7rem;
+				border: none;
+				background: #000;
+				font-weight: 400;
+				margin: 0 5.6rem 0 auto;
+				&:active {
+					opacity: 0.7;
+				}
+			}
+		}
+	}
 </style>

src/views/Workshop/creation/index.vue

@@ -2,23 +2,25 @@
 	import { ref, reactive, onMounted, watch, computed } from 'vue'
 	import CreationList from '@/views/Workshop/creation/creation-list.vue'
 	import CreationDetails from '@/views/Workshop/creation/creation-details.vue'
-
-	import { useRouter } from 'vue-router'
+	import { FlowType } from '@/types/enum'
+	import { useRouter, useRoute } from 'vue-router'
 	const router = useRouter()
-	const styleUrl = computed(() => router.currentRoute.value.query.styleUrl);
+	const route = useRoute()
+	const styleUrl = computed(() => router.currentRoute.value.query.styleUrl)
 	const emit = defineEmits(['view-type'])
 	watch(
 		() => router.currentRoute.value,
 		() => emit('view-type', 1)
 	)
-	
+	const isChooseOne = computed(() => route.query.flowType === FlowType.HISTORY)
+
 	onMounted(() => {
 		emit('view-type', 1)
 	})
 </script>
 
 <template>
-	<creation-list v-show="!styleUrl" />
+	<creation-list v-show="!styleUrl" :is-choose-one="isChooseOne" />
 	<creation-details v-if="styleUrl" />
 </template>
 

src/views/Workshop/index.vue

@@ -1,25 +1,26 @@
 <script setup lang="ts">
-	import { useRouter } from 'vue-router'
+	import { useRouter, useRoute } from 'vue-router'
+	import { FlowType } from '@/types/enum'
 	const router = useRouter()
-	import { ref } from 'vue'
+	const route = useRoute()
+	import { ref, computed } from 'vue'
 	import HeaderTitle from '@/components/HeaderTitle.vue'
 	import FooterNavigation from '@/components/FooterNavigation.vue'
 	import RouteCache from '@/components/RouteCache.vue'
 	import profile from './profile.vue'
-	//const props = defineProps({
-	//})
-	//const emit = defineEmits([
-	//])
+	const props = defineProps({})
+	const emit = defineEmits([])
 	const profileRef = ref(null)
 	const handleClickProfile = () => {
 		profileRef.value.open()
 	}
+	const notShowFooter = computed(() => route.query.flowType !== FlowType.HISTORY)
 </script>
 <template>
 	<div class="workshop">
 		<header-title @clickProfile="handleClickProfile" />
 		<RouteCache />
-		<footer-navigation />
+		<footer-navigation v-if="notShowFooter" />
 	</div>
 	<profile ref="profileRef" />
 </template>