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

14
components/BubbleTitle.vue
View File

@@ -25,15 +25,19 @@ const props = defineProps({
<h1
v-if="subtitle"
class="text-base text-neutral-300 dark:text-neutral-600 italic tracking-wide font-black leading-none"
>{{ subtitle }}</h1>
>
{{ subtitle }}
</h1>
<h1 class="text-xl font-bold text-neutral-700 dark:text-neutral-300 leading-none relative z-[1]">
<h1
class="text-xl font-bold text-neutral-700 dark:text-neutral-300 leading-none relative z-[1]"
>
{{ title }}
</h1>
</div>
<div class="flex gap-2.5">
<slot name="action"/>
<slot name="action" />
</div>
<div
@@ -44,6 +48,4 @@ const props = defineProps({
</div>
</template>
<style scoped>
</style>
<style scoped></style>

34
components/DatePicker.vue
View File

@@ -1,18 +1,23 @@
<script setup lang="ts">
import { DatePicker as VCalendarDatePicker } from 'v-calendar'
// @ts-ignore
import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
import type {
DatePickerDate,
DatePickerRangeObject,
} from 'v-calendar/dist/types/src/use/datePicker'
import 'v-calendar/dist/style.css'
defineOptions({
inheritAttrs: false
inheritAttrs: false,
})
const props = defineProps({
modelValue: {
type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
default: null
}
type: [Date, Object] as PropType<
DatePickerDate | DatePickerRangeObject | null
>,
default: null,
},
})
const emit = defineEmits(['update:model-value', 'close'])
@@ -22,15 +27,15 @@ const date = computed({
set: (value) => {
emit('update:model-value', value)
emit('close')
}
},
})
const attrs = {
'transparent': true,
'borderless': true,
'color': 'primary',
transparent: true,
borderless: true,
color: 'primary',
'is-dark': { selector: 'html', darkClass: 'dark' },
'first-day-of-week': 2
'first-day-of-week': 2,
}
function onDayClick(_: any, event: MouseEvent): void {
@@ -41,7 +46,11 @@ function onDayClick(_: any, event: MouseEvent): void {
<template>
<VCalendarDatePicker
v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end"
v-if="
date &&
(date as DatePickerRangeObject)?.start &&
(date as DatePickerRangeObject)?.end
"
v-model.range="date"
:columns="2"
v-bind="{ ...attrs, ...$attrs }"
@@ -82,7 +91,8 @@ function onDayClick(_: any, event: MouseEvent): void {
--vc-accent-900: rgb(var(--color-primary-900));
}
.vc-container .vc-weekday-1, .vc-container .vc-weekday-7 {
.vc-container .vc-weekday-1,
.vc-container .vc-weekday-7 {
@apply text-primary;
}
</style>

149
components/DigitalHumanTrainCreator.vue
View File

@@ -18,7 +18,7 @@ const emit = defineEmits<Emits>()
const isOpen = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
set: (value) => emit('update:modelValue', value),
})
// 表单状态
@@ -36,7 +36,7 @@ const isSubmitting = ref(false)
const uploadProgress = reactive({
step: 0,
total: 3,
message: ''
message: '',
})
// 表单验证
@@ -189,7 +189,7 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
color: 'green',
icon: 'i-tabler-check',
})
// 重置表单
formState.dh_name = ''
formState.organization = ''
@@ -197,7 +197,7 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
authVideoFile.value = null
uploadProgress.step = 0
uploadProgress.message = ''
// 关闭弹窗
isOpen.value = false
} else {
@@ -205,7 +205,8 @@ const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
}
} catch (error) {
console.error('数字人定制失败:', error)
const errorMessage = error instanceof Error ? error.message : '数字人定制失败，请重试'
const errorMessage =
error instanceof Error ? error.message : '数字人定制失败，请重试'
toast.add({
title: '提交失败',
description: errorMessage,
@@ -241,7 +242,10 @@ const showAuthModal = ref(false)
</script>
<template>
<UModal v-model="isOpen" :ui="{ width: 'sm:max-w-6xl' }">
<UModal
v-model="isOpen"
:ui="{ width: 'sm:max-w-6xl' }"
>
<UCard
:ui="{
ring: '',
@@ -273,7 +277,10 @@ const showAuthModal = ref(false)
@submit="onSubmit"
>
<!-- 数字人视频素材 -->
<UFormGroup label="数字人视频素材" required>
<UFormGroup
label="数字人视频素材"
required
>
<UniFileDnD
accept="video/mp4,video/mov"
class="h-36"
@@ -291,7 +298,8 @@ const showAuthModal = ref(false)
</span>
</div>
<p class="text-xs text-gray-500 mt-1">
小于 1GB 的 mov/mp4 格式，比例 9:16，帧率 25FPS，分辨率 1080P，时长 3-6 分钟
小于 1GB 的 mov/mp4 格式，比例 9:16，帧率 25FPS，分辨率
1080P，时长 3-6 分钟
</p>
</div>
</template>
@@ -299,7 +307,11 @@ const showAuthModal = ref(false)
</UFormGroup>
<!-- 数字人名称 -->
<UFormGroup label="数字人名称" name="dh_name" required>
<UFormGroup
label="数字人名称"
name="dh_name"
required
>
<UInput
v-model="formState.dh_name"
placeholder="请输入数字人名称"
@@ -307,7 +319,11 @@ const showAuthModal = ref(false)
</UFormGroup>
<!-- 单位名称 -->
<UFormGroup label="单位名称" name="organization" required>
<UFormGroup
label="单位名称"
name="organization"
required
>
<UInput
v-model="formState.organization"
placeholder="请输入单位名称"
@@ -315,7 +331,10 @@ const showAuthModal = ref(false)
</UFormGroup>
<!-- 形象授权视频 -->
<UFormGroup label="形象授权视频" required>
<UFormGroup
label="形象授权视频"
required
>
<template #description>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">
@@ -344,7 +363,11 @@ const showAuthModal = ref(false)
/>
<div class="mt-2">
<span class="text-sm text-gray-600 dark:text-gray-400">
{{ authVideoFile ? authVideoFile.name : '点击或拖拽上传授权视频' }}
{{
authVideoFile
? authVideoFile.name
: '点击或拖拽上传授权视频'
}}
</span>
</div>
</div>
@@ -364,10 +387,15 @@ const showAuthModal = ref(false)
</UButton>
<!-- 上传进度 -->
<div v-if="isSubmitting" class="mt-4 space-y-2">
<div
v-if="isSubmitting"
class="mt-4 space-y-2"
>
<div class="flex justify-between text-sm">
<span>{{ uploadProgress.message }}</span>
<span>{{ uploadProgress.step }}/{{ uploadProgress.total }}</span>
<span>
{{ uploadProgress.step }}/{{ uploadProgress.total }}
</span>
</div>
<UProgress
:value="(uploadProgress.step / uploadProgress.total) * 100"
@@ -382,54 +410,105 @@ const showAuthModal = ref(false)
<div class="flex flex-col h-full gap-6">
<!-- 教程视频 -->
<div class="flex-1">
<h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-white flex items-center gap-2">
<UIcon name="i-heroicons-video-camera" class="h-5 w-5" />
<h3
class="text-lg font-semibold mb-3 text-gray-800 dark:text-white flex items-center gap-2"
>
<UIcon
name="i-heroicons-video-camera"
class="h-5 w-5"
/>
视频录制教程
</h3>
<div class="w-full aspect-video border rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
<UIcon name="i-heroicons-video-camera" class="h-12 w-12 text-gray-400" />
<div
class="w-full aspect-video border rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center"
>
<UIcon
name="i-heroicons-video-camera"
class="h-12 w-12 text-gray-400"
/>
</div>
</div>
<!-- 联系方式 -->
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-700">
<div
class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-700"
>
<div class="flex items-center gap-3">
<div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-lg">
<UIcon name="i-heroicons-chat-bubble-left-right" class="h-5 w-5 text-blue-600 dark:text-blue-400" />
<UIcon
name="i-heroicons-chat-bubble-left-right"
class="h-5 w-5 text-blue-600 dark:text-blue-400"
/>
</div>
<div>
<p class="text-sm font-medium text-gray-800 dark:text-white">需要帮助？</p>
<p class="text-sm font-medium text-gray-800 dark:text-white">
需要帮助？
</p>
<p class="text-sm text-gray-600 dark:text-gray-300">
客服微信：<span class="font-mono text-blue-600 dark:text-blue-400">xxxxxx</span>
客服微信：
<span class="font-mono text-blue-600 dark:text-blue-400">
xxxxxx
</span>
</p>
</div>
</div>
</div>
<!-- 录制指南 -->
<div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 border border-amber-200 dark:border-amber-700">
<div
class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 border border-amber-200 dark:border-amber-700"
>
<div class="flex items-start gap-3">
<div class="bg-amber-100 dark:bg-amber-900 p-2 rounded-lg mt-0.5">
<UIcon name="i-heroicons-light-bulb" class="h-5 w-5 text-amber-600 dark:text-amber-400" />
<div
class="bg-amber-100 dark:bg-amber-900 p-2 rounded-lg mt-0.5"
>
<UIcon
name="i-heroicons-light-bulb"
class="h-5 w-5 text-amber-600 dark:text-amber-400"
/>
</div>
<div class="flex-1">
<h4 class="text-sm font-semibold text-gray-800 dark:text-white mb-3">录制注意事项</h4>
<h4
class="text-sm font-semibold text-gray-800 dark:text-white mb-3"
>
录制注意事项
</h4>
<div class="space-y-2">
<div class="flex items-center gap-2">
<UIcon name="i-heroicons-sun" class="h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0" />
<span class="text-xs text-gray-600 dark:text-gray-300">确保光线充足，避免背光</span>
<UIcon
name="i-heroicons-sun"
class="h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0"
/>
<span class="text-xs text-gray-600 dark:text-gray-300">
确保光线充足，避免背光
</span>
</div>
<div class="flex items-center gap-2">
<UIcon name="i-heroicons-speaker-wave" class="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
<span class="text-xs text-gray-600 dark:text-gray-300">选择安静环境，减少噪音干扰</span>
<UIcon
name="i-heroicons-speaker-wave"
class="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0"
/>
<span class="text-xs text-gray-600 dark:text-gray-300">
选择安静环境，减少噪音干扰
</span>
</div>
<div class="flex items-center gap-2">
<UIcon name="i-heroicons-viewfinder-circle" class="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" />
<span class="text-xs text-gray-600 dark:text-gray-300">人脸占画面比例控制在 1/4 以内</span>
<UIcon
name="i-heroicons-viewfinder-circle"
class="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0"
/>
<span class="text-xs text-gray-600 dark:text-gray-300">
人脸占画面比例控制在 1/4 以内
</span>
</div>
<div class="flex items-center gap-2">
<UIcon name="i-heroicons-face-smile" class="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0" />
<span class="text-xs text-gray-600 dark:text-gray-300">保持自然表情，使用恰当手势</span>
<UIcon
name="i-heroicons-face-smile"
class="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0"
/>
<span class="text-xs text-gray-600 dark:text-gray-300">
保持自然表情，使用恰当手势
</span>
</div>
</div>
</div>
@@ -473,4 +552,4 @@ const showAuthModal = ref(false)
</UModal>
</template>
<style scoped></style>
<style scoped></style>

4
components/GradientDivider.vue
View File

@@ -27,6 +27,4 @@ const props = defineProps({
></div>
</template>
<style scoped>
</style>
<style scoped></style>

257
components/Icon/MessageResponding.vue
View File

@@ -1,52 +1,217 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<circle cx="4" cy="12" r="0" fill="currentColor">
<animate fill="freeze" attributeName="r" begin="0;svgSpinners3DotsMove1.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="0;3"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove7.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="4;12"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove5.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="12;20"></animate>
<animate id="svgSpinners3DotsMove0" fill="freeze" attributeName="r" begin="svgSpinners3DotsMove3.end"
calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
<animate id="svgSpinners3DotsMove1" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove0.end"
dur="0.001s" values="20;4"></animate>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<circle
cx="4"
cy="12"
r="0"
fill="currentColor"
>
<animate
fill="freeze"
attributeName="r"
begin="0;svgSpinners3DotsMove1.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="0;3"
></animate>
<animate
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove7.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="4;12"
></animate>
<animate
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove5.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="12;20"
></animate>
<animate
id="svgSpinners3DotsMove0"
fill="freeze"
attributeName="r"
begin="svgSpinners3DotsMove3.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="3;0"
></animate>
<animate
id="svgSpinners3DotsMove1"
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove0.end"
dur="0.001s"
values="20;4"
></animate>
</circle>
<circle cx="4" cy="12" r="3" fill="currentColor">
<animate fill="freeze" attributeName="cx" begin="0;svgSpinners3DotsMove1.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="4;12"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove7.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="12;20"></animate>
<animate id="svgSpinners3DotsMove2" fill="freeze" attributeName="r" begin="svgSpinners3DotsMove5.end"
calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
<animate id="svgSpinners3DotsMove3" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove2.end"
dur="0.001s" values="20;4"></animate>
<animate fill="freeze" attributeName="r" begin="svgSpinners3DotsMove3.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="0;3"></animate>
<circle
cx="4"
cy="12"
r="3"
fill="currentColor"
>
<animate
fill="freeze"
attributeName="cx"
begin="0;svgSpinners3DotsMove1.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="4;12"
></animate>
<animate
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove7.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="12;20"
></animate>
<animate
id="svgSpinners3DotsMove2"
fill="freeze"
attributeName="r"
begin="svgSpinners3DotsMove5.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="3;0"
></animate>
<animate
id="svgSpinners3DotsMove3"
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove2.end"
dur="0.001s"
values="20;4"
></animate>
<animate
fill="freeze"
attributeName="r"
begin="svgSpinners3DotsMove3.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="0;3"
></animate>
</circle>
<circle cx="12" cy="12" r="3" fill="currentColor">
<animate fill="freeze" attributeName="cx" begin="0;svgSpinners3DotsMove1.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="12;20"></animate>
<animate id="svgSpinners3DotsMove4" fill="freeze" attributeName="r" begin="svgSpinners3DotsMove7.end"
calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
<animate id="svgSpinners3DotsMove5" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove4.end"
dur="0.001s" values="20;4"></animate>
<animate fill="freeze" attributeName="r" begin="svgSpinners3DotsMove5.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="0;3"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove3.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="4;12"></animate>
<circle
cx="12"
cy="12"
r="3"
fill="currentColor"
>
<animate
fill="freeze"
attributeName="cx"
begin="0;svgSpinners3DotsMove1.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="12;20"
></animate>
<animate
id="svgSpinners3DotsMove4"
fill="freeze"
attributeName="r"
begin="svgSpinners3DotsMove7.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="3;0"
></animate>
<animate
id="svgSpinners3DotsMove5"
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove4.end"
dur="0.001s"
values="20;4"
></animate>
<animate
fill="freeze"
attributeName="r"
begin="svgSpinners3DotsMove5.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="0;3"
></animate>
<animate
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove3.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="4;12"
></animate>
</circle>
<circle cx="20" cy="12" r="3" fill="currentColor">
<animate id="svgSpinners3DotsMove6" fill="freeze" attributeName="r" begin="0;svgSpinners3DotsMove1.end"
calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0"></animate>
<animate id="svgSpinners3DotsMove7" fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove6.end"
dur="0.001s" values="20;4"></animate>
<animate fill="freeze" attributeName="r" begin="svgSpinners3DotsMove7.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="0;3"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove5.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="4;12"></animate>
<animate fill="freeze" attributeName="cx" begin="svgSpinners3DotsMove3.end" calcMode="spline" dur="0.5s"
keySplines=".36,.6,.31,1" values="12;20"></animate>
<circle
cx="20"
cy="12"
r="3"
fill="currentColor"
>
<animate
id="svgSpinners3DotsMove6"
fill="freeze"
attributeName="r"
begin="0;svgSpinners3DotsMove1.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="3;0"
></animate>
<animate
id="svgSpinners3DotsMove7"
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove6.end"
dur="0.001s"
values="20;4"
></animate>
<animate
fill="freeze"
attributeName="r"
begin="svgSpinners3DotsMove7.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="0;3"
></animate>
<animate
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove5.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="4;12"
></animate>
<animate
fill="freeze"
attributeName="cx"
begin="svgSpinners3DotsMove3.end"
calcMode="spline"
dur="0.5s"
keySplines=".36,.6,.31,1"
values="12;20"
></animate>
</circle>
</svg>
</template>
</template>

17
components/ImagePlaceholder.vue
View File

@@ -2,26 +2,29 @@
const props = defineProps({
gradient: {
type: String,
default: '90deg, #FFC0CB 0%, #FFC0CB 100%'
default: '90deg, #FFC0CB 0%, #FFC0CB 100%',
},
aspect: {
type: String,
default: '16/9'
}
default: '16/9',
},
})
const elem = ref<HTMLElement>()
const size = computed(() => {
return {
width: elem.value?.getBoundingClientRect().width.toFixed(0),
height: elem.value?.getBoundingClientRect().height.toFixed(0)
height: elem.value?.getBoundingClientRect().height.toFixed(0),
}
})
</script>
<template>
<div ref="elem" class="gradient-background flex justify-center items-center"
:style="`aspect-ratio: ${aspect};`">
<div
ref="elem"
class="gradient-background flex justify-center items-center"
:style="`aspect-ratio: ${aspect};`"
>
<ClientOnly>
<h1 class="text-white/80 drop-shadow-2xl text-sm font-bold">
{{ size.width }} x {{ size.height }}
@@ -35,4 +38,4 @@ const size = computed(() => {
@apply rounded-lg;
@apply bg-gradient-to-r from-indigo-800 to-purple-600;
}
</style>
</style>

33
components/LoginNeededContent.vue
View File

@@ -19,9 +19,14 @@ const modal = useModal()
<template>
<ClientOnly>
<div v-if="!loginState.is_logged_in"
class="w-full flex flex-col justify-center items-center gap-2 py-40">
<Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
<div
v-if="!loginState.is_logged_in"
class="w-full flex flex-col justify-center items-center gap-2 py-40"
>
<Icon
name="i-tabler-user-circle"
class="text-7xl text-neutral-300 dark:text-neutral-700"
/>
<p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
<UButton
class="mt-2 font-bold"
@@ -33,17 +38,23 @@ const modal = useModal()
登录
</UButton>
</div>
<div v-else-if="needAdmin && loginState.user.auth_code !== 2"
class="w-full flex flex-col justify-center items-center gap-2 py-40">
<Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="tabler:hand-stop"/>
<div
v-else-if="needAdmin && loginState.user.auth_code !== 2"
class="w-full flex flex-col justify-center items-center gap-2 py-40"
>
<Icon
class="text-7xl text-neutral-300 dark:text-neutral-700"
name="tabler:hand-stop"
/>
<p class="text-sm text-neutral-500 dark:text-neutral-400">账号没有权限</p>
</div>
<div :class="contentClass" v-else>
<slot/>
<div
:class="contentClass"
v-else
>
<slot />
</div>
</ClientOnly>
</template>
<style scoped>
</style>
<style scoped></style>

31
components/Markdown.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import md from 'markdown-it'
import hljs from "highlight.js";
import 'highlight.js/styles/github-dark-dimmed.min.css';
import hljs from 'highlight.js'
import 'highlight.js/styles/github-dark-dimmed.min.css'
const renderer = md({
html: true,
@@ -11,17 +11,16 @@ const renderer = md({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return (
`<pre class="hljs" style="overflow-x: auto"><code>${
hljs.highlight(str, {language: lang, ignoreIllegals: true}).value
}</code></pre>`
)
} catch (_) {
}
return `<pre class="hljs" style="overflow-x: auto"><code>${
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value
}</code></pre>`
} catch (_) {}
}
return '<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>';
}
return (
'<pre class="hljs"><code>' + md().utils.escapeHtml(str) + '</code></pre>'
)
},
})
const props = defineProps({
@@ -34,11 +33,11 @@ const props = defineProps({
<template>
<article
class="prose dark:prose-invert max-w-none prose-sm prose-neutral"
v-html="renderer.render(source.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;'))"
class="prose dark:prose-invert max-w-none prose-sm prose-neutral"
v-html="
renderer.render(source.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;'))
"
></article>
</template>
<style scoped>
</style>
<style scoped></style>

4
components/ModalDigitalHumanSelect.vue
View File

@@ -33,8 +33,8 @@ const toast = useToast()
const page = ref(1)
const sourceTypeList = [
{ label: 'xsh_wm', value: 1, color: 'blue' }, // 万木（腾讯）
{ label: 'xsh_zy', value: 2, color: 'green' }, // XSH 自有
{ 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' }, // 百度小冰
]

20
components/SlideCreateCourse.vue
View File

@@ -48,7 +48,9 @@ watchEffect(() => {
if (selected_digital_human.value) {
// 2025.03.31 使用内部数字人 ID
createCourseState.digital_human_id =
selected_digital_human.value.digital_human_id ?? selected_digital_human.value.id ?? 0
selected_digital_human.value.digital_human_id ??
selected_digital_human.value.id ??
0
}
if (selected_titles.value) {
createCourseState.opening_url = selected_titles.value.opening_file
@@ -338,16 +340,20 @@ const onCreateCourseSubmit = async (
<ModalDigitalHumanSelect
:is-open="isDigitalSelectorOpen"
@close="isDigitalSelectorOpen = false"
@select="digitalHumans => {
selected_digital_human = (digitalHumans as DigitalHumanItem)
}"
@select="
(digitalHumans) => {
selected_digital_human = digitalHumans as DigitalHumanItem
}
"
/>
<ModalVideoTitleSelect
:is-open="isTitlesSelectorOpen"
@close="isTitlesSelectorOpen = false"
@select="titles => {
selected_titles = (titles as TitlesTemplate)
}"
@select="
(titles) => {
selected_titles = titles as TitlesTemplate
}
"
/>
</USlideover>
</template>

8
components/SlideCreateCourseGreen.vue
View File

@@ -290,9 +290,11 @@ const onCreateCourseGreenSubmit = async (
<ModalDigitalHumanSelect
:is-open="isDigitalSelectorOpen"
@close="isDigitalSelectorOpen = false"
@select="digitalHumans => {
selected_digital_human = (digitalHumans as DigitalHumanItem)
}"
@select="
(digitalHumans) => {
selected_digital_human = digitalHumans as DigitalHumanItem
}
"
/>
</USlideover>
</template>

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;
}

2
components/uni/Button/index.d.ts vendored
View File

@@ -1,2 +1,2 @@
type ButtonType = 'normal' | 'primary' | 'danger'
type ButtonSize = 'base' | 'medium' | 'small'
type ButtonSize = 'base' | 'medium' | 'small'

57
components/uni/Button/index.vue
View File

@@ -1,36 +1,36 @@
<script lang="ts" setup>
import type {PropType} from "vue";
import type { PropType } from 'vue'
const emit = defineEmits(['click'])
const props = defineProps({
type: {
type: String as PropType<ButtonType>,
default: 'normal'
default: 'normal',
},
attrType: {
type: String as PropType<'button' | 'submit' | 'reset'>,
default: 'button'
default: 'button',
},
size: {
type: String as PropType<ButtonSize>,
default: 'base'
default: 'base',
},
block: {
type: Boolean,
default: false
default: false,
},
icon: {
type: String,
default: ''
default: '',
},
loading: {
type: Boolean,
default: false
default: false,
},
disabled: {
type: Boolean,
default: false
}
default: false,
},
})
const buttonTypeClass = computed(() => {
@@ -54,21 +54,36 @@ const handleClick = (e: any) => {
</script>
<template>
<button class="w-fit flex justify-center items-center rounded-md font-bold border shadow-sm transition focus:ring-4"
:class="{
'w-full': block,
'uni-button--disabled': disabled || loading,
[buttonTypeClass]: buttonTypeClass,
[buttonSizeClass]: buttonSizeClass,
}" @click="handleClick" :disabled="disabled || loading" :type="attrType">
<button
class="w-fit flex justify-center items-center rounded-md font-bold border shadow-sm transition focus:ring-4"
:class="{
'w-full': block,
'uni-button--disabled': disabled || loading,
[buttonTypeClass]: buttonTypeClass,
[buttonSizeClass]: buttonSizeClass,
}"
@click="handleClick"
:disabled="disabled || loading"
:type="attrType"
>
<Transition name="icon">
<UniIconSpinner v-if="loading" />
<Icon v-else-if="buttonIcon" :name="buttonIcon" :key="buttonIcon" />
<span v-else class="mr-2">
<slot name="icon"/>
<Icon
v-else-if="buttonIcon"
:name="buttonIcon"
:key="buttonIcon"
/>
<span
v-else
class="mr-2"
>
<slot name="icon" />
</span>
</Transition>
<div class="flex items-center whitespace-nowrap leading-snug" :class="{ 'ml-2': buttonIcon || loading }">
<div
class="flex items-center whitespace-nowrap leading-snug"
:class="{ 'ml-2': buttonIcon || loading }"
>
<slot />
</div>
</button>
@@ -77,7 +92,7 @@ const handleClick = (e: any) => {
<style scoped>
.icon-enter-active,
.icon-leave-active {
transition: all .3s ease;
transition: all 0.3s ease;
}
.icon-enter-from,

141
components/uni/Copyable/index.vue
View File

@@ -1,19 +1,19 @@
<script setup lang="ts">
import {useMessage} from "~/composables/uni/useMessage";
import { useMessage } from '~/composables/uni/useMessage'
const props = defineProps({
hideIcon: {
type: Boolean,
default: false
default: false,
},
iconSize: {
type: String,
default: '1em'
default: '1em',
},
text: {
type: String,
required: true
}
required: true,
},
})
const message = useMessage()
@@ -22,48 +22,123 @@ const copied = ref(false)
const copied_timeout = ref()
const fuck_copy = () => {
navigator.clipboard.writeText(props.text || '').then(() => {
copied.value = true
if (copied_timeout.value) clearInterval(copied_timeout.value)
copied_timeout.value = setTimeout(() => copied.value = false, 1500)
}).catch(e => {
message.error(`复制失败`)
})
navigator.clipboard
.writeText(props.text || '')
.then(() => {
copied.value = true
if (copied_timeout.value) clearInterval(copied_timeout.value)
copied_timeout.value = setTimeout(() => (copied.value = false), 1500)
})
.catch((e) => {
message.error(`复制失败`)
})
}
</script>
<template>
<div class="inline-flex items-center gap-0.5 cursor-pointer" @click="fuck_copy">
<slot/>
<Transition v-if="!hideIcon" name="icon" mode="out-in">
<svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" :width="iconSize" :height="iconSize" viewBox="0 0 24 24"
class="text-neutral-500">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M8 10a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2z"/>
<path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>
<div
class="inline-flex items-center gap-0.5 cursor-pointer"
@click="fuck_copy"
>
<slot />
<Transition
v-if="!hideIcon"
name="icon"
mode="out-in"
>
<svg
v-if="!copied"
xmlns="http://www.w3.org/2000/svg"
:width="iconSize"
:height="iconSize"
viewBox="0 0 24 24"
class="text-neutral-500"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path
d="M8 10a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2z"
/>
<path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
</g>
</svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" :width="iconSize" :height="iconSize" viewBox="0 0 24 24"
class="text-green-600">
<svg
v-else
xmlns="http://www.w3.org/2000/svg"
:width="iconSize"
:height="iconSize"
viewBox="0 0 24 24"
class="text-green-600"
>
<defs>
<mask id="lineMdCheckAll0">
<g fill="none" stroke="#fff" stroke-dasharray="22" stroke-dashoffset="22" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2">
<g
fill="none"
stroke="#fff"
stroke-dasharray="22"
stroke-dashoffset="22"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M2 13.5l4 4l10.75 -10.75">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="22;0"/>
<animate
fill="freeze"
attributeName="stroke-dashoffset"
dur="0.2s"
values="22;0"
/>
</path>
<path stroke="#000" stroke-width="4" d="M7.5 13.5l4 4l10.75 -10.75" opacity="0">
<set attributeName="opacity" begin="0.2s" to="1"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="22;0"/>
<path
stroke="#000"
stroke-width="4"
d="M7.5 13.5l4 4l10.75 -10.75"
opacity="0"
>
<set
attributeName="opacity"
begin="0.2s"
to="1"
/>
<animate
fill="freeze"
attributeName="stroke-dashoffset"
begin="0.2s"
dur="0.2s"
values="22;0"
/>
</path>
<path d="M7.5 13.5l4 4l10.75 -10.75" opacity="0">
<set attributeName="opacity" begin="0.2s" to="1"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.2s" values="22;0"/>
<path
d="M7.5 13.5l4 4l10.75 -10.75"
opacity="0"
>
<set
attributeName="opacity"
begin="0.2s"
to="1"
/>
<animate
fill="freeze"
attributeName="stroke-dashoffset"
begin="0.2s"
dur="0.2s"
values="22;0"
/>
</path>
</g>
</mask>
</defs>
<rect width="24" height="24" fill="currentColor" mask="url(#lineMdCheckAll0)"/>
<rect
width="24"
height="24"
fill="currentColor"
mask="url(#lineMdCheckAll0)"
/>
</svg>
</Transition>
</div>
@@ -79,4 +154,4 @@ const fuck_copy = () => {
.icon-leave-to {
@apply opacity-0;
}
</style>
</style>

63
components/uni/FileDnD/index.vue
View File

@@ -26,9 +26,9 @@ const selectedFiles = ref<File[]>([])
const onIncomeFiles = (files?: FileList | null) => {
if (files && files.length > 0) {
let wantedFiles = Array.from(files).filter(file => {
let wantedFiles = Array.from(files).filter((file) => {
if (props.accept) {
const accept = props.accept.split(',').map(type => type.trim())
const accept = props.accept.split(',').map((type) => type.trim())
return accept.includes(file.type)
}
return true
@@ -46,19 +46,20 @@ const onIncomeFiles = (files?: FileList | null) => {
<template>
<div
:class="{
'bg-neutral-300 dark:bg-neutral-900 border-primary-300 dark:border-primary-800 shadow-inner': dragover,
'bg-neutral-300 dark:bg-neutral-900 border-primary-300 dark:border-primary-800 shadow-inner':
dragover,
}"
class="w-full h-44 relative rounded-md border-2 border-dashed border-neutral-200 dark:border-neutral-800
bg-inherit cursor-pointer select-none transition duration-200
hover:border-primary-300 dark:hover:border-primary-800 overflow-hidden"
class="w-full h-44 relative rounded-md border-2 border-dashed border-neutral-200 dark:border-neutral-800 bg-inherit cursor-pointer select-none transition duration-200 hover:border-primary-300 dark:hover:border-primary-800 overflow-hidden"
@click="inputRef?.click()"
@dragover.prevent="dragover = true"
@dragleave.prevent="dragover = false"
@drop.prevent="$event => {
dragover = false
if (!$event.dataTransfer?.files) return
onIncomeFiles($event.dataTransfer?.files)
}"
@drop.prevent="
($event) => {
dragover = false
if (!$event.dataTransfer?.files) return
onIncomeFiles($event.dataTransfer?.files)
}
"
>
<input
ref="inputRef"
@@ -70,7 +71,7 @@ const onIncomeFiles = (files?: FileList | null) => {
/>
<div
:class="{
'pb-6': selectedFiles.length > 0
'pb-6': selectedFiles.length > 0,
}"
class="w-full h-full flex flex-col justify-center items-center gap-2 transition-all"
>
@@ -87,13 +88,27 @@ const onIncomeFiles = (files?: FileList | null) => {
class="absolute inset-x-0 bottom-0 pl-2 pr-0.5 py-0.5 flex justify-between items-center bg-neutral-100 dark:bg-neutral-900 border-t dark:border-neutral-800"
>
<div class="flex-1 pr-4 overflow-hidden flex items-center gap-1">
<Icon :name="selectedFiles.length === 1 ? 'i-tabler-file' : 'i-tabler-files'"
class="text-neutral-500 dark:text-neutral-400"/>
<Icon
:name="
selectedFiles.length === 1 ? 'i-tabler-file' : 'i-tabler-files'
"
class="text-neutral-500 dark:text-neutral-400"
/>
<p
:title="selectedFiles.slice(0, 3).map(file => file.name).join(', ')"
:title="
selectedFiles
.slice(0, 3)
.map((file) => file.name)
.join(', ')
"
class="text-2xs font-medium overflow-hidden text-ellipsis whitespace-nowrap"
>
{{ selectedFiles.slice(0, 3).map(file => file.name).join(', ') }}
{{
selectedFiles
.slice(0, 3)
.map((file) => file.name)
.join(', ')
}}
</p>
</div>
<div>
@@ -102,18 +117,18 @@ const onIncomeFiles = (files?: FileList | null) => {
size="xs"
square
variant="ghost"
@click.stop="() => {
selectedFiles = []
inputRef!.value = ''
}"
@click.stop="
() => {
selectedFiles = []
inputRef!.value = ''
}
"
>
<Icon name="i-tabler-x"/>
<Icon name="i-tabler-x" />
</UButton>
</div>
</div>
</div>
</template>
<style scoped>
</style>
<style scoped></style>

23
components/uni/Icon/CircleError.vue
View File

@@ -1,10 +1,21 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<g
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
>
<path d="M0 0h24v24H0z"></path>
<path fill="currentColor"
d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-6.489 5.8a1 1 0 0 0-1.218 1.567L10.585 12l-1.292 1.293l-.083.094a1 1 0 0 0 1.497 1.32L12 13.415l1.293 1.292l.094.083a1 1 0 0 0 1.32-1.497L13.415 12l1.292-1.293l.083-.094a1 1 0 0 0-1.497-1.32L12 10.585l-1.293-1.292l-.094-.083z">
</path>
<path
fill="currentColor"
d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-6.489 5.8a1 1 0 0 0-1.218 1.567L10.585 12l-1.292 1.293l-.083.094a1 1 0 0 0 1.497 1.32L12 13.415l1.293 1.292l.094.083a1 1 0 0 0 1.32-1.497L13.415 12l1.292-1.293l.083-.094a1 1 0 0 0-1.497-1.32L12 10.585l-1.293-1.292l-.094-.083z"
></path>
</g>
</svg>
</template>
</template>

16
components/uni/Icon/CircleInfo.vue
View File

@@ -1,7 +1,15 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" fillRule="evenodd"
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10Zm-10 5.75a.75.75 0 0 0 .75-.75v-6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75ZM12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2Z"
clipRule="evenodd"></path>
clipRule="evenodd"
></path>
</svg>
</template>
</template>

23
components/uni/Icon/CircleSuccess.vue
View File

@@ -1,10 +1,21 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<g
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
>
<path d="M0 0h24v24H0z"></path>
<path fill="currentColor"
d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-1.293 5.953a1 1 0 0 0-1.32-.083l-.094.083L11 12.585l-1.293-1.292l-.094-.083a1 1 0 0 0-1.403 1.403l.083.094l2 2l.094.083a1 1 0 0 0 1.226 0l.094-.083l4-4l.083-.094a1 1 0 0 0-.083-1.32z">
</path>
<path
fill="currentColor"
d="M17 3.34a10 10 0 1 1-14.995 8.984L2 12l.005-.324A10 10 0 0 1 17 3.34zm-1.293 5.953a1 1 0 0 0-1.32-.083l-.094.083L11 12.585l-1.293-1.292l-.094-.083a1 1 0 0 0-1.403 1.403l.083.094l2 2l.094.083a1 1 0 0 0 1.226 0l.094-.083l4-4l.083-.094a1 1 0 0 0-.083-1.32z"
></path>
</g>
</svg>
</template>
</template>

23
components/uni/Icon/CircleWarning.vue
View File

@@ -1,10 +1,21 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<g
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
>
<path d="M0 0h24v24H0z"></path>
<path fill="currentColor"
d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1-19.995.324L2 12l.004-.28C2.152 6.327 6.57 2 12 2zm.01 13l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986L12.01 15zM12 7a1 1 0 0 0-.993.883L11 8v4l.007.117a1 1 0 0 0 1.986 0L13 12V8l-.007-.117A1 1 0 0 0 12 7z">
</path>
<path
fill="currentColor"
d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1-19.995.324L2 12l.004-.28C2.152 6.327 6.57 2 12 2zm.01 13l-.127.007a1 1 0 0 0 0 1.986L12 17l.127-.007a1 1 0 0 0 0-1.986L12.01 15zM12 7a1 1 0 0 0-.993.883L11 8v4l.007.117a1 1 0 0 0 1.986 0L13 12V8l-.007-.117A1 1 0 0 0 12 7z"
></path>
</g>
</svg>
</template>
</template>

31
components/uni/Icon/Spinner.vue
View File

@@ -1,11 +1,26 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>
<path fill="currentColor"
d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
<animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
values="0 12 12;360 12 12"></animateTransform>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
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>
<path
fill="currentColor"
d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
>
<animateTransform
attributeName="transform"
dur="0.75s"
repeatCount="indefinite"
type="rotate"
values="0 12 12;360 12 12"
></animateTransform>
</path>
</svg>
</template>
</template>

79
components/uni/Input/index.vue
View File

@@ -1,31 +1,33 @@
<script lang="ts" setup>
import type {PropType} from "vue";
import type { PropType } from 'vue'
const emit = defineEmits(['input', 'change', 'update:modelValue'])
const props = defineProps({
label: {
type: String,
required: false,
default: ''
default: '',
},
modelValue: {
type: [String, Number] as PropType<string | number | undefined>,
required: true
required: true,
},
placeholder: {
type: String,
required: false,
default: ''
default: '',
},
type: {
type: String as PropType<'text' | 'password' | 'number' | 'email' | 'tel' | 'date'>,
type: String as PropType<
'text' | 'password' | 'number' | 'email' | 'tel' | 'date'
>,
required: false,
default: 'text'
default: 'text',
},
justify: {
type: String as PropType<'start' | 'end'>,
required: false,
default: 'end'
default: 'end',
},
pattern: {
type: [String, RegExp],
@@ -34,28 +36,38 @@ const props = defineProps({
disabled: {
type: Boolean,
required: false,
default: false
default: false,
},
})
const inputValue = ref(props.modelValue)
const isError = ref(false)
watch(() => props.modelValue, (value) => {
inputValue.value = value
if (props.pattern && value) {
const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
isError.value = !pattern.test(value as string)
pattern.lastIndex = 0
}
}, { immediate: true })
watch(
() => props.modelValue,
(value) => {
inputValue.value = value
if (props.pattern && value) {
const pattern =
typeof props.pattern === 'string'
? new RegExp(props.pattern)
: props.pattern
isError.value = !pattern.test(value as string)
pattern.lastIndex = 0
}
},
{ immediate: true }
)
const handleInput = (e: any) => {
if (props.disabled) return
const value = e.target.value
if (props.pattern && value && props.type !== 'date') {
const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
const pattern =
typeof props.pattern === 'string'
? new RegExp(props.pattern)
: props.pattern
isError.value = !pattern.test(value)
pattern.lastIndex = 0
inputValue.value = value
@@ -71,18 +83,33 @@ const handleInput = (e: any) => {
</script>
<template>
<div class="flex flex-col space-y-1"
:class="{ 'justify-start': justify === 'start', 'justify-end': justify === 'end' }">
<p class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']" v-if="label">
<div
class="flex flex-col space-y-1"
:class="{
'justify-start': justify === 'start',
'justify-end': justify === 'end',
}"
>
<p
class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']"
v-if="label"
>
{{ label }}
</p>
<div class="relative">
<input class="relative w-full flex items-center gap-2.5 p-2 pr-2 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800
border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700
focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800
outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
:class="{ '!border-red-500': isError, 'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600': disabled }"
:value="inputValue" @input="handleInput" :placeholder="placeholder" :disabled="disabled" :type="type"/>
<input
class="relative w-full flex items-center gap-2.5 p-2 pr-2 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
:class="{
'!border-red-500': isError,
'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
disabled,
}"
:value="inputValue"
@input="handleInput"
:placeholder="placeholder"
:disabled="disabled"
:type="type"
/>
</div>
</div>
</template>

53
components/uni/Message/Provider.vue
View File

@@ -1,24 +1,32 @@
<script lang="ts" setup>
import type {Message, MessageApi, MessageProviderApi, MessageType} from "~/components/uni/Message/index";
import type {
Message,
MessageApi,
MessageProviderApi,
MessageType,
} from '~/components/uni/Message/index'
const props = defineProps({
max: {
type: Number,
default: 5
}
default: 5,
},
})
const nuxtApp = useNuxtApp()
const messageList = ref<Message[]>([])
const createMessage = (content: string, type: MessageType, duration: number = 3000) => {
const {max} = props
const createMessage = (
content: string,
type: MessageType,
duration: number = 3000
) => {
const { max } = props
messageList.value.push({
id: (Date.now() + Math.random() * 100).toString(32).toUpperCase(),
content,
type,
duration
duration,
})
if (messageList.value.length > max) {
messageList.value.shift()
@@ -27,26 +35,29 @@ const createMessage = (content: string, type: MessageType, duration: number = 30
const providerApi: MessageProviderApi = {
destroy: (id: string) => {
messageList.value.splice(messageList.value.findIndex(message => message.id === id), 1)
}
messageList.value.splice(
messageList.value.findIndex((message) => message.id === id),
1
)
},
}
const api: MessageApi = {
info: (content: string, duration: number = 3000) => {
createMessage(content, 'info', duration);
createMessage(content, 'info', duration)
},
success: (content: string, duration: number = 3000) => {
createMessage(content, 'success', duration);
createMessage(content, 'success', duration)
},
warning: (content: string, duration: number = 3000) => {
createMessage(content, 'warning', duration);
createMessage(content, 'warning', duration)
},
error: (content: string, duration: number = 3000) => {
createMessage(content, 'error', duration);
createMessage(content, 'error', duration)
},
destroyAll: function (): void {
throw new Error('Function not implemented.');
}
throw new Error('Function not implemented.')
},
}
nuxtApp.vueApp.provide('uni-message-provider', providerApi)
@@ -54,12 +65,16 @@ nuxtApp.vueApp.provide('uni-message', api)
</script>
<template>
<slot/>
<slot />
<teleport to="body">
<div id="message-provider">
<div class="message-wrapper">
<TransitionGroup name="message">
<UniMessage v-for="(message, k) in messageList" :key="message.id" :message="message"/>
<UniMessage
v-for="(message, k) in messageList"
:key="message.id"
:message="message"
/>
</TransitionGroup>
</div>
</div>
@@ -73,11 +88,11 @@ nuxtApp.vueApp.provide('uni-message', api)
.message-move,
.message-leave-active {
transition: all .6s ease;
transition: all 0.6s ease;
}
.message-enter-active {
transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.message-enter-from {

2
components/uni/Message/index.d.ts vendored
View File

@@ -17,4 +17,4 @@ export type MessageApi = {
warning: (content: string, duration?: number) => void
error: (content: string, duration?: number) => void
destroyAll: () => void
}
}

61
components/uni/Message/index.vue
View File

@@ -1,14 +1,16 @@
<script lang="ts" setup>
import type {Message, MessageProviderApi} from "~/components/uni/Message/index";
import type {
Message,
MessageProviderApi,
} from '~/components/uni/Message/index'
const providerApi = inject<MessageProviderApi>('uni-message-provider')
const props = defineProps({
message: {
require: true,
type: Object
}
type: Object,
},
})
const message = ref<Message>(props.message as Message)
@@ -16,22 +18,39 @@ const message = ref<Message>(props.message as Message)
onMounted(() => {
setTimeout(() => {
providerApi?.destroy(message.value.id)
}, message.value?.duration || 3000);
}, message.value?.duration || 3000)
})
</script>
<template>
<div class="message" :class="{
'!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
'!text-emerald-500 !border-emerald-400 !bg-emerald-50': message.type === 'success',
'!text-orange-500 !border-orange-400 !bg-orange-50': message.type === 'warning',
'!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
[message.type]: message.type
}">
<UniIconCircleSuccess v-if="message.type === 'success'" class="text-xl" />
<UniIconCircleWarning v-if="message.type === 'warning'" class="text-xl" />
<UniIconCircleError v-if="message.type === 'error'" class="text-xl" />
<UniIconCircleInfo v-if="message.type === 'info'" class="text-xl" />
<div
class="message"
:class="{
'!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
'!text-emerald-500 !border-emerald-400 !bg-emerald-50':
message.type === 'success',
'!text-orange-500 !border-orange-400 !bg-orange-50':
message.type === 'warning',
'!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
[message.type]: message.type,
}"
>
<UniIconCircleSuccess
v-if="message.type === 'success'"
class="text-xl"
/>
<UniIconCircleWarning
v-if="message.type === 'warning'"
class="text-xl"
/>
<UniIconCircleError
v-if="message.type === 'error'"
class="text-xl"
/>
<UniIconCircleInfo
v-if="message.type === 'info'"
class="text-xl"
/>
<span>
{{ message.content }}
</span>
@@ -41,23 +60,23 @@ onMounted(() => {
<style scoped>
.message {
min-width: 80px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
@apply h-fit px-2 py-1.5 border bg-white border-gray-300 rounded-md text-gray-500 text-xs flex items-center gap-1.5 first-of-type:mt-2.5 mt-2.5 font-bold pointer-events-auto;
}
.message.info {
box-shadow: 0 4px 12px rgba(59, 130, 246, .2);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.message.success {
box-shadow: 0 4px 12px rgba(16, 185, 129, .2);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}
.message.warning {
box-shadow: 0 4px 12px rgba(249, 115, 22, .2);
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}
.message.error {
box-shadow: 0 4px 12px rgba(244, 63, 94, .2);
box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
}
</style>

2
components/uni/Select/index.d.ts vendored
View File

@@ -3,4 +3,4 @@ type SelectItem = {
value: string
icon?: string
disabled?: boolean
}
}

162
components/uni/Select/index.vue
View File

@@ -1,36 +1,36 @@
<script lang="ts" setup>
import {computed, type PropType} from "vue";
import { computed, type PropType } from 'vue'
const emit = defineEmits(['input', 'change', 'update:modelValue'])
const props = defineProps({
label: {
type: String,
required: false,
default: ''
default: '',
},
modelValue: {
type: [String, Number],
required: false
required: false,
},
items: {
type: Array as PropType<SelectItem[]>,
required: true
required: true,
},
justify: {
type: String as PropType<'start' | 'end'>,
required: false,
default: 'end'
default: 'end',
},
disabled: {
type: Boolean,
required: false,
default: false
default: false,
},
align: {
type: String as PropType<'bottom' | 'top'>,
required: false,
default: 'bottom'
}
default: 'bottom',
},
})
const selectWrapperRef = ref()
@@ -39,14 +39,17 @@ const optionsRef = ref()
const optionsAlign = computed(() => {
switch (props.align) {
case "bottom":
case 'bottom':
return 'top-full mt-2'
case "top":
case 'top':
return 'bottom-full mb-2'
}
})
const hasAnyIcon = computed(() => props.items.some(item => item.icon))
const selectedItem = computed(() => props.items.find(item => item.value === props.modelValue) as SelectItem)
const hasAnyIcon = computed(() => props.items.some((item) => item.icon))
const selectedItem = computed(
() =>
props.items.find((item) => item.value === props.modelValue) as SelectItem
)
const optionsExpanded = ref(false)
const selectedIconFlag = ref(true)
@@ -57,58 +60,113 @@ const handleOptionSelect = (option: SelectItem) => {
emit('input', option.value)
emit('change', option.value)
emit('update:modelValue', option.value)
selectedIconFlag.value = false;
selectedIconFlag.value = false
nextTick(() => {
selectedIconFlag.value = true;
});
selectedIconFlag.value = true
})
}
onMounted(() => {
selectRef.value.ownerDocument.addEventListener('click', (e: { target: any; }) => {
if (optionsExpanded && !selectRef?.value?.contains(e.target)) {
optionsExpanded.value = false
selectRef.value.ownerDocument.addEventListener(
'click',
(e: { target: any }) => {
if (optionsExpanded && !selectRef?.value?.contains(e.target)) {
optionsExpanded.value = false
}
}
})
)
})
</script>
<template>
<div class="flex flex-col space-y-1"
:class="{ 'justify-start': justify === 'start', 'justify-end': justify === 'end' }">
<p class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']" v-if="label">
<div
class="flex flex-col space-y-1"
:class="{
'justify-start': justify === 'start',
'justify-end': justify === 'end',
}"
>
<p
class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']"
v-if="label"
>
{{ label }}
</p>
<div class="relative" ref="selectWrapperRef">
<button class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800
border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700
focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 shadow-sm"
:class="{ 'cursor-not-allowed bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600': disabled }" ref="selectRef" type="button" @click="handleSelectClick" :disabled="disabled">
<span v-if="selectedItem?.icon && !selectedIconFlag && hasAnyIcon"
class="inline-block w-5 h-5 pointer-events-none"></span>
<Icon v-else-if="selectedItem?.icon && selectedIconFlag && hasAnyIcon" :name="selectedItem?.icon"
class="inline-block w-5 h-5 pointer-events-none" />
<Transition name="select-item" mode="out-in">
<span class="leading-snug whitespace-nowrap text-sm" :key="selectedItem?.value">{{
<div
class="relative"
ref="selectWrapperRef"
>
<button
class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 shadow-sm"
:class="{
'cursor-not-allowed bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
disabled,
}"
ref="selectRef"
type="button"
@click="handleSelectClick"
:disabled="disabled"
>
<span
v-if="selectedItem?.icon && !selectedIconFlag && hasAnyIcon"
class="inline-block w-5 h-5 pointer-events-none"
></span>
<Icon
v-else-if="selectedItem?.icon && selectedIconFlag && hasAnyIcon"
:name="selectedItem?.icon"
class="inline-block w-5 h-5 pointer-events-none"
/>
<Transition
name="select-item"
mode="out-in"
>
<span
class="leading-snug whitespace-nowrap text-sm"
:key="selectedItem?.value"
>
{{
selectedItem?.label || selectedItem?.value || 'Select an option'
}}</span>
}}
</span>
</Transition>
<Icon name="tabler:dots-vertical"
class="absolute bg-neutral-50 text-gray-500 dark:bg-neutral-700/50 dark:text-neutral-500 inset-y-0 right-0 h-full" />
<Icon
name="tabler:dots-vertical"
class="absolute bg-neutral-50 text-gray-500 dark:bg-neutral-700/50 dark:text-neutral-500 inset-y-0 right-0 h-full"
/>
</button>
<div class="absolute right-0 w-full md:w-fit rounded-md border overflow-x-hidden overflow-y-auto transition shadow-lg opacity-0
bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 z-50 max-h-64"
:class="{ 'opacity-100 pointer-events-auto': optionsExpanded, '-translate-y-4 pointer-events-none': !optionsExpanded, [optionsAlign]: optionsAlign }"
ref="optionsRef">
<div class="flex items-center gap-2.5 px-2 py-2 cursor-pointer
dark:text-neutral-300 font-['Nunito'] transition whitespace-nowrap
bg-white dark:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-700"
v-for="(option, index) in items" :key="index" :class="{
'!bg-neutral-200 dark:!bg-neutral-700 hover:!bg-neutral-200 dark:hover:!bg-neutral-700': option.value === selectedItem?.value,
'!cursor-not-allowed text-neutral-300 dark:text-neutral-500 hover:bg-white dark:hover:!bg-neutral-800': option.disabled
}" @click="!option.disabled ? handleOptionSelect(option) : void 0">
<div class="inline-block w-5 h-5" v-if="hasAnyIcon && !option.icon"></div>
<Icon :name="(option?.icon)" class="inline-block w-5 h-5" v-if="option.icon" />
<span class="leading-none whitespace-nowrap text-sm font-sans">{{ option.label || 'No label' }}</span>
<div
class="absolute right-0 w-full md:w-fit rounded-md border overflow-x-hidden overflow-y-auto transition shadow-lg opacity-0 bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 z-50 max-h-64"
:class="{
'opacity-100 pointer-events-auto': optionsExpanded,
'-translate-y-4 pointer-events-none': !optionsExpanded,
[optionsAlign]: optionsAlign,
}"
ref="optionsRef"
>
<div
class="flex items-center gap-2.5 px-2 py-2 cursor-pointer dark:text-neutral-300 font-['Nunito'] transition whitespace-nowrap bg-white dark:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-700"
v-for="(option, index) in items"
:key="index"
:class="{
'!bg-neutral-200 dark:!bg-neutral-700 hover:!bg-neutral-200 dark:hover:!bg-neutral-700':
option.value === selectedItem?.value,
'!cursor-not-allowed text-neutral-300 dark:text-neutral-500 hover:bg-white dark:hover:!bg-neutral-800':
option.disabled,
}"
@click="!option.disabled ? handleOptionSelect(option) : void 0"
>
<div
class="inline-block w-5 h-5"
v-if="hasAnyIcon && !option.icon"
></div>
<Icon
:name="option?.icon"
class="inline-block w-5 h-5"
v-if="option.icon"
/>
<span class="leading-none whitespace-nowrap text-sm font-sans">
{{ option.label || 'No label' }}
</span>
</div>
</div>
</div>
@@ -118,12 +176,12 @@ onMounted(() => {
<style scoped>
.select-item-enter-active,
.select-item-leave-active {
transition: all .15s ease;
transition: all 0.15s ease;
}
.select-item-enter-from,
.select-item-leave-to {
opacity: .5;
opacity: 0.5;
filter: blur(2px);
}
</style>

76
components/uni/TextArea/index.vue
View File

@@ -1,4 +1,3 @@
import { textarea } from '@nuxt/ui';
<script lang="ts" setup>
const emit = defineEmits(['input', 'change', 'update:modelValue'])
@@ -6,21 +5,21 @@ const props = defineProps({
label: {
type: String,
required: false,
default: ''
default: '',
},
modelValue: {
type: [String, Number],
required: true
required: true,
},
placeholder: {
type: String,
required: false,
default: ''
default: '',
},
justify: {
type: String as PropType<'start' | 'end'>,
required: false,
default: 'end'
default: 'end',
},
pattern: {
type: [String, RegExp],
@@ -29,12 +28,12 @@ const props = defineProps({
disabled: {
type: Boolean,
required: false,
default: false
default: false,
},
rows: {
type: Number,
required: false,
default: 5
default: 5,
},
minRows: {
type: Number,
@@ -46,21 +45,31 @@ const textAreaRef = ref()
const inputValue = ref(props.modelValue)
const isError = ref(false)
watch(() => props.modelValue, (value) => {
inputValue.value = value
if (props.pattern && value) {
const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
isError.value = !pattern.test(value as string)
pattern.lastIndex = 0
}
}, { immediate: true })
watch(
() => props.modelValue,
(value) => {
inputValue.value = value
if (props.pattern && value) {
const pattern =
typeof props.pattern === 'string'
? new RegExp(props.pattern)
: props.pattern
isError.value = !pattern.test(value as string)
pattern.lastIndex = 0
}
},
{ immediate: true }
)
const handleInput = (e: any) => {
if (props.disabled) return
const value = e.target.value
if (props.pattern && value) {
const pattern = typeof props.pattern === 'string' ? new RegExp(props.pattern) : props.pattern
const pattern =
typeof props.pattern === 'string'
? new RegExp(props.pattern)
: props.pattern
isError.value = !pattern.test(value)
pattern.lastIndex = 0
inputValue.value = value
@@ -92,19 +101,34 @@ onMounted(() => {
</script>
<template>
<div class="flex flex-col space-y-1"
:class="{ 'justify-start': justify === 'start', 'justify-end': justify === 'end' }">
<p class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']" v-if="label">
<div
class="flex flex-col space-y-1"
:class="{
'justify-start': justify === 'start',
'justify-end': justify === 'end',
}"
>
<p
class="block w-fit text-neutral-700 dark:text-neutral-300 text-sm font-bold font-['Nunito']"
v-if="label"
>
{{ label }}
</p>
<div class="relative">
<textarea class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden overflow-y-auto border transition bg-white dark:bg-neutral-800
border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700
focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800
outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
:rows="minRows || rows" ref="textAreaRef"
:class="{ '!border-red-500': isError, 'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600': disabled }"
:value="inputValue" @input="handleInput" :placeholder="placeholder" :disabled="disabled" />
<textarea
class="relative w-full flex items-center gap-2.5 p-2 pr-6 rounded-md overflow-hidden overflow-y-auto border transition bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-800 focus:border-neutral-400 dark:focus:border-neutral-700 focus:ring-4 focus:ring-opacity-50 focus:ring-neutral-200 dark:focus:ring-neutral-800 outline-none placeholder-neutral-400 dark:placeholder-neutral-500 shadow-sm"
:rows="minRows || rows"
ref="textAreaRef"
:class="{
'!border-red-500': isError,
'bg-neutral-100 dark:bg-neutral-900 text-neutral-400 dark:text-neutral-600':
disabled,
}"
:value="inputValue"
@input="handleInput"
:placeholder="placeholder"
:disabled="disabled"
/>
</div>
</div>
</template>

66
components/uni/Toggle/index.vue
View File

@@ -1,21 +1,21 @@
<script setup lang="ts">
import type {PropType} from "vue";
import type { PropType } from 'vue'
const emit = defineEmits(['input', 'change', 'update:modelValue'])
const props = defineProps({
modelValue: {
type: Boolean,
required: false
required: false,
},
size: {
type: String as PropType<'sm' | 'md' | 'lg'>,
required: false,
default: 'md'
default: 'md',
},
value: {
type: Boolean,
required: false
required: false,
},
onIcon: {
type: String,
@@ -24,7 +24,7 @@ const props = defineProps({
offIcon: {
type: String,
required: false,
}
},
})
const checked = ref(false)
@@ -88,31 +88,49 @@ onMounted(() => {
}
})
watch(() => props.modelValue, (value) => {
checked.value = value
})
watch(
() => props.modelValue,
(value) => {
checked.value = value
}
)
</script>
<template>
<button
class="relative flex items-center rounded-lg bg-neutral-100 dark:bg-neutral-800 shadow-inner transition ease-in-out group outline-none"
:class="{
class="relative flex items-center rounded-lg bg-neutral-100 dark:bg-neutral-800 shadow-inner transition ease-in-out group outline-none"
:class="{
'!bg-green-400 dark:!bg-green-400/50': checked,
[buttonSizeClass]: buttonSizeClass,
[buttonPaddingClass]: buttonPaddingClass
}" @click="handleCheck">
[buttonPaddingClass]: buttonPaddingClass,
}"
@click="handleCheck"
>
<span
class="aspect-[1/1] translate-x-0 transition ease-in-out bg-white dark:bg-black rounded-md shadow duration-300 group-active:scale-90"
:class="{
'!shadow-lg': checked,
'group-active:translate-x-3 group-active:duration-500': !checked,
[bulletSizeClass]: bulletSizeClass,
[bulletTranslateClass]: checked
}">
<span v-if="onIcon || offIcon" class="absolute inset-0 flex items-center justify-center text-neutral-400">
<Transition name="icon" mode="out-in">
<slot v-if="checked" name="on-icon"/>
<slot v-else name="off-icon"/>
class="aspect-[1/1] translate-x-0 transition ease-in-out bg-white dark:bg-black rounded-md shadow duration-300 group-active:scale-90"
:class="{
'!shadow-lg': checked,
'group-active:translate-x-3 group-active:duration-500': !checked,
[bulletSizeClass]: bulletSizeClass,
[bulletTranslateClass]: checked,
}"
>
<span
v-if="onIcon || offIcon"
class="absolute inset-0 flex items-center justify-center text-neutral-400"
>
<Transition
name="icon"
mode="out-in"
>
<slot
v-if="checked"
name="on-icon"
/>
<slot
v-else
name="off-icon"
/>
</Transition>
</span>
</span>
@@ -130,4 +148,4 @@ watch(() => props.modelValue, (value) => {
opacity: 0;
transform: scale(0.5);
}
</style>
</style>