开发: push

2023-04-11 15:29:40 +08:00
parent 5834254a8f
commit ce3d942371
27 changed files with 1507 additions and 796 deletions
--- a/src/pages/ChatLogs/components/ChatTime.tsx
+++ b/src/pages/ChatLogs/components/ChatTime.tsx
@@ -0,0 +1,79 @@
+interface IChatTimeProps {
+  msgtime: string;
+}
+
+export const ChatTime: React.FC<IChatTimeProps> = (props) => {
+  function padWith(value: string | number) {
+    return `${value}`.padStart(2, '0');
+  }
+
+  const weekStr = ['日', '一', '二', '三', '四', '五', '六'];
+
+  const formatTime = () => {
+    const now = new Date();
+    const msgtime = new Date(props.msgtime);
+
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    const dayDiff =
+      (Date.parse(
+        `${now.getFullYear()}-${padWith(now.getMonth() + 1)}-${padWith(now.getDate())} 00:00:00`,
+      ) -
+        new Date(props.msgtime).getTime()) /
+        (24 * 60 * 60 * 1000) +
+      1;
+
+    if (now.getFullYear() == msgtime.getFullYear()) {
+      if (
+        now.getFullYear() == msgtime.getFullYear() &&
+        now.getMonth() == msgtime.getMonth() &&
+        now.getDate() == msgtime.getDate()
+      ) {
+        // 当天
+        return `${padWith(msgtime.getHours())}:${padWith(msgtime.getMinutes())}`;
+      } else if (
+        yesterday.getFullYear() == msgtime.getFullYear() &&
+        yesterday.getMonth() == msgtime.getMonth() &&
+        yesterday.getDate() == msgtime.getDate()
+      ) {
+        // 昨天
+        return `昨天 ${padWith(msgtime.getHours())}:${padWith(msgtime.getMinutes())}`;
+      } else if (dayDiff < 7) {
+        // 星期
+        return `星期${weekStr[msgtime.getDay()]} ${padWith(msgtime.getHours())}:${padWith(
+          msgtime.getMinutes(),
+        )}`;
+      } else {
+        // 超过7天
+        return `${padWith(msgtime.getMonth() + 1)}月${padWith(msgtime.getDate())}日 ${padWith(
+          msgtime.getHours(),
+        )}:${padWith(msgtime.getMinutes())}`;
+      }
+    } else {
+      // 跨年
+      return `${msgtime.getFullYear()}年${padWith(msgtime.getMonth() + 1)}月${padWith(
+        msgtime.getDate(),
+      )}日 ${padWith(msgtime.getHours())}:${padWith(msgtime.getMinutes())}`;
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <div
+        style={{
+          background: '#DADADA',
+          color: '#fff',
+          padding: '0 8px',
+          borderRadius: 4,
+          lineHeight: 1,
+          height: 26,
+          display: 'inline-flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        {formatTime()}
+      </div>
+    </div>
+  );
+};