From fcbb2e84157178839b40e513b1d38a8003504b95 Mon Sep 17 00:00:00 2001
From: STDquantum <405720329@qq.com>
Date: Sat, 6 Jan 2024 17:06:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=97=B6=E9=97=B4=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98=EF=BC=8C=E5=A4=84=E7=90=86=E6=88=AA?=
 =?UTF-8?q?=E6=96=AD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/DataBase/exporter_html.py    |   5 -
 app/resources/data/template.html | 198 ++++++++++++++++++-------------
 2 files changed, 118 insertions(+), 85 deletions(-)
diff --git a/app/DataBase/exporter_html.py b/app/DataBase/exporter_html.py
index 4b10e8c..134abcf 100644
--- a/app/DataBase/exporter_html.py
+++ b/app/DataBase/exporter_html.py
@@ -303,11 +303,6 @@ class HtmlExporter(ExporterBase):
             else:
                 self.progressSignal.emit(1)
 
-            if self.is_5_min(timestamp):
-                str_time = message[8]
-                f.write(
-                    f'''{{ type:0, text: '{str_time}',is_send:0,avatar_path:'',timestamp:{timestamp}}},'''
-                )
             if type_ == 1 and self.message_types.get(type_):
                 self.text(f, message)
             elif type_ == 3 and self.message_types.get(type_):
