Merge pull request #536 from sugarforever/improve/highlight-active-se…

…ssion-item 会话列表增强当前会话高亮识别度
sugarforever · Jun 28, 2024 · fce6e8f · fce6e8f
2 parents 9401d25 + 453aafe
commit fce6e8f
Showing 1 changed file with 9 additions and 17 deletions.
diff --git a/components/ChatSessionList.vue b/components/ChatSessionList.vue
@@ -120,19 +120,23 @@ async function updateSessionInfo(data: Partial<Omit<ChatSession, 'id' | 'createT
     </div>
     <TransitionGroup tag="div" name="list" class="h-[calc(100%-57px)] overflow-auto">
       <div v-for="item in sessionList" :key="item.id"
-           class="session-item relative box-border p-2 cursor-pointer dark:text-gray-300 border-b border-gray-100 dark:border-gray-100/5"
-           :class="item.isTop ? 'bg-primary-300/10 dark:bg-primary-800/10' : 'hover:bg-gray-50 dark:hover:bg-gray-700/30'"
+           class="session-item relative box-border p-2 cursor-pointer dark:text-gray-300 border-b border-b-gray-100 dark:border-b-gray-100/5 border-l-2"
+           :class="[
+            item.isTop ? 'bg-primary-300/10 dark:bg-primary-800/10' : 'hover:bg-gray-50 dark:hover:bg-gray-700/30',
+            currentSessionId === item.id ? 'border-l-pink-700/80 dark:border-l-pink-400/80' : 'border-l-transparent'
+          ]"
            @click="onSelectChat(item.id!)">
         <div class="w-full flex items-center text-sm h-[32px]">
-          <div class="line-clamp-1 grow opacity-80"
-               :class="currentSessionId === item.id ? 'text-pink-700  dark:text-pink-400 font-bold' : 'opacity-80'">{{ item.title || `${t("chat.newChat")} ${item.id}` }}</div>
+          <div class="line-clamp-1 grow"
+               :class="currentSessionId === item.id ? 'text-pink-700  dark:text-pink-400 font-bold' : 'opacity-80'">
+            {{ item.title || `${t("chat.newChat")} ${item.id}` }}
+          </div>
           <ChatSessionListActionMore :data="item"
                                      class="action-more"
                                      @pin="onTopChat(item, 'up')"
                                      @unpin="onTopChat(item, 'down')"
                                      @delete="onDeleteChat(item)" />
         </div>
-        <div v-if="item.isTop" class="triangle"></div>
       </div>
     </TransitionGroup>
   </Component>
@@ -156,18 +160,6 @@ async function updateSessionInfo(data: Partial<Omit<ChatSession, 'id' | 'createT
   }
 }
 
-.triangle {
-  $size: 6px;
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: -$size;
-  left: -$size;
-  border: $size solid transparent;
-  border-top-color: rgba(var(--color-primary-500) / 0.6);
-  transform: rotate(135deg);
-}
-
 .list-enter-active,
 .list-leave-active {
   transform-origin: left center;