web/src/component/FileSelector.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>