├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── images
    │   │   ├── common
    │   │   │   └── logo.png
    │   │   ├── error
    │   │   │   ├── 401.png
    │   │   │   ├── 404.png
    │   │   │   └── 500.png
    │   │   ├── file
    │   │   │   ├── dir.png
    │   │   │   ├── file_avi.png
    │   │   │   ├── file_chm.png
    │   │   │   ├── file_code.png
    │   │   │   ├── file_css.png
    │   │   │   ├── file_csv.png
    │   │   │   ├── file_dmg.png
    │   │   │   ├── file_excel.png
    │   │   │   ├── file_exe.png
    │   │   │   ├── file_gif.png
    │   │   │   ├── file_html.png
    │   │   │   ├── file_img.png
    │   │   │   ├── file_jar.png
    │   │   │   ├── file_js.png
    │   │   │   ├── file_json.png
    │   │   │   ├── file_md.png
    │   │   │   ├── file_music.png
    │   │   │   ├── file_oa.png
    │   │   │   ├── file_open.png
    │   │   │   ├── file_pdf.png
    │   │   │   ├── file_pic.png
    │   │   │   ├── file_ppt.png
    │   │   │   ├── file_rar.png
    │   │   │   ├── file_rtf.png
    │   │   │   ├── file_sql.png
    │   │   │   ├── file_svg.png
    │   │   │   ├── file_txt.png
    │   │   │   ├── file_unknown.png
    │   │   │   ├── file_video.png
    │   │   │   ├── file_word.png
    │   │   │   └── file_zip.png
    │   │   ├── footer
    │   │   │   └── wechatImg.png
    │   │   ├── login
    │   │   │   └── qqIcon.png
    │   │   └── settings
    │   │   │   └── userImg.png
    │   └── styles
    │   │   ├── css
    │   │       ├── base.css
    │   │       ├── border.css
    │   │       ├── element-cover.css
    │   │       └── mediaScreen.styl
    │   │   ├── mixins.styl
    │   │   └── varibles.styl
    ├── components
    │   ├── DdPlayer.vue
    │   ├── DragVerify.vue
    │   ├── Footer.vue
    │   ├── GlobalUploader.vue
    │   ├── Header.vue
    │   ├── ImgReview.vue
    │   └── ScpDivider.vue
    ├── element.js
    ├── filters
    │   └── index.js
    ├── global
    │   ├── globalConst.js
    │   └── globalFunction.js
    ├── main.js
    ├── request
    │   ├── file.js
    │   ├── http.js
    │   └── user.js
    ├── router
    │   ├── before.js
    │   └── router.js
    ├── store
    │   ├── index.js
    │   └── module
    │   │   ├── fileList.js
    │   │   ├── imgReview.js
    │   │   ├── player.js
    │   │   ├── sideMenu.js
    │   │   └── user.js
    └── views
    │   ├── ErrorPage
    │       ├── 401.vue
    │       ├── 404.vue
    │       └── 500.vue
    │   ├── file
    │       ├── File.vue
    │       └── components
    │       │   ├── AsideMenu
    │       │       └── AsideMenu.vue
    │       │   └── FileList
    │       │       ├── components
    │       │           ├── BreadCrumb.vue
    │       │           ├── FileGrid.vue
    │       │           ├── FileTable.vue
    │       │           ├── FileTimeLine.vue
    │       │           ├── MoveFileDialog.vue
    │       │           ├── OperationMenu.vue
    │       │           └── SelectColumn.vue
    │       │       └── index.vue
    │   └── user
    │       ├── Login.vue
    │       └── Register.vue
