diff --git a/package-lock.json b/package-lock.json
index 677daa64392f4ed7fdd5bfe4df4eef1748ae0abb..ac6eac81c34a5d166afe833790d1d5e4291e24e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4053,7 +4053,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/App.vue b/src/App.vue
index bb6826f6c2269941eace301be0625321c5271851..a12c316de0dd86a44e86b48f8018b207f3490e7e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,11 +3,22 @@ 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-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;
+}
+</style>
diff --git a/src/apis/sendMessage.js b/src/apis/sendMessage.js
new file mode 100644
index 0000000000000000000000000000000000000000..df2fe5b79e15519df4b3ecf26d0b0bf47677b794
--- /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 3a32dee2ecad1aeba7a0c5529717f7ccaa92b100..dede786513743378166fe72114a950c344dfd2bd 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/apis/websockeet.js b/src/apis/websockeet.js
index 6fc54f80822935887eb3bb112a7d95dc559339d0..0ef3e68848a6dd4c4b938b8c89f2815cee860e55 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 eb771a1cff77749cc9571241c54bc61e63b2aca5..9b32457303616c8e88eecf83334a249ff98ee3f0 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">
-			<Chat :userInfo="props.userInfo" :key="props.userInfo" />
+		<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>
@@ -17,12 +17,21 @@ 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>
 <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 81725a8e047090dadc8c828e6759988fe8b3c0a2..209554fcbc5dee8f4d91409092b51468b341c7d3 100644
--- a/src/layout/components/Header.vue
+++ b/src/layout/components/Header.vue
@@ -1,15 +1,15 @@
 <!-- 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 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/layout/index.vue b/src/layout/index.vue
index f2e542f546378cc539a5b4e5e2616ad62d8ed2bd..be8b98c74fdd8d446a860be1e0eba116bb75c346 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>
@@ -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: '',
 });
@@ -36,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/stores/ckeditor.js b/src/stores/ckeditor.js
new file mode 100644
index 0000000000000000000000000000000000000000..a3da7220e89f375fb9ae1ac79a2a5e68817b9571
--- /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 0000000000000000000000000000000000000000..e7f4517037fa28719f211392f11047856080e9af
--- /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 6350168d1e9de55f42d274e11cbbebc04c940d54..0ae7c0c9989c50f5a941f4900c1dd91b04770d23 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);
 		}
@@ -82,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>
@@ -104,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/AsideMessage.vue b/src/views/customer/components/AsideMessage.vue
index 73a8c9415f564ed291d5fa8053ee232a339aac90..e43d0a986afcbdc29136151ed1b63cc42f839530 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 4e1ce8cbc04c33c67575168281fc4d023026c542..ab1f0c8246b82de5c520944059ddd759bae0f307 100644
--- a/src/views/customer/components/Chat.vue
+++ b/src/views/customer/components/Chat.vue
@@ -9,24 +9,28 @@
 				<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.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.username }}</div>
+											<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">
+									<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" />
@@ -42,7 +46,7 @@
 		<div class="operation-container">
 			<!-- 消息输入框组件 -->
 
-			<Operation :onMsglistUpdated="handleMsglistUpdated" />
+			<Operation :onMsglistUpdated="handleMsglistUpdated" :user="props.userInfo" :key="props.userInfo.item" />
 		</div>
 	</div>
 </template>
@@ -53,11 +57,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.item.username);
-
-console.log(username);
-
 // eslint-disable-next-line vue/no-setup-props-destructure
 console.log(props.userInfo);
 
