diff --git a/web/src/components/canvas/canvas-focus-mode-bar.tsx b/web/src/components/canvas/canvas-focus-mode-bar.tsx index ced941ac4..f911a7ff4 100644 --- a/web/src/components/canvas/canvas-focus-mode-bar.tsx +++ b/web/src/components/canvas/canvas-focus-mode-bar.tsx @@ -1,17 +1,14 @@ import { Tooltip } from "@/components/ui/base/tooltip"; import type { ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; -import { History, PanelBottom, X, ZoomIn, ZoomOut } from "lucide-react"; - +import { PanelBottom, X, ZoomIn, ZoomOut } from "lucide-react"; import { aceternityMotion } from "@/lib/aceternity-motion"; import { canvasThemes } from "@/lib/canvas-theme"; import { useActiveTheme } from "@/stores/canvas/use-canvas-theme-store"; type CanvasFocusModeBarProps = { - versionsOpen: boolean; - onToggleVersions: () => void; - syncStatus?: ReactNode; + syncIcon?: ReactNode; dockRevealed: boolean; zoomPercent: number; onToggleDock: () => void; @@ -21,7 +18,7 @@ type CanvasFocusModeBarProps = { onFit: () => void; }; -export function CanvasFocusModeBar({ versionsOpen, onToggleVersions, syncStatus, dockRevealed, zoomPercent, onToggleDock, onExit, onZoomIn, onZoomOut, onFit }: CanvasFocusModeBarProps) { +export function CanvasFocusModeBar({ syncIcon, dockRevealed, zoomPercent, onToggleDock, onExit, onZoomIn, onZoomOut, onFit }: CanvasFocusModeBarProps) { const theme = canvasThemes[useActiveTheme()]; const reducedMotion = useReducedMotion(); @@ -36,22 +33,11 @@ export function CanvasFocusModeBar({ versionsOpen, onToggleVersions, syncStatus, >
- - {syncStatus} - - - + {syncIcon}
@@ -637,7 +637,9 @@ export function RetainedCanvasImage({ {alt event.preventDefault()} className={`absolute inset-0 ${className}`} diff --git a/web/src/components/canvas/canvas-node.tsx b/web/src/components/canvas/canvas-node.tsx index d0d90c6aa..d5f6576bc 100644 --- a/web/src/components/canvas/canvas-node.tsx +++ b/web/src/components/canvas/canvas-node.tsx @@ -34,7 +34,7 @@ type CanvasNodeProps = { connectionApproach?: Position; forceInputVisible?: boolean; showImageInfo: boolean; - reduceMediaEffects?: boolean; + disableMediaEffects?: boolean; readOnly?: boolean; resourceLabel?: CanvasResourceReference; mentionReferences?: CanvasResourceReference[]; @@ -60,7 +60,6 @@ type CanvasNodeProps = { onRetry?: (node: CanvasNodeData) => void; onReloadResource?: (node: CanvasNodeData) => void; onOpenTaskDetails?: (node: CanvasNodeData) => void; - onOpenVersions?: (node: CanvasNodeData) => void; onViewImage?: (node: CanvasNodeData) => void; onReplaceMedia?: (node: CanvasNodeData) => void; onOpenTextEditor?: (node: CanvasNodeData) => void; @@ -83,7 +82,7 @@ export const CanvasNode = React.memo(function CanvasNode({ connectionApproach, forceInputVisible = false, showImageInfo, - reduceMediaEffects = false, + disableMediaEffects = false, readOnly = false, resourceLabel, mentionReferences = [], @@ -109,7 +108,6 @@ export const CanvasNode = React.memo(function CanvasNode({ onRetry, onReloadResource, onOpenTaskDetails, - onOpenVersions, onViewImage, onOpenTextEditor, onOpenPrevis, @@ -189,7 +187,7 @@ export const CanvasNode = React.memo(function CanvasNode({ if (next !== data.title) onTitleChange?.(data.id, next); }; - const connectionTilt = isConnectionTarget && !reduceMediaEffects && !dragOffset + const connectionTilt = isConnectionTarget && !disableMediaEffects && !dragOffset ? canvasConnectionTilt(data, connectionApproach) : undefined; return ( @@ -317,7 +315,7 @@ export const CanvasNode = React.memo(function CanvasNode({ onReloadResource={onReloadResource} onOpenTaskDetails={onOpenTaskDetails} onToggleBatch={() => onToggleBatch?.(data.id)} - reduceMediaEffects={reduceMediaEffects} + disableMediaEffects={disableMediaEffects} mediaActive={mediaActive} onMediaPlayRequest={onMediaPlayRequest} /> @@ -342,26 +340,8 @@ export const CanvasNode = React.memo(function CanvasNode({ ) : null} - {showChrome && data.metadata?.versionLabel ? ( - - ) : null} {showChrome && showStatusTrack ? ( -
+
{resourceLabel && data.type !== CanvasNodeType.Image ? : null} {hasMediaContent && !readOnly ? : null} {isBatchRoot ? onToggleBatch?.(data.id)} /> : null} @@ -436,7 +416,7 @@ function areCanvasNodePropsEqual(previous: CanvasNodeProps, next: CanvasNodeProp previous.connectionApproach?.y === next.connectionApproach?.y && previous.forceInputVisible === next.forceInputVisible && previous.showImageInfo === next.showImageInfo && - previous.reduceMediaEffects === next.reduceMediaEffects && + previous.disableMediaEffects === next.disableMediaEffects && previous.readOnly === next.readOnly && previous.resourceLabel === next.resourceLabel && previous.mentionReferences === next.mentionReferences && @@ -464,7 +444,6 @@ function areCanvasNodePropsEqual(previous: CanvasNodeProps, next: CanvasNodeProp previous.onRetry === next.onRetry && previous.onReloadResource === next.onReloadResource && previous.onOpenTaskDetails === next.onOpenTaskDetails && - previous.onOpenVersions === next.onOpenVersions && previous.onViewImage === next.onViewImage && previous.onReplaceMedia === next.onReplaceMedia && previous.onOpenTextEditor === next.onOpenTextEditor && diff --git a/web/src/components/canvas/nodes/panorama-node.tsx b/web/src/components/canvas/nodes/panorama-node.tsx index 8e29e5541..e65918e77 100644 --- a/web/src/components/canvas/nodes/panorama-node.tsx +++ b/web/src/components/canvas/nodes/panorama-node.tsx @@ -11,7 +11,7 @@ import type { CanvasNodeData } from "@/types/canvas"; type PanoramaNodeContentProps = { node: CanvasNodeData; theme: CanvasTheme; - reduceMediaEffects?: boolean; + disableMediaEffects?: boolean; }; /** 节点外壳调用查看器能力的最小控制面;实现由 PanoramaViewport 注入。 */ @@ -44,15 +44,13 @@ function clampFov(value: number) { * 与既有的 DeferredMediaLoad「点击加载」是同一套交互习惯。 * 2. **用原生 three 而不是 @react-three/fiber**。这里需要精确控制 dispose—— * 上下文/纹理/几何体漏一个就逼近上限,节点还会被频繁增删。 - * 3. **性能模式下不提供激活入口**。错题本里多条崩溃出在画布高频渲染, - * reduceMediaEffects 时只给静态预览。 - * 4. **截图/四宫格导出走 preserveDrawingBuffer + 同步重渲染**。captureSquare + * 3. **截图/四宫格导出走 preserveDrawingBuffer + 同步重渲染**。captureSquare * 临时把 renderer 切到方形画幅再恢复,不依赖 rAF 时序;全屏展开时同一时刻 * 只挂一个 viewer 实例(节点体退回静态预览),上下文数量不翻倍。 - * 5. **节点内不消费滚轮**,滚轮留给画布缩放;全屏覆盖层内画布缩放不存在, + * 4. **节点内不消费滚轮**,滚轮留给画布缩放;全屏覆盖层内画布缩放不存在, * 才用滚轮调视场角。 */ -export function PanoramaNodeContent({ node, theme, reduceMediaEffects }: PanoramaNodeContentProps) { +export function PanoramaNodeContent({ node, theme, disableMediaEffects }: PanoramaNodeContentProps) { const upstream = useUpstreamNodes(node.id); const actions = useCanvasNodeActions(); const inherited = upstream.find((item) => getNodeResourceKind(item) === "image"); @@ -142,9 +140,9 @@ export function PanoramaNodeContent({ node, theme, reduceMediaEffects }: Panoram {node.title
- {failed ? "全景加载失败(图片可能不允许跨域读取)" : expanded ? "已展开全屏环视" : reduceMediaEffects ? "性能模式下仅显示预览" : `${projectionLabel} · 360° 全景`} + {failed ? "全景加载失败(图片可能不允许跨域读取)" : expanded ? "已展开全屏环视" : disableMediaEffects ? "仅显示预览" : `${projectionLabel} · 360° 全景`} - {reduceMediaEffects || expanded ? null : ( + {disableMediaEffects || expanded ? null : (