ui: drawing design

pages/aigc/drawing/index.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import image1 from '~/assets/example/1.jpg';
+import image2 from '~/assets/example/2.jpg';
+import image3 from '~/assets/example/3.jpg';
 import OptionBlock from "~/pages/aigc/drawing/components/OptionBlock.vue";
+import ResultBlock from "~/pages/aigc/drawing/components/ResultBlock.vue";
 
 useHead({
   title: '绘画 | XSH AI'
@@ -32,12 +36,25 @@ const handle_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) =
     window.addEventListener('mouseup', handle_mouseup)
   }
 }
+
+const images = [
+  image1,
+  image2,
+  image3,
+  'https://w.wallhaven.cc/full/jx/wallhaven-jxl31y.png',
+  'https://w.wallhaven.cc/full/6d/wallhaven-6d7xmx.jpg',
+]
+const images2 = [
+  image1,
+  image2,
+  image3,
+]
 </script>
 
 <template>
   <div class="w-full flex">
     <div ref="leftSection"
-         class="relative h-[calc(100vh-4rem)] overflow-hidden bg-neutral-200 dark:bg-neutral-800 transition-all"
+         class="hidden md:block relative h-[calc(100vh-4rem)] overflow-hidden bg-neutral-200 dark:bg-neutral-800 transition-all"
          style="width: 320px">
       <div ref="leftHandler"
            class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
@@ -60,8 +77,28 @@ const handle_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) =
         </OptionBlock>
       </div>
     </div>
-    <div class="flex-1">
-      results
+    <div class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 overflow-y-auto">
+      <ResultBlock :images="images"
+                   title="XX大模型 · 文生图" :meta="{
+                      id: 'd166429411dfc6722e54c032cdba97a2',
+                      aspect: '9:16',
+                      cost: '1500',
+                      modal: '混元大模型',
+                      ratio: '16:9',
+                      datetime: 1709106270
+                   }"
+                   prompt="这是, 一组, 测试用的, 提示词, 很长, 很长很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长">
+        <template #header-right>
+          <UButton color="gray" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
+        </template>
+      </ResultBlock>
+      <ResultBlock :images="images2"
+                   title="XX大模型 · 图生图"
+                   prompt="这是, 一组, 测试用的, 提示词">
+        <template #header-right>
+          <UButton color="gray" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
+        </template>
+      </ResultBlock>
     </div>
   </div>
 </template>