From 62d763199f4fc14eb3fedd3de8ab27b1a41612bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Fri, 17 Jul 2026 18:58:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81=E7=BC=96=E6=8E=92=E4=B8=B4=E6=97=B6=E8=8D=89=E7=A8=BF?=
 =?UTF-8?q?=E7=BC=93=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 按当前标签页缓存并静默恢复未保存的工作流编排

- 优化试运行抽屉层级、窄屏宽度与长结果滚动

- 覆盖版本变化、缓存异常与保存竞态场景
---
 .../src/locales/langs/en-US/aiWorkflow.json   |   1 +
 .../src/locales/langs/zh-CN/aiWorkflow.json   |   1 +
 .../src/views/ai/workflow/WorkflowDesign.vue  | 136 +++++++++++++++-
 .../__tests__/workflowDraftCache.test.ts      | 143 +++++++++++++++++
 .../ai/workflow/components/SingleRun.vue      |  46 +++++-
 .../views/ai/workflow/workflowDraftCache.ts   | 147 ++++++++++++++++++
 6 files changed, 464 insertions(+), 10 deletions(-)
 create mode 100644 easyflow-ui-admin/app/src/views/ai/workflow/__tests__/workflowDraftCache.test.ts
 create mode 100644 easyflow-ui-admin/app/src/views/ai/workflow/workflowDraftCache.ts

diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflow.json b/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflow.json
index 6104b402..59c7c9dd 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflow.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflow.json
@@ -101,6 +101,7 @@
   "publishPendingHint": "There is already an approval in progress for this workflow.",
   "deletePendingHint": "There is already an approval in progress for this workflow.",
   "check": "Check",
+  "draftCacheFailed": "Unable to cache the temporary draft. Please save manually",
   "checkPassed": "Workflow check passed",
   "checkFailed": "Workflow check failed. Please fix the issues first",
   "checkContentEmpty": "Canvas content is empty, unable to check",
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflow.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflow.json
index 4fd3eed3..0eec8b0a 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflow.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflow.json
@@ -101,6 +101,7 @@
   "publishPendingHint": "当前工作流已有进行中的审批，请等待处理完成。",
   "deletePendingHint": "当前工作流已有进行中的审批，请等待处理完成。",
   "check": "检查",
+  "draftCacheFailed": "临时草稿保存失败，请及时手动保存",
   "checkPassed": "工作流检查通过",
   "checkFailed": "工作流检查未通过，请先修复问题",
   "checkContentEmpty": "当前画布内容为空，无法检查",
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue
index 2a39b392..e3c5dace 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, ref} from 'vue';
+import {
+  computed,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue';
 import {useRoute} from 'vue-router';
 
 import {usePreferences} from '@easyflow/preferences';
@@ -23,6 +30,12 @@ import ExecResult from '#/views/ai/workflow/components/ExecResult.vue';
 import SingleRun from '#/views/ai/workflow/components/SingleRun.vue';
 import WorkflowForm from '#/views/ai/workflow/components/WorkflowForm.vue';
 import WorkflowSteps from '#/views/ai/workflow/components/WorkflowSteps.vue';
+import {
+  clearWorkflowDraft,
+  createWorkflowContentSignature,
+  readWorkflowDraft,
+  writeWorkflowDraft,
+} from '#/views/ai/workflow/workflowDraftCache';
 
 import {getCustomNode} from './customNode/index';
 import nodeNames from './customNode/nodeNames';
@@ -48,12 +61,18 @@ onMounted(async () => {
   ]);
   showTinyFlow.value = true;
 });
+onBeforeUnmount(() => {
+  captureCurrentWorkflowDraft();
+});
 onUnmounted(() => {
   document.removeEventListener('keydown', handleKeydown);
   if (focusPulseTimer) {
     clearTimeout(focusPulseTimer);
   }
 });
+onDeactivated(() => {
+  captureCurrentWorkflowDraft();
+});
 // variables
 const tinyflowRef = ref<InstanceType<typeof Tinyflow> | null>(null);
 const workflowId = ref(route.query.id);
@@ -69,6 +88,12 @@ const codeEngineList = ref<any[]>([
     available: true,
   },
 ]);
