add: 美化头像和设置用户名称过程

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">

Frontend/Pages/Index.razor.css

@@ -24,4 +24,5 @@
 
 .chat-list {
     overflow-y: auto;
+    margin-top: 40px;
 }

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;
+    }
 }

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>
     }