适配深色模式、生成动画的文件chatloading改为generateLoading

src/views/asistant/components/GenerateLoading.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="chat-loading">
+    <div class="loading-container flex flex-column flex-align-center">
+      <img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
+      <!-- 阴影效果 -->
+      <div class="loading-shadow"></div>
+      <div class="loading-text">{{ title }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 这个组件只负责显示loading动画
+
+// 定义组件props类型
+const props = defineProps({
+	title: {
+		type: String,
+		default: 'Analyzing the Outfit...'
+	}
+})
+
+
+</script>
+
+<style lang="less" scoped>
+.chat-loading {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.loading-container {
+  position: relative;
+}
+
+.loading-image {
+  width: 36.4rem;
+  height: 36.4rem;
+  animation: rotate 1s linear infinite;
+}
+
+.loading-shadow {
+  width: 19.6rem;
+  height: 5.2rem;
+  background-color: #d9d9d9;
+  border-radius: 50%;
+  filter: blur(35.5px);
+  margin-top: 5.1rem;
+  margin-bottom: 6.4rem;
+}
+
+.loading-text{
+  font-family: 'satoshiRegular';
+  font-size: 4.8rem;
+  letter-spacing: 0.02em;
+  line-height: 124%;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>