Commit 1baf87eb authored by timel's avatar timel

feat: empty

parent bf4cb9b9
Pipeline #22984 passed with stages
in 16 minutes and 20 seconds
...@@ -116,6 +116,7 @@ ...@@ -116,6 +116,7 @@
} }
.search-cards-container { .search-cards-container {
height: 100%;
.search-cards { .search-cards {
--card-width: 80px; --card-width: 80px;
display: grid; display: grid;
...@@ -128,3 +129,13 @@ ...@@ -128,3 +129,13 @@
.search-count { .search-count {
font-size: 11px; font-size: 11px;
} }
.empty {
gap: 20px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
...@@ -15,16 +15,21 @@ import { ...@@ -15,16 +15,21 @@ import {
Space, Space,
type ThemeConfig, type ThemeConfig,
} from "antd"; } from "antd";
import classNames from "classnames";
import { memo, useEffect, useState } from "react"; import { memo, useEffect, useState } from "react";
import { LoaderFunction } from "react-router-dom"; import { LoaderFunction } from "react-router-dom";
import { v4 as v4uuid } from "uuid"; import { v4 as v4uuid } from "uuid";
import { useSnapshot } from "valtio"; import { useSnapshot } from "valtio";
import { subscribeKey } from "valtio/utils"; import { subscribeKey } from "valtio/utils";
import { type CardMeta, fetchCard, searchCards } from "@/api"; import { type CardMeta, searchCards } from "@/api";
import { deckStore, type IDeck, initStore } from "@/stores"; import { deckStore, type IDeck, initStore } from "@/stores";
import { Background, Loading, ScrollableArea, YgoCard } from "@/ui/Shared"; import {
Background,
IconFont,
Loading,
ScrollableArea,
YgoCard,
} from "@/ui/Shared";
import { CardDetail } from "./CardDetail"; import { CardDetail } from "./CardDetail";
import { DeckSelect } from "./DeckSelect"; import { DeckSelect } from "./DeckSelect";
...@@ -202,7 +207,14 @@ const CardSelect: React.FC = () => { ...@@ -202,7 +207,14 @@ const CardSelect: React.FC = () => {
</Button> </Button>
</div> </div>
<ScrollableArea className={styles["search-cards-container"]}> <ScrollableArea className={styles["search-cards-container"]}>
<SearchResults results={searchResult} /> {searchResult.length ? (
<SearchResults results={searchResult} />
) : (
<div className={styles.empty}>
<IconFont type="icon-empty" size={40} />
<div>无搜索结果</div>
</div>
)}
</ScrollableArea> </ScrollableArea>
</div> </div>
); );
......
import { createFromIconfontCN } from "@ant-design/icons"; import { createFromIconfontCN } from "@ant-design/icons";
const _IconFont = createFromIconfontCN({ const _IconFont = createFromIconfontCN({
scriptUrl: ["//at.alicdn.com/t/c/font_4188978_kvwn9bcpnx.js"], scriptUrl: ["//at.alicdn.com/t/c/font_4188978_m65y344sn8h.js"],
}); });
export const IconFont: React.FC<{ export const IconFont: React.FC<{
......
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