From f8399887ce04ab0be61e92a4efee1dbb36e40683 Mon Sep 17 00:00:00 2001
From: zyxucp <286513187@qq.com>
Date: Sun, 5 Oct 2025 15:40:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20ChatView=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为 `<Image>` 组件新增 `Preview="false"` 属性，禁用头像图片预览。
- 调整输入框结构，新增 `<div class="input-bar__field">` 容器，优化布局。
- 更新 `.avatar` 样式，确保头像图片比例正确并裁剪为圆形。
- 优化 `.input-bar` 和 `.ant-input` 样式，提升输入框的视觉效果和交互体验。
- 新增 `.input-bar__field` 样式，增强输入框容器的布局和样式控制。
---
 .../Pages/ChatPage/Components/ChatView.razor  | 42 ++++++++++++++++---
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/AntSK/Pages/ChatPage/Components/ChatView.razor b/src/AntSK/Pages/ChatPage/Components/ChatView.razor
index b1659c6..6094cfb 100644
--- a/src/AntSK/Pages/ChatPage/Components/ChatView.razor
+++ b/src/AntSK/Pages/ChatPage/Components/ChatView.razor
@@ -40,7 +40,7 @@
                         </div>
                     </GridCol>
                     <GridCol Span="1" Class="avatar-col">
-                        <Image Class="avatar" Width="32px" Height="32px" Src="./assets/KDpgvguMpGfqaHPjicRK.svg" />
+                        <Image Class="avatar" Width="32px" Height="32px" Src="./assets/KDpgvguMpGfqaHPjicRK.svg" Preview="false" />
                     </GridCol>
                 </GridRow>
             }
@@ -48,7 +48,7 @@
             {
                 <GridRow Class="message-row" Gutter="(8,8)">
                     <GridCol Span="1" Class="avatar-col">
-                        <Image Class="avatar" Width="32px" Height="32px" Src="./assets/method-draw-image.svg" />
+                        <Image Class="avatar" Width="32px" Height="32px" Src="./assets/method-draw-image.svg" Preview="false" />
                     </GridCol>
                     <GridCol Span="23">
                         <div class="message-shell received">
@@ -71,8 +71,10 @@
             <Upload DefaultFileList="fileList" OnRemove="HandleFileRemove" />
         </Flex>
     }
-    <Flex Class="input-bar" Justify="end">
-        <AntDesign.Input @bind-Value="@(_messageInput)" DebounceMilliseconds="@(-1)" Placeholder="输入消息回车发送" OnPressEnter="@(async () => await OnSendAsync())" Disabled="@Sendding"></AntDesign.Input>
+    <Flex Class="input-bar" Justify="end" Align="center">
+        <div class="input-bar__field">
+            <AntDesign.Input @bind-Value="@(_messageInput)" DebounceMilliseconds="@(-1)" Placeholder="输入消息回车发送" OnPressEnter="@(async () => await OnSendAsync())" Disabled="@Sendding"></AntDesign.Input>
+        </div>
         @if (app.EmbeddingModelID != null)
         {
             <Upload Action="@("api/File/UploadFile")"
@@ -122,6 +124,7 @@
         box-sizing: border-box;
         border: 1px solid var(--border-subtle);
         box-shadow: var(--shadow-soft);
+        overflow: hidden;
     }
 
     #scrollDiv {
@@ -261,22 +264,49 @@
     }
 
     .avatar {
+        width: 32px;
+        height: 32px;
+        aspect-ratio: 1 / 1;
+        object-fit: cover;
         border-radius: 50%;
         box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12) inset, 0 6px 16px rgba(15, 23, 42, 0.12);
     }
 
     .input-bar {
+        display: flex;
+        align-items: center;
         gap: 8px;
         padding: 12px;
         border-top: 1px solid rgba(15, 23, 42, 0.06);
         background: var(--surface-base);
         position: sticky;
         bottom: 0;
-        box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.06);
+        box-shadow: none;
+        border-radius: 16px;
     }
 
     .input-bar .ant-input {
-        border-radius: 10px;
+        border-radius: 999px;
+        padding: 10px 16px;
+    }
+
+    .input-bar__field {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        padding: 2px;
+        border-radius: 999px;
+        background: var(--surface-elevated);
+        border: 1px solid var(--border-subtle);
+    }
+
+    .input-bar__field .ant-input {
+        width: 100%;
+        border: none;
+        background: transparent;
+        box-shadow: none;
+        height: 100%;
     }
 
     /* markdown & code inside bubbles */