From 2d3472f5c4d1462aae863173c936590565bc57f2 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Sat, 10 Oct 2026 16:59:16 +0800
Subject: [PATCH] docs: document responsive payment detail dialog adjustments

---
 ...payment-detail-responsive-dialog-design.md | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-10-10-payment-detail-responsive-dialog-design.md

diff --git a/docs/superpowers/specs/2026-10-10-payment-detail-responsive-dialog-design.md b/docs/superpowers/specs/2026-10-10-payment-detail-responsive-dialog-design.md
new file mode 100644
index 00000000..eeb65cea
--- /dev/null
+++ b/docs/superpowers/specs/2026-10-10-payment-detail-responsive-dialog-design.md
@@ -0,0 +1,38 @@
+# 缴费明细弹窗响应式宽度与 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` 代码知识图谱。
+
+## 范围
+
+仅修改缴费明细弹窗组件及必要的验证文件，不调整其他页面、不重构现有代码。