duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 移动端流转树修复分支视觉脱节(先分支后主干道)

Browse Source 
- 调换渲染顺序:先渲染分支(紧贴父节点),再渲染主干道(向下延伸)
- 分支容器加 ↳ 分支延伸 指示符 + 左侧虚线边框
- 主线每个子节点前恒画 ↓ 箭头(含父到长子)
This commit is contained in:
duxingchen
2026-09-01 14:29:58 +08:00
parent a3aa012d6c
commit 9808742f94
1 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
track-uniapp/src/pages/scan/components/FlowTree.vue
View File

@ -19,23 +19,11 @@
</view>
</view>
<!-- 子任务：主线继续主干道(左对齐 + ↓连线)，分支(SPAWN 协助)缩进 -->
<!-- 子任务：先渲染分支(紧贴父节点、缩进)，再渲染主干道(继续向下延伸) -->
<view v-if="node.child_tasks && node.child_tasks.length">
<!-- 修复断条：父节点与第一个主线子节点之间的连线箭头 -->
<view v-if="mainChildren.length" class="ft-flow-arrow">↓</view>
<!-- 主线子任务：左边缘对齐，形成笔直主干道，之间用 ↓ 连线 -->
<template v-for="(child, i) in mainChildren" :key="'mc-' + child.id">
<view v-if="i > 0" class="ft-flow-arrow">↓</view>
<FlowTree
:node="child"
:current-user="currentUser"
:current-user-id="currentUserId"
:current-username="currentUsername"
@view-records="$emit('viewRecords', $event)"
/>
</template>
<!-- 分支子任务：缩进 + 左边线；进入分支后子子孙孙都保持分支上下文 -->
<!-- 1. 先渲染分支：紧贴父节点下方，缩进 + 左侧虚线框，视觉上被父节点"兜住" -->
<view v-if="branchChildren.length" class="ft-branch-children">
<view class="ft-branch-indicator">↳ 分支延伸</view>
<FlowTree
v-for="child in branchChildren"
:key="child.id"
@ -47,6 +35,17 @@
@view-records="$emit('viewRecords', $event)"
/>
</view>
<!-- 2. 再渲染主干道：每个主线子节点前都画向下连线箭头（含父→长子） -->
<template v-for="(child, i) in mainChildren" :key="'mc-' + child.id">
<view v-if="i === 0 || i > 0" class="ft-flow-arrow">↓</view>
<FlowTree
:node="child"
:current-user="currentUser"
:current-user-id="currentUserId"
:current-username="currentUsername"
@view-records="$emit('viewRecords', $event)"
/>
</template>
</view>
</view>
</template>
@ -172,11 +171,18 @@ export default {
line-height: 1;
margin: 2px 0;
}
/* 分支子任务：缩进 + 左边线 */
/* 分支子任务：缩进 + 左侧虚线框，视觉上被父节点"兜住" */
.ft-branch-children {
margin-left: 16px;
margin-left: 12px;
padding-left: 12px;
border-left: 2px solid #e5e7eb;
border-left: 2px dashed #cbd5e1;
margin-top: 8px;
}
/* 分支指示符：轻量级连接锚点 */
.ft-branch-indicator {
color: #9ca3af;
font-size: 14px;
margin-bottom: 4px;
padding-left: 4px;
}
</style>