From 6b75490d7cf567815c930641359b4e5499943270 Mon Sep 17 00:00:00 2001
From: saltbo <saltbo@foxmail.com>
Date: Thu, 13 Jan 2022 22:52:38 +0800
Subject: [PATCH 1/5] feat: support responsive for the left menu #22

---
 package.json                    |  1 +
 src/components/Topbar/index.vue | 72 +++++++++++++++++++++++++++------
 src/main.js                     |  1 +
 src/plugins/buefy.js            |  5 +++
 src/views/home/index.vue        | 46 +++++++++++++++++----
 yarn.lock                       | 12 ++++++
 6 files changed, 118 insertions(+), 19 deletions(-)
 create mode 100644 src/plugins/buefy.js

diff --git a/package.json b/package.json
index f96b345..6c3da89 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@vue/cli-plugin-eslint": "^3.12.0",
     "@vue/cli-service": "^3.12.0",
     "axios": "^0.21.1",
+    "buefy": "^0.9.14",
     "clipboard": "^2.0.8",
     "el-table-infinite-scroll": "^1.0.10",
     "element-ui": "^2.15.5",
diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/index.vue
index 1aa9946..6a95545 100644
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/index.vue
@@ -1,20 +1,41 @@
 <template>
   <el-header>
-    <div class="logo">
-      <img src="@/assets/logo.png" alt="ZPan" @click="$router.push('/')" />
+    <div class="logo" @click="onLogoClick">
+      <img src="@/assets/logo.png" alt="ZPan" />
     </div>
-    <el-menu v-if="showMenu" class="navbar" :default-active="menuActive" mode="horizontal" style="width: 100%" router>
-      <el-menu-item v-for="(menu, index) in menus.slice(0, 5)" :key="index" :index="`/${menu.name}`">{{ menu.title }}</el-menu-item>
+    <el-menu
+      v-if="showMenu"
+      class="navbar"
+      :default-active="menuActive"
+      mode="horizontal"
+      style="width: 100%"
+      router
+    >
+      <el-menu-item
+        v-for="(menu, index) in menus.slice(0, 5)"
+        :key="index"
+        :index="`/${menu.name}`"
+      >{{ menu.title }}</el-menu-item>
 
       <el-submenu index="more" v-show="menus.length > 5">
         <template slot="title">更多</template>
-        <el-menu-item v-for="(menu, index) in menus.slice(5)" :key="index" :index="menu.path">{{ menu.title }}</el-menu-item>
+        <el-menu-item
+          v-for="(menu, index) in menus.slice(5)"
+          :key="index"
+          :index="menu.path"
+        >{{ menu.title }}</el-menu-item>
       </el-submenu>
     </el-menu>
 
     <div v-if="logined" style="position: absolute; right: 20px">
       <!-- 音乐播放器 -->
-      <el-popover v-if="alistVisible" ref="alist" placement="top" width="500" style="margin-right: 20px">
+      <el-popover
+        v-if="alistVisible"
+        ref="alist"
+        placement="top"
+        width="500"
+        style="margin-right: 20px"
+      >
         <i slot="reference" class="el-icon-service"></i>
 
         <zp-aplayer ref="aplayer"></zp-aplayer>
@@ -26,11 +47,19 @@
           <el-badge v-show="ulistTotal" :value="ulistTotal" style="top: -15px"></el-badge>
         </i>
 
-        <zp-uploader ref="uploader" @uploadAdded="$refs.ulist.doShow()" @utotal-change="onUTotalChange"></zp-uploader>
+        <zp-uploader
+          ref="uploader"
+          @uploadAdded="$refs.ulist.doShow()"
+          @utotal-change="onUTotalChange"
+        ></zp-uploader>
       </el-popover>
 
       <el-dropdown trigger="click" @command="onDropdown" @visible-change="onVisible">
-        <el-avatar :size="30" :src="profile.avatar" style="vertical-align: middle; margin-right: 4px"></el-avatar>
+        <el-avatar
+          :size="30"
+          :src="profile.avatar"
+          style="vertical-align: middle; margin-right: 4px"
+        ></el-avatar>
         <span>{{ profile.nickname }}</span>
         <el-dropdown-menu slot="dropdown" style="width: 200px">
           <div style="margin: auto 20px">
@@ -43,13 +72,26 @@
                 <span style="float: right">{{ storage.percentage }}%</span>
               </p>
               <el-progress :percentage="storage.percentage" :show-text="false"></el-progress>
-              <p style="color: rgba(0, 0, 0, 0.54); font-size: 0.75rem">{{ storage.used }}/{{ storage.max }}</p>
+              <p
+                style="color: rgba(0, 0, 0, 0.54); font-size: 0.75rem"
+              >{{ storage.used }}/{{ storage.max }}</p>
             </el-row>
           </div>
 
