PANDA-JSR/SecScore
1
0
Fork 0
mirror of https://github.com/SECTL/SecScore.git synced 2026-07-21 13:59:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

看板网格视图对齐主页正方形网格样式

Browse Source
This commit is contained in:
JSR
2026-03-20 18:53:33 +08:00
parent 562639f75f
commit abdd431b1f
1 changed files with 188 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardManager.tsx
+112 -10
View File
@@ -667,7 +667,7 @@ ORDER BY reward_points DESC, score DESC`,
display: "grid", display: "grid",
gridTemplateColumns: gridTemplateColumns:
list.viewMode === "grid" list.viewMode === "grid"
? "repeat(auto-fill, minmax(180px, 1fr))" ? "repeat(auto-fill, minmax(102px, 1fr))"
: list.viewMode === "list" : list.viewMode === "list"
? "1fr" ? "1fr"
: "repeat(auto-fill, minmax(220px, 1fr))", : "repeat(auto-fill, minmax(220px, 1fr))",
@@ -678,10 +678,42 @@ ORDER BY reward_points DESC, score DESC`,
const avatarColor = getAvatarColor(item.name) const avatarColor = getAvatarColor(item.name)
const avatarText = getAvatarText(item.name) const avatarText = getAvatarText(item.name)
const rankBadge = index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : null const rankBadge = index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : null
const gridPrimaryValue =
item.score !== undefined
? item.score
: item.rewardPoints !== undefined
? item.rewardPoints
: item.weekChange !== undefined
? item.weekChange
: item.weekDeducted !== undefined
? -item.weekDeducted
: item.answeredCount
const gridPrimaryLabel =
item.score !== undefined
? t("board.metrics.totalScore")
: item.rewardPoints !== undefined
? t("board.metrics.rewardPoints")
: item.weekChange !== undefined
? t("board.metrics.weekChange")
: item.weekDeducted !== undefined
? t("board.metrics.weekDeducted")
: item.answeredCount !== undefined
? t("board.metrics.todayAnswered")
: null
return ( return (
<Card <div
key={item.key} key={item.key}
style={{ style={{
...(list.viewMode === "grid" ? { aspectRatio: "1 / 1" } : null),
position: "relative",
}}
>
<Card
style={{
width: "100%",
height: "100%",
backgroundColor: "var(--ss-card-bg)", backgroundColor: "var(--ss-card-bg)",
border: "1px solid var(--ss-border-color)", border: "1px solid var(--ss-border-color)",
boxShadow: "0 6px 16px rgba(0, 0, 0, 0.06)", boxShadow: "0 6px 16px rgba(0, 0, 0, 0.06)",
@@ -690,7 +722,12 @@ ORDER BY reward_points DESC, score DESC`,
styles={{ styles={{
body: { body: {
padding: padding:
list.viewMode === "grid" ? "12px" : list.viewMode === "list" ? "10px 12px" : "12px 14px", list.viewMode === "grid"
? "8px"
: list.viewMode === "list"
? "10px 12px"
: "12px 14px",
height: list.viewMode === "grid" ? "100%" : undefined,
}, },
}} }}
> >
@@ -706,18 +743,82 @@ ORDER BY reward_points DESC, score DESC`,
{rankBadge} {rankBadge}
</div> </div>
)} )}
{list.viewMode === "grid" ? (
<div
style={{
height: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 8,
textAlign: "center",
}}
>
<div
style={{
width: 42,
height: 42,
borderRadius: 12,
backgroundColor: avatarColor,
color: "#fff",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontWeight: 700,
fontSize: avatarText.length > 1 ? "14px" : "18px",
boxShadow: `0 4px 10px ${avatarColor}40`,
flexShrink: 0,
}}
>
{avatarText}
</div>
<div <div
style={{ style={{
display: "flex", display: "flex",
alignItems: list.viewMode === "grid" ? "flex-start" : "center", alignItems: "center",
flexDirection: list.viewMode === "grid" ? "column" : "row", justifyContent: "center",
gap: 6,
width: "100%",
minWidth: 0,
}}
>
<div
style={{
fontWeight: 600,
fontSize: 13,
color: "var(--ss-text-main)",
maxWidth: "100%",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{item.name}
</div>
{gridPrimaryValue !== undefined && gridPrimaryLabel && (
<Tag
color={gridPrimaryValue >= 0 ? "success" : "error"}
style={{ fontWeight: "bold", marginInlineEnd: 0 }}
>
{gridPrimaryLabel}:{gridPrimaryValue > 0 ? `+${gridPrimaryValue}` : gridPrimaryValue}
</Tag>
)}
</div>
</div>
) : (
<div
style={{
display: "flex",
alignItems: "center",
flexDirection: "row",
gap: 10, gap: 10,
}} }}
> >
<div <div
style={{ style={{
width: list.viewMode === "grid" ? 56 : 42, width: 42,
height: list.viewMode === "grid" ? 56 : 42, height: 42,
borderRadius: 12, borderRadius: 12,
backgroundColor: avatarColor, backgroundColor: avatarColor,
color: "#fff", color: "#fff",
@@ -734,13 +835,12 @@ ORDER BY reward_points DESC, score DESC`,
<div style={{ minWidth: 0, flex: 1, width: "100%" }}> <div style={{ minWidth: 0, flex: 1, width: "100%" }}>
<div <div
style={{ style={{
fontSize: list.viewMode === "grid" ? 16 : 15, fontSize: 15,
fontWeight: 600, fontWeight: 600,
color: "var(--ss-text-main)", color: "var(--ss-text-main)",
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis", textOverflow: "ellipsis",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textAlign: list.viewMode === "grid" ? "center" : "left",
}} }}
> >
{item.name} {item.name}
@@ -751,7 +851,7 @@ ORDER BY reward_points DESC, score DESC`,
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
gap: 6, gap: 6,
justifyContent: list.viewMode === "grid" ? "center" : "flex-start", justifyContent: "flex-start",
}} }}
> >
{item.score !== undefined && ( {item.score !== undefined && (
@@ -782,7 +882,9 @@ ORDER BY reward_points DESC, score DESC`,
</div> </div>
</div> </div>
</div> </div>
)}
</Card> </Card>
</div>
) )
})} })}
</div> </div>