map debug

pages/index.vue

@@ -82,11 +82,15 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
     // 卡片模式
     div.flex.flex-wrap.gap-6(:class="{'justify-center': !views.cardMode, 'flex-col':views.cardMode}")
       template(v-for="task in tasks" :key="task.id")
-        div.relative.bg-green-600.rounded-md.overflow-hidden.w-512px.h-512px.min-w-512px.transition-all.duration-150.ease-linear
+        div.relative.bg-green-900.rounded-md.overflow-hidden.w-512px.h-512px.min-w-512px
           div.object-contain(v-if="task.data")
             img(loading="lazy" :src="img" alt="task" v-for="img in task.data" :key="img")
-          div.absolute.left-2.right-2.bottom-2.h-8.bg-green-500.rounded-full.overflow-hidden.text-green-900.text-xs
-            div.h-full.flex.items-center.text-center.px-2.bg-green-400.transition-all.duration-5000.ease-linear(:style="`width:${task.progress*100}%`") {{ task.status }} {{ task.progress*100 }}%
+          div.absolute.left-2.right-2.bottom-2.bg-green-600.rounded-full.overflow-hidden.text-green-900.text-xs.transition-all.duration-750.ease-linear.h-8.opacity-90(
+            :class="{'h-2': task.progress>0.9, 'opacity-10': task.status=='done'}"
+          )
+            div.flex.items-center.text-center.h-full.px-2.bg-green-400.transition-all.duration-8000.ease-linear(
+              :style="`width:${task.progress*100}%;`"
+            ) {{ task.status }} {{ task.progress*100 }}%
           div.absolute.inset-0.flex.flex-col.items-center.justify-center.transition-opacity.bg-gradient-to-t.to-transparent.opacity-0(class="hover:cursor-pointer hover:opacity-100 from-black/90")
             pre {{ task }}
   // 右侧参数

server/api/drawing.ts

@@ -42,7 +42,7 @@ export default defineEventHandler(async event => {
         // 输出参数
         task.status = 'waiting'                                // 任务状态
         task.progress = 0.00                                   // 任务进度
-        task.data = null                                       // 生成结果
+        task.data = []                                         // 生成结果
         console.log('task:', task)
         await useStorage().setItem(`task:${task.id}`, task)   // 保存任务到内存
         // 筛选出所有的任务(并打印)