优化调试页响应展示格式

public/index.html

@@ -153,6 +153,70 @@
             font: 13px/1.5 Consolas, "Courier New", monospace;
         }
 
+        .response-shell {
+            display: grid;
+            gap: 0;
+        }
+
+        .response-meta {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 10px;
+            padding: 16px 20px;
+            background: rgba(17, 30, 35, 0.04);
+            border-bottom: 1px solid var(--line);
+        }
+
+        .response-meta-item {
+            padding: 10px 12px;
+            border: 1px solid rgba(210, 199, 179, 0.8);
+            border-radius: 12px;
+            background: rgba(255, 255, 255, 0.75);
+        }
+
+        .response-meta-label {
+            font-size: 12px;
+            color: var(--muted);
+            margin-bottom: 4px;
+        }
+
+        .response-meta-value {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text);
+            word-break: break-all;
+        }
+
+        .response-meta-value.is-ok {
+            color: var(--accent);
+        }
+
+        .response-meta-value.is-error {
+            color: var(--error);
+        }
+
+        .json-key {
+            color: #7dd3fc;
+        }
+
+        .json-string {
+            color: #f9d65c;
+        }
+
+        .json-number {
+            color: #f59e0b;
+        }
+
+        .json-boolean {
+            color: #fb7185;
+            font-weight: 700;
+        }
+
+        .json-null {
+            color: #c084fc;
+            font-weight: 700;
+        }
+
         .tips {
             display: grid;
             gap: 10px;
@@ -174,6 +238,10 @@
             pre {
                 min-height: 260px;
             }
+
+            .response-meta {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
@@ -220,7 +288,27 @@
                     <h2>响应</h2>
                     <div class="status" id="request-status">等待操作</div>
                 </div>
-                <pre id="output">No output yet.</pre>
+                <div class="response-shell">
+                    <div class="response-meta" id="response-meta">
+                        <div class="response-meta-item">
+                            <div class="response-meta-label">状态</div>
+                            <div class="response-meta-value" id="meta-success">未执行</div>
+                        </div>
+                        <div class="response-meta-item">
+                            <div class="response-meta-label">代码</div>
+                            <div class="response-meta-value" id="meta-code">-</div>
+                        </div>
+                        <div class="response-meta-item">
+                            <div class="response-meta-label">命令</div>
+                            <div class="response-meta-value" id="meta-cmd">-</div>
+                        </div>
+                        <div class="response-meta-item">
+                            <div class="response-meta-label">请求号</div>
+                            <div class="response-meta-value" id="meta-req">-</div>
+                        </div>
+                    </div>
+                    <pre id="output">No output yet.</pre>
+                </div>
             </div>
         </section>
     </div>
@@ -233,9 +321,79 @@
         const requestStatus = document.getElementById("request-status");
         const requestBox = document.getElementById("request");
         const output = document.getElementById("output");
+        const metaSuccess = document.getElementById("meta-success");
+        const metaCode = document.getElementById("meta-code");
+        const metaCmd = document.getElementById("meta-cmd");
+        const metaReq = document.getElementById("meta-req");
 
-        function setOutput(value) {
+        function escapeHtml(value) {
-            output.textContent = value;
+            return value
+                .replaceAll("&", "&amp;")
+                .replaceAll("<", "&lt;")
+                .replaceAll(">", "&gt;");
+        }
+
+        function resetMeta() {
+            metaSuccess.textContent = "未执行";
+            metaSuccess.className = "response-meta-value";
+            metaCode.textContent = "-";
+            metaCode.className = "response-meta-value";
+            metaCmd.textContent = "-";
+            metaReq.textContent = "-";
+        }
+
+        function setMetaFromJson(data) {
+            const success = data && typeof data.success === "boolean" ? data.success : null;
+            metaSuccess.textContent = success === null ? "未知" : (success ? "成功" : "失败");
+            metaSuccess.className = "response-meta-value " + (success ? "is-ok" : success === false ? "is-error" : "");
+
+            metaCode.textContent = data && "code" in data ? String(data.code) : "-";
+            metaCode.className = "response-meta-value " + (success === false ? "is-error" : "");
+
+            metaCmd.textContent = data && data.req_cmd ? data.req_cmd : "-";
+            metaReq.textContent = data && data.req_code ? data.req_code : "-";
+        }
+
+        function highlightJson(value) {
+            const escaped = escapeHtml(value);
+            return escaped.replace(
+                /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?/g,
+                (match, stringToken, keySuffix, literalToken) => {
+                    if (stringToken) {
+                        if (keySuffix) {
+                            return `<span class="json-key">${stringToken}</span>${keySuffix}`;
+                        }
+                        return `<span class="json-string">${stringToken}</span>`;
+                    }
+
+                    if (literalToken === "true" || literalToken === "false") {
+                        return `<span class="json-boolean">${match}</span>`;
+                    }
+
+                    if (literalToken === "null") {
+                        return `<span class="json-null">${match}</span>`;
+                    }
+
+                    return `<span class="json-number">${match}</span>`;
+                }
+            );
+        }
+
+        function renderOutput(value) {
+            if (typeof value !== "string") {
+                const jsonText = JSON.stringify(value, null, 2);
+                output.innerHTML = highlightJson(jsonText);
+                setMetaFromJson(value);
+                return;
+            }
+
+            try {
+                const parsed = JSON.parse(value);
+                renderOutput(parsed);
+            } catch {
+                resetMeta();
+                output.textContent = value;
+            }
         }
 
         function allocString(value) {
@@ -279,13 +437,14 @@
             try {
                 responsePtr = mod._init_func();
                 const text = mod.UTF8ToString(responsePtr);
-                setOutput(text);
+                renderOutput(text);
                 moduleStatus.textContent = "业务接口已初始化";
                 requestStatus.textContent = "初始化成功";
             } catch (error) {
                 moduleStatus.textContent = "初始化失败";
                 requestStatus.textContent = "初始化失败";
-                setOutput(String(error && error.stack ? error.stack : error));
+                resetMeta();
+                output.textContent = String(error && error.stack ? error.stack : error);
             } finally {
                 if (responsePtr) {
                     mod._smart_free_string(responsePtr);
@@ -304,15 +463,12 @@
                 requestPtr = allocString(raw);
                 responsePtr = mod._func(requestPtr);
                 const text = mod.UTF8ToString(responsePtr);
-                try {
+                renderOutput(text);
-                    setOutput(JSON.stringify(JSON.parse(text), null, 2));
-                } catch {
-                    setOutput(text);
-                }
                 requestStatus.textContent = "请求成功";
             } catch (error) {
                 requestStatus.textContent = "请求失败";
-                setOutput(String(error && error.stack ? error.stack : error));
+                resetMeta();
+                output.textContent = String(error && error.stack ? error.stack : error);
             } finally {
                 if (requestPtr) {
                     mod._free(requestPtr);
@@ -328,8 +484,11 @@
         document.getElementById("sample-btn").addEventListener("click", sampleFourBar);
         document.getElementById("clear-btn").addEventListener("click", () => {
             requestStatus.textContent = "等待操作";
-            setOutput("No output yet.");
+            resetMeta();
+            output.textContent = "No output yet.";
         });
+
+        resetMeta();
     </script>
 </body>
 </html>