山东大学软件学院创新项目实训-基于LLM的药物分子性质分析平台（十二）

本博客主要记录前端聊天界面的实现，首先可以将页面分为两个组件，聊天列表和聊天窗口，

因此需要实现对应的组件即可，对于列表组件，该组件主要存储的是聊天列表数目，因为我们使用的有两个聊天机器人，因此frienflist里面存放两个对象，之后只需要根据v-for对列表进行遍历即可进行展示聊天列表。

对于窗口组件window，主要解决的是聊天问题，因为用户的聊天信息在窗口的右边，但是chatbot在窗口的右边，因此这里我们使用chatlist存放聊天记录，在设置一个属性type，如果type的属性值大小为0就是在左边修饰，反之就是在右边进行修饰。

      <div class="chat-content" ref="chatContent">
        <div class="chat-wrapper" v-for="item in chatList" :key="item.id">
          <div class="chat-friend" v-if="item.uid !== '1001'">
            <div class="chat-text" v-if="item.chatType == 0">
              {{ item.msg }}
            </div>
            <div class="chat-img" v-if="item.chatType == 1">
              <img
                  :src="item.msg"
                  alt="表情"
                  v-if="item.extend.imgType == 1"
                  style="width: 100px; height: 100px"
              />
              <el-image :src="item.msg" :preview-src-list="srcImgList" v-else>
              </el-image>
            </div>
            <div class="chat-img" v-if="item.chatType == 2">
              <div class="word-file">
                <FileCard
                    :fileType="item.extend.fileType"
                    :file="item.msg"
                ></FileCard>
              </div>
            </div>
            <div class="info-time">
              <img :src="item.headImg" alt=""/>
              <span>{{ item.name }}</span>
              <span>{{ item.time }}</span>
            </div>
          </div>
          <div class="chat-me" v-else>
            <div class="chat-text" v-if="item.chatType == 0">
              {{ item.msg }}
            </div>
            <div class="chat-img" v-if="item.chatType == 1">
              <img
                  :src="item.msg"
                  alt="表情"
                  v-if="item.extend.imgType == 1"
                  style="width: 100px; height: 100px"
              />
              <el-image
                  style="max-width: 300px; border-radius: 10px"
                  :src="item.msg"
                  :preview-src-list="srcImgList"
                  v-else
              >
              </el-image>
            </div>
            <div class="chat-img" v-if="item.chatType == 2">
              <div class="word-file">
                <FileCard
                    :fileType="item.extend.fileType"
                    :file="item.msg"
                ></FileCard>
              </div>
            </div>
            <div class="info-time">
              <span>{{ item.name }}</span>
              <span>{{ item.time }}</span>
              <img :src="item.headImg" alt=""/>
            </div>