🩹 & 🎨

package.json

@@ -1,8 +1,8 @@
 {
  "name": "verkfi",
  "version": "1.6.1",
- "devVersion": "775",
- "dev": false,
+ "devVersion": "776",
+ "dev": true,
  "description": "Platform for Neila's something useless tools.",
  "private": true,
  "repository": "github:neila-a/verkfi",
@@ -31,21 +31,17 @@
  "@emotion/styled": "^11.11.0",
  "@fontsource/ubuntu": "^5.0.8",
  "@hello-pangea/dnd": "^16.5.0",
- "@mui/icons-material": "^5.15.7",
- "@mui/material": "^5.15.7",
+ "@mui/icons-material": "^5.15.10",
+ "@mui/material": "^5.15.10",
  "@mui/styled-engine-sc": "^5.14.12",
- "@mui/system": "^5.15.7",
+ "@mui/system": "^5.15.9",
  "@tybys/browser-asar": "github:toyobayashi/browser-asar",
- "dexie": "^3.2.4",
+ "@types/dom-to-image": "^2.6.7",
+ "dexie": "^3.2.5",
  "dexie-react-hooks": "^1.1.7",
  "dom-to-image": "^2.6.0",
  "file-saver": "^2.0.5",
  "filepond": "^4.30.6",
- "filepond-plugin-file-rename": "^1.1.8",
- "filepond-plugin-image-crop": "^2.0.6",
- "filepond-plugin-image-edit": "^1.6.3",
- "filepond-plugin-image-preview": "^4.6.12",
- "filepond-plugin-image-resize": "^2.0.10",
  "lp-logger": "github:neila-a/lp-logger-no-window",
  "mathjs": "^11.12.0",
  "moment": "^2.30.1",

src/app/components/dialog/BootstrapDialog.tsx

@@ -1,15 +1,14 @@
 import {
- styled
-} from '@mui/material/styles';
-import {
- Dialog
+ Dialog,
+ DialogProps
 } from "@mui/material";
-export const BootstrapDialog = styled(Dialog)(({ theme }) => ({
+export const BootstrapDialog = (props: DialogProps) => <Dialog {...props} sx={{
+ ...props.sx,
  '& .MuiDialogContent-root': {
- padding: theme.spacing(2),
+ p: 2
  },
  '& .MuiDialogActions-root': {
- padding: theme.spacing(1),
- },
-}));
+ p: 1
+ }
+}} />;
 export default BootstrapDialog;

src/app/index/SingleTool.tsx

@@ -7,13 +7,13 @@ import {
  Box,
  Card,
  CardContent,
- Typography
+ Typography,
+ TypographyOwnProps
 } from "@mui/material";
 import {
  ExitToApp as ExitToAppIcon,
  DragIndicator as DragIndicatorIcon
 } from "@mui/icons-material";
-import Style from "./Index.module.scss";
 import {
  tool
 } from "../tools/info";
