557 lines
27 KiB
HTML
557 lines
27 KiB
HTML
<!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> |