From 3df459cb338f8288f6100a0f1781a50d0a7e3f56 Mon Sep 17 00:00:00 2001
From: zhangshun <453905631@qq.com>
Date: Mon, 1 Jun 2026 17:32:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B0=83=E8=AF=95=E9=A1=B5?=
=?UTF-8?q?=E5=93=8D=E5=BA=94=E5=B1=95=E7=A4=BA=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/index.html | 183 +++++++++++++++++++++++++++++++++++++++++++---
1 file changed, 171 insertions(+), 12 deletions(-)
diff --git a/public/index.html b/public/index.html
index a47bc3f..575270d 100644
--- a/public/index.html
+++ b/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;
+ }
}
@@ -220,7 +288,27 @@
响应
等待操作
- No output yet.
+
@@ -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) {
- output.textContent = value;
+ function escapeHtml(value) {
+ return value
+ .replaceAll("&", "&")
+ .replaceAll("<", "<")
+ .replaceAll(">", ">");
+ }
+
+ 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 `${stringToken}${keySuffix}`;
+ }
+ return `${stringToken}`;
+ }
+
+ if (literalToken === "true" || literalToken === "false") {
+ return `${match}`;
+ }
+
+ if (literalToken === "null") {
+ return `${match}`;
+ }
+
+ return `${match}`;
+ }
+ );
+ }
+
+ 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 {
- setOutput(JSON.stringify(JSON.parse(text), null, 2));
- } catch {
- setOutput(text);
- }
+ renderOutput(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();