diff --git a/src/api/message.js b/src/api/message.js
index da4a392..9ae4e01 100644
--- a/src/api/message.js
+++ b/src/api/message.js
@@ -4,3 +4,11 @@ import { getReqBody } from '@/api/common'
 export const msgChatSessionListService = () => {
   return request.post('/chat/sessionList', getReqBody())
 }
+
+export const msgUpdateSessionService = (obj) => {
+  return request.post('/chat/updateSession', getReqBody(obj))
+}
+
+export const msgChatPullMsgService = (obj) => {
+  return request.post('/chat/pullMsg', getReqBody(obj))
+}
diff --git a/src/components/message/InputEditor.vue b/src/components/message/InputEditor.vue
index 906f397..89ad2af 100644
--- a/src/components/message/InputEditor.vue
+++ b/src/components/message/InputEditor.vue
@@ -1,20 +1,24 @@
 <script setup>
 import '@wangeditor/editor/dist/css/style.css'
-import { onMounted, onBeforeUnmount, ref, shallowRef } from 'vue'
+import { onMounted, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
 import { Editor } from '@wangeditor/editor-for-vue'
+import { messageStore } from '@/stores'
+import { msgUpdateSessionService } from '@/api/message'
 
 const mode = 'simple'
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()
 const editorStyleRef = ref()
+const props = defineProps(['sessionInfo'])
 const emit = defineEmits(['exportContent'])
+const messageData = messageStore()
 
 // 内容 HTML
 const valueHtml = ref('')
 const content = [
   {
     type: 'paragraph',
-    children: [{ text: '', fontSize: '14px' }],
+    children: [{ text: props.sessionInfo.draft || '', fontSize: '14px' }],
     lineHeight: 0.5
   }
 ]
@@ -46,6 +50,21 @@ const handleEnter = () => {
     valueHtml.value = ''
   }
 }
+
+// 监控session发生了切换
+watch(
+  () => props.sessionInfo,
+  (newValue, oldValue) => {
+    valueHtml.value = newValue.draft || ''
+    // 草稿若没发生变动，则不触发存储
+    if (editorRef.value.getText().trim() !== oldValue.draft) {
+      oldValue.draft = editorRef.value.getText().trim()
+      messageData.updateSession(oldValue)
+      msgUpdateSessionService({ sessionId: oldValue.sessionId, draft: oldValue.draft })
+    }
+  },
+  { deep: true }
+)
 </script>
 
 <template>
diff --git a/src/components/message/SessionBox.vue b/src/components/message/SessionBox.vue
index 5ca037f..f6d5c42 100644
--- a/src/components/message/SessionBox.vue
+++ b/src/components/message/SessionBox.vue
@@ -8,57 +8,61 @@ import { sessionShowTime } from '@/utils/common'
 import { Top, Bottom, MuteNotification, Bell } from '@element-plus/icons-vue'
 import { MsgType } from '@/proto/msg'
 
-const props = defineProps(['sessionId', 'sessionType', 'objectInfo'])
-const emit = defineEmits(['exportData'])
-const isPinToTop = ref(false)
-const isMute = ref(false)
+const props = defineProps(['sesionInfo', 'choosedSessionId'])
+const emit = defineEmits(['beChoosed', 'switchTag'])
+const top = ref(props.sesionInfo.top)
+const muted = ref(props.sesionInfo.muted)
 const isShowUserCard = ref(false)
 const isShowGroupCard = ref(false)
 
