rogee/quyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add media preview

Browse Source
This commit is contained in:
yanghao05
2025-04-18 21:03:56 +08:00
parent 4abd548325
commit 850d0c6486
3 changed files with 84 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
backend/app/http/admin/posts.go
View File

@@ -142,7 +142,7 @@ func (ctl *posts) Delete(ctx fiber.Ctx, id int64) error {
type PostItem struct {
*model.Posts
Medias []*models.MediaItem `json:"medias"`
Medias []*model.Medias `json:"medias"`
}
// Show posts by id
@@ -161,15 +161,7 @@ func (ctl *posts) Show(ctx fiber.Ctx, id int64) (*PostItem, error) {
return nil, err
}
return &PostItem{
Posts: post,
Medias: lo.Map(medias, func(media *model.Medias, _ int) *models.MediaItem {
return &models.MediaItem{
ID: media.ID,
Name: media.Name,
UploadTime: media.CreatedAt.Format("2006-01-02 15:04:05"),
FileSize: media.Size,
MimeType: media.MimeType,
}
}),
Posts: post,
Medias: medias,
}, nil
}

21
backend/app/models/medias.go
View File

@@ -13,14 +13,6 @@ import (
"github.com/sirupsen/logrus"
)
type MediaItem struct {
ID int64 `json:"id"`
Name string `json:"name"`
UploadTime string `json:"upload_time"`
FileSize int64 `json:"file_size"`
MimeType string `json:"media_type"`
}
// @provider
type mediasModel struct {
log *logrus.Entry `inject:"false"`
@@ -91,19 +83,8 @@ func (m *mediasModel) List(ctx context.Context, pagination *requests.Pagination,
return nil, err
}
// Convert model.Medias to MediaItem
mediaItems := lo.Map(medias, func(media model.Medias, _ int) *MediaItem {
return &MediaItem{
ID: media.ID,
Name: media.Name,
UploadTime: media.CreatedAt.Format("2006-01-02 15:04:05"),
FileSize: media.Size,
MimeType: media.MimeType,
}
})
return &requests.Pager{
Items: mediaItems,
Items: medias,
Total: count,
Pagination: *pagination,
}, nil

89
frontend/admin/src/pages/MediaPage.vue
View File

@@ -7,14 +7,14 @@ import { InputText } from "primevue";
import Badge from "primevue/badge";
import Button from "primevue/button";
import Column from "primevue/column";
import ConfirmDialog from "primevue/confirmdialog";
import DataTable from "primevue/datatable";
import Dialog from 'primevue/dialog';
import Dropdown from "primevue/dropdown";
import ProgressSpinner from "primevue/progressspinner";
import Toast from "primevue/toast";
import { useConfirm } from "primevue/useconfirm";
import { useToast } from "primevue/usetoast";
import { computed, onMounted, ref } from "vue";
import { computed, h, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import {
@@ -117,11 +117,74 @@ const icons = {
const getFileIconComponent = (file) => {
return getFileIcon(file, icons);
};
// Add Dialog control refs
const previewDialogVisible = ref(false);
const previewContent = ref(null);
const previewHeader = ref('媒体预览');
// 检查文件是否可预览
const isPreviewable = (file) => {
if (!file?.mime_type) return false;
const type = file.mime_type.split('/')[0];
return ['image', 'video', 'audio'].includes(type);
};
// 预览文件
const previewFile = (file) => {
if (!file?.mime_type) return;
const type = file.mime_type.split('/')[0];
const url = mediaService.getMediaPreviewUrl(file.id);
switch (type) {
case 'image':
previewContent.value = h('img', {
src: url,
style: {
maxWidth: '100%',
maxHeight: '80vh',
objectFit: 'contain'
}
});
break;
case 'video':
previewContent.value = h('video', {
src: url,
controls: true,
style: {
maxWidth: '100%',
maxHeight: '80vh'
}
});
break;
case 'audio':
previewContent.value = h('audio', {
src: url,
controls: true,
style: {
width: '100%'
}
});
break;
default:
return;
}
previewDialogVisible.value = true;
};
</script>
<template>
<Toast />
<ConfirmDialog />
<!-- Remove ConfirmDialog -->
<!-- Add Dialog component -->
<Dialog v-model:visible="previewDialogVisible" :modal="true" :header="previewHeader"
:style="{ width: '80vw', maxWidth: '1000px' }">
<div class="flex justify-center items-center">
<component :is="previewContent" />
</div>
</Dialog>
<div class="w-full">
<div class="flex justify-between items-center mb-6 gap-4">
@@ -173,17 +236,17 @@ const getFileIconComponent = (file) => {
</template>
</Column>
<Column field="upload_time" header="上传时间">
<Column field="created_at" header="上传时间">
<template #body="{ data }">
<div class="flex flex-col">
<span class="text-gray-400"> {{ formatDate(data.upload_time) }}</span>
<span class="text-gray-400"> {{ formatDate(data.created_at) }}</span>
</div>
</template>
</Column>
<Column field="file_size" header="文件大小">
<Column field="size" header="文件大小">
<template #body="{ data }">
{{ formatFileSize(data.file_size) }}
{{ formatFileSize(data.size) }}
</template>
</Column>
@@ -200,8 +263,8 @@ const getFileIconComponent = (file) => {
<Column header="" :exportable="false" style="min-width: 8rem">
<template #body="{ data }">
<div class="flex justify-center space-x-2">
<Button icon="pi pi-eye" rounded text severity="info" @click="previewFile(data)"
aria-label="Preview" />
<Button v-if="isPreviewable(data)" icon="pi pi-eye" rounded text severity="info"
@click="previewFile(data)" aria-label="Preview" />
<Button icon="pi pi-download" rounded text severity="secondary" @click="downloadFile(data)"
aria-label="Download" />
<Button icon="pi pi-trash" rounded text severity="danger" @click="confirmDelete(data)"
@@ -224,4 +287,12 @@ const getFileIconComponent = (file) => {
border-color: #4299e1;
background-color: rgba(66, 153, 225, 0.05);
}
/* Add Dialog custom styles */
:deep(.p-dialog-content) {
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
</style>