feat : 通话记录组件及初始连接socket

.env.development

@@ -1,2 +1,2 @@
 # 开发环境基地址
-VITE_BASE_URL='http://frp.feashow.cn:31800/'
+VITE_BASE_URL='/api'

package.json

@@ -17,6 +17,8 @@
     "pinia": "^2.0.35",
     "sass": "^1.62.1",
     "scss": "^0.2.4",
+    "sockjs-client": "^1.6.1",
+    "stompjs": "^2.3.3",
     "unplugin-icons": "^0.16.1",
     "vite-plugin-inspect": "^0.7.26",
     "vue": "^3.2.47",

src/components/liveCall/LiveCallItem.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="live-call">
+    <div class="header">
+      <div>
+        <span style="margin-right: 20px">张三</span>
+        <span>14785295642</span>
+      </div>
+      <div><span>工单名称：xxxxxx工单</span></div>
+    </div>
+    <el-scrollbar ref="scrollbarRef" class="scrollbar">
+      <div class="chat-content" ref="innerRef">
+        <div v-for="(item,index) in recordList" :key="index">
+          <!-- 我的 -->
+          <div v-if="item.id==userId" class="word-my">
+            <div class="info">
+              <p class="time">{{ item.nickName }} </p>
+              <div class="info-content">{{ item.contactText }}</div>
+            </div>
+            <el-avatar text="我"/>
+          </div>
+          <!-- 对方 -->
+          <div v-else class="word">
+            <el-avatar text="对方"/>
+            <div class="info">
+              <p class="time">{{ item.nickName }} </p>
+              <div class="info-content">{{ item.contactText }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup>
+import Stomp from 'stompjs'
+import SockJS from 'sockjs-client/dist/sockjs.min.js'
+import {getToken} from '@/utils/auth'
+
+const userId = ref(1)
+const recordList = ref([ {
+  id: 2,
+  nickName: 'AI助手',
+  contactText: '得到222'
+},
+  {
+    id: 1,
+    nickName: '我',
+    contactText: '得到1'
+  },
+  {
+    id: 2,
+    nickName: 'AI助手',
+    contactText: '得到222'
+  },
+  {
+    id: 1,
+    nickName: '我',
+    contactText: '得到1'
+  },
+
+])
+// setInterval(() => {
+//   recordList.value.push( {
+//     id: 1,
+//     nickName: '我',
+//     contactText: '45535'
+// },
+// {
+//     id: 2,
+//     nickName: 'AI助手',
+//     contactText: '555'
+// })
+//   scrollToBottom();
+// }, 1000)
+
+
+//聊天消息滚动面板dom
+const scrollbarRef = ref(null);
+
+//滚动面板自动滑动到底部
+const scrollToBottom = () => {
+  if (scrollbarRef.value) {
+    const container = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
+    console.info("🚀 ~method:container -----", container)
+    container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
+    container.scrollTop = container.scrollHeight;
+  }
+};
+
+onMounted(() => {
+  scrollToBottom();
+})
+const initWebSocket = () => {
+  try {
+    const wsUrl = "http://frp.feashow.cn:31800/ws"
+    const socket = new SockJS(wsUrl)
+    const stompClient = Stomp.over(socket);
+    stompClient.connect(
+        {"Authorization": getToken()},//传递token
+        (frame) => {
+          //测试topic
+          stompClient.subscribe("/topic/messages", (message) => {
+            const messagesList = document.getElementById('messagesList');
+            let listItem = document.createElement('li');
+            listItem.textContent = message.body;
+            messagesList.appendChild(listItem);
+          });
+          //测试发送
+          stompClient.send("/app/receive", {}, JSON.stringify({"user": "2222222"}))
+        },
+        (err) => {
+          console.log("错误：");
+          console.log(err);
+          //10s后重新连接一次
+          setTimeout(() => {
+            initWebSocket();
+          }, 10000)
+        }
+    );
+  } catch (e) {
+    console.log(e)
+    console.log("ws连接失败");
+  }
+}
+// initWebSocket()
+</script>
+
+<style lang="scss" scoped>
+.live-call {
+  width: 48%;
+  height: 450px;
+  margin-bottom: 20px;
+  overflow: hidden;
+  border: 1px solid #d5d4d4;
+  border-radius: 10px;
+
+  .header {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 40px;
+    border-bottom: 1px solid #d5d4d4;
+  }
+
+  .scrollbar {
+    padding: 10px 10px 0 10px;
+    height: 380px;
+
+    .el-scrollbar__wrap {
+      height: 100%;
+      overflow: scroll;
+      overflow-x: auto;
+    }
+
+    // 聊天内容样式
+    .chat-content {
+      width: 100%;
+
+      .word {
+        display: flex;
+        margin-bottom: 20px;
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+
+        .info {
+          margin-left: 10px;
+
+          .time {
+            font-size: 12px;
+            color: rgba(51, 51, 51, 0.8);
+            margin: 0;
+            height: 20px;
+            line-height: 20px;
+            margin-top: -5px;
+          }
+
+          .info-content {
+            padding: 10px;
+            font-size: 14px;
+            background: #f5f5f5;
+            position: relative;
+            margin-top: 8px;
+            border: 1px solid #f5f5f5;
+          }
+
+          //小三角形
+          .info-content::before {
+            position: absolute;
+            left: -8px;
+            top: 8px;
+            content: '';
+            border-right: 10px solid #f5f5f5;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+          }
+        }
+      }
+
+      .word-my {
+        display: flex;
+        justify-content: flex-end;
+        margin-bottom: 20px;
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+
+        .info {
+          width: 90%;
+          margin-left: 10px;
+          text-align: right;
+
+          .time {
+            font-size: 12px;
+            color: rgba(51, 51, 51, 0.8);
+            height: 20px;
+            line-height: 20px;
+            margin-top: -5px;
+            margin-right: 10px;
+          }
+
+          .info-content {
+            max-width: 70%;
+            padding: 10px;
+            font-size: 14px;
+            float: right;
+            margin-right: 10px;
+            position: relative;
+            margin-top: 8px;
+            background: #A3C3F6;
+            text-align: left;
+          }
+
+          //小三角形
+          .info-content::after {
+            position: absolute;
+            right: -8px;
+            top: 8px;
+            content: '';
+            border-left: 10px solid #A3C3F6;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+          }
+        }
+      }
+    }
+
+  }
+
+}
+</style>

src/components/liveCall/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <h3 style="margin-bottom: 15px">实时通话</h3>
+  <div class="live-call-block">
+    <live-call-item v-for="item in 2"/>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.live-call-block {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 470px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+}
+</style>

src/views/home/index.vue

@@ -1,9 +1,11 @@
 <template>
-  工作台
+  <div style="padding:15px 20px;">
+    <live-call/>
+  </div>
 </template>
 
 <script setup>
-
+import LiveCall from '@/components/liveCall/index.vue'
 
 </script>