zhongyidianandClaude Opus 4.7
6d40e19346
Commit non-media application and asset changes while leaving audio, video, and environment files out of version control. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
/**
|
|
* 银元之战引导提示组件
|
|
* 包含三个引导提示：前往解决按钮、走势图、走势图大图
|
|
*/
|
|
import { StudyGuideModal } from '@/components'
|
|
import { ExhibitOverlay } from '@/components'
|
|
|
|
export interface YinyuanGuidesProps {
|
|
/** 是否显示引导提示1（前往解决按钮） */
|
|
showGuide1: boolean
|
|
/** 是否显示引导提示2（走势图） */
|
|
showGuide2: boolean
|
|
/** 是否显示引导提示3（走势图大图） */
|
|
showGuide3: boolean
|
|
/** 是否显示走势图大图 */
|
|
showTrendChartDetail: boolean
|
|
/** 引导提示1关闭回调 */
|
|
onGuide1Close: () => void
|
|
/** 引导提示2关闭回调 */
|
|
onGuide2Close: () => void
|
|
/** 引导提示3关闭回调 */
|
|
onGuide3Close: () => void
|
|
/** 走势图大图关闭回调 */
|
|
onTrendChartDetailClose: () => void
|
|
/** 走势图点击回调 */
|
|
onTrendChartClick: () => void
|
|
}
|
|
|
|
/**
|
|
* 银元之战引导提示组件
|
|
* 显示三个引导提示和走势图大图
|
|
*/
|
|
export const YinyuanGuides = ({
|
|
showGuide1,
|
|
showGuide2,
|
|
showGuide3,
|
|
showTrendChartDetail,
|
|
onGuide1Close,
|
|
onGuide2Close,
|
|
onGuide3Close,
|
|
onTrendChartDetailClose,
|
|
onTrendChartClick,
|
|
}: YinyuanGuidesProps) => {
|
|
return (
|
|
<>
|
|
{/* 引导提示1：前往解决按钮出现后 */}
|
|
<StudyGuideModal
|
|
visible={showGuide1}
|
|
onContinue={onGuide1Close}
|
|
verticalAlign="center"
|
|
zIndex={130}
|
|
>
|
|
请跟随指示点击前往解决按钮
|
|
</StudyGuideModal>
|
|
|
|
{/* 引导提示2：走势图出现后 */}
|
|
<StudyGuideModal
|
|
visible={showGuide2}
|
|
onContinue={onGuide2Close}
|
|
verticalAlign="center"
|
|
zIndex={130}
|
|
>
|
|
请点击走势图
|
|
</StudyGuideModal>
|
|
|
|
{/* 引导提示3：走势图大图打开后 */}
|
|
<StudyGuideModal
|
|
visible={showGuide3}
|
|
onContinue={onGuide3Close}
|
|
verticalAlign="center"
|
|
zIndex={10000}
|
|
>
|
|
请点击银元价格走势图
|
|
</StudyGuideModal>
|
|
|
|
{/* 走势图大图展示 - 使用 ExhibitOverlay */}
|
|
<ExhibitOverlay
|
|
visible={showTrendChartDetail}
|
|
src="chenyun/reflection/银元价格走势图"
|
|
description={`以上海为中心，代表“人民币信用”的绿色区域迅速覆盖全市，并向外辐射。`}
|
|
onClick={onTrendChartClick}
|
|
onClose={onTrendChartDetailClose}
|
|
/>
|
|
</>
|
|
)
|
|
}
|