mirror of
https://github.com/basketikun/infinite-canvas.git
synced 2026-08-05 17:04:27 +08:00
refactor: remove credit cost calculations and related UI elements from canvas node panels
This commit is contained in:
@@ -4,7 +4,6 @@ import { Button, Segmented } from "antd";
|
|||||||
|
|
||||||
import { ModelPicker } from "@/components/model-picker";
|
import { ModelPicker } from "@/components/model-picker";
|
||||||
import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
|
import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
|
||||||
import { CreditSymbol, requestCreditCost } from "@/constant/credits";
|
|
||||||
import { canvasThemes } from "@/lib/canvas-theme";
|
import { canvasThemes } from "@/lib/canvas-theme";
|
||||||
import { useThemeStore } from "@/stores/use-theme-store";
|
import { useThemeStore } from "@/stores/use-theme-store";
|
||||||
import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
|
import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
|
||||||
@@ -28,8 +27,6 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, onConfigC
|
|||||||
const theme = canvasThemes[useThemeStore((state) => state.theme)];
|
const theme = canvasThemes[useThemeStore((state) => state.theme)];
|
||||||
const mode = node.metadata?.generationMode || "image";
|
const mode = node.metadata?.generationMode || "image";
|
||||||
const config = buildNodeConfig(globalConfig, node, mode);
|
const config = buildNodeConfig(globalConfig, node, mode);
|
||||||
const count = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(config.count)) || 1)));
|
|
||||||
const credits = requestCreditCost({ channelMode: config.channelMode, model: config.model, count: mode === "image" ? count : 1 });
|
|
||||||
const chipStyle = { background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text };
|
const chipStyle = { background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text };
|
||||||
const hasAnyInput = Boolean(inputSummary.textCount || inputSummary.imageCount || inputSummary.videoCount || inputSummary.audioCount);
|
const hasAnyInput = Boolean(inputSummary.textCount || inputSummary.imageCount || inputSummary.videoCount || inputSummary.audioCount);
|
||||||
const hasComposerContent = Boolean((node.metadata?.composerContent ?? node.metadata?.prompt ?? "").trim());
|
const hasComposerContent = Boolean((node.metadata?.composerContent ?? node.metadata?.prompt ?? "").trim());
|
||||||
@@ -126,10 +123,6 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, onConfigC
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<span className="inline-flex items-center gap-1">
|
|
||||||
<CreditSymbol />
|
|
||||||
{credits.toLocaleString()}
|
|
||||||
</span>
|
|
||||||
<Play className="size-4" />
|
<Play className="size-4" />
|
||||||
<span>开始生成</span>
|
<span>开始生成</span>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { Button } from "antd";
|
|||||||
|
|
||||||
import { ModelPicker } from "@/components/model-picker";
|
import { ModelPicker } from "@/components/model-picker";
|
||||||
import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
|
import { defaultConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
|
||||||
import { CreditSymbol, requestCreditCost } from "@/constant/credits";
|
|
||||||
import { canvasThemes } from "@/lib/canvas-theme";
|
import { canvasThemes } from "@/lib/canvas-theme";
|
||||||
import { useThemeStore } from "@/stores/use-theme-store";
|
import { useThemeStore } from "@/stores/use-theme-store";
|
||||||
import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
|
import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
|
||||||
@@ -38,7 +37,6 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
|
|||||||
const hasImageContent = node.type === CanvasNodeType.Image && Boolean(node.metadata?.content);
|
const hasImageContent = node.type === CanvasNodeType.Image && Boolean(node.metadata?.content);
|
||||||
const isEditingExistingContent = hasTextContent || hasImageContent;
|
const isEditingExistingContent = hasTextContent || hasImageContent;
|
||||||
const [prompt, setPrompt] = useState(isEditingExistingContent ? "" : node.metadata?.prompt || "");
|
const [prompt, setPrompt] = useState(isEditingExistingContent ? "" : node.metadata?.prompt || "");
|
||||||
const credits = requestCreditCost({ channelMode: config.channelMode, model: config.model, count: mode === "image" ? config.count : 1 });
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPrompt(isEditingExistingContent ? "" : node.metadata?.prompt || "");
|
setPrompt(isEditingExistingContent ? "" : node.metadata?.prompt || "");
|
||||||
@@ -119,13 +117,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
|
|||||||
<span className="text-xs font-medium">停止</span>
|
<span className="text-xs font-medium">停止</span>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
|
||||||
<span className="inline-flex items-center gap-1 text-xs font-medium tabular-nums">
|
|
||||||
<CreditSymbol />
|
|
||||||
{credits.toLocaleString()}
|
|
||||||
</span>
|
|
||||||
<ArrowUp className="size-4" />
|
<ArrowUp className="size-4" />
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -1,25 +0,0 @@
|
|||||||
import type { ComponentProps } from "react";
|
|
||||||
import { Zap } from "lucide-react";
|
|
||||||
|
|
||||||
export function CreditSymbol({ className, ...props }: ComponentProps<"span">) {
|
|
||||||
return (
|
|
||||||
<span {...props} className={`inline-flex items-center justify-center ${className || ""}`}>
|
|
||||||
<Zap className="size-[1em] fill-current" strokeWidth={2.4} />
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ModelCreditCost = {
|
|
||||||
model: string;
|
|
||||||
credits: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
function modelCreditCost(modelCosts: ModelCreditCost[] | undefined, model: string) {
|
|
||||||
return modelCosts?.find((item) => item.model === model)?.credits || 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function requestCreditCost(options: { channelMode: string; modelCosts?: ModelCreditCost[]; model: string; count?: string | number }) {
|
|
||||||
if (options.channelMode !== "remote") return 0;
|
|
||||||
const count = Math.max(1, Math.floor(Math.abs(Number(options.count)) || 1));
|
|
||||||
return modelCreditCost(options.modelCosts, options.model) * count;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user