97 lines
3.1 KiB
Vue
97 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import type {ResultBlockMeta} from "~/components/aigc/drawing/index";
|
|
import type {PropType} from "vue";
|
|
import dayjs from "dayjs";
|
|
|
|
const props = defineProps({
|
|
icon: {
|
|
type: String,
|
|
default: 'i-tabler-photo-filled'
|
|
},
|
|
title: {
|
|
type: String
|
|
},
|
|
prompt: {
|
|
type: String
|
|
},
|
|
images: {
|
|
type: Array,
|
|
default: (): Array<string> => []
|
|
},
|
|
meta: {
|
|
type: Object as PropType<ResultBlockMeta>
|
|
}
|
|
})
|
|
|
|
const expand_prompt = ref(false)
|
|
const show_meta = ref(true)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<div class="flex items-center gap-1">
|
|
<UIcon :name="icon"/>
|
|
<h1 class="text-sm font-semibold">
|
|
{{ title }}
|
|
</h1>
|
|
<UDivider class="flex-1" size="sm"/>
|
|
<UButton color="black" size="xs" icon="i-tabler-info-circle"
|
|
:variant="show_meta ? 'solid' : 'ghost'" :disabled="!meta"
|
|
@click="show_meta = !show_meta"></UButton>
|
|
<slot name="header-right"/>
|
|
</div>
|
|
<div v-if="prompt" class="flex items-start gap-2 mt-1 mb-2">
|
|
<UIcon name="i-tabler-article" class="mt-0.5"/>
|
|
<p class="text-sm flex-1 text-ellipsis cursor-pointer"
|
|
:class="{'line-clamp-1': !expand_prompt, 'line-clamp-none': expand_prompt}"
|
|
@click="expand_prompt = !expand_prompt">
|
|
{{ prompt }}
|
|
</p>
|
|
<UButton color="gray" size="xs" icon="i-tabler-copy" variant="ghost" class="-mt-1"></UButton>
|
|
</div>
|
|
<div v-if="images.length > 0" class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x">
|
|
<img v-for="(url, i) in images" class="result-image" :src="url" alt="" :key="i">
|
|
</div>
|
|
<Transition v-if="meta" name="meta">
|
|
<div v-if="show_meta" class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2">
|
|
<UBadge v-if="meta.modal" color="black" variant="solid" class="text-[10px] font-bold gap-0.5">
|
|
<UIcon class="text-sm" name="i-tabler-box-seam"/>
|
|
{{ meta.modal }}
|
|
</UBadge>
|
|
<UBadge v-if="meta.cost" color="amber" variant="subtle" class="text-[10px] font-bold gap-0.5">
|
|
<UIcon class="text-sm" name="i-solar-fire-bold"/>
|
|
{{ meta.cost }}
|
|
</UBadge>
|
|
<UBadge v-if="meta.ratio" color="indigo" variant="subtle" class="text-[10px] font-bold gap-0.5">
|
|
<UIcon class="text-sm" name="i-tabler-aspect-ratio"/>
|
|
{{ meta.ratio }}
|
|
</UBadge>
|
|
<UBadge v-if="meta.id" color="indigo" variant="subtle" class="text-[10px] font-bold gap-0.5">
|
|
<UIcon class="text-sm" name="i-tabler-number"/>
|
|
{{ meta.id }}
|
|
</UBadge>
|
|
<UBadge v-if="meta.datetime" color="indigo" variant="subtle" class="text-[10px] font-bold gap-0.5">
|
|
<UIcon class="text-sm" name="i-tabler-calendar-month"/>
|
|
{{ dayjs(meta.datetime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</UBadge>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.meta-enter-active,
|
|
.meta-leave-active {
|
|
@apply transition duration-300;
|
|
}
|
|
|
|
.meta-enter-from,
|
|
.meta-leave-to {
|
|
@apply opacity-0 -translate-y-2;
|
|
}
|
|
|
|
.result-image {
|
|
@apply snap-start;
|
|
@apply h-full aspect-auto object-cover rounded-lg shadow-md;
|
|
}
|
|
</style> |