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:
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user