fix: move dedicated components to components folder

components/aigc/drawing/OptionBlock.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  comment: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded-lg flex flex-col gap-1 shadow">
+    <div class="flex items-center gap-1 text-sm">
+      <UIcon v-if="icon" :name="icon" class="text-base inline-block"/>
+      <div class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden">
+        <span>{{ label }}</span>
+        <UTooltip v-if="comment" :popper="{ arrow: true, placement: 'top' }" :text="comment">
+          <UIcon class="text-base" name="i-tabler-help"/>
+        </UTooltip>
+      </div>
+      <slot name="actions"/>
+    </div>
+    <div class="flex flex-col gap-2">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/aigc/drawing/ResultBlock.vue

@@ -0,0 +1,97 @@
+<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>

components/aigc/drawing/index.d.ts

@@ -0,0 +1,7 @@
+export declare interface ResultBlockMeta {
+    modal?: string
+    cost?: string
+    ratio?: string
+    id?: string
+    datetime?: number
+}