🎨chore: 使用 oxlint, oxfmt&格式化代码

components/aigc/drawing/OptionBlock.vue

@@ -1,39 +1,51 @@
 <script lang="ts" setup>
-
 const props = defineProps({
   label: {
     type: String,
-    default: ''
+    default: '',
   },
   icon: {
     type: String,
-    default: ''
+    default: '',
   },
   comment: {
     type: String,
-    default: ''
-  }
+    default: '',
+  },
 })
 </script>
 
 <template>
-  <div class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded flex flex-col gap-1 shadow">
+  <div
+    class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded 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">
+      <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: 'right' }" :text="comment">
-          <UIcon class="text-base" name="i-tabler-help"/>
+        <UTooltip
+          v-if="comment"
+          :popper="{ arrow: true, placement: 'right' }"
+          :text="comment"
+        >
+          <UIcon
+            class="text-base"
+            name="i-tabler-help"
+          />
         </UTooltip>
       </div>
-      <slot name="actions"/>
+      <slot name="actions" />
     </div>
     <div class="flex flex-col gap-2">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

components/aigc/drawing/ResultBlock.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type {ResultBlockMeta} from '~/components/aigc/drawing/index';
-import type {PropType} from 'vue';
-import dayjs from 'dayjs';
-import {get} from 'idb-keyval';
+import type { ResultBlockMeta } from '~/components/aigc/drawing/index'
+import type { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { get } from 'idb-keyval'
 
 const props = defineProps({
   icon: {
@@ -35,7 +35,7 @@ const cachedImagesInterval = ref<NodeJS.Timeout | null>(null)
 
 onMounted(async () => {
   cachedImagesInterval.value = setInterval(async () => {
-    const res = await get(props.fid) as string[] || []
+    const res = ((await get(props.fid)) as string[]) || []
     if (res.length === cachedImages.value.length) return
     cachedImages.value = res
   }, 200)
@@ -56,110 +56,224 @@ const handle_download = (url: string) => {
 
 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',
+    .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({
-      title: '复制成功',
-      description: '已将内容复制到剪贴板',
-      color: 'primary',
-      icon: 'i-tabler-copy',
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      toast.add({
+        title: '复制成功',
+        description: '已将内容复制到剪贴板',
+        color: 'primary',
+        icon: 'i-tabler-copy',
+      })
     })
-  }).catch(() => {
-    toast.add({
-      title: '复制失败',
-      description: '无法复制到剪贴板',
-      color: 'red',
-      icon: 'i-tabler-circle-x',
+    .catch(() => {
+      toast.add({
+        title: '复制失败',
+        description: '无法复制到剪贴板',
+        color: 'red',
+        icon: 'i-tabler-circle-x',
+      })
     })
-  })
 }
 </script>
 
 <template>
   <div class="w-full">
     <div class="flex items-center gap-1">
-      <UIcon :name="icon"/>
+      <UIcon :name="icon" />
       <h1 class="text-sm font-semibold">
         {{ meta.type || 'AI 智能绘图' }}
       </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"/>
+      <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">
+    <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"
-               @click="copyToClipboard(prompt)"></UButton>
+      <UButton
+        color="gray"
+        size="xs"
+        icon="i-tabler-copy"
+        variant="ghost"
+        class="-mt-1"
+        @click="copyToClipboard(prompt)"
+      ></UButton>
     </div>
-    <div v-if="cachedImages.length > 0" class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x">
-      <div class="h-full aspect-auto relative rounded-lg shadow-md overflow-hidden group"
-           v-for="(url, i) in cachedImages" :key="`${fid}-${i}`">
-        <div class="absolute inset-0 bg-gradient-to-t from-neutral-800/40 to-transparent w-full h-full flex items-end
-                    scale-105 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition">
+    <div
+      v-if="cachedImages.length > 0"
+      class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x"
+    >
+      <div
+        class="h-full aspect-auto relative rounded-lg shadow-md overflow-hidden group"
+        v-for="(url, i) in cachedImages"
+        :key="`${fid}-${i}`"
+      >
+        <div
+          class="absolute inset-0 bg-gradient-to-t from-neutral-800/40 to-transparent w-full h-full flex items-end 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
-                       @click="handle_use_reference(url)"></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>
+              <UButton
+                color="indigo"
+                variant="soft"
+                size="2xs"
+                icon="i-tabler-download"
+                square
+                @click="handle_download(url)"
+              ></UButton>
             </UTooltip>
           </div>
         </div>
-        <img class="result-image" :src="useBlobUrlFromB64(url)" alt="AI Generated"/>
+        <img
+          class="result-image"
+          :src="useBlobUrlFromB64(url)"
+          alt="AI Generated"
+        />
       </div>
-
     </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
+      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">
-        <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"/>
+    <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.style" color="green" variant="subtle" class="text-[10px] font-bold gap-0.5">
-          <UIcon class="text-sm" name="i-tabler-christmas-tree"/>
+        <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"/>
+        <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"/>
+        <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"/>
+        <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"/>
+        <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>
@@ -186,4 +300,4 @@ const copyToClipboard = (text: string) => {
 .placeholder-gradient {
   @apply animate-pulse bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800;
 }
-</style>
+</style>

components/aigc/drawing/index.d.ts

@@ -6,4 +6,4 @@ export declare interface ResultBlockMeta {
   style?: string
   datetime?: number
   type?: string
-}
+}