feat: friends

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

@@ -0,0 +1,32 @@
+<template>
+  <view class="flex py-2 border-b-gray-3 border-b-solid items-center px-2" :class="bgColor()">
+    <el-avatar shape="square" size="default" class="mr-2" :src="friend.avatar" />
+    <label>{{ friend.name }}</label>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { useChatStore } from '../../store/chatstore'
+import Friend from '../../model/Friend'
+
+defineOptions({ name: 'SessionItem' })
+
+const props = defineProps({
+  friend: {
+    type: Object as PropType<Friend>,
+    default: () => {}
+  },
+  index: Number
+})
+
+const chatStore = useChatStore()
+
+const bgColor = () => {
+  return props.index === chatStore.currentSessionIndex ? 'bg-blue' : 'bg-white'
+}
+
+const fontColor = () => {
+  return props.index === chatStore.currentSessionIndex ? 'text-white' : 'text-gray-f'
+}
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <view
+    class="flex flex-col items-center h-full py-2 b-1 b-gray b-solid"
+    style="width: 248px; min-width: 248px"
+  >
+    <view class="flex flex-col w-full">
+      <FriendItem
+        v-for="(item, index) in friendList"
+        :key="item.id"
+        :index="index"
+        :friend="item"
+      />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import FriendItem from '../FriendItem/Index.vue'
+import { useFriendStore } from '../../store/friendstore'
+import { onMounted } from 'vue'
+
+defineOptions({ name: 'Friends' })
+
+const { friendList } = useFriendStore()
+onMounted(() => {
+  // set default conversation
+})
+</script>

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

@@ -1,9 +1,45 @@
 <template>
   <view class="flex flex-col items-center bg-gray h-full py-2" style="width: 80px">
     <el-avatar shape="square" />
+    <icon
+      icon="ep:chat-line-round"
+      :size="24"
+      color="white"
+      class="px-4 py-4 mt-1 rounded-2"
+      :class="selectItem === MENU_LIST_ENUM.CONVERSATION ? 'bg-red' : ''"
+      @click="onConversatonClicked"
+    />
+    <icon
+      icon="ep:avatar"
+      :size="24"
+      color="white"
+      class="px-4 py-4 rounded-2 mt-2"
+      :class="selectItem === MENU_LIST_ENUM.FRIENDS ? 'bg-red' : ''"
+      @click="onFriendsClicked"
+    />
   </view>
 </template>
 
 <script lang="ts" setup>
+import { MENU_LIST_ENUM } from '../../types/index.d.ts'
+
 defineOptions({ name: 'ToolSection' })
+
+const selectItem = ref(1)
+
+const emit = defineEmits(['menuSelectChange'])
+watch(
+  () => selectItem.value,
+  (newValue) => {
+    emit('menuSelectChange', newValue)
+  }
+)
+
+const onConversatonClicked = () => {
+  selectItem.value = MENU_LIST_ENUM.CONVERSATION
+}
+
+const onFriendsClicked = () => {
+  selectItem.value = MENU_LIST_ENUM.FRIENDS
+}
 </script>