feat: update

frontend/admin/src/pages/MediaPage.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { mediaService } from "@/api/mediaService";
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
+import { formatDate } from "@/utils/date";
+import { formatFileSize } from "@/utils/filesize";
+import { getFileIcon, getFileTypeByMimeCN } from "@/utils/filetype";
 import { InputText } from "primevue";
 import Badge from "primevue/badge";
 import Button from "primevue/button";
@@ -17,6 +17,19 @@ import { useToast } from "primevue/usetoast";
 import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 
+import {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
+} from 'vue-icons-plus/bs';
+
 // Import useConfirm dynamically to avoid the error when the service is not provided
 const confirm = useConfirm();
 const toast = useToast();
@@ -27,18 +40,6 @@ const router = useRouter();
 const openUploadDialog = () => {
     router.push("/medias/uploads");
 };
-
-// Media types for filtering
-const mediaTypes = ref([
-    { name: "所有媒体", value: null },
-    { name: "图片", value: "Image" },
-    { name: "视频", value: "Video" },
-    { name: "文档", value: "Document" },
-    { name: "音频", value: "Audio" },
-    { name: "PDF", value: "PDF" },
-]);
-
-const selectedMediaType = ref(mediaTypes.value[0]);
 const globalFilterValue = ref("");
 const loading = ref(false);
 const filters = ref({
@@ -96,52 +97,25 @@ onMounted(() => {
     fetchMediaFiles();
 });
 
-// File type badge severity mapping
-const getBadgeSeverity = (fileType) => {
-    const map = {
-        Image: "info",
-        PDF: "danger",
-        Video: "warning",
-        Document: "primary",
-        Audio: "success",
-    };
-    return map[fileType] || "info";
+// Remove getBadgeSeverity function as it's no longer needed
+
+// Create icons object
+const icons = {
+    BsFileEarmark,
+    BsFileExcel,
+    BsFileImage,
+    BsFileMusic,
+    BsFilePdf,
+    BsFilePlayFill,
+    BsFilePpt,
+    BsFileText,
+    BsFileWord,
+    BsFileZip
 };
 
-// File type icon mapping
-const getFileIcon = (file) => {
-    if (file.thumbnailUrl) return null;
-    return `pi ${file.iconClass}`;
-};
-
-// Add helper function to format file size
-const formatFileSize = (bytes) => {
-    if (bytes === 0) return "0 B";
-    const k = BigInt(1024);
-    const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-
-    // Convert input to BigInt
-    const bytesValue = BigInt(bytes);
-
-    // Calculate the appropriate unit
-    let i = 0;
-    let size = bytesValue;
-    while (size >= k && i < sizes.length - 1) {
-        size = size / k;
-        i++;
-    }
-
-    // Convert back to number and format with commas
-    return `${Number(size).toLocaleString("en-US")} ${sizes[i]}`;
-};
-
-// Configure dayjs
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-// Add formatDate function
-const formatDate = (date) => {
-    return dayjs.tz(date, 'Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');
+// Replace getFileIcon function with a simpler version
+const getFileIconComponent = (file) => {
+    return getFileIcon(file, icons);
 };
 </script>
 
@@ -190,13 +164,9 @@ const formatDate = (date) => {
                 <Column field="name" header="文件名">
                     <template #body="{ data }">
                         <div class="flex items-center">
-                            <div v-if="data.thumbnail_url" class="flex-shrink-0 h-10 w-10 mr-3">
-                                <img class="h-10 w-10 object-cover rounded" :src="data.thumbnail_url"
-                                    :alt="data.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(data)" class="text-2xl"></i>
+                                <component :is="getFileIconComponent(data)" class="text-xl text-gray-600" />
                             </div>
                             <div class="text-sm font-medium text-gray-900">{{ data.name }}</div>
                         </div>
@@ -219,7 +189,7 @@ const formatDate = (date) => {
 
                 <Column field="media_type" header="文件类型">
                     <template #body="{ data }">
-                        <Badge :value="data.file_type" :severity="getBadgeSeverity(data.file_type)" />
+                        <Badge :value="getFileTypeByMimeCN(data.mime_type)" />
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
                         <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="mediaTypes"