From 70ebd98f14912d90a9a38e4db8f5bc6bb9d4777d Mon Sep 17 00:00:00 2001
From: jackfiled <xcrenchangjun@outlook.com>
Date: Mon, 9 Oct 2023 13:31:03 +0800
Subject: [PATCH] fix: Beautify CSS

---
 Frontend/Pages/Index.razor              | 11 ++++++++++
 Frontend/Pages/Index.razor.css          | 20 ++++++------------
 Frontend/Shared/MainLayout.razor        |  2 +-
 Frontend/Shared/MessageBubble.razor     | 27 ++++++++++++++-----------
 Frontend/Shared/MessageBubble.razor.css | 24 ++++++++++++++++++----
 Frontend/wwwroot/css/site.css           |  4 ++++
 6 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/Frontend/Pages/Index.razor b/Frontend/Pages/Index.razor
index df7ee8f..10b8726 100644
--- a/Frontend/Pages/Index.razor
+++ b/Frontend/Pages/Index.razor
@@ -26,7 +26,11 @@
                         }
                     </ListItem>
                 </AntList>
+                <div style="height: 200px; width: 100%; flex: none">
+                    
+                </div>
             </div>
+            
             <div class="control-zone">
                 <div style="padding: 10px 82px 20px">
                     <div class="input-zone">
@@ -83,5 +87,12 @@
         });
 
         MessageSending = string.Empty;
+
+        _messages.Add(new ChatMessage
+        {
+            Left = true,
+            Sender = "凯瑟琳",
+            Text = "对不起，做不到。"
+        });
     }
 }
\ No newline at end of file
diff --git a/Frontend/Pages/Index.razor.css b/Frontend/Pages/Index.razor.css
index b00ce4e..320dfb9 100644
--- a/Frontend/Pages/Index.razor.css
+++ b/Frontend/Pages/Index.razor.css
@@ -8,6 +8,8 @@
     flex-direction: column;
     width: 100%;
     min-height: calc(100vh - 64px);
+    max-height: calc(100vh - 64px);
+    padding: 10px;
     position: relative;
     background: linear-gradient(180deg,
     #f5f4f6,
@@ -17,8 +19,10 @@
 
 .chat-zone {
     min-width: 100%;
-    padding: 20px;
+    display: flex;
+    flex-direction: column;
     position: relative;
+    height: 100%;
     overflow-y: auto;
 }
 
@@ -28,19 +32,7 @@
     position: absolute;
     background-color: #b5bddf;
     display: block;
-}
-
-.control-zone::before {
-    content: "";
-    pointer-events: none;
-    height: 14px;
-    min-width: inherit;
-    top: -14px;
-    display: block;
-    position: absolute;
-    background: linear-gradient(180deg,
-    rgb(187, 193, 223),
-    #b5bddf);
+    box-shadow: 3px 0 0 #b5bddf;
 }
 
 .input-zone {
diff --git a/Frontend/Shared/MainLayout.razor b/Frontend/Shared/MainLayout.razor
index ed18d08..e64f2ad 100644
--- a/Frontend/Shared/MainLayout.razor
+++ b/Frontend/Shared/MainLayout.razor
@@ -6,7 +6,7 @@
             <Space >
                 <SpaceItem>
                     <p class="title-text">
-                        自律型可重编程对话机器人
+                        自律型可重编程客服机器人
                     </p>
                 </SpaceItem>
                 
diff --git a/Frontend/Shared/MessageBubble.razor b/Frontend/Shared/MessageBubble.razor
index 282b3eb..e05e9f4 100644
--- a/Frontend/Shared/MessageBubble.razor
+++ b/Frontend/Shared/MessageBubble.razor
@@ -7,15 +7,15 @@
             <SpaceItem>
                 <Avatar Icon="user" Size="2.5rem"/>
             </SpaceItem>
-    
+
             <SpaceItem>
-                <div class="bubble">
-                    <p style="font-size: 1.1rem">
+                <p style="font-size: 0.8rem; color: rgb(128,128,128)">
+                    @Message.Sender
+                </p>
+                <div class="bubble-left">
+                    <p class="message-text">
                         @Message.Text
                     </p>
-                    <p style="font-size: 0.8rem; color: rgb(128,128,128)">
-                        @Message.Sender
-                    </p>
                 </div>
             </SpaceItem>
         </Space>
@@ -24,16 +24,18 @@
     {
         <Space Align="start">
             <SpaceItem>
-                <div class="bubble">
-                    <p style="font-size: 1.1rem; align-self: flex-end">
-                        @Message.Text
-                    </p>
-                    <p style="font-size: 0.8rem; align-self: flex-end; color: rgb(128, 128, 128)">
+                <div>
+                    <p style="font-size: 0.8rem; color: rgb(128, 128, 128); text-align: right;">
                         @Message.Sender
                     </p>
+                    <div class="bubble-right">
+                        <p class="message-text">
+                            @Message.Text
+                        </p>
+                    </div>
                 </div>
             </SpaceItem>
-            
+
             <SpaceItem>
                 <Avatar Icon="user" Size="2.5rem"/>
             </SpaceItem>
@@ -50,4 +52,5 @@
         Sender = "default",
         Text = "default"
     };
+
 }
\ No newline at end of file
diff --git a/Frontend/Shared/MessageBubble.razor.css b/Frontend/Shared/MessageBubble.razor.css
index 2125dad..d6c9993 100644
--- a/Frontend/Shared/MessageBubble.razor.css
+++ b/Frontend/Shared/MessageBubble.razor.css
@@ -1,8 +1,24 @@
-.bubble {
+.bubble-left {
     background-color: white;
-    border-radius: 10px;
+    border-radius: 1px 10px 10px 10px;
     padding: 5px;
-    display: flex;
-    flex-direction: column;
     min-width: 80px;
+    max-width: 300px;
+    width: fit-content;
+    justify-content: center;
+}
+
+.bubble-right {
+    background-color: white;
+    border-radius: 10px 1px 10px 10px;
+    padding: 5px;
+    max-width: 300px;
+    width: fit-content;
+    justify-content: center;
+}
+
+.message-text {
+    font-size: 1.1rem;
+    margin: 3px;
+    word-break: break-word;
 }
\ No newline at end of file
diff --git a/Frontend/wwwroot/css/site.css b/Frontend/wwwroot/css/site.css
index 143c5ff..742c9c9 100644
--- a/Frontend/wwwroot/css/site.css
+++ b/Frontend/wwwroot/css/site.css
@@ -26,3 +26,7 @@
 .blazor-error-boundary::after {
     content: "An error has occurred."
 }
+
+body {
+    overflow: hidden;
+}