diff --git a/calliope-web/src/lib/components/ToastHost.svelte b/calliope-web/src/lib/components/ToastHost.svelte index 3b78c0c8..bb9cd6b2 100644 --- a/calliope-web/src/lib/components/ToastHost.svelte +++ b/calliope-web/src/lib/components/ToastHost.svelte @@ -61,7 +61,7 @@ .toast-host { position: fixed; right: 24px; - bottom: 24px; + bottom: var(--toast-bottom, 24px); /* Above every overlay, incl. the 10000 lightbox, so feedback stays visible. */ z-index: 10001; display: flex; diff --git a/calliope-web/src/lib/components/generate/Composer.svelte b/calliope-web/src/lib/components/generate/Composer.svelte index f609e4a5..8cc4eda2 100644 --- a/calliope-web/src/lib/components/generate/Composer.svelte +++ b/calliope-web/src/lib/components/generate/Composer.svelte @@ -165,6 +165,7 @@

2 · 准备这次创作

{#if hasSlots && !dock}
+ import { resolve } from "$app/paths"; + import { assetUrl } from "$lib/api"; + import { shotApi, type Capture } from "$lib/shot/api"; + import Modal from "$lib/components/ui/Modal.svelte"; + import { toast } from "$lib/toast"; + + let { + open = $bindable(false), + onPick, + }: { open?: boolean; onPick: (path: string) => void } = $props(); + let compositions = $state>([]); + let compositionId = $state(""); + let captures = $state([]); + let loading = $state(false); + let request = 0; + $effect(() => { + if (!open) { + request++; + return; + } + const version = ++request; + loading = true; + shotApi + .listCompositions() + .then((rows) => { + if (version !== request) return; + compositions = rows; + compositionId = rows.length ? String(rows[0].id) : ""; + }) + .catch((error) => toast.error(String(error))) + .finally(() => { + if (version === request) loading = false; + }); + }); + $effect(() => { + if (!open || !compositionId) { + captures = []; + return; + } + const id = Number(compositionId); + let active = true; + captures = []; + shotApi.listCaptures(id).then((rows) => { + if (active) + captures = rows.filter((c) => c.kind === "image" && c.file_path); + }); + return () => { + active = false; + }; + }); + + + +

选择已保存的搭景截图，填入当前工作流声明的图片槽。

+ 打开三维搭景 + {#if loading}

正在读取截图…

{:else if !compositions.length}

+ 暂无搭景，请先保存截图。 +

{:else} + +
+ {#each captures as capture (capture.id)}{:else}

该场景暂无图片截图。

{/each} +
{/if} + + + diff --git a/calliope-web/src/lib/components/generate/SlotTray.svelte b/calliope-web/src/lib/components/generate/SlotTray.svelte index fe67eb77..339296f2 100644 --- a/calliope-web/src/lib/components/generate/SlotTray.svelte +++ b/calliope-web/src/lib/components/generate/SlotTray.svelte @@ -1,4 +1,5 @@ + {#if ds.slots.length || ds.lists.length}
@@ -169,6 +199,7 @@ anchorId={`slot-${s.inp.nodeId}`} onFile={(f) => slotFile(s, f)} onFromResults={() => onFromResults(s.inp.nodeId)} + onFromScene={allowScene && s.mediaKind === "image" && !s.mask ? () => { sceneNode = s.inp.nodeId; sceneOpen = true; } : undefined} onClear={() => { setRejects(s.inp.nodeId, []); onSet(s.inp.nodeId, ''); @@ -193,6 +224,7 @@ onReplace={(i, file) => groupReplace(entry, i, file)} onRemove={(i) => onSet(entry.nodeId, listPaths(values, entry).filter((_, j) => j !== i))} onDismissReject={(i) => setRejects(entry.nodeId, (rejects[entry.nodeId] ?? []).filter((_, j) => j !== i))} + onFromScene={allowScene && entry.kind === "image_list" ? () => { sceneNode = entry.nodeId; sceneOpen = true; } : undefined} onFromResults={entry.kind === 'image_list' ? () => onFromResults(entry.nodeId) : undefined} /> {/each} diff --git a/calliope-web/src/lib/components/home/AProjectCard.svelte b/calliope-web/src/lib/components/home/AProjectCard.svelte index 23f003df..2ee181f5 100644 --- a/calliope-web/src/lib/components/home/AProjectCard.svelte +++ b/calliope-web/src/lib/components/home/AProjectCard.svelte @@ -1,646 +1,467 @@
- + - {#if menuOpen} - - {/if} -
+ + + 阶段 {Math.min(5, stats.stage_confirmed + 1)}/5 + {updatedLabel} + + + + +
+ + {#if menuOpen} + + {/if} +
- -
{ - e.preventDefault(); - submitRename(); - }} - > - -
- {#snippet footer()} - - - {/snippet} + +
{ + e.preventDefault(); + submitRename(); + }} + > + +
+ {#snippet footer()} + + + {/snippet} $deleteMutation.mutate()} + bind:open={deleteOpen} + title={t("projectCard.deleteTitle")} + message={t("projectCard.deleteMessage", { title: project.title })} + confirmLabel={t("common.delete")} + danger + onconfirm={() => $deleteMutation.mutate()} /> diff --git a/calliope-web/src/lib/components/shell/AppShell.svelte b/calliope-web/src/lib/components/shell/AppShell.svelte index 9857b385..cbc210ae 100644 --- a/calliope-web/src/lib/components/shell/AppShell.svelte +++ b/calliope-web/src/lib/components/shell/AppShell.svelte @@ -22,7 +22,7 @@ * real queue and connection status. Individual tools keep their routes. */ interface Props { workspace?: boolean; - pageHeader?: import("svelte").Snippet; + pageHeader?: import("svelte").Snippet<[{ openSearch: () => void }]>; active: NavId; title: string; subtitle?: string; @@ -282,7 +282,7 @@ class="app-body" style:background={pageHeader ? "var(--manage-page-background)" : undefined} > - {#if pageHeader}{@render pageHeader()}{:else} + {#if pageHeader}{@render pageHeader({ openSearch: openPalette })}{:else}
{currentNav?.label ?? title}/ void; onFromResults?: () => void; + onFromScene?: () => void; onClear: () => void; } @@ -48,6 +49,7 @@ anchorId, onFile, onFromResults, + onFromScene, onClear, }: Props = $props(); @@ -108,6 +110,7 @@ {label} {#if required}{/if} {#if hint}{hint}{/if} + {#if onFromScene}{/if} {#if allowFromResults && onFromResults} {/if} {#if allowFromResults && onFromResults && remaining > 0} +

+
+ {:else} +
+ +
+
+ {#if currentStage?.error || (currentStage?.last_run?.status === "failed" && currentStage?.last_run?.error)}
+ {currentStage.last_run?.error ?? currentStage.error} +
{/if} + {#if stageStatus === "awaiting_confirm"}
+ {currentAgent?.name ?? STAGE_LABEL[stageKey] + "助手"}交回了本阶段草稿。确认后才会交给下一阶段使用。 +
{/if} + {#if stageStatus === "running"}
+ {t("workbench.runningHint", { + agent: agentName(stageKey), + })} +
{/if} +
+ {#if panelProps} +
+ {#if currentStage?.assistant_note || noteOpen}
+ 助手建议 · 待整理到阶段内容 + {#if noteOpen} +
+ +
+ {:else}

{currentStage?.assistant_note}

+ {/if} +
{/if} + {#if stageKey === "script"} + + $saveMutation.mutate({ key: "script", content })} + onImport={(text) => $importMutation.mutate(text)} + onRun={() => handleRun("script")} + /> + {:else if stageKey === "style"} + + $saveMutation.mutate({ key: "style", content })} + onRun={() => handleRun("style")} + /> + {:else if stageKey === "storyboard"} + + $saveMutation.mutate({ key: "storyboard", content })} + onRun={() => handleRun("storyboard")} + /> + {:else if stageKey === "assets"} + + $saveMutation.mutate({ key: "assets", content })} + onRun={() => handleRun("assets")} + {onGenerate} + onRetryJob={(jobId) => $retryMutation.mutate(jobId)} + /> + {:else} + + $saveMutation.mutate({ key: "shot", content })} + onRun={() => handleRun("shot")} + {onGenerate} + onRetryJob={(jobId) => $retryMutation.mutate(jobId)} + /> + {/if} +
+ {/if} +
+
+ +
+
+ {t(STATUS_LABEL[stageStatus])}{currentStage?.draft_edited + ? "已编辑 · 草稿待确认" + : "确认后才会交给下一阶段使用"} +
+
{/if} + +
+
+

已确认版

+ 
{JSON.stringify(currentStage?.confirmed_content, null, 2)}
+
+
+

当前草稿

+ 
{JSON.stringify(currentStage?.content, null, 2)}
+
+
+ diff --git a/calliope-web/src/lib/components/workbench/ScriptStagePanel.svelte b/calliope-web/src/lib/components/workbench/ScriptStagePanel.svelte index cefbb3ff..5a6e693e 100644 --- a/calliope-web/src/lib/components/workbench/ScriptStagePanel.svelte +++ b/calliope-web/src/lib/components/workbench/ScriptStagePanel.svelte @@ -46,6 +46,12 @@ importOpen = false; importText = ''; } + + export function saveDraft() { + if (editing) save(); + else if (stage.content) onSave?.(stage.content); + } + export function hasUnsavedDraft() { return editing; } {#if stage.status === 'todo' && !text} diff --git a/calliope-web/src/lib/components/workbench/ShotStagePanel.svelte b/calliope-web/src/lib/components/workbench/ShotStagePanel.svelte index 88499fec..1baab054 100644 --- a/calliope-web/src/lib/components/workbench/ShotStagePanel.svelte +++ b/calliope-web/src/lib/components/workbench/ShotStagePanel.svelte @@ -67,6 +67,12 @@ function jobActive(job: VideoShot['job']): boolean { return !!job && (job.status === 'pending' || job.status === 'running'); } + + export function saveDraft() { + if (editing) save(); + else if (stage.content) onSave?.(stage.content); + } + export function hasUnsavedDraft() { return editing; } {#if editing} @@ -165,6 +171,7 @@
{#if projectId} + 三维搭景 - import type { WorkbenchStage } from '$lib/api'; - import { t } from '$lib/i18n.svelte'; + import Icon from '$lib/components/ui/Icon.svelte'; + import type { WorkbenchStage } from "$lib/api"; + import { t } from "$lib/i18n.svelte"; - /** - * Five-stage stepper (a2): one step per agent with the fusion status - * colors — gray=待开始, cyan=进行中 (+breath), amber=待确认, - * green=已确认, --info=用户改过草稿. A step unlocks when itself or any - * earlier stage has content; later steps stay clickable only after the - * previous one is confirmed. - */ - interface Props { - stages: WorkbenchStage[]; - activeKey: string; - onSelect: (key: string) => void; - } + /** + * Five-stage stepper (a2): one step per agent with the fusion status + * colors — gray=待开始, cyan=进行中 (+breath), amber=待确认, + * green=已确认, --info=用户改过草稿. A step unlocks when itself or any + * earlier stage has content; later steps stay clickable only after the + * previous one is confirmed. + */ + interface Props { + stages: WorkbenchStage[]; + activeKey: string; + onSelect: (key: string) => void; + } - let { stages, activeKey, onSelect }: Props = $props(); + let { stages, activeKey, onSelect }: Props = $props(); - const ORDER = ['script', 'style', 'storyboard', 'assets', 'shot']; + const ORDER = ["script", "style", "storyboard", "assets", "shot"]; - function label(key: string): string { - return t(`workbench.stage.${key}`); - } + function label(key: string): string { + return ( + { + script: "故事", + style: "风格", + storyboard: "分镜", + assets: "素材", + shot: "镜头脚本", + } as Record + )[key]; + } - function stateOf( - stage: WorkbenchStage, - ): 'todo' | 'running' | 'draft' | 'edited' | 'confirmed' { - if (stage.status === 'running') return 'running'; - if (stage.status === 'confirmed' && !stage.draft_edited) return 'confirmed'; - if (stage.status === 'confirmed' && stage.draft_edited) return 'edited'; - if (stage.status === 'awaiting_confirm') - return stage.draft_edited ? 'edited' : 'draft'; - return 'todo'; - } + function stateOf( + stage: WorkbenchStage, + ): "todo" | "running" | "draft" | "edited" | "confirmed" { + if (stage.status === "running") return "running"; + if (stage.status === "confirmed" && !stage.draft_edited) return "confirmed"; + if (stage.status === "confirmed" && stage.draft_edited) return "edited"; + if (stage.status === "awaiting_confirm") + return stage.draft_edited ? "edited" : "draft"; + return "todo"; + } - function stateLabel(stage: WorkbenchStage): string { - const s = stateOf(stage); - if (s === 'running') return t('workbench.state.running'); - if (s === 'confirmed') return `✓ ${t('workbench.state.confirmed')}`; - if (s === 'edited') return t('workbench.state.edited'); - if (s === 'draft') return t('workbench.state.draft'); - return t('workbench.state.todo'); - } + function stateLabel(stage: WorkbenchStage): string { + const s = stateOf(stage); + if (s === "running") return t("workbench.state.running"); + if (s === "confirmed") return `✓ ${t("workbench.state.confirmed")}`; + if (s === "edited") return t("workbench.state.edited"); + if (s === "draft") return t("workbench.state.draft"); + return t("workbench.state.todo"); + } - function unlocked(stages: WorkbenchStage[], key: string): boolean { - const idx = ORDER.indexOf(key); - if (idx <= 0) return true; - const prev = stages.find((s) => s.stage_key === ORDER[idx - 1]); - return prev?.status === 'confirmed'; - } + function unlocked(stages: WorkbenchStage[], key: string): boolean { + const idx = ORDER.indexOf(key); + if (idx <= 0) return true; + const prev = stages.find((s) => s.stage_key === ORDER[idx - 1]); + return prev?.status === "confirmed"; + }
    - {#each ORDER as key, i (key)} - {@const stage = stages.find((s) => s.stage_key === key)} - {@const state = stage ? stateOf(stage) : 'todo'} - {@const open = stage ? unlocked(stages, key) : i === 0} -
  1. - {#if i > 0}{/if} - -
    2. - {/each} + {#each ORDER as key, i (key)} + {@const stage = stages.find((s) => s.stage_key === key)} + {@const state = stage ? stateOf(stage) : "todo"} + {@const open = stage ? unlocked(stages, key) : i === 0} +
  2. + {#if i > 0}{/if} + +
    3. + {/each}
- - diff --git a/calliope-web/src/lib/components/workbench/StoryboardStagePanel.svelte b/calliope-web/src/lib/components/workbench/StoryboardStagePanel.svelte index 90704e23..d25c9a1e 100644 --- a/calliope-web/src/lib/components/workbench/StoryboardStagePanel.svelte +++ b/calliope-web/src/lib/components/workbench/StoryboardStagePanel.svelte @@ -1,339 +1,349 @@ {#if editing} -
-
- {#each draft as shot, i (shot.id)} -
-
- {String(i + 1).padStart(2, '0')} - -
-
- - - - -
- - -
- {/each} -
-
- -
- - -
-
-
+
+
+ {#each draft as shot, i (shot.id)} +
+
+ {String(i + 1).padStart(2, "0")} + +
+
+ + + + +
+ + +
+ {/each} +
+
+ +
+ + +
+
+
{:else if shots.length === 0} -
-

{t('workbench.board.todoTitle')}

-

{t('workbench.board.todoBody')}

- -
+
+

{t("workbench.board.todoTitle")}

+

{t("workbench.board.todoBody")}

+ +
{:else} -
-
- # - {t('workbench.board.scene')} - {t('workbench.board.size')} - {t('workbench.board.camera')} - {t('workbench.board.desc')} - {t('workbench.board.dialog')} - {t('workbench.board.duration')} -
- {#each shots as shot, i (shot.id)} -
- {String(i + 1).padStart(2, '0')} - {shot.scene} - {shot.shot_size} - {shot.camera} - {shot.description} - {shot.dialog || '—'} - {shot.duration_sec}s -
- {/each} -
-
- {t('workbench.board.summary', { n: shots.length, sec: totalDuration })} -
- {#if stage.status !== 'running'} - - - {/if} -
-
+
+ {#each shots as shot, i (shot.id)} + {@const media = (shot as StoryboardShot & { job?: { output?: string } }) + .job?.output} + + {/each} +
+
+ {t("workbench.board.summary", { + n: shots.length, + sec: totalDuration, + })} +
+ {#if stage.status !== "running"} + + + {/if} +
+
{/if} diff --git a/calliope-web/src/lib/components/workbench/StudioHeader.svelte b/calliope-web/src/lib/components/workbench/StudioHeader.svelte new file mode 100644 index 00000000..249b13f8 --- /dev/null +++ b/calliope-web/src/lib/components/workbench/StudioHeader.svelte @@ -0,0 +1,32 @@ + + +
+
+ {#if project}工作室/{/if}{title} +
+ {#if !project}晚上好，今天从哪里继续？{/if} + + {#if project}灵感画布项目素材{:else}{/if} +
diff --git a/calliope-web/src/lib/components/workbench/StyleStagePanel.svelte b/calliope-web/src/lib/components/workbench/StyleStagePanel.svelte index 991aa06d..7335d78b 100644 --- a/calliope-web/src/lib/components/workbench/StyleStagePanel.svelte +++ b/calliope-web/src/lib/components/workbench/StyleStagePanel.svelte @@ -59,6 +59,12 @@ }, ]; } + + export function saveDraft() { + if (editing) save(); + else if (stage.content) onSave?.(stage.content); + } + export function hasUnsavedDraft() { return editing; } {#if editing} diff --git a/calliope-web/src/lib/components/workbench/project.css b/calliope-web/src/lib/components/workbench/project.css new file mode 100644 index 00000000..34aa2c38 --- /dev/null +++ b/calliope-web/src/lib/components/workbench/project.css @@ -0,0 +1,838 @@ +.home, +.home *, +.studio-header, +.studio-header *, +.project-workspace, +.project-workspace * { + box-sizing: border-box; +} +/* HEL-731: approved sample 01/08/16, shared by studio and project panels. + Theme values live in static/themes.css; no per-page theme overrides. */ +.b3-row { + display: flex; + align-items: center; + gap: 8px; +} +.b3-grow { + flex: 1; + min-width: 0; +} +.b3-empty { + color: var(--tx-3); + font-size: 12px; + margin: 0; +} +.home { + display: grid; + grid-template-columns: minmax(0, 1fr) var(--project-side-width); + gap: 20px; + padding: 20px 24px 28px; + max-width: 1680px; + --scene: var(--gold); +} +.home .main-col { + min-width: 0; +} +.studio-hero { + position: relative; + border-radius: var(--project-hero-radius); + overflow: hidden; + min-height: 250px; + display: grid; + grid-template-columns: 1.1fr 1fr; + border: 1px solid var(--line-2); + background: var(--studio-hero-bg); +} +.hero-art { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + opacity: 0.9; +} +.hero-shade { + position: absolute; + inset: 0; + background: linear-gradient( + 90deg, + color-mix(in srgb, var(--bg-0) 96%, transparent) 0%, + color-mix(in srgb, var(--bg-0) 85%, transparent) 38%, + color-mix(in srgb, var(--bg-0) 15%, transparent) 75%, + color-mix(in srgb, var(--bg-0) 30%, transparent) + ); +} +.hero-copy { + position: relative; + padding: 26px 28px; + display: flex; + flex-direction: column; + gap: 12px; + justify-content: center; +} +.studio-eyebrow { + display: inline-flex; + align-items: center; + gap: 6px; + height: 22px; + padding: 0 9px; + border-radius: var(--project-eyebrow-radius); + font-size: 11px; + letter-spacing: 0.5px; + width: max-content; + color: color-mix(in srgb, var(--scene) 75%, var(--hi)); + border: 1px solid color-mix(in srgb, var(--scene) 45%, transparent); + background: color-mix(in srgb, var(--scene) 10%, transparent); +} +.studio-display { + font: 700 var(--fs-display)/1.25 var(--project-display-font); + letter-spacing: 0.5px; + margin: 0; +} +.studio-display em { + font-style: normal; + background: var(--display-grad); + background-clip: text; + color: transparent; +} +.hero-copy > .b3-row { + margin-top: 6px; +} +.hero-description { + color: var(--tx-2); + max-width: 420px; + margin: 0; +} +.studio-stages { + display: flex; + gap: 4px; + margin-top: 4px; + max-width: 440px; +} +.studio-stages div { + flex: 1; + display: flex; + flex-direction: column; + gap: 6px; + font-size: 11px; + color: var(--tx-3); +} +.studio-stages i { + height: 3px; + border-radius: 3px; + background: rgb(var(--ink) / 0.12); +} +.studio-stages .done i { + background: var(--gold); +} +.studio-stages .cur i { + background: linear-gradient( + 90deg, + var(--gold) 50%, + rgb(var(--ink) / 0.12) 50% + ); +} +.studio-stages .done, +.studio-stages .cur { + color: var(--tx-1); +} +.studio-quick { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 12px; + margin-top: 16px; +} +.studio-quick > * { + border-radius: var(--project-card-radius); + border: 1px solid var(--line); + background: var(--bg-2); + padding: 14px; + display: flex; + flex-direction: column; + gap: 8px; + cursor: pointer; + transition: + transform var(--t-base) var(--ease-out), + border-color var(--t-base); + color: var(--tx-1); + font: inherit; + text-decoration: none; + text-align: left; +} +.studio-quick > *:hover { + transform: translateY(-2px); + border-color: color-mix(in srgb, var(--scene) 45%, transparent); +} +.studio-quick .qi { + width: 34px; + height: 34px; + border-radius: 10px; + display: grid; + place-items: center; + background: color-mix(in srgb, var(--scene) 15%, transparent); + color: var(--scene); +} +.studio-quick b { + font-size: 14px; +} +.studio-quick p { + font-size: 12px; + color: var(--tx-3); + margin: 0; +} +.home .projects-head { + display: flex; + align-items: center; + gap: 10px; + margin: 24px 0 12px; +} +.home .projects-head h2 { + margin: 0; + font-size: 15px; + font-weight: 600; +} +.studio-filters { + display: flex; + width: 200px; + border: 1px solid var(--line-2); + border-radius: 9px; + padding: 3px; +} +.studio-filters button { + flex: 1; + background: none; + color: var(--tx-3); + border: 0; + font: inherit; + font-size: 12px; + border-radius: 7px; + padding: 4px; + cursor: pointer; +} +.studio-filters .on { + background: var(--bg-3); + color: var(--tx-1); +} +.home .cards { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); + gap: 12px; +} +.studio-side { + display: flex; + flex-direction: column; + gap: 14px; +} +.studio-side-card { + border-radius: var(--project-card-radius); + background: var(--bg-1); + border: 1px solid var(--line); + padding: 14px; + display: flex; + flex-direction: column; + gap: 10px; +} +.studio-side-card h3 { + margin: 0; + font-size: 13px; + font-weight: 600; + display: flex; + align-items: center; + gap: 8px; +} +.studio-side-card small { + font-size: 11px; + color: var(--tx-3); +} +.waiting-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--sc-agent); + box-shadow: 0 0 8px var(--sc-agent); +} +.home .confirm-item { + border-radius: var(--project-confirm-radius); + border: 1px solid color-mix(in srgb, var(--sc-agent) 35%, transparent); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--sc-agent) 10%, transparent), + transparent + ); + padding: 10px 12px; + display: flex; + flex-direction: column; + gap: 6px; +} +.studio-outputs { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 6px; +} +.studio-outputs a { + aspect-ratio: 1; + overflow: hidden; + border-radius: 6px; + background: var(--bg-2); +} +.studio-outputs img, +.studio-outputs video { + width: 100%; + height: 100%; + object-fit: cover; +} +.home .panel-empty { + padding: 24px; + color: var(--tx-3); + border: 1px dashed var(--line-2); + border-radius: var(--project-card-radius); + text-align: center; +} +.home .job-list { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 12px; +} +.home .job-row { + min-width: 0; + font-size: 12px; +} +.home .job-top, +.home .job-side { + display: flex; + align-items: center; + gap: 6px; +} +.home .job-name { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.home .job-meta { + font-size: 11px; + color: var(--tx-3); + margin: 4px 0 0; +} +.home .job-status { + font-size: 11px; +} +.home .failed-text { + color: var(--err); +} +.home .running-text { + color: var(--sc-video); +} +.home .done-text { + color: var(--ok); +} +.home .retry-link { + background: none; + border: 0; + color: var(--tx-2); + cursor: pointer; +} +.project-workspace { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + --scene: var(--sc-project); +} +.project-workspace .stepper { + display: flex; + align-items: stretch; + gap: 0; + margin: 0; + padding: 0 var(--s4); + list-style: none; + border-bottom: 1px solid var(--line); + background: var(--bg-1); + flex: none; + height: 58px; +} +.project-workspace .step { + flex: 1; + display: flex; + min-width: 0; +} +.project-workspace .bar { + display: none; +} +.project-workspace .step-btn { + flex: 1; + display: flex; + align-items: center; + gap: 10px; + padding: 0 14px; + cursor: pointer; + position: relative; + color: var(--tx-3); + transition: color var(--t-base); + background: transparent; + border: 0; + font: inherit; + text-align: left; +} +.project-workspace .step-btn:hover, +.project-workspace .step-btn.active { + color: var(--tx-1); +} +.project-workspace .avatar { + width: 26px; + height: 26px; + border-radius: 8px; + display: grid; + place-items: center; + font: 700 11px var(--mono); + border: 1px solid var(--line-3); + flex-shrink: 0; +} +.project-workspace .step-copy { + display: flex; + flex-direction: column; + line-height: 1.3; +} +.project-workspace .step-name { + font-size: 13px; + font-weight: 600; +} +.project-workspace .step-state { + font-size: 11px; +} +.project-workspace [data-state="confirmed"] .avatar { + background: color-mix(in srgb, var(--gold) 16%, transparent); + border-color: color-mix(in srgb, var(--gold) 50%, transparent); + color: var(--gold); +} +.project-workspace [data-state="draft"] .avatar, +.project-workspace [data-state="edited"] .avatar { + border-color: var(--sc-agent); + color: var(--sc-agent); + box-shadow: var(--project-draft-shadow); +} +.project-workspace .step-btn.active::after { + content: ""; + position: absolute; + left: 14px; + right: 14px; + bottom: -1px; + height: 2px; + background: var(--gold); + box-shadow: var(--project-active-shadow); +} +.project-workspace .step + .step::before { + content: ""; + align-self: center; + width: 12px; + margin: 0 -6px; + height: 1px; + background: var(--line-3); + z-index: 1; +} +.project-body { + flex: 1; + display: grid; + grid-template-columns: minmax(0, 1fr) var(--project-side-width); + min-height: 0; +} +.project-main { + display: flex; + flex-direction: column; + min-height: 0; + min-width: 0; +} +.project-draftbar { + margin: 14px 18px 0; + border-radius: var(--project-draft-radius); + padding: 10px 12px 10px 14px; + display: flex; + align-items: center; + gap: 10px; + background: linear-gradient( + 90deg, + color-mix(in srgb, var(--sc-agent) 14%, transparent), + color-mix(in srgb, var(--sc-agent) 4%, transparent) + ); + border: 1px solid color-mix(in srgb, var(--sc-agent) 35%, transparent); + font-size: 12.5px; +} +.project-draftbar > svg { + color: var(--sc-agent); + flex-shrink: 0; +} +.project-content { + flex: 1; + min-height: 0; + overflow: auto; + padding: 14px 18px 18px; +} +.project-side { + border-left: 1px solid var(--line); + background: var(--project-side-bg); + display: flex; + flex-direction: column; + min-height: 0; +} +.project-assistant { + padding: 14px; + border-bottom: 1px solid var(--line); + display: flex; + flex-direction: column; + gap: 10px; +} +.project-assistant h3, +.project-task-heading h3 { + margin: 0; + font-size: 12.5px; + font-weight: 600; + display: flex; + align-items: center; + gap: 8px; +} +.project-agent { + display: flex; + align-items: center; + gap: 10px; + padding: 10px; + border-radius: var(--project-draft-radius); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--sc-agent) 12%, transparent), + rgb(var(--ink) / 0.02) + ); + border: 1px solid color-mix(in srgb, var(--sc-agent) 25%, transparent); +} +.project-agent b { + font-size: 13px; +} +.project-agent small { + display: block; + color: var(--tx-3); + font-size: 11px; +} +.agent-icon { + width: 34px; + height: 34px; + border-radius: 10px; + display: grid; + place-items: center; + background: color-mix(in srgb, var(--sc-agent) 20%, transparent); + color: var(--sc-agent); +} +.stage-input-wrap { + height: 70px; + color: var(--tx-3); + display: flex; + align-items: flex-start; + padding: 8px 10px; + border: 1px solid var(--line-2); + background: var(--well); + border-radius: var(--r-sm); +} +.stage-instruction { + flex: 1; + width: 100%; + height: 52px; + resize: none; + background: none; + border: 0; + outline: 0; + font: 400 12.5px/1.55 var(--font); + color: var(--tx-1); + padding: 0; +} +.stage-instruction::placeholder { + color: var(--tx-3); +} +.project-task-heading { + padding: 14px 14px 4px; + display: flex; + align-items: center; + gap: 8px; +} +.project-tasks { + flex: 1; + overflow: auto; + padding: 8px 10px; +} +.project-tasks .jobs-list { + list-style: none; + margin: 0; + padding: 0; +} +.project-tasks .job-row { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 4px; + border-bottom: 1px solid var(--line); +} +.project-tasks .job-body { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + font-size: 12px; +} +.project-tasks .job-prompt { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.project-tasks .job-time, +.project-tasks .job-state { + color: var(--tx-3); + font-size: 11px; +} +.project-tasks .jobs-empty { + color: var(--tx-3); + font-size: 12px; +} +.project-footer { + flex: none; + min-height: var(--project-footer-height); + border-top: 1px solid var(--line); + display: flex; + align-items: center; + gap: 10px; + padding: 0 18px; + background: color-mix(in srgb, var(--bg-1) 85%, transparent); +} +.project-save-state { + font-size: 12px; + color: var(--tx-3); +} +.project-workspace .stage-note { + padding: 14px; + margin-bottom: 12px; + border: 1px solid var(--line); + border-radius: var(--project-card-radius); + font-size: 12.5px; +} +.project-workspace .note-actions { + display: flex; + gap: 8px; + justify-content: flex-end; +} +.project-workspace .stage-note textarea { + width: 100%; + min-height: 100px; +} +.project-workspace .stage-note p { + white-space: pre-wrap; +} +.project-compare { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; +} +.project-compare pre { + white-space: pre-wrap; + overflow-wrap: anywhere; + font-size: 12px; + max-height: 60vh; + overflow: auto; +} +.project-workspace .error-banner { + color: var(--err); + padding: 14px 18px; +} +.project-load-pad { + padding: 24px; +} +.project-workspace .icon-btn { + border: 0; + background: none; + color: var(--tx-2); + cursor: pointer; +} +.storyboard-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 12px; + align-content: start; +} +.storyboard-card { + border-radius: var(--project-shot-radius); + background: var(--bg-2); + border: 1px solid var(--line); + overflow: hidden; + transition: + border-color var(--t-base), + transform var(--t-base) var(--ease-out); +} +.storyboard-card:hover { + border-color: var(--line-3); + transform: translateY(-2px); +} +.storyboard-card.selected { + border-color: color-mix(in srgb, var(--gold) 50%, transparent); +} +.storyboard-image { + width: 100%; + border: 0; + padding: 0; + font: inherit; + color: inherit; + cursor: pointer; + aspect-ratio: 16/9; + position: relative; + display: grid; + place-items: center; + background: var(--gen-bg); +} +.storyboard-image img { + width: 100%; + height: 100%; + object-fit: cover; +} +.storyboard-missing { + font-size: 12px; + color: var(--tx-3); +} +.shot-time { + position: absolute; + left: 8px; + top: 8px; + font: 700 11px var(--mono); + background: var(--media-scrim); + color: var(--media-text); + padding: 2px 6px; + border-radius: 4px; +} +.shot-media-state { + --tag-background: var(--project-media-tag-bg); + --tag-color: var(--project-media-tag-color); + --tag-border: var(--project-media-tag-border); + position: absolute; + right: 8px; + top: 8px; +} +.storyboard-copy { + padding: 9px 11px 11px; + display: flex; + flex-direction: column; + gap: 5px; + font-size: 12px; +} +.storyboard-copy p { + color: var(--tx-2); + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +.shot-scene, +.shot-dialog { + color: var(--tx-3); + font-size: 11px; +} +.shot-dialog { + max-width: 50%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.studio-header { + height: var(--head); + flex: none; + display: flex; + align-items: center; + gap: var(--s3); + padding: 0 var(--s4); + border-bottom: 1px solid var(--line); + background: var(--project-header-bg); + backdrop-filter: blur(10px); + position: relative; + z-index: 3; +} +.studio-crumb { + display: flex; + align-items: center; + gap: 6px; + color: var(--tx-3); + font-size: 12px; +} +.studio-crumb b { + color: var(--tx-1); + font-size: 14px; + font-weight: 600; +} +.studio-crumb a { + color: inherit; + text-decoration: none; +} +.studio-greeting { + font-size: 12px; + color: var(--tx-3); +} +.studio-search { + width: 280px; + height: 34px; + display: flex; + align-items: center; + gap: 8px; + border-radius: var(--r-sm); + background: var(--well); + border: 1px solid var(--line-2); + padding: 0 10px; + color: var(--tx-3); + font: inherit; + font-size: 13px; + cursor: pointer; +} +.studio-search kbd { + margin-left: auto; + font: 500 10.5px/1 var(--mono); + color: var(--tx-3); + border: 1px solid var(--line-2); + border-bottom-width: 2px; + padding: 3px 5px; + border-radius: 4px; + background: var(--bg-2); +} +/* Configure the existing controls at the page boundary, keeping their source shared. */ +.home, +.project-workspace, +.studio-header { + --icon-stroke: var(--project-icon-stroke); + --button-height: 32px; + --button-font-size: 12.5px; + --button-weight: 500; + --button-radius: var(--project-button-radius); + --tag-height: 18px; + --tag-padding: 6px; + --tag-radius: 4px; + --tag-font-size: 11px; + --tag-border-width: 1px; + --tag-border: var(--line); + --tag-background: rgb(var(--ink) / 0.05); + --tag-color: var(--tx-2); + --tag-warn-color: var(--sc-agent); + --tag-warn-background: rgb(var(--ink) / 0.05); + --tag-warn-border: color-mix(in srgb, var(--sc-agent) 40%, transparent); + --button-sm-font-size: 12px; + --button-sm-height: 26px; + --button-sm-padding: 9px; + --button-sm-radius: var(--project-button-sm-radius); + --button-primary-height: 32px; + --button-primary-padding: 12px; + --button-primary-radius: var(--project-button-radius); + --button-primary-weight: 700; + --button-primary-border-width: 0px; + --button-primary-disabled-opacity: 1; + --button-primary-disabled-filter: var(--project-button-disabled-filter); + --button-primary-disabled-bg: var(--project-button-disabled-bg); + --button-primary-disabled-color: var(--project-button-disabled-color); + --button-secondary-bg: var(--bg-3); + --button-secondary-border: var(--line-2); + --button-secondary-hover-border: var(--line-3); + --button-secondary-padding: 12px; + --button-secondary-active-transform: translateY(1px); + --button-secondary-radius: var(--project-button-radius); +} diff --git a/calliope-web/src/routes/+page.svelte b/calliope-web/src/routes/+page.svelte index 4d68a44e..66de556c 100644 --- a/calliope-web/src/routes/+page.svelte +++ b/calliope-web/src/routes/+page.svelte @@ -1,1211 +1,842 @@ - - - - {#snippet actions()} - {t('home.projectCount', { - n: allProjects.length, - m: inProgressCount, - })} - - {/snippet} + + {#snippet pageHeader({ openSearch })}{/snippet} -
-
- {#if entryMode === 'none'} -
-

欢迎回到工作室。

- 给今天的想象，留一点空间。 -
-
-
- 从这里开始今天的创作 -

让想法，成为下一件作品。

-

直接生成图片与视频，或与智能体一起推进项目。

-
- -
-
- 海岸光线与画面参考 -
- {#if allProjects.length}{@const recent = allProjects[0]} -
- 继续最近的项目{recent.title} -
- {recent.stats?.stage_confirmed ?? 0} / 5 阶段已确认继续创作 →{/if} -
- {#each TOOLS as tool (tool.href)} - {tool.title}{tool.desc}↗ - {/each} -
- {:else if entryMode === 'idea'} -
-
-

{t('home.entryIdeaTitle')}

- -
- - -
- - - -
-
- - -
-
- {:else} -
-
-

{t('home.entryScriptTitle')}

- -
- - -
- - -
-
- {/if} +
+
+ {#if entryMode === "none"} +
+ {#if recent?.cover_path}{/if} +
+
+ {recent + ? "继续创作 · " + + new Date(recent.updated_at).toLocaleDateString() + : "开始创作"} +

+ {recent ? "《" + recent.title + "》" : "还没有项目"}
{recent + ? stageNames[Math.max(recentStage, 0)] + : "从一个想法开始"} + {recent + ? recentStage < 0 + ? "已完成" + : recent.stats?.stage_status?.[stageKeys[recentStage]] === + "awaiting_confirm" + ? "等你确认" + : "继续创作" + : ""} +

+

+ {recent?.idea || + (recent + ? "草稿确认后，才会交给下一阶段使用。" + : "创建五阶段项目，或直接开始图片与视频创作。")} +

+
+ {#each stageKeys as key, i (key)}
+ {stageNames[i]} +
{/each} +
+
+ {#if recent}打开项目 查看阶段草稿{:else}{/if} +
+
+
+
+ + + 独立生图 +

文生图 · 图生图 · 遮罩

 + 独立生视频 +

文生 · 首尾帧 · 参考

 +
+ {:else if entryMode === "idea"} +
+
+

{t("home.entryIdeaTitle")}

+ +
+ + +
+ + + +
+
+ + +
+
+ {:else} +
+
+

{t("home.entryScriptTitle")}

+ +
+ + +
+ + +
+
+ {/if} -
-

最近的创作

- 全部项目 → - {#if allProjects.length > 0} - {t('home.myProjectsHint')} - {/if} -
+
+

我的项目

+ {allProjects.length} +
+
+ {#each ["最近", "进行中", "已完成"] as filter (filter)}{/each} +
+
+ {#if $projectsQuery.isLoading} +
+ {#each [1, 2, 3] as n (n)} +
+ +
+ + + +
+
+ {/each} +
+ {:else if $projectsQuery.isError} +
+ +

{t("projects.loadError")}

+ +
+ {:else if allProjects.length === 0} +
+ +

{t("home.emptyProjects")}

+
+ {:else} +
+ {#each visibleProjects as project (project.id)} + + {/each} +
+ {/if} +
- {#if $projectsQuery.isLoading} -
- {#each [1, 2, 3] as n (n)} -
- -
- - - -
-
- {/each} -
- {:else if $projectsQuery.isError} -
- -

{t('projects.loadError')}

- -
- {:else if allProjects.length === 0} -
- -

{t('home.emptyProjects')}

-
- {:else} -
- {#each allProjects.slice(0, 3) as project (project.id)} - - {/each} -
- {/if} -
- - -
+ +
diff --git a/calliope-web/src/routes/app.css b/calliope-web/src/routes/app.css index adfd55ad..64ec6213 100644 --- a/calliope-web/src/routes/app.css +++ b/calliope-web/src/routes/app.css @@ -69,7 +69,7 @@ code, justify-content: center; gap: var(--sp-2); min-height: var(--button-height, 34px); - padding: 0 var(--sp-6); + padding: 0 var(--button-padding, var(--sp-6)); border-radius: var(--button-radius, var(--r-md)); border: 1px solid transparent; font-family: inherit; @@ -94,8 +94,12 @@ code, .a-btn.sm { min-height: var(--button-sm-height, 28px); padding: 0 var(--button-sm-padding, var(--sp-4)); - font-size: var(--fs-aux); + font-size: var(--button-sm-font-size, var(--fs-aux)); border-radius: var(--button-sm-radius, var(--r-sm)); + --button-secondary-size-radius: var( + --button-sm-radius, + var(--button-secondary-radius, 8px) + ); } .a-btn.xs { min-height: 24px; @@ -107,7 +111,7 @@ code, width: 100%; } .a-btn.primary { - border-color: transparent; + border: var(--button-primary-border-width, 1px) solid transparent; border-bottom-width: 0; min-height: var(--button-primary-height, 40px); padding: 0 var(--button-primary-padding, 18px); @@ -119,8 +123,16 @@ code, } .a-btn.secondary { background: var(--button-secondary-bg, var(--surface)); - border-radius: var(--button-secondary-radius, 8px); - border-color: var(--line); + border-radius: var( + --button-secondary-size-radius, + var(--button-secondary-radius, 8px) + ); + border-color: var(--button-secondary-border, var(--line)); + --button-padding: var(--button-secondary-padding, var(--sp-6)); + --button-active-transform: var( + --button-secondary-active-transform, + scale(var(--press-scale)) + ); color: var(--text); } .a-btn.ghost { @@ -143,7 +155,7 @@ code, box-shadow: var(--btn-glow-hover); } .a-btn.secondary:hover:not(:disabled) { - border-color: var(--line-2); + border-color: var(--button-secondary-hover-border, var(--line-2)); background: var(--bg-4); } .a-btn.ghost:hover:not(:disabled) { @@ -160,7 +172,7 @@ code, } } .a-btn:active:not(:disabled) { - transform: scale(var(--press-scale)); + transform: var(--button-active-transform, scale(var(--press-scale))); } /* 禁用必须在旁边给出中文原因（§1.2），由调用方渲染。 */ .a-btn:disabled, @@ -170,6 +182,15 @@ code, cursor: not-allowed; } +/* Primary disabled state is configurable only where a page supplies the tokens. */ +.a-btn.primary:disabled, +.a-btn.primary[aria-disabled="true"] { + opacity: var(--button-primary-disabled-opacity, 0.45); + filter: var(--button-primary-disabled-filter, none); + background: var(--button-primary-disabled-bg, var(--accent-grad)); + color: var(--button-primary-disabled-color, var(--accent-ink)); +} + /* Top-bar status capsule (queue / connection / save state) — §二 顶栏胶囊. */ .status-chip { display: inline-flex; @@ -247,12 +268,13 @@ button.status-chip:active { display: inline-flex; align-items: center; gap: var(--sp-1); - height: 20px; - padding: 0 var(--sp-2); - border-radius: var(--r-sm); - background: var(--bg-4); - color: var(--text-2); - font-size: var(--fs-aux); + height: var(--tag-height, 20px); + padding: 0 var(--tag-padding, var(--sp-2)); + border: var(--tag-border-width, 0px) solid var(--tag-border, transparent); + border-radius: var(--tag-radius, var(--r-sm)); + background: var(--tag-background, var(--bg-4)); + color: var(--tag-color, var(--text-2)); + font-size: var(--tag-font-size, var(--fs-aux)); white-space: nowrap; box-sizing: border-box; transition: @@ -276,8 +298,9 @@ button.status-chip:active { background: var(--err-soft); } .a-tag.warn { - color: var(--warn); - background: var(--warn-soft); + color: var(--tag-warn-color, var(--warn)); + background: var(--tag-warn-background, var(--warn-soft)); + border-color: var(--tag-warn-border, transparent); } /* Real-progress bar (§1.3)：
. diff --git a/calliope-web/src/routes/workbench/[id]/+page.svelte b/calliope-web/src/routes/workbench/[id]/+page.svelte index 07389cec..b2db57e6 100644 --- a/calliope-web/src/routes/workbench/[id]/+page.svelte +++ b/calliope-web/src/routes/workbench/[id]/+page.svelte @@ -1,1442 +1,8 @@ - - {#snippet actions()} - {t('workbench.progressChip', { n: confirmedCount })} - {t('workbench.backHome')} - {/snippet} - - {#if !$overviewQuery.data && $overviewQuery.isLoading} -
- -
- -
- {:else if !overview} -
-

- {t('workbench.loadFailed')} - -

-
- {:else} -
-
✳
-
-
项目工作台
-

{overview.project.title}

-

{overview.project.idea || '每一次尝试，都回到这个项目。'}

-
- 灵感画布 ↗ -
-
- -
- {#if panelProps} -
-
-

{t(`workbench.stage.${stageKey}`)}

-

{currentAgent?.tagline ?? ''}

-
-
- - {#if stageStatus === 'running'}{/if} - {t(STATUS_LABEL[stageStatus])} - - {#if currentStage && currentStage.draft_edited && stageStatus !== 'todo'} - {t('workbench.state.edited')} - {/if} -
-
- - {#if currentStage?.error || (currentStage?.last_run?.status === 'failed' && currentStage?.last_run?.error)} -
- - {currentStage.last_run?.error ?? currentStage.error} -
- {/if} - - {#if stageStatus === 'awaiting_confirm'} -
- - {t('workbench.draftNotice')} -
- {/if} - - {#if stageStatus === 'running'} -
- - {t('workbench.runningHint', { - agent: agentName(stageKey), - })} -
- {/if} - -
- - {#if stageStatus === 'todo'} - - {/if} - {#if stageStatus === 'awaiting_confirm'} - - {/if} - {#if stageStatus === 'confirmed' && currentStage?.draft_edited} - - {/if} -
- -
- {#if currentStage?.assistant_note || noteOpen}
- 助手建议 · 待整理到阶段内容 - {#if noteOpen} -
- -
- {:else}

{currentStage?.assistant_note}

- {/if} -
{/if} - {#if stageKey === 'script'} - - $saveMutation.mutate({ key: 'script', content })} - onImport={(text) => $importMutation.mutate(text)} - onRun={() => handleRun('script')} - /> - {:else if stageKey === 'style'} - - $saveMutation.mutate({ key: 'style', content })} - onRun={() => handleRun('style')} - /> - {:else if stageKey === 'storyboard'} - - $saveMutation.mutate({ key: 'storyboard', content })} - onRun={() => handleRun('storyboard')} - /> - {:else if stageKey === 'assets'} - - $saveMutation.mutate({ key: 'assets', content })} - onRun={() => handleRun('assets')} - {onGenerate} - onRetryJob={(jobId) => $retryMutation.mutate(jobId)} - /> - {:else} - - $saveMutation.mutate({ key: 'shot', content })} - onRun={() => handleRun('shot')} - {onGenerate} - onRetryJob={(jobId) => $retryMutation.mutate(jobId)} - /> - {/if} -
- {/if} -
- - -
- {/if} - - - +{#key page.params.id}{/key} diff --git a/calliope-web/static/themes.css b/calliope-web/static/themes.css index e94b9d99..c5239c77 100644 --- a/calliope-web/static/themes.css +++ b/calliope-web/static/themes.css @@ -44,6 +44,30 @@ --fs-body: 13px; --fs-small: 12px; --fs-micro: 11px; + --studio-hero-bg: #0b0c11; + --project-footer-height: 56px; + --project-side-width: 340px; + --project-media-tag-bg: rgba(7, 8, 12, 0.62); + --project-media-tag-color: #ddd; + --project-media-tag-border: rgba(255, 255, 255, 0.16); + --project-icon-stroke: 1.7; + --project-hero-radius: var(--r-xl); + --project-button-radius: var(--r-sm); + --project-button-sm-radius: 5px; + --project-button-disabled-filter: grayscale(0.8) brightness(0.6); + --project-button-disabled-bg: var(--grad-gold); + --project-button-disabled-color: var(--tx-inv); + --project-header-bg: var(--glass); + --project-eyebrow-radius: var(--r-pill); + --project-draft-shadow: 0 0 12px + color-mix(in srgb, var(--sc-agent) 35%, transparent); + --project-shot-radius: 12px; + --project-active-shadow: 0 0 12px var(--gold); + --project-side-bg: var(--bg-1); + --project-display-font: var(--font); + --project-card-radius: var(--r-lg); + --project-confirm-radius: 10px; + --project-draft-radius: 12px; --slot-size: 56px; --prompt-height: 60px; --desk-dock-radius: 14px; @@ -277,6 +301,11 @@ } [data-theme="day"] { + --project-button-disabled-filter: none; + --project-button-disabled-bg: #e3ddd2; + --project-button-disabled-color: #8d877d; + --project-active-shadow: none; + --project-draft-shadow: none; --rail-active-shadow: none; color-scheme: light; --bg-0: #e9e4da; @@ -360,6 +389,14 @@ } [data-theme="grade"] { + --project-card-radius: 4px; + --project-hero-radius: 4px; + --project-eyebrow-radius: 3px; + --project-confirm-radius: 10px; + --project-draft-radius: 4px; + --project-shot-radius: 4px; + --project-active-shadow: none; + --project-draft-shadow: none; --rail-active-shadow: none; --rail-nav-radius: 4px; --rail-brand-radius: 4px; @@ -460,6 +497,11 @@ } [data-theme="bluehour"] { + --project-shot-radius: 14px; + --project-button-radius: 10px; + --project-button-sm-radius: 8px; + --project-header-bg: color-mix(in srgb, #0f1838 55%, transparent); + --project-side-bg: color-mix(in srgb, var(--bg-1) 78%, transparent); --rail-nav-radius: 14px; --desk-head-bg: color-mix(in srgb, #0f1838 55%, transparent); color-scheme: dark; @@ -596,6 +638,7 @@ --composer-bg: var(--desk-dock-bg); --composer-focus: var(--bg-2); --float-bg: var(--bg-2); + --toast-bottom: 24px; --on-media: #fff; --on-media-line: #ffffff66; --sel-shadow: 0 0 0 1px var(--gold); @@ -750,3 +793,8 @@ html.theme-anim *::after { animation: none; } } + +/* Keep transient feedback clear of the project’s fixed primary actions. */ +:root:has(.project-workspace) { + --toast-bottom: calc(var(--project-footer-height) + 24px); +} diff --git a/docs/changelogs/2026-10-22-hel731-studio-project.md b/docs/changelogs/2026-10-22-hel731-studio-project.md new file mode 100644 index 00000000..89171d99 --- /dev/null +++ b/docs/changelogs/2026-10-22-hel731-studio-project.md @@ -0,0 +1,17 @@ +HEL-731（B3）将工作室与项目五阶段接到已确认的夜片场四主题样本。基底固定为 `fix/hel-771-theme-tile-details @ a1c01f1e90b0b1ce76300291eae51785604180d4`，不合并既有请求、不部署、不迁移数据。 + +- 工作室首页改为真实项目继续创作、四个入口、项目筛选、待确认、队列与媒体墙。移除旧 hero 和重复覆盖规则。没有数据时显示空态，不写死样本项目、计数或图片。 +- `ProjectWorkbench.svelte` 复用五阶段 API 与已有编辑组件；顶部阶段条、右侧助手、镜头缩略图网格、固定保存和确认、确认快照对比。编辑中禁止确认旧内容。阶段要求分别保存；任务同时按项目和阶段过滤。路由按项目 ID 重建组件，异步完成不能把导航或输入带到另一项目。 +- 镜头脚本保留完整项目/阶段/镜头来源的创作台入口及原有显式结果回流，新增搭景入口。分镜仅携带真实分镜上下文和提示词预填，不伪造可回流的镜头脚本 ID。 +- 视频声明的非遮罩图片槽及参考图片列表可选择真实搭景截图，遵守列表数量上限；无图声明的文生图仍无图片/遮罩槽。复用 Modal、MediaSlot、RefImageGrid、shotApi，未新增依赖或生成 API。 +- 所有布局样式集中在 `project.css`，主题差异集中在 `themes.css`。样本图标加入已有 Icon 注册表，旧图标保持原契约。AppShell 页头 snippet 新增搜索回调；全局搜索快捷键继续由原组件负责。共享按钮、标签仅新增可配置 token，默认值保持原样；AProjectCard 同时影响项目列表，保留改名/删除。 + +验证：干净 `npm ci`；lint、Svelte check（0 errors / 0 warnings）、build、前端脚本测试；工作台生命周期和来源回流 pytest 18 passed。B3 浏览器 64 项、创作台 42 项、无图声明 7 项，运行异常均为 0。旧 B1 脚本将 B2 已移除的 `.wf-test-btn` 选择器更新为真实“试运行”按钮，等待数据加载，保留原行为断言，无检查豁免。 + +四主题 × 三尺寸 × 工作室/项目共 24 组原始样本与实际并排图，附 DOM 数值 CSV/JSON、原始样本、操作截图和 Playwright trace。三尺寸的页头、阶段条、右栏、底栏、按钮及输入几何按样本对齐。1280 档原始样本的描述文字较长，hero 和镜头卡会多换一行；证据保留原图与原始数值，另附仅替换这两处描述为隔离夹具文字的复测，24 组高度差均为 0。真实项目数、阶段状态、版本、产物和空态不替换为演示数据。 + +已验证真实 Three.js 截图 → 工作流声明槽 → 假 ComfyUI 视频生成 → 原镜头显式回流；另一项目不收到产物；项目视频默认暂停且可手动播放。五阶段生成/确认/恢复/导入通过隔离 pytest；保存、确认、恢复、对比、阶段切换、长内容滚动、主题与搜索通过浏览器操作。 + +限制：只使用隔离库和假生成服务，未调用真实 GPU 或收费服务。主题卡追加 144 组回归，DOM 差异 0；136 组原始截图逐像素一致，另外 8 组仍有 1–13 个像素、最大色阶差 2，原图全部保留，不据此宣布视觉通过。未部署，需总工独立审核；B4/B5 与整套样本仍未完成。pytest 有既存 Pydantic 字段 alias 警告，build 有依赖内未使用导入提示；lint/check 均无警告。回滚仅需切回上述精确基底，无数据库回滚步骤。 + +复测：安装仓库既有依赖后，设置本机 Playwright/Chromium 库路径，运行 `python3 e2e/run-hel731.py`；用 `HEL731_TESTS=e2e/hel731.cjs,e2e/hel729.cjs,e2e/hel742.cjs` 同时运行相关回归。样本通过 CLI 下载至上级 `attachments`，SHA-256 为 `0473d80d22b90194375f3566c1b8ca30dbd7433581b18f60956eabca252242a4`。随后运行 `node e2e/hel731-normalize.mjs`、`python3 scripts/report-hel731.py` 生成对照与数值证据。 diff --git a/docs/changelogs/2026-10-22-hel774-secondary-buttons.md b/docs/changelogs/2026-10-22-hel774-secondary-buttons.md new file mode 100644 index 00000000..64e7e253 --- /dev/null +++ b/docs/changelogs/2026-10-22-hel774-secondary-buttons.md @@ -0,0 +1,14 @@ +HEL-774 在 HEL-731 / PR #10 上按确认 HTML 样本定点返工，目标仍为 `fix/hel-771-theme-tile-details @ a1c01f1e90b0b1ce76300291eae51785604180d4`。 + +- `project.css` 两页作用域的次级按钮改回 `--bg-3`、`--line-2`、水平 12px；悬停边框为样本 `--line-3`，按下为样本 `translateY(1px)`。小按钮保留既有 9px，主按钮仍为 12px。 +- `app.css` 仅为现有共享按钮增加带原值回退的 token 参数。尺寸规则仍由原 sm/lg/xs 定义负责，没有追加第二套组件样式，也未改动主题配色。 +- 移除 `.confirm-item` 的 12.5px，按样本继承 13px。两页现有 `.a-tag` 均仅含文本；逐一实测将 gap 从 4px 改为 0px 后宽度不变，保留共享标签契约。 +- `.sec-h`、日期内容/格式、后端、确认语义、B4/B5 均未改动。 + +复测使用 `e2e/run-hel774.py` 和 `e2e/hel774.cjs`，复用既有依赖与隔离假服务；四主题三尺寸两页共 24 组原始截图、次级按钮状态数值/局部图、空态和保存/跳转操作 trace 随 HEL-774 交付。测试中“禁用”包含显式标记的临时 DOM 状态夹具；未将样本项目、媒体或数字写入产品。原始页面截图和同文按钮数值分开保留。截图为施工员自测材料，仍需总工独立重拍复审与总管接续目检。 + +pytest 口径：本次只收集 `tests/test_workbench.py`（10项）与 `tests/test_playground_workbench_flowback.py`（8项），合计18项。原 HEL-731 的18项是工作台生命周期+来源回流的合计；HEL-773 单文件10项仅含前者。后端没有变更，不重复运行已通过的整套昂贵行为测试。lint、Svelte check（0错误0警告）、build、前端脚本和本次针对性浏览器验证日志交任务附件；构建的既有依赖导入/包大小提示保持如实记录。 + +未部署、未合并、无数据迁移或线上数据操作，无新增依赖。清理由 runner 的 finally 停止其启动的精确子进程组并移除隔离库；保留原始证据与校验清单供复审。 + +补充总管在施工中新增的稳定态要求：等待全部有限动画结束、字体和图片就绪后，比较弹层与搜索弹层背景实测为不透明，Escape关闭均恢复触发器焦点，无需改弹层。另复现保存成功提示确实挡住固定保存/确认按钮（1440档toast底876、footer顶844，两按钮中心命中toast）。修复仅在统一`themes.css`中定义项目底栏56px与提示间距token，ToastHost消费原24px默认值；有项目工作区时提示距底为56+24px，其他页面仍24px。底栏复用同一高度token，没有叠加新组件样式。四主题三尺寸补测提示与底栏不重叠、保存/确认命中、实际点击、提示消失后的长滚动底栏；最终24组页面重新拍摄，稳定弹层/提示证据另列stability/。变更后重新lint/check/build，不以旧截图冒充新状态。 diff --git a/docs/changelogs/2026-10-22-hel776-button-states.md b/docs/changelogs/2026-10-22-hel776-button-states.md new file mode 100644 index 00000000..9295bdd3 --- /dev/null +++ b/docs/changelogs/2026-10-22-hel776-button-states.md @@ -0,0 +1,11 @@ +HEL-776 接续 PR #10，按原 HTML 样本修正 B3 工作室/项目按钮的两项偏差；不改变业务逻辑。 + +- 共享按钮的 sm 规则将已有小号圆角参数传给次级变体，次级规则消费该尺寸参数后再回退到原普通圆角。B3 小号最终为 night/day/grade 5px、bluehour 8px；非 B3 未配置小号参数，仍回退到原次级圆角 8px。没有新增一套按钮样式。 +- 共享按钮明确主按钮禁用状态的参数入口。B3 边界设置 opacity=1，主题源提供 grayscale(.8) brightness(.6)，day 单独提供 filter:none、背景 #e3ddd2 和文字 #8d877d。阴影继续由原通用禁用规则清除。非 B3 的参数回退保留 opacity=.45、原背景/文字与无滤镜；次级按钮禁用态未改。 +- 原生 disabled、aria-disabled 样式入口、确认条件、异步请求、防重复提交与保存逻辑全部沿用。没有变更后端或依赖。 + +自测由 e2e/run-hel776.py 启动一次性真实 API/数据库及本地假服务，e2e/hel776.cjs 核对四主题×三窗口×工作室/项目页的普通、小号次级按钮 normal/hover/active 最终数值；用真实未保存编辑产生主按钮禁用态，真实保存恢复可用，逐值比较原样本的 opacity/filter/background/color/shadow 等属性，并验证禁用无请求、pending 只提交一次、确认成功。搜索/比较稳定打开与焦点恢复，以及提示条不遮固定操作另作定向保护。样本按钮状态夹具只存在于样本浏览器页面，产品保留真实数据。 + +B1/B2 的 /create、/workflows、/tasks、/settings、/models 四主题控件对照精确旧版 app.css；补充非 B3 普通/sm 主次按钮 enabled/native disabled/aria-disabled 状态夹具，并在对照时移除本轮新增主按钮状态规则，避免旧 CSS 无法覆盖较高优先级规则导致无效验证。 + +本轮实跑 lint、Svelte check（0 errors / 0 warnings）、build、现有前端脚本及上述定向浏览器验证。复用 HEL-775 的工作台10项+来源回流8项后端18 passed记录，纯样式增量没有重复执行；没有复跑无关完整页面截图矩阵。原始日志、并排局部图、JSON/CSV、trace、清理记录通过任务附件交付，施工员自测不能代替独立复审与总管图片目检。未部署、未合并、未新增依赖。 diff --git a/e2e/hel729.cjs b/e2e/hel729.cjs index 5c4440e6..2e285f2f 100644 --- a/e2e/hel729.cjs +++ b/e2e/hel729.cjs @@ -436,10 +436,11 @@ async function shot(p, name) { .filter({ hasText: "待配置测试工具" }) .click(); await p.waitForURL("**/workflows?manage=1&wf=" + pending.id); - ok( - "待配置导向真实管理和测试入口", - await p.locator(".wf-test-btn").first().isVisible(), - ); + // B2 replaced the old wf-test-btn class with the same real test action. + // Wait for its data-driven detail panel; keep the original behavior assertion. + const workflowTest = p.getByRole("button", { name: "试运行", exact: true }); + await workflowTest.waitFor(); + ok("待配置导向真实管理和测试入口", await workflowTest.isVisible()); // Source project round-trip uses original API and explicit attachment. await api( "/api/workbench/projects/" + f.project + "/stages/assets", diff --git a/e2e/hel731-normalize.mjs b/e2e/hel731-normalize.mjs new file mode 100644 index 00000000..4e592351 --- /dev/null +++ b/e2e/hel731-normalize.mjs @@ -0,0 +1,26 @@ +// Explain content-driven height differences without altering the frozen sample or product. +// Original sample screenshots remain in the evidence pack. This second pass changes only +// the two descriptive strings to the isolated fixture strings and measures their reflow. +import fs from 'node:fs/promises'; +import path from 'node:path'; +import {pathToFileURL} from 'node:url'; +const {chromium}=await import(process.env.PLAYWRIGHT_MODULE || 'playwright'); +const out='e2e/shots/hel731'; +const measurements=JSON.parse(await fs.readFile(out+'/measurements.json','utf8')); +const browser=await chromium.launch({args:['--no-sandbox']}); +const results=[]; +try{ + for(const [width,height] of [[1440,900],[1366,768],[1280,720]])for(const theme of ['night','day','grade','bluehour']){ + const page=await browser.newPage({viewport:{width,height}}); + await page.goto(pathToFileURL(path.resolve('../attachments/夜片场-多主题交互样本.html')).href); + await page.evaluate(t=>{document.documentElement.dataset.theme=t;document.documentElement.classList.add('reduce');document.querySelector('.hero .copy p').textContent='纸船带回一片树叶';document.querySelectorAll('#projShots .scard .bd p').forEach(e=>e.textContent='女孩沿着海岸走向灯塔，纸船随海风起伏。');},theme); + for(const [name,ref,actual] of [['studio','.hero','.studio-hero'],['project','.scard','.storyboard-card']]){ + await page.evaluate(name=>document.querySelectorAll('.page').forEach(e=>e.classList.toggle('on',e.id==='p-'+name)),name);await page.waitForTimeout(350); + const box=await page.locator(ref).first().boundingBox();const a=measurements.find(x=>x.width===width&&x.theme===theme&&x.selector===actual).actual; + results.push({theme,width,page:name,sampleWithFixtureDescription:box,actual:a,deltaHeight:a.height-box.height}); + await page.screenshot({path:`${out}/${name}-${theme}-${width}-sample-description-normalized.png`}); + }await page.close(); + } + await fs.writeFile(out+'/description-reflow.json',JSON.stringify(results,null,2)); + console.log('normalized reflow comparisons',results.length,'maximum height delta',Math.max(...results.map(r=>Math.abs(r.deltaHeight)))); +}finally{await browser.close()} diff --git a/e2e/hel731.cjs b/e2e/hel731.cjs new file mode 100644 index 00000000..3020bcdc --- /dev/null +++ b/e2e/hel731.cjs @@ -0,0 +1,107 @@ +// B3: real local API, disposable database and fake ComfyUI only. +const {chromium} = require(process.env.PLAYWRIGHT_MODULE_PATH || 'playwright'); +const fs=require('node:fs'),http=require('node:http'),assert=require('node:assert/strict'); +const API='http://127.0.0.1:8247',WEB='http://127.0.0.1:5173',out='e2e/shots/hel731'; +fs.mkdirSync(out,{recursive:true}); const checks=[],errors=[]; +const ok=(name,value)=>{assert(value,name);checks.push(name);console.log('PASS',name)}; +async function api(p,b,method){const r=await fetch(API+p,{method:method||(b?'POST':'GET'),headers:{'Content-Type':'application/json'},body:b?JSON.stringify(b):undefined});if(!r.ok)throw Error(p+' '+await r.text());return r.json()} +async function wait(fn){for(let i=0;i<120;i++){const x=await fn();if(x)return x;await new Promise(r=>setTimeout(r,150))}throw Error('condition timeout')} +const base=id=>'/api/workbench/projects/'+id; +const fixtures={ + script:{text:'第一场：清晨的海岸，女孩把一只纸船放入海水。她等候着父亲的归来。第二场：纸船带回一片树叶，女孩望向海平面，知道旅程才刚刚开始。'}, + style:{directions:[{id:'s1',name:'晨光',description:'暖光',prompt:'warm light'},{id:'s2',name:'蓝调',description:'冷光',prompt:'blue hour'}]}, + storyboard:{shots:Array.from({length:12},(_,i)=>({id:'board-'+i,scene:'1',shot_size:'远景',camera:'固定',description:'女孩沿着海岸走向灯塔，纸船随海风起伏。',dialog:i%2?'你好':'',duration_sec:5}))}, + assets:{assets:[{id:'asset-a',kind:'character',name:'海边女孩',description:'女孩',prompt:'girl on coast'}]}, + shot:{shots:[{id:'shot-a',shot_no:'S1',description:'女孩走向灯塔',prompt:'girl walks toward lighthouse',duration_sec:4}]} +}; +(async()=>{ + const b=await chromium.launch({executablePath:process.env.CHROMIUM_EXECUTABLE_PATH,args:['--no-sandbox','--disable-dev-shm-usage']}); + const sample=http.createServer((req,res)=>{res.setHeader('Content-Type','text/html;charset=utf-8');res.end(fs.readFileSync('../attachments/夜片场-多主题交互样本.html'))});await new Promise(r=>sample.listen(0,'127.0.0.1',r)); + const c=await b.newContext({viewport:{width:1440,height:900}});await c.tracing.start({screenshots:true,snapshots:true,sources:true});const p=await c.newPage();p.setDefaultTimeout(15000);p.on('pageerror',e=>errors.push(e.message)); + try{ + const f=JSON.parse(fs.readFileSync('e2e/shots/reference/fixtures.json')); + const proj=await api('/api/projects',{title:'隔离验证 · 海岸来信',idea:'纸船带回一片树叶'}),other=await api('/api/projects',{title:'隔离验证 · 独立项目'}); + for(const [stage,content] of Object.entries(fixtures)){ + await api(base(proj.id)+'/stages/'+stage,{content},'PATCH'); + if(stage==='script'||stage==='style')await api(base(proj.id)+'/stages/'+stage+'/confirm',stage==='style'?{chosen_style_id:'s1'}:{}); + } + // Verify real UI selection, compare modal and explicit confirmation. + await p.goto(WEB+'/workbench/'+proj.id+'?stage=storyboard');await p.locator('.storyboard-card').first().waitFor(); + ok('分镜显示12张真实镜头卡',(await p.locator('.storyboard-card').count())===12); + ok('固定确认首屏可见',await p.locator('[data-testid=stage-confirm-btn]').isVisible()); + await api(base(proj.id)+'/stages/storyboard/confirm',{}); + await api(base(proj.id)+'/stages/storyboard',{content:{shots:fixtures.storyboard.shots.map((x,i)=>i?x:{...x,description:'已编辑的第一个镜头'})}},'PATCH'); + await p.reload();await p.getByRole('button',{name:'对比已确认版',exact:true}).click();await p.locator('.project-compare').waitFor();await p.screenshot({path:out+'/compare-modal.png'});await p.keyboard.press('Escape'); + await p.locator('[data-testid=stage-restore-btn]').click();await wait(async()=>JSON.stringify((await api(base(proj.id))).stages.find(s=>s.stage_key==='storyboard').content)===JSON.stringify(fixtures.storyboard));ok('恢复真实确认快照',true); + await api(base(proj.id)+'/stages/storyboard',{content:fixtures.storyboard},'PATCH'); + await api(base(proj.id)+'/stages/storyboard',{content:{shots:fixtures.storyboard.shots.map((x,i)=>i?x:{...x,description:'等待确认的新草稿'})}},'PATCH'); + await p.reload();await p.locator('[data-testid=stage-confirm-btn]').click();await wait(async()=>new URL(p.url()).searchParams.get('stage')==='assets');ok('仅显式确认后进入下一阶段',true); + // Fixed footer saves the panel's edited draft and prevents stale confirmation. + await p.goto(WEB+'/workbench/'+proj.id+'?stage=storyboard');await p.locator('.storyboard-card').first().waitFor(); + await p.getByRole('button',{name:'编辑',exact:true}).click();await p.locator('.shot-edit textarea').first().fill('通过固定底栏保存的新镜头描述'); + ok('编辑期间禁止确认旧内容',await p.locator('[data-testid=stage-confirm-btn]').isDisabled()); + await p.locator('[data-testid=stage-save-btn]').click();await wait(async()=>JSON.stringify(await api(base(proj.id))).includes('通过固定底栏保存的新镜头描述'));ok('固定底栏保存实际编辑草稿',true); + for(const stage of ['script','style','storyboard','assets','shot']){ + await p.locator(`[data-stage=${stage}]`).click();await p.screenshot({path:`${out}/stage-${stage}.png`}); + ok('阶段切换 '+stage,new URL(p.url()).searchParams.get('stage')===stage); + } + await p.locator('[data-stage=storyboard]').click();await p.locator('[data-testid=stage-instruction]').fill('分镜专属要求');await p.locator('[data-stage=style]').click();ok('阶段要求不串阶段',await p.locator('[data-testid=stage-instruction]').inputValue()==='');await p.locator('[data-stage=storyboard]').click();ok('切回阶段保留要求',await p.locator('[data-testid=stage-instruction]').inputValue()==='分镜专属要求');await p.locator('[data-testid=stage-instruction]').fill(''); + await p.locator('[data-stage=storyboard]').click();await p.locator('.project-content').evaluate(e=>e.scrollTop=e.scrollHeight);await p.screenshot({path:out+'/long-scroll.png'});ok('长内容滚动时固定确认可用',await p.locator('[data-testid=stage-confirm-btn]').isVisible()); + // Project navigation stays scoped; edits from the old component cannot write into the new project. + await p.goto(WEB+'/workbench/'+other.id+'?stage=script');await p.locator('[data-testid=workbench-page]').waitFor();ok('跨项目不带旧镜头',await p.locator('.storyboard-card').count()===0); + // Script import uses the original import endpoint. + await api(base(other.id)+'/stages/script/import',{text:fixtures.script.text});ok('剧本导入保留正式确认语义',(await api(base(other.id))).stages.find(s=>s.stage_key==='script').status==='confirmed'); + // Create a real 3D composition, render it in the existing viewport and save a screenshot. + await p.goto(WEB+'/build-scene');await p.waitForTimeout(2000);await p.screenshot({path:out+'/scene-entry.png'}); + await p.locator('canvas').first().waitFor(); + await p.locator('.toolbar .capture').click(); + const scene = await wait(async () => (await api('/api/shots')).find(s => s.title)); + const cap = await wait(async () => (await api('/api/shots/'+scene.id+'/captures'))[0]); + ok('真实三维视口截图写入隔离存储',!!cap.file_path); + // Five-stage source -> real declared image slot -> fake generation -> explicit source attachment. + const q=new URLSearchParams({kind:'video',wf:String(f.h3),from:'workbench',project:String(proj.id),stage:'shot',source_kind:'shot',source_id:'shot-a',label:'镜头 S1',prompt:fixtures.shot.shots[0].prompt}); + await p.goto(WEB+'/create?'+q);await p.locator('#desk-prompt').waitFor(); + await p.getByRole('button',{name:'管理素材',exact:false}).click();await p.getByRole('button',{name:'从三维搭景截取',exact:true}).first().click();await p.locator('.capture-choices button').first().click(); + await p.getByRole('button',{name:'从三维搭景截取',exact:true}).nth(1).click();await p.locator('.capture-choices button').first().click(); + await p.screenshot({path:out+'/capture-selected.png'});await p.getByRole('button',{name:'完成',exact:true}).click(); + fs.writeFileSync('e2e/fake_mode.json',JSON.stringify({mode:'ok',delay_sec:0,videos:true,unique_filename:true})); + const before=Math.max(0,...(await api('/api/playground/jobs')).map(j=>j.id));await p.locator('.gen').click(); + const job=await wait(async()=>(await api('/api/playground/jobs')).find(j=>j.id>before&&j.status==='done')); + ok('假服务生成保留来源镜头',JSON.stringify(job.payload).includes('shot-a')); + await p.getByRole('button',{name:'存入项目',exact:true}).click();await wait(async()=>JSON.stringify(await api(base(proj.id))).includes(job.output_paths[0]));ok('截图参考生成结果回流来源项目',true); + ok('回流不串项目',!JSON.stringify(await api(base(other.id))).includes(job.output_paths[0])); + await p.goto(WEB+'/workbench/'+proj.id+'?stage=shot');await p.locator('.vshot-video').waitFor(); + ok('镜头阶段显示本阶段任务',await p.locator('[data-testid=workbench-jobs] .job-row').count()===1); + ok('项目回流视频默认暂停',await p.locator('.vshot-video').evaluate(v=>v.paused)); + ok('项目视频手动播放',await p.locator('.vshot-video').evaluate(async v=>{await v.play();return !v.paused}));await p.screenshot({path:out+'/project-video-playing.png'});await p.locator('.vshot-video').evaluate(v=>v.pause());await p.screenshot({path:out+'/project-video-paused.png'}); + + await p.locator('[data-stage=storyboard]').click();ok('分镜阶段不混入镜头任务',await p.locator('[data-testid=workbench-jobs] .job-row').count()===0); + // Text-only workflows must retain no image slots. + await p.goto(WEB+'/create?kind=image&wf='+f.dual);await p.locator('#desk-prompt').waitFor();ok('文生图无伪造图片槽',await p.locator('.a-slot').count()===0); + // Stable data state for visual evidence; these records live only in this disposable DB. + await api(base(proj.id)+'/stages/storyboard',{content:fixtures.storyboard},'PATCH'); + const sp=await c.newPage();const measures=[]; + for(const [width,height] of [[1440,900],[1366,768],[1280,720]])for(const theme of ['night','day','grade','bluehour']){ + await p.setViewportSize({width,height});await sp.setViewportSize({width,height}); + await p.evaluate(t=>{localStorage.setItem('aigc-theme',t)},theme); + await sp.goto('http://127.0.0.1:'+sample.address().port);await sp.evaluate(t=>{document.documentElement.dataset.theme=t;document.documentElement.classList.add('reduce')},theme); + for(const page of ['studio','project']){ + await p.goto(WEB+(page==='studio'?'/':'/workbench/'+proj.id+'?stage=storyboard')); + await p.locator(page==='studio'?'.studio-hero':'.storyboard-card').first().waitFor(); + await sp.evaluate(v=>{document.querySelectorAll('.page').forEach(e=>e.classList.toggle('on',e.id==='p-'+v))},page); + await sp.waitForTimeout(350);await p.waitForTimeout(100); + if(page==='project')await p.getByRole('button',{name:'选择镜头 3',exact:true}).click(); + await p.screenshot({path:`${out}/${page}-${theme}-${width}-actual.png`});await sp.screenshot({path:`${out}/${page}-${theme}-${width}-sample.png`}); + const selectors=page==='studio'?[['.hero','.studio-hero'],['.copy','.hero-copy'],['.display','.studio-display'],['.studio-wrap','.home'],['.quick','.studio-quick']]:[['.stepper','.stepper'],['.proj-side','.project-side'],['.proj-foot','.project-footer'],['.scard','.storyboard-card'],['.ps-sec .input','.stage-input-wrap'],['#confirmStage','[data-testid=stage-confirm-btn]']]; + ok(`主题 ${theme} ${page} ${width}`, await p.evaluate(t=>document.documentElement.dataset.theme===t,theme)); + const measure=async(pg,sel)=>pg.locator(sel).first().evaluate(e=>{const b=e.getBoundingClientRect(),s=getComputedStyle(e);return {x:b.x,y:b.y,width:b.width,height:b.height,font:s.fontSize,weight:s.fontWeight,radius:s.borderRadius,color:s.color,background:s.backgroundColor}}); + for(const [ref,actual] of selectors)measures.push({page,theme,width,selector:actual,sample:await measure(sp,ref),actual:await measure(p,actual)}); + if(page==='project')ok(`固定确认 ${theme} ${width}`,await p.locator('[data-testid=stage-confirm-btn]').evaluate(e=>e.getBoundingClientRect().bottom<=innerHeight)); + } + } + await p.goto(WEB+'/');await p.locator('.studio-search').click();await p.screenshot({path:out+'/search-open.png'});await p.keyboard.press('Escape');await p.keyboard.press('Control+k');ok('工作室搜索快捷键保留',await p.getByRole('dialog').isVisible());await p.keyboard.press('Escape'); + await p.getByRole('button',{name:'主题',exact:true}).click();await p.locator('.choices .choice').filter({hasText:'日光棚'}).click();await p.waitForTimeout(600);await p.screenshot({path:out+'/theme-operation.png'});ok('主题操作生效',await p.evaluate(()=>document.documentElement.dataset.theme==='day'));await p.keyboard.press('Escape'); + await p.route('**/api/projects',route=>route.fulfill({json:[]}));await p.reload();await p.locator('.studio-hero').waitFor();await p.screenshot({path:out+'/empty-studio.png'});ok('空态不展示样本项目',!(await p.locator('.studio-hero').innerText()).includes('雾港来信'));await p.unroute('**/api/projects'); + fs.writeFileSync(out+'/measurements.json',JSON.stringify(measures,null,2));fs.writeFileSync(out+'/results.json',JSON.stringify({checks,errors},null,2));ok('无浏览器运行错误',errors.length===0); + }finally{await c.tracing.stop({path:out+'/interaction-trace.zip'});await b.close();await new Promise(r=>sample.close(r));} +})().catch(e=>{console.error(e);process.exitCode=1}); diff --git a/e2e/hel774-stability.cjs b/e2e/hel774-stability.cjs new file mode 100644 index 00000000..1e241421 --- /dev/null +++ b/e2e/hel774-stability.cjs @@ -0,0 +1,45 @@ +// Supplemental requirements added to HEL-774: stable dialogs, focus return and unobstructed actions. +const {chromium}=require(process.env.PLAYWRIGHT_MODULE_PATH||'playwright'); +const fs=require('node:fs'),assert=require('node:assert/strict'),http=require('node:http'); +const WEB='http://127.0.0.1:5173',API='http://127.0.0.1:8247',out='../evidence/stability';fs.mkdirSync(out,{recursive:true}); +const records=[],checks=[];const ok=(name,v)=>{assert(v,name);checks.push(name);console.log('PASS',name)}; +const api=async(path,body,method)=>{const r=await fetch(API+path,{method:method||(body?'POST':'GET'),headers:{'Content-Type':'application/json'},body:body?JSON.stringify(body):undefined,signal:AbortSignal.timeout(15000)});assert(r.ok);return r.json()}; +async function settled(p){await p.evaluate(async()=>{await document.fonts.ready;await Promise.all(document.getAnimations().filter(a=>a.effect?.getTiming().iterations!==Infinity).map(a=>a.finished.catch(()=>{})));await Promise.all([...document.images].filter(i=>!i.complete).map(i=>new Promise(r=>{i.onload=r;i.onerror=r})))})} +(async()=>{ + const b=await chromium.launch({executablePath:process.env.CHROMIUM_EXECUTABLE_PATH,args:['--no-sandbox','--disable-dev-shm-usage']});const c=await b.newContext();await c.tracing.start({screenshots:true,snapshots:true});const p=await c.newPage();p.setDefaultTimeout(15000); + const sample=http.createServer((req,res)=>{res.setHeader('Content-Type','text/html;charset=utf-8');res.end(fs.readFileSync('../attachments/夜片场-多主题交互样本.html'))});await new Promise(r=>sample.listen(0,'127.0.0.1',r));const sp=await c.newPage(); + try{ + const proj=(await api('/api/projects')).find(x=>x.title==='隔离验证 · 海岸来信');const path='/api/workbench/projects/'+proj.id+'/stages/storyboard'; + await api(path+'/confirm',{});const stage=(await api('/api/workbench/projects/'+proj.id)).stages.find(s=>s.stage_key==='storyboard');await api(path,{content:{...stage.content,shots:stage.content.shots.map((s,i)=>i?s:{...s,description:'稳定态对比用实际草稿'})}},'PATCH'); + const sizes=(process.env.HEL774_BEFORE==='1'||process.env.HEL774_QUICK==='1')?[[1440,900]]:[[1440,900],[1366,768],[1280,720]],themes=(process.env.HEL774_BEFORE==='1'||process.env.HEL774_QUICK==='1')?['night']:['night','day','grade','bluehour']; + for(const [width,height] of sizes)for(const theme of themes){ + const name=theme+'-'+width;await p.setViewportSize({width,height});await sp.setViewportSize({width,height});await p.goto(WEB);await p.evaluate(t=>localStorage.setItem('aigc-theme',t),theme);await p.goto(WEB+'/workbench/'+proj.id+'?stage=storyboard');await p.locator('.storyboard-card').first().waitFor();await settled(p); + // Modal: stable background and finished animation; close by Escape and check exact invoker. + const compare=p.getByRole('button',{name:'对比已确认版',exact:true});await compare.click();await p.getByRole('dialog').waitFor();await settled(p); + let style=await p.locator('.modal-panel').evaluate(e=>{const s=getComputedStyle(e);return {background:s.backgroundColor,opacity:s.opacity,transform:s.transform,float:getComputedStyle(document.documentElement).getPropertyValue('--float-bg')}});records.push({name,kind:'compare',style});await p.screenshot({path:`${out}/${name}-compare-stable.png`});ok(name+' compare opaque after animation',style.opacity==='1'&&!['rgba(0, 0, 0, 0)','transparent'].includes(style.background));await p.keyboard.press('Escape');await p.getByRole('dialog').waitFor({state:'detached'});ok(name+' compare returns focus',await compare.evaluate(e=>document.activeElement===e)); + // Produce a real save toast, then hit-test both primary actions while it is visible. + await p.getByRole('button',{name:'编辑',exact:true}).click();await p.locator('.shot-edit textarea').first().fill('稳定保存 '+name);await p.locator('[data-testid=stage-save-btn]').click();await p.locator('.toast.success').waitFor();await settled(p); + const hit=await p.locator('.project-footer').evaluate(e=>{const footer=e.getBoundingClientRect();return {footerTop:footer.top,toast:[...document.querySelectorAll('.toast')].map(t=>{const r=t.getBoundingClientRect();return {top:r.top,bottom:r.bottom,left:r.left,right:r.right}}),buttons:[...e.querySelectorAll('button')].map(b=>{const r=b.getBoundingClientRect(),x=r.left+r.width/2,y=r.top+r.height/2;const top=document.elementFromPoint(x,y);return {text:b.textContent.trim(),disabled:b.disabled,centerHit:top===b||b.contains(top),topElement:top?.className}})}});records.push({name,kind:'toast',hit});await p.screenshot({path:`${out}/${name}-toast-visible.png`}); + if(process.env.HEL774_BEFORE!=='1'){ + ok(name+' toast above fixed footer',hit.toast.every(t=>t.bottom<=hit.footerTop));ok(name+' save/confirm centers hit actual buttons',hit.buttons.every(b=>b.centerHit)); + // Actual mouse save with toast present proves the overlay does not intercept it. + await p.locator('[data-testid=stage-save-btn]').click();ok(name+' save clickable with toast',true); + } + await p.waitForTimeout(300);while(await p.locator('.toast .dismiss').count())await p.locator('.toast .dismiss').first().click();await p.locator('.toast').waitFor({state:'detached'});await settled(p); + await p.locator('.project-content').evaluate(e=>e.scrollTop=e.scrollHeight);await p.screenshot({path:`${out}/${name}-long-scroll-clear-footer.png`});ok(name+' footer visible after toast clears',await p.locator('[data-testid=stage-confirm-btn]').isVisible()); + await p.goto(WEB);const search=p.locator('.studio-search');await search.click();await p.getByRole('dialog').waitFor();await settled(p);style=await p.locator('.modal-panel').evaluate(e=>{const s=getComputedStyle(e);return {background:s.backgroundColor,opacity:s.opacity,transform:s.transform}});records.push({name,kind:'search',style});await p.screenshot({path:`${out}/${name}-search-stable.png`});ok(name+' search opaque after animation',style.opacity==='1'&&!['rgba(0, 0, 0, 0)','transparent'].includes(style.background));await p.keyboard.press('Escape');await p.getByRole('dialog').waitFor({state:'detached'});ok(name+' search returns focus',await search.evaluate(e=>document.activeElement===e)); + // Re-shoot the complete unmodified sample/app pairs on this exact final product revision. + if(process.env.HEL774_BEFORE!=='1'){ + await sp.goto('http://127.0.0.1:'+sample.address().port);await sp.evaluate(t=>{document.documentElement.dataset.theme=t;document.documentElement.classList.add('reduce')},theme); + for(const page of ['studio','project']){await p.goto(WEB+(page==='studio'?'/':'/workbench/'+proj.id+'?stage=storyboard'));await p.locator(page==='studio'?'.studio-hero':'.storyboard-card').first().waitFor();await sp.evaluate(page=>document.querySelectorAll('.page').forEach(e=>e.classList.toggle('on',e.id==='p-'+page)),page);await settled(p);await settled(sp);await p.mouse.move(0,0);await p.screenshot({path:`../evidence/images/${page}-${theme}-${width}-actual.png`});await sp.screenshot({path:`../evidence/images/${page}-${theme}-${width}-sample.png`})} + } + } + if(process.env.HEL774_BEFORE!=='1'){ + await p.goto(WEB+'/workbench/'+proj.id+'?stage=storyboard');await p.locator('.storyboard-card').first().waitFor(); + await p.locator('[data-testid=stage-save-btn]').click();await p.locator('.toast.success').waitFor();await settled(p);await p.screenshot({path:out+'/confirm-click-with-toast.png'}); + await Promise.all([p.waitForURL('**?stage=assets'),p.locator('[data-testid=stage-confirm-btn]').click()]); + ok('actual confirm clickable with toast and advances only explicitly',(await api('/api/workbench/projects/'+proj.id)).stages.find(s=>s.stage_key==='storyboard').status==='confirmed');await p.screenshot({path:out+'/confirm-click-result.png'}); + } + + }finally{fs.writeFileSync(out+(process.env.HEL774_BEFORE==='1'?'/before.json':process.env.HEL774_QUICK==='1'?'/quick-results.json':'/results.json'),JSON.stringify({records,checks},null,2));await c.tracing.stop({path:out+(process.env.HEL774_QUICK==='1'?'/quick-trace.zip':'/trace.zip')});await b.close();await new Promise(r=>sample.close(r))} +})().catch(e=>{console.error(e);process.exitCode=1}); diff --git a/e2e/hel774.cjs b/e2e/hel774.cjs new file mode 100644 index 00000000..fb60c447 --- /dev/null +++ b/e2e/hel774.cjs @@ -0,0 +1,93 @@ +// HEL-774 focused repair verification. Uses only the runner's disposable real API records. +const {chromium}=require(process.env.PLAYWRIGHT_MODULE_PATH || 'playwright'); +const fs=require('node:fs'),http=require('node:http'),assert=require('node:assert/strict'); +const out='../evidence', WEB='http://127.0.0.1:5173', API='http://127.0.0.1:8247'; +const resume=process.env.HEL774_ONLY_OPS==='1'; +const previous=resume?JSON.parse(fs.readFileSync('../evidence/results.json')):{checks:[]}; +const rows=resume?JSON.parse(fs.readFileSync('../evidence/measurements.json')):[],checks=previous.checks,errors=[],tags=resume?JSON.parse(fs.readFileSync('../evidence/tags.json')):[]; +const ok=(name,value)=>{assert(value,name);checks.push(name);console.log('PASS',name)}; +const api=async(path,body,method)=>{const r=await fetch(API+path,{method:method||(body?'POST':'GET'),headers:{'Content-Type':'application/json'},body:body?JSON.stringify(body):undefined,signal:AbortSignal.timeout(15000)});assert(r.ok,await r.clone().text());return r.json()}; +const fingerprint=loc=>loc.evaluate(e=>{const s=getComputedStyle(e),r=e.getBoundingClientRect();return Object.fromEntries(['backgroundColor','borderTopColor','borderTopWidth','paddingLeft','paddingRight','fontSize','fontWeight','borderRadius','transform','opacity'].map(k=>[k,s[k]]).concat([['width',r.width],['height',r.height]]))}); +const wait=ms=>new Promise(r=>setTimeout(r,ms)); +(async()=>{ + fs.mkdirSync(out+'/images',{recursive:true});fs.mkdirSync(out+'/closeups',{recursive:true}); + const server=http.createServer((req,res)=>{res.setHeader('Content-Type','text/html;charset=utf-8');res.end(fs.readFileSync('../attachments/夜片场-多主题交互样本.html'))}); + const browser=await chromium.launch({executablePath:process.env.CHROMIUM_EXECUTABLE_PATH,args:['--no-sandbox','--disable-dev-shm-usage']}); + await new Promise(r=>server.listen(0,'127.0.0.1',r)); + const ctx=await browser.newContext();await ctx.tracing.start({screenshots:true,snapshots:true,sources:true}); + const p=await ctx.newPage(),sp=await ctx.newPage();p.on('pageerror',e=>errors.push(e.message));p.setDefaultTimeout(15000); + try{ + const projects=await api('/api/projects'),proj=projects.find(x=>x.title==='隔离验证 · 海岸来信');assert(proj); + const projectPath='/workbench/'+proj.id+'?stage=storyboard'; + if(!resume)for(const [width,height] of [[1440,900],[1366,768],[1280,720]])for(const theme of ['night','day','grade','bluehour']){ + await p.setViewportSize({width,height});await sp.setViewportSize({width,height}); + await sp.goto('http://127.0.0.1:'+server.address().port);await sp.evaluate(t=>{document.documentElement.dataset.theme=t;document.documentElement.classList.add('reduce')},theme); + await p.goto(WEB);await p.evaluate(t=>{localStorage.setItem('aigc-theme',t)},theme); + for(const page of ['studio','project']){ + const name=`${page}-${theme}-${width}`; + await p.goto(WEB+(page==='studio'?'/':projectPath));await p.locator(page==='studio'?'.confirm-item':'.storyboard-card').first().waitFor(); + await sp.evaluate(v=>document.querySelectorAll('.page').forEach(e=>e.classList.toggle('on',e.id==='p-'+v)),page); + await p.mouse.move(0,0);await sp.mouse.move(0,0);await wait(400); + await p.screenshot({path:`${out}/images/${name}-actual.png`});await sp.screenshot({path:`${out}/images/${name}-sample.png`}); + const scope=page==='studio'?'.home':'.project-workspace'; + const selectors=await p.locator(scope+' .a-btn.secondary').evaluateAll(els=>els.map((e,i)=>({i,text:e.textContent.trim(),classes:e.className,disabled:!!e.disabled,tag:e.tagName}))); + ok(name+' secondary controls present',selectors.length>0); + for(const item of selectors){ + const al=p.locator(scope+' .a-btn.secondary').nth(item.i); + // Same text on a sample control, preserving the original sample's class rules. + const id='hel774-reference';await sp.evaluate(({id,text,small})=>{document.getElementById(id)?.remove();const e=document.createElement('button');e.id=id;e.className='btn'+(small?' sm':'');e.textContent=text;e.style.position='fixed';e.style.left='100px';e.style.top='100px';document.querySelector('.page.on').append(e)}, {id,text:item.text,small:item.classes.split(' ').includes('sm')}); + const sl=sp.locator('#'+id); + // Every actual secondary instance, including small controls. Disabled anchors are ARIA fixtures. + for(const state of ['normal','hover','active','disabled']){ + await al.evaluate(e=>{e.removeAttribute('disabled');e.removeAttribute('aria-disabled')});await sl.evaluate(e=>e.disabled=false); + await p.mouse.move(0,0);await sp.mouse.move(0,0); + if(state==='disabled'){await al.evaluate(e=>e.tagName==='BUTTON'?e.disabled=true:e.setAttribute('aria-disabled','true'));await sl.evaluate(e=>e.disabled=true)} + if(state==='hover'||state==='active'){await al.hover();await sl.hover()} + if(state==='active'){await p.mouse.down();await sp.mouse.down()} + await wait(220);const actual=await fingerprint(al),sample=await fingerprint(sl); + rows.push({page,theme,width,text:item.text,classes:item.classes,state,syntheticDisabled:state==='disabled',sample,actual}); + const props=['backgroundColor','borderTopColor','borderTopWidth','paddingLeft','paddingRight','fontSize','fontWeight']; + if(state==='active')props.push('transform'); + for(const key of props)assert.equal(actual[key],sample[key],`${name} ${item.text} ${state} ${key}`); + if(!item.classes.includes('b3-grow'))assert(Math.abs(actual.width-sample.width)<0.05,`${name} ${item.text} ${state} width ${actual.width} vs ${sample.width}`); + if(item.i===0 && (state==='normal'||state==='hover'||state==='disabled')){await al.screenshot({path:`${out}/closeups/${name}-${state}-actual.png`});await sl.screenshot({path:`${out}/closeups/${name}-${state}-sample.png`})} + if(state==='active'){await p.mouse.move(0,0);await sp.mouse.move(0,0);await p.mouse.up();await sp.mouse.up()} + } + await al.evaluate((e,disabled)=>{e.removeAttribute('aria-disabled');if(disabled)e.setAttribute('disabled','');else e.removeAttribute('disabled')},item.disabled);await sl.evaluate(e=>e.remove()); + } + await p.mouse.move(0,0);await sp.mouse.move(0,0); + if(page==='studio'){ + const a=await fingerprint(p.locator('.confirm-item').first()),s=await fingerprint(sp.locator('.confirm-item').first());rows.push({page,theme,width,selector:'.confirm-item',actual:a,sample:s});ok(name+' confirmation font inherits sample 13px',a.fontSize===s.fontSize&&a.fontSize==='13px'); + await p.locator('.confirm-item').first().screenshot({path:`${out}/closeups/${name}-confirm-actual.png`});await sp.locator('.confirm-item').first().screenshot({path:`${out}/closeups/${name}-confirm-sample.png`}); + } + const tagRows=await p.locator(scope+' .a-tag').evaluateAll(els=>els.map(e=>{const before=e.getBoundingClientRect();const saved=e.style.columnGap;e.style.columnGap='0px';const after=e.getBoundingClientRect();e.style.columnGap=saved;return {text:e.textContent.trim(),elements:e.children.length,childNodes:[...e.childNodes].filter(n=>n.nodeType!==3||n.textContent.trim()).map(n=>n.nodeType),before:before.width,after:after.width,gap:getComputedStyle(e).columnGap}}));tags.push({page,theme,width,tags:tagRows});ok(name+' single-content tags unaffected by gap',tagRows.every(t=>t.elements===0&&t.before===t.after)); + // Primary and small variants keep their own existing padding. + ok(name+' primary padding preserved',await p.locator(scope+' .a-btn.primary').first().evaluate(e=>getComputedStyle(e).paddingLeft==='12px')); + } + // Keep actual empty state evidence, without manufacturing demo projects or media. + await p.route('**/api/projects',r=>r.fulfill({json:[]}));await p.goto(WEB);await p.locator('.studio-hero').waitFor();await wait(100);await p.screenshot({path:`${out}/images/empty-${theme}-${width}.png`});ok(`empty ${theme} ${width}`,await p.locator('.studio-display').innerText().then(t=>t.includes('从一个想法开始')));await p.unroute('**/api/projects'); + } + // Meaningful operation checks for the affected buttons, with actual API persistence. + await p.goto(WEB);await p.locator('.studio-hero .secondary').waitFor();const heroHref=await p.locator('.studio-hero .secondary').getAttribute('href');await Promise.all([p.waitForURL(WEB+heroHref),p.locator('.studio-hero .secondary').click()]);ok('studio secondary opens real project stage',new URL(p.url()).pathname+new URL(p.url()).search===heroHref); + await p.goto(WEB+projectPath);await p.locator('.storyboard-card').first().waitFor();await p.getByRole('button',{name:'编辑',exact:true}).click();await p.locator('.shot-edit textarea').first().fill('HEL774 次级保存按钮实际操作');ok('editing prevents stale confirmation',await p.locator('[data-testid=stage-confirm-btn]').isDisabled());await p.route('**/stages/storyboard',async route=>{if(route.request().method()==='PATCH')await wait(1000);await route.continue()});await p.locator('[data-testid=stage-save-btn]').click();await p.locator('[data-testid=stage-save-btn]:disabled').waitFor();ok('save secondary disabled while request pending',await p.locator('[data-testid=stage-save-btn]').isDisabled());await p.screenshot({path:out+'/images/operation-save-pending.png'});for(let n=0;n<50;n++){if(JSON.stringify(await api('/api/workbench/projects/'+proj.id)).includes('HEL774 次级保存按钮实际操作'))break;await wait(100)}ok('secondary saves actual edited draft',JSON.stringify(await api('/api/workbench/projects/'+proj.id)).includes('HEL774 次级保存按钮实际操作'));await p.screenshot({path:out+'/images/operation-save.png'});await p.unroute('**/stages/storyboard'); + await p.goto(WEB);await Promise.all([p.waitForURL('**/workbench/**'),p.locator('.confirm-item .secondary').first().click()]);ok('pending secondary navigates to draft',p.url().includes('/workbench/')); + await p.goto(WEB);await p.locator('.studio-search').click();ok('search remains functional',await p.getByRole('dialog').isVisible());await p.keyboard.press('Escape');await p.keyboard.press('Control+k');ok('search shortcut preserved',await p.getByRole('dialog').isVisible());await p.keyboard.press('Escape'); + // B1/B2: compare live shared controls with exact previous shared declarations applied via CSSOM. + const protections=[]; + for(const route of ['/create','/workflows','/tasks','/settings']){ + await p.goto(WEB+route);await wait(800); + ok(route+' sidebar retained',await p.locator('aside.sidebar').isVisible()); + for(const theme of ['night','day','grade','bluehour']){ + await p.mouse.move(0,0);await p.evaluate(t=>document.documentElement.dataset.theme=t,theme);await wait(600); + const buttons=p.locator('.a-btn:visible');const count=await buttons.count(); + const baseline=await buttons.evaluateAll(es=>es.map(e=>{const s=getComputedStyle(e),b=e.getBoundingClientRect();return {text:e.textContent.trim(),bg:s.backgroundColor,border:s.borderTopColor,pad:s.paddingLeft,width:b.width,height:b.height,font:s.fontSize}})); + await p.evaluate(()=>{window.hel774Rules=[];for(const sheet of document.styleSheets){let rules;try{rules=sheet.cssRules}catch{continue}for(const r of rules){if(!r.selectorText)continue;const sel=r.selectorText;if(sel==='.a-btn'){window.hel774Rules.push([r,r.style.cssText]);r.style.padding='0 var(--sp-6)'}if(sel==='.a-btn.secondary'){window.hel774Rules.push([r,r.style.cssText]);r.style.borderColor='var(--line)';r.style.removeProperty('--button-padding');r.style.removeProperty('--button-active-transform')}}}}); + const previous=await buttons.evaluateAll(es=>es.map(e=>{const s=getComputedStyle(e),b=e.getBoundingClientRect();return {text:e.textContent.trim(),bg:s.backgroundColor,border:s.borderTopColor,pad:s.paddingLeft,width:b.width,height:b.height,font:s.fontSize}})); + await p.evaluate(()=>window.hel774Rules.forEach(([r,css])=>r.style.cssText=css));assert.deepEqual(baseline,previous,route+' default controls changed');protections.push({route,theme,count,baseline,previous}); + await p.screenshot({path:`${out}/images/protect-${route.slice(1)}-${theme}.png`}); + } + } + fs.writeFileSync(out+'/protections.json',JSON.stringify(protections,null,2)); + ok('no browser errors',errors.length===0); + }finally{fs.writeFileSync(out+'/measurements.json',JSON.stringify(rows,null,2));fs.writeFileSync(out+'/tags.json',JSON.stringify(tags,null,2));fs.writeFileSync(out+'/results.json',JSON.stringify({checks,errors},null,2));await ctx.tracing.stop({path:out+'/interaction-trace.zip'});await browser.close();await new Promise(r=>server.close(r))} +})().catch(e=>{console.error(e);process.exitCode=1}); diff --git a/e2e/hel776.cjs b/e2e/hel776.cjs new file mode 100644 index 00000000..fa191206 --- /dev/null +++ b/e2e/hel776.cjs @@ -0,0 +1,93 @@ +// HEL-776: real isolated pages; sample controls are state fixtures, never product data. +const {chromium}=require(process.env.PLAYWRIGHT_MODULE_PATH||'playwright'); +const fs=require('node:fs'),http=require('node:http'),assert=require('node:assert/strict'),cp=require('node:child_process'); +const out='../evidence',WEB='http://127.0.0.1:5173',API='http://127.0.0.1:8247'; +const rows=[],checks=[],errors=[],protections=[]; +const ok=(name,v)=>{assert(v,name);checks.push(name);console.log('PASS',name)}; +const wait=ms=>new Promise(r=>setTimeout(r,ms)); +const api=async(path,body,method)=>{const r=await fetch(API+path,{method:method||(body?'POST':'GET'),headers:{'Content-Type':'application/json'},body:body?JSON.stringify(body):undefined});assert(r.ok,await r.clone().text());return r.json()}; +const style=loc=>loc.evaluate(e=>{const s=getComputedStyle(e),r=e.getBoundingClientRect();return Object.fromEntries(['opacity','filter','backgroundColor','backgroundImage','color','boxShadow','borderRadius','paddingLeft','paddingRight','fontSize','fontWeight','borderTopColor','borderTopWidth','transform'].map(k=>[k,s[k]]).concat([['height',r.height]]))}); +async function settled(p){await p.evaluate(async()=>{await document.fonts.ready;await Promise.all(document.getAnimations().filter(a=>a.effect?.getTiming().iterations!==Infinity).map(a=>a.finished.catch(()=>{})))});await wait(180)} +(async()=>{ + fs.mkdirSync(out+'/closeups',{recursive:true});fs.mkdirSync(out+'/operations',{recursive:true}); + const server=http.createServer((req,res)=>{res.setHeader('Content-Type','text/html;charset=utf-8');res.end(fs.readFileSync('../materials/夜片场-多主题交互样本.html'))});await new Promise(r=>server.listen(0,'127.0.0.1',r)); + const b=await chromium.launch({args:['--no-sandbox','--disable-dev-shm-usage']});const c=await b.newContext();await c.tracing.start({screenshots:process.env.HEL776_PROTECT_ONLY!=='1',snapshots:true,sources:true}); + const p=await c.newPage(),sp=await c.newPage();p.setDefaultTimeout(15000);p.on('pageerror',e=>errors.push(e.message)); + const proj=(await api('/api/projects')).find(x=>x.title==='隔离验证 · 海岸来信'),path='/api/workbench/projects/'+proj.id+'/stages/storyboard',url=WEB+'/workbench/'+proj.id+'?stage=storyboard'; + try{ + if(process.env.HEL776_PROTECT_ONLY!=='1'){ + for(const [width,height] of [[1440,900],[1366,768],[1280,720]])for(const theme of ['night','day','grade','bluehour']){ + await p.setViewportSize({width,height});await sp.setViewportSize({width,height});await sp.goto('http://127.0.0.1:'+server.address().port);await sp.evaluate(t=>document.documentElement.dataset.theme=t,theme); + await p.goto(WEB);await p.evaluate(t=>localStorage.setItem('aigc-theme',t),theme); + for(const page of ['studio','project']){ + await p.goto(page==='studio'?WEB:url);await p.locator(page==='studio'?'.studio-hero':'.storyboard-card').first().waitFor();await settled(p); + const scope=page==='studio'?'.home':'.project-workspace'; + const controls=p.locator(scope+' .a-btn.secondary'); + for(let i=0;i({text:e.textContent.trim(),small:e.classList.contains('sm'),disabled:e.disabled,aria:e.getAttribute('aria-disabled')})); + await sp.evaluate(item=>{document.querySelector('#fixture')?.remove();const e=document.createElement('button');e.id='fixture';e.className='btn'+(item.small?' sm':'');e.textContent=item.text;Object.assign(e.style,{position:'fixed',left:'100px',top:'100px'});document.body.append(e)},item); + const sl=sp.locator('#fixture'); + for(const state of ['normal','hover','active']){ + await al.evaluate(e=>{e.removeAttribute('disabled');e.removeAttribute('aria-disabled')});await p.mouse.move(0,0);await sp.mouse.move(0,0); + if(state!=='normal'){await al.hover();await sl.hover()}if(state==='active'){await p.mouse.down();await sp.mouse.down()} + await wait(180);const actual=await style(al),sample=await style(sl);rows.push({page,theme,width,text:item.text,small:item.small,state,actual,sample}); + for(const k of ['backgroundColor','borderTopColor','borderTopWidth','borderRadius','paddingLeft','paddingRight','fontSize','fontWeight','height',...(state==='active'?['transform']:[])])assert.equal(actual[k],sample[k],`${page}/${theme}/${width}/${item.text}/${state}/${k}`); + if(state==='active'){await p.mouse.move(0,0);await sp.mouse.move(0,0);await p.mouse.up();await sp.mouse.up()} + } + await al.evaluate((e,item)=>{if(item.disabled)e.setAttribute('disabled','');if(item.aria!==null)e.setAttribute('aria-disabled',item.aria)},item); + } + ok(`${page} ${theme} ${width}: every normal/small secondary normal/hover/active equals sample`,true); + } + // Native disabled confirmation caused by an actual unsaved edit, then actual save restores it. + await p.goto(url);await p.locator('.storyboard-card').first().waitFor();await p.getByRole('button',{name:'编辑',exact:true}).click();await p.locator('.shot-edit textarea').first().fill('HEL776 '+theme+' '+width); + const confirm=p.locator('[data-testid=stage-confirm-btn]');ok(`${theme} ${width} unsaved draft disables confirmation`,await confirm.isDisabled()); + let confirms=0;const onRequest=req=>{if(req.method()==='POST'&&req.url().endsWith('/stages/storyboard/confirm'))confirms++};p.on('request',onRequest); + await sp.evaluate(text=>{document.querySelector('#fixture')?.remove();const e=document.createElement('button');e.id='fixture';e.className='btn primary';e.textContent=text;e.disabled=true;Object.assign(e.style,{position:'fixed',left:'100px',top:'100px'});document.body.append(e)},await confirm.innerText()); + for(const state of ['disabled','enabled']){ + if(state==='enabled'){ + await p.locator('[data-testid=stage-save-btn]').click();await p.locator('.toast.success').waitFor();await p.waitForFunction(()=>!document.querySelector('[data-testid=stage-confirm-btn]').disabled);await sp.locator('#fixture').evaluate(e=>e.disabled=false); + ok(`${theme} ${width} save actually persists draft`,JSON.stringify(await api('/api/workbench/projects/'+proj.id)).includes('HEL776 '+theme+' '+width)); + } + await p.mouse.move(0,0);await sp.mouse.move(0,0);await settled(p);const actual=await style(confirm),sample=await style(sp.locator('#fixture'));rows.push({page:'project',theme,width,kind:'primary',state,actual,sample}); + for(const k of ['opacity','filter','backgroundColor','backgroundImage','color','boxShadow','borderRadius','height','paddingLeft','fontSize'])assert.equal(actual[k],sample[k],`${theme}/${width}/primary/${state}/${k}`); + if(width===1440){await confirm.screenshot({path:`${out}/closeups/${theme}-${state}-actual.png`});await sp.locator('#fixture').screenshot({path:`${out}/closeups/${theme}-${state}-sample.png`});await p.screenshot({path:`${out}/operations/${theme}-${state}.png`})} + if(state==='disabled'){ + const r=await confirm.boundingBox();await p.mouse.click(r.x+r.width/2,r.y+r.height/2);await confirm.evaluate(e=>e.click());await wait(150);ok(`${theme} ${width} disabled native click sends zero requests`,confirms===0); + } + } + const hits=await p.locator('.project-footer').evaluate(e=>{const top=e.getBoundingClientRect().top;return {top,toasts:[...document.querySelectorAll('.toast')].map(t=>t.getBoundingClientRect().bottom),buttons:[...e.querySelectorAll('button')].map(b=>{const r=b.getBoundingClientRect(),hit=document.elementFromPoint(r.x+r.width/2,r.y+r.height/2);return b===hit||b.contains(hit)})}}); + ok(`${theme} ${width} toast avoids footer and actions remain hittable`,hits.buttons.every(Boolean)&&hits.toasts.every(bottom=>bottom<=hits.top)); + // Bound pending confirmation to verify native duplicate prevention; release to real API. + let release;const gate=new Promise(r=>release=r);await p.route('**/stages/storyboard/confirm',async r=>{await gate;await r.continue()}); + const response=p.waitForResponse(r=>r.url().endsWith('/stages/storyboard/confirm')&&r.request().method()==='POST');await confirm.click();await p.locator('[data-testid=stage-confirm-btn]:disabled').waitFor();await confirm.evaluate(e=>e.click());ok(`${theme} ${width} pending confirmation sends one request`,confirms===1);release();assert((await response).ok());await p.waitForURL('**?stage=assets');p.off('request',onRequest);await p.unroute('**/stages/storyboard/confirm'); + ok(`${theme} ${width} confirmation succeeds after save`,(await api('/api/workbench/projects/'+proj.id)).stages.find(s=>s.stage_key==='storyboard').status==='confirmed'); + // Restore awaiting_confirm through the real draft API, never through a status fixture. + const data=(await api('/api/workbench/projects/'+proj.id)).stages.find(s=>s.stage_key==='storyboard');await api(path,{content:{...data.content,shots:data.content.shots.map((s,i)=>i?s:{...s,description:s.description+' · next'})}},'PATCH'); + } + // Search + comparison focus and stable panel regression, all themes at 1440. + await p.setViewportSize({width:1440,height:900}); + for(const theme of ['night','day','grade','bluehour']){ + await p.goto(WEB);await p.evaluate(t=>localStorage.setItem('aigc-theme',t),theme);await p.reload();const trigger=p.locator('.studio-search');await trigger.click();await p.getByRole('dialog').waitFor();await settled(p);ok(theme+' search stable opacity',await p.locator('.modal-panel').evaluate(e=>getComputedStyle(e).opacity==='1'));await p.keyboard.press('Escape');await p.getByRole('dialog').waitFor({state:'detached'});ok(theme+' search focus restored',await trigger.evaluate(e=>e===document.activeElement)); + await p.goto(url);const compare=p.getByRole('button',{name:'对比已确认版',exact:true});await compare.click();await p.getByRole('dialog').waitFor();await settled(p);ok(theme+' compare stable opacity',await p.locator('.modal-panel').evaluate(e=>getComputedStyle(e).opacity==='1'));await p.keyboard.press('Escape');await p.getByRole('dialog').waitFor({state:'detached'});ok(theme+' compare focus restored',await compare.evaluate(e=>e===document.activeElement)); + } + } + // Compare each live B1/B2 control with the exact pre-repair shared CSS in the same DOM. + const old=cp.execFileSync('git',['show','930cca6:calliope-web/src/routes/app.css'],{encoding:'utf8'}); + for(const route of ['/create','/workflows','/tasks','/settings','/models'])for(const theme of ['night','day','grade','bluehour']){ + await p.goto(WEB+route);await p.locator('aside.sidebar').waitFor();await p.evaluate(t=>document.documentElement.dataset.theme=t,theme);await wait(600);await p.mouse.move(0,0);ok(route+' '+theme+' sidebar present',await p.locator('aside.sidebar').isVisible()); + const read=()=>p.locator('.a-btn').evaluateAll(es=>es.map(e=>{const s=getComputedStyle(e);return {text:e.textContent.trim(),classes:e.className,style:Object.fromEntries(['opacity','filter','backgroundColor','backgroundImage','color','boxShadow','borderRadius','paddingLeft','height','fontSize'].map(k=>[k,s[k]]))}})); + await p.evaluate(()=>{const host=document.createElement('div');host.id='hel776-default-fixtures';for(const classes of ['primary','primary sm','secondary','secondary sm'])for(const state of ['enabled','disabled','aria-disabled']){const b=document.createElement('button');b.className='a-btn '+classes;b.textContent=classes+' '+state;if(state==='disabled')b.disabled=true;if(state==='aria-disabled')b.setAttribute('aria-disabled','true');host.append(b)}document.body.append(host)}); + const actual=await read();await p.evaluate(()=>{window.hel776StateRules=[];for(const sheet of document.styleSheets){let rules;try{rules=sheet.cssRules}catch{continue}for(const r of rules)if(r.selectorText?.includes('.a-btn.primary:disabled')){window.hel776StateRules.push([r,r.style.cssText]);r.style.cssText=''}}});const oldSheet=await p.addStyleTag({content:old});await wait(200);const previous=await read();assert.deepEqual(actual,previous,route+' '+theme+' default controls');await oldSheet.evaluate(e=>e.remove());await p.evaluate(()=>{window.hel776StateRules.forEach(([r,s])=>r.style.cssText=s);document.querySelector('#hel776-default-fixtures').remove()});protections.push({route,theme,actual,previous}); + } + if(process.env.HEL776_PROTECT_ONLY==='1')for(const theme of ['night','day','grade','bluehour']){ + await p.goto(WEB);await p.evaluate(t=>localStorage.setItem('aigc-theme',t),theme);await p.reload();await p.locator('.studio-hero').waitFor();await settled(p); + const al=p.locator('.home .a-btn.secondary.sm').first();await sp.goto('http://127.0.0.1:'+server.address().port);await sp.evaluate(({theme,text})=>{document.documentElement.dataset.theme=theme;const e=document.createElement('button');e.className='btn sm';e.id='small';e.textContent=text;document.body.append(e)}, {theme,text:await al.innerText()});await al.screenshot({path:out+'/closeups/'+theme+'-small-actual.png'});await sp.locator('#small').screenshot({path:out+'/closeups/'+theme+'-small-sample.png'}); + } + ok('no browser page errors',errors.length===0); + }finally{ + fs.writeFileSync(out+(process.env.HEL776_PROTECT_ONLY==='1'?'/protection-measurements.json':'/measurements.json'),JSON.stringify(rows,null,2));fs.writeFileSync(out+(process.env.HEL776_PROTECT_ONLY==='1'?'/protection-results.json':'/results.json'),JSON.stringify({checks,errors,protections},null,2)); + await c.tracing.stop({path:out+(process.env.HEL776_PROTECT_ONLY==='1'?'/protection-trace.zip':'/trace.zip')});console.log('TRACE_SAVED'); + // Bound browser shutdown; always collect an exit code instead of hanging after evidence. + await Promise.race([b.close(),wait(5000).then(()=>{if(b.isConnected())throw Error('browser shutdown exceeded 5s')})]);await new Promise(r=>server.close(r)); + } +})().then(()=>process.exit(0)).catch(e=>{console.error(e);process.exit(1)}); diff --git a/e2e/run-hel731.py b/e2e/run-hel731.py new file mode 100644 index 00000000..d831a96a --- /dev/null +++ b/e2e/run-hel731.py @@ -0,0 +1,49 @@ +"""Run the isolated regression stack in the foreground and always stop children.""" +import os, signal, socket, subprocess, time, urllib.request +from pathlib import Path +root=Path(__file__).resolve().parents[1] +os.chdir(root) +py=os.environ.get('HEL731_PYTHON', 'python3') +logs=root/'e2e/shots/hel731'; logs.mkdir(parents=True,exist_ok=True) +env=os.environ.copy() +env['PYTHONPATH']=str(root/'calliope-backend/src') +for port in [8247,5173,18188,18189]: + with socket.socket() as probe: + assert probe.connect_ex(('127.0.0.1',port)) != 0, f'Test port {port} is already in use' +# Every run gets fresh disposable state; retain prior evidence instead of deleting it. +reference=root/'e2e/shots/reference' +if reference.exists():reference.rename(reference.with_name('reference.previous-'+str(time.time_ns()))) +mode_path=root/'e2e/fake_mode.json' +saved_mode=mode_path.read_bytes() if mode_path.exists() else None +processes=[]; handles=[] +try: + for name,cmd in [('api',[py,'e2e/reference/server.py']),('comfy',[py,'e2e/fake_comfy.py']),('llm',[py,'e2e/reference/fake_llm.py']),('web',['npm','--prefix',os.environ.get('HEL731_WEB_DIR',os.environ.get('HEL729_WEB_DIR','calliope-web')),'run','dev'])]: + h=open(logs/(name+'.log'),'w');handles.append(h);processes.append(subprocess.Popen(cmd,stdout=h,stderr=subprocess.STDOUT,env=env,start_new_session=True)) + for url in ['http://127.0.0.1:8247/api/health','http://127.0.0.1:5173']: + for i in range(100): + try: + urllib.request.urlopen(url,timeout=2); break + except Exception: + if any(p.poll() is not None for p in processes): raise RuntimeError('A test service failed') + if i==99:raise + time.sleep(.2) + for cmd in [[py,'e2e/seed.py'],[py,'e2e/reference/seed.py']]:subprocess.run(cmd,env=env,check=True) + failures=[] + scripts=os.environ.get('HEL731_TESTS',os.environ.get('HEL729_TESTS','e2e/hel731.cjs')).split(',') + for script in scripts: + print('RUN',script,flush=True) + result=subprocess.run(['node',script],env=env) + if result.returncode:failures.append(script) + print('FAILED SCRIPTS',failures,flush=True) + if failures:raise SystemExit(1) + +finally: + for p in processes: + if p.poll() is None:os.killpg(p.pid,signal.SIGTERM) + for p in processes: + try:p.wait(timeout=10) + except subprocess.TimeoutExpired:os.killpg(p.pid,signal.SIGKILL);p.wait() + for h in handles:h.close() + + if saved_mode is not None:mode_path.write_bytes(saved_mode) + elif mode_path.exists():mode_path.unlink() diff --git a/e2e/run-hel774.py b/e2e/run-hel774.py new file mode 100644 index 00000000..c845d6c0 --- /dev/null +++ b/e2e/run-hel774.py @@ -0,0 +1,56 @@ +"""HEL-773: run the isolated stack, keep it alive for the audit script, then stop children.""" +import os, signal, socket, subprocess, time, urllib.request +from pathlib import Path +root=Path(__file__).resolve().parents[1] +os.chdir(root) +(root/'e2e/shots/hel731').mkdir(parents=True,exist_ok=True) +py=os.environ.get('HEL731_PYTHON','python3') +env=os.environ.copy() +env['PYTHONPATH']=str(root/'calliope-backend/src') +for port in [8247,5173,18188,18189]: + with socket.socket() as probe: + assert probe.connect_ex(('127.0.0.1',port))!=0, f'Test port {port} is already in use' +reference=root/'e2e/shots/reference' +if reference.exists():reference.rename(reference.with_name('reference.previous-'+str(time.time_ns()))) +processes=[];handles=[] +try: + for name,cmd in [('api',[py,'e2e/reference/server.py']),('comfy',[py,'e2e/fake_comfy.py']),('llm',[py,'e2e/reference/fake_llm.py']),('web',['npm','--prefix','calliope-web','run','dev'])]: + h=open(f'../evidence/checks/{name}.log','w');handles.append(h);processes.append(subprocess.Popen(cmd,stdout=h,stderr=subprocess.STDOUT,env=env,start_new_session=True)) + for url in ['http://127.0.0.1:8247/api/health','http://127.0.0.1:5173']: + for i in range(100): + try: + urllib.request.urlopen(url,timeout=2);break + except Exception: + if any(p.poll() is not None for p in processes):raise RuntimeError('A test service failed') + if i==99:raise + time.sleep(.2) + for cmd in [[py,'e2e/seed.py'],[py,'e2e/reference/seed.py']]:subprocess.run(cmd,env=env,check=True) + # seed one project with storyboard content like hel731.cjs does + import json,urllib.request as u + def api(p,b=None,method=None): + req=u.Request('http://127.0.0.1:8247'+p,data=json.dumps(b).encode() if b is not None else None,method=method or ('POST' if b is not None else 'GET'),headers={'Content-Type':'application/json'}) + return json.loads(u.urlopen(req, timeout=15).read()) + proj=api('/api/projects',{'title':'隔离验证 · 海岸来信','idea':'纸船带回一片树叶'}) + fixtures={'script':{'text':'第一场：清晨的海岸，女孩把一只纸船放入海水。她等候着父亲的归来。第二场：纸船带回一片树叶，女孩望向海平面，知道旅程才刚刚开始。'}, + 'style':{'directions':[{'id':'s1','name':'晨光','description':'暖光','prompt':'warm light'},{'id':'s2','name':'蓝调','description':'冷光','prompt':'blue hour'}]}, + 'storyboard':{'shots':[{'id':'board-'+str(i),'scene':'1','shot_size':'远景','camera':'固定','description':'女孩沿着海岸走向灯塔，纸船随海风起伏。','dialog':('你好' if i%2 else ''),'duration_sec':5} for i in range(12)]}, + 'assets':{'assets':[{'id':'asset-a','kind':'character','name':'海边女孩','description':'女孩','prompt':'girl on coast'}]}, + 'shot':{'shots':[{'id':'shot-a','shot_no':'S1','description':'女孩走向灯塔','prompt':'girl walks toward lighthouse','duration_sec':4}]}} + for stage,content in fixtures.items(): + api(f"/api/workbench/projects/{proj['id']}/stages/{stage}",{'content':content},'PATCH') + if stage in ('script','style'): + api(f"/api/workbench/projects/{proj['id']}/stages/{stage}/confirm",({'chosen_style_id':'s1'} if stage=='style' else {})) + print('stack ready, project',proj['id']) + result=subprocess.run(['node',os.environ.get('HEL774_SCRIPT','e2e/hel774.cjs')],env=env) + print('TEST_PROCESS_EXIT',result.returncode,flush=True) + raise SystemExit(result.returncode) +finally: + for p in processes: + if p.poll() is None:os.killpg(p.pid,signal.SIGTERM) + for p in processes: + try:p.wait(timeout=10) + except subprocess.TimeoutExpired:os.killpg(p.pid,signal.SIGKILL);p.wait() + for h in handles:h.close() + import shutil + if reference.exists():shutil.rmtree(reference) + print('CLEANUP: all exact child process groups stopped; disposable reference DB removed',flush=True) diff --git a/e2e/run-hel776.py b/e2e/run-hel776.py new file mode 100644 index 00000000..b4855f0a --- /dev/null +++ b/e2e/run-hel776.py @@ -0,0 +1,60 @@ +"""HEL-776: run the isolated stack, keep it alive for the audit script, then stop children.""" +import os, signal, socket, subprocess, time, urllib.request +from pathlib import Path +root=Path(__file__).resolve().parents[1] +os.chdir(root) +(root/'e2e/shots/hel731').mkdir(parents=True,exist_ok=True) +py=os.environ.get('HEL731_PYTHON','python3') +env=os.environ.copy() +env['PYTHONPATH']=str(root/'calliope-backend/src') +for port in [8247,5173,18188,18189]: + with socket.socket() as probe: + assert probe.connect_ex(('127.0.0.1',port))!=0, f'Test port {port} is already in use' +reference=root/'e2e/shots/reference' +assert not reference.exists(), 'Refuse to overwrite existing isolation data' +processes=[];handles=[] +try: + for name,cmd in [('api',[py,'e2e/reference/server.py']),('comfy',[py,'e2e/fake_comfy.py']),('llm',[py,'e2e/reference/fake_llm.py']),('web',['npm','--prefix','calliope-web','run','dev'])]: + h=open(f'../evidence/checks/{name}.log','w');handles.append(h);processes.append(subprocess.Popen(cmd,stdout=h,stderr=subprocess.STDOUT,env=env,start_new_session=True)) + for url in ['http://127.0.0.1:8247/api/health','http://127.0.0.1:5173']: + for i in range(100): + try: + urllib.request.urlopen(url,timeout=2);break + except Exception: + if any(p.poll() is not None for p in processes):raise RuntimeError('A test service failed') + if i==99:raise + time.sleep(.2) + for cmd in [[py,'e2e/seed.py'],[py,'e2e/reference/seed.py']]:subprocess.run(cmd,env=env,check=True) + # seed one project with storyboard content like hel731.cjs does + import json,urllib.request as u + def api(p,b=None,method=None): + req=u.Request('http://127.0.0.1:8247'+p,data=json.dumps(b).encode() if b is not None else None,method=method or ('POST' if b is not None else 'GET'),headers={'Content-Type':'application/json'}) + return json.loads(u.urlopen(req, timeout=15).read()) + proj=api('/api/projects',{'title':'隔离验证 · 海岸来信','idea':'纸船带回一片树叶'}) + fixtures={'script':{'text':'第一场：清晨的海岸，女孩把一只纸船放入海水。她等候着父亲的归来。第二场：纸船带回一片树叶，女孩望向海平面，知道旅程才刚刚开始。'}, + 'style':{'directions':[{'id':'s1','name':'晨光','description':'暖光','prompt':'warm light'},{'id':'s2','name':'蓝调','description':'冷光','prompt':'blue hour'}]}, + 'storyboard':{'shots':[{'id':'board-'+str(i),'scene':'1','shot_size':'远景','camera':'固定','description':'女孩沿着海岸走向灯塔，纸船随海风起伏。','dialog':('你好' if i%2 else ''),'duration_sec':5} for i in range(12)]}, + 'assets':{'assets':[{'id':'asset-a','kind':'character','name':'海边女孩','description':'女孩','prompt':'girl on coast'}]}, + 'shot':{'shots':[{'id':'shot-a','shot_no':'S1','description':'女孩走向灯塔','prompt':'girl walks toward lighthouse','duration_sec':4}]}} + for stage,content in fixtures.items(): + api(f"/api/workbench/projects/{proj['id']}/stages/{stage}",{'content':content},'PATCH') + if stage in ('script','style'): + api(f"/api/workbench/projects/{proj['id']}/stages/{stage}/confirm",({'chosen_style_id':'s1'} if stage=='style' else {})) + print('stack ready, project',proj['id'],flush=True) + Path('../evidence/checks/processes.json').write_text(json.dumps([{'pid':p.pid,'args':p.args} for p in processes],indent=2)) + result=subprocess.run(['node','e2e/hel776.cjs'],env=env) + print('TEST_PROCESS_EXIT',result.returncode,flush=True) + raise SystemExit(result.returncode) +finally: + daemon=json.loads(subprocess.check_output(['multica','daemon','status','--output','json']))['pid'] + assert all(p.pid != daemon for p in processes) + for p in processes: + if p.poll() is None:os.killpg(p.pid,signal.SIGTERM) + for p in processes: + try:p.wait(timeout=10) + except subprocess.TimeoutExpired:os.killpg(p.pid,signal.SIGKILL);p.wait() + for h in handles:h.close() + import shutil + if reference.exists():shutil.rmtree(reference) + print('CLEANUP: all exact child process groups stopped; disposable reference DB removed',flush=True) + diff --git a/scripts/report-hel731.py b/scripts/report-hel731.py new file mode 100644 index 00000000..5e4767f9 --- /dev/null +++ b/scripts/report-hel731.py @@ -0,0 +1,37 @@ +"""Package B3 evidence without changing or retouching application screenshots.""" +import csv +import hashlib +import json +import shutil +from pathlib import Path +from PIL import Image + +root = Path(__file__).resolve().parents[1] +source = root / 'e2e/shots/hel731' +out = root.parent / 'evidence/hel731' +out.mkdir(parents=True, exist_ok=True) +for path in source.iterdir(): + if path.is_file() and path.name != 'interaction-trace.zip': + shutil.copy2(path, out / path.name) +for actual in out.glob('*-actual.png'): + reference = actual.with_name(actual.name.replace('-actual', '-sample')) + left, right = Image.open(reference), Image.open(actual) + pair = Image.new('RGB', (left.width + right.width, max(left.height, right.height))) + pair.paste(left, (0, 0)); pair.paste(right, (left.width, 0)) + pair.save(actual.with_name(actual.name.replace('-actual', '-pair'))) +measurements = json.loads((source / 'measurements.json').read_text()) +with (out / 'measurements.csv').open('w', newline='') as handle: + writer = csv.writer(handle) + writer.writerow(['page', 'theme', 'viewport', 'selector', 'property', 'sample', 'actual', 'delta']) + for row in measurements: + for key, sample in row['sample'].items(): + actual = row['actual'][key] + delta = round(actual - sample, 5) if isinstance(sample, (int, float)) else '' + writer.writerow([row['page'], row['theme'], row['width'], row['selector'], key, sample, actual, delta]) +logs = out / 'checks'; logs.mkdir(exist_ok=True) +for name in ['lint-b3.log', 'check-b3.log', 'build-b3.log', 'pytest-b3.log', 'frontend-test-b3.log', 'browser-b3.log', 'final-browser-b3.log', 'related-browser-b3.log', 'normalize-b3.log', 'theme-regression-b3.log']: + shutil.copy2(root / name, logs / name) +for suite in ['hel729', 'hel742']: + shutil.copy2(root / f'e2e/shots/{suite}/results.json', logs / f'{suite}-results.json') +shutil.copy2(root.parent / 'attachments/夜片场-多主题交互样本.html', out / 'approved-sample.html') +print('Evidence copied to', out.name)