Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 leeferandmultica-agent
|
2004f527cc |
@@ -28,6 +28,10 @@
|
||||
>
|
||||
<b>{title}</b>{@render tools?.()}<span class="mg-grow"
|
||||
></span>{@render actions?.()}
|
||||
<!-- The approved header reserves this inline width independently of demo copy. -->
|
||||
<span class="mg-header-reserve" aria-hidden="true"
|
||||
><span></span><span>    </span></span
|
||||
>
|
||||
</header>
|
||||
{/snippet}
|
||||
<section
|
||||
|
||||
@@ -835,3 +835,20 @@ textarea.f-input {
|
||||
object-fit: contain;
|
||||
background: var(--media-bg);
|
||||
}
|
||||
|
||||
.mg-header-reserve {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 var(--manage-header-reserve-padding);
|
||||
border: 1px solid transparent;
|
||||
font: var(--manage-header-reserve-font);
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
.mg-header-reserve > :first-child {
|
||||
width: var(--manage-header-reserve-dot);
|
||||
}
|
||||
.mg-header-reserve > :last-child {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from "$app/paths";
|
||||
import { onMount } from "svelte";
|
||||
import { spotlight } from "$lib/actions/spotlight";
|
||||
import { createQuery } from "@tanstack/svelte-query";
|
||||
import { toStore } from "svelte/store";
|
||||
import { page } from "$app/state";
|
||||
@@ -184,48 +183,61 @@
|
||||
class="refract-shell"
|
||||
class:focus
|
||||
class:expanded
|
||||
style:--scene={`var(--sc-${scene})`}
|
||||
style:--scene={scene === "gold" ? "var(--gold)" : `var(--sc-${scene})`}
|
||||
>
|
||||
<aside class="sidebar" aria-label="全站导航">
|
||||
<a class="brand" href={resolve('/')} aria-label="返回工作室"
|
||||
>AIGC{#if expanded}<small>创作工作台</small>{/if}</a
|
||||
<a class="brand" href={resolve("/")} aria-label="返回工作室"
|
||||
><b>片</b>{#if expanded}<small>创作工作台</small>{/if}</a
|
||||
>
|
||||
<nav aria-label="主要导航">
|
||||
{#each mainNav as item (item.id)}<a
|
||||
class="nav-item reference-option"
|
||||
use:spotlight
|
||||
class="nav-item"
|
||||
href={resolve(item.href)}
|
||||
style:--nav-c={`var(--sc-${item.scene})`}
|
||||
style:--nav-c={item.scene === "gold"
|
||||
? "var(--gold)"
|
||||
: `var(--sc-${item.scene})`}
|
||||
aria-current={item.matches(page.url.pathname) ? "page" : undefined}
|
||||
title={item.label}
|
||||
><Icon name={item.icon} size={20} /><span>{item.label}</span></a
|
||||
title={item.id === "connections"
|
||||
? `${item.label} · ${connDetail}`
|
||||
: item.label}
|
||||
><Icon name={item.icon} size={18} /><span>{item.label}</span></a
|
||||
>{/each}
|
||||
</nav>
|
||||
<hr />
|
||||
<nav class="management" aria-label="管理导航">
|
||||
{#each NAV_MANAGE as item (item.id)}<a
|
||||
class="nav-item reference-option"
|
||||
use:spotlight
|
||||
class="nav-item"
|
||||
href={resolve(item.href)}
|
||||
style:--nav-c={`var(--sc-${item.scene})`}
|
||||
style:--nav-c={item.scene === "gold"
|
||||
? "var(--gold)"
|
||||
: `var(--sc-${item.scene})`}
|
||||
aria-current={item.matches(page.url.pathname) ? "page" : undefined}
|
||||
title={item.label}
|
||||
title={item.id === "connections"
|
||||
? `${item.label} · ${connDetail}`
|
||||
: item.label}
|
||||
><Icon name={item.icon} size={18} /><span>{item.label}</span></a
|
||||
>{/each}
|
||||
</nav>
|
||||
<div class="sidebar-bottom">
|
||||
<button
|
||||
class="nav-item reference-option"
|
||||
use:spotlight
|
||||
onclick={toggleNavigation}
|
||||
aria-expanded={expanded}
|
||||
title={expanded ? "收起导航" : "展开导航"}
|
||||
><Icon name="chevron-right" size={18} /><span
|
||||
>{expanded ? "收起导航" : "展开导航"}</span
|
||||
></button
|
||||
<a
|
||||
class="queue-dot"
|
||||
href={resolve("/tasks")}
|
||||
title={`${genJobs.filter((j) => j.status === "running" || j.status === "pending").length} 个任务进行中`}
|
||||
aria-label="查看生成任务"
|
||||
>
|
||||
<Icon name="nav-queue" />
|
||||
{#if genJobs.some((j) => j.status === "running") && !reduceMotion.manual && !reduceMotion.system}<span
|
||||
class="queue-ring"
|
||||
aria-hidden="true"
|
||||
></span>{/if}
|
||||
{#if genJobs.some((j) => j.status === "running" || j.status === "pending")}<i
|
||||
>{genJobs.filter(
|
||||
(j) => j.status === "running" || j.status === "pending",
|
||||
).length}</i
|
||||
>{/if}
|
||||
</a>
|
||||
<button
|
||||
class="nav-item reference-option"
|
||||
use:spotlight
|
||||
class="nav-item"
|
||||
onclick={() => (themeOpen = true)}
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={themeOpen}
|
||||
@@ -234,27 +246,36 @@
|
||||
></button
|
||||
>
|
||||
<a
|
||||
class="nav-item reference-option"
|
||||
use:spotlight
|
||||
href={resolve('/settings')}
|
||||
class="nav-item"
|
||||
href={resolve("/settings")}
|
||||
aria-current={page.url.pathname === "/settings" ? "page" : undefined}
|
||||
title="设置"><Icon name="settings" size={18} /><span>设置</span></a
|
||||
title="设置"><Icon name="nav-gear" size={18} /><span>设置</span></a
|
||||
>
|
||||
<a
|
||||
class="connection"
|
||||
href={resolve('/connections')}
|
||||
title={connDetail}
|
||||
aria-label={connDetail}
|
||||
><span class="status-chip-dot {connDot}"></span>{#if expanded}<span
|
||||
>{probeState === "ok"
|
||||
? "本地服务已连接"
|
||||
: probeState === "testing"
|
||||
? "正在检测服务"
|
||||
: probeState === "fail"
|
||||
? "本地服务离线"
|
||||
: "配置本地服务"}</span
|
||||
>{/if}</a
|
||||
<button
|
||||
class="nav-item"
|
||||
onclick={toggleNavigation}
|
||||
aria-expanded={expanded}
|
||||
title={expanded ? "收起导航" : "展开导航"}
|
||||
><Icon name="nav-palette" size={18} /><span
|
||||
>{expanded ? "收起" : "导航"}</span
|
||||
></button
|
||||
>
|
||||
{#if expanded}<a
|
||||
class="connection"
|
||||
href={resolve("/connections")}
|
||||
title={connDetail}
|
||||
aria-label={connDetail}
|
||||
><span class="status-chip-dot {connDot}"></span>{#if expanded}<span
|
||||
>{probeState === "ok"
|
||||
? "本地服务已连接"
|
||||
: probeState === "testing"
|
||||
? "正在检测服务"
|
||||
: probeState === "fail"
|
||||
? "本地服务离线"
|
||||
: "配置本地服务"}</span
|
||||
>{/if}</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
<div
|
||||
@@ -272,14 +293,14 @@
|
||||
{#if currentNav?.id === "connections"}
|
||||
<a
|
||||
class="a-btn secondary sm"
|
||||
href={resolve('/connections')}
|
||||
href={resolve("/connections")}
|
||||
aria-current={page.url.pathname === "/connections"
|
||||
? "page"
|
||||
: undefined}>ComfyUI 连接</a
|
||||
>
|
||||
<a
|
||||
class="a-btn secondary sm"
|
||||
href={resolve('/models')}
|
||||
href={resolve("/models")}
|
||||
aria-current={page.url.pathname === "/models" ? "page" : undefined}
|
||||
>大语言模型</a
|
||||
>
|
||||
@@ -325,11 +346,6 @@
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.management {
|
||||
border-top: 1px solid var(--line-2);
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.theme-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@@ -353,7 +369,7 @@
|
||||
color: var(--tx-2);
|
||||
}
|
||||
.nav-item[aria-current="page"] :global(svg) {
|
||||
color: var(--nav-c, var(--scene));
|
||||
color: var(--nav-c, var(--gold));
|
||||
}
|
||||
|
||||
.refract-shell {
|
||||
@@ -366,28 +382,45 @@
|
||||
min-width: 0;
|
||||
}
|
||||
.refract-shell.expanded {
|
||||
grid-template-columns: 174px minmax(0, 1fr);
|
||||
grid-template-columns: var(--rail-expanded-width) minmax(0, 1fr);
|
||||
}
|
||||
.sidebar {
|
||||
background: var(--bg-1);
|
||||
border-right: 1px solid var(--line);
|
||||
padding: 16px 8px 9px;
|
||||
--icon-stroke: var(--manage-icon-stroke);
|
||||
padding: var(--rail-padding);
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
overflow: visible;
|
||||
}
|
||||
.brand {
|
||||
font-size: 19px;
|
||||
font-weight: 800;
|
||||
color: var(--gold);
|
||||
text-align: center;
|
||||
width: var(--rail-brand-size);
|
||||
height: var(--rail-brand-size);
|
||||
border-radius: var(--rail-brand-radius);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: var(--rail-brand-margin);
|
||||
position: relative;
|
||||
background: var(--brand-grad);
|
||||
box-shadow: var(--brand-glow);
|
||||
text-decoration: none;
|
||||
letter-spacing: -1px;
|
||||
display: block;
|
||||
margin: 2px 0 18px;
|
||||
text-shadow: var(--brand-glow);
|
||||
flex: none;
|
||||
}
|
||||
.brand b {
|
||||
font: 800 15px/1 var(--font);
|
||||
color: var(--brand-ink);
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.sidebar hr {
|
||||
width: 28px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line-2);
|
||||
margin: var(--rail-divider-margin);
|
||||
flex: none;
|
||||
}
|
||||
.brand small {
|
||||
display: block;
|
||||
@@ -403,26 +436,24 @@
|
||||
gap: 2px;
|
||||
}
|
||||
.nav-item {
|
||||
min-height: 44px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: var(--rail-nav-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
padding: 7px 3px;
|
||||
gap: 3px;
|
||||
font: inherit;
|
||||
padding: var(--rail-nav-padding);
|
||||
color: var(--tx-3);
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
background: none;
|
||||
border-radius: var(--r-md);
|
||||
border-radius: var(--rail-nav-radius);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition:
|
||||
background-color 180ms ease,
|
||||
color 180ms ease,
|
||||
transform 160ms var(--ease-out);
|
||||
color var(--t-base),
|
||||
background var(--t-base);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.nav-item[aria-current="page"] {
|
||||
@@ -436,20 +467,30 @@
|
||||
.nav-item[aria-current="page"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
left: -6px;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
width: 3px;
|
||||
border-radius: 3px;
|
||||
background: var(--nav-c, var(--scene));
|
||||
background: var(--nav-c, var(--gold));
|
||||
box-shadow: var(
|
||||
--rail-active-shadow,
|
||||
0 0 var(--rail-active-shadow-blur) var(--nav-c, var(--gold))
|
||||
);
|
||||
}
|
||||
.nav-item:active {
|
||||
transform: scale(var(--press-scale));
|
||||
}
|
||||
.nav-item > span {
|
||||
font-size: var(--rail-nav-size);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.expanded .sidebar {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.expanded .nav-item {
|
||||
width: var(--rail-expanded-nav-width);
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
@@ -457,26 +498,56 @@
|
||||
padding: 10px 14px;
|
||||
min-height: 43px;
|
||||
}
|
||||
.expanded .nav-item > span {
|
||||
font-size: var(--rail-expanded-label-size);
|
||||
}
|
||||
.expanded .nav-item::before {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: auto;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.sidebar-bottom .nav-item {
|
||||
min-height: 45px;
|
||||
font-size: 9px;
|
||||
padding: 7px 3px;
|
||||
gap: 4px;
|
||||
.queue-dot {
|
||||
box-sizing: border-box;
|
||||
width: var(--rail-queue-size);
|
||||
height: var(--rail-queue-size);
|
||||
border-radius: var(--rail-brand-radius);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
color: var(--tx-2);
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.expanded .sidebar-bottom .nav-item {
|
||||
min-height: 39px;
|
||||
padding: 9px 14px;
|
||||
font-size: 12px;
|
||||
.queue-ring {
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: var(--rail-queue-ring-radius);
|
||||
border: var(--rail-queue-ring-border) solid transparent;
|
||||
border-top-color: var(--sc-video);
|
||||
animation: rail-spin var(--rail-queue-ring-duration) linear infinite;
|
||||
}
|
||||
@keyframes rail-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.queue-dot i {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 8px;
|
||||
background: var(--sc-video);
|
||||
color: var(--on-scene);
|
||||
font: 700 10px/16px var(--mono);
|
||||
font-style: normal;
|
||||
}
|
||||
.connection {
|
||||
display: flex;
|
||||
@@ -587,48 +658,4 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
@media (max-height: 780px) {
|
||||
.sidebar {
|
||||
padding-top: 11px;
|
||||
}
|
||||
.brand {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.nav-item {
|
||||
min-height: 40px;
|
||||
padding: 5px 0 3px;
|
||||
gap: 3px;
|
||||
}
|
||||
.sidebar-bottom {
|
||||
gap: 0;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.sidebar-bottom .nav-item {
|
||||
min-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 740px) {
|
||||
.sidebar {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.brand {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sidebar nav {
|
||||
gap: 4px;
|
||||
}
|
||||
.nav-item {
|
||||
min-height: 38px;
|
||||
padding: 4px 2px;
|
||||
gap: 3px;
|
||||
}
|
||||
.sidebar-bottom {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.sidebar-bottom .nav-item {
|
||||
min-height: 31px;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -80,16 +80,19 @@
|
||||
}
|
||||
.choices.tiles {
|
||||
--choice-check-width: 0px;
|
||||
--choice-display: flex;
|
||||
--choice-box-sizing: border-box;
|
||||
--choice-gap: 6px;
|
||||
--choice-copy-gap: 6px;
|
||||
--choice-tone-align: flex-start;
|
||||
--choice-tone-align: stretch;
|
||||
--choice-preview-art: var(--theme-preview-art);
|
||||
--choice-dock-width: 100%;
|
||||
--choice-dock-background: var(--bg-3);
|
||||
--choice-radius: 12px;
|
||||
--choice-name-size: 12.5px;
|
||||
--choice-tone-font: 11px var(--font-body);
|
||||
--choice-name-size: var(--manage-theme-name-size);
|
||||
--choice-name-line: var(--manage-theme-line);
|
||||
--choice-tone-font: var(--manage-theme-tone-size)/var(--manage-theme-line)
|
||||
var(--font);
|
||||
--choice-selected: color-mix(in srgb, var(--gold) 60%, transparent);
|
||||
--choice-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent);
|
||||
}
|
||||
@@ -104,7 +107,8 @@
|
||||
}
|
||||
.choice {
|
||||
box-sizing: var(--choice-box-sizing, content-box);
|
||||
display: grid;
|
||||
display: var(--choice-display, grid);
|
||||
flex-direction: column;
|
||||
grid-template-columns: minmax(0, 1fr) var(--choice-check-width, 18px);
|
||||
gap: var(--choice-gap, 8px);
|
||||
padding: 8px;
|
||||
@@ -209,6 +213,7 @@
|
||||
}
|
||||
.copy strong {
|
||||
font-size: var(--choice-name-size, 13px);
|
||||
line-height: var(--choice-name-line, inherit);
|
||||
}
|
||||
.copy small {
|
||||
font: var(--choice-tone-font, 10px var(--mono));
|
||||
|
||||
@@ -20,22 +20,22 @@ export interface NavItem {
|
||||
label: string;
|
||||
icon: IconName;
|
||||
href: Pathname;
|
||||
scene: "project" | "image" | "agent" | "manage" | "asset";
|
||||
scene: "project" | "image" | "agent" | "manage" | "asset" | "gold";
|
||||
matches: (path: string) => boolean;
|
||||
}
|
||||
export const NAV_MAIN: NavItem[] = [
|
||||
{
|
||||
id: "projects",
|
||||
label: "工作室",
|
||||
icon: "home",
|
||||
icon: "nav-home",
|
||||
href: "/",
|
||||
scene: "project",
|
||||
scene: "gold",
|
||||
matches: (p) => p === "/",
|
||||
},
|
||||
{
|
||||
id: "workbench",
|
||||
label: "项目",
|
||||
icon: "folder",
|
||||
icon: "nav-project",
|
||||
href: "/workbench",
|
||||
scene: "project",
|
||||
matches: (p) => /^\/(workbench|project)(\/|$)/.test(p),
|
||||
@@ -43,7 +43,7 @@ export const NAV_MAIN: NavItem[] = [
|
||||
{
|
||||
id: "image",
|
||||
label: "创作台",
|
||||
icon: "image",
|
||||
icon: "nav-create",
|
||||
href: "/create",
|
||||
scene: "image",
|
||||
matches: (p) =>
|
||||
@@ -54,7 +54,7 @@ export const NAV_MAIN: NavItem[] = [
|
||||
{
|
||||
id: "agents",
|
||||
label: "智能体",
|
||||
icon: "sparkle",
|
||||
icon: "nav-agent",
|
||||
href: "/agents",
|
||||
scene: "agent",
|
||||
matches: (p) => p === "/agents",
|
||||
@@ -62,17 +62,17 @@ export const NAV_MAIN: NavItem[] = [
|
||||
{
|
||||
id: "canvas",
|
||||
label: "画布",
|
||||
icon: "story",
|
||||
icon: "nav-canvas",
|
||||
href: "/canvas",
|
||||
scene: "manage",
|
||||
scene: "image",
|
||||
matches: (p) => p.startsWith("/canvas"),
|
||||
},
|
||||
{
|
||||
id: "library",
|
||||
label: "素材库",
|
||||
icon: "assets",
|
||||
icon: "nav-lib",
|
||||
href: "/library",
|
||||
scene: "asset",
|
||||
scene: "gold",
|
||||
matches: (p) => p === "/library",
|
||||
},
|
||||
];
|
||||
@@ -80,7 +80,7 @@ export const NAV_MANAGE: NavItem[] = [
|
||||
{
|
||||
id: "tasks",
|
||||
label: "任务",
|
||||
icon: "clock",
|
||||
icon: "nav-queue",
|
||||
href: "/tasks",
|
||||
scene: "manage",
|
||||
matches: (p) => p === "/tasks",
|
||||
@@ -88,7 +88,7 @@ export const NAV_MANAGE: NavItem[] = [
|
||||
{
|
||||
id: "workflows",
|
||||
label: "工作流",
|
||||
icon: "playground",
|
||||
icon: "nav-flow",
|
||||
href: "/workflows",
|
||||
scene: "manage",
|
||||
matches: (p) => p === "/workflows",
|
||||
@@ -96,7 +96,7 @@ export const NAV_MANAGE: NavItem[] = [
|
||||
{
|
||||
id: "connections",
|
||||
label: "模型连接",
|
||||
icon: "link",
|
||||
icon: "nav-plug",
|
||||
href: "/model-connections",
|
||||
scene: "manage",
|
||||
matches: (p) =>
|
||||
@@ -107,7 +107,7 @@ export const NAV_FOOT: NavItem[] = [
|
||||
{
|
||||
id: "settings",
|
||||
label: "设置",
|
||||
icon: "settings",
|
||||
icon: "nav-gear",
|
||||
href: "/settings",
|
||||
scene: "manage",
|
||||
matches: (p) => p === "/settings",
|
||||
|
||||
@@ -10,6 +10,28 @@ export const icons = {
|
||||
'<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 4v16M17 4v16M2 9h5M2 15h5M17 9h5M17 15h5"/>',
|
||||
"arrow-right": '<path d="M5 12h14M13 6l6 6-6 6"/>',
|
||||
pin: '<path d="M12 17v5M5 17h14l-2-4V5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v8z"/>',
|
||||
// Approved HEL-726 rail geometry; existing tool icons retain their contracts.
|
||||
"nav-home":
|
||||
'<path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/>',
|
||||
"nav-project":
|
||||
'<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M8 4v5M13 4v5"/>',
|
||||
"nav-create":
|
||||
'<path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/><circle cx="12" cy="12" r="3"/>',
|
||||
"nav-agent":
|
||||
'<path d="M12 3l1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z"/><path d="M18.5 15l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9z"/>',
|
||||
"nav-canvas":
|
||||
'<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/>',
|
||||
"nav-lib":
|
||||
'<rect x="3" y="5" width="18" height="15" rx="2"/><circle cx="9" cy="10" r="2"/><path d="m21 16-5-5-9 9"/>',
|
||||
"nav-queue":
|
||||
'<path d="M4 6h16M4 12h10M4 18h7"/><circle cx="18" cy="16" r="3"/>',
|
||||
"nav-flow":
|
||||
'<rect x="3" y="3" width="6" height="6" rx="1.5"/><rect x="15" y="15" width="6" height="6" rx="1.5"/><path d="M9 6h4a2 2 0 0 1 2 2v7"/>',
|
||||
"nav-plug": '<path d="M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0zM12 17v5"/>',
|
||||
"nav-gear":
|
||||
'<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
|
||||
"nav-palette":
|
||||
'<path d="M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.2-1.6-.4-1 .3-2.4 1.6-2.4H17a4 4 0 0 0 4-4c0-5.5-4-10-9-10z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="15" cy="7.5" r="1"/>',
|
||||
// Navigation
|
||||
home: '<path d="m3 10 9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/><path d="M9 22V12h6v10"/>',
|
||||
story:
|
||||
|
||||
@@ -90,6 +90,31 @@
|
||||
--manage-add-min-height: 130px;
|
||||
--manage-card-min: 280px;
|
||||
--manage-card-padding: 14px;
|
||||
/* Shared sample rail and management typography, not per-theme offsets. */
|
||||
--rail-padding: 12px 0 10px;
|
||||
--rail-brand-size: 40px;
|
||||
--rail-brand-margin: 10px;
|
||||
--rail-brand-radius: 12px;
|
||||
--rail-nav-width: 56px;
|
||||
--rail-expanded-width: 174px;
|
||||
--rail-expanded-nav-width: 158px;
|
||||
--rail-expanded-label-size: 12px;
|
||||
--rail-nav-padding: 7px 0 6px;
|
||||
--rail-nav-size: 11px;
|
||||
--rail-nav-radius: 12px;
|
||||
--rail-divider-margin: 8px 0;
|
||||
--rail-queue-size: 40px;
|
||||
--rail-queue-ring-radius: 12px;
|
||||
--rail-queue-ring-border: 1.5px;
|
||||
--rail-queue-ring-duration: 1.6s;
|
||||
--rail-active-shadow: initial;
|
||||
--rail-active-shadow-blur: 12px;
|
||||
--manage-header-reserve-font: 11px/1.55 var(--font);
|
||||
--manage-header-reserve-padding: 10px;
|
||||
--manage-header-reserve-dot: 6px;
|
||||
--manage-theme-name-size: 12.5px;
|
||||
--manage-theme-tone-size: 11px;
|
||||
--manage-theme-line: 1.55;
|
||||
--task-table-layout: auto;
|
||||
--task-thumbnail-column: 64px;
|
||||
--task-progress-column: 180px;
|
||||
@@ -252,6 +277,7 @@
|
||||
}
|
||||
|
||||
[data-theme="day"] {
|
||||
--rail-active-shadow: none;
|
||||
color-scheme: light;
|
||||
--bg-0: #e9e4da;
|
||||
--bg-1: #f4f1ea;
|
||||
@@ -334,6 +360,9 @@
|
||||
}
|
||||
|
||||
[data-theme="grade"] {
|
||||
--rail-active-shadow: none;
|
||||
--rail-nav-radius: 4px;
|
||||
--rail-brand-radius: 4px;
|
||||
--desk-filter-radius: 3px;
|
||||
--desk-connection-radius: 3px;
|
||||
color-scheme: dark;
|
||||
@@ -431,6 +460,7 @@
|
||||
}
|
||||
|
||||
[data-theme="bluehour"] {
|
||||
--rail-nav-radius: 14px;
|
||||
--desk-head-bg: color-mix(in srgb, #0f1838 55%, transparent);
|
||||
color-scheme: dark;
|
||||
--bg-0: #0a1029;
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
# HEL-767 · 搜索位置、主题卡片和侧栏样本返工
|
||||
|
||||
施工基底经 `git ls-remote` 与认证仓库 API 双重核对，为完整 B2 `feat/hel-751-task-table@dca88b3765c507cba87a7c1da34f2309091e0588`。新分支 `fix/hel-767-sample-alignment`，PR 目标仍为该任务表格分支。PR #4/#5/#6 保持原目标、open、未合并。没有部署、改后端、修改用户配置或数据，没有增加依赖和检查例外。
|
||||
|
||||
原 HTML 通过 Multica 附件 `01a15ddd-040d-7e9a-a1a3-04932a3aa0c8` 下载，SHA256 `0473d80d22b90194375f3566c1b8ca30dbd7433581b18f60956eabca252242a4`。只读运行该原件，未编辑或抽换样本。
|
||||
|
||||
## 变更与原因
|
||||
|
||||
- `ManagementPage.svelte` 和既有 `management.css`：在全部管理页统一头部恢复无文案、无交互、对辅助技术隐藏的右侧预留区域。使用字体、四个 em 空格、原件圆点占位和 padding 自然布局，继承 grade 页头字距；没有按主题补偿搜索坐标，没有演示徽标或假功能。
|
||||
- `ThemeChoices.svelte`：修复 tiles 标题与说明的字号/行高来源，标题 12.5px / 1.55，说明 11px / 1.55。改回样本纵向 flex 排版，文字区正常拉伸，不设固定卡片总高度。compact 弹层形态继续复用。`themes.css` 是对应排版 token 来源。
|
||||
- `AppShell.svelte`、`nav.ts`、`icons.ts`：在原组件和图标表内恢复品牌块、原件 SVG 路径和 1.7 描边、入口顺序、18px 图标、56px 宽入口、行距、分隔线、选中底座和左侧光条、底部队列/主题/设置/末槽的尺寸位置。恢复正确场景色和 day/grade 无光晕规则。去除侧栏继承的额外蜂窝悬停层，使用样本同一悬停来源。队列计数读取真实任务，运行环仅在真实 running 且未减少动效时显示，时长沿用原件；没有扩做 HEL-733 全局动效。
|
||||
- 保留原有导航展开、服务状态、所有产品路由和旧入口。原件最后的“规范”明确为非产品演示入口，该位置承载已有“导航”展开功能，复用原件图标和尺寸，不加入产品设计规范页。服务状态在模型连接提示和展开态保持可读。队列链接进入真实任务页；原顶栏 QueueTray 继续复用。
|
||||
- 小高度规则以浏览器 computed 为准：原 HTML 的早期 max-height 规则被后面的基础规则覆盖，三档窗口下原件实际都是 40px 品牌/队列、45px 入口；没有照抄一条无效规则造成小窗口压缩。
|
||||
|
||||
## 证据与复现
|
||||
|
||||
`scripts/verify-hel767.py` / `.mjs` 复用既有任务页隔离验证方式，创建临时 SQLite 与媒体夹具、动态本机静态服务器；所有 API 在精确本机 origin 下拦截，外部 origin 中止。未列出的写操作记录为失败并阻止。画布 ensure 仅返回隔离空图，不发送智能体消息或生成请求。退出 finally 关闭浏览器与服务器，Python TemporaryDirectory 删除 SQLite/视频。
|
||||
|
||||
准备已有的 Playwright 与浏览器运行库，令 `PLAYWRIGHT_MODULE` 指向其 `index.mjs`，必要时设置 `LD_LIBRARY_PATH`。先构建前端，再从仓库根运行 `python3 scripts/verify-hel767.py`。不将浏览器工具或运行库加入项目依赖。
|
||||
|
||||
截图矩阵为五个管理页 × night/day/grade/bluehour × 1440×900、1366×768、1280×720。样本与实际使用相同窗口、当前主题和减少动效模式；每组均有原件 PNG、实际 PNG、并排 PNG。`manifest.json` 列出图片文件名、字节数和 SHA256；`results.json` 保留 DOM 数字、完整断言、API 读写记录，`dimensions.md` 列样本/实际/差值。附加四主题悬停原图和操作录屏。
|
||||
|
||||
固定比较范围：任务搜索 x/y/宽高；全部四张主题卡片的 x/y/宽高、预览、标题、说明字号/行高；品牌、九个主/管理入口、分隔线、底部队列/主题/设置的位置；全部导航 SVG 路径、尺寸、描边、颜色及选中伪元素。其余管理区域截图供独立复核，不把真实数据差异当成结构完全相同。
|
||||
|
||||
## 已完成检查
|
||||
|
||||
干净 `npm ci`、全仓 `npm run lint`、`npm run check`（0 errors / 0 warnings）、四组既有前端守护 `npm test` 和 `npm run build` 通过。构建保留既有 @xyflow 未使用导入和超过 500kB chunk 提示，未扩大豁免。额外检查了修改的 Svelte 模板格式、脚本语法和 `git diff --check`。
|
||||
|
||||
后端相关回归 `test_studio_generation.py`、`test_playground.py`、`test_workflow_test.py`、`test_stop_kills_jobs.py`：19 passed，保留一条既有 Pydantic warning。后端源码未改。
|
||||
|
||||
独立交互回归 73 项通过，0 pageerror；全动效主题切换实测包含 `theme-lamp` 520ms，运行环 1600ms；减少动效立即应用且移除运行环。完整矩阵 60 组、6,169 条断言全部通过，0 pageerror。搜索框 12 组 x/y/宽高差为 0；全部四张主题卡片 × 12 组合（48 项）x/y/宽高差为 0，总高 130.421875px；标题行高 19.375px，说明 computed 行高 17.05px。侧栏入口、底部几何、图标和选中状态逐组合通过。数字原始结果见附件 `results.json` / `summary.json`。
|
||||
|
||||
## 真实数据和覆盖边界
|
||||
|
||||
本机夹具明确标为隔离验证，不写入产品。任务第二行沿真实项目来源契约显示项目，未伪造 API 不存在的智能体来源；自动列宽随文案变化，进度列 x 单列报告。未有输出的任务和视频缩略图使用同尺寸媒介图标，完成图片只显示夹具真实输出路径。队列是两项 running 加一项 pending，真实计数为 3，不写原件演示计数 2。
|
||||
|
||||
工作流、连接、素材的 API 列表由隔离契约夹具提供，不伪造用户真实目录、连接探测或素材。空连接/空素材状态与原件示例有内容差异，逐页对照保留。设置的真实语言、保存栏、高级选项与禁用“克制”档继续保留，隔离存储路径明确标记，不显示原件演示盘符。扫描导入真实入口保留，工作流三栏和任务整宽八列不变。
|
||||
|
||||
交互验证包含五个管理路由、兼容跳转、其他共用侧栏路由冒烟；任务搜索/筛选/错误恢复、取消/重试/下载/预览、手动视频播放/暂停/跳播/音量、弹层焦点与归还、删除撤销；创作台图片/视频提示词编辑与刷新草稿、Ctrl+K、无图工作流无上传格；侧栏展开/收起，四主题悬停、主题键盘选择/记忆和减少动效。
|
||||
|
||||
未覆盖真实 ComfyUI/GPU、付费云生成、用户数据库、全站全部历史业务、硬件扬声器与全屏，也未执行 HEL-731～733。此次交付须总管安排总工定向独立复核，不代表整套样本已验收，不合并或部署。
|
||||
|
||||
## 回滚
|
||||
|
||||
对本卡最终提交执行 `git revert <HEL-767 head>` 后正常推送，保留 B2 基底，不 reset/强推。无服务器或用户数据变更需要回滚。
|
||||
@@ -0,0 +1,936 @@
|
||||
/** Run via verify-hel767.py; explicit API fake, local-only origins, no user data. */
|
||||
import fs from "node:fs/promises";
|
||||
import http from "node:http";
|
||||
import path from "node:path";
|
||||
import { pathToFileURL } from "node:url";
|
||||
const { chromium } = await import(
|
||||
process.env.PLAYWRIGHT_MODULE || "playwright"
|
||||
);
|
||||
const out = process.env.HEL767_OUT,
|
||||
data = process.env.HEL767_DATA;
|
||||
const fixture = JSON.parse(
|
||||
await fs.readFile(path.join(data, "fixtures.json"), "utf8"),
|
||||
);
|
||||
let jobs = structuredClone(fixture.jobs),
|
||||
apiError = false,
|
||||
imageFixture;
|
||||
const result = {
|
||||
checks: [],
|
||||
measurements: [],
|
||||
errors: [],
|
||||
mutations: [],
|
||||
externalBlocked: [],
|
||||
apiReads: [],
|
||||
};
|
||||
const check = (v, n) => {
|
||||
result.checks.push({ name: n, pass: !!v });
|
||||
if (!v) throw Error(n);
|
||||
};
|
||||
const server = http.createServer(async (req, res) => {
|
||||
try {
|
||||
const p = new URL(req.url, "http://local").pathname;
|
||||
let f = path.join("calliope-web/build", decodeURIComponent(p));
|
||||
if (!path.extname(f)) f = path.join("calliope-web/build", "index.html");
|
||||
const bytes = await fs.readFile(f);
|
||||
res.setHeader(
|
||||
"Content-Type",
|
||||
f.endsWith(".js")
|
||||
? "text/javascript"
|
||||
: f.endsWith(".css")
|
||||
? "text/css"
|
||||
: f.endsWith(".html")
|
||||
? "text/html"
|
||||
: "application/octet-stream",
|
||||
);
|
||||
res.end(bytes);
|
||||
} catch {
|
||||
res.writeHead(404);
|
||||
res.end();
|
||||
}
|
||||
});
|
||||
await new Promise((r) => server.listen(0, "127.0.0.1", r));
|
||||
const base = `http://127.0.0.1:${server.address().port}`;
|
||||
const browser = await chromium.launch({
|
||||
headless: true,
|
||||
args: ["--no-sandbox"],
|
||||
});
|
||||
try {
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 1440, height: 900 },
|
||||
timezoneId: "Asia/Shanghai",
|
||||
recordVideo: {
|
||||
dir: path.join(out, "recordings"),
|
||||
size: { width: 1440, height: 900 },
|
||||
},
|
||||
});
|
||||
await context.addInitScript(() => {
|
||||
localStorage.setItem("aigc-lang", "zh");
|
||||
localStorage.setItem("aigc-reduce-motion", "1");
|
||||
window.__sse = [];
|
||||
window.EventSource = class {
|
||||
constructor() {
|
||||
window.__sse.push(this);
|
||||
setTimeout(() => this.onopen?.(), 0);
|
||||
}
|
||||
addEventListener(t, f) {
|
||||
(this.handlers ??= {})[t] = f;
|
||||
}
|
||||
close() {}
|
||||
};
|
||||
});
|
||||
await context.route("**/*", async (route) => {
|
||||
const req = route.request(),
|
||||
u = new URL(req.url());
|
||||
if (["data:", "blob:", "file:"].includes(u.protocol))
|
||||
return route.continue();
|
||||
if (u.origin !== base) {
|
||||
result.externalBlocked.push(u.origin);
|
||||
return route.abort();
|
||||
}
|
||||
if (!u.pathname.startsWith("/api/")) return route.continue();
|
||||
const json = (body) => route.fulfill({ json: body });
|
||||
if (u.pathname === "/api/file") {
|
||||
if (u.searchParams.get("path")?.endsWith(".mp4")) {
|
||||
const bytes = await fs.readFile(path.join(data, "video.mp4"));
|
||||
const range = req.headers()["range"]?.match(/bytes=(\d+)-(\d*)/);
|
||||
if (range) {
|
||||
const start = +range[1],
|
||||
end = range[2]
|
||||
? Math.min(+range[2], bytes.length - 1)
|
||||
: bytes.length - 1;
|
||||
return route.fulfill({
|
||||
status: 206,
|
||||
body: bytes.subarray(start, end + 1),
|
||||
contentType: "video/mp4",
|
||||
headers: {
|
||||
"Accept-Ranges": "bytes",
|
||||
"Content-Range": `bytes ${start}-${end}/${bytes.length}`,
|
||||
"Content-Length": String(end - start + 1),
|
||||
},
|
||||
});
|
||||
}
|
||||
return route.fulfill({
|
||||
body: bytes,
|
||||
contentType: "video/mp4",
|
||||
headers: {
|
||||
"Accept-Ranges": "bytes",
|
||||
"Content-Length": String(bytes.length),
|
||||
},
|
||||
});
|
||||
}
|
||||
return route.fulfill({
|
||||
body:
|
||||
imageFixture ||
|
||||
Buffer.from(
|
||||
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jR1kAAAAASUVORK5CYII=",
|
||||
"base64",
|
||||
),
|
||||
contentType: "image/png",
|
||||
});
|
||||
}
|
||||
const session = {
|
||||
id: 767,
|
||||
title: "HEL767 isolated session",
|
||||
project_id: null,
|
||||
origin: u.searchParams.get("origin") === "scene" ? "scene" : "chat",
|
||||
messages: [],
|
||||
plan: null,
|
||||
running: false,
|
||||
};
|
||||
const graph = {
|
||||
canvas: {
|
||||
id: 767,
|
||||
title: "HEL767 isolated canvas",
|
||||
project_id: null,
|
||||
agent_session_id: 767,
|
||||
viewport_json: null,
|
||||
},
|
||||
nodes: [],
|
||||
edges: [],
|
||||
};
|
||||
if (u.pathname === "/api/agent/sessions" && req.method() === "GET")
|
||||
return json([session]);
|
||||
if (u.pathname === "/api/agent/sessions/767") return json(session);
|
||||
if (u.pathname === "/api/canvas" && req.method() === "POST") {
|
||||
result.mutations.push({
|
||||
path: u.pathname,
|
||||
method: "POST",
|
||||
purpose: "isolated canvas ensure only",
|
||||
});
|
||||
return json(graph);
|
||||
}
|
||||
if (u.pathname === "/api/canvas/767") return json(graph);
|
||||
if (u.pathname === "/api/shots/by-session/767")
|
||||
return json({
|
||||
id: 767,
|
||||
title: "HEL767 isolated composition",
|
||||
scene: { objects: [], cameraTrack: [] },
|
||||
});
|
||||
if (u.pathname === "/api/shots/767/captures") return json([]);
|
||||
if (u.pathname === "/api/shots") return json([]);
|
||||
if (
|
||||
u.pathname === "/api/agent/projects" ||
|
||||
u.pathname === "/api/agent/skills"
|
||||
)
|
||||
return json([]);
|
||||
if (u.pathname === "/api/agent/sessions" && req.method() === "POST")
|
||||
return json(session);
|
||||
if (req.method() !== "GET") {
|
||||
result.mutations.push({ path: u.pathname, method: req.method() });
|
||||
const m = u.pathname.match(/^\/api\/jobs\/(\d+)\/(cancel|retry)$/);
|
||||
if (m) {
|
||||
const j = jobs.find((j) => j.id === +m[1]);
|
||||
j.status = m[2] === "cancel" ? "failed" : "pending";
|
||||
j.error = m[2] === "cancel" ? "cancelled" : null;
|
||||
return json(j);
|
||||
}
|
||||
const d = u.pathname.match(/^\/api\/playground\/jobs\/(\d+)$/);
|
||||
if (d && req.method() === "DELETE") {
|
||||
jobs = jobs.filter((j) => j.id !== +d[1]);
|
||||
return json({ ok: true });
|
||||
}
|
||||
if (u.pathname.includes("test")) return json({ ok: true });
|
||||
result.errors.push(`Unexpected mutation ${req.method()} ${u.pathname}`);
|
||||
return route.fulfill({
|
||||
status: 503,
|
||||
body: "Unlisted fixture mutation blocked",
|
||||
});
|
||||
}
|
||||
result.apiReads.push(u.pathname);
|
||||
if (u.pathname === "/api/jobs") {
|
||||
if (apiError)
|
||||
return route.fulfill({ status: 500, body: "HEL767 isolated error" });
|
||||
return json(jobs);
|
||||
}
|
||||
if (u.pathname === "/api/workflows") return json(fixture.workflows);
|
||||
if (u.pathname === "/api/projects")
|
||||
return json([{ id: 1, title: "雾港来信" }]);
|
||||
if (u.pathname === "/api/settings")
|
||||
return json({
|
||||
comfyui_endpoints: [],
|
||||
llm_profiles: [],
|
||||
queue_concurrency: 2,
|
||||
queue_poll_timeout_sec: 1800,
|
||||
queue_poll_interval_sec: 1,
|
||||
queue_max_retries: 1,
|
||||
data_dir: "HEL767-isolated-fixture",
|
||||
dry_run: false,
|
||||
});
|
||||
if (u.pathname === "/api/comfyui/endpoints")
|
||||
return json({ endpoints: [], active_id: null });
|
||||
if (u.pathname.includes("/jobs")) return json([]);
|
||||
if (u.pathname.includes("/sessions")) return json([]);
|
||||
if (
|
||||
u.pathname === "/api/library/media" ||
|
||||
u.pathname === "/api/agent/agents" ||
|
||||
u.pathname === "/api/agent/memories"
|
||||
)
|
||||
return json([]);
|
||||
const wf = u.pathname.match(/^\/api\/workflows\/(\d+)$/);
|
||||
if (wf)
|
||||
return json({
|
||||
...fixture.workflows.find((w) => w.id === +wf[1]),
|
||||
workflow_json: {},
|
||||
output_map: [
|
||||
{
|
||||
nodeId: "2",
|
||||
kind: fixture.workflows.find((w) => w.id === +wf[1]).kind,
|
||||
},
|
||||
],
|
||||
});
|
||||
return json({});
|
||||
});
|
||||
const page = await context.newPage();
|
||||
page.on("pageerror", (e) => result.errors.push(e.message));
|
||||
const ref = await context.newPage();
|
||||
await ref.goto(
|
||||
pathToFileURL(path.resolve("../attachments/夜片场-多主题交互样本.html"))
|
||||
.href,
|
||||
);
|
||||
await ref.evaluate(() => {
|
||||
go("tasks");
|
||||
document.documentElement.classList.add("capture", "reduce");
|
||||
});
|
||||
// Reuse the corresponding original synthetic still only inside this API fake.
|
||||
// Canvas avoids capturing a parent page during its opacity entrance animation.
|
||||
imageFixture = Buffer.from(
|
||||
await ref.evaluate(async () => {
|
||||
const img = new Image();
|
||||
img.src = still(64, 96, 64);
|
||||
await img.decode();
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = 48;
|
||||
canvas.height = 32;
|
||||
canvas.getContext("2d").drawImage(img, 0, 0, 48, 32);
|
||||
return canvas.toDataURL("image/png").split(",")[1];
|
||||
}),
|
||||
"base64",
|
||||
);
|
||||
const progress = () =>
|
||||
page.evaluate(() => {
|
||||
for (const es of window.__sse)
|
||||
for (const [id, pct] of [
|
||||
[1, 62],
|
||||
[2, 35],
|
||||
])
|
||||
es.handlers?.["job.progress"]?.({
|
||||
data: JSON.stringify({
|
||||
type: "job.progress",
|
||||
data: { job_id: id, progress: pct, phase: "comfy_running" },
|
||||
}),
|
||||
});
|
||||
});
|
||||
const measure = (p, selectors) =>
|
||||
p.evaluate(
|
||||
(selectors) =>
|
||||
Object.fromEntries(
|
||||
Object.entries(selectors).map(([k, s]) => {
|
||||
const e = document.querySelector(s);
|
||||
if (!e) return [k, null];
|
||||
const r = e.getBoundingClientRect(),
|
||||
c = getComputedStyle(e);
|
||||
return [
|
||||
k,
|
||||
{
|
||||
x: r.x,
|
||||
y: r.y,
|
||||
width: r.width,
|
||||
height: r.height,
|
||||
font: c.fontSize,
|
||||
line: c.lineHeight,
|
||||
weight: c.fontWeight,
|
||||
shadow: c.boxShadow,
|
||||
svg: e.matches("svg") ? e.innerHTML : undefined,
|
||||
radius: c.borderRadius,
|
||||
color: c.color,
|
||||
background: c.backgroundColor,
|
||||
},
|
||||
];
|
||||
}),
|
||||
),
|
||||
selectors,
|
||||
);
|
||||
for (const [width, height] of process.env.HEL767_SKIP_VISUAL
|
||||
? []
|
||||
: [
|
||||
[1440, 900],
|
||||
[1366, 768],
|
||||
[1280, 720],
|
||||
])
|
||||
for (const theme of ["night", "day", "grade", "bluehour"])
|
||||
for (const [route, sample] of [
|
||||
["workflows", "workflows"],
|
||||
["connections", "models"],
|
||||
["tasks", "tasks"],
|
||||
["library", "library"],
|
||||
["settings", "settings"],
|
||||
]) {
|
||||
await page.setViewportSize({ width, height });
|
||||
await ref.setViewportSize({ width, height });
|
||||
await page.goto(base + "/" + route);
|
||||
await page.locator(".management-header").waitFor();
|
||||
if (route === "tasks") {
|
||||
await page.locator(".task-table tbody tr").first().waitFor();
|
||||
await progress();
|
||||
}
|
||||
if (route === "settings")
|
||||
await page.locator(".choices.tiles").waitFor();
|
||||
await page.evaluate((theme) => {
|
||||
localStorage.setItem("aigc-theme", theme);
|
||||
window.dispatchEvent(
|
||||
new StorageEvent("storage", { key: "aigc-theme", newValue: theme }),
|
||||
);
|
||||
}, theme);
|
||||
await ref.evaluate(
|
||||
({ sample, theme }) => {
|
||||
go(sample);
|
||||
setTheme(theme);
|
||||
},
|
||||
{ sample, theme },
|
||||
);
|
||||
await page.waitForTimeout(650);
|
||||
const name = `${route}-${theme}-${width}`;
|
||||
const actualSelectors = {
|
||||
header: ".management-header",
|
||||
brand: ".refract-shell > .sidebar .brand",
|
||||
divider: ".refract-shell > .sidebar hr",
|
||||
foot: ".sidebar-bottom",
|
||||
queue: ".queue-dot",
|
||||
theme: ".sidebar-bottom button",
|
||||
settings: '.sidebar-bottom a[href="/settings"]',
|
||||
themeCard: ".tiles .choice",
|
||||
themePreview: ".tiles .preview",
|
||||
themeName: ".tiles .copy strong",
|
||||
themeTone: ".tiles .copy small",
|
||||
};
|
||||
const sampleSelectors = {
|
||||
header: `#p-${sample} .ph`,
|
||||
brand: ".rail .brand",
|
||||
divider: ".rail hr",
|
||||
foot: ".rail .foot",
|
||||
queue: ".rail .queue-dot",
|
||||
theme: "#themeBtn",
|
||||
settings: '.rail [data-go="settings"]',
|
||||
themeCard: ".ttile",
|
||||
themePreview: ".ttile .tprev",
|
||||
themeName: ".ttile b",
|
||||
themeTone: ".ttile small",
|
||||
};
|
||||
for (let i = 0; i < 9; i++) {
|
||||
actualSelectors[`nav${i}`] =
|
||||
`.refract-shell > .sidebar nav a:nth-child(${i < 6 ? i + 1 : i - 5})`;
|
||||
if (i >= 6)
|
||||
actualSelectors[`nav${i}`] =
|
||||
`.refract-shell > .sidebar .management a:nth-child(${i - 5})`;
|
||||
sampleSelectors[`nav${i}`] = `.rail > .nav:nth-of-type(${i + 1})`;
|
||||
}
|
||||
if (route === "settings")
|
||||
for (let i = 1; i <= 4; i++)
|
||||
for (const [key, a, b] of [
|
||||
["Card", ".choice", ".ttile"],
|
||||
["Preview", ".preview", ".tprev"],
|
||||
["Name", ".copy strong", "b"],
|
||||
["Tone", ".copy small", "small"],
|
||||
]) {
|
||||
actualSelectors[`theme${key}${i}`] =
|
||||
key === "Card"
|
||||
? `.tiles .choice:nth-child(${i})`
|
||||
: `.tiles .choice:nth-child(${i}) ${a}`;
|
||||
sampleSelectors[`theme${key}${i}`] =
|
||||
key === "Card"
|
||||
? `.ttile:nth-child(${i})`
|
||||
: `.ttile:nth-child(${i}) ${b}`;
|
||||
}
|
||||
if (route !== "settings")
|
||||
for (const key of [
|
||||
"themeCard",
|
||||
"themePreview",
|
||||
"themeName",
|
||||
"themeTone",
|
||||
]) {
|
||||
delete actualSelectors[key];
|
||||
delete sampleSelectors[key];
|
||||
}
|
||||
if (route === "tasks") {
|
||||
Object.assign(actualSelectors, {
|
||||
table: ".task-table",
|
||||
head: ".task-table thead",
|
||||
row: ".task-table tbody tr",
|
||||
thumbnail: ".task-thumbnail",
|
||||
segment: ".task-tabs",
|
||||
search: ".task-search",
|
||||
progress: ".task-progress",
|
||||
});
|
||||
Object.assign(sampleSelectors, {
|
||||
table: "#p-tasks .tbl",
|
||||
head: "#p-tasks thead",
|
||||
row: "#taskTable tr",
|
||||
thumbnail: "#taskTable td>div",
|
||||
segment: "#p-tasks .seg",
|
||||
search: "#p-tasks .input",
|
||||
progress: "#taskTable .bar",
|
||||
});
|
||||
}
|
||||
const railState = (p, actual) =>
|
||||
p.evaluate((actual) => {
|
||||
const selectors = actual
|
||||
? [
|
||||
".refract-shell > .sidebar nav a",
|
||||
'.sidebar-bottom a[href="/settings"]',
|
||||
".sidebar-bottom button:last-of-type",
|
||||
]
|
||||
: [
|
||||
".rail > .nav",
|
||||
'.rail [data-go="settings"]',
|
||||
'.rail [data-go="spec"]',
|
||||
];
|
||||
const nodes = [
|
||||
...document.querySelectorAll(selectors[0]),
|
||||
...selectors.slice(1).map((x) => document.querySelector(x)),
|
||||
];
|
||||
const geometry = (svg) => {
|
||||
const use = svg.querySelector("use");
|
||||
const root = use
|
||||
? document.querySelector(use.getAttribute("href"))
|
||||
: svg;
|
||||
return [...root.children].map((n) => [
|
||||
n.tagName,
|
||||
[...n.attributes].map((a) => [a.name, a.value]).sort(),
|
||||
]);
|
||||
};
|
||||
const selected = nodes.find((n) =>
|
||||
actual
|
||||
? n.getAttribute("aria-current") === "page"
|
||||
: n.classList.contains("on"),
|
||||
);
|
||||
const pseudo = selected
|
||||
? getComputedStyle(selected, "::before")
|
||||
: null;
|
||||
return {
|
||||
icons: nodes
|
||||
.filter((n) => n?.querySelector("svg"))
|
||||
.map((n) => {
|
||||
const svg = n.querySelector("svg"),
|
||||
c = getComputedStyle(svg);
|
||||
return {
|
||||
geometry: geometry(svg),
|
||||
width: c.width,
|
||||
height: c.height,
|
||||
stroke: c.strokeWidth,
|
||||
color: c.color,
|
||||
};
|
||||
}),
|
||||
selected: pseudo
|
||||
? Object.fromEntries(
|
||||
[
|
||||
"left",
|
||||
"top",
|
||||
"bottom",
|
||||
"width",
|
||||
"borderRadius",
|
||||
"backgroundColor",
|
||||
"boxShadow",
|
||||
].map((k) => [k, pseudo[k]]),
|
||||
)
|
||||
: null,
|
||||
};
|
||||
}, actual);
|
||||
const railActual = await railState(page, true),
|
||||
railSample = await railState(ref, false);
|
||||
result.railProbe = { railActual, railSample };
|
||||
check(
|
||||
JSON.stringify(railActual) === JSON.stringify(railSample),
|
||||
`${name}: rail icon paths, sizes, strokes, colors and selected indicator match`,
|
||||
);
|
||||
const measured = {
|
||||
route,
|
||||
theme,
|
||||
width,
|
||||
height,
|
||||
railActual,
|
||||
railSample,
|
||||
actual: await measure(page, actualSelectors),
|
||||
sample: await measure(ref, sampleSelectors),
|
||||
};
|
||||
result.measurements.push(measured);
|
||||
await page.screenshot({ path: path.join(out, name + "-actual.png") });
|
||||
await ref.screenshot({ path: path.join(out, name + "-sample.png") });
|
||||
for (const key of Object.keys(sampleSelectors)) {
|
||||
if (key === "progress") continue; // auto columns depend on honest source text; reported separately
|
||||
for (const axis of ["x", "y", "width", "height"]) {
|
||||
// Table column width distribution is data-dependent, the outer table and thumbnail dimensions are fixed.
|
||||
if (key === "thumbnail" && axis === "x") continue;
|
||||
check(
|
||||
measured.actual[key] &&
|
||||
measured.sample[key] &&
|
||||
Math.abs(
|
||||
measured.actual[key][axis] - measured.sample[key][axis],
|
||||
) < 0.1,
|
||||
`${name}: ${key} ${axis} matches sample`,
|
||||
);
|
||||
}
|
||||
}
|
||||
for (const key of [
|
||||
"brand",
|
||||
"queue",
|
||||
"theme",
|
||||
"settings",
|
||||
...Array.from({ length: 9 }, (_, i) => `nav${i}`),
|
||||
])
|
||||
check(
|
||||
measured.actual[key].radius === measured.sample[key].radius,
|
||||
`${name}: ${key} radius matches sample`,
|
||||
);
|
||||
if (route === "settings")
|
||||
for (const key of [
|
||||
"themeName",
|
||||
"themeTone",
|
||||
...Array.from({ length: 4 }, (_, i) => `themeName${i + 1}`),
|
||||
...Array.from({ length: 4 }, (_, i) => `themeTone${i + 1}`),
|
||||
])
|
||||
check(
|
||||
measured.actual[key].line === measured.sample[key].line,
|
||||
`${name}: ${key} line height`,
|
||||
);
|
||||
check(
|
||||
await page.evaluate(
|
||||
() => document.documentElement.scrollWidth <= innerWidth,
|
||||
),
|
||||
`${name}: no overflow`,
|
||||
);
|
||||
}
|
||||
await page.goto(base + "/tasks");
|
||||
await page.locator(".task-table tbody tr").first().waitFor();
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
if (process.env.HEL767_SKIP_VISUAL) {
|
||||
await page.goto(base + "/tasks");
|
||||
await page.locator("tbody tr").first().waitFor();
|
||||
}
|
||||
await page.locator(".task-tabs button").nth(1).click();
|
||||
check((await page.locator("tbody tr").count()) === 3, "active filter");
|
||||
await page.locator(".task-tabs button").nth(2).click();
|
||||
check((await page.locator("tbody tr").count()) === 1, "failed filter");
|
||||
await page.locator(".task-tabs button").nth(3).click();
|
||||
check((await page.locator("tbody tr").count()) === 3, "image filter");
|
||||
await page.locator(".task-tabs button").nth(4).click();
|
||||
check((await page.locator("tbody tr").count()) === 3, "video filter");
|
||||
await page.locator(".task-tabs button").first().click();
|
||||
await page.getByRole("searchbox").fill("镜头 07");
|
||||
await page.waitForTimeout(100);
|
||||
check((await page.locator("tbody tr").count()) === 1, "search by task title");
|
||||
await page.getByRole("searchbox").fill("HEL767 absent");
|
||||
await page.waitForTimeout(100);
|
||||
check((await page.locator("tbody tr").count()) === 0, "search empty");
|
||||
await page.screenshot({ path: path.join(out, "search-empty.png") });
|
||||
await page.getByRole("searchbox").fill("");
|
||||
await page.getByRole("button", { name: "查看任务 #6", exact: true }).click();
|
||||
await page.getByRole("dialog").waitFor();
|
||||
const video = page.locator("video");
|
||||
await video.evaluate(
|
||||
(v) =>
|
||||
new Promise((r) =>
|
||||
v.readyState >= 1
|
||||
? r()
|
||||
: v.addEventListener("loadedmetadata", r, { once: true }),
|
||||
),
|
||||
);
|
||||
check(
|
||||
await video.evaluate(
|
||||
(v) =>
|
||||
v.paused && v.controls && !v.autoplay && !v.muted && v.volume === 1,
|
||||
),
|
||||
"video manual playback with sound",
|
||||
);
|
||||
await video.hover();
|
||||
const videoBox = await video.boundingBox();
|
||||
await video.click({ position: { x: 26, y: videoBox.height - 28 } });
|
||||
await page.waitForTimeout(250);
|
||||
check(
|
||||
await video.evaluate((v) => !v.paused && v.currentTime > 0),
|
||||
"explicit video play",
|
||||
);
|
||||
await video.evaluate((v) => {
|
||||
v.pause();
|
||||
v.currentTime = 0.7;
|
||||
v.volume = 0.4;
|
||||
});
|
||||
await page.waitForTimeout(300);
|
||||
result.videoState = await video.evaluate((v) => ({
|
||||
paused: v.paused,
|
||||
time: v.currentTime,
|
||||
volume: v.volume,
|
||||
duration: v.duration,
|
||||
seekable: v.seekable.length,
|
||||
error: v.error?.message,
|
||||
}));
|
||||
check(
|
||||
result.videoState.paused &&
|
||||
result.videoState.time > 0.6 &&
|
||||
Math.abs(result.videoState.volume - 0.4) < 0.001,
|
||||
"pause seek volume",
|
||||
);
|
||||
await page.screenshot({ path: path.join(out, "video-preview.png") });
|
||||
await page.keyboard.press("Tab");
|
||||
check(
|
||||
await page
|
||||
.getByRole("dialog")
|
||||
.evaluate((e) => e.contains(document.activeElement)),
|
||||
"modal focus stays inside",
|
||||
);
|
||||
await page.getByRole("dialog").locator(".modal-close").focus();
|
||||
await page.keyboard.press("Escape");
|
||||
await page.getByRole("dialog").waitFor({ state: "hidden" });
|
||||
check((await page.locator("video").count()) === 0, "close unmounts video");
|
||||
check(
|
||||
await page
|
||||
.getByRole("button", { name: "查看任务 #6", exact: true })
|
||||
.evaluate((e) => e === document.activeElement),
|
||||
"modal restores trigger focus",
|
||||
);
|
||||
await page.getByRole("button", { name: "查看任务 #5", exact: true }).click();
|
||||
await page.getByRole("dialog").waitFor();
|
||||
check(
|
||||
(await page.getByRole("dialog").locator("img").count()) === 1,
|
||||
"image preview",
|
||||
);
|
||||
const [download] = await Promise.all([
|
||||
page.waitForEvent("download"),
|
||||
page.getByRole("link", { name: "下载", exact: true }).click(),
|
||||
]);
|
||||
check(!(await download.failure()), "native image download");
|
||||
await download.saveAs(path.join(out, "downloaded-fixture.png"));
|
||||
await page.getByRole("button", { name: "删除", exact: true }).click();
|
||||
check(
|
||||
(await page.locator("tbody tr").count()) === 5,
|
||||
"delete removes row immediately",
|
||||
);
|
||||
await page.getByRole("button", { name: "撤销", exact: true }).click();
|
||||
check((await page.locator("tbody tr").count()) === 6, "undo restores row");
|
||||
check(
|
||||
!result.mutations.some((m) => m.method === "DELETE"),
|
||||
"undo prevents DELETE",
|
||||
);
|
||||
await page.getByRole("button", { name: "查看任务 #5", exact: true }).click();
|
||||
await page.getByRole("button", { name: "删除", exact: true }).click();
|
||||
await page.waitForTimeout(5300);
|
||||
check(
|
||||
result.mutations.some((m) => m.method === "DELETE"),
|
||||
"delete commits after undo window",
|
||||
);
|
||||
await page
|
||||
.locator("tbody tr")
|
||||
.filter({ hasText: "参考生视频 #21" })
|
||||
.getByRole("button", { name: "重试", exact: true })
|
||||
.click();
|
||||
await page.waitForTimeout(150);
|
||||
check(
|
||||
jobs.find((j) => j.id === 4).status === "pending",
|
||||
"retry uses real API contract",
|
||||
);
|
||||
await page
|
||||
.locator("tbody tr")
|
||||
.filter({ hasText: "Qwen 局部重绘" })
|
||||
.getByRole("button", { name: "取消", exact: true })
|
||||
.click();
|
||||
await page.waitForTimeout(150);
|
||||
check(
|
||||
jobs.find((j) => j.id === 3).error === "cancelled",
|
||||
"cancel uses real API contract",
|
||||
);
|
||||
await page.getByRole("button", { name: "查看任务 #1", exact: true }).click();
|
||||
await page.getByRole("button", { name: "创作台", exact: true }).click();
|
||||
check(
|
||||
(await page.locator("tbody tr").count()) === 2,
|
||||
"source filter retained in details",
|
||||
);
|
||||
await page.getByRole("button", { name: "全部来源", exact: true }).click();
|
||||
const testJob = {
|
||||
...structuredClone(fixture.jobs[4]),
|
||||
id: 8,
|
||||
origin: "workflow_test",
|
||||
payload: { source: "workflow_test", title: "HEL767 workflow test" },
|
||||
output_paths: ["HEL767-fixture-4.png"],
|
||||
};
|
||||
jobs.push(testJob);
|
||||
await page.goto(base + "/tasks");
|
||||
await page.getByRole("button", { name: "查看任务 #8", exact: true }).click();
|
||||
await page.getByRole("button", { name: "工作流试跑", exact: true }).click();
|
||||
check(
|
||||
(await page.locator("tbody tr").count()) === 1,
|
||||
"workflow test source isolated",
|
||||
);
|
||||
await page.getByRole("button", { name: "全部来源", exact: true }).click();
|
||||
// Pending/running without a numeric report must remain unknown.
|
||||
await page.goto(base + "/tasks");
|
||||
await page.locator("tbody tr").first().waitFor();
|
||||
check(
|
||||
(await page.locator(".task-progress").count()) === 0,
|
||||
"no fabricated percentages after reload",
|
||||
);
|
||||
jobs = [];
|
||||
await page.goto(base + "/tasks");
|
||||
await page.waitForTimeout(400);
|
||||
check((await page.locator("tbody tr").count()) === 0, "true empty data");
|
||||
await page.screenshot({ path: path.join(out, "true-empty.png") });
|
||||
apiError = true;
|
||||
await page.goto(base + "/tasks");
|
||||
await page
|
||||
.getByRole("alert")
|
||||
.filter({ hasText: "任务加载失败" })
|
||||
.waitFor({ timeout: 15000 });
|
||||
check(true, "API failure shown honestly");
|
||||
apiError = false;
|
||||
jobs = structuredClone(fixture.jobs);
|
||||
await page.getByRole("button", { name: "重试", exact: true }).click();
|
||||
await page.locator("tbody tr").first().waitFor();
|
||||
check(true, "load retry restores tasks");
|
||||
for (const route of [
|
||||
"workflows",
|
||||
"connections",
|
||||
"library",
|
||||
"settings",
|
||||
"create?kind=image",
|
||||
"create?kind=video",
|
||||
]) {
|
||||
await page.goto(base + "/" + route);
|
||||
await page.waitForTimeout(400);
|
||||
await page.screenshot({
|
||||
path: path.join(out, "regression-" + route.replace(/\W/g, "-") + ".png"),
|
||||
});
|
||||
check(
|
||||
(await page.locator(".task-table").count()) === 0,
|
||||
`${route}: task table styles scoped`,
|
||||
);
|
||||
if (route.startsWith("create?")) {
|
||||
const textarea = page.locator(".studio-form textarea").first();
|
||||
await textarea.fill("HEL767 isolated creative draft");
|
||||
check(
|
||||
(await textarea.inputValue()) === "HEL767 isolated creative draft",
|
||||
`${route}: prompt remains editable`,
|
||||
);
|
||||
await page.reload();
|
||||
await page.locator(".studio-form textarea").first().waitFor();
|
||||
check(
|
||||
(await page.locator(".studio-form textarea").first().inputValue()) ===
|
||||
"HEL767 isolated creative draft",
|
||||
`${route}: draft survives reload`,
|
||||
);
|
||||
}
|
||||
if (route === "workflows")
|
||||
check(
|
||||
(await page
|
||||
.locator(".mg-side")
|
||||
.evaluate((e) => e.getBoundingClientRect().width)) === 220,
|
||||
"workflow sidebar retains 220px",
|
||||
);
|
||||
}
|
||||
for (const route of [
|
||||
"/",
|
||||
"/workbench",
|
||||
"/agents",
|
||||
"/canvas",
|
||||
"/build-scene",
|
||||
"/models",
|
||||
"/model-connections",
|
||||
"/image",
|
||||
"/video",
|
||||
]) {
|
||||
await page.goto(base + route);
|
||||
await page.locator(".refract-shell > .sidebar").waitFor({ timeout: 15000 });
|
||||
await page.waitForTimeout(350);
|
||||
check(
|
||||
(await page.locator(".refract-shell > .sidebar").count()) === 1,
|
||||
`${route}: shared rail reachable`,
|
||||
);
|
||||
if (route === "/models")
|
||||
check(
|
||||
page.url().includes("/connections?tab=llm"),
|
||||
"legacy models redirect",
|
||||
);
|
||||
if (route === "/model-connections")
|
||||
check(page.url().includes("/connections"), "connections alias redirect");
|
||||
}
|
||||
await page.goto(base + "/create?kind=image");
|
||||
await page.locator(".studio-form textarea").first().waitFor();
|
||||
check(
|
||||
(await page.locator(".studio-form input[type=file]").count()) === 0,
|
||||
"t2i without image input keeps no padding slot",
|
||||
);
|
||||
await page.keyboard.press("Control+k");
|
||||
await page.getByRole("dialog").waitFor();
|
||||
check(true, "Ctrl+K opens global search");
|
||||
await page.keyboard.press("Escape");
|
||||
await page.getByRole("dialog").waitFor({ state: "hidden" });
|
||||
await page.goto(base + "/tasks");
|
||||
await page.locator(".task-table tbody tr").first().waitFor();
|
||||
await ref.setViewportSize({ width: 1440, height: 900 });
|
||||
for (const theme of ["night", "day", "grade", "bluehour"]) {
|
||||
await page.evaluate((theme) => {
|
||||
localStorage.setItem("aigc-theme", theme);
|
||||
window.dispatchEvent(
|
||||
new StorageEvent("storage", { key: "aigc-theme", newValue: theme }),
|
||||
);
|
||||
}, theme);
|
||||
await ref.evaluate((theme) => {
|
||||
go("tasks");
|
||||
setTheme(theme);
|
||||
}, theme);
|
||||
await page.waitForTimeout(650);
|
||||
await page
|
||||
.locator('.refract-shell > .sidebar a[href="/workflows"]')
|
||||
.hover();
|
||||
await ref.locator('.rail [data-go="workflows"]').hover();
|
||||
await page.waitForTimeout(250);
|
||||
result.checks.push({
|
||||
name: `${theme}: rail hover`,
|
||||
pass: true,
|
||||
actual: await measure(page, {
|
||||
hover: '.refract-shell > .sidebar a[href="/workflows"]',
|
||||
}),
|
||||
sample: await measure(ref, { hover: '.rail [data-go="workflows"]' }),
|
||||
});
|
||||
const hover = result.checks.at(-1);
|
||||
for (const prop of ["color", "background", "radius"])
|
||||
check(
|
||||
hover.actual.hover[prop] === hover.sample.hover[prop],
|
||||
`${theme}: hover ${prop} matches sample`,
|
||||
);
|
||||
await page.screenshot({
|
||||
path: path.join(out, `hover-${theme}-actual.png`),
|
||||
});
|
||||
await ref.screenshot({ path: path.join(out, `hover-${theme}-sample.png`) });
|
||||
}
|
||||
await page.locator('.sidebar-bottom button[title="主题"]').click();
|
||||
await page.getByRole("dialog").waitFor();
|
||||
const firstChoice = page.getByRole("dialog").locator(".choice").first();
|
||||
await firstChoice.focus();
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await page.keyboard.press("Enter");
|
||||
check(
|
||||
(await page.evaluate(() => document.documentElement.dataset.theme)) ===
|
||||
"day",
|
||||
"theme keyboard selection",
|
||||
);
|
||||
await page.keyboard.press("Escape");
|
||||
await page.getByRole("dialog").waitFor({ state: "hidden" });
|
||||
check(
|
||||
await page
|
||||
.locator('.sidebar-bottom button[title="主题"]')
|
||||
.evaluate((e) => e === document.activeElement),
|
||||
"theme dialog restores focus",
|
||||
);
|
||||
await page.locator('button[title="展开导航"]').click();
|
||||
check(
|
||||
(await page.locator(".refract-shell.expanded").count()) === 1,
|
||||
"existing navigation expansion retained",
|
||||
);
|
||||
await page.locator('button[title="收起导航"]').click();
|
||||
await page.goto(base + "/tasks");
|
||||
await page.locator('.sidebar-bottom button[title="主题"]').click();
|
||||
await page.getByRole("dialog").waitFor();
|
||||
await page.getByRole("dialog").getByRole("switch").click();
|
||||
await page.getByRole("dialog").locator(".choice").nth(3).click();
|
||||
await page.waitForFunction(
|
||||
() => document.documentElement.dataset.theme === "bluehour",
|
||||
);
|
||||
await page.waitForTimeout(50);
|
||||
result.themeTransition = await page.evaluate(() => ({
|
||||
theme: document.documentElement.dataset.theme,
|
||||
animations: document.getAnimations().map((a) => ({
|
||||
name: a.animationName,
|
||||
duration: a.effect?.getTiming().duration,
|
||||
})),
|
||||
reduced: document.documentElement.dataset.reduce,
|
||||
}));
|
||||
check(
|
||||
result.themeTransition.theme === "bluehour",
|
||||
"full-motion theme switch applies",
|
||||
);
|
||||
await page.waitForTimeout(650);
|
||||
check(
|
||||
(await page.locator(".queue-ring").count()) === 1,
|
||||
"real running jobs restore original queue ring in full motion",
|
||||
);
|
||||
await page.getByRole("dialog").getByRole("switch").click();
|
||||
check(
|
||||
(await page.locator(".queue-ring").count()) === 0,
|
||||
"reduced motion removes queue ring",
|
||||
);
|
||||
await page.keyboard.press("Escape");
|
||||
check(result.errors.length === 0, "no browser page errors");
|
||||
const recordings = [await page.video().path(), await ref.video().path()];
|
||||
await context.close();
|
||||
result.recordings = recordings.map((p) => path.relative(out, p));
|
||||
} finally {
|
||||
await fs.writeFile(
|
||||
path.join(
|
||||
out,
|
||||
process.env.HEL767_SKIP_VISUAL
|
||||
? "interaction-results.json"
|
||||
: "results.json",
|
||||
),
|
||||
JSON.stringify(result, null, 2),
|
||||
);
|
||||
await browser.close();
|
||||
await new Promise((r) => server.close(r));
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
"""Foreground isolated evidence run. No user data or external generation services."""
|
||||
import json
|
||||
import os
|
||||
from pathlib import Path
|
||||
import sqlite3
|
||||
import subprocess
|
||||
import tempfile
|
||||
|
||||
import imageio_ffmpeg
|
||||
from PIL import Image, ImageDraw
|
||||
|
||||
ROOT = Path(__file__).resolve().parents[1]
|
||||
OUT = ROOT.parent / "hel767-evidence"
|
||||
OUT.mkdir(exist_ok=True)
|
||||
|
||||
# This database exists only for the duration of this foreground verification.
|
||||
with tempfile.TemporaryDirectory(prefix="hel767-isolated-", dir=OUT) as data:
|
||||
db = sqlite3.connect(Path(data) / "fixture.sqlite")
|
||||
db.execute("create table fixture_jobs (id integer primary key, purpose text, body text)")
|
||||
names = [
|
||||
"镜头 07 · 首尾帧", "分镜草图 8/12", "Qwen 局部重绘 #62",
|
||||
"参考生视频 #21", "Krea2 文生图 #55", "镜头 06 · 首尾帧",
|
||||
]
|
||||
workflow_names = [
|
||||
"H3 首尾帧生视频", "Krea2 · 4 宫格故事板", "Qwen 2.1 · 局部重绘",
|
||||
"H3 参考生视频", "Krea2 · 文生图", "H3 首尾帧生视频",
|
||||
]
|
||||
workflow_rows = []
|
||||
for i in range(6):
|
||||
kind = "video" if i in (0, 3, 5) else "image"
|
||||
job = {
|
||||
"id": i + 1,
|
||||
"project_id": 1 if i in (0, 1, 5) else 0,
|
||||
"scene_id": 1 if i in (0, 1, 5) else None,
|
||||
"clip_id": None,
|
||||
"kind": kind,
|
||||
"workflow_id": i + 1,
|
||||
"status": ["running", "running", "pending", "failed", "done", "done"][i],
|
||||
"payload": {
|
||||
"title": names[i],
|
||||
"source": "workbench" if i in (0, 1, 5) else "studio-" + kind,
|
||||
"endpoint": {"id": "hel767-fake", "name": "5090D"},
|
||||
},
|
||||
"output_paths": (
|
||||
["HEL767-fixture-4.png" if i == 4 else "HEL767-fixture-video.mp4"]
|
||||
if i > 3 else []
|
||||
),
|
||||
"error": "OOM" if i == 3 else None,
|
||||
"created_at": f"2026-10-21T13:0{i}:00Z",
|
||||
"started_at": None,
|
||||
"completed_at": None,
|
||||
"retry_count": 0,
|
||||
"phase": "comfy_running" if i < 2 else None,
|
||||
}
|
||||
db.execute(
|
||||
"insert into fixture_jobs values (?,?,?)",
|
||||
(i + 1, "HEL-751 isolated sample correspondence; never production",
|
||||
json.dumps(job, ensure_ascii=False)),
|
||||
)
|
||||
workflow_rows.append({
|
||||
"id": i + 1, "name": workflow_names[i], "kind": kind,
|
||||
"media_io": {"in": [], "out": [kind]}, "tags": [],
|
||||
"favorite": False, "category": None, "model_family": None,
|
||||
"usage": "text2video" if kind == "video" else "text2image",
|
||||
"is_enabled": True, "needs_mapping": False,
|
||||
"input_schema": [{
|
||||
"nodeId": "1", "label": "HEL767 fixture prompt",
|
||||
"role": "prompt", "kind": "textarea", "defaultValue": "", "required": True,
|
||||
}],
|
||||
"output_schema": [{"nodeId": "2", "label": "Output", "kind": kind}],
|
||||
"endpoint_id": "hel767-fake",
|
||||
})
|
||||
db.commit()
|
||||
jobs = [json.loads(row[0]) for row in db.execute("select body from fixture_jobs order by id")]
|
||||
db.close()
|
||||
(Path(data) / "fixtures.json").write_text(
|
||||
json.dumps({"jobs": jobs, "workflows": workflow_rows}, ensure_ascii=False),
|
||||
encoding="utf-8",
|
||||
)
|
||||
subprocess.run(
|
||||
[
|
||||
imageio_ffmpeg.get_ffmpeg_exe(), "-y", "-f", "lavfi", "-i",
|
||||
"color=c=navy:s=320x180:r=24", "-f", "lavfi", "-i",
|
||||
"sine=frequency=440:sample_rate=44100", "-t", "2", "-c:v",
|
||||
"libx264", "-pix_fmt", "yuv420p", "-c:a", "aac", str(Path(data) / "video.mp4"),
|
||||
],
|
||||
stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL, check=True,
|
||||
)
|
||||
env = os.environ | {"HEL767_OUT": str(OUT), "HEL767_DATA": data}
|
||||
subprocess.run(["node", "scripts/verify-hel767.mjs"], cwd=ROOT, env=env, check=True)
|
||||
|
||||
print("Isolated database and media removed; all run-owned servers closed.")
|
||||
|
||||
# Compose unchanged captures into review artifacts; never alter the original HTML.
|
||||
if not os.environ.get("HEL767_SKIP_VISUAL"):
|
||||
evidence = json.loads((OUT / "results.json").read_text())
|
||||
lines = [
|
||||
"| Theme / viewport | Element | Sample x,y,w,h | Actual x,y,w,h | Delta x,y,w,h |",
|
||||
"|---|---|---|---|---|",
|
||||
]
|
||||
for measurement in evidence["measurements"]:
|
||||
name = f"{measurement['route']}-{measurement['theme']}-{measurement['width']}"
|
||||
sample = Image.open(OUT / f"{name}-sample.png").convert("RGB")
|
||||
actual = Image.open(OUT / f"{name}-actual.png").convert("RGB")
|
||||
pair = Image.new("RGB", (sample.width * 2, sample.height + 28), "#151515")
|
||||
ImageDraw.Draw(pair).text((12, 8), "Confirmed sample (left) / Isolated implementation (right)", fill="white")
|
||||
pair.paste(sample, (0, 28))
|
||||
pair.paste(actual, (sample.width, 28))
|
||||
pair.save(OUT / f"{name}-pair.png")
|
||||
for key, expected in measurement["sample"].items():
|
||||
observed = measurement["actual"][key]
|
||||
if not expected or not observed:
|
||||
continue
|
||||
coordinates = ("x", "y", "width", "height")
|
||||
values = lambda row: ", ".join(f"{row[c]:.3f}" for c in coordinates)
|
||||
delta = {c: observed[c] - expected[c] for c in coordinates}
|
||||
lines.append(
|
||||
f"| {measurement['route']} {measurement['theme']} {measurement['width']}×{measurement['height']} "
|
||||
f"| {key} | {values(expected)} | {values(observed)} | {values(delta)} |"
|
||||
)
|
||||
if key in ("themeName", "themeTone"):
|
||||
lines.append(f"| typography | {key} | {expected['font']} / {expected['line']} | {observed['font']} / {observed['line']} | font-size / line-height |")
|
||||
(OUT / "dimensions.md").write_text("\n".join(lines) + "\n", encoding="utf-8")
|
||||
import hashlib
|
||||
files = sorted(OUT.glob("*.png"))
|
||||
manifest = [{"file": f.name, "bytes": f.stat().st_size, "sha256": hashlib.sha256(f.read_bytes()).hexdigest()} for f in files]
|
||||
(OUT / "manifest.json").write_text(json.dumps(manifest, indent=2), encoding="utf-8")
|
||||
Reference in New Issue
Block a user