xsh-assistant-next/components/ModalDigitalHumanSelect.vue

<script lang="ts" setup>
import { useFetchWrapped } from '~/composables/useFetchWrapped'

const props = defineProps({
  isOpen: {
    type: Boolean,
    required: false,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits({
  close: () => true,
  select: (digitalHumans: DigitalHumanItem | DigitalHumanItem[]) => digitalHumans,
})

const loginState = useLoginState()
const modal = useModal()
const toast = useToast()

const page = ref(1)

const selectedDigitalHumans = ref<DigitalHumanItem[]>([])
const handleSelectClick = (item: DigitalHumanItem) => {
  // 如果点击的项目已经在已选列表中，则移除；否则添加
  if (selectedDigitalHumans.value.includes(item)) {
    selectedDigitalHumans.value = selectedDigitalHumans.value.filter(d => d !== item)
  } else {
    selectedDigitalHumans.value = props.multiple ? [...selectedDigitalHumans.value, item] : [item]
  }
}

const handleClose = () => {
  selectedDigitalHumans.value = []
  if (props.isOpen) {
    emit('close')
  } else {
    modal.close()
  }
}

const handleSubmit = () => {
  if (selectedDigitalHumans.value.length === 0) {
    toast.add({
      title: '请选择数字人',
      description: '请至少选择一个数字人',
      color: 'red',
      icon: 'i-tabler-circle-x',
    })
    return
  }
  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 tabIndex = ref(0)

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

const {
  data: userDigitalList,
} = 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: page.value,
      perpage: 15,
    },
  ),
  {
    watch: [page],
  },
)

const {
  data: systemDigitalList,
} = useAsyncData(
  'system-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: page.value,
      perpage: 15,
    },
  ),
  {
    watch: [page],
  },
)
</script>

<template>
  <UModal
    :model-value="isOpen"
    :ui="{ width: 'w-full sm:max-w-3xl' }"
    @close="handleClose"
  >
    <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>
          <UButton
            class="-my-1"
            color="gray"
            icon="i-tabler-x"
            variant="ghost"
            @click="handleClose"
          />
        </div>
      </template>

      <UTabs
        :items="[
          ...tabItems,
          loginState.user.auth_code === 2 ? {
            key: 'system',
            label: '系统数字人',
            icon: 'i-tabler-user-star',
          } : null
        ].filter(Boolean)"
        @change="i => tabIndex = i"
      >
        <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}`"
              :class="{'border-primary shadow-md': selectedDigitalHumans.includes(d)}"
              class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white rounded-md border cursor-pointer transition-all duration-150 select-none"
              @click="handleSelectClick(d)"
            >
              <div
                :class="{'bg-primary-50': selectedDigitalHumans.includes(d)}"
                class="relative bg-neutral-100 border-b w-full aspect-square object-cover overflow-hidden transition-all duration-150"
              >
                <NuxtImg :src="d.avatar" class="-translate-y-4"/>
                <UIcon v-if="selectedDigitalHumans.includes(d)" class="absolute top-1 right-1 text-lg text-primary"
                       name="i-tabler-check"/>
              </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 font-medium line-clamp-1">{{ d.name }}</span>
                  <span class="text-xs text-neutral-300 font-medium">ID:{{ d.digital_human_id || d.id }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="flex justify-end">
            <UPagination
              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)"
              class="pt-4"
            />
          </div>
        </template>
      </UTabs>

      <template #footer>
        <div class="flex justify-between items-center">
          <div>
            <p class="text-xs font-medium opacity-50 select-none">
              如果没有出现您的数字人，请联系管理员开通
            </p>
          </div>
          <div class="flex items-center gap-4">
            <UButton
              color="gray"
              label="取消"
              variant="ghost"
              @click="handleClose"
            />
            <UButton
              color="primary"
              label="选择"
              variant="solid"
              @click="handleSubmit"
            />
          </div>
        </div>
      </template>
    </UCard>
  </UModal>
</template>

<style scoped>
</style>