update DragSplit增加上下分割布局，仿真执行页面替换为使用DragSplit

src/components/common/dragSplit/index.vue

@@ -1,40 +1,138 @@
 <template>
   <div class="page-comp comp-drag-split">
-    <div class="content" ref="containerRef" @mouseleave="stopDragFun">
-      <div v-show="!hideLeft" class="left-box" :style="{ width: leftWidth + 'px' }">
-        <slot name="left" />
-      </div>
-      <div v-show="!hideLeft" class="darg-line" @mousedown="startDragFun">||</div>
-      <div class="right-box">
-        <div class="right-content">
-          <div class="slot">
-            <slot name="right" />
+    <div class="content" :class="dragTypeClass" ref="containerRef" @mouseleave="stopDragFun">
+      <!-- left-right 左右分割-->
+      <template v-if="isLeftRight">
+        <div v-show="!hideLeft" class="left-box" :style="{ width: leftBoxWidthStyle }">
+          <slot name="left" />
+        </div>
+        <div v-show="!hideLeft && !hideRight" class="darg-line line-col" @mousedown="startDragFun">
+          ||
+        </div>
+        <div v-show="!hideRight" class="right-box" :style="{ minWidth: minRightWidth + 'px' }">
+          <div class="right-content">
+            <div class="slot">
+              <slot name="right" />
+            </div>
           </div>
         </div>
-      </div>
+      </template>
+
+      <!-- top-bottom 上下分割-->
+      <template v-else>
+        <div v-show="!hideTop" class="top-box" :style="{ height: topBoxHeightStyle }">
+          <slot name="top" />
+        </div>
+        <div v-show="!hideTop && !hideBottom" class="darg-line line-row" @mousedown="startDragFun">
+          ==
+        </div>
+        <div v-show="!hideBottom" class="bottom-box" :style="{ minHeight: minBottomHeight + 'px' }">
+          <div class="bottom-content">
+            <div class="slot">
+              <slot name="bottom" />
+            </div>
+          </div>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+
+type DragType = 'left-right' | 'top-bottom';
 
 interface Props {
-  leftContentWidth: any;
+  dragType?: DragType;
+
+  leftContentWidth?: any;
+  topContentHeight?: any;
+
   hideLeft?: boolean;
+  hideRight?: boolean;
+
+  hideTop?: boolean;
+  hideBottom?: boolean;
+
+  minLeftWidth?: number;
+  minRightWidth?: number;
+
+  minTopHeight?: number;
+  minBottomHeight?: number;
+
+  dragLineSize?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  leftContentWidth: 0,
-  hideLeft: false,
+  dragType: 'left-right', // 分割类型
+
+  leftContentWidth: 0, // 左侧宽度
+  hideLeft: false, // 是否隐藏左侧
+  hideRight: false, // 是否隐藏右侧
+  minLeftWidth: 50, // 左侧最小宽度
+  minRightWidth: 50, // 右侧最小宽度
+
+  topContentHeight: 0, // 上侧高度
+  hideTop: false, // 是否隐藏上侧
+  hideBottom: false, // 是否隐藏下侧
+  minTopHeight: 50, // 上侧最小高度
+  minBottomHeight: 50, // 下侧最小高度
+
+  dragLineSize: 10, // 拖拽线大小
 });
 
+const isLeftRight = computed(() => props.dragType === 'left-right');
+const dragTypeClass = computed(() => (isLeftRight.value ? 'left-right' : 'top-bottom'));
+
 const leftWidth = ref(props.leftContentWidth); // 左侧初始宽度
