fix: 修复发送按钮被挤出输入框的布局问题

This commit is contained in:
Your Name 2026-02-01 22:24:49 +08:00
parent 211db5a620
commit c8e565d016

View File

@ -1037,8 +1037,9 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
</div> </div>
{/* Bottom Toolbar */} {/* Bottom Toolbar */}
<div className="absolute left-2 bottom-2 right-2 flex items-center justify-between"> <div className="absolute left-2 bottom-2 right-2 flex items-center gap-2">
<div className="flex items-center gap-2"> {/* 左侧:附件和模型选择 */}
<div className="flex items-center gap-2 min-w-0 flex-shrink">
<input <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
@ -1050,7 +1051,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-8 w-8 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" className="h-8 w-8 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors flex-shrink-0"
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
disabled={isLoading} disabled={isLoading}
> >
@ -1060,7 +1061,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
{/* Agent Selector (Model) - 包含智能自动选项 */} {/* Agent Selector (Model) - 包含智能自动选项 */}
<Select value={selectedModelId} onValueChange={setSelectedModelId}> <Select value={selectedModelId} onValueChange={setSelectedModelId}>
<SelectTrigger className={cn( <SelectTrigger className={cn(
"h-8 text-xs transition-colors rounded-full px-3 gap-1 w-auto", "h-8 text-xs transition-colors rounded-full px-3 gap-1 w-auto flex-shrink-0",
selectedModelId === "auto" selectedModelId === "auto"
? "bg-gradient-to-r from-purple-50 to-blue-50 text-purple-600 border-purple-100 hover:from-purple-100 hover:to-blue-100" ? "bg-gradient-to-r from-purple-50 to-blue-50 text-purple-600 border-purple-100 hover:from-purple-100 hover:to-blue-100"
: "bg-blue-50 text-blue-600 border-blue-100 hover:bg-blue-100 hover:border-blue-200" : "bg-blue-50 text-blue-600 border-blue-100 hover:bg-blue-100 hover:border-blue-200"
@ -1070,7 +1071,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
) : ( ) : (
<Sparkles className="h-3 w-3" /> <Sparkles className="h-3 w-3" />
)} )}
<span className="truncate max-w-[80px]"> <span className="truncate max-w-[60px]">
{allModels.find(m => m.id === selectedModelId)?.displayName || "智能自动"} {allModels.find(m => m.id === selectedModelId)?.displayName || "智能自动"}
</span> </span>
</SelectTrigger> </SelectTrigger>
@ -1100,8 +1101,8 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
</Select> </Select>
</div> </div>
<div className="flex items-center gap-2"> {/* 中间:图片参数(可收缩) */}
{/* Image Params Bar - 智能自动模式时也显示,用于设置最终生图参数 */} <div className="flex-1 min-w-0 overflow-hidden">
<ImageParamsBar <ImageParamsBar
modelName={allModels.find(m => m.id === selectedModelId)?.displayName} modelName={allModels.find(m => m.id === selectedModelId)?.displayName}
initialParams={imageParams} initialParams={imageParams}
@ -1109,25 +1110,26 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
inline={true} inline={true}
providerType={allModels.find(m => m.id === selectedModelId)?.providerType} providerType={allModels.find(m => m.id === selectedModelId)?.providerType}
/> />
<Button
size="icon"
className={cn(
"h-8 w-8 rounded-full transition-all duration-200",
input.trim() || attachments.length > 0
? "bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90"
: "bg-muted text-muted-foreground hover:bg-muted/80"
)}
onClick={handleSend}
disabled={isLoading || (!input.trim() && attachments.length === 0)}
>
{isLoading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ArrowUp className="h-4 w-4" />
)}
</Button>
</div> </div>
{/* 右侧:发送按钮(固定不收缩) */}
<Button
size="icon"
className={cn(
"h-8 w-8 rounded-full transition-all duration-200 flex-shrink-0",
input.trim() || attachments.length > 0
? "bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90"
: "bg-muted text-muted-foreground hover:bg-muted/80"
)}
onClick={handleSend}
disabled={isLoading || (!input.trim() && attachments.length === 0)}
>
{isLoading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ArrowUp className="h-4 w-4" />
)}
</Button>
</div> </div>
</div> </div>
</div> </div>