mirror of
https://github.com/gedoor/legado.git
synced 2024-07-06 23:47:49 +08:00
[skip ci] perf(web): improve little performance
This commit is contained in:
parent
624f993d34
commit
152dc4e3b8
@ -22,7 +22,7 @@
|
||||
<div class="author">
|
||||
{{ book.author }}
|
||||
</div>
|
||||
<div class="tags" v-show="isSearch">
|
||||
<div class="tags" v-if="isSearch">
|
||||
<el-tag
|
||||
v-for="tag in book.kind?.split(',').slice(0, 2)"
|
||||
:key="tag"
|
||||
@ -30,16 +30,16 @@
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="update-info" v-show="!isSearch">
|
||||
<div class="update-info" v-if="!isSearch">
|
||||
<div class="dot">•</div>
|
||||
<div class="size">共{{ book.totalChapterNum }}章</div>
|
||||
<div class="dot">•</div>
|
||||
<div class="date">{{ dateFormat(book.lastCheckTime) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro" v-show="isSearch">{{ book.intro }}</div>
|
||||
<div class="intro" v-if="isSearch">{{ book.intro }}</div>
|
||||
|
||||
<div class="dur-chapter" v-show="!isSearch">
|
||||
<div class="dur-chapter" v-if="!isSearch">
|
||||
已读:{{ book.durChapterTitle }}
|
||||
</div>
|
||||
<div class="last-chapter">最新:{{ book.latestChapterTitle }}</div>
|
||||
@ -52,7 +52,7 @@
|
||||
import { dateFormat } from "../plugins/utils";
|
||||
const props = defineProps(["books", "isSearch"]);
|
||||
const emit = defineEmits(["bookClick"]);
|
||||
const handleClick = (book) => emit("bookClick", toRaw(book));
|
||||
const handleClick = (book) => emit("bookClick", book);
|
||||
const getCover = (coverUrl) => {
|
||||
return /^data:/.test(coverUrl)
|
||||
? coverUrl
|
||||
@ -64,6 +64,7 @@ const getCover = (coverUrl) => {
|
||||
const subJustify = computed(() =>
|
||||
props.isSearch ? "space-between" : "flex-start"
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -12,17 +12,12 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps(["index", "source", "gotoChapter"]);
|
||||
|
||||
const store = useBookStore();
|
||||
|
||||
const index = computed(() => store.readingBook.index);
|
||||
const props = defineProps(["index", "source", "gotoChapter", "currentChapterIndex"]);
|
||||
|
||||
const isSelected = (idx) => {
|
||||
return idx == index.value;
|
||||
return idx == props.currentChapterIndex;
|
||||
};
|
||||
|
||||
// 处理pc mobile
|
||||
const catas = computed(() => {
|
||||
return props.source?.catas ?? [props.source];
|
||||
});
|
||||
|
@ -71,10 +71,10 @@ const scrollToReadedLength = (length) => {
|
||||
defineExpose({
|
||||
scrollToReadedLength,
|
||||
});
|
||||
const observer = ref(null);
|
||||
let intersectionObserver = null;
|
||||
const emit = defineEmits(["readedLengthChange"]);
|
||||
onMounted(() => {
|
||||
observer.value = new IntersectionObserver(
|
||||
intersectionObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (let { target, isIntersecting } of entries) {
|
||||
if (isIntersecting) {
|
||||
@ -90,15 +90,15 @@ onMounted(() => {
|
||||
rootMargin: `0px 0px -${window.innerHeight - 24}px 0px`,
|
||||
}
|
||||
);
|
||||
observer.value.observe(titleRef.value);
|
||||
intersectionObserver.observe(titleRef.value);
|
||||
paragraphRef.value.forEach((element) => {
|
||||
observer.value.observe(element);
|
||||
intersectionObserver.observe(element);
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
observer.value?.disconnect();
|
||||
observer.value = null;
|
||||
intersectionObserver?.disconnect();
|
||||
intersectionObserver = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
||||
:data-sources="virtualListdata"
|
||||
:data-component="CatalogItem"
|
||||
:estimate-size="40"
|
||||
:extra-props="{ gotoChapter }"
|
||||
:extra-props="{ gotoChapter, currentChapterIndex }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -39,7 +39,7 @@ const popupTheme = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
const index = computed({
|
||||
const currentChapterIndex = computed({
|
||||
get: () => store.readingBook.index,
|
||||
set: (value) => (store.readingBook.index = value),
|
||||
});
|
||||
@ -65,16 +65,18 @@ const virtualListdata = computed(() => {
|
||||
|
||||
const emit = defineEmits(["getContent"]);
|
||||
const gotoChapter = (note) => {
|
||||
index.value = catalog.value.indexOf(note);
|
||||
const chapterIndex = catalog.value.indexOf(note);
|
||||
currentChapterIndex.value = chapterIndex;
|
||||
store.setPopCataVisible(false);
|
||||
store.setContentLoading(true);
|
||||
emit("getContent", index.value);
|
||||
emit("getContent", chapterIndex);
|
||||
};
|
||||
|
||||
const virtualListRef = ref();
|
||||
const virtualListIndex = computed(() => {
|
||||
if (miniInterface.value) return index.value;
|
||||
return Math.floor(index.value / 2);
|
||||
let index = currentChapterIndex.value;
|
||||
if (miniInterface.value) return index;
|
||||
return Math.floor(index / 2);
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
|
@ -24,8 +24,9 @@ const handleSourceClick = (source) => {
|
||||
store.changeCurrentSource(source);
|
||||
};
|
||||
const isSaveError = computed(() => {
|
||||
if (savedSourcesMap.value.size == 0) return false;
|
||||
return !savedSourcesMap.value.has(sourceUrl.value);
|
||||
const map = savedSourcesMap.value;
|
||||
if (map.size == 0) return false;
|
||||
return !map.has(sourceUrl.value);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
@ -51,19 +51,19 @@ const store = useSourceStore();
|
||||
const sourceUrlSelect = ref([]);
|
||||
const searchKey = ref("");
|
||||
const { sources, sourcesMap } = storeToRefs(store);
|
||||
const isBookSource = computed(() => {
|
||||
return /bookSource/.test(window.location.href);
|
||||
});
|
||||
|
||||
const sourceSelect = computed(() => {
|
||||
if (sourceUrlSelect.value.length == 0) return [];
|
||||
return sourceUrlSelect.value.map(
|
||||
const urls = sourceUrlSelect.value;
|
||||
if (urls.length == 0) return [];
|
||||
return urls.map(
|
||||
(sourceUrl) => sourcesMap.value.get(sourceUrl) ?? {}
|
||||
);
|
||||
});
|
||||
const deleteSelectSources = () => {
|
||||
API.deleteSource(sourceSelect.value).then(({ data }) => {
|
||||
const sourceSelectValue = sourceSelect.value;
|
||||
API.deleteSource(sourceSelectValue).then(({ data }) => {
|
||||
if (!data.isSuccess) return ElMessage.error(data.errorMsg);
|
||||
store.deleteSources(sourceSelect.value);
|
||||
store.deleteSources(sourceSelectValue);
|
||||
sourceUrlSelect.value = [];
|
||||
});
|
||||
};
|
||||
@ -107,13 +107,15 @@ const importSourceFile = () => {
|
||||
});
|
||||
input.click();
|
||||
};
|
||||
|
||||
const isBookSource = /bookSource/.test(window.location.href);
|
||||
const outExport = () => {
|
||||
const exportFile = document.createElement("a");
|
||||
let sources =
|
||||
sourceUrlSelect.value.length === 0
|
||||
? sourcesFiltered.value
|
||||
: sourceSelect.value,
|
||||
sourceType = isBookSource.value ? "BookSource" : "RssSource";
|
||||
sourceType = isBookSource ? "BookSource" : "RssSource";
|
||||
|
||||
exportFile.download = `${sourceType}_${Date()
|
||||
.replace(/.*?\s(\d+)\s(\d+)\s(\d+:\d+:\d+).*/, "$2$1$3")
|
||||
|
@ -6,10 +6,10 @@
|
||||
:name="tab[0]"
|
||||
:label="tab[1]"
|
||||
>
|
||||
<source-json v-if="index == 0" />
|
||||
<source-debug v-if="index == 1" />
|
||||
<source-list v-if="index == 2" />
|
||||
<source-help v-if="index == 3" />
|
||||
<source-json v-show="index == 0" />
|
||||
<source-debug v-show="index == 1" />
|
||||
<source-list v-show="index == 2" />
|
||||
<source-help v-show="index == 3" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user