From e1b52be8ea92cbb683e5e211433c5d88552bfbac Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 27 Apr 2026 00:01:43 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E6=96=B0=E5=A2=9E=20Me?=
 =?UTF-8?q?ssagePage.vue=20=E9=A1=B5=E9=9D=A2=20+=20=E9=83=A8=E5=88=86=20r?=
 =?UTF-8?q?eview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/pages/conversation/MessagePage.vue   | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/views/im/home/pages/conversation/MessagePage.vue

diff --git a/src/views/im/home/pages/conversation/MessagePage.vue b/src/views/im/home/pages/conversation/MessagePage.vue
new file mode 100644
index 000000000..d858c2756
--- /dev/null
+++ b/src/views/im/home/pages/conversation/MessagePage.vue
@@ -0,0 +1,45 @@
+<template>
+  <!-- 消息 Tab：左侧会话列表 + 右侧聊天面板 -->
+  <div class="flex flex-1 min-w-0 h-full">
+    <!-- 左侧会话列表（可拖拽宽度） -->
+    <ResizableAside :default-width="260" :storage-key="StorageKeys.asideWidth('message')">
+      <!-- TODO @AI：对齐微信的交互：1）搜索框；2）+ 号：发起群聊、添加好友 -->
+      <div
+        class="flex flex-shrink-0 items-center h-14 px-4 text-base font-medium text-[var(--el-text-color-primary)] border-b border-[var(--el-border-color-light)]"
+      >
+        消息
+      </div>
+      <div class="flex-1 overflow-y-auto">
+        <ConversationItem
+          v-for="conversation in sortedConversations"
+          :key="`${conversation.type}-${conversation.targetId}`"
+          :conversation="conversation"
+        />
+        <div
+          v-if="sortedConversations.length === 0"
+          class="flex items-center justify-center py-10 text-sm text-[var(--el-text-color-secondary)]"
+        >
+          暂无会话
+        </div>
+      </div>
+    </ResizableAside>
+
+    <!-- 右侧聊天面板 -->
+    <ChatPanel />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { useConversationStore } from '../../store/conversationStore'
+import { StorageKeys } from '../../../utils/storage'
+import ResizableAside from '../../components/ResizableAside.vue'
+import ConversationItem from './components/conversation/ConversationItem.vue'
+import ChatPanel from './components/ChatPanel.vue'
+
+defineOptions({ name: 'ImMessagePage' })
+
+const conversationStore = useConversationStore()
+const sortedConversations = computed(() => conversationStore.getSortedConversations)
+</script>