✨ （Bug report: 在访问扩展工具时无法计入最常工具和最近工具 #126）添加删除扩展时可同时删除使用记录的功能

neila-a · Mar 18, 2024 · 887dac9 · 887dac9
1 parent 53762c0
commit 887dac9
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "verkfi",
  "version": "1.6.3",
- "devVersion": "801",
+ "devVersion": "802",
  "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,

diff --git a/src/app/components/dialog/CheckDialog.tsx b/src/app/components/dialog/CheckDialog.tsx
@@ -10,10 +10,14 @@ import {
  Button
 } from "@mui/material";
 import Transition from "./Transition";
+import {
+ ReactNode
+} from 'react';
 export default function CheckDialog(props: {
  title: string;
  onFalse(): any;
  onTrue(): any;
+ insert?: ReactNode;
  description: string;
  open: boolean
 }) {
@@ -24,6 +28,7 @@ export default function CheckDialog(props: {
  <DialogContentText id="description">
  {props.description}
  </DialogContentText>
+ {props.insert}
  </DialogContent>
  <DialogActions>
  <Button onClick={() => {

diff --git a/src/app/locales/zh-CN.json b/src/app/locales/zh-CN.json
@@ -193,7 +193,8 @@
  "编辑扩展": "编辑扩展",
  "删除扩展": "删除扩展",
  "确定删除扩展": "确定删除扩展",
- "未找到任何扩展": "未找到任何扩展"
+ "未找到任何扩展": "未找到任何扩展",
+ "clear": "清除扩展的使用数据"
  },
  "theme": {
  "primary": "主要色",

diff --git a/src/app/setting/extendeds/page.tsx b/src/app/setting/extendeds/page.tsx
@@ -6,9 +6,12 @@ import {
  Typography,
  Divider,
  IconButton,
- Box
+ Box,
+ FormControlLabel,
+ Checkbox
 } from "@mui/material";
 import {
+ useContext,
  useState
 } from "react";
 import {
@@ -48,7 +51,8 @@ export const emptyNXTMetadata: NXTMetadata = {
 import {
  Add as AddIcon,
  Edit as EditIcon,
- SyncProblem as SyncProblemIcon
+ SyncProblem as SyncProblemIcon,
+ RestartAlt as RestartAltIcon
 } from "@mui/icons-material";
 import {
  useLiveQuery
@@ -57,6 +61,10 @@ import Image from "next/image";
 import db from "../../tools/extended/db";
 import CheckDialog from "../../components/dialog/CheckDialog";
 import DialogInputs from "./DialogInputs";
+import {
+ recentlyUsed as recentlyUsedContext
+} from "../../layout/layoutClient";
+import MouseOverPopover from "../../components/Popover";
 export type inputTypes = "modify" | "add";
 export default function ExtendedManager() {
  const [addDialogOpen, setAddDialogOpen] = useState<boolean>(false),
@@ -65,12 +73,15 @@ export default function ExtendedManager() {
  [files, setFiles] = useState<[string, Uint8Array][]>([]),
  [removeDialogOpen, setRemoveDialogOpen] = useState<boolean>(false),
  [modifyDialogOpen, setModifyDialogOpen] = useState<boolean>(false),
+ [clearData, setClearData] = useState<boolean>(false),
+ recentlyUsed = useContext(recentlyUsedContext),
  reset = () => {
  setAddDialogOpen(false);
  setModifyDialogOpen(false);
  setRemoveDialogOpen(false);
  setFileArray([]);
  setFiles([]);
+ setClearData(false);
  setFileInfo(emptyNXTMetadata);
  },
  extendedTools = useLiveQuery(() => db.extendedTools.toArray(), [], []),
@@ -83,12 +94,16 @@ export default function ExtendedManager() {
  setModifyDialogOpen={setModifyDialogOpen}
  setRemoveDialogOpen={setRemoveDialogOpen}
  />
+ function clearExtendedData() {
+ const old = JSON.parse(recentlyUsed.value) as string[];
+ recentlyUsed.set(JSON.stringify(old.filter(item => item !== fileInfo.to)));
+ }
  return (
  <>
  <Typography variant="h4">
  {get('extensions.扩展')}
  </Typography>
- <Stack spacing={2}>
+ <Stack spacing={2} mb={2}>
  {extendedTools?.length === 0 ? <Box sx={{
  color: theme => theme.palette.text.disabled,
  textAlign: "center"
@@ -132,19 +147,29 @@ export default function ExtendedManager() {
  {single.desc}
  </Box>
  </Stack>
- <IconButton onClick={event => {
- setFiles(single.files);
- setFileInfo({
- ...single
- });
- setModifyDialogOpen(true);
- }}>
- <EditIcon />
- </IconButton>
+ <Box display="flex">
+ <MouseOverPopover text={get("extensions.clear")}>
+ <IconButton onClick={event => {
+ clearExtendedData();
+ }}>
+ <RestartAltIcon />
+ </IconButton>
+ </MouseOverPopover>
+ <MouseOverPopover text={get("extensions.删除扩展")}>
+ <IconButton onClick={event => {
+ setFiles(single.files);
+ setFileInfo({
+ ...single
+ });
+ setModifyDialogOpen(true);
+ }}>
+ <EditIcon />
+ </IconButton>
+ </MouseOverPopover>
+ </Box>
  </Box>
  </Paper>)}
  </Stack>
- <br />
  <Button startIcon={<AddIcon />} fullWidth onClick={event => {
  setAddDialogOpen(true);
  }} variant="outlined">
@@ -155,19 +180,24 @@ export default function ExtendedManager() {
  }} title={get("extensions.编辑扩展")}>
  {packagedDialogInputs("modify")}
  </PureDialog>
- <CheckDialog open={removeDialogOpen} title={get("extensions.删除扩展")} description={`${get("extensions.确定删除扩展")}${fileInfo.name}?`} onFalse={() => {
+ <CheckDialog insert={<FormControlLabel control={<Checkbox value={clearData} onChange={event => {
+ setClearData(event.target.checked);
+ }} />} label={get("extensions.clear")} />} onFalse={() => {
  reset();
  }} onTrue={async () => {
- const id = await db.extendedTools.delete(fileInfo.to);
+ await db.extendedTools.delete(fileInfo.to);
+ if (clearData) {
+ clearExtendedData();
+ }
  reset();
- }} />
+ }} open={removeDialogOpen} title={get("extensions.删除扩展")} description={`${get("extensions.确定删除扩展")}${fileInfo.name}?`} />
  <PureDialog open={addDialogOpen} onClose={() => reset()} title={get("extensions.添加扩展")}>
  <FilePond
  files={fileArray as unknown as FilePondServerConfigProps["files"]}
  onupdatefiles={files => {
  setFileArray(files);
  const reader = new FileReader();
- reader.onload = function () {
+ reader.onload = async function () {
  const fs = new Filesystem(new Uint8Array(reader.result as ArrayBuffer)),
  dir = fs.readdirSync("/").filter(item => item !== "package.json"),
  main = JSON.parse(fs.readFileSync("package.json", true));
@@ -179,9 +209,11 @@ export default function ExtendedManager() {
  color: main.color,
  main: main.main
  });
- var stageFiles: [string, Uint8Array][] = [];
- dir.forEach(item => stageFiles.push([item, fs.readFileSync(item)]));
- setFiles(stageFiles);
+ setFiles(dir.map(item => [item, fs.readFileSync(item)]));
+ if ((await db.extendedTools.toArray()).some(item => item.to === main.to)) {
+ setModifyDialogOpen(true);
+ return setAddDialogOpen(false);
+ }
  };
  files.forEach(file => reader.readAsArrayBuffer(file.file));
  }}

diff --git a/src/app/tools/layout.tsx b/src/app/tools/layout.tsx
@@ -15,7 +15,7 @@ import {
 import {
  Box
 } from "@mui/material";
-import intl, {
+import {
  get
 } from "react-intl-universal";
 import lpLogger from "lp-logger";
@@ -29,6 +29,7 @@ import {
 } from "dexie-react-hooks";
 import db from "./extended/db";
 import convertExtendedTools from "../index/convertExtendedTools";
+import { emptyExtended } from "./extended/page";
 var logger = new lpLogger({
  name: "ToolFinder",
  level: "log"
@@ -47,19 +48,15 @@ export default function ToolFinder(props: {
  ...single,
  to: single.to.replace("/tools/extended?tool=", "") as Lowercase<string>
  })) : getTools(get),
- toolColor = stringToBoolean(color) && getToolColor(toolsInfo, toolID);
+ filteredToolsInfo = toolsInfo.filter(si => si.to === toolID),
+ {
+ name
+ } = filteredToolsInfo.length === 0 ? emptyExtended : filteredToolsInfo[0];
  logger.info(`toolID为${toolID}`);
  return (
  <>
- <HeadBar isIndex={false} pageName={(() => {
- var name: string;
- toolsInfo.forEach(si => {
- if (si.to == toolID) name = si.name;
- });
- if (name == "") return get("未找到工具");
- return name;
- })()} only={only} sx={{
- backgroundImage: toolColor
+ <HeadBar isIndex={false} pageName={name === "" ? get("未找到工具") : name} only={only} sx={{
+ backgroundImage: stringToBoolean(color) && getToolColor(toolsInfo, toolID)
  }} />
  <Box sx={{
  p: 3