feat: filter and order2

src/ui/BuildDeck/index.module.scss

@@ -34,6 +34,7 @@
     .select-btns {
       padding: 5px;
       display: flex;
+      gap: 4px;
     }
   }
 }
@@ -103,6 +104,7 @@
   aspect-ratio: var(--card-ratio);
   position: relative;
   background-size: contain;
+  content-visibility: auto;
   .cardname {
     font-size: 12px;
     position: absolute;

src/ui/BuildDeck/index.tsx

@@ -45,6 +45,7 @@ import { editDeckStore } from "./editDeckStore";
 import { Filter } from "./Filter";
 import styles from "./index.module.scss";
 import { editingDeckToIDeck, iDeckToEditingDeck, type Type } from "./utils";
+import { isEqual } from "lodash-es";
 
 const theme: ThemeConfig = {
   components: {
@@ -206,14 +207,17 @@ const DeckEditor: React.FC<{
 const Search: React.FC = () => {
   const { modal } = App.useApp();
   const [searchWord, setSearchWord] = useState("");
-  const [searchConditions, setSearchConditions] = useState<FtsConditions>({
+  const emptySearchConditions: FtsConditions = {
     atk: { min: null, max: null },
     def: { min: null, max: null },
     levels: [],
     races: [],
     attributes: [],
     types: [],
-  });
+  };
+  const [searchConditions, setSearchConditions] = useState<FtsConditions>(
+    emptySearchConditions
+  );
   const [searchResult, setSearchResult] = useState<CardMeta[]>([]);
 
   const sortRef = useRef<(a: CardMeta, b: CardMeta) => number>(
@@ -280,7 +284,7 @@ const Search: React.FC = () => {
           onConfirm={(newConditions) => {
             setSearchConditions(newConditions);
             destroy();
-            setTimeout(handleSearch, 50); // 先收起再搜索
+            setTimeout(handleSearch, 200); // 先收起再搜索
           }}
           onCancel={() => destroy()}
         />
@@ -311,13 +315,15 @@ const Search: React.FC = () => {
       <div className={styles["select-btns"]}>
         <Button
           block
-          type="text"
+          type={
+            isEqual(emptySearchConditions, searchConditions)
+              ? "text"
+              : "primary"
+          }
           icon={<FilterOutlined />}
           onClick={showFilterModal}
         >
           筛选
-          {/* TODO: 下面这个Badge应根据有无筛选规则而显示 */}
-          {false && <Badge dot offset={[5, -5]} />}
         </Button>
         <Dropdown
           menu={{ items: dropdownOptions }}
@@ -332,10 +338,14 @@ const Search: React.FC = () => {
                 ({searchResult.length})
               </span>
             </span>
-            {false && <Badge dot offset={[5, -5]} />}
           </Button>
         </Dropdown>
-        <Button block type="text" icon={<DeleteOutlined />}>
+        <Button
+          block
+          type="text"
+          icon={<DeleteOutlined />}
+          onClick={() => setSearchConditions(emptySearchConditions)}
+        >
           重置
         </Button>
       </div>
@@ -441,7 +451,7 @@ const Card: React.FC<{
   const [{ isDragging }, drag] = useDrag({
     type: "Card",
     item: { value, source },
-    collect: (monitor: any) => ({
+    collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
   });