jun
/
video_blacklist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
video_blacklist/index/Logging.html

557 lines
27 KiB
HTML
Raw Normal View History

111
2025-06-03 18:23:22 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运行日志 | 直播间管理工具</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36CFC9',
neutral: '#F5F7FA',
'neutral-dark': '#4E5969',
success: '#00B42A',
warning: '#FF7D00',
danger: '#F53F3F',
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
spacing: {
'4': '1rem',
'3': '0.75rem',
'8': '2rem',
'10': '2.5rem',
},
fontSize: {
'xxs': '0.6rem',
'xs': '.75rem',
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.sidebar-item {
@apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 hover:bg-primary/10 hover:text-primary;
}
.sidebar-item.active {
@apply bg-primary/10 text-primary font-medium;
}
.rule-card {
@apply bg-white rounded-xl shadow-sm border border-gray-100 transition-all duration-300 hover:shadow-md;
}
.btn-primary {
@apply bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all duration-200 shadow-sm hover:shadow flex items-center justify-center gap-2;
}
.btn-outline {
@apply border border-gray-200 hover:border-primary/50 text-neutral-dark hover:text-primary px-4 py-2 rounded-lg transition-all duration-200 flex items-center justify-center gap-2;
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.scrollbar-thin {
scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar {
width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 4px;
}
.sticky-top {
position: sticky;
top: 20px;
z-index: 10;
}
.log-item {
@apply border-b border-gray-100 py-3 px-4 flex items-start gap-3 hover:bg-gray-50 transition-colors;
}
.log-avatar {
@apply w-8 h-8 rounded-full bg-gray-200 flex-shrink-0 overflow-hidden;
}
.log-username {
@apply text-gray-800 font-medium;
}
.log-content {
@apply text-gray-600;
}
.log-timestamp {
@apply text-gray-500 text-xs ml-auto mt-0.5;
}
.log-type {
@apply px-2 py-0.5 rounded-full text-xs font-medium;
}
.log-type-enter {
@apply bg-blue-50 text-blue-600;
}
.log-type-interact {
@apply bg-green-50 text-green-600;
}
.log-type-system {
@apply bg-gray-50 text-gray-600;
}
.tab-item {
@apply px-4 py-2 text-gray-600 hover:text-primary cursor-pointer transition-colors border-b-2 border-transparent;
}
.tab-item.active {
@apply text-primary border-primary font-medium;
}
.tab-content {
@apply hidden;
}
.tab-content.active {
@apply block fade-in;
}
}
</style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col">
<!-- 顶部导航栏 (移动设备) -->
<header class="lg:hidden bg-white shadow-sm px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<i class="fa-solid fa-shield text-primary text-xl"></i>
<h1 class="text-lg font-bold text-primary">智能保镖</h1>
</div>
<button id="mobile-menu-btn" class="p-2 rounded-lg hover:bg-gray-100">
<i class="fa-solid fa-bars text-neutral-dark"></i>
</button>
</header>
<div class="flex flex-1 overflow-hidden">
<!-- 侧边栏导航 -->
<aside id="sidebar"
class="lg:w-64 bg-white shadow-sm flex-shrink-0 hidden lg:block transition-all duration-300 z-20">
<div class="p-4 border-b border-gray-100">
<div class="flex items-center gap-2">
<i class="fa-solid fa-shield text-primary text-xl"></i>
<h1 class="text-lg font-bold text-primary">智能保镖</h1>
</div>
<p class="text-xs text-gray-400 mt-1">直播间智能管理助手</p>
</div>
<nav class="p-4">
<ul class="space-y-1">
<li><a href="live-management.html" class="sidebar-item"><i class="fa-solid fa-video"></i> 直播管理</a></li>
<li><a href="smart-bodyguard.html" class="sidebar-item"><i class="fa-solid fa-cogs"></i> 保镖设置</a></li>
<li><a href="id-whitelist-blacklist.html" class="sidebar-item"><i class="fa-solid fa-user-check"></i> ID 黑白名单</a></li>
<li><a href="id-blacklist.html" class="sidebar-item"><i class="fas fa-ban"></i> 拉黑记录</a></li>
<li><a href="Logging.html" class="sidebar-item active"><i class="fa-solid fa-file-lines"></i> 运行日志</a></li>
<li><a href="#" class="sidebar-item"><i class="fa-solid fa-book"></i> 使用教程</a></li>
<li><a href="#" class="sidebar-item"><i class="fa-solid fa-comment-dots"></i> 意见反馈</a></li>
</ul>
</nav>
</aside>
<!-- 主内容区 (运行日志) -->
<main class="flex-1 overflow-y-auto bg-neutral p-4 lg:p-6">
<!-- 日志列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="border-b p-4 flex justify-between items-center">
<div class="flex space-x-1">
<div class="tab-item active" data-tab="all">全部日志</div>
<div class="tab-item" data-tab="enter">进入日志</div>
<div class="tab-item" data-tab="interact">互动日志</div>
</div>
<button class="btn-outline flex items-center gap-2" onclick="refreshLogs()">
<i class="fa-solid fa-sync"></i>
<span>刷新</span>
</button>
</div>
<!-- 全部日志 -->
<div class="tab-content active" id="tab-all">
<div class="overflow-y-auto max-h-[calc(100vh-280px)] scrollbar-thin">
<div id="log-list-all">
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">蛋仔拉满</span>
<span class="log-type log-type-enter">进入直播间</span>
<span class="log-timestamp">17日 11:23:00</span>
</div>
<p class="log-content mt-1">（第1次出入）</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">蛋仔拉满</span>
<span class="log-type log-type-interact">发送弹幕</span>
<span class="log-timestamp">17日 11:22:37</span>
</div>
<p class="log-content mt-1">来了</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">游戏玩家666</span>
<span class="log-type log-type-enter">进入直播间</span>
<span class="log-timestamp">17日 11:20:15</span>
</div>
<p class="log-content mt-1">（第5次出入）</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">科技爱好者</span>
<span class="log-type log-type-interact">点赞</span>
<span class="log-timestamp">17日 11:18:42</span>
</div>
<p class="log-content mt-1">点赞了直播间</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">音乐达人</span>
<span class="log-type log-type-interact">赠送礼物</span>
<span class="log-timestamp">17日 11:15:30</span>
</div>
<p class="log-content mt-1">赠送了 1 个"超级火箭"</p>
</div>
</div>
</div>
</div>
</div>
<!-- 进入日志 -->
<div class="tab-content" id="tab-enter">
<div class="overflow-y-auto max-h-[calc(100vh-280px)] scrollbar-thin">
<div id="log-list-enter">
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">蛋仔拉满</span>
<span class="log-type log-type-enter">进入直播间</span>
<span class="log-timestamp">17日 11:23:00</span>
</div>
<p class="log-content mt-1">（第1次出入）</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">游戏玩家666</span>
<span class="log-type log-type-enter">进入直播间</span>
<span class="log-timestamp">17日 11:20:15</span>
</div>
<p class="log-content mt-1">（第5次出入）</p>
</div>
</div>
</div>
</div>
</div>
<!-- 互动日志 -->
<div class="tab-content" id="tab-interact">
<div class="overflow-y-auto max-h-[calc(100vh-280px)] scrollbar-thin">
<div id="log-list-interact">
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">蛋仔拉满</span>
<span class="log-type log-type-interact">发送弹幕</span>
<span class="log-timestamp">17日 11:22:37</span>
</div>
<p class="log-content mt-1">来了</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">科技爱好者</span>
<span class="log-type log-type-interact">点赞</span>
<span class="log-timestamp">17日 11:18:42</span>
</div>
<p class="log-content mt-1">点赞了直播间</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">音乐达人</span>
<span class="log-type log-type-interact">赠送礼物</span>
<span class="log-timestamp">17日 11:15:30</span>
</div>
<p class="log-content mt-1">赠送了 1 个"超级火箭"</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script>
// 移动端菜单切换
document.getElementById('mobile-menu-btn').addEventListener('click', function () {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('hidden');
if (!sidebar.classList.contains('hidden')) {
sidebar.classList.add('fixed', 'inset-0');
sidebar.classList.remove('lg:block', 'lg:w-64');
} else {
sidebar.classList.remove('fixed', 'inset-0');
sidebar.classList.add('lg:block', 'lg:w-64');
}
});
// 标签页切换
document.querySelectorAll('.tab-item').forEach(tab => {
tab.addEventListener('click', () => {
// 移除所有标签页的活跃状态
document.querySelectorAll('.tab-item').forEach(t => {
t.classList.remove('active');
});
// 添加当前标签页的活跃状态
tab.classList.add('active');
// 隐藏所有内容
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// 显示当前标签页的内容
const tabId = tab.getAttribute('data-tab');
document.getElementById(`tab-${tabId}`).classList.add('active');
});
});
// 刷新日志函数
function refreshLogs() {
console.log('刷新日志...');
// 显示加载动画
const logLists = document.querySelectorAll('#log-list-all, #log-list-enter, #log-list-interact');
logLists.forEach(list => {
list.innerHTML = '<div class="py-10 text-center text-gray-500"><i class="fa-solid fa-spinner fa-spin mr-2"></i> 加载中...</div>';
});
// 模拟加载延迟
setTimeout(() => {
// 这里应该从后端获取最新日志数据
// 目前只是重新显示原有的日志
loadLogs();
}, 1000);
}
// 加载日志函数
function loadLogs() {
// 实际应用中，这里应该从后端获取数据
// 这里仅为示例，使用静态数据
// 全部日志
document.getElementById('log-list-all').innerHTML = `
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">蛋仔拉满</span>
<span class="log-type log-type-enter">进入直播间</span>
<span class="log-timestamp">17日 11:23:00</span>
</div>
<p class="log-content mt-1">（第1次出入）</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">蛋仔拉满</span>
<span class="log-type log-type-interact">发送弹幕</span>
<span class="log-timestamp">17日 11:22:37</span>
</div>
<p class="log-content mt-1">来了</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">游戏玩家666</span>
<span class="log-type log-type-enter">进入直播间</span>
<span class="log-timestamp">17日 11:20:15</span>
</div>
<p class="log-content mt-1">（第5次出入）</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">科技爱好者</span>
<span class="log-type log-type-interact">点赞</span>
<span class="log-timestamp">17日 11:18:42</span>
</div>
<p class="log-content mt-1">点赞了直播间</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">音乐达人</span>
<span class="log-type log-type-interact">赠送礼物</span>
<span class="log-timestamp">17日 11:15:30</span>
</div>
<p class="log-content mt-1">赠送了 1 个"超级火箭"</p>
</div>
</div>
`;
// 进入日志
document.getElementById('log-list-enter').innerHTML = `
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">蛋仔拉满</span>
<span class="log-type log-type-enter">进入直播间</span>
<span class="log-timestamp">17日 11:23:00</span>
</div>
<p class="log-content mt-1">（第1次出入）</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">游戏玩家666</span>
<span class="log-type log-type-enter">进入直播间</span>
<span class="log-timestamp">17日 11:20:15</span>
</div>
<p class="log-content mt-1">（第5次出入）</p>
</div>
</div>
`;
// 互动日志
document.getElementById('log-list-interact').innerHTML = `
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">蛋仔拉满</span>
<span class="log-type log-type-interact">发送弹幕</span>
<span class="log-timestamp">17日 11:22:37</span>
</div>
<p class="log-content mt-1">来了</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">科技爱好者</span>
<span class="log-type log-type-interact">点赞</span>
<span class="log-timestamp">17日 11:18:42</span>
</div>
<p class="log-content mt-1">点赞了直播间</p>
</div>
</div>
<div class="log-item">
<div class="log-avatar"><img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="w-full h-full object-cover"></div>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="log-username">音乐达人</span>
<span class="log-type log-type-interact">赠送礼物</span>
<span class="log-timestamp">17日 11:15:30</span>
</div>
<p class="log-content mt-1">赠送了 1 个"超级火箭"</p>
</div>
</div>
`;
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
// 加载日志
loadLogs();
});
</script>
</body>
</html>