chore: add packageManager field

docs: improve faq page
- add toc for faq page - fix #79: add note about oem build - add plat form specific instructions for qqmusic faq
2024-10-14 11:03:53 +09:00 · 2024-10-14 11:03:01 +09:00
11 changed files with 228 additions and 117 deletions
--- a/package.json
+++ b/package.json
@ -88,5 +88,6 @@
      "rollup-plugin-terser": "npm:@rollup/plugin-terser@0.4.3",
      "sourcemap-codec": "npm:@jridgewell/sourcemap-codec@1.4.15"
    }
-  }
+  },
+  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
 }
--- a/src/components/HelpText/Header3.tsx
+++ b/src/components/HelpText/Header3.tsx
@ -1,26 +0,0 @@
-import { Heading } from '@chakra-ui/react';
-import React from 'react';
-
-export interface Header3Props {
-  children: React.ReactNode;
-  id?: string;
-  className?: string;
-}
-
-export function Header3({ children, className, id }: Header3Props) {
-  return (
-    <Heading
-      as="h3"
-      id={id}
-      className={className}
-      pt={3}
-      pb={1}
-      borderBottom={'1px solid'}
-      borderColor="gray.300"
-      color="gray.800"
-      size="lg"
-    >
-      {children}
-    </Heading>
-  );
-}
--- a/src/components/HelpText/Header4.tsx
+++ b/src/components/HelpText/Header4.tsx
@ -1,16 +0,0 @@
-import { Heading } from '@chakra-ui/react';
-import React from 'react';
-
-export interface Header4Props {
-  children: React.ReactNode;
-  id?: string;
-  className?: string;
-}
-
-export function Header4({ children, className, id }: Header4Props) {
-  return (
-    <Heading as="h4" id={id} className={className} pt={3} pb={1} color="gray.700" size="md">
-      {children}
-    </Heading>
-  );
-}
--- a/src/components/HelpText/Headers.tsx
+++ b/src/components/HelpText/Headers.tsx
@ -0,0 +1,42 @@
+import { Heading } from '@chakra-ui/react';
+import React from 'react';
+
+export interface HeaderProps {
+  children: React.ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export function Header3({ children, className, id }: HeaderProps) {
+  return (
+    <Heading
+      as="h3"
+      id={id}
+      className={className}
+      pt={3}
+      pb={1}
+      borderBottom={'1px solid'}
+      borderColor="gray.300"
+      color="gray.800"
+      size="lg"
+    >
+      {children}
+    </Heading>
+  );
+}
+
+export function Header4({ children, className, id }: HeaderProps) {
+  return (
+    <Heading as="h4" id={id} className={className} pt={3} pb={1} color="gray.700" size="md">
+      {children}
+    </Heading>
+  );
+}
+
+export function Header5({ children, className, id }: HeaderProps) {
+  return (
+    <Heading as="h5" id={id} className={className} pt={3} pb={1} color="gray.700" size="sm">
+      {children}
+    </Heading>
+  );
+}
--- a/src/faq/KuwoFAQ.tsx
+++ b/src/faq/KuwoFAQ.tsx
@ -1,5 +1,5 @@
-import { Alert, AlertIcon, Container, Flex, List, ListItem, Text, chakra } from '@chakra-ui/react';
-import { Header4 } from '~/components/HelpText/Header4';
+import { Alert, AlertIcon, Container, Flex, List, ListItem, Text } from '@chakra-ui/react';
+import { Header4 } from '~/components/HelpText/Headers';
 import { VQuote } from '~/components/HelpText/VQuote';
 import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
 import { HiWord } from '~/components/HelpText/HiWord';
@ -15,9 +15,6 @@ export function KuwoFAQ() {
          <SegmentTryOfficialPlayer />
        </ListItem>
        <ListItem>
-          <Text>
-            <chakra.strong>2、检查您的平台</chakra.strong>
-          </Text>
          <Text>
            日前，仅<HiWord>手机客户端</HiWord>下载的
            <VQuote>
@ -38,10 +35,10 @@ export function KuwoFAQ() {
              <Flex flexDir="column">
                <Text>安卓用户提取密钥需要 root 权限，或注入文件提供器。</Text>
                <Text>
-                  <strong>注意</strong>：已知部分第三方修改版会破坏密钥写入功能，导致无法正常导入密钥。
+                  <strong>注意</strong>：已知部分第三方修改版会破坏密钥写入功能，导致无法提取密钥。
                </Text>
                <Text>
-                  <strong>注意</strong>：项目组不提倡使用第三方修改版应用亦不会提供，使用前请自行评估风险。
+                  <strong>注意</strong>：项目组不提倡使用、也不提供第三方修改版。使用前请自行评估风险。
                </Text>
              </Flex>
            </Alert>
--- a/src/faq/OtherFAQ.tsx
+++ b/src/faq/OtherFAQ.tsx
@ -1,6 +1,6 @@
 import { Alert, AlertIcon, Code, Container, Flex, Img, ListItem, Text, UnorderedList } from '@chakra-ui/react';
 import { ExtLink } from '~/components/ExtLink';
-import { Header4 } from '~/components/HelpText/Header4';
+import { Header4 } from '~/components/HelpText/Headers';
 import { VQuote } from '~/components/HelpText/VQuote';
 import { ProjectIssue } from '~/components/ProjectIssue';
 import LdPlayerSettingsScreen from './assets/ld_settings_misc.webp';
@ -63,7 +63,7 @@ export function OtherFAQ() {
          <AlertIcon />
          <Flex flexDir="column">
            <Text>
-              <strong>注意</strong>：根据应用厂商的风控策略，使用模拟器登录的账号<strong>有可能会被封锁</strong>
+              <strong>注意</strong>：根据应用的风控策略，使用模拟器登录的账号<strong>有可能会导致账号被封锁</strong>
              {'；使用前请自行评估风险。'}
            </Text>
          </Flex>
--- a/src/faq/QQMusicFAQ.tsx
+++ b/src/faq/QQMusicFAQ.tsx
@ -1,63 +1,159 @@
-import { Alert, AlertIcon, Container, Flex, List, ListItem, Text, UnorderedList, chakra } from '@chakra-ui/react';
-import { Header4 } from '~/components/HelpText/Header4';
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box } from '@chakra-ui/react';
+import { Alert, AlertIcon, Container, Flex, ListItem, Text, UnorderedList } from '@chakra-ui/react';
+import { Header4 } from '~/components/HelpText/Headers';
 import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
-import { QMCv2QQMusicAllInstructions } from '~/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions';
 import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions';
 import { ExtLink } from '~/components/ExtLink';
+import { AndroidADBPullInstruction } from '~/components/AndroidADBPullInstruction/AndroidADBPullInstruction';
+import { InstructionsIOS } from '~/features/settings/panels/QMCv2/InstructionsIOS';
+import { InstructionsMac } from '~/features/settings/panels/QMCv2/InstructionsMac';

 export function QQMusicFAQ() {
  return (
    <>
      <Header4>解锁失败</Header4>
-      <List spacing={2}>
-        <ListItem>
-          <SegmentTryOfficialPlayer />
-        </ListItem>
-        <ListItem>
-          <Text>
-            <chakra.strong>2、检查您的平台</chakra.strong>
-          </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>
+      <SegmentTryOfficialPlayer />
+      <Text>重复下载同一首的歌曲不重复扣下载配额，但是同一首歌的两个版本会重复扣下载配额，请仔细分辨。</Text>
+      <Text>
+        部分平台获取的加密文件未包含密钥。选择你<strong>下载文件时</strong>使用的客户端来查看说明。
+      </Text>
+      <Accordion allowToggle my={2}>
+        <AccordionItem>
+          <h2>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                Windows
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4}>
+            <Text>
+              目前 Windows 客户端 19.51 或更低版本下载的歌曲文件无需密钥，其余平台的官方正式版本均需要提取密钥。
+            </Text>
+            <Text>你可以通过下方的链接获取 QQ 音乐 Windows 客户端 v19.51 的安装程序：</Text>
+            <UnorderedList pl={3}>
+              <ListItem>
+                <Text>
+                  <ExtLink href="https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1951.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_1951.exe">
+                    <code>Archive.org</code> 存档
+                  </ExtLink>
+                </Text>
+              </ListItem>
+            </UnorderedList>
+          </AccordionPanel>
+        </AccordionItem>

-          <Container p={2}>
-            <Alert status="warning" borderRadius={5}>
-              <AlertIcon />
-              <Flex flexDir="column">
-                <Text>iOS 用户提取歌曲困难，建议换用电脑操作；</Text>
-                <Text>安卓用户提取密钥需要root，也建议用电脑操作。</Text>
-              </Flex>
-            </Alert>
-          </Container>
+        <AccordionItem>
+          <h2>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                Mac
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4}>
+            <Container p={2}>
+              <Alert status="warning" borderRadius={5}>
+                <AlertIcon />
+                <Flex flexDir="column">
+                  <Text>Mac 需要降级到 8.8.0 或以下版本。</Text>
+                  <Text>
+                    <ExtLink href="https://web.archive.org/web/20230903/https://dldir1.qq.com/music/clntupate/mac/QQMusicMac_Mgr.dmg">
+                      <code>Archive.org</code> 存档
+                    </ExtLink>
+                  </Text>
+                </Flex>
+              </Alert>
+            </Container>

-          <Container p={2} pt={0}>
-            <Alert status="info" borderRadius={5}>
-              <AlertIcon />
-              重复下载同一首的歌曲不重复扣下载配额，但是同一首歌的两个版本会重复扣下载配额，请仔细分辨。
-            </Alert>
-          </Container>
+            <SegmentKeyImportInstructions
+              tab="QMCv2 密钥"
+              keyInstructionText="查看密钥提取说明："
+              clientInstructions={
+                <Box p={2}>
+                  <InstructionsMac />
+                </Box>
+              }
+            />
+          </AccordionPanel>
+        </AccordionItem>

-          <SegmentKeyImportInstructions tab="QMCv2 密钥" clientInstructions={<QMCv2QQMusicAllInstructions />} />
-        </ListItem>
-      </List>
+        <AccordionItem>
+          <h2>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                安卓 (Android)
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4}>
+            <Container p={2}>
+              <Alert status="warning" borderRadius={5}>
+                <AlertIcon />
+                <Flex flexDir="column">
+                  <Text>安卓提取密钥需要 root 特权，建议用电脑操作。</Text>
+                </Flex>
+              </Alert>
+            </Container>
+
+            <Text>QQ 音乐官方版本需要提取密钥才能解密。</Text>
+            <Text>
+              你也可以尝试使用【QQ 音乐简洁版】或 OEM 定制版（如小米、魅族定制版）。简洁、定制版本目前不需要提取密钥。
+            </Text>
+
+            <SegmentKeyImportInstructions
+              tab="QMCv2 密钥"
+              keyInstructionText="查看密钥提取说明："
+              clientInstructions={
+                <Box p={2}>
+                  <AndroidADBPullInstruction dir="/data/data/com.tencent.qqmusic/databases" file="player_process_db" />
+                </Box>
+              }
+            />
+          </AccordionPanel>
+        </AccordionItem>
+
+        <AccordionItem>
+          <h2>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                iOS (iPhone, iPad)
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4}>
+            <Container p={2}>
+              <Alert status="warning" borderRadius={5}>
+                <AlertIcon />
+                <Flex flexDir="column">
+                  <Text>iOS 用户提取歌曲困难，建议换用电脑操作；</Text>
+                </Flex>
+              </Alert>
+            </Container>
+
+            <SegmentKeyImportInstructions
+              tab="QMCv2 密钥"
+              keyInstructionText="查看密钥提取说明："
+              clientInstructions={
+                <Box p={2}>
+                  <InstructionsIOS />
+                </Box>
+              }
+            />
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
    </>
  );
 }
