wip

pages/aigc/drawing/components/OptionBlock.vue

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

pages/aigc/drawing/index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import OptionBlock from "~/pages/aigc/drawing/components/OptionBlock.vue";
+
+useHead({
+  title: '绘画 | XSH AI'
+})
+
+const leftSection = ref<HTMLElement | null>(null)
+const leftHandler = ref<HTMLElement | null>(null)
+
+const handle_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
+  const handler = leftHandler.value
+  if (handler) {
+    const startX = e.clientX
+    const startWidth = handler.parentElement?.offsetWidth || 0
+    const handle_mousemove = (e: MouseEvent) => {
+      let newWidth = startWidth + e.clientX - startX
+      if (newWidth < min || newWidth > max) {
+        newWidth = Math.min(Math.max(newWidth, min), max)
+      }
+      handler.parentElement!.style.width = `${newWidth}px`
+    }
+    const handle_mouseup = () => {
+      leftSection.value?.classList.add('transition-all')
+      window.removeEventListener('mousemove', handle_mousemove)
+      window.removeEventListener('mouseup', handle_mouseup)
+    }
+    leftSection.value?.classList.remove('transition-all')
+    window.addEventListener('mousemove', handle_mousemove)
+    window.addEventListener('mouseup', handle_mouseup)
+  }
+}
+</script>
+
+<template>
+  <div class="h-full flex">
+    <div ref="leftSection" class="relative 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"
+           @dblclick="leftSection?.style.setProperty('width', '320px')"
+           @mousedown.prevent="handle_mousedown">
+        <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="p-4 flex flex-col gap-2">
+        <OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
+          <template #actions>
+            <UBadge color="sky" size="xs">按钮A</UBadge>
+            <UBadge color="indigo" size="xs">按钮B</UBadge>
+          </template>
+          <UTextarea autoresize placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" rows="2"/>
+        </OptionBlock>
+        <OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
+          <UTextarea autoresize placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开" rows="2"/>
+        </OptionBlock>
+      </div>
+    </div>
+    <div class="flex-1">
+      results
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>