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] 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,
+          },
+        },
       ],
     },
     {