refactor(ui): redesign game card UI with gradient overlay and typography

Author: huoshen80

src/components/Cards/CardItem.tsx

@@ -3,9 +3,9 @@ import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
 import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardActionArea from "@mui/material/CardActionArea";
-import CardMedia from "@mui/material/CardMedia";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
 import { forwardRef, memo } from "react";
 import { useStore } from "@/store/appStore";
 import { getGameCover, getGameNsfwStatus } from "@/utils/game";
@@ -90,26 +90,50 @@ export const CardItem = memo(
 						{...handlers}
 						className={`
 							duration-100
-							hover:shadow-lg hover:scale-105
+							hover:shadow-lg
 							active:shadow-sm active:scale-95
 							${isOverlay ? "shadow-lg scale-105" : ""}
 						`}
 					>
-						<CardMedia
-							component="img"
-							className="h-auto aspect-[3/4] object-cover"
-							image={coverImage}
-							alt="Card Image"
-							draggable="false"
-							loading="lazy"
-						/>
-						<div
-							className={`flex items-center justify-center h-8 px-1 w-full ${isActive ? "font-semibold text-[--mui-palette-primary-main]" : ""}`}
-						>
-							<span className="text-base truncate max-w-full">
-								{displayName}
-							</span>
-						</div>
+						<Box className="relative aspect-[3/4] overflow-hidden">
+							<Box
+								component="img"
+								src={coverImage}
+								alt={displayName}
+								draggable="false"
+								loading="lazy"
+								className="h-full w-full object-cover"
+								sx={{
+									filter: "saturate(0.92) contrast(0.98)",
+								}}
+							/>
+							{/* 未来悬浮文本（例如游玩时间、日期等）的占位符 */}
+							<Box
+								className="absolute inset-x-0 bottom-0 px-2.5 pt-6 pb-1.5"
+								sx={{
+									background:
+										"linear-gradient(to bottom, transparent 0%, rgba(15,23,32,0.3) 50%, rgba(15,23,32,0.85) 100%)",
+									color: "white",
+								}}
+							/>
+						</Box>
+						<Box className="px-3 py-2.5 text-center">
+							<Tooltip title={displayName} placement="top" arrow>
+								<Typography
+									variant="subtitle2"
+									sx={{
+										fontWeight: 700,
+										color: isActive ? "primary.main" : "text.primary",
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap",
+										textAlign: "center",
+									}}
+								>
+									{displayName}
+								</Typography>
+							</Tooltip>
+						</Box>
 					</CardActionArea>
 				</Card>
 			);

src/components/Collection/EntityCard.tsx

@@ -133,7 +133,7 @@ export const EntityCard = memo<EntityCardProps>(
 								position: "absolute",
 								top: 8,
 								right: 8,
-								bgcolor: "background.paper",
+								zIndex: 2,
 								"&:hover": {
 									bgcolor: "error.light",
 									color: "error.contrastText",

src/locales/en-US.json

@@ -208,7 +208,6 @@
 				"selectBtn": "Select File",
 				"title": "Magpie Software Path"
 			},
-			"saveBtn": "Save",
 			"saveError": "Failed to save path settings: {{error}}",
 			"savePath": {
 				"moveBackupWarning": "Backup path saved, but failed to migrate old backups: {{error}}",
@@ -218,8 +217,6 @@
 				"selectBtn": "Select Directory",
 				"title": "Game Save Backup Path"
 			},
-			"saveSuccess": "Path settings saved",
-			"saving": "Saving...",
 			"selectFileError": "Failed to select file: {{error}}",
 			"selectFolderError": "Failed to select directory: {{error}}",
 			"title": "Path Settings"
@@ -604,7 +601,6 @@
 				"reloginRequired": "Bangumi login has expired. Please log in again.",
 				"saveErrorWithDetail": "Failed to save BGM Token: {{error}}",
 				"saveSuccess": "BGM Token saved successfully",
-				"saveToken": "Save",
 				"tokenExpiresAt": "Token expires at: {{date}}",
 				"tokenExpiryUnknown": "Token expiry unknown",
 				"tokenLogin": "Access Token login",
@@ -676,7 +672,6 @@
 				"helperText": "For example: wine, /usr/bin/wine, ~/scripts/run-game.sh",
 				"note": "Note: You need to restart the game for this setting to take effect.",
 				"resetTooltip": "Reset to default (wine)",
-				"saveBtn": "Save",
 				"saveError": "Save failed",
 				"saveSuccess": "Linux launch command saved",
 				"title": "Linux Launch Command"
@@ -702,7 +697,7 @@
 				"title": "NSFW Settings"
 			},
 			"pathSettings": {
-				"note": "Configure paths for game save backups, LE region software, Magpie software, database backups, etc.",
+				"note": "Configure paths for game save backups, database backups, LE region software, Magpie software, etc.",
 				"openModal": "Open Path Settings",
 				"title": "Path Settings"
 			},
