update small

src/ui/BuildDeck/CardDatabase/index.tsx → src/ui/BuildDeck/DeckDatabase/index.tsx

@@ -3,8 +3,9 @@ import {
   FilterOutlined,
   SearchOutlined,
   SortAscendingOutlined,
+  SwapOutlined,
 } from "@ant-design/icons";
-import { App, Button, Dropdown, Input, message, Pagination } from "antd";
+import { App, Button, Dropdown, Input, message, Pagination, Space } from "antd";
 import { MenuProps } from "antd/lib";
 import { isEqual } from "lodash-es";
 import { OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
@@ -28,21 +29,23 @@ import styles from "../index.module.scss";
 import { editDeckStore } from "../store";
 
 /** 卡片库，选择卡片加入正在编辑的卡组 */
-export const CardDatabase: React.FC = () => {
+export const DeckDatabase: React.FC = () => {
   const { modal } = App.useApp();
   const [searchWord, setSearchWord] = useState("");
   const [searchConditions, setSearchConditions] = useState<FtsConditions>(
     emptySearchConditions,
   );
-  const [searchResult, setSearchResult] = useState<CardMeta[]>([]);
+  const [searchCardResult, setSearchCardResult] = useState<CardMeta[]>([]);
 
   const defaultSort = (a: CardMeta, b: CardMeta) => a.id - b.id;
   const sortRef = useRef<(a: CardMeta, b: CardMeta) => number>(defaultSort);
   const [sortEdited, setSortEdited] = useState(false);
 
+  const [showMdproDecks, setShowMdproDecks] = useState(false);
+
   const setSortRef = (sort: (a: CardMeta, b: CardMeta) => number) => {
     sortRef.current = sort;
-    setSearchResult([...searchResult.sort(sortRef.current)]);
+    setSearchCardResult([...searchCardResult.sort(sortRef.current)]);
     setSortEdited(true);
   };
 
@@ -73,7 +76,7 @@ export const CardDatabase: React.FC = () => {
     const result = searchCards({ query: searchWord, conditions })
       .filter((card) => !isToken(card.data.type ?? 0))
       .sort(sortRef.current); // 衍生物不显示
-    setSearchResult(() => result);
+    setSearchCardResult(() => result);
   };
 
   useEffect(() => {
@@ -121,7 +124,7 @@ export const CardDatabase: React.FC = () => {
 
   return (
     <div className={styles.container} ref={dropRef}>
-      <div className={styles.title}>
+      <Space className={styles.title} direction="horizontal">
         <Input
           placeholder="关键词(空格分隔)"
           bordered={false}
@@ -136,8 +139,16 @@ export const CardDatabase: React.FC = () => {
           onChange={(e) => setSearchWord(e.target.value)}
           onKeyUp={(e) => e.key === "Enter" && handleSearch()}
           allowClear
+          style={{ width: "250%" }}
         />
-      </div>
+        <Button
+          style={{ marginRight: "1rem" }}
+          icon={<SwapOutlined />}
+          onClick={() => setShowMdproDecks(!showMdproDecks)}
+        >
+          {showMdproDecks ? "卡片数据库" : "Mdpro在线卡组"}
+        </Button>
+      </Space>
       <div className={styles["select-btns"]}>
         <Button
           block
@@ -165,7 +176,7 @@ export const CardDatabase: React.FC = () => {
             <span>
               排列
               <span className={styles["search-count"]}>
-                ({searchResult.length})
+                ({searchCardResult.length})
               </span>
             </span>
           </Button>
@@ -185,8 +196,8 @@ export const CardDatabase: React.FC = () => {
         </Button>
       </div>
       <ScrollableArea className={styles["search-cards-container"]} ref={ref}>
-        {searchResult.length ? (
-          <SearchResults results={searchResult} scrollToTop={scrollToTop} />
+        {searchCardResult.length ? (
+          <CardResults results={searchCardResult} scrollToTop={scrollToTop} />
         ) : (
           <div className={styles.empty}>
             <IconFont type="icon-empty" size={40} />
@@ -199,7 +210,7 @@ export const CardDatabase: React.FC = () => {
 };
 
 /** 搜索区的搜索结果，使用memo避免重复渲染 */
-const SearchResults: React.FC<{
+const CardResults: React.FC<{
   results: CardMeta[];
   scrollToTop: () => void;
 }> = memo(({ results, scrollToTop }) => {

src/ui/BuildDeck/index.tsx

@@ -28,8 +28,8 @@ import {
 } from "@/ui/Shared";
 import { Type } from "@/ui/Shared/DeckZone";
 
-import { CardDatabase } from "./CardDatabase";
 import { CardDetail } from "./CardDetail";
+import { DeckDatabase } from "./DeckDatabase";
 import { DeckSelect } from "./DeckSelect";
 import styles from "./index.module.scss";
 import { editDeckStore } from "./store";
@@ -149,7 +149,7 @@ export const Component: React.FC = () => {
                 />
               </div>
               <div className={styles.select}>
-                <CardDatabase />
+                <DeckDatabase />
               </div>
             </>
           ) : (