From d46668b4968067514686423ebf7e13015cc3f186 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Thu, 30 Apr 2026 18:53:34 +0800
Subject: [PATCH] feat(ui): enhance workflow duplication

---
 .../components/workflow/WorkflowGraphExportBox.tsx |  4 +++-
 .../workflow/WorkflowGraphImportInputBox.tsx       |  4 +++-
 ui/src/i18n/locales/en/nls.workflow.json           |  7 ++++---
 ui/src/i18n/locales/zh/nls.workflow.json           |  1 +
 ui/src/pages/workflows/WorkflowList.tsx            | 14 +++++++++++++-
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/workflow/WorkflowGraphExportBox.tsx b/ui/src/components/workflow/WorkflowGraphExportBox.tsx
index 7683c00e8..52e28b92d 100644
--- a/ui/src/components/workflow/WorkflowGraphExportBox.tsx
+++ b/ui/src/components/workflow/WorkflowGraphExportBox.tsx
@@ -136,4 +136,6 @@ const WorkflowGraphExportBox = ({ className, style, data }: WorkflowGraphExportB
   );
 };
 
-export default WorkflowGraphExportBox;
+export default Object.assign(WorkflowGraphExportBox, {
+  serialize,
+});
diff --git a/ui/src/components/workflow/WorkflowGraphImportInputBox.tsx b/ui/src/components/workflow/WorkflowGraphImportInputBox.tsx
index 88b812e25..04c042a0f 100644
--- a/ui/src/components/workflow/WorkflowGraphImportInputBox.tsx
+++ b/ui/src/components/workflow/WorkflowGraphImportInputBox.tsx
@@ -242,4 +242,6 @@ const WorkflowGraphImportInputBox = forwardRef<WorkflowGraphImportInputBoxInstan
   );
 });
 
-export default WorkflowGraphImportInputBox;
+export default Object.assign(WorkflowGraphImportInputBox, {
+  deserialize,
+});
diff --git a/ui/src/i18n/locales/en/nls.workflow.json b/ui/src/i18n/locales/en/nls.workflow.json
index 42df093c4..19459010a 100644
--- a/ui/src/i18n/locales/en/nls.workflow.json
+++ b/ui/src/i18n/locales/en/nls.workflow.json
@@ -56,6 +56,7 @@
   "workflow.detail.baseinfo.name.placeholder": "Please enter workflow name",
   "workflow.detail.baseinfo.description.label": "Workflow description",
   "workflow.detail.baseinfo.description.placeholder": "Please enter workflow description",
+  "workflow.detail.baseinfo.graph.label": "Workflow graph (Read-only)",
   "workflow.detail.design.tab": "Orchestration",
   "workflow.detail.design.editor.placeholder": "Please configure",
   "workflow.detail.design.editor.add_node": "Add node",
@@ -87,8 +88,8 @@
   "workflow.detail.design.action.import.modal.title": "Import workflow",
   "workflow.detail.design.action.import.modal.ok_button": "Import",
   "workflow.detail.design.action.import.form.format.label": "Format",
-  "workflow.detail.design.action.import.form.content.label": "Content",
-  "workflow.detail.design.action.import.form.content.errmsg.invalid": "Please enter a valid content",
+  "workflow.detail.design.action.import.form.content.label": "Graph",
+  "workflow.detail.design.action.import.form.content.errmsg.invalid": "Please enter a valid graph content",
   "workflow.detail.design.action.import.form.content.errmsg.first_node_start": "The first node must be a start node",
   "workflow.detail.design.action.import.form.content.errmsg.last_node_end": "The last node must be an end node",
   "workflow.detail.design.action.import.form.content.errmsg.duplicate_start": "The start node must be unique",
@@ -100,7 +101,7 @@
   "workflow.detail.design.action.export.button": "Export",
   "workflow.detail.design.action.export.modal.title": "Export workflow",
   "workflow.detail.design.action.export.form.format.label": "Format",
-  "workflow.detail.design.action.export.form.content.label": "Content",
+  "workflow.detail.design.action.export.form.content.label": "Graph",
   "workflow.detail.design.uncompleted_design.alert": "The orchestration is not ready. Please check if there are any nodes not configured.",
   "workflow.detail.design.unpublished_draft.alert": "The orchestration is not released yet.",
   "workflow.detail.design.unsaved_changes.confirm": "You have unsaved changes. Do you really want to close the panel and drop those changes?",
diff --git a/ui/src/i18n/locales/zh/nls.workflow.json b/ui/src/i18n/locales/zh/nls.workflow.json
index 30979f2fe..4e2303fe1 100644
--- a/ui/src/i18n/locales/zh/nls.workflow.json
+++ b/ui/src/i18n/locales/zh/nls.workflow.json
@@ -56,6 +56,7 @@
   "workflow.detail.baseinfo.name.placeholder": "请输入工作流名称",
   "workflow.detail.baseinfo.description.label": "工作流描述",
   "workflow.detail.baseinfo.description.placeholder": "请输入工作流描述",
+  "workflow.detail.baseinfo.graph.label": "工作流图（只读）",
   "workflow.detail.design.tab": "流程编排",
   "workflow.detail.design.editor.placeholder": "请完成配置",
   "workflow.detail.design.editor.add_node": "添加节点",
diff --git a/ui/src/pages/workflows/WorkflowList.tsx b/ui/src/pages/workflows/WorkflowList.tsx
index f1a6d56c6..2e52d6e4e 100644
--- a/ui/src/pages/workflows/WorkflowList.tsx
+++ b/ui/src/pages/workflows/WorkflowList.tsx
@@ -10,9 +10,11 @@ import { ClientResponseError } from "pocketbase";
 import { z } from "zod";
 
 import { startRun as startWorkflowRun } from "@/api/workflows";
+import CodeTextInput from "@/components/CodeTextInput";
 import DrawerForm from "@/components/DrawerForm";
 import Empty from "@/components/Empty";
 import Show from "@/components/Show";
+import WorkflowGraphExportBox from "@/components/workflow/WorkflowGraphExportBox";
 import WorkflowStatus from "@/components/workflow/WorkflowStatus";
 import { WORKFLOW_TRIGGERS, type WorkflowModel, duplicateNodes } from "@/domain/workflow";
 import { useAntdForm, useAppSettings } from "@/hooks";
@@ -54,7 +56,7 @@ const WorkflowList = () => {
         <div className="flex max-w-full flex-col gap-1 truncate">
           <Typography.Text ellipsis>{record.name || "\u00A0"}</Typography.Text>
           <Typography.Text ellipsis type="secondary">
-            {record.description || "\u00A0"}
+            {record.description}
           </Typography.Text>
         </div>
       ),
@@ -629,6 +631,16 @@ const InternalDuplicateDrawer = ({
       <Form.Item name="description" label={t("workflow.detail.baseinfo.description.label")} rules={[formRule]}>
         <Input placeholder={t("workflow.detail.baseinfo.description.placeholder")} />
       </Form.Item>
+
+      <Form.Item label={t("workflow.detail.baseinfo.graph.label")}>
+        <CodeTextInput
+          height="calc(min(60vh, 512px))"
+          language="yaml"
+          lineWrapping={false}
+          value={data?.graphDraft ? WorkflowGraphExportBox.serialize(data.graphDraft, "yaml") : void 0}
+          readOnly
+        />
+      </Form.Item>
     </DrawerForm>
   );
 };