feat(ai): 实现AI模型调用的积分计费功能

- 后端根据请求体中的n参数计算AI调用次数并扣减用户积分 - 添加readAIRequestCount函数解析multipart/form-data和JSON格式的请求体获取调用次数 - 前端Canvas组件中显示预计消耗的积分数量 - 在助手面板、配置节点面板和提示面板中集成积分成本计算和展示 - 优化模型选择器在云端模式下的模型列表显示逻辑 - 添加CreditSymbol组件用于统一积分图标显示 - 实现requestCreditCost函数计算远程调用的积分消耗 - 更新文档中关于积分扣费和模型配置的相关说明
2026-05-25 15:01:06 +08:00
parent 823fb2523f
commit 01f2a4d9d5
9 changed files with 112 additions and 24 deletions
@@ -8,6 +8,7 @@ import { motion } from "motion/react";
 import { ImageGenerationPending } from "@/components/image-generation-pending";
 import { ModelPicker } from "@/components/model-picker";
 import { useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { CreditSymbol, requestCreditCost } from "@/constant/credits";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { nanoid } from "nanoid";
 import { cn } from "@/lib/utils";
@@ -41,8 +42,8 @@ type CanvasAssistantPanelProps = {

 export function CanvasAssistantPanel({ nodes, selectedNodeIds, sessions, activeSessionId, onSelectNodeIds, onSessionsChange, onInsertImage, onInsertText, onPasteImage, onCollapseStart, onCollapse }: CanvasAssistantPanelProps) {
    const theme = canvasThemes[useThemeStore((state) => state.theme)];
-    const config = useConfigStore((state) => state.config);
    const effectiveConfig = useEffectiveConfig();
+    const modelCosts = useConfigStore((state) => state.publicSettings?.modelChannel.modelCosts);
    const cleanupImages = useAssetStore((state) => state.cleanupImages);
    const updateConfig = useConfigStore((state) => state.updateConfig);
    const isAiConfigReady = useConfigStore((state) => state.isAiConfigReady);
@@ -328,6 +329,7 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, sessions, activeS
                            if (selectedNodeIds.has(id)) onSelectNodeIds(new Set(Array.from(selectedNodeIds).filter((nodeId) => nodeId !== id)));
                        }}
                        onPasteImage={onPasteImage}
+                        modelCosts={modelCosts}
                    />
                ) : null}

