docs: define leads detail dialog visual design

docs/superpowers/specs/2026-08-27-leads-detail-dialog-design.md

@@ -0,0 +1,55 @@
+# 线索详情弹窗视觉优化设计说明
+
+## 背景
+
+当前 `WonderQ-Admin-UI-Vue` 的线索详情弹窗使用四列无分组信息网格。联系人、联系方式、需求类型、提交时间、目的地和出行日期在同一视觉层级中展示，长联系方式容易挤压其他字段；备注区域与基础信息的层次也不够明确。
+
+本次采用已确认的 A 方案「信息分组卡片」，目标是在不改变接口、数据结构和状态操作的前提下，提高线索详情的扫描效率和信息层次。
+
+## 设计目标
+
+- 保留现有线索详情字段、状态下拉操作、用车行程和备注内容。
+- 用两列信息卡片承载基础字段，降低长文本对布局的影响。
+- 让状态操作、基础信息、用车行程和备注形成清晰的阅读顺序。
+- 沿用项目现有蓝色主色、浅色背景、细边框和 Element Plus 视觉语言。
+- 弹窗窄屏时从两列退化为一列，长联系方式和日期自然换行。
+
+## 非目标
+
+- 不修改 Admin API、请求参数、响应字段、鉴权或状态流转逻辑。
+- 不新增字段、筛选能力、按钮或业务动作。
+- 不重构通用弹窗组件或全局主题，只调整线索详情所需的局部模板和样式。
+
+## 页面结构
+
+弹窗内容顺序固定为：
+
+1. Element Plus 弹窗标题和关闭操作。
+2. 状态摘要行：当前状态标签 + 权限控制的状态选择器。
+3. 基础信息卡片：联系人、联系方式、需求类型、提交时间、目的地、出行日期，两列排列。
+4. 条件区块：仅当存在 `vehicleDemand` 时展示用车行程。
+5. 备注区块：展示特殊要求、备注或空态文案。
+
+基础信息卡片使用统一边框容器和细分隔线；每个字段采用“弱化标签 + 强化值”的两级排版。联系方式使用 `overflow-wrap: anywhere`，确保测试串和真实长联系方式不会撑破弹窗。
+
+## 视觉与交互规则
+
+- 弹窗主体保持白色，信息卡片使用项目现有的 `--line`、`--muted`、`--ink` 等变量。
+- 状态行与信息卡片之间使用稳定的垂直间距，不额外增加装饰性渐变、光晕或重阴影。
+- 用车行程和备注继续使用浅色区块，区块标题增加左侧短强调线，帮助快速定位。
+- 状态选择器继续由 `v-permission="'admin:leads:update'"` 控制，加载状态继续使用 `updatingId`。
+- 所有内容仍通过当前 `selectedLead`、`formatDate` 和 `leadStatusLabel` 渲染，不引入新的数据源。
+
+## 响应式规则
+
+- 默认弹窗宽度仍由现有 `width="min(720px, 94vw)"` 控制。
+- 宽度小于 640px 时，基础信息由两列切换为一列。
+- 字段值允许换行，避免水平滚动和文本截断。
+- 用车行程和备注区块保持完整宽度，按钮与状态操作不改变现有权限行为。
+
+## 实施范围与验证
+
+- 修改 `WonderQ-Admin-UI-Vue/src/pages/LeadsPage.vue`：为基础信息增加语义化分组标记，保留现有业务表达式。
+- 修改 `WonderQ-Admin-UI-Vue/src/styles.css`：调整详情弹窗的网格、信息卡片、区块标题、长文本和响应式规则。
+- 更新 `WonderQ-Admin-UI-Vue/src/pages/LeadsPage.test.ts`：增加模板结构回归检查，确保六个基础字段、状态选择器和备注区块未被遗漏。
+- 运行 `yarn test` 和 `yarn build`；再通过本地浏览器检查普通线索、长联系方式、用车线索和窄屏布局。