lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove input shadow and use real image params in canvas chat

Browse Source
This commit is contained in:
Your Name 2026-01-24 22:09:07 +08:00
parent 39c726b5af
commit 0279627ecc
1 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
components/canvas/CanvasChatPanel.tsx
View File

@ -21,6 +21,7 @@ import { useCanvasStore } from "@/store/canvas";
import { cn } from "@/lib/utils";
import { fetcher, fetchWithErrorHandlers, generateUUID } from "@/lib/utils";
import type { Attachment, ChatMessage } from "@/lib/types";
import { ImageParamsBar, type ImageGenerationParams } from "@/components/image-params-bar";
interface CanvasChatPanelProps {
chatId: string;
@ -61,6 +62,36 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
const fileInputRef = useRef<HTMLInputElement>(null);
const textareaRef = useRef<HTMLTextAreaElement>(null);
// 🆕 图片参数状态
const [imageParams, setImageParams] = useState<ImageGenerationParams>({
aspectRatio: "auto",
imageSize: "2K",
imageCount: 1,
});
// 🆕 保存图片参数到 localStorage
const handleImageParamsChange = (params: ImageGenerationParams) => {
setImageParams(params);
try {
localStorage.setItem("canvas-image-params", JSON.stringify(params));
} catch (e) {
console.error("Failed to save image params:", e);
}
};
// 加载图片参数
useEffect(() => {
try {
const saved = localStorage.getItem("canvas-image-params");
if (saved) {
const parsed = JSON.parse(saved);
setImageParams(prev => ({ ...prev, ...parsed }));
}
} catch (e) {
console.error("Failed to load image params:", e);
}
}, []);
// Canvas store
const addNode = useCanvasStore((state) => state.addNode);
const nodes = useCanvasStore((state) => state.nodes);
@ -88,10 +119,16 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
}, [imageModels, selectedModelId]);
const currentModelIdRef = useRef(selectedModelId);
const imageParamsRef = useRef(imageParams);
useEffect(() => {
currentModelIdRef.current = selectedModelId;
}, [selectedModelId]);
useEffect(() => {
imageParamsRef.current = imageParams;
}, [imageParams]);
const {
messages,
setMessages,
@ -113,6 +150,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
message: request.messages.at(-1),
selectedChatModel: currentModelIdRef.current,
selectedVisibilityType: "private",
imageParams: imageParamsRef.current, // 传递图片参数
...request.body,
},
};
@ -456,7 +494,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
</div>
)}
<div className="relative bg-card rounded-3xl border shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all">
<div className="relative bg-card rounded-3xl border transition-all duration-200 focus-within:border-primary/50 focus-within:bg-background">
<Textarea
ref={textareaRef}
value={input}
@ -515,18 +553,14 @@ export function CanvasChatPanel({ chatId, initialMessages = [] }: CanvasChatPane
</div>
<div className="flex items-center gap-2">
{/* Style/Settings Icons (Visual only for now) */}
<div className="flex items-center gap-1 mr-2 border-r pr-2">
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full text-muted-foreground">
<Zap className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full text-muted-foreground">
<Globe className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full text-muted-foreground">
<Box className="h-4 w-4" />
</Button>
</div>
{/* Image Params Bar */}
<ImageParamsBar
modelName={imageModels.find(m => m.id === selectedModelId)?.displayName}
initialParams={imageParams}
onParamsChange={handleImageParamsChange}
inline={true}
providerType={imageModels.find(m => m.id === selectedModelId)?.providerType}
/>
<Button
size="icon"