合并消息
This commit is contained in:
parent
ae5072a490
commit
c9477581c8
95
src/chat.js
95
src/chat.js
@ -140,10 +140,10 @@ export default class Chat {
|
|||||||
async 从本地载入消息() {
|
async 从本地载入消息() {
|
||||||
const data = await values(this.store)
|
const data = await values(this.store)
|
||||||
data.map(item => ({ timestamp: new Date(item.time).getTime(), ...item }))
|
data.map(item => ({ timestamp: new Date(item.time).getTime(), ...item }))
|
||||||
.filter(item => !item.ban)
|
.filter(item => !item.ban)
|
||||||
.sort((a, b) => a.timestamp - b.timestamp).forEach(item => {
|
.sort((a, b) => a.timestamp - b.timestamp).forEach(item => {
|
||||||
this.添加元素(item)
|
this.添加元素(item)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
async 筛选指定范围的消息({ start, end }) {
|
async 筛选指定范围的消息({ start, end }) {
|
||||||
const data = await values(this.store)
|
const data = await values(this.store)
|
||||||
@ -169,6 +169,15 @@ export default class Chat {
|
|||||||
}
|
}
|
||||||
// 添加一条消息
|
// 添加一条消息
|
||||||
add({ name, text, time, type }) {
|
add({ name, text, time, type }) {
|
||||||
|
// 如果和上一条消息是同一人, 且时间间隔小于1小时, 则向上合并
|
||||||
|
// && new Date(time).getTime() - new Date(this.last.time).getTime() < 1000 * 60 * 60
|
||||||
|
console.log('添加一条消息', this.last, name, text, time, type)
|
||||||
|
if (this.last && this.last.name === name) {
|
||||||
|
this.last.item.appendChild(Span({ textContent: text }))
|
||||||
|
this.last = { name, text, time, type, item: this.last.item }
|
||||||
|
return this.last.item
|
||||||
|
}
|
||||||
|
|
||||||
const item = ListItem({
|
const item = ListItem({
|
||||||
classList: [type],
|
classList: [type],
|
||||||
children: [
|
children: [
|
||||||
@ -177,6 +186,9 @@ export default class Chat {
|
|||||||
})
|
})
|
||||||
this.ul.appendChild(item)
|
this.ul.appendChild(item)
|
||||||
this.ul.scrollTop = this.ul.scrollHeight
|
this.ul.scrollTop = this.ul.scrollHeight
|
||||||
|
|
||||||
|
// 记录到上一条消息
|
||||||
|
this.last = { name, text, time, type, item }
|
||||||
return item
|
return item
|
||||||
}
|
}
|
||||||
send(text) {
|
send(text) {
|
||||||
@ -185,6 +197,14 @@ export default class Chat {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
添加元素(data) {
|
添加元素(data) {
|
||||||
|
// 如果和上一条消息是同一人, 且时间间隔小于1小时, 则向上合并
|
||||||
|
// && new Date(time).getTime() - new Date(this.last.time).getTime() < 1000 * 60 * 60
|
||||||
|
console.log('添加一条消息', this.last, data)
|
||||||
|
if (this.last && this.last.name === data.name) {
|
||||||
|
this.last.item.querySelector('ul').appendChild(ListItem({ textContent: data.text }))
|
||||||
|
this.last = { ...data, item: this.last.item }
|
||||||
|
return this.last.item
|
||||||
|
}
|
||||||
// 将时间转换为人类可读的格式: 如果是今天,则显示时间,如果是昨天,则显示昨天,如果是今年,则显示月日,如果是去年,则显示年月日
|
// 将时间转换为人类可读的格式: 如果是今天,则显示时间,如果是昨天,则显示昨天,如果是今年,则显示月日,如果是去年,则显示年月日
|
||||||
const redate = (str) => {
|
const redate = (str) => {
|
||||||
const date = new Date(str)
|
const date = new Date(str)
|
||||||
@ -211,45 +231,66 @@ export default class Chat {
|
|||||||
const scroll = this.ul.scrollHeight === this.ul.clientHeight + this.ul.scrollTop
|
const scroll = this.ul.scrollHeight === this.ul.clientHeight + this.ul.scrollTop
|
||||||
this.ul.appendChild(ListItem({
|
this.ul.appendChild(ListItem({
|
||||||
style: {
|
style: {
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
margin: '1rem',
|
margin: '1rem',
|
||||||
padding: '.5rem 1rem',
|
padding: '.5rem 1rem',
|
||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
boxShadow: '0 0 1rem #eee',
|
boxShadow: '0 0 1rem #eee',
|
||||||
maxWidth: '24rem',
|
maxWidth: '24rem',
|
||||||
borderRadius: '1rem',
|
borderRadius: '1rem',
|
||||||
|
listStyle: 'none',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
Span({ style: {
|
createElement({
|
||||||
paddingRight: '.5rem',
|
|
||||||
}, textContent: `${redate(data.time)}`}),
|
|
||||||
Span({ textContent: `${data.name}: ${data.text}` }),
|
|
||||||
Button({
|
|
||||||
style: {
|
style: {
|
||||||
boxSizing: 'border-box',
|
display: 'flex',
|
||||||
boxShadow: '0 0 1rem #eee',
|
alignItems: 'end',
|
||||||
borderRadius: '1rem',
|
justifyContent: 'space-between',
|
||||||
fontSize: '12px',
|
gap: '.25rem',
|
||||||
color: '#555',
|
|
||||||
marginLeft: 'auto',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
},
|
},
|
||||||
textContent: '移除',
|
children: [
|
||||||
title: '加入屏蔽列表不再被渲染',
|
Span({ textContent: `${data.name}` }),
|
||||||
onclick: event => {
|
Span({
|
||||||
event.target.parentNode.remove()
|
style: {
|
||||||
update(data.id, item => ({ ban: true, ...item }), this.store)
|
color: '#888',
|
||||||
//del(data.id, this.store)
|
fontSize: '12px',
|
||||||
}
|
},
|
||||||
})
|
textContent: `${redate(data.time)}`
|
||||||
|
}),
|
||||||
|
Button({
|
||||||
|
style: {
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
boxShadow: '0 0 1rem #eee',
|
||||||
|
borderRadius: '1rem',
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#555',
|
||||||
|
marginLeft: 'auto',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
},
|
||||||
|
textContent: '移除',
|
||||||
|
title: '加入屏蔽列表不再被渲染',
|
||||||
|
onclick: event => {
|
||||||
|
event.target.parentNode.remove()
|
||||||
|
update(data.id, item => ({ ban: true, ...item }), this.store)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
List({
|
||||||
|
style: {
|
||||||
|
listStyle: 'disc',
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
ListItem({ textContent: `${data.text}` }),
|
||||||
|
]
|
||||||
|
}),
|
||||||
]
|
]
|
||||||
}))
|
}))
|
||||||
if (scroll) {
|
if (scroll) {
|
||||||
console.log('滚动到底部')
|
console.log('滚动到底部')
|
||||||
this.ul.scrollTop = this.ul.scrollHeight
|
this.ul.scrollTop = this.ul.scrollHeight
|
||||||
}
|
}
|
||||||
|
// 记录到上一条消息
|
||||||
|
this.last = { ...data, item: this.ul.lastChild }
|
||||||
}
|
}
|
||||||
async 存储消息(data) {
|
async 存储消息(data) {
|
||||||
// 检查id是否已经存在
|
// 检查id是否已经存在
|
||||||
|
Loading…
Reference in New Issue
Block a user