@@ -30,7 +30,6 @@ import {
 import {
  setState
 } from '../declare';
-import styled from '@emotion/styled';
 import dynamic from 'next/dynamic';
 const CheckDialog = dynamic(() => import("../components/dialog/CheckDialog"));
 import {
@@ -79,11 +78,10 @@ export default function SingleTool(props: {
  [elevation, setElevation] = useState<number>(2),
  [jumpName, setJumpName] = useState<string>(""),
  [jumpDialogOpen, setJumpDialogOpen] = useState<boolean>(false),
- ToolTypography = styled(Typography)(({
- theme
- }) => ({
+ ToolTypography = (props: TypographyOwnProps) => <Typography {...props} sx={{
+ ...props.sx,
  wordBreak: "break-all"
- })),
+ }} />,
  fullWidth = `100%`,
  buttonOptions = {
  editMode: editMode,
@@ -111,7 +109,7 @@ export default function SingleTool(props: {
  db = <DownButton {...buttonOptions} />,
  ub = <UpButton {...buttonOptions} />;
  return (
- <Box mb={viewMode === "list" ? 2 : ""} key={tool.to} {...swipeHandler}> {/* 单个工具 */}
+ <Box mb={viewMode === "list" ? 2 : ""} key={tool.to} {...swipeHandler} component="section"> {/* 单个工具 */}
  <windows.Consumer>
  {value => (
  <Card elevation={elevation} sx={{
@@ -124,7 +122,16 @@ export default function SingleTool(props: {
  setElevation(2); // reset to default
  }}>
  <CardContent>
- <Box className={viewMode == "list" ? Style["singleList"] : ""} onClick={() => {
+ <Box sx={{
+ ...(viewMode === "list" ? {
+ textAlign: "left",
+ position: "relative",
+ cursor: "pointer",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between"
+ } : {})
+ }} onClick={() => {
  logger.info(`点击了${tool.name}`);
  if (tool.isGoto) {
  if (tool.to.startsWith("/extendedTools")) {
@@ -164,7 +171,7 @@ export default function SingleTool(props: {
  }
  }}>
  {viewMode == "grid" ? <Box>
- <Box className={Style["singleGridIcon"]}>
+ <Box>
  <ToolIcon />
  </Box>
  <Box>
@@ -179,8 +186,13 @@ export default function SingleTool(props: {
  </ToolTypography>
  </Box>
  </Box> : <>
- <Box className={Style["singleListText"]}>
- <Box className={Style["singleListIcon"]}>
+ <Box sx={{
+ display: "flex",
+ alignItems: "center"
+ }}>
+ <Box sx={{
+ mr: 2
+ }}>
  <ToolIcon />
  </Box>
  <Box>

src/app/index/ToolsStack.tsx

@@ -1,17 +1,12 @@
 "use client";
 import {
- get
-} from 'react-intl-universal';
-import {
- ReactNode,
  useContext
 } from 'react';
 import {
  Box,
  Collapse,
  Stack
 } from "@mui/material";
-import style from "./Index.module.scss";
 import {
  tool
 } from "../tools/info";
@@ -125,10 +120,18 @@ export default function ToolsStack(props: {
  var darkModeFormStorage = useContext(darkModeContext).mode,
  darkMode = stringToBoolean(darkModeFormStorage.replace("light", "false").replace("dark", "true"));
  return (
- <Stack spacing={viewMode == "list" ? 3 : 5} className={style["items"]} sx={{
+ <Stack spacing={viewMode == "list" ? 3 : 5} sx={{
  flexDirection: viewMode == "grid" ? "row" : "",
- display: viewMode == "grid" ? "flex" : "block",
- width: "100%"
+ display: viewMode == "grid" ? "flex" : "",
+ width: "100%",
+ flexWrap: "wrap",
+ alignContent: "center",
+ alignItems: "flex-end",
+ justifyContent: "space-evenly",
+ textAlign: "center",
+ ["& *"]: {
+ cursor: "pointer"
+ }
  }}> {/* 工具总览 */}
  {props.paramTool.length === 0 ? <ToolsNotFound /> : ((viewMode === "list" && props.editMode) ? <ListContainer /> : <GridContainer />)}
  </Stack>

src/app/layout.tsx

@@ -57,7 +57,6 @@ import '@fontsource/ubuntu/400.css';
 import '@fontsource/ubuntu/500.css';
 import '@fontsource/ubuntu/700.css';
 import 'filepond/dist/filepond.min.css'; // Import FilePond styles
-import style from "./layout/Layout.module.scss";
 import pack from "../../package.json";
 import {
  Box,
@@ -76,15 +75,21 @@ export default async function Layout({
 }) {
  return (
  <html lang="zh-cmn-Hans-CN">
- <body>
+ <body style={{
+ margin: 0,
+ scrollbarWidth: "none",
+ msOverflowStyle: "none"
+ }}>
  <noscript>
  <Loading>
  <Typography>
  Error: Unable to execute JavaScript.
  </Typography>
  </Loading>
  </noscript>
- <Box className={style["fullHeight"]}>
+ <Box sx={{
+ minHeight: "100vh"
+ }}>
  <Suspense fallback={<Loading />}> {/* 阻止整个页面坠落到客户端模式 */}
  <WindowsProvider>
  <BaseLayout>

src/app/layout/global.scss

@@ -1,9 +1,3 @@
-body {
- margin: 0px;
- scrollbar-width: none; // Firefox
- -ms-overflow-style: none; // IE 10+
-}
-
 * {
  font-family: Ubuntu !important;
 }

src/app/setting/extendeds/page.tsx

@@ -186,7 +186,7 @@ export default function ExtendedManager() {
  dir.forEach(item => stageFiles.push([item, fs.readFileSync(item)]));
  setFiles(stageFiles);
  };
- reader.readAsArrayBuffer(files[0].file);
+ files.forEach(file => reader.readAsArrayBuffer(file.file));
  }}
  allowMultiple={true}
  maxFiles={1}

src/app/tools/audiotools/Module.tsx

@@ -1,9 +1,10 @@
 "use client";
 import {
- Paper
+ Paper,
+ PaperOwnProps
 } from "@mui/material";
-import styled from '@emotion/styled';
-const Module = styled(Paper)({
- padding: "3px"
-});
+const Module = (props: PaperOwnProps) => <Paper {...props} sx={{
+ ...props.sx,
+ p: 1
+}} />;
 export default Module;

src/app/tools/audiotools/page.tsx

@@ -12,16 +12,8 @@ import {
  useState
 } from "react";
 import {
- FilePond,
- registerPlugin
+ FilePond
 } from 'react-filepond'; // Import React FilePond
-import FilePondPluginFileRename from 'filepond-plugin-file-rename'; // Import the plugin code
-import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; // Import the plugin code
-import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'; // Import the plugin styles
-import FilePondPluginImageResize from 'filepond-plugin-image-resize'; // Import the plugin code
-import FilePondPluginImageEdit from 'filepond-plugin-image-edit'; // Import the plugin code
-import 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css'; // Import the plugin styles
-import FilePondPluginImageCrop from 'filepond-plugin-image-crop'; // Import the plugin code
 import {
  FilePondFile
 } from "filepond";
@@ -37,7 +29,6 @@ function AudioTools(): JSX.Element {
  [loopSpeakAudioSrc, setLoopSpeakAudioSrc] = useState<string>(""),
  [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | "awaqwq">("awaqwq"),
  [status, setStatus] = useState<status>("inactive");
- registerPlugin(FilePondPluginFileRename, FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageEdit, FilePondPluginImageCrop); // Register the plugin
  useEffect(function () {
  if (navigator.mediaDevices.getUserMedia && mediaRecorder == "awaqwq") {
  var constraints = { audio: true };
@@ -99,16 +90,14 @@ function AudioTools(): JSX.Element {
  return (
  <Grid container direction="column" spacing={2}>
  <Grid item>
- <Module id="audioreplay">
+ <Module>
  <Typography variant="h4" gutterBottom>{get('音频循环播放')}</Typography>
  <audio controls loop src={loopAudioSrc}>
  {get('您的浏览器不支持 audio 元素。')}
  </audio>
  <FilePond
  files={[]}
- onupdatefiles={(audios: FilePondFile[]) => {
- setLoopAudioSrc(window.URL.createObjectURL(audios[0].file));
- }}
+ onupdatefiles={(audios: FilePondFile[]) => audios.forEach(audio => setLoopAudioSrc(window.URL.createObjectURL(audio.file)))}
  allowMultiple={true}
  maxFiles={1}
  name="files"
@@ -117,7 +106,7 @@ function AudioTools(): JSX.Element {
  </Module>
  </Grid>
  <Grid item>
- <Module id="audioinput">
+ <Module>
  <Typography variant="h4" gutterBottom>{get('音频录制并循环')}</Typography>
  <Button variant="contained" onClick={() => {
  return controlAudio("recording");