合并消息

src/chat.js

@@ -140,10 +140,10 @@ export default class Chat {
     async 从本地载入消息() {
         const data = await values(this.store)
         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 }) {
         const data = await values(this.store)
@@ -169,6 +169,15 @@ export default class Chat {
     }
     // 添加一条消息
     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({
             classList: [type],
             children: [
@@ -177,6 +186,9 @@ export default class Chat {
         })
         this.ul.appendChild(item)
         this.ul.scrollTop = this.ul.scrollHeight
+
+        // 记录到上一条消息
+        this.last = { name, text, time, type, item }
         return item
     }
     send(text) {
@@ -185,6 +197,14 @@ export default class Chat {
         }
     }
     添加元素(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 date = new Date(str)
@@ -211,45 +231,66 @@ export default class Chat {
         const scroll = this.ul.scrollHeight === this.ul.clientHeight + this.ul.scrollTop
         this.ul.appendChild(ListItem({
             style: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
                 margin: '1rem',
                 padding: '.5rem 1rem',
                 boxSizing: 'border-box',
                 boxShadow: '0 0 1rem #eee',
                 maxWidth: '24rem',
                 borderRadius: '1rem',
+                listStyle: 'none',
             },
             children: [
-                Span({ style: {
+                createElement({
-                    paddingRight: '.5rem',
-                }, textContent: `${redate(data.time)}`}),
-                Span({ textContent: `${data.name}: ${data.text}` }),
-                Button({
                     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) {
             console.log('滚动到底部')
             this.ul.scrollTop = this.ul.scrollHeight
         }
+        // 记录到上一条消息
+        this.last = { ...data, item: this.ul.lastChild }
     }
     async 存储消息(data) {
         // 检查id是否已经存在