From 227e54850320d52a47d8ecb1999066ceba93264f Mon Sep 17 00:00:00 2001 From: ddCat <2695092045@qq.com> Date: Sat, 22 Aug 2026 13:09:34 +0800 Subject: [PATCH] =?UTF-8?q?fix(canvas):=20=E7=94=BB=E5=B8=83=E8=A7=86?= =?UTF-8?q?=E8=A7=89=20-=20=E6=94=B6=E6=95=9B=E8=BE=B9=E6=A1=86=E4=B8=8E?= =?UTF-8?q?=E7=BD=91=E6=A0=BC=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/canvas/canvas-node-prompt-panel.tsx | 2 +- web/src/components/canvas/canvas-node.tsx | 13 ++++++------- web/src/components/canvas/infinite-canvas.tsx | 2 +- web/src/lib/canvas-theme.ts | 6 +++--- web/src/lib/canvas/canvas-live-viewport.ts | 2 +- 5 files changed, 12 insertions(+), 13 deletions(-) diff --git a/web/src/components/canvas/canvas-node-prompt-panel.tsx b/web/src/components/canvas/canvas-node-prompt-panel.tsx index 07d3a14be..baa627620 100644 --- a/web/src/components/canvas/canvas-node-prompt-panel.tsx +++ b/web/src/components/canvas/canvas-node-prompt-panel.tsx @@ -394,7 +394,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi setExpandedPromptOpen(false); }} styles={{ - container: { border: `1px solid ${theme.node.edge}`, borderRadius: "var(--canvas-composer-radius)", padding: 0, overflow: "hidden", background: theme.node.panel, boxShadow: theme.node.shadow }, + container: { border: 0, borderRadius: "var(--canvas-composer-radius)", padding: 0, overflow: "hidden", background: theme.node.panel, boxShadow: theme.node.shadow }, body: { minHeight: 0, padding: 0 }, }} > diff --git a/web/src/components/canvas/canvas-node.tsx b/web/src/components/canvas/canvas-node.tsx index a6376df3f..e407fb66f 100644 --- a/web/src/components/canvas/canvas-node.tsx +++ b/web/src/components/canvas/canvas-node.tsx @@ -110,6 +110,7 @@ export const CanvasNode = React.memo(function CanvasNode({ const hasImageContent = data.type === CanvasNodeType.Image && Boolean(data.metadata?.content); const hasVideoContent = data.type === CanvasNodeType.Video && Boolean(data.metadata?.content); const hasAudioContent = data.type === CanvasNodeType.Audio && Boolean(data.metadata?.content); + const isComposerNode = data.type === CanvasNodeType.Config; const hasMediaContent = hasImageContent || hasVideoContent || hasAudioContent; const hasReplaceAction = !readOnly && (data.type === CanvasNodeType.Image || data.type === CanvasNodeType.Video); const isBatchRoot = data.type === CanvasNodeType.Image && Boolean(data.metadata?.isBatchRoot) && batchCount > 1; @@ -292,8 +293,8 @@ export const CanvasNode = React.memo(function CanvasNode({ data-state={data.metadata?.status || (isActive ? "active" : isRelated ? "related" : "idle")} style={{ background: hasImageContent || hasVideoContent ? "transparent" : theme.node.fill, - border: `1px solid ${theme.node.edge}`, - boxShadow: isSelected ? `0 0 0 2px ${theme.node.activeStroke}, ${theme.node.hoverShadow}` : hovered ? theme.node.hoverShadow : theme.node.shadow, + border: isComposerNode || isSelected ? "0" : `1px solid ${theme.node.edge}`, + boxShadow: isComposerNode ? "none" : isSelected || hovered ? theme.node.hoverShadow : theme.node.shadow, }} onMouseDown={(event) => onMouseDown(event, data.id)} onDoubleClick={(event) => { @@ -636,12 +637,10 @@ function NodeExternalHeader({ node, scale, active, editable, editing, draft, the className="canvas-node-external-header absolute bottom-full left-0 z-[var(--node-z-overlay)] flex h-6 items-center gap-1 overflow-hidden" style={{ maxWidth: maxHeaderWidth, - border: `1px solid ${theme.node.edge}`, borderRadius: "var(--r-sm)", background: theme.node.panel, paddingInline: "var(--space-1-half)", color: active ? theme.node.text : theme.node.label, - boxShadow: active ? theme.node.shadow : undefined, transform: `scale(var(--canvas-live-inverse-scale, ${inverseScale}))`, transformOrigin: "left bottom", }} @@ -653,8 +652,8 @@ function NodeExternalHeader({ node, scale, active, editable, editing, draft, the onDraftChange(event.target.value)} onFocus={(event) => event.currentTarget.select()} onBlur={onCommit} @@ -665,7 +664,7 @@ function NodeExternalHeader({ node, scale, active, editable, editing, draft, the aria-label="节点名称" /> ) : editable ? ( - diff --git a/web/src/components/canvas/infinite-canvas.tsx b/web/src/components/canvas/infinite-canvas.tsx index 09e0bc452..df530aa9f 100644 --- a/web/src/components/canvas/infinite-canvas.tsx +++ b/web/src/components/canvas/infinite-canvas.tsx @@ -426,7 +426,7 @@ function CanvasGrid({ mode }: { mode: CanvasBackgroundMode }) { backgroundImage, backgroundSize: "var(--canvas-grid-size) var(--canvas-grid-size)", transform: "translate3d(var(--canvas-grid-x), var(--canvas-grid-y), 0)", - opacity: 0.55, + opacity: 0.42, willChange: "transform", }} /> diff --git a/web/src/lib/canvas-theme.ts b/web/src/lib/canvas-theme.ts index 93a718be0..46c819123 100644 --- a/web/src/lib/canvas-theme.ts +++ b/web/src/lib/canvas-theme.ts @@ -70,9 +70,9 @@ export const canvasThemes = { }, dark: { canvas: { - background: "#090a0c", - dot: "rgba(174,184,199,.32)", - line: "rgba(174,184,199,.16)", + background: "#0b0b0b", + dot: "rgba(170,170,170,.22)", + line: "rgba(170,170,170,.10)", selectionFill: "rgba(255,255,255,.12)", }, node: { diff --git a/web/src/lib/canvas/canvas-live-viewport.ts b/web/src/lib/canvas/canvas-live-viewport.ts index a2d2f1168..c3cab6203 100644 --- a/web/src/lib/canvas/canvas-live-viewport.ts +++ b/web/src/lib/canvas/canvas-live-viewport.ts @@ -7,7 +7,7 @@ export const CANVAS_SELECTION_PREVIEW_EVENT = "canvas:selection-preview"; // 空间网格点模式的点半径（像素单位）。远距（缩放 < 0.12）时用更小半径避免糊成一团。 // 同时被 （infinite-canvas）与滚动同步（applyCanvasLiveViewport）共享，避免两处漂移。 export function canvasDotPx(scale: number): string { - return scale < 0.12 ? "1.2px" : "2px"; + return scale < 0.12 ? "0.8px" : "1.25px"; } export function applyCanvasLiveViewport(container: HTMLDivElement | null, viewport: ViewportTransform, notify = true) {