chore: 布局优化

src/apis/base-template.ts

+import { request } from '@/utils/request'
+
+export function fetchTemplateList<T>(templateType: string, pagingInfo: { pageNo: number; pageSize: number }) {
+  return request.post<T>('/aiDigitalHumanTemplateStatusRest/getDigitalHumanTemplateStatusList.json', null, {
+    params: {
+      templateType,
+      pageNo: pagingInfo.pageNo,
+      pageSize: pagingInfo.pageSize,
+    },
+  })
+}

src/apis/drafts.ts

+import { request } from '@/utils/request'
+
+export function fetchDraftsList<T>(token: string, queryParams: { pagingInfo: any }) {
+  return request.post<T>(
+    '/bizDigitalHumanMemberDraftConfigRest/getList.json',
+    {},
+    {
+      headers: {
+        'X-Request-Token': token,
+      },
+      params: queryParams.pagingInfo,
+    },
+  )
+}
+
+export function fetchRecentCreationList<T>(token: string) {
+  return request.post<T>(
+    '/draftsRest/recentCreationDataList.json',
+    {},
+    {
+      headers: {
+        'X-Request-Token': token,
+      },
+    },
+  )
+}

src/apis/opus.ts

+import { request } from '@/utils/request'
+
+export function fetchOpusList<T>(token: string, queryParams: { pagingInfo: any }) {
+  return request.post<T>(
+    '/bizDigitalHumanMemberTaskStatusRest/getMemberTaskStatusList.json',
+    {},
+    {
+      headers: {
+        'X-Request-Token': token,
+      },
+      params: queryParams.pagingInfo,
+    },
+  )
+}

src/apis/user.ts

@@ -16,3 +16,11 @@ export function fetchSMSCode<T>(phoneNumber: string) {
 export function fetchEmailCode<T>(emailAddress: string) {
   return request.post<T>(`/sendEmailRest/sendEmailCode.json?emailAddress=${emailAddress}`)
 }
+
+export function fetchUniversalCurrency<T>(token?: string) {
+  return request.post<T>('/bizMemberEquityRest/getUniversalCurrency.json', {
+    headers: {
+      'X-Request-Token': token,
+    },
+  })
+}

src/config/base-url.ts

 export const BASE_URLS: Record<'DEV' | 'PROD', string> = {
-  DEV: 'https://poc-sit.gsstcloud.com',
+  DEV: 'https://digitalperson-sit.gsstcloud.com',
   PROD: '',
 }

src/router/modules/home.ts

@@ -51,14 +51,23 @@ export default [
         component: () => import('@/views/home/home.vue'),
       },
       {
-        path: 'opus',
-        name: 'MyWorks',
+        path: '/work/videos',
+        name: 'work-videos',
         meta: {
           title: '我的作品',
           rank: 1001,
         },
         component: () => import('@/views/opus/opus.vue'),
       },
+      {
+        path: '/work/draft',
+        name: 'work-draft',
+        meta: {
+          title: '草稿箱',
+          rank: 1001,
+        },
+        component: () => import('@/views/draft/draft.vue'),
+      },
     ],
   },
 ] as RouteRecordRaw[]

src/views/draft/draft.vue

