From 45ed2f508ba6d42082fa0d8478a9c363fe4eec9d Mon Sep 17 00:00:00 2001
From: yanghao05 <yanghao05@qianxin.com>
Date: Tue, 8 Apr 2025 17:32:04 +0800
Subject: [PATCH] fix: issues

---
 frontend/admin/src/pages/MediaPage.vue | 63 +++++++++++++-------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/frontend/admin/src/pages/MediaPage.vue b/frontend/admin/src/pages/MediaPage.vue
index ef3d086..dc22acb 100644
--- a/frontend/admin/src/pages/MediaPage.vue
+++ b/frontend/admin/src/pages/MediaPage.vue
@@ -34,11 +34,11 @@ const closeUploadDialog = () => {
 
 // Media types for filtering
 const mediaTypes = ref([
-    { name: 'All media', value: null },
-    { name: 'Images', value: 'Image' },
-    { name: 'Videos', value: 'Video' },
-    { name: 'Documents', value: 'Document' },
-    { name: 'Audio', value: 'Audio' },
+    { name: '所有媒体', value: null },
+    { name: '图片', value: 'Image' },
+    { name: '视频', value: 'Video' },
+    { name: '文档', value: 'Document' },
+    { name: '音频', value: 'Audio' },
     { name: 'PDF', value: 'PDF' }
 ]);
 
@@ -65,7 +65,7 @@ const mediaFiles = ref([]);
 
 // File upload handling
 const onUpload = (event) => {
-    toast.add({ severity: 'success', summary: 'Success', detail: 'Files uploaded successfully', life: 3000 });
+    toast.add({ severity: 'success', summary: '成功', detail: '文件上传成功', life: 3000 });
     // In a real app, you would process the files from event.files and update the mediaFiles list
     // Here we're just showing a success message
 
@@ -78,25 +78,25 @@ const onUpload = (event) => {
 
 // Preview file
 const previewFile = (file) => {
-    toast.add({ severity: 'info', summary: 'Preview', detail: `Previewing ${file.name}`, life: 3000 });
+    toast.add({ severity: 'info', summary: '预览', detail: `预览 ${file.name}`, life: 3000 });
 };
 
 // Download file
 const downloadFile = (file) => {
-    toast.add({ severity: 'info', summary: 'Download', detail: `Downloading ${file.name}`, life: 3000 });
+    toast.add({ severity: 'info', summary: '下载', detail: `下载 ${file.name}`, life: 3000 });
 };
 
 // Delete file
 const confirmDelete = (file) => {
     confirm.require({
-        message: `Are you sure you want to delete ${file.name}?`,
-        header: 'Confirmation',
+        message: `您确定要删除 ${file.name} 吗？`,
+        header: '确认删除',
         icon: 'pi pi-exclamation-triangle',
         acceptClass: 'p-button-danger',
         accept: () => {
             // In a real app, you would call an API to delete the file
             mediaFiles.value = mediaFiles.value.filter(f => f.id !== file.id);
-            toast.add({ severity: 'success', summary: 'Success', detail: 'File deleted', life: 3000 });
+            toast.add({ severity: 'success', summary: '成功', detail: '文件已删除', life: 3000 });
         }
     });
 };
@@ -113,7 +113,7 @@ const fetchMediaFiles = async () => {
         totalRecords.value = response.total;
         console.log(totalRecords.value);
     } catch (error) {
-        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to load media files', life: 3000 });
+        toast.add({ severity: 'error', summary: '错误', detail: '加载媒体文件失败', life: 3000 });
     } finally {
         loading.value = false;
     }
@@ -155,7 +155,7 @@ const getFileIcon = (file) => {
 const formatFileSize = (bytes) => {
     if (bytes === 0) return '0 B';
     const k = BigInt(1024);
-    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
     // Convert input to BigInt
     const bytesValue = BigInt(bytes);
@@ -179,7 +179,7 @@ const formatFileSize = (bytes) => {
 
     <div class="w-full">
         <div class="flex justify-between items-center mb-6 gap-4">
-            <h1 class="text-2xl font-semibold text-gray-800 text-nowrap">Media Library</h1>
+            <h1 class="text-2xl font-semibold text-gray-800 text-nowrap">媒体库</h1>
 
             <Button class="text-nowrap !px-8" icon="pi pi-upload" label="上传" severity="primary"
                 @click="openUploadDialog" />
@@ -188,36 +188,36 @@ const formatFileSize = (bytes) => {
         <!-- Media Table -->
         <div class="card mt-10">
             <div class="pb-10 flex">
-                <InputText v-model="globalFilterValue" placeholder="Search media..." class="flex-1" />
+                <InputText v-model="globalFilterValue" placeholder="搜索媒体..." class="flex-1" />
             </div>
 
             <DataTable v-model:filters="filters" :value="mediaFiles" :paginator="true" v-model:first="first"
                 v-model:rows="rows" :totalRecords="totalRecords" @page="onPage"
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                 :rows-per-page-options="[10, 25, 50]"
-                current-page-report-template="Showing {first} to {last} of {totalRecords} entries" :lazy="true"
+                current-page-report-template="第 {first} 到 {last} 条，共 {totalRecords} 条" :lazy="true"
                 :show-current-page-report="true">
                 <template #paginatorLeft>
                     <div class="flex items-center">
-                        Per Page: {{ rows }}
+                        每页: {{ rows }}
                     </div>
                 </template>
                 <template #paginatorRight>
                     <div class="flex items-center">
-                        Page {{ currentPage }} of {{ totalPages }}
+                        第 {{ currentPage }} 页，共 {{ totalPages }} 页
                     </div>
                 </template>
                 <template #empty>
-                    <div class="text-center p-4">No media files found.</div>
+                    <div class="text-center p-4">未找到媒体文件</div>
                 </template>
                 <template #loading>
                     <div class="flex flex-col items-center justify-center p-4">
                         <ProgressSpinner style="width:50px;height:50px" />
-                        <span class="mt-2">Loading media data...</span>
+                        <span class="mt-2">加载中...</span>
                     </div>
                 </template>
 
-                <Column field="name" header="File Name" sortable>
+                <Column field="name" header="文件名" sortable>
                     <template #body="{ data }">
                         <div class="flex items-center">
                             <div v-if="data.thumbnail_url" class="flex-shrink-0 h-10 w-10 mr-3">
@@ -232,26 +232,25 @@ const formatFileSize = (bytes) => {
                     </template>
                 </Column>
 
-                <Column field="upload_time" header="Upload Time" sortable></Column>
+                <Column field="upload_time" header="上传时间" sortable></Column>
 
-                <Column field="file_size" header="File Size" sortable>
+                <Column field="file_size" header="文件大小" sortable>
                     <template #body="{ data }">
                         {{ formatFileSize(data.file_size) }}
                     </template>
                 </Column>
 
-                <Column field="media_type" header="File Type" sortable>
+                <Column field="media_type" header="文件类型" sortable>
                     <template #body="{ data }">
                         <Badge :value="data.file_type" :severity="getBadgeSeverity(data.file_type)" />
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
                         <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="mediaTypes"
-                            optionLabel="name" optionValue="value" placeholder="Any" class="p-column-filter"
-                            showClear />
+                            optionLabel="name" optionValue="value" placeholder="全部" class="p-column-filter" showClear />
                     </template>
                 </Column>
 
-                <Column header="Actions" :exportable="false" style="min-width:8rem">
+                <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)"
@@ -268,21 +267,21 @@ const formatFileSize = (bytes) => {
     </div>
 
     <!-- Upload Dialog -->
-    <Dialog v-model:visible="uploadDialogVisible" header="Upload Media Files" :modal="true" :dismissableMask="true"
-        :closable="true" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '640px': '90vw' }">
+    <Dialog v-model:visible="uploadDialogVisible" header="上传媒体文件" :modal="true" :dismissableMask="true" :closable="true"
+        :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '640px': '90vw' }">
         <FileUpload name="media[]" url="/api/upload" @upload="onUpload" :multiple="true"
             accept="image/*,video/*,audio/*,.pdf,.doc,.docx" :maxFileSize="50000000" class="w-full">
             <template #empty>
                 <div class="flex flex-col items-center justify-center p-8">
                     <i class="pi pi-cloud-upload text-5xl text-blue-500 mb-4"></i>
-                    <p class="text-gray-600 text-center mb-2">Drag and drop files here or click to browse</p>
-                    <p class="text-gray-400 text-sm text-center">Supports: JPG, PNG, GIF, MP4, PDF, DOC</p>
+                    <p class="text-gray-600 text-center mb-2">拖拽文件到此处或点击上传</p>
+                    <p class="text-gray-400 text-sm text-center">支持: MP4, JPG, PNG, GIF, MP4, PDF, DOC</p>
                 </div>
             </template>
         </FileUpload>
 
         <template #footer>
-            <Button label="Cancel" icon="pi pi-times" @click="closeUploadDialog" text severity="secondary" />
+            <Button label="取消" icon="pi pi-times" @click="closeUploadDialog" text severity="secondary" />
         </template>
     </Dialog>
 </template>