From de7f375edb82f58bc9330f4c33f0ff2079bb8aaf Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Fri, 13 Oct 2023 16:21:43 +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/views/chat/index.vue | 268 +++++++++++++++++++++------------------
 1 file changed, 145 insertions(+), 123 deletions(-)

diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index de9e1b5..43e9998 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -609,6 +609,10 @@ window.addEventListener('test', (e) => {
     prompt.value = window.winText
 })
 
+setTimeout(()=>{
+	nowStart.value = false;
+}, 800)
+
 </script>
 
 <template>
@@ -622,136 +626,138 @@ window.addEventListener('test', (e) => {
 				<!-- <lodingCir v-else-if="nowStatus=='loding'" key="loding"></lodingCir> -->
 			</transition>
 		</indexBG>
-		<div v-if="!nowStart" 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"
-				>
+		<transition name="slide-right-to-left">
+			<div v-if="!nowStart" 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="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'}"
+						id="scrollRef"
+						ref="scrollRef"
+						class="h-full overflow-hidden overflow-y-auto"
 					>
-						<!-- <div @click="click">录音开始</div> -->
-						<!-- <div>
-							浏览器录音听写：<button id="btn_control" @click="click">
-								开始录音
-							</button>
-						</div>
-						<br>
-						<div id="result" ref="resultRef" /> -->
+						<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"
-									: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>
+							<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>
-							</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" />
+							<template v-else>
+								<div>
+									<Message
+										v-for="(item, index) of dataSources"
+										:key="index"
+										:date-time="item.dateTime"
+										:text="item.text"
+										: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>
-							</template>
-						</NButton>
+							</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>
-				</div>
-			</footer>
-		</div>
+				</footer>
+			</div>
+		</transition>
 	</div>
 </template>
 
@@ -772,4 +778,20 @@ window.addEventListener('test', (e) => {
   opacity: 0;
 }
 
+.slide-right-to-left-enter-active,
+.slide-right-to-left-leave-active {
+  transition: all 2.0s;
+}
+
+.slide-right-to-left-enter,
+.slide-right-to-left-leave-to {
+  opacity: 1;
+  transform: translateX(100%);
+}
+
+.slide-right-to-left-enter-to,
+.slide-right-to-left-leave {
+  opacity: 1;
+  transform: translateX(0%);
+}
 </style>