From f82c3104b5d3de7871dd2326ba043db08414aa04 Mon Sep 17 00:00:00 2001
From: jackfiled <xcrenchangjun@outlook.com>
Date: Sun, 8 Oct 2023 23:43:49 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E5=AF=B9=E8=AF=9D=E5=8F=91=E9=80=81?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/Pages/Index.razor              | 80 +++++++++++++++++--------
 Frontend/Pages/Index.razor.css          | 50 ++++++++++++++++
 Frontend/Pages/index.razor.css          | 12 ----
 Frontend/Shared/MessageBubble.razor     | 77 ++++++++++++------------
 Frontend/Shared/MessageBubble.razor.css |  1 +
 Frontend/wwwroot/css/site.css           | 18 +++---
 6 files changed, 156 insertions(+), 82 deletions(-)
 create mode 100644 Frontend/Pages/Index.razor.css
 delete mode 100644 Frontend/Pages/index.razor.css

diff --git a/Frontend/Pages/Index.razor b/Frontend/Pages/Index.razor
index 06f181e..df7ee8f 100644
--- a/Frontend/Pages/Index.razor
+++ b/Frontend/Pages/Index.razor
@@ -1,35 +1,57 @@
 @page "/"
 @using Frontend.Models
+@inject ILogger<Index> Logger
 
 <Layout>
     <Sider Width="200">
-        
+
     </Sider>
 
     <Content>
-        <div class="chat-zone">
-            <AntList TItem="ChatMessage" DataSource="@_messages" Split="@false">
-                <ListItem>
-                    @if (context.Left)
-                    {
-                        <div>
-                            <MessageBubble Message="context"/>
-                        </div>
-                    }
-                    else
-                    {
-                        <div style="margin-left: auto">
-                            <MessageBubble Message="context"/>
-                        </div>
-                    }
-                </ListItem>
-            </AntList>
+        <div class="content-zone">
+            <div class="chat-zone">
+                <AntList TItem="ChatMessage" DataSource="@_messages" Split="@false">
+                    <ListItem>
+                        @if (context.Left)
+                        {
+                            <div>
+                                <MessageBubble Message="context"/>
+                            </div>
+                        }
+                        else
+                        {
+                            <div style="margin-left: auto">
+                                <MessageBubble Message="context"/>
+                            </div>
+                        }
+                    </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;
+    }
 }
\ No newline at end of file
diff --git a/Frontend/Pages/Index.razor.css b/Frontend/Pages/Index.razor.css
new file mode 100644
index 0000000..b00ce4e
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/Frontend/Pages/index.razor.css b/Frontend/Pages/index.razor.css
deleted file mode 100644
index ea57325..0000000
--- a/Frontend/Pages/index.razor.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/Frontend/Shared/MessageBubble.razor b/Frontend/Shared/MessageBubble.razor
index 5f474ce..282b3eb 100644
--- a/Frontend/Shared/MessageBubble.razor
+++ b/Frontend/Shared/MessageBubble.razor
@@ -1,42 +1,45 @@
 @using Frontend.Models
-@if (Message.Left)
-{
-    <Space Align="start">
-        <SpaceItem>
-            <Avatar Icon="user" Size="2.5rem"/>
-        </SpaceItem>
 
-        <SpaceItem>
-            <div class="bubble">
-                <p style="font-size: 1.1rem">
-                    @Message.Text
-                </p>
-                <p style="font-size: 0.8rem; color: rgb(128,128,128)">
-                    @Message.Sender
-                </p>
-            </div>
-        </SpaceItem>
-    </Space>
-}
-else
-{
-    <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)">
-                    @Message.Sender
-                </p>
-            </div>
-        </SpaceItem>
-        
-        <SpaceItem>
-            <Avatar Icon="user" Size="2.5rem"/>
-        </SpaceItem>
-    </Space>
-}
+<div>
+    @if (Message.Left)
+    {
+        <Space Align="start">
+            <SpaceItem>
+                <Avatar Icon="user" Size="2.5rem"/>
+            </SpaceItem>
+    
+            <SpaceItem>
+                <div class="bubble">
+                    <p style="font-size: 1.1rem">
+                        @Message.Text
+                    </p>
+                    <p style="font-size: 0.8rem; color: rgb(128,128,128)">
+                        @Message.Sender
+                    </p>
+                </div>
+            </SpaceItem>
+        </Space>
+    }
+    else
+    {
+        <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)">
+                        @Message.Sender
+                    </p>
+                </div>
+            </SpaceItem>
+            
+            <SpaceItem>
+                <Avatar Icon="user" Size="2.5rem"/>
+            </SpaceItem>
+        </Space>
+    }
+</div>
 
 @code {
 
diff --git a/Frontend/Shared/MessageBubble.razor.css b/Frontend/Shared/MessageBubble.razor.css
index d7d112d..2125dad 100644
--- a/Frontend/Shared/MessageBubble.razor.css
+++ b/Frontend/Shared/MessageBubble.razor.css
@@ -4,4 +4,5 @@
     padding: 5px;
     display: flex;
     flex-direction: column;
+    min-width: 80px;
 }
\ No newline at end of file
diff --git a/Frontend/wwwroot/css/site.css b/Frontend/wwwroot/css/site.css
index 08e7f0b..143c5ff 100644
--- a/Frontend/wwwroot/css/site.css
+++ b/Frontend/wwwroot/css/site.css
@@ -10,12 +10,12 @@
     z-index: 1000;
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 3.5rem;
-        top: 0.5rem;
-    }
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 3.5rem;
+    top: 0.5rem;
+}
 
 .blazor-error-boundary {
     background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
@@ -23,6 +23,6 @@
     color: white;
 }
 
-    .blazor-error-boundary::after {
-        content: "An error has occurred."
-    }
+.blazor-error-boundary::after {
+    content: "An error has occurred."
+}