✨ 添加向右滑动忽略最近/最常工具的功能

src/app/Menu.tsx

@@ -7,7 +7,6 @@ import {
  DialogTitle,
  IconButton,
  InputBase,
- Paper,
  Typography,
  useMediaQuery,
  useTheme
@@ -47,7 +46,9 @@ import {
  lists
 } from "./index/Sidebar";
 import {
- showSidebar
+ showSidebar,
+ recentlyUsed as recentlyUsedContext,
+ mostUsed as mostUsedContext,
 } from "./layout/layoutClient";
 import stringToBoolean from "./setting/stringToBoolean";
 import {
@@ -59,8 +60,8 @@ export default function Menu() {
  theme = useTheme(),
  fullScreen = useMediaQuery(theme.breakpoints.down('sm')),
  realTools = getTools(get), // 硬编码的分类
- [recentlyUsed, setRecentlyUsed] = useStoragedState<string>("recently-tools", "最近使用的工具", "[]"),
- [mostUsed, setMostUsed] = useStoragedState<string>("most-tools", "最常使用的工具", "{}"),
+ recentlyUsed = useContext(recentlyUsedContext).value,
+ mostUsed = useContext(mostUsedContext).value,
  [viewMode, setViewMode] = useStoragedState<viewMode>("viewmode", "列表模式", "list"),
  [editMode, setEditMode] = useState<boolean>(false),
  [sortingFor, setSortingFor] = useState<string>("__home__"),

src/app/components/Popover.tsx

@@ -13,7 +13,9 @@ import {
  isMobile
 } from 'react-device-detect';
 import lpLogger from "lp-logger";
-import { ThemeHaveZIndex } from '../setting/layout';
+import {
+ ThemeHaveZIndex
+} from '../setting/layout';
 var logger = new lpLogger({
  name: "Popover",
  level: "log"

src/app/components/window/Window.tsx

@@ -26,7 +26,9 @@ import Draggable from "react-draggable";
 import {
  useTheme
 } from "@mui/material/styles";
-import { Hex } from "../../declare";
+import {
+ Hex
+} from "../../declare";
 export interface WindowOptions {
  to: string;
  name: string;

src/app/index/SingleTool.tsx

@@ -1,6 +1,5 @@
 "use client";
-import React, {
- Fragment,
+import {
  useContext,
  useState
 } from 'react';
@@ -16,7 +15,6 @@ import {
 } from "@mui/icons-material";
 import Style from "./Index.module.scss";
 import {
- getTools,
  tool
 } from "../tools/info";
 import {
@@ -26,7 +24,8 @@ import DownButton from './DownButton';
 import UpButton from './UpButton';
 import {
  viewMode,
- logger
+ logger,
+ homeWhere as homeWhereContext
 } from './consts';
 import {
  setState
@@ -36,12 +35,18 @@ import dynamic from 'next/dynamic';
 const CheckDialog = dynamic(() => import("../components/dialog/CheckDialog"));
 import {
  colorMode,
- windows
+ windows,
+ recentlyUsed as recentlyUsedContext,
+ mostUsed as mostUsedContext,
 } from '../layout/layoutClient';
 import stringToBoolean from "../setting/stringToBoolean";
-import intl, {
+import {
+ useSwipeable
+} from "react-swipeable";
+import {
  get
 } from "react-intl-universal";
+import destroyer from '../components/destroyer';
 export default function SingleTool(props: {
  tool: tool;
  isFirst: boolean;
@@ -58,7 +63,6 @@ export default function SingleTool(props: {
  setTools,
  sortingFor
  } = props,
- toolsInfo = getTools(get),
  ToolIcon = tool.icon,
  subStyle = {
  sx: {
@@ -67,8 +71,11 @@ export default function SingleTool(props: {
  },
  Router = useRouter(),
  colorContext = useContext(colorMode),
+ recentlyUsed = useContext(recentlyUsedContext),
+ mostUsed = useContext(mostUsedContext),
  color = colorContext.value,
  [jumpto, setJumpTo] = useState<string>(""),
+ homeWhere = useContext(homeWhereContext),
  [elevation, setElevation] = useState<number>(2),
  [jumpName, setJumpName] = useState<string>(""),
  [jumpDialogOpen, setJumpDialogOpen] = useState<boolean>(false),
@@ -84,10 +91,27 @@ export default function SingleTool(props: {
  tool: tool,
  sortingFor: sortingFor
  },
+ swipeHandler = useSwipeable({
+ onSwipedRight: data => {
+ switch (homeWhere) {
+ case "most": {
+ let old = JSON.parse(mostUsed.value);
+ delete old[tool.to];
+ mostUsed.set(JSON.stringify(old));
+ break;
+ }
+ case "recently": {
+ let old = JSON.parse(recentlyUsed.value) as string[];
+ recentlyUsed.set(JSON.stringify(destroyer(old, tool.to)));
+ break;
+ }
+ }
+ }
+ }),
  db = <DownButton {...buttonOptions} />,
  ub = <UpButton {...buttonOptions} />;
  return (
- <Box mb={viewMode === "list" ? 2 : ""} key={tool.to}> {/* 单个工具 */}
+ <Box mb={viewMode === "list" ? 2 : ""} key={tool.to} {...swipeHandler}> {/* 单个工具 */}
  <windows.Consumer>
  {value => (
  <Card elevation={elevation} sx={{

src/app/index/consts.ts

@@ -1,6 +1,8 @@
 import LpLogger from "lp-logger";
+import { createContext } from "react";
 export var logger = new LpLogger({
  name: "Index",
  level: "log", // 空字符串时，不显示任何信息
 });
+export const homeWhere = createContext<"no" | "recently" | "most">("no"); // 在主页的哪里
 export type viewMode = "list" | "grid";

src/app/layout/layoutClient.tsx

@@ -92,6 +92,14 @@ export const lang = createContext<{
  value: string;
  set: setState<string>;
 }>(null);
+export const recentlyUsed = createContext<{
+ value: string;
+ set: setState<string>;
+}>(null);
+export const mostUsed = createContext<{
+ value: string;
+ set: setState<string>;
+}>(null);
 export const windows = createContext<{
  windows: WindowOptions[];
  set: setState<WindowOptions[]>;
@@ -114,6 +122,8 @@ export default function ModifiedApp(props: {
 }) {
  const [mode, setMode] = useStoragedState<PaletteMode>("darkmode", "暗色模式", "light"),
  [palette, setPalette] = useStoragedState<string>("palette", "调色板", "__none__"),
+ [recentlyUsedState, setRecentlyUsed] = useStoragedState<string>("recently-tools", "最近使用的工具", "[]"),
+ [mostUsedState, setMostUsed] = useStoragedState<string>("most-tools", "最常使用的工具", "{}"),
  realPalette = useMemo(() => (palette === "__none__" ? {} : JSON.parse(palette)), [palette]),
  theme = useMemo(
  () =>
@@ -201,14 +211,24 @@ export default function ModifiedApp(props: {
  value: palette,
  set: setPalette
  }}>
- <CssBaseline />
- <Box component="aside">
- {Sidebar}
- </Box>
- <Box component="main" ml={(stringToBoolean(showSidebarState) && sidebarModeState === "sidebar") ? ml : ""}>
- {props.children}
- </Box>
- <WindowContainer />
+ <recentlyUsed.Provider value={{
+ value: recentlyUsedState,
+ set: setRecentlyUsed
+ }}>
+ <mostUsed.Provider value={{
+ value: mostUsedState,
+ set: setMostUsed
+ }}>
+ <CssBaseline />
+ <Box component="aside">
+ {Sidebar}
+ </Box>
+ <Box component="main" ml={(stringToBoolean(showSidebarState) && sidebarModeState === "sidebar") ? ml : ""}>
+ {props.children}
+ </Box>
+ <WindowContainer />
+ </mostUsed.Provider>
+ </recentlyUsed.Provider>
  </paletteColors.Provider>
  </sidebarMode.Provider>
  </lang.Provider>

src/app/page.tsx

@@ -36,7 +36,8 @@ import {
 import getToolsList from './index/getToolsList';
 import Sidebar from './index/Sidebar';
 import {
- viewMode
+ viewMode,
+ homeWhere
 } from './index/consts';
 import useStoragedState from './components/useStoragedState';
 import {
@@ -50,11 +51,15 @@ import ToolsStack from './index/ToolsStack';
 import searchBase from './index/searchBase';
 import {
  first as firstContext,
+ recentlyUsed as recentlyUsedContext,
+ mostUsed as mostUsedContext,
  showSidebar as showSidebarContext
 } from './layout/layoutClient';
 import stringToBoolean from './setting/stringToBoolean';
 import getParamTools from './index/getParamTools';
-import { not } from './components/TransferList';
+import {
+ not
+} from './components/TransferList';
 export default function Index(props: {
  /**
  * 是否为嵌入
@@ -78,8 +83,8 @@ export default function Index(props: {
  } = props,
  showSidebar = useContext(showSidebarContext),
  first = useContext(firstContext),
- [recentlyUsed, setRecentlyUsed] = useStoragedState<string>("recently-tools", "最近使用的工具", "[]"),
- [mostUsed, setMostUsed] = useStoragedState<string>("most-tools", "最常使用的工具", "{}"),
+ recentlyUsed = useContext(recentlyUsedContext).value,
+ mostUsed = useContext(mostUsedContext).value,
  [sortedTools, setSortedTools] = useState(toolsList),
  [searchText, setSearchText] = useState<string>(""),
  [viewMode, setViewMode] = useStoragedState<viewMode>("viewmode", "列表模式", "list"),
@@ -232,44 +237,48 @@ export default function Index(props: {
  </Box>
  </Collapse>
  <Box>
- <Typography variant='h4'>
- {get('最近使用')}
- </Typography>
- <Box sx={{
- p: 1
- }}>
- <ToolsStack
- viewMode={viewMode}
- searchText=""
- sortingFor={sortingFor}
- setTools={setTools}
- editMode={false}
- paramTool={(JSON.parse(recentlyUsed) as string[]).map(to => {
- var tool: tool;
- realTools.forEach(single => {
- if (single.to === to) {
- tool = single;
- }
- });
- return tool;
- })} />
- </Box>
+ <homeWhere.Provider value="recently">
+ <Typography variant='h4'>
+ {get('最近使用')}
+ </Typography>
+ <Box sx={{
+ p: 1
+ }}>
+ <ToolsStack
+ viewMode={viewMode}
+ searchText=""
+ sortingFor={sortingFor}
+ setTools={setTools}
+ editMode={false}
+ paramTool={(JSON.parse(recentlyUsed) as string[]).map(to => {
+ var tool: tool;
+ realTools.forEach(single => {
+ if (single.to === to) {
+ tool = single;
+ }
+ });
+ return tool;
+ })} />
+ </Box>
+ </homeWhere.Provider>
  </Box>
  <Box>
- <Typography variant='h4'>
- {get('最常使用')}
- </Typography>
- <Box sx={{
- p: 1
- }}>
- <ToolsStack
- viewMode={viewMode}
- searchText=""
- sortingFor={"__home__"}
- setTools={setTools}
- editMode={false}
- paramTool={getParamTools(mostUsed, realTools)} />
- </Box>
+ <homeWhere.Provider value="most">
+ <Typography variant='h4'>
+ {get('最常使用')}
+ </Typography>
+ <Box sx={{
+ p: 1
+ }}>
+ <ToolsStack
+ viewMode={viewMode}
+ searchText=""
+ sortingFor={"__home__"}
+ setTools={setTools}
+ editMode={false}
+ paramTool={getParamTools(mostUsed, realTools)} />
+ </Box>
+ </homeWhere.Provider>
  </Box>
  </Box>
  )}

src/app/tools/template.tsx

@@ -1,30 +1,35 @@
 "use client";
 import {
+ useContext,
  useEffect
 } from "react";
-import checkOption from "../setting/checkOption";
 import {
  useSelectedLayoutSegment
 } from "next/navigation";
-import setSetting from "../setting/setSetting";
 import Recently from "../components/Recently";
+import {
+ recentlyUsed as recentlyUsedContext,
+ mostUsed as mostUsedContext
+} from "../layout/layoutClient";
 // 每个3格最多显示
 export default function Template(props: {
  children: React.ReactNode
 }) {
- const thisTool = useSelectedLayoutSegment();
+ const thisTool = useSelectedLayoutSegment(),
+ recentlyUsed = useContext(recentlyUsedContext),
+ mostUsedState = useContext(mostUsedContext);
  useEffect(() => {
- const set = new Recently(3, (JSON.parse(checkOption<string>("recently-tools", "最近使用的工具", "[]")) as string[]).reverse());
+ const set = new Recently(3, (JSON.parse(recentlyUsed.value) as string[]).reverse());
  set.add(thisTool);
- setSetting("recently-tools", "最近使用的工具", JSON.stringify(set.get().reverse()));
- const mostUsed = JSON.parse(checkOption<string>("most-tools", "最常使用的工具", "{}"));
+ const mostUsed = JSON.parse(mostUsedState.value);
  if (mostUsed.hasOwnProperty(thisTool)) {
  mostUsed[thisTool] = mostUsed[thisTool] + 1;
  } else {
  mostUsed[thisTool] = 0;
  }
- setSetting("most-tools", "最常使用的工具", JSON.stringify(mostUsed));
- }, []);
+ recentlyUsed.set(JSON.stringify(set.get().reverse()));
+ mostUsedState.set(JSON.stringify(mostUsed));
+ }, []); // 不放在副作用里会导致无限循环
  return (
  <>
  {props.children}