diff --git a/app/resources/data/template.html b/app/resources/data/template.html
index 37bab59..304ec77 100644
--- a/app/resources/data/template.html
+++ b/app/resources/data/template.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chat Records</title>
-    <style>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Chat Records</title>
+        <style>
 *{
     padding: 0;
     margin: 0;
@@ -59,6 +59,7 @@ body{
     background:rgba(0,0,0,0.1);
 }
 .bubble{
+    white-space: pre-wrap;
     max-width: 400px;
     padding: 10px;
     border-radius: 5px;
@@ -115,7 +116,6 @@ body{
     right: -20px;
 }
 .item {
-    white-space: pre-wrap;
     margin-top: 15px;
     display: flex;
     width: 100%;
@@ -226,6 +226,21 @@ audio{
     align-items: center;;
 }
 
+.file-title, .card-content>h2, .description>p {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+}
+.file-title, .card-content>h2 {
+    -webkit-line-clamp: 2;
+}
+.description>p {
+    -webkit-line-clamp: 3;
+    margin-top: 2px;
+}
+
+
 .chat-music-audio .flex1,.chat-file .flex1 {
     flex: 1;
     justify-content: start;
@@ -491,53 +506,67 @@ input {
     vertical-align: middle;
     margin-top: -4.4px;
 }
-  </style>
-</head>
-<body>
-    <div>
-        <div class="pagination-container">
-            <div class="button-row">
-                <button onclick="prevPage()">上一页</button>
-                <button onclick="nextPage()">下一页</button>
+        </style>
+    </head>
+    <body>
+        <div>
+            <div class="pagination-container">
+                <div class="button-row">
+                    <button onclick="prevPage()">上一页</button>
+                    <button onclick="nextPage()">下一页</button>
+                </div>
+                <div class="jump-row">
+                    <input
+                        type="number"
+                        id="gotoPageInput"
+                        onkeydown="checkEnter(event)"
+                        placeholder="跳转到第几页"
+                    >
+                    <button onclick="gotoPage()">跳转</button>
+                </div>
             </div>
-            <div class="jump-row">
-                <input type="number" id="gotoPageInput" onkeydown="checkEnter(event)" placeholder="跳转到第几页">
-                <button onclick="gotoPage()">跳转</button>
-            </div>
-            
+            <div id="paginationInfo"></div>
         </div>
-        <div id="paginationInfo"></div>
-    </div>
-    
-    <div class="container">
-        <div class="content" id="chat-container" onscroll="checkScroll()">
-            <div class="item item-center"><span>昨天 12:35</span></div>
-            <div class="item item-center"><span>你已添加了凡繁烦，现在可以开始聊天了。</span></div>
-            <div class="item item-left">
-                <div class="avatar">
-                    <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" />
+        <div class="container">
+            <div class="content" id="chat-container" onscroll="checkScroll()">
+                <div class="item item-center">
+                    <span>昨天 12:35</span>
                 </div>
-                <div class="bubble bubble-left">您好,我在武汉，你可以直接送过来吗，我有时间的话，可以自己过去拿<br/>！！！<br/>123
+                <div class="item item-center">
+                    <span>你已添加了凡繁烦，现在可以开始聊天了。</span>
                 </div>
-            </div>
-
-            <div class="item item-right">
-                <div class="bubble bubble-right">hello<br/>你好呀</div>
-                <div class="avatar">
-                    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" />
+                <div class="item item-left">
+                    <div class="avatar">
+                        <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg">
+                    </div>
+                    <div class="bubble bubble-left">
+                        您好,我在武汉，你可以直接送过来吗，我有时间的话，可以自己过去拿
+                        <br>
+                        ！！！
+                        <br>
+                        123
+                    </div>
+                </div>
+                <div class="item item-right">
+                    <div class="bubble bubble-right">
+                        hello
+                        <br>
+                        你好呀
+                    </div>
+                    <div class="avatar">
+                        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg">
+                    </div>
+                </div>
+                <div class="item item-center">
+                    <span>昨天 13:15</span>
                 </div>
-            </div>
-            <div class="item item-center">
-                <span>昨天 13:15</span>
             </div>
         </div>
-    </div>
-    <div></div>
-    <div id="modal" class="modal" onclick="hideModal()">
-        <img id="modal-image" class="modal-image">
-    </div>
-    
-<script>
+        <div></div>
+        <div id="modal" class="modal" onclick="hideModal()">
+            <img id="modal-image" class="modal-image">
+        </div>
+        <script>
     const chatContainer = document.getElementById('chat-container');
     // Sample chat messages (replace this with your actual data)
     const chatMessages = [
@@ -553,11 +582,13 @@ input {
     let currentPage = 1; // 当前页
     var reachedBottom = false; // 到达底部的标记
     var lastScrollTop = 0;
+    var lastTimeStamp = 0;
     function renderPage(page) {
         const container = document.getElementById('chat-container');
         if (!reachedBottom) {
             container.innerHTML = ''; // 清空容器
             lastScrollTop = 0;
+            lastTimeStamp = 0;
         } else {
             reachedBottom = false;
         }
@@ -566,6 +597,7 @@ input {
         const startIndex = (page - 1) * itemsPerPage;
         const endIndex = startIndex + itemsPerPage;
 
+        // 工具类函数
         function replaceEmoji(text){
 
             // 定义替换规则，可以根据需要添加更多规则
@@ -690,8 +722,28 @@ input {
             }
             return text;
         }
+        function timestampToTime(timestamp) {
+            let date = new Date(timestamp * 1000);
+            let year = date.getFullYear() + '-';
+            let month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+            let day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
+            let hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+            let minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
+            let second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+            return year + month + day + hour + minute + second;
+        }
         
         // 生成各类标签的函数
+        function add5MinTimeTag(message) {
+            if (message.timestamp - lastTimeStamp > 300) {
+                const newTimeMessage = document.createElement('div');
+                newTimeMessage.className = "item item-center";
+                newTimeMessage.innerHTML = `<span>${timestampToTime(message.timestamp)}</span>`;
+                chatContainer.appendChild(newTimeMessage);
+                lastTimeStamp = message.timestamp;
+                console.log("增加时间元素", timestampToTime(message.timestamp));
+            }
+        }
         function messageBubble(message, side) {
             const messageBubbleTag = document.createElement('div');
             messageBubbleTag.className = `bubble bubble-${side}`;
@@ -743,7 +795,19 @@ input {
         function messageCard(message) {
             const messageTag = document.createElement('div');
             messageTag.className = `card`;
-            messageTag.innerHTML = `<a href="${message.url}" target="_blank"><div class="card-content"><h2>${message.title}</h2><div class="description"><p>${message.description}</p><img loading="lazy" class="thumbnail" src="${message.thumbnail}" alt="Thumbnail"></div></div><div class="link-info"><img loading="lazy" class="app-logo" src="${message.app_logo}" alt="App Logo"><span class="app-name">${message.app_name}</span></div></a>`;
+            messageTag.innerHTML = `<a href="${message.url}" target="_blank">
+                        <div class="card-content">
+                            <h2 title="${message.title}">${message.title}</h2>
+                            <div class="description">
+                                <p title="${message.description}">${message.description}</p>
+                                <img loading="lazy" class="thumbnail" src="${message.thumbnail}" alt="Thumbnail">
+                            </div>
+                        </div>
+                        <div class="link-info">
+                            <img loading="lazy" class="app-logo" src="${message.app_logo}" alt="App Logo">
+                            <span class="app-name">${message.app_name}</span>
+                        </div>
+                    </a>`;
             return messageTag;
         }
         function messageFileBox(message) {
@@ -756,12 +820,9 @@ input {
                     alert("文件可能丢失、过期或不存放在该主机上")
                 }
             }
-            if (message.file_name.length >= 26) {
-                message.file_name = message.file_name.slice(0, 25) + '...'
-            }
             messageFileTag.innerHTML = `<div class="file-box">
                     <div class="file-info flex1">
-                        <div class="file-title">${message.file_name}</div>
+                        <div class="file-title" title="${message.file_name}">${message.file_name}</div>
                         <div class="file-size">${message.file_size}</div>
                     </div>
                     <div class="file-img flex2">
@@ -771,7 +832,6 @@ input {
                 (message.app_name ? `<div class="app-info"><p>${message.app_name}</p></div>` : "");
             return messageFileTag;
         }
-
         function messageMusicAudioBox(message) {
             const messageMusicAudioTag = document.createElement('div');
             messageMusicAudioTag.className = `chat-music-audio`;
@@ -822,28 +882,7 @@ input {
             // 从数据列表中取出对应范围的元素并添加到容器中
         for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) {
             const message = chatMessages[i];
-            if (i == startIndex && (reachedBottom ? !/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(chatMessages[i - 1].text) : 1)) { // 判断一下在页面顶部多加一个时间
-                if (!/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(message.text)) {
-                    // 时间戳转成时间
-                    function timestampToTime(timestamp) {
-                        let date = new Date(timestamp * 1000);
-                        let year = date.getFullYear() + '-';
-                        let month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
-                        let day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
-                        let hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
-                        let minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
-                        let second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
-                        return year + month + day + hour + minute + second;
-                    }
-
-                    // 添加div
-                    const newTimeMessage = document.createElement('div');
-                    newTimeMessage.className = "item item-center";
-                    newTimeMessage.innerHTML = `<span>${timestampToTime(message.timestamp)}</span>`;
-                    chatContainer.appendChild(newTimeMessage);
-                    console.log("增加时间元素", timestampToTime(message.timestamp));
-                }
-            }
+            add5MinTimeTag(message);
             const messageElement = document.createElement('div'); // 下面那俩的合体
             const avatarTag = avatarBox(message); // 头像
             const messageContent = document.createElement('div'); // 除了avatar之外的所有
@@ -1056,9 +1095,8 @@ input {
     }
 
     refreshMediaListener();
-</script>
-
-<script>
+        </script>
+        <script>
     function showModal(image) {
         var modal = document.getElementById("modal");
         var modalImage = document.getElementById("modal-image");
@@ -1091,6 +1129,6 @@ input {
         }
 
     }
-</script>
-</body>
-</html>
\ No newline at end of file
+        </script>
+    </body>
+</html>
