From e8e7b9a2450dfa5f55ab14d550f39f7222cb94d3 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Sat, 23 Aug 2025 00:53:32 +0800
Subject: [PATCH] feat: add search drop down

---
 frontend_nuxt/assets/global.css           |  2 +-
 frontend_nuxt/components/BaseTimeline.vue |  6 +++++
 frontend_nuxt/pages/message-box/[id].vue  | 28 ++++++++++++-----------
 frontend_nuxt/pages/message-box/index.vue | 10 ++++++++
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/frontend_nuxt/assets/global.css b/frontend_nuxt/assets/global.css
index edfad14a8..4f7a3a895 100644
--- a/frontend_nuxt/assets/global.css
+++ b/frontend_nuxt/assets/global.css
@@ -18,7 +18,7 @@
   --background-color-blur: rgba(255, 255, 255, 0.57);
   --menu-border-color: lightgray;
   --normal-border-color: lightgray;
-  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
+  --menu-selected-background-color: rgba(228, 228, 228, 0.884);
   --menu-text-color: black;
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   /* --normal-background-color: rgb(241, 241, 241); */
diff --git a/frontend_nuxt/components/BaseTimeline.vue b/frontend_nuxt/components/BaseTimeline.vue
index 41d6064a2..dac7e55cf 100644
--- a/frontend_nuxt/components/BaseTimeline.vue
+++ b/frontend_nuxt/components/BaseTimeline.vue
@@ -41,6 +41,12 @@ export default {
   margin-top: 10px;
 }
 
+.timeline-item:hover {
+  background-color: var(--menu-selected-background-color);
+  transition: background-color 0.2s;
+  border-radius: 10px;
+}
+
 .timeline-icon {
   position: sticky;
   top: 0;
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index af0086974..60532f7ea 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -8,13 +8,15 @@
     </div>
 
     <div class="messages-list" ref="messagesListEl">
-      <div v-if="loading" class="loading-container">加载中...</div>
+      <div v-if="loading" class="loading-container">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      </div>
       <div v-else-if="error" class="error-container">{{ error }}</div>
       <template v-else>
         <div class="load-more-container" v-if="hasMoreMessages">
-          <button @click="loadMoreMessages" :disabled="loadingMore" class="load-more-button">
+          <div @click="loadMoreMessages" :disabled="loadingMore" class="load-more-button">
             {{ loadingMore ? '加载中...' : '查看更多消息' }}
-          </button>
+          </div>
         </div>
         <BaseTimeline :items="messages">
           <template #item="{ item }">
@@ -382,27 +384,21 @@ onUnmounted(() => {
   padding-bottom: 100px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
   margin-bottom: 10px;
 }
 
 .load-more-container {
   text-align: center;
-  margin-bottom: 20px;
 }
 
 .load-more-button {
-  background-color: var(--bg-color-soft);
-  border: 1px solid var(--border-color);
-  color: var(--text-color-primary);
-  padding: 8px 16px;
-  border-radius: 20px;
+  color: var(--primary-color);
+  font-size: 12px;
   cursor: pointer;
-  transition: background-color 0.2s;
 }
 
 .load-more-button:hover {
-  background-color: var(--border-color);
+  text-decoration: underline;
 }
 
 .message-item {
@@ -458,7 +454,13 @@ onUnmounted(() => {
   margin-right: 20px;
 }
 
-.loading-container,
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
 .error-container {
   text-align: center;
   padding: 50px;
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index c56ab4c53..9de3b0c65 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -12,7 +12,12 @@
       <div class="empty-text">暂无会话</div>
     </div>
 
+    <div v-if="!loading" class="search-container">
+      <SearchDropdown />
+    </div>
+
     <div
+      v-if="!loading"
       v-for="convo in conversations"
       :key="convo.id"
       class="conversation-item"
@@ -61,6 +66,7 @@ import { useWebSocket } from '~/composables/useWebSocket'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import TimeManager from '~/utils/time'
 import { stripMarkdownLength } from '~/utils/markdown'
+import SearchDropdown from '~/components/SearchDropdown.vue'
 
 const config = useRuntimeConfig()
 const conversations = ref([])
@@ -169,6 +175,10 @@ function goToConversation(id) {
   height: 300px;
 }
 
+.search-container {
+  margin-bottom: 24px;
+}
+
 .messages-header {
   margin-bottom: 24px;
 }