--- a/src/faq/SegmentKeyImportInstructions.tsx
+++ b/src/faq/SegmentKeyImportInstructions.tsx
@ -8,9 +8,14 @@ import { MdFileUpload } from 'react-icons/md';
 export interface SegmentKeyImportInstructionsProps {
  clientInstructions: React.ReactNode;
  tab: string;
+  keyInstructionText?: React.ReactNode;
 }

-export function SegmentKeyImportInstructions({ clientInstructions, tab }: SegmentKeyImportInstructionsProps) {
+export function SegmentKeyImportInstructions({
+  clientInstructions,
+  tab,
+  keyInstructionText = '选择你的客户端平台来查看密钥提取说明：',
+}: SegmentKeyImportInstructionsProps) {
  return (
    <>
      <Text>导入密钥可以参考下面的步骤：</Text>
@ -33,7 +38,7 @@ export function SegmentKeyImportInstructions({ clientInstructions, tab }: Segmen
          </Flex>
        </ListItem>
        <ListItem>
-          <Text>选择你的客户端平台来查看密钥提取说明：</Text>
+          <Text>{keyInstructionText}</Text>
          <Tabs display="flex" flexDir="column" border="1px solid" borderColor="gray.300" borderRadius={5}>
            {clientInstructions}
          </Tabs>
--- a/src/faq/SegmentTryOfficialPlayer.tsx
+++ b/src/faq/SegmentTryOfficialPlayer.tsx
@ -1,12 +1,12 @@
-import { Text, chakra } from '@chakra-ui/react';
+import { Alert, AlertIcon, Container } from '@chakra-ui/react';

 export function SegmentTryOfficialPlayer() {
  return (
-    <>
-      <Text>
-        <chakra.strong>1、请检查您的文件</chakra.strong>
-      </Text>
-      <Text>尝试用下载音乐的设备播放一次看看，如果官方客户端都无法播放，那解锁肯定会失败哦。</Text>
-    </>
+    <Container p={2} my={2} pt={0}>
+      <Alert status="info" borderRadius={5}>
+        <AlertIcon />
+        尝试用下载音乐的设备播放一次看看，如果官方客户端都无法播放，那解锁肯定会失败哦。
+      </Alert>
+    </Container>
  );
 }
--- a/src/features/settings/panels/QMCv2/InstructionsPC.tsx
+++ b/src/features/settings/panels/QMCv2/InstructionsPC.tsx
@ -3,8 +3,8 @@ import { Text } from '@chakra-ui/react';
 export function InstructionsPC() {
  return (
    <>
-      <Text>使用 Windows 19.43 或更低版本下载的歌曲文件无需密钥。</Text>
-      <Text>使用 Windows 19.51 或更高版本下载的歌曲文件需要导入密钥，但方法尚未公开。</Text>
+      <Text>使用 Windows 19.51 或更低版本下载的歌曲文件无需密钥。</Text>
+      <Text>使用 Windows 19.57 或更高版本下载的歌曲文件需要导入密钥，但方法尚未公开。</Text>
    </>
  );
 }
--- a/src/tabs/FaqTab.tsx
+++ b/src/tabs/FaqTab.tsx
@ -1,5 +1,5 @@
-import { Center, Container, Heading } from '@chakra-ui/react';
-import { Header3 } from '~/components/HelpText/Header3';
+import { Center, Container, Heading, Link, ListItem, UnorderedList } from '@chakra-ui/react';
+import { Header3 } from '~/components/HelpText/Headers';
 import { KuwoFAQ } from '~/faq/KuwoFAQ';
 import { OtherFAQ } from '~/faq/OtherFAQ';
 import { QQMusicFAQ } from '~/faq/QQMusicFAQ';
@ -10,11 +10,23 @@ export function FaqTab() {
      <Center>
        <Heading as="h2">常见问题解答</Heading>
      </Center>
-      <Header3>QQ 音乐</Header3>
+      <Header3>答疑目录</Header3>
+      <UnorderedList>
+        <ListItem>
+          <Link href="#faq-qqmusic">QQ 音乐</Link>
+        </ListItem>
+        <ListItem>
+          <Link href="#faq-kuwo">酷我音乐</Link>
+        </ListItem>
+        <ListItem>
+          <Link href="#faq-other">其它问题</Link>
+        </ListItem>
+      </UnorderedList>
+      <Header3 id="faq-qqmusic">QQ 音乐</Header3>
      <QQMusicFAQ />
-      <Header3>酷我音乐</Header3>
+      <Header3 id="faq-kuwo">酷我音乐</Header3>
      <KuwoFAQ />
-      <Header3>其它问题</Header3>
+      <Header3 id="faq-other">其它问题</Header3>
      <OtherFAQ />
    </Container>
  );
Author	SHA1	Message	Date
鲁树人	87d2d71193	chore: add `packageManager` field All checks were successful continuous-integration/drone/push Build is passing Details	2024-10-14 11:03:53 +09:00
鲁树人	759252cec5	docs: improve faq page - add toc for faq page - fix #79: add note about oem build - add plat form specific instructions for qqmusic faq	2024-10-14 11:03:01 +09:00