fix:chat静态页面

src/views/home/chatTest.vue

@@ -3,28 +3,27 @@
 		<div class="pageContent">
 			<div class="chatSide">
 				<div class="sideContent">
-					<div plain="true" class="addBtn">新建聊天</div>
+					<div plain="true" class="addBtn" @click="createNewChat">新建聊天</div>
 					<div class="chatList">
-						<div class="listItem" v-for="item in listData" :key="item.id">
+						<div class="listItem" v-for="item in listData" :key="item.id" @click="listItemClick(item.id)">
-							<div>{{ item.title }}</div>
+							<div class="listItemTitle">{{ item.title }}</div>
+							<el-icon :size="20"><el-icon-edit/><Edit/></el-icon>
+							<el-icon :size="20"><el-icon-delete/></el-icon>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="mainChat" style="">
+			<div class="mainChat">
 				<el-container>
-					<el-main>
+					<el-main class="chatItemContainer">
-						<div>
+						<div v-for="item in chatData" :key="item.id">
-							<div class="right_layout_myselfChat">
+							<div class="chatItem" :class="[item.chat_type=='myself'?'layout_right':'layout_left']">
-								<div id="datatime" style="flex:2;font-size:13px;color:lightgray"></div>
+								<div class="chatItem_text">
-								<div style="flex:1">
+									<span class="datatime">{{ item.chat_time }}</span>
-									<div class="user_icons" style="width:40px;height:40px;"></div>
+									<div class="chat_text">{{ item.chat_text }}</div>
 								</div>
+								<div class="user_icons"></div>
 							</div>
-							<div class="myself_chat">
-								前端有哪些性能优化？
-							</div>
-							
 						</div>
 					</el-main>
 					<el-footer style="padding: 1rem;height: 5rem;text-align: left;border-top: 1px solid rgb(229, 231, 235);">
@@ -47,16 +46,44 @@ export default {
 	data() {
 		return {
 			userName: "",
-			listData:[{id:1,title:'第一次聊天'}],
+			listData:[{id:1,title:'前端有哪些性能优化？',}],
-			chatData: [{chat_text:'前端有哪些性能优化？',chat_time:'2022-08-18 10:00:00',chat_type:'myself'}],
+			chatData: [
+				{chat_text:'前端有哪些性能优化？',chat_time:'2022-08-18 10:00:00',chat_type:'myself'},
+				{chat_text:'1. 图片优化使用适当格式（例如：JPEG, PNG, WebP）。压缩图片文件，减少文件大小。使用响应式图片（srcset）来适配不同分辨率的设备。2. 懒加载（Lazy Loading）对图片、视频和其他资源进行懒加载，仅在需要时才加载。使用 IntersectionObserver 或 loading="lazy" 属性来实现。3. 代码拆分（Code Splitting）将 JavaScript 拆分成更小的模块，按需加载，提高初始加载速度。使用 Webpack 或其他打包工具的代码分割功能。4. 资源缓存使用浏览器缓存（Cache-Control）来减少重复请求。使用 Service Workers 提供离线支持和缓存管理5. 减少 HTTP 请求合并 CSS 和 JavaScript 文件，减少请求次数。使用字体图标代替多个图片图标。',chat_time:'2022-08-18 10:00:00',chat_type:'serve'}
+			],
 		};
 	},
 	mounted() {
 		var userInfo = this.$TOOL.data.get("USER_INFO");
 		this.userName = userInfo.username;
+		let items = document.querySelectorAll('.listItem');
+		items.forEach(function(item) {
+			item.addEventListener('click', function() {
+				items.forEach(function(el) {
+					el.classList.remove('active');
+				});
+				item.classList.add('active');
+			});
+		})
 	},
 	methods: {
-	
+		createNewChat(){
+			this.listData.unshift({title:'New Chat'});
+			this.$nextTick(()=>{
+			    let items = document.querySelectorAll('.listItem');
+				items.forEach(function(el) {
+					el.classList.remove('active');
+				});
+				items[0].classList.add('active')
+			})	
+		},
+		listItemClick(id){
+			this.listData.forEach((item)=>{
+				if(item.id == id){
+					this.chatData = item.data
+				}
+			})
+		},
 	},
 };
 </script>
@@ -118,18 +145,30 @@ export default {
 	z-index: auto;
 	height: 45px;
 	line-height: 45px;
-	
 	width: 100%;
 	display :flex;
 	padding: 0 1rem;
 	border-radius: 6px;
 	box-sizing: border-box;
 	color :rgb(51, 54, 57);
+	justify-content: space-between;
+	align-items: center;
+	cursor: pointer;
 	border :1px solid rgb(229, 231, 235);
 }
 .listItem.active{
+	color: rgb(75, 158, 95);
+	border-color: rgb(75, 158, 95);
 	background-color :rgb(245, 245, 245)
 }
+.listItemTitle{
+	width: 160px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 14px;
+	font-weight: 500;
+}
 .mainChat{
 	padding-left: 260px;height: 100%;box-sizing: border-box;position: relative;z-index: auto;
 }
@@ -201,20 +240,41 @@ export default {
 		padding:0.5rem 1rem;
 		/* border:1px solid lightgray; */
 	}
-	.right_layout_myselfChat{
+	.chatItemContainer{
-		width:200px;
+		display: flex;
-		position: absolute;
+		flex-direction: column;
-		top:5px;
-		right:0;
-		display:flex;
 	}
-	.myself_chat{
+	.chatItem{
+		display: flex;
+		justify-content: flex-end;  /* 对齐到容器的右侧 */
+	}
+	.chatItem.layout_left{
+		flex-direction: row-reverse; /* 从右到左排列 */
+	}
+	
+	.chatItem_text{
+		display: flex;
+		flex-direction: column;
+		max-width: 80%;
+	}
+	.layout_right>.chat_img>.datatime{
 		position: absolute;
-		top:30px;
+		width: 170px;
-		right:80px;
+		right: 0;
+	}
+	.layout_right>.chatItem_text>.chat_text{
 		padding:10px 20px;
 		border-radius: 10px;
-		background-color: #7ae1b6;
+		background-color: rgb(210, 249, 209);
 		opacity: 0.8;
 	}
+	.layout_left>.chatItem_text>.chat_text{
+		padding:10px 20px;
+		border-radius: 10px;
+		background-color: rgb(244, 246, 248);
+		opacity: 0.8;
+	}
+	.user_icons{
+		width:40px;height:40px;
+	}
 </style>