└── vue.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [["@babel/preset-env", { "modules": false }]],
 3 |   "plugins": [
 4 |     [
 5 |       "component",
 6 |       {
 7 |         "libraryName": "element-ui",
 8 |         "styleLibraryName": "theme-chalk"
 9 |       }
10 |     ]
11 |   ]
12 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 MAC
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![输入图片说明](https://images.gitee.com/uploads/images/2021/0410/050022_9ec81567_2098391.png "网格视图.png")
 2 | 
 3 | ## 在线演示
 4 | 
 5 | 
 6 | [丢丢网盘演示地址](http://106.53.130.89)
 7 | 
 8 | 
 9 | 
10 | ## 功能介绍
11 | 
12 | 1. 多文件格式分类查看
13 | 
14 | 2. 支持网格、表格视图、时间线三种展示视图
15 | 
16 | 3. 支持极速秒传功能，提高上传效率
17 | 
18 | 4. 多人上传同一文件，可多人并行上传，共享他人上传进度，极大提高上传效率
19 | 
20 | 5. 拒绝冗余，每份文件只存一份，提高硬盘使用效率
21 | 
22 | 6. 上传文件前台实时显示上传文件进度，上传速率，百分比等信息
23 | 
24 | 7. 安全的下载机制，断点下载，权限校验，他人拿到了下载地址也无法下载您的文件
25 | 
26 | 8. 支持视频音频播放，进度条拖拽，倍速播放
27 | 
28 | 9. 拥有回收站功能，妈妈再也不怕我误删数据了
29 | 
30 | 10. 高效的垃圾回收机制
31 | 
32 | ## 未来支持
33 | 1. 文件夹上传
34 | 2. 文件在线解压
35 | 3. 文件在线压缩
36 | 4. 文件分享
37 | 5. 拖拽上传
38 | 6. 链接下载（输入url，下载过程交予服务器）
39 | 7. ......
40 | 
41 | ## 正在进行计划
42 | 1. 文件分享功能
43 | 
44 | ## 源码地址
45 | 
46 | | 项目名称     | 源码地址                                                                                     |
47 | | ------------ | -------------------------------------------------------------------------------------------- |
48 | | 丢丢网盘前端 | [https://gitee.com/JavaerLi/ddisk-web](https://gitee.com/JavaerLi/ddisk-web) |
49 | | 丢丢网盘后台 | [https://gitee.com/JavaerLi/ddisk-file](https://gitee.com/JavaerLi/ddisk-file)         |
50 | 
51 | 
52 | 
53 | ## 软件架构
54 | 
55 | 该项目采用前后端分离的方式进行开发和部署,主要用到以下关键技术
56 | 
57 | **前端**：Element UI、Vue CLI@3、Node.js、Webpack
58 | 
59 | **后台**：Spring Boot、Spring Data Jpa、Spring Security
60 | 
61 | **数据库** : MySQL、H2
62 | 
63 | **数据结构**：递归算法，树的遍历和插入...
64 | 
65 | 
66 | 
67 | ## 部分功能截图
68 | 
69 | ### 视频播放
70 | 
71 | ![视频播放](https://images.gitee.com/uploads/images/2021/0410/050042_0bc9d77a_2098391.png "视频播放.png")
72 | 
73 | 
74 | 
75 | ### 图片预览
76 | 
77 | ![图片预览](https://images.gitee.com/uploads/images/2021/0410/050152_9f2ee996_2098391.png "图片.png")
78 | 
79 | 
80 | 
81 | ## 特别声明
82 | 
83 | 感谢奇文社区、奇文网盘，本项目前端是在该项目UI上二次开发，后端自主研发。
84 | 
85 | 该项目也是我毕业设计作品，也是学习以来，独立开发的第一款WEB产品，如果喜欢，请您star支持一下！
86 | 
87 | 希望有热心的同学可以共享一个logo，感激不尽！
88 | 
89 | ![QQ群](https://images.gitee.com/uploads/images/2021/0410/050213_584de85f_2098391.png "qq群.png")
90 | 
91 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webscp",
 3 |   "version": "1.3.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve --open",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "canvas-nest.js": "^2.0.4",
12 |     "core-js": "^2.6.5",
13 |     "element-ui": "^2.13.2",
14 |     "qs": "^6.8.0",
15 |     "spark-md5": "^3.0.1",
16 |     "vue": "^2.6.10",
17 |     "vue-router": "^3.0.3",
18 |     "vue-simple-uploader": "^0.7.6",
19 |     "vue-video-player": "^5.0.2",
20 |     "vuex": "^3.0.1"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "^3.11.0",
24 |     "@vue/cli-plugin-eslint": "^3.11.0",
25 |     "@vue/cli-service": "^3.11.0",
26 |     "axios": "^0.18.1",
27 |     "babel-eslint": "^10.0.1",
28 |     "babel-plugin-component": "^1.1.1",
29 |     "eslint": "^5.16.0",
30 |     "eslint-plugin-vue": "^5.0.0",
31 |     "style-resources-loader": "^1.2.1",
32 |     "stylus": "^0.54.7",
33 |     "stylus-loader": "^3.0.2",
34 |     "vue-cli-plugin-axios": "0.0.4",
35 |     "vue-cli-plugin-element": "^1.0.1",
36 |     "vue-cli-plugin-style-resources-loader": "^0.1.3",
37 |     "vue-template-compiler": "^2.6.10"
38 |   },
39 |   "eslintConfig": {
40 |     "root": true,
41 |     "env": {
42 |       "node": true
43 |     },
44 |     "extends": [
45 |       "plugin:vue/essential",
46 |       "eslint:recommended"
47 |     ],
48 |     "rules": {
49 |       "no-console": "off"
50 |     },
51 |     "parserOptions": {
52 |       "parser": "babel-eslint"
53 |     }
54 |   },
55 |   "postcss": {
56 |     "plugins": {
57 |       "autoprefixer": {}
58 |     }
59 |   },
60 |   "browserslist": [
61 |     "> 1%",
62 |     "last 2 versions"
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <meta name="keywords" content="">
 9 |     <meta name="description" content="">
10 |     <link rel="icon" href="<%= BASE_URL %>logo.ico">
11 |     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
12 |     </script>
13 |     <title>丢丢网盘</title>
14 | </head>
15 | 
16 | <body>
17 | <noscript>
18 |     <strong>
19 |         We're sorry but webscp doesn't work properly without JavaScript enabled. Please enable it to
20 |         continue.
21 |     </strong>
22 | </noscript>
23 | <div id="app"></div>
24 | </body>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Header v-if="isHeaderShow" id="headWrapper"></Header>
 4 |     <keep-alive>
 5 |       <router-view class="mainContent"></router-view>
 6 |     </keep-alive>
 7 |     <Footer v-if="isFooterShow"></Footer>
 8 |     <el-backtop class="backtop" target="#app" title="快点我，带你上天！"></el-backtop>
 9 |     <!-- 将上传组件全局注册 -->
10 |     <global-uploader></global-uploader>
11 |     <!-- 查看大图 -->
12 |     <ImgReview></ImgReview>
13 |     <!-- 视频组件 -->
14 |     <VideoPlayer></VideoPlayer>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import Header from '@/components/Header.vue'
20 | import Footer from '@/components/Footer.vue'
21 | import globalUploader from '@/components/GlobalUploader.vue'
22 | import ImgReview from '@/components/ImgReview'
23 | import VideoPlayer from "@/components/DdPlayer";
24 | 
25 | export default {
26 |   name: 'App',
27 |   components: {
28 |     VideoPlayer,
29 |     Header,
30 |     Footer,
31 |     globalUploader,
32 |     ImgReview
33 |   },
34 |   computed: {
35 |     //  头部是否显示
36 |     isHeaderShow() {
37 |       let routerNameList = ['Error_401', 'Error_404', 'Error_500']
38 |       if (routerNameList.includes(this.$route.name)) {
39 |         return false
40 |       } else {
41 |         return true
42 |       }
43 |     },
44 |     //  底部是否显示
45 |     isFooterShow() {
46 |       let routerNameList = [
47 |         'File',
48 |         'Error_401',
49 |         'Error_404',
50 |         'Error_500'
51 |       ]
52 |       if (routerNameList.includes(this.$route.name)) {
53 |         return false
54 |       } else {
55 |         return true
56 |       }
57 |     }
58 |   },
59 |   data() {
60 |     return {}
61 |   }
62 | }
63 | </script>
64 | <style lang="stylus" scoped>
65 | @import '~@/assets/styles/varibles.styl'
66 | #app
67 |   height 100%
68 |   overflow-x hidden
69 |   -webkit-text-size-adjust none
70 |   overflow-y auto
71 |   >>> .el-backtop
72 |     background-color $Success
73 |     color #fff
74 |     z-index 3
75 |   .mainContent
76 |     flex 1
77 |     width 90%
78 |     min-height calc(100vh - 70px)
79 |     margin 0 auto
80 |     display flex
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/assets/images/common/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/common/logo.png


--------------------------------------------------------------------------------
/src/assets/images/error/401.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/error/401.png


--------------------------------------------------------------------------------
/src/assets/images/error/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/error/404.png


--------------------------------------------------------------------------------
/src/assets/images/error/500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/error/500.png


--------------------------------------------------------------------------------
/src/assets/images/file/dir.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/dir.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_avi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_avi.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_chm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_chm.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_code.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_css.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_csv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_csv.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_dmg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_dmg.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_excel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_excel.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_exe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_exe.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_gif.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_gif.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_html.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_img.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_jar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_jar.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_js.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_js.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_json.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_json.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_md.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_md.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_music.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_music.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_oa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_oa.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_open.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_open.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_pdf.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_pdf.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_pic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_pic.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_ppt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_ppt.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_rar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_rar.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_rtf.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_rtf.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_sql.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_sql.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_svg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_svg.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_txt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_txt.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_unknown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_unknown.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_video.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_video.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_word.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_word.png


--------------------------------------------------------------------------------
/src/assets/images/file/file_zip.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/file/file_zip.png


--------------------------------------------------------------------------------
/src/assets/images/footer/wechatImg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/footer/wechatImg.png


--------------------------------------------------------------------------------
/src/assets/images/login/qqIcon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/login/qqIcon.png


--------------------------------------------------------------------------------
/src/assets/images/settings/userImg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JavaerLQ/ddisk-web/ef1d172cf659a320772cf0d207c43d3f0e50e419/src/assets/images/settings/userImg.png


--------------------------------------------------------------------------------
/src/assets/styles/css/base.css:
--------------------------------------------------------------------------------
 1 | *{ margin:0; padding:0; box-sizing: border-box;}
 2 | html{ height: 100%; }
 3 | body{ height: 100%;font-size:16px; font-family:微软雅黑;font-style:normal;overflow-x: hidden;}
 4 | a{ text-decoration:none}
 5 | /*a,a:hover{  transition:background 0.5s linear;-webkit-transition:background 0.5s linear;-moz-transition:background 0.5s linear;-o-transition:background 0.5s linear;}*/
 6 | em, i{font-style: normal;}
 7 | ul, ol, li{list-style: none;}
 8 | img{ border:none;vertical-align:middle;}
 9 | input,select,textarea{outline:none;border:none;background:none;}
10 | textarea{resize:none;}
11 | p{line-height:22px;}
12 | .fl{float: left;}
13 | .fr{float: right;}
14 | .clear{ clear:both; height:0px; width:100%; overflow:hidden;}
15 | .position{position:relative;}
16 |  
17 | /*公共样式*/
18 | .layout{ width:1100px; display:table; margin:0 auto;}
19 | .margin-bottom { margin-bottom: 15px; }


--------------------------------------------------------------------------------
/src/assets/styles/css/border.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | .border,
  3 | .border-top,
  4 | .border-right,
  5 | .border-bottom,
  6 | .border-left,
  7 | .border-topbottom,
  8 | .border-rightleft,
  9 | .border-topleft,
 10 | .border-rightbottom,
 11 | .border-topright,
 12 | .border-bottomleft {
 13 |     position: relative;
 14 | }
 15 | .border::before,
 16 | .border-top::before,
 17 | .border-right::before,
 18 | .border-bottom::before,
 19 | .border-left::before,
 20 | .border-topbottom::before,
 21 | .border-topbottom::after,
 22 | .border-rightleft::before,
 23 | .border-rightleft::after,
 24 | .border-topleft::before,
 25 | .border-topleft::after,
 26 | .border-rightbottom::before,
 27 | .border-rightbottom::after,
 28 | .border-topright::before,
 29 | .border-topright::after,
 30 | .border-bottomleft::before,
 31 | .border-bottomleft::after {
 32 |     content: "\0020";
 33 |     overflow: hidden;
 34 |     position: absolute;
 35 | }
 36 | /* border
 37 |  * 因，边框是由伪元素区域遮盖在父级
 38 |  * 故，子级若有交互，需要对子级设置
 39 |  * 定位 及 z轴
 40 |  */
 41 | .border::before {
 42 |     box-sizing: border-box;
 43 |     top: 0;
 44 |     left: 0;
 45 |     height: 100%;
 46 |     width: 100%;
 47 |     border: 1px solid #eaeaea;
 48 |     transform-origin: 0 0;
 49 | }
 50 | .border-top::before,
 51 | .border-bottom::before,
 52 | .border-topbottom::before,
 53 | .border-topbottom::after,
 54 | .border-topleft::before,
 55 | .border-rightbottom::after,
 56 | .border-topright::before,
 57 | .border-bottomleft::before {
 58 |     left: 0;
 59 |     width: 100%;
 60 |     height: 1px;
 61 | }
 62 | .border-right::before,
 63 | .border-left::before,
 64 | .border-rightleft::before,
 65 | .border-rightleft::after,
 66 | .border-topleft::after,
 67 | .border-rightbottom::before,
 68 | .border-topright::after,
 69 | .border-bottomleft::after {
 70 |     top: 0;
 71 |     width: 1px;
 72 |     height: 100%;
 73 | }
 74 | .border-top::before,
 75 | .border-topbottom::before,
 76 | .border-topleft::before,
 77 | .border-topright::before {
 78 |     border-top: 1px solid #eaeaea;
 79 |     transform-origin: 0 0;
 80 | }
 81 | .border-right::before,
 82 | .border-rightbottom::before,
 83 | .border-rightleft::before,
 84 | .border-topright::after {
 85 |     border-right: 1px solid #eaeaea;
 86 |     transform-origin: 100% 0;
 87 | }
 88 | .border-bottom::before,
 89 | .border-topbottom::after,
 90 | .border-rightbottom::after,
 91 | .border-bottomleft::before {
 92 |     border-bottom: 1px solid #eaeaea;
 93 |     transform-origin: 0 100%;
 94 | }
 95 | .border-left::before,
 96 | .border-topleft::after,
 97 | .border-rightleft::after,
 98 | .border-bottomleft::after {
 99 |     border-left: 1px solid #eaeaea;
100 |     transform-origin: 0 0;
101 | }
102 | .border-top::before,
103 | .border-topbottom::before,
104 | .border-topleft::before,
105 | .border-topright::before {
106 |     top: 0;
107 | }
108 | .border-right::before,
109 | .border-rightleft::after,
110 | .border-rightbottom::before,
111 | .border-topright::after {
112 |     right: 0;
113 | }
114 | .border-bottom::before,
115 | .border-topbottom::after,
116 | .border-rightbottom::after,
117 | .border-bottomleft::after {
118 |     bottom: 0;
119 | }
120 | .border-left::before,
121 | .border-rightleft::before,
122 | .border-topleft::after,
123 | .border-bottomleft::before {
124 |     left: 0;
125 | }
126 | @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
127 |     /* 默认值，无需重置 */
128 | }
129 | @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
130 |     .border::before {
131 |         width: 200%;
132 |         height: 200%;
133 |         transform: scale(.5);
134 |     }
135 |     .border-top::before,
136 |     .border-bottom::before,
137 |     .border-topbottom::before,
138 |     .border-topbottom::after,
139 |     .border-topleft::before,
140 |     .border-rightbottom::after,
141 |     .border-topright::before,
142 |     .border-bottomleft::before {
143 |         transform: scaleY(.5);
144 |     }
145 |     .border-right::before,
146 |     .border-left::before,
147 |     .border-rightleft::before,
148 |     .border-rightleft::after,
149 |     .border-topleft::after,
150 |     .border-rightbottom::before,
151 |     .border-topright::after,
152 |     .border-bottomleft::after {
153 |         transform: scaleX(.5);
154 |     }
155 | }
156 | @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
157 |     .border::before {
158 |         width: 300%;
159 |         height: 300%;
160 |         transform: scale(.33333);
161 |     }
162 |     .border-top::before,
163 |     .border-bottom::before,
164 |     .border-topbottom::before,
165 |     .border-topbottom::after,
166 |     .border-topleft::before,
167 |     .border-rightbottom::after,
168 |     .border-topright::before,
169 |     .border-bottomleft::before {
170 |         transform: scaleY(.33333);
171 |     }
172 |     .border-right::before,
173 |     .border-left::before,
174 |     .border-rightleft::before,
175 |     .border-rightleft::after,
176 |     .border-topleft::after,
177 |     .border-rightbottom::before,
178 |     .border-topright::after,
179 |     .border-bottomleft::after {
180 |         transform: scaleX(.33333);
181 |     }
182 | }
183 | .border-radius {
184 |     border-radius: 4px;
185 | }


--------------------------------------------------------------------------------
/src/assets/styles/css/element-cover.css:
--------------------------------------------------------------------------------
1 | .el-avatar>img {
2 |   width: 100%;
3 | }
4 | .el-textarea__inner {
5 |   font-family: inherit;
6 | }


--------------------------------------------------------------------------------
/src/assets/styles/css/mediaScreen.styl:
--------------------------------------------------------------------------------
 1 | @media screen and (max-width 980px) 
 2 |   //  顶部导航栏
 3 |   .headerWrapper 
 4 |     .headerItem 
 5 |       padding 0 10px !important
 6 |     .userDisplay
 7 |       width 110px !important
 8 |     .el-menu-demo 
 9 |       .userDisplay 
10 |         .username-header 
11 |           display none !important
12 |   //  底部
13 |   .footer-wrapper 
14 |     .footer-top  
15 |       .info 
16 |         .logo 
17 |           height 80px !important
18 |         .link-wrapper 
19 |           padding 6px 6px 6px 12px !important
20 |           line-height 30px !important


--------------------------------------------------------------------------------
/src/assets/styles/mixins.styl:
--------------------------------------------------------------------------------
 1 | setScrollbar(scrollbarWidth, trackColor = #EBEEF5, thumbColor = #909399)
 2 | 	//  修改滚动条下面的宽度
 3 | 	&::-webkit-scrollbar
 4 | 		width scrollbarWidth
 5 | 	//  修改滚动条的下面的样式
 6 | 	&::-webkit-scrollbar-track
 7 | 		background-color trackColor
 8 | 		-webkit-border-radius 2em
 9 | 		-moz-border-radius 2em
10 | 		border-radius 2em
11 | 	//  修改滑块
12 | 	&::-webkit-scrollbar-thumb
13 | 		background-color thumbColor
14 | 		-webkit-border-radius 2em
15 | 		-moz-border-radius 2em
16 | 		border-radius 2em
17 | setEllipsis(line)
18 | 	display: -webkit-box;
19 | 	overflow: hidden;
20 | 	white-space: wrap;
21 | 	text-overflow: ellipsis;
22 | 	-webkit-box-orient: vertical; /*  -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式  */
23 | 	-webkit-line-clamp: line; /*  -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */


--------------------------------------------------------------------------------
/src/assets/styles/varibles.styl:
--------------------------------------------------------------------------------
 1 | $Primary = #409EFF
 2 | $Success = #67C23A
 3 | $Warning = #E6A23C
 4 | $Danger = #F56C6C
 5 | $Info = #909399
 6 | 
 7 | $PrimaryHover = #ecf5ff
 8 | $SuccessHover = #f0f9eb
 9 | $WarningHover = #fdf6ec
10 | $DangerHover = #fdf6ec
11 | $InfoHover = #fef0f0
12 | 
13 | $PrimaryText = #303133
14 | $RegularText = #606266
15 | $SecondaryText = #909399
16 | $Placeholder = #C0C4CC
17 | 
18 | $BorderBase = #DCDFE6
19 | $BorderLight = #E4E7ED
20 | $BorderLighter = #EBEEF5
21 | $BorderExtralight = #F2F6FC
22 | 
23 | $tabBackColor = #F5F7FA
24 | $tabBoxShadow = 0 2px 12px 0 rgba(0, 0, 0, 0.1)
25 | $tabBoxShadowMin = 0 2px 4px 0 rgba(0, 0, 0, 0.1)


--------------------------------------------------------------------------------
/src/components/DdPlayer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |       class="img-review-wrapper"
  4 |       v-show="visible"
  5 |       @click.self="minVideoReview"
  6 |   >
  7 |     <!-- 顶部信息栏 & 工具栏 -->
  8 |     <div class="tip-wrapper">
  9 |       <div class="name" :title="filename" v-text="filename"></div>
 10 |       <div class="tool-wrapper">
 11 |         <i class="item el-icon-refresh-right el-icon-circle-close" title="关闭视频" @click="closeVideoReview()"></i>
 12 |         <a
 13 |             class="item download-link"
 14 |             target="_blank"
 15 |             :href="url"
 16 |             :download="filename"
 17 |         >
 18 |           <i class="el-icon-download" title="保存到本地"></i>
 19 |         </a>
 20 |         <el-tooltip effect="dark" placement="bottom">
 21 |           <div slot="content">
 22 |             操作提示：<br/>
 23 |             点击视频以外的区域最小化视频；<br/>
 24 |             按Esc键可关闭播放器；<br/>
 25 |           </div>
 26 |           <div class="item text-wrapper">
 27 |             <span class="text">操作提示</span>
 28 |             <i class="el-icon-question"></i>
 29 |           </div>
 30 |         </el-tooltip>
 31 |       </div>
 32 |     </div>
 33 |     <!-- 视频查看 -->
 34 |     <video-player class="my-player"
 35 |                   ref="videoPlayer"
 36 |                   :playsinline="false"
 37 |                   @playing="onPlayerPlaying($event)"
 38 |                   @ended="onPlayerEnded($event)"
 39 |                   :options="playerOptions">
 40 |     </video-player>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import {videoPlayer} from 'vue-video-player'
 46 | import 'video.js/dist/video-js.css'
 47 | 
 48 | export default {
 49 |   name: 'VideoPlayer',
 50 |   data() {
 51 |     return {
 52 |       playerOptions: {
 53 |         playbackRates: [0.5, 1.0, 1.5, 2.0, 2.5], // 可选的播放速度
 54 |         autoplay: true, // 如果为true,浏览器准备好时开始回放。
 55 |         muted: false, // 默认情况下将会消除任何音频。
 56 |         loop: false, // 是否视频一结束就重新开始。
 57 |         preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
 58 |         language: 'zh-CN',
 59 |         // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
 60 |         fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
 61 |         sources: [],
 62 |         poster: '', // 封面地址
 63 |         notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
 64 |         controlBar: {
 65 |           timeDivider: true, // 当前时间和持续时间的分隔符
 66 |           durationDisplay: true, // 显示持续时间
 67 |           remainingTimeDisplay: true, // 是否显示剩余时间功能
 68 |           fullscreenToggle: true // 是否显示全屏按钮
 69 |         }
 70 |       }
 71 |     }
 72 |   },
 73 |   components: {
 74 |     videoPlayer
 75 |   },
 76 |   computed: {
 77 |     visible() {
 78 |       return this.$store.state.player.videoPlayer.visible
 79 |     },
 80 |     filename() {
 81 |       return this.$store.state.player.videoPlayer.filename
 82 |     },
 83 |     url() {
 84 |       return this.$store.state.player.videoPlayer.url
 85 |     }
 86 |   },
 87 |   watch: {
 88 |     // 监听 图片查看组件 显隐状态变化
 89 |     visible(val) {
 90 |       let body = document.querySelector('body')
 91 |       if (val) {
 92 |         // 挂在body下，防止组件元素有样式transform而使position: fixed失效
 93 |         body.appendChild(this.$el)
 94 |         body.style.overflow = 'hidden'
 95 |         // 添加键盘Esc事件
 96 |         this.$nextTick(() => {
 97 |           document.addEventListener('keyup', (e) => {
 98 |             if (e.keyCode === 27) {
 99 |               this.closeVideoReview()
100 |             }
101 |           })
102 |         })
103 |       } else {
104 |         body.style.overflow = 'auto'
105 |         document.removeEventListener('keyup', (e) => {
106 |           if (e.keyCode === 27) {
107 |             this.closeVideoReview()
108 |           }
109 |         })
110 |       }
111 |     },
112 |     url() {
113 |       this.playerOptions.sources = [{src: this.url, type: 'video/webm'}]
114 |     }
115 |   },
116 |   methods: {
117 |     //  最小化
118 |     minVideoReview() {
119 |       this.$message.success(this.filename + "正在后台播放")
120 |       this.$store.commit('setVideoPlayMin')
121 |     },
122 |     closeVideoReview() {
123 |       this.$message.success("视频播放器已关闭")
124 |       this.$store.commit("setPlaying", false)
125 |       this.$store.commit('closeVideoPlay')
126 |     },
127 |     // 已开始播放回调
128 |     onPlayerPlaying() {
129 |       this.$store.commit("setPlaying", true)
130 |     },
131 |     // 视频播完回调
132 |     onPlayerEnded() {
133 |       this.$store.commit("setPlaying", false)
134 |     },
135 |   }
136 | }
137 | </script>
138 | 
139 | <style lang="stylus" scoped>
140 | @import '~@/assets/styles/varibles.styl'
141 | 
142 | .img-review-wrapper
143 |   position fixed
144 |   top 0
145 |   right 0
146 |   bottom 0
147 |   left 0
148 |   overflow auto
149 |   width 100%
150 |   height 100%
151 |   z-index 2010
152 |   text-align center
153 |   display flex
154 |   align-items center
155 |   animation imgReviewAnimation 0.3s
156 |   -webkit-animation imgReviewAnimation 0.3s /* Safari and Chrome */
157 |   animation-iteration-count 0.3
158 |   -webkit-animation-iteration-count 0.3
159 |   animation-fill-mode forwards
160 |   -webkit-animation-fill-mode forwards /* Safari 和 Chrome */
161 |   @keyframes imgReviewAnimation
162 |     0%
163 |       background transparent
164 |     100%
165 |       background rgba(0, 0, 0, 0.8)
166 |   @keyframes imgReviewAnimation
167 |     0%
168 |       background transparent
169 |     100%
170 |       background rgba(0, 0, 0, 0.8)
171 | 
172 |   .tip-wrapper
173 |     position fixed
174 |     top 0
175 |     left 0
176 |     z-index 2011
177 |     background rgba(0, 0, 0, 0.5)
178 |     padding 0 48px
179 |     width 100%
180 |     height 48px
181 |     line-height 48px
182 |     color #fff
183 |     font-size 16px
184 |     display flex
185 |     justify-content space-between
186 | 
187 |     .name
188 |       flex 1
189 |       padding-right 16px
190 |       text-align left
191 |       overflow hidden
192 |       text-overflow ellipsis
193 |       white-space nowrap
194 | 
195 |     .tool-wrapper
196 |       flex 1
197 |       display flex
198 |       justify-content flex-end
199 | 
200 |       .item
201 |         margin-left 16px
202 |         cursor pointer
203 | 
204 |         &:hover
205 |           opacity 0.7
206 | 
207 |       .el-icon-refresh-right
208 |         line-height 48px
209 |         font-size 18px
210 | 
211 |       .download-link
212 |         color inherit
213 |         font-size 18px
214 | 
215 |       .text-wrapper
216 |         margin-left 32px
217 | 
218 |         .text
219 |           margin-right 8px
220 | 
221 | 
222 |   .my-player
223 |     width 70%
224 |     height 70%
225 |     display flex
226 |     align-items center
227 |     margin 0 auto
228 | </style>
229 | 


--------------------------------------------------------------------------------
/src/components/DragVerify.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 滑动解锁插件 http://www.jq22.com/jquery-info22779 -->
  3 |   <div
  4 |     ref="dragVerify"
  5 |     class="drag_verify"
  6 |     :style="dragVerifyStyle"
  7 |     @mousemove="dragMoving"
  8 |     @mouseup="dragFinish"
  9 |     @mouseleave="dragFinish"
 10 |     @touchmove="dragMoving"
 11 |     @touchend="dragFinish"
 12 |   >
 13 |     <div
 14 |       class="dv_progress_bar"
 15 |       ref="progressBar"
 16 |       :class="{ goFirst2: isOk }"
 17 |       :style="progressBarStyle"
 18 |     ></div>
 19 |     <div class="dv_text" :style="textStyle" ref="message">
 20 |       <slot name="textBefore" v-if="$slots.textBefore"></slot>
 21 |       {{message}}
 22 |       <slot name="textAfter" v-if="$slots.textAfter"></slot>
 23 |     </div>
 24 | 
 25 |     <div
 26 |       class="dv_handler dv_handler_bg"
 27 |       :class="{goFirst:isOk}"
 28 |       @mousedown="dragStart"
 29 |       @touchstart="dragStart"
 30 |       ref="handler"
 31 |       :style="handlerStyle"
 32 |     >
 33 |       <i :class="handlerIcon"></i>
 34 |     </div>
 35 |   </div>
 36 | </template>
 37 | <script>
 38 | export default {
 39 |   name: 'dragVerify',
 40 |   props: {
 41 |     isPassing: {
 42 |       type: Boolean,
 43 |       default: false
 44 |     },
 45 |     width: {
 46 |       type: Number,
 47 |       default: 250
 48 |     },
 49 |     height: {
 50 |       type: Number,
 51 |       default: 40
 52 |     },
 53 |     text: {
 54 |       type: String,
 55 |       default: 'swiping to the right side'
 56 |     },
 57 |     successText: {
 58 |       type: String,
 59 |       default: 'success'
 60 |     },
 61 |     background: {
 62 |       type: String,
 63 |       default: '#eee'
 64 |     },
 65 |     progressBarBg: {
 66 |       type: String,
 67 |       default: '#76c61d'
 68 |     },
 69 |     completedBg: {
 70 |       type: String,
 71 |       default: '#76c61d'
 72 |     },
 73 |     circle: {
 74 |       type: Boolean,
 75 |       default: false
 76 |     },
 77 |     radius: {
 78 |       type: String,
 79 |       default: '4px'
 80 |     },
 81 |     handlerIcon: {
 82 |       type: String
 83 |     },
 84 |     successIcon: {
 85 |       type: String
 86 |     },
 87 |     handlerBg: {
 88 |       type: String,
 89 |       default: '#fff'
 90 |     },
 91 |     textSize: {
 92 |       type: String,
 93 |       default: '14px'
 94 |     },
 95 |     textColor: {
 96 |       type: String,
 97 |       default: '#333'
 98 |     }
 99 |   },
100 |   mounted() {
101 |     const dragEl = this.$refs.dragVerify
102 |     dragEl.style.setProperty('--textColor', this.textColor)
103 |     dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px')
104 |     dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px')
105 |   },
106 |   computed: {
107 |     handlerStyle() {
108 |       return {
109 |         left: '0px',
110 |         width: this.height + 'px',
111 |         height: this.height + 'px',
112 |         background: this.handlerBg
113 |       }
114 |     },
115 |     message() {
116 |       return this.isPassing ? this.successText : this.text
117 |     },
118 |     dragVerifyStyle() {
119 |       return {
120 |         width: this.width + 'px',
121 |         height: this.height + 'px',
122 |         lineHeight: this.height + 'px',
123 |         background: this.background,
124 |         borderRadius: this.circle ? this.height / 2 + 'px' : this.radius
125 |       }
126 |     },
127 |     progressBarStyle() {
128 |       return {
129 |         background: this.progressBarBg,
130 |         height: this.height + 'px',
131 |         borderRadius: this.circle
132 |           ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px'
133 |           : this.radius
134 |       }
135 |     },
136 |     textStyle() {
137 |       return {
138 |         height: this.height + 'px',
139 |         width: this.width + 'px',
140 |         fontSize: this.textSize
141 |       }
142 |     }
143 |   },
144 |   data() {
145 |     return {
146 |       isMoving: false,
147 |       x: 0,
148 |       isOk: false
149 |     }
150 |   },
151 |   methods: {
152 |     dragStart(e) {
153 |       if (!this.isPassing) {
154 |         this.isMoving = true
155 |         var handler = this.$refs.handler
156 |         this.x =
157 |           (e.pageX || e.touches[0].pageX) -
158 |           parseInt(handler.style.left.replace('px', ''), 10)
159 |       }
160 |       this.$emit('handlerMove')
161 |     },
162 |     dragMoving(e) {
163 |       if (this.isMoving && !this.isPassing) {
164 |         var _x = (e.pageX || e.touches[0].pageX) - this.x
165 |         var handler = this.$refs.handler
166 |         if (_x > 0 && _x <= this.width - this.height) {
167 |           handler.style.left = _x + 'px'
168 |           this.$refs.progressBar.style.width = _x + this.height / 2 + 'px'
169 |         } else if (_x > this.width - this.height) {
170 |           handler.style.left = this.width - this.height + 'px'
171 |           this.$refs.progressBar.style.width =
172 |             this.width - this.height / 2 + 'px'
173 |           this.passVerify()
174 |         }
175 |       }
176 |     },
177 |     dragFinish(e) {
178 |       if (this.isMoving && !this.isPassing) {
179 |         var _x = (e.pageX || e.changedTouches[0].pageX) - this.x
180 |         if (_x < this.width - this.height) {
181 |           this.isOk = true
182 |           var that = this
183 |           setTimeout(function() {
184 |             that.$refs.handler.style.left = '0'
185 |             that.$refs.progressBar.style.width = '0'
186 |             that.isOk = false
187 |           }, 500)
188 |         } else {
189 |           var handler = this.$refs.handler
190 |           handler.style.left = this.width - this.height + 'px'
191 |           this.$refs.progressBar.style.width =
192 |             this.width - this.height / 2 + 'px'
193 |           this.passVerify()
194 |         }
195 |         this.isMoving = false
196 |       }
197 |     },
198 |     passVerify() {
199 |       this.$emit('update:isPassing', true)
200 |       this.isMoving = false
201 |       var handler = this.$refs.handler
202 |       handler.children[0].className = this.successIcon
203 |       this.$refs.progressBar.style.background = this.completedBg
204 |       this.$refs.message.style['-webkit-text-fill-color'] = 'unset'
205 |       this.$refs.message.style.animation = 'slidetounlock2 3s infinite'
206 |       this.$refs.message.style.color = '#fff'
207 |       this.$emit('passcallback')
208 |     },
209 |     reset() {
210 |       const oriData = this.$options.data()
211 |       for (const key in oriData) {
212 |         if (oriData.hasOwnProperty(key)) {
213 |           this.$set(this, key, oriData[key])
214 |         }
215 |       }
216 |       var handler = this.$refs.handler
217 |       var message = this.$refs.message
218 |       handler.style.left = '0'
219 |       this.$refs.progressBar.style.width = '0'
220 |       handler.children[0].className = this.handlerIcon
221 |       message.style['-webkit-text-fill-color'] = 'transparent'
222 |       message.style.animation = 'slidetounlock 3s infinite'
223 |       message.style.color = this.background
224 |     }
225 |   }
226 | }
227 | </script>
228 | <style lang="stylus" scoped>
229 | .drag_verify
230 |   position relative
231 |   background-color #e8e8e8
232 |   text-align center
233 |   overflow hidden
234 |   .dv_handler
235 |     position absolute
236 |     top 0px
237 |     left 0px
238 |     cursor move
239 |     i
240 |       color #666
241 |       padding-left 0
242 |       font-size 16px
243 |     .el-icon-circle-check
244 |       color #6c6
245 |       margin-top 9px
246 |   .dv_progress_bar
247 |     position absolute
248 |     height 34px
249 |     width 0px
250 |   .dv_text
251 |     position absolute
252 |     top 0px
253 |     color transparent
254 |     -moz-user-select none
255 |     -webkit-user-select none
256 |     user-select none
257 |     -o-user-select none
258 |     -ms-user-select none
259 |     background -webkit-gradient(
260 |       linear,
261 |       left top,
262 |       right top,
263 |       color-stop(0, var(--textColor)),
264 |       color-stop(0.4, var(--textColor)),
265 |       color-stop(0.5, #fff),
266 |       color-stop(0.6, var(--textColor)),
267 |       color-stop(1, var(--textColor))
268 |     )
269 |     -webkit-background-clip text
270 |     -webkit-text-fill-color transparent
271 |     -webkit-text-size-adjust none
272 |     animation slidetounlock 3s infinite
273 |     *
274 |       -webkit-text-fill-color var(--textColor)
275 |   .goFirst
276 |     left 0px !important
277 |     transition left 0.5s
278 |   .goFirst2
279 |     width 0px !important
280 |     transition width 0.5s
281 | </style>
282 | <style>
283 | @keyframes slidetounlock {
284 |   0% {
285 |     background-position: var(--pwidth) 0;
286 |   }
287 |   100% {
288 |     background-position: var(--width) 0;
289 |   }
290 | }
291 | @keyframes slidetounlock2 {
292 |   0% {
293 |     background-position: var(--pwidth) 0;
294 |   }
295 |   100% {
296 |     background-position: var(--pwidth) 0;
297 |   }
298 | }
299 | </style>


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="footer-wrapper">
  3 |     <ScpDivider></ScpDivider>
  4 |     <div class="footer-top">
  5 |       <div class="info">
  6 |         <img class="logo" :src="logoUrl" />
  7 |         <div class="link-wrapper" align="middle">
  8 |           <div class="info-website">Author: Richard</div>
  9 |           <div class="info-email">Email：<a href="mailto: 974102233@qq.com">974102233@qq.com</a></div>
 10 |           <div class="info-welcome"><b>
 11 |             <p>体验账号:superman 密码:1234567</p>
 12 |             <p><font color="red">温馨提示：使用体验账号很可能会被挤下线，如需更好的体验，请自行注册账号！</font></p>
 13 |           </b>
 14 |           </div>
 15 |         </div>
 16 |       </div>
 17 |       <div class="code-2-img-wrapper">
 18 |         <div class="code-info">
 19 |           <img class="code-2-img" :src="wechatImg" />
 20 |           <p class="code-2-text">个人微信</p>
 21 |         </div>
 22 |       </div>
 23 |     </div>
 24 |     <div class="copy-right-wrapper">
 25 |       <div class="tip-website">为获得最佳浏览体验，建议使用IE11、FireFox50.5、Chrome51.0及以上版本的浏览器</div>
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import ScpDivider from '@/components/ScpDivider'
 32 | 
 33 | export default {
 34 |   name: 'Footer',
 35 |   components: {
 36 |     ScpDivider
 37 |   },
 38 |   data() {
 39 |     return {
 40 |       logoUrl: require('@/assets/images/common/logo.png'),
 41 |       wechatImg: require('@/assets/images/footer/wechatImg.png')
 42 |     }
 43 |   }
 44 | }
 45 | </script>
 46 | 
 47 | <style lang="stylus" scoped>
 48 | @import '~@/assets/styles/varibles.styl'
 49 | .footer-wrapper
 50 |   background $Info
 51 |   margin-top 20px
 52 |   >>> .divider
 53 |     height 3px
 54 |     margin 0
 55 |   .footer-top
 56 |     width 90%
 57 |     margin 0 auto
 58 |     padding 40px 0
 59 |     display flex
 60 |     justify-content space-between
 61 |     .info
 62 |       display flex
 63 |       width 75%
 64 |       .logo
 65 |         height 126px
 66 |       .link-wrapper
 67 |         color $BorderLight
 68 |         flex 1
 69 |         padding 20px 10px 10px 40px
 70 |         line-height 40px
 71 |         .info-website
 72 |           .phone
 73 |             .phone-number
 74 |               font-size 28px
 75 |               padding-bottom 4px
 76 |             .phone-text
 77 |               text-align center
 78 |     .code-2-img-wrapper
 79 |       width 25%
 80 |       padding-top 20px
 81 |       display flex
 82 |       justify-content space-around
 83 |       .code-info
 84 |         width 36%
 85 |         text-align center
 86 |         .code-2-img
 87 |           width 90%
 88 |           height auto
 89 |           margin-bottom 10px
 90 |         .code-2-text
 91 |           width 90%
 92 |           text-align center
 93 |           color $BorderLight
 94 |           margin 0 auto
 95 |   .footer-contact
 96 |     color $BorderLight
 97 |     a
 98 |       color #a5aaa9
 99 |     .contact-top
100 |       padding-top 20px
101 |       line-height 30px
102 |     .contact-bottom
103 |       line-height 35px
104 |   .copy-right-wrapper
105 |     color $BorderLight
106 |     background $Primary
107 |     text-align center
108 |     padding 20px 0
109 |     font-size 14px
110 |     color $BorderLight
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/GlobalUploader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="global-uploader">
  3 | 
  4 |     <!-- 上传 -->
  5 |     <uploader
  6 |         ref="uploader"
  7 |         :options="options"
  8 |         :autoStart="false"
  9 |         @file-added="filesAdded"
 10 |         @file-success="onFileSuccess"
 11 |         @file-progress="onFileProgress"
 12 |         @file-error="onFileError"
 13 |         class="uploader-app">
 14 |       <uploader-unsupport></uploader-unsupport>
 15 | 
 16 |       <uploader-btn id="global-uploader-btn" :attrs="attrs" ref="uploadBtn">选择文件</uploader-btn>
 17 | 
 18 |       <uploader-list v-show="panelShow">
 19 |         <div class="file-panel" slot-scope="props" :class="{'collapse': collapse}">
 20 |           <div class="file-title">
 21 |             <span class="title-span">上传列表</span>
 22 |             <div class="operate">
 23 |               <el-button @click="fileListShow" type="text" :title="collapse ? '展开':'折叠' ">
 24 |                 <i class="iconfont" :class="collapse ? 'el-icon-full-screen': 'el-icon-minus'"></i>
 25 |               </el-button>
 26 |               <el-button @click="close" type="text" title="关闭">
 27 |                 <i class="iconfont el-icon-close"></i>
 28 |               </el-button>
 29 |             </div>
 30 |           </div>
 31 | 
 32 |           <ul class="file-list">
 33 |             <li v-for="file in props.fileList" :key="file.id">
 34 |               <uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true"></uploader-file>
 35 |             </li>
 36 |             <div class="no-file" v-if="!props.fileList.length"><i class="iconfont icon-empty-file"></i> 暂无待上传文件</div>
 37 |           </ul>
 38 |         </div>
 39 |       </uploader-list>
 40 | 
 41 |     </uploader>
 42 | 
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | import {url} from "@/request/http";
 48 | import {mergeFile} from "@/request/file";
 49 | import SparkMD5 from 'spark-md5'
 50 | import {CHUNK_SIZE} from "@/global/globalConst";
 51 | 
 52 | export default {
 53 |   data() {
 54 |     return {
 55 |       options: {
 56 |         target: url('/transfer/upload'), // 目标上传 URL
 57 |         chunkSize: CHUNK_SIZE, // 1M
 58 |         fileParameterName: 'file',
 59 |         maxChunkRetries: 3,
 60 |         simultaneousUploads: 5, //并发上传数
 61 |         forceChunkSize: true,
 62 |         testChunks: true,   //是否开启服务器分片校验
 63 |         // 服务器分片校验函数，秒传及断点续传基础
 64 |         checkChunkUploadedByResponse: function (chunk, message) {
 65 |           let data = JSON.parse(message);
 66 |           if (data.skipUpload) {
 67 |             return true;
 68 |           }
 69 |           return (data.uploaded || []).indexOf(chunk.offset + 1) >= 0
 70 |         },
 71 |         parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
 72 |           return parsedTimeRemaining
 73 |               .replace(/\syears?/, '年')
 74 |               .replace(/\days?/, '天')
 75 |               .replace(/\shours?/, '小时')
 76 |               .replace(/\sminutes?/, '分钟')
 77 |               .replace(/\sseconds?/, '秒')
 78 |         },
 79 |         query() {
 80 |         },
 81 |       },
 82 |       attrs: {
 83 |         accept: '*'
 84 |       },
 85 |       panelShow: false,   //选择文件后，展示上传panel
 86 |       collapse: false,
 87 |     }
 88 |   },
 89 |   mounted() {
 90 |     this.$nextTick(()=>{
 91 |       this.$EventBus.$on('openUploader', query => {
 92 |         this.params = query || {};
 93 |         if (this.$refs.uploadBtn) {
 94 |           this.$refs.uploadBtn.$el.click()
 95 |         }
 96 |       });
 97 |     })
 98 |    
 99 |   },
100 |   computed: {
101 |     //Uploader实例
102 |     uploader() {
103 |       return this.$refs.uploader.uploader;
104 |     }
105 |   },
106 |   methods: {
107 |     // 添加文件的回调
108 |     filesAdded(file) {
109 |       this.panelShow = true;
110 |       this.computeMD5(file);
111 |     },
112 |     onFileProgress(rootFile, file, chunk) {
113 |       console.log(`上传中 ${file.name}，chunk：${chunk.startByte / CHUNK_SIZE} ~ ${Math.ceil(chunk.endByte / CHUNK_SIZE)}`)
114 |     },
115 |     // 文件上传成功的回调
116 |     onFileSuccess(rootFile, file, response, chunk) {
117 | 
118 |       let uploadSuccess = (file)=> {
119 |         this.statusRemove(file.id);
120 |         this.$EventBus.$emit('refreshList', "")
121 |         this.$EventBus.$emit('refreshStorage', "")
122 |         this.$message.success(`${file.name} - 上传完毕`)
123 |       }
124 |       let res = JSON.parse(response)
125 | 
126 | 
127 |       // 如果服务端返回需要合并
128 |       if (res.needMerge) {
129 |         this.statusSet(file.id, "merging")
130 |         mergeFile({
131 |           filename: file.name,
132 |           chunkSize: chunk.chunkSize,
133 |           folderId: this.filePath().current(),
134 |           identifier: file.uniqueIdentifier
135 |         }).then(data => {
136 |           // 文件合并成功
137 |           console.log(data)
138 |           uploadSuccess(file);
139 |         }).catch(err => {
140 |           console.error(err)
141 |           this.$message.error("系统忙，合并失败")
142 |           this.statusSet(file.id, 'failed');
143 |         });
144 |       } else {
145 |         // 不需要合并
146 |         uploadSuccess(file);
147 |       }
148 |     },
149 |     onFileError(rootFile, file, response, chunk) {
150 | 
151 |       // 文件状态设为“失败”
152 |       this.statusSet(file.id, 'failed');
153 |       this.$message({
154 |         message: "文件上传失败",
155 |         type: 'error'
156 |       })
157 |     },
158 |     /**
159 |      * 计算md5，实现断点续传及秒传
160 |      * @param file
161 |      */
162 |     computeMD5(file) {
163 |       let fileReader = new FileReader();
164 |       let time = new Date().getTime();
165 |       let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
166 |       let currentChunk = 0;
167 |       let chunks = Math.ceil(file.size / CHUNK_SIZE);
168 |       let spark = new SparkMD5.ArrayBuffer();
169 | 
170 |       let loadNext = ()=>{
171 |         let start = currentChunk * CHUNK_SIZE;
172 |         let end = ((start + CHUNK_SIZE) >= file.size) ? file.size : start + CHUNK_SIZE;
173 |         fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
174 |       };
175 | 
176 |       // 文件状态设为"计算MD5"
177 |       this.statusSet(file.id, 'md5');
178 |       file.pause();
179 |       loadNext();
180 |       fileReader.onload = e => {
181 |         spark.append(e.target.result);
182 |         if (currentChunk < chunks) {
183 |           currentChunk++;
184 |           loadNext();
185 |           // 实时展示MD5的计算进度
186 |           this.$nextTick(() => {
187 |             $(`.myStatus_${file.id}`).text('校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%')
188 |           })
189 |         } else {
190 |           let md5 = spark.end();
191 |           this.computeMD5Success(md5, file);
192 |           console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`);
193 |         }
194 |       };
195 |       fileReader.onerror = () => {
196 |         this.error(`文件${file.name}读取出错，请检查该文件`)
197 |         file.cancel();
198 |       };
199 |     },
200 |     computeMD5Success(md5, file) {
201 |       // 将自定义参数直接加载uploader实例的opts上
202 |       Object.assign(this.uploader.opts, {
203 |         query: {
204 |           ...this.params,
205 |         }
206 |       })
207 |       file.uniqueIdentifier = md5;
208 |       file.resume();
209 |       this.statusRemove(file.id);
210 |     },
211 |     fileListShow() {
212 |       let $list = $('#global-uploader .file-list');
213 |       if ($list.is(':visible')) {
214 |         $list.slideUp();
215 |         this.collapse = true;
216 |       } else {
217 |         $list.slideDown();
218 |         this.collapse = false;
219 |       }
220 |     },
221 |     close() {
222 |       this.uploader.cancel();
223 |       this.panelShow = false;
224 |     },
225 |     /**
226 |      * 新增的自定义的状态: 'md5'、'transcoding'、'failed'
227 |      * @param id
228 |      * @param status
229 |      */
230 |     statusSet(id, status) {
231 |       // debugger
232 |       let statusMap = {
233 |         md5: {
234 |           text: '校验MD5',
235 |           bgc: '#fff'
236 |         },
237 |         merging: {
238 |           text: '合并中',
239 |           bgc: '#e2eeff'
240 |         },
241 |         transcoding: {
242 |           text: '转码中',
243 |           bgc: '#e2eeff'
244 |         },
245 |         failed: {
246 |           text: '上传失败',
247 |           bgc: '#e2eeff'
248 |         }
249 |       }
250 |       this.$nextTick(() => {
251 |         $(`<p class="myStatus_${id}"></p>`).appendTo(`.file_${id} .uploader-file-status`).css({
252 |           'position': 'absolute',
253 |           'top': '0',
254 |           'left': '0',
255 |           'right': '0',
256 |           'bottom': '0',
257 |           'zIndex': '1',
258 |           'backgroundColor': statusMap[status].bgc
259 |         }).text(statusMap[status].text);
260 |       })
261 |     },
262 |     statusRemove(id) {
263 |       this.$nextTick(() => {
264 |         $(`.myStatus_${id}`).remove();
265 |       })
266 |     },
267 |     error(msg) {
268 |       this.$notify({
269 |         title: '错误',
270 |         message: msg,
271 |         type: 'error',
272 |         duration: 2000
273 |       })
274 |     }
275 |   },
276 |   watch: {},
277 |   destroyed() {
278 |     this.$off('openUploader');
279 |   },
280 |   components: {}
281 | }
282 | </script>
283 | 
284 | <style lang="stylus" scoped>
285 | #global-uploader {
286 |   position: fixed;
287 |   z-index: 20;
288 |   right: 15px;
289 |   bottom: 15px;
290 | 
291 |   .uploader-app {
292 |     width: 520px;
293 |   }
294 | 
295 |   .file-panel {
296 |     background-color: #fff;
297 |     border: 1px solid #e2e2e2;
298 |     border-radius: 7px 7px 0 0;
299 |     box-shadow: 0 0 10px rgba(0, 0, 0, .2);
300 | 
301 |     .file-title {
302 |       display: flex;
303 |       height: 40px;
304 |       line-height: 40px;
305 |       padding: 0 15px;
306 |       border-bottom: 1px solid #ddd;
307 | 
308 |       .title-span {
309 |         padding-left: 0;
310 |         margin-bottom: 0;
311 |         font-size: 17px;
312 |         color: #303133;
313 |       }
314 | 
315 |       .operate {
316 |         flex: 1;
317 |         text-align: right;
318 |       }
319 |     }
320 | 
321 |     .file-list {
322 |       position: relative;
323 |       height: 240px;
324 |       overflow-x: hidden;
325 |       overflow-y: auto;
326 |       background-color: #fff;
327 | 
328 |       > li {
329 |         background-color: #fff;
330 |       }
331 |     }
332 | 
333 |     &.collapse {
334 |       .file-title {
335 |         background-color: #E7ECF2;
336 |       }
337 |     }
338 |   }
339 | 
340 |   .no-file {
341 |     position: absolute;
342 |     top: 50%;
343 |     left: 50%;
344 |     transform: translate(-50%, -50%);
345 |     font-size: 16px;
346 |   }
347 | 
348 |   /deep/ .uploader-file-icon {
349 |     &:before {
350 |       content: '' !important;
351 |     }
352 | 
353 |     &[icon=image] {
354 |       background: url(/assets/images/file/file_pic.png);
355 |     }
356 | 
357 |     &[icon=video] {
358 |       background: url(/assets/images/file/file_video.png);
359 |     }
360 | 
361 |     &[icon=document] {
362 |       background: url(/assets/images/file/file_txt.png);
363 |     }
364 |   }
365 | 
366 |   /deep/ .uploader-file-actions > span {
367 |     margin-right: 6px;
368 |   }
369 | }
370 | 
371 | /* 隐藏上传按钮 */
372 | #global-uploader-btn {
373 |   position: absolute;
374 |   clip: rect(0, 0, 0, 0);
375 | }
376 | </style>
377 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="headerWrapper">
  3 |     <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
  4 |       <el-menu-item class="headerLogo" disabled>
  5 |         <img class="logo" :src="logoUrl"/>
  6 |       </el-menu-item>
  7 |       <el-menu-item class="headerItem" index="1" :route="{ name: 'File', query: { fileType: FILE_TYPE.ALL } }">丢丢网盘
  8 |       </el-menu-item>
  9 |       <el-menu-item class="headerItem userDisplay right-menu-item" v-show="isLogin">
 10 |         <el-avatar :size="34" :src="user.imgUrl" fit="cover">
 11 |           <img :src="userImgDefault"/>
 12 |         </el-avatar>
 13 |         <span class="username-header" v-text="user.username"></span>
 14 |       </el-menu-item>
 15 |       <el-menu-item class="headerItem exit right-menu-item" v-show="isLogin"  @click="exitButton()">退出
 16 |       </el-menu-item>
 17 |       <el-menu-item class="headerItem login right-menu-item" v-show="!isLogin" index="4" :route="{ name: 'Login' }"
 18 |       >登录
 19 |       </el-menu-item
 20 |       >
 21 |       <!-- 开发环境 -->
 22 |       <el-menu-item
 23 |           class="headerItem register right-menu-item"
 24 |           v-show="!isLogin"
 25 |           index="5"
 26 |           :route="{ name: 'Register' }"
 27 |       >注册
 28 |       </el-menu-item>
 29 |     </el-menu>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | 
 35 | import {logout} from "@/request/user.js";
 36 | import {mapGetters} from 'vuex'
 37 | 
 38 | export default {
 39 |   name: 'Header',
 40 |   data() {
 41 |     return {
 42 |       logoUrl: require('@/assets/images/common/logo.png'),
 43 |       userImgDefault: require('@/assets/images/settings/userImg.png')
 44 |     }
 45 |   },
 46 |   computed: {
 47 |     ...mapGetters(['isLogin', 'user', 'isPlaying']),
 48 |     activeIndex: {
 49 |       get() {
 50 |         let routerName = this.$route.name
 51 |         const ROUTERMAP = {
 52 |           File: '1',
 53 |           Login: '4',
 54 |           Register: '5'
 55 |         }
 56 |         return ROUTERMAP[routerName]
 57 |       },
 58 |       set() {
 59 |         return '1'
 60 |       }
 61 |     }
 62 |   },
 63 |   methods: {
 64 |     //  退出登录
 65 |     exitButton() {
 66 |       logout().then(() => {
 67 |         this.$message.success('退出登录成功！')
 68 |         this.$store.dispatch('getUserInfo').then(() => {
 69 |           this.$router.push({path: '/login'})
 70 |         })
 71 |       })
 72 |     }
 73 |   }
 74 | }
 75 | </script>
 76 | 
 77 | <style lang="stylus" scoped>
 78 | @import '~@/assets/styles/varibles.styl'
 79 | .headerWrapper
 80 |   width 100%
 81 |   padding 0 20px
 82 |   box-shadow $tabBoxShadow
 83 | 
 84 |   >>> .el-menu--horizontal
 85 |     .el-menu-item:not(.is-disabled):hover
 86 |       border-bottom-color $Primary !important
 87 |       background $tabBackColor
 88 | 
 89 |   .el-menu-demo
 90 |     display flex
 91 |     position relative
 92 | 
 93 |     .headerLogo
 94 |       color $Primary
 95 |       font-size 60px
 96 |       opacity 1
 97 |       cursor default
 98 | 
 99 |       a
100 |         display block
101 | 
102 |       .logo
103 |         height 40px
104 |         vertical-align baseline
105 | 
106 |     .right-menu-item
107 |       position absolute
108 | 
109 |     .userDisplay
110 |       right 70px
111 |       width 180px
112 | 
113 |       .username-header
114 |         margin-left 6px
115 |         min-width 60px
116 |         display inline-block
117 |         text-align center
118 | 
119 |     .exit
120 |       right 0
121 | 
122 |     .login
123 |       right 70px
124 | 
125 |     .register
126 |       right 0px
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/ImgReview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |       class="img-review-wrapper"
  4 |       v-show="imgReviewVisible"
  5 |       @click.self="closeImgReview"
  6 |       @mousewheel.prevent="rollImg()"
  7 |   >
  8 |     <!-- 顶部信息栏 & 工具栏 -->
  9 |     <div class="tip-wrapper" v-if="imgReviewVisible">
 10 |       <div class="name" :title="activeFileName + activeExtendName">{{ activeFileName }}.{{ activeExtendName }}</div>
 11 |       <div class="opera-btn-group">
 12 |         <el-input-number v-model="inputActiveIndex" :min="1" :max="imgReviewList.length" size="mini"></el-input-number>
 13 |         <span class="split-line">/</span>{{ imgReviewList.length }}
 14 |       </div>
 15 |       <div class="tool-wrapper">
 16 |         <i class="item el-icon-refresh-right" title="向右旋转" @click="rotateImg"></i>
 17 |         <i class="item el-icon-refresh-right el-icon-s-custom" title="设为头像" @click="setHeadImg"></i>
 18 |         <a
 19 |             class="item download-link"
 20 |             target="_blank"
 21 |             :href="activeDownloadLink"
 22 |             :download="activeFileName + '.' + activeExtendName"
 23 |         >
 24 |           <i class="el-icon-download" title="保存到本地"></i>
 25 |         </a>
 26 |         <el-tooltip effect="dark" placement="bottom">
 27 |           <div slot="content">
 28 |             操作提示：<br/>
 29 |             点击图片以外的区域可退出查看；<br/>
 30 |             按Esc键可退出查看；<br/>
 31 |             鼠标滚轮可放大缩小图片
 32 |           </div>
 33 |           <div class="item text-wrapper">
 34 |             <span class="text">操作提示</span>
 35 |             <i class="el-icon-question"></i>
 36 |           </div>
 37 |         </el-tooltip>
 38 |       </div>
 39 |     </div>
 40 |     <!-- 大图查看 -->
 41 |     <img
 42 |         class="img-large"
 43 |         ref="imgLarge"
 44 |         v-for="(item, index) in imgReviewList"
 45 |         :key="index"
 46 |         :src="item.fileUrl"
 47 |         v-show="index === activeIndex"
 48 |     />
 49 | 
 50 |     <!-- 左右切换图标 -->
 51 |     <i class="pre-icon el-icon-arrow-left" title="上一张" v-show="activeIndex > 0" @click.stop="activeIndex--"></i>
 52 |     <i
 53 |         class="next-icon el-icon-arrow-right"
 54 |         title="下一张"
 55 |         v-show="activeIndex < imgReviewList.length - 1"
 56 |         @click.stop="activeIndex++"
 57 |     ></i>
 58 |     <!-- 底部显示放大缩小比例 -->
 59 |     <div class="zoom-bar">
 60 |       <el-slider
 61 |           v-model="imgZoom"
 62 |           :min="imgZoomMin"
 63 |           :max="imgZoomMax"
 64 |           :format-tooltip="formatZoom"
 65 |           @input="changeZoom"
 66 |       ></el-slider>
 67 |       <div class="zoom-count">{{ imgZoom }}%</div>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script>
 73 | import {setAvatar} from "@/request/user";
 74 | 
 75 | export default {
 76 |   name: 'ImgReview',
 77 |   data() {
 78 |     return {
 79 |       rotate: 0, //  旋转角度
 80 |       activeIndex: 0, //  当前图片索引 从 0 开始
 81 |       imgZoom: 40, //  图片缩放比例
 82 |       imgZoomMin: 1, //  图片缩放最小比例
 83 |       imgZoomMax: 200 //  图片缩放最大比例
 84 |     }
 85 |   },
 86 |   computed: {
 87 |     // 图片查看组件是否显示
 88 |     imgReviewVisible() {
 89 |       return this.$store.state.imgReview.imgReviewVisible
 90 |     },
 91 |     // 图片列表
 92 |     imgReviewList() {
 93 |       return this.$store.state.imgReview.imgReviewList
 94 |     },
 95 |     // 默认显示的图片索引 从 0 开始
 96 |     defaultActiveIndex() {
 97 |       return this.$store.state.imgReview.defaultActiveIndex
 98 |     },
 99 |     // 当前显示的图片名称
100 |     activeFileName() {
101 |       return this.imgReviewList[this.activeIndex].filename
102 |     },
103 |     // 当前显示的图片扩展名
104 |     activeExtendName() {
105 |       return this.imgReviewList[this.activeIndex].extension
106 |     },
107 |     activeFileId() {
108 |       return this.imgReviewList[this.activeIndex].id
109 |     },
110 |     // 对用户而言 显示的图片索引 从 1 开始 顶部栏输入框控制此值变化
111 |     inputActiveIndex: {
112 |       get() {
113 |         return this.activeIndex + 1
114 |       },
115 |       set(value) {
116 |         this.activeIndex = value - 1
117 |       }
118 |     },
119 |     // 当前显示的图片下载链接
120 |     activeDownloadLink() {
121 |       return this.imgReviewList[this.activeIndex].downloadLink
122 |     }
123 |   },
124 |   watch: {
125 |     // 监听 图片查看组件 显隐状态变化
126 |     imgReviewVisible(val) {
127 |       let body = document.querySelector('body')
128 |       if (val) {
129 |         this.activeIndex = this.defaultActiveIndex
130 |         // 挂在body下，防止组件元素有样式transform而使position: fixed失效
131 |         body.appendChild(this.$el)
132 |         body.style.overflow = 'hidden'
133 |         // 添加键盘Esc事件
134 |         this.$nextTick(() => {
135 |           document.addEventListener('keyup', (e) => {
136 |             if (e.keyCode === 27) {
137 |               this.closeImgReview()
138 |             }
139 |           })
140 |         })
141 |         this.$nextTick(() => {
142 |           this.$refs.imgLarge[this.activeIndex].style.zoom = '40%'
143 |         })
144 |       } else {
145 |         body.style.overflow = 'auto'
146 |         document.removeEventListener('keyup', (e) => {
147 |           if (e.keyCode === 27) {
148 |             this.closeImgReview()
149 |           }
150 |         })
151 |       }
152 |     },
153 |     // 监听 图片索引变化
154 |     activeIndex(newValue) {
155 |       this.rotate = 0
156 |       this.$nextTick(() => {
157 |         if (this.$refs.imgLarge[newValue].style.zoom) {
158 |           this.imgZoom = Number(this.$refs.imgLarge[newValue].style.zoom.split('%')[0])
159 |         } else {
160 |           this.$refs.imgLarge[newValue].style.zoom = '40%'
161 |           this.imgZoom = 40
162 |         }
163 |       })
164 |     }
165 |   },
166 |   methods: {
167 |     //  关闭图片预览
168 |     closeImgReview() {
169 |       this.$store.commit('setImgReviewData', {imgReviewVisible: false})
170 |       this.rotate = 0
171 |       this.$refs.imgLarge[this.activeIndex].style.transform = `rotate(${this.rotate}deg)`
172 |     },
173 |     // 格式化缩放数字 显示图片缩放比例
174 |     formatZoom(value) {
175 |       return value + '%'
176 |     },
177 |     // 图片缩放改变事件
178 |     changeZoom(value) {
179 |       if (this.$refs.imgLarge) {
180 |         this.$refs.imgLarge[this.activeIndex].style.zoom = value + '%'
181 |       }
182 |     },
183 |     // 缩放图片
184 |     rollImg() {
185 |       let zoom = parseInt(this.$refs.imgLarge[this.activeIndex].style.zoom) || 100
186 |       zoom += event.wheelDelta / 12
187 |       if (zoom >= this.imgZoomMin && zoom < this.imgZoomMax) {
188 |         this.imgZoom = zoom
189 |         this.$refs.imgLarge[this.activeIndex].style.zoom = zoom + '%'
190 |       }
191 |       return false
192 |     },
193 |     //  旋转图片
194 |     rotateImg() {
195 |       this.rotate += 90
196 |       this.$refs.imgLarge[this.activeIndex].style.transform = `rotate(${this.rotate}deg)`
197 |     },
198 |     setHeadImg() {
199 |       let data = {
200 |         fileId: this.activeFileId
201 |       }
202 |       setAvatar(data).then(
203 |           this.$message({
204 |             message: '头像设置成功, 刷新页面即可生效',
205 |             type: 'success'
206 |           })
207 |       ).catch(err=> {
208 |         console.error(err)
209 |         this.$message.error("头像设置失败，请稍后再试！")
210 |       })
211 |     }
212 |   }
213 | }
214 | </script>
215 | 
216 | <style lang="stylus" scoped>
217 | @import '~@/assets/styles/varibles.styl'
218 | 
219 | .img-review-wrapper
220 |   position fixed
221 |   top 0
222 |   right 0
223 |   bottom 0
224 |   left 0
225 |   overflow auto
226 |   width 100%
227 |   height 100%
228 |   z-index 2010
229 |   text-align center
230 |   display flex
231 |   align-items center
232 |   animation imgReviewAnimation 0.3s
233 |   -webkit-animation imgReviewAnimation 0.3s /* Safari and Chrome */
234 |   animation-iteration-count 0.3
235 |   -webkit-animation-iteration-count 0.3
236 |   animation-fill-mode forwards
237 |   -webkit-animation-fill-mode forwards /* Safari 和 Chrome */
238 |   @keyframes imgReviewAnimation
239 |     0%
240 |       background transparent
241 |     100%
242 |       background rgba(0, 0, 0, 0.8)
243 |   @keyframes imgReviewAnimation
244 |     0%
245 |       background transparent
246 |     100%
247 |       background rgba(0, 0, 0, 0.8)
248 | 
249 |   .tip-wrapper
250 |     position fixed
251 |     top 0
252 |     left 0
253 |     z-index 2011
254 |     background rgba(0, 0, 0, 0.5)
255 |     padding 0 48px
256 |     width 100%
257 |     height 48px
258 |     line-height 48px
259 |     color #fff
260 |     font-size 16px
261 |     display flex
262 |     justify-content space-between
263 | 
264 |     .name
265 |       flex 1
266 |       padding-right 16px
267 |       text-align left
268 |       overflow hidden
269 |       text-overflow ellipsis
270 |       white-space nowrap
271 | 
272 |     .opera-btn-group
273 |       width 100px
274 |       display flex
275 | 
276 |       >>> .el-input-number
277 |         width 40px
278 | 
279 |         .el-input-number__decrease,
280 |         .el-input-number__increase
281 |           display none
282 | 
283 |         .el-input__inner
284 |           margin-top 14px
285 |           background rgba(0, 0, 0, 0.5)
286 |           height 20px
287 |           line-height 20px
288 |           padding 0
289 |           font-size 16px
290 |           color #fff
291 | 
292 |       .split-line
293 |         margin 0 8px
294 | 
295 |     .tool-wrapper
296 |       flex 1
297 |       display flex
298 |       justify-content flex-end
299 | 
300 |       .item
301 |         margin-left 16px
302 |         cursor pointer
303 | 
304 |         &:hover
305 |           opacity 0.7
306 | 
307 |       .el-icon-refresh-right
308 |         line-height 48px
309 |         font-size 18px
310 | 
311 |       .download-link
312 |         color inherit
313 |         font-size 18px
314 | 
315 |       .text-wrapper
316 |         margin-left 32px
317 | 
318 |         .text
319 |           margin-right 8px
320 | 
321 |   .img-large
322 |     margin 0 auto
323 |     transition transform 0.5s
324 |     -webkit-transition transform 0.5s
325 | 
326 |   /* Safari */
327 | 
328 |   .pre-icon,
329 |   .next-icon
330 |     font-size 60px
331 |     color #fff
332 |     position fixed
333 |     top 50%
334 |     cursor pointer
335 | 
336 |     &:hover
337 |       opacity 0.7
338 | 
339 |   .pre-icon
340 |     left 64px
341 | 
342 |   .next-icon
343 |     right 64px
344 | 
345 |   .zoom-bar
346 |     position fixed
347 |     right 0
348 |     bottom 20px
349 |     left 0
350 |     margin 0 auto
351 |     width 600px
352 |     display flex
353 | 
354 |     >>> .el-slider
355 |       flex 1
356 | 
357 |       .el-slider__bar
358 |         background $PrimaryText
359 | 
360 |       .el-slider__button
361 |         border-color $PrimaryText
362 | 
363 |     .zoom-count
364 |       width 60px
365 |       height 38px
366 |       line-height 38px
367 |       text-align right
368 |       color #fff
369 | </style>
370 | 


--------------------------------------------------------------------------------
/src/components/ScpDivider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="divider">
 3 |     <div class="first"></div>
 4 |     <i class="el-icon-bicycle"></i>
 5 |     <div class="second"></div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'ScpDivider'
12 | }
13 | </script>
14 | 
15 | <style lang="stylus" scoped>
16 | @import '~@/assets/styles/varibles.styl'
17 | .divider
18 |   width: 100%
19 |   height: 2px
20 |   margin: 20px 0
21 |   display: flex
22 |   .first
23 |     flex: 2
24 |     background: $Primary
25 |   .second
26 |     flex: 1
27 |     background: $Warning
28 |   .el-icon-bicycle
29 |     margin: -16px -10px
30 |     color: $Success
31 |     font-size: 20px
32 | </style>


--------------------------------------------------------------------------------
/src/element.js:
--------------------------------------------------------------------------------
  1 | // 导入自己需要的组件
  2 | import {
  3 |   Dialog,
  4 |   Dropdown,
  5 |   DropdownMenu,
  6 |   DropdownItem,
  7 |   Menu,
  8 |   Submenu,
  9 |   MenuItem,
 10 |   MenuItemGroup,
 11 |   Input,
 12 |   InputNumber,
 13 |   Radio,
 14 |   RadioGroup,
 15 |   RadioButton,
 16 |   Select,
 17 |   Option,
 18 |   OptionGroup,
 19 |   Button,
 20 |   ButtonGroup,
 21 |   Table,
 22 |   TableColumn,
 23 |   Tooltip,
 24 |   Form,
 25 |   FormItem,
 26 |   Icon,
 27 |   Upload,
 28 |   Image,
 29 |   Backtop,
 30 |   MessageBox,
 31 |   Message,
 32 |   Notification,
 33 |   Avatar,
 34 |   Container,
 35 |   Header,
 36 |   Aside,
 37 |   Main,
 38 |   Footer,
 39 |   Breadcrumb,
 40 |   BreadcrumbItem,
 41 |   Loading,
 42 |   Timeline,
 43 |   TimelineItem,
 44 |   Alert,
 45 |   Tree,
 46 |   Progress,
 47 |   Slider,
 48 |   Divider,
 49 |   Pagination,
 50 |   CheckboxGroup,
 51 |   Checkbox,
 52 |   Popover
 53 | } from "element-ui";
 54 | const element = {
 55 |   install: function (Vue) {
 56 |     Vue.use(Dialog);
 57 |     Vue.use(Dropdown);
 58 |     Vue.use(DropdownMenu);
 59 |     Vue.use(DropdownItem);
 60 |     Vue.use(Menu);
 61 |     Vue.use(Submenu);
 62 |     Vue.use(MenuItem);
 63 |     Vue.use(MenuItemGroup);
 64 |     Vue.use(Input);
 65 |     Vue.use(InputNumber);
 66 |     Vue.use(Radio);
 67 |     Vue.use(RadioGroup);
 68 |     Vue.use(RadioButton);
 69 |     Vue.use(Select);
 70 |     Vue.use(Option);
 71 |     Vue.use(OptionGroup);
 72 |     Vue.use(Button);
 73 |     Vue.use(ButtonGroup);
 74 |     Vue.use(Table);
 75 |     Vue.use(TableColumn);
 76 |     Vue.use(Tooltip);
 77 |     Vue.use(Form);
 78 |     Vue.use(FormItem);
 79 |     Vue.use(Icon);
 80 |     Vue.use(Upload);
 81 |     Vue.use(Image);
 82 |     Vue.use(Backtop);
 83 |     Vue.use(Avatar);
 84 |     Vue.use(Container);
 85 |     Vue.use(Header);
 86 |     Vue.use(Aside);
 87 |     Vue.use(Main);
 88 |     Vue.use(Footer);
 89 |     Vue.use(Breadcrumb);
 90 |     Vue.use(BreadcrumbItem);
 91 |     Vue.use(Loading.directive);
 92 |     Vue.use(Timeline);
 93 |     Vue.use(TimelineItem);
 94 |     Vue.use(Alert);
 95 |     Vue.use(Tree);
 96 |     Vue.use(Progress);
 97 |     Vue.use(Slider);
 98 |     Vue.use(Divider);
 99 |     Vue.use(Pagination);
100 |     Vue.use(CheckboxGroup);
101 |     Vue.use(Checkbox);
102 |     Vue.use(Popover);
103 |     Vue.prototype.$loading = Loading.service;
104 |     Vue.prototype.$msgbox = MessageBox;
105 |     Vue.prototype.$alert = MessageBox.alert;
106 |     Vue.prototype.$confirm = MessageBox.confirm;
107 |     Vue.prototype.$prompt = MessageBox.prompt;
108 |     Vue.prototype.$notify = Notification;
109 |     Vue.prototype.$message = Message;
110 |   },
111 | };
112 | export default element;
113 | 


--------------------------------------------------------------------------------
/src/filters/index.js:
--------------------------------------------------------------------------------
 1 | // 存储容量格式化
 2 | const storageTrans = (size, status) => {
 3 | 	const B = 1024
 4 | 	const KB = Math.pow(1024, 2)
 5 | 	const MB = Math.pow(1024, 3)
 6 | 	const GB = Math.pow(1024, 4)
 7 | 	if(status) {	//	截取整数部分
 8 | 		if (!size) {
 9 | 			return  0 + 'KB'
10 | 		} else if (size < KB) {
11 | 			return  (size / B).toFixed(0) + 'KB'
12 | 		} else if (size < MB) {
13 | 			return  (size / KB).toFixed(0) + 'MB'
14 | 		} else if (size < GB) {
15 | 			return  (size / MB).toFixed(0) + 'GB'
16 | 		} else {
17 | 			return  (size / GB).toFixed(0) + 'TB'
18 | 		}
19 | 	} else {
20 | 		if (!size) {
21 | 			return  0 + 'KB'
22 | 		} else if (size < KB) {
23 | 			return  (size / B).toFixed(0) + 'KB'
24 | 		} else if (size < MB) {
25 | 			return  (size / KB).toFixed(2) + 'MB'
26 | 		} else if (size < GB) {
27 | 			return  (size / MB).toFixed(3) + 'GB'
28 | 		} else {
29 | 			return  (size / GB).toFixed(4) + 'TB'
30 | 		}
31 | 	}
32 | }
33 | const filenameComplete = (item) => {
34 | 	return item.filename + (!item.isDir && item.extension !== null ? `.${item.extension}` : '')
35 | }
36 | 
37 | // 分离文件名和文件扩展名
38 | const filenameSplit = (name) => {
39 | 	let index = name.lastIndexOf('.')
40 | 	let filename = name.substr(0, index)
41 | 	let extension = name.substring(index+1)
42 | 	return {
43 | 		filename,extension
44 | 	}
45 | }
46 | 
47 | 
48 | export {
49 | 	storageTrans,
50 | 	filenameComplete,
51 | 	filenameSplit,
52 | }
53 | 


--------------------------------------------------------------------------------
/src/global/globalConst.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | /**
  3 |  * 全局常量
  4 |  */
  5 | export const SYSTEM_NAME = "丢丢网盘"
  6 | // 切片最大大小
  7 | export const CHUNK_SIZE = 1024 * 1024;
  8 | // 文件根目录ID
  9 | export const ROOT_PATH = null;
 10 | // 文件类型
 11 | export const FILE_TYPE = {
 12 |     // 不区分文件类型，默认所有类型
 13 |     ALL: "ALL",
 14 |     // 图片文件类型
 15 |     IMAGE: "IMAGE",
 16 |     // 文档文件类型
 17 |     DOC: "DOC",
 18 |     // 视频文件类型
 19 |     VIDEO: "VIDEO",
 20 |     // 音乐文件类型
 21 |     MUSIC: "MUSIC",
 22 |     // 软件包类型
 23 |     APP: "APP",
 24 |     // 其他文件类型
 25 |     OTHER: "OTHER",
 26 |     // 共享文件类型
 27 |     SHARE: "SHARE",
 28 |     // 回收站文件类型
 29 |     RECYCLE: "RECYCLE",
 30 | }
 31 | 
 32 | // 操作类型，折叠，展开
 33 | export const FOLD_TYPE = {
 34 |     // 展开
 35 |     UNFOLD: true,
 36 |     // 折叠
 37 |     FOLD: false,
 38 | }
 39 | 
 40 | // 文件类型对应的中文解释
 41 | export const FILE_TYPE_MAP = {
 42 |     "ALL": '全部文件',
 43 |     "IMAGE": '全部图片',
 44 |     "DOC": '全部文档',
 45 |     "VIDEO": '全部视频',
 46 |     "MUSIC": '全部音乐',
 47 |     "APP": '全部应用',
 48 |     "OTHER": '其他',
 49 |     "SHARE": '共享文件',
 50 |     "RECYCLE": '回收站'
 51 | }
 52 | 
 53 | // 文件展示模式
 54 | export const FILE_MODEL = {
 55 |     // 列表
 56 |     TABLE: 0,
 57 |     // 网格
 58 |     GRID: 1,
 59 |     // 时间线
 60 |     TIME_LINE: 2
 61 | }
 62 | 
 63 | // 可识别的图片类型
 64 | export const IMG_TYPE_LIST = ["bmp", "jpg", "png", "tif", "gif", "jpeg"]
 65 | export const VIDEO_TYPE_LIST = ["avi", "mp4", "mpg", "mov", "swf", "flv"]
 66 | export const MUSIC_TYPE_LIST = ["wav", "aif", "au", "mp3", "ram", "wma", "mmf", "amr", "aac", "flac"]
 67 | 
 68 | //  可以识别的文件类型
 69 | export const FILE_IMG_TYPE_LIST = [
 70 |     'png',
 71 |     'jpg',
 72 |     'jpeg',
 73 |     'docx',
 74 |     'doc',
 75 |     'ppt',
 76 |     'pptx',
 77 |     'xls',
 78 |     'xlsx',
 79 |     'avi',
 80 |     'mp4',
 81 |     'css',
 82 |     'csv',
 83 |     'chm',
 84 |     'rar',
 85 |     'zip',
 86 |     'dmg',
 87 |     'mp3',
 88 |     'flac',
 89 |     'open',
 90 |     'pdf',
 91 |     'rtf',
 92 |     'txt',
 93 |     'oa',
 94 |     'js',
 95 |     'html',
 96 |     'img',
 97 |     'sql',
 98 |     'jar',
 99 |     'svg',
100 |     'gif',
101 |     'json',
102 |     'exe',
103 |     'md'
104 | ];
105 | //  文件图片Map映射
106 | export const FILE_IMG_MAP = {
107 |     dir: require('@/assets/images/file/dir.png'),
108 |     chm: require('@/assets/images/file/file_chm.png'),
109 |     css: require('@/assets/images/file/file_css.png'),
110 |     csv: require('@/assets/images/file/file_csv.png'),
111 |     png: require('@/assets/images/file/file_pic.png'),
112 |     jpg: require('@/assets/images/file/file_pic.png'),
113 |     jpeg: require('@/assets/images/file/file_pic.png'),
114 |     docx: require('@/assets/images/file/file_word.png'),
115 |     doc: require('@/assets/images/file/file_word.png'),
116 |     ppt: require('@/assets/images/file/file_ppt.png'),
117 |     pptx: require('@/assets/images/file/file_ppt.png'),
118 |     xls: require('@/assets/images/file/file_excel.png'),
119 |     xlsx: require('@/assets/images/file/file_excel.png'),
120 |     mp4: require('@/assets/images/file/file_video.png'),
121 |     avi: require('@/assets/images/file/file_avi.png'),
122 |     rar: require('@/assets/images/file/file_rar.png'),
123 |     zip: require('@/assets/images/file/file_zip.png'),
124 |     dmg: require('@/assets/images/file/file_dmg.png'),
125 |     mp3: require('@/assets/images/file/file_music.png'),
126 |     flac: require('@/assets/images/file/file_music.png'),
127 |     open: require('@/assets/images/file/file_open.png'),
128 |     pdf: require('@/assets/images/file/file_pdf.png'),
129 |     rtf: require('@/assets/images/file/file_rtf.png'),
130 |     txt: require('@/assets/images/file/file_txt.png'),
131 |     oa: require('@/assets/images/file/file_oa.png'),
132 |     md: require('@/assets/images/file/file_md.png'),
133 |     unknown: require('@/assets/images/file/file_unknown.png'),
134 |     js: require('@/assets/images/file/file_js.png'),
135 |     html: require('@/assets/images/file/file_html.png'),
136 |     img: require('@/assets/images/file/file_img.png'),
137 |     sql: require('@/assets/images/file/file_sql.png'),
138 |     jar: require('@/assets/images/file/file_jar.png'),
139 |     svg: require('@/assets/images/file/file_svg.png'),
140 |     gif: require('@/assets/images/file/file_gif.png'),
141 |     json: require('@/assets/images/file/file_json.png'),
142 |     exe: require('@/assets/images/file/file_exe.png')
143 | };
144 | 
145 | export default {
146 |     install(){
147 |         Vue.prototype.SYSTEM_NAME = SYSTEM_NAME
148 |         // 文件类型
149 |         Vue.prototype.FILE_TYPE = FILE_TYPE;
150 |         // 根目录ID
151 |         Vue.prototype.ROOT_PATH = ROOT_PATH;
152 |         // 文件类型对应的中文解释
153 |         Vue.prototype.FILE_TYPE_MAP = FILE_TYPE_MAP;
154 |         // 文件操作，折叠或展开
155 |         Vue.prototype.FOLD_TYPE = FOLD_TYPE;
156 |         // 文件展示模式
157 |         Vue.prototype.FILE_MODEL = FILE_MODEL;
158 |         Vue.prototype.FILE_IMG_TYPE_LIST = FILE_IMG_TYPE_LIST;
159 |         Vue.prototype.FILE_IMG_MAP = FILE_IMG_MAP;
160 |         Vue.prototype.CHUNK_SIZE = CHUNK_SIZE;
161 |         Vue.prototype.IMG_TYPE_LIST = IMG_TYPE_LIST;
162 |         Vue.prototype.VIDEO_TYPE_LIST = VIDEO_TYPE_LIST
163 |         Vue.prototype.MUSIC_TYPE_LIST = MUSIC_TYPE_LIST
164 |     }
165 | }
166 | 


--------------------------------------------------------------------------------
/src/global/globalFunction.js:
--------------------------------------------------------------------------------
  1 | //全局函数 ，挂载到Vue实例上
  2 | import {url} from "@/request/http";
  3 | 
  4 | export default function install(Vue) {
  5 |     /**
  6 |      * checkIsLogin(params) 页面内某些功能需要用户登录时调用,调用示例如下
  7 |      * let res = this.checkIsLogin(this.$route.fullPath);
  8 |      * if(res === true) {
  9 |      *  // 做些什么......
 10 |      * }
 11 |      * 其中，参数为当前页面的全部路由fullPath（即包括query等参数）
 12 |      */
 13 |     //  检测用户登录状态并做相应的跳转
 14 |     Vue.prototype.checkIsLogin = function (params) {
 15 |         if (this.$store.getters.isLogin === false) { // 未登录时自动跳转到登录页面，并将当前页面的路由作为query传递给登陆页面
 16 |             this.$router.push({path: '/login', query: {Rurl: params}});
 17 |         } else {
 18 |             return true
 19 |         }
 20 |     };
 21 | 
 22 |     // 文件类型，图片，音乐，文档等
 23 |     Vue.prototype.fileType = function () {
 24 |         // 是回收站类型文件
 25 |         let that = this
 26 |         return {
 27 |             // 当前文件类型
 28 |             current() {
 29 |                 return that.$route.query.fileType
 30 |             },
 31 |             isAll() {
 32 |                 return that.$route.query.fileType === that.FILE_TYPE.ALL
 33 |             },
 34 |             isNotAll() {
 35 |                 return that.$route.query.fileType !== that.FILE_TYPE.ALL
 36 |             },
 37 |             isRecycle() {
 38 |                 return that.$route.query.fileType === that.FILE_TYPE.RECYCLE
 39 |             },
 40 |             isNotRecycle() {
 41 |                 return that.$route.query.fileType !== that.FILE_TYPE.RECYCLE
 42 |             },
 43 |             isMusic() {
 44 |                 return that.$route.query.fileType === that.FILE_TYPE.MUSIC
 45 |             },
 46 |             isImage() {
 47 |                 return that.$route.query.fileType === that.FILE_TYPE.IMAGE
 48 |             },
 49 |             isVideo() {
 50 |                 return that.$route.query.fileType === that.FILE_TYPE.VIDEO
 51 |             },
 52 |             isDoc() {
 53 |                 return that.$route.query.fileType === that.FILE_TYPE.DOC
 54 |             },
 55 |             isApp() {
 56 |                 return that.$route.query.fileType === that.FILE_TYPE.APP
 57 |             },
 58 |             isOther() {
 59 |                 return that.$route.query.fileType === that.FILE_TYPE.OTHER
 60 |             },
 61 |             isShare() {
 62 |                 return that.$route.query.fileType === that.FILE_TYPE.SHARE
 63 |             }
 64 |         }
 65 |     };
 66 | 
 67 |     // 文件查看模式 0列表模式 1网格模式 2 时间线模式
 68 |     Vue.prototype.fileModel = function () {
 69 |         // 是回收站类型文件
 70 |         let that = this
 71 |         return {
 72 |             current() {
 73 |                 return that.$store.getters.currentFileModel
 74 |             },
 75 |             isTable() {
 76 |                 return that.FILE_MODEL.TABLE === that.$store.getters.currentFileModel
 77 |             },
 78 |             isGrid() {
 79 |                 return that.FILE_MODEL.GRID === that.$store.getters.currentFileModel
 80 |             },
 81 |             isTimeLine() {
 82 |                 return that.FILE_MODEL.TIME_LINE === that.$store.getters.currentFileModel
 83 |             }
 84 |         }
 85 |     };
 86 | 
 87 |     // 文件路径，此处是id值，Long类型
 88 |     Vue.prototype.filePath = function () {
 89 |         // 是回收站类型文件
 90 |         let that = this
 91 |         return {
 92 |             // 文件查看模式 0列表模式 1网格模式 2 时间线模式
 93 |             current() {
 94 |                 return that.$route.query.pid
 95 |             },
 96 |         }
 97 |     };
 98 | 
 99 |     // 文件下载
100 |     Vue.prototype.getDownloadPath = fileId => url("/transfer/download/" + fileId)
101 | 
102 |     // 获取图片略缩图
103 |     Vue.prototype.getThumbnailPath = fileId => url('/transfer/thumbnail/' + fileId)
104 | 
105 | 
106 |     // 获取 office 文件在线预览路径
107 |     Vue.prototype.getFileOnlineViewPathByOffice = fileId => {
108 |         // 本地磁盘存储 - 在本地开发环境中，本地磁盘存储的文件是无法预览的，因为 office 要求文件可以在 Internet 访问
109 |         let fileUrl = `${location.protocol}//${location.host}/` + url(`/transfer/download/${fileId}`)
110 |         return `https://view.officeapps.live.com/op/embed.aspx?src=${fileUrl}`
111 |     }
112 | 
113 |     // 是否退出登录
114 |     Vue.prototype.isLoginPage = function (){
115 |         return this.$route.name == 'Login'
116 |     }
117 | 
118 | }
119 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router/router'
 4 | import store from '@/store/index.js'
 5 | import globalFunction from '@/./global/globalFunction'
 6 | import globalConst from "@/global/globalConst";
 7 | import * as filters from '@/filters/index.js'
 8 | import '@/assets/styles/css/base.css'
 9 | import '@/assets/styles/css/border.css'
10 | import '@/assets/styles/css/element-cover.css'
11 | import '@/assets/styles/css/mediaScreen.styl'
12 | import '@/router/before.js'
13 | import 'element-ui/lib/theme-chalk/index.css'
14 | import element from './element.js'
15 | import uploader from 'vue-simple-uploader'
16 | 
17 | Vue.config.productionTip = false;
18 | Vue.use(globalConst);
19 | Vue.use(globalFunction);
20 | Vue.use(element);
21 | Vue.use(uploader);
22 | Vue.prototype.$EventBus = new Vue()
23 | 
24 | Object.keys(filters).forEach(key => {
25 |   Vue.filter(key, filters[key])
26 | })
27 | 
28 | new Vue({
29 |   router,
30 |   store,
31 |   render: h => h(App)
32 | }).$mount('#app')
33 | 


--------------------------------------------------------------------------------
/src/request/file.js:
--------------------------------------------------------------------------------
 1 | //  文件模块接口
 2 | import { get,post } from './http'
 3 | 
 4 | /**
 5 |  * 查询文件相关api
 6 |  */
 7 | //获取文件的树结构
 8 | export const getFileTree = p => get('/file/dir/tree', p);
 9 | // 获取回收站文件列表
10 | export const getRecoveryFile = p => get('/file/list/recycle', p);
11 | // 获取路径树字典
12 | export const getPathTreeMap = p => get('/file/path/tree', p)
13 | // 通过文件类型选择文件
14 | export const selectFileByFileType = p => get('/file/list/type', p);
15 | // 搜索文件
16 | export const searchFile = p => get('/file/search', p)
17 | // 获取当前目录下的所有文件
18 | export const getFileList = p => get('/file/list', p);
19 | /**
20 |  * 文件上传下载
21 |  */
22 | // 合并切片
23 | export const mergeFile = p => post('/transfer/merge', p);
24 | // 下载文件
25 | export const downloadFile = p => get("/transfer/download/"+p);
26 | // 获取略缩图
27 | export const getThumbnail = p => get('/transfer/thumbnail/' + p);
28 | 
29 | /**
30 |  * 创建文件
31 |  */
32 | // 创建文件夹
33 | export const makeDir = p => post('/file/mkdir', p, true);
34 | // 恢复回收站文件
35 | export const recoverRecycleFile = p => post('/file/recover', p, true)
36 | // 恢复回收站文件
37 | export const batchRecoverRecycle = p => post('/file/batch/recover', p, true)
38 | 
39 | 
40 | /**
41 |  * 删除文件
42 |  */
43 | //删除文件
44 | export const deleteFile = p => post('/file/delete', p, true);
45 | // 回收站文件删除
46 | export const deleteRecoveryFile = p => post('/file/delete/recycle', p, true);
47 | // 批量删除回收站文件
48 | export const batchDeleteRecoveryFile = p => post('/file/batch/delete/recycle', p, true)
49 | //批量删除文件
50 | export const batchDeleteFile = p => post('/file/batch/delete', p, true);
51 | 
52 | /**其他*/
53 | //移动文件
54 | export const moveFile = p => post('/file/move', p, true);
55 | //批量移动文件
56 | export const batchMoveFile = p => post('/file/batch/move', p, true);
57 | //获取存储占用
58 | export const getStorage = p => get('/user/storage/info', p);
59 | //重命名文件
60 | export const renameFile = p => post('/file/rename', p, true);
61 | 
62 | /**未实现*/
63 | export const unzipfile = p => post('/file/unzip', p); //解压文件
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 


--------------------------------------------------------------------------------
/src/request/http.js:
--------------------------------------------------------------------------------
  1 | import axios from "axios"
  2 | import router from '@/router/router.js'
  3 | 
  4 | // 请求超时时间
  5 | axios.defaults.timeout = 10000 * 5;
  6 | 
  7 | // 请求基础URL
  8 | axios.defaults.baseURL = "/api";
  9 | 
 10 | // post请求头
 11 | axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 12 | 
 13 | // 请求携带cookie
 14 | axios.defaults.withCredentials = true;
 15 | 
 16 | // 响应拦截器
 17 | axios.interceptors.response.use(
 18 |   response => {
 19 |     if (response.status === 200) {
 20 |       return Promise.resolve(response);
 21 |     }
 22 |   },
 23 |   // 服务器状态码不是200的情况
 24 |   error => {
 25 |     if (error.response.status) {
 26 |       switch (error.response.status) {
 27 |         case 500:
 28 |           router.replace({ name: 'Error_500' })
 29 |           break;
 30 |         case 401:
 31 |           router.replace({ name: 'Error_401' })
 32 |           break;
 33 |         case 404:
 34 |           router.replace({ name: 'Error_404' })
 35 |           break;
 36 |         default:
 37 |           return Promise.reject(error.response);
 38 |       }
 39 |     }
 40 |   }
 41 | );
 42 | /**
 43 | * get方法，对应get请求
 44 | */
 45 | export function get(url, params, info = '') {
 46 |   return new Promise((resolve, reject) => {
 47 |     axios.get(url + info, {
 48 |       params: params
 49 |     })
 50 |       .then(res => {
 51 |         resolve(res.data);
 52 |       })
 53 |       .catch(err => {
 54 |         reject(err.data)
 55 |       })
 56 |   });
 57 | }
 58 | /**
 59 |  * post方法，对应post请求
 60 |  * info为 true，formData格式；
 61 |  * info为 undefined或false，是json格式
 62 |  */
 63 | export function post(url, data = {}, info) {
 64 |   return new Promise((resolve, reject) => {
 65 |     let newData = data
 66 |     if (info) {  //  转formData格式
 67 |       newData = new FormData();
 68 |       for (let i in data) {
 69 |         newData.append(i, data[i]);
 70 |       }
 71 |     }
 72 |     axios.post(url, newData)
 73 |       .then(res => {
 74 |         resolve(res.data);
 75 |       })
 76 |       .catch(err => {
 77 |         reject(err.data)
 78 |       })
 79 |   });
 80 | }
 81 | 
 82 | /**
 83 |  * 封装put请求
 84 |  */
 85 | 
 86 | export function put(url, params = {}, info = "") {
 87 |   return new Promise((resolve, reject) => {
 88 |     axios.put(url + info, params)
 89 |       .then(res => {
 90 |         resolve(res.data);
 91 |       }, err => {
 92 |         reject(err.data)
 93 |       })
 94 |   })
 95 | }
 96 | 
 97 | /**
 98 | * 封装delete请求
 99 | */
100 | export function axiosDelete(url, params = {}, info = "") {
101 |   return new Promise((resolve, reject) => {
102 |     axios.delete(url + info, {
103 |       params: params
104 |     })
105 |       .then(res => {
106 |         resolve(res.data);
107 |       })
108 |       .catch(err => {
109 |         reject(err.data)
110 |       })
111 |   });
112 | }
113 | 
114 | export function url(uri){
115 | 
116 |   if (uri.charAt(0)!=="/"){
117 |     uri = '/' + uri;
118 |   }
119 |   return axios.defaults.baseURL + uri;
120 | }
121 | 


--------------------------------------------------------------------------------
/src/request/user.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * post请求，formData格式，不传额外info参数,调用接口时，test({key: value}).then(res => {})
 3 |  * export const test = p => post('/user/getattentionstate', p);
 4 |  *
 5 |  * post请求，非formData格式，传递额外info = true参数，调用接口时，test({key: value},true).then(res => {})
 6 |  * export const test = (p, info) => post('/user/getattentionstate', p, info);
 7 |  *
 8 |  * 目前所有post接口均采用formData格式
 9 |  */
10 | 
11 | //  和用户信息相关的接口
12 | import { get,post } from './http'
13 | 
14 | /* 用户登录 */
15 | export const login = p => post('/user/login', p, true);
16 | //qq登录接口
17 | export const authorize = p => post('/user/authorize/qq', p);
18 | // 获取登录用户信息
19 | export const getLoginUserInfo = ()=>get("/user/info");
20 | //退出登录
21 | export const logout = () => get('/user/logout');
22 | // 获取注册令牌
23 | export const fetchRegisterToken = (p) => get('/user/register', p)
24 | // 用户注册
25 | export const addUser = p => post('/user/register', p);
26 | // 设置用户头像
27 | export const setAvatar = p => post('/user/avatar', p, true)
28 | 
29 | // 忘记密码1，发送邮件获取令牌
30 | export const forgetPasswd1 = p=> get('/user/reset/passwd', p)
31 | // 忘记密码2，修改密码
32 | export const forgetPasswd2 = p=> post('/user/reset/passwd', p, true)
33 | 
34 | 


--------------------------------------------------------------------------------
/src/router/before.js:
--------------------------------------------------------------------------------
 1 | import router from '@/router/router'
 2 | import store from '@/store/index.js'
 3 | 
 4 | // 路由全局前置守卫, 类似于拦截器
 5 | router.beforeEach((to, from, next) => {
 6 |   if (store.state.user.error >=3){
 7 |     next()
 8 |     return
 9 |   }
10 |   if (to.name.startsWith("Error_")){
11 |     next(from);
12 |     return
13 |   }
14 |   store.dispatch("getUserInfo").then(() => {
15 |     if (to.matched.some(m => m.meta.requireAuth)) {
16 |       if (!store.getters.isLogin) { // 没有登录
17 |         next({
18 |           path: '/login',
19 |           query: { Rurl: to.fullPath }
20 |         }) //将to参数中的url传递给login页面进行操作
21 |       } else {
22 |         next()   // 正常跳转到你设置好的页面
23 |       }
24 |     } else {
25 |       next()  // 正常跳转到你设置好的页面
26 |     }
27 |     /* 路由发生变化修改页面title */
28 |     if (to.meta.title) {
29 |       document.title = to.meta.title
30 |     }
31 |     /* 路由发生变化修改页面meta */
32 |     if(to.meta.content){
33 |       let head = document.getElementsByTagName('head');
34 |       let meta = document.createElement('meta');
35 |       document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
36 |       meta.content = to.meta.content;
37 |       head[0].appendChild(meta)
38 |     }
39 |   })
40 | })
41 | 


--------------------------------------------------------------------------------
/src/router/router.js:
--------------------------------------------------------------------------------
 1 | import Router from 'vue-router'
 2 | import Vue from 'vue'
 3 | import {ROOT_PATH, FILE_TYPE, SYSTEM_NAME} from "@/global/globalConst";
 4 | 
 5 | Vue.use(Router)
 6 | export default new Router({
 7 |     mode: 'history',
 8 |     base: process.env.BASE_URL,
 9 |     routes: [
10 |         {
11 |             path: '/',
12 |             name: 'Home',
13 |             redirect: {path: '/file', query: {fileType: FILE_TYPE.ALL, pid: ROOT_PATH}}
14 |         }, {
15 |             path: '/login',
16 |             name: 'Login',
17 |             component: () => import('@/views/user/Login.vue'),
18 |             meta: {title: '登录 - ' + SYSTEM_NAME},
19 |         }, {
20 |             path: '/register',
21 |             name: 'Register',
22 |             component: () => import('@/views/user/Register.vue'),
23 |             meta: {title: '注册 - ' + SYSTEM_NAME},
24 |         }, {
25 |             path: '/file',
26 |             name: 'File',
27 |             component: () => import('@/views/file/File.vue'),
28 |             meta: {
29 |                 requireAuth: true,
30 |                 title: SYSTEM_NAME,
31 |                 content: {
32 |                     description: '基于springboot + vue 框架开发的Web文件系统，旨在为用户提供一个简单、方便的文件存储方案'
33 |                 }
34 |             }
35 |         }, {
36 |             path: '/500',
37 |             name: 'Error_500',
38 |             component: () => import('@/views/ErrorPage/500.vue'),
39 |             meta: {title: '500 - ' + SYSTEM_NAME},
40 |         }, {
41 |             path: '/401',
42 |             name: 'Error_401',
43 |             component: () => import('@/views/ErrorPage/401.vue'),
44 |             meta: {title: '401 - ' + SYSTEM_NAME},
45 |         }, {
46 |             path: '*',
47 |             name: 'Error_404',
48 |             component: () => import('@/views/ErrorPage/404.vue'),
49 |             meta: {title: '404 - ' + SYSTEM_NAME},
50 |         }
51 |     ]
52 | })
53 | 
54 | 
55 | const originalPush = Router.prototype.push;
56 | Router.prototype.push = function push(location) {
57 |     return originalPush.call(this, location).catch(err => err)
58 | };
59 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | import user from './module/user'
 5 | import fileList from './module/fileList'
 6 | import sideMenu from './module/sideMenu'
 7 | import imgReview from './module/imgReview'
 8 | import player from "@/store/module/player";
 9 | import {FOLD_TYPE, FILE_MODEL} from "@/global/globalConst";
10 | 
11 | Vue.use(Vuex)
12 | 
13 | export default new Vuex.Store({
14 |     state: {},
15 |     getters: {
16 |         isLogin: (state) => state.user.isLogin,
17 |         isPlaying: (state) => state.player.isPlaying,
18 |         user: (state)=>state.user.user,
19 |         //  左侧栏是否折叠
20 |         isFold: (state) => Number(state.sideMenu.isFold),
21 |         // 文件路径，key:id, value:{id, pid, parent}
22 |         getFilePath: (state) => (pid) => {
23 |             let path = '/'
24 |             let id = pid
25 |             while (id) {
26 |                 path = '/' + state.fileList.pathTreeMap[id].name + path
27 |                 id = state.fileList.pathTreeMap[id].pid
28 |             }
29 |             return path
30 |         },
31 |         // 传入目录id
32 |         getPathTree: (state) => (pid) => {
33 |             let list = []
34 |             let id = pid
35 |             while (id) {
36 |                 list.push(state.fileList.pathTreeMap[id])
37 |                 id = state.fileList.pathTreeMap[id].pid
38 |             }
39 |             return list.reverse();
40 |         },
41 | 
42 |         //  操作列是否展开，false不展开，true展开
43 |         operaColumnExpand: (state) =>
44 |             state.fileList.operaColumnExpand !== null
45 |                 ? Number(state.fileList.operaColumnExpand)
46 |                 : document.body.clientWidth > 1280 ? FOLD_TYPE.UNFOLD : FOLD_TYPE.FOLD,
47 |         selectedColumnList: (state) =>
48 |             state.fileList.selectedColumnList === null
49 |                 ? ["extension", "fileSize", "updateTime", "deleteTime"]
50 |                 : state.fileList.selectedColumnList.split(","), //  列显隐
51 |         currentFileModel: (state) => state.fileList.fileModel === null ? FILE_MODEL.TABLE : Number(state.fileList.fileModel), //  文件展示模式，0列表模式，1网格模式 2 时间线模式
52 |     },
53 |     mutations: {
54 |         //
55 |     },
56 |     actions: {
57 |         //
58 |     },
59 |     modules: {
60 |         user,
61 |         fileList,
62 |         sideMenu,
63 |         imgReview,
64 |         player
65 |     }
66 | })
67 | 


--------------------------------------------------------------------------------
/src/store/module/fileList.js:
--------------------------------------------------------------------------------
 1 | import {getPathTreeMap} from "@/request/file";
 2 | 
 3 | export default {
 4 |     state: {
 5 |         operaColumnExpand: sessionStorage.getItem("operaColumnExpand"), //  操作列是否展开
 6 |         selectedColumnList: sessionStorage.getItem("selectedColumnList"), //  列显隐
 7 |         fileModel: sessionStorage.getItem("fileModel"), //  文件展示模式，0列表模式，1网格模式 2时间线模式
 8 |         pathTreeMap: Map
 9 |     },
10 |     mutations: {
11 |         changeOperaColumnExpand(state, data) {
12 |             sessionStorage.setItem("operaColumnExpand", data);
13 |             state.operaColumnExpand = data;
14 |         },
15 |         changeSelectedColumnList(state, data) {
16 |             sessionStorage.setItem("selectedColumnList", data.toString());
17 |             state.selectedColumnList = data.toString();
18 |         },
19 |         changeFileModel(state, data) {
20 |             sessionStorage.setItem("fileModel", data);
21 |             state.fileModel = data;
22 |         },
23 |         setPathTreeMap(state, data) {
24 |             state.pathTreeMap = data
25 |         }
26 |     },
27 |     actions: {
28 |         fetchPathTreeMap(context) {
29 |             getPathTreeMap().then(res =>
30 |                 context.commit("setPathTreeMap", res)
31 |             )
32 |         }
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/store/module/imgReview.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   state: {
 3 |     imgReviewVisible: false,  //  图片查看组件显隐状态
 4 |     imgReviewList: [], //  图片列表
 5 |     defaultActiveIndex: 0 //  默认当前打开的图片的索引
 6 |   },
 7 |   mutations: {
 8 |     setImgReviewData(state, data) {
 9 |       if(data.imgReviewVisible) {
10 |         state.imgReviewVisible = data.imgReviewVisible
11 |         state.imgReviewList = data.imgReviewList
12 |         state.defaultActiveIndex = data.activeIndex
13 |       } else {
14 |         state.imgReviewVisible = data.false
15 |         state.imgReviewList = []
16 |         state.defaultActiveIndex = 0
17 |       }
18 |     }
19 |   },
20 |   actions: {
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/store/module/player.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     state: {
 3 |         videoPlayer: {
 4 |             visible: false,  //  查看组件显隐状态
 5 |             url: '',
 6 |             filename: '',
 7 |         },
 8 |         isPlaying: false
 9 |     },
10 |     mutations: {
11 |         setVideoReviewData(state, data) {
12 |             state.videoPlayer.visible = data.visible
13 |             state.videoPlayer.url = data.url
14 |             state.videoPlayer.filename = data.filename
15 |         },
16 |         setVideoPlayMin(state){
17 |             state.videoPlayer.visible = false
18 |         },
19 |         setVideoPlayNormal(state){
20 |           state.videoPlayer.visible = true
21 |         },
22 |         closeVideoPlay(state){
23 |             state.videoPlayer = {
24 |                 visible: false,
25 |                 url: '',
26 |                 filename: '',
27 |             }
28 |         },
29 |         setPlaying(state, data){
30 |             state.isPlaying = data
31 |         }
32 |     },
33 |     actions: {
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/store/module/sideMenu.js:
--------------------------------------------------------------------------------
 1 | import {getStorage} from '@/request/file.js'
 2 | 
 3 | export default {
 4 |     state: {
 5 |         isFold: sessionStorage.getItem("isFold"),
 6 |         storageUsedValue: 0, //  已使用存储容量
 7 |         storageMaxValue: 0 //  最大存储容量
 8 |     },
 9 |     mutations: {
10 |         switchFold(state) {
11 |             state.isFold =  !state.isFold
12 |             sessionStorage.setItem("isFold", state.isFold);
13 |         },
14 |         setStorageInfo(state, storageInfo) {
15 |             state.storageUsedValue = Number(storageInfo.usedStorage)
16 |             state.storageMaxValue = Number(storageInfo.maxStorage)
17 |         }
18 |     },
19 |     actions: {
20 |         showStorage(context) {
21 |             return getStorage().then(res => {
22 |                 context.commit('setStorageInfo', res)
23 |             }).catch(err => this.$message.error(err.msg));
24 |         }
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/store/module/user.js:
--------------------------------------------------------------------------------
 1 | import {getLoginUserInfo} from "@/request/user.js";
 2 | import {url} from "@/request/http";
 3 | 
 4 | export default {
 5 |     state: {
 6 |         isLogin: false, //初始时候给一个 isLogin = false 表示用户未登录
 7 |         user: sessionStorage.getItem("user")||{
 8 |             username: '',
 9 |             imgUrl: '',
10 |             email: '',
11 |         },
12 |         error: 0,
13 |     },
14 |     mutations: {
15 |         setUserLogin(state, loginUser) {
16 |             let imgUrl = loginUser.imgUrl;
17 |             state.isLogin = true;
18 |             if (imgUrl) {
19 |                 imgUrl = url('/transfer/thumbnail/' + imgUrl)
20 |             } else {
21 |                 // 没有头像，显示的默认头像
22 |                 imgUrl = "@/assets/images/settings/userImg.png";
23 |             }
24 |             loginUser.imgUrl = imgUrl
25 |             state.user = loginUser
26 |             sessionStorage.setItem("user", loginUser);
27 |         },
28 |         setUserLogout(state) {
29 |             sessionStorage.removeItem("user")
30 |             state.isLogin = false
31 |             state.user = {
32 |                 username: '',
33 |                 imgUrl: '',
34 |                 email: '',
35 |             }
36 |         },
37 |         increaseError(state){
38 |             state.error += 1;
39 |         },
40 |         resetError(state){
41 |             state.error = 0
42 |         }
43 |     },
44 |     actions: {
45 |         getUserInfo(context) {
46 |             // 登录成功返回LoginUser
47 |             return getLoginUserInfo().then(user => {
48 |                 context.commit("resetError")
49 |                 context.commit("setUserLogin", user)
50 |             }).catch(() => {
51 |                     context.commit("increaseError")
52 |                     context.commit("setUserLogout")
53 |                 }
54 |             )
55 |         }
56 |     }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/views/ErrorPage/401.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="error-401-wrapper">
 3 |     <h2 class="title">您没有访问权限！</h2>
 4 |     <img :src="error_401_img" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'Error_401',
11 |   data() {
12 |     return {
13 |       error_401_img: require('@/assets/images/error/401.png')
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style lang="stylus" scoped>
20 | .error-401-wrapper
21 |   display: block !important
22 |   padding: 100px 0
23 |   text-align: center
24 |   .title
25 |     padding-bottom: 20px
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/views/ErrorPage/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="error-404-wrapper">
 3 |     <h2 class="title">您的页面飞走了……</h2>
 4 |     <img :src="error_404_img" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'Error_404',
11 |   data() {
12 |     return {
13 |       error_404_img: require('@/assets/images/error/404.png')
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style lang="stylus" scoped>
20 | .error-404-wrapper
21 |   display: block !important
22 |   padding: 100px 0
23 |   text-align: center
24 |   .title
25 |     padding-bottom: 20px
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/views/ErrorPage/500.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="error-500-wrapper">
 3 |     <h2 class="title">服务器出错，请联系管理员！</h2>
 4 |     <img :src="error_500_img">
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'Error_500',
11 |   data() {
12 |     return {
13 |       error_500_img: require('@/assets/images/error/500.png')
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style lang="stylus" scoped>
20 | .error-500-wrapper
21 |   display: block !important
22 |   padding: 100px 0
23 |   text-align: center
24 |   .title
25 |     padding-bottom: 20px
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/views/file/File.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="file-wrapper">
 3 |     <el-container class="el-container">
 4 |       <el-aside width="auto">
 5 |         <AsideMenu></AsideMenu>
 6 |       </el-aside>
 7 |       <el-container>
 8 |         <el-main class="el-main">
 9 |           <FileList></FileList>
10 |         </el-main>
11 |       </el-container>
12 |     </el-container>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import AsideMenu from './components/AsideMenu/AsideMenu'
18 | import FileList from './components/FileList'
19 | 
20 | export default {
21 |   name: 'File',
22 |   components: {
23 |     AsideMenu,
24 |     FileList
25 |   }
26 | }
27 | </script>
28 | 
29 | <style lang="stylus" scoped>
30 | @import '~@/assets/styles/varibles.styl'
31 | @import '~@/assets/styles/mixins.styl'
32 | .file-wrapper
33 |   width 100% !important
34 | .el-container
35 |   .el-aside
36 |     height calc(100vh - 61px)
37 |     overflow hidden
38 | .el-main
39 |   padding 0px 16px !important
40 |   overflow hidden
41 | </style>


--------------------------------------------------------------------------------
/src/views/file/components/AsideMenu/AsideMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="aside-menu-wrapper" :class="{ expand: !isFold }">
  3 |     <!-- 展开 & 收缩分类栏 -->
  4 |     <el-tooltip effect="dark" :content="isFold ? '展开分类栏' : '收起分类栏'" placement="right">
  5 |       <div class="aside-title" @click="$store.commit('switchFold')">
  6 |         <div class="top"></div>
  7 |         <i class="el-icon-caret-right" v-show="isFold"></i>
  8 |         <i class="el-icon-caret-left" v-show="!isFold"></i>
  9 |         <div class="bottom"></div>
 10 |       </div>
 11 |     </el-tooltip>
 12 |     <!-- 分类栏 -->
 13 |     <el-menu
 14 |         class="aside-menu"
 15 |         :default-openeds="[0]"
 16 |         :default-active="activeIndex"
 17 |         background-color="#909399"
 18 |         text-color="#fff"
 19 |         active-text-color="#ffd04b"
 20 |         @select="handleSelect"
 21 |     >
 22 |       <el-menu-item :index="FILE_TYPE.ALL">
 23 |         <i class="el-icon-menu" title="全部"></i>
 24 |         <span slot="title" v-show="!isFold">全部</span>
 25 |       </el-menu-item>
 26 |       <el-menu-item :index="FILE_TYPE.IMAGE" title="图片">
 27 |         <i class="el-icon-picture"></i>
 28 |         <span slot="title" v-show="!isFold">图片</span>
 29 |       </el-menu-item>
 30 |       <el-menu-item :index="FILE_TYPE.DOC" title="文档">
 31 |         <i class="el-icon-document"></i>
 32 |         <span slot="title" v-show="!isFold">文档</span>
 33 |       </el-menu-item>
 34 |       <el-menu-item :index="FILE_TYPE.VIDEO" title="视频">
 35 |         <i class="el-icon-video-camera-solid"></i>
 36 |         <span slot="title" v-show="!isFold">视频</span>
 37 |       </el-menu-item>
 38 |       <el-menu-item :index="FILE_TYPE.MUSIC" title="音乐">
 39 |         <i class="el-icon-headset"></i>
 40 |         <span slot="title" v-show="!isFold">音乐</span>
 41 |       </el-menu-item>
 42 |       <el-menu-item :index="FILE_TYPE.APP" title="应用">
 43 |         <i class="el-icon-s-platform"></i>
 44 |         <span slot="title" v-show="!isFold">应用</span>
 45 |       </el-menu-item>
 46 |       <el-menu-item :index="FILE_TYPE.OTHER" title="其他">
 47 |         <i class="el-icon-takeaway-box"></i>
 48 |         <span slot="title" v-show="!isFold">其他</span>
 49 |       </el-menu-item>
 50 |       <el-menu-item :index="FILE_TYPE.RECYCLE" title="回收站">
 51 |         <i class="el-icon-box"></i>
 52 |         <span slot="title" v-show="!isFold">回收站</span>
 53 |       </el-menu-item>
 54 |     </el-menu>
 55 |     <div class="store-wrapper" v-show="!isFold">
 56 |       <el-progress :percentage="storagePercentage" :color="storageColor" :show-text="false"></el-progress>
 57 |       <div class="text">
 58 |         <span>存储</span>
 59 |         <span>{{ storageUsedValue | storageTrans }} / {{ storageMaxValue | storageTrans(true) }}</span>
 60 |       </div>
 61 |     </div>
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | 
 67 | export default {
 68 |   name: 'AsideMenu',
 69 |   data() {
 70 |     return {
 71 |       fileListByFiletype: [],
 72 |       storageColor: [
 73 |         {color: '#67C23A', percentage: 50},
 74 |         {color: '#E6A23C', percentage: 80},
 75 |         {color: '#F56C6C', percentage: 100}
 76 |       ]
 77 |     }
 78 |   },
 79 |   computed: {
 80 |     //  当前活跃菜单项index，也是当前被选中的文件类型
 81 |     activeIndex() {
 82 |       return this.$route.query.fileType
 83 |     },
 84 |     //  判断当前用户设置的左侧栏是否折叠
 85 |     isFold() {
 86 |       return this.$store.getters.isFold
 87 |     },
 88 |     // 存储容量
 89 |     storageUsedValue() {
 90 |       return this.$store.state.sideMenu.storageUsedValue
 91 |     },
 92 |     // 最大存储容量
 93 |     storageMaxValue() {
 94 |       return this.$store.state.sideMenu.storageMaxValue
 95 |     },
 96 |     // 存储百分比
 97 |     storagePercentage() {
 98 |       let v = (this.storageUsedValue / this.storageMaxValue) * 100
 99 |       if (v<0 || isNaN(v)){
100 |         v = 0;
101 |       }else if(v>100){
102 |         v = 100;
103 |       }
104 |       return Math.ceil(v)
105 |     }
106 |   },
107 |   created(){
108 |     this.$store.dispatch('showStorage')
109 |   },
110 |   methods: {
111 |     //  导航菜单项点击事件
112 |     handleSelect(index) {
113 |       this.$router.push({
114 |         path: '/file',
115 |         query: {pid: this.ROOT_PATH, fileType: index}
116 |       })
117 |     },
118 |   }
119 | }
120 | </script>
121 | 
122 | <style lang="stylus" scoped>
123 | @import '~@/assets/styles/varibles.styl'
124 | @import '~@/assets/styles/mixins.styl'
125 | 
126 | .aside-menu-wrapper
127 |   position relative
128 |   width 76px
129 |   height 100%
130 |   transition width 0.5s
131 |   -webkit-transition width 0.5s
132 | 
133 |   .aside-title
134 |     position absolute
135 |     top 50%
136 |     left 65px
137 |     z-index 2
138 |     background $Info
139 |     color $BorderLight
140 |     width 12px
141 |     height 100px
142 |     line-height 100px
143 |     cursor pointer
144 |     z-index 3
145 |     // transition left 0.5s
146 |     // -webkit-transition left 0.5s
147 | 
148 |     &:hover
149 |       opacity 0.7
150 | 
151 |     i {
152 |       font-size 12px
153 |     }
154 | 
155 |     .top
156 |       position absolute
157 |       top calc(50% - 50px)
158 |       right 0px
159 |       width: 0;
160 |       height: 0;
161 |       border-bottom: 12px solid transparent;
162 |       border-right: 12px solid #fff;
163 | 
164 |     .bottom
165 |       position absolute
166 |       top calc(50% + 38px)
167 |       right 0px
168 |       width: 0;
169 |       height: 0;
170 |       border-top: 12px solid transparent;
171 |       border-right: 12px solid #fff;
172 | 
173 |   >>> .el-menu
174 |     border none
175 |     border-right solid 1px $BorderLight
176 |     width 64px
177 |     height: calc(100vh - 60px);
178 |     overflow: auto;
179 |     setScrollbar(4px, #909399, #EBEEF5)
180 | 
181 |     .el-menu-item
182 |       i
183 |         color inherit
184 | 
185 |     .el-menu-item.is-active
186 |       background #545c64 !important
187 | 
188 |   .store-wrapper
189 |     position absolute
190 |     bottom 0
191 |     left 0
192 |     background $RegularText
193 |     padding: 16px;
194 |     width 220px
195 |     z-index: 2;
196 |     color #fff
197 |     opacity 0.8
198 | 
199 |     .text {
200 |       margin-top 8px
201 |       display flex
202 |       justify-content space-between
203 |     }
204 | 
205 | .expand
206 |   width 232px
207 | 
208 |   .aside-title
209 |     left 221px
210 | 
211 |   >>> .el-menu
212 |     width 220px
213 |     height: calc(100% - 60px);
214 | 
215 |     .el-menu-item
216 |       padding-left 40px !important
217 | </style>
218 | 


--------------------------------------------------------------------------------
/src/views/file/components/FileList/components/BreadCrumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="breadcrumb-wrapper">
 3 |     <div class="title">当前位置：</div>
 4 |     <el-breadcrumb separator="/">
 5 |       <el-breadcrumb-item
 6 |           :to="{ query: { pid: ROOT_PATH, fileType: fileType().current() } }"
 7 |       >{{FILE_TYPE_MAP[fileType().current()]}}</el-breadcrumb-item>
 8 | 
 9 |       <el-breadcrumb-item
10 |           v-for="(item, index) in breadCrumbList"
11 |           :key="index"
12 |           :to="{ query: { pid: item.id, fileType: FILE_TYPE.ALL } }"
13 |       >{{item.name}}</el-breadcrumb-item>
14 |     </el-breadcrumb>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | 
20 | export default {
21 |   name: 'BreadCrumb',
22 |   computed: {
23 |     //  面包屑导航栏数组
24 |     breadCrumbList() {
25 |       return this.$store.getters.getPathTree(this.filePath().current())
26 |     },
27 |   }
28 | }
29 | </script>
30 | 
31 | <style lang="stylus" scoped>
32 | .breadcrumb-wrapper
33 |   padding 0
34 |   height 30px
35 |   line-height 30px
36 |   display flex
37 | 
38 |   .title, >>> .el-breadcrumb
39 |     height 30px
40 |     line-height 30px
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/views/file/components/FileList/components/FileGrid.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 文件平铺 -->
  3 |   <div class="file-grid-wrapper">
  4 |     <ul class="file-list" v-loading="loading" element-loading-text="文件加载中……" @click.self="rightMenu.isShow = false"
  5 |         @scroll="rightMenu.isShow = false">
  6 |       <li
  7 |           class="file-item"
  8 |           v-for="(item, index) in fileListSorted"
  9 |           :key="index"
 10 |           :title="item | filenameComplete"
 11 |           @click="clickFileName(item, index, fileListSorted)"
 12 |           @contextmenu.prevent="rightClickFile(item, index, $event)"
 13 |       >
 14 |         <img class="file-img" :src="setFileImg(item)"/>
 15 |         <div class="file-name">{{ item | filenameComplete }}</div>
 16 |         <div
 17 |             class="file-checked-wrapper"
 18 |             :class="{ checked: item.checked }"
 19 |             v-show="batchOperate"
 20 |             @click.stop.self="item.checked = !item.checked"
 21 |         >
 22 |           <el-checkbox
 23 |               class="file-checked"
 24 |               v-model="item.checked"
 25 |               @click.stop="item.checked = !item.checked"
 26 |           ></el-checkbox>
 27 |         </div>
 28 |       </li>
 29 |     </ul>
 30 |     <transition name="el-fade-in-linear">
 31 |       <div class="right-menu" v-show="rightMenu.isShow" :style="`top: ${rightMenu.top}px; left: ${rightMenu.left}px;`">
 32 |         <el-button type="info" size="small" plain @click.native="deleteFileBtn(selectedFile)">删除</el-button>
 33 |         <el-button type="info" size="small" plain @click.native="recoverFileBtn(selectedFile)" v-show="fileType().isRecycle()">恢复</el-button>
 34 |         <el-button type="info" size="small" plain @click.native="showMoveFileDialog(selectedFile)"
 35 |                    v-show="fileType().isNotRecycle()"
 36 |         >移动
 37 |         </el-button>
 38 |         <el-button type="info" size="small" plain @click.native="renameFile(selectedFile)"
 39 |                    v-show="fileType().isNotRecycle()"
 40 |         >重命名
 41 |         </el-button
 42 |         >
 43 |         <el-button
 44 |             type="info"
 45 |             size="small"
 46 |             plain
 47 |             v-show="selectedFile.dir == false && fileType().isNotRecycle()"
 48 |             @click.native="rightMenu.isShow = false"
 49 |         >
 50 |           <a
 51 |               target="_blank"
 52 |               style="display: block;color: inherit;"
 53 |               :href="getDownloadPath(selectedFile.id)"
 54 |               :download="selectedFile.filename + '.' + selectedFile.extension"
 55 |           >下载</a
 56 |           >
 57 |         </el-button>
 58 |         <!--        <el-button-->
 59 |         <!--            type="info"-->
 60 |         <!--            size="small"-->
 61 |         <!--            plain-->
 62 |         <!--            @click.native="unzipFile(selectedFile)"-->
 63 |         <!--            v-if="fileType.isNotRecycle() && (selectedFile.extension == 'zip' || selectedFile.extension == 'rar')"-->
 64 |         <!--        >解压缩-->
 65 |         <!--        </el-button-->
 66 |         <!--        >-->
 67 |       </div>
 68 |     </transition>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script>
 73 | import {unzipfile, deleteFile, renameFile, deleteRecoveryFile, recoverRecycleFile} from '@/request/file.js'
 74 | import {mapGetters} from 'vuex'
 75 | import 'element-ui/lib/theme-chalk/base.css'
 76 | import {filenameComplete, filenameSplit} from "@/filters";
 77 | 
 78 | export default {
 79 |   name: 'FileGrid',
 80 |   props: {
 81 |     fileList: Array, //  文件列表
 82 |     loading: Boolean,
 83 |     batchOperate: Boolean
 84 |   },
 85 |   data() {
 86 |     return {
 87 |       fileListSorted: this.fileList,
 88 |       //  移动文件模态框数据
 89 |       dialogMoveFile: {
 90 |         isBatchMove: false,
 91 |         visible: false, //  是否可见
 92 |         defaultProps: {
 93 |           children: 'children',
 94 |           label: 'label'
 95 |         }
 96 |       },
 97 |       downloadFilePath: '',
 98 |       viewFilePath: '',
 99 |       // 右键菜单
100 |       rightMenu: {
101 |         isShow: false,
102 |         top: 0,
103 |         left: 0
104 |       },
105 |       selectedFile: {}
106 |     }
107 |   },
108 |   computed: {
109 |     /**
110 |      * selectedColumnList: 列显隐
111 |      * operaColumnExpand: 判断当前用户设置的操作列是否展开 0不展开 1展开
112 |      * fileModel: 文件查看模式 0列表模式 1网格模式
113 |      *  */
114 |     ...mapGetters(['selectedColumnList', 'operaColumnExpand', 'currentFileModel']),
115 |     //  判断当前路径下是否有普通文件
116 |     isIncludeNormalFile() {
117 |       return this.fileList.map((data) => data.dir).includes(0)
118 |     },
119 |     //  判断当前路径下是否有压缩文件
120 |     isIncludeZipRarFile() {
121 |       return (
122 |           this.fileList.map((data) => data.extension).includes('zip') ||
123 |           this.fileList.map((data) => data.extension).includes('rar')
124 |       )
125 |     },
126 |     // 批量操作模式 - 被选中的文件
127 |     selectedFileList() {
128 |       let res = this.fileListSorted.filter((item) => item.checked)
129 |       return res
130 |     }
131 |   },
132 |   watch: {
133 |     // 文件平铺模式 排序-文件夹在前
134 |     fileList(newValue) {
135 |       this.fileListSorted = [...newValue]
136 |           .sort((pre, next) => {
137 |             return next.dir - pre.dir
138 |           })
139 |           .map((item) => {
140 |             return {
141 |               ...item,
142 |               checked: false
143 |             }
144 |           })
145 |     },
146 |     // 批量操作模式 - 被选中的文件
147 |     selectedFileList(newValue) {
148 |       if (newValue.length) {
149 |         this.$emit('setSelectionFile', newValue)
150 |       }
151 |     }
152 |   },
153 |   methods: {
154 |     /**
155 |      * 文件操作相关书事件
156 |      */
157 |     // 文件右键事件
158 |     rightClickFile(item, index, mouseEvent) {
159 |       if (!this.batchOperate) {
160 |         this.rightMenu.isShow = false
161 |         setTimeout(() => {
162 |           this.selectedFile = item
163 |           this.rightMenu.top = mouseEvent.clientY - 64
164 |           this.rightMenu.left = mouseEvent.clientX + 18
165 |           this.rightMenu.isShow = true
166 |         }, 100)
167 |       }
168 |     },
169 |     /**
170 |      * 表格数据获取相关事件
171 |      */
172 |     /**
173 |      * 表格数据获取相关事件
174 |      */
175 |     //  根据文件扩展名设置文件图片
176 |     setFileImg(row) {
177 |       if (!row.extension) {
178 |         //  文件夹
179 |         return this.FILE_IMG_MAP.dir
180 |       } else if (!this.FILE_IMG_TYPE_LIST.includes(row.extension)) {
181 |         //  无法识别文件类型的文件
182 |         return this.FILE_IMG_MAP.unknown
183 |       } else if (['jpg', 'png', 'jpeg', 'gif'].includes(row.extension)) {
184 |         // 图片类型，直接显示缩略图
185 |         return this.getThumbnailPath(row.id)
186 |       } else {
187 |         //  可以识别文件类型的文件
188 |         return this.FILE_IMG_MAP[row.extension]
189 |       }
190 |     },
191 |     //  计算文件大小
192 |     calculateFileSize(size) {
193 |       const B = 1024
194 |       const KB = Math.pow(1024, 2)
195 |       const MB = Math.pow(1024, 3)
196 |       const GB = Math.pow(1024, 4)
197 |       if (!size) {
198 |         return '_'
199 |       } else if (size < KB) {
200 |         return (size / B).toFixed(0) + 'KB'
201 |       } else if (size < MB) {
202 |         return (size / KB).toFixed(1) + 'MB'
203 |       } else if (size < GB) {
204 |         return (size / MB).toFixed(2) + 'GB'
205 |       } else {
206 |         return (size / GB).toFixed(3) + 'TB'
207 |       }
208 |     },
209 | 
210 |     //  点击文件名
211 |     clickFileName(row) {
212 |       //  若是目录则进入目录
213 |       if (row.dir) {
214 |         this.$router.push({
215 |           query: {
216 |             pid: row.id,
217 |             fileType: this.fileType().current()
218 |           }
219 |         })
220 |       }
221 |       //  若是文件，则进行相应的预览
222 |       else {
223 |         //  若当前点击项是图片
224 |         if (this.IMG_TYPE_LIST.includes(row.extension)) {
225 |           let data = {
226 |             imgReviewVisible: true,
227 |             imgReviewList: [
228 |               {
229 |                 id: row.id,
230 |                 fileUrl: this.getDownloadPath(row.id),
231 |                 downloadLink: this.getDownloadPath(row.id),
232 |                 filename: row.filename,
233 |                 extension: row.extension
234 |               }
235 |             ],
236 |             activeIndex: 0
237 |           }
238 |           this.$store.commit('setImgReviewData', data)
239 |         }
240 |         //  若当前点击项是可以使用office在线预览的
241 |         if (['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx'].includes(row.extension)) {
242 |           // window.open(this.getFileOnlineViewPathByOffice(row.id), '_blank')
243 |           window.open(this.getDownloadPath(row.id), '_blank')
244 |         }
245 |         //  若当前点击项是pdf
246 |         if (row.extension === 'pdf') {
247 |           window.open(this.getDownloadPath(row.id), '_blank')
248 |         }
249 |         //  若当前点击项是html、js、css、json
250 |         const CODE = ['html', 'js', 'css', 'json']
251 |         if (CODE.includes(row.extension)) {
252 |           window.open(this.getDownloadPath(row.id), '_blank')
253 |         }
254 |         //  若当前点击项是视频mp4格式
255 |         if (this.VIDEO_TYPE_LIST.includes(row.extension)) {
256 |           let data = {
257 |             visible: true,
258 |             url: this.getDownloadPath(row.id),
259 |             filename: row.filename + '.' + row.extension
260 |           }
261 |           this.$store.commit('setVideoReviewData', data)
262 |         }
263 |         //  若当前点击项是视频mp3格式
264 |         if (this.MUSIC_TYPE_LIST.includes(row.extension)) {
265 |           let data = {
266 |             visible: true,
267 |             url: this.getDownloadPath(row.id),
268 |             filename: row.filename + '.' + row.extension
269 |           }
270 |           this.$store.commit('setVideoReviewData', data)
271 |         }
272 |       }
273 |     },
274 | 
275 |     /**
276 |      * 移动按钮相关事件
277 |      */
278 |     //  操作列-移动按钮：打开移动文件模态框
279 |     showMoveFileDialog(file) {
280 |       this.rightMenu.isShow = false
281 |       //  第一个参数: 是否批量移动；第二个参数：打开/关闭移动文件模态框
282 |       this.$emit('setOperationFile', file)
283 |       this.$emit('setMoveFileDialogData', false, true)
284 |     },
285 | 
286 |     //  操作列-解压缩按钮
287 |     unzipFile(fileInfo) {
288 |       const loading = this.$loading({
289 |         lock: true,
290 |         text: '正在解压缩，请稍等片刻...',
291 |         spinner: 'el-icon-loading',
292 |         background: 'rgba(0, 0, 0, 0.7)'
293 |       })
294 |       unzipfile(fileInfo).then(() => {
295 |         this.$emit('getTableDataByType')
296 |         this.$store.dispatch('showStorage')
297 |         this.$message.success('解压成功')
298 |         loading.close()
299 |       }).catch(err => {
300 |         console.log(err)
301 |         this.$message.error("系统忙，解压失败")
302 |       })
303 |     },
304 | 
305 |     /**
306 |      * 恢复按钮事件
307 |      */
308 |     recoverFileBtn(fileInfo) {
309 |       let data = {
310 |         userFileId: fileInfo.id
311 |       }
312 |       if (this.fileType().isRecycle()) { //  回收站里 - 彻底删除
313 |         this.$confirm('是否恢复该文件?', '提示', {
314 |           confirmButtonText: '确定',
315 |           cancelButtonText: '取消',
316 |           type: 'success'
317 |         }).then(() => {
318 |           recoverRecycleFile(data).then(() => {
319 |                 this.$message({
320 |                   type: 'success',
321 |                   message: filenameComplete(fileInfo) + '已恢复'
322 |                 })
323 |                 this.$emit('getTableDataByType')
324 |                 this.$store.dispatch('showStorage')
325 |                 this.$store.dispatch('fetchPathTreeMap')
326 |               }
327 |           )
328 |         }).catch(() => {
329 |           this.$message({
330 |             type: 'info',
331 |             message: '已取消恢复'
332 |           })
333 |         })
334 |       }
335 |     },
336 | 
337 |     //  操作列-删除按钮
338 |     deleteFileBtn(fileInfo) {
339 |       if (this.fileType().isRecycle()) { //  回收站里 - 彻底删除
340 |         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
341 |           confirmButtonText: '确定',
342 |           cancelButtonText: '取消',
343 |           type: 'warning'
344 |         }).then(() => {
345 |           this.confirmDeleteFile(fileInfo, true)
346 |         }).catch(() => {
347 |           this.$message({
348 |             type: 'info',
349 |             message: '已取消删除'
350 |           })
351 |         })
352 |       } else {  //  非回收站
353 |         this.$confirm('删除后可在回收站查看, 是否继续删除?', '提示', {
354 |           confirmButtonText: '确定',
355 |           cancelButtonText: '取消',
356 |           type: 'warning'
357 |         }).then(() => {
358 |           this.confirmDeleteFile(fileInfo, false)
359 |         }).catch(() => {
360 |           this.$message({
361 |             type: 'info',
362 |             message: '已取消删除'
363 |           })
364 |         })
365 |       }
366 |     },
367 |     //  删除文件模态框-确定按钮
368 |     confirmDeleteFile(fileInfo, type) {
369 |       let data = {userFileId: fileInfo.id}
370 |       if (type) {  //  回收站中删除
371 |         deleteRecoveryFile(data).then(() => {
372 |           this.$emit('getTableDataByType')
373 |           this.$store.dispatch('showStorage')
374 |           this.$message.success('删除成功')
375 |           this.$store.dispatch('fetchPathTreeMap')
376 |         }).catch(err => {
377 |           console.log(err)
378 |           this.$message.error("系统忙，删除失败")
379 |         })
380 |       } else {  //  非回收站删除
381 |         deleteFile(data).then(() => {
382 |           this.$emit('getTableDataByType')
383 |           this.$store.dispatch('showStorage')
384 |           this.$message.success('删除成功')
385 |         }).catch(err => {
386 |           console.log(err)
387 |           this.$message.error("系统忙，删除失败")
388 |         })
389 |       }
390 |     },
391 |     // 文件重命名
392 |     renameFile(fileInfo) {
393 |       let filename = filenameComplete(fileInfo)
394 |       this.$prompt('请输入文件名', '提示', {
395 |         confirmButtonText: '确定',
396 |         cancelButtonText: '取消',
397 |         inputValue: filename
398 |       }).then(({value}) => {
399 |         let name = filenameSplit(value)
400 |         if (!name.filename) {
401 |           throw new Error("错误文件名")
402 |         }
403 |         if (fileInfo.filename === name.filename && fileInfo.extension === name.extension) {
404 |           throw new Error("文件名未发生改变")
405 |         }
406 |         fileInfo.oldFilename = fileInfo.filename
407 |         fileInfo.oldExtension = fileInfo.extension
408 |         fileInfo.filename = name.filename
409 |         fileInfo.extension = name.extension
410 |         this.confirmRenameFile(fileInfo)
411 |       }).catch(() => {
412 |         this.$message({
413 |           type: 'info',
414 |           message: '取消输入'
415 |         })
416 |       })
417 |     },
418 |     // 文件重命名模态框 确定按钮
419 |     confirmRenameFile(fileInfo) {
420 |       console.log(fileInfo)
421 |       let data = {
422 |         userFileId: fileInfo.id,
423 |         filename: fileInfo.filename
424 |       }
425 |       if (!fileInfo.dir) {
426 |         data.extension = fileInfo.extension
427 |       }
428 |       renameFile(data).then(() => {
429 |         this.$emit('getTableDataByType')
430 |         this.$store.dispatch('showStorage')
431 |         this.$message.success('重命名成功')
432 |       }).catch((err) => {
433 |         fileInfo.filename = fileInfo.oldFilename
434 |         fileInfo.extension = fileInfo.oldExtension
435 |         console.error(err)
436 |         this.$message.error("系统忙，重命名失败")
437 |       })
438 |     }
439 |   }
440 | }
441 | </script>
442 | 
443 | <style lang="stylus" scoped>
444 | @import '~@/assets/styles/varibles.styl'
445 | @import '~@/assets/styles/mixins.styl'
446 | 
447 | .file-grid-wrapper
448 |   .file-list
449 |     height calc(100vh - 206px)
450 |     overflow-y auto
451 |     display flex
452 |     flex-wrap wrap
453 |     align-items flex-start
454 |     align-content flex-start
455 |     setScrollbar(10px)
456 | 
457 |     .file-item
458 |       margin 0 16px 16px 0
459 |       position relative
460 |       width 120px
461 |       padding 8px
462 |       text-align center
463 |       cursor pointer
464 | 
465 |       &:hover
466 |         background $tabBackColor
467 | 
468 |         .file-name
469 |           font-weight 550
470 | 
471 |       .file-img
472 |         width 80px
473 |         height 80px
474 | 
475 |       .file-name
476 |         margin-top 8px
477 |         height 44px
478 |         line-height 22px
479 |         font-size 12px
480 |         word-break break-all
481 |         setEllipsis(2)
482 | 
483 |       .file-checked-wrapper
484 |         position absolute
485 |         top 0
486 |         left 0
487 |         z-index 2
488 |         background rgba(245, 247, 250, 0.5)
489 |         width 100%
490 |         height 100%
491 | 
492 |         .file-checked
493 |           position absolute
494 |           top 16px
495 |           left 24px
496 | 
497 |       .file-checked-wrapper.checked
498 |         background rgba(245, 247, 250, 0)
499 | 
500 |   .right-menu
501 |     position fixed
502 |     display flex
503 |     flex-direction column
504 | 
505 |     >>> .el-button
506 |       margin 0
507 |       border-radius 0
508 | </style>
509 | 


--------------------------------------------------------------------------------
/src/views/file/components/FileList/components/FileTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="file-table-wrapper">
  3 |     <!-- 文件表格 -->
  4 |     <el-table
  5 |         class="file-table"
  6 |         :class="'file-type-' + fileType().current()"
  7 |         ref="multipleTable"
  8 |         fit
  9 |         v-loading="loading"
 10 |         element-loading-text="文件加载中……"
 11 |         tooltip-effect="dark"
 12 |         :data="fileList"
 13 |         :default-sort="{ prop: 'dir', order: 'descending' }"
 14 |         @select-all="selectAllFileRow"
 15 |         @select="selectFileRow"
 16 |     >
 17 |       <el-table-column type="selection" width="55"></el-table-column>
 18 |       <el-table-column prop="dir" width="60" align="center">
 19 |         <template slot-scope="scope">
 20 |           <img :src="setFileImg(scope.row)" style="height: 30px"/>
 21 |         </template>
 22 |       </el-table-column>
 23 |       <el-table-column prop="filename" :sort-by="['dir', 'filename']" sortable show-overflow-tooltip>
 24 |         <template slot="header">
 25 |           <span>文件名</span>
 26 |         </template>
 27 |         <template slot-scope="scope">
 28 |           <div style="cursor:pointer;" @click="clickFileName(scope.row)">
 29 |             {{ scope.row | filenameComplete }}
 30 |           </div>
 31 |         </template>
 32 |       </el-table-column>
 33 |       <el-table-column :label="fileType().isRecycle() ? '原路径' : '路径'" prop="pid" show-overflow-tooltip
 34 |                        v-if="fileType().isNotAll()">
 35 |         <template slot-scope="scope">
 36 |           <span
 37 |               style="cursor: pointer;"
 38 |               title="点击跳转"
 39 |               @click="$router.push({ query: { pid: scope.row.pid, fileType: FILE_TYPE.ALL } })"
 40 |               v-text="getFilePath(scope.row.pid)"></span>
 41 |         </template>
 42 |       </el-table-column>
 43 |       <el-table-column
 44 |           label="类型"
 45 |           width="80"
 46 |           prop="extension"
 47 |           :sort-by="['dir', 'extension']"
 48 |           sortable
 49 |           show-overflow-tooltip
 50 |           v-if="selectedColumnList.includes('extension')"
 51 |       >
 52 |         <template slot-scope="scope">
 53 |           <span v-if="scope.row.extension">{{ scope.row.extension }}</span>
 54 |           <span v-else>文件夹</span>
 55 |         </template>
 56 |       </el-table-column>
 57 |       <el-table-column
 58 |           label="大小"
 59 |           width="80"
 60 |           prop="fileSize"
 61 |           :sort-by="['dir', 'fileSize']"
 62 |           sortable
 63 |           show-overflow-tooltip
 64 |           align="right"
 65 |           v-if="selectedColumnList.includes('fileSize')"
 66 |       >
 67 |         <template slot-scope="scope">
 68 |           <div style="padding: 0 10px;">{{ calculateFileSize(scope.row.fileSize) }}</div>
 69 |         </template>
 70 |       </el-table-column>
 71 |       <el-table-column
 72 |           label="修改日期"
 73 |           prop="updateTime"
 74 |           width="180"
 75 |           :sort-by="['dir', 'updateTime']"
 76 |           show-overflow-tooltip
 77 |           sortable
 78 |           v-if="selectedColumnList.includes('updateTime')"
 79 |       ></el-table-column>
 80 |       <el-table-column
 81 |           label="删除日期"
 82 |           prop="deleteTime"
 83 |           width="180"
 84 |           :sort-by="['dir', 'deleteTime']"
 85 |           show-overflow-tooltip
 86 |           sortable
 87 |           v-if="fileType().isRecycle() && selectedColumnList.includes('deleteTime')"
 88 |       ></el-table-column>
 89 |       <el-table-column :width="operaColumnWidth">
 90 |         <template slot="header">
 91 |           <span>操作</span>
 92 |           <i
 93 |               class="el-icon-circle-plus"
 94 |               title="展开操作列按钮"
 95 |               @click="$store.commit('changeOperaColumnExpand', FOLD_TYPE.UNFOLD)"
 96 |           ></i>
 97 |           <i class="el-icon-remove" title="收起操作列按钮"
 98 |              @click="$store.commit('changeOperaColumnExpand', FOLD_TYPE.FOLD)"></i>
 99 |         </template>
100 |         <template slot-scope="scope">
101 |           <div v-if="operaColumnExpand">
102 |             <el-button type="danger" size="mini" @click.native="deleteFileBtn(scope.row)">删除</el-button>
103 |             <el-button type="success" size="mini" @click.native="recoverFileBtn(scope.row)"
104 |                        v-if="fileType().isRecycle()">恢复
105 |             </el-button>
106 |             <el-button type="primary" size="mini" @click.native="showMoveFileDialog(scope.row)"
107 |                        v-if="fileType().isNotRecycle()">移动
108 |             </el-button>
109 |             <el-button type="primary" size="mini" @click.native="renameFile(scope.row)"
110 |                        v-if="fileType().isNotRecycle()">重命名
111 |             </el-button>
112 |             <el-button type="success" size="mini" v-if="scope.row.dir==false && fileType().isNotRecycle()">
113 |               <a
114 |                   target="_blank"
115 |                   style="display: block;color: inherit;"
116 |                   :href="getDownloadPath(scope.row.id)"
117 |                   :download="scope.row.filename + '.' + scope.row.extension"
118 |               >下载</a
119 |               >
120 |             </el-button>
121 |             <!--            <el-button-->
122 |             <!--                type="warning"-->
123 |             <!--                size="mini"-->
124 |             <!--                @click.native="unzipFile(scope.row)"-->
125 |             <!--                v-if="fileType().isNotRecycle() && (scope.row.extension == 'zip' || scope.row.extension == 'rar')"-->
126 |             <!--            >解压缩-->
127 |             <!--            </el-button>-->
128 |           </div>
129 |           <el-dropdown trigger="click" v-else>
130 |             <el-button size="mini">
131 |               操作
132 |               <i class="el-icon-arrow-down el-icon--right"></i>
133 |             </el-button>
134 |             <el-dropdown-menu slot="dropdown">
135 |               <el-dropdown-item @click.native="deleteFileBtn(scope.row)">删除</el-dropdown-item>
136 |               <el-dropdown-item @click.native="recoverFileBtn(scope.row)" v-show="fileType().isRecycle()">恢复
137 |               </el-dropdown-item>
138 |               <el-dropdown-item @click.native="showMoveFileDialog(scope.row)" v-show="fileType().isNotRecycle()">移动
139 |               </el-dropdown-item>
140 |               <el-dropdown-item @click.native="renameFile(scope.row)" v-show="fileType().isNotRecycle()">重命名
141 |               </el-dropdown-item>
142 |               <!--              <el-dropdown-item-->
143 |               <!--                  v-if="scope.row.extension === 'zip' && fileType().isNotRecycle()"-->
144 |               <!--                  @click.native="unzipFile(scope.row)">解压缩-->
145 |               <!--              </el-dropdown-item>-->
146 |               <el-dropdown-item v-show="scope.row.dir == false && fileType().isNotRecycle()">
147 |                 <a
148 |                     target="_blank"
149 |                     style="display: block;color: inherit;"
150 |                     :href="getDownloadPath(scope.row.id)"
151 |                     :download="scope.row.filename + '.' + scope.row.extension">下载</a>
152 |               </el-dropdown-item>
153 |             </el-dropdown-menu>
154 |           </el-dropdown>
155 |         </template>
156 |       </el-table-column>
157 |     </el-table>
158 |   </div>
159 | </template>
160 | 
161 | <script>
162 | import {unzipfile, deleteFile, renameFile, deleteRecoveryFile, recoverRecycleFile} from '@/request/file.js'
163 | import {mapGetters} from 'vuex'
164 | import {filenameComplete, filenameSplit} from "@/filters";
165 | 
166 | export default {
167 |   name: 'FileTable',
168 |   props: {
169 |     fileList: Array,  //  文件列表
170 |     loading: Boolean
171 |   },
172 |   data() {
173 |     return {
174 |       //  移动文件模态框数据
175 |       dialogMoveFile: {
176 |         isBatchMove: false,
177 |         visible: false, //  是否可见
178 |         fileTree: [], //  目录树
179 |         defaultProps: {
180 |           children: 'children',
181 |           label: 'label'
182 |         }
183 |       },
184 |       viewFilePath: '',
185 |     }
186 |   },
187 |   computed: {
188 |     //  selectedColumnList:判断当前用户设置的左侧栏是否折叠, operaColumnExpand:判断当前用户设置的操作列是否展开
189 |     ...mapGetters(['selectedColumnList', 'operaColumnExpand', 'getFilePath']),
190 |     //  判断当前路径下是否有普通文件
191 |     isIncludeNormalFile() {
192 |       return this.fileList.map((data) => data.dir).includes(false)
193 |     },
194 |     //  判断当前路径下是否有压缩文件
195 |     isIncludeZipRarFile() {
196 |       return (
197 |           this.fileList.map((data) => data.extension).includes('zip') ||
198 |           this.fileList.map((data) => data.extension).includes('rar')
199 |       )
200 |     },
201 |     operaColumnWidth() {
202 |       return this.fileType().isRecycle()
203 |           ? 150 : this.operaColumnExpand
204 |               ? this.isIncludeNormalFile ? 290 : 220 : 100
205 |     },
206 |   },
207 |   methods: {
208 |     /**
209 |      * 表格数据获取相关事件
210 |      */
211 |     //  根据文件扩展名设置文件图片
212 |     setFileImg(row) {
213 |       if (!row.extension) {
214 |         //  文件夹
215 |         return this.FILE_IMG_MAP.dir
216 |       } else if (!this.FILE_IMG_TYPE_LIST.includes(row.extension)) {
217 |         //  无法识别文件类型的文件
218 |         return this.FILE_IMG_MAP.unknown
219 |       } else if (['jpg', 'png', 'jpeg', 'gif'].includes(row.extension)) {
220 |         // 图片类型，直接显示缩略图
221 |         return this.getThumbnailPath(row.id)
222 |       } else {
223 |         //  可以识别文件类型的文件
224 |         return this.FILE_IMG_MAP[row.extension]
225 |       }
226 |     },
227 |     //  计算文件大小
228 |     calculateFileSize(size) {
229 |       const B = 1024
230 |       const KB = Math.pow(1024, 2)
231 |       const MB = Math.pow(1024, 3)
232 |       const GB = Math.pow(1024, 4)
233 |       if (!size) {
234 |         return '_'
235 |       } else if (size < KB) {
236 |         return (size / B).toFixed(0) + 'KB'
237 |       } else if (size < MB) {
238 |         return (size / KB).toFixed(1) + 'MB'
239 |       } else if (size < GB) {
240 |         return (size / MB).toFixed(2) + 'GB'
241 |       } else {
242 |         return (size / GB).toFixed(3) + 'TB'
243 |       }
244 |     },
245 | 
246 |     //  点击文件名
247 |     clickFileName(row) {
248 |       //  若是目录则进入目录
249 |       if (row.dir) {
250 |         this.$router.push({
251 |           query: {
252 |             pid: row.id,
253 |             fileType: this.fileType().current()
254 |           }
255 |         })
256 |       }
257 |       //  若是文件，则进行相应的预览
258 |       else {
259 |         //  若当前点击项是图片
260 |         if (this.IMG_TYPE_LIST.includes(row.extension)) {
261 |           let data = {
262 |             imgReviewVisible: true,
263 |             imgReviewList: [
264 |               {
265 |                 id: row.id,
266 |                 fileUrl: this.getDownloadPath(row.id),
267 |                 downloadLink: this.getDownloadPath(row.id),
268 |                 filename: row.filename,
269 |                 extension: row.extension
270 |               }
271 |             ],
272 |             activeIndex: 0
273 |           }
274 |           this.$store.commit('setImgReviewData', data)
275 |         }
276 |         //  若当前点击项是可以使用office在线预览的
277 |         if (['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx'].includes(row.extension)) {
278 |           // window.open(this.getFileOnlineViewPathByOffice(row.id), '_blank')
279 |           window.open(this.getDownloadPath(row.id), '_blank')
280 |         }
281 |         //  若当前点击项是pdf
282 |         if (row.extension === 'pdf') {
283 |           window.open(this.getDownloadPath(row.id), '_blank')
284 |         }
285 |         //  若当前点击项是html、js、css、json
286 |         const CODE = ['html', 'js', 'css', 'json']
287 |         if (CODE.includes(row.extension)) {
288 |           window.open(this.getDownloadPath(row.id), '_blank')
289 |         }
290 |         //  若当前点击项是视频mp4格式
291 |         if (this.VIDEO_TYPE_LIST.includes(row.extension)) {
292 |           let data = {
293 |             visible: true,
294 |             url: this.getDownloadPath(row.id),
295 |             filename: row.filename + '.' + row.extension
296 |           }
297 |           this.$store.commit('setVideoReviewData', data)
298 |         }
299 |         //  若当前点击项是视频mp3格式
300 |         if (this.MUSIC_TYPE_LIST.includes(row.extension)) {
301 |           let data = {
302 |             visible: true,
303 |             url: this.getDownloadPath(row.id),
304 |             filename: row.filename + '.' + row.extension
305 |           }
306 |           this.$store.commit('setVideoReviewData', data)
307 |         }
308 |       }
309 |     },
310 | 
311 |     /**
312 |      * 表格勾选框事件
313 |      */
314 |     //  表格-全选事件, selectoin 勾选的行数据
315 |     selectAllFileRow(selection) {
316 |       this.$emit('setSelectionFile', selection)
317 |     },
318 |     //  表格-选中一行事件, selectoin 勾选的行数据
319 |     selectFileRow(selection) {
320 |       this.$emit('setSelectionFile', selection)
321 |     },
322 | 
323 |     /**
324 |      * 移动按钮相关事件
325 |      */
326 |     //  操作列-移动按钮：打开移动文件模态框
327 |     showMoveFileDialog(file) {
328 |       //  第一个参数: 是否批量移动；第二个参数：打开/关闭移动文件模态框
329 |       this.$emit('setOperationFile', file)
330 |       this.$emit('setMoveFileDialogData', false, true)
331 |     },
332 | 
333 |     //  操作列-解压缩按钮
334 |     unzipFile(fileInfo) {
335 |       const loading = this.$loading({
336 |         lock: true,
337 |         text: '正在解压缩，请稍等片刻...',
338 |         spinner: 'el-icon-loading',
339 |         background: 'rgba(0, 0, 0, 0.7)'
340 |       })
341 |       unzipfile(fileInfo).then(() => {
342 |         this.$emit('getTableDataByType')
343 |         this.$store.dispatch('showStorage')
344 |         this.$message.success('解压成功')
345 |         loading.close()
346 |       }).catch(err => {
347 |         console.log(err)
348 |         this.$message.error("系统忙，解压失败")
349 |       })
350 |     },
351 | 
352 |     /**
353 |      * 恢复按钮事件
354 |      */
355 |     recoverFileBtn(fileInfo) {
356 |       let data = {
357 |         userFileId: fileInfo.id
358 |       }
359 |       if (this.fileType().isRecycle()) { //  回收站里 - 彻底删除
360 |         this.$confirm('是否恢复该文件?', '提示', {
361 |           confirmButtonText: '确定',
362 |           cancelButtonText: '取消',
363 |           type: 'success'
364 |         }).then(() => {
365 |           recoverRecycleFile(data).then(() => {
366 |             this.$message({
367 |               type: 'success',
368 |               message: filenameComplete(fileInfo) + '已恢复'
369 |             })
370 |             this.$emit('getTableDataByType')
371 |             this.$store.dispatch('showStorage')
372 |             this.$store.dispatch('fetchPathTreeMap')
373 |           }
374 |         )
375 |         }).catch(() => {
376 |           this.$message({
377 |             type: 'info',
378 |             message: '已取消恢复'
379 |           })
380 |         })
381 |       }
382 |     },
383 | 
384 |     //  操作列-删除按钮
385 |     deleteFileBtn(fileInfo) {
386 |       if (this.fileType().isRecycle()) { //  回收站里 - 彻底删除
387 |         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
388 |           confirmButtonText: '确定',
389 |           cancelButtonText: '取消',
390 |           type: 'warning'
391 |         }).then(() => {
392 |           this.confirmDeleteFile(fileInfo, true)
393 |         }).catch(() => {
394 |           this.$message({
395 |             type: 'info',
396 |             message: '已取消删除'
397 |           })
398 |         })
399 |       } else {  //  非回收站
400 |         this.$confirm('删除后可在回收站查看, 是否继续删除?', '提示', {
401 |           confirmButtonText: '确定',
402 |           cancelButtonText: '取消',
403 |           type: 'warning'
404 |         }).then(() => {
405 |           this.confirmDeleteFile(fileInfo, false)
406 |         }).catch(() => {
407 |           this.$message({
408 |             type: 'info',
409 |             message: '已取消删除'
410 |           })
411 |         })
412 |       }
413 |     },
414 |     //  删除文件模态框-确定按钮
415 |     confirmDeleteFile(fileInfo, type) {
416 |       let data = {userFileId: fileInfo.id}
417 |       if (type) {  //  回收站中删除
418 |         deleteRecoveryFile(data).then(() => {
419 |           this.$emit('getTableDataByType')
420 |           this.$store.dispatch('showStorage')
421 |           this.$message.success('删除成功')
422 |           this.$store.dispatch('fetchPathTreeMap')
423 |         }).catch(err => {
424 |           console.error(err)
425 |           this.$message.error("系统忙，删除失败")
426 |         })
427 |       } else {  //  非回收站删除
428 |         deleteFile(data).then(() => {
429 |           this.$emit('getTableDataByType')
430 |           this.$store.dispatch('showStorage')
431 |           this.$message.success('删除成功')
432 |         }).catch(err => {
433 |           console.error(err)
434 |           this.$message.error("系统忙，删除失败")
435 |         })
436 |       }
437 |     },
438 |     // 文件重命名
439 |     renameFile(fileInfo) {
440 |       let filename = filenameComplete(fileInfo)
441 |       this.$prompt('请输入文件名', '提示', {
442 |         confirmButtonText: '确定',
443 |         cancelButtonText: '取消',
444 |         inputValue: filename
445 |       }).then(({value}) => {
446 |         let name = filenameSplit(value)
447 |         if (!name.filename) {
448 |           throw new Error("错误文件名")
449 |         }
450 |         if (fileInfo.filename === name.filename && fileInfo.extension === name.extension) {
451 |           throw new Error("文件名未发生改变")
452 |         }
453 |         fileInfo.oldFilename = fileInfo.filename
454 |         fileInfo.oldExtension = fileInfo.extension
455 |         fileInfo.filename = name.filename
456 |         fileInfo.extension = name.extension
457 |         this.confirmRenameFile(fileInfo)
458 |       }).catch(() => {
459 |         this.$message({
460 |           type: 'info',
461 |           message: '取消输入'
462 |         })
463 |       })
464 |     },
465 |     // 文件重命名模态框 确定按钮
466 |     confirmRenameFile(fileInfo) {
467 |       console.log(fileInfo)
468 |       let data = {
469 |         userFileId: fileInfo.id,
470 |         filename: fileInfo.filename
471 |       }
472 |       if (!fileInfo.dir) {
473 |         data.extension = fileInfo.extension
474 |       }
475 |       renameFile(data).then(() => {
476 |         this.$emit('getTableDataByType')
477 |         this.$store.dispatch('showStorage')
478 |         this.$message.success('重命名成功')
479 |       }).catch((err) => {
480 |         fileInfo.filename = fileInfo.oldFilename
481 |         fileInfo.extension = fileInfo.oldExtension
482 |         console.error(err)
483 |         this.$message.error("系统忙，重命名失败")
484 |       })
485 |     }
486 |   }
487 | }
488 | </script>
489 | 
490 | <style lang="stylus" scoped>
491 | @import '~@/assets/styles/varibles.styl'
492 | @import '~@/assets/styles/mixins.styl'
493 | .file-table-wrapper
494 |   margin-top 2px
495 | 
496 |   .file-type-0
497 |     height calc(100vh - 206px) !important
498 | 
499 |     >>> .el-table__body-wrapper
500 |       height calc(100vh - 264px) !important
501 | 
502 |   .file-type-6
503 |     height calc(100vh - 211px) !important
504 | 
505 |     >>> .el-table__body-wrapper
506 |       height calc(100vh - 263px) !important
507 | 
508 |   .file-table
509 |     width 100% !important
510 |     height calc(100vh - 203px)
511 | 
512 |     >>> .el-table__header-wrapper
513 |       th
514 |         background $tabBackColor
515 |         padding 8px 0
516 | 
517 |       .el-icon-circle-plus, .el-icon-remove
518 |         margin-left 6px
519 |         cursor pointer
520 |         font-size 16px
521 | 
522 |         &:hover
523 |           color $Primary
524 | 
525 |     >>> .el-table__body-wrapper
526 |       height calc(100vh - 255px)
527 |       overflow-y auto
528 |       setScrollbar(10px)
529 | 
530 |       td
531 |         padding 8px 0
532 | 
533 |   .img-review-wrapper
534 |     position fixed
535 |     top 0
536 |     right 0
537 |     bottom 0
538 |     left 0
539 |     overflow auto
540 |     width 100%
541 |     height 100%
542 |     z-index 2010
543 |     text-align center
544 |     display flex
545 |     align-items center
546 |     animation imgReviewAnimation 0.3s
547 |     -webkit-animation imgReviewAnimation 0.3s /* Safari and Chrome */
548 |     animation-iteration-count 0.3
549 |     -webkit-animation-iteration-count 0.3
550 |     animation-fill-mode forwards
551 |     -webkit-animation-fill-mode forwards /* Safari 和 Chrome */
552 |     @keyframes imgReviewAnimation
553 |       0%
554 |         background transparent
555 |       100%
556 |         background rgba(0, 0, 0, 0.8)
557 |     @keyframes imgReviewAnimation
558 |       0%
559 |         background transparent
560 |       100%
561 |         background rgba(0, 0, 0, 0.8)
562 | 
563 |     .img-large
564 |       margin 0 auto
565 |       max-width 80%
566 |       max-height 100%
567 | </style>
568 | 


--------------------------------------------------------------------------------
/src/views/file/components/FileList/components/FileTimeLine.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 时间线模式 -->
  3 |   <div class="image-timeline-wrapper">
  4 |     <div class="radio">
  5 |       排序：
  6 |       <el-radio-group v-model="reverse">
  7 |         <el-radio :label="true">倒序</el-radio>
  8 |         <el-radio :label="false">正序</el-radio>
  9 |       </el-radio-group>
 10 |     </div>
 11 |     <el-timeline class="image-timeline-list" :reverse="reverse" v-if="imageTimelineData.length">
 12 |       <el-timeline-item
 13 |         class="image-timeline-item"
 14 |         v-for="(item, index) in imageTimelineData"
 15 |         :key="index"
 16 |         :timestamp="item.uploadDate"
 17 |         color="#409EFF"
 18 |         placement="top"
 19 |       >
 20 |         <ul class="image-list">
 21 |           <li
 22 |             class="image-item"
 23 |             v-for="(image, imageIndex) in item.imageList"
 24 |             :key="`${index}-${imageIndex}`"
 25 |           >
 26 |             <img
 27 |               class="image"
 28 |               :src="getThumbnailPath(image.id)"
 29 |               :alt="item | filenameComplete"
 30 |               @click="getImgReviewData(item.imageList, imageIndex)"
 31 |             />
 32 |             <div class="image-name">{{ image | filenameComplete }}</div>
 33 |           </li>
 34 |         </ul>
 35 |       </el-timeline-item>
 36 |     </el-timeline>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | export default {
 42 |   name: 'FileTimeLine',
 43 |   props: {
 44 |     fileList: Array
 45 |   },
 46 |   data() {
 47 |     return {
 48 |       reverse: true
 49 |     }
 50 |   },
 51 |   computed: {
 52 |     //  按年-月-日分组排序
 53 |     imageTimelineData() {
 54 |       let res = []
 55 |       //  去重，获取返回的所有日期年-月-日
 56 |       let uploadTimeSet = new Set(this.fileList.map((item) => item.createTime.split(' ')[0]))
 57 |       let uploadDate = [...uploadTimeSet]
 58 |       //  分组
 59 |       uploadDate.forEach((element) => {
 60 |         res.push({
 61 |           uploadDate: element,
 62 |           imageList: this.fileList.filter((item) => item.createTime.split(' ')[0] === element) //  过滤
 63 |         })
 64 |       })
 65 |       return res
 66 |     }
 67 |   },
 68 |   methods: {
 69 |     // 大图查看
 70 |     getImgReviewData(imgList, imageIndex) {
 71 |       let data = {
 72 |         imgReviewVisible: true,
 73 |         imgReviewList: imgList.map((item) => {
 74 |           return {
 75 |             id: item.id,
 76 |             fileUrl: this.getDownloadPath(item.id),
 77 |             downloadLink: this.getDownloadPath(item.id),
 78 |             filename: item.filename,
 79 |             extension: item.extension
 80 |           }
 81 |         }),
 82 |         activeIndex: imageIndex
 83 |       }
 84 |       this.$store.commit('setImgReviewData', data)
 85 |     }
 86 |   }
 87 | }
 88 | </script>
 89 | 
 90 | <style lang="stylus" scoped>
 91 | @import '~@/assets/styles/varibles.styl'
 92 | @import '~@/assets/styles/mixins.styl'
 93 | 
 94 | .image-timeline-wrapper
 95 |   margin-top 20px
 96 |   height calc(100vh - 215px)
 97 |   overflow-y auto
 98 |   setScrollbar(10px)
 99 |   .image-timeline-list
100 |     margin-top 10px
101 |     .image-timeline-item
102 |       .image-list
103 |         display flex
104 |         flex-wrap wrap
105 |         .image-item
106 |           margin 0 16px 16px 0
107 |           width 120px
108 |           padding 8px
109 |           text-align center
110 |           cursor pointer
111 |           &:hover
112 |             background $tabBackColor
113 |             .file-name
114 |               font-weight 550
115 |           .image
116 |             width 80px
117 |             height 80px
118 |           .image-name
119 |             margin-top 8px
120 |             height 44px
121 |             line-height 22px
122 |             font-size 12px
123 |             word-break break-all
124 |             setEllipsis(2)
125 | </style>
126 | 


--------------------------------------------------------------------------------
/src/views/file/components/FileList/components/MoveFileDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="move-dialog-wrapper">
 3 |     <!-- 移动文件-选择目录模态框 -->
 4 |     <el-dialog title="选择目录" :visible.sync="dialogMoveFile.visible">
 5 |       <div class="el-dialog-div">
 6 |         <el-tree
 7 |             node-key="id"
 8 |             :data="dialogMoveFile.fileTree"
 9 |             :props="defaultProps"
10 |             :highlight-current="true"
11 |             @node-click="selectNodeClick"
12 |         ></el-tree>
13 |       </div>
14 |       <div slot="footer" class="dialog-footer">
15 |         <el-button @click="$emit('setMoveFileDialogData', null, false)">取 消</el-button>
16 |         <el-button type="primary" @click="$emit('confirmMoveFile')">确 定</el-button>
17 |       </div>
18 |     </el-dialog>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | export default {
24 |   name: 'MoveFileDialog',
25 |   props: {
26 |     dialogMoveFile: Object
27 |   },
28 |   data() {
29 |     return {
30 |       defaultProps: {
31 |         children: 'children',
32 |         label: 'label'
33 |       }
34 |     }
35 |   },
36 |   methods: {
37 |     //  移动文件模态框：选择目录事件
38 |     selectNodeClick(data) {
39 |       this.$emit('setSelectFilePath', data.id)
40 |     }
41 |   }
42 | }
43 | </script>
44 | 
45 | <style lang="stylus" scoped>
46 | @import '~@/assets/styles/mixins.styl'
47 | 
48 | .move-dialog-wrapper
49 |   >>> .el-dialog
50 |     .el-dialog__header
51 |       display flex
52 | 
53 |     .el-dialog__body
54 |       padding 10px 30px
55 | 
56 |       .el-dialog-div
57 |         height 300px
58 |         overflow auto
59 |         setScrollbar(6px)
60 | 
61 |         .el-tree
62 |           .el-tree-node__content
63 |             height 34px
64 |             font-size 16px
65 | 
66 |             .el-icon-caret-right
67 |               font-size 18px
68 | 
69 |           .el-tree-node.is-current > .el-tree-node__content
70 |             color $Primary
71 | 
72 |             .el-tree-node__expand-icon
73 |               color inherit
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/views/file/components/FileList/components/OperationMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="operation-menu-wrapper" :class="'file-type-' + fileType().current()">
  3 |     <el-button-group class="operate-group">
  4 |       <el-button size="mini" type="primary" icon="el-icon-upload2" id="uploadFileId" @click="upload()"
  5 |                  v-if="fileType().isAll()">上传
  6 |       </el-button>
  7 |       <el-button size="mini" type="primary" icon="el-icon-plus" @click="addFolder()" v-if="fileType().isAll()">新建文件夹
  8 |       </el-button>
  9 |       <el-button size="mini" type="primary" :disabled="!selectionFile.length" icon="el-icon-delete"
 10 |                  @click="deleteSelectedFile()">批量删除
 11 |       </el-button>
 12 |       <el-button size="mini" type="primary" :disabled="!selectionFile.length" icon="el-icon-download"
 13 |                  @click="recoverSelectedFile()" v-if="fileType().isRecycle()">批量恢复
 14 |       </el-button>
 15 |       <el-button size="mini" type="primary" :disabled="!selectionFile.length" icon="el-icon-rank"
 16 |                  @click="moveSelectedFile()" v-if="fileType().isAll()">批量移动
 17 |       </el-button>
 18 |       <!--            <el-button size="mini" icon="el-icon-document-copy">拷贝</el-button>-->
 19 |       <el-button size="mini" type="primary" :disabled="!selectionFile.length" icon="el-icon-download"
 20 |                  @click="downloadSelectedFile()" v-if="fileType().isNotRecycle()">批量下载
 21 |       </el-button>
 22 |     </el-button-group>
 23 | 
 24 |     <!-- 全局搜素文件 -->
 25 |     <el-input
 26 |         v-if="fileType().isAll()"
 27 |         class="select-file-input"
 28 |         v-model="searchFile.filename"
 29 |         placeholder="搜索您的文件"
 30 |         size="mini"
 31 |         maxlength="255"
 32 |         :clearable="true"
 33 |         @change="handleSearchInputChange"
 34 |         @clear="$emit('getTableDataByType')"
 35 |         @keyup.enter.native="handleSearchInputChange(searchFile.filename)"
 36 |     >
 37 |       <i slot="prefix" class="el-input__icon el-icon-search" title="点击搜索" @click="handleSearchClick"></i>
 38 |     </el-input>
 39 | 
 40 | 
 41 |     <!-- 批量操作 -->
 42 |     <el-button
 43 |         class="batch-opera-btn"
 44 |         :type="batchOperate ? 'primary' : ''"
 45 |         icon="el-icon-finished"
 46 |         size="mini"
 47 |         v-if="fileModel().isGrid()"
 48 |         @click="changeBatchOperate()"
 49 |     >
 50 |       {{ batchOperate ? '取消批量操作' : '批量操作' }}
 51 |     </el-button>
 52 | 
 53 | 
 54 |     <!-- 文件展示模式 -->
 55 |     <div class="change-file-model">
 56 |       <el-radio-group v-model="fileGroupLable" size="mini" @change="changeFileDisplayModel">
 57 |         <el-radio-button :label="0"><i class="el-icon-tickets"></i> 列表</el-radio-button>
 58 |         <el-radio-button :label="1"><i class="el-icon-s-grid"></i> 网格</el-radio-button>
 59 |         <el-radio-button :label="2" v-if="fileType().isImage()"><i class="el-icon-date"></i> 时间线</el-radio-button>
 60 |       </el-radio-group>
 61 |     </div>
 62 | 
 63 |     <!-- 选择表格列 -->
 64 |     <SelectColumn class="select-column"></SelectColumn>
 65 | 
 66 |     <!-- 多选文件下载，页面隐藏 -->
 67 |     <a
 68 |         target="_blank"
 69 |         v-for="(item, index) in selectionFile"
 70 |         :key="index"
 71 |         :href="getDownloadPath(item.id)"
 72 |         :download="item.filename + '.' + item.extension"
 73 |         :title="'downloadLink' + index"
 74 |         :ref="'downloadLink' + index"
 75 |     ></a>
 76 |   </div>
 77 | </template>
 78 | 
 79 | <script>
 80 | import {
 81 |   batchDeleteFile, batchRecoverRecycle, batchDeleteRecoveryFile, makeDir
 82 | } from '@/request/file.js'
 83 | import SelectColumn from './SelectColumn'
 84 | 
 85 | export default {
 86 |   name: 'OperationMenu',
 87 |   props: {
 88 |     selectionFile: Array,
 89 |     operationFile: Object,
 90 |     batchOperate: Boolean //  批量操作模式
 91 |   },
 92 |   components: {
 93 |     SelectColumn
 94 |   },
 95 |   data() {
 96 |     return {
 97 |       // 文件搜索数据
 98 |       searchFile: {
 99 |         filename: ''
100 |       },
101 |       fileTree: [],
102 |       batchDeleteFileDialog: false,
103 |       fileGroupLable: this.FILE_MODEL.TABLE, //  文件展示模式
104 |     }
105 |   },
106 |   computed: {
107 |     //  上传文件组件参数
108 |     uploadFileData: {
109 |       get() {
110 |         let data = {
111 |           folderId: this.filePath().current(),
112 |           isDir: false
113 |         }
114 |         if (!data.folderId) {
115 |           delete data.folderId
116 |         }
117 |         return data;
118 |       },
119 |       set() {
120 |         return {
121 |           folderId: this.ROOT_PATH,
122 |           isDir: false
123 |         }
124 |       }
125 |     },
126 |   },
127 |   watch: {},
128 |   mounted() {
129 |     this.fileGroupLable = this.fileModel().current()
130 |     this.$EventBus.$on('refreshList', () => {
131 |       this.$emit('getTableDataByType')
132 |     })
133 |     this.$EventBus.$on('refreshStorage', () => {
134 |       this.$store.dispatch('showStorage')
135 |     })
136 |   },
137 |   methods: {
138 |     upload() {
139 |       // 打开文件选择框
140 |       this.$EventBus.$emit('openUploader', this.uploadFileData)
141 |     },
142 |     //  新建文件夹按钮：打开模态框
143 |     addFolder() {
144 |       this.$prompt('请输入文件夹名称', '创建文件夹', {
145 |         confirmButtonText: '确定',
146 |         cancelButtonText: '取消'
147 |       }).then(({value}) => {
148 |         this.createFolder(value)
149 |       }).catch(() => {
150 |         this.$message({
151 |           type: 'info',
152 |           message: '取消输入'
153 |         })
154 |       })
155 |     },
156 |     //  新建文件夹模态框-确定按钮
157 |     createFolder(filename) {
158 | 
159 |       if (filename === null || filename === undefined || filename === '') {
160 |         throw new Error("文件名不能为空")
161 |       }
162 |       let data = {
163 |         name: filename,
164 |       }
165 |       if (this.filePath().current()) {
166 |         data.pid = this.filePath().current()
167 |       }
168 |       makeDir(data).then(() => {
169 |         this.$message.success('添加成功')
170 |         this.$emit('getTableDataByType')
171 |       }).catch(err => this.$message.warning(err.msg));
172 |     },
173 | 
174 |     //  批量操作-删除按钮
175 |     deleteSelectedFile() {
176 |       let data = {
177 |         userFileIds: this.selectionFile.flatMap(row => row.id)
178 |       }
179 |       let deleteApi;
180 |       if (this.fileType().isNotRecycle()){
181 |         deleteApi = batchDeleteFile
182 |       }else{
183 |         deleteApi = batchDeleteRecoveryFile
184 |       }
185 |       //  批量删除接口
186 |       deleteApi(data).then(() => {
187 |         this.$message({
188 |           message: "文件删除成功",
189 |           type: 'success'
190 |         })
191 |         this.$emit('getTableDataByType')
192 |         this.$store.dispatch('showStorage')
193 |       }).catch(err => {
194 |         console.error(err)
195 |         this.$message.error("系统忙，删除失败")
196 |       })
197 |     },
198 |     recoverSelectedFile(){
199 |       let data = {
200 |         userFileIds: this.selectionFile.flatMap(row => row.id)
201 |       }
202 |       //  批量恢复接口
203 |       batchRecoverRecycle(data).then(() => {
204 |         this.$message({
205 |           message: "删除文件已恢复",
206 |           type: 'success'
207 |         })
208 |         this.$emit('getTableDataByType')
209 |         this.$store.dispatch('showStorage')
210 |       }).catch(err => {
211 |         console.error(err)
212 |         this.$message.error("系统忙，恢复失败")
213 |       })
214 |     },
215 |     //  批量操作-移动按钮
216 |     moveSelectedFile() {
217 |       this.$emit('setMoveFileDialogData', true, true)
218 |     },
219 |     //  批量操作：下载按钮
220 |     downloadSelectedFile() {
221 |       for (let i = 0; i < this.selectionFile.length; i++) {
222 |         let name = 'downloadLink' + i
223 |         this.$refs[name][0].click()
224 |       }
225 |     },
226 |     handleSearchInputChange(value) {
227 |       if (value === '') {
228 |         this.$emit('getTableDataByType')
229 |       } else {
230 |         this.$emit('getSearchFileList', value)
231 |       }
232 |     },
233 |     // 图片网格模式下 - 批量操作切换
234 |     changeBatchOperate() {
235 |       this.$emit('update:batchOperate', !this.batchOperate)
236 |     },
237 |     // 切换文件查看模式
238 |     changeFileDisplayModel(label) {
239 |       this.$store.commit('changeFileModel', label)
240 |     },
241 |     handleSearchClick() {
242 |       this.$emit('getSearchFileList', this.searchFile.filename)
243 |     },
244 |   }
245 | }
246 | </script>
247 | 
248 | <style lang="stylus" scoped>
249 | .operation-menu-wrapper.file-type-6
250 |   margin 8px 0
251 |   justify-content flex-end
252 | 
253 | .operation-menu-wrapper
254 |   padding 16px 0
255 |   display flex
256 |   justify-content space-between
257 |   align-items: center;
258 | 
259 |   .operate-group
260 |     flex 1
261 | 
262 |   .change-image-model,
263 |   .change-file-model
264 |     margin-right 8px
265 | 
266 |   .batch-opera-btn
267 |     margin-right 8px
268 | 
269 |   .select-file-input {
270 |     margin-right: 8px;
271 |     width: 200px;
272 | 
273 |     .el-icon-search {
274 |       cursor: pointer;
275 |       font-size: 16px;
276 | 
277 |       &:hover {
278 |         color: $Primary;
279 |       }
280 |     }
281 |   }
282 | </style>
283 | 


--------------------------------------------------------------------------------
/src/views/file/components/FileList/components/SelectColumn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="select-column-wrapper">
 3 |     <el-button type="info" size="mini" plain icon="el-icon-s-operation" @click="selectColumnBtn">设置显示列</el-button>
 4 |     <el-dialog
 5 |       title="筛选列"
 6 |       width="700px"
 7 |       :visible.sync="dialogVisible"
 8 |     >
 9 |       <el-checkbox-group v-model="checkboxSelectColumnList">
10 |         <el-checkbox
11 |           v-for="item in columnOptions"
12 |           :key="item.value"
13 |           :label="item.value"
14 |         >{{ item.label }}</el-checkbox>
15 |       </el-checkbox-group>
16 |       <span slot="footer" class="dialog-footer">
17 |         <el-button @click="dialogVisible = false">取 消</el-button>
18 |         <el-button type="primary" @click="dialogOk()">确 定</el-button>
19 |       </span>
20 |     </el-dialog>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   name: 'SelectColumn',
27 |   props: {
28 | 
29 |   },
30 |   data() {
31 |     return {
32 |       dialogVisible: false,
33 |       columnOptions: [{
34 |         value: 'extendName',
35 |         label: '类型'
36 |       }, {
37 |         value: 'fileSize',
38 |         label: '大小'
39 |       }, {
40 |         value: 'uploadTime',
41 |         label: '修改日期'
42 |       }, {
43 |         value: 'deleteTime',
44 |         label: '删除日期'
45 |       }],
46 |       checkboxSelectColumnList: []
47 |     }
48 |   },
49 |   computed: {
50 |     selectedColumnList() {
51 |       return this.$store.getters.selectedColumnList
52 |     }
53 |   },
54 |   methods: {
55 |     // 筛选列按钮
56 |     selectColumnBtn() {
57 |       this.checkboxSelectColumnList = [ ...this.selectedColumnList ]
58 |       this.dialogVisible = true
59 |     },
60 |     // 筛选列模态框 确定按钮
61 |     dialogOk() {
62 |       this.$store.commit('changeSelectedColumnList', this.checkboxSelectColumnList)
63 |       this.dialogVisible = false
64 |     }
65 |   }
66 | }
67 | </script>
68 | 
69 | <style lang="stylus" scoped>
70 | .select-column-wrapper
71 |   display flex
72 |   .label 
73 |     height 30px
74 |     line-height 30px
75 |   .select-column
76 |     width 230px 
77 | </style>


--------------------------------------------------------------------------------
/src/views/file/components/FileList/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="file-list-wrapper">
  3 |     <!-- 操作按钮 -->
  4 |     <el-header>
  5 |       <OperationMenu
  6 |           :operationFile="operationFile"
  7 |           :selectionFile="selectionFile"
  8 |           :filePath="filePath().current()"
  9 |           :batchOperate.sync="batchOperate"
 10 |           @getSearchFileList="getSearchFileList"
 11 |           @getTableDataByType="getTableDataByType"
 12 |           @setMoveFileDialogData="setMoveFileDialogData"
 13 |       ></OperationMenu>
 14 |     </el-header>
 15 |     <div class="middle-wrapper">
 16 |       <!-- 面包屑导航栏 -->
 17 |       <BreadCrumb class="breadcrumb"></BreadCrumb>
 18 |     </div>
 19 |     <!-- 文件列表-表格模式 -->
 20 |     <FileTable
 21 |         :fileList="fileList"
 22 |         :loading="loading"
 23 |         v-if="fileModel().isTable()"
 24 |         @setMoveFileDialogData="setMoveFileDialogData"
 25 |         @setOperationFile="setOperationFile"
 26 |         @setSelectionFile="setSelectionFile"
 27 |         @getTableDataByType="getTableDataByType"
 28 |     ></FileTable>
 29 |     <!-- 文件列表-网格模式 -->
 30 |     <FileGrid
 31 |         :fileList="fileList"
 32 |         :loading="loading"
 33 |         :batchOperate="batchOperate"
 34 |         v-if="fileModel().isGrid()"
 35 |         @setMoveFileDialogData="setMoveFileDialogData"
 36 |         @setOperationFile="setOperationFile"
 37 |         @setSelectionFile="setSelectionFile"
 38 |         @getTableDataByType="getTableDataByType"
 39 |     ></FileGrid>
 40 |     <!-- 图片-时间线模式 -->
 41 |     <FileTimeLine class="image-model" v-if="fileModel().isTimeLine()" :fileList="fileList"></FileTimeLine>
 42 |     <div class="pagination-wrapper">
 43 |       <div class="current-page-count">当前页{{ fileList.length }}条</div>
 44 |       <el-pagination
 45 |           :current-page="pageData.currentPage"
 46 |           :page-size="pageData.pageCount"
 47 |           :total="pageData.total"
 48 |           :page-sizes="[10, 50, 100, 200]"
 49 |           layout="sizes, total, prev, pager, next"
 50 |           @current-change="handleCurrentChange"
 51 |           @size-change="handleSizeChange"
 52 |       >
 53 |       </el-pagination>
 54 |     </div>
 55 |     <!-- 移动文件模态框 -->
 56 |     <MoveFileDialog
 57 |         :dialogMoveFile="dialogMoveFile"
 58 |         @setSelectFilePath="setSelectFilePath"
 59 |         @confirmMoveFile="confirmMoveFile"
 60 |         @setMoveFileDialogData="setMoveFileDialogData"
 61 |     ></MoveFileDialog>
 62 |   </div>
 63 | </template>
 64 | 
 65 | <script>
 66 | import OperationMenu from './components/OperationMenu'
 67 | import BreadCrumb from './components/BreadCrumb'
 68 | import FileTable from './components/FileTable'
 69 | import FileGrid from './components/FileGrid'
 70 | import FileTimeLine from './components/FileTimeLine'
 71 | import MoveFileDialog from './components/MoveFileDialog'
 72 | 
 73 | import {
 74 |   getFileList,
 75 |   selectFileByFileType,
 76 |   getRecoveryFile,
 77 |   getFileTree,
 78 |   moveFile,
 79 |   batchMoveFile,
 80 |   searchFile,
 81 | } from '@/request/file.js'
 82 | 
 83 | 
 84 | export default {
 85 |   name: 'FileList',
 86 |   components: {
 87 |     OperationMenu,
 88 |     BreadCrumb,
 89 |     FileTable,
 90 |     FileGrid,
 91 |     FileTimeLine,
 92 |     MoveFileDialog
 93 |   },
 94 |   data() {
 95 |     return {
 96 |       fileNameSearch: '',
 97 |       loading: true, //  表格数据-loading
 98 |       fileList: [], //  表格数据-文件列表
 99 |       pageData: {
100 |         currentPage: 1,
101 |         pageCount: 10,
102 |         total: 0
103 |       },
104 |       //  移动文件模态框数据
105 |       dialogMoveFile: {
106 |         isBatchMove: false,
107 |         visible: false, //  是否可见
108 |         fileTree: [] //  目录树
109 |       },
110 |       selectFilePath: Number, //  移动文件路径
111 |       operationFile: {}, // 当前操作行
112 |       selectionFile: [], // 勾选的文件
113 |       batchOperate: false //  批量操作模式
114 |     }
115 |   },
116 |   computed: {
117 |     //  当前查看的文件路径
118 |     currentPath: {
119 |       get() {
120 |         return this.$route.query.pid
121 |       },
122 |       set() {
123 |         return this.ROOT_PATH
124 |       }
125 |     },
126 |     // 文件类型
127 |     currentFileType: {
128 |       get() {
129 |         return this.$route.query.fileType
130 |       },
131 |       set() {
132 |         return this.FILE_TYPE.ALL
133 |       }
134 |     },
135 |     // 文件查看模式 0列表模式 1网格模式 2 时间线模式
136 |     currentFileModel() {
137 |       return this.$store.getters.fileModel
138 |     },
139 |   },
140 |   watch: {
141 |     currentPath() {
142 |       if (this.isLoginPage()){
143 |         return
144 |       }
145 |       this.getTableDataByType()
146 |       this.setPageCount()
147 |     },
148 |     currentFileType(newValue, oldValue) {
149 |       if (this.isLoginPage()){
150 |         return
151 |       }
152 |       if (oldValue === this.FILE_TYPE.IMAGE && this.fileModel().isTimeLine()) {
153 |         this.$store.commit('changeFileModel', this.FILE_MODEL.TABLE)
154 |       }
155 |       this.getTableDataByType()
156 |       this.setPageCount()
157 |     },
158 |     // 监听文件查看模式
159 |     currentFileModel() {
160 |       this.getTableDataByType()
161 |       this.setPageCount()
162 |     }
163 |   },
164 |   created() {
165 |     this.$store.dispatch('fetchPathTreeMap')
166 |     this.setPageCount()
167 |     this.getTableDataByType()
168 |   },
169 |   methods: {
170 |     /**
171 |      * 表格数据获取相关事件
172 |      */
173 |     reflushFileList(res) {
174 |       this.loading = false
175 |       this.fileList = res.data
176 |       this.pageData.total = res.total
177 |     },
178 |     // 调整分页大小
179 |     setPageCount() {
180 |       this.pageData.currentPage = 1
181 |       if (this.fileModel().isTable()) {
182 |         this.pageData.pageCount = 10
183 |       }
184 |       if (this.fileModel().isGrid()) {
185 |         this.pageData.pageCount = 40
186 |       }
187 |     },
188 |     // 获取文件列表数据
189 |     getTableDataByType() {
190 |       this.batchOperate = false
191 |       this.loading = true
192 | 
193 |       // 分类型
194 |       if (this.fileType().isNotAll()) {
195 |         if (this.fileType().isRecycle()) {
196 |           this.showFileRecovery() //  回收站
197 |         } else {
198 |           this.showFileListByType()
199 |         }
200 |       } else {
201 |         // 全部文件
202 |         this.showFileList()
203 |       }
204 |     },
205 |     // 获取当前路径下的文件列表
206 |     showFileList() {
207 |       let data = {
208 |         currentPage: this.pageData.currentPage,
209 |         pageCount: this.pageData.pageCount
210 |       }
211 |       if (this.currentPath != null){
212 |         data.pid = this.currentPath
213 |       }
214 | 
215 |       getFileList(data).then((res) => {
216 |         this.reflushFileList(res)
217 |       }).catch(err => {
218 |         console.log(err)
219 |         this.$message.error("服务器正忙")
220 |       })
221 |     },
222 |     // 分页组件 当前页码改变
223 |     handleCurrentChange(currentPage) {
224 |       this.pageData.currentPage = currentPage
225 |       this.getTableDataByType()
226 |     },
227 |     handleSizeChange(pageCount) {
228 |       this.pageData.pageCount = pageCount
229 |       this.getTableDataByType()
230 |     },
231 |     // 获取回收站文件列表
232 |     showFileRecovery() {
233 |       let data = {
234 |         currentPage: this.pageData.currentPage,
235 |         pageCount: this.pageData.pageCount
236 |       }
237 |       getRecoveryFile(data).then((res) => {
238 |         this.reflushFileList(res)
239 |       }).catch(err =>{
240 |         console.log(err)
241 |         this.$message.error("服务器正忙")
242 |       })
243 |     },
244 |     // 根据文件类型展示文件列表
245 |     showFileListByType() {
246 |       //  分类型
247 |       let data = {
248 |         currentPage: this.pageData.currentPage,
249 |         pageCount: this.pageData.pageCount,
250 |         fileType: this.fileType().current()
251 |       }
252 |       selectFileByFileType(data).then((res) => {
253 |         this.reflushFileList(res)
254 |       }).catch(err => {
255 |         console.log(err)
256 |         this.$message.error("服务器正忙")
257 |       })
258 |     },
259 | 
260 |     /**
261 |      * 表格勾选框事件
262 |      */
263 |     //  勾选的行
264 |     setSelectionFile(selection) {
265 |       this.selectionFile = selection
266 |     },
267 | 
268 |     /**
269 |      * 移动按钮相关事件
270 |      */
271 |     //  当前操作行
272 |     setOperationFile(operationFile) {
273 |       this.operationFile = operationFile
274 |     },
275 |     //  设置移动文件模态框相关数据，isBatchMove为null时是确认移动，值由之前的值而定
276 |     setMoveFileDialogData(isBatchMove, visible) {
277 |       this.initFileTree()
278 |       this.dialogMoveFile.isBatchMove = isBatchMove ? isBatchMove : this.dialogMoveFile.isBatchMove
279 |       this.dialogMoveFile.visible = visible
280 |     },
281 |     //  移动文件模态框：初始化文件目录树
282 |     initFileTree() {
283 |       getFileTree().then((res) => {
284 |         this.dialogMoveFile.fileTree = [res]
285 |       }).catch(err => {
286 |         console.log(err)
287 |         this.$message.error("服务器正忙")
288 |       })
289 |     },
290 |     //  设置移动后的文件路径
291 |     setSelectFilePath(selectFilePath) {
292 |       this.selectFilePath = selectFilePath
293 |     },
294 |     //  移动文件模态框-确定按钮事件
295 |     confirmMoveFile() {
296 |       if (this.dialogMoveFile.isBatchMove) {
297 |         //  批量移动
298 |         let data = {
299 |           from: this.selectionFile.flatMap(row => row.id),
300 |           to: this.selectFilePath
301 |         }
302 |         if (!data.to) {
303 |           delete data.to
304 |         }
305 |         batchMoveFile(data).then(() => {
306 |           this.$message.success("文件移动成功")
307 |           this.getTableDataByType()
308 |           this.dialogMoveFile.visible = false
309 |           this.selectionFile = []
310 |           this.$store.dispatch('fetchPathTreeMap')
311 |         }).catch(err => {
312 |           console.error(err)
313 |           this.$message.error("系统忙，移动失败")
314 |         })
315 |       } else {
316 |         //  单文件移动
317 |         let data = {
318 |           from: this.operationFile.id,
319 |           to: this.selectFilePath,
320 |         }
321 |         if (!data.to) {
322 |           delete data.to
323 |         }
324 |         moveFile(data).then(() => {
325 |           this.$store.dispatch('fetchPathTreeMap')
326 |           this.$message.success('移动文件成功')
327 |           this.getTableDataByType()
328 |           this.dialogMoveFile.visible = false
329 |         }).catch(err => {
330 |           console.error(err)
331 |           this.$message.error("系统忙，移动失败")
332 |         })
333 |       }
334 |     },
335 |     // 获取搜索文件结果列表
336 |     getSearchFileList(filename) {
337 |       this.loading = true
338 |       searchFile({
339 |         currentPage: this.pageData.currentPage,
340 |         pageCount: this.pageData.pageCount,
341 |         filename: filename
342 |       }).then(res => {
343 |         this.reflushFileList(res)
344 |       }).catch(err => {
345 |         console.error(err)
346 |         this.$message.error("服务器正忙")
347 |       })
348 |     }
349 |   }
350 | }
351 | </script>
352 | 
353 | <style lang="stylus" scoped>
354 | @import '~@/assets/styles/varibles.styl'
355 | .file-list-wrapper
356 |   >>> .el-header
357 |     padding 0
358 | 
359 |   .middle-wrapper
360 |     margin-bottom 8px
361 | 
362 |   .pagination-wrapper
363 |     position relative
364 |     border-top 1px solid $BorderBase
365 |     height 44px
366 |     line-height 44px
367 |     text-align center
368 | 
369 |     .current-page-count
370 |       position absolute
371 |       left 16px
372 |       height 32px
373 |       line-height 32px
374 |       font-size 13px
375 |       color $RegularText
376 | </style>
377 | 


--------------------------------------------------------------------------------
/src/views/user/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="loginWrapper" id="loginBackground">
  3 |     <div class="formWrapper">
  4 |       <h1 class="loginTitle" v-text="loginTitle"></h1>
  5 |       <p class="loginSystem" v-text="SYSTEM_NAME"></p>
  6 |       <el-form
  7 |           :model="ruleForm"
  8 |           :rules="rules"
  9 |           ref="ruleForm"
 10 |           label-width="100px"
 11 |           class="demo-ruleForm"
 12 |           hide-required-asterisk
 13 |       >
 14 |         <el-form-item prop="username">
 15 |           <el-input
 16 |               prefix-icon="el-icon-user"
 17 |               v-model="ruleForm.username"
 18 |               placeholder="用户名"
 19 |           ></el-input>
 20 |         </el-form-item>
 21 |         <el-form-item prop="password">
 22 |           <el-input
 23 |               prefix-icon="el-icon-lock"
 24 |               v-model="ruleForm.password"
 25 |               placeholder="密码"
 26 |               show-password
 27 |           ></el-input>
 28 |         </el-form-item>
 29 |         <el-form-item>
 30 |           <drag-verify
 31 |               ref="dragVerifyRef"
 32 |               text="请按住滑块拖动记住登录状态"
 33 |               successText="已记住登录状态"
 34 |               handlerIcon="el-icon-d-arrow-right"
 35 |               successIcon="el-icon-circle-check"
 36 |               :width="375"
 37 |               handlerBg="#F5F7FA"
 38 |               :isPassing.sync="isPassing"
 39 |               @update:isPassing="rememberMe"
 40 |           ></drag-verify>
 41 |         </el-form-item>
 42 |         <el-form-item class="loginButtonWrapper">
 43 |           <el-button class="loginButton" type="primary" @click="submitForm('ruleForm')">登录
 44 |           </el-button>
 45 |         </el-form-item>
 46 |         <el-form-item style="text-align:left;">
 47 |           其他账号登录：
 48 |           <a href="#">
 49 |             <img :src="qqIcon" style="width: 30px;"/>
 50 |           </a>
 51 |           <el-button type="text" @click="forgetPassword" style="float: right">忘记密码?</el-button>
 52 |         </el-form-item>
 53 |       </el-form>
 54 |     </div>
 55 |   </div>
 56 | </template>
 57 | 
 58 | <script>
 59 | import CanvasNest from 'canvas-nest.js'
 60 | import DragVerify from '@/components/DragVerify.vue'
 61 | import {login, forgetPasswd1, forgetPasswd2} from '@/request/user.js'
 62 | 
 63 | // 配置
 64 | const config = {
 65 |   color: '64, 158, 255', // 线条颜色
 66 |   pointColor: '64, 158, 255', // 节点颜色
 67 |   opacity: 0.5, // 线条透明度
 68 |   count: 99, // 线条数量
 69 |   zIndex: -1 // 画面层级
 70 | }
 71 | 
 72 | export default {
 73 |   name: 'Login',
 74 |   components: {DragVerify},
 75 |   data() {
 76 |     return {
 77 |       loginTitle: '登录',
 78 |       ruleForm: {
 79 |         username: '',
 80 |         password: '',
 81 |         rememberMe: ''
 82 |       },
 83 |       rules: {
 84 |         username: [
 85 |           {required: true, message: '请输入用户名', trigger: 'blur'},
 86 |           {
 87 |             min: 4,
 88 |             max: 16,
 89 |             message: '长度在4到16个字符',
 90 |             trigger: 'blur'
 91 |           }
 92 |         ],
 93 |         password: [
 94 |           {required: true, message: '请输入密码', trigger: 'blur'},
 95 |           {
 96 |             min: 7,
 97 |             max: 20,
 98 |             message: '长度在7到20个字符',
 99 |             trigger: 'blur'
100 |           }
101 |         ],
102 |       },
103 |       isPassing: false,
104 |       submitDisabled: true,
105 |       qqIcon: require('@/assets/images/login/qqIcon.png')
106 |     }
107 |   },
108 |   computed: {
109 |     url() {
110 |       let _url = this.$route.query.Rurl //获取路由前置守卫中next函数的参数，即登录后要去的页面
111 |       if (_url) {
112 |         //若登录之前有页面，则登录后仍然进入该页面
113 |         return _url
114 |       } else {
115 |         //若登录之前无页面，则登录后进入首页
116 |         return '/'
117 |       }
118 |     }
119 |   },
120 |   watch: {},
121 |   methods: {
122 |     //  记住我
123 |     rememberMe(isPassing) {
124 |       if (isPassing) {
125 |         this.ruleForm.rememberMe = 'On'
126 |       } else {
127 |         this.ruleForm.rememberMe = ''
128 |       }
129 |     },
130 |     // 忘记密码
131 |     forgetPassword() {
132 |       this.$prompt('请输入用户邮箱', '忘记密码，步骤一', {
133 |         confirmButtonText: '确认',
134 |         cancelButtonText: '取消',
135 |         inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
136 |         inputErrorMessage: '邮箱格式不正确'
137 |       }).then((email) => {
138 |         forgetPasswd1({email: email.value}).then(() => {
139 |           this.$message.success('忘记密码所需令牌已发送至您的邮箱，请查收！');
140 |           this.$prompt("输入令牌", '忘记密码，步骤二', {
141 |             confirmButtonText: '确认',
142 |             cancelButtonText: '取消',
143 |             inputPattern: /^\S{36}$/,
144 |             inputErrorMessage: '令牌格式不正确'
145 |           }).then((token) => {
146 |             this.$prompt("更改密码", '忘记密码，步骤三', {
147 |               confirmButtonText: '确认',
148 |               cancelButtonText: '取消',
149 |               inputPattern: /^\S{7,20}$/,
150 |               inputErrorMessage: '密码格式不正确'
151 |             }).then((password) => {
152 |               forgetPasswd2({token: token.value, password: password.value, email: email.value}).then(() => this.$message.success("密码重置成功！"))
153 |                   .catch((err) => {throw new Error(err)})
154 |             })
155 |           }).catch(err => {
156 |             console.error(err)
157 |             this.$message.error("密码重置失败")
158 |           })
159 |         }).catch(err => {
160 |           console.error(err)
161 |           this.$message.error("无法获取令牌")
162 |         })
163 |       }).catch(() => {
164 |         this.$message({
165 |           type: 'info',
166 |           message: '放弃忘记密码'
167 |         });
168 |       });
169 |     },
170 |     //  登录按钮
171 |     submitForm(formName) {
172 |       this.$refs[formName].validate(valid => {
173 |         if (valid) {
174 |           //各项校验通过
175 |           let data = {
176 |             username: this.ruleForm.username,
177 |             password: this.ruleForm.password,
178 |             rememberMe: this.ruleForm.rememberMe
179 |           }
180 |           login(data, true).then(() => {
181 |             this.$refs[formName].resetFields();
182 |             this.$notify({
183 |               title: '成功',
184 |               message: '登录成功！',
185 |               type: 'success'
186 |             })
187 |             this.$store.dispatch('getUserInfo').then(() => {
188 |               this.$router.replace({path: this.url})
189 |               location.reload()
190 |             })
191 |           }).catch(err => {
192 |             this.$message.error(err.msg)
193 |             this.isPassing = false
194 |             this.$refs.dragVerifyRef.reset()
195 |           })
196 |         } else {
197 |           this.$message.error('请完善信息！')
198 |           return false
199 |         }
200 |       })
201 |     }
202 |   },
203 |   created() {
204 |     if (this.$store.getters.isLogin) {
205 |       // 用户若已登录，自动跳转到首页
206 |       let username = this.$store.getters.user.username
207 |       this.$message({
208 |         message: username + ' 您已登录！已跳转到首页',
209 |         center: true,
210 |         type: 'success'
211 |       })
212 |       this.$router.replace({name: 'Home'})
213 |     }
214 |     this.$nextTick(() => {
215 |       let element = document.getElementById('loginBackground')
216 |       new CanvasNest(element, config)
217 |     })
218 |   }
219 | }
220 | </script>
221 | <style lang="stylus" scoped>
222 | .loginWrapper
223 |   height 550px !important
224 |   min-height 550px !important
225 |   padding-top 50px
226 | 
227 |   .formWrapper
228 |     width 375px
229 |     margin 0 auto
230 |     text-align center
231 | 
232 |     .loginTitle
233 |       margin-bottom 10px
234 |       font-weight 300
235 |       font-size 30px
236 |       color #000
237 | 
238 |     .loginSystem
239 |       font-weight 300
240 |       color #999
241 | 
242 |     .demo-ruleForm
243 |       width 100%
244 |       margin-top 20px
245 | 
246 |       >>> .el-form-item__content
247 |         margin-left 0 !important
248 | 
249 |       & >>> .el-input__inner
250 |         font-size 16px
251 | 
252 |       .loginButtonWrapper
253 |         .loginButton
254 |           width 100%
255 | 
256 |         & >>> .el-button
257 |           padding 10px 90px
258 |           font-size 16px
259 | 
260 |     .tip
261 |       width 70%
262 |       margin-left 86px
263 | </style>
264 | 


--------------------------------------------------------------------------------
/src/views/user/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="registerWrapper" id="registerBackground">
  3 |     <div class="formWrapper">
  4 |       <h1 class="registerTitle" v-text="registerTitle"></h1>
  5 |       <p class="registerSystem" v-text="SYSTEM_NAME"></p>
  6 |       <el-form
  7 |           :model="ruleForm"
  8 |           :rules="rules"
  9 |           ref="ruleForm"
 10 |           label-width="100px"
 11 |           class="demo-ruleForm"
 12 |           hide-required-asterisk
 13 |       >
 14 |         <el-form-item prop="username">
 15 |           <el-input
 16 |               prefix-icon="el-icon-user"
 17 |               v-model="ruleForm.username"
 18 |               placeholder="用户名"
 19 |           ></el-input>
 20 |         </el-form-item>
 21 |         <el-form-item prop="email">
 22 |           <el-input
 23 |               prefix-icon="el-icon-message"
 24 |               v-model="ruleForm.email"
 25 |               placeholder="邮箱"
 26 |           ></el-input>
 27 |         </el-form-item>
 28 |         <el-form-item prop="password">
 29 |           <el-input
 30 |               prefix-icon="el-icon-lock"
 31 |               v-model="ruleForm.password"
 32 |               placeholder="密码"
 33 |               show-password
 34 |           ></el-input>
 35 |         </el-form-item>
 36 |         <el-form-item style="user-select: none;">
 37 |           <drag-verify
 38 |               ref="dragVerifyRef"
 39 |               text="请按住滑块拖动解锁"
 40 |               successText="验证通过"
 41 |               handlerIcon="el-icon-d-arrow-right"
 42 |               successIcon="el-icon-circle-check"
 43 |               :width="375"
 44 |               handlerBg="#F5F7FA"
 45 |               :isPassing.sync="isPassing"
 46 |               @update:isPassing="updateIsPassing"
 47 |           ></drag-verify>
 48 |         </el-form-item>
 49 |         <el-form-item prop="token">
 50 |           <el-input v-model="ruleForm.token" placeholder="请输入令牌">
 51 |             <el-button slot="append" :disabled="submitDisabled" @click="getRegisterToken" class="el-icon-search"
 52 |                        title="获取令牌" style="color: red"></el-button>
 53 |           </el-input>
 54 |         </el-form-item>
 55 |         <el-form-item class="registerButtonWrapper">
 56 |           <el-button
 57 |               class="registerButton"
 58 |               type="primary"
 59 |               :disabled="submitDisabled"
 60 |               @click="submitForm('ruleForm')"
 61 |           >注册
 62 |           </el-button>
 63 |         </el-form-item>
 64 |       </el-form>
 65 |     </div>
 66 |   </div>
 67 | </template>
 68 | 
 69 | <script>
 70 | import CanvasNest from 'canvas-nest.js'
 71 | import DragVerify from '@/components/DragVerify.vue'
 72 | import {addUser, fetchRegisterToken} from '@/request/user.js'
 73 | 
 74 | // 配置
 75 | const config = {
 76 |   color: '230, 162, 60', // 线条颜色
 77 |   pointColor: '230, 162, 60', // 节点颜色
 78 |   opacity: 0.5, // 线条透明度
 79 |   count: 99, // 线条数量
 80 |   zIndex: -1 // 画面层级
 81 | }
 82 | 
 83 | export default {
 84 |   name: 'Register',
 85 |   components: {DragVerify},
 86 |   data() {
 87 |     return {
 88 |       registerTitle: '注册',
 89 |       ruleForm: {
 90 |         email: '',
 91 |         username: '',
 92 |         password: '',
 93 |         token: ''
 94 |       },
 95 |       rules: {
 96 |         username: [
 97 |           {required: true, message: '请输入用户名', trigger: 'blur'},
 98 |           {
 99 |             min: 4,
100 |             max: 16,
101 |             message: '长度在4到16个字符',
102 |             trigger: 'blur'
103 |           }
104 |         ],
105 |         password: [
106 |           {required: true, message: '请输入密码', trigger: 'blur'},
107 |           {
108 |             min: 7,
109 |             max: 20,
110 |             message: '长度在7到20个字符',
111 |             trigger: 'blur'
112 |           }
113 |         ],
114 |         email: [
115 |           {required: true, message: '请输入邮箱地址', trigger: 'blur'},
116 |           {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
117 |         ],
118 |         token: [
119 |           {required: true, message: '请输入令牌', trigger: 'blur'},
120 |           {
121 |             required: true,
122 |             pattern: /^\S{6}$/,
123 |             message: '非6位令牌',
124 |             trigger: 'blur'
125 |           }
126 |         ]
127 |       },
128 |       isPassing: false,
129 |       submitDisabled: true,
130 |     }
131 |   },
132 |   computed: {
133 |     url() {
134 |       let _url = this.$route.query.Rurl //获取路由前置守卫中next函数的参数，即登录后要去的页面
135 |       if (_url) {
136 |         //若登录之前有页面，则登录后仍然进入该页面
137 |         return _url
138 |       } else {
139 |         //若登录之前无页面，则登录后进入首页
140 |         return '/'
141 |       }
142 |     }
143 |   },
144 |   watch: {
145 |     //  已验证通过时，若重新输入邮箱、用户名或密码，滑动解锁恢复原样
146 |     'ruleForm.email'() {
147 |       this.isPassing = false
148 |       this.$refs.dragVerifyRef.reset()
149 |     },
150 |     'ruleForm.userName'() {
151 |       this.isPassing = false
152 |       this.$refs.dragVerifyRef.reset()
153 |     },
154 |     'ruleForm.password'() {
155 |       this.isPassing = false
156 |       this.$refs.dragVerifyRef.reset()
157 |     }
158 |   },
159 |   created() {
160 |     this.$nextTick(() => {
161 |       let element = document.getElementById('registerBackground')
162 |       new CanvasNest(element, config)
163 |     })
164 |   },
165 |   methods: {
166 |     //  滑动解锁完成
167 |     updateIsPassing(isPassing) {
168 |       if (isPassing) {
169 |         //  校验邮箱
170 |         this.$refs.ruleForm.validateField('email', emailError => {
171 |           if (emailError) {
172 |             this.submitDisabled = true
173 |           } else {
174 |             this.submitDisabled = false
175 |           }
176 |         })
177 |       } else {
178 |         this.submitDisabled = true
179 |       }
180 |     },
181 |     // 获取令牌
182 |     getRegisterToken() {
183 |       this.$message.success("正在获取令牌...")
184 |       fetchRegisterToken({email: this.ruleForm.email}).then(() => {
185 |         this.$message.success("令牌已发送至您的邮箱，请注意查收！")
186 |       }).catch(err => {
187 |         console.error(err)
188 |         this.$message.error(err.msg)
189 |       })
190 |     },
191 |     //  注册按钮
192 |     submitForm(formName) {
193 |       this.$refs[formName].validate(valid => {
194 |         if (valid) {
195 |           //  各项校验通过
196 |           let info = {
197 |             email: this.ruleForm.email,
198 |             username: this.ruleForm.username,
199 |             password: this.ruleForm.password,
200 |             token: this.ruleForm.token
201 |           }
202 |           addUser(info).then(() => {
203 |             //	这里的返回字段需要和后台重新商议
204 |             this.$notify({
205 |               title: '成功',
206 |               message: '注册成功！已跳转到登录页面',
207 |               type: 'success'
208 |             })
209 |             this.$refs[formName].resetFields();
210 |             this.$router.replace({path: '/login'})
211 |           }).catch(err => {
212 |             console.error(err)
213 |             this.$message.error("用户注册失败")
214 |           })
215 |         } else {
216 |           this.$message.error('请完善信息！')
217 |           return false
218 |         }
219 |       })
220 |     }
221 |   }
222 | }
223 | </script>
224 | <style lang="stylus" scoped>
225 | .registerWrapper
226 |   height: 500px !important
227 |   min-height: 500px !important
228 |   width: 100% !important
229 |   padding-top: 50px
230 | 
231 |   .formWrapper
232 |     width: 375px
233 |     margin: 0 auto
234 |     text-align: center
235 | 
236 |     .registerTitle
237 |       margin-bottom: 10px
238 |       font-weight: 300
239 |       font-size: 30px
240 |       color: #000
241 | 
242 |     .registerSystem
243 |       font-weight: 300
244 |       color: #999
245 | 
246 |     .demo-ruleForm
247 |       width: 100%
248 |       margin-top: 20px
249 | 
250 |       >>> .el-form-item__content
251 |         margin-left: 0 !important
252 | 
253 |       & >>> .el-input__inner
254 |         font-size: 16px
255 | 
256 |       .registerButtonWrapper
257 |         .registerButton
258 |           width: 100%
259 | 
260 |         & >>> .el-button
261 |           padding: 10px 90px
262 |           font-size: 16px
263 | 
264 |     .tip
265 |       width: 70%
266 |       margin-left: 86px
267 | </style>
268 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // 选项...
 3 |   publicPath: '/',
 4 | 
 5 |   //是否开启eslint校验
 6 |   lintOnSave: false,
 7 | 
 8 |   devServer: {
 9 |     disableHostCheck: true,
10 |     host: '127.0.0.1',
11 |     proxy: { //配置代理，解决跨域请求后台数据的问题
12 |       '/api': {
13 |         target: 'http://127.0.0.1:8848', //后台接口，连接本地服务
14 |         ws: true, //是否跨域
15 |         changeOrigin: true,
16 |         pathRewrite: {
17 |           '^/api':'/'
18 |         }
19 |       }
20 | 
21 |     }
22 |   },
23 | 
24 |   productionSourceMap: false,
25 | 
26 |   pluginOptions: {
27 |     'style-resources-loader': {
28 |       preProcessor: 'stylus',
29 |       patterns: []
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------