feat: 首页最近创作

src/apis/drafts.ts

 import { request } from '@/utils/request'
 
 // 获取草稿列表
-export function fetchDraftsList<T>(payload: object) {
-  return request.post<T>(`/bizDigitalHumanMemberDraftConfigRest/getList.json`, payload)
+export function fetchDraftsList<T>(payload: object, params: object = {}) {
+  return request.post<T>(`/bizDigitalHumanMemberDraftConfigRest/getList.json`, payload, { params })
 }
 
 // 保存更新用户草稿
@@ -14,15 +14,3 @@ export function fetchSaveDraftConfig<T>(payload: object) {
 export function fetchDeleteDraftConfigById<T>(id: string) {
   return request.post<T>(`/bizDigitalHumanMemberDraftConfigRest/deletedById.json?id=${id}`)
 }
-
-export function fetchRecentCreationList<T>(token: string) {
-  return request.post<T>(
-    '/draftsRest/recentCreationDataList.json',
-    {},
-    {
-      headers: {
-        'X-Request-Token': token,
-      },
-    },
-  )
-}

src/utils/date-formatter.ts

 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
-import 'dayjs/locale/zh-cn'
+import 'dayjs/locale/zh-hk'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
 
 export function formatDateTime(date: string | number | Date, format: string = 'YYYY-MM-DD HH:mm:ss'): string {
+  if (!date) return '-'
+
   return dayjs(date).format(format)
 }

src/views/index/layout/header-bar.vue

@@ -35,7 +35,7 @@ function handleDropdownSelect(key: string | number) {
 
 <template>
   <header class="flex h-[56px] justify-between">
-    <div class="font-600 flex items-center pl-4 text-xl">萃想智能云创</div>
+    <div class="font-600 flex items-center pl-4 text-xl">萃想智能雲創</div>
     <div class="flex items-center pr-4">
       <div class="mx-3">
         <n-button

src/views/index/layout/side-bar.vue

@@ -14,7 +14,7 @@ function iconConfigFactory(): any {
 const menuOptions = shallowReadonly<MenuOption[]>([
   {
     type: 'group',
-    label: '视频',
+    label: '視頻',
     key: 'Videos',
     children: [
       {

src/views/workbench/components/recent-creation.vue

 <script setup lang="ts">
-// import { fetchRecentCreationList } from '@/apis/drafts'
-// import { useUserStore } from '@/store/modules/user'
+import { fetchDraftsList } from '@/apis/drafts'
 import { Right } from '@icon-park/vue-next'
-import { onMounted } from 'vue'
+import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { formatDateTime } from '@/utils/date-formatter'
+
+interface CreationTemplateInfoItem {
+  id: number
+  taskType: string
+  coverUrl: string
+  modifiedTime: string
+  draftName: string
+}
 
 const router = useRouter()
-// const userStore = useUserStore()
 
-// const token = userStore.token
+const creationTemplateInfoList = ref<CreationTemplateInfoItem[]>([])
 
-onMounted(() => {
-  // getRecentCreationList()
+const pagingInfo = reactive({
+  pageNo: 1,
+  pageSize: 7,
 })
+
+const fetchCreationTemplateInfoListLoading = ref(true)
+
+;(function () {
+  getRecentCreationList()
+})()
+
+function getRecentCreationList() {
+  const params = {
+    pageNo: pagingInfo.pageNo,
+    pageSize: pagingInfo.pageSize,
+  }
+
+  fetchDraftsList<CreationTemplateInfoItem[]>({}, params).then((res) => {
+    creationTemplateInfoList.value = res.data.map((item) => ({
+      id: item.id,
+      draftName: item.draftName,
+      modifiedTime: item.modifiedTime,
+      coverUrl: item.coverUrl,
+      taskType: item.taskType,
+    }))
+
+    fetchCreationTemplateInfoListLoading.value = false
+  })
+}
+
+function creationTypeFormatter(type: string) {
+  switch (type) {
+    case 'IMAGE_VIDEO':
+      return '圖片視頻'
+    case 'BASE_VIDEO':
+      return '基礎視頻'
+    case 'ADVANCED_VIDEO':
+      return '精編視頻'
+    default:
+      return '其他內容'
+  }
+}
+
 function handleGoToDrafts() {
-  router.push('/work/draft')
+  // router.push('/work/draft')
+  router.push({ name: 'WorkDraft' })
 }
-// function getRecentCreationList() {
-//   fetchRecentCreationList(token).then((res) => {
-//     if (res.code !== 0) return ''
-//     console.log(res)
-//   })
-// }
 </script>
 
 <template>
@@ -37,30 +79,48 @@ function handleGoToDrafts() {
 
     <div class="overflow-y-auto text-nowrap">
       <n-scrollbar :x-scrollable="true">
-        <div v-for="item in 7" :key="item" class="mr-[10px] inline-block pb-[16px] text-center">
-          <div
-            class="relative mb-[12px] h-[145px] w-[145px] cursor-pointer overflow-hidden rounded-[12px] bg-[#f3f4fb]"
-          >
-            <img
-              class="z-1 relative h-full w-full object-contain transition-[scale] duration-300 ease-in-out hover:scale-110"
-              src="https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90"
-              alt="cover-image"
-            />
-
-            <img
-              class="absolute left-0 top-0 h-full w-full object-cover blur-[32px]"
-              src="https://meta-human-editor-prd.cdn.bcebos.com/2024-04-17T16:53:29.223639/sd-qdmv5bsghiyx1xb9z_1713344008761.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90"
-              alt="cover-image"
-            />
-
+        <div class="min-h-[194px]">
+          <template v-if="!fetchCreationTemplateInfoListLoading">
             <div
-              class="absolute bottom-[8px] left-[8px] z-10 rounded-[4px] bg-[rgba(0,0,0,.5)] px-[6px] py-[2px] text-[12px] text-[#fff]"
+              v-for="templateInfoItem in creationTemplateInfoList"
+              :key="templateInfoItem.id"
+              class="mr-[10px] inline-block pb-[16px]"
             >
-              精品视频
+              <div
+                class="relative mb-[12px] h-[145px] w-[145px] cursor-pointer overflow-hidden rounded-[12px] bg-[#f3f4fb]"
+              >
+                <img
+                  class="z-1 relative h-full w-full object-contain transition-[scale] duration-300 ease-in-out hover:scale-110"
+                  :src="templateInfoItem.coverUrl"
+                  alt="cover"
+                />
+
+                <img
+                  class="absolute left-0 top-0 h-full w-full object-cover blur-[32px]"
+                  :src="templateInfoItem.coverUrl"
+                  alt="cover"
+                />
+
+                <div
+                  class="absolute bottom-[8px] left-[8px] z-10 rounded-[4px] bg-[rgba(0,0,0,.5)] px-[6px] py-[2px] text-[12px] text-[#fff]"
+                >
+                  {{ creationTypeFormatter(templateInfoItem.taskType) }}
+                </div>
+              </div>
+
+              <n-ellipsis class="!max-w-[150px] cursor-default text-[#151b26]">
+                {{ templateInfoItem.draftName }} {{ formatDateTime(templateInfoItem.modifiedTime) }}
+              </n-ellipsis>
             </div>
-          </div>
+          </template>
 
-          <n-ellipsis class="!max-w-[150px] cursor-default text-[#151b26]">金融课程2024-09-11 09:48:41</n-ellipsis>
+          <template v-else>
+            <div v-for="item in 2" :key="item" class="mr-[10px] inline-block pb-[16px]">
+              <n-skeleton class="mb-[12px]" :height="145" :width="145" :sharp="false" />
+
+              <n-skeleton :height="21" :width="145" :sharp="false" />
+            </div>
+          </template>
         </div>
       </n-scrollbar>
     </div>