feat: add ios ekey import instructions

src/components/FilePathBlock.tsx

@@ -0,0 +1,10 @@
+import { Code, Text } from '@chakra-ui/react';
+import React from 'react';
+
+export function FilePathBlock({ children }: { children: React.ReactNode }) {
+  return (
+    <Text as="pre" whiteSpace="pre-wrap" wordBreak="break-all">
+      <Code>{children}</Code>
+    </Text>
+  );
+}

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

@@ -12,6 +12,7 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
+  Text,
   useToast,
 } from '@chakra-ui/react';
 
@@ -24,6 +25,8 @@ import { InstructionsAndroid } from './InstructionsAndroid';
 import { MMKVParser } from '~/util/MMKVParser';
 import { getFileName } from '~/util/pathHelper';
 import { InstructionsMac } from './InstructionsMac';
+import { InstructionsIOS } from './InstructionsIOS';
+import { InstructionsPC } from './InstructionsPC';
 
 export interface ImportFileModalProps {
   show: boolean;
@@ -88,18 +91,28 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
             <FileInput onReceiveFiles={handleFileReceived}>拖放或点我选择含有密钥的数据库文件</FileInput>
           </Center>
 
-          <Flex as={Tabs} variant="enclosed" flexDir="column" mt={4} flex={1} minH={0}>
+          <Text mt={2}>选择你的「QQ 音乐」客户端平台以查看对应说明：</Text>
+
+          <Flex as={Tabs} variant="enclosed" flexDir="column" flex={1} minH={0}>
             <TabList>
-              <Tab>安卓客户端</Tab>
+              <Tab>安卓</Tab>
-              <Tab>Mac 客户端</Tab>
+              <Tab>iOS</Tab>
+              <Tab>Mac</Tab>
+              <Tab>Windows</Tab>
             </TabList>
             <TabPanels flex={1} overflow="auto">
               <TabPanel>
                 <InstructionsAndroid />
               </TabPanel>
+              <TabPanel>
+                <InstructionsIOS />
+              </TabPanel>
               <TabPanel>
                 <InstructionsMac />
               </TabPanel>
+              <TabPanel>
+                <InstructionsPC />
+              </TabPanel>
             </TabPanels>
           </Flex>
         </Flex>

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

@@ -0,0 +1,101 @@
+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';
+
+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>
+      </Box>
+      <Heading as="h3" size="md" mt="3">
+        解密离线文件
+      </Heading>
+      <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>
+    </>
+  );
+}

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

@@ -1,4 +1,5 @@
 import { Heading, Text, Code, Kbd, OrderedList, ListItem } from '@chakra-ui/react';
+import { FilePathBlock } from '~/components/FilePathBlock';
 import { MacCommandKey } from '~/components/Key/MacCommandKey';
 import { ShiftKey } from '~/components/Key/ShiftKey';
 
@@ -7,12 +8,9 @@ export function InstructionsMac() {
     <>
       <Text>Mac 客户端使用 mmkv 数据库储存密钥。</Text>
       <Text>该密钥文件通常存储在下述路径：</Text>
-      <Text as="pre" whiteSpace="pre-wrap" wordBreak="break-word" lang="en">
+      <FilePathBlock>
-        <Code>
+        ~/Library/Containers/com.tencent.QQMusicMac/Data/Library/Application Support/QQMusicMac/mmkv/MMKVStreamEncryptId
-          ~/Library/Containers/com.tencent.QQMusicMac/Data/Library/Application
+      </FilePathBlock>
-          Support/QQMusicMac/mmkv/MMKVStreamEncryptId
-        </Code>
-      </Text>
 
       <Heading as="h3" size="md" mt="4">
         导入密钥

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

@@ -0,0 +1,9 @@
+import { Text } from '@chakra-ui/react';
+
+export function InstructionsPC() {
+  return (
+    <>
+      <Text>使用 Windows 客户端下载的文件不需要导入密钥。</Text>
+    </>
+  );
+}