lunanting/qiangdanxitong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化子任务时间线布局 - 横向拉满卡片宽度

Browse Source 
1. 将时间线从task-details移到独立位置，横向拉满
2. 增大节点尺寸和间距，提升可读性
3. 可显示最多5个子任务节点
This commit is contained in:
Your Name 2026-01-07 16:37:23 +08:00
parent 89f5452f4d
commit 6579bc2b25
1 changed files with 55 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/views/TaskHall.vue
View File

@ -1576,6 +1576,32 @@
</div>
</div>
<!-- 子任务进度时间线（流水线任务）- 横向拉满 -->
<div v-if="task.isPipeline === 1 && task.subTaskTotal" class="subtask-timeline-wrapper full-width">
<div class="subtask-timeline">
<div
v-for="(subTask, index) in (task.subTasks || []).slice(0, 5)"
:key="subTask.id || index"
class="timeline-node"
:class="getSubTaskStatusClass(subTask.status)"
>
<div class="node-dot"></div>
<div class="node-label">{{ getSubTaskLabel(subTask, index) }}</div>
<div class="node-status">{{ getSubTaskStatusText(subTask.status) }}</div>
</div>
<!-- 显示更多子任务提示 -->
<div v-if="(task.subTasks || []).length > 5" class="timeline-node more">
<div class="node-dot"></div>
<div class="node-label">+{{ (task.subTasks || []).length - 5 }}</div>
</div>
<!-- 完结节点 -->
<div class="timeline-node final" :class="{ completed: task.status === 'completed' }">
<div class="node-dot"></div>
<div class="node-label">完结</div>
</div>
</div>
</div>
<!-- 任务详情 -->
<div class="task-details">
<div class="detail-item">
@ -1584,31 +1610,6 @@
</span>
<span>处理人: {{ task.receiverName || '待接单' }}</span>
</div>
<!-- 子任务进度时间线（流水线任务） -->
<div v-if="task.isPipeline === 1 && task.subTaskTotal" class="subtask-timeline-wrapper">
<div class="subtask-timeline">
<div
v-for="(subTask, index) in (task.subTasks || []).slice(0, 4)"
:key="subTask.id || index"
class="timeline-node"
:class="getSubTaskStatusClass(subTask.status)"
>
<div class="node-dot"></div>
<div class="node-label">{{ getSubTaskLabel(subTask, index) }}</div>
<div class="node-status">{{ getSubTaskStatusText(subTask.status) }}</div>
</div>
<!-- 显示更多子任务提示 -->
<div v-if="(task.subTasks || []).length > 4" class="timeline-node more">
<div class="node-dot"></div>
<div class="node-label">+{{ (task.subTasks || []).length - 4 }}</div>
</div>
<!-- 完结节点 -->
<div class="timeline-node final" :class="{ completed: task.status === 'completed' }">
<div class="node-dot"></div>
<div class="node-label">完结</div>
</div>
</div>
</div>
<div v-if="task.brandName" class="detail-item">
<span class="icon">
<Icon name="tag" size="sm" color="#31f08b" />
@ -5503,26 +5504,32 @@ onUnmounted(() => {
// 子任务时间线样式
.subtask-timeline-wrapper {
width: 100%;
margin: 12px 0;
padding: 12px;
background: rgba(0, 0, 0, 0.2);
margin: 16px 0;
padding: 16px 20px;
background: rgba(0, 0, 0, 0.25);
border-radius: 8px;
&.full-width {
// 确保横向拉满
box-sizing: border-box;
}
}
.subtask-timeline {
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
// 连接线
&::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: 8px;
top: 10px;
left: 20px;
right: 20px;
height: 2px;
background: linear-gradient(90deg, #303030 0%, #303030 100%);
background: linear-gradient(90deg, #52c41a 0%, #303030 50%, #303030 100%);
z-index: 0;
}
@ -5533,28 +5540,30 @@ onUnmounted(() => {
align-items: center;
position: relative;
z-index: 1;
min-width: 50px;
min-width: 60px;
max-width: 100px;
.node-dot {
width: 16px;
height: 16px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #303030;
border: 2px solid #444;
margin-bottom: 6px;
border: 3px solid #444;
margin-bottom: 8px;
transition: all 0.3s ease;
}
.node-label {
font-size: 11px;
font-size: 12px;
color: #888;
text-align: center;
white-space: nowrap;
margin-bottom: 2px;
margin-bottom: 4px;
font-weight: 500;
}
.node-status {
font-size: 10px;
font-size: 11px;
color: #666;
text-align: center;
white-space: nowrap;
@ -5580,7 +5589,7 @@ onUnmounted(() => {
.node-dot {
background: #1890ff;
border-color: #1890ff;
box-shadow: 0 0 8px rgba(24, 144, 255, 0.5);
box-shadow: 0 0 10px rgba(24, 144, 255, 0.6);
animation: pulse 1.5s ease-in-out infinite;
}
.node-label {
@ -5608,14 +5617,16 @@ onUnmounted(() => {
// 更多节点
&.more {
flex: 0.5;
flex: 0.6;
.node-dot {
width: 18px;
height: 18px;
background: #444;
border-color: #666;
}
.node-label {
color: #888;
font-size: 10px;
font-size: 11px;
}
}
@ -5627,7 +5638,7 @@ onUnmounted(() => {
}
.node-label {
color: #888;
font-weight: 500;
font-weight: 600;
}
&.completed {