From e4011337740471ce31ab4858a5f74d749e1c9440 Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Sun, 12 Jan 2025 01:33:36 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20wip(avatar-management):=20?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97=E8=AE=B2=E5=B8=88=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/generation.vue               |  5 +++
 pages/generation/avatar-models.vue | 71 ++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 pages/generation/avatar-models.vue

diff --git a/pages/generation.vue b/pages/generation.vue
index d780b1a..151703e 100644
--- a/pages/generation.vue
+++ b/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',
diff --git a/pages/generation/avatar-models.vue b/pages/generation/avatar-models.vue
new file mode 100644
index 0000000..643e2bf
--- /dev/null
+++ b/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>