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

feat: 更新 ESLint 和 Prettier 配置，增强代码质量管理

Browse Source 
- 在 .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 2026-03-05 13:50:47 +08:00
1 parent 5d00adc1a5
commit 76c67b492e
216 files changed
+12454 -13976
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/layout/quiz/MatchQuizPanel.tsx
+115 -130
View File
@@ -1,6 +1,6 @@
import { useState, useEffect, useRef } from "react";
import { cn } from "@/lib/utils";
import type { MatchQuizPanelProps } from "./types";
import { useState, useEffect, useRef } from 'react'
import { cn } from '@/lib/utils'
import type { MatchQuizPanelProps } from './types'
/**
* 连线题面板组件
@@ -41,153 +41,141 @@ const MatchQuizPanel = ({
onError,
disabled = false,
}: MatchQuizPanelProps) => {
const [matches, setMatches] = useState<Array<{ leftId: string; rightId: string }>>([]);
const [selectedLeftId, setSelectedLeftId] = useState<string | null>(null);
const [error, setError] = useState<string>("");
const containerRef = useRef<HTMLDivElement>(null);
const [matches, setMatches] = useState<Array<{ leftId: string; rightId: string }>>([])
const [selectedLeftId, setSelectedLeftId] = useState<string | null>(null)
const [error, setError] = useState<string>('')
const containerRef = useRef<HTMLDivElement>(null)
// 当前错误的连线对，用于做红色高亮+抖动反馈
const [errorPairs, setErrorPairs] = useState<
Array<{ leftId: string; rightId: string }>
>([]);
const [errorPairs, setErrorPairs] = useState<Array<{ leftId: string; rightId: string }>>([])
// 当窗口关闭时，重置状态
useEffect(() => {
if (!visible) {
setMatches([]);
setErrorPairs([]);
setSelectedLeftId(null);
setError("");
setMatches([])
setErrorPairs([])
setSelectedLeftId(null)
setError('')
}
}, [visible]);
}, [visible])
// 处理左列项点击
const handleLeftItemClick = (leftId: string) => {
if (disabled) return;
if (disabled) return
// 如果已经匹配过，先取消匹配
const existingMatch = matches.find((m) => m.leftId === leftId);
const existingMatch = matches.find((m) => m.leftId === leftId)
if (existingMatch) {
setMatches(matches.filter((m) => m.leftId !== leftId));
setSelectedLeftId(null);
setError("");
return;
setMatches(matches.filter((m) => m.leftId !== leftId))
setSelectedLeftId(null)
setError('')
return
}
// 如果已经选中了另一个左项，取消之前的选中
if (selectedLeftId && selectedLeftId !== leftId) {
setSelectedLeftId(leftId);
setError("");
return;
setSelectedLeftId(leftId)
setError('')
return
}
// 切换选中状态
setSelectedLeftId(selectedLeftId === leftId ? null : leftId);
setError("");
};
setSelectedLeftId(selectedLeftId === leftId ? null : leftId)
setError('')
}
// 处理右列项点击
const handleRightItemClick = (rightId: string) => {
if (disabled) return;
if (disabled) return
// 如果没有选中左项，直接返回
if (!selectedLeftId) return;
if (!selectedLeftId) return
// 如果已经匹配过，先取消匹配
const existingMatch = matches.find((m) => m.rightId === rightId);
const existingMatch = matches.find((m) => m.rightId === rightId)
if (existingMatch) {
setMatches(matches.filter((m) => m.rightId !== rightId));
setSelectedLeftId(null);
setError("");
return;
setMatches(matches.filter((m) => m.rightId !== rightId))
setSelectedLeftId(null)
setError('')
return
}
// 创建新的匹配
const newMatch = { leftId: selectedLeftId, rightId };
const newMatches = [...matches, newMatch];
const newMatch = { leftId: selectedLeftId, rightId }
const newMatches = [...matches, newMatch]
// 每次连线后立即校验当前所有连线是否存在错误
const wrongMatches =
correctMatches?.filter(
() => true
) && // 保证 correctMatches 存在时才校验
correctMatches?.filter(() => true) && // 保证 correctMatches 存在时才校验
newMatches.filter(
(match) =>
!correctMatches?.some(
(cm) => cm.leftId === match.leftId && cm.rightId === match.rightId
)
);
!correctMatches?.some((cm) => cm.leftId === match.leftId && cm.rightId === match.rightId)
)
const hasError = !!wrongMatches && wrongMatches.length > 0;
const hasError = !!wrongMatches && wrongMatches.length > 0
if (hasError && wrongMatches) {
// 记录错误连线对，用于红色高亮+抖动反馈
setErrorPairs(wrongMatches);
setMatches(newMatches);
setSelectedLeftId(null);
setError("");
setErrorPairs(wrongMatches)
setMatches(newMatches)
setSelectedLeftId(null)
setError('')
let errorMsg: string;
if (typeof errorMessage === "function") {
errorMsg = errorMessage(newMatches);
let errorMsg: string
if (typeof errorMessage === 'function') {
errorMsg = errorMessage(newMatches)
} else if (errorMessage) {
errorMsg = errorMessage;
errorMsg = errorMessage
} else {
errorMsg = "连线不正确，请重新尝试！";
errorMsg = '连线不正确，请重新尝试！'
}
setError(errorMsg);
onError?.(errorMsg);
setError(errorMsg)
onError?.(errorMsg)
// 短暂展示错误状态（变红+抖动），随后只清空错误连线，保留已答对的连线
setTimeout(() => {
setMatches((prev) =>
prev.filter(
(m) =>
!wrongMatches.some(
(w) => w.leftId === m.leftId && w.rightId === m.rightId
)
(m) => !wrongMatches.some((w) => w.leftId === m.leftId && w.rightId === m.rightId)
)
);
setErrorPairs([]);
}, 600);
return;
)
setErrorPairs([])
}, 600)
return
}
// 没有错误时，正常记录匹配
setMatches(newMatches);
setSelectedLeftId(null);
setError("");
setMatches(newMatches)
setSelectedLeftId(null)
setError('')
// 如果没有错误且所有项都已连完，则认为答题成功
if (
newMatches.length === leftItems.length &&
newMatches.length === rightItems.length
) {
onSubmit?.(newMatches, true);
if (newMatches.length === leftItems.length && newMatches.length === rightItems.length) {
onSubmit?.(newMatches, true)
}
};
}
// 获取左项是否已匹配
const isLeftItemMatched = (leftId: string) => {
return matches.some((m) => m.leftId === leftId);
};
return matches.some((m) => m.leftId === leftId)
}
// 获取右项是否已匹配
const isRightItemMatched = (rightId: string) => {
return matches.some((m) => m.rightId === rightId);
};
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 match = matches.find((m) => m.leftId === leftId)
return match?.rightId || null
}
// 获取右项对应的左项ID
const getMatchedLeftId = (rightId: string) => {
const match = matches.find((m) => m.rightId === rightId);
return match?.leftId || null;
};
const match = matches.find((m) => m.rightId === rightId)
return match?.leftId || null
}
if (!visible) return null;
if (!visible) return null
return (
<div
@@ -215,35 +203,33 @@ const MatchQuizPanel = ({
{/* 左列：日期 */}
<div 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;
const isError = errorPairs.some((p) => p.leftId === item.id);
const isMatched = isLeftItemMatched(item.id)
const isSelected = selectedLeftId === item.id
const isError = errorPairs.some((p) => p.leftId === item.id)
return (
<div
key={item.id}
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",
"touch-manipulation", // 优化移动端触摸
disabled || isMatched
? "opacity-60 cursor-not-allowed"
: "cursor-pointer",
'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',
'touch-manipulation', // 优化移动端触摸
disabled || isMatched ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer',
isError
? "bg-[#fbe9e9] text-[#b91c1c] border-[#fca5a5] shadow-[0_0_15px_rgba(248,113,113,0.7)] scale-105 animate-pulse"
? 'bg-[#fbe9e9] text-[#b91c1c] border-[#fca5a5] shadow-[0_0_15px_rgba(248,113,113,0.7)] scale-105 animate-pulse'
: isSelected
? "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-[#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]'
)}
onClick={() => handleLeftItemClick(item.id)}
onTouchStart={(e) => {
// 移动端触摸优化
e.currentTarget.classList.add("scale-105");
e.currentTarget.classList.add('scale-105')
}}
onTouchEnd={(e) => {
e.currentTarget.classList.remove("scale-105");
e.currentTarget.classList.remove('scale-105')
}}
>
{item.label}
@@ -258,7 +244,7 @@ const MatchQuizPanel = ({
</div>
)}
</div>
);
)
})}
</div>
@@ -267,18 +253,18 @@ const MatchQuizPanel = ({
{/* 绘制连线 */}
<svg className="absolute inset-0 w-full h-full pointer-events-none overflow-visible">
{matches.map((match, index) => {
const leftItem = leftItems.find((item) => item.id === match.leftId);
const rightItem = rightItems.find((item) => item.id === match.rightId);
if (!leftItem || !rightItem) return null;
const leftItem = leftItems.find((item) => item.id === match.leftId)
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 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 itemHeight = 80 // 每个项目的大概高度
const gap = 16 // 项目之间的间距
const startY = leftIndex * (itemHeight + gap) + itemHeight / 2
const endY = rightIndex * (itemHeight + gap) + itemHeight / 2
return (
<line
@@ -292,7 +278,7 @@ const MatchQuizPanel = ({
strokeDasharray="5,5"
markerEnd="url(#arrowhead)"
/>
);
)
})}
{/* 箭头标记定义 */}
<defs>
@@ -313,37 +299,37 @@ const MatchQuizPanel = ({
{/* 右列：事件 */}
<div 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);
const isMatched = isRightItemMatched(item.id)
const isError = errorPairs.some((p) => p.rightId === item.id)
return (
<div
key={item.id}
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",
"touch-manipulation", // 优化移动端触摸
'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',
'touch-manipulation', // 优化移动端触摸
disabled || isMatched
? "opacity-60 cursor-not-allowed"
? 'opacity-60 cursor-not-allowed'
: selectedLeftId
? "cursor-pointer"
: "cursor-default",
? 'cursor-pointer'
: 'cursor-default',
isError
? "bg-[#fbe9e9] text-[#b91c1c] border-[#fca5a5] shadow-[0_0_15px_rgba(248,113,113,0.7)] scale-105 animate-pulse"
? 'bg-[#fbe9e9] text-[#b91c1c] border-[#fca5a5] shadow-[0_0_15px_rgba(248,113,113,0.7)] scale-105 animate-pulse'
: 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]/60 text-[#5c3e2e]/60 border-[#d4c5a9]/60"
? '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]/60 text-[#5c3e2e]/60 border-[#d4c5a9]/60'
)}
onClick={() => handleRightItemClick(item.id)}
onTouchStart={(e) => {
if (selectedLeftId) {
e.currentTarget.classList.add("scale-105");
e.currentTarget.classList.add('scale-105')
}
}}
onTouchEnd={(e) => {
e.currentTarget.classList.remove("scale-105");
e.currentTarget.classList.remove('scale-105')
}}
>
{item.label}
@@ -358,7 +344,7 @@ const MatchQuizPanel = ({
</div>
)}
</div>
);
)
})}
</div>
</div>
@@ -369,8 +355,7 @@ const MatchQuizPanel = ({
</div>
</div>
</div>
);
};
export default MatchQuizPanel;
)
}
export default MatchQuizPanel