docs: improve ios docs

src/features/settings/panels/QMCv2/InstructionsIOS.tsx

@@ -1,103 +1,51 @@
-import { Box, Code, Heading, ListItem, OrderedList, Text, UnorderedList } from '@chakra-ui/react';
-import { FilePathBlock } from '~/components/FilePathBlock';
-
-const EXAMPLE_MEDIA_ID = '0011wjLv1bIkvv';
-const EXAMPLE_NAME_IOS = '333407709-0011wjLv1bIkvv-1.mgalaxy';
-const EXAMPLE_NAME_DB = 'Q0M00011wjLv1bIkvv.mflac';
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Heading,
+  Text,
+} from '@chakra-ui/react';
+import { InstructionsIOSCondition } from './InstructionsIOSCondition';
 
 export function InstructionsIOS() {
   return (
     <>
-      <Text>不推荐从该平台客户端提取文件，因为使用者需要对 iOS 设备进行完整备份。</Text>
-      <Heading as="h3" size="md" mt="3">
-        未越狱用户指南
-      </Heading>
-      <Text>未越狱用户需要对设备进行完整备份，并能提取备份内的文件。</Text>
-      <OrderedList>
-        <ListItem>
-          <Text>使用你喜欢的备份软件对 iOS 设备进行完整备份；</Text>
-        </ListItem>
-        <ListItem>
-          <Text>打开备份文件，并导航到下述目录：</Text>
-          <FilePathBlock>/AppDomain-com.tencent.QQMusic/Documents/mmkv/</FilePathBlock>
-        </ListItem>
-        <ListItem>
-          <Text>
-            提取或导出密钥数据库文件 <Code>filenameEkeyMap</Code>；
-          </Text>
-        </ListItem>
-        <ListItem>
-          <Text>
-            提交导出的 <Code>filenameEkeyMap</Code> 文件；
-          </Text>
-        </ListItem>
-        <ListItem>
-          <Text>按下「保存」来应用更改。</Text>
-        </ListItem>
-      </OrderedList>
-      <Heading as="h3" size="md" mt="3">
-        获取离线文件
-      </Heading>
       <Box>
-        <Text>通过客户端下载的音乐文件存储在备份的下述目录：</Text>
-        <Code>/AppDomain-com.tencent.QQMusic/Library/Application Support/com.tencent.QQMusic/iData/iMusic</Code>
-        <Text>
-          该目录又存在数个子目录，其子目录下保存的「<Code>*.mgalaxy</Code>」文件则是最终的加密文件。
-        </Text>
-        <Text>
-          格式：<Code>[随机数字]-[id]-[随机数字].mgalaxy</Code>
-        </Text>
-        <Text>
-          &#x3000;例：<Code>{EXAMPLE_NAME_IOS}</Code>
-        </Text>
+        <Text>iOS 设备获取应用私有文件比较麻烦，你需要越狱或使用一台 PC 或 Mac 来对 iOS 设备进行完整备份。</Text>
+        <Text>因此，建议换用 PC 或 Mac 重新下载音乐文件然后再尝试解密。</Text>
       </Box>
-      <Heading as="h3" size="md" mt="3">
-        解密离线文件
-      </Heading>
-      <Text>勾选设定界面的「使用近似文件名匹配」可跳过该节内容。</Text>
-      <Text>⚠ 注意：若密钥过多，匹配过程可能会造成浏览器卡顿或无响应。</Text>
-      <OrderedList>
-        <ListItem>
-          <Text>
-            在上方的样例文件的情况下，得知其 id 为 <Code>{EXAMPLE_MEDIA_ID}</Code>；
-          </Text>
-        </ListItem>
-        <ListItem>
-          <Text>
-            查找密钥表，得到文件名「<Code>{EXAMPLE_NAME_DB}</Code>」；
-          </Text>
-        </ListItem>
-        <ListItem>
-          <Text>
-            将导出的「<Code>{EXAMPLE_NAME_IOS}</Code>」更名为数据库存储的文件名「
-            <Code>{EXAMPLE_NAME_DB}</Code>」；
-          </Text>
-        </ListItem>
-        <ListItem>
-          <Text>
-            回到主界面，提交离线文件「<Code>{EXAMPLE_NAME_DB}</Code>」。
-          </Text>
-        </ListItem>
-      </OrderedList>
-      <Heading as="h3" size="md" mt="3">
-        越狱用户参考
-      </Heading>
-      <Text>该节信息根据网络上公开的信息整理，仅供参考。</Text>
-      <UnorderedList>
-        <ListItem>
-          <Text>密钥数据库文件路径：</Text>
-          <FilePathBlock>
-            /var/mobile/Containers/Data/Application/&lt;随机&gt;/Documents/mmkv/filenameEkeyMap
-          </FilePathBlock>
-        </ListItem>
-        <ListItem>
-          <Text>离线音乐文件下载目录：</Text>
-          <FilePathBlock>
-            /var/mobile/Containers/Data/Application/&lt;随机&gt;/Library/Application
-            Support/com.tencent.QQMusic/iData/iMusic
-          </FilePathBlock>
-        </ListItem>
-      </UnorderedList>
+      <Accordion allowToggle mt="2">
+        <AccordionItem>
+          <Heading as="h3" size="md">
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                我的 iOS 设备已经越狱
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </Heading>
+          <AccordionPanel pb={4}>
+            <InstructionsIOSCondition jailbreak={true} />
+          </AccordionPanel>
+        </AccordionItem>
+
+        <AccordionItem>
+          <Heading as="h3" size="md">
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                我的 iOS 设备没有越狱
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </Heading>
+          <AccordionPanel pb={4}>
+            <InstructionsIOSCondition jailbreak={false} />
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
     </>
   );
 }

