From d081e0957ce827da2b832009b2ab6893ddb57e08 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Fri, 13 Oct 2023 13:41:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/animation/indexBG.vue   |  24 +++
 src/components/animation/inputing.vue  |   8 +-
 src/components/animation/loding.vue    |  10 +-
 src/components/animation/recording.vue |  10 +-
 src/views/chat/index.vue               | 286 ++++++++++++++-----------
 5 files changed, 194 insertions(+), 144 deletions(-)
 create mode 100644 src/components/animation/indexBG.vue

diff --git a/src/components/animation/indexBG.vue b/src/components/animation/indexBG.vue
new file mode 100644
index 0000000..47fb749
--- /dev/null
+++ b/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>
diff --git a/src/components/animation/inputing.vue b/src/components/animation/inputing.vue
index c0dc097..bd832ba 100644
--- a/src/components/animation/inputing.vue
+++ b/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;
diff --git a/src/components/animation/loding.vue b/src/components/animation/loding.vue
index f0a6dc0..3ccf5c8 100644
--- a/src/components/animation/loding.vue
+++ b/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);
diff --git a/src/components/animation/recording.vue b/src/components/animation/recording.vue
index 017926e..34e196d 100644
--- a/src/components/animation/recording.vue
+++ b/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;
 }
 
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index b3e3182..e09392e 100644
--- a/src/views/chat/index.vue
+++ b/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,135 +618,149 @@ const click = () => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full">
-    <HeaderComponent
-      v-if="isMobile"
-      :using-context="usingContext"
-      @export="handleExport"
-      @handle-clear="handleClear"
-    />
-    <main class="flex-1 overflow-hidden">
-      <div
-        id="scrollRef"
-        ref="scrollRef"
-        class="h-full overflow-hidden overflow-y-auto"
-      >
-        <div
-          id="image-wrapper"
-          class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
-          :class="[isMobile ? 'p-2' : 'p-4']"
-					:style="{'max-width': maxWeight + 'px'}"
-        >
-          <!-- <div @click="click">录音开始</div> -->
-          <!-- <div>
-            浏览器录音听写：<button id="btn_control" @click="click">
-              开始录音
-            </button>
-          </div>
-          <br>
-          <div id="result" ref="resultRef" /> -->
+	<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"
+				@export="handleExport"
+				@handle-clear="handleClear"
+			/>
+			<main class="flex-1 overflow-hidden">
+				<div
+					id="scrollRef"
+					ref="scrollRef"
+					class="h-full overflow-hidden overflow-y-auto"
+				>
+					<div
+						id="image-wrapper"
+						class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
+						:class="[isMobile ? 'p-2' : 'p-4']"
+						:style="{'max-width': maxWeight + 'px'}"
+					>
+						<!-- <div @click="click">录音开始</div> -->
+						<!-- <div>
+							浏览器录音听写：<button id="btn_control" @click="click">
+								开始录音
+							</button>
+						</div>
+						<br>
+						<div id="result" ref="resultRef" /> -->
 
