当前状态：
${STATE.isBlockingEnabled ? '拦截已启用' : '拦截已暂停'}
注意：暂停拦截只影响永久保存的规则，预览时的临时拦截仍然有效
总规则数：${stats.rulesCount} | 本站规则：${domainRules.length}
${domainRules.length > 0 ?
domainRules.slice(0, 5).map(rule => `
${rule.domain || '全局'}
${rule.selector.length > 40 ? rule.selector.substring(0, 40) + '...' : rule.selector}
`).join('') :
'
暂无规则
'
}
${domainRules.length > 5 ? `
还有 ${domainRules.length - 5} 条规则未显示
` : ''}
${stats.totalBlocked}
总拦截数
${stats.todayBlocked}
今日拦截
${domainRules.length}
本站规则
${Object.keys(domainGroups).length > 0 ?
visibleDomains.map(domain => {
const isExpanded = STATE.expandedDomains.has(domain);
const rules = domainGroups[domain];
return createDirectoryItem(domain, rules, isExpanded);
}).join('') :
'
暂无拦截规则
'
}
${hiddenDomains.length > 0 ? `
${hiddenDomains.map(domain => {
const isExpanded = STATE.expandedDomains.has(domain);
const rules = domainGroups[domain];
return createDirectoryItem(domain, rules, isExpanded);
}).join('')}
` : ''}
`;
document.body.appendChild(panel);
STATE.elements.controlPanel = panel;
setupControlPanelEvents(panel, stats, domainGroups, hiddenDomains);
}
// 创建目录项目
function createDirectoryItem(domain, rules, isExpanded) {
return `
${domain}
${rules.length} 条规则
${rules.map(rule => {
const testResult = testSelector(rule.selector);
return `
${rule.selector.length > 50 ? rule.selector.substring(0, 50) + '...' : rule.selector}
匹配: ${testResult.count} 个元素 | ${testResult.valid ? '有效' : '无效'}
`;
}).join('')}
`;
}
// 设置控制面板事件
function setupControlPanelEvents(panel, stats, domainGroups, hiddenDomains) {
const closeControlBtn = panel.querySelector('#close-control-btn');
const closeControlPanelBtn = panel.querySelector('#close-control-panel-btn');
function handleControlClose(e) {
console.log('控制面板关闭按钮被点击');
e.stopPropagation();
e.preventDefault();
panel.remove();
STATE.elements.controlPanel = null;
}
if (closeControlBtn) {
closeControlBtn.addEventListener('click', handleControlClose, { capture: true });
closeControlBtn.addEventListener('touchstart', function(e) {
e.stopPropagation();
}, { capture: true });
closeControlBtn.addEventListener('touchend', handleControlClose, { capture: true });
}
if (closeControlPanelBtn) {
closeControlPanelBtn.addEventListener('click', handleControlClose, { capture: true });
closeControlPanelBtn.addEventListener('touchstart', function(e) {
e.stopPropagation();
}, { capture: true });
closeControlPanelBtn.addEventListener('touchend', handleControlClose, { capture: true });
}
panel.querySelector('#toggle-block-control-btn').addEventListener('click', () => {
toggleBlocking();
panel.remove();
STATE.elements.controlPanel = null;
});
panel.querySelectorAll('.delete-rule-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const selector = e.target.dataset.selector;
const domain = e.target.dataset.domain || undefined;
deleteRuleFromControlPanel(selector, domain, panel);
});
});
panel.querySelectorAll('.delete-directory-rule').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const selector = e.target.dataset.selector;
const domain = e.target.dataset.domain || undefined;
deleteRuleFromControlPanel(selector, domain, panel);
});
});
panel.querySelectorAll('.domain-header').forEach(header => {
header.addEventListener('click', (e) => {
if (e.target.classList.contains('delete-directory-rule')) {
return;
}
const domain = e.currentTarget.dataset.domain;
toggleDomainExpansion(domain, e.currentTarget.closest('.directory-item'));
});
});
panel.querySelectorAll('.expand-toggle').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const domain = e.target.dataset.domain;
toggleDomainExpansion(domain, e.target.closest('.directory-item'));
});
});
const toggleHiddenBtn = panel.querySelector('#toggle-hidden-domains-btn');
const hiddenDomainsList = panel.querySelector('.hidden-domains-list');
if (toggleHiddenBtn && hiddenDomainsList) {
toggleHiddenBtn.addEventListener('click', () => {
if (hiddenDomainsList.style.display === 'none') {
hiddenDomainsList.style.display = 'block';
toggleHiddenBtn.innerHTML = `
${rule.selector.length > 50 ? rule.selector.substring(0, 50) + '...' : rule.selector}
匹配: ${testResult.count} 个元素 | ${testResult.valid ? '有效' : '无效'}
`;
}).join('');
const domainRulesElement = domainItem.querySelector('.domain-rules');
if (domainRulesElement) {
domainRulesElement.innerHTML = newRulesHtml;
domainRulesElement.querySelectorAll('.delete-directory-rule').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const selector = e.target.dataset.selector;
const domain = e.target.dataset.domain || undefined;
deleteRuleFromControlPanel(selector, domain, panel);
});
});
const ruleCountElement = domainItem.querySelector('.rule-count');
if (ruleCountElement) {
ruleCountElement.textContent = `${remainingRules.length} 条规则`;
}
}
} else {
if (domainItem) {
domainItem.remove();
}
}
if (content) {
content.scrollTop = scrollPosition;
}
updateControlPanelStats(panel);
}
}
// 更新控制面板统计信息
function updateControlPanelStats(panel) {
const stats = updateStatistics();
const domainRules = STATE.adRules.filter(rule =>
!rule.domain || rule.domain === STATE.currentDomain
);
const statsGrid = panel.querySelector('.stats-grid');
if (statsGrid) {
statsGrid.innerHTML = `