fix: 修复时间线组件中存在审批意见时，候选人名称头像样式布局错位问题

src/views/bpm/processInstance/create/index.vue

@@ -146,100 +146,6 @@ const getDefinitionList = async () => {
     processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
       suspensionState: 1
     })
-    /* 测试数据 */
-    // processDefinitionList.value = [
-    //   {
-    //     id: 'business:3:fab1dceb-95be-11ef-8c7d-00a6181404fd',
-    //     version: 3,
-    //     name: '商务管理',
-    //     key: 'business',
-    //     icon: 'https://picsum.photos/200?r=2',
-    //     description: '商务管理',
-    //     category: 'test0',
-    //     categoryName: '分类0',
-    //     formType: 10,
-    //     formId: 27,
-    //     formName: null,
-    //     formConf:
-    //       '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":false,"innerText":"提交"}}',
-    //     formFields: [
-    //       '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-    //       '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}',
-    //       '{"type":"datePicker","field":"Finom2tsbwbpadc","title":"请假时间段","info":"","$required":false,"props":{"type":"datetimerange"},"_fc_id":"id_F028m2tsbwbpaec","name":"ref_F0okm2tsbwbpafc","display":true,"hidden":false,"_fc_drag_tag":"dateRange"}'
-    //     ],
-    //     formCustomCreatePath: '',
-    //     formCustomViewPath: '',
-    //     suspensionState: 1,
-    //     deploymentTime: null,
-    //     bpmnXml: null,
-    //     startUserSelectTasks: null
-    //   },
-    //   {
-    //     id: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-    //     version: 1,
-    //     name: 'oa_leave',
-    //     key: 'oa_leave',
-    //     icon: null,
-    //     description: 'oa_leave',
-    //     category: 'etst',
-    //     categoryName: '分类1',
-    //     formType: 20,
-    //     formId: null,
-    //     formName: null,
-    //     formConf: null,
-    //     formFields: null,
-    //     formCustomCreatePath: '/bpm/oa/leave/create',
-    //     formCustomViewPath: '/bpm/oa/leave/detail',
-    //     suspensionState: 1,
-    //     deploymentTime: null,
-    //     bpmnXml: null,
-    //     startUserSelectTasks: null
-    //   },
-    //   {
-    //     id: 'oa_leave:3:c9d06889-94fd-11ef-bf08-00a6181404fd',
-    //     version: 3,
-    //     name: '请假流程',
-    //     key: 'oa_leave',
-    //     icon: 'https://picsum.photos/200?r=1',
-    //     description: '请假流程',
-    //     category: 'test3',
-    //     categoryName: '分类3',
-    //     formType: 10,
-    //     formId: 27,
-    //     formName: null,
-    //     formConf:
-    //       '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
-    //     formFields: [
-    //       '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-    //       '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
-    //     ],
-    //     formCustomCreatePath: 'bpm/oa/leave/create',
-    //     formCustomViewPath: 'bpm/oa/leave/create',
-    //     suspensionState: 1,
-    //     deploymentTime: null,
-    //     bpmnXml: null,
-    //     startUserSelectTasks: null
-    //   }
-    // ]
-    /* 测试数据 */
-    // processDefinitionList.value = [
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value
-    // ]
     // 初始化过滤列表为全部流程定义
     filteredProcessDefinitionList.value = processDefinitionList.value
   } finally {

src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue

@@ -24,7 +24,7 @@
           </div>
         </div>
       </template>
-      <div class="flex flex-col items-start">
+      <div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}`">
         <!-- 第一行：节点名称、时间 -->
         <div class="flex w-full">
           <div class="font-bold"> {{ activity.name }}</div>
@@ -36,53 +36,53 @@
             {{ getApprovalNodeTime(activity) }}
           </div>
         </div>
-        <div class="flex items-center flex-wrap mt-1">
+        <div class="flex items-center flex-wrap mt-1 gap2">
           <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
-          <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
-            <div class="flex flex-col pr-2 gap2">
+          <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex flex-col pr-2 gap2">
+            <div
+              class="position-relative flex flex-wrap gap2"
+              v-if="task.assigneeUser || task.ownerUser"
+            >
+              <!-- 信息：头像昵称 -->
               <div
-                class="position-relative flex flex-wrap gap2"
-                v-if="task.assigneeUser || task.ownerUser"
+                class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
               >
-                <!-- 信息：头像昵称 -->
+                <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
+                  <el-avatar
+                    :size="28"
+                    v-if="task.assigneeUser?.avatar"
+                    :src="task.assigneeUser?.avatar"
+                  />
+                  <el-avatar :size="28" v-else>
+                    {{ task.assigneeUser?.nickname.substring(0, 1) }}
+                  </el-avatar>
+                  {{ task.assigneeUser?.nickname }}
+                </template>
+                <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
+                  <el-avatar
+                    :size="28"
+                    v-if="task.ownerUser?.avatar"
+                    :src="task.ownerUser?.avatar"
+                  />
+                  <el-avatar :size="28" v-else>
+                    {{ task.ownerUser?.nickname.substring(0, 1) }}
+                  </el-avatar>
+                  {{ task.ownerUser?.nickname }}
+                </template>
+                <!-- 信息：任务 ICON -->
                 <div
-                  class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+                  v-if="onlyStatusIconShow.includes(task.status)"
+                  class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
                 >
-                  <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
-                    <el-avatar
-                      :size="28"
-                      v-if="task.assigneeUser?.avatar"
-                      :src="task.assigneeUser?.avatar"
-                    />
-                    <el-avatar :size="28" v-else>
-                      {{ task.assigneeUser?.nickname.substring(0, 1) }}
-                    </el-avatar>
-                    {{ task.assigneeUser?.nickname }}
-                  </template>
-                  <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
-                    <el-avatar
-                      :size="28"
-                      v-if="task.ownerUser?.avatar"
-                      :src="task.ownerUser?.avatar"
-                    />
-                    <el-avatar :size="28" v-else>
-                      {{ task.ownerUser?.nickname.substring(0, 1) }}
-                    </el-avatar>
-                    {{ task.ownerUser?.nickname }}
-                  </template>
-                  <!-- 信息：任务 ICON -->
-                  <div
-                    v-if="onlyStatusIconShow.includes(task.status)"
-                    class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
-                  >
-                    <Icon
-                      :size="12"
-                      :icon="statusIconMap2[task.status]?.icon"
-                      :color="statusIconMap2[task.status]?.color"
-                    />
-                  </div>
+                  <Icon
+                    :size="12"
+                    :icon="statusIconMap2[task.status]?.icon"
+                    :color="statusIconMap2[task.status]?.color"
+                  />
                 </div>
               </div>
+            </div>
+            <teleport defer :to="`#activity-task-${activity.id}`">
               <div
                 v-if="
                   task.reason &&
@@ -92,7 +92,7 @@
               >
                 审批意见：{{ task.reason }}
               </div>
-            </div>
+            </teleport>
           </div>
           <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
           <div