精简时间格式

src/chat.js

@@ -179,6 +179,29 @@ export default class Chat {
         }
     }
     添加元素(data) {
+        // 将时间转换为人类可读的格式: 如果是今天,则显示时间,如果是昨天,则显示昨天,如果是今年,则显示月日,如果是去年,则显示年月日
+        const redate = (str) => {
+            const date = new Date(str)
+            const now = new Date()
+            const year = date.getFullYear()
+            const month = date.getMonth() + 1
+            const day = date.getDate()
+            const hour = date.getHours()
+            const minute = date.getMinutes()
+            const nowYear = now.getFullYear()
+            const nowMonth = now.getMonth() + 1
+            const nowDay = now.getDate()
+            if (year === nowYear && month === nowMonth && day === nowDay) {
+                return `${hour}:${minute}`
+            }
+            if (year === nowYear && month === nowMonth && day === nowDay - 1) {
+                return `昨天 ${hour}:${minute}`
+            }
+            if (year === nowYear) {
+                return `${month}月${day}日 ${hour}:${minute}`
+            }
+            return `${year}年${month}月${day}日 ${hour}:${minute}`
+        }
         this.ul.appendChild(ListItem({
             style: {
                 display: 'flex',
@@ -192,14 +215,18 @@ export default class Chat {
                 borderRadius: '1rem',
             },
             children: [
-                Span({ textContent: `${data.name} ${data.time} ${data.text}` }),
+                Span({ style: {
+                    paddingRight: '.5rem',
+                }, textContent: `${redate(data.time)}`}),
+                Span({ textContent: `${data.name}: ${data.text}` }),
                 Button({
                     style: {
                         boxSizing: 'border-box',
                         boxShadow: '0 0 1rem #eee',
                         borderRadius: '1rem',
                         fontSize: '12px',
-                        color: '#555'
+                        color: '#555',
+                        marginLeft: 'auto',
                     },
                     textContent: '移除',
                     title: '加入屏蔽列表不再被渲染',