feat(frontend): cache 3D assets and restore loading feedback
Persist versioned models and validated network metadata in IndexedDB. Show scene download progress and recoverable errors with the existing frosted material. Connect existing skeletons to pending navigation and route boundaries while preserving the map. Previously only dynamic imports showed fallbacks, and rejected model promises prevented retries. Verified: 32 focused unit tests; 4 navigation and scene browser checks; 7 cache browser checks including invalid-metadata recovery; isolated production build and type checks.
This commit is contained in:
@@ -4,6 +4,41 @@ import { mockBackend } from "./support/mockBackend";
|
||||
|
||||
test.setTimeout(180_000);
|
||||
|
||||
test("首次加载和失败提示位于工具面板上方,窄屏可直接重试", async ({ page }) => {
|
||||
await mockBackend(page);
|
||||
await page.addInitScript(() => {
|
||||
localStorage.setItem("active_project", "playwright-project");
|
||||
localStorage.setItem("MAP_WORKSPACE", "zjb");
|
||||
localStorage.setItem("NETWORK_NAME", "zjb");
|
||||
});
|
||||
let release: () => void = () => {};
|
||||
const pending = new Promise<void>((resolve) => { release = resolve; });
|
||||
const failedModel = "**/models/detail_roof.glb*";
|
||||
await page.route(failedModel, async (route) => { await pending; await route.abort("failed"); });
|
||||
await page.goto("/three-dimensional-scene");
|
||||
const scene = page.frameLocator('iframe[title="高铁湛江北站供水系统三维场景"]');
|
||||
await expect(scene.locator("#boot-title")).toHaveText("正在载入场景资源 9 / 10", { timeout: 60_000 });
|
||||
const loadingMaterial = await scene.locator(".boot-panel").evaluate((element) => ({
|
||||
background: getComputedStyle(element).backgroundImage,
|
||||
blur: getComputedStyle(element).backdropFilter,
|
||||
}));
|
||||
for (const width of [1280, 375, 320]) {
|
||||
await page.setViewportSize({ width, height: 800 });
|
||||
expect(await page.evaluate(() => document.elementFromPoint(innerWidth / 2, innerHeight / 2)?.tagName)).toBe("IFRAME");
|
||||
await page.screenshot({ path: `test-results/scene-host-loading-${width}.png` });
|
||||
}
|
||||
release();
|
||||
await expect(scene.locator("#boot-title")).toHaveText("场景资源加载失败");
|
||||
await page.unroute(failedModel);
|
||||
await scene.getByRole("button", { name: "重新载入场景" }).click();
|
||||
await expect(scene.locator("#boot")).toBeHidden({ timeout: 60_000 });
|
||||
await expect(page.getByRole("slider", { name: /建筑背景透明度/ })).toBeEnabled();
|
||||
expect(await page.getByLabel("三维场景控制面板").evaluate((element) => ({
|
||||
background: getComputedStyle(element).backgroundImage,
|
||||
blur: getComputedStyle(element).backdropFilter,
|
||||
}))).toEqual(loadingMaterial);
|
||||
});
|
||||
|
||||
type CameraProbe = {
|
||||
active: string | null;
|
||||
position: number[];
|
||||
|
||||
Reference in New Issue
Block a user