add: 对话发送框
This commit is contained in:
parent
6bf583151c
commit
f82c3104b5
|
@ -1,35 +1,57 @@
|
||||||
@page "/"
|
@page "/"
|
||||||
@using Frontend.Models
|
@using Frontend.Models
|
||||||
|
@inject ILogger<Index> Logger
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<Sider Width="200">
|
<Sider Width="200">
|
||||||
|
|
||||||
</Sider>
|
</Sider>
|
||||||
|
|
||||||
<Content>
|
<Content>
|
||||||
<div class="chat-zone">
|
<div class="content-zone">
|
||||||
<AntList TItem="ChatMessage" DataSource="@_messages" Split="@false">
|
<div class="chat-zone">
|
||||||
<ListItem>
|
<AntList TItem="ChatMessage" DataSource="@_messages" Split="@false">
|
||||||
@if (context.Left)
|
<ListItem>
|
||||||
{
|
@if (context.Left)
|
||||||
<div>
|
{
|
||||||
<MessageBubble Message="context"/>
|
<div>
|
||||||
</div>
|
<MessageBubble Message="context"/>
|
||||||
}
|
</div>
|
||||||
else
|
}
|
||||||
{
|
else
|
||||||
<div style="margin-left: auto">
|
{
|
||||||
<MessageBubble Message="context"/>
|
<div style="margin-left: auto">
|
||||||
</div>
|
<MessageBubble Message="context"/>
|
||||||
}
|
</div>
|
||||||
</ListItem>
|
}
|
||||||
</AntList>
|
</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>
|
</div>
|
||||||
</Content>
|
</Content>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
@code
|
@code
|
||||||
{
|
{
|
||||||
|
private string MessageSending { get; set; } = string.Empty;
|
||||||
|
|
||||||
private readonly List<ChatMessage> _messages = new()
|
private readonly List<ChatMessage> _messages = new()
|
||||||
{
|
{
|
||||||
new ChatMessage
|
new ChatMessage
|
||||||
|
@ -43,13 +65,23 @@
|
||||||
Sender = "凯瑟琳",
|
Sender = "凯瑟琳",
|
||||||
Text = "欢迎来到冒险家协会。",
|
Text = "欢迎来到冒险家协会。",
|
||||||
Left = true
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
50
Frontend/Pages/Index.razor.css
Normal file
50
Frontend/Pages/Index.razor.css
Normal file
|
@ -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;
|
||||||
|
}
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -1,42 +1,45 @@
|
||||||
@using Frontend.Models
|
@using Frontend.Models
|
||||||
@if (Message.Left)
|
|
||||||
{
|
|
||||||
<Space Align="start">
|
|
||||||
<SpaceItem>
|
|
||||||
<Avatar Icon="user" Size="2.5rem"/>
|
|
||||||
</SpaceItem>
|
|
||||||
|
|
||||||
<SpaceItem>
|
<div>
|
||||||
<div class="bubble">
|
@if (Message.Left)
|
||||||
<p style="font-size: 1.1rem">
|
{
|
||||||
@Message.Text
|
<Space Align="start">
|
||||||
</p>
|
<SpaceItem>
|
||||||
<p style="font-size: 0.8rem; color: rgb(128,128,128)">
|
<Avatar Icon="user" Size="2.5rem"/>
|
||||||
@Message.Sender
|
</SpaceItem>
|
||||||
</p>
|
|
||||||
</div>
|
<SpaceItem>
|
||||||
</SpaceItem>
|
<div class="bubble">
|
||||||
</Space>
|
<p style="font-size: 1.1rem">
|
||||||
}
|
@Message.Text
|
||||||
else
|
</p>
|
||||||
{
|
<p style="font-size: 0.8rem; color: rgb(128,128,128)">
|
||||||
<Space Align="start">
|
@Message.Sender
|
||||||
<SpaceItem>
|
</p>
|
||||||
<div class="bubble">
|
</div>
|
||||||
<p style="font-size: 1.1rem; align-self: flex-end">
|
</SpaceItem>
|
||||||
@Message.Text
|
</Space>
|
||||||
</p>
|
}
|
||||||
<p style="font-size: 0.8rem; align-self: flex-end; color: rgb(128, 128, 128)">
|
else
|
||||||
@Message.Sender
|
{
|
||||||
</p>
|
<Space Align="start">
|
||||||
</div>
|
<SpaceItem>
|
||||||
</SpaceItem>
|
<div class="bubble">
|
||||||
|
<p style="font-size: 1.1rem; align-self: flex-end">
|
||||||
<SpaceItem>
|
@Message.Text
|
||||||
<Avatar Icon="user" Size="2.5rem"/>
|
</p>
|
||||||
</SpaceItem>
|
<p style="font-size: 0.8rem; align-self: flex-end; color: rgb(128, 128, 128)">
|
||||||
</Space>
|
@Message.Sender
|
||||||
}
|
</p>
|
||||||
|
</div>
|
||||||
|
</SpaceItem>
|
||||||
|
|
||||||
|
<SpaceItem>
|
||||||
|
<Avatar Icon="user" Size="2.5rem"/>
|
||||||
|
</SpaceItem>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
|
||||||
|
|
|
@ -4,4 +4,5 @@
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-width: 80px;
|
||||||
}
|
}
|
|
@ -10,12 +10,12 @@
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
#blazor-error-ui .dismiss {
|
#blazor-error-ui .dismiss {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 3.5rem;
|
right: 3.5rem;
|
||||||
top: 0.5rem;
|
top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blazor-error-boundary {
|
.blazor-error-boundary {
|
||||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
|
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
|
||||||
|
@ -23,6 +23,6 @@
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blazor-error-boundary::after {
|
.blazor-error-boundary::after {
|
||||||
content: "An error has occurred."
|
content: "An error has occurred."
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user