XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Timothy Yin
2024-02-27 19:57:25 +08:00
parent a974f7dec4
commit cca5563966
4 changed files with 51 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/aigc/drawing/components/OptionBlock.vue
View File

@@ -17,7 +17,7 @@ const props = defineProps({
</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="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded-lg flex flex-col gap-1 shadow">
<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">
@@ -28,7 +28,7 @@ const props = defineProps({
</div>
<slot name="actions"/>
</div>
<div>
<div class="flex flex-col gap-2">
<slot/>
</div>
</div>

16
pages/aigc/drawing/index.vue
View File

@@ -33,24 +33,28 @@ const handle_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) =
</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"
<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="p-4 flex flex-col gap-2">
<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 autoresize placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" rows="2"/>
<UTextarea :rows="2" autoresize placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
</OptionBlock>
<OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
<UTextarea autoresize placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开" rows="2"/>
<UTextarea :rows="2" autoresize placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
resize/>
</OptionBlock>
</div>
</div>