+const WORKFLOW_DRAFT_WRITE_DELAY = 320;
+let draftWriteTimer: ReturnType<typeof setTimeout> | undefined;
+let pendingDraftContent: any = null;
+let lastObservedWorkflowContent: any = null;
+let serverContentSignature = '';
+let draftCacheWarningShown = false;
 
 function escapeHtmlAttr(value?: string) {
   return String(value || '')
@@ -343,12 +368,16 @@ async function handleSave(showMsg: boolean = false): Promise<boolean> {
   saveLoading.value = true;
   try {
     const content = normalizeWorkflowStartNodes(tinyflowRef.value?.getData());
+    const savedContentSignature = createWorkflowContentSignature(content);
     const res = await api.post('/api/v1/workflow/update', {
       id: workflowId.value,
       content,
     });
-    if (res.errorCode === 0 && showMsg) {
-      ElMessage.success(res.message);
+    if (res.errorCode === 0) {
+      reconcileWorkflowDraftAfterSave(savedContentSignature);
+      if (showMsg) {
+        ElMessage.success(res.message);
+      }
     }
     return res.errorCode === 0;
   } catch {
@@ -364,13 +393,101 @@ async function getWorkflowInfo(workflowId: any, syncFlowData: boolean = true) {
       const parsedContent = workflowInfo.value.content
         ? JSON.parse(workflowInfo.value.content)
         : {};
-      tinyFlowData.value = isWorkflowDataEmpty(parsedContent)
+      const serverContent = isWorkflowDataEmpty(parsedContent)
         ? createInitialWorkflowData()
         : normalizeWorkflowStartNodes(parsedContent);
+      serverContentSignature = createWorkflowContentSignature(serverContent);
+      const draft = readWorkflowDraft(workflowId, serverContent);
+      tinyFlowData.value = draft
+        ? normalizeWorkflowStartNodes(draft.content as Record<string, any>)
+        : serverContent;
+      lastObservedWorkflowContent = tinyFlowData.value;
     }
     syncNavTitle(workflowInfo.value?.title || '');
   });
 }
+
+function persistPendingWorkflowDraft() {
+  if (!pendingDraftContent || !workflowId.value || !serverContentSignature) {
+    draftWriteTimer = undefined;
+    return;
+  }
+  const content = pendingDraftContent;
+  pendingDraftContent = null;
+  draftWriteTimer = undefined;
+  const persisted = writeWorkflowDraft({
+    baseContentSignature: serverContentSignature,
+    content,
+    workflowId: workflowId.value,
+  });
+  if (!persisted && !draftCacheWarningShown) {
+    draftCacheWarningShown = true;
+    ElMessage.warning($t('aiWorkflow.draftCacheFailed'));
+  }
+}
+
+function scheduleWorkflowDraft(content: any) {
+  lastObservedWorkflowContent = normalizeWorkflowStartNodes(content);
+  pendingDraftContent = lastObservedWorkflowContent;
+  if (draftWriteTimer) {
+    clearTimeout(draftWriteTimer);
+  }
+  draftWriteTimer = setTimeout(
+    persistPendingWorkflowDraft,
+    WORKFLOW_DRAFT_WRITE_DELAY,
+  );
+}
+
+function flushWorkflowDraft() {
+  if (draftWriteTimer) {
+    clearTimeout(draftWriteTimer);
+  }
+  if (pendingDraftContent) {
+    persistPendingWorkflowDraft();
+  }
+}
+
+function captureCurrentWorkflowDraft() {
+  const content = tinyflowRef.value?.getData();
+  if (content) {
+    lastObservedWorkflowContent = normalizeWorkflowStartNodes(content);
+    pendingDraftContent = lastObservedWorkflowContent;
+  }
+  flushWorkflowDraft();
+}
+
+function clearPendingWorkflowDraft() {
+  if (draftWriteTimer) {
+    clearTimeout(draftWriteTimer);
+  }
+  draftWriteTimer = undefined;
+  pendingDraftContent = null;
+  clearWorkflowDraft(workflowId.value);
+}
+
+function reconcileWorkflowDraftAfterSave(savedContentSignature: string) {
+  serverContentSignature = savedContentSignature;
+  const currentContent =
+    tinyflowRef.value?.getData() || lastObservedWorkflowContent;
+  if (!currentContent) {
+    clearPendingWorkflowDraft();
+    return;
+  }
+  const normalizedContent = normalizeWorkflowStartNodes(currentContent);
+  lastObservedWorkflowContent = normalizedContent;
+  if (
+    createWorkflowContentSignature(normalizedContent) === savedContentSignature
+  ) {
+    clearPendingWorkflowDraft();
+    return;
+  }
+  if (draftWriteTimer) {
+    clearTimeout(draftWriteTimer);
+  }
+  draftWriteTimer = undefined;
+  pendingDraftContent = normalizedContent;
+  persistPendingWorkflowDraft();
+}
 async function getLlmList() {
   return api.get('/api/v1/model/list').then((res) => {
     llmList.value = res.data;
@@ -652,12 +769,18 @@ function onAsyncExecute(info: any) {
     <ElDrawer
       v-model="singleRunVisible"
       :title="singleNode?.data?.title"
+      append-to-body
       destroy-on-close
-      size="600px"
+      size="min(600px, 94vw)"
     >
       <SingleRun :node="singleNode" :workflow-id="workflowId" />
     </ElDrawer>
-    <ElDrawer v-model="drawerVisible" :title="$t('button.run')" size="600px">
+    <ElDrawer
+      v-model="drawerVisible"
+      :title="$t('button.run')"
+      append-to-body
+      size="min(600px, 94vw)"
+    >
       <div class="mb-2.5 font-semibold">{{ $t('aiWorkflow.params') }}：</div>
       <WorkflowForm
         ref="workflowForm"
@@ -733,6 +856,7 @@ function onAsyncExecute(info: any) {
       :theme="isDark ? 'dark' : 'light'"
       :provider="provider"
       :custom-nodes="customNode"
+      :on-data-change="scheduleWorkflowDraft"
       :on-node-execute="runIndependently"
       :on-run-test="runWorkflow"
     />
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/__tests__/workflowDraftCache.test.ts b/easyflow-ui-admin/app/src/views/ai/workflow/__tests__/workflowDraftCache.test.ts
new file mode 100644
index 00000000..46421ccd
--- /dev/null
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/__tests__/workflowDraftCache.test.ts
@@ -0,0 +1,143 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  clearWorkflowDraft,
+  createWorkflowContentSignature,
+  readWorkflowDraft,
+  writeWorkflowDraft,
+} from '../workflowDraftCache';
+
+const workflowId = 'workflow-1';
+const serverContent = {
+  edges: [],
+  nodes: [{ id: 'start' }],
+};
+const draftContent = {
+  edges: [],
+  nodes: [{ id: 'start' }, { id: 'llm' }],
+};
+
+describe('workflowDraftCache', () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  it('按工作流保存并恢复当前浏览器标签页中的草稿', () => {
+    expect(
+      writeWorkflowDraft({
+        baseContentSignature: createWorkflowContentSignature(serverContent),
+        content: draftContent,
+        workflowId,
+      }),
+    ).toBe(true);
+
+    expect(readWorkflowDraft(workflowId, serverContent)?.content).toEqual(
+      draftContent,
+    );
+    expect(readWorkflowDraft('workflow-2', serverContent)).toBeNull();
+  });
+
+  it('内容回到服务端版本时自动移除草稿', () => {
+    writeWorkflowDraft({
+      baseContentSignature: createWorkflowContentSignature(serverContent),
+      content: draftContent,
+      workflowId,
+    });
+
+    expect(
+      writeWorkflowDraft({
+        baseContentSignature: createWorkflowContentSignature(serverContent),
+        content: serverContent,
+        workflowId,
+      }),
+    ).toBe(true);
+    expect(readWorkflowDraft(workflowId, serverContent)).toBeNull();
+  });
+
+  it('服务端内容已更新时丢弃旧草稿，避免覆盖新版本', () => {
+    writeWorkflowDraft({
+      baseContentSignature: createWorkflowContentSignature(serverContent),
+      content: draftContent,
+      workflowId,
+    });
+
+    const updatedServerContent = {
+      edges: [{ id: 'edge-1' }],
+      nodes: [{ id: 'start' }, { id: 'end' }],
+    };
+    expect(readWorkflowDraft(workflowId, updatedServerContent)).toBeNull();
+    expect(readWorkflowDraft(workflowId, serverContent)).toBeNull();
+  });
+
+  it('保存期间产生的新编辑可基于已保存版本继续缓存', () => {
+    const newerDraftContent = {
+      edges: [{ id: 'edge-1' }],
+      nodes: [...draftContent.nodes, { id: 'end' }],
+    };
+
+    writeWorkflowDraft({
+      baseContentSignature: createWorkflowContentSignature(serverContent),
+      content: draftContent,
+      workflowId,
+    });
+    expect(
+      writeWorkflowDraft({
+        baseContentSignature: createWorkflowContentSignature(draftContent),
+        content: newerDraftContent,
+        workflowId,
+      }),
+    ).toBe(true);
+
+    expect(readWorkflowDraft(workflowId, draftContent)?.content).toEqual(
+      newerDraftContent,
+    );
+  });
+
+  it('缓存不可写时返回失败且不抛出异常', () => {
+    const storage = {
+      getItem: vi.fn(() => null),
+      removeItem: vi.fn(),
+      setItem: vi.fn(() => {
+        throw new Error('quota exceeded');
+      }),
+    };
+
+    expect(
+      writeWorkflowDraft(
+        {
+          baseContentSignature: createWorkflowContentSignature(serverContent),
+          content: draftContent,
+          workflowId,
+        },
+        storage,
+      ),
+    ).toBe(false);
+  });
+
+  it('忽略结构异常的缓存内容', () => {
+    sessionStorage.setItem(
+      `easyflow:workflow-draft:${workflowId}`,
+      JSON.stringify({
+        baseContentSignature: createWorkflowContentSignature(serverContent),
+        content: 'invalid',
+        updatedAt: Date.now(),
+        version: 1,
+        workflowId,
+      }),
+    );
+
+    expect(readWorkflowDraft(workflowId, serverContent)).toBeNull();
+  });
+
+  it('可显式清理已保存草稿', () => {
+    writeWorkflowDraft({
+      baseContentSignature: createWorkflowContentSignature(serverContent),
+      content: draftContent,
+      workflowId,
+    });
+
+    clearWorkflowDraft(workflowId);
+
+    expect(readWorkflowDraft(workflowId, serverContent)).toBeNull();
+  });
+});
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/components/SingleRun.vue b/easyflow-ui-admin/app/src/views/ai/workflow/components/SingleRun.vue
index 43cb3581..cdc4dbb9 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/components/SingleRun.vue
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/components/SingleRun.vue
@@ -93,8 +93,13 @@ function submit() {
 </script>
 
 <template>
-  <div>
-    <ElForm label-position="top" ref="singleRunForm" :model="runParams">
+  <div class="single-run">
+    <ElForm
+      class="single-run__form"
+      label-position="top"
+      ref="singleRunForm"
+      :model="runParams"
+    >
       <template v-if="isFieldMode">
         <div class="single-run-section">
           <div class="single-run-section__title">字段值</div>
@@ -176,12 +181,45 @@ function submit() {
         </ElButton>
       </ElFormItem>
     </ElForm>
-    <div class="mb-2.5 mt-2.5 font-semibold">{{ $t('workflow.result') }}：</div>
-    <ShowJson :value="result" />
+    <section class="single-run-result">
+      <div class="single-run-result__title">{{ $t('workflow.result') }}：</div>
+      <ShowJson class="single-run-result__viewer" :value="result" />
+    </section>
   </div>
 </template>
 
 <style scoped>
+.single-run {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 100%;
+}
+
+.single-run__form {
+  flex: 0 0 auto;
+}
+
+.single-run-result {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 240px;
+}
+
+.single-run-result__title {
+  margin: 10px 0;
+  font-weight: 600;
+}
+
+.single-run-result__viewer {
+  max-width: 100%;
+  max-height: min(60vh, 720px);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
 .single-run-section + .single-run-section {
   margin-top: 20px;
 }
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/workflowDraftCache.ts b/easyflow-ui-admin/app/src/views/ai/workflow/workflowDraftCache.ts
new file mode 100644
index 00000000..539c0e86
--- /dev/null
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/workflowDraftCache.ts
@@ -0,0 +1,147 @@
+type WorkflowDraftStorage = Pick<Storage, 'getItem' | 'removeItem' | 'setItem'>;
+
+interface WorkflowDraftSnapshot {
+  baseContentSignature: string;
+  content: Record<string, unknown>;
+  updatedAt: number;
+  version: 1;
+  workflowId: string;
+}
+
+interface WriteWorkflowDraftOptions {
+  baseContentSignature: string;
+  content: unknown;
+  workflowId: unknown;
+}
+
+const WORKFLOW_DRAFT_PREFIX = 'easyflow:workflow-draft';
+const WORKFLOW_DRAFT_VERSION = 1;
+
+function isWorkflowContent(
+  content: unknown,
+): content is Record<string, unknown> {
+  return (
+    typeof content === 'object' && content !== null && !Array.isArray(content)
+  );
+}
+
+function resolveSessionStorage(): null | WorkflowDraftStorage {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  try {
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+function getStorageKey(workflowId: unknown) {
+  const normalizedId = String(workflowId ?? '').trim();
+  return normalizedId ? `${WORKFLOW_DRAFT_PREFIX}:${normalizedId}` : '';
+}
+
+function removeStoredDraft(
+  storage: null | WorkflowDraftStorage,
+  storageKey: string,
+) {
+  if (!storage || !storageKey) {
+    return;
+  }
+  try {
+    storage.removeItem(storageKey);
+  } catch {
+    // 临时缓存清理失败不应阻断工作流编辑。
+  }
+}
+
+export function createWorkflowContentSignature(content: unknown) {
+  try {
+    return JSON.stringify(content ?? null);
+  } catch {
+    return '';
+  }
+}
+
+export function readWorkflowDraft(
+  workflowId: unknown,
+  serverContent: unknown,
+  storage: null | WorkflowDraftStorage = resolveSessionStorage(),
+) {
+  const storageKey = getStorageKey(workflowId);
+  if (!storage || !storageKey) {
+    return null;
+  }
+
+  try {
+    const raw = storage.getItem(storageKey);
+    if (!raw) {
+      return null;
+    }
+    const snapshot = JSON.parse(raw) as Partial<WorkflowDraftSnapshot>;
+    const serverContentSignature =
+      createWorkflowContentSignature(serverContent);
+    const draftContentSignature = createWorkflowContentSignature(
+      snapshot.content,
+    );
+    const isValid =
+      snapshot.version === WORKFLOW_DRAFT_VERSION &&
+      snapshot.workflowId === String(workflowId) &&
+      snapshot.baseContentSignature === serverContentSignature &&
+      isWorkflowContent(snapshot.content) &&
+      Boolean(draftContentSignature);
+
+    if (!isValid || draftContentSignature === serverContentSignature) {
+      removeStoredDraft(storage, storageKey);
+      return null;
+    }
+
+    return snapshot as WorkflowDraftSnapshot;
+  } catch {
+    removeStoredDraft(storage, storageKey);
+    return null;
+  }
+}
+
+export function writeWorkflowDraft(
+  options: WriteWorkflowDraftOptions,
+  storage: null | WorkflowDraftStorage = resolveSessionStorage(),
+) {
+  const storageKey = getStorageKey(options.workflowId);
+  const contentSignature = createWorkflowContentSignature(options.content);
+  if (
+    !storage ||
+    !storageKey ||
+    !contentSignature ||
+    !options.baseContentSignature ||
+    !isWorkflowContent(options.content)
+  ) {
+    return false;
+  }
+
+  if (contentSignature === options.baseContentSignature) {
+    removeStoredDraft(storage, storageKey);
+    return true;
+  }
+
+  const snapshot: WorkflowDraftSnapshot = {
+    baseContentSignature: options.baseContentSignature,
+    content: options.content,
+    updatedAt: Date.now(),
+    version: WORKFLOW_DRAFT_VERSION,
+    workflowId: String(options.workflowId),
+  };
+  try {
+    storage.setItem(storageKey, JSON.stringify(snapshot));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function clearWorkflowDraft(
+  workflowId: unknown,
+  storage: null | WorkflowDraftStorage = resolveSessionStorage(),
+) {
+  removeStoredDraft(storage, getStorageKey(workflowId));
+}