feat(lesson-preparation): 师生交互编辑器（对话轮次增删改）
This commit is contained in:
SpecialX
@@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { createId } from "@paralleldrive/cuid2";
|
||||
import type { InteractionBlockData, QATurn } from "../../types";
|
||||
import { useLessonPlanEditor } from "../../hooks/use-lesson-plan-editor";
|
||||
|
||||
interface Props {
|
||||
nodeId: string;
|
||||
data: InteractionBlockData;
|
||||
}
|
||||
|
||||
export function QaEditor({ nodeId, data }: Props) {
|
||||
const t = useTranslations("lessonPreparation");
|
||||
const updateNode = useLessonPlanEditor((s) => s.updateNode);
|
||||
|
||||
const updateData = (next: InteractionBlockData) => {
|
||||
updateNode(nodeId, { data: next });
|
||||
};
|
||||
|
||||
const addTurn = () => {
|
||||
const newTurn: QATurn = {
|
||||
id: createId(),
|
||||
role: "teacher",
|
||||
content: "",
|
||||
expectedAnswer: "",
|
||||
order: data.turns.length,
|
||||
};
|
||||
updateData({ ...data, turns: [...data.turns, newTurn] });
|
||||
};
|
||||
|
||||
const updateTurn = (id: string, patch: Partial<QATurn>) => {
|
||||
updateData({
|
||||
...data,
|
||||
turns: data.turns.map((t) => (t.id === id ? { ...t, ...patch } : t)),
|
||||
});
|
||||
};
|
||||
|
||||
const removeTurn = (id: string) => {
|
||||
updateData({
|
||||
...data,
|
||||
turns: data.turns
|
||||
.filter((t) => t.id !== id)
|
||||
.map((t, i) => ({ ...t, order: i })),
|
||||
});
|
||||
};
|
||||
|
||||
const moveTurn = (id: string, direction: "up" | "down") => {
|
||||
const idx = data.turns.findIndex((t) => t.id === id);
|
||||
if (idx < 0) return;
|
||||
const newIdx = direction === "up" ? idx - 1 : idx + 1;
|
||||
if (newIdx < 0 || newIdx >= data.turns.length) return;
|
||||
const turns = [...data.turns];
|
||||
[turns[idx], turns[newIdx]] = [turns[newIdx], turns[idx]];
|
||||
updateData({
|
||||
...data,
|
||||
turns: turns.map((t, i) => ({ ...t, order: i })),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fontWeight: 600,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.08em",
|
||||
color: "var(--muted-foreground)",
|
||||
display: "block",
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
{t("v4.detail.designIntent")}
|
||||
</label>
|
||||
<textarea
|
||||
value={data.designIntent}
|
||||
onChange={(e) => updateData({ ...data, designIntent: e.target.value })}
|
||||
rows={2}
|
||||
style={{
|
||||
width: "100%",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: 5,
|
||||
padding: "8px 10px",
|
||||
background: "var(--background)",
|
||||
fontFamily: "Inter, sans-serif",
|
||||
fontSize: 13,
|
||||
lineHeight: 1.6,
|
||||
color: "var(--foreground)",
|
||||
resize: "vertical",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fontWeight: 600,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.08em",
|
||||
color: "var(--muted-foreground)",
|
||||
display: "block",
|
||||
marginBottom: 8,
|
||||
}}
|
||||
>
|
||||
{t("v4.detail.qaDialog")}
|
||||
</label>
|
||||
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
{data.turns.map((turn, idx) => (
|
||||
<QaTurnEditor
|
||||
key={turn.id}
|
||||
turn={turn}
|
||||
index={idx}
|
||||
total={data.turns.length}
|
||||
onUpdate={(patch) => updateTurn(turn.id, patch)}
|
||||
onRemove={() => removeTurn(turn.id)}
|
||||
onMoveUp={() => moveTurn(turn.id, "up")}
|
||||
onMoveDown={() => moveTurn(turn.id, "down")}
|
||||
/>
|
||||
))}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addTurn}
|
||||
style={{
|
||||
border: "1px dashed var(--border)",
|
||||
background: "transparent",
|
||||
padding: 8,
|
||||
borderRadius: 5,
|
||||
textAlign: "center",
|
||||
fontSize: 12,
|
||||
color: "var(--muted-foreground)",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
+ {t("v4.detail.addTurn")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface TurnProps {
|
||||
turn: QATurn;
|
||||
index: number;
|
||||
total: number;
|
||||
onUpdate: (patch: Partial<QATurn>) => void;
|
||||
onRemove: () => void;
|
||||
onMoveUp: () => void;
|
||||
onMoveDown: () => void;
|
||||
}
|
||||
|
||||
function QaTurnEditor({ turn, index, total, onUpdate, onRemove, onMoveUp, onMoveDown }: TurnProps) {
|
||||
const t = useTranslations("lessonPreparation");
|
||||
const isTeacher = turn.role === "teacher";
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: 5,
|
||||
padding: "8px 10px",
|
||||
background: "var(--background)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
marginBottom: 6,
|
||||
fontSize: 10,
|
||||
}}
|
||||
>
|
||||
<select
|
||||
value={turn.role}
|
||||
onChange={(e) => onUpdate({ role: e.target.value as "teacher" | "student" })}
|
||||
className={isTeacher ? "teacher" : "student"}
|
||||
style={{
|
||||
fontFamily: "JetBrains Mono, monospace",
|
||||
fontSize: 9,
|
||||
fontWeight: 600,
|
||||
padding: "2px 6px",
|
||||
borderRadius: 2,
|
||||
border: "1px solid var(--border)",
|
||||
background: "var(--background)",
|
||||
cursor: "pointer",
|
||||
color: isTeacher ? "#1c1917" : "#6b7280",
|
||||
}}
|
||||
>
|
||||
<option value="teacher">{t("v4.detail.turnTeacher")}</option>
|
||||
<option value="student">{t("v4.detail.turnStudent")}</option>
|
||||
</select>
|
||||
<span style={{ color: "var(--muted-foreground)", fontSize: 10 }}>
|
||||
{t("v4.interaction.round", { n: index + 1 })}
|
||||
</span>
|
||||
<div style={{ marginLeft: "auto" }}>
|
||||
<button type="button" onClick={onMoveUp} disabled={index === 0} style={{ border: "none", background: "transparent", color: "var(--muted-foreground)", cursor: index === 0 ? "default" : "pointer", padding: "2px 4px", fontSize: 11 }}>↑</button>
|
||||
<button type="button" onClick={onMoveDown} disabled={index === total - 1} style={{ border: "none", background: "transparent", color: "var(--muted-foreground)", cursor: index === total - 1 ? "default" : "pointer", padding: "2px 4px", fontSize: 11 }}>↓</button>
|
||||
<button type="button" onClick={onRemove} style={{ border: "none", background: "transparent", color: "var(--muted-foreground)", cursor: "pointer", padding: "2px 4px", fontSize: 11 }}>×</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
value={turn.content}
|
||||
onChange={(e) => onUpdate({ content: e.target.value })}
|
||||
rows={2}
|
||||
placeholder="内容"
|
||||
style={{
|
||||
width: "100%",
|
||||
border: "none",
|
||||
outline: "none",
|
||||
background: "transparent",
|
||||
resize: "vertical",
|
||||
fontFamily: "Inter, sans-serif",
|
||||
fontSize: 12.5,
|
||||
lineHeight: 1.5,
|
||||
color: "var(--foreground)",
|
||||
minHeight: 36,
|
||||
}}
|
||||
/>
|
||||
{isTeacher && (
|
||||
<textarea
|
||||
value={turn.expectedAnswer ?? ""}
|
||||
onChange={(e) => onUpdate({ expectedAnswer: e.target.value })}
|
||||
rows={1}
|
||||
placeholder={t("v4.detail.expectedAnswer")}
|
||||
style={{
|
||||
width: "100%",
|
||||
border: "none",
|
||||
outline: "none",
|
||||
background: "var(--muted)",
|
||||
resize: "vertical",
|
||||
fontFamily: "Inter, sans-serif",
|
||||
fontSize: 11,
|
||||
fontStyle: "italic",
|
||||
color: "var(--muted-foreground)",
|
||||
padding: "4px 8px",
|
||||
borderRadius: 3,
|
||||
marginTop: 4,
|
||||
minHeight: 24,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user