feat: 绘画页面对接腾讯混元文生图

components/aigc/drawing/ResultBlock.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import type {ResultBlockMeta} from "~/components/aigc/drawing/index";
-import type {PropType} from "vue";
-import dayjs from "dayjs";
+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'
+    default: 'i-tabler-photo-filled',
   },
   title: {
-    type: String
+    type: String,
   },
   prompt: {
-    type: String
+    type: String,
   },
   images: {
     type: Array,
-    default: (): Array<string> => []
+    default: (): Array<string> => [],
   },
   meta: {
-    type: Object as PropType<ResultBlockMeta>
-  }
+    type: Object as PropType<ResultBlockMeta>,
+  },
 })
 
 const expand_prompt = ref(false)
@@ -50,7 +50,10 @@ const show_meta = ref(true)
       <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">
+      <img v-for="(url, i) in images" class="result-image" :src="useBlobUrlFromB64(url)" alt="AI Generated" :key="i"/>
+    </div>
+    <div v-else class="h-64 aspect-[3/4] mb-4 rounded-lg placeholder-gradient flex justify-center items-center">
+      <UIcon name="i-svg-spinners-tadpole" class="text-3xl" />
     </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">
@@ -94,4 +97,8 @@ const show_meta = ref(true)
   @apply snap-start;
   @apply h-full aspect-auto object-cover rounded-lg shadow-md;
 }
+
+.placeholder-gradient {
+  @apply animate-pulse bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800;
+}
 </style>