✨ 菜单模式

package.json

@@ -1,8 +1,8 @@
 {
  "name": "neila-tools",
- "version": "1.5.2",
- "devVersion": "684",
- "dev": false,
+ "version": "1.5.3",
+ "devVersion": "685",
+ "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,
  "repository": "github:neila-a/NeilaTools",

src/app/Menu.tsx

@@ -0,0 +1,211 @@
+"use client";
+import {
+ Box,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ InputBase,
+ Paper,
+ Typography,
+ useMediaQuery,
+ useTheme
+} from "@mui/material";
+import {
+ useContext,
+ useState
+} from "react";
+import Transition from "./components/dialog/Transition";
+import MouseOverPopover from "./components/Popover";
+import I18N from "react-intl-universal";
+import {
+ ArrowBackIos as ArrowBackIosIcon,
+ Close as CloseIcon,
+ Handyman as HandymanIcon,
+ Search as SearchIcon
+} from "@mui/icons-material";
+import searchBase from './index/searchBase';
+import ToolsStack from "./index/ToolsStack";
+import {
+ getTools,
+ tool
+} from "./tools/info";
+import {
+ viewMode
+} from "./index/consts";
+import useStoragedState from "./components/useStoragedState";
+import SwitchViewMode from "./index/SwitchViewMode";
+import SwitchEditMode from "./index/SwitchEditMode";
+import getToolsList from "./index/getToolsList";
+import Selects from "./index/Selects";
+import getList from "./index/getList";
+import {
+ lists
+} from "./index/Sidebar";
+import { showSidebar } from "./layoutClient";
+import stringToBoolean from "./setting/stringToBoolean";
+export default function Menu() {
+ const control = useContext(showSidebar),
+ theme = useTheme(),
+ fullScreen = useMediaQuery(theme.breakpoints.down('sm')),
+ realTools = getTools(I18N), // 硬编码的工具列表
+ [recentlyUsed, setRecentlyUsed] = useStoragedState<string>("recently-tools", "最近使用的工具", "[]"),
+ [viewMode, setViewMode] = useStoragedState<viewMode>("viewmode", "列表模式", "grid"),
+ [editMode, setEditMode] = useState<boolean>(false),
+ [sortingFor, setSortingFor] = useState<string>("__home__"),
+ [list, setList] = useState<lists>(getList),
+ [searchText, setSearchText] = useState<string>(""),
+ [sortedTools, setSortedTools] = useState(() => getToolsList(realTools)), // 排序完毕，但是不会根据搜索而改动的工具列表
+ [tools, setTools] = useState<tool[]>(() => getToolsList(realTools)), // 经常改动的工具列表
+ [editing, setEditing] = useState<boolean>(searchText === "");
+ function searchTools(search: string) {
+ if (search !== "") {
+ setEditing(false);
+ } else {
+ setEditing(true);
+ }
+ if (sortingFor === "__home__") {
+ setSortingFor("__global__");
+ }
+ setTools(searchBase(sortedTools, search));
+ }
+ return (
+ <>
+ <Dialog fullScreen={fullScreen} onClose={() => {
+ control.set("false");
+ }} sx={{
+ ".MuiDialog-paper": {
+ maxWidth: "unset"
+ }
+ }} open={stringToBoolean(control.show)} keepMounted TransitionComponent={Transition}>
+ <DialogTitle sx={{
+ m: 0,
+ p: 2,
+ display: "flex"
+ }}>
+ {sortingFor !== "__home__" && (
+ <IconButton type="button" sx={{
+ p: '10px 5px'
+ }} aria-label="back" onClick={() => {
+ setSearchText("");
+ setSortingFor("__home__");
+ setSortedTools(() => getToolsList(realTools));
+ setEditing(true);
+ setTools(() => getToolsList(realTools));
+ }}>
+ <ArrowBackIosIcon />
+ </IconButton>
+ )}
+ <MouseOverPopover text={I18N.get('搜索')}>
+ <IconButton type="button" sx={{
+ p: '10px 5px'
+ }} aria-label="search" onClick={() => {
+ searchTools(searchText);
+ }}>
+ <SearchIcon />
+ </IconButton>
+ </MouseOverPopover>
+ <InputBase value={searchText} sx={{
+ ml: 1,
+ flex: 1
+ }} placeholder={I18N.get('搜索工具')} inputProps={{
+ 'aria-label': 'searchtools',
+ }} onChange={event => {
+ setSearchText(event.target.value);
+ searchTools(event.target.value);
+ }} />
+ <IconButton
+ aria-label="close"
+ onClick={event => {
+ control.set("false");
+ }}
+ sx={{
+ position: 'absolute',
+ right: 8
+ }}
+ >
+ <CloseIcon />
+ </IconButton>
+ </DialogTitle>
+ <DialogContent dividers>
+ {sortingFor === "__home__" ? <>
+ <Box>
+ <Typography variant='h4'>
+ {I18N.get('最近使用')}
+ </Typography>
+ <Box sx={{
+ p: 1
+ }}>
+ <ToolsStack
+ viewMode={viewMode}
+ searchText=""
+ sortingFor={"__home__"}
+ setTools={tools => null}
+ 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>
+ </Box>
+ <Box>
+ <Typography variant='h4'>
+ {I18N.get('工具列表')}
+ <Selects
+ 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}
+ viewMode={viewMode}
+ searchText={searchText}
+ sortingFor={sortingFor}
+ setTools={setTools}
+ editMode={editMode}
+ />
+ </>}
+ </DialogContent>
+ <DialogActions sx={{
+ display: "flex",
+ justifyContent: "space-between"
+ }}>
+ <Box sx={{
+ display: "flex"
+ }}>
+ <HandymanIcon />
+ <Typography sx={{
+ marginLeft: 1
+ }}>
+ NeilaTools
+ </Typography>
+ </Box>
+ <Box sx={{
+ display: "flex"
+ }}>
+ <SwitchViewMode viewMode={viewMode} setViewMode={setViewMode} />
+ {(editing && sortingFor !== "__extended__") && <SwitchEditMode editMode={editMode} setEditMode={setEditMode} />}
+ </Box>
+ </DialogActions>
+ </Dialog>
+ </>
+ );
+}

