fix(ui): 优化首屏欢迎区域和快捷按钮布局
- ChatMessages: 空状态增加品牌图标+大标题,视觉层次更清晰 - ChatInput: 快捷按钮去除 max-w-sm 限制,改为全宽 2列布局,圆角统一为 rounded-xl Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
bcb89dc8b9
commit
31bddf4fcd
@@ -124,7 +124,7 @@ export function ChatInput({
|
||||
|
||||
{/* Quick prompts — shown only when no messages yet */}
|
||||
{showQuickPrompts && (
|
||||
<div className="grid grid-cols-2 gap-2 w-full max-w-sm mt-2">
|
||||
<div className="grid grid-cols-2 gap-2 w-full mt-2">
|
||||
{QUICK_PROMPTS.map(({ icon: Icon, label, prompt, autoSend }) => (
|
||||
<button
|
||||
key={label}
|
||||
@@ -140,9 +140,9 @@ export function ChatInput({
|
||||
setTimeout(() => textareaRef.current?.focus(), 50);
|
||||
}
|
||||
}}
|
||||
className="border border-border rounded-lg p-3 hover:bg-accent cursor-pointer text-left transition-colors flex items-start gap-2"
|
||||
className="border border-border rounded-xl p-3 hover:bg-accent cursor-pointer text-left transition-colors flex items-center gap-2.5 bg-background"
|
||||
>
|
||||
<Icon className="size-4 shrink-0 mt-0.5 text-muted-foreground" />
|
||||
<Icon className="size-4 shrink-0 text-muted-foreground" />
|
||||
<span className="text-xs font-medium text-foreground">{label}</span>
|
||||
</button>
|
||||
))}
|
||||
|
||||
@@ -111,10 +111,16 @@ export function ChatMessages({
|
||||
}}
|
||||
>
|
||||
{activeMessages.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-4 text-muted-foreground select-none">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<p className="text-lg font-medium">你好,有什么可以帮你的?</p>
|
||||
<p className="text-sm">可以查询知识库、工单、搜索网络或执行代码。</p>
|
||||
<div className="flex flex-col items-center justify-center h-full gap-6 select-none px-4">
|
||||
<div className="flex flex-col items-center gap-3 text-center">
|
||||
<div className="size-14 rounded-2xl bg-primary/10 dark:bg-primary/20 flex items-center justify-center mb-1">
|
||||
<svg className="size-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
|
||||
<path d="M18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">有什么可以帮你?</h1>
|
||||
<p className="text-sm text-muted-foreground max-w-xs leading-relaxed">可分析工单、查询知识库、搜索网络,或直接提问</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user