From ba01a588da0264551a54b38dc6a1311e2cf221b8 Mon Sep 17 00:00:00 2001 From: zhangyh Date: Thu, 16 Oct 2025 14:05:21 +0800 Subject: [PATCH 1/2] =?UTF-8?q?style:=20=E5=85=A8=E5=B1=80toast=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/style.less | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/assets/css/style.less b/src/assets/css/style.less index c8f3003..c4ff8a9 100644 --- a/src/assets/css/style.less +++ b/src/assets/css/style.less @@ -46,4 +46,11 @@ html:root { --van-dialog-button-height: 9rem; --van-dialog-message-padding: 3rem 2.5rem; --van-dialog-has-title-message-padding-top: 2.5rem; +} + +.van-toast__text { + font-size: 4rem; + height: 5rem; + line-height: 5rem; + padding: 0 2rem; } \ No newline at end of file From 755fcb6c5e4bd7d04e8f5be3a8249907451c6c81 Mon Sep 17 00:00:00 2001 From: zhangyh Date: Thu, 16 Oct 2025 16:03:01 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E8=81=8A=E5=A4=A9=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E5=88=B0=E5=BA=95?= =?UTF-8?q?=E9=83=A8&=E8=B7=B3=E8=BD=AC=E4=B8=8B=E4=B8=80=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../asistant/components/AudioVisualizer.vue | 39 +++++--- src/views/asistant/components/InputArea.vue | 9 ++ src/views/asistant/components/NoticeList.vue | 89 ++++++------------ src/views/asistant/index.vue | 92 ++++++++++++++++--- 4 files changed, 145 insertions(+), 84 deletions(-) diff --git a/src/views/asistant/components/AudioVisualizer.vue b/src/views/asistant/components/AudioVisualizer.vue index f235b98..e3b3de4 100644 --- a/src/views/asistant/components/AudioVisualizer.vue +++ b/src/views/asistant/components/AudioVisualizer.vue @@ -30,10 +30,11 @@ const calculateLines = (): Line[] => { const lineWidthPx = lineWidth * remToPx const gapPx = gap * remToPx - // 计算能容纳多少条线 + // 为了创建无缝滚动效果，我们需要生成两倍的内容 + // 这样当滚动到50%时，内容看起来和开始一样 const availableWidth = containerWidth const lineWithGap = lineWidthPx + gapPx - const maxLines = Math.floor(availableWidth / lineWithGap) + const linesNeeded = Math.ceil(availableWidth / lineWithGap) const generatedLines: Line[] = [] @@ -62,25 +63,29 @@ const calculateLines = (): Line[] => { { type: 1 } // 4条1号线 ] - // 先添加基础模式 - generatedLines.push(...basePattern) - - // 然后重复添加模式直到填满容器 + // 生成一个完整周期的内容 + const oneCycle: Line[] = [] + oneCycle.push(...basePattern) + + // 添加重复模式直到填满一个周期 let currentIndex = basePattern.length - while (currentIndex < maxLines) { - const remainingSpace = maxLines - currentIndex + while (currentIndex < linesNeeded) { + const remainingSpace = linesNeeded - currentIndex if (remainingSpace >= repeatPattern.length) { - generatedLines.push(...repeatPattern) + oneCycle.push(...repeatPattern) currentIndex += repeatPattern.length } else { - // 如果剩余空间不够一个完整模式，就用1号线填充 + // 如果剩余空间不够一个完整模式，就添加部分模式 for (let i = 0; i < remainingSpace; i++) { - generatedLines.push({ type: 1 }) + oneCycle.push(repeatPattern[i % repeatPattern.length]) } break } } + // 复制内容，创建两倍的内容用于无缝循环 + generatedLines.push(...oneCycle, ...oneCycle) + return generatedLines } @@ -124,6 +129,18 @@ onUnmounted(() => { gap: 0.96rem; height: 120px; flex-wrap: nowrap; + animation: scrollLeft 3.75s linear infinite; + overflow: hidden; + white-space: nowrap; +} + +@keyframes scrollLeft { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } } .line { diff --git a/src/views/asistant/components/InputArea.vue b/src/views/asistant/components/InputArea.vue index bde800c..a04ffdc 100644 --- a/src/views/asistant/components/InputArea.vue +++ b/src/views/asistant/components/InputArea.vue @@ -22,6 +22,7 @@
{ flex: 1; display: flex; align-items: center; + overflow: hidden; + // height: 100%; } .text-input { width: 100%; + // height: 100%; + height: auto; + // min-height: 4.8rem; + // max-height: 100%; border: none; outline: none; background: transparent; @@ -255,6 +262,7 @@ const stopRecording = () => { // padding-right: 2rem; margin-right: 4.21rem; color: #000; + // resize: none; &::placeholder { color: #888; @@ -262,6 +270,7 @@ const stopRecording = () => { font-weight: 400; font-family: 'robotoBold'; word-spacing: -5px; + line-height: 4.8rem; } } diff --git a/src/views/asistant/components/NoticeList.vue b/src/views/asistant/components/NoticeList.vue index ca2b8e7..c75cc42 100644 --- a/src/views/asistant/components/NoticeList.vue +++ b/src/views/asistant/components/NoticeList.vue @@ -1,19 +1,15 @@ diff --git a/src/views/asistant/index.vue b/src/views/asistant/index.vue index ffe6f1a..eb8d0ce 100644 --- a/src/views/asistant/index.vue +++ b/src/views/asistant/index.vue @@ -8,12 +8,12 @@
@@ -25,33 +25,103 @@ import NoticeList from './components/NoticeList.vue' import InputArea from './components/InputArea.vue' import ChatLoading from './components/ChatLoading.vue' import { ref, onMounted } from 'vue' +import { useRouter } from 'vue-router' +const router = useRouter() // 定义NoticeList组件引用类型 interface NoticeListRef { simulateSendMessage: () => void } +// 定义消息类型 +interface ChatMessage { + id: string + content: string + userId: string + time: string + thumb: string +} const isLoading = ref(false) const noticeListRef = ref(null) +const messageList = ref([ + { + id: '1', + content: 'I want a chic outfit for dinner.', + userId: '1', + time: '14:30', + thumb: '' + }, + { + id: '2', + content: + "Hey there! A chic dinner outfit, I love that! To give you the perfect recommendations, tell me: is this a romantic date, business dinner, or celebration with friends? And what's your go-to style vibe: classic elegance or something with more edge?", + userId: '2', + time: '14:31', + thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg' + }, + { + id: '3', + content: "It's a romantic date, and I prefer classic elegance.", + userId: '1', + time: '14:32', + thumb: '' + }, + { + id: '4', + content: + "Perfect! For a romantic dinner with classic elegance, I'd suggest a little black dress with delicate jewelry and elegant heels. Would you like me to show you some specific options?", + userId: '2', + time: '14:33', + thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg' + } +]) onMounted(() => { // handleSendMessage('123') }) +let loadingTimer: any = null const handleSendMessage = (message: string): void => { console.log('收到消息:', message) - // 显示loading状态 - isLoading.value = true + messageList.value.push({ + id: '1', + content: message, + userId: '1', + time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }), + thumb: '' + }) + // // 模拟请求延迟 + // setTimeout(() => { + // // 调用NoticeList的方法添加新消息 + // if (noticeListRef.value) { + // isLoading.value = true + + // loadingTimer = setTimeout(() => { + // const newMessage: ChatMessage = { + // id: Date.now().toString(), + // content: + // "Thanks for your message! I'm processing your request and will provide you with the best fashion advice.", + // userId: '2', + // time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }), + // thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg' + // } + // messageList.value.push(newMessage) + // isLoading.value = false + // }, 3000) + // } + // }, 10000) // 3秒后完成 +} + +const handleContinue = () => { + // router.push('/workshop/selectStyle') + // 模拟接口之后再跳转 + isLoading.value = true setTimeout(() => { - // 调用NoticeList的方法添加新消息 - if (noticeListRef.value) { - noticeListRef.value.simulateSendMessage() - } - // 隐藏loading状态 - isLoading.value = false - }, 10000) // 3秒后完成 + router.push('/workshop/selectStyle') + // isLoading.value = false + }, 1000) }