fix: ArtworksByUser (close #23)

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     ArtworkLargeCard: typeof import('./src/components/ArtworksList/ArtworkLargeCard.vue')['default']
     ArtworkLargeList: typeof import('./src/components/ArtworksList/ArtworkLargeList.vue')['default']
     ArtworkList: typeof import('./src/components/ArtworksList/ArtworkList.vue')['default']
+    ArtworksByUser: typeof import('./src/components/ArtworksList/ArtworksByUser.vue')['default']
     AuthorCard: typeof import('./src/components/AuthorCard.vue')['default']
     Card: typeof import('./src/components/Card.vue')['default']
     Comment: typeof import('./src/components/Comment/Comment.vue')['default']
@@ -25,6 +26,7 @@ declare module 'vue' {
     ListLink: typeof import('./src/components/SideNav/ListLink.vue')['default']
     NaiveuiProvider: typeof import('./src/components/NaiveuiProvider.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
+    NFlex: typeof import('naive-ui')['NFlex']
     NProgress: typeof import('./src/components/NProgress.vue')['default']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']

src/components/ArtworksList/ArtworksByUser.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+.artworks-by-user(ref='containerRef')
+  NFlex(align='center' justify='center')
+    NPagination(
+      :item-count='artworkIds.length',
+      :page-size='pageSize'
+      v-model:page='curPage'
+    )
+  ArtworkList(
+    :list='curArtworks',
+    :loading='!curArtworks.length ? pageSize : false'
+  )
+  NFlex(align='center' justify='center')
+    NPagination(
+      :item-count='artworkIds.length',
+      :page-size='pageSize'
+      v-model:page='curPage'
+    )
+</template>
+
+<script setup lang="ts">
+import { type ArtworkInfo } from '@/types'
+import { NPagination } from 'naive-ui'
+import {} from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    userId: string
+    workCategory?: 'illust' | 'manga'
+  }>(),
+  {
+    workCategory: 'illust',
+  }
+)
+
+const containerRef = ref<HTMLElement>()
+const artworkIds = ref<string[]>([])
+const pageSize = 24
+const curPage = ref(1)
+const cachedArtworks = ref<Record<number, ArtworkInfo[]>>({})
+const curArtworks = computed(() => {
+  return cachedArtworks.value[curPage.value] || []
+})
+
+onMounted(async () => {
+  firstInit()
+})
+watch(curPage, (page) => {
+  backToTop()
+  fetchArtworksByPage(page)
+})
+
+function backToTop() {
+  const container = containerRef.value!
+  const top = container.getBoundingClientRect().top + window.scrollY - 120
+  window.scrollTo({
+    top,
+    behavior: 'smooth',
+  })
+}
+
+async function firstInit() {
+  artworkIds.value = []
+  curPage.value = 1
+  cachedArtworks.value = {}
+  artworkIds.value = await fetchAllArtworkIds()
+  await fetchArtworksByPage(1)
+}
+
+async function fetchAllArtworkIds() {
+  const { data } = await ajax.get<{
+    illusts: Record<string, null>
+    manga: Record<string, null>
+  }>(`/ajax/user/${props.userId}/profile/all`)
+  return props.workCategory === 'illust'
+    ? Object.keys(data.illusts)
+    : Object.keys(data.manga)
+}
+
+function getArtworkIdsByPage(page: number) {
+  return artworkIds.value.slice((page - 1) * pageSize, page * pageSize)
+}
+
+async function fetchArtworksByPage(page: number) {
+  if (cachedArtworks.value[page]) return cachedArtworks.value[page]
+  const ids = getArtworkIdsByPage(page)
+  const { data } = await ajax.get<{
+    works: Record<string, ArtworkInfo>
+  }>(`/ajax/user/${props.userId}/profile/illusts`, {
+    params: {
+      ids,
+      work_category: props.workCategory,
+      is_first_page: 0,
+    },
+  })
+  cachedArtworks.value[page] = Object.values(data.works)
+  return data
+}
+</script>
+
+<style scoped lang="sass"></style>

src/view/following-latest.vue

@@ -38,7 +38,6 @@ async function fetchList() {
   isLoading.value = true
 
   try {
-    // https://www.pixiv.net/ajax/follow_latest/illust?p=1&mode=all
     const { data } = await ajax.get<{
       page: {
         isLastPage: boolean

src/view/users.vue

@@ -109,22 +109,21 @@
     #user-artworks
       NTabs(
         :bar-width='32'
-        animated
         justify-content='space-evenly'
         type='line'
         v-model:value='tab'
       )
-        NTabPane(name='illust' tab='插画')
+        NTabPane(display-directive='show:lazy' name='illust' tab='插画')
           NEmpty(
             description='用户没有插画作品 (｡•́︿•̀｡)'
             v-if='user.illusts && !user.illusts.length'
           )
           .user-illust.body-inner(v-else)
-            ArtworkList(:list='user.illusts')
-        NTabPane(name='manga' tab='漫画')
+            ArtworksByUser(:user-id='user.userId' work-category='illust')
+        NTabPane(display-directive='show:lazy' name='manga' tab='漫画')
           NEmpty(description='用户没有漫画作品 (*/ω＼*)' v-if='!user.manga?.length')
           .user-manga.body-inner(v-else)
-            ArtworkList(:list='user.manga')
+            ArtworksByUser(:user-id='user.userId' work-category='manga')
         NTabPane(name='public-bookmarks' tab='公开收藏')
           ArtworkList(
             :list='[]',