线索管理模块迁移方案 — 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`

结构

panel-top 单标题「线索列表」+ 竖条
panel-tabs：我的线索 / 全部线索 / 待跟进 / 今日新增 / 已转化
filter-block + filter-extra（禁止筛选区内横线）
list-toolbar：已选 N 项 → 新增（唯一 primary）→ 分配 / 导出 / 导入等描边
list-body + el-table（stripe，无 border）+ 分页 list-pager-bar
内嵌弹窗组件：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
按钮均有图标
树/字典：标签语义色符合规范

03-frontend-spec.md 3.1 KB История Исходник