lxh/go-wxhelper
4
4
Fork 5
Code Issues 3 Pull Requests Actions Packages Projects 2 Releases 114 Wiki Activity

🎨 优化群成员显示效果

Browse Source
This commit is contained in:
李寻欢 2024-07-11 15:46:49 +08:00
parent e1c2eb78aa
commit d802cbd6ca
4 changed files with 182 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/group.go
View File

@ -25,6 +25,19 @@ func GetGroupUsers(ctx *gin.Context) {
ctx.String(http.StatusInternalServerError, "查询失败: %s", err.Error()) ctx.String(http.StatusInternalServerError, "查询失败: %s", err.Error())
return return
} }
result := map[string]any{
"records": records,
}
// 循环数据，统计健在成员
var isOkCount int
for _, record := range records {
if record.IsMember {
isOkCount++
}
}
result["isOkCount"] = isOkCount
// 暂时先就这样写着，跑通了再改 // 暂时先就这样写着，跑通了再改
ctx.JSON(http.StatusOK, records) ctx.JSON(http.StatusOK, result)
} }

2
main.go
View File

@ -79,7 +79,7 @@ func main() {
}) })
// 初始化路由 // 初始化路由
router.Init(app) router.Init(app)
if err := app.Run(":8080"); err != nil { if err := app.Run(":18080"); err != nil {
log.Panicf("服务启动失败：%v", err) log.Panicf("服务启动失败：%v", err)
} }
} }

5
views/groupuser.html
View File

@ -1,6 +1,9 @@
<dialog id="groupUserModal" class="modal"> <dialog id="groupUserModal" class="modal">
<div class="modal-box w-11/12 max-w-7xl"> <div class="modal-box w-11/12 max-w-7xl">
<h3 class="font-bold text-lg" id="groupUserModalName">我是群名称</h3> <div class="flex">
<h3 class="font-bold text-lg" id="groupUserModalName">我是群名称</h3>
<h3 class="font-bold text-lg ml-5" id="groupUserCount">(健在成员100人)</h3>
</div>
<div class="divider divider-warning">成员列表</div> <div class="divider divider-warning">成员列表</div>
<table class="table table-zebra"> <table class="table table-zebra">
<thead> <thead>

320
views/static/js/index.js
View File

