From 6b16395a9a9babb18d01cf7213add0b84863b2b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Thu, 10 Aug 2023 14:13:41 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E9=83=A8=E5=88=86api=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |   2 +-
 src/apis/sendMessage.js                       |  11 ++
 src/apis/user.js                              |   2 +-
 src/stores/ckeditor.js                        |  11 ++
 src/utlis/myUploadAdapter.js                  | 104 ++++++++++++++++++
 src/views/customer/LoginView.vue              |  32 +++---
 src/views/customer/components/Chat.vue        |   6 +-
 src/views/customer/components/JimiLeft.vue    |   2 +-
 .../customer/components/JimiLeftHeader.vue    |  11 +-
 src/views/customer/components/Operation.vue   |  67 +++++------
 10 files changed, 183 insertions(+), 65 deletions(-)
 create mode 100644 src/apis/sendMessage.js
 create mode 100644 src/stores/ckeditor.js
 create mode 100644 src/utlis/myUploadAdapter.js

diff --git a/package-lock.json b/package-lock.json
index 73f84ae..b7cf98e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4098,7 +4098,7 @@
       "version": "5.1.6",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.1.6.tgz",
       "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
diff --git a/src/apis/sendMessage.js b/src/apis/sendMessage.js
new file mode 100644
index 0000000..df2fe5b
--- /dev/null
+++ b/src/apis/sendMessage.js
@@ -0,0 +1,11 @@
+import axios from '../axios/axios';
+
+// 获取用户信息
+
+export function sendMessage(file) {
+	return axios.post('/conversation/img/save', file, {
+		headers: {
+			'Content-Type': 'multipart/form-data',
+		},
+	});
+}
diff --git a/src/apis/user.js b/src/apis/user.js
index 3a32dee..dede786 100644
--- a/src/apis/user.js
+++ b/src/apis/user.js
@@ -9,7 +9,7 @@ import axios from '../axios/axios';
 
 export function login(userName, password) {
 	return axios.post(
-		'/chat/user/save',
+		'/login',
 		{
 			userName,
 			password,
diff --git a/src/stores/ckeditor.js b/src/stores/ckeditor.js
new file mode 100644
index 0000000..a3da722
--- /dev/null
+++ b/src/stores/ckeditor.js
@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+const useCkeditorStore = defineStore('ckeditor', () => {
+	const editorResult = ref('');
+	return {
+		editorResult,
+	};
+});
+
+export default useCkeditorStore;
diff --git a/src/utlis/myUploadAdapter.js b/src/utlis/myUploadAdapter.js
new file mode 100644
index 0000000..e7f4517
--- /dev/null
+++ b/src/utlis/myUploadAdapter.js
@@ -0,0 +1,104 @@
+function MyUploadAdapter(loader) {
+	let reader;
+
+	return {
+		upload: async () => {
+			reader = new FileReader();
+			const file = await loader.file;
+
+			// console.log(loader,file,reader,'loader,file,reader')
+
+			const result = await new Promise((resolve, reject) => {
+				reader.addEventListener('load', () => {
+					// 检查图片大小de
+					if (file.size > 2 * 1024 * 1024) {
+						// 2MB
+						// 图片大小超出限制，不执行上传
+						reject('图片大小超过限制');
+					} else {
+						// 加载图片
+						const img = new Image();
+						img.src = reader.result;
+						img.onload = () => {
+							const maxDimension = 300;
+							// 最大尺寸maxDimension,可以根据需要调整这个值来控制压缩后的图片尺寸
+							let newWidth = img.width;
+							let newHeight = img.height;
+
+							if (newWidth > newHeight) {
+								if (newWidth > maxDimension) {
+									newHeight *= maxDimension / newWidth;
+									newWidth = maxDimension;
+								}
+							} else {
+								if (newHeight > maxDimension) {
+									newWidth *= maxDimension / newHeight;
+									newHeight = maxDimension;
+								}
+							}
+							const canvas = document.createElement('canvas');
+							//设置canvas尺寸为压缩后的尺寸
+							canvas.width = newWidth;
+							canvas.height = newHeight;
+							const ctx = canvas.getContext('2d');
+							// canvas中，png转jpg会变黑底，所以先给canvas铺一张白底
+							ctx.fillStyle = '#fff';
+							// fillRect()方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在
+							// (x, y) ，它的宽度和高度分别由width 和 height 确定，填充样式由当前的fillStyle 决定。
+							ctx.fillRect(0, 0, canvas.width, canvas.height);
+							// 绘制图像
+							ctx.drawImage(img, 0, 0, newWidth, newHeight);
+							// canvas转图片达到图片压缩效果
+							// 返回一个包含图片展示的 data URI base64 在指定图片格式为 image/jpeg 或 image/webp的情况下，
+							// 可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
+							const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
+
+							// base64格式文件转成Blob文件格式
+							// const blobFile = dataURLtoBlob(dataUrl);
+							// 拿到这个blobFile文件也可以作为返回值
+
+							resolve({ default: dataUrl });
+						};
+					}
+				});
+
+				reader.addEventListener('error', (err) => {
+					reject(err);
+				});
+
+				reader.addEventListener('abort', () => {
+					reject();
+				});
+				// readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，
+				// 同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
+				reader.readAsDataURL(file);
+			});
+
+			return result;
+		},
+		abort: () => {
+			reader.abort();
+		},
+	};
+}
+
+// canvas生成的格式为base64，如果需要Blob格式可按如下进行转化
+// function dataURLtoBlob(dataurl) {
+//   const arr = dataurl.split(","),
+//     mime = arr[0].match(/:(.*?);/)[1],
+//     bstr = atob(arr[1]);
+//   let n = bstr.length;
+//   const u8arr = new Uint8Array(n);
+//   while (n--) {
+//     u8arr[n] = bstr.charCodeAt(n);
+//   }
+//   return new Blob([u8arr], { type: mime });
+// }
+
+function MyAdapterPlugin(editor) {
+	editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+		return new MyUploadAdapter(loader);
+	};
+}
+
+export default MyAdapterPlugin;
diff --git a/src/views/customer/LoginView.vue b/src/views/customer/LoginView.vue
index 6350168..4bff4c4 100644
--- a/src/views/customer/LoginView.vue
+++ b/src/views/customer/LoginView.vue
@@ -9,8 +9,8 @@ const loginFormRef = ref();
 const router = useRouter();
 const formData = reactive({
 	form: {
-		username: 'aaaa',
-		password: '123456',
+		username: 'admin',
+		password: 'admin',
 	},
 	rules: {
 		username: [
@@ -53,24 +53,18 @@ const onSubmit = async () => {
 		const res = await login(formData.form.username, formData.form.password);
 		console.log(res);
 		// 响应成功的处理
-		if (res.data.code === 200) {
-			const jsonData = JSON.parse(res.data.data);
+		if (res.data.code === 19000200) {
+			const jsonData = res.data.data;
+			console.log(jsonData);
 
-			console.log(jsonData.username);
-			console.log(jsonData.url);
-			console.log(jsonData.auth);
-			username = jsonData.username;
-			console.log(username);
-			if (jsonData.auth === '0') {
-				router.push({ name: 'admin' });
-			} else {
-				router.push({
-					name: 'home',
-					query: {
-						username: username,
-					},
-				});
-			}
+			router.push({
+				name: 'home',
+				query: {
+					userId: res.data.data.userId,
+					username: res.data.data.userName,
+					avatar: res.data.data.avatar,
+				},
+			});
 		} else {
 			alert(res.data.msg);
 		}
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index 4e1ce8c..dbd60e6 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -101,7 +101,6 @@ li {
 }
 .message-right {
 	margin-top: 10px;
-	margin-left: 10px;
 	width: 100%;
 	display: flex;
 	align-items: flex-start;
@@ -165,4 +164,9 @@ p {
 .name {
 	font-size: smaller;
 }
+
+.message-l img {
+	width: 200px;
+	height: 200px;
+}
 </style>
diff --git a/src/views/customer/components/JimiLeft.vue b/src/views/customer/components/JimiLeft.vue
index 078a841..b7d333f 100644
--- a/src/views/customer/components/JimiLeft.vue
+++ b/src/views/customer/components/JimiLeft.vue
@@ -38,7 +38,7 @@ const contracts = reactive([
 	},
 ]);
 onMounted(() => {
-	gteAllList(1);
+	// gteAllList(1);
 });
 
 async function gteAllList(userId) {
diff --git a/src/views/customer/components/JimiLeftHeader.vue b/src/views/customer/components/JimiLeftHeader.vue
index 137eb15..7ae0322 100644
--- a/src/views/customer/components/JimiLeftHeader.vue
+++ b/src/views/customer/components/JimiLeftHeader.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="header-container">
 		<div class="user-info">
-			<el-avatar class="user-avatar" shape="square" :src="DefaultUserAvatar" />
+			<el-avatar class="user-avatar" shape="square" :src="userInfo.avatar" />
 			<div style="display: flex; flex-direction: column; justify-content: center">
-				<span class="user-account-text">{{ userInfo.account }}</span>
+				<span class="user-account-text">{{ userInfo.userName }}</span>
 				<div>
 					<span class="plus-logo">PLUS</span>
 				</div>
@@ -22,13 +22,18 @@
 import DefaultUserAvatar from '@/assets/img/default-user-avatar.png';
 import { reactive, ref } from 'vue';
 import { Search } from '@element-plus/icons-vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 /**
  * 用户信息
  * account:用户名
  * isPlus:是否会员
  */
 const userInfo = reactive({
-	account: 'jd zxcvbmmnkscx',
+	userName: route.query.username,
+	userId: route.query.userId,
+	avatar: route.query.avatar || DefaultUserAvatar,
 	isPlus: false,
 });
 
diff --git a/src/views/customer/components/Operation.vue b/src/views/customer/components/Operation.vue
index bc37a08..b274216 100644
--- a/src/views/customer/components/Operation.vue
+++ b/src/views/customer/components/Operation.vue
@@ -79,33 +79,25 @@ const editorConfig = {
 	language: 'zh-cn',
 	// 工具列
 	toolbar: {
-		items: ['imageUpload'],
-	},
-	image: {
-		toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
-	},
-	table: {
-		contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
-	},
-	ckfinder: {
-		uploadUrl: `/api/conversation/img/save`, // 上传图片接口
-		options: {
-			resourceType: 'Images',
-		},
-		on: {
-			fileUploadResponse: (eventInfo) => {
-				console.log('上传图片返回信息：', eventInfo);
-				// 在这里获取上传后的图片 URL
-				if (eventInfo.response.default && eventInfo.response.default.url) {
-					const imageUrl = eventInfo.response.default.url;
-					console.log('上传成功，图片URL：', imageUrl);
-					// 可以将 imageUrl 存储到你的数据中，如 editorDesign
-					editorDesign.value += `<img src="${imageUrl}" alt="Uploaded Image" />`;
-				} else {
-					console.log('上传失败');
-				}
-			},
-		},
+		items: [
+			//   'heading',
+			//   '|',
+			//   'bold',
+			//   'italic',
+			//   'link',
+			//   'bulletedList',
+			//   'numberedList',
+			//   '|',
+			//   'outdent',
+			//   'indent',
+			//   '|',
+			'imageUpload',
+			//   'blockQuote',
+			//   'insertTable',
+			//   'mediaEmbed',
+			//   'undo',
+			//   'redo'
+		],
 	},
 };
 
@@ -139,11 +131,6 @@ const onEditorDestroy = () => {
  * 发送聊天消息
  * @param {string} msg 消息内容
  */
-const send = () => {
-	console.log(editorDesign.value);
-	// alert(editorDesign.value);
-
-	const _msg = editorDesign.value;
 
 const send = () => {
 	console.log(editorResult.value);
@@ -155,18 +142,20 @@ const send = () => {
 		//这里是你要传给后端的所有数据，包括用户信息，和聊天数据
 		msg: _msg,
 	};
-	sendMessage(param).then((res) => {
-		console.log(res);
-	});
-	if (!_msg.trim().length) {
-		return;
-	}
+	console.log('aaaaaaaaaaaaaaaaa');
+	console.log(param);
+	// sendMessage(param).then((res) => {
+	// 	console.log(res);
+	// });
+	// if (!_msg.trim().length) {
+	// 	return;
+	// }
 
 	ws.send(
 		JSON.stringify({
 			userId: 1,
 			convId: 1,
-			message: editorDesign.value,
+			message: editorResult.value,
 		})
 	);
 
-- 
Gitee


From aa68eaf014ab8a69d0ba532e78a60a2327799c95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Thu, 10 Aug 2023 16:09:15 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E8=B7=9F=E8=81=8A=E5=A4=A9=E9=A1=B5=E9=9D=A2=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain.vue           |  2 +
 src/layout/components/Header.vue            |  8 ++--
 src/views/customer/components/Chat.vue      |  2 +-
 src/views/customer/components/JimiLeft.vue  | 50 +++++++++++----------
 src/views/customer/components/Operation.vue | 13 ++++--
 5 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index eb771a1..fdef86d 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -17,6 +17,8 @@ import AsideMessage from '@/views/customer/components/AsideMessage.vue';
 // eslint-disable-next-line vue/require-prop-types
 const props = defineProps(['userInfo']);
 
+// eslint-disable-next-line vue/no-setup-props-destructure
+console.log('assdddddd');
 // eslint-disable-next-line vue/no-setup-props-destructure
 console.log(props.userInfo);
 </script>
diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue
index 81725a8..394d79e 100644
--- a/src/layout/components/Header.vue
+++ b/src/layout/components/Header.vue
@@ -1,15 +1,17 @@
 <!-- eslint-disable vue/multi-word-component-names -->
+<!-- eslint-disable vue/attributes-order -->
 <template>
 	<div class="header-container">
-		<el-avatar :src="userInfo.item.avatar" shape="square" class="user-avatar" />
-		<el-text class="user-account">{{ userInfo.item.username }}</el-text>
+		<el-avatar :src="userInfo.item.user.avatar" shape="square" class="user-avatar" v-if="userInfo.item != ''" />
+		<el-text class="user-account" v-if="userInfo.item != ''">{{ userInfo.item.user.userName }}</el-text>
 	</div>
 </template>
 <script setup>
-import { reactive } from 'vue';
+import { reactive, onMounted } from 'vue';
 import UserAvatar from '@/assets/img/dongdong-female.png';
 // eslint-disable-next-line vue/require-prop-types
 const props = defineProps(['userInfo']);
+// eslint-disable-next-line vue/no-setup-props-destructure
 </script>
 
 <style scoped>
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index dbd60e6..3149e81 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -54,7 +54,7 @@ import { reactive, ref, onMounted } from 'vue';
 const props = defineProps(['userInfo']);
 
 // eslint-disable-next-line vue/no-setup-props-destructure
-const username = ref(props.userInfo.item.username);
+const username = ref(props.userInfo);
 
 console.log(username);
 
diff --git a/src/views/customer/components/JimiLeft.vue b/src/views/customer/components/JimiLeft.vue
index b7d333f..edcf4fa 100644
--- a/src/views/customer/components/JimiLeft.vue
+++ b/src/views/customer/components/JimiLeft.vue
@@ -3,10 +3,11 @@
 		<JimiLeftHeader @search="handleSearch" />
 		<div class="contract-list-container">
 			<ul>
-				<li v-for="(item, index) in computedFilteredContracts" :key="index">
+				<!-- computedFilteredContracts -->
+				<li v-for="(item, index) in contracts.value" :key="index">
 					<div class="user-info-item" @click="SwitchContact(item)">
-						<el-avatar class="user-info-item-avatar" shape="square" :src="item.avatar" />
-						<el-text>{{ item.username }}</el-text>
+						<el-avatar class="user-info-item-avatar" shape="square" :src="item.user.avatar" />
+						<el-text>{{ item.user.userName }}</el-text>
 					</div>
 				</li>
 			</ul>
@@ -19,36 +20,37 @@ import JimiLeftHeader from '@/views/customer/components/JimiLeftHeader.vue';
 import UserAvatar from '@/assets/img/dongdong-female.png';
 import { reactive, ref, computed, onMounted } from 'vue';
 import { getAll } from '../../../apis/conversation';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+/**
+ * 用户信息
+ * account:用户名
+ * isPlus:是否会员
+ */
+const userInfo = reactive({
+	userName: route.query.username,
+	userId: route.query.userId,
+	avatar: route.query.avatar || UserAvatar,
+});
+
+console.log('jimileft');
+console.log('userInfo', userInfo);
+
+const contracts = reactive([]);
 
-const contracts = reactive([
-	{
-		id: 1,
-		username: 'dongdong',
-		avatar: UserAvatar,
-	},
-	{
-		id: 2,
-		username: 'aaaa',
-		avatar: UserAvatar,
-	},
-	{
-		id: 3,
-		username: 'bbbb',
-		avatar: UserAvatar,
-	},
-]);
 onMounted(() => {
-	// gteAllList(1);
+	gteAllList(userInfo.userId);
 });
 
 async function gteAllList(userId) {
 	try {
 		const res = await getAll(userId);
-		console.log(res);
 
 		// 响应成功的处理
-		if (res.data.code === 200) {
+		if (res.data.code === 19000200) {
 			contracts.value = res.data.data;
+			console.log(contracts.value);
 		} else {
 			alert(res.data.msg);
 		}
@@ -82,7 +84,7 @@ const filteredContracts = computed(() => {
 
 const searchContracts = (keyword) => {
 	console.log(keyword);
-	return contracts.filter((contract) => contract.username.includes(keyword));
+	return contracts.filter((contract) => contract.user.userName.includes(keyword));
 };
 
 const handleSearch = (keyword) => {
diff --git a/src/views/customer/components/Operation.vue b/src/views/customer/components/Operation.vue
index b274216..4acfca2 100644
--- a/src/views/customer/components/Operation.vue
+++ b/src/views/customer/components/Operation.vue
@@ -40,6 +40,7 @@ import MyAdapterPlugin from '../../../utlis/myUploadAdapter';
 
 import { storeToRefs } from 'pinia';
 import useCkeditor from '../../../stores/ckeditor';
+
 const ckeditorStore = useCkeditor();
 //editorResult是富文本的数据
 const { editorResult } = storeToRefs(ckeditorStore);
@@ -50,8 +51,14 @@ const state = reactive({
 	msglist: [],
 });
 
-const user = reactive({
-	userId: route.query.username,
+/**
+ * 用户信息
+ * account:用户名
+ * isPlus:是否会员
+ */
+const userInfo = reactive({
+	userName: route.query.userName,
+	userId: route.query.userId,
 });
 
 const convId = route.query.convId;
@@ -59,7 +66,7 @@ const convId = route.query.convId;
 /**
  * 建立websocket连接
  */
-const ws = useWebsocket(handleMessage, user.userId, convId);
+const ws = useWebsocket(handleMessage, userInfo.userId, convId);
 const props = defineProps({
 	disabled: {
 		type: Boolean,
-- 
Gitee


From 4e0eb310fdfef7f3d21f84b6676279a604addd6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Thu, 10 Aug 2023 16:26:22 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=A3=80=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index f2e542f..075de67 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -22,8 +22,11 @@
 import JimiLeft from '@/views/customer/components/JimiLeft.vue';
 import Header from '@/layout/components/Header.vue';
 import AppMain from '@/layout/components/AppMain.vue';
-import { reactive } from 'vue';
+import { reactive, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
+const route = useRoute();
+const router = useRouter();
 const userInfo = reactive({
 	item: '',
 });
@@ -33,6 +36,20 @@ const transmit = (item) => {
 	userInfo.item = item;
 	console.log(userInfo.item);
 };
+
+onMounted(() => {
+	detection();
+});
+
+// 检测是否登录
+
+function detection() {
+	if (!route.query.userName) {
+		router.push({
+			name: 'login',
+		});
+	}
+}
 </script>
 <style scoped>
 .common-layout {
-- 
Gitee


From d963844764eb443aade15257cc725150868257c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Thu, 10 Aug 2023 16:33:31 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=8B=A6=E6=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/index.vue                           | 14 --------------
 .../customer/components/JimiLeftHeader.vue     | 18 ++++++++++++++++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index 075de67..b16349e 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -36,20 +36,6 @@ const transmit = (item) => {
 	userInfo.item = item;
 	console.log(userInfo.item);
 };
-
-onMounted(() => {
-	detection();
-});
-
-// 检测是否登录
-
-function detection() {
-	if (!route.query.userName) {
-		router.push({
-			name: 'login',
-		});
-	}
-}
 </script>
 <style scoped>
 .common-layout {
diff --git a/src/views/customer/components/JimiLeftHeader.vue b/src/views/customer/components/JimiLeftHeader.vue
index 7ae0322..7aff98a 100644
--- a/src/views/customer/components/JimiLeftHeader.vue
+++ b/src/views/customer/components/JimiLeftHeader.vue
@@ -20,11 +20,12 @@
 
 <script setup>
 import DefaultUserAvatar from '@/assets/img/default-user-avatar.png';
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted } from 'vue';
 import { Search } from '@element-plus/icons-vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
+const router = useRouter();
 /**
  * 用户信息
  * account:用户名
@@ -36,6 +37,19 @@ const userInfo = reactive({
 	avatar: route.query.avatar || DefaultUserAvatar,
 	isPlus: false,
 });
+onMounted(() => {
+	detection();
+});
+
+// 检测是否登录
+
+function detection() {
+	if (!userInfo.userName) {
+		router.push({
+			name: 'login',
+		});
+	}
+}
 
 /**
  * 搜索框
-- 
Gitee


From 5f7b4e78546198d74782b6d1e30d68861c51c8a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Fri, 11 Aug 2023 11:00:08 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=85=B7=E4=BD=93?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/websockeet.js                      |  2 +-
 src/layout/components/AppMain.vue           |  2 +-
 src/views/customer/components/Chat.vue      | 18 +++---
 src/views/customer/components/Operation.vue | 65 ++++++++++++++++-----
 4 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/src/apis/websockeet.js b/src/apis/websockeet.js
index 6fc54f8..0ef3e68 100644
--- a/src/apis/websockeet.js
+++ b/src/apis/websockeet.js
@@ -1,5 +1,5 @@
 export function useWebsocket(handleMessage, userId, convId) {
-	const ws = new WebSocket(`ws://localhost:19000/chat/userId/1/convId/1`);
+	const ws = new WebSocket(`ws://localhost:19000/chat/userId/` + userId + `/convId/` + convId);
 
 	const init = () => {
 		bindEvent();
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index fdef86d..95e998b 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -3,7 +3,7 @@
 <template>
 	<el-row class="row">
 		<el-col class="col" :span="18">
-			<Chat :userInfo="props.userInfo" :key="props.userInfo" />
+			<Chat :userInfo="props.userInfo" :key="props.userInfo.item" />
 		</el-col>
 		<el-col class="col" :span="6">
 			<AsideMessage />
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index 3149e81..b0dfede 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -9,22 +9,23 @@
 				<template #default="{ height }">
 					<el-scrollbar :height="height">
 						<div class="message-list-box">
-							<ul>
+							<!-- <div>{{ userInfo.item }}</div> -->
+							<ul v-if="userInfo.item !== ''">
 								<li v-for="(item, index) in messageList" :key="index">
 									<!-- v-if="item.convId == '1' && item.userId != '1'" -->
-									<div class="message-left">
+									<div class="message-left" v-if="item.convId == userInfo.item.conversation.id && item.userId == userInfo.item.user.userId">
 										<div class="img">
 											<img src="../../../assets/img/dongdong-female.png" class="img" />
 										</div>
 										<div class="message-le">
-											<div class="name">{{ userInfo.item.username }}</div>
+											<div class="name">{{ userInfo.item.user.userName }}</div>
 											<div class="message-l">
 												<div v-html="item.message"></div>
 											</div>
 										</div>
 									</div>
 									<!-- v-else-if="item.convId == '1' && item.userId == '1' -->
-									<div class="message-right">
+									<div class="message-right" v-else-if="item.convId == userInfo.item.conversation.id && item.userId != userInfo.item.user.userId">
 										<div class="message-r">
 											<div v-html="item.message"></div>
 										</div>
@@ -42,7 +43,7 @@
 		<div class="operation-container">
 			<!-- 消息输入框组件 -->
 
-			<Operation :onMsglistUpdated="handleMsglistUpdated" />
+			<Operation :onMsglistUpdated="handleMsglistUpdated" :user="props.userInfo" :key="props.userInfo.item" />
 		</div>
 	</div>
 </template>
@@ -53,11 +54,6 @@ import { reactive, ref, onMounted } from 'vue';
 // eslint-disable-next-line vue/require-prop-types
 const props = defineProps(['userInfo']);
 
-// eslint-disable-next-line vue/no-setup-props-destructure
-const username = ref(props.userInfo);
-
-console.log(username);
-
 // eslint-disable-next-line vue/no-setup-props-destructure
 console.log(props.userInfo);
 
@@ -71,6 +67,8 @@ const handleMsglistUpdated = (msglist) => {
 	console.log('handleMsglistUpdated');
 	console.log(msglist);
 	messageList.value = msglist;
+	console.log('messagelistaaaaa');
+	console.log(messageList);
 };
 onMounted(() => {
 	console.log('onMounted');
diff --git a/src/views/customer/components/Operation.vue b/src/views/customer/components/Operation.vue
index 4acfca2..154ee98 100644
--- a/src/views/customer/components/Operation.vue
+++ b/src/views/customer/components/Operation.vue
@@ -1,5 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
+	<div v-if="props.user.item !== ''">{{ props.user.item.conversation.id }}</div>
 	<div>
 		<!-- 文本输入框 -->
 		<div class="operate-text">
@@ -28,7 +29,7 @@
 <script setup>
 //引入发送消息请求接口
 import { sendMessage } from '../../../apis/sendMessage';
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted, watch } from 'vue';
 import { useWebsocket } from '../../../apis/websockeet';
 import { useRoute } from 'vue-router';
 
@@ -61,12 +62,14 @@ const userInfo = reactive({
 	userId: route.query.userId,
 });
 
-const convId = route.query.convId;
+// eslint-disable-next-line vue/no-setup-props-destructure
+console.log(props.userInfo);
+
+console.log('userInfo.userId == ' + userInfo.userId);
+
+const convId = ref(1);
+const ws = ref(null);
 
-/**
- * 建立websocket连接
- */
-const ws = useWebsocket(handleMessage, userInfo.userId, convId);
 const props = defineProps({
 	disabled: {
 		type: Boolean,
@@ -76,7 +79,31 @@ const props = defineProps({
 		type: Function,
 		default: () => {}, //消息列表更新回调
 	},
+	user: {
+		type: Object,
+		default: () => ({}), //用户信息
+	},
 });
+
+onMounted(() => {
+	if (props.user.item !== '') {
+		convId.value = props.user.item.conversation.id;
+		console.log('convId.value == ' + convId.value);
+		ws.value = useWebsocket(handleMessage, userInfo.userId, convId.value);
+		console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb');
+	}
+	console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
+});
+
+// watch(convId, (newConvId) => {
+// 	if (newConvId !== '') {
+// 		ws.value = useWebsocket(handleMessage, userInfo.userId, newConvId);
+// 	}
+// });
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+console.log('user ===' + props.user);
+
 const editor = ClassicEditor;
 // 存放 Editor 的設定 (Ex: 工具列)
 const editorConfig = {
@@ -144,6 +171,21 @@ const send = () => {
 	// alert(editorDesign.value);
 
 	const _msg = editorResult.value;
+	if (!_msg.trim().length) {
+		return;
+	}
+
+	let maxWidth = 300;
+
+	// 使用正则表达式匹配<p>标签
+	let pattern = /<p[^>]*?>/gi;
+
+	// 将匹配到的<p>标签替换为添加了样式的<p>标签
+	let replacedMsg = _msg.replace(pattern, `<p style="max-width: ${maxWidth}px; word-wrap: break-word;">`);
+
+	console.log(replacedMsg);
+
+	console.log('_msg ==' + _msg);
 	//调用发送消息的请求
 	const param = {
 		//这里是你要传给后端的所有数据，包括用户信息，和聊天数据
@@ -154,15 +196,12 @@ const send = () => {
 	// sendMessage(param).then((res) => {
 	// 	console.log(res);
 	// });
-	// if (!_msg.trim().length) {
-	// 	return;
-	// }
 
-	ws.send(
+	ws.value.send(
 		JSON.stringify({
-			userId: 1,
-			convId: 1,
-			message: editorResult.value,
+			userId: userInfo.userId,
+			convId: convId.value,
+			message: replacedMsg,
 		})
 	);
 
-- 
Gitee


From 0543efe7885792ab8ebda914815747c72673e9e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Fri, 11 Aug 2023 14:53:32 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 22 ++++++++++----
 src/layout/components/AppMain.vue             | 15 +++++++---
 src/layout/components/Header.vue              |  2 --
 src/layout/index.vue                          |  9 ++++--
 .../customer/components/AsideMessage.vue      |  3 +-
 src/views/customer/components/Chat.vue        |  5 ++--
 src/views/customer/components/ConsultItem.vue | 30 +++++++------------
 src/views/customer/components/JimiLeft.vue    |  2 +-
 src/views/customer/components/Operation.vue   |  9 ++++--
 src/views/customer/components/OrderList.vue   |  2 +-
 src/views/customer/components/consult.vue     | 26 +++++++++-------
 11 files changed, 75 insertions(+), 50 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bb6826f..207a779 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,11 +3,21 @@ import { RouterView } from 'vue-router';
 </script>
 
 <template>
-	<router-view v-slot="{ Component }">
-		<transition name="fade">
-			<component :is="Component" />
-		</transition>
-	</router-view>
+	<div class="bg">
+		<router-view v-slot="{ Component }">
+			<transition name="fade">
+				<component :is="Component" />
+			</transition>
+		</router-view>
+	</div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.bg {
+	width: 100%;
+	height: 100%;
+	background-color: #000;
+	/* background-image: url("https://i.imgur.com/Jr0xL1l.jpg"); */
+	z-index: 0;
+}
+</style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 95e998b..9b32457 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -2,10 +2,10 @@
 <!-- eslint-disable vue/attribute-hyphenation -->
 <template>
 	<el-row class="row">
-		<el-col class="col" :span="18">
+		<el-col class="col1" :span="18">
 			<Chat :userInfo="props.userInfo" :key="props.userInfo.item" />
 		</el-col>
-		<el-col class="col" :span="6">
+		<el-col class="col2" :span="6">
 			<AsideMessage />
 		</el-col>
 	</el-row>
@@ -23,8 +23,15 @@ console.log('assdddddd');
 console.log(props.userInfo);
 </script>
 <style scoped>
-.row,
-.col {
+.row {
 	height: 100%;
 }
+
+.col1 {
+	height: 99%;
+}
+
+.col2 {
+	height: 99%;
+}
 </style>
diff --git a/src/layout/components/Header.vue b/src/layout/components/Header.vue
index 394d79e..209554f 100644
--- a/src/layout/components/Header.vue
+++ b/src/layout/components/Header.vue
@@ -7,8 +7,6 @@
 	</div>
 </template>
 <script setup>
-import { reactive, onMounted } from 'vue';
-import UserAvatar from '@/assets/img/dongdong-female.png';
 // eslint-disable-next-line vue/require-prop-types
 const props = defineProps(['userInfo']);
 // eslint-disable-next-line vue/no-setup-props-destructure
diff --git a/src/layout/index.vue b/src/layout/index.vue
index b16349e..be8b98c 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -11,7 +11,7 @@
 				<el-header class="el-header">
 					<Header :userInfo="userInfo" :key="userInfo" />
 				</el-header>
-				<el-main>
+				<el-main class="el-main">
 					<AppMain :userInfo="userInfo" :key="userInfo" />
 				</el-main>
 			</el-container>
@@ -39,11 +39,16 @@ const transmit = (item) => {
 </script>
 <style scoped>
 .common-layout {
-	height: 100%;
+	height: 80%;
+	width: 80%;
+	position: relative;
+	left: 10%;
+	top: 10%;
 }
 .common-layout :deep(.el-aside),
 .common-layout :deep(.el-container) {
 	height: 100%;
+	background-color: white;
 }
 .el-header {
 	padding: 0;
diff --git a/src/views/customer/components/AsideMessage.vue b/src/views/customer/components/AsideMessage.vue
index 73a8c94..e43d0a9 100644
--- a/src/views/customer/components/AsideMessage.vue
+++ b/src/views/customer/components/AsideMessage.vue
@@ -24,7 +24,8 @@ const contract = ref('contract');
 .aside {
 	width: 100%;
 	height: 100%;
-	border-left: solid 1px lightgray;
+	border: solid 1px lightgray;
+	border-top: none;
 }
 .jd-tabs :deep(.el-tabs__item.is-active) {
 	color: #e96265;
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index b0dfede..1cc0936 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -85,7 +85,7 @@ onMounted(() => {
 
 .operation-container {
 	height: 200px;
-	border-top: 1px solid lightgray;
+	border: 1px solid lightgray;
 }
 
 ul,
@@ -95,7 +95,8 @@ li {
 }
 
 .message-list-box {
-	padding: 8px;
+	padding: 10px;
+	overflow-y: auto;
 }
 .message-right {
 	margin-top: 10px;
diff --git a/src/views/customer/components/ConsultItem.vue b/src/views/customer/components/ConsultItem.vue
index 8d4acef..93ef52e 100644
--- a/src/views/customer/components/ConsultItem.vue
+++ b/src/views/customer/components/ConsultItem.vue
@@ -7,7 +7,9 @@
 			<div class="title" @click="detailPage(id)">{{ goodsName }}</div>
 			<div class="bottom">
 				<div class="price">￥{{ price }}</div>
-				<div class="buttom"><button class="buttom">发送</button></div>
+				<div style="clear: both; overflow: hidden">
+					<el-button style="display: block; float: right" size="small">发送</el-button>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -65,20 +67,21 @@ const detailPage = (id) => {
 	border-bottom: solid 1px lightgray;
 	margin-top: 20px;
 	cursor: pointer;
+	padding: 1px;
 }
 
 .left {
-	width: 100px;
-	height: 100px;
+	width: 80px;
+	height: 80px;
 }
 
 .img {
-	width: 100px;
-	height: 100px;
+	width: 80px;
+	height: 80px;
 }
 
 .right {
-	width: 200px;
+	width: 150px;
 	height: 60px;
 	display: flex;
 	flex-direction: column;
@@ -91,26 +94,15 @@ const detailPage = (id) => {
 
 .bottom {
 	width: 100%;
-	height: 40px;
+	height: 30px;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	margin-top: 20px;
+	margin-top: 10px;
 }
 
 .price {
 	color: #ff534c;
 	font-size: large;
 }
-
-.buttom {
-	width: 60px;
-	height: 30px;
-	font-size: smaller;
-	background-color: white;
-	border: solid 1px lightgray;
-	border-radius: 5px;
-	color: gray;
-	cursor: pointer;
-}
 </style>
diff --git a/src/views/customer/components/JimiLeft.vue b/src/views/customer/components/JimiLeft.vue
index edcf4fa..6b6cb42 100644
--- a/src/views/customer/components/JimiLeft.vue
+++ b/src/views/customer/components/JimiLeft.vue
@@ -98,7 +98,7 @@ const computedFilteredContracts = computed(() => {
 </script>
 <style scoped>
 .left-aside-container {
-	height: 100%;
+	height: 99%;
 	background-color: #dbd0d9;
 }
 ul,
diff --git a/src/views/customer/components/Operation.vue b/src/views/customer/components/Operation.vue
index 154ee98..a93fcd6 100644
--- a/src/views/customer/components/Operation.vue
+++ b/src/views/customer/components/Operation.vue
@@ -1,7 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-	<div v-if="props.user.item !== ''">{{ props.user.item.conversation.id }}</div>
-	<div>
+	<div class="box">
 		<!-- 文本输入框 -->
 		<div class="operate-text">
 			<div id="ckeditor">
@@ -231,6 +230,12 @@ function handleMessage(e) {
   max-height: 500px;
   color: #1a202c;
 } */
+
+.box {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 10px;
+}
 .operate-text {
 	overflow: hidden;
 }
diff --git a/src/views/customer/components/OrderList.vue b/src/views/customer/components/OrderList.vue
index 010d2c5..90e15b8 100644
--- a/src/views/customer/components/OrderList.vue
+++ b/src/views/customer/components/OrderList.vue
@@ -14,7 +14,7 @@
 			<!-- 订单列表 -->
 			<el-auto-resizer>
 				<template #default="{ height }">
-					<el-scrollbar max-height="700px">
+					<el-scrollbar max-height="563px">
 						<div class="message-list-box">
 							<ul>
 								<li v-for="(item, index) in orderList" :key="index">
diff --git a/src/views/customer/components/consult.vue b/src/views/customer/components/consult.vue
index 0764210..0ffe127 100644
--- a/src/views/customer/components/consult.vue
+++ b/src/views/customer/components/consult.vue
@@ -13,16 +13,18 @@
 		<div class="order-list-container">
 			<el-auto-resizer>
 				<template #default="{ height }">
-					<el-scrollbar max-height="700px">
-						<div class="message-list-box">
-							<ul>
-								<li v-for="(item, index) in goodList" :key="index">
-									<!-- 单个商品组件 -->
-									<ConsultItem :id="item.id" :goodsCover="item.goodsCover" :goodsName="item.goodsName" :price="item.price" />
-								</li>
-							</ul>
-						</div>
-					</el-scrollbar>
+					<div class="box">
+						<el-scrollbar max-height="560px">
+							<div class="message-list-box">
+								<ul>
+									<li v-for="(item, index) in goodList" :key="index">
+										<!-- 单个商品组件 -->
+										<ConsultItem :id="item.id" :goodsCover="item.goodsCover" :goodsName="item.goodsName" :price="item.price" />
+									</li>
+								</ul>
+							</div>
+						</el-scrollbar>
+					</div>
 				</template>
 			</el-auto-resizer>
 		</div>
@@ -110,6 +112,10 @@ li {
 	height: 100%;
 }
 
+.box {
+	box-sizing: border-box;
+}
+
 .orderlist-container {
 	height: 100%;
 }
-- 
Gitee


From 6d011873f305554ea46048d0b59ecac4b0972253 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B9=81=E6=98=9F=E5=85=A5=E6=A2=A6?= <1738464117@qq.com>
Date: Fri, 11 Aug 2023 16:56:14 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=E6=B6=88=E6=81=AF=E5=8F=91=E9=80=81?=
 =?UTF-8?q?=EF=BC=8C=E9=A1=B5=E9=9D=A2=E4=B8=BB=E9=A2=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                 |  3 ++-
 src/views/customer/LoginView.vue            |  7 ++++---
 src/views/customer/components/Chat.vue      | 11 +++++++----
 src/views/customer/components/Operation.vue | 14 +++++++++++---
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 207a779..a12c316 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,7 +16,8 @@ import { RouterView } from 'vue-router';
 .bg {
 	width: 100%;
 	height: 100%;
-	background-color: #000;
+	/* background-image: linear-gradient(45deg, rgb(82, 51, 255) 0, rgb(77, 77, 245) 50%, #3ef784 0, #3ef784 60%, #029eef 0, #029eef); */
+	background-image: linear-gradient(45deg, rgb(46, 49, 241), rgb(48, 232, 69));
 	/* background-image: url("https://i.imgur.com/Jr0xL1l.jpg"); */
 	z-index: 0;
 }
diff --git a/src/views/customer/LoginView.vue b/src/views/customer/LoginView.vue
index 4bff4c4..0ae7c0c 100644
--- a/src/views/customer/LoginView.vue
+++ b/src/views/customer/LoginView.vue
@@ -76,7 +76,7 @@ const onSubmit = async () => {
 </script>
 <template>
 	<el-form ref="loginFormRef" :model="formData.form" :rules="formData.rules" class="from">
-		<span>登录</span>
+		<span style="color: white">登录</span>
 		<el-form-item label="" class="item" prop="username">
 			<el-input v-model="formData.form.username" placeholder="请输入用户名" class="input"></el-input>
 		</el-form-item>
@@ -98,13 +98,14 @@ const onSubmit = async () => {
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	border: solid 3px lightgray;
+	border: solid 1px lightgray;
 	padding: auto;
 	border-radius: 10px;
 	position: absolute;
 	left: 35%;
 	top: 35%;
-	box-shadow: 5px 5px 5px #cdcfcf;
+	/* box-shadow: 5px 5px 5px #cdcfcf; */
+	/* background-color: white; */
 }
 
 .from .item {
diff --git a/src/views/customer/components/Chat.vue b/src/views/customer/components/Chat.vue
index 1cc0936..ab1f0c8 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -13,21 +13,24 @@
 							<ul v-if="userInfo.item !== ''">
 								<li v-for="(item, index) in messageList" :key="index">
 									<!-- v-if="item.convId == '1' && item.userId != '1'" -->
-									<div class="message-left" v-if="item.convId == userInfo.item.conversation.id && item.userId == userInfo.item.user.userId">
+									<div class="message-left" v-if="item.conversationId == userInfo.item.conversation.id && item.userId == userInfo.item.user.userId">
 										<div class="img">
 											<img src="../../../assets/img/dongdong-female.png" class="img" />
 										</div>
 										<div class="message-le">
 											<div class="name">{{ userInfo.item.user.userName }}</div>
 											<div class="message-l">
-												<div v-html="item.message"></div>
+												<div v-html="item.content.content"></div>
 											</div>
 										</div>
 									</div>
 									<!-- v-else-if="item.convId == '1' && item.userId == '1' -->
-									<div class="message-right" v-else-if="item.convId == userInfo.item.conversation.id && item.userId != userInfo.item.user.userId">
+									<div
+										class="message-right"
+										v-else-if="item.conversationId == userInfo.item.conversation.id && item.userId != userInfo.item.user.userId"
+									>
 										<div class="message-r">
-											<div v-html="item.message"></div>
+											<div v-html="item.content.content"></div>
 										</div>
 										<div class="img">
 											<img src="../../../assets/img/dongdong-female.png" class="img" />
diff --git a/src/views/customer/components/Operation.vue b/src/views/customer/components/Operation.vue
index a93fcd6..eeb0c56 100644
--- a/src/views/customer/components/Operation.vue
+++ b/src/views/customer/components/Operation.vue
@@ -198,9 +198,10 @@ const send = () => {
 
 	ws.value.send(
 		JSON.stringify({
-			userId: userInfo.userId,
-			convId: convId.value,
-			message: replacedMsg,
+			content: {
+				typeEnum: 'MESSAGE',
+				content: replacedMsg,
+			},
 		})
 	);
 
@@ -220,6 +221,13 @@ function handleMessage(e) {
 		props.onMsglistUpdated(state.msglist);
 	}
 }
+
+// {
+// 	content : {
+// 		typeEnum: 'text',
+// 		content: 'hello world',
+// 	}
+// }
 </script>
 
 <style scoped>
-- 
Gitee