✨ SingleTool可将自己从分类中删除

package.json

@@ -1,7 +1,7 @@
 {
  "name": "verkfi",
  "version": "1.6.3",
- "devVersion": "825",
+ "devVersion": "826",
  "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,

src/app/Menu.tsx

@@ -42,14 +42,11 @@ import SwitchViewMode from "./index/SwitchViewMode";
 import SwitchEditMode from "./index/SwitchEditMode";
 import useToolsList from "./index/getToolsList";
 import Selects from "./index/Selects";
-import useList from "./index/getList";
-import {
- lists
-} from "./index/Sidebar";
 import {
  showSidebar,
  recentlyUsed as recentlyUsedContext,
  mostUsed as mostUsedContext,
+ lists as listsContext,
 } from "./layout/layoutClient";
 import {
  useRouter
@@ -72,8 +69,9 @@ export default function Menu() {
  [editMode, setEditMode] = useState<boolean>(false),
  [sortingFor, setSortingFor] = useState<string>("__home__"),
  [tab, setTab] = useState<number>(0),
- listFormStorage = useList(),
- [list, setList] = useState<lists>(listFormStorage),
+ listContexted = useContext(listsContext),
+ list = listContexted.value,
+ setList = listContexted.set,
  [searchText, setSearchText] = useState<string>(""),
  extensionTools = useLiveQuery(() => db.extensionTools.toArray(), [], []),
  router = useRouter(),

src/app/index/EditToolsListDialog.tsx

@@ -11,6 +11,7 @@ import {
  get
 } from "react-intl-universal";
 import {
+ useContext,
  useState
 } from "react";
 import dynamic from 'next/dynamic';
@@ -24,10 +25,14 @@ import {
  getTools
 } from "../tools/info";
 import setSetting from "../setting/setSetting";
-import useReadSetting from "../setting/useReadSetting";
-import { useLiveQuery } from "dexie-react-hooks";
+import {
+ useLiveQuery
+} from "dexie-react-hooks";
 import db from "../components/db";
 import convertExtensionTools from "./convertExtensionTools";
+import {
+ lists as listsContext
+} from "../layout/layoutClient";
 export default function EditToolsListDialog(props: {
  dialogTools: string[];
  setDialogTools: setState<string[]>;
@@ -42,32 +47,16 @@ export default function EditToolsListDialog(props: {
  const {
  dialogTools, setDialogTools, dialogListName, setDialogListName, setDialogOpen
  } = props,
- defaultList = [],
- realList = useReadSetting("lists", defaultList),
- [list, setList] = useState<lists>(() => {
- const lists = realList || defaultList;
- return lists;
- }),
+ usedList = useContext(listsContext),
+ list = usedList.value,
  edit = (forList: lists) => forList.some(single => single[0] === dialogListName),
  createOrEdit = !edit(list) ? get("category.创建分类") : get("category.编辑分类"),
  extensionTools = useLiveQuery(() => db.extensionTools.toArray(), [], []),
  converted = convertExtensionTools(extensionTools),
  toolsList = useToolsList(getTools(get));
  var right = toolsList.concat(converted).filter(atool => atool !== undefined).map(atool => atool.name).filter(v => props.left.every(val => val !== v));
  return (
- <PureDialog open={props.open} title={createOrEdit} onClose={() => {
- setDialogTools([]);
- setDialogListName("");
- setDialogOpen(false);
- }}>
- <TextField value={dialogListName} autoFocus margin="dense" label={get("category.分类名称")} fullWidth variant="standard" onChange={event => {
- setDialogListName(event.target.value);
- }} />
- <TransferList left={props.left} right={right} onLeftChange={context => {
- var tos: string[] = [];
- context.forEach(name => tos.push(toolsList.find(fullTool => fullTool.name === name).to));
- setDialogTools(tos);
- }} onRightChange={context => null} />
+ <PureDialog action={
  <ButtonGroup fullWidth>
  <Button variant="contained" onClick={event => {
  var listDraft: lists = list.slice(0),
@@ -79,9 +68,8 @@ export default function EditToolsListDialog(props: {
  if (!have) {
  listDraft.push([dialogListName, dialogTools]);
  }
- setList(listDraft);
  props.setList(listDraft);
- setSetting("lists", "集合列表", listDraft);
+ usedList.set(listDraft);
  setDialogListName("");
  setDialogTools([]);
  return setDialogOpen(false);
@@ -95,7 +83,17 @@ export default function EditToolsListDialog(props: {
  }}>
  {get("category.删除此分类")}
  </Button>}
- </ButtonGroup>
+ </ButtonGroup>} open={props.open} title={createOrEdit} onClose={() => {
+ setDialogTools([]);
+ setDialogListName("");
+ setDialogOpen(false);
+ }}>
+ <TextField value={dialogListName} autoFocus margin="dense" label={get("category.分类名称")} fullWidth variant="standard" onChange={event => {
+ setDialogListName(event.target.value);
+ }} />
+ <TransferList left={props.left} right={right} onLeftChange={context => {
+ setDialogTools(context.map(name => toolsList.concat(converted).find(fullTool => fullTool.name === name).to));
+ }} onRightChange={context => null} />
  </PureDialog>
  );
 }

src/app/index/Selects.tsx

@@ -14,6 +14,7 @@ import {
 } from '../declare';
 import {
  createElement,
+ useContext,
  useState
 } from 'react';
 import {
@@ -40,7 +41,9 @@ import reorder from '../components/reorder';
 import {
  DragIndicator as DragIndicatorIcon
 } from "@mui/icons-material";
-import convertExtensionTools from './convertExtensionTools';
+import {
+ lists as listsContext
+} from '../layout/layoutClient';
 export default function Selects(props: {
  list: lists;
  setList: setState<lists>;
@@ -63,6 +66,7 @@ export default function Selects(props: {
  [dialogOpen, setDialogOpen] = useState<boolean>(false),
  [dialogTools, setDialogTools] = useState<string[]>([]),
  gotToolsList = useToolsList(getTools(get)),
+ lists = useContext(listsContext),
  [removeDialogOpen, setRemoveDialogOpen] = useState<boolean>(false),
  [dialogListName, setDialogListName] = useState<string>(""),
  RealSelect = (aprops: {
@@ -131,7 +135,7 @@ export default function Selects(props: {
  }
  if (props.editMode) {
  const newLists = reorder(props.list, result.source.index, result.destination.index);
- setSetting("lists", "集合列表", newLists);
+ lists.set(newLists);
  props.setList(newLists);
  }
  }}>
@@ -140,7 +144,7 @@ export default function Selects(props: {
  <Box ref={provided.innerRef} {...provided.droppableProps} sx={{
  display: Boolean(props.isSidebar) ? "" : "flex"
  }}>
- {list.map((value: [string, string[]], index: number) => (
+ {list.map((value, index) => (
  props.editMode ? (
  <Draggable draggableId={value[0]} index={index} key={value[0]}>
  {provided => (
@@ -181,7 +185,7 @@ export default function Selects(props: {
  onTrue: () => {
  var listDraft: lists = list.slice(0).filter(draftSingle => draftSingle[0] !== dialogListName)
  setList(listDraft);
- setSetting("lists", "集合列表", listDraft);
+ lists.set(listDraft);
  setDialogListName("");
  return setRemoveDialogOpen(false);
  },

src/app/index/Sidebar.tsx

@@ -26,15 +26,17 @@ import {
  viewMode
 } from './consts';
 import {
+ useContext,
  useState
 } from 'react';
 import {
  tool
 } from "../tools/info";
 export type lists = [string, string[]][];
-import useList from './getList';
 import SingleSelect from './SingleSelect';
 import Selects from './Selects';
+import useStoragedState from '../components/useStoragedState';
+import { lists } from '../layout/layoutClient';
 export default function Sidebar(props: {
  /**
  * 是否为嵌入
@@ -75,8 +77,9 @@ export default function Sidebar(props: {
  } = props,
  [editing, setEditing] = useState<boolean>(searchText === ""),
  [clickCount, setClickCount] = useState<number>(0),
- listFormStorage = useList(),
- [list, setList] = useState<lists>(listFormStorage);
+ usedList = useContext(lists),
+ list = usedList.value,
+ setList = usedList.set;
  return (
  <Drawer variant="permanent" sx={{
  maxWidth: drawerWidth,
@@ -134,10 +137,20 @@ export default function Sidebar(props: {
  <Box sx={{
  textAlign: "center"
  }}>
- {!props.isImplant && <SingleSelect dragButton={<></>} editMode={editMode} isSidebar={true} sortingFor={sortingFor} searchText={searchText} setEditing={setEditing} wantSortingFor="__home__" tool={get("主页")} onClick={event => {
- props.setShow("home");
- setSortingFor("__home__");
- }} editButton={<></>} />}
+ {!props.isImplant && <SingleSelect
+ dragButton={<></>}
+ editMode={editMode}
+ isSidebar={true}
+ sortingFor={sortingFor}
+ searchText={searchText}
+ wantSortingFor="__home__"
+ tool={get("主页")}
+ onClick={event => {
+ props.setShow("home");
+ setSortingFor("__home__");
+ }}
+ editButton={<></>}
+ />}
  <Box onClick={event => {
  props.setShow("tools");
  props.setExpand(true);

src/app/index/SingleTool.tsx

@@ -7,12 +7,14 @@ import {
  Box,
  Card,
  CardContent,
+ IconButton,
  Typography,
  TypographyOwnProps
 } from "@mui/material";
 import {
  ExitToApp as ExitToAppIcon,
- DragIndicator as DragIndicatorIcon
+ DragIndicator as DragIndicatorIcon,
+ Delete
 } from "@mui/icons-material";
 import {
  tool
@@ -38,15 +40,17 @@ import {
  recentlyUsed as recentlyUsedContext,
  mostUsed as mostUsedContext,
  useLightMode,
+ lists as listsContext,
 } from '../layout/layoutClient';
-import stringToBoolean from "../setting/stringToBoolean";
 import {
  useSwipeable
 } from "react-swipeable";
 import {
  get
 } from "react-intl-universal";
 import destroyer from '../components/destroyer';
+import MouseOverPopover from '../components/Popover';
+import useStoragedState from '../components/useStoragedState';
 export default function SingleTool(props: {
  tool: tool;
  isFirst: boolean;
@@ -73,6 +77,9 @@ export default function SingleTool(props: {
  Router = useRouter(),
  colorContext = useContext(colorMode),
  recentlyUsed = useContext(recentlyUsedContext),
+ usedLists = useContext(listsContext),
+ lists = usedLists.value,
+ setLists = usedLists.set,
  mostUsed = useContext(mostUsedContext),
  color = colorContext.value,
  [jumpto, setJumpTo] = useState<string>(""),
@@ -208,9 +215,29 @@ export default function SingleTool(props: {
  </ToolTypography>
  </Box>
  </Box>
- <Box>
- {editMode && <DragIndicatorIcon />}
- </Box>
+ {editMode && <Box onClick={event => {
+ event.stopPropagation();
+ }} className="singleTool-editControler" sx={{
+ display: "flex",
+ alignItems: "center"
+ }}>
+ {sortingFor !== "__global__" && sortingFor !== "__home__" && (
+ <MouseOverPopover text={get("singleTool.deleteFromCategory")}>
+ <IconButton onClick={event => {
+ setLists(lists.slice(0).map(list => {
+ if (list[0] === sortingFor) {
+ return [list[0], list[1].filter(singleTool => singleTool !== tool.to)]
+ }
+ return list;
+ }));
+ setTools(old => old.slice(0).filter(atool => atool.to !== tool.to))
+ }}>
+ <Delete />
+ </IconButton>
+ </MouseOverPopover>
+ )}
+ <DragIndicatorIcon />
+ </Box>}
  </>}
  </Box>
  {props.focus && <iframe style={{
@@ -221,7 +248,7 @@ export default function SingleTool(props: {
  </Card>
  )}
  </windows.Consumer>
- <CheckDialog open={jumpDialogOpen} description={`${get("确定离开Verkfi并跳转至")}${jumpName}？`} title={get('离开Verkfi')} onTrue={() => {
+ <CheckDialog open={jumpDialogOpen} description={`${get("singleTool.jump")}${jumpName}？`} title={get('离开Verkfi')} onTrue={() => {
  Router.push(jumpto);
  setJumpDialogOpen(false);
  }} onFalse={() => {

src/app/index/buttonCommonSorting.tsx

@@ -4,19 +4,25 @@ import {
 } from "../tools/info";
 import setSetting from "../setting/setSetting";
 import {
- lists
+ lists as listsType
 } from './Sidebar';
-import useList from "./getList";
+import {
+ useContext
+} from "react";
+import {
+ lists
+} from "../layout/layoutClient";
 export default function useButtonCommonSorting() {
- const realList = useList();
+ const usedLists = useContext(lists),
+ realList = usedLists.value;
  return (sortingFor: string, pd: tool[]) => {
  const index = realList.findIndex(item => item[0] === sortingFor),
- newRealList: lists = realList.slice(0);
+ newRealList: listsType = realList.slice(0);
  if (index === -1) {
  newRealList.push(["__global__", pd.map(toolp => toolp.to)])
  } else {
  newRealList[index][1] = pd.map(toolp => toolp.to);
  }
- setSetting("lists", "集合列表", newRealList);
+ usedLists.set(newRealList);
  };
 }

src/app/index/getToolsList.ts

@@ -2,19 +2,24 @@
 import {
  tool
 } from "../tools/info";
-import useList from "./getList";
 import db from "../components/db";
 import convertExtensionTools from "./convertExtensionTools";
 import {
  useLiveQuery
 } from "dexie-react-hooks";
+import {
+ useContext
+} from "react";
+import {
+ lists as listsContext
+} from "../layout/layoutClient";
 /**
  * 排序工具
  * @param realTools 未排序的工具列表
  * @returns 经过排序的工具列表
  */
 const useToolsList = (realTools: tool[]) => {
- const lists = useList(),
+ const lists = useContext(listsContext).value,
  extensionTools = useLiveQuery(() => db.extensionTools.toArray(), [], []),
  converted = convertExtensionTools(extensionTools),
  list = lists.find(item => item[0] === "__global__");