web书架: 判断同步的阅读宽度是否超出当前设备

modules/web/src/components.d.ts

@@ -22,12 +22,14 @@ declare module '@vue/runtime-core' {
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     PopCatalog: typeof import('./components/PopCatalog.vue')['default']
     ReadSettings: typeof import('./components/ReadSettings.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

modules/web/src/components/BookItems.vue

@@ -49,7 +49,7 @@
   </div>
 </template>
 <script setup>
-import { dateFormat } from "../plugins/utils";
+import { dateFormat } from "../utils/utils";
 const props = defineProps(["books", "isSearch"]);
 const emit = defineEmits(["bookClick"]);
 const handleClick = (book) => emit("bookClick", book);

modules/web/src/components/ChapterContent.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { getImageFromLegado, isLegadoUrl } from "@/plugins/utils";
+import { getImageFromLegado, isLegadoUrl } from "@/utils/utils";
 import jump from "@/plugins/jump";
 
 const props = defineProps({

modules/web/src/components/PopCatalog.vue

@@ -21,7 +21,7 @@
 
 <script setup>
 import VirtualList from "vue3-virtual-scroll-list";
-import settings from "../plugins/config";
+import settings from "../config/themeConfig";
 import "../assets/fonts/popfont.css";
 import CatalogItem from "./CatalogItem.vue";
 

modules/web/src/components/ReadSettings.vue

@@ -163,7 +163,7 @@
 <script setup>
 import "../assets/fonts/popfont.css";
 import "../assets/fonts/iconfont.css";
-import settings from "../plugins/config";
+import settings from "../config/themeConfig";
 import API from "@api";
 const store = useBookStore();
 
@@ -295,7 +295,8 @@ const readWidth = computed(() => {
   return store.config.readWidth;
 });
 const moreReadWidth = () => {
-  /*if (config.value.readWidth < 960)*/
+  // 此时会截断页面
+  if (config.value.readWidth + 160 + 2 * 68 > window.innerWidth) return;
   config.value.readWidth += 160;
   saveConfig(config.value);
 };

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

@@ -2,14 +2,6 @@ import API from "@api";
 import { useBookStore } from "@/store";
 import "@/assets/bookshelf.css";
 
-/**
- * pc移动端判断
- */
-const bookStore = useBookStore();
-bookStore.setMiniInterface(window.innerWidth < 750);
-window.onresize = () => {
-  bookStore.setMiniInterface(window.innerWidth < 750);
-};
 /**
  * 加载配置
  */

modules/web/src/views/BookChapter.vue

@@ -108,7 +108,7 @@
 
 <script setup>
 import jump from "@/plugins/jump";
-import settings from "@/plugins/config";
+import settings from "@/config/themeConfig";
 import API from "@api";
 import { useLoading } from "@/hooks/loading";
 
@@ -209,6 +209,20 @@ const rightBarTheme = computed(() => {
 });
 const isNight = computed(() => theme.value == 6);
 
+/**
+ * pc移动端判断 最大阅读宽度修正
+ * 阅读宽度最小为640px 加上工具栏 68px 52px 取较大值 为 776px
+ */
+const onResize = () => {
+  store.setMiniInterface(window.innerWidth < 776);
+  checkPageWidth();
+};
+/** 判断阅读宽度是否超出页面 */
+const checkPageWidth = () => {
+  const width = store.config.readWidth; /**包含padding */
+  if (store.miniInterface) return;
+  if (width + 2 * 68 > window.innerWidth) store.config.readWidth = 640;
+}
 // 顶部底部跳转
 const top = ref();
 const bottom = ref();
@@ -361,13 +375,13 @@ const toPreChapter = () => {
 };
 
 // 无限滚动
-const scrollObserve = ref(null);
+let scrollObserver;
 const loading = ref();
 watchEffect(() => {
   if (!infiniteLoading.value) {
-    scrollObserve.value?.disconnect();
+    scrollObserver?.disconnect();
   } else {
-    scrollObserve.value?.observe(loading.value);
+    scrollObserver?.observe(loading.value);
   }
 });
 const loadMore = () => {
@@ -377,7 +391,7 @@ const loadMore = () => {
   }
 };
 // IntersectionObserver回调 底部加载
-const handleIScrollObserve = (entries) => {
+const onReachBottom = (entries) => {
   if (isLoading.value) return;
   for (let { isIntersecting } of entries) {
     if (!isIntersecting) return;
@@ -451,6 +465,8 @@ onMounted(() => {
     };
     localStorage.setItem(bookUrl, JSON.stringify(book));
   }
+  onResize();
+  window.addEventListener('resize', onResize);
   loadingWrapper(
     API.getChapterList(bookUrl).then(
       (res) => {
@@ -468,10 +484,10 @@ onMounted(() => {
         // 兼容Safari < 14
         document.addEventListener("visibilitychange", onVisibilityChange);
         //监听底部加载
-        scrollObserve.value = new IntersectionObserver(handleIScrollObserve, {
+        scrollObserver = new IntersectionObserver(onReachBottom, {
           rootMargin: "-100% 0% 20% 0%",
         });
-        infiniteLoading.value && scrollObserve.value.observe(loading.value);
+        infiniteLoading.value && scrollObserver.observe(loading.value);
         //第二次点击同一本书 页面标题不会变化
         document.title = null;
         document.title = bookName + " | " + catalog.value[chapterIndex].title;
@@ -486,11 +502,12 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener("keyup", handleKeyPress);
+  window.removeEventListener('resize', onResize);
   // 兼容Safari < 14
   document.removeEventListener("visibilitychange", onVisibilityChange);
   readSettingsVisible.value = false;
   popCataVisible.value = false;
-  scrollObserve.value?.disconnect();
+  scrollObserver?.disconnect();
 });
 </script>
 
@@ -649,7 +666,7 @@ onUnmounted(() => {
   }
 }
 
-@media screen and (max-width: 750px) {
+@media screen and (max-width: 776px) {
   .chapter-wrapper {
     padding: 0;
 

modules/web/src/views/BookShelf.vue

@@ -322,22 +322,10 @@ const fetchBookShelfData = () => {
     width: 100%;
     display: flex;
     flex-direction: column;
-    :deep(.el-loading-mask) {
-      background-color: rgba(0, 0, 0, 0);
-    }
-    :deep(.el-loading-spinner) {
-      font-size: 36px;
-      color: #b5b5b5;
-    }
-
-    :deep(.el-loading-text) {
-      font-weight: 500;
-      color: #b5b5b5;
-    }
   }
 }
 
-@media screen and (max-width: 750px) {
+@media screen and (max-width: 428px) {
   .index-wrapper {
     overflow-x: hidden;
     flex-direction: column;

modules/web/src/views/SourceEditor.vue

@@ -6,8 +6,8 @@
   </div>
 </template>
 <script setup>
-import bookSourceConfig from "@/utils/bookSourceEditConfig.js";
-import rssSourceConfig from "@/utils/rssSourceEditConfig.js";
+import bookSourceConfig from "@/config/bookSourceEditConfig";
+import rssSourceConfig from "@/config/rssSourceEditConfig";
 import "@/assets/main.css";
 
 let config;