Split App.vue
This commit is contained in:
MengYX
71
src/component/preview.vue
Normal file
71
src/component/preview.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
|
||||
<el-table-column label="封面">
|
||||
<template slot-scope="scope">
|
||||
<el-image :src="scope.row.picture" style="width: 100px; height: 100px">
|
||||
<div class="image-slot el-image__error" slot="error">
|
||||
暂无封面
|
||||
</div>
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="歌曲" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="歌手" sortable>
|
||||
<template slot-scope="scope">
|
||||
<p>{{ scope.row.artist }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="专辑" sortable>
|
||||
<template slot-scope="scope">
|
||||
<p>{{ scope.row.album }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handlePlay(scope.$index, scope.row)"
|
||||
circle icon="el-icon-video-play" type="success">
|
||||
</el-button>
|
||||
<el-button @click="handleDownload(scope.row)"
|
||||
circle icon="el-icon-download">
|
||||
</el-button>
|
||||
<el-button @click="handleDelete(scope.$index, scope.row)"
|
||||
circle icon="el-icon-delete" type="danger">
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {DownloadBlobMusic, RemoveBlobMusic} from './util'
|
||||
|
||||
export default {
|
||||
name: "preview",
|
||||
props: {
|
||||
tableData: {type: Array, required: true},
|
||||
download_format: {type: String, required: true}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePlay(index, row) {
|
||||
this.$emit("music_changed", row.file);
|
||||
},
|
||||
handleDelete(index, row) {
|
||||
RemoveBlobMusic(row);
|
||||
this.tableData.splice(index, 1);
|
||||
},
|
||||
handleDownload(row) {
|
||||
DownloadBlobMusic(row, this.download_format)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
82
src/component/upload.vue
Normal file
82
src/component/upload.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<el-upload
|
||||
:auto-upload="false"
|
||||
:on-change="handleFile"
|
||||
:show-file-list="false"
|
||||
action=""
|
||||
drag
|
||||
multiple>
|
||||
<i class="el-icon-upload"/>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击选择</em></div>
|
||||
<div class="el-upload__tip" slot="tip">本工具仅在浏览器内对文件进行解锁，无需消耗流量</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
"use strict";// 严格模式 用于尾调用优化
|
||||
|
||||
export default {
|
||||
name: "upload",
|
||||
data() {
|
||||
return {
|
||||
cacheQueue: [],
|
||||
workers: [],
|
||||
idle_workers: [],
|
||||
thread_num: 1
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (document.location.host !== "") {
|
||||
//todo: Fail on Hot Reload
|
||||
const worker = require("workerize-loader!../decrypt/common");
|
||||
this.thread_num = navigator.hardwareConcurrency || 1;
|
||||
for (let i = 0; i < this.thread_num; i++) {
|
||||
// noinspection JSValidateTypes,JSUnresolvedVariable
|
||||
this.workers.push(worker().CommonDecrypt);
|
||||
this.idle_workers.push(i);
|
||||
}
|
||||
} else {
|
||||
const dec = require('../decrypt/common');
|
||||
this.workers.push(dec.CommonDecrypt);
|
||||
this.idle_workers.push(0)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFile(file) {
|
||||
// 有空闲worker 立刻处理文件
|
||||
if (this.idle_workers.length > 0) {
|
||||
this.handleDoFile(file, this.idle_workers.shift());
|
||||
}
|
||||
// 无空闲worker 则放入缓存队列
|
||||
else {
|
||||
this.cacheQueue.push(file);
|
||||
}
|
||||
},
|
||||
handleCacheQueue(worker_id) {
|
||||
// 调用方法消费缓存队列中的数据
|
||||
if (this.cacheQueue.length === 0) {
|
||||
this.idle_workers.push(worker_id);
|
||||
return
|
||||
}
|
||||
this.handleDoFile(this.cacheQueue.shift(), worker_id);
|
||||
},
|
||||
handleDoFile(file, worker_id) {
|
||||
this.workers[worker_id](file).then(data => {
|
||||
this.$emit("handle_finish", data);
|
||||
// 完成之后 执行新任务 todo: 可能导致call stack过长
|
||||
this.handleCacheQueue(worker_id);
|
||||
}).catch(err => {
|
||||
this.$emit("handle_error", err, file.name);
|
||||
this.handleCacheQueue(worker_id);
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*noinspection CssUnusedSymbol*/
|
||||
.el-upload-dragger {
|
||||
width: 80vw !important;
|
||||
}
|
||||
</style>
|
||||
26
src/component/util.js
Normal file
26
src/component/util.js
Normal file
@@ -0,0 +1,26 @@
|
||||
export function DownloadBlobMusic(data, format) {
|
||||
const a = document.createElement('a');
|
||||
a.href = data.file;
|
||||
switch (format) {
|
||||
case "1":
|
||||
a.download = data.title + "." + data.ext;
|
||||
break;
|
||||
case "2":
|
||||
a.download = data.artist + " - " + data.title + "." + data.ext;
|
||||
break;
|
||||
case "3":
|
||||
a.download = data.title + " - " + data.artist + "." + data.ext;
|
||||
break;
|
||||
default:
|
||||
a.download = data.filename;
|
||||
break;
|
||||
}
|
||||
document.body.append(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
}
|
||||
|
||||
export function RemoveBlobMusic(data) {
|
||||
URL.revokeObjectURL(data.file);
|
||||
URL.revokeObjectURL(data.picture);
|
||||
}
|
||||
Reference in New Issue
Block a user