feat: added option to search closest ekey

src/features/settings/panels/PanelQMCv2Key.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   ButtonGroup,
+  Checkbox,
   Flex,
   HStack,
   Heading,
@@ -14,23 +15,29 @@ import {
   MenuItem,
   MenuList,
   Text,
+  Tooltip,
 } from '@chakra-ui/react';
 import { useDispatch, useSelector } from 'react-redux';
-import { qmc2AddKey, qmc2ClearKeys } from '../settingsSlice';
+import { qmc2AddKey, qmc2AllowFuzzyNameSearch, qmc2ClearKeys } from '../settingsSlice';
 import { selectStagingQMCv2Settings } from '../settingsSelector';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { MdAdd, MdDeleteForever, MdExpandMore, MdFileUpload } from 'react-icons/md';
 import { ImportFileModal } from './QMCv2/ImportFileModal';
 import { KeyInput } from './QMCv2/KeyInput';
+import { InfoOutlineIcon } from '@chakra-ui/icons';
 
 export function PanelQMCv2Key() {
   const dispatch = useDispatch();
-  const qmc2Keys = useSelector(selectStagingQMCv2Settings).keys;
+  const { keys: qmc2Keys, allowFuzzyNameSearch } = useSelector(selectStagingQMCv2Settings);
   const [showImportModal, setShowImportModal] = useState(false);
 
   const addKey = () => dispatch(qmc2AddKey());
   const clearAll = () => dispatch(qmc2ClearKeys());
 
+  const handleAllowFuzzyNameSearchCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(qmc2AllowFuzzyNameSearch({ enable: e.target.checked }));
+  };
+
   return (
     <Flex minH={0} flexDir="column" flex={1}>
       <Heading as="h2" size="lg">
@@ -60,6 +67,34 @@ export function PanelQMCv2Key() {
             </MenuList>
           </Menu>
         </ButtonGroup>
+
+        <HStack>
+          <Checkbox isChecked={allowFuzzyNameSearch} onChange={handleAllowFuzzyNameSearchCheckbox}>
+            <Text>匹配相似文件名</Text>
+          </Checkbox>
+          <Tooltip
+            hasArrow
+            closeOnClick={false}
+            label={
+              <Box>
+                <Text>若文件名匹配失败，则使用相似文件名的密钥。</Text>
+                <Text>
+                  使用「
+                  <ruby>
+                    莱文斯坦距离
+                    <rp> (</rp>
+                    <rt>Levenshtein distance</rt>
+                    <rp>)</rp>
+                  </ruby>
+                  」算法计算相似程度。
+                </Text>
+                <Text>若密钥数量过多，匹配时可能会造成浏览器卡顿或无响应一段时间。</Text>
+              </Box>
+            }
+          >
+            <InfoOutlineIcon />
+          </Tooltip>
+        </HStack>
       </HStack>
 
       <Box flex={1} minH={0} overflow="auto" pr="4">

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

@@ -54,6 +54,8 @@ export function InstructionsIOS() {
       <Heading as="h3" size="md" mt="3">
         解密离线文件
       </Heading>
+      <Text>勾选设定界面的「使用近似文件名匹配」可跳过该节内容。</Text>
+      <Text>⚠ 注意：若密钥过多，匹配过程可能会造成浏览器卡顿或无响应。</Text>
       <OrderedList>
         <ListItem>
           <Text>

src/features/settings/persistSettings.ts

@@ -10,9 +10,16 @@ const DEFAULT_STORAGE_KEY = 'um-react-settings';
 
 function mergeSettings(settings: ProductionSettings): ProductionSettings {
   return produce(settingsSlice.getInitialState().production, (draft) => {
-    for (const [k, v] of enumObject(settings.qmc2?.keys)) {
-      if (typeof v === 'string') {
-        draft.qmc2.keys[k] = v;
+    if (settings?.qmc2) {
+      const { allowFuzzyNameSearch, keys } = settings.qmc2;
+      for (const [k, v] of enumObject(keys)) {
+        if (typeof v === 'string') {
+          draft.qmc2.keys[k] = v;
+        }
+      }
+
+      if (typeof allowFuzzyNameSearch === 'boolean') {
+        draft.qmc2.allowFuzzyNameSearch = allowFuzzyNameSearch;
       }
     }
   });

src/features/settings/settingsSelector.ts

@@ -1,5 +1,6 @@
 import type { DecryptCommandOptions } from '~/decrypt-worker/types';
 import type { RootState } from '~/store';
+import { closestByLevenshtein } from '~/util/levenshtein';
 import { hasOwn } from '~/util/objects';
 
 export const selectStagingQMCv2Settings = (state: RootState) => state.settings.staging.qmc2;
@@ -7,9 +8,21 @@ export const selectFinalQMCv2Settings = (state: RootState) => state.settings.pro
 
 export const selectDecryptOptionByFile = (state: RootState, name: string): DecryptCommandOptions => {
   const normalizedName = name.normalize();
-  const qmc2Keys = selectFinalQMCv2Settings(state).keys;
+
+  let qmc2Key: string | undefined;
+  const { keys: qmc2Keys, allowFuzzyNameSearch } = selectFinalQMCv2Settings(state);
+  if (hasOwn(qmc2Keys, normalizedName)) {
+    qmc2Key = qmc2Keys[normalizedName];
+  } else if (allowFuzzyNameSearch) {
+    const qmc2KeyStoreNames = Object.keys(qmc2Keys);
+    if (qmc2KeyStoreNames.length > 0) {
+      const closestName = closestByLevenshtein(normalizedName, qmc2KeyStoreNames);
+      console.debug('qmc2: key db could not find %o, using closest %o instead.', normalizedName, closestName);
+      qmc2Key = qmc2Keys[closestName];
+    }
+  }
 
   return {
-    qmc2Key: hasOwn(qmc2Keys, normalizedName) ? qmc2Keys[normalizedName] : undefined,
+    qmc2Key,
   };
 };

src/features/settings/settingsSlice.ts

@@ -6,12 +6,14 @@ import { objectify } from 'radash';
 export interface StagingSettings {
   qmc2: {
     keys: { id: string; name: string; key: string }[];
+    allowFuzzyNameSearch: boolean;
   };
 }
 
 export interface ProductionSettings {
   qmc2: {
     keys: Record<string, string>; // {  [fileName]: ekey  }
+    allowFuzzyNameSearch: boolean;
   };
 }
 
@@ -22,11 +24,13 @@ export interface SettingsState {
 const initialState: SettingsState = {
   staging: {
     qmc2: {
+      allowFuzzyNameSearch: false,
       keys: [],
     },
   },
   production: {
     qmc2: {
+      allowFuzzyNameSearch: false,
       keys: {},
     },
   },
@@ -39,12 +43,14 @@ const stagingToProduction = (staging: StagingSettings): ProductionSettings => ({
       (item) => item.name.normalize(),
       (item) => item.key.trim()
     ),
+    allowFuzzyNameSearch: staging.qmc2.allowFuzzyNameSearch,
   },
 });
 
 const productionToStaging = (production: ProductionSettings): StagingSettings => ({
   qmc2: {
     keys: Object.entries(production.qmc2.keys).map(([name, key]) => ({ id: nanoid(), name, key })),
+    allowFuzzyNameSearch: production.qmc2.allowFuzzyNameSearch,
   },
 });
 
@@ -81,6 +87,9 @@ export const settingsSlice = createSlice({
     qmc2ClearKeys(state) {
       state.staging.qmc2.keys = [];
     },
+    qmc2AllowFuzzyNameSearch(state, { payload: { enable } }: PayloadAction<{ enable: boolean }>) {
+      state.staging.qmc2.allowFuzzyNameSearch = enable;
+    },
     discardStagingChanges: (state) => {
       state.staging = productionToStaging(state.production);
     },
@@ -107,6 +116,7 @@ export const {
   qmc2DeleteKey,
   qmc2ClearKeys,
   qmc2ImportKeys,
+  qmc2AllowFuzzyNameSearch,
 
   commitStagingChange,
   discardStagingChanges,