# 线索管理模块迁移方案 — 03 前端页面规格

> 来源：`shanxia/crm/web/src/views/crm/clue/` + README.md  
> UI 权威：`docs/web-admin-ui-spec-fresh-mint.md`；列表参照 `/#/demo/order`，表单弹窗参照 `ProtocolFormDialog` / `/#/demo/user`

---

## 页面 1：线索列表 `index.vue`

### 结构

1. `panel-top` 单标题「线索列表」+ 竖条
2. `panel-tabs`：我的线索 / 全部线索 / 待跟进 / 今日新增 / 已转化
3. `filter-block` + `filter-extra`（禁止筛选区内横线）
4. `list-toolbar`：已选 N 项 → 新增（唯一 primary）→ 分配 / 导出 / 导入 等描边
5. `list-body` + `el-table`（`stripe`，无 `border`）+ 分页 `list-pager-bar`
6. 内嵌弹窗组件：`form`、`followForm`、`convertForm`、`assignForm`、`invalidForm`（保持原 CRM 结构，不强行拆路由）

### 主要字段（筛选）

线索姓名、公司、手机、来源、等级、状态、行业、负责人、创建时间范围等（与原 CRM 一致）。

### 表格列（示例）

线索姓名（链接进详情）、公司、手机、来源/等级/状态（`el-tag`）、负责人、下次联系时间、跟进次数、创建时间、操作列 `fixed="right"` min-width ≥ 260。

### 操作与权限

| 操作 | v-auth / 权限 |
|------|----------------|
| 新增 | add |
| 导出 | export |
| 导入 | import |
| 查看 | query（跳详情） |
| 编辑 | edit |
| 跟进 | follow |
| 分配 | assign |
| 转化 | convert |
| 标无效 | invalid |
| 删除 | remove |

### API 调用（适配后）

见 `04-api-spec.md`；全部改为 `request.post('/web/crm/clue/...')` + 驼峰 body。

---

## 页面 2：线索详情 `detail.vue`

### 结构

- 左：基本信息 + 线索信息 + 需求描述
- 右：跟进统计 + 快捷按钮（转化、添加跟进）
- 下方：跟进记录表格 + 分页
- 子组件：`form`、`followForm`、`convertForm`

### 路由

- 原 CRM：`/crm/clue/detail?id=`
- 门户：`/#/crm/clue/detail/:id`（`hideInMenu` + `menuCode: crm:clue:query`）

### UI 适配要点

- 状态/等级/来源用 `el-tag` + 字典 `tagType`
- 按钮带 `<el-icon>` + 6px 间距
- 删除「转化」等主操作是否符合 Fresh Mint 色阶（避免滥用 danger 当主按钮）

---

## 页面 3~7：弹窗组件

| 文件 | 适配要点 |
|------|----------|
| `form.vue` | `dialog-form-layout`、`label-position="top"`、`form-grid-2`、长字段跨列 |
| `followForm.vue` | 附件走 `attachment-upload-field` 或门户统一上传组件 |
| `convertForm.vue` | 展示线索摘要 + 转化原因校验（≥20 字以 Java 为准） |
| `assignForm.vue` | 用户下拉 `fetchUserOptions` / `fetchUserList`（**禁止** `@/api/system/user`） |
| `invalidForm.vue` | 原因必填 |

---

## 页面 8：统计 `statistics/index.vue`（Phase B）

依赖 5 个 statistics API；后端就绪后再适配 ECharts。

---

## 前端适配检查表（每页完成后勾选）

- [ ] 无 `backdrop-filter` 模糊
- [ ] 工具栏非 `space-between` 甩按钮
- [ ] 表格列 `min-width`
- [ ] 弹窗 `align-center` + `scroll-to-error`
- [ ] 按钮均有图标
- [ ] 树/字典：标签语义色符合规范