style : readble img

app/api/guides/[guideId]/artifacts/image/route.tsx

@@ -56,8 +56,9 @@ async function pngDataUrl(url: string): Promise<string | null> {
   }
 }
 
-async function localPngDataUrl(fileName: string, size: number | null = 96): Promise<string> {
-  const image = sharp(join(process.cwd(), "public", "icon", fileName));
+async function localPngDataUrl(fileName: string, size: number | null = 96, white = false): Promise<string> {
+  let image = sharp(join(process.cwd(), "public", "icon", fileName));
+  if (white) image = image.negate();
   const png = await (size === null ? image : image.resize(size, size, { fit: "contain" }))
     .png()
     .toBuffer();
@@ -94,7 +95,7 @@ export async function GET(
       const catalogTalent = guide.character.talents.find((item) => item.type === talent.type);
       return catalogTalent?.iconUrl ? pngDataUrl(catalogTalent.iconUrl) : null;
     })),
-    Promise.all(targetStatOptions.map((stat) => localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`))),
+    Promise.all(targetStatOptions.map((stat) => localPngDataUrl(`stats/${targetStatIconName(stat)}.webp`, 96, true))),
     localPngDataUrl("Watermark.png", null),
   ]);
 
@@ -105,7 +106,7 @@ export async function GET(
     ? 60 + profile.targets.length * 40 + (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
+    ? 242 + (profile.substats.length ? 76 + profile.substats.length * 18 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
     : 0;
   const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight));
 
@@ -200,7 +201,7 @@ export async function GET(
                     <div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div>
                     <div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} />
                     <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, fontSize: 14, lineHeight: 1.45 }}>
-                      {stat.values.length ? stat.values.map((value, index) => <span key={`${value}-${index}`} style={{ color: statPriorityColor(index), whiteSpace: "nowrap" }}>{statLabel(value)}</span>) : "—"}
+                      {stat.values.length ? stat.values.map((value, index) => <span key={`${value}-${index}`} style={{ color: statPriorityColor(index), whiteSpace: "normal", wordBreak: "break-word" }}>{statLabel(value)}</span>) : "—"}
                     </div>
                   </div>
                 ))}
@@ -208,8 +209,11 @@ export async function GET(
             </div>
 
             {profile.substats.length ? (
-                <div style={{ display: "flex", justifyContent: "center", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "20px", fontSize: 17, textAlign: "center" }}>
-                <strong>Stat Priority:&nbsp;</strong>{profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{index ? " > " : ""}{statLabel(stat)}</span>)}
+                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}>
+                <strong>Stat Priority:</strong>
+                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
+                  {profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{statLabel(stat)}</span>)}
+                </div>
               </div>
             ) : null}
 

components/public/structured-guide.tsx

@@ -370,13 +370,15 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
             </Card>
             {profile.substats.length ? (
               <Card>
-                <CardContent className="py-6 text-center text-lg">
-                  <strong>Stat Priority:</strong>{" "}
-                  {profile.substats.map((stat, index) => (
-                    <span key={`${stat}-${index}`} className={statPriorityColorClass(index)}>
-                      {index ? " > " : ""}{statLabel(stat)}
-                    </span>
-                  ))}
+                <CardContent className="flex flex-col items-center gap-2 py-5 text-center text-sm">
+                  <strong>Stat Priority:</strong>
+                  <div className="flex flex-col items-center gap-1">
+                    {profile.substats.map((stat, index) => (
+                      <span key={`${stat}-${index}`} className={statPriorityColorClass(index)}>
+                        {statLabel(stat)}
+                      </span>
+                    ))}
+                  </div>
                 </CardContent>
               </Card>
             ) : null}
@@ -396,7 +398,7 @@ function ArtifactSection({ guide }: { guide: PublicGuide }) {
                       )}
                     >
                       <span className="flex min-w-0 items-center gap-2">
-                        {targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={28} height={28} className="size-7 shrink-0 object-contain" /> : null}
+                        {targetStatIconName(target.stat) ? <Image src={`/icon/stats/${targetStatIconName(target.stat)}.webp`} alt="" width={28} height={28} className="size-7 shrink-0 object-contain brightness-0 invert" /> : null}
                         <span>{normalizeTargetStat(target.stat) ?? target.stat}</span>
                       </span>
                       <strong className="shrink-0">{target.value}</strong>
@@ -460,10 +462,10 @@ function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: stri
       <Image src={iconSrc} alt="" width={48} height={48} className="size-12 object-contain" />
       <p className="font-semibold">{label}</p>
       <Separator />
-      <div className="flex max-w-full flex-col items-center gap-1 text-sm leading-6 sm:text-base">
+      <div className="flex max-w-full flex-col items-center gap-1 text-xs leading-5 sm:text-sm sm:leading-6">
         {values.length
           ? values.map((value, index) => (
-              <span key={`${value}-${index}`} className={cn("max-w-full overflow-x-auto whitespace-nowrap", statPriorityColorClass(index))}>
+              <span key={`${value}-${index}`} className={cn("max-w-full break-words text-center", statPriorityColorClass(index))}>
                 {statLabel(value)}
               </span>
             ))