add: 美化头像和设置用户名称过程

This commit is contained in:
jackfiled 2023-10-16 14:00:03 +08:00
parent 8dfbdb02b6
commit 4c6d35421a
4 changed files with 42 additions and 4 deletions

View File

@ -5,7 +5,7 @@
<Layout>
<Sider Width="200" Theme="SiderTheme.Light">
<Sider Width="200">
<div class="chat-control-zone">
<div>
<Button Type="@ButtonType.Primary" Size="large" @onclick="@CreateChatClicked">

View File

@ -24,4 +24,5 @@
.chat-list {
overflow-y: auto;
margin-top: 40px;
}

View File

@ -41,11 +41,24 @@
</div>
</div>
</div>
<Modal Title="设置您的昵称"
Visible="@_setUsernameVisible"
OnOk="@SetUsernameOkClicked"
OnCancel="@SetUsernameCancelClicked">
<div>
<Input TValue="@string" Placeholder="用户名"
@bind-Value="@_username"
OnPressEnter="@SetUsernameOkClicked"/>
</div>
</Modal>
</div>
@code
{
private string MessageSending { get; set; } = string.Empty;
private string _username = string.Empty;
private bool _setUsernameVisible = false;
[Parameter]
public List<ChatMessage> Messages { get; set; } = null!;
@ -53,6 +66,16 @@
[Parameter]
public IChatRobot Robot { get; set; } = null!;
protected override void OnInitialized()
{
if (string.IsNullOrEmpty(_username))
{
_setUsernameVisible = true;
}
base.OnInitialized();
}
private void SendMessageClicked()
{
if (string.IsNullOrWhiteSpace(MessageSending))
@ -63,7 +86,7 @@
Messages.Add(new ChatMessage
{
Left = false,
Sender = "旅行者",
Sender = string.IsNullOrEmpty(_username) ? "default" : _username,
Text = MessageSending
});
@ -79,4 +102,14 @@
MessageSending = string.Empty;
}
private void SetUsernameOkClicked()
{
_setUsernameVisible = false;
}
private void SetUsernameCancelClicked()
{
_setUsernameVisible = false;
}
}

View File

@ -5,7 +5,9 @@
{
<Space Align="start">
<SpaceItem>
<Avatar Icon="user" Size="2.5rem"/>
<Avatar Style="background-color: #5d92e4" Size="2.5rem">
@Message.Sender.First()
</Avatar>
</SpaceItem>
<SpaceItem>
@ -37,7 +39,9 @@
</SpaceItem>
<SpaceItem>
<Avatar Icon="user" Size="2.5rem"/>
<Avatar Style="background-color: #5d92e4" Size="2.5rem">
@Message.Sender.First()
</Avatar>
</SpaceItem>
</Space>
}