Commit 07bd9ee3 authored by timel's avatar timel

feat: small

parent 47a3fa30
.title { .title {
text-align: center; text-align: center;
font-size: 16px; font-size: 24px;
font-weight: bold; font-weight: bold;
margin-bottom: 32px; margin: 8px 0 32px;
} }
.item { .item {
display: flex; display: flex;
align-items: center; align-items: center;
.item-name { .item-name {
display: flex;
gap: 4px;
flex: 1; flex: 1;
flex-basis: 80px; flex-basis: 70px;
vertical-align: middle;
} }
} }
.form { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 20px;
} }
.btns { .btns {
margin-top: 30px; margin-top: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
......
...@@ -6,7 +6,19 @@ import { ...@@ -6,7 +6,19 @@ import {
InputNumber, InputNumber,
Select, Select,
type SelectProps, type SelectProps,
type InputNumberProps,
Tooltip,
} from "antd"; } from "antd";
import {
CheckOutlined,
DeleteOutlined,
EditOutlined,
FilterOutlined,
SearchOutlined,
SortAscendingOutlined,
UndoOutlined,
InfoCircleFilled,
} from "@ant-design/icons";
import { useState } from "react"; import { useState } from "react";
import { fetchStrings, Region } from "@/api"; import { fetchStrings, Region } from "@/api";
...@@ -32,9 +44,10 @@ for (let i = 10; i < 36; i++) { ...@@ -32,9 +44,10 @@ for (let i = 10; i < 36; i++) {
export const Filter: React.FC<{ export const Filter: React.FC<{
conditions: FtsConditions; conditions: FtsConditions;
applyCallback: (newConditons: FtsConditions) => void; onConfirm: (newConditons: FtsConditions) => void;
}> = ({ conditions, applyCallback }) => { onCancel: () => void;
const [newConditions, setNewConditions] = useState<FtsConditions>({}); }> = ({ conditions, onConfirm, onCancel }) => {
const [newConditions, setNewConditions] = useState<FtsConditions>(conditions);
return ( return (
<> <>
<div className={styles.title}>卡片筛选</div> <div className={styles.title}>卡片筛选</div>
...@@ -130,9 +143,18 @@ export const Filter: React.FC<{ ...@@ -130,9 +143,18 @@ export const Filter: React.FC<{
/> />
</div> </div>
<div className={styles.item}> <div className={styles.item}>
<div className={styles["item-name"]}>攻击力</div> <div className={styles["item-name"]}>
攻击
<Tooltip title="输入-1即等同于输入“?”">
<InfoCircleFilled style={{ fontSize: 10 }} />
</Tooltip>
</div>
<div className={styles.number}> <div className={styles.number}>
<InputNumber <CustomInputNumber
min={-1}
max={1000000}
step={100}
placeholder="最小值"
defaultValue={conditions.atk?.[0]} defaultValue={conditions.atk?.[0]}
onChange={(value) => { onChange={(value) => {
setNewConditions((prev) => { setNewConditions((prev) => {
...@@ -151,7 +173,11 @@ export const Filter: React.FC<{ ...@@ -151,7 +173,11 @@ export const Filter: React.FC<{
}} }}
/> />
<span className={styles.divider}>~</span> <span className={styles.divider}>~</span>
<InputNumber <CustomInputNumber
min={-1}
max={1000000}
step={100}
placeholder="最大值"
defaultValue={conditions.atk?.[1]} defaultValue={conditions.atk?.[1]}
onChange={(value) => { onChange={(value) => {
setNewConditions((prev) => { setNewConditions((prev) => {
...@@ -171,54 +197,57 @@ export const Filter: React.FC<{ ...@@ -171,54 +197,57 @@ export const Filter: React.FC<{
</div> </div>
</div> </div>
<div className={styles.item}> <div className={styles.item}>
<div className={styles["item-name"]}>防御力</div> <div className={styles["item-name"]}>守备</div>
<div className={styles.number}> <div className={styles.number}>
<InputNumber <CustomInputNumber
defaultValue={conditions.def?.[0]} min={-1}
onChange={(value) => { max={1000000}
setNewConditions((prev) => { step={100}
if (value === null) { placeholder="最小值"
prev.def = undefined;
} else {
if (prev.def) {
prev.def[0] = value;
} else {
prev.def = [value, 9999];
}
}
return prev;
});
}}
/> />
<span className={styles.divider}>~</span> <span className={styles.divider}>~</span>
<InputNumber <CustomInputNumber
defaultValue={conditions.def?.[1]} min={-1}
onChange={(value) => { max={1000000}
setNewConditions((prev) => { step={100}
if (value === null) { placeholder="最大值"
prev.def = undefined;
} else {
if (prev.def) {
prev.def[1] = value;
} else {
prev.def = [0, value];
}
}
return prev;
});
}}
/> />
</div> </div>
</div> </div>
</div> </div>
<div className={styles.btns}> <div className={styles.btns}>
<Button type="primary" onClick={() => applyCallback(newConditions)}> <Button type="primary" onClick={() => onConfirm(newConditions)}>
确定 确定
</Button> </Button>
<Button type="text">&nbsp;</Button> <Button type="text" onClick={onCancel}>
&nbsp;
</Button>
</div> </div>
</> </>
); );
}; };
/** 只支持输入整数 */
const CustomInputNumber = (props: InputNumberProps) => {
const [value, setValue] = useState(props.defaultValue);
const onChange = (newValue: string | number | null) => {
if (Number.isInteger(newValue)) {
setValue(newValue as number);
if (props.onChange) {
props.onChange(newValue);
}
}
};
return (
<InputNumber
{...props}
value={value}
formatter={(value) => (value !== undefined ? String(value) : "")}
parser={(value) => (value !== undefined ? value.replace(/\D/g, "") : "")}
onChange={onChange}
min={-1}
max={1000000}
step={100}
/>
);
};
...@@ -15,6 +15,8 @@ import { ...@@ -15,6 +15,8 @@ import {
Input, Input,
Space, Space,
type ThemeConfig, type ThemeConfig,
Dropdown,
type MenuProps,
} from "antd"; } from "antd";
import classNames from "classnames"; import classNames from "classnames";
import { memo, useEffect, useRef, useState } from "react"; import { memo, useEffect, useRef, useState } from "react";
...@@ -58,6 +60,42 @@ const theme: ThemeConfig = { ...@@ -58,6 +60,42 @@ const theme: ThemeConfig = {
}, },
}; };
const items: MenuProps["items"] = [
{
key: "5",
label: "从新到旧",
},
{
key: "6",
label: "从旧到新",
},
{
key: "1",
label: "攻击力从高到低",
},
{
key: "2",
label: "攻击力从低到高",
},
{
key: "3",
label: "守备力从高到低",
},
{
key: "4",
label: "守备力从低到高",
},
{
key: "7",
label: "星/阶/刻/Link从高到低",
},
{
key: "8",
label: "星/阶/刻/Link从低到高",
},
];
export const loader: LoaderFunction = async () => { export const loader: LoaderFunction = async () => {
// 必须先加载卡组,不然页面会崩溃 // 必须先加载卡组,不然页面会崩溃
if (!initStore.decks) { if (!initStore.decks) {
...@@ -252,7 +290,7 @@ const Search: React.FC = () => { ...@@ -252,7 +290,7 @@ const Search: React.FC = () => {
type="text" type="text"
icon={<FilterOutlined />} icon={<FilterOutlined />}
onClick={() => { onClick={() => {
modal.info({ const { destroy } = modal.info({
width: 500, width: 500,
centered: true, centered: true,
title: null, title: null,
...@@ -260,14 +298,14 @@ const Search: React.FC = () => { ...@@ -260,14 +298,14 @@ const Search: React.FC = () => {
content: ( content: (
<Filter <Filter
conditions={searchConditions} conditions={searchConditions}
applyCallback={(newConditions) => { onConfirm={(newConditions) => {
setSearchConditions(newConditions); setSearchConditions(newConditions);
setFilterOpen(false); destroy();
}} }}
onCancel={() => destroy()}
/> />
), ),
footer: null, footer: null,
open: filterOpen,
}); });
}} }}
> >
...@@ -275,15 +313,23 @@ const Search: React.FC = () => { ...@@ -275,15 +313,23 @@ const Search: React.FC = () => {
{/* TODO: 下面这个Badge应根据有无筛选规则而显示 */} {/* TODO: 下面这个Badge应根据有无筛选规则而显示 */}
{false && <Badge dot offset={[5, -5]} />} {false && <Badge dot offset={[5, -5]} />}
</Button> </Button>
<Button block type="text" icon={<SortAscendingOutlined />}> <Dropdown
<span> overlayStyle={{ backdropFilter: "blur(10px)" }}
排列 menu={{ items }}
<span className={styles["search-count"]}> trigger={["click"]}
({searchResult.length}) placement="bottom"
arrow
>
<Button block type="text" icon={<SortAscendingOutlined />}>
<span>
排列
<span className={styles["search-count"]}>
({searchResult.length})
</span>
</span> </span>
</span> {false && <Badge dot offset={[5, -5]} />}
{false && <Badge dot offset={[5, -5]} />} </Button>
</Button> </Dropdown>
<Button block type="text" icon={<DeleteOutlined />}> <Button block type="text" icon={<DeleteOutlined />}>
重置 重置
</Button> </Button>
......
...@@ -12,7 +12,7 @@ export const theme: ThemeConfig = { ...@@ -12,7 +12,7 @@ export const theme: ThemeConfig = {
"0 6px 16px 0 rgb(51 51 51 / 80%), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)", "0 6px 16px 0 rgb(51 51 51 / 80%), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)",
}, },
Modal: { Modal: {
colorBgElevated: "#1f242c", colorBgElevated: "#1f2531",
paddingMD: 24, paddingMD: 24,
paddingContentHorizontalLG: 48, paddingContentHorizontalLG: 48,
}, },
......
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