feat: implement the responsive

package.json

@@ -8,6 +8,9 @@
     "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",
@@ -22,16 +25,22 @@
     "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-contextmenujs": "^1.3.13",
     "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",
+    "vuetify-toast-snackbar": "^0.6.1",
     "vuex": "^3.6.2"
   },
   "eslintConfig": {
@@ -58,6 +67,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"
 }

src/components/FileExplorer/FileExplorer.vue

@@ -8,32 +8,41 @@
     </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 />
+    <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 GridExplorer from "./explorer/GridExplorer";
-import ListExplorer from "./explorer/ListExplorer";
+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,
-    ListExplorer,
+    TableExplorer,
   },
   props: {
     layout: {
       type: String,
       default: "list",
     },
-    dataLoader: Function,
-    linkLoader: Function,
-    rowButtons: Array,
-    moreButtons: Array,
     rootDir: {
       type: String,
       default: "",
     },
+    dataLoader: Function,
+    linkLoader: Function,
+    actionMove: Function,
+    actionCopy: Function,
+    actionRename: Function,
+    actionRemove: Function,
   },
   data() {
     return {
@@ -53,6 +62,13 @@ export default {
         this.listRefresh();
       }
     },
+    rows: {
+      deep: true,
+      handler(nv, ov) {
+        this.selection = nv.filter(el => el.selected == true)
+        this.$emit("selection-change", this.selection);
+      }
+    }
   },
   computed: {
     breadcrumb() {
@@ -87,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,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;
+          this.rows = data.list.map(buildIcon);
           this.offset = limit;
         } else {
           this.rows = this.rows.concat(data.list);
@@ -130,21 +143,74 @@ export default {
       let query = !dir ? {} : { dir: dir };
       return { query: query };
     },
-    onClick(type, obj) {
-      if (type == "folder") {
-        this.$router.push(this.buildQuery(obj.fullpath));
+    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) => {
-        this.$emit("file-open", type, obj, 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).then(this.listRefresh)
+    },
+    openRemove() {
+      openRemove(...this.selection).then(this.listRefresh)
+    },
   },
   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>

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>

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>