fix: 修复发送按钮被挤出输入框的布局问题
This commit is contained in:
parent
211db5a620
commit
c8e565d016
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user