feat: 用户管理和数字人授权
This commit is contained in:
@@ -12,6 +12,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
bubbleColor: {
|
||||
type: String,
|
||||
default: 'primary-500',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -20,10 +24,10 @@ const props = defineProps({
|
||||
<div>
|
||||
<h1
|
||||
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>
|
||||
|
||||
<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 }}
|
||||
</h1>
|
||||
</div>
|
||||
@@ -34,7 +38,8 @@ const props = defineProps({
|
||||
|
||||
<div
|
||||
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>
|
||||
</template>
|
||||
|
||||
@@ -4,13 +4,26 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
lineGradientFrom: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
lineGradientTo: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="bg-gradient-to-r from-primary-500/50 to-primary-300/50 rounded-full my-4"
|
||||
:class="{'w-full h-[1px]': !vertical, 'w-[1px] h-full': vertical}"
|
||||
:class="{
|
||||
'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>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -8,6 +8,10 @@ defineProps({
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
needAdmin: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const modal = useModal()
|
||||
@@ -16,19 +20,24 @@ const modal = useModal()
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<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"/>
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
|
||||
<UButton
|
||||
class="mt-2 font-bold"
|
||||
color="black"
|
||||
variant="solid"
|
||||
size="xs"
|
||||
@click="modal.open(ModalAuthentication)"
|
||||
class="mt-2 font-bold"
|
||||
color="black"
|
||||
size="xs"
|
||||
variant="solid"
|
||||
@click="modal.open(ModalAuthentication)"
|
||||
>
|
||||
登录
|
||||
</UButton>
|
||||
</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>
|
||||
<slot/>
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,14 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabledDigitalHumanIds: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
defaultTab: {
|
||||
type: String as PropType<'user' | 'system'>,
|
||||
default: 'user',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits({
|
||||
@@ -107,6 +115,20 @@ const {
|
||||
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>
|
||||
|
||||
<template>
|
||||
@@ -132,37 +154,49 @@ const {
|
||||
</template>
|
||||
|
||||
<UTabs
|
||||
:items="[
|
||||
...tabItems,
|
||||
loginState.user.auth_code === 2 ? {
|
||||
key: 'system',
|
||||
label: '系统数字人',
|
||||
icon: 'i-tabler-user-star',
|
||||
} : null
|
||||
].filter(Boolean)"
|
||||
@change="i => tabIndex = i"
|
||||
v-model="tabIndex"
|
||||
:items="tabItems"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<div class="w-full grid grid-cols-3 sm:grid-cols-5 gap-4">
|
||||
<div
|
||||
v-for="(d, i) in item.key === 'user' ? userDigitalList?.data.items : systemDigitalList?.data.items"
|
||||
:key="`${item.key === 'user' ? 'user' : 'system'}-digital-${d.model_id}`"
|
||||
:class="{'border-primary shadow-md': selectedDigitalHumans.includes(d)}"
|
||||
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"
|
||||
@click="handleSelectClick(d)"
|
||||
:class="{
|
||||
'border-primary shadow-md': selectedDigitalHumans.includes(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
|
||||
: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"/>
|
||||
<UIcon v-if="selectedDigitalHumans.includes(d)" class="absolute top-1 right-1 text-lg text-primary"
|
||||
name="i-tabler-check"/>
|
||||
<UIcon
|
||||
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 class="w-full flex flex-col gap-1 px-2 pb-2">
|
||||
<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-xs text-neutral-300 font-medium">ID:{{ d.digital_human_id || d.id }}</span>
|
||||
<span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1">
|
||||
{{ 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>
|
||||
|
||||
@@ -134,10 +134,11 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
|
||||
<UFormGroup label="数字人" name="digital_human_id" required>
|
||||
<div
|
||||
: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"
|
||||
>
|
||||
<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"/>
|
||||
<NuxtImg v-else :src="selected_digital_human?.avatar"/>
|
||||
</div>
|
||||
@@ -153,9 +154,10 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
|
||||
</UFormGroup>
|
||||
<UFormGroup label="视频片头片尾" name="opening">
|
||||
<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"/>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<USelectMenu
|
||||
v-model="createCourseState.gen_server"
|
||||
|
||||
@@ -117,10 +117,11 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
|
||||
<UFormGroup label="数字人" name="digital_human_id" required>
|
||||
<div
|
||||
: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"
|
||||
>
|
||||
<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"/>
|
||||
<NuxtImg v-else :src="selected_digital_human?.avatar"/>
|
||||
</div>
|
||||
@@ -147,7 +148,7 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
|
||||
|
||||
<UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
|
||||
<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">
|
||||
<URange
|
||||
v-model="createCourseState.speed"
|
||||
|
||||
@@ -38,13 +38,18 @@ const activeClass = computed(() => {
|
||||
v-if="!hide"
|
||||
:class="{
|
||||
[activeClass]: active,
|
||||
'hover:bg-neutral-200': !active,
|
||||
'hover:bg-neutral-200 dark:hover:bg-neutral-800': !active,
|
||||
}"
|
||||
: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"
|
||||
>
|
||||
<Icon :name="icon" class="text-xl inline"/>
|
||||
<h1 class="text-[14px] font-medium">{{ label }}</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon :name="icon" class="text-xl inline"/>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -17,18 +17,20 @@ const isDark = computed({
|
||||
})
|
||||
|
||||
const links = [
|
||||
{
|
||||
label: '分身制课',
|
||||
icon: 'tabler:books',
|
||||
to: '/generation',
|
||||
},
|
||||
{
|
||||
label: '聊天',
|
||||
icon: 'tabler:message-chatbot',
|
||||
to: '/aigc/chat',
|
||||
},
|
||||
{
|
||||
label: '绘画',
|
||||
icon: 'i-tabler-brush',
|
||||
to: '/',
|
||||
}, {
|
||||
label: '聊天',
|
||||
icon: 'i-tabler-message-2',
|
||||
to: '/aigc/chat',
|
||||
}, {
|
||||
label: 'PPT',
|
||||
icon: 'i-tabler-file-type-ppt',
|
||||
to: '/aigc/generation',
|
||||
to: '/aigc/draw',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -21,6 +21,15 @@ export default defineNuxtConfig({
|
||||
'nuxt-driver.js',
|
||||
],
|
||||
|
||||
routeRules: {
|
||||
'/': {
|
||||
redirect: {
|
||||
to: '/generation',
|
||||
statusCode: 302,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
icon: {
|
||||
provider: 'iconify',
|
||||
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: '智能生成',
|
||||
})
|
||||
|
||||
const navList: {
|
||||
const navList = ref<{
|
||||
label: string
|
||||
icon: string
|
||||
to: string
|
||||
admin?: boolean
|
||||
}[] = [
|
||||
}[]>([
|
||||
{
|
||||
label: '微课视频生成',
|
||||
icon: 'tabler:presentation-analytics',
|
||||
to: '/aigc/generation/course',
|
||||
to: '/generation/course',
|
||||
},
|
||||
{
|
||||
label: '绿幕视频生成',
|
||||
icon: 'i-tabler-video',
|
||||
to: '/aigc/generation/green-screen',
|
||||
to: '/generation/green-screen',
|
||||
},
|
||||
{
|
||||
label: '数字人管理',
|
||||
icon: 'i-tabler-video',
|
||||
to: '/aigc/generation/green-screen',
|
||||
label: '用户管理',
|
||||
icon: 'tabler:users',
|
||||
to: '/generation/admin/users',
|
||||
admin: true,
|
||||
},
|
||||
]
|
||||
])
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loginState = useLoginState()
|
||||
|
||||
onMounted(() => {
|
||||
if (route.fullPath === '/aigc/generation') {
|
||||
router.push('/aigc/generation/course')
|
||||
if (route.fullPath === '/generation') {
|
||||
router.replace('/generation/course')
|
||||
}
|
||||
})
|
||||
</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">
|
||||
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="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>
|
||||
Homepage is still WIP
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -61,5 +61,11 @@ export default <Partial<Config>>{
|
||||
{
|
||||
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[]
|
||||
}
|
||||
|
||||
interface PagedDataRequest {
|
||||
page?: number
|
||||
perpage?: number
|
||||
to_user_id?: number
|
||||
}
|
||||
|
||||
interface UserSchema {
|
||||
id: number
|
||||
username: string
|
||||
@@ -79,6 +85,12 @@ namespace req {
|
||||
mobile: string
|
||||
sms_code: string
|
||||
}
|
||||
|
||||
interface UserList {
|
||||
page?: number
|
||||
perpage?: number
|
||||
is_verify: boolean
|
||||
}
|
||||
}
|
||||
|
||||
namespace file {
|
||||
|
||||
Reference in New Issue
Block a user