refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面
This commit is contained in:
@@ -1,554 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import ChatItem from '~/components/aigc/chat/ChatItem.vue'
|
||||
import Message from '~/components/aigc/chat/Message.vue'
|
||||
import {
|
||||
type Assistant,
|
||||
type ChatMessage,
|
||||
type ChatMessageId,
|
||||
type ChatSession,
|
||||
type ChatSessionId,
|
||||
llmModels,
|
||||
type ModelTag,
|
||||
} from '~/typings/llm'
|
||||
import { useHistory } from '~/composables/useHistory'
|
||||
import { uuidv4 } from '@uniiem/uuid'
|
||||
import { useLLM } from '~/composables/useLLM'
|
||||
import { trimObject } from '@uniiem/object-trim'
|
||||
import ModalAuthentication from '~/components/ModalAuthentication.vue'
|
||||
import NewSessionScreen from '~/components/aigc/chat/NewSessionScreen.vue'
|
||||
|
||||
useSeoMeta({
|
||||
title: '聊天',
|
||||
})
|
||||
|
||||
const dayjs = useDayjs()
|
||||
const toast = useToast()
|
||||
const modal = useModal()
|
||||
const loginState = useLoginState()
|
||||
const historyStore = useHistory()
|
||||
const { chatSessions } = storeToRefs(historyStore)
|
||||
const { setChatSessions } = historyStore
|
||||
|
||||
const currentSessionId = ref<ChatSessionId | null>(null)
|
||||
const messagesWrapperRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
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 modals = reactive({
|
||||
modelSelect: false,
|
||||
assistantSelect: false,
|
||||
newSessionScreen: false,
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取指定 ID 的会话数据
|
||||
* @param 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
|
||||
// 保存当前输入并清空输入框
|
||||
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 {
|
||||
// 切换到第一个会话
|
||||
currentSessionId.value = chatSessions.value[0].id
|
||||
}
|
||||
} else {
|
||||
handleClickCreateSession()
|
||||
}
|
||||
nextTick(() => {
|
||||
showSidebar.value = false
|
||||
modals.newSessionScreen = false
|
||||
scrollToMessageListBottom()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建新会话处理函数
|
||||
* @param assistant 指定助手，不传或空值则不指定助手
|
||||
*/
|
||||
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(),
|
||||
}
|
||||
// 插入新会话数据
|
||||
setChatSessions([newChat, ...chatSessions.value])
|
||||
// 切换到新的会话
|
||||
selectCurrentSessionId(sessionId)
|
||||
// 关闭新建会话屏幕
|
||||
modals.newSessionScreen = false
|
||||
nextTick(() => {
|
||||
if (!!currentAssistant.value) {
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'system',
|
||||
content: currentAssistant.value?.role || '',
|
||||
preset: true,
|
||||
})
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'user',
|
||||
content: `${currentAssistant.value?.target}，${currentAssistant.value?.demand}`,
|
||||
preset: true,
|
||||
})
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'assistant',
|
||||
content: currentAssistant.value?.input_tpl || '',
|
||||
preset: true,
|
||||
})
|
||||
} else {
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'assistant',
|
||||
content: '你好，有什么可以帮助你的吗？',
|
||||
preset: true,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理点击新建会话按钮事件
|
||||
*/
|
||||
const handleClickCreateSession = () => {
|
||||
showSidebar.value = false
|
||||
modals.newSessionScreen = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理发送消息操作
|
||||
* @param event
|
||||
*/
|
||||
const handleClickSend = (event: any) => {
|
||||
if (!loginState.is_logged_in) {
|
||||
modal.open(ModalAuthentication)
|
||||
return
|
||||
}
|
||||
if (event.ctrlKey) {
|
||||
return
|
||||
}
|
||||
if (responding.value) return
|
||||
if (!user_input.value) return
|
||||
if (!currentSessionId.value) {
|
||||
toast.add({
|
||||
title: '发送失败',
|
||||
description: '请先选择一个会话',
|
||||
color: 'red',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
}
|
||||
// 插入用户消息
|
||||
insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'user',
|
||||
content: user_input.value,
|
||||
create_at: dayjs().unix(),
|
||||
})
|
||||
user_input.value = ''
|
||||
// 进入响应中状态
|
||||
responding.value = true
|
||||
// 插入空助手消息(加载状态)
|
||||
const assistantReplyId = insetMessage({
|
||||
id: uuidv4(),
|
||||
role: 'assistant',
|
||||
content: '',
|
||||
})
|
||||
// 请求模型回复
|
||||
const trimmedMessages = trimObject(getMessages(), 2000, {
|
||||
keys: ['content'],
|
||||
})
|
||||
useLLM(trimmedMessages, {
|
||||
modelTag: currentModel.value,
|
||||
})
|
||||
.then((reply) => {
|
||||
modifyMessageContent(assistantReplyId, reply)
|
||||
})
|
||||
.catch((err) => {
|
||||
modifyMessageContent(assistantReplyId, err, true)
|
||||
})
|
||||
.finally(() => {
|
||||
responding.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const scrollToMessageListBottom = () => {
|
||||
nextTick(() => {
|
||||
messagesWrapperRef.value?.scrollTo({
|
||||
top: messagesWrapperRef.value.scrollHeight,
|
||||
behavior: 'smooth',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const insetMessage = (message: ChatMessage): ChatMessageId => {
|
||||
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 modifyMessageContent = (
|
||||
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
|
||||
)
|
||||
)
|
||||
scrollToMessageListBottom()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 切换到第一个会话, 没有会话会自动创建
|
||||
selectCurrentSessionId()
|
||||
})
|
||||
</script>
|
||||
|
||||
<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 }"
|
||||
>
|
||||
<div class="flex-1 flex flex-col overflow-auto overflow-x-hidden">
|
||||
<!-- list -->
|
||||
<div class="flex flex-col gap-3 relative">
|
||||
<!-- ClientOnly avoids hydrate exception -->
|
||||
<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"
|
||||
/>
|
||||
<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()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 flex justify-between items-center">
|
||||
<div></div>
|
||||
<div>
|
||||
<UButton
|
||||
color="white"
|
||||
variant="solid"
|
||||
icon="i-tabler-message-circle-plus"
|
||||
@click="handleClickCreateSession"
|
||||
>
|
||||
新建聊天
|
||||
</UButton>
|
||||
</div>
|
||||
</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)"
|
||||
>
|
||||
登录
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
<NewSessionScreen
|
||||
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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
</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" />
|
||||
<span class="text-xs">
|
||||
{{
|
||||
llmModels
|
||||
.find((m) => m.tag === currentModel)
|
||||
?.name.toUpperCase() || '模型'
|
||||
}}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="currentAssistant?.tpl_name"
|
||||
class="chat-option-btn"
|
||||
>
|
||||
<Icon name="tabler:robot-face" />
|
||||
<span class="text-xs">
|
||||
{{ currentAssistant.tpl_name }}
|
||||
</span>
|
||||
</button>
|
||||
</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"
|
||||
/>
|
||||
<UButton
|
||||
color="black"
|
||||
variant="solid"
|
||||
icon="i-tabler-send-2"
|
||||
class="absolute bottom-2.5 right-3"
|
||||
@click.stop="handleClickSend"
|
||||
>
|
||||
发送
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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'
|
||||
"
|
||||
>
|
||||
<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-sm 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>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--suppress CssUnusedSymbol -->
|
||||
<style scoped>
|
||||
.message-enter-active {
|
||||
@apply transition duration-300;
|
||||
}
|
||||
|
||||
.message-enter-from {
|
||||
@apply translate-y-4 opacity-0;
|
||||
}
|
||||
|
||||
.chat-item-move,
|
||||
.chat-item-enter-active,
|
||||
.chat-item-leave-active {
|
||||
@apply transition-all duration-300;
|
||||
}
|
||||
|
||||
.chat-item-enter-from,
|
||||
.chat-item-leave-to {
|
||||
@apply opacity-0 scale-90;
|
||||
}
|
||||
|
||||
.chat-item-leave-active {
|
||||
@apply absolute inset-x-0;
|
||||
}
|
||||
|
||||
.chat-option-btn {
|
||||
@apply text-lg px-2 py-1.5 flex gap-1 justify-center items-center rounded-lg;
|
||||
@apply bg-white border border-neutral-300 shadow-xs hover:shadow-card;
|
||||
@apply dark:bg-neutral-800 dark:border-neutral-600;
|
||||
}
|
||||
</style>
|
||||
@@ -1,557 +0,0 @@
|
||||
<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-px 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>
|
||||
@@ -100,6 +100,8 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@reference '@/assets/css/main.css';
|
||||
|
||||
.subpage-enter-active,
|
||||
.subpage-leave-active {
|
||||
@apply transition-all duration-300;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { object, string, number } from 'yup'
|
||||
import type { FormSubmitEvent } from '#ui/types'
|
||||
import type { FormSubmitEvent, TableColumn } from '#ui/types'
|
||||
|
||||
useHead({
|
||||
title: '数字人定制管理 | 管理员',
|
||||
@@ -40,38 +40,38 @@ const {
|
||||
const trainList = computed(() => trainListResp.value?.data.items || [])
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
const columns: TableColumn<DigitalHumanTrainItem>[] = [
|
||||
{
|
||||
key: 'id',
|
||||
label: 'ID',
|
||||
accessorKey: 'id',
|
||||
header: 'ID',
|
||||
},
|
||||
{
|
||||
key: 'dh_name',
|
||||
label: '数字人名称',
|
||||
accessorKey: 'dh_name',
|
||||
header: '数字人名称',
|
||||
},
|
||||
{
|
||||
key: 'organization',
|
||||
label: '单位名称',
|
||||
accessorKey: 'organization',
|
||||
header: '单位名称',
|
||||
},
|
||||
{
|
||||
key: 'user_id',
|
||||
label: '用户ID',
|
||||
accessorKey: 'user_id',
|
||||
header: '用户ID',
|
||||
},
|
||||
{
|
||||
key: 'create_time',
|
||||
label: '创建时间',
|
||||
accessorKey: 'create_time',
|
||||
header: '创建时间',
|
||||
},
|
||||
{
|
||||
key: 'video_url',
|
||||
label: '数字人视频',
|
||||
accessorKey: 'video_url',
|
||||
header: '数字人视频',
|
||||
},
|
||||
{
|
||||
key: 'auth_video_url',
|
||||
label: '授权视频',
|
||||
accessorKey: 'auth_video_url',
|
||||
header: '授权视频',
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: '操作',
|
||||
accessorKey: 'actions',
|
||||
header: '操作',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -126,7 +126,7 @@ const handleAvatarUpload = (files: FileList) => {
|
||||
toast.add({
|
||||
title: '文件格式错误',
|
||||
description: '请上传图片文件',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
return
|
||||
@@ -137,7 +137,7 @@ const handleAvatarUpload = (files: FileList) => {
|
||||
toast.add({
|
||||
title: '文件过大',
|
||||
description: '图片文件大小不能超过10MB',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
return
|
||||
@@ -155,7 +155,7 @@ const onProcessSubmit = async (
|
||||
if (!avatarFile.value) {
|
||||
toast.add({
|
||||
title: '请上传数字人预览图',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
return
|
||||
@@ -225,7 +225,7 @@ const onProcessSubmit = async (
|
||||
? `，失败 ${createUserResult.data.failed} 个`
|
||||
: ''
|
||||
}`,
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
|
||||
@@ -250,7 +250,7 @@ const onProcessSubmit = async (
|
||||
toast.add({
|
||||
title: '录入失败',
|
||||
description: errorMessage,
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
} finally {
|
||||
@@ -274,7 +274,7 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '定制记录已删除',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
await refreshTrainList()
|
||||
@@ -288,7 +288,7 @@ const handleDeleteTrain = async (item: DigitalHumanTrainItem) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: errorMessage,
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -304,7 +304,7 @@ 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'
|
||||
'fixed inset-0 z-50 flex items-center justify-center bg-black/50'
|
||||
|
||||
const videoContainer = document.createElement('div')
|
||||
videoContainer.className =
|
||||
@@ -323,7 +323,7 @@ const previewVideo = (videoUrl: string, title: string) => {
|
||||
const closeButton = document.createElement('button')
|
||||
closeButton.textContent = '关闭'
|
||||
closeButton.className =
|
||||
'mt-4 px-4 py-2 bg-gray-500 text-white rounded-sm hover:bg-gray-600'
|
||||
'mt-4 px-4 py-2 bg-gray-500 text-white rounded-xs hover:bg-gray-600'
|
||||
closeButton.onclick = () => {
|
||||
document.body.removeChild(videoModal)
|
||||
}
|
||||
@@ -352,11 +352,11 @@ const previewVideo = (videoUrl: string, title: string) => {
|
||||
>
|
||||
<template #action>
|
||||
<UButton
|
||||
color="gray"
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
icon="i-tabler-refresh"
|
||||
label="刷新"
|
||||
@click="refreshTrainList"
|
||||
@click="() => refreshTrainList()"
|
||||
/>
|
||||
</template>
|
||||
</BubbleTitle>
|
||||
@@ -374,77 +374,80 @@ const previewVideo = (videoUrl: string, title: string) => {
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<UTable
|
||||
:rows="trainList"
|
||||
:data="trainList"
|
||||
:columns="columns"
|
||||
:loading="trainListStatus === 'pending'"
|
||||
:progress="{ color: 'amber', animation: 'carousel' }"
|
||||
class="border dark:border-neutral-800 rounded-md"
|
||||
loading-color="warning"
|
||||
loading-animation="carousel"
|
||||
class="rounded-md border dark:border-neutral-800"
|
||||
>
|
||||
<template #create_time-data="{ row }">
|
||||
<span class="text-sm">{{ formatTime(row.create_time) }}</span>
|
||||
<template #create_time-cell="{ row }">
|
||||
<span class="text-sm">
|
||||
{{ formatTime(row.original.create_time) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #video_url-data="{ row }">
|
||||
<template #video_url-cell="{ row }">
|
||||
<div class="flex gap-2">
|
||||
<UButton
|
||||
color="blue"
|
||||
color="info"
|
||||
variant="soft"
|
||||
size="xs"
|
||||
icon="i-tabler-download"
|
||||
:to="row.video_url"
|
||||
:to="row.original.video_url"
|
||||
target="_blank"
|
||||
label="下载"
|
||||
/>
|
||||
<UButton
|
||||
color="green"
|
||||
color="success"
|
||||
variant="soft"
|
||||
size="xs"
|
||||
icon="i-tabler-eye"
|
||||
label="预览"
|
||||
@click="previewVideo(row.video_url, '数字人视频')"
|
||||
@click="previewVideo(row.original.video_url, '数字人视频')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #auth_video_url-data="{ row }">
|
||||
<template #auth_video_url-cell="{ row }">
|
||||
<div class="flex gap-2">
|
||||
<UButton
|
||||
color="blue"
|
||||
color="info"
|
||||
variant="soft"
|
||||
size="xs"
|
||||
icon="i-tabler-download"
|
||||
:to="row.auth_video_url"
|
||||
:to="row.original.auth_video_url"
|
||||
target="_blank"
|
||||
label="下载"
|
||||
/>
|
||||
<UButton
|
||||
color="green"
|
||||
color="success"
|
||||
variant="soft"
|
||||
size="xs"
|
||||
icon="i-tabler-eye"
|
||||
label="预览"
|
||||
@click="previewVideo(row.auth_video_url, '授权视频')"
|
||||
@click="previewVideo(row.original.auth_video_url, '授权视频')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions-data="{ row }">
|
||||
<template #actions-cell="{ row }">
|
||||
<div class="flex gap-2">
|
||||
<UButton
|
||||
color="amber"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
size="xs"
|
||||
icon="i-tabler-user-cog"
|
||||
label="录入"
|
||||
@click="handleProcessTrain(row)"
|
||||
@click="handleProcessTrain(row.original)"
|
||||
/>
|
||||
<UButton
|
||||
color="red"
|
||||
color="error"
|
||||
variant="soft"
|
||||
size="xs"
|
||||
icon="i-tabler-trash"
|
||||
label="删除"
|
||||
@click="handleDeleteTrain(row)"
|
||||
@click="handleDeleteTrain(row.original)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -452,7 +455,7 @@ const previewVideo = (videoUrl: string, title: string) => {
|
||||
|
||||
<div class="flex justify-end">
|
||||
<UPagination
|
||||
v-model="pagination.page"
|
||||
v-model:page="pagination.page"
|
||||
:max="9"
|
||||
:page-count="pagination.pageSize"
|
||||
:total="trainListResp?.data.total || 0"
|
||||
@@ -462,125 +465,127 @@ const previewVideo = (videoUrl: string, title: string) => {
|
||||
</div>
|
||||
|
||||
<!-- 录入数字人弹窗 -->
|
||||
<USlideover v-model="isProcessModalOpen">
|
||||
<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="i-tabler-x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isProcessModalOpen = false"
|
||||
/>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">录入数字人</h3>
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
|
||||
{{ currentTrainItem?.user_id }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="processFormSchema"
|
||||
:state="processFormState"
|
||||
@submit="onProcessSubmit"
|
||||
<USlideover v-model:open="isProcessModalOpen">
|
||||
<template #content>
|
||||
<UCard
|
||||
:ui="{
|
||||
body: 'flex-1',
|
||||
}"
|
||||
class="flex flex-1 flex-col"
|
||||
>
|
||||
<UFormGroup
|
||||
label="名称"
|
||||
name="name"
|
||||
>
|
||||
<UInput v-model="processFormState.name" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="数字人ID"
|
||||
name="model_id"
|
||||
description="请输入五位数字人ID"
|
||||
>
|
||||
<UInput
|
||||
v-model="processFormState.model_id"
|
||||
type="number"
|
||||
placeholder="请输入数字人ID"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="描述"
|
||||
name="description"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="processFormState.description"
|
||||
rows="3"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="供应商类型"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="processFormState.type"
|
||||
value-attribute="value"
|
||||
:options="sourceTypeList"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="数字人预览图"
|
||||
required
|
||||
>
|
||||
<UniFileDnD
|
||||
accept="image/png,image/jpeg,image/jpg"
|
||||
@change="handleAvatarUpload"
|
||||
>
|
||||
<template #default>
|
||||
<div class="text-center">
|
||||
<UIcon
|
||||
name="i-heroicons-photo"
|
||||
class="mx-auto h-12 w-12 text-gray-400"
|
||||
/>
|
||||
<div class="mt-2">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ avatarFile ? avatarFile.name : '点击或拖拽上传图片' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UniFileDnD>
|
||||
</UFormGroup>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-4">
|
||||
<template #header>
|
||||
<UButton
|
||||
type="button"
|
||||
color="gray"
|
||||
variant="soft"
|
||||
class="absolute end-5 top-5 z-10 flex"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
icon="i-tabler-x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
@click="isProcessModalOpen = false"
|
||||
/>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">录入数字人</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
为"{{ currentTrainItem?.dh_name }}"创建系统数字人并分配给用户
|
||||
{{ currentTrainItem?.user_id }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="processFormSchema"
|
||||
:state="processFormState"
|
||||
@submit="onProcessSubmit"
|
||||
>
|
||||
<UFormField
|
||||
label="名称"
|
||||
name="name"
|
||||
>
|
||||
取消
|
||||
</UButton>
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="isProcessing"
|
||||
:disabled="isProcessing"
|
||||
<UInput v-model="processFormState.name" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="数字人ID"
|
||||
name="model_id"
|
||||
description="请输入五位数字人ID"
|
||||
>
|
||||
{{ isProcessing ? '录入中...' : '录入并分配' }}
|
||||
</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
</UCard>
|
||||
<UInput
|
||||
v-model="processFormState.model_id"
|
||||
type="number"
|
||||
placeholder="请输入数字人ID"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="描述"
|
||||
name="description"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="processFormState.description"
|
||||
:rows="3"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="供应商类型"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="processFormState.type"
|
||||
value-attribute="value"
|
||||
:options="sourceTypeList"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="数字人预览图"
|
||||
required
|
||||
>
|
||||
<UniFileDnD
|
||||
accept="image/png,image/jpeg,image/jpg"
|
||||
@change="handleAvatarUpload"
|
||||
>
|
||||
<template #default>
|
||||
<div class="text-center">
|
||||
<UIcon
|
||||
name="i-heroicons-photo"
|
||||
class="mx-auto h-12 w-12 text-gray-400"
|
||||
/>
|
||||
<div class="mt-2">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||
{{
|
||||
avatarFile ? avatarFile.name : '点击或拖拽上传图片'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UniFileDnD>
|
||||
</UFormField>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-4">
|
||||
<UButton
|
||||
type="button"
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
@click="isProcessModalOpen = false"
|
||||
>
|
||||
取消
|
||||
</UButton>
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="isProcessing"
|
||||
:disabled="isProcessing"
|
||||
>
|
||||
{{ isProcessing ? '录入中...' : '录入并分配' }}
|
||||
</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
</UCard>
|
||||
</template>
|
||||
</USlideover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -54,7 +54,7 @@ const navigateToPage = (path: string) => {
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
v-for="page in adminPages"
|
||||
:key="page.path"
|
||||
@@ -62,14 +62,11 @@ const navigateToPage = (path: string) => {
|
||||
@click="navigateToPage(page.path)"
|
||||
>
|
||||
<UCard
|
||||
class="hover:shadow-lg transition-all duration-200 group-hover:scale-105"
|
||||
:ui="{
|
||||
ring: 'ring-1 ring-gray-200 dark:ring-gray-700 group-hover:ring-gray-300 dark:group-hover:ring-gray-600',
|
||||
}"
|
||||
class="transition-all duration-200 hover:shadow-lg group-hover:scale-105"
|
||||
>
|
||||
<div class="flex flex-col items-center text-center p-6">
|
||||
<div class="flex flex-col items-center p-6 text-center">
|
||||
<div
|
||||
class="w-16 h-16 rounded-full flex items-center justify-center mb-4 transition-colors"
|
||||
class="mb-4 flex h-16 w-16 items-center justify-center rounded-full transition-colors"
|
||||
:class="{
|
||||
'bg-blue-100 dark:bg-blue-900/30': page.color === 'blue',
|
||||
'bg-amber-100 dark:bg-amber-900/30': page.color === 'amber',
|
||||
@@ -78,7 +75,7 @@ const navigateToPage = (path: string) => {
|
||||
>
|
||||
<UIcon
|
||||
:name="page.icon"
|
||||
class="w-8 h-8"
|
||||
class="h-8 w-8"
|
||||
:class="{
|
||||
'text-blue-600 dark:text-blue-400': page.color === 'blue',
|
||||
'text-amber-600 dark:text-amber-400':
|
||||
@@ -90,24 +87,24 @@ const navigateToPage = (path: string) => {
|
||||
</div>
|
||||
|
||||
<h3
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-2"
|
||||
class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
|
||||
>
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
|
||||
<p
|
||||
class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed"
|
||||
class="text-sm leading-relaxed text-gray-600 dark:text-gray-400"
|
||||
>
|
||||
{{ 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"
|
||||
class="mt-4 flex items-center text-sm text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300"
|
||||
>
|
||||
<span>进入管理</span>
|
||||
<UIcon
|
||||
name="i-heroicons-arrow-right"
|
||||
class="ml-1 w-4 h-4"
|
||||
class="ml-1 h-4 w-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { number, object, string, type InferType } from 'yup'
|
||||
import type { FormSubmitEvent } from '#ui/types'
|
||||
import type { FormSubmitEvent, TableColumn } from '#ui/types'
|
||||
|
||||
const toast = useToast()
|
||||
const loginState = useLoginState()
|
||||
@@ -94,7 +94,7 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '数字人已删除',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
refreshSystemAvatarList()
|
||||
@@ -102,7 +102,7 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -111,43 +111,43 @@ const onSystemAvatarDelete = (row: DigitalHumanItem) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const columns = [
|
||||
const columns: TableColumn<DigitalHumanItem>[] = [
|
||||
{
|
||||
key: 'avatar',
|
||||
label: '图片',
|
||||
accessorKey: 'avatar',
|
||||
header: '图片',
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: '名称',
|
||||
accessorKey: 'name',
|
||||
header: '名称',
|
||||
},
|
||||
{
|
||||
key: 'model_id',
|
||||
label: 'ID',
|
||||
accessorKey: 'model_id',
|
||||
header: 'ID',
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: '来源',
|
||||
accessorKey: 'type',
|
||||
header: '来源',
|
||||
},
|
||||
{
|
||||
key: 'description',
|
||||
label: '备注',
|
||||
accessorKey: 'description',
|
||||
header: '备注',
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
accessorKey: 'actions',
|
||||
},
|
||||
]
|
||||
|
||||
const sourceTypeList = [
|
||||
{ label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
|
||||
{ label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
|
||||
{ label: 'xsh_fh', value: 3, color: 'purple' }, // 硅基（泛化数字人）
|
||||
{ label: 'xsh_bb', value: 4, color: 'indigo' }, // 百度小冰
|
||||
{ label: 'xsh_wm', value: 1, color: 'info' as const }, // 万木（腾讯）
|
||||
{ label: 'xsh_zy', value: 2, color: 'success' as const }, // XSH 自有
|
||||
{ label: 'xsh_fh', value: 3, color: 'warning' as const }, // 硅基（泛化数字人）
|
||||
{ label: 'xsh_bb', value: 4, color: 'primary' as const }, // 百度小冰
|
||||
]
|
||||
|
||||
const isCreateSlideOpen = ref(false)
|
||||
@@ -189,7 +189,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
|
||||
toast.add({
|
||||
title: '创建成功',
|
||||
description: '数字人已创建',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
refreshSystemAvatarList()
|
||||
@@ -199,7 +199,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
|
||||
toast.add({
|
||||
title: '创建失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -208,7 +208,7 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
|
||||
toast.add({
|
||||
title: '创建失败',
|
||||
description: '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -216,20 +216,22 @@ const onCreateAvatarSubmit = (event: FormSubmitEvent<CreateAvatarSchema>) => {
|
||||
|
||||
const onAvatarUpload = async (files: FileList) => {
|
||||
const file = files[0]
|
||||
if (!file) return
|
||||
|
||||
try {
|
||||
const url = await useFileGo(file, 'material')
|
||||
createAvatarState.avatar = url
|
||||
toast.add({
|
||||
title: '上传文件成功',
|
||||
description: '文件已上传',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} catch {
|
||||
toast.add({
|
||||
title: '上传文件失败',
|
||||
description: '请重试',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -245,7 +247,7 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
>
|
||||
<template #action>
|
||||
<UButton
|
||||
color="gray"
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
:label="showSystemAvatar ? '显示用户数字人' : '显示系统数字人'"
|
||||
@click="showSystemAvatar = !showSystemAvatar"
|
||||
@@ -257,20 +259,20 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
: 'tabler:layout-grid'
|
||||
"
|
||||
variant="soft"
|
||||
color="gray"
|
||||
color="neutral"
|
||||
@click="data_layout = data_layout === 'grid' ? 'list' : 'grid'"
|
||||
:label="data_layout === 'grid' ? '列表视图' : '宫格视图'"
|
||||
/>
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
color="amber"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="tabler:user-cog"
|
||||
label="定制管理"
|
||||
:to="'/generation/admin/digital-human-train'"
|
||||
/>
|
||||
<UButton
|
||||
color="blue"
|
||||
color="info"
|
||||
variant="soft"
|
||||
icon="tabler:user-plus"
|
||||
label="定制数字人"
|
||||
@@ -278,7 +280,7 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
/>
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
color="amber"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="tabler:plus"
|
||||
label="创建数字人"
|
||||
@@ -305,18 +307,18 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
? systemAvatarList?.data.items
|
||||
: userAvatarList?.data.items"
|
||||
:key="avatar.model_id || k"
|
||||
class="relative rounded-lg shadow-sm overflow-hidden w-full aspect-9/16 group"
|
||||
class="shadow-xs aspect-9/16 group relative w-full overflow-hidden rounded-lg"
|
||||
>
|
||||
<NuxtImg
|
||||
:src="avatar.avatar"
|
||||
class="w-full h-full object-cover"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-x-0 bottom-0 p-2 bg-linear-to-t from-black/50 to-transparent flex gap-2"
|
||||
class="bg-linear-to-t absolute inset-x-0 bottom-0 flex gap-2 from-black/50 to-transparent p-2"
|
||||
>
|
||||
<UBadge
|
||||
color="white"
|
||||
variant="solid"
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
icon="tabler:user-screen"
|
||||
>
|
||||
{{ avatar.name }}
|
||||
@@ -334,11 +336,11 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col justify-center items-center bg-white/50 dark:bg-neutral-800/50 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
class="absolute inset-0 flex flex-col items-center justify-center bg-white/50 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 dark:bg-neutral-800/50"
|
||||
>
|
||||
<UButtonGroup>
|
||||
<UButton
|
||||
color="black"
|
||||
color="neutral"
|
||||
icon="tabler:download"
|
||||
label="下载图片"
|
||||
@click="
|
||||
@@ -353,7 +355,7 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
/>
|
||||
</UButtonGroup>
|
||||
<span
|
||||
class="text-xs font-medium text-neutral-400 dark:text-neutral-300 pt-4"
|
||||
class="pt-4 text-xs font-medium text-neutral-400 dark:text-neutral-300"
|
||||
>
|
||||
ID: {{ avatar.model_id }}
|
||||
</span>
|
||||
@@ -363,39 +365,40 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
<div v-else>
|
||||
<div class="flex flex-col gap-4">
|
||||
<UTable
|
||||
:rows="
|
||||
:data="
|
||||
showSystemAvatar
|
||||
? systemAvatarList?.data.items
|
||||
: userAvatarList?.data.items
|
||||
"
|
||||
:columns="columns"
|
||||
:loading="userAvatarStatus === 'pending'"
|
||||
:progress="{ color: 'amber', animation: 'carousel' }"
|
||||
class="border dark:border-neutral-800 rounded-md"
|
||||
loading-color="warning"
|
||||
loading-animation="carousel"
|
||||
class="rounded-md border dark:border-neutral-800"
|
||||
>
|
||||
<template #avatar-data="{ row }">
|
||||
<template #avatar-cell="{ row }">
|
||||
<NuxtImg
|
||||
:src="row.avatar"
|
||||
class="h-16 aspect-9/16 rounded-lg"
|
||||
:src="row.original.avatar"
|
||||
class="h-16 w-auto rounded-lg object-contain"
|
||||
/>
|
||||
</template>
|
||||
<template #type-data="{ row }">
|
||||
<template #type-cell="{ row }">
|
||||
<template
|
||||
v-for="(t, i) in sourceTypeList"
|
||||
:key="i"
|
||||
>
|
||||
<UBadge
|
||||
v-if="t.value === row.type"
|
||||
v-if="t.value === row.original.type"
|
||||
variant="subtle"
|
||||
:color="t.color"
|
||||
:label="t.label"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
<template #actions-data="{ row }">
|
||||
<template #actions-cell="{ row }">
|
||||
<div class="flex gap-2">
|
||||
<UButton
|
||||
color="gray"
|
||||
color="neutral"
|
||||
icon="tabler:download"
|
||||
label="下载图片"
|
||||
variant="soft"
|
||||
@@ -403,29 +406,29 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
@click="
|
||||
() => {
|
||||
const { download } = useDownload(
|
||||
row.avatar,
|
||||
`数字人_${row.name}.png`
|
||||
row.original.avatar,
|
||||
`数字人_${row.original.name}.png`
|
||||
)
|
||||
download()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<UButton
|
||||
color="red"
|
||||
color="error"
|
||||
icon="tabler:trash"
|
||||
label="删除"
|
||||
variant="soft"
|
||||
size="xs"
|
||||
@click="onSystemAvatarDelete(row)"
|
||||
@click="onSystemAvatarDelete(row.original)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<div class="mt-4 flex justify-end">
|
||||
<UPagination
|
||||
v-model="pagination.page"
|
||||
v-model:page="pagination.page"
|
||||
:max="9"
|
||||
:page-count="pagination.pageSize"
|
||||
:total="userAvatarList?.data.total || 0"
|
||||
@@ -433,81 +436,81 @@ const onAvatarUpload = async (files: FileList) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<USlideover v-model="isCreateSlideOpen">
|
||||
<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="isCreateSlideOpen = false"
|
||||
/>
|
||||
创建系统数字人
|
||||
</template>
|
||||
|
||||
<UForm
|
||||
class="space-y-3"
|
||||
:schema="createAvatarSchema"
|
||||
:state="createAvatarState"
|
||||
@submit="onCreateAvatarSubmit"
|
||||
<USlideover v-model:open="isCreateSlideOpen">
|
||||
<template #content>
|
||||
<UCard
|
||||
:ui="{
|
||||
body: 'flex-1',
|
||||
}"
|
||||
class="flex flex-1 flex-col"
|
||||
>
|
||||
<UFormGroup
|
||||
label="名称"
|
||||
name="name"
|
||||
>
|
||||
<UInput v-model="createAvatarState.name" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="备注"
|
||||
name="description"
|
||||
>
|
||||
<UInput v-model="createAvatarState.description" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="ID"
|
||||
name="model_id"
|
||||
>
|
||||
<UInput v-model="createAvatarState.model_id" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="图片"
|
||||
name="avatar"
|
||||
>
|
||||
<UniFileDnD
|
||||
accept="image/png,image/jpeg"
|
||||
@change="onAvatarUpload"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="类型"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="createAvatarState.type"
|
||||
value-attribute="value"
|
||||
:options="sourceTypeList"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup class="flex justify-end pt-4">
|
||||
<template #header>
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
label="创建"
|
||||
class="absolute end-5 top-5 z-10 flex"
|
||||
color="neutral"
|
||||
icon="tabler:x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isCreateSlideOpen = false"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</UCard>
|
||||
创建系统数字人
|
||||
</template>
|
||||
|
||||
<UForm
|
||||
class="space-y-3"
|
||||
:schema="createAvatarSchema"
|
||||
:state="createAvatarState"
|
||||
@submit="onCreateAvatarSubmit"
|
||||
>
|
||||
<UFormField
|
||||
label="名称"
|
||||
name="name"
|
||||
>
|
||||
<UInput v-model="createAvatarState.name" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="备注"
|
||||
name="description"
|
||||
>
|
||||
<UInput v-model="createAvatarState.description" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="ID"
|
||||
name="model_id"
|
||||
>
|
||||
<UInput v-model="createAvatarState.model_id" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="图片"
|
||||
name="avatar"
|
||||
>
|
||||
<UniFileDnD
|
||||
accept="image/png,image/jpeg"
|
||||
@change="onAvatarUpload"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="类型"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="createAvatarState.type"
|
||||
:items="sourceTypeList"
|
||||
value-key="value"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField class="flex justify-end pt-4">
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
label="创建"
|
||||
/>
|
||||
</UFormField>
|
||||
</UForm>
|
||||
</UCard>
|
||||
</template>
|
||||
</USlideover>
|
||||
|
||||
<!-- 数字人定制对话框 -->
|
||||
|
||||
@@ -4,8 +4,9 @@ import SlideCreateCourse from '~/components/SlideCreateCourse.vue'
|
||||
import { useFetchWrapped } from '~/composables/useFetchWrapped'
|
||||
|
||||
const toast = useToast()
|
||||
const modal = useModal()
|
||||
const slide = useSlideover()
|
||||
const overlay = useOverlay()
|
||||
const modal = overlay.create(ModalAuthentication)
|
||||
const slide = overlay.create(SlideCreateCourse)
|
||||
const loginState = useLoginState()
|
||||
|
||||
const deletePending = ref(false)
|
||||
@@ -28,12 +29,10 @@ const { data: courseList, refresh: refreshCourseList } = useAsyncData(
|
||||
}
|
||||
)
|
||||
|
||||
const onCreateCourseClick = () => {
|
||||
slide.open(SlideCreateCourse, {
|
||||
onSuccess: () => {
|
||||
refreshCourseList()
|
||||
},
|
||||
})
|
||||
const onCreateCourseClick = async () => {
|
||||
const slideInst = slide.open()
|
||||
await slideInst
|
||||
refreshCourseList()
|
||||
}
|
||||
|
||||
const onCourseDelete = (task_id: string) => {
|
||||
@@ -53,14 +52,14 @@ const onCourseDelete = (task_id: string) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除任务记录',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -107,7 +106,7 @@ onMounted(() => {
|
||||
@click="
|
||||
() => {
|
||||
if (!loginState.is_logged_in) {
|
||||
modal.open(ModalAuthentication)
|
||||
modal.open()
|
||||
return
|
||||
}
|
||||
onCreateCourseClick()
|
||||
@@ -121,7 +120,7 @@ onMounted(() => {
|
||||
<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"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -134,7 +133,7 @@ onMounted(() => {
|
||||
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"
|
||||
class="relative grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 fhd:grid-cols-5"
|
||||
>
|
||||
<TransitionGroup
|
||||
name="card"
|
||||
@@ -149,9 +148,9 @@ onMounted(() => {
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<div class="mt-4 flex justify-end">
|
||||
<UPagination
|
||||
v-model="page"
|
||||
v-model:page="page"
|
||||
:max="9"
|
||||
:page-count="16"
|
||||
:total="courseList?.data.total || 0"
|
||||
|
||||
@@ -5,7 +5,8 @@ import { useTourState } from '~/composables/useTourState'
|
||||
import SlideCreateCourseGreen from '~/components/SlideCreateCourseGreen.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const slide = useSlideover()
|
||||
const overlay = useOverlay()
|
||||
const slide = overlay.create(SlideCreateCourseGreen)
|
||||
const toast = useToast()
|
||||
const loginState = useLoginState()
|
||||
const tourState = useTourState()
|
||||
@@ -35,12 +36,10 @@ const { data: videoList, refresh: refreshVideoList } = useAsyncData(
|
||||
}
|
||||
)
|
||||
|
||||
const onCreateCourseGreenClick = () => {
|
||||
slide.open(SlideCreateCourseGreen, {
|
||||
onSuccess: () => {
|
||||
refreshVideoList()
|
||||
},
|
||||
})
|
||||
const onCreateCourseGreenClick = async () => {
|
||||
const slideInst = slide.open()
|
||||
await slideInst
|
||||
refreshVideoList()
|
||||
}
|
||||
|
||||
const onCourseGreenDelete = (task: GBVideoItem) => {
|
||||
@@ -58,14 +57,14 @@ const onCourseGreenDelete = (task: GBVideoItem) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除任务记录',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -137,7 +136,6 @@ onMounted(() => {
|
||||
id="input-search"
|
||||
v-model="searchInput"
|
||||
:autofocus="false"
|
||||
:ui="{ icon: { trailing: { pointer: '' } } }"
|
||||
autocomplete="off"
|
||||
placeholder="标题搜索"
|
||||
variant="outline"
|
||||
@@ -146,7 +144,7 @@ onMounted(() => {
|
||||
<UButton
|
||||
v-show="searchInput !== ''"
|
||||
:padded="false"
|
||||
color="gray"
|
||||
color="neutral"
|
||||
icon="i-tabler-x"
|
||||
variant="link"
|
||||
@click="searchInput = ''"
|
||||
@@ -172,7 +170,7 @@ onMounted(() => {
|
||||
<Transition name="loading-screen">
|
||||
<div
|
||||
v-if="videoList?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -183,7 +181,7 @@ onMounted(() => {
|
||||
<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"
|
||||
class="relative grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 fhd:grid-cols-5"
|
||||
>
|
||||
<TransitionGroup
|
||||
name="card"
|
||||
@@ -198,9 +196,9 @@ onMounted(() => {
|
||||
/>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<div class="mt-4 flex justify-end">
|
||||
<UPagination
|
||||
v-model="page"
|
||||
v-model:page="page"
|
||||
:max="9"
|
||||
:page-count="pageCount"
|
||||
:total="videoList?.data.total || 0"
|
||||
|
||||
@@ -110,14 +110,14 @@ const onSystemTitlesDelete = (titles: TitlesTemplate) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除系统片头模板',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -126,7 +126,7 @@ const onSystemTitlesDelete = (titles: TitlesTemplate) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: error instanceof Error ? error.message : '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -153,14 +153,14 @@ const onUserTitlesDelete = (titles: TitlesTemplate) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除片头素材',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -188,14 +188,14 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
toast.add({
|
||||
title: '提交成功',
|
||||
description: '已提交片头制作请求',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '提交失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -217,7 +217,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
>
|
||||
<template #action>
|
||||
<UButton
|
||||
color="amber"
|
||||
color="warning"
|
||||
icon="tabler:plus"
|
||||
variant="soft"
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
@@ -231,18 +231,18 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
|
||||
v-if="systemTitlesTemplateStatus === 'pending'"
|
||||
>
|
||||
<USkeleton
|
||||
class="w-full aspect-video"
|
||||
class="aspect-video w-full"
|
||||
v-for="i in systemPagination.pageSize"
|
||||
:key="i"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="systemTitlesTemplate?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -253,7 +253,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
|
||||
v-else
|
||||
>
|
||||
<AigcGenerationTitlesTemplate
|
||||
@@ -298,18 +298,18 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</template>
|
||||
</UAlert>
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
|
||||
v-if="userTitlesTemplateStatus === 'pending'"
|
||||
>
|
||||
<USkeleton
|
||||
class="w-full aspect-video"
|
||||
class="aspect-video w-full"
|
||||
v-for="i in userPagination.pageSize"
|
||||
:key="i"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="userTitlesTemplate?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -320,7 +320,7 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-4"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
|
||||
v-else
|
||||
>
|
||||
<AigcGenerationTitlesTemplate
|
||||
@@ -333,90 +333,87 @@ const onUserTitlesSubmit = (event: FormSubmitEvent<UserTitlesSchema>) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UModal v-model="isUserTitlesRequestModalActive">
|
||||
<UCard
|
||||
:ui="{
|
||||
ring: '',
|
||||
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
|
||||
>
|
||||
<p>使用模板</p>
|
||||
</div>
|
||||
<UButton
|
||||
class="-my-1"
|
||||
color="gray"
|
||||
icon="i-tabler-x"
|
||||
variant="ghost"
|
||||
@click="isUserTitlesRequestModalActive = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="userTitlesSchema"
|
||||
:state="userTitlesState"
|
||||
@submit="onUserTitlesSubmit"
|
||||
>
|
||||
<UFormGroup
|
||||
label="课程名称"
|
||||
name="title"
|
||||
required
|
||||
>
|
||||
<UInput v-model="userTitlesState.title" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="主讲人"
|
||||
name="description"
|
||||
required
|
||||
>
|
||||
<UInput v-model="userTitlesState.description" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="备注"
|
||||
name="remark"
|
||||
help="可选，可以在此处填写学校、单位等额外信息"
|
||||
>
|
||||
<UTextarea v-model="userTitlesState.remark" />
|
||||
</UFormGroup>
|
||||
<UFormGroup name="title_id">
|
||||
<UInput
|
||||
type="hidden"
|
||||
v-model="userTitlesState.title_id"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UAlert
|
||||
icon="tabler:info-circle"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
title="片头片尾模板"
|
||||
description="提交模板相应字段后，待工作人员制作好后即可使用"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<UModal v-model:open="isUserTitlesRequestModalActive">
|
||||
<template #content>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="overflow-hidden text-base font-semibold leading-6 text-gray-900 dark:text-white"
|
||||
>
|
||||
<p>使用模板</p>
|
||||
</div>
|
||||
<UButton
|
||||
color="primary"
|
||||
variant="soft"
|
||||
label="取消"
|
||||
class="-my-1"
|
||||
color="neutral"
|
||||
icon="i-tabler-x"
|
||||
variant="ghost"
|
||||
@click="isUserTitlesRequestModalActive = false"
|
||||
/>
|
||||
<UButton
|
||||
color="primary"
|
||||
type="submit"
|
||||
>
|
||||
提交
|
||||
</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="userTitlesSchema"
|
||||
:state="userTitlesState"
|
||||
@submit="onUserTitlesSubmit"
|
||||
>
|
||||
<UFormField
|
||||
label="课程名称"
|
||||
name="title"
|
||||
required
|
||||
>
|
||||
<UInput v-model="userTitlesState.title" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="主讲人"
|
||||
name="description"
|
||||
required
|
||||
>
|
||||
<UInput v-model="userTitlesState.description" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="备注"
|
||||
name="remark"
|
||||
help="可选，可以在此处填写学校、单位等额外信息"
|
||||
>
|
||||
<UTextarea v-model="userTitlesState.remark" />
|
||||
</UFormField>
|
||||
<UFormField name="title_id">
|
||||
<UInput
|
||||
type="hidden"
|
||||
v-model="userTitlesState.title_id"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UAlert
|
||||
icon="tabler:info-circle"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
title="片头片尾模板"
|
||||
description="提交模板相应字段后，待工作人员制作好后即可使用"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton
|
||||
color="primary"
|
||||
variant="soft"
|
||||
label="取消"
|
||||
@click="isUserTitlesRequestModalActive = false"
|
||||
/>
|
||||
<UButton
|
||||
color="primary"
|
||||
type="submit"
|
||||
>
|
||||
提交
|
||||
</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -102,7 +102,7 @@ const onCreateSubmit = (event: FormSubmitEvent<PPTCreateSchema>) => {
|
||||
toast.add({
|
||||
title: '创建成功',
|
||||
description: '已加入模板库',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
isCreateSlideOpen.value = false
|
||||
@@ -120,14 +120,14 @@ const onCreateSubmit = (event: FormSubmitEvent<PPTCreateSchema>) => {
|
||||
toast.add({
|
||||
title: '创建失败',
|
||||
description: '请检查输入是否正确',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const onFileSelect = async (files: FileList, type: 'preview' | 'ppt') => {
|
||||
const url = await useFileGo(files[0], 'material')
|
||||
const url = await useFileGo(files[0]!, 'material')
|
||||
if (type === 'preview') {
|
||||
pptCreateState.preview_url = url
|
||||
} else {
|
||||
@@ -136,7 +136,7 @@ const onFileSelect = async (files: FileList, type: 'preview' | 'ppt') => {
|
||||
toast.add({
|
||||
title: '上传成功',
|
||||
description: `已上传 ${type === 'preview' ? '预览图' : 'PPT 文件'}`,
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
}
|
||||
@@ -156,14 +156,14 @@ const onDeletePPT = (ppt: PPTTemplate) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除模板',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -172,7 +172,7 @@ const onDeletePPT = (ppt: PPTTemplate) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -196,7 +196,7 @@ const onCreateCat = () => {
|
||||
toast.add({
|
||||
title: '创建成功',
|
||||
description: '已加入分类列表',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
createCatInput.value = ''
|
||||
@@ -206,7 +206,7 @@ const onCreateCat = () => {
|
||||
toast.add({
|
||||
title: '创建失败',
|
||||
description: '请检查输入是否正确',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -228,14 +228,14 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
toast.add({
|
||||
title: '删除成功',
|
||||
description: '已删除分类',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
} else {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -244,7 +244,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
toast.add({
|
||||
title: '删除失败',
|
||||
description: '请检查输入是否正确',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
})
|
||||
@@ -262,7 +262,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
label="分类管理"
|
||||
color="amber"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="tabler:grid"
|
||||
@click="isCatSlideOpen = true"
|
||||
@@ -270,7 +270,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
label="创建模板"
|
||||
color="amber"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
icon="tabler:plus"
|
||||
@click="isCreateSlideOpen = true"
|
||||
@@ -293,7 +293,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
'bg-primary text-white': selectedCat === cat.id,
|
||||
'bg-gray-100 text-gray-500': selectedCat !== cat.id,
|
||||
}"
|
||||
class="rounded-lg px-4 py-2 text-sm cursor-pointer"
|
||||
class="cursor-pointer rounded-lg px-4 py-2 text-sm"
|
||||
>
|
||||
{{ cat.type }}
|
||||
</div>
|
||||
@@ -302,7 +302,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-if="pptTemplates?.data.items.length === 0"
|
||||
class="w-full py-20 flex flex-col justify-center items-center gap-2"
|
||||
class="flex w-full flex-col items-center justify-center gap-2 py-20"
|
||||
>
|
||||
<Icon
|
||||
class="text-7xl text-neutral-300 dark:text-neutral-700"
|
||||
@@ -314,20 +314,20 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 mt-4"
|
||||
class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4"
|
||||
>
|
||||
<div
|
||||
v-for="ppt in pptTemplates?.data.items"
|
||||
:key="ppt.id"
|
||||
class="relative bg-white rounded-lg shadow-md overflow-hidden"
|
||||
class="relative overflow-hidden rounded-lg bg-white shadow-md"
|
||||
>
|
||||
<NuxtImg
|
||||
:src="ppt.preview_url"
|
||||
:alt="ppt.title"
|
||||
class="w-full aspect-video object-cover"
|
||||
class="aspect-video w-full object-cover"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-x-0 bottom-0 p-3 pt-6 flex justify-between items-end bg-linear-to-t from-black/50 to-transparent"
|
||||
class="bg-linear-to-t absolute inset-x-0 bottom-0 flex items-end justify-between from-black/50 to-transparent p-3 pt-6"
|
||||
>
|
||||
<div class="space-y-0.5">
|
||||
<h3 class="text-base font-bold text-white">{{ ppt.title }}</h3>
|
||||
@@ -340,7 +340,7 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
<UButton
|
||||
v-if="loginState.user.auth_code === 2"
|
||||
size="sm"
|
||||
color="red"
|
||||
color="error"
|
||||
icon="tabler:trash"
|
||||
variant="soft"
|
||||
@click="onDeletePPT(ppt)"
|
||||
@@ -357,173 +357,173 @@ const onDeleteCat = (cat: PPTCategory) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-end">
|
||||
<div class="flex w-full justify-end">
|
||||
<UPagination
|
||||
v-if="(pptTemplates?.data.total || 0) > pagination.perpage"
|
||||
:total="pptTemplates?.data.total"
|
||||
:page-count="pagination.perpage"
|
||||
:max="9"
|
||||
v-model="pagination.page"
|
||||
v-model:page="pagination.page"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<USlideover v-model="isCreateSlideOpen">
|
||||
<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="isCreateSlideOpen = false"
|
||||
/>
|
||||
创建 PPT 模板
|
||||
</template>
|
||||
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="pptCreateSchema"
|
||||
:state="pptCreateState"
|
||||
@submit="onCreateSubmit"
|
||||
<USlideover v-model:open="isCreateSlideOpen">
|
||||
<template #content>
|
||||
<UCard
|
||||
:ui="{
|
||||
body: 'flex-1',
|
||||
}"
|
||||
class="flex flex-1 flex-col"
|
||||
>
|
||||
<UFormGroup
|
||||
label="模板标题"
|
||||
name="title"
|
||||
>
|
||||
<UInput v-model="pptCreateState.title" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="模板描述"
|
||||
name="description"
|
||||
>
|
||||
<UTextarea v-model="pptCreateState.description" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="模板分类"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="pptCreateState.type"
|
||||
value-attribute="value"
|
||||
option-attribute="label"
|
||||
searchable
|
||||
searchable-placeholder="搜索现有分类..."
|
||||
:options="selectMenuOptions"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="预览图"
|
||||
name="preview_url"
|
||||
>
|
||||
<UniFileDnD
|
||||
@change="onFileSelect($event, 'preview')"
|
||||
accept="image/png,image/jpeg"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="PPT 文件"
|
||||
name="file_url"
|
||||
>
|
||||
<UniFileDnD
|
||||
@change="onFileSelect($event, 'ppt')"
|
||||
accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<template #header>
|
||||
<UButton
|
||||
label="创建"
|
||||
color="primary"
|
||||
type="submit"
|
||||
class="absolute end-5 top-5 z-10 flex"
|
||||
color="neutral"
|
||||
icon="tabler:x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isCreateSlideOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</UForm>
|
||||
</UCard>
|
||||
</USlideover>
|
||||
<USlideover v-model="isCatSlideOpen">
|
||||
<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="isCatSlideOpen = false"
|
||||
/>
|
||||
PPT 模板分类管理
|
||||
</template>
|
||||
创建 PPT 模板
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<UFormGroup label="创建分类">
|
||||
<UButtonGroup
|
||||
orientation="horizontal"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
<UForm
|
||||
class="space-y-4"
|
||||
:schema="pptCreateSchema"
|
||||
:state="pptCreateState"
|
||||
@submit="onCreateSubmit"
|
||||
>
|
||||
<UFormField
|
||||
label="模板标题"
|
||||
name="title"
|
||||
>
|
||||
<UInput
|
||||
class="flex-1"
|
||||
placeholder="分类名称"
|
||||
v-model="createCatInput"
|
||||
<UInput v-model="pptCreateState.title" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="模板描述"
|
||||
name="description"
|
||||
>
|
||||
<UTextarea v-model="pptCreateState.description" />
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="模板分类"
|
||||
name="type"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="pptCreateState.type"
|
||||
:items="selectMenuOptions"
|
||||
value-key="value"
|
||||
searchable
|
||||
searchable-placeholder="搜索现有分类..."
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="预览图"
|
||||
name="preview_url"
|
||||
>
|
||||
<UniFileDnD
|
||||
@change="onFileSelect($event, 'preview')"
|
||||
accept="image/png,image/jpeg"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="PPT 文件"
|
||||
name="file_url"
|
||||
>
|
||||
<UniFileDnD
|
||||
@change="onFileSelect($event, 'ppt')"
|
||||
accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<UButton
|
||||
icon="tabler:plus"
|
||||
color="gray"
|
||||
label="创建"
|
||||
:disabled="!createCatInput"
|
||||
@click="onCreateCat"
|
||||
color="primary"
|
||||
type="submit"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</UFormGroup>
|
||||
<div class="border dark:border-neutral-700 rounded-md">
|
||||
<UTable
|
||||
:columns="[
|
||||
{ key: 'id', label: 'ID' },
|
||||
{ key: 'type', label: '分类' },
|
||||
{ key: 'create_time', label: '创建时间' },
|
||||
{ key: 'actions' },
|
||||
]"
|
||||
:rows="pptCategories?.data.items"
|
||||
>
|
||||
<template #create_time-data="{ row }">
|
||||
{{
|
||||
dayjs(row.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</template>
|
||||
<template #actions-data="{ row }">
|
||||
<UButton
|
||||
color="red"
|
||||
icon="tabler:trash"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="onDeleteCat(row)"
|
||||
</div>
|
||||
</UForm>
|
||||
</UCard>
|
||||
</template>
|
||||
</USlideover>
|
||||
|
||||
<USlideover v-model:open="isCatSlideOpen">
|
||||
<template #content>
|
||||
<UCard
|
||||
:ui="{
|
||||
body: 'flex-1',
|
||||
}"
|
||||
class="flex flex-1 flex-col"
|
||||
>
|
||||
<template #header>
|
||||
<UButton
|
||||
class="absolute end-5 top-5 z-10 flex"
|
||||
color="neutral"
|
||||
icon="tabler:x"
|
||||
padded
|
||||
size="sm"
|
||||
square
|
||||
variant="ghost"
|
||||
@click="isCatSlideOpen = false"
|
||||
/>
|
||||
PPT 模板分类管理
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<UFormField label="创建分类">
|
||||
<UButtonGroup
|
||||
orientation="horizontal"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<UInput
|
||||
class="flex-1"
|
||||
placeholder="分类名称"
|
||||
v-model="createCatInput"
|
||||
/>
|
||||
</template>
|
||||
</UTable>
|
||||
<UButton
|
||||
icon="tabler:plus"
|
||||
color="neutral"
|
||||
label="创建"
|
||||
:disabled="!createCatInput"
|
||||
@click="onCreateCat"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</UFormField>
|
||||
<div class="rounded-md border dark:border-neutral-700">
|
||||
<UTable
|
||||
:columns="[
|
||||
{ accessorKey: 'id', header: 'ID' },
|
||||
{ accessorKey: 'type', header: '分类' },
|
||||
{ accessorKey: 'create_time', header: '创建时间' },
|
||||
{ accessorKey: 'actions' },
|
||||
]"
|
||||
:rows="pptCategories?.data.items"
|
||||
>
|
||||
<template #create_time-data="{ row }">
|
||||
{{
|
||||
dayjs(row.original.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
}}
|
||||
</template>
|
||||
<template #actions-data="{ row }">
|
||||
<UButton
|
||||
color="error"
|
||||
icon="tabler:trash"
|
||||
size="xs"
|
||||
variant="soft"
|
||||
@click="onDeleteCat(row.original)"
|
||||
/>
|
||||
</template>
|
||||
</UTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</UCard>
|
||||
</template>
|
||||
</USlideover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { number, object, string, ref as yref, type InferType } from 'yup'
|
||||
import type { FormSubmitEvent } from '#ui/types'
|
||||
import type { FormSubmitEvent, TabsItem } from '#ui/types'
|
||||
|
||||
const toast = useToast()
|
||||
const route = useRoute()
|
||||
@@ -9,30 +9,31 @@ const loginState = useLoginState()
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
slot: 'info',
|
||||
slot: 'info' as const,
|
||||
label: '基本资料',
|
||||
icon: 'tabler:user-square-rounded',
|
||||
},
|
||||
{
|
||||
slot: 'security',
|
||||
slot: 'security' as const,
|
||||
label: '账号安全',
|
||||
icon: 'tabler:shield-half-filled',
|
||||
},
|
||||
]
|
||||
] satisfies TabsItem[]
|
||||
|
||||
const currentTab = computed({
|
||||
get() {
|
||||
const index = tabs.findIndex((item) => item.slot === route.query.tab)
|
||||
if (index === -1) {
|
||||
return 0
|
||||
}
|
||||
// const index = tabs.findIndex((item) => item.slot === route.query.tab)
|
||||
// if (index === -1) {
|
||||
// return 0
|
||||
// }
|
||||
|
||||
return index
|
||||
// return index
|
||||
return (route.query.tab as string) || tabs[0]?.slot || 'info'
|
||||
},
|
||||
set(value) {
|
||||
set(tab) {
|
||||
// Hash is specified here to prevent the page from scrolling to the top
|
||||
router.replace({
|
||||
query: { tab: tabs[value].slot },
|
||||
query: { tab },
|
||||
})
|
||||
},
|
||||
})
|
||||
@@ -80,7 +81,7 @@ const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
|
||||
toast.add({
|
||||
title: '个人资料已更新',
|
||||
description: '您的个人资料已更新成功',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
})
|
||||
loginState.updateProfile()
|
||||
isEditProfileModified.value = false
|
||||
@@ -88,7 +89,7 @@ const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
|
||||
toast.add({
|
||||
title: '更新失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -96,7 +97,7 @@ const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
|
||||
toast.add({
|
||||
title: '更新失败',
|
||||
description: err.message || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -135,7 +136,7 @@ const onChangePasswordSubmit = (
|
||||
toast.add({
|
||||
title: '密码已修改',
|
||||
description: '请重新登录',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
})
|
||||
setTimeout(() => {
|
||||
loginState.logout()
|
||||
@@ -145,7 +146,7 @@ const onChangePasswordSubmit = (
|
||||
toast.add({
|
||||
title: '修改密码失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -153,7 +154,7 @@ const onChangePasswordSubmit = (
|
||||
toast.add({
|
||||
title: '修改密码失败',
|
||||
description: err.message || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -163,8 +164,8 @@ const onChangePasswordSubmit = (
|
||||
<LoginNeededContent
|
||||
content-class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0"
|
||||
>
|
||||
<div class="container max-w-[1280px] mx-auto pt-12 flex flex-col gap-12">
|
||||
<h1 class="text-2xl font-medium inline-flex items-center gap-2">
|
||||
<div class="container mx-auto flex max-w-7xl flex-col gap-12 pt-12">
|
||||
<h1 class="inline-flex items-center gap-2 text-2xl font-medium">
|
||||
<UIcon
|
||||
name="line-md:person"
|
||||
class="text-3xl"
|
||||
@@ -179,10 +180,8 @@ const onChangePasswordSubmit = (
|
||||
:src="loginState.user?.avatar"
|
||||
:alt="loginState.user?.nickname || loginState.user?.username"
|
||||
:ui="{
|
||||
rounded: 'rounded-xl',
|
||||
size: {
|
||||
huge: 'w-48 h-48 text-4xl',
|
||||
},
|
||||
root: 'size-14 text-4xl',
|
||||
image: 'rounded-xl',
|
||||
}"
|
||||
/>
|
||||
<div>
|
||||
@@ -203,16 +202,19 @@ const onChangePasswordSubmit = (
|
||||
<div>
|
||||
<UTabs
|
||||
v-model="currentTab"
|
||||
:items="tabs"
|
||||
orientation="vertical"
|
||||
:items="tabs"
|
||||
:ui="{
|
||||
wrapper:
|
||||
'w-full flex flex-col sm:flex-row items-start gap-4 sm:gap-16',
|
||||
list: {
|
||||
width: 'w-full sm:w-48 h-fit',
|
||||
background: 'bg-transparent',
|
||||
tab: { active: 'bg-neutral-100 dark:bg-neutral-700' },
|
||||
},
|
||||
root: 'w-full flex flex-col sm:flex-row items-start gap-4 sm:gap-16',
|
||||
list: 'w-full sm:w-48 h-fit bg-transparent',
|
||||
indicator:
|
||||
'data-[state=active]:bg-neutral-100 data-[state=active]:dark:bg-neutral-700',
|
||||
trigger: 'w-full',
|
||||
// list: {
|
||||
// width: 'w-full sm:w-48 h-fit',
|
||||
// background: 'bg-transparent',
|
||||
// tab: { active: 'bg-neutral-100 dark:bg-neutral-700' },
|
||||
// },
|
||||
}"
|
||||
>
|
||||
<template #info>
|
||||
@@ -224,15 +226,15 @@ const onChangePasswordSubmit = (
|
||||
@submit="onEditProfileSubmit"
|
||||
@change="isEditProfileModified = true"
|
||||
>
|
||||
<UFormGroup
|
||||
<UFormField
|
||||
name="username"
|
||||
label="姓名"
|
||||
help="您的真实姓名，将用于登录系统"
|
||||
hint="账户名"
|
||||
>
|
||||
<UInput v-model="editProfileState.username" />
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
name="mobile"
|
||||
label="手机号码"
|
||||
help="手机号作为登录和找回密码的凭证，暂不支持修改"
|
||||
@@ -241,27 +243,27 @@ const onChangePasswordSubmit = (
|
||||
:placeholder="loginState.user?.mobile || 'nil'"
|
||||
disabled
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
name="sex"
|
||||
label="性别"
|
||||
>
|
||||
<USelect
|
||||
v-model="editProfileState.sex"
|
||||
:options="[
|
||||
:items="[
|
||||
{ label: '男', value: 1 },
|
||||
{ label: '女', value: 2 },
|
||||
{ label: '保密', value: 0 },
|
||||
]"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
name="company"
|
||||
label="公司/学校/组织名称"
|
||||
help="您所在的公司或组织名称"
|
||||
>
|
||||
<UInput v-model="editProfileState.company" />
|
||||
</UFormGroup>
|
||||
</UFormField>
|
||||
|
||||
<div>
|
||||
<UButton
|
||||
@@ -274,6 +276,7 @@ const onChangePasswordSubmit = (
|
||||
</UForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #security>
|
||||
<div class="tab-content space-y-4">
|
||||
<UForm
|
||||
@@ -282,7 +285,7 @@ const onChangePasswordSubmit = (
|
||||
:state="changePasswordState"
|
||||
@submit="onChangePasswordSubmit"
|
||||
>
|
||||
<UFormGroup
|
||||
<UFormField
|
||||
name="old_password"
|
||||
label="旧密码"
|
||||
>
|
||||
@@ -290,8 +293,8 @@ const onChangePasswordSubmit = (
|
||||
type="password"
|
||||
v-model="changePasswordState.old_password"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
name="new_password"
|
||||
label="新密码"
|
||||
>
|
||||
@@ -299,8 +302,8 @@ const onChangePasswordSubmit = (
|
||||
type="password"
|
||||
v-model="changePasswordState.new_password"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
name="confirm_password"
|
||||
label="确认新密码"
|
||||
>
|
||||
@@ -308,13 +311,13 @@ const onChangePasswordSubmit = (
|
||||
type="password"
|
||||
v-model="changePasswordState.confirm_password"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UFormField>
|
||||
|
||||
<div>
|
||||
<UButton type="submit">修改密码</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
<!-- <UDivider /> -->
|
||||
<!-- <USeparator /> -->
|
||||
</div>
|
||||
</template>
|
||||
</UTabs>
|
||||
@@ -325,7 +328,9 @@ const onChangePasswordSubmit = (
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@reference '@/assets/css/main.css';
|
||||
|
||||
.tab-content {
|
||||
@apply bg-neutral-50 dark:bg-neutral-800 rounded-lg p-6;
|
||||
@apply rounded-lg bg-neutral-50 p-6 dark:bg-neutral-800;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -63,7 +63,7 @@ function onSubmit(form: req.user.Login) {
|
||||
toast.add({
|
||||
title: '登录失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -72,7 +72,7 @@ function onSubmit(form: req.user.Login) {
|
||||
toast.add({
|
||||
title: '登录失败',
|
||||
description: res.msg || '账号或密码错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -81,7 +81,7 @@ function onSubmit(form: req.user.Login) {
|
||||
toast.add({
|
||||
title: '登录失败',
|
||||
description: res.msg || '无法获取登录状态',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -104,7 +104,7 @@ function onSubmit(form: req.user.Login) {
|
||||
toast.add({
|
||||
title: '登录失败',
|
||||
description: err.msg || '网络错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
})
|
||||
@@ -116,7 +116,7 @@ function onSubmit(form: req.user.Login) {
|
||||
toast.add({
|
||||
title: '登录失败',
|
||||
description: err.msg || '网络错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
})
|
||||
@@ -138,7 +138,7 @@ const obtainSmsCode = () => {
|
||||
toast.add({
|
||||
title: '验证码发送失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -148,7 +148,7 @@ const obtainSmsCode = () => {
|
||||
sms_counting_down.value = 60 // TODO: save timestamp to localstorage
|
||||
toast.add({
|
||||
title: '短信验证码已发送',
|
||||
color: 'indigo',
|
||||
color: 'primary',
|
||||
icon: 'i-tabler-circle-check',
|
||||
})
|
||||
const interval = setInterval(() => {
|
||||
@@ -162,7 +162,7 @@ const obtainSmsCode = () => {
|
||||
toast.add({
|
||||
title: '验证码发送失败',
|
||||
description: err.msg || '网络错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
})
|
||||
@@ -183,7 +183,7 @@ const handle_sms_verify = (e: string[]) => {
|
||||
toast.add({
|
||||
title: '登录失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -193,7 +193,7 @@ const handle_sms_verify = (e: string[]) => {
|
||||
toast.add({
|
||||
title: '登录失败',
|
||||
description: res.msg || '无法获取登录状态',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -216,7 +216,7 @@ const handle_sms_verify = (e: string[]) => {
|
||||
toast.add({
|
||||
title: '登录失败',
|
||||
description: err.msg || '网络错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
})
|
||||
@@ -259,7 +259,7 @@ const obtainForgetSmsCode = () => {
|
||||
toast.add({
|
||||
title: '验证码发送失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -269,7 +269,7 @@ const obtainForgetSmsCode = () => {
|
||||
sms_counting_down.value = 60 // TODO: save timestamp to localstorage
|
||||
toast.add({
|
||||
title: '短信验证码已发送',
|
||||
color: 'indigo',
|
||||
color: 'primary',
|
||||
icon: 'i-tabler-circle-check',
|
||||
})
|
||||
const interval = setInterval(() => {
|
||||
@@ -283,7 +283,7 @@ const obtainForgetSmsCode = () => {
|
||||
toast.add({
|
||||
title: '验证码发送失败',
|
||||
description: err.msg || '网络错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
})
|
||||
@@ -307,7 +307,7 @@ const onForgetPasswordSubmit = (
|
||||
toast.add({
|
||||
title: '重置密码失败',
|
||||
description: res.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
return
|
||||
@@ -315,7 +315,7 @@ const onForgetPasswordSubmit = (
|
||||
toast.add({
|
||||
title: '重置密码成功',
|
||||
description: '请您继续登录',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-circle-check',
|
||||
})
|
||||
currentTab.value = 1
|
||||
@@ -324,7 +324,7 @@ const onForgetPasswordSubmit = (
|
||||
toast.add({
|
||||
title: '重置密码失败',
|
||||
description: err.msg || '未知错误',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
})
|
||||
@@ -353,7 +353,7 @@ onMounted(() => {
|
||||
toast.add({
|
||||
title: '认证失败',
|
||||
description: err.msg || 'Token 或 UserID 无效',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-circle-x',
|
||||
})
|
||||
router.replace('/')
|
||||
@@ -377,10 +377,10 @@ onMounted(() => {
|
||||
<div class="flex flex-col items-center">
|
||||
<UTabs
|
||||
:items="items"
|
||||
class="w-full sm:w-[400px]"
|
||||
class="w-full sm:w-100"
|
||||
v-model="currentTab"
|
||||
>
|
||||
<template #default="{ item, index, selected }">
|
||||
<!-- <template #default="{ item, index, selected }">
|
||||
<div class="flex items-center gap-2 relative truncate">
|
||||
<span class="truncate">{{ item.label }}</span>
|
||||
<span
|
||||
@@ -388,8 +388,8 @@ onMounted(() => {
|
||||
class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #item="{ item }">
|
||||
</template> -->
|
||||
<template #content="{ item }">
|
||||
<UCard @submit.prevent="() => onSubmit(accountForm)">
|
||||
<template #header>
|
||||
<p
|
||||
@@ -406,7 +406,7 @@ onMounted(() => {
|
||||
v-if="item.key === 'account'"
|
||||
class="space-y-3"
|
||||
>
|
||||
<UFormGroup
|
||||
<UFormField
|
||||
label="用户名"
|
||||
name="username"
|
||||
required
|
||||
@@ -416,8 +416,8 @@ onMounted(() => {
|
||||
:disabled="final_loading"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="密码"
|
||||
name="password"
|
||||
required
|
||||
@@ -428,14 +428,14 @@ onMounted(() => {
|
||||
type="password"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="item.key === 'sms'"
|
||||
class="space-y-3"
|
||||
>
|
||||
<UFormGroup
|
||||
<UFormField
|
||||
label="手机号"
|
||||
name="mobile"
|
||||
required
|
||||
@@ -464,10 +464,11 @@ onMounted(() => {
|
||||
:loading="sms_sending"
|
||||
:disabled="!!sms_counting_down || final_loading"
|
||||
class="text-xs font-bold"
|
||||
color="gray"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</UFormGroup>
|
||||
</UFormField>
|
||||
<Transition name="pin-root">
|
||||
<div
|
||||
v-if="sms_triggered"
|
||||
@@ -512,7 +513,7 @@ onMounted(() => {
|
||||
:state="forgetPasswordState"
|
||||
@submit="onForgetPasswordSubmit"
|
||||
>
|
||||
<UFormGroup
|
||||
<UFormField
|
||||
label="手机号"
|
||||
name="mobile"
|
||||
required
|
||||
@@ -540,11 +541,11 @@ onMounted(() => {
|
||||
:loading="sms_sending"
|
||||
:disabled="!!sms_counting_down"
|
||||
class="text-xs font-bold"
|
||||
color="gray"
|
||||
color="neutral"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="验证码"
|
||||
name="sms_code"
|
||||
required
|
||||
@@ -555,8 +556,8 @@ onMounted(() => {
|
||||
class="w-full"
|
||||
:disabled="final_loading"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="新密码"
|
||||
name="password"
|
||||
required
|
||||
@@ -566,7 +567,7 @@ onMounted(() => {
|
||||
type="password"
|
||||
:disabled="final_loading"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UFormField>
|
||||
|
||||
<div>
|
||||
<UButton
|
||||
@@ -586,14 +587,14 @@ onMounted(() => {
|
||||
<div class="flex items-center justify-between">
|
||||
<UButton
|
||||
type="submit"
|
||||
color="black"
|
||||
color="neutral"
|
||||
:loading="final_loading"
|
||||
>
|
||||
登录
|
||||
</UButton>
|
||||
<UButton
|
||||
variant="link"
|
||||
color="gray"
|
||||
color="neutral"
|
||||
@click="currentTab = 2"
|
||||
>
|
||||
忘记密码
|
||||
@@ -606,7 +607,7 @@ onMounted(() => {
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<UButton
|
||||
color="gray"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
class="text-gray-500!"
|
||||
@click="
|
||||
|
||||
@@ -48,7 +48,7 @@ const onSubmit = (form: RegisterSchema) => {
|
||||
toast.add({
|
||||
title: '注册成功',
|
||||
description: '请联系客服激活账号后登录',
|
||||
color: 'green',
|
||||
color: 'success',
|
||||
icon: 'i-tabler-check',
|
||||
})
|
||||
router.push('/user/authenticate')
|
||||
@@ -59,7 +59,7 @@ const onSubmit = (form: RegisterSchema) => {
|
||||
toast.add({
|
||||
title: '注册失败',
|
||||
description: err.message || '注册失败，请稍后再试',
|
||||
color: 'red',
|
||||
color: 'error',
|
||||
icon: 'i-tabler-alert-triangle',
|
||||
})
|
||||
}
|
||||
@@ -78,7 +78,7 @@ const onSubmit = (form: RegisterSchema) => {
|
||||
<div class="flex flex-col items-center">
|
||||
<UCard
|
||||
@submit.prevent="() => onSubmit(registerState)"
|
||||
class="w-full sm:w-[400px]"
|
||||
class="w-full sm:w-100"
|
||||
>
|
||||
<!-- <template #header>
|
||||
<p
|
||||
@@ -92,7 +92,7 @@ const onSubmit = (form: RegisterSchema) => {
|
||||
</template> -->
|
||||
|
||||
<div class="space-y-3">
|
||||
<UFormGroup
|
||||
<UFormField
|
||||
label="姓名"
|
||||
name="username"
|
||||
help="请使用姓名作为用户名，将用于登录"
|
||||
@@ -103,8 +103,8 @@ const onSubmit = (form: RegisterSchema) => {
|
||||
:disabled="final_loading"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="密码"
|
||||
name="password"
|
||||
required
|
||||
@@ -115,8 +115,8 @@ const onSubmit = (form: RegisterSchema) => {
|
||||
type="password"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="手机号"
|
||||
name="mobile"
|
||||
required
|
||||
@@ -126,8 +126,8 @@ const onSubmit = (form: RegisterSchema) => {
|
||||
:disabled="final_loading"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
</UFormField>
|
||||
<UFormField
|
||||
label="公司/单位"
|
||||
name="company"
|
||||
required
|
||||
@@ -137,14 +137,14 @@ const onSubmit = (form: RegisterSchema) => {
|
||||
:disabled="final_loading"
|
||||
required
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
<UButton
|
||||
type="submit"
|
||||
color="black"
|
||||
color="neutral"
|
||||
:loading="final_loading"
|
||||
>
|
||||
注册
|
||||
@@ -155,7 +155,7 @@ const onSubmit = (form: RegisterSchema) => {
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<UButton
|
||||
color="gray"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
class="text-gray-500!"
|
||||
@click="
|
||||
|
||||
Reference in New Issue
Block a user