kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: 调整聊天组件和消息组件的样式，优化视觉效果

Browse Source 
- 在 AgentMessageComponent.vue 中更新了 Markdown 预览的颜色和字体大小，增强了文本的可读性。
- 在 ChatSidebarComponent.vue 中修改了对话列表的内边距和按钮样式，提升了整体界面的美观性和一致性。
This commit is contained in:
Wenjie Zhang 2025-06-25 02:12:29 +08:00
parent 5000afc3ca
commit 5aebc248c3
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/AgentMessageComponent.vue
View File

@ -479,34 +479,38 @@ const toggleToolCall = (toolCallId) => {
} }
.message-md .md-editor-preview-wrapper { .message-md .md-editor-preview-wrapper {
color: var(--gray-900);
max-width: 100%; max-width: 100%;
padding: 0; padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'Courier New', monospace; font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'Courier New', monospace;
#preview-only-preview { #preview-only-preview {
font-size: 15px; font-size: 15px;
color: var(--gray-900);
} }
h1, h2 { h1, h2 {
font-size: 1.2rem; font-size: 16px;
} }
h3, h4 { h3, h4 {
font-size: 1.1rem; font-size: 16px;
} }
h5, h6 { h5, h6 {
font-size: 1rem; font-size: 15px;
} }
// li > p, ol > p, ul > p { strong {
// margin: 0.25rem 0; font-weight: 600;
// } }
// ol, ul { li > p, ol > p, ul > p {
// padding-left: 1rem; margin: 0.25rem 0;
// } }
ol, ul {
padding-left: 1rem;
}
cite { cite {
font-size: 12px; font-size: 12px;

8
web/src/components/ChatSidebarComponent.vue
View File

@ -205,14 +205,14 @@ const toggleCollapse = () => {
} }
.conversation-list-top { .conversation-list-top {
padding: 16px; padding: 10px;
.new-chat-btn { .new-chat-btn {
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
height: fit-content; height: fit-content;
border-radius: 16px; border-radius: 8px;
background-color: var(--gray-300); background-color: var(--gray-200);
color: var(--main-color); color: var(--main-color);
border: none; border: none;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -233,7 +233,7 @@ const toggleCollapse = () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 4px 16px; padding: 4px 0px 4px 12px;
border-radius: 8px; border-radius: 8px;
margin-bottom: 8px; margin-bottom: 8px;
cursor: pointer; cursor: pointer;