feat: 系统数字人管理

pages/generation/avatar-models.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import { number, object, string, type InferType } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+
+const toast = useToast()
 const loginState = useLoginState()
 
 const data_layout = ref<'grid' | 'list'>('grid')
@@ -6,27 +10,94 @@ const pagination = reactive({
   page: 1,
   pageSize: 15,
 })
+const showSystemAvatar = ref(false)
+watchEffect(() => {
+  if (showSystemAvatar.value) {
+    data_layout.value = 'list'
+  }
+})
 
 const {
   data: userAvatarList,
   status: userAvatarStatus,
+  refresh: refreshUserAvatarList,
 } = useAsyncData(
   'user-digital-human',
-  () => useFetchWrapped<req.gen.DigitalHumanList & AuthedRequest, BaseResponse<PagedData<DigitalHumanItem>>>(
+  () =>
-    'App.User_UserDigital.GetList',
+    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],
+    watch: [pagination, showSystemAvatar],
-  },
+  }
 )
 
+const {
+  data: systemAvatarList,
+  status: systemAvatarStatus,
+  refresh: refreshSystemAvatarList,
+} = useAsyncData(
+  'sys-digital-human',
+  () =>
+    useFetchWrapped<
+      req.gen.DigitalHumanList & AuthedRequest,
+      BaseResponse<PagedData<DigitalHumanItem>>
+    >('App.Digital_Human.GetList', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      to_user_id: loginState.user.id,
+      page: pagination.page,
+      perpage: pagination.pageSize,
+    }),
+  {
+    watch: [pagination, showSystemAvatar],
+  }
+)
+
+const onSystemAvatarDelete = (row: DigitalHumanItem) => {
+  useFetchWrapped<
+    { digital_human_id: number } & AuthedRequest,
+    BaseResponse<{ code: 0 | 1 }>
+  >('App.Digital_Human.Delete', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    digital_human_id: row.id!,
+  })
+    .then((res) => {
+      if (res.ret === 200 && res.data.code === 1) {
+        toast.add({
+          title: '删除成功',
+          description: '数字人已删除',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+        refreshSystemAvatarList()
+      } else {
+        toast.add({
+          title: '删除失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .catch(() => {
+      toast.add({
+        title: '删除失败',
+        description: '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+}
+
 const columns = [
   {
     key: 'avatar',
@@ -48,66 +119,329 @@ const columns = [
     key: 'actions',
   },
 ]
+
+const isCreateSlideOpen = ref(false)
+
+const createAvatarState = reactive({
+  name: '',
+  description: '',
+  model_id: undefined,
+  avatar: '',
+  type: 0,
+})
+
+const createAvatarSchema = object({
+  name: string().required('请输入名称'),
+  description: string().required('请输入备注'),
+  model_id: number().required('请输入ID'),
+  avatar: string().required('请上传图片'),
+  type: number().required('请选择类型'),
+})
+
+type CreateAvatarSchema = InferType<typeof createAvatarSchema>
+
+const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
+  useFetchWrapped<
+    CreateAvatarSchema & AuthedRequest,
+    BaseResponse<{ digital_human_id: number }>
+  >('App.Digital_Human.Create', {
+    token: loginState.token!,
+    user_id: loginState.user.id,
+    name: event.data.name,
+    description: event.data.description,
+    model_id: event.data.model_id,
+    avatar: createAvatarState.avatar,
+    type: event.data.type,
+  })
+    .then((res) => {
+      if (res.ret === 200 && res.data.digital_human_id) {
+        toast.add({
+          title: '创建成功',
+          description: '数字人已创建',
+          color: 'green',
+          icon: 'i-tabler-check',
+        })
+        refreshSystemAvatarList()
+        showSystemAvatar.value = true
+        isCreateSlideOpen.value = false
+      } else {
+        toast.add({
+          title: '创建失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-alert-triangle',
+        })
+      }
+    })
+    .catch(() => {
+      toast.add({
+        title: '创建失败',
+        description: '未知错误',
+        color: 'red',
+        icon: 'i-tabler-alert-triangle',
+      })
+    })
+}
+
+const onAvatarUpload = async (files: FileList) => {
+  const file = files[0]
+  try {
+    const url = await useFileGo(file)
+    createAvatarState.avatar = url
+    toast.add({
+      title: '上传文件成功',
+      description: '文件已上传',
+      color: 'green',
+      icon: 'i-tabler-check',
+    })
+  } catch {
+    toast.add({
+      title: '上传文件失败',
+      description: '请重试',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+  }
+}
 </script>
 
 <template>
-  <LoginNeededContent>
   <div class="h-full">
     <div class="p-4 pb-0">
-        <BubbleTitle title="数字讲师管理" subtitle="Avatars">
+      <BubbleTitle
+        title="数字讲师管理"
+        subtitle="Avatars"
+      >
         <template #action>
-            <UButton :icon="data_layout === 'grid' ? 'tabler:layout-list' : 'tabler:layout-grid'" variant="soft"
+          <UButton
-              color="gray" @click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
+            color="gray"
-              :label="data_layout === 'grid' ? '列表视图' : '宫格视图'" />
+            variant="soft"
+            :label="showSystemAvatar ? '显示用户数字人' : '显示系统数字人'"
+            @click="showSystemAvatar = !showSystemAvatar"
+          />
+          <UButton
+            v-if="loginState.user.auth_code === 2"
+            color="amber"
+            variant="soft"
+            label="创建数字人"
+            @click="isCreateSlideOpen = true"
+          />
+          <UButton
+            :icon="
+              data_layout === 'grid'
+                ? 'tabler:layout-list'
+                : 'tabler:layout-grid'
+            "
+            variant="soft"
+            color="gray"
+            @click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
+            :label="data_layout === 'grid' ? '列表视图' : '宫格视图'"
+          />
         </template>
       </BubbleTitle>
       <GradientDivider />
     </div>
     <div class="p-4">
-        <div v-if="data_layout === 'grid'" class="grid grid-cols-7 gap-4">
+      <UAlert
-          <div v-for="(avatar, k) in userAvatarList?.data.items" :key="avatar.model_id || k"
+        v-if="showSystemAvatar && loginState.user.auth_code === 2"
-            class="relative rounded-lg shadow overflow-hidden w-full aspect-[9/16] group">
+        icon="tabler:user-shield"
-            <NuxtImg :src="avatar.avatar" class="w-full h-full object-cover" />
+        title="正在显示系统数字人"
-            <div class="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/50 to-transparent">
+        description="当前正在显示和管理系统数字人，仅管理员可见"
-              <UBadge color="white" variant="solid" icon="tabler:user-screen">{{ avatar.name }}</UBadge>
+        class="mb-4"
+      />
+      <div
+        v-if="data_layout === 'grid'"
+        class="grid grid-cols-7 gap-4"
+      >
+        <div
+          v-for="(avatar, k) in showSystemAvatar
+            ? systemAvatarList?.data.items
+            : userAvatarList?.data.items"
+          :key="avatar.model_id || k"
+          class="relative rounded-lg shadow overflow-hidden w-full aspect-[9/16] group"
+        >
+          <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
-              class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity">
+            class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur opacity-0 group-hover:opacity-100 transition-opacity"
+          >
             <UButtonGroup>
-                <UButton color="black" icon="tabler:download" label="下载图片"  @click="() => {
+              <UButton
-                  const { download } = useDownload(avatar.avatar, `数字人_${avatar.name}.png`)
+                color="black"
+                icon="tabler:download"
+                label="下载图片"
+                @click="
+                  () => {
+                    const { download } = useDownload(
+                      avatar.avatar,
+                      `数字人_${avatar.name}.png`
+                    )
                     download()
-                }"/>
+                  }
+                "
+              />
             </UButtonGroup>
-              <span class="text-xs font-medium text-neutral-400 dark:text-neutral-300 pt-4">ID: {{ avatar.model_id }}</span>
+            <span
+              class="text-xs font-medium text-neutral-400 dark:text-neutral-300 pt-4"
+            >
+              ID: {{ avatar.model_id }}
+            </span>
           </div>
         </div>
       </div>
       <div v-else>
         <div class="flex flex-col gap-4">
-            <UTable :rows="userAvatarList?.data.items" :columns="columns" :loading="userAvatarStatus === 'pending'"
+          <UTable
-              :progress="{ color: 'amber', animation: 'carousel' }" class="border dark:border-neutral-800 rounded-md">
+            :rows="
+              showSystemAvatar
+                ? systemAvatarList?.data.items
+                : userAvatarList?.data.items
+            "
+            :columns="columns"
+            :loading="userAvatarStatus === 'pending'"
+            :progress="{ color: 'amber', animation: 'carousel' }"
+            class="border dark:border-neutral-800 rounded-md"
+          >
             <template #avatar-data="{ row }">
-                <NuxtImg :src="row.avatar" class="h-16 aspect-[9/16] rounded-lg" />
+              <NuxtImg
+                :src="row.avatar"
+                class="h-16 aspect-[9/16] rounded-lg"
+              />
             </template>
             <template #actions-data="{ row }">
               <div class="flex gap-2">
-                  <UButton color="gray" icon="tabler:download" label="下载图片" variant="soft" size="xs" @click="() => {
+                <UButton
-                    const { download } = useDownload(row.avatar, `数字人_${row.name}.png`)
+                  color="gray"
+                  icon="tabler:download"
+                  label="下载图片"
+                  variant="soft"
+                  size="xs"
+                  @click="
+                    () => {
+                      const { download } = useDownload(
+                        row.avatar,
+                        `数字人_${row.name}.png`
+                      )
                       download()
-                  }" />
+                    }
+                  "
+                />
+                <UButton
+                  color="red"
+                  icon="tabler:trash"
+                  label="删除"
+                  variant="soft"
+                  size="xs"
+                  @click="onSystemAvatarDelete(row)"
+                />
               </div>
             </template>
           </UTable>
         </div>
       </div>
       <div class="flex justify-end mt-4">
-          <UPagination v-model="pagination.page" :max="9" :page-count="pagination.pageSize"
+        <UPagination
-            :total="userAvatarList?.data.total || 0" />
+          v-model="pagination.page"
+          :max="9"
+          :page-count="pagination.pageSize"
+          :total="userAvatarList?.data.total || 0"
+        />
       </div>
     </div>
+
+    <USlideover v-model="isCreateSlideOpen">
+      <UCard
+        :ui="{
+          body: { base: 'flex-1' },
+          ring: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+        }"
+        class="flex flex-col flex-1"
+      >
+        <template #header>
+          <UButton
+            class="flex absolute end-5 top-5 z-10"
+            color="gray"
+            icon="tabler:x"
+            padded
+            size="sm"
+            square
+            variant="ghost"
+            @click="isCreateSlideOpen = false"
+          />
+          创建系统数字人
+        </template>
+
+        <UForm
+          class="space-y-3"
+          :schema="createAvatarSchema"
+          :state="createAvatarState"
+          @submit="onCreateAvatarSubmit"
+        >
+          <UFormGroup
+            label="名称"
+            name="name"
+          >
+            <UInput v-model="createAvatarState.name" />
+          </UFormGroup>
+          <UFormGroup
+            label="备注"
+            name="description"
+          >
+            <UInput v-model="createAvatarState.description" />
+          </UFormGroup>
+          <UFormGroup
+            label="ID"
+            name="model_id"
+          >
+            <UInput v-model="createAvatarState.model_id" />
+          </UFormGroup>
+          <UFormGroup
+            label="图片"
+            name="avatar"
+          >
+            <UniFileDnD
+              accept="image/png,image/jpeg"
+              @change="onAvatarUpload"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="类型"
+            name="type"
+          >
+            <USelect
+              v-model="createAvatarState.type"
+              disabled
+              :options="[
+                { label: '系统', value: 0 },
+                { label: '用户', value: 1 },
+              ]"
+            />
+          </UFormGroup>
+          <UFormGroup class="flex justify-end pt-4">
+            <UButton
+              type="submit"
+              color="primary"
+              label="创建"
+            />
+          </UFormGroup>
+        </UForm>
+      </UCard>
+    </USlideover>
   </div>
-  </LoginNeededContent>
 </template>
 
 <style scoped></style>