refactor: 重构view的layout

Author: wenxig

src/layout/Default.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import type { uni } from '@delta-comic/model'
+import { useQuery } from '@pinia/colada'
+import { createReusableTemplate, useCssVar } from '@vueuse/core'
+import { computed, shallowRef, useTemplateRef } from 'vue'
+
 import Comment from '@/components/comment/Comment.vue'
 import ItemCard from '@/components/ItemCard.vue'
 import { createDateString } from '@/utils/date'
@@ -14,13 +19,8 @@ defineSlots<{
   view(): any
 }>()
 
-const $router = useRouter()
-const $route = useRoute()
 const $props = defineProps<{ page: uni.content.ContentPage; isR18g?: boolean }>()
 
-const fullscreen = useFullscreen()
-const setFullscreen = async (isFull: boolean) => (isFull ? fullscreen.entry() : fullscreen.exit())
-
 const { data: detail } = useQuery({
   query: ({ signal }) => $props.page.fetchDetail(signal),
   key: () => [LayoutInject.QueryKey.Detail, LayoutInject.createPageQueryKey($props.page)]
@@ -35,20 +35,6 @@ const safeHeightTop = computed(() => Number(safeHeightTopCss.value?.match(/\d+/)
 const isScrolled = shallowRef(false)
 const scrollbar = useTemplateRef('scrollbar')
 
-const getItemCard = (contentType: uni.content.ContentType_) =>
-  uni.item.Item.itemCard.get(contentType) ?? ItemCard
-
-const isLiked = shallowRef(union.value?.isLiked ?? false)
-const likeSignal = new SmartAbortController()
-const handleLike = async () => {
-  likeSignal.abort()
-  try {
-    union.value?.like(likeSignal.signal).then(v => (isLiked.value = v))
-  } catch (error) {
-    console.error('liked fail')
-  }
-}
-
 const contentSource = PromiseContent.withResolvers<uni.item.Item>(true)
 watch(
   $props.page.union,
@@ -74,34 +60,6 @@ $props.page.detail.content.onSuccess(data => {
 const config = useConfig()
 
 const getActionInfo = (key: string) => Global.userActions.get([union.value.$$plugin, key])!
-
-const getIsSubscribe = (author: uni.item.Author) =>
-  db.value
-    .selectFrom('subscribe')
-    .where('key', '=', `${author.$$plugin}:${author.label}`)
-    .selectAll()
-    .execute()
-    .then(v => v.length != 0)
-
-const showDetailUsers = shallowRef(false)
-
-const addSubscribe = (author: uni.item.Author) =>
-  createLoadingMessage('关注中').bind(
-    SubscribeDB.upsert({
-      type: 'author',
-      author,
-      plugin: author.$$plugin,
-      key: SubscribeDB.key.toString([author.$$plugin, author.label]),
-      itemKey: null
-    })
-  )
-const removeSubscribe = (author: uni.item.Author) =>
-  createLoadingMessage('取消中').bind(
-    db.value
-      .deleteFrom('subscribe')
-      .where('key', '=', SubscribeDB.key.toString([author.$$plugin, author.label]))
-      .execute()
-  )
 </script>
 
 <template>

src/layout/default/EpController.vue

@@ -3,6 +3,7 @@ import { SharedFunction } from '@delta-comic/core'
 import { uni } from '@delta-comic/model'
 import { useConfig } from '@delta-comic/plugin'
 import { useInfiniteQuery } from '@pinia/colada'
+import type { NScrollbar } from 'naive-ui'
 import { computed, nextTick, shallowRef, useTemplateRef } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -12,6 +13,7 @@ const $props = defineProps<{
   union?: uni.item.Item
   page: uni.content.ContentPage
   isR18g?: boolean
+  scrollbar: InstanceType<typeof NScrollbar>
 }>()
 
 const $route = useRoute()
@@ -41,6 +43,7 @@ const nowEpId = $route.params.ep.toString()
 const nowEp = computed(() => eps.value.find(ep => ep.id === nowEpId))
 const nowEpIndex = computed(() => eps.value.findIndex(ep => ep.id === nowEpId))
 const openEpSelectPopup = async () => {
+  $props.scrollbar.scrollTo(0, 0)
   isShowEpSelectPopup.value = true
   await nextTick()
   epSelList.value?.listInstance?.scrollTo({

src/layout/default/SubscribeRow.vue

@@ -1,18 +1,59 @@
 <script setup lang="ts">
+import { SubscribeDB } from '@delta-comic/db'
 import type { uni } from '@delta-comic/model'
+import { Global } from '@delta-comic/plugin'
+import { createLoadingMessage } from '@delta-comic/ui'
+import { createReusableTemplate } from '@vueuse/core'
 
-defineProps<{
+const $props = defineProps<{
+  page: uni.content.ContentPage
   author: uni.item.Author
   isSmall?: boolean
 }>()
 
 const [DefineAvatar, Avatar] = createReusableTemplate<{ author: uni.item.Author }>()
+
+const getIsSubscribe = (author: uni.item.Author) =>
+  SubscribeDB.useQuery(db =>
+    db
+      .where('key', '=', `${author.$$plugin}:${author.label}`)
+      .selectAll()
+      .execute()
+      .then(v => v.length != 0)
+  )
+
+const addSubscribe = (author: uni.item.Author) =>
+  createLoadingMessage('关注中').bind(
+    SubscribeDB.upsert({
+      type: 'author',
+      author,
+      plugin: author.$$plugin,
+      key: SubscribeDB.key.toString([author.$$plugin, author.label]),
+      itemKey: null
+    })
+  )
+const removeSubscribe = (author: uni.item.Author) =>
+  createLoadingMessage('取消中').bind(
+    db.value
+      .deleteFrom('subscribe')
+      .where('key', '=', SubscribeDB.key.toString([author.$$plugin, author.label]))
+      .execute()
+  )
+
+const getActionInfo = (key: string) => Global.userActions.get([$props.page.plugin, key])!
 </script>
 
 <template>
   <div class="relative w-full" v-if="isSmall">
     <Avatar :author />
-    <DcAwait :promise="() => getIsSubscribe(author)" v-slot="{ result: isSubscribe }">
+    <DcVar
+      :value="getIsSubscribe(author)"
+      v-slot="{
+        value: {
+          data: { value: isSubscribe }
+        }
+      }"
+    >
       <slot name="subscribeRow" :="{ page, author, isSubscribe, type: 'small' }" />
       <Inject
         key="layout::layout::default.subscribe-row"
@@ -33,11 +74,18 @@ const [DefineAvatar, Avatar] = createReusableTemplate<{ author: uni.item.Author
           </NIcon>
         </template>
       </NButton>
-    </DcAwait>
+    </DcVar>
   </div>
   <div class="relative w-full" v-else>
     <Avatar :author />
-    <DcAwait :promise="() => getIsSubscribe(author)" v-slot="{ result: isSubscribe }">
+    <DcVar
+      :value="getIsSubscribe(author)"
+      v-slot="{
+        value: {
+          data: { value: isSubscribe }
+        }
+      }"
+    >
       <slot name="subscribeRow" :="{ page, author, isSubscribe, type: 'common' }" />
       <Inject
         key="layout::layout::default.subscribe-row"
@@ -61,7 +109,7 @@ const [DefineAvatar, Avatar] = createReusableTemplate<{ author: uni.item.Author
           {{ isSubscribe ? '取关' : '关注' }}
         </template>
       </NButton>
-    </DcAwait>
+    </DcVar>
   </div>
   <DefineAvatar v-slot="{ author }">
     <VanPopover

src/layout/default/Tags.vue

@@ -1,4 +1,11 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { SharedFunction } from '@delta-comic/core'
+import type { uni } from '@delta-comic/model'
+
+defineProps<{
+  union?: uni.item.Item
+}>()
+</script>
 
 <template>
   <div
@@ -23,7 +30,7 @@
           SharedFunction.call(
             'routeToSearch',
             category.search.keyword,
-            [page.plugin, category.search.source],
+            [category.$$plugin, category.search.source],
             category.search.sort
           )
         "

src/layout/default/ViewBox.vue

@@ -1,4 +1,25 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useFullscreen } from '@delta-comic/core'
+import { usePreventBack } from '@delta-comic/ui'
+import { ArrowBackRound, FullscreenRound, PlayArrowRound } from '@vicons/material'
+import type { NScrollbar } from 'naive-ui'
+import { computed, ref } from 'vue'
+defineProps<{
+  isScrolled: boolean
+  scrollbar: InstanceType<typeof NScrollbar>
+}>()
+
+const fullscreen = useFullscreen()
+const isFullscreen = computed({
+  get: () => fullscreen.isFullscreen.value,
+  set: isFull => (isFull ? fullscreen.entry() : fullscreen.exit())
+})
+usePreventBack(isFullscreen, ref(true))
+
+defineSlots<{
+  view(): any
+}>()
+</script>
 
 <template>
   <div class="relative flex h-[30vh] justify-center bg-black text-white">
@@ -46,14 +67,14 @@
         </div>
       </VanSticky>
     </div>
-    <Teleport to="#cover" :disabled="!fullscreen.isFullscreen.value">
+    <Teleport to="#cover" :disabled="!isFullscreen">
       <slot name="view" />
     </Teleport>
     <VanRow class="pointer-events-none absolute bottom-0 z-2 w-full">
       <VanCol span="1" offset="21">
         <NButton
           class="pointer-events-auto text-3xl!"
-          @click="setFullscreen(true)"
+          @click="isFullscreen = true"
           text
           color="#fff"
         >