shop-toy/.kiro/specs/settlement-ui-optimization/tasks.md

Implementation Plan

• 创建 SCSS 变量文件定义颜色系统、间距系统、圆角规范

• 定义可复用的 mixin（卡片样式、按钮样式、徽章样式）

• 确保所有设计令牌符合设计文档规范

• Requirements: 7.1, 7.2, 7.3, 8.1, 8.2, 8.3, 8.4, 8.5, 8.6

• 2. 优化到期提醒区域（DueAlert）

  • 实现琥珀色背景和警告图标的视觉设计
  • 创建横向滚动的到期项列表布局
  • 优化到期日期和金额的字体大小和颜色对比
  • 实现空状态时隐藏组件的逻辑
  • Requirements: 1.1, 1.2, 1.3, 1.4

• * 2.1 编写 Property 1 的属性测试

  • Property 1: Due Alert Visibility Consistency
  • Validates: Requirements 1.4

• 3. 优化标签导航（TabNavigation）

  • 实现固定在顶部的导航栏样式
  • 添加活动标签的蓝色下划线指示器
  • 优化标签文字的字体大小和颜色状态
  • 实现标签切换的平滑过渡动画
  • Requirements: 5.1, 5.2, 5.3, 5.4

• * 3.1 编写 Property 5 的属性测试

  • Property 5: Tab State Synchronization
  • Validates: Requirements 5.4

• 4. 优化商户分组卡片（MerchantGroup）

  • 实现圆角卡片样式（16rpx）和阴影效果
  • 创建渐变背景的商户头部设计
  • 实现逾期徽章的显示逻辑和样式
  • 优化商户总金额的字体大小和颜色（大号粗体红色）
  • Requirements: 2.1, 2.2, 2.3, 2.4

• * 4.1 编写 Property 2 的属性测试

  • Property 2: Merchant Grouping Completeness
  • Validates: Requirements 2.1

• * 4.2 编写 Property 7 的属性测试

  • Property 7: Overdue Badge Display Logic
  • Validates: Requirements 2.3

• 5. 优化订单列表项（OrderItem）

  • 实现订单项之间的视觉分隔（边框或间距）
  • 优化订单号的字体大小和颜色
  • 实现状态徽章的颜色编码系统（绿色/琥珀色/红色）
  • 优化金额显示的字体粗细和颜色
  • 统一日期信息的格式和标签颜色
  • Requirements: 3.1, 3.2, 3.3, 3.4, 3.5

• * 5.1 编写 Property 3 的属性测试

  • Property 3: Status Badge Color Mapping
  • Validates: Requirements 3.3

• * 5.2 编写 Property 4 的属性测试

  • Property 4: Amount Display Formatting
  • Validates: Requirements 3.4

• 6. 优化操作按钮样式

  • 实现批量消账按钮的全宽蓝色渐变样式
  • 实现单个消账按钮的描边样式
  • 添加按钮按下时的透明度反馈（0.8）
  • 统一按钮圆角规范（最小 8rpx）
  • Requirements: 4.1, 4.2, 4.3, 4.4

• * 6.1 编写 Property 6 的属性测试

  • Property 6: Button Interaction Feedback
  • Validates: Requirements 4.3

• 7. 优化空状态页面

  • 实现居中对齐的空状态组件布局
  • 添加大尺寸灰色图标（4xl）
  • 优化空状态消息的字体大小和颜色
  • 设置适当的顶部内边距（200rpx）
  • Requirements: 6.1, 6.2, 6.3, 6.4

• * 7.1 编写 Property 8 的属性测试

  • Property 8: Empty State Rendering
  • Validates: Requirements 6.1, 6.2, 6.3, 6.4

• 8. 全局样式调整和一致性检查

  • 验证所有容器使用一致的 20rpx 内边距
  • 验证所有卡片使用 20rpx 底部外边距
  • 验证卡片内容使用 24rpx 水平内边距
  • 检查文本元素的基线对齐一致性
  • Requirements: 7.1, 7.2, 7.3, 7.4

• * 8.1 编写 Property 9 的属性测试

  • Property 9: Spacing Consistency
  • Validates: Requirements 7.1, 7.2, 7.3

• * 8.2 编写 Property 10 的属性测试

  • Property 10: Color Semantic Consistency
  • Validates: Requirements 8.1, 8.2, 8.3, 8.4, 8.5, 8.6

• 9. 响应式和性能优化

  • 验证 rpx 单位在不同屏幕尺寸下的适配效果
  • 优化固定导航栏在 H5 环境的顶部偏移
  • 确保横向滚动在小屏幕设备上流畅运行
  • 验证大列表使用 v-if 的条件渲染性能
  • Requirements: 所有需求的性能和响应式方面

• 10. 最终检查点 - 确保所有测试通过

  • 确保所有测试通过，如有问题请询问用户