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

style: 优化输入框布局，图片标签在上方

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Your Name 2026-02-01 17:24:34 +08:00
parent e5524fbaf5
commit de63528cc1
1 changed files with 32 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/canvas/CanvasChatPanel.tsx
View File

@ -880,44 +880,38 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
{/* 底部输入区域 - Redesigned */} {/* 底部输入区域 - Redesigned */}
<div className="p-4 bg-background/80 backdrop-blur-md border-t"> <div className="p-4 bg-background/80 backdrop-blur-md border-t">
<div className="relative bg-card rounded-3xl border transition-all duration-200 focus-within:border-primary/50 focus-within:bg-background"> <div className="relative bg-card rounded-3xl border transition-all duration-200 focus-within:border-primary/50 focus-within:bg-background">
{/* 混合输入区域：图片标签 + 文本输入在同一行 */} {/* 混合输入区域：使用 contenteditable 实现图片标签和文字混合 */}
<div <div className="relative px-4 pt-3 pb-12 min-h-[80px]">
className="flex flex-wrap items-center gap-2 px-4 pt-3 min-h-[60px] cursor-text" {/* 图片标签显示在输入框上方 */}
onClick={() => textareaRef.current?.focus()} {attachments.length > 0 && (
> <div className="flex flex-wrap gap-2 mb-2">
{/* 附件标签 */} {attachments.map((att, index) => (
{attachments.map((att, index) => ( <div
<div key={index}
key={index} className="inline-flex items-center gap-1.5 bg-muted/60 hover:bg-muted rounded-full pl-1 pr-2 py-1 shrink-0 transition-colors"
className="inline-flex items-center gap-1.5 bg-muted/60 hover:bg-muted rounded-full pl-1 pr-2 py-1 shrink-0 transition-colors" >
> <img
{/* 小缩略图 */} src={att.url}
<img alt=""
src={att.url} className="h-6 w-6 object-cover rounded-full border border-border/50"
alt="" />
className="h-6 w-6 object-cover rounded-full border border-border/50" <span className="text-xs text-foreground/80 max-w-[100px] truncate">
/> {att.name || 'Image'}
{/* 图片名称 */} </span>
<span className="text-xs text-foreground/80 max-w-[80px] truncate"> <button
{att.name || 'Image'} className="h-4 w-4 flex items-center justify-center rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
</span> onClick={() => removeAttachment(index)}
{/* 删除按钮 */} >
<button <X className="h-3 w-3" />
className="h-4 w-4 flex items-center justify-center rounded-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors" </button>
onClick={(e) => { </div>
e.stopPropagation(); ))}
removeAttachment(index);
}}
>
<X className="h-3 w-3" />
</button>
</div> </div>
))} )}
{/* 文本输入 - 自适应宽度 */} {/* 文本输入 */}
<input <Textarea
ref={textareaRef as any} ref={textareaRef}
type="text"
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => { onKeyDown={(e) => {
@ -926,15 +920,12 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
handleSend(); handleSend();
} }
}} }}
placeholder={attachments.length > 0 ? "添加描述..." : "请输入你的设计需求"} placeholder="请输入你的设计需求，例如：把椅子颜色改成红色"
className="flex-1 min-w-[120px] text-sm bg-transparent border-none outline-none placeholder:text-muted-foreground/50" className="min-h-[40px] max-h-[100px] w-full text-sm resize-none bg-transparent border-none focus-visible:ring-0 p-0 placeholder:text-muted-foreground/50"
disabled={isLoading} disabled={isLoading}
/> />
</div> </div>
{/* 用于多行输入的隐藏区域 */}
<div className="h-8" />
{/* 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 justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">