diff --git a/src/renderer/src/components/ChatView.vue b/src/renderer/src/components/ChatView.vue
index 428a75923..e527be4c5 100644
--- a/src/renderer/src/components/ChatView.vue
+++ b/src/renderer/src/components/ChatView.vue
@@ -112,4 +112,8 @@ onUnmounted(async () => {
   window.electron.ipcRenderer.removeAllListeners(STREAM_EVENTS.END)
   window.electron.ipcRenderer.removeAllListeners(STREAM_EVENTS.ERROR)
 })
+
+defineExpose({
+  messageList
+})
 </script>
diff --git a/src/renderer/src/components/MessageNavigationSidebar.vue b/src/renderer/src/components/MessageNavigationSidebar.vue
new file mode 100644
index 000000000..b76ad6732
--- /dev/null
+++ b/src/renderer/src/components/MessageNavigationSidebar.vue
@@ -0,0 +1,253 @@
+<template>
+  <div
+    class="message-navigation-sidebar h-full w-full bg-background border-l border-border flex flex-col"
+  >
+    <!-- 头部 -->
+    <div class="flex items-center justify-between p-4 border-b border-border">
+      <h3 class="text-sm font-medium text-foreground">{{ t('chat.navigation.title') }}</h3>
+      <Button variant="ghost" size="icon" class="h-6 w-6" @click="$emit('close')">
+        <Icon icon="lucide:x" class="h-4 w-4" />
+      </Button>
+    </div>
+
+    <!-- 搜索框 -->
+    <div class="p-4 border-b border-border">
+      <div class="relative">
+        <Icon
+          icon="lucide:search"
+          class="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"
+        />
+        <Input
+          v-model="searchQuery"
+          :placeholder="t('chat.navigation.searchPlaceholder')"
+          class="pl-10 pr-8 h-8 text-sm"
+        />
+        <Button
+          v-if="searchQuery.trim()"
+          variant="ghost"
+          size="icon"
+          class="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6"
+          @click="searchQuery = ''"
+        >
+          <Icon icon="lucide:x" class="h-3 w-3" />
+        </Button>
+      </div>
+
+      <!-- 搜索结果计数 -->
+      <div v-if="searchQuery.trim()" class="mt-2 text-xs text-muted-foreground">
+        {{
+          t('chat.navigation.searchResults', {
+            count: filteredMessages.length,
+            total: messages.length
+          })
+        }}
+      </div>
+    </div>
+
+    <!-- 消息列表 -->
+    <div class="flex-1 overflow-y-auto">
+      <div class="p-2 space-y-1">
+        <div
+          v-for="(message, index) in filteredMessages"
+          :key="message.id"
+          class="message-nav-item p-3 rounded-lg cursor-pointer transition-colors hover:bg-accent/50"
+          :class="{
+            'bg-accent': activeMessageId === message.id,
+            'border-l-2 border-primary': activeMessageId === message.id
+          }"
+          @click="scrollToMessage(message.id)"
+        >
+          <div class="flex items-center justify-between mb-2">
+            <div class="flex items-center gap-2">
+              <div class="flex-shrink-0">
+                <div
+                  v-if="message.role === 'assistant'"
+                  class="w-4 h-4 flex items-center justify-center bg-base-900/5 dark:bg-base-100/10 border border-input rounded-sm"
+                >
+                  <ModelIcon
+                    :model-id="message.model_provider || 'default'"
+                    class="w-2.5 h-2.5"
+                    :is-dark="themeStore.isDark"
+                  />
+                </div>
+                <div v-else class="w-4 h-4 bg-muted rounded-sm flex items-center justify-center">
+                  <Icon icon="lucide:user" class="w-2.5 h-2.5 text-muted-foreground" />
+                </div>
+              </div>
+
+              <span class="text-xs text-muted-foreground font-mono"> #{{ index + 1 }} </span>
+            </div>
+
+            <span class="text-xs text-muted-foreground">
+              {{ formatTime(message.timestamp) }}
+            </span>
+          </div>
+
+          <div class="text-sm text-foreground/80 line-clamp-2">
+            <span v-html="highlightSearchQuery(getMessagePreview(message))"></span>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="filteredMessages.length === 0"
+        class="flex flex-col items-center justify-center h-32 text-muted-foreground"
+      >
+        <Icon icon="lucide:message-circle" class="h-8 w-8 mb-2" />
+        <p class="text-sm">
+          {{ searchQuery ? t('chat.navigation.noResults') : t('chat.navigation.noMessages') }}
+        </p>
+      </div>
+    </div>
+
+    <div class="p-4 border-t border-border">
+      <div class="text-xs text-muted-foreground text-center">
+        {{ t('chat.navigation.totalMessages', { count: messages.length }) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Icon } from '@iconify/vue'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/stores/theme'
+import ModelIcon from '@/components/icons/ModelIcon.vue'
+import type { Message } from '@shared/chat'
+
+interface Props {
+  messages: Message[]
+  isOpen: boolean
+  activeMessageId?: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  close: []
+  scrollToMessage: [messageId: string]
+}>()
+
+const { t } = useI18n()
+const themeStore = useThemeStore()
+
+const searchQuery = ref('')
+
+// 获取消息完整内容用于搜索
+const getFullMessageContent = (message: Message): string => {
+  if (message.role === 'user') {
+    const userContent = message.content as import('@shared/chat').UserMessageContent
+    return userContent.text || ''
+  } else if (message.role === 'assistant') {
+    const assistantContent = message.content as import('@shared/chat').AssistantMessageBlock[]
+    return assistantContent
+      .filter((block: import('@shared/chat').AssistantMessageBlock) => block.type === 'content')
+      .map((block: import('@shared/chat').AssistantMessageBlock) => block.content || '')
+      .join(' ')
+  }
+  return ''
+}
+
+// 获取搜索匹配的上下文
+const getSearchContext = (content: string, query: string, contextLength: number = 30): string => {
+  const lowerContent = content.toLowerCase()
+  const lowerQuery = query.toLowerCase()
+  const matchIndex = lowerContent.indexOf(lowerQuery)
+  if (matchIndex === -1) return content.slice(0, 100)
+  const start = Math.max(0, matchIndex - contextLength)
+  const end = Math.min(content.length, matchIndex + query.length + contextLength)
+  let result = content.slice(start, end)
+  if (start > 0) result = '...' + result
+  if (end < content.length) result = result + '...'
+  return result
+}
+
+// 过滤消息
+const filteredMessages = computed(() => {
+  if (!searchQuery.value.trim()) {
+    return props.messages
+  }
+  const query = searchQuery.value.toLowerCase()
+  return props.messages.filter((message) => {
+    const fullContent = getFullMessageContent(message).toLowerCase()
+    return fullContent.includes(query)
+  })
+})
+
+// 获取消息预览文本
+const getMessagePreview = (message: Message): string => {
+  const fullContent = getFullMessageContent(message)
+  if (!fullContent) {
+    if (message.role === 'user') {
+      return t('chat.navigation.userMessage')
+    } else if (message.role === 'assistant') {
+      return t('chat.navigation.assistantMessage')
+    }
+    return t('chat.navigation.unknownMessage')
+  }
+  // 如果有搜索查询，显示搜索上下文
+  if (searchQuery.value.trim()) {
+    return getSearchContext(fullContent, searchQuery.value)
+  }
+  return fullContent.slice(0, 100) + (fullContent.length > 100 ? '...' : '')
+}
+
+// 格式化时间
+const formatTime = (timestamp: number): string => {
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
+    return date.toLocaleTimeString('zh-CN', {
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+  return date.toLocaleDateString('zh-CN', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// 高亮搜索关键词
+const highlightSearchQuery = (text: string): string => {
+  if (!searchQuery.value.trim()) {
+    return text
+  }
+
+  const query = searchQuery.value.trim()
+  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
+  return text.replace(
+    regex,
+    '<mark class="bg-yellow-200 dark:bg-yellow-800 px-1 rounded">$1</mark>'
+  )
+}
+
+// 滚动到指定消息
+const scrollToMessage = (messageId: string) => {
+  emit('scrollToMessage', messageId)
+}
+</script>
+
+<style scoped>
+.message-nav-item {
+  transition: all 0.2s ease;
+}
+
+.message-nav-item:hover {
+  transform: translateX(2px);
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
diff --git a/src/renderer/src/components/ThreadsView.vue b/src/renderer/src/components/ThreadsView.vue
index c3a885be0..6bf3cabbb 100644
--- a/src/renderer/src/components/ThreadsView.vue
+++ b/src/renderer/src/components/ThreadsView.vue
@@ -215,6 +215,7 @@ const createNewThread = async () => {
   try {
     await chatStore.createNewEmptyThread()
     chatStore.isSidebarOpen = false
+    chatStore.isMessageNavigationOpen = false
   } catch (error) {
     console.error(t('common.error.createChatFailed'), error)
   }
@@ -226,6 +227,7 @@ const handleThreadSelect = async (thread: CONVERSATION) => {
     await chatStore.setActiveThread(thread.id)
     if (windowSize.width.value < 1024) {
       chatStore.isSidebarOpen = false
+      chatStore.isMessageNavigationOpen = false
     }
   } catch (error) {
     console.error(t('common.error.selectChatFailed'), error)
diff --git a/src/renderer/src/components/TitleView.vue b/src/renderer/src/components/TitleView.vue
index 7faf7fb6e..62ce911f0 100644
--- a/src/renderer/src/components/TitleView.vue
+++ b/src/renderer/src/components/TitleView.vue
@@ -43,6 +43,20 @@
     </div>
 
     <div class="flex items-center gap-2">
+      <!-- 消息导航按钮 -->
+      <Button
+        class="w-7 h-7 rounded-md relative !p-0"
+        size="icon"
+        variant="outline"
+        :class="{ 'bg-accent': chatStore.isMessageNavigationOpen }"
+        @click="chatStore.isMessageNavigationOpen = !chatStore.isMessageNavigationOpen"
+      >
+        <Icon
+          icon="lucide:list"
+          class="w-4 h-4 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        />
+      </Button>
+
       <ScrollablePopover align="end" content-class="w-80" :enable-scrollable="true">
         <template #trigger>
           <Button class="w-7 h-7 rounded-md" size="icon" variant="outline">
diff --git a/src/renderer/src/components/message/MessageList.vue b/src/renderer/src/components/message/MessageList.vue
index 42b14bf3d..85201f325 100644
--- a/src/renderer/src/components/message/MessageList.vue
+++ b/src/renderer/src/components/message/MessageList.vue
@@ -275,6 +275,27 @@ const scrollToBottom = () => {
   })
 }
 
+/**
+ * 滚动到指定消息
+ */
+const scrollToMessage = (messageId: string) => {
+  nextTick(() => {
+    const messageElement = document.querySelector(`[data-message-id="${messageId}"]`)
+    if (messageElement) {
+      messageElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      })
+
+      // 添加高亮效果
+      messageElement.classList.add('message-highlight')
+      setTimeout(() => {
+        messageElement.classList.remove('message-highlight')
+      }, 2000)
+    }
+  })
+}
+
 onMounted(() => {
   // 获取应用版本
   devicePresenter.getAppVersion().then((version) => {
@@ -369,6 +390,19 @@ const createNewThread = async () => {
 }
 defineExpose({
   scrollToBottom,
+  scrollToMessage,
   aboveThreshold
 })
 </script>
+
+<style scoped>
+.message-highlight {
+  background-color: rgba(59, 130, 246, 0.1);
+  border-left: 3px solid rgb(59, 130, 246);
+  transition: all 0.3s ease;
+}
+
+.dark .message-highlight {
+  background-color: rgba(59, 130, 246, 0.15);
+}
+</style>
diff --git a/src/renderer/src/i18n/en-US/chat.json b/src/renderer/src/i18n/en-US/chat.json
index d647a1773..45a531a58 100644
--- a/src/renderer/src/i18n/en-US/chat.json
+++ b/src/renderer/src/i18n/en-US/chat.json
@@ -54,5 +54,16 @@
   "notify": {
     "generationComplete": "Generation is complete",
     "generationError": "Generation failed"
+  },
+  "navigation": {
+    "title": "Message Navigation",
+    "searchPlaceholder": "Search messages...",
+    "noResults": "No matching messages found",
+    "noMessages": "No messages yet",
+    "totalMessages": "{count} messages total",
+    "searchResults": "Found {count} results in {total} messages",
+    "userMessage": "User message",
+    "assistantMessage": "Assistant reply",
+    "unknownMessage": "Unknown message"
   }
 }
diff --git a/src/renderer/src/i18n/fa-IR/chat.json b/src/renderer/src/i18n/fa-IR/chat.json
index a409eb803..475f0ae3c 100644
--- a/src/renderer/src/i18n/fa-IR/chat.json
+++ b/src/renderer/src/i18n/fa-IR/chat.json
@@ -54,5 +54,16 @@
   "notify": {
     "generationComplete": "ساخت تکمیل شد",
     "generationError": "ساخت ناموفق بود"
+  },
+  "navigation": {
+    "title": "ناوبری پیام‌ها",
+    "searchPlaceholder": "جستجوی پیام‌ها...",
+    "noResults": "پیام منطبق پیدا نشد",
+    "noMessages": "هنوز پیامی وجود ندارد",
+    "totalMessages": "مجموع {count} پیام",
+    "searchResults": "{count} نتیجه از {total} پیام پیدا شد",
+    "userMessage": "پیام کاربر",
+    "assistantMessage": "پاسخ دستیار",
+    "unknownMessage": "پیام ناشناخته"
   }
 }
diff --git a/src/renderer/src/i18n/fr-FR/chat.json b/src/renderer/src/i18n/fr-FR/chat.json
index d4862eb53..a84b59549 100644
--- a/src/renderer/src/i18n/fr-FR/chat.json
+++ b/src/renderer/src/i18n/fr-FR/chat.json
@@ -54,5 +54,16 @@
   "notify": {
     "generationComplete": "La génération est complète",
     "generationError": "Échec de la génération"
+  },
+  "navigation": {
+    "title": "Navigation des messages",
+    "searchPlaceholder": "Rechercher des messages...",
+    "noResults": "Aucun message correspondant trouvé",
+    "noMessages": "Aucun message pour le moment",
+    "totalMessages": "{count} messages au total",
+    "searchResults": "{count} résultats trouvés sur {total} messages",
+    "userMessage": "Message utilisateur",
+    "assistantMessage": "Réponse de l'assistant",
+    "unknownMessage": "Message inconnu"
   }
 }
diff --git a/src/renderer/src/i18n/ja-JP/chat.json b/src/renderer/src/i18n/ja-JP/chat.json
index ac16dd5c1..9e5807348 100644
--- a/src/renderer/src/i18n/ja-JP/chat.json
+++ b/src/renderer/src/i18n/ja-JP/chat.json
@@ -54,5 +54,16 @@
   "notify": {
     "generationComplete": "生成完了",
     "generationError": "生成失敗"
+  },
+  "navigation": {
+    "title": "メッセージナビゲーション",
+    "searchPlaceholder": "メッセージを検索...",
+    "noResults": "一致するメッセージが見つかりません",
+    "noMessages": "まだメッセージはありません",
+    "totalMessages": "合計 {count} 件のメッセージ",
+    "searchResults": "{total} 件中 {count} 件の結果を表示",
+    "userMessage": "ユーザーメッセージ",
+    "assistantMessage": "アシスタントの返信",
+    "unknownMessage": "不明なメッセージ"
   }
 }
diff --git a/src/renderer/src/i18n/ko-KR/chat.json b/src/renderer/src/i18n/ko-KR/chat.json
index b953e4bd4..9c5b8d389 100644
--- a/src/renderer/src/i18n/ko-KR/chat.json
+++ b/src/renderer/src/i18n/ko-KR/chat.json
@@ -54,5 +54,16 @@
   "notify": {
     "generationComplete": "생성이 완료되었습니다",
     "generationError": "생성에 실패했습니다"
+  },
+  "navigation": {
+    "title": "메시지 내비게이션",
+    "searchPlaceholder": "메시지 검색...",
+    "noResults": "일치하는 메시지를 찾을 수 없습니다",
+    "noMessages": "아직 메시지가 없습니다",
+    "totalMessages": "총 {count}개의 메시지",
+    "searchResults": "{total}개 중 {count}개의 결과를 찾았습니다",
+    "userMessage": "사용자 메시지",
+    "assistantMessage": "어시스턴트 답변",
+    "unknownMessage": "알 수 없는 메시지"
   }
 }
diff --git a/src/renderer/src/i18n/ru-RU/chat.json b/src/renderer/src/i18n/ru-RU/chat.json
index 8160f9f91..a88492158 100644
--- a/src/renderer/src/i18n/ru-RU/chat.json
+++ b/src/renderer/src/i18n/ru-RU/chat.json
@@ -54,5 +54,16 @@
   "notify": {
     "generationComplete": "Поколение завершено",
     "generationError": "Поколение не удалось"
+  },
+  "navigation": {
+    "title": "Навигация по сообщениям",
+    "searchPlaceholder": "Поиск сообщений...",
+    "noResults": "Подходящих сообщений не найдено",
+    "noMessages": "Пока сообщений нет",
+    "totalMessages": "Всего {count} сообщений",
+    "searchResults": "Найдено {count} результатов из {total} сообщений",
+    "userMessage": "Сообщение пользователя",
+    "assistantMessage": "Ответ ассистента",
+    "unknownMessage": "Неизвестное сообщение"
   }
 }
diff --git a/src/renderer/src/i18n/zh-CN/chat.json b/src/renderer/src/i18n/zh-CN/chat.json
index de273873b..669ab539d 100644
--- a/src/renderer/src/i18n/zh-CN/chat.json
+++ b/src/renderer/src/i18n/zh-CN/chat.json
@@ -54,5 +54,16 @@
   "notify": {
     "generationComplete": "生成完毕",
     "generationError": "生成失败"
+  },
+  "navigation": {
+    "title": "消息导航",
+    "searchPlaceholder": "搜索消息...",
+    "noResults": "没有找到匹配的消息",
+    "noMessages": "暂无消息",
+    "totalMessages": "共 {count} 条消息",
+    "searchResults": "找到 {count} 条结果，共 {total} 条消息",
+    "userMessage": "用户消息",
+    "assistantMessage": "助手回复",
+    "unknownMessage": "未知消息"
   }
 }
diff --git a/src/renderer/src/i18n/zh-HK/chat.json b/src/renderer/src/i18n/zh-HK/chat.json
index cdbfda96e..760828935 100644
--- a/src/renderer/src/i18n/zh-HK/chat.json
+++ b/src/renderer/src/i18n/zh-HK/chat.json
@@ -54,5 +54,16 @@
   "notify": {
     "generationComplete": "生成完畢",
     "generationError": "生成失敗"
+  },
+  "navigation": {
+    "title": "訊息導航",
+    "searchPlaceholder": "搜索訊息...",
+    "noResults": "冇搵到相符嘅訊息",
+    "noMessages": "暫時冇訊息",
+    "totalMessages": "共 {count} 條訊息",
+    "searchResults": "搵到 {count} 條結果，共 {total} 條訊息",
+    "userMessage": "用戶訊息",
+    "assistantMessage": "助手回覆",
+    "unknownMessage": "未知訊息"
   }
 }
