From 15fd59571fd8e047a31490159f40d2dd62c89990 Mon Sep 17 00:00:00 2001
From: zyxucp <286513187@qq.com>
Date: Sun, 5 Oct 2025 16:03:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20Chat=20=E5=92=8C=20ChatVie?=
 =?UTF-8?q?w=20=E6=A0=B7=E5=BC=8F=E5=8F=8A=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构了 `Chat.razor` 和 `ChatView.razor` 的样式：
- 替换内联样式为模块化 CSS 类（如 `chat-card`）。
- 优化卡片布局，新增容器类 `chat-card__content`。
- 改进滚动条样式，调整宽度、颜色和圆角。
- 为 `#chat` 添加模糊背景伪元素和阴影效果。
- 删除冗余样式规则，提升代码可维护性。
---
 src/AntSK/Pages/ChatPage/Chat.razor           | 58 ++++++++++++----
 .../Pages/ChatPage/Components/ChatView.razor  | 68 +++++++++++++++----
 2 files changed, 99 insertions(+), 27 deletions(-)
diff --git a/src/AntSK/Pages/ChatPage/Chat.razor b/src/AntSK/Pages/ChatPage/Chat.razor
index 2bc9dc8..4600488 100644
--- a/src/AntSK/Pages/ChatPage/Chat.razor
+++ b/src/AntSK/Pages/ChatPage/Chat.razor
@@ -10,7 +10,7 @@
 
 <GridRow Gutter="(16, 16)">
     <GridCol Span="14">
-        <Card Style="height:75vh;overflow: auto;">
+        <Card Class="chat-card">
             <TitleTemplate>
                 <Icon Type="setting" /> 选择应用
                 <Select DataSource="@_list"
@@ -23,12 +23,14 @@
                 <a href="@( NavigationManager.BaseUri + "openchat/" + AppId)" target="_blank">分享使用</a>
             </TitleTemplate>
             <Body>
-                @if (!string.IsNullOrEmpty(AppId))
-                {
-                    <Watermark Content="AntSK">
-                        <ChatView AppId="@AppId" ShowTitle=false OnRelevantSources="OnRelevantSources"></ChatView>
-                    </Watermark>
-                }
+                <div class="chat-card__content">
+                    @if (!string.IsNullOrEmpty(AppId))
+                    {
+                        <Watermark Content="AntSK" Class="chat-card__watermark">
+                            <ChatView AppId="@AppId" ShowTitle=false OnRelevantSources="OnRelevantSources"></ChatView>
+                        </Watermark>
+                    }
+                </div>
             </Body>
         </Card>
     </GridCol>
@@ -62,13 +64,45 @@
 </GridRow>
 
 <style>
-    #chat {
-        height: calc(75vh - 120px);
+    .chat-card {
+        height: 75vh;
         display: flex;
         flex-direction: column;
-        overflow-x: hidden;
-        overflow-y: auto;
-        margin: 0;
+        overflow: visible;
+        min-height: 0;
+    }
+
+    .chat-card .ant-card-body {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        padding: 5px;
+        box-sizing: border-box;
+    }
+
+    .chat-card__content {
+        position: relative;
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        width: 100%;
+        min-height: 0;
+    }
+
+    .chat-card__watermark {
+        flex: 1 1 auto;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+    }
+
+    .chat-card__watermark > * {
+        flex: 1 1 auto;
+        min-width: 0;
+        height: 100%;
     }
 
     body {
diff --git a/src/AntSK/Pages/ChatPage/Components/ChatView.razor b/src/AntSK/Pages/ChatPage/Components/ChatView.razor
index 6094cfb..3ea52e8 100644
--- a/src/AntSK/Pages/ChatPage/Components/ChatView.razor
+++ b/src/AntSK/Pages/ChatPage/Components/ChatView.razor
@@ -11,7 +11,7 @@
     {
         <PageHeader Class="site-page-header" Title="@app.Name" Subtitle="@app.Describe" />
     }
-    <div id="scrollDiv" style="flex:1; width:100%; overflow-y:auto; overflow-x:hidden; padding:16px;">
+    <div id="scrollDiv" class="chat-scroll">
         <Virtualize Items="@(MessageList.OrderBy(o => o.CreateTime).ToList())" Context="item">
             @if (item.IsSend)
             {
@@ -100,7 +100,6 @@
         --primary-color: var(--ant-primary-color, #1677ff);
         --primary-soft: rgba(22, 119, 255, 0.12);
         --bubble-recv: #ffffff;
-    --bubble-sent: #dce8ff;
         --bubble-border-sent: rgba(22, 119, 255, 0.25);
         --text-primary: #1f2329;
         --text-secondary: #7a808a;
@@ -113,32 +112,66 @@
     }
 
     #chat {
+        position: relative;
+        isolation: isolate;
+        z-index: 0;
         display: flex;
         flex-direction: column;
         gap: 8px;
+        flex: 1;
         height: 100%;
-        min-height: 65vh;
+        width: 100%;
+        min-height: min(65vh, 100%);
+        max-height: 100%;
         background: var(--surface-base);
-        border-radius: 16px;
+        border-radius: 16px 16px 16px 16px;
         padding: 12px 12px 0 12px;
         box-sizing: border-box;
         border: 1px solid var(--border-subtle);
-        box-shadow: var(--shadow-soft);
-        overflow: hidden;
     }
 
-    #scrollDiv {
+    #chat::after {
+        content: "";
+        position: absolute;
+        left: 32px;
+        right: 32px;
+        bottom: -18px;
+        height: 40px;
+        background: rgba(15, 23, 42, 0.22);
+        filter: blur(24px);
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: -1;
+    }
+
+    .chat-scroll {
+        flex: 1;
+        width: 100%;
+        min-height: 0;
+        max-height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 12px 16px 20px;
         background: var(--surface-base);
-        border-radius: 12px;
+        border-radius: 16px;
         box-sizing: border-box;
         scroll-behavior: smooth;
-        padding: 6px 8px 18px;
+        scrollbar-gutter: stable both-edges;
     }
 
-    /* custom scrollbar */
-    #scrollDiv::-webkit-scrollbar { height: 8px; width: 8px; }
-    #scrollDiv::-webkit-scrollbar-thumb { background: rgba(22, 119, 255, 0.22); border-radius: 8px; }
-    #scrollDiv::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.03); }
+    .chat-scroll::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    .chat-scroll::-webkit-scrollbar-thumb {
+        background: rgba(22, 119, 255, 0.24);
+        border-radius: 8px;
+    }
+
+    .chat-scroll::-webkit-scrollbar-track {
+        background: rgba(15, 23, 42, 0.05);
+        border-radius: 8px;
+    }
 
     .message-row {
         margin-bottom: 4px;
@@ -281,7 +314,7 @@
         background: var(--surface-base);
         position: sticky;
         bottom: 0;
-        box-shadow: none;
+        box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.06);
         border-radius: 16px;
     }
 
@@ -391,9 +424,14 @@
 
         #chat {
             background: var(--surface-elevated);
+            box-shadow: 0 28px 48px -24px rgba(0, 0, 0, 0.68);
         }
 
-        #scrollDiv {
+        #chat::after {
+            background: rgba(15, 23, 42, 0.55);
+        }
+
+        .chat-scroll {
             background: transparent;
         }
 
