add: 对话发送框

This commit is contained in:
2023-10-08 23:43:49 +08:00
parent 6bf583151c
commit f82c3104b5
6 changed files with 156 additions and 82 deletions

View File

@@ -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 {

View File

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