feat(debug): 报错页面增加手机端适配,工具栏可折叠,修复原生布局溢出问题

This commit is contained in:
augushong
2026-05-24 10:09:27 +08:00
parent 7312db717c
commit 577ee6b974

View File

@@ -93,6 +93,7 @@ if (!function_exists('echo_value')) {
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统发生错误</title>
<meta name="robots" content="noindex,nofollow" />
<style>
@@ -429,6 +430,132 @@ if (!function_exists('echo_value')) {
overflow: auto;
box-sizing: border-box;
}
/* Mobile toggle button - hidden on desktop */
#debug-toolbar-toggle {
display: none;
}
/* Mobile responsive */
@media (max-width: 768px) {
html, body {
overflow-x: hidden;
max-width: 100vw;
}
.exception {
max-width: 100%;
overflow: hidden;
}
.exception .source-code {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.exception .source-code pre {
min-width: 0;
}
.exception .source-code pre ol {
min-width: 0;
}
.exception-var table {
table-layout: fixed;
word-break: break-all;
}
.exception-var table td pre {
white-space: pre-wrap;
word-break: break-all;
}
.echo pre {
white-space: pre-wrap;
word-break: break-all;
}
h1 {
font-size: 20px;
line-height: 24px;
}
#debug-toolbar-toggle {
display: block;
position: fixed;
top: 10px;
right: 10px;
z-index: 99999;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
border: 1px solid #ddd;
cursor: pointer;
font-size: 20px;
line-height: 40px;
text-align: center;
color: #555;
}
#debug-toolbar-toggle:active {
background: #f0f0f0;
}
#debug-toolbar {
display: none;
top: auto;
bottom: 0;
right: 0;
left: 0;
max-width: 100vw;
border-radius: 0;
padding: 12px 16px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
white-space: normal;
overflow-x: visible;
}
#debug-toolbar.toolbar-open {
display: block;
}
#debug-toolbar .toolbar-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-right: 0;
padding-right: 0;
padding-bottom: 8px;
margin-bottom: 8px;
border-right: none;
border-bottom: 1px solid #eee;
}
#debug-toolbar .toolbar-group:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
#debug-toolbar .toolbar-group label {
padding: 6px 10px;
font-size: 14px;
}
#debug-toolbar .toolbar-group input[type="checkbox"] {
width: 18px;
height: 18px;
}
#debug-toolbar button {
padding: 8px 14px;
font-size: 14px;
}
#char-count {
font-size: 14px;
}
#markdown-preview {
width: 100%;
height: 100%;
top: 0;
right: 0;
box-shadow: none;
border-left: none;
}
#markdown-preview .preview-header {
padding: 14px 16px;
}
#markdown-preview pre {
padding: 16px;
font-size: 13px;
}
}
</style>
</head>
<body>
@@ -537,6 +664,7 @@ if (!function_exists('echo_value')) {
</div>
<!-- AI Copy Toolbar -->
<button id="debug-toolbar-toggle" onclick="toggleToolbar()">&#9776;</button>
<div id="debug-toolbar">
<span class="toolbar-group" id="core-group">
<label><input type="checkbox" data-key="message" checked> 错误信息</label>
@@ -994,6 +1122,19 @@ if (isset($tables) && is_array($tables)) {
}
updatePreviewIfOpen();
};
// Toggle toolbar on mobile
window.toggleToolbar = function() {
var toolbar = document.getElementById('debug-toolbar');
var toggleBtn = document.getElementById('debug-toolbar-toggle');
if (toolbar.classList.contains('toolbar-open')) {
toolbar.classList.remove('toolbar-open');
toggleBtn.innerHTML = '&#9776;';
} else {
toolbar.classList.add('toolbar-open');
toggleBtn.innerHTML = '&times;';
}
};
})();
</script>
<?php } ?>