From 8e2901775eacf86856dfba18d8dbf3f18390fdf9 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 30 Jan 2026 16:40:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(workflow):=20=E4=B8=BA=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=B7=BB=E5=8A=A0=E6=B7=A1=E5=85=A5=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用 motion-v 库为 iframe 容器添加淡入动画，提升用户体验
---
 .../views/workflow/components/flow-preview.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/web-antd/src/views/workflow/components/flow-preview.vue b/apps/web-antd/src/views/workflow/components/flow-preview.vue
index 673a068a..64a71141 100644
--- a/apps/web-antd/src/views/workflow/components/flow-preview.vue
+++ b/apps/web-antd/src/views/workflow/components/flow-preview.vue
@@ -5,6 +5,8 @@ import { useAppConfig } from '@vben/hooks';
 import { stringify } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
 
+import { motion } from 'motion-v';
+
 import { useWarmflowIframe } from './hook';
 
 defineOptions({ name: 'FlowPreview' });
@@ -38,9 +40,15 @@ const { iframeRef } = useWarmflowIframe();
 </script>
 
 <template>
-  <iframe
-    ref="iframeRef"
-    :src="url"
-    class="h-[600px] w-full rounded-[6px] border"
-  ></iframe>
+  <motion.div
+    :initial="{ opacity: 0 }"
+    :animate="{ opacity: 1 }"
+    :transition="{ duration: 0.5 }"
+  >
+    <iframe
+      ref="iframeRef"
+      :src="url"
+      class="h-[600px] w-full rounded-[6px] border"
+    ></iframe>
+  </motion.div>
 </template>