feat: 图生图功能

feat: 参考图片(图生图)选择器
ui: 文件上传(预留) composable
ui: 登录过期提示
ui: 调整部分 ui

components/aigc/drawing/ResultBlock.vue

@@ -9,9 +9,6 @@ const props = defineProps({
     type: String,
     default: 'i-tabler-photo-filled',
   },
-  title: {
-    type: String,
-  },
   prompt: {
     type: String,
   },
@@ -26,6 +23,7 @@ const props = defineProps({
     type: Object as PropType<ResultBlockMeta>,
   },
 })
+const emit = defineEmits(['use-reference'])
 
 const toast = useToast()
 
@@ -37,7 +35,9 @@ const cachedImagesInterval = ref<NodeJS.Timeout | null>(null)
 
 onMounted(async () => {
   cachedImagesInterval.value = setInterval(async () => {
-    cachedImages.value = await get(props.fid) as string[] || []
+    const res = await get(props.fid) as string[] || []
+    if (res.length === cachedImages.value.length) return
+    cachedImages.value = res
   }, 1000)
 })
 
@@ -54,6 +54,23 @@ const handle_download = (url: string) => {
   a.click()
 }
 
+const handle_use_reference = async (blob_url: string) => {
+  fetch(blob_url)
+  .then(res => res.blob())
+  .then(blob => {
+    const file = new File([blob], `xsh_drawing-${props.meta?.datetime! * 1000}.png`, {type: 'image/png'})
+    emit('use-reference', file)
+  })
+  .catch(() => {
+    toast.add({
+      title: '转换失败',
+      description: '无法获取图片数据',
+      color: 'red',
+      icon: 'i-tabler-circle-x',
+    })
+  })
+}
+
 const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text).then(() => {
     toast.add({
@@ -78,7 +95,7 @@ const copyToClipboard = (text: string) => {
     <div class="flex items-center gap-1">
       <UIcon :name="icon"/>
       <h1 class="text-sm font-semibold">
-        {{ title }}
+        {{ meta.type || 'AI 智能绘图' }}
       </h1>
       <UDivider class="flex-1" size="sm"/>
       <UButton color="black" size="xs" icon="i-tabler-info-circle"
@@ -103,11 +120,12 @@ const copyToClipboard = (text: string) => {
                     scale-105 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition">
           <div class="w-full flex justify-end gap-1 p-1">
             <UTooltip text="以此图为参考创作">
-              <UButton color="indigo" variant="soft" size="2xs" icon="i-tabler-copy" square></UButton>
+              <UButton color="indigo" variant="soft" size="2xs" icon="i-tabler-copy" square
+                       @click="handle_use_reference(url)"></UButton>
             </UTooltip>
             <UTooltip text="下载">
               <UButton color="indigo" variant="soft" size="2xs" icon="i-tabler-download" square
-              @click="handle_download(url)"></UButton>
+                       @click="handle_download(url)"></UButton>
             </UTooltip>
           </div>
         </div>
@@ -124,6 +142,10 @@ const copyToClipboard = (text: string) => {
           <UIcon class="text-sm" name="i-tabler-box-seam"/>
           {{ meta.modal }}
         </UBadge>
+        <UBadge v-if="meta.style" color="green" variant="subtle" class="text-[10px] font-bold gap-0.5">
+          <UIcon class="text-sm" name="i-tabler-christmas-tree"/>
+          {{ meta.style }}
+        </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 }}