From 5f586165fcd82d458e0e4319ad99ae675a547dc5 Mon Sep 17 00:00:00 2001
From: qwerzl <me@qwerzl.me>
Date: Mon, 9 Sep 2024 23:27:41 +0800
Subject: [PATCH] fix(deps): use `dayjs` instead of `date-fns`

---
 .../custom/CAS/Record/NewActivityRecord.vue   |   3 +-
 nuxt.config.ts                                |   3 +-
 package.json                                  |   4 +-
 pages/admin/reservation.vue                   | 193 ------------------
 pages/manage/manage.vue                       |   6 +-
 pages/manage/reservation.vue                  |   4 +-
 pages/manage/statuses.vue                     |  12 +-
 pnpm-lock.yaml                                |  22 +-
 8 files changed, 14 insertions(+), 233 deletions(-)
 delete mode 100644 pages/admin/reservation.vue

diff --git a/components/custom/CAS/Record/NewActivityRecord.vue b/components/custom/CAS/Record/NewActivityRecord.vue
index 41603128..84200b7d 100644
--- a/components/custom/CAS/Record/NewActivityRecord.vue
+++ b/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>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index cca9788e..06c7bf58 100644
--- a/nuxt.config.ts
+++ b/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',
   },
diff --git a/package.json b/package.json
index 4e2b5b0d..115c9d40 100644
--- a/package.json
+++ b/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",
diff --git a/pages/admin/reservation.vue b/pages/admin/reservation.vue
deleted file mode 100644
index b740e7ab..00000000
--- a/pages/admin/reservation.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<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 { enums } from '~/components/custom/enum2str'
-import { useToast } from '@/components/ui/toast/use-toast'
-import Toaster from '@/components/ui/toast/Toaster.vue'
-
-definePageMeta({
-  middleware: ['auth'],
-})
-
-const { toast } = useToast()
-
-enum Statuses {
-  LOADING,
-  ERROR,
-  READY,
-}
-
-const status = ref(Statuses.LOADING)
-let content: any[] = []
-
-async function load() {
-  status.value = Statuses.LOADING
-  try {
-    const data = await $fetch('/api/reservation/all-admin')
-    if (!data) {
-      status.value = Statuses.ERROR
-    }
-    else {
-      status.value = Statuses.READY
-      const response = JSON.parse(data)
-      content = response.data
-    }
-  }
-  catch (error) {
-    status.value = Statuses.ERROR
-  }
-}
-
-const dlgOpen = ref(false)
-const alertContent = {
-  title: '是否确认操作?',
-  message: '',
-  id: -1,
-  action: 'UNKNOWN',
-}
-const managePending = ref(false)
-
-function confirmManage(id: number, action: string, currentStatus = '') {
-  if (action === 'DELALL') {
-    alertContent.message = '将会删除全部预约记录，此操作不可撤销。'
-  }
-  else {
-    alertContent.message = `将对 预约#${id} 执行以下操作: `
-    if (action === 'DELETE') {
-      alertContent.message += '撤销'
-    }
-  }
-  alertContent.id = id
-  alertContent.action = action
-  dlgOpen.value = true
-}
-
-async function manage() {
-  managePending.value = true
-  try {
-    const data = await $fetch('/api/reservation/manage', {
-      query: {
-        id: alertContent.id,
-        action: alertContent.action,
-        admin: true,
-        key: '',
-      },
-    })
-    await load()
-  }
-  catch (error: any) {
-    toast({
-      description: error.data.message,
-      variant: 'destructive',
-    })
-  }
-  managePending.value = false
-  dlgOpen.value = false
-}
-
-onMounted(async () => {
-  await load()
-})
-</script>
-
-<template>
-  <Alert variant="destructive">
-    <AlertDescription>
-      警告：这是一个管理员页面。此页面中的所有操作均有最高权限，你可以删除任何存在的记录。进行操作前务必再次确认，操作不可撤销！
-    </AlertDescription>
-  </Alert>
-  <AlertDialog v-model:open="dlgOpen">
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>{{ alertContent.title }}</AlertDialogTitle>
-        <AlertDialogDescription>{{ alertContent.message }}</AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel :disabled="managePending">
-          取消
-        </AlertDialogCancel>
-        <Button :disabled="managePending" @click="manage()">
-          <LoaderCircle v-if="managePending" class="animate-spin mr-2" />
-          <span v-if="!managePending">确认</span>
-          <span v-if="managePending">处理中...</span>
-        </Button>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-  <Table class="mt-4">
-    <TableHeader>
-      <TableRow>
-        <TableHead class="w-16">
-          编号
-        </TableHead>
-        <TableHead>提交时间</TableHead>
-        <TableHead>申请者</TableHead>
-        <TableHead>社团</TableHead>
-        <TableHead>日期</TableHead>
-        <TableHead>时间</TableHead>
-        <TableHead>教室</TableHead>
-        <TableHead>备注</TableHead>
-        <TableHead>
-          <Skeleton v-if="status === Statuses.LOADING" class="h-5 my-2" />
-          <!-- TODO: This is very dangerous and its behavior must be changed in the future -->
-          <Button v-if="status === Statuses.READY" variant="link" class="p-0 text-red-500" @click="confirmManage(-1, 'DELALL')">
-            清空全部
-          </Button>
-        </TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody v-if="status === Statuses.LOADING">
-      <TableRow v-for="i in 5" :key="i">
-        <TableCell v-for="j in 9" :key="j">
-          <Skeleton class="h-5 my-2" />
-        </TableCell>
-      </TableRow>
-    </TableBody>
-    <TableBody v-if="status === Statuses.READY">
-      <TableRow v-for="record in content" :key="record.id">
-        <TableCell class="text-muted-foreground">
-          #{{ record.id }}
-        </TableCell>
-        <TableCell>{{ formatDistanceToNow(new Date(record.creationTimestamp), { locale: zhCN, addSuffix: true }) }}</TableCell>
-        <TableCell>{{ record.user.name }}</TableCell>
-        <TableCell>{{ record.club.name.zh }}</TableCell>
-        <TableCell>{{ enums.days.map[record.day] }}</TableCell>
-        <TableCell>{{ enums.periods.map[record.period] }}</TableCell>
-        <TableCell>{{ record.classroom.name }}</TableCell>
-        <TableCell>
-          {{ record.note ? '' : '–' }}
-          <HoverCard v-if="record.note">
-            <HoverCardTrigger>
-              <Button variant="link" class="text-blue-500">
-                查看
-              </Button>
-            </HoverCardTrigger>
-            <HoverCardContent>
-              {{ record.note }}
-            </HoverCardContent>
-          </HoverCard>
-        </TableCell>
-        <TableCell class="text-left">
-          <div v-if="true" class="text-red-500">
-            <Button variant="link" class="p-0 text-red-500" @click="confirmManage(record.id, 'DELETE')">
-              撤销
-            </Button>
-          </div>
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-  <div v-if="status === Statuses.READY && !content.length" class="w-1/3 my-2 mx-auto text-center">
-    <Alert>
-      暂无记录
-    </Alert>
-  </div>
-  <div v-if="status === Statuses.ERROR" class="w-1/3 my-2 mx-auto text-center">
-    <Alert variant="destructive">
-      加载失败
-    </Alert>
-  </div>
-  <Toaster />
-</template>
diff --git a/pages/manage/manage.vue b/pages/manage/manage.vue
index 5565f7bb..fb963ce3 100644
--- a/pages/manage/manage.vue
+++ b/pages/manage/manage.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>
diff --git a/pages/manage/reservation.vue b/pages/manage/reservation.vue
index 4625b86f..da37e410 100644
--- a/pages/manage/reservation.vue
+++ b/pages/manage/reservation.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'
diff --git a/pages/manage/statuses.vue b/pages/manage/statuses.vue
index 66f7cf99..08840ed1 100644
--- a/pages/manage/statuses.vue
+++ b/pages/manage/statuses.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: '获取教室信息出错',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4dbbc36f..c7fe86f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,12 +47,6 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      date-fns:
-        specifier: ^3.6.0
-        version: 3.6.0
-      date-fns-tz:
-        specifier: ^3.1.3
-        version: 3.1.3(date-fns@3.6.0)
       h3:
         specifier: ^1.12.0
         version: 1.12.0
