feat: 聊天列表自动滚动到底部&跳转下一步

2025-10-16 16:03:01 +08:00
parent ba01a588da
commit 755fcb6c5e
4 changed files with 145 additions and 84 deletions
--- 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 {
--- a/src/views/asistant/components/InputArea.vue
+++ b/src/views/asistant/components/InputArea.vue
@@ -22,6 +22,7 @@
      <!-- 正常状态：显示输入框 -->
      <div class="input-wrapper">
        <input
+          id="textarea"
          v-show="!isRecording"
          v-model="inputValue"
          type="text"
@@ -241,10 +242,16 @@ const stopRecording = () => {
  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;
  }
 }

--- a/src/views/asistant/components/NoticeList.vue
+++ b/src/views/asistant/components/NoticeList.vue
@@ -1,19 +1,15 @@
 <template>
-  <div class="chat-list">
-    <div class="chat-message-item" v-for="message in chatMessages" :key="message.id">
+  <div class="chat-list" ref="chatListRef">
+    <div class="chat-message-item" v-for="message in list" :key="message.id">
      <NoticeItem :value="message" @send-message="handleSendMessage" />
    </div>
-    <!-- Loading效果 -->
-    <div v-if="isLoading" class="chat-message-item">
-      <ChatLoading />
-    </div>
  </div>
 </template>

 <script setup lang="ts">
 import NoticeItem from './NoticeItem.vue'
 import ChatLoading from './ChatLoading.vue'
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'

 // 定义消息类型
 interface ChatMessage {
@@ -23,68 +19,37 @@ interface ChatMessage {
  time: string
  thumb: string
 }
+const props = defineProps<{
+  list: ChatMessage[]
+}>()

-// 定义组件暴露的方法类型
-interface NoticeListExpose {
-  simulateSendMessage: () => void
+const emits = defineEmits(['send-message'])
+
+const chatListRef = ref<HTMLElement>()
+
+// 自动滚动到底部
+const scrollToBottom = (): void => {
+  if (chatListRef.value) {
+    chatListRef.value.scrollTo({
+      top: chatListRef.value.scrollHeight,
+      behavior: 'smooth'
+    })
+  }
 }

-const isLoading = ref<boolean>(false)
-let loadingTimer: any = null
-
-const chatMessages = ref<ChatMessage[]>([
-  {
-    id: '1',
-    content: 'I want a chic outfit for dinner.',
-    userId: '1',
-    time: '14:30',
-    thumb: ''
+// 监听消息列表变化，自动滚动到底部
+watch(
+  () => props.list,
+  async () => {
+    await nextTick()
+    scrollToBottom()
  },
-  {
-    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'
-  }
-])
+  { deep: true }
+)

 const handleSendMessage = (message: string): void => {
  console.log('list发送消息:', message)
-}
-
-const simulateSendMessage = (): void => {
-  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'
-    }
-
-    chatMessages.value.push(newMessage)
-    isLoading.value = false
-  }, 3000)
+  emits('send-message', message)
 }
 </script>

--- a/src/views/asistant/index.vue
+++ b/src/views/asistant/index.vue
@@ -8,12 +8,12 @@
    </div>
    <template v-else>
      <div class="content flex-1" v-if="!isLoading">
-        <NoticeList ref="noticeListRef" @send-message="handleSendMessage" />
+        <NoticeList ref="noticeListRef" :list="messageList" @send-message="handleSendMessage" />
      </div>
      <div class="footer" v-if="!isLoading">
        <InputArea @send-message="handleSendMessage" />
        <div class="continue">
-          <button class="btn">Continue</button>
+          <button class="btn" @click="handleContinue">Continue</button>
        </div>
      </div>
    </template>
@@ -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<boolean>(false)
 const noticeListRef = ref<NoticeListRef | null>(null)
+const messageList = ref<ChatMessage[]>([
+  {
+    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) {
-      noticeListRef.value.simulateSendMessage()
+  // 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秒后完成
 }
-    // 隐藏loading状态
-    isLoading.value = false
-  }, 10000) // 3秒后完成
+
+const handleContinue = () => {
+  // router.push('/workshop/selectStyle')
+  // 模拟接口之后再跳转
+  isLoading.value = true
+  setTimeout(() => {
+    router.push('/workshop/selectStyle')
+    // isLoading.value = false
+  }, 1000)
 }
 </script>
 <style lang="less" scoped>