feat: VNDB Tag Translation zh_CN (#10)

* feat: VNDB Tag Translation zh_CN

* feat(settings): add tag translation settings in multiple languages

Author: pysio2007

src/locales/VndbTag_zh_CN.json

@@ -52,6 +52,10 @@
                 "filter": "Filter NSFW content",
                 "coverReplace": "NSFW cover replace"
             },
+            "tagTranslation": {
+                "title": "TAG Translation",
+                "description": "Enable Chinese translation for game tags"
+            },
             "cardClickMode": {
                 "title": "Card Click Mode",
                 "navigate": "Navigation Mode (Single click to view details)",

src/locales/en_US.json

@@ -52,6 +52,10 @@
                 "filter": "NSFWコンテンツのフィルタリング",
                 "coverReplace": "NSFW表紙の置き換え"
             },
+            "tagTranslation": {
+                "title": "TAG翻訳",
+                "description": "ゲームタグの中国語翻訳を有効にする"
+            },
             "cardClickMode": {
                 "title": "カードクリックモード",
                 "navigate": "ナビゲーションモード（シングルクリックで詳細表示）",

src/locales/ja_JP.json

@@ -52,6 +52,10 @@
                 "filter": "过滤 NSFW 内容",
                 "coverReplace": "NSFW 封面替换"
             },
+            "tagTranslation": {
+                "title": "TAG翻译",
+                "description": "开启后将使用中文翻译显示游戏标签"
+            },
             "cardClickMode": {
                 "title": "卡片点击模式",
                 "navigate": "导航模式（单击跳转详情页）",

src/locales/zh_CN.json

@@ -52,6 +52,10 @@
                 "filter": "過濾NSFW内容",
                 "coverReplace": "模糊NSFW替換"
             },
