OrgTJWater/next-tjwater-drainage-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate drainage frontend to Vite

Browse Source
This commit is contained in:
jiang
2026-07-22 12:47:36 +08:00
parent e0cfa3d6eb
commit 72850761ce
213 changed files with 5726 additions and 5283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/browser/agent-streaming-stability.e2e.ts
+140 -87
View File
@@ -210,10 +210,16 @@ test("stream completion and the plan card remain positionally stable", async ({
await expect(
page.getByRole("button", { name: "选择 Agent 模型" }).filter({ visible: true }).first()
).toContainText("测试模型");
const prompt = page.getByPlaceholder(/输入调度问题/).filter({ visible: true }).first();
const prompt = page
.getByPlaceholder(/输入调度问题/)
.filter({ visible: true })
.first();
await expect(prompt).toBeVisible();
await prompt.fill("检查流式响应稳定性");
const sendButton = page.getByRole("button", { name: "发送 Agent 指令" }).filter({ visible: true }).first();
const sendButton = page
.getByRole("button", { name: "发送 Agent 指令" })
.filter({ visible: true })
.first();
await expect(sendButton).toBeEnabled();
await page.evaluate(() => {
@@ -230,14 +236,19 @@ test("stream completion and the plan card remain positionally stable", async ({
const samples: StreamSample[] = [];
const startedAt = performance.now();
(window as typeof window & { __agentStreamSamples?: StreamSample[] }).__agentStreamSamples = samples;
const state = window as typeof window & {
__agentStreamSamples?: StreamSample[];
__agentStreamSamplingDone?: boolean;
};
state.__agentStreamSamples = samples;
state.__agentStreamSamplingDone = false;
const sample = () => {
const message = document.querySelector<HTMLElement>(".agent-panel-message");
const wrapper = message?.parentElement?.parentElement;
const scroll = document.querySelector<HTMLElement>(".agent-conversation-scroll");
const plan = Array.from(document.querySelectorAll<HTMLElement>(".agent-panel-nested")).find((element) =>
element.textContent?.includes("计划")
const plan = Array.from(document.querySelectorAll<HTMLElement>(".agent-panel-nested")).find(
(element) => element.textContent?.includes("计划")
);
const planWrapper = plan?.parentElement;
const planSection = planWrapper?.parentElement;
@@ -256,7 +267,7 @@ test("stream completion and the plan card remain positionally stable", async ({
});
}
if (performance.now() - startedAt < 8_000) {
if (!state.__agentStreamSamplingDone) {
requestAnimationFrame(sample);
}
};
@@ -295,7 +306,10 @@ test("stream completion and the plan card remain positionally stable", async ({
const sample = () => {
const list = document.querySelector<HTMLOListElement>('ol[aria-label="最近执行进度"]');
const rows = list?.children.length ?? 0;
state.__agentMinVisibleProgressRows = Math.min(state.__agentMinVisibleProgressRows ?? rows, rows);
state.__agentMinVisibleProgressRows = Math.min(
state.__agentMinVisibleProgressRows ?? rows,
rows
);
if (list && state.__agentProgressGeometry) {
const listHeight = list.getBoundingClientRect().height;
const containerHeight = list.parentElement?.getBoundingClientRect().height ?? 0;
@@ -329,52 +343,63 @@ test("stream completion and the plan card remain positionally stable", async ({
await expect(liveProgress.getByText("正在判断溢流风险", { exact: true })).toBeVisible();
await expect(liveProgress.locator("li")).toHaveCount(3);
await expect(liveProgress.getByText("正在分析运行上下文", { exact: true })).toHaveCount(0);
await expect.poll(() =>
page.evaluate(() =>
(window as typeof window & { __agentProgressWindowSampleDone?: boolean }).__agentProgressWindowSampleDone ?? false
await expect
.poll(() =>
page.evaluate(
() =>
(window as typeof window & { __agentProgressWindowSampleDone?: boolean })
.__agentProgressWindowSampleDone ?? false
)
)
).toBe(true);
.toBe(true);
expect(
await page.evaluate(() =>
(window as typeof window & { __agentMinVisibleProgressRows?: number }).__agentMinVisibleProgressRows
await page.evaluate(
() =>
(window as typeof window & { __agentMinVisibleProgressRows?: number })
.__agentMinVisibleProgressRows
)
).toBeGreaterThanOrEqual(3);
const progressGeometry = await page.evaluate(() =>
(window as typeof window & {
__agentProgressGeometry?: {
maxContainerHeight: number;
maxListHeight: number;
minContainerHeight: number;
minListHeight: number;
};
}).__agentProgressGeometry
const progressGeometry = await page.evaluate(
() =>
(
window as typeof window & {
__agentProgressGeometry?: {
maxContainerHeight: number;
maxListHeight: number;
minContainerHeight: number;
minListHeight: number;
};
}
).__agentProgressGeometry
);
expect(progressGeometry).toBeDefined();
expect(progressGeometry!.maxListHeight - progressGeometry!.minListHeight).toBeLessThanOrEqual(
PROGRESS_GEOMETRY_TOLERANCE_PX
);
expect(progressGeometry!.maxContainerHeight - progressGeometry!.minContainerHeight).toBeLessThanOrEqual(
PROGRESS_GEOMETRY_TOLERANCE_PX
);
expect(
progressGeometry!.maxContainerHeight - progressGeometry!.minContainerHeight
).toBeLessThanOrEqual(PROGRESS_GEOMETRY_TOLERANCE_PX);
const liveProgressRowHeights = await liveProgress.locator("li").evaluateAll((rows) =>
rows.map((row) => row.getBoundingClientRect().height)
);
const liveProgressRowHeights = await liveProgress
.locator("li")
.evaluateAll((rows) => rows.map((row) => row.getBoundingClientRect().height));
expect(liveProgressRowHeights.every((height) => Math.abs(height - 48) <= 0.01)).toBe(true);
await expect(liveProgress.locator("li").first().locator("span.min-w-0 > span").first()).toHaveCSS(
"white-space",
"nowrap"
);
const progressToggle = page.getByRole("button", { name: /执行进度/ }).filter({ visible: true }).first();
const progressToggle = page
.getByRole("button", { name: /执行进度/ })
.filter({ visible: true })
.first();
await expect(progressToggle).toBeEnabled();
await progressToggle.click();
const expandedLiveProgress = page.getByRole("list", { name: "全部执行进度" });
await expect(expandedLiveProgress.locator("li")).toHaveCount(4);
await expect(expandedLiveProgress.getByText("正在分析运行上下文", { exact: true })).toBeVisible();
await expect(expandedLiveProgress.getByText("正在核对降雨过程与汇水区响应关系", { exact: true })).toHaveCSS(
"white-space",
"normal"
);
await expect(
expandedLiveProgress.getByText("正在核对降雨过程与汇水区响应关系", { exact: true })
).toHaveCSS("white-space", "normal");
await progressToggle.click();
await expect(page.getByRole("list", { name: "最近执行进度" }).locator("li")).toHaveCount(3);
@@ -397,77 +422,101 @@ test("stream completion and the plan card remain positionally stable", async ({
});
triggerProgressFailure();
await expect(liveProgress.getByText("液位连续性核对失败", { exact: true })).toBeVisible();
await expect.poll(() =>
page.evaluate(() =>
(window as typeof window & { __agentFailureMotionObserved?: boolean }).__agentFailureMotionObserved ?? false
await expect
.poll(() =>
page.evaluate(
() =>
(window as typeof window & { __agentFailureMotionObserved?: boolean })
.__agentFailureMotionObserved ?? false
)
)
).toBe(true);
.toBe(true);
resumeStream();
await expect(page.getByText("分析完成", { exact: true }).filter({ visible: true }).first()).toBeVisible({
await expect(
page.getByText("分析完成", { exact: true }).filter({ visible: true }).first()
).toBeVisible({
timeout: 10_000
});
await expect(progressToggle).toContainText("共 4 条");
await expect(page.getByRole("list", { name: "最近执行进度" })).toHaveCount(0);
await expect(page.getByText("溢流风险判断完成", { exact: true }).filter({ visible: true })).toHaveCount(0);
await expect.poll(async () =>
page.evaluate(() => {
const scroll = document.querySelector<HTMLElement>(".agent-conversation-scroll");
return scroll ? Math.abs((scroll.scrollHeight - scroll.clientHeight) - scroll.scrollTop) : Number.POSITIVE_INFINITY;
})
).toBeLessThanOrEqual(2);
await expect(
page.getByText("溢流风险判断完成", { exact: true }).filter({ visible: true })
).toHaveCount(0);
await expect
.poll(async () =>
page.evaluate(() => {
const scroll = document.querySelector<HTMLElement>(".agent-conversation-scroll");
return scroll
? Math.abs(scroll.scrollHeight - scroll.clientHeight - scroll.scrollTop)
: Number.POSITIVE_INFINITY;
})
)
.toBeLessThanOrEqual(2);
await expect
.poll(() =>
page.evaluate(() => {
const samples = (
window as typeof window & {
__agentStreamSamples?: Array<{
clientHeight: number;
scrollHeight: number;
scrollTop: number;
}>;
}
).__agentStreamSamples;
const sample = samples?.at(-1);
return sample
? Math.abs(sample.scrollHeight - sample.clientHeight - sample.scrollTop)
: Number.POSITIVE_INFINITY;
})
)
.toBeLessThanOrEqual(2);
await page.evaluate(() => {
(window as typeof window & { __agentStreamSamplingDone?: boolean }).__agentStreamSamplingDone =
true;
});
const samples = await page.evaluate(() =>
(window as typeof window & {
__agentStreamSamples?: Array<{
clientHeight: number;
planItemTransform: string | null;
planSectionTransform: string | null;
planTransform: string | null;
scrollHeight: number;
scrollTop: number;
time: number;
transform: string;
}>;
}).__agentStreamSamples ?? []
const samples = await page.evaluate(
() =>
(
window as typeof window & {
__agentStreamSamples?: Array<{
clientHeight: number;
planItemTransform: string | null;
planSectionTransform: string | null;
planTransform: string | null;
scrollHeight: number;
scrollTop: number;
time: number;
transform: string;
}>;
}
).__agentStreamSamples ?? []
);
expect(samples.length).toBeGreaterThan(5);
const firstSampleTime = samples[0].time;
const settledEntranceSamples = samples.filter((sample) => sample.time - firstSampleTime >= 250);
expect(settledEntranceSamples.length).toBeGreaterThan(0);
expect(settledEntranceSamples.every((sample) => sample.transform === "none")).toBe(true);
const planSamples = samples.filter(
(sample) =>
sample.planItemTransform !== null &&
sample.planSectionTransform !== null &&
sample.planTransform !== null
);
expect(planSamples.length).toBeGreaterThan(0);
const firstPlanSampleTime = planSamples[0].time;
const settledPlanSamples = planSamples.filter((sample) => sample.time - firstPlanSampleTime >= 250);
expect(settledPlanSamples.length).toBeGreaterThan(0);
expect(
settledPlanSamples.every(
(sample) =>
sample.planItemTransform === "none" &&
sample.planSectionTransform === "none" &&
sample.planTransform === "none"
)
).toBe(true);
const finalSample = samples.at(-1);
expect(finalSample).toBeDefined();
expect(finalSample).toMatchObject({
planItemTransform: "none",
planSectionTransform: "none",
planTransform: "none",
transform: "none"
});
expect(
Math.abs((finalSample!.scrollHeight - finalSample!.clientHeight) - finalSample!.scrollTop)
Math.abs(finalSample!.scrollHeight - finalSample!.clientHeight - finalSample!.scrollTop)
).toBeLessThanOrEqual(2);
await progressToggle.click();
const expandedProgress = page.getByRole("list", { name: "全部执行进度" });
await expect(expandedProgress.locator("li")).toHaveCount(4);
await expect(page.getByText("正在分析运行上下文", { exact: true }).filter({ visible: true }).first()).toBeVisible();
const expandedLongTitle = expandedProgress.getByText("正在核对降雨过程与汇水区响应关系", { exact: true });
await expect(
page.getByText("正在分析运行上下文", { exact: true }).filter({ visible: true }).first()
).toBeVisible();
const expandedLongTitle = expandedProgress.getByText("正在核对降雨过程与汇水区响应关系", {
exact: true
});
await expect(expandedLongTitle).toHaveCSS("white-space", "normal");
await expect(expandedProgress.locator("li").nth(1)).not.toHaveCSS("height", "48px");
@@ -475,7 +524,10 @@ test("stream completion and the plan card remain positionally stable", async ({
await prompt.fill("验证展开状态在流结束后保持");
await sendButton.click();
const latestProgressToggle = page.getByRole("button", { name: /执行进度/ }).filter({ visible: true }).last();
const latestProgressToggle = page
.getByRole("button", { name: /执行进度/ })
.filter({ visible: true })
.last();
await expect(latestProgressToggle).toContainText("最近 3 条");
triggerProgressAppend();
await expect(
@@ -496,7 +548,8 @@ function createLongMarkdownResponse() {
let content = "## 诊断结果\n\n";
for (let index = 1; index <= 6; index += 1) {
content += `### 区域 ${index}\n\n`;
content += "当前管网运行状态总体稳定，但部分区域存在水位持续升高、流量突变和监测数据缺失。需要结合实时工况核对监测点连续性。\n\n";
content +=
"当前管网运行状态总体稳定，但部分区域存在水位持续升高、流量突变和监测数据缺失。需要结合实时工况核对监测点连续性。\n\n";
content += "- 检查泵站运行状态与实时流量。\n";
content += "- 核对液位计连续性和异常峰值。\n";
content += "- 结合降雨过程判断溢流风险。\n\n";
tests/browser/scada-analysis.e2e.ts
+107 -54
View File
@@ -1,12 +1,14 @@
import { expect, test, type Page } from "playwright/test";
test("frontend actions replace SCADA analysis results and remain legible at 375px", async ({ page }) => {
test("frontend actions replace SCADA analysis results and remain legible at 375px", async ({
page
}) => {
const receipts: Array<Record<string, unknown>> = [];
await mockAgentActions(page, receipts);
await page.goto("/", { waitUntil: "domcontentloaded" });
await page.waitForFunction(() => Boolean(
window.__waterNetworkMap?.getSource("agent-scada-analysis")
));
await page.waitForFunction(() =>
Boolean(window.__waterNetworkMap?.getSource("agent-scada-analysis"))
);
await expect(
page.getByRole("button", { name: "选择 Agent 模型" }).filter({ visible: true }).first()
).toContainText("测试模型");
@@ -23,11 +25,17 @@ test("frontend actions replace SCADA analysis results and remain legible at 375p
});
});
const prompt = page.getByPlaceholder(/输入调度问题/).filter({ visible: true }).first();
const prompt = page
.getByPlaceholder(/输入调度问题/)
.filter({ visible: true })
.first();
await prompt.fill("将 MP01 标为高、MP02 标为低并显示编号");
await page.getByRole("button", { name: "发送 Agent 指令" }).filter({ visible: true }).first().click();
await page
.getByRole("button", { name: "发送 Agent 指令" })
.filter({ visible: true })
.first()
.click();
await expect(page.getByText("已渲染 1 个，高 0、中 0、低 1。")).toBeVisible();
await page.waitForFunction(() => {
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
@@ -73,35 +81,44 @@ test("frontend actions replace SCADA analysis results and remain legible at 375p
levelColors: [
"match",
["get", "analysis_level"],
"high", "#F43F5E",
"medium", "#F59E0B",
"low", "#10B981",
"high",
"#F43F5E",
"medium",
"#F59E0B",
"low",
"#10B981",
"#8B5CF6"
],
indicatorLayer: "circle"
});
await expect.poll(() => receipts.length).toBe(2);
expect(receipts).toEqual(expect.arrayContaining([
expect.objectContaining({ status: "failed", error: expect.objectContaining({ code: "ACTION_SUPERSEDED" }) }),
expect.objectContaining({
status: "succeeded",
output: expect.objectContaining({ rendered_ids: ["MP02"], fitted: true })
})
]));
expect(receipts).toEqual(
expect.arrayContaining([
expect.objectContaining({
status: "failed",
error: expect.objectContaining({ code: "ACTION_SUPERSEDED" })
}),
expect.objectContaining({
status: "succeeded",
output: expect.objectContaining({ rendered_ids: ["MP02"], fitted: true })
})
])
);
await page.setViewportSize({ width: 375, height: 812 });
await page.evaluate(() => window.__waterNetworkMap?.resize());
await expect(page.getByText("已渲染 1 个，高 0、中 0、低 1。")).toBeVisible();
expect(await page.evaluate(() => {
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
};
return {
label: source?._data?.features?.[0]?.properties?.analysis_label,
viewportWidth: document.documentElement.clientWidth
};
})).toEqual({ label: "MP02 · 低", viewportWidth: 375 });
expect(
await page.evaluate(() => {
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
};
return {
label: source?._data?.features?.[0]?.properties?.analysis_label,
viewportWidth: document.documentElement.clientWidth
};
})
).toEqual({ label: "MP02 · 低", viewportWidth: 375 });
await page.setViewportSize({ width: 1440, height: 900 });
await page.getByRole("button", { name: "新建 Agent 对话" }).filter({ visible: true }).click();
@@ -112,9 +129,16 @@ test("frontend actions replace SCADA analysis results and remain legible at 375p
return source?._data?.features?.length === 0;
});
const nextPrompt = page.getByPlaceholder(/输入调度问题/).filter({ visible: true }).first();
const nextPrompt = page
.getByPlaceholder(/输入调度问题/)
.filter({ visible: true })
.first();
await nextPrompt.fill("新一组分析：将 MP01 标为高、MP02 标为低并显示编号");
await page.getByRole("button", { name: "发送 Agent 指令" }).filter({ visible: true }).first().click();
await page
.getByRole("button", { name: "发送 Agent 指令" })
.filter({ visible: true })
.first()
.click();
await page.waitForFunction(() => {
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
@@ -123,12 +147,14 @@ test("frontend actions replace SCADA analysis results and remain legible at 375p
return features.length === 1 && features[0].properties?.analysis_label === "MP02 · 低";
});
await page.waitForTimeout(250);
expect(await page.evaluate(() => {
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
};
return source?._data?.features?.map((feature) => feature.properties?.analysis_label);
})).toEqual(["MP02 · 低"]);
expect(
await page.evaluate(() => {
const source = window.__waterNetworkMap?.getSource("agent-scada-analysis") as unknown as {
_data?: { features?: Array<{ properties?: Record<string, unknown> }> };
};
return source?._data?.features?.map((feature) => feature.properties?.analysis_label);
})
).toEqual(["MP02 · 低"]);
await expect.poll(() => receipts.length).toBe(4);
});
@@ -142,11 +168,16 @@ async function mockAgentActions(page: Page, receipts: Array<Record<string, unkno
await route.fulfill({
json: {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: { type: "Point", coordinates: sensorId === "MP01" ? [120.7, 28] : [120.72, 28.02] },
properties: { sensor_id: sensorId }
}]
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: sensorId === "MP01" ? [120.7, 28] : [120.72, 28.02]
},
properties: { sensor_id: sensorId }
}
]
}
});
});
@@ -160,20 +191,26 @@ async function mockAgentActions(page: Page, receipts: Array<Record<string, unkno
return;
}
if (path.endsWith("/frontend-action-registry")) {
await route.fulfill({ json: {
schema_version: "frontend-action-registry@1",
actions: [
{ id: "render_scada_analysis", version: "frontend-action@1" },
{ id: "clear_scada_analysis", version: "frontend-action@1" }
]
} });
await route.fulfill({
json: {
schema_version: "frontend-action-registry@1",
actions: [
{ id: "render_scada_analysis", version: "frontend-action@1" },
{ id: "clear_scada_analysis", version: "frontend-action@1" }
]
}
});
return;
}
if (path.endsWith("/models")) {
await route.fulfill({ json: {
default_model: "test/model",
models: [{ id: "test/model", label: "测试模型", description: "SCADA 动作测试", icon: "bolt" }]
} });
await route.fulfill({
json: {
default_model: "test/model",
models: [
{ id: "test/model", label: "测试模型", description: "SCADA 动作测试", icon: "bolt" }
]
}
});
return;
}
if (path.endsWith("/sessions")) {
@@ -181,7 +218,9 @@ async function mockAgentActions(page: Page, receipts: Array<Record<string, unkno
return;
}
if (path.endsWith("/ui-registry")) {
await route.fulfill({ json: { schema_version: "agent-ui-registry@1", components: [], actions: [] } });
await route.fulfill({
json: { schema_version: "agent-ui-registry@1", components: [], actions: [] }
});
return;
}
if (path.endsWith("/stream") && route.request().method() === "POST") {
@@ -190,8 +229,22 @@ async function mockAgentActions(page: Page, receipts: Array<Record<string, unkno
const sessionId = `scada-session-${streamRequestCount}`;
const chunks = [
{ type: "start", messageId: `assistant-scada-action-${streamRequestCount}` },
frontendActionChunk(`action-${streamRequestCount}-first`, `call-${streamRequestCount}-first`, sessionId, "MP01", "high", now),
frontendActionChunk(`action-${streamRequestCount}-second`, `call-${streamRequestCount}-second`, sessionId, "MP02", "low", now),
frontendActionChunk(
`action-${streamRequestCount}-first`,
`call-${streamRequestCount}-first`,
sessionId,
"MP01",
"high",
now
),
frontendActionChunk(
`action-${streamRequestCount}-second`,
`call-${streamRequestCount}-second`,
sessionId,
"MP02",
"low",
now
),
{ type: "text-start", id: "answer" },
{ type: "text-delta", id: "answer", delta: "已更新地图结果。" },
{ type: "text-end", id: "answer" },