This commit is contained in:
李志鹏
2025-10-20 15:46:09 +08:00
11 changed files with 78 additions and 63 deletions

View File

@@ -28,6 +28,13 @@ button.sandblasted-blurred::after {
button.sandblasted-blurred:active { button.sandblasted-blurred:active {
opacity: 0.7; opacity: 0.7;
} }
@media (prefers-color-scheme: dark) {
:root,
body {
background: white !important;
color: black !important;
}
}
html:root { html:root {
--van-overlay-background: rgba(0, 0, 0, 0.4); --van-overlay-background: rgba(0, 0, 0, 0.4);
--van-dialog-width: 45rem; --van-dialog-width: 45rem;
@@ -52,3 +59,9 @@ html:root {
line-height: 5rem; line-height: 5rem;
padding: 0 2rem; padding: 0 2rem;
} }
.van-toast__text {
font-size: 4rem;
height: 5rem;
line-height: 5rem;
padding: 0 2rem;
}

View File

@@ -35,6 +35,13 @@ button.sandblasted-blurred {
} }
} }
//只使用浅色模式
@media (prefers-color-scheme: dark) {
:root, body {
background: white !important;
color: black !important;
}
}
// vant dialog // vant dialog
html:root { html:root {

View File

@@ -0,0 +1 @@
<svg t="1760927343641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5713" width="200" height="200"><path d="M512 51.2c254.08 0 460.8 206.72 460.8 460.8s-206.72 460.8-460.8 460.8S51.2 766.08 51.2 512 257.92 51.2 512 51.2M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0L512 0z" fill="currentColor" p-id="5714"></path><path d="M741.312 700.352c0 16-12.928 28.992-28.928 28.992L311.616 729.344c-16 0-28.928-12.992-28.928-28.992L282.688 299.648c0-16 12.928-28.864 28.928-28.864l400.768 0c16 0 28.928 12.864 28.928 28.864L741.312 700.352z" fill="currentColor" p-id="5715"></path></svg>

After

Width:  |  Height:  |  Size: 666 B

View File

@@ -64,10 +64,10 @@ const {} = toRefs(data);
</div> </div>
</div> </div>
<div class="btn"> <div class="btn">
<div> <!-- <div>
<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="30" /> <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" /> <SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="30" />
</div> </div> -->
<div> <div>
<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" /> <SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" />
</div> </div>
@@ -75,9 +75,9 @@ const {} = toRefs(data);
<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="30" /> <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" /> <SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="30" />
</div> --> </div> -->
<div> <!-- <div>
<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="30" /> <SvgIcon @click.stop="deleteStyle(index)" name="delete" size="30" />
</div> </div> -->
</div> </div>
</div> </div>

View File

@@ -3,38 +3,47 @@ import { onMounted, onUnmounted, reactive, toRefs } 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 { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
const router = useRouter() const router = useRouter()
//const props = defineProps({ //const props = defineProps({
//}) //})
const emit = defineEmits(['view-type']) const emit = defineEmits(['view-type'])
// let data = reactive({ let data = reactive({
// modelList: modelList:
// [ [
// ], ],
// selectedModelId: null, isLoading: false,
// }) })
// const setSelectedModelId = (item)=>{ // const setSelectedModelId = (item)=>{
// data.selectedModelId = item.id; // data.selectedModelId = item.id;
// } // }
const onContinue = ()=>{ const onContinue = ()=>{
router.push('uploadFace') router.push('uploadFace')
}
const changeModel = ()=>{
router.push('selectModel')
} }
onMounted(() => { onMounted(() => {
emit('view-type', 1) emit('view-type', 1)
data.isLoading = true;
setTimeout(()=>{
data.isLoading = false;
}, 2000)
}) })
onUnmounted(()=>{ onUnmounted(()=>{
}) })
defineExpose({}) defineExpose({})
// const { modelList, selectedModelId } = toRefs(data); const { isLoading } = toRefs(data);
</script> </script>
<template> <template>
<header-title style-type="2" /> <header-title style-type="2" />
<div class="selectModelContinue"> <div class="selectModelContinue" v-if="!isLoading">
<div class="text"> <div class="text">
<div class="title"> <div class="title">
Go with this Look? Go with this Look?
@@ -58,12 +67,15 @@ defineExpose({})
</div> </div>
</div> </div>
<div class="again"> <div class="again">
<div>Re-try?</div> <div @click="changeModel">Change Model</div>
<div @click="onContinue">Continue</div> <div @click="onContinue">Continue</div>
</div> </div>
</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> </template>
<style lang="less" scoped> <style lang="less" scoped>
.selectModelContinue{ .selectModelContinue{
@@ -157,4 +169,11 @@ defineExpose({})
} }
} }
} }
.loading-container{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
</style> </style>

View File

@@ -66,8 +66,8 @@ let data = reactive({
} }
}) })
const toSelectModel = ()=>{ const toSelectModelContinue = ()=>{
router.push({ path: 'selectModel' }) router.push({ path: 'selectModelContinue' })
} }
onMounted(()=>{ onMounted(()=>{
emit('view-type', 1) emit('view-type', 1)
@@ -94,7 +94,7 @@ const { selectList, select } = toRefs(data);
</div> </div>
<div class="footer placeholder"></div> <div class="footer placeholder"></div>
<div class="footer"> <div class="footer">
<button @click.stop="toSelectModel">Continue</button> <button @click.stop="toSelectModelContinue">Continue</button>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>

View File

@@ -13,7 +13,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue' import { ref, onMounted, nextTick } from 'vue'
// 定义线条类型 // 定义线条类型
interface Line { interface Line {
@@ -24,7 +24,6 @@ const containerRef = ref<HTMLElement>()
const visualizerRef = ref<HTMLElement>() const visualizerRef = ref<HTMLElement>()
const lines = ref<Line[]>([]) const lines = ref<Line[]>([])
const isInitialized = ref<boolean>(false) const isInitialized = ref<boolean>(false)
let resizeObserver: ResizeObserver | null = null
// 计算需要的线条数量 // 计算需要的线条数量
const calculateLines = (): Line[] => { const calculateLines = (): Line[] => {
@@ -102,6 +101,7 @@ const calculateLines = (): Line[] => {
// 更新线条 // 更新线条
const updateLines = () => { const updateLines = () => {
if (isInitialized.value) return
const newLines = calculateLines() const newLines = calculateLines()
if (newLines.length > 0) { if (newLines.length > 0) {
lines.value = newLines lines.value = newLines
@@ -114,11 +114,6 @@ defineExpose({
updateLines updateLines
}) })
// 监听窗口大小变化
const handleResize = () => {
updateLines()
}
onMounted(async () => { onMounted(async () => {
await nextTick() await nextTick()
@@ -138,28 +133,6 @@ onMounted(async () => {
updateLines() updateLines()
} }
}, 150) }, 150)
// 使用ResizeObserver监听容器大小变化更精确地检测初始化时机
if (visualizerRef.value && window.ResizeObserver) {
resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.contentRect.width > 50 && !isInitialized.value) {
updateLines()
}
}
})
resizeObserver.observe(visualizerRef.value)
}
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
if (resizeObserver) {
resizeObserver.disconnect()
resizeObserver = null
}
}) })
</script> </script>
@@ -170,7 +143,6 @@ onUnmounted(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
min-height: 200px;
border-radius: 10px; border-radius: 10px;
} }

View File

@@ -4,19 +4,23 @@
<img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" /> <img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
<!-- 阴影效果 --> <!-- 阴影效果 -->
<div class="loading-shadow"></div> <div class="loading-shadow"></div>
<div class="loading-text">Analyzing the Outfit...</div> <div class="loading-text">{{ title }}</div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// loading // loading
interface LoadingProps {
// props
}
// props // props
const props = defineProps<LoadingProps>() const props = defineProps({
title: {
type: String,
default: 'Analyzing the Outfit...'
}
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

View File

@@ -13,7 +13,8 @@
<div class="input-container"> <div class="input-container">
<!-- 加号图标 --> <!-- 加号图标 -->
<div class="icon-wrapper"> <div class="icon-wrapper">
<SvgIcon name="plus" size="40" /> <SvgIcon v-if="!isRecording" name="plus" size="40" />
<SvgIcon v-else name="pause" size="60" @click="stopRecording" />
</div> </div>
<!-- 分隔线 --> <!-- 分隔线 -->
@@ -138,9 +139,6 @@ const handleClickAudio = async (): Promise<void> => {
audioVisualizerRef.value.updateLines?.() audioVisualizerRef.value.updateLines?.()
} }
}, 50) }, 50)
}
if (isRecording.value) {
startRecording() startRecording()
} else { } else {
stopRecording() stopRecording()
@@ -174,7 +172,7 @@ const startRecording = () => {
} }
// 识别结果 // 识别结果
speechRecognition.onresult = (event) => { speechRecognition.onresult = (event: any) => {
let finalTranscript = '' let finalTranscript = ''
let interimTranscript = '' let interimTranscript = ''
@@ -213,7 +211,7 @@ const startRecording = () => {
} }
// 识别错误 // 识别错误
speechRecognition.onerror = (event) => { speechRecognition.onerror = (event: any) => {
console.error('语音识别错误:', event.error) console.error('语音识别错误:', event.error)
isRecording.value = false isRecording.value = false
// alert('语音识别失败,请重试') // alert('语音识别失败,请重试')
@@ -273,6 +271,7 @@ const stopRecording = () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
color: #6d6868;
&.send-icon { &.send-icon {
margin-left: 4.38rem; margin-left: 4.38rem;

View File

@@ -8,7 +8,7 @@
<script setup lang="ts"> <script setup lang="ts">
import NoticeItem from './NoticeItem.vue' import NoticeItem from './NoticeItem.vue'
import ChatLoading from './ChatLoading.vue' import GenerateLoading from './GenerateLoading.vue'
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue' import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
// 定义消息类型 // 定义消息类型

View File

@@ -4,7 +4,7 @@
<HeaderTitle hasSetting styleType="2" /> <HeaderTitle hasSetting styleType="2" />
</div> </div>
<div class="loading-container" v-if="isLoading"> <div class="loading-container" v-if="isLoading">
<ChatLoading /> <GenerateLoading />
</div> </div>
<template v-else> <template v-else>
<div class="content flex-1" v-if="!isLoading"> <div class="content flex-1" v-if="!isLoading">
@@ -23,7 +23,7 @@
import HeaderTitle from '@/components/HeaderTitle.vue' import HeaderTitle from '@/components/HeaderTitle.vue'
import NoticeList from './components/NoticeList.vue' import NoticeList from './components/NoticeList.vue'
import InputArea from './components/InputArea.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 { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()