Skip to content

Commit 82c6f71

Browse files
KunMoeKunMoe
committed
refactor: refactor the galgame detail page header
1 parent c5b6949 commit 82c6f71

7 files changed

Lines changed: 367 additions & 190 deletions

File tree

‎components/galgame/Footer.vue‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,6 @@ const galgame = inject<GalgameDetail>('galgame')
66

77
<template>
88
<div v-if="galgame" class="flex items-center justify-between">
9-
<KunBadge
10-
size="md"
11-
:color="galgame.contentLimit === 'sfw' ? 'success' : 'danger'"
12-
>
13-
{{ galgame.contentLimit.toLocaleUpperCase() }}
14-
</KunBadge>
15-
169
<div class="flex gap-1">
1710
<KunTooltip :text="`浏览量: ${galgame.view}`">
1811
<KunBadge size="md">

‎components/galgame/Galgame.vue‎

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -15,49 +15,55 @@ const activeTab = ref<GalgameDetailSectionTabType>('comment')
1515
</script>
1616

1717
<template>
18-
<KunCard
19-
:is-hoverable="false"
20-
:is-transparent="false"
21-
content-class="space-y-6"
22-
>
23-
<GalgameTitle :galgame="galgame" />
24-
25-
<GalgameIntroduction :introduction="galgame.introduction" />
26-
27-
<div class="space-y-3">
28-
<p>本游戏项目的贡献者</p>
29-
<div class="flex items-center gap-1">
30-
<KunTooltip
31-
v-for="(user, index) in galgame.contributor"
32-
:key="index"
33-
:text="user.name"
34-
>
35-
<KunAvatar :user="user" />
36-
</KunTooltip>
37-
</div>
38-
</div>
18+
<div class="space-y-3">
19+
<GalgameHeader :galgame="galgame" />
20+
21+
<div class="flex gap-3">
22+
<KunCard
23+
:is-hoverable="false"
24+
:is-transparent="false"
25+
content-class="space-y-6"
26+
>
27+
<GalgameIntroduction :introduction="galgame.introduction" />
28+
29+
<div class="space-y-3">
30+
<p>本游戏项目的贡献者</p>
31+
<div class="flex items-center gap-1">
32+
<KunTooltip
33+
v-for="(user, index) in galgame.contributor"
34+
:key="index"
35+
:text="user.name"
36+
>
37+
<KunAvatar :user="user" />
38+
</KunTooltip>
39+
</div>
40+
</div>
41+
42+
<KunDivider />
3943

40-
<KunDivider />
41-
42-
<GalgameResource />
43-
44-
<GalgameSeries v-if="galgame.series" />
45-
46-
<KunTab
47-
:items="galgameDetailSectionTabs"
48-
v-model="activeTab"
49-
variant="underlined"
50-
size="sm"
51-
/>
52-
<KunCard :is-hoverable="false">
53-
<GalgameCommentContainer
54-
v-if="activeTab === 'comment'"
55-
:user-data="galgame.contributor"
56-
:target-user="galgame.user"
57-
/>
58-
<GalgameHistory v-if="activeTab === 'history'" />
59-
<GalgameLink v-if="activeTab === 'link'" />
60-
<GalgamePrContainer v-if="activeTab === 'pr'" />
61-
</KunCard>
62-
</KunCard>
44+
<GalgameResource />
45+
46+
<GalgameSeries v-if="galgame.series" />
47+
48+
<KunTab
49+
:items="galgameDetailSectionTabs"
50+
v-model="activeTab"
51+
variant="underlined"
52+
size="sm"
53+
/>
54+
<KunCard :is-hoverable="false">
55+
<GalgameCommentContainer
56+
v-if="activeTab === 'comment'"
57+
:user-data="galgame.contributor"
58+
:target-user="galgame.user"
59+
/>
60+
<GalgameHistory v-if="activeTab === 'history'" />
61+
<GalgameLink v-if="activeTab === 'link'" />
62+
<GalgamePrContainer v-if="activeTab === 'pr'" />
63+
</KunCard>
64+
</KunCard>
65+
66+
<GalgameInfo :galgame="galgame" />
67+
</div>
68+
</div>
6369
</template>

