fix: 修复聊天界面 UI 布局 — 输入框被挤出 + 通知被裁剪

问题1: ChatInput/IoTStatusBar 被推到屏幕底部
- ChatContainer.tsx: MessageList 父级改为 flex flex-col,
  IoTStatusBar 加 flex-shrink-0
- App.tsx: ChatInput 加 flex-shrink-0

问题2: 通知下拉面板被 overflow-hidden 裁剪
- AppLayout.tsx: overflow-hidden 从 Header 父级移到 <main>
This commit is contained in:
2026-05-20 22:49:46 +08:00
parent 1fc2b41d36
commit b2ff70ede2
3 changed files with 6 additions and 4 deletions
+3 -1
View File
@@ -330,7 +330,9 @@ export default function App() {
<div className="flex-1 min-h-0 overflow-hidden">
<ChatContainer />
</div>
<ChatInput onSend={send} />
<div className="flex-shrink-0">
<ChatInput onSend={send} />
</div>
</div>
</AppLayout>
</ErrorBoundary>
@@ -42,12 +42,12 @@ export function ChatContainer() {
</div>
{/* 消息列表 */}
<div className="relative z-10 flex-1 min-h-0 overflow-hidden">
<div className="flex flex-col flex-1 min-h-0">
<MessageList messages={messages} isTyping={isTyping} />
</div>
{/* IoT 状态栏(底部) */}
<div className="relative z-10">
<div className="relative z-10 flex-shrink-0">
<IoTStatusBar />
</div>
</div>
@@ -37,7 +37,7 @@ export function AppLayout({ children }: AppLayoutProps) {
)}
{/* 主内容区 */}
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
<div className="flex-1 flex flex-col min-w-0">
{isLoggedIn && (
<Header
onMenuClick={() => setSidebarOpen(!sidebarOpen)}