feat: add galgame series page

Author: KunMoe

components/kun/top-bar/hamburgerItem.ts

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { GalgameSample } from '~/types/api/series'
+
+const props = defineProps<{
+  isNSFW: boolean
+  galgames: GalgameSample[]
+}>()
+
+const banners = computed(() => props.galgames.map((g) => g.banner).slice(0, 5))
+
+const hoverTranslations = [
+  'group-hover:translate-x-0',
+  'group-hover:translate-x-[50%] translate-x-[10%]',
+  'group-hover:translate-x-[100%] translate-x-[20%]',
+  'group-hover:translate-x-[150%] translate-x-[30%]',
+  'group-hover:translate-x-[200%] translate-x-[40%]'
+]
+</script>
+
+<template>
+  <div class="relative mb-4 h-32 w-full">
+    <KunBadge
+      variant="solid"
+      class="absolute top-2 left-2 z-100"
+      :color="isNSFW ? 'danger' : 'success'"
+    >
+      {{ isNSFW ? 'NSFW' : 'SFW' }}
+    </KunBadge>
+
+    <div class="absolute inset-0">
+      <div
+        v-for="(banner, index) in banners"
+        :key="banner"
+        :class="
+          cn(
+            'absolute aspect-video h-full rounded-lg shadow-lg transition-transform duration-500 ease-out',
+            hoverTranslations[index]
+          )
+        "
+        :style="{ zIndex: banners.length - index }"
+      >
+        <NuxtImg
+          :src="banner"
+          :alt="`Series Banner ${index + 1}`"
+          class="ring-default/50 h-full w-full rounded-lg object-cover ring-2"
+          loading="lazy"
+          format="webp"
+          quality="80"
+        />
+      </div>
+    </div>
+  </div>
+</template>

components/series/Banner.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { GalgameSeries } from '~/types/api/series'
+
+const props = defineProps<{
+  series: GalgameSeries
+}>()
+
+const includedGamesText = computed(() => {
+  if (!props.series.sampleGalgame.length) {
+    return '暂无 Galgame'
+  }
+  const names = props.series.sampleGalgame.map(
+    (g) => `《${getPreferredLanguageText(g.name)}》`
+  )
+  return `${names.join('、')}${props.series.galgameCount > 5 ? ' 等' : ''}`
+})
+</script>
+
+<template>
+  <KunCard
+    :is-pressable="true"
+    :href="`/series/${series.id}`"
+    class-name="group relative flex h-full flex-col overflow-hidden backdrop-blur-none"
+    :is-transparent="true"
+  >
+    <div class="relative mb-4 h-32 w-full">
+      <KunBadge
+        variant="solid"
+        class="absolute top-2 left-2 z-100"
+        :color="series.isNSFW ? 'danger' : 'success'"
+      >
+        {{ series.isNSFW ? 'NSFW' : 'SFW' }}
+      </KunBadge>
+
+      <SeriesBanner
+        :is-n-s-f-w="series.isNSFW"
+        :galgames="series.sampleGalgame"
+      />
+    </div>
+
+    <div class="flex flex-grow flex-col px-1 pb-1">
+      <h3
+        class="group-hover:text-primary mb-2 line-clamp-2 text-xl font-bold transition-colors"
+      >
+        {{ series.name }}
+      </h3>
+
+      <p class="text-default-500 mb-4 line-clamp-1 text-xs">
+        {{ includedGamesText }}
+      </p>
+
+      <div class="mt-auto flex items-center justify-between">
+        <div class="text-default-500 flex items-center gap-2 text-sm">
+          <KunIcon name="lucide:gamepad-2" class="h-4 w-4" />
+          <span>共 {{ series.galgameCount }} 部 Galgame</span>
+        </div>
+
+        <div
+          class="group-hover:text-primary flex items-center gap-1.5 transition-all group-hover:translate-x-1"
+        >
+          <span class="text-sm font-medium">查看详情</span>
+          <KunIcon name="lucide:arrow-right" class="h-4 w-4" />
+        </div>
+      </div>
+    </div>
+  </KunCard>
+</template>

