diff --git a/Project/fonrey/UI_DESIGN/客源_UI设计.md b/Project/fonrey/UI_DESIGN/客源_UI设计.md new file mode 100644 index 00000000..ac64ad69 --- /dev/null +++ b/Project/fonrey/UI_DESIGN/客源_UI设计.md @@ -0,0 +1,1243 @@ +# 客源列表 UI 设计文档 + +> **版本**:v1.0 · **日期**:2026-04-25 +> **依赖规范**:UI_SYSTEM.md v1.1 · 组件规范设计.md v1.0 +> **PRD 来源**:`Project/fonrey/PRD/客源管理/客源管理模块PRD.md` §5.1 客源列表 +> **优先级**:P0 功能在本文档中用 🔴 标注,P1 用 🟡,P2 用 ⚫ + +--- + +## 目录 + +1. [模块概述](#1-模块概述) + - 1.1 功能范围 + - 1.2 页面清单 + - 1.3 用户角色与权限差异 +2. [页面设计规范](#2-页面设计规范) + - 2.1 客源列表主页(私客视图) +3. [弹窗/抽屉设计规范](#3-弹窗抽屉设计规范) + - 3.1 改等级弹窗 + - 3.2 改状态弹窗 + - 3.3 转公客弹窗 + - 3.4 转成交弹窗 + - 3.5 转无效弹窗 + - 3.6 收藏夹选择弹窗 +4. [交互状态规范](#4-交互状态规范) + - 4.1 客源状态机 + - 4.2 权限控制矩阵 + - 4.3 HTMX 请求规范 +5. [关键数据字段说明](#5-关键数据字段说明) +6. [竞品截图对应关系](#6-竞品截图对应关系) +7. [实现优先级与工期估算](#7-实现优先级与工期估算) +8. [开放问题(待决策)](#8-开放问题待决策) + +--- + +## 1. 模块概述 + +### 1.1 功能范围 + +**P0 功能(MVP 必须实现)🔴** +- 私客列表展示(全部私客 / 求购 / 求租 / 暂缓 四个二级 Tab) +- 关键词搜索(姓名/号码/号码后4位/客源编号/备注) +- 多维度筛选(状态、等级、需求类型、位置、价格区间、房室) +- 展开更多筛选(相关方、委托日期、来源、购房目的等) +- 列表数据展示(含活跃度标签) +- 批量操作(修改相关方、修改来源、删除客源、合并客源) +- 分页与每页条数控制 +- 重复客源提示(私客与成交客重复、私客与公客重复、已删客源) +- 常用快捷筛选(即将掉公、录入时间、与我相关、我部门相关) + +**P1 功能(第一迭代)🟡** +- 已存搜索条件保存与快速调用 +- 导出当前筛选结果(Excel) +- 自定义列表显示字段 + +**P2 功能(路线图)⚫** +- 公客列表 Tab +- 成交客列表 Tab +- 暂缓私客高级操作 + +### 1.2 页面清单 + +| 页面名称 | URL 模式建议 | 优先级 | 对应 PRD 章节 | +|---|---|---|---| +| 客源列表(私客·全部) | `/clients/private/` | P0 🔴 | §5.1, Story 2 | +| 客源列表(私客·求购) | `/clients/private/?tab=buying` | P0 🔴 | §5.1, Story 3 | +| 客源列表(私客·求租) | `/clients/private/?tab=renting` | P0 🔴 | §5.1, Story 4 | +| 客源列表(私客·暂缓) | `/clients/private/?tab=suspended` | P2 ⚫ | §5.1, Story 5 | +| 客源列表(公客) | `/clients/public/` | P2 ⚫ | Story 12 | +| 客源列表(成交客) | `/clients/transacted/` | P2 ⚫ | Story 13 | + +### 1.3 用户角色与权限差异 + +| 差异点 | 经纪人 | 店长 | 管理员 | +|---|---|---|---| +| 默认数据范围 | 仅自己名下(`owner_id = me`) | 本门店全部(`org_unit_id IN my_stores`) | 全司所有 | +| 「与我相关」快捷筛选 | 可用(默认可能已激活) | 可用 | 可用 | +| 「我部门相关」快捷筛选 | 仅限自己所属部门 | 本门店 | 全司 | +| 批量删除 | 仅限自己名下客源 | 本门店客源 | 所有客源 | +| 合并客源 | 不可操作 | 可操作 | 可操作 | +| 重复客源提示数字链接 | 可见 | 可见 | 可见 | +| 「+ 新增私客」按钮 | 可见 | 可见 | 可见 | +| 导出按钮 | 仅自己数据 | 本门店数据 | 全量 | + +--- + +## 2. 页面设计规范 + +### 2.1 客源列表主页(私客视图)(P0 🔴) + +#### 2.1.1 页面概述 + +- **URL**:`/clients/private/`(query params:`tab`, `status`, `grade`, `page`, `q` 等) +- **访问入口**:顶部全局导航栏「客源」菜单 → 默认进入私客列表 +- **页面职责**:展示经纪人名下(或门店/全司)的私客列表,支持多维度搜索筛选、批量操作、状态快览 +- **竞品参考截图**: + - `Project/fonrey/screenshots/客源/全部私客.png`(主参考) + - `Project/fonrey/screenshots/客源/求购私客.png` + - `Project/fonrey/screenshots/客源/求租私客.png` + +#### 2.1.2 布局结构 + +``` +┌──────────────────────────────────────────────────────────────────────┐ +│ 一级 Tab 导航(私客 / 资料客 / 营销客 / 成交客 / 公客) │ +│ 右侧:重复检测提示 | 已删客源 | + 新增私客 按钮 │ +├──────────────────────────────────────────────────────────────────────┤ +│ 二级 Tab 导航(求购 / 求租 / 暂缓 / 全部私客) │ +├──────────────────────────────────────────────────────────────────────┤ +│ 搜索区域(关键词搜索 + 已存搜索快速调用 + 收起/展开筛选) │ +├──────────────────────────────────────────────────────────────────────┤ +│ 快捷筛选行(即将掉公 / 录入时间 / 与我相关 / 我部门相关) │ +├──────────────────────────────────────────────────────────────────────┤ +│ 分组筛选区(状态 / 需求 / 等级 / 位置 / 购价或租价 / 房室 / 更多筛选) │ +├──────────────────────────────────────────────────────────────────────┤ +│ 工具栏(批量操作 | 总条数显示 | 导出 | 自定义列表) │ +├──────────────────────────────────────────────────────────────────────┤ +│ 数据表格主体 │ +├──────────────────────────────────────────────────────────────────────┤ +│ 分页栏(上一页 / 页码 / 下一页 / 每页条数 / 跳页) │ +└──────────────────────────────────────────────────────────────────────┘ +``` + +整体页面背景:`bg-neutral-50` +主内容区外层容器:`max-w-[1600px] mx-auto px-6 py-4` +各区块背景:`bg-white rounded-lg border border-neutral-200` + +#### 2.1.3 区域详细规范 + +--- + +**[一级 Tab 导航区]** + +| 属性 | 说明 | +|---|---| +| 组件 | Tab Navigation(§10 Tab Navigation) | +| 位置 | 页面最顶部,紧贴全局顶导下方,无额外卡片容器,直接贴页面背景 | +| Tab 项 | 私客(激活)/ 资料客 / 营销客 / 成交客 / 公客 | +| 激活样式 | `border-b-2 border-primary-600 text-primary-600 font-medium` | +| 非激活样式 | `text-neutral-500 hover:text-neutral-700` | +| 右侧内容(绝对定位至 Tab 栏右侧) | 重复检测提示 + 「已删客源」链接 + 「+ 新增私客」按钮 | + +**重复检测提示区(Tab 栏右侧)**: + +```html +
| + + | ++ 姓名 + | + ++ 带看次数 + + | +
|---|---|---|
| + + | +
+
+
+ {{ client.contact_name }}
+
+
+
+
+ {% if client.grade %}
+ {{ client.grade_display }}
+ {% endif %}
+ {% if client.activity_level %}
+
+ {{ client.activity_level_display }}
+
+ {% endif %}
+
+ |
+
+ + + | +
暂无客源
+当前筛选条件下没有客源,尝试调整筛选条件
+ +