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

feat: 更新包管理器为 bun，优化项目配置和资源管理

Browse Source 
- 将包管理器从 pnpm 更改为 bun，提升依赖管理效率。
- 在 index.html 中引入 jQuery 和 videoajax.js，增强页面功能。
- 删除 pnpm-lock.yaml 文件，清理不必要的锁定文件。
- 在多个组件中优化状态管理和访问逻辑，提升用户体验。
- 更新多个页面和组件以支持新的状态管理方式，确保数据一致性。
This commit is contained in:
zhongyidian committed 2026-02-06 09:28:25 +08:00
1 parent ac5a2159a1
commit 7bbeb10e57
33 files changed
+2291 -4531
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/quiz/drag-fill/drag-fill.tsx
+79 -26
View File
@@ -90,12 +90,12 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
[allowDuplicate, currentValue]
);
// 处理鼠标移动
const handleMouseMove = useCallback(
(e: MouseEvent) => {
// 通用的坐标更新逻辑（鼠标/触摸）
const updateDragPosition = useCallback(
(clientX: number, clientY: number) => {
if (!draggingOption) return;
setDragPosition({ x: e.clientX, y: e.clientY });
setDragPosition({ x: clientX, y: clientY });
// 检测是否悬停在空白区域上
let foundBlank: string | null = null;
@@ -104,10 +104,10 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
blankRefsMap.current.forEach((element, blankId) => {
const rect = element.getBoundingClientRect();
if (
e.clientX >= rect.left &&
e.clientX <= rect.right &&
e.clientY >= rect.top &&
e.clientY <= rect.bottom
clientX >= rect.left &&
clientX <= rect.right &&
clientY >= rect.top &&
clientY <= rect.bottom
) {
foundBlank = blankId;
}
@@ -122,10 +122,10 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
if (element) {
const rect = element.getBoundingClientRect();
if (
e.clientX >= rect.left &&
e.clientX <= rect.right &&
e.clientY >= rect.top &&
e.clientY <= rect.bottom
clientX >= rect.left &&
clientX <= rect.right &&
clientY >= rect.top &&
clientY <= rect.bottom
) {
foundBlank = blank.id;
}
@@ -138,8 +138,28 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
[draggingOption, normalizedBlanks]
);
// 处理鼠标释放
const handleMouseUp = useCallback(() => {
// 处理鼠标移动
const handleMouseMove = useCallback(
(e: MouseEvent) => {
updateDragPosition(e.clientX, e.clientY);
},
[updateDragPosition]
);
// 处理触摸移动
const handleTouchMove = useCallback(
(e: TouchEvent) => {
const touch = e.touches[0];
if (!touch) return;
// 阻止页面滚动，确保拖拽顺滑
e.preventDefault();
updateDragPosition(touch.clientX, touch.clientY);
},
[updateDragPosition]
);
// 处理释放（鼠标/触摸）
const handleRelease = useCallback(() => {
if (!draggingOption) return;
// 如果悬停在空白区域上，执行放置
@@ -212,16 +232,29 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
useEffect(() => {
if (draggingOption) {
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
document.addEventListener("mouseup", handleRelease);
document.addEventListener("touchmove", handleTouchMove, {
passive: false,
});
document.addEventListener("touchend", handleRelease);
document.addEventListener("touchcancel", handleRelease);
return () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
document.removeEventListener("mouseup", handleRelease);
document.removeEventListener("touchmove", handleTouchMove);
document.removeEventListener("touchend", handleRelease);
document.removeEventListener("touchcancel", handleRelease);
};
}
}, [draggingOption, handleMouseMove, handleMouseUp]);
}, [draggingOption, handleMouseMove, handleTouchMove, handleRelease]);
// 处理鼠标按下开始拖拽
const handleMouseDown = (e: React.MouseEvent, optionValue: string) => {
// 开始拖拽（通用）
const startDragging = (
optionValue: string,
clientX: number,
clientY: number,
currentTarget: HTMLElement
) => {
if (disabled) return;
const option = normalizedOptions.find((opt) => opt.value === optionValue);
if (option?.disabled) return;
@@ -230,10 +263,10 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
if (!allowDuplicate && isOptionUsed(optionValue)) return;
// 获取实际的元素（如果有自定义渲染，使用第一个子元素）
const wrapperElement = e.currentTarget as HTMLElement;
const actualElement = (
renderOption ? wrapperElement.firstElementChild : wrapperElement
) as HTMLElement;
const wrapperElement = currentTarget;
const actualElement = renderOption
? (wrapperElement.firstElementChild as HTMLElement)
: wrapperElement;
if (!actualElement) return;
@@ -241,12 +274,26 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
// 记录偏移量和元素尺寸
dragOffsetRef.current = {
x: e.clientX - rect.left,
y: e.clientY - rect.top,
x: clientX - rect.left,
y: clientY - rect.top,
};
setDraggingOption(optionValue);
setDragPosition({ x: e.clientX, y: e.clientY });
setDragPosition({ x: clientX, y: clientY });
};
// 处理鼠标按下开始拖拽
const handleMouseDown = (e: React.MouseEvent, optionValue: string) => {
startDragging(optionValue, e.clientX, e.clientY, e.currentTarget);
};
// 处理触摸开始拖拽
const handleTouchStart = (e: React.TouchEvent, optionValue: string) => {
const touch = e.touches[0];
if (!touch) return;
// 防止滚动干扰
e.preventDefault();
startDragging(optionValue, touch.clientX, touch.clientY, e.currentTarget);
};
// 移除填充
@@ -288,6 +335,7 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
return (
<div
onMouseDown={(e) => handleMouseDown(e, option.value)}
onTouchStart={(e) => handleTouchStart(e, option.value)}
className={cn(
"px-6 py-4 border-2 rounded-lg transition-all select-none",
!disabled &&
@@ -439,6 +487,11 @@ const DragFill = forwardRef<HTMLDivElement, DragFillProps>(
handleMouseDown(e, option.value);
}
}}
onTouchStart={(e) => {
if (!disabled && !option.disabled && !isUsed) {
handleTouchStart(e, option.value);
}
}}
className={cn(
renderOption && "select-none",
!optionClassName && renderOption && "flex-1",