44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import { Icon } from '@iconify/vue/dist/iconify.js'
|
|
|
|
export interface ImageResult {
|
|
result: 'success' | 'error' | 'pending' | 'idle'
|
|
imageUrl: string
|
|
message?: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
imageResult: ImageResult
|
|
}>()
|
|
|
|
function download() {
|
|
if (props.imageResult.result === 'success') {
|
|
const a = document.createElement('a')
|
|
a.href = props.imageResult.imageUrl
|
|
a.download = 'image.png'
|
|
a.click()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative h-full min-h-[50vh] w-full flex flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
|
|
<Badge variant="outline" class="absolute left-3 top-3">
|
|
图片输出
|
|
</Badge>
|
|
<div v-if="imageResult.result === 'pending'" class="flex flex-1 items-center justify-center text-xl">
|
|
<Icon icon="akar-icons:loading" class="mr-2 animate-spin" />
|
|
<span>正在加载图片</span>
|
|
</div>
|
|
<Image v-else-if="imageResult.result === 'success'" class="flex flex-1 items-center justify-center text-xl" :image-url="imageResult.imageUrl" />
|
|
<div v-else class="flex flex-1 items-center justify-center text-xl">
|
|
{{ imageResult.message }}
|
|
</div>
|
|
|
|
<Button type="submit" size="sm" class="ml-auto gap-1.5" @click.prevent="download">
|
|
下载图片
|
|
<CornerDownLeft class="size-3.5" />
|
|
</Button>
|
|
</div>
|
|
</template>
|