add

src/App.vue

 <template>
   <div>
-    <header>
-      <div class="operation">
-        <el-button @click="changeLang('zhcn')" class="mr10">中文</el-button>
-        <el-button @click="changeLang('en')" class="mr10">英文</el-button>
-        <el-button @click="changeLang('ko')" class="mr10">韩文</el-button>
-        <el-button @click="changeLang('ja')" class="mr10">日文</el-button>
-      </div>
-    </header>
     <router-view />
   </div>
 </template>
 <script setup lang="ts">
-const changeLang = (value:any)=> {
-    localStorage.setItem('lang', value)
-    location.reload();
-  }
+const changeLang = (value: any) => {
+  localStorage.setItem('lang', value)
+  location.reload()
+}
 </script>
 <style lang="scss">
 * {

src/axios/index.ts

 // axios.js
 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:'/api',
   timeout: 1000, // 设置请求超时时间
 });

src/axios/model/user.ts

@@ -27,7 +27,7 @@ const Kjiehuifu = (query: any) => {
 //获取用户列表
 const getUserList = (query: any) => {
   return http({
-    url: "/getUserList",
+    url: "/kf/chat/getChatList",
     method: "get",
     data: query,
   });
@@ -35,9 +35,9 @@ const getUserList = (query: any) => {
 //查看未读消息
 const checkMesssages = (query: any) => {
   return http({
-    url: "/checkMesssages",
+    url: "/kf/chat/getChatHisList",
     method: "get",
-    data: query,
+    params: query,
   });
 };
 //上传接口

src/components/IndexComponent.vue

@@ -16,12 +16,14 @@
 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])
-  list.value.push(emoji[56])
-  list.value.push(emoji[57])
-  list.value.push(emoji[60])
+  let info = emoji.default
+  list.value = info.slice(0, 50)
+  list.value.push(info[55])
+  list.value.push(info[56])
+  list.value.push(info[57])
+  list.value.push(info[60])
 }
 const emits = defineEmits(['emotion'])
 const clickHandler = (i: number | string) => {

src/utils/websocket.ts

@@ -48,7 +48,6 @@ function initWebSocket(wsUrl: string) {
 
 // 定义重连函数
 const reConnect = (wsUrl: string) => {
-  console.log("尝试重新连接");
   if (useUserStore().isConnected) return; // 如果已经连上就不在重连了
   rec && clearTimeout(rec);
   rec = setTimeout(function () {
@@ -59,12 +58,12 @@ const reConnect = (wsUrl: string) => {
 
 // 创建连接
 function websocketOpen() {
-  console.log("连接成功");
   useUserStore().connect();
 }
 // 数据接收
 function websocketonmessage(e: MessageEvent<any>) {
   const res = JSON.parse(e.data); // 解析JSON格式的数据
+  console.log(res, "接受到的数据");
   // 下面的判断则是后台返回的接收到的数据  如何处理自己决定
   if (res.command == 11) {
     //将数据放在store中
@@ -124,5 +123,4 @@ const closeWebSocket = () => {
   }
 };
 
-
 export { initWebSocket, sendWebSocket, creatWebSocket, closeWebSocket };

src/views/HomeView.vue

@@ -3,18 +3,18 @@
     <el-container>
       <el-container class="el-container-center" v-if="customerInfo.username">
         <el-header class="el-header-center">
-          <p class="name">{{ customerInfo.username }}</p>
-          <p class="url">US｜https://www.ibeautytop.com</p>
+          <p class="onlineCustomer">您正在与 在线客服 对话</p>
         </el-header>
         <el-main
           id="srollId"
           ref="srollId"
           :style="{
-            height: '600px',
+            height: '60vh',
             width: '100%',
             border: '1px solid #ccc',
           }"
         >
+          <div class="title">您好，系统正在为您接入在线客服</div>
           <div
             class="message-container"
             v-for="(message, index) in messages"
@@ -67,20 +67,36 @@
           </div>
         </el-main>
         <el-footer class="el-footer">
+          <div class="static-box">
+            <div
+              v-for="(item, index) in staticList"
+              :key="index"
+              class="staticList"
+            >
+              <div>{{ item }}</div>
+            </div>
+          </div>
           <AutomaticPrompt
             @keydown.enter="handleButtonClick"
             @updateState="getState"
             ref="automaticPromptRef"
           ></AutomaticPrompt>
-          <el-button
-            type="primary"
-            plain
-            class="btn-send"
-            style="width: 50px;"
-            @click.stop="handleButtonClick"
-          >
-            发送
-          </el-button>
+          <div class="btn-send">
+            <el-button
+              plain
+              style="width: 50px; background: #f8f8fa; color: #000;"
+              @click.stop="handleButtonClick"
+            >
+              Finish
+            </el-button>
+            <el-button
+              style="width: 50px; color: #fff; background: #000;"
+              plain
+              @click.stop="handleButtonClick"
+            >
+              send
+            </el-button>
+          </div>
         </el-footer>
       </el-container>
       <el-container class="el-container-center" v-else></el-container>
@@ -90,95 +106,41 @@
 <script lang="ts" setup>
 import '../assets/font/iconfont.css'
 import { ElMessage } from 'element-plus'
-import {
-  ref,
-  onMounted,
-  watch,
-  nextTick,
-  reactive,
-  getCurrentInstance,
-} from 'vue'
+import { ref, onMounted, watch, nextTick, getCurrentInstance } from 'vue'
 import { getShortDate } from '../utils/index'
 import { useUserStore } from '../store/modules/user'
 import AutomaticPrompt from '../components/AutomaticPrompt.vue'
 import ImageViewer from '@luohc92/vue3-image-viewer'
 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 { v4 as uuidv4 } from 'uuid'
-import { getUserList, InquiryAdd, checkMesssages } from '../axios/model/user'
-const ruleForm = ref({
-  count: 1,
-})
-const { appContext } = getCurrentInstance()
-const ruleFormRef = ref<FormInstance>()
+import { checkMesssages } from '../axios/model/user'
 const customerInfo = ref({})
 const messages = ref([])
-const count = ref(0)
+const staticList = ref([
+  'Login account',
+  'Forgot password',
+  'Free entry',
+  'Add/manage products',
+  'improve',
+])
 const store = useUserStore()
 const automaticPromptRef = ref('')
-const rules = reactive({
-  customerName: [
-    {
-      required: true,
-      message: '请输入客户名称',
-      trigger: 'blur',
-    },
-  ],
-  countriesRegions: [
-    {
-      required: true,
-      message: '请输入国家/地区',
-      trigger: 'blur',
-    },
-  ],
-  Email: [
-    {
-      required: true,
-      message: '请输入Email',
-      trigger: 'blur',
-    },
-  ],
-  WatchApp: [
-    {
-      required: true,
-      message: '请输入WatchApp',
-      trigger: 'blur',
-    },
-  ],
-  remark: [
-    {
-      required: true,
-      message: '请输入描述',
-      trigger: 'blur',
-    },
-  ],
-  content: [
-    {
-      required: true,
-      message: '请输入描述',
-      trigger: 'blur',
-    },
-  ],
-})
 let msg = ''
 //进入页面直接发送请求从后端获取热点数据
 onMounted(async () => {
   connectMsg().then((res) => {
-  // const translate = appContext.config.globalProperties.$translate
-  getHistoryMessage()
-  setMessage()
+    getHistoryMessage()
+    setMessage()
   })
 })
 const connectMsg = () => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve: any, reject: any) => {
     const useUser = useUserStore()
     useUser.setUserInfo({
       username: Date.now(),
     })
-    const toIp = `ws://192.168.31.228:8081?type=yk&code=${useUser.userInfo.username}&kf=${store.customerInfo.username}`
-    console.log(toIp)
+    const toIp = `ws://192.168.31.123:8081?type=yk&code=${useUser.userInfo.username}&kf=${store.customerInfo.username}`
     useUser.connect()
     initWebSocket(toIp)
     setTimeout(() => {
@@ -195,8 +157,9 @@ const getHistoryMessage = () => {
     group_id: '',
     userId: store.userInfo.username,
   }
+  console.log(data)
   sendWebSocket(data)
-  getCheckMesssages(data)
+  // getCheckMesssages(data)
 }
 
 //设置message
@@ -248,7 +211,6 @@ const handleButtonClick = () => {
     to: customerInfo.value.username,
     form: store.userInfo.username,
   }
-  console.log('打印用户发送的内容', data)
   messages.value?.push(data)
   sendWebSocket(data)
   automaticPromptRef.value.setState('')
@@ -301,6 +263,32 @@ const getMessageClass = (isSent: boolean) => {
 }
 </script>
 <style lang="scss" scoped>
+.title {
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  width: 196px;
+  background: #f8f8fa;
+  font-size: 12px;
+  font-family: 'PingFang SC';
+  font-weight: 400;
+  margin: 0px auto;
+  color: #798494;
+}
+.onlineCustomer {
+  height: 44px;
+  padding: 8px;
+  line-height: 44px;
+  align-items: center;
+  gap: 8px;
+  background: rgba(248, 248, 250, 1);
+  font-family: 'PingFang SC';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+}
 .el-header-left {
   height: 76px;
   width: 100%;
@@ -322,13 +310,13 @@ const getMessageClass = (isSent: boolean) => {
   }
 }
 .el-container-center {
-  background: #e6e8ed;
+  background: #fff;
+}
+.el-header {
+  padding: 0px;
 }
 .el-header-center {
-  height: 76px;
-  width: 100%;
   border: 1px solid #e6e8ed;
-  padding: 16px 24px;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
@@ -367,14 +355,35 @@ const getMessageClass = (isSent: boolean) => {
   width: 100%;
   border: 1px solid #ccc;
   border-top: 0px;
-  padding: 10px;
-  height: calc(100vh - 600px - 76px);
+  padding: 0px;
+  height: calc(100vh - 60vh - 60px);
   position: relative;
   .btn-send {
     position: absolute;
     bottom: 20px;
     right: 20px;
   }
+
+  .static-box {
+    display: flex;
+    background: #e6e8ed;
+    padding: 8px 16px;
+  }
+  .staticList {
+    height: 36px;
+    border: 1px solid #e6e8ed;
+    border-radius: 36px;
+    background: #fff;
+    width: max-width;
+    color: #000000;
+    padding: 0px 16px;
+    font-family: 'Inter';
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 36px;
+    text-align: center;
+    margin-right: 8px;
+  }
 }
 .el-menu-item {
   line-height: initial;
@@ -452,7 +461,7 @@ const getMessageClass = (isSent: boolean) => {
       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;
@@ -463,10 +472,9 @@ const getMessageClass = (isSent: boolean) => {
   }
 
   .user-reply {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
+    word-break: break-all;
+    text-overflow: ellipsis;
+    max-width: 80px;
     overflow: hidden;
     color: #798494;
     font-feature-settings: 'clig' off, 'liga' off;
@@ -638,6 +646,8 @@ const getMessageClass = (isSent: boolean) => {
   color: #000;
   font-size: 14px;
   overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
   .img-wraper img {
     max-width: 100%;
     height: auto;