Template
feat: 重构页面、路由与业务组件，新增课程演示
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
zhongyidianandClaude Opus 4.8 committed
1 parent
d3ae0a8ca7
commit
7b326ee025
29 files changed
+2005
-57
No files matched your search
@@ -0,0 +1,405 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
DragDropProvider,
|
||||
type DragDropProviderProps,
|
||||
Draggable,
|
||||
Droppable,
|
||||
} from "@/components/course-interactions/drag-drop";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/cn";
|
||||
import { useScale } from "@/utils";
|
||||
import type {
|
||||
DragDemoItem,
|
||||
DragDemoZone,
|
||||
DragDropDemoResult,
|
||||
} from "./DragDropDemo.types";
|
||||
|
||||
const dragItems = [
|
||||
{
|
||||
id: "apple",
|
||||
label: "苹果",
|
||||
description: "富含维生素的水果",
|
||||
icon: "🍎",
|
||||
tone: "rose",
|
||||
targetZoneId: "fruit-zone",
|
||||
},
|
||||
{
|
||||
id: "banana",
|
||||
label: "香蕉",
|
||||
description: "常见的热带水果",
|
||||
icon: "🍌",
|
||||
tone: "lime",
|
||||
targetZoneId: "fruit-zone",
|
||||
},
|
||||
{
|
||||
id: "car",
|
||||
label: "汽车",
|
||||
description: "陆地出行工具",
|
||||
icon: "🚗",
|
||||
tone: "blue",
|
||||
targetZoneId: "traffic-zone",
|
||||
},
|
||||
{
|
||||
id: "bike",
|
||||
label: "自行车",
|
||||
description: "绿色低碳出行工具",
|
||||
icon: "🚲",
|
||||
tone: "cyan",
|
||||
targetZoneId: "traffic-zone",
|
||||
},
|
||||
{
|
||||
id: "book",
|
||||
label: "书本",
|
||||
description: "阅读和学习资料",
|
||||
icon: "📘",
|
||||
tone: "amber",
|
||||
targetZoneId: "study-zone",
|
||||
},
|
||||
{
|
||||
id: "pencil",
|
||||
label: "铅笔",
|
||||
description: "书写和绘画工具",
|
||||
icon: "✏️",
|
||||
tone: "indigo",
|
||||
targetZoneId: "study-zone",
|
||||
},
|
||||
] satisfies DragDemoItem[];
|
||||
|
||||
const dropZones = [
|
||||
{
|
||||
id: "fruit-zone",
|
||||
title: "水果类",
|
||||
description: "把可以食用的水果放到这里",
|
||||
icon: "🍓",
|
||||
tone: "emerald",
|
||||
},
|
||||
{
|
||||
id: "traffic-zone",
|
||||
title: "交通工具",
|
||||
description: "把出行相关物品放到这里",
|
||||
icon: "🚌",
|
||||
tone: "sky",
|
||||
},
|
||||
{
|
||||
id: "study-zone",
|
||||
title: "学习用品",
|
||||
description: "把学习和书写用品放到这里",
|
||||
icon: "🎒",
|
||||
tone: "violet",
|
||||
},
|
||||
] satisfies DragDemoZone[];
|
||||
|
||||
const dragItemClassNames = {
|
||||
rose: "border-rose-200 bg-rose-50 text-rose-700 shadow-rose-100",
|
||||
blue: "border-blue-200 bg-blue-50 text-blue-700 shadow-blue-100",
|
||||
amber: "border-amber-200 bg-amber-50 text-amber-700 shadow-amber-100",
|
||||
lime: "border-lime-200 bg-lime-50 text-lime-700 shadow-lime-100",
|
||||
cyan: "border-cyan-200 bg-cyan-50 text-cyan-700 shadow-cyan-100",
|
||||
indigo: "border-indigo-200 bg-indigo-50 text-indigo-700 shadow-indigo-100",
|
||||
};
|
||||
|
||||
const zoneIconClassNames = {
|
||||
emerald: "bg-emerald-100 text-emerald-600",
|
||||
sky: "bg-sky-100 text-sky-600",
|
||||
violet: "bg-violet-100 text-violet-600",
|
||||
};
|
||||
|
||||
const zoneOverClassNames = {
|
||||
emerald:
|
||||
"border-emerald-400 bg-emerald-50 shadow-[0_0_0_6px_rgba(16,185,129,0.10),0_18px_45px_rgba(16,185,129,0.16)]",
|
||||
sky: "border-sky-400 bg-sky-50 shadow-[0_0_0_6px_rgba(14,165,233,0.10),0_18px_45px_rgba(14,165,233,0.16)]",
|
||||
violet:
|
||||
"border-violet-400 bg-violet-50 shadow-[0_0_0_6px_rgba(139,92,246,0.10),0_18px_45px_rgba(139,92,246,0.16)]",
|
||||
};
|
||||
|
||||
const findDragItem = (itemId: string) =>
|
||||
dragItems.find((item) => item.id === itemId);
|
||||
|
||||
const getZoneTotal = (zoneId: string) =>
|
||||
dragItems.filter((item) => item.targetZoneId === zoneId).length;
|
||||
|
||||
const renderDragItem = (item: DragDemoItem, className?: string) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-16 items-center gap-3 rounded-2xl border px-4 font-medium shadow-sm select-none",
|
||||
dragItemClassNames[item.tone],
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<span className="flex size-10 items-center justify-center rounded-full bg-white/70 text-xl shadow-sm">
|
||||
{item.icon}
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate">{item.label}</span>
|
||||
<span className="mt-0.5 block truncate text-xs opacity-70">
|
||||
{item.description}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderPlacedItem = (item: DragDemoItem) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium shadow-sm",
|
||||
dragItemClassNames[item.tone],
|
||||
)}
|
||||
>
|
||||
<span className="flex size-7 items-center justify-center rounded-full bg-white/70 text-base shadow-sm">
|
||||
{item.icon}
|
||||
</span>
|
||||
<span>{item.label}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
export function DragDropDemo() {
|
||||
const scale = useScale();
|
||||
const [dropResult, setDropResult] = useState<DragDropDemoResult>(null);
|
||||
const [placedItemIds, setPlacedItemIds] = useState<Record<string, string[]>>(
|
||||
{},
|
||||
);
|
||||
const placedIds = Object.values(placedItemIds).flat();
|
||||
const placedCount = placedIds.length;
|
||||
const progress = Math.round((placedCount / dragItems.length) * 100);
|
||||
const isCompleted = placedCount === dragItems.length;
|
||||
|
||||
const handleDragEnd: DragDropProviderProps["onDragEnd"] = (event) => {
|
||||
if (isCompleted) {
|
||||
return;
|
||||
}
|
||||
|
||||
const draggedId = String(event.active.id);
|
||||
const droppedId = event.over ? String(event.over.id) : null;
|
||||
const draggedItem = findDragItem(draggedId);
|
||||
|
||||
if (!droppedId || !draggedItem) {
|
||||
setDropResult({
|
||||
type: "error",
|
||||
message: "没有放入目标区域，请再试一次。",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (placedIds.includes(draggedId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (draggedItem.targetZoneId !== droppedId) {
|
||||
setDropResult({
|
||||
type: "error",
|
||||
message: `还不对：${draggedItem.label} 不属于这个分类。`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const nextPlacedItemIds = {
|
||||
...placedItemIds,
|
||||
[droppedId]: [...(placedItemIds[droppedId] ?? []), draggedId],
|
||||
};
|
||||
const nextPlacedCount = Object.values(nextPlacedItemIds).flat().length;
|
||||
|
||||
setPlacedItemIds(nextPlacedItemIds);
|
||||
setDropResult({
|
||||
type: "success",
|
||||
message:
|
||||
nextPlacedCount === dragItems.length
|
||||
? "全部分类完成，做得很好！"
|
||||
: `答对了：${draggedItem.label} 已放入正确分类。`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDragStart = () => {
|
||||
if (!isCompleted) {
|
||||
setDropResult(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragCancel = () => {
|
||||
if (!isCompleted) {
|
||||
setDropResult(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRetry = () => {
|
||||
setDropResult(null);
|
||||
setPlacedItemIds({});
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-slate-50 to-white shadow-sm">
|
||||
<div className="border-slate-200 border-b bg-white/80 px-6 py-5">
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-semibold text-sky-600">
|
||||
Interactive Course Demo
|
||||
</p>
|
||||
<h2 className="text-2xl font-semibold text-slate-950">
|
||||
Drag and Drop 分类挑战
|
||||
</h2>
|
||||
<p className="max-w-2xl text-slate-500">
|
||||
将左侧物品拖入右侧正确分类。拖拽预览使用自定义
|
||||
DragOverlay，释放区根据是否匹配给出颜色反馈。
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
|
||||
完成 {placedCount}/{dragItems.length}
|
||||
</div>
|
||||
<div className="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-500">
|
||||
scale {scale.toFixed(3)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 h-2 overflow-hidden rounded-full bg-slate-100">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-sky-400 to-emerald-400 transition-[width] duration-300"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<DragDropProvider
|
||||
scale={scale}
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDragCancel={handleDragCancel}
|
||||
renderOverlay={({ activeId }) => {
|
||||
const activeItem = findDragItem(String(activeId));
|
||||
|
||||
return activeItem
|
||||
? renderDragItem(
|
||||
activeItem,
|
||||
"pointer-events-none w-[300px] shadow-xl ring-4 ring-white/70",
|
||||
)
|
||||
: null;
|
||||
}}
|
||||
>
|
||||
<div className="grid gap-5 lg:grid-cols-[320px_1fr]">
|
||||
<div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="mb-4 flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-slate-800">
|
||||
待分类物品
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-slate-400">
|
||||
拖动物品到右侧对应区域
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500">
|
||||
{dragItems.length - placedCount} left
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{dragItems
|
||||
.filter((item) => !placedIds.includes(item.id))
|
||||
.map((item) => (
|
||||
<Draggable
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
disabled={isCompleted}
|
||||
>
|
||||
{renderDragItem(item)}
|
||||
</Draggable>
|
||||
))}
|
||||
{isCompleted && (
|
||||
<div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">
|
||||
所有物品都已完成分类
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{dropZones.map((zone) => {
|
||||
const zonePlacedIds = placedItemIds[zone.id] ?? [];
|
||||
const placedItems = zonePlacedIds
|
||||
.map((itemId) => findDragItem(itemId))
|
||||
.filter((item): item is DragDemoItem => Boolean(item));
|
||||
const zoneTotal = getZoneTotal(zone.id);
|
||||
|
||||
return (
|
||||
<Droppable
|
||||
key={zone.id}
|
||||
id={zone.id}
|
||||
canDrop={(activeId) => {
|
||||
const activeItem = findDragItem(String(activeId));
|
||||
|
||||
return (
|
||||
activeItem?.targetZoneId === zone.id &&
|
||||
!zonePlacedIds.includes(String(activeId))
|
||||
);
|
||||
}}
|
||||
className={({ isOver, canDrop }) =>
|
||||
cn(
|
||||
"min-h-80 rounded-3xl border-2 border-dashed border-slate-300 bg-white p-5 transition-[background-color,border-color,box-shadow] duration-150",
|
||||
isOver && canDrop && zoneOverClassNames[zone.tone],
|
||||
isOver &&
|
||||
!canDrop &&
|
||||
"border-rose-300 bg-rose-50 shadow-[0_0_0_6px_rgba(244,63,94,0.08)]",
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="mb-4 flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<div
|
||||
className={cn(
|
||||
"mb-3 flex size-12 items-center justify-center rounded-2xl text-xl",
|
||||
zoneIconClassNames[zone.tone],
|
||||
)}
|
||||
>
|
||||
{zone.icon}
|
||||
</div>
|
||||
<div className="font-semibold text-slate-800">
|
||||
{zone.title}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-slate-400">
|
||||
{zone.description}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500">
|
||||
{placedItems.length}/{zoneTotal}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto grid gap-2">
|
||||
{placedItems.length > 0 ? (
|
||||
placedItems.map((item) => (
|
||||
<div key={item.id}>{renderPlacedItem(item)}</div>
|
||||
))
|
||||
) : (
|
||||
<div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-5 text-center text-sm text-slate-400">
|
||||
等待放入正确物品
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Droppable>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</DragDropProvider>
|
||||
|
||||
{dropResult && (
|
||||
<div
|
||||
className={cn(
|
||||
"mt-4 flex items-center justify-between gap-3 rounded-2xl border bg-white px-4 py-3 text-sm shadow-sm",
|
||||
dropResult.type === "success"
|
||||
? "border-emerald-200 text-emerald-700"
|
||||
: "border-rose-200 text-rose-600",
|
||||
)}
|
||||
>
|
||||
<span>{dropResult.message}</span>
|
||||
<Button size="sm" variant="ghost" onClick={handleRetry}>
|
||||
重试
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user