From 4c6d35421a27e03578a1c3ddb000b7ead7fdcea3 Mon Sep 17 00:00:00 2001
From: jackfiled <xcrenchangjun@outlook.com>
Date: Mon, 16 Oct 2023 14:00:03 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E7=BE=8E=E5=8C=96=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E5=92=8C=E8=AE=BE=E7=BD=AE=E7=94=A8=E6=88=B7=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E8=BF=87=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/Pages/Index.razor          |  2 +-
 Frontend/Pages/Index.razor.css      |  1 +
 Frontend/Shared/ChatZone.razor      | 35 ++++++++++++++++++++++++++++-
 Frontend/Shared/MessageBubble.razor |  8 +++++--
 4 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/Frontend/Pages/Index.razor b/Frontend/Pages/Index.razor
index a502275..2768761 100644
--- a/Frontend/Pages/Index.razor
+++ b/Frontend/Pages/Index.razor
@@ -5,7 +5,7 @@
 
 
 <Layout>
-    <Sider Width="200" Theme="SiderTheme.Light">
+    <Sider Width="200">
         <div class="chat-control-zone">
             <div>
                 <Button Type="@ButtonType.Primary" Size="large" @onclick="@CreateChatClicked">
diff --git a/Frontend/Pages/Index.razor.css b/Frontend/Pages/Index.razor.css
index 60503d9..f18bcf9 100644
--- a/Frontend/Pages/Index.razor.css
+++ b/Frontend/Pages/Index.razor.css
@@ -24,4 +24,5 @@
 
 .chat-list {
     overflow-y: auto;
+    margin-top: 40px;
 }
\ No newline at end of file
diff --git a/Frontend/Shared/ChatZone.razor b/Frontend/Shared/ChatZone.razor
index 39cf69f..5935261 100644
--- a/Frontend/Shared/ChatZone.razor
+++ b/Frontend/Shared/ChatZone.razor
@@ -41,11 +41,24 @@
             </div>
         </div>
     </div>
+    
+    <Modal Title="设置您的昵称"
+           Visible="@_setUsernameVisible"
+           OnOk="@SetUsernameOkClicked"
+           OnCancel="@SetUsernameCancelClicked">
+        <div>
+            <Input TValue="@string" Placeholder="用户名" 
+                   @bind-Value="@_username"
+                   OnPressEnter="@SetUsernameOkClicked"/>
+        </div>
+    </Modal>
 </div>
 
 @code
 {
     private string MessageSending { get; set; } = string.Empty;
+    private string _username = string.Empty;
+    private bool _setUsernameVisible = false;
 
     [Parameter]
     public List<ChatMessage> Messages { get; set; } = null!;
@@ -53,6 +66,16 @@
     [Parameter]
     public IChatRobot Robot { get; set; } = null!;
 
+    protected override void OnInitialized()
+    {
+        if (string.IsNullOrEmpty(_username))
+        {
+            _setUsernameVisible = true;
+        }
+        
+        base.OnInitialized();
+    }
+
     private void SendMessageClicked()
     {
         if (string.IsNullOrWhiteSpace(MessageSending))
@@ -63,7 +86,7 @@
         Messages.Add(new ChatMessage
         {
             Left = false,
-            Sender = "旅行者",
+            Sender = string.IsNullOrEmpty(_username) ? "default" : _username,
             Text = MessageSending
         });
 
@@ -79,4 +102,14 @@
         
         MessageSending = string.Empty;
     }
+
+    private void SetUsernameOkClicked()
+    {
+        _setUsernameVisible = false;
+    }
+
+    private void SetUsernameCancelClicked()
+    {
+        _setUsernameVisible = false;
+    }
 }
\ No newline at end of file
diff --git a/Frontend/Shared/MessageBubble.razor b/Frontend/Shared/MessageBubble.razor
index e05e9f4..24a9e52 100644
--- a/Frontend/Shared/MessageBubble.razor
+++ b/Frontend/Shared/MessageBubble.razor
@@ -5,7 +5,9 @@
     {
         <Space Align="start">
             <SpaceItem>
-                <Avatar Icon="user" Size="2.5rem"/>
+                <Avatar Style="background-color: #5d92e4" Size="2.5rem">
+                    @Message.Sender.First()
+                </Avatar>
             </SpaceItem>
 
             <SpaceItem>
@@ -37,7 +39,9 @@
             </SpaceItem>
 
             <SpaceItem>
-                <Avatar Icon="user" Size="2.5rem"/>
+                <Avatar Style="background-color: #5d92e4" Size="2.5rem">
+                    @Message.Sender.First()
+                </Avatar>
             </SpaceItem>
         </Space>
     }