src/features/settings/panels/QMCv2/InstructionsIOSCondition.tsx

@@ -0,0 +1,101 @@
+import { Box, Code, Heading, Image, ListItem, OrderedList, Text } from '@chakra-ui/react';
+import iosAllowBackup from './iosAllowBackup.webp';
+import { FilePathBlock } from '~/components/FilePathBlock';
+
+const EXAMPLE_MEDIA_ID = '0011wjLv1bIkvv';
+const EXAMPLE_NAME_IOS = '333407709-0011wjLv1bIkvv-1.mgalaxy';
+const EXAMPLE_NAME_DB = 'Q0M00011wjLv1bIkvv.mflac';
+
+export function InstructionsIOSCondition({ jailbreak }: { jailbreak: boolean }) {
+  const useJailbreak = jailbreak;
+  const useBackup = !jailbreak;
+
+  const pathPrefix = jailbreak ? '/var/mobile/Containers/Data/Application/<随机>/' : '/AppDomain-';
+
+  return (
+    <>
+      <Heading as="h3" size="md">
+        获取密钥数据库文件
+      </Heading>
+      <OrderedList>
+        {useBackup && (
+          <ListItem>
+            <Text>首先需要在 iOS 客户端的设定允许备份：</Text>
+            <Image src={iosAllowBackup}></Image>
+          </ListItem>
+        )}
+        {useBackup && (
+          <ListItem>
+            <Text>使用你喜欢的备份软件对 iOS 设备进行完整备份；</Text>
+          </ListItem>
+        )}
+        <ListItem>
+          {useBackup && <Text>打开备份文件，并导航到下述目录：</Text>}
+          {useJailbreak && <Text>访问下述目录：</Text>}
+          <FilePathBlock>{pathPrefix}com.tencent.QQMusic/Documents/mmkv/</FilePathBlock>
+        </ListItem>
+        <ListItem>
+          <Text>
+            提取或导出密钥数据库文件 <Code>filenameEkeyMap</Code>；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            提交导出的 <Code>filenameEkeyMap</Code> 文件；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>按下「保存」来应用更改。</Text>
+        </ListItem>
+      </OrderedList>
+
+      <Heading as="h3" size="md" mt="3">
+        获取离线文件
+      </Heading>
+      <Box>
+        <Text>访问下述目录：</Text>
+        <FilePathBlock>
+          {pathPrefix}com.tencent.QQMusic/Library/Application Support/com.tencent.QQMusic/iData/iMusic
+        </FilePathBlock>
+        <Text>
+          该目录又存在数个子目录，其子目录下保存的「<Code>[字符].m[字符]</Code>」文件则是最终的加密文件。
+        </Text>
+        <Text>
+          格式：<Code>[song_id]-[mid]-[随机数字].m[后缀]</Code>
+        </Text>
+        <Text>
+          &#x3000;例：<Code>{EXAMPLE_NAME_IOS}</Code>
+        </Text>
+      </Box>
+
+      <Heading as="h3" size="md" mt="3">
+        解密离线文件
+      </Heading>
+      <Text>勾选设定界面的「使用近似文件名匹配」可跳过该节内容。</Text>
+      <Text>⚠ 注意：若密钥过多，匹配过程可能会造成浏览器卡顿或无响应。</Text>
+      <OrderedList>
+        <ListItem>
+          <Text>
+            提取文件的 <Code>[mid]</Code> 部分，如 <Code>{EXAMPLE_MEDIA_ID}</Code>；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            查找密钥表，得到文件名「<Code>{EXAMPLE_NAME_DB}</Code>」；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            将文件更名为对应的文件名，如<Code display="inline">{EXAMPLE_NAME_IOS}</Code> ➔
+            <Code display="inline">{EXAMPLE_NAME_DB}</Code>；
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            回到主界面，提交文件「<Code>{EXAMPLE_NAME_DB}</Code>」。
+          </Text>
+        </ListItem>
+      </OrderedList>
+    </>
+  );
+}