Commit 08c20a9b authored by Chunchi Che's avatar Chunchi Che

Merge branch 'optimize/ui/some' into 'main'

优化一些UI

See merge request mycard/Neos!317
parents 8e69b403 4bf0c8b2
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
.card {
width: 100px;
}
.input-number {
width: 100px;
}
}
// 指示器选择弹窗 // 指示器选择弹窗
import { Omit } from "@react-spring/web"; import { Omit } from "@react-spring/web";
import { Button, Card, Col, InputNumber, Row } from "antd"; import { Button, InputNumber } from "antd";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { proxy, useSnapshot } from "valtio"; import { proxy, useSnapshot } from "valtio";
import { fetchStrings, Region, sendSelectCounterResponse } from "@/api"; import { fetchStrings, Region, sendSelectCounterResponse } from "@/api";
import { useConfig } from "@/config"; import { YgoCard } from "@/ui/Shared";
import { NeosModal } from "./NeosModal"; import { NeosModal } from "../NeosModal";
import styles from "./index.module.scss";
interface CheckCounterModalProps { interface CheckCounterModalProps {
isOpen: boolean; isOpen: boolean;
...@@ -25,7 +26,6 @@ const defaultProps = { ...@@ -25,7 +26,6 @@ const defaultProps = {
const localStore = proxy<CheckCounterModalProps>(defaultProps); const localStore = proxy<CheckCounterModalProps>(defaultProps);
const NeosConfig = useConfig();
export const CheckCounterModal = () => { export const CheckCounterModal = () => {
const snapCheckCounterModal = useSnapshot(localStore); const snapCheckCounterModal = useSnapshot(localStore);
...@@ -34,8 +34,8 @@ export const CheckCounterModal = () => { ...@@ -34,8 +34,8 @@ export const CheckCounterModal = () => {
const options = snapCheckCounterModal.options; const options = snapCheckCounterModal.options;
const counterName = fetchStrings( const counterName = fetchStrings(
Region.Counter, Region.Counter,
`0x${snapCheckCounterModal.counterType!}`, `0x${snapCheckCounterModal.counterType?.toString(16)}`,
); // FIXME: 这里转十六进制的逻辑有问题 );
const [selected, setSelected] = useState(new Array(options.length)); const [selected, setSelected] = useState(new Array(options.length));
const sum = selected.reduce((sum, current) => sum + current, 0); const sum = selected.reduce((sum, current) => sum + current, 0);
...@@ -60,37 +60,28 @@ export const CheckCounterModal = () => { ...@@ -60,37 +60,28 @@ export const CheckCounterModal = () => {
</Button> </Button>
} }
> >
<Row> <div className={styles.container}>
{options.map((option, idx) => { {options.map((option, idx) => {
return ( return (
<Col span={4} key={idx}> <div key={idx}>
<Card <YgoCard code={option.code} className={styles.card} />
hoverable <InputNumber
style={{ width: 120 }} className={styles["input-number"]}
cover={ min={0}
<img max={option.max}
alt={option.code.toString()} defaultValue={0}
src={`${NeosConfig.cardImgUrl}/${option.code}.jpg`} onChange={(value) => {
/> setSelected((prevSelected) => {
} let newSelected = [...prevSelected];
> newSelected[idx] = value ?? 0;
<InputNumber return newSelected;
min={0} });
max={option.max} }}
defaultValue={0} />
onChange={(value) => { </div>
setSelected((prevSelected) => {
let newSelected = [...prevSelected];
newSelected[idx] = value ?? 0;
return newSelected;
});
}}
/>
</Card>
</Col>
); );
})} })}
</Row> </div>
</NeosModal> </NeosModal>
); );
}; };
......
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