feat: login
This commit is contained in:
@@ -24,11 +24,11 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const expand_prompt = ref(false)
|
||||
const show_meta = ref(false)
|
||||
const show_meta = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="w-full">
|
||||
<div class="flex items-center gap-1">
|
||||
<UIcon :name="icon"/>
|
||||
<h1 class="text-sm font-semibold">
|
||||
|
||||
@@ -4,11 +4,16 @@ 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";
|
||||
import {useLoginState} from "~/composables/useLoginState";
|
||||
import ModalAuthentication from "~/components/ModalAuthentication.vue";
|
||||
|
||||
useHead({
|
||||
title: '绘画 | XSH AI'
|
||||
})
|
||||
|
||||
const modal = useModal()
|
||||
const loginState = useLoginState()
|
||||
|
||||
const leftSection = ref<HTMLElement | null>(null)
|
||||
const leftHandler = ref<HTMLElement | null>(null)
|
||||
|
||||
@@ -54,7 +59,7 @@ const images2 = [
|
||||
<template>
|
||||
<div class="w-full flex">
|
||||
<div ref="leftSection"
|
||||
class="hidden md:block relative h-[calc(100vh-4rem)] overflow-hidden bg-neutral-200 dark:bg-neutral-800 transition-all"
|
||||
class="sticky hidden md:block 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"
|
||||
@@ -77,28 +82,29 @@ const images2 = [
|
||||
</OptionBlock>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
<div class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto">
|
||||
<div v-if="!loginState.is_logged_in"
|
||||
class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
|
||||
<Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
|
||||
<UButton class="mt-2 font-bold" @click="modal.open(ModalAuthentication)" color="black" variant="solid"
|
||||
size="xs">登录
|
||||
</UButton>
|
||||
</div>
|
||||
<ResultBlock v-else :images="images" v-for="i in 12" :key="i"
|
||||
title="XX大模型 · 文生图" :meta="{
|
||||
id: 'd166429411dfc6722e54c032cdba97a2',
|
||||
aspect: '9:16',
|
||||
cost: '1500',
|
||||
modal: '混元大模型',
|
||||
ratio: '16:9',
|
||||
datetime: 1709106270
|
||||
}"
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user