fix:chat对话更新
This commit is contained in:
parent
6314061da0
commit
9c9f4a3180
|
|
@ -26,9 +26,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-footer style="padding: 1rem;height: 5rem;text-align: left;border-top: 1px solid rgb(229, 231, 235);">
|
||||
<div style="display: flex;align-items: center;justify-content: space-between;">
|
||||
<div style="width: 100%;height:100%;padding: 0 0.5rem;">
|
||||
<el-footer class="footerWrap">
|
||||
<div class="footerContent">
|
||||
<div class="footerInput">
|
||||
<el-input class="search_input" placeholder="来说点什么吧..."></el-input>
|
||||
</div>
|
||||
<el-button icon="el-icon-promotion" size="success"></el-button>
|
||||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue