fix: distinguish awaiting work order replies

This commit is contained in:
2026-07-27 14:58:29 +08:00
parent f8c79a2af3
commit ade88b4fbf
9 changed files with 143 additions and 49 deletions
@@ -86,6 +86,7 @@ type ExecutionStep = {
title: string; title: string;
description: string; description: string;
status: ExecutionStepStatus; status: ExecutionStepStatus;
statusLabel?: string;
meta?: ExecutionStepMeta[]; meta?: ExecutionStepMeta[];
}; };
@@ -274,7 +275,7 @@ function WorkOrderDetailPanel({ condition }: { condition: ScheduledWorkOrderItem
icon={CalendarClock} icon={CalendarClock}
title={currentStage ? `当前阶段:${currentStage.title}` : "工单流转"} title={currentStage ? `当前阶段:${currentStage.title}` : "工单流转"}
value={condition.recommendation ?? "按派发、执行、复令三阶段跟踪现场处置闭环。"} value={condition.recommendation ?? "按派发、执行、复令三阶段跟踪现场处置闭环。"}
actionLabel={currentStage?.id === "reply" ? "待复令" : "跟踪工单"} actionLabel={currentStage?.id === "reply" ? "待复令" : "跟踪工单"}
actionDisabled actionDisabled
actionTitle="工单流程由调度和现场班组流转" actionTitle="工单流程由调度和现场班组流转"
/> />
@@ -1063,7 +1064,7 @@ function TaskExecutionStepRow({
<span className="flex min-w-0 flex-wrap items-center justify-between gap-2"> <span className="flex min-w-0 flex-wrap items-center justify-between gap-2">
<span className="text-xs font-semibold text-slate-900">{step.title}</span> <span className="text-xs font-semibold text-slate-900">{step.title}</span>
<span className={cn("rounded-full border px-1.5 py-0.5 text-xs font-semibold leading-4", getTaskExecutionStepStatusClassName(step.status))}> <span className={cn("rounded-full border px-1.5 py-0.5 text-xs font-semibold leading-4", getTaskExecutionStepStatusClassName(step.status))}>
{getTaskExecutionStepStatusLabel(step.status)} {step.statusLabel ?? getTaskExecutionStepStatusLabel(step.status)}
</span> </span>
</span> </span>
{step.meta?.length ? ( {step.meta?.length ? (
@@ -1085,23 +1086,28 @@ function TaskExecutionStepRow({
function WorkOrderLifecyclePanel({ condition }: { condition: ScheduledWorkOrderItem }) { function WorkOrderLifecyclePanel({ condition }: { condition: ScheduledWorkOrderItem }) {
const duration = formatDuration(condition.durationMinutes, condition.status); const duration = formatDuration(condition.durationMinutes, condition.status);
const currentStage = getWorkOrderCurrentStage(condition); const currentStage = getWorkOrderCurrentStage(condition);
const steps = condition.stages.map((stage) => ({ const steps = condition.stages.map((stage) => {
id: stage.id, const awaitingReply = stage.id === "reply" && stage.status === "current";
title: stage.title,
status: stage.status, return {
description: stage.description, id: stage.id,
meta: [ title: stage.title,
{ label: "责任人", value: stage.owner }, status: awaitingReply ? ("confirmation" as const) : stage.status,
{ label: "时间", value: stage.timeLabel } statusLabel: awaitingReply ? "待复令" : undefined,
] description: stage.description,
})); meta: [
{ label: "责任人", value: stage.owner },
{ label: "时间", value: stage.timeLabel }
]
};
});
return ( return (
<TaskExecutionPanel <TaskExecutionPanel
icon={ClipboardList} icon={ClipboardList}
title="任务执行" title="任务执行"
badge={currentStage ? currentStage.title : condition.code} badge={currentStage ? currentStage.title : condition.code}
badgeTone={currentStage?.id === "reply" ? "completed" : currentStage?.id === "execution" ? "active" : "pending"} badgeTone={currentStage?.id === "reply" ? "confirmation" : currentStage?.id === "execution" ? "active" : "pending"}
summary={condition.detail ?? condition.summary} summary={condition.detail ?? condition.summary}
meta={[ meta={[
{ label: "来源", value: condition.source }, { label: "来源", value: condition.source },
@@ -7,49 +7,60 @@ import {
} from "lucide-react"; } from "lucide-react";
import type { import type {
ScheduledConditionItem, ScheduledConditionItem,
ScheduledConditionStatus, ScheduledConditionItemStatus,
ScheduledWorkOrderItem, ScheduledWorkOrderItem,
ScheduledWorkOrderStage ScheduledWorkOrderStage
} from "../types"; } from "../types";
export const CONDITION_FILTER_ALL = "__all__"; export const CONDITION_FILTER_ALL = "__all__";
export const statusLabels: Record<ScheduledConditionStatus, string> = { export const statusLabels: Record<ScheduledConditionItemStatus, string> = {
completed: "完成", completed: "完成",
running: "执行中", running: "执行中",
awaiting_reply: "待复令",
warning: "关注", warning: "关注",
error: "异常", error: "异常",
pending: "预约" pending: "预约"
}; };
export const statusClassNames: Record<ScheduledConditionStatus, string> = { export const statusClassNames: Record<ScheduledConditionItemStatus, string> = {
completed: "border-green-100 bg-green-50 text-green-700", completed: "border-green-100 bg-green-50 text-green-700",
running: "border-blue-100 bg-blue-50 text-blue-700", running: "border-blue-100 bg-blue-50 text-blue-700",
awaiting_reply: "border-orange-100 bg-orange-50 text-orange-700",
warning: "border-orange-100 bg-orange-50 text-orange-700", warning: "border-orange-100 bg-orange-50 text-orange-700",
error: "border-red-100 bg-red-50 text-red-700", error: "border-red-100 bg-red-50 text-red-700",
pending: "border-slate-200 bg-slate-100 text-slate-600" pending: "border-slate-200 bg-slate-100 text-slate-600"
}; };
const statusIcons: Record<ScheduledConditionStatus, typeof CheckCircle2> = { const statusIcons: Record<ScheduledConditionItemStatus, typeof CheckCircle2> = {
completed: CheckCircle2, completed: CheckCircle2,
running: Loader2, running: Loader2,
awaiting_reply: Clock3,
warning: AlertTriangle, warning: AlertTriangle,
error: XCircle, error: XCircle,
pending: Clock3 pending: Clock3
}; };
const statusIconClassNames: Record<ScheduledConditionStatus, string> = { const statusIconClassNames: Record<ScheduledConditionItemStatus, string> = {
completed: "bg-green-50 text-green-700", completed: "bg-green-50 text-green-700",
running: "bg-blue-50 text-blue-700", running: "bg-blue-50 text-blue-700",
awaiting_reply: "bg-orange-50 text-orange-700",
warning: "bg-orange-50 text-orange-700", warning: "bg-orange-50 text-orange-700",
error: "bg-red-50 text-red-700", error: "bg-red-50 text-red-700",
pending: "bg-slate-100 text-slate-600" pending: "bg-slate-100 text-slate-600"
}; };
const conditionStatusOrder: ScheduledConditionStatus[] = ["running", "warning", "error", "completed", "pending"]; const conditionStatusOrder: ScheduledConditionItemStatus[] = [
"running",
"awaiting_reply",
"warning",
"error",
"completed",
"pending"
];
export type ConditionTaskFilterValue = typeof CONDITION_FILTER_ALL | string; export type ConditionTaskFilterValue = typeof CONDITION_FILTER_ALL | string;
export type ConditionStatusFilterValue = typeof CONDITION_FILTER_ALL | ScheduledConditionStatus; export type ConditionStatusFilterValue = typeof CONDITION_FILTER_ALL | ScheduledConditionItemStatus;
export type ConditionTaskFilterOption = { export type ConditionTaskFilterOption = {
value: ConditionTaskFilterValue; value: ConditionTaskFilterValue;
@@ -58,7 +69,7 @@ export type ConditionTaskFilterOption = {
}; };
export type ConditionStatusFilterOption = { export type ConditionStatusFilterOption = {
value: ScheduledConditionStatus; value: ScheduledConditionItemStatus;
label: string; label: string;
count: number; count: number;
}; };
@@ -88,7 +99,7 @@ export function createTaskFilterOptions(conditions: ScheduledConditionItem[]): C
} }
export function createStatusFilterOptions(conditions: ScheduledConditionItem[]): ConditionStatusFilterOption[] { export function createStatusFilterOptions(conditions: ScheduledConditionItem[]): ConditionStatusFilterOption[] {
const statusCounts = new Map<ScheduledConditionStatus, number>(); const statusCounts = new Map<ScheduledConditionItemStatus, number>();
conditions.forEach((condition) => { conditions.forEach((condition) => {
statusCounts.set(condition.status, (statusCounts.get(condition.status) ?? 0) + 1); statusCounts.set(condition.status, (statusCounts.get(condition.status) ?? 0) + 1);
@@ -121,7 +132,7 @@ export function formatTimeRange(value: string, durationMinutes: number | undefin
return `${startTime} - ${endTime}`; return `${startTime} - ${endTime}`;
} }
export function formatDuration(durationMinutes: number | undefined, status: ScheduledConditionStatus) { export function formatDuration(durationMinutes: number | undefined, status: ScheduledConditionItemStatus) {
if (status === "running") { if (status === "running") {
return "执行中"; return "执行中";
} }
@@ -160,16 +171,16 @@ export function getWorkOrderStagePillClassName(stageId?: ScheduledWorkOrderStage
} }
if (stageId === "reply") { if (stageId === "reply") {
return "border-green-100 bg-green-50 text-green-700"; return "border-orange-100 bg-orange-50 text-orange-700";
} }
return "border-indigo-100 bg-indigo-50 text-indigo-700"; return "border-indigo-100 bg-indigo-50 text-indigo-700";
} }
export function getStatusIcon(status: ScheduledConditionStatus) { export function getStatusIcon(status: ScheduledConditionItemStatus) {
return statusIcons[status]; return statusIcons[status];
} }
export function getStatusIconClassName(status: ScheduledConditionStatus) { export function getStatusIconClassName(status: ScheduledConditionItemStatus) {
return statusIconClassNames[status]; return statusIconClassNames[status];
} }
@@ -478,7 +478,7 @@ function ConditionTimelinePanel({
onResetFilters={onResetFilters} onResetFilters={onResetFilters}
/> />
) : null} ) : null}
{expanded && !loading && futureWorkOrders.length > 0 ? ( {(expanded || presentation === "mobile-sheet") && !loading && futureWorkOrders.length > 0 ? (
<section className="mb-2"> <section className="mb-2">
<ConditionGroupHeader <ConditionGroupHeader
icon={ClipboardList} icon={ClipboardList}
@@ -28,4 +28,20 @@ describe("createOperationalScheduledConditions", () => {
expect(currentCondition?.status).toBe("running"); expect(currentCondition?.status).toBe("running");
expect(currentCondition?.durationMinutes).toBe(5); expect(currentCondition?.durationMinutes).toBe(5);
}); });
it("moves completed field work into a waiting-for-reply state", () => {
const conditions = createOperationalScheduledConditions(new Date("2026-07-07T10:40:00+08:00"));
const awaitingReplyWorkOrder = conditions.find(
(condition) =>
condition.kind === "work_order" &&
condition.stages.some((stage) => stage.id === "reply" && stage.status === "current")
);
expect(awaitingReplyWorkOrder?.status).toBe("awaiting_reply");
expect(
awaitingReplyWorkOrder?.kind === "work_order"
? awaitingReplyWorkOrder.stages.find((stage) => stage.id === "reply")?.title
: undefined
).toBe("待复令");
});
}); });
@@ -5,7 +5,8 @@ import type {
ScheduledConditionReport, ScheduledConditionReport,
ScheduledConditionRiskLevel, ScheduledConditionRiskLevel,
ScheduledConditionStatus, ScheduledConditionStatus,
ScheduledConditionTaskId ScheduledConditionTaskId,
ScheduledWorkOrderStatus
} from "../types"; } from "../types";
export const SCHEDULED_CONDITION_REFRESH_INTERVAL_MS = 5_000; export const SCHEDULED_CONDITION_REFRESH_INTERVAL_MS = 5_000;
@@ -16,6 +17,7 @@ const MODEL_NAME = "DrainFlow Realtime Simulator";
const GUARANTEED_RUNNING_TASK_ID: ConditionTaskId = "scada-diagnosis"; const GUARANTEED_RUNNING_TASK_ID: ConditionTaskId = "scada-diagnosis";
type ConditionTaskId = ScheduledConditionTaskId; type ConditionTaskId = ScheduledConditionTaskId;
type WorkOrderPhase = "dispatch" | "execution" | "reply";
type ConditionTaskDefinition = { type ConditionTaskDefinition = {
id: ConditionTaskId; id: ConditionTaskId;
@@ -332,6 +334,7 @@ function createUpcomingWorkOrders(now: Date, currentMinutesOfDay: number): Sched
.map((workOrder) => { .map((workOrder) => {
const scheduledAtDate = setMinutesOfDay(now, workOrder.startMinute); const scheduledAtDate = setMinutesOfDay(now, workOrder.startMinute);
const replyDeadlineMinute = workOrder.startMinute + workOrder.durationMinutes + workOrder.replyWindowMinutes; const replyDeadlineMinute = workOrder.startMinute + workOrder.durationMinutes + workOrder.replyWindowMinutes;
const phase = getWorkOrderPhase(workOrder, currentMinutesOfDay);
return { return {
id: `manual-work-order-${workOrder.id}-${formatCompactLocalTime(scheduledAtDate)}`, id: `manual-work-order-${workOrder.id}-${formatCompactLocalTime(scheduledAtDate)}`,
@@ -340,7 +343,7 @@ function createUpcomingWorkOrders(now: Date, currentMinutesOfDay: number): Sched
scheduledAt: formatLocalIsoWithOffset(scheduledAtDate), scheduledAt: formatLocalIsoWithOffset(scheduledAtDate),
title: workOrder.title, title: workOrder.title,
summary: workOrder.summary, summary: workOrder.summary,
status: currentMinutesOfDay < workOrder.startMinute ? ("pending" as const) : ("running" as const), status: getWorkOrderStatus(phase),
riskLevel: workOrder.riskLevel, riskLevel: workOrder.riskLevel,
updatedAt: now.getTime(), updatedAt: now.getTime(),
detail: workOrder.detail, detail: workOrder.detail,
@@ -352,7 +355,7 @@ function createUpcomingWorkOrders(now: Date, currentMinutesOfDay: number): Sched
assignee: workOrder.assignee, assignee: workOrder.assignee,
priority: workOrder.priority, priority: workOrder.priority,
replyWindowMinutes: workOrder.replyWindowMinutes, replyWindowMinutes: workOrder.replyWindowMinutes,
stages: createWorkOrderStages(workOrder, now, scheduledAtDate, currentMinutesOfDay), stages: createWorkOrderStages(workOrder, now, scheduledAtDate, phase),
replyRequirements: replyRequirements:
currentMinutesOfDay > replyDeadlineMinute currentMinutesOfDay > replyDeadlineMinute
? [] ? []
@@ -385,11 +388,38 @@ function getMockWorkOrderStartMinute(template: MockWorkOrderTemplate, currentMin
return currentMinutesOfDay - template.durationMinutes - Math.min(10, template.replyWindowMinutes - 5); return currentMinutesOfDay - template.durationMinutes - Math.min(10, template.replyWindowMinutes - 5);
} }
function getWorkOrderPhase(
workOrder: ManualWorkOrderDefinition,
currentMinutesOfDay: number
): WorkOrderPhase {
if (currentMinutesOfDay < workOrder.startMinute) {
return "dispatch";
}
if (currentMinutesOfDay < workOrder.startMinute + workOrder.durationMinutes) {
return "execution";
}
return "reply";
}
function getWorkOrderStatus(phase: WorkOrderPhase): ScheduledWorkOrderStatus {
if (phase === "dispatch") {
return "pending";
}
if (phase === "execution") {
return "running";
}
return "awaiting_reply";
}
function createWorkOrderStages( function createWorkOrderStages(
workOrder: ManualWorkOrderDefinition, workOrder: ManualWorkOrderDefinition,
now: Date, now: Date,
scheduledAtDate: Date, scheduledAtDate: Date,
currentMinutesOfDay: number phase: WorkOrderPhase
) { ) {
const dispatchAt = setMinutesOfDay(now, Math.max(0, workOrder.startMinute - workOrder.dispatchLeadMinutes)); const dispatchAt = setMinutesOfDay(now, Math.max(0, workOrder.startMinute - workOrder.dispatchLeadMinutes));
const executionEnd = setMinutesOfDay(now, workOrder.startMinute + workOrder.durationMinutes); const executionEnd = setMinutesOfDay(now, workOrder.startMinute + workOrder.durationMinutes);
@@ -397,13 +427,11 @@ function createWorkOrderStages(
now, now,
workOrder.startMinute + workOrder.durationMinutes + workOrder.replyWindowMinutes workOrder.startMinute + workOrder.durationMinutes + workOrder.replyWindowMinutes
); );
const executionEndMinute = workOrder.startMinute + workOrder.durationMinutes;
return [ return [
{ {
id: "dispatch" as const, id: "dispatch" as const,
title: "派发", title: "派发",
status: currentMinutesOfDay >= workOrder.startMinute ? ("done" as const) : ("current" as const), status: phase === "dispatch" ? ("current" as const) : ("done" as const),
owner: workOrder.dispatcher, owner: workOrder.dispatcher,
timeLabel: formatClock(dispatchAt), timeLabel: formatClock(dispatchAt),
description: `确认${workOrder.location}任务范围、优先级和到场窗口,派发给${workOrder.assignee}` description: `确认${workOrder.location}任务范围、优先级和到场窗口,派发给${workOrder.assignee}`
@@ -412,22 +440,19 @@ function createWorkOrderStages(
id: "execution" as const, id: "execution" as const,
title: "执行", title: "执行",
status: status:
currentMinutesOfDay >= executionEndMinute phase === "dispatch"
? ("done" as const) ? ("pending" as const)
: currentMinutesOfDay >= workOrder.startMinute : phase === "execution"
? ("current" as const) ? ("current" as const)
: ("pending" as const), : ("done" as const),
owner: workOrder.assignee, owner: workOrder.assignee,
timeLabel: formatClockRange(scheduledAtDate, workOrder.durationMinutes), timeLabel: formatClockRange(scheduledAtDate, workOrder.durationMinutes),
description: workOrder.summary description: workOrder.summary
}, },
{ {
id: "reply" as const, id: "reply" as const,
title: "复令", title: "复令",
status: status: phase === "reply" ? ("current" as const) : ("pending" as const),
currentMinutesOfDay >= executionEndMinute
? ("current" as const)
: ("pending" as const),
owner: `${workOrder.assignee} → 调度中心`, owner: `${workOrder.assignee} → 调度中心`,
timeLabel: formatClockRange(executionEnd, workOrder.replyWindowMinutes), timeLabel: formatClockRange(executionEnd, workOrder.replyWindowMinutes),
description: `提交处置结果、现场照片和影响复核,最迟 ${formatClock(replyEnd)} 前完成复令。` description: `提交处置结果、现场照片和影响复核,最迟 ${formatClock(replyEnd)} 前完成复令。`
+8 -4
View File
@@ -32,6 +32,10 @@ export type WorkbenchUser = {
export type ScheduledConditionStatus = "pending" | "running" | "completed" | "warning" | "error"; export type ScheduledConditionStatus = "pending" | "running" | "completed" | "warning" | "error";
export type ScheduledWorkOrderStatus = "pending" | "running" | "awaiting_reply";
export type ScheduledConditionItemStatus = ScheduledConditionStatus | ScheduledWorkOrderStatus;
export type ScheduledConditionRiskLevel = "normal" | "attention" | "critical"; export type ScheduledConditionRiskLevel = "normal" | "attention" | "critical";
export type ScheduledConditionTaskId = "scada-diagnosis" | "smart-dispatch" | "pump-energy" | "network-simulation"; export type ScheduledConditionTaskId = "scada-diagnosis" | "smart-dispatch" | "pump-energy" | "network-simulation";
@@ -71,12 +75,12 @@ export type ScheduledConditionReport = {
}[]; }[];
}; };
type ScheduledConditionBase = { type ScheduledConditionBase<TStatus extends ScheduledConditionItemStatus> = {
id: string; id: string;
scheduledAt: string; scheduledAt: string;
title: string; title: string;
summary: string; summary: string;
status: ScheduledConditionStatus; status: TStatus;
riskLevel: ScheduledConditionRiskLevel; riskLevel: ScheduledConditionRiskLevel;
updatedAt: number; updatedAt: number;
detail?: string; detail?: string;
@@ -84,7 +88,7 @@ type ScheduledConditionBase = {
durationMinutes?: number; durationMinutes?: number;
}; };
export type ScheduledConditionRecord = ScheduledConditionBase & { export type ScheduledConditionRecord = ScheduledConditionBase<ScheduledConditionStatus> & {
kind: "condition"; kind: "condition";
taskId: ScheduledConditionTaskId; taskId: ScheduledConditionTaskId;
sessionId: string; sessionId: string;
@@ -95,7 +99,7 @@ export type ScheduledConditionRecord = ScheduledConditionBase & {
report?: ScheduledConditionReport; report?: ScheduledConditionReport;
}; };
export type ScheduledWorkOrderItem = ScheduledConditionBase & { export type ScheduledWorkOrderItem = ScheduledConditionBase<ScheduledWorkOrderStatus> & {
kind: "work_order"; kind: "work_order";
code: string; code: string;
source: string; source: string;
@@ -1,11 +1,12 @@
import { getRunningWorkflowDefinition } from "../data/running-workflows"; import { getRunningWorkflowDefinition } from "../data/running-workflows";
import type { ScheduledConditionItem, ScheduledConditionStatus, WorkbenchAlert } from "../types"; import type { ScheduledConditionItem, ScheduledConditionItemStatus, WorkbenchAlert } from "../types";
const SCHEDULED_CONDITION_ALERT_ID_PREFIX = "scheduled-condition-alert-"; const SCHEDULED_CONDITION_ALERT_ID_PREFIX = "scheduled-condition-alert-";
const statusLabels: Record<ScheduledConditionStatus, string> = { const statusLabels: Record<ScheduledConditionItemStatus, string> = {
completed: "完成", completed: "完成",
running: "执行中", running: "执行中",
awaiting_reply: "待复令",
warning: "关注", warning: "关注",
error: "异常", error: "异常",
pending: "预约" pending: "预约"
@@ -128,6 +128,19 @@ test.describe("mobile workbench sheet", () => {
await expect(sheet.getByRole("button", { name: "收起工况任务" })).toBeVisible(); await expect(sheet.getByRole("button", { name: "收起工况任务" })).toBeVisible();
}); });
test("keeps the waiting-for-reply state readable in the narrow sheet", async ({ page }) => {
await page.goto("/", { waitUntil: "domcontentloaded" });
await page.getByRole("button", { name: "打开工况任务" }).click();
const sheet = page.getByRole("region", { name: "工况任务抽屉" });
const awaitingReplyWorkOrder = sheet
.locator('button[aria-pressed]')
.filter({ hasText: "系统工单:泵站边界复核复令" });
await expect(awaitingReplyWorkOrder.getByText("待复令", { exact: true })).toBeVisible();
await awaitingReplyWorkOrder.click();
await expect(sheet.getByText("当前阶段:待复令", { exact: true })).toBeVisible();
});
test("clears mobile sheet state when crossing into the desktop layout", async ({ page }) => { test("clears mobile sheet state when crossing into the desktop layout", async ({ page }) => {
await page.goto("/", { waitUntil: "domcontentloaded" }); await page.goto("/", { waitUntil: "domcontentloaded" });
await page.getByRole("button", { name: "打开 Agent 面板" }).click(); await page.getByRole("button", { name: "打开 Agent 面板" }).click();
@@ -82,6 +82,24 @@ test("narrow desktop keeps Agent and expanded conditions from overlapping", asyn
await expect(agentPanel).toBeVisible(); await expect(agentPanel).toBeVisible();
}); });
test("shows completed field work as a static waiting-for-reply state", async ({ page }) => {
await page.goto("/", { waitUntil: "domcontentloaded" });
const panel = page.getByRole("region", { name: "工况任务", exact: true });
await panel.getByRole("button", { name: "展开工况任务" }).click();
const awaitingReplyWorkOrder = panel
.getByTestId("scheduled-condition-timeline")
.locator('button[aria-pressed]')
.filter({ hasText: "系统工单:泵站边界复核复令" });
await expect(awaitingReplyWorkOrder.getByText("待复令", { exact: true })).toBeVisible();
await expect(awaitingReplyWorkOrder.locator(".animate-spin")).toHaveCount(0);
await expect(awaitingReplyWorkOrder.locator(".bg-orange-50")).toBeVisible();
await awaitingReplyWorkOrder.click();
await expect(panel.getByText("当前阶段:待复令", { exact: true })).toBeVisible();
});
async function expectAcrylicComposition(panel: Locator) { async function expectAcrylicComposition(panel: Locator) {
const composition = await panel.evaluate((element) => { const composition = await panel.evaluate((element) => {
const rootStyle = getComputedStyle(element); const rootStyle = getComputedStyle(element);