Skip to content

Commit

Permalink
Merge pull request #145 from zsh4869/APTX4869
Browse files Browse the repository at this point in the history 
用户消息捕获，指令消息捕获
  • Loading branch information
@adlered
adlered committed May 8, 2024
2 parents 660f540 + 1253b2c commit 550007c
Show file tree
Hide file tree
Showing 4 changed files with 290 additions and 44 deletions.
104 changes: 60 additions & 44 deletions src/main/resources/js/channel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,53 +472,69 @@ var ChatRoomChannel = {
$('#barragerUnit').text(data.unit);
break;
case 'msg':
// Chatroom
if ($("#chatRoomIndex").length === 0 && $("#chatroom" + data.oId).length <= 0) {
ChatRoom.renderMsg(data);
ChatRoom.resetMoreBtnListen();
}

// index
if ($("#chatRoomIndex").has("#emptyChatRoom").length !== 0) {
$("#emptyChatRoom").remove();
}
let userNickname = data.userNickname;
let userName = data.userName;
if (userNickname !== undefined && userNickname !== "") {
userNickname = userNickname + " ( " + userName + " )"
} else {
userNickname = userName;
}
let newContent = data.content;
if (newContent.indexOf("\"msgType\":\"redPacket\"") !== -1) {
newContent = "[收到红包，请在完整版聊天室查看]";
}
$("#chatRoomIndex").prepend("" +
"<li class=\"fn-flex\" id=\"chatindex" + data.oId + "\" style='display: none; border-bottom: 1px solid #eee;'>\n" +
" <a rel=\"nofollow\" href=\"/member/" + data.userName + "\">\n" +
" <div class=\"avatar tooltipped tooltipped-n\"\n" +
" aria-label=\"" + data.userName + "\"\n" +
" style=\"background-image:url('" + data.userAvatarURL48 + "')\"></div>\n" +
" </a>\n" +
" <div class=\"fn-flex-1\">\n" +
" <div class=\"ft-smaller\">\n" +
" <a rel=\"nofollow\" href=\"/member/" + data.userName + "\">\n" +
" <span class=\"ft-gray\">" + userNickname + "</span>\n" +
" </a>\n" +
" </div>\n" +
" <div class=\"vditor-reset comment " + Label.chatRoomPictureStatus + "\">\n" +
" " + newContent + "\n" +
" </div>\n" +
" </div>\n" +
"</li>");
if ($("#chatRoomIndex li.fn-flex").length === 11) {
$("#chatRoomIndex li.fn-flex:last").fadeOut(199, function () {
$("#chatRoomIndex li.fn-flex:last").remove();
});
let newMd = data.md;
let robotAvatar = data.userAvatarURL;
// 判断为捕获用户，且不是红包消息的情况
if (ChatRoom.catchUsers.includes(userName) && newContent.indexOf("\"msgType\":\"redPacket\"") == -1) {
let robotDom = '<div class="robot-msg-item"><div class="avatar" style="background-image: url(' + robotAvatar + ')"></div><div class="robot-msg-content"> ' + newContent + ' </div></div>';
ChatRoom.addRobotMsg(robotDom);
} else {
// Chatroom
// 判断指令消息
if ($('#catch-word').prop('checked') && (newMd.startsWith("鸽 ") || newMd.startsWith("小冰 ") || newMd.startsWith("凌 ") || newMd.startsWith("ida "))) {
let robotDom = '<div class="robot-msg-item"><div class="avatar" style="background-image: url(' + robotAvatar + ')"></div><div class="robot-msg-content"> ' + newContent + ' </div></div>';
ChatRoom.addRobotMsg(robotDom);
} else {
if ($("#chatRoomIndex").length === 0 && $("#chatroom" + data.oId).length <= 0) {
ChatRoom.renderMsg(data);
ChatRoom.resetMoreBtnListen();
}

// index
if ($("#chatRoomIndex").has("#emptyChatRoom").length !== 0) {
$("#emptyChatRoom").remove();
}
let userNickname = data.userNickname;

if (userNickname !== undefined && userNickname !== "") {
userNickname = userNickname + " ( " + userName + " )"
} else {
userNickname = userName;
}

if (newContent.indexOf("\"msgType\":\"redPacket\"") !== -1) {
newContent = "[收到红包，请在完整版聊天室查看]";
}
$("#chatRoomIndex").prepend("" +
"<li class=\"fn-flex\" id=\"chatindex" + data.oId + "\" style='display: none; border-bottom: 1px solid #eee;'>\n" +
" <a rel=\"nofollow\" href=\"/member/" + data.userName + "\">\n" +
" <div class=\"avatar tooltipped tooltipped-n\"\n" +
" aria-label=\"" + data.userName + "\"\n" +
" style=\"background-image:url('" + data.userAvatarURL48 + "')\"></div>\n" +
" </a>\n" +
" <div class=\"fn-flex-1\">\n" +
" <div class=\"ft-smaller\">\n" +
" <a rel=\"nofollow\" href=\"/member/" + data.userName + "\">\n" +
" <span class=\"ft-gray\">" + userNickname + "</span>\n" +
" </a>\n" +
" </div>\n" +
" <div class=\"vditor-reset comment " + Label.chatRoomPictureStatus + "\">\n" +
" " + newContent + "\n" +
" </div>\n" +
" </div>\n" +
"</li>");
if ($("#chatRoomIndex li.fn-flex").length === 11) {
$("#chatRoomIndex li.fn-flex:last").fadeOut(199, function () {
$("#chatRoomIndex li.fn-flex:last").remove();
});
}
$("#chatRoomIndex li:first").slideDown(200);
Util.listenUserCard();
typeof ChatRoom==="object"&&ChatRoom.imageViewer()
}
}
$("#chatRoomIndex li:first").slideDown(200);
Util.listenUserCard();
typeof ChatRoom==="object"&&ChatRoom.imageViewer()
break;
}
}
Expand Down
101 changes: 101 additions & 0 deletions src/main/resources/js/chat-room.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -464,6 +464,8 @@ var ChatRoom = {
ChatRoom.loadAvatarPendant();
// 加载小冰游戏
ChatRoom.loadXiaoIceGame();
// 初始化用户捕获
ChatRoom.initCatchUser();
// 加载画图
ChatRoom.charInit('paintCanvas');
// 监听弹幕
Expand Down Expand Up @@ -1311,6 +1313,10 @@ border-bottom: none;
* @param userName
*/
shileds: ',',
/**
* 捕获聊天室 某人 消息
*/
catchUsers: '',
shiled: function (uName) {
if (confirm("友好的交流是沟通的基础, 确定要屏蔽 Ta 吗？\n本次屏蔽仅针对当前页面有效, 刷新后需重新屏蔽！")) {
ChatRoom.shileds += uName +",";
Expand Down Expand Up @@ -2168,6 +2174,101 @@ ${result.info.msg}
}));
},

