fix: 修复章节列表性能差问题，弃用AGrid布局因为控台报错

EbookWorkshop · Feb 11, 2025 · f58c53f · f58c53f
1 parent f479500
commit f58c53f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 24 deletions.
diff --git a/src/api/book.ts b/src/api/book.ts
@@ -121,7 +121,6 @@ export function createPDF(
   fontFamliy: string,
   embedTitle: boolean
 ) {
-  console.log('fontFamliy', fontFamliy);
   return axios.post(`/export/pdf`, {
     bookId: bookid,
     chapterIds,

diff --git a/src/components/chapter-list/index.vue b/src/components/chapter-list/index.vue
@@ -9,25 +9,25 @@
                     </a-skeleton>
                 </a-col>
             </a-row>
-
-            <a-grid v-else :cols="computedCols" :col-gap="12" :row-gap="16" class="chapter-list">
-                <!-- 阅读视图 阅读时的章节列表 -->
-                <a-grid-item v-for="item in Chapters" :key="item.IndexId" class="reading-index">
+            
+            <!-- 使用Grid当GridItem超过101个会在控制台得到一个报错：Maximum recursive updates exceeded in component <Grid>. 所以改用Row -->
+            <a-row v-else :gutter="[4,4]" class="chapter-list">
+                <a-col v-for="item in Chapters" :key="item.IndexId"  :xs="24" :sm="12" :md="8" :lg="6" :xl="5" :xxl="4">
                     <a-tooltip v-if="item.Title.length > 13" :content="item.Title">
                         <slot name="content" :item="item"></slot>
                     </a-tooltip>
                     <slot v-else name="content" :item="item"></slot>
-                </a-grid-item>
-                <a-grid-item>
+                </a-col>
+                <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5" :xxl="4">
                     <slot name="addChapterTool"></slot>
-                </a-grid-item>
-            </a-grid>
+                </a-col>
+            </a-row>
         </a-col>
     </a-row>
 
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+// import { computed } from "vue";
 //类型引入
 import { Chapter } from '@/types/book';
 
@@ -42,7 +42,4 @@ const props = defineProps({
     }
 });
 
-const computedCols = computed(() => {
-    return props.Chapters.length < 50 ? 4 : { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 };
-});
 </script>
diff --git a/src/views/workplace/revise/book.vue b/src/views/workplace/revise/book.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="container">
-    <Breadcrumb :items="['menu.workplace', 'menu.workplace.revise', renderData.BookName]" />
+    <Breadcrumb :items="['menu.workplace', 'menu.workplace.revise', renderData?.BookName]" />
     <div class="wrapper">
-      <BookInfo :loading="loading" :bookId="bookId" :BookName="renderData.BookName" :convertImg="renderData.CoverImg"
-        :Author="renderData.Author">
+      <BookInfo :loading="loading" :bookId="bookId" :BookName="renderData?.BookName" :convertImg="renderData?.CoverImg"
+        :Author="renderData?.Author">
         <template #toolbar>
           <Toolbar @EditChapterOrdering="onChangeOrdering"></Toolbar>
         </template>
       </BookInfo>
       <keep-alive>
-        <ChapterList :loading="loading" :Chapters="renderData.Index">
+        <ChapterList :loading="loading" :Chapters="renderData?.Index">
           <template #content="{ item }">
             <a-button v-if="!isOrdering" long class="chapter" @click="onClickChapter(item.IndexId)">
               {{ item.Title }}
@@ -46,7 +46,7 @@
 import { Book, Chapter } from "@/types/book";
 import Sortable from 'sortablejs';
 
-import { ref, reactive } from "vue";
+import { ref, reactive, nextTick } from "vue";
 import {
   queryChapterById,
   queryBookById,
@@ -61,11 +61,22 @@ import BookInfo from "@/components/book-info/index.vue";
 import ChapterList from '@/components/chapter-list/index.vue';
 import Toolbar from "./components/toolbar.vue";
 
-import useRequest from '@/hooks/request';
+// import useRequest from '@/hooks/request';
 import useBookHelper from '@/hooks/book-helper';
 
 const { bookId } = useBookHelper();
-const { loading, response: renderData } = useRequest<Book>(queryBookById.bind(null, bookId));
+
+const loading = ref(true);
+const renderData = ref<Book | null>(null);
+
+nextTick(() => {
+  loading.value = true;
+  queryBookById(bookId).then((result: AxiosResponse<Book>) => {
+    renderData.value = result.data;
+  }).finally(() => {
+    loading.value = false;
+  });
+});
 
 const form = reactive({
   chapTitle: '',
@@ -154,7 +165,9 @@ function onChangeOrdering(ordering: boolean) {
   isOrdering.value = ordering;
   if (ordering) {
     orderList.length = 0;
-    orderList.push(...renderData.value.Index.map((t) => { return { order: t.OrderNum, indexId: t.IndexId } }));
+    if (renderData.value) {
+      orderList.push(...renderData.value.Index.map((t) => { return { order: t.OrderNum, indexId: t.IndexId } }));
+    }
     if (sortChapterList) {
       sortChapterList.option("disabled", false);
       return;
@@ -176,13 +189,19 @@ function onChangeOrdering(ordering: boolean) {
       orderList[i].newOrder = i + 1;
     }
     let edit = orderList.filter(t => t.order != t.newOrder);
-    if (edit.length <= 0) return;
+    if (edit.length <= 0) {
+      console.log("无需修改排序，新顺序结果：", edit);
+      return;
+    }
 
     loading.value = true;
     updateChapterOrder(edit).then(result => {
-      console.log(result);
+      console.log("修改排序结果", result);
+      queryBookById(bookId).then((result: AxiosResponse<Book>) => {
+        renderData.value = result.data;
+      });
     }).catch(err => {
-      console.log(err);
+      console.log("修改排序出错", err);
     }).finally(() => {
       orderList.length = 0;
       loading.value = false;