diff --git a/src/App.vue b/src/App.vue
index 5100d62..b130530 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,41 +1,12 @@
 <template>
-
     <el-container id="app">
         <el-main>
-            <file-selector @error="showFail" @success="showSuccess"/>
-
-            <div id="app-control">
-                <el-row class="mb-3">
-                    <span>歌曲命名格式：</span>
-                    <el-radio label="1" name="format" v-model="download_format">歌手-歌曲名</el-radio>
-                    <el-radio label="2" name="format" v-model="download_format">歌曲名</el-radio>
-                    <el-radio label="3" name="format" v-model="download_format">歌曲名-歌手</el-radio>
-                    <el-radio label="4" name="format" v-model="download_format">同原文件名</el-radio>
-                </el-row>
-                <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-tooltip class="item" effect="dark" placement="top-start">
-                        <div slot="content">
-                            当您使用此工具进行大量文件解锁的时候，建议开启此选项。<br/>
-                            开启后，解锁结果将不会存留于浏览器中，防止内存不足。
-                        </div>
-                        <el-checkbox border class="ml-2" v-model="instant_download">立即保存</el-checkbox>
-                    </el-tooltip>
-                </el-row>
-            </div>
-
-            <audio :autoplay="playing_auto" :src="playing_url" controls/>
-
-            <PreviewTable :filename_format="download_format" :table-data="tableData"
-                          @music_changed="changePlaying"></PreviewTable>
-
+            <Home/>
         </el-main>
         <el-footer id="app-footer">
             <el-row>
-                <a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>
-                (v{{ version }})：移除已购音乐的加密保护。
+                <a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>({{ version }})
+                ：移除已购音乐的加密保护。
                 <a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
             </el-row>
             <el-row>
@@ -51,38 +22,30 @@
             </el-row>
         </el-footer>
     </el-container>
-
 </template>
 
 <script>
 
