feat(Search): Support pinyin search (OIerDb-ng#33)

package.json

@@ -22,6 +22,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "6.2.1",
     "semantic-ui-react": "^2.0.4",
+    "tiny-pinyin": "^1.3.2",
     "twemoji": "13.1.0"
   },
   "devDependencies": {

src/components/Search.tsx

@@ -57,15 +57,22 @@ const Search: React.FC = () => {
 
     startTransition(() => {
       let result: OIer[] = [];
+
       if (!advanced) {
         result = OIerDb.oiers.filter(
-          (oier) => oier.name === input || oier.initials === input
+          (oier) =>
+            oier.name === input ||
+            oier.initials === input ||
+            (input && oier.pinyin.includes(input))
         );
       } else {
         result = OIerDb.oiers.filter((oier) => {
           let res = Boolean(input || province || grade || school);
           if (input) {
-            res &&= oier.name === input || oier.initials === input;
+            res &&=
+              oier.name === input ||
+              oier.initials === input ||
+              (input && oier.pinyin.includes(input));
           }
           if (province) {
             res &&= oier.provinces.includes(province);
@@ -114,7 +121,7 @@ const Search: React.FC = () => {
         {!advanced ? (
           <Input
             fluid
-            placeholder="键入学生姓名或其拼音首字母..."
+            placeholder="键入学生姓名或其拼音或其拼音首字母..."
             loading={isPending}
             onChange={(_, { value }) => setInput(value.toLowerCase())}
             spellCheck="false"
@@ -125,7 +132,7 @@ const Search: React.FC = () => {
             <Form.Group widths="equal">
               <Form.Input
                 label="姓名"
-                placeholder="姓名或姓名拼音首字母"
+                placeholder="姓名或姓名拼音或姓名拼音首字母"
                 spellCheck="false"
                 onChange={(_, { value }) => setInput(value.toLowerCase())}
                 defaultValue={input}

src/libs/OIerDb.ts

@@ -3,6 +3,7 @@ import { openDB } from 'idb';
 import { trackEvent } from '@/libs/plausible';
 import { Counter } from './Counter';
 import promiseAny from '@/utils/promiseAny';
+import pinyin from 'tiny-pinyin';
 
 export class OIer {
   constructor(settings: any) {
@@ -15,6 +16,7 @@ export class OIer {
   ccf_score: number;
   enroll_middle: number;
   initials: string;
+  pinyin: string;
   oierdb_score: number;
   provinces: string[];
   rank: number;
@@ -233,6 +235,10 @@ const processData = (data: any) => {
     );
   };
 
+  const add_pinyin = (oier) => {
+    oier.pinyin = pinyin.convertToPinyin(oier.name, null, true);
+  };
+
   // @ts-expect-error ...
   const result: OIerDbData = {};
 
@@ -277,6 +283,7 @@ const processData = (data: any) => {
       record.oier = oier;
       add_contestant(record.contest, record);
       add_school_record(record.school, record);
+      add_pinyin(oier);
     });
 
     return oier;

yarn.lock

@@ -3839,6 +3839,11 @@ through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
+tiny-pinyin@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/tiny-pinyin/-/tiny-pinyin-1.3.2.tgz#ce31f0f3afc2a80ee9df708fc7f4e914854d534a"
+  integrity sha512-uHNGu4evFt/8eNLldazeAM1M8JrMc1jshhJJfVRARTN3yT8HEEibofeQ7QETWQ5ISBjd6fKtTVBCC/+mGS6FpA==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"