Split App.vue

src/App.vue

@@ -1,76 +1,25 @@
 <template>
-    <div id="app">
+
-        <el-container>
+    <el-container id="app">
         <el-main>
-                <el-upload
+            <x-upload v-on:handle_finish="showSuccess" v-on:handle_error="showFail"></x-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>
 
             <el-row id="app-control">
-
                 <el-row style="padding-bottom: 1em; font-size: 14px">
                     歌曲命名格式：
-                        <el-radio name="format" v-model="format" label="1">歌曲名</el-radio>
+                    <el-radio name="format" v-model="download_format" label="1">歌曲名</el-radio>
-                        <el-radio name="format" v-model="format" label="2">歌手-歌曲名</el-radio>
+                    <el-radio name="format" v-model="download_format" label="2">歌手-歌曲名</el-radio>
-                        <el-radio name="format" v-model="format" label="3">歌曲名-歌手</el-radio>
+                    <el-radio name="format" v-model="download_format" label="3">歌曲名-歌手</el-radio>
-                        <el-checkbox v-model="instantDownload" border>立即保存</el-checkbox>
+                    <el-checkbox v-model="instant_download" border>立即保存</el-checkbox>
                 </el-row>
-
                 <el-button @click="handleDownloadAll" icon="el-icon-download" plain>下载全部</el-button>
                 <el-button @click="handleDeleteAll" icon="el-icon-delete" plain type="danger">删除全部</el-button>
-
             </el-row>
             <audio :autoplay="playing_auto" :src="playing_url" controls/>
 
+            <x-preview :table-data="tableData" :download_format="download_format"
+                       v-on:music_changed="changePlaying"></x-preview>
 
-                <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>
         </el-main>
         <el-footer id="app-footer">
             <el-row>
@@ -89,63 +38,40 @@
             </el-row>
         </el-footer>
     </el-container>
-    </div>
+
 </template>
 
 <script>