-import FileSelector from "./component/FileSelector"
-import PreviewTable from "./component/PreviewTable"
-import {DownloadBlobMusic, RemoveBlobMusic} from "./component/utils"
-import config from "../package"
-import {IXAREA_API_ENDPOINT} from "@/decrypt/utils";
+import FileSelector from "@/component/FileSelector"
+import PreviewTable from "@/component/PreviewTable"
+import config from "@/../package.json"
+import Home from "@/view/Home";
+import {checkUpdate} from "@/utils/api";
 
 export default {
     name: 'app',
     components: {
         FileSelector,
-        PreviewTable
+        PreviewTable,
+        Home
     },
     data() {
         return {
             version: config.version,
-            activeIndex: '1',
-            tableData: [],
-            playing_url: "",
-            playing_auto: false,
-            download_format: '1',
-            instant_download: false,
         }
     },
     created() {
-        this.$nextTick(function () {
-            this.finishLoad();
-        });
+        this.$nextTick(() => this.finishLoad());
     },
     methods: {
         async finishLoad() {
@@ -90,20 +53,15 @@ export default {
             if (!!mask) mask.remove();
             let updateInfo;
             try {
-                const resp = await fetch(IXAREA_API_ENDPOINT + "/music/app-version", {
-                    method: "POST", headers: {"Content-Type": "application/json"},
-                    body: JSON.stringify({"Version": this.version})
-                });
-                updateInfo = await resp.json();
+                updateInfo = await checkUpdate(this.version)
             } catch (e) {
+                console.warn("check version info failed", e)
             }
-            if ((!!updateInfo && process.env.NODE_ENV === 'production') && (!!updateInfo.HttpsFound ||
-                (!!updateInfo.Found && window.location.protocol !== "https:"))) {
+            if ((updateInfo && process.env.NODE_ENV === 'production') && (updateInfo.HttpsFound ||
+                (updateInfo.Found && window.location.protocol !== "https:"))) {
                 this.$notify.warning({
                     title: '发现更新',
-                    message: '发现新版本 v' + updateInfo.Version +
-                        '<br/>更新详情：' + updateInfo.Detail +
-                        '<br/><a target="_blank" href="' + updateInfo.URL + '">获取更新</a>',
+                    message: `发现新版本 v${updateInfo.Version}<br/>更新详情：${updateInfo.Detail}<br/> <a target="_blank" href="${updateInfo.URL}">获取更新</a>`,
                     dangerouslyUseHTMLString: true,
                     duration: 15000,
                     position: 'top-left'
@@ -111,65 +69,12 @@ export default {
             } else {
                 this.$notify.info({
                     title: '离线使用',
-                    message: '我们使用PWA技术，无网络也能使用' +
-                        '<br/>最近更新：' + config.updateInfo +
-                        '<br/><a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
+                    message: `我们使用PWA技术，无网络也能使用<br/>最近更新：${config.updateInfo}<br/><a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>`,
                     dangerouslyUseHTMLString: true,
                     duration: 10000,
                     position: 'top-left'
                 });
             }
-        },
-        showSuccess(data) {
-            if (this.instant_download) {
-                DownloadBlobMusic(data, this.download_format);
-                RemoveBlobMusic(data);
-            } else {
-                this.tableData.push(data);
-                this.$notify.success({
-                    title: '解锁成功',
-                    message: '成功解锁 ' + data.title,
-                    duration: 3000
-                });
-            }
-            if (process.env.NODE_ENV === 'production') {
-                let _rp_data = [data.title, data.artist, data.album];
-                window._paq.push(["trackEvent", "Unlock", data.rawExt + "," + data.mime, JSON.stringify(_rp_data)]);
-            }
-        },
-        showFail(errInfo, filename) {
-            this.$notify.error({
-                title: '出现问题',
-                message: errInfo + "，" + filename +
-                    '，参考<a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
-                dangerouslyUseHTMLString: true,
-                duration: 6000
-            });
-            if (process.env.NODE_ENV === 'production') {
-                window._paq.push(["trackEvent", "Error", errInfo, filename]);
-            }
-            console.error(errInfo, filename);
-        },
-        changePlaying(url) {
-            this.playing_url = url;
-            this.playing_auto = true;
-        },
-        handleDeleteAll() {
-            this.tableData.forEach(value => {
-                RemoveBlobMusic(value);
-            });
-            this.tableData = [];
-        },
-        handleDownloadAll() {
-            let index = 0;
-            let c = setInterval(() => {
-                if (index < this.tableData.length) {
-                    DownloadBlobMusic(this.tableData[index], this.download_format);
-                    index++;
-                } else {
-                    clearInterval(c);
-                }
-            }, 300);
         }
     },
 }
diff --git a/src/component/FileSelector.vue b/src/component/FileSelector.vue
index 059a9f4..b5bd236 100644
--- a/src/component/FileSelector.vue
+++ b/src/component/FileSelector.vue
@@ -22,7 +22,7 @@
 <script>
 import {spawn, Worker, Pool} from "threads"
 import {CommonDecrypt} from "@/decrypt/common.ts";
-import {DecryptQueue} from "@/component/utils";
+import {DecryptQueue} from "@/utils/utils";
 
 export default {
     name: "FileSelector",
@@ -42,10 +42,10 @@ export default {
         }
     },
     mounted() {
-        if (window.Worker) {
+        if (window.Worker && process.env.NODE_ENV === 'production') {
             console.log("Using Worker Pool")
             this.queue = Pool(
-                () => spawn(new Worker('@/component/worker.ts')),
+                () => spawn(new Worker('@/utils/worker.ts')),
                 navigator.hardwareConcurrency || 1
             )
         } else {
@@ -64,7 +64,7 @@ export default {
                     this.$emit("success", await dec(file));
                 } catch (e) {
                     console.error(e)
-                    this.$emit("error", file)
+                    this.$emit("error", e, file.name)
                 } finally {
                     this.task_finished++
                 }
diff --git a/src/component/PreviewTable.vue b/src/component/PreviewTable.vue
index 105575b..1f70d12 100644
--- a/src/component/PreviewTable.vue
+++ b/src/component/PreviewTable.vue
@@ -11,22 +11,22 @@
             </template>
         </el-table-column>
         <el-table-column label="歌曲">
-            <template slot-scope="scope">
+            <template #default="scope">
                 <span>{{ scope.row.title }}</span>
             </template>
         </el-table-column>
         <el-table-column label="歌手">
-            <template slot-scope="scope">
+            <template #default="scope">
                 <p>{{ scope.row.artist }}</p>
             </template>
         </el-table-column>
         <el-table-column label="专辑">
-            <template slot-scope="scope">
+            <template #default="scope">
                 <p>{{ scope.row.album }}</p>
             </template>
         </el-table-column>
         <el-table-column label="操作">
-            <template slot-scope="scope">
+            <template #default="scope">
                 <el-button circle
                            icon="el-icon-video-play" type="success" @click="handlePlay(scope.$index, scope.row)">
                 </el-button>
@@ -42,25 +42,25 @@
 </template>
 
 <script>
-import {DownloadBlobMusic, RemoveBlobMusic} from '@/component/utils'
+import {DownloadBlobMusic, RemoveBlobMusic} from '@/utils/utils'
 
 export default {
     name: "PreviewTable",
     props: {
         tableData: {type: Array, required: true},
-        filename_format: {type: String, required: true}
+        policy: {type: Number, required: true}
     },
 
     methods: {
         handlePlay(index, row) {
-            this.$emit("music_changed", row.file);
+            this.$emit("play", row.file);
         },
         handleDelete(index, row) {
             RemoveBlobMusic(row);
             this.tableData.splice(index, 1);
         },
         handleDownload(row) {
-            DownloadBlobMusic(row, this.download_format)
+            DownloadBlobMusic(row, this.policy)
         },
     }
 }
diff --git a/src/decrypt/qmc.ts b/src/decrypt/qmc.ts
index 7c444f0..c394ed3 100644
--- a/src/decrypt/qmc.ts
+++ b/src/decrypt/qmc.ts
@@ -1,11 +1,11 @@
 import {QmcMask, QmcMaskDetectMflac, QmcMaskDetectMgg, QmcMaskGetDefault} from "./qmcMask";
-import {fromByteArray as Base64Encode, toByteArray as Base64Decode} from 'base64-js'
+import {toByteArray as Base64Decode} from 'base64-js'
 import {
     AudioMimeType,
     GetArrayBuffer,
     GetCoverFromFile,
     GetImageFromURL,
-    GetMetaFromFile, IXAREA_API_ENDPOINT,
+    GetMetaFromFile,
     SniffAudioExt, WriteMetaToFlac, WriteMetaToMp3
 } from "@/decrypt/utils.ts";
 import {parseBlob as metaParseBlob} from "music-metadata-browser";
@@ -13,6 +13,7 @@ import {parseBlob as metaParseBlob} from "music-metadata-browser";
 
 import iconv from "iconv-lite";
 import {DecryptResult} from "@/decrypt/entity";
+import {queryAlbumCover, queryKeyInfo, reportKeyUsage} from "@/utils/api";
 
 interface Handler {
     ext: string
@@ -51,7 +52,7 @@ export async function Decrypt(file: File, raw_filename: string, raw_ext: string)
         audioData = fileData.slice(0, keyPos);
         seed = handler.handler(audioData);
         keyData = fileData.slice(keyPos, keyPos + keyLen);
-        if (!seed) seed = await queryKeyInfo(keyData, raw_filename, raw_ext);
+        if (!seed) seed = await queryKey(keyData, raw_filename, raw_ext);
         if (!seed) throw raw_ext + "格式仅提供实验性支持";
     } else {
         audioData = fileData;
@@ -77,12 +78,12 @@ export async function Decrypt(file: File, raw_filename: string, raw_ext: string)
 
     const info = GetMetaFromFile(raw_filename, musicMeta.common.title, musicMeta.common.artist)
     if (keyData) reportKeyUsage(keyData, seed.getMatrix128(),
-        raw_filename, raw_ext, info.title, info.artist, musicMeta.common.album);
+        raw_filename, raw_ext, info.title, info.artist, musicMeta.common.album).then().catch();
 
     let imgUrl = GetCoverFromFile(musicMeta);
     if (!imgUrl) {
-        imgUrl = await queryAlbumCoverImage(info.title, info.artist, musicMeta.common.album);
-        if (imgUrl !== "") {
+        imgUrl = await getCoverImage(info.title, info.artist, musicMeta.common.album);
+        if (imgUrl) {
             const imageInfo = await GetImageFromURL(imgUrl);
             if (imageInfo) {
                 imgUrl = imageInfo.url
@@ -115,42 +116,22 @@ export async function Decrypt(file: File, raw_filename: string, raw_ext: string)
 }
 
 
-function reportKeyUsage(keyData: Uint8Array, maskData: number[], filename: string, format: string, title: string, artist?: string, album?: string) {
-    fetch(IXAREA_API_ENDPOINT + "/qmcmask/usage", {
-        method: "POST",
-        headers: {"Content-Type": "application/json"},
-        body: JSON.stringify({
-            Mask: Base64Encode(new Uint8Array(maskData)), Key: Base64Encode(keyData),
-            Artist: artist, Title: title, Album: album, Filename: filename, Format: format
-        }),
-    }).then().catch()
-}
-
-async function queryKeyInfo(keyData: Uint8Array, filename: string, format: string) {
+async function queryKey(keyData: Uint8Array, filename: string, format: string): Promise<QmcMask | undefined> {
     try {
-        const resp = await fetch(IXAREA_API_ENDPOINT + "/qmcmask/query", {
-            method: "POST",
-            headers: {"Content-Type": "application/json"},
-            body: JSON.stringify({Format: format, Key: Base64Encode(keyData), Filename: filename, Type: 44}),
-        });
-        let data = await resp.json();
+        const data = await queryKeyInfo(keyData, filename, format)
         return new QmcMask(Base64Decode(data.Matrix44));
     } catch (e) {
         console.warn(e);
     }
 }
 
-async function queryAlbumCoverImage(title: string, artist?: string, album?: string) {
+async function getCoverImage(title: string, artist?: string, album?: string): Promise<string> {
     const song_query_url = "https://stats.ixarea.com/apis" + "/music/qq-cover"
     try {
-        const params = new URLSearchParams([["Title", title], ["Artist", artist ?? ""], ["Album", album ?? ""]])
-        const resp = await fetch(`${song_query_url}?${params.toString()}`)
-        if (resp.ok) {
-            let data = await resp.json();
-            return song_query_url + "/" + data.Type + "/" + data.Id
-        }
+        const data = await queryAlbumCover(title, artist, album)
+        return `${song_query_url}/${data.Type}/${data.Id}`
     } catch (e) {
         console.warn(e);
     }
-    return "";
+    return ""
 }
diff --git a/src/decrypt/utils.ts b/src/decrypt/utils.ts
index 4b6314a..89408a5 100644
--- a/src/decrypt/utils.ts
+++ b/src/decrypt/utils.ts
@@ -21,8 +21,6 @@ export const AudioMimeType: { [key: string]: string } = {
     wav: "audio/x-wav"
 };
 
-export const IXAREA_API_ENDPOINT = "https://stats.ixarea.com/apis"
-
 
 export function BytesHasPrefix(data: Uint8Array, prefix: number[]): boolean {
     if (prefix.length > data.length) return false
diff --git a/src/utils/api.ts b/src/utils/api.ts
new file mode 100644
index 0000000..d349100
--- /dev/null
+++ b/src/utils/api.ts
@@ -0,0 +1,56 @@
+import {fromByteArray as Base64Encode} from "base64-js";
+
+export const IXAREA_API_ENDPOINT = "https://stats.ixarea.com/apis"
+
+export interface UpdateInfo {
+    Found: boolean
+    HttpsFound: boolean
+    Version: string
+    URL: string
+    Detail: string
+}
+
+export async function checkUpdate(version: string): Promise<UpdateInfo> {
+    const resp = await fetch(IXAREA_API_ENDPOINT + "/music/app-version", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({"Version": version})
+    });
+    return await resp.json();
+}
+
+export function reportKeyUsage(keyData: Uint8Array, maskData: number[], filename: string, format: string, title: string, artist?: string, album?: string) {
+    return fetch(IXAREA_API_ENDPOINT + "/qmcmask/usage", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({
+            Mask: Base64Encode(new Uint8Array(maskData)), Key: Base64Encode(keyData),
+            Artist: artist, Title: title, Album: album, Filename: filename, Format: format
+        }),
+    })
+}
+
+interface KeyInfo {
+    Matrix44: string
+}
+
+export async function queryKeyInfo(keyData: Uint8Array, filename: string, format: string): Promise<KeyInfo> {
+    const resp = await fetch(IXAREA_API_ENDPOINT + "/qmcmask/query", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({Format: format, Key: Base64Encode(keyData), Filename: filename, Type: 44}),
+    });
+    return await resp.json();
+}
+
+export interface CoverInfo {
+    Id: string
+    Type: number
+}
+
+export async function queryAlbumCover(title: string, artist?: string, album?: string): Promise<CoverInfo> {
+    const endpoint = IXAREA_API_ENDPOINT + "/music/qq-cover"
+    const params = new URLSearchParams([["Title", title], ["Artist", artist ?? ""], ["Album", album ?? ""]])
+    const resp = await fetch(`${endpoint}?${params.toString()}`)
+    return await resp.json()
+}
diff --git a/src/component/utils.ts b/src/utils/utils.ts
similarity index 60%
rename from src/component/utils.ts
rename to src/utils/utils.ts
index 89022bf..6e39f44 100644
--- a/src/component/utils.ts
+++ b/src/utils/utils.ts
@@ -1,20 +1,35 @@
 import {DecryptResult} from "@/decrypt/entity";
 
-export function DownloadBlobMusic(data: DecryptResult, format: string) {//todo: use enum
+export enum FilenamePolicy {
+    ArtistAndTitle,
+    TitleOnly,
+    TitleAndArtist,
+    SameAsOriginal,
+}
+
+export const FilenamePolicies: { key: FilenamePolicy, text: string }[] = [
+    {key: FilenamePolicy.ArtistAndTitle, text: "歌手-歌曲名"},
+    {key: FilenamePolicy.TitleOnly, text: "歌曲名"},
+    {key: FilenamePolicy.TitleAndArtist, text: "歌曲名-歌手"},
+    {key: FilenamePolicy.SameAsOriginal, text: "同源文件名"},
+]
+
+
+export function DownloadBlobMusic(data: DecryptResult, policy: FilenamePolicy) {
     const a = document.createElement('a');
     a.href = data.file;
-    switch (format) {
+    switch (policy) {
         default:
-        case "1":
+        case FilenamePolicy.ArtistAndTitle:
             a.download = data.artist + " - " + data.title + "." + data.ext;
             break;
-        case "2":
+        case FilenamePolicy.TitleOnly:
             a.download = data.title + "." + data.ext;
             break;
-        case "3":
+        case FilenamePolicy.TitleAndArtist:
             a.download = data.title + " - " + data.artist + "." + data.ext;
             break;
-        case "4":
+        case FilenamePolicy.SameAsOriginal:
             a.download = data.rawFilename + "." + data.ext;
             break;
     }
diff --git a/src/component/worker.ts b/src/utils/worker.ts
similarity index 100%
rename from src/component/worker.ts
rename to src/utils/worker.ts
diff --git a/src/view/Home.vue b/src/view/Home.vue
new file mode 100644
index 0000000..c2da5ca
--- /dev/null
+++ b/src/view/Home.vue
@@ -0,0 +1,111 @@
+<template>
+    <div>
+        <file-selector @error="showFail" @success="showSuccess"/>
+
+        <div id="app-control">
+            <el-row class="mb-3">
+                <span>歌曲命名格式：</span>
+                <el-radio v-for="k in FilenamePolicies" :key="k.key"
+                          v-model="filename_policy" :label="k.key">
+                    {{ k.text }}
+                </el-radio>
+            </el-row>
+            <el-row>
+                <el-button icon="el-icon-download" plain @click="handleDownloadAll">下载全部</el-button>
+                <el-button icon="el-icon-delete" plain type="danger" @click="handleDeleteAll">清除全部</el-button>
+
+                <el-tooltip class="item" effect="dark" placement="top-start">
+                    <div slot="content">
+                        当您使用此工具进行大量文件解锁的时候，建议开启此选项。<br/>
+                        开启后，解锁结果将不会存留于浏览器中，防止内存不足。
+                    </div>
+                    <el-checkbox v-model="instant_download" border class="ml-2">立即保存</el-checkbox>
+                </el-tooltip>
+            </el-row>
+        </div>
+
+        <audio :autoplay="playing_auto" :src="playing_url" controls/>
+
+        <PreviewTable :policy="filename_policy" :table-data="tableData" @play="changePlaying"/>
+    </div>
+</template>
+
+<script>
+
+import FileSelector from "../component/FileSelector"
+import PreviewTable from "../component/PreviewTable"
+import {DownloadBlobMusic, FilenamePolicy, FilenamePolicies, RemoveBlobMusic} from "@/utils/utils"
+
+export default {
+    name: 'Home',
+    components: {
+        FileSelector,
+        PreviewTable
+    },
+    data() {
+        return {
+            activeIndex: '1',
+            tableData: [],
+            playing_url: "",
+            playing_auto: false,
+            filename_policy: FilenamePolicy.ArtistAndTitle,
+            instant_download: false,
+            FilenamePolicies
+        }
+    },
+    methods: {
+        showSuccess(data) {
+            if (this.instant_download) {
+                DownloadBlobMusic(data, this.filename_policy);
+                RemoveBlobMusic(data);
+            } else {
+                this.tableData.push(data);
+                this.$notify.success({
+                    title: '解锁成功',
+                    message: '成功解锁 ' + data.title,
+                    duration: 3000
+                });
+            }
+            if (process.env.NODE_ENV === 'production') {
+                let _rp_data = [data.title, data.artist, data.album];
+                window._paq.push(["trackEvent", "Unlock", data.rawExt + "," + data.mime, JSON.stringify(_rp_data)]);
+            }
+        },
+        showFail(errInfo, filename) {
+            console.error(errInfo, filename)
+            this.$notify.error({
+                title: '出现问题',
+                message: errInfo + "，" + filename +
+                    '，参考<a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
+                dangerouslyUseHTMLString: true,
+                duration: 6000
+            });
+            if (process.env.NODE_ENV === 'production') {
+                window._paq.push(["trackEvent", "Error", errInfo, filename]);
+            }
+        },
+        changePlaying(url) {
+            this.playing_url = url;
+            this.playing_auto = true;
+        },
+        handleDeleteAll() {
+            this.tableData.forEach(value => {
+                RemoveBlobMusic(value);
+            });
+            this.tableData = [];
+        },
+        handleDownloadAll() {
+            let index = 0;
+            let c = setInterval(() => {
+                if (index < this.tableData.length) {
+                    DownloadBlobMusic(this.tableData[index], this.filename_policy);
+                    index++;
+                } else {
+                    clearInterval(c);
+                }
+            }, 300);
+        }
+    },
+}
+</script>
+