src/features/settings/panels/PanelQMCv2Key.tsx

@@ -2,42 +2,43 @@ import {
   Box,
   Button,
   ButtonGroup,
-  Checkbox,
   Flex,
   HStack,
   Heading,
   Icon,
   IconButton,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  InputRightElement,
   List,
+  ListItem,
   Menu,
   MenuButton,
   MenuDivider,
   MenuItem,
   MenuList,
   Text,
-  Tooltip,
+  VStack,
 } from '@chakra-ui/react';
 import { useDispatch, useSelector } from 'react-redux';
-import { qmc2AddKey, qmc2AllowFuzzyNameSearch, qmc2ClearKeys } from '../settingsSlice';
+import { qmc2AddKey, qmc2ClearKeys, qmc2DeleteKey, qmc2UpdateKey } from '../settingsSlice';
 import { selectStagingQMCv2Settings } from '../settingsSelector';
 import React, { useState } from 'react';
-import { MdAdd, MdDeleteForever, MdExpandMore, MdFileUpload } from 'react-icons/md';
+import { MdAdd, MdDelete, MdDeleteForever, MdExpandMore, MdFileUpload, MdVpnKey } 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 { keys: qmc2Keys, allowFuzzyNameSearch } = useSelector(selectStagingQMCv2Settings);
+  const qmc2Keys = useSelector(selectStagingQMCv2Settings).keys;
   const [showImportModal, setShowImportModal] = useState(false);
 
   const addKey = () => dispatch(qmc2AddKey());
+  const updateKey = (prop: 'name' | 'key', id: string, e: React.ChangeEvent<HTMLInputElement>) =>
+    dispatch(qmc2UpdateKey({ id, field: prop, value: e.target.value }));
+  const deleteKey = (id: string) => dispatch(qmc2DeleteKey({ id }));
   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">
