web: 修复目录位置不对

modules/web/src/components/CatalogItem.vue

@@ -12,8 +12,6 @@ defineProps(["index", "source", "gotoChapter"]);
 
 const store = useBookStore();
 
-const { catalog } = storeToRefs(store);
-
 const index = computed(() => store.readingBook.index);
 
 const isSelected = (idx) => {

modules/web/src/components/PopCatalog.vue

@@ -5,8 +5,7 @@
       style="height: 300px; overflow: auto"
       :class="{ night: isNight, day: !isNight }"
       ref="virtualListRef"
-      :data-key="'index'"
-      :start="index"
+      data-key="url"
       wrap-class="data-wrapper"
       item-class="cata"
       :data-sources="catalog"
@@ -19,7 +18,6 @@
 
 <script setup>
 import VirtualList from "vue3-virtual-scroll-list";
-import jump from "../plugins/jump";
 import settings from "../plugins/config";
 import "../assets/fonts/popfont.css";
 import CatalogItem from "./CatalogItem.vue";
@@ -43,11 +41,10 @@ const index = computed({
   set: (value) => (store.readingBook.index = value),
 });
 const virtualListRef = ref();
+
 watch(popCataVisible, (visible) => {
-  if (!visible) return;
-  nextTick(() => {
-    virtualListRef.value.scrollToIndex(index.value);
-  });
+  if (visible) return; // 页面可见时，虚拟列表内部sizes Map全为0
+  nextTick(() => virtualListRef.value.scrollToIndex(index.value));
 });
 
 const emit = defineEmits(["getContent"]);
@@ -57,6 +54,12 @@ const gotoChapter = (note) => {
   store.setContentLoading(true);
   emit("getContent", index.value);
 };
+onUpdated(() => {
+  // catalog变化触发dom更新和ResizeObserver，更新虚拟列表内部的sizes Map
+  store.popCataVisible = false;
+  // 触发popCataVisible watcher
+  // virtualListRef.value.scrollToIndex(index.value)
+});
 </script>
 
 <style lang="scss" scoped>

modules/web/src/pages/bookshelf/README.md

@@ -22,18 +22,11 @@
 ```shell
 pnpm install
 #安装项目
-pnpm serve
+pnpm dev
 #开发模式
 pnpm build
 #打包
-pnpm lint
+pnpm lint:fix
 #格式化代码
 ```
  - 调试的时候可以修改.env.development里面的地址连接手机端调试
-
-## 预览
-
-![](imgs/1.jpg)
-![](imgs/2.jpg)
-![](imgs/3.jpg)
-![](imgs/4.jpg)

modules/web/src/pages/source/README.md

@@ -1,6 +1,5 @@
 # legado_web_editor
 
-![image-20220901202413040](https://cdn.jsdelivr.net/gh/jgckM/image@main/image/202209031638325.png)
 
 ## 🚧开发注意
 
@@ -29,6 +28,6 @@ pnpm build
 
 ### Lints and fixes files
 ```
-pnpm lint
+pnpm lint:fix
 ```
 

modules/web/src/views/BookChapter.vue

@@ -484,6 +484,7 @@ window.addEventListener("beforeunload", (e) => {
   alert(111);
 });
 */
+
 onMounted(() => {
   showLoading.value = true;
   //获取书籍数据
@@ -519,6 +520,8 @@ onMounted(() => {
       let data = res.data.data;
       store.setCatalog(data);
       store.setReadingBook(book);
+      // 目录使用虚拟列表显示，需要手动显示一次以便滚动到当前位置
+      store.popCataVisible = true;
 
       getContent(chapterIndex, true, chapterPos);
       window.addEventListener("keyup", handleKeyPress);