From ed8364a0c2cba876c271377b8dcaa767d7edce50 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 22 Aug 2023 08:30:47 +0800
Subject: [PATCH 01/25] fix UI

---
 src/components/NoDataFound.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/NoDataFound.vue b/src/components/NoDataFound.vue
index 015d471d..8af2c692 100644
--- a/src/components/NoDataFound.vue
+++ b/src/components/NoDataFound.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTheme } from 'vuetify'
-import misc404 from '@images/pages/404.png'
+import miscpose from '@images/pages/pose-fs-9.png'
 import miscMaskDark from '@images/pages/misc-mask-dark.png'
 import miscMaskLight from '@images/pages/misc-mask-light.png'
 import tree from '@images/pages/tree.png'
@@ -29,11 +29,12 @@ interface Props {
     />
 
     <!-- 👉 Image -->
-    <div class="misc-avatar w-100 text-center">
+    <div class="misc-avatar text-center">
       <VImg
-        :src="misc404"
-        :max-width="800"
-        class="mx-auto"
+        :src="miscpose"
+        class="mx-auto pt-10"
+        max-width="250"
+        cover
       />
       <slot name="button" />
     </div>
@@ -41,7 +42,7 @@ interface Props {
     <!-- 👉 Footer -->
     <VImg
       :src="tree"
-      class="misc-footer-tree d-none d-md-block"
+      class="misc-footer-tree d-none d-lg-block"
     />
 
     <VImg
@@ -52,21 +53,23 @@ interface Props {
 </template>
 
 <style lang="scss">
+@use "@configured-variables" as variables;
 @use '@core/scss/pages/misc.scss';
 
 .misc-wrapper {
   position: relative;
 
   .misc-footer-tree {
-    position: absolute;
+    position: fixed;
     z-index: 1;
     inline-size: 15.625rem;
     inset-block-end: 3.5rem;
     inset-inline-start: 0.375rem;
+    left: variables.$layout-vertical-nav-width;
   }
 
   .misc-footer-img {
-    position: absolute;
+    position: fixed;
     inline-size: 100%;
     inset-block-end: 0;
   }

From 6ad6d5a45b7e074eb6311d67697fddcabeb1ab26 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 22 Aug 2023 08:31:50 +0800
Subject: [PATCH 02/25] v1.0.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c77e4f24..ea664325 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "scripts": {
     "dev": "vite --host",

From 55abc47d0e388db8cdb66a558257103dd494aee5 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 23 Aug 2023 21:08:13 +0800
Subject: [PATCH 03/25] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20package.json?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ea664325..17e003b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "scripts": {
     "dev": "vite --host",

From 4491e80f6a79c7e6fd52558bbb0c504b2a9edd85 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 24 Aug 2023 08:32:58 +0800
Subject: [PATCH 04/25] =?UTF-8?q?feat=20=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81IMDBID=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |  2 +-
 src/components/cards/MediaCard.vue         |  1 +
 src/pages/resource.vue                     |  4 ++++
 src/views/discover/MediaDetailView.vue     | 27 +++++++++++++++++++---
 src/views/discover/TorrentCardListView.vue |  5 ++++
 5 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 17e003b9..4b17c7d1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "private": true,
   "scripts": {
     "dev": "vite --host",
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 15598196..afea82ed 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -349,6 +349,7 @@ function handleSearch() {
           : `douban:${props.media?.douban_id}`
       }`,
       type: props.media?.type,
+      area: 'title',
     },
   })
 }
diff --git a/src/pages/resource.vue b/src/pages/resource.vue
index 5f063e66..cad6fe3e 100644
--- a/src/pages/resource.vue
+++ b/src/pages/resource.vue
@@ -9,6 +9,9 @@ const keyword = route.query?.keyword?.toString() ?? ''
 
 // 查询类型
 const type = route.query?.type?.toString() ?? ''
+
+// 搜索字段
+const area = route.query?.area?.toString() ?? ''
 </script>
 
 <template>
@@ -16,6 +19,7 @@ const type = route.query?.type?.toString() ?? ''
     <TorrentCardListView
       :keyword="keyword"
       :type="type"
+      :area="area"
     />
   </div>
 </template>
diff --git a/src/views/discover/MediaDetailView.vue b/src/views/discover/MediaDetailView.vue
index b158846c..0438df7a 100644
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -379,12 +379,13 @@ function joinArray(arr: string[]) {
 }
 
 // 开始搜索
-function handleSearch() {
+function handleSearch(area: string) {
   router.push({
     path: '/resource',
     query: {
       keyword: `tmdb:${mediaDetail.value.tmdb_id}`,
       type: mediaDetail.value.type,
+      area,
     },
   })
 }
@@ -440,11 +441,31 @@ onBeforeMount(() => {
           </span>
         </div>
         <div class="media-actions">
-          <VBtn v-if="mediaDetail.tmdb_id" variant="tonal" color="info" @click="handleSearch">
+          <VBtn v-if="mediaDetail.tmdb_id" variant="tonal" color="info">
             <template #prepend>
               <VIcon icon="mdi-magnify" />
             </template>
-            搜索
+            搜索资源
+            <VMenu
+              activator="parent"
+              close-on-content-click
+            >
+              <VList>
+                <VListItem
+                  variant="plain"
+                  @click="handleSearch('title')"
+                >
+                  <VListItemTitle>标题</VListItemTitle>
+                </VListItem>
+                <VListItem
+                  v-show="mediaDetail.imdb_id"
+                  variant="plain"
+                  @click="handleSearch('imdbid')"
+                >
+                  <VListItemTitle>IMDB链接</VListItemTitle>
+                </VListItem>
+              </VList>
+            </VMenu>
           </VBtn>
           <VBtn v-if="mediaDetail.type === '电影'" class="ms-2" :color="getSubscribeColor" variant="tonal" @click="handleSubscribe(0)">
             <template #prepend>
diff --git a/src/views/discover/TorrentCardListView.vue b/src/views/discover/TorrentCardListView.vue
index 420a17d8..230df4b1 100644
--- a/src/views/discover/TorrentCardListView.vue
+++ b/src/views/discover/TorrentCardListView.vue
@@ -13,6 +13,9 @@ const props = defineProps({
 
   // 类型
   type: String,
+
+  // 搜索字段
+  area: String,
 })
 
 interface SearchTorrent extends Context {
@@ -124,6 +127,7 @@ async function fetchData(): Promise<Array<Context>> {
     let searchData: Array<Context>
     const keyword = props.keyword ?? ''
     const mtype = props.type ?? ''
+    const area = props.area ?? ''
     if (!keyword) {
       // 查询上次搜索结果
       searchData = await api.get('search/last')
@@ -136,6 +140,7 @@ async function fetchData(): Promise<Array<Context>> {
         searchData = await api.get(`search/media/${props.keyword}`, {
           params: {
             mtype,
+            area,
           },
         })
       }

From 2ca092013193b7b42c653ce79e2743e81aea29cf Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 24 Aug 2023 12:26:57 +0800
Subject: [PATCH 05/25] fix downloading title

---
 src/components/cards/DownloadingCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cards/DownloadingCard.vue b/src/components/cards/DownloadingCard.vue
index cda411aa..a4897109 100644
--- a/src/components/cards/DownloadingCard.vue
+++ b/src/components/cards/DownloadingCard.vue
@@ -84,7 +84,7 @@ async function deleteDownload() {
       :class="getTextClass()"
     >
       {{ props.info?.media.title || props.info?.name }}
-      {{ props.info?.season_episode }}
+      {{ props.info?.media.episode ? `${props.info?.media.season} ${props.info?.media.episode}` : props.info?.season_episode }}
     </VCardTitle>
 
     <VCardSubtitle

From ed45f3438f963d00a352ebabd081987a4dd54e49 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 24 Aug 2023 20:18:45 +0800
Subject: [PATCH 06/25] fix #251

---
 src/views/setting/AccountSettingSite.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/setting/AccountSettingSite.vue b/src/views/setting/AccountSettingSite.vue
index e7678ad3..3599d64f 100644
--- a/src/views/setting/AccountSettingSite.vue
+++ b/src/views/setting/AccountSettingSite.vue
@@ -40,7 +40,7 @@ async function querySelectedSites() {
   try {
     const result: { [key: string]: any } = await api.get('system/setting/IndexerSites')
 
-    selectedSites.value = result.data?.value
+    selectedSites.value = result.data?.value ?? []
   }
   catch (error) {
     console.log(error)

From 8ef2be1c817698a606bbeee27e6fbcc429e93af4 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 24 Aug 2023 20:56:46 +0800
Subject: [PATCH 07/25] fix

---
 src/components/cards/SubscribeCard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index 09eb65e8..7791fac6 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -65,8 +65,8 @@ function getPercentage() {
     return 0
 
   return Math.round(
-    (((props.media?.total_episode || 0) - (props.media?.lack_episode || 0))
-      / (props.media?.total_episode || 1))
+    (((props.media?.total_episode ?? 0) - (props.media?.lack_episode ?? 0))
+      / (props.media?.total_episode ?? 1))
       * 100,
   )
 }

From 235942157e78883e32306a27cd5a59552d2e5502 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 25 Aug 2023 12:47:29 +0800
Subject: [PATCH 08/25] v1.0.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4b17c7d1..75284d0f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": true,
   "scripts": {
     "dev": "vite --host",

From 5db4d97568896159369cb967a6ec75f5c6bc2212 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 25 Aug 2023 22:05:57 +0800
Subject: [PATCH 09/25] need fix

---
 src/components/FileBrowser.vue                | 213 ++++++++++++++++
 src/components/filebrowser/Confirm.vue        |  78 ++++++
 src/components/filebrowser/List.vue           | 227 ++++++++++++++++++
 src/components/filebrowser/Toolbar.vue        | 194 +++++++++++++++
 src/components/filebrowser/Tree.vue           | 196 +++++++++++++++
 src/components/filebrowser/Upload.vue         | 218 +++++++++++++++++
 src/components/filebrowser/util.js            |  16 ++
 .../DefaultLayoutWithVerticalNav.vue          |   7 +
 src/pages/filemanager.vue                     |   9 +
 src/router/index.ts                           |   7 +
 10 files changed, 1165 insertions(+)
 create mode 100644 src/components/FileBrowser.vue
 create mode 100644 src/components/filebrowser/Confirm.vue
 create mode 100644 src/components/filebrowser/List.vue
 create mode 100644 src/components/filebrowser/Toolbar.vue
 create mode 100644 src/components/filebrowser/Tree.vue
 create mode 100644 src/components/filebrowser/Upload.vue
 create mode 100644 src/components/filebrowser/util.js
 create mode 100644 src/pages/filemanager.vue

diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
new file mode 100644
index 00000000..cefb5f92
--- /dev/null
+++ b/src/components/FileBrowser.vue
@@ -0,0 +1,213 @@
+<script>
+import axios from 'axios'
+
+import Toolbar from './filebrowser/Toolbar.vue'
+import Tree from './filebrowser/Tree.vue'
+import List from './filebrowser/List.vue'
+import Upload from './filebrowser/Upload.vue'
+
+const availableStorages = [
+  {
+    name: 'Local',
+    code: 'local',
+    icon: 'mdi-folder-multiple-outline',
+  },
+]
+
+const endpoints = {
+  list: { url: '/storage/{storage}/list?path={path}', method: 'get' },
+  upload: { url: '/storage/{storage}/upload?path={path}', method: 'post' },
+  mkdir: { url: '/storage/{storage}/mkdir?path={path}', method: 'post' },
+  delete: { url: '/storage/{storage}/delete?path={path}', method: 'post' },
+}
+
+const fileIcons = {
+  zip: 'mdi-folder-zip-outline',
+  rar: 'mdi-folder-zip-outline',
+  htm: 'mdi-language-html5',
+  html: 'mdi-language-html5',
+  js: 'mdi-nodejs',
+  json: 'mdi-json',
+  md: 'mdi-markdown',
+  pdf: 'mdi-file-pdf',
+  png: 'mdi-file-image',
+  jpg: 'mdi-file-image',
+  jpeg: 'mdi-file-image',
+  mp4: 'mdi-filmstrip',
+  mkv: 'mdi-filmstrip',
+  avi: 'mdi-filmstrip',
+  wmv: 'mdi-filmstrip',
+  mov: 'mdi-filmstrip',
+  txt: 'mdi-file-document-outline',
+  xls: 'mdi-file-excel',
+  other: 'mdi-file-outline',
+}
+
+export default {
+  components: {
+    Toolbar,
+    Tree,
+    List,
+    Upload,
+  },
+  model: {
+    prop: 'path',
+    event: 'change',
+  },
+  props: {
+    // comma-separated list of active storage codes
+    storages: {
+      type: String,
+      default: () => availableStorages.map(item => item.code).join(','),
+    },
+    // code of default storage
+    storage: { type: String, default: 'local' },
+    // show tree view
+    tree: { type: Boolean, default: true },
+    // file icons set
+    icons: { type: Object, default: () => fileIcons },
+    // custom backend endpoints
+    endpoints: { type: Object, default: () => endpoints },
+    // custom axios instance
+    axios: { type: Function },
+    // custom configuration for internal axios instance
+    axiosConfig: { type: Object, default: () => {} },
+    // max files count to upload at once. Unlimited by default
+    maxUploadFilesCount: { type: Number, default: 0 },
+    // max file size to upload. Unlimited by default
+    maxUploadFileSize: { type: Number, default: 0 },
+  },
+  data() {
+    return {
+      loading: 0,
+      path: '',
+      activeStorage: null,
+      uploadingFiles: false, // or an Array of files
+      refreshPending: false,
+      axiosInstance: null,
+    }
+  },
+  computed: {
+    storagesArray() {
+      const storageCodes = this.storages.split(',')
+      const result = []
+      storageCodes.forEach((code) => {
+        result.push(availableStorages.find(item => item.code == code))
+      })
+      return result
+    },
+  },
+  created() {
+    this.activeStorage = this.storage
+    this.axiosInstance = this.axios || axios.create(this.axiosConfig)
+  },
+  mounted() {
+    if (!this.path && !(this.tree && this.$vuetify.breakpoint.smAndUp))
+      this.pathChanged('/')
+  },
+  methods: {
+    loadingChanged(loading) {
+      if (loading)
+        this.loading++
+      else if (this.loading > 0)
+        this.loading--
+    },
+    storageChanged(storage) {
+      this.activeStorage = storage
+    },
+    addUploadingFiles(files) {
+      files = Array.from(files)
+
+      if (this.maxUploadFileSize) {
+        files = files.filter(
+          file => file.size <= this.maxUploadFileSize,
+        )
+      }
+
+      if (this.uploadingFiles === false)
+        this.uploadingFiles = []
+
+      if (this.maxUploadFilesCount && this.uploadingFiles.length + files.length > this.maxUploadFilesCount)
+        files = files.slice(0, this.maxUploadFilesCount - this.uploadingFiles.length)
+
+      this.uploadingFiles.push(...files)
+    },
+    removeUploadingFile(index) {
+      this.uploadingFiles.splice(index, 1)
+    },
+    uploaded() {
+      this.uploadingFiles = false
+      this.refreshPending = true
+    },
+    pathChanged(path) {
+      this.path = path
+      this.$emit('change', path)
+    },
+  },
+}
+</script>
+
+<template>
+  <v-card class="mx-auto" :loading="loading > 0">
+    <Toolbar
+      :path="path"
+      :storages="storagesArray"
+      :storage="activeStorage"
+      :endpoints="endpoints"
+      :axios="axiosInstance"
+      @storage-changed="storageChanged"
+      @path-changed="pathChanged"
+      @add-files="addUploadingFiles"
+      @folder-created="refreshPending = true"
+    />
+    <v-row no-gutters>
+      <v-col v-if="tree && $vuetify.breakpoint.smAndUp" sm="auto">
+        <Tree
+          :path="path"
+          :storage="activeStorage"
+          :icons="icons"
+          :endpoints="endpoints"
+          :axios="axiosInstance"
+          :refresh-pending="refreshPending"
+          @path-changed="pathChanged"
+          @loading="loadingChanged"
+          @refreshed="refreshPending = false"
+        />
+      </v-col>
+      <v-divider v-if="tree" vertical />
+      <v-col>
+        <List
+          :path="path"
+          :storage="activeStorage"
+          :icons="icons"
+          :endpoints="endpoints"
+          :axios="axiosInstance"
+          :refresh-pending="refreshPending"
+          @path-changed="pathChanged"
+          @loading="loadingChanged"
+          @refreshed="refreshPending = false"
+          @file-deleted="refreshPending = true"
+        />
+      </v-col>
+    </v-row>
+    <Upload
+      v-if="uploadingFiles !== false"
+      :path="path"
+      :storage="activeStorage"
+      :files="uploadingFiles"
+      :icons="icons"
+      :axios="axiosInstance"
+      :endpoint="endpoints.upload"
+      :max-upload-files-count="maxUploadFilesCount"
+      :max-upload-file-size="maxUploadFileSize"
+      @add-files="addUploadingFiles"
+      @remove-file="removeUploadingFile"
+      @clear-files="uploadingFiles = []"
+      @cancel="uploadingFiles = false"
+      @uploaded="uploaded"
+    />
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/filebrowser/Confirm.vue b/src/components/filebrowser/Confirm.vue
new file mode 100644
index 00000000..f7f1f580
--- /dev/null
+++ b/src/components/filebrowser/Confirm.vue
@@ -0,0 +1,78 @@
+<script>
+/**
+ * Vuetify Confirm Dialog component
+ * https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d
+ *
+ * Insert component where you want to use it:
+ * <confirm ref="confirm"></confirm>
+ *
+ * Call it:
+ * this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
+ * Or use await:
+ * if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
+ *   // yes
+ * }
+ * else {
+ *   // cancel
+ * }
+ */
+export default {
+  data: () => ({
+    dialog: false,
+    resolve: null,
+    reject: null,
+    message: null,
+    title: null,
+    options: {
+      color: 'error',
+      width: 300,
+    },
+  }),
+  methods: {
+    open(title, message, options) {
+      this.dialog = true
+      this.title = title
+      this.message = message
+      this.options = Object.assign(this.options, options)
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    agree() {
+      this.resolve(true)
+      this.dialog = false
+    },
+    cancel() {
+      this.resolve(false)
+      this.dialog = false
+    },
+  },
+}
+</script>
+
+<template>
+  <v-dialog
+    v-model="dialog"
+    :max-width="options.width"
+    @keydown.esc="cancel"
+  >
+    <v-card>
+      <v-toolbar dark :color="options.color" dense flat>
+        <v-toolbar-title class="white--text">
+          {{ title }}
+        </v-toolbar-title>
+      </v-toolbar>
+      <v-card-text v-if="message" class="pa-4 text-center" v-html="message" />
+      <v-card-actions class="pt-0">
+        <v-spacer />
+        <v-btn text @click="cancel">
+          Cancel
+        </v-btn>
+        <v-btn depressed :color="options.color" @click="agree">
+          Yes
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
new file mode 100644
index 00000000..c350a527
--- /dev/null
+++ b/src/components/filebrowser/List.vue
@@ -0,0 +1,227 @@
+<script>
+import { formatBytes } from './util'
+import Confirm from './Confirm.vue'
+
+export default {
+  components: {
+    Confirm,
+  },
+  props: {
+    icons: Object,
+    storage: String,
+    path: String,
+    endpoints: Object,
+    axios: Function,
+    refreshPending: Boolean,
+  },
+  data() {
+    return {
+      items: [],
+      filter: '',
+    }
+  },
+  computed: {
+    dirs() {
+      return this.items.filter(
+        item =>
+          item.type === 'dir' && item.basename.includes(this.filter),
+      )
+    },
+    files() {
+      return this.items.filter(
+        item =>
+          item.type === 'file' && item.basename.includes(this.filter),
+      )
+    },
+    isDir() {
+      return this.path[this.path.length - 1] === '/'
+    },
+    isFile() {
+      return !this.isDir
+    },
+  },
+  watch: {
+    async path() {
+      this.items = []
+      await this.load()
+    },
+    async refreshPending() {
+      if (this.refreshPending) {
+        await this.load()
+        this.$emit('refreshed')
+      }
+    },
+  },
+  methods: {
+    formatBytes,
+    changePath(path) {
+      this.$emit('path-changed', path)
+    },
+    async load() {
+      this.$emit('loading', true)
+      if (this.isDir) {
+        const url = this.endpoints.list.url
+          .replace(new RegExp('{storage}', 'g'), this.storage)
+          .replace(new RegExp('{path}', 'g'), this.path)
+
+        const config = {
+          url,
+          method: this.endpoints.list.method || 'get',
+        }
+
+        const response = await this.axios.request(config)
+        this.items = response.data
+      }
+      else {
+        // TODO: load file
+      }
+      this.$emit('loading', false)
+    },
+    async deleteItem(item) {
+      const confirmed = await this.$refs.confirm.open(
+        'Delete',
+                `Are you sure<br>you want to delete this ${
+                    item.type === 'dir' ? 'folder' : 'file'
+                }?<br><em>${item.basename}</em>`,
+      )
+
+      if (confirmed) {
+        this.$emit('loading', true)
+        const url = this.endpoints.delete.url
+          .replace(new RegExp('{storage}', 'g'), this.storage)
+          .replace(new RegExp('{path}', 'g'), item.path)
+
+        const config = {
+          url,
+          method: this.endpoints.delete.method || 'post',
+        }
+
+        await this.axios.request(config)
+        this.$emit('file-deleted')
+        this.$emit('loading', false)
+      }
+    },
+  },
+}
+</script>
+
+<template>
+  <v-card flat tile min-height="380" class="d-flex flex-column">
+    <Confirm ref="confirm" />
+    <v-card-text
+      v-if="!path"
+      class="grow d-flex justify-center align-center grey--text"
+    >
+      Select a folder or a file
+    </v-card-text>
+    <v-card-text
+      v-else-if="isFile"
+      class="grow d-flex justify-center align-center"
+    >
+      File: {{ path }}
+    </v-card-text>
+    <v-card-text v-else-if="dirs.length || files.length" class="grow">
+      <v-list v-if="dirs.length" subheader>
+        <v-subheader>Folders</v-subheader>
+        <v-list-item
+          v-for="item in dirs"
+          :key="item.basename"
+          class="pl-0"
+          @click="changePath(item.path)"
+        >
+          <v-list-item-avatar class="ma-0">
+            <v-icon>mdi-folder-outline</v-icon>
+          </v-list-item-avatar>
+          <v-list-item-content class="py-2">
+            <v-list-item-title v-text="item.basename" />
+          </v-list-item-content>
+          <v-list-item-action>
+            <v-btn icon @click.stop="deleteItem(item)">
+              <v-icon color="grey lighten-1">
+                mdi-delete-outline
+              </v-icon>
+            </v-btn>
+            <v-btn v-if="false" icon>
+              <v-icon color="grey lighten-1">
+                mdi-information
+              </v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+      <v-divider v-if="dirs.length && files.length" />
+      <v-list v-if="files.length" subheader>
+        <v-subheader>Files</v-subheader>
+        <v-list-item
+          v-for="item in files"
+          :key="item.basename"
+          class="pl-0"
+          @click="changePath(item.path)"
+        >
+          <v-list-item-avatar class="ma-0">
+            <v-icon>{{ icons[item.extension.toLowerCase()] || icons.other }}</v-icon>
+          </v-list-item-avatar>
+
+          <v-list-item-content class="py-2">
+            <v-list-item-title v-text="item.basename" />
+            <v-list-item-subtitle>{{ formatBytes(item.size) }}</v-list-item-subtitle>
+          </v-list-item-content>
+
+          <v-list-item-action>
+            <v-btn icon @click.stop="deleteItem(item)">
+              <v-icon color="grey lighten-1">
+                mdi-delete-outline
+              </v-icon>
+            </v-btn>
+            <v-btn v-if="false" icon>
+              <v-icon color="grey lighten-1">
+                mdi-information
+              </v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+    <v-card-text
+      v-else-if="filter"
+      class="grow d-flex justify-center align-center grey--text py-5"
+    >
+      No files or folders found
+    </v-card-text>
+    <v-card-text
+      v-else
+      class="grow d-flex justify-center align-center grey--text py-5"
+    >
+      The folder is empty
+    </v-card-text>
+    <v-divider v-if="path" />
+    <v-toolbar v-if="false && path && isFile" dense flat class="shrink">
+      <v-btn icon>
+        <v-icon>mdi-download</v-icon>
+      </v-btn>
+    </v-toolbar>
+    <v-toolbar v-if="path && isDir" dense flat class="shrink">
+      <v-text-field
+        v-model="filter"
+        solo
+        flat
+        hide-details
+        label="Filter"
+        prepend-inner-icon="mdi-filter-outline"
+        class="ml-n3"
+      />
+      <v-btn v-if="false" icon>
+        <v-icon>mdi-eye-settings-outline</v-icon>
+      </v-btn>
+      <v-btn icon @click="load">
+        <v-icon>mdi-refresh</v-icon>
+      </v-btn>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+.v-card {
+    height: 100%;
+}
+</style>
diff --git a/src/components/filebrowser/Toolbar.vue b/src/components/filebrowser/Toolbar.vue
new file mode 100644
index 00000000..2a7c3d08
--- /dev/null
+++ b/src/components/filebrowser/Toolbar.vue
@@ -0,0 +1,194 @@
+<script>
+export default {
+  props: {
+    storages: Array,
+    storage: String,
+    path: String,
+    endpoints: Object,
+    axios: Function,
+  },
+  data() {
+    return {
+      newFolderPopper: false,
+      newFolderName: '',
+    }
+  },
+  computed: {
+    pathSegments() {
+      let path = '/'
+      const isFolder = this.path[this.path.length - 1] === '/'
+      let segments = this.path.split('/').filter(item => item)
+
+      segments = segments.map((item, index) => {
+        path
+                    += item + (index < segments.length - 1 || isFolder ? '/' : '')
+        return {
+          name: item,
+          path,
+        }
+      })
+
+      return segments
+    },
+    storageObject() {
+      return this.storages.find(item => item.code == this.storage)
+    },
+  },
+  methods: {
+    changeStorage(code) {
+      if (this.storage != code) {
+        this.$emit('storage-changed', code)
+        this.$emit('path-changed', '')
+      }
+    },
+    changePath(path) {
+      this.$emit('path-changed', path)
+    },
+    goUp() {
+      const segments = this.pathSegments
+      const path
+                    = segments.length === 1
+                      ? '/'
+                      : segments[segments.length - 2].path
+      this.changePath(path)
+    },
+    async addFiles(event) {
+      this.$emit('add-files', event.target.files)
+      this.$refs.inputUpload.value = ''
+    },
+    async mkdir() {
+      this.$emit('loading', true)
+      const url = this.endpoints.mkdir.url
+        .replace(new RegExp('{storage}', 'g'), this.storage)
+        .replace(new RegExp('{path}', 'g'), this.path + this.newFolderName)
+
+      const config = {
+        url,
+        method: this.endpoints.mkdir.method || 'post',
+      }
+
+      await this.axios.request(config)
+      this.$emit('folder-created', this.newFolderName)
+      this.newFolderPopper = false
+      this.newFolderName = ''
+      this.$emit('loading', false)
+    },
+  },
+}
+</script>
+
+<template>
+  <v-toolbar flat dense color="blue-grey lighten-5">
+    <v-toolbar-items>
+      <v-menu v-if="storages.length > 1" offset-y>
+        <template #activator="{ on }">
+          <v-btn icon class="storage-select-button mr-3" v-on="on">
+            <v-icon>mdi-arrow-down-drop-circle-outline</v-icon>
+          </v-btn>
+        </template>
+        <v-list class="storage-select-list">
+          <v-list-item
+            v-for="(item, index) in storages"
+            :key="index"
+            :disabled="item.code === storageObject.code"
+            @click="changeStorage(item.code)"
+          >
+            <v-list-item-icon>
+              <v-icon v-text="item.icon" />
+            </v-list-item-icon>
+            <v-list-item-title>{{ item.name }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-btn text :input-value="path === '/'" @click="changePath('/')">
+        <v-icon class="mr-2">
+          {{ storageObject.icon }}
+        </v-icon>
+        {{ storageObject.name }}
+      </v-btn>
+      <template v-for="(segment, index) in pathSegments" :key="index">
+        <v-icon>
+          mdi-chevron-right
+        </v-icon>
+        <v-btn
+          text
+          :input-value="index === pathSegments.length - 1"
+          @click="changePath(segment.path)"
+        >
+          {{ segment.name }}
+        </v-btn>
+      </template>
+    </v-toolbar-items>
+    <div class="flex-grow-1" />
+
+    <template v-if="$vuetify.breakpoint.smAndUp">
+      <v-tooltip v-if="pathSegments.length > 0" bottom>
+        <template #activator="{ on }">
+          <v-btn icon @click="goUp" v-on="on">
+            <v-icon>mdi-arrow-up-bold-outline</v-icon>
+          </v-btn>
+        </template>
+        <span v-if="pathSegments.length === 1">Up to "root"</span>
+        <span v-else>Up to "{{ pathSegments[pathSegments.length - 2].name }}"</span>
+      </v-tooltip>
+      <v-menu
+        v-model="newFolderPopper"
+        :close-on-content-click="false"
+        :nudge-width="200"
+        offset-y
+      >
+        <template #activator="{ on }">
+          <v-btn v-if="path" icon title="Create Folder" v-on="on">
+            <v-icon>mdi-folder-plus-outline</v-icon>
+          </v-btn>
+        </template>
+        <v-card>
+          <v-card-text>
+            <v-text-field v-model="newFolderName" label="Name" hide-details />
+          </v-card-text>
+          <v-card-actions>
+            <div class="flex-grow-1" />
+            <v-btn depressed @click="newFolderPopper = false">
+              Cancel
+            </v-btn>
+            <v-btn
+              color="success"
+              :disabled="!newFolderName"
+              depressed
+              @click="mkdir"
+            >
+              Create Folder
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-menu>
+      <v-btn v-if="path" icon title="Upload Files" @click="$refs.inputUpload.click()">
+        <v-icon>mdi-plus-circle</v-icon>
+        <input v-show="false" ref="inputUpload" type="file" multiple @change="addFiles">
+      </v-btn>
+    </template>
+  </v-toolbar>
+</template>
+
+<style lang="scss" scoped>
+/* Storage Menu - alternate appearance
+.storage-select-button ::v-deep .v-btn__content {
+    flex-wrap: wrap;
+    font-size: 11px;
+
+    .v-icon {
+        width: 100%;
+        font-size: 22px;
+    }
+}
+*/
+
+.storage-select-list .v-list-item--disabled {
+    background-color: rgba(0, 0, 0, 0.25);
+    color: #fff;
+
+    .v-icon {
+        color: #fff;
+    }
+}
+</style>
diff --git a/src/components/filebrowser/Tree.vue b/src/components/filebrowser/Tree.vue
new file mode 100644
index 00000000..5edf81a4
--- /dev/null
+++ b/src/components/filebrowser/Tree.vue
@@ -0,0 +1,196 @@
+<script>
+export default {
+  props: {
+    icons: Object,
+    storage: String,
+    path: String,
+    endpoints: Object,
+    axios: Function,
+    refreshPending: Boolean,
+  },
+  data() {
+    return {
+      open: [],
+      active: [],
+      items: [],
+      filter: '',
+    }
+  },
+  watch: {
+    storage() {
+      this.init()
+    },
+    path() {
+      this.active = [this.path]
+      if (!this.open.includes(this.path))
+        this.open.push(this.path)
+    },
+    async refreshPending() {
+      if (this.refreshPending) {
+        const item = this.findItem(this.path)
+        await this.readFolder(item)
+        this.$emit('refreshed')
+      }
+    },
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.open = []
+      this.items = []
+      // set default files tree items (root item) in nextTick.
+      // Otherwise this.open isn't cleared properly (due to syncing perhaps)
+      setTimeout(() => {
+        this.items = [
+          {
+            type: 'dir',
+            path: '/',
+            basename: 'root',
+            extension: '',
+            name: 'root',
+            children: [],
+          },
+        ]
+      }, 0)
+      if (this.path !== '')
+        this.$emit('path-changed', '')
+    },
+    async readFolder(item) {
+      this.$emit('loading', true)
+      const url = this.endpoints.list.url
+        .replace(new RegExp('{storage}', 'g'), this.storage)
+        .replace(new RegExp('{path}', 'g'), item.path)
+
+      const config = {
+        url,
+        method: this.endpoints.list.method || 'get',
+      }
+
+      const response = await this.axios.request(config)
+
+      item.children = response.data.map((item) => {
+        if (item.type === 'dir')
+          item.children = []
+
+        return item
+      })
+
+      this.$emit('loading', false)
+    },
+    activeChanged(active) {
+      this.active = active
+      let path = ''
+      if (active.length)
+        path = active[0]
+
+      if (this.path != path)
+        this.$emit('path-changed', path)
+    },
+    findItem(path) {
+      const stack = []
+      stack.push(this.items[0])
+      while (stack.length > 0) {
+        const node = stack.pop()
+        if (node.path == path) {
+          return node
+        }
+        else if (node.children && node.children.length) {
+          for (let i = 0; i < node.children.length; i++)
+            stack.push(node.children[i])
+        }
+      }
+      return null
+    },
+  },
+}
+</script>
+
+<template>
+  <v-card flat tile width="250" min-height="380" class="d-flex flex-column folders-tree-card">
+    <div class="grow scroll-x">
+      <v-treeview
+        :open="open"
+        :active="active"
+        :items="items"
+        :search="filter"
+        :load-children="readFolder"
+        item-key="path"
+        item-text="basename"
+        dense
+        activatable
+        transition
+        class="folders-tree"
+        @update:active="activeChanged"
+      >
+        <template #prepend="{ item, open }">
+          <v-icon
+            v-if="item.type === 'dir'"
+          >
+            {{ open ? 'mdi-folder-open-outline' : 'mdi-folder-outline' }}
+          </v-icon>
+          <v-icon v-else>
+            {{ icons[item.extension.toLowerCase()] || icons.other }}
+          </v-icon>
+        </template>
+        <template #label="{ item }">
+          {{ item.basename }}
+          <v-btn
+            v-if="item.type === 'dir'"
+            icon
+            class="ml-1"
+            @click.stop="readFolder(item)"
+          >
+            <v-icon class="pa-0 mdi-18px" color="grey lighten-1">
+              mdi-refresh
+            </v-icon>
+          </v-btn>
+        </template>
+      </v-treeview>
+    </div>
+    <v-divider />
+    <v-toolbar dense flat class="shrink">
+      <v-text-field
+        v-model="filter"
+        solo
+        flat
+        hide-details
+        label="Filter"
+        prepend-inner-icon="mdi-filter-outline"
+        class="ml-n3"
+      />
+      <v-tooltip top>
+        <template #activator="{ on }">
+          <v-btn icon @click="init" v-on="on">
+            <v-icon>mdi-collapse-all-outline</v-icon>
+          </v-btn>
+        </template>
+        <span>Collapse All</span>
+      </v-tooltip>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+.folders-tree-card {
+    height: 100%;
+
+    .scroll-x {
+        overflow-x: auto;
+    }
+
+    ::v-deep .folders-tree {
+        width: fit-content;
+        min-width: 250px;
+
+        .v-treeview-node {
+            cursor: pointer;
+
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.02);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/components/filebrowser/Upload.vue b/src/components/filebrowser/Upload.vue
new file mode 100644
index 00000000..5e59c9a0
--- /dev/null
+++ b/src/components/filebrowser/Upload.vue
@@ -0,0 +1,218 @@
+<script>
+import { formatBytes } from './util'
+
+const imageMimeTypes = ['image/png', 'image/jpeg']
+
+export default {
+  props: {
+    path: String,
+    storage: String,
+    endpoint: Object,
+    files: { type: Array, default: () => [] },
+    icons: Object,
+    axios: Function,
+    maxUploadFilesCount: { type: Number, default: 0 },
+    maxUploadFileSize: { type: Number, default: 0 },
+  },
+  data() {
+    return {
+      loading: false,
+      uploading: false,
+      progress: 0,
+      listItems: [],
+    }
+  },
+  watch: {
+    files: {
+      deep: true,
+      immediate: true,
+      async handler() {
+        this.loading = true
+        this.listItems = await this.filesMap(this.files)
+        this.loading = false
+      },
+    },
+  },
+  methods: {
+    formatBytes,
+
+    async filesMap(files) {
+      const promises = Array.from(files).map((file) => {
+        const result = {
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          extension: file.name.split('.').pop(),
+        }
+        return new Promise((resolve) => {
+          if (!imageMimeTypes.includes(result.type))
+            return resolve(result)
+
+          const reader = new FileReader()
+          reader.onload = function (e) {
+            result.preview = e.target.result
+            resolve(result)
+          }
+          reader.readAsDataURL(file)
+        })
+      })
+
+      return await Promise.all(promises)
+    },
+
+    async add(event) {
+      const files = Array.from(event.target.files)
+      this.$emit('add-files', files)
+      this.$refs.inputUpload.value = ''
+    },
+
+    remove(index) {
+      this.$emit('remove-file', index)
+      this.listItems.splice(index, 1)
+    },
+
+    clear() {
+      this.$emit('clear-files')
+      this.listItems = []
+    },
+
+    cancel() {
+      this.$emit('cancel')
+    },
+
+    async upload() {
+      const formData = new FormData()
+
+      // files
+      for (const file of this.files)
+        formData.append('files', file, file.name)
+
+      const url = this.endpoint.url
+        .replace(new RegExp('{storage}', 'g'), this.storage)
+        .replace(new RegExp('{path}', 'g'), this.path)
+
+      const config = {
+        url,
+        method: this.endpoint.method || 'post',
+        data: formData,
+        onUploadProgress: (progressEvent) => {
+          this.progress
+                        = (progressEvent.loaded / progressEvent.total) * 100
+        },
+      }
+
+      this.uploading = true
+      const response = await this.axios.request(config)
+      this.uploading = false
+      this.$emit('uploaded')
+    },
+  },
+}
+</script>
+
+<template>
+  <v-overlay :absolute="true">
+    <v-card flat light class="mx-auto" :loading="loading">
+      <v-card-text class="py-3 text-center">
+        <div>
+          <span class="grey--text">Upload to:</span>
+          <v-chip color="info" class="mx-1">
+            {{ storage }}
+          </v-chip>
+          <v-chip>{{ path }}</v-chip>
+        </div>
+        <div v-if="maxUploadFilesCount">
+          <span class="grey--text">Max files count: {{ maxUploadFilesCount }}</span>
+        </div>
+        <div v-if="maxUploadFileSize">
+          <span class="grey--text">Max file size: {{ formatBytes(maxUploadFileSize) }}</span>
+        </div>
+      </v-card-text>
+      <v-divider />
+      <v-card-text v-if="listItems.length" class="pa-0 files-list-wrapper">
+        <v-list v-if="listItems.length" two-line>
+          <v-list-item v-for="(file, index) in listItems" :key="index" link>
+            <v-list-item-avatar>
+              <v-img v-if="file.preview" :src="file.preview" />
+              <v-icon
+                v-else
+                class="mdi-36px"
+                color="grey lighten-1"
+                v-text="icons[file.extension] || 'mdi-file'"
+              />
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title v-text="file.name" />
+              <v-list-item-subtitle>{{ formatBytes(file.size) }} - {{ file.type }}</v-list-item-subtitle>
+            </v-list-item-content>
+            <v-list-item-action>
+              <v-btn icon @click="remove(index)">
+                <v-icon color="grey lighten-1">
+                  mdi-close
+                </v-icon>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-card-text v-else class="py-6 text-center">
+        <v-btn @click="$refs.inputUpload.click()">
+          <v-icon left>
+            mdi-plus-circle
+          </v-icon>Add files
+        </v-btn>
+      </v-card-text>
+      <v-divider />
+      <v-toolbar dense flat>
+        <div class="grow" />
+        <v-btn text class="mx-1" @click="cancel">
+          Cancel
+        </v-btn>
+        <v-btn depressed color="warning" class="mx-1" :disabled="!files" @click="clear">
+          <v-icon>mdi-close</v-icon>Clear
+        </v-btn>
+        <v-btn
+          :disabled="listItems.length >= maxUploadFilesCount"
+          depressed
+          color="info"
+          class="mx-1"
+          @click="$refs.inputUpload.click()"
+        >
+          <v-icon left>
+            mdi-plus-circle
+          </v-icon>Add Files
+          <input
+            v-show="false"
+            ref="inputUpload"
+            type="file"
+            multiple
+            @change="add"
+          >
+        </v-btn>
+        <v-btn depressed color="success" class="ml-1" :disabled="!files" @click="upload">
+          Upload
+          <v-icon right>
+            mdi-upload-outline
+          </v-icon>
+        </v-btn>
+      </v-toolbar>
+      <v-overlay :value="uploading" :absolute="true" color="white" opacity="0.9">
+        <v-progress-linear v-model="progress" height="25" striped rounded reactive>
+          <strong>{{ Math.ceil(progress) }}%</strong>
+        </v-progress-linear>
+      </v-overlay>
+    </v-card>
+  </v-overlay>
+</template>
+
+<style lang="scss" scoped>
+::v-deep .v-overlay__content {
+    width: 90%;
+    max-width: 500px;
+
+    .files-list-wrapper {
+        max-height: 250px;
+        overflow-y: auto;
+    }
+}
+</style>
diff --git a/src/components/filebrowser/util.js b/src/components/filebrowser/util.js
new file mode 100644
index 00000000..f22d4762
--- /dev/null
+++ b/src/components/filebrowser/util.js
@@ -0,0 +1,16 @@
+export function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0)
+    return '0 bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
+}
+
+export default {
+  formatBytes,
+}
diff --git a/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index 6c06fd13..5dba87ee 100644
--- a/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -134,6 +134,13 @@ import UserProfile from '@/layouts/components/UserProfile.vue'
           to: '/history',
         }"
       />
+      <VerticalNavLink
+        :item="{
+          title: '文件管理',
+          icon: 'mdi-folder-multiple-outline',
+          to: '/filemanager',
+        }"
+      />
 
       <!-- 👉 系统 -->
       <VerticalNavSectionTitle
diff --git a/src/pages/filemanager.vue b/src/pages/filemanager.vue
new file mode 100644
index 00000000..5322cbc0
--- /dev/null
+++ b/src/pages/filemanager.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import FileBrowser from '@/components/FileBrowser.vue'
+</script>
+
+<template>
+  <div>
+    <FileBrowser />
+  </div>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 38874774..a4e944f9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -128,6 +128,13 @@ const router = createRouter({
             requiresAuth: true,
           },
         },
+        {
+          path: '/filemanager',
+          component: () => import('../pages/filemanager.vue'),
+          meta: {
+            requiresAuth: true,
+          },
+        },
       ],
     },
     {

From 4681c947c7a500a671ae8d52f55b9130cc8aa419 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 11:00:33 +0800
Subject: [PATCH 10/25] feat FileManager

---
 src/@core/utils/formatters.ts            |  14 +
 src/api/types.ts                         |  18 ++
 src/components/FileBrowser.vue           | 220 +++++--------
 src/components/filebrowser/Confirm.vue   |  78 -----
 src/components/filebrowser/List.vue      | 374 +++++++++++------------
 src/components/filebrowser/Toolbar.vue   | 303 +++++++++---------
 src/components/filebrowser/Tree.vue      | 283 ++++++++---------
 src/components/filebrowser/Upload.vue    | 218 -------------
 src/components/filebrowser/util.js       |  16 -
 src/pages/filemanager.vue                |   6 +-
 src/views/reorganize/FileBrowserView.vue |   9 +
 11 files changed, 588 insertions(+), 951 deletions(-)
 delete mode 100644 src/components/filebrowser/Confirm.vue
 delete mode 100644 src/components/filebrowser/Upload.vue
 delete mode 100644 src/components/filebrowser/util.js
 create mode 100644 src/views/reorganize/FileBrowserView.vue

diff --git a/src/@core/utils/formatters.ts b/src/@core/utils/formatters.ts
index a8de8d7d..c393b32f 100644
--- a/src/@core/utils/formatters.ts
+++ b/src/@core/utils/formatters.ts
@@ -95,3 +95,17 @@ export function parseDate(dateString: string): Date {
 
   return new Date(year, month - 1, day)
 }
+
+// 文件大小格式化
+export function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0)
+    return '0 bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
+}
diff --git a/src/api/types.ts b/src/api/types.ts
index 80bce242..38b90409 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -897,3 +897,21 @@ export interface Rss {
   // 状态 0-停用，1-启用
   state?: number
 }
+
+// 文件浏览接口
+export interface EndPoints {
+  list: any
+  mkdir: any
+  delete: any
+}
+
+// 文件浏览项目
+export interface FileItem {
+  type: string
+  name: string
+  basename: string
+  path: string
+  extension: string
+  size: number
+  children: []
+}
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index cefb5f92..75a1bf94 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -1,24 +1,39 @@
-<script>
+<script lang="ts" setup>
+import type { Axios } from 'axios'
 import axios from 'axios'
 
 import Toolbar from './filebrowser/Toolbar.vue'
 import Tree from './filebrowser/Tree.vue'
 import List from './filebrowser/List.vue'
-import Upload from './filebrowser/Upload.vue'
+
+// 输入参数
+const props = defineProps({
+  storages: String,
+  storage: String,
+  path: String,
+  tree: String,
+  endpoints: Object,
+  axios: Object as PropType<Axios>,
+  axiosConfig: Object,
+  maxUploadFilesCount: Number,
+  maxUploadFileSize: Number,
+})
+
+// 事件
+const emit = defineEmits(['change'])
 
 const availableStorages = [
   {
-    name: 'Local',
+    name: '本地',
     code: 'local',
     icon: 'mdi-folder-multiple-outline',
   },
 ]
 
 const endpoints = {
-  list: { url: '/storage/{storage}/list?path={path}', method: 'get' },
-  upload: { url: '/storage/{storage}/upload?path={path}', method: 'post' },
-  mkdir: { url: '/storage/{storage}/mkdir?path={path}', method: 'post' },
-  delete: { url: '/storage/{storage}/delete?path={path}', method: 'post' },
+  list: { url: '/filebrowser/list?path={path}', method: 'get' },
+  mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'post' },
+  delete: { url: '/filebrowser/delete?path={path}', method: 'post' },
 }
 
 const fileIcons = {
@@ -43,171 +58,90 @@ const fileIcons = {
   other: 'mdi-file-outline',
 }
 
-export default {
-  components: {
-    Toolbar,
-    Tree,
-    List,
-    Upload,
-  },
-  model: {
-    prop: 'path',
-    event: 'change',
-  },
-  props: {
-    // comma-separated list of active storage codes
-    storages: {
-      type: String,
-      default: () => availableStorages.map(item => item.code).join(','),
-    },
-    // code of default storage
-    storage: { type: String, default: 'local' },
-    // show tree view
-    tree: { type: Boolean, default: true },
-    // file icons set
-    icons: { type: Object, default: () => fileIcons },
-    // custom backend endpoints
-    endpoints: { type: Object, default: () => endpoints },
-    // custom axios instance
-    axios: { type: Function },
-    // custom configuration for internal axios instance
-    axiosConfig: { type: Object, default: () => {} },
-    // max files count to upload at once. Unlimited by default
-    maxUploadFilesCount: { type: Number, default: 0 },
-    // max file size to upload. Unlimited by default
-    maxUploadFileSize: { type: Number, default: 0 },
-  },
-  data() {
-    return {
-      loading: 0,
-      path: '',
-      activeStorage: null,
-      uploadingFiles: false, // or an Array of files
-      refreshPending: false,
-      axiosInstance: null,
-    }
-  },
-  computed: {
-    storagesArray() {
-      const storageCodes = this.storages.split(',')
-      const result = []
-      storageCodes.forEach((code) => {
-        result.push(availableStorages.find(item => item.code == code))
-      })
-      return result
-    },
-  },
-  created() {
-    this.activeStorage = this.storage
-    this.axiosInstance = this.axios || axios.create(this.axiosConfig)
-  },
-  mounted() {
-    if (!this.path && !(this.tree && this.$vuetify.breakpoint.smAndUp))
-      this.pathChanged('/')
-  },
-  methods: {
-    loadingChanged(loading) {
-      if (loading)
-        this.loading++
-      else if (this.loading > 0)
-        this.loading--
-    },
-    storageChanged(storage) {
-      this.activeStorage = storage
-    },
-    addUploadingFiles(files) {
-      files = Array.from(files)
+// 加载次数
+const loading = ref(0)
+// 当前路径
+const path = ref(props.path)
+// 当前存储
+const activeStorage = ref('local')
+// 刷新
+const refreshPending = ref(false)
+// axios实例
+const axiosInstance = ref<Axios>()
 
-      if (this.maxUploadFileSize) {
-        files = files.filter(
-          file => file.size <= this.maxUploadFileSize,
-        )
-      }
+// 计算属性
+const storagesArray = computed(() => {
+  const storageCodes = props.storages?.split(',')
+  return availableStorages.filter(item => storageCodes?.includes(item.code))
+})
 
-      if (this.uploadingFiles === false)
-        this.uploadingFiles = []
-
-      if (this.maxUploadFilesCount && this.uploadingFiles.length + files.length > this.maxUploadFilesCount)
-        files = files.slice(0, this.maxUploadFilesCount - this.uploadingFiles.length)
-
-      this.uploadingFiles.push(...files)
-    },
-    removeUploadingFile(index) {
-      this.uploadingFiles.splice(index, 1)
-    },
-    uploaded() {
-      this.uploadingFiles = false
-      this.refreshPending = true
-    },
-    pathChanged(path) {
-      this.path = path
-      this.$emit('change', path)
-    },
-  },
+// 方法
+function loadingChanged(loading: number) {
+  if (loading)
+    loading++
+  else if (loading > 0)
+    loading--
 }
+
+function storageChanged(storage: string) {
+  activeStorage.value = storage
+}
+
+function pathChanged(_path: string) {
+  path.value = _path
+  emit('change', path)
+}
+
+// 初始化
+onMounted(() => {
+  activeStorage.value = props.storage ?? 'local'
+  axiosInstance.value = props.axios ?? axios.create(props.axiosConfig)
+  if (!path.value)
+    pathChanged('/')
+})
 </script>
 
 <template>
-  <v-card class="mx-auto" :loading="loading > 0">
+  <VCard class="mx-auto" :loading="loading > 0">
     <Toolbar
       :path="path"
       :storages="storagesArray"
       :storage="activeStorage"
       :endpoints="endpoints"
       :axios="axiosInstance"
-      @storage-changed="storageChanged"
-      @path-changed="pathChanged"
-      @add-files="addUploadingFiles"
-      @folder-created="refreshPending = true"
+      @storagechanged="storageChanged"
+      @pathchanged="pathChanged"
+      @foldercreated="refreshPending = true"
     />
-    <v-row no-gutters>
-      <v-col v-if="tree && $vuetify.breakpoint.smAndUp" sm="auto">
+    <VRow no-gutters>
+      <VCol v-if="tree" sm="auto" class="d-none d-md-block">
         <Tree
           :path="path"
           :storage="activeStorage"
-          :icons="icons"
+          :icons="fileIcons"
           :endpoints="endpoints"
           :axios="axiosInstance"
-          :refresh-pending="refreshPending"
-          @path-changed="pathChanged"
+          :refreshpending="refreshPending"
+          @pathchanged="pathChanged"
           @loading="loadingChanged"
           @refreshed="refreshPending = false"
         />
-      </v-col>
-      <v-divider v-if="tree" vertical />
-      <v-col>
+      </VCol>
+      <VDivider v-if="tree" vertical />
+      <VCol>
         <List
           :path="path"
           :storage="activeStorage"
-          :icons="icons"
+          :icons="fileIcons"
           :endpoints="endpoints"
           :axios="axiosInstance"
-          :refresh-pending="refreshPending"
+          :refreshpending="refreshPending"
           @path-changed="pathChanged"
           @loading="loadingChanged"
           @refreshed="refreshPending = false"
           @file-deleted="refreshPending = true"
         />
-      </v-col>
-    </v-row>
-    <Upload
-      v-if="uploadingFiles !== false"
-      :path="path"
-      :storage="activeStorage"
-      :files="uploadingFiles"
-      :icons="icons"
-      :axios="axiosInstance"
-      :endpoint="endpoints.upload"
-      :max-upload-files-count="maxUploadFilesCount"
-      :max-upload-file-size="maxUploadFileSize"
-      @add-files="addUploadingFiles"
-      @remove-file="removeUploadingFile"
-      @clear-files="uploadingFiles = []"
-      @cancel="uploadingFiles = false"
-      @uploaded="uploaded"
-    />
-  </v-card>
+      </VCol>
+    </VRow>
+  </VCard>
 </template>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/components/filebrowser/Confirm.vue b/src/components/filebrowser/Confirm.vue
deleted file mode 100644
index f7f1f580..00000000
--- a/src/components/filebrowser/Confirm.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script>
-/**
- * Vuetify Confirm Dialog component
- * https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d
- *
- * Insert component where you want to use it:
- * <confirm ref="confirm"></confirm>
- *
- * Call it:
- * this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
- * Or use await:
- * if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
- *   // yes
- * }
- * else {
- *   // cancel
- * }
- */
-export default {
-  data: () => ({
-    dialog: false,
-    resolve: null,
-    reject: null,
-    message: null,
-    title: null,
-    options: {
-      color: 'error',
-      width: 300,
-    },
-  }),
-  methods: {
-    open(title, message, options) {
-      this.dialog = true
-      this.title = title
-      this.message = message
-      this.options = Object.assign(this.options, options)
-      return new Promise((resolve, reject) => {
-        this.resolve = resolve
-        this.reject = reject
-      })
-    },
-    agree() {
-      this.resolve(true)
-      this.dialog = false
-    },
-    cancel() {
-      this.resolve(false)
-      this.dialog = false
-    },
-  },
-}
-</script>
-
-<template>
-  <v-dialog
-    v-model="dialog"
-    :max-width="options.width"
-    @keydown.esc="cancel"
-  >
-    <v-card>
-      <v-toolbar dark :color="options.color" dense flat>
-        <v-toolbar-title class="white--text">
-          {{ title }}
-        </v-toolbar-title>
-      </v-toolbar>
-      <v-card-text v-if="message" class="pa-4 text-center" v-html="message" />
-      <v-card-actions class="pt-0">
-        <v-spacer />
-        <v-btn text @click="cancel">
-          Cancel
-        </v-btn>
-        <v-btn depressed :color="options.color" @click="agree">
-          Yes
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index c350a527..3dc0803f 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -1,227 +1,225 @@
-<script>
-import { formatBytes } from './util'
-import Confirm from './Confirm.vue'
+<script lang="ts" setup>
+import type { Axios } from 'axios'
+import type { PropType } from 'vue'
+import { useConfirm } from 'vuetify-use-dialog'
+import { formatBytes } from '@core/utils/formatters'
+import type { EndPoints, FileItem } from '@/api/types'
 
-export default {
-  components: {
-    Confirm,
-  },
-  props: {
-    icons: Object,
-    storage: String,
-    path: String,
-    endpoints: Object,
-    axios: Function,
-    refreshPending: Boolean,
-  },
-  data() {
-    return {
-      items: [],
-      filter: '',
+// 输入参数
+const props = defineProps({
+  icons: Object,
+  storage: String,
+  path: String,
+  endpoints: Object as PropType<EndPoints>,
+  axios: Object as PropType<Axios>,
+  refreshpending: Boolean,
+})
+
+// 对外事件
+const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted'])
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 内容列表
+const items = ref<FileItem[]>([])
+
+// 当前路径
+const path = ref(props.path ?? '')
+
+// 过滤条件
+const filter = ref('')
+
+// 存储空间类型
+const storage = ref(props.storage || '')
+
+// 是否正在加载
+const refreshPending = ref(props.refreshpending || false)
+
+// 目录过滤
+const dirs = computed(() =>
+  items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)),
+)
+
+// 文件过滤
+const files = computed(() =>
+  items.value.filter(item => item.type === 'file' && item.basename.includes(filter.value)),
+)
+
+// 是否目录
+const isDir = computed(() => path.value.endsWith('/'))
+
+// 是否文件
+const isFile = computed(() => !isDir.value)
+
+// 调API加载内容
+async function load() {
+  if (isDir.value) {
+    const url = props.endpoints?.list.url
+      .replace(/{storage}/g, storage.value)
+      .replace(/{path}/g, path.value)
+
+    const config = {
+      url,
+      method: props.endpoints?.list.method || 'get',
+    }
+
+    const response = await props.axios?.request(config)
+    items.value = response?.data
+  }
+}
+
+// 删除项目
+async function deleteItem(item: FileItem) {
+  const confirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认删除${
+                item.type === 'dir' ? '目录' : '文件'
+            }?<br><em>${item.basename}</em>?`,
+    confirmationText: '确认',
+    cancellationText: '取消',
+    dialogProps: {
+      maxWidth: 600,
+    },
+  })
+
+  if (confirmed) {
+    emit('loading', true)
+    const url = props.endpoints?.delete.url
+      .replace(/{storage}/g, storage.value)
+      .replace(/{path}/g, item.path)
+
+    const config = {
+      url,
+      method: props.endpoints?.delete.method || 'post',
+    }
+
+    await props.axios?.request(config)
+    emit('filedeleted')
+    emit('loading', false)
+  }
+}
+
+// 切换路径
+function changePath(path: string) {
+  emit('pathchanged', path)
+}
+
+// 监听path变化
+watch(
+  () => path.value,
+  async () => {
+    items.value = []
+    await load()
+    if (refreshPending.value) {
+      await load()
+      emit('refreshed')
     }
   },
-  computed: {
-    dirs() {
-      return this.items.filter(
-        item =>
-          item.type === 'dir' && item.basename.includes(this.filter),
-      )
-    },
-    files() {
-      return this.items.filter(
-        item =>
-          item.type === 'file' && item.basename.includes(this.filter),
-      )
-    },
-    isDir() {
-      return this.path[this.path.length - 1] === '/'
-    },
-    isFile() {
-      return !this.isDir
-    },
-  },
-  watch: {
-    async path() {
-      this.items = []
-      await this.load()
-    },
-    async refreshPending() {
-      if (this.refreshPending) {
-        await this.load()
-        this.$emit('refreshed')
-      }
-    },
-  },
-  methods: {
-    formatBytes,
-    changePath(path) {
-      this.$emit('path-changed', path)
-    },
-    async load() {
-      this.$emit('loading', true)
-      if (this.isDir) {
-        const url = this.endpoints.list.url
-          .replace(new RegExp('{storage}', 'g'), this.storage)
-          .replace(new RegExp('{path}', 'g'), this.path)
-
-        const config = {
-          url,
-          method: this.endpoints.list.method || 'get',
-        }
-
-        const response = await this.axios.request(config)
-        this.items = response.data
-      }
-      else {
-        // TODO: load file
-      }
-      this.$emit('loading', false)
-    },
-    async deleteItem(item) {
-      const confirmed = await this.$refs.confirm.open(
-        'Delete',
-                `Are you sure<br>you want to delete this ${
-                    item.type === 'dir' ? 'folder' : 'file'
-                }?<br><em>${item.basename}</em>`,
-      )
-
-      if (confirmed) {
-        this.$emit('loading', true)
-        const url = this.endpoints.delete.url
-          .replace(new RegExp('{storage}', 'g'), this.storage)
-          .replace(new RegExp('{path}', 'g'), item.path)
-
-        const config = {
-          url,
-          method: this.endpoints.delete.method || 'post',
-        }
-
-        await this.axios.request(config)
-        this.$emit('file-deleted')
-        this.$emit('loading', false)
-      }
-    },
-  },
-}
+)
 </script>
 
 <template>
-  <v-card flat tile min-height="380" class="d-flex flex-column">
-    <Confirm ref="confirm" />
-    <v-card-text
+  <VCard flat tile min-height="380" class="d-flex flex-column">
+    <VCardText
       v-if="!path"
       class="grow d-flex justify-center align-center grey--text"
     >
-      Select a folder or a file
-    </v-card-text>
-    <v-card-text
+      选择目录或文件
+    </VCardText>
+    <VCardText
       v-else-if="isFile"
       class="grow d-flex justify-center align-center"
     >
-      File: {{ path }}
-    </v-card-text>
-    <v-card-text v-else-if="dirs.length || files.length" class="grow">
-      <v-list v-if="dirs.length" subheader>
-        <v-subheader>Folders</v-subheader>
-        <v-list-item
-          v-for="item in dirs"
-          :key="item.basename"
+      文件: {{ path }}
+    </VCardText>
+    <VCardText v-else-if="dirs.length || files.length" class="grow">
+      <VList v-if="dirs.length" subheader>
+        <VListSubheader>目录</VListSubheader>
+        <VListItem
+          v-for="(item, index) in dirs"
+          :key="index"
           class="pl-0"
           @click="changePath(item.path)"
         >
-          <v-list-item-avatar class="ma-0">
-            <v-icon>mdi-folder-outline</v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content class="py-2">
-            <v-list-item-title v-text="item.basename" />
-          </v-list-item-content>
-          <v-list-item-action>
-            <v-btn icon @click.stop="deleteItem(item)">
-              <v-icon color="grey lighten-1">
+          <template #prepend>
+            <VIcon icon="mdi-folder-outline" />
+          </template>
+          <VListItemTitle v-text="item.basename" />
+          <template #append>
+            <VBtn icon @click.stop="deleteItem(item)">
+              <VIcon color="grey lighten-1">
                 mdi-delete-outline
-              </v-icon>
-            </v-btn>
-            <v-btn v-if="false" icon>
-              <v-icon color="grey lighten-1">
-                mdi-information
-              </v-icon>
-            </v-btn>
-          </v-list-item-action>
-        </v-list-item>
-      </v-list>
-      <v-divider v-if="dirs.length && files.length" />
-      <v-list v-if="files.length" subheader>
-        <v-subheader>Files</v-subheader>
-        <v-list-item
-          v-for="item in files"
-          :key="item.basename"
+              </VIcon>
+            </VBtn>
+          </template>
+        </VListItem>
+      </VList>
+      <VDivider v-if="dirs.length && files.length" />
+      <VList v-if="files.length" subheader>
+        <VListSubheader>文件</VListSubheader>
+        <VListItem
+          v-for="(item, index) in files"
+          :key="index"
           class="pl-0"
           @click="changePath(item.path)"
         >
-          <v-list-item-avatar class="ma-0">
-            <v-icon>{{ icons[item.extension.toLowerCase()] || icons.other }}</v-icon>
-          </v-list-item-avatar>
+          <template #prepend>
+            <VIcon v-if="props.icons" :icon="props.icons[item.extension.toLowerCase()] || props.icons?.other" />
+          </template>
 
-          <v-list-item-content class="py-2">
-            <v-list-item-title v-text="item.basename" />
-            <v-list-item-subtitle>{{ formatBytes(item.size) }}</v-list-item-subtitle>
-          </v-list-item-content>
+          <VListItemTitle v-text="item.basename" />
+          <VListItemSubtitle> {{ formatBytes(item.size) }}</VListItemSubtitle>
 
-          <v-list-item-action>
-            <v-btn icon @click.stop="deleteItem(item)">
-              <v-icon color="grey lighten-1">
+          <template #append>
+            <VBtn icon @click.stop="deleteItem(item)">
+              <VIcon color="grey lighten-1">
                 mdi-delete-outline
-              </v-icon>
-            </v-btn>
-            <v-btn v-if="false" icon>
-              <v-icon color="grey lighten-1">
-                mdi-information
-              </v-icon>
-            </v-btn>
-          </v-list-item-action>
-        </v-list-item>
-      </v-list>
-    </v-card-text>
-    <v-card-text
+              </VIcon>
+            </VBtn>
+          </template>
+        </VListItem>
+      </VList>
+    </VCardText>
+    <VCardText
       v-else-if="filter"
       class="grow d-flex justify-center align-center grey--text py-5"
     >
-      No files or folders found
-    </v-card-text>
-    <v-card-text
+      没有目录或文件
+    </VCardText>
+    <VCardText
       v-else
       class="grow d-flex justify-center align-center grey--text py-5"
     >
-      The folder is empty
-    </v-card-text>
-    <v-divider v-if="path" />
-    <v-toolbar v-if="false && path && isFile" dense flat class="shrink">
-      <v-btn icon>
-        <v-icon>mdi-download</v-icon>
-      </v-btn>
-    </v-toolbar>
-    <v-toolbar v-if="path && isDir" dense flat class="shrink">
-      <v-text-field
+      空目录
+    </VCardText>
+    <VDivider v-if="path" />
+    <VToolbar v-if="path && isFile" density="compact" flat color="gray">
+      <VTextField
         v-model="filter"
-        solo
-        flat
         hide-details
-        label="Filter"
+        flat
+        density="compact"
+        variant="solo-filled"
+        placeholder="搜索 ..."
         prepend-inner-icon="mdi-filter-outline"
-        class="ml-n3"
+        class="me-2"
       />
-      <v-btn v-if="false" icon>
-        <v-icon>mdi-eye-settings-outline</v-icon>
-      </v-btn>
-      <v-btn icon @click="load">
-        <v-icon>mdi-refresh</v-icon>
-      </v-btn>
-    </v-toolbar>
-  </v-card>
+      <VBtn icon>
+        <VIcon>mdi-download</VIcon>
+      </VBtn>
+      <VBtn icon @click="load">
+        <VIcon>mdi-refresh</VIcon>
+      </VBtn>
+    </VToolbar>
+  </VCard>
 </template>
 
 <style lang="scss" scoped>
 .v-card {
     height: 100%;
 }
+.v-toolbar{
+  background: rgb(var(--v-table-header-background));
+}
 </style>
diff --git a/src/components/filebrowser/Toolbar.vue b/src/components/filebrowser/Toolbar.vue
index 2a7c3d08..e510b5dd 100644
--- a/src/components/filebrowser/Toolbar.vue
+++ b/src/components/filebrowser/Toolbar.vue
@@ -1,194 +1,163 @@
-<script>
-export default {
-  props: {
-    storages: Array,
-    storage: String,
-    path: String,
-    endpoints: Object,
-    axios: Function,
-  },
-  data() {
+<script lang="ts" setup>
+import type { Axios } from 'axios'
+import type { EndPoints } from '@/api/types'
+
+// 输入参数
+const inProps = defineProps({
+  storages: Array as PropType<any[]>,
+  storage: String,
+  path: String,
+  endpoints: Object as PropType<EndPoints>,
+  axios: Object as PropType<Axios>,
+})
+
+// 对外事件
+const emit = defineEmits(['storagechanged', 'pathchanged', 'loading', 'foldercreated'])
+
+// 当前路径
+const path = ref(inProps.path ?? '')
+
+// 新建文件夹名称
+const newFolderPopper = ref(false)
+
+// 新建文件名称
+const newFolderName = ref('')
+
+// 计算PATH面包屑
+const pathSegments = computed(() => {
+  let path_str = '/'
+  const isFolder = path.value.endsWith('/')
+  const segments = path.value.split('/').filter(item => item)
+
+  return segments.map((item, index) => {
+    path_str += item + ((index < segments.length - 1 || isFolder) ? '/' : '')
     return {
-      newFolderPopper: false,
-      newFolderName: '',
+      name: item,
+      path: path_str,
     }
-  },
-  computed: {
-    pathSegments() {
-      let path = '/'
-      const isFolder = this.path[this.path.length - 1] === '/'
-      let segments = this.path.split('/').filter(item => item)
+  })
+})
 
-      segments = segments.map((item, index) => {
-        path
-                    += item + (index < segments.length - 1 || isFolder ? '/' : '')
-        return {
-          name: item,
-          path,
-        }
-      })
+const storageObject = computed(() => {
+  return inProps.storages?.find(item => item.code === inProps.storage)
+})
 
-      return segments
-    },
-    storageObject() {
-      return this.storages.find(item => item.code == this.storage)
-    },
-  },
-  methods: {
-    changeStorage(code) {
-      if (this.storage != code) {
-        this.$emit('storage-changed', code)
-        this.$emit('path-changed', '')
-      }
-    },
-    changePath(path) {
-      this.$emit('path-changed', path)
-    },
-    goUp() {
-      const segments = this.pathSegments
-      const path
-                    = segments.length === 1
-                      ? '/'
-                      : segments[segments.length - 2].path
-      this.changePath(path)
-    },
-    async addFiles(event) {
-      this.$emit('add-files', event.target.files)
-      this.$refs.inputUpload.value = ''
-    },
-    async mkdir() {
-      this.$emit('loading', true)
-      const url = this.endpoints.mkdir.url
-        .replace(new RegExp('{storage}', 'g'), this.storage)
-        .replace(new RegExp('{path}', 'g'), this.path + this.newFolderName)
+// 切换存储
+function changeStorage(code: string) {
+  if (inProps.storage !== code) {
+    emit('storagechanged', code)
+    emit('pathchanged', '')
+  }
+}
 
-      const config = {
-        url,
-        method: this.endpoints.mkdir.method || 'post',
-      }
+// 路径变化
+function changePath(path: string) {
+  emit('pathchanged', path)
+}
 
-      await this.axios.request(config)
-      this.$emit('folder-created', this.newFolderName)
-      this.newFolderPopper = false
-      this.newFolderName = ''
-      this.$emit('loading', false)
-    },
-  },
+// 返回上一级
+function goUp() {
+  const segments = pathSegments.value
+  const path = segments.length === 1 ? '/' : segments[segments.length - 2].path
+  changePath(path)
+}
+
+// 创建目录
+async function mkdir() {
+  emit('loading', true)
+  const url = inProps.endpoints?.mkdir.url
+    .replace(/{storage}/g, inProps.storage)
+    .replace(/{path}/g, inProps.path + newFolderName.value)
+
+  const config = {
+    url,
+    method: inProps.endpoints?.mkdir.method || 'post',
+  }
+
+  await inProps.axios?.request(config)
+  emit('foldercreated', newFolderName.value)
+  newFolderPopper.value = false
+  newFolderName.value = ''
+  emit('loading', false)
 }
 </script>
 
 <template>
-  <v-toolbar flat dense color="blue-grey lighten-5">
-    <v-toolbar-items>
-      <v-menu v-if="storages.length > 1" offset-y>
-        <template #activator="{ on }">
-          <v-btn icon class="storage-select-button mr-3" v-on="on">
-            <v-icon>mdi-arrow-down-drop-circle-outline</v-icon>
-          </v-btn>
+  <VToolbar flat dense>
+    <VToolbarItems>
+      <VMenu v-if="inProps.storages?.length || 0 > 1" offset-y>
+        <template #activator="{ props }">
+          <VBtn v-bind="props">
+            <VIcon icon="mdi-arrow-down-drop-circle-outline" />
+          </VBtn>
         </template>
-        <v-list class="storage-select-list">
-          <v-list-item
+        <VList>
+          <VListItem
             v-for="(item, index) in storages"
             :key="index"
-            :disabled="item.code === storageObject.code"
+            :disabled="item.code === storageObject?.code"
             @click="changeStorage(item.code)"
           >
-            <v-list-item-icon>
-              <v-icon v-text="item.icon" />
-            </v-list-item-icon>
-            <v-list-item-title>{{ item.name }}</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-      <v-btn text :input-value="path === '/'" @click="changePath('/')">
-        <v-icon class="mr-2">
-          {{ storageObject.icon }}
-        </v-icon>
-        {{ storageObject.name }}
-      </v-btn>
+            <template #prepend>
+              <Icon :icon="item.icon" />
+            </template>
+            <VListItemTitle>{{ item.name }}</VListItemTitle>
+          </VListItem>
+        </VList>
+      </VMenu>
+      <VBtn variant="text" :input-value="path === '/'" class="px-1" @click="changePath('/')">
+        <VIcon :icon="storageObject?.icon" class="mr-2" />
+        {{ storageObject?.name }}
+      </VBtn>
       <template v-for="(segment, index) in pathSegments" :key="index">
-        <v-icon>
-          mdi-chevron-right
-        </v-icon>
-        <v-btn
-          text
+        <VBtn
+          variant="text"
           :input-value="index === pathSegments.length - 1"
+          class="px-1 d-none d-md-block"
           @click="changePath(segment.path)"
         >
+          <VIcon icon=" mdi-chevron-right" />
           {{ segment.name }}
-        </v-btn>
+        </VBtn>
       </template>
-    </v-toolbar-items>
+    </VToolbarItems>
     <div class="flex-grow-1" />
-
-    <template v-if="$vuetify.breakpoint.smAndUp">
-      <v-tooltip v-if="pathSegments.length > 0" bottom>
-        <template #activator="{ on }">
-          <v-btn icon @click="goUp" v-on="on">
-            <v-icon>mdi-arrow-up-bold-outline</v-icon>
-          </v-btn>
-        </template>
-        <span v-if="pathSegments.length === 1">Up to "root"</span>
-        <span v-else>Up to "{{ pathSegments[pathSegments.length - 2].name }}"</span>
-      </v-tooltip>
-      <v-menu
-        v-model="newFolderPopper"
-        :close-on-content-click="false"
-        :nudge-width="200"
-        offset-y
-      >
-        <template #activator="{ on }">
-          <v-btn v-if="path" icon title="Create Folder" v-on="on">
-            <v-icon>mdi-folder-plus-outline</v-icon>
-          </v-btn>
-        </template>
-        <v-card>
-          <v-card-text>
-            <v-text-field v-model="newFolderName" label="Name" hide-details />
-          </v-card-text>
-          <v-card-actions>
-            <div class="flex-grow-1" />
-            <v-btn depressed @click="newFolderPopper = false">
-              Cancel
-            </v-btn>
-            <v-btn
-              color="success"
-              :disabled="!newFolderName"
-              depressed
-              @click="mkdir"
-            >
-              Create Folder
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-menu>
-      <v-btn v-if="path" icon title="Upload Files" @click="$refs.inputUpload.click()">
-        <v-icon>mdi-plus-circle</v-icon>
-        <input v-show="false" ref="inputUpload" type="file" multiple @change="addFiles">
-      </v-btn>
-    </template>
-  </v-toolbar>
+    <IconBtn v-if="pathSegments.length > 0" @click="goUp">
+      <VIcon icon="mdi-arrow-up-bold-outline" />
+    </IconBtn>
+    <VDialog
+      v-model="newFolderPopper"
+      max-width="600"
+    >
+      <template #activator="{ props }">
+        <IconBtn title="新建文件夹" v-bind="props">
+          <VIcon icon="mdi-folder-plus-outline" />
+        </IconBtn>
+      </template>
+      <VCard title="新建文件夹">
+        <VCardText>
+          <VTextField v-model="newFolderName" label="名称" />
+        </VCardText>
+        <VCardActions>
+          <div class="flex-grow-1" />
+          <VBtn depressed @click="newFolderPopper = false">
+            取消
+          </VBtn>
+          <VBtn
+            :disabled="!newFolderName"
+            depressed
+            @click="mkdir"
+          >
+            新建
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </VToolbar>
 </template>
 
 <style lang="scss" scoped>
-/* Storage Menu - alternate appearance
-.storage-select-button ::v-deep .v-btn__content {
-    flex-wrap: wrap;
-    font-size: 11px;
-
-    .v-icon {
-        width: 100%;
-        font-size: 22px;
-    }
-}
-*/
-
-.storage-select-list .v-list-item--disabled {
-    background-color: rgba(0, 0, 0, 0.25);
-    color: #fff;
-
-    .v-icon {
-        color: #fff;
-    }
+.v-toolbar{
+  background: rgb(var(--v-table-header-background));
 }
 </style>
diff --git a/src/components/filebrowser/Tree.vue b/src/components/filebrowser/Tree.vue
index 5edf81a4..dfc79e8b 100644
--- a/src/components/filebrowser/Tree.vue
+++ b/src/components/filebrowser/Tree.vue
@@ -1,116 +1,136 @@
-<script>
-export default {
-  props: {
-    icons: Object,
-    storage: String,
-    path: String,
-    endpoints: Object,
-    axios: Function,
-    refreshPending: Boolean,
-  },
-  data() {
-    return {
-      open: [],
-      active: [],
-      items: [],
-      filter: '',
+<script lang="ts" setup>
+import type { Axios } from 'axios'
+import type { EndPoints, FileItem } from '@/api/types'
+
+// 输入参数
+const props = defineProps({
+  icons: Object,
+  storage: String,
+  path: String,
+  endpoints: Object as PropType<EndPoints>,
+  axios: Object as PropType<Axios>,
+  refreshpending: Boolean,
+})
+
+// 对外事件
+const emit = defineEmits(['pathchanged', 'loading', 'refreshed'])
+
+// 变量
+const open = ref<string[]>([])
+// 活跃的文件夹
+const active = ref<string[]>([])
+// 内容
+const items = ref<FileItem[]>([])
+// 过滤
+const filter = ref('')
+// 刷新状态
+const refreshPending = ref(props.refreshpending || false)
+
+// 方法
+function init() {
+  open.value = []
+  items.value = [{
+    type: 'dir',
+    path: '/',
+    basename: 'root',
+    extension: '',
+    name: 'root',
+    children: [],
+    size: 0,
+  }]
+  if (props.path !== '')
+    emit('pathchanged', '')
+}
+
+// 调用API读取文件夹
+async function readFolder(item: FileItem) {
+  emit('loading', true)
+  const url = props.endpoints?.list.url
+    .replace(/{storage}/g, props.storage)
+    .replace(/{path}/g, item.path)
+
+  const config = {
+    url,
+    method: props.endpoints?.list.method || 'get',
+  }
+
+  const response: any = await props.axios?.request(config)
+
+  item.children = response.data.map((item: FileItem) => {
+    if (item.type === 'dir')
+      item.children = []
+
+    return item
+  })
+
+  emit('loading', false)
+}
+
+// 选中变化
+function activeChanged(_active: string[]) {
+  active.value = _active
+  let path = ''
+  if (active.value.length)
+    path = active.value[0]
+
+  if (props.path !== path)
+    emit('pathchanged', path)
+}
+
+// 查找文件
+function findItem(path: string) {
+  const stack: FileItem[] = []
+  stack.push(items.value[0])
+  while (stack.length > 0) {
+    const node = stack.pop()
+    if (node?.path === path) {
+      return node
+    }
+    else if (node?.children && node.children.length) {
+      for (const element of node.children)
+        stack.push(element)
+    }
+  }
+  return null
+}
+
+// 监听存储空间变量
+watch(() => props.storage, () => {
+  init()
+})
+
+// 监听路径变化
+watch(() => props.path, () => {
+  if (props.path) {
+    active.value = [props.path]
+    if (!open.value.includes(props.path))
+      open.value.push(props.path)
+  }
+})
+
+// 监听 refreshPending
+watch(
+  () => refreshPending.value,
+  async () => {
+    if (refreshPending.value && props.path) {
+      const item = findItem(props.path)
+      if (item) {
+        await readFolder(item)
+        emit('refreshed')
+      }
     }
   },
-  watch: {
-    storage() {
-      this.init()
-    },
-    path() {
-      this.active = [this.path]
-      if (!this.open.includes(this.path))
-        this.open.push(this.path)
-    },
-    async refreshPending() {
-      if (this.refreshPending) {
-        const item = this.findItem(this.path)
-        await this.readFolder(item)
-        this.$emit('refreshed')
-      }
-    },
-  },
-  created() {
-    this.init()
-  },
-  methods: {
-    init() {
-      this.open = []
-      this.items = []
-      // set default files tree items (root item) in nextTick.
-      // Otherwise this.open isn't cleared properly (due to syncing perhaps)
-      setTimeout(() => {
-        this.items = [
-          {
-            type: 'dir',
-            path: '/',
-            basename: 'root',
-            extension: '',
-            name: 'root',
-            children: [],
-          },
-        ]
-      }, 0)
-      if (this.path !== '')
-        this.$emit('path-changed', '')
-    },
-    async readFolder(item) {
-      this.$emit('loading', true)
-      const url = this.endpoints.list.url
-        .replace(new RegExp('{storage}', 'g'), this.storage)
-        .replace(new RegExp('{path}', 'g'), item.path)
+)
 
-      const config = {
-        url,
-        method: this.endpoints.list.method || 'get',
-      }
-
-      const response = await this.axios.request(config)
-
-      item.children = response.data.map((item) => {
-        if (item.type === 'dir')
-          item.children = []
-
-        return item
-      })
-
-      this.$emit('loading', false)
-    },
-    activeChanged(active) {
-      this.active = active
-      let path = ''
-      if (active.length)
-        path = active[0]
-
-      if (this.path != path)
-        this.$emit('path-changed', path)
-    },
-    findItem(path) {
-      const stack = []
-      stack.push(this.items[0])
-      while (stack.length > 0) {
-        const node = stack.pop()
-        if (node.path == path) {
-          return node
-        }
-        else if (node.children && node.children.length) {
-          for (let i = 0; i < node.children.length; i++)
-            stack.push(node.children[i])
-        }
-      }
-      return null
-    },
-  },
-}
+onMounted(() => {
+  init()
+})
 </script>
 
 <template>
-  <v-card flat tile width="250" min-height="380" class="d-flex flex-column folders-tree-card">
+  <VCard flat width="250" min-height="500" class="d-flex flex-column folders-tree-card">
     <div class="grow scroll-x">
-      <v-treeview
+      <VTreeview
         :open="open"
         :active="active"
         :items="items"
@@ -125,51 +145,37 @@ export default {
         @update:active="activeChanged"
       >
         <template #prepend="{ item, open }">
-          <v-icon
+          <VIcon
             v-if="item.type === 'dir'"
           >
             {{ open ? 'mdi-folder-open-outline' : 'mdi-folder-outline' }}
-          </v-icon>
-          <v-icon v-else>
-            {{ icons[item.extension.toLowerCase()] || icons.other }}
-          </v-icon>
+          </VIcon>
+          <VIcon v-else-if="props.icons" :icon="props.icons[item.extension.toLowerCase()] || props.icons.other" />
         </template>
         <template #label="{ item }">
           {{ item.basename }}
-          <v-btn
+          <VBtn
             v-if="item.type === 'dir'"
             icon
             class="ml-1"
             @click.stop="readFolder(item)"
           >
-            <v-icon class="pa-0 mdi-18px" color="grey lighten-1">
+            <VIcon class="pa-0 mdi-18px" color="grey lighten-1">
               mdi-refresh
-            </v-icon>
-          </v-btn>
+            </VIcon>
+          </VBtn>
         </template>
-      </v-treeview>
+      </VTreeview>
     </div>
-    <v-divider />
-    <v-toolbar dense flat class="shrink">
-      <v-text-field
-        v-model="filter"
-        solo
-        flat
-        hide-details
-        label="Filter"
-        prepend-inner-icon="mdi-filter-outline"
-        class="ml-n3"
-      />
-      <v-tooltip top>
-        <template #activator="{ on }">
-          <v-btn icon @click="init" v-on="on">
-            <v-icon>mdi-collapse-all-outline</v-icon>
-          </v-btn>
-        </template>
-        <span>Collapse All</span>
-      </v-tooltip>
-    </v-toolbar>
-  </v-card>
+    <VDivider />
+    <VToolbar
+      density="compact"
+    >
+      <VBtn icon @click="init">
+        <VIcon icon="mdi-collapse-all-outline" />
+      </VBtn>
+    </VToolbar>
+  </VCard>
 </template>
 
 <style lang="scss" scoped>
@@ -193,4 +199,7 @@ export default {
         }
     }
 }
+.v-toolbar{
+  background: rgb(var(--v-table-header-background));
+}
 </style>
diff --git a/src/components/filebrowser/Upload.vue b/src/components/filebrowser/Upload.vue
deleted file mode 100644
index 5e59c9a0..00000000
--- a/src/components/filebrowser/Upload.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<script>
-import { formatBytes } from './util'
-
-const imageMimeTypes = ['image/png', 'image/jpeg']
-
-export default {
-  props: {
-    path: String,
-    storage: String,
-    endpoint: Object,
-    files: { type: Array, default: () => [] },
-    icons: Object,
-    axios: Function,
-    maxUploadFilesCount: { type: Number, default: 0 },
-    maxUploadFileSize: { type: Number, default: 0 },
-  },
-  data() {
-    return {
-      loading: false,
-      uploading: false,
-      progress: 0,
-      listItems: [],
-    }
-  },
-  watch: {
-    files: {
-      deep: true,
-      immediate: true,
-      async handler() {
-        this.loading = true
-        this.listItems = await this.filesMap(this.files)
-        this.loading = false
-      },
-    },
-  },
-  methods: {
-    formatBytes,
-
-    async filesMap(files) {
-      const promises = Array.from(files).map((file) => {
-        const result = {
-          name: file.name,
-          type: file.type,
-          size: file.size,
-          extension: file.name.split('.').pop(),
-        }
-        return new Promise((resolve) => {
-          if (!imageMimeTypes.includes(result.type))
-            return resolve(result)
-
-          const reader = new FileReader()
-          reader.onload = function (e) {
-            result.preview = e.target.result
-            resolve(result)
-          }
-          reader.readAsDataURL(file)
-        })
-      })
-
-      return await Promise.all(promises)
-    },
-
-    async add(event) {
-      const files = Array.from(event.target.files)
-      this.$emit('add-files', files)
-      this.$refs.inputUpload.value = ''
-    },
-
-    remove(index) {
-      this.$emit('remove-file', index)
-      this.listItems.splice(index, 1)
-    },
-
-    clear() {
-      this.$emit('clear-files')
-      this.listItems = []
-    },
-
-    cancel() {
-      this.$emit('cancel')
-    },
-
-    async upload() {
-      const formData = new FormData()
-
-      // files
-      for (const file of this.files)
-        formData.append('files', file, file.name)
-
-      const url = this.endpoint.url
-        .replace(new RegExp('{storage}', 'g'), this.storage)
-        .replace(new RegExp('{path}', 'g'), this.path)
-
-      const config = {
-        url,
-        method: this.endpoint.method || 'post',
-        data: formData,
-        onUploadProgress: (progressEvent) => {
-          this.progress
-                        = (progressEvent.loaded / progressEvent.total) * 100
-        },
-      }
-
-      this.uploading = true
-      const response = await this.axios.request(config)
-      this.uploading = false
-      this.$emit('uploaded')
-    },
-  },
-}
-</script>
-
-<template>
-  <v-overlay :absolute="true">
-    <v-card flat light class="mx-auto" :loading="loading">
-      <v-card-text class="py-3 text-center">
-        <div>
-          <span class="grey--text">Upload to:</span>
-          <v-chip color="info" class="mx-1">
-            {{ storage }}
-          </v-chip>
-          <v-chip>{{ path }}</v-chip>
-        </div>
-        <div v-if="maxUploadFilesCount">
-          <span class="grey--text">Max files count: {{ maxUploadFilesCount }}</span>
-        </div>
-        <div v-if="maxUploadFileSize">
-          <span class="grey--text">Max file size: {{ formatBytes(maxUploadFileSize) }}</span>
-        </div>
-      </v-card-text>
-      <v-divider />
-      <v-card-text v-if="listItems.length" class="pa-0 files-list-wrapper">
-        <v-list v-if="listItems.length" two-line>
-          <v-list-item v-for="(file, index) in listItems" :key="index" link>
-            <v-list-item-avatar>
-              <v-img v-if="file.preview" :src="file.preview" />
-              <v-icon
-                v-else
-                class="mdi-36px"
-                color="grey lighten-1"
-                v-text="icons[file.extension] || 'mdi-file'"
-              />
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title v-text="file.name" />
-              <v-list-item-subtitle>{{ formatBytes(file.size) }} - {{ file.type }}</v-list-item-subtitle>
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-btn icon @click="remove(index)">
-                <v-icon color="grey lighten-1">
-                  mdi-close
-                </v-icon>
-              </v-btn>
-            </v-list-item-action>
-          </v-list-item>
-        </v-list>
-      </v-card-text>
-      <v-card-text v-else class="py-6 text-center">
-        <v-btn @click="$refs.inputUpload.click()">
-          <v-icon left>
-            mdi-plus-circle
-          </v-icon>Add files
-        </v-btn>
-      </v-card-text>
-      <v-divider />
-      <v-toolbar dense flat>
-        <div class="grow" />
-        <v-btn text class="mx-1" @click="cancel">
-          Cancel
-        </v-btn>
-        <v-btn depressed color="warning" class="mx-1" :disabled="!files" @click="clear">
-          <v-icon>mdi-close</v-icon>Clear
-        </v-btn>
-        <v-btn
-          :disabled="listItems.length >= maxUploadFilesCount"
-          depressed
-          color="info"
-          class="mx-1"
-          @click="$refs.inputUpload.click()"
-        >
-          <v-icon left>
-            mdi-plus-circle
-          </v-icon>Add Files
-          <input
-            v-show="false"
-            ref="inputUpload"
-            type="file"
-            multiple
-            @change="add"
-          >
-        </v-btn>
-        <v-btn depressed color="success" class="ml-1" :disabled="!files" @click="upload">
-          Upload
-          <v-icon right>
-            mdi-upload-outline
-          </v-icon>
-        </v-btn>
-      </v-toolbar>
-      <v-overlay :value="uploading" :absolute="true" color="white" opacity="0.9">
-        <v-progress-linear v-model="progress" height="25" striped rounded reactive>
-          <strong>{{ Math.ceil(progress) }}%</strong>
-        </v-progress-linear>
-      </v-overlay>
-    </v-card>
-  </v-overlay>
-</template>
-
-<style lang="scss" scoped>
-::v-deep .v-overlay__content {
-    width: 90%;
-    max-width: 500px;
-
-    .files-list-wrapper {
-        max-height: 250px;
-        overflow-y: auto;
-    }
-}
-</style>
diff --git a/src/components/filebrowser/util.js b/src/components/filebrowser/util.js
deleted file mode 100644
index f22d4762..00000000
--- a/src/components/filebrowser/util.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export function formatBytes(bytes, decimals = 2) {
-  if (bytes === 0)
-    return '0 bytes'
-
-  const k = 1024
-  const dm = decimals < 0 ? 0 : decimals
-  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-
-  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
-}
-
-export default {
-  formatBytes,
-}
diff --git a/src/pages/filemanager.vue b/src/pages/filemanager.vue
index 5322cbc0..8f430aa3 100644
--- a/src/pages/filemanager.vue
+++ b/src/pages/filemanager.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import FileBrowser from '@/components/FileBrowser.vue'
+import FileBrowserView from '@/views/reorganize/FileBrowserView.vue'
 </script>
 
 <template>
-  <div>
-    <FileBrowser />
-  </div>
+  <FileBrowserView />
 </template>
diff --git a/src/views/reorganize/FileBrowserView.vue b/src/views/reorganize/FileBrowserView.vue
new file mode 100644
index 00000000..b5891289
--- /dev/null
+++ b/src/views/reorganize/FileBrowserView.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import FileBrowser from '@/components/FileBrowser.vue'
+</script>
+
+<template>
+  <div>
+    <FileBrowser storages="local" tree="true" path="/Users/jxxghp/Downloads/public" />
+  </div>
+</template>

From 476bd4bd1923dbbcff5388fa4adf8ee14fcfff5e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 12:48:04 +0800
Subject: [PATCH 11/25] fix

---
 src/api/types.ts                         |  2 +-
 src/components/FileBrowser.vue           | 30 ++++++-------
 src/components/filebrowser/List.vue      | 56 ++++++++++++++----------
 src/components/filebrowser/Toolbar.vue   |  1 +
 src/components/filebrowser/Tree.vue      |  7 ++-
 src/views/reorganize/FileBrowserView.vue | 11 ++++-
 6 files changed, 60 insertions(+), 47 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index 38b90409..d45f8281 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -913,5 +913,5 @@ export interface FileItem {
   path: string
   extension: string
   size: number
-  children: []
+  children: FileItem[]
 }
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index 75a1bf94..827cfa79 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -5,6 +5,7 @@ import axios from 'axios'
 import Toolbar from './filebrowser/Toolbar.vue'
 import Tree from './filebrowser/Tree.vue'
 import List from './filebrowser/List.vue'
+import type { EndPoints } from '@/api/types'
 
 // 输入参数
 const props = defineProps({
@@ -12,16 +13,16 @@ const props = defineProps({
   storage: String,
   path: String,
   tree: String,
-  endpoints: Object,
+  endpoints: Object as PropType<EndPoints>,
   axios: Object as PropType<Axios>,
-  axiosConfig: Object,
-  maxUploadFilesCount: Number,
-  maxUploadFileSize: Number,
+  axiosconfig: Object,
 })
 
-// 事件
+// 事件f
 const emit = defineEmits(['change'])
 
+console.log('FileBrowser Init Path', props.path)
+
 const availableStorages = [
   {
     name: '本地',
@@ -30,12 +31,6 @@ const availableStorages = [
   },
 ]
 
-const endpoints = {
-  list: { url: '/filebrowser/list?path={path}', method: 'get' },
-  mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'post' },
-  delete: { url: '/filebrowser/delete?path={path}', method: 'post' },
-}
-
 const fileIcons = {
   zip: 'mdi-folder-zip-outline',
   rar: 'mdi-folder-zip-outline',
@@ -65,7 +60,7 @@ const path = ref(props.path)
 // 当前存储
 const activeStorage = ref('local')
 // 刷新
-const refreshPending = ref(false)
+const refreshPending = ref(true)
 // axios实例
 const axiosInstance = ref<Axios>()
 
@@ -89,13 +84,14 @@ function storageChanged(storage: string) {
 
 function pathChanged(_path: string) {
   path.value = _path
+  console.log('Browser changePath', path.value)
   emit('change', path)
 }
 
 // 初始化
-onMounted(() => {
+onBeforeMount(() => {
   activeStorage.value = props.storage ?? 'local'
-  axiosInstance.value = props.axios ?? axios.create(props.axiosConfig)
+  axiosInstance.value = props.axios ?? axios.create(props.axiosconfig)
   if (!path.value)
     pathChanged('/')
 })
@@ -107,7 +103,7 @@ onMounted(() => {
       :path="path"
       :storages="storagesArray"
       :storage="activeStorage"
-      :endpoints="endpoints"
+      :endpoints="props.endpoints"
       :axios="axiosInstance"
       @storagechanged="storageChanged"
       @pathchanged="pathChanged"
@@ -136,10 +132,10 @@ onMounted(() => {
           :endpoints="endpoints"
           :axios="axiosInstance"
           :refreshpending="refreshPending"
-          @path-changed="pathChanged"
+          @pathchanged="pathChanged"
           @loading="loadingChanged"
           @refreshed="refreshPending = false"
-          @file-deleted="refreshPending = true"
+          @filedeleted="refreshPending = true"
         />
       </VCol>
     </VRow>
diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index 3dc0803f..f93d28f8 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -2,6 +2,7 @@
 import type { Axios } from 'axios'
 import type { PropType } from 'vue'
 import { useConfirm } from 'vuetify-use-dialog'
+import axios from 'axios'
 import { formatBytes } from '@core/utils/formatters'
 import type { EndPoints, FileItem } from '@/api/types'
 
@@ -18,20 +19,25 @@ const props = defineProps({
 // 对外事件
 const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted'])
 
+console.log('List Init Path', props.path)
+
 // 确认框
 const createConfirm = useConfirm()
 
+// axios实例
+const axiosInstance = ref<Axios>(props.axios ?? axios)
+
 // 内容列表
 const items = ref<FileItem[]>([])
 
 // 当前路径
-const path = ref(props.path ?? '')
+const path = ref(props.path)
 
 // 过滤条件
 const filter = ref('')
 
 // 存储空间类型
-const storage = ref(props.storage || '')
+const storage = ref(props.storage ?? '')
 
 // 是否正在加载
 const refreshPending = ref(props.refreshpending || false)
@@ -47,13 +53,14 @@ const files = computed(() =>
 )
 
 // 是否目录
-const isDir = computed(() => path.value.endsWith('/'))
+const isDir = computed(() => path.value?.endsWith('/'))
 
 // 是否文件
 const isFile = computed(() => !isDir.value)
 
 // 调API加载内容
 async function load() {
+  console.log('List load', path.value, isDir.value)
   if (isDir.value) {
     const url = props.endpoints?.list.url
       .replace(/{storage}/g, storage.value)
@@ -63,9 +70,9 @@ async function load() {
       url,
       method: props.endpoints?.list.method || 'get',
     }
-
-    const response = await props.axios?.request(config)
-    items.value = response?.data
+    console.log('List load', url, config)
+    // 加载数据
+    items.value = await axiosInstance.value.request(config) ?? []
   }
 }
 
@@ -75,7 +82,7 @@ async function deleteItem(item: FileItem) {
     title: '确认',
     content: `是否确认删除${
                 item.type === 'dir' ? '目录' : '文件'
-            }?<br><em>${item.basename}</em>?`,
+            } ${item.basename}？`,
     confirmationText: '确认',
     cancellationText: '取消',
     dialogProps: {
@@ -94,7 +101,7 @@ async function deleteItem(item: FileItem) {
       method: props.endpoints?.delete.method || 'post',
     }
 
-    await props.axios?.request(config)
+    await axiosInstance.value.request(config)
     emit('filedeleted')
     emit('loading', false)
   }
@@ -102,21 +109,26 @@ async function deleteItem(item: FileItem) {
 
 // 切换路径
 function changePath(path: string) {
+  console.log('List changePath', path)
   emit('pathchanged', path)
 }
 
 // 监听path变化
 watch(
-  () => path.value,
+  path,
   async () => {
+    console.log('List pathChanged', path.value)
     items.value = []
-    await load()
     if (refreshPending.value) {
       await load()
       emit('refreshed')
     }
   },
 )
+
+onMounted(() => {
+  load()
+})
 </script>
 
 <template>
@@ -139,19 +151,17 @@ watch(
         <VListItem
           v-for="(item, index) in dirs"
           :key="index"
-          class="pl-0"
+          class="pl-2"
           @click="changePath(item.path)"
         >
           <template #prepend>
             <VIcon icon="mdi-folder-outline" />
           </template>
-          <VListItemTitle v-text="item.basename" />
+          <VListItemTitle v-text="item.name" />
           <template #append>
-            <VBtn icon @click.stop="deleteItem(item)">
-              <VIcon color="grey lighten-1">
-                mdi-delete-outline
-              </VIcon>
-            </VBtn>
+            <IconBtn @click.stop="deleteItem(item)">
+              <VIcon icon="mdi-delete-outline" />
+            </IconBtn>
           </template>
         </VListItem>
       </VList>
@@ -161,22 +171,20 @@ watch(
         <VListItem
           v-for="(item, index) in files"
           :key="index"
-          class="pl-0"
+          class="pl-2"
           @click="changePath(item.path)"
         >
           <template #prepend>
             <VIcon v-if="props.icons" :icon="props.icons[item.extension.toLowerCase()] || props.icons?.other" />
           </template>
 
-          <VListItemTitle v-text="item.basename" />
+          <VListItemTitle v-text="item.name" />
           <VListItemSubtitle> {{ formatBytes(item.size) }}</VListItemSubtitle>
 
           <template #append>
-            <VBtn icon @click.stop="deleteItem(item)">
-              <VIcon color="grey lighten-1">
-                mdi-delete-outline
-              </VIcon>
-            </VBtn>
+            <IconBtn @click.stop="deleteItem(item)">
+              <VIcon icon="mdi-delete-outline" />
+            </IconBtn>
           </template>
         </VListItem>
       </VList>
diff --git a/src/components/filebrowser/Toolbar.vue b/src/components/filebrowser/Toolbar.vue
index e510b5dd..6e752539 100644
--- a/src/components/filebrowser/Toolbar.vue
+++ b/src/components/filebrowser/Toolbar.vue
@@ -52,6 +52,7 @@ function changeStorage(code: string) {
 
 // 路径变化
 function changePath(path: string) {
+  console.log('Toolbar changePath', path)
   emit('pathchanged', path)
 }
 
diff --git a/src/components/filebrowser/Tree.vue b/src/components/filebrowser/Tree.vue
index dfc79e8b..b970615f 100644
--- a/src/components/filebrowser/Tree.vue
+++ b/src/components/filebrowser/Tree.vue
@@ -38,8 +38,6 @@ function init() {
     children: [],
     size: 0,
   }]
-  if (props.path !== '')
-    emit('pathchanged', '')
 }
 
 // 调用API读取文件夹
@@ -54,9 +52,9 @@ async function readFolder(item: FileItem) {
     method: props.endpoints?.list.method || 'get',
   }
 
-  const response: any = await props.axios?.request(config)
+  const response: FileItem[] = await props.axios?.request(config) ?? []
 
-  item.children = response.data.map((item: FileItem) => {
+  item.children = response.map((item: FileItem) => {
     if (item.type === 'dir')
       item.children = []
 
@@ -68,6 +66,7 @@ async function readFolder(item: FileItem) {
 
 // 选中变化
 function activeChanged(_active: string[]) {
+  console.log('Tree changePath', _active)
   active.value = _active
   let path = ''
   if (active.value.length)
diff --git a/src/views/reorganize/FileBrowserView.vue b/src/views/reorganize/FileBrowserView.vue
index b5891289..424f3a96 100644
--- a/src/views/reorganize/FileBrowserView.vue
+++ b/src/views/reorganize/FileBrowserView.vue
@@ -1,9 +1,18 @@
 <script lang="ts" setup>
+import api from '@/api'
 import FileBrowser from '@/components/FileBrowser.vue'
+
+const initPath = ref('/Users/jxxghp/Downloads/爱情生活 (2020)/')
+
+const endpoints = {
+  list: { url: '/filebrowser/list?path={path}', method: 'get' },
+  mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'get' },
+  delete: { url: '/filebrowser/delete?path={path}', method: 'get' },
+}
 </script>
 
 <template>
   <div>
-    <FileBrowser storages="local" tree="true" path="/Users/jxxghp/Downloads/public" />
+    <FileBrowser storages="local" tree="true" :path="initPath" :endpoints="endpoints" :axios="api" />
   </div>
 </template>

From f4aef8f9dd358457e59959da1cde8e37a29de863 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 12:52:46 +0800
Subject: [PATCH 12/25] fix

---
 src/components/filebrowser/List.vue    |  5 +++--
 src/components/filebrowser/Toolbar.vue |  5 +++--
 src/components/filebrowser/Tree.vue    | 21 +++++++++++++--------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index f93d28f8..f9ea2bf0 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -108,8 +108,9 @@ async function deleteItem(item: FileItem) {
 }
 
 // 切换路径
-function changePath(path: string) {
-  console.log('List changePath', path)
+function changePath(_path: string) {
+  path.value = _path
+  console.log('List changePath', path.value)
   emit('pathchanged', path)
 }
 
diff --git a/src/components/filebrowser/Toolbar.vue b/src/components/filebrowser/Toolbar.vue
index 6e752539..9fe6132a 100644
--- a/src/components/filebrowser/Toolbar.vue
+++ b/src/components/filebrowser/Toolbar.vue
@@ -51,8 +51,9 @@ function changeStorage(code: string) {
 }
 
 // 路径变化
-function changePath(path: string) {
-  console.log('Toolbar changePath', path)
+function changePath(_path: string) {
+  path.value = _path
+  console.log('Toolbar changePath', path.value)
   emit('pathchanged', path)
 }
 
diff --git a/src/components/filebrowser/Tree.vue b/src/components/filebrowser/Tree.vue
index b970615f..af18586d 100644
--- a/src/components/filebrowser/Tree.vue
+++ b/src/components/filebrowser/Tree.vue
@@ -15,6 +15,9 @@ const props = defineProps({
 // 对外事件
 const emit = defineEmits(['pathchanged', 'loading', 'refreshed'])
 
+// 当前路径
+const path = ref(props.path)
+
 // 变量
 const open = ref<string[]>([])
 // 活跃的文件夹
@@ -99,17 +102,19 @@ watch(() => props.storage, () => {
 })
 
 // 监听路径变化
-watch(() => props.path, () => {
-  if (props.path) {
-    active.value = [props.path]
-    if (!open.value.includes(props.path))
-      open.value.push(props.path)
-  }
-})
+watch(
+  path,
+  () => {
+    if (props.path) {
+      active.value = [props.path]
+      if (!open.value.includes(props.path))
+        open.value.push(props.path)
+    }
+  })
 
 // 监听 refreshPending
 watch(
-  () => refreshPending.value,
+  refreshPending,
   async () => {
     if (refreshPending.value && props.path) {
       const item = findItem(props.path)

From e3df4000bb76fa50b3905ef4a4f91089a94d2464 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 14:30:51 +0800
Subject: [PATCH 13/25] fix FileManager

---
 src/api/types.ts                         |  1 +
 src/components/FileBrowser.vue           | 15 ++----
 src/components/filebrowser/List.vue      | 58 ++++++++++++++----------
 src/components/filebrowser/Toolbar.vue   | 25 +++++-----
 src/components/filebrowser/Tree.vue      | 13 ++----
 src/views/reorganize/FileBrowserView.vue |  5 +-
 6 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index d45f8281..02b12c62 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -903,6 +903,7 @@ export interface EndPoints {
   list: any
   mkdir: any
   delete: any
+  download: any
 }
 
 // 文件浏览项目
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index 827cfa79..02d4ea6a 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -12,17 +12,12 @@ const props = defineProps({
   storages: String,
   storage: String,
   path: String,
-  tree: String,
+  tree: Boolean,
   endpoints: Object as PropType<EndPoints>,
   axios: Object as PropType<Axios>,
   axiosconfig: Object,
 })
 
-// 事件f
-const emit = defineEmits(['change'])
-
-console.log('FileBrowser Init Path', props.path)
-
 const availableStorages = [
   {
     name: '本地',
@@ -53,14 +48,14 @@ const fileIcons = {
   other: 'mdi-file-outline',
 }
 
-// 加载次数
-const loading = ref(0)
 // 当前路径
 const path = ref(props.path)
+// 加载次数
+const loading = ref(0)
 // 当前存储
 const activeStorage = ref('local')
 // 刷新
-const refreshPending = ref(true)
+const refreshPending = ref(false)
 // axios实例
 const axiosInstance = ref<Axios>()
 
@@ -84,8 +79,6 @@ function storageChanged(storage: string) {
 
 function pathChanged(_path: string) {
   path.value = _path
-  console.log('Browser changePath', path.value)
-  emit('change', path)
 }
 
 // 初始化
diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index f9ea2bf0..a99c6c3e 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -19,8 +19,6 @@ const props = defineProps({
 // 对外事件
 const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted'])
 
-console.log('List Init Path', props.path)
-
 // 确认框
 const createConfirm = useConfirm()
 
@@ -30,18 +28,12 @@ const axiosInstance = ref<Axios>(props.axios ?? axios)
 // 内容列表
 const items = ref<FileItem[]>([])
 
-// 当前路径
-const path = ref(props.path)
-
 // 过滤条件
 const filter = ref('')
 
 // 存储空间类型
 const storage = ref(props.storage ?? '')
 
-// 是否正在加载
-const refreshPending = ref(props.refreshpending || false)
-
 // 目录过滤
 const dirs = computed(() =>
   items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)),
@@ -53,27 +45,27 @@ const files = computed(() =>
 )
 
 // 是否目录
-const isDir = computed(() => path.value?.endsWith('/'))
+const isDir = computed(() => props.path?.endsWith('/'))
 
 // 是否文件
 const isFile = computed(() => !isDir.value)
 
 // 调API加载内容
 async function load() {
-  console.log('List load', path.value, isDir.value)
+  emit('loading', true)
   if (isDir.value) {
     const url = props.endpoints?.list.url
       .replace(/{storage}/g, storage.value)
-      .replace(/{path}/g, path.value)
+      .replace(/{path}/g, props.path)
 
     const config = {
       url,
       method: props.endpoints?.list.method || 'get',
     }
-    console.log('List load', url, config)
     // 加载数据
     items.value = await axiosInstance.value.request(config) ?? []
   }
+  emit('loading', false)
 }
 
 // 删除项目
@@ -104,23 +96,41 @@ async function deleteItem(item: FileItem) {
     await axiosInstance.value.request(config)
     emit('filedeleted')
     emit('loading', false)
+    // 重新加载
+    load()
   }
 }
 
 // 切换路径
 function changePath(_path: string) {
-  path.value = _path
-  console.log('List changePath', path.value)
-  emit('pathchanged', path)
+  emit('pathchanged', _path)
+}
+
+// 新窗口中下载文件
+function download(path: string) {
+  if (!path)
+    return
+  const url = props.endpoints?.download.url
+    .replace(/{storage}/g, storage.value)
+    .replace(/{path}/g, path)
+  // FIXME 下载文件
+  window.open(url, '_blank')
 }
 
 // 监听path变化
 watch(
-  path,
+  () => props.path,
   async () => {
-    console.log('List pathChanged', path.value)
     items.value = []
-    if (refreshPending.value) {
+    await load()
+  },
+)
+
+// 监听refreshPending变化
+watch(
+  () => props.refreshpending,
+  async () => {
+    if (props.refreshpending) {
       await load()
       emit('refreshed')
     }
@@ -147,7 +157,7 @@ onMounted(() => {
       文件: {{ path }}
     </VCardText>
     <VCardText v-else-if="dirs.length || files.length" class="grow">
-      <VList v-if="dirs.length" subheader>
+      <VList v-if="dirs.length" subheader max-height="300">
         <VListSubheader>目录</VListSubheader>
         <VListItem
           v-for="(item, index) in dirs"
@@ -167,7 +177,7 @@ onMounted(() => {
         </VListItem>
       </VList>
       <VDivider v-if="dirs.length && files.length" />
-      <VList v-if="files.length" subheader>
+      <VList v-if="files.length" subheader max-height="300">
         <VListSubheader>文件</VListSubheader>
         <VListItem
           v-for="(item, index) in files"
@@ -203,8 +213,9 @@ onMounted(() => {
       空目录
     </VCardText>
     <VDivider v-if="path" />
-    <VToolbar v-if="path && isFile" density="compact" flat color="gray">
+    <VToolbar density="compact" flat color="gray">
       <VTextField
+        v-if="!isFile"
         v-model="filter"
         hide-details
         flat
@@ -214,10 +225,11 @@ onMounted(() => {
         prepend-inner-icon="mdi-filter-outline"
         class="me-2"
       />
-      <VBtn icon>
+      <VSpacer v-if="isFile" />
+      <VBtn v-if="isFile" @click="download(props.path || '')">
         <VIcon>mdi-download</VIcon>
       </VBtn>
-      <VBtn icon @click="load">
+      <VBtn v-if="!isFile" @click="load">
         <VIcon>mdi-refresh</VIcon>
       </VBtn>
     </VToolbar>
diff --git a/src/components/filebrowser/Toolbar.vue b/src/components/filebrowser/Toolbar.vue
index 9fe6132a..5e8d87d2 100644
--- a/src/components/filebrowser/Toolbar.vue
+++ b/src/components/filebrowser/Toolbar.vue
@@ -14,9 +14,6 @@ const inProps = defineProps({
 // 对外事件
 const emit = defineEmits(['storagechanged', 'pathchanged', 'loading', 'foldercreated'])
 
-// 当前路径
-const path = ref(inProps.path ?? '')
-
 // 新建文件夹名称
 const newFolderPopper = ref(false)
 
@@ -26,16 +23,16 @@ const newFolderName = ref('')
 // 计算PATH面包屑
 const pathSegments = computed(() => {
   let path_str = '/'
-  const isFolder = path.value.endsWith('/')
-  const segments = path.value.split('/').filter(item => item)
+  const isFolder = inProps.path?.endsWith('/')
+  const segments = inProps.path?.split('/').filter(item => item)
 
-  return segments.map((item, index) => {
+  return segments?.map((item, index) => {
     path_str += item + ((index < segments.length - 1 || isFolder) ? '/' : '')
     return {
       name: item,
       path: path_str,
     }
-  })
+  }) ?? []
 })
 
 const storageObject = computed(() => {
@@ -52,15 +49,13 @@ function changeStorage(code: string) {
 
 // 路径变化
 function changePath(_path: string) {
-  path.value = _path
-  console.log('Toolbar changePath', path.value)
-  emit('pathchanged', path)
+  emit('pathchanged', _path)
 }
 
 // 返回上一级
 function goUp() {
-  const segments = pathSegments.value
-  const path = segments.length === 1 ? '/' : segments[segments.length - 2].path
+  const segments = pathSegments.value ?? []
+  const path = segments?.length === 1 ? '/' : segments[segments.length - 2].path
   changePath(path)
 }
 
@@ -76,11 +71,15 @@ async function mkdir() {
     method: inProps.endpoints?.mkdir.method || 'post',
   }
 
+  // 调API
   await inProps.axios?.request(config)
-  emit('foldercreated', newFolderName.value)
+
   newFolderPopper.value = false
   newFolderName.value = ''
   emit('loading', false)
+
+  // 通知重新加载
+  emit('foldercreated')
 }
 </script>
 
diff --git a/src/components/filebrowser/Tree.vue b/src/components/filebrowser/Tree.vue
index af18586d..7e998432 100644
--- a/src/components/filebrowser/Tree.vue
+++ b/src/components/filebrowser/Tree.vue
@@ -15,9 +15,6 @@ const props = defineProps({
 // 对外事件
 const emit = defineEmits(['pathchanged', 'loading', 'refreshed'])
 
-// 当前路径
-const path = ref(props.path)
-
 // 变量
 const open = ref<string[]>([])
 // 活跃的文件夹
@@ -26,8 +23,6 @@ const active = ref<string[]>([])
 const items = ref<FileItem[]>([])
 // 过滤
 const filter = ref('')
-// 刷新状态
-const refreshPending = ref(props.refreshpending || false)
 
 // 方法
 function init() {
@@ -69,8 +64,6 @@ async function readFolder(item: FileItem) {
 
 // 选中变化
 function activeChanged(_active: string[]) {
-  console.log('Tree changePath', _active)
-  active.value = _active
   let path = ''
   if (active.value.length)
     path = active.value[0]
@@ -103,7 +96,7 @@ watch(() => props.storage, () => {
 
 // 监听路径变化
 watch(
-  path,
+  () => props.path,
   () => {
     if (props.path) {
       active.value = [props.path]
@@ -114,9 +107,9 @@ watch(
 
 // 监听 refreshPending
 watch(
-  refreshPending,
+  () => props.refreshpending,
   async () => {
-    if (refreshPending.value && props.path) {
+    if (props.refreshpending && props.path) {
       const item = findItem(props.path)
       if (item) {
         await readFolder(item)
diff --git a/src/views/reorganize/FileBrowserView.vue b/src/views/reorganize/FileBrowserView.vue
index 424f3a96..15d9f342 100644
--- a/src/views/reorganize/FileBrowserView.vue
+++ b/src/views/reorganize/FileBrowserView.vue
@@ -2,17 +2,18 @@
 import api from '@/api'
 import FileBrowser from '@/components/FileBrowser.vue'
 
-const initPath = ref('/Users/jxxghp/Downloads/爱情生活 (2020)/')
+const initPath = '/Users/jxxghp/Downloads/爱情生活 (2020)/'
 
 const endpoints = {
   list: { url: '/filebrowser/list?path={path}', method: 'get' },
   mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'get' },
   delete: { url: '/filebrowser/delete?path={path}', method: 'get' },
+  download: { url: '/filebrowser/download?path={path}', method: 'get' },
 }
 </script>
 
 <template>
   <div>
-    <FileBrowser storages="local" tree="true" :path="initPath" :endpoints="endpoints" :axios="api" />
+    <FileBrowser storages="local" :tree="false" :path="initPath" :endpoints="endpoints" :axios="api" />
   </div>
 </template>

From f2b51107faa0bd9ef347957dbbdea009cbd8dec1 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 14:50:35 +0800
Subject: [PATCH 14/25] fix FileManager

---
 src/App.vue                              | 19 ++++++++++++++++++-
 src/api/types.ts                         | 16 ++--------------
 src/components/filebrowser/List.vue      | 11 +++++++++++
 src/views/reorganize/FileBrowserView.vue | 10 +++++++---
 4 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5fd9dbad..4a905e41 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
 import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
 import api from './api'
-import type { User } from './api/types'
+import type { Setting, User } from './api/types'
 import store from './store'
 import avatar1 from '@images/avatars/avatar-1.png'
 
@@ -47,6 +47,9 @@ const accountInfo = ref<User>({
   avatar: avatar1,
 })
 
+// 环境设置信息
+const systemEnv = ref<Setting>()
+
 // 调用API，加载当前用户数据
 async function loadAccountInfo() {
   try {
@@ -61,14 +64,28 @@ 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)
+  }
+}
+
 // 页面加载时，加载当前用户数据
 onMounted(() => {
   loadAccountInfo()
+  loadSystemSettings()
   startSSEMessager()
 })
 
 // 提供给所有元素复用
 provide('accountInfo', accountInfo)
+provide('systemEnv', systemEnv)
 </script>
 
 <template>
diff --git a/src/api/types.ts b/src/api/types.ts
index 02b12c62..c1876679 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -833,20 +833,8 @@ export interface NotificationSwitch {
 
 // 环境设置
 export interface Setting {
-  // 媒体服务器 emby/jellyfin/plex
-  MEDIASERVER: string
-  // EMBY服务器地址，IP:PORT
-  EMBY_HOST: string
-  // EMBY Api Key
-  EMBY_API_KEY: string
-  // Jellyfin服务器地址，IP:PORT
-  JELLYFIN_HOST: string
-  // Jellyfin Api Key
-  JELLYFIN_API_KEY: string
-  // Plex服务器地址，IP:PORT
-  PLEX_HOST: string
-  // Plex Token
-  PLEX_TOKEN: string
+  // 下载目录
+  DOWNLOAD_PATH: string
 }
 
 // 自定义订阅
diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index a99c6c3e..291d1261 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -117,6 +117,11 @@ function download(path: string) {
   window.open(url, '_blank')
 }
 
+// 转移文件
+function transfer(item: FileItem) {
+  // TODO 转移文件
+}
+
 // 监听path变化
 watch(
   () => props.path,
@@ -170,6 +175,9 @@ onMounted(() => {
           </template>
           <VListItemTitle v-text="item.name" />
           <template #append>
+            <IconBtn @click.stop="transfer(item)">
+              <VIcon icon="mdi-folder-arrow-right" />
+            </IconBtn>
             <IconBtn @click.stop="deleteItem(item)">
               <VIcon icon="mdi-delete-outline" />
             </IconBtn>
@@ -193,6 +201,9 @@ onMounted(() => {
           <VListItemSubtitle> {{ formatBytes(item.size) }}</VListItemSubtitle>
 
           <template #append>
+            <IconBtn @click.stop="transfer(item)">
+              <VIcon icon="mdi-folder-arrow-right" />
+            </IconBtn>
             <IconBtn @click.stop="deleteItem(item)">
               <VIcon icon="mdi-delete-outline" />
             </IconBtn>
diff --git a/src/views/reorganize/FileBrowserView.vue b/src/views/reorganize/FileBrowserView.vue
index 15d9f342..1b9adbae 100644
--- a/src/views/reorganize/FileBrowserView.vue
+++ b/src/views/reorganize/FileBrowserView.vue
@@ -1,19 +1,23 @@
 <script lang="ts" setup>
 import api from '@/api'
+import type { Setting } from '@/api/types'
 import FileBrowser from '@/components/FileBrowser.vue'
 
-const initPath = '/Users/jxxghp/Downloads/爱情生活 (2020)/'
-
 const endpoints = {
   list: { url: '/filebrowser/list?path={path}', method: 'get' },
   mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'get' },
   delete: { url: '/filebrowser/delete?path={path}', method: 'get' },
   download: { url: '/filebrowser/download?path={path}', method: 'get' },
 }
+
+// 读取下载目录
+const systemEnv: Setting = inject('systemEnv') ?? {
+  DOWNLOAD_PATH: '/',
+}
 </script>
 
 <template>
   <div>
-    <FileBrowser storages="local" :tree="false" :path="initPath" :endpoints="endpoints" :axios="api" />
+    <FileBrowser storages="local" :tree="false" :path="systemEnv.DOWNLOAD_PATH" :endpoints="endpoints" :axios="api" />
   </div>
 </template>

From 3a9e85c82191d34d69ab1857260251f659e4d8ff Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 19:28:04 +0800
Subject: [PATCH 15/25] =?UTF-8?q?feat=20=E5=9B=BE=E7=89=87=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA&=E6=96=87=E4=BB=B6=E4=B8=8B=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                              |  6 ++---
 src/api/types.ts                         |  1 +
 src/components/FileBrowser.vue           |  4 +--
 src/components/filebrowser/List.vue      | 34 +++++++++++++++++++++---
 src/views/reorganize/FileBrowserView.vue |  6 ++++-
 5 files changed, 41 insertions(+), 10 deletions(-)

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(() => {
       选择目录或文件
     </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">
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 += '/'
 </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>

From e5f7467d5ba2b8dae5fc43681231f02ed51b44c6 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 19:58:36 +0800
Subject: [PATCH 16/25] =?UTF-8?q?fix=20=E9=87=8D=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/types.ts                         |   1 +
 src/components/FileBrowser.vue           |   1 +
 src/components/filebrowser/List.vue      | 110 +++++++++++++++++++----
 src/views/reorganize/FileBrowserView.vue |   1 +
 4 files changed, 95 insertions(+), 18 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index 2915004c..b8cc0977 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -893,6 +893,7 @@ export interface EndPoints {
   delete: any
   download: any
   image: any
+  rename: any
 }
 
 // 文件浏览项目
diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index ff365347..45333bad 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -129,6 +129,7 @@ onBeforeMount(() => {
           @loading="loadingChanged"
           @refreshed="refreshPending = false"
           @filedeleted="refreshPending = true"
+          @renamed="refreshPending = true"
         />
       </VCol>
     </VRow>
diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index 3d76bec9..3c59f261 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -8,7 +8,7 @@ import type { EndPoints, FileItem } from '@/api/types'
 import store from '@/store'
 
 // 输入参数
-const props = defineProps({
+const inProps = defineProps({
   icons: Object,
   storage: String,
   path: String,
@@ -18,13 +18,13 @@ const props = defineProps({
 })
 
 // 对外事件
-const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted'])
+const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted', 'renamed'])
 
 // 确认框
 const createConfirm = useConfirm()
 
 // axios实例
-const axiosInstance = ref<Axios>(props.axios ?? axios)
+const axiosInstance = ref<Axios>(inProps.axios ?? axios)
 
 // 内容列表
 const items = ref<FileItem[]>([])
@@ -32,8 +32,17 @@ const items = ref<FileItem[]>([])
 // 过滤条件
 const filter = ref('')
 
+// 重命名弹窗
+const renamePopper = ref(false)
+
+// 新名称
+const newName = ref('')
+
+// 当前名称
+const currentItem = ref<FileItem>()
+
 // 存储空间类型
-const storage = ref(props.storage ?? '')
+const storage = ref(inProps.storage ?? '')
 
 // 目录过滤
 const dirs = computed(() =>
@@ -46,14 +55,14 @@ const files = computed(() =>
 )
 
 // 是否目录
-const isDir = computed(() => props.path?.endsWith('/'))
+const isDir = computed(() => inProps.path?.endsWith('/'))
 
 // 是否文件
 const isFile = computed(() => !isDir.value)
 
 // 是否为图片文件
 const isImage = computed(() => {
-  const ext = props.path?.split('.').pop()?.toLowerCase()
+  const ext = inProps.path?.split('.').pop()?.toLowerCase()
   return ['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(ext ?? '')
 })
 
@@ -61,13 +70,13 @@ const isImage = computed(() => {
 async function load() {
   emit('loading', true)
   if (isDir.value) {
-    const url = props.endpoints?.list.url
+    const url = inProps.endpoints?.list.url
       .replace(/{storage}/g, storage.value)
-      .replace(/{path}/g, props.path)
+      .replace(/{path}/g, inProps.path)
 
     const config = {
       url,
-      method: props.endpoints?.list.method || 'get',
+      method: inProps.endpoints?.list.method || 'get',
     }
     // 加载数据
     items.value = await axiosInstance.value.request(config) ?? []
@@ -91,13 +100,13 @@ async function deleteItem(item: FileItem) {
 
   if (confirmed) {
     emit('loading', true)
-    const url = props.endpoints?.delete.url
+    const url = inProps.endpoints?.delete.url
       .replace(/{storage}/g, storage.value)
       .replace(/{path}/g, item.path)
 
     const config = {
       url,
-      method: props.endpoints?.delete.method || 'post',
+      method: inProps.endpoints?.delete.method || 'post',
     }
 
     await axiosInstance.value.request(config)
@@ -118,7 +127,7 @@ function download(path: string) {
   if (!path)
     return
   const token = store.state.auth.token
-  const url_path = props.endpoints?.download.url
+  const url_path = inProps.endpoints?.download.url
     .replace(/{storage}/g, storage.value)
     .replace(/{path}/g, path)
   const url = `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
@@ -131,7 +140,7 @@ function getImgLink(path: string) {
   if (!path)
     return ''
   const token = store.state.auth.token
-  const url_path = props.endpoints?.image.url
+  const url_path = inProps.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}`
@@ -142,9 +151,40 @@ function transfer(item: FileItem) {
   // TODO 转移文件
 }
 
+// 显示重命名弹窗
+function showRenmae(item: FileItem) {
+  currentItem.value = item
+  newName.value = item.name
+  renamePopper.value = true
+}
+
+// 重命名
+async function rename() {
+  emit('loading', true)
+  const url = inProps.endpoints?.rename.url
+    .replace(/{storage}/g, inProps.storage)
+    .replace(/{path}/g, currentItem.value?.path)
+    .replace(/{newname}/g, newName.value)
+
+  const config = {
+    url,
+    method: inProps.endpoints?.mkdir.method || 'post',
+  }
+
+  // 调API
+  await inProps.axios?.request(config)
+
+  renamePopper.value = false
+  newName.value = ''
+  emit('loading', false)
+
+  // 通知重新加载
+  emit('renamed')
+}
+
 // 监听path变化
 watch(
-  () => props.path,
+  () => inProps.path,
   async () => {
     items.value = []
     await load()
@@ -153,9 +193,9 @@ watch(
 
 // 监听refreshPending变化
 watch(
-  () => props.refreshpending,
+  () => inProps.refreshpending,
   async () => {
-    if (props.refreshpending) {
+    if (inProps.refreshpending) {
       await load()
       emit('refreshed')
     }
@@ -201,6 +241,9 @@ onMounted(() => {
           </template>
           <VListItemTitle v-text="item.name" />
           <template #append>
+            <IconBtn @click.stop="showRenmae(item)">
+              <VIcon icon="mdi-rename" />
+            </IconBtn>
             <IconBtn @click.stop="transfer(item)">
               <VIcon icon="mdi-folder-arrow-right" />
             </IconBtn>
@@ -220,13 +263,16 @@ onMounted(() => {
           @click="changePath(item.path)"
         >
           <template #prepend>
-            <VIcon v-if="props.icons" :icon="props.icons[item.extension.toLowerCase()] || props.icons?.other" />
+            <VIcon v-if="inProps.icons" :icon="inProps.icons[item.extension.toLowerCase()] || inProps.icons?.other" />
           </template>
 
           <VListItemTitle v-text="item.name" />
           <VListItemSubtitle> {{ formatBytes(item.size) }}</VListItemSubtitle>
 
           <template #append>
+            <IconBtn @click.stop="showRenmae(item)">
+              <VIcon icon="mdi-rename" />
+            </IconBtn>
             <IconBtn @click.stop="transfer(item)">
               <VIcon icon="mdi-folder-arrow-right" />
             </IconBtn>
@@ -263,7 +309,7 @@ onMounted(() => {
         class="me-2"
       />
       <VSpacer v-if="isFile" />
-      <VBtn v-if="isFile" @click="download(props.path || '')">
+      <VBtn v-if="isFile" @click="download(inProps.path || '')">
         <VIcon>mdi-download</VIcon>
       </VBtn>
       <VBtn v-if="!isFile" @click="load">
@@ -271,6 +317,34 @@ onMounted(() => {
       </VBtn>
     </VToolbar>
   </VCard>
+  <VDialog
+    v-model="renamePopper"
+    max-width="600"
+  >
+    <template #activator="{ props }">
+      <IconBtn title="重命名" v-bind="props">
+        <VIcon icon="mdi-rename-outline" />
+      </IconBtn>
+    </template>
+    <VCard title="重命名">
+      <VCardText>
+        <VTextField v-model="newName" label="名称" />
+      </VCardText>
+      <VCardActions>
+        <div class="flex-grow-1" />
+        <VBtn depressed @click="renamePopper = false">
+          取消
+        </VBtn>
+        <VBtn
+          :disabled="!newName"
+          depressed
+          @click="rename"
+        >
+          重命名
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/reorganize/FileBrowserView.vue b/src/views/reorganize/FileBrowserView.vue
index d05c7d0f..9d323a24 100644
--- a/src/views/reorganize/FileBrowserView.vue
+++ b/src/views/reorganize/FileBrowserView.vue
@@ -9,6 +9,7 @@ const endpoints = {
   delete: { url: '/filebrowser/delete?path={path}', method: 'get' },
   download: { url: '/filebrowser/download?path={path}', method: 'get' },
   image: { url: '/filebrowser/image?path={path}', method: 'get' },
+  rename: { url: '/filebrowser/rename?path={path}&new_name={newname}', method: 'get' },
 }
 
 // 读取下载目录

From e565ec5b62cc13baf401bf7bced7e4871705f205 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 20:01:31 +0800
Subject: [PATCH 17/25] fix

---
 src/components/filebrowser/List.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index 3c59f261..b4870e93 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -225,7 +225,7 @@ onMounted(() => {
       v-else-if="isFile && isImage"
       class="grow d-flex justify-center align-center"
     >
-      <VImg :src="getImgLink(path)" cover max-width="100%" max-height="100%" />
+      <VImg :src="getImgLink(path)" 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">

From d3fb71c289e4be0edb5a9eb850f4a5451e5d2321 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 20:23:24 +0800
Subject: [PATCH 18/25] fix ui

---
 src/components/filebrowser/List.vue | 66 +++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index b4870e93..25100167 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -23,6 +23,9 @@ const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted',
 // 确认框
 const createConfirm = useConfirm()
 
+// 存储空间类型
+const storage = ref(inProps.storage ?? '')
+
 // axios实例
 const axiosInstance = ref<Axios>(inProps.axios ?? axios)
 
@@ -35,14 +38,19 @@ const filter = ref('')
 // 重命名弹窗
 const renamePopper = ref(false)
 
+// 整理弹窗
+const transferPopper = ref(false)
+
 // 新名称
 const newName = ref('')
 
 // 当前名称
 const currentItem = ref<FileItem>()
 
-// 存储空间类型
-const storage = ref(inProps.storage ?? '')
+// TODO 文件转移表单
+const transferForm = ref({
+
+})
 
 // 目录过滤
 const dirs = computed(() =>
@@ -146,11 +154,6 @@ function getImgLink(path: string) {
   return `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
 }
 
-// 转移文件
-function transfer(item: FileItem) {
-  // TODO 转移文件
-}
-
 // 显示重命名弹窗
 function showRenmae(item: FileItem) {
   currentItem.value = item
@@ -182,6 +185,17 @@ async function rename() {
   emit('renamed')
 }
 
+// 显示整理对话框
+function showTransfer(item: FileItem) {
+  currentItem.value = item
+  transferPopper.value = true
+}
+
+// 整理文件
+function transfer() {
+  // TODO 整理文件
+}
+
 // 监听path变化
 watch(
   () => inProps.path,
@@ -208,7 +222,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard flat tile min-height="380" class="d-flex flex-column">
+  <VCard class="d-flex flex-column">
     <VCardText
       v-if="!path"
       class="grow d-flex justify-center align-center grey--text"
@@ -228,7 +242,7 @@ onMounted(() => {
       <VImg :src="getImgLink(path)" 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">
+      <VList v-if="dirs.length" subheader max-height="400">
         <VListSubheader>目录</VListSubheader>
         <VListItem
           v-for="(item, index) in dirs"
@@ -244,7 +258,7 @@ onMounted(() => {
             <IconBtn @click.stop="showRenmae(item)">
               <VIcon icon="mdi-rename" />
             </IconBtn>
-            <IconBtn @click.stop="transfer(item)">
+            <IconBtn @click.stop="showTransfer(item)">
               <VIcon icon="mdi-folder-arrow-right" />
             </IconBtn>
             <IconBtn @click.stop="deleteItem(item)">
@@ -254,7 +268,7 @@ onMounted(() => {
         </VListItem>
       </VList>
       <VDivider v-if="dirs.length && files.length" />
-      <VList v-if="files.length" subheader max-height="300">
+      <VList v-if="files.length" subheader max-height="400">
         <VListSubheader>文件</VListSubheader>
         <VListItem
           v-for="(item, index) in files"
@@ -273,7 +287,7 @@ onMounted(() => {
             <IconBtn @click.stop="showRenmae(item)">
               <VIcon icon="mdi-rename" />
             </IconBtn>
-            <IconBtn @click.stop="transfer(item)">
+            <IconBtn @click.stop="showTransfer(item)">
               <VIcon icon="mdi-folder-arrow-right" />
             </IconBtn>
             <IconBtn @click.stop="deleteItem(item)">
@@ -317,6 +331,7 @@ onMounted(() => {
       </VBtn>
     </VToolbar>
   </VCard>
+  <!-- 重命名弹窗 -->
   <VDialog
     v-model="renamePopper"
     max-width="600"
@@ -345,6 +360,33 @@ onMounted(() => {
       </VCardActions>
     </VCard>
   </VDialog>
+  <!-- 文件整理弹窗 -->
+  <VDialog
+    v-model="transferPopper"
+    max-width="600"
+  >
+    <template #activator="{ props }">
+      <IconBtn title="整理" v-bind="props">
+        <VIcon icon="mdi-folder-arrow-right-outline" />
+      </IconBtn>
+    </template>
+    <VCard title="文件整理">
+      <VCardText />
+      <VCardActions>
+        <div class="flex-grow-1" />
+        <VBtn depressed @click="transferPopper = false">
+          取消
+        </VBtn>
+        <VBtn
+          :disabled="!newName"
+          depressed
+          @click="transfer"
+        >
+          开始整理
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
 </template>
 
 <style lang="scss" scoped>

From 04f56692a5caa9d567719cd330c37d6d8189484e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 20:58:13 +0800
Subject: [PATCH 19/25] =?UTF-8?q?fix=20=E6=96=87=E4=BB=B6=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/filebrowser/List.vue    | 101 ++++++++++++++++++++++---
 src/components/filebrowser/Toolbar.vue |   2 +-
 2 files changed, 90 insertions(+), 13 deletions(-)

diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index 25100167..fa723411 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -216,6 +216,35 @@ watch(
   },
 )
 
+// 弹出菜单
+const dropdownItems = ref([
+  {
+    title: '重命名',
+    value: 1,
+    props: {
+      prependIcon: 'mdi-rename',
+      click: showRenmae,
+    },
+  },
+  {
+    title: '整理',
+    value: 2,
+    props: {
+      prependIcon: 'mdi-folder-arrow-right',
+      click: showTransfer,
+    },
+  },
+  {
+    title: '删除',
+    value: 3,
+    props: {
+      prependIcon: 'mdi-delete-outline',
+      color: 'error',
+      click: deleteItem,
+    },
+  },
+])
+
 onMounted(() => {
   load()
 })
@@ -231,7 +260,7 @@ onMounted(() => {
     </VCardText>
     <VCardText
       v-else-if="isFile && !isImage"
-      class="grow d-flex justify-center align-center"
+      class="grow d-flex justify-center align-center break-all"
     >
       文件: {{ path }}<br>
     </VCardText>
@@ -241,13 +270,13 @@ onMounted(() => {
     >
       <VImg :src="getImgLink(path)" 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="400">
+    <VCardText v-else-if="dirs.length || files.length" class="p-0">
+      <VList v-if="dirs.length" subheader>
         <VListSubheader>目录</VListSubheader>
         <VListItem
           v-for="(item, index) in dirs"
           :key="index"
-          class="pl-2"
+          class="px-3 pe-1"
           @click="changePath(item.path)"
         >
           <template #prepend>
@@ -255,25 +284,49 @@ onMounted(() => {
           </template>
           <VListItemTitle v-text="item.name" />
           <template #append>
-            <IconBtn @click.stop="showRenmae(item)">
+            <IconBtn class="d-sm-none">
+              <VIcon
+                icon="mdi-dots-vertical"
+              />
+              <VMenu
+                activator="parent"
+                close-on-content-click
+              >
+                <VList>
+                  <VListItem
+                    v-for="(menu, i) in dropdownItems"
+                    :key="i"
+                    variant="plain"
+                    :base-color="menu.props.color"
+                    @click.stop="menu.props.click(item)"
+                  >
+                    <template #prepend>
+                      <VIcon :icon="menu.props.prependIcon" />
+                    </template>
+                    <VListItemTitle v-text="menu.title" />
+                  </VListItem>
+                </VList>
+              </VMenu>
+            </IconBtn>
+            <IconBtn class="d-none d-sm-block" @click.stop="showRenmae(item)">
               <VIcon icon="mdi-rename" />
             </IconBtn>
-            <IconBtn @click.stop="showTransfer(item)">
+            <IconBtn class="d-none d-sm-block" @click.stop="showTransfer(item)">
               <VIcon icon="mdi-folder-arrow-right" />
             </IconBtn>
-            <IconBtn @click.stop="deleteItem(item)">
+            <IconBtn class="d-none d-sm-block" @click.stop="deleteItem(item)">
               <VIcon icon="mdi-delete-outline" />
             </IconBtn>
           </template>
         </VListItem>
       </VList>
       <VDivider v-if="dirs.length && files.length" />
-      <VList v-if="files.length" subheader max-height="400">
+      <VList v-if="files.length" subheader>
         <VListSubheader>文件</VListSubheader>
         <VListItem
           v-for="(item, index) in files"
           :key="index"
-          class="pl-2"
+          class="pl-3 pe-1"
           @click="changePath(item.path)"
         >
           <template #prepend>
@@ -284,13 +337,37 @@ onMounted(() => {
           <VListItemSubtitle> {{ formatBytes(item.size) }}</VListItemSubtitle>
 
           <template #append>
-            <IconBtn @click.stop="showRenmae(item)">
+            <IconBtn class="d-sm-none">
+              <VIcon
+                icon="mdi-dots-vertical"
+              />
+              <VMenu
+                activator="parent"
+                close-on-content-click
+              >
+                <VList>
+                  <VListItem
+                    v-for="(menu, i) in dropdownItems"
+                    :key="i"
+                    variant="plain"
+                    :base-color="menu.props.color"
+                    @click.stop="menu.props.click(item)"
+                  >
+                    <template #prepend>
+                      <VIcon :icon="menu.props.prependIcon" />
+                    </template>
+                    <VListItemTitle v-text="menu.title" />
+                  </VListItem>
+                </VList>
+              </VMenu>
+            </IconBtn>
+            <IconBtn class="d-none d-sm-block" @click.stop="showRenmae(item)">
               <VIcon icon="mdi-rename" />
             </IconBtn>
-            <IconBtn @click.stop="showTransfer(item)">
+            <IconBtn class="d-none d-sm-block" @click.stop="showTransfer(item)">
               <VIcon icon="mdi-folder-arrow-right" />
             </IconBtn>
-            <IconBtn @click.stop="deleteItem(item)">
+            <IconBtn class="d-none d-sm-block" @click.stop="deleteItem(item)">
               <VIcon icon="mdi-delete-outline" />
             </IconBtn>
           </template>
diff --git a/src/components/filebrowser/Toolbar.vue b/src/components/filebrowser/Toolbar.vue
index 5e8d87d2..ebd0954a 100644
--- a/src/components/filebrowser/Toolbar.vue
+++ b/src/components/filebrowser/Toolbar.vue
@@ -85,7 +85,7 @@ async function mkdir() {
 
 <template>
   <VToolbar flat dense>
-    <VToolbarItems>
+    <VToolbarItems class="overflow-hidden">
       <VMenu v-if="inProps.storages?.length || 0 > 1" offset-y>
         <template #activator="{ props }">
           <VBtn v-bind="props">

From 5e2d144828ba406e29b8fea5706a59d6db729bc5 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 26 Aug 2023 23:52:15 +0800
Subject: [PATCH 20/25] =?UTF-8?q?fix=20=E6=89=8B=E5=8A=A8=E6=95=B4?=
 =?UTF-8?q?=E7=90=86UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/filebrowser/List.vue | 160 ++++++++++++++++++++++++++--
 1 file changed, 152 insertions(+), 8 deletions(-)

diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index fa723411..d0522cfa 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -3,9 +3,12 @@ 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 { numberValidator } from '@/@validators'
 import { formatBytes } from '@core/utils/formatters'
 import type { EndPoints, FileItem } from '@/api/types'
 import store from '@/store'
+import api from '@/api'
 
 // 输入参数
 const inProps = defineProps({
@@ -20,6 +23,9 @@ const inProps = defineProps({
 // 对外事件
 const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted', 'renamed'])
 
+// 提示框
+const $toast = useToast()
+
 // 确认框
 const createConfirm = useConfirm()
 
@@ -47,11 +53,30 @@ const newName = ref('')
 // 当前名称
 const currentItem = ref<FileItem>()
 
-// TODO 文件转移表单
-const transferForm = ref({
+// 文件转移表单
+const transferForm = reactive({
+  path: '',
+  target: '',
+  tmdbid: 0,
+  season: 0,
+  type_name: '电影',
+  transfer_type: '',
+  episode_format: '',
+  episode_detail: '',
+  episode_part: '',
+  episode_offset: null,
+  min_filesize: 0,
 
 })
 
+// 生成1到50季的下拉框选项
+const seasonItems = ref(
+  Array.from({ length: 50 }, (_, i) => i + 1).map(item => ({
+    title: `第 ${item} 季`,
+    value: item,
+  })),
+)
+
 // 目录过滤
 const dirs = computed(() =>
   items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)),
@@ -192,8 +217,26 @@ function showTransfer(item: FileItem) {
 }
 
 // 整理文件
-function transfer() {
-  // TODO 整理文件
+async function transfer() {
+  transferForm.path = currentItem.value?.path || ''
+  // 开始整理文件
+  try {
+    const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
+      params: transferForm,
+    })
+    transferPopper.value = false
+    if (result.success) {
+      $toast.success(`${currentItem.value?.name} 整理成功！`)
+      // 重新加载
+      load()
+    }
+    else {
+      $toast.error(`${currentItem.value?.name} 整理失败：${result.message}！`)
+    }
+  }
+  catch (e) {
+    console.log(e)
+  }
 }
 
 // 监听path变化
@@ -440,22 +483,123 @@ onMounted(() => {
   <!-- 文件整理弹窗 -->
   <VDialog
     v-model="transferPopper"
-    max-width="600"
+    max-width="800"
   >
     <template #activator="{ props }">
       <IconBtn title="整理" v-bind="props">
         <VIcon icon="mdi-folder-arrow-right-outline" />
       </IconBtn>
     </template>
-    <VCard title="文件整理">
-      <VCardText />
+    <VCard :title="`文件整理 - ${currentItem?.name}`">
+      <VCardText>
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <VCol
+              cols="12"
+              md="8"
+            >
+              <VTextField
+                v-model="transferForm.target"
+                label="目的路径"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <VSelect
+                v-model="transferForm.transfer_type"
+                label="整理方式"
+                :items="[
+                  { title: '默认', value: '' },
+                  { title: '移动', value: 'move' },
+                  { title: '复制', value: 'copy' },
+                  { title: '硬链接', value: 'link' },
+                  { title: '软链接', value: 'softlink' },
+                ]"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <VSelect
+                v-model="transferForm.type_name"
+                label="类型"
+                :items="[{ title: '电影', value: '电影' }, { title: '电视剧', value: '电视剧' }]"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <VTextField
+                v-model="transferForm.tmdbid"
+                label="TMDBID"
+                :rules="[numberValidator]"
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              md="4"
+            >
+              <VSelect
+                v-show="transferForm.type_name === '电视剧'"
+                v-model.number="transferForm.season"
+                label="季"
+                :items="seasonItems"
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12" md="8">
+              <VTextField
+                v-model="transferForm.episode_format"
+                label="集数定位"
+                placeholder="使用{ep}定位集数"
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model="transferForm.episode_detail"
+                label="指定集数"
+                placeholder="起始集,终止集，如1或1,2"
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model="transferForm.episode_part"
+                label="指定Part"
+                placeholder="如part1"
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model.number="transferForm.episode_offset"
+                label="集数偏移"
+                placeholder="如-10"
+              />
+            </VCol>
+            <VCol cols="12" md="4">
+              <VTextField
+                v-model.number="transferForm.min_filesize"
+                label="最小文件大小（MB）"
+                :rules="[numberValidator]"
+                placeholder="0"
+              />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
       <VCardActions>
         <div class="flex-grow-1" />
         <VBtn depressed @click="transferPopper = false">
           取消
         </VBtn>
         <VBtn
-          :disabled="!newName"
+          :disabled="!transferForm.tmdbid"
           depressed
           @click="transfer"
         >

From 51816da3d3c7ee9b722d50eca002cf96cc671bdd Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 27 Aug 2023 08:46:32 +0800
Subject: [PATCH 21/25] v1.0.8

---
 package.json                           | 2 +-
 src/components/filebrowser/Toolbar.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 75284d0f..2f63814d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moviepilot",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "scripts": {
     "dev": "vite --host",
diff --git a/src/components/filebrowser/Toolbar.vue b/src/components/filebrowser/Toolbar.vue
index ebd0954a..57c3f591 100644
--- a/src/components/filebrowser/Toolbar.vue
+++ b/src/components/filebrowser/Toolbar.vue
@@ -22,7 +22,7 @@ const newFolderName = ref('')
 
 // 计算PATH面包屑
 const pathSegments = computed(() => {
-  let path_str = '/'
+  let path_str = ''
   const isFolder = inProps.path?.endsWith('/')
   const segments = inProps.path?.split('/').filter(item => item)
 

From 8b893dc6f2acfcbb70e7904ee78a530815767c85 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 27 Aug 2023 09:23:13 +0800
Subject: [PATCH 22/25] fix ui

---
 src/components/filebrowser/List.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index d0522cfa..8f7de8e2 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -484,6 +484,7 @@ onMounted(() => {
   <VDialog
     v-model="transferPopper"
     max-width="800"
+    scrollable
   >
     <template #activator="{ props }">
       <IconBtn title="整理" v-bind="props">

From c94add8d6b989ff7e99fbfe8f91ec4cab42e5234 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 27 Aug 2023 09:35:49 +0800
Subject: [PATCH 23/25] fix ui

---
 src/components/filebrowser/List.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index 8f7de8e2..f935c8ba 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -26,6 +26,9 @@ const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted',
 // 提示框
 const $toast = useToast()
 
+// 是否正在加载
+const loading = ref(true)
+
 // 确认框
 const createConfirm = useConfirm()
 
@@ -101,6 +104,7 @@ const isImage = computed(() => {
 
 // 调API加载内容
 async function load() {
+  loading.value = true
   emit('loading', true)
   if (isDir.value) {
     const url = inProps.endpoints?.list.url
@@ -115,6 +119,7 @@ async function load() {
     items.value = await axiosInstance.value.request(config) ?? []
   }
   emit('loading', false)
+  loading.value = false
 }
 
 // 删除项目
@@ -295,6 +300,16 @@ onMounted(() => {
 
 <template>
   <VCard class="d-flex flex-column">
+    <VCardText
+      v-if="loading"
+      class="text-center flex flex-col items-center"
+    >
+      <VProgressCircular
+        size="48"
+        indeterminate
+        color="primary"
+      />
+    </VCardText>
     <VCardText
       v-if="!path"
       class="grow d-flex justify-center align-center grey--text"
@@ -424,13 +439,13 @@ onMounted(() => {
       没有目录或文件
     </VCardText>
     <VCardText
-      v-else
+      v-else-if="!loading"
       class="grow d-flex justify-center align-center grey--text py-5"
     >
       空目录
     </VCardText>
     <VDivider v-if="path" />
-    <VToolbar density="compact" flat color="gray">
+    <VToolbar v-if="!loading" density="compact" flat color="gray">
       <VTextField
         v-if="!isFile"
         v-model="filter"

From 2396a6b5fcb7a4a90ec057aa3617470a00b14484 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 27 Aug 2023 09:40:08 +0800
Subject: [PATCH 24/25] fix ui

---
 src/components/filebrowser/List.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index f935c8ba..00bdf23a 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -226,10 +226,10 @@ async function transfer() {
   transferForm.path = currentItem.value?.path || ''
   // 开始整理文件
   try {
+    transferPopper.value = false
     const result: { [key: string]: any } = await api.post('transfer/manual', {}, {
       params: transferForm,
     })
-    transferPopper.value = false
     if (result.success) {
       $toast.success(`${currentItem.value?.name} 整理成功！`)
       // 重新加载

From 25a8d0cc2a7a518b7b624a86f2b4ff94621728cb Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 27 Aug 2023 10:06:19 +0800
Subject: [PATCH 25/25] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20List.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/filebrowser/List.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue
index 00bdf23a..d79a78e2 100644
--- a/src/components/filebrowser/List.vue
+++ b/src/components/filebrowser/List.vue
@@ -507,7 +507,7 @@ onMounted(() => {
       </IconBtn>
     </template>
     <VCard :title="`文件整理 - ${currentItem?.name}`">
-      <VCardText>
+      <VCardText class="pt-2">
         <VForm @submit.prevent="() => {}">
           <VRow>
             <VCol