refactor: deep link for faq

src/faq/AndroidEmulatorFAQ.tsx

@@ -0,0 +1,75 @@
+import { ExtLink } from '~/components/ExtLink';
+import { Header2, Header3, Header4 } from '~/components/HelpText/Headers';
+import { VQuote } from '~/components/HelpText/VQuote';
+import { RiErrorWarningLine } from 'react-icons/ri';
+
+import LdPlayerSettingsMisc2x from './assets/[email protected]';
+import MumuSettingsMisc2x from './assets/[email protected]';
+import { ImageFigure } from '~/components/ImageFigure';
+
+export function AndroidEmulatorFAQ() {
+  return (
+    <>
+      <Header2>安卓模拟器</Header2>
+      <p className="mb-2">目前市面上主流的可以很方便 root 的安卓模拟器有两个：</p>
+
+      <ul className="list-disc pl-6 mb-2">
+        <li>
+          <ExtLink href="https://mumu.163.com/">网易 MuMu 模拟器（安卓 12）</ExtLink> - Hyper-V 兼容较好
+        </li>
+        <li>
+          <ExtLink href="https://www.ldmnq.com/">雷电模拟器（安卓 9）</ExtLink>
+        </li>
+      </ul>
+
+      <p className="mb-2">上述两款模拟器均包含广告，使用时请注意。</p>
+
+      <div className="my-2 alert alert-warning">
+        <RiErrorWarningLine className="text-lg" />
+        <p>
+          根据应用的风控策略，使用模拟器登录的账号<strong>有可能会导致账号被封锁</strong>。
+        </p>
+      </div>
+      <p className="mb-2">读者在使用前请自行评估风险。</p>
+
+      <Header3 id="enable-root">启用 root</Header3>
+      <p className="mb-2">上述的两款模拟器都有提供比较直接的启用 root 的方法。</p>
+
+      <Header4 id="root-mumu">网易 MuMu 模拟器</Header4>
+      <ul className="list-disc pl-6">
+        <li>
+          打开<VQuote>设置中心</VQuote>
+        </li>
+        <li>
+          选择<VQuote>其他</VQuote>
+        </li>
+        <li>
+          勾选<VQuote>开启手机Root权限</VQuote>
+        </li>
+      </ul>
+      <div>
+        <ImageFigure className="ml-2" alt="网易木木模拟器设置界面" loading="lazy" srcSet={`${MumuSettingsMisc2x} 2x`}>
+          网易木木模拟器设置界面
+        </ImageFigure>
+      </div>
+
+      <Header4 id="root-ld">雷电模拟器</Header4>
+      <ul className="list-disc pl-6">
+        <li>
+          打开<VQuote>模拟器设置</VQuote>
+        </li>
+        <li>
+          选择<VQuote>其他</VQuote>
+        </li>
+        <li>
+          设置<VQuote>ROOT 权限</VQuote>为<VQuote>开启</VQuote>状态
+        </li>
+      </ul>
+      <div>
+        <ImageFigure className="ml-2" alt="雷电模拟器设置界面" loading="lazy" srcSet={`${LdPlayerSettingsMisc2x} 2x`}>
+          雷电模拟器设置界面
+        </ImageFigure>
+      </div>
+    </>
+  );
+}

src/faq/FAQPages.tsx

@@ -0,0 +1,20 @@
+import type { ComponentType } from 'react';
+import { QQMusicFAQ } from './QQMusicFAQ';
+import { KuwoFAQ } from './KuwoFAQ';
+import { KugouFAQ } from './KugouFAQ';
+import { OtherFAQ } from './OtherFAQ';
+import { AndroidEmulatorFAQ } from './AndroidEmulatorFAQ';
+
+export type FAQEntry = {
+  id: string;
+  name: string;
+  Component: ComponentType;
+};
+
+export const FAQ_PAGES: FAQEntry[] = [
+  { id: 'qqmusic', name: 'QQ 音乐', Component: QQMusicFAQ },
+  { id: 'kuwo', name: '酷我音乐', Component: KuwoFAQ },
+  { id: 'kugou', name: '酷狗音乐', Component: KugouFAQ },
+  { id: 'android-emu', name: '安卓模拟器', Component: AndroidEmulatorFAQ },
+  { id: 'other', name: '其它问题', Component: OtherFAQ },
+];

