diff --git a/src/views/home/chatTest.vue b/src/views/home/chatTest.vue index fe215efd..a167044b 100644 --- a/src/views/home/chatTest.vue +++ b/src/views/home/chatTest.vue @@ -52,26 +52,23 @@ export default { data() { return { userName: "", + newQuestion: "", + currentItem:{}, listData:[{id:1,title:'前端有哪些性能优化？',isEdit:false}], 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'} - ]} + { + id:1, + title:'前端有哪些性能优化？', + isEdit:false, + 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'}, ], }; }, @@ -89,11 +86,16 @@ export default { mounted() { var userInfo = this.$TOOL.data.get("USER_INFO"); this.userName = userInfo.username; + //给每个记录添加触发函数 this.nodeAddClick(); - //获取历史谈话列表放到listData； - //将列表第一个放到谈话框chatData = this.listData[0].data; + //获取历史聊天列表放到listData； + this.getListData(); }, methods: { + //获取历史聊天列表 + getListData(){ + //将列表第一个放到谈话框chatData = this.listData[0].data; + }, nodeAddClick(){ let items = document.querySelectorAll('.listItem'); items.forEach(function(item) { @@ -105,13 +107,16 @@ export default { }); }) }, + //新建聊天记录 createNewChat(){ - let date = new Date(); - let id = date.getTime(); - this.listData.unshift({title:'New Chat',id:id}); - this.chatData = []; - this.$nextTick(()=>{ - this.nodeAddClick(); + let that = this; + let obj = {title:'New Chat',id:null,isEdit:false}; + that.currentItem = obj; + console.log('that.currentItem',that.currentItem); + that.listData.unshift(obj); + that.chatData = []; + that.$nextTick(()=>{ + that.nodeAddClick(); let items = document.querySelectorAll('.listItem'); items.forEach(function(el) { el.classList.remove('active'); @@ -119,33 +124,49 @@ export default { items[0].classList.add('active') }) }, + //点击聊天记录，展示聊天内容 listItemClick(id){ - this.chatData = []; - this.originData.forEach((item)=>{ + let that = this; + that.chatData = []; + that.originData.forEach((item)=>{ if(item.id == id){ - this.chatData = item.data + that.chatData = item.data; + that.currentItem = item; + console.log('that.currentItem',that.currentItem); } }) }, + //删除聊天记录 deleteListItem(id,index){ }, + //编辑聊天记录title editListItem(id,index){ this.listData[index].isEdit = true; }, + //聊天记录保存 saveListItem(id,index){ - // this.$API this.listData[index].isEdit = false; + // this.$API }, sendQuestion(){ + let that = this; let date = new Date(); let id = date.getTime(); - this.chatData.push({chat_text:this.newQuestion,chat_time:date,chat_type:'myself'}); - this.newQuestion = ''; - this.$nextTick(()=>{ - //接口请求 - }) + console.log('that.currentItem',that.currentItem); + if(that.currentItem.id!==null){ + that.chatData.push({chat_text:this.newQuestion,chat_time:date,chat_type:'myself'}); + that.newQuestion = ''; + that.$nextTick(()=>{ + //接口请求发送记录Id和输入框里的问题 + }) + }else{ + //如果该聊天记录没有id 则新建一条新聊天记录，并且将当前聊天记录放到新记录里 + } + }, + + //删除问题 }, };