Commit 6df7abd5 authored by Chunchi Che's avatar Chunchi Che

为组卡页实现双击添加卡片的功能

parent b37889a4
...@@ -3,6 +3,7 @@ import { ...@@ -3,6 +3,7 @@ import {
DeleteOutlined, DeleteOutlined,
EditOutlined, EditOutlined,
FilterOutlined, FilterOutlined,
QuestionCircleOutlined,
RetweetOutlined, RetweetOutlined,
SearchOutlined, SearchOutlined,
SortAscendingOutlined, SortAscendingOutlined,
...@@ -18,6 +19,7 @@ import { ...@@ -18,6 +19,7 @@ import {
message, message,
Pagination, Pagination,
Space, Space,
Tooltip,
} from "antd"; } from "antd";
import { isEqual } from "lodash-es"; import { isEqual } from "lodash-es";
import { type OverlayScrollbarsComponentRef } from "overlayscrollbars-react"; import { type OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
...@@ -290,6 +292,9 @@ export const DeckEditor: React.FC<{ ...@@ -290,6 +292,9 @@ export const DeckEditor: React.FC<{
> >
保存 保存
</Button> </Button>
<Tooltip title="双击添加卡片,单击右键删除卡片,按下滑轮在主卡组和副卡组之间切换卡片">
<QuestionCircleOutlined />
</Tooltip>
</Space> </Space>
</Space> </Space>
<ScrollableArea className={styles["deck-zone"]}> <ScrollableArea className={styles["deck-zone"]}>
...@@ -306,6 +311,11 @@ export const DeckEditor: React.FC<{ ...@@ -306,6 +311,11 @@ export const DeckEditor: React.FC<{
} }
}} }}
onElementMouseUp={(event) => handleMouseUp(type, event)} onElementMouseUp={(event) => handleMouseUp(type, event)}
onDoubleClick={(card) => {
if (editDeckStore.canAdd(card, type, "search").result) {
editDeckStore.add(type, card);
}
}}
/> />
))} ))}
</ScrollableArea> </ScrollableArea>
......
...@@ -21,7 +21,8 @@ export const DeckCard: React.FC<{ ...@@ -21,7 +21,8 @@ export const DeckCard: React.FC<{
source: Type | "search"; source: Type | "search";
onMouseUp?: (event: DeckCardMouseUpEvent) => void; onMouseUp?: (event: DeckCardMouseUpEvent) => void;
onMouseEnter?: () => void; onMouseEnter?: () => void;
}> = memo(({ value, source, onMouseUp, onMouseEnter }) => { onDoubleClick?: (card: CardMeta) => void;
}> = memo(({ value, source, onMouseUp, onMouseEnter, onDoubleClick }) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const [{ isDragging }, drag] = useDrag({ const [{ isDragging }, drag] = useDrag({
type: "Card", type: "Card",
...@@ -46,6 +47,7 @@ export const DeckCard: React.FC<{ ...@@ -46,6 +47,7 @@ export const DeckCard: React.FC<{
}) })
} }
onMouseEnter={onMouseEnter} onMouseEnter={onMouseEnter}
onDoubleClick={() => onDoubleClick?.(value)}
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
......
...@@ -25,12 +25,14 @@ export const DeckZone: React.FC<{ ...@@ -25,12 +25,14 @@ export const DeckZone: React.FC<{
destination: Type, destination: Type,
) => void; ) => void;
onElementMouseUp: (event: DeckCardMouseUpEvent) => void; onElementMouseUp: (event: DeckCardMouseUpEvent) => void;
onDoubleClick?: (card: CardMeta) => void;
}> = ({ }> = ({
type, type,
cards, cards,
canAdd, canAdd,
onChange, onChange,
onElementMouseUp: onElementMouseUp, onElementMouseUp: onElementMouseUp,
onDoubleClick,
}) => { }) => {
const { message } = App.useApp(); const { message } = App.useApp();
const [allowToDrop, setAllowToDrop] = useState(false); const [allowToDrop, setAllowToDrop] = useState(false);
...@@ -71,6 +73,7 @@ export const DeckZone: React.FC<{ ...@@ -71,6 +73,7 @@ export const DeckZone: React.FC<{
key={card.id + i + type} key={card.id + i + type}
source={type} source={type}
onMouseUp={onElementMouseUp} onMouseUp={onElementMouseUp}
onDoubleClick={onDoubleClick}
/> />
))} ))}
<div className={styles["editing-zone-name"]}> <div className={styles["editing-zone-name"]}>
......
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