continue on AnnounceModal

src/middleware/sqlite/fts.ts

@@ -16,6 +16,17 @@ export interface FtsConditions {
   atk: { min: number | null; max: number | null }; // 攻击力区间
   def: { min: number | null; max: number | null }; // 防御力区间
 }
+
+export const emptySearchConditions: FtsConditions = {
+  atk: { min: null, max: null },
+  def: { min: null, max: null },
+  levels: [],
+  lscales: [],
+  races: [],
+  attributes: [],
+  types: [],
+};
+
 export interface FtsParams {
   query: string; // 用于全文检索的query
   conditions: FtsConditions; // 过滤条件

src/ui/BuildDeck/index.tsx

@@ -33,7 +33,7 @@ import { subscribeKey } from "valtio/utils";
 
 import { type CardMeta, searchCards } from "@/api";
 import { isExtraDeckCard, isToken } from "@/common";
-import { FtsConditions } from "@/middleware/sqlite/fts";
+import { emptySearchConditions, FtsConditions } from "@/middleware/sqlite/fts";
 import { deckStore, emptyDeck, type IDeck, initStore } from "@/stores";
 import {
   Background,
@@ -327,15 +327,6 @@ export const DeckEditor: React.FC<{
 const Search: React.FC = () => {
   const { modal } = App.useApp();
   const [searchWord, setSearchWord] = useState("");
-  const emptySearchConditions: FtsConditions = {
-    atk: { min: null, max: null },
-    def: { min: null, max: null },
-    levels: [],
-    lscales: [],
-    races: [],
-    attributes: [],
-    types: [],
-  };
   const [searchConditions, setSearchConditions] = useState<FtsConditions>(
     emptySearchConditions,
   );

src/ui/Duel/Message/AnnounceModal/index.tsx

@@ -3,12 +3,17 @@ import { Avatar, Button, Input, List } from "antd";
 import React, { useState } from "react";
 import { proxy, useSnapshot } from "valtio";
 
-import { CardMeta, sendSelectOptionResponse } from "@/api";
+import { CardMeta, searchCards, sendSelectOptionResponse } from "@/api";
+import { isToken } from "@/common";
+import { emptySearchConditions } from "@/middleware/sqlite/fts";
 import { getCardImgUrl } from "@/ui/Shared";
 
 import { NeosModal } from "../NeosModal";
 import styles from "./index.module.scss";
 
+const MAX_DESC_LEN = 20;
+const PAGE_SIZE = 5;
+
 interface Props {
   isOpen: boolean;
   opcodes: number[];
@@ -27,7 +32,14 @@ export const AnnounceModal: React.FC = () => {
   const [cardList, setCardList] = useState<CardMeta[]>([]);
   const [selected, setSelected] = useState<number | undefined>(undefined);
 
-  const handleSearch = () => {};
+  const handleSearch = () => {
+    const result = searchCards({
+      query: searchWord,
+      conditions: emptySearchConditions,
+    }).filter((card) => !isToken(card.data.type ?? 0));
+
+    setCardList(result);
+  };
   const onSummit = () => {
     if (selected !== undefined) {
       sendSelectOptionResponse(selected);
@@ -65,14 +77,18 @@ export const AnnounceModal: React.FC = () => {
           allowClear
         />
         <List
-          pagination={{ position: "bottom", align: "center" }}
+          pagination={{
+            position: "bottom",
+            align: "center",
+            pageSize: PAGE_SIZE,
+          }}
           dataSource={cardList}
           renderItem={(item, index) => (
             <List.Item key={index}>
               <List.Item.Meta
                 avatar={<Avatar src={getCardImgUrl(item.id)} />}
                 title={<a>{item.text.name}</a>}
-                description={item.text.desc}
+                description={item.text.desc?.substring(0, MAX_DESC_LEN) + "..."}
               />
             </List.Item>
           )}