feat: 对话加载动画

src/components/WaveLoading.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="loading-container" :style="containerStyle">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#000' // 默认颜色
+  },
+  size: {
+    type: Number,
+    default: 10 // 默认圆点大小（px）
+  },
+  spacing: {
+    type: Number,
+    default: 3 // 默认间距（px），调整为合适小尺寸
+  },
+  amplitude: {
+    type: Number,
+    default: 8 // 默认浮动幅度（px），调整为合适比例
+  },
+  duration: {
+    type: Number,
+    default: 1.2 // 默认动画持续时间（s）
+  }
+})
+
+const containerStyle = computed(() => ({
+  '--color': props.color,
+  '--size': `${props.size}px`,
+  '--spacing': `${props.spacing}px`,
+  '--amplitude': `${props.amplitude}px`,
+  '--duration': `${props.duration}s`
+}))
+</script>
+
+<style scoped>
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 可以根据需要调整容器高度或移除 */
+}
+
+.dot {
+  width: var(--size);
+  height: var(--size);
+  background-color: var(--color);
+  border-radius: 50%;
+  margin: 0 var(--spacing);
+  animation: wave var(--duration) infinite ease-in-out;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes wave {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(calc(-1 * var(--amplitude)));
+  }
+}
+</style>

src/views/asistant/components/NoticeItem.vue

@@ -9,7 +9,8 @@
     <div class="message-content">
       <div class="message-text" :class="{ streaming: isStreaming }">
         <div v-html="content"></div>
-        <span v-if="isStreaming" class="streaming-cursor">|</span>
+        <!-- <span v-if="isStreaming" class="streaming-cursor">|</span> -->
+         <WaveLoading v-if="isStreaming" />
       </div>
       <!-- <div v-if="!isMyself" class="message-actions flex">
         <SvgIcon
@@ -27,6 +28,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import MarkdownIt from 'markdown-it'
+import WaveLoading from '@/components/WaveLoading.vue'
 import { useUserInfoStore } from '@/stores'
 
 const md = new MarkdownIt()