feat: enhance user feedback and error handling in settings components

src/assets/locales/zh-CN.json

@@ -12,6 +12,7 @@
   "Text alignment": "文字对齐",
   "Text orientation": "文字方向",
   "Horizontal": "横排",
+  "You can add models manually by selecting the custom model": "您可以通过选择自定义模型来手动添加模型",
   "Vertical": "竖排",
   "Synchronisation successful": "同步成功",
   "Permanently Delete": "永久删除",
@@ -951,4 +952,4 @@
   "Custom AI Dictionary": "自定义 AI 词典",
   "Custom AI Assistance": "自定义 AI 辅助",
   "Model assignment": "模型分配"
-}
+}

src/components/readerSettings/dropdownList/component.tsx

@@ -4,7 +4,7 @@ import "./dropdownList.css";
 import { Trans } from "react-i18next";
 import { DropdownListProps, DropdownListState } from "./interface";
 import { ConfigService } from "../../../assets/lib/kookit-extra-browser.min";
-import { loadFontData } from "../../../utils/common";
+import { loadFontData, vexComfirmAsync } from "../../../utils/common";
 import toast from "react-hot-toast";
 declare var window: any;
 class DropdownList extends React.Component<
@@ -83,7 +83,13 @@ class DropdownList extends React.Component<
           ConfigService.setReaderConfig(option, "");
         }
         if (arr[0] === "Load local fonts") {
-          loadFontData();
+          vexComfirmAsync(
+            this.props.t(
+              "Please install local fonts to your machine and then restart the application"
+            )
+          );
+
+          return;
         }
 
         break;

src/components/textToSpeech/component.tsx

@@ -1106,7 +1106,7 @@ class TextToSpeech extends React.Component<
                   }
                 );
               }
-
+              toast.success(this.props.t("Setup successful"));
               if (this.state.isAudioOn) {
                 this.handleVoiceSwitch(voiceName, newEngine, previousEngine);
               }

src/containers/settings/aiSetting/component.tsx

@@ -132,6 +132,15 @@ class AISetting extends React.Component<SettingInfoProps, SettingInfoState> {
       }
       const data = await response.json();
       const rawModels = data.data || data.models || data.results || data || [];
+      if (rawModels.length === 0) {
+        toast.error(this.props.t("No models found"));
+        toast.error(
+          this.props.t(
+            "You can add models manually by selecting the custom model"
+          )
+        );
+        return;
+      }
       const models = rawModels.map((m: any) => ({
         id: m.id || m.model || m.name,
         name: m.id || m.display_name || m.name || m.model,

src/containers/settings/backgroundSetting/component.tsx

@@ -117,14 +117,14 @@ class BackgroundSetting extends React.Component<
 
   handleSetAppBackground = (image: BackgroundImage) => {
     ConfigService.setReaderConfig("appBackgroundImage", image.id);
-    this.setState({ appBackgroundId: image.id, previewImage: null });
+    this.setState({ appBackgroundId: image.id });
     applyAppBackgroundImage();
     toast.success(this.props.t("Change successful"));
   };
 
   handleClearAppBackground = () => {
     ConfigService.setReaderConfig("appBackgroundImage", "");
-    this.setState({ appBackgroundId: "", previewImage: null });
+    this.setState({ appBackgroundId: "" });
     applyAppBackgroundImage();
     toast.success(this.props.t("Change successful"));
   };
@@ -137,16 +137,18 @@ class BackgroundSetting extends React.Component<
     if (image.backgroundColor) {
       ConfigService.setReaderConfig("backgroundColor", image.backgroundColor);
     }
-    this.setState({ readerBackgroundId: image.id, previewImage: null });
+    this.setState({ readerBackgroundId: image.id });
     this.props.handleReaderBackgroundImage?.(image.id);
     toast.success(this.props.t("Change successful"));
   };
 
   handleClearReaderBackground = () => {
     ConfigService.setReaderConfig("readerBackgroundImage", "");
-    this.setState({ readerBackgroundId: "", previewImage: null });
+    this.setState({ readerBackgroundId: "" });
     this.props.handleReaderBackgroundImage?.("");
     toast.success(this.props.t("Change successful"));
+    ConfigService.setReaderConfig("textColor", "");
+    ConfigService.setReaderConfig("backgroundColor", "");
   };
 
   handleDelete = async (e: React.MouseEvent, image: BackgroundImage) => {