From a35275c5c9c0d821b71a70d2642ecbb2dddda340 Mon Sep 17 00:00:00 2001
From: Jixun Wu <jixun.moe@gmail.com>
Date: Sun, 7 May 2023 19:18:07 +0100
Subject: [PATCH] fix: styling in the homepage

---
 src/App.vue                    | 19 ++++----
 src/component/FileSelector.vue | 85 +++++++++++++++++++---------------
 src/decrypt/index.ts           |  5 +-
 src/scss/_normal.scss          | 14 ++++--
 src/view/Home.vue              |  4 +-
 5 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 67f4c4f..3c4ed26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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);
diff --git a/src/component/FileSelector.vue b/src/component/FileSelector.vue
index 2ba5cf3..ca111cd 100644
--- a/src/component/FileSelector.vue
+++ b/src/component/FileSelector.vue
@@ -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';
diff --git a/src/decrypt/index.ts b/src/decrypt/index.ts
index e7c464b..a4b677d 100644
--- a/src/decrypt/index.ts
+++ b/src/decrypt/index.ts
@@ -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 '不支持此文件格式';
   }
diff --git a/src/scss/_normal.scss b/src/scss/_normal.scss
index 2d2dfd3..d6a984b 100644
--- a/src/scss/_normal.scss
+++ b/src/scss/_normal.scss
@@ -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 {
diff --git a/src/view/Home.vue b/src/view/Home.vue
index 3cc0442..9f81138 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -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"