lanyuanxiaoyao/Alfred
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): 引入 @ant-design/x 组件 — Sender/Conversations/XMarkdown 替代手动拼装

Browse Source 
- ConfigProvider → XProvider（ConsoleShell + test-utils）
- ChatSidebar → Conversations（menu dropdown + MoreOutlined trigger）
- ChatInputArea → Sender（footer 左右排版 + 模型 Select + 自动清空）
- Streamdown → XMarkdown（streaming hasNextChunk 映射 AI SDK 状态）
- CSS 清理 ~94 行废弃样式，新增统一布局规则
- 删除 streamdown 依赖
This commit is contained in:
兰缘小妖
2026-06-02 18:31:31 +08:00
parent 9c9afbd108
commit 26ecaadb26
13 changed files with 289 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/web/styles.css
View File

@@ -56,6 +56,7 @@ body {
}
.app-chat-page {
display: flex;
height: 100%;
overflow: hidden;
}
@@ -80,61 +81,15 @@ body {
min-height: 60vh;
}
.app-chat-sidebar {
.app-chat-conversations {
display: flex;
width: 260px;
flex-direction: column;
border-right: 1px solid var(--ant-color-border-secondary);
border-radius: var(--ant-border-radius-lg);
background: var(--ant-color-bg-container);
}
.app-chat-sidebar-header {
padding: var(--ant-padding-sm);
border-bottom: 1px solid var(--ant-color-border-secondary);
}
.app-chat-sidebar-list {
flex: 1;
min-height: 0;
overflow: auto;
}
.app-chat-sidebar-loading {
display: flex;
align-items: center;
justify-content: center;
padding: var(--ant-padding-xl);
}
.app-chat-sidebar-item {
cursor: pointer;
padding: var(--ant-padding-xs) var(--ant-padding-sm);
border-bottom: 1px solid var(--ant-color-border-secondary);
}
.app-chat-sidebar-item:hover {
background: var(--ant-color-bg-text-hover);
}
.app-chat-sidebar-item-active {
background: var(--ant-color-bg-text-hover);
}
.app-chat-sidebar-item-title {
flex: 1;
min-width: 0;
}
.app-chat-sidebar-item-action {
opacity: 0;
transition: opacity 0.2s;
}
.app-chat-sidebar-item:hover .app-chat-sidebar-item-action,
.app-chat-sidebar-item-active .app-chat-sidebar-item-action {
opacity: 1;
}
.app-chat-panel {
display: flex;
flex: 1;
@@ -159,14 +114,10 @@ body {
flex: 1;
}
.chat-input-area {
.chat-sender-area {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding-left: var(--ant-padding-sm);
padding-top: var(--ant-padding-sm);
border-top: 1px solid var(--ant-color-border-secondary);
margin-left: var(--ant-padding-sm);
margin-top: var(--ant-padding-sm);
}
.message-body {
@@ -186,7 +137,8 @@ body {
min-height: 0;
overflow: auto;
overflow-anchor: auto;
padding-left: var(--ant-padding-sm);
margin-left: var(--ant-padding-sm);
border-radius: var(--ant-border-radius-lg);
scroll-behavior: smooth;
}
@@ -194,10 +146,6 @@ body {
padding: 8px;
}
.chat-textarea {
flex: 1;
}
.message-body-text {
margin-bottom: 0;
}
@@ -244,6 +192,10 @@ body {
width: 180px;
}
.chat-sender-box {
background: var(--ant-color-bg-container);
}
.card-extra-actions .btn-dimmed {
color: var(--ant-color-text-quaternary);
}
@@ -264,35 +216,6 @@ body {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
[data-streamdown="code-block-actions"] {
gap: 4px;
}
[data-streamdown="code-block-actions"] button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 6px;
border-radius: var(--ant-border-radius-sm);
border: 1px solid var(--ant-color-border-secondary);
background: var(--ant-color-bg-container);
color: var(--ant-color-text-secondary);
font-size: 12px;
transition: all 0.2s;
}
[data-streamdown="code-block-actions"] button:hover {
color: var(--ant-color-primary);
border-color: var(--ant-color-primary);
}
[data-streamdown="code-block-actions"] button svg {
width: 14px;
height: 14px;
}
.app-page-flex {
flex: 1;
}