update friend

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'
-}
-
-const fontColor = () => {
-  return props.index === chatStore.currentSessionIndex ? 'text-white' : 'text-gray-f'
+  return props.friend.id === friendStore.currentFriend?.id ? 'bg-blue' : 'bg-white'
 }
 </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"