Skip to content

N
Neos
Commit 07bd9ee3 authored by timel's avatar timel
Browse files
Options

feat: small

parent 47a3fa30
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 61 deletions
src/ui/BuildDeck/Filter.module.scss
View file @ 07bd9ee3
.title {
text-align: center;
font-size: 16px;
font-size: 24px;
font-weight: bold;
margin-bottom: 32px;
margin: 8px 0 32px;
}
.item {
display: flex;
align-items: center;
.item-name {
display: flex;
gap: 4px;
flex: 1;
flex-basis: 80px;
flex-basis: 70px;
vertical-align: middle;
}
}
.form {
display: flex;
flex-direction: column;
gap: 10px;
gap: 20px;
}
.btns {
margin-top: 30px;
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 10px;
......
src/ui/BuildDeck/Filter.tsx
View file @ 07bd9ee3
......@@ -6,7 +6,19 @@ import {
InputNumber,
Select,
type SelectProps,
type InputNumberProps,
Tooltip,
} from "antd";
import {
CheckOutlined,
DeleteOutlined,
EditOutlined,
FilterOutlined,
SearchOutlined,
SortAscendingOutlined,
UndoOutlined,
InfoCircleFilled,
} from "@ant-design/icons";
import { useState } from "react";
import { fetchStrings, Region } from "@/api";
......@@ -32,9 +44,10 @@ for (let i = 10; i < 36; i++) {
export const Filter: React.FC<{
conditions: FtsConditions;
applyCallback: (newConditons: FtsConditions) => void;
}> = ({ conditions, applyCallback }) => {
const [newConditions, setNewConditions] = useState<FtsConditions>({});
onConfirm: (newConditons: FtsConditions) => void;
onCancel: () => void;
}> = ({ conditions, onConfirm, onCancel }) => {
const [newConditions, setNewConditions] = useState<FtsConditions>(conditions);
return (
<>
<div className={styles.title}>卡片筛选</div>
......@@ -130,9 +143,18 @@ export const Filter: React.FC<{
/>
</div>
<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}>
<InputNumber
<CustomInputNumber
min={-1}
max={1000000}
step={100}
placeholder="最小值"
defaultValue={conditions.atk?.[0]}
onChange={(value) => {
setNewConditions((prev) => {
......@@ -151,7 +173,11 @@ export const Filter: React.FC<{
}}
/>
<span className={styles.divider}>~</span>
<InputNumber
<CustomInputNumber
min={-1}
max={1000000}
step={100}
placeholder="最大值"
defaultValue={conditions.atk?.[1]}
onChange={(value) => {
setNewConditions((prev) => {
......@@ -171,54 +197,57 @@ export const Filter: React.FC<{
</div>
</div>
<div className={styles.item}>
<div className={styles["item-name"]}>防御力</div>
<div className={styles["item-name"]}>守备</div>
<div className={styles.number}>
<InputNumber
defaultValue={conditions.def?.[0]}
onChange={(value) => {
setNewConditions((prev) => {
if (value === null) {
prev.def = undefined;
} else {
if (prev.def) {
prev.def[0] = value;
} else {
prev.def = [value, 9999];
}
}
return prev;
});
}}
<CustomInputNumber
min={-1}
max={1000000}
step={100}
placeholder="最小值"
/>
<span className={styles.divider}>~</span>
<InputNumber
defaultValue={conditions.def?.[1]}
onChange={(value) => {
setNewConditions((prev) => {
if (value === null) {
prev.def = undefined;
} else {
if (prev.def) {
prev.def[1] = value;
} else {
prev.def = [0, value];
}
}
return prev;
});
}}
<CustomInputNumber
min={-1}
max={1000000}
step={100}
placeholder="最大值"
/>
</div>
</div>
</div>
<div className={styles.btns}>
<Button type="primary" onClick={() => applyCallback(newConditions)}>
<Button type="primary" onClick={() => onConfirm(newConditions)}>
确定
</Button>
<Button type="text">取&nbsp;消</Button>
<Button type="text" onClick={onCancel}>
取&nbsp;消
</Button>
</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}
/>
);
};
src/ui/BuildDeck/index.tsx
View file @ 07bd9ee3
......@@ -15,6 +15,8 @@ import {
Input,
Space,
type ThemeConfig,
Dropdown,
type MenuProps,
} from "antd";
import classNames from "classnames";
import { memo, useEffect, useRef, useState } from "react";
......@@ -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 () => {
// 必须先加载卡组，不然页面会崩溃
if (!initStore.decks) {
......@@ -252,7 +290,7 @@ const Search: React.FC = () => {
type="text"
icon={<FilterOutlined />}
onClick={() => {
modal.info({
const { destroy } = modal.info({
width: 500,
centered: true,
title: null,
......@@ -260,14 +298,14 @@ const Search: React.FC = () => {
content: (
<Filter
conditions={searchConditions}
applyCallback={(newConditions) => {
onConfirm={(newConditions) => {
setSearchConditions(newConditions);
setFilterOpen(false);
destroy();
}}
onCancel={() => destroy()}
/>
),
footer: null,
open: filterOpen,
});
}}
>
......@@ -275,15 +313,23 @@ const Search: React.FC = () => {
{/* TODO: 下面这个Badge应根据有无筛选规则而显示 */}
{false && <Badge dot offset={[5, -5]} />}
</Button>
<Button block type="text" icon={<SortAscendingOutlined />}>
<span>
排列
<span className={styles["search-count"]}>
({searchResult.length})
<Dropdown
overlayStyle={{ backdropFilter: "blur(10px)" }}
menu={{ items }}
trigger={["click"]}
placement="bottom"
arrow
>
<Button block type="text" icon={<SortAscendingOutlined />}>
<span>
排列
<span className={styles["search-count"]}>
({searchResult.length})
</span>
</span>
</span>
{false && <Badge dot offset={[5, -5]} />}
</Button>
{false && <Badge dot offset={[5, -5]} />}
</Button>
</Dropdown>
<Button block type="text" icon={<DeleteOutlined />}>
重置
</Button>
......
src/ui/theme.ts
View file @ 07bd9ee3
......@@ -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)",
},
Modal: {
colorBgElevated: "#1f242c",
colorBgElevated: "#1f2531",
paddingMD: 24,
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