Merge branch 'master' of https://gitee.com/lvYeJu/lane-crawford-3
This commit is contained in:
@@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
1
src/assets/icons/pause.svg
Normal file
1
src/assets/icons/pause.svg
Normal 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 |
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
|
|
||||||
<!-- 分隔线 -->
|
<!-- 分隔线 -->
|
||||||
@@ -97,12 +98,12 @@ const handleInput = (): void => {
|
|||||||
if (textareaRef.value) {
|
if (textareaRef.value) {
|
||||||
textareaRef.value.style.height = 'auto'
|
textareaRef.value.style.height = 'auto'
|
||||||
|
|
||||||
// const lineHeight = 4.8
|
// const lineHeight = 4.8
|
||||||
// const maxLines = 3
|
// const maxLines = 3
|
||||||
// const maxHeight = lineHeight * maxLines
|
// const maxHeight = lineHeight * maxLines
|
||||||
|
|
||||||
const scrollHeight = textareaRef.value.scrollHeight
|
const scrollHeight = textareaRef.value.scrollHeight
|
||||||
// const newHeight = Math.min(scrollHeight, maxHeight * 10)
|
// const newHeight = Math.min(scrollHeight, maxHeight * 10)
|
||||||
|
|
||||||
textareaRef.value.style.height = `${scrollHeight}px`
|
textareaRef.value.style.height = `${scrollHeight}px`
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -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'
|
||||||
|
|
||||||
// 定义消息类型
|
// 定义消息类型
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
Reference in New Issue
Block a user