tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(canvas): 画布工作区 - 以悬浮磨砂面板承载侧栏导航

Browse Source
This commit is contained in:
ddcat666
2026-09-25 00:00:22 +08:00
parent 1dc1b6f6b5
commit c0d223f357
8 changed files with 240 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/components/canvas/canvas-node.tsx
View File

@@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import type { ReactNode } from "react";
import { AlertCircle, BookOpenCheck, CheckCircle2, ChevronRight, Clapperboard, Copy, Download, GripVertical, Image as ImageIcon, Lock, Maximize2, Music2, Pencil, RefreshCw, ScanSearch, Settings2, Star, Trash2, Type, Video, WandSparkles } from "lucide-react";
import { AlertCircle, BookOpenCheck, CheckCircle2, ChevronRight, Clapperboard, Copy, Download, Image as ImageIcon, Lock, Maximize2, Music2, Pencil, RefreshCw, ScanSearch, Settings2, Star, Trash2, Type, Video, WandSparkles } from "lucide-react";
import { useCanvasNodeActions } from "./canvas-node-action-context";
@@ -307,7 +307,6 @@ export const CanvasNode = React.memo(function CanvasNode({
draft={titleDraft}
theme={theme}
onDraftChange={setTitleDraft}
onDragStart={readOnly ? undefined : (event) => onMouseDown(event, data.id)}
onEdit={() => setIsEditingTitle(true)}
onCommit={commitTitle}
onCancel={() => { setTitleDraft(data.title); setIsEditingTitle(false); }}
@@ -647,7 +646,7 @@ function formatMediaDimensionLabel(node: CanvasNodeData, hasVisualMediaContent:
return `${Math.round(width)}*${Math.round(height)}`;
}
function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, editing, draft, theme, onDragStart, onDraftChange, onEdit, onCommit, onCancel }: {
function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, editing, draft, theme, onDraftChange, onEdit, onCommit, onCancel }: {
node: CanvasNodeData;
scale: number;
dimensionLabel: string | null;
@@ -657,7 +656,6 @@ function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, edi
draft: string;
theme: CanvasTheme;
onDraftChange: (value: string) => void;
onDragStart?: (event: React.MouseEvent) => void;
onEdit: () => void;
onCommit: () => void;
onCancel: () => void;
@@ -677,7 +675,7 @@ function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, edi
"--canvas-node-width": `${node.width}px`,
borderRadius: "var(--r-sm)",
background: "transparent",
paddingInline: "var(--space-1-half)",
paddingInline: "0",
color: active ? theme.node.text : theme.node.label,
transform: `scale(var(--canvas-live-inverse-scale, ${inverseScale}))`,
transformOrigin: "left bottom",
@@ -686,23 +684,6 @@ function NodeExternalHeader({ node, scale, dimensionLabel, active, editable, edi
onPointerDown={(event) => event.stopPropagation()}
>
<div className="flex min-w-0 items-center gap-1" style={{ maxWidth: maxHeaderWidth }}>
<button
type="button"
className="flex size-6 shrink-0 touch-none items-center justify-center rounded cursor-grab active:cursor-grabbing disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-1"
aria-label={node.metadata?.locked ? "节点已锁定" : `拖动节点：${node.title}`}
title={node.metadata?.locked ? "节点已锁定，请先解锁" : "拖动此处移动节点；点击名称可重命名"}
disabled={!onDragStart || Boolean(node.metadata?.locked)}
onPointerDown={(event) => {
if (event.button !== 0) return;
// HTML / SVG 正文在跨源沙箱中；捕获指针，避免经过 iframe 后丢失 move / up。
event.preventDefault();
event.stopPropagation();
event.currentTarget.setPointerCapture(event.pointerId);
onDragStart?.(event);
}}
>
{node.metadata?.locked ? <Lock className="size-3" /> : <GripVertical className="size-3" strokeWidth={1.8} />}
</button>
<Icon className="size-3 shrink-0" strokeWidth={1.8} />
{editing ? (
<input

2
web/src/components/canvas/canvas-workspace-node-list-panel.tsx
View File

@@ -36,7 +36,7 @@ export function CanvasWorkspaceNodeListPanel({
<span className="tabular-nums text-foreground/32">{nodes.length.toLocaleString("zh-CN")}</span>
</header>
<div className="shrink-0 border-b border-border/70 p-2">
<label className="flex h-8 items-center gap-1.5 rounded-md border border-border/75 bg-foreground/[.025] px-2 focus-within:border-[var(--workspace-accent)] focus-within:ring-2 focus-within:ring-[var(--workspace-accent-soft)]">
<label className="flex h-8 items-center gap-1.5 rounded-[var(--r-md)] bg-foreground/[.045] px-2 focus-within:ring-2 focus-within:ring-[var(--workspace-accent-soft)]">
<Search className="size-3.5 shrink-0 text-foreground/32" />
<input
value={query}

157
web/src/components/canvas/canvas-workspace-panel.css
View File

@@ -52,76 +52,161 @@
width: 12px;
height: 12px;
}
.canvas-workspace-shell,
.canvas-workspace-panel {
--canvas-workspace-material: color-mix(in srgb, var(--canvas-workspace-base, var(--background)) 72%, transparent);
--canvas-workspace-sheen: transparent;
}
.canvas-main-with-workspace {
--canvas-workspace-inset: var(--space-16);
}
@media (min-width: 992px) {
.canvas-main-with-workspace.canvas-workspace-expanded {
--canvas-workspace-inset: calc(var(--space-16) + 320px);
}
.canvas-main-with-workspace > .canvas-project-sidebar {
margin-left: var(--space-16);
}
.canvas-main-with-workspace:has(> .canvas-project-sidebar) .canvas-topbar {
left: 0;
}
.canvas-main-with-workspace:has(> .canvas-project-sidebar) .canvas-workspace-zoom-controls {
left: var(--canvas-inset-x);
}
}
.canvas-main-with-workspace .canvas-editor-shell {
z-index: 0;
}
.canvas-main-with-workspace .canvas-topbar {
left: var(--canvas-workspace-inset);
}
.canvas-main-with-workspace .canvas-workspace-zoom-controls {
left: calc(var(--canvas-workspace-inset) + var(--canvas-inset-x));
}
.canvas-workspace-shell {
position: absolute;
z-index: 2;
inset-block: 0;
left: 0;
display: flex;
flex-shrink: 0;
min-height: 0;
margin: var(--space-2) 0 var(--space-2) var(--space-2);
overflow: hidden;
border: 1px solid color-mix(in srgb, currentColor 8%, transparent);
border-radius: var(--r-2xl);
background: var(--canvas-workspace-material);
box-shadow: 0 10px 28px color-mix(in srgb, black 16%, transparent);
contain: layout paint;
-webkit-backdrop-filter: blur(22px) saturate(140%);
backdrop-filter: blur(22px) saturate(140%);
}
.canvas-workspace-panel {
background: linear-gradient(145deg, var(--canvas-workspace-sheen), transparent 55%), var(--canvas-workspace-material);
}
.canvas-workspace-shell .canvas-workspace-panel {
background: transparent;
}
.canvas-workspace-panel > :is(header, .border-b) {
border-bottom: 0 !important;
}
.canvas-workspace-panel > footer {
border-top: 0;
}
.canvas-workspace-panel > header {
padding-right: var(--space-12);
}
.canvas-workspace-close {
position: absolute;
z-index: 2;
top: var(--space-2);
right: var(--space-2);
display: grid;
width: var(--space-8);
height: var(--space-8);
place-items: center;
border-radius: var(--r-md);
color: inherit;
}
.canvas-workspace-close:hover {
background: var(--dock-command-hover);
}
.canvas-workspace-close:focus-visible {
outline: 2px solid var(--dock-command-active-text, var(--foreground));
outline-offset: 2px;
}
.canvas-workspace-rail {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: var(--space-16);
width: calc(var(--space-16) - var(--space-2));
min-height: 0;
padding: var(--space-4) var(--space-2);
gap: var(--space-3);
padding: var(--space-2) var(--space-1-half);
gap: var(--space-1);
overflow-y: auto;
border-right: 1px solid var(--dock-border);
backdrop-filter: blur(var(--dock-blur));
border: 0;
background: transparent;
scrollbar-width: none;
}
.canvas-workspace-rail::-webkit-scrollbar {
display: none;
}
.canvas-workspace-rail-items {
display: flex;
flex-direction: column;
gap: var(--space-3);
flex-shrink: 0;
}
.canvas-workspace-rail-divider {
height: 1px;
margin-inline: var(--space-2);
background: var(--dock-tooltip-border);
gap: var(--space-1);
flex-shrink: 0;
}
.canvas-workspace-rail .canvas-workspace-rail-button {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-height: var(--space-12);
display: grid;
grid-template-rows: 20px auto;
place-items: center;
justify-items: center;
align-content: center;
gap: 2px;
min-height: 46px;
width: 100%;
flex-shrink: 0;
border-radius: var(--r-lg);
font-size: var(--fs-tiny);
line-height: 1.4;
font-size: var(--fs-nano);
line-height: 1;
font-weight: 500;
color: inherit;
text-align: center;
color: color-mix(in srgb, currentColor 72%, transparent);
transition:
background-color var(--motion-instant) ease-out,
color var(--motion-instant) ease-out;
}
.canvas-workspace-rail .canvas-workspace-rail-button > span {
display: block;
width: 100%;
text-align: center;
}
.canvas-workspace-rail svg {
width: var(--space-5);
height: var(--space-5);
stroke-width: 1.65;
display: block;
width: 18px;
height: 18px;
margin-inline: auto;
stroke-width: 1.75;
}
.canvas-workspace-rail .canvas-workspace-rail-button:hover {
background: var(--dock-command-hover);
color: currentColor;
}
.canvas-workspace-rail .canvas-workspace-rail-button[aria-pressed="true"] {
background: var(--dock-command-active);
color: var(--dock-command-active-text);
}
.canvas-workspace-rail-button[aria-pressed="true"]::before {
content: "";
position: absolute;
inset-inline-start: calc(-1 * var(--space-2));
top: var(--space-4);
bottom: var(--space-4);
width: 2px;
border-radius: var(--r-full);
background: currentColor;
}
.canvas-workspace-rail .canvas-workspace-rail-toggle {
margin-top: auto;
}
.canvas-workspace-rail :focus-visible {
outline: 2px solid var(--dock-command-active-text);
.canvas-workspace-rail :focus:not([data-input-modality="keyboard"]) {
outline: none;
}
.canvas-workspace-rail :focus-visible[data-input-modality="keyboard"] {
outline: 1px solid var(--dock-command-active-text);
outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {

122
web/src/components/canvas/canvas-workspace-panel.tsx
View File

@@ -2,9 +2,9 @@ import { Link } from "react-router";
import { CanvasWorkspaceAssetPanel } from "./canvas-workspace-asset-panel";
import { CanvasWorkspaceHistoryPanel } from "./canvas-workspace-history-panel";
import type { InsertAssetPayload } from "./asset-picker-modal";
import { useDeferredValue, useState } from "react";
import { useDeferredValue, useState, type CSSProperties, type KeyboardEvent, type PointerEvent } from "react";
import { Button, Grid } from "antd";
import { Home, PanelLeftClose, PanelLeftOpen, Layers, Images, ListChecks, History, X } from "lucide-react";
import { Home, PanelLeftClose, PanelLeftOpen, Layers3, Images, ListChecks, History, X } from "lucide-react";
import { AppDrawer } from "@/components/ui/product/app-drawer";
import { searchCanvasNodes } from "@/lib/canvas/canvas-node-search";
import { useEffectiveConfig } from "@/stores/use-config-store";
@@ -50,15 +50,18 @@ export function CanvasWorkspacePanel({
const deferredQuery = useDeferredValue(query);
const config = useEffectiveConfig();
const screens = Grid.useBreakpoint();
const markPointer = (event: PointerEvent<HTMLElement>) => {
event.currentTarget.dataset.inputModality = "pointer";
};
const markKeyboard = (event: KeyboardEvent<HTMLElement>) => {
if (event.key === "Tab" || event.key === "Enter" || event.key === " ") event.currentTarget.dataset.inputModality = "keyboard";
};
const tasks = useCanvasWorkspaceTasks(projectId, open && (tab === "tasks" || history));
const content = (
<div className="canvas-workspace-panel flex h-full min-h-0 flex-col bg-background text-foreground" data-canvas-no-zoom data-canvas-wheel-scroll onWheel={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
<header className="flex items-center justify-between border-b border-border p-3">
<strong>工作区</strong>
<button aria-label="关闭工作区" onClick={onClose}>
<X className="size-4" />
</button>
</header>
<div className="canvas-workspace-panel relative flex h-full min-h-0 flex-col text-foreground" style={{ "--canvas-workspace-base": theme.node.panel } as CSSProperties} data-canvas-no-zoom data-canvas-wheel-scroll onWheel={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
<button className="canvas-workspace-close" type="button" aria-label="关闭工作区" onClick={onClose}>
<X className="size-4" />
</button>
{tab === "nodes" && (
<CanvasWorkspaceNodeListPanel nodes={nodes} config={config} results={searchCanvasNodes(nodes, deferredQuery, nodes.length, config)} query={query} deferredQuery={deferredQuery} selectedNodeIds={selectedNodeIds} onQueryChange={setQuery} onFocus={onFocus} />
)}
@@ -86,62 +89,67 @@ export function CanvasWorkspacePanel({
</div>
);
const entries = [
{ id: "nodes", label: "节点", icon: Layers },
{ id: "nodes", label: "节点", icon: Layers3 },
{ id: "assets", label: "资产", icon: Images },
{ id: "tasks", label: "任务", icon: ListChecks },
{ id: "history", label: "历史", icon: History },
];
return (
<>
<nav className="canvas-workspace-rail" style={{ ...canvasDockStyle(theme), boxShadow: "none" }} aria-label="画布左侧菜单" data-canvas-no-zoom onWheel={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}>
<Link to="/" className="canvas-workspace-rail-button" aria-label="主页" title="返回主页">
<Home />
<span>主页</span>
</Link>
<div className="canvas-workspace-rail-divider" aria-hidden="true" />
<div className="canvas-workspace-rail-items">
{entries.map(({ id, label, icon: Icon }) => (
<button
key={id}
type="button"
className="canvas-workspace-rail-button"
title={open && tab === id ? `收起${label}` : `打开${label}`}
aria-pressed={open && tab === id}
onClick={() => {
if (open && tab === id) onClose();
else {
setTab(id);
onOpen();
}
}}
>
<Icon />
<span>{label}</span>
</button>
))}
</div>
<button
className="canvas-workspace-rail-button canvas-workspace-rail-toggle"
type="button"
onClick={open ? onClose : onOpen}
aria-expanded={open}
aria-label={open ? "折叠面板" : "展开面板"}
title={open ? "收起面板，扩大画布" : "展开工作区面板"}
>
{open ? <PanelLeftClose /> : <PanelLeftOpen />}
<span>{open ? "收起" : "展开"}</span>
</button>
</nav>
{open &&
(screens.lg ? (
<aside className="w-80 shrink-0 border-r border-border min-h-0" aria-label="画布工作区">
<div className="canvas-workspace-shell" style={{ ...canvasDockStyle(theme), "--canvas-workspace-base": theme.node.panel, background: undefined } as CSSProperties}>
<nav className="canvas-workspace-rail" aria-label="画布左侧菜单" data-canvas-no-zoom onWheel={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}>
<Link to="/" className="canvas-workspace-rail-button" aria-label="主页" title="返回主页">
<Home />
<span>主页</span>
</Link>
<div className="canvas-workspace-rail-items">
{entries.map(({ id, label, icon: Icon }) => (
<button
key={id}
type="button"
className="canvas-workspace-rail-button"
title={open && tab === id ? `收起${label}` : `打开${label}`}
aria-pressed={open && tab === id}
onPointerDown={markPointer}
onKeyDown={markKeyboard}
onClick={() => {
if (open && tab === id) onClose();
else {
setTab(id);
onOpen();
}
}}
>
<Icon />
<span>{label}</span>
</button>
))}
</div>
<button
className="canvas-workspace-rail-button canvas-workspace-rail-toggle"
type="button"
onClick={open ? onClose : onOpen}
onPointerDown={markPointer}
onKeyDown={markKeyboard}
aria-expanded={open}
aria-label={open ? "折叠面板" : "展开面板"}
title={open ? "收起面板，扩大画布" : "展开工作区面板"}
>
{open ? <PanelLeftClose /> : <PanelLeftOpen />}
<span>{open ? "收起" : "展开"}</span>
</button>
</nav>
{open && screens.lg ? (
<aside className="w-80 shrink-0 min-h-0" aria-label="画布工作区">
{content}
</aside>
) : (
<AppDrawer flush open placement="left" title={null} closable={false} size={320} onClose={onClose}>
{content}
</AppDrawer>
))}
) : null}
</div>
{open && !screens.lg ? (
<AppDrawer flush open placement="left" title={null} closable={false} size={320} onClose={onClose}>
{content}
</AppDrawer>
) : null}
</>
);
}

2
web/src/components/canvas/infinite-canvas.tsx
View File

@@ -493,7 +493,7 @@ function isCanvasInternalDragEvent(event: React.DragEvent<HTMLDivElement>) {
return Boolean(target?.closest(CANVAS_INTERNAL_DRAG_SELECTOR));
}
function CanvasGrid({ appearance, mode }: { appearance?: CanvasAppearance; mode: CanvasBackgroundMode }) {
export function CanvasGrid({ appearance, mode }: { appearance?: CanvasAppearance; mode: CanvasBackgroundMode }) {
const colorTheme = useActiveTheme();
const gridColor = resolveCanvasGridColor(appearance, colorTheme, mode);
const backgroundImage = mode === "dots" ? `radial-gradient(circle, ${gridColor} 0.8px, transparent 1px)` : `linear-gradient(${gridColor} 1px, transparent 1px), linear-gradient(90deg, ${gridColor} 1px, transparent 1px)`;

4
web/src/pages/canvas/project.tsx
View File

@@ -2550,7 +2550,7 @@ function InfiniteCanvasPage() {
>
跳转到画布主内容
</a>
<main id="canvas-main" tabIndex={-1} className="flex h-full min-h-0 overflow-hidden outline-none" style={{ background: resolvedCanvasAppearance.background, color: theme.node.text }}>
<main id="canvas-main" tabIndex={-1} className={`relative flex h-full min-h-0 overflow-hidden outline-none ${!focusMode && !versions.preview ? `canvas-main-with-workspace ${workspaceOpen ? "canvas-workspace-expanded" : ""}` : ""}`} style={{ background: resolvedCanvasAppearance.background, color: theme.node.text }}>
{!focusMode && !versions.preview ? <CanvasWorkspacePanel key={projectId} open={workspaceOpen} onOpen={() => setWorkspaceOpen(true)} onInsertAssets={handleProjectAssetsInsert} projectId={projectId} nodes={nodes} selectedNodeIds={selectedNodeIds} onClose={() => setWorkspaceOpen(false)} onAssets={() => openCanvasAssetLibrary()} onProjectAssets={currentProject?.projectId ? () => openProjectAssets() : undefined} onCancelTask={cancelCanvasTask} onFocus={nodeId => {
const target = nodeById.get(nodeId);
const parent = target?.parentId ? nodeById.get(target.parentId) : null;
@@ -3019,7 +3019,7 @@ function InfiniteCanvasPage() {
<CanvasOverlayLayerContainer
overlayId="asset-tray"
fallbackZIndex="var(--z-panel)"
className="absolute bottom-[calc(var(--canvas-inset-y)+var(--space-16))] left-[var(--canvas-inset-x)] flex items-end gap-2 lg:bottom-[var(--canvas-inset-y)]"
className="canvas-workspace-zoom-controls absolute bottom-[calc(var(--canvas-inset-y)+var(--space-16))] left-[var(--canvas-inset-x)] flex items-end gap-2 lg:bottom-[var(--canvas-inset-y)]"
onMouseDown={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
onWheel={(event) => event.stopPropagation()}