mirror of
https://github.com/gedoor/legado.git
synced 2024-07-06 23:47:49 +08:00
web书架: 判断同步的阅读宽度是否超出当前设备
This commit is contained in:
parent
5864f8809d
commit
9da6af468f
2
modules/web/src/components.d.ts
vendored
2
modules/web/src/components.d.ts
vendored
@ -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']
|
||||
|
@ -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);
|
||||
|
@ -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({
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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);
|
||||
};
|
||||
|
@ -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);
|
||||
};
|
||||
/**
|
||||
* 加载配置
|
||||
*/
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user