feat: update

frontend/admin/src/pages/PostCreatePage.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { mediaService } from '@/api/mediaService';
 import { postService } from '@/api/postService';
+import { formatFileSize } from "@/utils/filesize";
+import { getFileIcon, getFileTypeByMimeCN } from "@/utils/filetype";
 import { useToast } from 'primevue/usetoast';
 import { computed, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -18,6 +20,33 @@ import RadioButton from 'primevue/radiobutton';
 import Textarea from 'primevue/textarea';
 import Toast from 'primevue/toast';
 
+import {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
+} from 'vue-icons-plus/bs';
+
+// Create icons object
+const icons = {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
+};
+
 const router = useRouter();
 const toast = useToast();
 
@@ -212,43 +241,6 @@ const cancelCreate = () => {
     router.push('/posts');
 };
 
-// File type badge severity mapping
-const getBadgeSeverity = (fileType) => {
-    const map = {
-        'image': 'info',
-        'pdf': 'danger',
-        'video': 'warning',
-        'document': 'primary',
-        'audio': 'success'
-    };
-    return map[fileType] || 'info';
-};
-
-// File type icon mapping
-const getFileIcon = (file) => {
-    const map = {
-        'image': 'pi-image',
-        'pdf': 'pi-file-pdf',
-        'video': 'pi-video',
-        'document': 'pi-file',
-        'audio': 'pi-volume-up'
-    };
-    return `pi ${map[file.fileType] || 'pi-file'}`;
-};
-
-// Format file size helper
-const formatFileSize = (bytes) => {
-    if (!bytes && bytes !== 0) return '0 B';
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const base = 1024;
-    let size = Number(bytes);
-    if (isNaN(size)) return '0 B';
-
-    const i = Math.floor(Math.log(size) / Math.log(base));
-    size = size / Math.pow(base, i);
-    return `${size.toFixed(2)} ${sizes[i]}`;
-};
-
 // Add head image preview loading
 const loadHeadImagePreviews = async () => {
     headImageUrls.value = [];
@@ -372,20 +364,16 @@ const loadHeadImagePreviews = async () => {
                             <div class="grid grid-cols-1 md:grid-cols-1 gap-3">
                                 <div v-for="media in post.selectedMedia" :key="media.id"
                                     class="relative border border-gray-200 rounded-md p-2 flex items-center">
-                                    <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
-                                        <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
-                                            :alt="media.file_name">
-                                    </div>
-                                    <div v-else
+                                    <div
                                         class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
-                                        <i :class="getFileIcon(media)" class="text-2xl"></i>
+                                        <component :is="getFileIcon(media, icons)" class="text-xl text-gray-600" />
                                     </div>
+
                                     <div class="flex-1 overflow-hidden">
-                                        <div class="text-sm font-medium text-gray-900 truncate">
-                                            {{ media.name }}
+                                        <div class="text-sm font-medium text-gray-900 truncate">{{ media.name }}
                                         </div>
-                                        <Badge :value="media.file_type" :severity="getBadgeSeverity(media.file_type)"
-                                            class="text-xs" />
+
+                                        <Badge :value="getFileTypeByMimeCN(media.media_type)" />
                                     </div>
                                     <Button icon="pi pi-times" class="p-button-rounded p-button-text p-button-sm"
                                         @click="removeMedia(media)" aria-label="移除" />
@@ -444,7 +432,7 @@ const loadHeadImagePreviews = async () => {
 
             <Column field="fileType" header="文件类型">
                 <template #body="{ data }">
-                    <Badge :value="data.file_type" :severity="getBadgeSeverity(data.file_type)" />
+                    <Badge :value="getFileTypeByMimeCN(data.media_type)" />
                 </template>
             </Column>
 

frontend/admin/src/pages/PostEditPage.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { mediaService } from '@/api/mediaService';
 import { postService } from '@/api/postService';
+import { formatFileSize } from "@/utils/filesize";
+import { getFileIcon, getFileTypeByMimeCN } from "@/utils/filetype";
 import { useToast } from 'primevue/usetoast';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -18,11 +20,40 @@ import RadioButton from 'primevue/radiobutton';
 import Textarea from 'primevue/textarea';
 import Toast from 'primevue/toast';
 
+import {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
+} from 'vue-icons-plus/bs';
+
+// Create icons object
+const icons = {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
+};
+
+
 const router = useRouter();
 const route = useRoute();
 const toast = useToast();
 const loading = ref(true);
 
+
 // Form state
 const post = reactive({
     id: null,
@@ -248,27 +279,8 @@ const cancelEdit = () => {
 };
 
 // File type badge severity mapping
-const getBadgeSeverity = (fileType) => {
-    const map = {
-        'image': 'info',
-        'pdf': 'danger',
-        'video': 'warning',
-        'document': 'primary',
-        'audio': 'success'
-    };
-    return map[fileType] || 'info';
-};
-
-// File type icon mapping
-const getFileIcon = (file) => {
-    const map = {
-        'image': 'pi-image',
-        'pdf': 'pi-file-pdf',
-        'video': 'pi-video',
-        'document': 'pi-file',
-        'audio': 'pi-volume-up'
-    };
-    return `pi ${map[file.fileType] || 'pi-file'}`;
+const getBadgeSeverity = () => {
+    return 'info';
 };
 
 // Add pagination handler
@@ -279,19 +291,6 @@ const onMediaPage = (event) => {
     loadMediaItems();
 };
 
-// Add format file size helper
-const formatFileSize = (bytes) => {
-    if (!bytes && bytes !== 0) return '0 B';
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const base = 1024;
-    let size = Number(bytes);
-    if (isNaN(size)) return '0 B';
-
-    const i = Math.floor(Math.log(size) / Math.log(base));
-    size = size / Math.pow(base, i);
-    return `${size.toFixed(2)} ${sizes[i]}`;
-};
-
 onMounted(() => {
     // Get post ID from route params
     const postId = route.params.id;
@@ -414,22 +413,19 @@ onMounted(() => {
                             <div class="mb-4">
                                 <Button label="更改媒体" icon="pi pi-sync" @click="openMediaDialog" outlined />
                             </div>
-                            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+                            <div class="grid grid-cols-1 md:grid-cols-1 gap-3">
                                 <div v-for="media in post.selectedMedia" :key="media.id"
                                     class="relative border border-gray-200 rounded-md p-2 flex items-center">
-                                    <div v-if="media.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
-                                        <img class="h-10 w-10 object-cover rounded" :src="media.thumbnailUrl"
-                                            :alt="media.name">
-                                    </div>
-                                    <div v-else
+                                    <div
                                         class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
-                                        <i :class="getFileIcon(media)" class="text-2xl"></i>
+                                        <component :is="getFileIcon(media, icons)" class="text-xl text-gray-600" />
                                     </div>
+
                                     <div class="flex-1 overflow-hidden">
                                         <div class="text-sm font-medium text-gray-900 truncate">{{ media.name }}
                                         </div>
-                                        <Badge :value="media.file_type" :severity="getBadgeSeverity(media.file_type)"
-                                            class="text-xs" />
+
+                                        <Badge :value="getFileTypeByMimeCN(media.media_type)" />
                                     </div>
                                     <Button icon="pi pi-times" class="p-button-rounded p-button-text p-button-sm"
                                         @click="removeMedia(media)" aria-label="移除" />
@@ -488,7 +484,7 @@ onMounted(() => {
 
             <Column field="fileType" header="文件类型">
                 <template #body="{ data }">
-                    <Badge :value="data.file_type" :severity="getBadgeSeverity(data.file_type)" />
+                    <Badge :value="getFileTypeByMimeCN(data.media_type)" />
                 </template>
             </Column>