合并消息

src/chat.js

@@ -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,21 +231,31 @@ 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',
+                    style: {
-                }, textContent: `${redate(data.time)}`}),
+                        display: 'flex',
-                Span({ textContent: `${data.name}: ${data.text}` }),
+                        alignItems: 'end',
+                        justifyContent: 'space-between',
+                        gap: '.25rem',
+                    },
+                    children: [
+                        Span({ textContent: `${data.name}` }),
+                        Span({
+                            style: {
+                                color: '#888',
+                                fontSize: '12px',
+                            },
+                            textContent: `${redate(data.time)}`
+                        }),
                         Button({
                             style: {
                                 boxSizing: 'border-box',
@@ -241,15 +271,26 @@ export default class Chat {
                             onclick: event => {
                                 event.target.parentNode.remove()
                                 update(data.id, item => ({ ban: true, ...item }), this.store)
-                        //del(data.id, 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是否已经存在