chore: optimizing the dayjs utility

WxWatch · May 31, 2023 · 90899fc · 90899fc
1 parent 80dc916
commit 90899fc
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/src/components/gacha/chart/GachaChartCalendar.tsx b/src/components/gacha/chart/GachaChartCalendar.tsx
@@ -7,7 +7,7 @@ import Stack from '@mui/material/Stack'
 import Box from '@mui/material/Box'
 import Paper from '@mui/material/Paper'
 import Typography from '@mui/material/Typography'
-import dayjs from 'dayjs'
+import dayjs from '@/utilities/dayjs'
 
 export default function GachaChartCalendar () {
   const { facet, gachaRecords: { aggregatedValues } } = useGachaLayoutContext()

diff --git a/src/components/gacha/overview/GachaOverviewGrid.tsx b/src/components/gacha/overview/GachaOverviewGrid.tsx
@@ -8,7 +8,7 @@ import Stack from '@mui/material/Stack'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import Chip from '@mui/material/Chip'
-import dayjs from 'dayjs'
+import dayjs from '@/utilities/dayjs'
 
 export default function GachaOverviewGrid () {
   const { facet, gachaRecords } = useGachaLayoutContext()

diff --git a/src/components/gacha/overview/GachaOverviewLastUpdated.tsx b/src/components/gacha/overview/GachaOverviewLastUpdated.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { resolveCurrency } from '@/interfaces/account'
 import { useGachaLayoutContext } from '@/components/gacha/GachaLayoutContext'
 import Typography from '@mui/material/Typography'
-import dayjs from 'dayjs'
+import dayjs from '@/utilities/dayjs'
 
 export default function GachaOverviewLastUpdated () {
   const { facet, selectedAccount } = useGachaLayoutContext()
@@ -14,7 +14,7 @@ export default function GachaOverviewLastUpdated () {
       <Typography component="span" variant="inherit">{`最近${action}记录更新日期：`}</Typography>
       <Typography component="span" variant="inherit">
         {lastGachaUpdated
-          ? dayjs(lastGachaUpdated).format('YYYY.MM.DD HH:mm:ss')
+          ? dayjs(lastGachaUpdated).format('LLLL')
           : '无'}
       </Typography>
     </Typography>

diff --git a/src/components/gacha/overview/GachaOverviewTooltips.tsx b/src/components/gacha/overview/GachaOverviewTooltips.tsx
@@ -3,7 +3,7 @@ import { resolveCurrency } from '@/interfaces/account'
 import { useGachaLayoutContext } from '@/components/gacha/GachaLayoutContext'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
-import dayjs from 'dayjs'
+import dayjs from '@/utilities/dayjs'
 
 export default function GachaOverviewTooltips () {
   const { facet, gachaRecords } = useGachaLayoutContext()
@@ -34,11 +34,11 @@ export default function GachaOverviewTooltips () {
       <Typography>
         {`· ${action}记录日期覆盖范围：`}
         <Typography component="span" color="secondary">
-          {dayjs(firstTime).format('YYYY.MM.DD HH:mm:ss')}
+          {dayjs(firstTime).format('LLLL')}
         </Typography>
         {' ~ '}
         <Typography component="span" color="secondary">
-        {dayjs(lastTime).format('YYYY.MM.DD HH:mm:ss')}
+        {dayjs(lastTime).format('LLLL')}
         </Typography>
         {'。'}
       </Typography>

diff --git a/src/utilities/dayjs.ts b/src/utilities/dayjs.ts
@@ -0,0 +1,14 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+
+dayjs.locale('zh-cn')
+dayjs.extend(localizedFormat)
+dayjs.extend(relativeTime)
+dayjs.extend(isSameOrAfter)
+dayjs.extend(isSameOrBefore)
+
+export default dayjs