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() {
return {
userName: "",
newQuestion: "",
currentItem:{},
listData:[{id:1,title:'前端有哪些性能优化？',isEdit:false}],
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:'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 则新建一条新聊天记录，并且将当前聊天记录放到新记录里
}
},
//删除问题
},
};
</script>