(
})
}
}
- }, [isOpen, focusedIndex])
+ }, [focusedIndex, isOpen])
+
+ const displayText = selectedOption ? selectedOption.label : placeholder
return (
<>
- {/* 隐藏的测量元素（用于 fitContent 模式） */}
- {fitContent && (
-
- )}
-
- {/* 触发器 */}
{
if (typeof ref === 'function') {
@@ -274,11 +239,13 @@ const Select = forwardRef(
triggerRef.current = node
}}
className={cn(
- 'inline-flex justify-start w-full h-[36px] mx-2 bg-transparent border-b-2 border-dashed text-[26px] outline-none cursor-pointer',
+ 'inline-flex h-[36px] items-center justify-center border-b-2 border-dashed bg-transparent align-baseline outline-none',
+ 'mx-2 cursor-pointer whitespace-nowrap px-2 text-center text-[#4e402e]',
error ? 'border-red-500' : 'border-[#4e402e]',
- disabled && 'opacity-50 cursor-not-allowed',
+ disabled && 'cursor-not-allowed opacity-50',
className
)}
+ style={fontSize ? { fontSize: `${fontSize}px` } : undefined}
onClick={handleOpen}
role="combobox"
aria-expanded={isOpen}
@@ -286,29 +253,26 @@ const Select = forwardRef(
aria-disabled={disabled}
tabIndex={disabled ? -1 : 0}
>
- {/* */}
- {selectedOption ? selectedOption.label : placeholder}
- {/* */}
- {/*
- ▼
- */}
+ {displayText}
+
- {/* 下拉菜单 - 使用 Portal 渲染到 body */}
{isOpen &&
dropdownPosition &&
createPortal(
0 ? dropdownPosition.width : 'auto'}px`,
+ width: `${dropdownPosition.width}px`,
minWidth: '80px',
- zIndex: zIndex,
+ zIndex,
}}
role="listbox"
>
@@ -322,10 +286,10 @@ const Select = forwardRef(
key={option.value}
data-option-index={index}
className={cn(
- 'px-3 py-2 cursor-pointer text-[1vw] text-[#4e402e] transition-colors text-center whitespace-nowrap',
+ 'cursor-pointer whitespace-nowrap px-3 py-2 text-center text-[1vw] text-[#4e402e] transition-colors',
isSelected && 'bg-[#4e402e]/10 font-medium',
isFocused && !isSelected && 'bg-gray-100',
- isDisabled && 'opacity-50 cursor-not-allowed pointer-events-none'
+ isDisabled && 'pointer-events-none cursor-not-allowed opacity-50'
)}
onClick={() => !isDisabled && handleSelect(option.value)}
role="option"
diff --git a/src/components/select/select.types.ts b/src/components/select/select.types.ts
index 7b079a6..8a86b67 100644
--- a/src/components/select/select.types.ts
+++ b/src/components/select/select.types.ts
@@ -34,4 +34,6 @@ export interface SelectProps {
minWidth?: number
/** 下拉菜单最大宽度（当 fitContent 为 true 时生效） */
maxWidth?: number
+ /** 字体大小（单位：px） */
+ fontSize?: number
}
diff --git a/src/components/video/video.tsx b/src/components/video/video.tsx
index a9d01e6..b48fa50 100644
--- a/src/components/video/video.tsx
+++ b/src/components/video/video.tsx
@@ -70,10 +70,13 @@ const Video = forwardRef(
const [triggeredOnceIds, setTriggeredOnceIds] = useState>(new Set())
// 当前激活的锚点 ID
const [activeAnchorId, setActiveAnchorId] = useState(null)
+ const activeAnchorIdRef = useRef(null)
// 已隐藏的锚点 ID（afterResume: 'hide'）
const [hiddenAnchorIds, setHiddenAnchorIds] = useState>(new Set())
// 已移除的锚点 ID（afterResume: 'remove'）
const [removedAnchorIds, setRemovedAnchorIds] = useState>(new Set())
+ // 已完成的锚点 ID（用户已交互并恢复播放，用于阻止进度条跳过）
+ const [completedAnchorIds, setCompletedAnchorIds] = useState>(new Set())
const isHandlingAnchor = useRef(false)
const [isPlaying, setIsPlaying] = useState(false)
const [isDragging, setIsDragging] = useState(false)
@@ -91,7 +94,61 @@ const Video = forwardRef(
},
}))
- // 初始化视频信息
+ // ─── Helper 函数 ───
+
+ /** 强制暂停视频（含 rAF 兜底，Safari 兼容） */
+ const forcePause = useCallback((video: HTMLVideoElement) => {
+ video.pause()
+ requestAnimationFrame(() => {
+ if (!video.paused) {
+ video.pause()
+ }
+ })
+ }, [])
+
+ /** 锚点是否可被触发（用于 timeUpdate / seek 触发） */
+ const isAnchorTriggerable = useCallback(
+ (anchor: VideoAnchor): boolean => {
+ if (anchor.enabled === false) return false
+ if (removedAnchorIds.has(anchor.id)) return false
+ if (anchor.once && triggeredOnceIds.has(anchor.id)) return false
+ if (hiddenAnchorIds.has(anchor.id)) return false
+ if (completedAnchorIds.has(anchor.id)) return false
+ if (activeAnchorId === anchor.id) return false
+ return true
+ },
+ [removedAnchorIds, triggeredOnceIds, hiddenAnchorIds, completedAnchorIds, activeAnchorId]
+ )
+
+ /** 锚点是否未完成（用于 seek 拦截） */
+ const isAnchorUncompleted = useCallback(
+ (anchor: VideoAnchor): boolean => {
+ if (anchor.enabled === false) return false
+ if (removedAnchorIds.has(anchor.id)) return false
+ if (completedAnchorIds.has(anchor.id)) return false
+ return true
+ },
+ [removedAnchorIds, completedAnchorIds]
+ )
+
+ /** 触发锚点：暂停 + 设置状态 + 回调 */
+ const triggerAnchor = useCallback(
+ (anchor: VideoAnchor, video?: HTMLVideoElement | null) => {
+ if (video) {
+ forcePause(video)
+ }
+ isHandlingAnchor.current = true
+ if (anchor.once) {
+ setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id))
+ }
+ setActiveAnchorId(anchor.id)
+ anchor.onTrigger?.()
+ },
+ [forcePause]
+ )
+
+ // ─── 初始化与生命周期 ───
+
useEffect(() => {
const video = videoRef.current
if (!video) return
@@ -107,7 +164,6 @@ const Video = forwardRef(
setIsVideoReady(true)
}
- // 如果视频已经有尺寸，立即设置为ready
if (video.videoWidth > 0 && video.videoHeight > 0) {
setIsVideoReady(true)
}
@@ -120,6 +176,18 @@ const Video = forwardRef(
}
}, [])
+ // 保持 activeAnchorIdRef 与 state 同步（解决闭包过期问题）
+ useEffect(() => {
+ activeAnchorIdRef.current = activeAnchorId
+ }, [activeAnchorId])
+
+ // 锚点激活时强制暂停视频（兜底保护）
+ useEffect(() => {
+ if (activeAnchorId && videoRef.current && !videoRef.current.paused) {
+ videoRef.current.pause()
+ }
+ }, [activeAnchorId])
+
// 全屏状态监听
useEffect(() => {
const handleFullscreenChange = () => {
@@ -166,6 +234,9 @@ const Video = forwardRef(
return () => {
const afterResume = anchor.afterResume ?? 'hide'
+ // 标记锚点为已完成（防止进度条跳过）
+ setCompletedAnchorIds((prev) => new Set(prev).add(anchor.id))
+
if (afterResume === 'hide') {
setHiddenAnchorIds((prev) => new Set(prev).add(anchor.id))
setActiveAnchorId(null)
@@ -180,238 +251,140 @@ const Video = forwardRef(
}
}, [])
+ // ─── 锚点触发与 seek 逻辑 ───
+
const handleTimeUpdate = (e: React.SyntheticEvent): void => {
- if (onTimeUpdate) {
- onTimeUpdate(e)
- }
+ onTimeUpdate?.(e)
const video = e.currentTarget
- const currentTime = video.currentTime
- setCurrentTime(currentTime)
+ const time = video.currentTime
+ setCurrentTime(time)
if (isHandlingAnchor.current) return
for (const anchor of anchors) {
- // 检查是否启用
- if (anchor.enabled === false) continue
- // 检查是否已移除
- if (removedAnchorIds.has(anchor.id)) continue
- // 检查 once 逻辑
- if (anchor.once && triggeredOnceIds.has(anchor.id)) continue
- // 检查是否已隐藏（隐藏的锚点不再触发）
- if (hiddenAnchorIds.has(anchor.id)) continue
- // keep 模式下，如果当前锚点已激活，跳过（避免重复触发暂停）
- if (activeAnchorId === anchor.id) continue
-
- const timeDiff = currentTime - anchor.time
-
+ if (!isAnchorTriggerable(anchor)) continue
+ const timeDiff = time - anchor.time
if (timeDiff >= 0 && timeDiff < 0.5) {
- console.log(`Anchor triggered: ${anchor.id} at ${anchor.time}s`)
-
- // 暂停视频 - Safari 兼容：确保暂停生效
- video.pause()
- // 双重保险：延迟再次确认暂停
- requestAnimationFrame(() => {
- if (!video.paused) {
- video.pause()
- }
- })
- isHandlingAnchor.current = true
-
- // 标记为已触发（用于 once 逻辑）
- if (anchor.once) {
- setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id))
- }
-
- // 设置当前激活的锚点
- setActiveAnchorId(anchor.id)
-
- // 触发回调（如埋点）
- anchor.onTrigger?.()
-
+ triggerAnchor(anchor, video)
break
}
}
}
- // 检查并触发锚点的辅助函数
+ // 检查并触发锚点（用于 seek 后检测）
const checkAndTriggerAnchors = useCallback(
(targetTime: number) => {
if (!videoRef.current || isHandlingAnchor.current) return
-
for (const anchor of anchors) {
- // 检查是否启用
- if (anchor.enabled === false) continue
- // 检查是否已移除
- if (removedAnchorIds.has(anchor.id)) continue
- // 检查 once 逻辑
- if (anchor.once && triggeredOnceIds.has(anchor.id)) continue
- // 检查是否已隐藏（隐藏的锚点不再触发）
- if (hiddenAnchorIds.has(anchor.id)) continue
- // keep 模式下，如果当前锚点已激活，跳过（避免重复触发暂停）
- if (activeAnchorId === anchor.id) continue
-
- // 检查是否跳过了锚点时间（允许0.5秒的容差）
+ if (!isAnchorTriggerable(anchor)) continue
const timeDiff = targetTime - anchor.time
if (timeDiff >= 0 && timeDiff < 0.5) {
- console.log(
- `Anchor triggered: ${anchor.id} at ${anchor.time}s (seeked to ${targetTime}s)`
- )
-
- // 立即暂停视频（多次确认确保暂停生效）
- if (videoRef.current) {
- videoRef.current.pause()
- // 同步检查并再次暂停（Safari 兼容）
- if (!videoRef.current.paused) {
- videoRef.current.pause()
- }
- // 双重保险：延迟再次确认暂停
- requestAnimationFrame(() => {
- if (videoRef.current && !videoRef.current.paused) {
- videoRef.current.pause()
- }
- })
- // 三重保险：再延迟一次确认
- setTimeout(() => {
- if (videoRef.current && !videoRef.current.paused) {
- videoRef.current.pause()
- }
- }, 50)
- }
- isHandlingAnchor.current = true
-
- // 标记为已触发（用于 once 逻辑）
- if (anchor.once) {
- setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id))
- }
-
- // 设置当前激活的锚点
- setActiveAnchorId(anchor.id)
-
- // 触发回调（如埋点）
- anchor.onTrigger?.()
-
+ triggerAnchor(anchor, videoRef.current)
break
}
}
},
- [anchors, removedAnchorIds, triggeredOnceIds, hiddenAnchorIds, activeAnchorId]
+ [anchors, isAnchorTriggerable, triggerAnchor]
)
- // 查找目标时间之前最近的未触发锚点
- const findNearestAnchorBeforeTime = useCallback(
- (targetTime: number): VideoAnchor | null => {
- let nearestAnchor: VideoAnchor | null = null
- let nearestTime = -1
-
+ // 查找范围内第一个未完成锚点
+ const findFirstUncompletedAnchorInRange = useCallback(
+ (fromTime: number, toTime: number): VideoAnchor | null => {
+ let firstAnchor: VideoAnchor | null = null
+ let firstTime = Infinity
for (const anchor of anchors) {
- // 检查是否启用
- if (anchor.enabled === false) continue
- // 检查是否已移除
- if (removedAnchorIds.has(anchor.id)) continue
- // 检查 once 逻辑
- if (anchor.once && triggeredOnceIds.has(anchor.id)) continue
- // 检查是否已隐藏（隐藏的锚点不再触发）
- if (hiddenAnchorIds.has(anchor.id)) continue
-
- // 锚点时间应该在目标时间之前或等于目标时间
- if (anchor.time <= targetTime && anchor.time > nearestTime) {
- nearestAnchor = anchor
- nearestTime = anchor.time
+ if (!isAnchorUncompleted(anchor)) continue
+ if (anchor.time > fromTime && anchor.time <= toTime && anchor.time < firstTime) {
+ firstAnchor = anchor
+ firstTime = anchor.time
}
}
-
- return nearestAnchor
+ return firstAnchor
},
- [anchors, removedAnchorIds, triggeredOnceIds, hiddenAnchorIds]
+ [anchors, isAnchorUncompleted]
+ )
+
+ // 带锚点拦截的 seek
+ const seekWithAnchorGuard = useCallback(
+ (targetTime: number) => {
+ if (!videoRef.current) return
+ const firstAnchor = findFirstUncompletedAnchorInRange(currentTime, targetTime)
+ const finalTime = firstAnchor ? firstAnchor.time : targetTime
+ if (firstAnchor) {
+ shouldStopAtAnchorRef.current = { time: finalTime, anchorId: firstAnchor.id }
+ videoRef.current.pause()
+ } else {
+ shouldStopAtAnchorRef.current = null
+ }
+ videoRef.current.currentTime = finalTime
+ },
+ [currentTime, findFirstUncompletedAnchorInRange]
)
- // 开始跳转时，如果应该停在锚点处，立即暂停
const handleSeeking = (): void => {
if (!videoRef.current) return
- // 如果设置了应该停在锚点处，立即暂停
if (shouldStopAtAnchorRef.current) {
- videoRef.current.pause()
- // 同步检查并再次暂停（Safari 兼容）
- if (!videoRef.current.paused) {
- videoRef.current.pause()
- }
+ forcePause(videoRef.current)
}
}
- // Seek 时重置隐藏状态（非 once 的锚点可以重新触发），并检查是否跳过了锚点
const handleSeeked = (): void => {
if (!videoRef.current) return
- const currentTime = videoRef.current.currentTime
+ const time = videoRef.current.currentTime
// 如果设置了应该停在锚点处，强制暂停并触发锚点
if (shouldStopAtAnchorRef.current) {
const { time: anchorTime, anchorId } = shouldStopAtAnchorRef.current
- // 检查当前时间是否在锚点附近（允许0.1秒容差）
- if (Math.abs(currentTime - anchorTime) < 0.1) {
- // 强制暂停（多次确认）
- videoRef.current.pause()
- if (!videoRef.current.paused) {
- videoRef.current.pause()
- }
- requestAnimationFrame(() => {
- if (videoRef.current && !videoRef.current.paused) {
- videoRef.current.pause()
- }
- })
-
- // 触发锚点逻辑
+ if (Math.abs(time - anchorTime) < 0.1) {
+ forcePause(videoRef.current)
if (!isHandlingAnchor.current) {
const anchor = anchors.find((a) => a.id === anchorId)
if (anchor) {
- isHandlingAnchor.current = true
-
- // 标记为已触发（用于 once 逻辑）
- if (anchor.once) {
- setTriggeredOnceIds((prev) => new Set(prev).add(anchor.id))
- }
-
- // 设置当前激活的锚点
- setActiveAnchorId(anchor.id)
-
- // 触发回调（如埋点）
- anchor.onTrigger?.()
+ triggerAnchor(anchor)
}
}
-
- // 清除标记
shouldStopAtAnchorRef.current = null
return
}
- // 如果时间不匹配，清除标记
shouldStopAtAnchorRef.current = null
}
- // 清除当前时间之后的隐藏状态（允许重新触发）
+ // 清除当前时间之后的隐藏/完成状态（回退后允许重新触发）
setHiddenAnchorIds((prev) => {
const next = new Set(prev)
for (const id of next) {
const anchor = anchors.find((a) => a.id === id)
- if (anchor && anchor.time > currentTime) {
+ if (anchor && anchor.time > time) {
next.delete(id)
}
}
return next
})
- // 重置锚点处理锁（如果当前没有激活的锚点）
- if (!activeAnchorId) {
+ setCompletedAnchorIds((prev) => {
+ const next = new Set(prev)
+ for (const id of next) {
+ const anchor = anchors.find((a) => a.id === id)
+ if (anchor && anchor.time > time) {
+ next.delete(id)
+ }
+ }
+ return next
+ })
+
+ // 使用 ref 避免闭包过期
+ if (!activeAnchorIdRef.current) {
isHandlingAnchor.current = false
}
- // 检查是否跳过了锚点时间，如果是则触发锚点
- checkAndTriggerAnchors(currentTime)
+ checkAndTriggerAnchors(time)
}
- // 获取当前激活的锚点
+ // ─── 事件处理 ───
+
const activeAnchor = activeAnchorId ? anchors.find((a) => a.id === activeAnchorId) : null
- // 统一处理 onEnded：更新播放状态并透传给外部
const handleEnded: React.VideoHTMLAttributes['onEnded'] = (e) => {
setIsPlaying(false)
props.onEnded?.(e)
@@ -430,55 +403,27 @@ const Video = forwardRef(
const handleSkipClick = (): void => {
if (!videoRef.current) return
- const currentTime = videoRef.current.currentTime
+ const time = videoRef.current.currentTime
const videoDuration = videoRef.current.duration
- // 检查是否有未触发的锚点
- let hasUntriggeredAnchor = false
- for (const anchor of anchors) {
- // 检查是否启用
- if (anchor.enabled === false) continue
- // 检查是否已移除
- if (removedAnchorIds.has(anchor.id)) continue
- // 检查 once 逻辑
- if (anchor.once && triggeredOnceIds.has(anchor.id)) continue
- // 检查是否已隐藏
- if (hiddenAnchorIds.has(anchor.id)) continue
- // 检查锚点时间是否在当前时间和视频结束之间
- if (anchor.time >= currentTime && anchor.time <= videoDuration) {
- hasUntriggeredAnchor = true
- break
- }
+ // 找到第一个可触发的锚点
+ const nextAnchor = anchors.find((anchor) => {
+ if (!isAnchorTriggerable(anchor)) return false
+ return anchor.time >= time && anchor.time <= videoDuration
+ })
+
+ if (nextAnchor) {
+ videoRef.current.currentTime = nextAnchor.time
+ setTimeout(() => {
+ checkAndTriggerAnchors(nextAnchor.time)
+ }, 100)
+ return
}
- // 如果有未触发的锚点，跳转到第一个未触发的锚点时间并触发
- if (hasUntriggeredAnchor) {
- // 找到第一个未触发的锚点
- const nextAnchor = anchors.find((anchor) => {
- if (anchor.enabled === false) return false
- if (removedAnchorIds.has(anchor.id)) return false
- if (anchor.once && triggeredOnceIds.has(anchor.id)) return false
- if (hiddenAnchorIds.has(anchor.id)) return false
- return anchor.time >= currentTime && anchor.time <= videoDuration
- })
-
- if (nextAnchor) {
- // 跳转到锚点时间
- videoRef.current.currentTime = nextAnchor.time
- // 触发锚点（通过 checkAndTriggerAnchors）
- setTimeout(() => {
- checkAndTriggerAnchors(nextAnchor.time)
- }, 100)
- return
- }
- }
-
- // 如果没有未触发的锚点，执行原来的跳过逻辑
+ // 没有未触发的锚点，执行跳过逻辑
videoRef.current.pause()
onSkip?.()
- // 触发与自然结束相同的逻辑
if (props.onEnded) {
- // 调用时不关心事件内容，保持类型兼容
;(props.onEnded as (e: any) => void)({} as any)
}
}
@@ -495,68 +440,27 @@ const Video = forwardRef(
resetControlsTimer()
}
- // 进度条点击/拖拽
+ // 进度条点击
const handleProgressClick = (e: React.MouseEvent) => {
- // 如果正在拖拽，不处理点击事件
if (isDragging) return
+ if (isHandlingAnchor.current) return
+ if (shouldStopAtAnchorRef.current) return
if (!videoRef.current || !progressRef.current) return
const rect = progressRef.current.getBoundingClientRect()
const percent = (e.clientX - rect.left) / rect.width
- const targetTime = percent * duration
-
- // 检查目标时间之前是否有未触发的锚点
- const nearestAnchor = findNearestAnchorBeforeTime(targetTime)
- // 如果找到锚点，且目标时间跳过了锚点（目标时间 > 锚点时间），则停在锚点处
- // 但只有当目标时间在锚点之后超过0.1秒时才停在锚点，避免点击锚点本身时也被拦截
- const shouldStopAtAnchor =
- nearestAnchor && targetTime > nearestAnchor.time && targetTime - nearestAnchor.time > 0.1
- const finalTime = shouldStopAtAnchor ? nearestAnchor!.time : targetTime
-
- // 如果会停在锚点处，设置标记（用于 onSeeking 和 onSeeked 事件）
- if (shouldStopAtAnchor && nearestAnchor) {
- shouldStopAtAnchorRef.current = {
- time: finalTime,
- anchorId: nearestAnchor.id,
- }
- // 立即暂停视频
- videoRef.current.pause()
- } else {
- shouldStopAtAnchorRef.current = null
- }
-
- videoRef.current.currentTime = finalTime
+ seekWithAnchorGuard(percent * duration)
resetControlsTimer()
}
+ // 进度条拖拽开始
const handleProgressMouseDown = (e: React.MouseEvent) => {
e.preventDefault()
+ if (isHandlingAnchor.current) return
setIsDragging(true)
if (!videoRef.current || !progressRef.current) return
const rect = progressRef.current.getBoundingClientRect()
const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
- const targetTime = percent * duration
-
- // 检查目标时间之前是否有未触发的锚点
- const nearestAnchor = findNearestAnchorBeforeTime(targetTime)
- // 如果找到锚点，且目标时间跳过了锚点（目标时间 > 锚点时间），则停在锚点处
- // 但只有当目标时间在锚点之后超过0.1秒时才停在锚点，避免点击锚点本身时也被拦截
- const shouldStopAtAnchor =
- nearestAnchor && targetTime > nearestAnchor.time && targetTime - nearestAnchor.time > 0.1
- const finalTime = shouldStopAtAnchor ? nearestAnchor!.time : targetTime
-
- // 如果会停在锚点处，设置标记（用于 onSeeking 和 onSeeked 事件）
- if (shouldStopAtAnchor && nearestAnchor) {
- shouldStopAtAnchorRef.current = {
- time: finalTime,
- anchorId: nearestAnchor.id,
- }
- // 立即暂停视频
- videoRef.current.pause()
- } else {
- shouldStopAtAnchorRef.current = null
- }
-
- videoRef.current.currentTime = finalTime
+ seekWithAnchorGuard(percent * duration)
}
// 全局鼠标移动和释放事件处理拖拽
@@ -564,37 +468,15 @@ const Video = forwardRef(
if (!isDragging) return
const handleMouseMove = (e: MouseEvent) => {
+ if (isHandlingAnchor.current) return
if (!videoRef.current || !progressRef.current) return
const rect = progressRef.current.getBoundingClientRect()
const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
- const targetTime = percent * duration
-
- // 检查目标时间之前是否有未触发的锚点
- const nearestAnchor = findNearestAnchorBeforeTime(targetTime)
- // 如果找到锚点，且目标时间跳过了锚点（目标时间 > 锚点时间），则停在锚点处
- // 但只有当目标时间在锚点之后超过0.1秒时才停在锚点，避免点击锚点本身时也被拦截
- const shouldStopAtAnchor =
- nearestAnchor && targetTime > nearestAnchor.time && targetTime - nearestAnchor.time > 0.1
- const finalTime = shouldStopAtAnchor ? nearestAnchor!.time : targetTime
-
- // 如果会停在锚点处，设置标记（用于 onSeeking 和 onSeeked 事件）
- if (shouldStopAtAnchor && nearestAnchor) {
- shouldStopAtAnchorRef.current = {
- time: finalTime,
- anchorId: nearestAnchor.id,
- }
- // 立即暂停视频
- videoRef.current.pause()
- } else {
- shouldStopAtAnchorRef.current = null
- }
-
- videoRef.current.currentTime = finalTime
+ seekWithAnchorGuard(percent * duration)
}
const handleMouseUp = () => {
setIsDragging(false)
- // 拖拽结束后，handleSeeked 会自动处理锚点触发
}
document.addEventListener('mousemove', handleMouseMove)
@@ -604,7 +486,7 @@ const Video = forwardRef(
document.removeEventListener('mousemove', handleMouseMove)
document.removeEventListener('mouseup', handleMouseUp)
}
- }, [isDragging, duration, checkAndTriggerAnchors, findNearestAnchorBeforeTime])
+ }, [isDragging, duration, seekWithAnchorGuard])
// 音量控制
const toggleMute = () => {
@@ -822,9 +704,9 @@ const Video = forwardRef(
)}
- {/* 锚点渲染层 - Safari 兼容：直接使用 pointer-events-auto */}
+ {/* 锚点渲染层 */}
{activeAnchor && (
-
+
{activeAnchor.render({
resume: createResume(activeAnchor),
unmute,
diff --git a/src/config/puzzleData.ts b/src/config/puzzleData.ts
index 760997f..02e2b66 100644
--- a/src/config/puzzleData.ts
+++ b/src/config/puzzleData.ts
@@ -377,6 +377,88 @@ export const puzzleDataConfig: Record
> =
route: 'internalization',
},
},
+ maozedong: {
+ 1: {
+ title: '毛泽东与陈独秀合影',
+ detailImage: 'maozedong/details/1',
+ route: 'place1',
+ },
+ 2: {
+ title: '中共一大会址',
+ detailImage: 'maozedong/details/2',
+ route: 'place1',
+ },
+ 3: {
+ title: '中共二大旧址',
+ detailImage: 'maozedong/details/3',
+ route: 'place1',
+ },
+ 4: {
+ title: '《向导》周刊三篇文章',
+ detailImage: 'maozedong/details/4',
+ route: 'place1',
+ },
+ 5: {
+ title: '中共三大会议召开',
+ detailImage: 'maozedong/details/5',
+ route: 'place1',
+ },
+ 6: {
+ title: '《孙中山手书名单》',
+ detailImage: 'maozedong/details/6',
+ route: 'place1',
+ },
+ 7: {
+ title: '《孙文越飞联合宣言》',
+ detailImage: 'maozedong/details/7',
+ route: 'place1',
+ },
+ 8: {
+ title: '毛泽东签发的两份中共四大通知',
+ detailImage: 'maozedong/details/8',
+ route: 'place1',
+ },
+ 9: {
+ title: '中共四大立碑处',
+ detailImage: 'maozedong/details/9',
+ route: 'place1',
+ },
+ 10: {
+ title: '毛泽东中国社会分析',
+ detailImage: 'maozedong/details/10',
+ route: 'place1',
+ },
+ 11: {
+ title: '湖南农民运动考察报告',
+ detailImage: 'maozedong/details/11',
+ route: 'place1',
+ },
+ 12: {
+ title: '少一人的全家福',
+ detailImage: 'maozedong/details/12',
+ route: 'place1',
+ },
+ 13: {
+ title: '筹备方向的定夺',
+ detailImage: 'maozedong/details/13',
+ route: 'place1',
+ },
+ 14: {
+ title: '基层声音的汇聚',
+ detailImage: 'maozedong/details/14',
+ route: 'place1',
+ },
+ 15: {
+ title: '毛泽东思想的确立',
+ detailImage: 'maozedong/details/15',
+ route: 'place1',
+ },
+ 16: {
+ title: '毛泽东思想活的灵魂',
+ detailImage: 'maozedong/details/16',
+ route: 'place1',
+ },
+ },
// 后续可以添加其他故居的数据
// sunzhongshan: { ... },
}
diff --git a/src/hooks/useAudioManager.ts b/src/hooks/useAudioManager.ts
index e13cdca..5dd5271 100644
--- a/src/hooks/useAudioManager.ts
+++ b/src/hooks/useAudioManager.ts
@@ -93,16 +93,34 @@ export function useAudioManager(options?: UseAudioManagerOptions) {
}
audio.currentTime = 0
- // 捕获浏览器因策略或中断导致的 play() 拒绝，避免控制台 Unhandled promise
- audio.play().catch(() => {
- // 可以在这里按需上报或忽略
- })
- emit({
- key,
- currentSrc: src,
- isPlaying: true,
- })
+ // 捕获浏览器因策略或中断导致的 play() 拒绝，避免控制台 Unhandled promise
+ // 只有在 play() 成功后才更新 isPlaying，避免误判导致“以为在播但实际没播”的情况。
+ const playPromise = audio.play()
+ if (playPromise && typeof (playPromise as Promise).then === 'function') {
+ playPromise
+ .then(() => {
+ emit({
+ key,
+ currentSrc: src,
+ isPlaying: true,
+ })
+ })
+ .catch(() => {
+ emit({
+ key,
+ currentSrc: src,
+ isPlaying: false,
+ })
+ })
+ } else {
+ // 理论上现代浏览器 audio.play() 返回 Promise，但这里做保护
+ emit({
+ key,
+ currentSrc: src,
+ isPlaying: true,
+ })
+ }
},
[resolvedMode, resolvedChannelId]
)
diff --git a/src/lib/utils/api-common.ts b/src/lib/utils/api-common.ts
index e48dc28..d6e5fe8 100644
--- a/src/lib/utils/api-common.ts
+++ b/src/lib/utils/api-common.ts
@@ -1,3 +1,5 @@
+import { useUserStore } from '@/store/userStore'
+
// 声明外部依赖（由运行环境提供）
declare const $: any
declare const iscallyb: boolean
@@ -73,6 +75,11 @@ const LESSON_PREFIX = 'hsgrl'
const videoajax: VideoAjax = videoAjax()
videoajax.setHost('/')
+function normalizeLessonId(lessonId: string | number): string {
+ const raw = String(lessonId)
+ return raw.startsWith(`${LESSON_PREFIX}_`) ? raw : `${LESSON_PREFIX}_${raw}`
+}
+
// 设置我的自定义数据(所有的自定义数据都设置在第一个课时ID上，以key来区分不同的类型)
function setLtDefine(key: string | number, value: string): void {
if (iscallyb) {
@@ -131,7 +138,7 @@ export function setUserDefine(
value: string
): void {
const param: UserDefineParam = {
- lessonId: `${LESSON_PREFIX}_${lessonId}`,
+ lessonId: normalizeLessonId(lessonId),
key,
content: value,
}
@@ -144,7 +151,7 @@ function getUserDefineAsyncInternal(
key: string | number
): Promise {
const param: UserDefineParam = {
- lessonId: `${LESSON_PREFIX}_${lessonId}`,
+ lessonId: normalizeLessonId(lessonId),
order: key,
}
@@ -179,7 +186,7 @@ function getUsersDefineAsyncInternal(
key: string | number
): Promise {
const param: UserDefineParam = {
- lessonId: `${LESSON_PREFIX}_${lessonId}`,
+ lessonId: normalizeLessonId(lessonId),
order: key,
}
@@ -221,8 +228,9 @@ export async function getUsersDefine(
// 根据课时顺序号(所处课程的第几课时)更新对应易班平台上的每个环节进度（异步）
export async function setCourseTimeProgress(order: number): Promise {
+ const courseid = useUserStore.getState().courseId
// var courseid = getCookie(lesson+"_course_id");//获取url链接的课程ID
- const courseid = await getLtDefine('10000')
+ // const courseid = await getLtDefine('10000')
console.info(`courseid:${courseid} order:${order}`)
if (iscallyb && courseid !== undefined && courseid !== null && courseid !== '') {
if (order > 0) {
diff --git a/src/main.tsx b/src/main.tsx
index 82d3e87..715d78b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'
-import { useChenyunStore, useHuangyanpeiStore, usePuzzleStore, useClueStore } from './store'
+import { useChenyunStore, useHuangyanpeiStore, usePuzzleStore, useSunzhongshanStore } from './store'
// 在开发模式的移动端启用 vConsole（需先安装 vconsole 依赖）
if (import.meta.env.DEV && typeof window !== 'undefined') {
@@ -42,7 +42,7 @@ const setupGlobalKeyboardShortcuts = () => {
useChenyunStore.getState().resetAll()
useHuangyanpeiStore.getState().resetAll()
usePuzzleStore.getState().resetAll()
- useClueStore.getState().resetAll()
+ useSunzhongshanStore.getState().resetAll()
// 显示成功消息
alert('所有缓存已重置！页面将刷新。')
diff --git a/src/pages/chenyun/home.tsx b/src/pages/chenyun/home.tsx
index 3b5a1ad..d9d9561 100644
--- a/src/pages/chenyun/home.tsx
+++ b/src/pages/chenyun/home.tsx
@@ -3,10 +3,7 @@ import { getBackgroundImage, getStaticImage } from '@/lib/utils'
import { useNavigate, useParams } from 'react-router-dom'
import { Image } from '@/components'
import { getUserDefine } from '@/lib/utils/api-common'
-import { useChenyunStore } from '@/store/chenyunStore'
-
-const CHENYUN_LESSON_ID = 'Cheny_duihua'
-const CHENYUN_KEY = 22
+import { useChenyunStore, CHENYUN_LESSON_ID, CHENYUN_KEY } from '@/store/chenyunStore'
const deserializeVisitedExhibits = (
data: Record | undefined
@@ -28,7 +25,7 @@ const Chenyun = () => {
// starName 固定为 chenyun
const starName = 'chenyun'
- const { lastVisitedPlace } = useChenyunStore()
+ const lastVisitedPlace = useChenyunStore((state) => state.lastVisitedPlace)
useEffect(() => {
;(async () => {
@@ -40,9 +37,8 @@ const Chenyun = () => {
visitedExhibits?: Record
isYinyuanSolved?: boolean
isMimianSolved?: boolean
- lastVisitedPlace?: string | null
+ lastVisitedPlace?: string
}
- console.log(data)
useChenyunStore.setState((prev) => ({
...prev,
@@ -83,7 +79,7 @@ const Chenyun = () => {
navigate(`/${moduleName}/${starName}/${lastVisitedPlace ?? 'place1'}`)}
+ onClick={() => navigate(`/${moduleName}/${starName}/${lastVisitedPlace || 'place1'}`)}
/>
{/* 体悟 */}
{
const [showVideo, setShowVideo] = useState(false)
const [postGuideVisible, setPostGuideVisible] = useState(false)
const [showLetter, setShowLetter] = useState(false)
- const [showLetterVideo, setShowLetterVideo] = useState(false)
const [showStudyGuide, setShowStudyGuide] = useState(false)
const videoRef = useRef(null)
- const letterVideoRef = useRef(null)
- const audioRef = useRef(null)
useEffect(() => {
setVisible(true)
}, [])
- // 组件卸载时清理背景音乐
- useEffect(() => {
- const audio = audioRef.current
- return () => {
- if (audio) {
- audio.pause()
- audio.currentTime = 0
- }
- }
- }, [])
-
// 视频加载完成后自动播放
const handleVideoCanPlay = () => {
if (showVideo && videoRef.current) {
@@ -177,14 +164,6 @@ const ChenyunInternalization = () => {
}
}
- // 信件视频加载完成后自动播放
- const handleLetterVideoCanPlay = () => {
- if (showLetterVideo && letterVideoRef.current) {
- letterVideoRef.current.play().catch((error) => {
- console.warn('信件视频播放失败:', error)
- })
- }
- }
const anchors: VideoAnchor[] = useMemo(
() =>
QUIZ_ANCHORS.map((item) => {
@@ -243,7 +222,7 @@ const ChenyunInternalization = () => {
{
setActiveSuccess(null)
triggerPuzzleAnimation(16)
@@ -357,9 +336,6 @@ const ChenyunInternalization = () => {
onClick={() => navigate(`/${moduleName}/${starName}/home`)}
/>
- {/* 内化结束后的背景音乐 */}
-
-
{showVideo && (
)
diff --git a/src/pages/chenyun/place/place2.tsx b/src/pages/chenyun/place/place2.tsx
index acdd24d..4a33c3c 100644
--- a/src/pages/chenyun/place/place2.tsx
+++ b/src/pages/chenyun/place/place2.tsx
@@ -32,10 +32,6 @@ const ChenyunPlace2 = () => {
const place = 'place2'
const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useChenyunStore()
- useEffect(() => {
- setLastVisitedPlace(place)
- }, [setLastVisitedPlace])
-
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
const visitedExhibits = getVisitedExhibits(place)
const visited = new Set(visitedExhibits)
@@ -75,9 +71,7 @@ const ChenyunPlace2 = () => {
const progressCount = visited.size
const total = 2
const completed = progressCount >= total
- const subtitle = completed
- ? '探索陈云就读过的学校(已完成)'
- : `探索陈云就读过的学校(${progressCount}/${total})`
+ const subtitle = completed ? '已完成' : `${progressCount}/${total}`
const subtitleClassName = completed
? 'text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]'
: undefined
@@ -130,6 +124,7 @@ const ChenyunPlace2 = () => {
src={getStaticImage('chenyun/place2/继续前进2')}
button
onClick={() => {
+ setLastVisitedPlace('place3')
saveChenyunStore()
navigate(`/${moduleName}/${starName}/place3`)
}}
diff --git a/src/pages/chenyun/place/place3.tsx b/src/pages/chenyun/place/place3.tsx
index 8129fe2..6f8fb13 100644
--- a/src/pages/chenyun/place/place3.tsx
+++ b/src/pages/chenyun/place/place3.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
import {
ExhibitOverlay,
Title,
@@ -37,10 +37,6 @@ const ChenyunPlace3 = () => {
const place = 'place3'
const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useChenyunStore()
- useEffect(() => {
- setLastVisitedPlace(place)
- }, [setLastVisitedPlace])
-
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
const visitedExhibits = getVisitedExhibits(place)
const visited = new Set(visitedExhibits)
@@ -75,9 +71,7 @@ const ChenyunPlace3 = () => {
const progressCount = visited.size
const total = 2
const completed = progressCount >= total
- const subtitle = completed
- ? '探索该阶段相关资料(已完成)'
- : `探索该阶段相关资料(${progressCount}/${total})`
+ const subtitle = completed ? '已完成' : `${progressCount}/${total}`
const subtitleClassName = completed
? 'text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]'
: undefined
@@ -130,6 +124,7 @@ const ChenyunPlace3 = () => {
src={getStaticImage('chenyun/place3/继续前进3')}
button
onClick={() => {
+ setLastVisitedPlace('place4')
saveChenyunStore()
navigate(`/${moduleName}/${starName}/place4`)
}}
@@ -138,7 +133,7 @@ const ChenyunPlace3 = () => {
{/* 展品2视频播放遮罩（全屏） */}
{videoVisible && (
-
+
)
diff --git a/src/pages/huangyanpei/place/place2.tsx b/src/pages/huangyanpei/place/place2.tsx
index 6b67dc0..25da973 100644
--- a/src/pages/huangyanpei/place/place2.tsx
+++ b/src/pages/huangyanpei/place/place2.tsx
@@ -4,7 +4,7 @@ import { getBackgroundImage, getPublicPath, getStaticImage } from '@/lib/utils'
import { useNavigate, useParams } from 'react-router-dom'
import { useCursorController } from '@/hooks/useCursorController'
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
-import { useHuangyanpeiStore } from '@/store/huangyanpeiStore'
+import { useHuangyanpeiStore, saveHuangyanpeiStore } from '@/store/huangyanpeiStore'
const starName = 'huangyanpei'
@@ -25,7 +25,7 @@ const HuangyanpeiPlace2 = () => {
// 使用持久化的访问状态
const place = 'place2'
- const { markExhibitVisited, getVisitedExhibits } = useHuangyanpeiStore()
+ const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useHuangyanpeiStore()
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
const visitedExhibits = getVisitedExhibits(place)
@@ -62,9 +62,7 @@ const HuangyanpeiPlace2 = () => {
const progressCount = visited.size
const total = 2
const completed = progressCount >= total
- const subtitle = completed
- ? '探索黄炎培南洋公学(已完成)'
- : `探索黄炎培南洋公学(${progressCount}/${total})`
+ const subtitle = completed ? '已完成' : `${progressCount}/${total}`
const subtitleClassName = completed
? 'text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]'
: undefined
@@ -113,6 +111,8 @@ const HuangyanpeiPlace2 = () => {
src={getStaticImage('components/place/继续前进')}
button
onClick={() => {
+ setLastVisitedPlace('place3')
+ saveHuangyanpeiStore()
navigate(`/${moduleName}/${starName}/place3`)
}}
/>
diff --git a/src/pages/huangyanpei/place/place3.tsx b/src/pages/huangyanpei/place/place3.tsx
index 9c22c15..46b647f 100644
--- a/src/pages/huangyanpei/place/place3.tsx
+++ b/src/pages/huangyanpei/place/place3.tsx
@@ -14,7 +14,7 @@ import { getBackgroundImage, getPublicPath, getStaticImage } from '@/lib/utils'
import { useNavigate, useParams } from 'react-router-dom'
import { useCursorController } from '@/hooks/useCursorController'
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
-import { useHuangyanpeiStore } from '@/store/huangyanpeiStore'
+import { useHuangyanpeiStore, saveHuangyanpeiStore } from '@/store/huangyanpeiStore'
const starName = 'huangyanpei'
const place = 'place3'
@@ -60,7 +60,7 @@ const HuangyanpeiPlace3 = () => {
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(null)
// 使用持久化的访问状态
- const { markExhibitVisited, getVisitedExhibits } = useHuangyanpeiStore()
+ const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useHuangyanpeiStore()
// 从 store 获取已访问的展品
const visitedExhibits = getVisitedExhibits(place)
@@ -239,9 +239,7 @@ const HuangyanpeiPlace3 = () => {
const progressCount = visited.size
const total = 3
const completed = progressCount >= total
- const subtitle = completed
- ? '探索黄炎培川沙小学堂(已完成)'
- : `探索黄炎培川沙小学堂(${progressCount}/${total})`
+ const subtitle = completed ? '已完成' : `${progressCount}/${total}`
const subtitleClassName = completed
? 'text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]'
: undefined
@@ -299,6 +297,8 @@ const HuangyanpeiPlace3 = () => {
src={getStaticImage('components/place/继续前进')}
button
onClick={() => {
+ setLastVisitedPlace('place4')
+ saveHuangyanpeiStore()
navigate(`/${moduleName}/${starName}/place4`)
}}
/>
diff --git a/src/pages/huangyanpei/place/place4.tsx b/src/pages/huangyanpei/place/place4.tsx
index 5f28193..d2c30b8 100644
--- a/src/pages/huangyanpei/place/place4.tsx
+++ b/src/pages/huangyanpei/place/place4.tsx
@@ -15,7 +15,7 @@ import { useNavigate, useParams } from 'react-router-dom'
import type { VideoRef } from '@/components/video'
import { useCursorController } from '@/hooks/useCursorController'
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
-import { useHuangyanpeiStore } from '@/store/huangyanpeiStore'
+import { useHuangyanpeiStore, saveHuangyanpeiStore } from '@/store/huangyanpeiStore'
const starName = 'huangyanpei'
@@ -38,7 +38,7 @@ const HuangyanpeiPlace4 = () => {
// 使用持久化的访问状态
const place = 'place4'
- const { markExhibitVisited, getVisitedExhibits } = useHuangyanpeiStore()
+ const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useHuangyanpeiStore()
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
const visitedExhibits = getVisitedExhibits(place)
@@ -106,9 +106,7 @@ const HuangyanpeiPlace4 = () => {
const progressCount = visited.size
const total = 4
const completed = progressCount >= total
- const subtitle = completed
- ? '探索黄炎培创立职教(已完成)'
- : `探索黄炎培创立职教(${progressCount}/${total})`
+ const subtitle = completed ? '已完成' : `${progressCount}/${total}`
const subtitleClassName = completed
? 'text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]'
: undefined
@@ -180,6 +178,8 @@ const HuangyanpeiPlace4 = () => {
src={getStaticImage('components/place/继续前进')}
button
onClick={() => {
+ setLastVisitedPlace('place5')
+ saveHuangyanpeiStore()
navigate(`/${moduleName}/${starName}/place5`)
}}
/>
@@ -313,7 +313,7 @@ const HuangyanpeiPlace4 = () => {