diff --git a/apps/web/src/shared/components/FlowchartEditor/index.vue b/apps/web/src/shared/components/FlowchartEditor/index.vue
index c84ec35..91125fc 100644
--- a/apps/web/src/shared/components/FlowchartEditor/index.vue
+++ b/apps/web/src/shared/components/FlowchartEditor/index.vue
@@ -38,7 +38,7 @@ const nodes = ref([]) as Ref<Node[]>
 const edges = ref([]) as Ref<Edge[]>
 
 // 历史记录管理
-const { canUndo, canRedo, saveState, undo, redo } = useHistory()
+const { canUndo, canRedo, resetHistory, saveState, undo, redo } = useHistory()
 
 const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
@@ -55,7 +55,11 @@ const {
   saveToCache,
   loadFromCache,
   clearCache,
-} = useCache(nodes, edges, cacheKey)
+} = useCache(nodes, edges, cacheKey, () => {
+  // 换题后画布已经被换成新题的草稿，历史必须跟着重建，
+  // 否则一次撤销就会把上一题的图还原到这一题里
+  resetHistory(nodes.value, edges.value)
+})
 
 // 拖拽处理
 const { onDragOver, onDragLeave, onDrop, isDragOver, screenDragPos } = useDnD()
@@ -148,8 +152,10 @@ const handleKeyDown = (event: KeyboardEvent) => {
 onMounted(() => {
   document.addEventListener("keydown", handleKeyDown)
 
-  // 从缓存恢复数据
+  // 从缓存恢复数据，并把当前画布作为历史起点，
+  // 否则第一步操作没有可回退的目标，撤销按钮一直是灰的
   loadFromCache()
+  resetHistory(nodes.value, edges.value)
 })
 
 onUnmounted(() => {
diff --git a/apps/web/src/shared/components/FlowchartEditor/useCache.ts b/apps/web/src/shared/components/FlowchartEditor/useCache.ts
index bc332fd..2f61556 100644
--- a/apps/web/src/shared/components/FlowchartEditor/useCache.ts
+++ b/apps/web/src/shared/components/FlowchartEditor/useCache.ts
@@ -1,4 +1,4 @@
-import { ref, watch, type Ref, type MaybeRefOrGetter } from "vue"
+import { ref, toValue, watch, type Ref, type MaybeRefOrGetter } from "vue"
 import { useStorage, useDebounceFn } from "@vueuse/core"
 import type { Node, Edge } from "@vue-flow/core"
 
@@ -9,6 +9,7 @@ export function useCache(
   nodes: Ref<Node[]>,
   edges: Ref<Edge[]>,
   storageKey: MaybeRefOrGetter<string> = "flowchart-editor-data",
+  onReloaded?: () => void,
 ) {
   const isSaving = ref(false)
   const lastSaved = ref<Date | null>(null)
@@ -67,6 +68,26 @@ export function useCache(
     hasUnsavedChanges.value = false
   }
 
+  // 题目 ID 异步加载完成、或直接切到下一题时 storageKey 会变。
+  // useStorage 只把新 key 的内容读进 storedData，不会回填 nodes/edges：
+  // 不处理的话画布会继续显示上一题的图，学生一动就把上一题的内容写进这一题的
+  // key，把这道题原本存着的草稿覆盖掉。
+  // 这里依赖 useStorage 内部对 key 的 watch 先于本 watch 执行（两者都是 pre
+  // flush，且 useStorage 在上方先创建，pre 队列按创建顺序跑），
+  // 因此此刻 storedData 已经是新 key 的数据。
+  watch(
+    () => toValue(storageKey),
+    () => {
+      if (!loadFromCache()) {
+        nodes.value = []
+        edges.value = []
+        lastSaved.value = null
+        hasUnsavedChanges.value = false
+      }
+      onReloaded?.()
+    },
+  )
+
   // 监听节点和边的变化，isSaving 在此置 true 以覆盖防抖等待窗口
   watch(
     [nodes, edges],
diff --git a/apps/web/src/shared/components/FlowchartEditor/useFlowOperations.ts b/apps/web/src/shared/components/FlowchartEditor/useFlowOperations.ts
index e9d41d4..447dea6 100644
--- a/apps/web/src/shared/components/FlowchartEditor/useFlowOperations.ts
+++ b/apps/web/src/shared/components/FlowchartEditor/useFlowOperations.ts
@@ -1,3 +1,4 @@
+import { nextTick } from "vue"
 import type { Ref } from "vue"
 import type { Node, Edge, Connection } from "@vue-flow/core"
 import { useVueFlow } from "@vue-flow/core"
@@ -51,7 +52,7 @@ export function useFlowOperations(
     return ""
   }
 
-  const handleConnect = (params: Connection) => {
+  const handleConnect = async (params: Connection) => {
     const sourceNode = nodes.value.find((node) => node.id === params.source)
     const targetNode = nodes.value.find((node) => node.id === params.target)
 
@@ -74,25 +75,24 @@ export function useFlowOperations(
     }
 
     addEdges([newEdge])
+    // vue-flow 的 store → v-model 回写走的是 watch（pre flush，异步），
+    // 紧接着读 nodes/edges 拿到的还是改动前的数组，存进历史就会错开一步。
+    // 画布上 handleDrop 早就这么等了，这几处一直漏了。
+    await nextTick()
     saveState(nodes.value, edges.value)
   }
 
-  const handleEdgeClick = ({ edge }: { edge: Edge }) => {
+  const handleEdgeClick = async ({ edge }: { edge: Edge }) => {
     removeEdges([edge.id])
+    await nextTick()
     saveState(nodes.value, edges.value)
   }
 
-  // 节点删除
-  const handleNodeDelete = (nodeId: string) => {
-    // 删除相关边
-    const relatedEdges = edges.value.filter(
-      (edge) => edge.source === nodeId || edge.target === nodeId,
-    )
-    if (relatedEdges.length > 0) {
-      removeEdges(relatedEdges.map((edge) => edge.id))
-    }
-
+  // 节点删除。removeNodes 的 removeConnectedEdges 默认就是 true，
+  // 相连的边不用自己再删一遍
+  const handleNodeDelete = async (nodeId: string) => {
     removeNodes([nodeId])
+    await nextTick()
     saveState(nodes.value, edges.value)
   }
 
@@ -118,9 +118,10 @@ export function useFlowOperations(
   }
 
   // 删除选中的节点和边
-  const deleteSelected = () => {
+  const deleteSelected = async () => {
     const selectedNodes = getSelectedNodes.value
     const selectedEdges = getSelectedEdges.value
+    if (selectedNodes.length === 0 && selectedEdges.length === 0) return
 
     if (selectedNodes.length > 0) {
       removeNodes(selectedNodes.map((node) => node.id))
@@ -128,6 +129,7 @@ export function useFlowOperations(
     if (selectedEdges.length > 0) {
       removeEdges(selectedEdges.map((edge) => edge.id))
     }
+    await nextTick()
     saveState(nodes.value, edges.value)
   }
 
diff --git a/apps/web/src/shared/components/FlowchartEditor/useHistory.ts b/apps/web/src/shared/components/FlowchartEditor/useHistory.ts
index 8ec9a50..94ced95 100644
--- a/apps/web/src/shared/components/FlowchartEditor/useHistory.ts
+++ b/apps/web/src/shared/components/FlowchartEditor/useHistory.ts
@@ -42,6 +42,14 @@ export function useHistory() {
     }
   }
 
+  // 用当前画布重建历史。挂载时和换题后都要调一次：
+  // 不播下这个初始快照的话 historyIndex 会从 -1 开始，canUndo 要求 index > 0，
+  // 第一步操作永远撤销不了；换题后不重建则一次撤销会把上一题的图还原到这一题里。
+  const resetHistory = (nodes: Node[], edges: Edge[]) => {
+    history.value = [deepCopyState(nodes, edges)]
+    historyIndex.value = 0
+  }
+
   // 撤销
   const undo = () => {
     if (canUndo.value) {
@@ -65,6 +73,7 @@ export function useHistory() {
   return {
     canUndo,
     canRedo,
+    resetHistory,
     saveState,
     undo,
     redo,