.gitattributes

@@ -1 +0,0 @@
-*.mmkv binary

src/components/FilePathBlock.tsx

@@ -1,10 +0,0 @@
-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/Settings.tsx

@@ -4,8 +4,6 @@ import {
   Center,
   Flex,
   HStack,
-  Icon,
-  IconButton,
   Menu,
   MenuButton,
   MenuItem,
@@ -23,7 +21,7 @@ import {
 } from '@chakra-ui/react';
 import { PanelQMCv2Key } from './panels/PanelQMCv2Key';
 import { useState } from 'react';
-import { MdExpandMore, MdMenu, MdOutlineSettingsBackupRestore } from 'react-icons/md';
+import { MdExpandMore, MdMenu } from 'react-icons/md';
 import { useAppDispatch } from '~/hooks';
 import { commitStagingChange, discardStagingChanges } from './settingsSlice';
 
@@ -106,14 +104,9 @@ export function Settings() {
                   </Center>
                   <Spacer />
                   <HStack gap="2" justifyContent="flex-end">
-                    <IconButton
+                    <Button onClick={handleResetSettings} colorScheme="red" variant="ghost" title="还原为更改前的状态">
-                      icon={<Icon as={MdOutlineSettingsBackupRestore} />}
+                      丢弃更改
-                      onClick={handleResetSettings}
+                    </Button>
-                      colorScheme="red"
-                      variant="ghost"
-                      title="放弃未储存的更改，将设定还原为储存前的状态。"
-                      aria-label="放弃未储存的更改"
-                    />
                     <Button onClick={handleApplySettings}>保存</Button>
                   </HStack>
                 </Flex>

src/features/settings/panels/PanelQMCv2Key.tsx

@@ -45,25 +45,22 @@ export function PanelQMCv2Key() {
         QMCv2 密钥
       </Heading>
 
-      <Text>
+      <Text>QQ 音乐目前采用的加密方案（QMCv2），安卓端与 Mac 端均下加密内容与密钥隔离储存。</Text>
-        QQ 音乐目前采用的加密方案（QMCv2）。在使用「QQ 音乐」安卓、Mac 或 iOS
-        客户端的情况下，其「离线加密文件」对应的「密钥」储存在独立的数据库文件内。
-      </Text>
 
       <Box pb={2} pt={2}>
-        <ButtonGroup isAttached colorScheme="purple" variant="outline">
+        <ButtonGroup isAttached variant="outline">
           <Button onClick={addKey} leftIcon={<Icon as={MdAdd} />}>
-            添加一条密钥
+            添加
           </Button>
           <Menu>
             <MenuButton as={IconButton} icon={<MdExpandMore />}></MenuButton>
             <MenuList>
               <MenuItem onClick={() => setShowImportModal(true)} icon={<Icon as={MdFileUpload} boxSize={5} />}>
-                从文件导入密钥
+                从文件导入
               </MenuItem>
               <MenuDivider />
               <MenuItem color="red" onClick={clearAll} icon={<Icon as={MdDeleteForever} boxSize={5} />}>
-                清空密钥
+                清空
               </MenuItem>
             </MenuList>
           </Menu>

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

@@ -12,7 +12,6 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
-  Text,
   useToast,
 } from '@chakra-ui/react';
 
@@ -25,8 +24,6 @@ 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;
@@ -55,7 +52,7 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
           alert(`不是支持的 SQLite 数据库文件。\n表名：${qmc2Keys}`);
           return;
         }
-      } else if (/MMKVStreamEncryptId|filenameEkeyMap/i.test(file.name)) {
+      } 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 }));
@@ -91,28 +88,18 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
             <FileInput onReceiveFiles={handleFileReceived}>拖放或点我选择含有密钥的数据库文件</FileInput>
           </Center>
 
-          <Text mt={2}>选择你的「QQ 音乐」客户端平台以查看对应说明：</Text>
+          <Flex as={Tabs} variant="enclosed" flexDir="column" mt={4} flex={1} minH={0}>
-
-          <Flex as={Tabs} variant="enclosed" flexDir="column" flex={1} minH={0}>
             <TabList>
-              <Tab>安卓</Tab>
+              <Tab>安卓客户端</Tab>
-              <Tab>iOS</Tab>
+              <Tab>Mac 客户端</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

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

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

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

src/util/MMKVParser.ts

@@ -1,29 +1,28 @@
-import { formatHex } from './formatHex';
-
 const textDecoder = new TextDecoder('utf-8', { ignoreBOM: true });
 
 export class MMKVParser {
-  private offset = 4;
+  private offset = 8;
   private length: number;
 
   constructor(private view: DataView) {
     const payloadLength = view.getUint32(0, true);
     this.length = 4 + payloadLength;
-
-    // skip unused str
-    this.readInt();
   }
 
   toString() {
-    const offset = formatHex(this.offset, 8);
+    const offset = this.offset.toString(16).padStart(8, '0');
-    const length = formatHex(this.length, 8);
+    const length = this.length.toString(16).padStart(8, '0');
-    return `<MMKVParser offset=${offset} len=${length}>`;
+    return `<MMKVParser offset=0x${offset} len=0x${length}>`;
   }
 
   get eof() {
     return this.offset >= this.length;
   }
 
+  peek() {
+    return this.view.getUint8(this.offset);
+  }
+
   public readByte() {
     return this.view.getUint8(this.offset++);
   }
@@ -78,9 +77,7 @@ export class MMKVParser {
     const newOffset = this.offset + containerLen;
     const result = this.readString();
     if (newOffset !== this.offset) {
-      const expected = formatHex(newOffset);
+      throw new Error('readVariantString failed: offset does not match');
-      const actual = formatHex(this.offset);
-      throw new Error(`readVariantString failed: offset does mismatch (expect: ${expected}, actual: ${actual})`);
     }
     return result;
   }

src/util/__tests__/MMKVParser.test.ts

@@ -1,19 +0,0 @@
-import { MMKVParser } from '../MMKVParser';
-import { readFileSync } from 'node:fs';
-
-test('parse mmkv file as expected', () => {
-  const buff = readFileSync(__dirname + '/__fixture__/test.mmkv');
-  const view = new DataView(buff.buffer.slice(buff.byteOffset, buff.byteOffset + buff.byteLength));
-  expect(MMKVParser.toStringMap(view)).toEqual(
-    new Map([
-      ['key', 'value'],
-      [
-        'Lorem Ipsum',
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
-          'Vestibulum congue volutpat metus non molestie. Quisque id est sapien. ' +
-          'Fusce eget tristique sem. Donec tellus lacus, viverra sed lectus eget, elementum ultrices dolor. ' +
-          'Integer non urna justo.',
-      ],
-    ])
-  );
-});

src/util/formatHex.ts

@@ -1,3 +0,0 @@
-export function formatHex(value: number, len = 8) {
-  return '0x' + (value | 0).toString(16).padStart(len, '0');
-}