733 lines
33 KiB
HTML
733 lines
33 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="./js/tailwindcss.js"></script>
|
||
|
|
<link href="./fontawesome-free-6.4.0-web/css/all.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: { // 添加或修改 gap 的定义，确保 gap-4 存在
|
||
|
|
'4': '1rem', // 16px - 列表项和表头的主要列间距
|
||
|
|
'3': '1rem', // 12px - 保留原有的gap-3 (侧边栏等使用)
|
||
|
|
'8': '3rem', // 32px - 预留给按钮占位 (操作按钮区域宽度)
|
||
|
|
'10': '3rem', // 40px - 预留给头像占位 (头像宽度)
|
||
|
|
// 根据需要添加更多间距值
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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 active"><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"><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 custom-main-width">
|
||
|
|
<!-- 主播信息 -->
|
||
|
|
<div class="bg-primary rounded-lg p-4 text-white mb-6 fade-in flex items-center">
|
||
|
|
<div class="flex items-center gap-3 flex-1">
|
||
|
|
<img src="https://picsum.photos/id/64/40/40" alt="用户头像"
|
||
|
|
class="w-10 h-10 rounded-full object-cover border-2 border-white">
|
||
|
|
<div>
|
||
|
|
<p id="anchor-name" class="text-base font-medium">主播名称</p>
|
||
|
|
<button id="change-account"
|
||
|
|
class="text-xs bg-white/20 hover:bg-white/30 px-2 py-1 rounded transition-all mt-1">
|
||
|
|
点击切换账号
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 新增清除缓存按钮（移至最右边） -->
|
||
|
|
<button id="clear-cache-btn"
|
||
|
|
class="flex items-center justify-center w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 transition-all text-white ml-2">
|
||
|
|
|
||
|
|
<i class="fa-solid fa-trash"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 欢迎信息 -->
|
||
|
|
<div class="mb-6 fade-in">
|
||
|
|
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">欢迎使用智能保镖</h2>
|
||
|
|
<p class="text-gray-500 mt-1">为您的直播间提供全方位保护，有效过滤不良用户</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 拉黑规则区域 -->
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
|
||
|
|
<!-- id白名单 -->
|
||
|
|
<div class="rule-card p-5 w-full lg:col-span-2" data-rule-id="id-whitelist">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-secondary/10 flex items-center justify-center">
|
||
|
|
<i class="fa-solid fa-user-check text-secondary"></i>
|
||
|
|
</div>
|
||
|
|
<h3 class="rule-title font-medium">id白名单</h3>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
||
|
|
<input type="checkbox" value="" class="sr-only peer rule-toggle"
|
||
|
|
data-rule-id="id-whitelist">
|
||
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
||
|
|
</label>
|
||
|
|
<button class="text-gray-500 hover:text-primary edit-rule-btn" data-rule-id="id-whitelist">
|
||
|
|
<i class="fa-solid fa-pencil"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3 rule-content">
|
||
|
|
<textarea
|
||
|
|
class="w-full lg:w-[100%] px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all rule-input"
|
||
|
|
data-rule-id="id-whitelist"
|
||
|
|
placeholder="一行一个关键词"
|
||
|
|
rows="20"
|
||
|
|
style="min-height: 150px; resize: none;"
|
||
|
|
></textarea>
|
||
|
|
<div class="text-xs text-gray-400 mt-2">
|
||
|
|
<i class="fa-solid fa-info-circle"></i> 设置的id将不会被拉黑
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- id黑名单 -->
|
||
|
|
<div class="rule-card p-5 w-full lg:col-span-2" data-rule-id="id-blacklist-rule">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-danger/10 flex items-center justify-center">
|
||
|
|
<i class="fas fa-ban text-danger"></i>
|
||
|
|
</div>
|
||
|
|
<h3 class="rule-title font-medium">id黑名单</h3>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
||
|
|
<input type="checkbox" value="" class="sr-only peer rule-toggle"
|
||
|
|
data-rule-id="id-blacklist-rule">
|
||
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
|
||
|
|
</label>
|
||
|
|
<button class="text-gray-500 hover:text-primary edit-rule-btn" data-rule-id="id-blacklist-rule">
|
||
|
|
<i class="fa-solid fa-pencil"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="space-y-3 rule-content">
|
||
|
|
<textarea
|
||
|
|
class="w-full lg:w-[100%] px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all rule-input"
|
||
|
|
data-rule-id="id-blacklist-rule"
|
||
|
|
placeholder="一行一个关键词"
|
||
|
|
rows="20"
|
||
|
|
style="min-height: 150px; resize: none;"
|
||
|
|
></textarea>
|
||
|
|
<div class="text-xs text-gray-400 mt-2">
|
||
|
|
<i class="fa-solid fa-info-circle"></i> 设置的id将被拉黑
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 操作按钮 -->
|
||
|
|
<div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
|
||
|
|
<button id="save-settings" class="btn-primary min-w-[120px]">
|
||
|
|
<i class="fa-solid fa-save"></i> 保存设置
|
||
|
|
</button>
|
||
|
|
<button id="reset-settings" class="btn-outline min-w-[120px]">
|
||
|
|
<i class="fa-solid fa-refresh"></i> 重置设置
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 规则名称编辑弹窗 -->
|
||
|
|
<div id="edit-modal"
|
||
|
|
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
|
||
|
|
<div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-md transform scale-95 transition-transform duration-300">
|
||
|
|
<div class="flex justify-between items-center mb-4">
|
||
|
|
<h3 class="font-medium text-lg">编辑规则名称</h3>
|
||
|
|
<button id="close-edit-modal" class="text-gray-400 hover:text-gray-600">
|
||
|
|
<i class="fa-solid fa-times"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="mb-4">
|
||
|
|
<input type="text" id="rule-name-input"
|
||
|
|
class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none">
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-end gap-3">
|
||
|
|
<button id="cancel-edit" class="btn-outline">取消</button>
|
||
|
|
<button id="save-edit" class="btn-primary">保存</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 操作成功弹窗 -->
|
||
|
|
<div id="success-modal"
|
||
|
|
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
|
||
|
|
<div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-sm transform scale-95 transition-transform duration-300 text-center">
|
||
|
|
<div class="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
|
|
<i class="fa-solid fa-check text-success text-xl"></i>
|
||
|
|
</div>
|
||
|
|
<h3 class="font-medium text-lg mb-2" id="success-message">操作成功</h3>
|
||
|
|
<p class="text-gray-500 text-sm mb-4">该弹窗将在5秒后自动关闭</p>
|
||
|
|
<button id="close-success-modal" class="btn-primary w-full">
|
||
|
|
关闭
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 切换账号弹窗 -->
|
||
|
|
<div id="change-account-modal"
|
||
|
|
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
|
||
|
|
<div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-md transform scale-95 transition-transform duration-300">
|
||
|
|
<div class="flex justify-between items-center mb-4">
|
||
|
|
<h3 class="font-medium text-lg">切换账号</h3>
|
||
|
|
<button id="close-change-account-modal" class="text-gray-400 hover:text-gray-600">
|
||
|
|
<i class="fa-solid fa-times"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="mb-4">
|
||
|
|
<select id="account-select"
|
||
|
|
class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none">
|
||
|
|
<option value="anchor1">主播名称1</option>
|
||
|
|
<option value="anchor2">主播名称2</option>
|
||
|
|
<option value="anchor3">主播名称3</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-end gap-3">
|
||
|
|
<button id="cancel-change-account" class="btn-outline">取消</button>
|
||
|
|
<button id="confirm-change-account" class="btn-primary">确认切换</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
// 页面加载完成后执行
|
||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
|
||
|
|
// 创建同步的 XMLHttpRequest
|
||
|
|
const xhr = new XMLHttpRequest();
|
||
|
|
xhr.open('GET', 'user_Settings_Options.json', false); // 第三个参数设为 false 表示同步请求
|
||
|
|
xhr.send();
|
||
|
|
|
||
|
|
if (xhr.status === 200) {
|
||
|
|
// 解析 JSON 并写入 localStorage
|
||
|
|
const data = JSON.parse(xhr.responseText);
|
||
|
|
localStorage.setItem('smartBodyguardSettings', JSON.stringify(data));
|
||
|
|
console.log('配置已同步保存到 localStorage');
|
||
|
|
// showSuccessModal('配置已同步');
|
||
|
|
} else {
|
||
|
|
throw new Error(`请求失败，状态码: ${xhr.status}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化提示框关闭功能
|
||
|
|
// document.getElementById('close-tip').addEventListener('click', function () {
|
||
|
|
// hideInitTip();
|
||
|
|
// });
|
||
|
|
|
||
|
|
// 移动端菜单切换
|
||
|
|
// document.getElementById('mobile-menu-btn').addEventListener('click', function () {
|
||
|
|
// const sidebar = document.getElementById('sidebar');
|
||
|
|
// sidebar.classList.toggle('hidden');
|
||
|
|
// sidebar.classList.toggle('fixed');
|
||
|
|
// sidebar.classList.toggle('inset-0');
|
||
|
|
// sidebar.classList.toggle('lg:w-64');
|
||
|
|
// sidebar.classList.toggle('lg:static');
|
||
|
|
// });
|
||
|
|
|
||
|
|
// 功能开关切换效果
|
||
|
|
document.querySelectorAll('.rule-toggle').forEach(toggle => {
|
||
|
|
toggle.addEventListener('change', function () {
|
||
|
|
const ruleCard = this.closest('.rule-card');
|
||
|
|
const ruleContent = ruleCard.querySelector('.rule-content');
|
||
|
|
|
||
|
|
// if (this.checked) {
|
||
|
|
// ruleContent.classList.remove('opacity-50', 'pointer-events-none');
|
||
|
|
// } else {
|
||
|
|
// ruleContent.classList.add('opacity-50', 'pointer-events-none');
|
||
|
|
// }
|
||
|
|
|
||
|
|
// 立即保存设置状态
|
||
|
|
saveAllSettings();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 编辑规则名称功能
|
||
|
|
const editModal = document.getElementById('edit-modal');
|
||
|
|
const ruleNameInput = document.getElementById('rule-name-input');
|
||
|
|
let currentRuleId = null;
|
||
|
|
|
||
|
|
document.querySelectorAll('.edit-rule-btn').forEach(btn => {
|
||
|
|
btn.addEventListener('click', function (e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
currentRuleId = this.dataset.ruleId;
|
||
|
|
const ruleCard = this.closest('.rule-card');
|
||
|
|
const ruleTitle = ruleCard.querySelector('.rule-title');
|
||
|
|
ruleNameInput.value = ruleTitle.textContent;
|
||
|
|
showEditModal();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('save-edit').addEventListener('click', function () {
|
||
|
|
if (currentRuleId && ruleNameInput.value.trim() !== '') {
|
||
|
|
const newName = ruleNameInput.value.trim();
|
||
|
|
const ruleCard = document.querySelector(`.rule-card[data-rule-id="${currentRuleId}"]`);
|
||
|
|
const ruleTitle = ruleCard.querySelector('.rule-title');
|
||
|
|
|
||
|
|
// 更新规则名称
|
||
|
|
ruleTitle.textContent = newName;
|
||
|
|
|
||
|
|
// 保存修改后的规则名称
|
||
|
|
saveAllSettings();
|
||
|
|
|
||
|
|
hideEditModal();
|
||
|
|
showSuccessModal('规则名称已更新');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('cancel-edit').addEventListener('click', hideEditModal);
|
||
|
|
document.getElementById('close-edit-modal').addEventListener('click', hideEditModal);
|
||
|
|
|
||
|
|
// 保存设置功能
|
||
|
|
document.getElementById('save-settings').addEventListener('click', function () {
|
||
|
|
// 保存所有设置
|
||
|
|
saveAllSettings();
|
||
|
|
showSuccessModal('设置保存成功');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 重置设置功能
|
||
|
|
document.getElementById('reset-settings').addEventListener('click', function () {
|
||
|
|
// 重置所有开关
|
||
|
|
document.querySelectorAll('.rule-toggle').forEach(toggle => {
|
||
|
|
toggle.checked = false;
|
||
|
|
toggle.dispatchEvent(new Event('change'));
|
||
|
|
});
|
||
|
|
|
||
|
|
// 重置所有规则名称
|
||
|
|
document.querySelectorAll('.rule-card').forEach(card => {
|
||
|
|
const ruleId = card.dataset.ruleId;
|
||
|
|
const ruleTitle = card.querySelector('.rule-title');
|
||
|
|
|
||
|
|
// 根据ruleId设置默认名称
|
||
|
|
switch (ruleId) {
|
||
|
|
case 'id-whitelist':
|
||
|
|
ruleTitle.textContent = 'id白名单';
|
||
|
|
break;
|
||
|
|
case 'id-blacklist':
|
||
|
|
ruleTitle.textContent = 'id黑名单';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
// 重置.rule-input文本框内容
|
||
|
|
const ruleInput = card.querySelector('.rule-input');
|
||
|
|
if (ruleInput) {
|
||
|
|
ruleInput.value = '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 初始化
|
||
|
|
data = {
|
||
|
|
"id-whitelist": {"name": "id白名单", "enabled": false, "option": "", "inputValue": ""},
|
||
|
|
"id-blacklist-rule": {"name": "id黑名单", "enabled": false, "inputValue": ""},
|
||
|
|
"danmaku": {"name": "弹幕关键词拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"local-data": {"name": "数据互通", "enabled": false},
|
||
|
|
"suspected-account": {"name": "疑似账号", "enabled": false},
|
||
|
|
"follow": {"name": "关注拉黑", "enabled": false},
|
||
|
|
"share-entry": {"name": "通过分享进入直播间", "enabled": false},
|
||
|
|
"follow-entry": {"name": "通过关注进入直播间", "enabled": false},
|
||
|
|
"private-account": {"name": "私密账号", "enabled": false},
|
||
|
|
"blue-v": {"name": "开通蓝v", "enabled": false},
|
||
|
|
"share": {"name": "分享拉黑", "enabled": false, "options": []},
|
||
|
|
"gender": {"name": "性别拉黑", "enabled": false, "options": []},
|
||
|
|
"age-range": {"name": "年龄区间拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"follower-count": {"name": "粉丝数量大于拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"following-count": {"name": "关注数量大于拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"work-count": {"name": "作品数量大于拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"entry-count": {"name": "用户进入次数拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"nickname": {"name": "昵称关键词", "enabled": false, "inputValue": ""},
|
||
|
|
"signature": {"name": "个性签名关键词拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"region": {"name": "地区拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"ip": {"name": "IP拉黑", "enabled": false, "inputValue": ""}
|
||
|
|
}
|
||
|
|
pywebview.api.get_localStorage(JSON.stringify(data))
|
||
|
|
|
||
|
|
// 清除本地存储
|
||
|
|
localStorage.removeItem('smartBodyguardSettings');
|
||
|
|
|
||
|
|
showSuccessModal('设置已重置');
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// 监听规则下拉框变化并保存
|
||
|
|
document.querySelectorAll('.rule-select').forEach(select => {
|
||
|
|
select.addEventListener('change', function () {
|
||
|
|
// 立即保存设置
|
||
|
|
saveAllSettings();
|
||
|
|
console.log('select change');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll('.rule-input').forEach(input => {
|
||
|
|
input.addEventListener('input', function () {
|
||
|
|
saveAllSettings();
|
||
|
|
console.log('whitelist change');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// 切换账号功能
|
||
|
|
const changeAccountModal = document.getElementById('change-account-modal');
|
||
|
|
document.getElementById('change-account').addEventListener('click', function () {
|
||
|
|
showChangeAccountModal();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('close-change-account-modal').addEventListener('click', hideChangeAccountModal);
|
||
|
|
document.getElementById('cancel-change-account').addEventListener('click', hideChangeAccountModal);
|
||
|
|
|
||
|
|
document.getElementById('confirm-change-account').addEventListener('click', function () {
|
||
|
|
const selectedAccount = document.getElementById('account-select').value;
|
||
|
|
const accountName = document.getElementById('account-select').options[document.getElementById('account-select').selectedIndex].text;
|
||
|
|
|
||
|
|
// 更新显示的主播名称
|
||
|
|
document.getElementById('anchor-name').textContent = accountName;
|
||
|
|
|
||
|
|
// 保存当前选择的账号
|
||
|
|
localStorage.setItem('currentAnchor', selectedAccount);
|
||
|
|
|
||
|
|
hideChangeAccountModal();
|
||
|
|
showSuccessModal('账号已切换为 ' + accountName);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 成功提示框自动关闭
|
||
|
|
document.getElementById('close-success-modal').addEventListener('click', function () {
|
||
|
|
hideSuccessModal();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 清除缓存
|
||
|
|
document.getElementById('clear-cache-btn').addEventListener('click', function () {
|
||
|
|
// 清除本地存储
|
||
|
|
localStorage.removeItem('smartBodyguardSettings');
|
||
|
|
|
||
|
|
// 刷新页面或重置UI状态
|
||
|
|
location.reload();
|
||
|
|
|
||
|
|
data = {
|
||
|
|
"id-whitelist": {"name": "id白名单", "enabled": false, "option": "", "inputValue": ""},
|
||
|
|
"id-blacklist-rule": {"name": "id黑名单", "enabled": false, "inputValue": ""},
|
||
|
|
"danmaku": {"name": "弹幕关键词拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"local-data": {"name": "数据互通", "enabled": false},
|
||
|
|
"suspected-account": {"name": "疑似账号", "enabled": false},
|
||
|
|
"follow": {"name": "关注拉黑", "enabled": false},
|
||
|
|
"share-entry": {"name": "通过分享进入直播间", "enabled": false},
|
||
|
|
"follow-entry": {"name": "通过关注进入直播间", "enabled": false},
|
||
|
|
"private-account": {"name": "私密账号", "enabled": false},
|
||
|
|
"blue-v": {"name": "开通蓝v", "enabled": false},
|
||
|
|
"share": {"name": "分享拉黑", "enabled": false, "options": []},
|
||
|
|
"gender": {"name": "性别拉黑", "enabled": false, "options": []},
|
||
|
|
"age-range": {"name": "年龄区间拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"follower-count": {"name": "粉丝数量大于拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"following-count": {"name": "关注数量大于拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"work-count": {"name": "作品数量大于拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"entry-count": {"name": "用户进入次数拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"nickname": {"name": "昵称关键词", "enabled": false, "inputValue": ""},
|
||
|
|
"signature": {"name": "个性签名关键词拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"region": {"name": "地区拉黑", "enabled": false, "inputValue": ""},
|
||
|
|
"ip": {"name": "IP拉黑", "enabled": false, "inputValue": ""}
|
||
|
|
}
|
||
|
|
|
||
|
|
pywebview.api.get_localStorage(JSON.stringify(data))
|
||
|
|
|
||
|
|
|
||
|
|
// 显示成功提示
|
||
|
|
showSuccessModal('缓存已清除');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 工具函数 - 显示/隐藏模态框
|
||
|
|
function showEditModal() {
|
||
|
|
editModal.classList.remove('opacity-0', 'pointer-events-none');
|
||
|
|
editModal.querySelector('div').classList.remove('scale-95');
|
||
|
|
editModal.querySelector('div').classList.add('scale-100');
|
||
|
|
ruleNameInput.focus();
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideEditModal() {
|
||
|
|
editModal.classList.add('opacity-0', 'pointer-events-none');
|
||
|
|
editModal.querySelector('div').classList.remove('scale-100');
|
||
|
|
editModal.querySelector('div').classList.add('scale-95');
|
||
|
|
}
|
||
|
|
|
||
|
|
function showSuccessModal(message) {
|
||
|
|
const successMessage = document.getElementById('success-message');
|
||
|
|
successMessage.textContent = message || '操作成功';
|
||
|
|
|
||
|
|
const successModal = document.getElementById('success-modal');
|
||
|
|
successModal.classList.remove('opacity-0', 'pointer-events-none');
|
||
|
|
successModal.querySelector('div').classList.remove('scale-95');
|
||
|
|
successModal.querySelector('div').classList.add('scale-100');
|
||
|
|
|
||
|
|
// 5秒后自动关闭
|
||
|
|
setTimeout(hideSuccessModal, 5000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideSuccessModal() {
|
||
|
|
const successModal = document.getElementById('success-modal');
|
||
|
|
successModal.classList.add('opacity-0', 'pointer-events-none');
|
||
|
|
successModal.querySelector('div').classList.remove('scale-100');
|
||
|
|
successModal.querySelector('div').classList.add('scale-95');
|
||
|
|
}
|
||
|
|
|
||
|
|
function showChangeAccountModal() {
|
||
|
|
changeAccountModal.classList.remove('opacity-0', 'pointer-events-none');
|
||
|
|
changeAccountModal.querySelector('div').classList.remove('scale-95');
|
||
|
|
changeAccountModal.querySelector('div').classList.add('scale-100');
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideChangeAccountModal() {
|
||
|
|
changeAccountModal.classList.add('opacity-0', 'pointer-events-none');
|
||
|
|
changeAccountModal.querySelector('div').classList.remove('scale-100');
|
||
|
|
changeAccountModal.querySelector('div').classList.add('scale-95');
|
||
|
|
}
|
||
|
|
|
||
|
|
// function hideInitTip() {
|
||
|
|
// const initTip = document.getElementById('init-tip');
|
||
|
|
// initTip.classList.add('opacity-0', 'pointer-events-none');
|
||
|
|
// }
|
||
|
|
|
||
|
|
// 保存所有设置到本地存储
|
||
|
|
function saveAllSettings() {
|
||
|
|
// 获取本地存储中已有的配置
|
||
|
|
let existingSettings = JSON.parse(localStorage.getItem('smartBodyguardSettings')) || {};
|
||
|
|
let currentSettings = {};
|
||
|
|
|
||
|
|
// 保存当前页面所有规则的启用状态和选项
|
||
|
|
document.querySelectorAll('.rule-card').forEach(card => {
|
||
|
|
const ruleId = card.dataset.ruleId;
|
||
|
|
const ruleName = card.querySelector('.rule-title').textContent;
|
||
|
|
const ruleToggle = card.querySelector('.rule-toggle');
|
||
|
|
const ruleSelect = card.querySelector('.rule-select');
|
||
|
|
const ruleInput = card.querySelector('.rule-input');
|
||
|
|
// console.log('ruleInput', ruleInput.value)
|
||
|
|
|
||
|
|
currentSettings[ruleId] = {
|
||
|
|
name: ruleName,
|
||
|
|
enabled: ruleToggle ? ruleToggle.checked : false,
|
||
|
|
option: ruleSelect ? ruleSelect.value : '',
|
||
|
|
inputValue: ruleInput ? ruleInput.value : ''
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
// 合并已有的配置和当前页面的配置
|
||
|
|
let mergedSettings = {...existingSettings, ...currentSettings};
|
||
|
|
console.log(mergedSettings)
|
||
|
|
// 将合并后的配置保存到本地存储
|
||
|
|
localStorage.setItem('smartBodyguardSettings', JSON.stringify(mergedSettings));
|
||
|
|
|
||
|
|
window.addEventListener('pywebviewready', function () {
|
||
|
|
// var container = document.getElementById('pywebview-status')
|
||
|
|
// container.innerHTML = '<i>pywebview</i> is ready'
|
||
|
|
// pywebview.api.get_localStorage(localStorage.getItem('smartBodyguardSettings'))
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
if (window.pywebview) {
|
||
|
|
console.log('第二次')
|
||
|
|
pywebview.api.get_localStorage(localStorage.getItem('smartBodyguardSettings'))
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 从本地存储加载设置
|
||
|
|
function loadSettings() {
|
||
|
|
|
||
|
|
let settings = JSON.parse(localStorage.getItem('smartBodyguardSettings')) || {};
|
||
|
|
console.log(settings);
|
||
|
|
|
||
|
|
// 加载当前页面所有规则的启用状态和选项
|
||
|
|
document.querySelectorAll('.rule-card').forEach(card => {
|
||
|
|
const ruleId = card.dataset.ruleId;
|
||
|
|
const ruleTitle = card.querySelector('.rule-title');
|
||
|
|
const ruleToggle = card.querySelector('.rule-toggle');
|
||
|
|
const ruleSelect = card.querySelector('.rule-select');
|
||
|
|
const ruleInput = card.querySelector('.rule-input');
|
||
|
|
|
||
|
|
if (settings[ruleId]) {
|
||
|
|
// 加载规则名称
|
||
|
|
if (settings[ruleId].name) {
|
||
|
|
ruleTitle.textContent = settings[ruleId].name;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 加载启用状态
|
||
|
|
if (ruleToggle) {
|
||
|
|
ruleToggle.checked = settings[ruleId].enabled;
|
||
|
|
ruleToggle.dispatchEvent(new Event('change'));
|
||
|
|
}
|
||
|
|
|
||
|
|
// 加载选项
|
||
|
|
if (ruleSelect) {
|
||
|
|
ruleSelect.value = settings[ruleId].option;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 加载输入值
|
||
|
|
if (ruleInput) {
|
||
|
|
console.log('settings', settings)
|
||
|
|
console.log('settings[ruleId].inputValue', settings[ruleId].inputValue)
|
||
|
|
ruleInput.value = settings[ruleId].inputValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
saveAllSettings();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 页面加载时初始化
|
||
|
|
loadSettings();
|
||
|
|
|
||
|
|
// 确保在页面加载完成后调用 loadSettings
|
||
|
|
// window.addEventListener('load', () => {
|
||
|
|
// console.log("Page load event triggered. Calling loadSettings.");
|
||
|
|
// // ... (其他页面加载时的初始化代码，例如生成拉黑记录数据) ...
|
||
|
|
// loadSettings(); // 调用加载设置函数
|
||
|
|
// // ... (其他初始化代码) ...
|
||
|
|
// });
|
||
|
|
|
||
|
|
// 显示初始化提示
|
||
|
|
// setTimeout(() => {
|
||
|
|
// const initTip = document.getElementById('init-tip');
|
||
|
|
// initTip.classList.remove('opacity-0', 'pointer-events-none');
|
||
|
|
//
|
||
|
|
// // 5秒后自动关闭
|
||
|
|
// setTimeout(hideInitTip, 5000);
|
||
|
|
// }, 1000);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|