代码修改
This commit is contained in:
1 parent
a9d66536c3
commit
37964d1f95
1 file changed
+89
@@ -0,0 +1,89 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>code-zk · Wujie 返回跳转复现</title>
|
||||
<style>
|
||||
:root { color-scheme: light; font-family: "Microsoft YaHei", system-ui, sans-serif; }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; margin: 0; background: #f5f7fb; }
|
||||
body { display: flex; flex-direction: column; overflow: hidden; }
|
||||
.toolbar { height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #fff; border-bottom: 1px solid #dfe5ef; color: #1f2937; }
|
||||
.toolbar strong { font-size: 15px; }
|
||||
.toolbar span { color: #64748b; font-size: 13px; }
|
||||
button { border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #334155; padding: 6px 12px; cursor: pointer; }
|
||||
button:hover { border-color: #3b82f6; color: #2563eb; }
|
||||
#status { margin-left: auto; }
|
||||
#mount { flex: 1 1 auto; min-height: 0; position: relative; }
|
||||
#mount > iframe, #mount > [data-wujie] { width: 100%; height: 100%; border: 0; display: block; }
|
||||
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: #64748b; background: #f8fafc; }
|
||||
.error { margin: 24px; padding: 16px; border: 1px solid #fecaca; border-radius: 4px; background: #fff1f2; color: #b91c1c; white-space: pre-wrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="toolbar">
|
||||
<strong>code-zk · Wujie 返回跳转复现</strong>
|
||||
<span>子应用:localhost:5175/chMoreMode</span>
|
||||
<button id="reload" type="button">重新加载</button>
|
||||
<span id="status">准备加载</span>
|
||||
</div>
|
||||
<main id="mount"><div class="loading">正在加载 Wujie 子应用…</div></main>
|
||||
<script type="module">
|
||||
const mount = document.getElementById("mount");
|
||||
const status = document.getElementById("status");
|
||||
const childUrl = "http://localhost:5175/chMoreMode";
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
const returnTarget = query.get("code-zk-wujie-return-repro") || "http://localhost:5175/list";
|
||||
let dispose = null;
|
||||
|
||||
function setStatus(value) { status.textContent = value; }
|
||||
|
||||
function showError(error) {
|
||||
mount.innerHTML = "";
|
||||
const panel = document.createElement("div");
|
||||
panel.className = "error";
|
||||
panel.textContent = `Wujie 子应用加载失败\n${error instanceof Error ? error.message : String(error)}`;
|
||||
mount.appendChild(panel);
|
||||
setStatus("加载失败");
|
||||
}
|
||||
|
||||
async function load() {
|
||||
if (typeof dispose === "function") {
|
||||
try { dispose(); } catch (_) {}
|
||||
dispose = null;
|
||||
}
|
||||
mount.innerHTML = '<div class="loading">正在加载 Wujie 子应用…</div>';
|
||||
setStatus("加载中");
|
||||
try {
|
||||
const { startApp } = await import("http://localhost:5175/node_modules/wujie/esm/index.js");
|
||||
mount.innerHTML = "";
|
||||
dispose = await startApp({
|
||||
name: "code-zk-wujie-repro",
|
||||
url: childUrl,
|
||||
el: mount,
|
||||
alive: true,
|
||||
sync: true,
|
||||
props: {
|
||||
source: "wujie-repro",
|
||||
parentReturnTo: returnTarget,
|
||||
},
|
||||
loadError: (url, error) => showError(`${url}\n${error?.message || error}`),
|
||||
});
|
||||
setStatus("已加载");
|
||||
} catch (error) {
|
||||
showError(error);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("reload").addEventListener("click", load);
|
||||
window.addEventListener("message", (event) => {
|
||||
const message = event.data;
|
||||
if (message?.source !== "deerflow-position-roundtable" || message?.type !== "deerflow:position-roundtable:return") return;
|
||||
const target = message.payload?.route || returnTarget;
|
||||
window.location.href = target;
|
||||
});
|
||||
void load();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user