魔改antd的Timeline时间轴，你不是喜欢躺着吗？我让你横起来！不想使用Steps步骤条组件，想要用Timelin

大家好，好久不更新了，主要这几个月太忙也太懒了，不止不更新，也八股文都不看了，技术也不学了，真不是个好🐂🐎了

几个星期前，忘了什么时候了，就是有个需求： 实现进度条，类似下面的效果，也是我最终魔改antd react的Timeline时间轴组件的效果👇👇👇

不想使用Steps步骤条组件，想要用Timeline时间轴组件但不符合ui怎么办？没办法，只能我们来暴力魔改了。不多说，直接贴代码：

<Timeline>
	<Timeline.Item className={styles.changeColor} color={'#1890ff'}>
		<span>任务上报</span><br />
		<span style={spanStyle}>2024-09-03 11:41:34 <br /></span>
	</Timeline.Item>
	<Timeline.Item className={result.status === 'success' ? styles.changeColor : ''} color={result.status === 'disposal' ? '#1890ff' : result.status === 'success' ? '#1890ff' : '#dfdfdf'}>
		<span>已派发</span><br />
		<span style={spanStyle}>2024-09-03 11:41:34<br /></span>
	</Timeline.Item>
	<Timeline.Item color={result.status === 'success' ? '#1890ff' : '#dfdfdf'} >
		<span>处置完成</span><br />
		<span style={spanStyle}><br /></span>
	</Timeline.Item>
</Timeline>

小细节1--changeColor

color={result.status === 'success' ? '#1890ff' : '#dfdfdf'}是用来显示圆点的外环颜色

changeColor是用来修改圆点的背景色，它默认是灰色，如在“已派发”圆点中间有个灰点，而我们需要像“任务上报”一样的蓝，就需要用changeColor来修改样式，具体如下：

.changeColor{
    :global{
        .ant-timeline-item-tail{
            background-color: #1890ff !important;
        }
        .ant-timeline-item-head{
            background-color: #1890ff !important;
        }
    }
}

小细节2--线条

比较麻烦的还是修改线条，这里使用 定位 通过 top 和 left 来固定到对应好的位置，这个要具体调节

border-block-start: 2px solid rgba(5, 5, 5, 0.1);是用来控制灰色的线条颜色和大小，这个属性挺少见的，是CSS网格布局（CSS Grid Layout）的一部分，用于更精确地控制这些布局模型的边框样式。

完整代码：

父类名:global{
.ant-timeline {
    display: flex;
    justify-content: center;
    .ant-timeline-item{
        width: 180px;
        display: flex;
        justify-content: center;
    }
    .ant-timeline-item-tail{
        width: 100%;
        height: 2px;
        top: 5px;
        left: 85px;
        border-inline-start: none;
        border-block-start: 2px solid rgba(5, 5, 5, 0.1);
    }
    .ant-timeline-item-head{
        background-color: #dfdfdf ;
    }
    .ant-timeline-item-content{
        position: absolute;
        width: 100px;
        top: 15px;
        left: 35px;
    }
 }
}

小细节3--下面的文字

至于下面的文本显示，也是直接定位

const spanStyle = {
	fontSize: '12px',
	width: '120px',
	display: 'inline-block',
	position: 'absolute',
	left: '-25px',
	textAlign: 'center',
}

后话

ps:真希望有大佬能封装好用一点的案例组件，这样咱们打工人才有更多的时间摸鱼😋