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:
@@ -1192,6 +1192,24 @@
|
|||||||
<!-- 管理员视图 -->
|
<!-- 管理员视图 -->
|
||||||
<div v-if="isLoggedIn && currentView === 'admin' && user && user.is_admin" class="main-container">
|
<div v-if="isLoggedIn && currentView === 'admin' && user && user.is_admin" class="main-container">
|
||||||
<div class="card">
|
<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;">
|
<div class="card" style="margin-bottom: 30px;">
|
||||||
<h3 style="margin-bottom: 20px;">
|
<h3 style="margin-bottom: 20px;">
|
||||||
@@ -2098,13 +2116,19 @@
|
|||||||
|
|
||||||
<!-- 开发者工具保护 -->
|
<!-- 开发者工具保护 -->
|
||||||
<script>
|
<script>
|
||||||
// 禁用右键菜单
|
// 检查是否启用调试模式
|
||||||
|
const isDebugMode = localStorage.getItem('debugMode') === 'true';
|
||||||
|
|
||||||
|
// 禁用右键菜单(调试模式下不禁用)
|
||||||
|
if (!isDebugMode) {
|
||||||
document.addEventListener('contextmenu', function(e) {
|
document.addEventListener('contextmenu', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 禁用F12和常见开发者工具快捷键
|
// 禁用F12和常见开发者工具快捷键(调试模式下不禁用)
|
||||||
|
if (!isDebugMode) {
|
||||||
document.addEventListener('keydown', function(e) {
|
document.addEventListener('keydown', function(e) {
|
||||||
// F12
|
// F12
|
||||||
if (e.key === 'F12' || e.keyCode === 123) {
|
if (e.key === 'F12' || e.keyCode === 123) {
|
||||||
@@ -2132,8 +2156,10 @@
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 检测开发者工具是否打开
|
// 检测开发者工具是否打开(调试模式下不检测)
|
||||||
|
if (!isDebugMode) {
|
||||||
(function() {
|
(function() {
|
||||||
const threshold = 160;
|
const threshold = 160;
|
||||||
let isDevToolsOpen = false;
|
let isDevToolsOpen = false;
|
||||||
@@ -2156,9 +2182,10 @@
|
|||||||
}
|
}
|
||||||
}, 500);
|
}, 500);
|
||||||
})();
|
})();
|
||||||
|
}
|
||||||
|
|
||||||
// 禁用console输出(可选)
|
// 禁用console输出(调试模式下不禁用)
|
||||||
if (window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
|
if (!isDebugMode && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
|
||||||
console.log = function() {};
|
console.log = function() {};
|
||||||
console.info = function() {};
|
console.info = function() {};
|
||||||
console.warn = function() {};
|
console.warn = function() {};
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ createApp({
|
|||||||
isLogin: true,
|
isLogin: true,
|
||||||
fileViewMode: 'grid', // 文件显示模式: grid 大图标, list 列表
|
fileViewMode: 'grid', // 文件显示模式: grid 大图标, list 列表
|
||||||
shareViewMode: 'list', // 分享显示模式: grid 大图标, list 列表
|
shareViewMode: 'list', // 分享显示模式: grid 大图标, list 列表
|
||||||
|
debugMode: false, // 调试模式(管理员可切换)
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
loginForm: {
|
loginForm: {
|
||||||
@@ -1973,9 +1974,37 @@ handleDragLeave(e) {
|
|||||||
this.uploadingTool = false;
|
this.uploadingTool = false;
|
||||||
event.target.value = ''; // 清空input,允许重复上传
|
event.target.value = ''; // 清空input,允许重复上传
|
||||||
}
|
}
|
||||||
} },
|
},
|
||||||
|
|
||||||
|
// ===== 调试模式管理 =====
|
||||||
|
|
||||||
|
// 切换调试模式
|
||||||
|
toggleDebugMode() {
|
||||||
|
this.debugMode = !this.debugMode;
|
||||||
|
|
||||||
|
// 保存到 localStorage
|
||||||
|
if (this.debugMode) {
|
||||||
|
localStorage.setItem('debugMode', 'true');
|
||||||
|
this.showToast('success', '调试模式已启用', 'F12和开发者工具快捷键已启用');
|
||||||
|
// 刷新页面以应用更改
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.reload();
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem('debugMode');
|
||||||
|
this.showToast('info', '调试模式已禁用', '页面将重新加载以应用更改');
|
||||||
|
// 刷新页面以应用更改
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.reload();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
// 初始化调试模式状态
|
||||||
|
this.debugMode = localStorage.getItem('debugMode') === 'true';
|
||||||
|
|
||||||
// 阻止全局拖拽默认行为(防止拖到区域外打开新页面)
|
// 阻止全局拖拽默认行为(防止拖到区域外打开新页面)
|
||||||
window.addEventListener("dragover", (e) => {
|
window.addEventListener("dragover", (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|||||||
@@ -885,5 +885,81 @@
|
|||||||
}
|
}
|
||||||
}).mount('#app');
|
}).mount('#app');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 检查是否启用调试模式
|
||||||
|
const isDebugMode = localStorage.getItem('debugMode') === 'true';
|
||||||
|
|
||||||
|
// 禁用右键菜单(调试模式下不禁用)
|
||||||
|
if (!isDebugMode) {
|
||||||
|
document.addEventListener('contextmenu', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 禁用F12和常见开发者工具快捷键(调试模式下不禁用)
|
||||||
|
if (!isDebugMode) {
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
// F12
|
||||||
|
if (e.key === 'F12' || e.keyCode === 123) {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Ctrl+Shift+I (开发者工具)
|
||||||
|
if (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.keyCode === 73)) {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Ctrl+Shift+J (控制台)
|
||||||
|
if (e.ctrlKey && e.shiftKey && (e.key === 'J' || e.keyCode === 74)) {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Ctrl+U (查看源代码)
|
||||||
|
if (e.ctrlKey && (e.key === 'U' || e.keyCode === 85)) {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Ctrl+Shift+C (元素选择器)
|
||||||
|
if (e.ctrlKey && e.shiftKey && (e.key === 'C' || e.keyCode === 67)) {
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检测开发者工具是否打开(调试模式下不检测)
|
||||||
|
if (!isDebugMode) {
|
||||||
|
(function() {
|
||||||
|
const threshold = 160;
|
||||||
|
let isDevToolsOpen = false;
|
||||||
|
|
||||||
|
setInterval(function() {
|
||||||
|
const widthThreshold = window.outerWidth - window.innerWidth > threshold;
|
||||||
|
const heightThreshold = window.outerHeight - window.innerHeight > threshold;
|
||||||
|
|
||||||
|
if (!(heightThreshold && widthThreshold) &&
|
||||||
|
((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)) {
|
||||||
|
if (!isDevToolsOpen) {
|
||||||
|
isDevToolsOpen = true;
|
||||||
|
console.clear();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
isDevToolsOpen = false;
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 禁用console输出(调试模式下不禁用)
|
||||||
|
if (!isDebugMode && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
|
||||||
|
console.log = function() {};
|
||||||
|
console.info = function() {};
|
||||||
|
console.warn = function() {};
|
||||||
|
console.error = function() {};
|
||||||
|
console.debug = function() {};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user