mirror of
https://github.com/LC044/WeChatMsg
synced 2025-02-22 19:02:17 +08:00
SiYuan
GitHub
commit
f405fb9f6f
@ -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_):
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<!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>
|
||||||
<style>
|
<style>
|
||||||
*{
|
*{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -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;
|
||||||
@ -491,53 +506,67 @@ input {
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
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">
|
||||||
<button onclick="prevPage()">上一页</button>
|
<button onclick="prevPage()">上一页</button>
|
||||||
<button onclick="nextPage()">下一页</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>
|
||||||
<div class="jump-row">
|
<div id="paginationInfo"></div>
|
||||||
<input type="number" id="gotoPageInput" onkeydown="checkEnter(event)" placeholder="跳转到第几页">
|
|
||||||
<button onclick="gotoPage()">跳转</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="paginationInfo"></div>
|
<div class="container">
|
||||||
</div>
|
<div class="content" id="chat-container" onscroll="checkScroll()">
|
||||||
|
<div class="item item-center">
|
||||||
<div class="container">
|
<span>昨天 12:35</span>
|
||||||
<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>
|
</div>
|
||||||
<div class="bubble bubble-left">您好,我在武汉，你可以直接送过来吗，我有时间的话，可以自己过去拿<br/>！！！<br/>123
|
<div class="item item-center">
|
||||||
|
<span>你已添加了凡繁烦，现在可以开始聊天了。</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="item item-left">
|
||||||
|
<div class="avatar">
|
||||||
<div class="item item-right">
|
<img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg">
|
||||||
<div class="bubble bubble-right">hello<br/>你好呀</div>
|
</div>
|
||||||
<div class="avatar">
|
<div class="bubble bubble-left">
|
||||||
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3313909130,2406410525&fm=15&gp=0.jpg" />
|
您好,我在武汉，你可以直接送过来吗，我有时间的话，可以自己过去拿
|
||||||
|
<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>
|
|
||||||
<div class="item item-center">
|
|
||||||
<span>昨天 13:15</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div></div>
|
||||||
<div></div>
|
<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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user