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

feat: 用自定义侧边栏替换聊天室 Conversations 组件，提取公共 SidebarGroup 和 date-group

Browse Source
This commit is contained in:
兰缘小妖
2026-06-04 00:46:57 +08:00
parent dc7d9e83b8
commit f67cfa84ef
18 changed files with 1042 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/web/styles.css
View File

@@ -81,25 +81,95 @@ body {
min-height: 60vh;
}
.app-chat-conversations {
.app-sidebar-list {
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-conversations-header {
.app-sidebar-list-header {
display: flex;
flex-direction: column;
gap: var(--ant-margin-sm);
padding: var(--ant-padding-sm);
border-bottom: 1px solid var(--ant-color-border-secondary);
}
.app-chat-conversations-list {
.app-sidebar-list-body {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
}
.app-sidebar-list-item {
border: none;
margin: var(--ant-margin-xxs) var(--ant-margin-xxs);
padding: var(--ant-padding-xs) var(--ant-padding-sm);
border-radius: var(--ant-border-radius-lg);
cursor: pointer;
transition: background 0.15s ease;
}
.app-sidebar-list-item:hover {
background: var(--ant-color-bg-text-hover);
}
.app-sidebar-list-item--selected {
background: var(--ant-color-primary-bg);
}
.app-sidebar-list-item--selected:hover {
background: var(--ant-color-primary-bg);
}
.app-sidebar-item-actions {
opacity: 0;
transition: opacity 0.15s ease;
}
.app-sidebar-list-item:hover .app-sidebar-item-actions {
opacity: 1;
}
.app-sidebar-group {
margin-top: var(--ant-margin-xs);
}
.app-sidebar-group-header {
display: flex;
align-items: center;
gap: var(--ant-margin-xxs);
padding: var(--ant-padding-xs) var(--ant-padding-xs);
cursor: pointer;
user-select: none;
border-radius: var(--ant-border-radius-sm);
transition: background 0.15s ease;
}
.app-sidebar-group-header:hover {
background: var(--ant-color-fill-tertiary);
}
.app-sidebar-group-arrow {
display: inline-flex;
align-items: center;
font-size: var(--ant-font-size-sm);
color: var(--ant-color-text-quaternary);
width: 14px;
}
.app-sidebar-group-label {
font-size: var(--ant-font-size-sm);
font-weight: 500;
}
.app-sidebar-group-count {
font-size: var(--ant-font-size-sm);
}
.app-chat-panel {
display: flex;
flex: 1;
@@ -255,30 +325,6 @@ body {
overflow: hidden;
}
.app-inbox-sidebar {
display: flex;
width: 280px;
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-inbox-sidebar-header {
display: flex;
flex-direction: column;
gap: var(--ant-margin-sm);
padding: var(--ant-padding-sm);
border-bottom: 1px solid var(--ant-color-border-secondary);
}
.app-inbox-list {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
}
.app-inbox-content {
display: flex;
flex: 1;
@@ -295,28 +341,24 @@ body {
/* Inbox material list items */
.material-list-item {
border-left: 3px solid transparent;
border-bottom: 1px solid var(--ant-color-border-secondary);
border: none;
margin: var(--ant-margin-xxs) var(--ant-margin-xxs);
padding: var(--ant-padding-xs) var(--ant-padding-sm);
padding-left: var(--ant-padding-sm);
border-radius: var(--ant-border-radius-lg);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.material-list-item:last-child {
border-bottom: none;
transition: background 0.15s ease;
}
.material-list-item:hover {
background: var(--ant-color-fill-tertiary);
background: var(--ant-color-bg-text-hover);
}
.material-list-item--selected {
border-left-color: var(--ant-color-primary);
background: var(--ant-color-primary-bg);
}
.material-list-item--selected:hover {
background: var(--ant-color-fill-tertiary);
background: var(--ant-color-primary-bg);
}
.material-item-right {
@@ -351,52 +393,6 @@ body {
opacity: 1;
}
.material-item-time {
display: block;
margin-top: var(--ant-margin-xxs);
font-size: var(--ant-font-size-sm);
}
.app-inbox-group {
margin-top: var(--ant-margin-xs);
}
.app-inbox-group-header {
display: flex;
align-items: center;
gap: var(--ant-margin-xxs);
padding: var(--ant-padding-xs) var(--ant-padding-xs);
cursor: pointer;
user-select: none;
border-radius: var(--ant-border-radius-sm);
transition: background 0.15s ease;
}
.app-inbox-group-header:hover {
background: var(--ant-color-fill-tertiary);
}
.app-inbox-group-arrow {
display: inline-flex;
align-items: center;
font-size: var(--ant-font-size-sm);
color: var(--ant-color-text-quaternary);
width: 14px;
}
.app-inbox-group-label {
font-size: var(--ant-font-size-sm);
font-weight: 500;
}
.app-inbox-group-count {
font-size: var(--ant-font-size-sm);
}
.app-inbox-group-content {
padding-bottom: var(--ant-padding-xs);
}
.app-inbox-filter-count {
margin-left: 4px;
font-size: var(--ant-font-size-sm);