mirror of
https://github.com/LC044/WeChatMsg
synced 2025-02-21 01:52:35 +08:00
修改HTML模板
This commit is contained in:
shuaikangzhou
parent
23d191c193
commit
e2100f9b77
@ -2,7 +2,7 @@ import csv
|
||||
import html
|
||||
import os
|
||||
from re import findall
|
||||
from PyQt5.QtCore import pyqtSignal, QThread
|
||||
from PyQt5.QtCore import pyqtSignal, QThread, QFile, QIODevice, QTextStream
|
||||
from PyQt5.QtWidgets import QFileDialog
|
||||
# from eyed3 import load
|
||||
|
||||
@ -199,14 +199,6 @@ class ChildThread(QThread):
|
||||
displayname = escape_js_and_html(displayname)
|
||||
if self.output_type == Output.HTML:
|
||||
str_content = escape_js_and_html(str_content)
|
||||
if self.is_5_min(timestamp):
|
||||
doc.write(
|
||||
f'''{{ type:0, text: '{str_time}',is_send:0,avatar_path:'',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
emojiText = findall(r"(\[.+?\])", str_content)
|
||||
for emoji_text in emojiText:
|
||||
if emoji_text in emoji:
|
||||
str_content = str_content.replace(emoji_text, emoji[emoji_text])
|
||||
doc.write(
|
||||
f'''{{ type:{1}, text: '{str_content}',is_send:{is_send},avatar_path:'{avatar}',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
@ -257,11 +249,6 @@ class ChildThread(QThread):
|
||||
print("网络图片",image_path)
|
||||
pass
|
||||
image_path = image_path.replace('\\', '/')
|
||||
# print(f"tohtml:---{image_path}")
|
||||
if self.is_5_min(timestamp):
|
||||
doc.write(
|
||||
f'''{{ type:0, text: '{str_time}',is_send:0,avatar_path:'',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
doc.write(
|
||||
f'''{{ type:{type_}, text: '{image_path}',is_send:{is_send},avatar_path:'{avatar}',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
@ -302,10 +289,6 @@ class ChildThread(QThread):
|
||||
voice_to_text = escape_js_and_html(media_msg_db.get_audio_text(str_content))
|
||||
except:
|
||||
return
|
||||
if self.is_5_min(timestamp):
|
||||
doc.write(
|
||||
f'''{{ type:0, text: '{str_time}',is_send:0,avatar_path:'',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
doc.write(
|
||||
f'''{{ type:34, text:'{audio_path}',is_send:{is_send},avatar_path:'{avatar}',voice_to_text:'{voice_to_text}',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
@ -337,10 +320,6 @@ class ChildThread(QThread):
|
||||
if self.output_type == Output.HTML:
|
||||
emoji_path = get_emoji(str_content, thumb=True, output_path=origin_docx_path + '/emoji')
|
||||
emoji_path = './emoji/' + os.path.basename(emoji_path)
|
||||
if self.is_5_min(timestamp):
|
||||
doc.write(
|
||||
f'''{{ type:0, text: '{str_time}',is_send:0,avatar_path:'',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
doc.write(
|
||||
f'''{{ type:{3}, text: '{emoji_path}',is_send:{is_send},avatar_path:'{avatar}',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
@ -363,11 +342,8 @@ class ChildThread(QThread):
|
||||
@param message:
|
||||
@return:
|
||||
"""
|
||||
type_ = message[2]
|
||||
str_content = message[7]
|
||||
str_time = message[8]
|
||||
is_send = message[4]
|
||||
avatar = 'myhead.png' if is_send else 'tahead.png'
|
||||
content = parser_reply(message[11])
|
||||
refer_msg = content.get('refer')
|
||||
timestamp = message[5]
|
||||
@ -386,16 +362,8 @@ class ChildThread(QThread):
|
||||
displayname = escape_js_and_html(displayname)
|
||||
if self.output_type == Output.HTML:
|
||||
contentText = escape_js_and_html(content.get('title'))
|
||||
emojiText = findall(r"(\[.+?\])", contentText)
|
||||
for emoji_text in emojiText:
|
||||
if emoji_text in emoji:
|
||||
contentText = contentText.replace(emoji_text, emoji[emoji_text])
|
||||
if refer_msg:
|
||||
referText = f"{escape_js_and_html(refer_msg.get('displayname'))}：{escape_js_and_html(refer_msg.get('content'))}"
|
||||
emojiText = findall(r"(\[.+?\])", referText)
|
||||
for emoji_text in emojiText:
|
||||
if emoji_text in emoji:
|
||||
referText = referText.replace(emoji_text, emoji[emoji_text])
|
||||
doc.write(
|
||||
f'''{{ type:49, text: '{contentText}',is_send:{is_send},sub_type:{content.get('type')},refer_text: '{referText}',avatar_path:'{avatar}',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
@ -467,10 +435,7 @@ class ChildThread(QThread):
|
||||
os.utime(origin_docx_path + image_path[1:], (timestamp, timestamp))
|
||||
image_path = image_path.replace('\\', '/')
|
||||
# print(f"tohtml:---{image_path}")
|
||||
if self.is_5_min(timestamp):
|
||||
doc.write(
|
||||
f'''{{ type:0, text: '{str_time}',is_send:0,avatar_path:'',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
|
||||
doc.write(
|
||||
f'''{{ type:3, text: '{image_path}',is_send:{is_send},avatar_path:'{avatar}',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
@ -489,10 +454,6 @@ class ChildThread(QThread):
|
||||
os.utime(new_path, (timestamp, timestamp))
|
||||
video_path = f'./video/{os.path.basename(video_path)}'
|
||||
video_path = video_path.replace('\\', '/')
|
||||
if self.is_5_min(timestamp):
|
||||
doc.write(
|
||||
f'''{{ type:0, text: '{str_time}',is_send:0,avatar_path:'',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
doc.write(
|
||||
f'''{{ type:{type_}, text: '{video_path}',is_send:{is_send},avatar_path:'{avatar}',timestamp:{timestamp},is_chatroom:{is_chatroom},displayname:'{displayname}'}},'''
|
||||
)
|
||||
@ -517,11 +478,6 @@ class ChildThread(QThread):
|
||||
writer.writerow(columns)
|
||||
# 写入数据
|
||||
writer.writerows(messages)
|
||||
# with open(filename, mode='r', newline='', encoding='utf-8') as file:
|
||||
# content = file.read()
|
||||
# filename = f"{os.path.abspath('.')}/data/聊天记录/{self.contact.remark}/{self.contact.remark}_gbk.csv"
|
||||
# with open(filename, mode='w', newline='', encoding='gbk') as file:
|
||||
# file.write(content.encode('utf-8', errors='ignore').decode('gbk', errors='ignore'))
|
||||
self.okSignal.emit('ok')
|
||||
|
||||
def to_html_(self):
|
||||
@ -533,6 +489,13 @@ class ChildThread(QThread):
|
||||
else:
|
||||
messages = msg_db.get_messages(self.contact.wxid)
|
||||
filename = f"{os.path.abspath('.')}/data/聊天记录/{self.contact.remark}/{self.contact.remark}.html"
|
||||
file = QFile(':/data/template.html')
|
||||
if file.open(QIODevice.ReadOnly | QIODevice.Text):
|
||||
stream = QTextStream(file)
|
||||
stream.setCodec('utf-8')
|
||||
content = stream.readAll()
|
||||
file.close()
|
||||
html_head,html_end = content.split('/*注意看这是分割线*/')
|
||||
f = open(filename, 'w', encoding='utf-8')
|
||||
f.write(html_head.replace("<title>Chat Records</title>", f"<title>{self.contact.remark}</title>"))
|
||||
MePC().avatar.save(os.path.join(f"{origin_docx_path}/avatar/{MePC().wxid}.png"))
|
||||
@ -554,7 +517,13 @@ class ChildThread(QThread):
|
||||
for index, message in enumerate(messages):
|
||||
type_ = message[2]
|
||||
sub_type = message[3]
|
||||
timestamp = message[5]
|
||||
self.progressSignal.emit(int((index + 1) / total_steps * 100))
|
||||
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_):
|
||||
@ -613,749 +582,4 @@ class ChildThread(QThread):
|
||||
self.to_txt()
|
||||
|
||||
def cancel(self):
|
||||
self.requestInterruption()
|
||||
|
||||
|
||||
emoji = {
|
||||
'[微笑]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_1@2x.png" id="微笑" class="emoji_img">',
|
||||
'[撇嘴]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_2@2x.png" id="撇嘴" class="emoji_img">',
|
||||
'[色]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_3@2x.png" id="色" class="emoji_img">',
|
||||
'[发呆]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_4@2x.png" id="发呆" class="emoji_img">',
|
||||
'[得意]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_5@2x.png" id="得意" class="emoji_img">',
|
||||
'[流泪]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_6@2x.png" id="流泪" class="emoji_img">',
|
||||
'[害羞]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_7@2x.png" id="害羞" class="emoji_img">',
|
||||
'[闭嘴]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_8@2x.png" id="闭嘴" class="emoji_img">',
|
||||
'[睡]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_9@2x.png" id="睡" class="emoji_img">',
|
||||
'[大哭]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_10@2x.png" id="大哭" class="emoji_img">',
|
||||
'[尴尬]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_11@2x.png" id="尴尬" class="emoji_img">',
|
||||
'[发怒]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_12@2x.png" id="发怒" class="emoji_img">',
|
||||
'[调皮]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_13@2x.png" id="调皮" class="emoji_img">',
|
||||
'[呲牙]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_14@2x.png" id="呲牙" class="emoji_img">',
|
||||
'[惊讶]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_15@2x.png" id="惊讶" class="emoji_img">',
|
||||
'[难过]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_16@2x.png" id="难过" class="emoji_img">',
|
||||
'[抓狂]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_19@2x.png" id="抓狂" class="emoji_img">',
|
||||
'[吐]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_20@2x.png" id="吐" class="emoji_img">',
|
||||
'[偷笑]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_21@2x.png" id="偷笑" class="emoji_img">',
|
||||
'[愉快]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_22@2x.png" id="愉快" class="emoji_img">',
|
||||
'[白眼]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_23@2x.png" id="白 眼" class="emoji_img">',
|
||||
'[傲慢]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_24@2x.png" id="傲慢" class="emoji_img">',
|
||||
'[困]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_26@2x.png" id="困" class="emoji_img">',
|
||||
'[惊恐]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_27@2x.png" id="惊恐" class="emoji_img">',
|
||||
'[憨笑]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_29@2x.png" id="憨笑" class="emoji_img">',
|
||||
'[悠闲]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_30@2x.png" id="悠闲" class="emoji_img">',
|
||||
'[咒骂]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_32@2x.png" id="咒骂" class="emoji_img">',
|
||||
'[疑问]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_33@2x.png" id="疑问" class="emoji_img">',
|
||||
'[嘘]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_34@2x.png" id="嘘" class="emoji_img">',
|
||||
'[晕]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_35@2x.png" id="晕" class="emoji_img">',
|
||||
'[衰]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_37@2x.png" id="衰" class="emoji_img">',
|
||||
'[骷髅]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_38@2x.png" id="骷髅" class="emoji_img">',
|
||||
'[敲打]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_39@2x.png" id="敲打" class="emoji_img">',
|
||||
'[再见]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_40@2x.png" id="再见" class="emoji_img">',
|
||||
'[擦汗]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_41@2x.png" id="擦汗" class="emoji_img">',
|
||||
'[抠鼻]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_42@2x.png" id="抠鼻" class="emoji_img">',
|
||||
'[鼓掌]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_43@2x.png" id="鼓掌" class="emoji_img">',
|
||||
'[坏笑]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_45@2x.png" id="坏笑" class="emoji_img">',
|
||||
'[右哼哼]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_47@2x.png" id="右哼哼" class="emoji_img">',
|
||||
'[鄙视]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_49@2x.png" id="鄙视" class="emoji_img">',
|
||||
'[委屈]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_50@2x.png" id="委屈" class="emoji_img">',
|
||||
'[快哭了]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_51@2x.png" id="快哭了" class="emoji_img">',
|
||||
'[阴险]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_52@2x.png" id="阴险" class="emoji_img">',
|
||||
'[亲亲]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_53@2x.png" id="亲亲" class="emoji_img">',
|
||||
'[可怜]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_55@2x.png" id="可怜" class="emoji_img">',
|
||||
'[Whimper]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_55@2x.png" id="可怜" class="emoji_img">',
|
||||
'[笑脸]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Happy.png" id="笑脸" class="emoji_img">',
|
||||
'[生病]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Sick.png" id="生病" class="emoji_img">',
|
||||
'[脸红]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Flushed.png" id="脸红" class="emoji_img">',
|
||||
'[破涕为笑]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Lol.png" id="破涕为笑" class="emoji_img">',
|
||||
'[恐惧]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Terror.png" id="恐惧" class="emoji_img">',
|
||||
'[失望]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/LetDown.png" id="失望" class="emoji_img">',
|
||||
'[无语]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Duh.png" id="无语" class="emoji_img">',
|
||||
'[嘿哈]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_04.png" id="嘿哈" class="emoji_img">',
|
||||
'[捂脸]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_05.png" id="捂脸" class="emoji_img">',
|
||||
'[奸笑]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_02.png" id="奸笑" class="emoji_img">',
|
||||
'[机智]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_06.png" id="机智" class="emoji_img">',
|
||||
'[皱眉]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_12.png" id="皱眉" class="emoji_img">',
|
||||
'[耶]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_11.png" id="耶" class="emoji_img">',
|
||||
'[吃瓜]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Watermelon.png" id="吃瓜" class="emoji_img">',
|
||||
'[加油]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Addoil.png" id="加油" class="emoji_img">',
|
||||
'[汗]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Sweat.png" id="汗" class="emoji_img">',
|
||||
'[天啊]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Shocked.png" id="天啊" class="emoji_img">',
|
||||
'[Emm]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Cold.png" id="Emm" class="emoji_img">',
|
||||
'[社会社会]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Social.png" id="社会社会" class="emoji_img">',
|
||||
'[旺柴]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Yellowdog.png" id="旺柴" class="emoji_img">',
|
||||
'[好的]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/NoProb.png" id="好的" class="emoji_img">',
|
||||
'[打脸]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Slap.png" id="打脸" class="emoji_img">',
|
||||
'[哇]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Wow.png" id="哇" class="emoji_img">',
|
||||
'[翻白眼]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Boring.png" id="翻白眼" class="emoji_img">',
|
||||
'[666]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/666.png" id="666" class="emoji_img">',
|
||||
'[让我看看]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/LetMeSee.png" id="让我看看" class="emoji_img">',
|
||||
'[叹气]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Sigh.png" id="叹气" class="emoji_img">',
|
||||
'[苦涩]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Hurt.png" id="苦涩" class="emoji_img">',
|
||||
'[裂开]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Broken.png" id="裂开" class="emoji_img">',
|
||||
'[嘴唇]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_66@2x.png" id="嘴唇" class="emoji_img">',
|
||||
'[爱心]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_67@2x.png" id="爱心" class="emoji_img">',
|
||||
'[心碎]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_68@2x.png" id="心碎" class="emoji_img">',
|
||||
'[拥抱]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_79@2x.png" id="拥抱" class="emoji_img">',
|
||||
'[强]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_80@2x.png" id="强" class="emoji_img">',
|
||||
'[弱]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_81@2x.png" id="弱" class="emoji_img">',
|
||||
'[握手]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_82@2x.png" id="握手" class="emoji_img">',
|
||||
'[胜利]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_83@2x.png" id="胜利" class="emoji_img">',
|
||||
'[抱拳]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_84@2x.png" id="抱拳" class="emoji_img">',
|
||||
'[勾引]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_85@2x.png" id="勾引" class="emoji_img">',
|
||||
'[拳头]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_86@2x.png" id="拳头" class="emoji_img">',
|
||||
'[OK]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_90@2x.png" id="OK" class="emoji_img">',
|
||||
'[合十]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Worship.png" id="合十" class="emoji_img">',
|
||||
'[啤酒]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_58@2x.png" id="啤酒" class="emoji_img">',
|
||||
'[咖啡]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_61@2x.png" id="咖啡" class="emoji_img">',
|
||||
'[蛋糕]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_69@2x.png" id="蛋糕" class="emoji_img">',
|
||||
'[玫瑰]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_64@2x.png" id="玫 瑰" class="emoji_img">',
|
||||
'[凋谢]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_65@2x.png" id="凋谢" class="emoji_img">',
|
||||
'[菜刀]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_56@2x.png" id="菜刀" class="emoji_img">',
|
||||
'[炸弹]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_71@2x.png" id="炸弹" class="emoji_img">',
|
||||
'[便便]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_75@2x.png" id="便便" class="emoji_img">',
|
||||
'[月亮]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_76@2x.png" id="月亮" class="emoji_img">',
|
||||
'[太阳]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_77@2x.png" id="太阳" class="emoji_img">',
|
||||
'[庆 祝]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Party.png" id="庆祝" class="emoji_img">',
|
||||
'[礼物]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_78@2x.png" id="礼物" class="emoji_img">',
|
||||
'[红包]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_09.png" id="红包" class="emoji_img">',
|
||||
'[發]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_16.png" id="發" class="emoji_img">',
|
||||
'[福]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_15.png" id="福" class="emoji_img">',
|
||||
'[烟花]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Fireworks.png" id="烟花" class="emoji_img">',
|
||||
'[爆竹]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Firecracker.png" id="爆竹" class="emoji_img">',
|
||||
'[猪头]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_63@2x.png" id="猪头" class="emoji_img">',
|
||||
'[跳跳]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_93@2x.png" id="跳跳" class="emoji_img">',
|
||||
'[发抖]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_94@2x.png" id="发抖" class="emoji_img">',
|
||||
'[转圈]': '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_96@2x.png" id="转圈" class="emoji_img">'}
|
||||
html_head = '''
|
||||
<!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>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
display: block;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.container{
|
||||
height: 99%;
|
||||
width: 900px;
|
||||
border-radius: 4px;
|
||||
border: 0.5px solid #e0e0e0;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content{
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
overflow-y: scroll;
|
||||
flex: 1;
|
||||
}
|
||||
.content:hover::-webkit-scrollbar-thumb{
|
||||
background:rgba(0,0,0,0.1);
|
||||
}
|
||||
.bubble{
|
||||
max-width: 400px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
color: #000;
|
||||
word-wrap:break-word;
|
||||
word-break:normal;
|
||||
}
|
||||
.chat-refer {
|
||||
margin-top: 5px;
|
||||
max-width: 400px;
|
||||
padding: 9px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
color: #000;
|
||||
background-color: #e8e8e8;
|
||||
word-wrap:break-word;
|
||||
word-break:normal;
|
||||
}
|
||||
.chat-refer-right {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.chat-refer-left{
|
||||
margin-left: 15px;
|
||||
}
|
||||
.item-left .bubble{
|
||||
margin-left: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.item-left .bubble:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-top: 10px solid transparent;
|
||||
border-right: 10px solid #fff;
|
||||
border-bottom: 10px solid transparent;
|
||||
left: -20px;
|
||||
}
|
||||
.item-right .bubble{
|
||||
margin-right: 15px;
|
||||
background-color: #9eea6a;
|
||||
}
|
||||
.item-right .bubble:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid #9eea6a;
|
||||
border-top: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
right: -20px;
|
||||
}
|
||||
.item {
|
||||
white-space: pre-wrap;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.item-refer{
|
||||
margin-top: 4px;
|
||||
}
|
||||
.item.item-right{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.item.item-center{
|
||||
justify-content: center;
|
||||
}
|
||||
.item.item-center span{
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
color: #fff;
|
||||
background-color: #dadada;
|
||||
border-radius: 3px;
|
||||
-moz-user-select:none; /*火狐*/
|
||||
-webkit-user-select:none; /*webkit浏览器*/
|
||||
-ms-user-select:none; /*IE10*/
|
||||
-khtml-user-select:none; /*早期浏览器*/
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-wrapper-left {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.content-wrapper-right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.displayname {
|
||||
margin-left: 13px;
|
||||
margin-left: 13px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
color: darkgray;
|
||||
}
|
||||
|
||||
.chat-image img{
|
||||
margin-right: 18px;
|
||||
margin-left: 18px;
|
||||
max-width: 300px;
|
||||
max-height: auto;
|
||||
}
|
||||
.avatar img{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.chat-video video{
|
||||
margin-right: 18px;
|
||||
margin-left: 18px;
|
||||
max-width: 350px;
|
||||
}
|
||||
.chat-audio{
|
||||
max-width: 400px;
|
||||
}
|
||||
audio{
|
||||
margin-left: 9px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
.input-area{
|
||||
border-top:0.5px solid #e0e0e0;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
textarea{
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
outline:none;
|
||||
resize:none;
|
||||
}
|
||||
.button-area{
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
line-height: 40px;
|
||||
padding: 5px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.button-area button{
|
||||
width: 80px;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 设置滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width:10px;
|
||||
}
|
||||
/* 滚动槽 */
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
|
||||
border-radius:8px;
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius:10px;
|
||||
background:rgba(0,0,0,0);
|
||||
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px; /* 新增的左边距 */
|
||||
}
|
||||
|
||||
.button-row,
|
||||
.jump-row,
|
||||
#paginationInfo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 25px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 0 14px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 8px;
|
||||
width: 120px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 0px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#paginationInfo {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.emoji_img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
vertical-align: middle;
|
||||
margin-top: -4.4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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>
|
||||
<div></div>
|
||||
<div id="modal" class="modal" onclick="hideModal()">
|
||||
<img id="modal-image" class="modal-image">
|
||||
</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 id="paginationInfo"></div>
|
||||
</div>
|
||||
<script>
|
||||
const chatContainer = document.getElementById('chat-container');
|
||||
// Sample chat messages (replace this with your actual data)
|
||||
const chatMessages = [
|
||||
'''
|
||||
html_end = '''
|
||||
];
|
||||
function checkEnter(event) {
|
||||
if (event.keyCode === 13) {
|
||||
gotoPage();
|
||||
}
|
||||
}
|
||||
|
||||
const itemsPerPage = 100; // 每页显示的元素个数
|
||||
let currentPage = 1; // 当前页
|
||||
var reachedBottom = false; // 到达底部的标记
|
||||
var lastScrollTop = 0;
|
||||
function renderPage(page) {
|
||||
const container = document.getElementById('chat-container');
|
||||
if (!reachedBottom) {
|
||||
container.innerHTML = ''; // 清空容器
|
||||
lastScrollTop = 0;
|
||||
} else {
|
||||
reachedBottom = false;
|
||||
}
|
||||
|
||||
// 计算当前页应该显示的元素范围
|
||||
const startIndex = (page - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
console.log(page);
|
||||
|
||||
// 生成各类标签的函数
|
||||
function messageBubble(message, side) {
|
||||
const messageBubbleTag = document.createElement('div');
|
||||
messageBubbleTag.className = `bubble bubble-${side}`;
|
||||
messageBubbleTag.innerHTML = message.text;
|
||||
return messageBubbleTag;
|
||||
}
|
||||
function displayNameBox(message) {
|
||||
const displayName = document.createElement('div');
|
||||
displayName.className = "displayname";
|
||||
displayName.innerHTML = message.displayname;
|
||||
return displayName;
|
||||
}
|
||||
function avatarBox(message) {
|
||||
const avatarTag = document.createElement('div');
|
||||
avatarTag.className = "avatar";
|
||||
avatarTag.innerHTML = `<img src="${message.avatar_path}" />`
|
||||
return avatarTag;
|
||||
}
|
||||
function messageImgBox(message) {
|
||||
const messageImgTag = document.createElement('div');
|
||||
messageImgTag.className = `chat-image`;
|
||||
messageImgTag.innerHTML = `<img src="${message.text}" onclick="showModal(this)"/>`;
|
||||
return messageImgTag;
|
||||
}
|
||||
function messageVideoBox(message) {
|
||||
const messageVideoTag = document.createElement('div');
|
||||
messageVideoTag.className = `chat-video`;
|
||||
messageVideoTag.innerHTML = `<video src="${message.text}" controls />`;
|
||||
return messageVideoTag;
|
||||
}
|
||||
function messageElementReferText(message, side) {
|
||||
const messageElementRefer = document.createElement('div');
|
||||
messageElementRefer.className = `chat-refer chat-refer-${side}`;
|
||||
messageElementRefer.innerHTML = message.refer_text;
|
||||
return messageElementRefer;
|
||||
}
|
||||
function messageVoiceToTextBubble(message, side) {
|
||||
const messageVoiceToTextTag = document.createElement('div');
|
||||
messageVoiceToTextTag.className = `bubble bubble-${side}`;
|
||||
messageVoiceToTextTag.innerHTML = message.voice_to_text;
|
||||
return messageVoiceToTextTag;
|
||||
}
|
||||
function messageAudioBox(message) {
|
||||
const messageAudioTag = document.createElement('div');
|
||||
messageAudioTag.className = `chat-audio`;
|
||||
messageAudioTag.innerHTML = `<audio src="${message.text}" controls></audio>`;
|
||||
return messageAudioTag;
|
||||
}
|
||||
|
||||
// 从数据列表中取出对应范围的元素并添加到容器中
|
||||
for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) {
|
||||
const message = chatMessages[i];
|
||||
if (i == startIndex) { // 判断一下在页面顶部多加一个时间
|
||||
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 avatarTag = avatarBox(message); // 头像
|
||||
const messageContent = document.createElement('div'); // 除了avatar之外的所有
|
||||
const side = message.is_send ? "right" : "left";
|
||||
if (message.type == 1) {
|
||||
// displayname 和 bubble
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
messageContent.appendChild(messageBubble(message, side));
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
else if (message.type == 0) {
|
||||
messageElement.className = "item item-center";
|
||||
messageElement.innerHTML = `<span>${message.text}</span>`;
|
||||
}
|
||||
else if (message.type == 3) {
|
||||
// displayname 和 img
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
messageContent.appendChild(messageImgBox(message));
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
else if (message.type == 43) {
|
||||
// displayname 和 video
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
messageContent.appendChild(messageVideoBox(message));
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
else if (message.type == 49) {
|
||||
if (message.sub_type == 57) {
|
||||
// displayname 和 bubble 和 refer
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
messageContent.appendChild(messageBubble(message, side));
|
||||
if (message.refer_text) {
|
||||
messageContent.appendChild(messageElementReferText(message, side));
|
||||
}
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
}
|
||||
else if (message.type == 34) {
|
||||
// displayname 和 转的文字 和 audio
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
if (message.voice_to_text) {
|
||||
messageContent.appendChild(messageVoiceToTextBubble(message, side));
|
||||
}
|
||||
messageContent.appendChild(messageAudioBox(message));
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
chatContainer.appendChild(messageElement);
|
||||
}
|
||||
document.querySelector("#chat-container").scrollTop = lastScrollTop;
|
||||
updatePaginationInfo();
|
||||
refreshMediaListener();
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
renderPage(currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
function nextPage() {
|
||||
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
renderPage(currentPage);
|
||||
}
|
||||
}
|
||||
function updatePaginationInfo() {
|
||||
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
||||
const paginationInfo = document.getElementById('paginationInfo');
|
||||
paginationInfo.textContent = `共 ${totalPages} 页，当前第 ${currentPage} 页`;
|
||||
}
|
||||
function gotoPage() {
|
||||
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
||||
const inputElement = document.getElementById('gotoPageInput');
|
||||
const targetPage = parseInt(inputElement.value);
|
||||
|
||||
if (targetPage >= 1 && targetPage <= totalPages) {
|
||||
currentPage = targetPage;
|
||||
renderPage(currentPage);
|
||||
} else {
|
||||
alert('请输入有效的页码');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function checkScroll() {
|
||||
var chatContainer = document.getElementById("chat-container");
|
||||
|
||||
// 检查滚动条是否滑到底部
|
||||
if (chatContainer.scrollHeight - chatContainer.scrollTop - 10 <= chatContainer.clientHeight) {
|
||||
// 如果滚动条在底部
|
||||
if (!reachedBottom) {
|
||||
// 设置标记并返回
|
||||
reachedBottom = true;
|
||||
lastScrollTop = chatContainer.scrollTop;
|
||||
}
|
||||
if (reachedBottom) {
|
||||
nextPage();
|
||||
}
|
||||
}
|
||||
}
|
||||
// 初始化页面
|
||||
renderPage(currentPage);
|
||||
|
||||
function refreshMediaListener() {
|
||||
const audioTags = document.querySelectorAll('audio');
|
||||
const videoTags = document.querySelectorAll('video');
|
||||
|
||||
audioTags.forEach(audio => {
|
||||
audio.addEventListener('play', function () {
|
||||
pauseOtherMedia(audio);
|
||||
});
|
||||
});
|
||||
videoTags.forEach(video => {
|
||||
video.addEventListener('play', function () {
|
||||
pauseOtherMedia(video);
|
||||
});
|
||||
});
|
||||
|
||||
function pauseOtherMedia(currentMedia) {
|
||||
const audioTags = document.querySelectorAll('audio');
|
||||
const videoTags = document.querySelectorAll('video');
|
||||
audioTags.forEach(media => {
|
||||
if (media !== currentMedia && !media.paused) {
|
||||
media.pause();
|
||||
}
|
||||
});
|
||||
videoTags.forEach(media => {
|
||||
if (media !== currentMedia && !media.paused) {
|
||||
media.pause();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
refreshMediaListener();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function showModal(image) {
|
||||
var modal = document.getElementById("modal");
|
||||
var modalImage = document.getElementById("modal-image");
|
||||
modal.style.display = "block";
|
||||
modalImage.src = image.src;
|
||||
console.log(image.src);
|
||||
}
|
||||
|
||||
function hideModal() {
|
||||
var modal = document.getElementById("modal");
|
||||
modal.style.display = "none";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
'''
|
||||
self.requestInterruption()
|
||||
@ -32,5 +32,6 @@
|
||||
<qresource prefix="/data">
|
||||
<file>version_list.json</file>
|
||||
<file>stopwords.txt</file>
|
||||
<file>template.html</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
752
app/resources/template.html
Normal file
752
app/resources/template.html
Normal file
@ -0,0 +1,752 @@
|
||||
<!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>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
display: block;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.container{
|
||||
height: 99%;
|
||||
width: 900px;
|
||||
border-radius: 4px;
|
||||
border: 0.5px solid #e0e0e0;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content{
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
overflow-y: scroll;
|
||||
flex: 1;
|
||||
}
|
||||
.content:hover::-webkit-scrollbar-thumb{
|
||||
background:rgba(0,0,0,0.1);
|
||||
}
|
||||
.bubble{
|
||||
max-width: 400px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
color: #000;
|
||||
word-wrap:break-word;
|
||||
word-break:normal;
|
||||
}
|
||||
.chat-refer {
|
||||
margin-top: 5px;
|
||||
max-width: 400px;
|
||||
padding: 9px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
color: #000;
|
||||
background-color: #e8e8e8;
|
||||
word-wrap:break-word;
|
||||
word-break:normal;
|
||||
}
|
||||
.chat-refer-right {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.chat-refer-left{
|
||||
margin-left: 15px;
|
||||
}
|
||||
.item-left .bubble{
|
||||
margin-left: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.item-left .bubble:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-top: 10px solid transparent;
|
||||
border-right: 10px solid #fff;
|
||||
border-bottom: 10px solid transparent;
|
||||
left: -20px;
|
||||
}
|
||||
.item-right .bubble{
|
||||
margin-right: 15px;
|
||||
background-color: #9eea6a;
|
||||
}
|
||||
.item-right .bubble:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid #9eea6a;
|
||||
border-top: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
right: -20px;
|
||||
}
|
||||
.item {
|
||||
white-space: pre-wrap;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.item-refer{
|
||||
margin-top: 4px;
|
||||
}
|
||||
.item.item-right{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.item.item-center{
|
||||
justify-content: center;
|
||||
}
|
||||
.item.item-center span{
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
color: #fff;
|
||||
background-color: #dadada;
|
||||
border-radius: 3px;
|
||||
-moz-user-select:none; /*火狐*/
|
||||
-webkit-user-select:none; /*webkit浏览器*/
|
||||
-ms-user-select:none; /*IE10*/
|
||||
-khtml-user-select:none; /*早期浏览器*/
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-wrapper-left {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.content-wrapper-right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.displayname {
|
||||
margin-left: 13px;
|
||||
margin-left: 13px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
color: darkgray;
|
||||
}
|
||||
|
||||
.chat-image img{
|
||||
margin-right: 18px;
|
||||
margin-left: 18px;
|
||||
max-width: 300px;
|
||||
max-height: auto;
|
||||
}
|
||||
.avatar img{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.chat-video video{
|
||||
margin-right: 18px;
|
||||
margin-left: 18px;
|
||||
max-width: 350px;
|
||||
}
|
||||
.chat-audio{
|
||||
max-width: 400px;
|
||||
}
|
||||
audio{
|
||||
margin-left: 9px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
.input-area{
|
||||
border-top:0.5px solid #e0e0e0;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
textarea{
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
outline:none;
|
||||
resize:none;
|
||||
}
|
||||
.button-area{
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
line-height: 40px;
|
||||
padding: 5px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.button-area button{
|
||||
width: 80px;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 设置滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width:10px;
|
||||
}
|
||||
/* 滚动槽 */
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
|
||||
border-radius:8px;
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius:10px;
|
||||
background:rgba(0,0,0,0);
|
||||
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px; /* 新增的左边距 */
|
||||
}
|
||||
|
||||
.button-row,
|
||||
.jump-row,
|
||||
#paginationInfo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 25px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 0 14px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 8px;
|
||||
width: 120px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 0px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#paginationInfo {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.emoji_img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
vertical-align: middle;
|
||||
margin-top: -4.4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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>
|
||||
<div></div>
|
||||
<div id="modal" class="modal" onclick="hideModal()">
|
||||
<img id="modal-image" class="modal-image">
|
||||
</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 id="paginationInfo"></div>
|
||||
</div>
|
||||
<script>
|
||||
const chatContainer = document.getElementById('chat-container');
|
||||
// Sample chat messages (replace this with your actual data)
|
||||
const chatMessages = [
|
||||
/*注意看这是分割线*/
|
||||
];
|
||||
function checkEnter(event) {
|
||||
if (event.keyCode === 13) {
|
||||
gotoPage();
|
||||
}
|
||||
}
|
||||
|
||||
const itemsPerPage = 100; // 每页显示的元素个数
|
||||
let currentPage = 1; // 当前页
|
||||
var reachedBottom = false; // 到达底部的标记
|
||||
var lastScrollTop = 0;
|
||||
function renderPage(page) {
|
||||
const container = document.getElementById('chat-container');
|
||||
if (!reachedBottom) {
|
||||
container.innerHTML = ''; // 清空容器
|
||||
lastScrollTop = 0;
|
||||
} else {
|
||||
reachedBottom = false;
|
||||
}
|
||||
|
||||
// 计算当前页应该显示的元素范围
|
||||
const startIndex = (page - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
|
||||
function replaceEmoji(text){
|
||||
|
||||
// 定义替换规则，可以根据需要添加更多规则
|
||||
var replacementRules = [
|
||||
{ pattern: /\[微笑\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_1@2x.png" id="微笑" class="emoji_img">' },
|
||||
{ pattern: /\[发呆\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_4@2x.png" id="发呆" class="emoji_img">' },
|
||||
{pattern: /\[撇嘴\]/g,replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_2@2x.png" id="撇嘴" class="emoji_img">'},
|
||||
{pattern: /\[色\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_3@2x.png" id="色" class="emoji_img">'},
|
||||
{pattern: /\[发呆\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_4@2x.png" id="发呆" class="emoji_img">'},
|
||||
{pattern: /\[得意\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_5@2x.png" id="得意" class="emoji_img">'},
|
||||
{pattern: /\[流泪\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_6@2x.png" id="流泪" class="emoji_img">'},
|
||||
{pattern: /\[害羞\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_7@2x.png" id="害羞" class="emoji_img">'},
|
||||
{pattern: /\[闭嘴\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_8@2x.png" id="闭嘴" class="emoji_img">'},
|
||||
{pattern: /\[睡\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_9@2x.png" id="睡" class="emoji_img">'},
|
||||
{pattern: /\[大哭\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_10@2x.png" id="大哭" class="emoji_img">'},
|
||||
{pattern: /\[尴尬\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_11@2x.png" id="尴尬" class="emoji_img">'},
|
||||
{pattern: /\[发怒\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_12@2x.png" id="发怒" class="emoji_img">'},
|
||||
{pattern: /\[调皮\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_13@2x.png" id="调皮" class="emoji_img">'},
|
||||
{pattern: /\[呲牙\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_14@2x.png" id="呲牙" class="emoji_img">'},
|
||||
{pattern: /\[惊讶\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_15@2x.png" id="惊讶" class="emoji_img">'},
|
||||
{pattern: /\[难过\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_16@2x.png" id="难过" class="emoji_img">'},
|
||||
{pattern: /\[抓狂\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_19@2x.png" id="抓狂" class="emoji_img">'},
|
||||
{pattern: /\[吐\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_20@2x.png" id="吐" class="emoji_img">'},
|
||||
{pattern: /\[偷笑\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_21@2x.png" id="偷笑" class="emoji_img">'},
|
||||
{pattern: /\[愉快\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_22@2x.png" id="愉快" class="emoji_img">'},
|
||||
{pattern: /\[白眼\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_23@2x.png" id="白 眼" class="emoji_img">'},
|
||||
{pattern: /\[傲慢\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_24@2x.png" id="傲慢" class="emoji_img">'},
|
||||
{pattern: /\[困\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_26@2x.png" id="困" class="emoji_img">'},
|
||||
{pattern: /\[惊恐\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_27@2x.png" id="惊恐" class="emoji_img">'},
|
||||
{pattern: /\[憨笑\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_29@2x.png" id="憨笑" class="emoji_img">'},
|
||||
{pattern: /\[悠闲\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_30@2x.png" id="悠闲" class="emoji_img">'},
|
||||
{pattern: /\[咒骂\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_32@2x.png" id="咒骂" class="emoji_img">'},
|
||||
{pattern: /\[疑问\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_33@2x.png" id="疑问" class="emoji_img">'},
|
||||
{pattern: /\[嘘\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_34@2x.png" id="嘘" class="emoji_img">'},
|
||||
{pattern: /\[晕\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_35@2x.png" id="晕" class="emoji_img">'},
|
||||
{pattern: /\[衰\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_37@2x.png" id="衰" class="emoji_img">'},
|
||||
{pattern: /\[骷髅\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_38@2x.png" id="骷髅" class="emoji_img">'},
|
||||
{pattern: /\[敲打\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_39@2x.png" id="敲打" class="emoji_img">'},
|
||||
{pattern: /\[再见\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_40@2x.png" id="再见" class="emoji_img">'},
|
||||
{pattern: /\[擦汗\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_41@2x.png" id="擦汗" class="emoji_img">'},
|
||||
{pattern: /\[抠鼻\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_42@2x.png" id="抠鼻" class="emoji_img">'},
|
||||
{pattern: /\[鼓掌\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_43@2x.png" id="鼓掌" class="emoji_img">'},
|
||||
{pattern: /\[坏笑\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_45@2x.png" id="坏笑" class="emoji_img">'},
|
||||
{pattern: /\[右哼哼\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_47@2x.png" id="右哼哼" class="emoji_img">'},
|
||||
{pattern: /\[鄙视\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_49@2x.png" id="鄙视" class="emoji_img">'},
|
||||
{pattern: /\[委屈\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_50@2x.png" id="委屈" class="emoji_img">'},
|
||||
{pattern: /\[快哭了\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_51@2x.png" id="快哭了" class="emoji_img">'},
|
||||
{pattern: /\[阴险\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_52@2x.png" id="阴险" class="emoji_img">'},
|
||||
{pattern: /\[亲亲\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_53@2x.png" id="亲亲" class="emoji_img">'},
|
||||
{pattern: /\[可怜\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_55@2x.png" id="可怜" class="emoji_img">'},
|
||||
{pattern: /\[Whimper\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_55@2x.png" id="可怜" class="emoji_img">'},
|
||||
{pattern: /\[笑脸\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Happy.png" id="笑脸" class="emoji_img">'},
|
||||
{pattern: /\[生病\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Sick.png" id="生病" class="emoji_img">'},
|
||||
{pattern: /\[脸红\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Flushed.png" id="脸红" class="emoji_img">'},
|
||||
{pattern: /\[破涕为笑\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Lol.png" id="破涕为笑" class="emoji_img">'},
|
||||
{pattern: /\[恐惧\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Terror.png" id="恐惧" class="emoji_img">'},
|
||||
{pattern: /\[失望\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/LetDown.png" id="失望" class="emoji_img">'},
|
||||
{pattern: /\[无语\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Duh.png" id="无语" class="emoji_img">'},
|
||||
{pattern: /\[嘿哈\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_04.png" id="嘿哈" class="emoji_img">'},
|
||||
{pattern: /\[捂脸\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_05.png" id="捂脸" class="emoji_img">'},
|
||||
{pattern: /\[奸笑\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_02.png" id="奸笑" class="emoji_img">'},
|
||||
{pattern: /\[机智\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_06.png" id="机智" class="emoji_img">'},
|
||||
{pattern: /\[皱眉\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_12.png" id="皱眉" class="emoji_img">'},
|
||||
{pattern: /\[耶\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_11.png" id="耶" class="emoji_img">'},
|
||||
{pattern: /\[吃瓜\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Watermelon.png" id="吃瓜" class="emoji_img">'},
|
||||
{pattern: /\[加油\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Addoil.png" id="加油" class="emoji_img">'},
|
||||
{pattern: /\[汗\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Sweat.png" id="汗" class="emoji_img">'},
|
||||
{pattern: /\[天啊\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Shocked.png" id="天啊" class="emoji_img">'},
|
||||
{pattern: /\[Emm\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Cold.png" id="Emm" class="emoji_img">'},
|
||||
{pattern: /\[社会社会\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Social.png" id="社会社会" class="emoji_img">'},
|
||||
{pattern: /\[旺柴\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Yellowdog.png" id="旺柴" class="emoji_img">'},
|
||||
{pattern: /\[好的\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/NoProb.png" id="好的" class="emoji_img">'},
|
||||
{pattern: /\[打脸\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Slap.png" id="打脸" class="emoji_img">'},
|
||||
{pattern: /\[哇\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Wow.png" id="哇" class="emoji_img">'},
|
||||
{pattern: /\[翻白眼\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Boring.png" id="翻白眼" class="emoji_img">'},
|
||||
{pattern: /\[666\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/666.png" id="666" class="emoji_img">'},
|
||||
{pattern: /\[让我看看\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/LetMeSee.png" id="让我看看" class="emoji_img">'},
|
||||
{pattern: /\[叹气\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Sigh.png" id="叹气" class="emoji_img">'},
|
||||
{pattern: /\[苦涩\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Hurt.png" id="苦涩" class="emoji_img">'},
|
||||
{pattern: /\[裂开\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Broken.png" id="裂开" class="emoji_img">'},
|
||||
{pattern: /\[嘴唇\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_66@2x.png" id="嘴唇" class="emoji_img">'},
|
||||
{pattern: /\[爱心\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_67@2x.png" id="爱心" class="emoji_img">'},
|
||||
{pattern: /\[心碎\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_68@2x.png" id="心碎" class="emoji_img">'},
|
||||
{pattern: /\[拥抱\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_79@2x.png" id="拥抱" class="emoji_img">'},
|
||||
{pattern: /\[强\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_80@2x.png" id="强" class="emoji_img">'},
|
||||
{pattern: /\[弱\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_81@2x.png" id="弱" class="emoji_img">'},
|
||||
{pattern: /\[握手\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_82@2x.png" id="握手" class="emoji_img">'},
|
||||
{pattern: /\[胜利\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_83@2x.png" id="胜利" class="emoji_img">'},
|
||||
{pattern: /\[抱拳\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_84@2x.png" id="抱拳" class="emoji_img">'},
|
||||
{pattern: /\[勾引\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_85@2x.png" id="勾引" class="emoji_img">'},
|
||||
{pattern: /\[拳头\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_86@2x.png" id="拳头" class="emoji_img">'},
|
||||
{pattern: /\[OK\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_90@2x.png" id="OK" class="emoji_img">'},
|
||||
{pattern: /\[合十\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Worship.png" id="合十" class="emoji_img">'},
|
||||
{pattern: /\[啤酒\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_58@2x.png" id="啤酒" class="emoji_img">'},
|
||||
{pattern: /\[咖啡]\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_61@2x.png" id="咖啡" class="emoji_img">'},
|
||||
{pattern: /\[蛋糕\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_69@2x.png" id="蛋糕" class="emoji_img">'},
|
||||
{pattern: /\[玫瑰\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_64@2x.png" id="玫 瑰" class="emoji_img">'},
|
||||
{pattern: /\[凋谢\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_65@2x.png" id="凋谢" class="emoji_img">'},
|
||||
{pattern: /\[菜刀\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_56@2x.png" id="菜刀" class="emoji_img">'},
|
||||
{pattern: /\[炸弹\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_71@2x.png" id="炸弹" class="emoji_img">'},
|
||||
{pattern: /\[便便\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_75@2x.png" id="便便" class="emoji_img">'},
|
||||
{pattern: /\[月亮\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_76@2x.png" id="月亮" class="emoji_img">'},
|
||||
{pattern: /\[太阳\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_77@2x.png" id="太阳" class="emoji_img">'},
|
||||
{pattern: /\[庆 祝\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Party.png" id="庆祝" class="emoji_img">'},
|
||||
{pattern: /\[礼物\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_78@2x.png" id="礼物" class="emoji_img">'},
|
||||
{pattern: /\[红包\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_09.png" id="红包" class="emoji_img">'},
|
||||
{pattern: /\[發\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_16.png" id="發" class="emoji_img">'},
|
||||
{pattern: /\[福\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/2_15.png" id="福" class="emoji_img">'},
|
||||
{pattern: /\[烟花\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Fireworks.png" id="烟花" class="emoji_img">'},
|
||||
{pattern: /\[爆竹\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/newemoji/Firecracker.png" id="爆竹" class="emoji_img">'},
|
||||
{pattern: /\[猪头\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_63@2x.png" id="猪头" class="emoji_img">'},
|
||||
{pattern: /\[跳跳\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_93@2x.png" id="跳跳" class="emoji_img">'},
|
||||
{pattern: /\[发抖\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_94@2x.png" id="发抖" class="emoji_img">'},
|
||||
{pattern: /\[转圈\]/g, replacement: '<img src="https://res.wx.qq.com/t/wx_fed/we-emoji/res/v1.2.8/assets/Expression/Expression_96@2x.png" id="转圈" class="emoji_img">'}
|
||||
];
|
||||
|
||||
// 循环遍历替换规则
|
||||
for (var i = 0; i < replacementRules.length; i++) {
|
||||
var rule = replacementRules[i];
|
||||
text= text.replace(rule.pattern, rule.replacement);
|
||||
}
|
||||
return text;
|
||||
}
|
||||
// 生成各类标签的函数
|
||||
function messageBubble(message, side) {
|
||||
const messageBubbleTag = document.createElement('div');
|
||||
messageBubbleTag.className = `bubble bubble-${side}`;
|
||||
messageBubbleTag.innerHTML = replaceEmoji(message.text);
|
||||
return messageBubbleTag;
|
||||
}
|
||||
function displayNameBox(message) {
|
||||
const displayName = document.createElement('div');
|
||||
displayName.className = "displayname";
|
||||
displayName.innerHTML = message.displayname;
|
||||
return displayName;
|
||||
}
|
||||
function avatarBox(message) {
|
||||
const avatarTag = document.createElement('div');
|
||||
avatarTag.className = "avatar";
|
||||
avatarTag.innerHTML = `<img src="${message.avatar_path}" />`
|
||||
return avatarTag;
|
||||
}
|
||||
function messageImgBox(message) {
|
||||
const messageImgTag = document.createElement('div');
|
||||
messageImgTag.className = `chat-image`;
|
||||
messageImgTag.innerHTML = `<img src="${message.text}" onclick="showModal(this)"/>`;
|
||||
return messageImgTag;
|
||||
}
|
||||
function messageVideoBox(message) {
|
||||
const messageVideoTag = document.createElement('div');
|
||||
messageVideoTag.className = `chat-video`;
|
||||
messageVideoTag.innerHTML = `<video src="${message.text}" controls />`;
|
||||
return messageVideoTag;
|
||||
}
|
||||
function messageElementReferText(message, side) {
|
||||
const messageElementRefer = document.createElement('div');
|
||||
messageElementRefer.className = `chat-refer chat-refer-${side}`;
|
||||
messageElementRefer.innerHTML = replaceEmoji(message.refer_text);
|
||||
return messageElementRefer;
|
||||
}
|
||||
function messageVoiceToTextBubble(message, side) {
|
||||
const messageVoiceToTextTag = document.createElement('div');
|
||||
messageVoiceToTextTag.className = `bubble bubble-${side}`;
|
||||
messageVoiceToTextTag.innerHTML = message.voice_to_text;
|
||||
return messageVoiceToTextTag;
|
||||
}
|
||||
function messageAudioBox(message) {
|
||||
const messageAudioTag = document.createElement('div');
|
||||
messageAudioTag.className = `chat-audio`;
|
||||
messageAudioTag.innerHTML = `<audio src="${message.text}" controls></audio>`;
|
||||
return messageAudioTag;
|
||||
}
|
||||
|
||||
// 从数据列表中取出对应范围的元素并添加到容器中
|
||||
for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) {
|
||||
const message = chatMessages[i];
|
||||
if (i == startIndex) { // 判断一下在页面顶部多加一个时间
|
||||
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 avatarTag = avatarBox(message); // 头像
|
||||
const messageContent = document.createElement('div'); // 除了avatar之外的所有
|
||||
const side = message.is_send ? "right" : "left";
|
||||
if (message.type == 1) {
|
||||
// displayname 和 bubble
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
messageContent.appendChild(messageBubble(message, side));
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
else if (message.type == 0) {
|
||||
messageElement.className = "item item-center";
|
||||
messageElement.innerHTML = `<span>${message.text}</span>`;
|
||||
}
|
||||
else if (message.type == 3) {
|
||||
// displayname 和 img
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
messageContent.appendChild(messageImgBox(message));
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
else if (message.type == 43) {
|
||||
// displayname 和 video
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
messageContent.appendChild(messageVideoBox(message));
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
else if (message.type == 49) {
|
||||
if (message.sub_type == 57) {
|
||||
// displayname 和 bubble 和 refer
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
messageContent.appendChild(messageBubble(message, side));
|
||||
if (message.refer_text) {
|
||||
messageContent.appendChild(messageElementReferText(message, side));
|
||||
}
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
}
|
||||
else if (message.type == 34) {
|
||||
// displayname 和 转的文字 和 audio
|
||||
messageContent.className = `content-wrapper content-wrapper-${side}`;
|
||||
if (message.is_chatroom && !message.is_send) {
|
||||
messageContent.appendChild(displayNameBox(message));
|
||||
}
|
||||
if (message.voice_to_text) {
|
||||
messageContent.appendChild(messageVoiceToTextBubble(message, side));
|
||||
}
|
||||
messageContent.appendChild(messageAudioBox(message));
|
||||
|
||||
// 整合
|
||||
messageElement.className = `item item-${side}`;
|
||||
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
|
||||
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
|
||||
}
|
||||
chatContainer.appendChild(messageElement);
|
||||
}
|
||||
document.querySelector("#chat-container").scrollTop = lastScrollTop;
|
||||
updatePaginationInfo();
|
||||
refreshMediaListener();
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
renderPage(currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
function nextPage() {
|
||||
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
renderPage(currentPage);
|
||||
}
|
||||
}
|
||||
function updatePaginationInfo() {
|
||||
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
||||
const paginationInfo = document.getElementById('paginationInfo');
|
||||
paginationInfo.textContent = `共 ${totalPages} 页，当前第 ${currentPage} 页`;
|
||||
}
|
||||
function gotoPage() {
|
||||
const totalPages = Math.ceil(chatMessages.length / itemsPerPage);
|
||||
const inputElement = document.getElementById('gotoPageInput');
|
||||
const targetPage = parseInt(inputElement.value);
|
||||
|
||||
if (targetPage >= 1 && targetPage <= totalPages) {
|
||||
currentPage = targetPage;
|
||||
renderPage(currentPage);
|
||||
} else {
|
||||
alert('请输入有效的页码');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function checkScroll() {
|
||||
var chatContainer = document.getElementById("chat-container");
|
||||
|
||||
// 检查滚动条是否滑到底部
|
||||
if (chatContainer.scrollHeight - chatContainer.scrollTop - 10 <= chatContainer.clientHeight) {
|
||||
// 如果滚动条在底部
|
||||
if (!reachedBottom) {
|
||||
// 设置标记并返回
|
||||
reachedBottom = true;
|
||||
lastScrollTop = chatContainer.scrollTop;
|
||||
}
|
||||
if (reachedBottom) {
|
||||
nextPage();
|
||||
}
|
||||
}
|
||||
}
|
||||
// 初始化页面
|
||||
renderPage(currentPage);
|
||||
|
||||
function refreshMediaListener() {
|
||||
const audioTags = document.querySelectorAll('audio');
|
||||
const videoTags = document.querySelectorAll('video');
|
||||
|
||||
audioTags.forEach(audio => {
|
||||
audio.addEventListener('play', function () {
|
||||
pauseOtherMedia(audio);
|
||||
});
|
||||
});
|
||||
videoTags.forEach(video => {
|
||||
video.addEventListener('play', function () {
|
||||
pauseOtherMedia(video);
|
||||
});
|
||||
});
|
||||
|
||||
function pauseOtherMedia(currentMedia) {
|
||||
const audioTags = document.querySelectorAll('audio');
|
||||
const videoTags = document.querySelectorAll('video');
|
||||
audioTags.forEach(media => {
|
||||
if (media !== currentMedia && !media.paused) {
|
||||
media.pause();
|
||||
}
|
||||
});
|
||||
videoTags.forEach(media => {
|
||||
if (media !== currentMedia && !media.paused) {
|
||||
media.pause();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
refreshMediaListener();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function showModal(image) {
|
||||
var modal = document.getElementById("modal");
|
||||
var modalImage = document.getElementById("modal-image");
|
||||
modal.style.display = "block";
|
||||
modalImage.src = image.src;
|
||||
console.log(image.src);
|
||||
}
|
||||
|
||||
function hideModal() {
|
||||
var modal = document.getElementById("modal");
|
||||
modal.style.display = "none";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user