fix(web): fix issue of tags component flickering when fisrt paint night theme bookshelf

modules/web/src/api/index.js

@@ -36,7 +36,7 @@ const testLeagdoHttpUrlConnection = async (http_url) => {
   })
   // 返回结果应该是JSON 并有键值isSuccess
   try {
-    if ("isSuccess" in data) return
+    if ("isSuccess" in data) return data.data
     throw new Error("ReadConfig后端返回格式错误" )
   } catch {
     throw new Error("ReadConfig后端返回格式错误" )
@@ -58,7 +58,8 @@ ajax.interceptors.response.use((response) => response, APIExceptionHandler);
 
 // 书架API
 // Http
-const getReadConfig = () => ajax.get("/getReadConfig");
+/** @returns {Promise<import("axios").AxiosResponse<{isSuccess: boolean, data: string, errorMsg:string}>>} */
+const getReadConfig = () => ajax.get("/getReadConfig", {timeout: 3000});
 const saveReadConfig = (config) => ajax.post("/saveReadConfig", config);
 
 const saveBookProgress = (bookProgress) =>

modules/web/src/main.js

@@ -6,6 +6,8 @@ import "element-plus/theme-chalk/dark/css-vars.css"
 
 createApp(App).use(store).use(router).mount("#app");
 
+//读取阅读界面设置
+useBookStore().loadReadConfig();
 // 书架 同步Element PLUS 夜间模式
 watch(
     () => useBookStore().isNight,
@@ -16,4 +18,4 @@ watch(
             document.documentElement.classList.remove("dark");
         }
     }
-)
+)

modules/web/src/pages/bookshelf/main.js

@@ -6,6 +6,8 @@ import "element-plus/theme-chalk/dark/css-vars.css";
 
 createApp(App).use(store).use(bookRouter).mount("#app");
 
+//读取阅读界面设置
+useBookStore().loadReadConfig();
 // 同步Element PLUS 夜间模式
 watch(
     () => useBookStore().isNight,

modules/web/src/store/bookStore.js

@@ -112,5 +112,12 @@ export const useBookStore = defineStore("book", {
       if (!this.bookProgress) return Promise.resolve();
       return API.saveBookProgress(this.bookProgress);
     },
+    //读取阅读界面配置以初始化夜间模式 以免初次加载书架页面时闪屏
+    async loadReadConfig() {
+      return API.getReadConfig().then(response => response.data)
+        .then(({isSuccess, data}) => 
+          isSuccess && this.setConfig(JSON.parse(data))
+        )
+    }
   },
 });

modules/web/src/views/BookShelf.vue

@@ -172,13 +172,9 @@ const setIP = () => {
           const ip = instance.inputValue;
           API.testLeagdoHttpUrlConnection("http://" + ip)
           //API.getBookShelf()
-            .then(function (response) {
+            .then(function (configStr) {
+              saveReadConfig(configStr);
               instance.confirmButtonLoading = false;
-              // that.$store.commit(
-              // "increaseBookNum",
-              // response.data.data.length
-              // );
-              //store.addBooks(response.data.data);
               store.setConnectType("success");
               store.setConnectStatus("已连接 " + ip);
               store.clearSearchBooks();
@@ -241,27 +237,6 @@ const toDetail = (bookUrl, bookName, bookAuthor, chapterIndex, chapterPos, isSea
   });
 };
 
-onMounted(() => {
-  //获取最近阅读书籍
-  let readingRecentStr = localStorage.getItem("readingRecent");
-  if (readingRecentStr != null) {
-    readingRecent.value = JSON.parse(readingRecentStr);
-    if (typeof readingRecent.value.chapterIndex == "undefined") {
-      readingRecent.value.chapterIndex = 0;
-    }
-  }
-  API.testLeagdoHttpUrlConnection()
-  .then(loadReadConfig)
-  .then(loadShelf)
-  .catch(function (error) {
-      store.setConnectType("danger");
-      store.setConnectStatus("连接异常");
-      ElMessage.error("后端连接失败异常，请检查阅读WEB服务或者设置其它可用IP")
-      store.setNewConnect(false);
-      throw error;
-  });
-});
-
 const loadShelf = () => {
   loadingWrapper(
     store
@@ -271,6 +246,14 @@ const loadShelf = () => {
   );
 };
 
+const saveReadConfig = configStr => {
+  try {
+      store.setConfig(JSON.parse(configStr));
+    } catch {
+      ElMessage.info("阅读界面解析错误");
+    }
+}
+
 const fetchBookShelfData = () => {
   return API.getBookShelf()
     .then((response) => {
@@ -292,18 +275,26 @@ const fetchBookShelfData = () => {
     })
 };
 
-/**
+onMounted(() => {
- * 加载阅读配置
+  //获取最近阅读书籍
- */
+  let readingRecentStr = localStorage.getItem("readingRecent");
-const loadReadConfig = () => {
+  if (readingRecentStr != null) {
-  return API.getReadConfig().then((res) => {
+    readingRecent.value = JSON.parse(readingRecentStr);
-    var data = res.data.data;
+    if (typeof readingRecent.value.chapterIndex == "undefined") {
-    if (data) {
+      readingRecent.value.chapterIndex = 0;
-      let config = JSON.parse(data);
-      store.setConfig(config);
     }
+  }
+  API.testLeagdoHttpUrlConnection()
+  //.then(saveReadConfig) 应该在组件挂载前读取阅读配置
+  .then(loadShelf)
+  .catch(function (error) {
+      store.setConnectType("danger");
+      store.setConnectStatus("连接异常");
+      ElMessage.error("后端连接失败异常，请检查阅读WEB服务或者设置其它可用IP")
+      store.setNewConnect(false);
+      throw error;
   });
-}
+});
 
 </script>