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

🎨chore: 使用 oxlint, oxfmt&格式化代码

Browse Source
This commit is contained in:
Timothy Yin
2026-02-08 21:16:25 +08:00
parent 9d35c6a9d8
commit 3a801ba016
78 changed files with 3367 additions and 1468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
pages/aigc/chat/index.vue
View File

@@ -36,7 +36,9 @@ const showSidebar = ref(false)
const user_input = ref('')
const responding = ref(false)
const currentModel = ref<ModelTag>('spark3_5')
const currentAssistant = computed<Assistant | null>(() => getSessionCopyById(currentSessionId.value || '')?.assistant || null)
const currentAssistant = computed<Assistant | null>(
() => getSessionCopyById(currentSessionId.value || '')?.assistant || null
)
const modals = reactive({
modelSelect: false,
assistantSelect: false,
@@ -47,30 +49,47 @@ const modals = reactive({
* 获取指定 ID 的会话数据
* @param chatSessionId
*/
const getSessionCopyById = (chatSessionId: ChatSessionId): ChatSession | undefined => chatSessions.value.find(s => s.id === chatSessionId)
const getSessionCopyById = (
chatSessionId: ChatSessionId
): ChatSession | undefined =>
chatSessions.value.find((s) => s.id === chatSessionId)
/**
* 切换当前会话
* @param chatSessionId 指定会话 ID，不传则切换到列表中第一个会话
*/
const selectCurrentSessionId = (chatSessionId?: ChatSessionId) => {
if (chatSessions.value.length > 0) {
if (chatSessionId) { // 切换到指定 ID
if (chatSessionId) {
// 切换到指定 ID
// 保存当前输入并清空输入框
setChatSessions(chatSessions.value.map(s => s.id === currentSessionId.value ? {
...s,
last_input: user_input.value,
} : s))
setChatSessions(
chatSessions.value.map((s) =>
s.id === currentSessionId.value
? {
...s,
last_input: user_input.value,
}
: s
)
)
user_input.value = ''
// 切换到指定 ID 会话
currentSessionId.value = chatSessionId
// 恢复输入
user_input.value = getSessionCopyById(chatSessionId)?.last_input || ''
// 清除已恢复的输入
setChatSessions(chatSessions.value.map(s => s.id === chatSessionId ? {
...s,
last_input: '',
} : s))
} else { // 切换到第一个会话
setChatSessions(
chatSessions.value.map((s) =>
s.id === chatSessionId
? {
...s,
last_input: '',
}
: s
)
)
} else {
// 切换到第一个会话
currentSessionId.value = chatSessions.value[0].id
}
} else {
@@ -91,23 +110,22 @@ const createSession = (assistant: Assistant | null) => {
// 生成一个新的会话 ID
const sessionId = uuidv4()
// 新会话数据
const newChat = !!assistant ? {
id: sessionId,
subject: '新对话',
messages: [],
create_at: dayjs().unix(),
assistant,
} : {
id: sessionId,
subject: '新对话',
messages: [],
create_at: dayjs().unix(),
}
const newChat = !!assistant
? {
id: sessionId,
subject: '新对话',
messages: [],
create_at: dayjs().unix(),
assistant,
}
: {
id: sessionId,
subject: '新对话',
messages: [],
create_at: dayjs().unix(),
}
// 插入新会话数据
setChatSessions([
newChat,
...chatSessions.value,
])
setChatSessions([newChat, ...chatSessions.value])
// 切换到新的会话
selectCurrentSessionId(sessionId)
// 关闭新建会话屏幕
@@ -123,7 +141,7 @@ const createSession = (assistant: Assistant | null) => {
insetMessage({
id: uuidv4(),
role: 'user',
content: `${ currentAssistant.value?.target }，${ currentAssistant.value?.demand }`,
content: `${currentAssistant.value?.target}，${currentAssistant.value?.demand}`,
preset: true,
})
insetMessage({
@@ -196,13 +214,16 @@ const handleClickSend = (event: any) => {
})
useLLM(trimmedMessages, {
modelTag: currentModel.value,
}).then(reply => {
modifyMessageContent(assistantReplyId, reply)
}).catch(err => {
modifyMessageContent(assistantReplyId, err, true)
}).finally(() => {
responding.value = false
})
.then((reply) => {
modifyMessageContent(assistantReplyId, reply)
})
.catch((err) => {
modifyMessageContent(assistantReplyId, err, true)
})
.finally(() => {
responding.value = false
})
}
const scrollToMessageListBottom = () => {
@@ -215,34 +236,48 @@ const scrollToMessageListBottom = () => {
}
const insetMessage = (message: ChatMessage): ChatMessageId => {
setChatSessions(chatSessions.value.map(s => s.id === currentSessionId.value ? {
...s,
messages: [
...s.messages,
message,
],
} : s))
setChatSessions(
chatSessions.value.map((s) =>
s.id === currentSessionId.value
? {
...s,
messages: [...s.messages, message],
}
: s
)
)
scrollToMessageListBottom()
return message.id
}
const getMessages = () => getSessionCopyById(currentSessionId.value!)?.messages || []
const getMessages = () =>
getSessionCopyById(currentSessionId.value!)?.messages || []
const modifyMessageContent = (
messageId: ChatMessageId,
content: string,
interrupted: boolean = false,
updateTime: boolean = true,
messageId: ChatMessageId,
content: string,
interrupted: boolean = false,
updateTime: boolean = true
) => {
setChatSessions(chatSessions.value.map(s => s.id === currentSessionId.value ? {
...s,
messages: s.messages.map(m => m.id === messageId ? {
...m,
content,
interrupted,
create_at: updateTime ? dayjs().unix() : m.create_at,
} : m),
} : s))
setChatSessions(
chatSessions.value.map((s) =>
s.id === currentSessionId.value
? {
...s,
messages: s.messages.map((m) =>
m.id === messageId
? {
...m,
content,
interrupted,
create_at: updateTime ? dayjs().unix() : m.create_at,
}
: m
),
}
: s
)
)
scrollToMessageListBottom()
}
@@ -255,9 +290,8 @@ onMounted(() => {
<template>
<div class="w-full flex relative">
<div
class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px]
shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
:class="{'translate-x-0': showSidebar}"
class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px] shadow-sidebar border-r border-transparent dark:border-neutral-700 transition-all duration-300 ease-out"
:class="{ 'translate-x-0': showSidebar }"
>
<div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
<!-- list -->
@@ -266,20 +300,31 @@ onMounted(() => {
<ClientOnly>
<TransitionGroup name="chat-item">
<div v-if="chatSessions.length === 0">
<div class="text-center text-neutral-400 dark:text-neutral-500 py-4 flex flex-col items-center gap-2">
<Icon name="i-tabler-messages" class="text-2xl"/>
<div
class="text-center text-neutral-400 dark:text-neutral-500 py-4 flex flex-col items-center gap-2"
>
<Icon
name="i-tabler-messages"
class="text-2xl"
/>
<span>没有会话</span>
</div>
</div>
<ChatItem
v-for="session in chatSessions"
:chat-session="session" :key="session.id"
:active="session.id === currentSessionId"
@click="selectCurrentSessionId(session.id)"
@remove="() => {
chatSessions.splice(chatSessions.findIndex(s => s.id === session.id), 1)
session.id === currentSessionId && selectCurrentSessionId()
}"
v-for="session in chatSessions"
:chat-session="session"
:key="session.id"
:active="session.id === currentSessionId"
@click="selectCurrentSessionId(session.id)"
@remove="
() => {
chatSessions.splice(
chatSessions.findIndex((s) => s.id === session.id),
1
)
session.id === currentSessionId && selectCurrentSessionId()
}
"
/>
</TransitionGroup>
</ClientOnly>
@@ -289,10 +334,10 @@ onMounted(() => {
<div></div>
<div>
<UButton
color="white"
variant="solid"
icon="i-tabler-message-circle-plus"
@click="handleClickCreateSession"
color="white"
variant="solid"
icon="i-tabler-message-circle-plus"
@click="handleClickCreateSession"
>
新建聊天
</UButton>
@@ -300,66 +345,101 @@ onMounted(() => {
</div>
</div>
<div class="h-[calc(100vh-4rem)] flex-1 bg-white dark:bg-neutral-900">
<Transition name="message" mode="out-in">
<div v-if="!loginState.is_logged_in" class="w-full h-full">
<div 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" color="black" variant="solid" size="xs"
@click="modal.open(ModalAuthentication)">
<Transition
name="message"
mode="out-in"
>
<div
v-if="!loginState.is_logged_in"
class="w-full h-full"
>
<div
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"
color="black"
variant="solid"
size="xs"
@click="modal.open(ModalAuthentication)"
>
登录
</UButton>
</div>
</div>
<NewSessionScreen
v-else-if="modals.newSessionScreen || getSessionCopyById(currentSessionId!) === undefined"
:non-back="!getSessionCopyById(currentSessionId!)"
@select="createSession"
@cancel="modals.newSessionScreen = false"
v-else-if="
modals.newSessionScreen ||
getSessionCopyById(currentSessionId!) === undefined
"
:non-back="!getSessionCopyById(currentSessionId!)"
@select="createSession"
@cancel="modals.newSessionScreen = false"
/>
<div
v-else
class="w-full h-full flex flex-col"
v-else
class="w-full h-full flex flex-col"
>
<div
class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2">
class="w-full p-4 bg-neutral-50 dark:bg-neutral-800/50 border-b dark:border-neutral-700/50 flex items-center gap-2"
>
<UButton
class="md:hidden"
color="black"
variant="ghost"
icon="i-tabler-menu-2"
@click="showSidebar = !showSidebar"
>
</UButton>
<h1 class="font-medium">{{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}</h1>
class="md:hidden"
color="black"
variant="ghost"
icon="i-tabler-menu-2"
@click="showSidebar = !showSidebar"
></UButton>
<h1 class="font-medium">
{{ getSessionCopyById(currentSessionId!)?.subject || '新对话' }}
</h1>
</div>
<div ref="messagesWrapperRef" class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
<div
ref="messagesWrapperRef"
class="flex-1 flex flex-col overflow-auto overflow-x-hidden"
>
<div class="flex flex-col gap-8 px-4 py-8">
<TransitionGroup name="message">
<Message
v-for="message in getMessages() || []"
:message="message"
:key="message.id"
v-for="message in getMessages() || []"
:message="message"
:key="message.id"
/>
</TransitionGroup>
</div>
</div>
<ClientOnly>
<div
class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50">
<div class="flex items-center gap-2 overflow-auto overflow-y-hidden">
<button class="chat-option-btn" @click="modals.modelSelect = true">
<Icon name="tabler:box"/>
class="w-full p-4 pt-2 flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-800/50 border-t dark:border-neutral-700/50"
>
<div
class="flex items-center gap-2 overflow-auto overflow-y-hidden"
>
<button
class="chat-option-btn"
@click="modals.modelSelect = true"
>
<Icon name="tabler:box" />
<span class="text-xs">
{{ llmModels.find(m => m.tag === currentModel)?.name.toUpperCase() || '模型' }}
{{
llmModels
.find((m) => m.tag === currentModel)
?.name.toUpperCase() || '模型'
}}
</span>
</button>
<button
v-if="currentAssistant?.tpl_name"
class="chat-option-btn"
v-if="currentAssistant?.tpl_name"
class="chat-option-btn"
>
<Icon name="tabler:robot-face"/>
<Icon name="tabler:robot-face" />
<span class="text-xs">
{{ currentAssistant.tpl_name }}
</span>
@@ -367,22 +447,22 @@ onMounted(() => {
</div>
<div class="relative">
<UTextarea
v-model="user_input"
size="lg"
autoresize
:rows="5"
:maxrows="12"
class="font-sans"
placeholder="Enter 发送, Ctrl + Enter 换行"
@keydown.ctrl.enter="user_input += '\n'"
@keydown.enter.prevent="handleClickSend"
v-model="user_input"
size="lg"
autoresize
:rows="5"
:maxrows="12"
class="font-sans"
placeholder="Enter 发送, Ctrl + Enter 换行"
@keydown.ctrl.enter="user_input += '\n'"
@keydown.enter.prevent="handleClickSend"
/>
<UButton
color="black"
variant="solid"
icon="i-tabler-send-2"
class="absolute bottom-2.5 right-3"
@click.stop="handleClickSend"
color="black"
variant="solid"
icon="i-tabler-send-2"
class="absolute bottom-2.5 right-3"
@click.stop="handleClickSend"
>
发送
</UButton>
@@ -391,42 +471,53 @@ onMounted(() => {
</ClientOnly>
</div>
</Transition>
</div>
<!-- Modals -->
<UModal v-model="modals.modelSelect">
<UCard>
<template #header>
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
<h3
class="text-base font-semibold leading-6 text-gray-900 dark:text-white"
>
选择大语言模型
</h3>
</template>
<div class="grid grid-cols-3 gap-4">
<div
v-for="(llm, index) in llmModels"
:key="index"
@click="currentModel = llm.tag"
class="flex flex-col gap-2 justify-center items-center w-full aspect-[1/1] border-2 rounded-xl cursor-pointer transition duration-150 select-none"
:class="llm.tag === currentModel ? 'border-primary shadow-xl bg-primary text-white' : 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'"
v-for="(llm, index) in llmModels"
:key="index"
@click="currentModel = llm.tag"
class="flex flex-col gap-2 justify-center items-center w-full aspect-[1/1] border-2 rounded-xl cursor-pointer transition duration-150 select-none"
:class="
llm.tag === currentModel
? 'border-primary shadow-xl bg-primary text-white'
: 'dark:border-neutral-800 bg-white dark:bg-black shadow-card'
"
>
<Icon v-if="llm?.icon" :name="llm.icon" class="text-4xl opacity-80"/>
<Icon
v-if="llm?.icon"
:name="llm.icon"
class="text-4xl opacity-80"
/>
<div class="flex flex-col gap-0.5 items-center">
<h1 class="font-bold drop-shadow opacity-90">{{ llm.name || 'unknown' }}</h1>
<h1 class="font-bold drop-shadow opacity-90">
{{ llm.name || 'unknown' }}
</h1>
<p class="text-xs opacity-60">{{ llm.description }}</p>
</div>
</div>
</div>
<template #footer>
<div class="flex justify-end items-center" @click="modals.modelSelect = false">
<UButton>
确定
</UButton>
<div
class="flex justify-end items-center"
@click="modals.modelSelect = false"
>
<UButton>确定</UButton>
</div>
</template>
</UCard>
</UModal>
</div>
</template>
@@ -460,4 +551,4 @@ onMounted(() => {
@apply bg-white border border-neutral-300 shadow-sm hover:shadow-card;
@apply dark:bg-neutral-800 dark:border-neutral-600;
}
</style>
</style>

341
pages/aigc/draw/index.vue
View File

@@ -28,7 +28,11 @@ const showSidebar = ref(false)
const generating = ref(false)
const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
const handle_stick_mousedown = (
e: MouseEvent,
min: number = 240,
max: number = 400
) => {
const handler = leftHandler.value
if (handler) {
const startX = e.clientX
@@ -38,16 +42,24 @@ const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number =
if (newWidth < min || newWidth > max) {
newWidth = Math.min(Math.max(newWidth, min), max)
}
handler.parentElement!.style.width = `${ newWidth }px`
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]')
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]')
leftHandler.value?.lastElementChild?.classList.add(
'bg-indigo-300',
'dark:bg-indigo-700',
'w-[3px]'
)
window.addEventListener('mousemove', handle_mousemove)
window.addEventListener('mouseup', handle_mouseup)
}
@@ -216,16 +228,19 @@ const defaultFormState = reactive({
prompt: '',
negative_prompt: '',
resolution: '1024:768',
styles: defaultStyles.find(item => item.value === 401),
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)
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) {
@@ -253,147 +268,271 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
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) {
>(
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: res.msg || '未知错误',
description: err.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
})
}).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">
<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>
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>
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">
<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="提示词">
<OptionBlock
comment="Prompts"
icon="i-tabler-article"
label="提示词"
>
<UFormGroup name="prompt">
<UTextarea v-model="defaultFormState.prompt" :rows="2" autoresize
placeholder="请输入提示词，每个提示词之间用英文逗号隔开" resize/>
<UTextarea
v-model="defaultFormState.prompt"
:rows="2"
autoresize
placeholder="请输入提示词，每个提示词之间用英文逗号隔开"
resize
/>
</UFormGroup>
</OptionBlock>
<OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
<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/>
<UTextarea
v-model="defaultFormState.negative_prompt"
:rows="2"
autoresize
placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
resize
/>
</UFormGroup>
</OptionBlock>
<OptionBlock icon="i-tabler-library-photo" label="参考图片">
<OptionBlock
icon="i-tabler-library-photo"
label="参考图片"
>
<UFormGroup name="input_image">
<ReferenceFigureSelector
:value="defaultFormState.file"
text="选择参考图片"
text-on-select="已选择参考图" @update="file => {defaultFormState.file = file}"/>
text-on-select="已选择参考图"
@update="
(file) => {
defaultFormState.file = file
}
"
/>
</UFormGroup>
</OptionBlock>
<OptionBlock icon="i-tabler-photo-hexagon" label="图片风格">
<OptionBlock
icon="i-tabler-photo-hexagon"
label="图片风格"
>
<UFormGroup name="styles">
<USelectMenu v-model="defaultFormState.styles"
:options="defaultFormState.file ? img2imgStyles : defaultStyles"></USelectMenu>
<USelectMenu
v-model="defaultFormState.styles"
:options="
defaultFormState.file ? img2imgStyles : defaultStyles
"
></USelectMenu>
</UFormGroup>
</OptionBlock>
<OptionBlock icon="i-tabler-article-off" label="图片比例">
<OptionBlock
icon="i-tabler-article-off"
label="图片比例"
>
<UFormGroup name="resolution">
<RatioSelector v-model="defaultFormState.resolution" :ratios="defaultRatios"/>
<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">
<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>
生成即代表您同意
<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)">
<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"/>
<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}">
<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}">
<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
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
class="font-bold"
color="red"
size="xs"
@click="
() => {
history.text2img.splice(k, 1)
del(result.fid)
close()
}
"
>
仍然删除
</UButton>
</div>
@@ -402,15 +541,17 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
</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
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>
<style scoped></style>

4
pages/aigc/navigation.vue
View File

@@ -195,7 +195,9 @@ const open = (url?: string | URL, target?: string, features?: string) => {
</script>
<template>
<div class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0 overflow-y-scroll">
<div
class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0 overflow-y-scroll"
>
<div class="container max-w-[1280px] mx-auto py-4 space-y-12">
<div
class="pattern w-full p-10 flex flex-col justify-center gap-3 items-center rounded-lg shadow-sm border border-gray-200 dark:border-neutral-700"

10
pages/generation.vue
View File

@@ -82,10 +82,16 @@ onMounted(() => {
<LoginNeededContent
content-class="h-[calc(100vh-4rem)] flex-1 overflow-y-auto bg-white dark:bg-neutral-900"
>
<Transition name="subpage" mode="out-in">
<Transition
name="subpage"
mode="out-in"
>
<div>
<Suspense>
<NuxtPage :page-key="route.fullPath" keepalive />
<NuxtPage
:page-key="route.fullPath"
keepalive
/>
</Suspense>
</div>
</Transition>

56
pages/generation/admin/digital-human-train.vue
View File

@@ -106,13 +106,13 @@ const isProcessing = ref(false)
// 处理训练素材：录入系统数字人并分配给用户
const handleProcessTrain = (item: DigitalHumanTrainItem) => {
currentTrainItem.value = item
// 预填充表单数据
processFormState.name = item.dh_name
processFormState.model_id = undefined
processFormState.description = `基于${item.organization}提交的训练素材创建`
processFormState.type = 2
isProcessModalOpen.value = true
}
@@ -147,9 +147,11 @@ const handleAvatarUpload = (files: FileList) => {
}
// 提交录入表单
const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>) => {
const onProcessSubmit = async (
event: FormSubmitEvent<typeof processFormState>
) => {
if (!currentTrainItem.value) return
if (!avatarFile.value) {
toast.add({
title: '请上传数字人预览图',
@@ -187,7 +189,10 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
avatar: avatarUrl,
})
if (createSystemResult.ret !== 200 || !createSystemResult.data.digital_human_id) {
if (
createSystemResult.ret !== 200 ||
!createSystemResult.data.digital_human_id
) {
throw new Error(createSystemResult.msg || '创建系统数字人失败')
}
@@ -216,7 +221,9 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
toast.add({
title: '录入成功',
description: `数字人"${event.data.name}"已成功录入并分配给用户 ${currentTrainItem.value.user_id}${
createUserResult.data.failed ? `，失败 ${createUserResult.data.failed} 个` : ''
createUserResult.data.failed
? `，失败 ${createUserResult.data.failed} 个`
: ''
}`,
color: 'green',
icon: 'i-tabler-check',
@@ -238,7 +245,8 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
await refreshTrainList()
} catch (error) {
console.error('录入数字人失败:', error)
const errorMessage = error instanceof Error ? error.message : '录入失败，请重试'
const errorMessage =
error instanceof Error ? error.message : '录入失败，请重试'
toast.add({
title: '录入失败',
description: errorMessage,
@@ -275,7 +283,8 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
}
} catch (error) {
console.error('删除定制记录失败:', error)
const errorMessage = error instanceof Error ? error.message : '删除失败，请重试'
const errorMessage =
error instanceof Error ? error.message : '删除失败，请重试'
toast.add({
title: '删除失败',
description: errorMessage,
@@ -294,38 +303,42 @@ const formatTime = (timestamp: number) => {
const previewVideo = (videoUrl: string, title: string) => {
// 创建一个简单的视频预览弹窗
const videoModal = document.createElement('div')
videoModal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'
videoModal.className =
'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'
const videoContainer = document.createElement('div')
videoContainer.className = 'bg-white dark:bg-gray-800 rounded-lg p-4 max-w-4xl max-h-[80vh] overflow-auto'
videoContainer.className =
'bg-white dark:bg-gray-800 rounded-lg p-4 max-w-4xl max-h-[80vh] overflow-auto'
const titleElement = document.createElement('h3')
titleElement.textContent = title
titleElement.className = 'text-lg font-semibold mb-4 text-gray-900 dark:text-white'
titleElement.className =
'text-lg font-semibold mb-4 text-gray-900 dark:text-white'
const video = document.createElement('video')
video.src = videoUrl
video.controls = true
video.className = 'w-full max-h-[60vh]'
const closeButton = document.createElement('button')
closeButton.textContent = '关闭'
closeButton.className = 'mt-4 px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600'
closeButton.className =
'mt-4 px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600'
closeButton.onclick = () => {
document.body.removeChild(videoModal)
}
videoContainer.appendChild(titleElement)
videoContainer.appendChild(video)
videoContainer.appendChild(closeButton)
videoModal.appendChild(videoContainer)
videoModal.onclick = (e) => {
if (e.target === videoModal) {
document.body.removeChild(videoModal)
}
}
document.body.appendChild(videoModal)
}
</script>
@@ -472,7 +485,8 @@ const previewVideo = (videoUrl: string, title: string) => {
<div>
<h3 class="text-lg font-semibold">录入数字人</h3>
<p class="text-sm text-gray-500 mt-1">
为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户 {{ currentTrainItem?.user_id }}
为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
{{ currentTrainItem?.user_id }}
</p>
</div>
</template>
@@ -571,4 +585,4 @@ const previewVideo = (videoUrl: string, title: string) => {
</div>
</template>
<style scoped></style>
<style scoped></style>

31
pages/generation/admin/index.vue
View File

@@ -81,23 +81,34 @@ const navigateToPage = (path: string) => {
class="w-8 h-8"
:class="{
'text-blue-600 dark:text-blue-400': page.color === 'blue',
'text-amber-600 dark:text-amber-400': page.color === 'amber',
'text-green-600 dark:text-green-400': page.color === 'green',
'text-amber-600 dark:text-amber-400':
page.color === 'amber',
'text-green-600 dark:text-green-400':
page.color === 'green',
}"
/>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
<h3
class="text-lg font-semibold text-gray-900 dark:text-white mb-2"
>
{{ page.title }}
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
<p
class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed"
>
{{ page.description }}
</p>
<div class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors">
<div
class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300 transition-colors"
>
<span>进入管理</span>
<UIcon name="i-heroicons-arrow-right" class="ml-1 w-4 h-4" />
<UIcon
name="i-heroicons-arrow-right"
class="ml-1 w-4 h-4"
/>
</div>
</div>
</UCard>
@@ -107,4 +118,4 @@ const navigateToPage = (path: string) => {
</div>
</template>
<style scoped></style>
<style scoped></style>

376
pages/generation/admin/materials.vue
View File

@@ -147,7 +147,13 @@ const isUploadingEndingVideo = ref(false)
const isUploadingEndingCover = ref(false)
// 处理片头片尾请求
const handleProcessTitles = (item: TitlesTemplate & { user_id?: number; to_user_id?: number; remark?: string }) => {
const handleProcessTitles = (
item: TitlesTemplate & {
user_id?: number
to_user_id?: number
remark?: string
}
) => {
currentTitlesItem.value = item
// 预填充表单数据
@@ -157,7 +163,7 @@ const handleProcessTitles = (item: TitlesTemplate & { user_id?: number; to_user_
processFormState.opening_file = item.opening_file || ''
processFormState.ending_url = item.ending_url || ''
processFormState.ending_file = item.ending_file || ''
openingVideoFile.value = null
openingCoverFile.value = null
endingVideoFile.value = null
@@ -196,10 +202,10 @@ const handleOpeningVideoUpload = async (files: FileList) => {
try {
isUploadingOpeningVideo.value = true
openingVideoFile.value = file
const uploadUrl = await useFileGo(file, 'material')
processFormState.opening_file = uploadUrl
toast.add({
title: '片头视频上传成功',
color: 'green',
@@ -248,10 +254,10 @@ const handleOpeningCoverUpload = async (files: FileList) => {
try {
isUploadingOpeningCover.value = true
openingCoverFile.value = file
const uploadUrl = await useFileGo(file, 'material')
processFormState.opening_url = uploadUrl
toast.add({
title: '片头封面上传成功',
color: 'green',
@@ -300,10 +306,10 @@ const handleEndingVideoUpload = async (files: FileList) => {
try {
isUploadingEndingVideo.value = true
endingVideoFile.value = file
const uploadUrl = await useFileGo(file, 'material')
processFormState.ending_file = uploadUrl
toast.add({
title: '片尾视频上传成功',
color: 'green',
@@ -352,10 +358,10 @@ const handleEndingCoverUpload = async (files: FileList) => {
try {
isUploadingEndingCover.value = true
endingCoverFile.value = file
const uploadUrl = await useFileGo(file, 'material')
processFormState.ending_url = uploadUrl
toast.add({
title: '片尾封面上传成功',
color: 'green',
@@ -375,7 +381,9 @@ const handleEndingCoverUpload = async (files: FileList) => {
}
// 提交处理表单
const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>) => {
const onProcessSubmit = async (
event: FormSubmitEvent<typeof processFormState>
) => {
if (!currentTitlesItem.value) return
if (isProcessing.value) return
@@ -399,7 +407,10 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
>('App.User_UserTitles.updateStatus', {
token: loginState.token!,
user_id: loginState.user.id,
to_user_id: currentTitlesItem.value.to_user_id || currentTitlesItem.value.user_id || 0,
to_user_id:
currentTitlesItem.value.to_user_id ||
currentTitlesItem.value.user_id ||
0,
user_title_id: currentTitlesItem.value.id,
process_status: 1, // 标记为已完成
opening_url: event.data.opening_url,
@@ -439,7 +450,8 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
}
} catch (error) {
console.error('处理片头片尾失败:', error)
const errorMessage = error instanceof Error ? error.message : '处理失败，请重试'
const errorMessage =
error instanceof Error ? error.message : '处理失败，请重试'
toast.add({
title: '处理失败',
description: errorMessage,
@@ -452,12 +464,14 @@ const onProcessSubmit = async (event: FormSubmitEvent<typeof processFormState>)
}
// 删除请求
const handleDeleteTitles = async (item: TitlesTemplate & { user_id?: number; to_user_id?: number }) => {
const handleDeleteTitles = async (
item: TitlesTemplate & { user_id?: number; to_user_id?: number }
) => {
try {
const result = await useFetchWrapped<
{
{
to_user_id: number
user_title_id: number
user_title_id: number
} & AuthedRequest,
BaseResponse<{ code: 0 | 1 }>
>('App.User_UserTitles.DeleteConn', {
@@ -480,7 +494,8 @@ const handleDeleteTitles = async (item: TitlesTemplate & { user_id?: number; to_
}
} catch (error) {
console.error('删除片头片尾请求失败:', error)
const errorMessage = error instanceof Error ? error.message : '删除失败，请重试'
const errorMessage =
error instanceof Error ? error.message : '删除失败，请重试'
toast.add({
title: '删除失败',
description: errorMessage,
@@ -575,12 +590,22 @@ const handleCreateOpeningVideoUpload = async (files: FileList) => {
if (!file) return
if (!file.type.startsWith('video/')) {
toast.add({ title: '文件格式错误', description: '请上传视频文件', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '文件格式错误',
description: '请上传视频文件',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
return
}
if (file.size > 100 * 1024 * 1024) {
toast.add({ title: '文件过大', description: '视频文件大小不能超过100MB', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '文件过大',
description: '视频文件大小不能超过100MB',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
return
}
@@ -589,10 +614,19 @@ const handleCreateOpeningVideoUpload = async (files: FileList) => {
createOpeningVideoFile.value = file
const uploadUrl = await useFileGo(file, 'material')
createFormState.opening_file = uploadUrl
toast.add({ title: '片头视频上传成功', color: 'green', icon: 'i-tabler-check' })
toast.add({
title: '片头视频上传成功',
color: 'green',
icon: 'i-tabler-check',
})
} catch (error) {
console.error('片头视频上传失败:', error)
toast.add({ title: '上传失败', description: error instanceof Error ? error.message : '请重试', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '上传失败',
description: error instanceof Error ? error.message : '请重试',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
} finally {
isUploadingCreateOpeningVideo.value = false
}
@@ -603,12 +637,22 @@ const handleCreateOpeningCoverUpload = async (files: FileList) => {
if (!file) return
if (!file.type.startsWith('image/')) {
toast.add({ title: '文件格式错误', description: '请上传图片文件', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '文件格式错误',
description: '请上传图片文件',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
return
}
if (file.size > 10 * 1024 * 1024) {
toast.add({ title: '文件过大', description: '图片文件大小不能超过10MB', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '文件过大',
description: '图片文件大小不能超过10MB',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
return
}
@@ -617,10 +661,19 @@ const handleCreateOpeningCoverUpload = async (files: FileList) => {
createOpeningCoverFile.value = file
const uploadUrl = await useFileGo(file, 'material')
createFormState.opening_url = uploadUrl
toast.add({ title: '片头封面上传成功', color: 'green', icon: 'i-tabler-check' })
toast.add({
title: '片头封面上传成功',
color: 'green',
icon: 'i-tabler-check',
})
} catch (error) {
console.error('片头封面上传失败:', error)
toast.add({ title: '上传失败', description: error instanceof Error ? error.message : '请重试', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '上传失败',
description: error instanceof Error ? error.message : '请重试',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
} finally {
isUploadingCreateOpeningCover.value = false
}
@@ -631,12 +684,22 @@ const handleCreateEndingVideoUpload = async (files: FileList) => {
if (!file) return
if (!file.type.startsWith('video/')) {
toast.add({ title: '文件格式错误', description: '请上传视频文件', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '文件格式错误',
description: '请上传视频文件',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
return
}
if (file.size > 100 * 1024 * 1024) {
toast.add({ title: '文件过大', description: '视频文件大小不能超过100MB', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '文件过大',
description: '视频文件大小不能超过100MB',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
return
}
@@ -645,10 +708,19 @@ const handleCreateEndingVideoUpload = async (files: FileList) => {
createEndingVideoFile.value = file
const uploadUrl = await useFileGo(file, 'material')
createFormState.ending_file = uploadUrl
toast.add({ title: '片尾视频上传成功', color: 'green', icon: 'i-tabler-check' })
toast.add({
title: '片尾视频上传成功',
color: 'green',
icon: 'i-tabler-check',
})
} catch (error) {
console.error('片尾视频上传失败:', error)
toast.add({ title: '上传失败', description: error instanceof Error ? error.message : '请重试', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '上传失败',
description: error instanceof Error ? error.message : '请重试',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
} finally {
isUploadingCreateEndingVideo.value = false
}
@@ -659,12 +731,22 @@ const handleCreateEndingCoverUpload = async (files: FileList) => {
if (!file) return
if (!file.type.startsWith('image/')) {
toast.add({ title: '文件格式错误', description: '请上传图片文件', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '文件格式错误',
description: '请上传图片文件',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
return
}
if (file.size > 10 * 1024 * 1024) {
toast.add({ title: '文件过大', description: '图片文件大小不能超过10MB', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '文件过大',
description: '图片文件大小不能超过10MB',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
return
}
@@ -673,17 +755,28 @@ const handleCreateEndingCoverUpload = async (files: FileList) => {
createEndingCoverFile.value = file
const uploadUrl = await useFileGo(file, 'material')
createFormState.ending_url = uploadUrl
toast.add({ title: '片尾封面上传成功', color: 'green', icon: 'i-tabler-check' })
toast.add({
title: '片尾封面上传成功',
color: 'green',
icon: 'i-tabler-check',
})
} catch (error) {
console.error('片尾封面上传失败:', error)
toast.add({ title: '上传失败', description: error instanceof Error ? error.message : '请重试', color: 'red', icon: 'i-tabler-alert-triangle' })
toast.add({
title: '上传失败',
description: error instanceof Error ? error.message : '请重试',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
} finally {
isUploadingCreateEndingCover.value = false
}
}
// 提交创建表单
const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) => {
const onCreateSubmit = async (
event: FormSubmitEvent<typeof createFormState>
) => {
if (isCreating.value) return
try {
@@ -738,7 +831,8 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
}
} catch (error) {
console.error('创建片头片尾模板失败:', error)
const errorMessage = error instanceof Error ? error.message : '创建失败，请重试'
const errorMessage =
error instanceof Error ? error.message : '创建失败，请重试'
toast.add({
title: '创建失败',
description: errorMessage,
@@ -797,14 +891,24 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
:variant="statusFilter === 0 ? 'solid' : 'ghost'"
label="待处理"
icon="i-tabler-clock"
@click="statusFilter = 0; pagination.page = 1"
@click="
() => {
statusFilter = 0
pagination.page = 1
}
"
/>
<UButton
:color="statusFilter === 1 ? 'primary' : 'gray'"
:variant="statusFilter === 1 ? 'solid' : 'ghost'"
label="已完成"
icon="i-tabler-check"
@click="statusFilter = 1; pagination.page = 1"
@click="
() => {
statusFilter = 1
pagination.page = 1
}
"
/>
</UButtonGroup>
<UBadge
@@ -835,16 +939,27 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
</template>
<template #info-data="{ row }">
<div v-if="row.info" class="flex items-center gap-2">
<div
v-if="row.info"
class="flex items-center gap-2"
>
<img
v-if="row.info.opening_url"
:src="row.info.opening_url"
:alt="row.info.title"
class="w-16 h-9 object-cover rounded cursor-pointer hover:opacity-80 transition-opacity"
@click="previewVideo(row.info.opening_file, `原始模板: ${row.info.title}`)"
@click="
previewVideo(
row.info.opening_file,
`原始模板: ${row.info.title}`
)
"
/>
<div class="flex flex-col min-w-0">
<span class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate" :title="row.info.title">
<span
class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate"
:title="row.info.title"
>
{{ row.info.title }}
</span>
<span class="text-2xs text-gray-500 dark:text-gray-400">
@@ -852,13 +967,24 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
</span>
</div>
</div>
<span v-else class="text-sm text-gray-400">-</span>
<span
v-else
class="text-sm text-gray-400"
>
-
</span>
</template>
<template #preview-data="{ row }">
<div class="flex items-center gap-3" v-if="row.opening_file || row.ending_file">
<div
class="flex items-center gap-3"
v-if="row.opening_file || row.ending_file"
>
<!-- 片头 -->
<div v-if="row.opening_file" class="flex flex-col items-center gap-0.5">
<div
v-if="row.opening_file"
class="flex flex-col items-center gap-0.5"
>
<img
v-if="row.opening_url"
:src="row.opening_url"
@@ -871,12 +997,20 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
class="w-14 h-8 bg-blue-100 dark:bg-blue-900/30 rounded flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
@click="previewVideo(row.opening_file, '制作片头预览')"
>
<UIcon name="i-tabler-player-play" class="text-blue-500" />
<UIcon
name="i-tabler-player-play"
class="text-blue-500"
/>
</div>
<span class="text-2xs text-blue-600 dark:text-blue-400">片头</span>
<span class="text-2xs text-blue-600 dark:text-blue-400">
片头
</span>
</div>
<!-- 片尾 -->
<div v-if="row.ending_file" class="flex flex-col items-center gap-0.5">
<div
v-if="row.ending_file"
class="flex flex-col items-center gap-0.5"
>
<img
v-if="row.ending_url"
:src="row.ending_url"
@@ -889,12 +1023,22 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
class="w-14 h-8 bg-green-100 dark:bg-green-900/30 rounded flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
@click="previewVideo(row.ending_file, '制作片尾预览')"
>
<UIcon name="i-tabler-player-play" class="text-green-500" />
<UIcon
name="i-tabler-player-play"
class="text-green-500"
/>
</div>
<span class="text-2xs text-green-600 dark:text-green-400">片尾</span>
<span class="text-2xs text-green-600 dark:text-green-400">
片尾
</span>
</div>
</div>
<span v-else class="text-sm text-gray-400">未上传</span>
<span
v-else
class="text-sm text-gray-400"
>
未上传
</span>
</template>
<template #actions-data="{ row }">
@@ -964,7 +1108,9 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
<div>
<h3 class="text-lg font-semibold">处理片头片尾请求</h3>
<p class="text-sm text-gray-500 mt-1">
为用户 {{ currentTitlesItem?.to_user_id || currentTitlesItem?.user_id }} 上传制作好的片头片尾视频
为用户
{{ currentTitlesItem?.to_user_id || currentTitlesItem?.user_id }}
上传制作好的片头片尾视频
</p>
</div>
</template>
@@ -1014,10 +1160,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ isUploadingOpeningVideo ? '上传中...' : (openingVideoFile ? openingVideoFile.name : '点击或拖拽上传片头视频') }}
{{
isUploadingOpeningVideo
? '上传中...'
: openingVideoFile
? openingVideoFile.name
: '点击或拖拽上传片头视频'
}}
</span>
</div>
<p v-if="processFormState.opening_file" class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto">
<p
v-if="processFormState.opening_file"
class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
>
✓ {{ processFormState.opening_file }}
</p>
</div>
@@ -1048,10 +1203,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ isUploadingOpeningCover ? '上传中...' : (openingCoverFile ? openingCoverFile.name : '点击或拖拽上传片头封面') }}
{{
isUploadingOpeningCover
? '上传中...'
: openingCoverFile
? openingCoverFile.name
: '点击或拖拽上传片头封面'
}}
</span>
</div>
<p v-if="processFormState.opening_url" class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto">
<p
v-if="processFormState.opening_url"
class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
>
✓ {{ processFormState.opening_url }}
</p>
</div>
@@ -1084,10 +1248,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ isUploadingEndingVideo ? '上传中...' : (endingVideoFile ? endingVideoFile.name : '点击或拖拽上传片尾视频') }}
{{
isUploadingEndingVideo
? '上传中...'
: endingVideoFile
? endingVideoFile.name
: '点击或拖拽上传片尾视频'
}}
</span>
</div>
<p v-if="processFormState.ending_file" class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto">
<p
v-if="processFormState.ending_file"
class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
>
✓ {{ processFormState.ending_file }}
</p>
</div>
@@ -1118,10 +1291,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ isUploadingEndingCover ? '上传中...' : (endingCoverFile ? endingCoverFile.name : '点击或拖拽上传片尾封面') }}
{{
isUploadingEndingCover
? '上传中...'
: endingCoverFile
? endingCoverFile.name
: '点击或拖拽上传片尾封面'
}}
</span>
</div>
<p v-if="processFormState.ending_url" class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto">
<p
v-if="processFormState.ending_url"
class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
>
✓ {{ processFormState.ending_url }}
</p>
</div>
@@ -1142,7 +1324,13 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
type="submit"
color="primary"
:loading="isProcessing"
:disabled="isProcessing || isUploadingOpeningVideo || isUploadingOpeningCover || isUploadingEndingVideo || isUploadingEndingCover"
:disabled="
isProcessing ||
isUploadingOpeningVideo ||
isUploadingOpeningCover ||
isUploadingEndingVideo ||
isUploadingEndingCover
"
>
{{ isProcessing ? '提交中...' : '提交并分配' }}
</UButton>
@@ -1255,7 +1443,10 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
name="title"
required
>
<UInput v-model="createFormState.title" placeholder="请输入模板标题" />
<UInput
v-model="createFormState.title"
placeholder="请输入模板标题"
/>
</UFormGroup>
<UFormGroup
@@ -1263,7 +1454,10 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
name="description"
required
>
<UTextarea v-model="createFormState.description" placeholder="请输入模板描述" />
<UTextarea
v-model="createFormState.description"
placeholder="请输入模板描述"
/>
</UFormGroup>
<UDivider label="片头" />
@@ -1291,10 +1485,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ isUploadingCreateOpeningVideo ? '上传中...' : (createOpeningVideoFile ? createOpeningVideoFile.name : '点击或拖拽上传片头视频') }}
{{
isUploadingCreateOpeningVideo
? '上传中...'
: createOpeningVideoFile
? createOpeningVideoFile.name
: '点击或拖拽上传片头视频'
}}
</span>
</div>
<p v-if="createFormState.opening_file" class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto">
<p
v-if="createFormState.opening_file"
class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
>
✓ {{ createFormState.opening_file }}
</p>
</div>
@@ -1325,10 +1528,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ isUploadingCreateOpeningCover ? '上传中...' : (createOpeningCoverFile ? createOpeningCoverFile.name : '点击或拖拽上传片头封面') }}
{{
isUploadingCreateOpeningCover
? '上传中...'
: createOpeningCoverFile
? createOpeningCoverFile.name
: '点击或拖拽上传片头封面'
}}
</span>
</div>
<p v-if="createFormState.opening_url" class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto">
<p
v-if="createFormState.opening_url"
class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
>
✓ {{ createFormState.opening_url }}
</p>
</div>
@@ -1361,10 +1573,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ isUploadingCreateEndingVideo ? '上传中...' : (createEndingVideoFile ? createEndingVideoFile.name : '点击或拖拽上传片尾视频') }}
{{
isUploadingCreateEndingVideo
? '上传中...'
: createEndingVideoFile
? createEndingVideoFile.name
: '点击或拖拽上传片尾视频'
}}
</span>
</div>
<p v-if="createFormState.ending_file" class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto">
<p
v-if="createFormState.ending_file"
class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
>
✓ {{ createFormState.ending_file }}
</p>
</div>
@@ -1395,10 +1616,19 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ isUploadingCreateEndingCover ? '上传中...' : (createEndingCoverFile ? createEndingCoverFile.name : '点击或拖拽上传片尾封面') }}
{{
isUploadingCreateEndingCover
? '上传中...'
: createEndingCoverFile
? createEndingCoverFile.name
: '点击或拖拽上传片尾封面'
}}
</span>
</div>
<p v-if="createFormState.ending_url" class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto">
<p
v-if="createFormState.ending_url"
class="mt-1 text-xs text-green-600 truncate max-w-xs mx-auto"
>
✓ {{ createFormState.ending_url }}
</p>
</div>
@@ -1422,7 +1652,13 @@ const onCreateSubmit = async (event: FormSubmitEvent<typeof createFormState>) =>
form="createForm"
color="primary"
:loading="isCreating"
:disabled="isCreating || isUploadingCreateOpeningVideo || isUploadingCreateOpeningCover || isUploadingCreateEndingVideo || isUploadingCreateEndingCover"
:disabled="
isCreating ||
isUploadingCreateOpeningVideo ||
isUploadingCreateOpeningCover ||
isUploadingCreateEndingVideo ||
isUploadingCreateEndingCover
"
>
{{ isCreating ? '创建中...' : '创建模板' }}
</UButton>

33
pages/generation/admin/users.vue
View File

@@ -596,8 +596,8 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
</UBadge>
<UBadge
v-else-if="
getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
"
getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
"
color="red"
variant="subtle"
size="xs"
@@ -662,7 +662,9 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
开通
</UButton>
<UButton
v-else-if="getBalanceByTag(row.tag)!.expire_time < dayjs().unix()"
v-else-if="
getBalanceByTag(row.tag)!.expire_time < dayjs().unix()
"
color="teal"
icon="tabler:clock-plus"
size="xs"
@@ -684,15 +686,17 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
size="xs"
variant="soft"
@click="
() => {
isActivateBalance = false
userBalanceEditing = true
userBalanceState.request_type = row.tag
userBalanceState.expire_time =
getBalanceByTag(row.tag)!.expire_time * 1000
userBalanceState.remain_count = getBalanceByTag(row.tag)!.remain_count
}
"
() => {
isActivateBalance = false
userBalanceEditing = true
userBalanceState.request_type = row.tag
userBalanceState.expire_time =
getBalanceByTag(row.tag)!.expire_time * 1000
userBalanceState.remain_count = getBalanceByTag(
row.tag
)!.remain_count
}
"
>
更新
</UButton>
@@ -867,7 +871,10 @@ const udpateBalance = (tag: ServiceTag, isActivate: boolean = false) => {
default-tab="system"
multiple
@close="isDigitalSelectorOpen = false"
@select="digitalHumans => onDigitalHumansSelected(digitalHumans as DigitalHumanItem[])"
@select="
(digitalHumans) =>
onDigitalHumansSelected(digitalHumans as DigitalHumanItem[])
"
/>
</USlideover>
</LoginNeededContent>

123
pages/generation/course.vue
View File

@@ -11,22 +11,21 @@ const loginState = useLoginState()
const deletePending = ref(false)
const page = ref(1)
const {
data: courseList,
refresh: refreshCourseList,
} = useAsyncData(
() => useFetchWrapped<
req.gen.CourseGenList & AuthedRequest,
BaseResponse<PagedData<resp.gen.CourseGenItem>>
>('App.Digital_Convert.GetList', {
token: loginState.token!,
user_id: loginState.user.id,
to_user_id: loginState.user.id,
page: page.value,
perpage: 15,
}), {
const { data: courseList, refresh: refreshCourseList } = useAsyncData(
() =>
useFetchWrapped<
req.gen.CourseGenList & AuthedRequest,
BaseResponse<PagedData<resp.gen.CourseGenItem>>
>('App.Digital_Convert.GetList', {
token: loginState.token!,
user_id: loginState.user.id,
to_user_id: loginState.user.id,
page: page.value,
perpage: 15,
}),
{
watch: [page],
},
}
)
const onCreateCourseClick = () => {
@@ -48,31 +47,33 @@ const onCourseDelete = (task_id: string) => {
user_id: loginState.user.id,
to_user_id: loginState.user.id,
task_id,
}).then(res => {
if (res.ret === 200) {
toast.add({
title: '删除成功',
description: '已删除任务记录',
color: 'green',
icon: 'i-tabler-check',
})
} else {
toast.add({
title: '删除失败',
description: res.msg || '未知错误',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
}
}).finally(() => {
deletePending.value = false
refreshCourseList()
})
.then((res) => {
if (res.ret === 200) {
toast.add({
title: '删除成功',
description: '已删除任务记录',
color: 'green',
icon: 'i-tabler-check',
})
} else {
toast.add({
title: '删除失败',
description: res.msg || '未知错误',
color: 'red',
icon: 'i-tabler-alert-triangle',
})
}
})
.finally(() => {
deletePending.value = false
refreshCourseList()
})
}
const beforeLeave = (el: any) => {
el.style.width = `${ el.offsetWidth }px`
el.style.height = `${ el.offsetHeight }px`
el.style.width = `${el.offsetWidth}px`
el.style.height = `${el.offsetHeight}px`
}
const leave = (el: any, done: Function) => {
@@ -91,7 +92,10 @@ onMounted(() => {
<template>
<div>
<div class="p-4 pb-0">
<BubbleTitle subtitle="VIDEOS" title="我的微课视频">
<BubbleTitle
subtitle="VIDEOS"
title="我的微课视频"
>
<template #action>
<UButton
:trailing="false"
@@ -100,30 +104,38 @@ onMounted(() => {
label="新建微课"
size="md"
variant="solid"
@click="() => {
if (!loginState.is_logged_in) {
modal.open(ModalAuthentication)
return
@click="
() => {
if (!loginState.is_logged_in) {
modal.open(ModalAuthentication)
return
}
onCreateCourseClick()
}
onCreateCourseClick()
}"
"
/>
</template>
</BubbleTitle>
<GradientDivider/>
<GradientDivider />
</div>
<Transition name="loading-screen">
<div
v-if="courseList?.data.items.length === 0"
class="w-full py-20 flex flex-col justify-center items-center gap-2"
>
<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>
<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>
<div v-else class="p-4">
<div class="relative grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5 gap-4">
<div
v-else
class="p-4"
>
<div
class="relative grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5 gap-4"
>
<TransitionGroup
name="card"
@beforeLeave="beforeLeave"
@@ -138,13 +150,16 @@ onMounted(() => {
</TransitionGroup>
</div>
<div class="flex justify-end mt-4">
<UPagination v-model="page" :max="9" :page-count="16" :total="courseList?.data.total || 0"/>
<UPagination
v-model="page"
:max="9"
:page-count="16"
:total="courseList?.data.total || 0"
/>
</div>
</div>
</Transition>
</div>
</template>
<style scoped>
</style>
<style scoped></style>

74
pages/generation/green-screen.vue
View File

@@ -15,25 +15,24 @@ const pageCount = ref(15)
const searchInput = ref('')
const debounceSearch = refDebounced(searchInput, 1000)
watch(debounceSearch, () => page.value = 1)
watch(debounceSearch, () => (page.value = 1))
const {
data: videoList,
refresh: refreshVideoList,
} = useAsyncData(
() => useFetchWrapped<
req.gen.GBVideoList & AuthedRequest,
BaseResponse<PagedData<GBVideoItem>>
>('App.Digital_VideoTask.GetList', {
token: loginState.token!,
user_id: loginState.user.id,
to_user_id: loginState.user.id,
page: page.value,
perpage: pageCount.value,
title: debounceSearch.value,
}), {
const { data: videoList, refresh: refreshVideoList } = useAsyncData(
() =>
useFetchWrapped<
req.gen.GBVideoList & AuthedRequest,
BaseResponse<PagedData<GBVideoItem>>
>('App.Digital_VideoTask.GetList', {
token: loginState.token!,
user_id: loginState.user.id,
to_user_id: loginState.user.id,
page: page.value,
perpage: pageCount.value,
title: debounceSearch.value,
}),
{
watch: [page, pageCount, debounceSearch],
},
}
)
const onCreateCourseGreenClick = () => {
@@ -53,7 +52,7 @@ const onCourseGreenDelete = (task: GBVideoItem) => {
token: loginState.token!,
user_id: loginState.user.id,
task_id: task.task_id,
}).then(res => {
}).then((res) => {
if (res.data.code === 1) {
refreshVideoList()
toast.add({
@@ -74,8 +73,8 @@ const onCourseGreenDelete = (task: GBVideoItem) => {
}
const beforeLeave = (el: any) => {
el.style.width = `${ el.offsetWidth }px`
el.style.height = `${ el.offsetHeight }px`
el.style.width = `${el.offsetWidth}px`
el.style.height = `${el.offsetHeight}px`
}
const leave = (el: any, done: Function) => {
@@ -126,7 +125,11 @@ onMounted(() => {
<div class="p-4 pb-0">
<BubbleTitle
:subtitle="!debounceSearch ? 'GB VIDEOS' : 'SEARCH...'"
:title="!debounceSearch ? '我的绿幕视频' : `标题搜索：${debounceSearch.toLocaleUpperCase()}`"
:title="
!debounceSearch
? '我的绿幕视频'
: `标题搜索：${debounceSearch.toLocaleUpperCase()}`
"
>
<template #action>
<UButtonGroup size="md">
@@ -163,7 +166,7 @@ onMounted(() => {
/>
</template>
</BubbleTitle>
<GradientDivider/>
<GradientDivider />
</div>
<Transition name="loading-screen">
@@ -171,14 +174,17 @@ onMounted(() => {
v-if="videoList?.data.items.length === 0"
class="w-full py-20 flex flex-col justify-center items-center gap-2"
>
<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>
<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>
<div v-else>
<div class="p-4">
<div class="relative grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5 gap-4">
<div
class="relative grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5 gap-4"
>
<TransitionGroup
name="card"
@beforeLeave="beforeLeave"
@@ -188,20 +194,22 @@ onMounted(() => {
v-for="(v, i) in videoList?.data.items"
:key="v.task_id"
:video="v"
@delete="v => onCourseGreenDelete(v)"
@delete="(v) => onCourseGreenDelete(v)"
/>
</TransitionGroup>
</div>
<div class="flex justify-end mt-4">
<UPagination v-model="page" :max="9" :page-count="pageCount" :total="videoList?.data.total || 0"/>
<UPagination
v-model="page"
:max="9"
:page-count="pageCount"
:total="videoList?.data.total || 0"
/>
</div>
</div>
</div>
</Transition>
</div>
</template>
<style scoped>
</style>
<style scoped></style>

60
pages/generation/materials.vue
View File

@@ -23,21 +23,21 @@ const {
status: systemTitlesTemplateStatus,
refresh: refreshSystemTitlesTemplate,
} = useAsyncData(
'systemTitlesTemplate',
() =>
useFetchWrapped<
PagedDataRequest & AuthedRequest,
BaseResponse<PagedData<TitlesTemplate>>
>('App.Digital_Titles.GetList', {
token: loginState.token!,
user_id: loginState.user.id,
page: systemPagination.page,
perpage: systemPagination.pageSize,
}),
{
watch: [systemPagination],
}
)
'systemTitlesTemplate',
() =>
useFetchWrapped<
PagedDataRequest & AuthedRequest,
BaseResponse<PagedData<TitlesTemplate>>
>('App.Digital_Titles.GetList', {
token: loginState.token!,
user_id: loginState.user.id,
page: systemPagination.page,
perpage: systemPagination.pageSize,
}),
{
watch: [systemPagination],
}
)
const {
data: userTitlesTemplate,
@@ -88,7 +88,7 @@ const userTitlesState = reactive({
title_id: 0,
title: '',
description: '',
remark: ''
remark: '',
})
const onUserTitlesRequest = (titles: TitlesTemplate) => {
@@ -215,18 +215,18 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
title="片头片尾模版"
subtitle="Materials"
>
<template #action>
<UButton
color="amber"
icon="tabler:plus"
variant="soft"
v-if="loginState.user.auth_code === 2"
@click="isCreateSystemTitlesSlideActive = true"
>
创建模板
</UButton>
</template>
</BubbleTitle>
<template #action>
<UButton
color="amber"
icon="tabler:plus"
variant="soft"
v-if="loginState.user.auth_code === 2"
@click="isCreateSystemTitlesSlideActive = true"
>
创建模板
</UButton>
</template>
</BubbleTitle>
<GradientDivider />
</div>
<div class="p-4">
@@ -248,7 +248,9 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
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>
<p class="text-sm text-neutral-500 dark:text-neutral-400">
暂时没有可用模板
</p>
</div>
<div
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"

12
pages/index.vue
View File

@@ -1,13 +1,7 @@
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<template>
<div>
Homepage is still WIP
</div>
<div>Homepage is still WIP</div>
</template>
<style scoped>
</style>
<style scoped></style>

2
pages/user/authenticate.vue
View File

@@ -4,7 +4,7 @@ import { object, string, type InferType } from 'yup'
definePageMeta({
layout: 'authenticate',
preventLoginCheck: true
preventLoginCheck: true,
})
useSeoMeta({