From 8c268e4f598f25a2636e0cd3f9f3464c6c47de52 Mon Sep 17 00:00:00 2001 From: Xwite <1797350009@qq.com> Date: Thu, 3 Oct 2024 09:15:11 +0800 Subject: [PATCH] fix(web): fix issue of tags component flickering when fisrt paint night theme bookshelf --- modules/web/src/api/index.js | 5 +- modules/web/src/main.js | 4 +- modules/web/src/pages/bookshelf/main.js | 2 + modules/web/src/store/bookStore.js | 7 +++ modules/web/src/views/BookShelf.vue | 65 +++++++++++-------------- 5 files changed, 43 insertions(+), 40 deletions(-) diff --git a/modules/web/src/api/index.js b/modules/web/src/api/index.js index a7b067652..454db8f4b 100644 --- a/modules/web/src/api/index.js +++ b/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>} */ +const getReadConfig = () => ajax.get("/getReadConfig", {timeout: 3000}); const saveReadConfig = (config) => ajax.post("/saveReadConfig", config); const saveBookProgress = (bookProgress) => diff --git a/modules/web/src/main.js b/modules/web/src/main.js index a4b0cd757..eef0396b5 100644 --- a/modules/web/src/main.js +++ b/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"); } } -) \ No newline at end of file +) diff --git a/modules/web/src/pages/bookshelf/main.js b/modules/web/src/pages/bookshelf/main.js index 535701aa9..f8ded9bdd 100644 --- a/modules/web/src/pages/bookshelf/main.js +++ b/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, diff --git a/modules/web/src/store/bookStore.js b/modules/web/src/store/bookStore.js index 47b5f69b1..eb171b7ba 100644 --- a/modules/web/src/store/bookStore.js +++ b/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)) + ) + } }, }); diff --git a/modules/web/src/views/BookShelf.vue b/modules/web/src/views/BookShelf.vue index b385d028b..ae876469f 100644 --- a/modules/web/src/views/BookShelf.vue +++ b/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 = () => { }) }; -/** - * 加载阅读配置 - */ -const loadReadConfig = () => { - return API.getReadConfig().then((res) => { - var data = res.data.data; - if (data) { - let config = JSON.parse(data); - store.setConfig(config); +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(saveReadConfig) 应该在组件挂载前读取阅读配置 + .then(loadShelf) + .catch(function (error) { + store.setConnectType("danger"); + store.setConnectStatus("连接异常"); + ElMessage.error("后端连接失败异常，请检查阅读WEB服务或者设置其它可用IP") + store.setNewConnect(false); + throw error; }); -} +});