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

17
components/aigc/NavItem.vue
View File

@@ -44,15 +44,22 @@ const activeClass = computed(() => {
class="px-4 py-3 flex justify-between items-center rounded-lg transition cursor-pointer"
>
<div class="flex items-center gap-2">
<Icon :name="icon" class="text-xl inline"/>
<Icon
:name="icon"
class="text-xl inline"
/>
<h1 class="flex-1 text-[14px] font-medium line-clamp-1">
{{ label }}
</h1>
</div>
<UBadge v-if="admin" color="amber" label="OP" size="xs" variant="subtle"/>
<UBadge
v-if="admin"
color="amber"
label="OP"
size="xs"
variant="subtle"
/>
</NuxtLink>
</template>
<style scoped>
</style>
<style scoped></style>

51
components/aigc/RatioSelector.vue
View File

@@ -1,13 +1,15 @@
<script setup lang="ts">
import type {PropType} from 'vue';
import type { PropType } from 'vue'
const props = defineProps({
ratios: {
type: Array as PropType<{
ratio: string,
label?: string,
value: string | number
}[]>,
type: Array as PropType<
{
ratio: string
label?: string
value: string | number
}[]
>,
required: true,
},
modelValue: {
@@ -40,7 +42,7 @@ const getRatio = (ratio: string) => {
}
}
const getShapeSize = (r: { w: number, h: number }, size: number) => {
const getShapeSize = (r: { w: number; h: number }, size: number) => {
const ratio = r.w / r.h
if (r.w > r.h) {
return {
@@ -58,25 +60,36 @@ const getShapeSize = (r: { w: number, h: number }, size: number) => {
<template>
<div class="grid grid-cols-4 gap-2">
<div v-for="(ratio, k) in ratios" :key="ratio.value" @click="handle_select(ratio.value)"
class="w-full aspect-square bg-neutral-200/50 dark:bg-neutral-700/50 rounded-lg py-1.5 flex flex-col justify-between items-center cursor-pointer select-none"
:class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']">
<div class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded flex justify-center items-center"
:class="[ratio.value === selected && 'bg-sky-300/50 dark:bg-sky-600/50']" :style="{
width: getShapeSize(getRatio(ratio.ratio), 30).w * 1.1 + 'px',
height: getShapeSize(getRatio(ratio.ratio), 30).h * 1.1 + 'px'
}">
<div
v-for="(ratio, k) in ratios"
:key="ratio.value"
@click="handle_select(ratio.value)"
class="w-full aspect-square bg-neutral-200/50 dark:bg-neutral-700/50 rounded-lg py-1.5 flex flex-col justify-between items-center cursor-pointer select-none"
:class="[ratio.value === selected && 'bg-sky-200/50 dark:bg-sky-700/50']"
>
<div
class="bg-neutral-300/50 dark:bg-neutral-600/50 text-neutral-600 dark:text-neutral-300 rounded flex justify-center items-center"
:class="[
ratio.value === selected && 'bg-sky-300/50 dark:bg-sky-600/50',
]"
:style="{
width: getShapeSize(getRatio(ratio.ratio), 30).w * 1.1 + 'px',
height: getShapeSize(getRatio(ratio.ratio), 30).h * 1.1 + 'px',
}"
>
<span class="text-xs font-thin font-mono">{{ ratio.ratio }}</span>
</div>
<span class="text-[10px]">
{{
ratio?.label || getRatio(ratio.ratio).w === getRatio(ratio.ratio).h ? '正方形' : (getRatio(ratio.ratio).w > getRatio(ratio.ratio).h ? '横向' : '纵向')
ratio?.label || getRatio(ratio.ratio).w === getRatio(ratio.ratio).h
? '正方形'
: getRatio(ratio.ratio).w > getRatio(ratio.ratio).h
? '横向'
: '纵向'
}}
</span>
</div>
</div>
</template>
<style scoped>
</style>
<style scoped></style>

145
components/aigc/ReferenceFigureSelector.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import type {PropType} from 'vue';
import type { PropType } from 'vue'
const props = defineProps({
value: {
@@ -22,18 +22,21 @@ const selected_file = ref<File | null>(null)
const image_dataurl = ref('')
const loading = ref(false)
watch(() => props.value, async (newVal) => {
handleFileInput({target: {files: [newVal!]}})
})
watch(
() => props.value,
async (newVal) => {
handleFileInput({ target: { files: [newVal!] } })
}
)
const handleTrashClick = () => {
fileInput.value!.value = '';
fileInput.value!.value = ''
selected_file.value = null
image_dataurl.value = ''
emit('update', null)
}
const handleFileInput = (event: { target: any; }) => {
const handleFileInput = (event: { target: any }) => {
if (event.target.files) {
const file = event.target.files[0]
if (!file) return
@@ -54,49 +57,117 @@ const handleFileInput = (event: { target: any; }) => {
</script>
<template>
<div class="w-full bg-neutral-200/50 dark:bg-neutral-700/50 rounded-md flex justify-between items-center p-1.5 gap-2 relative
hover:bg-neutral-200/80 hover:dark:bg-neutral-700/80 transition border dark:border-neutral-700 cursor-pointer"
:class="{'cursor-pointer': !loading, 'cursor-not-allowed': loading}"
@click="() => !loading && fileInput?.click()">
<input ref="fileInput" type="file" class="hidden" @change="handleFileInput" accept="image/*"/>
<Transition name="trash-btn" mode="out-in">
<button type="button" @click.stop.prevent="handleTrashClick" v-if="!!selected_file"
class="absolute -top-1 -right-1 bg-white dark:bg-black rounded-full p-1 shadow-lg border dark:border-neutral-700">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/>
<div
class="w-full bg-neutral-200/50 dark:bg-neutral-700/50 rounded-md flex justify-between items-center p-1.5 gap-2 relative hover:bg-neutral-200/80 hover:dark:bg-neutral-700/80 transition border dark:border-neutral-700 cursor-pointer"
:class="{ 'cursor-pointer': !loading, 'cursor-not-allowed': loading }"
@click="() => !loading && fileInput?.click()"
>
<input
ref="fileInput"
type="file"
class="hidden"
@change="handleFileInput"
accept="image/*"
/>
<Transition
name="trash-btn"
mode="out-in"
>
<button
type="button"
@click.stop.prevent="handleTrashClick"
v-if="!!selected_file"
class="absolute -top-1 -right-1 bg-white dark:bg-black rounded-full p-1 shadow-lg border dark:border-neutral-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
/>
</svg>
</button>
</Transition>
<div class="w-12 h-12 rounded-md overflow-hidden">
<Transition name="preview-swap" mode="out-in">
<div v-if="loading"
class="w-full h-full flex justify-center items-center rounded-md border-2 border-dashed border-neutral-400 dark:border-neutral-600 text-neutral-400 dark:text-neutral-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"/>
<path fill="currentColor"
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
<animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
values="0 12 12;360 12 12"/>
<Transition
name="preview-swap"
mode="out-in"
>
<div
v-if="loading"
class="w-full h-full flex justify-center items-center rounded-md border-2 border-dashed border-neutral-400 dark:border-neutral-600 text-neutral-400 dark:text-neutral-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/>
<path
fill="currentColor"
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
>
<animateTransform
attributeName="transform"
dur="0.75s"
repeatCount="indefinite"
type="rotate"
values="0 12 12;360 12 12"
/>
</path>
</svg>
</div>
<div v-else-if="!selected_file"
class="w-full h-full flex justify-center items-center rounded-md border-2 border-dashed border-neutral-400 dark:border-neutral-600 text-neutral-400 dark:text-neutral-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v14m-7-7h14"/>
<div
v-else-if="!selected_file"
class="w-full h-full flex justify-center items-center rounded-md border-2 border-dashed border-neutral-400 dark:border-neutral-600 text-neutral-400 dark:text-neutral-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v14m-7-7h14"
/>
</svg>
</div>
<img v-else class="w-12 h-12 rounded-md object-cover" :src="image_dataurl" :key="selected_file.name"
alt="Preview">
<img
v-else
class="w-12 h-12 rounded-md object-cover"
:src="image_dataurl"
:key="selected_file.name"
alt="Preview"
/>
</Transition>
</div>
<div class="flex-1 flex justify-center">
<p class="text-neutral-400/80 dark:text-neutral-500 text-sm font-medium select-none text-center">
<p
class="text-neutral-400/80 dark:text-neutral-500 text-sm font-medium select-none text-center"
>
{{ selected_file ? textOnSelect : text }}
<span v-if="selected_file && textOnSelect" class="block text-[10px] text-center">
<span
v-if="selected_file && textOnSelect"
class="block text-[10px] text-center"
>
{{ selected_file?.name || textOnSelect }}
</span>
</p>
@@ -124,4 +195,4 @@ const handleFileInput = (event: { target: any; }) => {
.preview-swap-leave-to {
@apply blur-sm;
}
</style>
</style>

32
components/aigc/chat/ChatItem.vue
View File

@@ -21,29 +21,35 @@ const dayjs = useDayjs()
<template>
<div
class="chat-card group"
:class="{'active': active}"
:title="chatSession.subject"
class="chat-card group"
:class="{ active: active }"
:title="chatSession.subject"
>
<div class="chat-card-title">
<Icon
v-if="!!chatSession.assistant"
name="i-tabler-masks-theater"
class="text-lg mr-1 "
v-if="!!chatSession.assistant"
name="i-tabler-masks-theater"
class="text-lg mr-1"
/>
<span class="flex-1 text-ellipsis overflow-x-hidden">
{{ !!chatSession.assistant ? chatSession.assistant.tpl_name : chatSession.subject }}
</span>
{{
!!chatSession.assistant
? chatSession.assistant.tpl_name
: chatSession.subject
}}
</span>
</div>
<div class="chat-card-meta">
<div>{{ chatSession.messages.length }}条对话</div>
<div>{{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
<div>
{{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</div>
</div>
<div
@click.stop="emit('remove', chatSession)"
class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
@click.stop="emit('remove', chatSession)"
class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
>
<Icon name="i-tabler-trash"/>
<Icon name="i-tabler-trash" />
</div>
</div>
</template>
@@ -72,4 +78,4 @@ const dayjs = useDayjs()
@apply cursor-pointer;
}
}
</style>
</style>

53
components/aigc/chat/Message.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import type {PropType} from 'vue'
import type {ChatMessage} from '~/typings/llm'
import type { PropType } from 'vue'
import type { ChatMessage } from '~/typings/llm'
import MessageResponding from '~/components/Icon/MessageResponding.vue'
const props = defineProps({
@@ -38,31 +38,54 @@ const message_background = computed(() => {
</script>
<template>
<div class="chat" :class="{'justify-end': message_place_end}">
<div class="chat-inside" :class="{'items-end': message_place_end}">
<div
class="chat"
:class="{ 'justify-end': message_place_end }"
>
<div
class="chat-inside"
:class="{ 'items-end': message_place_end }"
>
<div class="chat-inside-avatar">
<Icon :name="message_avatar" class="text-lg"/>
<Icon
:name="message_avatar"
class="text-lg"
/>
</div>
<div class="flex flex-col" :class="{'items-end': message_place_end}">
<Transition mode="out-in" name="message-content-change">
<div
class="flex flex-col"
:class="{ 'items-end': message_place_end }"
>
<Transition
mode="out-in"
name="message-content-change"
>
<div
class="chat-inside-content relative"
:class="message_background"
:key="message.content"
class="chat-inside-content relative"
:class="message_background"
:key="message.content"
>
<div v-if="message.content">
<!-- TODO: 生成结果的代码添加复制按钮 -->
<Markdown :source="message.content"/>
<Markdown :source="message.content" />
</div>
<span v-else>
<MessageResponding class="text-xl text-neutral-500 dark:text-neutral-300 mx-2"/>
<MessageResponding
class="text-xl text-neutral-500 dark:text-neutral-300 mx-2"
/>
</span>
</div>
</Transition>
<div v-if="message.preset" class="chat-inside-extra">
<div
v-if="message.preset"
class="chat-inside-extra"
>
预设消息
</div>
<div v-else-if="message.create_at" class="chat-inside-extra">
<div
v-else-if="message.create_at"
class="chat-inside-extra"
>
{{ dayjs(message.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</div>
</div>
@@ -103,4 +126,4 @@ const message_background = computed(() => {
.message-content-change-enter-from {
@apply opacity-0 translate-y-4;
}
</style>
</style>

179
components/aigc/chat/NewSessionScreen.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import type {Assistant} from '~/typings/llm'
import {useLazyAsyncData} from '#app'
import type { Assistant } from '~/typings/llm'
import { useLazyAsyncData } from '#app'
const loginState = useLoginState()
@@ -16,116 +16,177 @@ const emit = defineEmits({
cancel: () => true,
})
const {
data: assistantTemplates,
pending: assistantTemplatesPending,
} = await useLazyAsyncData(
const { data: assistantTemplates, pending: assistantTemplatesPending } =
await useLazyAsyncData(
'App.Assistant_Template.GetList',
() => useFetchWrapped<
req.AssistantTemplateList & AuthedRequest, BaseResponse<PagedData<Assistant>>
>('App.Assistant_Template.GetList', {
user_id: loginState.user.id,
token: loginState.token as string,
page: 1,
perpage: 20,
}), {
() =>
useFetchWrapped<
req.AssistantTemplateList & AuthedRequest,
BaseResponse<PagedData<Assistant>>
>('App.Assistant_Template.GetList', {
user_id: loginState.user.id,
token: loginState.token as string,
page: 1,
perpage: 20,
}),
{
server: false,
},
)
}
)
</script>
<template>
<div class="w-full h-full flex flex-col items-center gap-4 relative">
<Transition name="loading-screen">
<div v-if="assistantTemplatesPending"
class="absolute inset-0 bg-white dark:bg-neutral-900 flex justify-center items-center z-[1] text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24">
<div
v-if="assistantTemplatesPending"
class="absolute inset-0 bg-white dark:bg-neutral-900 flex justify-center items-center z-[1] text-primary"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 24 24"
>
<defs>
<filter id="svgSpinnersGooeyBalls20">
<feGaussianBlur in="SourceGraphic" result="y" stdDeviation="1"/>
<feColorMatrix in="y" result="z" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"/>
<feBlend in="SourceGraphic" in2="z"/>
<feGaussianBlur
in="SourceGraphic"
result="y"
stdDeviation="1"
/>
<feColorMatrix
in="y"
result="z"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
/>
<feBlend
in="SourceGraphic"
in2="z"
/>
</filter>
</defs>
<g filter="url(#svgSpinnersGooeyBalls20)">
<circle cx="5" cy="12" r="4" fill="currentColor">
<animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
repeatCount="indefinite" values="5;8;5"/>
<circle
cx="5"
cy="12"
r="4"
fill="currentColor"
>
<animate
attributeName="cx"
calcMode="spline"
dur="2s"
keySplines=".36,.62,.43,.99;.79,0,.58,.57"
repeatCount="indefinite"
values="5;8;5"
/>
</circle>
<circle cx="19" cy="12" r="4" fill="currentColor">
<animate attributeName="cx" calcMode="spline" dur="2s" keySplines=".36,.62,.43,.99;.79,0,.58,.57"
repeatCount="indefinite" values="19;16;19"/>
<circle
cx="19"
cy="12"
r="4"
fill="currentColor"
>
<animate
attributeName="cx"
calcMode="spline"
dur="2s"
keySplines=".36,.62,.43,.99;.79,0,.58,.57"
repeatCount="indefinite"
values="19;16;19"
/>
</circle>
<animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
values="0 12 12;360 12 12"/>
<animateTransform
attributeName="transform"
dur="0.75s"
repeatCount="indefinite"
type="rotate"
values="0 12 12;360 12 12"
/>
</g>
</svg>
</div>
</Transition>
<div class="w-full p-2">
<UButton
v-if="!nonBack"
variant="ghost"
size="xs"
@click="emit('cancel')"
v-if="!nonBack"
variant="ghost"
size="xs"
@click="emit('cancel')"
>
<template #leading>
<UIcon name="i-tabler-chevron-left"/>
<UIcon name="i-tabler-chevron-left" />
</template>
<span>返回</span>
</UButton>
</div>
<div class="flex flex-col items-center gap-8">
<h1 class="text-lg font-medium flex flex-col items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="2em"
height="2em"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path
d="M13.192 9h6.616a2 2 0 0 1 1.992 2.183l-.567 6.182A4 4 0 0 1 17.25 21h-1.5a4 4 0 0 1-3.983-3.635l-.567-6.182A2 2 0 0 1 13.192 9M15 13h.01M18 13h.01"/>
d="M13.192 9h6.616a2 2 0 0 1 1.992 2.183l-.567 6.182A4 4 0 0 1 17.25 21h-1.5a4 4 0 0 1-3.983-3.635l-.567-6.182A2 2 0 0 1 13.192 9M15 13h.01M18 13h.01"
/>
<path
d="M15 16.5c1 .667 2 .667 3 0m-9.368-.518A4.037 4.037 0 0 1 8.25 16h-1.5a4 4 0 0 1-3.983-3.635L2.2 6.183A2 2 0 0 1 4.192 4h6.616a2 2 0 0 1 2 2M6 8h.01M9 8h.01"/>
<path d="M6 12c.764-.51 1.528-.63 2.291-.36"/>
d="M15 16.5c1 .667 2 .667 3 0m-9.368-.518A4.037 4.037 0 0 1 8.25 16h-1.5a4 4 0 0 1-3.983-3.635L2.2 6.183A2 2 0 0 1 4.192 4h6.616a2 2 0 0 1 2 2M6 8h.01M9 8h.01"
/>
<path d="M6 12c.764-.51 1.528-.63 2.291-.36" />
</g>
</svg>
<span>选择智能助手</span>
</h1>
<UButton
class="group ring-primary hover:ring-2 transition duration-300"
variant="soft"
size="lg"
:ui="{ rounded: 'rounded-full' }"
@click="emit('select', null)"
class="group ring-primary hover:ring-2 transition duration-300"
variant="soft"
size="lg"
:ui="{ rounded: 'rounded-full' }"
@click="emit('select', null)"
>
<span class="-mt-0.5">直接开始</span>
<template #trailing>
<span class="group-hover:translate-x-1 transition duration-300 ease-out relative w-3 h-full -mt-0.5">
<span
class="group-hover:translate-x-1 transition duration-300 ease-out relative w-3 h-full -mt-0.5"
>
<UIcon
name="i-tabler-arrow-right"
class="w-5 h-5 absolute top-auto bottom-auto right-0 opacity-0 group-hover:opacity-100 transition duration-300"
name="i-tabler-arrow-right"
class="w-5 h-5 absolute top-auto bottom-auto right-0 opacity-0 group-hover:opacity-100 transition duration-300"
/>
<UIcon
name="i-tabler-chevron-right"
class="w-5 h-5 absolute top-auto bottom-auto right-0 -mr-[3.5px] group-hover:opacity-0 transition duration-300"
name="i-tabler-chevron-right"
class="w-5 h-5 absolute top-auto bottom-auto right-0 -mr-[3.5px] group-hover:opacity-0 transition duration-300"
/>
</span>
</template>
</UButton>
</div>
<div
class="w-full md:w-3/4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 overflow-y-auto p-4 md:p-8"
class="w-full md:w-3/4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 overflow-y-auto p-4 md:p-8"
>
<div
v-for="assistant in assistantTemplates?.data.items || []"
:key="assistant.id"
class="assistant-item select-none"
@click="emit('select', assistant)"
v-for="assistant in assistantTemplates?.data.items || []"
:key="assistant.id"
class="assistant-item select-none"
@click="emit('select', assistant)"
>
<div class="flex flex-col gap-1">
<div class="text-base font-medium">{{ assistant.tpl_name }}</div>
<div class="text-sm text-neutral-500 dark:text-neutral-400">{{ assistant.des }}</div>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
{{ assistant.des }}
</div>
</div>
</div>
</div>
</div>
</template>
@@ -144,4 +205,4 @@ const {
@apply w-full bg-white dark:bg-neutral-800 rounded-lg shadow-sm ring-primary ring-offset-2 dark:ring-offset-0 hover:ring-2 transition;
@apply flex items-center gap-4 px-4 py-2 cursor-pointer border dark:border-neutral-700 hover:border-transparent;
}
</style>
</style>

42
components/aigc/drawing/OptionBlock.vue
View File

@@ -1,39 +1,51 @@
<script lang="ts" setup>
const props = defineProps({
label: {
type: String,
default: ''
default: '',
},
icon: {
type: String,
default: ''
default: '',
},
comment: {
type: String,
default: ''
}
default: '',
},
})
</script>
<template>
<div class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded flex flex-col gap-1 shadow">
<div
class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded flex flex-col gap-1 shadow"
>
<div class="flex items-center gap-1 text-sm">
<UIcon v-if="icon" :name="icon" class="text-base inline-block"/>
<div class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden">
<UIcon
v-if="icon"
:name="icon"
class="text-base inline-block"
/>
<div
class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden"
>
<span>{{ label }}</span>
<UTooltip v-if="comment" :popper="{ arrow: true, placement: 'right' }" :text="comment">
<UIcon class="text-base" name="i-tabler-help"/>
<UTooltip
v-if="comment"
:popper="{ arrow: true, placement: 'right' }"
:text="comment"
>
<UIcon
class="text-base"
name="i-tabler-help"
/>
</UTooltip>
</div>
<slot name="actions"/>
<slot name="actions" />
</div>
<div class="flex flex-col gap-2">
<slot/>
<slot />
</div>
</div>
</template>
<style scoped>
</style>
<style scoped></style>

256
components/aigc/drawing/ResultBlock.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type {ResultBlockMeta} from '~/components/aigc/drawing/index';
import type {PropType} from 'vue';
import dayjs from 'dayjs';
import {get} from 'idb-keyval';
import type { ResultBlockMeta } from '~/components/aigc/drawing/index'
import type { PropType } from 'vue'
import dayjs from 'dayjs'
import { get } from 'idb-keyval'
const props = defineProps({
icon: {
@@ -35,7 +35,7 @@ const cachedImagesInterval = ref<NodeJS.Timeout | null>(null)
onMounted(async () => {
cachedImagesInterval.value = setInterval(async () => {
const res = await get(props.fid) as string[] || []
const res = ((await get(props.fid)) as string[]) || []
if (res.length === cachedImages.value.length) return
cachedImages.value = res
}, 200)
@@ -56,110 +56,224 @@ const handle_download = (url: string) => {
const handle_use_reference = async (blob_url: string) => {
fetch(blob_url)
.then(res => res.blob())
.then(blob => {
const file = new File([blob], `xsh_drawing-${props.meta?.datetime! * 1000}.png`, {type: 'image/png'})
emit('use-reference', file)
})
.catch(() => {
toast.add({
title: '转换失败',
description: '无法获取图片数据',
color: 'red',
icon: 'i-tabler-circle-x',
.then((res) => res.blob())
.then((blob) => {
const file = new File(
[blob],
`xsh_drawing-${props.meta?.datetime! * 1000}.png`,
{ type: 'image/png' }
)
emit('use-reference', file)
})
.catch(() => {
toast.add({
title: '转换失败',
description: '无法获取图片数据',
color: 'red',
icon: 'i-tabler-circle-x',
})
})
})
}
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text).then(() => {
toast.add({
title: '复制成功',
description: '已将内容复制到剪贴板',
color: 'primary',
icon: 'i-tabler-copy',
navigator.clipboard
.writeText(text)
.then(() => {
toast.add({
title: '复制成功',
description: '已将内容复制到剪贴板',
color: 'primary',
icon: 'i-tabler-copy',
})
})
}).catch(() => {
toast.add({
title: '复制失败',
description: '无法复制到剪贴板',
color: 'red',
icon: 'i-tabler-circle-x',
.catch(() => {
toast.add({
title: '复制失败',
description: '无法复制到剪贴板',
color: 'red',
icon: 'i-tabler-circle-x',
})
})
})
}
</script>
<template>
<div class="w-full">
<div class="flex items-center gap-1">
<UIcon :name="icon"/>
<UIcon :name="icon" />
<h1 class="text-sm font-semibold">
{{ meta.type || 'AI 智能绘图' }}
</h1>
<UDivider class="flex-1" size="sm"/>
<UButton color="black" size="xs" icon="i-tabler-info-circle"
:variant="show_meta ? 'solid' : 'ghost'" :disabled="!meta"
@click="show_meta = !show_meta"></UButton>
<slot name="header-right"/>
<UDivider
class="flex-1"
size="sm"
/>
<UButton
color="black"
size="xs"
icon="i-tabler-info-circle"
:variant="show_meta ? 'solid' : 'ghost'"
:disabled="!meta"
@click="show_meta = !show_meta"
></UButton>
<slot name="header-right" />
</div>
<div v-if="prompt" class="flex items-start gap-2 mt-1 mb-2">
<UIcon name="i-tabler-article" class="mt-0.5"/>
<p class="text-sm flex-1 text-ellipsis cursor-pointer"
:class="{'line-clamp-1': !expand_prompt, 'line-clamp-none': expand_prompt}"
@click="expand_prompt = !expand_prompt">
<div
v-if="prompt"
class="flex items-start gap-2 mt-1 mb-2"
>
<UIcon
name="i-tabler-article"
class="mt-0.5"
/>
<p
class="text-sm flex-1 text-ellipsis cursor-pointer"
:class="{
'line-clamp-1': !expand_prompt,
'line-clamp-none': expand_prompt,
}"
@click="expand_prompt = !expand_prompt"
>
{{ prompt }}
</p>
<UButton color="gray" size="xs" icon="i-tabler-copy" variant="ghost" class="-mt-1"
@click="copyToClipboard(prompt)"></UButton>
<UButton
color="gray"
size="xs"
icon="i-tabler-copy"
variant="ghost"
class="-mt-1"
@click="copyToClipboard(prompt)"
></UButton>
</div>
<div v-if="cachedImages.length > 0" class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x">
<div class="h-full aspect-auto relative rounded-lg shadow-md overflow-hidden group"
v-for="(url, i) in cachedImages" :key="`${fid}-${i}`">
<div class="absolute inset-0 bg-gradient-to-t from-neutral-800/40 to-transparent w-full h-full flex items-end
scale-105 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition">
<div
v-if="cachedImages.length > 0"
class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x"
>
<div
class="h-full aspect-auto relative rounded-lg shadow-md overflow-hidden group"
v-for="(url, i) in cachedImages"
:key="`${fid}-${i}`"
>
<div
class="absolute inset-0 bg-gradient-to-t from-neutral-800/40 to-transparent w-full h-full flex items-end scale-105 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition"
>
<div class="w-full flex justify-end gap-1 p-1">
<UTooltip text="以此图为参考创作">
<UButton color="indigo" variant="soft" size="2xs" icon="i-tabler-copy" square
@click="handle_use_reference(url)"></UButton>
<UButton
color="indigo"
variant="soft"
size="2xs"
icon="i-tabler-copy"
square
@click="handle_use_reference(url)"
></UButton>
</UTooltip>
<UTooltip text="下载">
<UButton color="indigo" variant="soft" size="2xs" icon="i-tabler-download" square
@click="handle_download(url)"></UButton>
<UButton
color="indigo"
variant="soft"
size="2xs"
icon="i-tabler-download"
square
@click="handle_download(url)"
></UButton>
</UTooltip>
</div>
</div>
<img class="result-image" :src="useBlobUrlFromB64(url)" alt="AI Generated"/>
<img
class="result-image"
:src="useBlobUrlFromB64(url)"
alt="AI Generated"
/>
</div>
</div>
<div v-else class="h-64 aspect-[3/4] mb-4 rounded-lg placeholder-gradient flex justify-center items-center">
<UIcon name="i-svg-spinners-tadpole" class="text-3xl"/>
<div
v-else
class="h-64 aspect-[3/4] mb-4 rounded-lg placeholder-gradient flex justify-center items-center"
>
<UIcon
name="i-svg-spinners-tadpole"
class="text-3xl"
/>
</div>
<Transition v-if="meta" name="meta">
<div v-if="show_meta" class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2">
<UBadge v-if="meta.modal" color="black" variant="solid" class="text-[10px] font-bold gap-0.5">
<UIcon class="text-sm" name="i-tabler-box-seam"/>
<Transition
v-if="meta"
name="meta"
>
<div
v-if="show_meta"
class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2"
>
<UBadge
v-if="meta.modal"
color="black"
variant="solid"
class="text-[10px] font-bold gap-0.5"
>
<UIcon
class="text-sm"
name="i-tabler-box-seam"
/>
{{ meta.modal }}
</UBadge>
<UBadge v-if="meta.style" color="green" variant="subtle" class="text-[10px] font-bold gap-0.5">
<UIcon class="text-sm" name="i-tabler-christmas-tree"/>
<UBadge
v-if="meta.style"
color="green"
variant="subtle"
class="text-[10px] font-bold gap-0.5"
>
<UIcon
class="text-sm"
name="i-tabler-christmas-tree"
/>
{{ meta.style }}
</UBadge>
<UBadge v-if="meta.cost" color="amber" variant="subtle" class="text-[10px] font-bold gap-0.5">
<UIcon class="text-sm" name="i-solar-fire-bold"/>
<UBadge
v-if="meta.cost"
color="amber"
variant="subtle"
class="text-[10px] font-bold gap-0.5"
>
<UIcon
class="text-sm"
name="i-solar-fire-bold"
/>
{{ meta.cost }}
</UBadge>
<UBadge v-if="meta.ratio" color="indigo" variant="subtle" class="text-[10px] font-bold gap-0.5">
<UIcon class="text-sm" name="i-tabler-aspect-ratio"/>
<UBadge
v-if="meta.ratio"
color="indigo"
variant="subtle"
class="text-[10px] font-bold gap-0.5"
>
<UIcon
class="text-sm"
name="i-tabler-aspect-ratio"
/>
{{ meta.ratio }}
</UBadge>
<UBadge v-if="meta.id" color="indigo" variant="subtle" class="text-[10px] font-bold gap-0.5">
<UIcon class="text-sm" name="i-tabler-number"/>
<UBadge
v-if="meta.id"
color="indigo"
variant="subtle"
class="text-[10px] font-bold gap-0.5"
>
<UIcon
class="text-sm"
name="i-tabler-number"
/>
{{ meta.id }}
</UBadge>
<UBadge v-if="meta.datetime" color="indigo" variant="subtle" class="text-[10px] font-bold gap-0.5">
<UIcon class="text-sm" name="i-tabler-calendar-month"/>
<UBadge
v-if="meta.datetime"
color="indigo"
variant="subtle"
class="text-[10px] font-bold gap-0.5"
>
<UIcon
class="text-sm"
name="i-tabler-calendar-month"
/>
{{ dayjs(meta.datetime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
</UBadge>
</div>
@@ -186,4 +300,4 @@ const copyToClipboard = (text: string) => {
.placeholder-gradient {
@apply animate-pulse bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800;
}
</style>
</style>

2
components/aigc/drawing/index.d.ts vendored
View File

@@ -6,4 +6,4 @@ export declare interface ResultBlockMeta {
style?: string
datetime?: number
type?: string
}
}

321
components/aigc/generation/GBTaskCard.vue
View File

@@ -31,7 +31,9 @@ const selectedBackgroundFile = ref<File | null>(null)
const selectedBackgroundPreview = ref<string>('')
const isCombinatorLoading = ref(false)
const compositingProgress = ref(0)
const compositingPhase = ref<'loading' | 'analyzing' | 'preparing' | 'executing' | 'finalizing'>('loading')
const compositingPhase = ref<
'loading' | 'analyzing' | 'preparing' | 'executing' | 'finalizing'
>('loading')
const combinatorError = ref<string>('')
const fileInputRef = ref<HTMLInputElement | null>(null)
const compositedVideoBlob = ref<Blob | null>(null)
@@ -39,11 +41,11 @@ const compositedVideoBlob = ref<Blob | null>(null)
// 阶段显示文本
const phaseText = computed(() => {
const phaseMap: Record<typeof compositingPhase.value, string> = {
'loading': '加载资源...',
'analyzing': '分析图片...',
'preparing': '准备合成...',
'executing': '合成中...',
'finalizing': '完成处理...',
loading: '加载资源...',
analyzing: '分析图片...',
preparing: '准备合成...',
executing: '合成中...',
finalizing: '完成处理...',
}
return phaseMap[compositingPhase.value]
})
@@ -51,9 +53,9 @@ const phaseText = computed(() => {
const handleBackgroundFileSelect = (event: Event) => {
const target = event.target as HTMLInputElement
const file = target.files?.[0]
if (!file) return
// 验证文件类型
if (!file.type.startsWith('image/')) {
toast.add({
@@ -64,7 +66,7 @@ const handleBackgroundFileSelect = (event: Event) => {
})
return
}
selectedBackgroundFile.value = file
const reader = new FileReader()
reader.onload = (e) => {
@@ -85,12 +87,12 @@ const composeBackgroundVideo = async () => {
})
return
}
try {
isCombinatorLoading.value = true
compositingProgress.value = 0
combinatorError.value = ''
// 使用 FFmpeg WASM 进行视频背景合成
const resultBlob = await useVideoBackgroundCompositing(
props.video.video_alpha_url!,
@@ -99,12 +101,12 @@ const composeBackgroundVideo = async () => {
onProgress: (info) => {
compositingProgress.value = info.progress
compositingPhase.value = info.phase
}
},
}
)
compositedVideoBlob.value = resultBlob
toast.add({
title: '合成成功',
description: '背景已成功合成，可预览或下载',
@@ -126,7 +128,7 @@ const composeBackgroundVideo = async () => {
const downloadCompositedVideo = () => {
if (!compositedVideoBlob.value) return
const url = URL.createObjectURL(compositedVideoBlob.value)
const link = document.createElement('a')
link.href = url
@@ -138,7 +140,9 @@ const downloadCompositedVideo = () => {
}
const compositedVideoUrl = computed(() => {
return compositedVideoBlob.value ? URL.createObjectURL(compositedVideoBlob.value) : ''
return compositedVideoBlob.value
? URL.createObjectURL(compositedVideoBlob.value)
: ''
})
const startDownload = (url: string, filename: string) => {
@@ -148,12 +152,9 @@ const startDownload = (url: string, filename: string) => {
downloadingState.video = 0
}
const {
download,
progressEmitter,
} = useDownload(url, filename)
const { download, progressEmitter } = useDownload(url, filename)
progressEmitter.on('progress', progress => {
progressEmitter.on('progress', (progress) => {
if (url.endsWith('.ass')) {
downloadingState.subtitle = progress
} else {
@@ -176,7 +177,7 @@ const startDownload = (url: string, filename: string) => {
})
})
progressEmitter.on('error', err => {
progressEmitter.on('error', (err) => {
if (url.endsWith('.ass')) {
downloadingState.subtitle = 0
} else {
@@ -198,54 +199,111 @@ const startDownload = (url: string, filename: string) => {
<div
class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden p-3"
>
<div class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group">
<div v-if="!video.video_cover" class="w-full h-full flex flex-col justify-center items-center gap-2" :class="!isFailed ? 'bg-primary' : 'bg-rose-400'">
<UIcon v-if="!isFailed" class="animate-spin text-4xl text-white" name="tabler:loader"/>
<UIcon v-else class="text-4xl text-white" name="tabler:alert-triangle"/>
<div
class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group"
>
<div
v-if="!video.video_cover"
class="w-full h-full flex flex-col justify-center items-center gap-2"
:class="!isFailed ? 'bg-primary' : 'bg-rose-400'"
>
<UIcon
v-if="!isFailed"
class="animate-spin text-4xl text-white"
name="tabler:loader"
/>
<UIcon
v-else
class="text-4xl text-white"
name="tabler:alert-triangle"
/>
<div class="flex flex-col items-center gap-0.5">
<span class="text-sm font-bold text-white/90">
{{ isFailed ? '生成失败' : '火速生成中...' }}
</span>
<span v-if="!isFailed" class="text-xs font-medium text-white/50">{{ video.progress }}%</span>
<span
v-if="!isFailed"
class="text-xs font-medium text-white/50"
>
{{ video.progress }}%
</span>
</div>
</div>
<NuxtImg v-else :src="video.video_cover" class="w-full h-full brightness-90 object-cover"/>
<div class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center rounded-lg opacity-0 group-hover:opacity-100 duration-300">
<div class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer" @click="isPreviewModalOpen = true">
<Icon name="i-tabler-play" class="text-white text-3xl" />
<NuxtImg
v-else
:src="video.video_cover"
class="w-full h-full brightness-90 object-cover"
/>
<div
class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center rounded-lg opacity-0 group-hover:opacity-100 duration-300"
>
<div
class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer"
@click="isPreviewModalOpen = true"
>
<Icon
name="i-tabler-play"
class="text-white text-3xl"
/>
</div>
</div>
</div>
<div class="flex-1 flex flex-col justify-between gap-2">
<div class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5">
<div
class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5"
>
<ul class="grid grid-cols-2 gap-1.5">
<li class="col-span-2">
<!-- <h2 class="text-2xs font-medium text-primary-500">标题</h2>-->
<p class="text-sm font-bold line-clamp-1">{{ video.title || '无标题' }}</p>
<p class="text-sm font-bold line-clamp-1">
{{ video.title || '无标题' }}
</p>
</li>
<li class="">
<h2 class="text-2xs font-medium text-primary-500">完成时间</h2>
<p class="text-xs line-clamp-1">{{ video.complete_time ? dayjs(video.complete_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '进行中' }}</p>
<p class="text-xs line-clamp-1">
{{
video.complete_time
? dayjs(video.complete_time * 1000).format(
'YYYY-MM-DD HH:mm:ss'
)
: '进行中'
}}
</p>
</li>
<li class="">
<h2 class="text-2xs font-medium text-primary-500">生成耗时</h2>
<p class="text-xs line-clamp-1">{{ video.duration ? dayjs.duration(video.duration || 0).format('HH:mm:ss') : '进行中' }}</p>
<p class="text-xs line-clamp-1">
{{
video.duration
? dayjs.duration(video.duration || 0).format('HH:mm:ss')
: '进行中'
}}
</p>
</li>
<li class="col-span-2 cursor-pointer" @click="isFullContentOpen = true">
<li
class="col-span-2 cursor-pointer"
@click="isFullContentOpen = true"
>
<h2 class="text-2xs font-medium text-primary-500">驱动文本</h2>
<p class="text-xs line-clamp-4 text-justify">{{ video.content }}</p>
</li>
</ul>
</div>
<div class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap">
<!-- <div-->
<!-- class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">-->
<!-- <UIcon class="text-primary text-lg" name="i-tabler-user-square-rounded"/>-->
<!-- <p class="text-xs">数字人 {{ video.digital_human_id }}</p>-->
<!-- </div>-->
<div
class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap"
>
<!-- <div-->
<!-- class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">-->
<!-- <UIcon class="text-primary text-lg" name="i-tabler-user-square-rounded"/>-->
<!-- <p class="text-xs">数字人 {{ video.digital_human_id }}</p>-->
<!-- </div>-->
<div
class="w-fit hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">
<p class="text-2xs text-neutral-400 dark:text-neutral-500">{{ video.digital_human_id }}</p>
class="w-fit hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none"
>
<p class="text-2xs text-neutral-400 dark:text-neutral-500">
{{ video.digital_human_id }}
</p>
</div>
<div class="space-x-2">
<UButton
@@ -258,13 +316,24 @@ const startDownload = (url: string, filename: string) => {
/>
<UButtonGroup size="xs">
<UButton
:label="downloadingState.subtitle > 0 && downloadingState.subtitle < 100 ? `${downloadingState.subtitle.toFixed(0)}%` : '字幕'"
:loading="downloadingState.subtitle > 0 && downloadingState.subtitle < 100"
:label="
downloadingState.subtitle > 0 && downloadingState.subtitle < 100
? `${downloadingState.subtitle.toFixed(0)}%`
: '字幕'
"
:loading="
downloadingState.subtitle > 0 && downloadingState.subtitle < 100
"
:disabled="!video.subtitle"
color="primary"
leading-icon="i-tabler-file-download"
variant="soft"
@click="startDownload(video.subtitle!, (video.title || video.task_id) + '.ass')"
@click="
startDownload(
video.subtitle!,
(video.title || video.task_id) + '.ass'
)
"
/>
<UDropdown
:items="[
@@ -273,8 +342,11 @@ const startDownload = (url: string, filename: string) => {
label: '绿幕视频下载',
icon: 'tabler:download',
click: () => {
startDownload(video.video_url!, (video.title || video.task_id) + '.mp4')
}
startDownload(
video.video_url!,
(video.title || video.task_id) + '.mp4'
)
},
},
{
label: '合成背景图片',
@@ -282,14 +354,20 @@ const startDownload = (url: string, filename: string) => {
click: () => {
isVideoBackgroundPreviewOpen = true
},
disabled: !video.video_alpha_url
disabled: !video.video_alpha_url,
},
],
]"
>
<UButton
:label="downloadingState.video > 0 && downloadingState.video < 100 ? `${downloadingState.video.toFixed(0)}%` : '视频'"
:loading="downloadingState.video > 0 && downloadingState.video < 100"
:label="
downloadingState.video > 0 && downloadingState.video < 100
? `${downloadingState.video.toFixed(0)}%`
: '视频'
"
:loading="
downloadingState.video > 0 && downloadingState.video < 100
"
:disabled="!video.video_url"
color="primary"
leading-icon="i-tabler-download"
@@ -302,10 +380,17 @@ const startDownload = (url: string, filename: string) => {
</div>
<!-- Full video content -->
<UModal v-model="isFullContentOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<UCard
:ui="{
ring: '',
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
}"
>
<template #header>
<div class="flex items-center justify-between">
<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"
>
{{ video.title || '无标题' }}
<span class="block text-xs text-primary">驱动内容</span>
</h3>
@@ -326,48 +411,93 @@ const startDownload = (url: string, filename: string) => {
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="primary" @click="isFullContentOpen = false">关闭</UButton>
<UButton
color="primary"
@click="isFullContentOpen = false"
>
关闭
</UButton>
</div>
</template>
</UCard>
</UModal>
<UModal v-model="isPreviewModalOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<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">
<div
class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
>
<p>绿幕视频预览</p>
<p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
<p
class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
>
{{ video.title }}
</p>
</div>
<UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isPreviewModalOpen = false" />
<UButton
class="-my-1"
color="gray"
icon="i-tabler-x"
variant="ghost"
@click="isPreviewModalOpen = false"
/>
</div>
</template>
<video class="w-full rounded shadow" controls autoplay :src="video.video_url" />
<video
class="w-full rounded shadow"
controls
autoplay
:src="video.video_url"
/>
</UCard>
</UModal>
<UModal v-model="isVideoBackgroundPreviewOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<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">
<div
class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden"
>
<p>视频背景合成</p>
<p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
<p
class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis"
>
{{ video.title }}
</p>
</div>
<UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isVideoBackgroundPreviewOpen = false" />
<UButton
class="-my-1"
color="gray"
icon="i-tabler-x"
variant="ghost"
@click="isVideoBackgroundPreviewOpen = false"
/>
</div>
</template>
<div class="space-y-4">
<!-- 背景图片选择区域 -->
<div v-if="!compositedVideoBlob && !isCombinatorLoading" class="border-2 border-dashed border-neutral-200 dark:border-neutral-700 rounded-lg p-4">
<div
v-if="!compositedVideoBlob && !isCombinatorLoading"
class="border-2 border-dashed border-neutral-200 dark:border-neutral-700 rounded-lg p-4"
>
<div class="space-y-3">
<div class="text-sm font-medium text-gray-900 dark:text-white">选择背景图片</div>
<div class="text-sm font-medium text-gray-900 dark:text-white">
选择背景图片
</div>
<!-- 预览区域 -->
<!-- <div v-if="selectedBackgroundPreview" class="relative w-full aspect-video rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
<img :src="selectedBackgroundPreview" alt="背景预览" class="w-full h-full object-cover" />
@@ -376,7 +506,7 @@ const startDownload = (url: string, filename: string) => {
<UIcon class="text-3xl text-neutral-400" name="tabler:photo" />
<span class="text-xs text-neutral-400">点击选择图片</span>
</div> -->
<!-- 文件输入 -->
<input
ref="fileInputRef"
@@ -385,7 +515,7 @@ const startDownload = (url: string, filename: string) => {
class="hidden"
@change="handleBackgroundFileSelect"
/>
<!-- 选择按钮 -->
<UButton
block
@@ -395,9 +525,12 @@ const startDownload = (url: string, filename: string) => {
variant="soft"
@click="fileInputRef?.click()"
/>
<!-- 选中的文件名 -->
<div v-if="selectedBackgroundFile" class="text-xs text-neutral-500 dark:text-neutral-400">
<div
v-if="selectedBackgroundFile"
class="text-xs text-neutral-500 dark:text-neutral-400"
>
已选择: {{ selectedBackgroundFile.name }}
</div>
</div>
@@ -413,20 +546,32 @@ const startDownload = (url: string, filename: string) => {
/>
<!-- 合成进度 -->
<div v-if="isCombinatorLoading" class="space-y-2">
<div
v-if="isCombinatorLoading"
class="space-y-2"
>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-gray-900 dark:text-white">{{ phaseText }}</span>
<span class="text-xs text-neutral-500">{{ compositingProgress }}%</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">
{{ phaseText }}
</span>
<span class="text-xs text-neutral-500">
{{ compositingProgress }}%
</span>
</div>
<UProgress :value="compositingProgress" />
</div>
<!-- 合成预览 -->
<div v-if="compositedVideoBlob" class="space-y-2">
<div class="text-sm font-medium text-gray-900 dark:text-white">视频预览</div>
<video
<div
v-if="compositedVideoBlob"
class="space-y-2"
>
<div class="text-sm font-medium text-gray-900 dark:text-white">
视频预览
</div>
<video
class="w-full rounded-lg shadow bg-black"
controls
controls
autoplay
muted
:src="compositedVideoUrl"
@@ -446,13 +591,15 @@ const startDownload = (url: string, filename: string) => {
v-if="compositedVideoBlob"
color="gray"
label="重新选择"
@click="() => {
selectedBackgroundFile = null
selectedBackgroundPreview = ''
compositedVideoBlob = null
combinatorError = ''
isCombinatorLoading = false
}"
@click="
() => {
selectedBackgroundFile = null
selectedBackgroundPreview = ''
compositedVideoBlob = null
combinatorError = ''
isCombinatorLoading = false
}
"
/>
<UButton
v-if="compositedVideoBlob"
@@ -477,6 +624,4 @@ const startDownload = (url: string, filename: string) => {
</div>
</template>
<style scoped>
</style>
<style scoped></style>

5
components/aigc/generation/SRTEditor.vue
View File

@@ -610,7 +610,10 @@ defineExpose({
}
.subtitle.stroke {
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000,
text-shadow:
1px 1px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000;
}