Make video canvas surfaces opaque

app/canvas/[id]/page.tsx

@@ -419,19 +419,19 @@ const AGENT_RESULT_MODE_LABELS: Record<AgentGenerationResultModeType, string> =
   sku_replacement: "SKU 替换",
 };
 const VIDEO_CANVAS_PANEL_CLASS =
-  "pointer-events-auto overflow-hidden rounded-[28px] border border-border/60 bg-background/94 shadow-2xl backdrop-blur-xl supports-[backdrop-filter]:bg-background/80";
+  "pointer-events-auto overflow-hidden rounded-[28px] border border-border/60 bg-background shadow-2xl";
 const VIDEO_CANVAS_PANEL_BADGE_CLASS =
-  "border-border/60 bg-background/82 text-foreground/75";
+  "border-border/60 bg-background text-foreground/75";
 const VIDEO_CANVAS_SUBSECTION_CLASS =
-  "rounded-2xl border border-border/60 bg-background/72 p-3";
+  "rounded-2xl border border-border/60 bg-background p-3";
 const VIDEO_CANVAS_TOOLBAR_CLASS =
-  "flex items-center gap-1.5 rounded-[28px] border border-border/60 bg-background/94 px-2.5 py-1.5 shadow-2xl backdrop-blur-xl supports-[backdrop-filter]:bg-background/82";
+  "flex items-center gap-1.5 rounded-[28px] border border-border/60 bg-background px-2.5 py-1.5 shadow-2xl";
 const VIDEO_CANVAS_TOOLBAR_BUTTON_CLASS =
-  "h-9 w-9 rounded-xl border border-transparent text-foreground/75 hover:border-border/60 hover:bg-background/88 hover:text-foreground";
+  "h-9 w-9 rounded-xl border border-transparent text-foreground/75 hover:border-border/60 hover:bg-background hover:text-foreground";
 const VIDEO_CANVAS_TOOLBAR_ACTIVE_BUTTON_CLASS =
   "border-border/60 bg-background text-foreground shadow-sm hover:bg-background";
 const VIDEO_CANVAS_COMPACT_CONTROLS_CLASS =
