draft: 2d digital human selector

components/ModalDigitalHumanSelect.vue

@@ -0,0 +1,195 @@
+<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: (value: DigitalHumanItem) => value,
+})
+
+const loginState = useLoginState()
+const modal = useModal()
+const toast = useToast()
+
+const selectedDigitalHumans = ref<DigitalHumanItem[]>([])
+const handleSelectClick = (item: DigitalHumanItem) => {
+  if (props.multiple) {
+    if (selectedDigitalHumans.value.includes(item)) {
+      selectedDigitalHumans.value = selectedDigitalHumans.value.filter(d => d !== item)
+    } else {
+      selectedDigitalHumans.value.push(item)
+    }
+  } else {
+    selectedDigitalHumans.value = [item]
+  }
+}
+
+const handleClose = () => {
+  if (props.isOpen) {
+    emit('close')
+  } else {
+    modal.close()
+  }
+}
+
+const tabItems = [{
+  key: 'user',
+  label: '用户数字人',
+  icon: 'i-tabler-user',
+}, {
+  key: 'system',
+  label: '系统数字人',
+  icon: 'i-tabler-user-star',
+}]
+
+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: 1,
+      perpage: 20,
+    },
+  ),
+  {
+    transform: res => {
+      if (res.ret !== 200) {
+        toast.add({
+          title: '获取数字人列表失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return []
+      }
+      return res?.data.items || []
+    },
+  },
+)
+
+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: 1,
+      perpage: 20,
+    },
+  ),
+  {
+    transform: res => {
+      if (res.ret !== 200) {
+        toast.add({
+          title: '获取系统数字人列表失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+          icon: 'i-tabler-circle-x',
+        })
+        return []
+      }
+      return res?.data.items || []
+    },
+  },
+)
+</script>
+
+<template>
+  <UModal
+    :model-value="isOpen"
+    :ui="{ width: 'w-full sm:max-w-4xl' }"
+    @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"
+      >
+        <template #item="{ item }">
+          <div v-if="item.key === 'user'" class="w-full grid grid-cols-2 sm:grid-cols-4 gap-4">
+            <div
+              v-for="(d, i) in userDigitalList"
+              :key="`user-digital-${d.model_id}`" class="relative overflow-hidden w-full aspect-[10/16] bg-white rounded-md shadow-md transition-all ring-2 ring-primary-400"
+              @click="handleSelectClick(d)"
+            >
+              <div class="absolute w-full h-full -top-[35%] -left-[15%] rotate-[60deg] bg-primary-400"></div>
+              <div class="absolute left-0 bottom-[44%] rotate-[-30deg]">
+                <span class="text-xs text-white font-semibold">{{ d.description }}</span>
+              </div>
+              <div class="absolute left-1 bottom-[34%] rotate-[-30deg]">
+                <span class="text-lg text-primary font-semibold">{{ d.name }}</span>
+              </div>
+              <div class="absolute left-0 bottom-0 rounded-tr bg-primary-400 px-1 pb-1">
+                <span class="text-xs text-white leading-none font-black">·SELECTED·</span>
+              </div>
+              <NuxtImg :src="d.avatar" class="absolute bottom-0 -right-7 h-full"/>
+            </div>
+          </div>
+          <div v-if="item.key === 'system'">
+            system
+          </div>
+        </template>
+      </UTabs>
+
+      <template #footer>
+        <div class="flex justify-between items-center">
+          <div>
+            <p class="text-xs font-medium opacity-50">
+              如果没有出现您的数字人，请联系管理员开通
+            </p>
+          </div>
+          <div class="flex items-center gap-4">
+            <UButton
+              color="gray"
+              label="取消"
+              variant="ghost"
+              @click="handleClose"
+            />
+            <UButton
+              color="primary"
+              label="选择"
+              type="submit"
+              variant="solid"
+            />
+          </div>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+</style>