mirror of
https://github.com/gedoor/legado.git
synced 2024-09-01 09:34:25 +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']
|
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||||
ElLink: typeof import('element-plus/es')['ElLink']
|
ElLink: typeof import('element-plus/es')['ElLink']
|
||||||
ElOption: typeof import('element-plus/es')['ElOption']
|
ElOption: typeof import('element-plus/es')['ElOption']
|
||||||
|
ElPopover: typeof import('element-plus/es')['ElPopover']
|
||||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||||
ElTag: typeof import('element-plus/es')['ElTag']
|
ElTag: typeof import('element-plus/es')['ElTag']
|
||||||
ElText: typeof import('element-plus/es')['ElText']
|
ElText: typeof import('element-plus/es')['ElText']
|
||||||
|
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||||
PopCatalog: typeof import('./components/PopCatalog.vue')['default']
|
PopCatalog: typeof import('./components/PopCatalog.vue')['default']
|
||||||
ReadSettings: typeof import('./components/ReadSettings.vue')['default']
|
ReadSettings: typeof import('./components/ReadSettings.vue')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
@ -49,7 +49,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { dateFormat } from "../plugins/utils";
|
import { dateFormat } from "../utils/utils";
|
||||||
const props = defineProps(["books", "isSearch"]);
|
const props = defineProps(["books", "isSearch"]);
|
||||||
const emit = defineEmits(["bookClick"]);
|
const emit = defineEmits(["bookClick"]);
|
||||||
const handleClick = (book) => emit("bookClick", book);
|
const handleClick = (book) => emit("bookClick", book);
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getImageFromLegado, isLegadoUrl } from "@/plugins/utils";
|
import { getImageFromLegado, isLegadoUrl } from "@/utils/utils";
|
||||||
import jump from "@/plugins/jump";
|
import jump from "@/plugins/jump";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import VirtualList from "vue3-virtual-scroll-list";
|
import VirtualList from "vue3-virtual-scroll-list";
|
||||||
import settings from "../plugins/config";
|
import settings from "../config/themeConfig";
|
||||||
import "../assets/fonts/popfont.css";
|
import "../assets/fonts/popfont.css";
|
||||||
import CatalogItem from "./CatalogItem.vue";
|
import CatalogItem from "./CatalogItem.vue";
|
||||||
|
|
||||||
|
@ -163,7 +163,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import "../assets/fonts/popfont.css";
|
import "../assets/fonts/popfont.css";
|
||||||
import "../assets/fonts/iconfont.css";
|
import "../assets/fonts/iconfont.css";
|
||||||
import settings from "../plugins/config";
|
import settings from "../config/themeConfig";
|
||||||
import API from "@api";
|
import API from "@api";
|
||||||
const store = useBookStore();
|
const store = useBookStore();
|
||||||
|
|
||||||
@ -295,7 +295,8 @@ const readWidth = computed(() => {
|
|||||||
return store.config.readWidth;
|
return store.config.readWidth;
|
||||||
});
|
});
|
||||||
const moreReadWidth = () => {
|
const moreReadWidth = () => {
|
||||||
/*if (config.value.readWidth < 960)*/
|
// 此时会截断页面
|
||||||
|
if (config.value.readWidth + 160 + 2 * 68 > window.innerWidth) return;
|
||||||
config.value.readWidth += 160;
|
config.value.readWidth += 160;
|
||||||
saveConfig(config.value);
|
saveConfig(config.value);
|
||||||
};
|
};
|
||||||
|
@ -2,14 +2,6 @@ import API from "@api";
|
|||||||
import { useBookStore } from "@/store";
|
import { useBookStore } from "@/store";
|
||||||
import "@/assets/bookshelf.css";
|
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>
|
<script setup>
|
||||||
import jump from "@/plugins/jump";
|
import jump from "@/plugins/jump";
|
||||||
import settings from "@/plugins/config";
|
import settings from "@/config/themeConfig";
|
||||||
import API from "@api";
|
import API from "@api";
|
||||||
import { useLoading } from "@/hooks/loading";
|
import { useLoading } from "@/hooks/loading";
|
||||||
|
|
||||||
@ -209,6 +209,20 @@ const rightBarTheme = computed(() => {
|
|||||||
});
|
});
|
||||||
const isNight = computed(() => theme.value == 6);
|
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 top = ref();
|
||||||
const bottom = ref();
|
const bottom = ref();
|
||||||
@ -361,13 +375,13 @@ const toPreChapter = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 无限滚动
|
// 无限滚动
|
||||||
const scrollObserve = ref(null);
|
let scrollObserver;
|
||||||
const loading = ref();
|
const loading = ref();
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
if (!infiniteLoading.value) {
|
if (!infiniteLoading.value) {
|
||||||
scrollObserve.value?.disconnect();
|
scrollObserver?.disconnect();
|
||||||
} else {
|
} else {
|
||||||
scrollObserve.value?.observe(loading.value);
|
scrollObserver?.observe(loading.value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const loadMore = () => {
|
const loadMore = () => {
|
||||||
@ -377,7 +391,7 @@ const loadMore = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
// IntersectionObserver回调 底部加载
|
// IntersectionObserver回调 底部加载
|
||||||
const handleIScrollObserve = (entries) => {
|
const onReachBottom = (entries) => {
|
||||||
if (isLoading.value) return;
|
if (isLoading.value) return;
|
||||||
for (let { isIntersecting } of entries) {
|
for (let { isIntersecting } of entries) {
|
||||||
if (!isIntersecting) return;
|
if (!isIntersecting) return;
|
||||||
@ -451,6 +465,8 @@ onMounted(() => {
|
|||||||
};
|
};
|
||||||
localStorage.setItem(bookUrl, JSON.stringify(book));
|
localStorage.setItem(bookUrl, JSON.stringify(book));
|
||||||
}
|
}
|
||||||
|
onResize();
|
||||||
|
window.addEventListener('resize', onResize);
|
||||||
loadingWrapper(
|
loadingWrapper(
|
||||||
API.getChapterList(bookUrl).then(
|
API.getChapterList(bookUrl).then(
|
||||||
(res) => {
|
(res) => {
|
||||||
@ -468,10 +484,10 @@ onMounted(() => {
|
|||||||
// 兼容Safari < 14
|
// 兼容Safari < 14
|
||||||
document.addEventListener("visibilitychange", onVisibilityChange);
|
document.addEventListener("visibilitychange", onVisibilityChange);
|
||||||
//监听底部加载
|
//监听底部加载
|
||||||
scrollObserve.value = new IntersectionObserver(handleIScrollObserve, {
|
scrollObserver = new IntersectionObserver(onReachBottom, {
|
||||||
rootMargin: "-100% 0% 20% 0%",
|
rootMargin: "-100% 0% 20% 0%",
|
||||||
});
|
});
|
||||||
infiniteLoading.value && scrollObserve.value.observe(loading.value);
|
infiniteLoading.value && scrollObserver.observe(loading.value);
|
||||||
//第二次点击同一本书 页面标题不会变化
|
//第二次点击同一本书 页面标题不会变化
|
||||||
document.title = null;
|
document.title = null;
|
||||||
document.title = bookName + " | " + catalog.value[chapterIndex].title;
|
document.title = bookName + " | " + catalog.value[chapterIndex].title;
|
||||||
@ -486,11 +502,12 @@ onMounted(() => {
|
|||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener("keyup", handleKeyPress);
|
window.removeEventListener("keyup", handleKeyPress);
|
||||||
|
window.removeEventListener('resize', onResize);
|
||||||
// 兼容Safari < 14
|
// 兼容Safari < 14
|
||||||
document.removeEventListener("visibilitychange", onVisibilityChange);
|
document.removeEventListener("visibilitychange", onVisibilityChange);
|
||||||
readSettingsVisible.value = false;
|
readSettingsVisible.value = false;
|
||||||
popCataVisible.value = false;
|
popCataVisible.value = false;
|
||||||
scrollObserve.value?.disconnect();
|
scrollObserver?.disconnect();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -649,7 +666,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 750px) {
|
@media screen and (max-width: 776px) {
|
||||||
.chapter-wrapper {
|
.chapter-wrapper {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
@ -322,22 +322,10 @@ const fetchBookShelfData = () => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 {
|
.index-wrapper {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -6,8 +6,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import bookSourceConfig from "@/utils/bookSourceEditConfig.js";
|
import bookSourceConfig from "@/config/bookSourceEditConfig";
|
||||||
import rssSourceConfig from "@/utils/rssSourceEditConfig.js";
|
import rssSourceConfig from "@/config/rssSourceEditConfig";
|
||||||
import "@/assets/main.css";
|
import "@/assets/main.css";
|
||||||
|
|
||||||
let config;
|
let config;
|
||||||
|
Loading…
Reference in New Issue
Block a user