添加 views/disk 网盘模块

src/router/disk.js

@@ -0,0 +1,38 @@
+const Disk = () => import('views/disk/Disk')
+const DiskDashboard = () => import('views/disk/DiskDashboard')
+const DiskFile = () => import('views/disk/DiskFile')
+const DiskShare = () => import('views/disk/DiskShare')
+const DiskRecycle = () => import('views/disk/DiskRecycle')
+
+export default {
+  path: '/disk',
+  name: 'Disk',
+  component: Disk,
+  meta: { needAuth: true },
+  children: [
+    {
+      path: '',
+      name: 'ExamDashboard',
+      component: DiskDashboard,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/file',
+      name: 'DiskFile',
+      component: DiskFile,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/share',
+      name: 'DiskShare',
+      component: DiskShare,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/recycle',
+      name: 'DiskRecycle',
+      component: DiskRecycle,
+      meta: { needAuth: true }
+    }
+  ]
+}

src/router/index.js

@@ -10,6 +10,7 @@ import ChartRouter from './chart'
 import VoteRouter from './vote'
 import GeoRouter from './geo'
 import WenshuRouter from './wenshu'
+import DiskRouter from './disk'
 
 // 懒加载引入页面组件，es6语法
 // ********************************************************************************************************************
@@ -51,6 +52,7 @@ const routes = [
   VoteRouter,
   GeoRouter,
   WenshuRouter,
+  DiskRouter,
   {
     path: '/login',
     name: 'Login',
@@ -183,15 +185,6 @@ const routes = [
         component: PlaylistView,
         meta: { needAuth: false }
       },
-      {
-        path: '/discover',
-        name: 'Discover',
-        component: Discover,
-        meta: { needAuth: false }
-      },
-      // ********************************************************************************************************************
-      // wenshu
-      // ********************************************************************************************************************
       {
         path: '/discover',
         name: 'Discover',

src/views/disk/Disk.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-row type="flex" justify="center">
+        <el-col :span="4">
+          <ul class="el-menu--horizontal el-menu">
+            <li class="el-menu-item">
+              <a href="/disk" style="text-decoration-line: none">
+                <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
+                disk
+              </a>
+            </li>
+          </ul>
+        </el-col>
+        <el-col :span="18">
+          <el-menu
+            class="el-menu--horizontal el-menu"
+            :default-active="this.$route.path"
+            router
+            mode="horizontal"
+          >
+            <el-menu-item index="/disk/file">
+              <template slot="title">文件</template>
+            </el-menu-item>
+            <el-menu-item index="/disk/share">
+              <template slot="title">分享</template>
+            </el-menu-item>
+            <el-menu-item index="/disk/recycle">
+              <template slot="title">回收站</template>
+            </el-menu-item>
+          </el-menu>
+        </el-col>
+        <el-col :span="2">
+          <ul class="el-menu--horizontal el-menu">
+            <li class="el-menu-item">
+              <el-dropdown v-if="user">
+                <img
+                  :src="user.avatarUrl"
+                  class="el-avatar--circle el-avatar--medium"
+                  style="margin-right: 10px; margin-top: 15px"
+                  alt=""
+                >
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item
+                    icon="el-icon-s-platform"
+                    class="size"
+                    @click.native="goToHome"
+                  >主站</el-dropdown-item>
+                  <el-dropdown-item
+                    icon="el-icon-error"
+                    class="size"
+                    @click.native="goToLogout"
+                  >退出</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <span
+                v-else
+                style="color: #007bff"
+              >登录</span>
+            </li>
+          </ul>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-container>
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import { getAuthedUser } from '@/utils/auth'
+
+export default {
+  name: 'Disk',
+  data() {
+    return {
+      user: null
+    }
+  },
+  watch: {
+    // 地址栏 url 发生变化时重新加载本页面
+    $route() {
+      this.$router.go()
+    }
+  },
+  created() {
+    document.title = '网盘'
+    this.user = getAuthedUser()
+  }
+}
+</script>
+
+<style>
+</style>

src/views/disk/DiskDashboard.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <span>disk dashboard</span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DiskDashboard',
+  data() {
+    return {
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/disk/DiskFile.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="movie-list">
+    <el-dropdown style="padding-right: 5px">
+      <el-button size="small" type="primary" icon="el-icon-upload" round>上传</el-button>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          icon="el-icon-files"
+          @click.native="onUploadFile"
+        >上传文件</el-dropdown-item>
+        <el-dropdown-item
+          icon="el-icon-folder"
+          @click.native="onUploadFolder"
+        >上传文件夹</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-button size="small" type="primary" icon="el-icon-folder-add" round @click="onCreateFolder">新建文件夹</el-button>
+    <el-input
+      v-model="inputData"
+      placeholder="搜索我的文件"
+      size="small"
+      style="width: 30%; padding-left: 5px"
+      clearable
+      @keyup.enter.native="onSearchFile"
+    >
+      <el-button slot="append" icon="el-icon-search" @click="onSearchFile"/>
+    </el-input>
+    <el-divider />
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/disk/file' }">全部文件</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/disk/file' }">文件夹1</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/disk/file' }">文件夹2</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ path: '/disk/file' }">文件夹3</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-divider />
+    <el-table
+      :data="dataList"
+      :show-header="true"
+      style="width: 100%"
+      @selection-change="handleTableSectionChange"
+    >
+      <el-table-column
+        align="center"
+        type="selection"
+      />
+      <el-table-column
+        prop="createAt"
+        label="文件名"
+      />
+      <el-table-column
+        prop="title"
+        label="大小"
+      />
+      <el-table-column
+        prop="title"
+        label="类型"
+      />
+      <el-table-column
+        prop="title"
+        label="修改时间"
+      />
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DiskFile',
+  data() {
+    return {
+      dataList: [],
+      // 所有题目的对话框中表格被选中
+      selectedTable: [],
+      inputData: ''
+    }
+  },
+  created() {
+    document.title = '所有文件'
+    this.getData()
+  },
+  methods: {
+    getData() {
+    },
+    // 处理表格被选中
+    handleTableSectionChange(val) {
+      this.selectedTable = val
+    },
+    onUploadFile() {
+      this.$message.info('upload file')
+    },
+    onUploadFolder() {
+      this.$message.info('upload folder')
+    },
+    onCreateFolder() {
+      this.$message.info('create folder')
+    },
+    onSearchFile() {
+      this.$message.info('search file')
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/disk/DiskRecycle.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <span>disk recycle</span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DiskRecycle',
+  data() {
+    return {
+    }
+  },
+  created() {
+    document.title = '回收站'
+    this.getData()
+  },
+  methods: {
+    getData() {
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/disk/DiskShare.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <span>disk share</span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'DiskShare',
+  data() {
+    return {
+    }
+  },
+  created() {
+    document.title = '分享'
+    this.getData()
+  },
+  methods: {
+    getData() {
+    }
+  }
+}
+</script>
+
+<style>
+</style>