From 85930dc1a636c4fc4fd84c32cd18743606b53831 Mon Sep 17 00:00:00 2001
From: 134 <a134@134deMacBook-Pro.local>
Date: Sun, 14 Jun 2026 14:30:19 +0800
Subject: [PATCH] feat: show canvas action credit tooltips

---
 components/canvas/nodes/ImageNode.tsx | 54 ++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 12d76e51c..f24940e0f 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -163,6 +163,7 @@ import {
   type PublicThreeDModelAliasConfig,
 } from "@/lib/model3d/model-alias-config";
 import {
+  calculateEnhanceProPointsEstimate,
   defaultPointsSystemConfig,
   get3DTaskCreditCost,
   get3DWorldCreditCost,
@@ -357,8 +358,10 @@ function ImageActionCreditBadge({
   return (
     <span
       className={cn(
-        "ml-auto inline-flex shrink-0 items-center gap-1 rounded-md bg-slate-900 px-1.5 py-0.5 text-[11px] font-semibold leading-none text-white shadow-sm dark:bg-white dark:text-slate-950",
-        compact && "ml-1 px-1 text-[10px]",
+        "inline-flex shrink-0 items-center gap-1 rounded-md bg-slate-900 px-1.5 py-0.5 text-[11px] font-semibold leading-none text-white shadow-sm dark:bg-white dark:text-slate-950",
+        compact
+          ? "pointer-events-none absolute -top-8 left-1/2 z-20 -translate-x-1/2 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"
+          : "ml-auto",
         className
       )}
       title={label}
@@ -1895,6 +1898,25 @@ export function ImageNode({
   const extendCostShortLabel = getImageToolCostShortLabel("extend");
   const promptRegenerateCostShortLabel = getImageToolCostShortLabel("repaint");
   const angleEditCostShortLabel = getImageToolCostShortLabel("angle-edit");
+  const enhanceCostShortLabel = formatImageNodeFeatureCostShortLabel({
+    cost: calculateEnhanceProPointsEstimate(pointsSystemConfig, {
+      width: Math.max(1, Math.round(node.size.width || 1)),
+      height: Math.max(1, Math.round(node.size.height || 1)),
+      upscalingActivated: true,
+      scaleFactor: 2,
+    }).cost,
+    isHighVip,
+    pointsEnabled:
+      pointsEnabled && pointsSystemConfig.enhanceProPricing.enabled === true,
+  });
+  const aiWashQuickCostShortLabel =
+    pointsEnabled && selectedAiWashQuickModel
+      ? formatImageNodeFeatureCostShortLabel({
+          cost: selectedAiWashQuickModel.unitCost,
+          isHighVip,
+          pointsEnabled,
+        })
+      : null;
 
   // 🆕 物品拾取相关状态
   const isPickerMode = useCanvasStore((state) => state.isPickerMode);
@@ -8533,6 +8555,7 @@ export function ImageNode({
 	                    item={imageEnhanceItem}
 	                  />
 	                  {imageEnhanceItem.label}
+                    <ImageActionCreditBadge label={enhanceCostShortLabel} />
 	                </DropdownMenuItem>
 	                ) : null}
 	                {imageNoteEnabled ? (
@@ -9160,7 +9183,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("enhance") ? (
               <Button
-                className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+                className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("enhance")}
 	                title={imageEnhanceItem.label}
@@ -9172,12 +9195,13 @@ export function ImageNode({
 	                  item={imageEnhanceItem}
 	                />
 	                {imageEnhanceItem.label}
+                  <ImageActionCreditBadge compact label={enhanceCostShortLabel} />
 	              </Button>
               ) : null}
 
               {isSelectedImageActionInline("removeBackground") ? (
               <Button
-                className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+                className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("rmbg")}
 	                title={imageRemoveBackgroundItem.label}
@@ -9199,7 +9223,7 @@ export function ImageNode({
               {isSelectedImageActionInline("aiWashQuick") ? (
                 <Button
                   className={cn(
-                    "h-10 rounded-xl px-3 font-medium text-[13px] transition",
+                    "group relative h-10 rounded-xl px-3 font-medium text-[13px] transition",
                     aiWashQuickPanelOpen
                       ? "bg-slate-950 text-white hover:bg-slate-900 hover:text-white dark:bg-white dark:text-slate-950 dark:hover:bg-slate-100"
                       : "text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
@@ -9220,6 +9244,10 @@ export function ImageNode({
                     />
                   )}
                   {aiWashQuickModeLabel}
+                  <ImageActionCreditBadge
+                    compact
+                    label={aiWashQuickCostShortLabel}
+                  />
                 </Button>
               ) : null}
 
@@ -9242,7 +9270,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("boxCutout") ? (
               <Button
-                className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+                className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("box-cutout")}
 	                title={imageBoxCutoutItem.label}
@@ -9277,7 +9305,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("removeWatermark") ? (
               <Button
-                className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+                className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("watermark")}
 	                title={imageRemoveWatermarkItem.label}
@@ -9315,7 +9343,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("multiAngle") ? (
               <Button
-                className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+                className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("angle")}
 	                title={imageMultiAngleItem.label}
@@ -9336,7 +9364,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("generate3dModel") ? (
                 <Button
-                  className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+                  className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                  disabled={isProcessing}
 	                  onClick={() => handleAction("generate-3d-model")}
 	                  title={imageGenerate3dModelItem.label}
@@ -9357,7 +9385,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("generate3dWorld") ? (
                 <Button
-                  className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+                  className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                  disabled={isProcessing}
 	                  onClick={() => handleAction("generate-3d-world")}
 	                  title={imageGenerate3dWorldItem.label}
@@ -9395,7 +9423,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("extend") ? (
               <Button
-                className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+                className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("extend")}
 	                title={imageExtendItem.label}
@@ -9464,7 +9492,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("promptRegenerate") ? (
               <Button
-                className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+                className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("prompt-regenerate")}
 	                title={imagePromptRegenerateItem.label}
@@ -10526,7 +10554,7 @@ export function ImageNode({
                 取消
               </button>
               <button
-                className="inline-flex h-[50px] items-center justify-center gap-2 rounded-[18px] bg-[#2d2f34] text-[17px] font-semibold text-white transition-colors hover:bg-[#23252a] disabled:cursor-not-allowed disabled:bg-[#cfd2d8] disabled:text-white/80"
+                className="group relative inline-flex h-[50px] items-center justify-center gap-2 rounded-[18px] bg-[#2d2f34] text-[17px] font-semibold text-white transition-colors hover:bg-[#23252a] disabled:cursor-not-allowed disabled:bg-[#cfd2d8] disabled:text-white/80"
                 disabled={isApplyingAngleEdit}
                 onClick={() => void handleApplyAngleEdit()}
                 type="button"