feat: 引入 dayjs 统一日期格式

components/main/Header/index.vue

@@ -173,7 +173,7 @@ onUnmounted(() => {
         </HanaDropdown>
         <HanaDropdown v-if="userStore.loggedIn" animation="slide" offset="end" :show-arrow="false" @command="handleUserCommand">
           <NuxtImg v-if="userStore.userInfo!.avatar" :src="userStore.userInfo!.avatar" class="size-8 cursor-pointer rounded-full" />
-          <div v-else class="size-8 cursor-pointer rounded-full bg-hana-blue text-center text-2xl text-white">
+          <div v-else class="flex size-8 cursor-pointer items-center justify-center rounded-full bg-hana-blue text-xl text-white">
             <span>{{ userStore.userInfo!.username[0] }}</span>
           </div>
           <template #dropdown>

components/thoughts/Input.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dayjs from 'dayjs'
 import { useStore } from '~/store'
 import type { MessageItem } from '~/types/message'
 
@@ -19,7 +20,7 @@ function handlePublish() {
       site: '/about',
       avatar: '/images/avatar.webp',
     },
-    publishedAt: new Date().toLocaleString(),
+    publishedAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
     editedAt: '',
     isMe: true,
   }

package.json

@@ -47,6 +47,7 @@
     "@vueuse/nuxt": "^11.1.0",
     "bcrypt": "^5.1.1",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
     "eslint": "^9.12.0",
     "eslint-plugin-tailwindcss": "^3.17.4",

pages/articles/[article].vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dayjs from 'dayjs'
 import type { ArticleHeader } from '~/types/content'
 
 definePageMeta({
@@ -17,8 +18,8 @@ const articleHeader = computed<ArticleHeader>(() => ({
   ogImage: article.value?.ogImage || '/images/not-found.webp',
   tags: article.value?.tags || [],
   category: article.value?.category || '未分类',
-  publishedAt: new Date(article.value?.publishedAt || '').toLocaleDateString(),
-  editedAt: new Date(article.value?.editedAt || '').toLocaleDateString(),
+  publishedAt: dayjs(article.value?.publishedAt).format('YYYY-MM-DD'),
+  editedAt: dayjs(article.value?.editedAt).format('YYYY-MM-DD'),
   published: article.value?.published || false,
   wordCount: article.value?.wordCount || 0,
 }))

scripts/newArticle.js

@@ -36,11 +36,12 @@ rl.on('close', () => {
   console.log(`New article created at ${newArticlePath}`)
 })
 
+// Date -> YYYY-MM-DD HH:MM:SS
 function formatDate() {
   const now = new Date()
 
   const year = now.getFullYear()
-  const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始
+  const month = String(now.getMonth() + 1).padStart(2, '0')
   const day = String(now.getDate()).padStart(2, '0')
   const hours = String(now.getHours()).padStart(2, '0')
   const minutes = String(now.getMinutes()).padStart(2, '0')

server/api/articles/count.get.ts

@@ -1,4 +1,5 @@
 import type * as p from '@prisma/client'
+import dayjs from 'dayjs'
 import prisma from '~/lib/prisma'
 import type { ArticleCountQuery } from '~/server/types/articles'
 import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
@@ -8,8 +9,8 @@ type Options = p.Prisma.ArticleWhereInput & { publishedAtMonth?: string }
 async function selectArticleCount(options: Options) {
   const { publishedAtMonth, ...rest } = options
   if (publishedAtMonth) {
-    const curMonth = new Date(publishedAtMonth)
-    const nextMonth = new Date(curMonth.getFullYear(), curMonth.getMonth() + 1)
+    const curMonth = dayjs(publishedAtMonth).toDate()
+    const nextMonth = dayjs(publishedAtMonth).add(1, 'month').toDate()
     rest.publishedAt = { gte: curMonth, lt: nextMonth }
   }
   return await prisma.article.count({ where: rest })

server/api/articles/list.get.ts

@@ -1,4 +1,5 @@
 import type * as p from '@prisma/client'
+import dayjs from 'dayjs'
 import prisma from '~/lib/prisma'
 import type { ArticleListQuery } from '~/server/types/articles'
 import { formattedEventHandler } from '~/server/utils/formattedEventHandler'
@@ -13,8 +14,8 @@ type Options = p.Prisma.ArticleWhereInput
 async function selectArticleList(options: Options) {
   const { page, pageSize, publishedAtMonth, ...rest } = options
   if (publishedAtMonth) {
-    const curMonth = new Date(publishedAtMonth)
-    const nextMonth = new Date(curMonth.getFullYear(), curMonth.getMonth() + 1)
+    const curMonth = dayjs(publishedAtMonth).toDate()
+    const nextMonth = dayjs(publishedAtMonth).add(1, 'month').toDate()
     rest.publishedAt = { gte: curMonth, lt: nextMonth }
   }
   const retrievedRes = await prisma.article.findMany({
@@ -27,8 +28,8 @@ async function selectArticleList(options: Options) {
   const result = retrievedRes.map(article => ({
     ...article,
     tags: article.tags.map(tag => tag.name),
-    publishedAt: article.publishedAt.toISOString(),
-    editedAt: article.editedAt.toISOString(),
+    publishedAt: dayjs(article.publishedAt).format('YYYY-MM-DD'),
+    editedAt: dayjs(article.editedAt).format('YYYY-MM-DD'),
   }))
   return result
 }