71 lines
2.9 KiB
Vue
71 lines
2.9 KiB
Vue
<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')
|
|
leftHandler.value?.lastElementChild?.classList.remove('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
|
|
window.removeEventListener('mousemove', handle_mousemove)
|
|
window.removeEventListener('mouseup', handle_mouseup)
|
|
}
|
|
leftSection.value?.classList.remove('transition-all')
|
|
leftHandler.value?.lastElementChild?.classList.add('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
|
|
window.addEventListener('mousemove', handle_mousemove)
|
|
window.addEventListener('mouseup', handle_mouseup)
|
|
}
|
|
}
|
|
</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"
|
|
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="h-full p-4 flex flex-col gap-2 overflow-y-auto">
|
|
<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 :rows="2" autoresize placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
|
|
</OptionBlock>
|
|
<OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
|
|
<UTextarea :rows="2" autoresize placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
|
|
resize/>
|
|
</OptionBlock>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
results
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |