feat(chat): 会话侧栏全面美化(墨玉主题:药丸tab+圆角会话卡+今日红点+玉绿高亮)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -102,45 +102,145 @@ watch(() => [props.ownerId, props.channel] as const, load, { immediate: true })
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.yk-chat-side { display: flex; flex-direction: column; height: 100%; width: 260px; border-right: 1px solid var(--el-border-color-light); background: #fff; }
|
||||
.yk-chat-side__top { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--el-border-color-lighter); }
|
||||
.yk-chat-side__list { flex: 1; overflow-y: auto; }
|
||||
.yk-chat-side__item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
|
||||
.yk-chat-side__item:hover { background: #f5f7fa; }
|
||||
.yk-chat-side__item.is-active { background: #ecf5ff; }
|
||||
.yk-chat-side__meta { min-width: 0; flex: 1; }
|
||||
.yk-chat-side__name { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: #303133; }
|
||||
.yk-chat-side__today { font-size: 11px; color: #909399; flex-shrink: 0; }
|
||||
.yk-chat-side__time { font-size: 11px; color: #c0c4cc; margin-top: 2px; }
|
||||
/* ══ 聊天会话侧栏(墨玉主题 2026-08-25) ══ */
|
||||
.yk-chat-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 280px;
|
||||
border-right: none;
|
||||
background:
|
||||
radial-gradient(circle at 1px 1px, rgba(23,29,43,.03) 1px, transparent 0) 0 0/18px 18px,
|
||||
linear-gradient(180deg, #fafbfd 0%, #f6f8fa 100%);
|
||||
position: relative;
|
||||
}
|
||||
.yk-chat-side::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(13,159,110,.12) 20%, rgba(23,29,43,.06) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── 顶部区(tab + 搜索) ── */
|
||||
.yk-chat-side__top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 12px 8px;
|
||||
background: rgba(255,255,255,.85);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid rgba(23,29,43,.05);
|
||||
}
|
||||
|
||||
/* tab 按钮 */
|
||||
.yk-chat-side__tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: 6px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
gap: 4px;
|
||||
margin-bottom: 0;
|
||||
background: rgba(23,29,43,.04);
|
||||
border-radius: 10px;
|
||||
padding: 3px;
|
||||
}
|
||||
.yk-chat-side__tab {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
padding: 7px 10px;
|
||||
font-size: 13px;
|
||||
color: #5a6472;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
transition: all 0.2s cubic-bezier(.22,.8,.36,1);
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.yk-chat-side__tab.is-active {
|
||||
color: var(--el-color-primary);
|
||||
border-bottom-color: var(--el-color-primary);
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 1px 3px rgba(23,29,43,.08), 0 2px 8px -2px rgba(13,159,110,.15);
|
||||
}
|
||||
.yk-chat-side__tab:hover {
|
||||
color: var(--el-color-primary);
|
||||
.yk-chat-side__tab:hover:not(.is-active) {
|
||||
color: #2b3240;
|
||||
background: rgba(255,255,255,.6);
|
||||
}
|
||||
.yk-chat-side__count {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
margin-left: 2px;
|
||||
color: #8a94a4;
|
||||
margin-left: 3px;
|
||||
background: rgba(23,29,43,.06);
|
||||
padding: 0 5px;
|
||||
border-radius: 8px;
|
||||
line-height: 17px;
|
||||
}
|
||||
.yk-chat-side__tab.is-active .yk-chat-side__count {
|
||||
color: var(--el-color-primary);
|
||||
background: rgba(13,159,110,.1);
|
||||
}
|
||||
|
||||
/* ── 会话列表 ── */
|
||||
.yk-chat-side__list { flex: 1; overflow-y: auto; padding: 6px; }
|
||||
|
||||
.yk-chat-side__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 2px;
|
||||
transition: background 0.15s ease, box-shadow 0.15s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.yk-chat-side__item:hover {
|
||||
background: rgba(255,255,255,.8);
|
||||
box-shadow: 0 1px 4px rgba(23,29,43,.04);
|
||||
}
|
||||
.yk-chat-side__item.is-active {
|
||||
background: #fff;
|
||||
border-color: rgba(13,159,110,.15);
|
||||
box-shadow: 0 2px 8px -2px rgba(13,159,110,.15);
|
||||
}
|
||||
.yk-chat-side__item.is-active .yk-chat-side__name span:first-child {
|
||||
color: var(--el-color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
.yk-chat-side__item .el-avatar {
|
||||
flex: none;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(23,29,43,.05);
|
||||
box-shadow: 0 1px 3px rgba(23,29,43,.06);
|
||||
}
|
||||
|
||||
/* 文字信息 */
|
||||
.yk-chat-side__meta { min-width: 0; flex: 1; }
|
||||
.yk-chat-side__name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
font-size: 13.5px;
|
||||
color: #2b3240;
|
||||
}
|
||||
.yk-chat-side__today {
|
||||
font-size: 10.5px;
|
||||
color: #fff;
|
||||
background: #f56c6c;
|
||||
padding: 0 5px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
line-height: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.yk-chat-side__time {
|
||||
font-size: 11px;
|
||||
color: #8a94a4;
|
||||
margin-top: 3px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user