Skip to content

Commit

Permalink
updated
Browse files Browse the repository at this point in the history
  • Loading branch information
luxin committed Dec 9, 2019
1 parent 8ab1c92 commit 01be590
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 43 deletions.
15 changes: 12 additions & 3 deletions src/Background.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<div id="app"></div>
</template>

<!--suppress JSUnresolvedVariable, JSUnresolvedFunction, UnterminatedStatementJS -->
<script>
/* eslint-disable no-undef */
export default {
Expand All @@ -17,7 +18,11 @@ export default {
return {
anyInProgress: false,
tid: -1,
downloadingNumber: 0
downloadingNumber: 0,
downloadMessage: {
type: 'download',
data: []
}
}
},
watch: {
Expand All @@ -34,7 +39,7 @@ export default {
}
},
// 文件下载进度条
// 文件下载进度
downloadProgress () {
this.tid = -1
this.anyInProgress = false
Expand All @@ -50,8 +55,11 @@ export default {
// icon右小角显示正在下载中的文件数量
this.downloadingNumber = downloadingNumber
// 使用vue.set更新数据
this.$set(this.downloadMessage, 'data', items);
// 发送数据到popup
chrome.runtime.sendMessage(JSON.stringify(items))
chrome.runtime.sendMessage(JSON.stringify(this.downloadMessage))
if (this.anyInProgress && this.tid < 0) {
while (this.tid < 0) {
Expand All @@ -61,6 +69,7 @@ export default {
})
},
// 设置图标右上角显示的正在下载中文件的数量
setBrowserBadge (number) {
let text = ''
if (number > 0) {
Expand Down
36 changes: 32 additions & 4 deletions src/modules/options/Options.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,41 @@
<template>
<h1>options (developing...)</h1>
<div>
<div class="header">
<img :src="`${publicPath}img/icon38.png`" alt=""/>
<a>下载管理器</a>
</div>
<div class="content">

</div>
</div>
</template>

<!--suppress JSUnresolvedVariable, UnterminatedStatementJS -->
<script>
export default {
name: 'Options'
/* eslint-disable no-undef */
export default {
name: 'Options',
data() {
return {
publicPath: process.env.BASE_URL,
}
},
methods: {
}
}
</script>

<style scoped>
<style scoped rel="stylesheet/css">
.header {
display: inline-block;
height: 38px;
}
.header a {
line-height: 38px;
font-size: 22px;
}
.content {
height: calc(100vh - 38px);
}
</style>
3 changes: 3 additions & 0 deletions src/modules/options/main.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import Vue from 'vue'
import ElementUI from 'element-ui'
import Options from './Options.vue'

Vue.use(ElementUI)

Vue.config.debug = false
Vue.config.devtools = false
Vue.config.productionTip = false
Expand Down
94 changes: 58 additions & 36 deletions src/modules/popup/Popup.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
<!--suppress JSDeprecatedSymbols -->
<template>
<div class="home">
<div class="header">
Expand All @@ -7,13 +6,13 @@
</el-input>
<div class="header-operator">
<button class="header-button icon-button" @click="eraseAll">
<i class="el-icon-circle-close"></i>
<i class="el-icon-circle-close"/>
</button>
<button class="header-button icon-button" @click="openFolder">
<i class="el-icon-folder"></i>
<i class="el-icon-folder"/>
</button>
<button class="header-button icon-button" @click="openOptions">
<i class="el-icon-setting"></i>
<i class="el-icon-setting"/>
</button>
</div>
</div>
Expand All @@ -23,7 +22,7 @@
<div class="icon">
<el-progress class="progress" type="circle" stroke-width="3" width="42"
:status="item.paused ? 'warning' : ''" v-show="item.state === 'in_progress'"
:percentage="getPercentage(item)"></el-progress>
:percentage="getPercentage(item)"/>
<img :class="shouldBeGray(item)" :src="item.iconUrl" alt="" draggable="false"/>
</div>
<div class="file-content">
Expand All @@ -49,16 +48,16 @@
</div>
<div class="operator">
<button class="icon-button" v-show="openable(item)" @click="showInFolder(item)">
<i class="el-icon-folder"></i>
<i class="el-icon-folder"/>
</button>
<button class="icon-button" v-show="item.state === 'in_progress'" @click="pauseOrResume(item)">
<i :class="item.paused ? 'el-icon-video-play' : 'el-icon-video-pause'"></i>
<i :class="item.paused ? 'el-icon-video-play' : 'el-icon-video-pause'"/>
</button>
<button class="icon-button" v-show="removable(item)" @click="remove(item)">
<i class="el-icon-delete"></i>
<i class="el-icon-delete"/>
</button>
<button class="icon-button" @click="erase(item)">
<i class="el-icon-close"></i>
<i class="el-icon-close"/>
</button>
</div>
</div>
Expand All @@ -69,39 +68,46 @@
</div>
</template>

<!--suppress UnterminatedStatementJS, JSUnresolvedVariable, ES6ModulesDependencies, JSUnresolvedFunction -->
<script>
/* eslint-disable no-undef,no-return-assign */
// noinspection JSUnusedGlobalSymbols
export default {
/* eslint-disable no-undef */
export default {
name: 'Popup',
mounted () {
// 获取下载文件信息
this.render()
// 接收来自background发来的数据
chrome.runtime.onMessage.addListener((message) => {
JSON.parse(message).forEach((item) => {
// 在刚创建下载时,文件名称会为空
if (item.filename) {
let tmpItem = this.getItem(item.id)
if (tmpItem) {
tmpItem.filename = item.filename
this.beforeHandler(tmpItem)
tmpItem.error = item.error ? item.error : null
tmpItem.estimatedEndTime = item.estimatedEndTime ? item.estimatedEndTime : null
// 记录上一次接收的文件大小,以便于统一计算2种下载情况下的下载速度
tmpItem.previousBytesReceived = tmpItem.bytesReceived
tmpItem.bytesReceived = item.bytesReceived
tmpItem.totalBytes = item.totalBytes
tmpItem.state = item.state
} else {
this.beforeHandler(item)
item.previousBytesReceived = 0
// 插入到第一个位置
this.downloadItems.splice(0, 0, item)
let received = JSON.parse(message);
if (received.type === 'download') {
// data中存放自定义的从background传过来的下载信息
received.data.forEach((item) => {
// 在刚创建下载时,文件名称会为空
if (item.filename) {
let tmpItem = this.getItem(item.id)
if (tmpItem) {
tmpItem.filename = item.filename
this.beforeHandler(tmpItem)
tmpItem.error = item.error ? item.error : null
tmpItem.estimatedEndTime = item.estimatedEndTime ? item.estimatedEndTime : null
// 记录上一次接收的文件大小,以便于统一计算2种下载情况下的下载速度
tmpItem.previousBytesReceived = tmpItem.bytesReceived
tmpItem.bytesReceived = item.bytesReceived
tmpItem.totalBytes = item.totalBytes
tmpItem.state = item.state
} else {
this.beforeHandler(item)
item.previousBytesReceived = 0
// 插入到第一个位置
this.downloadItems.splice(0, 0, item)
}
}
}
})
})
} else {
console.log(received)
}
})
// 如果其他插件或者谷歌浏览器下载界面清除下载文件时,同步搜索数据
Expand Down Expand Up @@ -215,6 +221,18 @@ export default {
chrome.downloads.show(item.id)
},
maybeAcceptDanger(item) {
if ((item.state !== 'in_progress')
|| (item.danger === 'safe')
|| (item.danger === 'accepted')) {
return;
}
chrome.downloads.acceptDanger(item.id, () => {
})
},
// 从磁盘中删除文件
remove (item) {
chrome.downloads.removeFile(item.id, () => this.erase(item))
Expand All @@ -232,6 +250,7 @@ export default {
})
},
// 暂停或恢复下载
pauseOrResume (item) {
if (item.paused) {
this.resume(item)
Expand All @@ -240,7 +259,6 @@ export default {
}
},
// 暂停正在下载中的文件
pause (item) {
chrome.downloads.pause(item.id, () => { item.paused = true })
Expand Down Expand Up @@ -301,8 +319,12 @@ export default {
// 文件下载有两种情况
// 一种是确定文件的总大小
if (item.totalBytes !== 0) {
let remainingTime = (new Date(item.estimatedEndTime) - new Date().getTime()) / 1000
return this.getFormattedSize((item.totalBytes - item.bytesReceived) / remainingTime) + '/s'
let speed = '0B'
if (item.estimatedEndTime) {
let remainingTime = (new Date(item.estimatedEndTime) - new Date().getTime()) / 1000
speed = this.getFormattedSize((item.totalBytes - item.bytesReceived) / remainingTime);
}
return speed + '/s';
} else {
// 另一种是文件大小不确定【每200ms计算一次,有时可能为0,精度较差】
return this.getFormattedSize((item.bytesReceived - item.previousBytesReceived) / 0.4) + '/s'
Expand Down
31 changes: 31 additions & 0 deletions src/store/store.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import Vue from 'vue'
import Vuex from 'vuex'
import * as types from '../store/types'

Vue.use(Vuex);

const Store = new Vuex.Store({
state: {
title: '',
accept_danger: true,
},
mutations: {
[types.LOGIN]: (state, data) => {
localStorage.token = data.token;
state.token = data.token;
this.state.username = data.username;
state.role = data.role;
},
[types.LOGOUT]: (state) => {
localStorage.removeItem('token');
state.token = null;
state.username = null;
state.role = null;
},
[types.TITLE]: (state, title) => {
state.title = title;
}
}
});

export default Store
3 changes: 3 additions & 0 deletions src/store/types.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const LOGIN = 'login';
export const LOGOUT = 'logout';
export const TITLE = 'title';

0 comments on commit 01be590

Please sign in to comment.