feat: 绘画页面对接腾讯混元文生图

This commit is contained in:
2024-03-15 18:01:32 +08:00
parent 350a7ec626
commit e69774679a
8 changed files with 360 additions and 153 deletions

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import ModalAuthentication from "~/components/ModalAuthentication.vue";
import ModalAuthentication from '~/components/ModalAuthentication.vue';
const colorMode = useColorMode()
const dayjs = useDayjs()
@@ -13,33 +13,33 @@ const isDark = computed({
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
},
})
const links = [
{
label: '绘画',
icon: 'i-tabler-brush',
to: '/aigc/drawing'
to: '/aigc/drawing',
}, {
label: '聊天',
icon: 'i-tabler-message-2',
to: '/aigc/chat'
to: '/aigc/chat',
}, {
label: 'PPT',
icon: 'i-tabler-file-type-ppt',
to: '/aigc/ppt-course-gen'
}
to: '/aigc/ppt-course-gen',
},
]
const items = [
[{
label: 'support@fenshenzhike.com',
slot: 'account',
disabled: true
disabled: true,
}], [{
label: '账号资料',
icon: 'i-tabler-user-circle'
icon: 'i-tabler-user-circle',
}], [{
label: '注销登录',
icon: 'i-tabler-logout',
@@ -47,9 +47,9 @@ const items = [
title: '退出登录',
description: `您已成功退出登录账号`,
color: 'indigo',
icon: 'i-tabler-logout-2'
}))
}]
icon: 'i-tabler-logout-2',
})),
}],
]
const open_login_modal = () => {
@@ -70,38 +70,36 @@ const open_login_modal = () => {
<div class="flex flex-row items-center gap-4">
<ClientOnly>
<UButton
:icon="isDark ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition' : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'"
color="gray"
variant="ghost"
aria-label="Theme"
@click="isDark = !isDark"
:icon="isDark ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition' : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'"
color="gray"
variant="ghost"
aria-label="Theme"
@click="isDark = !isDark"
/>
<UButton v-if="!loginState.is_logged_in" label="登录或注册" size="xs" class="font-bold" color="indigo"
@click="open_login_modal"/>
<UDropdown v-if="loginState.is_logged_in" :items="items" :popper="{ placement: 'bottom-start' }"
:ui="{ item: { disabled: 'cursor-text select-text' } }">
<UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
<template #account="{ item }">
<div class="text-left">
<p class="flex items-center gap-1">
已登录为
<UBadge v-if="loginState.user.auth_code === 2" color="amber" size="xs" variant="subtle">
OP
</UBadge>
</p>
<p class="truncate whitespace-nowrap max-w-40 font-medium text-gray-900 dark:text-white">
{{ loginState.user?.username }}
</p>
</div>
</template>
<template #item="{ item }">
<span class="truncate">{{ item.label }}</span>
<UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"/>
</template>
</UDropdown>
</ClientOnly>
<UDropdown v-if="loginState.is_logged_in" :items="items" :popper="{ placement: 'bottom-start' }"
:ui="{ item: { disabled: 'cursor-text select-text' } }">
<UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
<template #account="{ item }">
<div class="text-left">
<p class="flex items-center gap-1">
已登录为
<UBadge v-if="loginState.user.auth_code === 2" color="amber" size="xs" variant="subtle">
OP
</UBadge>
</p>
<p class="truncate whitespace-nowrap max-w-40 font-medium text-gray-900 dark:text-white">
{{ loginState.user?.username }}
</p>
</div>
</template>
<template #item="{ item }">
<span class="truncate">{{ item.label }}</span>
<UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"/>
</template>
</UDropdown>
</div>
</header>