From 865d597fe8426145c74fb7c76e81217ce0a439b5 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 18 Jun 2024 13:05:25 +0800
Subject: [PATCH] add thumbnail

---
 src/api/types.ts                           | 16 ++++++-----
 src/components/FileBrowser.vue             |  5 +++-
 src/components/filebrowser/FileList.vue    | 31 +++++++++++++---------
 src/components/filebrowser/FileToolbar.vue |  9 ++++---
 4 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index 5a43aae5..b7497204 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -746,21 +746,23 @@ export interface FileItem {
   // 文件名
   name: string
   // 文件名不含扩展名
-  basename: string
+  basename?: string
   // 文件路径
   path: string
   // 文件扩展名
-  extension: string
+  extension?: string
   // 文件大小
-  size: number
+  size?: number
   // 文件子元素
-  children: FileItem[]
+  children?: FileItem[]
   // 文件创建时间
-  modify_time: number
+  modify_time?: number
   // 文件ID
-  fileid: string
+  fileid?: string
   // 上级文件ID
-  parent_fileid: string
+  parent_fileid?: string
+  // 缩略图
+  thumbnail?: string
 }
 
 // 媒体服务器播放条目
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index 6d470ce0..5c494f7a 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -15,7 +15,10 @@ const props = defineProps({
   fileidstack: Array as PropType<string[]>,
   tree: Boolean,
   endpoints: Object as PropType<EndPoints>,
-  axios: Object as PropType<Axios>,
+  axios: {
+    type: Object as PropType<Axios>,
+    required: true,
+  },
   axiosconfig: Object,
 })
 
diff --git a/src/components/filebrowser/FileList.vue b/src/components/filebrowser/FileList.vue
index ff0ee8bd..4b822958 100644
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -2,7 +2,6 @@
 import type { Axios } from 'axios'
 import type { PropType } from 'vue'
 import { useConfirm } from 'vuetify-use-dialog'
-import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
 import ReorganizeDialog from '../dialog/ReorganizeDialog.vue'
 import { formatBytes } from '@core/utils/formatters'
@@ -28,7 +27,10 @@ const inProps = defineProps({
   path: String,
   fileid: String,
   endpoints: Object as PropType<EndPoints>,
-  axios: Object as PropType<Axios>,
+  axios: {
+    type: Object as PropType<Axios>,
+    required: true,
+  },
   refreshpending: Boolean,
   sort: String,
 })
@@ -54,9 +56,6 @@ const progressValue = ref(0)
 // 确认框
 const createConfirm = useConfirm()
 
-// axios实例
-const axiosInstance = ref<Axios>(inProps.axios ?? axios)
-
 // 内容列表
 const items = ref<FileItem[]>([])
 
@@ -118,7 +117,7 @@ async function load() {
     method: inProps.endpoints?.list.method || 'get',
   }
   // 加载数据
-  items.value = (await axiosInstance.value.request(config)) ?? []
+  items.value = (await inProps.axios.request(config)) ?? []
   emit('loading', false)
   loading.value = false
 }
@@ -142,7 +141,7 @@ async function deleteItem(item: FileItem) {
       method: inProps.endpoints?.delete.method || 'post',
     }
 
-    await axiosInstance.value.request(config)
+    await inProps.axios.request(config)
     emit('filedeleted')
     emit('loading', false)
     // 重新加载
@@ -380,11 +379,19 @@ onMounted(() => {
     <VCardText v-if="!inProps.path" class="grow d-flex justify-center align-center grey--text">
       选择目录或文件
     </VCardText>
-    <VCardText v-else-if="isFile && !isImage" class="text-center break-all">
-      <strong>{{ items[0]?.name }}</strong
-      ><br />
-      大小：{{ formatBytes(items[0]?.size || 0) }}<br />
-      修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
+    <VCardText v-else-if="isFile && !isImage && items[0]" class="text-center break-all">
+      <div v-if="items[0]?.thumbnail" class="flex justify-center">
+        <VImg max-width="15rem" cover :src="items[0]?.thumbnail" class="rounded border shadow-lg">
+          <template #placeholder>
+            <VSkeletonLoader class="object-cover w-full h-full" />
+          </template>
+        </VImg>
+      </div>
+      <div class="text-xl text-high-emphasis mt-3">{{ items[0]?.name }}</div>
+      <p class="mt-2">
+        大小：{{ formatBytes(items[0]?.size || 0) }}<br />
+        修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
+      </p>
     </VCardText>
     <VCardText v-else-if="isFile && isImage" class="grow d-flex justify-center align-center">
       <VImg :src="getImgLink(inProps.path)" max-width="100%" max-height="100%" />
diff --git a/src/components/filebrowser/FileToolbar.vue b/src/components/filebrowser/FileToolbar.vue
index 82c16cb4..dbcc327f 100644
--- a/src/components/filebrowser/FileToolbar.vue
+++ b/src/components/filebrowser/FileToolbar.vue
@@ -13,7 +13,10 @@ const inProps = defineProps({
     default: () => [],
   },
   endpoints: Object as PropType<EndPoints>,
-  axios: Object as PropType<Axios>,
+  axios: {
+    type: Object as PropType<Axios>,
+    required: true,
+  },
 })
 
 // 对外事件
@@ -77,7 +80,7 @@ function changePath(_path: string, _fileid: string) {
 function goUp() {
   const segments = pathSegments.value ?? []
   const path = segments?.length === 1 ? '/' : segments[segments.length - 2].path
-  const fileid = segments?.length === 1 ? 'root' : segments[segments.length - 2].fileid
+  const fileid = segments?.length === 1 ? 'root' : segments[segments.length - 1].fileid
   changePath(path, fileid)
 }
 
@@ -95,7 +98,7 @@ async function mkdir() {
   }
 
   // 调API
-  await inProps.axios?.request(config)
+  await inProps.axios.request(config)
 
   newFolderPopper.value = false
   newFolderName.value = ''