feat: 动态计算任务日志高度

src/views/inspection/runTask/index.vue

@@ -35,7 +35,7 @@
                 <div class="label" :class="{ active: activePanel === 'history' }" @click="activePanel = 'history'">历史记录
                 </div>
             </div>
-            <div class="context-container">
+            <div ref="contextContainerRef" class="context-container">
                 <div v-if="activePanel === 'current'">
                     <!-- 当前任务区域只展示左侧任务队列中选中的任务，避免同时渲染所有执行中任务。 -->
                     <div v-if="selectedRunTask" :key="selectedRunTask.id" class="task"
@@ -63,9 +63,9 @@
                             :percentage="parseFloat(taskRunningInfo[selectedRunTask.id]?.progress?.toFixed(2)) || 0" />
                         <taskSteps :list="pointList_runningTask[selectedRunTask.taskId]"
                             :activeStep="taskRunningInfo[selectedRunTask.id]?.activeStep || 0" />
-                        <div class="run-log-container">
+                        <div ref="taskLogContainerRef" class="run-log-container">
-                            <div>执行日志</div>
+                            <div ref="taskLogTitleRef">执行日志</div>
-                            <taskLog :list="taskLogList[selectedRunTask.id]" />
+                            <taskLog :height="taskLogHeight" :list="taskLogList[selectedRunTask.id]" />
                         </div>
                     </div>
                     <el-empty v-else description="暂无任务" />
@@ -173,6 +173,7 @@ import taskLog from "./task-log.vue";
 import { useContainerHeight } from "@/hooks/tableHeight";
 import { getTaskList, getWaypointByTaskId } from "@/api/inspection/task";
 import { computed, onMounted, onUnmounted } from "vue";
+import { useElementBounding, useElementSize } from '@vueuse/core'
 import { addRunTask, getRunTaskList, startRunTask, rerunRunTask, pauseRunTask, stopRunTask, resumeRunTask, deleteRunTask, getTaskLogListApi } from "@/api/inspection/runTask";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { formatDate } from "@/utils/index";
