fix:修改bug: 虚流量关闭的时候还是显示了
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m46s
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m46s
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
# Change: 资产信息页全页面响应式适配
|
||||
|
||||
## Why
|
||||
|
||||
资产信息页从资产查询、基础信息、当前生效套餐、套餐列表、钱包流水到操作审计日志包含大量描述项、操作按钮、筛选器和表格。当前小屏幕下存在固定宽度输入框、横向统计项和卡片头部内容挤压的问题,导致页面显示混乱。
|
||||
|
||||
## What Changes
|
||||
|
||||
- 对资产信息页从搜索框到最底部操作审计日志进行响应式适配。
|
||||
- 小屏幕下搜索输入、查询、同步、返回上次搜索等操作应换行或纵向排列,避免横向溢出。
|
||||
- 基础信息、设备实时信息和当前生效套餐描述项应根据屏幕宽度减少列数。
|
||||
- 当前生效套餐的真/虚流量统计应在小屏下纵向堆叠,并保持进度条和百分比可读。
|
||||
- 套餐列表、钱包流水、操作审计日志等表格区域应在小屏下使用容器横向滚动承载表格,而不是撑破页面。
|
||||
- 钱包和操作审计日志的筛选器、分页器、卡片头部操作应在窄屏下换行并占满可用宽度。
|
||||
- 不改变现有接口、权限、业务数据和操作行为。
|
||||
|
||||
## Impact
|
||||
|
||||
- Affected specs:
|
||||
- `asset-information-responsive-layout`
|
||||
- Affected code:
|
||||
- `src/views/asset-management/asset-information/index.vue`
|
||||
- `src/views/asset-management/asset-information/components/AssetSearchCard.vue`
|
||||
- `src/views/asset-management/asset-information/components/BasicInfoCard.vue`
|
||||
- `src/views/asset-management/asset-information/components/CurrentPackageCard.vue`
|
||||
- `src/views/asset-management/asset-information/components/PackageListCard.vue`
|
||||
- `src/views/asset-management/asset-information/components/WalletTransactionCard.vue`
|
||||
- `src/views/asset-management/asset-information/components/OperationLogsCard.vue`
|
||||
@@ -0,0 +1,49 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Asset Information Responsive Layout
|
||||
|
||||
The asset information page SHALL provide responsive layouts from the asset search area through the bottom operation audit log area so the page remains readable and operable on desktop, tablet, and mobile-width screens.
|
||||
|
||||
The responsive layout MUST NOT change existing API calls, permission checks, emitted events, business calculations, or displayed data semantics.
|
||||
|
||||
#### Scenario: Search area fits small screens
|
||||
|
||||
- **GIVEN** 用户在小屏幕设备上打开资产信息页
|
||||
- **WHEN** 页面渲染资产查询区域
|
||||
- **THEN** 搜索输入框 MUST NOT use a fixed width that exceeds the viewport
|
||||
- **AND** 查询、同步、返回上次搜索等按钮 MUST wrap or stack without causing page-level horizontal overflow
|
||||
- **AND** ICCID 放大提示 MUST fit within the viewport width
|
||||
|
||||
#### Scenario: Information cards reduce columns on narrow screens
|
||||
|
||||
- **GIVEN** 用户在平板或手机宽度打开资产信息页
|
||||
- **WHEN** 页面渲染基础信息、设备实时信息或当前生效套餐详情
|
||||
- **THEN** 描述项列数 MUST reduce according to available width
|
||||
- **AND** long identifiers or status text MUST wrap or truncate within their container instead of pushing the page wider
|
||||
|
||||
#### Scenario: Flow usage sections remain readable
|
||||
|
||||
- **GIVEN** 用户在小屏幕设备上查看当前生效套餐
|
||||
- **WHEN** 页面渲染真流量或虚流量使用区域
|
||||
- **THEN** flow statistic sections MUST stack vertically when horizontal space is insufficient
|
||||
- **AND** progress bars and percentages MUST remain visible and aligned within the card
|
||||
|
||||
#### Scenario: Tables scroll within their card on small screens
|
||||
|
||||
- **GIVEN** 用户在小屏幕设备上查看套餐列表、钱包流水或操作审计日志
|
||||
- **WHEN** table columns exceed the available content width
|
||||
- **THEN** the table container MUST provide horizontal scrolling
|
||||
- **AND** the overall page MUST NOT be widened by the table
|
||||
|
||||
#### Scenario: Filters and pagination adapt to narrow screens
|
||||
|
||||
- **GIVEN** 用户在小屏幕设备上查看钱包流水或操作审计日志
|
||||
- **WHEN** 页面渲染筛选器或分页器
|
||||
- **THEN** filter controls MUST wrap or stack within the card
|
||||
- **AND** pagination MUST remain reachable without overlapping adjacent content
|
||||
|
||||
#### Scenario: Desktop layout remains unchanged in behavior
|
||||
|
||||
- **GIVEN** 用户在桌面宽度打开资产信息页
|
||||
- **WHEN** 页面渲染资产信息内容
|
||||
- **THEN** existing business actions, permissions, table operations, and data displays MUST continue to behave as before
|
||||
@@ -0,0 +1,10 @@
|
||||
## 1. Implementation
|
||||
|
||||
- [x] 1.1 适配资产查询卡片的输入框、按钮组和放大提示在小屏下的布局
|
||||
- [x] 1.2 适配资产信息页主容器、卡片间距和卡片头部在小屏下的布局
|
||||
- [x] 1.3 适配基础信息与设备实时信息描述项在中小屏下的列数和操作按钮换行
|
||||
- [x] 1.4 适配当前生效套餐流量统计和套餐详情描述项在小屏下的布局
|
||||
- [x] 1.5 适配套餐列表表格、流量列和分页器在小屏下的横向滚动与换行
|
||||
- [x] 1.6 适配钱包流水筛选器、表格和分页器在小屏下的布局
|
||||
- [x] 1.7 适配操作审计日志筛选器、表格和分页器在小屏下的布局
|
||||
- [x] 1.8 完成 OpenSpec 严格校验
|
||||
Reference in New Issue
Block a user