Shikong/WeChatMsg
1
0
Fork 0
mirror of https://github.com/LC044/WeChatMsg synced 2024-11-16 06:51:19 +08:00
Code Issues Packages Projects Releases Wiki Activity
fcbb2e8415
WeChatMsg/app/resources/data/template.html

1135 lines
52 KiB
HTML
Raw Normal View History

修改文件
2023-12-24 22:29:08 +08:00
<!DOCTYPE html>
<html lang="en">
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Records</title>
<style>
修改文件
2023-12-24 22:29:08 +08:00
*{
padding: 0;
margin: 0;
}
body{
display: flex;
html适配移动端
2023-12-29 22:41:49 +08:00
flex-direction: row;
height: 100vh;
margin: 0;
修改文件
2023-12-24 22:29:08 +08:00
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{
html适配移动端
2023-12-29 22:41:49 +08:00
height: 80vh;
width: 100%;
max-width: 900px;
修改文件
2023-12-24 22:29:08 +08:00
border-radius: 4px;
border: 0.5px solid #e0e0e0;
background-color: #f5f5f5;
display: flex;
html适配移动端
2023-12-29 22:41:49 +08:00
/* flex-flow: column; */
修改文件
2023-12-24 22:29:08 +08:00
overflow: hidden;
html适配移动端
2023-12-29 22:41:49 +08:00
justify-content: center; /* 在主轴上居中 */
修改文件
2023-12-24 22:29:08 +08:00
}
.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{
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
white-space: pre-wrap;
修改文件
2023-12-24 22:29:08 +08:00
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 {
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,.chat-file img{
margin-right: 18px;
margin-left: 18px;
max-width: 300px;
max-height: auto;
}
.avatar img{
width: 42px;
height: 42px;
border-radius: 50%;
.avatar user-select:none
2024-01-05 20:25:52 +08:00
user-select: none;
修改文件
2023-12-24 22:29:08 +08:00
}
.chat-video video{
margin-right: 18px;
margin-left: 18px;
max-width: 350px;
}
.chat-audio{
max-width: 400px;
}
audio{
margin-left: 9px;
margin-right: 9px;
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio, .chat-file{
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
width: 300px;
margin-right: 20px;
display: flex;
flex-direction: column;
padding: 10px;
background-color: #fff;
border-radius: 4px;
cursor: pointer;
height: 100px;
margin-left: 10px;
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-file img{
width: 50px;
}
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio .player-box,.chat-file .file-box {
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
width: 300px;
display: flex;
align-items: center;
cursor: pointer;
height: 80px;
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio .player-original ,.chat-file .app-info{
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
border-top: 1px solid #ede3e3;
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio .player-original p ,.chat-file .app-info p{
更改部分css；修复语音转文字部分问题
2024-01-05 22:14:32 +08:00
margin-top: 3px;
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
color: #888;
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio .player-controls, .chat-file .file-img{
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
display: flex;
align-items: center;;
}
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
.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;
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio .flex1,.chat-file .flex1 {
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
flex: 1;
justify-content: start;
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio .flex2 ,.chat-file .flex2{
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
flex: 2;
justify-content: end;
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio .player-info ,.chat-file .file-info{
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
width: 200px;
height: 80px;
更改部分css；修复语音转文字部分问题
2024-01-05 22:14:32 +08:00
margin-left: 4px;
margin-top: 15px;
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
white-space: normal;
flex-basis: 200px;
更改部分css；修复语音转文字部分问题
2024-01-05 22:14:32 +08:00
word-break: break-word;
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio .song-title,.chat-file .file-name {
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
font-weight: bold;
overflow-wrap: break-word;
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
.chat-music-audio .artist ,.chat-file .file-size{
更改部分css；修复语音转文字部分问题
2024-01-05 22:14:32 +08:00
margin-top: 5px;
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
color: #888;
}
更改部分css；修复语音转文字部分问题
2024-01-05 22:14:32 +08:00
.app-info {
font-size: 13px;
margin-left: 3px;
margin-right: 3px;
}
.file-size {
font-size: 14px;
}
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
.chat-music-audio .play-button {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0);
border-radius: 50%;
border: none;
outline: none;
cursor: pointer;
}
.chat-music-audio .play-button.playing {
background: url("./icon/pause.png");
}
.chat-music-audio .play-button.paused {
background: url("./icon/play.png");
}
修改文件
2023-12-24 22:29:08 +08:00
.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;
html适配移动端
2023-12-29 22:41:49 +08:00
margin-top: 0px;
修改文件
2023-12-24 22:29:08 +08:00
margin-left: 20px; /* 新增的左边距 */
html适配移动端
2023-12-29 22:41:49 +08:00
justify-content: center; /* 在主轴上居中 */
修改文件
2023-12-24 22:29:08 +08:00
}
.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;
}
html支持导出分享的卡片链接
2024-01-02 00:39:45 +08:00
/* 分享的卡片 */
.card {
background-color: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 400px;
display: flex;
flex-direction: column;
text-align: left;
解决了share_card并没有des的问题
2024-01-03 10:58:26 +08:00
margin: 5px 20px 20px 20px;
html支持导出分享的卡片链接
2024-01-02 00:39:45 +08:00
}
.card a {
text-decoration: none; /* 去掉链接的下划线 */
color: inherit; /* 继承父元素的文字颜色 */
}
.card-content {
padding: 20px;
flex: 1;
}
.thumbnail {
width: 50px;
height: 50px;
object-fit: cover;
}
.description{
display: flex;
justify-content: space-between;
}
.link-info {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background-color: #f0f0f0;
}
.app-logo {
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
}
.app-name {
font-weight: bold;
}
html适配移动端
2023-12-29 22:41:49 +08:00
@media screen and (max-width: 768px) {
body{
display: flex; /* 使用 Flex 布局 */
flex-direction: column; /* 设置主轴方向为垂直方向 */
align-items: center; /* 在交叉轴上居中 */
}
/* 在屏幕宽度小于等于 768px 时应用的样式 */
.pagination-container {
display: flex; /* 使用 Flex 布局 */
justify-content: center; /* 在主轴上居中 */
flex-direction: row;
}
.button-row,
.jump-row,
#paginationInfo {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0px;
}
button {
padding: 5px 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 0 5px;
transition: background-color 0.3s;
}
修改文件
2023-12-24 22:29:08 +08:00
html适配移动端
2023-12-29 22:41:49 +08:00
button:hover {
background-color: #2980b9;
}
input {
padding: 8px;
width: 120px;
box-sizing: border-box;
margin-right: 0px;
margin-left: 5px;
}
}
删掉自己写的protobuf；extrabuf提速
2024-01-05 20:06:23 +08:00
.system-msg>.emoji_img {
width: 18px;
height: 18px;
}
修改文件
2023-12-24 22:29:08 +08:00
.emoji_img {
width: 22px;
height: 22px;
vertical-align: middle;
margin-top: -4.4px;
}
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
</style>
</head>
<body>
<div>
<div class="pagination-container">
<div class="button-row">
<button onclick="prevPage()">上一页</button>
<button onclick="nextPage()">下一页</button>
</div>
<div class="jump-row">
<input
type="number"
id="gotoPageInput"
onkeydown="checkEnter(event)"
placeholder="跳转到第几页"
>
<button onclick="gotoPage()">跳转</button>
</div>
修改文件
2023-12-24 22:29:08 +08:00
</div>
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
<div id="paginationInfo"></div>
修改文件
2023-12-24 22:29:08 +08:00
</div>
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
<div class="container">
<div class="content" id="chat-container" onscroll="checkScroll()">
<div class="item item-center">
<span>昨天 12:35</span>
html适配移动端
2023-12-29 22:41:49 +08:00
</div>
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
<div class="item item-center">
<span>你已添加了凡繁烦，现在可以开始聊天了。</span>
html适配移动端
2023-12-29 22:41:49 +08:00
</div>
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
<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>
html适配移动端
2023-12-29 22:41:49 +08:00
</div>
修改文件
2023-12-24 22:29:08 +08:00
</div>
</div>
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
<div></div>
<div id="modal" class="modal" onclick="hideModal()">
<img id="modal-image" class="modal-image">
</div>
<script>
修改文件
2023-12-24 22:29:08 +08:00
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();
}
}
图片使用懒加载减少HTML卡顿
2024-01-02 21:05:19 +08:00
const itemsPerPage = 100; // 每页显示的元素个数
修改文件
2023-12-24 22:29:08 +08:00
let currentPage = 1; // 当前页
var reachedBottom = false; // 到达底部的标记
var lastScrollTop = 0;
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
var lastTimeStamp = 0;
修改文件
2023-12-24 22:29:08 +08:00
function renderPage(page) {
const container = document.getElementById('chat-container');
if (!reachedBottom) {
container.innerHTML = ''; // 清空容器
lastScrollTop = 0;
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
lastTimeStamp = 0;
修改文件
2023-12-24 22:29:08 +08:00
} else {
reachedBottom = false;
}
// 计算当前页应该显示的元素范围
const startIndex = (page - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
// 工具类函数
修改文件
2023-12-24 22:29:08 +08:00
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">'},
解决了share_card并没有des的问题
2024-01-03 10:58:26 +08:00
{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">'},
修改文件
2023-12-24 22:29:08 +08:00
{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;
}
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
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;
}
html支持导出分享的卡片链接
2024-01-02 00:39:45 +08:00
修改文件
2023-12-24 22:29:08 +08:00
// 生成各类标签的函数
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
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));
}
}
修改文件
2023-12-24 22:29:08 +08:00
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";
图片使用懒加载减少HTML卡顿
2024-01-02 21:05:19 +08:00
avatarTag.innerHTML = `<img src="${message.avatar_path}" loading="lazy" />`
修改文件
2023-12-24 22:29:08 +08:00
return avatarTag;
}
function messageImgBox(message) {
const messageImgTag = document.createElement('div');
messageImgTag.className = `chat-image`;
图片使用懒加载减少HTML卡顿
2024-01-02 21:05:19 +08:00
messageImgTag.innerHTML = `<img src="${message.text}" onclick="showModal(this)" loading="lazy"/>`;
修改文件
2023-12-24 22:29:08 +08:00
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;
}
html支持导出分享的卡片链接
2024-01-02 00:39:45 +08:00
function messageCard(message) {
const messageTag = document.createElement('div');
messageTag.className = `card`;
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
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>`;
html支持导出分享的卡片链接
2024-01-02 00:39:45 +08:00
return messageTag;
}
修改文件
2023-12-24 22:29:08 +08:00
function messageFileBox(message) {
const messageFileTag = document.createElement('div');
messageFileTag.className = `chat-file`;
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
messageFileTag.onclick = function (event) {
if (message.text !== '') {
window.open(message.text, '_blank');
}else{
alert("文件可能丢失、过期或不存放在该主机上")
}
修改文件
2023-12-24 22:29:08 +08:00
}
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
messageFileTag.innerHTML = `<div class="file-box">
<div class="file-info flex1">
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
<div class="file-title" title="${message.file_name}">${message.file_name}</div>
补充已过期或丢失文件的处理，添加文件和大小和类型等信息，集中处理一些用到的图标
2024-01-03 21:11:23 +08:00
<div class="file-size">${message.file_size}</div>
</div>
<div class="file-img flex2">
<img src="${message.icon_path}"/>
</div>
更改部分css；修复语音转文字部分问题
2024-01-05 22:14:32 +08:00
</div>` +
(message.app_name ? `<div class="app-info"><p>${message.app_name}</p></div>` : "");
修改文件
2023-12-24 22:29:08 +08:00
return messageFileTag;
}
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
function messageMusicAudioBox(message) {
const messageMusicAudioTag = document.createElement('div');
messageMusicAudioTag.className = `chat-music-audio`;
messageMusicAudioTag.dataset.link = message.link_url;
messageMusicAudioTag.onclick = function (event) {
if (!event.target.classList.contains('play-button')) {
window.open(message.link_url, '_blank');
}
}
if (message.title.length >= 39) {
message.title = message.title.slice(0, 38) + '...'
}
messageMusicAudioTag.innerHTML = `<div class="player-box">
<div class="player-info flex1">
<div class="song-title">${message.title}</div>
</div>
<div class="player-controls flex2">
</div>
</div>
<div class="player-original"><p>${message.website_name}</p></div>
`
if (message.text != '') {
var audio = document.createElement('audio');
audio.src = message.text;
messageMusicAudioTag.querySelector('.player-controls').append(audio)
};
var artist = document.createElement('div');
artist.className = 'artist';
artist.innerHTML = message.artist
if (message.title.length < 26) {
messageMusicAudioTag.querySelector('.player-info').append(artist)
}
var playButton = document.createElement('button');
playButton.className = 'play-button paused';
playButton.onclick = function (event) {
event.stopPropagation(); // 阻止点击播放按钮时触发父级的点击事件
toggleAudio(event.target);
};
if (message.is_send) {
messageMusicAudioTag.querySelector('.player-controls').append(playButton)
} else {
messageMusicAudioTag.querySelector('.player-controls').prepend(playButton)
}
return messageMusicAudioTag;
}
修改文件
2023-12-24 22:29:08 +08:00
// 从数据列表中取出对应范围的元素并添加到容器中
for (let i = startIndex; i < endIndex && i < chatMessages.length; i++) {
const message = chatMessages[i];
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
add5MinTimeTag(message);
修改文件
2023-12-24 22:29:08 +08:00
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";
删掉自己写的protobuf；extrabuf提速
2024-01-05 20:06:23 +08:00
messageElement.innerHTML = `<span class="system-msg">${replaceEmoji(message.text)}</span>`;
修改文件
2023-12-24 22:29:08 +08:00
}
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);
}
html支持导出分享的卡片链接
2024-01-02 00:39:45 +08:00
else if (message.sub_type == 6) {
修改文件
2023-12-24 22:29:08 +08:00
// displayname 和 file
messageContent.className = `content-wrapper content-wrapper-${side}`;
if (message.is_chatroom && !message.is_send) {
messageContent.appendChild(displayNameBox(message));
}
messageContent.appendChild(messageFileBox(message));
// 整合
messageElement.className = `item item-${side}`;
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
}
html支持导出分享的卡片链接
2024-01-02 00:39:45 +08:00
else if (message.sub_type == 3) {
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
// displayname 和 file
messageContent.className = `content-wrapper content-wrapper-${side}`;
if (message.is_chatroom && !message.is_send) {
messageContent.appendChild(displayNameBox(message));
}
messageContent.appendChild(messageMusicAudioBox(message));
// 整合
messageElement.className = `item item-${side}`;
html支持导出分享的卡片链接
2024-01-02 00:39:45 +08:00
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
}
else if(message.sub_type == 5){
// displayname 和 file
messageContent.className = `content-wrapper content-wrapper-${side}`;
if (message.is_chatroom && !message.is_send) {
messageContent.appendChild(displayNameBox(message));
}
messageContent.appendChild(messageCard(message));
// 整合
messageElement.className = `item item-${side}`;
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
messageElement.appendChild(message.is_send ? messageContent : avatarTag);
messageElement.appendChild(message.is_send ? avatarTag : messageContent);
}
修改文件
2023-12-24 22:29:08 +08:00
}
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();
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
</script>
<script>
修改文件
2023-12-24 22:29:08 +08:00
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";
}
添加音乐和音频类型的html支持
2024-01-01 02:12:08 +08:00
function toggleAudio(buttonElm) {
var audioPlayer = buttonElm.parentNode;
var audio = audioPlayer.querySelector('audio');
if (audio == null){
alert("该音频已失效或无法直接播放，有需要请点击音频链接查看")
}else{
if (audio.paused) {
audio.play();
buttonElm.classList.remove('paused');
buttonElm.classList.add('playing');
} else {
audio.pause();
buttonElm.classList.remove('playing');
buttonElm.classList.add('paused');
}
}
}
修改时间显示问题，处理截断问题
2024-01-06 17:06:02 +08:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink