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

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

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

package.json

@@ -58,6 +58,7 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
     "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
+    "dayjs": "^1.11.13",
     "pinia": "^2.2.2",
     "vue": "^3.4.21",
     "vue-i18n": "^9.1.9",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       '@dcloudio/uni-quickapp-webview':
         specifier: 3.0.0-4020420240722002
         version: 3.0.0-4020420240722002(@nuxt/kit@3.13.2(rollup@4.21.3)(webpack-sources@3.2.3))(postcss@8.4.45)(rollup@4.21.3)(vue@3.5.5(typescript@4.9.5))(webpack-sources@3.2.3)
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       pinia:
         specifier: ^2.2.2
         version: 2.2.2(typescript@4.9.5)(vue@3.5.5(typescript@4.9.5))
@@ -1497,46 +1500,55 @@ packages:
     resolution: {integrity: sha512-btVgIsCjuYFKUjopPoWiDqmoUXQDiW2A4C3Mtmp5vACm7/GnyuprqIDPNczeyR5W8rTXEbkmrJux7cJmD99D2g==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.21.3':
     resolution: {integrity: sha512-zmjbSphplZlau6ZTkxd3+NMtE4UKVy7U4aVFMmHcgO5CUbw17ZP6QCgyxhzGaU/wFFdTfiojjbLG3/0p9HhAqA==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.21.3':
     resolution: {integrity: sha512-nSZfcZtAnQPRZmUkUQwZq2OjQciR6tEoJaZVFvLHsj0MF6QhNMg0fQ6mUOsiCUpTqxTx0/O6gX0V/nYc7LrgPw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.21.3':
     resolution: {integrity: sha512-MnvSPGO8KJXIMGlQDYfvYS3IosFN2rKsvxRpPO2l2cum+Z3exiExLwVU+GExL96pn8IP+GdH8Tz70EpBhO0sIQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.21.3':
     resolution: {integrity: sha512-+W+p/9QNDr2vE2AXU0qIy0qQE75E8RTwTwgqS2G5CRQ11vzq0tbnfBd6brWhS9bCRjAjepJe2fvvkvS3dno+iw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.21.3':
     resolution: {integrity: sha512-yXH6K6KfqGXaxHrtr+Uoy+JpNlUlI46BKVyonGiaD74ravdnF9BUNC+vV+SIuB96hUMGShhKV693rF9QDfO6nQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.21.3':
     resolution: {integrity: sha512-R8cwY9wcnApN/KDYWTH4gV/ypvy9yZUHlbJvfaiXSB48JO3KpwSpjOGqO4jnGkLDSk1hgjYkTbTt6Q7uvPf8eg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.21.3':
     resolution: {integrity: sha512-kZPbX/NOPh0vhS5sI+dR8L1bU2cSO9FgxwM8r7wHzGydzfSjLRCFAT87GR5U9scj2rhzN3JPYVC7NoBbl4FZ0g==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.21.3':
     resolution: {integrity: sha512-S0Yq+xA1VEH66uiMNhijsWAafffydd2X5b77eLHfRmfLsRSpbiAWiRHV6DEpz6aOToPsgid7TI9rGd6zB1rhbg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.21.3':
     resolution: {integrity: sha512-9isNzeL34yquCPyerog+IMCNxKR8XYmGd0tHSV+OVx0TmE0aJOo9uw4fZfUuk2qxobP5sug6vNdZR6u7Mw7Q+Q==}

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)} 完成上传`
         : "视频后期制作",
     },
   ];