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

## 背景

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