@@ -71,6 +70,8 @@ const handleMsglistUpdated = (msglist) => {
 	console.log('handleMsglistUpdated');
 	console.log(msglist);
 	messageList.value = msglist;
+	console.log('messagelistaaaaa');
+	console.log(messageList);
 };
 onMounted(() => {
 	console.log('onMounted');
@@ -87,7 +88,7 @@ onMounted(() => {
 
 .operation-container {
 	height: 200px;
-	border-top: 1px solid lightgray;
+	border: 1px solid lightgray;
 }
 
 ul,
@@ -97,11 +98,11 @@ li {
 }
 
 .message-list-box {
-	padding: 8px;
+	padding: 10px;
+	overflow-y: auto;
 }
 .message-right {
 	margin-top: 10px;
-	margin-left: 10px;
 	width: 100%;
 	display: flex;
 	align-items: flex-start;
@@ -165,4 +166,9 @@ p {
 .name {
 	font-size: smaller;
 }
+
+.message-l img {
+	width: 200px;
+	height: 200px;
+}
 </style>
diff --git a/src/views/customer/components/ConsultItem.vue b/src/views/customer/components/ConsultItem.vue
index 8d4acef10b7cb3fa87cf95bfb06d79b3a4b76cea..93ef52e14261caaadc26a94fe4921efaa7aa0dcc 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 078a8410c33de17db446a8adffd67e74400bf0ab..6b6cb420fa5b4ef78b2ecddf1c8b1f4031a7ca24 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) => {
@@ -96,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/JimiLeftHeader.vue b/src/views/customer/components/JimiLeftHeader.vue
index 137eb15aecc52745aa7e83727998a84102a409de..7aff98abaea3dbbbaa0442240aa64ec399870ac2 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>
@@ -20,17 +20,36 @@
 
 <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, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
 /**
  * 用户信息
  * account:用户名
  * isPlus:是否会员
  */
 const userInfo = reactive({
-	account: 'jd zxcvbmmnkscx',
+	userName: route.query.username,
+	userId: route.query.userId,
+	avatar: route.query.avatar || DefaultUserAvatar,
 	isPlus: false,
 });
+onMounted(() => {
+	detection();
+});
+
+// 检测是否登录
+
+function detection() {
+	if (!userInfo.userName) {
+		router.push({
+			name: 'login',
+		});
+	}
+}
 
 /**
  * 搜索框
diff --git a/src/views/customer/components/Operation.vue b/src/views/customer/components/Operation.vue
index 53e4c369b9d1d68f2e0e06bedff0e662cd153dfd..d1a44ed57ef45a9b96f9c94f2fa8af28117bfa00 100644
--- a/src/views/customer/components/Operation.vue
+++ b/src/views/customer/components/Operation.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-	<div>
+	<div class="box">
 		<!-- 文本输入框 -->
 		<div class="operate-text">
 			<div id="ckeditor">
@@ -26,12 +26,24 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+//引入发送消息请求接口
+import { sendMessage } from '../../../apis/sendMessage';
+import { ref, reactive, onMounted, watch } from 'vue';
 import { useWebsocket } from '../../../apis/websockeet';
 import { useRoute } from 'vue-router';
 
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
-import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js';
+import { component as ckeditor } from '@ckeditor/ckeditor5-vue'; //ckeditor5组件插件
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; //ckeditor5经典版
+import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'; //中文包
+//图片文件适配器插件
+import MyAdapterPlugin from '../../../utlis/myUploadAdapter';
+
+import { storeToRefs } from 'pinia';
+import useCkeditor from '../../../stores/ckeditor';
+
+const ckeditorStore = useCkeditor();
+//editorResult是富文本的数据
+const { editorResult } = storeToRefs(ckeditorStore);
 
 const route = useRoute();
 
@@ -40,16 +52,24 @@ 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;
+// 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, user.userId, convId);
 const props = defineProps({
 	disabled: {
 		type: Boolean,
@@ -59,40 +79,56 @@ 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;
 const editorDesign = ref(''); //默认内容
 const editorConfig = reactive({
 	language: 'zh-cn',
 	// plugins:[],
 	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'
+		],
 	},
 });
 
@@ -126,21 +162,44 @@ const onEditorDestroy = () => {
  * 发送聊天消息
  * @param {string} msg 消息内容
  */
+
 const send = () => {
-	console.log(editorDesign.value);
+	console.log(editorResult.value);
 	// alert(editorDesign.value);
 
-	const _msg = editorDesign.value;
-
+	const _msg = editorResult.value;
 	if (!_msg.trim().length) {
 		return;
 	}
 
-	ws.send(
+	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 = {
+		//这里是你要传给后端的所有数据，包括用户信息，和聊天数据
+		msg: _msg,
+	};
+	console.log('aaaaaaaaaaaaaaaaa');
+	console.log(param);
+	// sendMessage(param).then((res) => {
+	// 	console.log(res);
+	// });
+
+	ws.value.send(
 		JSON.stringify({
-			userId: 1,
-			convId: 1,
-			message: editorDesign.value,
+			content: {
+				typeEnum: 'MESSAGE',
+				content: replacedMsg,
+			},
 		})
 	);
 
@@ -160,9 +219,29 @@ function handleMessage(e) {
 		props.onMsglistUpdated(state.msglist);
 	}
 }
+
+// {
+// 	content : {
+// 		typeEnum: 'text',
+// 		content: 'hello world',
+// 	}
+// }
 </script>
 
 <style scoped>
+/* #ckeditor :deep(.ck-editor__editable) {
+  width: 98%;
+  margin: auto;
+  min-height: 200px;
+  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 010d2c5266d58ab331502ba573ddfd2157b7855a..90e15b8f047d4ec1f1d515d318e136f80e23b446 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 07642106bfcdad50ce2af030cece3b2f9ec2f462..0ffe1274b65d8d36b60765c3316b0b7ba0180dcb 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%;
 }