mirror of
https://github.com/SECTL/SecScore.git
synced 2026-07-19 21:14:21 +08:00
看板网格视图对齐主页正方形网格样式
This commit is contained in:
+112
-10
@@ -667,7 +667,7 @@ ORDER BY reward_points DESC, score DESC`,
|
||||
display: "grid",
|
||||
gridTemplateColumns:
|
||||
list.viewMode === "grid"
|
||||
? "repeat(auto-fill, minmax(180px, 1fr))"
|
||||
? "repeat(auto-fill, minmax(102px, 1fr))"
|
||||
: list.viewMode === "list"
|
||||
? "1fr"
|
||||
: "repeat(auto-fill, minmax(220px, 1fr))",
|
||||
@@ -678,10 +678,42 @@ ORDER BY reward_points DESC, score DESC`,
|
||||
const avatarColor = getAvatarColor(item.name)
|
||||
const avatarText = getAvatarText(item.name)
|
||||
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 (
|
||||
<Card
|
||||
<div
|
||||
key={item.key}
|
||||
style={{
|
||||
...(list.viewMode === "grid" ? { aspectRatio: "1 / 1" } : null),
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "var(--ss-card-bg)",
|
||||
border: "1px solid var(--ss-border-color)",
|
||||
boxShadow: "0 6px 16px rgba(0, 0, 0, 0.06)",
|
||||
@@ -690,7 +722,12 @@ ORDER BY reward_points DESC, score DESC`,
|
||||
styles={{
|
||||
body: {
|
||||
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}
|
||||
</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
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: list.viewMode === "grid" ? "flex-start" : "center",
|
||||
flexDirection: list.viewMode === "grid" ? "column" : "row",
|
||||
alignItems: "center",
|
||||
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,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: list.viewMode === "grid" ? 56 : 42,
|
||||
height: list.viewMode === "grid" ? 56 : 42,
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 12,
|
||||
backgroundColor: avatarColor,
|
||||
color: "#fff",
|
||||
@@ -734,13 +835,12 @@ ORDER BY reward_points DESC, score DESC`,
|
||||
<div style={{ minWidth: 0, flex: 1, width: "100%" }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: list.viewMode === "grid" ? 16 : 15,
|
||||
fontSize: 15,
|
||||
fontWeight: 600,
|
||||
color: "var(--ss-text-main)",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
textAlign: list.viewMode === "grid" ? "center" : "left",
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
@@ -751,7 +851,7 @@ ORDER BY reward_points DESC, score DESC`,
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 6,
|
||||
justifyContent: list.viewMode === "grid" ? "center" : "flex-start",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
>
|
||||
{item.score !== undefined && (
|
||||
@@ -782,7 +882,9 @@ ORDER BY reward_points DESC, score DESC`,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user