From 1404c2ddc5b82a750045bc062690015830171bf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Tue, 28 Jul 2026 12:23:20 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81=E4=B8=8E=E6=99=BA=E8=83=BD=E4=BD=93=E7=BC=96=E6=8E=92?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用登录态独立全屏壳层承载编排页面

- 保留鉴权、锁屏、水印及原有设计器功能

- 增加独立路由回归测试
---
 .../layouts/AuthenticatedStandaloneLayout.vue | 75 +++++++++++++++++++
 .../__tests__/agent-design-route.test.ts      | 28 +++++++
 .../__tests__/workflow-design-route.test.ts   | 23 ++++++
 .../router/routes/external/agent-design.ts    | 23 ++++++
 .../app/src/router/routes/modules/agent.ts    | 15 +---
 .../app/src/router/routes/modules/workflow.ts |  6 +-
 .../ai/agents/AgentDesignerStandaloneView.vue | 11 +++
 .../workflow/WorkflowDesignStandaloneView.vue | 31 ++++++++
 8 files changed, 197 insertions(+), 15 deletions(-)
 create mode 100644 easyflow-ui-admin/app/src/layouts/AuthenticatedStandaloneLayout.vue
 create mode 100644 easyflow-ui-admin/app/src/router/__tests__/agent-design-route.test.ts
 create mode 100644 easyflow-ui-admin/app/src/router/__tests__/workflow-design-route.test.ts
 create mode 100644 easyflow-ui-admin/app/src/router/routes/external/agent-design.ts
 create mode 100644 easyflow-ui-admin/app/src/views/ai/agents/AgentDesignerStandaloneView.vue
 create mode 100644 easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesignStandaloneView.vue

