From 3e1f3b554deca9435aaba082f4dcf8885fccfca6 Mon Sep 17 00:00:00 2001
From: lanyuanxiaoyao <lanyuanxiaoyao@gmail.com>
Date: Sun, 31 May 2026 19:01:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E5=AE=A4=E6=B6=88=E6=81=AF=E5=8D=A1=E7=89=87=E4=B8=8E=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=BB=9A=E5=8A=A8=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

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

- 侧边栏会话列表添加min-height:0确保滚动正常
---
 .../workbench/components/chat/ChatPanel.tsx   | 19 ++++++-----------
 src/web/styles.css                            | 21 +++++++++----------
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/web/consoles/workbench/components/chat/ChatPanel.tsx b/src/web/consoles/workbench/components/chat/ChatPanel.tsx
index a90fab6..5bbf264 100644
--- a/src/web/consoles/workbench/components/chat/ChatPanel.tsx
+++ b/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.Meta
-                  avatar={
-                    <Avatar className={msg.role === "assistant" ? "avatar-ai" : undefined} size="small">
-                      {msg.role === "user" ? "你" : "AI"}
-                    </Avatar>
-                  }
-                  title={msg.role === "user" ? "你" : "Alfred"}
-                />
+              <Card
+                key={msg.id}
+                size="small"
+                title={msg.role === "user" ? "用户" : <span className="msg-title-ai">阿福</span>}
+              >
                 <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;
 }
diff --git a/src/web/styles.css b/src/web/styles.css
index 073420f..1940a61 100644
--- a/src/web/styles.css
+++ b/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 {
-  background-color: var(--ant-color-primary);
+.msg-title-ai {
+  color: var(--ant-color-primary);
 }