add: 新建对话和切换对话功能

Frontend/Models/Chat.cs

@@ -0,0 +1,12 @@
+namespace Frontend.Models;
+
+public class Chat
+{
+    public Guid Guid { get; } = Guid.NewGuid();
+
+    public string Title { get; set; } = string.Empty;
+    
+    public bool Selected { get; set; }
+
+    public List<ChatMessage> Messages { get; } = new();
+}

Frontend/Pages/Index.razor

@@ -1,16 +1,97 @@
 @page "/"
+@using Frontend.Models
 
 
 <Layout>
-    <Sider Width="200">
+    <Sider Width="200" Theme="SiderTheme.Light">
-        
+        <div class="chat-control-zone">
+            <div>
+                <Button Type="@ButtonType.Primary" Size="large" @onclick="@CreateChatClicked">
+                    新建对话
+                </Button>
+
+                <div class="chat-list">
+                    <AntList TItem="@Chat" DataSource="@_chatDictionary.Values"
+                             Split="@false">
+                        <ListItem OnClick="@(() => ChangeChatClicked(context.Guid))">
+                            <ListItemMeta>
+                                <TitleTemplate>
+                                    @if (@context.Selected)
+                                    {
+                                        <div class="selected-chat-name">
+                                            <p style="margin: 5px">@context.Title</p>
+                                        </div>
+                                    }
+                                    else
+                                    {
+                                        <div class="chat-name">
+                                            <p style="margin: 5px">@context.Title</p>
+                                        </div>
+                                    }
+                                </TitleTemplate>
+                            </ListItemMeta>
+                        </ListItem>
+                    </AntList>
+                </div>
+            </div>
+        </div>
     </Sider>
-    
+
     <Content>
-        <Chat />
+        <ChatZone Messages="@_chatDictionary[_currentGuid].Messages"/>
     </Content>
 </Layout>
 
 @code {
-    
+    private readonly Dictionary<Guid, Chat> _chatDictionary = new();
+
+    private Guid _currentGuid;
+
+    protected override void OnInitialized()
+    {
+        var chat = new Chat
+        {
+            Title = $"对话：{_chatDictionary.Count + 1}"
+        };
+        
+        chat.Messages.Add(new ChatMessage
+        {
+            Sender = "凯瑟琳",
+            Left = true,
+            Text = "向着星辰和深渊！欢迎来到冒险家协会。"
+        });
+        chat.Selected = true;
+        
+        _chatDictionary.Add(chat.Guid, chat);
+        _currentGuid = chat.Guid;
+    }
+
+    private void CreateChatClicked()
+    {
+        var chat = new Chat
+        {
+            Title = $"对话：{_chatDictionary.Count + 1}"
+        };
+        
+        chat.Messages.Add(new ChatMessage
+        {
+            Sender = "凯瑟琳",
+            Left = true,
+            Text = "向着星辰和深渊！欢迎来到冒险家协会。"
+        });
+        
+        _chatDictionary.Add(chat.Guid, chat);
+        
+        // 切换到新建的对话
+        _chatDictionary[_currentGuid].Selected = false;
+        _currentGuid = chat.Guid;
+        _chatDictionary[_currentGuid].Selected = true;
+    }
+
+    private void ChangeChatClicked(Guid guid)
+    {
+        _chatDictionary[_currentGuid].Selected = false;
+        _currentGuid = guid;
+        _chatDictionary[_currentGuid].Selected = true;
+    }
 }

Frontend/Pages/Index.razor.css

@@ -0,0 +1,27 @@
+.chat-control-zone {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+}
+
+.selected-chat-name {
+    display: flex;
+    justify-content: center;
+    margin: 5px 5px 5px;
+    padding: 5px 0 5px;
+    border-radius: 5px;
+    background-color: #bcc9e2;
+}
+
+.chat-name {
+    display: flex;
+    justify-content: center;
+    margin: 5px 5px 5px;
+    padding: 5px 0 5px;
+    border-radius: 5px;
+    background-color: #5d92e4;
+}
+
+.chat-list {
+    overflow-y: auto;
+}

Frontend/Properties/launchSettings.json

@@ -10,7 +10,7 @@
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": false,
-      "applicationUrl": "http://localhost:5136",
+      "applicationUrl": "http://localhost:5163",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

Frontend/Shared/ChatZone.razor

@@ -2,7 +2,7 @@
 
 <div class="content-zone">
     <div class="chat-zone">
-        <AntList TItem="ChatMessage" DataSource="@_messages" Split="@false">
+        <AntList TItem="ChatMessage" DataSource="@Messages" Split="@false">
             <ListItem>
                 @if (context.Left)
                 {
@@ -46,21 +46,8 @@
 {
     private string MessageSending { get; set; } = string.Empty;
 
-    private readonly List<ChatMessage> _messages = new()
+    [Parameter]
-    {
+    public List<ChatMessage> Messages { get; set; } = null!;
-        new ChatMessage
-        {
-            Sender = "凯瑟琳",
-            Text = "向着星辰和深渊！",
-            Left = true
-        },
-        new ChatMessage
-        {
-            Sender = "凯瑟琳",
-            Text = "欢迎来到冒险家协会。",
-            Left = true
-        }
-    };
 
     private void SendMessageClicked()
     {
@@ -69,7 +56,7 @@
             return;
         }
 
-        _messages.Add(new ChatMessage
+        Messages.Add(new ChatMessage
         {
             Left = false,
             Sender = "旅行者",
@@ -78,7 +65,7 @@
 
         MessageSending = string.Empty;
 
-        _messages.Add(new ChatMessage
+        Messages.Add(new ChatMessage
         {
             Left = true,
             Sender = "凯瑟琳",

Frontend/Shared/MainLayout.razor

@@ -6,7 +6,7 @@
             <Space >
                 <SpaceItem>
                     <p class="title-text">
-                        自律型可重编程客服机器人
+                        试作自律型可重编程客服机器人
                     </p>
                 </SpaceItem>