-  "rounded-full border border-border/60 bg-background/92 px-2 py-1 shadow-sm backdrop-blur-xl supports-[backdrop-filter]:bg-background/80";
+  "rounded-full border border-border/60 bg-background px-2 py-1 shadow-sm";
 
 function buildScopedCanvasChatId(projectId: string, scope: "agent-mode") {
   const normalized = String(projectId || "").trim().toLowerCase().replace(/-/g, "");
@@ -7110,7 +7110,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                       key={`${selectedVideoWorkflowDefinition.type}-${item.type}`}
                       size="sm"
                       variant="secondary"
-                      className="rounded-full border border-border/60 bg-background/82 hover:bg-background"
+                      className="rounded-full border border-border/60 bg-background hover:bg-background"
                       onClick={() => handleAddWorkflowNode(item.type)}
                     >
                       {item.label}
@@ -7245,7 +7245,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                         variant="secondary"
                         onClick={() => void handleOpenSelectedWorkflowInAgent()}
                         disabled={isAnyWorkflowExecutionRunning}
-                        className="w-full rounded-2xl border border-border/60 bg-background/82 hover:bg-background"
+                        className="w-full rounded-2xl border border-border/60 bg-background hover:bg-background"
                       >
                         {isSelectedWorkflowAgentRunning ? (
                           <>
@@ -7267,7 +7267,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                         variant="secondary"
                         onClick={() => void handleCreateSelectedAgentResultBranches()}
                         disabled={isAnyWorkflowExecutionRunning}
-                        className="w-full rounded-2xl border border-border/60 bg-background/82 hover:bg-background"
+                        className="w-full rounded-2xl border border-border/60 bg-background hover:bg-background"
                       >
                         {isSelectedWorkflowBranchRunning ? (
                           <>
@@ -7286,7 +7286,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                         variant="secondary"
                         onClick={() => void handleRunStoryboardBatch()}
                         disabled={isAnyWorkflowExecutionRunning}
-                        className="w-full rounded-2xl border border-border/60 bg-background/82 hover:bg-background"
+                        className="w-full rounded-2xl border border-border/60 bg-background hover:bg-background"
                       >
                         {isSelectedWorkflowBatchRunning ? (
                           <>
@@ -7548,7 +7548,7 @@ export default function CanvasEditorPage({ params }: PageProps) {
                 <DropdownMenuContent
                   align="center"
                   side="top"
-                  className="w-[420px] rounded-2xl border bg-background/95 p-0 shadow-2xl backdrop-blur-md"
+                  className="w-[420px] rounded-2xl border bg-background p-0 shadow-2xl"
                 >
                   <div className="border-b px-4 py-3">
                     <div className="text-sm font-semibold text-foreground">视频工作流节点库</div>

components/canvas/CanvasWorkspace.tsx

@@ -66,10 +66,10 @@ export function CanvasWorkspace({
   const WORKFLOW_HANDLE_SIZE = 16;
   const isWorkflowCanvas = workspaceVariant === "video";
   const overlayPanelClassName = isWorkflowCanvas
-    ? "rounded-full border border-border/60 bg-background/92 px-3 py-1.5 text-xs text-muted-foreground shadow-sm backdrop-blur-xl supports-[backdrop-filter]:bg-background/80"
+    ? "rounded-full border border-border/60 bg-background px-3 py-1.5 text-xs text-muted-foreground shadow-sm"
     : "bg-background/80 backdrop-blur-sm rounded-md px-2 py-1 text-xs text-muted-foreground";
   const zoomOverlayClassName = isWorkflowCanvas
-    ? "absolute bottom-4 right-4 rounded-full border border-border/60 bg-background/92 shadow-sm backdrop-blur-xl supports-[backdrop-filter]:bg-background/80"
+    ? "absolute bottom-4 right-4 rounded-full border border-border/60 bg-background shadow-sm"
     : "absolute bottom-4 right-4 bg-background/80 backdrop-blur-sm rounded-lg flex items-center gap-1 px-1 py-1 shadow-sm border border-border/50";
 
   type SnapGuideLines = {
@@ -1325,7 +1325,7 @@ export function CanvasWorkspace({
             className={cn(
               "px-4 py-2 text-sm text-primary shadow-sm",
               isWorkflowCanvas
-                ? "rounded-full border border-primary/20 bg-background/92 backdrop-blur-xl"
+                ? "rounded-full border border-primary/20 bg-background"
                 : "rounded-md bg-background/90"
             )}
           >
@@ -1555,7 +1555,7 @@ export function CanvasWorkspace({
             className={cn(
               "h-8 gap-1.5 px-3 text-xs shadow-sm border border-border/60",
               isWorkflowCanvas &&
-                "rounded-full bg-background/92 backdrop-blur-xl supports-[backdrop-filter]:bg-background/80"
+                "rounded-full bg-background"
             )}
             onClick={handleDownloadSelectedImages}
             disabled={isDownloadSubmitting}

components/canvas/nodes/WorkflowNode.tsx

@@ -146,16 +146,16 @@ export function WorkflowNode({ node, isSelected }: WorkflowNodeProps) {
   const accentGlow = toAlphaColor(accentColor, 0.18) || "rgba(59, 130, 246, 0.12)";
   const accentLine = toAlphaColor(accentColor, 0.3) || "rgba(59, 130, 246, 0.2)";
   const sectionClassName =
-    "rounded-2xl border border-border/60 bg-background/74 p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.3)]";
+    "rounded-2xl border border-border/60 bg-background p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.3)]";
   const mutedKickerClassName =
     "text-[11px] uppercase tracking-[0.18em] text-muted-foreground/80";
-  const itemClassName = "rounded-xl border border-border/50 bg-background/88 px-3 py-2";
-  const badgeClassName = "border-border/60 bg-background/82 text-foreground/80";
+  const itemClassName = "rounded-xl border border-border/50 bg-background px-3 py-2";
+  const badgeClassName = "border-border/60 bg-background text-foreground/80";
 
   return (
     <div
       className={cn(
-        "relative h-full w-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 shadow-[0_22px_55px_-30px_rgba(15,23,42,0.38)] backdrop-blur-xl transition-all",
+        "relative h-full w-full overflow-hidden rounded-[28px] border border-border/60 bg-background shadow-[0_22px_55px_-30px_rgba(15,23,42,0.38)] transition-all",
         isSelected &&
           "border-primary/55 ring-2 ring-primary/15 shadow-[0_26px_60px_-28px_rgba(59,130,246,0.28)]"
       )}
@@ -172,7 +172,7 @@ export function WorkflowNode({ node, isSelected }: WorkflowNodeProps) {
         <div className="flex items-start justify-between gap-3">
           <div className="space-y-2">
             <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
-              <span className="flex h-8 w-8 items-center justify-center rounded-full border border-border/60 bg-background/90 shadow-sm">
+              <span className="flex h-8 w-8 items-center justify-center rounded-full border border-border/60 bg-background shadow-sm">
                 <GroupIcon className="h-4 w-4" />
               </span>
               <span>{groupMeta.label}</span>
@@ -212,7 +212,7 @@ export function WorkflowNode({ node, isSelected }: WorkflowNodeProps) {
               {batchFailedCount > 0 ? (
                 <Badge
                   variant="outline"
-                  className="border-amber-200/70 bg-amber-50/80 text-amber-700"
+                  className="border-amber-200/70 bg-amber-50 text-amber-700"
                 >
                   失败 {batchFailedCount}
                 </Badge>
@@ -227,7 +227,7 @@ export function WorkflowNode({ node, isSelected }: WorkflowNodeProps) {
         ) : null}
 
         {previewUrl ? (
-          <div className="overflow-hidden rounded-2xl border border-border/60 bg-slate-950/95 shadow-[0_16px_40px_-28px_rgba(15,23,42,0.65)]">
+          <div className="overflow-hidden rounded-2xl border border-border/60 bg-slate-950 shadow-[0_16px_40px_-28px_rgba(15,23,42,0.65)]">
             {previewKind === "video" ? (
               <video
                 src={previewUrl}
@@ -261,7 +261,7 @@ export function WorkflowNode({ node, isSelected }: WorkflowNodeProps) {
                 return (
                   <div
                     key={`${data.templateType}-compare-${index}`}
-                    className="overflow-hidden rounded-2xl border border-border/60 bg-background/88"
+                    className="overflow-hidden rounded-2xl border border-border/60 bg-background"
                   >
                     <div className="border-b border-border/60 px-3 py-2">
                       <div className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">
@@ -459,7 +459,7 @@ export function WorkflowNode({ node, isSelected }: WorkflowNodeProps) {
               {deliverables.map((item, index) => (
                 <div
                   key={`${data.templateType}-deliverable-${index}`}
-                  className="rounded-xl border border-dashed border-border/60 bg-background/82 px-3 py-2 text-xs leading-5 text-muted-foreground"
+                  className="rounded-xl border border-dashed border-border/60 bg-background px-3 py-2 text-xs leading-5 text-muted-foreground"
                 >
                   交付物: {String(item || "")}
                 </div>
@@ -529,14 +529,14 @@ export function WorkflowNode({ node, isSelected }: WorkflowNodeProps) {
               {quickConnectOutputs.slice(0, 4).map((item) => (
                 <span
                   key={`${data.templateType}-${item.type}`}
-                  className="rounded-full border border-border/60 bg-background/90 px-2.5 py-1 text-xs text-foreground/80 shadow-sm"
+                  className="rounded-full border border-border/60 bg-background px-2.5 py-1 text-xs text-foreground/80 shadow-sm"
                 >
                   {item.label}
                 </span>
               ))}
             </div>
           ) : (
-            <div className="rounded-full border border-dashed border-border/70 bg-background/72 px-3 py-1.5 text-xs text-muted-foreground">
+            <div className="rounded-full border border-dashed border-border/70 bg-background px-3 py-1.5 text-xs text-muted-foreground">
               当前节点通常作为流程终点或独立处理节点
             </div>
           )}