+<script setup lang="ts">
+import { h, onMounted, reactive, Ref, ref, watch } from 'vue'
+import { NButton, NEllipsis, NPopconfirm, useDialog, type DataTableColumns } from 'naive-ui'
+import { Search, CloseOne } from '@icon-park/vue-next'
+import { createData } from './draftsData'
+import { fetchDraftsList } from '@/apis/drafts'
+import { useUserStore } from '@/store/modules/user'
+type draftType = 'IMAGE_VIDEO' | 'BASE_VIDEO' | 'ADVANCED_VIDEO'
+
+interface draftRowData {
+  key: number
+  deaftsName: string
+  draftsImgUrl: string
+  type: draftType
+  LastEditTime: string
+}
+
+const dialog = useDialog()
+const opusPagination = reactive({
+  page: 1,
+  pageSize: 10,
+  showSizePicker: true,
+  pageSizes: [10, 20, 30],
+  prefix: () => h('div', [`共${filteredTemplateData.value.length}條數據`]),
+  onChange: (page: number) => {
+    opusPagination.page = page
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    opusPagination.pageSize = pageSize
+    opusPagination.page = 1
+  },
+})
+const userStore = useUserStore()
+const token = userStore.token
+const templateClassify = [
+  { value: 'All', label: '全部' },
+  {
+    value: 'IMAGE_VIDEO',
+    label: '照片數據人',
+  },
+  {
+    value: 'BASE_VIDEO',
+    label: '數字人生成',
+  },
+  {
+    value: 'ADVANCED_VIDEO',
+    label: '高級數字人',
+  },
+]
+
+const opusSelectedTag = ref('All')
+const checkedOpusKeys: Ref<number[]> = ref([])
+const opusList = ref(createData())
+const searchQuery = ref('')
+const filteredTemplateData = ref(opusList.value)
+const pagingInfo = ref({
+  pageNo: 0,
+  totalPages: 1,
+  pageSize: 10,
+  totalRows: 2,
+})
+
+const onCheckedOpusKeysChange = (newKeys: number[]) => {
+  checkedOpusKeys.value = newKeys
+}
+
+const opusActionColumns = createOpusColumns({
+  handleOpusDeleteRow(rowData) {
+    window.$message.info(`删除 ${rowData.key}`)
+  },
+  handleDraftsEdit(rowData) {
+    window.$message.info(`編輯 ${rowData.key}`)
+  },
+  handleDraftsCreatCopy(rowData) {
+    window.$message.info(`創建副本 ${rowData.key}`)
+  },
+})
+
+const handleMultiSelectDelete = () => {
+  dialog.warning({
+    title: '提示',
+    content: '確認刪除嗎？',
+    positiveText: '確認',
+    negativeText: '取消',
+    onPositiveClick: () => {
+      opusList.value = opusList.value.filter((item) => !checkedOpusKeys.value.includes(item.key))
+      checkedOpusKeys.value = []
+      window.$message.success('删除成功')
+    },
+    onNegativeClick: () => {
+      window.$message.error('取消')
+    },
+  })
+}
+watch([opusSelectedTag], () => {
+  handleFilterOpusData()
+})
+function createOpusColumns({
+  handleOpusDeleteRow,
+  handleDraftsEdit,
+  handleDraftsCreatCopy,
+}: {
+  handleOpusDeleteRow: (rowData: draftRowData) => void
+  handleDraftsEdit: (rowData: draftRowData) => void
+  handleDraftsCreatCopy: (rowData: draftRowData) => void
+}): DataTableColumns<draftRowData> {
+  return [
+    {
+      type: 'selection',
+      fixed: 'left',
+    },
+    {
+      title: '草稿名稱',
+      key: 'deaftsName',
+      render(row) {
+        return h('div', { class: 'flex items-center w-[320px]' }, [
+          h(
+            'div',
+            { class: 'w-[111px] h-[55px] mr-[10px] flex items-center justify-center overflow-hidden relative' },
+            [
+              h('img', {
+                src: row.draftsImgUrl,
+                alt: '作品圖片',
+                class: 'h-full object-cover',
+              }),
+            ],
+          ),
+          h(NEllipsis, { style: { maxWidth: '150px' } }, { default: () => row.deaftsName }),
+        ])
+      },
+    },
+    {
+      title: '類型',
+      key: 'type',
+      render(row) {
+        const typeMap = {
+          IMAGE_VIDEO: '照片數字人',
+          BASE_VIDEO: '數字人生成',
+          ADVANCED_VIDEO: '高級數字人',
+        }
+        return h('span', {}, typeMap[row.type] || '')
+      },
+    },
+    {
+      title: '最後編輯時間',
+      key: 'LastEditTime',
+    },
+    {
+      title: '操作',
+      key: 'operation',
+      render(row) {
+        return h('div', { class: 'operation-buttons' }, [
+          h(
+            'span',
+            {
+              onClick: () => handleDraftsEdit(row),
+              class: 'text-[#2468f2] cursor-pointer mr-[10px]',
+            },
+            '編輯',
+          ),
+          h(
+            'span',
+            {
+              onClick: () => handleDraftsCreatCopy(row),
+              class: 'text-[#2468f2] cursor-pointer mr-[10px]',
+            },
+            '創建副本',
+          ),
+          h(
+            NPopconfirm,
+            {
+              onPositiveClick: () => handleOpusDeleteRow(row),
+              onNegativeClick: () => {
+                window.$message.info('取消删除')
+              },
+            },
+            {
+              trigger: () =>
+                h(
+                  'span',
+                  {
+                    class: 'text-[#2468f2] cursor-pointer',
+                  },
+                  '删除',
+                ),
+              default: () => '確認要刪除這一行嗎？',
+            },
+          ),
+        ])
+      },
+    },
+  ]
+}
+
+function handleFilterOpusData() {
+  let filteredData = opusList.value
+
+  if (opusSelectedTag.value !== 'All') {
+    filteredData = filteredData.filter((item) => item.type === opusSelectedTag.value)
+  }
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    filteredData = filteredData.filter((item) => item.deaftsName.toLowerCase().includes(query))
+  }
+
+  filteredTemplateData.value = filteredData
+}
+
+function handleClearSearchQuery() {
+  searchQuery.value = ''
+  handleFilterOpusData()
+}
+
+function getDraftsList() {
+  fetchDraftsList(token, { pagingInfo: pagingInfo.value }).then((res) => {
+    if (res.code !== 0) return ''
+    console.log('草稿箱list', res)
+  })
+}
+
+onMounted(() => {
+  getDraftsList()
+})
+</script>
+
+<template>
+  <div
+    class="h-full min-h-[840px] min-w-[1160px] overflow-auto rounded-[16px] bg-white px-[24px] pb-[16px]"
+    style="scrollbar-width: none"
+  >
+    <div class="overflow-auto bg-white pt-[24px]">
+      <div class="mb-[24px] cursor-default text-[18px] text-[#000]">草稿箱</div>
+      <div class="pb-[16px]">
+        <n-radio-group v-model:value="opusSelectedTag">
+          <n-radio-button
+            v-for="classify in templateClassify"
+            :key="classify.value"
+            class="!h-[28px] !px-[12px] !leading-[28px] hover:text-[#5b647a]"
+            :value="classify.value"
+            :label="classify.label"
+          />
+        </n-radio-group>
+      </div>
+      <div class="flex justify-between">
+        <div>
+          <NButton
+            class="!rounded-[4px]"
+            :class="{ '!border-[#2468f2] !bg-[#2468f2] !text-white': checkedOpusKeys.length > 0 }"
+            :disabled="!checkedOpusKeys.length"
+            @click="handleMultiSelectDelete"
+            >删除</NButton
+          >
+          <span v-show="checkedOpusKeys.length" class="color-[#999] ml-[8px] text-[12px]"
+            >选择{{ checkedOpusKeys.length }}条记录</span
+          >
+        </div>
+
+        <div
+          class="border-1 mb-[10px] flex h-[34px] w-[226px] items-center justify-center rounded-[6px] border-[#000]/[0.25] pr-[11px] text-[12px]"
+        >
+          <input
+            v-model="searchQuery"
+            type="text"
+            class="mx-[11px] w-[183px] border-none outline-none"
+            placeholder="請輸入名稱進行蒐索"
+            @keyup.enter="handleFilterOpusData"
+          />
+          <CloseOne
+            v-show="searchQuery.length"
+            theme="filled"
+            size="16"
+            fill="#D4D6D9"
+            class="mr-[5px] cursor-pointer"
+            @click="handleClearSearchQuery"
+          />
+          <Search theme="outline" size="16" fill="#00000040" class="cursor-pointer" @click="handleFilterOpusData" />
+        </div>
+      </div>
+      <div class="relative">
+        <n-data-table
+          :bordered="false"
+          :single-line="false"
+          :columns="opusActionColumns"
+          :data="filteredTemplateData"
+          :checked-row-keys="checkedOpusKeys"
+          class="border-t-[1px]"
+          :pagination="opusPagination"
+          @update:checked-row-keys="onCheckedOpusKeysChange"
+        >
+        </n-data-table>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.n-radio-group {
+  --n-button-box-shadow-focus: none !important;
+
+  .n-radio-button {
+    border: none;
+    border-width: 0 !important;
+    border-radius: 15px !important;
+
+    &:first-child {
+      border-left: none !important;
+    }
+
+    &:last-child {
+      border-right: none !important;
+    }
+
+    &.n-radio-button--checked {
+      color: #091221 !important;
+      background-color: #edeef7 !important;
+      border: none !important;
+    }
+
+    &:not(.n-radio-button--disabled):hover:not(.n-radio-button--checked) {
+      color: #5b647a !important;
+    }
+  }
+
+  .n-radio-group__splitor {
+    width: 0 !important;
+    background-color: #fff !important;
+  }
+}
+
+.n-data-table {
+  border: none;
+
+  .n-data-table-th {
+    text-align: center !important;
+    background-color: #f6f7fb !important;
+  }
+
+  .n-data-table-td {
+    text-align: center !important;
+  }
+
+  .n-data-table-tbody {
+    font-size: 16px !important;
+  }
+
+  :not(.n-data-table--single-line) {
+    .n-data-table-th {
+      border-right: 2px solid #fff !important;
+      border-bottom: none !important;
+    }
+
+    .n-data-table-td {
+      border-right: 2px solid #fff0 !important;
+      border-bottom: none !important;
+    }
+  }
+}
+
+.v-binder-follower-content {
+  margin-left: 0 !important;
+}
+
+.n-popover__content {
+  font-size: 12px;
+}
+
+.n-popover:not(.n-popover--raw) {
+  color: #000;
+  background-color: #fff !important;
+}
+
+.n-card.n-card--bordered {
+  border: none !important;
+}
+
+.n-popover-shared .n-popover-arrow-wrapper .n-popover-arrow {
+  background-color: #fff !important ;
+}
+</style>

