├── dist ├── web │ └── .gitkeep └── electron │ └── .gitkeep ├── static ├── .gitkeep ├── imgs │ ├── ZIP.png │ ├── Folder.png │ └── logo@2x.png └── mock │ └── fileList.json ├── src ├── renderer │ ├── assets │ │ ├── .gitkeep │ │ └── logo.png │ ├── components │ │ ├── panContent │ │ │ ├── panContent.scss │ │ │ └── panContent.vue │ │ ├── mainPage │ │ │ ├── mainPage.scss │ │ │ └── mainPage.vue │ │ ├── uploading │ │ │ └── uploading.vue │ │ ├── downloaded │ │ │ └── downloaded.vue │ │ ├── mainContent │ │ │ ├── mainContentController.ts │ │ │ └── mainContent.vue │ │ ├── panHeader │ │ │ ├── panHeader.vue │ │ │ └── panHeader.scss │ │ ├── LandingPage │ │ │ └── SystemInformation.vue │ │ ├── LandingPage.vue │ │ ├── floatingWindow │ │ │ └── floatingWindow.vue │ │ ├── downloadDemo │ │ │ └── downloadDemo.vue │ │ ├── v-bigIconList │ │ │ └── v-bigIconList.vue │ │ ├── downloading │ │ │ └── downloading.vue │ │ └── sideBar │ │ │ └── sideBar.vue │ ├── store │ │ ├── index.ts │ │ └── modules │ │ │ ├── index.ts │ │ │ └── Counter.ts │ ├── App.vue │ ├── main.ts │ ├── router │ │ └── index.ts │ └── basic │ │ ├── v-table │ │ └── v-table.vue │ │ └── v-contextMenu │ │ └── v-contextMenu.vue ├── vue-shim.d.ts ├── index.ejs ├── main │ ├── index.dev.ts │ └── index.ts ├── controller │ ├── database.ts │ └── downLoad.ts └── db │ └── datafile ├── .eslintignore ├── assets ├── pan.gif ├── pan.demo2.gif └── pan.demo3.gif ├── tslint.json ├── .gitignore ├── test ├── .eslintrc └── unit │ ├── specs │ └── LandingPage.spec.js │ ├── index.js │ └── karma.conf.js ├── README.md ├── tsconfig.json ├── appveyor.yml ├── .babelrc ├── .eslintrc.js ├── .electron-vue ├── dev-client.js ├── webpack.main.config.js ├── build.js ├── webpack.web.config.js ├── dev-runner.js └── webpack.renderer.config.js ├── .travis.yml └── package.json /dist/web/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/electron/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/renderer/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | test/unit/coverage/** 2 | test/unit/*.js 3 | test/e2e/*.js 4 | -------------------------------------------------------------------------------- /assets/pan.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyy62/electron-vue-pan/HEAD/assets/pan.gif -------------------------------------------------------------------------------- /assets/pan.demo2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyy62/electron-vue-pan/HEAD/assets/pan.demo2.gif -------------------------------------------------------------------------------- /assets/pan.demo3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyy62/electron-vue-pan/HEAD/assets/pan.demo3.gif -------------------------------------------------------------------------------- /static/imgs/ZIP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyy62/electron-vue-pan/HEAD/static/imgs/ZIP.png -------------------------------------------------------------------------------- /src/vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } -------------------------------------------------------------------------------- /static/imgs/Folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyy62/electron-vue-pan/HEAD/static/imgs/Folder.png -------------------------------------------------------------------------------- /static/imgs/logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyy62/electron-vue-pan/HEAD/static/imgs/logo@2x.png -------------------------------------------------------------------------------- /src/renderer/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyy62/electron-vue-pan/HEAD/src/renderer/assets/logo.png -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint-config-standard", 3 | "globals": { 4 | "require": true 5 | } 6 | } -------------------------------------------------------------------------------- /src/renderer/components/panContent/panContent.scss: -------------------------------------------------------------------------------- 1 | .panContent { 2 | display: flex; 3 | width: 100%; 4 | height: 100%; 5 | } -------------------------------------------------------------------------------- /src/renderer/components/mainPage/mainPage.scss: -------------------------------------------------------------------------------- 1 | .mainPage { 2 | height: 100%; 3 | width: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/electron/* 3 | dist/web/* 4 | build/* 5 | !build/icons 6 | coverage 7 | node_modules/ 8 | npm-debug.log 9 | npm-debug.log.* 10 | thumbs.db 11 | !.gitkeep 12 | -------------------------------------------------------------------------------- /test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "assert": true, 7 | "expect": true, 8 | "should": true, 9 | "__static": true 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/renderer/components/uploading/uploading.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/renderer/components/downloaded/downloaded.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # electron版百度网盘 2 | 3 | ## 项目介绍 4 | 用electron + vue2.x开发简易百度网盘PC版，实现简易界面和交互。 5 | 6 | ## 项目安装 7 | 8 | ``` bash 9 | # 安装依赖 10 | npm install / cnpm install 11 | 12 | # 启动调试 13 | npm run dev 14 | 15 | # 打包 16 | npm run build 17 | ``` 18 | ## 预览 19 | 20 | #### 主界面1 21 | ![](./assets/pan.gif) 22 | 23 | #### 主界面2 24 | ![](./assets/pan.demo2.gif) 25 | 26 | #### 浮动窗口 27 | ![](./assets/pan.demo3.gif) 28 | 29 | ## TODO 30 | - [ ] 尝试玩玩webassembly, 2019.11 31 | -------------------------------------------------------------------------------- /src/renderer/store/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | 4 | import { createPersistedState, createSharedMutations } from 'vuex-electron'; 5 | 6 | import modules from './modules'; 7 | 8 | Vue.use(Vuex) 9 | declare var process: any; 10 | 11 | export default new Vuex.Store({ 12 | modules, 13 | plugins: [ 14 | createPersistedState(), 15 | createSharedMutations() 16 | ], 17 | strict: process.env.NODE_ENV !== 'production' 18 | }); 19 | -------------------------------------------------------------------------------- /src/renderer/store/modules/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The file enables `@/store/index.js` to import all vuex modules 3 | * in a one-shot manner. There should not be any reason to edit this file. 4 | */ 5 | declare var require: any 6 | const files = require.context('.', false, /\.ts$/) 7 | const modules = {} 8 | 9 | files.keys().forEach(key => { 10 | if (key === './index.ts') return 11 | modules[key.replace(/(\.\/|\.ts)/g, '')] = files(key).default 12 | }) 13 | 14 | export default modules 15 | -------------------------------------------------------------------------------- /test/unit/specs/LandingPage.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import LandingPage from '@/components/LandingPage'; 3 | 4 | describe('LandingPage.vue', () => { 5 | it('should render correct contents', () => { 6 | const vm = new Vue({ 7 | el: document.createElement('div'), 8 | render: h => h(LandingPage) 9 | }).$mount(); 10 | 11 | expect(vm.$el.querySelector('.title').textContent).to.contain('Welcome to your new project!'); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/renderer/store/modules/Counter.ts: -------------------------------------------------------------------------------- 1 | const state = { 2 | main: 0 3 | }; 4 | 5 | const mutations = { 6 | DECREMENT_MAIN_COUNTER (state: any) { 7 | state.main-- 8 | }, 9 | INCREMENT_MAIN_COUNTER (state: any) { 10 | state.main++ 11 | } 12 | } 13 | 14 | const actions = { 15 | someAsyncTask ({ commit }: any) { 16 | // do something async 17 | console.log(12321312312) 18 | commit('INCREMENT_MAIN_COUNTER') 19 | } 20 | } 21 | 22 | export default { 23 | state, 24 | mutations, 25 | actions 26 | }; 27 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | Vue.config.devtools = false 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src/renderer', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /src/renderer/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | 15 | 34 | -------------------------------------------------------------------------------- /src/renderer/components/panContent/panContent.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": [ 3 | "node_modules" 4 | ], 5 | "compilerOptions": { 6 | "allowSyntheticDefaultImports": true, 7 | "experimentalDecorators": true, 8 | "module": "es6", 9 | "target": "es6", 10 | "moduleResolution": "node", 11 | "isolatedModules": true, 12 | "typeRoots": [ 13 | "./types", 14 | "./node_modules/vue/types" 15 | ], 16 | "lib": [ 17 | "dom", 18 | "es5", 19 | "es2015.promise", 20 | "es6" 21 | ], 22 | "sourceMap": true, 23 | "pretty": true 24 | } 25 | } -------------------------------------------------------------------------------- /src/renderer/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import axios from 'axios' 3 | import App from './App.vue' 4 | import router from './router/index' 5 | import store from './store/index' 6 | import electron from 'vue-electron'; 7 | import vContextMenu from '@/basic/v-contextMenu/v-contextMenu.vue'; 8 | 9 | declare var process: any; 10 | 11 | if (!process.env.IS_WEB) Vue.use(electron) 12 | Vue.prototype.$http = axios 13 | 14 | Vue.config.productionTip = false 15 | 16 | /* eslint-disable no-new */ 17 | new Vue({ 18 | components: { App, vContextMenu }, 19 | router, 20 | store, 21 | template: '' 22 | }).$mount('#app') 23 | -------------------------------------------------------------------------------- /src/renderer/components/mainPage/mainPage.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 26 | 27 | 30 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | # Commented sections below can be used to run tests on the CI server 2 | # https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing 3 | version: 0.1.{build} 4 | 5 | branches: 6 | only: 7 | - master 8 | 9 | image: Visual Studio 2017 10 | platform: 11 | - x64 12 | 13 | cache: 14 | - node_modules 15 | - '%APPDATA%\npm-cache' 16 | - '%USERPROFILE%\.electron' 17 | - '%USERPROFILE%\AppData\Local\Yarn\cache' 18 | 19 | init: 20 | - git config --global core.autocrlf input 21 | 22 | install: 23 | - ps: Install-Product node 8 x64 24 | - git reset --hard HEAD 25 | - yarn 26 | - node --version 27 | 28 | build_script: 29 | #- yarn test 30 | - yarn build 31 | 32 | test: off 33 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "comments": false, 3 | "env": { 4 | "test": { 5 | "presets": [ 6 | ["env", { 7 | "targets": { "node": 7 } 8 | }], 9 | "stage-0" 10 | ], 11 | "plugins": ["istanbul"] 12 | }, 13 | "main": { 14 | "presets": [ 15 | ["env", { 16 | "targets": { "node": 7 } 17 | }], 18 | "stage-0" 19 | ] 20 | }, 21 | "renderer": { 22 | "presets": [ 23 | ["env", { 24 | "modules": false 25 | }], 26 | "stage-0" 27 | ] 28 | }, 29 | "web": { 30 | "presets": [ 31 | ["env", { 32 | "modules": false 33 | }], 34 | "stage-0" 35 | ] 36 | } 37 | }, 38 | "plugins": ["transform-runtime"] 39 | } 40 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true, 9 | node: true 10 | }, 11 | extends: 'airbnb', 12 | globals: { 13 | __static: true 14 | }, 15 | plugins: [ 16 | 'html' 17 | ], 18 | 'rules': { 19 | // allow paren-less arrow functions 20 | 'arrow-parens': 0, 21 | // allow async-await 22 | 'generator-star-spacing': 0, 23 | // allow debugger during development 24 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 25 | 'indent': [2, 4], 26 | 'comma-dangle': [2, 'never'], 27 | 'no-plusplus': ["error", { 'allowForLoopAfterthoughts': true }], 28 | 'import/no-unresolved': 0, 29 | 'import/extensions': 'off' 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | pan 6 | <% if (htmlWebpackPlugin.options.nodeModules) { %> 7 | 8 | 11 | <% } %> 12 | 13 | 14 |
15 | 16 | <% if (!process.browser) { %> 17 | 20 | <% } %> 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/main/index.dev.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is used specifically and only for development. It installs 3 | * `electron-debug` & `vue-devtools`. There shouldn't be any need to 4 | * modify this file, but it can be used to extend your development 5 | * environment. 6 | */ 7 | 8 | /* eslint-disable */ 9 | /* tslint:disable */ 10 | 11 | // Install `electron-debug` with `devtron` 12 | require('electron-debug')({ showDevTools: true }) 13 | 14 | // Install `vue-devtools` 15 | require('electron').app.on('ready', () => { 16 | let installExtension = require('electron-devtools-installer') 17 | installExtension.default(installExtension.VUEJS_DEVTOOLS) 18 | .then(() => {}) 19 | .catch(err => { 20 | console.log('Unable to install `vue-devtools`: \n', err) 21 | }) 22 | }) 23 | 24 | import '../renderer/store/index.ts'; 25 | 26 | // Require `main` process to boot app 27 | // require('./index') 28 | import './index.ts' -------------------------------------------------------------------------------- /src/renderer/components/mainContent/mainContentController.ts: -------------------------------------------------------------------------------- 1 | class MainContentController { 2 | 3 | computeRows(datas: Array) { 4 | let width = document.body.offsetWidth - 200; 5 | let rowFiles = Math.floor(width / 128); 6 | let rowCount = Math.floor(datas.length / rowFiles); 7 | 8 | let rowsDatas = [], rowData = [], count = 0, row = 0; 9 | datas.forEach(data => { 10 | let innerData = data; 11 | innerData = Object.assign({}, innerData, { isChecked: false }); 12 | if (row <= rowFiles) { 13 | rowData.push(innerData); 14 | row += 1; 15 | } else if (count <= rowCount) { 16 | rowsDatas.push(rowData); 17 | rowData = []; 18 | count += 1; 19 | row = 0; 20 | } 21 | }); 22 | rowsDatas.push(rowData); 23 | return rowsDatas; 24 | } 25 | } 26 | 27 | export default new MainContentController; 28 | -------------------------------------------------------------------------------- /src/renderer/components/panHeader/panHeader.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 29 | 30 | 33 | -------------------------------------------------------------------------------- /.electron-vue/dev-client.js: -------------------------------------------------------------------------------- 1 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 2 | 3 | hotClient.subscribe(event => { 4 | /** 5 | * Reload browser when HTMLWebpackPlugin emits a new index.html 6 | * 7 | * Currently disabled until jantimon/html-webpack-plugin#680 is resolved. 8 | * https://github.com/SimulatedGREG/electron-vue/issues/437 9 | * https://github.com/jantimon/html-webpack-plugin/issues/680 10 | */ 11 | // if (event.action === 'reload') { 12 | // window.location.reload() 13 | // } 14 | 15 | /** 16 | * Notify `mainWindow` when `main` process is compiling, 17 | * giving notice for an expected reload of the `electron` process 18 | */ 19 | if (event.action === 'compiling') { 20 | document.body.innerHTML += ` 21 | 34 | 35 |
36 | Compiling Main Process... 37 |
38 | ` 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | # Commented sections below can be used to run tests on the CI server 2 | # https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing 3 | osx_image: xcode8.3 4 | sudo: required 5 | dist: trusty 6 | language: c 7 | matrix: 8 | include: 9 | - os: osx 10 | - os: linux 11 | env: CC=clang CXX=clang++ npm_config_clang=1 12 | compiler: clang 13 | cache: 14 | directories: 15 | - node_modules 16 | - "$HOME/.electron" 17 | - "$HOME/.cache" 18 | addons: 19 | apt: 20 | packages: 21 | - libgnome-keyring-dev 22 | - icnsutils 23 | #- xvfb 24 | before_install: 25 | - mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([ 26 | "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz 27 | | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull 28 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi 29 | install: 30 | #- export DISPLAY=':99.0' 31 | #- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & 32 | - nvm install 7 33 | - curl -o- -L https://yarnpkg.com/install.sh | bash 34 | - source ~/.bashrc 35 | - npm install -g xvfb-maybe 36 | - yarn 37 | script: 38 | #- xvfb-maybe node_modules/.bin/karma start test/unit/karma.conf.js 39 | - yarn run build 40 | branches: 41 | only: 42 | - master 43 | -------------------------------------------------------------------------------- /src/controller/database.ts: -------------------------------------------------------------------------------- 1 | import Datastore from 'nedb'; 2 | import { debug } from 'util'; 3 | const path = require('path'); 4 | 5 | class Database { 6 | db = new Datastore(); 7 | 8 | constructor() { 9 | this.init(); 10 | } 11 | 12 | private init() { 13 | this.db = new Datastore({ 14 | filename: path.join(__dirname, '../db/datafile') 15 | }); 16 | this.db.loadDatabase(function (err) { // Callback is optional 17 | // Now commands will be executed 18 | debugger; 19 | }); 20 | } 21 | 22 | public insert(rowDatas: []) { 23 | this.db.insert([{index: 1, rowDatas: rowDatas}], function (err, newDocs) { 24 | // Two documents were inserted in the database 25 | // newDocs is an array with these documents, augmented with their _id 26 | debugger; 27 | }); 28 | } 29 | 30 | public read(cb:([]) => any) { 31 | this.db.find({}, function (err, docs) { 32 | debugger; 33 | }); 34 | this.db.find({ index: 1 }, function (err, docs) { 35 | // docs is an array containing documents Mars, Earth, Jupiter 36 | // If no document is found, docs is equal to [] 37 | debugger; 38 | cb(docs[0]); 39 | }); 40 | } 41 | 42 | public update(rowDatas: []) { 43 | this.db.update({ rowDatas: rowDatas }, {}, function () { 44 | // The document will not be modified 45 | debugger; 46 | }); 47 | } 48 | } 49 | 50 | export default Database; -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path') 4 | const merge = require('webpack-merge') 5 | const webpack = require('webpack') 6 | 7 | const baseConfig = require('../../.electron-vue/webpack.renderer.config') 8 | const projectRoot = path.resolve(__dirname, '../../src/renderer') 9 | 10 | // Set BABEL_ENV to use proper preset config 11 | process.env.BABEL_ENV = 'test' 12 | 13 | let webpackConfig = merge(baseConfig, { 14 | devtool: '#inline-source-map', 15 | plugins: [ 16 | new webpack.DefinePlugin({ 17 | 'process.env.NODE_ENV': '"testing"' 18 | }) 19 | ] 20 | }) 21 | 22 | // don't treat dependencies as externals 23 | delete webpackConfig.entry 24 | delete webpackConfig.externals 25 | delete webpackConfig.output.libraryTarget 26 | 27 | // apply vue option to apply isparta-loader on js 28 | webpackConfig.module.rules 29 | .find(rule => rule.use.loader === 'vue-loader').use.options.loaders.js = 'babel-loader' 30 | 31 | module.exports = config => { 32 | config.set({ 33 | browsers: ['visibleElectron'], 34 | client: { 35 | useIframe: false 36 | }, 37 | coverageReporter: { 38 | dir: './coverage', 39 | reporters: [ 40 | { type: 'lcov', subdir: '.' }, 41 | { type: 'text-summary' } 42 | ] 43 | }, 44 | customLaunchers: { 45 | 'visibleElectron': { 46 | base: 'Electron', 47 | flags: ['--show'] 48 | } 49 | }, 50 | frameworks: ['mocha', 'chai'], 51 | files: ['./index.js'], 52 | preprocessors: { 53 | './index.js': ['webpack', 'sourcemap'] 54 | }, 55 | reporters: ['spec', 'coverage'], 56 | singleRun: true, 57 | webpack: webpackConfig, 58 | webpackMiddleware: { 59 | noInfo: true 60 | } 61 | }) 62 | } 63 | -------------------------------------------------------------------------------- /src/renderer/components/panHeader/panHeader.scss: -------------------------------------------------------------------------------- 1 | .pan-header { 2 | min-height: 50px; 3 | width: 100%; 4 | background: rgb(244, 244, 244); 5 | border: 0 solid rgb(211, 211, 211); 6 | border-bottom-width: 1px; 7 | 8 | &>div { 9 | position: relative; 10 | top: 20px; 11 | } 12 | 13 | .nav-buttons { 14 | margin-left: 8px; 15 | display: inline-block; 16 | 17 | input { 18 | width: 25px; 19 | height: 25px; 20 | border: 0.5px; 21 | background: white; 22 | border-radius: 5px; 23 | } 24 | } 25 | 26 | .function-buttons { 27 | margin-left: 140px; 28 | display: inline-block; 29 | 30 | .upload { 31 | width: 80px; 32 | height: 20px; 33 | border: 0.5px; 34 | position: relative; 35 | background: rgb(77, 137, 247); 36 | border-radius: 5px; 37 | color: white; 38 | } 39 | 40 | .new-file { 41 | width: 100px; 42 | height: 20px; 43 | border: 0.5px; 44 | position: relative; 45 | background: white; 46 | margin-left: 5px; 47 | border-radius: 5px; 48 | color: rgb(107, 107, 107); 49 | } 50 | } 51 | 52 | .function-right-buttons { 53 | display: inline-flex; 54 | float: right; 55 | 56 | .search { 57 | width: 190px; 58 | margin-right: 5px; 59 | box-sizing: content-box; 60 | } 61 | 62 | .button { 63 | width: 25px; 64 | height: 25px; 65 | border: 0.5px; 66 | background: white; 67 | border-radius: 5px; 68 | margin-right: 5px; 69 | } 70 | 71 | .refresh { 72 | margin-left: 5px; 73 | } 74 | } 75 | } -------------------------------------------------------------------------------- /src/renderer/router/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import LandindPage from '@/components/LandingPage.vue' 4 | import vBigIconList from '@/components/v-bigIconList/v-bigIconList.vue' 5 | import vTable from '@/basic/v-table/v-table.vue' 6 | import floatingWindow from '@/components/floatingWindow/floatingWindow.vue' 7 | import downloadDemo from '@/components/downloadDemo/downloadDemo.vue' 8 | 9 | Vue.use(Router) 10 | 11 | export default new Router({ 12 | routes: [ 13 | { 14 | path: '/home', 15 | name: 'landing-page', 16 | redirect: '/home/all/table', 17 | component: require('@/components/LandingPage').default, 18 | children: [ 19 | { 20 | path: 'all/table', 21 | name: 'all', 22 | component: require('@/components/v-bigIconList/v-bigIconList').default 23 | }, 24 | { 25 | path: 'all/bar', 26 | name: 'all', 27 | component: require('@/basic/v-table/v-table').default 28 | }, 29 | { 30 | path: 'uploading', 31 | name: 'uploading', 32 | component: require('@/components/uploading/uploading').default 33 | }, 34 | { 35 | path: 'downloading', 36 | name: 'downloading', 37 | component: require('@/components/downloading/downloading').default 38 | }, 39 | { 40 | path: 'downloaded', 41 | name: 'downloaded', 42 | component: require('@/components/downloaded/downloaded').default 43 | } 44 | ] 45 | }, 46 | { 47 | path: '/floating/window', 48 | name: 'floating-window', 49 | component: require('@/components/floatingWindow/floatingWindow').default 50 | }, 51 | { 52 | path: '/downloaddemo', 53 | name: 'downloaddemo', 54 | component: downloadDemo 55 | } 56 | ] 57 | }) 58 | -------------------------------------------------------------------------------- /src/renderer/components/LandingPage/SystemInformation.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 47 | 48 | 74 | -------------------------------------------------------------------------------- /src/renderer/components/LandingPage.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 20 | 21 | 92 | -------------------------------------------------------------------------------- /src/db/datafile: -------------------------------------------------------------------------------- 1 | {"index":1,"rowDatas":[[{"name":"test1","isDir":true,"size":2000,"date":"2017.01.01 20:30:21","isChecked":false},{"name":"test2","isDir":false,"type":"ZIP","size":8000,"date":"2017.05.12 15:23:45","isChecked":false},{"name":"test3","isDir":false,"type":"ZIP","size":10000,"date":"2015.11.08 07:34:48","isChecked":false},{"name":"test5","isDir":true,"size":5400,"date":"2018.11.01 02:23:17","isChecked":false},{"name":"test6","isDir":false,"type":"ZIP","size":3200,"date":"2018.06.07 09:33:12","isChecked":false},{"name":"test1","isDir":true,"size":2000,"date":"2017.01.01 20:30:21","isChecked":false}],[{"name":"test3","isDir":false,"type":"ZIP","size":10000,"date":"2015.11.08 07:34:48","isChecked":false},{"name":"test5","isDir":false,"type":"ZIP","size":5400,"date":"2018.11.01 02:23:17","isChecked":false},{"name":"test5","isDir":true,"size":5400,"date":"2018.11.01 02:23:17","isChecked":false},{"name":"test6","isDir":false,"type":"ZIP","size":3200,"date":"2018.06.07 09:33:12","isChecked":false},{"name":"test1","isDir":true,"size":2000,"date":"2017.01.01 20:30:21","isChecked":false},{"name":"test2","isDir":false,"type":"ZIP","size":8000,"date":"2017.05.12 15:23:45","isChecked":false}],[{"name":"test5","isDir":true,"size":5400,"date":"2018.11.01 02:23:17","isChecked":false},{"name":"test1","isDir":true,"size":2000,"date":"2017.01.01 20:30:21","isChecked":false},{"name":"我能下载点我！！！","isDir":false,"type":"ZIP","fileLink":"","size":8000,"date":"2017.05.12 15:23:45","isChecked":false},{"name":"test3","isDir":false,"type":"ZIP","size":10000,"date":"2015.11.08 07:34:48","isChecked":false},{"name":"test5","isDir":true,"size":5400,"date":"2018.11.01 02:23:17","isChecked":false},{"name":"test6","isDir":false,"type":"ZIP","size":3200,"date":"2018.06.07 09:33:12","isChecked":false}],[{"name":"zip2","isDir":false,"type":"ZIP","size":5400,"date":"2018.04.02 01:34:01","isChecked":false},{"name":"zip3","isDir":false,"type":"ZIP","size":5400,"date":"2018.11.12 16:34:24","isChecked":false},{"name":"zip4","isDir":false,"type":"ZIP","size":5400,"date":"2017.01.12 18:23:43","isChecked":false}]],"_id":"WNH5b8DvYivZHttW"} 2 | -------------------------------------------------------------------------------- /src/renderer/components/floatingWindow/floatingWindow.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 50 | 51 | 83 | -------------------------------------------------------------------------------- /.electron-vue/webpack.main.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'main' 4 | 5 | const path = require('path') 6 | const { dependencies } = require('../package.json') 7 | const webpack = require('webpack') 8 | 9 | const BabiliWebpackPlugin = require('babili-webpack-plugin') 10 | 11 | let mainConfig = { 12 | entry: { 13 | main: path.join(__dirname, '../src/main/index.ts') 14 | }, 15 | externals: [ 16 | ...Object.keys(dependencies || {}) 17 | ], 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.(js)$/, 22 | enforce: 'pre', 23 | exclude: /node_modules/, 24 | use: { 25 | loader: 'eslint-loader', 26 | options: { 27 | formatter: require('eslint-friendly-formatter') 28 | } 29 | } 30 | }, 31 | { 32 | test: /\.js$/, 33 | use: 'babel-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.node$/, 38 | use: 'node-loader' 39 | }, 40 | { 41 | test: /\.ts$/, 42 | exclude: /node_modules/, 43 | enforce: 'pre', 44 | loader: 'tslint-loader', 45 | options: { 46 | loader: 'tslint-loader', 47 | configFile: path.resolve(__dirname, '../tsconfig.json') 48 | 　　　　　} 49 | }, 50 | { 51 | test: /\.tsx?$/, 52 | loader: 'ts-loader', 53 | exclude: /node_modules/, 54 | options: { 55 | appendTsSuffixTo: [/\.vue$/], 56 | } 57 | }, 58 | ] 59 | }, 60 | node: { 61 | __dirname: process.env.NODE_ENV !== 'production', 62 | __filename: process.env.NODE_ENV !== 'production' 63 | }, 64 | output: { 65 | filename: '[name].js', 66 | libraryTarget: 'commonjs2', 67 | path: path.join(__dirname, '../dist/electron') 68 | }, 69 | plugins: [ 70 | new webpack.NoEmitOnErrorsPlugin() 71 | ], 72 | resolve: { 73 | extensions: ['.js', '.json', '.node', '.ts'] 74 | }, 75 | target: 'electron-main' 76 | } 77 | 78 | /** 79 | * Adjust mainConfig for development settings 80 | */ 81 | if (process.env.NODE_ENV !== 'production') { 82 | mainConfig.plugins.push( 83 | new webpack.DefinePlugin({ 84 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` 85 | }) 86 | ) 87 | } 88 | 89 | /** 90 | * Adjust mainConfig for production settings 91 | */ 92 | if (process.env.NODE_ENV === 'production') { 93 | mainConfig.plugins.push( 94 | new BabiliWebpackPlugin(), 95 | new webpack.DefinePlugin({ 96 | 'process.env.NODE_ENV': '"production"' 97 | }) 98 | ) 99 | } 100 | 101 | module.exports = mainConfig 102 | -------------------------------------------------------------------------------- /src/renderer/components/mainContent/mainContent.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 60 | 61 | 98 | -------------------------------------------------------------------------------- /src/controller/downLoad.ts: -------------------------------------------------------------------------------- 1 | const { session, webContents } = require('electron').remote; 2 | 3 | class FileDownload { 4 | private filePath: string; 5 | private paused: boolean = false; 6 | private progressValue: number = 0; 7 | private totalBytes: number = 0; 8 | private receivedBytes: number = 0; 9 | private progress: string = ''; 10 | 11 | constructor(value: number, progress: string) { 12 | this.progress = progress; 13 | if (typeof value == "number") { 14 | this.progressValue = value; 15 | } 16 | if (typeof progress == "string") { 17 | this.progress = progress; 18 | } 19 | this.bind(); 20 | } 21 | 22 | private bind(): void { 23 | session.defaultSession.on('will-download', (event, item, webContents) => { 24 | // 设置保存路径,使Electron不提示保存对话框。 25 | console.log('/downloaded/'+ item.getFilename()) 26 | console.log('path:'+ item.getURL()) 27 | console.log(`total bytes: ${item.getTotalBytes()}`) 28 | this.totalBytes = item.getTotalBytes(); 29 | 30 | item.on('updated', (event, state) => { 31 | this.paused ? item.pause() : item.resume(); 32 | 33 | if (state === 'interrupted') { 34 | console.log('Download is interrupted but can be resumed') 35 | } else if (state === 'progressing') { 36 | if (item.isPaused()) { 37 | console.log('Download is paused') 38 | } else { 39 | this.receivedBytes = item.getReceivedBytes(); 40 | this.progressValue = +(item.getReceivedBytes() / item.getTotalBytes() * 100).toFixed(2); 41 | console.log(`Received bytes: ${item.getReceivedBytes()}`) 42 | console.log(`已下载占比: ${this.progressValue}%`) 43 | this.progress = this.progressValue + '%'; 44 | } 45 | } 46 | }) 47 | item.once('done', (event, state) => { 48 | if (state === 'completed') { 49 | console.log('Download successfully') 50 | } else { 51 | console.log(`Download failed: ${state}`) 52 | } 53 | }) 54 | }) 55 | } 56 | 57 | public download(x: string) : any; 58 | public download(x): any { 59 | if (typeof x == "string") { 60 | webContents.getFocusedWebContents().downloadURL(x); 61 | } 62 | else if (typeof x == 'undefined') { 63 | webContents.getFocusedWebContents().downloadURL(this.filePath); 64 | } 65 | } 66 | 67 | public pause(): void { 68 | this.paused = true; 69 | } 70 | 71 | public continue(): void{ 72 | this.paused = false; 73 | } 74 | 75 | public test(): string { 76 | return 'renderer' 77 | } 78 | 79 | public getProgressValue(): number { 80 | return +(this.receivedBytes / this.totalBytes * 100).toFixed(2) 81 | } 82 | 83 | public getFullProgressValue(): string { 84 | return `width: ${+(this.receivedBytes / this.totalBytes * 100).toFixed(2)}%`; 85 | } 86 | } 87 | 88 | export default FileDownload; -------------------------------------------------------------------------------- /src/renderer/components/downloadDemo/downloadDemo.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 60 | 61 | 114 | -------------------------------------------------------------------------------- /.electron-vue/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | const { say } = require('cfonts') 6 | const chalk = require('chalk') 7 | const del = require('del') 8 | const { spawn } = require('child_process') 9 | const webpack = require('webpack') 10 | const Multispinner = require('multispinner') 11 | 12 | 13 | const mainConfig = require('./webpack.main.config') 14 | const rendererConfig = require('./webpack.renderer.config') 15 | const webConfig = require('./webpack.web.config') 16 | 17 | const doneLog = chalk.bgGreen.white(' DONE ') + ' ' 18 | const errorLog = chalk.bgRed.white(' ERROR ') + ' ' 19 | const okayLog = chalk.bgBlue.white(' OKAY ') + ' ' 20 | const isCI = process.env.CI || false 21 | 22 | if (process.env.BUILD_TARGET === 'clean') clean() 23 | else if (process.env.BUILD_TARGET === 'web') web() 24 | else build() 25 | 26 | function clean () { 27 | del.sync(['build/*', '!build/icons', '!build/icons/icon.*']) 28 | console.log(`\n${doneLog}\n`) 29 | process.exit() 30 | } 31 | 32 | function build () { 33 | greeting() 34 | 35 | del.sync(['dist/electron/*', '!.gitkeep']) 36 | 37 | const tasks = ['main', 'renderer'] 38 | const m = new Multispinner(tasks, { 39 | preText: 'building', 40 | postText: 'process' 41 | }) 42 | 43 | let results = '' 44 | 45 | m.on('success', () => { 46 | process.stdout.write('\x1B[2J\x1B[0f') 47 | console.log(`\n\n${results}`) 48 | console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`) 49 | process.exit() 50 | }) 51 | 52 | pack(mainConfig).then(result => { 53 | results += result + '\n\n' 54 | m.success('main') 55 | }).catch(err => { 56 | m.error('main') 57 | console.log(`\n ${errorLog}failed to build main process`) 58 | console.error(`\n${err}\n`) 59 | process.exit(1) 60 | }) 61 | 62 | pack(rendererConfig).then(result => { 63 | results += result + '\n\n' 64 | m.success('renderer') 65 | }).catch(err => { 66 | m.error('renderer') 67 | console.log(`\n ${errorLog}failed to build renderer process`) 68 | console.error(`\n${err}\n`) 69 | process.exit(1) 70 | }) 71 | } 72 | 73 | function pack (config) { 74 | return new Promise((resolve, reject) => { 75 | config.mode = 'production' 76 | webpack(config, (err, stats) => { 77 | if (err) reject(err.stack || err) 78 | else if (stats.hasErrors()) { 79 | let err = '' 80 | 81 | stats.toString({ 82 | chunks: false, 83 | colors: true 84 | }) 85 | .split(/\r?\n/) 86 | .forEach(line => { 87 | err += ` ${line}\n` 88 | }) 89 | 90 | reject(err) 91 | } else { 92 | resolve(stats.toString({ 93 | chunks: false, 94 | colors: true 95 | })) 96 | } 97 | }) 98 | }) 99 | } 100 | 101 | function web () { 102 | del.sync(['dist/web/*', '!.gitkeep']) 103 | webConfig.mode = 'production' 104 | webpack(webConfig, (err, stats) => { 105 | if (err || stats.hasErrors()) console.log(err) 106 | 107 | console.log(stats.toString({ 108 | chunks: false, 109 | colors: true 110 | })) 111 | 112 | process.exit() 113 | }) 114 | } 115 | 116 | function greeting () { 117 | const cols = process.stdout.columns 118 | let text = '' 119 | 120 | if (cols > 85) text = 'lets-build' 121 | else if (cols > 60) text = 'lets-|build' 122 | else text = false 123 | 124 | if (text && !isCI) { 125 | say(text, { 126 | colors: ['yellow'], 127 | font: 'simple3d', 128 | space: false 129 | }) 130 | } else console.log(chalk.yellow.bold('\n lets-build')) 131 | console.log() 132 | } -------------------------------------------------------------------------------- /src/renderer/basic/v-table/v-table.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 81 | 82 | 140 | -------------------------------------------------------------------------------- /static/mock/fileList.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "test1", 4 | "isDir": true, 5 | "size": 2000, 6 | "date": "2017.01.01 20:30:21" 7 | }, 8 | { 9 | "name": "test2", 10 | "isDir": false, 11 | "type": "ZIP", 12 | "size": 8000, 13 | "date": "2017.05.12 15:23:45" 14 | }, 15 | { 16 | "name": "test3", 17 | "isDir": false, 18 | "type": "ZIP", 19 | "size": 10000, 20 | "date": "2015.11.08 07:34:48" 21 | }, 22 | { 23 | "name": "test5", 24 | "isDir": true, 25 | "size": 5400, 26 | "date": "2018.11.01 02:23:17" 27 | }, 28 | { 29 | "name": "test6", 30 | "isDir": false, 31 | "type": "ZIP", 32 | "size": 3200, 33 | "date": "2018.06.07 09:33:12" 34 | }, { 35 | "name": "test1", 36 | "isDir": true, 37 | "size": 2000, 38 | "date": "2017.01.01 20:30:21" 39 | }, 40 | { 41 | "name": "test2", 42 | "isDir": false, 43 | "type": "ZIP", 44 | "size": 8000, 45 | "date": "2017.05.12 15:23:45" 46 | }, 47 | { 48 | "name": "test3", 49 | "isDir": false, 50 | "type": "ZIP", 51 | "size": 10000, 52 | "date": "2015.11.08 07:34:48" 53 | }, 54 | { 55 | "name": "test5", 56 | "isDir": false, 57 | "type": "ZIP", 58 | "size": 5400, 59 | "date": "2018.11.01 02:23:17" 60 | }, 61 | { 62 | "name": "test5", 63 | "isDir": true, 64 | "size": 5400, 65 | "date": "2018.11.01 02:23:17" 66 | }, 67 | { 68 | "name": "test6", 69 | "isDir": false, 70 | "type": "ZIP", 71 | "size": 3200, 72 | "date": "2018.06.07 09:33:12" 73 | }, { 74 | "name": "test1", 75 | "isDir": true, 76 | "size": 2000, 77 | "date": "2017.01.01 20:30:21" 78 | }, 79 | { 80 | "name": "test2", 81 | "isDir": false, 82 | "type": "ZIP", 83 | "size": 8000, 84 | "date": "2017.05.12 15:23:45" 85 | }, 86 | { 87 | "name": "test3", 88 | "isDir": false, 89 | "type": "ZIP", 90 | "size": 10000, 91 | "date": "2015.11.08 07:34:48" 92 | }, 93 | { 94 | "name": "test5", 95 | "isDir": true, 96 | "size": 5400, 97 | "date": "2018.11.01 02:23:17" 98 | }, 99 | { 100 | "name": "test1", 101 | "isDir": true, 102 | "size": 2000, 103 | "date": "2017.01.01 20:30:21" 104 | }, 105 | { 106 | "name": "我能下载点我！！！", 107 | "isDir": false, 108 | "type": "ZIP", 109 | "fileLink": "", 110 | "size": 8000, 111 | "date": "2017.05.12 15:23:45" 112 | }, 113 | { 114 | "name": "test3", 115 | "isDir": false, 116 | "type": "ZIP", 117 | "size": 10000, 118 | "date": "2015.11.08 07:34:48" 119 | }, 120 | { 121 | "name": "test5", 122 | "isDir": true, 123 | "size": 5400, 124 | "date": "2018.11.01 02:23:17" 125 | }, 126 | { 127 | "name": "test6", 128 | "isDir": false, 129 | "type": "ZIP", 130 | "size": 3200, 131 | "date": "2018.06.07 09:33:12" 132 | }, 133 | { 134 | "name": "zip1", 135 | "isDir": false, 136 | "type": "ZIP", 137 | "size": 5400, 138 | "date": "2018.04.02 01:34:01" 139 | }, 140 | { 141 | "name": "zip2", 142 | "isDir": false, 143 | "type": "ZIP", 144 | "size": 5400, 145 | "date": "2018.04.02 01:34:01" 146 | }, 147 | { 148 | "name": "zip3", 149 | "isDir": false, 150 | "type": "ZIP", 151 | "size": 5400, 152 | "date": "2018.11.12 16:34:24" 153 | }, 154 | { 155 | "name": "zip4", 156 | "isDir": false, 157 | "type": "ZIP", 158 | "size": 5400, 159 | "date": "2017.01.12 18:23:43" 160 | } 161 | ] -------------------------------------------------------------------------------- /src/renderer/basic/v-contextMenu/v-contextMenu.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 87 | 88 | 129 | -------------------------------------------------------------------------------- /src/renderer/components/v-bigIconList/v-bigIconList.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 97 | 98 | 144 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pan", 3 | "version": "0.0.1", 4 | "author": "ironzhang", 5 | "description": "personal practice", 6 | "license": null, 7 | "main": "./dist/electron/main.js", 8 | "scripts": { 9 | "build": "node .electron-vue/build.js && electron-builder", 10 | "build:dir": "node .electron-vue/build.js && electron-builder --dir", 11 | "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js", 12 | "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js", 13 | "dev": "node .electron-vue/dev-runner.js", 14 | "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test", 15 | "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test", 16 | "pack": "npm run pack:main && npm run pack:renderer", 17 | "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js", 18 | "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js", 19 | "test": "npm run unit", 20 | "unit": "karma start test/unit/karma.conf.js", 21 | "postinstall": "npm run lint:fix" 22 | }, 23 | "build": { 24 | "productName": "pan", 25 | "appId": "com.example.yourapp", 26 | "directories": { 27 | "output": "build" 28 | }, 29 | "files": [ 30 | "dist/electron/**/*" 31 | ], 32 | "dmg": { 33 | "contents": [ 34 | { 35 | "x": 410, 36 | "y": 150, 37 | "type": "link", 38 | "path": "/Applications" 39 | }, 40 | { 41 | "x": 130, 42 | "y": 150, 43 | "type": "file" 44 | } 45 | ] 46 | }, 47 | "mac": { 48 | "icon": "build/icons/icon.icns" 49 | }, 50 | "win": { 51 | "icon": "build/icons/icon.ico" 52 | }, 53 | "linux": { 54 | "icon": "build/icons" 55 | } 56 | }, 57 | "dependencies": { 58 | "axios": "^0.18.0", 59 | "electron": "^4.0.3", 60 | "nedb": "^1.8.0", 61 | "vue": "^2.5.16", 62 | "vue-electron": "^1.0.6", 63 | "vue-router": "^3.0.1", 64 | "vuex": "^3.0.1", 65 | "vuex-electron": "^1.0.0" 66 | }, 67 | "devDependencies": { 68 | "ajv": "^6.5.0", 69 | "babel-core": "^6.26.3", 70 | "babel-eslint": "^8.2.3", 71 | "babel-loader": "^7.1.4", 72 | "babel-plugin-istanbul": "^4.1.6", 73 | "babel-plugin-transform-runtime": "^6.23.0", 74 | "babel-preset-env": "^1.7.0", 75 | "babel-preset-stage-0": "^6.24.1", 76 | "babel-register": "^6.26.0", 77 | "babili-webpack-plugin": "^0.1.2", 78 | "cfonts": "^2.1.2", 79 | "chai": "^4.1.2", 80 | "chalk": "^2.4.1", 81 | "copy-webpack-plugin": "^4.5.1", 82 | "cross-env": "^5.1.6", 83 | "css-loader": "^0.28.11", 84 | "del": "^3.0.0", 85 | "devtron": "^1.4.0", 86 | "electron": "^4.0.3", 87 | "electron-debug": "^1.5.0", 88 | "electron-devtools-installer": "^2.2.4", 89 | "eslint": "^4.19.1", 90 | "eslint-config-airbnb": "^17.1.0", 91 | "eslint-friendly-formatter": "^4.0.1", 92 | "eslint-loader": "^2.0.0", 93 | "eslint-plugin-html": "^4.0.3", 94 | "eslint-plugin-import": "^2.12.0", 95 | "eslint-plugin-jsx-a11y": "^6.1.2", 96 | "eslint-plugin-node": "^6.0.1", 97 | "eslint-plugin-promise": "^3.8.0", 98 | "eslint-plugin-react": "^7.12.4", 99 | "eslint-plugin-standard": "^3.1.0", 100 | "file-loader": "^1.1.11", 101 | "html-webpack-plugin": "^3.2.0", 102 | "inject-loader": "^4.0.1", 103 | "karma": "^2.0.2", 104 | "karma-chai": "^0.1.0", 105 | "karma-coverage": "^1.1.2", 106 | "karma-electron": "^6.0.0", 107 | "karma-mocha": "^1.3.0", 108 | "karma-sourcemap-loader": "^0.3.7", 109 | "karma-spec-reporter": "^0.0.32", 110 | "karma-webpack": "^3.0.0", 111 | "mini-css-extract-plugin": "0.4.0", 112 | "mocha": "^5.2.0", 113 | "multispinner": "^0.2.1", 114 | "node-loader": "^0.6.0", 115 | "node-sass": "^4.9.2", 116 | "sass-loader": "^7.0.3", 117 | "style-loader": "^0.21.0", 118 | "ts-loader": "^5.3.3", 119 | "tslint": "^5.12.1", 120 | "tslint-config-standard": "^8.0.1", 121 | "tslint-loader": "^3.5.4", 122 | "typescript": "^3.2.4", 123 | "url-loader": "^1.0.1", 124 | "vue-html-loader": "^1.2.4", 125 | "vue-loader": "^15.2.4", 126 | "vue-style-loader": "^4.1.0", 127 | "vue-template-compiler": "^2.5.16", 128 | "webpack": "^4.15.1", 129 | "webpack-cli": "^3.0.8", 130 | "webpack-dev-server": "^3.1.4", 131 | "webpack-hot-middleware": "^2.22.2", 132 | "webpack-merge": "^4.1.3" 133 | }, 134 | "__npminstall_done": false 135 | } 136 | -------------------------------------------------------------------------------- /.electron-vue/webpack.web.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'web' 4 | 5 | const path = require('path') 6 | const webpack = require('webpack') 7 | 8 | const BabiliWebpackPlugin = require('babili-webpack-plugin') 9 | const CopyWebpackPlugin = require('copy-webpack-plugin') 10 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 11 | const HtmlWebpackPlugin = require('html-webpack-plugin') 12 | const { VueLoaderPlugin } = require('vue-loader') 13 | 14 | let webConfig = { 15 | devtool: '#cheap-module-eval-source-map', 16 | entry: { 17 | web: path.join(__dirname, '../src/renderer/main.ts') 18 | }, 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.(js|vue)$/, 23 | enforce: 'pre', 24 | exclude: /node_modules/, 25 | use: { 26 | loader: 'eslint-loader', 27 | options: { 28 | formatter: require('eslint-friendly-formatter') 29 | } 30 | } 31 | }, 32 | { 33 | test: /\.scss$/, 34 | use: ['vue-style-loader', 'css-loader', 'sass-loader'] 35 | }, 36 | { 37 | test: /\.sass$/, 38 | use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'] 39 | }, 40 | { 41 | test: /\.less$/, 42 | use: ['vue-style-loader', 'css-loader', 'less-loader'] 43 | }, 44 | { 45 | test: /\.css$/, 46 | use: ['vue-style-loader', 'css-loader'] 47 | }, 48 | { 49 | test: /\.html$/, 50 | use: 'vue-html-loader' 51 | }, 52 | { 53 | test: /\.js$/, 54 | use: 'babel-loader', 55 | include: [ path.resolve(__dirname, '../src/renderer') ], 56 | exclude: /node_modules/ 57 | }, 58 | { 59 | test: /\.vue$/, 60 | use: { 61 | loader: 'vue-loader', 62 | options: { 63 | extractCSS: true, 64 | loaders: { 65 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', 66 | scss: 'vue-style-loader!css-loader!sass-loader', 67 | less: 'vue-style-loader!css-loader!less-loader' 68 | } 69 | } 70 | } 71 | }, 72 | { 73 | test: /\.ts$/, 74 | exclude: /node_modules/, 75 | enforce: 'pre', 76 | loader: 'tslint-loader', 77 | options: { 78 | configFile: path.resolve(__dirname, '../tsconfig.json') 79 | 　　　　　} 80 | }, 81 | { 82 | test: /\.tsx?$/, 83 | loader: 'ts-loader', 84 | exclude: /node_modules/, 85 | options: { 86 | appendTsSuffixTo: [/\.vue$/], 87 | } 88 | }, 89 | { 90 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 91 | use: { 92 | loader: 'url-loader', 93 | query: { 94 | limit: 10000, 95 | name: 'imgs/[name].[ext]' 96 | } 97 | } 98 | }, 99 | { 100 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 101 | use: { 102 | loader: 'url-loader', 103 | query: { 104 | limit: 10000, 105 | name: 'fonts/[name].[ext]' 106 | } 107 | } 108 | } 109 | ] 110 | }, 111 | plugins: [ 112 | new VueLoaderPlugin(), 113 | new MiniCssExtractPlugin({filename: 'styles.css'}), 114 | new HtmlWebpackPlugin({ 115 | filename: 'index.html', 116 | template: path.resolve(__dirname, '../src/index.ejs'), 117 | minify: { 118 | collapseWhitespace: true, 119 | removeAttributeQuotes: true, 120 | removeComments: true 121 | }, 122 | nodeModules: false 123 | }), 124 | new webpack.DefinePlugin({ 125 | 'process.env.IS_WEB': 'true' 126 | }), 127 | new webpack.HotModuleReplacementPlugin(), 128 | new webpack.NoEmitOnErrorsPlugin() 129 | ], 130 | output: { 131 | filename: '[name].js', 132 | path: path.join(__dirname, '../dist/web') 133 | }, 134 | resolve: { 135 | alias: { 136 | '@': path.join(__dirname, '../src/renderer'), 137 | 'vue$': 'vue/dist/vue.esm.js' 138 | }, 139 | extensions: ['.js', '.vue', '.json', '.css', '.ts'] 140 | }, 141 | target: 'web' 142 | } 143 | 144 | /** 145 | * Adjust webConfig for production settings 146 | */ 147 | if (process.env.NODE_ENV === 'production') { 148 | webConfig.devtool = '' 149 | 150 | webConfig.plugins.push( 151 | new BabiliWebpackPlugin(), 152 | new CopyWebpackPlugin([ 153 | { 154 | from: path.join(__dirname, '../static'), 155 | to: path.join(__dirname, '../dist/web/static'), 156 | ignore: ['.*'] 157 | } 158 | ]), 159 | new webpack.DefinePlugin({ 160 | 'process.env.NODE_ENV': '"production"' 161 | }), 162 | new webpack.LoaderOptionsPlugin({ 163 | minimize: true 164 | }) 165 | ) 166 | } 167 | 168 | module.exports = webConfig 169 | -------------------------------------------------------------------------------- /.electron-vue/dev-runner.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const chalk = require('chalk') 4 | const electron = require('electron') 5 | const path = require('path') 6 | const { say } = require('cfonts') 7 | const { spawn } = require('child_process') 8 | const webpack = require('webpack') 9 | const WebpackDevServer = require('webpack-dev-server') 10 | const webpackHotMiddleware = require('webpack-hot-middleware') 11 | 12 | const mainConfig = require('./webpack.main.config') 13 | const rendererConfig = require('./webpack.renderer.config') 14 | 15 | let electronProcess = null 16 | let manualRestart = false 17 | let hotMiddleware 18 | 19 | function logStats (proc, data) { 20 | let log = '' 21 | 22 | log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`) 23 | log += '\n\n' 24 | 25 | if (typeof data === 'object') { 26 | data.toString({ 27 | colors: true, 28 | chunks: false 29 | }).split(/\r?\n/).forEach(line => { 30 | log += ' ' + line + '\n' 31 | }) 32 | } else { 33 | log += ` ${data}\n` 34 | } 35 | 36 | log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n' 37 | 38 | console.log(log) 39 | } 40 | 41 | function startRenderer () { 42 | return new Promise((resolve, reject) => { 43 | rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer) 44 | rendererConfig.mode = 'development' 45 | const compiler = webpack(rendererConfig) 46 | hotMiddleware = webpackHotMiddleware(compiler, { 47 | log: false, 48 | heartbeat: 2500 49 | }) 50 | 51 | compiler.hooks.compilation.tap('compilation', compilation => { 52 | compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => { 53 | hotMiddleware.publish({ action: 'reload' }) 54 | cb() 55 | }) 56 | }) 57 | 58 | compiler.hooks.done.tap('done', stats => { 59 | logStats('Renderer', stats) 60 | }) 61 | 62 | const server = new WebpackDevServer( 63 | compiler, 64 | { 65 | contentBase: path.join(__dirname, '../'), 66 | quiet: true, 67 | before (app, ctx) { 68 | app.use(hotMiddleware) 69 | ctx.middleware.waitUntilValid(() => { 70 | resolve() 71 | }) 72 | } 73 | } 74 | ) 75 | 76 | server.listen(9080) 77 | }) 78 | } 79 | 80 | function startMain () { 81 | return new Promise((resolve, reject) => { 82 | mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.ts')].concat(mainConfig.entry.main) 83 | mainConfig.mode = 'development' 84 | const compiler = webpack(mainConfig) 85 | 86 | compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => { 87 | logStats('Main', chalk.white.bold('compiling...')) 88 | hotMiddleware.publish({ action: 'compiling' }) 89 | done() 90 | }) 91 | 92 | compiler.watch({}, (err, stats) => { 93 | if (err) { 94 | console.log(err) 95 | return 96 | } 97 | 98 | logStats('Main', stats) 99 | 100 | if (electronProcess && electronProcess.kill) { 101 | manualRestart = true 102 | process.kill(electronProcess.pid) 103 | electronProcess = null 104 | startElectron() 105 | 106 | setTimeout(() => { 107 | manualRestart = false 108 | }, 5000) 109 | } 110 | 111 | resolve() 112 | }) 113 | }) 114 | } 115 | 116 | function startElectron () { 117 | var args = [ 118 | '--inspect=5858', 119 | path.join(__dirname, '../dist/electron/main.js') 120 | ] 121 | 122 | // detect yarn or npm and process commandline args accordingly 123 | if (process.env.npm_execpath.endsWith('yarn.js')) { 124 | args = args.concat(process.argv.slice(3)) 125 | } else if (process.env.npm_execpath.endsWith('npm-cli.js')) { 126 | args = args.concat(process.argv.slice(2)) 127 | } 128 | 129 | electronProcess = spawn(electron, args) 130 | 131 | electronProcess.stdout.on('data', data => { 132 | electronLog(data, 'blue') 133 | }) 134 | electronProcess.stderr.on('data', data => { 135 | electronLog(data, 'red') 136 | }) 137 | 138 | electronProcess.on('close', () => { 139 | if (!manualRestart) process.exit() 140 | }) 141 | } 142 | 143 | function electronLog (data, color) { 144 | let log = '' 145 | data = data.toString().split(/\r?\n/) 146 | data.forEach(line => { 147 | log += ` ${line}\n` 148 | }) 149 | if (/[0-9A-z]+/.test(log)) { 150 | console.log( 151 | chalk[color].bold('┏ Electron -------------------') + 152 | '\n\n' + 153 | log + 154 | chalk[color].bold('┗ ----------------------------') + 155 | '\n' 156 | ) 157 | } 158 | } 159 | 160 | function greeting () { 161 | const cols = process.stdout.columns 162 | let text = '' 163 | 164 | if (cols > 104) text = 'electron-vue' 165 | else if (cols > 76) text = 'electron-|vue' 166 | else text = false 167 | 168 | if (text) { 169 | say(text, { 170 | colors: ['yellow'], 171 | font: 'simple3d', 172 | space: false 173 | }) 174 | } else console.log(chalk.yellow.bold('\n electron-vue')) 175 | console.log(chalk.blue(' getting ready...') + '\n') 176 | } 177 | 178 | function init () { 179 | greeting() 180 | 181 | Promise.all([startRenderer(), startMain()]) 182 | .then(() => { 183 | startElectron() 184 | }) 185 | .catch(err => { 186 | console.error(err) 187 | }) 188 | } 189 | 190 | init() 191 | -------------------------------------------------------------------------------- /src/renderer/components/downloading/downloading.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 80 | 81 | 178 | -------------------------------------------------------------------------------- /.electron-vue/webpack.renderer.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'renderer' 4 | 5 | const path = require('path') 6 | const { dependencies } = require('../package.json') 7 | const webpack = require('webpack') 8 | 9 | const BabiliWebpackPlugin = require('babili-webpack-plugin') 10 | const CopyWebpackPlugin = require('copy-webpack-plugin') 11 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 12 | const HtmlWebpackPlugin = require('html-webpack-plugin') 13 | const { VueLoaderPlugin } = require('vue-loader') 14 | 15 | /** 16 | * List of node_modules to include in webpack bundle 17 | * 18 | * Required for specific packages like Vue UI libraries 19 | * that provide pure *.vue files that need compiling 20 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals 21 | */ 22 | let whiteListedModules = ['vue'] 23 | 24 | let rendererConfig = { 25 | devtool: '#cheap-module-eval-source-map', 26 | entry: { 27 | renderer: path.join(__dirname, '../src/renderer/main.ts') 28 | }, 29 | externals: [ 30 | ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)) 31 | ], 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.(js|vue)$/, 36 | enforce: 'pre', 37 | exclude: /node_modules/, 38 | use: { 39 | loader: 'eslint-loader', 40 | options: { 41 | formatter: require('eslint-friendly-formatter') 42 | } 43 | } 44 | }, 45 | { 46 | test: /\.scss$/, 47 | use: ['vue-style-loader', 'css-loader', 'sass-loader'] 48 | }, 49 | { 50 | test: /\.sass$/, 51 | use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'] 52 | }, 53 | { 54 | test: /\.less$/, 55 | use: ['vue-style-loader', 'css-loader', 'less-loader'] 56 | }, 57 | { 58 | test: /\.css$/, 59 | use: ['vue-style-loader', 'css-loader'] 60 | }, 61 | { 62 | test: /\.html$/, 63 | use: 'vue-html-loader' 64 | }, 65 | { 66 | test: /\.js$/, 67 | use: 'babel-loader', 68 | exclude: /node_modules/ 69 | }, 70 | { 71 | test: /\.node$/, 72 | use: 'node-loader' 73 | }, 74 | { 75 | test: /\.vue$/, 76 | use: { 77 | loader: 'vue-loader', 78 | options: { 79 | extractCSS: process.env.NODE_ENV === 'production', 80 | loaders: { 81 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', 82 | scss: 'vue-style-loader!css-loader!sass-loader', 83 | less: 'vue-style-loader!css-loader!less-loader' 84 | } 85 | } 86 | } 87 | }, 88 | { 89 | test: /\.ts$/, 90 | exclude: /node_modules/, 91 | enforce: 'pre', 92 | loader: 'tslint-loader', 93 | options: { 94 | loader: 'tslint-loader', 95 | configFile: path.resolve(__dirname, '../tsconfig.json') 96 | 　　　　　} 97 | }, 98 | { 99 | test: /\.tsx?$/, 100 | loader: 'ts-loader', 101 | exclude: /node_modules/, 102 | options: { 103 | appendTsSuffixTo: [/\.vue$/], 104 | } 105 | }, 106 | { 107 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 108 | use: { 109 | loader: 'url-loader', 110 | query: { 111 | limit: 10000, 112 | name: 'imgs/[name]--[folder].[ext]' 113 | } 114 | } 115 | }, 116 | { 117 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 118 | loader: 'url-loader', 119 | options: { 120 | limit: 10000, 121 | name: 'media/[name]--[folder].[ext]' 122 | } 123 | }, 124 | { 125 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 126 | use: { 127 | loader: 'url-loader', 128 | query: { 129 | limit: 10000, 130 | name: 'fonts/[name]--[folder].[ext]' 131 | } 132 | } 133 | } 134 | ] 135 | }, 136 | node: { 137 | __dirname: process.env.NODE_ENV !== 'production', 138 | __filename: process.env.NODE_ENV !== 'production' 139 | }, 140 | plugins: [ 141 | new VueLoaderPlugin(), 142 | new MiniCssExtractPlugin({filename: 'styles.css'}), 143 | new HtmlWebpackPlugin({ 144 | filename: 'index.html', 145 | template: path.resolve(__dirname, '../src/index.ejs'), 146 | minify: { 147 | collapseWhitespace: true, 148 | removeAttributeQuotes: true, 149 | removeComments: true 150 | }, 151 | nodeModules: process.env.NODE_ENV !== 'production' 152 | ? path.resolve(__dirname, '../node_modules') 153 | : false 154 | }), 155 | new webpack.HotModuleReplacementPlugin(), 156 | new webpack.NoEmitOnErrorsPlugin() 157 | ], 158 | output: { 159 | filename: '[name].js', 160 | libraryTarget: 'commonjs2', 161 | path: path.join(__dirname, '../dist/electron') 162 | }, 163 | resolve: { 164 | alias: { 165 | '@': path.join(__dirname, '../src/renderer'), 166 | 'vue$': 'vue/dist/vue.esm.js' 167 | }, 168 | extensions: ['.js', '.vue', '.json', '.css', '.node', '.ts'] 169 | }, 170 | target: 'electron-renderer' 171 | } 172 | 173 | /** 174 | * Adjust rendererConfig for development settings 175 | */ 176 | if (process.env.NODE_ENV !== 'production') { 177 | rendererConfig.plugins.push( 178 | new webpack.DefinePlugin({ 179 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` 180 | }) 181 | ) 182 | } 183 | 184 | /** 185 | * Adjust rendererConfig for production settings 186 | */ 187 | if (process.env.NODE_ENV === 'production') { 188 | rendererConfig.devtool = '' 189 | 190 | rendererConfig.plugins.push( 191 | new BabiliWebpackPlugin(), 192 | new CopyWebpackPlugin([ 193 | { 194 | from: path.join(__dirname, '../static'), 195 | to: path.join(__dirname, '../dist/electron/static'), 196 | ignore: ['.*'] 197 | } 198 | ]), 199 | new webpack.DefinePlugin({ 200 | 'process.env.NODE_ENV': '"production"' 201 | }), 202 | new webpack.LoaderOptionsPlugin({ 203 | minimize: true 204 | }) 205 | ) 206 | } 207 | 208 | module.exports = rendererConfig 209 | -------------------------------------------------------------------------------- /src/main/index.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 'use strict' 3 | import { app, BrowserWindow, Menu, screen, ipcMain } from 'electron' 4 | import '../renderer/store'; 5 | /* tslint:disable */ 6 | /** 7 | * Set `__static` path to static files in production 8 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html 9 | */ 10 | 11 | declare var global: any 12 | 13 | if (process.env.NODE_ENV !== 'development') { 14 | global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\') 15 | } 16 | 17 | let mainWindow, floatingWindows, session, fileDownloadWindow; 18 | let template = []; 19 | 20 | const winURL = process.env.NODE_ENV === 'development' 21 | ? `http://localhost:9080/#/home/all/table` 22 | : `file://${__dirname}/index.html`; 23 | 24 | const floatingWinURL = process.env.NODE_ENV === 'development' 25 | ? `http://localhost:9080/#/floating/window` 26 | : `file://${__dirname}/index.html` 27 | 28 | const downloadDemoURL = process.env.NODE_ENV === 'development' 29 | ? `http://localhost:9080/#/downloaddemo` 30 | : `file://${__dirname}/index.html` 31 | 32 | 33 | function createWindow () { 34 | /** 35 | * Initial window options 36 | */ 37 | mainWindow = new BrowserWindow({ 38 | height: 650, 39 | useContentSize: true, 40 | width: 1000, 41 | minWidth: 960, 42 | minHeight: 650 43 | }) 44 | 45 | mainWindow.loadURL(winURL) 46 | 47 | mainWindow.on('closed', () => { 48 | mainWindow = null 49 | }) 50 | 51 | const menu = Menu.buildFromTemplate(template) 52 | Menu.setApplicationMenu(menu) 53 | if (floatingWindows) floatingWindows.close() 54 | session = mainWindow.webContents.session; 55 | console.log('main sesson:' + mainWindow.webContents.session); 56 | } 57 | console.log(app.getVersion()) 58 | console.log(process.versions) 59 | app.on('ready', createWindow) 60 | 61 | app.on('window-all-closed', () => { 62 | if (process.platform !== 'darwin') { 63 | app.quit(); 64 | } 65 | }); 66 | 67 | app.on('activate', () => { 68 | if (mainWindow === null) { 69 | createWindow(); 70 | } 71 | }); 72 | 73 | template = [ 74 | { 75 | label: 'Edit', 76 | submenu: [ 77 | { role: 'undo' }, 78 | { role: 'redo' }, 79 | { type: 'separator' }, 80 | { role: 'cut' }, 81 | { role: 'copy' }, 82 | { role: 'paste' }, 83 | { role: 'pasteandmatchstyle' }, 84 | { role: 'delete' }, 85 | { role: 'selectall' } 86 | ] 87 | }, 88 | { 89 | label: 'View', 90 | submenu: [ 91 | { role: 'reload' }, 92 | { role: 'forcereload' }, 93 | { role: 'toggledevtools' }, 94 | { type: 'separator' }, 95 | { role: 'resetzoom' }, 96 | { role: 'zoomin' }, 97 | { role: 'zoomout' }, 98 | { type: 'separator' }, 99 | { role: 'togglefullscreen' } 100 | ] 101 | }, 102 | { 103 | role: 'window', 104 | submenu: [ 105 | { role: 'minimize' }, 106 | { role: 'close' } 107 | ] 108 | }, 109 | { 110 | role: 'help', 111 | submenu: [ 112 | { 113 | label: 'Learn More', 114 | click () { require('electron').shell.openExternal('https://electronjs.org') } 115 | } 116 | ] 117 | }, 118 | { 119 | label: '自主测试', 120 | submenu: [ 121 | { 122 | label: '悬浮框', 123 | click () { 124 | mainWindow.close() 125 | floatingWindows = new BrowserWindow({ 126 | width: 140, //悬浮窗口的宽度 比实际DIV的宽度要多2px 因为有1px的边框 127 | height: 30, //悬浮窗口的高度 比实际DIV的高度要多2px 因为有1px的边框 128 | type: 'toolbar', //创建的窗口类型为工具栏窗口 129 | frame: false, //要创建无边框窗口 130 | // resizable: false, //禁止窗口大小缩放 131 | show: false, //先不让窗口显示 132 | webPreferences: { 133 | devTools: false //关闭调试工具 134 | }, 135 | transparent: true, //设置透明 136 | alwaysOnTop: true, //窗口是否总是显示在其他窗口之前 137 | }); 138 | const size = screen.getPrimaryDisplay().workAreaSize; //获取显示器的宽高 139 | const winSize = floatingWindows.getSize(); //获取窗口宽高 140 | 141 | //设置窗口的位置 注意x轴要桌面的宽度 - 窗口的宽度 142 | floatingWindows.setPosition(size.width - winSize[0], 100); 143 | floatingWindows.loadURL(floatingWinURL); 144 | 145 | floatingWindows.once('ready-to-show', () => { 146 | floatingWindows.show() 147 | }); 148 | 149 | floatingWindows.on('close', () => { 150 | floatingWindows = null; 151 | }) 152 | } 153 | }, 154 | { 155 | label: '下载文件', 156 | click () { 157 | // mainWindow.webContents.downloadURL('https://speed.hetzner.de/10GB.bin'); 158 | // mainWindow.close(); 159 | // console.log('sesson: ' + mainWindow.webContents.sesson) 160 | // // fileDownload.test(); 161 | fileDownloadWindow = new BrowserWindow({ 162 | height: 300, 163 | useContentSize: true, 164 | width: 600 165 | }); 166 | fileDownloadWindow.loadURL(downloadDemoURL); 167 | fileDownloadWindow.on('closed', () => { 168 | fileDownloadWindow = null 169 | }) 170 | console.log('sesson: ' + session) 171 | // var fileDownload = new FileDownload(fileDownloadWindow.webContents); 172 | ipcMain.on('passDownlaod-message', (event, arg) => { 173 | console.log('passDownlaod-message'); 174 | // Event emitter for sending asynchronous messages 175 | // console.log('111' + fileDownload.test()) 176 | event.sender.send('passDownload-reply') 177 | // event.returnValue = fileDownload 178 | }); 179 | } 180 | } 181 | ] 182 | }, 183 | ] 184 | 185 | ipcMain.on('showMainWindow', () => { 186 | floatingWindows.close(); 187 | createWindow(); 188 | }); 189 | 190 | ipcMain.on('downloadFile', () => { 191 | floatingWindows.close(); 192 | createWindow() 193 | }); 194 | 195 | 196 | 197 | 198 | /** 199 | * Auto Updater 200 | * 201 | * Uncomment the following code below and install `electron-updater` to 202 | * support auto updating. Code Signing with a valid certificate is required. 203 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating 204 | */ 205 | 206 | /* 207 | import { autoUpdater } from 'electron-updater' 208 | 209 | autoUpdater.on('update-downloaded', () => { 210 | autoUpdater.quitAndInstall() 211 | }) 212 | 213 | app.on('ready', () => { 214 | if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates() 215 | }) 216 | */ 217 | -------------------------------------------------------------------------------- /src/renderer/components/sideBar/sideBar.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 114 | 115 | 257 | --------------------------------------------------------------------------------