mirror of
https://github.com/SECTL/SecScore.git
synced 2026-07-19 21:14:21 +08:00
看板网格视图对齐主页正方形网格样式
This commit is contained in:
+188
-86
@@ -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,111 +678,213 @@ 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={{
|
||||||
backgroundColor: "var(--ss-card-bg)",
|
...(list.viewMode === "grid" ? { aspectRatio: "1 / 1" } : null),
|
||||||
border: "1px solid var(--ss-border-color)",
|
|
||||||
boxShadow: "0 6px 16px rgba(0, 0, 0, 0.06)",
|
|
||||||
position: "relative",
|
position: "relative",
|
||||||
}}
|
}}
|
||||||
styles={{
|
|
||||||
body: {
|
|
||||||
padding:
|
|
||||||
list.viewMode === "grid" ? "12px" : list.viewMode === "list" ? "10px 12px" : "12px 14px",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{rankBadge && (
|
<Card
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: "-10px",
|
|
||||||
left: "-10px",
|
|
||||||
fontSize: "24px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rankBadge}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
width: "100%",
|
||||||
alignItems: list.viewMode === "grid" ? "flex-start" : "center",
|
height: "100%",
|
||||||
flexDirection: list.viewMode === "grid" ? "column" : "row",
|
backgroundColor: "var(--ss-card-bg)",
|
||||||
gap: 10,
|
border: "1px solid var(--ss-border-color)",
|
||||||
|
boxShadow: "0 6px 16px rgba(0, 0, 0, 0.06)",
|
||||||
|
position: "relative",
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
body: {
|
||||||
|
padding:
|
||||||
|
list.viewMode === "grid"
|
||||||
|
? "8px"
|
||||||
|
: list.viewMode === "list"
|
||||||
|
? "10px 12px"
|
||||||
|
: "12px 14px",
|
||||||
|
height: list.viewMode === "grid" ? "100%" : undefined,
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
{rankBadge && (
|
||||||
style={{
|
|
||||||
width: list.viewMode === "grid" ? 56 : 42,
|
|
||||||
height: list.viewMode === "grid" ? 56 : 42,
|
|
||||||
borderRadius: 12,
|
|
||||||
backgroundColor: avatarColor,
|
|
||||||
color: "#fff",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
fontWeight: 700,
|
|
||||||
boxShadow: `0 4px 10px ${avatarColor}40`,
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{avatarText}
|
|
||||||
</div>
|
|
||||||
<div style={{ minWidth: 0, flex: 1, width: "100%" }}>
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
fontSize: list.viewMode === "grid" ? 16 : 15,
|
position: "absolute",
|
||||||
fontWeight: 600,
|
top: "-10px",
|
||||||
color: "var(--ss-text-main)",
|
left: "-10px",
|
||||||
overflow: "hidden",
|
fontSize: "24px",
|
||||||
textOverflow: "ellipsis",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
textAlign: list.viewMode === "grid" ? "center" : "left",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{item.name}
|
{rankBadge}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
{list.viewMode === "grid" ? (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
marginTop: 4,
|
height: "100%",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexWrap: "wrap",
|
flexDirection: "column",
|
||||||
gap: 6,
|
alignItems: "center",
|
||||||
justifyContent: list.viewMode === "grid" ? "center" : "flex-start",
|
justifyContent: "center",
|
||||||
|
gap: 8,
|
||||||
|
textAlign: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{item.score !== undefined && (
|
<div
|
||||||
<Tag color={item.score >= 0 ? "success" : "error"} style={{ margin: 0 }}>
|
style={{
|
||||||
{t("board.metrics.totalScore")}: {item.score > 0 ? `+${item.score}` : item.score}
|
width: 42,
|
||||||
</Tag>
|
height: 42,
|
||||||
)}
|
borderRadius: 12,
|
||||||
{item.rewardPoints !== undefined && (
|
backgroundColor: avatarColor,
|
||||||
<Tag color="processing" style={{ margin: 0 }}>
|
color: "#fff",
|
||||||
{t("board.metrics.rewardPoints")}: {item.rewardPoints}
|
display: "flex",
|
||||||
</Tag>
|
alignItems: "center",
|
||||||
)}
|
justifyContent: "center",
|
||||||
{item.weekChange !== undefined && (
|
fontWeight: 700,
|
||||||
<Tag color={item.weekChange >= 0 ? "success" : "error"} style={{ margin: 0 }}>
|
fontSize: avatarText.length > 1 ? "14px" : "18px",
|
||||||
{t("board.metrics.weekChange")}: {item.weekChange > 0 ? `+${item.weekChange}` : item.weekChange}
|
boxShadow: `0 4px 10px ${avatarColor}40`,
|
||||||
</Tag>
|
flexShrink: 0,
|
||||||
)}
|
}}
|
||||||
{item.weekDeducted !== undefined && (
|
>
|
||||||
<Tag color="gold" style={{ margin: 0 }}>
|
{avatarText}
|
||||||
{t("board.metrics.weekDeducted")}: {item.weekDeducted}
|
</div>
|
||||||
</Tag>
|
<div
|
||||||
)}
|
style={{
|
||||||
{item.answeredCount !== undefined && (
|
display: "flex",
|
||||||
<Tag color="cyan" style={{ margin: 0 }}>
|
alignItems: "center",
|
||||||
{t("board.metrics.todayAnswered")}: {item.answeredCount}
|
justifyContent: "center",
|
||||||
</Tag>
|
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>
|
||||||
</div>
|
) : (
|
||||||
</div>
|
<div
|
||||||
</Card>
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 42,
|
||||||
|
height: 42,
|
||||||
|
borderRadius: 12,
|
||||||
|
backgroundColor: avatarColor,
|
||||||
|
color: "#fff",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
fontWeight: 700,
|
||||||
|
boxShadow: `0 4px 10px ${avatarColor}40`,
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{avatarText}
|
||||||
|
</div>
|
||||||
|
<div style={{ minWidth: 0, flex: 1, width: "100%" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "var(--ss-text-main)",
|
||||||
|
overflow: "hidden",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginTop: 4,
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
gap: 6,
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.score !== undefined && (
|
||||||
|
<Tag color={item.score >= 0 ? "success" : "error"} style={{ margin: 0 }}>
|
||||||
|
{t("board.metrics.totalScore")}: {item.score > 0 ? `+${item.score}` : item.score}
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
{item.rewardPoints !== undefined && (
|
||||||
|
<Tag color="processing" style={{ margin: 0 }}>
|
||||||
|
{t("board.metrics.rewardPoints")}: {item.rewardPoints}
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
{item.weekChange !== undefined && (
|
||||||
|
<Tag color={item.weekChange >= 0 ? "success" : "error"} style={{ margin: 0 }}>
|
||||||
|
{t("board.metrics.weekChange")}: {item.weekChange > 0 ? `+${item.weekChange}` : item.weekChange}
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
{item.weekDeducted !== undefined && (
|
||||||
|
<Tag color="gold" style={{ margin: 0 }}>
|
||||||
|
{t("board.metrics.weekDeducted")}: {item.weekDeducted}
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
{item.answeredCount !== undefined && (
|
||||||
|
<Tag color="cyan" style={{ margin: 0 }}>
|
||||||
|
{t("board.metrics.todayAnswered")}: {item.answeredCount}
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user