src/views/draft/draftsData.ts

+export interface RowData {
+  key: number
+  deaftsName: string
+  draftsImgUrl: string
+  type: string
+  LastEditTime: string
+}
+
+export function createData(): RowData[] {
+  return [
+    {
+      key: 1,
+      deaftsName: '英语教育课程dhuoajipaijiaopna[jjioannod那【基调]',
+      draftsImgUrl:
+        'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+      type: 'IMAGE_VIDEO',
+      LastEditTime: '2021.9.15  10:58:26',
+    },
+    {
+      key: 2,
+      deaftsName: 'test',
+      draftsImgUrl:
+        'https://meta-human-editor-prd.cdn.bcebos.com/91eacc90-a5cc-444b-997c-d33afdcada8f/a975c86f-cb3c-4cec-9bcc-4bb6453143cf/%E7%81%BF%E7%83%82%E7%83%9F%E7%81%AB-%E6%A8%AA%E7%89%88%E6%88%AA%E5%9B%BE.png?x-bce-process=image/format,f_auto/resize,w_500/quality,q_90',
+      type: 'BASE_VIDEO',
+      LastEditTime: '2021.9.15  10:58:26',
+    },
+  ]
+}

src/views/home/components/bigitalPerson-creation.vue → src/views/home/components/card-navigator.vue

 <script setup lang="ts">