initCatchUser: function () {
// 判断页面是否满足用户开启捕获功能
var sideDom = document.getElementsByClassName('side')[0];
var chatDom = document.getElementsByClassName('chat-room')[0];
var needWidth = sideDom.offsetWidth + chatDom.offsetWidth + 300; // 最小宽度为300px
if (needWidth > window.innerWidth) {
// 删除用户捕获相关的组件和按钮
$("#robotBtn").remove();
$("#robotBox").remove();
} else {
// 自动调整css样式
var chatDomHeight = window.innerHeight - document.getElementsByClassName('nav')[0].offsetHeight;
$("#robotMsgList").attr("style", "height:" + (chatDomHeight - 55) + "px");
// $(".robot-active").eq(0).attr("style", "height:" + (chatDomHeight - 25) + "px");
// $("#robotBox").attr("style", "height:" + (chatDomHeight - 25) + "px");
}
// 点击事件
$("#robotBtn").click(function () {
$("#robotBox").show(200),
$("#robotBtn").hide(200),
setTimeout(() => {
$("#robotBox").addClass("robot-active");
var chatDomHeight = window.innerHeight - document.getElementsByClassName('nav')[0].offsetHeight;
$("#robotBox").attr("style", "height:" + (chatDomHeight - 25) + "px");
}
, 220)
})
$("#robotClose").click(function () {
var e = $("#robotBox");
setTimeout(() => {
$(".robot-chat-input").val(""),
$("#robotBox").hide(200),
$("#robotBtn").show(200)
}
, e.hasClass("robot-active") ? 420 : 1),
e.removeClass("robot-active")
e.css("height", "");
})
$("#robotMinimize").click(function () {
$("#robotBox").toggleClass("robot-active")
})
$("#clearRobotMsg").click(function () {
$(".robot-msg-item").remove();
})
$("#catch-word").click(function () {
window.localStorage['catch-word-flag'] = $('#catch-word').prop('checked');
})
$("#changeCatchUsers").click(function () {
Util.alert("" +
"<div class=\"form fn__flex-column\">\n" +
"<label>\n" +
" <div class=\"ft__smaller\" style=\"float: left\">将捕获的用户id填写到下方输入框；<br>多个用户id的情况用英文逗号隔开。</div>\n" +
" <div class=\"fn-hr5 fn__5\"></div>\n" +
" <input type=\"text\" id=\"robot-catch-user\">\n" +
"</label>\n" +
"<div class=\"fn-hr5\"></div>\n" +
"<div class=\"fn__flex\" style=\"margin-top: 15px; justify-content: flex-end;\">\n" +
" <button class=\"btn btn--confirm\" onclick='ChatRoom.changeCatchUser($(\"#robot-catch-user\").val());Util.closeAlert();'>确认</button>\n" +
"</div>\n" +
"</div>" +
"", "编辑捕获用户列表");
$("#robot-catch-user").val(window.localStorage['robot_list'] ? window.localStorage['robot_list'] : '');
})

// 读取浏览器缓存，获取捕获的用户 和是否捕获关键字
var robotList = window.localStorage['robot_list'] ? window.localStorage['robot_list'] : '';
ChatRoom.changeCatchUser(robotList);
$('#catch-word').prop('checked', window.localStorage['catch-word-flag'] ? window.localStorage['catch-word-flag'] : false);
},

