diff --git a/src/App.vue b/src/App.vue index 4a905e41..e09d8670 100644 --- a/src/App.vue +++ b/src/App.vue @@ -77,9 +77,9 @@ async function loadSystemSettings() { } // 页面加载时,加载当前用户数据 -onMounted(() => { - loadAccountInfo() - loadSystemSettings() +onBeforeMount(async () => { + await loadAccountInfo() + await loadSystemSettings() startSSEMessager() }) diff --git a/src/api/types.ts b/src/api/types.ts index c1876679..2915004c 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -892,6 +892,7 @@ export interface EndPoints { mkdir: any delete: any download: any + image: any } // 文件浏览项目 diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue index 02d4ea6a..ff365347 100644 --- a/src/components/FileBrowser.vue +++ b/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', diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue index 291d1261..3d76bec9 100644 --- a/src/components/filebrowser/List.vue +++ b/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(() => { 选择目录或文件 - 文件: {{ path }} + 文件: {{ path }}
+
+ + diff --git a/src/views/reorganize/FileBrowserView.vue b/src/views/reorganize/FileBrowserView.vue index 1b9adbae..d05c7d0f 100644 --- a/src/views/reorganize/FileBrowserView.vue +++ b/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 += '/'