修改为客源列表_UI设计
This commit is contained in:
@@ -214,16 +214,16 @@
|
||||
|
||||
**[搜索区域]**
|
||||
|
||||
| 属性 | 说明 |
|
||||
|---|---|
|
||||
| 组件 | 搜索输入框 + 下拉范围选择 |
|
||||
| 容器 | `bg-white rounded-lg border border-neutral-200 px-4 py-3 mt-3` |
|
||||
| 搜索框左侧 | 下拉范围选择器「客户信息 ▾」（`select` 元素，`text-sm text-neutral-600`），选项：客户信息（默认）/ 客源编号 |
|
||||
| 搜索输入框 | `w-80 pl-3 pr-10 py-2 border border-neutral-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-600/40` |
|
||||
| 搜索触发 | 输入后 300ms debounce + Enter 键 + 搜索按钮点击；HTMX `hx-trigger="keyup changed delay:300ms, search"` |
|
||||
| 搜索图标按钮 | Heroicon `magnifying-glass`，`bg-primary-600 text-white w-9 h-9 rounded-lg` |
|
||||
| 已存搜索 | 搜索框右侧：「✦ N条已存搜索 ▾」下拉展开历史搜索条件列表 |
|
||||
| 收起/展开筛选 | 最右侧文字链接：「收起筛选 ∧」/ 「展开筛选 ∨」，Alpine.js 控制筛选区展开状态 |
|
||||
| 属性 | 说明 |
|
||||
| ------- | -------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 组件 | 搜索输入框 + 下拉范围选择 |
|
||||
| 容器 | `bg-white rounded-lg border border-neutral-200 px-4 py-3 mt-3` |
|
||||
| 搜索框左侧 | 下拉范围选择器「客户信息 ▾」（`select` 元素，`text-sm text-neutral-600`），选项：客户信息（默认）/ 小区 |
|
||||
| 搜索输入框 | `w-80 pl-3 pr-10 py-2 border border-neutral-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-600/40` |
|
||||
| 搜索触发 | 输入后 300ms debounce + Enter 键 + 搜索按钮点击；HTMX `hx-trigger="keyup changed delay:300ms, search"` |
|
||||
| 搜索图标按钮 | Heroicon `magnifying-glass`，`bg-primary-600 text-white w-9 h-9 rounded-lg` |
|
||||
| 已存搜索 | 搜索框右侧：「✦ N条已存搜索 ▾」下拉展开历史搜索条件列表 |
|
||||
| 收起/展开筛选 | 最右侧文字链接：「收起筛选 ∧」/ 「展开筛选 ∨」，Alpine.js 控制筛选区展开状态 |
|
||||
|
||||
```html
|
||||
<div class="bg-white rounded-lg border border-neutral-200 px-4 py-3 mt-3"
|
||||
@@ -378,17 +378,18 @@
|
||||
|
||||
整体容器：`space-y-2`，每行：`flex items-center flex-wrap gap-x-3 gap-y-1.5 text-sm`
|
||||
|
||||
| 筛选组 | 标签宽 | 选项形式 | 特殊说明 |
|
||||
|---|---|---|---|
|
||||
| 状态 | `w-6 text-xs text-neutral-400` | 单选 Tag 按钮组 | Tab 决定显示哪些选项；激活为 `bg-primary-600 text-white`，默认为「不限」 |
|
||||
| 需求 | 同上 | 单选 Tag 按钮组 | 二手/新房（求购）；租房（求租） |
|
||||
| 等级 | 同上 | 单选/多选 Tag 按钮组 | A急迫/A/B较强/C一般/D较弱/E暂不关注/未填写 |
|
||||
| 位置 | 同上 | 多选 Tag 按钮组（可滚动） | 宝山/崇明/...共19个区 |
|
||||
| 购价（求购Tab） | 同上 | 单选 Tag + 自定义区间输入 | 预设区间 + 「最小值」「~」「最大值」万 |
|
||||
| 租价（求租Tab） | 同上 | 单选 Tag + 自定义区间输入 | 预设区间 + 「最小值」「~」「最大值」元 |
|
||||
| 房室 | 同上 | 单选 Tag + 「是大价值」复选框（求购） | 不限/1居/2居/3居/4居/5居及以上 |
|
||||
| 筛选（展开） | 同上 | 各类下拉/DateRange | 含「展开 ∨」按钮；相关方/委托日期/来源/购房目的/带看进度/活跃情况/是否有效/面积/跟进时间/带看时间/审批中/审批驳回/收藏客源 |
|
||||
| 筛选（收起后隐藏） | 同上 | 各类 Checkbox/下拉 | 保护客/合作者/偏好新房/巧客力访客/置顶/用途/带看次数 |
|
||||
| 筛选组 | 标签宽 | 选项形式 | 特殊说明 |
|
||||
| --------- | ------------------------------ | ---------------------- | -------------------------------------------------------------------- |
|
||||
| 状态 | `w-6 text-xs text-neutral-400` | 单选 Tag 按钮组 | Tab 决定显示哪些选项；激活为 `bg-primary-600 text-white`，默认为「不限], 「求购]，「租购] |
|
||||
| 需求 | 同上 | 单选 Tag 按钮组 | 二手/新房（求购）；租房（求租） |
|
||||
| 等级 | 同上 | 单选 Tag 按钮组 | A急迫/B较强/C一般/D较弱/E暂不关注/未填写 |
|
||||
| 位置 | 同上 | 单选Tag 按钮组 | 宝山/崇明/...共19个区， |
|
||||
| 区域 | 同上 | 单选Tag按钮组 | 位置选择后出现二级区域选择 |
|
||||
| 购价（求购Tab） | 同上 | 单选 Tag + 自定义区间输入 | 预设区间 + 「最小值」「~」「最大值」万 |
|
||||
| 租价（求租Tab） | 同上 | 单选 Tag + 自定义区间输入 | 预设区间 + 「最小值」「~」「最大值」元 |
|
||||
| 居室 | 同上 | 单选 Tag + 「是大价值」复选框（求购） | 不限/1居/2居/3居/4居/5居及以上 |
|
||||
| 筛选（展开） | 同上 | 各类下拉/DateRange | 含「展开 ∨」按钮；相关方/委托日期/来源/购房目的/带看进度/活跃情况/是否有效/面积/跟进时间/带看时间/审批中/审批驳回/收藏客源 |
|
||||
| 筛选（收起后隐藏） | 同上 | 各类 Checkbox/下拉 | 保护客/合作者/偏好新房/巧客力访客/置顶/用途/带看次数 |
|
||||
|
||||
**Tag 按钮通用样式**：
|
||||
```html
|
||||
@@ -431,12 +432,12 @@ HTMX 行为：所有筛选变更统一通过 `hx-get="/clients/private/" hx-trig
|
||||
|
||||
**[工具栏区]**
|
||||
|
||||
| 属性 | 说明 |
|
||||
|---|---|
|
||||
| 组件 | Toolbar（§4 Toolbar） |
|
||||
| 容器 | `flex items-center justify-between px-4 py-2.5 bg-white border-b border-neutral-100` |
|
||||
| 左侧 | 批量操作按钮组（勾选时激活）+ 总条数文字 |
|
||||
| 右侧 | 导出按钮 + 自定义列表按钮 |
|
||||
| 属性 | 说明 |
|
||||
| --- | ------------------------------------------------------------------------------------ |
|
||||
| 组件 | Toolbar（§4 Toolbar） |
|
||||
| 容器 | `flex items-center justify-between px-4 py-2.5 bg-white border-b border-neutral-100` |
|
||||
| 左侧 | 批量操作按钮组（勾选时激活）+ 总条数文字 |
|
||||
| 右侧 | 导出按钮 + 自定义列表按钮 |
|
||||
|
||||
**批量操作按钮（勾选 ≥1 条后变为可点击）**：
|
||||
|
||||
@@ -654,17 +655,17 @@ HTMX 行为：所有筛选变更统一通过 `hx-get="/clients/private/" hx-trig
|
||||
|
||||
#### 2.1.4 使用的特殊组件
|
||||
|
||||
| 组件名 | 来源（§章节） | 用途 | 自定义说明 |
|
||||
|---|---|---|---|
|
||||
| Data Table | §1 Data Table | 客源数据主体展示 | 行高兼容双行（姓名+活跃度标签），允许 `min-h-14 h-auto` |
|
||||
| Pagination | §2 Pagination | 底部分页控件 | 新增跳页输入框，与标准实现一致 |
|
||||
| Column Visibility Panel | §3 Column Visibility Panel | 自定义列表字段选择 | 触发按钮为「自定义列表」文字 + 图标 |
|
||||
| Toolbar | §4 Toolbar | 批量操作 + 导出 + 统计 | 批量按钮默认 disabled，selectedCount > 0 激活 |
|
||||
| Export Button | §5 Export Button | 导出 Excel | HTMX `hx-post` 异步触发 Celery 任务 |
|
||||
| Tab Navigation | §10 Tab Navigation | 一级/二级 Tab 切换 | 一级用 underline 样式，二级用 pill 样式 |
|
||||
| Date Range Picker | §9 Date Range Picker | 「录入时间」「委托日期」「跟进时间」筛选 | 集成 Flatpickr，range 模式 |
|
||||
| Multi-select Tag Input | §17 Multi-select Tag Input | 位置（多选区）、等级（多选）筛选 | 无需 Tag Input 样式，直接用按钮多选组 |
|
||||
| Modal Dialog | §7 Modal Dialog | 自定义列弹窗 | 见§4.1 自定义列弹窗规范 |
|
||||
| 组件名 | 来源（§章节） | 用途 | 自定义说明 |
|
||||
| ----------------------- | -------------------------- | -------------------- | ------------------------------------- |
|
||||
| Data Table | §1 Data Table | 客源数据主体展示 | 行高兼容双行（姓名+活跃度标签），允许 `min-h-14 h-auto` |
|
||||
| Pagination | §2 Pagination | 底部分页控件 | 新增跳页输入框，与标准实现一致 |
|
||||
| Column Visibility Panel | §3 Column Visibility Panel | 自定义列表字段选择 | 触发按钮为「自定义列表」文字 + 图标 |
|
||||
| Toolbar | §4 Toolbar | 批量操作 + 导出 + 统计 | 批量按钮默认 disabled，selectedCount > 0 激活 |
|
||||
| Export Button | §5 Export Button | 导出 Excel | HTMX `hx-post` 异步触发 Celery 任务 |
|
||||
| Tab Navigation | §10 Tab Navigation | 一级/二级 Tab 切换 | 一级用 underline 样式，二级用 pill 样式 |
|
||||
| Date Range Picker | §9 Date Range Picker | 「录入时间」「委托日期」「跟进时间」筛选 | 集成 Flatpickr，range 模式 |
|
||||
| Multi-select Tag Input | §17 Multi-select Tag Input | 位置（多选区）、等级（多选）筛选 | 无需 Tag Input 样式，直接用按钮多选组 |
|
||||
| Modal Dialog | §7 Modal Dialog | 自定义列弹窗 | 见§4.1 自定义列弹窗规范 |
|
||||
|
||||
#### 2.1.5 空状态设计
|
||||
|
||||
@@ -1089,15 +1090,15 @@ buy_or_rent（租购）→ public（公客）[不可逆]
|
||||
|
||||
## 9. 开放问题（待决策）
|
||||
|
||||
| # | 问题 | 影响范围 | 待确认方 |
|
||||
|---|---|---|---|
|
||||
| 1 | 「资料客」「营销客」Tab 在 MVP 阶段是否展示为灰色禁用 Tab，还是直接不显示？ | 一级 Tab 导航 §2.1.3 | 产品经理 |
|
||||
| 2 | 二级 Tab 上的客源数量 Badge（如「求购 913」）是否实时计数？若是，是否有性能开销？建议改为后端分 Tab 预聚合或缓存 | 二级 Tab §2.1.3 | 后端 + 产品 |
|
||||
| 3 | 「与我相关」和「我部门相关」的精确业务定义：经纪人同时是首录人和归属人时，「与我相关」指 `owner_id=me OR first_recorder_id=me`？还是仅 `owner_id=me`？ | 快捷筛选行 §2.1.3 | 产品经理 |
|
||||
| 4 | 「即将掉公」筛选的时间阈值（距自动转公还有多少天开始提示）是运营后台可配置项还是硬编码？需要前端在筛选行旁边展示剩余天数吗？ | 快捷筛选行 | 产品 + 后端 |
|
||||
| 5 | 价格筛选的自定义区间输入：用户手动输入后是否需要点击「搜索」按钮才触发，还是 blur 后自动 HTMX？（与其他 Tag 筛选项行为需统一） | 价格筛选 §2.1.3 | 产品经理 |
|
||||
| 6 | 表格「最近时间」列：PRD 写的是「最近时间」（最近跟进或带看的距今天数），截图中显示「N天前」+ 日期（如`2026-04-19`）两行，是否需要双行展示？ | 表格列定义 §2.1.3 | 产品经理（截图已有双行，建议对齐截图） |
|
||||
| 7 | 导出功能：Celery 异步生成后如何通知用户下载？WebSocket Push / 轮询 / 下载中心页？MVP 阶段建议使用轮询+下载链接 Toast | 导出按钮 §2.1.3 | 后端 + 产品 |
|
||||
| 8 | 批量合并客源：需要独立的合并规则弹窗（选择主记录 + 字段合并规则），复杂度高，是否降级到 P2？ | 工具栏批量操作 | 产品经理 |
|
||||
| 9 | 转成交弹窗中「成交方」人员选择器：默认带入当前用户所属门店，支持修改的范围是全司还是当前用户权限内？ | 详情页转成交弹窗（待详情页文档） | 产品 + 后端 |
|
||||
| 10 | 活跃度标签「营销客」「销售客」「访客」的触发条件（截图可见但 DATA_MODEL_CLIENT.md 中的 `activity_level` 枚举不含这三项）：这些是 `source` 字段衍生的展示标签，还是独立的 `activity_level` 值？需后端澄清 | 活跃度标签渲染 §2.1.3 | 后端 |
|
||||
| # | 问题 | 影响范围 | 待确认方 |
|
||||
| --- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------------- |
|
||||
| 1 | 「资料客」「营销客」Tab 在 MVP 阶段是否展示为灰色禁用 Tab，还是直接不显示？ | 一级 Tab 导航 §2.1.3 | 产品经理 |
|
||||
| 2 | 二级 Tab 上的客源数量 Badge（如「求购 913」）是否实时计数？若是，是否有性能开销？建议改为后端分 Tab 预聚合或缓存 | 二级 Tab §2.1.3 | 后端 + 产品 |
|
||||
| 3 | 「与我相关」和「我部门相关」的精确业务定义：经纪人同时是首录人和归属人时，「与我相关」指 `owner_id=me OR first_recorder_id=me`？还是仅 `owner_id=me`？ | 快捷筛选行 §2.1.3 | 产品经理 |
|
||||
| 4 | 「即将掉公」筛选的时间阈值（距自动转公还有多少天开始提示）是运营后台可配置项还是硬编码？需要前端在筛选行旁边展示剩余天数吗？ | 快捷筛选行 | 产品 + 后端 |
|
||||
| 5 | 价格筛选的自定义区间输入：用户手动输入后是否需要点击「搜索」按钮才触发，还是 blur 后自动 HTMX？（与其他 Tag 筛选项行为需统一） | 价格筛选 §2.1.3 | 产品经理 |
|
||||
| 6 | 表格「最近时间」列：PRD 写的是「最近时间」（最近跟进或带看的距今天数），截图中显示「N天前」+ 日期（如`2026-04-19`）两行，是否需要双行展示？ | 表格列定义 §2.1.3 | 产品经理（截图已有双行，建议对齐截图） |
|
||||
| 7 | 导出功能：Celery 异步生成后如何通知用户下载？WebSocket Push / 轮询 / 下载中心页？MVP 阶段建议使用轮询+下载链接 Toast | 导出按钮 §2.1.3 | 后端 + 产品 |
|
||||
| 8 | 批量合并客源：需要独立的合并规则弹窗（选择主记录 + 字段合并规则），复杂度高，是否降级到 P2？ | 工具栏批量操作 | 产品经理 |
|
||||
| 9 | 转成交弹窗中「成交方」人员选择器：默认带入当前用户所属门店，支持修改的范围是全司还是当前用户权限内？ | 详情页转成交弹窗（待详情页文档） | 产品 + 后端 |
|
||||
| 10 | 活跃度标签「营销客」「销售客」「访客」的触发条件（截图可见但 DATA_MODEL_CLIENT.md 中的 `activity_level` 枚举不含这三项）：这些是 `source` 字段衍生的展示标签，还是独立的 `activity_level` 值？需后端澄清 | 活跃度标签渲染 §2.1.3 | 后端 |
|
||||
Reference in New Issue
Block a user