changeCatchUser: function (robotList) {
if (robotList && robotList.length > 0) {
let changeCatch = '<div class="robot-msg-item">' +
'<div class="robot-msg-content">当前捕获用户:' + robotList + '</div>' +
'</div></div>';
$("#robotMsgList").prepend(changeCatch);
} else {
let changeCatch = '<div class="robot-msg-item">' +
'<div class="robot-msg-content">当前不存在需要捕获的用户</div>' +
'</div></div>';
$("#robotMsgList").prepend(changeCatch);
}
window.localStorage['robot_list'] = robotList;
ChatRoom.catchUsers = robotList.split(",");
},

addRobotMsg: function (t) {
$("#robotMsgList").prepend(t);
// 当dom元素数量达到一定程度时，只保留最近的n条数据
const n = 50;
if ($(".robot-msg-item") && $(".robot-msg-item").length > n) {
$('.robot-msg-item:gt(n-1)').remove();
}
},

/**
* 按时间加载头像挂件
* */
Expand Down
110 changes: 110 additions & 0 deletions src/main/resources/scss/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1876,6 +1876,116 @@ a[class*=" icon-"]:hover {
}
}

// 机器人捕获
.robot-btn {
position: fixed;
bottom: 40vh;
left: 0;
z-index: 1024;
width: 75px;
height: 150px;
cursor: pointer;
}
#robotBox{
position: fixed;
bottom: 0;
left: 0;
z-index: 1024;
width: 300px;
height: 30px;
transition: .4s;
background-color: #fff;
box-shadow: -2px -2px 5px rgba(0, 0, 0, .3);
&:not(.active){

}
&.active{
height: 360px;
}
.robot-tool-bar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 30px;
padding: 0 5px;
box-sizing: border-box;
background-color: #3b3e43;
color: #fff;
.robot-toolbar-btn {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
svg {
display: flex;
}
}
}

.robot-logo {
width: 25px;
height: 25px;
transform: rotateZ(-25deg);
}

#robotMsgList {
padding: 10px;
height: 650px;
box-sizing: border-box;
overflow-y: scroll;
overflow-x: hidden;
.robot-msg-item {
display: flex;
margin: 10px 0;
.robot-msg-content {
position: relative;
background-color: var(--background-secondary-color);
border-radius: 5px;
padding: 8px 15px;
overflow: initial;
max-width: 75%;
font-size: 12px;
box-sizing: border-box;
}
}
}
.robot-chat-box{
.robot-clear-btn {
position: absolute;
right: 3px;
top: 3px;
width: 50px;
height: 24px;
line-height: 24px;
text-align: center;
cursor: pointer;
background-color: #60b044;
color: #fff;
border-radius: 2px;
}
.robot-catch-input {
margin-left: 15px;
height: 30px;
padding: 5px 55px 5px 10px;
box-sizing: border-box;
}
.robot-change-btn {
position: absolute;
right: 60px;
top: 3px;
width: 100px;
height: 24px;
line-height: 24px;
text-align: center;
cursor: pointer;
background-color: #60b044;
color: #fff;
border-radius: 2px;
}
}
}

//下面是倒计时窗口
#timeContent {
position: fixed;
Expand Down
19 changes: 19 additions & 0 deletions src/main/resources/skins/classic/chat-room.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,25 @@
</div>
<div id="iceMsgList"></div>
</div>
<div id="robotBtn" class="robot-btn" style=""><img src="https://file.fishpi.cn/2024/05/chatbot-7857bb0c.gif" class="ice-game-icon" style="border-radius: 50%;" alt=""></div>
<div id="robotBox" style="display: none;" class="">
<div class="robot-tool-bar">
<img src="https://www.iconninja.com/files/400/1008/1019/align-left-icon.png" class="robot-logo" alt="">
用户消息捕获
<div class="robot-toolbar-btn">
<svg id="robotClose" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<title>关闭</title>
<path d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z" fill="#ffffff"></path>' +
</svg>
</div>
</div>
<div class="robot-chat-box" style="position: relative; height: 30px">
<input id="catch-word" class="robot-catch-input" type="checkbox"> 捕获关键字
<div id="changeCatchUsers" class="robot-change-btn">修改捕获用户</div>
<div id="clearRobotMsg" class="robot-clear-btn">清屏</div>
</div>
<div id="robotMsgList"></div>
</div>
<#include "footer.ftl">
<script>
Label.uploadLabel = "${uploadLabel}";
Expand Down

0 comments on commit 550007c

Please sign in to comment.