计划卡片 — 状态变体

共 8 个变体，覆盖计划进度页的卡片展示。

一起学游泳
进度 45% 进行中
Q
刘小Q
进行中
蓝色进度条 + 蓝色"进行中"标签
一起爬香山 🏔
进度 100% ✓ 已完成
宁
宁白久
已完成
标题划线 + 绿色满进度 + 完成角标
一起做 100 道菜
进度 32% 进行中
Q
刘小Q
Hover
阴影浮现
一起去旅行 ✈️
进度 0% 计划中
宁
宁白久
计划中（未开始）
半透明 + 灰色进度条
攒钱买房 💰
进度 28% 进行中
宁
宁白久
Q
刘小Q
双人计划
两位作者头像都显示
一起跑半马 🏃
进度 90% 进行中
宁
宁白久
接近完成（>80%）
进度条变绿色，暗示即将完成
一起考驾照 🚗
进度 60% ⏰ 超期
Q
刘小Q
超期
琥珀色边框 + 超期标签
一起做 100 道菜
进度 32%（32/100） 进行中
🍳
🥗
🍰
+29
带打卡图片
底部展示最近 3 张打卡图片 + 更多计数

设计 Tokens

状态 进度条色 标签 边框
进行中 blue-400 blue-50 bg + blue-500 text border-[#e5e5e5]
已完成 green-500 green-50 bg + green-600 text border-[#e5e5e5]
接近完成 (>80%) green-400 blue-50 bg + blue-500 text border-[#e5e5e5]
计划中 (0%) #d4d4d4 #f5f5f5 bg + #737373 text border-[#e5e5e5] + opacity-75
超期 amber-400 amber-50 bg + amber-600 text border-2 border-amber-200