@@ -49,7 +50,7 @@ export function PanelQMCv2Key() {
         客户端的情况下，其「离线加密文件」对应的「密钥」储存在独立的数据库文件内。
       </Text>
 
-      <HStack pb={2} pt={2}>
+      <Box pb={2} pt={2}>
         <ButtonGroup isAttached colorScheme="purple" variant="outline">
           <Button onClick={addKey} leftIcon={<Icon as={MdAdd} />}>
             添加一条密钥
@@ -67,40 +68,48 @@ 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">
         <List spacing={3}>
           {qmc2Keys.map(({ id, key, name }, i) => (
-            <KeyInput key={id} id={id} ekey={key} name={name} i={i} />
+            <ListItem key={id} mt={0} pt={2} pb={2} _even={{ bg: 'gray.50' }}>
+              <HStack>
+                <Text w="2em" textAlign="center">
+                  {i + 1}
+                </Text>
+
+                <VStack flex={1}>
+                  <Input
+                    variant="flushed"
+                    placeholder="文件名"
+                    value={name}
+                    onChange={(e) => updateKey('name', id, e)}
+                  />
+
+                  <InputGroup size="xs">
+                    <InputLeftElement pr="2">
+                      <Icon as={MdVpnKey} />
+                    </InputLeftElement>
+                    <Input variant="flushed" placeholder="密钥" value={key} onChange={(e) => updateKey('key', id, e)} />
+                    <InputRightElement>
+                      <Text pl="2" color={key.length ? 'green.500' : 'red.500'}>
+                        <code>{key.length || '?'}</code>
+                      </Text>
+                    </InputRightElement>
+                  </InputGroup>
+                </VStack>
+
+                <IconButton
+                  aria-label="删除该密钥"
+                  icon={<Icon as={MdDelete} boxSize={6} />}
+                  variant="ghost"
+                  colorScheme="red"
+                  type="button"
+                  onClick={() => deleteKey(id)}
+                />
+              </HStack>
+            </ListItem>
           ))}
         </List>
         {qmc2Keys.length === 0 && <Text>还没有添加密钥。</Text>}

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

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

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

@@ -1,59 +0,0 @@
-import {
-  HStack,
-  Icon,
-  IconButton,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  InputRightElement,
-  ListItem,
-  Text,
-  VStack,
-} from '@chakra-ui/react';
-import { MdDelete, MdVpnKey } from 'react-icons/md';
-import { qmc2DeleteKey, qmc2UpdateKey } from '../../settingsSlice';
-import { useAppDispatch } from '~/hooks';
-import { memo } from 'react';
-
-export const KeyInput = memo(({ id, name, ekey, i }: { id: string; name: string; ekey: string; i: number }) => {
-  const dispatch = useAppDispatch();
-
-  const updateKey = (prop: 'name' | 'key', e: React.ChangeEvent<HTMLInputElement>) =>
-    dispatch(qmc2UpdateKey({ id, field: prop, value: e.target.value }));
-  const deleteKey = () => dispatch(qmc2DeleteKey({ id }));
-
-  return (
-    <ListItem mt={0} pt={2} pb={2} _even={{ bg: 'gray.50' }}>
-      <HStack>
-        <Text w="2em" textAlign="center">
-          {i + 1}
-        </Text>
-
-        <VStack flex={1}>
-          <Input variant="flushed" placeholder="文件名" value={name} onChange={(e) => updateKey('name', e)} />
-
-          <InputGroup size="xs">
-            <InputLeftElement pr="2">
-              <Icon as={MdVpnKey} />
-            </InputLeftElement>
-            <Input variant="flushed" placeholder="密钥" value={ekey} onChange={(e) => updateKey('key', e)} />
-            <InputRightElement>
-              <Text pl="2" color={ekey.length ? 'green.500' : 'red.500'}>
-                <code>{ekey.length || '?'}</code>
-              </Text>
-            </InputRightElement>
-          </InputGroup>
-        </VStack>
-
-        <IconButton
-          aria-label="删除该密钥"
-          icon={<Icon as={MdDelete} boxSize={6} />}
-          variant="ghost"
-          colorScheme="red"
-          type="button"
-          onClick={deleteKey}
-        />
-      </HStack>
-    </ListItem>
-  );
-});

src/features/settings/persistSettings.ts

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

src/features/settings/settingsSelector.ts

@@ -1,6 +1,5 @@
 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;
@@ -8,21 +7,9 @@ export const selectFinalQMCv2Settings = (state: RootState) => state.settings.pro
 
 export const selectDecryptOptionByFile = (state: RootState, name: string): DecryptCommandOptions => {
   const normalizedName = name.normalize();
-
-  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];
-    }
-  }
+  const qmc2Keys = selectFinalQMCv2Settings(state).keys;
 
   return {
-    qmc2Key,
+    qmc2Key: hasOwn(qmc2Keys, normalizedName) ? qmc2Keys[normalizedName] : undefined,
   };
 };

src/features/settings/settingsSlice.ts

@@ -6,14 +6,12 @@ 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;
   };
 }
 
@@ -24,13 +22,11 @@ export interface SettingsState {
 const initialState: SettingsState = {
   staging: {
     qmc2: {
-      allowFuzzyNameSearch: false,
       keys: [],
     },
   },
   production: {
     qmc2: {
-      allowFuzzyNameSearch: false,
       keys: {},
     },
   },
@@ -43,14 +39,12 @@ 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,
   },
 });
 
@@ -87,9 +81,6 @@ 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);
     },
