diff --git a/README.md b/README.md index 26e345b..98af66f 100644 --- a/README.md +++ b/README.md @@ -72,4 +72,11 @@ If you are developing a production application, we recommend updating the config , ) - ``` \ No newline at end of file + ``` + + # 启动 + - 访问地址 http://127.0.0.1:5173/#/view + - daisyUI: https://daisyui.com/docs/install/ + + + \ No newline at end of file diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx index 34c39e0..6ddeea8 100644 --- a/src/components/Filters.tsx +++ b/src/components/Filters.tsx @@ -112,7 +112,7 @@ export const Filters: React.FC = (props: FiltersProps) => { = (props: FiltersProps) => { = (props: FiltersProps) => { { const words = useSelector(getWordsListSelector); + const dispatch = useDispatch(); + const [pickStatus, setPickStatus] = useState(false); + const pickedWordIds = useRef>(new Map()); + const handleCheckBoxChange = (w: WordsItem) => { + if (pickedWordIds.current.get(w.id)) { + pickedWordIds.current.set(w.id, false); + } else { + pickedWordIds.current.set(w.id, true); + } + }; + const handlePickAll = () => { + if (pickStatus) { + if (pickedWordIds.current.size > 0) { + setPickStatus(false); + const pickedWordsItems = words.filter(w => pickedWordIds.current.get(w.id)); + dispatch({ type: WORDS_SAGA.RESET_WORDS, payload: pickedWordsItems }); + } + } else { + setPickStatus(true); + } + } return ( - - - {words.map((w, _index) => { - return ( - - - - - {_index}.{w.word} - - - {w.explanations} - + <> + + + {words.map((w, _index) => { + return ( + + { pickStatus && + + handleCheckBoxChange(w)} + className="checkbox checkbox-accent" /> + + } + + + + {_index}.{w.word} + + + {w.explanations} + + + + + - - - - - - ); - })} - - + + ); + })} + + + + { pickStatus ? : } + + > ); }; diff --git a/src/store/settingReducer/settingSlice.ts b/src/store/settingReducer/settingSlice.ts index 075787e..9c35f46 100644 --- a/src/store/settingReducer/settingSlice.ts +++ b/src/store/settingReducer/settingSlice.ts @@ -13,7 +13,7 @@ export const getSettingSelector = (state: GlobalStoreType) => state.setting; export const INIT_STATE: SettingState = { autoPlayWordPronunciation: true, muteKeyBoardSound: false, - randomOrder: true, + randomOrder: false, onlyShowExplanationWhenSpelling: false, }; export const settingSlice = createSlice({
- {_index}.{w.word} -
- {w.explanations} -
+ {_index}.{w.word} +
+ {w.explanations} +