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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.idea/.idea.Katheryne/.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

3
Frontend/MainLayout.razor
View File

@ -1,3 +0,0 @@
@inherits LayoutComponentBase
<main> @Body </main>

10
Frontend/Models/ChatMessage.cs Normal file
View File

@ -0,0 +1,10 @@
namespace Frontend.Models;
public class ChatMessage
{
public required string Sender { get; init; }
public required string Text { get; init; }
public required bool Left { get; init; }
}

54
Frontend/Pages/Index.razor
View File

@ -1,3 +1,55 @@
@page "/"
@using Frontend.Models
<h1>Hello, world!</h1>
<Layout>
<Sider Width="200">
</Sider>
<Content>
<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>
</Content>
</Layout>
@code
{
private readonly List<ChatMessage> _messages = new()
{
new ChatMessage
{
Sender = "凯瑟琳",
Text = "向着星辰和深渊！",
Left = true
},
new ChatMessage
{
Sender = "凯瑟琳",
Text = "欢迎来到冒险家协会。",
Left = true
},
new ChatMessage
{
Sender = "旅行者",
Text = "领取每日委托奖励。",
Left = false
}
};
}

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

@ -0,0 +1,12 @@
.chat-column {
margin-left: auto;
}
.chat-zone {
min-width: inherit;
background: linear-gradient(180deg,
#f5f4f6,
#b5bddf);
min-height: calc(100vh - 64px);
padding: 20px;
}

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

3
Frontend/_Imports.razor
View File

@ -2,4 +2,5 @@
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using AntDesign
@using Frontend
@using Frontend
@using Frontend.Shared