feat: add mac import option and help text

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

@@ -20,13 +20,21 @@ import { qmc2ImportKeys } from '../../settingsSlice';
 import { useAppDispatch } from '~/hooks';
 import { DatabaseKeyExtractor } from '~/util/DatabaseKeyExtractor';
 
-import { QMCv2AndroidInstructions } from './QMCv2AndroidInstructions';
+import { InstructionsAndroid } from './InstructionsAndroid';
+import { MMKVParser } from '~/util/MMKVParser';
+import { getFileName } from '~/util/pathHelper';
+import { InstructionsMac } from './InstructionsMac';
 
 export interface ImportFileModalProps {
   show: boolean;
   onClose: () => void;
 }
 
+interface KeyEntry {
+  name: string;
+  key: string;
+}
+
 export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
   const dispatch = useAppDispatch();
   const toast = useToast();
@@ -35,22 +43,31 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
       const file = files[0];
       const fileBuffer = await file.arrayBuffer();
 
+      let qmc2Keys: null | KeyEntry[] = null;
+
       if (/[_.]db$/i.test(file.name)) {
         const extractor = await DatabaseKeyExtractor.getInstance();
-        const qmc2Keys = extractor.extractQmAndroidDbKeys(fileBuffer);
-        if (qmc2Keys) {
-          dispatch(qmc2ImportKeys(qmc2Keys));
-          onClose();
-          toast({
-            title: `导入成功 (${qmc2Keys.length})`,
-            description: '记得保存更改来应用。',
-            isClosable: true,
-            duration: 5000,
-            status: 'success',
-          });
+        qmc2Keys = extractor.extractQmAndroidDbKeys(fileBuffer);
+        if (!qmc2Keys) {
+          alert(`不是支持的 SQLite 数据库文件。\n表名：${qmc2Keys}`);
           return;
         }
-        alert(`不是支持的 SQLite 数据库文件。\n表名：${qmc2Keys}`);
+      } else if (/MMKVStreamEncryptId/i.test(file.name)) {
+        const fileBuffer = await file.arrayBuffer();
+        const map = MMKVParser.toStringMap(new DataView(fileBuffer));
+        qmc2Keys = Array.from(map.entries(), ([name, key]) => ({ name: getFileName(name), key }));
+      }
+
+      if (qmc2Keys) {
+        dispatch(qmc2ImportKeys(qmc2Keys));
+        onClose();
+        toast({
+          title: `导入成功 (${qmc2Keys.length})`,
+          description: '记得保存更改来应用。',
+          isClosable: true,
+          duration: 5000,
+          status: 'success',
+        });
       } else {
         alert(`不支持的文件：${file.name}`);
       }
@@ -74,14 +91,14 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
           <Flex as={Tabs} variant="enclosed" flexDir="column" mt={4} flex={1} minH={0}>
             <TabList>
               <Tab>安卓客户端</Tab>
-              {/* <Tab>Two</Tab> */}
+              <Tab>Mac 客户端</Tab>
             </TabList>
             <TabPanels flex={1} overflow="auto">
               <TabPanel>
-                <QMCv2AndroidInstructions />
+                <InstructionsAndroid />
               </TabPanel>
               <TabPanel>
-                <p>two!</p>
+                <InstructionsMac />
               </TabPanel>
             </TabPanels>
           </Flex>

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

@@ -5,6 +5,7 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
+  Code,
   Heading,
   Link,
   ListItem,
@@ -19,7 +20,7 @@ import hljsStyleGitHub from 'react-syntax-highlighter/dist/esm/styles/hljs/githu
 import PowerShellAdbDumpCommand from './adb_dump.ps1?raw';
 import ShellAdbDumpCommand from './adb_dump.sh?raw';
 
-export function QMCv2AndroidInstructions() {
+export function InstructionsAndroid() {
   return (
     <>
       <Text>
@@ -43,11 +44,25 @@ export function QMCv2AndroidInstructions() {
           <AccordionPanel pb={4}>
             <OrderedList>
               <ListItem>
-                使用具有 <code>root</code> 权限的文件浏览器，访问 <code>/data/data/com.tencent.qqmusic/databases/</code>
-                {' 目录，将文件 '}
-                <code>player_process_db</code> 复制到正常模式下用户可访问的目录（如下载目录）。
+                <Text>
+                  启动具有 <Code>root</Code> 特权的文件浏览器
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text>
+                  访问 <Code>/data/data/com.tencent.qqmusic/databases/</Code> 目录。
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text>
+                  将文件 <Code>player_process_db</Code> 复制到浏览器可访问的目录。
+                  <br />
+                  （例如下载目录）
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text>提交该数据库文件。</Text>
               </ListItem>
-              <ListItem>提交该数据库文件。</ListItem>
             </OrderedList>
           </AccordionPanel>
         </AccordionItem>
@@ -64,24 +79,33 @@ export function QMCv2AndroidInstructions() {
           <AccordionPanel pb={4}>
             <OrderedList>
               <ListItem>
-                确保 <code>adb</code> 命令可用。
-                <br />
-                💡 如果没有，可以
-                <Link href="https://scoop.sh/#/apps?q=adb" isExternal>
-                  使用 Scoop 安装 <ExternalLinkIcon />
-                </Link>
-                。
+                <Text>
+                  确保 <code>adb</code> 命令可用。
+                </Text>
+                <Text>
+                  💡 如果没有，可以
+                  <Link href="https://scoop.sh/#/apps?q=adb" isExternal>
+                    使用 Scoop 安装 <ExternalLinkIcon />
+                  </Link>
+                  。
+                </Text>
               </ListItem>
-              <ListItem>启动终端并进入 PowerShell 7 环境。</ListItem>
-              <ListItem>将安卓设备连接到电脑，并允许调试。</ListItem>
               <ListItem>
-                粘贴执行下述代码。若设备提示「超级用户请求」请允许：
+                <Text>启动终端并进入 PowerShell 7 环境。</Text>
+              </ListItem>
+              <ListItem>
+                <Text>将安卓设备连接到电脑，并允许调试。</Text>
+              </ListItem>
+              <ListItem>
+                <Text>粘贴执行下述代码。若设备提示「超级用户请求」请允许：</Text>
                 <SyntaxHighlighter language="ps1" style={hljsStyleGitHub}>
                   {PowerShellAdbDumpCommand}
                 </SyntaxHighlighter>
               </ListItem>
               <ListItem>
-                提交当前目录下的 <code>player_process_db</code> 文件。
+                <Text>
+                  提交当前目录下的 <Code>player_process_db</Code> 文件。
+                </Text>
               </ListItem>
             </OrderedList>
           </AccordionPanel>
@@ -98,15 +122,19 @@ export function QMCv2AndroidInstructions() {
           </Heading>
           <AccordionPanel pb={4}>
             <OrderedList>
-              <ListItem>将安卓设备连接到电脑，并允许调试。</ListItem>
               <ListItem>
-                粘贴执行下述代码。若设备提示「超级用户请求」请允许：
+                <Text>将安卓设备连接到电脑，并允许调试。</Text>
+              </ListItem>
+              <ListItem>
+                <Text>粘贴执行下述代码。若设备提示「超级用户请求」请允许：</Text>
                 <SyntaxHighlighter language="bash" style={hljsStyleGitHub}>
                   {ShellAdbDumpCommand}
                 </SyntaxHighlighter>
               </ListItem>
               <ListItem>
-                提交当前目录下的 <code>player_process_db</code> 文件。
+                <Text>
+                  提交当前目录下的 <Code>player_process_db</Code> 文件。
+                </Text>
               </ListItem>
             </OrderedList>
           </AccordionPanel>

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

@@ -0,0 +1,50 @@
+import { Heading, Text, Code, Kbd, OrderedList, ListItem } from '@chakra-ui/react';
+import { MacCommandKey } from '~/components/Key/MacCommandKey';
+import { ShiftKey } from '~/components/Key/ShiftKey';
+
+export function InstructionsMac() {
+  return (
+    <>
+      <Text>Mac 客户端使用 mmkv 数据库储存密钥。</Text>
+      <Text>该密钥文件通常存储在下述路径：</Text>
+      <Text as="pre" whiteSpace="pre-wrap" wordBreak="break-word" lang="en">
+        <Code>
+          ~/Library/Containers/com.tencent.QQMusicMac/Data/Library/Application
+          Support/QQMusicMac/mmkv/MMKVStreamEncryptId
+        </Code>
+      </Text>
+
+      <Heading as="h3" size="md" mt="4">
+        导入密钥
+      </Heading>
+      <OrderedList>
+        <ListItem>
+          <Text>
+            选中并复制上述的 <Code>MMKVStreamEncryptId</Code> 文件路径
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>点击上方的「文件选择区域」，打开「文件选择框」</Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            按下「
+            <ShiftKey />
+            {' + '}
+            <MacCommandKey />
+            {' + '}
+            <Kbd>{'G'}</Kbd>」组合键打开「路径输入框」
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            粘贴之前复制的 <Code>MMKVStreamEncryptId</Code> 文件路径
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>按下「回车键」确认。</Text>
+        </ListItem>
+      </OrderedList>
+    </>
+  );
+}