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

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

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

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

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

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

@@ -28,7 +28,11 @@ const showSidebar = ref(false)
const generating = ref(false)
const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
const handle_stick_mousedown = (
e: MouseEvent,
min: number = 240,
max: number = 400
) => {
const handler = leftHandler.value
if (handler) {
const startX = e.clientX
@@ -38,16 +42,24 @@ const handle_stick_mousedown = (e: MouseEvent, min: number = 240, max: number =
if (newWidth < min || newWidth > max) {
newWidth = Math.min(Math.max(newWidth, min), max)
}
handler.parentElement!.style.width = `${ newWidth }px`
handler.parentElement!.style.width = `${newWidth}px`
}
const handle_mouseup = () => {
leftSection.value?.classList.add('transition-all')
leftHandler.value?.lastElementChild?.classList.remove('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
leftHandler.value?.lastElementChild?.classList.remove(
'bg-indigo-300',
'dark:bg-indigo-700',
'w-[3px]'
)
window.removeEventListener('mousemove', handle_mousemove)
window.removeEventListener('mouseup', handle_mouseup)
}
leftSection.value?.classList.remove('transition-all')
leftHandler.value?.lastElementChild?.classList.add('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
leftHandler.value?.lastElementChild?.classList.add(
'bg-indigo-300',
'dark:bg-indigo-700',
'w-[3px]'
)
window.addEventListener('mousemove', handle_mousemove)
window.addEventListener('mouseup', handle_mouseup)
}
@@ -216,16 +228,19 @@ const defaultFormState = reactive({
prompt: '',
negative_prompt: '',
resolution: '1024:768',
styles: defaultStyles.find(item => item.value === 401),
styles: defaultStyles.find((item) => item.value === 401),
file: null,
})
watch(() => defaultFormState.file, (newVal) => {
if (newVal) {
defaultFormState.styles = img2imgStyles[0]
} else {
defaultFormState.styles = defaultStyles.find(item => item.value === 401)
watch(
() => defaultFormState.file,
(newVal) => {
if (newVal) {
defaultFormState.styles = img2imgStyles[0]
} else {
defaultFormState.styles = defaultStyles.find((item) => item.value === 401)
}
}
})
)
const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
if (!loginState.is_logged_in) {
@@ -253,147 +268,271 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
useFetchWrapped<
(HunYuan.Text2Img.req | HunYuan.Img2Img.req) & AuthedRequest,
BaseResponse<HunYuan.resp>
>(event.data.file ? 'App.Assistant_HunYuan.TenImgToImg' : 'App.Assistant_HunYuan.TenTextToImg', {
token: loginState.token as string,
user_id: loginState.user.id,
device_id: 'web',
...event.data,
styles: styleItem.value,
}).then(res => {
if (res.ret !== 200) {
>(
event.data.file
? 'App.Assistant_HunYuan.TenImgToImg'
: 'App.Assistant_HunYuan.TenTextToImg',
{
token: loginState.token as string,
user_id: loginState.user.id,
device_id: 'web',
...event.data,
styles: styleItem.value,
}
)
.then((res) => {
if (res.ret !== 200) {
toast.add({
title: '生成失败',
description: res.msg || '未知错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
history.text2img = history.text2img.filter((item) => item.fid !== fid)
return
}
history.text2img = history.text2img.map((item) => {
if (item.fid === fid) {
set(`${item.fid}`, [
`data:image/png;base64,${res.data.request_image}`,
])
item.meta = {
...item.meta,
id: res.data.data_id as string,
}
}
return item
})
})
.catch((err) => {
toast.add({
title: '生成失败',
description: res.msg || '未知错误',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x',
})
history.text2img = history.text2img.filter(item => item.fid !== fid)
return
}
history.text2img = history.text2img.map(item => {
if (item.fid === fid) {
set(`${ item.fid }`, [`data:image/png;base64,${ res.data.request_image }`])
item.meta = {
...item.meta,
id: res.data.data_id as string,
}
}
return item
})
}).catch(err => {
toast.add({
title: '生成失败',
description: err.msg || '网络错误',
color: 'red',
icon: 'i-tabler-circle-x',
.finally(() => {
generating.value = false
})
}).finally(() => {
generating.value = false
})
}
</script>
<template>
<div class="w-full flex relative">
<div ref="leftSection"
:class="{'translate-x-0': showSidebar}"
class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all" style="width: 320px">
<div ref="leftHandler"
class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
@dblclick="leftSection?.style.setProperty('width', '320px')"
@mousedown.prevent="handle_stick_mousedown">
<div
ref="leftSection"
:class="{ 'translate-x-0': showSidebar }"
class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 md:block h-[calc(100vh-4rem)] bg-neutral-200 dark:bg-neutral-800 transition-all"
style="width: 320px"
>
<div
ref="leftHandler"
class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
@dblclick="leftSection?.style.setProperty('width', '320px')"
@mousedown.prevent="handle_stick_mousedown"
>
<span
class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"></span>
class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"
></span>
</div>
<div
class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-900 rounded-r-lg shadow-lg flex md:hidden justify-center items-center">
<UButton color="black" icon="i-tabler-brush" size="lg" square @click="showSidebar = !showSidebar"></UButton>
class="absolute bottom-28 -right-12 w-12 h-12 z-10 bg-neutral-100 dark:bg-neutral-900 rounded-r-lg shadow-lg flex md:hidden justify-center items-center"
>
<UButton
color="black"
icon="i-tabler-brush"
size="lg"
square
@click="showSidebar = !showSidebar"
></UButton>
</div>
<div class="h-full flex flex-col overflow-y-auto">
<UForm :schema="defaultFormSchema" :state="defaultFormState" @submit="onDefaultFormSubmit">
<UForm
:schema="defaultFormSchema"
:state="defaultFormState"
@submit="onDefaultFormSubmit"
>
<div class="flex flex-col gap-2 p-4 pb-28">
<OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
<OptionBlock
comment="Prompts"
icon="i-tabler-article"
label="提示词"
>
<UFormGroup name="prompt">
<UTextarea v-model="defaultFormState.prompt" :rows="2" autoresize
placeholder="请输入提示词，每个提示词之间用英文逗号隔开" resize/>
<UTextarea
v-model="defaultFormState.prompt"
:rows="2"
autoresize
placeholder="请输入提示词，每个提示词之间用英文逗号隔开"
resize
/>
</UFormGroup>
</OptionBlock>
<OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
<OptionBlock
comment="Negative Prompts"
icon="i-tabler-article-off"
label="负面提示词"
>
<UFormGroup name="negative_prompt">
<UTextarea v-model="defaultFormState.negative_prompt" :rows="2" autoresize
placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
resize/>
<UTextarea
v-model="defaultFormState.negative_prompt"
:rows="2"
autoresize
placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
resize
/>
</UFormGroup>
</OptionBlock>
<OptionBlock icon="i-tabler-library-photo" label="参考图片">
<OptionBlock
icon="i-tabler-library-photo"
label="参考图片"
>
<UFormGroup name="input_image">
<ReferenceFigureSelector
:value="defaultFormState.file"
text="选择参考图片"
text-on-select="已选择参考图" @update="file => {defaultFormState.file = file}"/>
text-on-select="已选择参考图"
@update="
(file) => {
defaultFormState.file = file
}
"
/>
</UFormGroup>
</OptionBlock>
<OptionBlock icon="i-tabler-photo-hexagon" label="图片风格">
<OptionBlock
icon="i-tabler-photo-hexagon"
label="图片风格"
>
<UFormGroup name="styles">
<USelectMenu v-model="defaultFormState.styles"
:options="defaultFormState.file ? img2imgStyles : defaultStyles"></USelectMenu>
<USelectMenu
v-model="defaultFormState.styles"
:options="
defaultFormState.file ? img2imgStyles : defaultStyles
"
></USelectMenu>
</UFormGroup>
</OptionBlock>
<OptionBlock icon="i-tabler-article-off" label="图片比例">
<OptionBlock
icon="i-tabler-article-off"
label="图片比例"
>
<UFormGroup name="resolution">
<RatioSelector v-model="defaultFormState.resolution" :ratios="defaultRatios"/>
<RatioSelector
v-model="defaultFormState.resolution"
:ratios="defaultRatios"
/>
</UFormGroup>
</OptionBlock>
</div>
<div class="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2
bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400
dark:border-neutral-700">
<UButton :loading="generating" block class="font-bold" color="indigo" size="lg" type="submit">
<div
class="absolute bottom-0 inset-x-0 flex flex-col items-center gap-2 bg-neutral-200 dark:bg-neutral-800 p-4 border-t border-neutral-400 dark:border-neutral-700"
>
<UButton
:loading="generating"
block
class="font-bold"
color="indigo"
size="lg"
type="submit"
>
{{ generating ? '生成中' : '生成' }}
</UButton>
<p class="text-xs text-neutral-400 dark:text-neutral-500 font-bold">
生成即代表您同意<a class="underline underline-offset-2" href="#"
target="_blank">用户许可协议</a>
生成即代表您同意
<a
class="underline underline-offset-2"
href="#"
target="_blank"
>
用户许可协议
</a>
</p>
</div>
</UForm>
</div>
</div>
<ClientOnly>
<div class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto">
<div v-if="!loginState.is_logged_in"
class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
<Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="i-tabler-user-circle"/>
<p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
<UButton class="mt-2 font-bold" color="black" size="xs" variant="solid"
@click="modal.open(ModalAuthentication)">
<div
class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto"
>
<div
v-if="!loginState.is_logged_in"
class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
>
<Icon
class="text-7xl text-neutral-300 dark:text-neutral-700"
name="i-tabler-user-circle"
/>
<p class="text-sm text-neutral-500 dark:text-neutral-400">
请登录后使用
</p>
<UButton
class="mt-2 font-bold"
color="black"
size="xs"
variant="solid"
@click="modal.open(ModalAuthentication)"
>
登录
</UButton>
</div>
<div v-else-if="history.text2img.length === 0"
class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
<Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="i-tabler-photo-hexagon"/>
<div
v-else-if="history.text2img.length === 0"
class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900"
>
<Icon
class="text-7xl text-neutral-300 dark:text-neutral-700"
name="i-tabler-photo-hexagon"
/>
<p class="text-sm text-neutral-500 dark:text-neutral-400">没有记录</p>
</div>
<ResultBlock v-for="(result, k) in history.text2img" v-else :key="result.fid" :fid="result.fid"
:meta="result.meta" :prompt="result.prompt"
@use-reference="file => {defaultFormState.file = file}">
<ResultBlock
v-for="(result, k) in history.text2img"
v-else
:key="result.fid"
:fid="result.fid"
:meta="result.meta"
:prompt="result.prompt"
@use-reference="
(file) => {
defaultFormState.file = file
}
"
>
<template #header-right>
<UPopover overlay>
<UButton color="black" icon="i-tabler-trash" size="xs" variant="ghost"></UButton>
<template #panel="{close}">
<UButton
color="black"
icon="i-tabler-trash"
size="xs"
variant="ghost"
></UButton>
<template #panel="{ close }">
<div class="p-4 flex flex-col gap-4">
<h2 class="text-sm">删除后无法恢复，确定删除？</h2>
<div class="flex items-center justify-end gap-2">
<UButton class="font-bold" color="gray" size="xs" @click="close">
<UButton
class="font-bold"
color="gray"
size="xs"
@click="close"
>
取消
</UButton>
<UButton class="font-bold" color="red" size="xs"
@click="() => {
history.text2img.splice(k, 1)
del(result.fid)
close()
}">
<UButton
class="font-bold"
color="red"
size="xs"
@click="
() => {
history.text2img.splice(k, 1)
del(result.fid)
close()
}
"
>
仍然删除
</UButton>
</div>
@@ -402,15 +541,17 @@ const onDefaultFormSubmit = (event: FormSubmitEvent<DefaultFormSchema>) => {
</UPopover>
</template>
</ResultBlock>
<div class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600">
<UIcon name="i-tabler-info-triangle"/>
<p class="text-xs font-bold">所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地</p>
<div
class="flex justify-center items-center gap-1 text-neutral-400 dark:text-neutral-600"
>
<UIcon name="i-tabler-info-triangle" />
<p class="text-xs font-bold">
所有图片均为 AI 生成，服务器不会保存任何图像，数据仅保存在浏览器本地
</p>
</div>
</div>
</ClientOnly>
</div>
</template>
<style scoped>
</style>
<style scoped></style>

4
pages/aigc/navigation.vue
View File

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