feat: 添加 dayjs 库以处理日期格式化

为了在课程详情页面中正确显示创建日期，我们添加了 dayjs 库来格式化日期字符串。这样，我们可以将日期显示为 "YYYY-MM-DD HH:mm:ss" 的格式。

- 添加了 dayjs 库的依赖
- 在课程详情页面中使用 dayjs 格式化创建日期

src/composables/useDayjs.ts

@@ -0,0 +1,12 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import duration from "dayjs/plugin/duration";
+import "dayjs/locale/zh-cn";
+
+dayjs.extend(relativeTime);
+dayjs.extend(duration);
+dayjs.locale('zh-cn')
+
+export const useDayjs = () => {
+  return dayjs;
+}

src/pages/lesson/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import BussApi from '@/api/BussApi';
+import { useDayjs } from '@/composables/useDayjs';
 import type { Lesson } from '@/types/api/lesson';
 import { calcLessonProgress, extractLessonStage, getLessonSteps } from '@/utils/lesson';
 import { useRoute } from 'uni-mini-router';
@@ -8,6 +9,7 @@ import { useToast } from 'wot-design-uni';
 
 const route = useRoute()
 const toast = useToast()
+const dayjs = useDayjs()
 
 const lesson = ref<Lesson | null>(null)
 const lessonSteps = computed(() => lesson.value ? getLessonSteps(lesson.value) : [])
@@ -40,7 +42,7 @@ onMounted(() => {
         <h2 class="text-sm text-white font-black op-50">{{ lesson?.m_lesson_name }}</h2>
         <h1 class="text-lg text-white font-bold">{{ lesson?.course_name }}</h1>
       </div>
-      <p class="text-xs text-white font-bold op-50" style="line-height: 1;">创建于 {{ lesson?.created_at }}</p>
+      <p class="text-xs text-white font-bold op-50" style="line-height: 1;">创建于 {{ dayjs(lesson?.created_at).format('YYYY-MM-DD HH:mm:ss') }}</p>
       <wd-icon :name="lessonProgress === 100 ? 'check-circle' : 'hourglass'" custom-class="absolute text-white top-2 right-2 op-35" size="64px" />
     </div>
     <div class="p-4">

src/utils/lesson.ts

@@ -1,3 +1,4 @@
+import { useDayjs } from "@/composables/useDayjs";
 import type { Lesson } from "@/types/api/lesson";
 
 export const extractLessonStage = (lesson: Lesson) => {
@@ -18,30 +19,32 @@ export const calcLessonProgress = (lesson: Lesson, total: number = 4) => {
 };
 
 export const getLessonSteps = (lesson: Lesson) => {
+  const dayjs = useDayjs();
+  const dateFormat = "YYYY-MM-DD HH:mm:ss";
   const progress = extractLessonStage(lesson);
   return [
     {
       title: progress.script_upload ? "脚本文件上传" : undefined,
       description: progress.script_upload
-        ? `已于 ${lesson.script_upload_time} 完成上传`
+        ? `已于 ${dayjs(lesson.script_upload_time * 1000).format(dateFormat)} 完成上传`
         : "脚本文件上传",
     },
     {
       title: progress.script_confirm ? "脚本文件确认" : undefined,
       description: progress.script_confirm
-        ? `已于 ${lesson.script_confirm_time} 确认`
+        ? `已于 ${dayjs(lesson.script_confirm_time * 1000).format(dateFormat)} 确认`
         : "脚本文件确认",
     },
     {
       title: progress.video_capture ? "视频拍摄和上传" : undefined,
       description: progress.video_capture
-        ? `已于 ${lesson.video_capture_time} 完成上传`
+        ? `已于 ${dayjs(lesson.video_capture_time * 1000).format(dateFormat)} 完成上传`
         : "视频拍摄上传",
     },
     {
       title: progress.post_production ? "视频后期制作" : undefined,
       description: progress.post_production
-        ? `已于 ${lesson.video_confirm_time} 完成上传`
+        ? `已于 ${dayjs(lesson.video_confirm_time * 1000).format(dateFormat)} 完成上传`
         : "视频后期制作",
     },
   ];