feat: update translations, enhance color option styling, and improve setting switch functionality

- Added a new translation for menu button visibility in Chinese.
- Adjusted the margin-top of color option elements for better spacing.
- Modified the setting switch component to handle reset logic and added confirmation dialog for hiding the menu button.

src/assets/locales/zh-CN/translation.json

@@ -198,6 +198,7 @@
   "Scrolling mode": "滚动模式",
   "Paragraph spacing threshold": "段落间距阈值",
   "Loading": "加载中",
+  "After hiding the menu button, you can move the mouse to the edge of the window to show it again.": "隐藏菜单按钮后，您可以将鼠标移动到窗口边缘再次显示它。",
   "When a line of text is n times the size of regular text, it will be treated as a title": "当一行文字的大小为常规文字的n倍时，将被视为标题",
   "Title size threshold": "标题大小阈值",
   "OCR engine": "OCR 引擎",

src/components/colorOption/colorOption.css

@@ -27,6 +27,7 @@
 .line-option {
   width: 25px;
   margin-right: 5px;
+  margin-top: 5px;
   height: 25px;
   border-radius: 50%;
   opacity: 1;

src/components/readerSettings/settingSwitch/component.tsx

@@ -6,6 +6,8 @@ import { ConfigService } from "../../../assets/lib/kookit-extra-browser.min";
 import { readerSettingList } from "../../../constants/settingList";
 import toast from "react-hot-toast";
 import BookUtil from "../../../utils/file/bookUtil";
+import { vexPromptAsync } from "../../../utils/common";
+declare var window: any;
 class SettingSwitch extends React.Component<
   SettingSwitchProps,
   SettingSwitchState
@@ -55,7 +57,7 @@ class SettingSwitch extends React.Component<
     });
   };
 
-  handleChange = (stateName: string) => {
+  handleChange = (stateName: string, isReset: boolean) => {
     this.setState({ [stateName]: !this.state[stateName] } as any);
     ConfigService.setReaderConfig(
       stateName,
@@ -63,9 +65,11 @@ class SettingSwitch extends React.Component<
     );
 
     toast(this.props.t("Change successful"));
-    setTimeout(() => {
-      this._handleRest();
-    }, 500);
+    if (isReset) {
+      setTimeout(() => {
+        this._handleRest();
+      }, 500);
+    }
   };
   render() {
     return (
@@ -89,7 +93,7 @@ class SettingSwitch extends React.Component<
 
               <span
                 className="single-control-switch"
-                onClick={() => {
+                onClick={async () => {
                   switch (item.propName) {
                     case "isBold":
                       this._handleChange("isBold");
@@ -116,28 +120,52 @@ class SettingSwitch extends React.Component<
                       this._handleChange("isStartFromEven");
                       break;
                     case "isHideFooter":
-                      this.handleChange("isHideFooter");
+                      this.handleChange("isHideFooter", true);
                       break;
                     case "isHideHeader":
-                      this.handleChange("isHideHeader");
+                      this.handleChange("isHideHeader", true);
                       break;
                     case "isHideBackground":
-                      this.handleChange("isHideBackground");
+                      this.handleChange("isHideBackground", true);
                       break;
                     case "isHidePageButton":
-                      this.handleChange("isHidePageButton");
+                      this.handleChange("isHidePageButton", false);
                       break;
                     case "isHideMenuButton":
-                      this.handleChange("isHideMenuButton");
+                      console.log(this.state["isHideMenuButton"]);
+                      if (!this.state["isHideMenuButton"]) {
+                        window.vex.dialog.confirm({
+                          message: this.props.t(
+                            "After hiding the menu button, you can move the mouse to the edge of the window to show it again."
+                          ),
+                          callback: (value) => {
+                            if (value) {
+                              this.setState({
+                                ["isHideMenuButton"]:
+                                  !this.state["isHideMenuButton"],
+                              } as any);
+                              ConfigService.setReaderConfig(
+                                "isHideMenuButton",
+                                this.state["isHideMenuButton"] ? "yes" : "no"
+                              );
+
+                              toast(this.props.t("Change successful"));
+                            }
+                          },
+                        });
+                      } else {
+                        this.handleChange("isHideMenuButton", false);
+                      }
+
                       break;
                     case "isHideAIButton":
-                      this.handleChange("isHideAIButton");
+                      this.handleChange("isHideAIButton", false);
                       break;
                     case "isHideScaleButton":
-                      this.handleChange("isHideScaleButton");
+                      this.handleChange("isHideScaleButton", false);
                       break;
                     case "isHidePDFConvertButton":
-                      this.handleChange("isHidePDFConvertButton");
+                      this.handleChange("isHidePDFConvertButton", false);
                       break;
                     default:
                       break;