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

Requirements Document

Introduction

本文档定义了结算页面（应结账款）UI优化的需求。当前页面存在视觉层次不清晰、信息密度过高、交互反馈不足等问题。本次优化旨在提升用户体验，使页面更加清晰、易用、美观。

Glossary

• Settlement System: 结算系统，管理商户应收账款的系统
• Merchant Group: 商户分组，按商户ID聚合的账款集合
• Settlement Item: 结算项，单个订单的应结账款记录
• Write-off: 消账，申请结算账款的操作
• Due Alert: 到期提醒，显示即将到期账款的警告组件
• Tab Navigation: 标签导航，用于切换未结/已结状态的导航组件

Requirements

Requirement 1

User Story: 作为用户，我希望到期提醒区域更加醒目且易于理解，以便快速识别需要关注的账款

Acceptance Criteria

1. WHEN the Due Alert component is displayed THEN the Settlement System SHALL use a distinct warning color scheme with amber background and red accent
2. WHEN the Due Alert contains multiple items THEN the Settlement System SHALL display them in a horizontally scrollable list with clear visual separation
3. WHEN a due item is rendered THEN the Settlement System SHALL display the due date and amount with appropriate font sizes and color contrast
4. WHEN the Due Alert has no items THEN the Settlement System SHALL hide the component completely

Requirement 2

User Story: 作为用户，我希望商户分组卡片具有更好的视觉层次，以便快速区分不同商户的账款信息

Acceptance Criteria

1. WHEN a Merchant Group card is rendered THEN the Settlement System SHALL apply rounded corners with 16rpx radius and subtle shadow
2. WHEN the merchant header is displayed THEN the Settlement System SHALL use a gradient background to distinguish it from the content area
3. WHEN a merchant has overdue settlements THEN the Settlement System SHALL display a prominent red badge next to the merchant name
4. WHEN the merchant total amount is shown THEN the Settlement System SHALL use large bold red text with minimum 32rpx font size

Requirement 3

User Story: 作为用户，我希望订单列表项具有清晰的视觉分隔和信息层次，以便快速浏览和理解账款详情

Acceptance Criteria

1. WHEN Settlement Items are displayed in a list THEN the Settlement System SHALL separate each item with a 1rpx border or 20rpx spacing
2. WHEN an order number is shown THEN the Settlement System SHALL display it in gray color with 26rpx font size
3. WHEN status badges are rendered THEN the Settlement System SHALL use color-coded backgrounds (green for settled, amber for unsettled, red for overdue)
4. WHEN amount values are displayed THEN the Settlement System SHALL use red color and bold weight for emphasis
5. WHEN date information is shown THEN the Settlement System SHALL use consistent formatting and gray color for labels

Requirement 4

User Story: 作为用户，我希望操作按钮具有明确的视觉反馈和层次，以便清楚地知道可以执行哪些操作

Acceptance Criteria

1. WHEN the batch write-off button is displayed THEN the Settlement System SHALL use a full-width blue gradient button with 16rpx vertical padding
2. WHEN the single write-off button is displayed THEN the Settlement System SHALL use an outlined style with blue border and text
3. WHEN a button is pressed THEN the Settlement System SHALL apply 0.8 opacity for visual feedback
4. WHEN buttons are rendered THEN the Settlement System SHALL use rounded corners with minimum 8rpx radius

Requirement 5

User Story: 作为用户，我希望标签导航清晰且响应迅速，以便在未结和已结账款之间快速切换

Acceptance Criteria

1. WHEN the Tab Navigation is displayed THEN the Settlement System SHALL fix it at the top of the viewport with white background
2. WHEN a tab is active THEN the Settlement System SHALL display a blue underline indicator with 4rpx height
3. WHEN tab text is rendered THEN the Settlement System SHALL use 28rpx font size with gray color for inactive and blue for active
4. WHEN a tab is clicked THEN the Settlement System SHALL update the active state and load corresponding data

Requirement 6

User Story: 作为用户，我希望空状态页面友好且信息明确，以便了解当前没有数据的原因

Acceptance Criteria

1. WHEN no settlement data exists THEN the Settlement System SHALL display a centered empty state component
2. WHEN the empty state is shown THEN the Settlement System SHALL include an icon with 4xl size and gray color
3. WHEN the empty message is displayed THEN the Settlement System SHALL use 28rpx font size with gray color
4. WHEN the empty state is rendered THEN the Settlement System SHALL position it with 200rpx top padding

Requirement 7

User Story: 作为用户，我希望整体页面具有一致的间距和对齐，以便获得专业和舒适的视觉体验

Acceptance Criteria

1. WHEN page content is rendered THEN the Settlement System SHALL use consistent 20rpx padding for main containers
2. WHEN cards are displayed THEN the Settlement System SHALL apply 20rpx bottom margin for vertical spacing
3. WHEN internal card content is shown THEN the Settlement System SHALL use 24rpx horizontal padding
4. WHEN text elements are aligned THEN the Settlement System SHALL maintain consistent baseline alignment across rows

Requirement 8

User Story: 作为用户，我希望颜色使用符合语义且具有良好的可读性，以便快速理解信息的重要性和状态

Acceptance Criteria

1. WHEN primary actions are displayed THEN the Settlement System SHALL use blue (#1890ff) as the primary color
2. WHEN amounts are shown THEN the Settlement System SHALL use red (#ff4d4f) to indicate financial values
3. WHEN success states are indicated THEN the Settlement System SHALL use green (#52c41a) with light green background
4. WHEN warning states are indicated THEN the Settlement System SHALL use amber (#faad14) with light yellow background
5. WHEN danger states are indicated THEN the Settlement System SHALL use red (#ff4d4f) with light red background
6. WHEN text hierarchy is established THEN the Settlement System SHALL use #333 for primary text, #666 for secondary, and #999 for tertiary