network-course/shanghai-residences
2
0 Fork 0
forked from zhongyidian/shanghai-residences
Code Pull Requests Activity

更新依赖项及历史人物相关内容资源

Browse Source 
- 更新 package.json 和 package-lock.json 中的依赖项
- 新增/更新陈云、黄炎培、鲁迅、孙中山的音频文件
- 新增场景和组件的图片资源
- 清理未使用的音频和图片文件
- 优化多个组件和页面的实现逻辑
This commit is contained in:
zhongyidian committed 2026-04-20 13:27:18 +08:00
1 parent b1d55b9464
commit e0fa47d21a
629 files changed
+24390 -2991
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/layout/quiz/MatchQuizPanel.tsx
+101 -25
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { cn } from '@/lib/utils'
import type { MatchQuizPanelProps } from './types'
@@ -45,8 +45,17 @@ const MatchQuizPanel = ({
const [selectedLeftId, setSelectedLeftId] = useState<string | null>(null)
const [error, setError] = useState<string>('')
const containerRef = useRef<HTMLDivElement>(null)
const middleRef = useRef<HTMLDivElement>(null)
const leftColRef = useRef<HTMLDivElement>(null)
const rightColRef = useRef<HTMLDivElement>(null)
const leftItemRefs = useRef<Record<string, HTMLDivElement | null>>({})
const rightItemRefs = useRef<Record<string, HTMLDivElement | null>>({})
// 当前错误的连线对，用于做红色高亮+抖动反馈
const [errorPairs, setErrorPairs] = useState<Array<{ leftId: string; rightId: string }>>([])
const [leftCenters, setLeftCenters] = useState<Record<string, number>>({})
const [rightCenters, setRightCenters] = useState<Record<string, number>>({})
const [middleHeight, setMiddleHeight] = useState<number>(300)
const rafIdRef = useRef<number | null>(null)
// 当窗口关闭时，重置状态
useEffect(() => {
@@ -163,17 +172,79 @@ const MatchQuizPanel = ({
return matches.some((m) => m.rightId === rightId)
}
// 获取左项对应的右项ID
const getMatchedRightId = (leftId: string) => {
const match = matches.find((m) => m.leftId === leftId)
return match?.rightId || null
}
const measureCenters = useCallback(() => {
const middleEl = middleRef.current
if (!middleEl) return
// 获取右项对应的左项ID
const getMatchedLeftId = (rightId: string) => {
const match = matches.find((m) => m.rightId === rightId)
return match?.leftId || null
}
const middleRect = middleEl.getBoundingClientRect()
const nextLeft: Record<string, number> = {}
const nextRight: Record<string, number> = {}
// 显式同步中间连线层高度，避免因 flex/stretch/内容换行导致坐标系基准漂移
const leftRect = leftColRef.current?.getBoundingClientRect()
const rightRect = rightColRef.current?.getBoundingClientRect()
const nextMiddleHeight = Math.max(leftRect?.height ?? 0, rightRect?.height ?? 0, 300)
setMiddleHeight(nextMiddleHeight)
for (const item of leftItems) {
const el = leftItemRefs.current[item.id]
if (!el) continue
const rect = el.getBoundingClientRect()
nextLeft[item.id] = rect.top + rect.height / 2 - middleRect.top
}
for (const item of rightItems) {
const el = rightItemRefs.current[item.id]
if (!el) continue
const rect = el.getBoundingClientRect()
nextRight[item.id] = rect.top + rect.height / 2 - middleRect.top
}
setLeftCenters(nextLeft)
setRightCenters(nextRight)
}, [leftItems, rightItems])
const scheduleMeasure = useCallback(() => {
if (rafIdRef.current !== null) {
cancelAnimationFrame(rafIdRef.current)
rafIdRef.current = null
}
// 双 RAF：等待浏览器完成一帧布局/绘制（含 transform/transition/pulse 的本帧生效）
rafIdRef.current = requestAnimationFrame(() => {
rafIdRef.current = requestAnimationFrame(() => {
rafIdRef.current = null
measureCenters()
})
})
}, [measureCenters])
// 首次展示、匹配变化、选中/错误状态变化都会影响位置（含动画/缩放），延后一帧再测
useEffect(() => {
if (!visible) return
scheduleMeasure()
}, [visible, matches.length, errorPairs.length, selectedLeftId, scheduleMeasure])
// 监听尺寸变化（窗口 resize / 容器尺寸变化 / 文本换行）
useEffect(() => {
if (!visible) return
const middleEl = middleRef.current
if (!middleEl) return
const handleResize = () => scheduleMeasure()
window.addEventListener('resize', handleResize)
const ro = new ResizeObserver(() => scheduleMeasure())
ro.observe(middleEl)
if (containerRef.current) ro.observe(containerRef.current)
if (leftColRef.current) ro.observe(leftColRef.current)
if (rightColRef.current) ro.observe(rightColRef.current)
return () => {
window.removeEventListener('resize', handleResize)
if (rafIdRef.current !== null) cancelAnimationFrame(rafIdRef.current)
ro.disconnect()
}
}, [visible, scheduleMeasure])
if (!visible) return null
@@ -199,9 +270,9 @@ const MatchQuizPanel = ({
</div>
{/* 连线区域 */}
<div className="w-full max-w-[1600px] flex flex-col md:flex-row gap-4 md:gap-8 items-start md:items-center justify-center">
<div className="w-full max-w-[1600px] flex flex-col md:flex-row gap-4 md:gap-8 items-start md:items-stretch justify-center">
{/* 左列：日期 */}
<div className="w-full md:w-1/2 flex flex-col gap-3 md:gap-4">
<div ref={leftColRef} className="w-full md:w-1/2 flex flex-col gap-3 md:gap-4">
{leftItems.map((item) => {
const isMatched = isLeftItemMatched(item.id)
const isSelected = selectedLeftId === item.id
@@ -210,6 +281,9 @@ const MatchQuizPanel = ({
return (
<div
key={item.id}
ref={(el) => {
leftItemRefs.current[item.id] = el
}}
className={cn(
'relative px-4 md:px-6 py-3 md:py-4 rounded-xl border-2 transition-all duration-200',
'text-[20px] md:text-[28px] leading-relaxed cursor-pointer',
@@ -221,7 +295,7 @@ const MatchQuizPanel = ({
? 'bg-[#d4a574] text-[#5c3e2e] border-[#f0be75] shadow-lg scale-105'
: isMatched
? 'bg-[#3a3020] text-[#d4c5a9] border-[#8b7355]'
: 'bg-[#d7b888] text-[#5c3e2e] border-[#d4c5a9] hover:bg-gradient-to-r hover:from-[#ddf3e1] hover:to-[#fbdd97] hover:border-[#f0be75]'
: 'bg-[#d7b888] text-[#5c3e2e] border-[#d4c5a9] hover:bg-linear-to-r hover:from-[#ddf3e1] hover:to-[#fbdd97] hover:border-[#f0be75]'
)}
onClick={() => handleLeftItemClick(item.id)}
onTouchStart={(e) => {
@@ -249,7 +323,11 @@ const MatchQuizPanel = ({
</div>
{/* 中间连线区域（移动端隐藏，桌面端显示） */}
<div className="hidden md:block w-16 h-full min-h-[300px] relative flex-shrink-0">
<div
ref={middleRef}
className="hidden md:block w-16 relative shrink-0"
style={{ height: middleHeight }}
>
{/* 绘制连线 */}
<svg className="absolute inset-0 w-full h-full pointer-events-none overflow-visible">
{matches.map((match, index) => {
@@ -257,14 +335,9 @@ const MatchQuizPanel = ({
const rightItem = rightItems.find((item) => item.id === match.rightId)
if (!leftItem || !rightItem) return null
const leftIndex = leftItems.findIndex((item) => item.id === match.leftId)
const rightIndex = rightItems.findIndex((item) => item.id === match.rightId)
// 计算连线起点和终点（基于项目高度和间距）
const itemHeight = 80 // 每个项目的大概高度
const gap = 16 // 项目之间的间距
const startY = leftIndex * (itemHeight + gap) + itemHeight / 2
const endY = rightIndex * (itemHeight + gap) + itemHeight / 2
const startY = leftCenters[match.leftId]
const endY = rightCenters[match.rightId]
if (startY === undefined || endY === undefined) return null
return (
<line
@@ -297,7 +370,7 @@ const MatchQuizPanel = ({
</div>
{/* 右列：事件 */}
<div className="w-full md:w-1/2 flex flex-col gap-3 md:gap-4">
<div ref={rightColRef} className="w-full md:w-1/2 flex flex-col gap-3 md:gap-4">
{rightItems.map((item) => {
const isMatched = isRightItemMatched(item.id)
const isError = errorPairs.some((p) => p.rightId === item.id)
@@ -305,6 +378,9 @@ const MatchQuizPanel = ({
return (
<div
key={item.id}
ref={(el) => {
rightItemRefs.current[item.id] = el
}}
className={cn(
'relative px-4 md:px-6 py-3 md:py-4 rounded-xl border-2 transition-all duration-200',
'text-[20px] md:text-[28px] leading-relaxed',
@@ -319,7 +395,7 @@ const MatchQuizPanel = ({
: isMatched
? 'bg-[#3a3020] text-[#d4c5a9] border-[#8b7355]'
: selectedLeftId
? 'bg-[#d7b888] text-[#5c3e2e] border-[#d4c5a9] hover:bg-gradient-to-r hover:from-[#ddf3e1] hover:to-[#fbdd97] hover:border-[#f0be75]'
? 'bg-[#d7b888] text-[#5c3e2e] border-[#d4c5a9] hover:bg-linear-to-r hover:from-[#ddf3e1] hover:to-[#fbdd97] hover:border-[#f0be75]'
: 'bg-[#d7b888]/60 text-[#5c3e2e]/60 border-[#d4c5a9]/60'
)}
onClick={() => handleRightItemClick(item.id)}