Skip to content

Commit

Permalink
新增网速显示等内容显示
Browse files Browse the repository at this point in the history
  • Loading branch information
luxin committed Sep 12, 2019
1 parent 7222859 commit 3e3a8f8
Showing 1 changed file with 168 additions and 34 deletions.
202 changes: 168 additions & 34 deletions src/modules/popup/Popup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,33 @@
</div>
<div class="content">
<el-scrollbar class="content-scrollbar">
<div class="file" v-for="item in downloadItems" :key="item">
<div class="file" :class="shouldBeGray(item)" v-for="item in downloadItems" :key="item">
<div class="icon">
<el-progress class="progress" type="circle" stroke-width="3" width="42"
v-show="item.state === 'in_progress'"
:percentage="getPercentage(item)"></el-progress>
<img :src="item.iconUrl" alt=""/>
<img :class="shouldBeGray(item)" :src="item.iconUrl" alt="" draggable="false"/>
</div>
<div class="file-content">
<div class="filename item">
<a @click="openfile(item)" class="filename">{{getShortName(item.basename, 32)}}</a>
</div>
<div class="file-url item">
<a @click="openUrl(item)">{{getShortName(item.url, 46)}}</a>
</div>
<span @click="openfile(item)" class="filename"
:class="shouldBeGray(item)">{{item.basename}}</span>
<span @click="openUrl(item)" class="file-url">{{item.url}}</span>
<template v-if="item.state === 'in_progress'">
<span class="receivedSize info">{{getFormattedSize(item.bytesReceived)}}</span>
<template v-if="item.totalBytes !== 0">
<span class="divider info">|</span>
<span class="size info">{{getFormattedSize(item.totalBytes)}}</span>
<span class="speed info">{{getSpeed(item)}}</span>
<span class="remaining info">{{remaining(item)}}</span>
</template>
<template v-else>
<span class="speed info">{{getSpeed(item)}}</span>
</template>
</template>
<template v-else>
<span class="size info" v-show="item.totalBytes !== 0">{{getFormattedSize(item.totalBytes)}}</span>
<span class="startTime info">{{dateFormat(item.startTime, 'MM/dd hh:mm')}}</span>
</template>
</div>
<div class="operator">
<button class="icon-button" v-show="openable(item)">
Expand All @@ -49,8 +62,7 @@
</el-scrollbar>
</div>

<div class="footer">
</div>
<div class="footer"></div>
</div>
</template>