+import { fetchUniversalCurrency } from '@/apis/user'
+import { useUserStore } from '@/store/modules/user'
 import { Right } from '@icon-park/vue-next'
+import { onMounted, ref } from 'vue'
+
+const UniversalCurrency = ref()
+const userStore = useUserStore()
+
+const userInfo = userStore.userInfo
+
+function handleGoToCreation() {
+  console.log('立即创作')
+}
+
+function getUniversalCurrency() {
+  fetchUniversalCurrency().then((res) => {
+    if (res.code !== 0) return ''
+    UniversalCurrency.value = res.data
+  })
+}
+
+function handleRechargeCurrency() {
+  console.log('充值')
+}
+onMounted(() => {
+  getUniversalCurrency()
+})
 </script>
 
 <template>
@@ -14,6 +40,7 @@ import { Right } from '@icon-park/vue-next'
         </div>
         <div
           class="text-align-center mt-[20px] h-[35px] w-[90px] cursor-pointer rounded-[6px] bg-[#fff3] text-[14px] leading-[35px] text-[#fff] hover:bg-[#fff]/[.4]"
+          @click="handleGoToCreation"
         >
           <span>立即創作</span>
         </div>
@@ -32,6 +59,7 @@ import { Right } from '@icon-park/vue-next'
         </div>
         <div
           class="text-align-center mt-[20px] h-[35px] w-[90px] cursor-pointer rounded-[6px] bg-[#fff3] text-[14px] leading-[35px] text-[#fff] hover:bg-[#fff]/[.4]"
+          @click="handleGoToCreation"
         >
           <span>立即創作</span>
         </div>
