Skip to content

Commit f21b029

Browse files
KUN1007KUN1007
committed
mod: resource detail page layouts
1 parent 4ac9e92 commit f21b029

File tree

7 files changed

+364
-318
lines changed

7 files changed

+364
-318
lines changed

‎app/resource/[id]/page.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,5 @@ export default async function Kun({ params }: Props) {
3434
return <ErrorComponent error={detail} />
3535
}
3636

37-
return (
38-
<div className="mx-auto w-full max-w-6xl space-y-10 py-6">
39-
<KunResourceDetail detail={detail} />
40-
</div>
41-
)
37+
return <KunResourceDetail detail={detail} />
4238
}

‎components/patch/resource/ResourceDownload.tsx‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import { KunUser } from '~/components/kun/floating-card/KunUser'
77
import { Download, ChevronDown, ChevronUp, Ban } from 'lucide-react'
88
import { formatDistanceToNow } from '~/utils/formatDistanceToNow'
99
import { ResourceLikeButton } from './ResourceLike'
10-
import { ResourceDownloadCard } from './DownloadCard'
11-
import toast from 'react-hot-toast'
1210
import type { PatchResourceHtml } from '~/types/api/patch'
1311

1412
interface Props {
@@ -18,26 +16,10 @@ interface Props {
1816
const COLLAPSED_HEIGHT_PX = 96
1917

2018
export const ResourceDownload = ({ resource }: Props) => {
21-
const [showLinks, setShowLinks] = useState<Record<number, boolean>>({})
2219
const [isNoteExpanded, setIsNoteExpanded] = useState(false)
2320
const [isNoteOverflowing, setIsNoteOverflowing] = useState(false)
2421
const noteContentRef = useRef<HTMLDivElement>(null)
2522

26-
const toggleLinks = (resource: PatchResourceHtml) => {
27-
if (resource.status) {
28-
toast.error(
29-
'这个补丁资源因为可能含有病毒, 或者其它原因, 已被补丁作者或管理员禁止下载, 请等待我们的处理'
30-
)
31-
return
32-
}
33-
34-
const resourceId = resource.id
35-
setShowLinks((prev) => ({
36-
...prev,
37-
[resourceId]: !prev[resourceId]
38-
}))
39-
}
40-
4123
useLayoutEffect(() => {
4224
const element = noteContentRef.current
4325
if (element) {
@@ -128,7 +110,6 @@ export const ResourceDownload = ({ resource }: Props) => {
128110
variant={resource.status ? 'solid' : 'flat'}
129111
isIconOnly
130112
aria-label={`下载 Galgame 补丁资源`}
131-
onPress={() => toggleLinks(resource)}
132113
>
133114
{resource.status ? (
134115
<Ban className="size-4" />
@@ -138,8 +119,6 @@ export const ResourceDownload = ({ resource }: Props) => {
138119
</Button>
139120
</div>
140121
</div>
141-
142-
{showLinks[resource.id] && <ResourceDownloadCard resource={resource} />}
143122
</div>
144123
)
145124
}

‎components/patch/resource/ResourceInfo.tsx‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -16,36 +16,6 @@ export const ResourceInfo = ({ resource }: Props) => {
1616
modelName={resource.modelName}
1717
downloadCount={resource.download}
1818
/>
19-
20-
<div className="flex flex-wrap gap-2">
21-
{resource.code && (
22-
<Snippet
23-
tooltipProps={{
24-
content: '点击复制提取码'
25-
}}
26-
size="sm"
27-
symbol="提取码"
28-
color="primary"
29-
className="py-0"
30-
>
31-
{resource.code}
32-
</Snippet>
33-
)}
34-
35-
{resource.password && (
36-
<Snippet
37-
tooltipProps={{
38-
content: '点击复制解压码'
39-
}}
40-
size="sm"
41-
symbol="解压码"
42-
color="primary"
43-
className="py-0"
44-
>
45-
{resource.password}
46-
</Snippet>
47-
)}
48-
</div>
4919
</div>
5020
)
5121
}

‎components/resource/detail/PatchSummary.tsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import Image from 'next/image'
2+
import Link from 'next/link'
3+
import { Chip } from '@heroui/chip'
4+
import { KunCardStats } from '~/components/kun/CardStats'
5+
import { getPreferredLanguageText } from '~/utils/getPreferredLanguageText'
6+
import type { PatchResourceDetail } from '~/types/api/resource'
7+
8+
export const PatchSummary = ({
9+
patch
10+
}: {
11+
patch: PatchResourceDetail['patch']
12+
}) => {
13+
const patchName = getPreferredLanguageText(patch.name)
14+
const alias = patch.alias.filter((item) => item && item !== patchName)
15+
const banner = patch.banner || '/kungalgame-trans.webp'
16+
17+
return (
18+
<section className="relative overflow-hidden rounded-3xl border border-default-200 bg-gradient-to-br from-white via-default-50 to-default-100 text-default-900 shadow-lg dark:from-slate-950 dark:via-slate-900 dark:to-slate-800 dark:text-white">
19+
<div className="absolute inset-0">
20+
<Image
21+
src={banner}
22+
alt={patchName}
23+
fill
24+
className="object-cover opacity-30 dark:opacity-50"
25+
sizes="(max-width: 1024px) 100vw, 1280px"
26+
priority
27+
unoptimized
28+
/>
29+
<div className="absolute inset-0 bg-gradient-to-br from-white via-white/70 to-transparent dark:from-[#030712]/80 dark:via-[#0f172a]/70 dark:to-transparent" />
30+
</div>
31+
32+
<div className="relative z-10 grid gap-10 p-8 lg:grid-cols-[2fr_1fr]">
33+
<div className="space-y-4">
34+
<p className="text-xs uppercase tracking-[0.4em] text-default-600 dark:text-white/70">
35+
Galgame 补丁资源下载
36+
</p>
37+
<h1 className="text-3xl font-semibold leading-snug text-default-900 dark:text-white sm:text-4xl">
38+
{patchName}
39+
</h1>
40+
{alias.length > 0 && (
41+
<div className="flex flex-wrap gap-2">
42+
{alias.slice(0, 4).map((name) => (
43+
<Chip key={name} size="sm" variant="flat" color="secondary">
44+
{name}
45+
</Chip>
46+
))}
47+
</div>
48+
)}
49+
50+
<div className="flex flex-wrap gap-2 text-sm text-default-600 dark:text-white/70">
51+
{[patch.released, ...patch.language, ...patch.platform]
52+
.filter(Boolean)
53+
.map((item, index) => (
54+
<span
55+
key={`${item}-${index}`}
56+
className="rounded-full border border-default-200/70 px-3 py-1 dark:border-white/30"
57+
>
58+
{item}
59+
</span>
60+
))}
61+
</div>
62+
63+
<KunCardStats patch={patch} disableTooltip={false} isMobile={false} />
64+
65+
<div className="flex flex-wrap gap-3 pt-2 text-sm font-medium">
66+
<Link
67+
href={`/patch/${patch.id}/introduction`}
68+
className="inline-flex items-center rounded-full bg-white/80 px-4 py-2 text-default-900 shadow-sm transition hover:bg-white dark:bg-white/20 dark:text-white dark:hover:bg-white/30"
69+
>
70+
查看补丁介绍
71+
</Link>
72+
<Link
73+
href={`/patch/${patch.id}/resource`}
74+
className="inline-flex items-center rounded-full bg-white/40 px-4 py-2 text-default-900 transition hover:bg-white/60 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
75+
>
76+
查看全部资源
77+
</Link>
78+
</div>
79+
</div>
80+
81+
<div className="hidden md:block rounded-2xl bg-white/90 p-6 text-default-900 backdrop-blur-sm dark:bg-white/10 dark:text-white">
82+
<p className="text-sm uppercase tracking-[0.3em] text-default-600 dark:text-white/70">
83+
Galgame 概览
84+
</p>
85+
<dl className="mt-4 space-y-4">
86+
<div>
87+
<dt className="text-xs uppercase text-default-500 dark:text-white/60">
88+
发行时间
89+
</dt>
90+
<dd className="text-lg font-semibold">
91+
{patch.released || '待定'}
92+
</dd>
93+
</div>
94+
<div>
95+
<dt className="text-xs uppercase text-default-500 dark:text-white/60">
96+
支持语言
97+
</dt>
98+
<dd className="text-base">
99+
{patch.language.length ? patch.language.join('、') : '暂无标注'}
100+
</dd>
101+
</div>
102+
<div>
103+
<dt className="text-xs uppercase text-default-500 dark:text-white/60">
104+
支持平台
105+
</dt>
106+
<dd className="text-base">
107+
{patch.platform.length ? patch.platform.join('、') : '暂无标注'}
108+
</dd>
109+
</div>
110+
</dl>
111+
</div>
112+
</div>
113+
</section>
114+
)
115+
}

0 commit comments

Comments
 (0)