feat: 展示数字人来源

2025-04-28 10:20:34 +08:00
parent 627ac24e04
commit 15f175aee1
3 changed files with 155 additions and 50 deletions
--- a/components/ModalDigitalHumanSelect.vue
+++ b/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 = [{
-  key: 'user',
-  label: '我的数字人',
-  icon: 'i-tabler-user',
-}]
+const tabItems = [
+  {
+    key: 'user',
+    label: '我的数字人',
+    icon: 'i-tabler-user',
+  },
+]
 const tabIndex = ref(0)

 watch(tabIndex, () => {
  page.value = 1
 })

-const {
-  data: userDigitalList,
-} = useAsyncData(
+const { 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 {
-  data: systemDigitalList,
-} = useAsyncData(
+const { 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"
-              :key="`${item.key === 'user' ? 'user' : 'system'}-digital-${d.model_id}`"
+              v-for="(d, i) in item.key === 'user'
+                ? 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>
+<style scoped></style>
--- a/pages/generation/avatar-models.vue
+++ b/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="[
-                { label: '内部', value: 2 },
-                { label: '上游(万木)', value: 1 },
-              ]"
+              value-attribute="value"
+              :options="sourceTypeList"
            />
          </UFormGroup>
          <UFormGroup class="flex justify-end pt-4">
--- a/typings/types.d.ts
+++ b/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
    }

    /**