更新

src/components/animation/indexBG.vue

@@ -0,0 +1,24 @@
+<script>
+</script>
+
+<template>
+  <div class="box">
+		<slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.box {
+	width: 400px;
+	height: 300px;
+	border-radius: 20px;
+	/* background-color: rgba(97, 161, 140, 0.3); */
+	/* position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%); */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+</style>

src/components/animation/inputing.vue

@@ -14,8 +14,8 @@
 
 <style scoped>
 .dots {
-  width: 3em;
-  height: 3em;
+  width: 20em;
+  height: 20em;
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   grid-template-columns: repeat(3, 1fr);
@@ -24,8 +24,8 @@
 }
 
 .dots > div {
-  width: 0.5em;
-  height: 0.5em;
+  width: 4em;
+  height: 4em;
   background-color: #3cefff;
   border-radius: 50%;
   animation: fade 1.5s alternate ease-in-out infinite;

src/components/animation/loding.vue

@@ -5,9 +5,9 @@
 <style scoped>
 div {
   position: relative;
-  width: 2em;
-  height: 2em;
-  border: 3px solid #3cefff;
+  width: 20em;
+  height: 20em;
+  border: 2em solid #3cefff;
   overflow: hidden;
   animation: spin 3s ease infinite;
 }
@@ -17,8 +17,8 @@ div::before {
   position: absolute;
   top: -3px;
   left: -3px;
-  width: 2em;
-  height: 2em;
+  width: 20em;
+  height: 20em;
   background-color: hsla(185, 100%, 62%, 0.75);
   transform-origin: center bottom;
   transform: scaleY(1);

src/components/animation/recording.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="div">
     <span />
     <span />
     <span />
@@ -8,17 +8,17 @@
 </template>
 
 <style scoped>
-div {
+.div {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
-  width: 2em;
+  width: 20em;
 }
 
 span {
-  width: 0.3em;
-  height: 1em;
+  width: 3em;
+  height: 6em;
   background-color: #3cefff;
 }
 

src/views/chat/index.vue

@@ -21,6 +21,10 @@ import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore, usePromptStore } from '@/store'
 import { fetchChatAPIProcess } from '@/api'
 import { t } from '@/locales'
+import indexBG from "@/components/animation/indexBG.vue"
+import recording from "@/components/animation/recording.vue"
+import inputing from "@/components/animation/inputing.vue"
+import loding from "@/components/animation/loding.vue"
 
 import IatRecorder from '@/utils/test.js'
 // import IatRecorder from '@/utils/larRcorder.js'
@@ -53,10 +57,13 @@ user_channel.on('message', (data: any) => {
   if (recordFalg.value == 0) {
     RecordXunfei()
     recordFalg.value = 1
+		nowStauts.value = 'record'
   }
   else {
     RecordXunfei()
     recordFalg.value = 0
+		nowStauts.value = 'loding'
+		handleSubmit()
   }
 })
 
@@ -64,10 +71,12 @@ const changeRecord = ()=>{
 	if (recordFalg.value == 0) {
     RecordXunfei()
     recordFalg.value = 1
+		nowStauts.value = 'record'
   }
   else {
     RecordXunfei()
     recordFalg.value = 0
+		nowStauts.value = 'loding'
   }
 }
 
@@ -99,6 +108,7 @@ const conversationList = computed(() =>
 const prompt = ref<string>('')
 const loading = ref<boolean>(false)
 const inputRef = ref<Ref | null>(null)
+const nowStauts = ref('input') // 当前系统状态, input等待, loding加载, record录音
 
 // 添加PromptStore
 const promptStore = usePromptStore()
@@ -194,6 +204,7 @@ async function onConversation() {
           },
         ],
       }))
+			nowStauts = 'loding'
 
       // 监听WebSocket接收消息事件
       socket.onmessage = (event: any) => {
@@ -203,6 +214,7 @@ async function onConversation() {
         lastText += msg.payload.choices.text[0].content
         mp3.push(msg.payload.choices.mp3)
         const loading = true
+				nowStauts = 'input'
         updateChat(
           +uuid,
           dataSources.value.length - 1,
@@ -606,7 +618,13 @@ const click = () => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full">
+	<div class="flex w-full h-full my-layout">
+		<indexBG v-if="!isMobile">
+			<recording v-if="nowStauts=='record'"></recording>
+			<loding v-else-if="nowStauts=='loding'"></loding>
+			<inputing v-else></inputing>
+		</indexBG>
+		<div class="flex flex-col w-full h-full" :style="{'max-width': maxWeight + 'px'}">
 			<HeaderComponent
 				v-if="isMobile"
 				:using-context="usingContext"
@@ -737,4 +755,12 @@ const click = () => {
 				</div>
 			</footer>
 		</div>
+	</div>
 </template>
+
+<style scoped>
+.my-layout{
+	justify-content: center;
+	align-items: center;
+}
+</style>