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 "/"
|
||||
@using Frontend.Models
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<Content>
|
||||
<Chat />
|
||||
<ChatZone Messages="@_chatDictionary[_currentGuid].Messages"/>
|
||||
</Content>
|
||||
</Layout>
|
||||
|
||||
@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",
|
||||
"dotnetRunMessages": true,
|
||||
"launchBrowser": false,
|
||||
"applicationUrl": "http://localhost:5136",
|
||||
"applicationUrl": "http://localhost:5163",
|
||||
"environmentVariables": {
|
||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<div class="content-zone">
|
||||
<div class="chat-zone">
|
||||
<AntList TItem="ChatMessage" DataSource="@_messages" Split="@false">
|
||||
<AntList TItem="ChatMessage" DataSource="@Messages" Split="@false">
|
||||
<ListItem>
|
||||
@if (context.Left)
|
||||
{
|
||||
|
@ -46,21 +46,8 @@
|
|||
{
|
||||
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
|
||||
}
|
||||
};
|
||||
[Parameter]
|
||||
public List<ChatMessage> Messages { get; set; } = null!;
|
||||
|
||||
private void SendMessageClicked()
|
||||
{
|
||||
|
@ -69,7 +56,7 @@
|
|||
return;
|
||||
}
|
||||
|
||||
_messages.Add(new ChatMessage
|
||||
Messages.Add(new ChatMessage
|
||||
{
|
||||
Left = false,
|
||||
Sender = "旅行者",
|
||||
|
@ -78,7 +65,7 @@
|
|||
|
||||
MessageSending = string.Empty;
|
||||
|
||||
_messages.Add(new ChatMessage
|
||||
Messages.Add(new ChatMessage
|
||||
{
|
||||
Left = true,
|
||||
Sender = "凯瑟琳",
|
|
@ -6,7 +6,7 @@
|
|||
<Space >
|
||||
<SpaceItem>
|
||||
<p class="title-text">
|
||||
自律型可重编程客服机器人
|
||||
试作自律型可重编程客服机器人
|
||||
</p>
|
||||
</SpaceItem>
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user