Question

首先把模型中模拟的 10 个聊天会话显示在界面上，代码如下所示：

src/renderer/window/WindowMain/chat/components/ChatBoard.vue

<template>
  <div class="ChatList">
    <ChatSearch />
    <div class="ListBox">
      <ChatItem :data="item" v-for="item in store.data" :key="item.id" />
    </div>
  </div>
</template>

<script setup lang="ts">
import ChatItem from './ChatItem.vue';
import ChatSearch from './ChatSearch.vue';
import { onMounted } from 'vue';
import { useChatStore } from '../../../../store/useChatStore';

const store = useChatStore();

onMounted(() => {
  store.selectItem(store.data[6]);
});
</script>

<style scoped lang="scss">
.ChatList {
  width: 250px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.ListBox {
  background: rgb(230, 229, 229);
  background-image: linear-gradient(to bottom right, rgb(235, 234, 233), rgb(240, 240, 240));
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;

  border-right: 1px solid rgb(214, 214, 214);
}
</style>

通过 Vue 的 v-for 指令渲染了一个自定义组件列表（ChatItem）。

store 对象是通过 useChatStore 方法获取的，useChatStore 方法就是前面介绍的 useChatStore.ts 导出的方法。得到 store 对象之后，可以直接使用 store.data 获取 Store 对象里的数据。

在当前组件 ChatBoard 渲染完成后，调用了 store 对象的 selectItem 方法，选中了第 7 个会话。

具体每一个聊天会话对象是通过自定义组件的 data 属性传递到组件内部的。

ChatItem 自定义组件的代码如下所示：

src/renderer/window/WindowMain/chat/components/ChatItem.vue

<template>
  <div @click="itemClick(data)" :class="['ChatItem', { 'ChatItemSelected': data.isSelected}]">
    <div class="avatar">
      <img :src="data.avatar" alt="" />
    </div>
    <div class="ChatInfo">
      <div class="row">
        <div class="FromName">{{ data.fromName }}</div>
        <div class="TimeName">{{ data.sendTime }}</div>
      </div>
      <div class="row">
        <div class="LastMsg">{{ data.lastMsg }}</div>
        <div class="subscribe" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ModelChat } from '../../../../../model/ModelChat';
import { useChatStore } from '../../../../store/useChatStore';
defineProps<{data: ModelChat}>();
const store = useChatStore();
const itemClick = (item: ModelChat) => {
  store.selectItem(item);
};
</script>

<style scoped lang="scss">
.ChatItem {
  display: flex;
  height: 66px;
  box-sizing: border-box;
  cursor: pointer;
  &:hover {
    background: rgb(221, 219, 218);
  }
}
.ChatItemSelected {
  background: rgb(196, 196, 196);
  &:hover {
    background: rgb(196, 196, 196);
  }
}
.avatar {
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 46px;
    height: 46px;
  }
}
.ChatInfo {
  flex: 1;
  height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.row {
  box-sizing: border-box;
  height: 28px;
  line-height: 28px;
  display: flex;
}
.FromName {
  flex: 1;
}
.TimeName {
  color: rgb(153, 153, 153);
  padding-right: 12px;
  font-size: 12px;
}
.LastMsg {
  color: rgb(153, 153, 153);
  flex: 1;
  font-size: 12px;
}
</style>

使用 defineProps 方法接收父组件传来的数据。

聊天会话对象里的数据在这个自定义组件中被展开，渲染给用户。

当用户点击这个自定义组件的时候，程序执行了 Store 对象的 selectItem 方法，这个方法负责选中用户点击的组件，改变了用户点击组件的样式，同时还取消了原来选中的组件。