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', MAIN: 'main',
/** 历史流程 */ /** 历史流程 */
HISTORICAL: 'historical', HISTORY: 'history',
/** 历史流程-Outfit */ /** 历史流程-Outfit */
H_OUTFIT: 'historical-outfit', H_OUTFIT: 'history-outfit',
/** 历史流程-Tryon */ /** 历史流程-Tryon */
H_TRYON: 'historical-tryon', H_TRYON: 'history-tryon',
/** 历史流程-AI */ /** 历史流程-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"> <script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue' import { ref, reactive, onMounted, computed } from 'vue'
import MyList from '@/components/MyList.vue' import MyList from '@/components/MyList.vue'
import { DownloadImages } from '@/utils/tools' import { DownloadImages } from '@/utils/tools'
import { import { FlowType } from '@/types/enum'
getTryOnEffectFavoriteList, import {
getTryOnEffectStyleList, getTryOnEffectFavoriteList,
setTryOnEffectFavorite, getTryOnEffectStyleList,
cancelTryOnEffectFavorite setTryOnEffectFavorite,
} from '@/api/workshop' 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 navLst = [
const router = useRouter() { label: 'Outfit', value: 'outfit', flowType: FlowType.H_OUTFIT },
const emit = defineEmits(['view-type']) { label: 'Try-on', value: 'tryOn', flowType: FlowType.H_TRYON },
const query = computed(() => router.currentRoute.value.query) { label: 'Gen-AI', value: 'genAi', flowType: FlowType.H_AI }
const visitRecordId = computed(() => query.value.visitRecordId) // 访问记录ID ]
import { useGenerateStore } from '@/stores' const navActive = ref('outfit')
const generateStore = useGenerateStore() 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(() => { selected: false,
emit('view-type', 1) loading: false,
}) downloaded: false
const list = reactive([]) }
const loading = ref(false) list.push(obj)
const finish = ref(false) })
const selectCount = computed(() => list.filter((v) => v.selected).length) loading.value = false
const maxSelectCount = 10 finish.value = true
const isChooseSave = ref(false) //是否选择保存模式 })
.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 = () => { const shareImageToWhatsapp = async (url) => {
loading.value = true // 把图片 URL 转为 Blob
const http = visitRecordId.value ? getTryOnEffectFavoriteList : getTryOnEffectStyleList const blob = await fetch(url).then((res) => res.blob())
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,
selected: list.length < maxSelectCount, // 创建文件对象
loading: false, const file = new File([blob], 'image.jpg', { type: 'image/jpeg' })
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 shareImageToWhatsapp = async (url) => { // 判断浏览器是否支持文件分享
// 把图片 URL 转为 Blob if (navigator.canShare && navigator.canShare({ files: [file] })) {
const blob = await fetch(url).then((res) => res.blob()) await navigator.share({
files: [file]
})
} else {
// 你可以附加一些自定义文本
const message = 'share image ' + url
// 创建文件对象 // 构造WhatsApp链接
const file = new File([blob], 'image.jpg', { type: 'image/jpeg' }) const whatsappLink = `https://api.whatsapp.com/send/?text=${encodeURIComponent(message)}`
window.open(whatsappLink, '_blank')
}
}
// 判断浏览器是否支持文件分享 const isShare = ref(false)
if (navigator.canShare && navigator.canShare({ files: [file] })) { const handleOpenShare = () => {
await navigator.share({ isShare.value = !isShare.value
files: [file]
})
} else {
// 你可以附加一些自定义文本
const message = 'share image ' + url
// 构造WhatsApp链接 alert(`现在${isShare.value ? '可以' : '不可以'}分享`)
const whatsappLink = `https://api.whatsapp.com/send/?text=${encodeURIComponent(message)}` }
window.open(whatsappLink, '_blank')
}
}
const isShare = ref(false) const onDownloadItem = async (v) => {
const handleOpenShare = () => { if (isShare.value) {
isShare.value = !isShare.value await shareImageToWhatsapp(v.tryOnUrl)
return
alert(`现在${isShare.value ? '可以' : '不可以'}分享`) }
} if (v.loading) return
v.loading = true
const onDownloadItem = async (v) => { v.selected = false
if (isShare.value) { DownloadImages([{ url: v.tryOnUrl }], null, null, () => {
await shareImageToWhatsapp(v.tryOnUrl) v.loading = false
return v.downloaded = true
} })
if (v.loading) return }
v.loading = true const onSelectItem = (v) => {
v.selected = false if (props.isChooseOne) {
DownloadImages([{ url: v.tryOnUrl }], null, null, () => { list.forEach((v) => (v.selected = false))
v.loading = false v.selected = true
v.downloaded = true } else {
}) if (selectCount.value >= maxSelectCount && !v.selected) return
} v.selected = !v.selected
const onSelectItem = (v) => { }
if (selectCount.value >= maxSelectCount && !v.selected) return }
v.selected = !v.selected const onChooseSave = () => {
} isChooseSave.value = true
const onChooseSave = () => { if (selectCount.value < maxSelectCount) {
isChooseSave.value = true list.forEach((v) => {
} if (!v.selected && !v.downloaded && !v.loading && selectCount.value < maxSelectCount)
const onBackChooseSave = () => { v.selected = true
isChooseSave.value = false })
} }
// 下载选中项 }
const onConfirm = () => { const onBackChooseSave = () => {
const downloadList = [] isChooseSave.value = false
if (selectCount.value > 0) { }
list.forEach((v, i) => { // 下载选中项
if (v.selected) { const onConfirm = () => {
v.selected = false const downloadList = []
v.loading = true if (selectCount.value > 0) {
downloadList.push({ list.forEach((v, i) => {
index: i, if (v.selected) {
url: v.tryOnUrl 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 }
}) onChooseSave()
} if (downloadList.length > 0) {
if (downloadList.length > 0) { DownloadImages(
DownloadImages( downloadList,
downloadList, (count, total, item) => {
(count, total, item) => { list[item.index].loading = false
list[item.index].loading = false list[item.index].downloaded = true
list[item.index].downloaded = true console.log('下载成功', count, total, item)
console.log('下载成功', count, total, item) },
}, (count, total, item) => {
(count, total, item) => { list[item.index].loading = false
list[item.index].loading = false console.log('下载失败', count, total, item)
console.log('下载失败', count, total, item) },
}, (successCount, errCount) => {
(successCount, errCount) => { console.log('下载完成', successCount, errCount)
console.log('下载完成', successCount, errCount) }
} )
) }
} }
} const onContinue = () => {
const onContinue = () => { if (props.isChooseOne) {
router.push({ name: 'end' }) 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> </script>
<template> <template>
<div class="creation-list"> <div class="creation-list">
<div class="title">Your Creation</div> <div class="title" v-if="isChooseOne">Choose One to Start.</div>
<div class="list"> <div class="title" v-else>Your Creation</div>
<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad"> <div class="nav">
<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)"> <div
<img v-lazy="v.tryOnUrl" /> class="item"
<div class="corner"> v-for="(v, i) in navLst"
<div class="ai" v-if="v.isRegenerated">Gen-AI</div> :key="i"
<div class="tryon" v-else>Try-on</div> @click="clickNav(v)"
</div> :class="{ active: v.value === navActive }"
<div class="icons"> >
<div @click.stop="onLoveItem(v)"> {{ v.label }}
<SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" /> </div>
</div> </div>
<div @click.stop="onDownloadItem(v)"> <div class="list">
<SvgIcon name="download" size="27" v-show="!v.loading" /> <my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
<van-loading color="#000" size="3rem" v-show="v.loading" /> <div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)">
</div> <img v-lazy="v.tryOnUrl" />
</div> <!-- <div class="corner">
<div class="icon-selected" v-show="isChooseSave && v.selected"> <div class="ai" v-if="v.isRegenerated">Gen-AI</div>
<SvgIcon name="modelSelected" size="50" /> <div class="tryon" v-else>Try-on</div>
</div> </div> -->
<div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div> <div class="icons" v-if="!isChooseOne">
<div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div> <div @click.stop="onLoveItem(v)">
</div> <SvgIcon :name="`love_${v.isFavorite ? '1' : '0'}`" size="27" />
</my-list> </div>
</div> <div @click.stop="onDownloadItem(v)">
<div class="btns" v-show="!visitRecordId"> <SvgIcon name="download" size="27" v-show="!v.loading" />
<template v-if="!isChooseSave"> <van-loading color="#000" size="3rem" v-show="v.loading" />
<button @click="onChooseSave">Choose to Save</button> </div>
<button @click="onContinue">Continue</button> </div>
</template> <div class="icon-selected" v-show="(isChooseSave || isChooseOne) && v.selected">
<template v-else> <SvgIcon name="modelSelected" size="50" />
<button @click="onBackChooseSave">Back</button> </div>
<button @click="onConfirm">Confirm ({{ selectCount }}/{{ maxSelectCount }})</button> <div class="download-state" v-show="isChooseSave && v.loading">Downloading...</div>
</template> <div class="download-state" v-show="isChooseSave && v.downloaded">Downloaded</div>
</div> <div class="download-state" v-show="selectCount && isChooseOne && !v.selected"></div>
</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> </template>
<style scoped lang="less"> <style scoped lang="less">
.creation-list { .creation-list {
width: 100%; width: 100%;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
background-color: #e3e3e3; background-color: #f6f6f6;
border-radius: 1rem; border-radius: 1rem;
position: relative; position: relative;
color: #000; color: #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> .title { > .title {
font-family: 'satoshiRegular'; font-family: 'satoshiBold';
font-size: 9rem; font-size: 8.6rem;
text-align: center; text-align: center;
line-height: 124%; line-height: 124%;
font-weight: 500; margin: 3.8rem 0;
margin: 7.2rem 0; }
} > .nav {
> .list { margin: 2rem 14.3rem 5rem;
flex: 1; display: flex;
margin: 0 3.8rem; align-items: center;
overflow: hidden; justify-content: space-between;
--border-radius: 2rem; > .item {
> .my-list { font-family: satoshiMedium;
padding: 0 6rem; font-size: 4rem;
--my-list-footer-margin: 0 0 2rem; color: #a1a1a1;
display: flex; padding-bottom: 1.2rem;
flex-wrap: wrap; &.active {
justify-content: space-between; color: #000;
align-content: flex-start; &::after {
.item { content: '';
width: 47%; position: absolute;
height: 62.2rem; bottom: 0;
// overflow: hidden; left: 0;
border-radius: var(--border-radius); width: 100%;
background-color: #fff; height: 0.8rem;
margin-bottom: 4rem; background-color: #000;
border: 0.1rem solid #000; border-radius: 0.25rem;
position: relative; }
> img { }
width: 100%; }
height: 100%; }
object-fit: cover; > .list {
border-radius: var(--border-radius); flex: 1;
} margin: 0 3.8rem;
> .corner { overflow: hidden;
position: absolute; --border-radius: 2rem;
top: 0; > .my-list {
right: 0; padding: 0 6rem;
> div { --my-list-footer-margin: 0 0 2rem;
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
justify-content: center; justify-content: space-between;
width: 12.6rem; align-content: flex-start;
height: 3.6rem; .item {
font-family: satoshiBold; width: 47%;
font-size: 1.6rem; height: 62.2rem;
border-bottom-left-radius: 1.6rem; // overflow: hidden;
border-top-right-radius: var(--border-radius); 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; background-color: #000;
color: #fff; color: #fff;
} }
> .ai { > .ai {
color: #646464; color: #646464;
background: linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5)), background: linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5)),
linear-gradient( linear-gradient(
165.5deg, 165.5deg,
#7a96ac 2.28%, #7a96ac 2.28%,
#eaeff3 19.8%, #eaeff3 19.8%,
#c2d4e1 32.94%, #c2d4e1 32.94%,
#ffffff 50.16%, #ffffff 50.16%,
#d4dee5 62.15%, #d4dee5 62.15%,
#abbdc8 78.69%, #abbdc8 78.69%,
#bccad7 95.24% #bccad7 95.24%
); );
} }
} }
> .icons { > .icons {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 1.7rem; right: 1.7rem;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
> div { > div {
margin-bottom: 2.2rem; margin-bottom: 2.2rem;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border-radius: 1rem; border-radius: 1rem;
border: 0.2rem solid rgba(0, 0, 0, 0.5); border: 0.2rem solid rgba(0, 0, 0, 0.5);
--svg-icon-color: #000; --svg-icon-color: #000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #fff; background-color: #fff;
} }
} }
> .icon-selected { > .icon-selected {
position: absolute; position: absolute;
bottom: -2rem; bottom: -2rem;
right: -2rem; right: -2rem;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
} }
> .download-state { > .download-state {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: #fff; color: #fff;
font-size: 4rem; font-size: 4rem;
} }
} }
} }
} }
> .btns { > .btns {
margin: 9rem 0; margin: 9rem 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
> button { > button {
box-sizing: content-box; box-sizing: content-box;
font-family: satoshiRegular; font-family: satoshiRegular;
width: 35rem; width: 35rem;
height: 8rem; height: 8rem;
border-radius: 1.3rem; border-radius: 1.3rem;
border: none; border: none;
background: #000; background: #000;
font-weight: 400; font-weight: 400;
font-size: 4.2rem; font-size: 4.2rem;
margin: 0 3.25rem; margin: 0 3.25rem;
color: #fff; color: #fff;
&:active { &:active {
opacity: 0.7; 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> </style>

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

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

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

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