feat: 更新 ESLint 和 Prettier 配置，增强代码质量管理
- 在 .gitignore 中添加 public/audio/* 以忽略音频文件。 - 更新 bun.lock，添加 eslint-config-prettier 和 eslint-plugin-prettier 依赖，确保 ESLint 与 Prettier 的兼容性。 - 修改 eslint.config.ts，整合 Prettier 规则，优化代码风格一致性。 - 在 package.json 中添加 lint:fix 和 format 脚本，简化代码格式化和修复流程。 - 更新 tailwind.config.ts 和其他组件文件，统一代码风格，提升可读性。
This commit is contained in:
zhongyidian committed
1 parent
5d00adc1a5
commit
76c67b492e
216 files changed
+12454
-13976
No files matched your search
@@ -2,33 +2,33 @@
|
||||
* 银元之战主组件
|
||||
* 整合银元之战的所有子组件：文件、线索、题目、引导提示
|
||||
*/
|
||||
import { useEffect } from "react";
|
||||
import { YinyuanFile } from "./YinyuanFile";
|
||||
import { YinyuanClues } from "./YinyuanClues";
|
||||
import { YinyuanQuizzes } from "./YinyuanQuizzes";
|
||||
import { YinyuanGuides } from "./YinyuanGuides";
|
||||
import { useYinyuanState } from "./useYinyuanState";
|
||||
import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
|
||||
import { usePuzzleStore } from "@/store/puzzleStore";
|
||||
import { starName } from "../constants";
|
||||
import type { FileType } from "../shared/types";
|
||||
import type { ClueData } from "../clue/types";
|
||||
import { useEffect } from 'react'
|
||||
import { YinyuanFile } from './YinyuanFile'
|
||||
import { YinyuanClues } from './YinyuanClues'
|
||||
import { YinyuanQuizzes } from './YinyuanQuizzes'
|
||||
import { YinyuanGuides } from './YinyuanGuides'
|
||||
import { useYinyuanState } from './useYinyuanState'
|
||||
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
|
||||
import { usePuzzleStore } from '@/store/puzzleStore'
|
||||
import { starName } from '../constants'
|
||||
import type { FileType } from '../shared/types'
|
||||
import type { ClueData } from '../clue/types'
|
||||
|
||||
export interface YinyuanBattleProps {
|
||||
/** 当前展开的文件 */
|
||||
expandedFile: FileType | null;
|
||||
expandedFile: FileType | null
|
||||
/** 是否所有线索都已查看 */
|
||||
isAllViewed: boolean;
|
||||
isAllViewed: boolean
|
||||
/** 线索状态 */
|
||||
clueStates: Record<string, boolean>;
|
||||
clueStates: Record<string, boolean>
|
||||
/** 米棉之战是否已解决 */
|
||||
isMimianSolved: boolean;
|
||||
isMimianSolved: boolean
|
||||
/** 文件点击回调 */
|
||||
onFileClick: () => void;
|
||||
onFileClick: () => void
|
||||
/** 线索点击回调 */
|
||||
onClueClick: (clue: ClueData, clueKey: string) => void;
|
||||
onClueClick: (clue: ClueData, clueKey: string) => void
|
||||
/** 播放视频回调 */
|
||||
onPlayVideo: (fileType: FileType) => void;
|
||||
onPlayVideo: (fileType: FileType) => void
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -44,21 +44,21 @@ export const YinyuanBattle = ({
|
||||
onClueClick,
|
||||
onPlayVideo,
|
||||
}: YinyuanBattleProps) => {
|
||||
const state = useYinyuanState();
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation();
|
||||
const { isPuzzleUnlocked } = usePuzzleStore();
|
||||
const state = useYinyuanState()
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
const { isPuzzleUnlocked } = usePuzzleStore()
|
||||
|
||||
// 当米棉之战解决后，隐藏银元之战的走势图
|
||||
useEffect(() => {
|
||||
if (isMimianSolved) {
|
||||
state.setShowTrendChartIcon(false);
|
||||
state.setShowTrendChartIcon(false)
|
||||
// 如果 guide2 正在显示，也关闭它
|
||||
if (state.showGuide2) {
|
||||
state.setShowGuide2(false);
|
||||
state.setShowGuide2(false)
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isMimianSolved]);
|
||||
}, [isMimianSolved])
|
||||
|
||||
// 监听"前往解决"按钮出现的条件，显示第一个提示
|
||||
useEffect(() => {
|
||||
@@ -69,15 +69,15 @@ export const YinyuanBattle = ({
|
||||
!state.showNarration2 &&
|
||||
!state.showQuiz2 &&
|
||||
!state.showSuccessAlert &&
|
||||
!state.hasShownGuide1;
|
||||
!state.hasShownGuide1
|
||||
|
||||
if (shouldShowGuide1) {
|
||||
// 延迟一下，确保按钮已经渲染
|
||||
const timer = setTimeout(() => {
|
||||
state.setShowGuide1(true);
|
||||
state.setHasShownGuide1(true);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
state.setShowGuide1(true)
|
||||
state.setHasShownGuide1(true)
|
||||
}, 300)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [
|
||||
isAllViewed,
|
||||
@@ -89,24 +89,21 @@ export const YinyuanBattle = ({
|
||||
state.hasShownGuide1,
|
||||
state.setShowGuide1,
|
||||
state.setHasShownGuide1,
|
||||
]);
|
||||
])
|
||||
|
||||
// 监听走势图图标出现的条件，显示第二个提示
|
||||
// 注意：如果米棉之战已解决，则不显示走势图提示
|
||||
useEffect(() => {
|
||||
const shouldShowGuide2 =
|
||||
state.isYinyuanSolved &&
|
||||
state.showTrendChartIcon &&
|
||||
!state.hasShownGuide2 &&
|
||||
!isMimianSolved; // 米棉之战解决后不再显示提示
|
||||
state.isYinyuanSolved && state.showTrendChartIcon && !state.hasShownGuide2 && !isMimianSolved // 米棉之战解决后不再显示提示
|
||||
|
||||
if (shouldShowGuide2) {
|
||||
// 延迟一下，确保走势图已经渲染
|
||||
const timer = setTimeout(() => {
|
||||
state.setShowGuide2(true);
|
||||
state.setHasShownGuide2(true);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
state.setShowGuide2(true)
|
||||
state.setHasShownGuide2(true)
|
||||
}, 300)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [
|
||||
state.isYinyuanSolved,
|
||||
@@ -115,86 +112,85 @@ export const YinyuanBattle = ({
|
||||
state.setShowGuide2,
|
||||
state.setHasShownGuide2,
|
||||
isMimianSolved,
|
||||
]);
|
||||
])
|
||||
|
||||
// 监听走势图大图打开的条件，显示第三个提示
|
||||
useEffect(() => {
|
||||
const shouldShowGuide3 =
|
||||
state.showTrendChartDetail && !state.hasShownGuide3;
|
||||
const shouldShowGuide3 = state.showTrendChartDetail && !state.hasShownGuide3
|
||||
|
||||
if (shouldShowGuide3) {
|
||||
// 延迟一下，确保大图已经打开
|
||||
const timer = setTimeout(() => {
|
||||
state.setShowGuide3(true);
|
||||
state.setHasShownGuide3(true);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
state.setShowGuide3(true)
|
||||
state.setHasShownGuide3(true)
|
||||
}, 300)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [
|
||||
state.showTrendChartDetail,
|
||||
state.hasShownGuide3,
|
||||
state.setShowGuide3,
|
||||
state.setHasShownGuide3,
|
||||
]);
|
||||
])
|
||||
|
||||
// 处理多选题1提交
|
||||
const handleQuiz1Submit = (values: string[], isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
// 关闭多选题1，显示旁白文字（图2）
|
||||
state.setShowQuiz1(false);
|
||||
state.setShowQuiz1(false)
|
||||
state.setNarration2Text(
|
||||
`六月五日,上海政府抛出十万银元,力图以银元制服银元,使价格回跌。全市举行了"反对银元投机,保障人民生活"的游行和宣传。上海市军委会主任陈毅在全市集会上警告投机奸商"赶快洗手不干,否则勿谓言之不预"。但这两手收效仍微。十万银元被投机商人一吸而空,六月七日银元每元的价格涨到一千八百元人民币。陈云同志判断:"单纯的经济手段已不足以震慑敌人,必须辅以坚定的行政与法律手段。"`
|
||||
);
|
||||
state.setShowNarration2(true);
|
||||
)
|
||||
state.setShowNarration2(true)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 处理旁白2关闭
|
||||
const handleNarration2Close = () => {
|
||||
state.setShowNarration2(false);
|
||||
state.setShowNarration2(false)
|
||||
// 关闭旁白后显示多选题2
|
||||
state.setShowQuiz2(true);
|
||||
};
|
||||
state.setShowQuiz2(true)
|
||||
}
|
||||
|
||||
// 处理多选题2提交
|
||||
const handleQuiz2Submit = (values: string[], isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
// 关闭多选题2，显示成功提示框
|
||||
state.setShowQuiz2(false);
|
||||
state.setShowSuccessAlert(true);
|
||||
state.setShowQuiz2(false)
|
||||
state.setShowSuccessAlert(true)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 处理成功提示框继续
|
||||
const handleSuccessAlertContinue = () => {
|
||||
// 关闭聚光灯、标记银元之战为已解决、显示走势图
|
||||
state.setIsYinyuanSolved(true);
|
||||
state.setShowSuccessAlert(false);
|
||||
state.setIsYinyuanSolved(true)
|
||||
state.setShowSuccessAlert(false)
|
||||
|
||||
// 检查碎片13是否已解锁，如果未解锁则触发动画
|
||||
const pieceId = 13;
|
||||
const pieceId = 13
|
||||
if (!isPuzzleUnlocked(starName, pieceId)) {
|
||||
triggerPuzzleAnimation(pieceId);
|
||||
triggerPuzzleAnimation(pieceId)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 处理走势图点击
|
||||
const handleTrendChartClick = () => {
|
||||
// 关闭第三个提示框
|
||||
state.setShowGuide3(false);
|
||||
state.setShowGuide3(false)
|
||||
// 点击走势图：隐藏文件上的走势图图标，播放米棉之战视频
|
||||
state.setShowTrendChartIcon(false);
|
||||
state.setShowTrendChartDetail(false);
|
||||
state.setShowTrendChartIcon(false)
|
||||
state.setShowTrendChartDetail(false)
|
||||
// 播放米棉之战视频
|
||||
onPlayVideo("mimian");
|
||||
};
|
||||
onPlayVideo('mimian')
|
||||
}
|
||||
|
||||
// 处理走势图大图关闭
|
||||
const handleTrendChartDetailClose = () => {
|
||||
// 关闭第三个提示框
|
||||
state.setShowGuide3(false);
|
||||
state.setShowTrendChartDetail(false);
|
||||
};
|
||||
state.setShowGuide3(false)
|
||||
state.setShowTrendChartDetail(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -210,21 +206,17 @@ export const YinyuanBattle = ({
|
||||
showSuccessAlert={state.showSuccessAlert}
|
||||
onFileClick={onFileClick}
|
||||
onTrendChartClick={() => {
|
||||
state.setShowGuide2(false);
|
||||
state.setShowTrendChartDetail(true);
|
||||
state.setShowGuide2(false)
|
||||
state.setShowTrendChartDetail(true)
|
||||
}}
|
||||
onSolveClick={() => {
|
||||
state.setShowGuide1(false);
|
||||
state.setShowQuiz1(true);
|
||||
state.setShowGuide1(false)
|
||||
state.setShowQuiz1(true)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 线索组件 */}
|
||||
<YinyuanClues
|
||||
expandedFile={expandedFile}
|
||||
clueStates={clueStates}
|
||||
onClueClick={onClueClick}
|
||||
/>
|
||||
<YinyuanClues expandedFile={expandedFile} clueStates={clueStates} onClueClick={onClueClick} />
|
||||
|
||||
{/* 题目组件 */}
|
||||
<YinyuanQuizzes
|
||||
@@ -252,5 +244,5 @@ export const YinyuanBattle = ({
|
||||
onTrendChartClick={handleTrendChartClick}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user