mirror of
https://github.com/AIDotNet/AntSK.git
synced 2026-02-17 22:10:14 +08:00
优化 Chat 和 ChatView 样式及布局
重构了 `Chat.razor` 和 `ChatView.razor` 的样式： - 替换内联样式为模块化 CSS 类（如 `chat-card`）。 - 优化卡片布局，新增容器类 `chat-card__content`。 - 改进滚动条样式，调整宽度、颜色和圆角。 - 为 `#chat` 添加模糊背景伪元素和阴影效果。 - 删除冗余样式规则，提升代码可维护性。
This commit is contained in:
zyxucp
@@ -10,7 +10,7 @@
|
||||
|
||||
<GridRow Gutter="(16, 16)">
|
||||
<GridCol Span="14">
|
||||
<Card Style="height:75vh;overflow: auto;">
|
||||
<Card Class="chat-card">
|
||||
<TitleTemplate>
|
||||
<Icon Type="setting" /> 选择应用
|
||||
<Select DataSource="@_list"
|
||||
@@ -23,12 +23,14 @@
|
||||
<a href="@( NavigationManager.BaseUri + "openchat/" + AppId)" target="_blank">分享使用</a>
|
||||
</TitleTemplate>
|
||||
<Body>
|
||||
@if (!string.IsNullOrEmpty(AppId))
|
||||
{
|
||||
<Watermark Content="AntSK">
|
||||
<ChatView AppId="@AppId" ShowTitle=false OnRelevantSources="OnRelevantSources"></ChatView>
|
||||
</Watermark>
|
||||
}
|
||||
<div class="chat-card__content">
|
||||
@if (!string.IsNullOrEmpty(AppId))
|
||||
{
|
||||
<Watermark Content="AntSK" Class="chat-card__watermark">
|
||||
<ChatView AppId="@AppId" ShowTitle=false OnRelevantSources="OnRelevantSources"></ChatView>
|
||||
</Watermark>
|
||||
}
|
||||
</div>
|
||||
</Body>
|
||||
</Card>
|
||||
</GridCol>
|
||||
@@ -62,13 +64,45 @@
|
||||
</GridRow>
|
||||
|
||||
<style>
|
||||
#chat {
|
||||
height: calc(75vh - 120px);
|
||||
.chat-card {
|
||||
height: 75vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.chat-card .ant-card-body {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-card__content {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.chat-card__watermark {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.chat-card__watermark > * {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
{
|
||||
<PageHeader Class="site-page-header" Title="@app.Name" Subtitle="@app.Describe" />
|
||||
}
|
||||
<div id="scrollDiv" style="flex:1; width:100%; overflow-y:auto; overflow-x:hidden; padding:16px;">
|
||||
<div id="scrollDiv" class="chat-scroll">
|
||||
<Virtualize Items="@(MessageList.OrderBy(o => o.CreateTime).ToList())" Context="item">
|
||||
@if (item.IsSend)
|
||||
{
|
||||
@@ -100,7 +100,6 @@
|
||||
--primary-color: var(--ant-primary-color, #1677ff);
|
||||
--primary-soft: rgba(22, 119, 255, 0.12);
|
||||
--bubble-recv: #ffffff;
|
||||
--bubble-sent: #dce8ff;
|
||||
--bubble-border-sent: rgba(22, 119, 255, 0.25);
|
||||
--text-primary: #1f2329;
|
||||
--text-secondary: #7a808a;
|
||||
@@ -113,32 +112,66 @@
|
||||
}
|
||||
|
||||
#chat {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-height: 65vh;
|
||||
width: 100%;
|
||||
min-height: min(65vh, 100%);
|
||||
max-height: 100%;
|
||||
background: var(--surface-base);
|
||||
border-radius: 16px;
|
||||
border-radius: 16px 16px 16px 16px;
|
||||
padding: 12px 12px 0 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-soft);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#scrollDiv {
|
||||
#chat::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
bottom: -18px;
|
||||
height: 40px;
|
||||
background: rgba(15, 23, 42, 0.22);
|
||||
filter: blur(24px);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.chat-scroll {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 12px 16px 20px;
|
||||
background: var(--surface-base);
|
||||
border-radius: 12px;
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
scroll-behavior: smooth;
|
||||
padding: 6px 8px 18px;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
}
|
||||
|
||||
/* custom scrollbar */
|
||||
#scrollDiv::-webkit-scrollbar { height: 8px; width: 8px; }
|
||||
#scrollDiv::-webkit-scrollbar-thumb { background: rgba(22, 119, 255, 0.22); border-radius: 8px; }
|
||||
#scrollDiv::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.03); }
|
||||
.chat-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.chat-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(22, 119, 255, 0.24);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.chat-scroll::-webkit-scrollbar-track {
|
||||
background: rgba(15, 23, 42, 0.05);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.message-row {
|
||||
margin-bottom: 4px;
|
||||
@@ -281,7 +314,7 @@
|
||||
background: var(--surface-base);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
box-shadow: none;
|
||||
box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.06);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
@@ -391,9 +424,14 @@
|
||||
|
||||
#chat {
|
||||
background: var(--surface-elevated);
|
||||
box-shadow: 0 28px 48px -24px rgba(0, 0, 0, 0.68);
|
||||
}
|
||||
|
||||
#scrollDiv {
|
||||
#chat::after {
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
}
|
||||
|
||||
.chat-scroll {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user