update Filter.tsx

src/middleware/sqlite/fts.ts

 import { Database } from "sql.js";
 
 import { CardData, CardMeta, CardText } from "@/api";
+const TYPE_MONSTER = 0x1;
 
 export interface FtsConditions {
   // 过滤条件
@@ -49,15 +50,20 @@ export function invokeFts(db: Database, params: FtsParams): CardMeta[] {
 
 function getFtsCondtions(conditions: FtsConditions): string {
   const { types, levels, atk, def, races, attributes } = conditions;
+  const assertMonster = `(type & ${TYPE_MONSTER}) > 0`;
 
   const typesCondition = types
-    ?.map((type) => `(types & ${type}) > 0`)
+    ?.map((type) => `(type & ${type}) > 0`)
     .join(" OR ");
   const levelsCondition = levels
     ?.map((level) => `level = ${level}`)
     .join(" OR ");
-  const atkCondition = atk ? `atk BETWEEN ${atk[0]} AND ${atk[1]}` : undefined;
-  const defCondition = def ? `def BETWEEN ${def[0]} AND ${def[1]}` : undefined;
+  const atkCondition = atk
+    ? `atk BETWEEN ${atk[0]} AND ${atk[1]} AND ${assertMonster}`
+    : undefined;
+  const defCondition = def
+    ? `def BETWEEN ${def[0]} AND ${def[1]} AND ${assertMonster}`
+    : undefined;
   const raceCondition = races?.map((race) => `race = ${race}`).join(" OR ");
   const attributeCondition = attributes
     ?.map((attribute) => `attribute = ${attribute}`)
@@ -71,8 +77,8 @@ function getFtsCondtions(conditions: FtsConditions): string {
     raceCondition,
     attributeCondition,
   ]
-    .filter((condition) => condition !== undefined)
-    // .map((condition) => `(${condition})`)
+    .filter((condition) => condition !== undefined && condition !== "")
+    .map((condition) => `(${condition})`)
     .join(" AND ");
 
   return merged;

src/ui/BuildDeck/Filter.tsx

@@ -10,13 +10,19 @@ import {
 import { useState } from "react";
 
 import { fetchStrings, Region } from "@/api";
-import { Attribute2StringCodeMap, Race2StringCodeMap } from "@/common";
+import {
+  Attribute2StringCodeMap,
+  Race2StringCodeMap,
+  Type2StringCodeMap,
+} from "@/common";
 import { FtsConditions } from "@/middleware/sqlite/fts";
 
 import styles from "./Filter.module.scss";
 
 const options: SelectProps["options"] = [];
 
+const levels = Array.from({ length: 12 }).map((_, index) => index + 1);
+
 for (let i = 10; i < 36; i++) {
   options.push({
     label: i.toString(36) + i,
@@ -33,16 +39,6 @@ export const Filter: React.FC<{
     <>
       <div className={styles.title}>卡片筛选</div>
       <div className={styles.form}>
-        <div className={styles.item}>
-          <div className={styles["item-name"]}>卡种</div>
-          <Select
-            mode="multiple"
-            allowClear
-            style={{ width: "100%" }}
-            placeholder="Please select"
-            options={options}
-          />
-        </div>
         <div className={styles.item}>
           <div className={styles["item-name"]}>属性</div>
           <Select
@@ -73,7 +69,18 @@ export const Filter: React.FC<{
             allowClear
             style={{ width: "100%" }}
             placeholder="Please select"
-            options={options}
+            options={levels.map((level) => ({
+              value: level,
+              label: level.toString(),
+            }))}
+            defaultValue={conditions.levels ?? []}
+            onChange={(values) => {
+              // @ts-ignore
+              setNewConditions((prev) => {
+                prev.levels = values;
+                return prev;
+              });
+            }}
           />
         </div>
         <div className={styles.item}>
@@ -83,7 +90,20 @@ export const Filter: React.FC<{
             allowClear
             style={{ width: "100%" }}
             placeholder="Please select"
-            options={options}
+            options={Array.from(Race2StringCodeMap.entries()).map(
+              ([key, value]) => ({
+                value: key,
+                label: fetchStrings(Region.System, value),
+              })
+            )}
+            defaultValue={conditions.races ?? []}
+            onChange={(values) => {
+              // @ts-ignore
+              setNewConditions((prev) => {
+                prev.races = values;
+                return prev;
+              });
+            }}
           />
         </div>
         <div className={styles.item}>
@@ -93,33 +113,103 @@ export const Filter: React.FC<{
             allowClear
             style={{ width: "100%" }}
             placeholder="Please select"
-            options={options}
-          />
-        </div>
-        <div className={styles.item}>
-          <div className={styles["item-name"]}>其他</div>
-          <Select
-            mode="multiple"
-            allowClear
-            style={{ width: "100%" }}
-            placeholder="Please select"
-            options={options}
+            options={Array.from(Type2StringCodeMap.entries()).map(
+              ([key, value]) => ({
+                value: key,
+                label: fetchStrings(Region.System, value),
+              })
+            )}
+            defaultValue={conditions.types ?? []}
+            onChange={(values) => {
+              // @ts-ignore
+              setNewConditions((prev) => {
+                prev.types = values;
+                return prev;
+              });
+            }}
           />
         </div>
         <div className={styles.item}>
           <div className={styles["item-name"]}>攻击力</div>
           <div className={styles.number}>
-            <InputNumber min={1} max={10} defaultValue={3} />
+            <InputNumber
+              defaultValue={conditions.atk?.[0]}
+              onChange={(value) => {
+                setNewConditions((prev) => {
+                  // TODO: 下面这些逻辑有时间可以去重一下
+                  if (value === null) {
+                    prev.atk = undefined;
+                  } else {
+                    if (prev.atk) {
+                      prev.atk[0] = value;
+                    } else {
+                      prev.atk = [value, 9999];
+                    }
+                  }
+                  return prev;
+                });
+              }}
+            />
             <span className={styles.divider}>~</span>
-            <InputNumber min={1} max={10} defaultValue={3} />
+            <InputNumber
+              defaultValue={conditions.atk?.[1]}
+              onChange={(value) => {
+                setNewConditions((prev) => {
+                  if (value === null) {
+                    prev.atk = undefined;
+                  } else {
+                    if (prev.atk) {
+                      prev.atk[1] = value;
+                    } else {
+                      prev.atk = [0, value];
+                    }
+                  }
+                  return prev;
+                });
+              }}
+            />
           </div>
         </div>
         <div className={styles.item}>
           <div className={styles["item-name"]}>防御力</div>
           <div className={styles.number}>
-            <InputNumber min={1} max={10} defaultValue={3} />
+            <InputNumber
+              defaultValue={conditions.def?.[0]}
+              onChange={(value) => {
+                setNewConditions((prev) => {
+                  if (value === null) {
+                    prev.def = undefined;
+                  } else {
+                    if (prev.def) {
+                      prev.def[0] = value;
+                    } else {
+                      prev.def = [value, 9999];
+                    }
+                  }
+
+                  return prev;
+                });
+              }}
+            />
             <span className={styles.divider}>~</span>
-            <InputNumber min={1} max={10} defaultValue={3} />
+            <InputNumber
+              defaultValue={conditions.def?.[1]}
+              onChange={(value) => {
+                setNewConditions((prev) => {
+                  if (value === null) {
+                    prev.def = undefined;
+                  } else {
+                    if (prev.def) {
+                      prev.def[1] = value;
+                    } else {
+                      prev.def = [0, value];
+                    }
+                  }
+
+                  return prev;
+                });
+              }}
+            />
           </div>
         </div>
       </div>