fix: styling in the homepage
This commit is contained in:
parent
c66e52f9df
commit
a35275c5c9
19
src/App.vue
19
src/App.vue
|
@ -4,22 +4,23 @@
|
||||||
<Home />
|
<Home />
|
||||||
</el-main>
|
</el-main>
|
||||||
<el-footer id="app-footer">
|
<el-footer id="app-footer">
|
||||||
<el-row>
|
<p>
|
||||||
<a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>({{ 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>
|
<a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
|
||||||
</el-row>
|
</p>
|
||||||
<el-row>
|
<p>
|
||||||
目前支持 网易云音乐(ncm), QQ音乐(qmc, mflac, mgg), 酷狗音乐(kgm), 虾米音乐(xm), 酷我音乐(.kwm)
|
目前支持 网易云音乐(ncm), QQ音乐(qmc, mflac, mgg), 酷狗音乐(kgm), 虾米音乐(xm), 酷我音乐(.kwm)
|
||||||
<a href="https://github.com/ix64/unlock-music/blob/master/README.md" target="_blank">更多</a>。
|
<a href="https://github.com/ix64/unlock-music/blob/master/README.md" target="_blank">更多</a>。
|
||||||
</el-row>
|
</p>
|
||||||
<el-row>
|
<p>
|
||||||
<!--如果进行二次开发,此行版权信息不得移除且应明显地标注于页面上-->
|
<!--如果进行二次开发,此行版权信息不得移除且应明显地标注于页面上-->
|
||||||
<span>Copyright © 2019 - {{ new Date().getFullYear() }} MengYX</span>
|
<span>Copyright © 2019 - {{ new Date().getFullYear() }} MengYX</span>
|
||||||
音乐解锁使用
|
音乐解锁使用
|
||||||
<a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
|
<a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
|
||||||
开放源代码
|
开放源代码
|
||||||
</el-row>
|
</p>
|
||||||
</el-footer>
|
</el-footer>
|
||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
|
@ -52,7 +53,7 @@ export default defineComponent({
|
||||||
methods: {
|
methods: {
|
||||||
async finishLoad() {
|
async finishLoad() {
|
||||||
const mask = document.getElementById('loader-mask');
|
const mask = document.getElementById('loader-mask');
|
||||||
if (!!mask) mask.remove();
|
if (mask) mask.remove();
|
||||||
let updateInfo;
|
let updateInfo;
|
||||||
try {
|
try {
|
||||||
updateInfo = await checkUpdate(this.version);
|
updateInfo = await checkUpdate(this.version);
|
||||||
|
|
|
@ -1,44 +1,53 @@
|
||||||
<template>
|
<template>
|
||||||
<el-upload :auto-upload="false" :on-change="addFile" :show-file-list="false" action="" drag multiple>
|
<div class="decrypt-file-selector">
|
||||||
<el-icon size="80"><UploadFilled /></el-icon>
|
<el-upload :auto-upload="false" :on-change="addFile" :show-file-list="false" action="" drag multiple>
|
||||||
<div>将文件拖到此处,或 <em>点击选择</em></div>
|
<el-icon size="80"><UploadFilled /></el-icon>
|
||||||
<template #tip>
|
<div>将文件拖到此处,或 <em>点击选择</em></div>
|
||||||
<div>
|
<template #tip> </template>
|
||||||
仅在浏览器内对文件进行解锁,无需消耗流量
|
<transition name="el-fade-in">
|
||||||
<el-tooltip effect="dark" placement="top-start">
|
<!--todo: add delay to animation-->
|
||||||
<template #content> 算法在源代码中已经提供,所有运算都发生在本地 </template>
|
<el-progress
|
||||||
<el-icon size="12">
|
v-show="progress_show"
|
||||||
<InfoFilled />
|
:format="progress_string"
|
||||||
</el-icon>
|
:percentage="progress_value"
|
||||||
</el-tooltip>
|
:stroke-width="16"
|
||||||
</div>
|
:text-inside="true"
|
||||||
<div>
|
style="margin: 16px 6px 0 6px"
|
||||||
工作模式: {{ parallel ? '多线程 Worker' : '单线程 Queue' }}
|
></el-progress>
|
||||||
<el-tooltip effect="dark" placement="top-start">
|
</transition>
|
||||||
<template #content>
|
</el-upload>
|
||||||
将此工具部署在HTTPS环境下,可以启用Web Worker特性,<br />
|
</div>
|
||||||
从而更快的利用并行处理完成解锁
|
<div>
|
||||||
</template>
|
仅在浏览器内对文件进行解锁,无需消耗流量
|
||||||
<el-icon size="12">
|
<el-tooltip effect="dark" placement="top-start">
|
||||||
<InfoFilled />
|
<template #content> 算法在源代码中已经提供,所有运算都发生在本地 </template>
|
||||||
</el-icon>
|
<el-icon size="12">
|
||||||
</el-tooltip>
|
<InfoFilled />
|
||||||
</div>
|
</el-icon>
|
||||||
</template>
|
</el-tooltip>
|
||||||
<transition name="el-fade-in"
|
</div>
|
||||||
><!--todo: add delay to animation-->
|
<div>
|
||||||
<el-progress
|
工作模式: {{ parallel ? '多线程任务' : '单线程队列' }}
|
||||||
v-show="progress_show"
|
<el-tooltip effect="dark" placement="top-start">
|
||||||
:format="progress_string"
|
<template #content>
|
||||||
:percentage="progress_value"
|
将此工具部署在 HTTPS 环境下,可以利用 Web Worker 的多线程特性,<br />
|
||||||
:stroke-width="16"
|
从而更快的利用并行处理完成解锁
|
||||||
:text-inside="true"
|
</template>
|
||||||
style="margin: 16px 6px 0 6px"
|
<el-icon size="12">
|
||||||
></el-progress>
|
<InfoFilled />
|
||||||
</transition>
|
</el-icon>
|
||||||
</el-upload>
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.decrypt-file-selector {
|
||||||
|
max-width: 360px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { spawn, Worker, Pool } from 'threads';
|
import { spawn, Worker, Pool } from 'threads';
|
||||||
import { Decrypt } from '@/decrypt';
|
import { Decrypt } from '@/decrypt';
|
||||||
|
|
|
@ -71,7 +71,6 @@ export async function Decrypt(file: FileInfo, config: Record<string, any>): Prom
|
||||||
case 'mggl': //QQ Music Mac
|
case 'mggl': //QQ Music Mac
|
||||||
case 'mflac': //QQ Music New Flac
|
case 'mflac': //QQ Music New Flac
|
||||||
case 'mflac0': //QQ Music New Flac
|
case 'mflac0': //QQ Music New Flac
|
||||||
case 'mflach': //QQ Music New Flac
|
|
||||||
case 'mgg': //QQ Music New Ogg
|
case 'mgg': //QQ Music New Ogg
|
||||||
case 'mgg1': //QQ Music New Ogg
|
case 'mgg1': //QQ Music New Ogg
|
||||||
case 'mgg0':
|
case 'mgg0':
|
||||||
|
@ -102,8 +101,8 @@ export async function Decrypt(file: FileInfo, config: Record<string, any>): Prom
|
||||||
case 'x3m':
|
case 'x3m':
|
||||||
rt_data = await XimalayaDecrypt(file.raw, raw.name, raw.ext);
|
rt_data = await XimalayaDecrypt(file.raw, raw.name, raw.ext);
|
||||||
break;
|
break;
|
||||||
case 'mflach': //QQ Music New Flac
|
case 'mflach': //QQ Music (Mac)
|
||||||
throw '网页版无法解锁,请使用<a target="_blank" href="https://git.unlock-music.dev/um/cli">CLI版本</a>'
|
throw '网页版无法解锁,请使用<a target="_blank" href="https://git.unlock-music.dev/um/cli">CLI版本</a>';
|
||||||
default:
|
default:
|
||||||
throw '不支持此文件格式';
|
throw '不支持此文件格式';
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,14 +11,18 @@ body {
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-footer a {
|
|
||||||
padding-left: 0.2em;
|
|
||||||
padding-right: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-footer {
|
#app-footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding-left: 0.2em;
|
||||||
|
padding-right: 0.2em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-control {
|
#app-control {
|
||||||
|
|
|
@ -3,13 +3,13 @@
|
||||||
<file-selector @error="showFail" @success="showSuccess" />
|
<file-selector @error="showFail" @success="showSuccess" />
|
||||||
|
|
||||||
<div id="app-control">
|
<div id="app-control">
|
||||||
<el-row class="mb-3">
|
<el-row class="mb-3" justify="center" align="middle">
|
||||||
<span>歌曲命名格式:</span>
|
<span>歌曲命名格式:</span>
|
||||||
<el-radio v-for="k in FilenamePolicies" :key="k.key" v-model="filename_policy" :label="k.key">
|
<el-radio v-for="k in FilenamePolicies" :key="k.key" v-model="filename_policy" :label="k.key">
|
||||||
{{ k.text }}
|
{{ k.text }}
|
||||||
</el-radio>
|
</el-radio>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row>
|
<el-row justify="center" align="middle">
|
||||||
<edit-dialog
|
<edit-dialog
|
||||||
:show="showEditDialog"
|
:show="showEditDialog"
|
||||||
:picture="editing_data.picture"
|
:picture="editing_data.picture"
|
||||||
|
|
Loading…
Reference in New Issue