@@ -712,7 +707,6 @@
 				"title": "Network Proxy Settings",
 				"url": "Proxy Server Address"
 			},
-			"saveBtn": "Save",
 			"sections": {
 				"about": "About",
 				"aboutDescription": "View version, update status, documentation, and feedback links.",

src/locales/ja-JP.json

@@ -201,7 +201,6 @@
 				"selectBtn": "ファイルを選択",
 				"title": "Magpieソフトウェアパス"
 			},
-			"saveBtn": "保存",
 			"saveError": "パス設定の保存に失敗しました：{{error}}",
 			"savePath": {
 				"moveBackupWarning": "バックアップパスは保存されましたが、古いバックアップの移行に失敗しました：{{error}}",
@@ -211,8 +210,6 @@
 				"selectBtn": "ディレクトリを選択",
 				"title": "ゲームセーブバックアップパス"
 			},
-			"saveSuccess": "パス設定を保存しました",
-			"saving": "保存中...",
 			"selectFileError": "ファイルの選択に失敗しました：{{error}}",
 			"selectFolderError": "ディレクトリの選択に失敗しました：{{error}}",
 			"title": "パス設定"
@@ -591,7 +588,6 @@
 				"reloginRequired": "Bangumi のログインが無効になりました。再度ログインしてください。",
 				"saveErrorWithDetail": "BGM Token の保存に失敗しました: {{error}}",
 				"saveSuccess": "BGM Token の保存が成功しました",
-				"saveToken": "保存",
 				"tokenExpiresAt": "Token 有効期限: {{date}}",
 				"tokenExpiryUnknown": "Token 有効期限不明",
 				"tokenLogin": "Access Token ログイン",
@@ -663,7 +659,6 @@
 				"helperText": "例: wine, /usr/bin/wine, ~/scripts/run-game.sh",
 				"note": "注意: この設定を変更した後は、ゲームを再起動すると有効になります。",
 				"resetTooltip": "デフォルト値 (wine) にリセット",
-				"saveBtn": "保存",
 				"saveError": "保存に失敗しました",
 				"saveSuccess": "Linux 起動コマンドを保存しました",
 				"title": "Linux 起動コマンド"
@@ -689,7 +684,7 @@
 				"title": "NSFWセット"
 			},
 			"pathSettings": {
-				"note": "ゲームセーブバックアップ、LE地域ソフトウェア、Magpieソフトウェア、データベースバックアップなどのパスを設定します",
+				"note": "ゲームセーブバックアップ、データベースバックアップ、LE地域ソフトウェア、Magpieソフトウェアなどのパスを設定します",
 				"openModal": "パス設定を開く",
 				"title": "パス設定"
 			},
@@ -699,7 +694,6 @@
 				"title": "ネットワークプロキシ設定",
 				"url": "プロキシサーバーアドレス"
 			},
-			"saveBtn": "保存",
 			"sections": {
 				"about": "について",
 				"aboutDescription": "バージョン、更新状態、ドキュメント、フィードバックリンクを確認します。",

src/locales/zh-CN.json

@@ -201,7 +201,6 @@
 				"selectBtn": "选择文件",
 				"title": "Magpie软件路径"
 			},
-			"saveBtn": "保存",
 			"saveError": "保存路径设置失败：{{error}}",
 			"savePath": {
 				"moveBackupWarning": "备份路径已保存，但迁移旧备份失败：{{error}}",
@@ -211,8 +210,6 @@
 				"selectBtn": "选择目录",
 				"title": "游戏存档备份路径"
 			},
