src/components/Key/MacCommandKey.tsx

@@ -1,15 +0,0 @@
-import { Icon, Kbd } from '@chakra-ui/react';
-import { BsCommand } from 'react-icons/bs';
-
-export function MacCommandKey() {
-  return (
-    <ruby>
-      <Kbd>
-        <Icon as={BsCommand} />
-      </Kbd>
-      <rp> (</rp>
-      <rt>command</rt>
-      <rp>)</rp>
-    </ruby>
-  );
-}

src/components/Key/ShiftKey.tsx

@@ -1,15 +0,0 @@
-import { Icon, Kbd } from '@chakra-ui/react';
-import { BsShift } from 'react-icons/bs';
-
-export function ShiftKey() {
-  return (
-    <ruby>
-      <Kbd>
-        <Icon as={BsShift} />
-      </Kbd>
-      <rp> (</rp>
-      <rt>shift</rt>
-      <rp>)</rp>
-    </ruby>
-  );
-}

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

@@ -20,21 +20,13 @@ import { qmc2ImportKeys } from '../../settingsSlice';
 import { useAppDispatch } from '~/hooks';
 import { DatabaseKeyExtractor } from '~/util/DatabaseKeyExtractor';
 
-import { InstructionsAndroid } from './InstructionsAndroid';
-import { MMKVParser } from '~/util/MMKVParser';
-import { getFileName } from '~/util/pathHelper';
-import { InstructionsMac } from './InstructionsMac';
+import { QMCv2AndroidInstructions } from './QMCv2AndroidInstructions';
 
 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();
@@ -43,21 +35,9 @@ 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();
-        qmc2Keys = extractor.extractQmAndroidDbKeys(fileBuffer);
-        if (!qmc2Keys) {
-          alert(`不是支持的 SQLite 数据库文件。\n表名：${qmc2Keys}`);
-          return;
-        }
-      } 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 }));
-      }
-
+        const qmc2Keys = extractor.extractQmAndroidDbKeys(fileBuffer);
         if (qmc2Keys) {
           dispatch(qmc2ImportKeys(qmc2Keys));
           onClose();
@@ -68,6 +48,9 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
             duration: 5000,
             status: 'success',
           });
+          return;
+        }
+        alert(`不是支持的 SQLite 数据库文件。\n表名：${qmc2Keys}`);
       } else {
         alert(`不支持的文件：${file.name}`);
       }
@@ -91,14 +74,14 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
           <Flex as={Tabs} variant="enclosed" flexDir="column" mt={4} flex={1} minH={0}>
             <TabList>
               <Tab>安卓客户端</Tab>
-              <Tab>Mac 客户端</Tab>
+              {/* <Tab>Two</Tab> */}
             </TabList>
             <TabPanels flex={1} overflow="auto">
               <TabPanel>
-                <InstructionsAndroid />
+                <QMCv2AndroidInstructions />
               </TabPanel>
               <TabPanel>
-                <InstructionsMac />
+                <p>two!</p>
               </TabPanel>
             </TabPanels>
           </Flex>

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

@@ -1,50 +0,0 @@
-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>
-    </>
-  );
-}

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

@@ -5,7 +5,6 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
-  Code,
   Heading,
   Link,
   ListItem,