-          <template v-if="!dataSources.length">
-            <div
-              class="flex items-center justify-center mt-4 text-center text-neutral-300"
-            >
-              <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
-              <span>欢迎来到里海AI~</span>
-            </div>
-          </template>
-          <template v-else>
-            <div>
-              <Message
-                v-for="(item, index) of dataSources"
-                :key="index"
-                :date-time="item.dateTime"
-                :text="item.text"
-                :mp3="item.mp3"
-                :inversion="item.inversion"
-                :error="item.error"
-                :loading="item.loading"
-                @regenerate="onRegenerate(index)"
-                @delete="handleDelete(index)"
-              />
-              <div class="sticky bottom-0 left-0 flex justify-center">
-                <NButton v-if="loading" type="warning" @click="handleStop">
-                  <template #icon>
-                    <SvgIcon icon="ri:stop-circle-line" />
-                  </template>
-                  {{ t("common.stopResponding") }}
-                </NButton>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </main>
-    <footer :class="footerClass">
-      <div class="w-full max-w-screen-xl m-auto"
-					:style="{'max-width': maxWeight + 'px'}">
-        <div class="flex items-center justify-between space-x-2">
-					<HoverButton v-if="recordFalg==0" @click="changeRecord">
-            <span class="text-xl text-[#4f555e] dark:text-white">
-              录音
-            </span>
-          </HoverButton>
-					<HoverButton v-else-if="recordFalg==1" @click="changeRecord">
-            <span class="text-xl text-[#4f555e] dark:text-white">
-              完成
-            </span>
-          </HoverButton>
-          <HoverButton v-if="!isMobile" @click="handleClear">
-            <span class="text-xl text-[#4f555e] dark:text-white">
-              <SvgIcon icon="ri:delete-bin-line" />
-            </span>
-          </HoverButton>
-          <!-- <HoverButton v-if="!isMobile" @click="handleExport">
-            <span class="text-xl text-[#4f555e] dark:text-white">
-              <SvgIcon icon="ri:download-2-line" />
-            </span>
-          </HoverButton> -->
-          <!-- <HoverButton @click="toggleUsingContext">
-            <span
-              class="text-xl"
-              :class="{
-                'text-[#4b9e5f]': usingContext,
-                'text-[#a8071a]': !usingContext,
-              }"
-            >
-              <SvgIcon icon="ri:chat-history-line" />
-            </span>
-          </HoverButton> -->
-          <NAutoComplete
-            v-model:value="prompt"
-            :options="searchOptions"
-            :render-label="renderOption"
-          >
-            <template #default="{ handleInput, handleBlur, handleFocus }">
-              <NInput
-                v-model:value="prompt"
-                type="textarea"
-                :placeholder="placeholder"
-                :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
-                @input="handleInput"
-                @focus="handleFocus"
-                @blur="handleBlur"
-                @keypress="handleEnter"
-              />
-            </template>
-          </NAutoComplete>
-          <NButton
-            type="primary"
-            :disabled="buttonDisabled"
-            @click="handleSubmit"
-          >
-            <template #icon>
-              <span class="dark:text-black">
-                <SvgIcon icon="ri:send-plane-fill" />
-              </span>
-            </template>
-          </NButton>
-        </div>
-      </div>
-    </footer>
-  </div>
+						<template v-if="!dataSources.length">
+							<div
+								class="flex items-center justify-center mt-4 text-center text-neutral-300"
+							>
+								<SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+								<span>欢迎来到里海AI~</span>
+							</div>
+						</template>
+						<template v-else>
+							<div>
+								<Message
+									v-for="(item, index) of dataSources"
+									:key="index"
+									:date-time="item.dateTime"
+									:text="item.text"
+									:mp3="item.mp3"
+									:inversion="item.inversion"
+									:error="item.error"
+									:loading="item.loading"
+									@regenerate="onRegenerate(index)"
+									@delete="handleDelete(index)"
+								/>
+								<div class="sticky bottom-0 left-0 flex justify-center">
+									<NButton v-if="loading" type="warning" @click="handleStop">
+										<template #icon>
+											<SvgIcon icon="ri:stop-circle-line" />
+										</template>
+										{{ t("common.stopResponding") }}
+									</NButton>
+								</div>
+							</div>
+						</template>
+					</div>
+				</div>
+			</main>
+			<footer :class="footerClass">
+				<div class="w-full max-w-screen-xl m-auto"
+						:style="{'max-width': maxWeight + 'px'}">
+					<div class="flex items-center justify-between space-x-2">
+						<HoverButton v-if="recordFalg==0" @click="changeRecord">
+							<span class="text-xl text-[#4f555e] dark:text-white">
+								录音
+							</span>
+						</HoverButton>
+						<HoverButton v-else-if="recordFalg==1" @click="changeRecord">
+							<span class="text-xl text-[#4f555e] dark:text-white">
+								完成
+							</span>
+						</HoverButton>
+						<HoverButton v-if="!isMobile" @click="handleClear">
+							<span class="text-xl text-[#4f555e] dark:text-white">
+								<SvgIcon icon="ri:delete-bin-line" />
+							</span>
+						</HoverButton>
+						<!-- <HoverButton v-if="!isMobile" @click="handleExport">
+							<span class="text-xl text-[#4f555e] dark:text-white">
+								<SvgIcon icon="ri:download-2-line" />
+							</span>
+						</HoverButton> -->
+						<!-- <HoverButton @click="toggleUsingContext">
+							<span
+								class="text-xl"
+								:class="{
+									'text-[#4b9e5f]': usingContext,
+									'text-[#a8071a]': !usingContext,
+								}"
+							>
+								<SvgIcon icon="ri:chat-history-line" />
+							</span>
+						</HoverButton> -->
+						<NAutoComplete
+							v-model:value="prompt"
+							:options="searchOptions"
+							:render-label="renderOption"
+						>
+							<template #default="{ handleInput, handleBlur, handleFocus }">
+								<NInput
+									v-model:value="prompt"
+									type="textarea"
+									:placeholder="placeholder"
+									:autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
+									@input="handleInput"
+									@focus="handleFocus"
+									@blur="handleBlur"
+									@keypress="handleEnter"
+								/>
+							</template>
+						</NAutoComplete>
+						<NButton
+							type="primary"
+							:disabled="buttonDisabled"
+							@click="handleSubmit"
+						>
+							<template #icon>
+								<span class="dark:text-black">
+									<SvgIcon icon="ri:send-plane-fill" />
+								</span>
+							</template>
+						</NButton>
+					</div>
+				</div>
+			</footer>
+		</div>
+	</div>
 </template>
+
+<style scoped>
+.my-layout{
+	justify-content: center;
+	align-items: center;
+}
+</style>