添加图标和球类选择

This commit is contained in:
xianyi
2026-01-13 10:53:30 +08:00
parent bff2763013
commit 5bbbf1a132
25 changed files with 734 additions and 41 deletions

View File

@@ -52,13 +52,55 @@ export default function HomeScreen() {
const loadSports = async () => {
try {
const list = await fetchSports();
setSports(list);
if (list.length > 0) {
setSelectedSportId(list[0].id);
const apiList = await fetchSports();
// 创建8个运动的完整列表
const defaultSports: Sport[] = [
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
];
// 合并API返回的运动和默认列表
const sportsMap = new Map<number, Sport>();
apiList.forEach((sport) => {
sportsMap.set(sport.id, sport);
});
// 补充默认运动到8个
defaultSports.forEach((sport) => {
if (!sportsMap.has(sport.id)) {
sportsMap.set(sport.id, sport);
}
});
const allSports = Array.from(sportsMap.values())
.sort((a, b) => a.id - b.id)
.slice(0, 8);
setSports(allSports);
if (allSports.length > 0) {
setSelectedSportId(allSports[0].id);
}
} catch (e) {
console.error(e);
// API失败时使用默认8个运动
const defaultSports: Sport[] = [
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
];
setSports(defaultSports);
setSelectedSportId(1);
}
};
@@ -76,6 +118,23 @@ export default function HomeScreen() {
};
const currentSport = sports.find((s) => s.id === selectedSportId);
// 获取当前运动的国际化名称
const getSportName = (sport: Sport | undefined): string => {
if (!sport) return t("home.select_sport");
const sportKeyMap: { [key: number]: string } = {
1: "football",
2: "basketball",
3: "tennis",
4: "cricket",
5: "baseball",
6: "badminton",
7: "snooker",
8: "volleyball",
};
const sportKey = sportKeyMap[sport.id] || sport.name.toLowerCase();
return t(`sports.${sportKey}`, { defaultValue: sport.name });
};
const renderHeader = () => (
<View style={styles.filterContainer}>
@@ -98,7 +157,7 @@ export default function HomeScreen() {
>
<IconSymbol name="football-outline" size={18} color={iconColor} />
<ThemedText style={styles.filterText}>
{currentSport ? currentSport.name : t("home.select_sport")}
{getSportName(currentSport)}
</ThemedText>
</TouchableOpacity>
@@ -148,12 +207,25 @@ export default function HomeScreen() {
visible={showSportModal}
onClose={() => setShowSportModal(false)}
title={t("home.select_sport")}
options={sports.map((s) => ({
id: s.id,
label: s.name,
value: s.id,
icon: s.icon, // 添加图标
}))}
options={sports.map((s) => {
const sportKeyMap: { [key: number]: string } = {
1: "football",
2: "basketball",
3: "tennis",
4: "cricket",
5: "baseball",
6: "badminton",
7: "snooker",
8: "volleyball",
};
const sportKey = sportKeyMap[s.id] || s.name.toLowerCase();
return {
id: s.id,
label: s.name, // 保留原始名称用于图标识别
value: s.id,
icon: s.icon,
};
})}
selectedValue={selectedSportId}
onSelect={setSelectedSportId}
/>