From a0bab2996635bc96da174e9d41eeff33f4a3a9e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= <lu.shuren@um-react.app>
Date: Thu, 2 Nov 2023 23:57:36 +0000
Subject: [PATCH] docs: update faq to include valid version of qmpc #52

---
 .../AndroidADBPullInstruction.tsx             |  6 ++---
 src/components/ExtLink.tsx                    | 12 ++++++++++
 src/faq/OtherFAQ.tsx                          |  9 +++----
 src/faq/QQMusicFAQ.tsx                        | 24 +++++++++++++++++--
 src/features/file-listing/FileRow.tsx         |  2 +-
 5 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 src/components/ExtLink.tsx

diff --git a/src/components/AndroidADBPullInstruction/AndroidADBPullInstruction.tsx b/src/components/AndroidADBPullInstruction/AndroidADBPullInstruction.tsx
index b489e41..a0391a1 100644
--- a/src/components/AndroidADBPullInstruction/AndroidADBPullInstruction.tsx
+++ b/src/components/AndroidADBPullInstruction/AndroidADBPullInstruction.tsx
@@ -7,7 +7,6 @@ import {
   Box,
   Code,
   Heading,
-  Link,
   ListItem,
   OrderedList,
   Text,
@@ -19,6 +18,7 @@ import hljsStyleGitHub from 'react-syntax-highlighter/dist/esm/styles/hljs/githu
 
 import PowerShellAdbDumpCommandTemplate from './adb_dump.ps1?raw';
 import ShellAdbDumpCommandTemplate from './adb_dump.sh?raw';
+import { ExtLink } from '../ExtLink';
 
 const applyTemplate = (tpl: string, values: Record<string, unknown>) => {
   return tpl.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, key) => (Object.hasOwn(values, key) ? String(values[key]) : '<nil>'));
@@ -96,9 +96,9 @@ export function AndroidADBPullInstruction({ dir, file }: AndroidADBPullInstructi
                 </Text>
                 <Text>
                   💡 如果没有，可以
-                  <Link href="https://scoop.sh/#/apps?q=adb" isExternal>
+                  <ExtLink href="https://scoop.sh/#/apps?q=adb">
                     使用 Scoop 安装 <ExternalLinkIcon />
-                  </Link>
+                  </ExtLink>
                   。
                 </Text>
               </ListItem>
diff --git a/src/components/ExtLink.tsx b/src/components/ExtLink.tsx
new file mode 100644
index 0000000..88cf76d
--- /dev/null
+++ b/src/components/ExtLink.tsx
@@ -0,0 +1,12 @@
+import type { AnchorHTMLAttributes } from 'react';
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+import { Link } from '@chakra-ui/react';
+
+export function ExtLink({ children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <Link isExternal {...props} rel="noreferrer noopener nofollow">
+      {children}
+      <ExternalLinkIcon />
+    </Link>
+  );
+}
diff --git a/src/faq/OtherFAQ.tsx b/src/faq/OtherFAQ.tsx
index f044698..c98c318 100644
--- a/src/faq/OtherFAQ.tsx
+++ b/src/faq/OtherFAQ.tsx
@@ -1,5 +1,5 @@
-import { ExternalLinkIcon } from '@chakra-ui/icons';
-import { Link, Text } from '@chakra-ui/react';
+import { Text } from '@chakra-ui/react';
+import { ExtLink } from '~/components/ExtLink';
 import { Header4 } from '~/components/HelpText/Header4';
 import { ProjectIssue } from '~/components/ProjectIssue';
 
@@ -17,10 +17,7 @@ export function OtherFAQ() {
       <Header4>有更多问题？</Header4>
       <Text>
         {'欢迎进入 '}
-        <Link href={'https://t.me/unlock_music_chat'} isExternal>
-          Telegram “音乐解锁-交流” 交流群
-          <ExternalLinkIcon />
-        </Link>
+        <ExtLink href={'https://t.me/unlock_music_chat'}>Telegram “音乐解锁-交流” 交流群</ExtLink>
         {' 一起探讨。'}
       </Text>
     </>
diff --git a/src/faq/QQMusicFAQ.tsx b/src/faq/QQMusicFAQ.tsx
index 86b6018..2403e81 100644
--- a/src/faq/QQMusicFAQ.tsx
+++ b/src/faq/QQMusicFAQ.tsx
@@ -1,8 +1,9 @@
-import { Alert, AlertIcon, Container, Flex, List, ListItem, Text, chakra } from '@chakra-ui/react';
+import { Alert, AlertIcon, Container, Flex, List, ListItem, Text, UnorderedList, chakra } from '@chakra-ui/react';
 import { Header4 } from '~/components/HelpText/Header4';
 import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
 import { QMCv2AllInstructions } from '~/features/settings/panels/QMCv2/QMCv2AllInstructions';
 import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions';
+import { ExtLink } from '~/components/ExtLink';
 
 export function QQMusicFAQ() {
   return (
@@ -16,7 +17,26 @@ export function QQMusicFAQ() {
           <Text>
             <chakra.strong>2、检查您的平台</chakra.strong>
           </Text>
-          <Text>日前，仅Windows客户端下载的歌曲无需密钥，其余平台的官方正式版本均需要提取密钥。</Text>
+          <Text>
+            日前，仅 Windows 客户端 19.43 或更低版本下载的歌曲文件无需密钥，其余平台的官方正式版本均需要提取密钥。
+            你可以通过下方的链接获取 QQ 音乐 Windows 客户端 v19.43 的安装程序：
+          </Text>
+          <UnorderedList pl={3}>
+            <ListItem>
+              <Text>
+                <ExtLink href="https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1943.exe">
+                  <code>qq.com</code> 官方下载地址（推荐）
+                </ExtLink>
+              </Text>
+            </ListItem>
+            <ListItem>
+              <Text>
+                <ExtLink href="https://web.archive.org/web/2023/https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1943.exe">
+                  <code>Archive.org</code> 存档
+                </ExtLink>
+              </Text>
+            </ListItem>
+          </UnorderedList>
 
           <Container p={2}>
             <Alert status="warning" borderRadius={5}>
diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index c33764e..294144f 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -92,7 +92,7 @@ export function FileRow({ id, file }: FileRowProps) {
                       </WrapItem>
                       <WrapItem>
                         {file.decrypted && (
-                          <Link isExternal href={file.decrypted} download={decryptedName}>
+                          <Link href={file.decrypted} download={decryptedName}>
                             <Button as="span">下载</Button>
                           </Link>
                         )}