-          <el-dropdown-item icon="el-icon-setting" command="profile" divided>{{ $t("topbar.settings") }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-set-up" command="admin" v-show="showAdmin">{{ $t("topbar.s-platform") }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-switch-button" command="signout">{{ $t("topbar.signout") }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-setting"
+            command="profile"
+            divided
+          >{{ $t("topbar.settings") }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-set-up"
+            command="admin"
+            v-show="showAdmin"
+          >{{ $t("topbar.s-platform") }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-switch-button"
+            command="signout"
+          >{{ $t("topbar.signout") }}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -101,6 +143,12 @@ export default {
     },
   },
   methods: {
+    onLogoClick() {
+      this.$emit('logoClick');
+      if (this.$route.path == '/admin') {
+        this.$router.push('/')
+      }
+    },
     onRouteChange(newVal, oldVal) {
       if (this.logined) {
         this.userInfo();
diff --git a/src/main.js b/src/main.js
index 26df322..e52209e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import i18n from './i18n'
 import store from './store'
 import router from './router'
 import './plugins/axios'
+import './plugins/buefy'
 import './plugins/moment'
 import './plugins/element'
 import './plugins/fileexplorer'
diff --git a/src/plugins/buefy.js b/src/plugins/buefy.js
new file mode 100644
index 0000000..0b8ee14
--- /dev/null
+++ b/src/plugins/buefy.js
@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Buefy from 'buefy'
+import 'buefy/dist/buefy.css'
+
+Vue.use(Buefy)
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 37108d0..718dfc3 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,9 +1,9 @@
 <template>
   <section>
-    <Topbar ref="topbar" :menus="$store.state.storages" logined />
+    <Topbar ref="topbar" :menus="$store.state.storages" logined @logoClick="onLogoClick" />
     <el-container style="height: 100%">
-      <el-aside width="200px" style="height: 100%; background-color: #f4f4f5">
-        <el-menu :default-active="leftMenuActive" background-color="#f4f4f5" router>
+      <el-aside width="200px" class="menu" v-bind:class="{ 'menu-open': menuActive }">
+        <el-menu :default-active="leftMenuActive" background-color="#f4f4f5" @select="onLogoClick" router>
           <el-menu-item v-for="menu in leftMenus" :key="menu.path" :index="menu.path">
             <i :class="menu.icon"></i>
             <span slot="title">{{ menu.title }}</span>
@@ -13,8 +13,9 @@
         <!-- <div class="copyright">
         <span>Powered by</span>
         <a href="https://github.com/saltbo/zpan" target="_blank">ZPan</a>
-      </div>-->
+        </div>-->
       </el-aside>
+      <div class="menu-bg-mask" v-bind:class="{ 'mask-open': menuActive }"></div>
 
       <el-main style="height: calc(100% - 65px)">
         <router-view @upload-action="onUploadClick" @audio-open="onAudioOpen"></router-view>
@@ -54,7 +55,9 @@ export default {
     });
   },
   data() {
-    return {};
+    return {
+      menuActive: false,
+    };
   },
   computed: {
     currentBucket() {
@@ -84,7 +87,7 @@ export default {
     },
   },
   watch: {
-    $route(newVal, oldVal) {},
+    $route(newVal, oldVal) { },
   },
   methods: {
     onUploadClick(obj) {
@@ -93,8 +96,11 @@ export default {
     onAudioOpen(obj, link) {
       this.$refs.topbar.AplayerOpen(obj, link);
     },
+    onLogoClick() {
+      this.menuActive = !this.menuActive
+    }
   },
-  mounted() {},
+  mounted() { },
 };
 </script>
 
@@ -122,4 +128,30 @@ export default {
   outline: 0;
   background-color: #eaeaea !important;
 }
+.menu {
+  width: 200px;
+  height: 100%;
+  background-color: #f4f4f5;
+}
+
+@media (max-width: 480px) {
+  .menu {
+    width: 0 !important;
+  }
+  .menu-open {
+    position: fixed;
+    width: 200px !important;
+    z-index: 999;
+  }
+
+  .menu-bg-mask {
+    height: 100%;
+    position: absolute;
+    background: rgba(1, 1, 1, 0.4);
+    z-index: 998;
+  }
+  .mask-open{
+    width: 100%;
+  }
+}
 </style>
diff --git a/yarn.lock b/yarn.lock
index 06394b2..6665237 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2346,6 +2346,13 @@ browserslist@^4.17.1, browserslist@^4.3.4:
     nanocolors "^0.2.12"
     node-releases "^1.1.76"
 
+buefy@^0.9.14:
+  version "0.9.14"
+  resolved "https://registry.npmmirror.com/buefy/download/buefy-0.9.14.tgz#f0441ece5255fa757bf9956761415341d18fe68b"
+  integrity sha512-4+8xLQBHm7H+XmCNXvEmFY01gYHvGIkMGBLxcCpbumrt5Eyj21JP7I6G313tLaT2XDk06IiNSnqgPxzFExHPjQ==
+  dependencies:
+    bulma "0.9.3"
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -2383,6 +2390,11 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
+bulma@0.9.3:
+  version "0.9.3"
+  resolved "https://registry.npmmirror.com/bulma/download/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
+  integrity sha1-3cy3Q26+PiG/R6/gHTxDopa3AkM=
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"

From 7738483d0fc92be37ba22a5e4371f1e5a19b7ef1 Mon Sep 17 00:00:00 2001
From: saltbo <saltbo@foxmail.com>
Date: Sun, 16 Jan 2022 21:01:13 +0800
Subject: [PATCH 2/5] refactor: redev the FileExplorer by vuetify to support
 responsive

---
 package.json                                  |  11 +-
 src/components/FileExplorer/FileExplorer.vue  |  75 ++++++-
 .../FileExplorer/explorer/GridExplorer.vue    |   5 +-
 .../FileExplorer/explorer/TableExplorer.vue   | 152 ++++++++++++++
 src/components/FileExplorer/explorer/mixin.js |  54 +----
 src/main.js                                   |   3 +-
 src/plugins/buefy.js                          |   5 -
 src/plugins/vuetify.js                        |   7 +
 src/template/index.ejs                        |   2 +
 src/views/home/index.vue                      |  84 ++++++--
 vue.config.js                                 |   6 +-
 yarn.lock                                     | 198 +++++++++++++++---
 12 files changed, 481 insertions(+), 121 deletions(-)
 create mode 100644 src/components/FileExplorer/explorer/TableExplorer.vue
 delete mode 100644 src/plugins/buefy.js
 create mode 100644 src/plugins/vuetify.js

diff --git a/package.json b/package.json
index 6c3da89..a2e5f30 100644
--- a/package.json
+++ b/package.json
@@ -8,13 +8,15 @@
     "dev": "vue-cli-service serve",
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
+  "dependencies": {
+    "vuetify": "^2.4.0"
+  },
   "devDependencies": {
     "@kangc/v-md-editor": "^1.7.7",
     "@vue/cli-plugin-babel": "^3.12.0",
     "@vue/cli-plugin-eslint": "^3.12.0",
     "@vue/cli-service": "^3.12.0",
     "axios": "^0.21.1",
-    "buefy": "^0.9.14",
     "clipboard": "^2.0.8",
     "el-table-infinite-scroll": "^1.0.10",
     "element-ui": "^2.15.5",
@@ -23,16 +25,20 @@
     "js-yaml": "^4.1.0",
     "moment": "^2.29.1",
     "photoswipe": "^4.1.3",
+    "sass": "~1.32.0",
+    "sass-loader": "^10.0.0",
     "stylus": "^0.54.8",
     "stylus-loader": "3.0.2",
     "vue": "^2.6.14",
     "vue-aplayer": "^1.6.1",
+    "vue-cli-plugin-vuetify": "^2.4.5",
     "vue-i18n": "^8.25.0",
     "vue-pdf-app": "^2.1.0",
     "vue-plyr": "6.0.4",
     "vue-router": "^3.5.2",
     "vue-template-compiler": "^2.6.14",
     "vue-upload-component": "^2.8.22",
+    "vuetify-loader": "^1.7.0",
     "vuex": "^3.6.2"
   },
   "eslintConfig": {
@@ -59,6 +65,5 @@
     "last 2 versions"
   ],
   "license": "GPL-3.0",
-  "repository": "git@github.com:saltbo/zpan-front.git",
-  "dependencies": {}
+  "repository": "git@github.com:saltbo/zpan-front.git"
 }
diff --git a/src/components/FileExplorer/FileExplorer.vue b/src/components/FileExplorer/FileExplorer.vue
index 9bd3ec2..8e69cca 100644
--- a/src/components/FileExplorer/FileExplorer.vue
+++ b/src/components/FileExplorer/FileExplorer.vue
@@ -2,24 +2,39 @@
   <div style="height: 100%">
     <el-row class="header">
       <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
-        <el-breadcrumb-item v-for="item in breadcrumb" :key="item.dir" :index="item.dir" :to="buildQuery(item.dir)">{{ item.name }}</el-breadcrumb-item>
+        <el-breadcrumb-item
+          v-for="item in breadcrumb"
+          :key="item.dir"
+          :index="item.dir"
+          :to="buildQuery(item.dir)"
+        >{{ item.name }}</el-breadcrumb-item>
       </el-breadcrumb>
       <span class="loadtips" style="float: right">{{ loadedtips }}</span>
     </el-row>
 
     <!-- explorer -->
-    <GridExplorer v-model="rows" :loading="loading" :moreButtons="moreButtons" @on-click="onClick" v-if="layout == 'grid'" />
-    <ListExplorer v-model="rows" :loading="loading" :rowButtons="rowButtons" :moreButtons="moreButtons" @on-click="onClick" @scroll-end="onScrollEnd" @selection-change="onSelectionChange" v-else />
+    <TableExplorer
+      v-model="rows"
+      :loading="loading"
+      @on-click="onClick"
+      @scroll-end="onScrollEnd"
+      v-if="layout == 'list'"
+    />
+    <GridExplorer v-model="rows" :loading="loading" @on-click="onClick" v-if="layout == 'grid'" />
+    <!-- <ListExplorer v-model="rows" :loading="loading" :rowButtons="rowButtons" :moreButtons="moreButtons" @on-click="onClick" @scroll-end="onScrollEnd" @selection-change="onSelectionChange" v-else /> -->
   </div>
 </template>
 
 <script>
+import elTableInfiniteScroll from "el-table-infinite-scroll";
 import GridExplorer from "./explorer/GridExplorer";
 import ListExplorer from "./explorer/ListExplorer";
+import TableExplorer from "./explorer/TableExplorer";
 export default {
   components: {
     GridExplorer,
     ListExplorer,
+    TableExplorer,
   },
   props: {
     layout: {
@@ -53,6 +68,9 @@ export default {
         this.listRefresh();
       }
     },
+    rows(nv) {
+      this.$emit("selection-change", nv.filter(el => el.selected == true));
+    }
   },
   computed: {
     breadcrumb() {
@@ -88,7 +106,7 @@ export default {
       this.listRefresh();
     },
     onSelectionChange(selection) {
-      this.$emit("selection-change", selection);
+      // this.$emit("selection-change", selection);
     },
     onScrollEnd() {
       if (this.total != 0 && this.rows.length == this.total) {
@@ -98,6 +116,52 @@ export default {
 
       this.listRefresh(this.offset, this.limit);
     },
+    buildIcon(matter) {
+      if (matter.dirtype > 0) {
+        matter.icon = { name: 'folder', color: '#ffc402' }
+        return matter
+      }
+
+
+      let type = matter.type
+      let [t1, t2] = type.split('/')
+      console.log(type, '=>', t1, t2)
+
+      let t1Icons = {
+        audio: { name: 'book-music', color: 'rgb(55, 159, 211)' },
+        video: { name: 'file-video', color: 'rgb(128, 149, 255)' },
+        image: { name: 'file-image', color: 'rgb(18, 150, 219)' },
+        text: { name: 'file-document', color: 'rgb(13, 71, 161)' },
+        zip: { name: 'zip-box', color: 'rgb(244, 196, 70)' },
+        'x-zip': { name: 'zip-box', color: 'rgb(244, 196, 70)' },
+        json: { name: 'code-json', color: '' },
+        xml: { name: 'xml', color: '' },
+      }
+
+      let t2Icons = {
+        pdf: { name: 'file-pdf-box', color: '' },
+        psd: { name: 'file-psd', color: '' },
+        rtf: { name: 'file-rtf', color: '' },
+        markdown: { name: 'language-markdown', color: '' },
+        xml: { name: 'xml', color: '' },
+        msword: { name: 'file-word', color: '' },
+        'vnd.ms-excel': { name: 'file-excel', color: '' },
+        'vnd.ms-powerpoint': { name: 'file-powerpoint', color: '' },
+        'vnd.openxmlformats-officedocument.wordprocessingml.document': { name: 'file-word', color: '' },
+        'vnd.openxmlformats-officedocument.spreadsheetml.sheet': { name: 'file-excel', color: '' },
+        'vnd.openxmlformats-officedocument.presentationml.presentation': { name: 'file-powerpoint', color: '' },
+      }
+
+      if (Object.keys(t2Icons).includes(t2)) {
+        matter.icon = t2Icons[t2]
+      } else if (Object.keys(t1Icons).includes(t1)) {
+        matter.icon = t1Icons[t1]
+      } else {
+        matter.icon = { name: 'file', color: '#c9c9c9' }
+      }
+
+      return matter
+    },
     listRefresh(offset, limit) {
       if (!offset) {
         offset = 0;
@@ -111,7 +175,7 @@ export default {
       let dir = this.currentDir ? this.currentDir : "";
       this.dataLoader(dir, offset, limit).then((data) => {
         if (offset == 0) {
-          this.rows = data.list;
+          this.rows = data.list.map(this.buildIcon);
           this.offset = limit;
         } else {
           this.rows = this.rows.concat(data.list);
@@ -145,6 +209,7 @@ export default {
     this.currentDir = this.$route.query.dir ? this.$route.query.dir : "";
 
     // this.listRefresh();
+    setTimeout(this.listRefresh, 100)
   },
 };
 </script>
diff --git a/src/components/FileExplorer/explorer/GridExplorer.vue b/src/components/FileExplorer/explorer/GridExplorer.vue
index 51a3f37..e2805ac 100644
--- a/src/components/FileExplorer/explorer/GridExplorer.vue
+++ b/src/components/FileExplorer/explorer/GridExplorer.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="explorer">
     <div class="explorer-item" v-for="item in data" :key="item.alias" @click="onNameClick(item)">
-      <i v-if="item.dirtype" class="matter-icon el-icon-folder" style="color: #ffc402"></i>
-      <i v-else :class="`iconfont ${type2icon(item.type)}`"></i>
+      <v-icon :color="item.icon.color" large>mdi-{{ item.icon.name }}</v-icon>
       <p>{{ item.name }}</p>
     </div>
   </div>
@@ -41,7 +40,7 @@ export default {
 
 .explorer-item {
   width: 80px;
-  padding: 15px;
+  padding: 5px 10px;
   text-align: center;
   cursor: pointer;
 }
diff --git a/src/components/FileExplorer/explorer/TableExplorer.vue b/src/components/FileExplorer/explorer/TableExplorer.vue
new file mode 100644
index 0000000..38a8ed7
--- /dev/null
+++ b/src/components/FileExplorer/explorer/TableExplorer.vue
@@ -0,0 +1,152 @@
+<template>
+    <v-simple-table height="calc(90vh - 70px)">
+        <template v-slot:default>
+            <thead>
+                <tr>
+                    <th class="text-left">
+                        <v-simple-checkbox
+                            style="width: 2px"
+                            v-model="selectedAll"
+                            :ripple="false"
+                            :indeterminate="selectedSome"
+                        ></v-simple-checkbox>
+                    </th>
+                    <th class="text-left">{{ $t('fth.name') }}</th>
+                    <th class="col-size text-left">{{ $t('fth.size') }}</th>
+                    <th class="col-time text-left">{{ $t('fth.updated') }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr
+                    v-for="(item,idx) in data"
+                    :key="item.alias"
+                    @click="onRowClick(idx, item)"
+                    :class="{ rowHighlight: highlightIdx == idx }"
+                    v-intersect="(entries, observer, isIntersecting) => { infiniteScrolling(idx, entries, observer, isIntersecting) }"
+                >
+                    <td class="col-select">
+                        <v-simple-checkbox
+                            style="width: 2px"
+                            v-model="item.selected"
+                            :ripple="false"
+                        ></v-simple-checkbox>
+                    </td>
+                    <td class="col-first">
+                        <v-icon :color="item.icon.color" large>mdi-{{ item.icon.name }}</v-icon>
+                        <div class="col-name">
+                            <v-hover v-slot="{ hover }">
+                                <span
+                                    :class="{ 'name-on-hover': hover }"
+                                    @click="onNameClick(item)"
+                                >{{ item.name }}</span>
+                            </v-hover>
+                            <span class="col-time-mobile">{{ item.updated | moment }}</span>
+                        </div>
+                    </td>
+                    <td class="col-size">{{ item.size }}</td>
+                    <td class="col-time">{{ item.updated | moment }}</td>
+                </tr>
+            </tbody>
+        </template>
+    </v-simple-table>
+</template>
+
+<script>
+import mixin from "./mixin";
+export default {
+    mixins: [mixin],
+    data() {
+        return {
+            selectedAll: false,
+            highlightIdx: -1
+        };
+    },
+    watch: {
+        selected(nv) {
+            this.selectedAll = this.selected.length == this.data.length
+        },
+        selectedAll(nv) {
+            this.data.map(el => { this.$set(el, 'selected', nv) })
+        },
+    },
+    computed: {
+        selected() {
+            if (!this.data.length) {
+                return []
+            }
+
+            return this.data.filter(el => el.selected == true).map(el => el.selected)
+        },
+        selectedSome() {
+            return this.selected.length > 0 && this.selected.length != this.data.length
+        },
+    },
+    methods: {
+        select(idx) {
+            this.highlightIdx = idx
+        },
+        onRowClick(idx, selection) {
+            this.select(idx);
+
+        },
+        infiniteScrolling(idx, entries, observer, isIntersecting) {
+            if (isIntersecting && idx == this.data.length - 1) {
+                this.$emit("scroll-end");
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.rowHighlight {
+    background-color: #eeeded;
+}
+.name-on-hover {
+    cursor: pointer;
+    color: #409eff;
+}
+.col-select {
+    width: 2px;
+    margin: 0;
+}
+.col-first .col-name {
+    display: initial;
+    font-weight: bold;
+    margin-left: 6px;
+    padding-top: 5px;
+}
+.col-first .col-time-mobile {
+    display: none;
+    font-weight: initial;
+}
+
+.col-size {
+    width: 150px;
+    font-size: 12px !important;
+}
+.col-time {
+    width: 180px;
+    font-size: 12px !important;
+}
+
+@media (max-width: 480px) {
+    .col-first {
+        display: flex;
+    }
+    .col-first .col-name {
+        display: flex;
+        flex-direction: column;
+    }
+    .col-first .col-time-mobile {
+        display: initial;
+        font-size: 10px;
+        color: #757474;
+    }
+
+    .col-size,
+    .col-time {
+        display: none !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/FileExplorer/explorer/mixin.js b/src/components/FileExplorer/explorer/mixin.js
index cc66d6c..cbaebc9 100644
--- a/src/components/FileExplorer/explorer/mixin.js
+++ b/src/components/FileExplorer/explorer/mixin.js
@@ -17,52 +17,6 @@ const mixin = {
         },
     },
     methods: {
-        isOfficeFile(type) {
-            let officeTypes = ["application/msword", "application/vnd.ms-excel", "application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.openxmlformats-officedocument.presentationml.presentation"];
-            return officeTypes.includes(type);
-        },
-        officeIcon(type) {
-            let docTypes = ["application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
-            let excelTypes = ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
-            let pptTypes = ["application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.presentationml.presentation"]
-            if (docTypes.includes(type)) {
-                return 'icon-doc'
-            } else if (excelTypes.includes(type)) {
-                return 'icon-excel'
-            } else if (pptTypes.includes(type)) {
-                return 'icon-ppt'
-            }
-
-        },
-        type2icon(type) {
-            console.log(type)
-            let [t1, t2] = type.split('/')
-            let mt = ['pdf', 'html', 'xml', 'psd', 'rtf']
-            if (mt.includes(t2)) {
-                return `icon-${t2}`
-            }
-
-            let codeTypes = ['json', 'yaml', 'x-yaml']
-            if (codeTypes.includes(t2)) {
-                return 'icon-html'
-            }
-
-            let compressedFileTypes = ['zip', 'x-gzip']
-            if (compressedFileTypes.includes(t2)) {
-                return 'icon-compressed-file'
-            }
-
-            if (this.isOfficeFile(type)) {
-                return this.officeIcon(type)
-            }
-
-            let gt = ['audio', 'video', 'image', 'text']
-            if (gt.includes(t1)) {
-                return `icon-${t1}`
-            }
-
-            return 'icon-file'
-        },
         onNameClick(item) {
             // open a folder
             if (item.dirtype) {
@@ -95,10 +49,10 @@ const mixin = {
             }
 
             // preview office file
-            if (this.isOfficeFile(item.type)) {
-                this.$emit("on-click", 'doc', item)
-                return;
-            }
+            // if (this.isOfficeFile(item.type)) {
+            //     this.$emit("on-click", 'doc', item)
+            //     return;
+            // }
         },
     }
 }
diff --git a/src/main.js b/src/main.js
index e52209e..0700ac7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,8 +3,8 @@ import App from './App'
 import i18n from './i18n'
 import store from './store'
 import router from './router'
+import vuetify from './plugins/vuetify'
 import './plugins/axios'
-import './plugins/buefy'
 import './plugins/moment'
 import './plugins/element'
 import './plugins/fileexplorer'
@@ -20,5 +20,6 @@ new Vue({
   i18n,
   router,
   store,
+  vuetify,
   render: h => h(App)
 }).$mount('#app')
diff --git a/src/plugins/buefy.js b/src/plugins/buefy.js
deleted file mode 100644
index 0b8ee14..0000000
--- a/src/plugins/buefy.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Vue from 'vue'
-import Buefy from 'buefy'
-import 'buefy/dist/buefy.css'
-
-Vue.use(Buefy)
\ No newline at end of file
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..5bdec19
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib/framework';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+});
diff --git a/src/template/index.ejs b/src/template/index.ejs
index fa08737..1bf7d91 100644
--- a/src/template/index.ejs
+++ b/src/template/index.ejs
@@ -8,6 +8,8 @@
     </title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <link rel="icon" href="data:image/ico;base64,aWNv">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
     <!-- 使用CDN的CSS文件 -->
     <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
         <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 718dfc3..0e8eec1 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,27 +1,63 @@
 <template>
-  <section>
-    <Topbar ref="topbar" :menus="$store.state.storages" logined @logoClick="onLogoClick" />
-    <el-container style="height: 100%">
+  <v-app>
+    <v-app-bar app clipped-left>
+      <div class="logo">
+        <img src="@/assets/logo.png" alt="ZPan" />
+      </div>
+      <v-tabs align-with-title>
+        <v-tabs-slider color="yellow"></v-tabs-slider>
+
+        <v-tab v-for="item in $store.state.storages.slice(0, 5)" :key="item.alias">{{ item.title }}</v-tab>
+      </v-tabs>
+      <div class="tools-bar">111</div>
+    </v-app-bar>
+
+    <v-navigation-drawer app clipped>
+      <v-list dense nav>
+        <v-list-item
+          v-for="item in leftMenus"
+          :key="item.path"
+          @click="$router.push(item.path)"
+          link
+        >
+          <v-list-item-icon>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-content>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <!-- 根据应用组件来调整你的内容 -->
+    <v-main style="height: calc(100% - 65px)">
+      <!-- 给应用提供合适的间距 -->
+      <v-container fluid>
+        <!-- 如果使用 vue-router -->
+        <router-view @upload-action="onUploadClick" @audio-open="onAudioOpen"></router-view>
+      </v-container>
+    </v-main>
+
+    <v-footer app>
+      <!-- -->
+    </v-footer>
+  </v-app>
+
+  <!-- <el-container style="height: 100%">
       <el-aside width="200px" class="menu" v-bind:class="{ 'menu-open': menuActive }">
-        <el-menu :default-active="leftMenuActive" background-color="#f4f4f5" @select="onLogoClick" router>
-          <el-menu-item v-for="menu in leftMenus" :key="menu.path" :index="menu.path">
-            <i :class="menu.icon"></i>
-            <span slot="title">{{ menu.title }}</span>
-          </el-menu-item>
-        </el-menu>
-
-        <!-- <div class="copyright">
+        <div class="copyright">
         <span>Powered by</span>
         <a href="https://github.com/saltbo/zpan" target="_blank">ZPan</a>
-        </div>-->
+        </div>
       </el-aside>
       <div class="menu-bg-mask" v-bind:class="{ 'mask-open': menuActive }"></div>
 
       <el-main style="height: calc(100% - 65px)">
         <router-view @upload-action="onUploadClick" @audio-open="onAudioOpen"></router-view>
       </el-main>
-    </el-container>
-  </section>
+  </el-container>-->
 </template>
 
 <script>
@@ -55,14 +91,15 @@ export default {
     });
   },
   data() {
-    return {
-      menuActive: false,
-    };
+    return {};
   },
   computed: {
     currentBucket() {
       return this.$route.params.sname;
     },
+    menuActive() {
+      return `/${this.$route.params.sname}`;
+    },
     leftMenuActive() {
       return this.$route.fullPath;
     },
@@ -96,15 +133,20 @@ export default {
     onAudioOpen(obj, link) {
       this.$refs.topbar.AplayerOpen(obj, link);
     },
-    onLogoClick() {
-      this.menuActive = !this.menuActive
-    }
   },
   mounted() { },
 };
 </script>
 
 <style scoped>
+.logo {
+  width: 150px;
+  /* display: inline-block; */
+  font-size: 35px;
+  padding: 0 15px;
+  /* vertical-align: middle; */
+}
+
 .copyright {
   text-align: center;
   position: absolute;
@@ -150,7 +192,7 @@ export default {
     background: rgba(1, 1, 1, 0.4);
     z-index: 998;
   }
-  .mask-open{
+  .mask-open {
     width: 100%;
   }
 }
diff --git a/vue.config.js b/vue.config.js
index eba4b55..4d698fa 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -170,5 +170,9 @@ module.exports = {
             preProcessor: 'stylus',
             patterns: []
         }
-    }
+    },
+
+    transpileDependencies: [
+      'vuetify'
+    ]
 }
diff --git a/yarn.lock b/yarn.lock
index 6665237..8fafddb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1201,7 +1201,7 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/json-schema@^7.0.5":
+"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
@@ -1725,7 +1725,7 @@ ajv@^5.2.3, ajv@^5.3.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4:
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2346,13 +2346,6 @@ browserslist@^4.17.1, browserslist@^4.3.4:
     nanocolors "^0.2.12"
     node-releases "^1.1.76"
 
-buefy@^0.9.14:
-  version "0.9.14"
-  resolved "https://registry.npmmirror.com/buefy/download/buefy-0.9.14.tgz#f0441ece5255fa757bf9956761415341d18fe68b"
-  integrity sha512-4+8xLQBHm7H+XmCNXvEmFY01gYHvGIkMGBLxcCpbumrt5Eyj21JP7I6G313tLaT2XDk06IiNSnqgPxzFExHPjQ==
-  dependencies:
-    bulma "0.9.3"
-
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -2390,11 +2383,6 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
-bulma@0.9.3:
-  version "0.9.3"
-  resolved "https://registry.npmmirror.com/bulma/download/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
-  integrity sha1-3cy3Q26+PiG/R6/gHTxDopa3AkM=
-
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -2505,6 +2493,11 @@ caller-path@^2.0.0:
   dependencies:
     caller-callsite "^2.0.0"
 
+callsite@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/callsite/download/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+  integrity sha1-KAOY5dZkvXQDi28JBRU+borxvCA=
+
 callsites@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
@@ -2606,6 +2599,21 @@ check-types@^8.0.3:
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
   integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
 
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -2625,21 +2633,6 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.4.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
-  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
-  dependencies:
-    anymatch "~3.1.2"
-    braces "~3.0.2"
-    glob-parent "~5.1.2"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.6.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
 chownr@^1.0.1, chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -3656,6 +3649,13 @@ debug@~3.1.0:
   dependencies:
     ms "2.0.0"
 
+decache@^4.6.0:
+  version "4.6.1"
+  resolved "https://registry.npmmirror.com/decache/download/decache-4.6.1.tgz#5928bfab97a6fcf22a65047a3d07999af36efaf0"
+  integrity sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==
+  dependencies:
+    callsite "^1.0.0"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -4541,6 +4541,14 @@ file-loader@^3.0.1:
     loader-utils "^1.0.2"
     schema-utils "^1.0.0"
 
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.nlark.com/file-loader/download/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha1-uu98+OGEDfMl5DkLRISHlIDuvk0=
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -4853,6 +4861,18 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
+glob@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.npmmirror.com/glob/download/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
@@ -5450,6 +5470,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+interpret@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.npm.taobao.org/interpret/download/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
+  integrity sha1-Zlq4vE2iendKQFhOgS4+D6RbGh4=
+
 invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -5577,6 +5602,13 @@ is-core-module@^2.2.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.npmmirror.com/is-core-module/download/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
+  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -6037,6 +6069,11 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+klona@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.npmmirror.com/klona/download/klona-2.0.5.tgz?cache=0&sync_timestamp=1635385383825&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fklona%2Fdownload%2Fklona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
+  integrity sha1-0WZXTZAHY5XZljqnqSj6u412r7w=
+
 launch-editor-middleware@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/launch-editor-middleware/-/launch-editor-middleware-2.2.1.tgz#e14b07e6c7154b0a4b86a0fd345784e45804c157"
@@ -6111,6 +6148,15 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/loader-utils/download/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
+  integrity sha1-1uO0+4GHByGuTghoqxHdY4NowSk=
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 loadjs@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
@@ -6696,7 +6742,7 @@ negotiator@0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
+neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1, neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@@ -6858,6 +6904,14 @@ nth-check@^2.0.0:
   dependencies:
     boolbase "^1.0.0"
 
+null-loader@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npm.taobao.org/null-loader/download/null-loader-4.0.1.tgz#8e63bd3a2dd3c64236a4679428632edd0a6dbc6a"
+  integrity sha1-jmO9Oi3TxkI2pGeUKGMu3QptvGo=
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
@@ -7258,7 +7312,7 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6:
+path-parse@^1.0.6, path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -8004,6 +8058,13 @@ recast@^0.20.3:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.nlark.com/rechoir/download/rechoir-0.6.2.tgz?cache=0&sync_timestamp=1627101677944&other_urls=https%3A%2F%2Fregistry.nlark.com%2Frechoir%2Fdownload%2Frechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
+  dependencies:
+    resolve "^1.1.6"
+
 regenerate-unicode-properties@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz#54d09c7115e1f53dc2314a974b32c1c344efe326"
@@ -8216,6 +8277,15 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
+resolve@^1.1.6:
+  version "1.21.0"
+  resolved "https://registry.npmmirror.com/resolve/download/resolve-1.21.0.tgz#b51adc97f3472e6a5cf4444d34bc9d6b9037591f"
+  integrity sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==
+  dependencies:
+    is-core-module "^2.8.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.4.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
@@ -8359,6 +8429,24 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-loader@^10.0.0:
+  version "10.2.1"
+  resolved "https://registry.npmmirror.com/sass-loader/download/sass-loader-10.2.1.tgz#17e51df313f1a7a203889ce8ff91be362651276e"
+  integrity sha512-RRvWl+3K2LSMezIsd008ErK4rk6CulIMSwrcc2aZvjymUgKo/vjXGp1rSWmfTUX7bblEOz8tst4wBwWtCGBqKA==
+  dependencies:
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    neo-async "^2.6.2"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
+
+sass@~1.32.0:
+  version "1.32.13"
+  resolved "https://registry.npmmirror.com/sass/download/sass-1.32.13.tgz#8d29c849e625a415bce71609c7cf95e15f74ed00"
+  integrity sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -8382,6 +8470,15 @@ schema-utils@^2.6.5:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
+schema-utils@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/schema-utils/download/schema-utils-3.1.1.tgz?cache=0&sync_timestamp=1637075922747&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fschema-utils%2Fdownload%2Fschema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
+  integrity sha1-vHTEtraZXB2I92qLd76nIZ4MgoE=
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 section-matter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
@@ -8422,7 +8519,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.2, semver@^7.3.4:
+semver@^7.1.2, semver@^7.3.2, semver@^7.3.4:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
@@ -8557,6 +8654,15 @@ shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+shelljs@^0.8.3:
+  version "0.8.5"
+  resolved "https://registry.npmmirror.com/shelljs/download/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
+  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -9047,6 +9153,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/download/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
@@ -9580,6 +9691,15 @@ vue-aplayer@^1.6.1:
   resolved "https://registry.yarnpkg.com/vue-aplayer/-/vue-aplayer-1.6.1.tgz#17fd419b091e09425bc737fa9e84f55565160df6"
   integrity sha512-c+ZAwZ63bVDsKkcHeKLAonIL2gY4nrVRdKypoPRXSkh+8B1cVhFT2tx8HSTNT6eX6WZyDtaYrEJfcgetrfvcdQ==
 
+vue-cli-plugin-vuetify@^2.4.5:
+  version "2.4.5"
+  resolved "https://registry.npmmirror.com/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.4.5.tgz#5dfae4d78c717c400530731f0b75c0350c3b6add"
+  integrity sha512-CnCVzG6iZAsMMqTkijZ0gRkPB6s4zHPWyFX1VpBBKVyxZESayQhUoMCZRZUOZNjvvZpq1LPgviq+8zcliSu73g==
+  dependencies:
+    null-loader "^4.0.1"
+    semver "^7.1.2"
+    shelljs "^0.8.3"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
@@ -9664,6 +9784,20 @@ vue@^2.6.10, vue@^2.6.11, vue@^2.6.14:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
 
+vuetify-loader@^1.7.0:
+  version "1.7.3"
+  resolved "https://registry.npmmirror.com/vuetify-loader/download/vuetify-loader-1.7.3.tgz#404657f4925c828f400fe3269003421d586835c6"
+  integrity sha1-QEZX9JJcgo9AD+MmkANCHVhoNcY=
+  dependencies:
+    decache "^4.6.0"
+    file-loader "^6.2.0"
+    loader-utils "^2.0.0"
+
+vuetify@^2.4.0:
+  version "2.6.2"
+  resolved "https://registry.npmmirror.com/vuetify/download/vuetify-2.6.2.tgz#1ed4d3c9e734d55202bd566b789cce0e0013279a"
+  integrity sha512-nx3uZkO8MZNMshUEh1xKaQ1hQYepNwWFn3FVxKt+XBVf7ZFscd0GS/a3KZo4B3baXQmziCQAZKNIQF5IWeaIUw==
+
 vuex@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"

From 2ce2d343adf4551beff2e5d44a8a6fa3a898e59a Mon Sep 17 00:00:00 2001
From: saltbo <saltbo@foxmail.com>
Date: Fri, 28 Jan 2022 23:35:42 +0800
Subject: [PATCH 3/5] feat: implement the contextmenu action

---
 package.json                                  |   1 +
 src/components/FileExplorer/FileExplorer.vue  |  43 ++---
 .../FileExplorer}/components/DialogMove.vue   |   0
 .../components/DialogOutlink.vue              |   0
 .../FileExplorer}/components/DialogShare.vue  |   0
 .../FileExplorer}/components/DialogUpload.vue |   0
 .../FileExplorer/explorer/GridExplorer.vue    |  13 +-
 .../FileExplorer/explorer/ListExplorer.vue    | 106 ------------
 .../FileExplorer/explorer/TableExplorer.vue   |   3 +-
 src/components/FileExplorer/explorer/mixin.js |  60 -------
 src/components/FileExplorer/explorer_mixin.js | 132 ++++++++++++++
 src/components/FileExplorer/index.js          |   1 +
 .../viewer}/Media.vue                         |   0
 .../viewer}/Picture.vue                       |   0
 src/components/FileExplorer/viewer/index.js   |  69 ++++++++
 src/components/FileViewer/index.js            |  29 ----
 src/main.js                                   |   1 +
 src/plugins/ctxmenu.js                        |   3 +
 src/views/home/disk/index.vue                 | 161 +++++++-----------
 yarn.lock                                     |   5 +
 20 files changed, 296 insertions(+), 331 deletions(-)
 rename src/{views/home/disk => components/FileExplorer}/components/DialogMove.vue (100%)
 rename src/{views/home/disk => components/FileExplorer}/components/DialogOutlink.vue (100%)
 rename src/{views/home/disk => components/FileExplorer}/components/DialogShare.vue (100%)
 rename src/{views/home/disk => components/FileExplorer}/components/DialogUpload.vue (100%)
 delete mode 100644 src/components/FileExplorer/explorer/ListExplorer.vue
 delete mode 100644 src/components/FileExplorer/explorer/mixin.js
 create mode 100644 src/components/FileExplorer/explorer_mixin.js
 rename src/components/{FileViewer => FileExplorer/viewer}/Media.vue (100%)
 rename src/components/{FileViewer => FileExplorer/viewer}/Picture.vue (100%)
 create mode 100644 src/components/FileExplorer/viewer/index.js
 delete mode 100644 src/components/FileViewer/index.js
 create mode 100644 src/plugins/ctxmenu.js

diff --git a/package.json b/package.json
index a2e5f30..ebc4c8a 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "vue": "^2.6.14",
     "vue-aplayer": "^1.6.1",
     "vue-cli-plugin-vuetify": "^2.4.5",
+    "vue-contextmenujs": "^1.3.13",
     "vue-i18n": "^8.25.0",
     "vue-pdf-app": "^2.1.0",
     "vue-plyr": "6.0.4",
diff --git a/src/components/FileExplorer/FileExplorer.vue b/src/components/FileExplorer/FileExplorer.vue
index 8e69cca..3414ab2 100644
--- a/src/components/FileExplorer/FileExplorer.vue
+++ b/src/components/FileExplorer/FileExplorer.vue
@@ -13,27 +13,21 @@
     </el-row>
 
     <!-- explorer -->
-    <TableExplorer
-      v-model="rows"
-      :loading="loading"
-      @on-click="onClick"
-      @scroll-end="onScrollEnd"
-      v-if="layout == 'list'"
-    />
-    <GridExplorer v-model="rows" :loading="loading" @on-click="onClick" v-if="layout == 'grid'" />
-    <!-- <ListExplorer v-model="rows" :loading="loading" :rowButtons="rowButtons" :moreButtons="moreButtons" @on-click="onClick" @scroll-end="onScrollEnd" @selection-change="onSelectionChange" v-else /> -->
+    <template v-if="layout == 'list'">
+      <TableExplorer v-model="rows" :linkLoader="linkLoader" @scroll-end="onScrollEnd" />
+    </template>
+    <template v-else>
+      <GridExplorer v-model="rows" :linkLoader="linkLoader" @scroll-end="onScrollEnd" />
+    </template>
   </div>
 </template>
 
 <script>
-import elTableInfiniteScroll from "el-table-infinite-scroll";
 import GridExplorer from "./explorer/GridExplorer";
-import ListExplorer from "./explorer/ListExplorer";
 import TableExplorer from "./explorer/TableExplorer";
 export default {
   components: {
     GridExplorer,
-    ListExplorer,
     TableExplorer,
   },
   props: {
@@ -41,14 +35,12 @@ export default {
       type: String,
       default: "list",
     },
-    dataLoader: Function,
-    linkLoader: Function,
-    rowButtons: Array,
-    moreButtons: Array,
     rootDir: {
       type: String,
       default: "",
     },
+    dataLoader: Function,
+    linkLoader: Function,
   },
   data() {
     return {
@@ -68,8 +60,11 @@ export default {
         this.listRefresh();
       }
     },
-    rows(nv) {
-      this.$emit("selection-change", nv.filter(el => el.selected == true));
+    rows: {
+      deep: true,
+      handler(nv, ov) {
+        this.$emit("selection-change", nv.filter(el => el.selected == true));
+      }
     }
   },
   computed: {
@@ -144,7 +139,7 @@ export default {
         rtf: { name: 'file-rtf', color: '' },
         markdown: { name: 'language-markdown', color: '' },
         xml: { name: 'xml', color: '' },
-        msword: { name: 'file-word', color: '' },
+        'msword': { name: 'file-word', color: '' },
         'vnd.ms-excel': { name: 'file-excel', color: '' },
         'vnd.ms-powerpoint': { name: 'file-powerpoint', color: '' },
         'vnd.openxmlformats-officedocument.wordprocessingml.document': { name: 'file-word', color: '' },
@@ -194,16 +189,6 @@ export default {
       let query = !dir ? {} : { dir: dir };
       return { query: query };
     },
-    onClick(type, obj) {
-      if (type == "folder") {
-        this.$router.push(this.buildQuery(obj.fullpath));
-        return;
-      }
-
-      this.linkLoader(obj).then((link) => {
-        this.$emit("file-open", type, obj, link);
-      });
-    },
   },
   mounted() {
     this.currentDir = this.$route.query.dir ? this.$route.query.dir : "";
diff --git a/src/views/home/disk/components/DialogMove.vue b/src/components/FileExplorer/components/DialogMove.vue
similarity index 100%
rename from src/views/home/disk/components/DialogMove.vue
rename to src/components/FileExplorer/components/DialogMove.vue
diff --git a/src/views/home/disk/components/DialogOutlink.vue b/src/components/FileExplorer/components/DialogOutlink.vue
similarity index 100%
rename from src/views/home/disk/components/DialogOutlink.vue
rename to src/components/FileExplorer/components/DialogOutlink.vue
diff --git a/src/views/home/disk/components/DialogShare.vue b/src/components/FileExplorer/components/DialogShare.vue
similarity index 100%
rename from src/views/home/disk/components/DialogShare.vue
rename to src/components/FileExplorer/components/DialogShare.vue
diff --git a/src/views/home/disk/components/DialogUpload.vue b/src/components/FileExplorer/components/DialogUpload.vue
similarity index 100%
rename from src/views/home/disk/components/DialogUpload.vue
rename to src/components/FileExplorer/components/DialogUpload.vue
diff --git a/src/components/FileExplorer/explorer/GridExplorer.vue b/src/components/FileExplorer/explorer/GridExplorer.vue
index e2805ac..583dd10 100644
--- a/src/components/FileExplorer/explorer/GridExplorer.vue
+++ b/src/components/FileExplorer/explorer/GridExplorer.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="explorer">
-    <div class="explorer-item" v-for="item in data" :key="item.alias" @click="onNameClick(item)">
+    <div
+      class="explorer-item"
+      v-for="item in data"
+      :key="item.alias"
+      @click="onNameClick(item)"
+      @contextmenu.prevent="(e) => { openCtxMenu(e, item) }"
+    >
       <v-icon :color="item.icon.color" large>mdi-{{ item.icon.name }}</v-icon>
       <p>{{ item.name }}</p>
     </div>
@@ -8,7 +14,7 @@
 </template>
 
 <script>
-import mixin from "./mixin";
+import mixin from "../explorer_mixin";
 export default {
   mixins: [mixin],
   data() {
@@ -21,9 +27,6 @@ export default {
     onSelectable(row, index) {
       if (!row.dirtype) return true;
     },
-    handleCommand(command) {
-      command.action(command.row);
-    },
     onScrollEnd() {
       this.$emit("scroll-end")
     },
diff --git a/src/components/FileExplorer/explorer/ListExplorer.vue b/src/components/FileExplorer/explorer/ListExplorer.vue
deleted file mode 100644
index 7faa650..0000000
--- a/src/components/FileExplorer/explorer/ListExplorer.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <el-table style="width: 100%" height="100%" tooltip-effect="dark" size="small" :data="data" v-loading="loading" v-el-table-infinite-scroll="onScrollEnd" @selection-change="onSelectionChange" highlight-current-row>
-    <el-table-column type="selection" width="30" :selectable="onSelectable"></el-table-column>
-    <el-table-column prop="name" :label="$t('fth.name')" min-width="200" show-overflow-tooltip sortable>
-      <template slot-scope="scope">
-        <i v-if="scope.row.dirtype" class="matter-icon el-icon-folder" style="color: #ffc402"></i>
-        <i v-else :class="`iconfont matter-icon ${type2icon(scope.row.type)}`"></i>
-        <el-link :underline="false" class="matter-title" href="Javascript: void(0);">
-          <span @click="onNameClick(scope.row)">{{ scope.row.name }}</span>
-        </el-link>
-      </template>
-    </el-table-column>
-    <el-table-column width="150">
-      <template slot-scope="scope">
-        <div style="float: right; vertical-align: super" class="operation">
-          <el-link v-for="item in rowButtons" :key="item.name" v-show="!item.shown || item.shown(scope.row)" type="primary" :underline="false">
-            <i :class="`${item.icon} el-icon--right`" @click="item.action(scope.row)"></i>
-          </el-link>
-
-          <el-dropdown v-show="moreButtons && moreButtons.length > 0" trigger="click" @command="handleCommand">
-            <el-link type="primary" class="el-dropdown-link" :underline="false">
-              <i class="el-icon-more el-icon--right"></i>
-            </el-link>
-
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="item in moreButtons" :key="item.name" :command="{ action: item.action, row: scope.row }">
-                {{ item.title }}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column prop="size" :label="$t('fth.size')" width="180">
-      <template slot-scope="scope">
-        <div v-if="scope.row.dirtype">-</div>
-        <div v-else>{{ scope.row.size }}</div>
-      </template>
-    </el-table-column>
-    <el-table-column prop="updated" :label="$t('fth.updated')" width="180">
-      <template slot-scope="scope">{{ scope.row.updated | moment }}</template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import mixin from "./mixin";
-import elTableInfiniteScroll from "el-table-infinite-scroll";
-export default {
-  mixins: [mixin],
-  directives: {
-    "el-table-infinite-scroll": elTableInfiniteScroll,
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    onSelectionChange(selection) {
-      this.$emit("selection-change", selection);
-    },
-    onSelectable(row, index) {
-      if (!row.dirtype) return true;
-    },
-    handleCommand(command) {
-      command.action(command.row);
-    },
-    onScrollEnd() {
-      this.$emit("scroll-end");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.matter-icon {
-  font-size: 35px;
-}
-.matter-title {
-  display: inline;
-  margin-left: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  top: -8px;
-  position: relative;
-}
-
-.el-table__row .operation {
-  display: none;
-}
-.el-table__row:hover .operation {
-  display: block;
-}
-
-.el-table >>> .el-checkbox__inner {
-  width: 15px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.operation .el-link {
-  font-size: 20px !important;
-  margin: 0 2px;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/FileExplorer/explorer/TableExplorer.vue b/src/components/FileExplorer/explorer/TableExplorer.vue
index 38a8ed7..3b8836d 100644
--- a/src/components/FileExplorer/explorer/TableExplorer.vue
+++ b/src/components/FileExplorer/explorer/TableExplorer.vue
@@ -23,6 +23,7 @@
                     @click="onRowClick(idx, item)"
                     :class="{ rowHighlight: highlightIdx == idx }"
                     v-intersect="(entries, observer, isIntersecting) => { infiniteScrolling(idx, entries, observer, isIntersecting) }"
+                    @contextmenu.prevent="(e) => { openCtxMenu(e, item) }"
                 >
                     <td class="col-select">
                         <v-simple-checkbox
@@ -52,7 +53,7 @@
 </template>
 
 <script>
-import mixin from "./mixin";
+import mixin from "../explorer_mixin";
 export default {
     mixins: [mixin],
     data() {
diff --git a/src/components/FileExplorer/explorer/mixin.js b/src/components/FileExplorer/explorer/mixin.js
deleted file mode 100644
index cbaebc9..0000000
--- a/src/components/FileExplorer/explorer/mixin.js
+++ /dev/null
@@ -1,60 +0,0 @@
-const mixin = {
-    props: {
-        value: Array,
-        loading: false,
-
-        rowButtons: Array,
-        moreButtons: Array
-    },
-    data() {
-        return {
-            data: [],
-        }
-    },
-    watch: {
-        value(nval, oval) {
-            this.data = nval;
-        },
-    },
-    methods: {
-        onNameClick(item) {
-            // open a folder
-            if (item.dirtype) {
-                this.$emit("on-click", 'folder', item)
-                return;
-            }
-
-            // preview pdf file
-            if (item.type.endsWith("pdf")) {
-                this.$emit("on-click", 'pdf', item)
-                return;
-            }
-
-            // preview image file
-            if (item.type.startsWith("text")) {
-                this.$emit("on-click", 'text', item)
-                return;
-            }
-
-            // preview image file
-            if (item.type.startsWith("image")) {
-                this.$emit("on-click", 'image', item)
-                return;
-            }
-
-            // preview media file
-            if (item.type.startsWith("audio") || item.type.startsWith("video")) {
-                this.$emit("on-click", 'media', item)
-                return;
-            }
-
-            // preview office file
-            // if (this.isOfficeFile(item.type)) {
-            //     this.$emit("on-click", 'doc', item)
-            //     return;
-            // }
-        },
-    }
-}
-
-export default mixin
\ No newline at end of file
diff --git a/src/components/FileExplorer/explorer_mixin.js b/src/components/FileExplorer/explorer_mixin.js
new file mode 100644
index 0000000..e7e2b8f
--- /dev/null
+++ b/src/components/FileExplorer/explorer_mixin.js
@@ -0,0 +1,132 @@
+import { transfer } from "@/helper";
+import FileViewer from "./viewer";
+import DialogMove from "./components/DialogMove";
+import DialogShare from "./components/DialogShare";
+import DialogUpload from "./components/DialogUpload";
+import DialogOutlink from "./components/DialogOutlink";
+
+const mixin = {
+    props: {
+        value: Array,
+        linkLoader: Function,
+        loading: false,
+    },
+    data() {
+        return {
+            data: [],
+        }
+    },
+    watch: {
+        value(nval, oval) {
+            this.data = nval;
+        },
+    },
+    methods: {
+        openCtxMenu(event, item) {
+            this.$contextmenu({
+                items: [
+                    { label: "打开", onClick: () => { this.onNameClick(item) }, divided: true },
+                    { label: "下载", onClick: () => this.openDownload(item) },
+                    { label: "分享", onClick: () => this.openShare(item) },
+                    { label: "获取链接", onClick: () => this.openOutline(item), divided: true },
+                    // { label: "复制到", onClick: () => this.openCopy(item) },
+                    { label: "移动到", onClick: () => this.openMove(item) },
+                    { label: "重命名", onClick: () => this.openRename(item), divided: true },
+                    { label: "删除", onClick: () => this.openRemove(item) }
+                ],
+                event,
+                //x: event.clientX,
+                //y: event.clientY,
+                customClass: "custom-class",
+                zIndex: 3,
+                minWidth: 230
+            });
+            return false;
+        },
+        buildQuery(dir) {
+            if (dir.startsWith(this.rootDir)) {
+                dir = dir.replace(this.rootDir, "");
+            }
+
+            let query = !dir ? {} : { dir: dir };
+            return { query: query };
+        },
+        onNameClick(item) {
+            // open a folder
+            if (item.dirtype) {
+                this.$router.push(this.buildQuery(item.fullpath));
+                return;
+            }
+
+            // todo 支持外部查看器打开文件
+
+            // open file by the built-in file viewer
+            new FileViewer(this.linkLoader).view(item);
+        },
+        onCtxMenuClick(action, item) {
+            console.log(action, item)
+        },
+        openDownload(obj) {
+            this.linkLoader(obj).then((link) => {
+                let a = document.createElement("a");
+                a.setAttribute("href", link);
+                a.setAttribute("download", obj.name);
+                a.click();
+                a.remove();
+            });
+        },
+        openShare(obj) {
+            transfer(DialogShare)({ alias: obj.alias });
+        },
+        openOutlinkMulti(obj) {
+            //   transfer(DialogOutlink)({ items: this.selectedItems });
+        },
+        openOutline(obj) {
+            this.linkLoader(obj).then((link) => {
+                const h = this.$createElement;
+                this.$msgbox({
+                    title: "获取外链",
+                    message: h("p", null, link),
+                    confirmButtonText: "确定",
+                });
+            });
+        },
+        openMove(obj) {
+            transfer(DialogMove)({ alias: obj.alias, isDir: obj.dirtype > 0 }).then(() => {
+                this.listRefresh();
+            });
+        },
+        openRename(obj) {
+            this.$prompt(this.$t("tips.rename"), this.$t("op.rename"), {
+                inputValue: obj.name,
+                confirmButtonText: this.$t("op.confirm"),
+                cancelButtonText: this.$t("op.cancel"),
+            }).then(({ value }) => {
+                this.$zpan.File.rename(obj.alias, value).then((ret) => {
+                    this.$message({
+                        type: "success",
+                        message: this.$t("msg.rename-success"),
+                    });
+                    this.listRefresh();
+                });
+            });
+        },
+        openRemove(obj) {
+            this.$confirm(this.$t("tips.remove"), this.$t("op.delete") + ` ${obj.name}`, {
+                type: "warning",
+                confirmButtonText: this.$t("op.confirm"),
+                cancelButtonText: this.$t("op.cancel"),
+            }).then(() => {
+                this.$zpan.File.delete(obj.alias).then((ret) => {
+                    this.$message({
+                        type: "success",
+                        message: this.$t("msg.delete-success"),
+                    });
+                    this.listRefresh();
+                });
+            });
+        },
+    }
+}
+
+export default mixin
\ No newline at end of file
diff --git a/src/components/FileExplorer/index.js b/src/components/FileExplorer/index.js
index 310beb9..1291494 100644
--- a/src/components/FileExplorer/index.js
+++ b/src/components/FileExplorer/index.js
@@ -1,5 +1,6 @@
 import FileExplorer from './FileExplorer.vue'
 
+
 const components = {
     FileExplorer: FileExplorer,
 }
diff --git a/src/components/FileViewer/Media.vue b/src/components/FileExplorer/viewer/Media.vue
similarity index 100%
rename from src/components/FileViewer/Media.vue
rename to src/components/FileExplorer/viewer/Media.vue
diff --git a/src/components/FileViewer/Picture.vue b/src/components/FileExplorer/viewer/Picture.vue
similarity index 100%
rename from src/components/FileViewer/Picture.vue
rename to src/components/FileExplorer/viewer/Picture.vue
diff --git a/src/components/FileExplorer/viewer/index.js b/src/components/FileExplorer/viewer/index.js
new file mode 100644
index 0000000..f828d85
--- /dev/null
+++ b/src/components/FileExplorer/viewer/index.js
@@ -0,0 +1,69 @@
+import MediaViewer from './Media'
+import PictureViewer from './Picture'
+import { transfer } from '@/helper'
+
+const streamTypeOpeners = {
+    "audio": openMediaPlayer,
+    "video": openMediaPlayer,
+    "image": openImageViewer,
+    "text": openEditor,
+}
+
+const extTypeOpeners = {
+    "pdf": openPDFViewer,
+    "json": openEditor,
+    "yaml": openEditor,
+    "x-yaml": openEditor,
+    "msword": openOfficeEditor,
+    "vnd.ms-excel": openOfficeEditor,
+    "vnd.ms-powerpoint": openOfficeEditor,
+    "vnd.openxmlformats-officedocument.wordprocessingml.document": openOfficeEditor,
+    "vnd.openxmlformats-officedocument.spreadsheetml.sheet": openOfficeEditor,
+    "vnd.openxmlformats-officedocument.presentationml.presentation": openOfficeEditor,
+}
+
+function openMediaPlayer(obj, link) {
+    transfer(MediaViewer)({ title: obj.name, url: link, type: obj.type })
+}
+function openImageViewer(obj, link) {
+    transfer(PictureViewer)({ title: obj.name, url: link })
+}
+function openPDFViewer(obj, link) {
+    window.open(`/viewer/pdf?link=${encodeURIComponent(link)}&title=${obj.name}`, '_blank')
+}
+function openEditor(obj, link) {
+    window.open(`/f/editor?alias=${obj.alias}`, '_blank')
+}
+function openOfficeEditor(obj, link) {
+    window.open("http://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(link));
+}
+
+class Preview {
+
+    linkLoader;
+
+    constructor(linkLoader) {
+        this.linkLoader = linkLoader
+    }
+
+    view(obj) {
+        let [t1, t2] = obj.type.split('/')
+        if (Object.keys(streamTypeOpeners).includes(t1)) {
+            this.linkLoader(obj).then(link => {
+                streamTypeOpeners[t1](obj, link)
+            })
+            return
+        }
+
+        if (Object.keys(extTypeOpeners).includes(t2)) {
+            this.linkLoader(obj).then(link => {
+                extTypeOpeners[t2](obj, link)
+            })
+            return
+        }
+
+        console.log(obj.name, t1, t2)
+    }
+}
+
+export default Preview
\ No newline at end of file
diff --git a/src/components/FileViewer/index.js b/src/components/FileViewer/index.js
deleted file mode 100644
index 82d3068..0000000
--- a/src/components/FileViewer/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import MediaViewer from './Media'
-import PictureViewer from './Picture'
-import { transfer } from '@/helper'
-
-class Preview {
-    view(type, obj, link) {
-        switch (type) {
-            case "media":
-                transfer(MediaViewer)({ title: obj.name, url: link, type: obj.type })
-                break;
-            case "image":
-                transfer(PictureViewer)({ title: obj.name, url: link })
-                break;
-            case "pdf":
-                window.open(`/viewer/pdf?link=${encodeURIComponent(link)}&title=${obj.name}`, '_blank')
-                break;
-            case "doc":
-                window.open("http://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(link));
-                break;
-            case "text":
-                window.open(`/f/editor?alias=${obj.alias}`, '_blank')
-                break;
-            default:
-                console.log(type, obj, link)
-        }
-    }
-}
-
-export default Preview
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 0700ac7..01eeb99 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,7 @@ import './plugins/axios'
 import './plugins/moment'
 import './plugins/element'
 import './plugins/fileexplorer'
+import './plugins/ctxmenu'
 import './plugins/clipboard'
 import './plugins/photoswipe'
 import './plugins/plyr'
diff --git a/src/plugins/ctxmenu.js b/src/plugins/ctxmenu.js
new file mode 100644
index 0000000..7aef2d8
--- /dev/null
+++ b/src/plugins/ctxmenu.js
@@ -0,0 +1,3 @@
+import Vue from 'vue'
+import Contextmenu from "vue-contextmenujs"
+Vue.use(Contextmenu);
\ No newline at end of file
diff --git a/src/views/home/disk/index.vue b/src/views/home/disk/index.vue
index ce38eee..7ab9cd4 100644
--- a/src/views/home/disk/index.vue
+++ b/src/views/home/disk/index.vue
@@ -19,28 +19,57 @@
   <div style="height: calc(100% - 58px)">
     <el-row class="toolbar">
       <el-dropdown size="small" style="margin-right: 10px" @command="onUploadSelect">
-        <el-button type="primary" size="small" icon="el-icon-upload" @click="onUploadSelect('file')">上传</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-upload"
+          @click="onUploadSelect('file')"
+        >上传</el-button>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="file">上传文件</el-dropdown-item>
           <el-dropdown-item command="folder">上传文件夹</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <el-dropdown size="small" @command="onCreationSelect">
-        <el-button type="primary" size="small" icon="el-icon-folder-add"  @click="openCreateFolderDiglog" plain>新建</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-folder-add"
+          @click="openCreateFolderDiglog"
+          plain
+        >新建</el-button>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="file">新建文件</el-dropdown-item>
           <el-dropdown-item command="folder">新建文件夹</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <el-button-group v-show="selectedItems.length > 0" style="margin-left: 10px">
-        <el-button type="primary" icon="el-icon-download" size="medium" plain @click="onOutlinkClick">{{ $t("disk.download") }}</el-button>
-        <!-- <el-button type="primary" icon="el-icon-share" size="medium" @click="share" plain>分享</el-button> -->
-        <el-button type="primary" icon="el-icon-delete" size="medium" plain @click="deleteSelection">{{ $t("disk.delete") }}</el-button>
-        <!-- <el-button type="primary" size="medium" plain>移动到</el-button> -->
+        <el-button
+          type="primary"
+          icon="el-icon-download"
+          size="small"
+          plain
+          <!-- @click="onOutlinkClick" -->
+        >{{ $t("disk.download") }}</el-button>
+        <!-- <el-button type="primary" icon="el-icon-share" size="small" @click="share" plain>分享</el-button> -->
+        <el-button
+          type="primary"
+          icon="el-icon-delete"
+          size="small"
+          plain
+          @click="deleteSelection"
+        >{{ $t("disk.delete") }}</el-button>
+        <!-- <el-button type="primary" size="small" plain>移动到</el-button> -->
       </el-button-group>
 
       <div style="float: right">
-        <el-input class="search" size="small" :placeholder="$t('topbar.search')" v-model="query.kw" @keyup.enter.native="listRefresh">
+        <el-input
+          class="search"
+          size="small"
+          :placeholder="$t('topbar.search')"
+          v-model="query.kw"
+          @keyup.enter.native="listRefresh"
+        >
           <i slot="prefix" class="el-input__icon el-icon-search"></i>
         </el-input>
         <i v-if="layout == 'list'" class="iconfont icon-grid" @click="layout = 'grid'"></i>
@@ -49,24 +78,19 @@
     </el-row>
 
     <!-- main -->
-    <FileExplorer :layout="layout" ref="fexp" :dataLoader="dataLoader" :linkLoader="linkLoader" :rowButtons="rowButtons" :moreButtons="moreButtons" @file-open="onFileOpen" @selection-change="onSelectionChange" />
-
-    <!-- dialog -->
-    <!-- <DialogMove ref="move" @completed="listRefresh"></DialogMove>
-    <DialogShare ref="share"></DialogShare>
-    <DialogUpload ref="uploader" :sid="getSid()" :dest-dir="query.dir" @completed="listRefresh"></DialogUpload>
-    <DialogOutlink ref="outlink"></DialogOutlink> -->
+    <FileExplorer
+      :layout="layout"
+      ref="fexp"
+      :dataLoader="dataLoader"
+      :linkLoader="linkLoader"
+      @file-action="onFileAction"
+      @selection-change="onSelectionChange"
+    />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import { transfer } from "@/helper";
-import FileViewer from "@/components/FileViewer";
-import DialogMove from "./components/DialogMove";
-import DialogShare from "./components/DialogShare";
-import DialogUpload from "./components/DialogUpload";
-import DialogOutlink from "./components/DialogOutlink";
 import { CSMixin } from "@/libs/mixin";
 export default {
   mixins: [CSMixin],
@@ -135,15 +159,6 @@ export default {
     listRefresh() {
       this.$refs.fexp.listRefresh();
     },
-    openDownload(obj) {
-      this.linkLoader(obj).then((link) => {
-        let a = document.createElement("a");
-        a.setAttribute("href", link);
-        a.setAttribute("download", obj.name);
-        a.click();
-        a.remove();
-      });
-    },
     openCreateFolderDiglog() {
       this.$prompt(this.$t("tips.create-folder"), this.$t("op.create-folder"), {
         confirmButtonText: this.$t("op.confirm"),
@@ -160,14 +175,14 @@ export default {
       });
     },
     openCreateFileDiglog() {
-      var filename 
+      var filename
       var fileext = '.md'
       var message = <el-input placeholder="请输入内容" v-model={filename} class="input-with-select">
-    <el-select v-model={fileext} slot="append" placeholder="请选择" style="width: 70px">
-      <el-option label=".txt" value=".txt"></el-option>
-      <el-option label=".md" value=".md"></el-option>
-    </el-select>
-  </el-input>
+        <el-select v-model={fileext} slot="append" placeholder="请选择" style="width: 70px">
+          <el-option label=".txt" value=".txt"></el-option>
+          <el-option label=".md" value=".md"></el-option>
+        </el-select>
+      </el-input>
       this.$msgbox({
         title: this.$t("op.create-file"),
         message: message,
@@ -175,20 +190,20 @@ export default {
         confirmButtonText: this.$t("op.confirm"),
         cancelButtonText: this.$t("op.cancel"),
       }).then(({ value }) => {
-          let fileObj = {
-            file: new File([""], value, {type: "text/plain"}),
-            filename: value
-          }
+        let fileObj = {
+          file: new File([""], value, { type: "text/plain" }),
+          filename: value
+        }
 
-          this.$zpan.File.upload(this.getSid(), fileObj).then((data) => {
-            window.open(`f/editor?alias=${data.alias}`, "_blank")
-          });
+        this.$zpan.File.upload(this.getSid(), fileObj).then((data) => {
+          window.open(`f/editor?alias=${data.alias}`, "_blank")
+        });
       });
     },
     onUploadSelect(cmd) {
       this.$emit("upload-action", { type: cmd, sid: this.getSid(), dist: this.query.dir });
     },
-    onCreationSelect(cmd){
+    onCreationSelect(cmd) {
       switch (cmd) {
         case 'file':
           this.openCreateFileDiglog()
@@ -200,64 +215,8 @@ export default {
           break;
       }
     },
-    onFileOpen(type, obj, link) {
-      if (obj.type.startsWith("audio")) {
-        this.$emit("audio-open", obj, link);
-        return;
-      }
-
-      new FileViewer().view(type, obj, link);
-    },
-    onOutlinkClick() {
-      transfer(DialogOutlink)({ items: this.selectedItems });
-    },
-    share(obj) {
-      transfer(DialogShare)({ alias: obj.alias });
-    },
-    viewlink(obj) {
-      this.linkLoader(obj).then((link) => {
-        const h = this.$createElement;
-        this.$msgbox({
-          title: "获取外链",
-          message: h("p", null, link),
-          confirmButtonText: "确定",
-        });
-      });
-    },
-    move(obj) {
-      transfer(DialogMove)({ alias: obj.alias, isDir: obj.dirtype > 0 }).then(() => {
-        this.listRefresh();
-      });
-    },
-    rename(obj) {
-      this.$prompt(this.$t("tips.rename"), this.$t("op.rename"), {
-        inputValue: obj.name,
-        confirmButtonText: this.$t("op.confirm"),
-        cancelButtonText: this.$t("op.cancel"),
-      }).then(({ value }) => {
-        this.$zpan.File.rename(obj.alias, value).then((ret) => {
-          this.$message({
-            type: "success",
-            message: this.$t("msg.rename-success"),
-          });
-          this.listRefresh();
-        });
-      });
-    },
-    remove(obj) {
-      this.$confirm(this.$t("tips.remove"), this.$t("op.delete") + ` ${obj.name}`, {
-        type: "warning",
-        confirmButtonText: this.$t("op.confirm"),
-        cancelButtonText: this.$t("op.cancel"),
-      }).then(() => {
-        this.$zpan.File.delete(obj.alias).then((ret) => {
-          this.$message({
-            type: "success",
-            message: this.$t("msg.delete-success"),
-          });
-          this.listRefresh();
-        });
-      });
+    onFileAction(){
+      
     },
     onSelectionChange(selection) {
       this.selectedItems = selection;
diff --git a/yarn.lock b/yarn.lock
index 8fafddb..590cb33 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9700,6 +9700,11 @@ vue-cli-plugin-vuetify@^2.4.5:
     semver "^7.1.2"
     shelljs "^0.8.3"
 
+vue-contextmenujs@^1.3.13:
+  version "1.3.13"
+  resolved "https://registry.npmmirror.com/vue-contextmenujs/download/vue-contextmenujs-1.3.13.tgz#3bdae023c7bd42095e78da4258000250d50ab8ef"
+  integrity sha1-O9rgI8e9QgleeNpCWAACUNUKuO8=
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"

From 4b784cd3ad1958eb87d49b6d6922153eed2c0ec6 Mon Sep 17 00:00:00 2001
From: saltbo <saltbo@foxmail.com>
Date: Tue, 1 Feb 2022 14:11:43 +0800
Subject: [PATCH 4/5] refactor: update the dialog part 1

---
 package.json                                  |   1 +
 src/components/FileExplorer/FileExplorer.vue  | 134 +++++-----
 .../FileExplorer/components/DialogConfirm.vue |  34 +++
 .../components/DialogInputConfirm.vue         |  38 +++
 src/components/FileExplorer/explorer_mixin.js | 132 ----------
 .../GridExplorer.vue => layout/grid.vue}      |   6 +-
 src/components/FileExplorer/layout/mixin.js   |  17 ++
 .../TableExplorer.vue => layout/table.vue}    |  24 +-
 src/components/FileExplorer/libs/action.js    |  45 ++++
 src/components/FileExplorer/libs/icons.js     |  46 ++++
 src/components/FileExplorer/libs/userop.js    |  68 ++++++
 src/components/Loading/index.vue              |  58 +++++
 src/components/Toast/index.vue                |  60 +++++
 src/components/Topbar/index copy.vue          | 231 ++++++++++++++++++
 src/components/Topbar/index.vue               | 127 +++-------
 src/components/Uploader/index.vue             |   1 +
 src/components/index.js                       |  30 +++
 src/components/store.js                       |  23 ++
 src/helper.js                                 |   3 +-
 src/libs/mixin/dialog.js                      |   8 +-
 src/plugins/vuetify.js                        |  11 +
 src/views/home/disk/index.vue                 | 116 +++------
 src/views/home/index.vue                      |  25 +-
 src/views/home/share/home.vue                 |   4 +-
 yarn.lock                                     |   7 +-
 25 files changed, 825 insertions(+), 424 deletions(-)
 create mode 100644 src/components/FileExplorer/components/DialogConfirm.vue
 create mode 100644 src/components/FileExplorer/components/DialogInputConfirm.vue
 delete mode 100644 src/components/FileExplorer/explorer_mixin.js
 rename src/components/FileExplorer/{explorer/GridExplorer.vue => layout/grid.vue} (87%)
 create mode 100644 src/components/FileExplorer/layout/mixin.js
 rename src/components/FileExplorer/{explorer/TableExplorer.vue => layout/table.vue} (79%)
 create mode 100644 src/components/FileExplorer/libs/action.js
 create mode 100644 src/components/FileExplorer/libs/icons.js
 create mode 100644 src/components/FileExplorer/libs/userop.js
 create mode 100644 src/components/Loading/index.vue
 create mode 100644 src/components/Toast/index.vue
 create mode 100644 src/components/Topbar/index copy.vue
 create mode 100644 src/components/index.js
 create mode 100644 src/components/store.js

diff --git a/package.json b/package.json
index ebc4c8a..8ae81ba 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "vue-template-compiler": "^2.6.14",
     "vue-upload-component": "^2.8.22",
     "vuetify-loader": "^1.7.0",
+    "vuetify-toast-snackbar": "^0.6.1",
     "vuex": "^3.6.2"
   },
   "eslintConfig": {
diff --git a/src/components/FileExplorer/FileExplorer.vue b/src/components/FileExplorer/FileExplorer.vue
index 3414ab2..b635006 100644
--- a/src/components/FileExplorer/FileExplorer.vue
+++ b/src/components/FileExplorer/FileExplorer.vue
@@ -2,12 +2,7 @@
   <div style="height: 100%">
     <el-row class="header">
       <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
-        <el-breadcrumb-item
-          v-for="item in breadcrumb"
-          :key="item.dir"
-          :index="item.dir"
-          :to="buildQuery(item.dir)"
-        >{{ item.name }}</el-breadcrumb-item>
+        <el-breadcrumb-item v-for="item in breadcrumb" :key="item.dir" :index="item.dir" :to="buildQuery(item.dir)">{{ item.name }}</el-breadcrumb-item>
       </el-breadcrumb>
       <span class="loadtips" style="float: right">{{ loadedtips }}</span>
     </el-row>
@@ -23,8 +18,11 @@
 </template>
 
 <script>
-import GridExplorer from "./explorer/GridExplorer";
-import TableExplorer from "./explorer/TableExplorer";
+import GridExplorer from "./layout/grid";
+import TableExplorer from "./layout/table";
+import FileViewer from "./viewer";
+import { registerAction, openShare, openOutline, openMove, openRename, openRemove } from "./libs/userop"
+import buildIcon from "./libs/icons"
 export default {
   components: {
     GridExplorer,
@@ -41,6 +39,10 @@ export default {
     },
     dataLoader: Function,
     linkLoader: Function,
+    actionMove: Function,
+    actionCopy: Function,
+    actionRename: Function,
+    actionRemove: Function,
   },
   data() {
     return {
@@ -63,7 +65,8 @@ export default {
     rows: {
       deep: true,
       handler(nv, ov) {
-        this.$emit("selection-change", nv.filter(el => el.selected == true));
+        this.selection = nv.filter(el => el.selected == true)
+        this.$emit("selection-change", this.selection);
       }
     }
   },
@@ -100,9 +103,6 @@ export default {
 
       this.listRefresh();
     },
-    onSelectionChange(selection) {
-      // this.$emit("selection-change", selection);
-    },
     onScrollEnd() {
       if (this.total != 0 && this.rows.length == this.total) {
         console.log("no more");
@@ -111,52 +111,6 @@ export default {
 
       this.listRefresh(this.offset, this.limit);
     },
-    buildIcon(matter) {
-      if (matter.dirtype > 0) {
-        matter.icon = { name: 'folder', color: '#ffc402' }
-        return matter
-      }
-
-
-      let type = matter.type
-      let [t1, t2] = type.split('/')
-      console.log(type, '=>', t1, t2)
-
-      let t1Icons = {
-        audio: { name: 'book-music', color: 'rgb(55, 159, 211)' },
-        video: { name: 'file-video', color: 'rgb(128, 149, 255)' },
-        image: { name: 'file-image', color: 'rgb(18, 150, 219)' },
-        text: { name: 'file-document', color: 'rgb(13, 71, 161)' },
-        zip: { name: 'zip-box', color: 'rgb(244, 196, 70)' },
-        'x-zip': { name: 'zip-box', color: 'rgb(244, 196, 70)' },
-        json: { name: 'code-json', color: '' },
-        xml: { name: 'xml', color: '' },
-      }
-
-      let t2Icons = {
-        pdf: { name: 'file-pdf-box', color: '' },
-        psd: { name: 'file-psd', color: '' },
-        rtf: { name: 'file-rtf', color: '' },
-        markdown: { name: 'language-markdown', color: '' },
-        xml: { name: 'xml', color: '' },
-        'msword': { name: 'file-word', color: '' },
-        'vnd.ms-excel': { name: 'file-excel', color: '' },
-        'vnd.ms-powerpoint': { name: 'file-powerpoint', color: '' },
-        'vnd.openxmlformats-officedocument.wordprocessingml.document': { name: 'file-word', color: '' },
-        'vnd.openxmlformats-officedocument.spreadsheetml.sheet': { name: 'file-excel', color: '' },
-        'vnd.openxmlformats-officedocument.presentationml.presentation': { name: 'file-powerpoint', color: '' },
-      }
-
-      if (Object.keys(t2Icons).includes(t2)) {
-        matter.icon = t2Icons[t2]
-      } else if (Object.keys(t1Icons).includes(t1)) {
-        matter.icon = t1Icons[t1]
-      } else {
-        matter.icon = { name: 'file', color: '#c9c9c9' }
-      }
-
-      return matter
-    },
     listRefresh(offset, limit) {
       if (!offset) {
         offset = 0;
@@ -170,7 +124,7 @@ export default {
       let dir = this.currentDir ? this.currentDir : "";
       this.dataLoader(dir, offset, limit).then((data) => {
         if (offset == 0) {
-          this.rows = data.list.map(this.buildIcon);
+          this.rows = data.list.map(buildIcon);
           this.offset = limit;
         } else {
           this.rows = this.rows.concat(data.list);
@@ -189,12 +143,74 @@ export default {
       let query = !dir ? {} : { dir: dir };
       return { query: query };
     },
+    openCtxMenu(event, item) {
+      this.$contextmenu({
+        items: [
+          { label: "打开", onClick: () => { this.onNameClick(item) }, divided: true },
+          { label: "下载", onClick: () => this.openDownload(item) },
+          { label: "分享", onClick: () => openShare(item) },
+          // { label: "获取链接", onClick: () => openOutline(item), divided: true },
+          // { label: "复制到", onClick: () => this.openCopy(item) },
+          { label: "移动到", onClick: () => openMove(item) },
+          { label: "重命名", onClick: () => openRename(item).then(this.listRefresh), divided: true },
+          { label: "删除", onClick: () => openRemove(item).then(this.listRefresh) }
+        ],
+        event,
+        //x: event.clientX,
+        //y: event.clientY,
+        customClass: "custom-class",
+        zIndex: 3,
+        minWidth: 230
+      });
+      return false;
+    },
+    onNameClick(item) {
+      // open a folder
+      if (item.dirtype) {
+        this.$router.push(this.buildQuery(item.fullpath));
+        return;
+      }
+
+      // todo 支持外部查看器打开文件
+
+      // open file by the built-in file viewer
+      new FileViewer(this.linkLoader).view(item);
+    },
+    buildQuery(dir) {
+      if (dir.startsWith(this.rootDir)) {
+        dir = dir.replace(this.rootDir, "");
+      }
+
+      let query = !dir ? {} : { dir: dir };
+      return { query: query };
+    },
+    openDownload(obj) {
+      this.linkLoader(obj).then((link) => {
+        let a = document.createElement("a");
+        a.setAttribute("href", link);
+        a.setAttribute("download", obj.name);
+        a.click();
+        a.remove();
+      });
+    },
+    openOutline() {
+      openOutline(...this.selection)
+    },
+    openMove() {
+      openMove(...this.selection)
+    },
+    openRemove() {
+      openRemove(...this.selection)
+    },
   },
   mounted() {
     this.currentDir = this.$route.query.dir ? this.$route.query.dir : "";
 
     // this.listRefresh();
     setTimeout(this.listRefresh, 100)
+    registerAction('move', this.actionMove)
+    registerAction('remove', this.actionRemove)
+    registerAction('rename', this.actionRename)
   },
 };
 </script>
diff --git a/src/components/FileExplorer/components/DialogConfirm.vue b/src/components/FileExplorer/components/DialogConfirm.vue
new file mode 100644
index 0000000..6351f7c
--- /dev/null
+++ b/src/components/FileExplorer/components/DialogConfirm.vue
@@ -0,0 +1,34 @@
+<template>
+    <v-dialog v-model="visible" width="500">
+        <v-card>
+            <v-card-title>{{ title }}</v-card-title>
+            <v-card-text>{{ description }}</v-card-text>
+
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="primary" text @click="finish">确认</v-btn>
+                <v-btn text @click="close">取消</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import { CSMixin, DialogMixin } from "@/libs/mixin";
+export default {
+    mixins: [CSMixin, DialogMixin],
+    props: {
+        title: String,
+        description: String,
+    },
+    data() {
+        return {
+        }
+    }
+
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/FileExplorer/components/DialogInputConfirm.vue b/src/components/FileExplorer/components/DialogInputConfirm.vue
new file mode 100644
index 0000000..eeb49e6
--- /dev/null
+++ b/src/components/FileExplorer/components/DialogInputConfirm.vue
@@ -0,0 +1,38 @@
+<template>
+    <v-dialog v-model="visible" width="500">
+        <v-card>
+            <v-card-title>{{ title }}</v-card-title>
+            <v-card-text>
+                <label>{{ description }}</label>
+                <v-text-field v-model="value" label="新名称*" required></v-text-field>
+            </v-card-text>
+
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="primary" text @click="finish(value)">确认</v-btn>
+                <v-btn text @click="close">取消</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import { CSMixin, DialogMixin } from "@/libs/mixin";
+export default {
+    mixins: [CSMixin, DialogMixin],
+    props: {
+        value: String,
+        title: String,
+        description: String,
+    },
+    data() {
+        return {
+        }
+    }
+
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/FileExplorer/explorer_mixin.js b/src/components/FileExplorer/explorer_mixin.js
deleted file mode 100644
index e7e2b8f..0000000
--- a/src/components/FileExplorer/explorer_mixin.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import { transfer } from "@/helper";
-import FileViewer from "./viewer";
-import DialogMove from "./components/DialogMove";
-import DialogShare from "./components/DialogShare";
-import DialogUpload from "./components/DialogUpload";
-import DialogOutlink from "./components/DialogOutlink";
-
-const mixin = {
-    props: {
-        value: Array,
-        linkLoader: Function,
-        loading: false,
-    },
-    data() {
-        return {
-            data: [],
-        }
-    },
-    watch: {
-        value(nval, oval) {
-            this.data = nval;
-        },
-    },
-    methods: {
-        openCtxMenu(event, item) {
-            this.$contextmenu({
-                items: [
-                    { label: "打开", onClick: () => { this.onNameClick(item) }, divided: true },
-                    { label: "下载", onClick: () => this.openDownload(item) },
-                    { label: "分享", onClick: () => this.openShare(item) },
-                    { label: "获取链接", onClick: () => this.openOutline(item), divided: true },
-                    // { label: "复制到", onClick: () => this.openCopy(item) },
-                    { label: "移动到", onClick: () => this.openMove(item) },
-                    { label: "重命名", onClick: () => this.openRename(item), divided: true },
-                    { label: "删除", onClick: () => this.openRemove(item) }
-                ],
-                event,
-                //x: event.clientX,
-                //y: event.clientY,
-                customClass: "custom-class",
-                zIndex: 3,
-                minWidth: 230
-            });
-            return false;
-        },
-        buildQuery(dir) {
-            if (dir.startsWith(this.rootDir)) {
-                dir = dir.replace(this.rootDir, "");
-            }
-
-            let query = !dir ? {} : { dir: dir };
-            return { query: query };
-        },
-        onNameClick(item) {
-            // open a folder
-            if (item.dirtype) {
-                this.$router.push(this.buildQuery(item.fullpath));
-                return;
-            }
-
-            // todo 支持外部查看器打开文件
-
-            // open file by the built-in file viewer
-            new FileViewer(this.linkLoader).view(item);
-        },
-        onCtxMenuClick(action, item) {
-            console.log(action, item)
-        },
-        openDownload(obj) {
-            this.linkLoader(obj).then((link) => {
-                let a = document.createElement("a");
-                a.setAttribute("href", link);
-                a.setAttribute("download", obj.name);
-                a.click();
-                a.remove();
-            });
-        },
-        openShare(obj) {
-            transfer(DialogShare)({ alias: obj.alias });
-        },
-        openOutlinkMulti(obj) {
-            //   transfer(DialogOutlink)({ items: this.selectedItems });
-        },
-        openOutline(obj) {
-            this.linkLoader(obj).then((link) => {
-                const h = this.$createElement;
-                this.$msgbox({
-                    title: "获取外链",
-                    message: h("p", null, link),
-                    confirmButtonText: "确定",
-                });
-            });
-        },
-        openMove(obj) {
-            transfer(DialogMove)({ alias: obj.alias, isDir: obj.dirtype > 0 }).then(() => {
-                this.listRefresh();
-            });
-        },
-        openRename(obj) {
-            this.$prompt(this.$t("tips.rename"), this.$t("op.rename"), {
-                inputValue: obj.name,
-                confirmButtonText: this.$t("op.confirm"),
-                cancelButtonText: this.$t("op.cancel"),
-            }).then(({ value }) => {
-                this.$zpan.File.rename(obj.alias, value).then((ret) => {
-                    this.$message({
-                        type: "success",
-                        message: this.$t("msg.rename-success"),
-                    });
-                    this.listRefresh();
-                });
-            });
-        },
-        openRemove(obj) {
-            this.$confirm(this.$t("tips.remove"), this.$t("op.delete") + ` ${obj.name}`, {
-                type: "warning",
-                confirmButtonText: this.$t("op.confirm"),
-                cancelButtonText: this.$t("op.cancel"),
-            }).then(() => {
-                this.$zpan.File.delete(obj.alias).then((ret) => {
-                    this.$message({
-                        type: "success",
-                        message: this.$t("msg.delete-success"),
-                    });
-                    this.listRefresh();
-                });
-            });
-        },
-    }
-}
-
-export default mixin
\ No newline at end of file
diff --git a/src/components/FileExplorer/explorer/GridExplorer.vue b/src/components/FileExplorer/layout/grid.vue
similarity index 87%
rename from src/components/FileExplorer/explorer/GridExplorer.vue
rename to src/components/FileExplorer/layout/grid.vue
index 583dd10..66a8b25 100644
--- a/src/components/FileExplorer/explorer/GridExplorer.vue
+++ b/src/components/FileExplorer/layout/grid.vue
@@ -4,8 +4,8 @@
       class="explorer-item"
       v-for="item in data"
       :key="item.alias"
-      @click="onNameClick(item)"
-      @contextmenu.prevent="(e) => { openCtxMenu(e, item) }"
+      @click="$parent.onNameClick(item)"
+      @contextmenu.prevent="(e) => { $parent.openCtxMenu(e, item) }"
     >
       <v-icon :color="item.icon.color" large>mdi-{{ item.icon.name }}</v-icon>
       <p>{{ item.name }}</p>
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import mixin from "../explorer_mixin";
+import mixin from "./mixin";
 export default {
   mixins: [mixin],
   data() {
diff --git a/src/components/FileExplorer/layout/mixin.js b/src/components/FileExplorer/layout/mixin.js
new file mode 100644
index 0000000..e7c9c02
--- /dev/null
+++ b/src/components/FileExplorer/layout/mixin.js
@@ -0,0 +1,17 @@
+const mixin = {
+    props: {
+        value: Array,
+    },
+    data() {
+        return {
+            data: [],
+        }
+    },
+    watch: {
+        value(nval, oval) {
+            this.data = nval;
+        },
+    },
+}
+
+export default mixin
\ No newline at end of file
diff --git a/src/components/FileExplorer/explorer/TableExplorer.vue b/src/components/FileExplorer/layout/table.vue
similarity index 79%
rename from src/components/FileExplorer/explorer/TableExplorer.vue
rename to src/components/FileExplorer/layout/table.vue
index 3b8836d..30f1691 100644
--- a/src/components/FileExplorer/explorer/TableExplorer.vue
+++ b/src/components/FileExplorer/layout/table.vue
@@ -4,12 +4,7 @@
             <thead>
                 <tr>
                     <th class="text-left">
-                        <v-simple-checkbox
-                            style="width: 2px"
-                            v-model="selectedAll"
-                            :ripple="false"
-                            :indeterminate="selectedSome"
-                        ></v-simple-checkbox>
+                        <v-simple-checkbox style="width: 2px" v-model="selectedAll" :ripple="false" :indeterminate="selectedSome"></v-simple-checkbox>
                     </th>
                     <th class="text-left">{{ $t('fth.name') }}</th>
                     <th class="col-size text-left">{{ $t('fth.size') }}</th>
@@ -18,28 +13,21 @@
             </thead>
             <tbody>
                 <tr
-                    v-for="(item,idx) in data"
+                    v-for="(item, idx) in data"
                     :key="item.alias"
                     @click="onRowClick(idx, item)"
                     :class="{ rowHighlight: highlightIdx == idx }"
                     v-intersect="(entries, observer, isIntersecting) => { infiniteScrolling(idx, entries, observer, isIntersecting) }"
-                    @contextmenu.prevent="(e) => { openCtxMenu(e, item) }"
+                    @contextmenu.prevent="(e) => { $parent.openCtxMenu(e, item) }"
                 >
                     <td class="col-select">
-                        <v-simple-checkbox
-                            style="width: 2px"
-                            v-model="item.selected"
-                            :ripple="false"
-                        ></v-simple-checkbox>
+                        <v-simple-checkbox style="width: 2px" v-model="item.selected" :ripple="false"></v-simple-checkbox>
                     </td>
                     <td class="col-first">
                         <v-icon :color="item.icon.color" large>mdi-{{ item.icon.name }}</v-icon>
                         <div class="col-name">
                             <v-hover v-slot="{ hover }">
-                                <span
-                                    :class="{ 'name-on-hover': hover }"
-                                    @click="onNameClick(item)"
-                                >{{ item.name }}</span>
+                                <span :class="{ 'name-on-hover': hover }" @click="$parent.onNameClick(item)">{{ item.name }}</span>
                             </v-hover>
                             <span class="col-time-mobile">{{ item.updated | moment }}</span>
                         </div>
@@ -53,7 +41,7 @@
 </template>
 
 <script>
-import mixin from "../explorer_mixin";
+import mixin from "./mixin";
 export default {
     mixins: [mixin],
     data() {
diff --git a/src/components/FileExplorer/libs/action.js b/src/components/FileExplorer/libs/action.js
new file mode 100644
index 0000000..f2eeab7
--- /dev/null
+++ b/src/components/FileExplorer/libs/action.js
@@ -0,0 +1,45 @@
+
+import { Toast, Loading } from "@/components"
+
+var actions = {}
+var vToast, vLoading
+
+export default {
+    register(action, actionFunc) {
+        if (!vToast) {
+            vToast = Toast()
+            vLoading = Loading()
+            vToast.success("test")
+        }
+
+        actions[action] = actionFunc
+    },
+
+    do(action, ...params) {
+        return new Promise((resolve, reject) => {
+            actions[action](...params).then((ret) => {
+                vToast.success(`${action}成功`)
+                resolve()
+            }).catch(() => {
+                vToast.error(`${action}失败`)
+                reject()
+            })
+        })
+    },
+    doBatch(action, ...matters) {
+        return new Promise((resolve, reject) => {
+            vLoading.show()
+            Promise.all(matters.map((obj) => {
+                return actions[action](obj.alias);
+            })).then((ret) => {
+                vLoading.hide()
+                vToast.success(`${action}成功`)
+                resolve()
+            }).catch(() => {
+                vLoading.hide()
+                vToast.error(`${action}失败`)
+                reject()
+            });
+        })
+    }
+}
\ No newline at end of file
diff --git a/src/components/FileExplorer/libs/icons.js b/src/components/FileExplorer/libs/icons.js
new file mode 100644
index 0000000..4387ea4
--- /dev/null
+++ b/src/components/FileExplorer/libs/icons.js
@@ -0,0 +1,46 @@
+export default function buildIcon(matter) {
+    if (matter.dirtype > 0) {
+        matter.icon = { name: 'folder', color: '#ffc402' }
+        return matter
+    }
+
+
+    let type = matter.type
+    let [t1, t2] = type.split('/')
+    console.log(type, '=>', t1, t2)
+
+    let t1Icons = {
+        audio: { name: 'book-music', color: 'rgb(55, 159, 211)' },
+        video: { name: 'file-video', color: 'rgb(128, 149, 255)' },
+        image: { name: 'file-image', color: 'rgb(18, 150, 219)' },
+        text: { name: 'file-document', color: 'rgb(13, 71, 161)' },
+        zip: { name: 'zip-box', color: 'rgb(244, 196, 70)' },
+        'x-zip': { name: 'zip-box', color: 'rgb(244, 196, 70)' },
+        json: { name: 'code-json', color: '' },
+        xml: { name: 'xml', color: '' },
+    }
+
+    let t2Icons = {
+        pdf: { name: 'file-pdf-box', color: '' },
+        psd: { name: 'file-psd', color: '' },
+        rtf: { name: 'file-rtf', color: '' },
+        markdown: { name: 'language-markdown', color: '' },
+        xml: { name: 'xml', color: '' },
+        'msword': { name: 'file-word', color: '' },
+        'vnd.ms-excel': { name: 'file-excel', color: '' },
+        'vnd.ms-powerpoint': { name: 'file-powerpoint', color: '' },
+        'vnd.openxmlformats-officedocument.wordprocessingml.document': { name: 'file-word', color: '' },
+        'vnd.openxmlformats-officedocument.spreadsheetml.sheet': { name: 'file-excel', color: '' },
+        'vnd.openxmlformats-officedocument.presentationml.presentation': { name: 'file-powerpoint', color: '' },
+    }
+
+    if (Object.keys(t2Icons).includes(t2)) {
+        matter.icon = t2Icons[t2]
+    } else if (Object.keys(t1Icons).includes(t1)) {
+        matter.icon = t1Icons[t1]
+    } else {
+        matter.icon = { name: 'file', color: '#c9c9c9' }
+    }
+
+    return matter
+}
\ No newline at end of file
diff --git a/src/components/FileExplorer/libs/userop.js b/src/components/FileExplorer/libs/userop.js
new file mode 100644
index 0000000..39c8b8f
--- /dev/null
+++ b/src/components/FileExplorer/libs/userop.js
@@ -0,0 +1,68 @@
+import { transfer } from "@/helper";
+import action from "./action"
+
+import DialogConfirm from "../components/DialogConfirm";
+import DialogInputConfirm from "../components/DialogInputConfirm";
+import DialogMove from "../components/DialogMove";
+import DialogShare from "../components/DialogShare";
+import DialogUpload from "../components/DialogUpload";
+import DialogOutlink from "../components/DialogOutlink";
+
+
+export function registerAction(name, actionFunc) {
+    action.register(name, actionFunc)
+}
+
+export function openShare(obj) {
+    transfer(DialogShare)({ alias: obj.alias });
+}
+
+export function openOutline(obj) {
+    //   transfer(DialogOutlink)({ items: this.selectedItems });
+
+    // this.linkLoader(obj).then((link) => {
+    //     const h = this.$createElement;
+    //     this.$msgbox({
+    //       title: "获取外链",
+    //       message: h("p", null, link),
+    //       confirmButtonText: "确定",
+    //     });
+    //   });
+}
+
+export function openRename(matter) {
+    return new Promise((resolve, reject) => {
+        transfer(DialogInputConfirm)({ title: "重命名", description: "输入 xxx 的新名称:", value: matter.name }).then((newName) => {
+            action.do('rename', matter.alias, newName).then(resolve).catch(reject)
+        });
+    })
+}
+
+export function openRemove(...matters) {
+    return new Promise((resolve, reject) => {
+        transfer(DialogConfirm)({ title: "删除", description: "确认删除 xxx 吗", matters: matters }).then(() => {
+            action.doBatch("remove", ...matters).then(resolve).catch(reject)
+        });
+    })
+}
+
+export function openMove(...matters) {
+    return new Promise((resolve, reject) => {
+        transfer(DialogMove)({ title: "移动", matters: matters }).then(() => {
+            action.doBatch("move", ...matters).then(resolve).catch(reject)
+        });
+    })
+}
+
+    //   this.$confirm(this.$t("tips.batch-delete"), this.$t("op.batch-delete"), {
+    //     type: "warning",
+    //     confirmButtonText: this.$t("op.confirm"),
+    //     cancelButtonText: this.$t("op.cancel"),
+    //   }).then(() => {
+    //     const loading = this.$loading({
+    //       lock: true,
+    //       text: this.$t("tips.deleting"),
+    //       spinner: "el-icon-loading",
+    //       background: "rgba(0, 0, 0, 0.7)",
+    //     });
+
diff --git a/src/components/Loading/index.vue b/src/components/Loading/index.vue
new file mode 100644
index 0000000..f0eee5a
--- /dev/null
+++ b/src/components/Loading/index.vue
@@ -0,0 +1,58 @@
+<template>
+    <v-overlay :value="overlay" v-bind="options.overlayProps">
+        <v-progress-circular v-bind="options.spinnerProps"></v-progress-circular>
+    </v-overlay>
+</template>
+
+<script>
+export default {
+    inheritAttrs: true,
+    props: {
+        spinnerProps: Object,
+        overlayProps: Object
+    },
+    data() {
+        return {
+            overlay: false,
+            defaultProps: {
+                spinnerProps: {
+                    color: "primary",
+                    value: 100,
+                    indeterminate: true,
+                    size: 80
+                },
+                overlayProps: {}
+            },
+            options: {
+                spinnerProps: {},
+                overlayProps: {}
+            }
+        };
+    },
+    methods: {
+        show() {
+            this.overlay = true;
+        },
+        hide() {
+            this.overlay = false;
+        },
+        mergeProps() {
+            //merge snipper props
+            this.options.spinnerProps = {
+                ...this.defaultProps.spinnerProps,
+                ...this.$props.spinnerProps
+            };
+            //merge overlay props
+            this.options.overlayProps = {
+                ...this.defaultProps.overlayProps,
+                ...this.$props.overlayProps
+            };
+        }
+    },
+    mounted() {
+        this.mergeProps();
+    }
+};
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/src/components/Toast/index.vue b/src/components/Toast/index.vue
new file mode 100644
index 0000000..e85189b
--- /dev/null
+++ b/src/components/Toast/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="toast">
+        <template v-for="(item, index) in $store.state.msgPool">
+            <div class="d-flex justify-center" transition="slide-y-transition" :key="index">
+                <template v-if="item.light == false" transition="scale-transition">
+                    <v-alert dense :type="item.type">{{ item.message }}</v-alert>
+                </template>
+                <template v-if="item.light == true" transition="scale-transition">
+                    <v-alert dense :type="item.type" outlined>{{ item.message }}</v-alert>
+                </template>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visable: false,
+            timeout: 3000,
+            type: "info",
+            color: "green",
+            msg: ""
+        }
+    },
+    methods: {
+        success(data) { this.show("success", data) },
+        error(data) { this.show("error", data) },
+        info(data) { this.show("info", data) },
+        warning(data) { this.show("warning", data) },
+        show(type, data) {
+            this.$store.commit("message", {
+                type: type,
+                message: data.message ? data.message : data,
+                time: data.time ? data.time : 3000,
+                light: data.light ? data.light : false
+            })
+        },
+    },
+    mounted() {
+        console.log(1111, this.$store)
+        this.success("test success")
+    }
+}
+</script>
+
+<style>
+.toast {
+    top: 30px;
+    left: 50%;
+    z-index: 9999;
+    display: flex;
+    position: fixed;
+    min-width: 300px;
+    max-width: 460px;
+    flex-direction: column;
+    transform: translateX(-50%);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Topbar/index copy.vue b/src/components/Topbar/index copy.vue
new file mode 100644
index 0000000..6a95545
--- /dev/null
+++ b/src/components/Topbar/index copy.vue	
@@ -0,0 +1,231 @@
+<template>
+  <el-header>
+    <div class="logo" @click="onLogoClick">
+      <img src="@/assets/logo.png" alt="ZPan" />
+    </div>
+    <el-menu
+      v-if="showMenu"
+      class="navbar"
+      :default-active="menuActive"
+      mode="horizontal"
+      style="width: 100%"
+      router
+    >
+      <el-menu-item
+        v-for="(menu, index) in menus.slice(0, 5)"
+        :key="index"
+        :index="`/${menu.name}`"
+      >{{ menu.title }}</el-menu-item>
+
+      <el-submenu index="more" v-show="menus.length > 5">
+        <template slot="title">更多</template>
+        <el-menu-item
+          v-for="(menu, index) in menus.slice(5)"
+          :key="index"
+          :index="menu.path"
+        >{{ menu.title }}</el-menu-item>
+      </el-submenu>
+    </el-menu>
+
+    <div v-if="logined" style="position: absolute; right: 20px">
+      <!-- 音乐播放器 -->
+      <el-popover
+        v-if="alistVisible"
+        ref="alist"
+        placement="top"
+        width="500"
+        style="margin-right: 20px"
+      >
+        <i slot="reference" class="el-icon-service"></i>
+
+        <zp-aplayer ref="aplayer"></zp-aplayer>
+      </el-popover>
+
+      <!-- 任务管理器 -->
+      <el-popover ref="ulist" placement="bottom-end" width="500" style="margin-right: 20px">
+        <i slot="reference" class="el-icon-sort">
+          <el-badge v-show="ulistTotal" :value="ulistTotal" style="top: -15px"></el-badge>
+        </i>
+
+        <zp-uploader
+          ref="uploader"
+          @uploadAdded="$refs.ulist.doShow()"
+          @utotal-change="onUTotalChange"
+        ></zp-uploader>
+      </el-popover>
+
+      <el-dropdown trigger="click" @command="onDropdown" @visible-change="onVisible">
+        <el-avatar
+          :size="30"
+          :src="profile.avatar"
+          style="vertical-align: middle; margin-right: 4px"
+        ></el-avatar>
+        <span>{{ profile.nickname }}</span>
+        <el-dropdown-menu slot="dropdown" style="width: 200px">
+          <div style="margin: auto 20px">
+            <el-row style="text-align: center; margin: 10px 0">
+              <el-avatar :size="50" :src="profile.avatar"></el-avatar>
+            </el-row>
+            <el-row class="storage">
+              <p>
+                <span style>{{ $t("leftnav.storage") }}</span>
+                <span style="float: right">{{ storage.percentage }}%</span>
+              </p>
+              <el-progress :percentage="storage.percentage" :show-text="false"></el-progress>
+              <p
+                style="color: rgba(0, 0, 0, 0.54); font-size: 0.75rem"
+              >{{ storage.used }}/{{ storage.max }}</p>
+            </el-row>
+          </div>
+
+          <el-dropdown-item
+            icon="el-icon-setting"
+            command="profile"
+            divided
+          >{{ $t("topbar.settings") }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-set-up"
+            command="admin"
+            v-show="showAdmin"
+          >{{ $t("topbar.s-platform") }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-switch-button"
+            command="signout"
+          >{{ $t("topbar.signout") }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </el-header>
+</template>
+
+<script>
+import { setup } from "@/i18n";
+import utils from "@/libs/utils";
+import Cookie from "js-cookie";
+const defaultAvatar = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
+import ZpUploader from "@/components/Uploader";
+import ZpAplayer from "@/components/ZAPlayer";
+export default {
+  components: {
+    ZpUploader,
+    ZpAplayer,
+  },
+  props: {
+    menus: Array,
+    logined: Boolean,
+  },
+  data() {
+    return {
+      alistVisible: false,
+      ulistTotal: 0,
+      storage: {
+        percentage: 0,
+      },
+      user: {},
+      profile: {},
+    };
+  },
+  watch: {
+    $route: "onRouteChange",
+    locale(nv) {
+      setup(nv);
+    },
+  },
+  computed: {
+    showMenu() {
+      return this.menus && this.menus.length > 0;
+    },
+    showAdmin() {
+      return Cookie.get("z-role") == "admin";
+    },
+    menuActive() {
+      return `/${this.$route.params.sname}`;
+    },
+  },
+  methods: {
+    onLogoClick() {
+      this.$emit('logoClick');
+      if (this.$route.path == '/admin') {
+        this.$router.push('/')
+      }
+    },
+    onRouteChange(newVal, oldVal) {
+      if (this.logined) {
+        this.userInfo();
+      }
+    },
+    onUTotalChange(uTotal) {
+      this.ulistTotal = uTotal;
+    },
+    userInfo() {
+      this.$zpan.User.profileGet().then((ret) => {
+        this.user = ret.data;
+        this.profile = this.user.profile;
+        if (this.profile.avatar == "") {
+          this.profile.avatar = defaultAvatar;
+        }
+
+        if (this.profile.locale) {
+          this.$i18n.locale = this.profile.locale;
+        }
+
+        this.storage = {
+          used: utils.formatBytes(this.user.storage.used, 0),
+          max: utils.formatBytes(this.user.storage.max, 0),
+          percentage: Math.round((this.user.storage.used / this.user.storage.max) * 10000) / 100,
+        };
+      });
+    },
+    onDropdown(index) {
+      this.$router.push({ name: index });
+    },
+    onVisible(visible) {
+      if (visible) this.userInfo();
+    },
+    uploadSelect(obj) {
+      this.$refs.uploader.uploadSelect(obj);
+    },
+    AplayerOpen(obj, link) {
+      this.alistVisible = true;
+      setTimeout(() => {
+        this.$refs.aplayer.play(obj, link);
+        this.$refs.alist.doShow();
+      }, 500);
+    },
+  },
+  mounted() {
+    if (this.logined) {
+      this.userInfo();
+    }
+  },
+};
+</script>
+
+<style>
+.el-header {
+  display: flex;
+  line-height: 60px;
+  background-color: #fff;
+  box-shadow: 1px 1px 8px #c9c9c9;
+  margin-bottom: 5px;
+}
+.el-header .logo {
+  width: 150px;
+  display: inline-block;
+  font-size: 35px;
+  padding: 0 15px;
+  vertical-align: middle;
+}
+
+.logo img {
+  cursor: pointer;
+}
+
+.el-header .navbar {
+  font-weight: bold;
+}
+
+.el-header .storage {
+  margin: 15px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/index.vue
index 6a95545..4964515 100644
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/index.vue
@@ -1,101 +1,27 @@
 <template>
-  <el-header>
-    <div class="logo" @click="onLogoClick">
+  <div style="display: contents">
+    <div class="logo">
       <img src="@/assets/logo.png" alt="ZPan" />
     </div>
-    <el-menu
-      v-if="showMenu"
-      class="navbar"
-      :default-active="menuActive"
-      mode="horizontal"
-      style="width: 100%"
-      router
-    >
-      <el-menu-item
-        v-for="(menu, index) in menus.slice(0, 5)"
-        :key="index"
-        :index="`/${menu.name}`"
-      >{{ menu.title }}</el-menu-item>
+    <v-tabs background-color="transparent" align-with-title>
+      <v-tabs-slider color="yellow"></v-tabs-slider>
 
-      <el-submenu index="more" v-show="menus.length > 5">
-        <template slot="title">更多</template>
-        <el-menu-item
-          v-for="(menu, index) in menus.slice(5)"
-          :key="index"
-          :index="menu.path"
-        >{{ menu.title }}</el-menu-item>
-      </el-submenu>
-    </el-menu>
+      <v-tab v-for="item in $store.state.storages.slice(0, 5)" :key="item.alias">{{ item.title }}</v-tab>
+    </v-tabs>
+    <div class="tools-bar">
+      <v-menu v-model="ulistTotal" :close-on-content-click="false" :nudge-width="200" offset-x>
+        <template v-slot:activator="{ on, attrs }">
+          <v-badge color="red" dot>
+            <v-icon v-bind="attrs" v-on="on">mdi-transfer-up</v-icon>
+          </v-badge>
+        </template>
 
-    <div v-if="logined" style="position: absolute; right: 20px">
-      <!-- 音乐播放器 -->
-      <el-popover
-        v-if="alistVisible"
-        ref="alist"
-        placement="top"
-        width="500"
-        style="margin-right: 20px"
-      >
-        <i slot="reference" class="el-icon-service"></i>
-
-        <zp-aplayer ref="aplayer"></zp-aplayer>
-      </el-popover>
-
-      <!-- 任务管理器 -->
-      <el-popover ref="ulist" placement="bottom-end" width="500" style="margin-right: 20px">
-        <i slot="reference" class="el-icon-sort">
-          <el-badge v-show="ulistTotal" :value="ulistTotal" style="top: -15px"></el-badge>
-        </i>
-
-        <zp-uploader
-          ref="uploader"
-          @uploadAdded="$refs.ulist.doShow()"
-          @utotal-change="onUTotalChange"
-        ></zp-uploader>
-      </el-popover>
-
-      <el-dropdown trigger="click" @command="onDropdown" @visible-change="onVisible">
-        <el-avatar
-          :size="30"
-          :src="profile.avatar"
-          style="vertical-align: middle; margin-right: 4px"
-        ></el-avatar>
-        <span>{{ profile.nickname }}</span>
-        <el-dropdown-menu slot="dropdown" style="width: 200px">
-          <div style="margin: auto 20px">
-            <el-row style="text-align: center; margin: 10px 0">
-              <el-avatar :size="50" :src="profile.avatar"></el-avatar>
-            </el-row>
-            <el-row class="storage">
-              <p>
-                <span style>{{ $t("leftnav.storage") }}</span>
-                <span style="float: right">{{ storage.percentage }}%</span>
-              </p>
-              <el-progress :percentage="storage.percentage" :show-text="false"></el-progress>
-              <p
-                style="color: rgba(0, 0, 0, 0.54); font-size: 0.75rem"
-              >{{ storage.used }}/{{ storage.max }}</p>
-            </el-row>
-          </div>
-
-          <el-dropdown-item
-            icon="el-icon-setting"
-            command="profile"
-            divided
-          >{{ $t("topbar.settings") }}</el-dropdown-item>
-          <el-dropdown-item
-            icon="el-icon-set-up"
-            command="admin"
-            v-show="showAdmin"
-          >{{ $t("topbar.s-platform") }}</el-dropdown-item>
-          <el-dropdown-item
-            icon="el-icon-switch-button"
-            command="signout"
-          >{{ $t("topbar.signout") }}</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+        <v-card>
+          <zp-uploader ref="uploader" @uploadAdded="$refs.ulist.doShow()" @utotal-change="onUTotalChange"></zp-uploader>
+        </v-card>
+      </v-menu>
     </div>
-  </el-header>
+  </div>
 </template>
 
 <script>
@@ -183,7 +109,8 @@ export default {
       if (visible) this.userInfo();
     },
     uploadSelect(obj) {
-      this.$refs.uploader.uploadSelect(obj);
+      console.log(222, obj,this.$refs.uploader)
+      // this.$refs.uploader.uploadSelect(obj);
     },
     AplayerOpen(obj, link) {
       this.alistVisible = true;
@@ -202,7 +129,7 @@ export default {
 </script>
 
 <style>
-.el-header {
+/* .el-header {
   display: flex;
   line-height: 60px;
   background-color: #fff;
@@ -215,17 +142,25 @@ export default {
   font-size: 35px;
   padding: 0 15px;
   vertical-align: middle;
+} */
+
+.logo {
+  width: 180px;
+  /* display: inline-block; */
+  font-size: 35px;
+  padding: 0 15px;
+  /* vertical-align: middle; */
 }
 
 .logo img {
   cursor: pointer;
 }
 
-.el-header .navbar {
+/* .el-header .navbar {
   font-weight: bold;
 }
 
 .el-header .storage {
   margin: 15px 0;
-}
+} */
 </style>
\ No newline at end of file
diff --git a/src/components/Uploader/index.vue b/src/components/Uploader/index.vue
index 64159f8..5f409e3 100644
--- a/src/components/Uploader/index.vue
+++ b/src/components/Uploader/index.vue
@@ -98,6 +98,7 @@ export default {
       this.$router.push({ name: "disk", params: this.$route.params, query: { dir: matter.parent } });
     },
     uploadSelect(obj) {
+      console.log(obj, 111)
       this.sid = obj.sid;
       this.dist = obj.dist;
       console.log(obj);
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..cdd995a
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,30 @@
+import Vue from "vue";
+import vuetify from '@/plugins/vuetify'
+import store from "./store"
+
+const mount = (component, options) => {
+    const _constructor = Vue.extend(component)
+    const propsData = Object.assign({}, options);
+    const instance = new _constructor({
+        store,
+        vuetify,
+        propsData,
+        mounted() {
+            this.$nextTick(function () {
+                document.getElementById("app").appendChild(this.$el)
+            })
+        },
+        destroyed() {
+            this.$el.parentNode.removeChild(this.$el)
+        },
+    });
+
+    return instance.$mount(document.createElement('div'));
+}
+
+
+import ComponentToast from "./Toast"
+import ComponentLoading from "./Loading"
+
+export const Toast = (options = {}) => mount(ComponentToast, options);
+export const Loading = (options = {}) => mount(ComponentLoading, options);
\ No newline at end of file
diff --git a/src/components/store.js b/src/components/store.js
new file mode 100644
index 0000000..7f92edf
--- /dev/null
+++ b/src/components/store.js
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {
+        msgPool: []
+    },
+    mutations: {
+        message(state, step) {
+            state.msgPool.push(step)
+            //将消息添加到消息列表
+            setTimeout(() => {
+                state.msgPool.shift()
+            }, step.time);
+            //清除消息
+        }
+    },
+    actions: {
+    },
+    modules: {
+    }
+})
diff --git a/src/helper.js b/src/helper.js
index 4184434..674b63f 100644
--- a/src/helper.js
+++ b/src/helper.js
@@ -2,12 +2,13 @@ import Vue from 'vue'
 import i18n from './i18n'
 import store from './store'
 import router from './router'
+import vuetify from './plugins/vuetify'
 
 export const transfer = component => {
     const _constructor = Vue.extend(component)
     return function (propsData = {}) {
         console.log(propsData)
-        let instance = new _constructor({ i18n, store, router, propsData }).$mount(document.createElement('div'))
+        let instance = new _constructor({ i18n, store, vuetify, router, propsData }).$mount(document.createElement('div'))
 
         return new Promise((resolve, reject) => {
             instance.$once('completed', data => resolve(data))
diff --git a/src/libs/mixin/dialog.js b/src/libs/mixin/dialog.js
index e5e77f6..e335b61 100644
--- a/src/libs/mixin/dialog.js
+++ b/src/libs/mixin/dialog.js
@@ -23,12 +23,12 @@ const DialogMixin = {
         close() {
             this.visible = false;
         },
-        completed() {
-            this.$emit('completed');
+        completed(data, ) {
+            this.$emit('completed', data);
         },
-        finish() {
+        finish(data) {
             this.close();
-            this.completed();
+            this.completed(data);
         },
     }
 }
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 5bdec19..1b7d29d 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,7 +1,18 @@
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib/framework';
+// import colors from 'vuetify/lib/util/colors'
 
 Vue.use(Vuetify);
 
 export default new Vuetify({
+    // theme: {
+    //     dark: false,
+    //     themes: {
+    //         light: {
+    //             primary: colors.red.darken1, // #E53935
+    //             secondary: colors.red.lighten4, // #FFCDD2
+    //             accent: colors.indigo.base, // #3F51B5
+    //         },
+    //     },
+    // },
 });
diff --git a/src/views/home/disk/index.vue b/src/views/home/disk/index.vue
index 7ab9cd4..cc2e52a 100644
--- a/src/views/home/disk/index.vue
+++ b/src/views/home/disk/index.vue
@@ -19,57 +19,28 @@
   <div style="height: calc(100% - 58px)">
     <el-row class="toolbar">
       <el-dropdown size="small" style="margin-right: 10px" @command="onUploadSelect">
-        <el-button
-          type="primary"
-          size="small"
-          icon="el-icon-upload"
-          @click="onUploadSelect('file')"
-        >上传</el-button>
+        <el-button type="primary" size="small" icon="el-icon-upload" @click="onUploadSelect('file')">上传</el-button>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="file">上传文件</el-dropdown-item>
           <el-dropdown-item command="folder">上传文件夹</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <el-dropdown size="small" @command="onCreationSelect">
-        <el-button
-          type="primary"
-          size="small"
-          icon="el-icon-folder-add"
-          @click="openCreateFolderDiglog"
-          plain
-        >新建</el-button>
+        <el-button type="primary" size="small" icon="el-icon-folder-add" @click="openCreateFolderDiglog" plain>新建</el-button>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="file">新建文件</el-dropdown-item>
           <el-dropdown-item command="folder">新建文件夹</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <el-button-group v-show="selectedItems.length > 0" style="margin-left: 10px">
-        <el-button
-          type="primary"
-          icon="el-icon-download"
-          size="small"
-          plain
-          <!-- @click="onOutlinkClick" -->
-        >{{ $t("disk.download") }}</el-button>
+        <el-button type="primary" icon="el-icon-download" size="small" plain @click="onDownload">{{ $t("disk.download") }}</el-button>
         <!-- <el-button type="primary" icon="el-icon-share" size="small" @click="share" plain>分享</el-button> -->
-        <el-button
-          type="primary"
-          icon="el-icon-delete"
-          size="small"
-          plain
-          @click="deleteSelection"
-        >{{ $t("disk.delete") }}</el-button>
-        <!-- <el-button type="primary" size="small" plain>移动到</el-button> -->
+        <el-button type="primary" icon="el-icon-delete" size="small" plain @click="onDelete">{{ $t("disk.delete") }}</el-button>
+        <el-button type="primary" icon="el-icon-move" size="small" plain @click="onMove">移动到</el-button>
       </el-button-group>
 
       <div style="float: right">
-        <el-input
-          class="search"
-          size="small"
-          :placeholder="$t('topbar.search')"
-          v-model="query.kw"
-          @keyup.enter.native="listRefresh"
-        >
+        <el-input class="search" size="small" :placeholder="$t('topbar.search')" v-model="query.kw" @keyup.enter.native="listRefresh">
           <i slot="prefix" class="el-input__icon el-icon-search"></i>
         </el-input>
         <i v-if="layout == 'list'" class="iconfont icon-grid" @click="layout = 'grid'"></i>
@@ -79,10 +50,14 @@
 
     <!-- main -->
     <FileExplorer
-      :layout="layout"
       ref="fexp"
+      :layout="layout"
       :dataLoader="dataLoader"
       :linkLoader="linkLoader"
+      :action-move="$zpan.File.move"
+      :action-copy="$zpan.File.copy"
+      :action-rename="$zpan.File.rename"
+      :action-remove="$zpan.File.delete"
       @file-action="onFileAction"
       @selection-change="onSelectionChange"
     />
@@ -159,6 +134,21 @@ export default {
     listRefresh() {
       this.$refs.fexp.listRefresh();
     },
+    onUploadSelect(cmd) {
+      this.$emit("upload-action", { type: cmd, sid: this.getSid(), dist: this.query.dir });
+    },
+    onCreationSelect(cmd) {
+      switch (cmd) {
+        case 'file':
+          this.openCreateFileDiglog()
+          break;
+        case 'folder':
+          this.openCreateFolderDiglog()
+          break;
+        default:
+          break;
+      }
+    },
     openCreateFolderDiglog() {
       this.$prompt(this.$t("tips.create-folder"), this.$t("op.create-folder"), {
         confirmButtonText: this.$t("op.confirm"),
@@ -200,59 +190,15 @@ export default {
         });
       });
     },
-    onUploadSelect(cmd) {
-      this.$emit("upload-action", { type: cmd, sid: this.getSid(), dist: this.query.dir });
-    },
-    onCreationSelect(cmd) {
-      switch (cmd) {
-        case 'file':
-          this.openCreateFileDiglog()
-          break;
-        case 'folder':
-          this.openCreateFolderDiglog()
-          break;
-        default:
-          break;
-      }
-    },
-    onFileAction(){
-      
+    onFileAction() {
+
     },
     onSelectionChange(selection) {
       this.selectedItems = selection;
     },
-    deleteSelection() {
-      this.$confirm(this.$t("tips.batch-delete"), this.$t("op.batch-delete"), {
-        type: "warning",
-        confirmButtonText: this.$t("op.confirm"),
-        cancelButtonText: this.$t("op.cancel"),
-      }).then(() => {
-        const loading = this.$loading({
-          lock: true,
-          text: this.$t("tips.deleting"),
-          spinner: "el-icon-loading",
-          background: "rgba(0, 0, 0, 0.7)",
-        });
-
-        Promise.all(
-          this.selectedItems.map((obj) => {
-            return this.$zpan.File.delete(obj.alias);
-          })
-        )
-          .then((ret) => {
-            this.listRefresh();
-            loading.close();
-            this.$message({
-              type: "success",
-              message: this.$t("msg.batch-delete-success"),
-            });
-          })
-          .catch((err) => {
-            loading.close();
-            console.log(err);
-          });
-      });
-    },
+    onDownload() { this.$refs.fexp.download() },
+    onMove() { this.$refs.fexp.openMove() },
+    onDelete() { this.$refs.fexp.openRemove() }
   },
   mounted() {
     this.query.type = this.$route.query.type;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 0e8eec1..9a6d144 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,25 +1,12 @@
 <template>
   <v-app>
     <v-app-bar app clipped-left>
-      <div class="logo">
-        <img src="@/assets/logo.png" alt="ZPan" />
-      </div>
-      <v-tabs align-with-title>
-        <v-tabs-slider color="yellow"></v-tabs-slider>
-
-        <v-tab v-for="item in $store.state.storages.slice(0, 5)" :key="item.alias">{{ item.title }}</v-tab>
-      </v-tabs>
-      <div class="tools-bar">111</div>
+      <Topbar ref="topbar" />
     </v-app-bar>
 
     <v-navigation-drawer app clipped>
       <v-list dense nav>
-        <v-list-item
-          v-for="item in leftMenus"
-          :key="item.path"
-          @click="$router.push(item.path)"
-          link
-        >
+        <v-list-item v-for="item in leftMenus" :key="item.path" @click="$router.push(item.path)" link>
           <v-list-item-icon>
             <v-icon>{{ item.icon }}</v-icon>
           </v-list-item-icon>
@@ -139,14 +126,6 @@ export default {
 </script>
 
 <style scoped>
-.logo {
-  width: 150px;
-  /* display: inline-block; */
-  font-size: 35px;
-  padding: 0 15px;
-  /* vertical-align: middle; */
-}
-
 .copyright {
   text-align: center;
   position: absolute;
diff --git a/src/views/home/share/home.vue b/src/views/home/share/home.vue
index d8a4d0a..02d00ea 100644
--- a/src/views/home/share/home.vue
+++ b/src/views/home/share/home.vue
@@ -55,7 +55,7 @@
 <script>
 import { transfer } from "@/helper";
 import utils from "@/libs/utils.js";
-import DialogOutlink from "@/views/home/disk/components/DialogOutlink";
+// import DialogOutlink from "@/views/home/disk/components/DialogOutlink";
 import Topbar from "@/components/Topbar";
 export default {
   components: { Topbar },
@@ -134,7 +134,7 @@ export default {
       } else if (this.selectedItems.length == 1) {
         this.openDownload(this.selectedItems[0]);
       } else {
-        transfer(DialogOutlink)({ items: this.selectedItems });
+        // transfer(DialogOutlink)({ items: this.selectedItems });
       }
     },
     listRefresh(alias) {
diff --git a/yarn.lock b/yarn.lock
index 590cb33..29ef453 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9798,6 +9798,11 @@ vuetify-loader@^1.7.0:
     file-loader "^6.2.0"
     loader-utils "^2.0.0"
 
+vuetify-toast-snackbar@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmmirror.com/vuetify-toast-snackbar/-/vuetify-toast-snackbar-0.6.1.tgz#a90d93c5b1aae3411d7d297f5ee00934fa6952dc"
+  integrity sha512-F2bLPMXiw7qQgX68adSu0zQrMTKODN5JAzCP8AP/HGhz/Bz1z24QbvYcX0fyHnG/yP6PAPkpMCXsLQSq6HV0Ag==
+
 vuetify@^2.4.0:
   version "2.6.2"
   resolved "https://registry.npmmirror.com/vuetify/download/vuetify-2.6.2.tgz#1ed4d3c9e734d55202bd566b789cce0e0013279a"
@@ -9805,7 +9810,7 @@ vuetify@^2.4.0:
 
 vuex@^3.6.2:
   version "3.6.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  resolved "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
   integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
 
 watchpack-chokidar2@^2.0.1:

From 6e9d8905068c46e163bc48cf723531b811ba99e9 Mon Sep 17 00:00:00 2001
From: saltbo <saltbo@foxmail.com>
Date: Sat, 14 May 2022 16:17:35 +0800
Subject: [PATCH 5/5] feat: update the uploader by keep-alive

---
 src/components/FileExplorer/FileExplorer.vue |   4 +-
 src/components/Topbar/index.vue              |  27 +++-
 src/components/Uploader/index.vue            | 161 ++++++-------------
 src/components/Uploader/list.vue             | 131 +++++++++++++++
 src/store.js                                 |  20 ++-
 src/views/home/disk/index.vue                |  46 +++---
 src/views/home/index.vue                     |   5 +
 7 files changed, 244 insertions(+), 150 deletions(-)
 create mode 100644 src/components/Uploader/list.vue

diff --git a/src/components/FileExplorer/FileExplorer.vue b/src/components/FileExplorer/FileExplorer.vue
index b635006..d3c67ca 100644
--- a/src/components/FileExplorer/FileExplorer.vue
+++ b/src/components/FileExplorer/FileExplorer.vue
@@ -197,10 +197,10 @@ export default {
       openOutline(...this.selection)
     },
     openMove() {
-      openMove(...this.selection)
+      openMove(...this.selection).then(this.listRefresh)
     },
     openRemove() {
-      openRemove(...this.selection)
+      openRemove(...this.selection).then(this.listRefresh)
     },
   },
   mounted() {
diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/index.vue
index 4964515..dc4a7c6 100644
--- a/src/components/Topbar/index.vue
+++ b/src/components/Topbar/index.vue
@@ -4,12 +4,12 @@
       <img src="@/assets/logo.png" alt="ZPan" />
     </div>
     <v-tabs background-color="transparent" align-with-title>
-      <v-tabs-slider color="yellow"></v-tabs-slider>
+      <v-tabs-slider></v-tabs-slider>
 
       <v-tab v-for="item in $store.state.storages.slice(0, 5)" :key="item.alias">{{ item.title }}</v-tab>
     </v-tabs>
     <div class="tools-bar">
-      <v-menu v-model="ulistTotal" :close-on-content-click="false" :nudge-width="200" offset-x>
+      <v-menu v-model="uListActive2" :close-on-content-click="false" :nudge-width="200" offset-x>
         <template v-slot:activator="{ on, attrs }">
           <v-badge color="red" dot>
             <v-icon v-bind="attrs" v-on="on">mdi-transfer-up</v-icon>
@@ -17,7 +17,7 @@
         </template>
 
         <v-card>
-          <zp-uploader ref="uploader" @uploadAdded="$refs.ulist.doShow()" @utotal-change="onUTotalChange"></zp-uploader>
+          <zp-uploader-list></zp-uploader-list>
         </v-card>
       </v-menu>
     </div>
@@ -25,15 +25,18 @@
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex'
 import { setup } from "@/i18n";
 import utils from "@/libs/utils";
 import Cookie from "js-cookie";
 const defaultAvatar = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
 import ZpUploader from "@/components/Uploader";
+import ZpUploaderList from "@/components/Uploader/list.vue";
 import ZpAplayer from "@/components/ZAPlayer";
 export default {
   components: {
     ZpUploader,
+    ZpUploaderList,
     ZpAplayer,
   },
   props: {
@@ -57,7 +60,21 @@ export default {
       setup(nv);
     },
   },
+
   computed: {
+    ...mapState([
+      'uListActive',
+    ]),
+    uListActive2: {
+      get() {
+        return this.uListActive;
+      },
+      set(active) {
+        console.log(123123)
+        this.$store.commit('setuListActive', active)
+        return active
+      }
+    },
     showMenu() {
       return this.menus && this.menus.length > 0;
     },
@@ -108,10 +125,6 @@ export default {
     onVisible(visible) {
       if (visible) this.userInfo();
     },
-    uploadSelect(obj) {
-      console.log(222, obj,this.$refs.uploader)
-      // this.$refs.uploader.uploadSelect(obj);
-    },
     AplayerOpen(obj, link) {
       this.alistVisible = true;
       setTimeout(() => {
diff --git a/src/components/Uploader/index.vue b/src/components/Uploader/index.vue
index 5f409e3..5409e66 100644
--- a/src/components/Uploader/index.vue
+++ b/src/components/Uploader/index.vue
@@ -1,129 +1,63 @@
 <template>
-  <div class="uploader">
-    <div style="display: flex; justify-content: space-between">
-      <h5>{{ title }}</h5>
-      <file-upload ref="upload" v-model="files" :multiple="true" :maximum="50" @input-filter="inputFilter" @input-file="inputFile"> </file-upload>
-    </div>
-    <el-table :data="files" size="mini" :show-header="false" empty-text="暂无上传任务" style="width: 100%">
-      <el-table-column prop="icon" width="50">
-        <template slot-scope="scope">
-          <i :class="`iconfont matter-icon ${type2icon(scope.row.type)}`"></i>
-        </template>
-      </el-table-column>
-      <el-table-column prop="name">
-        <template slot-scope="scope">
-          <div>{{ scope.row.name }}</div>
-          <el-progress :percentage="Number(scope.row.progress)" :stroke-width="3" :show-text="false"></el-progress>
-          <div style="font-size: 12px">
-            <span class="size">{{ fomatSize(scope.row.size) }}</span>
-            <span class="speed">{{ fomatSize(scope.row.speed) }}/s</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="op" width="100">
-        <template slot-scope="scope">
-          <!-- todo 暂停和继续需要依赖分片上传，先不支持，后续迭代 -->
-          <el-button v-show="scope.row.progress == 100" type="primary" size="mini" icon="el-icon-folder" circle plain @click="onFolderClick(scope.row.matter)"></el-button>
-          <!-- <el-button v-show="scope.row.progress != 100 && uploading" type="primary" size="mini" icon="el-icon-video-pause" circle plain @click="$refs.upload.active = false"></el-button> -->
-          <!-- <el-button v-show="scope.row.progress != 100 && !uploading" type="primary" size="mini" icon="el-icon-video-play" circle plain @click="$refs.upload.active = true"></el-button> -->
-          <el-button v-show="scope.row.progress != 100" type="primary" size="mini" icon="el-icon-close" circle plain @click="$refs.upload.remove(scope.row)"></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="tip">- 仅展示本次上传任务 -</div>
-  </div>
+  <file-upload ref="upload" v-model="files" :multiple="true" :maximum="50" @input-filter="inputFilter"
+    @input-file="inputFile" @update:modelValue="inputUpdate">
+    <slot></slot>
+  </file-upload>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import FileUpload from "vue-upload-component";
-import utils from "@/libs/utils";
 export default {
+  name: 'uploader',
+  props: {
+    sid: 0,
+    dist: "",
+  },
   components: {
     FileUpload,
   },
   data() {
     return {
-      sid: 0,
-      dist: "",
       files: [],
-      uploading: false,
-      uploadedCnt: 0,
     };
   },
   watch: {
     files(nv) {
-      this.$emit("utotal-change", nv.length);
-    },
-  },
-  computed: {
-    title() {
-      let text = this.uploading ? "正在上传" : "上传完成";
-      return `${text}（${this.uploadedCnt}/${this.files.length}）`;
+      console.log("files:", nv)
+      this.$store.commit('updateFiles', nv)
     },
   },
   methods: {
-    type2icon(type) {
-      console.log(type);
-      let [t1, t2] = type.split("/");
-      let mt = ["pdf", "html", "xml", "psd", "rtf"];
-      if (mt.includes(t2)) {
-        return `icon-${t2}`;
-      }
-
-      let codeTypes = ["json", "yaml", "x-yaml"];
-      if (codeTypes.includes(t2)) {
-        return "icon-html";
-      }
-
-      let compressedFileTypes = ["zip", "x-gzip"];
-      if (compressedFileTypes.includes(t2)) {
-        return "icon-compressed-file";
-      }
-
-      // if (this.isOfficeFile(type)) {
-      //   return this.officeIcon(type);
+    upload() {
+      // if (!this.$refs.upload.features.directory) {
+      //   this.alert("Your browser does not support");
+      //   return;
       // }
 
-      let gt = ["audio", "video", "image", "text"];
-      if (gt.includes(t1)) {
-        return `icon-${t1}`;
-      }
-
-      return "icon-file";
-    },
-    fomatSize(v) {
-      return utils.formatBytes(v, 1);
-    },
-    onFolderClick(matter) {
-      this.$router.push({ name: "disk", params: this.$route.params, query: { dir: matter.parent } });
-    },
-    uploadSelect(obj) {
-      console.log(obj, 111)
-      this.sid = obj.sid;
-      this.dist = obj.dist;
-      console.log(obj);
-      if (!this.$refs.upload.features.directory) {
-        this.alert("Your browser does not support");
-        return;
-      }
-
       let input = document.createElement("input");
       input.setAttribute("type", "file");
       input.setAttribute("style", "display: none");
       input.setAttribute("multiple", true);
-      if (obj.type == "folder") {
-        input.setAttribute("allowdirs", true);
-        input.setAttribute("directory", true);
-        input.setAttribute("webkitdirectory", true);
-      }
+      // if (obj.type == "folder") {
+      //   input.setAttribute("allowdirs", true);
+      //   input.setAttribute("directory", true);
+      //   input.setAttribute("webkitdirectory", true);
+      // }
+
       document.querySelector("body").appendChild(input);
       input.click();
       input.onchange = (e) => {
         this.$refs.upload.addInputFile(input);
+        this.$store.commit('setuListActive', true);
         document.querySelector("body").removeChild(input);
       };
     },
-    inputFilter(newFile, oldFile, prevent) {},
+    inputUpdate(files) {
+      console.log("inputUpdate", files)
+      // this.$store.commit('updateFiles', files)
+    },
+    inputFilter(newFile, oldFile, prevent) { },
     inputFile(newFile, oldFile) {
       if (newFile && oldFile && !newFile.active && oldFile.active) {
         // 获得相应数据
@@ -132,7 +66,7 @@ export default {
           //  获得响应状态码
           console.log("status", newFile.xhr.status);
           this.$zpan.File.uploadDone(oldFile.matter.alias).then((ret) => {
-            this.uploadedCnt++;
+            this.$store.commit('uploadedCntIncr')
           });
         }
         return;
@@ -147,40 +81,39 @@ export default {
       // Automatically activate upload
       if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
         if (!this.$refs.upload.active) {
+          console.log(newFile, 111)
           this.$zpan.File.create(this.sid, this.dist, newFile).then((ret) => {
             newFile.putAction = ret.data.uplink;
             newFile.headers = ret.data.headers;
             newFile.matter = ret.data.matter;
-            this.$refs.upload.active = true;
-            this.uploading = true;
+            this.$refs.upload.$data.active = true
           });
         }
       }
     },
   },
   mounted() {
+    console.log("我是mounted钩子");
     this.$watch("$refs.upload.uploaded", (uploaded) => {
-      this.uploading = !uploaded;
+      console.log("uploaded", uploaded)
+      if (uploaded) {
+        setTimeout(() => { this.$emit('uploaded') }, 300)
+      }
+
+      this.$store.commit('updateUploading', !uploaded)
     });
   },
+  activated() {
+    console.log("我是activated钩子");
+  },
+  deactivated() {
+    console.log("我是deactivated钩子");
+  },
+  beforeDestroy() {
+    console.log("我是beforeDestroy钩子");
+  },
 };
 </script>
 
 <style lang="stylus">
-.uploader
-  .size
-    color: #878c9c;
-
-  .speed
-    color: #06a7ff;
-    float: right;
-
-  .tip
-    color: #afb3bf;
-    margin-top: 10px;
-    text-align: center;
-
-  .matter-icon
-    font-size: 35px;
-    padding-left: 5px;
 </style>
\ No newline at end of file
diff --git a/src/components/Uploader/list.vue b/src/components/Uploader/list.vue
new file mode 100644
index 0000000..6d90289
--- /dev/null
+++ b/src/components/Uploader/list.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="uploader">
+    <div style="display: flex; justify-content: space-between">
+      <h5>{{ title }}</h5>
+    </div>
+    <el-table :data="files" size="mini" :show-header="false" empty-text="暂无上传任务" style="width: 100%">
+      <el-table-column prop="icon" width="50">
+        <template slot-scope="scope">
+          <i :class="`iconfont matter-icon ${type2icon(scope.row.type)}`"></i>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name">
+        <template slot-scope="scope">
+          <div>{{ scope.row.name }}</div>
+          <el-progress :percentage="Number(scope.row.progress)" :stroke-width="3" :show-text="false"></el-progress>
+          <div style="font-size: 12px">
+            <span class="size">{{ fomatSize(scope.row.size) }}</span>
+            <span class="speed">{{ fomatSize(scope.row.speed) }}/s</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="op" width="100">
+        <template slot-scope="scope">
+          <!-- todo 暂停和继续需要依赖分片上传，先不支持，后续迭代 -->
+          <el-button v-show="scope.row.progress == 100" type="primary" size="mini" icon="el-icon-folder" circle plain
+            @click="onFolderClick(scope.row.matter)"></el-button>
+          <!-- <el-button v-show="scope.row.progress != 100 && uploading" type="primary" size="mini" icon="el-icon-video-pause" circle plain @click="$refs.upload.active = false"></el-button> -->
+          <!-- <el-button v-show="scope.row.progress != 100 && !uploading" type="primary" size="mini" icon="el-icon-video-play" circle plain @click="$refs.upload.active = true"></el-button> -->
+          <el-button v-show="scope.row.progress != 100" type="primary" size="mini" icon="el-icon-close" circle plain
+            @click="$refs.upload.remove(scope.row)"></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="tip">- 仅展示本次上传任务 -</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import utils from "@/libs/utils";
+export default {
+  name: 'uploader-list',
+  data() {
+    return {
+      sid: 0,
+      dist: "",
+      // files: [],
+      // uploading: false,
+      // uploadedCnt: 0,
+    };
+  },
+  watch: {
+    files(nv) {
+      console.log("files:", nv);
+      this.$emit("utotal-change", nv.length);
+    },
+  },
+  computed: {
+    ...mapState([
+      'files',
+      'uploading',
+      'uploadedCnt',
+    ]),
+    title() {
+      let text = this.uploading ? "正在上传" : "上传完成";
+      return `${text}（${this.uploadedCnt}/${this.files.length}）`;
+    },
+  },
+  methods: {
+    type2icon(type) {
+      console.log(type);
+      let [t1, t2] = type.split("/");
+      let mt = ["pdf", "html", "xml", "psd", "rtf"];
+      if (mt.includes(t2)) {
+        return `icon-${t2}`;
+      }
+
+      let codeTypes = ["json", "yaml", "x-yaml"];
+      if (codeTypes.includes(t2)) {
+        return "icon-html";
+      }
+
+      let compressedFileTypes = ["zip", "x-gzip"];
+      if (compressedFileTypes.includes(t2)) {
+        return "icon-compressed-file";
+      }
+
+      // if (this.isOfficeFile(type)) {
+      //   return this.officeIcon(type);
+      // }
+
+      let gt = ["audio", "video", "image", "text"];
+      if (gt.includes(t1)) {
+        return `icon-${t1}`;
+      }
+
+      return "icon-file";
+    },
+    fomatSize(v) {
+      return utils.formatBytes(v, 1);
+    },
+    onFolderClick(matter) {
+      this.$router.push({ name: "disk", params: this.$route.params, query: { dir: matter.parent } });
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+.uploader
+  width: 500px;
+  max-height: 800px
+  padding 10px
+
+  .size
+    color: #878c9c;
+
+  .speed
+    color: #06a7ff;
+    float: right;
+
+  .tip
+    color: #afb3bf;
+    background-color: #fff
+    padding-top: 10px;
+    text-align: center;
+
+  .matter-icon
+    font-size: 35px;
+    padding-left: 5px;
+</style>
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index 5ddb991..94e5dc7 100644
--- a/src/store.js
+++ b/src/store.js
@@ -4,11 +4,29 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+  // strict: true,
   state: {
     storages: [],
-    cs: {}
+    cs: {},
+    files: [],
+    uploading: false,
+    uploadedCnt: 0,
+    uListActive: false,
   },
   mutations: {
+    updateFiles(state, files) {
+      state.files = files
+    },
+    uploadedCntIncr(state) {
+      state.uploadedCnt++
+    },
+    updateUploading(state, status) {
+      state.uploading = status
+    },
+    setuListActive(state, active) {
+      console.log(123123, active)
+      state.uListActive = active
+    },
     storages(state, storages) {
       state.storages = storages
     },
diff --git a/src/views/home/disk/index.vue b/src/views/home/disk/index.vue
index cc2e52a..8bfae42 100644
--- a/src/views/home/disk/index.vue
+++ b/src/views/home/disk/index.vue
@@ -18,29 +18,30 @@
 <template>
   <div style="height: calc(100% - 58px)">
     <el-row class="toolbar">
-      <el-dropdown size="small" style="margin-right: 10px" @command="onUploadSelect">
-        <el-button type="primary" size="small" icon="el-icon-upload" @click="onUploadSelect('file')">上传</el-button>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="file">上传文件</el-dropdown-item>
-          <el-dropdown-item command="folder">上传文件夹</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+      <zp-uploader ref="uploader" class="btn btn-primary" :sid="getSid()" :dist="query.dir" @uploaded="listRefresh()">
+      </zp-uploader>
+      <el-button type="primary" size="small" icon="el-icon-upload" style="margin-right: 10px"
+        @click="$refs.uploader.upload()">上传</el-button>
       <el-dropdown size="small" @command="onCreationSelect">
-        <el-button type="primary" size="small" icon="el-icon-folder-add" @click="openCreateFolderDiglog" plain>新建</el-button>
+        <el-button type="primary" size="small" icon="el-icon-folder-add" @click="openCreateFolderDiglog" plain>新建
+        </el-button>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="file">新建文件</el-dropdown-item>
           <el-dropdown-item command="folder">新建文件夹</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <el-button-group v-show="selectedItems.length > 0" style="margin-left: 10px">
-        <el-button type="primary" icon="el-icon-download" size="small" plain @click="onDownload">{{ $t("disk.download") }}</el-button>
+        <el-button type="primary" icon="el-icon-download" size="small" plain @click="onDownload">{{ $t("disk.download")
+        }}</el-button>
         <!-- <el-button type="primary" icon="el-icon-share" size="small" @click="share" plain>分享</el-button> -->
-        <el-button type="primary" icon="el-icon-delete" size="small" plain @click="onDelete">{{ $t("disk.delete") }}</el-button>
+        <el-button type="primary" icon="el-icon-delete" size="small" plain @click="onDelete">{{ $t("disk.delete") }}
+        </el-button>
         <el-button type="primary" icon="el-icon-move" size="small" plain @click="onMove">移动到</el-button>
       </el-button-group>
 
       <div style="float: right">
-        <el-input class="search" size="small" :placeholder="$t('topbar.search')" v-model="query.kw" @keyup.enter.native="listRefresh">
+        <el-input class="search" size="small" :placeholder="$t('topbar.search')" v-model="query.kw"
+          @keyup.enter.native="listRefresh">
           <i slot="prefix" class="el-input__icon el-icon-search"></i>
         </el-input>
         <i v-if="layout == 'list'" class="iconfont icon-grid" @click="layout = 'grid'"></i>
@@ -49,25 +50,21 @@
     </el-row>
 
     <!-- main -->
-    <FileExplorer
-      ref="fexp"
-      :layout="layout"
-      :dataLoader="dataLoader"
-      :linkLoader="linkLoader"
-      :action-move="$zpan.File.move"
-      :action-copy="$zpan.File.copy"
-      :action-rename="$zpan.File.rename"
-      :action-remove="$zpan.File.delete"
-      @file-action="onFileAction"
-      @selection-change="onSelectionChange"
-    />
+    <FileExplorer ref="fexp" :layout="layout" :dataLoader="dataLoader" :linkLoader="linkLoader"
+      :action-move="$zpan.File.move" :action-copy="$zpan.File.copy" :action-rename="$zpan.File.rename"
+      :action-remove="$zpan.File.delete" @file-action="onFileAction" @selection-change="onSelectionChange" />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
+import ZpUploader from "@/components/Uploader";
 import { CSMixin } from "@/libs/mixin";
 export default {
+  name: 'disk',
+  components: {
+    ZpUploader
+  },
   mixins: [CSMixin],
   data() {
     return {
@@ -134,9 +131,6 @@ export default {
     listRefresh() {
       this.$refs.fexp.listRefresh();
     },
-    onUploadSelect(cmd) {
-      this.$emit("upload-action", { type: cmd, sid: this.getSid(), dist: this.query.dir });
-    },
     onCreationSelect(cmd) {
       switch (cmd) {
         case 'file':
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 9a6d144..ae01f80 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -23,7 +23,9 @@
       <!-- 给应用提供合适的间距 -->
       <v-container fluid>
         <!-- 如果使用 vue-router -->
+      <KeepAlive include="disk">
         <router-view @upload-action="onUploadClick" @audio-open="onAudioOpen"></router-view>
+      </KeepAlive>
       </v-container>
     </v-main>
 
@@ -149,6 +151,7 @@ export default {
   outline: 0;
   background-color: #eaeaea !important;
 }
+
 .menu {
   width: 200px;
   height: 100%;
@@ -159,6 +162,7 @@ export default {
   .menu {
     width: 0 !important;
   }
+
   .menu-open {
     position: fixed;
     width: 200px !important;
@@ -171,6 +175,7 @@ export default {
     background: rgba(1, 1, 1, 0.4);
     z-index: 998;
   }
+
   .mask-open {
     width: 100%;
   }