Shikong/WeChatMsg
1
0
Fork 0
mirror of https://github.com/LC044/WeChatMsg synced 2025-02-23 03:22:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #279 from STDquantum/master

Browse Source 
修改时间显示问题，处理截断问题
This commit is contained in:
SiYuan 2024-01-07 00:13:34 +08:00 committed by GitHub
commit f405fb9f6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 118 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/DataBase/exporter_html.py
View File

@ -303,11 +303,6 @@ class HtmlExporter(ExporterBase):
else: else:
self.progressSignal.emit(1) 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_): if type_ == 1 and self.message_types.get(type_):
self.text(f, message) self.text(f, message)
elif type_ == 3 and self.message_types.get(type_): elif type_ == 3 and self.message_types.get(type_):

136
app/resources/data/template.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Records</title> <title>Chat Records</title>
@ -59,6 +59,7 @@ body{
background:rgba(0,0,0,0.1); background:rgba(0,0,0,0.1);
} }
.bubble{ .bubble{
white-space: pre-wrap;
max-width: 400px; max-width: 400px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
@ -115,7 +116,6 @@ body{
right: -20px; right: -20px;
} }
.item { .item {
white-space: pre-wrap;
margin-top: 15px; margin-top: 15px;
display: flex; display: flex;
width: 100%; width: 100%;
@ -226,6 +226,21 @@ audio{
align-items: center;; 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 { .chat-music-audio .flex1,.chat-file .flex1 {
flex: 1; flex: 1;
justify-content: start; justify-content: start;
@ -492,8 +507,8 @@ input {
margin-top: -4.4px; margin-top: -4.4px;
} }
</style> </style>
</head> </head>
<body> <body>
<div> <div>
<div class="pagination-container"> <div class="pagination-container">
<div class="button-row"> <div class="button-row">
@ -501,30 +516,45 @@ input {
<button onclick="nextPage()">下一页</button> <button onclick="nextPage()">下一页</button>
</div> </div>
<div class="jump-row"> <div class="jump-row">
<input type="number" id="gotoPageInput" onkeydown="checkEnter(event)" placeholder="跳转到第几页"> <input
type="number"
id="gotoPageInput"
onkeydown="checkEnter(event)"
placeholder="跳转到第几页"
>
<button onclick="gotoPage()">跳转</button> <button onclick="gotoPage()">跳转</button>
</div> </div>
</div> </div>
<div id="paginationInfo"></div> <div id="paginationInfo"></div>
</div> </div>
<div class="container"> <div class="container">
<div class="content" id="chat-container" onscroll="checkScroll()"> <div class="content" id="chat-container" onscroll="checkScroll()">
<div class="item item-center"><span>昨天 12:35</span></div> <div class="item item-center">
<div class="item item-center"><span>你已添加了凡繁烦，现在可以开始聊天了。</span></div> <span>昨天 12:35</span>
</div>
<div class="item item-center">
<span>你已添加了凡繁烦，现在可以开始聊天了。</span>
</div>
<div class="item item-left"> <div class="item item-left">
<div class="avatar"> <div class="avatar">
<img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /> <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg">
</div> </div>
<div class="bubble bubble-left">您好,我在武汉，你可以直接送过来吗，我有时间的话，可以自己过去拿<br/>！！！<br/>123 <div class="bubble bubble-left">
您好,我在武汉，你可以直接送过来吗，我有时间的话，可以自己过去拿
<br>
！！！
<br>
123
</div> </div>
</div> </div>
<div class="item item-right"> <div class="item item-right">
<div class="bubble bubble-right">hello<br/>你好呀</div> <div class="bubble bubble-right">
hello
<br>
你好呀
</div>
<div class="avatar"> <div class="avatar">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" /> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg">
</div> </div>
</div> </div>
<div class="item item-center"> <div class="item item-center">
@ -536,8 +566,7 @@ input {
<div id="modal" class="modal" onclick="hideModal()"> <div id="modal" class="modal" onclick="hideModal()">
<img id="modal-image" class="modal-image"> <img id="modal-image" class="modal-image">
</div> </div>
<script>
<script>
const chatContainer = document.getElementById('chat-container'); const chatContainer = document.getElementById('chat-container');
// Sample chat messages (replace this with your actual data) // Sample chat messages (replace this with your actual data)
const chatMessages = [ const chatMessages = [
@ -553,11 +582,13 @@ input {
let currentPage = 1; // 当前页 let currentPage = 1; // 当前页
var reachedBottom = false; // 到达底部的标记 var reachedBottom = false; // 到达底部的标记
var lastScrollTop = 0; var lastScrollTop = 0;
var lastTimeStamp = 0;
function renderPage(page) { function renderPage(page) {
const container = document.getElementById('chat-container'); const container = document.getElementById('chat-container');
if (!reachedBottom) { if (!reachedBottom) {
container.innerHTML = ''; // 清空容器 container.innerHTML = ''; // 清空容器
lastScrollTop = 0; lastScrollTop = 0;
lastTimeStamp = 0;
} else { } else {
reachedBottom = false; reachedBottom = false;
} }
@ -566,6 +597,7 @@ input {
const startIndex = (page - 1) * itemsPerPage; const startIndex = (page - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage; const endIndex = startIndex + itemsPerPage;
// 工具类函数
function replaceEmoji(text){ function replaceEmoji(text){
// 定义替换规则，可以根据需要添加更多规则 // 定义替换规则，可以根据需要添加更多规则
@ -690,8 +722,28 @@ input {
} }
return text; 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) { function messageBubble(message, side) {
const messageBubbleTag = document.createElement('div'); const messageBubbleTag = document.createElement('div');
messageBubbleTag.className = `bubble bubble-${side}`; messageBubbleTag.className = `bubble bubble-${side}`;
@ -743,7 +795,19 @@ input {
function messageCard(message) { function messageCard(message) {
const messageTag = document.createElement('div'); const messageTag = document.createElement('div');
messageTag.className = `card`; 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; return messageTag;
} }
function messageFileBox(message) { function messageFileBox(message) {
@ -756,12 +820,9 @@ input {
alert("文件可能丢失、过期或不存放在该主机上") alert("文件可能丢失、过期或不存放在该主机上")
} }
} }
if (message.file_name.length >= 26) {
message.file_name = message.file_name.slice(0, 25) + '...'
}
messageFileTag.innerHTML = `<div class="file-box"> messageFileTag.innerHTML = `<div class="file-box">
<div class="file-info flex1"> <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 class="file-size">${message.file_size}</div>
</div> </div>
<div class="file-img flex2"> <div class="file-img flex2">
@ -771,7 +832,6 @@ input {
(message.app_name ? `<div class="app-info"><p>${message.app_name}</p></div>` : ""); (message.app_name ? `<div class="app-info"><p>${message.app_name}</p></div>` : "");
return messageFileTag; return messageFileTag;
} }
function messageMusicAudioBox(message) { function messageMusicAudioBox(message) {
const messageMusicAudioTag = document.createElement('div'); const messageMusicAudioTag = document.createElement('div');
messageMusicAudioTag.className = `chat-music-audio`; messageMusicAudioTag.className = `chat-music-audio`;
@ -822,28 +882,7 @@ input {
// 从数据列表中取出对应范围的元素并添加到容器中 // 从数据列表中取出对应范围的元素并添加到容器中
for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) { for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) {
const message = chatMessages[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)) { // 判断一下在页面顶部多加一个时间 add5MinTimeTag(message);
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));
}
}
const messageElement = document.createElement('div'); // 下面那俩的合体 const messageElement = document.createElement('div'); // 下面那俩的合体
const avatarTag = avatarBox(message); // 头像 const avatarTag = avatarBox(message); // 头像
const messageContent = document.createElement('div'); // 除了avatar之外的所有 const messageContent = document.createElement('div'); // 除了avatar之外的所有
@ -1056,9 +1095,8 @@ input {
} }
refreshMediaListener(); refreshMediaListener();
</script> </script>
<script>
<script>
function showModal(image) { function showModal(image) {
var modal = document.getElementById("modal"); var modal = document.getElementById("modal");
var modalImage = document.getElementById("modal-image"); var modalImage = document.getElementById("modal-image");
@ -1091,6 +1129,6 @@ input {
} }
} }
</script> </script>
</body> </body>
</html> </html>