fix: 优化聊天室消息卡片与页面滚动布局

- 统一用户和AI消息卡片外观，移除头像和背景色区分

- AI消息名称为蓝色l阿福l，用户消息名称为默认色l用户l

- 修正全局布局高度链，实现内容区域滚动而非页面滚动

- 消息列表内部滚动，输入框固定在页面底部

- 侧边栏会话列表添加min-height:0确保滚动正常

src/web/consoles/workbench/components/chat/ChatPanel.tsx

@@ -1,6 +1,6 @@
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport, type UIMessage } from "ai";
-import { App, Avatar, Button, Card, Collapse, Divider, Empty, Flex, Input, Spin, Typography } from "antd";
+import { App, Button, Card, Collapse, Empty, Flex, Input, Spin, Typography } from "antd";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Streamdown } from "streamdown";
 
@@ -98,15 +98,11 @@ export function ChatPanel({ conversationId, projectId }: ChatPanelProps) {
         <div className="chat-scroll-area" ref={scrollRef}>
           <Flex gap={8} vertical>
             {messages.map((msg) => (
-              <Card className={msg.role === "user" ? "msg-user" : "msg-ai"} key={msg.id} size="small">
+              <Card
-                <Card.Meta
+                key={msg.id}
-                  avatar={
+                size="small"
-                    <Avatar className={msg.role === "assistant" ? "avatar-ai" : undefined} size="small">
+                title={msg.role === "user" ? "用户" : <span className="msg-title-ai">阿福</span>}
-                      {msg.role === "user" ? "你" : "AI"}
+              >
-                    </Avatar>
-                  }
-                  title={msg.role === "user" ? "你" : "Alfred"}
-                />
                 <div className="message-body">
                   {msg.parts.map((part: Record<string, unknown>, i: number) => (
                     <PartRenderer key={i} part={part} role={msg.role} />
@@ -183,8 +179,5 @@ function PartRenderer({ part, role }: { part: Record<string, unknown>; role: str
       />
     );
   }
-  if (partType === "step-start") {
-    return <Divider className="step-divider" />;
-  }
   return null;
 }

src/web/styles.css

@@ -4,7 +4,8 @@ body {
 }
 
 .app-layout {
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .app-header {
@@ -50,11 +51,13 @@ body {
 }
 
 .app-content {
+  overflow: auto;
   padding: var(--ant-padding-xl) var(--ant-padding-xl);
 }
 
 .app-chat-page {
   height: 100%;
+  overflow: hidden;
 }
 
 .app-console-title {
@@ -92,6 +95,7 @@ body {
 
 .app-chat-sidebar-list {
   flex: 1;
+  min-height: 0;
   overflow: auto;
 }
 
@@ -135,6 +139,7 @@ body {
   display: flex;
   flex: 1;
   flex-direction: column;
+  min-height: 0;
   min-width: 0;
 }
 
@@ -151,18 +156,11 @@ body {
 }
 
 .chat-input-area {
+  flex-shrink: 0;
   padding: 8px 16px;
   border-top: 1px solid var(--ant-color-border-secondary);
 }
 
-.msg-user .ant-card-body {
-  background: var(--ant-color-bg-text-hover);
-}
-
-.msg-ai .ant-card-body {
-  background: var(--ant-color-bg-container);
-}
-
 .message-body {
   margin-top: 8px;
 }
@@ -177,6 +175,7 @@ body {
 
 .chat-scroll-area {
   flex: 1;
+  min-height: 0;
   overflow: auto;
   padding: 16px;
 }
@@ -202,6 +201,6 @@ body {
   margin: 0;
 }
 
-.avatar-ai {
+.msg-title-ai {
-  background-color: var(--ant-color-primary);
+  color: var(--ant-color-primary);
 }