feat: 展示数字人来源

components/ModalDigitalHumanSelect.vue

@@ -22,7 +22,8 @@ const props = defineProps({
 
 const emit = defineEmits({
   close: () => true,
-  select: (digitalHumans: DigitalHumanItem | DigitalHumanItem[]) => digitalHumans,
+  select: (digitalHumans: DigitalHumanItem | DigitalHumanItem[]) =>
+    digitalHumans,
 })
 
 const loginState = useLoginState()
@@ -31,13 +32,24 @@ const toast = useToast()
 
 const page = ref(1)
 
+const sourceTypeList = [
+  { label: 'TX', value: 1, color: 'blue' },
+  { label: 'XSH', value: 2, color: 'green' },
+  { label: 'XB', value: 3, color: 'indigo' },
+]
+// const sourceType = ref(sourceTypeList[0])
+
 const selectedDigitalHumans = ref<DigitalHumanItem[]>([])
 const handleSelectClick = (item: DigitalHumanItem) => {
   // 如果点击的项目已经在已选列表中，则移除；否则添加
   if (selectedDigitalHumans.value.includes(item)) {
-    selectedDigitalHumans.value = selectedDigitalHumans.value.filter(d => d !== item)
+    selectedDigitalHumans.value = selectedDigitalHumans.value.filter(
+      (d) => d !== item
+    )
   } else {
-    selectedDigitalHumans.value = props.multiple ? [...selectedDigitalHumans.value, item] : [item]
+    selectedDigitalHumans.value = props.multiple
+      ? [...selectedDigitalHumans.value, item]
+      : [item]
   }
 }
 
@@ -60,60 +72,67 @@ const handleSubmit = () => {
     })
     return
   }
-  emit('select', props.multiple ? selectedDigitalHumans.value : selectedDigitalHumans.value[0])
+  emit(
+    'select',
+    props.multiple
+      ? selectedDigitalHumans.value
+      : selectedDigitalHumans.value[0]
+  )
   handleClose()
   setTimeout(() => {
     page.value = 1
   }, 300)
 }
 
-const tabItems = [{
+const tabItems = [
+  {
     key: 'user',
     label: '我的数字人',
     icon: 'i-tabler-user',
-}]
+  },
+]
 const tabIndex = ref(0)
 
 watch(tabIndex, () => {
   page.value = 1
 })
 
-const {
+const { data: userDigitalList } = useAsyncData(
-  data: userDigitalList,
-} = 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: page.value,
       perpage: 15,
-    },
+      // source_type: sourceType.value.value,
-  ),
+    }),
   {
     watch: [page],
-  },
+  }
 )
 
