feat: add search drop down

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); */

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;

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);
+  color: var(--primary-color);
-  border: 1px solid var(--border-color);
+  font-size: 12px;
-  color: var(--text-color-primary);
-  padding: 8px 16px;
-  border-radius: 20px;
   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;

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;
 }