aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
Details

Browse Source
This commit is contained in:
李志鹏
2025-12-19 15:17:20 +08:00
parent bd36a237ec
commit 33a73643b4
4 changed files with 457 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/types/enum.ts
View File

@@ -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',
}

788
src/views/Workshop/creation/creation-list.vue
View File

@@ -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>

10
src/views/Workshop/creation/index.vue
View File

@@ -2,15 +2,17 @@
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)
@@ -18,7 +20,7 @@
</script>
<template>
<creation-list v-show="!styleUrl" />
<creation-list v-show="!styleUrl" :is-choose-one="isChooseOne" />
<creation-details v-if="styleUrl" />
</template>

9
src/views/Workshop/index.vue
View File

@@ -1,7 +1,9 @@
<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'
@@ -12,12 +14,13 @@
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>