zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:

This commit is contained in:
shijing 2025-05-23 15:23:28 +08:00
parent e7f45b8189
commit 3aaf978a05
1 changed files with 52 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/home/chatTest.vue
View File

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