feat: 添加管理员可控的F12调试模式开关

## 功能说明
- 管理员登录后可在管理后台页面看到"调试模式"卡片
- 点击开关按钮可启用/禁用F12和开发者工具
- 调试模式状态保存在localStorage,页面刷新后保持
- 同时控制主应用(app.html)和分享页面(share.html)的调试权限

## 技术实现
1. app.js新增debugMode配置和toggleDebugMode方法
2. app.html添加调试模式开关UI,并修改防调试代码支持debugMode控制
3. share.html添加防调试代码,受localStorage中的debugMode控制

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-14 16:04:17 +08:00
parent 024e807f75
commit bce225ec5c
3 changed files with 145 additions and 13 deletions

View File

@@ -1192,6 +1192,24 @@
<!-- 管理员视图 -->
<div v-if="isLoggedIn && currentView === 'admin' && user && user.is_admin" class="main-container">
<div class="card">
<!-- 调试模式开关 -->
<div class="card" style="margin-bottom: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div>
<h3 style="margin-bottom: 10px; color: white;">
<i class="fas fa-bug"></i> 调试模式
</h3>
<p style="margin: 0; font-size: 14px; opacity: 0.9;">
{{ debugMode ? '已启用 - F12和开发者工具已解锁' : '已禁用 - F12和开发者工具被锁定' }}
</p>
</div>
<button @click="toggleDebugMode" class="btn" :style="{background: debugMode ? '#28a745' : '#dc3545', color: 'white', border: 'none', padding: '12px 24px', fontSize: '16px', fontWeight: '600', cursor: 'pointer', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.2)'}">
<i :class="debugMode ? 'fas fa-toggle-on' : 'fas fa-toggle-off'"></i>
{{ debugMode ? '关闭调试' : '开启调试' }}
</button>
</div>
</div>
<!-- 服务器存储统计 -->
<div class="card" style="margin-bottom: 30px;">
<h3 style="margin-bottom: 20px;">
@@ -2098,14 +2116,20 @@
<!-- 开发者工具保护 -->
<script>
// 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
// 检查是否启用调试模式
const isDebugMode = localStorage.getItem('debugMode') === 'true';
// 禁用右键菜单(调试模式下不禁用)
if (!isDebugMode) {
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
}
// 禁用F12和常见开发者工具快捷键
document.addEventListener('keydown', function(e) {
// 禁用F12和常见开发者工具快捷键(调试模式下不禁用)
if (!isDebugMode) {
document.addEventListener('keydown', function(e) {
// F12
if (e.key === 'F12' || e.keyCode === 123) {
e.preventDefault();
@@ -2132,9 +2156,11 @@
return false;
}
});
}
// 检测开发者工具是否打开
(function() {
// 检测开发者工具是否打开(调试模式下不检测)
if (!isDebugMode) {
(function() {
const threshold = 160;
let isDevToolsOpen = false;
@@ -2155,10 +2181,11 @@
isDevToolsOpen = false;
}
}, 500);
})();
})();
}
// 禁用console输出可选
if (window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
// 禁用console输出调试模式下不禁用
if (!isDebugMode && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
console.log = function() {};
console.info = function() {};
console.warn = function() {};