feat: 用户管理和数字人授权
This commit is contained in:
@@ -12,6 +12,10 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
bubbleColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'primary-500',
|
||||||
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -20,10 +24,10 @@ const props = defineProps({
|
|||||||
<div>
|
<div>
|
||||||
<h1
|
<h1
|
||||||
v-if="subtitle"
|
v-if="subtitle"
|
||||||
class="text-base text-neutral-300 italic tracking-wide font-black leading-none"
|
class="text-base text-neutral-300 dark:text-neutral-600 italic tracking-wide font-black leading-none"
|
||||||
>{{ subtitle }}</h1>
|
>{{ subtitle }}</h1>
|
||||||
|
|
||||||
<h1 class="text-xl font-bold text-neutral-700 leading-none relative z-[1]">
|
<h1 class="text-xl font-bold text-neutral-700 dark:text-neutral-300 leading-none relative z-[1]">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
@@ -34,7 +38,8 @@ const props = defineProps({
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="bubble"
|
v-if="bubble"
|
||||||
class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full bg-primary-500/50 z-[0]"
|
:class="`bg-${bubbleColor}/50`"
|
||||||
|
class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full z-[0]"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -4,13 +4,26 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
lineGradientFrom: {
|
||||||
|
type: String,
|
||||||
|
default: 'primary',
|
||||||
|
},
|
||||||
|
lineGradientTo: {
|
||||||
|
type: String,
|
||||||
|
default: 'primary',
|
||||||
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="bg-gradient-to-r from-primary-500/50 to-primary-300/50 rounded-full my-4"
|
:class="{
|
||||||
:class="{'w-full h-[1px]': !vertical, 'w-[1px] h-full': vertical}"
|
'w-full h-[1px]': !vertical,
|
||||||
|
'w-[1px] h-full': vertical,
|
||||||
|
[`from-${lineGradientFrom}-500/50`]: true,
|
||||||
|
[`to-${lineGradientTo}-300/50`]: true,
|
||||||
|
}"
|
||||||
|
class="bg-gradient-to-r rounded-full my-4"
|
||||||
></div>
|
></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,10 @@ defineProps({
|
|||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
needAdmin: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const modal = useModal()
|
const modal = useModal()
|
||||||
@@ -16,19 +20,24 @@ const modal = useModal()
|
|||||||
<template>
|
<template>
|
||||||
<ClientOnly>
|
<ClientOnly>
|
||||||
<div v-if="!loginState.is_logged_in"
|
<div v-if="!loginState.is_logged_in"
|
||||||
class="w-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
|
class="w-full flex flex-col justify-center items-center gap-2 py-40">
|
||||||
<Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
|
<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>
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
|
||||||
<UButton
|
<UButton
|
||||||
class="mt-2 font-bold"
|
class="mt-2 font-bold"
|
||||||
color="black"
|
color="black"
|
||||||
variant="solid"
|
|
||||||
size="xs"
|
size="xs"
|
||||||
|
variant="solid"
|
||||||
@click="modal.open(ModalAuthentication)"
|
@click="modal.open(ModalAuthentication)"
|
||||||
>
|
>
|
||||||
登录
|
登录
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else-if="needAdmin && loginState.user.auth_code !== 2"
|
||||||
|
class="w-full flex flex-col justify-center items-center gap-2 py-40">
|
||||||
|
<Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="tabler:hand-stop"/>
|
||||||
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">账号没有权限</p>
|
||||||
|
</div>
|
||||||
<div :class="contentClass" v-else>
|
<div :class="contentClass" v-else>
|
||||||
<slot/>
|
<slot/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -10,6 +10,14 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
disabledDigitalHumanIds: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
defaultTab: {
|
||||||
|
type: String as PropType<'user' | 'system'>,
|
||||||
|
default: 'user',
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits({
|
const emit = defineEmits({
|
||||||
@@ -107,6 +115,20 @@ const {
|
|||||||
watch: [page],
|
watch: [page],
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (loginState.user.auth_code === 2) {
|
||||||
|
tabItems.push({
|
||||||
|
key: 'system',
|
||||||
|
label: '系统数字人',
|
||||||
|
icon: 'i-tabler-user-star',
|
||||||
|
})
|
||||||
|
nextTick(() => {
|
||||||
|
tabIndex.value = tabItems.findIndex(i => i.key === props.defaultTab)
|
||||||
|
console.log('tabIndex', tabIndex.value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -132,37 +154,49 @@ const {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<UTabs
|
<UTabs
|
||||||
:items="[
|
v-model="tabIndex"
|
||||||
...tabItems,
|
:items="tabItems"
|
||||||
loginState.user.auth_code === 2 ? {
|
|
||||||
key: 'system',
|
|
||||||
label: '系统数字人',
|
|
||||||
icon: 'i-tabler-user-star',
|
|
||||||
} : null
|
|
||||||
].filter(Boolean)"
|
|
||||||
@change="i => tabIndex = i"
|
|
||||||
>
|
>
|
||||||
<template #item="{ item }">
|
<template #item="{ item }">
|
||||||
<div class="w-full grid grid-cols-3 sm:grid-cols-5 gap-4">
|
<div class="w-full grid grid-cols-3 sm:grid-cols-5 gap-4">
|
||||||
<div
|
<div
|
||||||
v-for="(d, i) in item.key === 'user' ? userDigitalList?.data.items : systemDigitalList?.data.items"
|
v-for="(d, i) in item.key === 'user' ? userDigitalList?.data.items : systemDigitalList?.data.items"
|
||||||
:key="`${item.key === 'user' ? 'user' : 'system'}-digital-${d.model_id}`"
|
:key="`${item.key === 'user' ? 'user' : 'system'}-digital-${d.model_id}`"
|
||||||
:class="{'border-primary shadow-md': selectedDigitalHumans.includes(d)}"
|
:class="{
|
||||||
class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white rounded-md border cursor-pointer transition-all duration-150 select-none"
|
'border-primary shadow-md': selectedDigitalHumans.includes(d),
|
||||||
@click="handleSelectClick(d)"
|
'border-neutral-200 dark:border-neutral-700': !selectedDigitalHumans.includes(d),
|
||||||
|
}"
|
||||||
|
class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white dark:bg-neutral-800 rounded-md border dark:border-2 cursor-pointer transition-all duration-150 select-none"
|
||||||
|
@click="!disabledDigitalHumanIds.includes(d.model_id) ? handleSelectClick(d) : void 0"
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
v-if="disabledDigitalHumanIds.includes(d.model_id)"
|
||||||
|
class="absolute inset-0 bg-neutral-400 dark:bg-neutral-700 bg-opacity-50 dark:bg-opacity-50 cursor-not-allowed z-10"
|
||||||
|
></div>
|
||||||
<div
|
<div
|
||||||
:class="{'bg-primary-50': selectedDigitalHumans.includes(d)}"
|
:class="{'bg-primary-50': selectedDigitalHumans.includes(d)}"
|
||||||
class="relative bg-neutral-100 border-b w-full aspect-square object-cover overflow-hidden transition-all duration-150"
|
class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-square object-cover overflow-hidden transition-all duration-150"
|
||||||
>
|
>
|
||||||
<NuxtImg :src="d.avatar" class="-translate-y-4"/>
|
<NuxtImg :src="d.avatar" class="-translate-y-4"/>
|
||||||
<UIcon v-if="selectedDigitalHumans.includes(d)" class="absolute top-1 right-1 text-lg text-primary"
|
<UIcon
|
||||||
name="i-tabler-check"/>
|
v-if="selectedDigitalHumans.includes(d)"
|
||||||
|
class="absolute top-1 right-1 text-lg text-primary"
|
||||||
|
name="i-tabler-check"
|
||||||
|
/>
|
||||||
|
<UIcon
|
||||||
|
v-if="disabledDigitalHumanIds.includes(d.model_id)"
|
||||||
|
class="absolute top-1 right-1 text-lg text-red-500"
|
||||||
|
name="tabler:user-off"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full flex flex-col gap-1 px-2 pb-2">
|
<div class="w-full flex flex-col gap-1 px-2 pb-2">
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
<span class="text-sm text-neutral-800 font-medium line-clamp-1">{{ d.name }}</span>
|
<span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1">
|
||||||
<span class="text-xs text-neutral-300 font-medium">ID:{{ d.digital_human_id || d.id }}</span>
|
{{ d.name }}
|
||||||
|
</span>
|
||||||
|
<span class="text-xs text-neutral-300 dark:text-neutral-500 font-medium">
|
||||||
|
ID:{{ d.digital_human_id || d.id }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -134,10 +134,11 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
|
|||||||
<UFormGroup label="数字人" name="digital_human_id" required>
|
<UFormGroup label="数字人" name="digital_human_id" required>
|
||||||
<div
|
<div
|
||||||
:class="{'shadow-inner': !!selected_digital_human}"
|
:class="{'shadow-inner': !!selected_digital_human}"
|
||||||
class="flex items-center gap-2 bg-neutral-100 p-2 rounded-md cursor-pointer select-none transition-all"
|
class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
|
||||||
@click="isDigitalSelectorOpen = true"
|
@click="isDigitalSelectorOpen = true"
|
||||||
>
|
>
|
||||||
<div class="w-12 aspect-square border rounded-md flex justify-center items-center overflow-hidden">
|
<div
|
||||||
|
class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden">
|
||||||
<UIcon v-if="!selected_digital_human" class="text-2xl opacity-50" name="i-tabler-user-screen"/>
|
<UIcon v-if="!selected_digital_human" class="text-2xl opacity-50" name="i-tabler-user-screen"/>
|
||||||
<NuxtImg v-else :src="selected_digital_human?.avatar"/>
|
<NuxtImg v-else :src="selected_digital_human?.avatar"/>
|
||||||
</div>
|
</div>
|
||||||
@@ -153,9 +154,10 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
|
|||||||
</UFormGroup>
|
</UFormGroup>
|
||||||
<UFormGroup label="视频片头片尾" name="opening">
|
<UFormGroup label="视频片头片尾" name="opening">
|
||||||
<div
|
<div
|
||||||
class="flex items-center gap-2 bg-neutral-100 p-2 rounded-md cursor-pointer select-none transition-all"
|
class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
|
||||||
>
|
>
|
||||||
<div class="w-12 aspect-square border rounded-md flex justify-center items-center">
|
<div
|
||||||
|
class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center">
|
||||||
<UIcon class="text-2xl opacity-50" name="i-tabler-brackets-contain"/>
|
<UIcon class="text-2xl opacity-50" name="i-tabler-brackets-contain"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col text-neutral-400 text-sm font-medium">
|
<div class="flex flex-col text-neutral-400 text-sm font-medium">
|
||||||
@@ -179,7 +181,7 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
|
|||||||
|
|
||||||
<UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
|
<UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
|
||||||
<template #item>
|
<template #item>
|
||||||
<div class="border rounded-lg space-y-4 p-4 pb-6">
|
<div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
|
||||||
<UFormGroup label="生成线路" name="gen_server">
|
<UFormGroup label="生成线路" name="gen_server">
|
||||||
<USelectMenu
|
<USelectMenu
|
||||||
v-model="createCourseState.gen_server"
|
v-model="createCourseState.gen_server"
|
||||||
|
|||||||
@@ -117,10 +117,11 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
|
|||||||
<UFormGroup label="数字人" name="digital_human_id" required>
|
<UFormGroup label="数字人" name="digital_human_id" required>
|
||||||
<div
|
<div
|
||||||
:class="{'shadow-inner': !!selected_digital_human}"
|
:class="{'shadow-inner': !!selected_digital_human}"
|
||||||
class="flex items-center gap-2 bg-neutral-100 p-2 rounded-md cursor-pointer select-none transition-all"
|
class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
|
||||||
@click="isDigitalSelectorOpen = true"
|
@click="isDigitalSelectorOpen = true"
|
||||||
>
|
>
|
||||||
<div class="w-12 aspect-square border rounded-md flex justify-center items-center overflow-hidden">
|
<div
|
||||||
|
class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden">
|
||||||
<UIcon v-if="!selected_digital_human" class="text-2xl opacity-50" name="i-tabler-user-screen"/>
|
<UIcon v-if="!selected_digital_human" class="text-2xl opacity-50" name="i-tabler-user-screen"/>
|
||||||
<NuxtImg v-else :src="selected_digital_human?.avatar"/>
|
<NuxtImg v-else :src="selected_digital_human?.avatar"/>
|
||||||
</div>
|
</div>
|
||||||
@@ -147,7 +148,7 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
|
|||||||
|
|
||||||
<UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
|
<UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
|
||||||
<template #item>
|
<template #item>
|
||||||
<div class="border rounded-lg space-y-4 p-4 pb-6">
|
<div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
|
||||||
<UFormGroup :label="`视频倍速：${createCourseState.speed}`" name="speed">
|
<UFormGroup :label="`视频倍速：${createCourseState.speed}`" name="speed">
|
||||||
<URange
|
<URange
|
||||||
v-model="createCourseState.speed"
|
v-model="createCourseState.speed"
|
||||||
|
|||||||
@@ -38,13 +38,18 @@ const activeClass = computed(() => {
|
|||||||
v-if="!hide"
|
v-if="!hide"
|
||||||
:class="{
|
:class="{
|
||||||
[activeClass]: active,
|
[activeClass]: active,
|
||||||
'hover:bg-neutral-200': !active,
|
'hover:bg-neutral-200 dark:hover:bg-neutral-800': !active,
|
||||||
}"
|
}"
|
||||||
:to="to"
|
:to="to"
|
||||||
class="px-4 py-3 flex items-center gap-2 rounded-lg transition cursor-pointer"
|
class="px-4 py-3 flex justify-between items-center rounded-lg transition cursor-pointer"
|
||||||
>
|
>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
<Icon :name="icon" class="text-xl inline"/>
|
<Icon :name="icon" class="text-xl inline"/>
|
||||||
<h1 class="text-[14px] font-medium">{{ label }}</h1>
|
<h1 class="flex-1 text-[14px] font-medium line-clamp-1">
|
||||||
|
{{ label }}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<UBadge v-if="admin" color="amber" label="OP" size="xs" variant="subtle"/>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -17,18 +17,20 @@ const isDark = computed({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const links = [
|
const links = [
|
||||||
|
{
|
||||||
|
label: '分身制课',
|
||||||
|
icon: 'tabler:books',
|
||||||
|
to: '/generation',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '聊天',
|
||||||
|
icon: 'tabler:message-chatbot',
|
||||||
|
to: '/aigc/chat',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '绘画',
|
label: '绘画',
|
||||||
icon: 'i-tabler-brush',
|
icon: 'i-tabler-brush',
|
||||||
to: '/',
|
to: '/aigc/draw',
|
||||||
}, {
|
|
||||||
label: '聊天',
|
|
||||||
icon: 'i-tabler-message-2',
|
|
||||||
to: '/aigc/chat',
|
|
||||||
}, {
|
|
||||||
label: 'PPT',
|
|
||||||
icon: 'i-tabler-file-type-ppt',
|
|
||||||
to: '/aigc/generation',
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -21,6 +21,15 @@ export default defineNuxtConfig({
|
|||||||
'nuxt-driver.js',
|
'nuxt-driver.js',
|
||||||
],
|
],
|
||||||
|
|
||||||
|
routeRules: {
|
||||||
|
'/': {
|
||||||
|
redirect: {
|
||||||
|
to: '/generation',
|
||||||
|
statusCode: 302,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
icon: {
|
icon: {
|
||||||
provider: 'iconify',
|
provider: 'iconify',
|
||||||
serverBundle: false,
|
serverBundle: false,
|
||||||
|
|||||||
416
pages/aigc/draw/index.vue
Normal file
416
pages/aigc/draw/index.vue
Normal file
@@ -0,0 +1,416 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import OptionBlock from '~/components/aigc/drawing/OptionBlock.vue'
|
||||||
|
import ResultBlock from '~/components/aigc/drawing/ResultBlock.vue'
|
||||||
|
import { useLoginState } from '~/composables/useLoginState'
|
||||||
|
import ModalAuthentication from '~/components/ModalAuthentication.vue'
|
||||||
|
import { type InferType, number, object, string } from 'yup'
|
||||||
|
import type { FormSubmitEvent } from '#ui/types'
|
||||||
|
import RatioSelector from '~/components/aigc/RatioSelector.vue'
|
||||||
|
import { useFetchWrapped } from '~/composables/useFetchWrapped'
|
||||||
|
import type { ResultBlockMeta } from '~/components/aigc/drawing'
|
||||||
|
import { useHistory } from '~/composables/useHistory'
|
||||||
|
import { del, set } from 'idb-keyval'
|
||||||
|
import ReferenceFigureSelector from '~/components/aigc/ReferenceFigureSelector.vue'
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title: '绘画',
|
||||||
|
})
|
||||||
|
|
||||||
|
const toast = useToast()
|
||||||
|
const modal = useModal()
|
||||||
|
const dayjs = useDayjs()
|
||||||
|
const history = useHistory()
|
||||||
|
const loginState = useLoginState()
|
||||||
|
|
||||||
|
const leftSection = ref<HTMLElement | null>(null)
|
||||||
|
const leftHandler = ref<HTMLElement | null>(null)
|
||||||
|
const showSidebar = ref(false)
|
||||||
|
|
||||||
|
const generating = ref(false)
|
||||||
|
|
||||||
|
const handle_stick_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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultRatios = [
|
||||||
|
{
|
||||||
|
ratio: '1:1',
|
||||||
|
value: '768:768',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ratio: '4:3',
|
||||||
|
value: '1024:768',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ratio: '3:4',
|
||||||
|
value: '768:1024',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
interface StyleItem {
|
||||||
|
label: string
|
||||||
|
value: number
|
||||||
|
avatar?: { src: string }
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultStyles: StyleItem[] = [
|
||||||
|
{
|
||||||
|
label: '通用写实风格',
|
||||||
|
value: 401,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '日系动漫',
|
||||||
|
value: 201,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '科幻风格',
|
||||||
|
value: 114,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '怪兽风格',
|
||||||
|
value: 202,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '唯美古风',
|
||||||
|
value: 203,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '复古动漫',
|
||||||
|
value: 204,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '游戏卡通手绘',
|
||||||
|
value: 301,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '水墨画',
|
||||||
|
value: 101,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '概念艺术',
|
||||||
|
value: 102,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '水彩画',
|
||||||
|
value: 104,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '像素画',
|
||||||
|
value: 105,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '厚涂风格',
|
||||||
|
value: 106,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '插图',
|
||||||
|
value: 107,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '剪纸风格',
|
||||||
|
value: 108,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '印象派',
|
||||||
|
value: 119,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '印象派（莫奈）',
|
||||||
|
value: 109,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '油画',
|
||||||
|
value: 103,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '油画（梵高）',
|
||||||
|
value: 118,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '古典肖像画',
|
||||||
|
value: 111,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '黑白素描画',
|
||||||
|
value: 112,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '赛博朋克',
|
||||||
|
value: 113,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '暗黑风格',
|
||||||
|
value: 115,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '蒸汽波',
|
||||||
|
value: 117,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '2.5D',
|
||||||
|
value: 110,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '3D',
|
||||||
|
value: 116,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const img2imgStyles: StyleItem[] = [
|
||||||
|
{
|
||||||
|
label: '水彩画',
|
||||||
|
value: 106,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '2.5D',
|
||||||
|
value: 110,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '日系动漫',
|
||||||
|
value: 201,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '美系动漫',
|
||||||
|
value: 202,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '唯美古风',
|
||||||
|
value: 203,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const defaultFormSchema = object({
|
||||||
|
prompt: string().required('请输入提示词'),
|
||||||
|
negative_prompt: string(),
|
||||||
|
resolution: string().required('请选择分辨率'),
|
||||||
|
styles: object<StyleItem>({
|
||||||
|
label: string(),
|
||||||
|
value: number(),
|
||||||
|
}).required('请选择风格'),
|
||||||
|
file: string().nullable(),
|
||||||
|
})
|
||||||
|
|
||||||
|
type DefaultFormSchema = InferType<typeof defaultFormSchema>
|
||||||
|
|
||||||
|
const defaultFormState = reactive({
|
||||||
|
prompt: '',
|
||||||
|
negative_prompt: '',
|
||||||
|
resolution: '1024:768',
|
||||||
|
styles: defaultStyles.find(item => item.value === 401),
|
||||||
|
file: null,
|
||||||
|
})
|
||||||
|
watch(() => defaultFormState.file, (newVal) => {
|
||||||
|
if (newVal) {
|
||||||
|
defaultFormState.styles = img2imgStyles[0]
|
||||||
|
} else {
|
||||||
|
defaultFormState.styles = defaultStyles.find(item => item.value === 401)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
|
||||||
|
if (!loginState.is_logged_in) {
|
||||||
|
modal.open(ModalAuthentication)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
generating.value = true
|
||||||
|
const styleItem = event.data.styles as StyleItem
|
||||||
|
if (!event.data.file) delete event.data.file
|
||||||
|
// generate a uuid
|
||||||
|
const fid = Math.random().toString(36).substring(2)
|
||||||
|
const meta: ResultBlockMeta = {
|
||||||
|
cost: '1000',
|
||||||
|
modal: '混元大模型',
|
||||||
|
style: styleItem.label,
|
||||||
|
ratio: event.data.resolution,
|
||||||
|
datetime: dayjs().unix(),
|
||||||
|
type: event.data.file ? '智能图生图' : '智能文生图',
|
||||||
|
}
|
||||||
|
history.text2img.unshift({
|
||||||
|
fid,
|
||||||
|
meta,
|
||||||
|
prompt: event.data.prompt,
|
||||||
|
})
|
||||||
|
useFetchWrapped<
|
||||||
|
(HunYuan.Text2Img.req | HunYuan.Img2Img.req) & AuthedRequest,
|
||||||
|
BaseResponse<HunYuan.resp>
|
||||||
|
>(event.data.file ? 'App.Assistant_HunYuan.TenImgToImg' : 'App.Assistant_HunYuan.TenTextToImg', {
|
||||||
|
token: loginState.token as string,
|
||||||
|
user_id: loginState.user.id,
|
||||||
|
device_id: 'web',
|
||||||
|
...event.data,
|
||||||
|
styles: styleItem.value,
|
||||||
|
}).then(res => {
|
||||||
|
if (res.ret !== 200) {
|
||||||
|
toast.add({
|
||||||
|
title: '生成失败',
|
||||||
|
description: res.msg || '未知错误',
|
||||||
|
color: 'red',
|
||||||
|
icon: 'i-tabler-circle-x',
|
||||||
|
})
|
||||||
|
history.text2img = history.text2img.filter(item => item.fid !== fid)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
history.text2img = history.text2img.map(item => {
|
||||||
|
if (item.fid === fid) {
|
||||||
|
set(`${ item.fid }`, [`data:image/png;base64,${ res.data.request_image }`])
|
||||||
|
item.meta = {
|
||||||
|
...item.meta,
|
||||||
|
id: res.data.data_id as string,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
toast.add({
|
||||||
|
title: '生成失败',
|
||||||
|
description: err.msg || '网络错误',
|
||||||
|
color: 'red',
|
||||||
|
icon: 'i-tabler-circle-x',
|
||||||
|
})
|
||||||
|
}).finally(() => {
|
||||||
|
generating.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="w-full flex relative">
|
||||||
|
<div ref="leftSection"
|
||||||
|
:class="{'translate-x-0': showSidebar}"
|
||||||
|
class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] 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_stick_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="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-900 rounded-r-lg shadow-lg flex md:hidden justify-center items-center">
|
||||||
|
<UButton color="black" icon="i-tabler-brush" size="lg" square @click="showSidebar = !showSidebar"></UButton>
|
||||||
|
</div>
|
||||||
|
<div class="h-full flex flex-col overflow-y-auto">
|
||||||
|
<UForm :schema="defaultFormSchema" :state="defaultFormState" @submit="onDefaultFormSubmit">
|
||||||
|
<div class="flex flex-col gap-2 p-4 pb-28">
|
||||||
|
<OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
|
||||||
|
<UFormGroup name="prompt">
|
||||||
|
<UTextarea v-model="defaultFormState.prompt" :rows="2" autoresize
|
||||||
|
placeholder="请输入提示词，每个提示词之间用英文逗号隔开" resize/>
|
||||||
|
</UFormGroup>
|
||||||
|
</OptionBlock>
|
||||||
|
<OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
|
||||||
|
<UFormGroup name="negative_prompt">
|
||||||
|
<UTextarea v-model="defaultFormState.negative_prompt" :rows="2" autoresize
|
||||||
|
placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
|
||||||
|
resize/>
|
||||||
|
</UFormGroup>
|
||||||
|
</OptionBlock>
|
||||||
|
<OptionBlock icon="i-tabler-library-photo" label="参考图片">
|
||||||
|
<UFormGroup name="input_image">
|
||||||
|
<ReferenceFigureSelector
|
||||||
|
:value="defaultFormState.file"
|
||||||
|
text="选择参考图片"
|
||||||
|
text-on-select="已选择参考图" @update="file => {defaultFormState.file = file}"/>
|
||||||
|
</UFormGroup>
|
||||||
|
</OptionBlock>
|
||||||
|
<OptionBlock icon="i-tabler-photo-hexagon" label="图片风格">
|
||||||
|
<UFormGroup name="styles">
|
||||||
|
<USelectMenu v-model="defaultFormState.styles"
|
||||||
|
:options="defaultFormState.file ? img2imgStyles : defaultStyles"></USelectMenu>
|
||||||
|
</UFormGroup>
|
||||||
|
</OptionBlock>
|
||||||
|
<OptionBlock icon="i-tabler-article-off" label="图片比例">
|
||||||
|
<UFormGroup name="resolution">
|
||||||
|
<RatioSelector v-model="defaultFormState.resolution" :ratios="defaultRatios"/>
|
||||||
|
</UFormGroup>
|
||||||
|
</OptionBlock>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2
|
||||||
|
bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400
|
||||||
|
dark:border-neutral-700">
|
||||||
|
<UButton :loading="generating" block class="font-bold" color="indigo" size="lg" type="submit">
|
||||||
|
{{ generating ? '生成中' : '生成' }}
|
||||||
|
</UButton>
|
||||||
|
<p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
|
||||||
|
生成即代表您同意<a class="underline underline-offset-2" href="#"
|
||||||
|
target="_blank">用户许可协议</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</UForm>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ClientOnly>
|
||||||
|
<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 class="text-7xl text-neutral-300 dark:text-neutral-700" name="i-tabler-user-circle"/>
|
||||||
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
|
||||||
|
<UButton class="mt-2 font-bold" color="black" size="xs" variant="solid"
|
||||||
|
@click="modal.open(ModalAuthentication)">
|
||||||
|
登录
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="history.text2img.length === 0"
|
||||||
|
class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
|
||||||
|
<Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="i-tabler-photo-hexagon"/>
|
||||||
|
<p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
|
||||||
|
</div>
|
||||||
|
<ResultBlock v-for="(result, k) in history.text2img" v-else :key="result.fid" :fid="result.fid"
|
||||||
|
:meta="result.meta" :prompt="result.prompt"
|
||||||
|
@use-reference="file => {defaultFormState.file = file}">
|
||||||
|
<template #header-right>
|
||||||
|
<UPopover overlay>
|
||||||
|
<UButton color="black" icon="i-tabler-trash" size="xs" variant="ghost"></UButton>
|
||||||
|
<template #panel="{close}">
|
||||||
|
<div class="p-4 flex flex-col gap-4">
|
||||||
|
<h2 class="text-sm">删除后无法恢复，确定删除？</h2>
|
||||||
|
<div class="flex items-center justify-end gap-2">
|
||||||
|
<UButton class="font-bold" color="gray" size="xs" @click="close">
|
||||||
|
取消
|
||||||
|
</UButton>
|
||||||
|
<UButton class="font-bold" color="red" size="xs"
|
||||||
|
@click="() => {
|
||||||
|
history.text2img.splice(k, 1)
|
||||||
|
del(result.fid)
|
||||||
|
close()
|
||||||
|
}">
|
||||||
|
仍然删除
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</UPopover>
|
||||||
|
</template>
|
||||||
|
</ResultBlock>
|
||||||
|
<div class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600">
|
||||||
|
<UIcon name="i-tabler-info-triangle"/>
|
||||||
|
<p class="text-xs font-bold">所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ClientOnly>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -5,37 +5,37 @@ useSeoMeta({
|
|||||||
title: '智能生成',
|
title: '智能生成',
|
||||||
})
|
})
|
||||||
|
|
||||||
const navList: {
|
const navList = ref<{
|
||||||
label: string
|
label: string
|
||||||
icon: string
|
icon: string
|
||||||
to: string
|
to: string
|
||||||
admin?: boolean
|
admin?: boolean
|
||||||
}[] = [
|
}[]>([
|
||||||
{
|
{
|
||||||
label: '微课视频生成',
|
label: '微课视频生成',
|
||||||
icon: 'tabler:presentation-analytics',
|
icon: 'tabler:presentation-analytics',
|
||||||
to: '/aigc/generation/course',
|
to: '/generation/course',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '绿幕视频生成',
|
label: '绿幕视频生成',
|
||||||
icon: 'i-tabler-video',
|
icon: 'i-tabler-video',
|
||||||
to: '/aigc/generation/green-screen',
|
to: '/generation/green-screen',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '数字人管理',
|
label: '用户管理',
|
||||||
icon: 'i-tabler-video',
|
icon: 'tabler:users',
|
||||||
to: '/aigc/generation/green-screen',
|
to: '/generation/admin/users',
|
||||||
admin: true,
|
admin: true,
|
||||||
},
|
},
|
||||||
]
|
])
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const loginState = useLoginState()
|
const loginState = useLoginState()
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (route.fullPath === '/aigc/generation') {
|
if (route.fullPath === '/generation') {
|
||||||
router.push('/aigc/generation/course')
|
router.replace('/generation/course')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
414
pages/generation/admin/users.vue
Normal file
414
pages/generation/admin/users.vue
Normal file
@@ -0,0 +1,414 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import ModalDigitalHumanSelect from '~/components/ModalDigitalHumanSelect.vue'
|
||||||
|
|
||||||
|
const toast = useToast()
|
||||||
|
const loginState = useLoginState()
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
key: 'id',
|
||||||
|
label: 'ID',
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'avatar',
|
||||||
|
label: '头像',
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'username',
|
||||||
|
label: '用户名',
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'company',
|
||||||
|
label: '单位',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'mobile',
|
||||||
|
label: '手机号',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'email',
|
||||||
|
label: '电子邮箱',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'nickname',
|
||||||
|
label: '昵称',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'sex',
|
||||||
|
label: '性别',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'auth_code',
|
||||||
|
label: '角色',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'actions',
|
||||||
|
label: '操作',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const selectedColumns = ref([...columns.filter(row => {
|
||||||
|
return !['nickname', 'email', 'auth_code'].includes(row.key)
|
||||||
|
})])
|
||||||
|
const page = ref(1)
|
||||||
|
const pageCount = ref(15)
|
||||||
|
const is_verified = ref(true)
|
||||||
|
const viewingUser = ref<UserSchema | null>(null)
|
||||||
|
const isSlideOpen = computed({
|
||||||
|
get: () => !!viewingUser.value,
|
||||||
|
set: () => viewingUser.value = null,
|
||||||
|
})
|
||||||
|
|
||||||
|
watch([is_verified, pageCount], () => page.value = 1)
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: usersData,
|
||||||
|
refresh: refreshUsersData,
|
||||||
|
status: usersDataStatus,
|
||||||
|
} = useAsyncData(
|
||||||
|
'systemUsers',
|
||||||
|
() => useFetchWrapped<
|
||||||
|
req.user.UserList & AuthedRequest,
|
||||||
|
BaseResponse<PagedData<UserSchema>>
|
||||||
|
>('App.User_User.ListUser', {
|
||||||
|
token: loginState.token!,
|
||||||
|
user_id: loginState.user.id!,
|
||||||
|
page: page.value,
|
||||||
|
perpage: pageCount.value,
|
||||||
|
is_verify: is_verified.value,
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
watch: [page, pageCount, is_verified],
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const isDigitalSelectorOpen = ref(false)
|
||||||
|
const dhPage = ref(1)
|
||||||
|
const dhPageCount = ref(10)
|
||||||
|
|
||||||
|
watch(dhPageCount, () => dhPage.value = 1)
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: digitalHumansData,
|
||||||
|
refresh: refreshDigitalHumansData,
|
||||||
|
status: digitalHumansDataStatus,
|
||||||
|
} = useAsyncData(
|
||||||
|
'currentUserDigitalHumans',
|
||||||
|
() => useFetchWrapped<
|
||||||
|
PagedDataRequest & AuthedRequest,
|
||||||
|
BaseResponse<PagedData<DigitalHumanItem>>
|
||||||
|
>('App.User_UserDigital.GetList', {
|
||||||
|
token: loginState.token!,
|
||||||
|
user_id: loginState.user.id!,
|
||||||
|
to_user_id: viewingUser.value?.id || 0,
|
||||||
|
page: dhPage.value,
|
||||||
|
perpage: dhPageCount.value,
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
watch: [viewingUser, dhPage, dhPageCount],
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const items = (row: UserSchema) => [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: '数字人授权',
|
||||||
|
icon: 'tabler:user-cog',
|
||||||
|
click: () => openSlide(row),
|
||||||
|
disabled: row.auth_code === 0,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
label: row.auth_code !== 0 ? '停用账号' : '启用账号',
|
||||||
|
icon: row.auth_code !== 0 ? 'tabler:cancel' : 'tabler:shield-check',
|
||||||
|
click: () => setUserStatus(row.id, row.auth_code === 0),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]
|
||||||
|
|
||||||
|
const openSlide = (user: UserSchema) => {
|
||||||
|
viewingUser.value = user
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeSlide = () => {
|
||||||
|
viewingUser.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDigitalHumansSelected = (digitalHumans: DigitalHumanItem[]) => {
|
||||||
|
useFetchWrapped<
|
||||||
|
{
|
||||||
|
to_user_id: number
|
||||||
|
digital_human_array: number[]
|
||||||
|
} & AuthedRequest,
|
||||||
|
BaseResponse<{
|
||||||
|
total: number
|
||||||
|
success: number
|
||||||
|
failed: number
|
||||||
|
}>
|
||||||
|
>('App.User_UserDigital.CreateConnArr', {
|
||||||
|
token: loginState.token!,
|
||||||
|
user_id: loginState.user.id!,
|
||||||
|
to_user_id: viewingUser.value?.id || 0,
|
||||||
|
digital_human_array: digitalHumans.map(row => row.id || row.digital_human_id),
|
||||||
|
}).then(res => {
|
||||||
|
if (res.ret === 200) {
|
||||||
|
toast.add({
|
||||||
|
title: '授权成功',
|
||||||
|
description: `成功授权 ${ res.data.success } 个数字人${ res.data.failed ? `，失败 ${ res.data.failed } 个` : '' }`,
|
||||||
|
color: 'green',
|
||||||
|
icon: 'tabler:check',
|
||||||
|
})
|
||||||
|
refreshDigitalHumansData()
|
||||||
|
} else {
|
||||||
|
toast.add({
|
||||||
|
title: '授权失败',
|
||||||
|
description: res.msg || '未知错误',
|
||||||
|
color: 'red',
|
||||||
|
icon: 'tabler:alert-triangle',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const revokeDigitalHuman = (uid: number, digitalHumanId: number) => {
|
||||||
|
useFetchWrapped<
|
||||||
|
{
|
||||||
|
to_user_id: number
|
||||||
|
digital_human_id: number
|
||||||
|
} & AuthedRequest,
|
||||||
|
BaseResponse<{
|
||||||
|
code: number // 1: success, 0: failed
|
||||||
|
}>
|
||||||
|
>('App.User_UserDigital.DeleteConn', {
|
||||||
|
token: loginState.token!,
|
||||||
|
user_id: loginState.user.id!,
|
||||||
|
to_user_id: uid,
|
||||||
|
digital_human_id: digitalHumanId,
|
||||||
|
}).then(res => {
|
||||||
|
if (res.ret === 200 && res.data.code === 1) {
|
||||||
|
toast.add({
|
||||||
|
title: '撤销成功',
|
||||||
|
description: '已撤销数字人授权',
|
||||||
|
color: 'green',
|
||||||
|
icon: 'tabler:check',
|
||||||
|
})
|
||||||
|
refreshDigitalHumansData()
|
||||||
|
} else {
|
||||||
|
toast.add({
|
||||||
|
title: '撤销失败',
|
||||||
|
description: res.msg || '未知错误',
|
||||||
|
color: 'red',
|
||||||
|
icon: 'tabler:alert-triangle',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const setUserStatus = (uid: number, is_verified: boolean) => {
|
||||||
|
useFetchWrapped<
|
||||||
|
{
|
||||||
|
to_user_id: number
|
||||||
|
is_verify: boolean
|
||||||
|
} & AuthedRequest,
|
||||||
|
BaseResponse<{
|
||||||
|
status: number // 1: success, 0: failed
|
||||||
|
}>
|
||||||
|
>('App.User_User.SetUserVerify', {
|
||||||
|
token: loginState.token!,
|
||||||
|
user_id: loginState.user.id!,
|
||||||
|
to_user_id: uid,
|
||||||
|
is_verify: is_verified,
|
||||||
|
}).then(res => {
|
||||||
|
if (res.ret === 200 && res.data.status === 1) {
|
||||||
|
toast.add({
|
||||||
|
title: '操作成功',
|
||||||
|
description: `已${ is_verified ? '启用' : '停用' }账号`,
|
||||||
|
color: 'green',
|
||||||
|
icon: is_verified ? 'tabler:shield-check' : 'tabler:cancel',
|
||||||
|
})
|
||||||
|
refreshUsersData()
|
||||||
|
} else {
|
||||||
|
toast.add({
|
||||||
|
title: '操作失败',
|
||||||
|
description: res.msg || '未知错误',
|
||||||
|
color: 'red',
|
||||||
|
icon: 'tabler:alert-triangle',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<LoginNeededContent need-admin>
|
||||||
|
<div class="p-4">
|
||||||
|
<BubbleTitle bubble-color="amber-500" subtitle="User Management" title="用户管理">
|
||||||
|
<template #action>
|
||||||
|
<UButton
|
||||||
|
color="amber"
|
||||||
|
icon="tabler:users"
|
||||||
|
variant="soft"
|
||||||
|
@click="openSlide(loginState.user)"
|
||||||
|
>
|
||||||
|
本账号数字人
|
||||||
|
</UButton>
|
||||||
|
<UButton
|
||||||
|
color="amber"
|
||||||
|
icon="tabler:reload"
|
||||||
|
variant="soft"
|
||||||
|
@click="refreshUsersData"
|
||||||
|
>
|
||||||
|
刷新
|
||||||
|
</UButton>
|
||||||
|
</template>
|
||||||
|
</BubbleTitle>
|
||||||
|
<GradientDivider line-gradient-from="amber" line-gradient-to="amber"/>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center w-full py-3">
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<span class="text-sm leading-0">每页显示:</span>
|
||||||
|
<USelect
|
||||||
|
v-model="pageCount"
|
||||||
|
:options="[5, 10, 15, 20]"
|
||||||
|
class="me-2 w-20"
|
||||||
|
size="xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-1.5 items-center">
|
||||||
|
<USelectMenu
|
||||||
|
v-model="is_verified"
|
||||||
|
:options="[
|
||||||
|
{label: '正常账号', value: true, icon: 'tabler:user-check'},
|
||||||
|
{label: '停用账号', value: false, icon: 'tabler:user-cancel'},
|
||||||
|
]"
|
||||||
|
:ui-menu="{width: 'w-fit', option: {size: 'text-xs', icon: {base: 'w-4 h-4'}}}"
|
||||||
|
size="xs"
|
||||||
|
value-attribute="value"
|
||||||
|
/>
|
||||||
|
<USelectMenu
|
||||||
|
v-model="selectedColumns"
|
||||||
|
:options="columns.filter(row => !['actions'].includes(row.key))"
|
||||||
|
:ui-menu="{width: 'w-fit', option: {size: 'text-xs', icon: {base: 'w-4 h-4'}}}"
|
||||||
|
multiple
|
||||||
|
>
|
||||||
|
<UButton
|
||||||
|
color="gray"
|
||||||
|
icon="tabler:layout-columns"
|
||||||
|
size="xs"
|
||||||
|
>
|
||||||
|
显示列
|
||||||
|
</UButton>
|
||||||
|
</USelectMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<UTable
|
||||||
|
:columns="selectedColumns"
|
||||||
|
:loading="usersDataStatus === 'pending'"
|
||||||
|
:progress="{color: 'amber', animation: 'carousel'}"
|
||||||
|
:rows="usersData?.data.items"
|
||||||
|
class="border dark:border-neutral-800 rounded-md"
|
||||||
|
>
|
||||||
|
<template #avatar-data="{ row }">
|
||||||
|
<UAvatar :alt="row.username.toUpperCase()" :src="row.avatar" size="sm"/>
|
||||||
|
</template>
|
||||||
|
<template #sex-data="{ row }">
|
||||||
|
{{ row.sex === 0 ? '' : row.sex === 1 ? '男' : '女' }}
|
||||||
|
</template>
|
||||||
|
<template #actions-data="{ row }">
|
||||||
|
<UDropdown :items="items(row)">
|
||||||
|
<UButton color="gray" icon="tabler:dots" variant="ghost"/>
|
||||||
|
</UDropdown>
|
||||||
|
</template>
|
||||||
|
</UTable>
|
||||||
|
<div class="flex justify-end py-3.5">
|
||||||
|
<UPagination
|
||||||
|
v-if="(usersData?.data.total || -1) > 0"
|
||||||
|
v-model="page"
|
||||||
|
:page-count="pageCount"
|
||||||
|
:total="usersData?.data.total || 0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<USlideover v-model="isSlideOpen">
|
||||||
|
<UCard
|
||||||
|
:ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
|
||||||
|
class="flex flex-col flex-1"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<UButton
|
||||||
|
class="flex absolute end-5 top-5 z-10"
|
||||||
|
color="gray"
|
||||||
|
icon="tabler:x"
|
||||||
|
padded
|
||||||
|
size="sm"
|
||||||
|
square
|
||||||
|
variant="ghost"
|
||||||
|
@click="closeSlide"
|
||||||
|
/>
|
||||||
|
数字人授权管理
|
||||||
|
<p class="text-sm font-medium text-primary">{{ viewingUser?.username }} (UID:{{ viewingUser?.id }})</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="flex w-full justify-end pb-4">
|
||||||
|
<UButton
|
||||||
|
icon="tabler:plus"
|
||||||
|
size="xs"
|
||||||
|
@click="isDigitalSelectorOpen = true"
|
||||||
|
>
|
||||||
|
新增授权
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
<div class="border dark:border-neutral-700 rounded-md">
|
||||||
|
<UTable
|
||||||
|
:columns="[
|
||||||
|
{key: 'name', label: '名称'},
|
||||||
|
{key: 'digital_human_id', label: '平台ID'},
|
||||||
|
{key: 'model_id', label: '上游ID'},
|
||||||
|
{key: 'actions'},
|
||||||
|
]"
|
||||||
|
:loading="digitalHumansDataStatus === 'pending'"
|
||||||
|
:rows="digitalHumansData?.data.items"
|
||||||
|
>
|
||||||
|
<template #actions-data="{ row }">
|
||||||
|
<UButton
|
||||||
|
color="gray"
|
||||||
|
icon="tabler:cancel"
|
||||||
|
size="xs"
|
||||||
|
variant="ghost"
|
||||||
|
@click="revokeDigitalHuman(viewingUser?.id || 0, row.digital_human_id)"
|
||||||
|
>
|
||||||
|
撤销授权
|
||||||
|
</UButton>
|
||||||
|
</template>
|
||||||
|
</UTable>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end py-3.5">
|
||||||
|
<UPagination
|
||||||
|
v-if="(digitalHumansData?.data.total || -1) > 0"
|
||||||
|
v-model="dhPage"
|
||||||
|
:page-count="dhPageCount"
|
||||||
|
:total="digitalHumansData?.data.total || 0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
<ModalDigitalHumanSelect
|
||||||
|
:disabled-digital-human-ids="digitalHumansData?.data.items.map(d => d.model_id)"
|
||||||
|
:is-open="isDigitalSelectorOpen"
|
||||||
|
default-tab="system"
|
||||||
|
multiple
|
||||||
|
@close="isDigitalSelectorOpen = false"
|
||||||
|
@select="digitalHumans => onDigitalHumansSelected(digitalHumans as DigitalHumanItem[])"
|
||||||
|
/>
|
||||||
|
</USlideover>
|
||||||
|
</LoginNeededContent>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
407
pages/index.vue
407
pages/index.vue
@@ -1,413 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import OptionBlock from '~/components/aigc/drawing/OptionBlock.vue';
|
|
||||||
import ResultBlock from '~/components/aigc/drawing/ResultBlock.vue';
|
|
||||||
import {useLoginState} from '~/composables/useLoginState';
|
|
||||||
import ModalAuthentication from '~/components/ModalAuthentication.vue';
|
|
||||||
import {type InferType, number, object, string} from 'yup';
|
|
||||||
import type {FormSubmitEvent} from '#ui/types';
|
|
||||||
import RatioSelector from '~/components/aigc/RatioSelector.vue';
|
|
||||||
import {useFetchWrapped} from '~/composables/useFetchWrapped';
|
|
||||||
import type {ResultBlockMeta} from '~/components/aigc/drawing';
|
|
||||||
import {useHistory} from '~/composables/useHistory';
|
|
||||||
import {del, set} from 'idb-keyval';
|
|
||||||
import ReferenceFigureSelector from '~/components/aigc/ReferenceFigureSelector.vue';
|
|
||||||
|
|
||||||
useSeoMeta({
|
|
||||||
title: '绘画',
|
|
||||||
})
|
|
||||||
|
|
||||||
const toast = useToast()
|
|
||||||
const modal = useModal()
|
|
||||||
const dayjs = useDayjs()
|
|
||||||
const history = useHistory()
|
|
||||||
const loginState = useLoginState()
|
|
||||||
|
|
||||||
const leftSection = ref<HTMLElement | null>(null)
|
|
||||||
const leftHandler = ref<HTMLElement | null>(null)
|
|
||||||
const showSidebar = ref(false)
|
|
||||||
|
|
||||||
const generating = ref(false)
|
|
||||||
|
|
||||||
const handle_stick_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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultRatios = [
|
|
||||||
{
|
|
||||||
ratio: '1:1',
|
|
||||||
value: '768:768',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
ratio: '4:3',
|
|
||||||
value: '1024:768',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
ratio: '3:4',
|
|
||||||
value: '768:1024',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
interface StyleItem {
|
|
||||||
label: string
|
|
||||||
value: number
|
|
||||||
avatar?: { src: string }
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultStyles: StyleItem[] = [
|
|
||||||
{
|
|
||||||
label: '通用写实风格',
|
|
||||||
value: 401,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '日系动漫',
|
|
||||||
value: 201,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '科幻风格',
|
|
||||||
value: 114,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '怪兽风格',
|
|
||||||
value: 202,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '唯美古风',
|
|
||||||
value: 203,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '复古动漫',
|
|
||||||
value: 204,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '游戏卡通手绘',
|
|
||||||
value: 301,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '水墨画',
|
|
||||||
value: 101,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '概念艺术',
|
|
||||||
value: 102,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '水彩画',
|
|
||||||
value: 104,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '像素画',
|
|
||||||
value: 105,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '厚涂风格',
|
|
||||||
value: 106,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '插图',
|
|
||||||
value: 107,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '剪纸风格',
|
|
||||||
value: 108,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '印象派',
|
|
||||||
value: 119,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '印象派（莫奈）',
|
|
||||||
value: 109,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '油画',
|
|
||||||
value: 103,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '油画（梵高）',
|
|
||||||
value: 118,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '古典肖像画',
|
|
||||||
value: 111,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '黑白素描画',
|
|
||||||
value: 112,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '赛博朋克',
|
|
||||||
value: 113,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '暗黑风格',
|
|
||||||
value: 115,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '蒸汽波',
|
|
||||||
value: 117,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2.5D',
|
|
||||||
value: 110,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '3D',
|
|
||||||
value: 116,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
const img2imgStyles: StyleItem[] = [
|
|
||||||
{
|
|
||||||
label: '水彩画',
|
|
||||||
value: 106,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2.5D',
|
|
||||||
value: 110,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '日系动漫',
|
|
||||||
value: 201,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '美系动漫',
|
|
||||||
value: 202,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '唯美古风',
|
|
||||||
value: 203,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const defaultFormSchema = object({
|
|
||||||
prompt: string().required('请输入提示词'),
|
|
||||||
negative_prompt: string(),
|
|
||||||
resolution: string().required('请选择分辨率'),
|
|
||||||
styles: object<StyleItem>({
|
|
||||||
label: string(),
|
|
||||||
value: number(),
|
|
||||||
}).required('请选择风格'),
|
|
||||||
file: string().nullable(),
|
|
||||||
})
|
|
||||||
|
|
||||||
type DefaultFormSchema = InferType<typeof defaultFormSchema>
|
|
||||||
|
|
||||||
const defaultFormState = reactive({
|
|
||||||
prompt: '',
|
|
||||||
negative_prompt: '',
|
|
||||||
resolution: '1024:768',
|
|
||||||
styles: defaultStyles.find(item => item.value === 401),
|
|
||||||
file: null,
|
|
||||||
})
|
|
||||||
watch(() => defaultFormState.file, (newVal) => {
|
|
||||||
if (newVal) {
|
|
||||||
defaultFormState.styles = img2imgStyles[0]
|
|
||||||
} else {
|
|
||||||
defaultFormState.styles = defaultStyles.find(item => item.value === 401)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
|
|
||||||
if (!loginState.is_logged_in) {
|
|
||||||
modal.open(ModalAuthentication)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
generating.value = true
|
|
||||||
const styleItem = event.data.styles as StyleItem
|
|
||||||
if (!event.data.file) delete event.data.file
|
|
||||||
// generate a uuid
|
|
||||||
const fid = Math.random().toString(36).substring(2)
|
|
||||||
const meta: ResultBlockMeta = {
|
|
||||||
cost: '1000',
|
|
||||||
modal: '混元大模型',
|
|
||||||
style: styleItem.label,
|
|
||||||
ratio: event.data.resolution,
|
|
||||||
datetime: dayjs().unix(),
|
|
||||||
type: event.data.file ? '智能图生图' : '智能文生图',
|
|
||||||
}
|
|
||||||
history.text2img.unshift({
|
|
||||||
fid,
|
|
||||||
meta,
|
|
||||||
prompt: event.data.prompt,
|
|
||||||
})
|
|
||||||
useFetchWrapped<
|
|
||||||
(HunYuan.Text2Img.req | HunYuan.Img2Img.req) & AuthedRequest,
|
|
||||||
BaseResponse<HunYuan.resp>
|
|
||||||
>(event.data.file ? 'App.Assistant_HunYuan.TenImgToImg' : 'App.Assistant_HunYuan.TenTextToImg', {
|
|
||||||
token: loginState.token as string,
|
|
||||||
user_id: loginState.user.id,
|
|
||||||
device_id: 'web',
|
|
||||||
...event.data,
|
|
||||||
styles: styleItem.value,
|
|
||||||
}).then(res => {
|
|
||||||
if (res.ret !== 200) {
|
|
||||||
toast.add({
|
|
||||||
title: '生成失败',
|
|
||||||
description: res.msg || '未知错误',
|
|
||||||
color: 'red',
|
|
||||||
icon: 'i-tabler-circle-x',
|
|
||||||
})
|
|
||||||
history.text2img = history.text2img.filter(item => item.fid !== fid)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
history.text2img = history.text2img.map(item => {
|
|
||||||
if (item.fid === fid) {
|
|
||||||
set(`${item.fid}`, [`data:image/png;base64,${res.data.request_image}`])
|
|
||||||
item.meta = {
|
|
||||||
...item.meta,
|
|
||||||
id: res.data.data_id as string,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return item
|
|
||||||
})
|
|
||||||
}).catch(err => {
|
|
||||||
toast.add({
|
|
||||||
title: '生成失败',
|
|
||||||
description: err.msg || '网络错误',
|
|
||||||
color: 'red',
|
|
||||||
icon: 'i-tabler-circle-x',
|
|
||||||
})
|
|
||||||
}).finally(() => {
|
|
||||||
generating.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full flex relative">
|
<div>
|
||||||
<div ref="leftSection"
|
Homepage is still WIP
|
||||||
class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
|
|
||||||
style="width: 320px" :class="{'translate-x-0': showSidebar}">
|
|
||||||
<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_stick_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="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-900 rounded-r-lg shadow-lg flex md:hidden justify-center items-center">
|
|
||||||
<UButton color="black" icon="i-tabler-brush" size="lg" square @click="showSidebar = !showSidebar"></UButton>
|
|
||||||
</div>
|
|
||||||
<div class="h-full flex flex-col overflow-y-auto">
|
|
||||||
<UForm :schema="defaultFormSchema" :state="defaultFormState" @submit="onDefaultFormSubmit">
|
|
||||||
<div class="flex flex-col gap-2 p-4 pb-28">
|
|
||||||
<OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
|
|
||||||
<UFormGroup name="prompt">
|
|
||||||
<UTextarea v-model="defaultFormState.prompt" :rows="2" autoresize
|
|
||||||
placeholder="请输入提示词，每个提示词之间用英文逗号隔开" resize/>
|
|
||||||
</UFormGroup>
|
|
||||||
</OptionBlock>
|
|
||||||
<OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
|
|
||||||
<UFormGroup name="negative_prompt">
|
|
||||||
<UTextarea v-model="defaultFormState.negative_prompt" :rows="2" autoresize
|
|
||||||
placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
|
|
||||||
resize/>
|
|
||||||
</UFormGroup>
|
|
||||||
</OptionBlock>
|
|
||||||
<OptionBlock icon="i-tabler-library-photo" label="参考图片">
|
|
||||||
<UFormGroup name="input_image">
|
|
||||||
<ReferenceFigureSelector
|
|
||||||
:value="defaultFormState.file"
|
|
||||||
@update="file => {defaultFormState.file = file}"
|
|
||||||
text="选择参考图片" text-on-select="已选择参考图"/>
|
|
||||||
</UFormGroup>
|
|
||||||
</OptionBlock>
|
|
||||||
<OptionBlock icon="i-tabler-photo-hexagon" label="图片风格">
|
|
||||||
<UFormGroup name="styles">
|
|
||||||
<USelectMenu v-model="defaultFormState.styles"
|
|
||||||
:options="defaultFormState.file ? img2imgStyles : defaultStyles"></USelectMenu>
|
|
||||||
</UFormGroup>
|
|
||||||
</OptionBlock>
|
|
||||||
<OptionBlock icon="i-tabler-article-off" label="图片比例">
|
|
||||||
<UFormGroup name="resolution">
|
|
||||||
<RatioSelector v-model="defaultFormState.resolution" :ratios="defaultRatios"/>
|
|
||||||
</UFormGroup>
|
|
||||||
</OptionBlock>
|
|
||||||
</div>
|
|
||||||
<div class="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2
|
|
||||||
bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400
|
|
||||||
dark:border-neutral-700">
|
|
||||||
<UButton type="submit" color="indigo" size="lg" class="font-bold" :loading="generating" block>
|
|
||||||
{{ generating ? '生成中' : '生成' }}
|
|
||||||
</UButton>
|
|
||||||
<p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
|
|
||||||
生成即代表您同意<a href="#" target="_blank"
|
|
||||||
class="underline underline-offset-2">用户许可协议</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</UForm>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ClientOnly>
|
|
||||||
<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>
|
|
||||||
<div v-else-if="history.text2img.length === 0"
|
|
||||||
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-photo-hexagon" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
|
|
||||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
|
|
||||||
</div>
|
|
||||||
<ResultBlock v-else v-for="(result, k) in history.text2img" :fid="result.fid" :meta="result.meta"
|
|
||||||
:prompt="result.prompt" :key="result.fid"
|
|
||||||
@use-reference="file => {defaultFormState.file = file}">
|
|
||||||
<template #header-right>
|
|
||||||
<UPopover overlay>
|
|
||||||
<UButton color="black" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
|
|
||||||
<template #panel="{close}">
|
|
||||||
<div class="p-4 flex flex-col gap-4">
|
|
||||||
<h2 class="text-sm">删除后无法恢复，确定删除？</h2>
|
|
||||||
<div class="flex items-center justify-end gap-2">
|
|
||||||
<UButton color="gray" size="xs" class="font-bold" @click="close">
|
|
||||||
取消
|
|
||||||
</UButton>
|
|
||||||
<UButton color="red" size="xs" class="font-bold"
|
|
||||||
@click="() => {
|
|
||||||
history.text2img.splice(k, 1)
|
|
||||||
del(result.fid)
|
|
||||||
close()
|
|
||||||
}">
|
|
||||||
仍然删除
|
|
||||||
</UButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</UPopover>
|
|
||||||
</template>
|
|
||||||
</ResultBlock>
|
|
||||||
<div class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600">
|
|
||||||
<UIcon name="i-tabler-info-triangle"/>
|
|
||||||
<p class="text-xs font-bold">所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ClientOnly>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -61,5 +61,11 @@ export default <Partial<Config>>{
|
|||||||
{
|
{
|
||||||
pattern: /^bg-/,
|
pattern: /^bg-/,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
pattern: /^from-/,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pattern: /^to-/,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|||||||
12
typings/types.d.ts
vendored
12
typings/types.d.ts
vendored
@@ -17,6 +17,12 @@ interface PagedData<T> {
|
|||||||
items: T[]
|
items: T[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface PagedDataRequest {
|
||||||
|
page?: number
|
||||||
|
perpage?: number
|
||||||
|
to_user_id?: number
|
||||||
|
}
|
||||||
|
|
||||||
interface UserSchema {
|
interface UserSchema {
|
||||||
id: number
|
id: number
|
||||||
username: string
|
username: string
|
||||||
@@ -79,6 +85,12 @@ namespace req {
|
|||||||
mobile: string
|
mobile: string
|
||||||
sms_code: string
|
sms_code: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface UserList {
|
||||||
|
page?: number
|
||||||
|
perpage?: number
|
||||||
|
is_verify: boolean
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
namespace file {
|
namespace file {
|
||||||
|
|||||||
Reference in New Issue
Block a user