优化报销功能

uniapp/src/styles/page-common.scss

@@ -85,6 +85,136 @@
 	}
 }
 
+// ============ 审批流时间线 ============
+// 头像（姓名首字）+ 右下状态角标 + 姓名/说明 + 时间 + 意见气泡，节点之间虚线连接。
+// 用法：页面 scoped 样式里 `@include flow-timeline;`，根节点用 .timeline-list，
+// 每个节点用 .tl-item（.tl-rail / .tl-avatar-wrap / .tl-avatar / .tl-badge / .tl-line / .tl-main ...）。
+@mixin flow-timeline {
+	.timeline-list {
+		display: flex;
+		flex-direction: column;
+		padding: 4rpx 0 8rpx;
+	}
+
+	.tl-item {
+		display: flex;
+		gap: 20rpx;
+
+		&.current .tl-name { color: $color-primary; }
+		&.edge .tl-name { font-weight: 500; }
+	}
+
+	.tl-rail {
+		width: 76rpx;
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.tl-avatar-wrap {
+		position: relative;
+		width: 72rpx;
+		height: 72rpx;
+		flex-shrink: 0;
+	}
+
+	.tl-avatar {
+		width: 72rpx;
+		height: 72rpx;
+		border-radius: 16rpx;
+		background: linear-gradient(135deg, #60a5fa, #2563eb);
+		color: #ffffff;
+		font-size: 30rpx;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&.avatar-end {
+			background: linear-gradient(135deg, #cbd5e1, #94a3b8);
+		}
+	}
+
+	.tl-badge {
+		position: absolute;
+		right: -10rpx;
+		bottom: -10rpx;
+		box-sizing: border-box;
+		min-width: 32rpx;
+		height: 32rpx;
+		padding: 0 6rpx;
+		border-radius: 16rpx;
+		border: 4rpx solid #ffffff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 20rpx;
+		line-height: 1;
+		color: #ffffff;
+
+		&.badge-pass { background: #16a34a; }
+		&.badge-running { background: #f59e0b; }
+		&.badge-reject { background: #ef4444; }
+		&.badge-skip { background: #94a3b8; }
+	}
+
+	.tl-line {
+		flex: 1;
+		width: 0;
+		margin-top: 8rpx;
+		border-left: 2rpx dashed #cbd5e1;
+	}
+
+	.tl-main {
+		flex: 1;
+		min-width: 0;
+		padding-bottom: 36rpx;
+	}
+
+	.tl-head {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 16rpx;
+	}
+
+	.tl-title {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.tl-name {
+		font-size: 30rpx;
+		font-weight: 600;
+		color: $color-text;
+	}
+
+	.tl-sub {
+		display: block;
+		margin-top: 4rpx;
+		font-size: 24rpx;
+		color: $color-text-muted;
+	}
+
+	.tl-time {
+		flex-shrink: 0;
+		font-size: 24rpx;
+		color: $color-text-muted;
+	}
+
+	.tl-comment {
+		margin-top: 16rpx;
+		padding: 20rpx 22rpx;
+		background: #f1f5f9;
+		border-radius: 12rpx;
+		font-size: 26rpx;
+		color: $color-text-secondary;
+		line-height: 1.6;
+		word-break: break-all;
+	}
+}
+
 // 居中弹窗（非贴底）：宽屏下把固定定位的遮罩面板限制为列宽并水平+垂直居中
 @mixin dialog-responsive($w: 560px) {
 	@media (min-width: 560px) {