components/series/Card.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { data } = await useFetch('/api/series', {
+  method: 'GET',
+  ...kungalgameResponseHandler
+})
+</script>
+
+<template>
+  <KunCard
+    :is-hoverable="false"
+    :is-pressable="false"
+    :is-transparent="false"
+    content-class="space-y-3"
+  >
+    <KunHeader
+      name="Galgame 系列"
+      description="Galgame 全系列所有 Galgame 作品。例如美少女万华镜 1, 2, 3, 4, 5, 雪女, 外传 就是一个 Galgame 系列"
+    />
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <SeriesCard
+        v-for="(series, index) in data"
+        :key="series.id"
+        :style="{ animationDelay: `${index * 50}ms` }"
+        :series="series"
+      />
+    </div>
+  </KunCard>
+</template>

components/series/Container.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { GalgameSeriesDetail } from '~/types/api/series'
+
+defineProps<{
+  data: GalgameSeriesDetail
+}>()
+</script>
+
+<template>
+  <KunCard
+    :is-hoverable="false"
+    :is-pressable="false"
+    :is-transparent="false"
+    content-class="space-y-3"
+  >
+    <KunHeader :name="data.name" :description="data.description">
+      <template #endContent>
+        <div class="flex flex-col flex-wrap gap-3 text-sm">
+          <div class="text-default-500 flex items-center gap-2">
+            <KunIcon name="lucide:gamepad-2" />
+            <span class="font-medium">
+              共计 {{ data.galgame.length }} 部 Galgame
+            </span>
+          </div>
+
+          <div class="text-default-500 space-x-2">
+            <span>
+              创建于
+              {{ formatDate(data.created, { isShowYear: true }) }}
+            </span>
+            ·
+            <span>
+              更新于
+              {{ formatTimeDifference(data.updated) }}
+            </span>
+          </div>
+        </div>
+      </template>
+    </KunHeader>
+
+    <GalgameCard :galgames="data.galgame" />
+  </KunCard>
+</template>

components/series/Detail.vue

@@ -16,9 +16,15 @@ export const kunLayoutItem: KunLayoutItem[] = [
     router: '/galgame',
     label: 'Galgame'
   },
+  {
+    name: 'series',
+    icon: 'lucide:columns-4',
+    router: '/series',
+    label: 'Galgame 系列'
+  },
   {
     name: 'topic',
-    icon: 'lucide:square-library',
+    icon: 'icon-park-outline:topic',
     router: '/topic',
     label: '话题'
   },

constants/layout.ts

@@ -1,6 +1,6 @@
 {
   "name": "kun-galgame-nuxt3",
-  "version": "4.0.24",
+  "version": "4.0.25",
   "packageManager": "pnpm@10.4.1",
   "private": true,
   "scripts": {

package.json

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const route = useRoute()
+const seriesId = route.params.id
+
+const { data } = await useFetch(`/api/series/${seriesId}`, {
+  method: 'GET',
+  query: { seriesId },
+  ...kungalgameResponseHandler
+})
+
+useHead({
+  link: [
+    {
+      rel: 'canonical',
+      href: `${kungal.domain.main}/series/${seriesId}`
+    }
+  ]
+})
+
+useKunSeoMeta({
+  title: `${data.value?.name} - 资源 wiki`,
+  description: data.value?.description
+})
+</script>
+
+<template>
+  <SeriesDetail :data="data" v-if="data" />
+
+  <KunNull v-else description="未找到这个 Galgame 系列" />
+</template>

pages/series/[id].vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+useHead({
+  link: [
+    {
+      rel: 'canonical',
+      href: `${kungal.domain.main}/series`
+    }
+  ]
+})
+
+useKunSeoMeta({
+  title: 'Galgame 系列',
+  description:
+    'Galgame 全系列所有 Galgame 作品, Galgame 全系列资源下载。例如美少女万华镜系列, 灰色系列, 近月少女的礼仪系列, 巧克力与香子兰系列, 9 nine 系列, 巧克甜恋系列等等'
+})
+</script>
+
+<template>
+  <SeriesContainer />
+</template>

pages/series/index.vue

@@ -57,7 +57,7 @@ export const searchTopic = async (
     id: topic.id,
     title: topic.title,
     view: topic.view,
-    updateTime: topic.update_time,
+    statusUpdateTime: topic.status_update_time,
     tag: topic.tag,
     section: topic.section.map((s) => s.topic_section.name),
     user: topic.user,
@@ -137,7 +137,7 @@ export const searchGalgame = async (
     const languages = [...new Set(galgame.resource.map((r) => r.language))]
 
     return {
-      gid: galgame.id,
+      id: galgame.id,
       name: {
         'en-us': galgame.name_en_us,
         'ja-jp': galgame.name_ja_jp,