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">
|
<div className="flex-1 min-h-0 overflow-hidden">
|
||||||
<ChatContainer />
|
<ChatContainer />
|
||||||
</div>
|
</div>
|
||||||
<ChatInput onSend={send} />
|
<div className="flex-shrink-0">
|
||||||
|
<ChatInput onSend={send} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AppLayout>
|
</AppLayout>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
|
|||||||
@@ -42,12 +42,12 @@ export function ChatContainer() {
|
|||||||
</div>
|
</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} />
|
<MessageList messages={messages} isTyping={isTyping} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* IoT 状态栏(底部) */}
|
{/* IoT 状态栏(底部) */}
|
||||||
<div className="relative z-10">
|
<div className="relative z-10 flex-shrink-0">
|
||||||
<IoTStatusBar />
|
<IoTStatusBar />
|
||||||
</div>
|
</div>
|
||||||
</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 && (
|
{isLoggedIn && (
|
||||||
<Header
|
<Header
|
||||||
onMenuClick={() => setSidebarOpen(!sidebarOpen)}
|
onMenuClick={() => setSidebarOpen(!sidebarOpen)}
|
||||||
|
|||||||
Reference in New Issue
Block a user