Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/lanecarford_front

src/views/asistant/components/GenerateLoading.vue

@@ -4,12 +4,19 @@
       <img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
       <!-- 阴影效果 -->
       <div class="loading-shadow"></div>
-      <div class="loading-text">{{ title }}</div>
+      <div class="loading-text" ref="textBox">
+		<span>{{ text }}</span>
+		<div class="loading-dot" ref="dotBox"></div>
+	  </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { onMounted, watch, reactive, toRefs, nextTick, ref } from "vue";
+import { gsap, TweenMax } from "gsap";
+
+
 // 这个组件只负责显示loading动画
 
 // 定义组件props类型
@@ -20,6 +27,76 @@ const props = defineProps({
 	}
 })
 
+const dotBox = ref(null)
+const textBox = ref(null)
+let tl1 = null;
+const text = ref('')
+
+watch(() => props.title, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+	destroyAnimation()
+	fadeOut(newVal)
+  }
+})
+
+function fadeOut(newVal) {
+    gsap.to(textBox.value,.5, {
+      opacity: 0,
+      duration: 1,
+	  ease: "power2.in",
+      onComplete: () => {
+        // 消失后更换文字
+        text.value = newVal
+        // 然后出现
+        fadeIn();
+      }
+    });
+  }
+  
+// 出现动画
+function fadeIn() {
+	gsap.to(textBox.value,.5, {
+		opacity: 1,
+		duration: 1,
+		onComplete:()=>{
+			setTl1();
+		}
+	});
+}
+
+const setTl1 = ()=>{
+	nextTick(()=>{
+		let el = dotBox.value
+		let width = el.offsetWidth + el.parentElement.offsetWidth
+		let time = el.parentElement.offsetWidth / 35
+		console.log(time,width)
+		tl1 = gsap.timeline();
+		tl1.to(el,time, 
+			{
+				ease: "power1.in",
+				left:width,
+				onComplete:()=>{
+					setTimeout(() => {
+						tl1.restart()
+					}, 1000)
+				}
+			},
+		)
+		tl1.progress(0);
+	})
+}
+
+function destroyAnimation() {
+	if (tl1) {
+		tl1.progress(0);
+		tl1.kill();
+		tl1 = null;
+	}
+}
+onMounted(() => {
+	text.value = props.title
+	setTl1()
+})
 
 </script>
 
@@ -54,6 +131,18 @@ const props = defineProps({
   font-size: 4.8rem;
   letter-spacing: 0.02em;
   line-height: 124%;
+  position: relative;
+}
+
+.loading-dot{
+	height: 100%;
+	aspect-ratio: 1/1;
+	background: radial-gradient(ellipse 150% 150% at center, #ffffff,rgba(255,255,255,.4), transparent);
+	border-radius: 50%;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	transform: translate(-100%, -50%);
 }
 
 @keyframes rotate {