From 0756b6679236aef17b8a0d3bdc4da94543ffa83e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Sat, 21 Oct 2023 20:52:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E7=AE=80=E6=97=B6=E9=97=B4=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/chat.js | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/chat.js b/src/chat.js
index c894f8a..34fa87d 100644
--- a/src/chat.js
+++ b/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: '加入屏蔽列表不再被渲染',