feat：添加右侧视频效果

.gitignore

@@ -0,0 +1,101 @@
+node_modules/
+unpackage/cache/certdata
+unpackage/cache/apk/__UNI__E15E1AD_cm.apk
+unpackage/cache/apk/apkurl
+unpackage/cache/apk/cmManifestCache.json
+unpackage/cache/cloudcertificate/certini
+unpackage/cache/cloudcertificate/package.keystore
+unpackage/cache/wgt/__UNI__E15E1AD/__uniappautomator.js
+unpackage/cache/wgt/__UNI__E15E1AD/__uniappchooselocation.js
+unpackage/cache/wgt/__UNI__E15E1AD/__uniapperror.png
+unpackage/cache/wgt/__UNI__E15E1AD/__uniappopenlocation.js
+unpackage/cache/wgt/__UNI__E15E1AD/__uniapppicker.js
+unpackage/cache/wgt/__UNI__E15E1AD/__uniappquill.js
+unpackage/cache/wgt/__UNI__E15E1AD/__uniappquillimageresize.js
+unpackage/cache/wgt/__UNI__E15E1AD/__uniappscan.js
+unpackage/cache/wgt/__UNI__E15E1AD/__uniappsuccess.png
+unpackage/cache/wgt/__UNI__E15E1AD/__uniappview.html
+unpackage/cache/wgt/__UNI__E15E1AD/app.css
+unpackage/cache/wgt/__UNI__E15E1AD/app-config.js
+unpackage/cache/wgt/__UNI__E15E1AD/app-config-service.js
+unpackage/cache/wgt/__UNI__E15E1AD/app-service.js
+unpackage/cache/wgt/__UNI__E15E1AD/manifest.json
+unpackage/cache/wgt/__UNI__E15E1AD/uni-app-view.umd.js
+unpackage/cache/wgt/__UNI__E15E1AD/.manifest/icon-android-hdpi.png
+unpackage/cache/wgt/__UNI__E15E1AD/.manifest/icon-android-xhdpi.png
+unpackage/cache/wgt/__UNI__E15E1AD/.manifest/icon-android-xxhdpi.png
+unpackage/cache/wgt/__UNI__E15E1AD/.manifest/icon-android-xxxhdpi.png
+unpackage/cache/wgt/__UNI__E15E1AD/pages/index15/index15.css
+unpackage/cache/wgt/__UNI__E15E1AD/pages/index32/index32.css
+unpackage/cache/wgt/__UNI__E15E1AD/static/Ai-avatar.png
+unpackage/cache/wgt/__UNI__E15E1AD/static/logo.jpg
+unpackage/cache/wgt/__UNI__E15E1AD/static/logo.png
+unpackage/cache/wgt/__UNI__E15E1AD/static/user-avatar.png
+unpackage/dist/build/.nvue/app.css.js
+unpackage/dist/build/.nvue/app.js
+unpackage/dist/build/app-plus/__uniappautomator.js
+unpackage/dist/build/app-plus/__uniappchooselocation.js
+unpackage/dist/build/app-plus/__uniapperror.png
+unpackage/dist/build/app-plus/__uniappopenlocation.js
+unpackage/dist/build/app-plus/__uniapppicker.js
+unpackage/dist/build/app-plus/__uniappquill.js
+unpackage/dist/build/app-plus/__uniappquillimageresize.js
+unpackage/dist/build/app-plus/__uniappscan.js
+unpackage/dist/build/app-plus/__uniappsuccess.png
+unpackage/dist/build/app-plus/__uniappview.html
+unpackage/dist/build/app-plus/app.css
+unpackage/dist/build/app-plus/app-config.js
+unpackage/dist/build/app-plus/app-config-service.js
+unpackage/dist/build/app-plus/app-service.js
+unpackage/dist/build/app-plus/manifest.json
+unpackage/dist/build/app-plus/uni-app-view.umd.js
+unpackage/dist/build/app-plus/pages/index15/index15.css
+unpackage/dist/build/app-plus/pages/index32/index32.css
+unpackage/dist/build/app-plus/static/Ai-avatar.png
+unpackage/dist/build/app-plus/static/logo.jpg
+unpackage/dist/build/app-plus/static/logo.png
+unpackage/dist/build/app-plus/static/user-avatar.png
+unpackage/dist/cache/.vite/deps/_metadata.json
+unpackage/dist/cache/.vite/deps/axios.js
+unpackage/dist/cache/.vite/deps/axios.js.map
+unpackage/dist/cache/.vite/deps/axios-adapter-uniapp.js
+unpackage/dist/cache/.vite/deps/axios-adapter-uniapp.js.map
+unpackage/dist/cache/.vite/deps/chunk-P2LSHJDD.js
+unpackage/dist/cache/.vite/deps/chunk-P2LSHJDD.js.map
+unpackage/dist/cache/.vite/deps/package.json
+unpackage/dist/dev/.nvue/app.css.js
+unpackage/dist/dev/.nvue/app.js
+unpackage/dist/dev/app-plus/__uniappautomator.js
+unpackage/dist/dev/app-plus/__uniappchooselocation.js
+unpackage/dist/dev/app-plus/__uniapperror.png
+unpackage/dist/dev/app-plus/__uniappopenlocation.js
+unpackage/dist/dev/app-plus/__uniapppicker.js
+unpackage/dist/dev/app-plus/__uniappquill.js
+unpackage/dist/dev/app-plus/__uniappquillimageresize.js
+unpackage/dist/dev/app-plus/__uniappscan.js
+unpackage/dist/dev/app-plus/__uniappsuccess.png
+unpackage/dist/dev/app-plus/__uniappview.html
+unpackage/dist/dev/app-plus/app.css
+unpackage/dist/dev/app-plus/app-config.js
+unpackage/dist/dev/app-plus/app-config-service.js
+unpackage/dist/dev/app-plus/app-service.js
+unpackage/dist/dev/app-plus/manifest.json
+unpackage/dist/dev/app-plus/uni-app-view.umd.js
+unpackage/dist/dev/app-plus/pages/index15/index15.css
+unpackage/dist/dev/app-plus/pages/index32/index32.css
+unpackage/dist/dev/app-plus/static/Ai-avatar.png
+unpackage/dist/dev/app-plus/static/logo.jpg
+unpackage/dist/dev/app-plus/static/logo.png
+unpackage/dist/dev/app-plus/static/user-avatar.png
+unpackage/release/apk/__UNI__E15E1AD__20240929133919.apk
+unpackage/release/apk/__UNI__E15E1AD__20240929140146.apk
+unpackage/release/apk/__UNI__E15E1AD__20240929142849.apk
+unpackage/release/apk/__UNI__E15E1AD__20240929145000.apk
+unpackage/release/apk/__UNI__E15E1AD__20240929164354.apk
+unpackage/release/apk/__UNI__E15E1AD__20240930090746.apk
+unpackage/release/apk/__UNI__E15E1AD__20240930092106.apk
+unpackage/release/apk/__UNI__E15E1AD__20240930092417.apk
+unpackage/release/apk/__UNI__E15E1AD__20240930172145.apk
+unpackage/cache/wgt/__UNI__E15E1AD/nativeplugins/tts/package.json
+unpackage/cache/wgt/__UNI__E15E1AD/nativeplugins/tts/android/tts_lib1.0.1.aar
+unpackage/debug/android_debug.apk

