fix 文件管理默认路径、特殊字符问题

src/App.vue

@@ -2,7 +2,7 @@
 import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
 import api from './api'
-import type { Setting, User } from './api/types'
+import type { User } from './api/types'
 import store from './store'
 import avatar1 from '@images/avatars/avatar-1.png'
 
@@ -47,9 +47,6 @@ const accountInfo = ref<User>({
   avatar: avatar1,
 })
 
-// 环境设置信息
-const systemEnv = ref<Setting>()
-
 // 调用API，加载当前用户数据
 async function loadAccountInfo() {
   try {
@@ -64,28 +61,14 @@ async function loadAccountInfo() {
   }
 }
 
-// 调用API，加载当前系统环境设置
-async function loadSystemSettings() {
-  try {
-    const result: { [key: string]: any } = await api.get('system/env')
-    if (result.success)
-      systemEnv.value = result.data
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
 // 页面加载时，加载当前用户数据
 onBeforeMount(async () => {
   await loadAccountInfo()
-  await loadSystemSettings()
   startSSEMessager()
 })
 
 // 提供给所有元素复用
 provide('accountInfo', accountInfo)
-provide('systemEnv', systemEnv)
 </script>
 
 <template>

src/components/FileBrowser.vue

@@ -18,6 +18,9 @@ const props = defineProps({
   axiosconfig: Object,
 })
 
+// 对外事件
+const emit = defineEmits(['pathchanged'])
+
 const availableStorages = [
   {
     name: '本地',
@@ -48,8 +51,6 @@ const fileIcons = {
   other: 'mdi-file-outline',
 }
 
-// 当前路径
-const path = ref(props.path)
 // 加载次数
 const loading = ref(0)
 // 当前存储
@@ -77,23 +78,22 @@ function storageChanged(storage: string) {
   activeStorage.value = storage
 }
 
+// 路径变化
 function pathChanged(_path: string) {
-  path.value = _path
+  emit('pathchanged', _path)
 }
 
 // 初始化
 onBeforeMount(() => {
   activeStorage.value = props.storage ?? 'local'
   axiosInstance.value = props.axios ?? axios.create(props.axiosconfig)
-  if (!path.value)
-    pathChanged('/')
 })
 </script>
 
 <template>
   <VCard class="mx-auto" :loading="loading > 0">
     <Toolbar
-      :path="path"
+      :path="props.path"
       :storages="storagesArray"
       :storage="activeStorage"
       :endpoints="props.endpoints"
@@ -105,7 +105,7 @@ onBeforeMount(() => {
     <VRow no-gutters>
       <VCol v-if="tree" sm="auto" class="d-none d-md-block">
         <Tree
-          :path="path"
+          :path="props.path"
           :storage="activeStorage"
           :icons="fileIcons"
           :endpoints="endpoints"
@@ -119,7 +119,7 @@ onBeforeMount(() => {
       <VDivider v-if="tree" vertical />
       <VCol>
         <List
-          :path="path"
+          :path="props.path"
           :storage="activeStorage"
           :icons="fileIcons"
           :endpoints="endpoints"

src/components/filebrowser/List.vue

@@ -109,7 +109,7 @@ async function load() {
   if (isDir.value) {
     const url = inProps.endpoints?.list.url
       .replace(/{storage}/g, storage.value)
-      .replace(/{path}/g, inProps.path)
+      .replace(/{path}/g, encodeURIComponent(inProps.path || ''))
 
     const config = {
       url,
@@ -140,7 +140,7 @@ async function deleteItem(item: FileItem) {
     emit('loading', true)
     const url = inProps.endpoints?.delete.url
       .replace(/{storage}/g, storage.value)
-      .replace(/{path}/g, item.path)
+      .replace(/{path}/g, encodeURIComponent(item.path))
 
     const config = {
       url,
@@ -167,7 +167,7 @@ function download(path: string) {
   const token = store.state.auth.token
   const url_path = inProps.endpoints?.download.url
     .replace(/{storage}/g, storage.value)
-    .replace(/{path}/g, path)
+    .replace(/{path}/g, encodeURIComponent(path))
   const url = `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
   // 下载文件
   window.open(url, '_blank')
@@ -180,7 +180,7 @@ function getImgLink(path: string) {
   const token = store.state.auth.token
   const url_path = inProps.endpoints?.image.url
     .replace(/{storage}/g, storage.value)
-    .replace(/{path}/g, path)
+    .replace(/{path}/g, encodeURIComponent(path))
   return `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
 }
 
@@ -196,8 +196,8 @@ async function rename() {
   emit('loading', true)
   const url = inProps.endpoints?.rename.url
     .replace(/{storage}/g, inProps.storage)
-    .replace(/{path}/g, currentItem.value?.path)
+    .replace(/{path}/g, encodeURIComponent(currentItem.value?.path || ''))
-    .replace(/{newname}/g, newName.value)
+    .replace(/{newname}/g, encodeURIComponent(newName.value))
 
   const config = {
     url,
@@ -223,7 +223,7 @@ function showTransfer(item: FileItem) {
 
 // 整理文件
 async function transfer() {
-  transferForm.path = currentItem.value?.path || ''
+  transferForm.path = encodeURIComponent(currentItem.value?.path || '')
   // 开始整理文件
   try {
     transferPopper.value = false

src/components/filebrowser/Toolbar.vue

@@ -64,7 +64,7 @@ async function mkdir() {
   emit('loading', true)
   const url = inProps.endpoints?.mkdir.url
     .replace(/{storage}/g, inProps.storage)
-    .replace(/{path}/g, inProps.path + newFolderName.value)
+    .replace(/{path}/g, encodeURIComponent(inProps.path + newFolderName.value))
 
   const config = {
     url,

src/views/reorganize/FileBrowserView.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import api from '@/api'
-import type { Setting } from '@/api/types'
 import FileBrowser from '@/components/FileBrowser.vue'
 
 const endpoints = {
@@ -13,16 +12,32 @@ const endpoints = {
 }
 
 // 读取下载目录
-const systemEnv: Setting = inject('systemEnv') ?? {
+const path = ref('/')
-  DOWNLOAD_PATH: '/',
+
+// 调用API，加载当前系统环境设置
+async function loadSystemSettings() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/env')
+    if (result.success)
+      path.value = result.data?.DOWNLOAD_PATH || '/'
+    console.log(path.value)
+  }
+  catch (error) {
+    console.log(error)
+  }
 }
 
-if (systemEnv?.DOWNLOAD_PATH && !systemEnv.DOWNLOAD_PATH?.endsWith('/'))
+function pathChanged(_path: string) {
-  systemEnv.DOWNLOAD_PATH += '/'
+  path.value = _path
+}
+
+onBeforeMount(async () => {
+  await loadSystemSettings()
+})
 </script>
 
 <template>
   <div>
-    <FileBrowser storages="local" :tree="false" :path="systemEnv?.DOWNLOAD_PATH" :endpoints="endpoints" :axios="api" />
+    <FileBrowser storages="local" :tree="false" :path="path" :endpoints="endpoints" :axios="api" @pathchanged="pathChanged" />
   </div>
 </template>