├── src ├── assets │ ├── base.scss │ ├── qq.png │ ├── login_bg.jpg │ ├── share_bg.png │ ├── login_img.png │ ├── music_cover.png │ ├── music_icon.png │ ├── icon │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont.woff2 │ │ ├── iconfont.css │ │ ├── iconfont.json │ │ └── demo.css │ ├── icon-image │ │ ├── clean.png │ │ ├── code.png │ │ ├── del.png │ │ ├── excel.png │ │ ├── exe.png │ │ ├── file.png │ │ ├── image.png │ │ ├── music.png │ │ ├── pause.png │ │ ├── pdf.png │ │ ├── ppt1.png │ │ ├── txt.png │ │ ├── video.png │ │ ├── word.png │ │ ├── zip.png │ │ ├── folder.png │ │ ├── no_data.png │ │ ├── others.png │ │ └── upload.png │ └── file.list.scss ├── views │ ├── QqLoginCallback.vue │ ├── UpdateAvatar.vue │ ├── admin │ │ ├── SysSettings.vue │ │ ├── UserList.vue │ │ └── FileList.vue │ ├── UpdatePassword.vue │ ├── main │ │ ├── ShareFile.vue │ │ └── Uploader.vue │ ├── webshare │ │ ├── ShareCheck.vue │ │ └── Share.vue │ ├── share │ │ └── Share.vue │ ├── recycle │ │ └── Recycle.vue │ ├── Framework.vue │ └── Login.vue ├── utils │ ├── Confirm.js │ ├── Message.js │ ├── Utils.js │ ├── Verify.js │ └── Request.js ├── App.vue ├── js │ └── CategoryInfo.js ├── components │ ├── NoData.vue │ ├── preview │ │ ├── PreviewPdf.vue │ │ ├── PreviewDoc.vue │ │ ├── PreviewImage.vue │ │ ├── PreviewExcel.vue │ │ ├── PreviewVideo.vue │ │ ├── PreviewMusic.vue │ │ ├── PreviewDownload.vue │ │ ├── PreviewTxt.vue │ │ └── Preview.vue │ ├── Avatar.vue │ ├── Icon.vue │ ├── Dialog.vue │ ├── AvatarUpload.vue │ ├── Window.vue │ ├── FolderSelect.vue │ ├── Table.vue │ └── Navigation.vue ├── main.js └── router │ └── index.js ├── public └── favicon.ico ├── .vscode └── extensions.json ├── vue.config.js ├── .gitignore ├── index.html ├── vite.config.js ├── package.json ├── README.md └── Share.vue /src/assets/base.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/qq.png -------------------------------------------------------------------------------- /src/assets/login_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/login_bg.jpg -------------------------------------------------------------------------------- /src/assets/share_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/share_bg.png -------------------------------------------------------------------------------- /src/assets/login_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/login_img.png -------------------------------------------------------------------------------- /src/assets/music_cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/music_cover.png -------------------------------------------------------------------------------- /src/assets/music_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/music_icon.png -------------------------------------------------------------------------------- /src/assets/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon/iconfont.ttf -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/icon-image/clean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/clean.png -------------------------------------------------------------------------------- /src/assets/icon-image/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/code.png -------------------------------------------------------------------------------- /src/assets/icon-image/del.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/del.png -------------------------------------------------------------------------------- /src/assets/icon-image/excel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/excel.png -------------------------------------------------------------------------------- /src/assets/icon-image/exe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/exe.png -------------------------------------------------------------------------------- /src/assets/icon-image/file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/file.png -------------------------------------------------------------------------------- /src/assets/icon-image/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/image.png -------------------------------------------------------------------------------- /src/assets/icon-image/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/music.png -------------------------------------------------------------------------------- /src/assets/icon-image/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/pause.png -------------------------------------------------------------------------------- /src/assets/icon-image/pdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/pdf.png -------------------------------------------------------------------------------- /src/assets/icon-image/ppt1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/ppt1.png -------------------------------------------------------------------------------- /src/assets/icon-image/txt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/txt.png -------------------------------------------------------------------------------- /src/assets/icon-image/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/video.png -------------------------------------------------------------------------------- /src/assets/icon-image/word.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/word.png -------------------------------------------------------------------------------- /src/assets/icon-image/zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/zip.png -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon/iconfont.woff -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/icon-image/folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/folder.png -------------------------------------------------------------------------------- /src/assets/icon-image/no_data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/no_data.png -------------------------------------------------------------------------------- /src/assets/icon-image/others.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/others.png -------------------------------------------------------------------------------- /src/assets/icon-image/upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HLH0423/EasyPan/HEAD/src/assets/icon-image/upload.png -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | //打包配置文件 2 | module.exports = { 3 | assetsDir: 'static', 4 | parallel: false, 5 | publicPath: './', 6 | }; -------------------------------------------------------------------------------- /src/views/QqLoginCallback.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 7 | 8 | 10 | -------------------------------------------------------------------------------- /src/utils/Confirm.js: -------------------------------------------------------------------------------- 1 | import { ElMessageBox } from 'element-plus' 2 | 3 | const confirm = (message, okfun) => { 4 | ElMessageBox.confirm(message, '提示', { 5 | confirmButtonText: '确定', 6 | cancelButtonText: '取消', 7 | type: 'info', 8 | }).then(() => { 9 | okfun() 10 | }).catch(() => {}) 11 | } 12 | 13 | export default confirm; -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | EasyPan 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/js/CategoryInfo.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "all": { 3 | accept: "*" 4 | }, 5 | "video": { 6 | accept: ".mp4,.avi,.rmvb,.mkv,.mov" 7 | }, 8 | "music": { 9 | accept: ".mp3,.wav,.wma,.mp2,.flac,.midi,.ra,.ape,.aac,.cda" 10 | }, 11 | "image": { 12 | accept: ".jpeg,.jpg,.png,.gif,.bmp,.dds,.psd,.pdt,.webp,.xmp,.svg,.tiff" 13 | }, 14 | "doc": { 15 | accept: ".pdf,.doc,.docx,.xls,.xlsx,.txt" 16 | }, 17 | "others": { 18 | accept: "*" 19 | }, 20 | } -------------------------------------------------------------------------------- /src/components/NoData.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 16 | 17 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | ], 11 | resolve: { 12 | alias: { 13 | '@': fileURLToPath(new URL('./src', 14 | import.meta.url)) 15 | } 16 | }, 17 | server: { 18 | port: 1024, 19 | hmr: true, 20 | proxy: { 21 | "/api": { 22 | target: "http://localhost:7090", 23 | changeOrigin: true, 24 | PathRewrite: { 25 | "^api": "/api" 26 | } 27 | } 28 | } 29 | } 30 | }) -------------------------------------------------------------------------------- /src/utils/Message.js: -------------------------------------------------------------------------------- 1 | import { ElMessage } from 'element-plus' 2 | 3 | // 将element中的Message消息提醒功能进行封装 4 | // 因为我们有不同种类的消息提醒，因此对 ELMessage 进行了简单封装方便使用 5 | const showMessage = (msg, callback, type) => { 6 | ElMessage({ 7 | type: type, 8 | message: msg, 9 | duration: 2000, 10 | onClose: () => { 11 | if (callback) { 12 | callback() 13 | } 14 | } 15 | }) 16 | } 17 | 18 | const message = { 19 | error: (msg, callback) => { 20 | showMessage(msg, callback, "error") 21 | }, 22 | success: (msg, callback) => { 23 | showMessage(msg, callback, "success") 24 | }, 25 | warning: (msg, callback) => { 26 | showMessage(msg, callback, "warning") 27 | } 28 | } 29 | 30 | export default message; -------------------------------------------------------------------------------- /src/components/preview/PreviewPdf.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 39 | 40 | 45 | -------------------------------------------------------------------------------- /src/utils/Utils.js: -------------------------------------------------------------------------------- 1 | // 将文件以字节为单位的转换为其他单位 2 | export default { 3 | size2Str: (limit) => { 4 | var size = ""; 5 | if (limit < 0.1 * 1024) { //小于0.1KB，则转化成B 6 | size = limit.toFixed(2) + "B" 7 | } else if (limit < 0.1 * 1024 * 1024) { //小于0.1MB，则转化成KB 8 | size = (limit / 1024).toFixed(2) + "KB" 9 | } else if (limit < 0.1 * 1024 * 1024 * 1024) { //小于0.1GB，则转化成MB 10 | size = (limit / (1024 * 1024)).toFixed(2) + "MB" 11 | } else { //其他转化成GB 12 | size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB" 13 | } 14 | var sizeStr = size + ""; //转成字符串 15 | var index = sizeStr.indexOf("."); //获取小数点处的索引 16 | var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值 17 | if (dou == "00") { //判断后两位是否为00，如果是则删除00 18 | return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2) 19 | } 20 | return size; 21 | }, 22 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "easypan-front", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@highlightjs/vue-plugin": "^2.1.0", 12 | "@moefe/vue-aplayer": "^2.0.0-beta.5", 13 | "aplayer": "^1.10.1", 14 | "axios": "^1.4.0", 15 | "docx-preview": "^0.1.16", 16 | "dplayer": "^1.27.1", 17 | "element-plus": "^2.3.6", 18 | "highlight.js": "^11.8.0", 19 | "js-md5": "^0.7.3", 20 | "sass": "^1.63.4", 21 | "sass-loader": "^13.3.2", 22 | "spark-md5": "^3.0.2", 23 | "vue": "^3.3.4", 24 | "vue-clipboard3": "^2.0.0", 25 | "vue-cookies": "^1.8.3", 26 | "vue-pdf-embed": "^1.1.6", 27 | "vue-router": "^4.2.2", 28 | "vue3-pdfjs": "^0.1.6", 29 | "xlsx": "^0.18.5" 30 | }, 31 | "devDependencies": { 32 | "@vitejs/plugin-vue": "^4.2.3", 33 | "vite": "^4.3.9" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/Avatar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 37 | 38 | 51 | -------------------------------------------------------------------------------- /src/components/preview/PreviewDoc.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 33 | 34 | 47 | -------------------------------------------------------------------------------- /src/utils/Verify.js: -------------------------------------------------------------------------------- 1 | const regs = { 2 | email: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, 3 | number: /^([0]|[1-9][0-9]*)$/, 4 | password: /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*_]{8,}$/, 5 | shareCode: /^[A-Za-z0-9]+$/ 6 | } 7 | const verify = (rule, value, reg, callback) => { 8 | if (value) { 9 | if (reg.test(value)) { 10 | callback() 11 | } else { 12 | callback(new Error(rule.message)) 13 | } 14 | } else { 15 | callback() 16 | } 17 | } 18 | 19 | export default { 20 | email: (rule, value, callback) => { 21 | return verify(rule, value, regs.email, callback) 22 | }, 23 | number: (rule, value, callback) => { 24 | return verify(rule, value, regs.number, callback) 25 | }, 26 | password: (rule, value, callback) => { 27 | return verify(rule, value, regs.password, callback) 28 | }, 29 | shareCode: (rule, value, callback) => { 30 | return verify(rule, value, regs.shareCode, callback) 31 | }, 32 | } 33 | -------------------------------------------------------------------------------- /src/components/preview/PreviewImage.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 45 | 46 | 53 | -------------------------------------------------------------------------------- /src/components/preview/PreviewExcel.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 35 | 36 | 53 | -------------------------------------------------------------------------------- /src/components/preview/PreviewVideo.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 51 | 52 | 64 | -------------------------------------------------------------------------------- /src/components/preview/PreviewMusic.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 57 | 58 | 81 | -------------------------------------------------------------------------------- /src/components/preview/PreviewDownload.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 50 | 51 | 73 | -------------------------------------------------------------------------------- /src/components/Icon.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 64 | 65 | 77 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | import Verify from './utils/Verify' 6 | import Message from './utils/Message' 7 | import Request from './utils/Request' 8 | import Confirm from './utils/Confirm' 9 | import Utils from './utils/Utils' 10 | 11 | 12 | //引入element plus 13 | import ElementPlus from 'element-plus' 14 | import 'element-plus/dist/index.css' 15 | //图标 图标在附件中 16 | import '@/assets/icon/iconfont.css' 17 | import '@/assets/base.scss' 18 | //引入cookies 19 | import VueCookies from 'vue-cookies' 20 | 21 | //引入代码高亮 22 | import HljsVuePlugin from '@highlightjs/vue-plugin' 23 | import "highlight.js/styles/atom-one-light.css"; 24 | import 'highlight.js/lib/common' 25 | 26 | // 自定义组件 27 | import Dialog from "@/components/Dialog.vue" 28 | import Avatar from "@/components/Avatar.vue" 29 | import Table from "@/components/Table.vue" 30 | import Icon from "@/components/Icon.vue" 31 | import NoData from "@/components/NoData.vue" 32 | import FolderSelect from "@/components/FolderSelect.vue" 33 | import Navigation from "@/components/Navigation.vue" 34 | import Preview from "@/components/preview/Preview.vue" 35 | import Window from "@/components/Window.vue" 36 | 37 | 38 | 39 | 40 | const app = createApp(App) 41 | 42 | app.use(router) 43 | app.use(ElementPlus) 44 | app.use(HljsVuePlugin) 45 | 46 | app.component('Dialog', Dialog) 47 | app.component('Avatar', Avatar) 48 | app.component('Table', Table) 49 | app.component('Icon', Icon) 50 | app.component('NoData', NoData) 51 | app.component('FolderSelect', FolderSelect) 52 | app.component('Navigation', Navigation) 53 | app.component('Preview', Preview) 54 | app.component('Window', Window) 55 | 56 | 57 | 58 | //配置全局变量 59 | app.config.globalProperties.Verify = Verify; 60 | app.config.globalProperties.Message = Message; 61 | app.config.globalProperties.Request = Request; 62 | app.config.globalProperties.Confirm = Confirm; 63 | app.config.globalProperties.Utils = Utils; 64 | app.config.globalProperties.VueCookies = VueCookies; 65 | 66 | app.config.globalProperties.globalInfo = { 67 | avatarUrl: "/api/getAvatar/", 68 | imageUrl: "/api/file/getImage/" 69 | } 70 | 71 | app.mount('#app') -------------------------------------------------------------------------------- /src/components/Dialog.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 78 | 79 | -------------------------------------------------------------------------------- /src/components/AvatarUpload.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 63 | 64 | -------------------------------------------------------------------------------- /src/components/preview/PreviewTxt.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 85 | 86 | 112 | -------------------------------------------------------------------------------- /src/views/UpdateAvatar.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | 34 | 35 | 103 | 104 | -------------------------------------------------------------------------------- /src/views/admin/SysSettings.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 97 | 98 | 104 | -------------------------------------------------------------------------------- /src/components/Window.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 72 | 73 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; /* Project id 3946741 */ 3 | src: url('iconfont.woff2?t=1680443314592') format('woff2'), 4 | url('iconfont.woff?t=1680443314592') format('woff'), 5 | url('iconfont.ttf?t=1680443314592') format('truetype'); 6 | } 7 | 8 | .iconfont { 9 | font-family: "iconfont" !important; 10 | font-size: 16px; 11 | font-style: normal; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | .icon-settings:before { 17 | content: "\e673"; 18 | } 19 | 20 | .icon-del:before { 21 | content: "\e636"; 22 | } 23 | 24 | .icon-checkcode:before { 25 | content: "\e626"; 26 | } 27 | 28 | .icon-account:before { 29 | content: "\e60a"; 30 | } 31 | 32 | .icon-password:before { 33 | content: "\e65d"; 34 | } 35 | 36 | .icon-doc:before { 37 | content: "\e882"; 38 | } 39 | 40 | .icon-import:before { 41 | content: "\e60e"; 42 | } 43 | 44 | .icon-link:before { 45 | content: "\e600"; 46 | } 47 | 48 | .icon-cancel:before { 49 | content: "\e772"; 50 | } 51 | 52 | .icon-revert:before { 53 | content: "\e60f"; 54 | } 55 | 56 | .icon-close3:before { 57 | content: "\e658"; 58 | } 59 | 60 | .icon-search:before { 61 | content: "\e65c"; 62 | } 63 | 64 | .icon-transfer:before { 65 | content: "\e6b4"; 66 | } 67 | 68 | .icon-refresh:before { 69 | content: "\e6a2"; 70 | } 71 | 72 | .icon-close2:before { 73 | content: "\e624"; 74 | } 75 | 76 | .icon-start:before { 77 | content: "\e625"; 78 | } 79 | 80 | .icon-pause:before { 81 | content: "\e629"; 82 | } 83 | 84 | .icon-ok:before { 85 | content: "\e613"; 86 | } 87 | 88 | .icon-clock:before { 89 | content: "\e7d7"; 90 | } 91 | 92 | .icon-close:before { 93 | content: "\e656"; 94 | } 95 | 96 | .icon-share:before { 97 | content: "\e65e"; 98 | } 99 | 100 | .icon-right1:before { 101 | content: "\e65b"; 102 | } 103 | 104 | .icon-error:before { 105 | content: "\e651"; 106 | } 107 | 108 | .icon-edit:before { 109 | content: "\e61f"; 110 | } 111 | 112 | .icon-share1:before { 113 | content: "\e86f"; 114 | } 115 | 116 | .icon-move:before { 117 | content: "\e67b"; 118 | } 119 | 120 | .icon-folder-add:before { 121 | content: "\e7d1"; 122 | } 123 | 124 | .icon-right:before { 125 | content: "\e7eb"; 126 | } 127 | 128 | .icon-download:before { 129 | content: "\e83a"; 130 | } 131 | 132 | .icon-upload:before { 133 | content: "\e83b"; 134 | } 135 | 136 | .icon-all:before { 137 | content: "\e6ff"; 138 | } 139 | 140 | .icon-cloude:before { 141 | content: "\e66d"; 142 | } 143 | 144 | .icon-movie2:before { 145 | content: "\e61c"; 146 | } 147 | 148 | .icon-more:before { 149 | content: "\e631"; 150 | } 151 | 152 | .icon-music:before { 153 | content: "\e6a1"; 154 | } 155 | 156 | .icon-video:before { 157 | content: "\e74f"; 158 | } 159 | 160 | .icon-image:before { 161 | content: "\e68d"; 162 | } 163 | 164 | .icon-pan:before { 165 | content: "\e6e2"; 166 | } 167 | 168 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | 3 | const router = createRouter({ 4 | history: createWebHistory( 5 | import.meta.env.BASE_URL), 6 | routes: [{ 7 | path: '/login', 8 | name: 'Login', 9 | component: () => 10 | import ("@/views/Login.vue") 11 | }, 12 | { 13 | path: '/', 14 | name: 'Framework', 15 | component: () => 16 | import ("@/views/Framework.vue"), 17 | children: [{ 18 | path: '/', 19 | redirect: "/main/all" 20 | }, 21 | { 22 | path: '/main/:category', 23 | name: '首页', 24 | meta: { 25 | needLogin: true, 26 | menuCode: "main" 27 | }, 28 | component: () => 29 | import ("@/views/main/Main.vue") 30 | }, 31 | { 32 | path: '/myshare', 33 | name: '我的分享', 34 | meta: { 35 | needLogin: true, 36 | menuCode: "share" 37 | }, 38 | component: () => 39 | import ("@/views/share/Share.vue") 40 | }, 41 | { 42 | path: '/recycle', 43 | name: '回收站', 44 | meta: { 45 | needLogin: true, 46 | menuCode: "recycle" 47 | }, 48 | component: () => 49 | import ("@/views/recycle/Recycle.vue") 50 | }, 51 | { 52 | path: '/settings/sysSetting', 53 | name: '系统设置', 54 | meta: { 55 | needLogin: true, 56 | menuCode: "settings" 57 | }, 58 | component: () => 59 | import ("@/views/admin/SysSettings.vue") 60 | }, 61 | { 62 | path: '/settings/userList', 63 | name: '用户管理', 64 | meta: { 65 | needLogin: true, 66 | menuCode: "settings" 67 | }, 68 | component: () => 69 | import ("@/views/admin/UserList.vue") 70 | }, 71 | { 72 | path: '/settings/fileList', 73 | name: '用户文件', 74 | meta: { 75 | needLogin: true, 76 | menuCode: "settings" 77 | }, 78 | component: () => 79 | import ("@/views/admin/FileList.vue") 80 | }, 81 | ] 82 | }, 83 | { 84 | path: '/shareCheck/:shareId', 85 | name: '分享校验', 86 | component: () => 87 | import ("@/views/webshare/ShareCheck.vue") 88 | }, 89 | { 90 | path: '/share/:shareId', 91 | name: '分享', 92 | component: () => 93 | import ("@/views/webshare/Share.vue") 94 | }, 95 | ] 96 | }) 97 | 98 | export default router -------------------------------------------------------------------------------- /src/assets/file.list.scss: -------------------------------------------------------------------------------- 1 | .top { 2 | margin-top: 20px; 3 | .top-op { 4 | display: flex; 5 | align-items: center; 6 | .btn { 7 | margin-right: 10px; 8 | } 9 | .search-panel { 10 | margin-left: 10px; 11 | width: 300px; 12 | } 13 | .icon-refresh { 14 | cursor: pointer; 15 | margin-left: 10px; 16 | } 17 | .not-allow { 18 | background: #d2d2d2 !important; 19 | cursor: not-allowed; 20 | } 21 | } 22 | } 23 | 24 | .file-list { 25 | .file-item { 26 | display: flex; 27 | align-items: center; 28 | padding: 6px 0px; 29 | .file-name { 30 | margin-left: 8px; 31 | flex: 1; 32 | width: 0; 33 | overflow: hidden; 34 | // 当对象内文本溢出时显示省略标记(...) 35 | text-overflow: ellipsis; 36 | // 不换行 强行文本在同一行显示 37 | white-space: nowrap; 38 | span { 39 | cursor: pointer; 40 | &:hover { 41 | color: #06a7ff; 42 | } 43 | } 44 | .transfer-status { 45 | font-size: 13px; 46 | margin-left: 10px; 47 | color: #e6a23c; 48 | } 49 | .transfer-fail { 50 | color: #f75000; 51 | } 52 | } 53 | .edit-panel { 54 | flex: 1; 55 | width: 0; 56 | display: flex; 57 | align-items: center; 58 | margin: 0px 5px; 59 | .iconfont { 60 | margin-left: 10px; 61 | background: #0c95f7; 62 | color: #fff; 63 | padding: 3px 5px; 64 | border-radius: 5px; 65 | cursor: pointer; 66 | } 67 | .not-allow { 68 | cursor: not-allowed; 69 | background: #7cb1d7; 70 | color: #ddd; 71 | text-decoration: none; 72 | } 73 | } 74 | .op { 75 | width: 280px; 76 | margin-left: 15px; 77 | .iconfont { 78 | font-size: 13px; 79 | margin-left: 5px; 80 | color: #06a7ff; 81 | cursor: pointer; 82 | } 83 | .iconfont::before { 84 | margin-right: 1px; 85 | } 86 | } 87 | } 88 | } 89 | 90 | // justify-content 设置主轴上的子元素排列方式 91 | // align-content 设置侧轴上的子元素的排列方式（多行） 92 | .no-data { 93 | // vh就是当前屏幕可见高度的1% 94 | // height:100vh == height:100%; 95 | // calc(100vh - 150px)表示整个浏览器窗口高度减去150px的大小 96 | height: calc(100vh - 150px); 97 | display: flex; 98 | // align-items 设置侧轴上的子元素的排列方式（单行） 99 | align-items: center; 100 | // 设置主轴上的子元素排列方式 101 | justify-content: center; 102 | .no-data-inner { 103 | text-align: center; 104 | .tips { 105 | margin-top: 10px; 106 | } 107 | .op-list { 108 | margin-top: 20px; 109 | display: flex; 110 | justify-content: center; 111 | align-items: center; 112 | .op-item { 113 | cursor: pointer; 114 | width: 100px; 115 | height: 100px; 116 | margin: 0px 10px; 117 | padding: 5px 0px; 118 | background: rgb(241, 241, 241); 119 | } 120 | } 121 | } 122 | } -------------------------------------------------------------------------------- /src/views/UpdatePassword.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 137 | 138 | -------------------------------------------------------------------------------- /src/components/FolderSelect.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 125 | 126 | 156 | -------------------------------------------------------------------------------- /src/utils/Request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | // 封装 HTTP 请求 3 | 4 | // 引入loading加载 5 | import { ElLoading } from 'element-plus' 6 | 7 | import router from '@/router' 8 | 9 | // 引入Message消息提示封装后的文件 10 | import Message from '../utils/Message' 11 | 12 | // form表单的内容类型 13 | // 用于定义网络文件的类型和网页的编码 14 | const contentTypeForm = 'application/x-www-form-urlencoded;charset=UTF-8' 15 | const contentTypeJson = 'application/json' 16 | 17 | const responseTypeJson = "json" 18 | 19 | let loading = null; 20 | const instance = axios.create({ 21 | baseURL: '/api', 22 | // 超时时间 23 | timeout: 30 * 1000, 24 | }); 25 | //请求前拦截器 26 | instance.interceptors.request.use( 27 | (config) => { 28 | // 查看发送请求的接口有没有showLoading加载组件 29 | if (config.showLoading) { 30 | loading = ElLoading.service({ 31 | // 先设置lock 为true，动态添加数据的时候， 32 | // 请求没有成功之前会会出现一个正在加载标示，请求成功，显示数据，lock值变为false，锁定加载 33 | lock: true, 34 | // 显示在加载图标下方的加载文案 35 | text: '加载中......', 36 | // 遮罩背景色 37 | background: 'rgba(0, 0, 0, 0.7)', 38 | }); 39 | } 40 | return config; 41 | }, 42 | (error) => { 43 | if (config.showLoading && loading) { 44 | loading.close(); 45 | } 46 | Message.error("请求发送失败"); 47 | return Promise.reject("请求发送失败"); 48 | } 49 | ); 50 | //请求后拦截器 51 | instance.interceptors.response.use( 52 | (response) => { 53 | const { showLoading, errorCallback, showError = true, responseType } = response.config; 54 | // 之前出现了请求且请求已经发送完毕，将loading遮罩关闭 55 | if (showLoading && loading) { 56 | loading.close() 57 | } 58 | const responseData = response.data; 59 | // ArrayBuffer 对象代表储存二进制数据的一段内存 60 | // Blob 对象表示一个二进制文件的数据内容，通常用来读写文件，比如一个图片文件的内容就可以通过 Blob 对象读写。 61 | if (responseType == "arraybuffer" || responseType == "blob") { 62 | return responseData; 63 | } 64 | //正常请求 65 | if (responseData.code == 200) { 66 | return responseData; 67 | } else if (responseData.code == 901) { 68 | //登录超时 自动跳转到原来的页面 69 | router.push("/login?redirectUrl=" + encodeURI(router.currentRoute.value.path)); 70 | return Promise.reject({ showError: false, msg: "登录超时" }); 71 | } else { 72 | //其他错误 73 | if (errorCallback) { 74 | errorCallback(responseData.info); 75 | } 76 | return Promise.reject({ showError: showError, msg: responseData.info }); 77 | } 78 | }, 79 | (error) => { 80 | if (error.config.showLoading && loading) { 81 | loading.close(); 82 | } 83 | return Promise.reject({ showError: true, msg: "网络异常" }) 84 | } 85 | ); 86 | 87 | const request = (config) => { 88 | const { url, params, dataType, showLoading = true, responseType = responseTypeJson } = config; 89 | let contentType = contentTypeForm; 90 | let formData = new FormData(); // 创建form对象 91 | for (let key in params) { 92 | formData.append(key, params[key] == undefined ? "" : params[key]); 93 | } 94 | if (dataType != null && dataType == 'json') { 95 | contentType = contentTypeJson; 96 | } 97 | let headers = { 98 | 'Content-Type': contentType, 99 | 'X-Requested-With': 'XMLHttpRequest', 100 | } 101 | 102 | return instance.post(url, formData, { 103 | // 进度更新 104 | onUploadProgress: (event) => { 105 | if (config.uploadProgressCallback) { 106 | config.uploadProgressCallback(event); 107 | } 108 | }, 109 | responseType: responseType, 110 | headers: headers, 111 | showLoading: showLoading, 112 | errorCallback: config.errorCallback, 113 | showError: config.showError 114 | }).catch(error => { 115 | console.log(error); 116 | if (error.showError) { 117 | Message.error(error.msg); 118 | } 119 | return null; 120 | }); 121 | }; 122 | 123 | export default request; -------------------------------------------------------------------------------- /src/components/preview/Preview.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 134 | 135 | 137 | -------------------------------------------------------------------------------- /src/views/main/ShareFile.vue: -------------------------------------------------------------------------------- 1 | 63 | 64 | 169 | 170 | 172 | -------------------------------------------------------------------------------- /src/views/webshare/ShareCheck.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 113 | 114 | 191 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 仿百度网盘项目 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | 6 | ## 项目设置 7 | 8 | ```sh 9 | npm install 10 | ``` 11 | 12 | ### 项目启动 13 | 14 | ```sh 15 | npm run dev 16 | ``` 17 | 18 | ### 项目构建 19 | 20 | ```sh 21 | npm run build 22 | ``` 23 | ## 项目架构 24 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/5a1e626c-d958-4df7-8627-06afa062f735) 25 | 26 | 27 | ## 注册登录页面 28 | 可以实现无账号时的注册，忘记密码时的重置密码以及有账号时的登录功能 29 | ###### 30 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/8822feec-68f9-4acb-98e1-3e6a6f002117) 31 | 32 | ### 找回密码 33 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/8ab4f9c4-ca5c-447c-9515-fece9df8c41e) 34 | 35 | ### 注册页面 36 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/e0d53b4e-4fc1-4395-8c80-d3eb6cba010d) 37 | 38 | ### 发送邮箱验证码 39 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/28df267a-95fb-423e-8d28-54f8205c4df6) 40 | 41 | 42 | ## 网盘主页 43 | 主要展示网盘中的文件列表，可实现上传、新建文件夹、批量删除、批量移动以及文件搜索的功能 44 | ###### 45 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/b4b2711e-dfdf-4724-8173-21d43a283e27) 46 | 47 | ### 批量上传文件 48 | 主要实现分片上传、秒传、断点续传以及取消上传的功能，可以展示文件上传的进度以及文件解析的进展 49 | ###### 50 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/d94b50b3-53da-4e10-b505-89e24544d131) 51 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/8c890417-2de5-4045-9371-14ff00ed0f6c) 52 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/ca9228ad-6cbe-4ca9-8717-bac494510dff) 53 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/8feca309-4cd4-45e0-b200-87ed38a130ae) 54 | 55 | 56 | ### 文件列表 57 | 58 | #### 新建文件夹 59 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/42e23991-ff6e-40c0-8b39-4de2b5e38ea9) 60 | 61 | #### 文件预览 62 | 支持视频播放、音频播放、图片预览、excel/doc/pdf 在线预览以及文本预览（代码后缀名默认使用文本预览） 63 | ###### 64 | 对于其他类型的文件（如 .zip 压缩文件），当点击文件名时，会提示点击下载 65 | ###### 66 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/7eab0864-a67d-4672-996a-b95923c46c46) 67 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/77a11eb2-4cb2-4171-a13a-59e2405af8b8) 68 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/4f0de4fa-7e5c-4133-9ffe-8d2ee4ae3cde) 69 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/2d4d9f4e-6f52-4eba-a78c-ef760e7286c0) 70 | 71 | 72 | #### 文件下载 73 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/e3c937f8-6799-44ca-a8e6-0008175d0d97) 74 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/7a774fd6-2332-4e69-b94e-0fc6f84f8c61) 75 | 76 | #### 文件分享 77 | 分享文件时，支持选择文件分享的有效期以及自定义提取码 78 | ###### 79 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/1d6c7ffd-cf2b-4826-be71-b36481831bb4) 80 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/8697edf2-b470-4de2-aa0b-6748b96e2c4e) 81 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/4032962d-9e8c-404f-bf13-672953e1e241) 82 | 83 | ##### 文件分享校验 84 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/1d2a4078-f4cb-4296-9f4d-b30d286ec952) 85 | ##### 查看分享的文件列表 86 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/b2ad50e8-9ee4-42e8-9454-29053f5d1ad3) 87 | ##### 预览分享的文件内容 88 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/4289179a-bb70-49a4-95d0-decf8aca1860) 89 | ##### 保存到我的网盘 90 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/d77d398d-17db-463f-85fe-45e3a0de8325) 91 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/92a3a3f5-bbe4-4383-a69c-22b970b60160) 92 | 93 | 94 | #### 文件删除 95 | 支持单个文件的删除以及文件的批量删除，并将删除后的文件放入到回收站，可在10天内进行删除文件的还原 96 | 97 | ##### 单个文件的删除 98 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/1b5a778a-ca80-40a9-9688-77f460d90750) 99 | 100 | ##### 批量文件的删除 101 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/5bfd82a3-e603-45f6-a324-780d89fe8273) 102 | 103 | 104 | #### 文件重命名 105 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/ee8226c5-30c6-4f4f-87b6-8a374222fe6d) 106 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/86dd3b53-e426-47c1-9645-36032df1c19a) 107 | 108 | 109 | #### 文件移动 110 | 支持单个文件以及批量文件的移动 111 | ###### 112 | 如果移动到当前目录，会提示不可移动 113 | ###### 114 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/cc27e2ca-88fa-4ce1-b039-9adf70dcc2e2) 115 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/2464e86d-2885-458d-b090-f5736852146b) 116 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/aedf4545-a225-4680-aef2-47d5101137e0) 117 | 118 | 119 | ## 分享页面 120 | 可实现复制分享链接以及取消分享的功能 121 | ###### 122 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/d7ae2161-7997-4943-8058-629fc012d3c7) 123 | 124 | 125 | ## 回收站页面 126 | 可实现还原删除的文件以及彻底删除文件的功能 127 | ###### 128 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/a8b4f019-8c4f-419b-bf9f-6735ece4afd8) 129 | 130 | ## 设置（管理员）页面 131 | 该页面只允许具有管理员身份的账号进行控制更改 132 | ###### 133 | 可实现查看用户所有文件、用户管理以及系统设置等功能 134 | 135 | ### 用户文件 136 | 主要实现文件的搜索、文件的批量删除以及文件的预览功能 137 | ###### 138 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/9c47d2df-ef1b-44d3-ad23-1c5dd48abcb9) 139 | 140 | ### 用户管理 141 | 主要展示了当前已注册的用户信息，支持根据用户昵称以及用户状态进行用户的查询 142 | ###### 143 | 可以对用户的使用空间进行分配以及对用户的状态进行控制 144 | ###### 145 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/46880d65-055a-4d42-a19d-b7cc9b4ade12) 146 | 147 | ### 系统设置 148 | 可以设置邮件的模板以及用户初始化空间大小 149 | ###### 150 | ![image](https://github.com/HLH0423/EasyPan/assets/54101102/27768001-74e7-4842-8c33-f0d5897c61bc) 151 | 152 | 153 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /src/components/Table.vue: -------------------------------------------------------------------------------- 1 | 89 | 90 | 187 | 188 | 201 | -------------------------------------------------------------------------------- /src/components/Navigation.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 202 | 203 | 223 | -------------------------------------------------------------------------------- /src/views/share/Share.vue: -------------------------------------------------------------------------------- 1 | 77 | 78 | 214 | 215 | 233 | -------------------------------------------------------------------------------- /src/views/recycle/Recycle.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 232 | 233 | 244 | -------------------------------------------------------------------------------- /src/views/admin/UserList.vue: -------------------------------------------------------------------------------- 1 | 101 | 102 | 252 | 253 | 268 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "3946741", 3 | "name": "easypan", 4 | "font_family": "iconfont", 5 | "css_prefix_text": "icon-", 6 | "description": "", 7 | "glyphs": [ 8 | { 9 | "icon_id": "715362", 10 | "name": "settings", 11 | "font_class": "settings", 12 | "unicode": "e673", 13 | "unicode_decimal": 58995 14 | }, 15 | { 16 | "icon_id": "1440893", 17 | "name": "回收站", 18 | "font_class": "del", 19 | "unicode": "e636", 20 | "unicode_decimal": 58934 21 | }, 22 | { 23 | "icon_id": "553324", 24 | "name": "验证 验证码", 25 | "font_class": "checkcode", 26 | "unicode": "e626", 27 | "unicode_decimal": 58918 28 | }, 29 | { 30 | "icon_id": "2127118", 31 | "name": "账户", 32 | "font_class": "account", 33 | "unicode": "e60a", 34 | "unicode_decimal": 58890 35 | }, 36 | { 37 | "icon_id": "12779504", 38 | "name": "password", 39 | "font_class": "password", 40 | "unicode": "e65d", 41 | "unicode_decimal": 58973 42 | }, 43 | { 44 | "icon_id": "9626991", 45 | "name": "文档", 46 | "font_class": "doc", 47 | "unicode": "e882", 48 | "unicode_decimal": 59522 49 | }, 50 | { 51 | "icon_id": "10885271", 52 | "name": "导入", 53 | "font_class": "import", 54 | "unicode": "e60e", 55 | "unicode_decimal": 58894 56 | }, 57 | { 58 | "icon_id": "9223527", 59 | "name": "link", 60 | "font_class": "link", 61 | "unicode": "e600", 62 | "unicode_decimal": 58880 63 | }, 64 | { 65 | "icon_id": "26867547", 66 | "name": "cancel", 67 | "font_class": "cancel", 68 | "unicode": "e772", 69 | "unicode_decimal": 59250 70 | }, 71 | { 72 | "icon_id": "21189968", 73 | "name": "还原", 74 | "font_class": "revert", 75 | "unicode": "e60f", 76 | "unicode_decimal": 58895 77 | }, 78 | { 79 | "icon_id": "29943", 80 | "name": "round_close_fill", 81 | "font_class": "close3", 82 | "unicode": "e658", 83 | "unicode_decimal": 58968 84 | }, 85 | { 86 | "icon_id": "29947", 87 | "name": "search", 88 | "font_class": "search", 89 | "unicode": "e65c", 90 | "unicode_decimal": 58972 91 | }, 92 | { 93 | "icon_id": "15066965", 94 | "name": "transfer", 95 | "font_class": "transfer", 96 | "unicode": "e6b4", 97 | "unicode_decimal": 59060 98 | }, 99 | { 100 | "icon_id": "16365914", 101 | "name": "转码", 102 | "font_class": "refresh", 103 | "unicode": "e6a2", 104 | "unicode_decimal": 59042 105 | }, 106 | { 107 | "icon_id": "2674473", 108 | "name": "关闭", 109 | "font_class": "close2", 110 | "unicode": "e624", 111 | "unicode_decimal": 58916 112 | }, 113 | { 114 | "icon_id": "2674474", 115 | "name": "播放", 116 | "font_class": "start", 117 | "unicode": "e625", 118 | "unicode_decimal": 58917 119 | }, 120 | { 121 | "icon_id": "2674483", 122 | "name": "暂停", 123 | "font_class": "pause", 124 | "unicode": "e629", 125 | "unicode_decimal": 58921 126 | }, 127 | { 128 | "icon_id": "1421450", 129 | "name": "ok", 130 | "font_class": "ok", 131 | "unicode": "e613", 132 | "unicode_decimal": 58899 133 | }, 134 | { 135 | "icon_id": "6151154", 136 | "name": "clock-fill", 137 | "font_class": "clock", 138 | "unicode": "e7d7", 139 | "unicode_decimal": 59351 140 | }, 141 | { 142 | "icon_id": "11903682", 143 | "name": "close", 144 | "font_class": "close", 145 | "unicode": "e656", 146 | "unicode_decimal": 58966 147 | }, 148 | { 149 | "icon_id": "300021", 150 | "name": "分享给好友icon", 151 | "font_class": "share", 152 | "unicode": "e65e", 153 | "unicode_decimal": 58974 154 | }, 155 | { 156 | "icon_id": "760480", 157 | "name": "ok", 158 | "font_class": "right1", 159 | "unicode": "e65b", 160 | "unicode_decimal": 58971 161 | }, 162 | { 163 | "icon_id": "14410256", 164 | "name": "icon_error", 165 | "font_class": "error", 166 | "unicode": "e651", 167 | "unicode_decimal": 58961 168 | }, 169 | { 170 | "icon_id": "1185453", 171 | "name": "edit", 172 | "font_class": "edit", 173 | "unicode": "e61f", 174 | "unicode_decimal": 58911 175 | }, 176 | { 177 | "icon_id": "6353306", 178 | "name": "share", 179 | "font_class": "share1", 180 | "unicode": "e86f", 181 | "unicode_decimal": 59503 182 | }, 183 | { 184 | "icon_id": "15838518", 185 | "name": "move", 186 | "font_class": "move", 187 | "unicode": "e67b", 188 | "unicode_decimal": 59003 189 | }, 190 | { 191 | "icon_id": "4766848", 192 | "name": "folder-add", 193 | "font_class": "folder-add", 194 | "unicode": "e7d1", 195 | "unicode_decimal": 59345 196 | }, 197 | { 198 | "icon_id": "4767011", 199 | "name": "right", 200 | "font_class": "right", 201 | "unicode": "e7eb", 202 | "unicode_decimal": 59371 203 | }, 204 | { 205 | "icon_id": "6151351", 206 | "name": "download", 207 | "font_class": "download", 208 | "unicode": "e83a", 209 | "unicode_decimal": 59450 210 | }, 211 | { 212 | "icon_id": "6151353", 213 | "name": "upload", 214 | "font_class": "upload", 215 | "unicode": "e83b", 216 | "unicode_decimal": 59451 217 | }, 218 | { 219 | "icon_id": "26721527", 220 | "name": "AppstoreFilled", 221 | "font_class": "all", 222 | "unicode": "e6ff", 223 | "unicode_decimal": 59135 224 | }, 225 | { 226 | "icon_id": "4562501", 227 | "name": "自治云", 228 | "font_class": "cloude", 229 | "unicode": "e66d", 230 | "unicode_decimal": 58989 231 | }, 232 | { 233 | "icon_id": "6050457", 234 | "name": "moviesel", 235 | "font_class": "movie2", 236 | "unicode": "e61c", 237 | "unicode_decimal": 58908 238 | }, 239 | { 240 | "icon_id": "741255", 241 | "name": "其他", 242 | "font_class": "more", 243 | "unicode": "e631", 244 | "unicode_decimal": 58929 245 | }, 246 | { 247 | "icon_id": "145741", 248 | "name": "音乐_填充", 249 | "font_class": "music", 250 | "unicode": "e6a1", 251 | "unicode_decimal": 59041 252 | }, 253 | { 254 | "icon_id": "212328", 255 | "name": "play_fill", 256 | "font_class": "video", 257 | "unicode": "e74f", 258 | "unicode_decimal": 59215 259 | }, 260 | { 261 | "icon_id": "14441151", 262 | "name": "image", 263 | "font_class": "image", 264 | "unicode": "e68d", 265 | "unicode_decimal": 59021 266 | }, 267 | { 268 | "icon_id": "34532161", 269 | "name": "网盘-copy", 270 | "font_class": "pan", 271 | "unicode": "e6e2", 272 | "unicode_decimal": 59106 273 | } 274 | ] 275 | } 276 | -------------------------------------------------------------------------------- /src/views/admin/FileList.vue: -------------------------------------------------------------------------------- 1 | 135 | 136 | 321 | 322 | 336 | -------------------------------------------------------------------------------- /src/assets/icon/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /Share.vue: -------------------------------------------------------------------------------- 1 | 128 | 129 | 319 | 320 | 398 | -------------------------------------------------------------------------------- /src/views/webshare/Share.vue: -------------------------------------------------------------------------------- 1 | 144 | 145 | 348 | 349 | 427 | -------------------------------------------------------------------------------- /src/views/main/Uploader.vue: -------------------------------------------------------------------------------- 1 | 120 | 121 | 395 | 396 | 470 | -------------------------------------------------------------------------------- /src/views/Framework.vue: -------------------------------------------------------------------------------- 1 | 144 | 145 | 366 | 367 | 516 | -------------------------------------------------------------------------------- /src/views/Login.vue: -------------------------------------------------------------------------------- 1 | 244 | 245 | 246 | 247 | 248 | 249 | 501 | 502 | 575 | --------------------------------------------------------------------------------