diff --git a/package.json b/package.json index 08cfafc6..279ac764 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "verkfi", "version": "1.6.1", - "devVersion": "788", + "devVersion": "793", "dev": true, "description": "Platform for Neila's something useless tools.", "private": true, diff --git a/src/app/Menu.tsx b/src/app/Menu.tsx index 145038b9..a2501cd4 100644 --- a/src/app/Menu.tsx +++ b/src/app/Menu.tsx @@ -1,6 +1,7 @@ "use client"; import { Box, + Button, Dialog, DialogActions, DialogContent, @@ -17,8 +18,9 @@ import { } from "react"; import Transition from "./components/dialog/Transition"; import MouseOverPopover from "./components/Popover"; -import intl, { - get +import { + get, + getHTML } from "react-intl-universal"; import { ArrowBackIos as ArrowBackIosIcon, @@ -65,11 +67,13 @@ export default function Menu() { [viewMode, setViewMode] = useStoragedState("viewmode", "列表模式", "list"), [editMode, setEditMode] = useState(false), [sortingFor, setSortingFor] = useState("__home__"), + [tab, setTab] = useState(0), [list, setList] = useState(getList), [searchText, setSearchText] = useState(""), router = useRouter(), [sortedTools, setSortedTools] = useState(() => getToolsList(realTools)), // 排序完毕,但是不会根据搜索而改动的分类 [tools, setTools] = useState(() => getToolsList(realTools)), // 经常改动的分类 + focusingTo = tools[tab] ? tools[tab].to : "", // 每次渲染会重新执行 [editing, setEditing] = useState(searchText === ""); function searchTools(search: string) { if (search !== "") { @@ -82,9 +86,37 @@ export default function Menu() { } setTools(searchBase(sortedTools, search)); } + function handleTab() { + setTab(old => (old + 1) % tools.length); + const selectool = document.getElementById(`toolAbleToSelect-${focusingTo}`) as HTMLDivElement | null; + if (selectool !== null) { + selectool.scrollIntoView({ + block: "start", + behavior: "smooth" + }); + } + } + function handleEnter() { + const selectool = document.getElementById(`toolAbleToSelect-${focusingTo}`) as HTMLDivElement | null; + if (selectool !== null) { + selectool.click(); + } + } return ( <> - { + { + if (event.key === "Tab" || event.key === "Enter") { + event.preventDefault(); + } + }} onKeyUp={event => { + if (event.key === "Tab") { + event.preventDefault(); + handleTab(); + } else if (event.key === "Enter") { + event.preventDefault(); + handleEnter(); + } + }} fullScreen={fullScreen} onClose={() => { control.set("false"); }} sx={{ ".MuiDialog-paper": { @@ -123,10 +155,13 @@ export default function Menu() { ml: 1, flex: 1 }} placeholder={get('搜索工具')} inputProps={{ - 'aria-label': 'searchtools', + 'aria-label': 'searchtools' }} onChange={event => { - setSearchText(event.target.value); - searchTools(event.target.value); + if (searchText !== event.target.value) { + setSearchText(event.target.value); + searchTools(event.target.value); + setTab(0); + } }} /> {sortingFor === "__home__" ? <> + + + {get('category.分类')} + null} + list={list} + setList={setList} + searchText={searchText} + sortingFor={sortingFor} + setSortingFor={setSortingFor} + searchTools={searchTools} + editMode={editMode} + setTools={setTools} + setSortedTools={setSortedTools} + setSearchText={setSearchText} + /> + + {get('use.最近使用')} @@ -183,26 +238,6 @@ export default function Menu() { paramTool={getParamTools(mostUsed, realTools)} /> - - - {get('category.分类')} - null} - list={list} - setList={setList} - searchText={searchText} - sortingFor={sortingFor} - setSortingFor={setSortingFor} - searchTools={searchTools} - editMode={editMode} - setTools={setTools} - setSortedTools={setSortedTools} - setSearchText={setSearchText} - /> - - : <> } + {sortingFor !== "__home__" && + {get("press")} + + {get("switch")}{", "} + {get("press")} + + {get("enter")} + } ; + focusingTo: Lowercase; setTools: setState; setSortedTools: setState; sortingFor: string; @@ -102,11 +105,30 @@ export default function Sidebar(props: { { + if (event.key === "Tab" || event.key === "Enter") { + event.preventDefault(); + } + }} onKeyUp={event => { + if (event.key === "Tab") { + event.preventDefault(); + props.setTab(old => (old + 1) % props.tools.length); + } else if (event.key === "Enter") { + event.preventDefault(); + const selectool = document.getElementById(`toolAbleToSelect-${props.focusingTo}`) as HTMLDivElement | null; + if (selectool !== null) { + selectool.click(); + } + } }} placeholder={get('搜索工具')} inputProps={{ 'aria-label': get('搜索工具'), }} onChange={event => { setSearchText(event.target.value); searchTools(event.target.value); + if (sortingFor === "__home__") { + setSortingFor("__global__"); + props.setShow("tools"); + } }} />
diff --git a/src/app/index/SingleTool.tsx b/src/app/index/SingleTool.tsx index 955c6f0e..298c22e6 100644 --- a/src/app/index/SingleTool.tsx +++ b/src/app/index/SingleTool.tsx @@ -54,6 +54,7 @@ export default function SingleTool(props: { setTools: setState; editMode: boolean; sortingFor: string; + focus?: boolean; }) { const { tool, @@ -115,6 +116,7 @@ export default function SingleTool(props: { props.focus && `inset 0 0 0 3px ${theme.palette.primary[theme.palette.mode]}`, backgroundImage: stringToBoolean(color) && `linear-gradient(45deg, #${tool.color[0]}, #${tool.color[1]})` }} onMouseEnter={event => { setElevation(8); @@ -122,7 +124,7 @@ export default function SingleTool(props: { setElevation(2); // reset to default }}> - } - {props.isFirst &&