fix(deps): use dayjs instead of date-fns

Author: qwerzl

components/custom/CAS/Record/NewActivityRecord.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { format } from 'date-fns'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
@@ -127,7 +126,7 @@ const onSubmit = handleSubmit(async (values) => {
                     )" variant="outline"
                     :disabled="isLoading"
                   >
-                    <span>{{ value ? format(value, "PPP") : "选择日期..." }}</span>
+                    <span>{{ value ? $dayjs(value).format("LL") : "选择日期..." }}</span>
                     <Icon class="ms-auto opacity-50" name="material-symbols:calendar-today-outline" />
                   </Button>
                 </FormControl>

nuxt.config.ts

@@ -23,6 +23,7 @@ export default defineNuxtConfig({
     'nuxt-svgo',
     '@sentry/nuxt/module',
     '@nuxt/image',
+    'dayjs-nuxt',
   ],
 
   build: {
@@ -57,7 +58,7 @@ export default defineNuxtConfig({
 
   dayjs: {
     locales: ['en', 'zh-cn'],
-    plugins: ['relativeTime', 'utc', 'timezone'],
+    plugins: ['relativeTime', 'utc', 'timezone', 'localizedFormat'],
     defaultLocale: 'zh-cn',
     defaultTimezone: 'Asia/Shanghai',
   },

package.json

@@ -28,8 +28,6 @@
     "@vueuse/core": "^10.11.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "date-fns": "^3.6.0",
-    "date-fns-tz": "^3.1.3",
     "h3": "^1.12.0",
     "h3-clerk": "^0.4.11",
     "iron-webcrypto": "^1.2.1",
@@ -59,7 +57,7 @@
     "@types/node-fetch": "^2.6.11",
     "@types/uuid": "^9.0.8",
     "@types/ws": "^8.5.12",
-    "dayjs-nuxt": "^2.1.9",
+    "dayjs-nuxt": "^2.1.11",
     "eslint": "^9.9.0",
     "nuxt": "^3.12.4",
     "nuxt-icon": "^0.6.10",

pages/admin/reservation.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { format, formatDistanceToNow, parse } from 'date-fns'
-import { zhCN } from 'date-fns/locale'
 import { LoaderCircle } from 'lucide-vue-next'
-import { VueElement, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import { enums } from '~/components/custom/enum2str'
 import { useToast } from '@/components/ui/toast/use-toast'
 import Toaster from '@/components/ui/toast/Toaster.vue'
@@ -133,7 +131,7 @@ onMounted(async () => {
         <TableCell class="text-muted-foreground">
           #{{ record.id }}
         </TableCell>
-        <TableCell>{{ formatDistanceToNow(new Date(record.creationTimestamp), { locale: zhCN, addSuffix: true }) }}</TableCell>
+        <TableCell>{{ $dayjs(record.creationTimestamp).fromNow() }}</TableCell>
         <TableCell>{{ record.user.name }}</TableCell>
         <TableCell>{{ record.club.name.zh }}</TableCell>
         <TableCell>{{ enums.days.map[record.day] }}</TableCell>

pages/manage/manage.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon, Clock as ClockIcon, Loader, LoaderCircle } from 'lucide-vue-next'
-import { record, string } from 'zod'
+import { LoaderCircle } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { useToast } from '@/components/ui/toast/use-toast'
 import Toaster from '@/components/ui/toast/Toaster.vue'

pages/manage/reservation.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { format, utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz'
-import { Card } from '@/components/ui/card'
 import { enums, time2period } from '~/components/custom/enum2str'
 import { useToast } from '@/components/ui/toast/use-toast'
 import Toaster from '@/components/ui/toast/Toaster.vue'
@@ -15,10 +13,12 @@ useHead({
 
 const { toast } = useToast()
 
-const utc8Time = utcToZonedTime((new Date()).toISOString(), 'Asia/Shanghai')
+const dayjs = useDayjs()
 
-const selectedDay = ref(enums.days.values[utc8Time.getDay()])
-const selectedPeriod = ref(time2period(utc8Time.getHours() * 100 + utc8Time.getMinutes(), selectedDay.value))
+const utc8Time = dayjs().tz('Asia/Shanghai')
+
+const selectedDay = ref(enums.days.values[utc8Time.day()])
+const selectedPeriod = ref(time2period(utc8Time.hour() * 100 + utc8Time.minute(), selectedDay.value))
 
 let dataLoaded = false
 let data: any
@@ -29,7 +29,7 @@ try {
   data = rawData.sort((a: any, b: any) => a.name < b.name ? -1 : 1)
   dataLoaded = true
 }
-catch (error) {
+catch {
   toast({
     title: '错误',
     description: '获取教室信息出错',