feat(plan): 添加计划书卡片状态标记
- 在卡片右上角显示计划书状态(生成中/已完成) - 生成中状态:黄色背景 + 橙色文字 - 已完成状态:绿色背景 + 深绿色文字 - 使用圆角徽章样式,与整体设计一致 影响文件: src/pages/plan/index.vue Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
1 changed file
with
28 additions
and
1 deletions
| ... | @@ -74,8 +74,16 @@ | ... | @@ -74,8 +74,16 @@ |
| 74 | </view> | 74 | </view> |
| 75 | </view> | 75 | </view> |
| 76 | </view> | 76 | </view> |
| 77 | + <!-- 状态标记 --> | ||
| 77 | <view class="ml-[24rpx]"> | 78 | <view class="ml-[24rpx]"> |
| 78 | - <!-- Status Badge or Icon could go here --> | 79 | + <view |
| 80 | + :class="[ | ||
| 81 | + 'status-badge', | ||
| 82 | + item.status === 'processing' ? 'status-processing' : 'status-generated' | ||
| 83 | + ]" | ||
| 84 | + > | ||
| 85 | + {{ item.status === 'processing' ? '生成中' : '已完成' }} | ||
| 86 | + </view> | ||
| 79 | </view> | 87 | </view> |
| 80 | </view> | 88 | </view> |
| 81 | 89 | ||
| ... | @@ -567,4 +575,23 @@ const onDelete = (item) => { | ... | @@ -567,4 +575,23 @@ const onDelete = (item) => { |
| 567 | :deep(.nut-tabs__content) { | 575 | :deep(.nut-tabs__content) { |
| 568 | display: none; | 576 | display: none; |
| 569 | } | 577 | } |
| 578 | + | ||
| 579 | +// 状态标记样式 | ||
| 580 | +.status-badge { | ||
| 581 | + padding: 8rpx 16rpx; | ||
| 582 | + border-radius: 9999rpx; | ||
| 583 | + font-size: 22rpx; | ||
| 584 | + font-weight: 500; | ||
| 585 | + white-space: nowrap; | ||
| 586 | +} | ||
| 587 | + | ||
| 588 | +.status-processing { | ||
| 589 | + background-color: #FEF3C7; | ||
| 590 | + color: #D97706; | ||
| 591 | +} | ||
| 592 | + | ||
| 593 | +.status-generated { | ||
| 594 | + background-color: #D1FAE5; | ||
| 595 | + color: #059669; | ||
| 596 | +} | ||
| 570 | </style> | 597 | </style> | ... | ... |
-
Please register or login to post a comment