feat 图片显示&文件下载

src/App.vue

@@ -77,9 +77,9 @@ async function loadSystemSettings() {
 }
 
 // 页面加载时，加载当前用户数据
-onMounted(() => {
-  loadAccountInfo()
-  loadSystemSettings()
+onBeforeMount(async () => {
+  await loadAccountInfo()
+  await loadSystemSettings()
   startSSEMessager()
 })
 

src/api/types.ts

@@ -892,6 +892,7 @@ export interface EndPoints {
   mkdir: any
   delete: any
   download: any
+  image: any
 }
 
 // 文件浏览项目

src/components/FileBrowser.vue

@@ -32,8 +32,8 @@ const fileIcons = {
   htm: 'mdi-language-html5',
   html: 'mdi-language-html5',
   js: 'mdi-nodejs',
-  json: 'mdi-json',
-  md: 'mdi-markdown',
+  json: 'mdi-file-document-outline',
+  md: 'mdi-language-markdown-outline',
   pdf: 'mdi-file-pdf',
   png: 'mdi-file-image',
   jpg: 'mdi-file-image',

src/components/filebrowser/List.vue

@@ -5,6 +5,7 @@ import { useConfirm } from 'vuetify-use-dialog'
 import axios from 'axios'
 import { formatBytes } from '@core/utils/formatters'
 import type { EndPoints, FileItem } from '@/api/types'
+import store from '@/store'
 
 // 输入参数
 const props = defineProps({
@@ -50,6 +51,12 @@ const isDir = computed(() => props.path?.endsWith('/'))
 // 是否文件
 const isFile = computed(() => !isDir.value)
 
+// 是否为图片文件
+const isImage = computed(() => {
+  const ext = props.path?.split('.').pop()?.toLowerCase()
+  return ['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(ext ?? '')
+})
+
 // 调API加载内容
 async function load() {
   emit('loading', true)
@@ -110,13 +117,26 @@ function changePath(_path: string) {
 function download(path: string) {
   if (!path)
     return
-  const url = props.endpoints?.download.url
+  const token = store.state.auth.token
+  const url_path = props.endpoints?.download.url
     .replace(/{storage}/g, storage.value)
     .replace(/{path}/g, path)
-  // FIXME 下载文件
+  const url = `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
+  // 下载文件
   window.open(url, '_blank')
 }
 
+// 显示图片
+function getImgLink(path: string) {
+  if (!path)
+    return ''
+  const token = store.state.auth.token
+  const url_path = props.endpoints?.image.url
+    .replace(/{storage}/g, storage.value)
+    .replace(/{path}/g, path)
+  return `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
+}
+
 // 转移文件
 function transfer(item: FileItem) {
   // TODO 转移文件
@@ -156,10 +176,16 @@ onMounted(() => {
       选择目录或文件
     </VCardText>
     <VCardText
-      v-else-if="isFile"
+      v-else-if="isFile && !isImage"
       class="grow d-flex justify-center align-center"
     >
-      文件: {{ path }}
+      文件: {{ path }}<br>
+    </VCardText>
+    <VCardText
+      v-else-if="isFile && isImage"
+      class="grow d-flex justify-center align-center"
+    >
+      <VImg :src="getImgLink(path)" cover max-width="100%" max-height="100%" />
     </VCardText>
     <VCardText v-else-if="dirs.length || files.length" class="grow">
       <VList v-if="dirs.length" subheader max-height="300">

src/views/reorganize/FileBrowserView.vue

@@ -8,16 +8,20 @@ const endpoints = {
   mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'get' },
   delete: { url: '/filebrowser/delete?path={path}', method: 'get' },
   download: { url: '/filebrowser/download?path={path}', method: 'get' },
+  image: { url: '/filebrowser/image?path={path}', method: 'get' },
 }
 
 // 读取下载目录
 const systemEnv: Setting = inject('systemEnv') ?? {
   DOWNLOAD_PATH: '/',
 }
+
+if (systemEnv?.DOWNLOAD_PATH && !systemEnv.DOWNLOAD_PATH?.endsWith('/'))
+  systemEnv.DOWNLOAD_PATH += '/'
 </script>
 
 <template>
   <div>
-    <FileBrowser storages="local" :tree="false" :path="systemEnv.DOWNLOAD_PATH" :endpoints="endpoints" :axios="api" />
+    <FileBrowser storages="local" :tree="false" :path="systemEnv?.DOWNLOAD_PATH" :endpoints="endpoints" :axios="api" />
   </div>
 </template>