scrm.antd/src/pages/ChatLogs/components/ChatTime.tsx

import React from 'react';
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 msgtimeStr = props.msgtime.replace(/-/g, '/');
    const msgtime = new Date(msgtimeStr);

    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    const dayDiff =
      (new Date(
        `${now.getFullYear()}/${padWith(now.getMonth() + 1)}/${padWith(now.getDate())} 00:00:00`,
      ).getTime() -
        new Date(msgtimeStr).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', marginBottom: 12 }}>
      <div
        style={{
          background: '#DADADA',
          color: '#fff',
          padding: '0 8px',
          borderRadius: 4,
          lineHeight: 1,
          height: 24,
          display: 'inline-flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        {formatTime()}
      </div>
    </div>
  );
};