add

src/axios/index.ts

@@ -2,7 +2,7 @@
 import { useUserStore } from '../store/modules/user'
 import axios from "axios";
 const instance = axios.create({
-  baseURL: "http://192.168.31.228:8080", // 设置基础 URL
+  baseURL: "http://192.168.31.123:8080", // 设置基础 URL
   // baseURL:'',
   timeout: 1000, // 设置请求超时时间
 });

src/components/AutomaticPrompt.vue

@@ -66,7 +66,6 @@ import Emotion from './IndexComponent.vue'
 import { ElLoading } from 'element-plus'
 import { ref, watch, defineEmits, defineExpose } from 'vue'
 import { upLoadFilesHander } from '../minxins/UploadMixin'
-import axios from 'axios'
 const inputVal = ref('')
 const elAutocomplete = ref<any>(null)
 const file = ref<any>(null)

src/components/IndexComponent.vue

@@ -16,6 +16,7 @@
 import { ref, watch, defineEmits, defineExpose, defineProps } from 'vue'
 const list = ref([])
 import * as emoji from 'emoji.json'
+console.log(emoji,'打印emoji')
 const getList = () => {
   list.value = emoji.slice(0, 50)
   list.value.push(emoji[55])

src/components/Menu/RightClickMenu.ts

 import { h, render, reactive, ref, defineEmits } from "vue";
 import RightClickMenu from "./RightClickMenu.vue";
-// export function openRightClickMenu(e: MouseEvent) {
-//   const contextMenuVisible = ref(false);
-//   const contextMenuTop = ref(0);
-//   const contextMenuLeft = ref(0);
-//   const contextMenuIndex = ref(0);
-//   const scope = document.body;
-//   const containerEl: any = document.createElement("div");
-//   const vnode:any = h(RightClickMenu, {
-//     visible: contextMenuVisible.value,
-//     menuList: [
-//       "复制",
-//       "翻译",
-//       "设为客户名称",
-//       "设置国家/地区",
-//       "设为Email",
-//       "设为watchApp",
-//     ],
-//     active: contextMenuIndex.value,
-//     handleItemClick: (item: any, index: number) => {
-//       console.log(item);
-//       contextMenuIndex.value = index;
-
-//     },
-//   });
-
-//   render(vnode, containerEl);
-//   containerEl.style.position = "fixed";
-//   containerEl.style["z-index"] = "1000";
-//   scope?.appendChild(containerEl);
-//   const showContextMenu1 = (event: any, item: any) => {
-//     //阻止默认右键事件
-//     event.preventDefault();
-//     //菜单可见
-//     contextMenuVisible.value = true;
-//     //获取鼠标坐标
-//     contextMenuTop.value = event.clientY;
-//     contextMenuLeft.value = event.clientX;
-//     // 检测是否超出浏览器视口区域  一个菜单40px*6个
-//     const menuHeight = 300; // 右键菜单的高度
-//     const windowHeight = window.innerHeight;
-
-//     if (event.clientY + menuHeight > windowHeight) {
-//       // 如果右键菜单超出视口底部，调整位置为向上弹出
-//       contextMenuTop.value -= menuHeight;
-//     }
-//     containerEl.style.top = `${contextMenuTop.value}px`;
-//     containerEl.style.left = `${contextMenuLeft.value}px`;
-//     window.addEventListener("click", hideContextMenu2);
-//   };
-//   //隐藏右键菜单的函数，移除点击事件监听器，并将 contextMenuVisible 设置为 false
-//   const hideContextMenu2 = (e: any) => {
-//     console.log(vnode,'打印');
-//     const pop: any = document.querySelector("#select-box1");
-//     if (!e || (e?.target && !pop.contains(e?.target))) {
-//       contextMenuVisible.value = false;
-//       vnode.props.visible = false;
-//       console.log(contextMenuVisible.value, "关闭");
-//       window.removeEventListener("click", hideContextMenu2);
-//     }
-//   };
-
-//   return {
-//     showContextMenu1,
-//     hideContextMenu2,
-//   };
-// }
-
 export default function useMenu(e: MouseEvent) {
   const contextMenuVisible = ref(true);
   const contextMenuTop = ref(0);
@@ -103,12 +36,12 @@ export default function useMenu(e: MouseEvent) {
     if (containerEl) containerEl.style.position = "fixed";
     if (containerEl) containerEl.style["z-index"] = "1000";
   };
-  const showContextMenu1 = (event: any, item: any) => {
+  const showContextMenu = (event: any, item: any) => {
     //阻止默认右键事件
     event.preventDefault();
     //菜单可见
     contextMenuVisible.value = true;
-    openRightClickMenu(e)
+    openRightClickMenu(e);
     //获取鼠标坐标
     contextMenuTop.value = event.clientY;
     contextMenuLeft.value = event.clientX;
@@ -122,21 +55,21 @@ export default function useMenu(e: MouseEvent) {
     }
     containerEl.style.top = `${contextMenuTop.value}px`;
     containerEl.style.left = `${contextMenuLeft.value}px`;
-    window.addEventListener("click", hideContextMenu2);
+    window.addEventListener("click", hideContextMenu);
   };
   //隐藏右键菜单的函数，移除点击事件监听器，并将 contextMenuVisible 设置为 false
-  const hideContextMenu2 = (e: any) => {
+  const hideContextMenu = (e: any) => {
     const pop: any = document.querySelector("#select-box1");
     if (!e || (e?.target && !pop.contains(e?.target))) {
       contextMenuVisible.value = false;
       setComponent();
-      window.removeEventListener("click", hideContextMenu2);
+      window.removeEventListener("click", hideContextMenu);
     }
   };
   return {
     contextMenuVisible,
     openRightClickMenu,
-    showContextMenu1,
-    hideContextMenu2,
+    showContextMenu,
+    hideContextMenu,
   };
 }

src/store/modules/user.ts

@@ -26,11 +26,7 @@ export const useUserStore = defineStore("user", {
     setUserInfo(res: any) {
       this.userInfo = res;
     },
-    // setUserList(res: any) {
-    //   this.userList = res;
-    // },
     setUserListMessages(res: any) {
-      console.log("调取setUserListMessages");
       return new Promise((resolve, reject) => {
         const query = {
           code: this.userInfo.username,
@@ -41,6 +37,7 @@ export const useUserStore = defineStore("user", {
               return {
                 ...item,
                 username: item.id,
+                userImg:"https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png",
                 messages: [],
               };
             });

src/utils/websocket.ts

@@ -84,7 +84,7 @@ function websocketclose(e: any) {
 function websocketsend(res: any) {
   if (websocket && useUserStore().isConnected) {
     // 检查连接状态
-    console.log("发送的数据", websocket);
+    console.log("发送的数据", JSON.stringify(res));
     websocket.send(JSON.stringify(res));
   } else {
     ElMessage({

src/views/HomeView.vue

@@ -23,7 +23,7 @@
                   <div class="user-name-box">
                     <span class="user-name">{{ item?.nick }}</span>
                     <div class="user-time">
-                      {{ item?.createTime }}
+                      {{ item?.time }}
                     </div>
                   </div>
                   <div class="user-reply-box">
@@ -60,9 +60,9 @@
             :key="index"
             :class="getMessageClass(message)"
           >
-            <div class="time">{{ message.createTime }}</div>
+            <div class="time">{{ message.time }}</div>
             <div v-if="isSelf(message)" class="message-container">
-              <div class="bubble" @contextmenu="showContextMenu1($event, item)">
+              <div class="bubble" @contextmenu="showContextMenu($event, item)">
                 <div v-if="message?.msgType == 0" class="message">
                   <div class="content" v-html="message?.content"></div>
                   <div class="contentFy" v-html="message?.contentFy"></div>
@@ -86,7 +86,7 @@
               <div class="avatar">
                 <img :src="message?.userImg" class="avatar-image" />
               </div>
-              <div class="bubble" @contextmenu="showContextMenu1($event, item)">
+              <div class="bubble" @contextmenu="showContextMenu($event, item)">
                 <div v-if="message?.msgType == 0" class="message">
                   <div class="content" v-html="message?.content"></div>
                   <div class="contentFy" v-html="message?.contentFy"></div>
@@ -244,18 +244,14 @@ import { sendWebSocket } from '../utils/websocket'
 import type { FormInstance } from 'element-plus'
 import { initWebSocket } from '../utils/websocket'
 import '@luohc92/vue3-image-viewer/dist/style.css'
-import { getUserList, InquiryAdd, checkMesssages } from '../axios/model/user'
+import { InquiryAdd, checkMesssages } from '../axios/model/user'
 import useMenu from '@/components/Menu/RightClickMenu'
-let { showContextMenu1, hideContextMenu2 } = useMenu()
-//显示右键菜单的函数，在右键点击时调用。
-//它阻止了默认的右键菜单并设置了菜单的位置，同时添加了一个点击事件监听器来在其他地方点击时隐藏菜单。
-//处理右键菜单项点击的函数，你可以在这里处理点击菜单项后的逻辑。
+let { showContextMenu, hideContextMenu } = useMenu()
 const ruleForm = ref({
   count: 1,
 })
 const ruleFormRef = ref<FormInstance>()
 const messages = ref([])
-// const { getUseUserStore.userInfo, setcurrentInfo, userList } = useUserStore()
 const getUseUserStore = useUserStore()
 const list = ref([])
 const automaticPromptRef = ref('')
@@ -316,7 +312,7 @@ let currentInfo = ref({
 })
 const connectMsg = () => {
   const useUser = useUserStore()
-  const toIp = `ws://192.168.31.228:8081?type=kf&code=${getUseUserStore.userInfo?.username}`
+  const toIp = `ws://192.168.31.123:8081?type=kf&code=${getUseUserStore.userInfo?.username}`
   useUser.connect()
   initWebSocket(toIp)
   useUser.setUserListMessages({}).then((res: any) => {
@@ -341,12 +337,20 @@ const getCheckMesssages = async (res: any) => {
     let query = {
       sessionId: res.sessionId,
     }
-    const { success, result, message }: any = await checkMesssages(query)
-    currentInfo.value = JSON.parse(JSON.stringify(res))
-    console.log(currentInfo)
-    currentInfo.value.messages = result
-    messages.value = result
-    console.log(messages.value)
+    const { success, result }: any = await checkMesssages(query)
+    if (success) {
+      currentInfo.value = JSON.parse(JSON.stringify(res))
+      result.forEach((item: any) => {
+        item.userImg =
+          'https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png'
+      })
+      currentInfo.value.messages = result.map((item: any) => {
+        return {
+          ...item,
+        }
+      })
+      messages.value = result
+    }
     getUseUserStore.setCustomerInfo(currentInfo.value)
     setSrollHeight()
   } catch (error) {
@@ -356,8 +360,7 @@ const getCheckMesssages = async (res: any) => {
 //监听聊天数据的改变
 watch(
   () => getUseUserStore.userList,
-  (newVal, oldValue) => {
-    console.log(getUseUserStore.userList, '监听')
+  (newVal) => {
     // 执行其他逻辑...
     list.value = newVal
     if (newVal && newVal.length > 0 && currentInfo.value.username) {
@@ -372,7 +375,13 @@ watch(
     deep: true,
   },
 )
-
+watch(
+  messages,
+  (newVal) => {
+    if (newVal?.length > 0) setSrollHeight()
+  },
+  { deep: true },
+)
 //让聊天滑动窗口滑到底部
 const setSrollHeight = () => {
   nextTick(() => {
@@ -380,7 +389,6 @@ const setSrollHeight = () => {
     if (div) div.scrollTop = div?.scrollHeight
   })
 }
-
 //切换聊天人
 const handleMenuClick = (item: object) => {
   getCheckMesssages(item)
@@ -405,7 +413,7 @@ const handleButtonClick = () => {
     group_id: '',
     toCode: currentInfo.value.username,
     fromCode: getUseUserStore.userInfo.username,
-    createTime: getShortDate(),
+    time: getShortDate(),
     to: currentInfo.value.username,
     from: getUseUserStore.userInfo.username,
   }
@@ -414,47 +422,8 @@ const handleButtonClick = () => {
   automaticPromptRef.value.setState('')
 }
 
-// const handleMessageClick = (event: any) => {
-//   const target = event.target
-//   if (target.tagName === 'A') {
-//     // 点击的是超链接
-//     // 执行相应的操作
-//     if (target.innerHTML === '解决') {
-//       alert('感谢您的使用')
-//     } else if (target.innerHTML === '未解决') {
-//       alert('很抱歉未能解决你的问题')
-//     } else {
-//       handleLinkClick(target.innerHTML)
-//     }
-//   } else if (target.tagName === 'IMG') {
-//     // 点击的图片进行放大操作
-//     ImageViewer({
-//       //切记额images这个参数是数组，我的target.valueof().src值是一个http的图片地址
-//       images: [target.valueOf().src],
-//       curIndex: 0,
-//       zIndex: 2000,
-//       showDownload: true,
-//       showThumbnail: true,
-//       handlePosition: 'bottom',
-//       maskBgColor: 'rgba(0,0,0,0.7)',
-//       onClose: () => {
-//         console.log('close')
-//       },
-//     })
-//   }
-// }
-
-//点击消息弹窗
-// const showContextMenu = (e: any, item: any) => {
-//   e.preventDefault()
-//   const { closeMenu, openMenu, isShow } = openCountextMenus(e)
-//   if (isShow) closeMenu()
-//   openMenu(e)
-// }
-
 //提交询价单
 const sumbitFuleForm = (formEl: FormInstance | undefined) => {
-  let query = {}
   if (!formEl) return
   formEl.validate(async (valid: boolean) => {
     if (valid) {
@@ -474,9 +443,6 @@ const sumbitFuleForm = (formEl: FormInstance | undefined) => {
     }
   })
 }
-// const handleLinkClick = (msg: string) => {
-//   messages.value.push({ content: msg, isSent: true })
-// }
 //消息框样式动态选择
 const getMessageClass = (message: any) => {
   return isSelf.value(message)
@@ -640,7 +606,7 @@ const getMenuItem = (item: any) => {
       word-break: break-all;
       text-overflow: ellipsis;
       overflow: hidden;
-      max-width: 120px;
+      max-width: 80px;
       font-size: 16px;
       color: rgba(0, 0, 0, 0.65);
       margin-right: 10px;
@@ -651,10 +617,9 @@ const getMenuItem = (item: any) => {
   }
 
   .user-reply {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
+    word-break: break-all;
+    text-overflow: ellipsis;
+    max-width: 150px;
     overflow: hidden;
     color: #798494;
     font-feature-settings: 'clig' off, 'liga' off;
@@ -826,6 +791,8 @@ const getMenuItem = (item: any) => {
   color: #000;
   font-size: 14px;
   overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
   .img-wraper img {
     max-width: 100%;
     height: auto;