48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
|
||
import { useNowUser } from '@/stores/now-user.js'
|
||
import type { UploadFileDto } from '@/types/user.js'
|
||
|
||
const NOWUSER = useNowUser()
|
||
|
||
const { file } = defineProps<{
|
||
file: UploadFileDto
|
||
}>()
|
||
|
||
const is_you = computed(() => NOWUSER.id === file.uploader_id)
|
||
|
||
const showModal = defineModel('showModal', { required: true })
|
||
</script>
|
||
|
||
<template>
|
||
<n-modal v-model:show="showModal" preset="card" style="width: 1000px" title="文件信息">
|
||
<div class="card-content">
|
||
<n-image :width="500" :height="500" object-fit="contain" :src="file.download_url" />
|
||
<div class="side">
|
||
<n-h3>{{ file.original_name }}</n-h3>
|
||
<n-p>保存文件名：{{ file.safe_name }}</n-p>
|
||
<n-p
|
||
>上传用户ID：{{ file.uploader_id }}
|
||
<n-tag v-if="is_you" type="primary">你</n-tag>
|
||
</n-p>
|
||
|
||
<n-flex>
|
||
<a :href="file.download_url" target="_blank">
|
||
<n-button tertiary type="info">永久链接</n-button>
|
||
</a>
|
||
<n-button tertiary type="error" v-if="is_you">删除文件</n-button>
|
||
</n-flex>
|
||
</div>
|
||
</div>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
div.card-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 16px;
|
||
}
|
||
</style>
|