Skip to content

Commit 6f7e018

Browse files
KUN1007KUN1007
committed
refactor: refactoring create and update patch page
1 parent 68031c0 commit 6f7e018

19 files changed

+490
-516
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"galgames",
4646
"ggbases",
4747
"GIGA",
48+
"Hentai",
4849
"heroui",
4950
"Hikari",
5051
"hikarinagi",

‎components/edit/VNDB.d.ts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎components/edit/create/BannerImage.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,14 @@ export const BannerImage = ({ errors }: Props) => {
4141
return (
4242
<div className="space-y-2">
4343
<h2 className="text-xl">二、预览图片</h2>
44-
<p className="text-sm text-default-500">
44+
<p>
4545
注意, <b>您不可以使用 R18 图片作为封面</b>, 如果有, 请更换图片, 打码,
4646
或者裁剪
4747
</p>
48+
<p>
49+
预览图片实在太影响排版了, 无论如何请尽量寻找一个清晰的图片, 可以直接前往
50+
E-Hentai (E 站) 获取
51+
</p>
4852
{errors && <p className="text-xs text-danger-500">{errors}</p>}
4953

5054
<KunImageCropper

‎components/edit/create/ContentLimit.tsx‎

Lines changed: 69 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,69 @@
1-
'use client'
2-
3-
import { Switch, Alert, Image } from '@heroui/react'
4-
import { useCreatePatchStore } from '~/store/editStore'
5-
import { GALGAME_AGE_LIMIT_MAP } from '~/constants/galgame'
6-
7-
interface Props {
8-
errors: string | undefined
9-
}
10-
11-
export const ContentLimit = ({ errors }: Props) => {
12-
const { data, setData } = useCreatePatchStore()
13-
14-
return (
15-
<div className="space-y-2">
16-
<h2 className="text-xl">六、页面内容分级</h2>
17-
{errors && <p className="text-xs text-danger-500">{errors}</p>}
18-
<p className="text-sm text-default-500">
19-
默认游戏页面是 SFW (内容安全, 可以在公告场合打开),
20-
如果您觉得游戏名、预览图、介绍等过于虎狼 (例如:
21-
用淫乱喷雾强制贞淑人妻们发情), 页面完全没有办法在公共场合展示,
22-
请将内容分级为 NSFW (内容可能有 R18, 会导致社死)
23-
</p>
24-
<p className="text-sm text-default-500">
25-
NSFW 指的是游戏页面含有不适合在公共场合展示的内容,
26-
而不是指的游戏本身含有 R18 内容
27-
</p>
28-
<p className="text-sm text-default-500">
29-
SFW 的浏览量会高两到三倍,
30-
因此请您尽量保证游戏封面、游戏名、游戏介绍等可以在公共场合展示
31-
</p>
32-
<Alert
33-
color="danger"
34-
title="再次请大家注意 NSFW 问题"
35-
description="网站目前的 NSFW 认定标准可能比较苛刻, 看起来不能在公司报告大会上放在 PPT 里展示的游戏都是 NSFW ,封面需要打码才能放上去的一律算 NSFW, 总之就是越严越好，可以错杀不可以放过，因为会导致网站违反 Google 或 Bing 的条款"
36-
/>
37-
<div className="pb-6">
38-
<p className="text-sm text-default-500">
39-
例如下面两张图就算作 NSFW 的游戏, 有 NSFW 的游戏名或介绍等等也算作
40-
NSFW
41-
</p>
42-
<div className="flex gap-2">
43-
<Image alt="nsfw-image2" src="/edit/1.avif" width={200} />
44-
<Image alt="nsfw-image2" src="/edit/2.avif" width={200} />
45-
</div>
46-
</div>
47-
48-
<p>注意这个 NSFW 开关, 越严越好, 只要有一点不对立即设置为 NSFW</p>
49-
<Switch
50-
defaultSelected
51-
color="danger"
52-
size="lg"
53-
isSelected={data.contentLimit === 'nsfw'}
54-
onValueChange={(value) => {
55-
if (value) {
56-
setData({ ...data, contentLimit: 'nsfw' })
57-
} else {
58-
setData({ ...data, contentLimit: 'sfw' })
59-
}
60-
}}
61-
>
62-
{GALGAME_AGE_LIMIT_MAP[data.contentLimit]}
63-
</Switch>
64-
</div>
65-
)
66-
}
1+
'use client'
2+
3+
import { Switch, Alert, Image, CardBody, Card } from '@heroui/react'
4+
import { useCreatePatchStore } from '~/store/editStore'
5+
import { GALGAME_AGE_LIMIT_MAP } from '~/constants/galgame'
6+
7+
interface Props {
8+
errors: string | undefined
9+
}
10+
11+
export const ContentLimit = ({ errors }: Props) => {
12+
const { data, setData } = useCreatePatchStore()
13+
14+
return (
15+
<div className="space-y-2">
16+
<h2 className="text-xl">页面内容分级</h2>
17+
<Alert
18+
color="danger"
19+
title="再次请大家注意 NSFW 问题"
20+
description="网站目前的 NSFW 认定标准可能比较苛刻, 看起来不能在公司报告大会上放在 PPT 里展示的游戏都是 NSFW ,封面需要打码才能放上去的一律算 NSFW, 总之就是越严越好，可以错杀不可以放过，因为会导致网站违反 Google 或 Bing 的条款"
21+
/>
22+
23+
<Card>
24+
<CardBody>
25+
{errors && <p className="text-xs text-danger-500">{errors}</p>}
26+
<p className="text-sm text-default-500">
27+
默认游戏页面是 SFW (内容安全, 可以在公告场合打开),
28+
如果您觉得游戏名、预览图、介绍等过于虎狼 (例如:
29+
用淫乱喷雾强制贞淑人妻们发情), 页面完全没有办法在公共场合展示,
30+
请将内容分级为 NSFW (内容可能有 R18, 会导致社死)
31+
</p>
32+
<p className="text-sm text-default-500">
33+
NSFW 指的是游戏页面含有不适合在公共场合展示的内容,
34+
而不是指的游戏本身含有 R18 内容
35+
</p>
36+
<p className="text-sm text-default-500">
37+
SFW 的浏览量会高两到三倍,
38+
因此请您尽量保证游戏封面、游戏名、游戏介绍等可以在公共场合展示
39+
</p>
40+
<p className="text-sm text-default-500 font-bold">
41+
例如下面两张图就算作 NSFW 的游戏, 有 NSFW 的游戏名或介绍等等也算作
42+
NSFW
43+
</p>
44+
<div className="flex gap-2">
45+
<Image alt="nsfw-image2" src="/edit/1.avif" width={200} />
46+
<Image alt="nsfw-image2" src="/edit/2.avif" width={200} />
47+
</div>
48+
</CardBody>
49+
</Card>
50+
51+
<p>注意这个 NSFW 开关, 越严越好, 只要有一点不对立即设置为 NSFW</p>
52+
<Switch
53+
defaultSelected
54+
color="danger"
55+
size="lg"
56+
isSelected={data.contentLimit === 'nsfw'}
57+
onValueChange={(value) => {
58+
if (value) {
59+
setData({ ...data, contentLimit: 'nsfw' })
60+
} else {
61+
setData({ ...data, contentLimit: 'sfw' })
62+
}
63+
}}
64+
>
65+
{GALGAME_AGE_LIMIT_MAP[data.contentLimit]}
66+
</Switch>
67+
</div>
68+
)
69+
}

‎components/edit/create/CreatePatch.tsx‎

Lines changed: 7 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
'use client'
22

33
import { useState } from 'react'
4-
import { Card, CardBody, CardHeader, Input, Link } from '@heroui/react'
5-
import { useCreatePatchStore } from '~/store/editStore'
4+
import { Alert, Card, CardBody, CardHeader, Link } from '@heroui/react'
65
import { VNDBInput } from './VNDBInput'
7-
import { AliasInput } from './AliasInput'
86
import { BannerImage } from './BannerImage'
97
import { PublishButton } from './PublishButton'
10-
import { PatchIntroduction } from './PatchIntroduction'
118
import { ContentLimit } from './ContentLimit'
129
import type { CreatePatchRequestData } from '~/store/editStore'
1310

1411
export const CreatePatch = () => {
15-
const { data, setData } = useCreatePatchStore()
1612
const [errors, setErrors] = useState<
1713
Partial<Record<keyof CreatePatchRequestData, string>>
1814
>({})
@@ -21,7 +17,7 @@ export const CreatePatch = () => {
2117
<form className="flex-1 w-full mx-auto">
2218
<Card className="w-full">
2319
<CardHeader className="flex gap-3">
24-
<div className="flex flex-col">
20+
<div className="flex flex-col gap-2">
2521
<h1 className="text-2xl">创建新游戏</h1>
2622
<p className="text-default-500">
2723
您需要创建一个新游戏, 稍后在游戏页面添加补丁资源
@@ -33,82 +29,18 @@ export const CreatePatch = () => {
3329
>
3430
如何在鲲 Galgame 补丁发布 Galgame
3531
</Link>
32+
<Alert
33+
color="success"
34+
title="我们正在构建世界最大最全的 Galgame 数据库"
35+
description="现在发布游戏仅需要填写 VNDB ID 和一张预览图片, 剩下的游戏数据我们会自动聚合, 如果一切顺利, 数据库约一到两年构建完毕, 届时无需任何人创建新的游戏项目"
36+
/>
3637
</div>
3738
</CardHeader>
3839
<CardBody className="mt-4 space-y-12">
3940
<VNDBInput errors={errors.vndbId} />
4041

4142
<BannerImage errors={errors.banner} />
4243

43-
<div className="space-y-2">
44-
<h2 className="text-xl">三、游戏名称</h2>
45-
<p className="text-sm text-default-500">
46-
输入游戏名称, 这会作为游戏的标题, 填写一种语言即可, 多个也可以
47-
(我们会根据 VNDB ID 自动同步游戏标题和介绍)
48-
</p>
49-
50-
<div className="grid sm:grid-cols-2 grid-cols-1 gap-2">
51-
<Input
52-
isRequired
53-
labelPlacement="outside"
54-
placeholder="日语标题"
55-
value={data.name['ja-jp']}
56-
onChange={(e) =>
57-
setData({
58-
...data,
59-
name: {
60-
'en-us': data.name['en-us'],
61-
'ja-jp': e.target.value,
62-
'zh-cn': data.name['zh-cn']
63-
}
64-
})
65-
}
66-
isInvalid={!!errors.name}
67-
errorMessage={errors.name}
68-
/>
69-
<Input
70-
isRequired
71-
labelPlacement="outside"
72-
placeholder="中文标题"
73-
value={data.name['zh-cn']}
74-
onChange={(e) =>
75-
setData({
76-
...data,
77-
name: {
78-
'en-us': data.name['en-us'],
79-
'ja-jp': data.name['ja-jp'],
80-
'zh-cn': e.target.value
81-
}
82-
})
83-
}
84-
isInvalid={!!errors.name}
85-
errorMessage={errors.name}
86-
/>
87-
<Input
88-
isRequired
89-
labelPlacement="outside"
90-
placeholder="英语标题"
91-
value={data.name['en-us']}
92-
onChange={(e) =>
93-
setData({
94-
...data,
95-
name: {
96-
'en-us': e.target.value,
97-
'ja-jp': data.name['ja-jp'],
98-
'zh-cn': data.name['zh-cn']
99-
}
100-
})
101-
}
102-
isInvalid={!!errors.name}
103-
errorMessage={errors.name}
104-
/>
105-
</div>
106-
</div>
107-
108-
<PatchIntroduction errors={errors.banner} />
109-
110-
<AliasInput errors={errors.alias} />
111-
11244
<ContentLimit errors={errors.contentLimit} />
11345

11446
<PublishButton setErrors={setErrors} />

‎components/edit/create/PatchIntroduction.tsx‎

Lines changed: 23 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,23 @@
1-
'use client'
2-
3-
import { Link } from '@heroui/react'
4-
import { useCreatePatchStore } from '~/store/editStore'
5-
import { Editor } from '~/components/kun/milkdown/PatchEditor'
6-
7-
interface Props {
8-
errors: string | undefined
9-
}
10-
11-
export const PatchIntroduction = ({ errors }: Props) => {
12-
const { data } = useCreatePatchStore()
13-
14-
return (
15-
<div className="space-y-2">
16-
<h2 className="text-xl">四、游戏介绍</h2>
17-
{errors && <p className="text-xs text-danger-500">{errors}</p>}
18-
<p className="text-sm text-default-500">
19-
自动获取的英语介绍仅供参考, 如果您通过搜索获取到游戏的简体中文介绍,
20-
您可以覆盖该英语介绍
21-
</p>
22-
<p className="text-sm text-default-500">
23-
您也可以使用{' '}
24-
<Link
25-
isExternal
26-
size="sm"
27-
href={`https://cn.bing.com/translator?text=${data.introduction}&from=en&to=zh-Hans`}
28-
>
29-
微软翻译
30-
</Link>{' '}
31-
/{' '}
32-
<Link
33-
isExternal
34-
size="sm"
35-
href={`https://www.deepl.com/zh/translator#en/zh-hans/${data.introduction}`}
36-
>
37-
DeepL
38-
</Link>{' '}
39-
等渠道将该英语直接翻译后使用
40-
</p>
41-
<Editor storeName="patchCreate" />
42-
</div>
43-
)
44-
}
1+
'use client'
2+
3+
import { useCreatePatchStore } from '~/store/editStore'
4+
import { TabbedIntroduction } from '../shared/TabbedIntroduction'
5+
6+
interface Props {
7+
errors: string | undefined
8+
}
9+
10+
export const PatchIntroduction = ({ errors }: Props) => {
11+
const { data } = useCreatePatchStore()
12+
const getCurText = () =>
13+
data.introduction['zh-cn'] || data.introduction['ja-jp'] || data.introduction['en-us'] || ''
14+
return (
15+
<TabbedIntroduction
16+
storeName="patchCreate"
17+
errors={errors}
18+
initialLang="zh-cn"
19+
getCurrentText={getCurText}
20+
/>
21+
)
22+
}
23+

‎components/edit/create/PublishButton.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,17 @@ export const PublishButton = ({ setErrors }: Props) => {
3939
}
4040

4141
const result = patchCreateSchema.safeParse({
42-
...data,
4342
banner: localeBannerBlob,
44-
alias: JSON.stringify(data.alias)
43+
vndbId: data.vndbId,
44+
name_zh_cn: data.name['zh-cn'],
45+
name_ja_jp: data.name['ja-jp'],
46+
name_en_us: data.name['en-us'],
47+
introduction_zh_cn: data.introduction['zh-cn'],
48+
introduction_ja_jp: data.introduction['ja-jp'],
49+
introduction_en_us: data.introduction['en-us'],
50+
alias: JSON.stringify(data.alias),
51+
released: data.released,
52+
contentLimit: data.contentLimit
4553
})
4654
if (!result.success) {
4755
const newErrors: Partial<Record<keyof CreatePatchRequestData, string>> =

0 commit comments

Comments
 (0)