From b248dada52bcb305e016f2627d62fc9d9c30f0ab Mon Sep 17 00:00:00 2001 From: Xwite <1797350009@qq.com> Date: Mon, 10 Apr 2023 12:11:24 +0800 Subject: [PATCH] =?UTF-8?q?web:=20=E4=B9=A6=E6=9E=B6=E6=97=A0=E4=B9=A6?= =?UTF-8?q?=E6=97=B6=E4=B8=8D=E6=98=BE=E7=A4=BAloading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/web/src/api/index.js | 1 - modules/web/src/components.d.ts | 1 + modules/web/src/views/BookChapter.vue | 102 ++++++++++++-------------- modules/web/src/views/BookShelf.vue | 14 +++- 4 files changed, 57 insertions(+), 61 deletions(-) diff --git a/modules/web/src/api/index.js b/modules/web/src/api/index.js index cfc2334fa..207246f21 100644 --- a/modules/web/src/api/index.js +++ b/modules/web/src/api/index.js @@ -48,7 +48,6 @@ const search = ( ) => { // webSocket const url = `ws://${hostname}:${Number(port) + 1}/searchBook`; - const socket = new WebSocket(url); socket.onopen = () => { diff --git a/modules/web/src/components.d.ts b/modules/web/src/components.d.ts index 85b0dea80..9c863ca59 100644 --- a/modules/web/src/components.d.ts +++ b/modules/web/src/components.d.ts @@ -17,6 +17,7 @@ declare module '@vue/runtime-core' { ElDialog: typeof import('element-plus/es')['ElDialog'] ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] + ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElLink: typeof import('element-plus/es')['ElLink'] diff --git a/modules/web/src/views/BookChapter.vue b/modules/web/src/views/BookChapter.vue index a16d726b2..4d130a838 100644 --- a/modules/web/src/views/BookChapter.vue +++ b/modules/web/src/views/BookChapter.vue @@ -82,10 +82,10 @@
-
+
{{ data.title }}
- +
@@ -115,7 +115,7 @@ watch(showLoading, (loading) => { }); const store = useBookStore(); - +// 读取阅读配置 try { const browerConfig = JSON.parse(localStorage.getItem("config")); if (browerConfig != null) store.setConfig(browerConfig); @@ -131,77 +131,90 @@ const chapterData = ref([]); const scrollObserve = ref(null); const readingObserve = ref(null); -const { chapterPos } = toRefs(store.readingBook); -const chapterIndex = computed({ - get: () => store.readingBook.index, - set: (index) => (store.readingBook.index = index), -}); const { catalog, popCataVisible, readSettingsVisible, - config, - miniInterface + miniInterface, + showContent, } = storeToRefs(store); -const show = computed(()=>store.showContent) -const theme = computed(() => config.value.theme); +const { chapterPos, index: chapterIndex} = toRefs(store.readingBook); -const bodyColor = computed(() => settings.themes[config.value.theme].body); +const { theme, infiniteLoading } = toRefs(store.config); + +// 主题部分 +const bodyColor = computed(() => settings.themes[theme.value].body); const chapterColor = computed( - () => settings.themes[config.value.theme].content + () => settings.themes[theme.value].content ); -const popupColor = computed(() => settings.themes[config.value.theme].popup); +const popupColor = computed(() => settings.themes[theme.value].popup); const readWidth = computed(() => { - if (!store.miniInterface) { + if (!miniInterface.value) { return store.config.readWidth - 130 + "px"; } else { return window.innerWidth + "px"; } }); const popupWidth = computed(() => { - if (!store.miniInterface) { + if (!miniInterface.value) { return store.config.readWidth - 33; } else { return window.innerWidth - 33; } }); - const bodyTheme = computed(() => { return { - background: settings.themes[store.config.theme].body, + background: settings.themes[theme.value].body, }; }); const chapterTheme = computed(() => { return { - background: settings.themes[store.config.theme].content, + background: settings.themes[theme.value].content, width: readWidth.value, }; }); - const leftBarTheme = computed(() => { return { - background: settings.themes[store.config.theme].popup, - marginLeft: store.miniInterface + background: settings.themes[theme.value].popup, + marginLeft: miniInterface.value ? 0 : -(store.config.readWidth / 2 + 68) + "px", - display: store.miniInterface && !showToolBar.value ? "none" : "block", + display: miniInterface.value && !showToolBar.value ? "none" : "block", }; }); const rightBarTheme = computed(() => { return { - background: settings.themes[store.config.theme].popup, - marginRight: store.miniInterface + background: settings.themes[theme.value].popup, + marginRight: miniInterface.value ? 0 : -(store.config.readWidth / 2 + 52) + "px", - display: store.miniInterface && !showToolBar.value ? "none" : "block", + display: miniInterface.value && !showToolBar.value ? "none" : "block", }; }); - -const enableInfiniteLoading = computed(() => { - return config.value.infiniteLoading; +const isNight = ref(false); +watchEffect(() => { + isNight.value = theme.value == 6; }); +watch(bodyColor, (color) => { + bodyTheme.value.background = color; +}); +watch(chapterColor, (color) => { + chapterTheme.value.background = color; +}); +watch(readWidth, (width) => { + chapterTheme.value.width = width; + let leftToolMargin = -((parseInt(width) + 130) / 2 + 68) + "px"; + let rightToolMargin = -((parseInt(width) + 130) / 2 + 52) + "px"; + leftBarTheme.value.marginLeft = leftToolMargin; + rightBarTheme.value.marginRight = rightToolMargin; +}); +watch(popupColor, (color) => { + leftBarTheme.value.background = color; + rightBarTheme.value.background = color; +}); + watchEffect(() => { if (chapterData.value.length > 0) { @@ -215,32 +228,9 @@ watchEffect(() => { document.title = catalog.value[chapterIndex.value]?.title || document.title; store.saveBookProcess(); }); -const isNight = ref(false); + watchEffect(() => { - isNight.value = theme.value == 6; -}); - -watch(bodyColor, (color) => { - bodyTheme.value.background = color; -}); -watch(chapterColor, (color) => { - chapterTheme.value.background = color; -}); - -watch(readWidth, (width) => { - chapterTheme.value.width = width; - let leftToolMargin = -((parseInt(width) + 130) / 2 + 68) + "px"; - let rightToolMargin = -((parseInt(width) + 130) / 2 + 52) + "px"; - leftBarTheme.value.marginLeft = leftToolMargin; - rightBarTheme.value.marginRight = rightToolMargin; -}); - -watch(popupColor, (color) => { - leftBarTheme.value.background = color; - rightBarTheme.value.background = color; -}); -watchEffect(() => { - if (!enableInfiniteLoading.value) { + if (!infiniteLoading.value) { scrollObserve.value?.disconnect(); } else { scrollObserve.value?.observe(loading.value); @@ -542,7 +532,7 @@ onMounted(() => { scrollObserve.value = new IntersectionObserver(handleIScrollObserve, { rootMargin: "-100% 0% 20% 0%", }); - enableInfiniteLoading.value && scrollObserve.value.observe(loading.value); + infiniteLoading.value && scrollObserve.value.observe(loading.value); //监听当前阅读章节 readingObserve.value = new IntersectionObserver(handleIReadingObserve); //第二次点击同一本书 页面标题不会变化 diff --git a/modules/web/src/views/BookShelf.vue b/modules/web/src/views/BookShelf.vue index 76b43220f..37bdc6ba1 100644 --- a/modules/web/src/views/BookShelf.vue +++ b/modules/web/src/views/BookShelf.vue @@ -140,11 +140,16 @@ const searchBook = () => { store.setSearchBooks(JSON.parse(data)); store.searchBooks.forEach((item) => books.value.push(item)); } catch (e) { - ElMessage({ message: "后端数据错误", type: "error" }); + ElMessage.error("后端数据错误"); throw e; } }, - () => (showLoading.value = false) + () => { + showLoading.value = false; + if (books.value.length == 0) { + ElMessage.info("搜索结果为空") + } + } ); }; @@ -209,7 +214,8 @@ const fetchBookShelfData = () => { }) ); } else { - ElMessage({ message: response.data.errorMsg, type: "error" }); + ElMessage.error(response.data.errorMsg); + showLoading.value = false; } store.setConnectStatus("已连接 "); store.setNewConnect(false); @@ -218,7 +224,7 @@ const fetchBookShelfData = () => { showLoading.value = false; store.setConnectType("danger"); store.setConnectStatus("连接失败"); - ElMessage({ message: "后端连接失败", type: "error" }); + ElMessage.error("后端连接失败") store.setNewConnect(false); throw error; });