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

fix:chat对话更新

This commit is contained in:
shijing 2025-05-06 10:13:30 +08:00
parent 6314061da0
commit 9c9f4a3180
1 changed files with 81 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,9 +26,9 @@
</div> </div>
</div> </div>
</el-main> </el-main>
<el-footer style="padding: 1rem;height: 5rem;text-align: left;border-top: 1px solid rgb(229, 231, 235);"> <el-footer class="footerWrap">
<div style="display: flex;align-items: center;justify-content: space-between;"> <div class="footerContent">
<div style="width: 100%;height:100%;padding: 0 0.5rem;"> <div class="footerInput">
<el-input class="search_input" placeholder="来说点什么吧..."></el-input> <el-input class="search_input" placeholder="来说点什么吧..."></el-input>
</div> </div>
<el-button icon="el-icon-promotion" size="success"></el-button> <el-button icon="el-icon-promotion" size="success"></el-button>
@ -47,15 +47,48 @@ export default {
return { return {
userName: "", userName: "",
listData:[{id:1,title:'前端有哪些性能优化？',}], listData:[{id:1,title:'前端有哪些性能优化？',}],
chatData: [ originData:[
{id:1,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: [
{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() { 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();
//获取历史谈话列表放到listData；
//将列表第一个放到谈话框chatData = this.listData[0].data;
},
methods: {
nodeAddClick(){
let items = document.querySelectorAll('.listItem'); let items = document.querySelectorAll('.listItem');
items.forEach(function(item) { items.forEach(function(item) {
item.addEventListener('click', function() { item.addEventListener('click', function() {
@ -66,10 +99,13 @@ export default {
}); });
}) })
}, },
methods: {
createNewChat(){ 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.$nextTick(()=>{
this.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');
@ -78,7 +114,8 @@ export default {
}) })
}, },
listItemClick(id){ listItemClick(id){
this.listData.forEach((item)=>{ this.chatData = [];
this.originData.forEach((item)=>{
if(item.id == id){ if(item.id == id){
this.chatData = item.data this.chatData = item.data
} }
@ -118,7 +155,8 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
flex:1 1 0%; height: 100%;
/* flex:1 1 0%; */
} }
.addBtn{ .addBtn{
margin: 1rem; margin: 1rem;
@ -133,10 +171,10 @@ export default {
border: 1px dotted #18a058; border: 1px dotted #18a058;
} }
.chatList{ .chatList{
padding: 1rem; padding: 0 1rem 2rem 1rem;
overflow: hidden; flex: 1;
flex: 1 1 0%;
min-height: 0px; min-height: 0px;
overflow-y: scroll;
box-sizing: border-box; box-sizing: border-box;
} }
.listItem{ .listItem{
@ -154,6 +192,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
margin: 8px 0;
border :1px solid rgb(229, 231, 235); border :1px solid rgb(229, 231, 235);
} }
.listItem.active{ .listItem.active{
@ -173,9 +212,7 @@ export default {
padding-left: 260px;height: 100%;box-sizing: border-box;position: relative;z-index: auto; padding-left: 260px;height: 100%;box-sizing: border-box;position: relative;z-index: auto;
} }
.right_layout {
flex: 6;
}
.icons { .icons {
background-color: white; background-color: white;
@ -199,11 +236,6 @@ export default {
left: 10px; left: 10px;
display: none; display: none;
} }
.new_chat_text {
border: 1px solid #4b9e5f;
display: flex;
}
.user_icons { .user_icons {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -211,23 +243,6 @@ export default {
border: 1px solid lightblue; border: 1px solid lightblue;
border-radius: 50%; 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{ .btn{
border:none; border:none;
padding:10px 15px; padding:10px 15px;
@ -257,10 +272,13 @@ export default {
flex-direction: column; flex-direction: column;
max-width: 80%; max-width: 80%;
} }
.layout_right>.chat_img>.datatime{ .datatime{
position: absolute; margin: 5px;
width: 170px; display: inline-block;
right: 0; color:rgb(180, 187, 196);
}
.layout_right .datatime{
text-align: right;
} }
.layout_right>.chatItem_text>.chat_text{ .layout_right>.chatItem_text>.chat_text{
padding:10px 20px; padding:10px 20px;
@ -274,7 +292,20 @@ export default {
background-color: rgb(244, 246, 248); background-color: rgb(244, 246, 248);
opacity: 0.8; opacity: 0.8;
} }
.user_icons{ .footerWrap{
width:40px;height:40px; 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;
} }
</style> </style>