增加百度网盘内容

mock/cloud.ts

@@ -0,0 +1,31 @@
+import { MockMethod } from 'vite-plugin-mock'
+
+export default [
+  {
+    url: '/cloud/api/v1/file/list',
+    method: 'get',
+    response: ({ body, query }) => {
+      return [
+        {
+          server_filename: "java实战.pdf",
+          path: "/",
+          isDir: 0,
+          size: 1000
+        },
+        {
+          server_filename: "天道.pdf",
+          path: "/",
+          isDir: 0,
+          size: 1000
+        },
+        {
+          server_filename: "我得音乐",
+          path: "/",
+          isDir: 1,
+          size: 10001
+
+        },
+      ]
+    }
+  },
+] as MockMethod[]

package-lock.json

@@ -1807,6 +1807,12 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
+    "v-contextmenu": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/v-contextmenu/-/v-contextmenu-3.0.0.tgz",
+      "integrity": "sha512-zi38JxmTt66TmljgV1JbfEa9WvoQkpzRuEwZK7Tjb2XoRejbWLozQtkyTWXJa6x6Y3FrVDfgT36w01gpTpo41A==",
+      "dev": true
+    },
     "vite": {
       "version": "2.9.13",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.13.tgz",
@@ -2076,6 +2082,11 @@
         "@vue/devtools-api": "^6.0.0"
       }
     },
+    "vue-runtime-helpers": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz",
+      "integrity": "sha512-pZfGp+PW/IXEOyETE09xQHR1CKkR9HfHZdnMD/FVLUNI+HxYTa82evx5WrF6Kz4s82qtqHvMZ8MZpbk2zT2E1Q=="
+    },
     "vue-tsc": {
       "version": "0.29.8",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.29.8.tgz",

package.json

@@ -29,6 +29,7 @@
     "type-fest": "^2.12.2",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",
+    "vue-runtime-helpers": "^1.1.2",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
@@ -41,6 +42,7 @@
     "vite": "^2.9.13",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^2.9.6",
+    "v-contextmenu": "^3.0.0",
     "vue-tsc": "^0.29.8"
   }
 }

src/api/cloud.ts

@@ -4,12 +4,13 @@ const headers = {
   'Content-Type': 'application/json;charsetset=UTF-8'
 }
 
-const getAudioInfo = (url: string) => {
+const getFileList = (url: string) => {
   return service({
-    url: '/cloud/api/v1/common/audio-info',
+    url: '/cloud/api/v1/file/list',
     method: 'GET',
     params: { url: url },
+    headers: headers
   })
 }
 
-export { getAudioInfo }
+export { getFileList }

src/main.ts

@@ -15,6 +15,10 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
+import contentmenu from 'v-contextmenu'
+import 'v-contextmenu/dist/themes/default.css'
+app.use(contentmenu)
+
 import { setupMock } from '../mock'
 
 if (process.env.NODE_ENV === 'development') {

src/view/cloud/index.vue

@@ -1,9 +1,128 @@
 <template>
-  <div class="dashboard">个人云网盘，典型的权限，初期打算只有最高权限的我自己使用</div>
+  <el-table :data="dirContexts" @row-contextmenu="showContext" @row-click="leftClickRow"
+    @selection-change="handleSelectionChange">
+    <el-table-column type="selection" width="55" />
+    <el-table-column prop="name" width="200px">
+    </el-table-column>
+    <el-table-column prop="isDir" width="130px">
+    </el-table-column>
+    <el-table-column prop="size" width="130px">
+    </el-table-column>
+    <el-table-column prop="path" width="130px">
+    </el-table-column>
+  </el-table>
+
+  <Contextmenu auto-ajust-placement ref="contextmenu">
+    <ContextmenuItem v-if="isSelect" @click="createFolder">
+      <el-icon class="contextmenu-icon">
+        <FolderOpened />
+      </el-icon>
+      <label> _new folder</label>
+    </ContextmenuItem>
+    <ContextmenuItem v-if="isSelect" @click="createFolder">
+      <el-icon class="contextmenu-icon">
+        <FolderOpened />
+      </el-icon>
+      <label> _copy</label>
+    </ContextmenuItem>
+    <ContextmenuItem v-if="isSelect" @click="createFolder">
+      <el-icon class="contextmenu-icon">
+        <FolderOpened />
+      </el-icon>
+      <label> _rename</label>
+    </ContextmenuItem>
+    <ContextmenuItem v-if="isSelect" @click="createFolder">
+      <el-icon class="contextmenu-icon">
+        <FolderOpened />
+      </el-icon>
+      <label> _delete</label>
+    </ContextmenuItem>
+
+  </Contextmenu>
+
 </template>
 
 <script setup lang="ts">
+import { reactive } from 'vue';
+import { getFileList } from '../../api/cloud'
+import { Contextmenu, ContextmenuDivider, ContextmenuItem } from "v-contextmenu";
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref } from "vue";
+
+import { ElTable } from 'element-plus'
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+
+interface DirContext {
+  size: number
+  isDir: number
+  name: string
+  path: string
+}
+const currentInstance = getCurrentInstance();
+const dirContexts = reactive<DirContext[]>([])
+let url = ""
+
+const isSelect = ref(false)
+const selection = ref()
+
+const handleSelectionChange = (val: DirContext) => {
+  selection.value = val
+}
+const createFolder = () => {
+
+}
+
+
+
+const toggleSelection = (row: DirContext) => {
+  multipleTableRef.value.toggleRowSelection(row, true)
+  // multipleTableRef.value!.clearSelection()
+}
+
+
+const leftClickRow = (row: any, column: any, event: any) => {
+  isSelect.value = true
+  console.log(1)
+  toggleSelection(row)
+}
+
+
+
+getFileList(url).then(response => {
+
+  response.data.forEach((element: any) => {
+    const dirContext: DirContext = {
+      size: element.size,
+      isDir: element.isDir,
+      name: element.server_filename,
+      path: element.path
+    }
+    dirContexts.push(dirContext)
+  });
+
+})
+
+const showContext = (row: any, column: any, event: any) => {
+  let contextmenuRef: any = currentInstance?.proxy?.$refs.contextmenu
+
+  event.preventDefault();
+  contextmenuRef.show({
+    top: event.clientY,
+    left: event.clientX
+  });
+  console.log(row)
+  console.log(column)
+  console.log(event)
+  window.onclick = () => {
+    contextmenuRef.hide();
+    // contextMenuTargetBlank.value = false;
+    // contextMenuTargetFile.value = false;
+  };
+
+}
+
 </script>
 
+
 <style>
+
 </style>