@@ -136,7 +130,7 @@ importers:
         specifier: ^8.5.12
         version: 8.5.12
       dayjs-nuxt:
-        specifier: ^2.1.9
+        specifier: ^2.1.11
         version: 2.1.11(magicast@0.3.5)(rollup@4.21.2)(webpack-sources@3.2.3)
       eslint:
         specifier: ^9.9.0
@@ -3542,18 +3536,10 @@ packages:
     peerDependencies:
       date-fns: 2.x
 
-  date-fns-tz@3.1.3:
-    resolution: {integrity: sha512-ZfbMu+nbzW0mEzC8VZrLiSWvUIaI3aRHeq33mTe7Y38UctKukgqPR4nTDwcwS4d64Gf8GghnVsroBuMY3eiTeA==}
-    peerDependencies:
-      date-fns: ^3.0.0
-
   date-fns@2.30.0:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
 
-  date-fns@3.6.0:
-    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
-
   dayjs-nuxt@2.1.11:
     resolution: {integrity: sha512-KDDNiET7KAKf6yzL3RaPWq5aV7ql9QTt5fIDYv+4eOegDmnEQGjwkKYADDystsKtPjt7QZerpVbhC96o3BIyqQ==}
 
@@ -11596,16 +11582,10 @@ snapshots:
     dependencies:
       date-fns: 2.30.0
 
-  date-fns-tz@3.1.3(date-fns@3.6.0):
-    dependencies:
-      date-fns: 3.6.0
-
   date-fns@2.30.0:
     dependencies:
       '@babel/runtime': 7.25.6
 
-  date-fns@3.6.0: {}
-
   dayjs-nuxt@2.1.11(magicast@0.3.5)(rollup@4.21.2)(webpack-sources@3.2.3):
     dependencies:
       '@nuxt/kit': 3.13.1(magicast@0.3.5)(rollup@4.21.2)(webpack-sources@3.2.3)