From 16adb99aba12877f243ef2944c05d3ea0fc7abc6 Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Fri, 27 Mar 2026 14:19:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E8=8F=9C=E5=8D=95=E6=BB=9A=E5=8A=A8=E6=9D=A1=E4=B8=8E?=
 =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E9=A1=B9=E6=82=AC=E6=B5=AE=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sidebar/ChatSidebar.vue      | 27 ++++++++++++++-------
 src/components/sidebar/ConversationItem.vue | 13 ++++++++--
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/sidebar/ChatSidebar.vue b/src/components/sidebar/ChatSidebar.vue
index 4ed87dc..a353d95 100644
--- a/src/components/sidebar/ChatSidebar.vue
+++ b/src/components/sidebar/ChatSidebar.vue
@@ -33,7 +33,7 @@
                 <span class="model-name">{{ model.name }}</span>
                 <span class="model-desc">{{ model.description }}</span>
               </div>
-              <Check v-if="model.id === currentModelId" :size="16" class="check-icon" />
+              <!-- <Check v-if="model.id === currentModelId" :size="16" class="check-icon" /> -->
             </button>
           </div>
         </Transition>
@@ -419,13 +419,19 @@ onBeforeUnmount(() => {
   min-width: 200px;
   max-height: 300px;
   overflow-y: auto;
-  padding: 8px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 15px;
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: 14px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
   z-index: 100;
 
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   .dark & {
     background: #1e1e2e;
     border-color: #2d2d3d;
@@ -438,7 +444,7 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 12px 14px;
+  padding: 10px;
   border: none;
   border-radius: 10px;
   background: transparent;
@@ -447,7 +453,7 @@ onBeforeUnmount(() => {
   transition: all 0.15s ease;
 
   &:hover {
-    background: #f3f4f6;
+    background: #F8F9FA;
 
     .dark & {
       background: #2d2d3d;
@@ -455,10 +461,13 @@ onBeforeUnmount(() => {
   }
 
   &.active {
-    background: rgba(59, 130, 246, 0.1);
+    background: #F8F9FA;
 
     .model-name {
-      color: #3b82f6;
+      color: var(---000F33, #000F33);
+    }
+    .model-desc{
+      color: var(--6-666666, #666);
     }
   }
 }
@@ -473,7 +482,7 @@ onBeforeUnmount(() => {
 .model-name {
   font-size: 14px;
   font-weight: 500;
-  color: #1f2937;
+  color: var(--6-666666, #666);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -485,7 +494,7 @@ onBeforeUnmount(() => {
 
 .model-desc {
   font-size: 12px;
-  color: #9ca3af;
+  color: var(--9-999999, #999);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/src/components/sidebar/ConversationItem.vue b/src/components/sidebar/ConversationItem.vue
index b722e71..3d0ed4f 100644
--- a/src/components/sidebar/ConversationItem.vue
+++ b/src/components/sidebar/ConversationItem.vue
@@ -170,6 +170,7 @@ function handleDelete() {
 
 <style lang="scss" scoped>
 .conversation-item {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -177,7 +178,6 @@ function handleDelete() {
   margin: 2px 8px;
   border-radius: 10px;
   cursor: pointer;
-  position: relative;
 
   &:hover:not(.active) {
     background: rgba(0, 0, 0, 0.05);
@@ -194,6 +194,11 @@ function handleDelete() {
     .pin-indicator {
       opacity: 0;
     }
+
+    .item-content {
+      flex: 0 1 clamp(72px, 28%, 96px);
+      max-width: clamp(72px, 28%, 96px);
+    }
   }
 
   &.active {
@@ -224,9 +229,11 @@ function handleDelete() {
 }
 
 .item-content {
-  flex: 1;
+  flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
+  max-width: 100%;
+  transition: flex-basis 0.2s ease, max-width 0.2s ease;
 }
 
 .item-title {
@@ -280,6 +287,8 @@ function handleDelete() {
 }
 
 .item-actions {
+  position: absolute;
+  right: 12px;
   display: flex;
   align-items: center;
   gap: 2px;