mirror of
https://github.com/AIDotNet/AntSK.git
synced 2026-02-17 14:06:11 +08:00
优化 ChatView 组件的样式和功能
- 为 `<Image>` 组件新增 `Preview="false"` 属性,禁用头像图片预览。 - 调整输入框结构,新增 `<div class="input-bar__field">` 容器,优化布局。 - 更新 `.avatar` 样式,确保头像图片比例正确并裁剪为圆形。 - 优化 `.input-bar` 和 `.ant-input` 样式,提升输入框的视觉效果和交互体验。 - 新增 `.input-bar__field` 样式,增强输入框容器的布局和样式控制。
This commit is contained in:
@@ -40,7 +40,7 @@
|
||||
</div>
|
||||
</GridCol>
|
||||
<GridCol Span="1" Class="avatar-col">
|
||||
<Image Class="avatar" Width="32px" Height="32px" Src="./assets/KDpgvguMpGfqaHPjicRK.svg" />
|
||||
<Image Class="avatar" Width="32px" Height="32px" Src="./assets/KDpgvguMpGfqaHPjicRK.svg" Preview="false" />
|
||||
</GridCol>
|
||||
</GridRow>
|
||||
}
|
||||
@@ -48,7 +48,7 @@
|
||||
{
|
||||
<GridRow Class="message-row" Gutter="(8,8)">
|
||||
<GridCol Span="1" Class="avatar-col">
|
||||
<Image Class="avatar" Width="32px" Height="32px" Src="./assets/method-draw-image.svg" />
|
||||
<Image Class="avatar" Width="32px" Height="32px" Src="./assets/method-draw-image.svg" Preview="false" />
|
||||
</GridCol>
|
||||
<GridCol Span="23">
|
||||
<div class="message-shell received">
|
||||
@@ -71,8 +71,10 @@
|
||||
<Upload DefaultFileList="fileList" OnRemove="HandleFileRemove" />
|
||||
</Flex>
|
||||
}
|
||||
<Flex Class="input-bar" Justify="end">
|
||||
<Flex Class="input-bar" Justify="end" Align="center">
|
||||
<div class="input-bar__field">
|
||||
<AntDesign.Input @bind-Value="@(_messageInput)" DebounceMilliseconds="@(-1)" Placeholder="输入消息回车发送" OnPressEnter="@(async () => await OnSendAsync())" Disabled="@Sendding"></AntDesign.Input>
|
||||
</div>
|
||||
@if (app.EmbeddingModelID != null)
|
||||
{
|
||||
<Upload Action="@("api/File/UploadFile")"
|
||||
@@ -122,6 +124,7 @@
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-soft);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#scrollDiv {
|
||||
@@ -261,22 +264,49 @@
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12) inset, 0 6px 16px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.input-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border-top: 1px solid rgba(15, 23, 42, 0.06);
|
||||
background: var(--surface-base);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.06);
|
||||
box-shadow: none;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.input-bar .ant-input {
|
||||
border-radius: 10px;
|
||||
border-radius: 999px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.input-bar__field {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-elevated);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.input-bar__field .ant-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* markdown & code inside bubbles */
|
||||
|
||||
Reference in New Issue
Block a user