diff --git a/Project/fonrey/UI_DESIGN/客源_UI设计.md b/Project/fonrey/UI_DESIGN/客源列表_UI设计.md similarity index 84% rename from Project/fonrey/UI_DESIGN/客源_UI设计.md rename to Project/fonrey/UI_DESIGN/客源列表_UI设计.md index 777953f6..4ebea408 100644 --- a/Project/fonrey/UI_DESIGN/客源_UI设计.md +++ b/Project/fonrey/UI_DESIGN/客源列表_UI设计.md @@ -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
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 | 后端 |