one-pipe-system/openspec/changes/update-asset-information-responsive-layout/proposal.md

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