✨ feat(客户端): 完善点赞，订阅，收藏页面

 <template>
-  <div class=""></div>
+  <div class="book-video-list">
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <template v-for="item in dataList" :key="item" style="height: 3rem;">
+        <video-card :item="item"></video-card>
+      </template>
+    </van-list>
+  </div>
 </template>
 
 <script setup>
+import dataList from '@/mock/video_list'
+import VideoCard from '@/components/VideoCard/index.vue'
+
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
@@ -11,6 +20,29 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 
+// 处理书籍下作品列表
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+
+const onLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 20; i++) {
+      list.value.push(list.value.length + 1);
+    }
+
+    // 加载状态结束
+    loading.value = false;
+
+    // 数据全部加载完成
+    if (list.value.length >= 100) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
   onMounted(() => {
     
   })

 <template>
-  <div class=""></div>
+  <div class="book-video-list">
+    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <template v-for="item in dataList" :key="item" style="height: 3rem;">
+        <video-card :item="item"></video-card>
+      </template>
+    </van-list>
+  </div>
 </template>
 
 <script setup>
+import dataList from '@/mock/video_list'
+import VideoCard from '@/components/VideoCard/index.vue'
+
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
@@ -11,6 +20,29 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 
+// 处理书籍下作品列表
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+
+const onLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 20; i++) {
+      list.value.push(list.value.length + 1);
+    }
+
+    // 加载状态结束
+    loading.value = false;
+
+    // 数据全部加载完成
+    if (list.value.length >= 100) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
   onMounted(() => {
     
   })

 <template>
-  <div class=""></div>
+  <div class="book-list">
+    <template v-for="(item, key) in items" :key="key">
+      <book-card :item="item" @on-click="onClick(item)"></book-card>
+    </template>
+  </div>
 </template>
 
 <script setup>
+import BookCard from '@/components/BookCard/index.vue'
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
@@ -11,8 +16,15 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 
+const items = reactive([])
+
   onMounted(() => {
-    
+    for (let index = 0; index < 20; index++) {
+      items.push({
+        id: index,
+        avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
+      })
+    }
   })
 </script>