105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<template>
|
||
<div class="decrypt-file-selector">
|
||
<el-upload :auto-upload="false" :on-change="addFile" :show-file-list="false" action="" drag multiple>
|
||
<el-icon size="80"><UploadFilled /></el-icon>
|
||
<div>将文件拖到此处，或 <em>点击选择</em></div>
|
||
<template #tip> </template>
|
||
<transition name="el-fade-in">
|
||
<!--todo: add delay to animation-->
|
||
<el-progress
|
||
v-show="progress_show"
|
||
:format="progress_string"
|
||
:percentage="progress_value"
|
||
:stroke-width="16"
|
||
:text-inside="true"
|
||
style="margin: 16px 6px 0 6px"
|
||
></el-progress>
|
||
</transition>
|
||
</el-upload>
|
||
</div>
|
||
<div>
|
||
仅在浏览器内对文件进行解锁，无需消耗流量
|
||
<el-tooltip effect="dark" placement="top-start">
|
||
<template #content> 算法在源代码中已经提供，所有运算都发生在本地 </template>
|
||
<el-icon size="12">
|
||
<InfoFilled />
|
||
</el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div>
|
||
工作模式: {{ parallel ? '多线程任务' : '单线程队列' }}
|
||
<el-tooltip effect="dark" placement="top-start">
|
||
<template #content>
|
||
将此工具部署在 HTTPS 环境下，可以利用 Web Worker 的多线程特性，<br />
|
||
从而更快的利用并行处理完成解锁
|
||
</template>
|
||
<el-icon size="12">
|
||
<InfoFilled />
|
||
</el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
</template>
|
||
|
||
<style>
|
||
.decrypt-file-selector {
|
||
max-width: 360px;
|
||
margin: 0 auto;
|
||
padding-bottom: 1em;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
import { spawn, Worker, Pool } from 'threads';
|
||
import { Decrypt } from '@/decrypt';
|
||
import { DecryptQueue } from '@/utils/utils';
|
||
import { storage } from '@/utils/storage';
|
||
|
||
export default {
|
||
name: 'FileSelector',
|
||
data() {
|
||
return {
|
||
task_all: 0,
|
||
task_finished: 0,
|
||
queue: new DecryptQueue(), // for http or file protocol
|
||
parallel: false,
|
||
};
|
||
},
|
||
computed: {
|
||
progress_value() {
|
||
return this.task_all ? (this.task_finished / this.task_all) * 100 : 0;
|
||
},
|
||
progress_show() {
|
||
return this.task_all !== this.task_finished;
|
||
},
|
||
},
|
||
mounted() {
|
||
if (window.Worker && window.location.protocol !== 'file:' && process.env.NODE_ENV === 'production') {
|
||
console.log('Using Worker Pool');
|
||
this.queue = Pool(() => spawn(new Worker('@/utils/worker.ts')), navigator.hardwareConcurrency || 1);
|
||
this.parallel = true;
|
||
} else {
|
||
console.log('Using Queue in Main Thread');
|
||
}
|
||
},
|
||
methods: {
|
||
progress_string() {
|
||
return `${this.task_finished} / ${this.task_all}`;
|
||
},
|
||
async addFile(file) {
|
||
this.task_all++;
|
||
this.queue.queue(async (dec = Decrypt) => {
|
||
console.log('start handling', file.name);
|
||
try {
|
||
this.$emit('success', await dec(file, await storage.getAll()));
|
||
} catch (e) {
|
||
console.error(e);
|
||
this.$emit('error', e, file.name);
|
||
} finally {
|
||
this.task_finished++;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|