update friend

src/views/chat/ChatPage/Index.vue

@@ -3,11 +3,12 @@
     <ToolSection @menuSelectChange="toolMenuSelectChange" />
     <Session v-if="bussinessType === MENU_LIST_ENUM.CONVERSATION" />
     <Friends v-if="bussinessType === MENU_LIST_ENUM.FRIENDS" />
-    <view class="flex w-full flex-col">
+    <view v-if="bussinessType === MENU_LIST_ENUM.CONVERSATION" class="flex w-full flex-col">
       <ChatHeader />
       <ChatMessage />
       <InputSection />
     </view>
+    <FriendDetail v-if="bussinessType === MENU_LIST_ENUM.FRIENDS" />
   </view>
 </template>
 
@@ -22,6 +23,7 @@ import Friends from '../components/Friends/Index.vue'
 import ChatHeader from '../components/ChatHeader/Index.vue'
 import ChatMessage from '../components/ChatMessage/Index.vue'
 import InputSection from '../components/InputSection/index.vue'
+import FriendDetail from '../components/FriendDetail/Index.vue'
 import { MENU_LIST_ENUM } from '../types/index.d.ts'
 
 defineOptions({ name: 'ChatPage' })

src/views/chat/components/FriendDetail/Index.vue

@@ -0,0 +1,29 @@
+<template>
+  <view
+    class="flex justify-center w-full border-b-1 border-b-gray border-b-solid flex-1 border-b-1 border-b-gray border-b-solid py-2"
+  >
+    <view class="flex mt-20" v-if="friendStore.currentFriend != null">
+      <el-image
+        style="width: 8rem; height: 8rem"
+        class="rounded"
+        :src="friendStore.currentFriend.avatar"
+      />
+      <view class="flex flex-col ml-2">
+        <label class="font-500 text-black font-size-5">{{ friendStore.currentFriend?.name }}</label>
+        <label>{{ friendStore.currentFriend?.description }}</label>
+      </view>
+    </view>
+    <view v-else class="mt-50 flex flex-col items-center">
+      <Icon icon="ep:coffee-cup" :size="64" />
+      <label>空空如也</label>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { useFriendStore } from '../../store/friendstore'
+
+defineOptions({ name: 'FriendDetail' })
+
+const friendStore = useFriendStore()
+</script>

src/views/chat/components/FriendItem/Index.vue

@@ -7,26 +7,22 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { useChatStore } from '../../store/chatstore'
+import { useFriendStore } from '../../store/friendstore'
+
 import Friend from '../../model/Friend'
 
-defineOptions({ name: 'SessionItem' })
+defineOptions({ name: 'FriendItem' })
 
 const props = defineProps({
   friend: {
     type: Object as PropType<Friend>,
     default: () => {}
-  },
+  }
-  index: Number
 })
 
-const chatStore = useChatStore()
+const friendStore = useFriendStore()
 
 const bgColor = () => {
-  return props.index === chatStore.currentSessionIndex ? 'bg-blue' : 'bg-white'
+  return props.friend.id === friendStore.currentFriend?.id ? 'bg-blue' : 'bg-white'
-}
-
-const fontColor = () => {
-  return props.index === chatStore.currentSessionIndex ? 'text-white' : 'text-gray-f'
 }
 </script>

src/views/chat/components/Friends/Index.vue

@@ -5,10 +5,11 @@
   >
     <view class="flex flex-col w-full">
       <FriendItem
-        v-for="(item, index) in friendList"
+        v-for="(item, index) in friendStore.friendList"
         :key="item.id"
         :index="index"
         :friend="item"
+        @click="() => onFriendClick(item)"
       />
     </view>
   </view>
@@ -18,11 +19,17 @@
 import FriendItem from '../FriendItem/Index.vue'
 import { useFriendStore } from '../../store/friendstore'
 import { onMounted } from 'vue'
+import Friend from '../../model/Friend'
 
 defineOptions({ name: 'Friends' })
 
-const { friendList } = useFriendStore()
+const friendStore = useFriendStore()
 onMounted(() => {
   // set default conversation
 })
+
+const onFriendClick = (friend: Friend) => {
+  console.log('====>', friend)
+  friendStore.setCurrentFriend(friend)
+}
 </script>

src/views/chat/components/ToolSection/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="flex flex-col items-center bg-gray h-full py-2" style="width: 80px">
+  <view class="flex flex-col items-center bg-gray h-full py-2" style="width: 80px; min-width: 80px">
     <el-avatar shape="square" />
     <icon
       icon="ep:chat-line-round"

src/views/chat/store/friendstore.ts

@@ -4,6 +4,7 @@ import Friend from '../model/Friend'
 
 interface FriendStoreModel {
   friendList: Array<Friend>
+  currentFriend: Friend | null
 }
 
 export const useFriendStore = defineStore('friendStore', {
@@ -25,7 +26,8 @@ export const useFriendStore = defineStore('friendStore', {
         description: 'hero',
         createTime: 1695201147622
       }
-    ]
+    ],
+    currentFriend: null
   }),
 
   getters: {
@@ -35,8 +37,11 @@ export const useFriendStore = defineStore('friendStore', {
   },
 
   actions: {
-    addSession(session: BaseConversation) {
+    addFriend(session: BaseConversation) {
       this.friendList.push(session)
+    },
+    setCurrentFriend(friend: Friend) {
+      this.currentFriend = friend
     }
   }
 })