fix bug

main.js

@@ -15,6 +15,7 @@ const fs = require("fs");
 const configDir = app.getPath("userData");
 const { ra } = require("./edge-tts");
 const dirPath = path.join(configDir, "uploads");
+const { Blob } = require("buffer");
 let mainWin;
 const singleInstance = app.requestSingleInstanceLock();
 var filePath = null;
@@ -119,8 +120,28 @@ const createMainWin = () => {
     event.returnValue = "success";
   });
   ipcMain.handle("edge-tts", async (event, config) => {
+    console.log(dirPath);
     let { text } = config;
-    return await ra(text);
+    let audioName = new Date().getTime() + ".webm";
+    if (!fs.existsSync(path.join(dirPath, "tts"))) {
+      fs.mkdirSync(path.join(dirPath, "tts"));
+      fs.writeFileSync(path.join(dirPath, "tts", audioName), await ra(text));
+      console.log("文件夹创建成功");
+    } else {
+      fs.writeFileSync(path.join(dirPath, "tts", audioName), await ra(text));
+      console.log("文件夹已存在");
+    }
+
+    return path.join(dirPath, "tts", audioName);
+  });
+  ipcMain.handle("clear-tts", async (event, config) => {
+    if (!fs.existsSync(path.join(dirPath, "tts"))) {
+      return "pong";
+    } else {
+      const fsExtra = require("fs-extra");
+      fsExtra.emptyDirSync(path.join(dirPath, "tts"));
+      return "pong";
+    }
   });
   ipcMain.handle("change-path", async (event) => {
     var path = await dialog.showOpenDialog({

package.json

@@ -30,6 +30,7 @@
     "epub-cfi-resolver": "^1.0.2",
     "font-list": "^1.4.5",
     "fs-extra": "^9.1.0",
+    "howler": "^2.2.3",
     "mhtml2html": "^3.0.0",
     "react-hot-toast": "^2.1.1",
     "request": "^2.88.2",

src/components/dialogs/actionDialog/actionDialog.css

@@ -45,6 +45,7 @@
   overflow-y: scroll;
   height: 185px;
   text-align: left;
+  overflow-x: hidden;
 }
 .action-dialog-book-title {
   font-size: 15px;

src/components/dialogs/actionDialog/component.tsx

@@ -22,6 +22,7 @@ class ActionDialog extends React.Component<
     super(props);
     this.state = {
       isShowExport: false,
+      isExceed: false,
     };
   }
   handleDeleteBook = () => {
@@ -125,8 +126,15 @@ class ActionDialog extends React.Component<
             </div>
             <div
               className="action-dialog-edit"
-              onMouseEnter={() => {
+              onMouseEnter={(event) => {
                 this.setState({ isShowExport: true });
+                const e = event || window.event;
+                let x = e.clientX;
+                if (x > document.body.clientWidth - 300) {
+                  this.setState({ isExceed: true });
+                } else {
+                  this.setState({ isExceed: false });
+                }
               }}
               onMouseLeave={(event) => {
                 this.setState({ isShowExport: false });
@@ -241,7 +249,7 @@ class ActionDialog extends React.Component<
             this.state.isShowExport
               ? {
                   position: "absolute",
-                  left: this.props.left,
+                  left: this.props.left + (this.state.isExceed ? -400 : 0),
                   top: this.props.top + 70,
                 }
               : { display: "none" }

src/components/dialogs/actionDialog/interface.tsx

@@ -22,4 +22,5 @@ export interface ActionDialogProps {
 }
 export interface ActionDialogState {
   isShowExport: boolean;
+  isExceed: boolean;
 }

src/components/searchBox/component.tsx

@@ -137,13 +137,15 @@ class SearchBox extends React.Component<SearchBoxProps> {
             <span className="icon-close"></span>
           </span>
         ) : (
-          <span
-            className="icon-search header-search-icon"
-            onClick={() => {
-              this.handleMouse();
-            }}
-            style={this.props.mode === "nav" ? { right: "5px" } : {}}
-          ></span>
+          <span className="header-search-text">
+            <span
+              className="icon-search header-search-icon"
+              onClick={() => {
+                this.handleMouse();
+              }}
+              style={this.props.mode === "nav" ? { right: "5px" } : {}}
+            ></span>
+          </span>
         )}
       </div>
     );

src/components/searchBox/searchBox.css

@@ -1,11 +1,12 @@
 .header-search-box {
-  width: 100%;
+  width: calc(100% - 20px);
   height: 38px;
   border-radius: 22px;
   border-style: none;
   outline: none;
-  padding-left: 20px;
   font-size: 15px;
+  padding: 0px;
+  padding-left: 20px;
 }
 input::-webkit-input-placeholder,
 input::-moz-placeholder,
@@ -15,28 +16,24 @@ textarea::-moz-placeholder,
 textarea::-ms-input-placeholder {
   font-size: 15px;
   line-height: 38px;
+
   /* opacity: 1; */
 }
 .header-search-icon {
-  position: absolute;
-  top: 10px;
-  right: -6px;
   font-size: 22px;
   display: inline-block;
   opacity: 0.6;
   cursor: pointer;
-  margin-right: 10px;
 }
 .header-search-text {
   position: absolute;
   top: 0px;
-  right: -15px;
+  right: 0px;
   font-size: 15px;
   display: inline-block;
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 100%;
   cursor: pointer;
-  margin-right: 5px;
   display: flex;
   align-items: center;
   justify-content: center;