🚧 wip(avatar-management): 数字讲师管理页面

pages/generation.vue

@@ -21,6 +21,11 @@ const navList = ref<{
     icon: 'i-tabler-video',
     to: '/generation/green-screen',
   },
+  {
+    label: '数字讲师管理',
+    icon: 'tabler:user-screen',
+    to: '/generation/avatar-models',
+  },
   {
     label: '用户管理',
     icon: 'tabler:users',

pages/generation/avatar-models.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+const loginState = useLoginState()
+
+const data_layout = ref<'grid' | 'list'>('grid')
+const pagination = reactive({
+  page: 1,
+  pageSize: 15,
+})
+
+const {
+  data: userAvatarList,
+} = useAsyncData(
+  'user-digital-human',
+  () => useFetchWrapped<req.gen.DigitalHumanList & AuthedRequest, BaseResponse<PagedData<DigitalHumanItem>>>(
+    'App.User_UserDigital.GetList',
+    {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: pagination.page,
+      perpage: pagination.pageSize,
+    },
+  ),
+  {
+    watch: [pagination],
+  },
+)
+</script>
+
+<template>
+  <div class="h-full">
+    <div class="p-4 pb-0">
+      <BubbleTitle title="数字讲师管理" subtitle="Avatars">
+        <template #action>
+          <UButton :icon="data_layout === 'grid' ? 'tabler:layout-list' : 'tabler:layout-grid'" variant="ghost"
+            @click="data_layout = data_layout === 'grid' ? 'list' : 'grid'" />
+        </template>
+      </BubbleTitle>
+      <GradientDivider />
+    </div>
+    <div class="p-4">
+      <div v-if="data_layout === 'grid'" class="grid grid-cols-7 gap-4">
+        <div v-for="(avatar, k) in userAvatarList?.data.items" :key="avatar.model_id || k"
+          class="relative rounded-lg shadow overflow-hidden w-full aspect-[9/16]">
+          <NuxtImg :src="avatar.avatar" class="w-full h-full object-cover" />
+          <div class="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/50 to-transparent">
+            <UBadge color="white" variant="solid" icon="tabler:user-screen">{{ avatar.name }}</UBadge>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <div class="flex flex-col gap-4">
+          <div v-for="(avatar, k) in userAvatarList?.data.items" :key="avatar.model_id || k"
+            class="flex items-center gap-4 p-4 bg-white dark:bg-neutral-800 rounded-lg shadow">
+            <NuxtImg :src="avatar.avatar" class="w-16 h-16 rounded-lg" />
+            <div class="flex flex-col gap-1">
+              <UBadge color="gray" variant="solid" icon="tabler:user-screen">{{ avatar.name }}</UBadge>
+              <UBadge color="gray" variant="solid" icon="tabler:user-screen">{{ avatar.model_id }}</UBadge>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-end mt-4">
+        <UPagination v-model="pagination.page" :max="9" :page-count="pagination.pageSize"
+          :total="userAvatarList?.data.total || 0" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>