feat(canvas): add reasoning effort settings for text nodes in canvas configuration

2026-08-05 17:04:27 +08:00 · 2026-07-28 10:28:27 +08:00
parent 6aa9c8bddc
commit c23a819f27
12 changed files with 190 additions and 8 deletions
@@ -0,0 +1,60 @@
+import { type ReactNode } from "react";
+
+import { ImageSettingsTheme } from "@/components/image-settings-panel";
+import { type CanvasTheme } from "@/lib/canvas-theme";
+import type { AiConfig, ReasoningEffort } from "@/stores/use-config-store";
+
+const reasoningEffortOptions: Array<{ value: ReasoningEffort; label: string }> = [
+    { value: "auto", label: "自动" },
+    { value: "low", label: "低" },
+    { value: "medium", label: "中" },
+    { value: "high", label: "高" },
+    { value: "xhigh", label: "极高" },
+];
+
+type TextSettingsPanelProps = {
+    config: AiConfig;
+    onConfigChange: (key: "reasoningEffort", value: ReasoningEffort) => void;
+    theme: CanvasTheme;
+    className?: string;
+};
+
+export function TextSettingsPanel({ config, onConfigChange, theme, className = "space-y-4" }: TextSettingsPanelProps) {
+    return (
+        <ImageSettingsTheme theme={theme}>
+            <div className={className} style={{ color: theme.node.text }} onMouseDown={(event) => event.stopPropagation()}>
+                <div className="text-lg font-semibold">文本设置</div>
+                <div className="space-y-2.5">
+                    <div className="text-sm font-medium" style={{ color: theme.node.muted }}>
+                        推理强度
+                    </div>
+                    <div className="grid grid-cols-5 gap-2">
+                        {reasoningEffortOptions.map((item) => (
+                            <OptionPill key={item.value} selected={config.reasoningEffort === item.value} theme={theme} onClick={() => onConfigChange("reasoningEffort", item.value)}>
+                                {item.label}
+                            </OptionPill>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </ImageSettingsTheme>
+    );
+}
+
+export function reasoningEffortLabel(value: ReasoningEffort) {
+    return reasoningEffortOptions.find((item) => item.value === value)?.label || value;
+}
+
+function OptionPill({ selected, theme, onClick, children }: { selected: boolean; theme: CanvasTheme; onClick: () => void; children: ReactNode }) {
+    return (
+        <button
+            type="button"
+            className="h-9 cursor-pointer rounded-full border px-2 text-sm transition hover:opacity-80"
+            style={{ background: "transparent", borderColor: selected ? theme.node.text : theme.node.stroke, color: theme.node.text }}
+            onMouseDown={(event) => event.stopPropagation()}
+            onClick={onClick}
+        >
+            {children}
+        </button>
+    );
+}