src/faq/FaqHome.tsx

@@ -0,0 +1,14 @@
+import { ExtLink } from '~/components/ExtLink';
+
+export function FaqHome() {
+  return (
+    <div className="flex flex-col gap-4">
+      <h1 className="text-2xl font-bold">答疑</h1>
+      <p>从目录选择一项来查看相关说明。</p>
+      <p>
+        也欢迎造访
+        <ExtLink href={'https://t.me/unlock_music_chat'}>“音乐解锁-交流” 交流群</ExtLink> 进行交流。
+      </p>
+    </div>
+  );
+}

src/faq/KugouFAQ.tsx

@@ -1,4 +1,4 @@
-import { Header4 } from '~/components/HelpText/Headers';
+import { Header2, Header3 } from '~/components/HelpText/Headers';
 import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions';
 import { KugouAllInstructions } from '~/features/settings/panels/Kugou/KugouAllInstructions.tsx';
 import { RiErrorWarningLine } from 'react-icons/ri';
@@ -6,19 +6,19 @@ import { RiErrorWarningLine } from 'react-icons/ri';
 export function KugouFAQ() {
   return (
     <>
-      <Header4>解锁失败</Header4>
-      <p>
+      <Header2>酷狗音乐</Header2>
+      <Header3 id="failed">解锁失败</Header3>
+      <p className="mb-2">
         酷狗现在对部分用户推送了 <code>kgg</code> 加密格式（安卓、Windows 客户端）。
       </p>
-      <p className="my-4">根据平台不同，你需要提取密钥数据库。</p>
+      <p className="mb-2">根据平台不同，你需要提取密钥数据库。</p>
 
-      <div className="p-2 @container">
-        <div className="alert alert-warning">
-          <RiErrorWarningLine className="size-6" />
-          <p>安卓用户提取密钥需要 root 权限，或注入文件提供器。</p>
-        </div>
+      <div className="alert alert-warning mb-2">
+        <RiErrorWarningLine className="size-6" />
+        <p>安卓用户提取密钥需要 root 权限，或注入文件提供器。</p>
       </div>
 
+      <Header3 id="keys">导入密钥</Header3>
       <SegmentKeyImportInstructions tab="酷狗密钥" clientInstructions={<KugouAllInstructions />} />
     </>
   );

src/faq/KuwoFAQ.tsx

@@ -1,4 +1,4 @@
-import { Header4 } from '~/components/HelpText/Headers';
+import { Header2, Header3 } from '~/components/HelpText/Headers';
 import { VQuote } from '~/components/HelpText/VQuote';
 import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
 import { HiWord } from '~/components/HelpText/HiWord';
@@ -9,9 +9,10 @@ import { RiErrorWarningLine } from 'react-icons/ri';
 export function KuwoFAQ() {
   return (
     <>
-      <Header4>解锁失败</Header4>
+      <Header2>酷我音乐</Header2>
+      <Header3 id="failed">解锁失败</Header3>
       <SegmentTryOfficialPlayer />
-      <p className="my-4">
+      <p className="mb-2">
         日前，仅<HiWord>手机客户端</HiWord>下载的
         <VQuote>
           <strong>至臻全景声</strong>
@@ -22,10 +23,11 @@ export function KuwoFAQ() {
         </VQuote>
         音质的音乐文件采用新版加密。
       </p>
-      <p className="my-4">其他音质目前不需要提取密钥。</p>
-      <p className="my-4">PC平台暂未推出使用新版加密的音质。</p>
+      <p className="mb-2">其他音质目前不需要提取密钥。</p>
+      <p className="mb-2">PC平台暂未推出使用新版加密的音质。</p>
 
-      <div className="alert alert-warning mb-4">
+      <Header3 id="keys">导入密钥</Header3>
+      <div className="alert alert-warning my-2">
         <RiErrorWarningLine className="text-2xl" />
         <div>
           <p>安卓用户提取密钥需要 root 权限，或注入文件提供器。</p>

src/faq/OtherFAQ.tsx

@@ -1,20 +1,18 @@
 import { ExtLink } from '~/components/ExtLink';
-import { Header4, Header5 } from '~/components/HelpText/Headers';
-import { VQuote } from '~/components/HelpText/VQuote';
+import { Header2, Header3, Header4 } from '~/components/HelpText/Headers';
 import { ProjectIssue } from '~/components/ProjectIssue';
-import { RiErrorWarningLine } from 'react-icons/ri';
 
-import LdPlayerSettingsMisc2x from './assets/[email protected]';
-import MumuSettingsMisc2x from './assets/[email protected]';
+import { NavLink } from 'react-router';
 
 export function OtherFAQ() {
   return (
     <>
-      <Header4>解密后没有封面等信息</Header4>
+      <Header2>其它问题</Header2>
+      <Header3 id="metadata">解密后没有封面等信息</Header3>
       <p>该项目进行解密处理。如果加密前的资源没有内嵌元信息或封面，解密的文件也没有。</p>
       <p>请使用第三方工具进行编辑或管理元信息。</p>
 
-      <Header4>批量下载</Header4>
+      <Header3 id="batch-dl">批量下载</Header3>
       <p>
         {'暂时没有实现，不过你可以在 '}
         <ProjectIssue id={34} title="[UI] 全部下载功能" />
@@ -23,11 +21,11 @@ export function OtherFAQ() {
         {' 追踪该问题。'}
       </p>
 
-      <Header4>安卓: 浏览器支持说明</Header4>
+      <Header3 id="android-browsers">安卓: 浏览器支持说明</Header3>
       <p>⚠️ 手机端浏览器支持有限，请使用最新版本的 Chrome 或 Firefox 官方浏览器。</p>
       <div className="flex flex-col md:flex-row gap-2 md:gap-8">
         <div>
-          <Header5>已知有问题的浏览器</Header5>
+          <Header4>已知有问题的浏览器</Header4>
           <ul className="list-disc list-inside pl-2">
             <li>Via 浏览器</li>
             <li>夸克浏览器</li>
@@ -36,7 +34,7 @@ export function OtherFAQ() {
         </div>
 
         <div>
-          <Header5>可能会遇到的问题包括</Header5>
+          <Header4>可能会遇到的问题包括</Header4>
           <ul className="list-disc list-inside pl-2">
             <li>网页白屏</li>
             <li>无法下载解密后内容</li>
@@ -45,70 +43,20 @@ export function OtherFAQ() {
         </div>
       </div>
 
-      <Header4>安卓: root 相关说明</Header4>
+      <Header3 id="android-root">安卓 root</Header3>
       <p>
         对安卓设备获取 root 特权通常会破坏系统的完整性并导致部分功能无法使用。
         例如部分厂商的安卓设备会在解锁后丧失保修资格，或导致无法使用 NFC 移动支付等限制。
       </p>
-      <p className="my-2">如果希望不破坏系统完整性，你可以考虑在电脑上使用安卓模拟器。</p>
       <p className="my-2">
-        很多安卓模拟器都提供了 root 特权支持，可以很方便的启用，例如
-        <VQuote>
-          <ExtLink href="https://mumu.163.com/">网易 MuMu 模拟器（安卓 12，推荐）</ExtLink>
-        </VQuote>
-        或
-        <VQuote>
-          <ExtLink href="https://www.ldmnq.com/">雷电模拟器（安卓 9）</ExtLink>
-        </VQuote>
+        如果希望不破坏系统完整性，你可以考虑在电脑上使用
+        <NavLink className="link link-info" to="/questions/android-emu">
+          安卓模拟器
+        </NavLink>
         。
       </p>
 
-      <div className="my-4 alert alert-warning">
-        <RiErrorWarningLine className="text-lg" />
-        <div>
-          <p>
-            根据应用的风控策略，使用模拟器登录的账号<strong>有可能会导致账号被封锁</strong>。
-          </p>
-          <p>使用前请自行评估风险。</p>
-        </div>
-      </div>
-
-      <p>以下是为上述模拟器启用 root 的方式：</p>
-      <div className="grid grid-cols-1 gap-2 md:gap-4 lg:grid-cols-2">
-        <div>
-          <Header5>网易 MuMu模拟器</Header5>
-          <ul className="list-disc pl-6">
-            <li>
-              打开<VQuote>设置中心</VQuote>
-            </li>
-            <li>
-              选择<VQuote>其他</VQuote>
-            </li>
-            <li>
-              勾选<VQuote>开启手机Root权限</VQuote>
-            </li>
-          </ul>
-          <img className="rounded-md border border-base-300" loading="lazy" srcSet={`${MumuSettingsMisc2x} 2x`} />
-        </div>
-
-        <div>
-          <Header5>雷电模拟器</Header5>
-          <ul className="list-disc pl-6">
-            <li>
-              打开<VQuote>模拟器设置</VQuote>
-            </li>
-            <li>
-              选择<VQuote>其他</VQuote>
-            </li>
-            <li>
-              设置<VQuote>ROOT 权限</VQuote>为<VQuote>开启</VQuote>状态
-            </li>
-          </ul>
-          <img className="rounded-md border border-base-300" loading="lazy" srcSet={`${LdPlayerSettingsMisc2x} 2x`} />
-        </div>
-      </div>
-
-      <Header4>相关项目</Header4>
+      <Header3 id="projects">相关项目</Header3>
       <ul className="list-disc pl-6">
         <li>
           <p>
@@ -150,7 +98,7 @@ export function OtherFAQ() {
         </li>
       </ul>
 
-      <Header4>有更多问题？</Header4>
+      <Header3 id="more-questions">有更多问题？</Header3>
       <p className="flex flex-row gap-1">
         欢迎加入
         <ExtLink href={'https://t.me/unlock_music_chat'}>“音乐解锁-交流” 交流群</ExtLink>

src/faq/QQMusicFAQ.tsx

@@ -1,17 +1,24 @@
-import { Header4 } from '~/components/HelpText/Headers';
+import { Header2, Header3 } from '~/components/HelpText/Headers';
 import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
 import { QMCv2QQMusicAllInstructions } from '~/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions';
 
 export function QQMusicFAQ() {
   return (
     <>
-      <Header4>解锁失败</Header4>
+      <Header2>QQ 音乐</Header2>
+      <Header3 id="failed">解锁失败</Header3>
       <SegmentTryOfficialPlayer />
-      <p className="my-4">重复下载同一首的歌曲不重复扣下载配额，但是同一首歌的两个版本会重复扣下载配额，请仔细分辨。</p>
-      <p className="mb-4">
+      <p className="mb-2">新版本的 QQ 音乐客户端下载的文件通常都需要导入密钥数据库。</p>
+      <p className="mb-2">每一个资源（即一首歌的某个音质）都有独立的密钥，下载音乐时会被写出到密钥数据库中。</p>
+      <p className="mb-2">因此若是解密失败，很有可能是因为你需要导入密钥，或降级客户端。</p>
+
+      <Header3 id="about-download">关于下载</Header3>
+      <p>重复下载同一首的歌曲不重复扣下载配额，但是同一首歌的两个版本会重复扣下载配额，请仔细分辨。</p>
+      <p className="my-2">
         部分平台获取的加密文件未包含密钥。选择你<strong>下载文件时</strong>使用的客户端来查看说明。
       </p>
 
+      <Header3 id="keys-or-downgrade">导入密钥或降级客户端</Header3>
       <QMCv2QQMusicAllInstructions />
     </>
   );

src/faq/SegmentTryOfficialPlayer.tsx

@@ -2,7 +2,7 @@ import { RiErrorWarningLine } from 'react-icons/ri';
 
 export function SegmentTryOfficialPlayer({ className = '' }: { className?: string }) {
   return (
-    <div className={`alert alert-warning ${className}`}>
+    <div className={`alert alert-warning my-2 ${className}`}>
       <RiErrorWarningLine className="text-2xl" />
       <p>尝试用下载音乐的设备播放一次看看，如果官方客户端都无法播放，那解锁肯定会失败哦。</p>
     </div>