@@ -47,24 +75,32 @@ import { Right } from '@icon-park/vue-next'
             <n-avatar
               round
               :size="56"
-              src="https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png"
+              :src="
+                userInfo.avatarUrl ||
+                'https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png'
+              "
             />
           </div>
 
-          <div class="ml-[14px] mt-[26px]">廣州超聯軟件</div>
+          <div class="ml-[14px] mt-[30px]">{{ userInfo.nickName }}</div>
         </div>
         <div class="mt-[25px] flex">
           <div class="mr-[50px]">
-            <div class="ml-[70px] text-[16px] text-[#101010]">12</div>
+            <div class="ml-[70px] text-center text-[16px] text-[#101010]">12</div>
             <div class="ml-[72px] mt-[6px]">創作</div>
           </div>
           <div class="h-[45px] w-[1px] bg-[#BBBBBB]"></div>
           <div class="flex">
             <div class="ml-[56px]">
-              <div class="text-[16px] text-[#101010]">940</div>
+              <div class="text-center text-[16px] text-[#101010]">{{ UniversalCurrency }}</div>
               <div class="mt-[6px]">餘額</div>
             </div>
-            <div class="ml-[15px] h-[24px] cursor-pointer leading-[24px] text-[#036CFD]">充值</div>
+            <div
+              class="ml-[15px] h-[24px] cursor-pointer leading-[24px] text-[#036CFD]"
+              @click="handleRechargeCurrency"
+            >
+              充值
+            </div>
             <div class="mt-[5px] cursor-pointer">
               <Right theme="outline" size="15" fill="#036CFD" />
             </div>

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

 <script setup lang="ts">
+// import { fetchRecentCreationList } from '@/apis/drafts'
+// import { useUserStore } from '@/store/modules/user'
 import { Right } from '@icon-park/vue-next'
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+// const userStore = useUserStore()
+
+// const token = userStore.token
+
+onMounted(() => {
+  // getRecentCreationList()
+})
+function handleGoToDrafts() {
+  router.push('/work/draft')
+}
+// function getRecentCreationList() {
+//   fetchRecentCreationList(token).then((res) => {
+//     if (res.code !== 0) return ''
+//     console.log(res)
+//   })
+// }
 </script>
 
 <template>
   <div class="rounded-[16px] bg-white px-[24px] pb-[16px] pt-[24px]">
     <div class="flex justify-between text-[18px] text-[#000]">
       最近創作
-      <div class="flex h-[22px] cursor-pointer items-center text-[14px] text-[#5b647a]">
-        <div class="">查看全部</div>
+      <div class="flex h-[22px] cursor-pointer items-center text-[14px] text-[#5b647a]" @click="handleGoToDrafts">
+        <div>查看全部</div>
         <Right theme="outline" size="16" fill="#5b647a" />
       </div>
     </div>

src/views/home/components/template-preview-modal.vue

@@ -3,27 +3,41 @@ import { Close } from '@icon-park/vue-next'
 
 const PreviewModalVisible = defineModel<boolean>()
 const props = defineProps<{
-  selectedTemplate: { imageUrl: string; videoUrl: string }
+  selectedTemplate: {
+    id: number
+    coverUrl: string
+    demonstrationGifUrl: string
+    demonstrationVideoUrl: string
+    templateName: string
+    templateType: string
+  }
+}>()
+const emit = defineEmits<{
+  (event: 'go-to-create', id: number): void
 }>()
 
