web: 修复pc端目录滚动

modules/web/src/components/CatalogItem.vue

@@ -1,14 +1,18 @@
 <template>
-  <div
-    class="cata-text"
-    :class="{ selected: isSelected(source.index) }"
-    @click="gotoChapter(source)"
-  >
-    {{ source.title }}
+  <div class="wrapper">
+    <div
+      v-for="cata in catas"
+      class="cata-text"
+      :key="cata.url"
+      :class="{ selected: isSelected(cata.index) }"
+      @click="gotoChapter(cata)"
+    >
+      {{ cata.title }}
+    </div>
   </div>
 </template>
 <script setup>
-defineProps(["index", "source", "gotoChapter"]);
+const props = defineProps(["index", "source", "gotoChapter"]);
 
 const store = useBookStore();
 
@@ -17,17 +21,26 @@ const index = computed(() => store.readingBook.index);
 const isSelected = (idx) => {
   return idx == index.value;
 };
+
+// 处理pc mobile
+const catas = computed(() => {
+  return props.source?.catas ?? [props.source];
+});
 </script>
 
 <style lang="scss" scoped>
 .selected {
   color: #eb4259;
 }
+.wrapper {
+  display: flex;
 
-.cata-text {
-  margin-right: 26px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  .cata-text {
+    width: 100%;
+    margin-right: 26px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }
 </style>