mirror of
https://github.com/gedoor/legado.git
synced 2024-09-01 09:34:25 +08:00
web: 修复快捷键设置bug和esc键逻辑; 修复超大章节列表造成的卡顿
bug: 第一点击目录时没有跳转到合适位置
This commit is contained in:
parent
a3be54238b
commit
ec9c2fec08
1
modules/web/src/components.d.ts
vendored
1
modules/web/src/components.d.ts
vendored
@ -10,6 +10,7 @@ export {}
|
|||||||
declare module '@vue/runtime-core' {
|
declare module '@vue/runtime-core' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
BookItems: typeof import('./components/BookItems.vue')['default']
|
BookItems: typeof import('./components/BookItems.vue')['default']
|
||||||
|
CatalogItem: typeof import('./components/CatalogItem.vue')['default']
|
||||||
ChapterContent: typeof import('./components/ChapterContent.vue')['default']
|
ChapterContent: typeof import('./components/ChapterContent.vue')['default']
|
||||||
ElButton: typeof import('element-plus/es')['ElButton']
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||||
|
@ -44,9 +44,8 @@ const calculateWordCount = (paragraph) => {
|
|||||||
return paragraph.replaceAll(imgPattern, imagePlaceHolder).length;
|
return paragraph.replaceAll(imgPattern, imagePlaceHolder).length;
|
||||||
};
|
};
|
||||||
const wordCounts = computed(() => {
|
const wordCounts = computed(() => {
|
||||||
return Array.from(props.contents, content => calculateWordCount(content));
|
return Array.from(props.contents, (content) => calculateWordCount(content));
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -1,64 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="cata-wrapper" :style="popupTheme">
|
<div class="cata-wrapper" :style="popupTheme">
|
||||||
<div class="title">目录</div>
|
<div class="title">目录</div>
|
||||||
<div
|
<virtual-list
|
||||||
class="data-wrapper"
|
style="height: 300px; overflow: auto"
|
||||||
ref="cataData"
|
|
||||||
:class="{ night: isNight, day: !isNight }"
|
:class="{ night: isNight, day: !isNight }"
|
||||||
>
|
ref="virtualListRef"
|
||||||
<div class="cata">
|
:data-key="'index'"
|
||||||
<div
|
:start="index"
|
||||||
class="log"
|
wrap-class="data-wrapper"
|
||||||
v-for="(note, index) in catalog"
|
item-class="cata"
|
||||||
:class="{ selected: isSelected(index) }"
|
:data-sources="catalog"
|
||||||
:key="note.durChapterIndex"
|
:data-component="CatalogItem"
|
||||||
@click="gotoChapter(note)"
|
:estimate-size="40"
|
||||||
ref="cata"
|
:extra-props="{ gotoChapter }"
|
||||||
>
|
/>
|
||||||
<div class="log-text">
|
|
||||||
{{ note.title }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import VirtualList from "vue3-virtual-scroll-list";
|
||||||
import jump from "../plugins/jump";
|
import jump from "../plugins/jump";
|
||||||
import settings from "../plugins/config";
|
import settings from "../plugins/config";
|
||||||
import "../assets/fonts/popfont.css";
|
import "../assets/fonts/popfont.css";
|
||||||
|
import CatalogItem from "./CatalogItem.vue";
|
||||||
|
|
||||||
const store = useBookStore();
|
const store = useBookStore();
|
||||||
|
|
||||||
const isNight = ref(false);
|
const isNight = computed(() => theme.value == 6);
|
||||||
const { index } = toRefs(store.readingBook);
|
|
||||||
const { catalog, popCataVisible } = storeToRefs(store);
|
const { catalog, popCataVisible } = storeToRefs(store);
|
||||||
|
|
||||||
const theme = computed(() => {
|
const theme = computed(() => {
|
||||||
return store.config.theme;
|
return store.config.theme;
|
||||||
});
|
});
|
||||||
|
|
||||||
const popupTheme = computed(() => {
|
const popupTheme = computed(() => {
|
||||||
return {
|
return {
|
||||||
background: settings.themes[theme.value].popup,
|
background: settings.themes[theme.value].popup,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
watchEffect(() => {
|
|
||||||
isNight.value = theme.value == 6;
|
|
||||||
});
|
|
||||||
|
|
||||||
const cata = ref();
|
const index = computed({
|
||||||
const cataData = ref();
|
get: () => store.readingBook.index,
|
||||||
watch(popCataVisible, () => {
|
set: (value) => (store.readingBook.index = value),
|
||||||
|
});
|
||||||
|
const virtualListRef = ref();
|
||||||
|
watch(popCataVisible, (visible) => {
|
||||||
|
if (!visible) return;
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
let wrapper = cataData.value;
|
virtualListRef.value.scrollToIndex(index.value);
|
||||||
jump(cata.value[index.value], { container: wrapper, duration: 0 });
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const isSelected = (idx) => {
|
|
||||||
return idx == index.value;
|
|
||||||
};
|
|
||||||
const emit = defineEmits(["getContent"]);
|
const emit = defineEmits(["getContent"]);
|
||||||
const gotoChapter = (note) => {
|
const gotoChapter = (note) => {
|
||||||
index.value = catalog.value.indexOf(note);
|
index.value = catalog.value.indexOf(note);
|
||||||
@ -83,55 +74,35 @@ const gotoChapter = (note) => {
|
|||||||
width: fit-content;
|
width: fit-content;
|
||||||
border-bottom: 1px solid #ed4259;
|
border-bottom: 1px solid #ed4259;
|
||||||
}
|
}
|
||||||
|
:deep(.data-wrapper) {
|
||||||
.data-wrapper {
|
|
||||||
height: 300px;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
.cata {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
.cata {
|
||||||
.selected {
|
|
||||||
color: #eb4259;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log {
|
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: left;
|
|
||||||
font: 16px / 40px PingFangSC-Regular, HelveticaNeue-Light,
|
font: 16px / 40px PingFangSC-Regular, HelveticaNeue-Light,
|
||||||
"Helvetica Neue Light", "Microsoft YaHei", sans-serif;
|
"Helvetica Neue Light", "Microsoft YaHei", sans-serif;
|
||||||
|
|
||||||
.log-text {
|
|
||||||
margin-right: 26px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.night {
|
.night {
|
||||||
:deep(.log) {
|
:deep(.cata) {
|
||||||
border-bottom: 1px solid #666;
|
border-bottom: 1px solid #666;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.day {
|
.day {
|
||||||
:deep(.log) {
|
:deep(.cata) {
|
||||||
border-bottom: 1px solid #f2f2f2;
|
border-bottom: 1px solid #f2f2f2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 500px) {
|
||||||
.cata-wrapper .data-wrapper .cata .log {
|
:deep(.cata) {
|
||||||
width: 100%;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -221,21 +221,31 @@ const recordKeyDowning = ref(false);
|
|||||||
const recordKeyDownIndex = ref(-1);
|
const recordKeyDownIndex = ref(-1);
|
||||||
|
|
||||||
const stopRecordKeyDown = () => {
|
const stopRecordKeyDown = () => {
|
||||||
|
if (!recordKeyDowning.value) {
|
||||||
|
hotkeysDialogVisible.value = false;
|
||||||
|
}
|
||||||
recordKeyDowning.value = false;
|
recordKeyDowning.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
watch(hotkeysDialogVisible, (visibale) => {
|
watch(
|
||||||
|
hotkeysDialogVisible,
|
||||||
|
(visibale) => {
|
||||||
if (!visibale) return hotkeys.unbind("*");
|
if (!visibale) return hotkeys.unbind("*");
|
||||||
hotkeys.unbind();
|
hotkeys.unbind();
|
||||||
/**监听按键 */
|
/**监听按键 */
|
||||||
hotkeys("*", (event) => {
|
hotkeys("*", (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
let pressedKeys = hotkeys.getPressedKeyString();
|
||||||
|
if (pressedKeys.length == 1 && pressedKeys[0] == "esc") {
|
||||||
|
//单独按下esc 不录入
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (recordKeyDowning.value && recordKeyDownIndex.value > -1)
|
if (recordKeyDowning.value && recordKeyDownIndex.value > -1)
|
||||||
buttons.value[recordKeyDownIndex.value].hotKeys =
|
buttons.value[recordKeyDownIndex.value].hotKeys = pressedKeys;
|
||||||
// @ts-ignore
|
|
||||||
hotkeys.getPressedKeyString();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
const recordKeyDown = (index) => {
|
const recordKeyDown = (index) => {
|
||||||
recordKeyDowning.value = true;
|
recordKeyDowning.value = true;
|
||||||
|
@ -148,7 +148,6 @@ const {
|
|||||||
config,
|
config,
|
||||||
readingBook,
|
readingBook,
|
||||||
} = storeToRefs(store);
|
} = storeToRefs(store);
|
||||||
|
|
||||||
const chapterPos = computed({
|
const chapterPos = computed({
|
||||||
get: () => readingBook.value.chapterPos,
|
get: () => readingBook.value.chapterPos,
|
||||||
set: (value) => (readingBook.value.chapterPos = value),
|
set: (value) => (readingBook.value.chapterPos = value),
|
||||||
|
Loading…
Reference in New Issue
Block a user