-			"saveSuccess": "路径设置已保存",
-			"saving": "保存中...",
 			"selectFileError": "选择文件失败：{{error}}",
 			"selectFolderError": "选择目录失败：{{error}}",
 			"title": "路径设置"
@@ -591,7 +588,6 @@
 				"reloginRequired": "Bangumi 登录已失效，请重新登录。",
 				"saveErrorWithDetail": "BGM Token 保存失败: {{error}}",
 				"saveSuccess": "BGM Token 保存成功",
-				"saveToken": "保存",
 				"tokenExpiresAt": "Token 有效期至: {{date}}",
 				"tokenExpiryUnknown": "Token 有效期未知",
 				"tokenLogin": "Access Token 登录",
@@ -663,7 +659,6 @@
 				"helperText": "例如: wine, /usr/bin/wine, ~/scripts/run-game.sh",
 				"note": "注意：更改此设置后，需要重新启动游戏才能生效。",
 				"resetTooltip": "重置为默认值 (wine)",
-				"saveBtn": "保存",
 				"saveError": "保存失败",
 				"saveSuccess": "Linux 启动命令已保存",
 				"title": "Linux 启动命令"
@@ -689,7 +684,7 @@
 				"title": "NSFW 设置"
 			},
 			"pathSettings": {
-				"note": "配置游戏存档备份、LE转区软件、Magpie软件、数据库备份等路径",
+				"note": "配置游戏存档备份、数据库备份、LE转区软件、Magpie软件等路径",
 				"openModal": "打开路径设置",
 				"title": "路径设置"
 			},
@@ -699,7 +694,6 @@
 				"title": "网络代理设置",
 				"url": "代理服务器地址"
 			},
-			"saveBtn": "保存",
 			"sections": {
 				"about": "关于",
 				"aboutDescription": "查看版本、更新状态、文档和反馈入口。",

src/locales/zh-TW.json

@@ -201,7 +201,6 @@
 				"selectBtn": "選擇文件",
 				"title": "Magpie軟體路徑"
 			},
-			"saveBtn": "儲存",
 			"saveError": "儲存路徑設定失敗：{{error}}",
 			"savePath": {
 				"moveBackupWarning": "備份路徑已儲存，但遷移舊備份失敗：{{error}}",
@@ -211,8 +210,6 @@
 				"selectBtn": "選擇目錄",
 				"title": "遊戲存檔備份路徑"
 			},
-			"saveSuccess": "路徑設定已儲存",
-			"saving": "保存中...",
 			"selectFileError": "選擇文件失敗：{{error}}",
 			"selectFolderError": "選擇目錄失敗：{{error}}",
 			"title": "路徑設置"
@@ -591,7 +588,6 @@
 				"reloginRequired": "Bangumi 登入已失效，請重新登入。",
 				"saveErrorWithDetail": "BGM Token 儲存失敗: {{error}}",
 				"saveSuccess": "BGM Token 儲存成功",
-				"saveToken": "儲存",
 				"tokenExpiresAt": "Token 有效期至: {{date}}",
 				"tokenExpiryUnknown": "Token 有效期未知",
 				"tokenLogin": "Access Token 登入",
@@ -663,7 +659,6 @@
 				"helperText": "例如: wine, /usr/bin/wine, ~/scripts/run-game.sh",
 				"note": "注意：變更此設定後，需要重新啟動遊戲才能生效。",
 				"resetTooltip": "重設為預設值 (wine)",
-				"saveBtn": "儲存",
 				"saveError": "儲存失敗",
 				"saveSuccess": "Linux 啟動命令已儲存",
 				"title": "Linux 啟動命令"
@@ -689,7 +684,7 @@
 				"title": "NSFW設定"
 			},
 			"pathSettings": {
-				"note": "配置遊戲存檔備份、LE轉區軟體、Magpie軟體、數據庫備份等路徑",
+				"note": "配置遊戲存檔備份、數據庫備份、LE轉區軟體、Magpie軟體等路徑",
 				"openModal": "打開路徑設置",
 				"title": "路徑設置"
 			},
@@ -699,7 +694,6 @@
 				"title": "網路代理設定",
 				"url": "代理伺服器位址"
 			},
-			"saveBtn": "儲存",
 			"sections": {
 				"about": "關於",
 				"aboutDescription": "查看版本、更新狀態、文件與回饋入口。",