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-08 23:43:49 +08:00
parent 6bf583151c
commit f82c3104b5
6 changed files with 156 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
Frontend/Pages/Index.razor
View File

@ -1,5 +1,6 @@
@page "/" @page "/"
@using Frontend.Models @using Frontend.Models
@inject ILogger<Index> Logger
<Layout> <Layout>
<Sider Width="200"> <Sider Width="200">
@ -7,29 +8,50 @@
</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
View 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;
}

12
Frontend/Pages/index.razor.css
View File

@ -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;
}

75
Frontend/Shared/MessageBubble.razor
View File

@ -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>
</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> <SpaceItem>
<Avatar Icon="user" Size="2.5rem"/> <div class="bubble">
</SpaceItem> <p style="font-size: 1.1rem">
</Space> @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 { @code {

1
Frontend/Shared/MessageBubble.razor.css
View File

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

18
Frontend/wwwroot/css/site.css
View File

@ -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."
} }