perf: 优化并重构工作流幕布UI表现

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue

@@ -6,7 +6,7 @@ import {usePreferences} from '@easyflow/preferences';
 import {getOptions, sortNodes} from '@easyflow/utils';
 import {getIconByValue} from '#/views/ai/model/modelUtils/defaultIcon';
 
-import {ArrowLeft, CircleCheck, Close, Position} from '@element-plus/icons-vue';
+import {ArrowLeft, CircleCheck, Close} from '@element-plus/icons-vue';
 import {Tinyflow} from '@tinyflow-ai/vue';
 import {ElButton, ElDrawer, ElMessage, ElSkeleton} from 'element-plus';
 
@@ -512,7 +512,7 @@ function onAsyncExecute(info: any) {
           </span>
         </ElButton>
       </div>
-      <div>
+      <div class="workflow-head-actions">
         <ElButton
           :loading="checkLoading"
           :disabled="saveLoading"
@@ -521,13 +521,6 @@ function onAsyncExecute(info: any) {
         >
           {{ $t('aiWorkflow.check') }}
         </ElButton>
-        <ElButton
-          :disabled="saveLoading || checkLoading"
-          :icon="Position"
-          @click="runWorkflow"
-        >
-          {{ $t('button.runTest') }}
-        </ElButton>
         <ElButton
           type="primary"
           :disabled="saveLoading || checkLoading"
@@ -546,6 +539,7 @@ function onAsyncExecute(info: any) {
       :provider="provider"
       :custom-nodes="customNode"
       :on-node-execute="runIndependently"
+      :on-run-test="runWorkflow"
     />
     <transition name="checklist-slide">
       <div v-if="checkIssuesVisible" class="checklist-panel">
@@ -598,20 +592,30 @@ function onAsyncExecute(info: any) {
 </template>
 
 <style scoped>
-:deep(.tf-toolbar-container-body) {
-  height: calc(100vh - 365px) !important;
-  overflow-y: auto;
-}
-
 :deep(.agentsflow) {
   height: calc(100vh - 130px) !important;
 }
 
+:deep(.tf-bottom-dock) {
+  left: 50% !important;
+  bottom: 16px !important;
+  transform: translateX(-50%) !important;
+  z-index: 46 !important;
+}
+
 .head-div {
+  --workflow-bottom-dock-height: 56px;
+  --workflow-checklist-offset: calc(var(--workflow-bottom-dock-height) + 24px);
   position: relative;
   background-color: var(--el-bg-color);
 }
 
+.workflow-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .tiny-flow-container {
   width: 100%;
   height: calc(100vh - 150px);
@@ -625,8 +629,8 @@ function onAsyncExecute(info: any) {
   position: absolute;
   left: 20px;
   right: 20px;
-  bottom: 16px;
-  z-index: 40;
+  bottom: var(--workflow-checklist-offset);
+  z-index: 60;
   max-height: min(320px, 42vh);
   display: flex;
   flex-direction: column;