Skip to content

N
Neos
Commit 1e25115b authored by Chunchi Che's avatar Chunchi Che
Browse files
Options

extract CardResults

parent 94acde7d
Pipeline #27607 passed with stages
            in 8 minutes and 44 seconds
            Hide whitespace changes
            Inline Side-by-side
            Showing with 140 additions and 439 deletions
            ; deleted 100644 → 0
            View file @ 94acde7d
            import {
            DeleteOutlined,
            FilterOutlined,
            SearchOutlined,
            SortAscendingOutlined,
            SwapOutlined,
            } from "@ant-design/icons";
            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";
            import React, { memo, useCallback, useEffect, useRef, useState } from "react";
            import { useDrop } from "react-dnd";
            import { CardMeta, searchCards } from "@/api";
            import { isExtraDeckCard, isToken } from "@/common";
            import { emptySearchConditions, FtsConditions } from "@/middleware/sqlite/fts";
            import {
            DeckCard,
            DeckCardMouseUpEvent,
            IconFont,
            ScrollableArea,
            Type,
            } from "@/ui/Shared";
            import { selectedCard } from "..";
            import { Filter } from "../Filter";
            import styles from "../index.module.scss";
            import { editDeckStore } from "../store";
            /** 卡片库，选择卡片加入正在编辑的卡组 */
            export const DeckDatabase: React.FC = () => {
            const { modal } = App.useApp();
            const [searchWord, setSearchWord] = useState("");
            const [searchConditions, setSearchConditions] = useState<FtsConditions>(
            emptySearchConditions,
            );
            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;
            setSearchCardResult([...searchCardResult.sort(sortRef.current)]);
            setSortEdited(true);
            };
            const genSort = (key: keyof CardMeta["data"], scale: 1 | -1 = 1) => {
            return () =>
            setSortRef(
            (a: CardMeta, b: CardMeta) =>
            ((a.data?.[key] ?? 0) - (b.data?.[key] ?? 0)) * scale,
            );
            };
            const dropdownOptions: MenuProps["items"] = (
            [
            ["从新到旧", () => setSortRef((a, b) => b.id - a.id)],
            ["从旧到新", () => setSortRef((a, b) => a.id - b.id)],
            ["攻击力从高到低", genSort("atk", -1)],
            ["攻击力从低到高", genSort("atk")],
            ["守备力从高到低", genSort("def", -1)],
            ["守备力从低到高", genSort("def")],
            ["星/阶/刻/Link从高到低", genSort("level", -1)],
            ["星/阶/刻/Link从低到高", genSort("level")],
            ["灵摆刻度从高到低", genSort("lscale", -1)],
            ["灵摆刻度从低到高", genSort("lscale")],
            ] as const
            ).map(([label, onClick], key) => ({ key, label, onClick }));
            const handleSearch = (conditions: FtsConditions = searchConditions) => {
            const result = searchCards({ query: searchWord, conditions })
            .filter((card) => !isToken(card.data.type ?? 0))
            .sort(sortRef.current); // 衍生物不显示
            setSearchCardResult(() => result);
            };
            useEffect(() => {
            handleSearch();
            }, []);
            const [_, dropRef] = useDrop({
            accept: ["Card"], // 指明该区域允许接收的拖放物。可以是单个，也可以是数组
            // 里面的值就是useDrag所定义的type
            // 当拖拽物在这个拖放区域放下时触发,这个item就是拖拽物的item（拖拽物携带的数据）
            drop: ({ value, source }: { value: CardMeta; source: Type | "search" }) => {
            if (source !== "search") {
            editDeckStore.remove(source, value);
            }
            },
            });
            const showFilterModal = () => {
            const { destroy } = modal.info({
            width: 500,
            centered: true,
            title: null,
            icon: null,
            content: (
            <Filter
            conditions={searchConditions}
            onConfirm={(newConditions) => {
            setSearchConditions(newConditions);
            destroy();
            setTimeout(() => handleSearch(newConditions), 200); // 先收起再搜索
            }}
            onCancel={() => destroy()}
            />
            ),
            footer: null,
            });
            };
            /** 滚动条的ref，用来在翻页之后快速回顶 */
            const ref = useRef<OverlayScrollbarsComponentRef<"div">>(null);
            const scrollToTop = useCallback(() => {
            const viewport = ref.current?.osInstance()?.elements().viewport;
            if (viewport) viewport.scrollTop = 0;
            }, []);
            return (
            <div className={styles.container} ref={dropRef}>
            <Space className={styles.title} direction="horizontal">
            <Input
            placeholder="关键词(空格分隔)"
            bordered={false}
            suffix={
            <Button
            type="text"
            icon={<SearchOutlined />}
            onClick={() => handleSearch()}
            />
            }
            value={searchWord}
            onChange={(e) => setSearchWord(e.target.value)}
            onKeyUp={(e) => e.key === "Enter" && handleSearch()}
            allowClear
            style={{ width: "250%" }}
            />
            <Button
            style={{ marginRight: "1rem" }}
            icon={<SwapOutlined />}
            onClick={() => setShowMdproDecks(!showMdproDecks)}
            >
            {showMdproDecks ? "卡片数据库" : "Mdpro在线卡组"}
            </Button>
            </Space>
            <div className={styles["select-btns"]}>
            <Button
            block
            type={
            isEqual(emptySearchConditions, searchConditions)
            ? "text"
            : "primary"
            }
            disabled = {showMdproDecks}
            icon={<FilterOutlined />}
            onClick={showFilterModal}
            >
            筛选
            </Button>
            <Dropdown
            menu={{ items: dropdownOptions }}
            disabled = {showMdproDecks}
            trigger={["click"]}
            placement="bottom"
            arrow
            >
            <Button
            block
            type={sortEdited ? "primary" : "text"}
            icon={<SortAscendingOutlined />}
            >
            <span>
            排列
            <span className={styles["search-count"]}>
            ({searchCardResult.length})
            </span>
            </span>
            </Button>
            </Dropdown>
            <Button
            block
            type="text"
            disabled={showMdproDecks}
            icon={<DeleteOutlined />}
            onClick={() => {
            setSearchConditions(emptySearchConditions);
            setSortRef(defaultSort);
            setSortEdited(false);
            handleSearch(emptySearchConditions);
            }}
            >
            重置
            </Button>
            </div>
            <ScrollableArea className={styles["search-cards-container"]} ref={ref}>
            {searchCardResult.length ? (
            <CardResults results={searchCardResult} scrollToTop={scrollToTop} />
            ) : (
            <div className={styles.empty}>
            <IconFont type="icon-empty" size={40} />
            <div>无搜索结果</div>
            </div>
            )}
            </ScrollableArea>
            </div>
            );
            };
            /** 搜索区的搜索结果，使用memo避免重复渲染 */
            const CardResults: React.FC<{
            results: CardMeta[];
            scrollToTop: () => void;
            }> = memo(({ results, scrollToTop }) => {
            const itemsPerPage = 196; // 每页显示的数据数量
            const [currentPage, setCurrentPage] = useState(1);
            useEffect(() => {
            setCurrentPage(1);
            }, [results]);
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const currentData = results.slice(startIndex, endIndex);
            const showSelectedCard = (card: CardMeta) => {
            selectedCard.id = card.id;
            selectedCard.open = true;
            };
            const handleAddCardToMain = (card: CardMeta) => {
            const cardType = card.data.type ?? 0;
            const isExtraCard = isExtraDeckCard(cardType);
            const type = isExtraCard ? "extra" : "main";
            const { result, reason } = editDeckStore.canAdd(card, type, "search");
            if (result) {
            editDeckStore.add(type, card);
            } else {
            message.error(reason);
            }
            };
            const handleAddCardToSide = (card: CardMeta) => {
            const { result, reason } = editDeckStore.canAdd(card, "side", "search");
            if (result) {
            editDeckStore.add("side", card);
            } else {
            message.error(reason);
            }
            };
            /** safari 不支持 onAuxClick，所以使用 mousedown 模拟 */
            const handleMouseUp = (payload: DeckCardMouseUpEvent) => {
            const { event, card } = payload;
            switch (event.button) {
            // 左键
            case 0:
            showSelectedCard(card);
            break;
            // 中键
            case 1:
            handleAddCardToSide(card);
            break;
            // 右键
            case 2:
            handleAddCardToMain(card);
            break;
            default:
            break;
            }
            };
            return (
            <>
            <div className={styles["search-cards"]}>
            {currentData.map((card) => (
            <DeckCard
            value={card}
            key={card.id}
            source="search"
            onMouseUp={handleMouseUp}
            onMouseEnter={() => showSelectedCard(card)}
            />
            ))}
            </div>
            {results.length > itemsPerPage && (
            <div style={{ textAlign: "center", padding: "10px 0 20px" }}>
            <Pagination
            current={currentPage}
            onChange={(page) => {
            setCurrentPage(page);
            scrollToTop();
            }}
            total={results.length}
            pageSize={itemsPerPage}
            showSizeChanger={false}
            showLessItems
            hideOnSinglePage
            />
            </div>
            )}
            </>
            );
            });
            src/ui/BuildDeck/DeckDatabase/CardResults/index.module.scss 0 → 100644
            View file @ 1e25115b
            .search-cards {
            --card-width: 5rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
            padding: 0.75rem;
            gap: 0.625rem;
            }
            .empty {
            gap: 1.25rem;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            }
            src/ui/BuildDeck/DeckDatabase/CardResults/index.tsx 0 → 100644
            View file @ 1e25115b
            import { message, Pagination } from "antd";
            import React, { memo, useEffect, useState } from "react";
            import { CardMeta } from "@/api";
            import { isExtraDeckCard } from "@/common";
            import { DeckCard, DeckCardMouseUpEvent, IconFont } from "@/ui/Shared";
            import { selectedCard } from "../..";
            import { editDeckStore } from "../../store";
            import styles from "./index.module.scss";
            /** 搜索区的搜索结果，使用memo避免重复渲染 */
            export const CardResults: React.FC<{
            results: CardMeta[];
            scrollToTop: () => void;
            }> = memo(({ results, scrollToTop }) => {
            const itemsPerPage = 196; // 每页显示的数据数量
            const [currentPage, setCurrentPage] = useState(1);
            useEffect(() => {
            setCurrentPage(1);
            }, [results]);
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const currentData = results.slice(startIndex, endIndex);
            const showSelectedCard = (card: CardMeta) => {
            selectedCard.id = card.id;
            selectedCard.open = true;
            };
            const handleAddCardToMain = (card: CardMeta) => {
            const cardType = card.data.type ?? 0;
            const isExtraCard = isExtraDeckCard(cardType);
            const type = isExtraCard ? "extra" : "main";
            const { result, reason } = editDeckStore.canAdd(card, type, "search");
            if (result) {
            editDeckStore.add(type, card);
            } else {
            message.error(reason);
            }
            };
            const handleAddCardToSide = (card: CardMeta) => {
            const { result, reason } = editDeckStore.canAdd(card, "side", "search");
            if (result) {
            editDeckStore.add("side", card);
            } else {
            message.error(reason);
            }
            };
            /** safari 不支持 onAuxClick，所以使用 mousedown 模拟 */
            const handleMouseUp = (payload: DeckCardMouseUpEvent) => {
            const { event, card } = payload;
            switch (event.button) {
            // 左键
            case 0:
            showSelectedCard(card);
            break;
            // 中键
            case 1:
            handleAddCardToSide(card);
            break;
            // 右键
            case 2:
            handleAddCardToMain(card);
            break;
            default:
            break;
            }
            };
            return (
            <>
            {results.length ? (
            <>
            <div className={styles["search-cards"]}>
            {currentData.map((card) => (
            <DeckCard
            value={card}
            key={card.id}
            source="search"
            onMouseUp={handleMouseUp}
            onMouseEnter={() => showSelectedCard(card)}
            />
            ))}
            </div>
            {results.length > itemsPerPage && (
            <div style={{ textAlign: "center", padding: "10px 0 20px" }}>
            <Pagination
            current={currentPage}
            onChange={(page) => {
            setCurrentPage(page);
            scrollToTop();
            }}
            total={results.length}
            pageSize={itemsPerPage}
            showSizeChanger={false}
            showLessItems
            hideOnSinglePage
            />
            </div>
            )}
            </>
            ) : (
            <div className={styles.empty}>
            <IconFont type="icon-empty" size={40} />
            <div>无搜索结果</div>
            </div>
            )}
            </>
            );
            });
            src/ui/BuildDeck/DeckDatabase/index.tsx
            View file @ 1e25115b
            ...@@ -5,28 +5,22 @@ import { ...@@ -5,28 +5,22 @@ import {
            SortAscendingOutlined, SortAscendingOutlined,
            SwapOutlined, SwapOutlined,
            } from "@ant-design/icons"; } from "@ant-design/icons";
            import { App, Button, Dropdown, Input, message, Pagination, Space } from "antd"; import { App, Button, Dropdown, Input, Space } from "antd";
            import { MenuProps } from "antd/lib"; import { MenuProps } from "antd/lib";
            import { isEqual } from "lodash-es"; import { isEqual } from "lodash-es";
            import { OverlayScrollbarsComponentRef } from "overlayscrollbars-react"; import { OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
            import React, { memo, useCallback, useEffect, useRef, useState } from "react"; import React, { useCallback, useEffect, useRef, useState } from "react";
            import { useDrop } from "react-dnd"; import { useDrop } from "react-dnd";
            import { CardMeta, searchCards } from "@/api"; import { CardMeta, searchCards } from "@/api";
            import { isExtraDeckCard, isToken } from "@/common"; import { isToken } from "@/common";
            import { emptySearchConditions, FtsConditions } from "@/middleware/sqlite/fts"; import { emptySearchConditions, FtsConditions } from "@/middleware/sqlite/fts";
            import { import { ScrollableArea, Type } from "@/ui/Shared";
            DeckCard,
            DeckCardMouseUpEvent,
            IconFont,
            ScrollableArea,
            Type,
            } from "@/ui/Shared";
            import { selectedCard } from "..";
            import { Filter } from "../Filter"; import { Filter } from "../Filter";
            import styles from "../index.module.scss"; import styles from "../index.module.scss";
            import { editDeckStore } from "../store"; import { editDeckStore } from "../store";
            import { CardResults } from "./CardResults";
            /** 卡片库，选择卡片加入正在编辑的卡组 */ /** 卡片库，选择卡片加入正在编辑的卡组 */
            export const DeckDatabase: React.FC = () => { export const DeckDatabase: React.FC = () => {
            ...@@ -199,111 +193,12 @@ export const DeckDatabase: React.FC = () => { ...@@ -199,111 +193,12 @@ export const DeckDatabase: React.FC = () => {
            </Button> </Button>
            </div> </div>
            <ScrollableArea className={styles["search-cards-container"]} ref={ref}> <ScrollableArea className={styles["search-cards-container"]} ref={ref}>
            {searchCardResult.length ? ( {showMdproDecks ? (
            <CardResults results={searchCardResult} scrollToTop={scrollToTop} /> <></>
            ) : ( ) : (
            <div className={styles.empty}> <CardResults results={searchCardResult} scrollToTop={scrollToTop} />
            <IconFont type="icon-empty" size={40} />
            <div>无搜索结果</div>
            </div>
            )} )}
            </ScrollableArea> </ScrollableArea>
            </div> </div>
            ); );
            }; };
            /** 搜索区的搜索结果，使用memo避免重复渲染 */
            const CardResults: React.FC<{
            results: CardMeta[];
            scrollToTop: () => void;
            }> = memo(({ results, scrollToTop }) => {
            const itemsPerPage = 196; // 每页显示的数据数量
            const [currentPage, setCurrentPage] = useState(1);
            useEffect(() => {
            setCurrentPage(1);
            }, [results]);
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const currentData = results.slice(startIndex, endIndex);
            const showSelectedCard = (card: CardMeta) => {
            selectedCard.id = card.id;
            selectedCard.open = true;
            };
            const handleAddCardToMain = (card: CardMeta) => {
            const cardType = card.data.type ?? 0;
            const isExtraCard = isExtraDeckCard(cardType);
            const type = isExtraCard ? "extra" : "main";
            const { result, reason } = editDeckStore.canAdd(card, type, "search");
            if (result) {
            editDeckStore.add(type, card);
            } else {
            message.error(reason);
            }
            };
            const handleAddCardToSide = (card: CardMeta) => {
            const { result, reason } = editDeckStore.canAdd(card, "side", "search");
            if (result) {
            editDeckStore.add("side", card);
            } else {
            message.error(reason);
            }
            };
            /** safari 不支持 onAuxClick，所以使用 mousedown 模拟 */
            const handleMouseUp = (payload: DeckCardMouseUpEvent) => {
            const { event, card } = payload;
            switch (event.button) {
            // 左键
            case 0:
            showSelectedCard(card);
            break;
            // 中键
            case 1:
            handleAddCardToSide(card);
            break;
            // 右键
            case 2:
            handleAddCardToMain(card);
            break;
            default:
            break;
            }
            };
            return (
            <>
            <div className={styles["search-cards"]}>
            {currentData.map((card) => (
            <DeckCard
            value={card}
            key={card.id}
            source="search"
            onMouseUp={handleMouseUp}
            onMouseEnter={() => showSelectedCard(card)}
            />
            ))}
            </div>
            {results.length > itemsPerPage && (
            <div style={{ textAlign: "center", padding: "10px 0 20px" }}>
            <Pagination
            current={currentPage}
            onChange={(page) => {
            setCurrentPage(page);
            scrollToTop();
            }}
            total={results.length}
            pageSize={itemsPerPage}
            showSizeChanger={false}
            showLessItems
            hideOnSinglePage
            />
            </div>
            )}
            </>
            );
            });
            src/ui/BuildDeck/index.module.scss
            View file @ 1e25115b
            ...@@ -74,29 +74,12 @@ ...@@ -74,29 +74,12 @@
            .search-cards-container { .search-cards-container {
            height: 100%; height: 100%;
            .search-cards {
            --card-width: 5rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
            padding: 0.75rem;
            gap: 0.625rem;
            }
            } }
            .search-count { .search-count {
            font-size: 0.7rem; font-size: 0.7rem;
            } }
            .empty {
            gap: 1.25rem;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            }
            .editing-zone-name { .editing-zone-name {
            position: absolute; position: absolute;
            right: 0; right: 0;
            ......
            Markdown is supported
            0% or
            You are about to add 0 people to the discussion. Proceed with caution.
            Finish editing this message first!
            Please register or to comment