✨ 用键盘切换工具搜索界面中的工具

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,

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>("viewmode", "列表模式", "list"),
  [editMode, setEditMode] = useState<boolean>(false),
  [sortingFor, setSortingFor] = useState<string>("__home__"),
+ [tab, setTab] = useState<number>(0),
  [list, setList] = useState<lists>(getList),
  [searchText, setSearchText] = useState<string>(""),
  router = useRouter(),
  [sortedTools, setSortedTools] = useState(() => getToolsList(realTools)), // 排序完毕，但是不会根据搜索而改动的分类
  [tools, setTools] = useState<tool[]>(() => getToolsList(realTools)), // 经常改动的分类
+ focusingTo = tools[tab] ? tools[tab].to : "", // 每次渲染会重新执行
  [editing, setEditing] = useState<boolean>(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 (
  <>
- <Dialog fullScreen={fullScreen} onClose={() => {
+ <Dialog onKeyDown={event => {
+ 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);
+ }
  }} />
  <IconButton
  aria-label="close"
@@ -143,6 +178,26 @@ export default function Menu() {
  </DialogTitle>
  <DialogContent dividers>
  {sortingFor === "__home__" ? <>
+ <Box>
+ <Typography variant='h4'>
+ {get('category.分类')}
+ <Selects
+ setEditMode={setEditMode}
+ setEditing={setEditing}
+ modifyClickCount={value => null}
+ list={list}
+ setList={setList}
+ searchText={searchText}
+ sortingFor={sortingFor}
+ setSortingFor={setSortingFor}
+ searchTools={searchTools}
+ editMode={editMode}
+ setTools={setTools}
+ setSortedTools={setSortedTools}
+ setSearchText={setSearchText}
+ />
+ </Typography>
+ </Box>
  <Box>
  <Typography variant='h4'>
  {get('use.最近使用')}
@@ -183,26 +238,6 @@ export default function Menu() {
  paramTool={getParamTools(mostUsed, realTools)} />
  </Box>
  </Box>
- <Box>
- <Typography variant='h4'>
- {get('category.分类')}
- <Selects
- setEditMode={setEditMode}
- setEditing={setEditing}
- modifyClickCount={value => null}
- list={list}
- setList={setList}
- searchText={searchText}
- sortingFor={sortingFor}
- setSortingFor={setSortingFor}
- searchTools={searchTools}
- editMode={editMode}
- setTools={setTools}
- setSortedTools={setSortedTools}
- setSearchText={setSearchText}
- />
- </Typography>
- </Box>
  </> : <>
  <ToolsStack
  paramTool={tools}
@@ -211,9 +246,22 @@ export default function Menu() {
  sortingFor={sortingFor}
  setTools={setTools}
  editMode={editMode}
+ focus={focusingTo}
  />
  </>}
  </DialogContent>
+ {sortingFor !== "__home__" && <DialogActions>
+ {get("press")}
+ <Button onClick={handleTab}>
+ Tab
+ </Button>
+ {get("switch")}{", "}
+ {get("press")}
+ <Button onClick={handleEnter}>
+ Enter
+ </Button>
+ {get("enter")}
+ </DialogActions>}
  <DialogActions sx={{
  display: "flex",
  justifyContent: "space-between"

src/app/index/Sidebar.tsx

@@ -52,6 +52,9 @@ export default function Sidebar(props: {
  * 搜索工具
  */
  searchTools(search: string): void;
+ tools: tool[];
+ setTab: setState<number>;
+ focusingTo: Lowercase<string>;
  setTools: setState<tool[]>;
  setSortedTools: setState<tool[]>;
  sortingFor: string;
@@ -102,11 +105,30 @@ export default function Sidebar(props: {
  <InputBase value={searchText} sx={{
  ml: 1,
  flex: 1
+ }} onKeyDown={event => {
+ 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");
+ }
  }} />
  </Paper>
  <Center>

src/app/index/SingleTool.tsx

@@ -54,6 +54,7 @@ export default function SingleTool(props: {
  setTools: setState<tool[]>;
  editMode: boolean;
  sortingFor: string;
+ focus?: boolean;
 }) {
  const {
  tool,
@@ -115,14 +116,15 @@ export default function SingleTool(props: {
  <Card elevation={elevation} sx={{
  width: viewMode == "grid" ? 275 : fullWidth,
  maxWidth: fullWidth,
+ boxShadow: theme => 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);
  }} onMouseLeave={event => {
  setElevation(2); // reset to default
  }}>
  <CardContent>
- <Box sx={{
+ <Box id={`toolAbleToSelect-${tool.to}`} sx={{
  ...(viewMode === "list" ? {
  textAlign: "left",
  position: "relative",
@@ -210,7 +212,7 @@ export default function SingleTool(props: {
  </Box>
  </>}
  </Box>
- {props.isFirst && <iframe style={{
+ {props.focus && <iframe style={{
  border: "none",
  width: "100%"
  }} src={tool.isGoto ? (!tool.to.startsWith("/") ? tool.to : `${tool.to}&only=true`) : `/tools/${tool.to}?only=true`} />}

src/app/index/ToolsStack.tsx

@@ -39,6 +39,10 @@ export default function ToolsStack(props: {
  sortingFor: string;
  setTools: setState<tool[]>;
  editMode: boolean;
+ /**
+ * tool.to
+ */
+ focus?: string;
 }) {
  const {
  viewMode
@@ -56,6 +60,7 @@ export default function ToolsStack(props: {
  tool={tool}
  sortingFor={props.sortingFor}
  key={tool.to}
+ focus={props.focus === tool.to}
  darkMode={darkMode}
  viewMode={viewMode}
  setTools={props.setTools}
@@ -119,7 +124,7 @@ export default function ToolsStack(props: {
  </TransitionGroup>
  );
  }
- var darkModeFormStorage = useContext(darkModeContext).mode,
+ const darkModeFormStorage = useContext(darkModeContext).mode,
  darkMode = stringToBoolean(darkModeFormStorage.replace("light", "false").replace("dark", "true"));
  return (
  <Stack spacing={viewMode == "list" ? 3 : 5} sx={{

src/app/locales/zh-CN.json

@@ -291,5 +291,8 @@
  "share": {
  "t": "分享",
  "none": "分享功能在您的浏览器上不可用。"
- }
+ },
+ "switch": "切换",
+ "enter": "进入",
+ "press": "按"
 }

src/app/page.tsx

@@ -86,6 +86,8 @@ export default function Index(props: {
  [expandThis, setExpandThis] = useState<boolean>(false),
  [showTries, setShowTries] = useState<boolean>(false),
  [tools, setTools] = useState(toolsList),
+ [tab, setTab] = useState<number>(0),
+ focusingTo = tools[tab] ? tools[tab].to : "", // 每次渲染会重新执行
  [show, setShow] = useState<"tools" | "home">(props.isImplant ? "tools" : "home"),
  tries = useMemo(() => generateTries(mostUsed, realTools), [mostUsed, realTools]),
  [sortingFor, setSortingFor] = useState<string>(props.isImplant ? "__global__" : "__home__");
@@ -134,6 +136,7 @@ export default function Index(props: {
  sortingFor={sortingFor}
  setTools={setTools}
  editMode={editMode}
+ focus={focusingTo}
  />
  </Box>
  );
@@ -144,6 +147,9 @@ export default function Index(props: {
  zIndex: theme => String((theme as ThemeHaveZIndex).zIndex.drawer + 1)
  }} />}
  <Sidebar
+ tools={tools}
+ focusingTo={focusingTo}
+ setTab={setTab}
  setShow={setShow}
  isImplant={props.isImplant}
  viewMode={viewMode}