完善 ws模块封装 Lottie完成引入

common/websocket.js

@@ -0,0 +1,182 @@
+// websocket.js
+// 封装一个兼容多端的 uniapp WebSocket 管理类，支持自动重连与心跳机制，便于在uni-app项目中统一管理WebSocket连接
+
+class UniWebSocket {
+  /**
+   * 构造函数，初始化WebSocket管理器
+   * @param {string} url - WebSocket服务器地址
+   * @param {object} options - 可选配置项，如最大重连次数、心跳间隔等
+   */
+  constructor(url, options = {}) {
+    this.url = url; // WebSocket服务器地址
+    this.options = options; // 连接配置参数
+    this.socketTask = null; // uni.connectSocket返回的socket任务对象
+    this.isConnected = false; // 当前连接状态
+    this.reconnectCount = 0; // 当前已重连次数
+    this.maxReconnect = options.maxReconnect || 5; // 最大重连次数，默认5次
+    this.heartbeatInterval = options.heartbeatInterval || 30000; // 心跳包发送间隔，默认30秒
+    this.heartbeatTimer = null; // 心跳定时器
+    this.eventListeners = {
+      open: [], // 连接打开事件监听器
+      message: [], // 消息接收事件监听器
+      error: [], // 错误事件监听器
+      close: [] // 关闭事件监听器
+    };
+    this.manualClose = false; // 是否为手动关闭连接
+  }
+
+  /**
+   * 建立WebSocket连接
+   * 若已连接则不重复连接
+   */
+  connect() {
+    if (this.isConnected) return;
+    this.manualClose = false;
+    this.socketTask = uni.connectSocket({
+      url: this.url,
+      ...this.options
+    });
+    this._initEvent(); // 初始化事件监听
+  }
+
+  /**
+   * 初始化WebSocket事件监听（open、message、error、close）
+   * 绑定到socketTask对象
+   * @private
+   */
+  _initEvent() {
+    // 连接成功事件
+    this.socketTask.onOpen = (res) => {
+      this.isConnected = true;
+      this.reconnectCount = 0;
+      this._emit('open', res);
+      this._startHeartbeat(); // 启动心跳
+    };
+    // 接收到消息事件
+    this.socketTask.onMessage = (res) => {
+      this._emit('message', res);
+      this._startHeartbeat(); // 收到消息后重置心跳
+    };
+    // 连接错误事件
+    this.socketTask.onError = (err) => {
+      this._emit('error', err);
+      this._reconnect(); // 尝试重连
+    };
+    // 连接关闭事件
+    this.socketTask.onClose = (res) => {
+      this.isConnected = false;
+      this._emit('close', res);
+      this._stopHeartbeat(); // 停止心跳
+      if (!this.manualClose) {
+        this._reconnect(); // 非手动关闭时自动重连
+      }
+    };
+  }
+
+  /**
+   * 发送消息到WebSocket服务器
+   * @param {string|object} data - 要发送的数据，支持字符串或对象
+   * @returns {Promise} - 发送成功/失败的Promise
+   */
+  send(data) {
+    return new Promise((resolve, reject) => {
+      if (!this.isConnected) {
+        reject('WebSocket 未连接');
+        return;
+      }
+      this.socketTask.send({
+        data: typeof data === 'string' ? data : JSON.stringify(data),
+        success: resolve,
+        fail: reject
+      });
+    });
+  }
+
+  /**
+   * 主动关闭WebSocket连接
+   * @param {number} code - 关闭码，默认1000
+   * @param {string} reason - 关闭原因
+   */
+  close(code = 1000, reason = '') {
+    this.manualClose = true;
+    if (this.socketTask) {
+      this.socketTask.close({ code, reason });
+    }
+    this._stopHeartbeat();
+  }
+
+  /**
+   * 注册事件监听器
+   * @param {string} event - 事件名（open/message/error/close）
+   * @param {function} callback - 回调函数
+   */
+  on(event, callback) {
+    if (this.eventListeners[event]) {
+      this.eventListeners[event].push(callback);
+    }
+  }
+
+  /**
+   * 移除事件监听器
+   * @param {string} event - 事件名
+   * @param {function} callback - 需移除的回调函数
+   */
+  off(event, callback) {
+    if (this.eventListeners[event]) {
+      this.eventListeners[event] = this.eventListeners[event].filter(fn => fn !== callback);
+    }
+  }
+
+  /**
+   * 触发事件，调用所有注册的监听器
+   * @param {string} event - 事件名
+   * @param {any} data - 事件数据
+   * @private
+   */
+  _emit(event, data) {
+    if (this.eventListeners[event]) {
+      this.eventListeners[event].forEach(fn => fn(data));
+    }
+  }
+
+  /**
+   * 自动重连逻辑，递增重连次数，超出最大次数则停止
+   * @private
+   */
+  _reconnect() {
+    if (this.reconnectCount < this.maxReconnect) {
+      this.reconnectCount++;
+      setTimeout(() => {
+        this.connect();
+      }, 1000 * this.reconnectCount); // 重连间隔递增
+    }
+  }
+
+  /**
+   * 启动心跳机制，定时发送ping包保持连接活跃
+   * @private
+   */
+  _startHeartbeat() {
+    this._stopHeartbeat();
+    if (this.heartbeatInterval > 0) {
+      this.heartbeatTimer = setInterval(() => {
+        if (this.isConnected) {
+          this.send('ping').catch(() => {});
+        }
+      }, this.heartbeatInterval);
+    }
+  }
+
+  /**
+   * 停止心跳机制
+   * @private
+   */
+  _stopHeartbeat() {
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer);
+      this.heartbeatTimer = null;
+    }
+  }
+}
+
+export default UniWebSocket;

