From 9c9f4a3180e3bda33307a01eadc1be1bc007efd8 Mon Sep 17 00:00:00 2001 From: shijing Date: Tue, 6 May 2025 10:13:30 +0800 Subject: [PATCH] =?UTF-8?q?fix:chat=E5=AF=B9=E8=AF=9D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/home/chatTest.vue | 131 ++++++++++++++++++++++-------------- 1 file changed, 81 insertions(+), 50 deletions(-) diff --git a/src/views/home/chatTest.vue b/src/views/home/chatTest.vue index e05d6397..7df1c2df 100644 --- a/src/views/home/chatTest.vue +++ b/src/views/home/chatTest.vue @@ -26,9 +26,9 @@ - -
-
+ +
+
@@ -47,29 +47,65 @@ export default { return { userName: "", listData:[{id:1,title:'前端有哪些性能优化？',}], - chatData: [ + originData:[ + {id:1,data:[ {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'} + ]} + ], + 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'}, + {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'}, + {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'}, + {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'}, + {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'}, + {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'}, ], }; }, + watch: { + nodes: { + listData(val) { + console.log(val); + this.$nextTick(() => { + this.nodeAddClick(); + }) + }, + deep: true, + }, + }, 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'); - }); - }) + this.nodeAddClick(); + //获取历史谈话列表放到listData； + //将列表第一个放到谈话框chatData = this.listData[0].data; }, methods: { + nodeAddClick(){ + 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'); + }); + }) + }, createNewChat(){ - this.listData.unshift({title:'New Chat'}); + let date = new Date(); + let id = date.getTime(); + this.listData.unshift({title:'New Chat',id:id}); + this.chatData = []; this.$nextTick(()=>{ + this.nodeAddClick(); let items = document.querySelectorAll('.listItem'); items.forEach(function(el) { el.classList.remove('active'); @@ -78,7 +114,8 @@ export default { }) }, listItemClick(id){ - this.listData.forEach((item)=>{ + this.chatData = []; + this.originData.forEach((item)=>{ if(item.id == id){ this.chatData = item.data } @@ -118,7 +155,8 @@ export default { display: flex; flex-direction: column; min-height: 0; - flex:1 1 0%; + height: 100%; + /* flex:1 1 0%; */ } .addBtn{ margin: 1rem; @@ -133,10 +171,10 @@ export default { border: 1px dotted #18a058; } .chatList{ - padding: 1rem; - overflow: hidden; - flex: 1 1 0%; + padding: 0 1rem 2rem 1rem; + flex: 1; min-height: 0px; + overflow-y: scroll; box-sizing: border-box; } .listItem{ @@ -154,6 +192,7 @@ export default { justify-content: space-between; align-items: center; cursor: pointer; + margin: 8px 0; border :1px solid rgb(229, 231, 235); } .listItem.active{ @@ -173,9 +212,7 @@ export default { padding-left: 260px;height: 100%;box-sizing: border-box;position: relative;z-index: auto; } - .right_layout { - flex: 6; - } + .icons { background-color: white; @@ -199,11 +236,6 @@ export default { left: 10px; display: none; } - .new_chat_text { - border: 1px solid #4b9e5f; - display: flex; - } - .user_icons { width: 50px; height: 50px; @@ -211,23 +243,6 @@ export default { border: 1px solid lightblue; border-radius: 50%; } - - .right_layout_flex{ - display:flex; - justify-content: center; - align-items: center; - } - .right_layout_son{ - margin:0 auto 0 auto; - width:100vh; - height:98vh; - /* border:1px solid gray; */ - position: relative; - } - .right_layout_son_ipt{ - position: absolute; - bottom:0; - } .btn{ border:none; padding:10px 15px; @@ -257,10 +272,13 @@ export default { flex-direction: column; max-width: 80%; } - .layout_right>.chat_img>.datatime{ - position: absolute; - width: 170px; - right: 0; + .datatime{ + margin: 5px; + display: inline-block; + color:rgb(180, 187, 196); + } + .layout_right .datatime{ + text-align: right; } .layout_right>.chatItem_text>.chat_text{ padding:10px 20px; @@ -274,7 +292,20 @@ export default { background-color: rgb(244, 246, 248); opacity: 0.8; } - .user_icons{ - width:40px;height:40px; + .footerWrap{ + padding: 1rem; + height: 5rem; + text-align: left; + border-top: 1px solid rgb(229, 231, 235); + } + .footerContent{ + display: flex; + align-items: center; + justify-content: space-between; + } + .footerInput{ + width: 100%; + height:100%; + padding: 0 0.5rem; } \ No newline at end of file