@@ -189,6 +190,38 @@ import {
 
 const topContainerRef = ref();
 const containerHeight = useContainerHeight(topContainerRef);
+const contextContainerRef = ref(null)
+const taskLogContainerRef = ref(null)
+const taskLogTitleRef = ref(null)
+
+// 通过元素边界实时获取当前任务内容区底部和日志容器顶部，避免依赖固定的 460px。
+const { bottom: contextContainerBottom } = useElementBounding(contextContainerRef)
+const { top: taskLogContainerTop } = useElementBounding(taskLogContainerRef)
+const { height: taskLogTitleHeight } = useElementSize(taskLogTitleRef)
+
+const TASK_LOG_MARGIN_TOP = 12
+const CURRENT_TASK_BOTTOM_PADDING = 16
+const MIN_TASK_LOG_HEIGHT = 150
+
+/**
+ * 计算当前任务页面中日志组件可以使用的剩余高度。
+ *
+ * 计算基准是右侧内容区的底部，而不是窗口高度，因此页面外层布局、浏览器窗口
+ * 尺寸或右侧面板高度发生变化时都能得到正确结果。日志容器顶部到内容区底部之间，
+ * 还需要扣除“执行日志”标题高度、taskLog 组件自身的上间距，以及当前任务卡片的
+ * 底部内边距，确保日志不会覆盖任务卡片边界。元素尚未挂载时使用最低高度作为初始值，
+ * 待 VueUse 完成首次测量后会自动更新为实际剩余高度。
+ */
+const taskLogHeight = computed(() => {
+    const remainingHeight = contextContainerBottom.value
+        - taskLogContainerTop.value
+        - taskLogTitleHeight.value
+        - TASK_LOG_MARGIN_TOP
+        - CURRENT_TASK_BOTTOM_PADDING
+
+    return Math.max(MIN_TASK_LOG_HEIGHT, Math.floor(remainingHeight))
+})
+
 const socket = inject('ws');
 const startDialogVisible = ref(false)
 const startSubmitting = ref(false)

src/views/intelligenceTest/runningTask/index.vue

@@ -36,7 +36,7 @@
                 <div class="label" :class="{ active: activePanel === 'history' }" @click="activePanel = 'history'">历史记录
                 </div>
             </div>
-            <div class="context-container">
+            <div ref="contextContainerRef" class="context-container">
                 <div v-if="activePanel === 'current'">
                     <!-- 当前任务区域只展示左侧队列选中的任务，不再同时渲染全部执行中任务。 -->
                     <div v-if="selectedRunTask" :key="selectedRunTask.id" class="task"
@@ -65,13 +65,13 @@
                             :percentage="parseFloat(taskRunningInfo[selectedRunTask.id]?.progress?.toFixed(2)) || 0" />
                         <taskSteps :list="pointList_runningTask[selectedRunTask.taskId]"
                             :activeStep="taskRunningInfo[selectedRunTask.id]?.activeStep || 0" />
-                        <div class="run-log-container">
+                        <div ref="taskLogContainerRef" class="run-log-container">
-                            <div>执行日志</div>
+                            <div ref="taskLogTitleRef">执行日志</div>
                             <!--
                                 taskId 用于查询检测项，taskStatus 用于在完成/失败/终止后推导最后一个已执行检测项的状态；
                                 两者与实例日志分开传入，避免把任务级字段重复写进每一条日志。
                             -->
-                            <taskLog :height="460" :task-id="selectedRunTask.taskId"
+                            <taskLog :height="taskLogHeight" :task-id="selectedRunTask.taskId"
                                 :task-status="selectedRunTask.status" :list="taskLogList[selectedRunTask.id]" />
                         </div>
                     </div>
@@ -194,6 +194,7 @@ import { getTaskList, getTestCaseByTaskId } from "@/api/intelligenceTest/taskMan
 import { getPhoneList } from "@/api/intelligenceTest/mobilePhone";
 import { getVehicleList } from "@/api/intelligenceTest/car";
 import { computed, onMounted, onUnmounted } from "vue";
+import { useElementBounding, useElementSize } from '@vueuse/core'
 import { 
     addTaskinstance,
     getTaskinstanceList,
@@ -219,6 +220,38 @@ import {
 
 const topContainerRef = ref();
 const containerHeight = useContainerHeight(topContainerRef);
+const contextContainerRef = ref(null)
+const taskLogContainerRef = ref(null)
+const taskLogTitleRef = ref(null)
+
+// 通过元素边界实时获取当前任务内容区底部和日志容器顶部，避免依赖固定的 460px。
+const { bottom: contextContainerBottom } = useElementBounding(contextContainerRef)
+const { top: taskLogContainerTop } = useElementBounding(taskLogContainerRef)
+const { height: taskLogTitleHeight } = useElementSize(taskLogTitleRef)
+
+const TASK_LOG_MARGIN_TOP = 12
+const CURRENT_TASK_BOTTOM_PADDING = 16
+const MIN_TASK_LOG_HEIGHT = 150
+
+/**
+ * 计算当前任务页面中日志组件可以使用的剩余高度。
+ *
+ * 计算基准是右侧内容区的底部，而不是窗口高度，因此页面外层布局、浏览器窗口
+ * 尺寸或右侧面板高度发生变化时都能得到正确结果。日志容器顶部到内容区底部之间，
+ * 还需要扣除“执行日志”标题高度、taskLog 组件自身的上间距，以及当前任务卡片的
+ * 底部内边距，确保日志不会覆盖任务卡片边界。元素尚未挂载时使用最低高度作为初始值，
+ * 待 VueUse 完成首次测量后会自动更新为实际剩余高度。
+ */
+const taskLogHeight = computed(() => {
+    const remainingHeight = contextContainerBottom.value
+        - taskLogContainerTop.value
+        - taskLogTitleHeight.value
+        - TASK_LOG_MARGIN_TOP
+        - CURRENT_TASK_BOTTOM_PADDING
+
+    return Math.max(MIN_TASK_LOG_HEIGHT, Math.floor(remainingHeight))
+})
+
 const socket = inject('ws');
 const startDialogVisible = ref(false)
 const startSubmitting = ref(false)