Expand All @@ -70,6 +82,8 @@ export default {
let tmpItem = this.getItem(item.id)
if (tmpItem) {
tmpItem.filename = item.filename
tmpItem.error = item.error
tmpItem.estimatedEndTime = item.estimatedEndTime
this.beforeHandler(tmpItem)
tmpItem.bytesReceived = item.bytesReceived
tmpItem.totalBytes = item.totalBytes
Expand Down Expand Up @@ -120,6 +134,10 @@ export default {
}
},
methods: {
loadI18nMessage (msg) {
return chrome.i18n.getMessage(msg)
},
getItem (id) {
for (let item of this.downloadItems) {
if (item.id === id) {
Expand All @@ -136,6 +154,7 @@ export default {
this.beforeHandler(item)
})
this.downloadItems = items
console.log(this.downloadItems)
})
},
Expand Down Expand Up @@ -222,11 +241,6 @@ export default {
chrome.downloads.cancel(item.id)
},
// 为了更好地显示文件名和url，截断超出长度的字符串
getShortName (name, size) {
return name && name.length > size ? `${name.substring(0, size - 1)}...` : name
},
// 可在资源管理器中打开
openable (item) {
return (item.state === 'complete' || item.state === 'in_progress') && item.exists
Expand All @@ -240,8 +254,85 @@ export default {
// 获取文件下载进度
getPercentage (item) {
return item.totalBytes > 0 ? parseInt((100 * item.bytesReceived / item.totalBytes).toString()) : 0
}
},
getFormattedSize (bytes) {
if (bytes < 0) {
return 0 + 'B'
}
const kbSize = bytes / 1024
if (kbSize < 1) {
return bytes.toFixed(0) + 'B'
} else if (kbSize < 1024) {
return kbSize.toFixed(1) + 'K'
} else {
const mbSize = bytes / 1024 / 1024
if (mbSize < 1024) {
return mbSize.toFixed(1) + 'M'
} else {
const gbSize = bytes / 1024 / 1024 / 1024
return gbSize.toFixed(1) + 'G'
}
}
},
// 如果文件不存在，或者文件下载过程中出现错误，那么就把文件图标和文件名称颜色变成灰色
shouldBeGray (item) {
return !item.exists || item.error ? 'gray' : 'normal'
},
getSpeed (item) {
const current = new Date().getTime()
const start = new Date(item.startTime).getTime()
return this.getFormattedSize(item.bytesReceived / (current - start) * 1000) + '/s'
},
remaining (item) {
if (!item.estimatedEndTime) {
return '剩余0秒'
}
// 预估剩余时间 - 当前时间 = 剩余时间 (ms)
let remaining = (new Date(item.estimatedEndTime) - new Date().getTime()) / 1000
if (remaining < 60) {
remaining = remaining.toFixed(0) + '秒'
} else {
remaining = remaining / 60
if (remaining < 60) {
remaining = remaining.toFixed(0) + '分钟'
} else {
remaining = remaining / 60
if (remaining < 24) {
remaining = remaining.toFixed(0) + '小时'
} else {
remaining = (remaining / 24).toFixed(0) + '天'
}
}
}
return '剩余' + remaining
},
// 日期格式化
dateFormat (time, pattern) {
const date = new Date(time)
const o = {
"M+" : date.getMonth() + 1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours(), //小时
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth() + 3) / 3), //季度
"S" : date.getMilliseconds() //毫秒
}
if(/(y+)/.test(pattern))
pattern = pattern.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length))
for(let k in o)
if(new RegExp("("+ k +")").test(pattern))
pattern = pattern.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) :
(("00" + o[k]).substr(("" + o[k]).length)))
return pattern
}
}
}
</script>
Expand All @@ -265,7 +356,7 @@ export default {
height: 24px;
line-height: 24px;
}
.search >>> .el-input--mini.el-input__icon {
.search >>> .el-input__icon.el-icon-search {
line-height: 24px;
}
Expand Down Expand Up @@ -332,13 +423,17 @@ export default {
height: 70px;
margin: 6px 6px 8px 6px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
user-select: none;
}
.file .icon-button {
display: none;
}
.file:hover .icon-button {
display: inline-block;
}
.file.gray {
box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
}
.icon {
text-align: center;
Expand All @@ -355,6 +450,11 @@ export default {
.icon img:not([src]) {
opacity: 0;
}
.icon img.gray {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.7;
}
.progress {
position: absolute;
Expand All @@ -370,34 +470,68 @@ export default {
height: 100%;
float: right;
}
.file-content .item {
height: 18px;
margin-top: 8px;
}
.filename a {
.filename {
display: block;
margin-top: 9px;
padding-right: 8px;
height: 16px;
font-weight: bold;
color: #3a8ee6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filename:hover {
cursor: pointer;
}
.filename a:hover {
text-decoration: underline;
.filename.gray {
cursor: auto;
color: gray;
text-decoration: line-through;
}
.operator {
position: absolute;
top: 6px;
right: 2px;
background-color: white;
z-index: 1;
.file-url {
display: block;
padding-right: 8px;
margin-top: 1px;
height: 16px;
color: gray;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-url a {
.file-url:hover {
cursor: pointer;
}
.info {
display: inline-block;
margin-top: 8px;
color: gray;
font-size: 11px;
font-family: Consolas, serif;
}
.file-url a:hover {
text-decoration: underline;
.divider {
width: 16px;
text-align: center;
}
.remaining, .startTime {
float: right;
margin-right: 9px;
}
.speed {
margin-left: 36px;
}
.operator {
position: absolute;
top: 0;
right: 4px;
background-color: #fff;
height: 28px;
line-height: 34px;
z-index: 10;
}
.footer {
Expand Down

0 comments on commit 3e3a8f8

Please sign in to comment.