@@ -116,7 +107,6 @@ export const {
   qmc2DeleteKey,
   qmc2ClearKeys,
   qmc2ImportKeys,
-  qmc2AllowFuzzyNameSearch,
 
   commitStagingChange,
   discardStagingChanges,

src/util/__tests__/levenshtein.test.ts

@@ -1,17 +0,0 @@
-import { closestByLevenshtein, levenshtein } from '../levenshtein';
-
-test('levenshtein quick test', () => {
-  expect(levenshtein('cat', '')).toStrictEqual(3);
-  expect(levenshtein('', 'cat')).toStrictEqual(3);
-  expect(levenshtein('cat', 'cat')).toStrictEqual(0);
-  expect(levenshtein('cat', 'cut')).toStrictEqual(1);
-  expect(levenshtein('kitten', 'sitting')).toStrictEqual(3);
-  expect(levenshtein('tier', 'tor')).toStrictEqual(2);
-  expect(levenshtein('mississippi', 'swiss miss')).toStrictEqual(8);
-});
-
-test('closestByLevenshtein quick test', () => {
-  expect(closestByLevenshtein('cat', ['cut', 'dog', 'bat'])).toStrictEqual('cut');
-  expect(closestByLevenshtein('dag', ['dog', 'pumpkin'])).toStrictEqual('dog');
-  expect(closestByLevenshtein('hello', ['jello', 'yellow', 'bello'])).toStrictEqual('jello');
-});

src/util/levenshtein.ts

@@ -1,77 +0,0 @@
-const textEncoder = new TextEncoder();
-
-// translation of pseudocode from Wikipedia:
-// https://en.wikipedia.org/wiki/Levenshtein_distance#Iterative_with_two_matrix_rows
-export function levenshtein(str1: string, str2: string) {
-  if (str1 === str2) {
-    return 0;
-  }
-
-  if (str1.length === 0) {
-    return str2.length;
-  } else if (str2.length === 0) {
-    return str1.length;
-  }
-
-  // Convert them to Uint8Array to avoid expensive string APIs.
-  const s = textEncoder.encode(str1.toLowerCase());
-  const t = textEncoder.encode(str2.toLowerCase());
-  const m = s.byteLength;
-  const n = t.byteLength;
-
-  // create two work vectors of integer distances
-  let v0 = new Uint32Array(n + 1);
-  let v1 = new Uint32Array(n + 1);
-
-  // initialize v0 (the previous row of distances)
-  // this row is A[0][i]: edit distance from an empty s to t;
-  // that distance is the number of characters to append to  s to make t.
-  for (let i = 0; i <= n; i++) {
-    v0[i] = i;
-  }
-
-  for (let i = 0; i < m; i++) {
-    // calculate v1 (current row distances) from the previous row v0
-
-    // first element of v1 is A[i + 1][0]
-    //   edit distance is delete (i + 1) chars from s to match empty t
-    v1[0] = i + 1;
-
-    // use formula to fill in the rest of the row
-    for (let j = 0; j < n; j++) {
-      // calculating costs for A[i + 1][j + 1]
-      const deletionCost = v0[j + 1] + 1;
-      const insertionCost = v1[j] + 1;
-      const substitutionCost = v0[j] + (s[i] === t[j] ? 0 : 1);
-      v1[j + 1] = Math.min(deletionCost, insertionCost, substitutionCost);
-    }
-
-    // copy v1 (current row) to v0 (previous row) for next iteration
-    // since data in v1 is always invalidated, a swap without copy could be more efficient
-    [v0, v1] = [v1, v0];
-  }
-
-  // after the last swap, the results of v1 are now in v0
-  return v0[n];
-}
-
-export function closestByLevenshtein(str: string, candidates: string[]) {
-  // Faster than pre-calculate all and pass scores to Math.min.
-  const n = candidates.length;
-  if (n === 0) {
-    throw new Error('empty candidates');
-  }
-
-  let lowestIdx = 0;
-  let lowestScore = levenshtein(str, candidates[0]);
-
-  for (let i = 1; i < n; i++) {
-    const score = levenshtein(str, candidates[i]);
-    if (score < lowestScore) {
-      lowestScore = score;
-      lowestIdx = i;
-    }
-  }
-
-  return candidates[lowestIdx];
-}