chore(ops): 删除废弃的 progress-timeline 组件
该组件已被 detail.vue 的横向步骤条替代，确认无任何引用 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<view class="timeline">
|
||||
<view
|
||||
v-for="(step, index) in steps"
|
||||
:key="step.key"
|
||||
class="timeline-item"
|
||||
:class="{ 'timeline-item--last': index === steps.length - 1 }"
|
||||
>
|
||||
<!-- 左侧节点 + 连线 -->
|
||||
<view class="timeline-left">
|
||||
<!-- 圆形节点 -->
|
||||
<view
|
||||
class="timeline-dot"
|
||||
:class="{
|
||||
'timeline-dot--done': step.state === 'done',
|
||||
'timeline-dot--current': step.state === 'current',
|
||||
'timeline-dot--pending': step.state === 'pending',
|
||||
}"
|
||||
>
|
||||
<view v-if="step.state === 'done'" class="i-carbon-checkmark text-20rpx text-white" />
|
||||
</view>
|
||||
<!-- 连线 -->
|
||||
<view
|
||||
v-if="index < steps.length - 1"
|
||||
class="timeline-line"
|
||||
:class="{
|
||||
'timeline-line--done': step.state === 'done',
|
||||
'timeline-line--pending': step.state !== 'done',
|
||||
}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 右侧内容 -->
|
||||
<view class="timeline-content">
|
||||
<view class="flex items-center justify-between">
|
||||
<text
|
||||
class="text-28rpx font-bold"
|
||||
:class="step.state === 'pending' ? 'text-[#D1D5DB]' : 'text-[#1F2937]'"
|
||||
>
|
||||
{{ step.label }}
|
||||
</text>
|
||||
<text v-if="step.time" class="text-22rpx text-[#9CA3AF]">
|
||||
{{ step.time }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-if="step.operator" class="mt-4rpx text-24rpx text-[#9CA3AF]">
|
||||
{{ step.operator }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { formatDateTime } from '@/utils/date'
|
||||
|
||||
const props = defineProps<{
|
||||
status: number
|
||||
createTime?: string
|
||||
assignTime?: string
|
||||
acceptTime?: string
|
||||
completeTime?: string
|
||||
creatorName?: string
|
||||
assigneeName?: string
|
||||
}>()
|
||||
|
||||
type StepState = 'done' | 'current' | 'pending'
|
||||
|
||||
interface TimelineStep {
|
||||
key: string
|
||||
label: string
|
||||
state: StepState
|
||||
time?: string
|
||||
operator?: string
|
||||
}
|
||||
|
||||
const steps = computed<TimelineStep[]>(() => {
|
||||
// status: 0-待派发 1-进行中 2-已完成 3-已关闭
|
||||
const s = props.status
|
||||
|
||||
function getState(stepIndex: number): StepState {
|
||||
// 步骤映射: 0=创建 1=已派发 2=处理中 3=已完成
|
||||
if (s >= 2 && stepIndex <= 3)
|
||||
return 'done' // 已完成，全部 done
|
||||
if (s === 1 && stepIndex <= 1)
|
||||
return 'done' // 进行中，创建+派发 done
|
||||
if (s === 1 && stepIndex === 2)
|
||||
return 'current'
|
||||
if (s === 0 && stepIndex === 0)
|
||||
return 'done' // 待派发，创建 done
|
||||
if (s === 0 && stepIndex === 1)
|
||||
return 'current'
|
||||
return 'pending'
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
key: 'created',
|
||||
label: '创建工单',
|
||||
state: getState(0),
|
||||
time: props.createTime ? formatDateTime(props.createTime) : undefined,
|
||||
operator: props.creatorName,
|
||||
},
|
||||
{
|
||||
key: 'assigned',
|
||||
label: '已派发',
|
||||
state: getState(1),
|
||||
time: props.assignTime ? formatDateTime(props.assignTime) : undefined,
|
||||
operator: props.assigneeName ? `负责人: ${props.assigneeName}` : undefined,
|
||||
},
|
||||
{
|
||||
key: 'processing',
|
||||
label: '处理中',
|
||||
state: getState(2),
|
||||
time: props.acceptTime ? formatDateTime(props.acceptTime) : undefined,
|
||||
},
|
||||
{
|
||||
key: 'completed',
|
||||
label: '已完成',
|
||||
state: getState(3),
|
||||
time: props.completeTime ? formatDateTime(props.completeTime) : undefined,
|
||||
},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.timeline {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
padding-bottom: 32rpx;
|
||||
|
||||
&--last {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--done {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
&--current {
|
||||
background: transparent;
|
||||
border: 4rpx solid #f97316;
|
||||
box-shadow: 0 0 0 6rpx rgba(249, 115, 22, 0.2);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
&--pending {
|
||||
background: transparent;
|
||||
border: 4rpx dashed #d1d5db;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
width: 4rpx;
|
||||
flex: 1;
|
||||
margin-top: 8rpx;
|
||||
min-height: 24rpx;
|
||||
|
||||
&--done {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
&--pending {
|
||||
background: #e5e7eb;
|
||||
border-left: 2rpx dashed #d1d5db;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
padding-top: 2rpx;
|
||||
min-height: 48rpx;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 6rpx rgba(249, 115, 22, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 12rpx rgba(249, 115, 22, 0.08);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user