+            "tagTranslation": {
+                "title": "TAG翻譯",
+                "description": "開啟後將使用中文翻譯顯示遊戲標籤"
+            },
             "cardClickMode": {
                 "title": "卡片點擊模式",
                 "navigate": "導航模式（單擊跳轉詳情頁）",

src/locales/zh_TW.json

@@ -31,6 +31,7 @@ import { Backup } from './Backup';
 import { getGameById } from '@/utils/repository';
 import i18n from '@/utils/i18n';
 import { getGameDisplayName } from '@/utils';
+import { translateTags } from '@/utils/tagTranslation';
 
 
 // Tab面板组件
@@ -70,7 +71,7 @@ const TabPanel = (props: TabPanelProps) => {
 export const Detail: React.FC = () => {
     const id = Number(useLocation().pathname.split('/').pop());
     const { t } = useTranslation();
-    const { setSelectedGameId, selectedGame, fetchGame } = useStore();
+    const { setSelectedGameId, selectedGame, fetchGame, tagTranslation } = useStore();
     const [tabIndex, setTabIndex] = useState(0);
     const [isLoading, setIsLoading] = useState(true); // 添加加载状态
     const [currentId, setCurrentId] = useState<number | null>(null); // 跟踪当前显示的游戏ID
@@ -190,8 +191,8 @@ export const Detail: React.FC = () => {
                         <Box className="mt-2">
                             <Typography variant="subtitle2" fontWeight="bold" gutterBottom component="div">{t('pages.Detail.gameTags')}</Typography>
                             <Stack direction="row" className="flex-wrap gap-1">
-                                {selectedGame.tags?.map(tag => (
-                                    <Chip key={tag} label={tag} size="small" variant="outlined" />
+                                {translateTags(selectedGame.tags || [], tagTranslation).map((tag, index) => (
+                                    <Chip key={`${selectedGame.tags?.[index] || tag}-${index}`} label={tag} size="small" variant="outlined" />
                                 ))}
                             </Stack>
                         </Box>

src/pages/Detail/index.tsx

@@ -277,6 +277,31 @@ const NsfwSettings = () => {
     );
 };
 
+const TagTranslationSettings = () => {
+    const { t } = useTranslation();
+    const { tagTranslation, setTagTranslation } = useStore();
+
+    return (
+        <Box className="mb-6">
+            <Stack direction="row" alignItems="center" className="min-w-60">
+                <Box>
+                    <InputLabel className="font-semibold mb-1">
+                        {t('pages.Settings.tagTranslation.title')}
+                    </InputLabel>
+                    <Typography variant="caption" color="text.secondary">
+                        {t('pages.Settings.tagTranslation.description')}
+                    </Typography>
+                </Box>
+                <Switch
+                    checked={tagTranslation}
+                    onChange={(e) => setTagTranslation(e.target.checked)}
+                    color="primary"
+                />
+            </Stack>
+        </Box>
+    );
+};
+
 const CardClickModeSettings = () => {
     const { t } = useTranslation();
     const { cardClickMode, setCardClickMode, doubleClickLaunch, setDoubleClickLaunch, longPressLaunch, setLongPressLaunch } = useStore();
@@ -745,6 +770,10 @@ export const Settings: React.FC = () => {
                 <LanguageSelect />
                 <Divider sx={{ my: 3 }} />
 
+                {/* TAG翻译设置 */}
+                <TagTranslationSettings />
+                <Divider sx={{ my: 3 }} />
+
                 {/* NSFW设置 */}
                 <NsfwSettings />
                 <Divider sx={{ my: 3 }} />

src/pages/Settings/index.tsx

@@ -131,6 +131,10 @@ export interface AppState {
     longPressLaunch: boolean;
     setLongPressLaunch: (enabled: boolean) => void;
 
+    // TAG翻译功能
+    tagTranslation: boolean;
+    setTagTranslation: (enabled: boolean) => void;
+
     // 更新游戏通关状态
     updateGameClearStatusInStore: (gameId: number, newClearStatus: 1 | 0) => void;
 
@@ -207,6 +211,13 @@ export const useStore = create<AppState>()(
                 setSetting('longPressLaunch', enabled);
             },
 
+            // TAG翻译功能（默认关闭）
+            tagTranslation: false,
+            setTagTranslation: (enabled: boolean) => {
+                set({tagTranslation: enabled});
+                setSetting('tagTranslation', enabled);
+            },
+
             // 优化刷新数据的方法，减少状态更新
             refreshGameData: async (customSortOption?: string, customSortOrder?: 'asc' | 'desc') => {
                 set({loading: true});
@@ -604,12 +615,14 @@ export const useStore = create<AppState>()(
                 const cardClickMode = getSetting('cardClickMode') ?? 'navigate';
                 const doubleClickLaunch = getSetting('doubleClickLaunch') ?? false;
                 const longPressLaunch = getSetting('longPressLaunch') ?? false;
+                const tagTranslation = getSetting('tagTranslation') ?? false;
                 set({
                     nsfwFilter,
                     nsfwCoverReplace,
                     cardClickMode,
                     doubleClickLaunch,
                     longPressLaunch,
+                    tagTranslation,
                 });
 
                 // 然后并行加载其他数据

src/store/index.ts

@@ -38,6 +38,8 @@ interface Settings {
   doubleClickLaunch?: boolean;
   // 新增：长按启动游戏功能
   longPressLaunch?: boolean;
+  // 新增：TAG翻译功能
+  tagTranslation?: boolean;
 }
 
 // 默认设置
@@ -50,6 +52,7 @@ const DEFAULT_SETTINGS: Settings = {
   cardClickMode: 'navigate', // 默认使用导航模式
   doubleClickLaunch: false, // 默认关闭双击启动
   longPressLaunch: false, // 默认关闭长按启动
+  tagTranslation: false, // 默认关闭TAG翻译
 };
 
 // 获取所有游戏数据（增加排序功能）

src/utils/localStorage.ts

@@ -0,0 +1,47 @@
+/**
+ * @file TAG翻译工具
+ * @description 提供VNDB TAG的中文翻译功能
+ * @module src/utils/tagTranslation
+ * @author Pysio<qq593277393@outlook.com>
+ * @copyright AGPL-3.0
+ */
+
+import vndbTagTranslationsRaw from '@/locales/VndbTag_zh_CN.json';
+
+// 过滤掉元数据字段，只保留翻译内容
+const vndbTagTranslations = Object.fromEntries(
+    Object.entries(vndbTagTranslationsRaw).filter(([key]) => !key.startsWith('_'))
+) as Record<string, string>;
+
+/**
+ * 翻译单个TAG
+ * @param tag 原始英文TAG
+ * @returns 翻译后的中文TAG，如果没有找到翻译则返回原TAG
+ */
+export function translateTag(tag: string): string {
+    // 直接从翻译对象中查找翻译
+    const translation = vndbTagTranslations[tag];
+    return translation || tag;
+}
+
+/**
+ * 翻译TAG数组
+ * @param tags 原始英文TAG数组
+ * @param enableTranslation 是否启用翻译，默认为true
+ * @returns 翻译后的TAG数组
+ */
+export function translateTags(tags: string[], enableTranslation: boolean = true): string[] {
+    if (!enableTranslation || !tags) {
+        return tags || [];
+    }
+
+    return tags.map(tag => translateTag(tag));
+}
+
+/**
+ * 获取TAG翻译对象（用于调试或其他用途）
+ * @returns VNDB TAG翻译对象
+ */
+export function getTagTranslations(): Record<string, string> {
+    return vndbTagTranslations;
+}