components/w-waterfall/w-waterfall.vue

@@ -49,7 +49,7 @@ export default {
 		const screenRate = screenWidth / 750;
 		const gap = ((this.columnCount - 1) * this.itemGap) + this.sideGap;
 		const itemWidth = (screenWidth - gap) / this.columnCount
-		this.width = Math.round(itemWidth * (1 / screenRate)) + 'rpx'
+		this.width = Math.round(itemWidth * (1 / screenRate)) - 40/this.columnCount + 'rpx'
 	},
 	data() {
 		return {

pages.json

@@ -394,6 +394,14 @@
 				"navigationBarTitleText" : "",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/my/dome/dome",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {

pages/make/index.vue

@@ -178,7 +178,8 @@ export default {
 			uni.$emit('check_login', () => {
 				if (type == 'cube') {
 					uni.navigateTo({
-						url: '/pages/makedetail/makeImgDetail'
+						// url: '/pages/makedetail/makeImgDetail'
+						url: '/pages/makedetail/dialogGeneration'
 					})
 				} else if (type == 'music') {
 					uni.navigateTo({

pages/makedetail/dialogGeneration.vue

@@ -61,7 +61,8 @@
 			<view class="bom-box" :style="{ bottom: 0 + 'px', height: `${190 + textareaHeight}rpx` }">
 				<!-- 底部输入区 -->
 				<view class="input-bar">
-					<image class="icon-img" src="../../static/makedetail/characterProfilePicture.png" mode="aspectFill"></image>
+					<image class="icon-img" src="../../static/makedetail/characterProfilePicture.png" mode="aspectFill">
+					</image>
 					<textarea :autoHeight="true" class="input-box" :adjust-position="false" v-model="question"
 						:disabled="isLoading" placeholder="给我发送消息吧..." @keyup.enter="onSend" maxlength="400"
 						confirm-type="send" @input="onTextareaInput" rows="1"
@@ -70,12 +71,12 @@
 						'生成中...' :
 						'发送' }}</button> -->
 					<image v-if="isLoading" class="stop" src="../../static/makedetail/stop.png" mode=""
-						@click="stopStreamAnswer" />	
+						@click="stopStreamAnswer" />
 					<image v-else-if="!isLoading && !question.trim() && keyboardHeight === 0" class="keyboard"
 						src="../../static/makedetail/keyboard.png" mode="" />
-					
-					<image v-else-if="!isLoading && question.trim() && keyboardHeight === 0" class="send" src="../../static/makedetail/send.png"
-						mode="" @click="onSend" />
+
+					<image v-else-if="!isLoading && question.trim() && keyboardHeight !== 0" class="send"
+						src="../../static/makedetail/send.png" mode="" @click="onSend" />
 				</view>
 				<!-- 底部提示 -->
 				<view class="footer-tip">内容由AI生成，禁用相关功能请联系管理员。</view>
@@ -121,6 +122,7 @@ export default {
 			});
 		},
 		async startStreamAnswer(content) {
+			
 			if (!content.trim()) {
 				uni.showToast({
 					title: '请输入问题',
@@ -138,7 +140,6 @@ export default {
 				const decoder = new TextDecoder();
 				let aiMsg = { role: 'ai', content: '' };
 				this.messages.push(aiMsg);
-				console.log("this.messages", this.messages);
 				this.lastAiIndex = this.messages.length - 1;
 				while (true) {
 					const { value, done } = await reader.read();
@@ -158,6 +159,7 @@ export default {
 					this.scrollToBottom();
 				}
 			} catch (error) {
+				console.log("error", error);
 				this.handleError(error);
 			}
 		},
@@ -261,7 +263,7 @@ export default {
 				},
 				success: (res) => {
 					console.log("获取历史记录：", res.data.list);
-					if (res.data.success === "yes") {
+					if (res.data.success === "yes" && res.data.list) {
 						this.messages = res.data.list
 						if (res && res.data && res.data.list && res.data.list.length > 0) {
 							this.showToBottomBtn = true
@@ -287,9 +289,10 @@ export default {
 					this.textareaHeight = Math.max(0, height - 90);
 				}
 			}).exec();
-		}
+		}, 
+
 	},
-	created() {
+	created() { 
 		this.retrieveHistoricalRecords();
 		this.timer = setInterval(() => {
 			if (this.isLoading) {

pages/my/dome/dome.vue

@@ -0,0 +1,76 @@
+<template>
+    <view>
+        <c-lottie
+            ref="cLottieRef"
+            :src='src'
+            @LoopComplete="onLoopComplete" 
+            width="750rpx" height='750rpx' :loop="true"></c-lottie>
+        <view class="content">
+            <view>切换图像</view>
+            <view class="btnBox">
+                <button @click="src='../../../static/dome/xiaomeng.json'" size="mini">热销</button>
+                <button @click="src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/c42b5f05-06b9-43e7-8436-c1029eee610a.json'" size="mini">字母</button>
+            </view>
+            <view>播放暂停</view>
+            <view class="btnBox">
+                <button @click="this.$refs.cLottieRef.call('play')" size="mini">播放</button>
+                <button @click="this.$refs.cLottieRef.call('setDirection',-1)" size="mini">反向播放</button>
+                <button @click="this.$refs.cLottieRef.call('pause')" size="mini">暂停播放</button>
+                <button @click="this.$refs.cLottieRef.call('stop')" size="mini">停止播放</button>
+            </view>
+            <view>播放速度</view>
+            <view class="btnBox">
+                <button @click="this.$refs.cLottieRef.call('setSpeed',1)" size="mini">播放速度1x</button>
+                <button @click="this.$refs.cLottieRef.call('setSpeed',2)" size="mini">播放速度2x</button>
+            </view>
+            <view>播放其它设置</view>
+            <view class="btnBox">
+                <button @click="this.$refs.cLottieRef.call('goToAndStop',[2000,false])" size="mini">跳转到2s并暂停</button>
+                <button @click="this.$refs.cLottieRef.call('goToAndPlay',[2000,false])" size="mini">跳转到2s并播放</button>
+            </view>
+            <view class="btnBox">
+                <button @click="this.$refs.cLottieRef.call('goToAndStop',[2,true])" size="mini">跳转到第2帧并暂停</button>
+                <button @click="this.$refs.cLottieRef.call('goToAndPlay',[2,true])" size="mini">跳转到第2帧并播放</button>
+            </view>
+            <view class="btnBox">
+                <button @click="this.$refs.cLottieRef.call('playSegments',[[10,20],false])" size="mini">播放完之前的片段，播放10-20帧</button>
+            </view>
+            <view class="btnBox">
+                <button @click="this.$refs.cLottieRef.call('playSegments',[[[0,5],[10,18]],true])" size="mini">直接播放0-5帧和10-18帧</button>
+            </view>
+
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                src: 'https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/7b538fb7-d2d5-4524-bf21-6c20e3b5ce6f.json'
+            }
+        },
+        methods: {
+            onLoopComplete(val) {
+                // console.log('当前循环播放完成',val);
+            }
+        },
+    }
+</script>
+
+<style lang="scss">
+    .page{
+        width: 100vw;
+        overflow-x: hidden;
+    }
+    .content{
+        padding: 20rpx;
+        font-size: 28rpx;
+    }
+    .btnBox{
+        width: 100%;
+        display: flex;align-items: center;
+        margin-top: 20rpx;
+        margin-bottom: 30rpx;
+    }
+</style>