+const topHeight = ref(props.topContentHeight); // 上侧初始高度
+
+// 判断是否为百分比单位（left-right），兼容百分比
+const isPercentage = computed(() => {
+  return typeof props.leftContentWidth === 'string' && props.leftContentWidth.includes('%');
+});
+
+const leftBoxWidthStyle = computed(() => {
+  if (props.hideRight) return '100%';
+  if (isPercentage.value) {
+    if (typeof leftWidth.value === 'string') return leftWidth.value;
+    return `${leftWidth.value}%`;
+  }
+  if (typeof leftWidth.value === 'string') {
+    // 兼容传入 '200px' / '200'
+    return leftWidth.value.includes('px') ? leftWidth.value : `${leftWidth.value}px`;
+  }
+  return `${leftWidth.value}px`;
+});
+
+// 判断是否为百分比单位（top-bottom），兼容百分比
+const isTopPercentage = computed(() => {
+  return typeof props.topContentHeight === 'string' && props.topContentHeight.includes('%');
+});
+const topBoxHeightStyle = computed(() => {
+  if (props.hideBottom) return '100%';
+  if (isTopPercentage.value) {
+    if (typeof topHeight.value === 'string') return topHeight.value;
+    return `${topHeight.value}%`;
+  }
+  if (typeof topHeight.value === 'string') {
+    // 兼容传入 '200px' / '200'
+    return topHeight.value.includes('px') ? topHeight.value : `${topHeight.value}px`;
+  }
+  return `${topHeight.value}px`;
+});
+
 const containerRef = ref<any>(null);
 let isDragging = false;
 
 // 开始拖拽
 const startDragFun = () => {
+  if (isLeftRight.value) {
+    if (props.hideLeft || props.hideRight) return;
+  } else {
+    if (props.hideTop || props.hideBottom) return;
+  }
   isDragging = true;
   document.addEventListener('mousemove', dragFun);
   document.addEventListener('mouseup', stopDragFun);
@@ -44,11 +142,44 @@ const startDragFun = () => {
 const dragFun = (e: any) => {
   if (!isDragging || !containerRef.value) return;
   const containerRect = containerRef.value.getBoundingClientRect();
-  let newLeftWidth = e.clientX - containerRect.left;
-  const minPaneWidth = 50; // 最小宽度
-  const maxLeftWidth = containerRect.width - minPaneWidth - 10; // 拖拽区域宽度
-  newLeftWidth = Math.max(minPaneWidth, Math.min(newLeftWidth, maxLeftWidth));
-  leftWidth.value = newLeftWidth;
+
+  const dragLineSizePx = props.dragLineSize;
+
+  if (isLeftRight.value) {
+    // 左右结构
+    const newLeftWidthPx = e.clientX - containerRect.left;
+    const minLeftWidthPx = props.minLeftWidth;
+    const minRightWidthPx = props.minRightWidth;
+
+    const maxLeftWidthPx = containerRect.width - dragLineSizePx - minRightWidthPx;
+    const clampedLeftWidthPx = Math.max(
+      minLeftWidthPx,
+      Math.min(newLeftWidthPx, Math.max(minLeftWidthPx, maxLeftWidthPx))
+    );
+
+    if (isPercentage.value) {
+      leftWidth.value = (clampedLeftWidthPx / containerRect.width) * 100;
+    } else {
+      leftWidth.value = clampedLeftWidthPx;
+    }
+  } else {
+    // 上下结构
+    const newTopHeightPx = e.clientY - containerRect.top;
+    const minTopHeightPx = props.minTopHeight;
+    const minBottomHeightPx = props.minBottomHeight;
+
+    const maxTopHeightPx = containerRect.height - dragLineSizePx - minBottomHeightPx;
+    const clampedTopHeightPx = Math.max(
+      minTopHeightPx,
+      Math.min(newTopHeightPx, Math.max(minTopHeightPx, maxTopHeightPx))
+    );
+
+    if (isTopPercentage.value) {
+      topHeight.value = (clampedTopHeightPx / containerRect.height) * 100;
+    } else {
+      topHeight.value = clampedTopHeightPx;
+    }
+  }
 };
 
 // 停止拖拽
@@ -68,8 +199,18 @@ const stopDragFun = () => {
     width: 100%;
     height: 100%;
   }
+
+  .content.left-right {
+    flex-direction: row;
+  }
+
+  .content.top-bottom {
+    flex-direction: column;
+  }
+
   .left-box {
     overflow-y: auto;
+    flex-shrink: 0;
   }
   .right-box {
     flex: 1;
@@ -83,18 +224,58 @@ const stopDragFun = () => {
       }
     }
   }
+
+  .top-box {
+    overflow-y: auto;
+    flex-shrink: 0;
+    width: 100%;
+  }
+
+  .bottom-box {
+    flex: 1;
+    width: 100%;
+    overflow-y: auto;
+
+    .bottom-content {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      .slot {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+
   .darg-line {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 10px;
     background-color: var(--el-bg-color-page);
     color: var(--el-text-color-secondary);
     font-weight: bold;
     user-select: none;
-    cursor: w-resize;
-    &:hover {
-      background-color: var(--el-border-color);
+
+    // 水平分割线样式（top-bottom）
+    &.line-row {
+      width: 100%;
+      height: 10px;
+      cursor: n-resize;
+      border-radius: 4px;
+      &:hover {
+        background-color: var(--el-border-color);
+      }
+    }
+
+    // 垂直分割线样式（left-right）
+    &.line-col {
+      width: 10px;
+      height: 100%;
+      cursor: w-resize;
+      border-radius: 4px;
+      &:hover {
+        background-color: var(--el-border-color);
+      }
     }
   }
 }

src/views/task/execution/components/runDetailPage/index.vue

@@ -1,112 +1,143 @@
 <template>
   <div class="run-detail-page">
-    <div class="run-title-box" v-show="!leftFullScreen && !rightFullScreen">
-      <div class="task-info">
-        <div class="task-name">{{ currentRunNodeInfo?.runName }}</div>
-        <div class="task-status">
-          任务状态：
-          <div class="status">
-            <el-icon class="upload" title="进行中" v-if="runFlowPocesInfo?.status === 'running'">
-              <HelpFilled />
-            </el-icon>
-            <el-icon
-              class="success"
-              title="已完成"
-              v-else-if="runFlowPocesInfo?.status === 'completed'"
-            >
-              <SuccessFilled />
-            </el-icon>
-            <el-icon
-              class="upload"
-              title="挂起中"
-              v-else-if="runFlowPocesInfo?.status === 'suspended'"
-            >
-              <UploadFilled />
-            </el-icon>
-            <el-icon
-              class="upload"
-              title="等待操作"
-              v-else-if="runFlowPocesInfo?.status === 'waiting_for_user'"
-            >
-              <UploadFilled />
-            </el-icon>
-            <el-icon class="warn" title="异常" v-else-if="runFlowPocesInfo?.status === 'error'">
-              <WarningFilled />
-            </el-icon>
-            <el-icon class="info" title="未开始" v-else>
-              <InfoFilled />
-            </el-icon>
-            <span class="status-title">{{
-              runFlowPocesInfo?.status ? statusList[runFlowPocesInfo?.status] : '未开始'
-            }}</span>
+    <DragSplit
+      dragType="top-bottom"
+      topContentHeight="270"
+      :minTopHeight="240"
+      :minBottomHeight="200"
+    >
+      <template #top>
+        <div class="top">
+          <div class="run-title-box" v-show="!leftFullScreen && !rightFullScreen">
+            <div class="task-info">
+              <div class="task-name">{{ currentRunNodeInfo?.runName }}</div>
+              <div class="task-status">
+                任务状态：
+                <div class="status">
+                  <el-icon
+                    class="upload"
+                    title="进行中"
+                    v-if="runFlowPocesInfo?.status === 'running'"
+                  >
+                    <HelpFilled />
+                  </el-icon>
+                  <el-icon
+                    class="success"
+                    title="已完成"
+                    v-else-if="runFlowPocesInfo?.status === 'completed'"
+                  >
+                    <SuccessFilled />
+                  </el-icon>
+                  <el-icon
+                    class="upload"
+                    title="挂起中"
+                    v-else-if="runFlowPocesInfo?.status === 'suspended'"
+                  >
+                    <UploadFilled />
+                  </el-icon>
+                  <el-icon
+                    class="upload"
+                    title="等待操作"
+                    v-else-if="runFlowPocesInfo?.status === 'waiting_for_user'"
+                  >
+                    <UploadFilled />
+                  </el-icon>
+                  <el-icon
+                    class="warn"
+                    title="异常"
+                    v-else-if="runFlowPocesInfo?.status === 'error'"
+                  >
+                    <WarningFilled />
+                  </el-icon>
+                  <el-icon class="info" title="未开始" v-else>
+                    <InfoFilled />
+                  </el-icon>
+                  <span class="status-title">{{
+                    runFlowPocesInfo?.status ? statusList[runFlowPocesInfo?.status] : '未开始'
+                  }}</span>
+                </div>
+              </div>
+              <div class="task-time">
+                作业流执行时间：
+                <el-icon class="blue">
+                  <Odometer />
+                </el-icon>
+                <span class="name"> {{ runFlowPocesInfo?.durationFormatted || '--' }}</span>
+              </div>
+            </div>
+            <div class="task-operate">
+              <!-- runInfo.status === RUN_STATUS.UNSTART -->
+              <el-button
+                type="primary"
+                v-if="!runInfo.status"
+                :disabled="uploadFileFlag"
+                @click="startTaskRunJobFun"
+                >开始</el-button
+              >
+              <el-button type="primary" @click="visible = true">HPC列表</el-button>
+
+              <el-button @click="refreshFun">刷新</el-button>
+            </div>
+          </div>
+          <div class="run-flow-box" v-show="!leftFullScreen && !rightFullScreen">
+            <div class="flow-box-inner" v-if="runInfo.flowTemplate && showPage">
+              <runFlowPage
+                :run-info="runInfo"
+                @change="changeCurrentFlowNodeFun"
+                @update="updateFlowPageParamListFun"
+                @execute="executeFun"
+              >
+              </runFlowPage>
+            </div>
           </div>
         </div>
-        <div class="task-time">
-          作业流执行时间：
-          <el-icon class="blue">
-            <Odometer />
-          </el-icon>
-          <span class="name"> {{ runFlowPocesInfo?.durationFormatted || '--' }}</span>
-        </div>
-      </div>
-      <div class="task-operate">
-        <!-- runInfo.status === RUN_STATUS.UNSTART -->
-        <el-button
-          type="primary"
-          v-if="!runInfo.status"
-          :disabled="uploadFileFlag"
-          @click="startTaskRunJobFun"
-          >开始</el-button
+      </template>
+      <template #bottom>
+        <div
+          :class="leftFullScreen || rightFullScreen ? 'run-info-box is-all-page' : 'run-info-box'"
         >
-        <el-button type="primary" @click="visible = true">HPC列表</el-button>
+          <DragSplit
+            leftContentWidth="50%"
+            :hideLeft="rightFullScreen"
+            :hideRight="leftFullScreen"
+            :minLeftWidth="300"
+            :minRightWidth="300"
+          >
+            <template #left>
+              <div
+                v-if="!rightFullScreen"
+                :class="leftFullScreen ? 'info-box-left allpage ' : 'info-box-left'"
+              >
+                <div class="bottom-title">
+                  <div class="title-name">节点详情</div>
+                  <div class="title-operate">
+                    <el-icon
+                      v-if="!leftFullScreen"
+                      @click="toggleLeftFullScreenFun"
+                      class="icon-style"
+                      ><FullScreen
+                    /></el-icon>
+                    <el-icon v-else @click="toggleLeftFullScreenFun" class="icon-style"
+                      ><Close
+                    /></el-icon>
+                  </div>
+                </div>
 
-        <el-button @click="refreshFun">刷新</el-button>
-      </div>
-    </div>
-
-    <div class="run-flow-box" v-show="!leftFullScreen && !rightFullScreen">
-      <div class="flow-box-inner" v-if="runInfo.flowTemplate && showPage">
-        <runFlowPage
-          :run-info="runInfo"
-          @change="changeCurrentFlowNodeFun"
-          @update="updateFlowPageParamListFun"
-          @execute="executeFun"
-        >
-        </runFlowPage>
-      </div>
-    </div>
-
-    <div :class="leftFullScreen || rightFullScreen ? 'run-info-box is-all-page' : 'run-info-box'">
-      <div
-        v-if="!rightFullScreen"
-        :class="leftFullScreen ? 'info-box-left allpage ' : 'info-box-left'"
-      >
-        <div class="bottom-title">
-          <div class="title-name">节点详情</div>
-          <div class="title-operate">
-            <el-icon
-              v-if="!leftFullScreen"
-              @click="leftFullScreen = !leftFullScreen"
-              class="icon-style"
-              ><FullScreen
-            /></el-icon>
-            <el-icon v-else @click="leftFullScreen = !leftFullScreen" class="icon-style"
-              ><Close
-            /></el-icon>
-          </div>
-        </div>
-
-        <div class="bottom-info-content">
-          <div class="tabs-box left-tab">
-            <el-tabs v-model="nodeActiveName" class="demo-tabs" @tab-change="handleLeftClickFun">
-              <el-tab-pane label="节点操作" name="info"></el-tab-pane>
-              <el-tab-pane label="输入数据" name="input"></el-tab-pane>
-              <!-- <el-tab-pane label="仿真参数" name="param"></el-tab-pane> -->
-              <el-tab-pane label="输出数据" name="output"></el-tab-pane>
-            </el-tabs>
-          </div>
-          <div class="operate-box">
-            <!-- <el-switch
+                <div class="bottom-info-content">
+                  <div class="tabs-box left-tab">
+                    <el-tabs
+                      v-model="nodeActiveName"
+                      class="demo-tabs"
+                      @tab-change="handleLeftClickFun"
+                    >
+                      <el-tab-pane label="节点操作" name="info"></el-tab-pane>
+                      <el-tab-pane label="输入数据" name="input"></el-tab-pane>
+                      <!-- <el-tab-pane label="仿真参数" name="param"></el-tab-pane> -->
+                      <el-tab-pane label="输出数据" name="output"></el-tab-pane>
+                    </el-tabs>
+                  </div>
+                  <div class="operate-box">
+                    <!-- <el-switch
               v-model="executeMode"
               class="mr10"
               active-value="AUTO"
@@ -115,28 +146,28 @@
               inactive-text="手动执行"
               @change="FlowNodeExecuteModeChangeFun"
             /> -->
-            <!-- <el-button
+                    <!-- <el-button
               type=""
               v-if="flowNodeParamData?.nodeTypeValue === '1'"
               @click="startLocalAppFun"
               >启动</el-button
             > -->
-            <!-- <el-button type="primary" @click="startLocalAppFun">执行</el-button> -->
-            <!-- <el-button
+                    <!-- <el-button type="primary" @click="startLocalAppFun">执行</el-button> -->
+                    <!-- <el-button
               type="primary"
               v-if="flowNodeData.nodeStatus === RUN_NODE_STATUS.WAITING_FOR_USER"
               @click="continueStartRunJobFun"
               >执行手动节点</el-button
             > -->
-            <!-- <el-button
+                    <!-- <el-button
               type="primary"
               @click="skipCurrentNodeFlowFun"
               v-if="flowNodeParamData?.nodeTypeValue === '1'"
               >跳过当前本地节点</el-button
             > -->
-          </div>
-          <div class="tabs-info-content">
-            <!-- <paramSetting
+                  </div>
+                  <div class="tabs-info-content">
+                    <!-- <paramSetting
               :current-run-flow-node="flowNode"
               :node-param-data="nodeParamDataList"
               :node-data="flowNodeParamData"
@@ -147,44 +178,44 @@
               @update="refreshFlowNodeParamFun"
             >
             </paramSetting> -->
-            <!-- v-if="nodeActiveName === 'param' && showPage" -->
+                    <!-- v-if="nodeActiveName === 'param' && showPage" -->
 
-            <flowNodeParamTable
-              ref="flowNodeParamTableRef"
-              v-show="nodeActiveName === 'info' && showPage"
-              :node-params="nodeParamDataList"
-              :current-node="flowNode"
-              :page-info="flowNodeData"
-              :run-info="runInfo"
-              :online-file-param="onlineFileParam"
-              :flow-node-param-data="flowNodeParamData"
-              :flow-node-data="flowNodeData"
-              @confirm="refreshFlowNodeParamFun"
-              @update="updateFlowNodeParamFun"
-              @flowclick="flowclickFun"
-            ></flowNodeParamTable>
+                    <flowNodeParamTable
+                      ref="flowNodeParamTableRef"
+                      v-show="nodeActiveName === 'info' && showPage"
+                      :node-params="nodeParamDataList"
+                      :current-node="flowNode"
+                      :page-info="flowNodeData"
+                      :run-info="runInfo"
+                      :online-file-param="onlineFileParam"
+                      :flow-node-param-data="flowNodeParamData"
+                      :flow-node-data="flowNodeData"
+                      @confirm="refreshFlowNodeParamFun"
+                      @update="updateFlowNodeParamFun"
+                      @flowclick="flowclickFun"
+                    ></flowNodeParamTable>
 
-            <!-- 修改处 -->
-            <runDataPage
-              v-if="nodeActiveName === 'output'"
-              :file-id="flowNodeData?.outputDirId"
-              :node-info="flowNodeData"
-              :run-info="runInfo"
-              :online-file-param="onlineFileParam"
-            ></runDataPage>
-            <runDataPage
-              v-if="nodeActiveName === 'input'"
-              :file-id="flowNodeData?.inputDirId"
-              :node-info="flowNodeData"
-              :run-info="runInfo"
-              :online-file-param="onlineFileParam"
-            ></runDataPage>
-            <div class="bottom-info-content-tab" v-show="nodeActiveName === 'param'">
-              <div class="node-img">
-                <img :src="flowNodeParamData.iconUrl" alt="" />
-              </div>
-              <div class="node-content">
-                <!-- <div class="button-box">
+                    <!-- 修改处 -->
+                    <runDataPage
+                      v-if="nodeActiveName === 'output'"
+                      :file-id="flowNodeData?.outputDirId"
+                      :node-info="flowNodeData"
+                      :run-info="runInfo"
+                      :online-file-param="onlineFileParam"
+                    ></runDataPage>
+                    <runDataPage
+                      v-if="nodeActiveName === 'input'"
+                      :file-id="flowNodeData?.inputDirId"
+                      :node-info="flowNodeData"
+                      :run-info="runInfo"
+                      :online-file-param="onlineFileParam"
+                    ></runDataPage>
+                    <div class="bottom-info-content-tab" v-show="nodeActiveName === 'param'">
+                      <div class="node-img">
+                        <img :src="flowNodeParamData.iconUrl" alt="" />
+                      </div>
+                      <div class="node-content">
+                        <!-- <div class="button-box">
                   <el-button
                     type="primary"
                     v-if="flowNodeParamData.nodeTypeValue === '1'"
@@ -202,139 +233,161 @@
                     >完成</el-button
                   >
                 </div> -->
-                <el-form>
-                  <el-form-item label="节点名称">
-                    <span>{{ flowNodeData.nodeName }}</span>
-                  </el-form-item>
-                  <el-form-item label="节点类型">
-                    <el-tag v-if="flowNodeParamData.nodeTypeValue === '3'" type="primary">{{
-                      getTypeNameFun(flowNodeParamData.nodeTypeValue)
-                    }}</el-tag>
-                    <el-tag v-else-if="flowNodeParamData.nodeTypeValue === '2'" type="success">{{
-                      getTypeNameFun(flowNodeParamData.nodeTypeValue)
-                    }}</el-tag>
-                    <el-tag v-else-if="flowNodeParamData.nodeTypeValue === '1'" type="warning">{{
-                      getTypeNameFun(flowNodeParamData.nodeTypeValue)
-                    }}</el-tag>
-                    <el-tag v-else type="primary">{{
-                      getTypeNameFun(flowNodeParamData.nodeTypeValue)
-                    }}</el-tag>
+                        <el-form>
+                          <el-form-item label="节点名称">
+                            <span>{{ flowNodeData.nodeName }}</span>
+                          </el-form-item>
+                          <el-form-item label="节点类型">
+                            <el-tag v-if="flowNodeParamData.nodeTypeValue === '3'" type="primary">{{
+                              getTypeNameFun(flowNodeParamData.nodeTypeValue)
+                            }}</el-tag>
+                            <el-tag
+                              v-else-if="flowNodeParamData.nodeTypeValue === '2'"
+                              type="success"
+                              >{{ getTypeNameFun(flowNodeParamData.nodeTypeValue) }}</el-tag
+                            >
+                            <el-tag
+                              v-else-if="flowNodeParamData.nodeTypeValue === '1'"
+                              type="warning"
+                              >{{ getTypeNameFun(flowNodeParamData.nodeTypeValue) }}</el-tag
+                            >
+                            <el-tag v-else type="primary">{{
+                              getTypeNameFun(flowNodeParamData.nodeTypeValue)
+                            }}</el-tag>
 
-                    <!-- {{ flowNodeParamData?.nodeTypeValue }} -->
-                  </el-form-item>
-                  <el-form-item label="节点状态">
-                    <div class="app-status">
-                      <div
-                        class="round"
-                        :style="{
-                          background: getStyleFun(flowNodeData?.nodeStatus).color,
-                        }"
-                      ></div>
-                      <div class="text">
-                        {{ getStyleFun(flowNodeData?.nodeStatus).title }}
+                            <!-- {{ flowNodeParamData?.nodeTypeValue }} -->
+                          </el-form-item>
+                          <el-form-item label="节点状态">
+                            <div class="app-status">
+                              <div
+                                class="round"
+                                :style="{
+                                  background: getStyleFun(flowNodeData?.nodeStatus).color,
+                                }"
+                              ></div>
+                              <div class="text">
+                                {{ getStyleFun(flowNodeData?.nodeStatus).title }}
+                              </div>
+                            </div>
+
+                            <!-- {{ flowNodeData?.nodeDetailInfo?.status }} -->
+                          </el-form-item>
+                          <el-form-item label="执行时间">
+                            <el-icon class="icon-style mr5"><Timer /></el-icon>
+                            <span class="gl-text-ellipsis">
+                              {{ flowNodeData?.nodeDetailInfo?.durationFormatted || '--' }}
+                            </span>
+                          </el-form-item>
+                          <el-form-item label="开始时间">
+                            <el-icon class="icon-style mr5"><Calendar /></el-icon>
+                            <span class="gl-text-ellipsis">
+                              {{ flowNodeData?.nodeDetailInfo?.startTime || '--' }}
+                            </span>
+                          </el-form-item>
+                          <el-form-item label="完成时间">
+                            <el-icon class="icon-style mr5"><Calendar /></el-icon>
+                            <span class="gl-text-ellipsis">
+                              {{ flowNodeData?.nodeDetailInfo?.endTime || '--' }}
+                            </span>
+                          </el-form-item>
+                        </el-form>
                       </div>
                     </div>
-
-                    <!-- {{ flowNodeData?.nodeDetailInfo?.status }} -->
-                  </el-form-item>
-                  <el-form-item label="执行时间">
-                    <el-icon class="icon-style mr5"><Timer /></el-icon>
-                    <span class="gl-text-ellipsis">
-                      {{ flowNodeData?.nodeDetailInfo?.durationFormatted || '--' }}
-                    </span>
-                  </el-form-item>
-                  <el-form-item label="开始时间">
-                    <el-icon class="icon-style mr5"><Calendar /></el-icon>
-                    <span class="gl-text-ellipsis">
-                      {{ flowNodeData?.nodeDetailInfo?.startTime || '--' }}
-                    </span>
-                  </el-form-item>
-                  <el-form-item label="完成时间">
-                    <el-icon class="icon-style mr5"><Calendar /></el-icon>
-                    <span class="gl-text-ellipsis">
-                      {{ flowNodeData?.nodeDetailInfo?.endTime || '--' }}
-                    </span>
-                  </el-form-item>
-                </el-form>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- </template> -->
-      <!-- <template #right> -->
-      <div
-        v-if="!leftFullScreen"
-        :class="rightFullScreen ? 'info-box-right allpage ' : 'info-box-right'"
-      >
-        <div class="bottom-title">
-          <div class="title-name">作业相关</div>
-          <div class="title-operate">
-            <el-icon
-              v-if="!rightFullScreen"
-              class="icon-style"
-              @click="rightFullScreen = !rightFullScreen"
-              ><FullScreen
-            /></el-icon>
-            <el-icon v-else class="icon-style" @click="rightFullScreen = !rightFullScreen"
-              ><Close
-            /></el-icon>
-          </div>
-        </div>
-        <div class="bottom-info-content">
-          <div class="tabs-box">
-            <el-tabs v-model="taskActiveName" class="demo-tabs" @tab-click="handleRightClickFun">
-              <el-tab-pane label="作业列表" name="job-list"></el-tab-pane>
-              <el-tab-pane label="标准规范" name="standard"></el-tab-pane>
-              <el-tab-pane label="仿真参数" name="param"></el-tab-pane>
-              <el-tab-pane label="关键结果" name="result"></el-tab-pane>
-              <el-tab-pane label="仿真报告" name="report"></el-tab-pane>
-              <el-tab-pane label="关联任务" name="associated-run"></el-tab-pane>
-              <el-tab-pane label="数据归档" name="data-archive"></el-tab-pane>
+            </template>
+            <template #right>
+              <div
+                v-if="!leftFullScreen"
+                :class="rightFullScreen ? 'info-box-right allpage ' : 'info-box-right'"
+              >
+                <div class="bottom-title">
+                  <div class="title-name">作业相关</div>
+                  <div class="title-operate">
+                    <el-icon
+                      v-if="!rightFullScreen"
+                      class="icon-style"
+                      @click="toggleRightFullScreenFun"
+                      ><FullScreen
+                    /></el-icon>
+                    <el-icon v-else class="icon-style" @click="toggleRightFullScreenFun"
+                      ><Close
+                    /></el-icon>
+                  </div>
+                </div>
+                <div class="bottom-info-content">
+                  <div class="tabs-box">
+                    <el-tabs
+                      v-model="taskActiveName"
+                      class="demo-tabs"
+                      @tab-click="handleRightClickFun"
+                    >
+                      <el-tab-pane label="作业列表" name="job-list"></el-tab-pane>
+                      <el-tab-pane label="标准规范" name="standard"></el-tab-pane>
+                      <el-tab-pane label="仿真参数" name="param"></el-tab-pane>
+                      <el-tab-pane label="关键结果" name="result"></el-tab-pane>
+                      <el-tab-pane label="仿真报告" name="report"></el-tab-pane>
+                      <el-tab-pane label="关联任务" name="associated-run"></el-tab-pane>
+                      <el-tab-pane label="数据归档" name="data-archive"></el-tab-pane>
 
-              <!-- <el-tab-pane label="日志输出" name="job-log"></el-tab-pane> -->
-              <!-- <el-tab-pane label="性能指标" name="performance"></el-tab-pane> -->
-              <!-- <el-tab-pane label="3D模型预览" name="3D-model"></el-tab-pane> -->
-            </el-tabs>
-          </div>
-          <div class="tabs-info-content">
-            <resultData v-if="taskActiveName === 'result'" :current-run-ifno="runInfo"></resultData>
-            <jobList v-if="taskActiveName === 'job-list'" :current-run-info="runInfo"></jobList>
-            <taskPerformance
-              v-if="taskActiveName === 'performance'"
-              :param-type="'run'"
-              :run-info="runInfo"
-              :show-save-button="true"
-              :full-height="true"
-            ></taskPerformance>
-            <runLogs
-              v-if="taskActiveName === 'job-log'"
-              :flow-task-id="flowNodeData.nodeId"
-            ></runLogs>
-            <ModelReview v-if="taskActiveName === '3D-model'"></ModelReview>
-            <runVersionTree
-              v-if="taskActiveName === 'associated-run'"
-              :current-task-info="runInfo"
-            ></runVersionTree>
-            <runStandard v-if="taskActiveName === 'standard'" :run-info="runInfo"></runStandard>
-            <reportResult
-              v-if="taskActiveName === 'report'"
-              :current-run-ifno="runInfo"
-            ></reportResult>
-            <simulationParam
-              v-if="taskActiveName === 'param'"
-              :flow-node-param-data="flowNodeParamData"
-              :flow-node-data="flowNodeData"
-              :run-info="runInfo"
-              @update="updateFlowNodeDataFun"
-            ></simulationParam>
-            <dataAchieve v-if="taskActiveName === 'data-archive'" :run-info="runInfo"></dataAchieve>
-          </div>
+                      <!-- <el-tab-pane label="日志输出" name="job-log"></el-tab-pane> -->
+                      <!-- <el-tab-pane label="性能指标" name="performance"></el-tab-pane> -->
+                      <!-- <el-tab-pane label="3D模型预览" name="3D-model"></el-tab-pane> -->
+                    </el-tabs>
+                  </div>
+                  <div class="tabs-info-content">
+                    <resultData
+                      v-if="taskActiveName === 'result'"
+                      :current-run-ifno="runInfo"
+                    ></resultData>
+                    <jobList
+                      v-if="taskActiveName === 'job-list'"
+                      :current-run-info="runInfo"
+                    ></jobList>
+                    <taskPerformance
+                      v-if="taskActiveName === 'performance'"
+                      :param-type="'run'"
+                      :run-info="runInfo"
+                      :show-save-button="true"
+                      :full-height="true"
+                    ></taskPerformance>
+                    <runLogs
+                      v-if="taskActiveName === 'job-log'"
+                      :flow-task-id="flowNodeData.nodeId"
+                    ></runLogs>
+                    <ModelReview v-if="taskActiveName === '3D-model'"></ModelReview>
+                    <runVersionTree
+                      v-if="taskActiveName === 'associated-run'"
+                      :current-task-info="runInfo"
+                    ></runVersionTree>
+                    <runStandard
+                      v-if="taskActiveName === 'standard'"
+                      :run-info="runInfo"
+                    ></runStandard>
+                    <reportResult
+                      v-if="taskActiveName === 'report'"
+                      :current-run-ifno="runInfo"
+                    ></reportResult>
+                    <simulationParam
+                      v-if="taskActiveName === 'param'"
+                      :flow-node-param-data="flowNodeParamData"
+                      :flow-node-data="flowNodeData"
+                      :run-info="runInfo"
+                      @update="updateFlowNodeDataFun"
+                    ></simulationParam>
+                    <dataAchieve
+                      v-if="taskActiveName === 'data-archive'"
+                      :run-info="runInfo"
+                    ></dataAchieve>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </DragSplit>
         </div>
-      </div>
-      <!-- </template>
-      </DragSplit> -->
-    </div>
+      </template>
+    </DragSplit>
     <HpcList v-model="visible" />
   </div>
 </template>
@@ -350,6 +403,7 @@ import ModelReview from './runPagecomponent/3DModelReview.vue';
 import runVersionTree from './runPagecomponent/runVersionTree.vue';
 import runFlowPage from './runPagecomponent/flow/runFlowPage.vue';
 import HpcList from '@/components/task/hpcList.vue';
+import DragSplit from '@/components/common/dragSplit/index.vue';
 import {
   listSimulationFlowNodeApi,
   queryRunDirApi,
@@ -407,6 +461,19 @@ const leftFullScreen = ref(false);
 const rightFullScreen = ref(false);
 const showPage = ref(true);
 const refreshPage = ref(true);
+
+const toggleLeftFullScreenFun = () => {
+  const next = !leftFullScreen.value;
+  leftFullScreen.value = next;
+  if (next) rightFullScreen.value = false;
+};
+
+const toggleRightFullScreenFun = () => {
+  const next = !rightFullScreen.value;
+  rightFullScreen.value = next;
+  if (next) leftFullScreen.value = false;
+};
+
 const handleLeftClickFun = async () => {
   if (nodeActiveName.value === 'info') {
     if (flowNodeParamTableRef.value) {
@@ -1317,7 +1384,9 @@ onDeactivated(() => {
   width: 100%;
   height: 100%;
   position: relative;
-
+  .top {
+    height: 100%;
+  }
   .run-title-box {
     width: 100%;
     height: 50px;
@@ -1381,7 +1450,8 @@ onDeactivated(() => {
 
   .run-flow-box {
     width: 100%;
-    height: 200px;
+    // height: 200px;
+    height: calc(100% - 60px);
     background-color: #fff;
     margin-bottom: 10px;
     border-radius: 2px;
@@ -1395,7 +1465,8 @@ onDeactivated(() => {
 
   .run-info-box {
     width: 100%;
-    height: calc(100% - 270px);
+    // height: calc(100% - 270px);
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1478,8 +1549,8 @@ onDeactivated(() => {
 
     .info-box-left,
     .info-box-right {
-      width: calc(50% - 5px);
-      // width: 100%;
+      // width: 50%;
+      width: 100%;
       // height: 500px;
       height: 100%;
       background-color: #fff;
@@ -1558,6 +1629,8 @@ onDeactivated(() => {
     height: 100%;
     left: 0;
     top: 0;
+    right: 0;
+    bottom: 0;
     z-index: 20;
     position: absolute;
   }
@@ -1676,10 +1749,6 @@ onDeactivated(() => {
       height: calc(100% - 50px);
       overflow: auto;
       flex-wrap: wrap;
-
-      .el-form-item {
-        // width: calc(100% / 3);
-      }
     }
 
     .button-box {

src/views/task/execution/index.vue

@@ -1,29 +1,30 @@
 <template>
   <div class="task-execution-page">
     <div class="content">
-      <div class="left-content" :class="{ hide: !isToggleShow }">
-        <div class="filter-tree-content">
-          <leftTaskTree ref="leftTreeRef" @node-click-fn="getTreeCurrentNodeFun"></leftTaskTree>
-        </div>
-      </div>
-      <div class="toggle-btn" :class="{ hide: !isToggleShow }" @click="toggleFun">
-        <el-icon :size="12">
-          <DArrowLeft />
-        </el-icon>
-      </div>
-      <div class="right-content">
-        <taskDetailPage
-          v-if="treeCurrentNodeInfo?.nodeType === NODE_TYPE.TASK"
-          :task-info="treeCurrentNodeInfo"
-          :show-task-info="false"
-        ></taskDetailPage>
-        <runDetailPage
-          v-else-if="treeCurrentNodeInfo?.nodeType === NODE_TYPE.RUN && showPage"
-          :run-info="treeCurrentNodeInfo"
-          @update="updateLeftTreeNodeInfoFun"
-        ></runDetailPage>
-        <el-empty v-else class="empty-style" description="" />
-      </div>
+      <DragSplit :leftContentWidth="400" :minLeftWidth="0">
+        <template #left>
+          <div class="left-content">
+            <div class="filter-tree-content">
+              <leftTaskTree ref="leftTreeRef" @node-click-fn="getTreeCurrentNodeFun"></leftTaskTree>
+            </div>
+          </div>
+        </template>
+        <template #right>
+          <div class="right-content">
+            <taskDetailPage
+              v-if="treeCurrentNodeInfo?.nodeType === NODE_TYPE.TASK"
+              :task-info="treeCurrentNodeInfo"
+              :show-task-info="false"
+            ></taskDetailPage>
+            <runDetailPage
+              v-else-if="treeCurrentNodeInfo?.nodeType === NODE_TYPE.RUN && showPage"
+              :run-info="treeCurrentNodeInfo"
+              @update="updateLeftTreeNodeInfoFun"
+            ></runDetailPage>
+            <el-empty v-else class="empty-style" description="" />
+          </div>
+        </template>
+      </DragSplit>
     </div>
   </div>
 </template>
@@ -34,11 +35,8 @@ import { NODE_TYPE } from '@/utils/enum/node';
 import leftTaskTree from './components/leftTaskTree/index.vue';
 import taskDetailPage from './components/taskDetailPage/index.vue';
 import runDetailPage from './components/runDetailPage/index.vue';
+import DragSplit from '@/components/common/dragSplit/index.vue';
 
-const isToggleShow = ref(true);
-const toggleFun = () => {
-  isToggleShow.value = !isToggleShow.value;
-};
 const leftTreeRef = ref();
 const showPage = ref(true);
 const treeCurrentNodeInfo = ref<any>(null);
@@ -102,7 +100,8 @@ const updateLeftTreeNodeInfoFun = (data: any) => {
     }
 
     .left-content {
-      width: 400px;
+      // width: 400px;
+      width: 100%;
       height: 100%;
       overflow: auto;
       margin-right: var(--margin-normal);