add: 新建对话和切换对话功能
This commit is contained in:
parent
92b00a3477
commit
6a2068e8d1
12
Frontend/Models/Chat.cs
Normal file
12
Frontend/Models/Chat.cs
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
namespace Frontend.Models;
|
||||||
|
|
||||||
|
public class Chat
|
||||||
|
{
|
||||||
|
public Guid Guid { get; } = Guid.NewGuid();
|
||||||
|
|
||||||
|
public string Title { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
public bool Selected { get; set; }
|
||||||
|
|
||||||
|
public List<ChatMessage> Messages { get; } = new();
|
||||||
|
}
|
|
@ -1,16 +1,97 @@
|
||||||
@page "/"
|
@page "/"
|
||||||
|
@using Frontend.Models
|
||||||
|
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<Sider Width="200">
|
<Sider Width="200" Theme="SiderTheme.Light">
|
||||||
|
<div class="chat-control-zone">
|
||||||
|
<div>
|
||||||
|
<Button Type="@ButtonType.Primary" Size="large" @onclick="@CreateChatClicked">
|
||||||
|
新建对话
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div class="chat-list">
|
||||||
|
<AntList TItem="@Chat" DataSource="@_chatDictionary.Values"
|
||||||
|
Split="@false">
|
||||||
|
<ListItem OnClick="@(() => ChangeChatClicked(context.Guid))">
|
||||||
|
<ListItemMeta>
|
||||||
|
<TitleTemplate>
|
||||||
|
@if (@context.Selected)
|
||||||
|
{
|
||||||
|
<div class="selected-chat-name">
|
||||||
|
<p style="margin: 5px">@context.Title</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="chat-name">
|
||||||
|
<p style="margin: 5px">@context.Title</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</TitleTemplate>
|
||||||
|
</ListItemMeta>
|
||||||
|
</ListItem>
|
||||||
|
</AntList>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Sider>
|
</Sider>
|
||||||
|
|
||||||
<Content>
|
<Content>
|
||||||
<Chat />
|
<ChatZone Messages="@_chatDictionary[_currentGuid].Messages"/>
|
||||||
</Content>
|
</Content>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
private readonly Dictionary<Guid, Chat> _chatDictionary = new();
|
||||||
|
|
||||||
|
private Guid _currentGuid;
|
||||||
|
|
||||||
|
protected override void OnInitialized()
|
||||||
|
{
|
||||||
|
var chat = new Chat
|
||||||
|
{
|
||||||
|
Title = $"对话:{_chatDictionary.Count + 1}"
|
||||||
|
};
|
||||||
|
|
||||||
|
chat.Messages.Add(new ChatMessage
|
||||||
|
{
|
||||||
|
Sender = "凯瑟琳",
|
||||||
|
Left = true,
|
||||||
|
Text = "向着星辰和深渊!欢迎来到冒险家协会。"
|
||||||
|
});
|
||||||
|
chat.Selected = true;
|
||||||
|
|
||||||
|
_chatDictionary.Add(chat.Guid, chat);
|
||||||
|
_currentGuid = chat.Guid;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void CreateChatClicked()
|
||||||
|
{
|
||||||
|
var chat = new Chat
|
||||||
|
{
|
||||||
|
Title = $"对话:{_chatDictionary.Count + 1}"
|
||||||
|
};
|
||||||
|
|
||||||
|
chat.Messages.Add(new ChatMessage
|
||||||
|
{
|
||||||
|
Sender = "凯瑟琳",
|
||||||
|
Left = true,
|
||||||
|
Text = "向着星辰和深渊!欢迎来到冒险家协会。"
|
||||||
|
});
|
||||||
|
|
||||||
|
_chatDictionary.Add(chat.Guid, chat);
|
||||||
|
|
||||||
|
// 切换到新建的对话
|
||||||
|
_chatDictionary[_currentGuid].Selected = false;
|
||||||
|
_currentGuid = chat.Guid;
|
||||||
|
_chatDictionary[_currentGuid].Selected = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ChangeChatClicked(Guid guid)
|
||||||
|
{
|
||||||
|
_chatDictionary[_currentGuid].Selected = false;
|
||||||
|
_currentGuid = guid;
|
||||||
|
_chatDictionary[_currentGuid].Selected = true;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -0,0 +1,27 @@
|
||||||
|
.chat-control-zone {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-chat-name {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 5px 5px 5px;
|
||||||
|
padding: 5px 0 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #bcc9e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-name {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 5px 5px 5px;
|
||||||
|
padding: 5px 0 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #5d92e4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-list {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
|
@ -10,7 +10,7 @@
|
||||||
"commandName": "Project",
|
"commandName": "Project",
|
||||||
"dotnetRunMessages": true,
|
"dotnetRunMessages": true,
|
||||||
"launchBrowser": false,
|
"launchBrowser": false,
|
||||||
"applicationUrl": "http://localhost:5136",
|
"applicationUrl": "http://localhost:5163",
|
||||||
"environmentVariables": {
|
"environmentVariables": {
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
<div class="content-zone">
|
<div class="content-zone">
|
||||||
<div class="chat-zone">
|
<div class="chat-zone">
|
||||||
<AntList TItem="ChatMessage" DataSource="@_messages" Split="@false">
|
<AntList TItem="ChatMessage" DataSource="@Messages" Split="@false">
|
||||||
<ListItem>
|
<ListItem>
|
||||||
@if (context.Left)
|
@if (context.Left)
|
||||||
{
|
{
|
||||||
|
@ -46,21 +46,8 @@
|
||||||
{
|
{
|
||||||
private string MessageSending { get; set; } = string.Empty;
|
private string MessageSending { get; set; } = string.Empty;
|
||||||
|
|
||||||
private readonly List<ChatMessage> _messages = new()
|
[Parameter]
|
||||||
{
|
public List<ChatMessage> Messages { get; set; } = null!;
|
||||||
new ChatMessage
|
|
||||||
{
|
|
||||||
Sender = "凯瑟琳",
|
|
||||||
Text = "向着星辰和深渊!",
|
|
||||||
Left = true
|
|
||||||
},
|
|
||||||
new ChatMessage
|
|
||||||
{
|
|
||||||
Sender = "凯瑟琳",
|
|
||||||
Text = "欢迎来到冒险家协会。",
|
|
||||||
Left = true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
private void SendMessageClicked()
|
private void SendMessageClicked()
|
||||||
{
|
{
|
||||||
|
@ -69,7 +56,7 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
_messages.Add(new ChatMessage
|
Messages.Add(new ChatMessage
|
||||||
{
|
{
|
||||||
Left = false,
|
Left = false,
|
||||||
Sender = "旅行者",
|
Sender = "旅行者",
|
||||||
|
@ -78,7 +65,7 @@
|
||||||
|
|
||||||
MessageSending = string.Empty;
|
MessageSending = string.Empty;
|
||||||
|
|
||||||
_messages.Add(new ChatMessage
|
Messages.Add(new ChatMessage
|
||||||
{
|
{
|
||||||
Left = true,
|
Left = true,
|
||||||
Sender = "凯瑟琳",
|
Sender = "凯瑟琳",
|
|
@ -6,7 +6,7 @@
|
||||||
<Space >
|
<Space >
|
||||||
<SpaceItem>
|
<SpaceItem>
|
||||||
<p class="title-text">
|
<p class="title-text">
|
||||||
自律型可重编程客服机器人
|
试作自律型可重编程客服机器人
|
||||||
</p>
|
</p>
|
||||||
</SpaceItem>
|
</SpaceItem>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user