um/web
um
/
web
80
146
Fork 59
Code Issues 15 Pull Requests 1 Packages Projects Releases 2 Wiki Activity

fix: styling in the homepage

This commit is contained in:
Jixun Wu 2023-05-07 19:18:07 +01:00
parent c66e52f9df
commit a35275c5c9
5 changed files with 70 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.vue
View File

@ -4,22 +4,23 @@
<Home />
</el-main>
<el-footer id="app-footer">
<el-row>
<a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>({{ version }})
：移除已购音乐的加密保护。
<p>
<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>
</p>
<p>
目前支持 网易云音乐(ncm), QQ音乐(qmc, mflac, mgg), 酷狗音乐(kgm), 虾米音乐(xm), 酷我音乐(.kwm)
<a href="https://github.com/ix64/unlock-music/blob/master/README.md" target="_blank">更多</a>。
</el-row>
<el-row>
</p>
<p>
<!--如果进行二次开发，此行版权信息不得移除且应明显地标注于页面上-->
<span>Copyright &copy; 2019 - {{ new Date().getFullYear() }} MengYX</span>
音乐解锁使用
<a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
开放源代码
</el-row>
</p>
</el-footer>
</el-container>
</template>
@ -52,7 +53,7 @@ export default defineComponent({
methods: {
async finishLoad() {
const mask = document.getElementById('loader-mask');
if (!!mask) mask.remove();
if (mask) mask.remove();
let updateInfo;
try {
updateInfo = await checkUpdate(this.version);

85
src/component/FileSelector.vue
View File

@ -1,44 +1,53 @@
<template>
<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>
<div>
仅在浏览器内对文件进行解锁，无需消耗流量
<el-tooltip effect="dark" placement="top-start">
<template #content> 算法在源代码中已经提供，所有运算都发生在本地 </template>
<el-icon size="12">
<InfoFilled />
</el-icon>
</el-tooltip>
</div>
<div>
工作模式: {{ parallel ? '多线程 Worker' : '单线程 Queue' }}
<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>
<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 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';

5
src/decrypt/index.ts
View File

@ -71,7 +71,6 @@ export async function Decrypt(file: FileInfo, config: Record<string, any>): Prom
case 'mggl': //QQ Music Mac
case 'mflac': //QQ Music New Flac
case 'mflac0': //QQ Music New Flac
case 'mflach': //QQ Music New Flac
case 'mgg': //QQ Music New Ogg
case 'mgg1': //QQ Music New Ogg
case 'mgg0':
@ -102,8 +101,8 @@ export async function Decrypt(file: FileInfo, config: Record<string, any>): Prom
case 'x3m':
rt_data = await XimalayaDecrypt(file.raw, raw.name, raw.ext);
break;
case 'mflach': //QQ Music New Flac
throw '网页版无法解锁，请使用<a target="_blank" href="https://git.unlock-music.dev/um/cli">CLI版本</a>'
case 'mflach': //QQ Music (Mac)
throw '网页版无法解锁，请使用<a target="_blank" href="https://git.unlock-music.dev/um/cli">CLI版本</a>';
default:
throw '不支持此文件格式';
}

14
src/scss/_normal.scss
View File

@ -11,14 +11,18 @@ body {
padding-top: 30px;
}
#app-footer a {
padding-left: 0.2em;
padding-right: 0.2em;
}
#app-footer {
text-align: center;
font-size: small;
p {
margin: 0;
}
a {
padding-left: 0.2em;
padding-right: 0.2em;
}
}
#app-control {

4
src/view/Home.vue
View File

@ -3,13 +3,13 @@
<file-selector @error="showFail" @success="showSuccess" />
<div id="app-control">
<el-row class="mb-3">
<el-row class="mb-3" justify="center" align="middle">
<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-row justify="center" align="middle">
<edit-dialog
:show="showEditDialog"
:picture="editing_data.picture"