zkxw/docs/superpowers/specs/2026-10-10-payment-detail-responsive-dialog-design.md

缴费明细弹窗响应式宽度与 Tag 收缩设计

背景

/#/market/cell-storage/payment-info 的「缴费明细」弹窗由 web-admin/src/components/business/sample-payment-detail-dialog/index.vue 提供。当前弹窗固定宽度为 1080px，基础信息区的「缴费方式」「缴费进度」Tag 又会被纵向 Flex 容器默认拉伸，导致展示过宽。

界面模式

• 页面模式：P08（状态 Tab 列表）
• 参考页：web-admin/src/views/cell-storage/payment-info/index.vue
• 本次修改对象：web-admin/src/components/business/sample-payment-detail-dialog/index.vue

设计

1. 将弹窗宽度从固定 1080px 改为 min(1200px, 90vw)。
   • 大屏最大宽度提升到 1200px，为缴费明细表格提供更多横向空间。
   • 视口不足时使用 90vw 自动收缩，避免固定宽度造成横向溢出。
2. 在基础信息字段容器内，让直接子级 el-tag 使用内容宽度并左对齐。
   • 仅影响基础信息区的 Tag。
   • 当前对应「缴费方式」「缴费进度」两个字段。
   • 不改变列表、批次状态 Tag、转账状态 Tag 或其他弹窗样式。

数据与交互

不修改接口、状态映射、数据结构和交互流程。弹窗打开、加载、编辑转账及保存逻辑保持不变。

验证

1. 先增加一个针对组件源码契约的失败检查，确认旧固定宽度和缺失的 Tag 收缩规则会被识别。
2. 完成样式修改后重跑检查，确认响应式宽度与 Tag 收缩规则存在。
3. 运行前端类型检查/构建，确认 Vue 模板与 SCSS 编译通过。
4. 更新 web-admin 代码知识图谱。

范围

仅修改缴费明细弹窗组件及必要的验证文件，不调整其他页面、不重构现有代码。