components/styleChange.vue

@@ -1,9 +0,0 @@
-<template>
-</template>
-
-<script setup>
-	
-</script>
-
-<style>
-</style>

pages/index15/index15.vue

@@ -1,5 +1,5 @@
 <template>
-	<view id='app' :style="`bottom:${msgList.KeyBoardHeight}px`">
+	<view id='app' :style="`bottom:${msgList.KeyBoardHeight}px;background-color:${styleData.color}`">
 		<view class="head" :style="{backgroundColor:styleData.color}">
 			<text :style="{color:styleData.fontColor}">睿宝AI</text>
 			<view class="switch">
@@ -17,7 +17,10 @@
 								<!-- user方-聊天内容 -->
 								<view class="item self" v-if="item.userContent != ''">
 									<image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
-									<view class="content right" disabled :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">{{ item.userContent }}</view>
+									<view class="content right" disabled
+										:style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
+										{{ item.userContent }}
+									</view>
 								</view>
 								<!-- ai方-聊天内容 -->
 								<view class="item other">
@@ -25,34 +28,42 @@
 										<view class="loadingPoint" v-if='msgList.isloading[index]'>
 											<loadingPointsVue></loadingPointsVue>
 										</view>
-										<view class="content left" v-if='!msgList.isloading[index]' :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
-											{{ msgList.otherChatList[index] }}</view>
+										<view class="content left" v-if='!msgList.isloading[index]'
+											:style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
+											{{ msgList.otherChatList[index] }}
+										</view>
 									</view>
 									<image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
 								</view>
 							</view>