src/app/components/Popover.tsx

@@ -47,7 +47,7 @@ export default function MouseOverPopover(props: {
  id="mouse-over-popover"
  sx={{
  pointerEvents: 'none',
- zIndex: theme => (theme as ThemeHaveZIndex).zIndex.drawer + 2
+ zIndex: 38602
  }}
  open={open}
  anchorEl={anchorEl}

src/app/components/dialog/BootstrapDialogTitle.tsx

@@ -12,9 +12,15 @@ export default function BootstrapDialogTitle(props: {
  children: ReactNode;
  onClose: () => void;
 }) {
- const { children, onClose } = props;
+ const {
+ children,
+ onClose
+ } = props;
  return (
- <DialogTitle sx={{ m: 0, p: 2 }}>
+ <DialogTitle sx={{
+ m: 0,
+ p: 2
+ }}>
  {children}
  {onClose ? (
  <IconButton
@@ -24,7 +30,7 @@ export default function BootstrapDialogTitle(props: {
  position: 'absolute',
  right: 8,
  top: 8,
- color: (theme) => theme.palette.grey[500],
+ color: theme => theme.palette.grey[500],
  }}
  >
  <CloseIcon />

src/app/extendedTools/page.tsx

@@ -57,8 +57,7 @@ export default function ExtendedTools() {
  </>
  )}
  <Box sx={{
- p: 3,
- zIndex: 38602
+ p: 3
  }} id="container">
  <div id="neilatools_context" dangerouslySetInnerHTML={{
  __html: tool.file

src/app/index/DownButton.tsx

@@ -20,7 +20,7 @@ export default function DownButton(props: {
  tool: tool;
  sortingFor: string;
 }): JSX.Element {
- if (props.editMode) {
+ if (props.editMode && props.sortingFor !== "__home__") {
  return (
  <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{
  mr: 2