add: 对话发送框

Frontend/Pages/Index.razor

@@ -1,5 +1,6 @@
 @page "/"
 @using Frontend.Models
+@inject ILogger<Index> Logger
 
 <Layout>
     <Sider Width="200">
@@ -7,6 +8,7 @@
     </Sider>
 
     <Content>
+        <div class="content-zone">
             <div class="chat-zone">
                 <AntList TItem="ChatMessage" DataSource="@_messages" Split="@false">
                     <ListItem>
@@ -25,11 +27,31 @@
                     </ListItem>
                 </AntList>
             </div>
+            <div class="control-zone">
+                <div style="padding: 10px 82px 20px">
+                    <div class="input-zone">
+                        <GridRow>
+                            <GridCol Span="22">
+                                <Input TValue="@string" @bind-Value="@MessageSending"
+                                       Placeholder="输入以对话" Bordered="@false" OnPressEnter="@SendMessageClicked"/>
+                            </GridCol>
+                            <GridCol Span="2">
+                                <Button Type="@ButtonType.Primary" @onclick="@SendMessageClicked">
+                                    发送
+                                </Button>
+                            </GridCol>
+                        </GridRow>
+                    </div>
+                </div>
+            </div>
+        </div>
     </Content>
 </Layout>
 
 @code
 {
+    private string MessageSending { get; set; } = string.Empty;
+
     private readonly List<ChatMessage> _messages = new()
     {
         new ChatMessage
@@ -43,13 +65,23 @@
             Sender = "凯瑟琳",
             Text = "欢迎来到冒险家协会。",
             Left = true
-        },
-        new ChatMessage
-        {
-            Sender = "旅行者",
-            Text = "领取每日委托奖励。",
-            Left = false
         }
     };
 
+    private void SendMessageClicked()
+    {
+        if (string.IsNullOrWhiteSpace(MessageSending))
+        {
+            return;
+        }
+
+        _messages.Add(new ChatMessage
+        {
+            Left = false,
+            Sender = "旅行者",
+            Text = MessageSending
+        });
+
+        MessageSending = string.Empty;
+    }
 }

Frontend/Pages/Index.razor.css

@@ -0,0 +1,50 @@
+.chat-column {
+    margin-left: auto;
+}
+
+.content-zone {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: calc(100vh - 64px);
+    position: relative;
+    background: linear-gradient(180deg,
+    #f5f4f6,
+    #b5bddf);
+    overflow: hidden;
+}
+
+.chat-zone {
+    min-width: 100%;
+    padding: 20px;
+    position: relative;
+    overflow-y: auto;
+}
+
+.control-zone {
+    min-width: 100%;
+    bottom: 0;
+    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);
+}
+
+.input-zone {
+    padding: 10px;
+    border-radius: 15px;
+    background-color: white;
+}

Frontend/Pages/index.razor.css

@@ -1,12 +0,0 @@
-.chat-column {
-    margin-left: auto;
-}
-
-.chat-zone {
-    min-width: inherit;
-    background: linear-gradient(180deg, 
-    #f5f4f6,
-    #b5bddf);
-    min-height: calc(100vh - 64px);
-    padding: 20px;
-}

Frontend/Shared/MessageBubble.razor

@@ -1,4 +1,6 @@
 @using Frontend.Models
+
+<div>
     @if (Message.Left)
     {
         <Space Align="start">
@@ -37,6 +39,7 @@ else
             </SpaceItem>
         </Space>
     }
+</div>
 
 @code {
 

Frontend/Shared/MessageBubble.razor.css

@@ -4,4 +4,5 @@
     padding: 5px;
     display: flex;
     flex-direction: column;
+    min-width: 80px;
 }