refactor: batch 3

src/features/settings/panels/PanelQMCv2Key.tsx

@@ -1,8 +1,7 @@
-import { useToast } from '@chakra-ui/react';
 import { useDispatch, useSelector } from 'react-redux';
 import { qmc2AddKey, qmc2AllowFuzzyNameSearch, qmc2ClearKeys, qmc2ImportKeys } from '../settingsSlice';
 import { selectStagingQMCv2Settings } from '../settingsSelector';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { QMCv2EKeyItem } from './QMCv2/QMCv2EKeyItem';
 import { ImportSecretModal } from '~/components/ImportSecretModal';
 import { StagingQMCv2Key } from '../keyFormats';
@@ -15,9 +14,10 @@ import { AddKey } from '~/components/AddKey';
 import { InfoModal } from '~/components/InfoModal.tsx';
 import { Ruby } from '~/components/Ruby.tsx';
 import { ExtLink } from '~/components/ExtLink.tsx';
+import { KeyListContainer } from '~/components/KeyListContainer';
+import { toastImportResult } from '~/util/toastImportResult';
 
 export function PanelQMCv2Key() {
-  const toast = useToast();
   const dispatch = useDispatch();
   const { keys: qmc2Keys, allowFuzzyNameSearch } = useSelector(selectStagingQMCv2Settings);
   const [showImportModal, setShowImportModal] = useState(false);
@@ -34,46 +34,31 @@ export function PanelQMCv2Key() {
     try {
       const fileBuffer = await file.arrayBuffer();
 
-      let qmc2Keys: null | Omit<StagingQMCv2Key, 'id'>[] = null;
+      let keys: null | Omit<StagingQMCv2Key, 'id'>[] = null;
 
       if (/(player_process[_.]db|music_audio_play)(\.db)?$/i.test(file.name)) {
         const extractor = await DatabaseKeyExtractor.getInstance();
-        qmc2Keys = extractor.extractQmcV2KeysFromSqliteDb(fileBuffer);
-        if (!qmc2Keys) {
-          alert(`不是支持的 SQLite 数据库文件。`);
-          return;
-        }
+        keys = extractor.extractQmcV2KeysFromSqliteDb(fileBuffer);
       } else if (/MMKVStreamEncryptId|filenameEkeyMap|qmpc-mmkv-v1|(\.mmkv$)/i.test(file.name)) {
         const fileBuffer = await file.arrayBuffer();
         const map = parseAndroidQmEKey(new DataView(fileBuffer));
-        qmc2Keys = Array.from(map.entries(), ([name, ekey]) => ({ name: getFileName(name), ekey }));
+        keys = Array.from(map.entries(), ([name, ekey]) => ({ name: getFileName(name), ekey }));
       }
 
-      if (qmc2Keys?.length === 0) {
-        toast({
-          title: '未导入密钥',
-          description: '选择的密钥数据库文件未发现任何可用的密钥。',
-          isClosable: true,
-          status: 'warning',
-        });
-      } else if (qmc2Keys) {
-        dispatch(qmc2ImportKeys(qmc2Keys));
+      if (keys && keys.length > 0) {
+        dispatch(qmc2ImportKeys(keys));
         setShowImportModal(false);
-        toast({
-          title: `导入成功 (${qmc2Keys.length})`,
-          description: '记得保存更改来应用。',
-          isClosable: true,
-          status: 'success',
-        });
-      } else {
-        alert(`不支持的文件：${file.name}`);
       }
+
+      toastImportResult(file.name, keys);
     } catch (e) {
       console.error('error during import: ', e);
       alert(`导入数据库时发生错误：${e}`);
     }
   };
 
+  const refKeyContainer = useRef<HTMLDivElement>(null);
+
   return (
     <>
       <h2 className="text-2xl font-bold">QMCv2 解密密钥</h2>
@@ -112,19 +97,19 @@ export function PanelQMCv2Key() {
         </InfoModal>
       </div>
 
-      <h3 className="mt-2 text-1xl font-bold">密钥管理</h3>
-      <AddKey addKey={addKey} importKeyFromFile={() => setShowImportModal(true)} clearKeys={clearAll} />
+      <h3 className="mt-2 text-xl font-bold">密钥管理</h3>
+      <AddKey
+        addKey={addKey}
+        refContainer={refKeyContainer}
+        importKeyFromFile={() => setShowImportModal(true)}
+        clearKeys={clearAll}
+      />
 
-      <div className="flex-1 min-h-0 overflow-auto pr-4 pt-3">
-        {qmc2Keys.length > 0 && (
-          <ul className="list bg-base-100 rounded-box shadow-md border border-base-300">
-            {qmc2Keys.map(({ id, ekey, name }, i) => (
-              <QMCv2EKeyItem key={id} id={id} ekey={ekey} name={name} i={i} />
-            ))}
-          </ul>
-        )}
-        {qmc2Keys.length === 0 && <p className="p-4 pb-2 tracking-wide">还没有密钥。</p>}
-      </div>
+      <KeyListContainer ref={refKeyContainer} keys={qmc2Keys}>
+        {qmc2Keys.map(({ id, ekey, name }, i) => (
+          <QMCv2EKeyItem key={id} id={id} ekey={ekey} name={name} i={i} />
+        ))}
+      </KeyListContainer>
 
       <ImportSecretModal
         clientName={