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

commit 8c268e4f59 unfixed

modules/web/src/main.js

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

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

@@ -6,8 +6,6 @@ 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,14 +112,5 @@ 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

@@ -8,9 +8,9 @@
       <div class="search-wrapper">
         <el-input
           placeholder="搜索书籍，在线书籍自动加入书架"
-          v-model="search"
+          v-model="searchWord"
           class="search-input"
-          :prefix-icon="Search"
+          :prefix-icon="SearchIcon"
           @keyup.enter="searchBook"
         >
         </el-input>
@@ -76,59 +76,75 @@
   </div>
 </template>
 
-<script setup>
+<script>
 import "@/assets/bookshelf.css";
 import "@/assets/fonts/shelffont.css";
 import { useBookStore } from "@/store";
 import githubUrl from "@/assets/imgs/github.png";
 import { useLoading } from "@/hooks/loading";
-import { Search } from "@element-plus/icons-vue";
+import { Search as SearchIcon } from "@element-plus/icons-vue";
 import API from "@api";
 
-const store = useBookStore();
+export default defineComponent({
-const isNight = computed(() => store.isNight);
+  beforeRouteEnter: (to, from, next) => {
+    API.getReadConfig()
+      .then((response) => response.data)
+      .then(({ isSuccess, data }) => {
+        if (isSuccess) {
+          next((vm) => {
+            console.log("初始化加载阅读界面配置成功");
+            vm.saveReadConfig(data);
+          });
+        }
+      })
+      .catch(() => next());
+  },
+  setup: () => {
+    const store = useBookStore();
+    const isNight = computed(() => store.isNight);
 
-const readingRecent = ref({
+    const readingRecent = ref({
       name: "尚无阅读记录",
       author: "",
       url: "",
       chapterIndex: 0,
       chapterPos: 0,
-});
+    });
-const shelfWrapper = ref(null);
+    const shelfWrapper = ref(null);
-const { showLoading, closeLoading, loadingWrapper, isLoading } = useLoading(
+    const { showLoading, closeLoading, loadingWrapper, isLoading } = useLoading(
       shelfWrapper,
       "正在获取书籍信息",
-);
+    );
 
-// 书架书籍和在线书籍搜索
+    // 书架书籍和在线书籍搜索
-const books = shallowRef([]);
+    const books = shallowRef([]);
-const shelf = computed(() => store.shelf);
+    const shelf = computed(() => store.shelf);
-const search = ref("");
+    const searchWord = ref("");
-const isSearching = ref(false);
+    const isSearching = ref(false);
-watchEffect(() => {
+    watchEffect(() => {
-  if (isSearching.value && search.value != "") return;
+      if (isSearching.value && searchWord.value != "") return;
       isSearching.value = false;
       books.value = [];
-  if (search.value == "") {
+      if (searchWord.value == "") {
         books.value = shelf.value;
         return;
       }
       books.value = shelf.value.filter((book) => {
         return (
-      book.name.includes(search.value) || book.author.includes(search.value)
+          book.name.includes(searchWord.value) ||
+          book.author.includes(searchWord.value)
         );
       });
-});
+    });
-//搜索在线书籍
+    //搜索在线书籍
-const searchBook = () => {
+    const searchBook = () => {
-  if (search.value == "") return;
+      if (searchWord.value == "") return;
       books.value = [];
       store.clearSearchBooks();
       showLoading();
       isSearching.value = true;
       API.search(
-    search.value,
+        searchWord.value,
         (data) => {
           if (isLoading) {
             closeLoading();
@@ -149,13 +165,13 @@ const searchBook = () => {
           }
         },
       );
-};
+    };
 
-//连接状态
+    //连接状态
-const connectStatus = computed(() => store.connectStatus);
+    const connectStatus = computed(() => store.connectStatus);
-const connectType = computed(() => store.connectType);
+    const connectType = computed(() => store.connectType);
-const newConnect = computed(() => store.newConnect);
+    const newConnect = computed(() => store.newConnect);
-const setIP = () => {
+    const setIP = () => {
       ElMessageBox.prompt(
         "请输入 IP 和端口 ( 如：127.0.0.1:9527 或者通过内网穿透的地址)",
         "提示",
@@ -200,10 +216,10 @@ const setIP = () => {
           },
         },
       );
-};
+    };
 
-const router = useRouter();
+    const router = useRouter();
-const handleBookClick = async (book) => {
+    const handleBookClick = async (book) => {
       const {
         bookUrl,
         name,
@@ -216,16 +232,23 @@ const handleBookClick = async (book) => {
       if (isSeachBook) {
         await API.saveBook(book);
       }
-  toDetail(bookUrl, name, author, durChapterIndex, durChapterPos, isSeachBook);
+      toDetail(
-};
+        bookUrl,
-const toDetail = (
+        name,
+        author,
+        durChapterIndex,
+        durChapterPos,
+        isSeachBook,
+      );
+    };
+    const toDetail = (
       bookUrl,
       bookName,
       bookAuthor,
       chapterIndex,
       chapterPos,
       isSeachBook,
-) => {
+    ) => {
       if (bookName === "尚无阅读记录") return;
       sessionStorage.setItem("bookUrl", bookUrl);
       sessionStorage.setItem("bookName", bookName);
@@ -240,30 +263,33 @@ const toDetail = (
         chapterIndex: chapterIndex,
         chapterPos: chapterPos,
       };
-  localStorage.setItem("readingRecent", JSON.stringify(readingRecent.value));
+      localStorage.setItem(
+        "readingRecent",
+        JSON.stringify(readingRecent.value),
+      );
       router.push({
         path: "/chapter",
       });
-};
+    };
 
-const loadShelf = () => {
+    const loadShelf = () => {
       loadingWrapper(
         store
           .saveBookProgress()
           //确保各种网络情况下同步请求先完成
           .finally(fetchBookShelfData),
       );
-};
+    };
 
-const saveReadConfig = (configStr) => {
+    const saveReadConfig = (configStr) => {
       try {
         store.setConfig(JSON.parse(configStr));
       } catch {
-    ElMessage.info("阅读界面解析错误");
+        ElMessage.info("阅读界面配置解析错误");
       }
-};
+    };
 
-const fetchBookShelfData = () => {
+    const fetchBookShelfData = () => {
       return API.getBookShelf().then((response) => {
         store.setConnectType("success");
         if (response.data.isSuccess) {
@@ -281,9 +307,8 @@ const fetchBookShelfData = () => {
         store.setConnectStatus("已连接 " + API.legado_http_origin);
         store.setNewConnect(false);
       });
-};
+    };
-
+    onMounted(() => {
-onMounted(() => {
       //获取最近阅读书籍
       let readingRecentStr = localStorage.getItem("readingRecent");
       if (readingRecentStr != null) {
@@ -292,16 +317,37 @@ onMounted(() => {
           readingRecent.value.chapterIndex = 0;
         }
       }
+      console.log("bookshelf mounted");
       API.testLeagdoHttpUrlConnection()
         //.then(saveReadConfig) 应该在组件挂载前读取阅读配置
         .then(loadShelf)
         .catch(function (error) {
           store.setConnectType("danger");
           store.setConnectStatus("连接异常");
-      ElMessage.error("后端连接失败异常，请检查阅读WEB服务或者设置其它可用IP");
+          ElMessage.error(
+            "后端连接失败异常，请检查阅读WEB服务或者设置其它可用IP",
+          );
           store.setNewConnect(false);
           throw error;
         });
+    });
+    return {
+      setIP,
+      isNight,
+      connectStatus,
+      connectType,
+      newConnect,
+      saveReadConfig,
+      readingRecent,
+      searchBook,
+      books,
+      handleBookClick,
+      isSearching,
+      SearchIcon,
+      githubUrl,
+      searchWord,
+    };
+  },
 });
 </script>
 
@@ -419,34 +465,42 @@ onMounted(() => {
   .index-wrapper {
     overflow-x: hidden;
     flex-direction: column;
+
     .navigation-wrapper {
       padding: 20px 24px;
       box-sizing: border-box;
       width: 100%;
+
       .navigation-title-wrapper {
         white-space: nowrap;
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
       }
+
       .bottom-wrapper {
         flex-direction: row;
+
         > * {
           flex-grow: 1;
           margin-top: 18px;
+
           .reading-recent,
           .setting-item {
             margin-bottom: 0px;
           }
         }
       }
+
       .bottom-icons {
         display: none;
       }
     }
+
     .shelf-wrapper {
       padding: 0;
       flex-grow: 1;
+
       :deep(.el-loading-spinner) {
         display: none;
       }
@@ -457,20 +511,24 @@ onMounted(() => {
 .night {
   :deep(.navigation-wrapper) {
     background-color: #454545;
+
     .navigation-title {
       color: #aeaeae;
     }
+
     .search-wrapper {
       .search-input {
         .el-input__wrapper {
           background-color: #454545;
         }
+
         .el-input__inner {
           color: #b1b1b1;
         }
       }
     }
   }
+
   :deep(.shelf-wrapper) {
     background-color: #161819;
   }