-const sessionInfo = computed(() => {
-  return {
-    sessionId: props.sessionId,
-    sessionType: props.sessionType,
-    objectInfo: props.objectInfo
-  }
-})
+const exportSession = {
+  sessionId: props.sesionInfo.sessionId,
+  sessionType: props.sesionInfo.sessionType,
+  objectInfo: props.sesionInfo.objectInfo
+}
 
 const showName = computed(() => {
-  switch (props.sessionType) {
+  switch (props.sesionInfo.sessionType) {
     case MsgType.CHAT:
-      return props.objectInfo.nickName
+      return props.sesionInfo.objectInfo.nickName
     case MsgType.GROUP_CHAT:
-      return props.objectInfo.groupName
+      return props.sesionInfo.objectInfo.groupName
     default:
       return ''
   }
 })
 
 const showId = computed(() => {
-  switch (props.sessionType) {
+  switch (props.sesionInfo.sessionType) {
     case MsgType.CHAT:
-      return props.objectInfo.account
+      return props.sesionInfo.objectInfo.account
     case MsgType.GROUP_CHAT:
-      return props.objectInfo.groupId
+      return props.sesionInfo.objectInfo.groupId
     default:
       return ''
   }
 })
 
 const showAvatarThumb = computed(() => {
-  switch (props.sessionType) {
+  switch (props.sesionInfo.sessionType) {
     case MsgType.CHAT:
     case MsgType.GROUP_CHAT:
-      return props.objectInfo.avatarThumb
+      return props.sesionInfo.objectInfo.avatarThumb
     default:
       return ''
   }
 })
 
 const showTime = computed(() => {
-  const now = new Date()
-  const oneDayAgo = new Date(now.getTime() - 0 * 24 * 60 * 60 * 1000)
-  return sessionShowTime(oneDayAgo)
+  return sessionShowTime(props.sesionInfo.lastMsgTime)
+})
+
+const isShowDraft = computed(() => {
+  return props.sesionInfo.sessionId !== props.choosedSessionId && props.sesionInfo.draft
+})
+
+const isShowUnreadCount = computed(() => {
+  return props.sesionInfo.sessionId !== props.choosedSessionId && props.sesionInfo.unreadCount > 0
 })
 
 const handleUserCard = (flag) => {
@@ -68,7 +72,7 @@ const handleGroupCard = (flag) => {
   isShowGroupCard.value = flag
 }
 const showSomeoneCard = () => {
-  switch (props.sessionType) {
+  switch (props.sesionInfo.sessionType) {
     case MsgType.CHAT:
       isShowUserCard.value = true
       break
@@ -79,6 +83,19 @@ const showSomeoneCard = () => {
       break
   }
 }
+
+let timer
+const switchTag = (func) => {
+  func()
+  clearTimeout(timer)
+  timer = setTimeout(() => {
+    emit('switchTag', {
+      sessionId: props.sesionInfo.sessionId,
+      top: top.value,
+      muted: muted.value
+    })
+  }, 1000)
+}
 </script>
 
 <template>
@@ -89,16 +106,17 @@ const showSomeoneCard = () => {
       :showAvatarThumb="showAvatarThumb"
       @click="showSomeoneCard"
     ></AvatarIcon>
-    <div class="content-box" @click="emit('exportData', sessionInfo)">
+    <div v-if="isShowUnreadCount" class="unread-tips"></div>
+    <div class="content-box" @click="emit('beChoosed', exportSession)">
       <div class="header">
         <div class="title">
           <span class="showName">{{ showName || showId }}</span>
-          <span v-if="props.objectInfo.account" class="showAccount">
-            {{ props.objectInfo.account }}
+          <span v-if="props.sesionInfo.objectInfo.account" class="showAccount">
+            {{ props.sesionInfo.objectInfo.account }}
           </span>
-          <SessionTag :tagType="props.sessionType"></SessionTag>
-          <SessionTag v-if="isPinToTop" tagType="pinToTop"></SessionTag>
-          <SessionTag v-if="isMute" tagType="mute"></SessionTag>
+          <SessionTag :tagType="props.sesionInfo.sessionType"></SessionTag>
+          <SessionTag v-if="top" tagType="top"></SessionTag>
+          <SessionTag v-if="muted" tagType="mute"></SessionTag>
         </div>
         <div class="datetime">
           <span>{{ showTime }}</span>
@@ -106,20 +124,33 @@ const showSomeoneCard = () => {
       </div>
       <div class="body">
         <div class="content">
-          <span class="draft">[草稿]</span>
-          <span class="detail">你吃饭了吗？</span>
+          <span v-if="isShowUnreadCount" class="unread-count"
+            >[{{ props.sesionInfo.unreadCount }}条]</span
+          >
+          <span v-if="isShowDraft" class="draft">[草稿]</span>
+          <span class="detail">{{
+            props.sesionInfo.draft ? props.sesionInfo.draft : props.sesionInfo.lastMsgContent
+          }}</span>
         </div>
         <div class="action">
           <el-button
-            class="action-button pin-to-top"
-            :icon="isPinToTop ? Bottom : Top"
-            @click="isPinToTop = !isPinToTop"
+            class="action-button"
+            :icon="top ? Bottom : Top"
+            @click="
+              switchTag(() => {
+                top = !top
+              })
+            "
             circle
           />
           <el-button
-            class="action-button no-not-disturb"
-            :icon="isMute ? Bell : MuteNotification"
-            @click="isMute = !isMute"
+            class="action-button"
+            :icon="muted ? Bell : MuteNotification"
+            @click="
+              switchTag(() => {
+                muted = !muted
+              })
+            "
             circle
           />
         </div>
@@ -129,12 +160,12 @@ const showSomeoneCard = () => {
   <UserCard
     :isShow="isShowUserCard"
     @update:isShow="handleUserCard"
-    :account="props.objectInfo.account"
+    :account="props.sesionInfo.objectInfo.account"
   ></UserCard>
   <GroupCard
     :isShow="isShowGroupCard"
     @update:isShow="handleGroupCard"
-    :group="props.objectInfo"
+    :group="props.sesionInfo.objectInfo"
   ></GroupCard>
 </template>
 
@@ -147,13 +178,23 @@ const showSomeoneCard = () => {
   display: flex;
   align-items: center;
   user-select: none;
-  // cursor: pointer;
+  position: relative;
 
   &:hover {
     background-color: #c6e2ff;
     border-radius: 6px;
   }
 
+  .unread-tips {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: red;
+    position: absolute;
+    top: 5px;
+    left: 40px;
+  }
+
   .content-box {
     width: 100%;
     height: 100%;
@@ -182,6 +223,7 @@ const showSomeoneCard = () => {
           white-space: nowrap; /*不换行*/
           overflow: hidden; /*超出的文本隐藏*/
           text-overflow: ellipsis; /* 溢出用省略号*/
+          flex-shrink: 0;
         }
 
         .showAccount {
@@ -205,7 +247,7 @@ const showSomeoneCard = () => {
     .body {
       height: 20px;
       display: flex;
-      align-items: center;
+      justify-content: space-between;
 
       .content {
         font-size: 12px;
@@ -213,6 +255,11 @@ const showSomeoneCard = () => {
         flex: 1 1;
         overflow: hidden;
 
+        .unread-count {
+          color: gray;
+          flex-shrink: 0;
+        }
+
         .draft {
           color: red;
           flex-shrink: 0;
@@ -227,6 +274,8 @@ const showSomeoneCard = () => {
       }
 
       .action {
+        display: flex;
+
         .action-button {
           width: 20px;
           height: 20px;
diff --git a/src/components/message/SessionTag.vue b/src/components/message/SessionTag.vue
index 653117c..9c10f77 100644
--- a/src/components/message/SessionTag.vue
+++ b/src/components/message/SessionTag.vue
@@ -5,7 +5,7 @@ const items = {
   team: { color: '#67C23A', label: '团' },
   organize: { color: '#E6A23C', label: '组' },
   assistant: { color: '#E734F5', label: '助' },
-  pinToTop: { color: '#F56C6C', label: '顶' },
+  top: { color: '#F56C6C', label: '顶' },
   mute: { color: '#73767a', label: '静' }
 }
 
diff --git a/src/stores/message.js b/src/stores/message.js
index 8740f92..2d0d4e2 100644
--- a/src/stores/message.js
+++ b/src/stores/message.js
@@ -5,51 +5,35 @@ import { ref } from 'vue'
 export const messageStore = defineStore(
   'anyim-message',
   () => {
-    const last = ref({
-      lastSessionId: '',
-      lastSessionType: '',
-      lastObject: {}
-    })
+    const lastSessionId = ref()
 
-    const msgRecords = ref({})
+    const sessionList = ref({})
 
-    const setLast = ({ sessionId, sessionType, objectInfo }) => {
-      last.value = {
-        lastSessionId: sessionId ? sessionId : last.value.lastSessionId,
-        lastSessionType: sessionType ? sessionType : last.value.lastSessionType,
-        lastObject: objectInfo ? objectInfo : last.value.lastObject
-      }
+    const setLastSessionId = (sessionId) => {
+      lastSessionId.value = sessionId
     }
 
-    const addMsgRecord = (sessionId, { msgId, fromId, msgType, msgTime, content }) => {
-      if (!msgRecords.value[sessionId]) {
-        // 如果这个sessionId还没有数据，直接赋值成一个元素的数组
-        msgRecords.value[sessionId] = [
-          {
-            msgId: msgId,
-            fromId: fromId,
-            msgType: msgType,
-            msgTime: msgTime,
-            content: content
-          }
-        ]
+    const setSessionList = (sessions) => {
+      sessionList.value = sessions
+    }
+
+    const updateSession = (session) => {
+      if (sessionList.value[session.sessionId]) {
+        sessionList.value[session.sessionId] = session
       } else {
-        // 如果这个sessionId有数据，在原有数组基础上追加
-        msgRecords.value[sessionId].push({
-          msgId: msgId,
-          fromId: fromId,
-          msgType: msgType,
-          msgTime: msgTime,
-          content: content
-        })
+        sessionList.value = {
+          ...sessionList.value,
+          [session.sessionId]: session
+        }
       }
     }
 
     return {
-      last,
-      setLast,
-      msgRecords,
-      addMsgRecord
+      lastSessionId,
+      sessionList,
+      setLastSessionId,
+      setSessionList,
+      updateSession
     }
   },
   {
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index 1cb1f55..15aee33 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -23,7 +23,7 @@ import InputEditor from '@/components/message/InputEditor.vue'
 import MessageItem from '@/components/message/MessageItem.vue'
 import { userStore, settingStore, messageStore } from '@/stores'
 import backgroupImage from '@/assets/messagebx_bg.webp'
-import { msgChatSessionListService } from '@/api/message'
+import { msgChatSessionListService, msgUpdateSessionService, msgChatPullMsgService } from '@/api/message'
 import { MsgType } from '@/proto/msg'
 import wsConnect from '@/js/websocket/wsConnect'
 
@@ -39,19 +39,10 @@ const inputBoxHeight = ref(0)
 const inputBoxHeightMin = 150
 const inputBoxHeightMax = 400
 
-const curSessionId = ref('')
-const curSessionType = ref('')
-const curObject = ref({})
-const sessionList = ref([])
-const sessionRecords = computed(() => {
-  const records = messageData.msgRecords[curSessionId.value]
-  if (records) {
-    return records.sort((a, b) => a.msgId - b.msgId)
-  }
-  else {
-    return []
-  }
-})
+const sessionList = ref({})
+const choosedSessionId = ref()
+const choosedSession = ref({})
+const msgRecords = ref([])
 
 const isShowTopLoading = ref(true)
 const isTopLoading = ref(false)
@@ -63,36 +54,48 @@ const loadCursor = computed(() => {
 const msgListDiv = ref()
 
 onMounted(async () => {
-  curSessionId.value = messageData.last.lastSessionId
-  curSessionType.value = messageData.last.lastSessionType
-  curObject.value = messageData.last.lastObject
-
   asideWidth.value = settingData.sessionListDrag[userData.user.account] || 200
   inputBoxHeight.value = settingData.inputBoxDrag[userData.user.account] || 200
 
   const res = await msgChatSessionListService()
-  sessionList.value = sessionList.value.concat(res.data.data)
+  messageData.setSessionList(res.data.data) //入缓存
+  sessionList.value = messageData.sessionList
+  choosedSessionId.value = messageData.lastSessionId
 
-  msgListDiv.value.scrollTop = msgListDiv.value.scrollHeight
+  if (msgListDiv.value) {
+    // 首次进到消息页面，不会有有值
+    msgListDiv.value.scrollTop = msgListDiv.value.scrollHeight
+  }
+})
+
+// 把sessionList转成数组，并按照lastMsgTime排序
+const sessionListSorted = computed(() => {
+  if (!sessionList.value) {
+    return []
+  }
+  else {
+    let sessionArr = Object.values(sessionList.value)
+    return sessionArr.sort((a, b) => b.lastMsgTime - a.lastMsgTime)
+  }
 })
 
 const showName = computed(() => {
-  switch (curSessionType.value) {
+  switch (choosedSession.value.sessionType) {
     case MsgType.CHAT:
-      return curObject.value.nickName
+      return choosedSession.value.objectInfo.nickName
     case MsgType.GROUP_CHAT:
-      return curObject.value.groupName
+      return choosedSession.value.objectInfo.groupName
     default:
       return ''
   }
 })
 
 const showId = computed(() => {
-  switch (curSessionType.value) {
+  switch (choosedSession.value.sessionType) {
     case MsgType.CHAT:
-      return curObject.value.account
+      return choosedSession.value.objectInfo.account
     case MsgType.GROUP_CHAT:
-      return curObject.value.groupId
+      return choosedSession.value.objectInfo.groupId
     default:
       return ''
   }
@@ -100,7 +103,7 @@ const showId = computed(() => {
 
 const getLastMsgTime = (index) => {
     if (index > 0) {
-    return sessionRecords.value[index - 1].msgTime;
+    return msgRecords.value[index - 1].msgTime;
     } else {
       return null;
     }
@@ -123,30 +126,26 @@ const onInputBoxDragUpdate = ({ height }) => {
   })
 }
 
-const handleExportData = (data) => {
-  curSessionId.value = data.sessionId
-  curSessionType.value = data.sessionType
-  curObject.value = data.objectInfo
-
-  messageData.setLast({
-    sessionId: data.sessionId,
-    sessionType: data.sessionType,
-    objectInfo: data.objectInfo
-  })
+const handleBeChoosed = (session) => {
+  choosedSessionId.value = session.sessionId // sessionId变化会引发watch
 }
+
+const handleSwitchTag = (obj) => {
+  msgUpdateSessionService(obj)
+}
+
 // 发送事件要做的事情
 const handleExportContent = (content) => {
   // TODO 这里还要考虑失败情况：1）消息发不出去；2）消息发出去了，服务器不发“已发送”
-  wsConnect.sendMsg(showId.value, curSessionType.value, content, (deliveredMsg) => {
-    messageData.addMsgRecord(curSessionId.value, {
+  wsConnect.sendMsg(showId.value, choosedSession.value.sessionType, content, (deliveredMsg) => {
+    messageData.addRecord(choosedSessionId.value, {
       msgId: deliveredMsg.body.msgId,  
       fromId: userData.user.account,
-      msgType: curSessionType.value,
+      msgType: choosedSession.value.sessionType,
       msgTime: new Date(),
       content: content
     })
   })
-
 }
 
 const onLoadMore = () => {
@@ -154,10 +153,52 @@ const onLoadMore = () => {
   loadMoreTips.value = ''
 }
 
-watch(() => messageData.msgRecords[curSessionId.value], () => {
+// watch到哪个，表示哪个会话被选中
+watch(choosedSessionId, (newValue, oldValue) => {
+  console.log('====>111: ', newValue, oldValue)
+  messageData.setLastSessionId(newValue)
+  choosedSession.value = sessionList.value[newValue]
+
+  msgChatPullMsgService({
+    sessionId: choosedSessionId.value,
+    lastMsgId: sessionList.value[choosedSessionId.value].readMsgId,
+    lastPullTime: sessionList.value[choosedSessionId.value].readTime,
+    pageSize: 20
+  })
+  .then((res) => {
+    msgRecords.value = res.data.data.msgList
+    
+    if (res.data.data.lastMsgId > choosedSession.value.readMsgId) {
+      const now = new Date()
+      choosedSession.value.readMsgId = res.data.data.lastMsgId
+      choosedSession.value.readTime = now
+      choosedSession.value.unreadCount = 0;
+
+      msgUpdateSessionService({ 
+        sessionId: choosedSessionId.value, 
+        readMsgId: res.data.data.lastMsgId, 
+        readTime: now })
+    }
+  })
+})
+
+watch(msgRecords, () => {
+  if (msgRecords.value) {
+    msgRecords.value =  msgRecords.value.sort((a, b) => a.msgId - b.msgId)
+  }
   msgListReachBottom()
 }, {deep: true})
 
+
+watch(() => messageData.sessionRecordsSize, async () => {
+  // TODO 这里还要检查messageData中的sessionId是否都在sessionList中
+  // 如果有不在的，要直接刷新sessionList
+  // if (xxx)
+  // const res = await msgChatSessionListService()
+  // sessionList.value = sessionList.value.concat(res.data.data)
+  
+}, {deep: true})
+
 const msgListReachBottom = () => {
   nextTick(() => {
     msgListDiv.value.scrollTo({
@@ -180,12 +221,12 @@ const msgListReachBottom = () => {
 
         <div class="session-list my-scrollbar">
           <SessionBox
-            v-for="item in sessionList"
+            v-for="item in sessionListSorted"
             :key="item.sessionId"
-            :objectInfo="item.objectInfo"
-            :sessionId="item.sessionId"
-            :sessionType="item.sessionType"
-            @exportData="handleExportData"
+            :sesionInfo="item"
+            :choosedSessionId="choosedSessionId"
+            @beChoosed="handleBeChoosed"
+            @switchTag="handleSwitchTag"
           ></SessionBox>
         </div>
       </div>
@@ -202,7 +243,7 @@ const msgListReachBottom = () => {
     <el-main class="msg-box">
       <el-image
         class="backgroup-image"
-        v-if="!curSessionId"
+        v-if="!choosedSessionId"
         :src="backgroupImage"
         fit="cover"
       ></el-image>
@@ -211,7 +252,9 @@ const msgListReachBottom = () => {
         <el-header class="header bdr-b">
           <div class="show-name-id">
             <span class="show-name">{{ showName }}</span>
-            <span v-if="curSessionType === MsgType.CHAT" class="show-id">{{ showId }}</span>
+            <span v-if="choosedSession.sessionType === MsgType.CHAT" class="show-id">{{
+              showId
+            }}</span>
           </div>
 
           <div class="action-set">
@@ -238,10 +281,10 @@ const msgListReachBottom = () => {
             <div class="message-main">
               <span class="no-more-message">当前无更多消息</span>
               <MessageItem
-                v-for="(item, index) in sessionRecords"
+                v-for="(item, index) in msgRecords"
                 :key="index"
                 :msg="item"
-                :obj="curObject"
+                :obj="choosedSession.objectInfo"
                 :lastMsgTime="getLastMsgTime(index)"
               ></MessageItem>
             </div>
@@ -294,7 +337,10 @@ const msgListReachBottom = () => {
                 </div>
               </el-header>
               <el-main class="input-box-main">
-                <InputEditor @exportContent="handleExportContent"></InputEditor>
+                <InputEditor
+                  :sessionInfo="choosedSession"
+                  @exportContent="handleExportContent"
+                ></InputEditor>
               </el-main>
             </el-container>
           </div>