ui: drawing design

pages/aigc/drawing/components/ResultBlock.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type {ResultBlockMeta} from "~/pages/aigc/drawing/components/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(false)
+</script>
+
+<template>
+  <div class="">
+    <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>