90 lines
3.9 KiB
HTML
90 lines
3.9 KiB
HTML
<!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>
|