@@ -20,7 +19,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 InstructionsAndroid() {
+export function QMCv2AndroidInstructions() {
   return (
     <>
       <Text>
@@ -44,25 +43,11 @@ export function InstructionsAndroid() {
           <AccordionPanel pb={4}>
             <OrderedList>
               <ListItem>
-                <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>
+                使用具有 <code>root</code> 权限的文件浏览器，访问 <code>/data/data/com.tencent.qqmusic/databases/</code>
+                {' 目录，将文件 '}
+                <code>player_process_db</code> 复制到正常模式下用户可访问的目录（如下载目录）。
               </ListItem>
+              <ListItem>提交该数据库文件。</ListItem>
             </OrderedList>
           </AccordionPanel>
         </AccordionItem>
@@ -79,33 +64,24 @@ export function InstructionsAndroid() {
           <AccordionPanel pb={4}>
             <OrderedList>
               <ListItem>
-                <Text>
                 确保 <code>adb</code> 命令可用。
-                </Text>
-                <Text>
+                <br />
                 💡 如果没有，可以
                 <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>
-                <Text>
-                  提交当前目录下的 <Code>player_process_db</Code> 文件。
-                </Text>
+                提交当前目录下的 <code>player_process_db</code> 文件。
               </ListItem>
             </OrderedList>
           </AccordionPanel>
@@ -122,19 +98,15 @@ export function InstructionsAndroid() {
           </Heading>
           <AccordionPanel pb={4}>
             <OrderedList>
+              <ListItem>将安卓设备连接到电脑，并允许调试。</ListItem>
               <ListItem>
-                <Text>将安卓设备连接到电脑，并允许调试。</Text>
-              </ListItem>
-              <ListItem>
-                <Text>粘贴执行下述代码。若设备提示「超级用户请求」请允许：</Text>
+                粘贴执行下述代码。若设备提示「超级用户请求」请允许：
                 <SyntaxHighlighter language="bash" style={hljsStyleGitHub}>
                   {ShellAdbDumpCommand}
                 </SyntaxHighlighter>
               </ListItem>
               <ListItem>
-                <Text>
-                  提交当前目录下的 <Code>player_process_db</Code> 文件。
-                </Text>
+                提交当前目录下的 <code>player_process_db</code> 文件。
               </ListItem>
             </OrderedList>
           </AccordionPanel>

src/theme.ts

@@ -20,6 +20,16 @@ export const theme = extendTheme({
       },
     },
     Tabs: tabsTheme,
+    Heading: {
+      baseStyle: {
+        userSelect: 'none',
+      },
+    },
+    Text: {
+      baseStyle: {
+        userSelect: 'none',
+      },
+    },
     Link: {
       baseStyle: {
         color: 'blue.600',

src/util/DatabaseKeyExtractor.ts

@@ -1,4 +1,3 @@
-import { getFileName } from './pathHelper';
 import { SQLDatabase, SQLStatic, loadSQL } from './sqlite';
 
 export interface QMAndroidKeyEntry {
@@ -35,7 +34,7 @@ export class DatabaseKeyExtractor {
       const keys = db.exec('select file_path, ekey from `audio_file_ekey_table`')[0].values;
       return keys.map(([path, key]) => ({
         // strip dir name
-        name: getFileName(String(path)),
+        name: String(path).replace(/.+\//, ''),
         key: String(key),
       }));
     } finally {

src/util/MMKVParser.ts

@@ -1,95 +0,0 @@
-const textDecoder = new TextDecoder('utf-8', { ignoreBOM: true });
-
-export class MMKVParser {
-  private offset = 8;
-  private length: number;
-
-  constructor(private view: DataView) {
-    const payloadLength = view.getUint32(0, true);
-    this.length = 4 + payloadLength;
-  }
-
-  toString() {
-    const offset = this.offset.toString(16).padStart(8, '0');
-    const length = this.length.toString(16).padStart(8, '0');
-    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++);
-  }
-
-  public readBigInt() {
-    let value = 0n;
-    let shift = 0n;
-
-    let b: number;
-    do {
-      b = this.readByte();
-      value |= BigInt(b & 0x7f) << shift;
-      shift += 7n;
-    } while ((b & 0x80) !== 0);
-
-    return value;
-  }
-
-  public readInt() {
-    const value = this.readBigInt();
-
-    if (value > Number.MAX_SAFE_INTEGER) {
-      throw new Error('Runtime Error: BigInt too large to cast as number');
-    }
-
-    return Number(value);
-  }
-
-  public readBytes(n: number) {
-    const offset = this.offset;
-    const end = offset + n;
-    this.offset = end;
-    return new Uint8Array(this.view.buffer.slice(offset, end));
-  }
-
-  public readString() {
-    // String [
-    //   len: int,
-    //   data: byte[int], # utf-8
-    // ]
-    const strByteLen = this.readInt();
-    const data = this.readBytes(strByteLen);
-    return textDecoder.decode(data).normalize();
-  }
-
-  public readVariantString() {
-    // Container [
-    //   len: int,
-    //   data: variant
-    // ]
-    const containerLen = this.readInt();
-    const newOffset = this.offset + containerLen;
-    const result = this.readString();
-    if (newOffset !== this.offset) {
-      throw new Error('readVariantString failed: offset does not match');
-    }
-    return result;
-  }
-
-  public static toStringMap(view: DataView): Map<string, string> {
-    const mmkv = new MMKVParser(view);
-    const result = new Map<string, string>();
-    while (!mmkv.eof) {
-      const key = mmkv.readString();
-      const value = mmkv.readVariantString();
-      result.set(key, value);
-    }
-    return result;
-  }
-}

src/util/__tests__/pathHelper.test.ts

@@ -1,13 +0,0 @@
-import { getFileName } from '../pathHelper';
-
-test('handle linux path', () => {
-  expect(getFileName('/path/to/file.bin')).toEqual('file.bin');
-});
-
-test('handle win32 path', () => {
-  expect(getFileName('C:\\system32\\file.bin')).toEqual('file.bin');
-});
-
-test('handle file name only as well', () => {
-  expect(getFileName('file.bin')).toEqual('file.bin');
-});

src/util/pathHelper.ts

@@ -1,3 +0,0 @@
-export function getFileName(path: string) {
-  return path.replace(/.*[\\/]/, '');
-}