@@ -372,6 +374,7 @@ function AssistantComposer({
    onMissingConfig,
    onRemoveReference,
    onPasteImage,
+    modelCosts,
 }: {
    mode: AssistantMode;
    prompt: string;
@@ -385,8 +388,11 @@ function AssistantComposer({
    onMissingConfig: () => void;
    onRemoveReference: (id: string) => void;
    onPasteImage: (file: File) => void;
+    modelCosts?: { model: string; credits: number }[];
 }) {
    const theme = canvasThemes[useThemeStore((state) => state.theme)];
+    const activeModel = mode === "image" ? config.imageModel || config.model : config.textModel || config.model;
+    const credits = requestCreditCost({ channelMode: config.channelMode, modelCosts, model: activeModel, count: mode === "image" ? config.count : 1 });

    return (
        <div className="px-2 pb-2" onWheelCapture={(event) => event.stopPropagation()}>
@@ -431,13 +437,19 @@ function AssistantComposer({
                    </div>
                    <Button
                        type="primary"
-                        shape="circle"
-                        className="!h-10 !w-10 !min-w-10 shrink-0"
-                        icon={isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
+                        className="!h-10 !min-w-16 shrink-0 !rounded-full !px-3"
                        disabled={isRunning || !prompt.trim()}
                        onClick={() => void onSubmit()}
                        aria-label="发送"
-                    />
+                    >
+                        <span className="flex items-center gap-1.5">
+                            <span className="inline-flex items-center gap-1 text-xs font-medium tabular-nums">
+                                <CreditSymbol />
+                                {credits.toLocaleString()}
+                            </span>
+                            {isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
+                        </span>
+                    </Button>
                </div>
            </div>
        </div>
@@ -6,7 +6,8 @@ import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Edit3, Eye, Image as ImageIc
 import { App, Button, Empty, Input, InputNumber, Modal, Segmented } from "antd";

 import { ModelPicker } from "@/components/model-picker";
-import { defaultConfig, useConfigStore, 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 { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasSizePicker } from "./canvas-size-picker";
@@ -29,12 +30,14 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
    const [previewOpen, setPreviewOpen] = useState(false);
    const [editingTextId, setEditingTextId] = useState<string | null>(null);
    const [editingText, setEditingText] = useState("");
-    const globalConfig = useConfigStore((state) => state.config);
+    const globalConfig = useEffectiveConfig();
+    const modelCosts = useConfigStore((state) => state.publicSettings?.modelChannel.modelCosts);
    const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
    const theme = canvasThemes[useThemeStore((state) => state.theme)];
    const mode = node.metadata?.generationMode || "image";
    const config = buildNodeConfig(globalConfig, node, mode);
    const count = Math.max(1, Math.min(15, Math.floor(Math.abs(Number(node.metadata?.count || 3)) || 1)));
+    const credits = requestCreditCost({ channelMode: config.channelMode, modelCosts, model: config.model, count: mode === "image" ? count : 1 });
    const chipStyle = { background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text };
    const textInputs = inputs.filter((input) => input.type === "text");
    const imageInputs = inputs.filter((input) => input.type === "image");
@@ -127,9 +130,15 @@ export function CanvasConfigNodePanel({ node, isRunning, inputSummary, inputs, o
                disabled={isRunning || (!inputSummary.textCount && !inputSummary.imageCount)}
                onMouseDown={(event) => event.stopPropagation()}
                onClick={() => onGenerate(node.id)}
-                icon={isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <Play className="size-4" />}
            >
-                开始生成
+                <span className="inline-flex items-center gap-1.5">
+                    <span className="inline-flex items-center gap-1">
+                        <CreditSymbol />
+                        {credits.toLocaleString()}
+                    </span>
+                    {isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <Play className="size-4" />}
+                    <span>开始生成</span>
+                </span>
            </Button>
            <Modal
                title="输入预览"
@@ -5,7 +5,8 @@ import { ArrowUp, LoaderCircle } from "lucide-react";
 import { Button } from "antd";

 import { ModelPicker } from "@/components/model-picker";
-import { defaultConfig, useConfigStore, 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 { useThemeStore } from "@/stores/use-theme-store";
 import { CanvasImageSettingsPopover } from "./canvas-image-settings-popover";
@@ -25,7 +26,8 @@ type CanvasNodePromptPanelProps = {
 };

 export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfigChange, onGenerate, onImageSettingsOpenChange }: CanvasNodePromptPanelProps) {
-    const globalConfig = useConfigStore((state) => state.config);
+    const globalConfig = useEffectiveConfig();
+    const modelCosts = useConfigStore((state) => state.publicSettings?.modelChannel.modelCosts);
    const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
    const theme = canvasThemes[useThemeStore((state) => state.theme)];
    const mode = defaultMode(node.type);
@@ -34,6 +36,7 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
    const hasImageContent = node.type === CanvasNodeType.Image && Boolean(node.metadata?.content);
    const isEditingExistingContent = hasTextContent || hasImageContent;
    const [prompt, setPrompt] = useState(isEditingExistingContent ? "" : node.metadata?.prompt || "");
+    const credits = requestCreditCost({ channelMode: config.channelMode, modelCosts, model: config.model, count: mode === "image" ? config.count : 1 });

    useEffect(() => {
        setPrompt(isEditingExistingContent ? "" : node.metadata?.prompt || "");
@@ -98,13 +101,19 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
                </div>
                <Button
                    type="primary"
-                    shape="circle"
-                    className="!h-10 !w-10 !min-w-10 shrink-0"
+                    className="!h-10 !min-w-16 shrink-0 !rounded-full !px-3"
                    disabled={isRunning || !prompt.trim()}
                    onClick={submit}
-                    icon={isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
                    aria-label="生成"
-                />
+                >
+                    <span className="flex items-center gap-1.5">
+                        <span className="inline-flex items-center gap-1 text-xs font-medium tabular-nums">
+                            <CreditSymbol />
+                            {credits.toLocaleString()}
+                        </span>
+                        {isRunning ? <LoaderCircle className="size-4 animate-spin" /> : <ArrowUp className="size-4" />}
+                    </span>
+                </Button>
            </div>
        </div>
    );