diff --git a/src/renderer/src/i18n/zh-TW/chat.json b/src/renderer/src/i18n/zh-TW/chat.json
index 97d61e9a1..903aabe18 100644
--- a/src/renderer/src/i18n/zh-TW/chat.json
+++ b/src/renderer/src/i18n/zh-TW/chat.json
@@ -54,5 +54,16 @@
   "notify": {
     "generationComplete": "生成完畢",
     "generationError": "生成失敗"
+  },
+  "navigation": {
+    "title": "訊息導覽",
+    "searchPlaceholder": "搜尋訊息...",
+    "noResults": "沒有找到匹配的訊息",
+    "noMessages": "暫無訊息",
+    "totalMessages": "共 {count} 則訊息",
+    "searchResults": "找到 {count} 筆結果，共 {total} 則訊息",
+    "userMessage": "使用者訊息",
+    "assistantMessage": "助手回覆",
+    "unknownMessage": "未知訊息"
   }
 }
diff --git a/src/renderer/src/stores/chat.ts b/src/renderer/src/stores/chat.ts
index 5702423a5..0c8143154 100644
--- a/src/renderer/src/stores/chat.ts
+++ b/src/renderer/src/stores/chat.ts
@@ -39,6 +39,7 @@ export const useChatStore = defineStore('chat', () => {
   const messagesMap = ref<Map<number, AssistantMessage[] | UserMessage[]>>(new Map())
   const generatingThreadIds = ref(new Set<string>())
   const isSidebarOpen = ref(false)
+  const isMessageNavigationOpen = ref(false)
 
   // 使用Map来存储会话工作状态
   const threadsWorkingStatusMap = ref<Map<number, Map<string, WorkingStatus>>>(new Map())
@@ -82,6 +83,11 @@ export const useChatStore = defineStore('chat', () => {
   const setMessages = (msgs: AssistantMessage[] | UserMessage[]) => {
     messagesMap.value.set(getTabId(), msgs)
   }
+  const getCurrentThreadMessages = () => {
+    const activeThreadId = getActiveThreadId()
+    if (!activeThreadId) return []
+    return getMessages()
+  }
   const getThreadsWorkingStatus = () => {
     if (!threadsWorkingStatusMap.value.has(getTabId())) {
       threadsWorkingStatusMap.value.set(getTabId(), new Map())
@@ -1184,6 +1190,7 @@ export const useChatStore = defineStore('chat', () => {
     // 状态
     createNewEmptyThread,
     isSidebarOpen,
+    isMessageNavigationOpen,
     activeThreadIdMap,
     threads,
     messagesMap,
@@ -1218,6 +1225,7 @@ export const useChatStore = defineStore('chat', () => {
     getActiveThreadId,
     getGeneratingMessagesCache,
     getMessages,
+    getCurrentThreadMessages,
     exportThread,
     showProviderSelector
   }
diff --git a/src/renderer/src/views/ChatTabView.vue b/src/renderer/src/views/ChatTabView.vue
index 9477cf56c..a15f74c6f 100644
--- a/src/renderer/src/views/ChatTabView.vue
+++ b/src/renderer/src/views/ChatTabView.vue
@@ -3,7 +3,8 @@
     <div
       :class="[
         'flex-1 w-0 h-full transition-all duration-200 max-lg:!mr-0',
-        artifactStore.isOpen && route.name === 'chat' ? 'mr-[calc(60%_-_104px)]' : ''
+        artifactStore.isOpen && route.name === 'chat' ? 'mr-[calc(60%_-_104px)]' : '',
+        chatStore.isMessageNavigationOpen && !artifactStore.isOpen && isLargeScreen ? 'mr-80' : ''
       ]"
     >
       <div class="flex h-full">
@@ -40,11 +41,50 @@
             <TitleView :model="activeModel" />
 
             <!-- 聊天内容区域 -->
-            <ChatView />
+            <ChatView ref="chatViewRef" />
           </template>
         </div>
       </div>
     </div>
+
+    <!-- 消息导航侧边栏 (大屏幕) -->
+    <div
+      v-show="chatStore.isMessageNavigationOpen && isLargeScreen"
+      class="fixed right-0 top-0 w-80 max-w-80 h-full z-10 hidden lg:block"
+    >
+      <MessageNavigationSidebar
+        :messages="chatStore.getMessages()"
+        :is-open="chatStore.isMessageNavigationOpen"
+        @close="chatStore.isMessageNavigationOpen = false"
+        @scroll-to-message="handleScrollToMessage"
+      />
+    </div>
+
+    <!-- 小屏幕模式下的消息导航侧边栏 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-all duration-300 ease-out"
+        leave-active-class="transition-all duration-300 ease-in"
+        enter-from-class="translate-x-full opacity-0"
+        leave-to-class="translate-x-full opacity-0"
+      >
+        <div v-if="chatStore.isMessageNavigationOpen" class="fixed inset-0 z-50 flex lg:hidden">
+          <!-- 背景遮罩 -->
+          <div class="flex-1" @click="chatStore.isMessageNavigationOpen = false"></div>
+
+          <!-- 侧边栏 -->
+          <div ref="messageNavigationRef" class="w-80 max-w-80">
+            <MessageNavigationSidebar
+              :messages="chatStore.getMessages()"
+              :is-open="chatStore.isMessageNavigationOpen"
+              @close="chatStore.isMessageNavigationOpen = false"
+              @scroll-to-message="handleScrollToMessage"
+            />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
     <!-- Artifacts 预览区域 -->
     <ArtifactDialog />
   </div>
@@ -59,6 +99,7 @@ import { useSettingsStore } from '@/stores/settings'
 import { RENDERER_MODEL_META } from '@shared/presenter'
 import { useArtifactStore } from '@/stores/artifact'
 import ArtifactDialog from '@/components/artifacts/ArtifactDialog.vue'
+import MessageNavigationSidebar from '@/components/MessageNavigationSidebar.vue'
 import { useRoute } from 'vue-router'
 import { useLanguageStore } from '@/stores/language'
 const ThreadsView = defineAsyncComponent(() => import('@/components/ThreadsView.vue'))
@@ -71,6 +112,7 @@ const route = useRoute()
 const chatStore = useChatStore()
 const title = useTitle()
 const langStore = useLanguageStore()
+const chatViewRef = ref()
 // 添加标题更新逻辑
 const updateTitle = () => {
   const activeThread = chatStore.activeThread
@@ -103,12 +145,18 @@ watch(
 
 // 点击外部区域关闭侧边栏
 const sidebarRef = ref<HTMLElement>()
+const messageNavigationRef = ref<HTMLElement>()
 const isLargeScreen = useMediaQuery('(min-width: 1024px)')
 
-onClickOutside(sidebarRef, () => {
+onClickOutside(sidebarRef, (event) => {
+  const isClickInMessageNavigation = messageNavigationRef.value?.contains(event.target as Node)
+
   if (chatStore.isSidebarOpen && !isLargeScreen.value) {
     chatStore.isSidebarOpen = false
   }
+  if (chatStore.isMessageNavigationOpen && !isLargeScreen.value && !isClickInMessageNavigation) {
+    chatStore.isMessageNavigationOpen = false
+  }
 })
 
 const activeModel = computed(() => {
@@ -161,6 +209,22 @@ const activeModel = computed(() => {
     tags: []
   }
 })
+
+/**
+ * 处理滚动到指定消息
+ */
+const handleScrollToMessage = (messageId: string) => {
+  if (chatViewRef.value && chatViewRef.value.messageList) {
+    chatViewRef.value.messageList.scrollToMessage(messageId)
+
+    // 在小屏幕模式下，滚动完成后延迟关闭导航
+    if (!isLargeScreen.value && chatStore.isMessageNavigationOpen) {
+      setTimeout(() => {
+        chatStore.isMessageNavigationOpen = false
+      }, 1000) // 延迟1秒关闭，让用户看到滚动效果
+    }
+  }
+}
 </script>
 
 <style>