-function handleClose() {
+function handlePreviewModalClose() {
   PreviewModalVisible.value = false
 }
+
+function handleGoToCreate(this: any) {
+  emit('go-to-create', props.selectedTemplate.id)
+}
 </script>
 <template>
   <n-modal v-model:show="PreviewModalVisible">
     <div class="flex flex-col items-center justify-center">
       <div class="h-[603px] w-[800px] rounded-lg bg-white">
         <div class="flex justify-between px-[24px] pt-[24px] text-[16px]">
-          <span>企業宣傳</span>
-          <Close theme="outline" size="18" fill="#00000073" class="cursor-pointer" @click="handleClose" />
+          <span>{{ props.selectedTemplate.templateName }}</span>
+          <Close theme="outline" size="18" fill="#00000073" class="cursor-pointer" @click="handlePreviewModalClose" />
         </div>
         <div class="px-[24px] pb-[24px] pt-[16px]">
           <div class="flex justify-center rounded-[16px] bg-[#f3f4fb]">
             <div class="relative flex h-[448px] w-[752px] items-center justify-center rounded-[16px] bg-[#f3f4fb]">
               <video
-                :src="props.selectedTemplate.videoUrl"
-                :poster="props.selectedTemplate.imageUrl"
+                :src="props.selectedTemplate.demonstrationVideoUrl"
+                :poster="props.selectedTemplate.coverUrl"
                 class="h-[448px] w-[752px]"
                 autoplay
                 controls
@@ -33,12 +47,13 @@ function handleClose() {
           <div class="mt-[24px] flex justify-end">
             <button
               class="!mr-[12px] box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] px-[10px] outline-none transition-all duration-300 hover:border-[#2468f2] hover:text-[#2468f2]"
-              @click="handleClose"
+              @click="handlePreviewModalClose"
             >
               取消
             </button>
             <button
               class="!box-content !h-[38px] !w-[74px] cursor-pointer rounded-[6px] border-[1px] border-solid border-[#dde3f0] bg-gradient-to-r from-[#30b5f2] to-[#2468f2] px-[10px] text-[#ffffff] transition-all duration-300 hover:from-[#30b5f2] hover:to-[#528eff]"
+              @click="handleGoToCreate"
             >
               做同款
             </button>

src/views/home/home.vue

 <script setup lang="ts">
-import BigitalPersonCreation from './components/bigitalPerson-creation.vue'
+import HeaderBar from './components/card-navigator.vue'
 import RecentCreation from './components/recent-creation.vue'
 import RecommendTemplate from './components/recommend-template.vue'
 </script>
 
 <template>
-  <BigitalPersonCreation />
+  <HeaderBar />
   <RecentCreation />
   <RecommendTemplate />
 </template>

src/views/index/index.vue

@@ -5,3 +5,24 @@ import Layout from './layout/index.vue'
 <template>
   <Layout />
 </template>
+<style lang="scss" scoped>
+:deep(.n-dropdown-menu) {
+  --n-border-radius: 10px;
+
+  .n-avatar {
+    width: 45px !important;
+    height: 45px !important;
+  }
+
+  .n-dropdown-divider {
+    width: 90%;
+    margin: auto !important;
+  }
+
+  .n-dropdown-option {
+    .n-dropdown-option-body {
+      flex-direction: row-reverse;
+    }
+  }
+}
+</style>

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

 <script setup lang="ts">
 import { NDropdown } from 'naive-ui'
-import { h } from 'vue'
+import { h, ref } from 'vue'
 import CustomIcon from '@/components/custom-icon/custom-icon.vue'
 import { NAvatar } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/store/modules/user'
 import { Right, Logout } from '@icon-park/vue-next'
 import { Icon } from '@icon-park/vue-next/lib/runtime'
+import { onMounted } from 'vue'
+import { fetchUniversalCurrency } from '@/apis/user'
 
 const router = useRouter()
 const userStore = useUserStore()
+const userInfo = userStore.userInfo
+const UniversalCurrency = ref()
 
 const options = [
   {
@@ -38,6 +42,13 @@ const options = [
   },
 ]
 
+function getUniversalCurrency() {
+  fetchUniversalCurrency().then((res) => {
+    if (res.code !== 0) return ''
+    UniversalCurrency.value = res.data
+  })
+}
+
 function renderIcon(icon: Icon) {
   return () => {
     return h(icon, {
@@ -50,21 +61,22 @@ function renderIcon(icon: Icon) {
 
 function renderCustomHeader() {
   return h('div', [
-    h('div', { class: 'flex' }, [
+    h('div', { class: 'flex w-[200px]' }, [
       h(NAvatar, {
         round: true,
         class: 'w-[50px] h-[50px] mr-[6px] ml-[15px] mt-[10px]',
-        src: 'https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png',
+        src:
+          userInfo.avatarUrl || 'https://mkp-dev.oss-cn-shenzhen.aliyuncs.com/game-template/20230103/1672717001352.png',
       }),
-      h('div', { class: 'text-[16px] mt-[20px] ml-[3px]' }, ['廣州超聯軟件']),
+      h('div', { class: 'text-[16px] mt-[20px] ml-[3px]' }, [userInfo.nickName]),
     ]),
     h('div', { class: 'flex items-center justify-between mt-[10px] mb-[8px] ml-[15px]' }, [
       h('div', ['灵豆余额']),
       h('div', { class: 'flex' }, [
-        h('span', { class: 'mr-[5px] text-[14px]' }, ['960']),
+        h('span', { class: 'mr-[5px] text-[14px]' }, [UniversalCurrency.value]),
         h('img', {
           class: 'mr-[9px] w-[16px] h-[16px] mt-[1px] ml-[5px]',
-          src: new URL('@/assets/iconPark-vicia-faba1@1x.png', import.meta.url).href,
+          src: new URL('@/assets/images/icon-universalcurrency.png', import.meta.url).href,
         }),
       ]),
     ]),
@@ -83,6 +95,9 @@ async function handleSelect(key: string | number) {
     return
   }
 }
+onMounted(() => {
+  getUniversalCurrency()
+})
 </script>
 
 <template>
@@ -95,7 +110,7 @@ async function handleSelect(key: string | number) {
           <span class="text-[14px]">充值</span>
         </n-button>
       </div>
-      <NDropdown :options="options" trigger="hover" @select="handleSelect">
+      <NDropdown :options="options" trigger="hover" class="dropdown-style" @select="handleSelect">
         <NAvatar
           class="cursor-pointer"
           round
@@ -107,32 +122,3 @@ async function handleSelect(key: string | number) {
     </div>
   </header>
 </template>
-<style lang="scss">
-.v-binder-follower-content {
-  width: 210px;
-  margin-left: -80px;
-}
-
-.n-dropdown-menu {
-  border-radius: 10px !important;
-
-  .n-avatar {
-    width: 45px !important;
-    height: 45px !important;
-  }
-
-  .n-dropdown-divider {
-    width: 90%;
-    margin: auto !important;
-  }
-
-  .n-dropdown-option .n-dropdown-option-body {
-    flex-direction: row-reverse;
-
-    .n-icon svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-}
-</style>

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

@@ -19,7 +19,12 @@ const menuOptions = shallowReadonly<MenuOption[]>([
       {
         label: '我的作品',
         key: 'opus',
-        onClick: () => router.push({ name: 'MyWorks' }),
+        onClick: () => router.push({ name: 'work-videos' }),
+      },
+      {
+        label: '草稿箱',
+        key: 'draft',
+        onClick: () => router.push({ name: 'work-draft' }),
       },
     ],
   },

src/views/opus/opus.vue

 <script setup lang="ts">
-import { h, reactive, Ref, ref, watch } from 'vue'
+import { h, onMounted, reactive, Ref, ref, watch } from 'vue'
 import { NButton, NEllipsis, NPopconfirm, useDialog, type DataTableColumns } from 'naive-ui'
 import { Search, CloseOne } from '@icon-park/vue-next'
 import { createData } from './opusData'
+import { useUserStore } from '@/store/modules/user'
+import { fetchOpusList } from '@/apis/opus'
 type opusType = 'IMAGE_VIDEO' | 'BASE_VIDEO' | 'ADVANCED_VIDEO'
 type opusStateType = 'SUBMIT' | 'GENERATING' | 'SUCCESS' | 'FAILED'
 
@@ -31,6 +33,8 @@ const opusPagination = reactive({
     opusPagination.page = 1
   },
 })
+const userStore = useUserStore()
+const token = userStore.token
 
 const templateClassify = [
   { value: 'All', label: '全部' },
@@ -53,6 +57,12 @@ const checkedOpusKeys: Ref<number[]> = ref([])
 const opusList = ref(createData())
 const searchQuery = ref('')
 const filteredTemplateData = ref(opusList.value)
+const pagingInfo = ref({
+  pageNo: 0,
+  totalPages: 1,
+  pageSize: 10,
+  totalRows: 2,
+})
 
 const onCheckedOpusKeysChange = (newKeys: number[]) => {
   checkedOpusKeys.value = newKeys
@@ -242,6 +252,15 @@ function handleClearSearchQuery() {
   searchQuery.value = ''
   handleFilterOpusData()
 }
+function getOpusList() {
+  fetchOpusList(token, { pagingInfo: pagingInfo.value }).then((res) => {
+    if (res.code !== 0) return ''
+    console.log('作品list', res)
+  })
+}
+onMounted(() => {
+  getOpusList()
+})
 </script>
 
 <template>