-const {
+const { data: systemDigitalList } = useAsyncData(
-  data: systemDigitalList,
-} = useAsyncData(
   'system-digital-human',
-  () => useFetchWrapped<req.gen.DigitalHumanList & AuthedRequest, BaseResponse<PagedData<DigitalHumanItem>>>(
+  () =>
-    'App.Digital_Human.GetList',
+    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: page.value,
       perpage: 15,
-    },
+      // source_type: sourceType.value.value,
-  ),
+    }),
   {
     watch: [page],
-  },
+  }
 )
 
 onMounted(() => {
@@ -124,7 +143,7 @@ onMounted(() => {
       icon: 'i-tabler-user-star',
     })
     nextTick(() => {
-      tabIndex.value = tabItems.findIndex(i => i.key === props.defaultTab)
+      tabIndex.value = tabItems.findIndex((i) => i.key === props.defaultTab)
       console.log('tabIndex', tabIndex.value)
     })
   }
@@ -137,10 +156,17 @@ onMounted(() => {
     :ui="{ width: 'w-full sm:max-w-3xl' }"
     @close="handleClose"
   >
-    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+    <UCard
+      :ui="{
+        ring: '',
+        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+      }"
+    >
       <template #header>
         <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
+          >
             数字人选择器
           </h3>
           <UButton
@@ -160,24 +186,36 @@ onMounted(() => {
         <template #item="{ item }">
           <div class="w-full grid grid-cols-3 sm:grid-cols-5 gap-4">
             <div
-              v-for="(d, i) in item.key === 'user' ? userDigitalList?.data.items : systemDigitalList?.data.items"
+              v-for="(d, i) in item.key === 'user'
-              :key="`${item.key === 'user' ? 'user' : 'system'}-digital-${d.model_id}`"
+                ? userDigitalList?.data.items
+                : systemDigitalList?.data.items"
+              :key="`${item.key === 'user' ? 'user' : 'system'}-digital-${
+                d.model_id
+              }`"
               :class="{
                 'border-primary shadow-md': selectedDigitalHumans.includes(d),
-                'border-neutral-200 dark:border-neutral-700': !selectedDigitalHumans.includes(d),
+                'border-neutral-200 dark:border-neutral-700':
+                  !selectedDigitalHumans.includes(d),
               }"
               class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white dark:bg-neutral-800 rounded-md border dark:border-2 cursor-pointer transition-all duration-150 select-none"
-              @click="!disabledDigitalHumanIds.includes(d.model_id) ? handleSelectClick(d) : void 0"
+              @click="
+                !disabledDigitalHumanIds.includes(d.model_id)
+                  ? handleSelectClick(d)
+                  : void 0
+              "
             >
               <div
                 v-if="disabledDigitalHumanIds.includes(d.model_id)"
                 class="absolute inset-0 bg-neutral-400 dark:bg-neutral-700 bg-opacity-50 dark:bg-opacity-50 cursor-not-allowed z-10"
               ></div>
               <div
-                :class="{'bg-primary-50': selectedDigitalHumans.includes(d)}"
+                :class="{ 'bg-primary-50': selectedDigitalHumans.includes(d) }"
                 class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-square object-cover overflow-hidden transition-all duration-150"
               >
-                <NuxtImg :src="d.avatar" class="-translate-y-4"/>
+                <NuxtImg
+                  :src="d.avatar"
+                  class="-translate-y-4"
+                />
                 <UIcon
                   v-if="selectedDigitalHumans.includes(d)"
                   class="absolute top-1 right-1 text-lg text-primary"
@@ -188,25 +226,60 @@ onMounted(() => {
                   class="absolute top-1 right-1 text-lg text-red-500"
                   name="tabler:user-off"
                 />
+                <template
+                  v-for="(t, i) in sourceTypeList"
+                  :key="i"
+                >
+                  <UBadge
+                    v-if="t.value === d.type"
+                    class="absolute bottom-1 right-1"
+                    size="xs"
+                    variant="subtle"
+                    :color="t.color"
+                    :label="t.label"
+                  />
+                </template>
               </div>
               <div class="w-full flex flex-col gap-1 px-2 pb-2">
                 <div class="flex justify-between items-center">
-                  <span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1">
+                  <span
+                    class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1"
+                  >
                     {{ d.name }}
                   </span>
-                  <span class="text-xs text-neutral-300 dark:text-neutral-500 font-medium">
+                  <span
+                    class="text-xs text-neutral-300 dark:text-neutral-500 font-medium"
+                  >
                     ID:{{ d.digital_human_id || d.id }}
                   </span>
                 </div>
               </div>
             </div>
           </div>
-          <div class="flex justify-end">
+          <div class="flex justify-between items-end">
+            <div class="flex items-center gap-2">
+              <!-- <span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium">
+                选择来源:
+              </span>
+              <USelectMenu
+                v-model="sourceType"
+                :options="sourceTypeList.map(i => ({ label: i.label, value: i.value }))"
+                @change="page = 1"
+              /> -->
+            </div>
             <UPagination
-              v-if="(item.key === 'user' ? (userDigitalList?.data.total || 0) : (systemDigitalList?.data.total || 0)) > 0"
+              v-if="
+                (item.key === 'user'
+                  ? userDigitalList?.data.total || 0
+                  : systemDigitalList?.data.total || 0) > 0
+              "
               v-model="page"
               :page-count="15"
-              :total="item.key === 'user' ? (userDigitalList?.data.total || 0) : (systemDigitalList?.data.total || 0)"
+              :total="
+                item.key === 'user'
+                  ? userDigitalList?.data.total || 0
+                  : systemDigitalList?.data.total || 0
+              "
               class="pt-4"
             />
           </div>
@@ -240,5 +313,4 @@ onMounted(() => {
   </UModal>
 </template>
 
-<style scoped>
+<style scoped></style>
-</style>

pages/generation/avatar-models.vue

@@ -111,6 +111,10 @@ const columns = [
     key: 'model_id',
     label: 'ID',
   },
+  {
+    key: 'type',
+    label: '来源',
+  },
   {
     key: 'description',
     label: '备注',
@@ -120,6 +124,12 @@ const columns = [
   },
 ]
 
+const sourceTypeList = [
+  { label: 'TX', value: 1, color: 'blue' },
+  { label: 'XSH', value: 2, color: 'green' },
+  { label: 'XB', value: 3, color: 'indigo' },
+]
+
 const isCreateSlideOpen = ref(false)
 
 const createAvatarState = reactive({
@@ -265,7 +275,7 @@ const onAvatarUpload = async (files: FileList) => {
             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"
+            class="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/50 to-transparent flex gap-2"
           >
             <UBadge
               color="white"
@@ -274,6 +284,17 @@ const onAvatarUpload = async (files: FileList) => {
             >
               {{ avatar.name }}
             </UBadge>
+            <template
+              v-for="(t, i) in sourceTypeList"
+              :key="i"
+            >
+              <UBadge
+                v-if="t.value === avatar.type"
+                variant="subtle"
+                :color="t.color"
+                :label="t.label"
+              />
+            </template>
           </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"
@@ -321,6 +342,19 @@ const onAvatarUpload = async (files: FileList) => {
                 class="h-16 aspect-[9/16] rounded-lg"
               />
             </template>
+            <template #type-data="{ row }">
+              <template
+                v-for="(t, i) in sourceTypeList"
+                :key="i"
+              >
+                <UBadge
+                  v-if="t.value === row.type"
+                  variant="subtle"
+                  :color="t.color"
+                  :label="t.label"
+                />
+              </template>
+            </template>
             <template #actions-data="{ row }">
               <div class="flex gap-2">
                 <UButton
@@ -422,12 +456,10 @@ const onAvatarUpload = async (files: FileList) => {
             label="类型"
             name="type"
           >
-            <USelect
+            <USelectMenu
               v-model="createAvatarState.type"
-              :options="[
+              value-attribute="value"
-                { label: '内部', value: 2 },
+              :options="sourceTypeList"
-                { label: '上游(万木)', value: 1 },
-              ]"
             />
           </UFormGroup>
           <UFormGroup class="flex justify-end pt-4">

typings/types.d.ts

@@ -81,7 +81,7 @@ interface DigitalHumanItem {
   // Upstream model ID
   model_id: number
   avatar: string
-  type?: 1 | 2
+  type?: number
   name: string
   description: string
   digital_human_id?: number
@@ -230,6 +230,7 @@ namespace req {
       to_user_id: number
       page?: number
       perpage?: number
+      source_type?: number
     }
 
     /**