Learning/AntSK
1
0
Fork 0
mirror of https://github.com/AIDotNet/AntSK.git synced 2026-02-17 14:06:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 ChatView 组件的样式和功能

Browse Source 
- 为 `<Image>` 组件新增 `Preview="false"` 属性，禁用头像图片预览。
- 调整输入框结构，新增 `<div class="input-bar__field">` 容器，优化布局。
- 更新 `.avatar` 样式，确保头像图片比例正确并裁剪为圆形。
- 优化 `.input-bar` 和 `.ant-input` 样式，提升输入框的视觉效果和交互体验。
- 新增 `.input-bar__field` 样式，增强输入框容器的布局和样式控制。
This commit is contained in:
zyxucp
2025-10-05 15:40:56 +08:00
parent 97548b0d2b
commit f8399887ce
1 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/AntSK/Pages/ChatPage/Components/ChatView.razor
View File

@@ -40,7 +40,7 @@
</div> </div>
</GridCol> </GridCol>
<GridCol Span="1" Class="avatar-col"> <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> </GridCol>
</GridRow> </GridRow>
} }
@@ -48,7 +48,7 @@
{ {
<GridRow Class="message-row" Gutter="(8,8)"> <GridRow Class="message-row" Gutter="(8,8)">
<GridCol Span="1" Class="avatar-col"> <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>
<GridCol Span="23"> <GridCol Span="23">
<div class="message-shell received"> <div class="message-shell received">
@@ -71,8 +71,10 @@
<Upload DefaultFileList="fileList" OnRemove="HandleFileRemove" /> <Upload DefaultFileList="fileList" OnRemove="HandleFileRemove" />
</Flex> </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> <AntDesign.Input @bind-Value="@(_messageInput)" DebounceMilliseconds="@(-1)" Placeholder="输入消息回车发送" OnPressEnter="@(async () => await OnSendAsync())" Disabled="@Sendding"></AntDesign.Input>
</div>
@if (app.EmbeddingModelID != null) @if (app.EmbeddingModelID != null)
{ {
<Upload Action="@("api/File/UploadFile")" <Upload Action="@("api/File/UploadFile")"
@@ -122,6 +124,7 @@
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-soft); box-shadow: var(--shadow-soft);
overflow: hidden;
} }
#scrollDiv { #scrollDiv {
@@ -261,22 +264,49 @@
} }
.avatar { .avatar {
width: 32px;
height: 32px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%; 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); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12) inset, 0 6px 16px rgba(15, 23, 42, 0.12);
} }
.input-bar { .input-bar {
display: flex;
align-items: center;
gap: 8px; gap: 8px;
padding: 12px; padding: 12px;
border-top: 1px solid rgba(15, 23, 42, 0.06); border-top: 1px solid rgba(15, 23, 42, 0.06);
background: var(--surface-base); background: var(--surface-base);
position: sticky; position: sticky;
bottom: 0; bottom: 0;
box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.06); box-shadow: none;
border-radius: 16px;
} }
.input-bar .ant-input { .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 */ /* markdown & code inside bubbles */