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

线索详情弹窗视觉优化设计说明

背景

当前 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；再通过本地浏览器检查普通线索、长联系方式、用车线索和窄屏布局。