-						</view>	
+						</view>
 					</scroll-view>
 				</view>
 
-				<view class="chat-bottom" >
+				<view class="chat-bottom">
 					<view class="uni-label">
-						<label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)" :style="{backgroundColor:styleData.labelColor,color:styleData.fontColor,borderColor:styleData.borderColor}">{{item}}</label>
+						<label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)"
+							:style="{backgroundColor:styleData.labelColor,color:styleData.fontColor,borderColor:styleData.borderColor}">{{item}}</label>
 					</view>
 					<view class="send-msg">
-						<view class="uni-textarea">
+						<view class="uni-textarea" :style="`background-color:${styleData.labelColor};font-color:${styleData.fontColor};`">
 							<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
-								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" 
-								@keyboardheightchange="getKeyBoardHeight" :adjust-position="false"/>
+								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300"
+								@keyboardheightchange="getKeyBoardHeight" :adjust-position="false"
+								:style="`background-color:${styleData.labelColor};font-color:${styleData.fontColor};`" />
 						</view>
 						<view class="uni-button">
-							<button class="send-btn" @click="handleSend(msgList)" type="primary" :disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
+							<button class="send-btn" @click="handleSend(msgList)" type="primary"
+								:disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
 						</view>
 					</view>
 				</view>
 			</view>
 			<view class="sidebar-right">
-				<image src="../../static/logo.png" mode="aspectFit"></image>
+				<!-- <image  src="../../static/logo.png" mode="aspectFit"></image> -->
+				<video class="video" :class="{active:styleData.value}" id="demoVideo" :controls="false" :loop='true'  object-fit="cover"
+					:enable-progress-gesture="false" :show-center-play-btn="false" :src="styleData.videoSrc">
+				</video>
 			</view>
 		</view>
 	</view>
