feat : fix bug
This commit is contained in:
@@ -22,5 +22,5 @@ export default async function StructuredEditorPage({ params }: { params: Promise
|
||||
const [catalog, content] = await Promise.all([getActiveCatalog(), getPublicGuide(guide.slug)]);
|
||||
if (!catalog || !content) notFound();
|
||||
const guideCharacter = catalog.characters.find((item) => item.key === guide.characterKey);
|
||||
return <div className="min-h-svh"><AdminHeader /><main className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6 lg:p-8"><header className="flex items-center gap-4"><Button variant="outline" size="icon" render={<Link href={`/admin/${character}`} />} nativeButton={false} aria-label="กลับหน้า Guide"><ArrowLeftIcon /></Button><div className="min-w-0"><p className="text-sm text-muted-foreground">{guide.name}</p><h1 className="whitespace-nowrap font-heading text-3xl font-semibold">{guide.sections.find((section) => section.slug === page)?.title ?? page}</h1></div></header><GuideSectionNav characterKey={guide.characterKey} current={page as (typeof sections)[number]} /><GuideSectionEditor section={page as (typeof sections)[number]} guide={guide} weapons={catalog.weapons} artifacts={catalog.artifacts} characters={catalog.characters} catalogConstellations={guideCharacter?.constellations ?? []} catalogTalents={guideCharacter?.talents ?? []} initial={{ weapons: content.weapons, artifactGroups: content.artifactGroups.map((group) => ({ id: group.id, name: group.name, rows: group.rows.map((row) => ({ firstArtifactKey: row.firstArtifactKey, secondArtifactKey: row.secondArtifactKey, percent: row.percent })) })), artifactProfile: content.artifactProfile, constellations: content.constellations, teams: content.teams.map((team) => ({ title: team.title, rotationSeconds: team.rotationSeconds, combo: team.combo, members: team.members.map((member) => ({ characterKey: member.characterKey, weaponKey: member.weaponKey, artifactKey: member.artifactKey, constellation: member.constellation, refinement: member.refinement, damage: member.damage })) })), extras: content.extras.map((section) => ({ title: section.title, rows: section.rows.map((row) => ({ mediaId: row.mediaId, heading: row.heading, body: row.body, percent: row.percent, imageUrl: row.imageUrl })) })) }} /></main></div>;
|
||||
return <div className="min-h-svh"><AdminHeader /><main className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6 lg:p-8"><header className="flex items-center gap-4"><Button variant="outline" size="icon" render={<Link href={`/admin/${character}`} />} nativeButton={false} aria-label="กลับหน้า Guide"><ArrowLeftIcon /></Button><div className="min-w-0"><p className="text-sm text-muted-foreground">{guide.name}</p><h1 className="whitespace-nowrap font-heading text-3xl font-semibold">{guide.sections.find((section) => section.slug === page)?.title ?? page}</h1></div></header><GuideSectionNav characterKey={guide.characterKey} current={page as (typeof sections)[number]} /><GuideSectionEditor section={page as (typeof sections)[number]} guide={guide} weapons={catalog.weapons} artifacts={catalog.artifacts} characters={catalog.characters} catalogConstellations={guideCharacter?.constellations ?? []} catalogTalents={guideCharacter?.talents ?? []} initial={{ weapons: content.weapons, artifactGroups: content.artifactGroups.map((group) => ({ id: group.id, name: group.name, rows: group.rows.map((row) => ({ firstArtifactKey: row.firstArtifactKey, secondArtifactKey: row.secondArtifactKey, percent: row.percent, note: row.note })) })), artifactProfile: content.artifactProfile, constellations: content.constellations, teams: content.teams.map((team) => ({ id: team.id, title: team.title, rotationSeconds: team.rotationSeconds, combo: team.combo, members: team.members.map((member) => ({ characterKey: member.characterKey, weaponKey: member.weaponKey, artifactKey: member.artifactKey, constellation: member.constellation, refinement: member.refinement, damage: member.damage })) })), extras: content.extras.map((section) => ({ title: section.title, rows: section.rows.map((row) => ({ mediaId: row.mediaId, heading: row.heading, body: row.body, percent: row.percent, imageUrl: row.imageUrl })) })) }} /></main></div>;
|
||||
}
|
||||
|
||||
@@ -70,8 +70,9 @@ export async function GET(
|
||||
const { guideId } = await context.params;
|
||||
const guide = await getPublicArtifactExport(guideId);
|
||||
if (!guide) return new Response("Guide not found", { status: 404 });
|
||||
const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
|
||||
|
||||
const [fonts, groupAssets, statIconAssets] = await Promise.all([
|
||||
const [fonts, groupAssets, statIconAssets, talentAssets] = await Promise.all([
|
||||
anuphanFonts,
|
||||
Promise.all(
|
||||
guide.groups.map((group) =>
|
||||
@@ -88,18 +89,22 @@ export async function GET(
|
||||
localPngDataUrl("Icon_Goblet_of_Eonothem.webp"),
|
||||
localPngDataUrl("Icon_Circlet_of_Logos.webp"),
|
||||
]),
|
||||
Promise.all(talents.map((talent) => {
|
||||
const catalogTalent = guide.character.talents.find((item) => item.type === talent.type);
|
||||
return catalogTalent?.iconUrl ? pngDataUrl(catalogTalent.iconUrl) : null;
|
||||
})),
|
||||
]);
|
||||
|
||||
const profile = guide.profile;
|
||||
const leftHeight = guide.groups.reduce((sum, group) => sum + 68 + group.rows.length * 76, 0) + Math.max(0, guide.groups.length - 1) * 16;
|
||||
const groupRowHeights = guide.groups.map((group) => group.rows.map((row) => Math.max(76, 76 + (row.note ? Math.ceil(row.note.length / 58) * 22 : 0))));
|
||||
const leftHeight = guide.groups.reduce((sum, _group, groupIndex) => sum + 68 + groupRowHeights[groupIndex].reduce((groupSum, rowHeight) => groupSum + rowHeight, 0), 0) + Math.max(0, guide.groups.length - 1) * 16;
|
||||
const detailHeight = profile
|
||||
? 60 + profile.targets.length * 30 + (profile.talents.length ? 58 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
|
||||
? 60 + profile.targets.length * 30 + (profile.talents.length ? 82 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
|
||||
: 0;
|
||||
const rightHeight = profile
|
||||
? 242 + (profile.substats.length ? 76 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
|
||||
: 0;
|
||||
const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight));
|
||||
const talents = normalizeTalentPriorities(profile?.talents ?? []);
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
@@ -143,7 +148,7 @@ export async function GET(
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
|
||||
{group.rows.map((row, rowIndex) => (
|
||||
<div key={row.id} style={{ display: "flex", minHeight: 76, alignItems: "center", gap: 14 }}>
|
||||
<div key={row.id} style={{ display: "flex", minHeight: groupRowHeights[groupIndex][rowIndex], alignItems: "center", gap: 14 }}>
|
||||
<div style={{ display: "flex", width: row.second ? 94 : 58 }}>
|
||||
{groupAssets[groupIndex][rowIndex].first ? (
|
||||
<div style={{ display: "flex", width: 58, height: 58, overflow: "hidden", border: "1px solid #ffffff2a", borderRadius: 10, background: rarityGradient(row.first.rarity) }}>
|
||||
@@ -156,8 +161,11 @@ export async function GET(
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div style={{ display: "flex", flex: 1, fontSize: 18, fontWeight: 700 }}>
|
||||
{rowIndex + 1}. {row.first.name}{row.second ? ` + ${row.second.name}` : ""}
|
||||
<div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 5 }}>
|
||||
<div style={{ display: "flex", fontSize: 18, fontWeight: 700 }}>
|
||||
{rowIndex + 1}. {row.first.name}{row.second ? ` + ${row.second.name}` : ""}
|
||||
</div>
|
||||
{row.note ? <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
|
||||
</div>
|
||||
<div style={{ display: "flex", fontSize: 26, fontWeight: 700 }}>
|
||||
{metric(row.percent)}
|
||||
@@ -215,9 +223,10 @@ export async function GET(
|
||||
{talents.length ? (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ลำดับการอัพพรสวรรค์</div>
|
||||
<div style={{ display: "flex", gap: 10, fontSize: 17, fontWeight: 700 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 17, fontWeight: 700 }}>
|
||||
{talents.map((talent, index) => (
|
||||
<div key={talent.type} style={{ display: "flex", gap: 10 }}>
|
||||
<div key={talent.type} style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||
{talentAssets[index] ? <img src={talentAssets[index]!} alt="" width={42} height={42} style={{ objectFit: "contain" }} /> : null}
|
||||
<span>{talent.type}{talent.level ? ` Lv.${talent.level}+` : ""}</span>
|
||||
{index < talents.length - 1 ? <span>{talent.relationToNext === "gte" ? ">=" : ">"}</span> : null}
|
||||
</div>
|
||||
|
||||
@@ -56,7 +56,8 @@ export async function GET(
|
||||
anuphanFonts,
|
||||
Promise.all(guide.weapons.map((row) => pngDataUrl(row.weapon.imageUrl))),
|
||||
]);
|
||||
const height = Math.max(360, 190 + guide.weapons.length * 126 + Math.max(0, guide.weapons.length - 1) * 14);
|
||||
const weaponHeights = guide.weapons.map((row) => Math.max(126, 126 + (row.note ? Math.ceil(row.note.length / 52) * 22 : 0)));
|
||||
const height = Math.max(360, 190 + weaponHeights.reduce((sum, rowHeight) => sum + rowHeight, 0) + Math.max(0, guide.weapons.length - 1) * 14);
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
@@ -81,7 +82,7 @@ export async function GET(
|
||||
key={row.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
minHeight: 112,
|
||||
minHeight: weaponHeights[index],
|
||||
overflow: "hidden",
|
||||
borderRadius: 14,
|
||||
background: "white",
|
||||
@@ -104,8 +105,11 @@ export async function GET(
|
||||
) : (
|
||||
<div style={{ display: "flex", width: 92, height: 92, alignItems: "center", justifyContent: "center", fontSize: 32 }}>{index + 1}</div>
|
||||
)}
|
||||
<div style={{ display: "flex", fontSize: 24, fontWeight: 700 }}>
|
||||
{index + 1}. {row.weapon.name} R{row.refinement}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
|
||||
<div style={{ display: "flex", fontSize: 24, fontWeight: 700 }}>
|
||||
{index + 1}. {row.weapon.name} R{row.refinement}
|
||||
</div>
|
||||
{row.note ? <div style={{ display: "flex", fontSize: 14, lineHeight: 1.55 }}>{row.note}</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", flex: 1, alignItems: "center", justifyContent: "space-around", gap: 12, color: "#17171c", padding: "12px 16px" }}>
|
||||
|
||||
Reference in New Issue
Block a user