Katheryne/Frontend/Shared/Chat.razor
2023-10-09 19:32:56 +08:00

88 lines
2.3 KiB
Plaintext

@using Frontend.Models
<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 style="height: 200px; width: 100%; flex: none">
</div>
</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>
@code
{
private string MessageSending { get; set; } = string.Empty;
private readonly List<ChatMessage> _messages = new()
{
new ChatMessage
{
Sender = "凯瑟琳",
Text = "向着星辰和深渊!",
Left = true
},
new ChatMessage
{
Sender = "凯瑟琳",
Text = "欢迎来到冒险家协会。",
Left = true
}
};
private void SendMessageClicked()
{
if (string.IsNullOrWhiteSpace(MessageSending))
{
return;
}
_messages.Add(new ChatMessage
{
Left = false,
Sender = "旅行者",
Text = MessageSending
});
MessageSending = string.Empty;
_messages.Add(new ChatMessage
{
Left = true,
Sender = "凯瑟琳",
Text = "对不起,做不到。"
});
}
}