-    // 严格模式 用于尾调用优化
+
-    "use strict";
+    import upload from "./component/upload"
+    import preview from "./component/preview"
+    import {DownloadBlobMusic, RemoveBlobMusic} from "./component/util"
 
     export default {
         name: 'app',
-        components: {},
+        components: {
+            xUpload: upload,
+            xPreview: preview
+        },
         data() {
             return {
                 activeIndex: '1',
                 tableData: [],
                 playing_url: "",
                 playing_auto: false,
-                format: '2',
+                download_format: '2',
-                instantDownload: false,
+                instant_download: false,
-                workCount: 0,
-                cacheQueue: [],
-                cacheQueueOption: {
-                    push: (element) => {
-                        this.cacheQueue.push(element);
-                    },
-                    pop: () => {
-                        return this.cacheQueue.shift();
-                    },
-                    size: () => {
-                        return this.cacheQueue.length;
-                    }
-                },
-                workers: [],
-                idle_workers: [],
-                thread_num: 1
             }
         },
-        mounted() {
+        created() {
             this.$nextTick(function () {
                 this.finishLoad();
             });
-            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++) {
-                    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: {
             finishLoad() {
-                document.getElementById("loader-mask").remove();
+                const mask = document.getElementById("loader-mask");
+                if (!!mask) mask.remove();
                 this.$notify.info({
                     title: '离线使用',
                     message: '我们使用PWA技术，无网络也能使用<br/>' +
@@ -156,30 +82,11 @@
                     position: 'top-left'
                 });
             },
-            handleFile(file) {
+            showSuccess(data) {
-                // 有空闲worker 立刻处理文件
-                if (this.idle_workers.length > 0) {
-                    this.handleDoFile(file, this.idle_workers.shift());
-                }
-                // 无空闲worker 则放入缓存队列
-                else {
-                    this.cacheQueueOption.push(file);
-                }
-            },
-            handleCacheQueue(worker_id) {
-                // 调用方法消费缓存队列中的数据
-                if (this.cacheQueue.length === 0) {
-                    this.idle_workers.push(worker_id);
-                    return
-                }
-                this.handleDoFile(this.cacheQueueOption.pop(), worker_id);
-            },
-            handleDoFile(file, worker_id) {
-                this.workers[worker_id](file).then(data => {
                 if (data.status) {
-                        if (this.instantDownload) {
+                    if (this.instant_download) {
-                            this.handleDownload(data);
+                        DownloadBlobMusic(data, this.download_format);
-                            this.handleDelete(null, data);
+                        RemoveBlobMusic(data);
                     } else {
                         this.tableData.push(data);
                         this.$notify.success({
@@ -191,59 +98,27 @@
                     let _rp_data = [data.title, data.artist, data.album];
                     window._paq.push(["trackEvent", "Unlock", data.rawExt + "," + data.mime, JSON.stringify(_rp_data)]);
                 } else {
+                    this.showFail(data.message, data.rawFilename)
+                }
+            },
+            showFail(errInfo, filename) {
                 this.$notify.error({
                     title: '出现问题',
-                            message: data.message + "，" + file.name +
+                    message: errInfo + "，" + filename +
                         '，参考<a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
                     dangerouslyUseHTMLString: true,
                     duration: 6000
                 });
-                        window._paq.push(["trackEvent", "Error", data.message, file.name]);
+                window._paq.push(["trackEvent", "Error", errInfo, filename]);
-                    }
+                console.error(errInfo, filename);
-                    // 完成之后 执行新任务 todo: 可能导致call stack过长
-                    this.handleCacheQueue(worker_id);
-                }).catch(err => {
-                    console.error(err, file);
-                    window._paq.push(["trackEvent", "Error", err, file.name]);
-                    this.handleCacheQueue(worker_id);
-                })
             },
-            handlePlay(index, row) {
+            changePlaying(url) {
-                this.playing_url = row.file;
+                this.playing_url = url;
                 this.playing_auto = true;
             },
-            handleDelete(index, row) {
-                URL.revokeObjectURL(row.file);
-                URL.revokeObjectURL(row.picture);
-                if (index != null) {
-                    this.tableData.splice(index, 1);
-                }
-            },
-            handleDownload(row) {
-                let a = document.createElement('a');
-                a.href = row.file;
-                switch (this.format) {
-                    case "1":
-                        a.download = row.title + "." + row.ext;
-                        break;
-                    case "2":
-                        a.download = row.artist + " - " + row.title + "." + row.ext;
-                        break;
-                    case "3":
-                        a.download = row.title + " - " + row.artist + "." + row.ext;
-                        break;
-                    default:
-                        a.download = row.filename;
-                        break;
-                }
-                document.body.append(a);
-                a.click();
-                a.remove();
-            },
             handleDeleteAll() {
                 this.tableData.forEach(value => {
-                    URL.revokeObjectURL(value.file);
+                    RemoveBlobMusic(value);
-                    URL.revokeObjectURL(value.picture);
                 });
                 this.tableData = [];
             },
@@ -251,15 +126,15 @@
                 let index = 0;
                 let c = setInterval(() => {
                     if (index < this.tableData.length) {
-                        this.handleDownload(this.tableData[index]);
+                        DownloadBlobMusic(this.tableData[index], this.download_format);
                         index++;
                     } else {
                         clearInterval(c);
                     }
-                }, 1000);
+                }, 300);
-
-            }
             }
+        },
+
     }
 
 </script>
@@ -285,15 +160,9 @@
         font-size: small;
     }
 
-    /*noinspection CssUnusedSymbol*/
-    .el-upload-dragger {
-        width: 80vw !important;
-    }
-
     #app-control {
         padding-top: 1em;
         padding-bottom: 1em;
     }
 
-
 </style>

src/component/preview.vue

@@ -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>

src/component/upload.vue

@@ -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>

src/component/util.js

@@ -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);
+}

src/decrypt/common.js

@@ -42,9 +42,9 @@ export async function CommonDecrypt(file) {
         default:
             rt_data = {status: false, message: "不支持此文件格式",}
     }
-    if (rt_data.status) {
+
     rt_data.rawExt = raw_ext;
     rt_data.rawFilename = raw_filename;
-    }
+
     return rt_data;
 }