一些优化 (#49)

* 移动端默认网页全屏

* 移动端默认网页全屏

* 优化滚动

优化滚动到最底部时始终有一行消息没有完全滚动到视图底部

* 一些优化

经常一起看视频的时候，有时忙别的没注意到信息被教育了。优化了一些聊天信息。
发送消息时间显示（有时候在忙别的没注意看，不知道对象是什么时候发的被教育了）
本地保存聊天记录，防止不小心刷新之类了，不知道对象发了什么信息被教育~
消息列表优化了一下，如果超过消息列表最大长度，则从前面开始删除多余的消息

代码写的比较烂。。大佬可以自己改一下

* Update Cinema.vue

src/views/Cinema.vue

@@ -18,6 +18,15 @@ import type { Subtitles } from "@/types/Movie";
 
 const Player = defineAsyncComponent(() => import("@/components/Player.vue"));
 
+import { nextTick } from 'vue';
+// 获取时间
+const formatTime = (date: Date) => {
+  const hours = `0${date.getHours()}`.slice(-2);
+  const minutes = `0${date.getMinutes()}`.slice(-2);
+  const seconds = `0${date.getSeconds()}`.slice(-2);
+  return `${hours}:${minutes}:${seconds}`;
+};
+
 // 获取房间信息
 const room = roomStore();
 const roomID = useRouteParams<string>("roomId");
@@ -91,8 +100,20 @@ const sendText = () => {
   if (chatArea.value) chatArea.value.scrollTop = chatArea.value.scrollHeight;
 };
 
+const MAX_MESSAGE_COUNT = 40;// 设定聊天记录的最大长度
 const sendMsg = (msg: string) => {
   msgList.value.push(msg);
+  // 如果超过聊天记录最大长度，则从前面开始删除多余的消息
+  nextTick(() => {
+    if (msgList.value.length > MAX_MESSAGE_COUNT) {
+      msgList.value.splice(0, msgList.value.length - MAX_MESSAGE_COUNT);
+    }
+  });
+
+  // 确保聊天区域滚动到底部
+  nextTick(() => {
+    if (chatArea.value) chatArea.value.scrollTop = chatArea.value.scrollHeight;
+  });
 };
 
 const playerOption = computed<options>(() => {
@@ -171,17 +192,17 @@ const handleElementMessage = (msg: ElementMessage) => {
 
     // 聊天消息
     case ElementMessageType.CHAT_MESSAGE: {
-      msgList.value.push(`${msg.chatResp!.sender?.username}：${msg.chatResp!.message}`);
+      const currentTime = formatTime(new Date()); // 格式化时间
+      const senderName = msg.chatResp!.sender?.username; 
+      const messageContent = msg.chatResp!.message;
+      const messageWithTime = `${senderName}：${messageContent} <small>[${currentTime}]</small>`;
+      // 添加消息到消息列表
+      sendMsg(messageWithTime);
       sendDanmuku(msg.chatResp!.message);
 
       // 自动滚动到最底部
       if (chatArea.value) chatArea.value.scrollTop = chatArea.value.scrollHeight;
 
-      if (msgList.value.length > 40)
-        return (msgList.value = [
-          "<p><b>SYSTEM：</b>已达到最大聊天记录长度，系统已自动清空...</p>"
-        ]);
-
       break;
     }
     case ElementMessageType.PLAY:
@@ -265,6 +286,11 @@ onMounted(() => {
     });
     return;
   }
+  // 从 sessionStorage 获取存储的聊天消息
+  const storedMessages = sessionStorage.getItem('chatMessages');
+  if (storedMessages) {
+    msgList.value = JSON.parse(storedMessages);
+  }
 
   // 启动websocket连接
   open();
@@ -277,6 +303,8 @@ onMounted(() => {
         blobToUint8Array(data.value)
           .then((array) => {
             handleElementMessage(ElementMessage.decode(array));
+             // 将新消息存储到 sessionStorage
+            sessionStorage.setItem('chatMessages', JSON.stringify(msgList.value));
           })
           .catch((err) => {
             console.error(err);