feat:碎片完善
This commit is contained in:
zhongyidian committed
1 parent
ec7e8e2bd2
commit
046501705f
74 files changed
+1602
-172
No files matched your search
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* 拼图碎片数据配置
|
||||
* 存储每个碎片的标题、场景图片等数据
|
||||
*/
|
||||
|
||||
export interface PuzzlePieceData {
|
||||
/** 碎片标题 */
|
||||
title: string;
|
||||
/** 对应的场景图片路径（相对于 puzzle/ 目录） */
|
||||
detailImage: string;
|
||||
// 对应的场景路由
|
||||
route: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 每个故居的拼图碎片数据配置
|
||||
* 格式：{ residence: { pieceId: PuzzlePieceData } }
|
||||
*/
|
||||
export const puzzleDataConfig: Record<
|
||||
string,
|
||||
Record<number, PuzzlePieceData>
|
||||
> = {
|
||||
chenyun: {
|
||||
// 碎片1 - 示例数据，请根据实际情况修改
|
||||
1: {
|
||||
title: "水乡少年·艰率成长",
|
||||
detailImage: "chenyun/details/1",
|
||||
route: "place1",
|
||||
},
|
||||
// 碎片2
|
||||
2: {
|
||||
title: "陈云就读 青浦县乙种商业学校",
|
||||
detailImage: "chenyun/details/2",
|
||||
route: "place2",
|
||||
},
|
||||
// 碎片3
|
||||
3: {
|
||||
title: "陈云就读颜安小学",
|
||||
detailImage: "chenyun/details/3",
|
||||
route: "place2",
|
||||
},
|
||||
// 碎片4
|
||||
4: {
|
||||
title: "陈云在 上海商务印书馆当学徒",
|
||||
detailImage: "chenyun/details/4",
|
||||
route: "place3",
|
||||
},
|
||||
// 碎片5
|
||||
5: {
|
||||
title: "陈云加入中国共产党",
|
||||
detailImage: "chenyun/details/5",
|
||||
route: "place3",
|
||||
},
|
||||
// 碎片6
|
||||
6: {
|
||||
title: "陈云被选为 中央政治局委员、常委",
|
||||
detailImage: "chenyun/details/6",
|
||||
route: "place4",
|
||||
},
|
||||
// 碎片7
|
||||
7: {
|
||||
title: "陈云任 西北财经办事处副主任",
|
||||
detailImage: "chenyun/details/7",
|
||||
route: "place5",
|
||||
},
|
||||
// 碎片8
|
||||
8: {
|
||||
title: "陈云主持 陕甘宁边区财政工作",
|
||||
detailImage: "chenyun/details/8",
|
||||
route: "place5",
|
||||
},
|
||||
// 碎片9
|
||||
9: {
|
||||
title: "恢复时期·经济奠基",
|
||||
detailImage: "chenyun/details/9",
|
||||
route: "place6",
|
||||
},
|
||||
// 碎片10
|
||||
10: {
|
||||
title: "银元之战",
|
||||
detailImage: "chenyun/details/10",
|
||||
route: "place7",
|
||||
},
|
||||
// 碎片11
|
||||
11: {
|
||||
title: '陈云起草的关于发展国民 经济"一五"计划报告的手稿',
|
||||
detailImage: "chenyun/details/11",
|
||||
route: "place8",
|
||||
},
|
||||
// 碎片12
|
||||
12: {
|
||||
title: "陈云赴宝钢考察",
|
||||
detailImage: "chenyun/details/12",
|
||||
route: "place9",
|
||||
},
|
||||
// 碎片13
|
||||
13: {
|
||||
title: "体悟·银元之战",
|
||||
detailImage: "chenyun/details/13",
|
||||
route: "reflection",
|
||||
},
|
||||
// 碎片14
|
||||
14: {
|
||||
title: "体悟·米棉之战",
|
||||
detailImage: "chenyun/details/14",
|
||||
route: "reflection",
|
||||
},
|
||||
// 碎片15
|
||||
15: {
|
||||
title: "陈云经济思想的核心内容",
|
||||
detailImage: "chenyun/details/15",
|
||||
route: "internalization",
|
||||
},
|
||||
// 碎片16
|
||||
16: {
|
||||
title: "陈云精神",
|
||||
detailImage: "chenyun/details/16",
|
||||
route: "internalization",
|
||||
},
|
||||
},
|
||||
// 后续可以添加其他故居的数据
|
||||
// sunzhongshan: { ... },
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取碎片的数据配置
|
||||
* @param residence 故居名称
|
||||
* @param pieceId 碎片ID
|
||||
* @returns 碎片数据，如果不存在则返回默认值
|
||||
*/
|
||||
export const getPuzzlePieceData = (
|
||||
residence: string,
|
||||
pieceId: number
|
||||
): PuzzlePieceData | null => {
|
||||
const residenceConfig = puzzleDataConfig[residence];
|
||||
const pieceData = residenceConfig?.[pieceId];
|
||||
return pieceData || null;
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* 展品与拼图碎片映射配置
|
||||
* 定义每个展品对应解锁的碎片ID
|
||||
*
|
||||
* 格式：{ residence: { exhibitId: pieceId } }
|
||||
* 示例：chenyun: { 1: 1 } 表示陈云故居的展品1对应碎片1
|
||||
*/
|
||||
|
||||
export const puzzleExhibitMapping: Record<
|
||||
string,
|
||||
Record<number, number>
|
||||
> = {
|
||||
chenyun: {
|
||||
// 展品1 对应 碎片1
|
||||
1: 1,
|
||||
// 展品2 对应 碎片2
|
||||
2: 2,
|
||||
// 后续可以继续添加其他展品的映射
|
||||
// 3: 3,
|
||||
// 4: 4,
|
||||
},
|
||||
// 后续可以添加其他故居的映射
|
||||
// sunzhongshan: {
|
||||
// 1: 1,
|
||||
// },
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取展品对应的碎片ID
|
||||
* @param residence 故居名称
|
||||
* @param exhibitId 展品ID
|
||||
* @returns 碎片ID，如果不存在则返回 null
|
||||
*/
|
||||
export const getPuzzlePieceByExhibit = (
|
||||
residence: string,
|
||||
exhibitId: number
|
||||
): number | null => {
|
||||
const residenceMapping = puzzleExhibitMapping[residence];
|
||||
if (!residenceMapping) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return residenceMapping[exhibitId] ?? null;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* 拼图碎片布局配置
|
||||
* 用于手动调整每个碎片的位置和大小
|
||||
*
|
||||
* 格式说明：
|
||||
* - position: { x, y } - 碎片在容器中的位置（百分比或像素）
|
||||
* - size: { width, height } - 碎片的尺寸（百分比或像素）
|
||||
* - 可以使用百分比（如 "50%"）或像素值（如 "200px"）
|
||||
*/
|
||||
|
||||
export interface PuzzlePieceLayout {
|
||||
/** 碎片位置 */
|
||||
position: {
|
||||
x: string; // 例如: "25%" 或 "200px"
|
||||
y: string; // 例如: "30%" 或 "150px"
|
||||
};
|
||||
/** 碎片尺寸 */
|
||||
size: {
|
||||
width: string; // 例如: "20%" 或 "150px"
|
||||
height: string; // 例如: "20%" 或 "150px"
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 每个故居的拼图布局配置
|
||||
* 格式：{ residence: { pieceId: PuzzlePieceLayout } }
|
||||
*/
|
||||
export const puzzleLayoutConfig: Record<
|
||||
string,
|
||||
Record<number, PuzzlePieceLayout>
|
||||
> = {
|
||||
chenyun: {
|
||||
// 碎片1 - 示例配置，请根据实际图片调整
|
||||
1: {
|
||||
position: { x: "0%", y: "0%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片2
|
||||
2: {
|
||||
position: { x: "23.3%", y: "0%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片3
|
||||
3: {
|
||||
position: { x: "39.8%", y: "0%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片4
|
||||
4: {
|
||||
position: { x: "70.8%", y: "0%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片5
|
||||
5: {
|
||||
position: { x: "0%", y: "15%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片6
|
||||
6: {
|
||||
position: { x: "16%", y: "23.2%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片7
|
||||
7: {
|
||||
position: { x: "47.2%", y: "15.2%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片8
|
||||
8: {
|
||||
position: { x: "63.4%", y: "23%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片9
|
||||
9: {
|
||||
position: { x: "0%", y: "47%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片10
|
||||
10: {
|
||||
position: { x: "23.3%", y: "39.1%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片11
|
||||
11: {
|
||||
position: { x: "39.8%", y: "47%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片12
|
||||
12: {
|
||||
position: { x: "70.9%", y: "39.1%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片13
|
||||
13: {
|
||||
position: { x: "0%", y: "63%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片14
|
||||
14: {
|
||||
position: { x: "16%", y: "71%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片15
|
||||
15: {
|
||||
position: { x: "47%", y: "63%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
// 碎片16
|
||||
16: {
|
||||
position: { x: "63.4%", y: "71%" },
|
||||
size: { width: "25%", height: "25%" },
|
||||
},
|
||||
},
|
||||
// 后续可以添加其他故居的配置
|
||||
// sunzhongshan: { ... },
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取碎片的布局配置
|
||||
* @param residence 故居名称
|
||||
* @param pieceId 碎片ID
|
||||
* @returns 布局配置，如果不存在则返回默认值
|
||||
*/
|
||||
export const getPuzzlePieceLayout = (
|
||||
residence: string,
|
||||
pieceId: number
|
||||
): PuzzlePieceLayout => {
|
||||
const residenceConfig = puzzleLayoutConfig[residence];
|
||||
const pieceConfig = residenceConfig?.[pieceId];
|
||||
if (pieceConfig) {
|
||||
return pieceConfig;
|
||||
}
|
||||
// 默认布局（4x4网格）
|
||||
const row = Math.floor((pieceId - 1) / 4);
|
||||
const col = (pieceId - 1) % 4;
|
||||
return {
|
||||
position: {
|
||||
x: `${col * 25}%`,
|
||||
y: `${row * 25}%`,
|
||||
},
|
||||
size: {
|
||||
width: "25%",
|
||||
height: "25%",
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* 拼图碎片与页面路由映射配置
|
||||
* 格式：故居名 -> 碎片ID -> 路由路径（相对于/:moduleName/）
|
||||
*
|
||||
* 示例：
|
||||
* - 碎片1 对应 place1 页面
|
||||
* - 碎片2 对应 place2 页面
|
||||
* - 碎片3 对应 reflection 页面
|
||||
* - 碎片4 对应 internalization 页面
|
||||
*
|
||||
* 注意：路由路径中的 :moduleName 会在使用时替换为实际的 moduleName
|
||||
*/
|
||||
export const puzzleMapping: Record<string, Record<number, string>> = {
|
||||
chenyun: {
|
||||
// 示例：碎片1 对应 place1 页面
|
||||
1: "chenyun/place1",
|
||||
// 后续可以继续添加其他碎片的映射
|
||||
// 2: "chenyun/place2",
|
||||
// 3: "chenyun/reflection",
|
||||
// 4: "chenyun/internalization",
|
||||
},
|
||||
// 后续可以添加其他故居的映射
|
||||
// sunzhongshan: {
|
||||
// 1: "sunzhongshan/place1",
|
||||
// },
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取碎片对应的路由路径
|
||||
* @param residence 故居名称
|
||||
* @param pieceId 碎片ID
|
||||
* @param moduleName 模块名称（用于替换路由中的 :moduleName）
|
||||
* @returns 完整的路由路径，如果不存在则返回 null
|
||||
*/
|
||||
export const getPuzzleRoute = (
|
||||
residence: string,
|
||||
pieceId: number,
|
||||
moduleName: string
|
||||
): string | null => {
|
||||
const residenceMapping = puzzleMapping[residence];
|
||||
if (!residenceMapping) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const route = residenceMapping[pieceId];
|
||||
if (!route) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return `/${moduleName}/${route}`;
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user