lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复发送按钮被挤出输入框的布局问题
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-02-01 22:24:49 +08:00
parent 211db5a620
commit c8e565d016
1 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/canvas/CanvasChatPanel.tsx
View File

@ -1037,8 +1037,9 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
</div>
{/* Bottom Toolbar */}
<div className="absolute left-2 bottom-2 right-2 flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="absolute left-2 bottom-2 right-2 flex items-center gap-2">
{/* 左侧：附件和模型选择 */}
<div className="flex items-center gap-2 min-w-0 flex-shrink">
<input
ref={fileInputRef}
type="file"
@ -1050,7 +1051,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
<Button
variant="ghost"
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()}
disabled={isLoading}
>
@ -1060,7 +1061,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
{/* Agent Selector (Model) - 包含智能自动选项 */}
<Select value={selectedModelId} onValueChange={setSelectedModelId}>
<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"
? "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"
@ -1070,7 +1071,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
) : (
<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 || "智能自动"}
</span>
</SelectTrigger>
@ -1100,8 +1101,8 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
</Select>
</div>
<div className="flex items-center gap-2">
{/* Image Params Bar - 智能自动模式时也显示，用于设置最终生图参数 */}
{/* 中间：图片参数（可收缩） */}
<div className="flex-1 min-w-0 overflow-hidden">
<ImageParamsBar
modelName={allModels.find(m => m.id === selectedModelId)?.displayName}
initialParams={imageParams}
@ -1109,25 +1110,26 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
inline={true}
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>
{/* 右侧：发送按钮（固定不收缩） */}
<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>