From a9732a659e9969903b03dc1e14f4185d135cb24c Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Tue, 30 Dec 2025 11:54:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E8=AF=9D=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WaveLoading.vue               | 78 ++++++++++++++++++++
 src/views/asistant/components/NoticeItem.vue |  4 +-
 2 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 src/components/WaveLoading.vue

diff --git a/src/components/WaveLoading.vue b/src/components/WaveLoading.vue
new file mode 100644
index 0000000..99f3c8d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/asistant/components/NoticeItem.vue b/src/views/asistant/components/NoticeItem.vue
index e82501a..5151ede 100644
--- a/src/views/asistant/components/NoticeItem.vue
+++ b/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()