‎components/galgame/Header.vue‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<script setup lang="ts">
2+
import {
3+
GALGAME_RESOURCE_TYPE_ICON_MAP,
4+
GALGAME_RESOURCE_PLATFORM_ICON_MAP
5+
} from '~/constants/galgameResource'
6+
import {
7+
KUN_GALGAME_RESOURCE_TYPE_MAP,
8+
KUN_GALGAME_RESOURCE_LANGUAGE_MAP,
9+
KUN_GALGAME_RESOURCE_PLATFORM_MAP
10+
} from '~/constants/galgame'
11+
import type { GalgameDetail } from '~/types/api/galgame'
12+
13+
const props = defineProps<{
14+
galgame: GalgameDetail
15+
}>()
16+
17+
const { id, role } = usePersistUserStore()
18+
19+
const initialImageUrl = ref('')
20+
const isShowUpload = ref(false)
21+
const route = useRoute()
22+
const gid = computed(() => {
23+
return parseInt((route.params as { gid: string }).gid)
24+
})
25+
const hasPermission = computed(() => props.galgame.user.id === id || role >= 2)
26+
27+
const handleChangeBanner = async () => {
28+
const imageBlob = await getImage('kun-galgame-rewrite-banner')
29+
if (!imageBlob) {
30+
useMessage(10535, 'warn')
31+
return
32+
}
33+
34+
const res = await useComponentMessageStore().alert(
35+
'确定更新预览图吗?',
36+
'更改后使用 Ctrl + F5 刷新页面缓存, 即可看到更新后的图片'
37+
)
38+
if (!res) {
39+
return
40+
}
41+
42+
const formData = new FormData()
43+
formData.append('avatar', imageBlob)
44+
45+
useMessage(10536, 'info')
46+
47+
const result = await $fetch(`/api/galgame/${gid.value}/banner`, {
48+
method: 'PUT',
49+
body: formData,
50+
watch: false,
51+
...kungalgameResponseHandler
52+
})
53+
54+
if (result) {
55+
isShowUpload.value = false
56+
initialImageUrl.value = ''
57+
await deleteImage(`kun-galgame-rewrite-banner`)
58+
useMessage(10537, 'success')
59+
}
60+
}
61+
62+
onMounted(async () => {
63+
const imageBlob = await getImage('kun-galgame-rewrite-banner')
64+
if (imageBlob) {
65+
initialImageUrl.value = URL.createObjectURL(imageBlob)
66+
}
67+
})
68+
</script>
69+
70+
<template>
71+
<KunCard
72+
:is-hoverable="false"
73+
:is-transparent="false"
74+
content-class="grid grid-cols-1 gap-3 md:grid-cols-3"
75+
>
76+
<div
77+
className="relative rounded-lg w-full h-full overflow-hidden md:col-span-1 aspect-video md:rounded-l-xl"
78+
>
79+
<NuxtImg class="object-cover" :src="galgame.banner" loading="lazy" />
80+
81+
<KunModal
82+
:modal-value="isShowUpload"
83+
@update:modal-value="(value) => (isShowUpload = value)"
84+
>
85+
<div class="flex flex-col space-y-3">
86+
<h2>更改 Galgame 预览图</h2>
87+
88+
<KunUpload
89+
:initial-image="initialImageUrl"
90+
:size="1920"
91+
:aspect="16 / 9"
92+
hint="预览图不可包含 R18 等敏感内容"
93+
@set-image="(img) => saveImage(img, `kun-galgame-rewrite-banner`)"
94+
class-name="w-96"
95+
/>
96+
97+
<div class="flex justify-end gap-1">
98+
<KunButton
99+
color="danger"
100+
variant="light"
101+
@click="isShowUpload = false"
102+
>
103+
取消
104+
</KunButton>
105+
<KunButton @click="handleChangeBanner">确定更改</KunButton>
106+
</div>
107+
</div>
108+
</KunModal>
109+
110+
<KunBadge
111+
variant="solid"
112+
class="absolute top-2 left-2"
113+
:color="galgame.contentLimit === 'sfw' ? 'success' : 'danger'"
114+
>
115+
{{ galgame.contentLimit.toLocaleUpperCase() }}
116+
</KunBadge>
117+
118+
<KunButton
119+
class-name="absolute bottom-2 right-2"
120+
v-if="hasPermission"
121+
@click="isShowUpload = !isShowUpload"
122+
>
123+
更改图片 >
124+
</KunButton>
125+
</div>
126+
127+
<div className="flex flex-col gap-3 md:col-span-2">
128+
<div class="flex flex-wrap items-center gap-2">
129+
<h1 class="text-3xl">
130+
{{ getPreferredLanguageText(galgame.name) }}
131+
</h1>
132+
</div>
133+
134+
<div class="space-y-3">
135+
<div class="flex flex-wrap gap-2">
136+
<template v-for="(alias, index) in galgame.name" :key="index">
137+
<KunBadge v-if="alias">{{ alias }}</KunBadge>
138+
</template>
139+
</div>
140+
141+
<KunDivider />
142+
143+
<div class="space-y-1 space-x-1">
144+
<KunBadge
145+
v-for="(t, index) in galgame.type"
146+
:key="index"
147+
color="primary"
148+
>
149+
<KunIcon :name="GALGAME_RESOURCE_TYPE_ICON_MAP[t]" />
150+
{{ KUN_GALGAME_RESOURCE_TYPE_MAP[t] }}
151+
</KunBadge>
152+
153+
<KunBadge
154+
v-for="(lang, index) in galgame.language"
155+
:key="index"
156+
color="secondary"
157+
>
158+
<KunIcon class="icon" name="lucide:globe" />
159+
{{ KUN_GALGAME_RESOURCE_LANGUAGE_MAP[lang] }}
160+
</KunBadge>
161+
162+
<KunBadge
163+
v-for="(platform, index) in galgame.platform"
164+
:key="index"
165+
color="success"
166+
>
167+
<KunIcon
168+
class="icon"
169+
:name="GALGAME_RESOURCE_PLATFORM_ICON_MAP[platform]"
170+
/>
171+
{{ KUN_GALGAME_RESOURCE_PLATFORM_MAP[platform] }}
172+
</KunBadge>
173+
</div>
174+
175+
<div class="flex items-center justify-between">
176+
<KunTooltip text="Galgame 创建时间">
177+
<div
178+
class="text-default-500 flex cursor-default items-center gap-2"
179+
>
180+
<KunAvatar :user="galgame.user" />
181+
<KunIcon name="lucide:calendar" />
182+
<span>
183+
{{ formatDate(galgame.created, { isShowYear: true }) }}
184+
</span>
185+
</div>
186+
</KunTooltip>
187+
188+
<div class="flex gap-1">
189+
<KunTooltip :text="`浏览量: ${galgame.view}`">
190+
<KunBadge size="md">
191+
<KunIcon name="lucide:eye" />
192+
<span>{{ formatNumber(galgame.view) }}</span>
193+
</KunBadge>
194+
</KunTooltip>
195+
196+
<GalgameLike
197+
:galgame-id="galgame.id"
198+
:target-user-id="galgame.user.id"
199+
:like-count="galgame.likeCount"
200+
:is-liked="galgame.isLiked"
201+
/>
202+
203+
<GalgameFavorite
204+
:galgame-id="galgame.id"
205+
:target-user-id="galgame.user.id"
206+
:favorite-count="galgame.favoriteCount"
207+
:is-favorited="galgame.isFavorited"
208+
/>
209+
210+
<GalgameRewrite :galgame="galgame" />
211+
</div>
212+
</div>
213+
</div>
214+
</div>
215+
</KunCard>
216+
</template>

‎components/galgame/Rewrite.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const handleRewriteGalgame = async (galgame: GalgameDetail) => {
1919
</script>
2020

2121
<template>
22-
<KunTooltip text="重新编辑">
22+
<KunTooltip text="编辑">
2323
<KunButton
2424
:is-icon-only="true"
2525
variant="light"

0 commit comments

Comments
 (0)