@@ -61,6 +72,7 @@
 <script setup>
 	import {
 		nextTick,
+		onMounted,
 		reactive,
 		ref,
 		watch
@@ -72,8 +84,31 @@
 
 	import axios from 'axios';
 	import loadingPointsVue from '../../components/loadingPoints.vue';
-	import {styleChange,handleSend,scrollToBottom,shortcuts} from "../../until/fun.js"
+	import {
+		styleChange,
+		handleSend,
+		scrollToBottom,
+		shortcuts
+	} from "../../until/fun.js"
 
+	// ----------------------------------------
+	// 测试代码
+	const videlSrc = '../../static/video/whiteVideo.mp4'
+	// let demoVideo = uni.createVideoContext('demoVideo')
+	// // 
+	// let a = 0
+	// const aaa = () => {
+	// 	if (a++ % 2 == 0) {
+	// 		// 停止
+	// 		demoVideo.seek(0)
+	// 		demoVideo.pause()
+	// 	} else {
+	// 		// 播放
+	// 		demoVideo.play()
+	// 	}
+
+	// }
+	// --------------------------------------
 	const msgList = reactive({
 		// 输入框
 		chatMsg: '',
@@ -92,19 +127,21 @@
 		len: 0,
 		// 加载符号是否显示
 		isloading: [],
-		isClick:false,
-		KeyBoardHeight:0
+		isClick: false,
+		KeyBoardHeight: 0,
+		demoVideo: uni.createVideoContext('demoVideo'),
 	})
-	
+
 	const styleData = reactive({
-		value:false,
-		color:'#f5f5f5',
-		fontColor:"black",
-		btnColor:"rgb(30,144,255)",
-		contentColor:"#fff",
-		labelColor: "#fff",
-		borderColor:"rgb(30,144,255)"
+		value: false,
+		color: '#fff',
+		fontColor: "black",
+		btnColor: "rgb(30,144,255)",
+		contentColor: "#f5f5f5",
+		labelColor: '#f5f5f5',
+		borderColor: "rgb(30,144,255)",
 		
+		videoSrc : '../../static/video/whiteVideo.mp4'
 	})
 
 	const labelList = ref([
@@ -117,16 +154,15 @@
 	])
 
 	//滚动至聊天底部
-	watch([msgList.otherChatList,msgList.chatList], (newVal) => {
+	watch([msgList.otherChatList, msgList.chatList], (newVal) => {
 		scrollToBottom(msgList)
 	})
-	
+
 	// 键盘弹起事件
-	const getKeyBoardHeight = ((event)=>{
+	const getKeyBoardHeight = ((event) => {
 		// 获取键盘高度
 		msgList.KeyBoardHeight = event.detail.height
 	})
-
 </script>
 
 <style>

pages/index32/index32.vue

@@ -1,5 +1,5 @@
 <template>
-	<view id='app' :style="`bottom:${msgList.KeyBoardHeight}px`">
+	<view id='app' :style="`bottom:${msgList.KeyBoardHeight}px;background-color:${styleData.color}`">
 		<view class="placeholder" :style="`height: ${styleData.screenWidth}vh`"></view>
 		<view class="head" :style="{backgroundColor:styleData.color}">
 			<text :style="{color:styleData.fontColor}">睿宝AI</text>
@@ -22,7 +22,8 @@
 									<image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
 									<view class="content right" disabled
 										:style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
-										{{ item.userContent }}</view>
+										{{ item.userContent }}
+									</view>
 								</view>
 								<!-- ai方-聊天内容 -->
 								<view class="item other">
@@ -51,8 +52,9 @@
 						<view class="uni-textarea">
 							<!-- bindkeyboardheightchange='getKeyBoardHeight'    - 添加键盘弹起触发属性 -->
 							<textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
-								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300" 
-								@keyboardheightchange="getKeyBoardHeight" :adjust-position="false" />
+								confirm-type="send" @confirm="handleSend(msgList)" maxlength="300"
+								@keyboardheightchange="getKeyBoardHeight" :adjust-position="false"
+								:style="`background-color:${styleData.labelColor};`" />
 						</view>
 						<view class="uni-button">
 							<button class="send-btn" @click="handleSend(msgList)" type="primary"
@@ -62,7 +64,10 @@
 				</view>
 			</view>
 			<view class="sidebar-right" :style="`height:${95-styleData.screenWidth}vh`">
-				<image src="../../static/logo.png" mode="aspectFit" ></image>
+				<!-- <image src="../../static/logo.png" mode="aspectFit" ></image> -->
+				<video class="video" :class="{active:styleData.value}" id="demoVideo" :controls="false" :loop='true' object-fit="cover"
+					:enable-progress-gesture="false" :show-center-play-btn="false" :src="styleData.videoSrc">
+				</video>
 			</view>
 		</view>
 	</view>
@@ -89,6 +94,7 @@
 		shortcuts
 	} from "../../until/fun.js"
 
+	// const videlSrc = '../../static/video/whiteVideo.mp4'
 
 	const msgList = reactive({
 		// 输入框
@@ -106,20 +112,23 @@
 		isloading: [],
 		isClick: false,
 		// 键盘弹起高度
-		KeyBoardHeight: 0
+		KeyBoardHeight: 0,
+		demoVideo: uni.createVideoContext('demoVideo'),
 	})
 
 	const styleData = reactive({
 		value: false,
-		color: '#f5f5f5',
+		color: '#fff',
 		fontColor: "black",
 		btnColor: "rgb(30,144,255)",
-		contentColor: "#fff",
-		labelColor: "#fff",
+		contentColor: "#f5f5f5",
+		labelColor: "#f5f5f5",
 		borderColor: "rgb(30,144,255)",
+
+		screenWidth: 40,
+		isScreen: false,
 		
-		screenWidth:40,
-		isScreen:false,
+		videoSrc : '../../static/video/whiteVideo.mp4'
 	})
 
 	const labelList = ref([
@@ -135,28 +144,28 @@
 	watch([msgList.otherChatList, msgList.chatList], (newVal) => {
 		scrollToBottom(msgList)
 	})
-	
+
 	// 屏幕 去除上屏
-	const screenChange = ()=>{
+	const screenChange = () => {
 		styleData.isScreen = !styleData.isScreen
-		if(styleData.isScreen == true){
+		if (styleData.isScreen == true) {
 			styleData.screenWidth = 0
-		}else{
+		} else {
 			styleData.screenWidth = 40
 		}
 	}
-	
+
 	// 键盘弹起事件
-	const getKeyBoardHeight = ((event)=>{
+	const getKeyBoardHeight = ((event) => {
 		// 获取键盘高度
 		msgList.KeyBoardHeight = event.detail.height
 	})
-	 
 </script>
 
 <style>
 	@import url("../../theme/chat32.css");
 	@import url("../../theme/public.css");
+
 	.second {
 		padding-left: 50rpx;
 	}

theme/chat15.css

@@ -2,18 +2,20 @@
 .pageView {
 	height: 95%;
 }
+
 .body {
 	height: 95vh;
-	width: 75%;
+	width: 68vw;
 }
-/* --- 主内容区 --- */
 
-.sidebar-right {
-	width: 20%;
-}
+/* --- 主内容区 --- */
 
-.sidebar-right image {
+/* .sidebar-right image {
 	height: 45%;
 	right: 45%;
 	margin-top: 170%;
+} */
+
+.sidebar-right .video {
+	height: 48%;
 }

theme/chat32.css

@@ -15,18 +15,16 @@
 
 .body {
 	height: 55vh;
-	width: 70vw;
+	width: 68vw;
 }
 
 /* --- 主内容区 --- */
-
-.sidebar-right {
-	width: 25vw;
-}
-
-.sidebar-right image {
+/* .sidebar-right image {
 	height: 600rpx;
 	position: absolute;
 	right: 6rpx;
 	bottom: 30rpx;
+} */
+.sidebar-right .video {
+	height: 500px;
 }

theme/public.css

@@ -1,35 +1,37 @@
 /* 15寸和32寸 公共样式*/
-#app{
+#app {
 	height: 100%;
 	width: 100%;
-	background-color: #f5f5f5;
+	/* background-color: #f5f5f5; */
 	position: fixed;
-	bottom:20px;
+	bottom: 20px;
 }
+
 /* --- 标题 --- */
 .head {
 	display: flex;
 	height: 5vh;
 	text-align: end;
 	line-height: 5vh;
-	background-color: #f5f5f5;
+	/* background-color: #f5f5f5; */
 	font-size: 18px;
 	justify-content: center;
-	margin-top:20px;
+	margin-top: 20px;
 }
-.head text{
+
+.head text {
 	flex: 1;
 }
 
-.head .switch{
+.head .switch {
 	padding-right: 100rpx;
 	flex: 1;
-} 
+}
 
 
 .pageView {
 	display: flex;
-	background-color: #f5f5f5;
+	/* background-color: #f5f5f5; */
 }
 
 .body {
@@ -70,7 +72,7 @@
 .list-wrap .scrollview .scrollview-item .item .content {
 	position: relative;
 	max-width: 1050rpx;
-	background-color: #fff;
+	/* background-color: #fff; */
 	margin: 40rpx 24rpx 0;
 	border-radius: 5px;
 	font-size: 32rpx;
@@ -92,20 +94,20 @@
 }
 
 /* 快捷标签输入 */
-.chat-bottom .uni-label{
+.chat-bottom .uni-label {
 	display: flex;
 	height: 100rpx;
 	margin-bottom: 20rpx;
 }
 
-.chat-bottom .uni-label label{
+.chat-bottom .uni-label label {
 	flex: 1;
 	text-align: center;
 	line-height: 100rpx;
 	border-radius: 100rpx;
-	background-color: #fff;
+	/* background-color: #fff; */
 	margin-right: 10rpx;
-	border: 1px solid rgb(30,144,255);
+	border: 1px solid rgb(30, 144, 255);
 }
 
 .chat-bottom .send-msg {
@@ -113,6 +115,7 @@
 }
 
 .chat-bottom .send-msg .uni-textarea {
+	border-radius: 40rpx;
 	flex: 1;
 }
 
@@ -136,7 +139,7 @@
 	line-height: 1.5;
 	padding: 25rpx;
 	right: 50rpx;
-	background-color: #fff;
+	/* background-color: #fff; */
 	margin-left: 50rpx;
 }
 
@@ -156,7 +159,27 @@
 }
 
 /* 聊天框数据加载 图标距离头像的间距 */
-.loadingPoint{
+.loadingPoint {
 	margin-right: 30px;
 }
 
+/* 右边 */
+.sidebar-right {
+	width: 32vw;
+	display: flex;
+	flex-direction: column;
+	justify-content: end;
+}
+
+.sidebar-right .video {
+	width: 100%;
+	align-items: end;
+}
+
+.sidebar-right .active {
+	mix-blend-mode: screen;
+}
+
+/deep/ .uni-video-container {
+	background-color: transparent;
+}

until/fun.js

@@ -13,7 +13,10 @@ import ttsUtils from './tts/ttsUtils';
 
 
 // 发送消息
+
 const handleSend = async (msgList) => {
+
+	msgList.demoVideo.play()
 	msgList.isClick = !msgList.isClick
 	const data = {
 		AppId: '0c8ff06b-91d9-43f7-b61e-ca5da1db15d4',
@@ -38,6 +41,8 @@ const handleSend = async (msgList) => {
 		getChatContent(msgList, obj.otherContent, msgList.len)
 		ttsUtils.toSpeak(obj.otherContent)
 
+
+
 	}
 
 	msgList.otherContent = ''
@@ -70,6 +75,10 @@ const getChatContent = ((msgList, text, index) => {
 	msgList.textCount = 0
 	msgList.isloading[index - 1] = false
 	msgList.isClick = !msgList.isClick
+	
+	// logo视频静止
+	msgList.demoVideo.seek(0)
+	msgList.demoVideo.pause()
 })
 
 // 滚动条回到最底部
@@ -94,20 +103,22 @@ const scrollToBottom = ((msgList) => {
 const styleChange = ((styleData) => {
 	styleData.value = !styleData.value
 	if (styleData.value == true) {
-		styleData.color = "rgba(0,0,0,0.8)"
+		styleData.color = "black"
 		styleData.fontColor = "#fff"
 		styleData.btnColor = "#ccc"
 		styleData.contentColor = "rgba(0,0,0,0.5)"
 		styleData.labelColor = "rgb(105,105,105)"
 		styleData.borderColor = "rgb(105,105,105)"
+		styleData.videoSrc = '../../static/video/video.mp4'
 
 	} else {
-		styleData.color = "#f5f5f5"
+		styleData.color = "#fff"
 		styleData.fontColor = "black"
 		styleData.btnColor = "rgb(30,144,255)"
-		styleData.contentColor = "#fff"
-		styleData.labelColor = "#fff"
+		styleData.contentColor = "#f5f5f5"
+		styleData.labelColor = "#f5f5f5"
 		styleData.borderColor = "rgb(30,144,255)"
+		styleData.videoSrc = '../../static/video/whiteVideo.mp4'
 	}
 
 })