108 lines
6.3 KiB
Markdown
108 lines
6.3 KiB
Markdown
# 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
|