feat(lesson-preparation): 右键菜单（节点操作 + AI 协助 + 锚定）
This commit is contained in:
SpecialX
@@ -0,0 +1,204 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useTranslations } from "next-intl";
|
||||||
|
import type { LessonPlanNode } from "../../types";
|
||||||
|
import { useLessonPlanEditor } from "../../hooks/use-lesson-plan-editor";
|
||||||
|
|
||||||
|
export interface ContextMenuState {
|
||||||
|
visible: boolean;
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
/** 右键的节点（如果是 inline-node 右键） */
|
||||||
|
nodeId: string | null;
|
||||||
|
/** 右键的选中文本范围（如果是正文右键） */
|
||||||
|
selectionRange: { from: number; to: number } | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
state: ContextMenuState;
|
||||||
|
onClose: () => void;
|
||||||
|
/** AI 协助回调（V1: 仅 toast 提示"功能开发中"，V2 接入 actions-ai.ts） */
|
||||||
|
onAiAction?: (action: "generate" | "optimize" | "differentiation" | "layered", nodeId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* V4 右键菜单：根据 state.nodeId 区分节点菜单 vs 锚定菜单。
|
||||||
|
*
|
||||||
|
* V1 范围：展开/收起、删除、锚定 已实现。
|
||||||
|
* V1 占位：上下移动、复制节点、AI 协助 4 项（按钮显示，点击 toast 提示）。
|
||||||
|
* 这些占位功能在 spec §15 YAGNI 边界内，V2 接入。
|
||||||
|
*/
|
||||||
|
export function PaperContextMenu({ state, onClose, onAiAction }: Props) {
|
||||||
|
const t = useTranslations("lessonPreparation");
|
||||||
|
const {
|
||||||
|
toggleExpand,
|
||||||
|
expandedNodeIds,
|
||||||
|
updateNode,
|
||||||
|
removeNode,
|
||||||
|
addAnchor,
|
||||||
|
doc,
|
||||||
|
} = useLessonPlanEditor();
|
||||||
|
|
||||||
|
// V1 占位实现：上下移动、复制（按 spec §15 YAGNI，V2 完整实现）
|
||||||
|
const moveNodeOrder = (nodeId: string, direction: "up" | "down") => {
|
||||||
|
const teachingNodes = doc.nodes
|
||||||
|
.filter((n): n is LessonPlanNode => n.type !== "textbook_content")
|
||||||
|
.sort((a, b) => a.order - b.order);
|
||||||
|
const idx = teachingNodes.findIndex((n) => n.id === nodeId);
|
||||||
|
if (idx < 0) return;
|
||||||
|
const newIdx = direction === "up" ? idx - 1 : idx + 1;
|
||||||
|
if (newIdx < 0 || newIdx >= teachingNodes.length) return;
|
||||||
|
const a = teachingNodes[idx];
|
||||||
|
const b = teachingNodes[newIdx];
|
||||||
|
updateNode(a.id, { order: b.order });
|
||||||
|
updateNode(b.id, { order: a.order });
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyNode = (nodeId: string) => {
|
||||||
|
void nodeId;
|
||||||
|
// V1 占位：toast 提示
|
||||||
|
void import("sonner").then(({ toast }) => toast.info("复制节点功能将在 V2 提供"));
|
||||||
|
};
|
||||||
|
|
||||||
|
// AI 协助默认实现（V1 占位）
|
||||||
|
const handleAi = (action: "generate" | "optimize" | "differentiation" | "layered", nodeId: string) => {
|
||||||
|
if (onAiAction) {
|
||||||
|
onAiAction(action, nodeId);
|
||||||
|
} else {
|
||||||
|
void import("sonner").then(({ toast }) => toast.info("AI 协助功能将在 V2 提供"));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!state.visible) return null;
|
||||||
|
|
||||||
|
const isNodeMenu = state.nodeId !== null;
|
||||||
|
const isExpanded = state.nodeId ? expandedNodeIds.includes(state.nodeId) : false;
|
||||||
|
|
||||||
|
const handleAction = (action: () => void) => {
|
||||||
|
action();
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const item = (label: string, action: () => void, opts?: { danger?: boolean; ai?: boolean; shortcut?: string }) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleAction(action)}
|
||||||
|
className={`lp-cm-item ${opts?.danger ? "danger" : ""} ${opts?.ai ? "ai" : ""}`}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 10,
|
||||||
|
padding: "7px 10px",
|
||||||
|
borderRadius: 4,
|
||||||
|
cursor: "pointer",
|
||||||
|
color: opts?.danger ? "#dc2626" : opts?.ai ? "var(--lp-interaction)" : "var(--foreground)",
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
width: "100%",
|
||||||
|
textAlign: "left",
|
||||||
|
fontSize: 12.5,
|
||||||
|
fontFamily: "inherit",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ flex: 1 }}>{label}</span>
|
||||||
|
{opts?.shortcut && (
|
||||||
|
<span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 10, color: "var(--muted-foreground)" }}>
|
||||||
|
{opts.shortcut}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
const section = (label: string) => (
|
||||||
|
<div style={{ fontSize: 9, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted-foreground)", padding: "6px 10px 4px" }}>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const divider = () => <div style={{ height: 1, background: "var(--border)", margin: "4px 0" }} />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: state.y,
|
||||||
|
left: state.x,
|
||||||
|
background: "var(--background)",
|
||||||
|
border: "1px solid var(--border)",
|
||||||
|
borderRadius: 6,
|
||||||
|
boxShadow: "0 6px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06)",
|
||||||
|
padding: 5,
|
||||||
|
minWidth: 220,
|
||||||
|
zIndex: 100,
|
||||||
|
}}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{isNodeMenu ? (
|
||||||
|
<>
|
||||||
|
{section(t("v4.contextMenu.nodeOps"))}
|
||||||
|
{!isExpanded && item(t("v4.contextMenu.expandToPaper"), () => state.nodeId && toggleExpand(state.nodeId))}
|
||||||
|
{isExpanded && item(t("v4.contextMenu.collapseFromPaper"), () => state.nodeId && toggleExpand(state.nodeId))}
|
||||||
|
{item(t("v4.contextMenu.moveUp"), () => state.nodeId && moveNodeOrder(state.nodeId, "up"))}
|
||||||
|
{item(t("v4.contextMenu.moveDown"), () => state.nodeId && moveNodeOrder(state.nodeId, "down"))}
|
||||||
|
{divider()}
|
||||||
|
{section(t("v4.contextMenu.aiAssist"))}
|
||||||
|
{item(t("v4.contextMenu.aiGenerate"), () => state.nodeId && handleAi("generate", state.nodeId), { ai: true })}
|
||||||
|
{item(t("v4.contextMenu.aiOptimize"), () => state.nodeId && handleAi("optimize", state.nodeId), { ai: true })}
|
||||||
|
{item(t("v4.contextMenu.aiDifferentiation"), () => state.nodeId && handleAi("differentiation", state.nodeId), { ai: true })}
|
||||||
|
{item(t("v4.contextMenu.aiLayeredQuestions"), () => state.nodeId && handleAi("layered", state.nodeId), { ai: true })}
|
||||||
|
{divider()}
|
||||||
|
{item(t("v4.contextMenu.copyNode"), () => state.nodeId && copyNode(state.nodeId))}
|
||||||
|
{item(t("v4.contextMenu.deleteNode"), () => state.nodeId && removeNode(state.nodeId), { danger: true, shortcut: "⌫" })}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{section(t("v4.contextMenu.anchorToNode"))}
|
||||||
|
{/* 列出所有教学节点供选择锚定 */}
|
||||||
|
<NodeAnchorList
|
||||||
|
onSelect={(nodeId) => {
|
||||||
|
if (state.selectionRange && nodeId) {
|
||||||
|
// 用 Tiptap toggleMark 包裹选中文本
|
||||||
|
// 实际实现在 PaperEditor 中通过 ref 调用 editor
|
||||||
|
addAnchor({ nodeId, type: "range" });
|
||||||
|
}
|
||||||
|
onClose();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NodeAnchorList({ onSelect }: { onSelect: (nodeId: string) => void }) {
|
||||||
|
const nodes = useLessonPlanEditor((s) => s.doc.nodes);
|
||||||
|
const teachingNodes = nodes.filter((n): n is LessonPlanNode => n.type !== "textbook_content");
|
||||||
|
return (
|
||||||
|
<div style={{ maxHeight: 200, overflowY: "auto" }}>
|
||||||
|
{teachingNodes.map((n) => (
|
||||||
|
<button
|
||||||
|
key={n.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => onSelect(n.id)}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 8,
|
||||||
|
padding: "6px 10px",
|
||||||
|
width: "100%",
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: 12,
|
||||||
|
color: "var(--foreground)",
|
||||||
|
textAlign: "left",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ width: 6, height: 6, borderRadius: "50%", background: `var(--lp-dot-${n.type})` }} />
|
||||||
|
<span style={{ flex: 1 }}>{n.title}</span>
|
||||||
|
<span style={{ fontSize: 10, color: "var(--muted-foreground)" }}>{n.type}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user