diff --git a/easyflow-ui-admin/app/src/layouts/AuthenticatedStandaloneLayout.vue b/easyflow-ui-admin/app/src/layouts/AuthenticatedStandaloneLayout.vue
new file mode 100644
index 00000000..0c9b3ba1
--- /dev/null
+++ b/easyflow-ui-admin/app/src/layouts/AuthenticatedStandaloneLayout.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+
+import { AuthenticationLoginExpiredModal } from '@easyflow/common-ui';
+import { useWatermark } from '@easyflow/hooks';
+import { LockScreen } from '@easyflow/layouts';
+import { preferences } from '@easyflow/preferences';
+import { useAccessStore, useUserStore } from '@easyflow/stores';
+
+import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';
+
+const accessStore = useAccessStore();
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const { destroyWatermark, updateWatermark } = useWatermark();
+
+const avatar = computed(
+  () => userStore.userInfo?.avatar ?? preferences.app.defaultAvatar,
+);
+
+async function handleLogout() {
+  await authStore.logout(false);
+}
+
+watch(
+  () => ({
+    enable: preferences.app.watermark,
+    content: preferences.app.watermarkContent,
+  }),
+  async ({ enable, content }) => {
+    if (enable) {
+      await updateWatermark({
+        content:
+          content ||
+          `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
+      });
+    } else {
+      destroyWatermark();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <div class="authenticated-standalone-layout">
+    <slot></slot>
+    <AuthenticationLoginExpiredModal
+      v-model:open="accessStore.loginExpired"
+      :avatar
+    >
+      <LoginForm />
+    </AuthenticationLoginExpiredModal>
+    <Transition v-if="preferences.widget.lockScreen" name="slide-up">
+      <LockScreen
+        v-if="accessStore.isLockScreen"
+        :avatar
+        @to-login="handleLogout"
+      />
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.authenticated-standalone-layout {
+  width: 100%;
+  height: 100vh;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--el-bg-color);
+}
+</style>
diff --git a/easyflow-ui-admin/app/src/router/__tests__/agent-design-route.test.ts b/easyflow-ui-admin/app/src/router/__tests__/agent-design-route.test.ts
new file mode 100644
index 00000000..e49afce6
--- /dev/null
+++ b/easyflow-ui-admin/app/src/router/__tests__/agent-design-route.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+
+import agentDesignRoutes from '../routes/external/agent-design';
+import agentRoutes from '../routes/modules/agent';
+
+describe('agent design route', () => {
+  it('keeps the standalone designer outside dynamic menu routes', () => {
+    const designRoute = agentDesignRoutes.find(
+      (route) => route.name === 'AgentDesigner',
+    );
+
+    expect(agentRoutes.some((route) => route.name === 'AgentDesigner')).toBe(
+      false,
+    );
+    expect(designRoute).toBeDefined();
+    expect(designRoute?.path).toBe('/ai/agents/designer/:id');
+    expect(designRoute?.meta).toMatchObject({
+      activePath: '/ai/agents',
+      hideInBreadcrumb: true,
+      hideInMenu: true,
+      hideInTab: true,
+      noBasicLayout: true,
+      openInNewWindow: true,
+    });
+    expect(designRoute?.meta?.ignoreAccess).not.toBe(true);
+    expect(designRoute?.component).toBeTypeOf('function');
+  });
+});
diff --git a/easyflow-ui-admin/app/src/router/__tests__/workflow-design-route.test.ts b/easyflow-ui-admin/app/src/router/__tests__/workflow-design-route.test.ts
new file mode 100644
index 00000000..b60a894d
--- /dev/null
+++ b/easyflow-ui-admin/app/src/router/__tests__/workflow-design-route.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import workflowRoutes from '../routes/modules/workflow';
+
+describe('workflow design route', () => {
+  it('uses the authenticated standalone shell without exposing a menu or tab', () => {
+    const designRoute = workflowRoutes.find(
+      (route) => route.name === 'WorkflowDesign',
+    );
+
+    expect(designRoute).toBeDefined();
+    expect(designRoute?.path).toBe('/ai/workflow/design');
+    expect(designRoute?.meta).toMatchObject({
+      activePath: '/ai/workflow',
+      hideInBreadcrumb: true,
+      hideInMenu: true,
+      hideInTab: true,
+      noBasicLayout: true,
+    });
+    expect(designRoute?.meta?.ignoreAccess).not.toBe(true);
+    expect(designRoute?.component).toBeTypeOf('function');
+  });
+});
diff --git a/easyflow-ui-admin/app/src/router/routes/external/agent-design.ts b/easyflow-ui-admin/app/src/router/routes/external/agent-design.ts
new file mode 100644
index 00000000..15902691
--- /dev/null
+++ b/easyflow-ui-admin/app/src/router/routes/external/agent-design.ts
@@ -0,0 +1,23 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'AgentDesigner',
+    path: '/ai/agents/designer/:id',
+    component: () =>
+      import('#/views/ai/agents/AgentDesignerStandaloneView.vue'),
+    meta: {
+      title: $t('menus.ai.agents'),
+      openInNewWindow: true,
+      hideInMenu: true,
+      hideInTab: true,
+      hideInBreadcrumb: true,
+      noBasicLayout: true,
+      activePath: '/ai/agents',
+    },
+  },
+];
+
+export default routes;
diff --git a/easyflow-ui-admin/app/src/router/routes/modules/agent.ts b/easyflow-ui-admin/app/src/router/routes/modules/agent.ts
index 16648870..e4c737bb 100644
--- a/easyflow-ui-admin/app/src/router/routes/modules/agent.ts
+++ b/easyflow-ui-admin/app/src/router/routes/modules/agent.ts
@@ -1,19 +1,6 @@
-import type {RouteRecordRaw} from 'vue-router';
-
-import {$t} from '#/locales';
+import type { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
-  {
-    name: 'AgentDesigner',
-    path: '/ai/agents/designer/:id',
-    component: () => import('#/views/ai/agents/AgentDesigner.vue'),
-    meta: {
-      title: $t('menus.ai.agents'),
-      openInNewWindow: true,
-      hideInMenu: true,
-      activePath: '/ai/agents',
-    },
-  },
   {
     name: 'AgentChat',
     path: '/ai/agent-chat',
diff --git a/easyflow-ui-admin/app/src/router/routes/modules/workflow.ts b/easyflow-ui-admin/app/src/router/routes/modules/workflow.ts
index 8bce4f3b..808c47ce 100644
--- a/easyflow-ui-admin/app/src/router/routes/modules/workflow.ts
+++ b/easyflow-ui-admin/app/src/router/routes/modules/workflow.ts
@@ -8,11 +8,15 @@ const routes: RouteRecordRaw[] = [
       icon: 'ant-design:apartment-outlined',
       title: '工作流设计',
       hideInMenu: true,
+      hideInTab: true,
+      hideInBreadcrumb: true,
+      noBasicLayout: true,
       activePath: '/ai/workflow',
     },
     name: 'WorkflowDesign',
     path: '/ai/workflow/design',
-    component: () => import('#/views/ai/workflow/WorkflowDesign.vue'),
+    component: () =>
+      import('#/views/ai/workflow/WorkflowDesignStandaloneView.vue'),
   },
   {
     meta: {
diff --git a/easyflow-ui-admin/app/src/views/ai/agents/AgentDesignerStandaloneView.vue b/easyflow-ui-admin/app/src/views/ai/agents/AgentDesignerStandaloneView.vue
new file mode 100644
index 00000000..60367294
--- /dev/null
+++ b/easyflow-ui-admin/app/src/views/ai/agents/AgentDesignerStandaloneView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import AuthenticatedStandaloneLayout from '#/layouts/AuthenticatedStandaloneLayout.vue';
+
+import AgentDesigner from './AgentDesigner.vue';
+</script>
+
+<template>
+  <AuthenticatedStandaloneLayout>
+    <AgentDesigner />
+  </AuthenticatedStandaloneLayout>
+</template>
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesignStandaloneView.vue b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesignStandaloneView.vue
new file mode 100644
index 00000000..e2819d61
--- /dev/null
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesignStandaloneView.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import AuthenticatedStandaloneLayout from '#/layouts/AuthenticatedStandaloneLayout.vue';
+
+import WorkflowDesign from './WorkflowDesign.vue';
+</script>
+
+<template>
+  <AuthenticatedStandaloneLayout class="workflow-design-standalone">
+    <WorkflowDesign />
+  </AuthenticatedStandaloneLayout>
+</template>
+
+<style scoped>
+.workflow-design-standalone :deep(.head-div) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.workflow-design-standalone :deep(.agentsflow) {
+  height: 100% !important;
+}
+
+.workflow-design-standalone :deep(.tiny-flow-container) {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+}
+</style>