feat: 绘画功能本地图片存储优化

ui: 优化字体

pages/aigc/drawing/index.vue

@@ -9,6 +9,7 @@ import RatioSelector from '~/components/aigc/RatioSelector.vue';
 import {useFetchWrapped} from '~/composables/useFetchWrapped';
 import type {ResultBlockMeta} from '~/components/aigc/drawing';
 import {useHistory} from '~/composables/useHistory';
+import {del, set} from 'idb-keyval';
 
 useHead({
   title: '绘画 | XSH AI',
@@ -22,6 +23,7 @@ const loginState = useLoginState()
 
 const leftSection = ref<HTMLElement | null>(null)
 const leftHandler = ref<HTMLElement | null>(null)
+const showSidebar = ref(false)
 
 const generating = ref(false)
 
@@ -213,7 +215,6 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
     fid,
     meta,
     prompt: event.data.prompt,
-    images: [],
   })
   const styleItem = event.data.styles as StyleItem
   useFetchWrapped<
@@ -233,14 +234,19 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
         color: 'red',
         icon: 'i-tabler-circle-x',
       })
+      history.text2img = history.text2img.filter(item => item.fid !== fid)
       return
     }
-    const record = history.text2img.find(item => item.fid === fid)
-    record!.images = [`data:image/png;base64,${res.data.request_image}`]
-    record!.meta = {
-      ...record!.meta,
-      id: res.data.data_id as string,
-    }
+    history.text2img = history.text2img.map(item => {
+      if (item.fid === fid) {
+        set(`${item.fid}`, [`data:image/png;base64,${res.data.request_image}`])
+        item.meta = {
+          ...item.meta,
+          id: res.data.data_id as string,
+        }
+      }
+      return item
+    })
   }).catch(err => {
     toast.add({
       title: '生成失败',
@@ -255,10 +261,10 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
 </script>
 
 <template>
-  <div class="w-full flex">
+  <div class="w-full flex relative">
     <div ref="leftSection"
-         class="sticky hidden md:block h-[calc(100vh-4rem)] overflow-hidden bg-neutral-200 dark:bg-neutral-800 transition-all"
-         style="width: 320px">
+         class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
+         style="width: 320px" :class="{'translate-x-0': showSidebar}">
       <div ref="leftHandler"
            class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
            @dblclick="leftSection?.style.setProperty('width', '320px')"
@@ -266,6 +272,10 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
         <span
           class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"></span>
       </div>
+      <div
+        class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-800 rounded-r-lg shadow-lg flex md:hidden justify-center items-center">
+        <UButton color="black" icon="i-tabler-brush" size="lg" square @click="showSidebar = !showSidebar"></UButton>
+      </div>
       <div class="h-full flex flex-col overflow-y-auto">
         <UForm :schema="defaultFormSchema" :state="defaultFormState" @submit="onDefaultFormSubmit">
           <div class="flex flex-col gap-2 p-4 pb-28">
@@ -324,8 +334,8 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
           <p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
         </div>
         <ResultBlock v-else v-for="(result, k) in history.text2img"
-                     title="文生图" :images="result.images" :meta="result.meta"
-                     :prompt="result.prompt">
+                     title="文生图" :fid="result.fid" :meta="result.meta"
+                     :prompt="result.prompt" :key="result.fid">
           <template #header-right>
             <UPopover overlay>
               <UButton color="black" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
@@ -337,7 +347,11 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
                       取消
                     </UButton>
                     <UButton color="red" size="xs" class="font-bold"
-                             @click="() => {history.text2img.splice(k, 1); close();}">
+                             @click="() => {
+                               history.text2img.splice(k, 1)
+                               del(result.fid)
+                               close()
+                             }">
                       仍然删除
                     </UButton>
                   </div>
@@ -347,7 +361,7 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
           </template>
         </ResultBlock>
         <div class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600">
-          <UIcon name="i-tabler-info-triangle" />
+          <UIcon name="i-tabler-info-triangle"/>
           <p class="text-xs font-bold">所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地</p>
         </div>
       </div>