From d4deb769e5bc40bed132e2e3b1451064441e8966 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Tue, 25 Aug 2026 09:43:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E4=BC=9A=E8=AF=9D=E4=BE=A7?=
 =?UTF-8?q?=E6=A0=8F=E5=85=A8=E9=9D=A2=E7=BE=8E=E5=8C=96(=E5=A2=A8?=
 =?UTF-8?q?=E7=8E=89=E4=B8=BB=E9=A2=98:=E8=8D=AF=E4=B8=B8tab+=E5=9C=86?=
 =?UTF-8?q?=E8=A7=92=E4=BC=9A=E8=AF=9D=E5=8D=A1+=E4=BB=8A=E6=97=A5?=
 =?UTF-8?q?=E7=BA=A2=E7=82=B9+=E7=8E=89=E7=BB=BF=E9=AB=98=E4=BA=AE)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude <noreply@anthropic.com>
---
 yunkes/src/components/ChatSidebar.vue | 142 ++++++++++++++++++++++----
 1 file changed, 121 insertions(+), 21 deletions(-)

diff --git a/yunkes/src/components/ChatSidebar.vue b/yunkes/src/components/ChatSidebar.vue
index e109e1c..4bf8734 100644
--- a/yunkes/src/components/ChatSidebar.vue
+++ b/yunkes/src/components/ChatSidebar.vue
@@ -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>