🎨 更新机器人状态统计逻辑，调整前端显示信息，优化删除确认交互
All checks were successful
BuildImage / build-image (push) Successful in 1m52s
All checks were successful
BuildImage / build-image (push) Successful in 1m52s
This commit is contained in:
parent
0bd777d959
commit
e91c9ec94b
@ -25,9 +25,25 @@ func ListRobots(c *fiber.Ctx) error {
|
||||
return fiber.NewError(fiber.StatusInternalServerError, "获取机器人列表失败")
|
||||
}
|
||||
|
||||
total := len(robots)
|
||||
online := 0
|
||||
offline := 0
|
||||
for _, robot := range robots {
|
||||
if robot.Status == model.RobotStatusOnline {
|
||||
online++
|
||||
} else {
|
||||
offline++
|
||||
}
|
||||
}
|
||||
|
||||
return c.Render("robot/index", fiber.Map{
|
||||
"Title": "机器人列表",
|
||||
"Robots": robots,
|
||||
"Status": map[string]int{
|
||||
"Total": total,
|
||||
"Online": online,
|
||||
"Offline": offline,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -37,23 +37,23 @@
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="clean-card px-6 py-4 flex items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-emerald-50 border border-emerald-100 flex items-center justify-center text-emerald-500 mr-4">
|
||||
<i class="fas fa-check-circle text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">在线机器人</p>
|
||||
<p class="text-2xl font-semibold text-gray-800" id="online-count">{{.OnlineCount}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clean-card px-6 py-4 flex items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-blue-50 border border-blue-100 flex items-center justify-center text-blue-500 mr-4">
|
||||
<i class="fas fa-robot text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">总机器人</p>
|
||||
<p class="text-2xl font-semibold text-gray-800" id="filtered-count">{{len .Robots}}</p>
|
||||
<p class="text-2xl font-semibold text-gray-800" id="filtered-count">{{.Status.Total}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clean-card px-6 py-4 flex items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-emerald-50 border border-emerald-100 flex items-center justify-center text-emerald-500 mr-4">
|
||||
<i class="fas fa-check-circle text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">在线机器人</p>
|
||||
<p class="text-2xl font-semibold text-gray-800" id="online-count">{{.Status.Online}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">离线机器人</p>
|
||||
<p class="text-2xl font-semibold text-gray-800" id="offline-count">{{.OfflineCount}}</p>
|
||||
<p class="text-2xl font-semibold text-gray-800" id="offline-count">{{.Status.Offline}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -75,7 +75,7 @@
|
||||
<div class="robot-card bg-white rounded-lg shadow-sm overflow-hidden border border-gray-50 transition-all duration-300 hover:shadow-md">
|
||||
<!-- 状态指示条 -->
|
||||
<div class="h-1 {{if eq .Status "online"}}bg-green-500{{else}}bg-gray-300{{end}} w-full"></div>
|
||||
|
||||
|
||||
<!-- 卡片内容 -->
|
||||
<div class="p-6">
|
||||
<div class="flex items-center">
|
||||
@ -94,7 +94,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 机器人信息 -->
|
||||
<div class="mt-4 border-t border-gray-50 pt-4">
|
||||
<div class="flex justify-between items-center text-sm text-gray-500 mb-2">
|
||||
@ -107,7 +107,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 操作区域 -->
|
||||
<div class="bg-gray-50 px-6 py-3 flex justify-between items-center">
|
||||
<span class="text-xs text-gray-500">微信状态: {{if eq .Status "online"}}在线{{else}}离线{{end}}</span>
|
||||
@ -115,7 +115,7 @@
|
||||
<a href="/admin/robots/{{.ID}}" class="p-1.5 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900" title="查看详情">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
|
||||
|
||||
{{if eq .Status "offline"}}
|
||||
<a href="/admin/robots/{{.ID}}/login" class="p-1.5 rounded-md text-blue-600 hover:bg-blue-50 hover:text-blue-700" title="登录微信">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
@ -127,7 +127,7 @@
|
||||
</button>
|
||||
</form>
|
||||
{{end}}
|
||||
|
||||
|
||||
<a href="#" class="p-1.5 rounded-md text-red-600 hover:bg-red-50 hover:text-red-700 delete-robot" data-id="{{.ID}}" data-robot-name="{{.Nickname}}" title="删除">
|
||||
<i class="fas fa-trash"></i>
|
||||
</a>
|
||||
@ -150,55 +150,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 计算不同状态机器人数量
|
||||
let onlineCount = 0;
|
||||
let offlineCount = 0;
|
||||
let errorCount = 0;
|
||||
|
||||
document.querySelectorAll('.robot-card').forEach(card => {
|
||||
const status = card.dataset.status;
|
||||
if (status === 'online') {
|
||||
onlineCount++;
|
||||
} else if (status === 'error') {
|
||||
errorCount++;
|
||||
} else {
|
||||
offlineCount++;
|
||||
}
|
||||
});
|
||||
|
||||
// 更新统计数字
|
||||
document.getElementById('online-count').textContent = onlineCount;
|
||||
document.getElementById('offline-count').textContent = offlineCount;
|
||||
document.getElementById('error-count').textContent = errorCount;
|
||||
|
||||
// 删除机器人确认
|
||||
document.querySelectorAll('.delete-robot').forEach(btn => {
|
||||
btn.addEventListener('click', async function(e) {
|
||||
e.preventDefault();
|
||||
const robotId = this.dataset.id;
|
||||
const robotName = this.dataset.robotName || '此机器人';
|
||||
|
||||
if (window.confirm(`确定要删除 ${robotName} 吗？此操作不可恢复！`)) {
|
||||
// 使用fetch API发送DELETE请求
|
||||
fetch(`/admin/robots/${robotId}`, { method: 'DELETE' })
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
throw new Error('删除失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('删除失败: ' + error.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
@ -208,7 +159,7 @@
|
||||
e.preventDefault();
|
||||
const robotId = this.dataset.id;
|
||||
const robotName = this.dataset.robotName || '此机器人';
|
||||
|
||||
|
||||
// 使用美观的确认对话框代替原生的window.confirm
|
||||
if (typeof confirmDialog === 'function') {
|
||||
// 使用confirmDialog函数
|
||||
@ -216,21 +167,21 @@
|
||||
`确定要删除 ${robotName} 吗？此操作不可恢复！`,
|
||||
{ type: 'danger', title: '确认删除' }
|
||||
);
|
||||
|
||||
|
||||
if (confirmed) {
|
||||
// 显示加载状态
|
||||
this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
||||
this.disabled = true;
|
||||
|
||||
|
||||
try {
|
||||
// 使用fetch API发送DELETE请求
|
||||
const response = await fetch(`/admin/robots/${robotId}`, {
|
||||
const response = await fetch(`/admin/robots/${robotId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
if (response.ok) {
|
||||
// 删除成功，刷新页面
|
||||
window.location.reload();
|
||||
@ -242,7 +193,7 @@
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
alert('删除失败: ' + error.message);
|
||||
|
||||
|
||||
// 恢复按钮状态
|
||||
this.innerHTML = '<i class="fas fa-trash"></i>';
|
||||
this.disabled = false;
|
||||
@ -280,7 +231,7 @@
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
|
||||
.robot-card:hover {
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.12); /* 保留悬停时的阴影效果 */
|
||||
z-index: 10;
|
||||
@ -292,28 +243,28 @@
|
||||
.robot-card:before {
|
||||
display: none; /* 完全移除左侧的灰色条 */
|
||||
}
|
||||
|
||||
|
||||
/* 移除悬停时的左侧边框装饰线 */
|
||||
.robot-card:hover:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* 同样移除基于状态的左侧边框装饰线 */
|
||||
.robot-card:has(.bg-green-100):hover:before,
|
||||
.robot-card:has(.bg-gray-100):hover:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* 保留其他有用的样式 */
|
||||
.robot-card a, .robot-card button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.robot-card:hover a, .robot-card:hover button {
|
||||
transform: scale(1.15);
|
||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
|
||||
}
|
||||
|
||||
|
||||
/* 移除每个卡片的间隔装饰线 */
|
||||
.robot-card td:first-child:before {
|
||||
display: none;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user