@ -2,82 +2,82 @@ console.log("打开首页")
// 改变AI开启状态 // 改变AI开启状态
function changeAiEnableStatus(wxId) { function changeAiEnableStatus(wxId) {
// console.log("修改AI开启状态: ", wxId) // console.log("修改AI开启状态: ", wxId)
axios({ axios({
method: 'put', method: 'put',
url: '/api/ai/status', url: '/api/ai/status',
data: { data: {
wxId: wxId wxId: wxId
} }
}).then(function (response) { }).then(function (response) {
console.log(`返回结果: ${JSON.stringify(response)}`); console.log(`返回结果: ${JSON.stringify(response)}`);
alert(`${response.data}`) alert(`${response.data}`)
}).catch(function (error) { }).catch(function (error) {
console.log(`错误信息: ${error}`); console.log(`错误信息: ${error}`);
alert("修改失败") alert("修改失败")
}).finally(function () { }).finally(function () {
window.location.reload(); window.location.reload();
}) })
} }
// 修改水群排行榜状态 // 修改水群排行榜状态
function changeGroupRankEnableStatus(wxId) { function changeGroupRankEnableStatus(wxId) {
// console.log("修改水群排行榜开启状态: ", wxId) // console.log("修改水群排行榜开启状态: ", wxId)
axios({ axios({
method: 'put', method: 'put',
url: '/api/grouprank/status', url: '/api/grouprank/status',
data: { data: {
wxId: wxId wxId: wxId
} }
}).then(function (response) { }).then(function (response) {
console.log(`返回结果: ${JSON.stringify(response)}`); console.log(`返回结果: ${JSON.stringify(response)}`);
alert(`${response.data}`) alert(`${response.data}`)
}).catch(function (error) { }).catch(function (error) {
console.log(`错误信息: ${error}`); console.log(`错误信息: ${error}`);
alert("修改失败") alert("修改失败")
}).finally(function () { }).finally(function () {
window.location.reload(); window.location.reload();
}) })
} }
// 修改水群排行榜状态 // 修改水群排行榜状态
function changeSummaryEnableStatus(wxId) { function changeSummaryEnableStatus(wxId) {
// console.log("修改聊天记录总结开启状态: ", wxId) // console.log("修改聊天记录总结开启状态: ", wxId)
axios({ axios({
method: 'put', method: 'put',
url: '/api/summary/status', url: '/api/summary/status',
data: { data: {
wxId: wxId wxId: wxId
} }
}).then(function (response) { }).then(function (response) {
console.log(`返回结果: ${JSON.stringify(response)}`); console.log(`返回结果: ${JSON.stringify(response)}`);
alert(`${response.data}`) alert(`${response.data}`)
}).catch(function (error) { }).catch(function (error) {
console.log(`错误信息: ${error}`); console.log(`错误信息: ${error}`);
alert("修改失败") alert("修改失败")
}).finally(function () { }).finally(function () {
window.location.reload(); window.location.reload();
}) })
} }
// 修改欢迎语开启状态 // 修改欢迎语开启状态
function changeWelcomeEnableStatus(wxId) { function changeWelcomeEnableStatus(wxId) {
axios({ axios({
method: 'put', method: 'put',
url: '/api/welcome/status', url: '/api/welcome/status',
data: { data: {
wxId: wxId wxId: wxId
} }
}).then(function (response) { }).then(function (response) {
console.log(`返回结果: ${JSON.stringify(response)}`); console.log(`返回结果: ${JSON.stringify(response)}`);
alert(`${response.data}`) alert(`${response.data}`)
}).catch(function (error) { }).catch(function (error) {
console.log(`错误信息: ${error}`); console.log(`错误信息: ${error}`);
alert("修改失败") alert("修改失败")
}).finally(function () { }).finally(function () {
window.location.reload(); window.location.reload();
}) })
} }
// 修改用户新闻开启状态 // 修改用户新闻开启状态
@ -101,117 +101,123 @@ function changeUserNewsStatus(wxId) {
// 修改指令权限启用状态 // 修改指令权限启用状态
function changeCommandEnableStatus(wxId) { function changeCommandEnableStatus(wxId) {
axios({ axios({
method: 'put', method: 'put',
url: '/api/command/status', url: '/api/command/status',
data: { data: {
wxId: wxId wxId: wxId
} }
}).then(function (response) { }).then(function (response) {
console.log(`返回结果: ${JSON.stringify(response)}`); console.log(`返回结果: ${JSON.stringify(response)}`);
alert(`${response.data}`) alert(`${response.data}`)
}).catch(function (error) { }).catch(function (error) {
console.log(`错误信息: ${error}`); console.log(`错误信息: ${error}`);
alert("修改失败") alert("修改失败")
}).finally(function () { }).finally(function () {
window.location.reload(); window.location.reload();
}) })
} }
// 修改群成员是否参与排行榜状态 // 修改群成员是否参与排行榜状态
function changeUserGroupRankSkipStatus(groupId, userId) { function changeUserGroupRankSkipStatus(groupId, userId) {
console.log("修改水群排行榜开启状态: ", groupId, userId) console.log("修改水群排行榜开启状态: ", groupId, userId)
axios({ axios({
method: 'put', method: 'put',
url: '/api/grouprank/skip', url: '/api/grouprank/skip',
data: { data: {
wxId: groupId, wxId: groupId,
userId: userId userId: userId
} }
}).then(function (response) { }).then(function (response) {
console.log(`返回结果: ${JSON.stringify(response)}`); console.log(`返回结果: ${JSON.stringify(response)}`);
alert(`${response.data}`) alert(`${response.data}`)
}).catch(function (error) { }).catch(function (error) {
console.log(`错误信息: ${error}`); console.log(`错误信息: ${error}`);
alert("修改失败") alert("修改失败")
}).finally(function () { }).finally(function () {
window.location.reload(); window.location.reload();
}) })
} }
// 获取群成员列表 // 获取群成员列表
function getGroupUsers(groupId, groupName) { function getGroupUsers(groupId, groupName) {
// 获取表格的tbody部分，以便稍后向其中添加行 // 获取表格的tbody部分，以便稍后向其中添加行
var tbody = document.getElementById("groupUsers"); var tbody = document.getElementById("groupUsers");
tbody.innerHTML = "" tbody.innerHTML = ""
// 打开模态框 // 打开模态框
const modal = document.getElementById("groupUserModal"); const modal = document.getElementById("groupUserModal");
modal.showModal() modal.showModal()
// 设置群名称 // 设置群名称
const groupNameTag = document.getElementById("groupUserModalName"); const groupNameTag = document.getElementById("groupUserModalName");
groupNameTag.innerHTML = '<span class="loading loading-dots loading-lg"></span>' groupNameTag.innerHTML = '<span class="loading loading-dots loading-lg"></span>'
// 显示加载框 // 显示加载框
// const loading = document.getElementById("groupUserDataLoading"); // const loading = document.getElementById("groupUserDataLoading");
// loading.style.display = "block" // loading.style.display = "block"
axios.get('/api/group/users', { axios.get('/api/group/users', {
params: { params: {
groupId: groupId groupId: groupId
} }
}).then(function (response) { }).then(function (response) {
// console.log(`返回结果: ${JSON.stringify(response)}`); // console.log(`返回结果: ${JSON.stringify(response.data)}`);
// 渲染群成员列表 // 渲染群成员列表
const groupUsers = response.data const groupUsers = response.data.records;
// 循环渲染数据 const groupUserCount = response.data.isOkCount;
groupUsers.forEach((groupUser, i) => {
console.log(groupUser)
const { wxid, nickname, isMember, isAdmin, joinTime, lastActive, leaveTime, skipChatRank } = groupUser;
let row = tbody.insertRow(i); // 设置成员总数
// Insert data into cells const groupUserCountTag = document.getElementById("groupUserCount");
row.insertCell(0).innerHTML = wxid; groupUserCountTag.innerHTML = `健在成员: ${groupUserCount}人`
row.insertCell(1).innerHTML = nickname;
row.insertCell(2).innerHTML = `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${isMember ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'}">${isMember ? '是' : '否'}</span>`; // 循环渲染数据
row.insertCell(3).innerHTML = `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${isAdmin ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'}">${isAdmin ? '是' : '否'}</span>`; groupUsers.forEach((groupUser, i) => {
row.insertCell(4).innerHTML = joinTime; // console.log(groupUser)
row.insertCell(5).innerHTML = lastActive; const {wxid, nickname, isMember, isAdmin, joinTime, lastActive, leaveTime, skipChatRank} = groupUser;
row.insertCell(6).innerHTML = leaveTime;
// row.insertCell(7).innerHTML = `<input type="checkbox" class="toggle toggle-error" ${skipChatRank ? 'checked' : ''} onclick="changeUserGroupRankSkipStatus('${groupId}', '${wxid}')" />`; let row = tbody.insertRow(i);
row.insertCell(7).innerHTML = `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${skipChatRank ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'}">${skipChatRank ? '是' : '否'}</span>`; // Insert data into cells
}); row.insertCell(0).innerHTML = wxid;
}).catch(function (error) { row.insertCell(1).innerHTML = nickname;
console.log(`错误信息: ${error}`); row.insertCell(2).innerHTML = `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${isMember ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'}">${isMember ? '是' : '否'}</span>`;
}).finally(function () { row.insertCell(3).innerHTML = `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${isAdmin ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'}">${isAdmin ? '是' : '否'}</span>`;
// 隐藏加载框 row.insertCell(4).innerHTML = joinTime;
// loading.style.display = "none" row.insertCell(5).innerHTML = lastActive;
groupNameTag.innerHTML = groupName row.insertCell(6).innerHTML = leaveTime;
}) // row.insertCell(7).innerHTML = `<input type="checkbox" class="toggle toggle-error" ${skipChatRank ? 'checked' : ''} onclick="changeUserGroupRankSkipStatus('${groupId}', '${wxid}')" />`;
row.insertCell(7).innerHTML = `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${skipChatRank ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'}">${skipChatRank ? '是' : '否'}</span>`;
});
}).catch(function (error) {
console.log(`错误信息: ${error}`);
}).finally(function () {
// 隐藏加载框
// loading.style.display = "none"
groupNameTag.innerHTML = groupName
})
} }
// AI模型变动 // AI模型变动
function aiModelChange(event, wxid) { function aiModelChange(event, wxid) {
// 取出变动后的值 // 取出变动后的值
const modelStr = event.target.value; const modelStr = event.target.value;
console.log("AI模型变动: ", wxid, modelStr) console.log("AI模型变动: ", wxid, modelStr)
axios({ axios({
method: 'post', method: 'post',
url: '/api/ai/model', url: '/api/ai/model',
data: { data: {
wxid: wxid, wxid: wxid,
model: modelStr model: modelStr
} }
}).then(function (response) { }).then(function (response) {
console.log(`返回结果: ${JSON.stringify(response)}`); console.log(`返回结果: ${JSON.stringify(response)}`);
alert(`${response.data}`) alert(`${response.data}`)
}).catch(function (error) { }).catch(function (error) {
console.log(`错误信息: ${error}`); console.log(`错误信息: ${error}`);
alert("修改失败") alert("修改失败")
}).finally(function () { }).finally(function () {
window.location.reload(); window.location.reload();
}) })
} }
// AI角色变动 // AI角色变动