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

feat: 新增大头像视图并完善多语言文案

Browse Source
This commit is contained in:
JSR
2026-04-18 11:16:44 +08:00
parent b458a10deb
commit e82866bbfc
12 changed files with 414 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardManager.tsx
+122 -4
View File
@@ -18,7 +18,7 @@ import {
import { DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined } from "@ant-design/icons"
import { useTranslation } from "react-i18next"
type BoardStudentViewMode = "list" | "card" | "grid"
type BoardStudentViewMode = "list" | "card" | "grid" | "largeAvatar"
type BoardScoreDisplayMode = "total" | "split"
type SplitDirection = "horizontal" | "vertical"
@@ -68,6 +68,7 @@ interface BoardManagerProps {
interface BoardStudentCardData {
key: string
name: string
avatarUrl?: string
score?: number
addScore?: number
deductScore?: number
@@ -221,7 +222,10 @@ const normalizeBoards = (input: unknown): BoardConfig[] => {
typeof list?.name === "string" && list.name.trim() ? list.name.trim() : "学生列表",
sql: typeof list?.sql === "string" && list.sql.trim() ? list.sql : getDefaultSql(),
viewMode:
list?.viewMode === "list" || list?.viewMode === "card" || list?.viewMode === "grid"
list?.viewMode === "list" ||
list?.viewMode === "card" ||
list?.viewMode === "grid" ||
list?.viewMode === "largeAvatar"
? list.viewMode
: "card",
scoreDisplayMode:
@@ -347,6 +351,11 @@ const toStudentCards = (rows: any[]): BoardStudentCardData[] => {
cards.push({
key: `${name}-${index}`,
name,
avatarUrl:
typeof (data.avatar_url ?? data.avatarUrl ?? data.avatar) === "string" &&
String(data.avatar_url ?? data.avatarUrl ?? data.avatar).trim()
? String(data.avatar_url ?? data.avatarUrl ?? data.avatar).trim()
: undefined,
score: parseNumber(data.score),
addScore,
deductScore,
@@ -851,6 +860,8 @@ ORDER BY reward_points DESC, score DESC`,
gridTemplateColumns:
list.viewMode === "grid"
? "repeat(auto-fill, minmax(102px, 1fr))"
: list.viewMode === "largeAvatar"
? "repeat(auto-fill, minmax(180px, 1fr))"
: list.viewMode === "list"
? "1fr"
: "repeat(auto-fill, minmax(220px, 1fr))",
@@ -897,11 +908,22 @@ ORDER BY reward_points DESC, score DESC`,
: item.answeredCount !== undefined
? { label: t("board.metrics.todayAnswered"), value: item.answeredCount }
: null
const metricValueText = primaryMetric
? primaryMetric.value > 0
? `+${primaryMetric.value}`
: String(primaryMetric.value)
: null
return (
<div
key={item.key}
style={{ ...(list.viewMode === "grid" ? { aspectRatio: "1 / 1" } : null) }}
style={{
...(list.viewMode === "grid"
? { aspectRatio: "1 / 1" }
: list.viewMode === "largeAvatar"
? { aspectRatio: "1.2 / 1" }
: null),
}}
>
<Card
style={{
@@ -917,10 +939,15 @@ ORDER BY reward_points DESC, score DESC`,
padding:
list.viewMode === "grid"
? "8px"
: list.viewMode === "largeAvatar"
? 0
: list.viewMode === "list"
? "10px 12px"
: "12px 14px",
height: list.viewMode === "grid" ? "100%" : undefined,
height:
list.viewMode === "grid" || list.viewMode === "largeAvatar"
? "100%"
: undefined,
},
}}
>
@@ -1006,6 +1033,96 @@ ORDER BY reward_points DESC, score DESC`,
)}
</div>
</div>
) : list.viewMode === "largeAvatar" ? (
<div style={{ position: "relative", width: "100%", height: "100%" }}>
{item.avatarUrl ? (
<img
src={item.avatarUrl}
alt={item.name}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>
) : (
<div
style={{
width: "100%",
height: "100%",
background: `linear-gradient(140deg, ${avatarColor} 0%, ${avatarColor}aa 100%)`,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "rgba(255,255,255,0.95)",
fontWeight: 700,
fontSize: avatarText.length > 1 ? "46px" : "56px",
letterSpacing: "0.02em",
}}
>
{avatarText}
</div>
)}
<div
style={{
position: "absolute",
inset: 0,
background:
"linear-gradient(180deg, rgba(255,255,255,0) 56%, rgba(255,255,255,0.72) 84%, rgba(255,255,255,0.95) 100%)",
pointerEvents: "none",
}}
/>
<div
style={{
position: "absolute",
left: 8,
right: 8,
bottom: 8,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 8,
}}
>
<div
style={{
maxWidth: "65%",
fontWeight: 700,
fontSize: 22,
lineHeight: 1,
color: "#111",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
background: "rgba(255,255,255,0.62)",
border: "1px solid rgba(255,255,255,0.82)",
borderRadius: 8,
padding: "3px 9px",
backdropFilter: "blur(4px)",
}}
>
{item.name}
</div>
{metricValueText !== null && (
<div
style={{
fontWeight: 800,
fontSize: 28,
lineHeight: 1,
color:
primaryMetric && primaryMetric.value >= 0
? "#52c41a"
: "#ff4d4f",
background: "rgba(255,255,255,0.62)",
border: "1px solid rgba(255,255,255,0.82)",
borderRadius: 8,
padding: "2px 9px",
backdropFilter: "blur(4px)",
}}
>
{metricValueText}
</div>
)}
</div>
</div>
) : (
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div
@@ -1407,6 +1524,7 @@ ORDER BY reward_points DESC, score DESC`,
{ value: "list", label: t("board.viewModes.list") },
{ value: "card", label: t("board.viewModes.card") },
{ value: "grid", label: t("board.viewModes.grid") },
{ value: "largeAvatar", label: t("board.viewModes.largeAvatar") },
]}
disabled={!canManage}
/>
src/components/Home.tsx
+266 -1
View File
@@ -56,7 +56,7 @@ interface rewardSetting {
}
type SortType = "alphabet" | "surname" | "group" | "score"
type LayoutType = "grouped" | "squareGrid"
type LayoutType = "grouped" | "squareGrid" | "largeAvatar"
type SearchKeyboardLayout = "t9" | "qwerty26"
const T9_KEY_MAP: Record<string, string> = {
@@ -1749,6 +1749,255 @@ export const Home: React.FC<HomeProps> = ({
)
}
const renderStudentLargeAvatarCard = (student: student, index: number) => {
const avatarText = getDisplayText(student.name)
const avatarColor = getAvatarColor(student.name)
const isQuickActionMode = quickActionStudentId === student.id
const isSelected = selectedStudentIds.includes(student.id)
const displayPoints = getDisplayPoints(student)
const scoreColor = displayPoints > 0 ? "#52c41a" : displayPoints < 0 ? "#ff4d4f" : "#595959"
let rankBadge: string | null = null
if (sortType === "score" && !searchKeyword) {
if (index === 0) rankBadge = "🥇"
else if (index === 1) rankBadge = "🥈"
else if (index === 2) rankBadge = "🥉"
}
return (
<div
key={student.id}
data-student-quick-card="true"
onClick={(e) => {
if (suppressClickRef.current) {
suppressClickRef.current = false
e.preventDefault()
e.stopPropagation()
return
}
openOperation(student, e.currentTarget as HTMLElement)
}}
onMouseDown={(e) => {
if (batchMode) return
if (e.button !== 0) return
startLongPress(student)
}}
onMouseUp={cancelLongPress}
onMouseLeave={cancelLongPress}
onTouchStart={() => {
if (batchMode) return
startLongPress(student)
}}
onTouchEnd={cancelLongPress}
onTouchCancel={cancelLongPress}
onContextMenu={(e) => {
if (batchMode) return
e.preventDefault()
openQuickAction(student)
}}
style={{
cursor: "pointer",
position: "relative",
aspectRatio: "1.2 / 1",
}}
ref={(el) => {
groupedStudents.forEach((group) => {
if (group.key === "all") return
if (firstStudentIdByGroup.get(group.key) === student.id) {
groupRefs.current[group.key] = el
}
})
}}
>
<Card
style={{
width: "100%",
height: "100%",
backgroundColor: "var(--ss-card-bg)",
transition: "all 0.2s cubic-bezier(0.38, 0, 0.24, 1)",
border: isQuickActionMode
? "1px solid var(--ant-color-primary, #1677ff)"
: isSelected
? "1px solid var(--ant-color-primary, #1677ff)"
: "1px solid var(--ss-border-color)",
overflow: "hidden",
borderRadius: "18px",
boxShadow:
isQuickActionMode || isSelected ? "0 8px 18px rgba(22, 119, 255, 0.18)" : undefined,
}}
styles={{ body: { height: "100%", padding: 0 } }}
>
<div style={{ position: "relative", width: "100%", height: "100%" }}>
{student.avatarUrl ? (
<img
src={student.avatarUrl}
alt={student.name}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>
) : (
<div
style={{
width: "100%",
height: "100%",
background: `linear-gradient(140deg, ${avatarColor} 0%, ${avatarColor}aa 100%)`,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "rgba(255,255,255,0.95)",
fontWeight: 700,
fontSize: avatarText.length > 1 ? "46px" : "56px",
letterSpacing: "0.02em",
}}
>
{avatarText}
</div>
)}
<div
style={{
position: "absolute",
inset: 0,
background:
"linear-gradient(180deg, rgba(255,255,255,0) 56%, rgba(255,255,255,0.72) 84%, rgba(255,255,255,0.95) 100%)",
pointerEvents: "none",
}}
/>
{rankBadge && (
<div
style={{
position: "absolute",
top: 8,
right: 10,
fontSize: "24px",
lineHeight: 1,
zIndex: 2,
}}
>
{rankBadge}
</div>
)}
{isSelected && (
<Tag
color="processing"
style={{
position: "absolute",
top: 8,
left: 8,
marginInlineEnd: 0,
zIndex: 2,
backdropFilter: "blur(4px)",
}}
>
{t("home.selected")}
</Tag>
)}
{isQuickActionMode ? (
<div
style={{
position: "absolute",
inset: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "10px",
zIndex: 3,
background: "rgba(0, 0, 0, 0.18)",
}}
>
<Button
type="primary"
size="small"
onClick={(e) => {
e.stopPropagation()
handleQuickAdjust(student, 1)
}}
style={{
minWidth: "52px",
height: "32px",
borderRadius: "16px",
fontWeight: 700,
paddingInline: "10px",
}}
>
+1
</Button>
<Button
danger
size="small"
onClick={(e) => {
e.stopPropagation()
handleQuickAdjust(student, -1)
}}
style={{
minWidth: "52px",
height: "32px",
borderRadius: "16px",
fontWeight: 700,
paddingInline: "10px",
}}
>
-1
</Button>
</div>
) : (
<div
style={{
position: "absolute",
left: 8,
right: 8,
bottom: 8,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: "8px",
zIndex: 2,
}}
>
<div
style={{
maxWidth: "65%",
fontWeight: 700,
fontSize: "22px",
lineHeight: 1,
color: "#111",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
background: "rgba(255,255,255,0.62)",
border: "1px solid rgba(255,255,255,0.82)",
borderRadius: "8px",
padding: "3px 9px",
backdropFilter: "blur(4px)",
}}
>
{student.name}
</div>
<div
style={{
fontWeight: 800,
fontSize: "28px",
lineHeight: 1,
color: scoreColor,
background: "rgba(255,255,255,0.62)",
border: "1px solid rgba(255,255,255,0.82)",
borderRadius: "8px",
padding: "2px 9px",
backdropFilter: "blur(4px)",
}}
>
{displayPoints > 0 ? `+${displayPoints}` : displayPoints}
</div>
</div>
)}
</div>
</Card>
</div>
)
}
const renderGroupedCards = () => {
if (layoutType === "squareGrid") {
return (
@@ -1764,6 +2013,20 @@ export const Home: React.FC<HomeProps> = ({
)
}
if (layoutType === "largeAvatar") {
return (
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
gap: isPortraitMode ? "10px" : "14px",
}}
>
{sortedStudents.map((student, idx) => renderStudentLargeAvatarCard(student, idx))}
</div>
)
}
return groupedStudents.map((group) => (
<div
key={group.key}
@@ -2667,6 +2930,7 @@ export const Home: React.FC<HomeProps> = ({
options={[
{ value: "grouped", label: t("home.layoutBy.grouped") },
{ value: "squareGrid", label: t("home.layoutBy.squareGrid") },
{ value: "largeAvatar", label: t("home.layoutBy.largeAvatar") },
]}
/>
<Button
@@ -2872,6 +3136,7 @@ export const Home: React.FC<HomeProps> = ({
options={[
{ value: "grouped", label: t("home.layoutBy.grouped") },
{ value: "squareGrid", label: t("home.layoutBy.squareGrid") },
{ value: "largeAvatar", label: t("home.layoutBy.largeAvatar") },
]}
/>
<Button
src/i18n/locales/ar-SA.json
+2 -1
View File
@@ -430,7 +430,8 @@
},
"layoutBy": {
"grouped": "قائمة مجمعة",
"squareGrid": "شبكة مربعة"
"squareGrid": "شبكة مربعة",
"largeAvatar": "صورة رمزية كبيرة"
},
"noStudents": "لا توجد بيانات طلاب، يرجى الإضافة في إدارة الطلاب",
"noMatch": "لم يتم العثور على طلاب مطابقين",
src/i18n/locales/de-DE.json
+2 -1
View File
@@ -430,7 +430,8 @@
},
"layoutBy": {
"grouped": "Gruppierte Liste",
"squareGrid": "Quadratisches Raster"
"squareGrid": "Quadratisches Raster",
"largeAvatar": "Großer Avatar"
},
"noStudents": "Keine Schülerdaten vorhanden, bitte in der Schülerverwaltung hinzufügen",
"noMatch": "Keine übereinstimmenden Schüler gefunden",
src/i18n/locales/en-US.json
+4 -2
View File
@@ -423,7 +423,8 @@
},
"layoutBy": {
"grouped": "Grouped List",
"squareGrid": "Square Grid"
"squareGrid": "Square Grid",
"largeAvatar": "Large Avatar"
},
"noStudents": "No student data, please add in Student Management",
"noMatch": "No matching students found",
@@ -686,7 +687,8 @@
"viewModes": {
"list": "List View",
"card": "Card View",
"grid": "Grid View"
"grid": "Grid View",
"largeAvatar": "Large Avatar"
},
"scoreDisplayModes": {
"total": "Show Total Score",
src/i18n/locales/es-ES.json
+2 -1
View File
@@ -430,7 +430,8 @@
},
"layoutBy": {
"grouped": "Lista agrupada",
"squareGrid": "Cuadrícula cuadrada"
"squareGrid": "Cuadrícula cuadrada",
"largeAvatar": "Avatar grande"
},
"noStudents": "Sin datos de estudiantes, por favor añada en gestión de estudiantes",
"noMatch": "Sin estudiantes coincidentes encontrados",
src/i18n/locales/fr-FR.json
+2 -1
View File
@@ -430,7 +430,8 @@
},
"layoutBy": {
"grouped": "Liste groupée",
"squareGrid": "Grille carrée"
"squareGrid": "Grille carrée",
"largeAvatar": "Grand avatar"
},
"noStudents": "Aucune donnée d'élève, veuillez ajouter dans la gestion des élèves",
"noMatch": "Aucun élève correspondant trouvé",
src/i18n/locales/ja-JP.json
+4 -2
View File
@@ -430,7 +430,8 @@
},
"layoutBy": {
"grouped": "グループリスト",
"squareGrid": "正方形グリッド"
"squareGrid": "正方形グリッド",
"largeAvatar": "大型アバター"
},
"noStudents": "生徒データがありません。生徒管理で追加してください",
"noMatch": "一致する生徒が見つかりません",
@@ -693,7 +694,8 @@
"viewModes": {
"list": "リスト表示",
"card": "カード表示",
"grid": "グリッド表示"
"grid": "グリッド表示",
"largeAvatar": "大型アバター表示"
},
"scoreDisplayModes": {
"total": "合計スコアを表示",
src/i18n/locales/ko-KR.json
+2 -1
View File
@@ -430,7 +430,8 @@
},
"layoutBy": {
"grouped": "그룹화된 목록",
"squareGrid": "정사각형 그리드"
"squareGrid": "정사각형 그리드",
"largeAvatar": "대형 아바타"
},
"noStudents": "학생 데이터가 없습니다. 학생 관리에서 추가해 주세요",
"noMatch": "일치하는 학생이 없습니다",
src/i18n/locales/pt-BR.json
+2 -1
View File
@@ -430,7 +430,8 @@
},
"layoutBy": {
"grouped": "Lista agrupada",
"squareGrid": "Grade quadrada"
"squareGrid": "Grade quadrada",
"largeAvatar": "Avatar grande"
},
"noStudents": "Sem dados de alunos, por favor adicione em gerenciamento de alunos",
"noMatch": "Nenhum aluno correspondente encontrado",
src/i18n/locales/ru-RU.json
+2 -1
View File
@@ -430,7 +430,8 @@
},
"layoutBy": {
"grouped": "Группированный список",
"squareGrid": "Квадратная сетка"
"squareGrid": "Квадратная сетка",
"largeAvatar": "Большой аватар"
},
"noStudents": "Нет данных о студентах, пожалуйста, добавьте в управлении студентами",
"noMatch": "Нет совпадающих студентов",
src/i18n/locales/zh-CN.json
+4 -2
View File
@@ -423,7 +423,8 @@
},
"layoutBy": {
"grouped": "分组列表",
"squareGrid": "正方形网格"
"squareGrid": "正方形网格",
"largeAvatar": "大头像"
},
"noStudents": "暂无学生数据，请前往学生管理添加",
"noMatch": "未找到匹配的学生",
@@ -686,7 +687,8 @@
"viewModes": {
"list": "列表视图",
"card": "卡片视图",
"grid": "网格视图"
"grid": "网格视图",
"largeAvatar": "大头像视图"
},
"scoreDisplayModes": {
"total": "显示总分",