post-guard/Katheryne
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add: 基础的聊天对话框

Browse Source
This commit is contained in:
jackfiled
2023-10-07 18:55:22 +08:00
parent e2419a1ebd
commit 6bf583151c
10 changed files with 178 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
Frontend/Shared/MainLayout.razor Normal file
View File

@@ -0,0 +1,27 @@
@inherits LayoutComponentBase
<div>
<Layout>
<Header class="header">
<Space >
<SpaceItem>
<p class="title-text">
自律型可重编程对话机器人
</p>
</SpaceItem>
<SpaceItem>
<p class="subtitle-text">
a.k.a 凯瑟琳
</p>
</SpaceItem>
</Space>
</Header>
<Layout>
<Content>
@Body
</Content>
</Layout>
</Layout>
</div>

11
Frontend/Shared/MainLayout.razor.css Normal file
View File

@@ -0,0 +1,11 @@
.title-text {
font-size: 2rem;
color: white;
margin: 0;
}
.subtitle-text {
font-size: 0.8rem;
color: grey;
margin: 0;
}

50
Frontend/Shared/MessageBubble.razor Normal file
View File

@@ -0,0 +1,50 @@
@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>
}
@code {
[Parameter]
public ChatMessage Message { get; set; } = new()
{
Left = true,
Sender = "default",
Text = "default"
};
}

7
Frontend/Shared/MessageBubble.razor.css Normal file
View File

@@ -0,0 +1,7 @@
.bubble {
background-color: white;
border-radius: 10px;
padding: 5px;
display: flex;
flex-direction: column;
}